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

.about-page {
    min-height: 100vh;
}


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

.about-hero {
    min-height: 650px;

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

    text-align: center;

    padding: 80px 30px;

    background:
    linear-gradient(
        180deg,
        rgba(5, 6, 7, 0.42) 0%,
        rgba(5, 6, 7, 0.48) 45%,
        rgba(5, 6, 7, 0.88) 100%
    ),
   url("../images/hero/about-hero.webp.webp");

background-size: cover;
background-position: center 48%;
background-repeat: no-repeat;
}


.about-hero-content {
    max-width: 900px;
}


.about-label {
    display: inline-block;

    margin-bottom: 20px;

    color: #d4a63a;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: 4px;
}


.about-hero h1 {
    margin: 0;

    color: #f3d47a;

    font-family: Georgia, serif;

    font-size: clamp(42px, 6vw, 78px);

    line-height: 1.05;
}


.about-hero h1 span {
    display: block;

    color: #ffffff;
}


.about-hero p {
    max-width: 700px;

    margin: 30px auto 0;

    color: #e8dfd2;

    font-family: Georgia, serif;

    font-size: 20px;

    line-height: 1.7;
}
/* =========================================
   OUR STORY
========================================= */

/* =========================================
   OUR STORY — PREMIUM LAYOUT
========================================= */

.about-story {
    width: min(calc(100% - 64px), 1180px);

    margin: 0 auto;
    padding: 110px 0;

    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);

    align-items: center;

    gap: 78px;

    position: relative;
     isolation: isolate;
}

/* =========================================
   OUR STORY — PREMIUM BACKGROUND
========================================= */

.about-story::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: 50%;

    width: 100vw;

    transform: translateX(-50%);

    z-index: -1;

    background:

        /* Soft gold glow behind image */
        radial-gradient(
            circle at 24% 48%,
            rgba(201, 162, 39, 0.10) 0%,
            rgba(201, 162, 39, 0.035) 25%,
            transparent 48%
        ),

        /* Very subtle warm glow behind text */
        radial-gradient(
            circle at 76% 42%,
            rgba(120, 76, 28, 0.10) 0%,
            transparent 42%
        ),

        /* Cinematic vignette */
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.32) 0%,
            transparent 22%,
            transparent 78%,
            rgba(0, 0, 0, 0.30) 100%
        ),

        /* Main background */
        linear-gradient(
            180deg,
            #090b0d 0%,
            #0c0d0e 45%,
            #090a0b 100%
        );

    border-top:
        1px solid rgba(201, 162, 39, 0.11);

    border-bottom:
        1px solid rgba(201, 162, 39, 0.11);

    box-shadow:
        inset 0 35px 70px rgba(0, 0, 0, 0.20),
        inset 0 -35px 70px rgba(0, 0, 0, 0.25);

    pointer-events: none;
}

.about-story-content {
    position: relative;
}


/* Soft gold accent near content */

.about-story-content::before {
    content: "";

    position: absolute;

    left: -28px;
    top: 7px;

    width: 1px;
    height: 72px;

    background:
        linear-gradient(
            180deg,
            rgba(212, 175, 55, 0),
            rgba(212, 175, 55, 0.55),
            rgba(212, 175, 55, 0)
        );

    opacity: 0.75;
}
/* ==============================
   STORY IMAGE
============================== */

.about-story-image {
    position: relative;

    width: 100%;
    aspect-ratio: 4 / 3;

    overflow: hidden;

    background: #0c0907;

    border:
        1px solid rgba(201, 162, 39, 0.42);

    box-shadow:
        0 25px 65px rgba(0, 0, 0, 0.52),
        0 0 0 1px rgba(255, 255, 255, 0.015);

    isolation: isolate;
}


.about-story-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transform: scale(1);

    filter:
        brightness(1.04)
        contrast(1.04)
        saturate(1.04);

    transition:
        transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.8s ease;

    will-change: transform;
}


/* Inner premium frame */

.about-story-image::before {
    content: "";

    position: absolute;
    inset: 12px;

    z-index: 2;

    border:
        1px solid rgba(225, 184, 73, 0.16);

    pointer-events: none;
}


/* Very subtle cinematic overlay */

.about-story-image::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(5, 5, 5, 0.02) 40%,
            rgba(5, 5, 5, 0.22) 100%
        );

    pointer-events: none;

    transition:
        opacity 0.7s ease;
}


/* Smooth image hover */

.about-story-image:hover img {
    transform: scale(1.045);

    filter:
        brightness(1.10)
        contrast(1.04)
        saturate(1.08);
}


/* ==============================
   STORY CONTENT
============================== */

.about-story-content {
    width: 100%;
    max-width: 540px;

    padding: 10px 0;
}


.about-story .about-label {
    display: inline-block;

    margin-bottom: 18px;

    color: #d6a92c;

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

    line-height: 1;

    letter-spacing: 4.5px;
}


/* Main heading */

.about-story-content h2 {
    margin: 0 0 26px;

    color: #e6b83c;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(38px, 4vw, 50px);
    font-weight: 700;

    line-height: 1.08;

    letter-spacing: 0.5px;

    text-wrap: balance;
}


.about-story-content h2 span {
    display: block;

    margin-top: 3px;

    color: #f5f1e9;
}


/* Premium gold line */

.about-story-content h2::after {
    content: "";

    display: block;

    width: 72px;
    height: 1px;

    margin-top: 24px;

    background:
        linear-gradient(
            90deg,
            #d4a72c,
            rgba(212, 167, 44, 0.08)
        );
}


/* Paragraphs */

.about-story-content p {
    max-width: 525px;

    margin: 0 0 18px;

    color: #cfc7bb;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 16px;

    line-height: 1.85;
}


.about-story-content p:first-of-type {
    color: #e4dbce;
}


.about-story-content p:last-child {
    margin-bottom: 0;
}

/* =========================================
   OUR STORY — RESPONSIVE
========================================= */

@media (max-width: 900px) {

    .about-story {
        width: min(calc(100% - 40px), 760px);

        padding: 80px 0;

        grid-template-columns: 1fr;

        gap: 48px;
    }


    .about-story-image {
        aspect-ratio: 16 / 10;
    }


    .about-story-content {
        max-width: 680px;
    }


    .about-story-content p {
        max-width: 100%;
    }

}


@media (max-width: 600px) {

    .about-story {
        width: calc(100% - 28px);

        padding: 60px 0;

        gap: 34px;
    }


    .about-story-image {
        aspect-ratio: 4 / 3;
    }


    .about-story-image::before {
        inset: 8px;
    }


    .about-story .about-label {
        margin-bottom: 14px;

        font-size: 10px;
        letter-spacing: 3.5px;
    }


    .about-story-content h2 {
        margin-bottom: 22px;

        font-size: clamp(32px, 10vw, 40px);

        line-height: 1.1;
    }


    .about-story-content h2::after {
        width: 55px;

        margin-top: 19px;
    }


    .about-story-content p {
        margin-bottom: 16px;

        font-size: 15px;

        line-height: 1.8;
    }
    .about-story-content::before {
    display: none;
}

}
/* =========================================
   WHAT WE OFFER
========================================= */

