/* =========================================================
   SANTE BEAUTY — KONTAKT
   ========================================================= */

:root{

    --contact-brown:#5b4030;
    --contact-dark:#493329;
    --contact-gold:#a77752;

    --contact-cream:#f8f2eb;
    --contact-paper:#fffdf9;

    --contact-line:#eaded3;
    --contact-muted:#7c6e64;

}



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

.contact-page{

    width:100%;

    overflow:hidden;

    color:var(--contact-dark);

    background:#fff;

}



/* =========================================================
   HERO
   ========================================================= */

.contact-hero{

    display:grid;

    grid-template-columns:
        1fr 1fr;

    min-height:440px;

    background:
        linear-gradient(
            120deg,
            #fbf6f0,
            #fffdf9
        );

}



.contact-hero-copy{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:
        65px
        clamp(45px,7vw,110px);

    overflow:hidden;

}



.contact-hero-copy::before{

    content:"";

    position:absolute;

    width:300px;
    height:300px;

    left:-170px;
    bottom:-150px;

    border-radius:50%;

    border:
        1px solid
        rgba(167,119,82,.13);

}



.contact-kicker{

    font:
        500 10px/1
        "DM Sans",sans-serif;

    letter-spacing:5px;

    color:#a17455;

}



.contact-hero h1{

    max-width:560px;

    margin:
        20px 0
        18px;

    font:
        400 clamp(54px,5.3vw,82px)/.98
        "Playfair Display",serif;

    color:#50372a;

}



.contact-hero-copy > p{

    max-width:520px;

    margin:0;

    font:
        400 16px/1.65
        "DM Sans",sans-serif;

    color:#74655b;

}



.contact-brand{

    display:flex;

    align-items:center;

    gap:14px;

    margin-top:26px;

    font:
        500 8px/1
        "DM Sans",sans-serif;

    letter-spacing:3.8px;

    color:#a17455;

}



.contact-brand i{

    width:38px;
    height:1px;

    background:#d4bba7;

}



/* =========================================================
   HERO IMAGE
   ========================================================= */

.contact-hero-image{

    position:relative;

    min-height:440px;

    overflow:hidden;

    background:#e9ddd2;

}



.contact-hero-image img{

    display:block;

    width:100%;
    height:100%;

    position:absolute;

    inset:0;

    object-fit:cover;

}



.contact-hero-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(79,52,37,.03),
            rgba(58,37,26,.12)
        );

}



.contact-hero-script{

    position:absolute;

    z-index:2;

    right:8%;
    top:50%;

    transform:
        translateY(-50%)
        rotate(-5deg);

    font:
        400 39px/1.05
        "Allura",cursive;

    text-align:center;

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

    text-shadow:
        0 2px 16px
        rgba(60,38,24,.2);

}



/* =========================================================
   MAIN
   ========================================================= */
.contact-main{
    position:relative;
    z-index:3;
    width:min(1400px,94%);
    margin:28px auto 0;
}



/* =========================================================
   INFO CARDS
   ========================================================= */

.contact-info-grid{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:12px;

}



.contact-info-card{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:16px;

    min-height:120px;

    padding:22px;

    box-sizing:border-box;

    text-decoration:none;

    color:inherit;

    border:
        1px solid
        rgba(167,119,82,.12);

    border-radius:9px;

    background:
        rgba(255,253,249,.98);

    box-shadow:
        0 14px 38px
        rgba(74,50,36,.07);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}



a.contact-info-card:hover{

    transform:
        translateY(-4px);

    border-color:
        rgba(167,119,82,.28);

    box-shadow:
        0 20px 42px
        rgba(74,50,36,.11);

}



.contact-info-icon{

    flex:0 0 auto;

    display:flex;

    align-items:center;
    justify-content:center;

}



.contact-info-icon svg{

    width:34px;
    height:34px;

    fill:none;

    stroke:#a77752;

    stroke-width:1.5;

    stroke-linecap:round;
    stroke-linejoin:round;

}



.contact-info-card h3{

    margin:
        0 0 7px;

    font:
        500 13px/1.2
        "DM Sans",sans-serif;

    color:#624839;

}



.contact-info-card p{

    margin:0;

    font:
        400 11px/1.55
        "DM Sans",sans-serif;

    color:#74655b;

}



.contact-info-card small{

    display:block;

    margin-top:2px;

    font-size:9px;

    font-style:italic;

    color:#9a887c;

}



