* {
    margin: 0;
}

*  button {
    font-size: 16px;
    font-family: Nunito;
    font-weight: bold;
}

*::selection {
    background-color: #262626;
    color: white;
}



h1 {
    font-family: Cormorant;
    font-weight: bold;
    font-size: 50px;
    color: #262626;
}

h2 {
    font-family: Cormorant;
    font-weight: bold;
    font-size: 50px;
    color: #262626;
    text-align: center;
    margin-bottom: 40px;
}

h3 {
    font-family: Nunito;
    font-weight: bold;
    font-size: 38px;
    color: #262626;
}

h4 {
    font-family: Nunito;
    font-weight: bold;
    font-size: 32px;
    color: #262626;
    
}

h5 {
    font-family: Nunito;
    font-weight: bold;
    font-size: 24px;
    color: #262626;
}

p {
    font-size: 16px;
    font-family: Nunito;
    font-weight: bold;
    color: #262626;
}

b { 
    color: #F6C84E;
}

.container {
    margin-inline: 15%;
}

header {
    position: fixed;
    top: 5px;
    width: 100%;
}

header .container{
    top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.66);
    backdrop-filter: blur(10px);
    border: 2px solid white;
    padding: 20px;
    border-radius: 30px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 20px;
}

.logo img {
    width: 30px;
}

.logo p {
    font-family: Cormorant;
    color: #262626;
    font-size: 22px;
    font-weight: bold;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 30px;
}




a {
    font-family: Nunito;
    font-weight: bold;
    text-decoration: none;
    color: #262626;
    transition: 0.2s all ease-in-out;
}

a::after {
    display: block;
    content: " ";
    height: 2px;
    background-color: #4A6FFE;
    transform: scaleX(0);
    transition: 0.2s all ease-in-out;
}

nav li:hover a {
    transition: 0.2s all ease-in-out;
    color: #4A6FFE;
}

nav li:hover a::after {
    transition: 0.2s all ease-in-out;
    transform: scaleX(1);
}



.login {
    padding: 10px;
    padding-inline: 50px;
    background-color: #4A6FFE;
    border: 3px solid #4A6FFE;
    color: white;
    border-radius: 15px;
    transition: 0.2s all ease-in-out;
}

.login:hover {
    transition: 0.2s all ease-in-out;
    border: 3px solid #4A6FFE;
    color: #4A6FFE;
    background-color: white;
    transform: translateY(-5px);
    box-shadow: 1px 5px 26px -16px rgba(0, 0, 0, 0.687);
}

nav {
    display: block;
}

.login {
    display: block;
}

.burger_menu {
    display: none;
    background-color: #4A6FFE;
    position: fixed;
    top: 86px;
    width: 100%;
    padding-block: 50px;
    transform: scaleY(0);
    margin: 0px;
    transition: 0.2s all ease-in-out;
} 

.burger_menu ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-left: 0px;
    
}

.burger_menu ul li  {
    
    margin: auto;
}

.burger_menu li a {
    color: white;
}

.burger_menu li a:hover {
    color: white;
}

.burger_button {
    display: none;
    flex-direction: column;
    gap: 5px;
    border: none;
    background-color: transparent;
    aspect-ratio: 1 / 1;
    justify-content: center;
}

.burger_button div {
    width: 30px;
    background-color: #4A6FFE;
    height: 5px;
    border-radius: 5px;
    
}

.burger_line1, .burger_line2 {
    transition: 0.2s all ease-in-out;
}

.burger_button:hover .burger_line2 {
    transition: 0.2s all ease-in-out;
}

.burger_button:hover .burger_line1 {
    transition: 0.2s all ease-in-out;
}

.section1 {
    text-align: center;
    margin-top: 200px;
}

.section1 h1 {
    margin: auto;
    margin-top: 110px;
    width: 50%;
}

.section1 img {
    width: 42%;
}


.section2_blocks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bot_blocks {
    display: flex;
    gap: 10px;
}

.speaking_clubs {
    background-color: #B1F85C;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    border-radius: 50px;

}