.about-offer {
    padding: 90px 40px;

    border-top: 1px solid #3f3015;
    border-bottom: 1px solid #3f3015;

    background: #100c09;
}


.section-heading {
    text-align: center;

    margin-bottom: 50px;
}


.section-heading h2 {
    margin: 10px 0 0;

    color: #ffffff;

    font-family: Georgia, serif;

    font-size: 38px;

    letter-spacing: 2px;
}


.offer-grid {
    max-width: 1200px;

    margin: 0 auto;

    display: grid;

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

    gap: 18px;
}


.offer-card {
    min-height: 280px;

    padding: 35px 25px;

    text-align: center;

    border: 1px solid #5c461b;

    background: #15100c;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


.offer-card:hover {
    transform: translateY(-8px);

    border-color: #c99b32;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45);
}


.offer-icon {
    margin-bottom: 25px;

    font-size: 45px;
}


.offer-card h3 {
    margin-bottom: 18px;

    color: #e0b84f;

    font-family: Georgia, serif;

    font-size: 18px;

    line-height: 1.4;
}


.offer-card p {
    color: #cfc5b8;

    font-family: Georgia, serif;

    font-size: 15px;

    line-height: 1.7;
}
/* =========================================
   VALYRIAN & LANGUAGE
========================================= */

.valyrian-section {
    min-height: 500px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    position: relative;

    overflow: hidden;

    background: #0d0907;
}


.valyrian-content {
    max-width: 600px;

    padding: 90px 50px 90px 8vw;

    position: relative;

    z-index: 2;
}


.valyrian-content h2 {
    margin: 12px 0 25px;

    color: #f3d47a;

    font-family: Georgia, serif;

    font-size: 40px;

    line-height: 1.15;
}


.valyrian-content h2 span {
    display: block;

    color: #ffffff;
}


.valyrian-content p {
    margin-bottom: 18px;

    color: #d8d0c5;

    font-family: Georgia, serif;

    font-size: 16px;

    line-height: 1.8;
}


.about-button {
    display: inline-block;

    margin-top: 15px;

    padding: 14px 22px;

    border: 1px solid #a87920;

    color: #e4bb55;

    text-decoration: none;

    font-family: Georgia, serif;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1px;

    transition: all 0.3s ease;
}


.about-button:hover {
    background: #a87920;

    color: #120d08;
}


.valyrian-image {
    height: 100%;

    min-height: 500px;

    position: relative;
}


.valyrian-image::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            #0d0907 0%,
            transparent 35%
        );

    z-index: 1;
}


.valyrian-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    opacity: 0.75;
}
/* =========================================
   MISSION & BENEFITS
========================================= */

.mission-section {
    max-width: 1200px;

    margin: 0 auto;

    padding: 90px 40px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    position: relative;

    overflow: hidden;

    isolation: isolate;

    background-image:
        linear-gradient(
            rgba(8, 6, 5, 0.78),
            rgba(8, 6, 5, 0.78)
        ),
        url("/assets/images/blog/black.jpg.jpg");

    background-size: cover;

    background-position: center;

    transition: background-image 0.5s ease;
}

.mission-box,
.benefits-box {
    padding: 20px 10px;
}


.mission-box h2 {
    margin: 12px 0 25px;

    color: #f3d47a;

    font-family: Georgia, serif;

    font-size: 38px;

    line-height: 1.15;
}


.mission-box h2 span {
    display: block;

    color: #ffffff;
}


.mission-box p {
    margin-bottom: 18px;

    color: #d8d0c5;

    font-family: Georgia, serif;

    font-size: 16px;

    line-height: 1.8;
}


.benefits-list {
    list-style: none;

    padding: 15px 0 0;

    margin: 0;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 22px 35px;
}


.benefits-list li {
    display: flex;

    align-items: center;

    gap: 12px;

    color: #d8d0c5;

    font-family: Georgia, serif;

    font-size: 15px;
}


.benefits-list li span {
    color: #d4a63a;

    font-size: 20px;

    font-weight: bold;
}
/* =========================================
   EXPLORE THE SITE
========================================= */

/* =========================================
   EXPLORE THE SITE — PREMIUM
========================================= */

.explore-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding: 110px 40px 120px;

    text-align: center;

    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(201, 162, 39, 0.08) 0%,
            rgba(201, 162, 39, 0.025) 28%,
            transparent 52%
        ),
        radial-gradient(
            circle at 15% 70%,
            rgba(110, 63, 24, 0.07) 0%,
            transparent 38%
        ),
        radial-gradient(
            circle at 85% 75%,
            rgba(110, 63, 24, 0.06) 0%,
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #0d0a08 0%,
            #120d09 48%,
            #0b0907 100%
        );

    border-top:
        1px solid rgba(201, 162, 39, 0.22);

    border-bottom:
        1px solid rgba(201, 162, 39, 0.16);

    box-shadow:
        inset 0 35px 70px rgba(0, 0, 0, 0.18),
        inset 0 -35px 70px rgba(0, 0, 0, 0.25);
}


/* Soft decorative glow */

.explore-section::before {
    content: "";

    position: absolute;

    top: 78px;
    left: 50%;

    width: 430px;
    height: 220px;

    transform: translateX(-50%);

    z-index: -1;

    background:
        radial-gradient(
            ellipse,
            rgba(202, 159, 49, 0.08),
            transparent 68%
        );

    filter: blur(16px);

    pointer-events: none;
}


/* =========================================
   HEADING
========================================= */

.explore-section .section-heading {
    position: relative;

    max-width: 760px;

    margin: 0 auto 55px;
}


.explore-section .about-label {
    display: inline-block;

    margin-bottom: 18px;

    color: #d5a92d;

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

    line-height: 1;

    letter-spacing: 5px;
}


.explore-section .section-heading h2 {
    margin: 0;

    color: #f5f0e8;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(38px, 4vw, 50px);
    font-weight: 700;

    line-height: 1.08;

    letter-spacing: 1.5px;

    text-shadow:
        0 4px 20px rgba(0, 0, 0, 0.55);
}


/* Small premium gold divider */

.explore-section .section-heading h2::after {
    content: "";

    display: block;

    width: 62px;
    height: 1px;

    margin: 23px auto 20px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d2a62e,
            transparent
        );
}


.explore-section .section-heading p {
    max-width: 580px;

    margin: 0 auto;

    color: #bdb4a9;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 15px;

    line-height: 1.75;
}


/* =========================================
   BUTTON GRID
========================================= */

.explore-buttons {
    width: min(100%, 1050px);

    margin: 0 auto;

    display: grid;

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

    gap: 22px;
}


/* =========================================
   PREMIUM BUTTON
========================================= */