/* =========================================================
   BODY GRID
   ========================================================= */

.contact-body-grid{

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:14px;

    margin-top:14px;

}



.contact-panel{

    padding:
        clamp(28px,4vw,48px);

    box-sizing:border-box;

    border:
        1px solid
        rgba(167,119,82,.12);

    border-radius:10px;

    background:#fffdf9;

}



.contact-small-title{

    display:block;

    margin-bottom:12px;

    font:
        500 8px/1
        "DM Sans",sans-serif;

    letter-spacing:3px;

    color:#aa7955;

}



.contact-panel h2{

    margin:0 0 8px;

    font:
        400 31px/1.1
        "Playfair Display",serif;

    color:#604433;

}



.contact-panel > p{

    margin:
        0 0 25px;

    font:
        400 11px/1.6
        "DM Sans",sans-serif;

    color:#817168;

}



/* =========================================================
   FORM
   ========================================================= */

.contact-form{

    display:flex;

    flex-direction:column;

    gap:12px;

}



.contact-form label > span{

    position:absolute;

    width:1px;
    height:1px;

    overflow:hidden;

    clip:
        rect(0 0 0 0);

}



.contact-form input,
.contact-form textarea{

    display:block;

    width:100%;

    box-sizing:border-box;

    border:
        1px solid
        #e6d8cc;

    outline:none;

    border-radius:24px;

    padding:
        0 20px;

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

    color:#554035;

    font:
        400 11px/1
        "DM Sans",sans-serif;

    transition:
        border-color .3s ease,
        box-shadow .3s ease;

}



.contact-form input{

    height:48px;

}



.contact-form textarea{

    min-height:135px;

    padding-top:17px;

    line-height:1.5;

    resize:vertical;

}



.contact-form input:focus,
.contact-form textarea:focus{

    border-color:#b88967;

    box-shadow:
        0 0 0 3px
        rgba(167,119,82,.08);

}



.contact-form button{

    display:flex;

    align-items:center;
    justify-content:center;

    gap:24px;

    width:100%;
    height:50px;

    margin-top:2px;

    border:0;

    border-radius:30px;

    cursor:pointer;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #936443,
            #b27b52
        );

    box-shadow:
        0 12px 28px
        rgba(93,62,42,.13);

    font:
        600 10px/1
        "DM Sans",sans-serif;

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}



.contact-form button:hover{

    transform:
        translateY(-2px);

    box-shadow:
        0 16px 34px
        rgba(93,62,42,.18);

}



.contact-privacy{

    margin:
        3px 3px 0 !important;

    font-size:
        8px !important;

    color:
        #98877c !important;

}



.contact-privacy a{

    color:#80604b;

    text-decoration:underline;

}



.contact-form-status{

    min-height:14px;

    font:
        400 9px/1.4
        "DM Sans",sans-serif;

    color:#9b6b4c;

}



/* =========================================================
   MAP
   ========================================================= */

.contact-map{

    position:relative;

    height:260px;

    overflow:hidden;

    border-radius:8px;

    background:

        linear-gradient(
            45deg,
            rgba(194,180,166,.22) 25%,
            transparent 25%
        ),

        linear-gradient(
            -45deg,
            rgba(194,180,166,.18) 25%,
            transparent 25%
        ),

        #eeeae4;

    background-size:
        50px 50px;

}



.contact-map::before,
.contact-map::after{

    content:"";

    position:absolute;

    width:140%;

    height:1px;

    left:-20%;

    background:#d7d0c9;

    transform:
        rotate(-18deg);

}



.contact-map::before{

    top:35%;

}



.contact-map::after{

    top:66%;

    transform:
        rotate(12deg);

}



.contact-map-placeholder{

    position:absolute;

    z-index:2;

    left:50%;
    top:50%;

    transform:
        translate(-50%,-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    width:180px;

    padding:15px 18px;

    border-radius:7px;

    text-align:center;

    background:#fff;

    box-shadow:
        0 8px 30px
        rgba(54,41,31,.15);

}



.contact-map-placeholder svg{

    width:30px;
    height:30px;

    margin-bottom:7px;

    fill:none;

    stroke:#a77752;

    stroke-width:1.6;

}



.contact-map-placeholder strong{

    font:
        600 10px/1.3
        "DM Sans",sans-serif;

    color:#554034;

}



.contact-map-placeholder span{

    margin-top:3px;

    font:
        400 9px/1.3
        "DM Sans",sans-serif;

    color:#85766c;

}



/* MAP BUTTON */

.contact-map-button{

    display:flex;

    align-items:center;
    justify-content:center;

    gap:14px;

    width:min(360px,90%);
    height:44px;

    margin:
        -12px auto
        30px;

    position:relative;

    z-index:3;

    border-radius:25px;

    text-decoration:none;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #91613f,
            #b27a51
        );

    font:
        500 9px/1
        "DM Sans",sans-serif;

}



