/* =====================================
        SUTRIKA CONTACT PAGE
===================================== */


/* ==========================================
   CONTACT HERO - PREMIUM EDITORIAL
========================================== */

.contact-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 800px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(rgba(60, 10, 25, .55), rgba(60, 10, 25, .55)),
        url("../ASSETS/CONTACT/contact-banner.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    animation: heroZoom 18s ease-in-out infinite alternate;
}

/* Dark Wine Overlay */

.contact-overlay {

    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(35, 8, 15, .95) 0%,
            rgba(70, 20, 30, .82) 35%,
            rgba(25, 25, 25, .40) 75%,
            rgba(0, 0, 0, .10) 100%);

    z-index: 1;
}

/* Decorative Gold Circle */

.contact-hero::before {

    content: "";

    position: absolute;

    width: 550px;
    height: 550px;

    border: 2px solid rgba(197, 162, 74, .15);

    border-radius: 50%;

    right: -160px;
    top: -130px;

    z-index: 2;
}

.contact-hero::after {

    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    border: 2px solid rgba(197, 162, 74, .10);

    border-radius: 50%;

    right: 120px;
    bottom: -150px;

    z-index: 2;
}

/* Content */

.contact-content {

    position: relative;

    z-index: 10;

    width: 650px;

    margin-left: 8%;
}

/* Small Heading */

.contact-content span {

    display: inline-block;

    color: #C5A24A;

    font-size: 1rem;

    text-transform: uppercase;

    letter-spacing: 6px;

    margin-bottom: 18px;

    font-weight: 600;
}

/* Decorative Line */

.contact-content span::after {

    content: "";

    display: block;

    width: 120px;

    height: 2px;

    background: #C5A24A;

    margin-top: 14px;
}

/* Heading */

.contact-content h1 {

    font-family: 'Cinzel', serif;

    font-size: 4.8rem;

    line-height: 1.15;

    color: #fff;

    margin: 28px 0;
}

/* Paragraph */

.contact-content p {

    color: #f2f2f2;

    font-size: 1.2rem;

    line-height: 2;

    max-width: 560px;
}

/* Bottom Curve */

.contact-hero {

    border-bottom-left-radius: 80px;

    border-bottom-right-radius: 80px;
}

/* Zoom */

@keyframes heroZoom {

    from {

        background-size: 100%;
    }

    to {

        background-size: 112%;
    }
}

/* ==========================
   Tablet
========================== */

@media(max-width:992px) {

    .contact-content {

        width: 85%;

        margin: auto;

        text-align: center;

    }

    .contact-content span::after {

        margin: 14px auto 0;

    }

    .contact-content h1 {

        font-size: 3.2rem;

    }

}

/* ==========================
   Mobile
========================== */

@media(max-width:768px) {

    .contact-hero {

        height: 90vh;

        min-height: 650px;

        background-position: center;
    }

    .contact-content {

        width: 90%;

    }

    .contact-content h1 {

        font-size: 2.3rem;

    }

    .contact-content p {

        font-size: 1rem;

        line-height: 1.8;

    }

}








/* ================================
        CONTACT CARDS
================================ */



.contact-section {


    padding: 100px 0;

    background: #faf5ed;


}




.contact-grid {


    display: grid;


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


    gap: 30px;


}





.contact-card {


    background: white;


    padding: 45px 30px;


    text-align: center;


    border-radius: 30px;


    box-shadow:

        0 20px 45px rgba(0, 0, 0, .1);


    transition: .5s;


}



.contact-card:hover {


    transform: translateY(-12px);


}





.contact-card i {


    font-size: 45px;


    color: #c48b4a;


    margin-bottom: 20px;


}





.contact-card h3 {


    color: #6b3e26;


    font-family: Georgia, serif;


    font-size: 28px;


}





.contact-card p {


    color: #666;


    font-size: 17px;


}








/* ================================
        MESSAGE SECTION
================================ */



.message-section {


    padding: 100px 0;


    background: white;


}




.message-box {


    display: grid;


    grid-template-columns: 1fr 1fr;


    gap: 60px;


    background: #faf5ed;


    padding: 60px;


    border-radius: 40px;


}





.message-text h2 {


    font-family: Georgia, serif;


    color: #6b3e26;


    font-size: 45px;


}




.message-text p {


    color: #666;


    font-size: 18px;


    line-height: 1.8;


}





/* FORM */


