/* =========================================================
   MARVALET
   CONTACT PAGE
========================================================= */


/* =========================================================
   PAGE
========================================================= */

.contact-page {
    min-height: 100vh;

    padding:
        55px
        0
        70px;

    background:
        #080808;

    color:
        #ffffff;
}


.contact-container {
    width:
        min(
            900px,
            92%
        );

    margin:
        0
        auto;
}



/* =========================================================
   TOP BRAND AREA
========================================================= */

.contact-brand {
    padding:
        30px
        20px
        45px;

    text-align:
        center;
}


.contact-eyebrow {
    margin:
        0
        0
        15px;

    color:
        #777777;

    font-size:
        0.68rem;

    font-weight:
        700;

    letter-spacing:
        3px;

    text-transform:
        uppercase;
}



/* =========================================================
   MARVALET LOGO
========================================================= */

.contact-logo {
    width:
        260px;

    max-width:
        70%;

    margin:
        5px
        auto
        16px;

    display:
        block;

    text-decoration:
        none;
}


.contact-logo img {
    width:
        100%;

    height:
        110px;

    display:
        block;

    object-fit:
        contain;

    object-position:
        center;
}



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

.contact-brand h1 {
    margin:
        0;

    color:
        #ffffff;

    font-size:
        clamp(
            2.6rem,
            7vw,
            4.5rem
        );

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        4px;

    text-transform:
        uppercase;
}



/* =========================================================
   INTRO TEXT
========================================================= */

.contact-intro {
    max-width:
        500px;

    margin:
        18px
        auto
        0;

    color:
        #9b9b9b;

    font-size:
        0.92rem;

    line-height:
        1.7;
}



/* =========================================================
   SMALL SOCIAL ICONS
========================================================= */

.contact-social-icons {
    margin-top:
        26px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        9px;
}