.contact-map-button svg{

    width:16px;
    height:16px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.5;

}



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

.contact-social{

    padding-top:5px;

}



.contact-social h3{

    margin:0 0 6px;

    font:
        400 25px/1
        "Playfair Display",serif;

    color:#634636;

}



.contact-social p{

    margin:
        0 0 16px;

    font:
        400 10px/1.5
        "DM Sans",sans-serif;

    color:#88776c;

}



.contact-social a{

    display:flex;

    align-items:center;
    justify-content:center;

    gap:17px;

    width:min(330px,100%);
    height:44px;

    border:
        1px solid
        #ae8060;

    border-radius:25px;

    text-decoration:none;

    color:#805b43;

    font:
        500 9px/1
        "DM Sans",sans-serif;

}



.contact-social svg{

    width:19px;
    height:19px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.5;

}



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

.contact-final{

    position:relative;

    overflow:hidden;

    margin-top:55px;

    padding:
        75px 20px
        85px;

    text-align:center;

    background:

        radial-gradient(
            circle at 8% 85%,
            rgba(167,119,82,.12),
            transparent 25%
        ),

        radial-gradient(
            circle at 92% 10%,
            rgba(167,119,82,.11),
            transparent 25%
        ),

        #f9f3ed;

}



.contact-final-brand{

    display:block;

    font:
        500 8px/1
        "DM Sans",sans-serif;

    letter-spacing:5px;

    color:#a17455;

}



.contact-final h2{

    margin:
        22px 0 12px;

    font:
        400 clamp(50px,5vw,72px)/1
        "Allura",cursive;

    color:#906346;

    transform:
        rotate(-2deg);

}



.contact-final p{

    margin:
        0 auto 26px;

    max-width:540px;

    font:
        400 11px/1.6
        "DM Sans",sans-serif;

    color:#817168;

}



.contact-final > a{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:24px;

    min-width:240px;
    height:48px;

    padding:0 25px;

    border-radius:30px;

    text-decoration:none;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #8d5e3e,
            #ad7952
        );

    box-shadow:
        0 13px 30px
        rgba(93,62,42,.15);

    font:
        500 10px/1
        "DM Sans",sans-serif;

}



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

.gallery-bottom-nav{

    display:none;

}



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

@media(max-width:1000px)
and (min-width:701px){

    .contact-hero{

        grid-template-columns:
            48% 52%;

    }


    .contact-hero-copy{

        padding:
            55px 38px;

    }


    .contact-info-grid{

        grid-template-columns:
            repeat(2,1fr);

    }

}



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