.contact-form {


    display: flex;

    flex-direction: column;

    gap: 20px;


}




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


    width: 100%;


    padding: 16px 20px;


    border: none;


    outline: none;


    border-radius: 15px;


    font-size: 16px;


    background: white;


    box-shadow:

        0 8px 20px rgba(0, 0, 0, .08);


}




.contact-form textarea {


    height: 150px;

    resize: none;


}





.contact-form button {


    padding: 16px;


    border: none;


    border-radius: 50px;


    background:

        linear-gradient(135deg,
            #d6a15d,
            #8b5a2b);


    color: white;


    font-size: 17px;


    cursor: pointer;


    transition: .4s;


}





.contact-form button:hover {


    transform: translateY(-5px);


    box-shadow:

        0 15px 30px rgba(196, 139, 74, .4);


}








/* ================================
        RESPONSIVE
================================ */



@media(max-width:900px) {


    .contact-content h1 {

        font-size: 50px;

    }



    .contact-grid {

        grid-template-columns: 1fr;

    }



    .message-box {

        grid-template-columns: 1fr;

        padding: 40px;

    }


}





@media(max-width:600px) {


    .contact-content h1 {

        font-size: 36px;

    }



    .contact-content p {

        font-size: 16px;

    }



    .message-box {

        padding: 25px;

    }


}

/* ==========================================================
   SUTRIKA - BACK TO TOP BUTTON
========================================================== */

.sutrika-back-to-top {

    position: fixed;

    right: 30px;
    bottom: 30px;

    width: 52px;
    height: 52px;

    border: 1px solid #C5A24A;

    border-radius: 50%;

    background: #4A1024;

    color: #C5A24A;

    display: flex;

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

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

    line-height: 1;

    cursor: pointer;

    opacity: 0;
    visibility: hidden;

    transform: translateY(15px);

    transition:
        opacity .35s ease,
        visibility .35s ease,
        transform .35s ease,
        background .3s ease,
        color .3s ease,
        box-shadow .3s ease;

    z-index: 9999;

}


/* Show button */

.sutrika-back-to-top.show {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}


/* Hover */

.sutrika-back-to-top:hover {

    background: #C5A24A;

    color: #4A1024;

    transform: translateY(-5px);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, .22);

}


/* Mobile */

@media (max-width: 768px) {

    .sutrika-back-to-top {

        right: 18px;
        bottom: 18px;

        width: 46px;
        height: 46px;

        font-size: 19px;

    }

}

/* ==========================================================
   SUTRIKA - BACK TO TOP BUTTON
========================================================== */

.sutrika-back-to-top {

    position: fixed;

    right: 30px;
    bottom: 30px;

    width: 52px;
    height: 52px;

    border: 1px solid #C5A24A;

    border-radius: 50%;

    background: #4A1024;

    color: #C5A24A;

    display: flex;

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

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

    line-height: 1;

    cursor: pointer;

    opacity: 0;
    visibility: hidden;

    transform: translateY(15px);

    transition:
        opacity .35s ease,
        visibility .35s ease,
        transform .35s ease,
        background .3s ease,
        color .3s ease,
        box-shadow .3s ease;

    z-index: 9999;

}


/* Show button */

.sutrika-back-to-top.show {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}


/* Hover */

.sutrika-back-to-top:hover {

    background: #C5A24A;

    color: #4A1024;

    transform: translateY(-5px);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, .22);

}


/* Mobile */

@media (max-width: 768px) {

    .sutrika-back-to-top {

        right: 18px;
        bottom: 18px;

        width: 46px;
        height: 46px;

        font-size: 19px;

    }

}

/* =========================================================
   SUTRIKA CONTACT HERO — PREMIUM COLLECTION STYLE
   Background Zoom + Wine Gradient + Text Reveal
========================================================= */


/* ================================
   1. HERO SIZE & BACKGROUND
================================ */

.contact-hero {
    position: relative;
    width: 100%;
    height: 768px;
    min-height: 768px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background-image: url("../ASSETS/CONTACT/contact-banner.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    border-radius: 0 !important;

    animation: contactHeroZoom 18s ease-in-out infinite;
}


/* ================================
   2. PREMIUM WINE GRADIENT
================================ */

.contact-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(100deg,
            rgba(74, 16, 36, 0.72) 0%,
            rgba(74, 16, 36, 0.52) 30%,
            rgba(39, 8, 19, 0.28) 58%,
            rgba(0, 0, 0, 0.08) 100%);

    z-index: 2;

    pointer-events: none;
}


