* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    scroll-behavior: smooth;
}

body{
    background: #2C2C2C;
    color: white;
        font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
}

a {
    color: inherit;
    text-decoration: none;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

section{
    
}
/* ---------------- HEADER ---------------- */

.header {
    background:
        linear-gradient(rgba(0,0,0,0.0), #2C2C2C),
        url(img/bg.jpg) center center;
    background-size: cover;
    height: 100svh;
    padding: 20px 0 0 0;
    width: 100%;
    color: #fff;
   
}



.container {
    max-width: 1400px;
    padding: 0 15px;
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
}
.overflow{
    overflow: hidden;
}
/* ---------------- NAV ---------------- */

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 15px 15px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    background-color: rgba(0, 0, 0, 0.226);
}

.nav__logo-img {
    max-width: 50px;
    border-radius: 10px;
    display: block;
}

/* ---------------- MENU (одно меню) ---------------- */
.menu__list{
    display: flex;
    gap: 35px;
    list-style: none;
    align-items: center;
}


.menu_desctop{
    display: flex;
}
.menu__mobile {
        display: none;
        position: fixed;
        inset: 0;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 25px;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(10px);
        transition: 0.5s ease;
        z-index: 1000;
}

.menu__item {

}

.menu__link {
    color: inherit;
    text-decoration: none;
}

/* ---------------- CONTACTS ---------------- */

.contacts {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.contacts__city {
    font-size: 16px;
}

/* ---------------- TITLE ---------------- */

.header__container{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.header__title {
    /* margin-top: 25%; */
    font-weight: bold;
    font-size: 80px;
}

/* ---------------- BURGER ---------------- */

.burger {
    display: none;
    border: none;
    background: transparent;
    width: 60px;
    cursor: pointer;
}

.burger__icon {
    width: 100%;
    display: block;
}

/* ---------------- MOBILE MENU CLOSE BUTTON ---------------- */

.menu__close {
    display: none;
    background: transparent;
    border: none;
    position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer;
}

.menu__close-icon {
    width: 40px;
}



.benefits {
    display: flex;
    gap: 20px;
    margin-bottom: 60px;
    
    
}
.benefits__item {
    display: block;
    align-items: center;
    padding: 20px;
    backdrop-filter: blur(4px);
    max-width: 300px;
    border-radius: 15px;
    background-color: rgba(0, 0, 0, 0.226);
    font-weight: 300;

    border: 1px solid #ffffff2b;
}



.section{

}
.section__title{
    font-size: 35px;
    font-weight: 500;
    margin: 30px 0 50px 0;
}

.services {
    margin-bottom: 50px;
}
.services__wrapper {
    /* display: flex;
    gap: 30px;
    justify-content: space-between;
    flex-wrap: wrap; */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}
.services__item {  
    width: 100%;
    padding: 15px;
    border-radius: 15px;
    background: #383838;

    display: flex;
    flex-direction: column;
}
.services__img {
    border-radius: 10px;
    margin-bottom: 15px;
}
.services__name {
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 25px;
}
.services__content {
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1;
}
.services__subtitle {
    font-size: 17px;
    font-weight: 500;
}
.services__list {
    line-height: 1.5;
    font-size: 17px;
    font-weight: 500;
     list-style-position: inside;
}
.services__bottom {
    margin-top: auto;
}
.services__price {
    margin-top: 30px;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
}
.services__btn {
    font-size: 18px;
    font-weight: 600;
    background: #2C2C2C;
    color: white;
    border-radius: 10px;
    padding: 13px;
    width: 100%;
    border: none;
    cursor: pointer;
}

.aboutUs {

     background:
        linear-gradient(#2C2C2C, rgba(0, 0, 0, 0.6), #2C2C2C),
        url(img/bg-about.jpg) center bottom;
    background-size: cover;
}

.aboutUs__wrapper {
    background: #0000002a;
    backdrop-filter: blur(3px);
    padding: 25px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 50px;
}
.aboutUs__item {
    font-size: 25px;
    font-weight: 300;
}




.price {
    margin-bottom: 50px;
}
.container {
}
.price__wrapper{
    display: flex;
    flex-direction: column;
    /* gap: 15px; */
}
.section__title {
}
.section__desc {
    display: block;
    margin-bottom: 30px;
}
.price__row {
    display: flex;
    gap: 15px;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid white;
    /* background: #383838;
    border-radius: 10px;

    -webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2); */
}
.price__text {
    font-size: 23px;
}


.achievements {
    margin-bottom: 50px;
}
.container {
}
.achievements__wrapper {
    display: flex;
    gap: 20px;
    justify-content: space-between;
}
.achievements__card {

    background: #383838;
    padding: 20px;
    border-radius: 15px;
    /* max-width: 430px; */
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.achievements__img {
    max-width: 45px;
    width: 100%;
}
.achievements__name {
    font-size: 18px;
}
.achievements__desc {
    font-size: 16px;
}

.gallery {
    margin-bottom: 50px;
}
.container {
}
.section__title {
}
.gallery__item {
   border-radius: 10px;
   overflow: hidden;
}
.gallery__wrapper{
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 15px;
}
.gallery__img {
    width: 100%;
    height: 300px;
    object-fit:cover;
    display: block;
}


.contact {
    background: linear-gradient(#2C2C2C, #00000010, #2C2C2C ),
    url(img/bg-contact.jpg) center center;
    background-size: cover;
}
.container {
}
.contact__wrapper {
    max-width: 500px;
    margin: 50px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    background: #00000040;
    backdrop-filter: blur(3px);
    border-radius: 15px;
}
.contact__title {
    font-size: 40px;
    font-weight: bold;
}
.contact__desc {

}
.contact__btn {
    padding: 15px;
    background: #fff;
    border: none;
    border-radius: 10px;
    color: #383838;
    font-family: inherit;
    font-weight: 500;
    font-size: 18px;
    cursor: pointer;
    
}



.footer {
    padding: 50px 0;
    background: linear-gradient(#2C2C2C, #00000010, #2C2C2C ),
    url(img/bg-footer.jpg) center center;
    background-size: cover;
}
.container {
}
.footer__wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    /* background: #00000060;
    backdrop-filter: blur(5px);
    border-radius: 15px;
    padding: 20px; */
}
.footer__form {
    padding: 15px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: #2C2C2C;
    border-radius: 15px;

    
}
.footer__btn {
    display: block;
    background: white;
    color: #383838;
    font-weight: 500;
    font-family: inherit;
    padding: 15px;
    border: none;
    border-radius: 10px;
    font-size: 18px;
    cursor: pointer;
}
.footer__content {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;


    background: #00000060;
    backdrop-filter: blur(5px);
    border-radius: 15px;
    padding: 20px; 
}
.footer__text {
    font-size: 20px;
}

.footer__copyright{
    display: inline-block;
    margin-top: auto;
    font-weight: 200;
}
.footer__input{
    background: #383838;
    padding: 15px;
    border: none;
    border-radius: 10px;
    outline: none;
    font-size: 18px;
    color: white;
}
.footer__input::placeholder{
    color: rgba(255, 255, 255, 0.3);
    font-family: inherit;
    
}
.contacts__phone {
    transition: color .2s;
    &:hover{
        color: #ff2b2b;
    }
}



.footer__name{
    font-size: 30px;
    font-weight: 600;
}
.error{
    margin-top: -15px;
    color: #ff6161;
    font-size: 16px;
    font-weight: 300;
}



.popup {
    pointer-events:none;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease-in-out;

    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 100000;
    background: #00000060;
    backdrop-filter: blur(3px);
    width: 100%;
    height: 100%;
    padding: 15px;
}
.popup__content {
    display: flex;
    flex-direction: column;
    background: #2C2C2C;
    padding: 25px;
    border-radius: 15px;
    position: relative;
    max-width: 600px;
    width: 100%;
    
}
.popup__title {
    font-size: 30px;
    margin-bottom: 30px;
}
.popup__form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.popup__input {
    padding: 15px;
    border: none;
    font-family: inherit;
    font-size: 18px;
    outline: none;
    border-radius: 10px;
}
.popup__btn {
    color: #2C2C2C;
    padding: 15px;
    border-radius: 10px;
    outline: none;
    border: none;
    font-size: 18px;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
}
.popup__close {
    cursor: pointer;
    top: 10px;
    right: 10px;
    position: absolute;
    background: transparent;
    border: none;
    max-width: 40px;
    width: 100%;
}
.popup__close-icon {
    width: 100%;
}
.popup.open {
    pointer-events:all;
    opacity: 1;
    visibility: visible;
}


.successful {position: fixed;
    z-index: 99999999;
    padding: 15px;
      opacity: 0;
  pointer-events: none;
    inset: 0;
    background: #00000060;
    backdrop-filter: blur(3px);
    display: flex;
    justify-content: center;
    align-items: center;
}
.successful__content {
    display: flex;
    flex-direction: column;
    padding: 20px 15px;
    background: #383838;
    border-radius: 10px;
}
.successful__text {
    font-size: 30px;
    margin-bottom: 30px;
}
.successful__close {
    font-family: inherit;
   padding: 10px;
    border-radius: 10px;
    outline: none;
    border: none;
    font-size: 15px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
}

.successful.active {
  opacity: 1;
  pointer-events: all;
}
.privacy-text{
    font-weight: 300;
    font-size: 17px;
    color: #ffffffa4;
}


.popup-policy { 
    position: fixed;
    z-index: 100000;
    padding: 15px;
    opacity: 0;
    pointer-events: none;
    inset: 0;
    background: #00000060;
    backdrop-filter: blur(3px);
    display: flex;
    justify-content: center;
    align-items: center;
}
.popup-policy.active{
     opacity: 1;
    pointer-events: all;
}
.popup-policy__content {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: #383838;
    border-radius: 10px;
    max-width: 800px;
}

.popup-policy__title {
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 20px;
}
.popup-policy__text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-weight: 300;
    font-size: 17px;
    margin-bottom: 20px;
    a{
        text-decoration:underline;
    }
}
.popup-policy__ok {
    font-family: inherit;
   padding: 10px;
    border-radius: 10px;
    outline: none;
    border: none;
    font-size: 15px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    color: #2C2C2C;
}
/* ---------------- MOBILE ---------------- */

@media (max-width: 1000px) {

.privacy-text{
    font-size: 13px;
}


    .benefits__item{
        padding: 15px;
    }

    /* бургер показываем */
    .burger {
        display: block;
    }

    /* контакты скрываем */
    .contacts {
        display: none;
    }

    /* меню превращается в мобильное */
   .menu_desctop{
    display: none;
    }
    .menu__mobile {
        display: flex;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .menu__mobile-open{
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
   


    /* модификатор открытого меню */
  



    /* кнопка закрытия */
    .menu__close {
        display: block;
        z-index: 1100;
    }

    .menu__link {
        font-size: 22px;
        font-weight: 600;
    }

    .header__title {
        font-size: clamp(35px, 6vw, 50px);
    }

    .nav {
        padding: 5px 10px;
    }
    
    
.section__title {
    font-size: 28px;
}

    .benefits {
    flex-direction: column;
    gap: 15px;
    
    }
    .benefits__item {
    font-size: 14px;
    
    }



    .aboutUs__item {
    font-size: 18px;
}


.price__text {
    font-size: 18px;
}
.section__desc{
    font-size: 16px;
}

.price__row{
    flex-direction: column;
    /* padding: 15px 15px; */
}

.achievements__wrapper{
    flex-direction: column;
}


.gallery__img {
    
    height: 250px;

}

.contact__title {
    font-size: 30px;
}
.contact__wrapper{
    max-width: 100%;
}




.footer {
}
.container {
}
.footer__wrapper {
    grid-template-columns: 1fr;
    gap: 30px;
    /* padding: 15px; */
}
.footer__input{
    font-size: 16px;
}
.footer__btn{
    font-size: 16px;
}
.footer__name {
    font-size: 25px;
}

.footer__content {
    gap: 25px;
}
.footer__text {
    font-size: 18px;
}
}