@media(max-width:700px){

    body{

        padding-bottom:68px;

    }


    /* HERO */

    .contact-hero{

        display:block;

        min-height:0;

    }


    .contact-hero-copy{

        min-height:300px;

        padding:
            42px 28px
            35px;

        text-align:left;

    }


    .contact-kicker{

        font-size:8px;

        letter-spacing:4px;

    }


    .contact-hero h1{

        max-width:290px;

        margin:
            15px 0
            13px;

        font-size:48px;

    }


    .contact-hero-copy > p{

        max-width:320px;

        font-size:12px;
        line-height:1.55;

    }


    .contact-brand{

        margin-top:20px;

        gap:9px;

        font-size:7px;

        letter-spacing:2.6px;

    }


    .contact-brand i{

        width:27px;

    }


    .contact-hero-image{

        height:245px;

        min-height:0;

    }


    .contact-hero-script{

        right:7%;

        font-size:29px;

    }



    /* MAIN */

    .contact-main{

        width:calc(100% - 20px);

        margin:
            -16px auto 0;

    }



    /* CONTACT CARDS */

    .contact-info-grid{

        grid-template-columns:1fr;

        gap:7px;

    }


    .contact-info-card{

        justify-content:flex-start;

        min-height:74px;

        padding:
            14px 17px;

        gap:14px;

        border-radius:8px;

    }


    .contact-info-icon svg{

        width:27px;
        height:27px;

    }


    .contact-info-card h3{

        margin-bottom:4px;

        font-size:11px;

    }


    .contact-info-card p{

        font-size:9px;

    }


    .contact-info-card small{

        font-size:8px;

    }



    /* BODY */

    .contact-body-grid{

        grid-template-columns:1fr;

        gap:9px;

        margin-top:9px;

    }


    .contact-panel{

        padding:
            26px 17px;

    }


    .contact-panel h2{

        font-size:26px;

    }


    .contact-panel > p{

        margin-bottom:19px;

        font-size:9px;

    }



    /* FORM */

    .contact-form{

        gap:9px;

    }


    .contact-form input{

        height:43px;

    }


    .contact-form input,
    .contact-form textarea{

        padding-left:16px;

        font-size:9px;

    }


    .contact-form textarea{

        min-height:115px;

        padding-top:15px;

    }


    .contact-form button{

        height:45px;

    }



    /* MAP */

    .contact-map{

        height:210px;

    }


    .contact-map-button{

        width:92%;

        margin-bottom:25px;

    }


    .contact-social h3{

        font-size:23px;

    }



    /* FINAL */

    .contact-final{

        margin-top:25px;

        padding:
            57px 20px
            105px;

    }


    .contact-final-brand{

        font-size:7px;

        letter-spacing:4px;

    }


    .contact-final h2{

        margin-top:18px;

        font-size:48px;

    }


    .contact-final p{

        max-width:300px;

        font-size:9px;

    }


    .contact-final > a{

        min-width:230px;

    }



    /* =====================================================
       BOTTOM NAV — SAME AS GALLERY
       ===================================================== */

    .gallery-bottom-nav{

        position:fixed;

        left:0;
        right:0;
        bottom:0;

        z-index:9998;

        display:grid;

        grid-template-columns:
            repeat(5,1fr);

        height:68px;

        background:
            rgba(255,252,248,.98);

        border-top:
            1px solid #eadfd5;

        box-shadow:
            0 -5px 22px
            rgba(70,48,33,.06);

    }


    .gallery-bottom-nav > a{

        display:flex;

        flex-direction:column;

        align-items:center;
        justify-content:center;

        gap:4px;

        color:#6d5c51;

        text-decoration:none;

        font:
            500 8px/1
            "DM Sans",sans-serif;

    }


    .gallery-bottom-nav > a.active{

        color:#956847;

    }


    .gallery-bottom-nav svg{

        width:21px;
        height:21px;

        fill:none;

        stroke:currentColor;

        stroke-width:1.45;

        stroke-linecap:round;
        stroke-linejoin:round;

    }


    .gallery-bottom-nav .book{

        position:relative;

        padding-top:3px;

    }


    .gallery-bottom-nav .book i{

        display:flex;

        align-items:center;
        justify-content:center;

        width:48px;
        height:48px;

        margin-top:-24px;

        border:
            5px solid #fff;

        border-radius:50%;

        background:#986b47;

        color:#fff;

        box-shadow:
            0 6px 18px
            rgba(78,52,36,.18);

    }


    .gallery-bottom-nav .book svg{

        width:22px;
        height:22px;

    }

}



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

@media(max-width:380px){

    .contact-hero h1{

        font-size:43px;

    }


    .contact-info-card{

        padding:
            13px 14px;

    }


    .contact-final h2{

        font-size:43px;

    }

}



/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

    .contact-info-card,
    .contact-form button{

        transition:none;

    }

}
/* =========================================================
   CONTACT — REAL GOOGLE MAP
   ========================================================= */

.contact-map{
    position:relative;

    width:100%;
    height:420px;

    overflow:hidden;

    border-radius:22px;

    background:#f5eee7;

    box-shadow:
        0 18px 45px rgba(76,52,38,.08);
}

.contact-map iframe{
    display:block;

    width:100%;
    height:100%;

    border:0;
}


/* MOBILE */

@media (max-width:700px){

    .contact-map{
        height:330px;
        border-radius:18px;
    }

}
/* =========================================================
   MOBILE — FIX CONTACT OVERLAP
   ========================================================= */

