.contact-hero {
    background-image: url("../images/contact/contact-hero.jpg");
}



.contact-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            var(--overlay-maroon-dark),
            var(--overlay-maroon-medium),
            var(--overlay-maroon-light)
        );

}



.contact-hero-content {

    position: relative;

    z-index: 2;

    max-width: 800px;

}





.contact-hero p {

    max-width: 600px;

    color: var(--color-text-light);

    font-size: 18px;

    line-height: 1.8;

}



.contact-hero .section-label {

    color:
        var(--color-gold-light);

    letter-spacing: 5px;

    text-transform: uppercase;

    font-size: 14px;

    margin-bottom: 20px;

}






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


.contact-info {

    background:
        var(--color-maroon-deep);

}



.contact-info .section-heading {

    text-align:center;

    margin-bottom:70px;

}



.section-heading span {

    color:
        var(--color-gold);

    text-transform:uppercase;

    letter-spacing:4px;

    font-size:13px;

}



.section-heading h2 {

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:64px;

    color:
        var(--color-cream);

    margin-top:15px;

}





.contact-grid {

    display:grid;

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

    gap:30px;

}



.contact-card {

    background:
        rgba(87, 18, 29, 0.45);

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

    padding:40px 30px;

    text-align:center;

    transition:.4s ease;

}



.contact-card:hover {

    transform:
        translateY(-10px);

    border-color:
        var(--color-gold);

}



.contact-card .icon {

    font-size:38px;

    margin-bottom:20px;

}



.contact-card h3 {

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:34px;

    color:
        var(--color-gold-light);

    margin-bottom:15px;

}



.contact-card p {

    color: var(--color-text-light);

    line-height:1.8;

}



.contact-card a {

    display:inline-block;

    margin-top:20px;

    color:
        var(--color-gold);

    text-decoration:none;

    border-bottom:
        1px solid var(--color-gold);

    padding-bottom:5px;

}

.map-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.16);
    border: 1px solid var(--color-border-light);
    color: var(--color-secondary-light);
    font-weight: 600;
    width: fit-content;
}

.map-link-btn:hover {
    background: var(--gold-glow);
    color: var(--color-text-light);
}






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


.map-section {

    background:
        var(--color-maroon-deep);

}



.map-container {

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:50px;

    align-items:center;

}



.map-text span {

    color:
        var(--color-gold);

    letter-spacing:4px;

}



.map-text h2 {

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:60px;

    color:
        var(--color-cream);

}



.map-text p {

    color: var(--color-text-light);

    line-height:1.8;

}



.map-frame iframe {

    width:100%;

    height:450px;

    border:none;

}


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


.footer {

    background: var(--color-primary-dark);

    padding-top: 80px;

}

.footer-grid {


    display:
        grid;


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


    gap:
        50px;

}

.footer-column {


    display:
        flex;


    flex-direction:
        column;


    gap:
        12px;

}

.footer-column h4 {


    font-family:
        "Cormorant Garamond",
        serif;


    font-size:
        32px;


    color:
        var(--color-gold);


    margin-bottom:
        25px;

}

.footer-column a,
.footer-column p {

    color: var(--color-text-light);

    font-size: 14px;
        
   transition:   .35s ease;
}

.footer-column a:hover {

    color: var(--color-secondary);
    transform: translateX(8px);
}



.footer-bottom {

    margin-top: 60px;

    padding: 25px 0;

    text-align: center;

    border-top: 1px solid rgba(255, 255, 255, 0.1);

}

.footer-bottom p {

    color: var(--color-text-muted);

}






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


@media(max-width:1100px){


.contact-grid {

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

}




.map-container {

    grid-template-columns:1fr;

}




}


@media(max-width:768px) {

    /* Fix footer grid overflow on mobile */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 35px;
    }

}


@media(max-width:600px){


.contact-hero {

    min-height:65vh;

}



.section-heading h2 {

    font-size:45px;

}



.contact-grid {

    grid-template-columns:1fr;

}



.contact-card {

    padding:35px 25px;

}



.map-text{
    text-align:center;
}


.map-frame iframe {

    height:350px;

}




}


@media(max-width:480px) {

    /* Fix footer grid overflow on small mobile */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

}


/* =====================================================
   PAGE LOADER FIX
===================================================== */




#pageLoader {

    position:fixed;

    inset:0;

    z-index:9999;

    display:flex;

    justify-content:center;

    align-items:center;

    background:
        var(--color-maroon-deep);

    transition:.5s ease;

}


#pageLoader img {

    width:120px;

}


#pageLoader.hide {

    opacity:0;

    visibility:hidden;

}

.reveal {

    opacity:0;

    transform:
        translateY(40px);

    transition:
        .8s ease;

}


.reveal.show {

    opacity:1;

    transform:
        translateY(0);

}