/* ================================
   3. HERO CONTENT
================================ */

.contact-content {
    position: relative;
    z-index: 5;

    width: 650px;
    margin-left: 8%;

    animation: contactContentReveal 1.2s ease-out both;
}


/* ================================
   4. SMALL GOLD TITLE
================================ */

.contact-content span {
    color: #C5A24A;

    font-family: "Playfair Display", serif;

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

    letter-spacing: 6px;
    text-transform: uppercase;

    display: inline-block;

    margin-bottom: 18px;

    animation: contactSmallReveal 0.9s ease-out 0.15s both;
}


/* GOLD LINE */

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

    display: block;

    width: 120px;
    height: 2px;

    background: #C5A24A;

    margin-top: 14px;

    transform-origin: left;

    animation: contactLineReveal 1s ease-out 0.45s both;
}


/* ================================
   5. MAIN HEADING
================================ */

.contact-content h1 {
    font-family: "Playfair Display", serif;

    font-size: 4.8rem;
    line-height: 1.08;

    color: #ffffff;

    margin: 28px 0;

    text-shadow:
        0 3px 18px rgba(0, 0, 0, 0.35);

    animation: contactHeadingReveal 1s ease-out 0.3s both;
}


/* ================================
   6. GOLD ACCENT INSIDE HEADING
================================ */

/* If your heading contains a span,
   this will make it gold */

.contact-content h1 span {
    color: #C5A24A;
}


/* ================================
   7. PARAGRAPH
================================ */

.contact-content p {
    color: rgba(255, 255, 255, 0.92);

    font-size: 1.15rem;
    line-height: 1.8;

    max-width: 560px;

    animation: contactParagraphReveal 1s ease-out 0.55s both;
}


/* ================================
   8. PREMIUM BACKGROUND ZOOM
================================ */

@keyframes contactHeroZoom {

    0% {
        background-size: 100%;
        background-position: center center;
    }

    50% {
        background-size: 106%;
        background-position: center center;
    }

    100% {
        background-size: 100%;
        background-position: center center;
    }

}


/* ================================
   9. WHOLE CONTENT REVEAL
================================ */