@media (max-width:700px){

    .contact-hero{
        display:block;
        min-height:0 !important;
        height:auto !important;
        overflow:visible;
    }

    .contact-hero-copy{
        min-height:300px;
    }

    .contact-hero-image{
        position:relative;
        width:100%;
        height:245px !important;
        min-height:245px !important;
        overflow:hidden;
    }

    .contact-hero-image img{
        position:absolute;
        inset:0;

        width:100%;
        height:100%;

        object-fit:cover;
    }

    .contact-main{
        position:relative;
        z-index:3;

        width:calc(100% - 20px);

        /* QUAN TRỌNG: không kéo lên hero nữa */
        margin:20px auto 0 !important;
    }

    .contact-info-grid{
        position:relative;
        z-index:3;

        display:grid;
        grid-template-columns:1fr;

        gap:10px;

        margin:0 !important;
        padding:0 !important;

        transform:none !important;
    }

    .contact-info-card{
        position:relative;

        width:100%;
        min-height:84px;

        margin:0 !important;

        transform:none;
    }

}
/* =====================================================
   CONTACT - FOLLOW US
===================================================== */

.contact-social-section{
    margin-top: 34px;
    padding: 48px 34px 44px;
    background: #fbf8f4;
    border: 1px solid #eadfd5;
    border-radius: 22px;
}

.contact-social-heading{
    text-align: center;
    margin-bottom: 38px;
}

.contact-social-heading > span{
    display: block;
    margin-bottom: 12px;
    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .30em;
    color: #9b7155;
}

.contact-social-heading h2{
    margin: 0 0 8px;
    font-family: "Playfair Display", serif;
    font-size: 38px;
    font-weight: 400;
    color: #5d4032;
}

.contact-social-heading p{
    margin: 0;
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    color: #8a796e;
}


/* 4 SOCIALS */

.contact-social-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding-top: 30px;
    border-top: 1px solid #ded0c4;
}

.contact-social-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 13px;

    min-height: 115px;

    color: #49382f;
    text-decoration: none;

    font-family: "DM Sans", sans-serif;
    font-size: 14px;

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

.contact-social-item img{
    width: 54px;
    height: 54px;
    object-fit: contain;
}

.contact-social-item:hover{
    transform: translateY(-4px);
    opacity: .78;
}


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

@media (max-width:700px){

    .contact-social-section{
        margin-top: 20px;
        padding: 35px 16px 30px;
        border-radius: 18px;
    }

    .contact-social-heading{
        margin-bottom: 25px;
    }

    .contact-social-heading h2{
        font-size: 31px;
    }

    .contact-social-heading p{
        max-width: 290px;
        margin: 0 auto;
        line-height: 1.6;
    }

    .contact-social-grid{
        grid-template-columns: repeat(4, 1fr);
        gap: 5px;
        padding-top: 25px;
    }

    .contact-social-item{
        min-height: 90px;
        gap: 9px;
        font-size: 10px;
    }

    .contact-social-item img{
        width: 42px;
        height: 42px;
    }
}
/* =========================================================
   SANTE BEAUTY
   PAYMENT + WHATSAPP — LUXURY SECTION
   ========================================================= */

.contact-extra-section{
    width:100%;
    margin:34px 0 0;
}


/* =========================================================
   PAYMENT
   ========================================================= */

.contact-payment{
    position:relative;
    overflow:hidden;

    min-height:480px;

    padding:
        58px
        clamp(38px,5vw,72px);

    box-sizing:border-box;

    border:
        1px solid
        rgba(167,119,82,.14);

    border-radius:22px;

    background:
        radial-gradient(
            circle at 92% 55%,
            rgba(214,183,157,.22),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            #fffdf9 0%,
            #fbf6f0 55%,
            #f6ebe1 100%
        );

    box-shadow:
        0 18px 48px
        rgba(75,52,38,.07);
}


/* decorative circle */

.contact-payment::after{
    content:"";

    position:absolute;

    width:430px;
    height:430px;

    right:-175px;
    bottom:-170px;

    border-radius:50%;

    background:
        rgba(206,168,137,.12);

    pointer-events:none;
}


/* =========================================================
   PAYMENT TEXT
   ========================================================= */

.contact-payment-head{
    position:relative;
    z-index:3;

    max-width:720px;
}


.contact-payment-head > span{
    display:block;

    margin-bottom:18px;

    font:
        600 10px/1
        "DM Sans",sans-serif;

    letter-spacing:4.5px;

    color:#a77752;
}


