@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;700&display=swap');
    
    *
    {
        margin: 0;
        padding: 0;
    }
    html, body
    {
        font-family: 'Exo 2', sans-serif;
        font-size: 24;
        height: 100%;
        background-color: #9CAFCF;
        display: flex;
        flex-direction: column;
    }

    html
    {
        scroll-behavior: smooth;
    }

    /*Header start*/


    header
    {
        flex-direction: row;
        background-color: #FFFFFF;
        width: 100%;
    }
    nav
    {
        display: flex;
        justify-content: space-between;
        height: 100%;
        text-align: center;
    }
    .logo
    {
        margin: 20px;
    }
    .Navigation
    {
        display: flex; /* Используем flexbox */
        align-items: center; /* Выравниваем текст внизу */
        justify-content: center; /* Центрируем текст по горизонтали */
        text-align: center;
        font-size: 20px;
        padding: 20px;
        color: #5A77AC;
        text-decoration: none;
    }
    .Navigation:hover
    {
        color: #FFFFFF;
        background-color: #5A77AC;
    }
    .nav_panel
    {
        text-align: center;
        height: 100%;
    }

    /*Header end*/


    /*Main start*/


    p
    {
        font-size: 20px;
    }
    main
    {
        padding: 40px;
        flex: 1;
    }

    #button_header, .Header_1 
    {
            font-size: 38px;
            font-weight: bold;
            color: #505050;
    }
    .Header_2 
    {
        font-size: 28px;
        font-weight: bold;
        color: #505050;
    }
    .SubTitle 
    {
        font-size: 22px;
        color: #505050;
    }
    .container 
    {
        background-color: white;
        width: 100%;
        max-width:  100%;
        border-radius: 8px; 
    }

    .course-banner 
    {
        max-width:  100%;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }
    .course-info 
    {
        padding: 40px 80px 80px 40px;
    }
    .info-grid 
    {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        margin-top: 40px;
    }
    .info-item 
    {
        flex: 1;      
        text-align: center;
        margin: 10px;
    }
    .info-grid2 {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки */
        grid-template-rows: auto; /* Автоматическая высота строк */
        align-items: center; /* Выравнивание по центру */
    }
    
    .Speakers 
    {
    margin-top: 60px;
    display: flex; /* Размещает элементы в строку */
    justify-content: space-around;
    flex-direction: column;
    gap: 40px;
    }

    .SubSpeakers 
    {
    display: flex; /* Размещает элементы в строку */
    justify-content: space-around; 
    flex-wrap: wrap; /* Позволяет перенос элементов, если не хватает места */
    }


    .btn-register 
    {
        border: 0 none;
        display: block;
        width: 60%;
        margin: 0 auto;
        background: linear-gradient(225deg, #62CB79, #5B78A3);
        color: white;
        text-align: center;
        border-radius: 8px;
        margin-top: 60px;
        padding: 20px;
        cursor: pointer;
        border-color: transparent;
    }
    .btn-register:hover 
    {
        background: linear-gradient(45deg, #62CB79, #5B78A3);
    }
    /*Main end*/
    /*Footer start*/
    
    footer 
    {
    max-width: 100%;
    position: relative;  
    bottom: 0;
    background-color: #5B78A3;
    color: #9CAFCF;
    text-align: center;
    padding: 20px;
    font-size: 18px;
    }

    .footer-content 
    {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: center;
    }

    .footer-container 
    {
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        padding: 20px 0;
    }
    .footer-section-parent 
    {

        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: center;
    }
    .footer-section 
    {
        display: flex;
        flex-direction: column;
        margin: 20px;
        gap: 10px;
    }
    .contacts{
        color: #9CAFCF;
        border-radius: 8px;
        text-decoration: none;
    }

    .contacts:hover{
        background-color: #7B93BE;
        color: #FFFFFF;
    }
    .social-links, .contact-info 
    {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .social-links a, .contact-info a 
    {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #9CAFCF;
        text-decoration: none;
    }

    .social-links a:hover, .contact-info a:hover 
    {
        text-decoration: underline;
    }

    .social-links img, .contact-info img 
    {
        width: 24px;
        height: auto;
    }
    /*Footer end*/

    /*Another screen size start*/
    @media screen and (max-width: 1400px) {
        .Speaker p{
            font-size: 18px;
        }
        .Speaker p.Topic{
            font-size: 18px;
        }
    }

    /* Tab horizontal / small laptop */
    @media screen and (min-width: 1201px) and (max-width: 1400px) 
    {        
        .Grid_Container 
        {
            overflow-x: auto;
        }
        .Navigation{
            padding: 10px;
        }
        #button_header, .Header_1 
        {
                font-size: 38px;
                font-weight: bold;
                color: #505050;
        }
        .Header_2 
        {
            font-size: 28px;
            font-weight: bold;
            color: #505050;
        }
        .SubTitle 
        {
            font-size: 22px;
            color: #505050;
        }
        .Speaker img{
            max-height: 400px;
        }
    }


    /* Tab vertical / phone horizontal */
    @media screen and (min-width: 781px) and (max-width: 1200px) {        
        .Grid_Container 
        {
            overflow-x: auto;
        }
        .SubSpeakers{
            flex-direction: row;
            justify-self: center;
            justify-content: center;
            gap: 20px;
            padding: 0;
        }
        .Speaker{
            width: 45%;
            margin: 0;
        }
        .Speaker p{
            font-size: 20px;
        }
        .Speaker p.Topic{
            font-size: 20px;

        }
        nav
        {
            flex-direction: column;
            align-items: stretch;
        }
        header
        {
        background-color: #FFFFFF;
        }        
        main{
            padding: 10px;
        }
        .course-info 
        {
            padding: 10px 20px 20px 10px;
        }
        #button_header{
            font-size: 16px;
        }
        .Header_1{
            font-size: 22px;
        }
        .Header_2 
        {
            font-size: 20px;
        }
        .SubTitle 
        {
            font-size: 18px;
        }
        p{
            font-size: 14px;
        }
        .info-grid 
        {
            grid-template-columns: 1fr;
        }
        .info-grid2 
        {   
            display: grid;
            grid-template-columns: 1fr;
            gap: 15px;
            margin-top: 40px;
        }    
        .info-item2 
        {
            flex: 1;      
            text-align: center;
            margin: 10px;
        }
        .Grid_Container 
        {
            overflow-x: auto;
        }
        footer{
            margin: 0;
            max-width: 100%;
            font-size: 16px;
        }
        .footer-container{
            margin: 20px;
            max-width: 100%;
        }
        .footer-section-parent{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            justify-self: start;
            
        }
        .footer-section{
            margin: 0;
            max-width: 100%;
        }
    }


    /* Phone vertical */
    @media screen and (max-width: 780px) {
        .Grid_Container 
        {
            overflow-x: auto;
        }
        .SubSpeakers{
            flex-direction: column;
            justify-self: center;
            justify-content: center;
            gap: 20px;
            padding: 0;
        }
        .Speaker{
            width: 90%;
            margin: 0;
        }
        .Speaker p{
            font-size: 18px;
        }
        .Speaker p.Topic{
            font-size: 18px;
        }
        nav
        {
            flex-direction: column;
            align-items: stretch;        }
        header
        {
        background-color: #FFFFFF;
        }        
        main{
            padding: 10px;
        }
        .course-info 
        {
            padding: 10px 20px 20px 10px;
        }
        #button_header{
            font-size: 16px;
        }
        .Header_1{
            font-size: 22px;
        }
        .Header_2 
        {
            font-size: 20px;
        }
        .SubTitle 
        {
            font-size: 18px;
        }
        p{
            font-size: 14px;
        }
        .info-grid 
        {
            grid-template-columns: 1fr;
        }
        .info-grid2 
        {   
            display: grid;
            grid-template-columns: 1fr;
            gap: 15px;
            margin-top: 40px;
        }    
        .info-item2 
        {
            flex: 1;      
            text-align: center;
            margin: 10px;
        }
        .Grid_Container 
        {
            overflow-x: auto;
        }
        footer{
            margin: 0;
            max-width: 100%;
            font-size: 16px;
        }
        .footer-container{
            margin: 20px;
            max-width: 100%;
        }
        .footer-section-parent{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            justify-self: start;
            
        }
        .footer-section{
            margin: 0;
            max-width: 100%;
        }

    }
    /*Another screen size end*/