@keyframes contactContentReveal {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* ================================
   10. SMALL TITLE REVEAL
================================ */

@keyframes contactSmallReveal {

    from {
        opacity: 0;
        transform: translateY(18px);
        letter-spacing: 10px;
    }

    to {
        opacity: 1;
        transform: translateY(0);
        letter-spacing: 6px;
    }

}


/* ================================
   11. GOLD LINE ANIMATION
================================ */

@keyframes contactLineReveal {

    from {
        opacity: 0;
        transform: scaleX(0);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }

}


/* ================================
   12. MAIN HEADING REVEAL
================================ */

@keyframes contactHeadingReveal {

    from {
        opacity: 0;
        transform: translateY(45px);
        filter: blur(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }

}


/* ================================
   13. PARAGRAPH REVEAL
================================ */

@keyframes contactParagraphReveal {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* ================================
   14. REMOVE OLD CURVE
================================ */

.contact-hero {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}


/* ================================
   15. MOBILE
================================ */

@media (max-width: 768px) {

    .contact-hero {
        height: 768px;
        min-height: 768px;

        background-position: center center;
    }

    .contact-content {
        width: auto;
        margin-left: 30px;
        margin-right: 30px;
    }

    .contact-content h1 {
        font-size: 3rem;
    }

    .contact-content p {
        font-size: 1rem;
    }

}

/* =========================================
   CONTACT — MATCH OUR STORY TYPOGRAPHY
========================================= */

.contact-content h1 {
    font-family: "Playfair Display", serif !important;

    font-size: 68px !important;
    line-height: 1.08 !important;

    font-weight: 500;

    text-transform: uppercase;

    color: #ffffff !important;

    letter-spacing: 0.5px;

    margin: 28px 0 !important;

    text-shadow:
        0 3px 18px rgba(0, 0, 0, 0.35);
}


/* Gold emphasis */
.contact-content h1 .gold-text {
    color: #C5A24A !important;
}


/* Small heading */
.contact-content span {
    font-family: "Playfair Display", serif !important;

    color: #C5A24A !important;

    font-size: 15px !important;
    font-weight: 600;

    letter-spacing: 6px;
    text-transform: uppercase;
}


/* Paragraph */
.contact-content p {
    font-family: "Poppins", sans-serif;

    color: rgba(255, 255, 255, 0.92) !important;

    font-size: 18px !important;
    line-height: 1.8;

    max-width: 560px;
}

/* =========================================
   FIX GOLD TEXT INSIDE CONTACT HEADING
========================================= */

.contact-content h1 .gold-text {
    display: inline !important;

    font-family: "Playfair Display", serif !important;

    font-size: inherit !important;
    line-height: inherit !important;

    font-weight: 500 !important;

    letter-spacing: inherit !important;

    color: #C5A24A !important;

    text-transform: uppercase;

    margin: 0 !important;

    padding: 0 !important;
}


/* Keep GET IN TOUCH styling separate */
.contact-content>span {
    display: inline-block;

    color: #C5A24A !important;

    font-family: "Playfair Display", serif !important;

    font-size: 15px !important;

    letter-spacing: 6px;

    text-transform: uppercase;
}



/* ==========================================================
   SUTRIKA CONTACT HERO
   MATCH HOME PAGE HERO DESIGN
   FINAL VERSION
   ========================================================== */


/* ==========================================================
   1. HERO
   ========================================================== */

.contact-hero {

    position: relative !important;

    width: 100% !important;

    height: calc(100vh - 85px) !important;

    min-height: 600px !important;

    margin: 0 !important;

    padding: 0 !important;

    display: block !important;

    overflow: hidden !important;

    background: #F4E4C8 !important;

    border-radius: 0 !important;

}


/* ==========================================================
   2. HOME-STYLE BACKGROUND IMAGE
   ========================================================== */

.contact-hero {

    background-image:
        url("../ASSETS/IMAGES/hero/hero1.png") !important;

    background-size: cover !important;

    background-position: center center !important;

    background-repeat: no-repeat !important;

    animation: contactHomeHeroZoom 8s ease-in-out infinite !important;

}


/* ==========================================================
   3. REMOVE OLD DECORATIVE CIRCLES
   ========================================================== */

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

    display: none !important;

}


/* ==========================================================
   4. HOME-STYLE WINE OVERLAY
   ========================================================== */

.contact-overlay {

    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;

    height: 100% !important;

    z-index: 1 !important;

    pointer-events: none !important;

    background:
        linear-gradient(90deg,
            rgba(246, 232, 207, 0.96) 0%,
            rgba(246, 232, 207, 0.90) 22%,
            rgba(246, 232, 207, 0.70) 38%,
            rgba(246, 232, 207, 0.28) 56%,
            rgba(246, 232, 207, 0.04) 75%,
            rgba(246, 232, 207, 0) 100%) !important;

}


/* ==========================================================
   5. CONTACT CONTENT
   ========================================================== */

.contact-content {

    position: absolute !important;

    z-index: 5 !important;

    left: 8% !important;

    top: 50% !important;

    transform: translateY(-50%) !important;

    width: 560px !important;

    max-width: 42% !important;

    margin: 0 !important;

    padding: 0 !important;

    background: transparent !important;

    border: none !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    backdrop-filter: none !important;

    color: #5A162B !important;

}


/* ==========================================================
   6. SMALL GOLD LABEL
   ========================================================== */

.contact-content>span {

    display: inline-block !important;

    color: #C5A24A !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 14px !important;

    font-weight: 600 !important;

    letter-spacing: 3px !important;

    text-transform: uppercase !important;

    margin-bottom: 18px !important;

}


/* GOLD LINE */

.contact-content>span::after {

    content: "" !important;

    display: block !important;

    width: 90px !important;

    height: 2px !important;

    background: #C5A24A !important;

    margin-top: 12px !important;

}


/* ==========================================================
   7. MAIN HEADING
   ========================================================== */

.contact-content h1 {

    font-family: "Cinzel", serif !important;

    font-size: 58px !important;

    line-height: 1.08 !important;

    font-weight: 600 !important;

    color: #5A162B !important;

    letter-spacing: 0 !important;

    text-transform: none !important;

    margin: 0 0 25px 0 !important;

    text-shadow: none !important;

}


/* Gold text inside heading */

.contact-content h1 .gold-text {

    color: #C5A24A !important;

}


/* ==========================================================
   8. PARAGRAPH
   ========================================================== */

.contact-content p {

    color: #4A3830 !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 17px !important;

    font-weight: 400 !important;

    line-height: 1.75 !important;

    max-width: 560px !important;

    margin: 0 0 30px 0 !important;

}


/* ==========================================================
   9. BUTTON AREA
   ========================================================== */

.contact-content .hero-buttons {

    display: flex !important;

    align-items: center !important;

    gap: 20px !important;

    flex-wrap: wrap !important;

}


/* PRIMARY */

.contact-content .btn-primary {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    background: #6B1E35 !important;

    color: #FFFFFF !important;

    border: 1px solid #6B1E35 !important;

    padding: 14px 30px !important;

    border-radius: 4px !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 14px !important;

    font-weight: 600 !important;

    text-decoration: none !important;

    letter-spacing: .3px !important;

    transition:
        transform .35s ease,
        background .35s ease,
        box-shadow .35s ease !important;

}


/* PRIMARY HOVER */

.contact-content .btn-primary:hover {

    background: #C5A24A !important;

    border-color: #C5A24A !important;

    color: #4A1024 !important;

    transform: translateY(-4px) !important;

    box-shadow:
        0 12px 25px rgba(197, 162, 74, .25) !important;

}


/* SECONDARY */

.contact-content .btn-secondary {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    background: rgba(255, 255, 255, .35) !important;

    color: #4A1024 !important;

    border: 1px solid #6B1E35 !important;

    padding: 14px 30px !important;

    border-radius: 4px !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 14px !important;

    font-weight: 600 !important;

    text-decoration: none !important;

    backdrop-filter: blur(4px) !important;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease !important;

}


.contact-content .btn-secondary:hover {

    background: #6B1E35 !important;

    color: #FFFFFF !important;

    transform: translateY(-4px) !important;

}


/* ==========================================================
   10. BACKGROUND ZOOM
   ========================================================== */

@keyframes contactHomeHeroZoom {

    0% {

        background-size: 100%;

    }

    50% {

        background-size: 104%;

    }

    100% {

        background-size: 100%;

    }

}


/* ==========================================================
   11. TABLET
   ========================================================== */

@media (max-width: 992px) {

    .contact-hero {

        height: calc(100vh - 85px) !important;

        min-height: 600px !important;

    }


    .contact-content {

        left: 6% !important;

        width: 520px !important;

        max-width: 52% !important;

    }


    .contact-content h1 {

        font-size: 48px !important;

    }


    .contact-content p {

        font-size: 15px !important;

    }

}


/* ==========================================================
   12. MOBILE
   ========================================================== */

@media (max-width: 768px) {

    .contact-hero {

        height: 650px !important;

        min-height: 650px !important;

        margin-top: 0 !important;

        background-position: 65% center !important;

    }


    .contact-content {

        left: 7% !important;

        top: 52% !important;

        width: 86% !important;

        max-width: none !important;

    }


    .contact-content>span {

        font-size: 11px !important;

        letter-spacing: 2px !important;

    }


    .contact-content h1 {

        font-size: 38px !important;

        line-height: 1.12 !important;

        margin-bottom: 18px !important;

    }


    .contact-content p {

        font-size: 14px !important;

        line-height: 1.7 !important;

        max-width: 450px !important;

        margin-bottom: 25px !important;

    }


    .contact-content .hero-buttons {

        gap: 10px !important;

    }


    .contact-content .btn-primary,
    .contact-content .btn-secondary {

        padding: 12px 22px !important;

        font-size: 13px !important;

    }

}


/* ==========================================================
   13. SMALL MOBILE
   ========================================================== */

@media (max-width: 480px) {

    .contact-hero {

        height: 650px !important;

        min-height: 650px !important;

        background-position: 68% center !important;

    }


    .contact-content {

        left: 6% !important;

        width: 88% !important;

        top: 50% !important;

    }


    .contact-content h1 {

        font-size: 31px !important;

    }


    .contact-content p {

        font-size: 13px !important;

        margin-bottom: 25px !important;

    }


    .contact-content .hero-buttons {

        flex-direction: column !important;

        align-items: flex-start !important;

    }


    .contact-content .btn-primary,
    .contact-content .btn-secondary {

        min-width: 170px !important;

        text-align: center !important;

    }

}









/* ==========================================================
   SUTRIKA CONTACT PAGE
   COMPLETE MOBILE PHONE STYLING
   ========================================================== */

@media (max-width: 768px) {

    /* ======================================================
       GLOBAL MOBILE FIX
       ====================================================== */

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    body {
        margin: 0;
        padding: 0;
    }


    /* ======================================================
       CONTACT HERO
       LANDSCAPE MOBILE BANNER
       ====================================================== */

    .contact-hero {

        position: relative !important;

        width: 100% !important;

        /*
           Landscape hero.
           Do NOT use 90vh / 650px / 768px here.
        */
        height: 310px !important;
        min-height: 310px !important;
        max-height: 310px !important;

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

        display: flex !important;
        align-items: center !important;

        overflow: hidden !important;

        border-radius: 0 !important;

        /*
           This is the image already used by
           your final contact hero CSS.
        */
        background-image:
            url("../ASSETS/IMAGES/hero/hero1.png") !important;

        background-size: cover !important;

        /*
           Slightly right so the textile/background
           remains visible behind the content.
        */
        background-position: 68% center !important;

        background-repeat: no-repeat !important;

        animation: contactMobileHeroZoom 12s ease-in-out infinite !important;
    }


    /* ======================================================
       HERO DARK / WINE OVERLAY
       ====================================================== */

    .contact-overlay {

        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        z-index: 1 !important;

        pointer-events: none !important;

        background:
            linear-gradient(90deg,

                rgba(55, 8, 25, 0.92) 0%,

                rgba(74, 16, 36, 0.78) 35%,

                rgba(74, 16, 36, 0.48) 62%,

                rgba(0, 0, 0, 0.15) 100%) !important;
    }


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

    .contact-content {

        position: absolute !important;

        z-index: 5 !important;

        /*
           Vertically center the content
           inside the 310px hero.
        */
        top: 50% !important;

        left: 6% !important;

        transform: translateY(-50%) !important;

        width: 88% !important;

        max-width: 88% !important;

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

        background: transparent !important;

        border: none !important;

        box-shadow: none !important;

        backdrop-filter: none !important;

        color: #ffffff !important;
    }


    /* ======================================================
       SMALL HERO LABEL
       "GET IN TOUCH"
       ====================================================== */

    .contact-content>span {

        display: inline-block !important;

        margin: 0 0 8px 0 !important;

        padding: 0 !important;

        color: #C5A24A !important;

        font-family: "Poppins", sans-serif !important;

        font-size: 9px !important;

        font-weight: 600 !important;

        letter-spacing: 2.5px !important;

        line-height: 1 !important;

        text-transform: uppercase !important;
    }


    /* GOLD LINE UNDER LABEL */

    .contact-content>span::after {

        content: "" !important;

        display: block !important;

        width: 55px !important;

        height: 1.5px !important;

        margin-top: 7px !important;

        background: #C5A24A !important;

        transform: none !important;
    }


    /* ======================================================
       HERO MAIN HEADING
       ====================================================== */

    .contact-content h1 {

        margin: 10px 0 10px 0 !important;

        padding: 0 !important;

        width: 100% !important;

        max-width: 340px !important;

        color: #ffffff !important;

        font-family: "Cinzel", serif !important;

        font-size: 30px !important;

        font-weight: 600 !important;

        line-height: 1.02 !important;

        letter-spacing: 0 !important;

        text-transform: none !important;

        text-shadow:
            0 3px 12px rgba(0, 0, 0, 0.40) !important;
    }


    /* GOLD PART OF HEADING */

    .contact-content h1 .gold-text {

        display: inline !important;

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

        color: #C5A24A !important;

        font-family: "Cinzel", serif !important;

        font-size: inherit !important;

        font-weight: inherit !important;

        line-height: inherit !important;

        letter-spacing: inherit !important;
    }


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

    .contact-content p {

        width: 100% !important;

        max-width: 320px !important;

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

        color: rgba(255, 255, 255, 0.92) !important;

        font-family: "Poppins", sans-serif !important;

        font-size: 10px !important;

        font-weight: 400 !important;

        line-height: 1.45 !important;

        letter-spacing: 0 !important;
    }


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

    @keyframes contactMobileHeroZoom {

        0% {
            background-size: 100%;
            background-position: 68% center;
        }

        50% {
            background-size: 104%;
            background-position: 68% center;
        }

        100% {
            background-size: 100%;
            background-position: 68% center;
        }
    }


    /* ======================================================
       CONTACT INFORMATION SECTION
       ====================================================== */

    .contact-section {

        width: 100% !important;

        padding: 55px 18px !important;

        box-sizing: border-box !important;

        background: #faf5ed !important;
    }


    /* CONTACT GRID */

    .contact-grid {

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 18px !important;

        width: 100% !important;

        margin: 0 !important;
    }


    /* ======================================================
       CONTACT CARDS
       ====================================================== */

    .contact-card {

        width: 100% !important;

        box-sizing: border-box !important;

        padding: 28px 20px !important;

        background: #ffffff !important;

        border-radius: 20px !important;

        text-align: center !important;

        box-shadow:
            0 10px 28px rgba(0, 0, 0, 0.08) !important;

        transition:
            transform 0.3s ease,
            box-shadow 0.3s ease !important;
    }


    .contact-card:hover {

        transform: translateY(-4px) !important;

        box-shadow:
            0 15px 32px rgba(0, 0, 0, 0.12) !important;
    }


    /* CARD ICON */

    .contact-card i {

        display: block !important;

        margin-bottom: 12px !important;

        font-size: 30px !important;

        color: #C5A24A !important;
    }


    /* CARD TITLE */

    .contact-card h3 {

        margin: 0 0 8px 0 !important;

        color: #6B1E35 !important;

        font-family: "Playfair Display", serif !important;

        font-size: 22px !important;

        line-height: 1.2 !important;
    }


    /* CARD TEXT */

    .contact-card p {

        margin: 0 !important;

        color: #666666 !important;

        font-family: "Poppins", sans-serif !important;

        font-size: 13px !important;

        line-height: 1.5 !important;
    }


    /* ======================================================
       MESSAGE SECTION
       ====================================================== */

    .message-section {

        width: 100% !important;

        padding: 55px 18px !important;

        box-sizing: border-box !important;

        background: #ffffff !important;
    }


    /* MESSAGE BOX */

    .message-box {

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 30px !important;

        width: 100% !important;

        box-sizing: border-box !important;

        padding: 28px 20px !important;

        background: #faf5ed !important;

        border-radius: 24px !important;
    }


    /* MESSAGE TITLE */

    .message-text h2 {

        margin: 0 0 12px 0 !important;

        color: #6B1E35 !important;

        font-family: "Playfair Display", serif !important;

        font-size: 30px !important;

        line-height: 1.15 !important;
    }


    /* MESSAGE DESCRIPTION */

    .message-text p {

        margin: 0 !important;

        color: #666666 !important;

        font-family: "Poppins", sans-serif !important;

        font-size: 13px !important;

        line-height: 1.7 !important;
    }


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

    .contact-form {

        display: flex !important;

        flex-direction: column !important;

        gap: 13px !important;

        width: 100% !important;
    }


    /* FORM INPUTS */

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

        width: 100% !important;

        box-sizing: border-box !important;

        padding: 13px 15px !important;

        border: 1px solid rgba(107, 30, 53, 0.12) !important;

        border-radius: 12px !important;

        outline: none !important;

        background: #ffffff !important;

        color: #4A1024 !important;

        font-family: "Poppins", sans-serif !important;

        font-size: 13px !important;

        box-shadow:
            0 5px 15px rgba(0, 0, 0, 0.05) !important;
    }


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

        border-color: #C5A24A !important;

        box-shadow:
            0 0 0 2px rgba(197, 162, 74, 0.12) !important;
    }


    /* TEXTAREA */

    .contact-form textarea {

        height: 120px !important;

        resize: none !important;
    }


    /* SEND BUTTON */

    .contact-form button {

        width: 100% !important;

        padding: 13px 18px !important;

        border: none !important;

        border-radius: 30px !important;

        background:
            linear-gradient(135deg,
                #6B1E35,
                #4A1024) !important;

        color: #ffffff !important;

        font-family: "Poppins", sans-serif !important;

        font-size: 13px !important;

        font-weight: 600 !important;

        letter-spacing: 0.3px !important;

        cursor: pointer !important;

        transition:
            transform 0.3s ease,
            background 0.3s ease !important;
    }


    .contact-form button:hover {

        background:
            linear-gradient(135deg,
                #C5A24A,
                #9F7E35) !important;

        color: #4A1024 !important;

        transform: translateY(-2px) !important;
    }


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

    .footer {

        width: 100% !important;

        box-sizing: border-box !important;
    }


    .footer-grid {

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 30px !important;
    }


    .footer-column {

        width: 100% !important;

        text-align: center !important;
    }


    .footer-column h3 {

        font-size: 18px !important;

        margin-bottom: 12px !important;
    }


    .footer-column p {

        font-size: 12px !important;

        line-height: 1.7 !important;
    }


    .footer-column ul {

        padding: 0 !important;

        margin: 0 !important;

        list-style: none !important;
    }


    .footer-column li {

        margin-bottom: 7px !important;
    }


    .footer-column a {

        font-size: 12px !important;
    }


    /* SOCIAL ICONS */

    .social-icons {

        display: flex !important;

        justify-content: center !important;

        align-items: center !important;

        gap: 10px !important;

        margin-top: 15px !important;
    }


    .social-icons a {

        width: 34px !important;

        height: 34px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        border-radius: 50% !important;
    }


    /* FOOTER BOTTOM */

    .footer-bottom {

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 5px !important;

        text-align: center !important;
    }


    .footer-bottom p {

        font-size: 10px !important;

        line-height: 1.5 !important;
    }


    /* ======================================================
       BACK TO TOP
       ====================================================== */

    .sutrika-back-to-top {

        right: 15px !important;

        bottom: 15px !important;

        width: 42px !important;

        height: 42px !important;

        font-size: 17px !important;

        z-index: 9999 !important;
    }
}


/* ==========================================================
   SMALL PHONES — 480px
   ========================================================== */

@media (max-width: 480px) {

    .contact-hero {

        height: 295px !important;

        min-height: 295px !important;

        max-height: 295px !important;

        background-position: 70% center !important;
    }


    .contact-content {

        left: 6% !important;

        width: 88% !important;

        max-width: 88% !important;
    }


    .contact-content>span {

        font-size: 8px !important;

        letter-spacing: 2px !important;

        margin-bottom: 7px !important;
    }


    .contact-content>span::after {

        width: 48px !important;

        margin-top: 6px !important;
    }


    .contact-content h1 {

        max-width: 300px !important;

        font-size: 27px !important;

        line-height: 1.02 !important;

        margin-top: 8px !important;

        margin-bottom: 9px !important;
    }


    .contact-content p {

        max-width: 275px !important;

        font-size: 9px !important;

        line-height: 1.4 !important;
    }


    .contact-section {

        padding: 45px 15px !important;
    }


    .message-section {

        padding: 45px 15px !important;
    }


    .message-box {

        padding: 25px 17px !important;

        border-radius: 20px !important;
    }


    .message-text h2 {

        font-size: 27px !important;
    }
}


/* ==========================================================
   VERY SMALL PHONES — 390px
   ========================================================== */

@media (max-width: 390px) {

    .contact-hero {

        height: 285px !important;

        min-height: 285px !important;

        max-height: 285px !important;

        background-position: 72% center !important;
    }


    .contact-content {

        left: 6% !important;

        width: 88% !important;
    }


    .contact-content>span {

        font-size: 7.5px !important;

        letter-spacing: 1.8px !important;
    }


    .contact-content h1 {

        max-width: 270px !important;

        font-size: 24px !important;

        line-height: 1.02 !important;
    }


    .contact-content p {

        max-width: 255px !important;

        font-size: 8.5px !important;

        line-height: 1.4 !important;
    }


    .contact-card {

        padding: 25px 15px !important;
    }


    .contact-card i {

        font-size: 27px !important;
    }


    .contact-card h3 {

        font-size: 20px !important;
    }


    .contact-card p {

        font-size: 12px !important;
    }


    .message-text h2 {

        font-size: 25px !important;
    }
}


/* ==========================================================
   EXTRA SMALL PHONES — 350px
   ========================================================== */

@media (max-width: 350px) {

    .contact-hero {

        height: 275px !important;

        min-height: 275px !important;

        max-height: 275px !important;

        background-position: 74% center !important;
    }


    .contact-content {

        left: 5% !important;

        width: 90% !important;
    }


    .contact-content>span {

        font-size: 7px !important;

        letter-spacing: 1.5px !important;
    }


    .contact-content h1 {

        max-width: 245px !important;

        font-size: 21px !important;

        line-height: 1.02 !important;
    }


    .contact-content p {

        max-width: 230px !important;

        font-size: 8px !important;

        line-height: 1.35 !important;
    }


    .contact-section {

        padding: 38px 12px !important;
    }


    .message-section {

        padding: 38px 12px !important;
    }


    .message-box {

        padding: 22px 14px !important;
    }


    .message-text h2 {

        font-size: 23px !important;
    }


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

        font-size: 12px !important;

        padding: 12px !important;
    }


    .contact-form textarea {

        height: 105px !important;
    }
}