.contact-payment-head h2{
    margin:0;

    font:
        400 clamp(36px,3.5vw,50px)/1.08
        "Playfair Display",serif;

    color:#54392c;
}


.contact-payment-head p{
    max-width:660px;

    margin:
        20px 0 0;

    font:
        400 14px/1.7
        "DM Sans",sans-serif;

    color:#75665d;
}


/* =========================================================
   PAYMENT LOGOS
   ========================================================= */

.contact-payment-logos{
    position:relative;
    z-index:3;

    display:flex;

    align-items:stretch;

    gap:12px;

    margin-top:34px;

    max-width:820px;
}


.payment-logo{
    display:flex;

    align-items:center;
    justify-content:center;

    height:70px;

    min-width:120px;

    padding:
        0 18px;

    box-sizing:border-box;

    border:
        1px solid
        rgba(103,76,59,.08);

    border-radius:10px;

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

    box-shadow:
        0 7px 20px
        rgba(69,48,35,.05);

    font-family:
        "DM Sans",sans-serif;
}


/* VISA */

.payment-visa{
    font-size:28px;
    font-weight:800;
    font-style:italic;

    letter-spacing:-2px;

    color:#183ca7;
}


/* MASTERCARD */

.payment-mastercard{
    flex-direction:column;

    gap:4px;
}


.mastercard-symbol{
    display:flex;

    align-items:center;

    position:relative;

    height:29px;
}


.mastercard-symbol i{
    display:block;

    width:29px;
    height:29px;

    border-radius:50%;
}


.mastercard-symbol i:first-child{
    background:#e9272d;
}


.mastercard-symbol i:last-child{
    margin-left:-10px;

    background:
        rgba(246,153,27,.93);
}


.payment-mastercard small{
    font:
        500 7px/1
        "DM Sans",sans-serif;

    color:#252525;
}


/* GIROCARD */

.payment-girocard{
    gap:7px;

    color:#245ea8;
}


.payment-girocard strong{
    font-size:25px;
    font-weight:400;
}


.payment-girocard span{
    font-size:16px;
    font-weight:600;
}


/* APPLE PAY */

.payment-apple{
    gap:5px;

    color:#111;
}


.apple-mark{
    position:relative;

    width:20px;
    height:24px;

    overflow:hidden;

    text-indent:-9999px;
}


.apple-mark::before{
    content:"";

    position:absolute;

    width:17px;
    height:18px;

    left:1px;
    bottom:0;

    border-radius:
        45% 45%
        48% 48%;

    background:#111;
}


.apple-mark::after{
    content:"";

    position:absolute;

    width:7px;
    height:4px;

    left:11px;
    top:0;

    border-radius:
        8px 2px
        8px 2px;

    background:#111;

    transform:
        rotate(-35deg);
}


.payment-apple strong{
    font-size:23px;
    font-weight:600;
}


/* GOOGLE PAY */

.payment-google{
    gap:5px;

    color:#333;
}


.google-g{
    font-size:25px;
    font-weight:700;

    color:#4285f4;
}


.payment-google span{
    font-size:22px;
    font-weight:500;
}


/* =========================================================
   PAYMENT FEATURES
   ========================================================= */

.contact-payment-features{
    position:relative;
    z-index:3;

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-top:35px;
}


.contact-payment-features > div{
    display:flex;

    align-items:center;

    gap:12px;

    font:
        400 12px/1.4
        "DM Sans",sans-serif;

    color:#66584f;
}


.contact-payment-features i{
    display:flex;

    align-items:center;
    justify-content:center;

    flex:0 0 auto;

    width:24px;
    height:24px;

    border:
        1px solid
        #c79a77;

    border-radius:50%;

    color:#a77752;

    font:
        500 11px/1
        "DM Sans",sans-serif;

    font-style:normal;
}


/* =========================================================
   SANTE DECORATION
   ========================================================= */

/* =========================================================
   WHATSAPP
   ========================================================= */

.contact-whatsapp-box{
    position:relative;

    display:grid;

    grid-template-columns:
        1fr 390px;

    align-items:center;

    min-height:245px;

    margin-top:14px;

    padding:
        38px
        clamp(38px,5vw,72px);

    box-sizing:border-box;

    overflow:hidden;

    border:
        1px solid
        rgba(167,119,82,.14);

    border-radius:22px;

    background:
        linear-gradient(
            120deg,
            #fffdf9,
            #f8eee5
        );

    box-shadow:
        0 15px 40px
        rgba(75,52,38,.06);
}


