@import '../Common/cookie.css';

@font-face {
    font-family: "Cofo";
    src: url("./fonts/CoFoSans-Regular.woff") format("woff"),
    url("./fonts/CoFoSans-Regular.woff2") format("woff2")
    ;
}

@font-face {
    font-family: "Cofo-medium";
    src: url("./fonts/CoFoSans-Medium.woff") format("woff"),
    url(".fonts/CoFoSans-Medium.woff2") format("woff2")
    ;
}

@font-face {
    font-family: "Cofo-bold";
    src: url(".fonts/CoFoSans-Bold.woff") format("woff"),
    url(".fonts/CoFoSans-Bold.woff2") format("woff2")
    ;
}

:root{
 /* color */
 --White:#FFF;
 --Extra-Light-Gray:#F5F8FB;
 --Light-Gray:#D4D8E0;
 --Gray:#8A8D93;
 --Dark-Gray:#464D5B;
 --Blue:#E1FAFF;
 --BlackBlue:#266BD1;
 --Black:#181B21;
 --Red:#FF312C;
}

/* tipografia */
/* Desktop Typography - 2560px */
:root {
    --drag:clamp(60px, 1.339rem + 2.68vw, 90px);
    --h1-heading-big: clamp(4rem, 0.298rem + 4.111vw, 6.875rem);
    --h1-heading: clamp(2.75rem, 0.335rem + 2.681vw, 4.625rem);
    --h2-heading: clamp(2.25rem, 0.318rem + 2.145vw, 3.75rem);
    --h3-heading: clamp(1.75rem, 0.462rem + 1.43vw, 2.75rem);
    --txt-description: clamp(1.875rem, -0.057rem + 2.145vw, 3.375rem);
    --txt-title: clamp(1.625rem, 0.176rem + 1.609vw, 2.75rem);
    --txt-title-card: clamp(1.25rem, 0.123rem + 1.251vw, 2.125rem);
    --txt-subtitle-card: clamp(0.875rem, 0.392rem + 0.536vw, 1.25rem);
    --txt-text-max: clamp(1.375rem, 0.248rem + 1.251vw, 2.25rem);
    --txt-text: clamp(1.063rem, 0.016rem + 1.162vw, 1.875rem);
    --txt-text-min: clamp(0.875rem, 0.392rem + 0.536vw, 1.25rem);
    --txt-numeric: clamp(1.625rem, 0.176rem + 1.609vw, 2.75rem);
    --txt-numeric-min: clamp(1.25rem, 0.445rem + 0.894vw, 1.875rem);
    --txt-phone: clamp(1.125rem, 0.401rem + 0.804vw, 1.688rem);
    --blh: clamp(0.875rem, 0.312rem + 0.626vw, 1.313rem);
    --bl: clamp(1.125rem, -0.002rem + 1.251vw, 2rem);
    --txt-tab-title: clamp(1.125rem, -0.002rem + 1.251vw, 2rem);
    --txt-input: clamp(1.125rem, -0.002rem + 1.251vw, 2rem);
    --txt-numeric-card-rates: clamp(1.375rem, -0.396rem + 1.966vw, 2.75rem);
    --txt-price: clamp(1.875rem, 0.265rem + 1.787vw, 3.125rem);
    --line-height120-110:120%;
    --line-height110-120:110%;
    --line-height110-100:110%;
    
    /* margin */
    --tm:clamp(5px, -0.652rem + 1.07vw, 17px);
    --gapColumn:10px;
    --margin-txtDescription: clamp(40px, 0.089rem + 2.68vw, 70px);
    
    /* padding */
    --paddingContainer-inline:clamp(20px, -5.14rem + 14.04vw, 120px);
    --padding-box:calc(max(20px, min(60px, 2.085vw))) calc(max(15px, min(40px, 1.4vw)));
    --cardPaddingAll:clamp(30px, -0.536rem + 2.68vw, 60px)
                     clamp(20px, -0.357rem + 1.79vw, 40px);
    --cardInlinePadding:clamp(20px, -0.357rem + 1.79vw, 40px);
    --cardBlockPadding: clamp(30px, -0.536rem + 2.68vw, 60px);
    --btnPadding:clamp(1.063rem, 0.42rem + 0.71vw, 1.563rem)
                 clamp(1.875rem, 0.268rem + 1.79vw, 3.125rem);
    --inputPadding:clamp(17px, 0.42rem + 0.71vw, 25px)
                   clamp(25px, 0.759rem + 0.89vw, 35px);
    /* radius */
    --overlay-radius:clamp(20px, -0.893rem + 4.46vw, 50px);
    
    /* position */
    --black-card-position:clamp(20px, -0.357rem + 1.79vw, 40px);
    
    -moz-transition: width 1s ease-in-out, left 0.5s ease-in-out;
    -webkit-transition: width 1s ease-in-out, left 0.5s ease-in-out;
    -moz-transition: width 1s ease-in-out, left 0.5s ease-in-out;
    -o-transition: width 1s ease-in-out, left 0.5s ease-in-out;
    transition: width 1s ease-in-out, left 0.5s ease-in-out;
    
}

