/* ================= CONTACT PAGE ================= */
.contact-hero{
    margin-top:100px;
}

.contact-hero {
    background: linear-gradient(135deg, #fdf7f2, #fff);
    padding: 70px 20px 65px;
    text-align: center;
}

.contact-hero-content {
max-width: 850px;
margin: 0 auto;
}

.contact-label,
.section-label {
display: inline-block;
font-size: 13px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: #b08a57;
margin-bottom: 15px;
}

.contact-hero h1 {
font-size: clamp(40px, 5vw, 64px);
line-height: 1.1;
margin: 0 auto 25px;
color: #222;
}

.contact-hero h1 span {
display: block;
color: #b08a57;
}

.contact-hero p {
max-width: 650px;
margin: 0 auto;
font-size: 17px;
line-height: 1.8;
color: #666;
}

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

.contact-section {
padding: 100px 20px;
background: #fff;
}

.contact-grid {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 80px;
align-items: start;
}

.contact-info h2,
.contact-form-wrapper h2 {
font-size: 38px;
line-height: 1.2;
color: #222;
margin: 0 0 20px;
}

.contact-info > p {
color: #666;
line-height: 1.8;
max-width: 500px;
margin-bottom: 45px;
}

/* ================= CONTACT ITEMS ================= */

.contact-item {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 28px;
}

.contact-icon {
width: 50px;
height: 50px;
border-radius: 50%;
background: #fdf7f2;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}

.contact-item h3 {
margin: 0 0 5px;
font-size: 16px;
color: #333;
}

.contact-item a {
color: #777;
text-decoration: none;
transition: 0.3s ease;
}

.contact-item a:hover {
color: #b08a57;
}

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


/* =========================================
   SOCIAL MEDIA ICONS
========================================= */

.social-links {
    display: flex;
    align-items: center;
    gap: 14px;
}

.social-icon {
    width: 48px;
    height: 48px;

    border-radius: 50%;

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

    background: #fdf7f2;
    border: 1px solid #e5ded7;

    color: #b08a57;

    text-decoration: none;

    transition: all 0.3s ease;
}

/* Font Awesome icons */
.social-icon i {
    display: block;

    font-size: 23px;

    color: #b08a57;

    line-height: 1;

    font-family: "Font Awesome 6 Brands";
}

/* Hover */
.social-icon:hover {
    background: #b08a57;

    border-color: #b08a57;

    transform: translateY(-3px);

    box-shadow: 0 8px 20px rgba(176, 138, 87, 0.20);
}

.social-icon:hover i {
    color: #fff;
}

/* =========================================================
   CONTACT TWO COLUMN LAYOUT
========================================================= */

.contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:start;
}

.contact-info{
    min-width:0;
}

.contact-form-wrapper{
    width:100%;
}

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

.contact-form-wrapper {
background: #fdfaf7;
padding: 45px;
border-radius: 24px;
border: 1px solid #eee5dd;
}

.form-header {
margin-bottom: 30px;
}

.contact-form {
display: flex;
flex-direction: column;
gap: 22px;
}

.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}

.form-group {
display: flex;
flex-direction: column;
gap: 8px;
}

.form-group label {
font-size: 14px;
font-weight: 600;
color: #444;
}

.form-group input,
.form-group textarea {
width: 100%;
box-sizing: border-box;
padding: 15px 16px;
border: 1px solid #ddd3ca;
border-radius: 12px;
background: #fff;
font-family: inherit;
font-size: 15px;
color: #333;
outline: none;
transition: 0.3s ease;
}

.form-group textarea {
resize: vertical;
min-height: 150px;
}

.form-group input:focus,
.form-group textarea:focus {
border-color: #b08a57;
box-shadow: 0 0 0 3px rgba(176, 138, 87, 0.10);
}

.contact-submit {
border: none;
border-radius: 30px;
padding: 15px 28px;
background: #b08a57;
color: #fff;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
align-self: flex-start;
}

.contact-submit:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(176, 138, 87, 0.22);
}

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

