/* ============================================================
   VENTACTIVE
   FOOTER
============================================================ */

.vcFooter{
    position:relative;
    overflow:hidden;

    background:#111113;

    color:#fff;
}

.vcFooter *{
    box-sizing:border-box;
}


/* ============================================================
   FINAL CTA
============================================================ */

.vcFooterCta{
    position:relative;

    background:#f2f1ed;

    color:#18181a;
}

.vcFooterCtaInner{
    display:grid;

    grid-template-columns:
        minmax(0,1.25fr)
        minmax(320px,.75fr);

    align-items:end;

    gap:80px;

    width:min(
        1440px,
        calc(100% - 72px)
    );

    margin:0 auto;

    padding:
        100px
        0
        95px;
}


/* ============================================================
   CTA TEXT
============================================================ */

.vcFooterEyebrow{
    display:block;

    margin-bottom:18px;

    color:#7e7e82;

    font-size:10px;
    font-weight:800;

    letter-spacing:.15em;

    text-transform:uppercase;
}

.vcFooterCtaText h2{
    max-width:850px;

    margin:0;

    font-size:clamp(
        45px,
        5.8vw,
        84px
    );

    font-weight:420;

    line-height:.95;

    letter-spacing:-.06em;
}

.vcFooterCtaText h2 strong{
    display:block;

    font-weight:760;
}


/* ============================================================
   CTA RIGHT
============================================================ */

.vcFooterCtaAction{
    padding-bottom:5px;
}

.vcFooterCtaAction > p{
    max-width:450px;

    margin:
        0
        0
        28px;

    color:#747478;

    font-size:14px;

    line-height:1.7;
}

.vcFooterShop{
    display:inline-flex;
    align-items:center;

    gap:15px;

    color:#18181a;

    font-size:12px;
    font-weight:800;

    text-decoration:none;
}

.vcFooterShop > span{
    display:grid;
    place-items:center;

    width:44px;
    height:44px;

    border-radius:50%;

    background:#18181a;

    color:#fff;

    transition:
        transform .3s ease,
        background .3s ease;
}

.vcFooterShop svg{
    width:17px;
    height:17px;
}

.vcFooterShop:hover > span{
    transform:translateX(5px);
}


/* ============================================================
   MAIN
============================================================ */

.vcFooterMain{
    position:relative;

    background:#111113;
}

.vcFooterMainInner{
    display:grid;

    grid-template-columns:
        minmax(280px,1.6fr)
        minmax(130px,.65fr)
        minmax(160px,.75fr)
        minmax(210px,.9fr);

    gap:60px;

    width:min(
        1440px,
        calc(100% - 72px)
    );

    margin:0 auto;

    padding:
        76px
        0
        65px;
}


/* ============================================================
   BRAND
============================================================ */

.vcFooterBrand{
    max-width:350px;
}

.vcFooterLogo{
    display:inline-block;

    max-width:185px;

    text-decoration:none;
}

.vcFooterLogo img{
    display:block;

    width:100%;
    height:auto;

    max-height:55px;

    object-fit:contain;
    object-position:left center;
}

.vcFooterBrand p{
    max-width:310px;

    margin:
        25px
        0
        0;

    color:#77777e;

    font-size:12px;

    line-height:1.7;
}


/* ============================================================
   COLUMNS
============================================================ */

.vcFooterColumn{
    display:flex;
    flex-direction:column;
    align-items:flex-start;

    gap:13px;
}

.vcFooterColumnTitle{
    margin-bottom:8px;

    color:#67676d;

    font-size:9px;
    font-weight:800;

    letter-spacing:.13em;

    text-transform:uppercase;
}

.vcFooterColumn > a{
    position:relative;

    color:#c4c4c8;

    font-size:12px;
    font-weight:550;

    line-height:1.4;

    text-decoration:none;

    transition:
        color .25s ease,
        transform .25s ease;
}

.vcFooterColumn > a:hover{
    color:#fff;

    transform:translateX(3px);
}


/* ============================================================
   SOCIAL
============================================================ */

.vcFooterSocialText{
    max-width:210px;

    margin:
        0
        0
        8px;

    color:#77777e;

    font-size:11px;

    line-height:1.6;
}

.vcFooterSocials{
    display:flex;

    gap:8px;
}

