:root {
    --gold: #ffd33f;
    --gold-light: #ffe98a;
    --gold-dark: #c79c15;

    --bg: #0f0c08;
    --bg-secondary: #1a140d;
    --bg-card: #21180f;

    --cream: #f4f0e7;
    --muted: #d8d1c4;

    --border: rgba(255, 211, 63, .15);

    --shadow:
        0 0 20px rgba(255, 211, 63, .15);

    --shadow-hover:
        0 0 40px rgba(255, 211, 63, .35);

    --transition: .4s ease;
}

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

.contact-page {
    position: relative;
    overflow: hidden;
}

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

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

/* OPTIONAL: make sure text is readable */
.contact-hero-title {
    color: var(--cream);
    text-shadow: 0 10px 30px rgba(0, 0, 0, .6);
}

.contact-hero-text {
    color: var(--muted);
}

.contact-hero {
    position: relative;
    background: url('../images/Contact_Hero_Banner.jpg') center/cover no-repeat;
    min-height: 90vh;
    display: flex;
    align-items: center;
}

.contact-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            rgba(0, 0, 0, .85) 0%,
            rgba(0, 0, 0, .55) 40%,
            rgba(0, 0, 0, .2) 100%);
    z-index: 1;
}

.contact-hero::before {

    content: '';

    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at center,
            rgba(255, 211, 63, .12),
            transparent 70%);

    pointer-events: none;
}

.contact-hero-content {

    position: relative;
    z-index: 2;

    max-width: 650px;
}

.contact-gold-label {

    display: inline-block;

    color: var(--gold);

    text-transform: uppercase;

    letter-spacing: 3px;

    font-size: .9rem;

    font-weight: 600;

    margin-bottom: 25px;
}

.contact-hero-title {

    font-family: 'Cinzel', serif;

    font-size: 5rem;

    line-height: 1.1;

    margin-bottom: 25px;

    color: var(--cream);
}

.contact-hero-text {

    font-size: 1.1rem;

    color: var(--muted);

    line-height: 1.9;

    margin-bottom: 18px;

    max-width: 580px;
}

.contact-divider {

    width: 120px;

    height: 3px;

    border-radius: 50px;

    background:
        linear-gradient(90deg,
            transparent,
            var(--gold),
            transparent);

    margin-bottom: 30px;
}

.contact-divider-center {
    margin-left: auto;
    margin-right: auto;
}

.contact-hero-image-wrapper {

    display: flex;

    justify-content: center;

    align-items: center;
}

.contact-hero-image {

    max-width: 550px;

    width: 100%;

    filter:
        drop-shadow(0 0 40px rgba(255, 211, 63, .35));

    animation:
        contact-float-book 5s ease-in-out infinite;
}

@keyframes contact-float-book {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0);
    }
}

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

.contact-main-section {

    margin-top: -140px;

    position: relative;

    z-index: 10;
}

.contact-main-card {

    background: #f5efe4;

    border-radius: 35px;

    overflow: hidden;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, .35);
}

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

.contact-form-side {

    padding: 70px 60px;

    background: #f5efe4;

    height: 100%;
}

.contact-section-title {

    font-family: 'Cinzel', serif;

    font-size: 2.6rem;

    color: #4a341d;

    text-align: center;

    margin-bottom: 15px;
}

.contact-section-text {

    text-align: center;

    color: #7a6854;

    line-height: 1.9;

    margin-bottom: 35px;
}

.contact-form {

    width: 100%;
}

.contact-form-group {
    margin-bottom: 18px;
}

.contact-input,
.contact-textarea {

    width: 100%;

    background: #fdfaf4;

    border: 1px solid rgba(0, 0, 0, .08);

    border-radius: 18px;

    padding: 18px 22px;

    font-size: 15px;

    transition: var(--transition);
}

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

    outline: none;

    border-color: var(--gold);

    box-shadow:
        0 0 15px rgba(255, 211, 63, .2);
}

.contact-textarea {

    resize: none;

    min-height: 180px;
}

.contact-button-wrapper {

    display: flex;

    justify-content: center;

    margin-top: 30px;
}

.contact-form-footer {

    text-align: center;

    color: #8c7865;

    margin-top: 25px;

    font-size: .95rem;
}

/* =========================================
INFO SIDE
========================================= */

.contact-info-side {

    background:
        linear-gradient(180deg,
            #f8f3ea,
            #efe4d4);

    height: 100%;

    padding: 70px 60px;
}

.contact-info-list {

    display: flex;

    flex-direction: column;

    gap: 35px;

    margin-top: 40px;
}

.contact-info-item {

    display: flex;

    align-items: flex-start;

    gap: 20px;
}

.contact-info-icon {

    width: 60px;

    height: 60px;

    border-radius: 50%;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(180deg,
            var(--gold-light),
            var(--gold-dark));

    color: #fff;

    font-size: 24px;

    box-shadow:
        0 8px 20px rgba(199, 156, 21, .25);
}

.contact-info-content h4 {

    font-family: 'Cinzel', serif;

    color: #4d351d;

    font-size: 1.3rem;

    margin-bottom: 10px;
}

.contact-info-content p {

    color: #7a6854;

    line-height: 1.8;

    margin-bottom: 8px;
}

.contact-info-content span {

    color: #b88423;

    font-weight: 600;
}

/* =========================================
FEATURE SECTION
========================================= */

.contact-feature-section {
    padding-top: 90px;
    padding-bottom: 110px;
}

.contact-feature-card {

    background: var(--bg-card);

    border: 1px solid var(--border);

    border-radius: 24px;

    overflow: hidden;

    height: 100%;

    transition: var(--transition);

    position: relative;
}

.contact-feature-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-hover);
}