.explore-button {
    position: relative;

    min-width: 0;
    min-height: 76px;

    display: flex;

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

    padding: 18px 24px;

    overflow: hidden;

    border:
        1px solid rgba(201, 162, 39, 0.42);

    background:
        linear-gradient(
            145deg,
            rgba(30, 22, 15, 0.82) 0%,
            rgba(16, 12, 9, 0.92) 100%
        );

    color: #dfb844;

    text-decoration: none;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 14px;
    font-weight: 700;

    line-height: 1.3;

    letter-spacing: 0.8px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025),
        0 12px 30px rgba(0, 0, 0, 0.22);

    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.35s ease,
        border-color 0.45s ease,
        background 0.45s ease,
        box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1);

    will-change: transform;
}


/* Top gold detail */

.explore-button::after {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 0;
    height: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            #e0b742,
            transparent
        );

    transition:
        width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}


/* Very subtle light sweep */

.explore-button::before {
    content: "";

    position: absolute;

    top: -40%;
    left: -65%;

    width: 45%;
    height: 180%;

    transform: rotate(18deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 224, 145, 0.07),
            transparent
        );

    transition:
        left 0.8s cubic-bezier(0.22, 1, 0.36, 1);

    pointer-events: none;
}


/* =========================================
   BUTTON HOVER
========================================= */

.explore-button:hover {
    transform: translateY(-6px);

    color: #f3ce68;

    border-color:
        rgba(218, 177, 62, 0.72);

    background:
        linear-gradient(
            145deg,
            rgba(39, 29, 18, 0.94) 0%,
            rgba(18, 13, 9, 0.98) 100%
        );

    box-shadow:
        0 22px 45px rgba(0, 0, 0, 0.40),
        0 0 26px rgba(201, 162, 39, 0.07),
        inset 0 1px 0 rgba(255, 230, 170, 0.04);
}


.explore-button:hover::after {
    width: 72%;
}


.explore-button:hover::before {
    left: 125%;
}


/* Keyboard accessibility */

.explore-button:focus-visible {
    outline: 2px solid #d5aa32;
    outline-offset: 4px;
}


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

@media (max-width: 900px) {

    .explore-section {
        padding: 85px 30px 95px;
    }

    .explore-buttons {
        grid-template-columns: 1fr;

        max-width: 600px;

        gap: 16px;
    }

    .explore-button {
        min-height: 70px;
    }

}


@media (max-width: 600px) {

    .explore-section {
        padding: 70px 18px 75px;
    }

    .explore-section .section-heading {
        margin-bottom: 38px;
    }

    .explore-section .about-label {
        margin-bottom: 14px;

        font-size: 10px;

        letter-spacing: 3.5px;
    }

    .explore-section .section-heading h2 {
        font-size: 32px;

        letter-spacing: 1px;
    }

    .explore-section .section-heading h2::after {
        margin-top: 18px;
        margin-bottom: 16px;
    }

    .explore-section .section-heading p {
        font-size: 14px;
    }

    .explore-button {
        min-height: 66px;

        padding: 16px 18px;

        font-size: 13px;
    }

}
/* =========================================
   ABOUT NEWSLETTER
========================================= */

.about-newsletter {
    padding: 90px 30px;

    text-align: center;

    background: #0c0907;

    border-top: 1px solid #3f3015;
}


.about-newsletter h2 {
    margin: 12px 0 18px;

    color: #f3d47a;

    font-family: Georgia, serif;

    font-size: 38px;
}


.about-newsletter p {
    max-width: 650px;

    margin: 0 auto 30px;

    color: #cfc5b8;

    font-family: Georgia, serif;

    line-height: 1.7;
}


#aboutNewsletterForm {
    max-width: 600px;

    margin: 0 auto;

    display: flex;

    gap: 10px;
}


#aboutNewsletterEmail {
    flex: 1;

    padding: 16px 18px;

    border: 1px solid #5c461b;

    background: #15100c;

    color: #ffffff;

    outline: none;
}


#aboutNewsletterEmail:focus {
    border-color: #d4a63a;
}


#aboutNewsletterForm button {
    padding: 16px 25px;

    border: 1px solid #a87920;

    background: #a87920;

    color: #120d08;

    cursor: pointer;

    font-weight: 700;

    letter-spacing: 1px;
}


#aboutNewsletterForm button:hover {
    background: #d4a63a;
}


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

.about-footer {
    padding: 70px 6vw 25px;

    display: grid;

    grid-template-columns: 1.5fr 1fr 1.5fr 1.3fr;

    gap: 50px;

    background: #090705;

    border-top: 1px solid #3f3015;
}


.about-footer h2 {
    margin: 0;

    color: #e4bb55;

    font-family: Georgia, serif;
}


.about-footer span {
    color: #9e8d72;

    font-size: 11px;

    letter-spacing: 3px;
}


.about-footer p {
    color: #9f9589;

    font-size: 14px;

    line-height: 1.7;
}


.footer-column {
    display: flex;

    flex-direction: column;

    gap: 12px;
}


.footer-column h3 {
    margin: 0 0 8px;

    color: #d4a63a;

    font-size: 14px;

    letter-spacing: 2px;
}


.footer-column a {
    color: #aaa095;

    text-decoration: none;

    font-size: 14px;
}


.footer-column a:hover {
    color: #e4bb55;
}


.about-footer .footer-bottom {
    grid-column: 1 / -1;

    padding-top: 25px;

    border-top: 1px solid #302519;

    display: flex;

    justify-content: space-between;

    color: #71685e;

    font-size: 12px;
}
.mission-section::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        url("/assets/images/blog/black.jpg.jpg");

    background-size: cover;

    background-position: center;

    opacity: 0.25;

    filter: brightness(0.6);

    transition: all 0.8s ease;

    z-index: -1;

}


.mission-section:hover::before {

    opacity: 0.65;

    filter: brightness(1.15);

}
/* =========================================
   ABOUT NEWSLETTER BACKGROUND EFFECT
========================================= */

.about-newsletter {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    background: #090706;
}


/* Background image */

.about-newsletter::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        url("/assets/images/blog/white.jpg.jpg");

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

    opacity: 0.20;

    filter: brightness(0.55);

    transform: scale(1.02);

    transition:
        opacity 0.9s ease,
        filter 0.9s ease,
        transform 1.2s ease;

    z-index: -2;
}


/* Dark cinematic overlay */

.about-newsletter::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at center,
            rgba(218, 169, 55, 0.12),
            rgba(5, 4, 3, 0.78) 72%
        );

    opacity: 0.9;

    transition: opacity 0.9s ease;

    z-index: -1;
}


/* Hover effect */

.about-newsletter:hover::before {
    opacity: 0.58;

    filter: brightness(1.05);

    transform: scale(1.05);
}


.about-newsletter:hover::after {
    opacity: 0.55;
}
/* =========================================
   MISSION & BENEFITS INTERACTION
========================================= */