@media (max-width: 900px) {
.contact-grid {
grid-template-columns: 1fr;
gap: 55px;
}


.contact-info {
    max-width: 700px;
}


}

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

@media (max-width: 600px) {
.contact-hero {
padding: 80px 20px 65px;
}


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

.contact-section {
    padding: 70px 20px;
}

.contact-info h2,
.contact-form-wrapper h2 {
    font-size: 30px;
}

.contact-form-wrapper {
    padding: 28px 20px;
    border-radius: 18px;
}

.form-row {
    grid-template-columns: 1fr;
}

.contact-submit {
    width: 100%;
}
}
/* ================= CONTACT NAVBAR FIX ================= */

.contact-hero {
    margin-top: 100px;
}

.contact-hero-content {
    padding-top: 0;
}
/* ==================================================
   CONTACT PAGE BANNER
================================================== */


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

.contact-banner {
    width: 100%;
    height: 360px;

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

    position: relative;
    overflow: hidden;
}

/* Subtle dark overlay for a premium look */
.contact-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.12);
}


/* =========================================================
   CONTACT PAGE — MOBILE RESPONSIVENESS
   DESKTOP IS NOT TOUCHED
========================================================= */

@media (max-width: 768px) {

    /* ================= CONTACT BANNER ================= */

    .contact-banner {
        height: 280px;
        margin-top: 70px;
        padding: 0 18px;

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

        background-position: center center;
    }

    .contact-banner-content {
        width: 100%;
        max-width: 100%;
        padding: 0 5px;
    }

    .contact-banner-label {
        font-size: 11px;
        letter-spacing: 2px;
        margin-bottom: 10px;
    }

    .contact-banner h1 {
        font-size: 36px;
        line-height: 1.15;
        margin-bottom: 10px;
    }

    .contact-banner p {
        max-width: 340px;
        font-size: 14px;
        line-height: 1.6;
    }


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

    .contact-section {
        padding: 55px 18px;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }


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

    .contact-info {
        width: 100%;
        max-width: 100%;
    }

    .contact-info h2,
    .contact-form-wrapper h2 {
        font-size: 29px;
        line-height: 1.25;
    }

    .contact-info > p {
        font-size: 15px;
        line-height: 1.7;
        margin-bottom: 32px;
    }


    /* ================= CONTACT ITEMS ================= */

    .contact-item {
        gap: 15px;
        margin-bottom: 22px;
        align-items: center;
    }

    .contact-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        font-size: 18px;
    }

    .contact-item h3 {
        font-size: 15px;
    }

    .contact-item a {
        font-size: 14px;
        word-break: break-word;
    }


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

    .social-section {
        margin-top: 30px;
    }

    .social-section h3 {
        font-size: 16px;
        margin-bottom: 14px;
    }

    .footer-social {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }


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

    .contact-form-wrapper {
        width: 100%;
        padding: 28px 18px;
        border-radius: 18px;
        box-sizing: border-box;
    }

    .form-header {
        margin-bottom: 24px;
    }

    .contact-form {
        width: 100%;
        gap: 19px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 19px;
    }

    .form-group {
        width: 100%;
    }

    .form-group input,
    .form-group textarea {
        width: 100%;
        min-width: 0;
        font-size: 15px;
        padding: 14px 14px;
        box-sizing: border-box;
    }

    .form-group textarea {
        min-height: 140px;
    }

    .contact-submit {
        width: 100%;
        align-self: stretch;
        padding: 14px 20px;
    }

}


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

@media (max-width: 480px) {

    .contact-banner {
        height: 250px;
        margin-top: 65px;
        padding: 0 14px;
    }

    .contact-banner h1 {
        font-size: 31px;
    }

    .contact-banner p {
        max-width: 310px;
        font-size: 13px;
    }

    .contact-section {
        padding: 48px 15px;
    }

    .contact-info h2,
    .contact-form-wrapper h2 {
        font-size: 27px;
    }

    .contact-form-wrapper {
        padding: 24px 15px;
    }

    .contact-item a {
        font-size: 13px;
    }

}
/* =========================================================
   MOBILE CONTACT BANNER — TEXT VISIBILITY
========================================================= */