*{
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style-type: none;
    font-family: "Cofo";
}

body.lock{
    overflow: hidden;
}

a{
    cursor: pointer;
}

.container-overlay{
    position: relative;
    padding-inline:clamp(20px, -5.14rem + 14.04vw, 120px);
    padding-top: clamp(100px, -0.179rem + 7.14vw, 180px);
    padding-bottom: clamp(140px, 2.321rem + 7.14vw, 220px);
    border-radius: var(--overlay-radius) var(--overlay-radius) 0px 0px;
    z-index: 1;
}

.container-overlay.router{
    position: relative;
    padding-inline:clamp(20px, -5.14rem + 14.04vw, 120px);
    padding-top: clamp(50px, 0.714rem + 2.68vw, 80px);
    padding-bottom: clamp(140px, 2.321rem + 7.14vw, 220px);
    border-radius: 0;
    z-index: 1;
}

.container-overlay:not(:first-of-type),footer{
    margin-top: -40px;
}

.container{
    padding-inline:clamp(20px, -5.14rem + 14.04vw, 120px);
    /* padding-inline: calc(max(20px, min(120px, 9vw))); */
}

.container-header{
    padding-inline:clamp(20px, -5.14rem + 14.04vw, 120px);
    z-index: 1;
}

.container-body, .container-bottom{
    padding-inline:clamp(20px, -5.14rem + 14.04vw, 120px);
}

.container-wrapper{
    position: relative;
    margin-top: -40px;
    padding-top: clamp(100px, -0.179rem + 7.14vw, 180px);
    padding-bottom: clamp(140px, 2.321rem + 7.14vw, 220px);
    border-radius: var(--overlay-radius) var(--overlay-radius) 0px 0px;
    z-index: 1;
}

.first-overlay{
    margin-top: 0;
}

.last-overlay{
    padding-bottom:clamp(100px, -0.179rem + 7.14vw, 180px);
}

.container-full{
    padding-inline:clamp(20px, -5.14rem + 14.04vw, 120px);
    padding-block: clamp(100px, -0.179rem + 7.14vw, 180px);
}

.container-lb{
    padding-left:clamp(20px, -5.14rem + 14.04vw, 120px);
    padding-bottom: clamp(100px, -0.179rem + 7.14vw, 180px);
}




.content{
    display: flex;
}

.btn-red ,.tabs li{
    display: flex;
    align-items: center;
    color: white;
    background-color: var(--Red);
    border-radius: 60px;
    padding:clamp(15px, 0.134rem + 0.89vw, 25px)
            clamp(20px, -1.161rem + 2.68vw, 50px);
    border:none;
    width: fit-content;
    justify-content: center
}

.link-btn{
    display: flex;
    align-items: center;
    color: white;
    border-radius: 60px;
    padding:clamp(15px, 0.134rem + 0.89vw, 25px)
            clamp(20px, -1.161rem + 2.68vw, 50px);
    outline:2px solid var(--Red);
    width: fit-content;
    justify-content: center;
    background: var(--White);
}

.desk{
    display:block;
}

.tablet{
    display: none!important;
}

.mob{
    display: none!important;;
}