.benefits-list li {
    transition:
        transform 0.35s ease,
        color 0.35s ease,
        text-shadow 0.35s ease;
}


.benefits-list li:hover {
    transform: translateX(10px);

    color: #f0c75e;

    text-shadow:
        0 0 8px rgba(218, 169, 55, 0.45);
}


.benefits-list li span {
    display: inline-block;

    transition:
        transform 0.35s ease,
        text-shadow 0.35s ease;
}


.benefits-list li:hover span {
    transform: scale(1.25);

    text-shadow:
        0 0 12px rgba(218, 169, 55, 0.8);
}



/* =========================================
   NEWSLETTER SUCCESS MESSAGE
========================================= */

.about-newsletter form {
    position: relative;
}


.newsletter-success {
    position: absolute;

    left: 50%;
    top: calc(100% + 18px);

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

    width: 100%;

    margin: 0;

    text-align: center;

    color: #e7bd4f;

    font-size: 14px;

    letter-spacing: 0.5px;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.45s ease,
        transform 0.45s ease;
}


.newsletter-success.show {
    opacity: 1;

    transform: translate(-50%, 0);

    text-shadow:
        0 0 10px rgba(218, 169, 55, 0.35);
}




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

.contact-page {
    background: #080909;
    color: #f4eee3;
}


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

.contact-hero {
    position: relative;

    min-height: 520px;

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

    text-align: center;

    overflow: hidden;

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

    transition: filter 1s ease;
}


/* dark fantasy overlay */

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

    background:
        linear-gradient(
            180deg,
            rgba(5, 6, 6, 0.45),
            rgba(5, 6, 6, 0.78)
        );

    transition:
        background 0.8s ease;
}


/* smooth brightness */

.contact-hero:hover {
    filter: brightness(1.12);
}


.contact-hero:hover .contact-hero-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(5, 6, 6, 0.28),
            rgba(5, 6, 6, 0.65)
        );
}


.contact-hero-content {
    position: relative;
    z-index: 2;

    max-width: 850px;

    padding: 80px 25px;
}


.contact-label {
    display: block;

    margin-bottom: 20px;

    color: #d7a52b;

    font-family: Georgia, serif;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 5px;

    text-transform: uppercase;
}


.contact-hero h1 {
    margin: 0;

    color: #f5d77a;

    font-family: Georgia, serif;

    font-size: clamp(48px, 7vw, 88px);

    line-height: 0.95;

    text-transform: uppercase;

    text-shadow:
        0 4px 20px rgba(0, 0, 0, 0.8);
}


.contact-hero h1 span {
    display: block;

    color: #fff;
}


.contact-hero p {
    max-width: 680px;

    margin: 30px auto 0;

    color: #eee7dc;

    font-size: 18px;

    line-height: 1.8;
}


/* =====================================================
   CONTACT MAIN SECTION
===================================================== */

/* =====================================================
   CONTACT MAIN SECTION — PREMIUM
===================================================== */

.contact-section {
    width: min(calc(100% - 60px), 1180px);
    max-width: 1180px;

    margin: 0 auto;

    padding: 110px 0 100px;

    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(0, 1.08fr);

    align-items: start;

    gap: 75px;

    position: relative;
    isolation: isolate;
}


/* Full-width cinematic section background */

.contact-section::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: 50%;

    width: 100vw;

    transform: translateX(-50%);

    z-index: -2;

    background:
        radial-gradient(
            circle at 18% 35%,
            rgba(201, 162, 39, 0.075) 0%,
            transparent 32%
        ),
        radial-gradient(
            circle at 82% 45%,
            rgba(117, 70, 25, 0.07) 0%,
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #080a0b 0%,
            #0d0b09 48%,
            #08090a 100%
        );

    border-top:
        1px solid rgba(201, 162, 39, 0.10);

    pointer-events: none;
}


/* =====================================================
   LEFT SIDE
===================================================== */

.contact-info {
    position: relative;

    padding-top: 20px;
}


.contact-info .contact-label,
.contact-form-wrapper .contact-label {
    display: inline-block;

    margin-bottom: 18px;

    color: #d9aa2f;

    font-family: Georgia, "Times New Roman", serif;

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

    line-height: 1;

    letter-spacing: 4.5px;
}


/* Headings */

.contact-info h2,
.contact-form-wrapper h2 {
    margin: 0 0 24px;

    color: #efc451;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(38px, 4vw, 48px);
    font-weight: 700;

    line-height: 1.08;

    letter-spacing: 0.5px;

    text-shadow:
        0 4px 20px rgba(0, 0, 0, 0.55);
}


/* Small gold divider */

.contact-info h2::after,
.contact-form-wrapper h2::after {
    content: "";

    display: block;

    width: 54px;
    height: 1px;

    margin-top: 19px;

    background:
        linear-gradient(
            90deg,
            #d5a62d,
            rgba(213, 166, 45, 0)
        );
}


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

    margin: 0 0 38px;

    color: #c9c0b4;

    font-size: 15px;

    line-height: 1.85;
}


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

.contact-section .contact-info-card {
    position: relative;

    display: flex;

    align-items: center;

    gap: 18px;

    min-height: 82px;

    margin-bottom: 15px;

    padding: 18px 20px;

    overflow: hidden;

    text-decoration: none;
    color: inherit;

    cursor: pointer;

    border:
        1px solid rgba(201, 162, 39, 0.27);

    background:
        linear-gradient(
            145deg,
            rgba(24, 19, 14, 0.86) 0%,
            rgba(12, 11, 10, 0.94) 100%
        );

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.015);

    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.4s ease,
        background 0.4s ease,
        box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1);

    will-change: transform;
}


/* Gold top accent */

.contact-section .contact-info-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 0;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #dfb13a,
            rgba(223, 177, 58, 0)
        );

    transition:
        width 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}


.contact-section .contact-info-card:hover {
    transform: translateY(-5px) translateX(4px);

    border-color:
        rgba(218, 174, 55, 0.60);

    background:
        linear-gradient(
            145deg,
            rgba(35, 26, 17, 0.94) 0%,
            rgba(14, 12, 10, 0.98) 100%
        );

    box-shadow:
        0 20px 42px rgba(0, 0, 0, 0.38),
        0 0 24px rgba(201, 162, 39, 0.055);
}


.contact-section .contact-info-card:hover::before {
    width: 70%;
}


/* =====================================================
   ICON
===================================================== */

.contact-icon {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: flex;

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

    position: relative;

    border:
        1px solid rgba(201, 162, 39, 0.45);

    background:
        linear-gradient(
            145deg,
            rgba(201, 162, 39, 0.07),
            rgba(0, 0, 0, 0.10)
        );

    color: #e3b83e;

    font-size: 18px;

    transition:
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.35s ease,
        background 0.35s ease,
        box-shadow 0.4s ease;
}


.contact-info-card:hover .contact-icon {
    transform: scale(1.06);

    border-color:
        rgba(226, 183, 65, 0.72);

    background:
        rgba(201, 162, 39, 0.10);

    box-shadow:
        0 0 20px rgba(201, 162, 39, 0.08);
}