@media (max-width: 768px) {

    .contact-banner::after {
        content: "";
        position: absolute;
        inset: 0;

        background: rgba(0, 0, 0, 0.28);

        z-index: 1;
    }

    .contact-banner-content {
        position: relative;
        z-index: 3;
    }

    .contact-banner-label,
    .contact-banner h1,
    .contact-banner p {
        position: relative;
        z-index: 3;
    }

    .contact-banner h1 {
        color: #fff;
        text-shadow: 0 2px 8px rgba(0,0,0,0.45);
    }

    .contact-banner p {
        color: #fff;
        text-shadow: 0 1px 6px rgba(0,0,0,0.45);
    }

}
/* =========================================================
   CONTACT PAGE — MOBILE MENU ICON ONLY
========================================================= */

@media (max-width: 768px) {

    body:has(.contact-banner) .navbar .nav-container {
        display: grid !important;
        grid-template-columns: 40px 1fr auto !important;
        align-items: center !important;
    }

    body:has(.contact-banner) .navbar .mobile-menu-btn {
        display: flex !important;

        grid-column: 1 !important;

        width: 34px !important;
        height: 34px !important;

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

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

        border: none !important;
        background: transparent !important;

        color: #222 !important;
        font-size: 20px !important;

        visibility: visible !important;
        opacity: 1 !important;

        position: relative !important;
        z-index: 9999 !important;
    }

    body:has(.contact-banner) .navbar .mobile-menu-btn i {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    body:has(.contact-banner) .navbar .logo {
        grid-column: 2 !important;
        justify-self: center !important;
    }

    body:has(.contact-banner) .navbar nav {
        display: none !important;
    }

    body:has(.contact-banner) .navbar .nav-icons {
        grid-column: 3 !important;
    }
}


@media (max-width: 480px) {

    body:has(.contact-banner) .navbar .mobile-menu-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 19px !important;
    }

}
/* =========================================================
   CONTACT MOBILE NAVBAR — CENTER LOGO
   POSITION ONLY — KEEP ORIGINAL LOGO SIZE
========================================================= */