.vcFooterSocials a{
    display:grid;
    place-items:center;

    width:39px;
    height:39px;

    border:
        1px
        solid
        rgba(255,255,255,.1);

    border-radius:50%;

    background:
        rgba(255,255,255,.025);

    color:#b9b9be;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}

.vcFooterSocials a:hover{
    background:#fff;

    border-color:#fff;

    color:#151517;

    transform:translateY(-3px);
}

.vcFooterSocials svg{
    width:16px;
    height:16px;
}


/* ============================================================
   BOTTOM
============================================================ */

.vcFooterBottom{
    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:30px;

    width:min(
        1440px,
        calc(100% - 72px)
    );

    margin:0 auto;

    padding:
        24px
        0;

    border-top:
        1px
        solid
        rgba(255,255,255,.08);
}

.vcFooterBottomLeft{
    display:flex;
    align-items:center;

    flex-wrap:wrap;

    gap:9px;

    color:#606067;

    font-size:9px;
}

.vcFooterDot{
    width:3px;
    height:3px;

    border-radius:50%;

    background:#4c4c52;
}


/* ============================================================
   LEGAL
============================================================ */

.vcFooterLegal{
    display:flex;
    align-items:center;

    flex-wrap:wrap;

    gap:22px;
}

.vcFooterLegal a{
    color:#696970;

    font-size:9px;

    text-decoration:none;

    transition:color .25s ease;
}

.vcFooterLegal a:hover{
    color:#fff;
}


/* ============================================================
   GIANT BRAND
============================================================ */

.vcFooterGiant{
    width:min(
        1440px,
        calc(100% - 72px)
    );

    margin:
        20px
        auto
        -3.5vw;

    overflow:hidden;

    color:
        rgba(
            255,
            255,
            255,
            .035
        );

    font-size:clamp(
        100px,
        16.4vw,
        255px
    );

    font-weight:900;

    line-height:.8;

    letter-spacing:-.075em;

    text-align:center;

    white-space:nowrap;

    user-select:none;

    pointer-events:none;
}


/* ============================================================
   TABLET
============================================================ */

@media(max-width:1000px){

    .vcFooterCtaInner{
        grid-template-columns:1fr;

        gap:35px;
    }

    .vcFooterCtaAction{
        max-width:600px;
    }

    .vcFooterMainInner{
        grid-template-columns:
            1.4fr
            1fr
            1fr;

        gap:
            55px
            35px;
    }

    .vcFooterBrand{
        grid-column:
            1
            /
            -1;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media(max-width:700px){

    .vcFooterCtaInner{
        width:
            calc(
                100% - 34px
            );

        padding:
            75px
            0
            70px;
    }

    .vcFooterCtaText h2{
        font-size:clamp(
            43px,
            13vw,
            62px
        );
    }

    .vcFooterCtaText h2 strong{
        display:inline;
    }

    .vcFooterMainInner{
        grid-template-columns:
            1fr
            1fr;

        width:
            calc(
                100% - 34px
            );

        gap:
            45px
            25px;

        padding:
            60px
            0
            50px;
    }

    .vcFooterBrand{
        grid-column:
            1
            /
            -1;

        margin-bottom:5px;
    }

    .vcFooterMainInner > .vcFooterColumn:last-child{
        grid-column:
            1
            /
            -1;
    }

    .vcFooterBottom{
        display:block;

        width:
            calc(
                100% - 34px
            );

        padding:
            25px
            0;
    }

    .vcFooterLegal{
        margin-top:16px;
    }

    .vcFooterGiant{
        width:
            calc(
                100% - 20px
            );

        margin-top:30px;

        font-size:20vw;
    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media(max-width:430px){

    .vcFooterMainInner{
        grid-template-columns:1fr;
    }

    .vcFooterBrand,
    .vcFooterMainInner > .vcFooterColumn:last-child{
        grid-column:auto;
    }

    .vcFooterColumn{
        padding-bottom:5px;
    }

}
/* ============================================================
   FOOTER EMAIL
============================================================ */

.vcFooterEmail{
    display:flex;
    align-items:center;

    gap:10px;

    width:max-content;
    max-width:100%;

    margin-top:22px;

    color:#9a9aa0;

    font-size:11px;
    font-weight:600;

    text-decoration:none;

    transition:
        color .25s ease,
        transform .25s ease;
}


.vcFooterEmail > span{
    display:grid;
    place-items:center;

    flex:none;

    width:31px;
    height:31px;

    border:
        1px
        solid
        rgba(255,255,255,.09);

    border-radius:50%;

    background:
        rgba(255,255,255,.025);

    transition:
        background .25s ease,
        border-color .25s ease;
}


.vcFooterEmail svg{
    width:14px;
    height:14px;
}


.vcFooterEmail:hover{
    color:#fff;

    transform:translateX(3px);
}


.vcFooterEmail:hover > span{
    background:
        rgba(255,255,255,.08);

    border-color:
        rgba(255,255,255,.18);
}