/* Card typography */

.contact-info-card h3 {
    margin: 0 0 6px;

    color: #e0b846;

    font-family: Georgia, "Times New Roman", serif;

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

    letter-spacing: 0.8px;

    transition:
        color 0.35s ease;
}


.contact-info-card:hover h3 {
    color: #f0c958;
}


.contact-info-card p {
    margin: 0;

    color: #bcb3a7;

    font-size: 13px;

    line-height: 1.6;
}


/* =====================================================
   RIGHT FORM PANEL
===================================================== */

.contact-form-wrapper {
    position: relative;

    overflow: hidden;

    padding: 48px 46px 50px;

    border:
        1px solid rgba(201, 162, 39, 0.36);

    background:
        linear-gradient(
            145deg,
            rgba(25, 19, 14, 0.96) 0%,
            rgba(12, 11, 10, 0.98) 58%,
            rgba(17, 13, 10, 0.98) 100%
        );

    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.018);
}


/* Soft gold glow inside form */

.contact-form-wrapper::before {
    content: "";

    position: absolute;

    top: -140px;
    right: -120px;

    width: 320px;
    height: 320px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(201, 162, 39, 0.09),
            transparent 68%
        );

    pointer-events: none;
}


/* Thin gold top line */

.contact-form-wrapper::after {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 42%;

    height: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(226, 181, 58, 0.85),
            transparent
        );
}


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

.contact-form-group {
    position: relative;

    margin-bottom: 21px;
}


.contact-form-group label {
    display: block;

    margin-bottom: 9px;

    color: #dcb13d;

    font-family: Georgia, "Times New Roman", serif;

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

    letter-spacing: 2.1px;
}


.contact-form-group input,
.contact-form-group textarea {
    width: 100%;

    box-sizing: border-box;

    padding: 15px 16px;

    border:
        1px solid rgba(201, 162, 39, 0.30);

    outline: none;

    background:
        rgba(5, 6, 7, 0.72);

    color: #f3ede4;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 15px;

    caret-color: #dbad35;

    transition:
        border-color 0.35s ease,
        background 0.35s ease,
        box-shadow 0.4s ease,
        transform 0.35s ease;
}


.contact-form-group input::placeholder,
.contact-form-group textarea::placeholder {
    color: #777169;
}


.contact-form-group input:hover,
.contact-form-group textarea:hover {
    border-color:
        rgba(201, 162, 39, 0.48);
}


.contact-form-group input:focus,
.contact-form-group textarea:focus {
    border-color: #cda035;

    background:
        rgba(10, 9, 8, 0.90);

    box-shadow:
        0 0 0 2px rgba(201, 162, 39, 0.07),
        0 0 24px rgba(201, 162, 39, 0.055);
}


.contact-form-group textarea {
    min-height: 160px;

    resize: vertical;
}


/* =====================================================
   SEND BUTTON
===================================================== */

.contact-submit {
    position: relative;

    width: 100%;

    min-height: 54px;

    padding: 16px 25px;

    overflow: hidden;

    border:
        1px solid #d0a232;

    background:
        linear-gradient(
            135deg,
            #b6811f 0%,
            #d1a233 50%,
            #a87318 100%
        );

    color: #0c0906;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 1.5px;

    cursor: pointer;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.28);

    transition:
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.35s ease,
        box-shadow 0.5s ease;
}


.contact-submit:hover {
    transform: translateY(-3px);

    filter: brightness(1.10);

    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.38),
        0 0 24px rgba(201, 162, 39, 0.13);
}


.contact-submit:active {
    transform: translateY(-1px);
}


.contact-submit:focus-visible {
    outline: 2px solid #efd06a;
    outline-offset: 4px;
}

/* =====================================================
   SUCCESS MESSAGE
===================================================== */

.contact-success {

    max-height: 0;

    margin-top: 0;

    overflow: hidden;

    opacity: 0;

    text-align: center;

    color: #e1b746;

    font-size: 14px;

    line-height: 1.6;

    transition:
        max-height 0.5s ease,
        margin-top 0.5s ease,
        opacity 0.5s ease;
}


.contact-success.show {

    max-height: 100px;

    margin-top: 20px;

    opacity: 1;
}


/* =====================================================
   FAQ
===================================================== */

/* =====================================================
   CONTACT FAQ — PREMIUM
===================================================== */

.contact-faq {
    width: min(calc(100% - 48px), 960px);
    max-width: 960px;

    margin: 0 auto;

    padding: 110px 30px 120px;

    position: relative;
    isolation: isolate;
}


/* Full-width cinematic background */

.contact-faq::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: 50%;

    width: 100vw;

    transform: translateX(-50%);

    z-index: -2;

    background:
        linear-gradient(
            90deg,
            rgba(5, 6, 7, 0.92) 0%,
            rgba(5, 6, 7, 0.72) 30%,
            rgba(5, 6, 7, 0.68) 70%,
            rgba(5, 6, 7, 0.92) 100%
        ),
        linear-gradient(
            180deg,
            rgba(5, 6, 7, 0.50) 0%,
            rgba(5, 6, 7, 0.70) 55%,
            rgba(5, 6, 7, 0.94) 100%
        ),
       url("/assets/images/blog/ancient-scroll.webp.webp");

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

    border-top:
        1px solid rgba(201, 162, 39, 0.15);

    border-bottom:
        1px solid rgba(201, 162, 39, 0.15);

    box-shadow:
        inset 0 50px 90px rgba(0, 0, 0, 0.38),
        inset 0 -50px 90px rgba(0, 0, 0, 0.48);
}


/* Soft gold glow behind heading */

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

    position: absolute;

    top: 45px;
    left: 50%;

    width: 500px;
    height: 230px;

    transform: translateX(-50%);

    z-index: -1;

    background:
        radial-gradient(
            ellipse,
            rgba(201, 162, 39, 0.11) 0%,
            rgba(201, 162, 39, 0.025) 42%,
            transparent 72%
        );

    pointer-events: none;
}


/* =====================================================
   FAQ HEADING
===================================================== */

.contact-section-heading {
    position: relative;

    max-width: 700px;

    margin: 0 auto 52px;

    text-align: center;
}


.contact-faq .contact-label {
    display: inline-block;

    margin-bottom: 18px;

    color: #ddb23b;

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

    line-height: 1;

    letter-spacing: 5px;

    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.8);
}


.contact-section-heading h2 {
    margin: 0;

    color: #f3c952;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(38px, 4vw, 48px);
    font-weight: 700;

    line-height: 1.08;

    letter-spacing: 1px;

    text-shadow:
        0 4px 20px rgba(0, 0, 0, 0.75);
}


/* Small premium divider */

.contact-section-heading h2::after {
    content: "";

    display: block;

    width: 66px;
    height: 1px;

    margin: 22px auto 18px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d7aa31,
            transparent
        );
}


