/*

This file describes styles that are 768px width and smaller

 */

@media all and (max-width: 768px) {

    :root{

    --section-padding: 30px;

    --size-3: 30px

    }



    .grid-3{

        grid-template-columns: 1fr

    }



    p, .btn{

        font-size: 1.6rem

    }

    .main-block .text-container{

        padding: 0 20px

    }

    .round-slider .img-container{

        width: 260px;

        height: 350px

    }

    .round-slider .img-container:nth-child(1) {

        transform: rotate(0deg) translateY(-500px);

    }



    .round-slider .img-container:nth-child(2) {

        transform: rotate(60deg) translateY(-320px);

    }



    .round-slider .img-container:nth-child(3) {

        transform: rotate(120deg) translateY(-500px);

    }



    .round-slider .img-container:nth-child(4) {

        transform: rotate(180deg) translateY(-320px);

    }



    .round-slider .img-container:nth-child(5) {

        transform: rotate(240deg) translateY(-500px);

    }



    .round-slider .img-container:nth-child(6) {

        transform: rotate(300deg) translateY(-320px);

    }

     .infinite-slider__items >div{

        font-size: 4rem

    }

    .about h2{

        margin-top: var(--size-1)

    }

    .about .text .icon {

        height: 55px

    }

    .footer-top .title:not(.description .title) {

        margin-bottom: var(--size-1)

    }

    .footer-top__items .map {

        grid-column: 1 / 1

    }

    .work-schedule:before{

        top: -2px

    }

    .play-pause{

        width: 70px;

        height: 70px;

        transform: translate(-35px, -35px)

    }

    .play-pause:after{

        top: calc(50% - 16px);

        left: calc(50% - 11px);

        transform: scale(0.8)

    }

    section.about .grid-2 {

        grid-template-columns: 1fr !important;

    }

    .services__item .btn {

        width: fit-content

    }



}

@media all and (max-width: 600px){

    

}

@media all and (max-width: 480px){



    .round-slider .img-container {

        width: 170px;

        height: 220px;

        border-radius: 15px

    }

      .round-slider .img-container:nth-child(1) {

        transform: rotate(0deg) translateY(-300px);

    }



    .round-slider .img-container:nth-child(2) {

        transform: rotate(60deg) translateY(-190px);

    }



    .round-slider .img-container:nth-child(3) {

        transform: rotate(120deg) translateY(-300px);

    }



    .round-slider .img-container:nth-child(4) {

        transform: rotate(180deg) translateY(-190px);

    }



    .round-slider .img-container:nth-child(5) {

        transform: rotate(240deg) translateY(-300px);

    }



    .round-slider .img-container:nth-child(6) {

        transform: rotate(300deg) translateY(-190px);

    }

    .round-btn{

        display: none

    }

    .media.before{

        padding-right: 15px;

        padding-bottom: 8px

    }

    .media.before:before{

        top: 8px;

        width: calc(100% - 15px);

        height: calc(100% - 8px)

    }

    .about .text .icon {

        height: 50px

    }

    .accordion-header span:first-child, .footer-top .title{

        font-size: 2.4rem

    }

    .price .price-item__price span:first-child{

        font-size: 3.8rem

    }



}

@media all and (max-width: 411px){

    .price-item .btn{

        line-height: 1.4

    }

}

@media all and (max-width: 400px){

   h1, .footer-top .description .title{

       font-size: 3.5rem

   }

    .education .img-container, .video-wrapper, section.about-text .content >.img-container, .price-item >.img-container, .price .content >.img-container {

        height: 260px!important

    }

    h3{

        font-size: 2rem

    }



}