/* =========================================================
   WHATSAPP COPY
   ========================================================= */

.contact-whatsapp-copy{
    position:relative;

    z-index:4;
}


.contact-whatsapp-kicker{
    display:block;

    margin-bottom:12px;

    font:
        600 8px/1
        "DM Sans",sans-serif;

    letter-spacing:3.5px;

    color:#a77752;
}


.contact-whatsapp-copy h2{
    margin:0;

    font:
        400 36px/1.1
        "Playfair Display",serif;

    color:#54392c;
}


.contact-whatsapp-copy > p{
    margin:
        12px 0
        23px;

    font:
        400 13px/1.6
        "DM Sans",sans-serif;

    color:#77685e;
}


/* =========================================================
   WHATSAPP BUTTON
   ========================================================= */

.contact-whatsapp-button{
    display:inline-flex;

    align-items:center;

    gap:15px;

    min-width:355px;
    min-height:58px;

    padding:
        0 22px;

    box-sizing:border-box;

    border:
        1px solid
        #92705b;

    border-radius:12px;

    text-decoration:none;

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

    color:#594236;

    font:
        600 11px/1
        "DM Sans",sans-serif;

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}


.contact-whatsapp-button:hover{
    transform:
        translateY(-2px);

    background:#fff;

    box-shadow:
        0 12px 28px
        rgba(70,47,33,.09);
}


.contact-whatsapp-icon{
    display:flex;

    align-items:center;
    justify-content:center;
}


.contact-whatsapp-icon svg{
    width:27px;
    height:27px;

    fill:none;

    stroke:#76513b;

    stroke-width:1.5;

    stroke-linecap:round;
    stroke-linejoin:round;
}


.contact-whatsapp-arrow{
    margin-left:auto;

    font-size:18px;

    font-weight:300;

    color:#a77752;
}


/* =========================================================
   PHONE
   ========================================================= */

.contact-whatsapp-visual{
    position:absolute;

    right:60px;
    bottom:-105px;

    z-index:2;
}


.contact-whatsapp-phone{
    position:relative;

    width:190px;
    height:360px;

    padding:9px;

    box-sizing:border-box;

    border:
        4px solid
        #2e2926;

    border-radius:34px;

    background:#161514;

    box-shadow:
        0 25px 50px
        rgba(53,37,27,.23);

    transform:
        rotate(10deg);
}


.contact-whatsapp-phone-top{
    position:absolute;

    z-index:3;

    width:70px;
    height:17px;

    left:50%;
    top:7px;

    transform:
        translateX(-50%);

    border-radius:
        0 0
        12px 12px;

    background:#161514;
}


.contact-whatsapp-screen{
    display:flex;

    flex-direction:column;

    align-items:center;
    justify-content:center;

    width:100%;
    height:100%;

    border-radius:25px;

    background:
        linear-gradient(
            150deg,
            #fff,
            #eee8e2
        );
}


.contact-whatsapp-logo{
    display:flex;

    align-items:center;
    justify-content:center;

    width:66px;
    height:66px;

    margin-bottom:18px;

    border-radius:18px;

    background:#25d366;

    box-shadow:
        0 8px 20px
        rgba(37,211,102,.18);
}


.contact-whatsapp-logo svg{
    width:42px;
    height:42px;

    fill:none;

    stroke:#fff;

    stroke-width:1.5;

    stroke-linecap:round;
    stroke-linejoin:round;
}


.contact-whatsapp-screen strong{
    font:
        500 12px/1
        "DM Sans",sans-serif;

    letter-spacing:2px;

    color:#624735;
}


.contact-whatsapp-screen small{
    margin-top:7px;

    font:
        500 6px/1
        "DM Sans",sans-serif;

    letter-spacing:2px;

    color:#9a7d69;
}


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

@media(max-width:1000px){

    .contact-payment{
        min-height:510px;
    }


    .contact-payment-decoration{
        right:4%;
    }


    .contact-whatsapp-box{
        grid-template-columns:
            1fr 260px;
    }


    .contact-whatsapp-visual{
        right:35px;
    }

}


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