.contact-section-heading p {
    max-width: 560px;

    margin: 0 auto;

    color: #c7beb2;

    font-size: 15px;

    line-height: 1.7;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.75);
}


/* =====================================================
   FAQ LIST
===================================================== */

.faq-list {
    display: grid;

    gap: 14px;
}


/* =====================================================
   FAQ CARD
===================================================== */

.faq-item {
    margin: 0;

    overflow: hidden;

    border:
        1px solid rgba(201, 162, 39, 0.30);

    background:
        linear-gradient(
            145deg,
            rgba(20, 16, 12, 0.91) 0%,
            rgba(9, 9, 9, 0.93) 100%
        );

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.018);

    backdrop-filter: blur(3px);

    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.35s ease,
        box-shadow 0.45s ease,
        background 0.35s ease;
}


.faq-item:hover {
    transform: translateY(-3px);

    border-color:
        rgba(218, 174, 55, 0.60);

    background:
        linear-gradient(
            145deg,
            rgba(29, 22, 15, 0.94) 0%,
            rgba(11, 10, 9, 0.96) 100%
        );

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.40),
        0 0 22px rgba(201, 162, 39, 0.05);
}


/* Open card */

.faq-item[open] {
    border-color:
        rgba(218, 174, 55, 0.68);

    background:
        linear-gradient(
            145deg,
            rgba(31, 23, 15, 0.96) 0%,
            rgba(10, 9, 8, 0.97) 100%
        );

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.42),
        0 0 25px rgba(201, 162, 39, 0.06);
}


/* =====================================================
   QUESTION
===================================================== */

.faq-item summary {
    min-height: 72px;

    display: flex;

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

    gap: 20px;

    padding: 20px 25px;

    color: #eee6da;

    font-family: Georgia, "Times New Roman", serif;

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

    line-height: 1.5;

    cursor: pointer;

    list-style: none;

    transition:
        color 0.3s ease,
        padding-left 0.35s ease;
}


.faq-item summary::-webkit-details-marker {
    display: none;
}


.faq-item:hover summary {
    color: #fff4df;

    padding-left: 30px;
}


/* Plus icon */

.faq-item summary span {
    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    display: inline-flex;

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

    color: #deb33c;

    border:
        1px solid rgba(201, 162, 39, 0.28);

    background:
        rgba(201, 162, 39, 0.035);

    font-size: 20px;
    font-weight: 400;

    line-height: 1;

    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease;
}


.faq-item:hover summary span {
    color: #f0c850;

    border-color:
        rgba(218, 174, 55, 0.55);

    background:
        rgba(201, 162, 39, 0.07);
}


.faq-item[open] summary span {
    transform: rotate(45deg);

    color: #f2cb5c;
}


/* =====================================================
   ANSWER
===================================================== */

.faq-item p {
    margin: 0;

    padding:
        0 72px
        26px 25px;

    color: #bdb4a8;

    font-size: 14px;

    line-height: 1.8;

    border-top:
        1px solid rgba(201, 162, 39, 0.08);
}


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

@media (max-width: 768px) {

    .contact-faq {
        width: calc(100% - 30px);

        padding:
            80px 0
            85px;
    }


    .contact-section-heading {
        margin-bottom: 38px;
    }


    .contact-section-heading h2 {
        font-size: 34px;
    }


    .contact-faq .contact-label {
        font-size: 10px;

        letter-spacing: 3.5px;
    }


    .faq-item summary {
        min-height: 66px;

        padding: 18px 18px;

        font-size: 15px;
    }


    .faq-item:hover summary {
        padding-left: 18px;
    }


    .faq-item p {
        padding:
            0 20px
            22px;

        font-size: 14px;
    }

}
/* =====================================================
   NEWSLETTER
===================================================== */

/* =====================================================
   CONTACT NEWSLETTER — PREMIUM
===================================================== */

.contact-newsletter {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding: 120px 30px 125px;

    text-align: center;

    background: #070809;

    border-top: 1px solid rgba(201, 162, 39, 0.22);
    border-bottom: 1px solid rgba(201, 162, 39, 0.18);
}


/* Background image */

.contact-newsletter::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -2;

    background-image:
        url("/assets/images/eye.jpg.jpg");

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

    transform: scale(1.02);

    filter:
        brightness(0.82)
        contrast(1.05)
        saturate(1.07);

   
transition:
    transform 1.6s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.1s cubic-bezier(0.22, 1, 0.36, 1);

will-change: transform, filter;
}


/* Smooth cinematic image hover */

.contact-newsletter:hover::before {
    transform: scale(1.055);

    filter:
        brightness(1.12)
        contrast(1.04)
        saturate(1.12);
}


/* Dark cinematic overlay */

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

    z-index: -1;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(201, 162, 39, 0.12) 0%,
            rgba(201, 162, 39, 0.035) 30%,
            transparent 56%
        ),

        linear-gradient(
            90deg,
            rgba(4, 5, 6, 0.88) 0%,
            rgba(4, 5, 6, 0.58) 28%,
            rgba(4, 5, 6, 0.52) 50%,
            rgba(4, 5, 6, 0.58) 72%,
            rgba(4, 5, 6, 0.88) 100%
        ),

        linear-gradient(
            180deg,
            rgba(4, 5, 6, 0.50) 0%,
            rgba(4, 5, 6, 0.62) 55%,
            rgba(4, 5, 6, 0.90) 100%
        );
        opacity: 1;

transition:
    opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1);

    transition:
        background 0.7s ease;
}


/* Slightly brighter on hover */

.contact-newsletter:hover .contact-newsletter-overlay {
    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(201, 162, 39, 0.15) 0%,
            rgba(201, 162, 39, 0.04) 32%,
            transparent 58%
        ),

        linear-gradient(
            90deg,
            rgba(4, 5, 6, 0.84) 0%,
            rgba(4, 5, 6, 0.52) 28%,
            rgba(4, 5, 6, 0.46) 50%,
            rgba(4, 5, 6, 0.52) 72%,
            rgba(4, 5, 6, 0.84) 100%
        ),

        linear-gradient(
            180deg,
            rgba(4, 5, 6, 0.46) 0%,
            rgba(4, 5, 6, 0.58) 55%,
            rgba(4, 5, 6, 0.88) 100%
        );
}


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

.contact-newsletter-content {
    position: relative;

    z-index: 2;

    width: min(100%, 850px);

    margin: 0 auto;
}


.contact-newsletter .contact-label {
    display: inline-block;

    margin-bottom: 20px;

    color: #e0b43a;

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

    line-height: 1;

    letter-spacing: 5px;

    text-shadow:
        0 3px 12px rgba(0, 0, 0, 0.9);
}


.contact-newsletter h2 {
    max-width: 780px;

    margin: 0 auto;

    color: #f2c956;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(42px, 5vw, 60px);
    font-weight: 700;

    line-height: 1.04;

    letter-spacing: 1px;

    text-shadow:
        0 5px 25px rgba(0, 0, 0, 0.85);
}