.records {
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-self: 1;
    background: linear-gradient(#4A6FFE, #B59EF9);
    flex: 1;
    padding: 40px;
    border-radius: 50px;

}

.records div {
    display: flex;
    flex-direction: column;
    margin-left: 5%;
    gap: 60px;
}

.records div > * {
    color: white;
    text-align: center;
}

.practice {
    background: linear-gradient(#4A6FFE, #B59EF9);
    padding: 30px;
    border-radius: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.practice h4 {
    color: white;
    text-align: center;
}

.practice img {
    width: 320px;
    margin-inline: auto;
}

.exercices {
    padding: 40px;
    border-radius: 50px;
    background-color: #B59EF9;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bot_blocks {
    flex: 1;
}

.exercices img {
    width: 240px;
}

.exercices h4 {
    color: white;
    text-align: center;
}

.purple_box {
    display: flex;
    flex-direction: column;
    flex: 1 !important;
    gap: 10px;
}

.purple_box div {
    border: 8px solid #B59EF9;
    flex: 1;
    text-align: center;
    border-radius: 50px;
    color: #B59EF9;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.purple_box div h5 {
    color: #B59EF9;
    width: 80%;
    margin-inline: auto;
    font-size: 28px;
}

.purple_box div img {
    width: 170px;
}

.section2 {
    margin-top: 100px;
}


.records img {
    width: 300px;
}

.purple_box img {
    width: 200px;
    margin-inline: auto;
    margin-top: 10px;
}






.section3 {
    margin-top: 100px;
    
}

.section3 p {
    color: #4A6FFE;
    text-align: center;
    margin-top: -30px;
}

.slider_wrap{
    margin: 40px auto;
    width: 100%;
    overflow: visible;
}

.slider_list { 
    background-color: white;
    margin-top: 50px;
    margin-bottom: 50px; 
    display: flex; 
    gap: 10px; 
    height: 100%;
    overflow: visible;
} 
.slide { 
    position: relative; 
    background-color: white; 
    box-shadow: 0px 0px 5px 0px #26262660; 
    display: flex; 
    flex-direction: column; 
    border-radius: 50px; 
    padding: 40px; 
    padding-bottom: 70px; 
    overflow: hidden;
    margin-block: 10px; 
    margin:  5px;
} 
.slide img { 
    width: 100%; 
    max-width: 400px; 
    margin: 0 auto; 
    border-radius: 10px; 
    display: block; } 
.slide .description { 
    position: absolute; 
    left: 50%; bottom: 20px; 
    transform: translate(-50%, 68%); 
    width: 100%; display: flex; 
    flex-direction: column; 
    gap: 15px; padding: 12px; 
    box-sizing: border-box; 
    background: linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 40%); 
    transition: transform 0.28s ease, opacity 0.22s ease; pointer-events: none; 
} 
.description h4 { 
    text-align: center; 
    margin: 0; 
    opacity: 1; 
} 
.slide .description p { 
    color: #26262693; 
    margin: 0; 
    line-height: 1.3; 
    width: 80%; 
    margin: auto; 
}

.slide:hover .description { 
    transform: translate(-50%, 0); 
    opacity: 1; 
    pointer-events: auto; 
}


.Arrows {
    margin: 18px auto 0;
    width: fit-content;
    display: flex;
    gap: 16px;
    align-items: center;
}
.Arrows button {
    padding: 12px;
    border-radius: 50%;
    border: none;
    background-color: #F6C84E;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.Arrows button:hover { transform: translateY(-6%); box-shadow: 1px 5px 26px -16px rgba(0,0,0,0.6); }

.Arrows img { width: 18px; display:block; }



.section4 {
    margin-block: 150px;
}

.section4 .container {
    display: flex;
    gap: 10px;

}

.section4_blocks {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.section4_block {
    flex: 1;
    aspect-ratio: 1 / 1;
    background: linear-gradient(#4A6FFE, #98AAF2);
    border-radius: 50px;
}

.start_now h4 {
    margin-bottom: 170px;
    width: 80%;
    text-align: left;
}

.start_now p {
    color: #262626be;
}

.section4_blocks_main {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.start_now {
    background-color: #B1F85C;
    background-image: url(/assets/images/Vector\ 1.png);
    background-size: 100%;
    padding: 80px;
    border-radius: 50px;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
    box-shadow: 0px 0px 10px 1px #B1F85C;
}

.SignIn {
    box-shadow: 0px 0px 10px 1px #B59EF9;
    background: linear-gradient(65deg, #819CFD 25%, #B59EF9 75%);
    display: flex;
    flex-direction: column;
    border-radius: 50px;
    padding: 30px;
}

.start_now p {
    font-size: 20px;
}

.SignInButton {
    transition: all 0.2s ease-in-out;
    color: #262626;
    background-color: #F6C84E;
    border: none;
    padding: 20px;
    padding-inline: 80px;
    border-radius: 20px;
    margin-top: auto;
    margin-left: auto;
    font-size: 16px;
    
}

.SignInButton:hover {
    transition: all 0.2s ease-in-out;
    transform: translateY(-10%);
    box-shadow: 1px 5px 26px -16px rgba(0, 0, 0, 0.687);
}

.SignInText {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 60px;
    margin-left: 20px;
    margin-top: 20px;
}

.SignInText > * {
    color: white;
} 


.section4_block {
    box-shadow: 0px 0px 10px 1px #4A6FFE;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.section4_block p { 
    width: 80%;
    margin-inline: auto;
    text-align: center;
}   

.section4_block img {
    width: 100px;
    margin-inline: auto;
}



.section5{
    padding-bottom: 100px;
}

.section5 p {
    text-align: center;
    color: #4A6FFE;
    margin-top: -30px;
}

.languages {
    display: flex;
    justify-content: space-between;
    margin-top: 50px;
    gap: 60px;
}

.languages div {
    aspect-ratio: 1 / 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
}

.languages div h5 {
    color: white;
    
}

.english {
    background: linear-gradient(#4A6FFE, #B1F85C);
    box-shadow: 0px 0px 10px 1px #4A6FFE;

}

.spanish {
    background: linear-gradient(65deg ,#F6C84E, #F17A28, #F6C84E, #F17A28);
    box-shadow: 0px 0px 10px 1px #F17A28;
}

.chinese {
    background: linear-gradient(65deg, #819CFD, #4A6FFE);
    box-shadow: 0px 0px 10px 1px #B59EF9;
}


.section5 .container {
    display: flex;
    flex-direction: column;
}

.learn_more {
    background-color: #F6C84E;
    padding: 20px;
    padding-inline: 90px;
    margin-top: 60px;
    border-radius: 50px;
    border: none;
    transition: all 0.2s ease-in-out;
    align-self: flex-end;

}

.learn_more:hover {
    transition: all 0.2s ease-in-out;
    transform: translateY(-10%);
    box-shadow: 1px 5px 26px -16px rgba(0, 0, 0, 0.687);
}

.section6 .container p {
    text-align: center;
}

.ruSpeaker {
    background: linear-gradient(65deg ,#F6C84E, #F17A28, #F6C84E, #F17A28);    
    flex: 1;
}

.nativeSpeaker {
    flex: 1;
}

.individualTeachers {
    display: flex;
    flex-direction: column;
}


.individualTeachers > * {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
}



.individualTeachers div div:last-child {
    border-radius: 0px;
    display: flex;
    align-items: center;
}

.individualTeachers div ul {
    width: 50%;
    height: 100%;
}

.individualTeachers > div div:first-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 50%;
    gap: 50px;
}

.section6 div > div div:first-child p {
    font-size: 20px;
}

.section6 div > div div:first-child h4, p, ul {
    color: white;
}

.nativeSpeaker {
    background: linear-gradient(65deg, #819CFD, #4A6FFE);
}

.group {
    background: linear-gradient(65deg ,#F6C84E, #F17A28, #F6C84E, #F17A28);
    
}

.section6 ul li {
    font-weight: bold;
    font-family: Nunito;
}

.group div:last-child {
    margin-right: auto;
}

.individualTeachers {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.individualTeachers div {
    padding: 20px;
    border-radius: 50px;
    padding-left: 40px;
}

.price {
    display: flex;
    gap: 10px;
}

.border {
    padding: 0px !important;
    height: 250px;
    width: 10px !important;
    border-radius: 20px !important;
    background-color: white;
}

.group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    padding: 40px;
    padding-top: 80px;
    border-radius: 50px;
    flex: 1;
}

.group .border {
    padding: 0px !important;
    height: 10px;
    width: 90% !important;
    border-radius: 20px !important;
    background-color: white;
}

.group div:first-child h4 {
    width: 50%;
}

.group div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.section7 {
    padding-top: 200px;
}

.section7 form {
    background-color: #4A6FFE;
    width: 50%;
    margin: auto;
    display: flex;
    flex-direction: column;
    padding: 50px;
    border-radius: 50px;
    text-align: center;
    align-items: center;
    gap: 40px;
}

.section7 form > input {
    width: 80%;
    padding: 20px;
    border-radius: 50px;
    font-size: 16px;
    border: none;
    font-family: Nunito;
    font-weight: bold;
}

.section7 form button {
    padding: 20px;
    padding-inline: 80px;
    border-radius: 50px;
    border: none;
    color: #4A6FFE;
    transition: all 0.2s ease-in-out;
}

.section7 form button:hover {
    transition: all 0.2s ease-in-out;
    transform: translateY(-10%);
     
}

.section7 form h3 {
    color: white;
    text-align: center;
    width: 60%;
}

.error404_window {
    background: linear-gradient(#4A6FFE, #B59EF9);
    width: 80%;
    margin: auto;
    padding-block: 80px;
    border-radius: 50px;
    margin-top: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.error404_window h3 {
    color: white;
    font-size: 60px;
}

.error404_window h4 {
    color: white;
    margin-top: -30px;
    font-size: 50px;
}

.error404_window button {
    margin-top: 20px;
    padding: 10px;
    padding-inline: 50px;
    border-radius: 30px;
    border: none;
    background-color: white;color: #9e7dff;
    transition: all 0.2s ease-in-out;
}

.error404_window button:hover {
    transition: all 0.2s ease-in-out;
    transform: translateY(-10%);
    box-shadow: 1px 5px 26px -16px rgba(0, 0, 0, 0.687);
}


footer {
    background-color: #4A6FFE;
    padding-top: 50px;
    padding-bottom: 80px;
    margin-top: 400px;
}

footer .container .footerLogo {
    display: flex;
    background-color: #4A6FFE;
    display: flex;
    align-items: center;
    gap: 10px;
    align-items: center;
}

.footerP {
    height: 25px;
    margin: auto;
    margin-top: 150px;
}

.footerLogo {
    margin-bottom: auto;
}

footer .container .footerLogo p {
    color: white;
    font-family: Cormorant;
    font-weight: bold;
    font-size: 20px;
    align-items: center;
    margin: auto;
    width: 100%;
}

footer ul {
    list-style: none;
    line-height: 50px;
    font-family: Nunito;
    font-weight: bold;
    text-align: end;
    font-size: 20px;
}

footer .container {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.footerBlock {
    display: flex;
    justify-content: space-between;
    color: #262626;
}

:root{
  --container-max: 1100px;
  --gap: 10px;
}

.open_button {
    background-color: #4A6FFE;
    border: none;
    padding: 2%;
    aspect-ratio: 1 / 1;
    border-radius: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.open_button img {
    width: 90%;
    
}


/* Ограничиваем контейнер по центру */
.container{
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-inline: 20px;
  box-sizing: border-box;
}

img{ max-width:100%;}




@media (max-width: 480px) {

    a { font-size: 12px;}
    p { font-size: 10px !important;}
    h1 { 
        font-size: 30px;
        margin-top: 50px !important;
        margin-inline: 0px !important;
        width: 100% !important;
    }
    h2 { font-size: 30px;}
    h3 { font-size: 26px;}
    h4 { font-size: 22px;}
    h5 { font-size: 18px;}
    button { 
        font-size: 12px !important;
        padding-inline: 30px !important;
    }

    .Arrows {
        display: none;
    }

    .burger_button {
        padding: 0px !important;
    }

    .section1 .container {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 30px;
    }

    .section6 p {
        font-size: 10px !important;
    }

    header nav {
        display: none;
    }

    header .login {
        display: none;
    }

    .burger_button {
        display: flex;
    }

    .section6 li {
        font-size: 12px !important;
    }

    .ruSpeaker div:last-of-type {
        padding-left: 3px;
    }

    .ruSpeaker, .nativeSpeaker {
        padding-left: 25px !important;
    }
    
    .price {
        flex-direction: column;
    }

    .languages div {
        border-radius: 30px;
    }

    .languages div h5 {
        font-size: 5px !important;
        font-weight: 500;
    }

    .languages div img {
        width: 40px;
    }

    .section2_blocks {
        flex-direction: column;
    }

    .bot_blocks {
        flex-direction: column;
        gap: 15px;
    }

    .section4 .container {
        flex-direction: column;
    }

    .purple_box {
        flex-direction: row;
    }

    .purple_box div h5 {
        font-size: 20px;
    }

    .section4_block img {
        width: 50px;
    }

    .start_now p {
        font-size: 10px;
    }

    .start_now h4 {
        margin-bottom: 80px;
        font-size: 20px !important;
    }

    .purple_box div {
        padding-block: 20px;
    }

    .group {
        flex-direction: row;
        padding-top: 40px;
    }

    .purple_box div img {
        width: 80px;
    }

    .purple_box div  {
        width: 80px;
    }

    .SignIn h4 {
        font-size: 20px !important;
    }

    .SignIn p {
        font-size: 10px;
    }

    .group div:first-of-type {
        flex-direction: column;
        gap: 45px;
    }

    .group {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: 1;
    }

    .start_now {
        padding: 45px;
    }

    .group div:last-child {
        border-radius: 0px;
        display: flex;
        align-items: center;
    }

    .individualTeachers div div:first-of-type {
        padding-left: 0px;
    }
    
    .border {
        display: none;
    }

    .group div:first-of-type {
        padding-left: 0px;
    }

    .languages {
        gap: 5px;
    }

    .group ul {
        width: 50%;
        height: 100%;
    }

    .group div:first-child {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 50%;
        gap: 50px;
    }

    form {
        width: 65% !important;
        margin: auto !important;

    }
    
    form h3 {
        font-size: 20px;
    }
    
    #form_textbar {
        font-size: 12px;
        padding: 10px;
        
    }

    .section7 .container {
        padding: 5%;
    }

    .practice {
        display: flex;
        flex-direction: row;
    }

    .practice img {
        width: 200px;
    }

    .practice h4 {
        text-align: start;
    }

    .records {
        padding: 25px;
    }

    .records div {
        gap: 10px;
        margin-left: 0px
    }

    .records div p {
        font-size: 10px !important;
    }

    .records div > * {
        text-align: start;
    }

    .records img {
        width: 150px;
    }

    .exercices {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 30px;
    }

    .exercices img {
        width: 100px;
    }

    .error404_window {
        
    }

    .error404_window h3 {
        font-size: 35px;
    }

    .error404_window img {
        width: 300px;
    }

    .error404_window h4 {
        font-size: 25px;
    }

    .error404_window button {
        
    }

    .error404_window {
        
    }

    .error404_window h3 {
        font-size: 26px;
        text-align: center;
    }

    .error404_window img {
        width: 65%;
    }

    .error404_window h4 {
        font-size: 20px;
        margin-top: 10PX;
    }

    .open_button {
        background-color: #4A6FFE;
        border: none;
        padding: 2% !important;
        aspect-ratio: 1 / 1;
        border-radius: 25%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease-in-out;
    }

    .open_button img {
        width: 90%;
        transition: all 0.2s ease-in-out !important;
    }
  
}


@media (min-width: 481px) and (max-width: 780px) {



    a { font-size: 12px;}
    p { font-size: 10px;}
    h1 { 
        font-size: 30px;
        margin-top: 50px !important;
        margin-inline: 0px !important;
        width: 100% !important;
    }
    h2 { font-size: 35px;}
    h3 { font-size: 30px;}
    h4 { font-size: 25px;}
    h5 { font-size: 20px;}
    button { 
        font-size: 12px !important;
        padding-inline: 30px !important;
    }

    .Arrows {
        display: none;
    }

    .burger_button {
        padding: 0px !important;
    }

    .section1 .container {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 30px;
    }

    header nav {
        display: none;
    }

    header .login {
        display: none;
    }

    .burger_button {
        display: flex;
    }

    

    .ruSpeaker div:last-of-type {
        padding-left: 3px;
    }
    
    .price {
        flex-direction: column;
    }

    .languages div {
        border-radius: 30px;
    }

    .languages div h5 {
        font-size: 12px;
    }

    .languages div img {
        width: 80px;
    }

    .section2_blocks {
        flex-direction: column;
    }

    .bot_blocks {
        flex-direction: column;
        gap: 15px;
    }

    .section4 .container {
        flex-direction: column;
    }

    .purple_box {
        flex-direction: row;
    }

    .purple_box div h5 {
        font-size: 20px;
    }

    .purple_box div {
        padding-block: 20px;
    }

    .group {
        flex-direction: row;
        padding-top: 40px;
    }

    .group div:first-of-type {
        flex-direction: column;
        gap: 45px;
    }

    .group {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: 1;
    }

    .start_now {
        padding: 45px;
    }

    .group div:last-child {
        border-radius: 0px;
        display: flex;
        align-items: center;
    }

    .individualTeachers div div:first-of-type {
        padding-left: 0px;
    }
    
    .border {
        display: none;
    }

    .group div:first-of-type {
        padding-left: 0px;
    }

    .languages {
        gap: 10px;
    }

    .group ul {
        width: 50%;
        height: 100%;
    }

    .group div:first-child {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 50%;
        gap: 50px;
    }

    form {
        width: 65% !important;
        margin: auto !important;

    }
    
    form h3 {
        font-size: 20px;
    }
    
    #form_textbar {
        font-size: 12px;
        padding: 10px;
        
    }

    .section7 .container {
        padding: 5%;
    }

    .practice {
        display: flex;
        flex-direction: row;
    }

    .practice img {
        width: 200px;
    }

    .practice h4 {
        text-align: start;
    }

    .records {
        padding: 25px;
    }

    .records div {
        gap: 10px;
    }

    .records img {
        width: 200px;
    }

    .exercices {
        display: flex;
        flex-direction: row;
        padding: 30px;
    }

    .exercices img {
        width: 150px;
    }

    .error404_window {
        
    }

    .error404_window h3 {
        font-size: 26px;
        text-align: center;
    }

    .error404_window img {
        width: 250px;
    }

    .error404_window h4 {
        font-size: 25px;
    }

    .error404_window button {
        
    }

    .open_button {
        background-color: #4A6FFE;
        border: none;
        padding: 2% !important;
        aspect-ratio: 1 / 1;
        border-radius: 25%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .open_button img {
        width: 90%;

    }
}


@media (min-width: 780px) and (max-width: 1200px) {

    .burger_button {
        padding: 0px !important;
    }

    .section2 {
        margin-top: 180px;
    }

    a { font-size: 10px;}
    p { font-size: 10px;}
    h1 { font-size: 40px;}
    h2 { font-size: 40px;}
    h3 { font-size: 35px;}
    h4 { font-size: 30px;}
    h5 { font-size: 25px;}

    .exercices {
        padding: 30px;
    }

    .exercices img {
        width: 150px;
    }

    .bot_blocks > div {
        flex: 1;
    }

    .purple_box div img {
        width: 100px;
    }

    .Arrows {
        display: none;
    }

    header nav {
        display: none;
    }

    header .login {
        display: none;
    }

    header .container {
        
    }

    .burger_button {
        display: flex;
    }

    .records div {
        margin-left: 0px;
    }

    .purple_box div h5 {
        font-size: 20px;
    }

    .records img {
        width: 180px;
    }

    .border {
        display: none;
    }

    .price {
        flex-direction: column;
    }

    .group {
        flex-direction: row;
    }

    .group div:first-of-type {
        flex-direction: column;
        gap: 45px;
    }

    .group {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: 1;
    }

    .start_now {
        padding: 45px;
    }

    .group div:last-child {
        border-radius: 0px;
        display: flex;
        align-items: center;
    }

    .group div:first-of-type {
        padding-left: 40px;
    }

    .languages {
        gap: 10px;
    }

    .group ul {
        width: 50%;
        height: 100%;
    }

    .group div:first-child {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 50%;
        gap: 50px;
    }


    .error404_window h3 {
        font-size: 40px;
    }

    .error404_window h4 {
        font-size: 30px;
    }
    
}