@charset "UTF-8";

@import "normalize.css" screen;
@import "swiper-bundle.min.css" screen;
@import "fancybox.css" screen;
@import url('https://fonts.googleapis.com/css2?family=Days+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import "variables.css" screen;
@import "base.css" screen;

/* header */
.header{
    position: fixed;
    z-index: 9000;
    top: 0;
    left: 0;
    height: 100%;
    border-right: 1px solid var(--brd-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    width: 170px;
    padding: 54px 0;
    transition: 
        left var(--animDur) var(--animFunc),
        border-right-color var(--animDur) var(--animFunc),
        transform var(--animDur) var(--animFunc);
}
.header__logo{
    display: block;
    width: 54px;
    transition: 
        opacity var(--animDur) var(--animFunc),
        transform var(--animDur) var(--animFunc);
}
.header-contact{
    width: 48px;
    height: 48px;
    position: relative;
    transition: 
        opacity var(--animDur) var(--animFunc),
        transform var(--animDur) var(--animFunc);
}
.header-contact svg{
    fill: var(--main-txt);
    transition: 
    fill var(--animDurShort) var(--animFunc),
    opacity var(--animDurShort) var(--animFunc);
}
.header-contact svg:nth-child(2){
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.header-menu{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
}
.header-menu span{
    position: absolute;
    right: 0;
    height: 4px;
    background-color: var(--main-txt);
    transition: 
        background-color var(--animDurShort) var(--animFunc),
        width var(--animDurShort) var(--animFunc),
        opacity var(--animDurShort) var(--animFunc),
        transform var(--animDurShort) var(--animFunc);
}
.header-menu span:nth-child(1){
    width: 15px;
    top: 2px;
}
.header-menu span:nth-child(2){
    width: 32px;
    top: 10px;
}
.header-menu span:nth-child(3){
    width: 22px;
    top: 18px
}
.header-menu span:nth-child(4){
    width: 8px;
    top: 26px;
}
@media only screen and (min-width : 768px){
    .menu-open .header-menu span:nth-child(1),
    .menu-open .header-menu span:nth-child(4){
        opacity: 0;
        transform: translateX(-100%);
        width: 0;
    }
    .menu-open .header-menu span:nth-child(2),
    .menu-open .header-menu span:nth-child(3){
        width: 32px;
        top: 50%;    
    }
    .menu-open .header-menu span:nth-child(2){
        transform: translateY(-50%) rotate(45deg);
    }
    .menu-open .header-menu span:nth-child(3){
        transform: translateY(-50%) rotate(-45deg);
    }
    .no-touch .header-menu:hover span{width: 32px;}
    .no-touch .header-contact:hover svg{
        fill: var(--main-color);
    }
    .no-touch .header-contact:hover svg{fill: var(--main-color);}
    .menu-open .header{
        left: 100%;
        transform: translateX(-100%);
        border-right-color: transparent;
    }
    .menu-open .header__logo{
        opacity: 0;
        transform: translateY(-200px);
    }
    .menu-open .header-contact{
        opacity: 0;
        transform: translateY(200px);
    }
    .serv-open .header,
    .map-open .header,
    .contact-open .header{
        transform: translateX(-100%);
        border-right-color: transparent;
    }
}
@media only screen and (max-width : 1480px){
    .header{
        width: 96px;
        padding: 28px 0;
    }
    .header__logo{width: 48px;}
    .header-contact{
        width: 32px;
        height: 32px;
    }
}
@media only screen and (max-width : 767px){
    .header{        
        width: 100%;
        height: 64px;
        border-right: none;
        border-left: none;
        border-bottom: 1px solid var(--brd-color);
        flex-direction: row;
        background: var(--bg-color);
        padding: 0 64px 0 16px;
        transition: 
            opacity var(--animDurShort) var(--animFunc),
            padding var(--animDurShort) var(--animFunc),
            transform var(--animDurShort) var(--animFunc);
    }
    .header__logo{width: 84px;}
    .header-menu{
        position: absolute;
        top: 50%;
        left: auto;
        right: 16px;
        transform: translate(0, -50%);
    }
    .header-menu span{
        right: 5px;
        height: 3px;
    }
    .header-menu span:nth-child(1){
        width: 10px;
        top: 7px;
    }
    .header-menu span:nth-child(2){
        width: 22px;
        top: 13px;
    }
    .header-menu span:nth-child(3){
        width: 15px;
        top: 19px
    }
    .header-menu span:nth-child(4){
        width: 5px;
        top: 25px;
    }
    .header-contact{
        transition: 
            opacity var(--animDurShort) var(--animFunc),
            transform var(--animDurShort) var(--animFunc);
    }
    .serv-open .header,
    .map-open .header{
        transform: translateY(-110%);
        opacity: 0;
    }
    .contact-open.serv-open .header{
        transform: translateY(0);
        opacity: 1;
    }
    .contact-open .header{
        padding: 0 16px;
    }
    .contact-open .header-contact svg:nth-child(2){
        width: 24px;
        height: 24px;
        top: 4px;
        left: 4px;
    }
    .contact-open .header-contact svg:nth-child(2){opacity: 1;}
    .contact-open .header-contact svg:nth-child(1){opacity: 0;}
    .contact-open .header-menu{
        transform: translateY(-110%);
        opacity: 0;
        user-select: none;
        pointer-events: none;
    }
    .menu-open .header-contact{
        user-select: none;
        pointer-events: none;
        opacity: 0;        
    }
    .menu-open .header-menu span:nth-child(1),
    .menu-open .header-menu span:nth-child(4){
        opacity: 0;
        transform: translateX(100%);
        /* width: 0; */
    }
    .menu-open .header-menu span:nth-child(2),
    .menu-open .header-menu span:nth-child(3){
        width: 22px;
        top: 50%;    
    }
    .menu-open .header-menu span:nth-child(2){
        transform: translateY(-50%) rotate(45deg);
    }
    .menu-open .header-menu span:nth-child(3){
        transform: translateY(-50%) rotate(-45deg);
    }
}

/* blind */
.blind{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background-color: var(--bg-color);  
    /* display: none;  */
    overflow: hidden; 
}
.blind::before{
    content: '';
    display: block;
    position: absolute;    
    background: url(../img/gold.svg) center center no-repeat;
}
.blind-tab::before{
    transform: translate(-50%, -50%) rotate(-90deg);
    height: 100vw;
    width: 100vh;
    top: 50%;
    left: 50%;
    background-size: cover;
}
.blind-mob::before{
    width: 100%;
    height: 100%;
    background-size: contain;
}
.blind-tab{
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 60px;
    padding: 200px 40px 0;
}
.blind-mob{display: none;}
.blind-tab__logo{
    position: absolute;
    top: 42px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;    
    z-index: 2;
}
.blind-mob__logo{
    position: absolute;
    top: 60px;
    left: 40px;
    width: 120px;
    z-index: 3;
}
.blind-mob__title,
.blind-tab__title{
    font-family: var(--title-font);
    font-weight: 400;
    color: var(--bg-color);
    margin: 0;
    line-height: 100%;
}
.blind-mob__title{
    position: absolute;
    top: 90px;
    left: 190px;
    font-size: 24px;
    text-align: left;
    z-index: 3;
}
.blind-tab__title{
    font-size: 28px;    
    text-align: center;    
}
.blind-tab__pic{
    width: 100%;
    max-width: 500px;
}
.blind-mob__pic{
    position: absolute;
    z-index: 2;
    width: 284px;
    bottom: 0;
    right: 0;
}
.blind-tab__pic,
.blind-tab__title{
    position: relative;
    z-index: 2;
}
@media screen and (min-width: 768px) and (orientation: portrait){
    .blind-tab{
        display: flex;
    }
    .header, .menu, .callback, .map, .bg, .wrapper, .service{
        display: none !important;
    }
}
@media screen and (max-width: 767px) and (orientation: landscape) {  
    .blind-mob{
        display: block;
    }
    .header, .menu, .callback, .map, .bg, .wrapper, .service{
        display: none !important;
    }
}  

/* modal */
.modal-header{
    transition: 
        opacity var(--animDur) var(--animFunc),
        border-bottom-color var(--animDur) var(--animFunc),
        transform var(--animDur) var(--animFunc);
    height: 128px;
    border-bottom: 1px solid var(--brd-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
    position: relative;
    flex-shrink: 0;
}
.modal-logo{
    width: 108px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.contacts-item{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--main-txt);
    font-size: 20px;
    line-height: 100%;
}
.contacts-item b{
    font-weight: bold;
}
.contacts-item a{
    color: var(--main-txt);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    transition: color var(--animDurShort) var(--animFunc);
}
.no-touch .contacts-item a:hover{color: var(--main-color);}
.contacts-item a[href^="mailto:"],
.contacts-item a[href^="tel:"]{text-decoration: none;}
.contacts-list{
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 24px;
}
.btn-close{
    width: 32px;
    height: 32px;    
}
.btn-close svg{fill: var(--main-txt);}
@media only screen and (max-width : 1480px){
    .modal-header{
        height: 100px;
        gap: 32px;
    }
    .contacts-list{gap: 16px;}
    .contacts-item{font-size: 16px;}
}
@media only screen and (max-width : 767px){   
    .contacts-item{
        flex-direction: column;
        gap: 4px;
        font-size: 16px;
        position: relative;
    }
}

/* pic */
.pic{
    position: fixed;
    user-select: none;
    pointer-events: none;
}
.pic img{
    width: 100%;
    height: 100%;
    max-width: unset;
    object-fit: contain;
    object-position: center bottom;
}
.pic--anim img:nth-child(1){
    opacity: 1;
    transition: opacity var(--animDurLg) var(--animFunc);
    transition-delay: var(--animDurShort);
}
.pic--anim img:nth-child(2){
    opacity: 0;
    transition: opacity var(--animDurLg) var(--animFunc);
    transition-delay: var(--animDurShort);
    position: absolute;
    top: 0;
    left: 0;
}
/* gold */
.gold{
    position: fixed;
    top: 0;
    left: 170px;
    width: 100vw;
    height: 100vh;
    z-index: 10;
    opacity: .75;
    transform-origin: 0 0;
    transition: 
        left var(--animDur) var(--animFunc),
        transform var(--animDur) var(--animFunc);
}
.gold img{
    width: auto;
    height: 100%;
    max-width: unset;
}

@media only screen and (min-width : 768px){
    .pic{transform-origin: 50% 100%;}
    .slide-2 .gold{transform: rotate(90deg) translateY(-100%);}
    .slide-3 .gold{transform: rotate(180deg) translateY(-100%) translateX(-70%);}
    /* .slide-4 .gold{transform: rotate(270deg) translateY(75%) translateX(-52%);} */
    .slide-4 .gold{transform: rotate(360deg) translateY(0) translateX(0);}
}
@media only screen and (max-width : 1480px){
    .gold{left: 96px;}
}
@media only screen and (max-width : 767px){
    .mob-pic{
        user-select: none;
        pointer-events: none;
    }
    .gold{
        top: 64px;
        left: 0;
        width: 100%;
        height: 100vh;
    }
    .gold img{
        width: 100%;
        height: auto;
    }
    .pic--anim{display: none;}
    .pic-mob-anim{position: relative;}
    .pic-mob-anim img{
        width: 100%;
        height: 100%;
        max-width: unset;
        object-fit: contain;
        transition: opacity var(--animDurLg) var(--animFunc);
        transition-delay: var(--animDurShort);
    }
    .pic-mob-anim img:nth-child(2){
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        transition: opacity var(--animDurLg) var(--animFunc);
        transition-delay: var(--animDurShort);
    }

    .showed.pic-mob-anim img:nth-child(2){
        transition-delay: var(--animDur);
        opacity: 1;
    }
    .showed.pic-mob-anim img:nth-child(1){
        transition-delay: var(--animDur);
        opacity: 0;
    }
}


/* menu */
.menu{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100vh;
    z-index: 900;
    padding: 0 57px;
    display: flex;
    align-items: start;
    justify-content: space-between;
    flex-direction: column;    
}
.menu__footer{
    transition: 
        opacity var(--animDur) var(--animFunc),
        border-top-color var(--animDur) var(--animFunc),
        transform var(--animDur) var(--animFunc);
    height: 128px;
    border-top: 1px solid var(--brd-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.menu__main{
    flex-grow: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
}
.menu__header,
.menu__footer,
.menu__main{padding-left: 560px;}
.menu-nav ul{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 32px;
}
.menu-nav li a{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    white-space: nowrap;
    font-weight: bold;
    font-size: 48px;
    line-height: 100%;
    color: var(--main-txt);    
    text-decoration: none;
}
.menu-nav li a svg{
    fill: var(--main-txt);
    transition: fill var(--animDurShort) var(--animFunc);
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}
.menu-mob-btn{display: none;}
.menu{
    transition: 
        opacity var(--animDur) var(--animFunc),
        transform var(--animDur) var(--animFunc);
    transform: translateX(-110%);
    opacity: 0;
}
.menu-open .menu{
    opacity: 1;
    transform: translateX(0);
}
.pic--menu{
    z-index: 950;
    filter: drop-shadow(-24px 38px 28px rgba(0, 0, 0, .25));
    transition: 
        opacity var(--animDur) var(--animFunc),
        transform var(--animDur) var(--animFunc);
    right: calc(100% - 320px);
    transform: translateX(-110vw) scale(.1);
    bottom: -45px;
    width: 52vw;
    height: 100vh;
    opacity: 0;
}
.pic--menu img{
    object-fit: contain;
    object-position: center bottom;
}


@media only screen and (min-width : 768px){
    .no-touch .menu-nav li a{
        transform-origin: 0 50%;
        transition: 
            transform  var(--animDurShort) var(--animFunc),
            color var(--animDurShort) var(--animFunc);
    }
    .no-touch .menu-nav li a:hover{
        color: var(--main-color);
        transform: scale(1.1);
    }
    .no-touch .menu-nav li a:hover svg{fill: var(--main-color);}    
    .menu__header{
        opacity: 0;
        transform: translateY(-101%);
    }
    .menu__footer{
        opacity: 0;
        transform: translateY(101%);
    }
    .menu-open .menu__footer,
    .menu-open .menu__header{
        opacity: 1;
        transform: translateY(0);
    }    
    .menu .contacts-item{font-size: 16px;}
    .menu-open .pic--menu{
        transform: translateX(50%) scale(1);
        opacity: 1;
    }
    .menu-open .gold{left: 50%;}
}
@media only screen and (max-width : 1480px){
    .menu{padding: 0 40px;}
    .menu__footer{height: 100px;}
    .menu__header,
    .menu__footer,
    .menu__main{padding-left: 386px;}
    .menu-nav ul{gap: 32px;}
    .menu-nav li a{
        gap: 8px;
        font-size: 32px;
    }
    .menu-nav li a svg{
        width: 32px;
        height: 32px;
    }
    .pic--menu{
        right: calc(100% - 260px);
        bottom: -28px;
        width: 50vw;
        height: 104vh;
    }
}
@media only screen and (max-width : 1260px){
    .menu{padding: 0 24px;}
    .menu__header{padding-left: 166px;}
    .menu__footer,
    .menu__main{padding-left: 340px;}
    .menu-nav ul{gap: 24px;}
    .menu-nav li a{
        gap: 8px;
        font-size: 32px;
    }
    .menu-nav li a svg{
        width: 32px;
        height: 32px;
    }
    .pic--menu{
        right: calc(100% - 180px);
        bottom: -20px;
        width: 60vw;
        height: 95vh;
    }
}
@media only screen and (max-width : 767px){
    .menu{
        padding: 100px 24px 32px;
        gap: 24px; 
    }
    .menu__header,
    .menu__footer{display: none;}
    .menu__main{
        justify-content: space-between;
        gap: 24px;
    }
    .menu__main{padding-left: 0;}
    .menu-nav ul{gap: 24px}
    .menu-nav li a{
        white-space: normal;
    }
    .menu-nav li a svg{
        width: 48px;
        height: 48px;
    }
    .menu-mob-btn{
        display: block;
        width: 100%;
    }
    .pic--menu{display: none;}
}

/* map */
.map{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100vh;
    z-index: 960;
    transition: 
        opacity var(--animDur) var(--animFunc),
        transform var(--animDur) var(--animFunc);
    transform: translateX(110%);
    opacity: 0;
}
.map::before{
    content: '';
    display: block;
    width: 100%;
    height: 100px;
    z-index: 3;
    /* transform: translateY(-100%); */
    position: absolute;
    top: 0;
    left: 0;
    filter: blur(48px);
    background: linear-gradient(0deg, rgba(161, 173, 189, 0) 11.3%, #2F3543 90.51%);
    transition: 
        filter var(--animDur) var(--animFunc),
        transform var(--animDur) var(--animFunc),
        opacity var(--animDur) var(--animFunc);
    opacity: 0;
}
.map-open .map{
    opacity: 1;
    transform: translateX(0);    
}
.map-open .map__header,
.map-open .map::before{
    opacity: 1;
    transform: translateY(0);
}
.map-open .map::before{filter: blur(0);}
.map__header{
    position: absolute;
    z-index: 10;
    top: 0;
    left: 57px;
    right: 57px;
    width: calc(100% - (57px * 2));
    justify-content: flex-end;
    transition: 
        transform var(--animDur) var(--animFunc),
        opacity var(--animDur) var(--animFunc);
    opacity: 0;
    transform: translateY(-100%);
}
.map__main{
    height: 100%;
}
@media only screen and (max-width : 1480px){
    .map__header{
        height: 100px;
        left: 40px;
        right: 40px;
        width: calc(100% - (40px * 2));
    }
}
@media only screen and (max-width : 1260px){
    .map__header{
        left: 24px;
        right: 24px;
        width: calc(100% - (24px * 2));
    }
}
@media only screen and (max-width : 767px){
    .map{
        padding: 0;
        gap: 0;         
        height: 100%;
        max-height: 100vh;
    }
    .map__header{
        display: flex;
        width: 100%;
        height: 64px;
        padding: 0 16px;
        left: 0;
    }
    .map__logo {
        width: 84px;
        left: 16px;
    }
    .map__close{
        width: 24px;
        height: 24px;
    }
}

/* callback */
.callback{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100vh;
    z-index: 950;
    padding: 0 57px;
    display: flex;
    align-items: start;
    justify-content: space-between;
    flex-direction: column; 
    transition: 
        opacity var(--animDur) var(--animFunc),
        transform var(--animDur) var(--animFunc);
    transform: translateX(110%);
    opacity: 0;
}
.callback__header{flex-direction: row-reverse;}
.callback__main{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding-left: 224px;
    width: 100%;
    flex-grow: 1;
}
.callback__wrap{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 32px;
}
.callback__txt{
    font-weight: 300;
    font-size: 24px;
    line-height: 140%;
    transition: 
        opacity var(--animDur) var(--animFunc),
        transform var(--animDur) var(--animFunc);
}
.callback-form{
    max-width: 787px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    opacity: 1;
    transform-origin: 0 0;
    transition: 
        opacity var(--animDur) var(--animFunc),
        transform var(--animDur) var(--animFunc);
}
.callback-form .label:nth-child(1),
.callback-form .label:nth-child(2){width: calc(50% - 12px);}
.pic--form{
    z-index: 960;
    filter: drop-shadow(24px 38px 28px rgba(0, 0, 0, .25));
    transition: 
        opacity var(--animDur) var(--animFunc),
        transform var(--animDur) var(--animFunc);
    left: calc(50% - 410px);
    transform: translateX(110vw) scale(.1);
    bottom: -77px;
    width: 56vw;
    height: 107vh;
    opacity: 0;
}
.pic--form img{
    object-fit: contain;
    object-position: center bottom;
}
.callback__header{
    opacity: 0;
    transform: translateY(-101%);
}
.contact-open .callback__header{
    opacity: 1;
    transform: translateY(0);
} 
.contact-open .callback{
    opacity: 1;
    transform: translateY(0);
}   
.contact-open .pic--form{
    transform: translateX(50%) scale(1);
    opacity: 1;
}
.callback__error-txt,
.callback__confirm-txt{
    font-size: 20px;
    position: absolute;
    font-family: var(--title-font);
    opacity: 0;
    user-select: none;
    pointer-events: none;
    transform: translateY(100%) scale(.8);
    transition: 
        opacity var(--animDur) var(--animFunc),
        transform var(--animDur) var(--animFunc);
}
.submit-confirm .callback__confirm-txt,
.submit-error .callback__error-txt{
    opacity: 1;
    transform: translateY(0) scale(1);
}
.submit-confirm .callback__txt,
.submit-error .callback__txt{opacity: 0;}
.submit-confirm .callback-form,
.submit-error .callback-form{
    opacity: 0;
    user-select: none;
    pointer-events: none;
    transform: translateY(-100%) scale(.8);
}
@media only screen and (min-width : 768px){   
    
    .contact-open .gold{left: 70%;}
}
@media only screen and (max-width : 1680px){
    .callback__main{ padding-left: 124px;}
    .callback__wrap{gap: 24px;}
    .pic--form{left: calc(50% - 380px);}
    .callback-form{gap: 20px;}
}
@media only screen and (max-width : 1480px){
    .callback{padding: 0 40px;}
    .callback-form{max-width: 660px;}
    .callback__txt{font-size: 16px;}
    .pic--form {
        left: calc(50% - 250px);
        width: 51.5vw;
        height: 108vh;
        bottom: -50px;
    }
}
@media only screen and (max-width : 1260px){
    .callback{padding: 0 24px;}
    .callback__main{ padding-left: 16px;}
    .callback__wrap{gap: 16px;}
    .pic--form {
        left: calc(50% - 380px);
        width: 68vw;
        height: 107vh;
    }
}
@media only screen and (max-width : 767px){
    .callback{
        padding: 0;
        gap: 0;         
        height: 100%;
        max-height: 100vh;
        padding-top: 64px;
    }
    .callback__main{
        flex-grow: 1;
        justify-content: space-between;
        gap: 24px;
        padding: 0;
        overflow-y: auto;
    }
    .callback__wrap{
        padding: 16px 24px 24px;
        gap: 24px
    }
    .callback__header{display: none;}
    .callback__logo{
        width: 84px;
        left: 16px;
    }
    .callback-form .label:nth-child(1),
    .callback-form .label:nth-child(2){width: 100%;}
    .pic--form{display: none;}
    .callback-form .btn--primery{width: 100%;}
}

/* wrapper */
.wrapper{
    position: relative;
    z-index: 800;
    transition: 
        opacity var(--animDur) var(--animFunc),
        transform var(--animDur) var(--animFunc);
}
.serv-open .wrapper,
.map-open .wrapper,
.contact-open .wrapper{
    opacity: 0;
    transform: translateX(-110%);
}
.menu-open .wrapper{
    opacity: 0;
    transform: translateX(110%);
}
.sec{
    position: relative;
    height: 100%;
    width: calc(100% - 170px);
    margin-left: 170px;
    position: relative;  
}
.sec-title{
    font-family: var(--title-font);
    font-style: normal;
    font-weight: 400;
    font-size: 100px;
    line-height: 100%;
    color: var(--main-txt);
}
.txt{
    font-weight: 300;
    font-size: 16px;
    line-height: 130%;
    color: var(--main-txt);
}
.txt p:not(:last-child){margin-bottom: 14px;}
.txt b{font-weight: 600;}
@media only screen and (min-width : 768px){
    .wrapper{
        width: 100%;
        height: 100%;
        max-height: 100vh;
    }
    .main-slider > .swiper-wrapper > .swiper-slide,
    .main-slider > .swiper-wrapper,
    .main-slider{height: 100%;}   
}
@media only screen and (max-width : 1680px){
    .sec-title{font-size: 60px;}
    .txt{font-size: 16px;}
    .txt p:not(:last-child){margin-bottom: 8px;}
}
@media only screen and (max-width : 1480px){
    .sec{
        width: calc(100% - 96px);
        margin-left: 96px;
    }
    .txt{font-size: 14px;}
}
@media only screen and (max-width : 1260px){
    .sec-title{font-size: 48px;}
    .txt{font-size: 13px;}
}
@media only screen and (max-width : 767px){
    .wrapper{
        width: 100%;
        height: auto;
        max-height: unset;
    }
    .main-slider > .swiper-wrapper > .swiper-slide,
    .main-slider > .swiper-wrapper,
    .main-slider{height: auto;} 
    .main-slider > .swiper-wrapper{display: block;}
    .sec{
        height: auto;
        width: 100%;
        margin-left: 0;
        width: 100%;
    }
    .sec-title{font-size: 40px;}
    .txt{
        font-size: 16px;
        line-height: 140%;
    }
    .txt p:not(:last-child){margin-bottom: 14px;}
}


/* hero */
.hero-main{
    position: absolute;
    left: 100px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding-left: 42px;
    margin-top: 69px;
}
.hero__logo{
    width: 460px;
    margin-left: -42px;
}
.hero__quote{
    margin: 70px 0 62px;
    position: relative;
    font-weight: 700;
    font-size: 28px;
    line-height: 128%;
    color: var(--main-txt);
}
.hero__quote-start,
.hero__quote-end{
    position: absolute;
    width: 94px;
}
.hero__quote-start{
    top: -40px;
    left: -103px;
}
.hero__quote-end{
    bottom: -14px;
    right: -86px;
}
.hero-partners{
    position: absolute;
    top: 60px;
    left: 0;
    width: calc(100% - 480px);
    padding: 0 70px;
}
.hero-partners__wrap{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.hero-partners__wrap span,
.hero-partners__wrap a{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    max-width: 104px;
}
.hero-partners__wrap span img,
.hero-partners__wrap a img{
    max-height: 100%;
}
.pic--1{
    bottom: -245px;
    left: calc(50% - 198px);
    z-index: 960;
    filter: drop-shadow(24px 38px 28px rgba(0, 0, 0, .25));
    transition: 
        opacity var(--animDur) var(--animFunc),
        transform var(--animDur) var(--animFunc);
    transform: translateX(110%) scale(.8);
    width: 66.4vw;
    height: 127vh;
    opacity: 0;
}
@media only screen and (min-width : 768px){
    .hero-partners__title,
    .hero-picbar__pic{display: none;}    
    .contact-open .pic--1{
        transform: translateX(-100vw);
        opacity: 0;
    }
    .menu-open .pic--1{
        transform: translateX(100vw);
        opacity: 0;
    }
    .contacts,
    .gallery,
    .services,
    .about,
    .hero-partners,
    .hero-main{
        transition: 
            opacity var(--animDur) var(--animFunc),
            transform var(--animDur) var(--animFunc);
        opacity: 0;
        
    }
    .slide-4 .contacts,
    .slide-3 .services,
    .slide-2 .about,
    .slide-1 .hero-partners,
    .slide-1 .hero-main{opacity: 1;}

    .hero-main{transform: translateY(-50%) scale(.8);}
    .slide-1 .hero-main{transform: translateY(-50%) scale(1);}    


    .hero-partners{transform: scale(.8);}
    .slide-1 .hero-partners{transform: scale(1);}
    .about{transform: scale(.8);}
    .slide-2 .about{transform: scale(1);}
    .services{transform: scale(.8);}
    .slide-3 .services{transform: scale(1);}
    .contacts{transform: scale(.8);}
    .slide-4 .contacts{transform: scale(1);}
    .slide-1 .pic--1{
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    .menu-open.slide-1 .pic--1{
        opacity: 0;
        transform: translateY(0) translateX(100vw) scale(.8);
    }
    .contact-open.slide-1 .pic--1{
        opacity: 0;
        transform: translateY(0) translateX(-100vw) scale(.8);
    }
    .slide-1 .pic--1.pic--anim img:nth-child(2){
        transition-delay: var(--animDur);
        opacity: 1;
    }
    .slide-1 .pic--1.pic--anim img:nth-child(1){
        transition-delay: var(--animDur);
        opacity: 0;
    }

    .gallery,
    .services,
    .hero-main{transform-origin: 0 50%;}
    .hero-partners{transform-origin: 50% 0;}
    .contacts,
    .about{transform-origin: 100% 50%;}
    
}
@media only screen and (max-width : 1680px){
    .hero-main{
        left: 74px;
        padding-left: 32px;
        margin-top: 30px;
    }
    .hero__logo{
        width: 235px;
        margin-left: -32px;
    }
    .hero__quote{
        margin: 40px 0;
        font-size: 22px;
    }
    .hero__quote-start,
    .hero__quote-end{width: 44px;}
    .hero__quote-start{
        top: -12px;
        left: -48px;
    }
    .hero__quote-end{
        bottom: -16px;
        right: -44px;
    }
    .hero-partners{
        width: calc(100% - 415px);
        padding: 0 44px;
    }    
    .pic--1{
        width: 64vw;
        height: 133vh;
        bottom: -196px;
    }
}
@media only screen and (max-width : 1480px){
    .hero-partners{top: 44px;}
    .hero-partners__wrap span,
    .hero-partners__wrap a{
        height: 36px;
        max-width: 104px;
    }
    .hero-partners__wrap span img,
    .hero-partners__wrap a img{
        max-height: 100%;
    }
}
@media only screen and (max-width : 1260px){
    .hero-main{
        left: 52px;
        padding-left: 0;
        margin-top: -10px;
    }
    .hero__logo{
        width: 235px;
        margin-left: 0;
    }
    .hero__quote{margin: 20px 0 64px;}
    .hero__quote-start,
    .hero__quote-end{width: 40px;}
    .hero__quote-start{left: -44px;}
    .hero__quote-end{bottom: -20px;}
    .hero-partners{
        width: calc(100% - 320px);
        padding: 0 24px;
    }    
    .hero-partners__wrap span,
    .hero-partners__wrap a{
        height: 30px;
        max-width: 80px;
    }
    .pic--1{
        width: 75vw;
        height: 118vh;
        left: calc(50% - 150px);
        bottom: -146px;
    }
}
@media only screen and (max-width : 767px){
    .hero{
        padding: 80px 24px 48px;
    }
    .hero-main{
        position: relative;
        left: 0;
        top: 0;
        transform: none;
        display: block;
        padding-left: 0;
        margin-top: 0;
    }
    .hero__logo{
        width: 110px;
        margin-left: 0;
    }
    .hero__quote{
        position: absolute;
        top: 54px;
        left: 138px;
        margin: 0;
        font-weight: bold;
        font-size: 16px;
        width: 190px;
    }
    .hero__quote-start,
    .hero__quote-end{width: 30px;}
    .hero__quote-start{
        top: -28px;
        left: -22px;
    }
    .hero__quote-end{
        bottom: -30px;
        right: -14px;
    }
    .hero-picbar{margin-top: -45px;}
    .hero-picbar__btn{
        width: 100%;
        position: relative;
        z-index: 4;
    }
    .hero-picbar__pic{
        width: 522px;
        height: 420px;
        margin-bottom: -46px;
        position: relative;
        left: 50%;
        transform: translateX(-53%);
    }
    .hero-picbar__pic img{
        width: 100%;
        height: auto;
        
    }
    .hero-partners{
        position: relative;
        top: 0;
        width: 100%;
        padding: 60px 0 48px;
        border-top: 1px solid var(--brd-color);
        border-bottom: 1px solid var(--brd-color);
        margin-top: 46px;
    }
    .hero-partners__title{
        margin-bottom: 16px;
        font-family: var(--title-font);
        font-weight: 400;
        font-size: 24px;
        line-height: 100%;
        color: var(--sec-txt);
    }
    .hero-partners__wrap{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 24px;
    }
    .hero-partners__wrap span,
    .hero-partners__wrap a{
        height: 50px;
        max-width: unset;
    }
}

/* about */
.about{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 48px;
    padding: 40px 760px 40px 90px;
    height: 100%;
}
.about > *{
    max-width: 50vw;
    width: 100%;
}
.about__bar{
    width: 640px;
    border-left: 1px solid var(--brd-color);
    padding: 0 70px 208px 40px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-direction: column;
    gap: 60px;
    transform-origin: 100% 50%;
    opacity: 0;
    transform: translateX(110%) scale(.8);
    transition: 
        opacity var(--animDur) var(--animFunc),
        transform var(--animDur) var(--animFunc);
}
.link{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--main-txt);
    transition: color var(--animDurShort) var(--animFunc);
    text-decoration: none;
    width: 100%;
    max-width: 505px;
}
.link__icn{
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}
.link__icn svg rect{
    fill: var(--main-txt);
    transition: fill var(--animDurShort) var(--animFunc);
}
.link__icn svg path{
    fill: #747E8B;
    transition: fill var(--animDurShort) var(--animFunc);
}
.link__title{
    font-family: var(--title-font);
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 100%;
    margin-bottom: 6px;
}
.link__txt{
    font-weight: 300;
    font-size: 14px;
    line-height: 120%;
}

.pic--2{
    bottom: -315px;
    left: calc(50% - 40px);
    z-index: 9060;
    filter: drop-shadow(-24px 38px 28px rgba(0, 0, 0, .25));
    transition: 
        opacity var(--animDur) var(--animFunc),
        transform var(--animDur) var(--animFunc);
    transform: translateY(110%) scale(.8);
    width: 53.3vw;
    height: 100vh;
    opacity: 0;
}
.pic--2 img{
    object-position: center bottom;
}
.about__txt p:not(:first-child){width: 70%;}
@media only screen and (min-width : 768px){
    .about__mob-pic{display: none;}
    .no-touch .link:hover{color: var(--main-color);}
    .no-touch .link:hover svg rect{fill: var(--main-color);}
    .contact-open .pic--2{
        transform: translateX(-100vw);
        opacity: 0;
    }
    .menu-open .pic--2{
        transform: translateX(100vw);
        opacity: 0;
    }
    .slide-2 .pic--2{
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    .slide-2 .about__bar{
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    .slide-2 .pic--2.pic--anim img:nth-child(2){
        transition-delay: var(--animDur);
        opacity: 1;
    }
    .slide-2 .pic--2.pic--anim img:nth-child(1){
        transition-delay: var(--animDur);
        opacity: 0;
    }
    .menu-open.slide-2 .pic--2{
        opacity: 0;
        transform: translateY(0) translateX(100vw) scale(.8);
    }
    .contact-open.slide-2 .pic--2{
        opacity: 0;
        transform: translateY(0) translateX(-100vw) scale(.8);
    }
}
@media only screen and (max-width : 1680px){
    .about{
        gap: 24px;
        padding: 40px 526px 40px 70px;
    }
    .about__bar{
        width: 488px;
        padding: 0 70px 208px 40px;
        gap: 60px;
    }
    .link{max-width: 100%;}
    .link__icn{
        width: 32px;
        height: 32px;
    }
    .link__title{font-size: 20px;}
    .link__txt{font-size: 12px;}
    .pic--2{
        bottom: -200px;
        left: calc(50% + 34px);
        width: 47.5vw;
        height: 99vh;
    }
}
@media only screen and (max-width : 1260px){
    .about{
        gap: 16px;
        padding: 24px 360px 24px 40px;
    }
    .about__bar{
        width: 360px;
        padding: 120px 60px 120px 34px;
        gap: 48px;
        justify-content: flex-start;
    }
    .about__txt p:not(:first-child){width: 80%;}
    .link{max-width: unset;}
    .link__title{font-size: 18px;}
    .pic--2{
        bottom: -200px;
        left: calc(50% + 12px);
        width: 62.5vw;
        height: 98vh;
    }
    .link__txt{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
    }
}
@media only screen and (max-width : 767px){
    .about{
        align-items: stretch;
        justify-content: flex-start;
        gap: 48px;
        padding: 320px 24px 64px;
        height: auto;
        position: relative;
    }    
    .about > *{
        max-width: unset;
        width: 100%;
        position: relative;
        z-index: 3;
    }
    .about__mob-pic{
        position: absolute;
        top: -130px;
        left: -50px;
        width: 600px;
        z-index: 2;
    }
    .about__bar{
        width: 100%;
        border-top: 1px solid var(--brd-color);
        border-bottom: 1px solid var(--brd-color);
        border-left: none;
        padding: 48px 0;
        position: static;
        opacity: 1;
        transform: none;
    }
    .link{max-width: unset;}
    .link__icn{
        width: 32px;
        height: 32px;
    }
    .link__title{font-size: 18px;}
    .link__txt{
        font-size: 14px;
        overflow: visible;
        text-overflow: none;
        display: block;
        -webkit-line-clamp: unset;
    }
    .about__txt p:not(:first-child){width: 100%;}
    .pic--2{display: none;}
}

/* contacts */
.contacts{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 48px;
    padding: 40px 110px 40px 45%;
    height: 100%;
}
.contacts__main .contacts-item b{
    width: 128px;
    flex-shrink: 0;
}
.contacts__map-btn{
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}
.contacts__map-btn svg{
    fill: var(--main-txt);
    transition: fill var(--animDurShort) var(--animFunc);
}
.contacts__bar{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
}
.contacts__link{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 600;
    font-size: 24px;
    line-height: 100%;
    color: var(--main-txt);
    transition: 
        color var(--animDurShort) var(--animFunc),
        transform var(--animDurShort) var(--animFunc);
    white-space: nowrap;
    text-decoration: none;
}
.contacts__link svg{
    fill: var(--main-txt);
    transition: fill var(--animDurShort) var(--animFunc);
    width: 24px;
    height: 24px;
}
.contacts__sub{
    position: absolute;
    left: 45%;
    bottom: 70px;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0.06em;
    color: var(--main-txt);
}
.pic--4{
    bottom: -110px;
    right: 50%;
    z-index: 900;
    filter: drop-shadow(-24px 38px 28px rgba(0, 0, 0, .25));
    transition: 
        opacity var(--animDur) var(--animFunc),
        transform var(--animDur) var(--animFunc);
    transform: translateX(-110vw) scale(.8);
    width: 59vw;
    height: 114vh;
    opacity: 0;
}
.pic--4 img{
    object-position: center bottom;
}
@media only screen and (min-width : 768px){
    .contacts__mob-pic{display: none;}
    .no-touch .contacts__link:hover{
        color: var(--main-color);
        transform: scale(1.05);
    }
    .no-touch .contacts__link:hover svg,
    .no-touch .contacts__map-btn:hover svg{fill: var(--main-color);}
    .map-open .pic--4,
    .contact-open .pic--4{
        transform: translateX(-100vw);
        opacity: 0;
    }
    .menu-open .pic--4{
        transform: translateX(100vw);
        opacity: 0;
    }
    .slide-4 .pic--4{
        transform: translateX(0) scale(1);
        opacity: 1;
    }
    .slide-4 .pic--4.pic--anim img:nth-child(2){
        transition-delay: var(--animDur);
        opacity: 1;
    }
    .slide-4 .pic--4.pic--anim img:nth-child(1){
        transition-delay: var(--animDur);
        opacity: 0;
    }
    .menu-open.slide-4 .pic--4{
        opacity: 0;
        transform: translateX(100vw) scale(.8);
    }
    .map-open.slide-4 .pic--4,
    .contact-open.slide-4 .pic--4{
        opacity: 0;
        transform: translateX(-100vw) scale(.8);
    }
}
@media only screen and (max-width : 1680px){
    .contacts{
        gap: 24px;
        padding: 40px 70px 40px 45%;
        height: 100%;
    }
    .contacts__main .contacts-item b{width: 102px;}
    .contacts__map-btn{
        width: 18px;
        height: 18px;
    }
    .contacts__link{
        gap: 8px;
        font-size: 16px;
    }
    .contacts__link svg{
        width: 16px;
        height: 16px;
    }
    .contacts__sub{
        left: 45%;
        bottom: 38px;
        font-size: 14px;
    }
    .pic--4{
        bottom: -100px;
    }
}
@media only screen and (max-width : 1260px){
    .pic--4{
        bottom: -80px;
        width: 64vw;
    }
}
@media only screen and (max-width : 767px){
    .contacts{
        align-items: stretch;
        justify-content: flex-start;
        gap: 48px;
        padding: 220px 24px 64px;
        height: auto;
        position: relative;
    }    
    .contacts > *{
        max-width: unset;
        width: 100%;
        position: relative;
        z-index: 3;
    }
    .contacts__mob-pic{
        position: absolute;
        top: -140px;
        left: 50%;
        transform: translateX(-50%);
        width: 422px;
        z-index: 2;
    }
    .pic--4{display: none;}
    .contacts__map-btn{
        position: absolute;
        right: 0;
        bottom: 0;
        width: 24px;
        height: 24px;
    }
    .contacts__bar{
        flex-direction: column;
        gap: 16px;
    }
    .contacts__link{
        gap: 10px;
        font-size: 24px;
    }
    .contacts__link svg{
        width: 24px;
        height: 24px;
    }
    .contacts__btn{width: 100%;}
    .contacts__sub{
        position: static;
        font-size: 16px;
        text-align: center;
        padding-top: 48px;
        border-top: 1px solid var(--brd-color);
    }
}

/* services */
.services{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 24px;
    padding: 40px 110px 100px 106px;
    height: 100%;
}
.services__txt{max-width: calc(100% - 355px);}
.services__txt ul{
    column-gap: 22px;
    column-count: 2;
    max-width: 964px;
    gap: 8px;
}
.services__txt ul li{
    padding-left: 22px;
    margin-bottom: 4px;
    position: relative;
}
.services__txt ul li::before{
    content: '';
    display: block;
    border-radius: 50%;
    background-color: var(--main-txt);
    width: 6px;
    height: 6px;
    position: absolute;
    left: 0;
    top: 6px;
}
.services-carusel{
    width: 716px;
}
.services__bar{
    position: absolute;
    bottom: 60px;
    left: 106px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 48px;
}
.services-carusel .swiper-slide{
    width: 300px;
    opacity: .2;
    transition: opacity var(--animDurShort) var(--animFunc);
}
.services-carusel .swiper-slide.swiper-slide-active,
.services-carusel .swiper-slide.swiper-slide-next,
.services-carusel .swiper-slide.swiper-slide-next + .swiper-slide,
.services-carusel .swiper-slide.swiper-slide-next + .swiper-slide + .swiper-slide{opacity: 1;}
.services-item{
    background: var(--bg-color);
    box-shadow: 9px 9px 14px rgba(0, 0, 0, .5);
    border-radius: 10px;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-direction: column;
    height: 274px;
    padding: 0;
    color: var(--main-txt);
    cursor: pointer;
    transition: box-shadow var(--animDurShort) var(--animFunc);
    font-weight: 600;
    font-size: 18px;
    line-height: 100%;
    overflow: hidden;
}
.services-item__pic{height: 180px;}
.services-item__pic img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: unset;
}
.services-item__main{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 94px;
    padding: 0 24px;
    gap: 10px;
}
.services-item__main svg{
    width: 46px;
    height: 46px;
    flex-shrink: 0;
}
.services-item__main svg rect{fill: var(--main-txt);}
.services-item__main svg path{fill: #747E8B;}
.btn--icn{
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    font-weight: 500;
    font-size: 20px;
    line-height: 100%;
    color: var(--main-txt);
}
.btn--icn svg{
    display: block;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
}
.btn--icn svg rect,
.btn--icn svg path{fill: var(--main-txt)}
.btn--icn svg rect{fill: rgba(255, 255, 255, .1)}
.pic--3{
    bottom: -60px;
    left: calc(50% + 184px);
    z-index: 9060;
    filter: drop-shadow(-24px 38px 28px rgba(0, 0, 0, .25));
    transition: 
        opacity var(--animDur) var(--animFunc),
        transform var(--animDur) var(--animFunc);
    transform: translateX(110%) scale(.8);
    width: 56vw;
    height: 107.5vh;
    opacity: 0;
}
.pic--3 img{
    object-fit: contain;
    object-position: center bottom;
}
@media only screen and (min-width : 768px){
    .services__mob-pic{display: none;}
    .no-touch .services-item:hover{box-shadow: 0 0 0 rgba(0, 0, 0, 0);}
    .no-touch .btn--icn svg rect{
        transition: fill var(--animDurShort) var(--animFunc);
    }
    .no-touch .services-item__main svg rect,
    .no-touch .services-item__main svg path{transition: fill var(--animDurShort) var(--animFunc);}
    .no-touch .services-item:hover .services-item__main svg rect{fill: var(--main-color)}
    .no-touch .btn--icn:hover svg rect{
        fill: var(--main-color);        
    }
    .no-touch .services-item:hover .services-item__main svg path{fill: var(--main-txt)}
    .serv-open .pic--3,
    .contact-open .pic--3{
        transform: translateX(-100vw);
        opacity: 0;
    }
    .menu-open .pic--3{
        transform: translateX(100vw);
        opacity: 0;
    }
    .slide-3 .pic--3{
        transform: translateX(0) scale(1);
        opacity: 1;
    }
    .slide-3 .pic--3.pic--anim img:nth-child(2){
        transition-delay: var(--animDur);
        opacity: 1;
    }
    .slide-3 .pic--3.pic--anim img:nth-child(1){
        transition-delay: var(--animDur);
        opacity: 0;
    }

    .menu-open.slide-3 .pic--3{
        opacity: 0;
        transform: translateX(100vw) scale(.8);
    }
    .serv-open.slide-3 .pic--3,
    .contact-open.slide-3 .pic--3{
        opacity: 0;
        transform: translateX(-100vw) scale(.8);
    }
}
@media only screen and (max-width : 1680px){
    .services{padding: 40px 110px 100px 70px;}
    .services-carusel .swiper-slide{width: 228px;}
    .services-item{
        height: 220px;
        font-size: 14px;
    }
    .services-item__pic{height: 140px;}
    .services-item__main{
        height: 80px;
        gap: 6px;
        padding: 0 16px;
    }
    .services-item__main svg{
        width: 32px;
        height: 32px;
    }
    .services__bar{left: 70px;}
    .pic--3{
        left: calc(50% + 140px);
        bottom: -50px;
        width: 58vw;
        height: 113vh;
    }
}
@media only screen and (max-width : 1480px){
    .services{padding: 32px 70px 90px 70px;}
    .services__bar{
        bottom: 28px;
        gap: 32px;
    }
    .btn--icn{font-size: 16px;}
    .btn--icn svg{
        width: 32px;
        height: 32px;
    }
}
@media only screen and (max-width : 1260px){
    .services{
        padding: 32px 70px 90px 40px;
        gap: 20px;
    }
    .services__bar{left: 40px;}
    .services-carusel{width: 500px;}
    .services-carusel .swiper-slide.swiper-slide-next + .swiper-slide + .swiper-slide{opacity: .2;}
    .pic--3{
        left: 54%;
        width: 63.5vw;
        height: 100vh;
    }
    .services__txt{max-width: calc(100% - 220px);}
    .services__txt ul{
        column-gap: 22px;
        column-count: 2;
        max-width: 964px;
        gap: 8px;
    }
    .pic--3{
        left: 50%;
        bottom: -50px;
        width: 72vw;
        height: 113vh;
    }
}
@media only screen and (max-width : 767px){
    .services{
        align-items: stretch;
        justify-content: flex-start;
        gap: 48px;
        padding: 290px 24px 64px;
        height: auto;
        position: relative;
    }    
    .services > *{
        max-width: unset;
        width: 100%;
        position: relative;
        z-index: 3;
    }
    .services__mob-pic{
        position: absolute;
        top: -24px;
        right: -135px;
        width: 470px;
        z-index: 2;
    }
    .pic--3{display: none;}
    .services__txt{max-width: unset;}
    .services__txt ul{
        column-gap: 0;
        column-count: 1;
        max-width: unset;
        gap: 8px;
    }
    .services__txt ul li{margin-bottom: 8px;}
    .services__txt ul li::before{top: 8px;}
    .services-carusel{width: 300px;}
    .services__bar{
        position: relative;
        bottom: 0;
        left: 0;
        justify-content: space-between;
        gap: 0;
    }
    .services-carusel .swiper-slide{width: 300px;}
    .services-item{
        height: 318px;
        font-size: 18px;
    }
    .services-item__pic{height: 224px}
    .services-item__main{
        height: 94px;
        gap: 10px;
        padding: 0 24px;
    }
    .services-item__main svg{
        width: 46px;
        height: 46px;
    }
    .btn--icn{font-size: 20px;}
    .btn--icn svg{
        width: 48px;
        height: 48px;
    }
    
}

/* service */
.service{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100vh;
    z-index: 950;
    padding: 0 57px;
    display: flex;
    align-items: start;
    justify-content: space-between;
    flex-direction: column; 
    transition: 
        opacity var(--animDur) var(--animFunc),
        transform var(--animDur) var(--animFunc);
    transform: translateX(110%);
    opacity: 0;
}
.service.open{
    opacity: 1;
    transform: translateX(0);
}
.contact-open .service.open{
    opacity: 0;
    transform: translateX(-110%);
}
.service__header{flex-direction: row-reverse;}
.service__main{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding: 40px 0 40px 112px;
    width: 100%;
    flex-grow: 1;
}
.service__wrap{
    padding-right: 657px;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 40px;
}
.service__title{font-size: 80px;}
.service__txt{font-size: 20px;}
.service__pic{
    position: absolute;
    top: 50%;
    right: 0;
    width: 608px;
    transform: translateY(-50%);
    border-radius: 10px;
    overflow: hidden;
    filter: drop-shadow(24px 38px 28px rgba(0, 0, 0, .25));
}
@media only screen and (min-width : 768px){ 
    .serv-open .gold{left: 68%;}
}
@media only screen and (max-width : 1680px){
    .service__main{ padding-left: 124px;}
    .service__wrap{
        padding-right: 542px;
        gap: 24px;
    }
    .service__title{font-size: 48px;}
    .service__txt{font-size: 16px;}
    .service__pic{
        width: 460px;
    }
}
@media only screen and (max-width : 1480px){
    .service{padding: 0 40px;}
}
@media only screen and (max-width : 1260px){
    .service{padding: 0 24px;}
    .service__main{ padding-left: 16px;}
    .service__wrap{padding-right: 348px;}
    .service__txt{font-size: 14px;}
    .service__pic{width: 324px;}
}
@media only screen and (max-width : 767px){
    .service{
        padding: 0;
        gap: 0;         
        height: 100%;
        max-height: 100vh;
        padding-top: 0;
        flex-shrink: 0;
    }
    .service__main{
        flex-grow: 1;
        justify-content: space-between;
        gap: 24px;
        padding: 0;
        overflow-y: auto;
    }
    .service__wrap{
        padding: 88px 24px 24px;
        gap: 24px;
    }
    .service__logo{
        width: 84px;
        left: 16px;
    }    
    .service__header{
        display: flex;
        padding: 24px;
        height: 64px;        
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 10;
        background: var(--bg-color);
        opacity: 0;
        transform: translateY(-110%);
        transition: 
            opacity var(--animDurShort) var(--animFunc), 
            transform var(--animDurShort) var(--animFunc);
    }
    .serv-open .service__header{
        transition-delay: var(--animDurShort);
        opacity: 1;
        transform: translateY(0);
    }
    
    .contact-open.serv-open .service__header.modal-header{
        opacity: 0;
        transform: translateY(-110%);
    }
    .service__close{
        width: 24px;
        height: 24px;
    }
    .service__pic{
        position: static;
        width: 100%;
        transform: none;
        filter: drop-shadow(24px 38px 28px rgba(0, 0, 0, .25));
    }
    .service__title{font-size: 24px;}
    .service__txt{font-size: 14px;}
    .service__btn{width: 100%;}
}


/* pagination */
.main-slider__pagination{
    z-index: 10000;
    right: 48px !important;
}
.main-slider__pagination .swiper-pagination-bullet{
    width: 14px;
    height: 14px;
    margin: 14px 0 !important;
    position: relative;
    opacity: 1 !important;
    border-radius: 0;
    background: none !important;
}
.main-slider__pagination .swiper-pagination-bullet::before{
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: var(--sec-txt);
    width: 8px;
    height: 8px;
    transition: 
        background-color var(--animDur) var(--animFunc),
        height var(--animDur) var(--animFunc),
        width var(--animDur) var(--animFunc);
}
.main-slider__pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::before{
    width: 14px;
    height: 14px;
    background-color: var(--main-color);
}
@media only screen and (min-width : 768px){
    .no-touch .main-slider__pagination .swiper-pagination-bullet::before{
        transition: 
            background-color var(--animDurShort) var(--animFunc),
            height var(--animDur) var(--animFunc),
            width var(--animDur) var(--animFunc);
    }
    .no-touch .main-slider__pagination .swiper-pagination-bullet:hover:before{
        background-color: var(--main-color);
    }
}
@media only screen and (max-width : 1680px){
    .main-slider__pagination{right: 24px !important;}
}
@media only screen and (max-width : 767px){
    .main-slider__pagination{display: none;}
}