@media (max-width: 768px) {

    body:has(.contact-banner) .navbar .nav-container {
        position: relative !important;
    }

    /* MENU ICON — LEFT */

    body:has(.contact-banner) .navbar .mobile-menu-btn {
        position: relative !important;

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

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

    /* LOGO — CENTER ONLY */

    body:has(.contact-banner) .navbar .logo {
        position: absolute !important;

        left: 50% !important;
        top: 50% !important;

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

        margin: 0 !important;
    }

    /* DO NOT SET LOGO WIDTH HERE */

}
/* =====================================================
   CONTACT PAGE — FORCE MOBILE LOGO CENTER
===================================================== */

@media (max-width: 768px) {

    header.navbar .nav-container {
        position: relative !important;
    }

    header.navbar .logo {
        position: absolute !important;

        left: 50% !important;
        right: auto !important;

        top: 50% !important;

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

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

        width: max-content !important;

        z-index: 20 !important;
    }

    header.navbar .logo img {
        display: block !important;
        margin: 0 !important;
    }

}
/* =========================================================
   CONTACT PAGE — MOBILE NAVBAR
   MATCH OTHER PAGES
========================================================= */

@media (max-width: 768px) {

    body:has(.contact-banner) .navbar {
        height: 90px;
    }

    body:has(.contact-banner) .nav-container {
        width: 90%;
        height: 100%;
    }

    /* MENU ICON */
    body:has(.contact-banner) .mobile-menu-btn {
        width: 40px !important;
        height: 40px !important;
        font-size: 21px !important;
    }

    /* LOGO */
    body:has(.contact-banner) .navbar .logo img {
        width: auto !important;
        height: auto !important;
        max-width: 130px;
    }

    /* RIGHT ICONS */
    body:has(.contact-banner) .navbar .nav-icons {
        gap: 20px !important;
    }

    body:has(.contact-banner) .navbar .nav-icons > i {
        font-size: 19px !important;
    }

    /* CART */
    body:has(.contact-banner) .navbar .cart-icon {
        width: 30px !important;
        height: 30px !important;
    }

    body:has(.contact-banner) .navbar .cart-icon i {
        font-size: 20px !important;
    }

    /* CART NUMBER */
    body:has(.contact-banner) .navbar .cart-count {
        width: 20px !important;
        height: 20px !important;
        font-size: 10px !important;
        top: -8px !important;
        right: -10px !important;
    }

}
/* =========================================================
   CONTACT — MOBILE LOGO SIZE FIX
========================================================= */

@media (max-width: 768px) {

    body:has(.contact-banner) .navbar .logo {
        max-width: 130px !important;
        width: 130px !important;
    }

    body:has(.contact-banner) .navbar .logo img {
        width: 130px !important;
        max-width: 130px !important;
        height: auto !important;
        max-height: 45px !important;
        object-fit: contain !important;
        display: block !important;
    }

}
/* =========================================================
   CONTACT — MOBILE NAVBAR LOGO
   LARGE + CENTERED
========================================================= */

@media (max-width: 768px) {

    body:has(.contact-banner) .navbar .nav-container {
        position: relative !important;
    }

    body:has(.contact-banner) .navbar .logo {
        position: absolute !important;

        left: 50% !important;
        top: 50% !important;

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

        width: 150px !important;
        max-width: 150px !important;

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

        z-index: 20 !important;
    }

    body:has(.contact-banner) .navbar .logo img {
        display: block !important;

        width: 150px !important;
        max-width: 150px !important;

        height: auto !important;
        max-height: 55px !important;

        object-fit: contain !important;
    }

}
@media (max-width: 768px) {

    body:has(.contact-banner) .navbar .logo {
        left: 35% !important;
    }

}
/* =========================================================
   CONTACT — MOBILE MENU ICON SIZE
========================================================= */

@media (max-width: 768px) {

    body:has(.contact-banner) .navbar .mobile-menu-btn {
        width: 42px !important;
        height: 42px !important;
        font-size: 23px !important;

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

        padding: 0 !important;
    }

    body:has(.contact-banner) .navbar .mobile-menu-btn i {
        font-size: 23px !important;
    }

}
/* CONTACT — SLIGHTLY LARGER MOBILE LOGO */

@media (max-width: 768px) {

    body:has(.contact-banner) .navbar .logo,
    body:has(.contact-banner) .navbar .logo img {
        width: 160px !important;
        max-width: 160px !important;
    }

    body:has(.contact-banner) .navbar .logo img {
        max-height: 58px !important;
    }

}
/* Compact Contact Us Banner */
.contact-banner {
    height: 190px;
    min-height: 190px;
}

.contact-banner .banner-content {
    padding: 20px;
}

.contact-banner h1 {
    font-size: 32px;
    margin-bottom: 8px;
}

.contact-banner p {
    font-size: 15px;
    margin: 0;
}
@media (max-width: 768px) {
    .contact-banner {
        height: 130px;
        min-height: 130px;
    }

    .contact-banner .banner-content {
        padding: 15px;
    }

    .contact-banner h1 {
        font-size: 25px;
    }

    .contact-banner p {
        font-size: 13px;
    }
}
/* =========================================================
   CONTACT BANNER — REMOVE TEXT
========================================================= */

.contact-banner-content,
.contact-banner-label,
.contact-banner h1,
.contact-banner p {
    display: none !important;
}
.footer-social {
    text-align: center !important;
}

.footer-social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 12px;
    width: 100%;
}

.footer-social i {
    font-size: 20px;
}
.footer-social {
    text-align: center;
}
.footer-social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 12px;
    width: 100%;
}
.social-section {
    text-align: left;
}

.social-section .footer-social {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    margin-top: 12px;
    width: 100%;
}