:root{
    --general-text: #312C27;
    --general-bg:  #fff9f4;
    --accent-color: #FFA55C;
    --accent-bg: #FFE0CB;
    --accent-text: #1f1711;

    

}

.body{
    font-family: "Montserrat", "Arial", sans-serif;
    line-height: 1.5;
    color: var( --general-text);
    background-color:var(--general-bg);
}

.body--opened-menu{
    overflow: hidden;
}
.body--opened-modal{
     overflow: hidden; 
}
.wrapper{
    min-height: 100%;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;

}
.title{
    font-family: 'Gabriola';
    font-size: 74px;
    line-height: 0.82;
    color: var(--accent-text);
}
.main{
    flex-grow: 1;
}
.container{
    max-width: 1310px;
    margin: 0 auto;
    padding: 0 15px;
    height: 100%;
}

.button{
    line-height: 1.6;
    font-size: 16px;
    font-weight: 500;
    border-radius: 60px;
    background-color: var(--accent-color);
    padding: 3px 15px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .4s;
    width: 100%;
    
}
.burger__icon{
   display: none;
   width: 50px;
   height: 50px;
   align-items: center;
   justify-content: center;
   z-index: 11;
   
   
}

.burger__icon span{
    width: 30px;
    height: 3px;
    border-radius: 100px;
    display: block;
    background: var(--general-text) ;
    position: relative;
    transition: all .4s;
}

.burger__icon span::after,
.burger__icon span::before{
   content: '';
   width: 30px;
    height: 3px;
    border-radius: 100px;
    display: block;
    background: var(--general-text) ;
    position: absolute;
}

.burger__icon span::after{
 top: -8px;
  transition: all .4s;
}
.burger__icon span::before{
bottom: -8px;
 transition: all .4s;
}
.body--opened-menu .burger__icon span{
    background: transparent;
}

.body--opened-menu .burger__icon span::after{
 top: 0;
 transform: rotate(45deg);
}
.body--opened-menu .burger__icon span::before{
bottom: 0;
transform: rotate(-45deg);
}


.button:hover{
    background-color: #ff9138;
}


.modal {
    position: fixed;
    inset: 0;
    background-color: #00000071;
    z-index: 10;

    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all .6s;
    padding: 10px 15px;
}
.modal__img{
    max-width: 100%;
}
.body--opened-modal .modal{
    opacity: 1;
    visibility: visible;
}
.modal__window {
    position: relative;
    background-color: var(--general-bg);
   border-radius: 20px;
   padding: 0 60px 60px;
   max-width: 428px;
}
.modal__cancel {
    position: absolute;
    top: 20px;
    right: 20px;

}
.modal__cancel path{
    transition: all .4s;
}
.modal__cancel:hover path{
    stroke: #ac907a;
}
.modal__cancel:hover rect{
    stroke: #ac907a;
}
.modal__img {
    margin: -65px 0 13px 13px;
}
.modal__title {
    font-family: Gabriola;
font-size: 42px;
font-weight: 400;
line-height: 0.9;
color: var(--accent-text);
margin-bottom: 10px;
}
.modal__text {
    margin-bottom: 30px;
}

.modal__form-lable{
   margin-bottom: 10px; 
}
.field{
position: relative;  

display: block;
}
.field span{
    position: absolute;
    font-size: 11px;
    color: #ac907a;
    top: 12px;
    left: 28px;
    opacity: 0;
    visibility: hidden;
    transition: all .4s;
}
.field__input {
    display: block;
    width: 100%;
    border: 1px solid #ac907a;
    border-radius: 100px;
    padding: 19px 41px 19px 28px;
    background: transparent;
    font-size: 16px;

    transition: all .4s;
}
.field__input::placeholder{
    color: #ac907a;
    transition: all .4s;
}
.field__input:hover{
    border-color: var(--accent-color);
   
}
.field__input:hover::placeholder{
     color: var(--accent-color);
}
.field__input:focus{
    padding: 26px 42px 12px 28px;
}
.field__input:focus + span{
    opacity: 1;
    visibility: visible;
}