input{
    display: flex;
    align-items: center;
    color: var(--Gray);
    background-color:#181b2100;
    border-radius: 60px;
    padding:var(--inputPadding);
    border:none;
    border: 1px solid var(--Gray, #8A8D93);
}

.back-black{
    background-color: var(--Black);
}

.back-white{
    background-color: var(--White);
}

.news-page, .adress-page{
    margin-top: 0!important;
}

footer{
    background-color: var(--Black);
    padding-top:clamp(60px, 1.194rem + 5.62vw, 100px);
}

.order-form{
    display: flex;
}

.link-white{
    color: white;
}

.arrow-slider{
    display: flex;
    gap: var(--gapColumn);
}

.arrow-left svg,.arrow-right svg{
    width:clamp(60px, 0.536rem + 3.57vw, 100px);
    height:clamp(60px, 0.536rem + 3.57vw, 100px);
}

.arrow-right svg{
    transform: rotate(180deg);
}

.wrapper{
    overflow: hidden;
    min-height: 100%;
}

/* Desktop Typography - 1440px */
@media (max-width: 1440px) {
    :root {
        --h1-heading-big: clamp(2.25rem, 1.667rem + 2.593vw, 4rem);
        --h1-heading: clamp(1.75rem, 1.417rem + 1.481vw, 2.75rem);
        --h2-heading: clamp(1.5rem, 1.25rem + 1.111vw, 2.25rem);
        --h3-heading: clamp(1.125rem, 0.917rem + 0.926vw, 1.75rem);
        --txt-description: clamp(1.375rem, 1.208rem + 0.741vw, 1.875rem);
        --txt-title: clamp(1.375rem, 1.292rem + 0.37vw, 1.625rem);
        --txt-title-card: clamp(1.125rem, 1.083rem + 0.185vw, 1.25rem);
        --txt-text-max: clamp(1.125rem, 1.042rem + 0.37vw, 1.375rem);
        --txt-numeric: clamp(1.375rem, 1.292rem + 0.37vw, 1.625rem);
        --txt-numeric-min: clamp(1.125rem, 1.083rem + 0.185vw, 1.25rem);
        --txt-phone: clamp(1.125rem, 1.27vw, 2.25rem);
        --txt-tab-title: clamp(1rem, 0.958rem + 0.185vw, 1.125rem);
        --txt-numeric-card-rates: clamp(1.25rem, 1.208rem + 0.185vw, 1.375rem);
        --txt-price: clamp(1.5rem, 1.375rem + 0.556vw, 1.875rem);
        --line-height110-120-110:120%;

        --cardBlockPadding: clamp(20px, 0.536rem + 1.49vw, 30px);
    }

    .container-overlay{
        padding-top: clamp(60px, 1.194rem + 5.62vw, 100px);
        padding-bottom: clamp(100px, 3.036rem + 5.95vw, 140px);
    }

    .container-overlay.router{
        padding-top: clamp(30px, 0.446rem + 2.98vw, 50px);
        padding-bottom: clamp(100px, 3.036rem + 5.95vw, 140px);
    }

    .container-full{
        padding-block: clamp(60px, 1.194rem + 5.62vw, 100px);
    }

    .container-wrapper{
        position: relative;
        padding-top: clamp(60px, 1.194rem + 5.62vw, 100px);
        padding-bottom: clamp(100px, 3.036rem + 5.95vw, 140px);
        border-radius: var(--overlay-radius) var(--overlay-radius) 0px 0px;
    }

    .back-black{
        background-color: var(--Black);
    }

    .last-overlay{
        padding-bottom:clamp(60px, 1.194rem + 5.62vw, 100px);
    }

}

@media (max-width: 1200px) {
    .desk-only{
        display: none!important;    
    }

    .tablet{
        display: flex!important;
    }
}
@media (max-width: 768px) {
    :root {
        --line-height120-110:110%;
        --line-height110-100:100%;
        --line-height110-120-110:110%;
        --margin-txtDescription:clamp(30px, 0.089rem + 2.68vw, 40px);
    }
    
    .desk{
        display:none!important;
    }
    
    .mob{
        display:block!important;
    }
    .btn-red,.link-btn{
        width: 100%;
        box-sizing: border-box;
    }
    
    
    
}