.contact-social-icons a {
    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #0f0f0f;

    border:
        1px solid #343434;

    border-radius:
        50%;

    color:
        #bdbdbd;

    text-decoration:
        none;

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


.contact-social-icons a:hover {
    background:
        #171717;

    border-color:
        #777777;

    color:
        #ffffff;

    transform:
        translateY(-2px);
}


.contact-social-icons i {
    font-size:
        1rem;
}



/* =========================================================
   CONTACT LINKS AREA
========================================================= */

.contact-links {
    display:
        flex;

    flex-direction:
        column;

    gap:
        11px;
}



/* =========================================================
   CONTACT LINK
========================================================= */

.contact-link {
    min-height:
        88px;

    padding:
        15px
        20px;

    display:
        grid;

    grid-template-columns:
        56px
        minmax(0, 1fr)
        40px;

    align-items:
        center;

    gap:
        17px;

    background:
        linear-gradient(
            120deg,
            #0d0d0d 0%,
            #111111 100%
        );

    border:
        1px solid #303030;

    border-radius:
        3px;

    color:
        #ffffff;

    text-decoration:
        none;

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


.contact-link:hover {
    background:
        #141414;

    border-color:
        #666666;

    color:
        #ffffff;

    transform:
        translateY(-2px);
}



/* =========================================================
   FEATURED WHATSAPP LINK
========================================================= */

.contact-link-featured {
    background:
        linear-gradient(
            110deg,
            #151515 0%,
            #1b1b1b 50%,
            #101010 100%
        );

    border-color:
        #555555;
}


.contact-link-featured:hover {
    background:
        #1a1a1a;

    border-color:
        #888888;
}



/* =========================================================
   CONTACT LINK ICON
========================================================= */

.contact-link-icon {
    width:
        52px;

    height:
        52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    background:
        #080808;

    border:
        1px solid #414141;

    border-radius:
        50%;

    color:
        #ffffff;
}


.contact-link-icon i {
    font-size:
        1.2rem;
}



/* =========================================================
   CONTACT LINK TEXT
========================================================= */

.contact-link-text {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;
}


.contact-link-text strong {
    color:
        #ffffff;

    font-size:
        0.9rem;

    font-weight:
        700;

    letter-spacing:
        0.25px;
}


.contact-link-text small {
    color:
        #868686;

    font-size:
        0.75rem;

    line-height:
        1.45;
}



/* =========================================================
   LINK ARROW
========================================================= */

.contact-link-arrow {
    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #777777;

    font-size:
        1.2rem;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


.contact-link:hover
.contact-link-arrow {
    color:
        #ffffff;

    transform:
        translateX(4px);
}



/* =========================================================
   QUOTE CTA
========================================================= */

.contact-quote {
    margin-top:
        28px;

    padding:
        32px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        35px;

    background:
        linear-gradient(
            110deg,
            #0d0d0d 0%,
            #161616 55%,
            #0d0d0d 100%
        );

    border:
        1px solid #363636;

    border-radius:
        3px;
}


.contact-quote-content {
    min-width:
        0;
}


.contact-quote-label {
    margin:
        0
        0
        7px;

    color:
        #777777;

    font-size:
        0.65rem;

    font-weight:
        700;

    letter-spacing:
        2px;

    text-transform:
        uppercase;
}


.contact-quote h2 {
    margin:
        0
        0
        8px;

    color:
        #ffffff;

    font-size:
        clamp(
            1.4rem,
            3vw,
            2.1rem
        );

    font-weight:
        800;

    line-height:
        1.05;

    text-transform:
        uppercase;
}


.contact-quote-content > p:not(.contact-quote-label) {
    max-width:
        510px;

    margin:
        0;

    color:
        #949494;

    font-size:
        0.82rem;

    line-height:
        1.6;
}



/* =========================================================
   QUOTE BUTTON
========================================================= */

.contact-quote-button {
    min-width:
        210px;

    min-height:
        54px;

    padding:
        15px
        18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    flex-shrink:
        0;

    background:
        linear-gradient(
            135deg,
            #f2f2f2 0%,
            #d3d3d3 25%,
            #aaaaaa 48%,
            #eeeeee 72%,
            #ababab 100%
        );

    border:
        1px solid #dddddd;

    border-radius:
        3px;

    color:
        #080808;

    font-size:
        0.75rem;

    font-weight:
        800;

    letter-spacing:
        1px;

    text-decoration:
        none;

    text-transform:
        uppercase;

    transition:
        transform 0.2s ease,
        filter 0.2s ease;
}


.contact-quote-button:hover {
    color:
        #080808;

    transform:
        translateY(-2px);

    filter:
        brightness(1.08);
}


.contact-quote-button span {
    color:
        #080808;

    font-size:
        1rem;
}



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

.contact-bottom {
    margin-top:
        30px;

    padding-top:
        22px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    border-top:
        1px solid #252525;

    color:
        #606060;

    font-size:
        0.63rem;

    font-weight:
        700;

    letter-spacing:
        1.2px;

    text-transform:
        uppercase;
}


.contact-bottom span:first-child {
    color:
        #909090;
}



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

@media (max-width: 800px) {


    .contact-page {
        padding:
            40px
            0
            55px;
    }


    .contact-brand {
        padding:
            25px
            15px
            38px;
    }


    .contact-logo {
        width:
            235px;
    }


    .contact-logo img {
        height:
            100px;
    }


    .contact-quote {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .contact-quote-button {
        width:
            100%;
    }


}



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

@media (max-width: 600px) {


    .contact-page {
        padding:
            28px
            0
            45px;
    }


    .contact-container {
        width:
            92%;
    }



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

    .contact-brand {
        padding:
            20px
            10px
            32px;
    }


    .contact-logo {
        width:
            190px;

        max-width:
            70%;

        margin-bottom:
            10px;
    }


    .contact-logo img {
        height:
            82px;
    }


    .contact-brand h1 {
        font-size:
            2.7rem;

        letter-spacing:
            2px;
    }


    .contact-intro {
        max-width:
            330px;

        font-size:
            0.82rem;
    }


    .contact-social-icons {
        margin-top:
            22px;
    }


    .contact-social-icons a {
        width:
            39px;

        height:
            39px;
    }



    /* ========================================
       CONTACT LINKS
    ======================================== */

    .contact-link {
        min-height:
            82px;

        padding:
            13px
            14px;

        grid-template-columns:
            46px
            minmax(0, 1fr)
            28px;

        gap:
            12px;
    }


    .contact-link-icon {
        width:
            44px;

        height:
            44px;
    }


    .contact-link-icon i {
        font-size:
            1rem;
    }


    .contact-link-text strong {
        font-size:
            0.82rem;
    }


    .contact-link-text small {
        font-size:
            0.69rem;
    }


    .contact-link-arrow {
        width:
            28px;

        height:
            28px;

        font-size:
            1rem;
    }



    /* ========================================
       QUOTE CTA
    ======================================== */

    .contact-quote {
        margin-top:
            22px;

        padding:
            25px
            20px;

        gap:
            25px;
    }


    .contact-quote h2 {
        font-size:
            1.6rem;
    }


    .contact-quote-button {
        min-width:
            0;
    }



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

    .contact-bottom {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            7px;

        font-size:
            0.58rem;
    }


}



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

@media (max-width: 430px) {


    .contact-logo {
        width:
            170px;
    }


    .contact-logo img {
        height:
            74px;
    }


    .contact-brand h1 {
        font-size:
            2.35rem;
    }


    .contact-social-icons {
        gap:
            7px;
    }


    .contact-social-icons a {
        width:
            36px;

        height:
            36px;
    }


    .contact-link {
        padding:
            12px;

        grid-template-columns:
            42px
            minmax(0, 1fr)
            24px;

        gap:
            10px;
    }


    .contact-link-icon {
        width:
            40px;

        height:
            40px;
    }


    .contact-link-text strong {
        font-size:
            0.78rem;
    }


    .contact-link-text small {
        font-size:
            0.66rem;
    }


    .contact-quote {
        padding:
            22px
            17px;
    }


    .contact-quote h2 {
        font-size:
            1.45rem;
    }


}