/* header */
.header{
    background: url("../img/decor/baground-header.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 100%;
}

.header__top{
    padding-top: 19px;
}

.header__top-inner{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.header__logo{
    max-width: 174px;
}

.nav__list{
    display: flex;
    gap: 4vh 40px;
}
.nav__link{
    display: block;
    padding: 5px 0;
    position: relative;
    z-index: 1;
}
.nav__link::before{
    content: '';
    position: absolute;
    top:-8px;
    left:-13px;
    width: 34px;
    height: 34px;
    background-color: var(--accent-color);
    border-radius: 50%;
    z-index: -1;
    opacity: 0;
    transition: all .4s;
}

.nav__link:hover::before{
    opacity: 1;
}
/* header hero */

.hero{
    padding: 50px 0 140px;
}
.hero__inner{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
}
.hero__content{
    max-width: 520px ;
}
.hero__info{
    color: #B197B3;
    text-transform: uppercase;
    line-height: 1.6;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;

}
.hero__info span{
    display: flex;
    align-items: center;
}
.hero__info span::after{
    content: '';
    background-color: #B197B3;
    border-radius: 50%;
    height: 4px;
    width: 4px;
    display: block;
    margin: 0 10px;

}
.hero__info span:last-child:after{
    content: none;
}

.hero__title{
   font-family: 'Gabriola'; 
   font-size: 74px;
   line-height: 0.82;
   margin-bottom: 30px;

}
.hero__text{
    margin-bottom: 40px;
    max-width: 360px;
}
.hero__button{
    max-width: 360px;
    width: 100%;
}

.hero__img{
    position: relative;
    margin-right: 247px;
}
.hero__img>img{
    width: 100%;
}

.hero__img-control{
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 200px;
    bottom: 11%;
    left: calc(100% - 39px);
    text-align: left;
}
.hero__img-control-mobile{
    display: none;
}
.hero__img-button{
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    background-color: #FFE0CB;
    border-radius: 50%;
    width: 78px;
    height: 78px;
    display: block;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.hero__img-button::before{
    content: '';
    position: absolute;
    border: 1px solid var(--accent-color);
    inset: 5px;
    border-radius: 50%;
    opacity: 0;
    transition: all .4s;

}

.hero__img-button:hover:before{
    opacity: 1;
}
/* .hero__img-button img{
    padding-left: 8.8%;
} у меня встала по центру и без падинга  */

/* section about */
.about{
    padding: 140px 0;
}

.about__inner{
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 40px 53px;
    grid-template-rows: repeat(2, auto);
}

.about__img{
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    grid-row: 1/-1;
}
.about__img>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 0 50%;
}

.about__img-control{
    position: absolute;
    bottom: 4.7%;
    left: 5%;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 300px;
    text-align: left;
    background: #957b97e6;
    border-radius: 20px;
    padding: 15px 20px;
    color: var(--general-bg);
}
.about__img-button{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background-color: var(--general-bg);
    position: relative;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.about__img-button::before{
        content: '';
    position: absolute;
    border: 1px solid #CEAAD0;
    inset: 5px;
    border-radius: 50%;
    opacity: 0;
    transition: all .4s;
}

.about__img-button:hover:before{
    opacity: 1;
}
.about__title{
    font-family: Gabriola;
font-size: 74px;

line-height: 0.89;
color: #1F1711;
}
.about__heading{
    margin-bottom: 30px;
}

.about__grid{
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(2, 1fr);
}

.about__grid-item{
    background-color:var(--accent-bg) ;
    border-radius: 20px;
    padding: 29px 24px;
    display: flex;
    gap: 15px;
    align-items: center;
}

.abour__grid-img{
    border: 1px solid #312c27;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;

}
/* section program */
.main__program {
    padding-bottom: 145px;
}

.program__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
    gap: 15px;
}

.program__title {
    margin-bottom: 20px;
}
.tab-content {
   
    display: none;
}
.tab-content--show{
    display: block;
}

.tab-controls {
    display: flex;
    gap: 26px;
}

.tab-controls-link {
    background-color:  var(--general-bg);
    border-radius: 100px;
    display: block;
    padding: 14px 30px;
    box-shadow: 0px 4px 20px 0px rgba(206, 195, 185, 0.3);
    white-space: nowrap;
}
.tab-controls-link:hover{
    background-color: var(--accent-bg);
    box-shadow: 0px 4px 20px 0px rgba(206, 195, 185, 0.3);
}
.tab-controls-link--active{
  background-color: var(--accent-bg); 
  box-shadow: 0px 4px 20px 0px rgba(206, 195, 185, 0);
}
/*  верстка аккордиона */



.accordion-list__item {
    margin-bottom: 30px;
    border-radius: 20px;
    border:1px solid var(--accent-color);
}
.accordion-list__item:last-child {
    margin-bottom: 0;
}

.accordion-list__control {
    padding: 41px 30px;
    
    width: 100%;
    background-color: transparent;
    font-size: inherit;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}
.accordion-list__control-title {
    font-family: "Gabriola";
   font-size: 42px;

   line-height: 0.9;
   color: var(--accent-text);
}
.accordion-list__control-icon {
    border: 1.5px solid var(--accent-color);
    width: 36px;
    height: 36px;
    border-radius: 50%;
        display: flex;
    align-items: center;
    justify-content: space-around;
    transition: all .4s;
    flex-shrink: 0;
}
.accordion-list__control-icon path{
    transition: all .4s;
}
.accordion-list__control:hover .accordion-list__control-icon{
    background-color: var(--accent-color);
    transform: rotate(90deg);
}
.accordion-list__control:hover .accordion-list__control-icon path{
    fill: var(--general-bg);
}
.accordion-list__item--opened:hover .accordion-list__control-icon{
    background-color: var(--accent-color);
    transform: rotate(90deg);
}
.accordion-list__item--opened:hover .accordion-list__control-icon path{
    fill: var(--general-bg);
}


.accordion-list__content {
    max-height: 0;
    overflow: hidden;
    transition: all .4s;
}
.accordion__content {
    padding: 0 30px 40px;
    display: flex;
    gap: 80px;
}



.accordion__content-col:first-child {
    max-width: 507px;
    width: 100%;
}
.accordion__content-title {
    color: #CEAAD0;
    line-height: 1.6;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.accordion__content-item {
    margin-bottom: 20px;
    display: flex;
}
.accordion__content-item:last-child {
    margin-bottom: 0;
}
.accordion__content-icon {
    width: 24px;
    border:  1px solid #CEAAD0;
    height: 24px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    margin-right: 8px;
    flex-shrink: 0;

}
.accordion__content-text {
    max-width: 274px;
}


.program__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 40px;
}
.program__action {
    display: grid;
    grid-template: repeat(3, auto) / 1.65fr 1fr ;
    gap: 40px;
    max-width: 501px;

    
}
.program__discount {
    background-color: var(--accent-bg);
    border-radius: 20px;
    grid-row: 1/ 3 ;
    font-size: 20px;
    padding: 40px;
}
.program__discount-value  {
    font-family: Gabriola;
    font-size: 74px;
    font-weight: 400;
    line-height: 0.82;
    color: var(--accent-color);
    text-align: center;
    display: block;
    margin-bottom: 7px;
    animation: discount-grow .8s linear infinite alternate; 
    transform-origin: center center;
}

@keyframes discount-grow {
    0%{
         transform: translateX(0) scale(1);
          color: var(--accent-color);

    }
     25% {
    transform: translateX(1%) scale(1.03);
  }
  50% {
    transform: translateX(2%) scale(1.07);
  }
  75% {
    transform: translateX(3%) scale(1.09);
  }
    100%{
      transform: translateX(4%) scale(1.1);
     
      color: #ff9138;  
    }
    
}
.program__discount span{
    font-size: 16px;
    margin-left: 43%;
    
}

.program__price-text {
    text-transform: uppercase;
    color: #B197B3;
    line-height: 1.6;
    margin-bottom: 5px;
}
.program__price-value {
    font-family: Gabriola;
    font-size: 32px;
    font-weight: 400;
    line-height: 0.9;
    color: var(--accent-text);
}
.program__price-value-big{
    font-size: 50px;
}
.program__button{
    grid-column: 1/-1;
}
.program__img img{
    width: 100%;
}
/* foto galary */

.foto__gallary{
    padding-bottom: 140px;
}
.gallary__inner{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin-bottom: 40px;
}
.gallaty__img img{
    max-width: 100%;
}

.gallary__content{
    display: flex;
    gap: 15px;
    align-items: end;
    justify-content: space-between;
}

.gallary__info{
    max-width: 380px;
}

.gallary__prev ,
.gallary__next{
   cursor: pointer; 
   background-color: transparent;
   border: 1.5px solid var(--accent-color);
   border-radius: 50%;
   flex-shrink: 0;
   width: 36px;
   height: 36px;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: all .4s;
}

.gallary__prev:hover ,
.gallary__next:hover{
    background-color: var(--accent-color);
}
.gallary__prev path ,
.gallary__next path{
    transition: all .4s;

}

.gallary__prev:hover path ,
.gallary__next:hover path{
    fill: var(--general-bg);
}
.gallaty__img{
    justify-self: center;
   align-self: center;
}
.gallary__title{
    margin-bottom: 20px;
}
.gallary__nav{
    display: flex;
    align-items: center;
    gap: 30px;
    font-family: "Gabriola";
    font-weight: 400;
    font-size: 42px;
    line-height: 0.9;
}

.gallary__pagination{
    display: flex;
}

.gallary__slide{
    border-radius: 20px;
    overflow: hidden;
}
.gallary__slide img{
    max-width: 100%;
}

/* section feedback */

.testimonials {
    padding-bottom: 140px;
}

.testimonials__inner {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 40px;
    gap: 30px;
    
}
.testimonials__info {
    max-width: 632px;
}
.testimonials__title {
    margin-bottom: 20px;
}


.testimonials__nav{
    display: flex;
    align-items: center;
    gap: 30px;
    font-family: "Gabriola";
    font-weight: 400;
    font-size: 42px;
    line-height: 0.9;
}
.testimonials__prev ,
.testimonials__next{
   cursor: pointer; 
   background-color: transparent;
   border: 1.5px solid var(--accent-color);
   border-radius: 50%;
   flex-shrink: 0;
   width: 36px;
   height: 36px;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: all .4s;
}

.testimonials__prev:hover ,
.testimonials__next:hover{
    background-color: var(--accent-color);
}
.testimonials__prev path ,
.testimonials__next path{
    transition: all .4s;

}

.testimonials__prev:hover path ,
.testimonials__next:hover path{
    fill: var(--general-bg);
}
.testimonials__slider {
 overflow: visible;
}


.testimonials__slide {
    background-color: var(--accent-bg);
    border-radius: 20px;
    padding: 30px 30px 40px;
    display: flex;
    gap: 30px;
    opacity: 0;
    height: auto;
    
}

.swiper-slide-prev.testimonials__slide,
.swiper-slide-next.testimonials__slide{
    opacity: 0.5 ;
}

.testimonials__slide.swiper-slide {
    transform: scale(0.9);
    transition: all .4s;
}

.testimonials__student {
    max-width: 165px;
    width: 100%;
    flex-shrink: 0;
   text-align: center;
   
}
.testimonials__student-img{
   /* overflow: hidden; */
     margin-bottom: 20px;
}
.testimonials__student-img img {
    width: 100%; 
    border-radius: 20px; 
   
}
.testimonials__student-name {
    text-transform: uppercase;
    margin-bottom: 5px;
    color: var(--general-text);
}
.testimonials__student-inst {
    display: flex;
    justify-content: center;
    gap: 5px;
    color: #CEAAD0;
}
.testimonials__quote span {
    font-family: "Gabriola";
    font-weight: 400;
    font-size: 29px;
    line-height: 0.9;
    display: block;
    margin-bottom: 10px;
}
.testimonials__quote{
    font-size: 14px;
}
.testimonials__scrollbar.swiper-scrollbar {
    position: static;
    width: 100%;
    height: 7px;
    
}
.swiper-slide-active.testimonials__slide{
    transform: scale(1);
    opacity: 1;
}

 .swiper-scrollbar {
    &.swiper-scrollbar-horizontal, .swiper-horizontal>& {
        bottom: var(--swiper-scrollbar-bottom, -32px);
        height: var(--swiper-scrollbar-size, 7px);
        left: var(--swiper-scrollbar-sides-offset, 1%);
        position: absolute;
        top: var(--swiper-scrollbar-top, auto);
        width: calc(100% - var(--swiper-scrollbar-sides-offset, 1%) * 2);
        z-index: 50;
    }
}  


.testimonials__scrollbar{
    background-color: var(--accent-bg);
    
}
.testimonials__scrollbar .swiper-scrollbar-drag{
    background-color: var(--accent-color);
}




/* section form */


.contact {
    padding: 140px 0;
    background: url("../img/decor/baground-form.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 100%;
}

.contact__inner {
    display: flex;
    position: relative;
    align-items: end;
    gap: 84px;
}
.contact__img img {
    width: 100%;
    filter: drop-shadow(0px 4px 30px rgba(198, 176, 161, 0.3 ));
}

.contact__inner::before{
    content: url("../img/decor/iagodi-left.png");
    position: absolute;
    top: -4%;
    left: 0;
    
}

.contact__inner::after{
    content: url("../img/decor/iagodi-right.png");
    position: absolute;
    top: 4%;
    right: 0;
    
}

.contact__body {
    max-width: 420px;
}
.contact__title {
    margin-bottom: 20px;
}

.contact__text {
    margin-bottom: 40px;
}

.contact__lable {
    margin-bottom: 10px;
}

.contact__check-lable {
    display: flex;
    gap: 5px;
    max-width: 288px;
    font-size: 13px;
    margin-bottom: 20px;
    align-items: start;
}

.contact__check-lable a{
    text-decoration: underline;
    transition: all .4s;

}


.contact__check-lable a:hover{
    color: var(--accent-color);
}
.contact__checkbox {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid #ac907a;
    transition: all .4s;
    border-radius: 4px;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;

}

.contact__checkbox::before{
    content: '';
    position: absolute;
    inset: 0;
    background: url("../img/icons/checkbox.svg") 50% 50% no-repeat;
    opacity: 0;
     transition: all .4s;
}

.contact__checkbox:hover{
    border: 2px solid var(--accent-color);
}
.contact__checkbox:checked{
    background-color: var(--accent-color);
    border: 2px solid var(--accent-color);
    
}
.contact__checkbox:checked::before{
    opacity: 1;
}

.contact__input {
    display: block;
    width: 100%;
    border: 1px solid #ac907a;
    border-radius: 100px;
    padding: 19px 41px 19px 28px;
    background: transparent;
    font-size: 16px;

    transition: all .4s;
    margin-bottom: 20px;
}
.contact__input::placeholder{
    color: #ac907a;
    transition: all .4s;
}
.contact__input:hover{
    border-color: var(--accent-color);
   
}
.contact__input:hover::placeholder{
     color: var(--accent-color);
}




/* footer */

.footer{
    background-color: #AB8261;
    padding: 60px 0 66px;
    color: var(--general-bg);
}
.footer__col:first-child{
    margin-top: -30px;
}


.footer__inner{
    display: grid;
    grid-template-columns: 0.9fr 0.9fr 1.1fr auto;
    gap: 40px 15px;
}
.footer__logo-text{
    margin-bottom: 20px;
}
.footer__logo{
    max-width: 240px;
    display: block;
}
.footer__logo img{
    width: 100%;
}

.socials__list{
    display: flex;
    gap: 15px;
}
.socials__link{
    line-height: 0;
}
.socials__link path{
    transition: all .4s;
}
.socials__link:hover path{
    fill: var(--accent-color);
}

.footer__col-link{
    display: block;
    padding: 5px 0;
    position: relative;
    z-index: 1;
}
.footer__col-link::before{
     content: '';
    position: absolute;
    top:-8px;
    left:-13px;
    width: 34px;
    height: 34px;
    background-color: var(--accent-color);
    border-radius: 50%;
    z-index: -1;
    opacity: 0;
    transition: all .4s;
}
.footer__col-link:hover::before{
    opacity: 1;
}
.footer__col-item{
    margin-bottom: 10px;
}
.footer__col-item:last-child{
    margin-bottom: 0;
}
.footer__col-list{
    margin-top: -5px;
}

.footer__contact-item{
    margin-bottom: 10px;
}
.footer__contact-item:last-child{
    margin-bottom: 0;
}
.footer__col-number{
    font-weight: 500;
    font-size: 24px;
    line-height: 1.6;
    display: block;
    transition: all .4s;
}
.footer__col-number:hover{
    color: var(--accent-color);
}
.footer__col-tel{
    margin-bottom: 47px;
}

.footer__col-copy{
    color: #dec5b1;
}

/* adaptiv */

@media (max-width: 1200px){
    .hero__img-control{
        position: static;
        max-width: none;
        margin-top: 30px;
    }
    .hero__img{
        margin: 0;
        max-width: 377px;
    }
    .footer__inner{
        justify-content: space-between;
        grid-template-rows: auto auto;
        grid-template-columns: repeat(3, auto);

    }
    .footer__col:last-child{
     grid-column: 1 / -1;
     text-align: center;
    }
    .program__top{
        flex-wrap: wrap;
        justify-content: center;
    }
    .program__title{
        text-align: center;
    }
    .contact__inner::after{
        top: -20%;

    }
}
@media (max-width: 1100px){
    .about__img{
        grid-row: auto;
    }
    .about__grid{
        grid-column: 1/-1 ;
    }
    .about__body{
        align-self: center;
    }
    .accordion-list__control{
      
        padding: 20px 30px;
    }
    .accordion-list__control-title{
          font-size: 35px;
    }
       .program__img img{
    display: none;
   }
     .program__action {
    max-width: 100%;
   }
   .program__action {
        grid-template: repeat(3, auto) / 1fr 1fr;
   }
   .program__bottom {
    display: block;
   }
   .about{
    padding-bottom: 70px;
    padding-top: 70px;
   }
   .main__program {
    padding-bottom: 60px;
   }
   .contact__inner{
    align-items: center;
    gap: 30px;
   }
}

@media (max-width: 900px){
     .nav{
        background:var(--general-bg);
        position: fixed;
        inset: 0;
        z-index: 10;
        padding: 26vh 15px 30px;
        font-size: 24px;
        transform: translateY(-50%);
        opacity: 0;
        visibility: hidden;
        transition: all .4s;
        
     }
     .header__logo{
        z-index: 11;
     }
     .nav__list{
        flex-direction: column;
        align-items: center;
     }
     .body--opened-menu .nav{
        transform: translateY(0%);
        opacity: 1;
        visibility: visible;
        
     }
     .burger__icon{
        
        display: flex;
     }

     .footer__inner{
        justify-content: center;
        grid-template: none ;
        text-align: center;
        gap: 10px;
     }
     .socials__list{
        justify-content: center;
     }
     .gallaty__img img{
        display: none;
     }
     .gallary__inner{
        grid-template: none;
     }
     .gallary__info{
        max-width: none;
     }

     .contact__img{
        display: none;
     }
     .contact__inner{
        justify-content: center;
     }

     
}
@media (max-width: 850px){
    .about__inner{
        grid-template: none;
    }
    .about__img{
        max-width: 500px;
        justify-self: center;
    }
    .about__body{
        text-align: center;
    }
}
@media (max-width: 800px){
   .hero__img{
    display: none;
   }
   .hero__img-control-mobile{
    display: flex;
    margin-bottom: 30px;
    margin-top: 0;
}

.hero__content{
    display: flex;
    flex-direction: column;
    max-width: none;
    align-items: center;
    text-align: center;
    width: 100%;
}
.about__grid{
    grid-template: none;
}
.about__img-control{
    max-width: none;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0;
    padding: 10px 15px;
}
.main__about{
    padding: 60px 0 80px;
}

.tab-controls{
    gap: 15px;
}
.tab-controls-link{
    padding: 9px 20px;
}
.program__text{
    text-align: center;
}
    .accordion-list__control {
        padding: 9px 30px;
    }
        .accordion-list__control-title {
        font-size: 25px;
        text-align: left;
    }
    .accordion__content{
        display: block;
        padding: 0 30px 20px;
    }
    .accordion__content-col{
        margin-bottom: 10px;
    }
   .accordion__content-title{
    margin-bottom: 7px;
   }
   .accordion__content-item{
    margin-bottom: 10px;
    font-size: 14px;
   }
   .accordion__content-text{
    font-size: 14px;
   }

   .testimonials__inner{
    flex-direction: column;
    align-items: center;
    text-align: center;
    
   }
   .testimonials__nav{
    align-self: flex-end;
   }

   .testimonials__scrollbar.swiper-scrollbar{
    width: 50%;
    left: 25%;
   
   }
   .foto__gallary{
    padding-bottom: 60px;
   }

   .contact__inner::before{
    display: none;
   }
   

 
}

@media (max-width: 650px){
    .tab-controls{
        flex-wrap: wrap;
        justify-content: center;
    }
}


@media (max-width: 600px){
    .hero__title{
        font-size: 12vw;
    }
    .hero{
        padding-bottom: 80px;
    }
    .about__title{
        font-size: 12vw;
    }
    .about__grid{
        gap: 15px;
    }
    .about__grid-item{
        padding: 10px 15px;
    }
    .program__price-text{
        text-align: center;
    }
    .program__price-value{
        text-align: center;
    }
    .program__action{
        display: block;
    }
    .program__discount{
        
        margin-bottom: 10px;
    }
    .program__price-value:last-child{
        margin-bottom: 10px;
    }
    .program__title{
        font-size: 12vw;
    }

    .gallary__content{
        display: block;
    }
    .gallary__title{
        font-size: 15vw;
    }
    .gallary__inner{
        text-align: center;
    } 
    .gallary__info{
        margin-bottom: 10px;
    }
    .gallary__pagination{
        justify-content: center;
        width: 10px;
    }
    .gallary__nav{
        justify-content: center;
        padding-top: 19px;
        
        margin-bottom: -26px;
    }
        .main__program{
            padding-bottom: 15px;
        }

     .testimonials__slide{
        flex-direction: column;
        align-items: center;
        padding: 20px 10px 30px;
     } 
     .testimonials__quote{
        text-align: center;
     }

     .testimonials__title{
        font-size: 12vw;
     }

     .contact__inner{
        text-align: center;
     }

     .contact__title{
        font-size: 12vw;
     }
     .contact{
        padding: 60px 0;
     }

       
}

@media (max-width: 450px){
    .hero__text{
        font-size: 14px;
    }
    .modal__window{
        padding: 0 15px 45px;
    }
    .modal__img{
        max-width: 50%;
        margin-top: -45px;
    }
    .modal__title{
        font-size: 35px;
    }

}