/* Premium gold divider */

.contact-newsletter h2::after {
    content: "";

    display: block;

    width: 72px;
    height: 1px;

    margin: 26px auto 20px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #e2b63e,
            transparent
        );
}


.contact-newsletter p {
    max-width: 630px;

    margin: 0 auto 38px;

    color: #d3cabf;

    font-size: 15px;

    line-height: 1.75;

    text-shadow:
        0 3px 12px rgba(0, 0, 0, 0.9);
}


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

#contactNewsletterForm {
    width: min(100%, 680px);

    margin: 0 auto;

    display: flex;

    padding: 5px;

    border:
        1px solid rgba(201, 162, 39, 0.42);

    background:
        rgba(8, 8, 8, 0.78);

    box-shadow:
        0 20px 48px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);

    backdrop-filter: blur(6px);

    transition:
        border-color 0.4s ease,
        box-shadow 0.5s ease;
}


#contactNewsletterForm:focus-within {
    border-color:
        rgba(225, 180, 55, 0.75);

    box-shadow:
        0 22px 52px rgba(0, 0, 0, 0.48),
        0 0 28px rgba(201, 162, 39, 0.08);
}


/* Email input */

#contactNewsletterEmail {
    flex: 1;

    min-width: 0;

    padding: 17px 18px;

    border: 0;

    outline: none;

    background:
        rgba(5, 6, 7, 0.76);

    color: #f4eee5;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 15px;

    caret-color: #dfb13a;
}


#contactNewsletterEmail::placeholder {
    color: #857e74;
}


/* =====================================================
   SUBSCRIBE BUTTON
===================================================== */

#contactNewsletterForm button {
    position: relative;

    min-width: 170px;

    padding: 17px 27px;

    overflow: hidden;

    border:
        1px solid rgba(226, 180, 54, 0.72);

    background:
        linear-gradient(
            135deg,
            #a96f15 0%,
            #d0a02e 50%,
            #a46a12 100%
        );

    color: #0d0905;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 1px;

    cursor: pointer;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.30);

    transition:
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.35s ease,
        box-shadow 0.5s ease;
}


/* Button shine */

#contactNewsletterForm button::before {
    content: "";

    position: absolute;

    top: -40%;
    left: -60%;

    width: 40%;
    height: 180%;

    transform: rotate(18deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 245, 200, 0.22),
            transparent
        );

    transition:
        left 0.75s cubic-bezier(0.22, 1, 0.36, 1);

    pointer-events: none;
}


#contactNewsletterForm button:hover {
    transform: translateY(-2px);

    filter: brightness(1.10);

    box-shadow:
        0 16px 36px rgba(0, 0, 0, 0.38),
        0 0 24px rgba(201, 162, 39, 0.14);
}


#contactNewsletterForm button:hover::before {
    left: 125%;
}


#contactNewsletterForm button:active {
    transform: translateY(0);
}

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

@media (max-width: 850px) {

    .contact-section {
    width: min(calc(100% - 36px), 700px);

    grid-template-columns: 1fr;

    gap: 55px;

    padding: 80px 0;
}


.contact-form-wrapper {
    padding: 38px 34px;
}


    .contact-hero {

        min-height: 430px;
    }


    .contact-newsletter {
    padding: 90px 24px 95px;
}


#contactNewsletterForm {
    max-width: 580px;

    flex-direction: column;

    gap: 5px;
}


#contactNewsletterEmail,
#contactNewsletterForm button {
    width: 100%;

    box-sizing: border-box;
}


#contactNewsletterForm button {
    min-height: 54px;
}

}


@media (max-width: 550px) {

    .contact-hero h1 {
        font-size: 45px;
    }


    .contact-section {
        width: calc(100% - 28px);

        padding: 65px 0;

        gap: 42px;
    }


    .contact-info h2,
    .contact-form-wrapper h2,
    .contact-section-heading h2 {
        font-size: 34px;
    }


    .contact-form-wrapper {
        padding: 30px 20px;
    }


    .contact-section .contact-info-card {
        min-height: 74px;

        padding: 16px;
    }


    .contact-icon {
        width: 42px;
        height: 42px;

        flex-basis: 42px;
    }
.contact-newsletter {
    padding: 72px 16px 78px;
}


.contact-newsletter .contact-label {
    margin-bottom: 16px;

    font-size: 10px;

    letter-spacing: 3.5px;
}


.contact-newsletter h2 {
    font-size: 36px;

    line-height: 1.08;
}


.contact-newsletter h2::after {
    margin-top: 20px;
}


.contact-newsletter p {
    margin-bottom: 30px;

    font-size: 14px;
}


#contactNewsletterForm {
    padding: 4px;
}


#contactNewsletterEmail {
    min-height: 52px;

    padding: 15px;
}
}
.contact-hero {
    position: relative;
    overflow: hidden;
}

.contact-hero-bg {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    opacity: 0.55;

    transition:
        opacity 1s ease,
        filter 1s ease,
        transform 1.2s ease;
}

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

    background:
        linear-gradient(
            rgba(0, 0, 0, 0.45),
            rgba(0, 0, 0, 0.72)
        );

    z-index: 1;
}

.contact-hero-content {
    position: relative;
    z-index: 2;
}
.contact-hero:hover .contact-hero-bg {
    opacity: 0.8;
    filter: brightness(1.18);
    transform: scale(1.03);
}
.contact-info-card {
    text-decoration: none;
    color: inherit;
    cursor: pointer;

    transition: 
        transform 0.3s ease,
        border-color 0.3s ease;
}


.contact-info-card:hover {
    transform: translateY(-5px);
    border-color: #d4a017;
}
.contact-success {
    display: none;
    margin-top: 20px;
    padding: 16px 20px;

    border: 1px solid #b8861b;
    background: #100f0d;

    color: #d6a32a;

    font-family: Georgia, serif;
    font-size: 16px;
    line-height: 1.6;

    text-align: center;
}

.contact-success.show {
    display: block;
}
/* =========================================
   CONTACT FORM - CHROME AUTOFILL FIX
========================================= */

.contact-form-wrapper input:-webkit-autofill,
.contact-form-wrapper input:-webkit-autofill:hover,
.contact-form-wrapper input:-webkit-autofill:focus,
.contact-form-wrapper textarea:-webkit-autofill,
.contact-form-wrapper textarea:-webkit-autofill:hover,
.contact-form-wrapper textarea:-webkit-autofill:focus {

    -webkit-text-fill-color: #f5f1e8;

    -webkit-box-shadow: 0 0 0px 1000px #090807 inset;

    box-shadow: 0 0 0px 1000px #090807 inset;

    transition: background-color 5000s ease-in-out 0s;
}


/* Normal input colors */

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

    background: #090807;
    color: #f5f1e8;

}


/* =========================================
   NEWSLETTER INPUT - AUTOFILL FIX
========================================= */