@media(max-width:700px){

    .contact-extra-section{
        margin-top:20px;
    }


    /* PAYMENT */

    .contact-payment{
        min-height:0;

        padding:
            38px 18px
            34px;

        border-radius:18px;
    }


    .contact-payment::after{
        width:260px;
        height:260px;

        right:-160px;
        bottom:-130px;
    }


    .contact-payment-head{
        text-align:center;
    }


    .contact-payment-head > span{
        margin-bottom:14px;

        font-size:8px;

        letter-spacing:3.2px;
    }


    .contact-payment-head h2{
        font-size:32px;
    }


    .contact-payment-head p{
        max-width:320px;

        margin:
            15px auto 0;

        font-size:10px;
        line-height:1.65;
    }


    /* LOGOS */

    .contact-payment-logos{
        display:grid;

        grid-template-columns:
            repeat(6,1fr);

        gap:7px;

        margin-top:26px;
    }


    .payment-logo{
        min-width:0;

        height:58px;

        padding:
            0 8px;

        border-radius:8px;
    }


    .payment-visa{
        grid-column:
            span 2;

        font-size:22px;
    }


    .payment-mastercard{
        grid-column:
            span 2;
    }


    .payment-girocard{
        grid-column:
            span 2;
    }


    .payment-apple{
        grid-column:
            2 / span 2;
    }


    .payment-google{
        grid-column:
            4 / span 2;
    }


    .mastercard-symbol i{
        width:24px;
        height:24px;
    }


    .payment-girocard strong{
        font-size:19px;
    }


    .payment-girocard span{
        font-size:12px;
    }


    .payment-apple strong,
    .payment-google span{
        font-size:18px;
    }


    .google-g{
        font-size:20px;
    }


    /* FEATURES */

    .contact-payment-features{
        gap:10px;

        margin:
            27px auto 0;

        max-width:310px;
    }


    .contact-payment-features > div{
        font-size:9px;
    }


    .contact-payment-features i{
        width:21px;
        height:21px;

        font-size:9px;
    }


    /* SANTE DECORATION */

    .contact-payment-decoration{
        position:relative;

        right:auto;
        bottom:auto;

        width:180px;
        min-width:0;

        margin:
            30px auto 0;

        padding:
            21px 20px;

        transform:
            rotate(1deg);
    }


    /* WHATSAPP */

    .contact-whatsapp-box{
        display:block;

        min-height:315px;

        margin-top:10px;

        padding:
            30px 18px;

        border-radius:18px;
    }


    .contact-whatsapp-copy{
        width:68%;
    }


    .contact-whatsapp-kicker{
        font-size:7px;

        letter-spacing:2.7px;
    }


    .contact-whatsapp-copy h2{
        font-size:29px;
    }


    .contact-whatsapp-copy > p{
        margin:
            9px 0
            18px;

        font-size:9px;
        line-height:1.55;
    }


    .contact-whatsapp-button{
        min-width:0;

        width:100%;
        min-height:52px;

        padding:
            0 12px;

        gap:8px;

        border-radius:10px;

        font-size:8px;
    }


    .contact-whatsapp-icon svg{
        width:22px;
        height:22px;
    }


    .contact-whatsapp-arrow{
        font-size:15px;
    }


    /* PHONE MOBILE */

    .contact-whatsapp-visual{
        right:-13px;
        bottom:-100px;
    }


    .contact-whatsapp-phone{
        width:130px;
        height:270px;

        border-width:3px;

        border-radius:27px;

        transform:
            rotate(9deg);
    }


    .contact-whatsapp-phone-top{
        width:48px;
        height:13px;
    }


    .contact-whatsapp-screen{
        border-radius:20px;
    }


    .contact-whatsapp-logo{
        width:50px;
        height:50px;

        border-radius:14px;
    }


    .contact-whatsapp-logo svg{
        width:32px;
        height:32px;
    }


    .contact-whatsapp-screen strong{
        font-size:8px;

        letter-spacing:1px;
    }


    .contact-whatsapp-screen small{
        font-size:5px;

        letter-spacing:1px;
    }

}


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

@media(max-width:380px){

    .contact-payment-head h2{
        font-size:29px;
    }


    .contact-whatsapp-copy{
        width:70%;
    }


    .contact-whatsapp-copy h2{
        font-size:26px;
    }


    .contact-whatsapp-button{
        font-size:7px;
    }


    .contact-whatsapp-phone{
        width:115px;
        height:250px;
    }

}