.contact-feature-image {

    position: relative;

    overflow: hidden;

    height: 280px;
}

.contact-feature-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .6s ease;
}

.contact-feature-card:hover .contact-feature-image img {

    transform: scale(1.08);
}

.contact-feature-content {

    padding: 35px 30px;
}

.contact-feature-title {

    font-family: 'Cinzel', serif;

    color: var(--gold);

    font-size: 1.8rem;

    margin-bottom: 18px;

    text-align: center;
}

.contact-feature-text {

    color: var(--muted);

    text-align: center;

    line-height: 1.9;
}

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

.contact-newsletter-section {

    padding-bottom: 120px;
}

.contact-newsletter-card {

    background:
        linear-gradient(135deg,
            #0f2039,
            #081426);

    border: 1px solid var(--border);

    border-radius: 30px;

    padding: 70px;

    position: relative;

    overflow: hidden;
}

.contact-newsletter-card::before {

    content: '';

    position: absolute;

    inset: 0;

    background:
        radial-gradient(circle at top right,
            rgba(255, 211, 63, .15),
            transparent 40%);

    pointer-events: none;
}

.contact-newsletter-content {

    position: relative;

    z-index: 2;
}

.contact-newsletter-label {

    display: inline-block;

    color: var(--gold);

    text-transform: uppercase;

    letter-spacing: 3px;

    margin-bottom: 15px;

    font-size: .85rem;
}

.contact-newsletter-title {

    font-family: 'Cinzel', serif;

    font-size: 3rem;

    color: var(--cream);

    margin-bottom: 20px;

    line-height: 1.2;
}

.contact-newsletter-text {

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

    line-height: 1.9;

    max-width: 650px;
}

.contact-newsletter-form {

    display: flex;

    flex-direction: column;

    gap: 15px;
}

.contact-newsletter-group {
    width: 100%;
}

.contact-newsletter-input {

    width: 100%;

    height: 60px;

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

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

    border-radius: 50px;

    color: white;

    padding: 0 25px;

    transition: var(--transition);
}

.contact-newsletter-input:focus {

    outline: none;

    border-color: var(--gold);

    box-shadow:
        0 0 20px rgba(255, 211, 63, .25);
}

.contact-newsletter-input::placeholder {
    color: rgba(255, 255, 255, .65);
}

.contact-newsletter-button {

    width: 100%;

    height: 60px;

    font-size: .95rem;

    letter-spacing: .5px;
}

/* =========================================
CTA SECTION
========================================= */

.contact-cta-section {

    padding-top: 0;
    padding-bottom: 120px;
}

.contact-cta-card {

    background:
        linear-gradient(180deg,
            rgba(255, 211, 63, .05),
            rgba(255, 211, 63, .02));

    border: 1px solid var(--border);

    border-radius: 30px;

    padding: 80px 50px;

    text-align: center;
}

.contact-cta-content {

    max-width: 850px;

    margin: 0 auto;
}

.contact-cta-title {

    font-family: 'Cinzel', serif;

    font-size: 3.5rem;

    margin: 20px 0;

    color: var(--cream);
}

.contact-cta-text {

    max-width: 700px;

    margin: 0 auto 35px;

    color: var(--muted);

    line-height: 1.9;
}

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

@media (max-width: 1200px) {

    .contact-hero-title {
        font-size: 4rem;
    }

    .contact-newsletter-title {
        font-size: 2.5rem;
    }

    .contact-cta-title {
        font-size: 3rem;
    }
}

@media (max-width: 991px) {

    .contact-hero {
        text-align: center;
        min-height: auto;
        padding-top: 160px;
    }

    .contact-divider {
        margin-left: auto;
        margin-right: auto;
    }

    .contact-hero-content {
        margin: 0 auto;
    }

    .contact-hero-image {
        max-width: 400px;
        margin-top: 50px;
    }

    .contact-main-section {
        margin-top: -80px;
    }

    .contact-form-side,
    .contact-info-side {
        padding: 50px 35px;
    }

    .contact-newsletter-card {
        padding: 50px 35px;
    }

    .contact-newsletter-content {
        text-align: center;
        margin-bottom: 40px;
    }

    .contact-cta-card {
        padding: 60px 35px;
    }
}

@media (max-width: 768px) {

    .contact-hero-title {
        font-size: 3rem;
    }

    .contact-section-title {
        font-size: 2rem;
    }

    .contact-newsletter-title {
        font-size: 2rem;
    }

    .contact-cta-title {
        font-size: 2.2rem;
    }

    .contact-feature-image {
        height: 240px;
    }

    .contact-main-card {
        border-radius: 25px;
    }

    .contact-newsletter-card {
        border-radius: 25px;
    }

    .contact-cta-card {
        border-radius: 25px;
    }
}

@media (max-width: 576px) {

    .contact-hero {
        padding-top: 140px;
        padding-bottom: 80px;
    }

    .contact-hero-title {
        font-size: 2.4rem;
    }

    .contact-hero-text {
        font-size: 1rem;
    }

    .contact-form-side,
    .contact-info-side {
        padding: 35px 25px;
    }

    .contact-feature-content {
        padding: 25px;
    }

    .contact-feature-title {
        font-size: 1.5rem;
    }

    .contact-newsletter-card {
        padding: 35px 25px;
    }

    .contact-cta-card {
        padding: 45px 25px;
    }

    .contact-newsletter-title,
    .contact-cta-title {
        font-size: 1.8rem;
    }

    .contact-info-item {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
}