.contact-newsletter input[type="email"] {
    background: #090807;
    color: #f5f1e8;
    caret-color: #d6a32a;
}


.contact-newsletter input[type="email"]:-webkit-autofill,
.contact-newsletter input[type="email"]:-webkit-autofill:hover,
.contact-newsletter input[type="email"]:-webkit-autofill:focus {

    -webkit-text-fill-color: #f5f1e8;

    -webkit-box-shadow:
        0 0 0px 1000px #090807 inset;

    box-shadow:
        0 0 0px 1000px #090807 inset;

    transition:
        background-color 5000s ease-in-out 0s;
}


/* =========================================
   NEWSLETTER SUCCESS MESSAGE
========================================= */

.newsletter-success {

    display: none;

    width: fit-content;
    max-width: 90%;

    margin: 16px auto 0;

    padding: 10px 28px;

    border: 1px solid #8f6816;

    background: rgba(9, 8, 7, 0.92);

    color: #d6a32a;

    text-align: center;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 15px;

    line-height: 1.5;

    box-sizing: border-box;
}


.newsletter-success.show {
    display: block;
}


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

@media (max-width: 600px) {

    .newsletter-success {

        width: 90%;

        max-width: none;

        padding: 10px 15px;

        font-size: 14px;

    }

}

/* =========================================
   CONTACT → FAQ SECTION DIVIDER
========================================= */

.contact-section {
    position: relative;
    padding-bottom: 90px;
}


/* Gold decorative line */

.contact-section::after {

    content: "";

    position: absolute;

    bottom: 0;
    left: 50%;

    transform: translateX(-50%);

    width: 70%;

    height: 1px;

    background: linear-gradient(
        to right,
        transparent,
        #8f6816,
        #d6a32a,
        #8f6816,
        transparent
    );

    opacity: 0.65;
}


/* FAQ ko upar lao */

.contact-faq {

    padding-top: 85px;

}


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

@media (max-width: 768px) {


    .contact-section::after {
        width: 80%;
    }

    .contact-faq {
        padding-top: 60px;
    }

}

/* =========================================================
   FOOTER BRAND LOGO
========================================================= */

.footer-brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    color: inherit;
    text-decoration: none;
}

.footer-logo-image {
    position: relative;
    left: 4px;

    width: 52px;
    height: 52px;
    flex: 0 0 52px;

    object-fit: contain;

    filter:
        brightness(1.18)
        contrast(1.08)
        saturate(1.12)
        drop-shadow(0 0 7px rgba(201, 162, 39, 0.18));

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

.footer-logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1;
}

.footer-logo-main {
    color: #f1eee6;

    font-family: "Cinzel", Georgia, serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 3px;
}

.footer-logo-sub {
    margin-top: 6px;

    color: #c9a227;

    font-family: "Cinzel", Georgia, serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 3px;
}

.footer-brand-logo:hover .footer-logo-image {
    transform: scale(1.06);

    filter:
        brightness(1.3)
        contrast(1.1)
        saturate(1.15)
        drop-shadow(0 0 15px rgba(201, 162, 39, 0.34));
}


/* MOBILE */

@media (max-width: 600px) {

    .footer-logo-image {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

    .footer-logo-main {
        font-size: 21px;
        letter-spacing: 2.4px;
    }

    .footer-logo-sub {
        font-size: 7px;
        letter-spacing: 2.4px;
    }

}
/* ABOUT HERO — HOME PAGE TITLE COLORS */

.about-hero h1 {
    color: #f1eee6 !important;
    -webkit-text-fill-color: #f1eee6 !important;
    background: none !important;
}

.about-hero h1 > span {
    display: block;
    margin-top: 4px;

    color: #c9a227 !important;
    -webkit-text-fill-color: #c9a227 !important;
    background: none !important;
}
/* =========================================================
   CONTACT PAGE — HOME PAGE COLOR STYLE
========================================================= */

/* TOP HERO: GET IN */
.contact-hero h1 {
    color: #f1eee6 !important;
    -webkit-text-fill-color: #f1eee6 !important;
    background: none !important;
}

/* TOP HERO: TOUCH */
.contact-hero h1 > span {
    display: block;
    color: #c9a227 !important;
    -webkit-text-fill-color: #c9a227 !important;
    background: none !important;
}

/* CONTACT DRAGON NAME GENERATOR */
.contact-hero .contact-label {
    color: #c9a227 !important;
}

/* Hero description */
.contact-hero-content > p {
    color: #d8d0c2 !important;
}


/* =========================================================
   CONTACT MAIN CONTENT
========================================================= */

/* CONTACT US / SEND A MESSAGE / COMMON QUESTIONS */
.contact-page .contact-label {
    color: #c9a227 !important;
}

/* LET'S TALK / WRITE TO US / BEFORE YOU WRITE */
.contact-info > h2,
.contact-form-wrapper > h2,
.contact-section-heading > h2 {
    color: #f1eee6 !important;
    -webkit-text-fill-color: #f1eee6 !important;
}

/* Normal paragraph text */
.contact-intro,
.contact-section-heading > p,
.contact-info-card p {
    color: #cfc7b8 !important;
}

/* Cards headings */
.contact-info-card h3 {
    color: #e8d6a8 !important;
}


/* =========================================================
   FAQ
========================================================= */

.faq-item summary {
    color: #f1eee6 !important;
}

.faq-item summary span {
    color: #c9a227 !important;
}

.faq-item p {
    color: #cfc7b8 !important;
}


/* =========================================================
   NEWSLETTER
========================================================= */

.contact-newsletter .contact-label {
    color: #c9a227 !important;
}

.contact-newsletter h2 {
    color: #f1eee6 !important;
    -webkit-text-fill-color: #f1eee6 !important;
}

.contact-newsletter p {
    color: #d8d0c2 !important;
}
/* =========================================================
   ABOUT PAGE — MOBILE LAYOUT FIX
========================================================= */

@media (max-width: 760px) {

    /* -------------------------
       WHAT WE OFFER
    ------------------------- */

    .about-offer .offer-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        width: 100% !important;
    }

    .about-offer .offer-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 28px 22px !important;
    }


    /* -------------------------
       HIGH VALYRIAN SECTION
    ------------------------- */

    .valyrian-section {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        gap: 0 !important;
    }

    .valyrian-content,
    .valyrian-image {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .valyrian-content {
        padding: 34px 24px !important;
    }

    .valyrian-image img {
        display: block !important;
        width: 100% !important;
        height: 320px !important;
        object-fit: cover !important;
    }


    /* -------------------------
       MISSION SECTION
    ------------------------- */

    .mission-section {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        gap: 18px !important;
    }

    .mission-box,
    .benefits-box {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 30px 24px !important;
    }

    .benefits-list {
        width: 100% !important;
    }


    /* -------------------------
       STOP WORDS BREAKING
    ------------------------- */

    .about-page h1,
    .about-page h2,
    .about-page h3,
    .about-page p,
    .about-page li {
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }

}