@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Poppins:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');


:root{
    --max-width:1100px;
    --accent:#e6c068; /* warm gold */
    --muted:#888;
    --bg:#ffffff;
    --card:#fafafa;
    -light-bg-color:rgba(255, 255, 255, 0.95);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family: "Arial Rounded MT", "Poppins", Arial, sans-serif;
    color:#222;
    background:var(--bg);
    -webkit-font-smoothing:antialiased;
}
/* ---------- Navbar ---------- */
.navbar{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid #eee}
.logo{font-size:20px;font-weight:700;color:var(--accent);text-decoration:none}
.nav-links{list-style:none;display:flex;gap:18px;margin:0;padding:0}
.nav-links a{color:#222;text-decoration:none;font-weight:600}

/* Mobile nav fallback */
@media (max-width:700px){
    .nav-links{display:none}
    .navbar{padding:12px}
}

/* ---------- Hero ---------- */
.hero{padding:80px 20px;text-align:center;background:linear-gradient(180deg, rgba(250,246,243,1), rgba(255,255,255,1));}
.hero h1{margin:0;font-size:36px;letter-spacing:0.5px}
.hero p{margin-top:10px;color:var(--muted)}

/* ---------- Home Hero ---------- */

.hero-home{
    position:relative;
    min-height:70vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#fff;
    padding:140px 20px 120px;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.4)),
        url("../images/Title_Bar.JPG") center/cover no-repeat !important;
}

.hero-home-inner{
    max-width:700px;
}

.hero-kicker{
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:12px;
    margin-bottom:10px;
}

.hero-home h1{
    margin:0 0 10px;
    font-size:50px;
    letter-spacing:1px;
    font-family: "Times New Roman", serif;
}

.hero-subtitle{
    margin-top:8px;
    color:#f4f4f4;
    font-size:16px;
    max-width:520px;
    margin-left:auto;
    margin-right:auto;
}

.btn-primary{
    display:inline-block;
    margin-top:24px;
    padding:10px 26px;
    border-radius:999px;
    border:1px solid #fff;
    background:transparent;
    color:#fff;
    text-decoration:none;
    font-size:14px;
    letter-spacing:0.5px;
    cursor:pointer;
    transition:background 0.2s, color 0.2s;
}
.btn-primary:hover{
    background:#fff;
    color:#333;
}

/* ---------- Generic Home Sections ---------- */

.home-section{
    max-width:var(--max-width);
    margin:70px auto;
    padding:0 20px;
    text-align:center;
}

.section-title{
    font-family:"Times New Roman", serif;
    font-size:34px;
    margin-bottom:12px;
}

.section-text{
    max-width:700px;
    margin:0 auto;
    color:var(--muted);
    line-height:1.6;
}

/* ---------- What We Do ---------- */

.what-we-do{
    margin-top:80px;
}

.service-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    margin-top:40px;
}

.service-card{
    border:1px solid #ddd;
    padding:26px 24px;
    text-align:left;
    background:#fff;
}
.service-card h3{
    margin-top:0;
    font-size:20px;
}
.service-card p{
    color:var(--muted);
    font-size:14px;
    line-height:1.6;
}
.text-link{
    display:inline-block;
    margin-top:18px;
    font-size:14px;
    text-decoration:none;
    border-bottom:1px solid #000;
    padding-bottom:2px;
}

/* ---------- Reviews Carousel ---------- */

.reviews{
    margin-top:80px;
}

/*.review-carousel{
    position:relative;
    max-width:750px;
    margin:30px auto 0;
    padding:30px 40px;
    border:1px solid #eee;
    background:#fff;
}*/

.review-track{
    min-height:140px;
}

.review-slide{
    display:none;
}
.review-slide.active{
    display:block;
}

.review-text{
    font-size:16px;
    line-height:1.7;
    margin-bottom:16px;
}
.review-name{
    font-size:14px;
    color:var(--muted);
}

.review-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    border:none;
    background:transparent;
    font-size:26px;
    cursor:pointer;
    padding:0 10px;
}
.review-arrow-left{left:10px;}
.review-arrow-right{right:10px;}

.review-dots{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:18px;
}
.review-dots .dot{
    width:9px;
    height:9px;
    border-radius:50%;
    border:1px solid #555;
    background:transparent;
    cursor:pointer;
}
.review-dots .dot.active{
    background:#555;
}

/* ---------- Newsletter ---------- */

.newsletter{
    margin-top:90px;
}
.newsletter-inner{
    max-width:800px;
    margin:0 auto;
    padding:32px 26px 36px;
    background:#f8f8f8;
}
.newsletter-form{
    margin-top:24px;
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}
.newsletter-form input[type="email"]{
    flex:1;
    min-width:220px;
    padding:10px 12px;
    border-radius:0;
    border:none;
    border-bottom:2px solid #333;
    font-size:14px;
}
.newsletter-form button{
    padding:10px 26px;
    border:none;
    background:#333;
    color:#fff;
    font-size:14px;
    cursor:pointer;
}

/* ---------- Footer ---------- */

.site-footer{
    margin-top:80px;
    padding:40px 20px 30px;
    border-top:1px solid #eee;
    text-align:center;
}

.footer-top{
    max-width:var(--max-width);
    margin:0 auto 20px;
    display:flex;
    justify-content:space-between;
    gap:40px;
    flex-wrap:wrap;
}

.footer-column{
    flex:1;
    min-width:200px;
    text-align:center;
}

.footer-heading{
    font-weight:600;
    margin-bottom:6px;
}

.footer-logo{
    width:180px;
    margin-bottom:6px;
}

.footer-locations{
    font-size:14px;
    color:var(--muted);
}

/* Footer social icons */
.footer-socials {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 6px;
}

.social-icon {
    width: 28px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    background: transparent;
    border: none;
}

.social-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: none !important;      /* 🔥 force-remove old filters */
    opacity: 1 !important;        /* 🔥 remove fade effects */
}

/* Optional hover */
.social-icon:hover img {
    transform: scale(1.08);
}


.footer-bottom{
    font-size:12px;
    color:var(--muted);
    margin-top:10px;
}

/* ---------- Responsive ---------- */

@media (max-width:900px){
    .hero-home{
        padding:110px 20px 80px;
    }
    .hero-home h1{
        font-size:38px;
    }
    .service-grid{
        grid-template-columns:1fr;
    }
    .review-carousel{
        padding:24px 24px 28px;
    }
}


.page-title{max-width:var(--max-width);margin:40px auto 20px;padding:0 20px;font-size:28px}
.container{max-width:var(--max-width);margin:0 auto;padding:0 20px}

/* ---------- Event rows + carousel ---------- */
.event-row{display:flex;gap:30px;align-items:center;justify-content:center;max-width:var(--max-width);margin:30px auto;padding:20px;border-bottom:1px solid #f0f0f0}
.event-text{flex:1;min-width:260px}
.event-text h2{margin:0 0 12px;font-family:Georgia, 'Times New Roman', serif;font-weight:500}
.event-text p{color:var(--muted);line-height:1.6}
.carousel{width:420px;height:320px;position:relative;border-radius:8px;overflow:hidden;flex-shrink:0;background:#eee}
.carousel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 0.8s ease}
.carousel img.show{opacity:1}

@media (max-width:980px){
    .event-row{flex-direction:column}
    .carousel{width:100%;height:260px}
    .event-text{width:100%}
}

/* ---------- Photography grid ---------- */
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:var(--max-width);margin:20px auto;padding:0 20px}
.photo-card{background:var(--card);border:1px solid #eee;padding:14px;border-radius:8px;text-align:left}
.photo-card img{width:100%;height:260px;object-fit:cover;border-radius:6px}
.photo-card h3{margin:12px 0 6px;font-size:18px}
.photo-card p{color:var(--muted);margin:0}

@media (max-width:980px){
    .photo-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
    .photo-grid{grid-template-columns:1fr}
}

/* ---------- Rentals ---------- */

.rentals-layout{
    max-width:var(--max-width);
    margin:0 auto 40px;
    padding:0 20px 40px;
    display:flex;
    gap:24px;
    align-items:flex-start;
}

.rentals-sidebar{
    width:230px;
    padding:0;
    background:none;
    border:none;
    border-radius:0;
    position:sticky;
    top:80px;
}

.rentals-sidebar h2{
    margin:0 0 12px;
    font-size:18px;
    font-family: "Arial Rounded MT", Arial, sans-serif;
    font-weight:600;
}

.category-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.category-chip{
    background:none;
    border:none;
    padding:4px 0;
    font-size:16px;
    text-align:left;
    cursor:pointer;
    color:#444;
    font-weight:500;
    font-family: "Arial Rounded MT", Arial, sans-serif;
    transition:color 0.2s ease;
}

.category-chip:hover{
    color:var(--accent);
}

.category-chip.active{
    color:var(--accent);
    font-weight:700;
    text-decoration:underline;
}

.rentals-main{
    flex:1;
    min-width:0;
}

.sort-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

#sortSelect {
    opacity: 0;         /* hide the original dropdown */
    position: absolute;
    left: 0;
    width: 40px;        /* small clickable area */
    height: 40px;
    cursor: pointer;
}

.sort-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: "Arial Rounded MT", Arial, sans-serif;
}

.sort-icon:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-2px);
}

/* Search + sort */
.filter-bar{
    display:flex;
    gap:12px;
    align-items:center;
    margin-bottom:16px;
}

.filter-bar input{
    flex:1;
    padding:8px 10px;
    border-radius:20px;
    border:1px solid #ddd;
    font-size:14px;
}

.filter-bar select{
    padding:8px 10px;
    border-radius:20px;
    border:1px solid #ddd;
    font-size:14px;
}

/* Grid of cards */
.rental-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
}

.rental-card{
    background:var(--card);
    border:1px solid #eee;
    border-radius:12px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    cursor:pointer;
    transition:box-shadow 0.18s ease,transform 0.18s ease;
    text-align:center;
}

.rental-card:hover{
    box-shadow:0 8px 18px rgba(0,0,0,0.06);
    transform:translateY(-2px);
}

.rental-image{
    position:relative;
    width:100%;
    padding-top:100%; /* perfect square */
    overflow:hidden;
    background:#f3f3f3;
}

.rental-image img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.rental-body{
    padding:12px 14px 14px;
    text-align:center;
}

.rental-category{
    display:block;
    font-size:11px;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:6px;
}

.rental-name{
    margin:0 0 6px;
    font-size:16px;
}

.rental-price{
    margin:0;
    font-size:14px;
    color:var(--accent);
    font-weight:600;
}

.rental-empty{
    margin-top:20px;
    color:var(--muted);
    font-size:14px;
}

/* Responsive layout */
@media (max-width:980px){
    .rentals-layout{
        flex-direction:column;
    }
    .rentals-sidebar{
        position:static;
        width:100%;
        display:flex;
        flex-direction:column;
        gap:8px;
    }
    .category-list{
        flex-direction:row;
        flex-wrap:wrap;
    }
    .category-chip{
        width:auto;
    }
    .rental-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:600px){
    .rental-grid{
        grid-template-columns:1fr;
    }
}

.rentals-sidebar-note {
    margin-top: 20px;
    padding: 12px 14px;
    background: #fafafa;
    border-left: 4px solid var(--accent);  /* gold accent bar */
    font-size: 13px;
    line-height: 1.5;
    color: #555;
    border-radius: 6px;
}


/* UNIFIED CARD STYLE (matches rentals) */
.unified-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.unified-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.unified-image {
    width: 100%;
    overflow: hidden;
}

.unified-image img {
    width: 100%;
    height: auto;            /* ← keeps your tall photography ratio */
    object-fit: cover;
}

.unified-body {
    padding: 16px 14px;
    text-align: center;
}

.unified-body h3 {
    margin-bottom: 6px;
    font-size: 1.05rem;
}

.unified-body p {
    margin: 4px 0;
    font-size: 0.9rem;
}

/* Photography cards: force 3:4 aspect ratio */
.photo-image {
    width: 100%;
    aspect-ratio: 4/3;     /* PERFECT 4:3 ratio */
    overflow: hidden;
    border-radius: 10px;     /* optional, matches rentals style better */
}

.photo-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;        /* fills the 3:4 frame perfectly */
    object-position: center;  /* keeps subject centered */
}


/* Photography tagline: small subtle text like rentals */
.photo-tagline {
    font-size: 12px !important; 
    color: var(--muted) !important;
    margin: 4px 0;
    font-weight: 500;
}

/* Photography price should match Rentals price styling */
.photo-price {
    color: var(--accent) !important;   /* #b98b5a */
    font-weight: 600;
    font-size: 14px;                   /* same as rentals */
    margin-top: 6px;
}




/* --- CONTACT PAGE NEW DESIGN (Matches Starlit Screenshot) --- */

.contact-wrapper {
    max-width: 1300px;
    margin: 60px auto;
    padding: 0 40px;
    display: flex;
    gap: 80px;
}

.contact-left {
    flex: 1;
    padding-top: 40px;
}

.contact-heading {
    font-family: "Times New Roman", serif;
    font-size: 70px;
    line-height: 1.1;
    margin: 0 0 20px;
}

.contact-subtext {
    font-size: 18px;
    margin: 20px 0 40px;
}

.contact-hours {
    margin-top: 30px;
}

.contact-hours h3 {
    margin: 0 0 10px;
    font-size: 20px;
}

.contact-logo {
    width: 260px;
    margin-top: 80px;
    opacity: 0.9;
}

/* FORM SIDE */
.contact-form {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-row {
    display: flex;
    gap: 20px;
}

.field-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.contact-form label {
    font-size: 16px;
    margin-bottom: 4px;
}

.contact-form input,
.contact-form textarea {
    border: none;
    border-bottom: 2px solid black;
    padding: 8px 4px;
    font-size: 15px;
    background: transparent;
    outline: none;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--accent);
}

.contact-send-btn {
    width: 150px;
    padding: 12px;
    border: 1px solid black;
    background: white;
    font-size: 16px;
    cursor: pointer;
    margin-top: 10px;
    transition: 0.2s;
}

.contact-send-btn:hover {
    background: #f2f2f2;
}

.field-error {
    color: red;
    font-size: 12px;
    margin-top: 4px;
}

/* SUCCESS MESSAGE */
.contact-success {
    margin-top: 20px;
    padding: 12px;
    background: #e8ffe8;
    border: 1px solid #77cc77;
    color: #0a640a;
    font-weight: 600;
    border-radius: 6px;
}

/* Fix spacing consistency */
.contact-form select,
.contact-form input,
.contact-form textarea,
.select-wrapper {
    margin-bottom: 0;
}

.field-error {
    margin-top: 4px;
    margin-bottom: -4px; /* Pulls elements closer consistently */
}

/* Add equal spacing before the Message label */
label[for="message"],
label:has(+ #message) {
    margin-top: 20px; /* Adjust to 16–24px if needed */
    display: block;
}


/* RESPONSIVE */
@media (max-width: 900px) {
    .contact-wrapper {
        flex-direction: column;
        padding: 0 20px;
    }
    .contact-logo {
        margin-bottom: 40px;
    }
}

/* Sleek Dropdown Styling */
.select-wrapper {
    position: relative;
    width: 100%;
}

.select-wrapper select {
    width: 100%;
    padding: 8px 4px;
    border: none;
    border-bottom: 2px solid black;
    background: transparent;
    font-size: 15px;
    appearance: none;
    outline: none;
    cursor: pointer;
}

/* Custom dropdown arrow */
.select-wrapper::after {
    content: "▾";
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: black;
    pointer-events: none;
}

/* Hover style */
.select-wrapper select:hover {
    border-bottom-color: var(--accent);
}

/* Focus style */
.select-wrapper select:focus {
    border-bottom-color: var(--accent);
}

/* Date input placeholder formatting */
input[type="date"]:not(.has-value)::before {
    content: attr(placeholder);
    color: #999;
    position: absolute;
    left: 0;
}

/* Hide default date text when selected */
input[type="date"].has-value::before {
    content: "";
}

/* Smooth fade-out placeholder text */
textarea::placeholder {
    color: #999;
    opacity: 1;
    transition: opacity 0.25s ease;
}

textarea:focus::placeholder {
    opacity: 0;
}

/* DESKTOP LAYOUT: two columns */
.contact-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 80px;
    max-width: 1300px;
    margin: 60px auto;
    padding: 0 40px;
}

.contact-left {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.contact-form {
    flex: 1.2;
}

/* MOBILE LAYOUT */
@media (max-width: 900px) {

    .contact-wrapper {
        flex-direction: column;
    }

    /* 1. Title + Subtext */
    .contact-left {
        order: 1;
        text-align: left;
    }

    /* 2. Form */
    .contact-form {
        order: 2;
    }

    /* 3. Move HOURS + LOGO under form */
    .contact-hours,
    .contact-logo {
        order: 3;
        align-self: center;
        text-align: center;
    }

    .contact-logo {
        width: 200px;
        margin-top: 20px;
    }
}

.service-link {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid #ddd;
    padding: 26px 24px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.service-link:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* -------------------- EVENTS HERO -------------------- */

.events-hero {
    max-width: var(--max-width);
    margin: 60px auto 40px;
    padding: 0 20px;
}

.events-hero h1 {
    font-family: "Times New Roman", serif;
    font-size: 50px;
    color: #000;
    margin-bottom: 10px;
}

.events-hero p {
    font-size: 18px;
    color: var(--accent);
    max-width: 600px;
    line-height: 1.5;
}

/* -------------------- EVENTS PAGE FONT FIXES -------------------- */

/* Page title in GOLD */
.events-hero h1 {
    font-family: "Arial Rounded MT", "Poppins", sans-serif; /* match rentals */
    font-weight: 700;
    font-size: 37px !important;
    color: var(--accent) !important;   /* gold */
    margin-bottom: 6px;
}

/* Subtext under title in NORMAL BLACK */
.events-hero p {
    color: #222 !important;
    font-size: 16px;
    line-height: 1.6;
    max-width: 600px;
}

/* Event titles in GOLD + same font as rentals/photography */
.event-text h2 {
    font-family: "Arial Rounded MT", "Poppins", sans-serif !important;
    font-size: 24px !important;
    font-weight: 600;
    color: var(--accent) !important;  /* gold */
}

/* Event description SMALL + MUTED GREY */
.event-text p {
    font-family: "Arial Rounded MT", "Poppins", sans-serif;
    font-size: 14px !important;       /* smaller */
    color: var(--muted) !important;   /* soft grey */
    line-height: 1.55;
}


/* -------------------- EVENT ROWS -------------------- */

#eventsContainer {
    max-width: var(--max-width);
    margin: auto;
    padding: 0 20px;
}

.event-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 70px 0;
    gap: 40px;
}

.event-text {
    flex: 1;
}

.event-text h2 {
    font-family: "Times New Roman", serif;
    font-size: 30px;
    margin-bottom: 12px;
}

.event-text p {
    line-height: 1.6;
    color: var(--muted);
}

/* -------------------- CAROUSEL -------------------- */

.event-carousel {
    width: 500px;
    height: 340px;
    overflow: hidden;
    border-radius: 10px;
    position: relative;
}

.event-carousel img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .8s ease;
}

.event-carousel img {
    object-position: center;
}


.event-carousel img.show {
    opacity: 1;
}

.event-text h2 {
    color: var(--accent); /* gold */
}

.event-row {
    padding: 10px 0;
}


/* -------------------- RESPONSIVE -------------------- */

/* Keep event rows side-by-side on all screen sizes */
@media (max-width: 900px) {
    .event-row {
        flex-direction: row !important;
        text-align: left;
    }

    .event-carousel {
        width: 50% !important;
        height: auto !important;
    }

    .event-text {
        width: 50% !important;
    }
}


/* ---------------------------
   EVENTS PAGE HERO — NEW LAYOUT
---------------------------- */

.events-hero {
    width: 100%;
    padding: 60px 5vw;
}

.events-hero-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-items: flex-start;
    gap: 60px;
}

/* LEFT SIDE */
.events-hero-left h1 {
    font-family: "Arial Rounded MT", serif;
    white-space: nowrap;
    font-size: 48px;
    font-weight: 600;
    color: var(--accent); /* gold */
    margin-bottom: 12px;
}

.events-hero-left .events-subtext {
    font-family: "Arial Rounded MT", sans-serif;
    color: #000 !important;        /* softer grey */
    font-size: 18px;
    /*color: #000;*/
}

/* RIGHT SIDE */
.events-hero-right {
    max-width: 450px;
    font-family: "Arial Rounded MT", sans-serif;
    font-size: 10px;
    color: #666;
    line-height: 1.6;
    text-align: right;
}

/* Responsive */
@media (max-width: 900px) {
    .events-hero-inner {
        flex-direction: column;
        gap: 30px;
    }

    .events-hero-right {
        text-align: left;
        max-width: 100%;
    }

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

/* ---------------------------
   EVENTS HERO SPACING FIX
---------------------------- */

/* Reduce the big top margin & expand width */
.events-hero {
    max-width: 1400px;   /* wider title block */
    margin: 30px auto 40px !important; /* less empty space above */
    padding-top: 10px !important;
}

/* Slightly smaller subtitle & grey */
.events-hero p,
.events-subtext {
    color: #555 !important;
    font-size: 16px !important;
}

/* Responsive fix for event carousel shrinking */
.event-carousel {
    width: 45% !important;      /* shrink with screen size */
    min-width: 260px !important; /* never collapse */
    height: auto !important;
    aspect-ratio: 3/2 !important; /* maintain shape */
}

/* Images inside stay responsive */
.event-carousel img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* -------- FULL-WIDTH REVIEW BACKGROUND IMAGES -------- */

.review-slide {
    position: relative;
    display: none;
    padding: 120px 40px;
    color: white;
    text-shadow: 0 2px 6px rgba(0,0,0,0.4);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 260px;
}

.review-slide.active {
    display: block;
}

.review-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
}

.review-slide * {
    position: relative;
    z-index: 2;
}

/* FORCE REVIEWS TO FULL WIDTH */
.reviews {
    width: 100%;
    margin-top: 80px;
    padding: 0;
}

/* Remove the white box */
.review-carousel {
    width: 100%;
    max-width: 100% !important;
    margin: 0;
    padding: 0;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Container holds slides stacked */
.review-track {
    position: relative;
    width: 100%;
    min-height: 360px; /* adjustable */
}

/* FULL-WIDTH SLIDES WITH BACKGROUND IMAGES */
.review-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    min-height: 360px; /* height of banner */
    padding: 80px 20px;

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

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

    text-align: center;

    opacity: 0;
    transition: opacity 0.6s ease;
}

.review-slide.active {
    opacity: 1;
}

/* Dark overlay for readability */
.review-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 1;
}

/* Ensure text is above overlay */
.review-slide * {
    position: relative;
    z-index: 2;
}

/* Review text styles */
.review-text {
    font-size: 22px;
    max-width: 800px;
    color: #fff;
    font-weight: 500;
    line-height: 1.5;
    text-shadow: 0 2px 10px rgba(0,0,0,0.55);
    margin-bottom: 15px;
}

/* Reviewer name */
.review-name {
    font-size: 18px;
    color: #f7f7f7;
    font-weight: 600;
    text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}

/* Keep arrows visible */
.review-arrow {
    z-index: 5;
    color: white !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* Dots below banner */
.review-dots {
    position: relative;
    z-index: 5;
    margin-top: 20px;
}

.review-dots .dot {
    border-color: #fff !important;
}

.review-dots .dot.active {
    background: #fff !important;
}

/* ------------------------------
   FULL-WIDTH REVIEWS SECTION
-------------------------------- */

.fullwidth-reviews {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;

    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Review carousel container must ALSO be full width */
.fullwidth-reviews .review-carousel,
.fullwidth-reviews .review-track {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

/* Slides become full banner sections */
.review-slide {
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 380px;
    padding: 140px 20px;

    display: none;

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

    color: white;
    text-align: center;
    position: relative;
}

.review-slide.active {
    display: block;
}

/* Dark overlay for readability */
.review-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1;
}

.review-slide * {
    position: relative;
    z-index: 2;
}

/* Ensure full-width review section ignores home-section sizing */
.fullwidth-reviews {
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    padding: 0;

    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* FORCE REVIEWS SECTION TO TRUE FULL WIDTH */
/*.reviews.fullwidth-reviews {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 0 !important;
}*/


.fullwidth-reviews .review-carousel,
.fullwidth-reviews .review-track,
.fullwidth-reviews .review-slide {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
}

.fullwidth-reviews .review-slide {
    display: flex !important;
    justify-content: center;
    align-items: center;
    padding: 140px 20px;  /* adjust banner height */
    text-align: center;
}

/* =========================================================
   FORCE REVIEWS TO TRUE FULL WIDTH — FINAL FIX
   ========================================================= */

/*.reviews.fullwidth-reviews {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 0 !important;
}*/

/* The carousel itself must also be full width */
/*.reviews.fullwidth-reviews .review-carousel {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}*/

/* Track must stretch fully */
/*.reviews.fullwidth-reviews .review-track {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
}*/

/* Slides: full-width background banners */
.reviews.fullwidth-reviews .review-slide {
    position: absolute;
    inset: 0;
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 380px;
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-direction: column;

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

    padding: 140px 20px;
    opacity: 0;
    transition: opacity 0.6s ease;
    text-align: center;
}

.reviews.fullwidth-reviews .review-slide.active {
    opacity: 1;
}

/* Keep arrows & dots aligned and visible */
.reviews.fullwidth-reviews .review-arrow {
    z-index: 10;
    color: white !important;
    font-size: 40px;
}

.reviews.fullwidth-reviews .review-dots {
    margin-top: 20px;
    position: relative;
    z-index: 10;
}

/* --- FINAL OVERRIDE FOR FULL-WIDTH REVIEWS --- */
.reviews.fullwidth-reviews {
    position: relative;
    width: 100vw !important;
    max-width: 100vw !important;

    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;

    padding: 0 !important;
}

/* Keep service cards horizontal on all screen sizes */
.service-grid {
    grid-template-columns: repeat(3, 1fr) !important;
}

.what-we-do .service-card {
    text-align: center !important;
}

/* Add background image to the navbar bar */
.navbar {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    padding: 20px 24px !important; /* restore comfortable spacing */
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

.navbar .logo,
.navbar .nav-links a {
    color: white !important;     /* white looks best on the new photo */
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}


/* ---------------------------------------------------
   RENTAL MODAL POPUP (Starlit Rentals)
--------------------------------------------------- */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 20px;
}

.modal-overlay[hidden] {
    display: none !important;
}

.modal-overlay:not([hidden]) {
    display: flex !important;
}

.modal-content {
    background: #fff;
    width: 860px;
    max-width: 95%;
    display: flex;
    gap: 50px;
    padding: 60px;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 26px;
    border: none;
    background: none;
    cursor: pointer;
    color: #666;
    font-weight: 400;
}
.modal-close:hover { color: #000; }

.modal-left {
    width: 45%;
}
.modal-left img {
    width: 100%;
    border-radius: 6px;
    object-fit: cover;
}

.modal-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.modal-thumbs img {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s ease;
}

.modal-thumbs img.active {
    border-color: var(--accent);
}

.modal-right {
    width: 55%;
    padding-left: 5px;   /* ← increase your side spacing here */
    padding-right: 10px;
}

/*.modal-right {
    width: 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 40px;
    padding-right: 40px;
}*/

.modal-right > *:first-child {
    margin-top: 30px;  /* increase or decrease as you want */
}

.modal-price {
    color: var(--accent);
    font-weight: 600;
    margin-top: 5px;
    font-size: 18px;
}

.modal-description {
    margin-top: 15px;
    color: #444;
    line-height: 1.55;
    font-size: 13px;
}

.modal-left img {
    width: 100%;
    aspect-ratio: 1 / 1;   /* force perfect square */
    object-fit: cover;
    border-radius: 6px;
}

.modal-thumbs img {
    width: 70px;
    height: 70px;
    aspect-ratio: 1 / 1;   /* force perfect square */
    border-radius: 6px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s ease;
}

.inquiry-container {
    max-width: 1100px;
    margin: 30px auto;
    display: flex;
    gap: 40px;
    padding: 20px;
}

.inquiry-items {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.inquiry-item-card {
    display: flex;
    gap: 12px;
    background: #fafafa;
    border: 1px solid #eee;
    padding: 10px;
    border-radius: 8px;
}

.inquiry-item-card img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
}

.inq-item-name {
    font-weight: 600;
}

.inq-item-cat {
    font-size: 12px;
    color: #777;
}

.remove-inquiry {
    margin-top: 8px;
    padding: 4px 10px;
    background: #eee;
    border: none;
    cursor: pointer;
    border-radius: 4px;
}

.inquiry-form-wrapper {
    flex: 1;
}

/* Toast Notification */
.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #c7a457;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    z-index: 5000;
}

.toast.show {
    opacity: 1;
}


.modal-add-btn {
    margin-top: 18px;
    width: 100%;
    padding: 12px;
    background: #d4af37; /* gold */
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.25s ease;
}

.modal-add-btn:hover {
    opacity: 0.85;
}

/* ------------------------------
   CONTACT PAGE – INQUIRY CART
------------------------------ */

.inquiry-cart-box {
    margin-top: 20px;
}

.inquiry-cart-title {
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: 600;
}

.inquiry-items-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.inquiry-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #fafafa;
}

.inquiry-thumb {
    width: 55px;
    height: 55px;
    border-radius: 6px;
    object-fit: cover;
}

.inquiry-item-name {
    font-size: 15px;
    flex-grow: 1;
}

.inquiry-remove-btn {
    background: #ccc;
    border: none;
    color: white;
    font-size: 16px;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.inquiry-remove-btn:hover {
    background: #a9a9a9;
}

/* === CONTACT PAGE COLUMN LAYOUT FIX === */

.contact-wrapper-with-cart {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 60px;
    padding: 40px 10%;
}

/* Left column (text + cart) */
.left-column {
    flex: 1;
    max-width: 45%;
}

/* Right column (form) */
.contact-form {
    flex: 1;
    max-width: 45%;
}

/* Make sure cart items look correct */
.inquiry-items-list {
    margin-top: 15px;
}

/* Prevent form stretching full width on small screens */
@media (max-width: 900px) {
    .contact-wrapper-with-cart {
        flex-direction: column;
    }

    .left-column, .contact-form {
        max-width: 100%;
    }
}

/* ------------------------------ */
/* CONTACT FOOTER (Hours + Logo) */
/* ------------------------------ */

.contact-footer {
    margin-top: 40px; 
    padding: 40px 0;
    text-align: center;
}

.footer-hours h3 {
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: 600;
}

.footer-hours p {
    margin: 4px 0;
    font-size: 15px;
    color: #444;
}

.footer-logo {
    display: block;
    margin: 25px auto 0 auto;
    width: 160px;        /* smaller logo size */
    height: auto;
    opacity: 0.9;
}

/* Horizontal Line Above Footer */
.footer-divider {
    width: 100%;
    border: none;
    border-top: 1px solid #ccc; /* soft grey */
    margin: 50px 0 30px;        /* spacing above & below */
}

.footer-email {
    color: inherit;       /* Matches your footer text color */
    text-decoration: none;
}

.footer-email:hover {
    opacity: 0.7;
}

.footer-bottom {
    margin-top: 15px;
    font-size: 14px;
    color: #444;     /* subtle, clean text */
}


.site-footer .footer-column p {
    margin: 2px 0;   /* tighter spacing, no empty line */
}

.site-footer .footer-heading {
    margin-bottom: 6px;  /* small space under “Contact” heading */
    font-weight: 600;
}

.footer-logo-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -36px; /* moves the logo up */
}

/* Force spacing above footer titles (Contact, Follow) */
.site-footer .footer-column .footer-heading {
    margin-top: 18px;   /* adjust higher or lower depending on how much space you want */
    margin-bottom: 6px; /* small space below the title */
    font-weight: 600;
}

/* Move the Contact + Follow columns up (without moving the logo column) */
.site-footer .footer-column:not(.footer-logo-col) {
    position: relative;
    top: -10px;   /* adjust this number to move up/down */
}

/* --- OPERATING HOURS BANNER --- */
.contact-hours-banner-wrapper {
    width: 100%;
    margin-top: 80px;
}

/* Full-width thin banner video */
.contact-hours-banner {
    width: 100%;
    height: auto;
    max-height: 180px;   /* maintains thin 5:1 style */
    object-fit: cover;
    display: block;
}

/* Layout for image + hours */
.contact-hours-section {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 5%;
    gap: 60px;
}

/* Arched-top image */
.contact-hours-image {
    width: 500px;
    max-width: 45%;
    object-fit: cover;

    /* Rounded top, flat bottom */
    border-top-left-radius: 240px;
    border-top-right-radius: 240px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;

    overflow: hidden;  /* ensures clean clipping */
}


/* Hours text */
.contact-hours-text h2 {
    font-size: 30px;
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.contact-hours-text p {
    font-size: 15px;
    margin: 6px 0;
}

/* Responsive */
@media (max-width: 900px) {
    .contact-hours-section {
        flex-direction: column;
        text-align: center;
    }

    .contact-hours-image {
        max-width: 80%;
    }
}

.contact-hours-text {
    text-align: center;      /* centers the two lines */
    margin-top: 10px;        /* optional spacing */
    font-size: 16px;         /* your chosen small size */
    line-height: 1.5;
}

/* ===== PAGINATION STYLING ===== */
.pagination {
    width: 100%;
    display: flex;
    justify-content: flex-end;   /* Moves buttons to right side */
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 40px;
}

/* Pagination buttons */
.pagination button {
    background: #b98b5a;                  /* gold theme */
    color: white;
    border: none;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s ease;
}

/* Hover effect */
.pagination button:hover:not(:disabled) {
    background: #a57a4d;    /* darker gold on hover */
}

/* Disabled state */
.pagination button:disabled {
    background: #ccc;
    cursor: default;
    color: #666;
}

/* Page text between buttons */
#pageInfo {
    font-size: 14px;
    font-weight: 500;
    color: #444;
}

/* Increase LEFT + RIGHT spacing only */
/*.event-text {
    padding-left: 70px;
    padding-right: 100px;
}
*/

/* EVEN rows (0-based: 1st, 3rd, 5th…) → text on LEFT side */
.event-row:nth-child(odd) .event-text {
    padding-left: 40px;
    padding-right: 80px;
}

/* ODD rows (0-based: 2nd, 4th, 6th…) → text on RIGHT side */
.event-row:nth-child(even) .event-text {
    padding-left: 120px;
    padding-right: 70px;
}

/* Faint line under Events title */
.events-title-divider {
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.15);
    margin: 0 0 35px 0; /* less space above, keep nice spacing below */
}


.events-title-divider {
    margin-top: -50px !important;
}

/* ======================================================
   RENTAL MODAL — MOVE THUMBNAILS TO THE LEFT SIDE
   ====================================================== */

.modal-left {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 18px;
    width: 100% !important;
}

#modalThumbs,
.modal-thumbs {
    display: flex !important;
    flex-direction: column !important;   /* vertical strip */
    gap: 12px !important;
    width: 80px !important;
    margin-top: 0 !important;
}

#modalThumbs img,
.modal-thumbs img {
    width: 100% !important;
    height: 80px !important;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.2s, border-color 0.2s;
    border: 2px solid transparent;
}

#modalThumbs img:hover,
.modal-thumbs img:hover {
    opacity: 1;
}

#modalThumbs img.active,
.modal-thumbs img.active {
    border-color: var(--accent);
}

#modalMainImage {
    width: 350px !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 10px;
}

/* ============================================
   MOVE THUMBNAILS TO THE LEFT OF MAIN IMAGE
   ============================================ */

.modal-left {
    display: flex !important;
    flex-direction: row-reverse !important;  /* <— thumbs on the left */
    align-items: flex-start;
    gap: 7px;
    width: 100% !important;
}

/* Thumbnails become a vertical strip */
#modalThumbs,
.modal-thumbs {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 80px !important;
    margin-top: 0 !important;
}

#modalThumbs img,
.modal-thumbs img {
    width: 100% !important;
    height: 80px !important;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.2s, border-color 0.2s;
    border: 2px solid transparent;
}

#modalThumbs img:hover,
.modal-thumbs img:hover {
    opacity: 1;
}

#modalThumbs img.active,
.modal-thumbs img.active {
    border-color: var(--accent);
}

/* Main image correctly sized */
#modalMainImage {
    width: 350px !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 10px;
}

/* Shift entire popup content slightly to the left */
.modal-content {
    padding-left: 10px !important;
    padding-right: 30px !important;
}

/* Move thumbnails to the BOTTOM of the image */
.modal-left {
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: flex-end !important;  /* 🔥 this moves thumbs to the bottom */
    gap: 14px !important;
}

.modal-thumbs,
#modalThumbs {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;  /* 🔥 ensures they sit at the bottom */
    gap: 8px !important;
}

/* ============================================
   THUMBNAILS ON RIGHT — MORE LEFT SPACE,
   LESS SPACE BETWEEN THUMBS & TEXT
   ============================================ */

.modal-left {
    display: flex !important;
    flex-direction: row !important;       /* main image left, thumbs right */
    align-items: center !important;     /* thumbs bottom-aligned */
    gap: 30px !important;                 /* 🔥 MORE space on the left of main image */
    width: 100% !important;
}

/* Move thumbnails closer to the text */
.modal-right {
    padding-left: 5px !important;        /* 🔥 reduced space between thumbnails & text */
}

/* Vertical thumbnail strip on the right */
#modalThumbs,
.modal-thumbs {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    gap: 6px !important;                  /* 🔥 slightly tighter spacing between thumbs */
    width: 70px !important;
    margin: 0 !important;
}

/* Thumbnail appearance */
#modalThumbs img,
.modal-thumbs img {
    width: 70px !important;
    height: 70px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    cursor: pointer;
    opacity: 0.8;
    border: 2px solid transparent;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

#modalThumbs img:hover,
.modal-thumbs img:hover {
    opacity: 1;
}

#modalThumbs img.active,
.modal-thumbs img.active {
    border-color: var(--accent);
}

/* Main image with extra left breathing room */
#modalMainImage {
    width: 360px !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 10px;
    margin-left: 40px !important;         /* 🔥 extra left spacing of the whole image */
}

/* ======================================================
   RENTAL MODAL — VERTICALLY CENTER TEXT + ADD BUTTON
====================================================== */

/* LEFT SIDE: main image + thumbnails (unchanged layout) */
.modal-left {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 30px !important;
    width: 100% !important;
}

/* RIGHT SIDE: Vertically centered text + button */
.modal-right {
    width: 55%;
    display: flex !important;
    flex-direction: column;
    justify-content: center !important;    /* 🔥 vertical centering */
    gap: 14px !important;                  /* nice spacing between title/price/description */
    padding-left: 10px !important;         /* reduced spacing from thumbnails */
    padding-right: 40px !important;
}

/* Make the item title look clean */
.modal-right h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
}

/* Price */
.modal-price {
    color: var(--accent);
    font-weight: 600;
    font-size: 18px;
    margin: 0;
}

/* Description */
.modal-description {
    font-size: 14px;
    color: #444;
    line-height: 1.55;
    margin-top: 4px;
}

/* Add to Inquiry Button */
.modal-add-btn {
    margin-top: 10px !important;
    width: 100%;
    padding: 12px;
    background: #d4af37;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.25s ease;
}

.modal-add-btn:hover {
    opacity: 0.85;
}

/* Keep thumbnails vertical on the right */
#modalThumbs,
.modal-thumbs {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;  /* 🔥 center thumbnails vertically */
    gap: 8px !important;
    width: 70px !important;
    margin: 0 !important;
}

/* Thumbnail styling */
#modalThumbs img,
.modal-thumbs img {
    width: 70px !important;
    height: 70px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    cursor: pointer;
    opacity: 0.8;
    border: 2px solid transparent;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

#modalThumbs img:hover,
.modal-thumbs img:hover {
    opacity: 1;
}

#modalThumbs img.active,
.modal-thumbs img.active {
    border-color: var(--accent);
}

/* Main image */
#modalMainImage {
    width: 360px !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 10px;
}

.modal-right > *:first-child {
    margin-top: 0 !important;
}

/* Reduce space between thumbnails and text in rental popup */
.modal-content {
    gap: 24px !important;      /* try 18–24px depending on how tight you want it */
    padding-left: 40px;        /* optional: you can also lower this if needed */
    padding-right: 40px;
}

.inquiry-empty {
    color: #777 !important;   /* softer grey */
}

/* HERO TEXT — FORCE WHITE */
.hero-kicker,
.hero-home h1,
.hero-subtitle {
    color: #ffffff !important;
}

/* Also ensure subtitle has full opacity */
.hero-subtitle {
    opacity: 1 !important;
}

/* Default navbar text for all pages */
.navbar .logo,
.navbar .nav-links a {
    color: #666 !important;       /* BLACK for all non-home pages */
    text-shadow: none !important;
}

/* Homepage navbar text (overwrite to white) */
.home-page .navbar .logo,
.home-page .navbar .nav-links a {
    color: white !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
}

.nav-logo {
    height: 42px;
    width: auto;
    display: block;
}


/* Full-width gold divider under navbar (non-home pages) */
.nav-divider {
    width: 100%;
    height: 2px;
    background: var(--accent); /* gold */
    margin-top: 10px;  /* adjust spacing if needed */
}

/* Gold line under navbar on non-home pages */
body:not(.home-page) .navbar {
    position: relative !important;
    border-bottom: 2px solid var(--accent) !important; /* gold line */
    padding-bottom: 12px !important; /* spacing so tabs don't touch the line */
}

.home-page .navbar {
    position: absolute !important;
    border-bottom: none !important;
}

.events-hero {
    margin-top: -10px !important;
}

/* Container that matches page-title alignment */
.page-title-block {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;  /* EXACT SAME padding as page-title */
    text-align: center;  /* keeps the title centered */
}

/* Tagline aligned with left edge of the title’s text box */
.page-title-block .photo-subtext {
    text-align: left;
    margin-top: -10px;
    margin-bottom: 30px;
    font-size: 15px;
}

/* Left-align only the Photography page title */
body.photography-page .page-title {
    text-align: left !important;
    margin-left: 20px !important; /* aligns with padding of other pages */
    margin-right: 0 !important;
}

.page-title-block {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}

.photo-subtext {
    text-align: left;
    margin-top: -10px;
    margin-bottom: 30px;
    font-size: 15px;
}

/* Align tagline left edge to photography title left edge */
.photography-page .photo-subtext {
    padding-left: 20px !important;  /* matches .page-title padding */
}

.photography-page .page-title-block {
    padding-left: 0 !important;
}

/* Photography page header container — matches site layout */
.photo-header-block {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 5px; /* SAME as other page sections */
}

/* Left-align the title properly */
.photography-title {
    text-align: left !important;
    margin: 40px 0 10px 0 !important; /* removes the auto-centering margins */
    padding: 0 !important;
}

/* Line up the tagline exactly under the title */
.photo-subtext {
    text-align: left;
    margin-top: 0;
    margin-bottom: 30px;
    padding: 0 !important; /* ensures no extra indent */
}

/* -------------------------------------------------
   NAVBAR — MOBILE RESPONSIVE
--------------------------------------------------*/

/* Hide toggle button on desktop */
.nav-toggle {
    display: none;
    font-size: 28px;
    background: none;
    border: none;
    cursor: pointer;
    color: #000; /* black for non-home pages */
}

/* Mobile layout */
@media (max-width: 1170px) {

    /* Show hamburger */
    .nav-toggle {
        display: block;
        position: absolute;
        right: 20px;
        top: 18px;
        z-index: 2000;
    }

    /* Stack nav vertically */
    .nav-links {
        display: none;
        position: absolute;
        top: 70px;
        right: 0;
        width: 100%;
        padding: 20px 0;
        flex-direction: column;
        gap: 20px;
        text-align: center;

        /* TRANSPARENT BACKGROUND WITH BLUR */
        background: rgba(0, 0, 0, 0.8);   /* semi-transparent white */
        backdrop-filter: blur(10px);            /* beautiful glass effect */

        border-bottom: 2px solid var(--accent);
        z-index: 9999;
    }

    .nav-links.show {
        display: flex;       /* show when toggled */
    }

    .nav-links a {
        color: #000 !important;
        font-size: 20px;
    }

    /* Homepage white logo only: keep links white if needed */
    .home-page .nav-links a {
        color: #000 !important; /* You can change this if you prefer white links */
    }
}

/* Default hamburger color (non-home pages) */
.nav-toggle {
    color: #000 !important;  /* black */
}

/* Homepage hamburger color */
.home-page .nav-toggle {
    color: #fff !important;  /* white */
}

/* Fixed header ONLY on non-home pages */
body:not(.home-page) header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 5000;
}

/* Push content down so it doesn't hide under the fixed header */
body:not(.home-page) {
    padding-top: 90px;  /* tweak this if header is taller/shorter */
}

/* FORCE non-home navbar to be solid */
body:not(.home-page) header,
body:not(.home-page) .navbar {
    background: #ffffff !important;   /* solid white */
    backdrop-filter: none !important; /* remove any blur */
    -webkit-backdrop-filter: none !important;
}

/* Keep homepage transparent */
.home-page header,
.home-page .navbar {
    background: transparent !important;
}

/* ===== MOBILE FIX FOR EVENTS PAGE ===== */
@media (max-width: 900px) {

    /* Stack vertically: IMAGE on top, TEXT under */
    .event-row {
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px;
        text-align: center; /* optional */
    }

    /* Image full width */
    .event-carousel {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 3/2 !important;
    }

    /* Text block full width, below the image */
    .event-text {
        width: 100% !important;
        padding: 0 10px !important;
        text-align: left; /* if you want left-aligned text */
    }

    /* Make sure images resize properly */
    .event-carousel img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}

/* MOBILE FIX — Make event images start closer to the left */
@media (max-width: 900px) {

    .event-row {
        align-items: flex-start !important;  /* instead of center */
        text-align: left !important;
    }

    .event-carousel {
        width: 100% !important;
        margin-left: 0 !important;  /* remove centering */
        padding-left: 0 !important;
    }

    .event-carousel img {
        width: 100% !important;
        object-fit: cover;
    }

    .event-text {
        width: 100% !important;
        padding-left: 0 !important;  /* aligns text and image */
        padding-right: 0 !important;
    }
}

/* Match Photography + Rentals page titles to Events title style */
.photography-page .page-title,
.rentals-page .page-title {
    font-size: 37px !important;
    font-weight: 700 !important;
    color: var(--accent) !important; /* gold color */
}

/* Make Photography + Rentals titles use the same font as Events titles */
.photography-page .page-title,
.rentals-page .page-title {
    font-family: "Playfair Display", serif !important; /* or your events font */
    font-size: 37px !important;
    font-weight: 700 !important;
    color: var(--accent) !important; /* gold */
}

/* Keep navbar height fixed */
.navbar .logo {
    display: flex;
    align-items: center;   /* vertically center logo */
    height: 42px;          /* same as original navbar height */
}

/* Enlarge homepage logo WITHOUT enlarging navbar */
.home-page .nav-logo {
    padding-top: 10px !important;
    height: 75px !important;     /* bigger logo */
    transform: translateY(4px);  /* gently shift down so it's visually centered */
}

/* ===============================
   EVENTS PAGE — GOLD BORDER BANNER
   =============================== */

.events-hero {
    max-width: var(--max-width);
    margin: 30px auto 40px !important;
    padding: 30px 30px;

    background: #ffffff !important;   /* white interior */
    border: 2px solid var(--accent);  /* gold border */
    border-radius: 12px;              /* optional for elegant rounded look */

    box-shadow: 0 4px 14px rgba(0,0,0,0.06); /* subtle lift effect */
}

/* Add spacing around Events hero box on narrow screens */
@media (max-width: 600px) {
    .events-hero {
        margin-left: 15px !important;
        margin-right: 15px !important;
    }
}

/* Fix right-side overflow for Events hero on mobile */
@media (max-width: 600px) {
    .events-hero {
        width: calc(100% - 30px) !important;  /* ensures equal left/right spacing */
        margin-left: 15px !important;
        margin-right: 15px !important;
        box-sizing: border-box !important;
    }
}


/* ----------------------------------------------
   NON-HOMEPAGE NAVBAR: BLACK BAR + GOLD TEXT
----------------------------------------------- */

/* Black navbar background */
body:not(.home-page) .navbar {
    background: #000 !important;   /* solid black */
}

/* Gold navigation text */
body:not(.home-page) .navbar a {
    /*color: var(--accent) !important;*/   /* your gold color */
    color: white !important;
}

/* Gold hamburger icon */
body:not(.home-page) .nav-toggle {
    color: var(--accent) !important;
}

/* Dropdown menu text also gold */
@media (max-width: 800px) {
    body:not(.home-page) .nav-links a {
        color: var(--accent) !important;
    }
}

/* ---------------------------------------------
   NON-HOMEPAGE PAGES — VERY FAINT GOLD BACKGROUND
---------------------------------------------- */

/*body:not(.home-page) {
    background: rgba(230, 192, 104, 0.06); 
}*/

/* Remove all event dividers */
.event-divider,
.event-row::after,
.event-row:not(:last-child)::after {
    display: none !important;
}

/* Center event text only on narrow screens */
@media (max-width: 700px) {
    .event-text {
        text-align: center !important;
        align-items: center !important;
    }

    /* Also center the title inside the block */
    .event-text h2 {
        text-align: center !important;
    }

    /* Make paragraph text centered */
    .event-text p {
        text-align: center !important;
    }
}

/* REMOVE ALL LINES BETWEEN EVENTS */
.event-row,
.event-item,
.event-text,
.event-container,
.event-block {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
}

.event-row::before,
.event-row::after,
.event-item::before,
.event-item::after {
    content: none !important;
    display: none !important;
}

/* Make event photos stretch edge-to-edge */
.event-carousel img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    object-fit: cover !important;
}

/* Remove rounding on the image container itself */
.event-carousel {
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}

/* Reduce spacing between event sections */
.event-row {
    margin: 0px 0 !important;   /* adjust to your preference */
    padding: 0 !important;
}

/* Remove extra spacing inside containers */
.event-carousel,
.event-text {
    margin: 0 !important;
    padding: 0 !important;
}

/* Desktop layout: enforce side-by-side and allow switching */
@media (min-width: 900px) {
    .event-row {
        display: flex !important;
        flex-direction: row !important;   /* JavaScript determines order */
        gap: 0px;                        /* optional spacing between image/text */
        align-items: center;
    }

    /* Let both sides size properly */
    .event-text,
    .event-carousel {
        flex: 1 1 50%;
    }
}

/* Increase left & right padding inside each event text block */
.event-text {
    padding-left: 70px !important;
    padding-right: 70px !important;
}

/* Extra left spacing ONLY for text blocks on the RIGHT side */
.event-row:nth-child(even) .event-text {
    padding-left: 90px !important;  /* adjust value as desired */
}

/* EVENTS HERO – tighten spacing between title block and paragraph on mobile */
@media (max-width: 700px) {
    .events-hero-inner {
        gap: 12px !important;      /* was much larger, this shrinks the space */
    }

    .events-hero-right {
        margin-top: 0 !important;  /* just in case any margin is pushing it down */
    }
}

/* MOBILE: force every event section to display PHOTO first, TEXT second */
@media (max-width: 800px) {
    .event-row {
        flex-direction: column !important;
    }

    .event-row .event-carousel {
        order: 1 !important;   /* photo first */
        width: 100% !important;
        margin: 0;
    }

    .event-row .event-text {
        order: 2 !important;   /* text second */
        text-align: center;     /* optional: center on mobile */
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* MOBILE FIX: center even rows' text spacing */
@media (max-width: 800px) {
    .event-row:nth-child(even) .event-text {
        padding-left: 20px !important; 
        padding-right: 20px !important;
        text-align: center !important;
    }
}

/* ==========================================
   CONSISTENT STACKING ORDER ON MEDIUM SCREENS
   ========================================== */
@media (max-width: 1100px) {

    /* Stack vertically */
    .event-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        gap: 20px !important;
    }

    /* Photo always first */
    .event-row .event-carousel {
        order: 1 !important;
        width: 100% !important;
    }

    /* Text always second */
    .event-row .event-text {
        order: 2 !important;
        width: 100% !important;
        padding: 0 20px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        text-align: center !important;
    }

    .event-text {
        text-align: center !important;
        align-items: center !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .event-text h2,
    .event-text p {
        text-align: center !important;
    }

    .event-row .event-text h2,
    .event-row .event-text p {
        text-align: center !important;
    }
}


/* ============================================
   TRUE FINAL FIX — CENTER TEXT WHEN STACKED
   ============================================ */
@media (max-width: 1100px) {

    /* Reset all desktop paddings — these were blocking everything */
    .event-text,
    .event-row .event-text,
    .event-row:nth-child(even) .event-text,
    .event-row:nth-child(odd) .event-text {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    .event-text h2,
    .event-text p {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
    }
}

/* Base card style */
.service-card {
    position: relative;
    height: 260px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    color: white;
    font-family: "Arial Rounded MT", sans-serif;

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

/* Background images */
.wwd-photo {
    background: url("../images/WWD_Photography.JPG") center/cover no-repeat;
}
.wwd-events {
    background: url("../images/WWD_Events.JPG") center/cover no-repeat;
}
.wwd-rentals {
    background: url("../images/WWD_Rentals.JPG") center/cover no-repeat;
}

/* Text initially hidden */
.service-card h3,
.service-card p {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    z-index: 2;
    color: #000; /* black text over white overlay */
}

/* White translucent overlay (hidden initially) */
.service-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.82); 
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 1;
}

/* Hover effects */
.service-card:hover::before {
    opacity: 1;
}

.service-card:hover h3,
.service-card:hover p {
    opacity: 1;
    transform: translateY(0);
}

.service-card:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 20px rgba(0,0,0,0.20);
}

/* ============================================
   WHAT WE DO — PREMIUM GOLD HOVER CARDS
============================================ */

/* =====================================
   WHAT WE DO — FINAL WORKING VERSION
===================================== */

.wwd-card {
    position: relative;
    display: block;

    aspect-ratio: 4/3;              /* landscape */
    flex-shrink: 0;
    width: 100%;
    border-radius: 0px;
    overflow: hidden;

    /*border: 3px solid var(--accent);*/

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

    cursor: pointer;
    transition: transform .3s ease, box-shadow .3s ease;
}

.wwd-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.18);
}

/* Overlay shown on hover */
.wwd-overlay {
    position: absolute;
    inset: 0;

    /*background: rgba(255,255,255,0.60);*/
    background: rgba(0,0,0,0.60);
    backdrop-filter: blur(4px);

    opacity: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 30px;
    text-align: center;

    transition: opacity .35s ease;
}

.wwd-card:hover .wwd-overlay {
    opacity: 1;
}

/* Text inside overlay */
.wwd-overlay h3 {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 12px;
    color: white;
}

.wwd-overlay p {
    font-size: 16px;
    color: white;
    margin: 0;
}

/* HERO SECTION */
.hero {
    position: relative;
    width: 100%;
    height: 100vh; /* Increase height */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('../images/your_hero_image.jpg') center/cover no-repeat;
    z-index: -1;
    filter: brightness(100%);
}

/* HERO TEXT */
.hero-title {
    font-family: 'Playfair Display', serif;
    font-size: 64px;         /* adjust as needed */
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 12px;
    color: #ffffff;
}

.hero-subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 300;
    color: #ffffff;
    opacity: 0.95;
    margin-top: 10px;
}

.section-title {
    font-family: 'Poppins', sans-serif;
    font-size: 38px;
    font-weight: 300;        /* light weight like screenshot */
    letter-spacing: 12px;    /* same wide spacing */
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 50px;
}

/* ============================================
   WHAT WE DO — GOLD BORDER + RESPONSIVE CARDS
============================================ */

/* Make the grid adjust responsively */
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* bigger cards */
    gap: 30px;
    margin-top: 40px;
}

/* Add gold border to each card */
.wwd-card {
    /*border: 3px solid var(--accent); /* gold border */
    border-radius: 14px;
    overflow: hidden;
    position: relative;

    aspect-ratio: 4/3; /* same shape as your images */
    transition: transform .3s ease, box-shadow .3s ease;
}

/* Hover effect */
.wwd-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.18);
}

/* Ensure background image fills frame */
.wwd-card {
    background-size: cover !important;
    background-position: center !important;
}

/* Overlay stays the same */
.wwd-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    opacity: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity .35s ease;
}

.wwd-card:hover .wwd-overlay {
    opacity: 1;
}

/* Text inside overlay */
.wwd-overlay h3 {
    font-size: 26px;
    color: white;
    margin: 0 0 10px;
}

.wwd-overlay p {
    font-size: 16px;
    color: white;
}


/* 📱 Stack on small screens */
@media (max-width: 800px) {
    .service-grid {
        grid-template-columns: 1fr !important;
    }

    .wwd-card {
        aspect-ratio: 4/3;
        width: 100%;
    }
}

/* MAKE WHAT-WE-DO CARDS BIGGER WITH 4:3 RATIO */
.wwd-card {
    aspect-ratio: 4 / 3 !important;    /* landscape */
    width: 100%;
    height: auto;
    border-radius: 14px;
    background-size: cover !important;
    background-position: center !important;
}

/* WIDER WHAT-WE-DO SECTION */
.what-we-do {
    max-width: 1400px !important; /* wider than before */
    margin: 60px auto;
    padding: 0 10px !important;   /* reduce side padding */
}

/* WIDER GRID — BIGGER CARDS */
.service-grid {
    grid-template-columns: repeat(3, 1fr) !important; 
    gap: 20px !important;         /* smaller gaps = bigger cards */
}

@media (max-width: 900px) {
    .service-grid {
        grid-template-columns: 1fr !important;
    }

    .what-we-do {
        padding: 0 20px !important; /* more room for mobile */
    }
}

/* ============================================
   WHAT WE DO — FINAL SPACING + BIGGER CARDS
============================================ */

/* Reduce side spacing of the entire section */
.what-we-do {
    max-width: 1700px !important;  /* much wider than before */
    margin: 60px auto !important;
    padding-left: 10 !important;
    padding-right: 10 !important;
}

/* Make grid fill more horizontally */
.service-grid {
    width: 100% !important;
    max-width: 1700px !important;
    margin: 0 auto !important;

    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important; /* smaller gaps = bigger cards */
}

/* Force cards to expand fully */
.wwd-card {
    aspect-ratio: 4 / 3 !important;
    width: 100% !important;
    height: auto !important;
    display: block;
    border-radius: 14px;
    background-size: cover !important;
    background-position: center !important;
    
}

/* Centered label under each What We Do card */
.wwd-item {
    text-align: center !important;
}

.wwd-label {
    margin-top: 10px;
    font-size: 20px;
    font-family: "Arial Rounded MT", "Poppins", sans-serif;
    font-weight: 600;
    color: #333;
}

/* Reduce bottom spacing under WHAT WE DO section */
.what-we-do {
    margin-bottom: 20px !important;
    padding-bottom: 0 !important;
}

/* Reduce spacing under each label */
.wwd-label {
    margin-bottom: -90px !important;
}

/* Pull the reviews banner upward */
.reviews {
    margin-top: 10px !important;
    padding-top: 0 !important;
}

@media (max-width: 900px) {
    .service-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .wwd-item {
        margin-bottom: 90px; /* ensures room for the label */
    }

    .what-we-do {
        padding: 0 20px !important;
    }
}

/* WHAT WE DO — ensure item + label stay together */
.service-grid {
    display: grid;
}

.service-grid > .wwd-item {
    width: 100%;
}


/* ================================
   STARLIT CTA SECTION (Home Page)
================================ */

.starlit-cta {
    width: 100%;
    background: var(--accent);       /* gold */
    border-radius: 20px;
    padding: 60px 40px;
    margin: 80px auto 40px;
    max-width: 700px;
}

.cta-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.cta-image img {
    width: 260px;
    height: auto;
    object-fit: contain;
}

.cta-text-block {
    flex: 1;
}

/* Heading — matches “Talk to your wedding planner” */
.cta-title {
    font-family: "Poppins", sans-serif;
    font-size: 32px;
    font-weight: 600;
    color: white;
    margin: 0 0 10px 0;
    letter-spacing: 1px;
}

/* Subtitle — italic and lighter */
.cta-subtitle {
    font-family: "Poppins", sans-serif;
    font-style: italic;
    font-weight: 300;
    font-size: 18px;
    color: #fff;
    margin: 10px 0 30px;
}

.cta-button {
    display: inline-block;
    padding: 14px 28px;
    border: 2px solid white;
    color: white;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    border-radius: 8px;
    transition: 0.25s ease;
}

.cta-button:hover {
    background: white;
    color: var(--accent);
}

/* Responsive */
@media (max-width: 800px) {
    .cta-content {
        flex-direction: column;
        text-align: center;
    }

    .cta-title {
        font-size: 36px;
    }

    .cta-subtitle {
        font-size: 18px;
    }

    .cta-button {
        font-size: 16px;
    }
}


/* ======================================
   WHY CHOOSE STARLIT SECTION
====================================== */

.why-starlit {
    max-width: 1300px;
    margin: 100px auto;
    padding: 0 20px;
    text-align: center;
}

.why-title {
    font-family: "Poppins", sans-serif;
    font-size: 42px;
    font-weight: 600;
    letter-spacing: 6px;
    margin-bottom: 20px;
}

.why-subtext {
    max-width: 800px;
    margin: 0 auto 60px;
    font-size: 18px;
    color: #444;
    line-height: 1.6;
}

/* Grid */
.why-grid {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
}

/* Item */
.why-item {
    width: 200px;
    text-align: center;
}

/* Gradient Circle */
.why-icon-circle {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    margin: 0 auto 20px;

    background: radial-gradient(
        circle,
        rgba(230,192,104,0.35) 0%,
        rgba(230,192,104,0.15) 60%,
        rgba(230,192,104,0.10) 100%
    );

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

.why-icon-circle img {
    width: 70px;
    height: auto;
}

.why-label {
    margin-top: 10px;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 1px;
}

/* Responsive */
@media (max-width: 900px) {
    .why-grid {
        justify-content: center;
        gap: 40px;
    }
}

/* ====================================================
   MOBILE LAYOUT FOR WHAT WE DO (IMAGE LEFT, TEXT RIGHT)
==================================================== */

@media (max-width: 750px) {

    /* Turn the grid into vertical rows */
    .service-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
    }

    /* Form each item into a horizontal card */
    .wwd-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 16px !important;
        width: 100%;
    }

    /* Image on the LEFT (half screen) */
    .wwd-card {
        width: 50% !important;
        aspect-ratio: 4 / 3 !important;
        border-radius: 12px;
        overflow: hidden;
    }

    /* DISABLE OVERLAY COMPLETELY on mobile */
    .wwd-overlay {
        display: none !important;
    }

    /* Title + description on RIGHT side */
    .wwd-label {
        margin: 0;
        padding: 0;
        font-size: 20px !important;
        font-weight: 600;
        text-align: left !important;
        width: 100%;
        color: #000 !important;
    }

    /* Mobile description (new element) */
    .wwd-mobile-desc {
        display: block !important;
        margin-top: 6px;
        font-size: 14px;
        color: #555;
        text-align: left !important;
        width: 100%;
        line-height: 1.45;
    }

    /* Wrap both texts into the right half */
    .wwd-item > .wwd-label,
    .wwd-item > .wwd-mobile-desc {
        width: 50% !important;
    }
}

@media (max-width: 750px) {
    .wwd-label {
        display: none !important;
    }
}

@media (max-width: 750px) {
    .wwd-overlay {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
}

@media (max-width: 750px) {
    .wwd-mobile-desc {
        display: block !important;
        width: 50% !important;
        font-size: 14px;
        color: #444;
        line-height: 1.5;
        margin: 0;
        padding-right: 10px;
    }
}

/* ==========================================================
   FINAL FIX — PROPER MOBILE ROW LAYOUT FOR WHAT WE DO
   ========================================================== */
@media (max-width: 750px) {

    /* 1. Turn grid into vertical stack */
    .service-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
        width: 100% !important;
    }

    /* 2. Each item becomes a row */
    .wwd-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 16px !important;
        width: 100% !important;
    }

    /* 3. Image on left */
    .wwd-card {
        width: 50% !important;
        height: auto !important;
        aspect-ratio: unset !important;
        border-radius: 12px !important;
        background-size: cover !important;
        background-position: center !important;
    }

    /* 4. Completely disable the overlay */
    .wwd-overlay {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        height: 0 !important;
    }

    /* 5. Hide desktop label on mobile */
    .wwd-label {
        display: none !important;
    }

    /* 6. Mobile description becomes visible */
    .wwd-mobile-desc {
        display: block !important;
        width: 50% !important;
        font-size: 15px;
        color: #222;
        margin: 0;
        line-height: 1.45;
        padding-right: 10px;
    }
}

@media (max-width: 1000px) {

    /* Force the card to have visible height */
    .wwd-card {
        width: 60% !important;
        aspect-ratio: 4 / 3 !important;
        /*height: 160px !important; /* you can adjust to 140 / 180 / etc */
        border-radius: 12px !important;

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

        display: block !important;
        flex-shrink: 0 !important; /* don't let it collapse */
    }
}

@media (max-width: 750px) {

    /* Force the card to have visible height */
    .wwd-card {
        width: 50% !important;
        aspect-ratio: 4 / 3 !important;
        /*height: 160px !important; /* you can adjust to 140 / 180 / etc */
        border-radius: 12px !important;

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

        display: block !important;
        flex-shrink: 0 !important; /* don't let it collapse */
    }
}

.wwd-item {
    text-align: center;
    width: 100%;
}

.wwd-card {
    display: block;
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 20px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

.wwd-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.wwd-description {
    margin-top: 14px;
    font-size: 16px;
    color: #444;
}

.wwd-label {
    margin-top: 4px;
    font-size: 20px;
    font-weight: 600;
}

/* Fix titles disappearing on narrow screens */
@media (max-width: 1000px) {
    .wwd-label {
        display: block;
    }

    .service-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
}

/* MOBILE TEXT POSITIONING (only shows on narrow screens) */
.wwd-mobile-info {
    display: none;
    padding-left: 15px;
}

.wwd-mobile-info h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 6px;
}

.wwd-mobile-info p {
    font-size: 15px;
    margin: 0;
    color: #555;
}

/* Desktop layout — nothing changes! */
@media (min-width: 901px) {
    .wwd-mobile-info {
        display: none;
    }
}

/* Mobile layout — show text beside card */
@media (max-width: 1000px) {
    .service-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    .wwd-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 20px;
    }

    .wwd-card {
        width: 50%;
        aspect-ratio: 4/3;
        border-radius: 20px;
    }

    .wwd-mobile-info {
        display: block;
        width: 45%;
    }

    /* Hide overlay on small screens (so it doesn't cover the image) */
    .wwd-overlay {
        display: none;
    }
}


.intro .section-title {
    margin-bottom: 15px !important;
}

.intro .section-text {
    margin-top: 10px !important;
}

/* MOBILE SPACING FIXES */
@media (max-width: 1000px) {

    /* Reduce vertical spacing between each card row */
    .service-grid {
        gap: 20px !important;   /* was 40px */
    }

    /* Reduce spacing INSIDE each row (between image + text) */
    .wwd-item {
        gap: 12px !important;   /* was 20px */
        margin-bottom: 10px !important;
    }

    /* Reduce spacing under each image (if any extra exists) */
    .wwd-card {
        margin-bottom: 0 !important;
    }

    /* Reduce spacing beneath the *entire* What We Do section */
    .what-we-do {
        padding-bottom: 20px !important;  /* adjust as needed */
        margin-bottom: 0 !important;
    }
}

 /* Mobile-only: tighten gap between WHAT WE DO and REVIEWS */
@media (max-width: 1000px) {

  /* Reduce space under WHAT WE DO */
  .home-section.what-we-do {
    padding-bottom: -10px !important;
    margin-bottom: 0 !important;
  }

  /* Reduce space before the reviews background starts */
  .reviews.fullwidth-reviews {
    padding-top: 10px !important;
    margin-top: 0 !important;
  }

  /* Override the inline margin-top:90px on "Kind Words" */
  .reviews.fullwidth-reviews h2.section-title {
    margin-top: -10px !important;
  }
}

@media (max-width: 1000px) {
    .wwd-mobile-info {
        padding-left: 25px;     /* already exists */
        padding-right: 25px;    /* add this */
    }
}

/* REVIEW TEXT RESPONSIVE SIZING */
@media (max-width: 1000px) {
    .review-text {
        font-size: 22px !important;   /* slightly smaller */
        line-height: 1.35;
        padding: 0 40px;              /* margins left/right */
    }

    .review-name {
        font-size: 18px !important;
        padding: 0 40px;
    }
}

@media (max-width: 600px) {
    .review-text {
        font-size: 18px !important;   /* smaller for phones */
        padding: 0 55px;
    }
    .review-name {
        font-size: 16px !important;
    }
}

@media (max-width: 420px) {
    .review-text {
        font-size: 16px !important;   /* smallest size */
        padding: 0 20px;
    }
    .review-name {
        font-size: 14px !important;
    }
}

/* WHY CHOOSE STARLIT — responsive grid */
.why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 30px;
    justify-items: center;
}

@media (max-width: 1000px) {
    .why-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px; /* Always >= 10px */
    justify-items: center;
}

@media (max-width: 900px) {
    .why-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px; /* Never below 10px */
        justify-items: center;
    }
}

/* Base: 5 per row, centered */
.why-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    justify-items: center;
    gap: clamp(10px, 3vw, 30px); /* responsive spacing, never less than 10px */
    padding: 0 20px; /* ensures icons never touch window edges */
}


/* Medium screens: auto-wrap into 3 + 2 */
@media (max-width: 900px) {
    .why-grid {
        grid-template-columns: repeat(3, minmax(120px, 1fr));
    }
}

/* FINAL OVERRIDE — center WHY icons in 2 rows */

/* Use flexbox instead of grid for Why grid */
.why-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start;
    gap: clamp(10px, 3vw, 30px); /* spacing shrinks but never below 10px */
    padding: 0 20px;             /* margin from window edges */
}

/* Each icon block gets a reasonable width */
.why-item {
    flex: 0 1 180px;   /* try 160–200px if you want to tweak */
    text-align: center;
}


/* ------------------------------------------
WHY CHOOSE STARLIT — ALWAYS 3 + 2 LAYOUT
Icons shrink automatically with window size
------------------------------------------- */

.why-grid {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;   /* center both rows */
    gap: clamp(10px, 3vw, 20px); /* space shrinks but never <10px */
    padding: 0 20px;            /* icons never touch edges */
}

/* Every icon block adapts automatically */
.why-item {
    flex: 1 1 calc(33.33% - clamp(10px, 3vw, 40px));
    max-width: 260px;   /* so they don't get huge on large screens */
    min-width: 140px;   /* prevents wrapping into 4 per row */
    text-align: center;
}

/* The gold circle scales responsively */
.why-icon-circle {
    width: clamp(70px, 15vw, 150px);
    height: clamp(70px, 15vw, 150px);
    border-radius: 50%;
    margin: 0 auto 10px;

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

    background: radial-gradient(
        circle,
        rgba(230,192,104,0.35) 0%,
        rgba(230,192,104,0.15) 60%,
        rgba(230,192,104,0.10) 100%
    );
}

/* Icon inside circle also scales */
.why-icon-circle img {
    width: clamp(30px, 7vw, 70px);
    height: auto;
}

/* Label shrinks gently */
.why-label {
    font-size: clamp(12px, 2.2vw, 16px);
    font-weight: 600;
    letter-spacing: 1px;
    margin-top: 8px;
}

/* WHY CHOOSE STARLIT — Responsive Typography */
@media (max-width: 1200px) {
    .why-title {
        font-size: 36px;
    }
    .why-subtext {
        font-size: 17px;
    }
}

@media (max-width: 900px) {
    .why-title {
        font-size: 32px;
    }
    .why-subtext {
        font-size: 16px;
        max-width: 90%;
    }
}

@media (max-width: 700px) {
    .why-title {
        font-size: 28px;
        letter-spacing: 3px;
    }
    .why-subtext {
        font-size: 15px;
        line-height: 1.45;
    }
}

@media (max-width: 500px) {
    .why-title {
        font-size: 24px;
        letter-spacing: 2px;
    }
    .why-subtext {
        font-size: 14px;
    }
}

/* CTA — Responsive scaling and side margins */
@media (max-width: 1250px) {
    .starlit-cta {
        padding: 50px 30px;
    }
    .cta-title {
        font-size: 30px;
    }
    .cta-subtitle {
        font-size: 16px;
    }
}

@media (max-width: 900px) {
    .starlit-cta {
        padding: 40px 25px;
        margin-left: 20px;
        margin-right: 20px; /* mobile left/right margin */
    }
    .cta-title {
        font-size: 23px;
    }
    .cta-subtitle {
        font-size: 14px;
    }
    .cta-content {
        flex-direction: column;
        text-align: center;
        gap: 24px;
    }
    .cta-image img {
        width: 200px;
    }
}

@media (max-width: 600px) {
    .starlit-cta {
        padding: 32px 20px;
        margin-left: 16px;
        margin-right: 16px;
    }
    .cta-title {
        font-size: 20px;
    }
    .cta-subtitle {
        font-size: 12px;
    }
    .cta-image img {
        width: 160px;
    }
}

@media (max-width: 450px) {
    .starlit-cta {
        padding: 28px 16px;
        margin-left: 14px;
        margin-right: 14px;
    }
    .cta-title {
        font-size: 24px;
    }
    .cta-subtitle {
        font-size: 15px;
    }
    .cta-image img {
        width: 140px;
    }
}

/* Ensure CTA card always has padding from both sides */
.starlit-cta {
    margin-left: auto;
    margin-right: auto;
}

/* On smaller screens, enforce side-space */
@media (max-width: 900px) {
    .starlit-cta {
        width: calc(100% - 40px); /* adds 20px left + 20px right space */
        max-width: none !important;
    }
}

@media (max-width: 600px) {
    .starlit-cta {
        width: calc(100% - 32px); /* 16px left + 16px right */
    }
}

@media (max-width: 450px) {
    .starlit-cta {
        width: calc(100% - 28px); /* 14px left + 14px right */
    }
}

/* Keep CTA logo and text side-by-side on mobile */
@media (max-width: 900px) {
    .cta-content {
        display: flex !important;
        flex-direction: row !important;   /* <-- FORCE SIDE-BY-SIDE */
        align-items: center !important;
        justify-content: center !important;
        text-align: left !important;
        gap: 20px !important;
    }

    .cta-image {
        flex: 0 0 auto !important;
    }

    .cta-image img {
        width: 160px !important;  /* adjust for smaller screens */
        height: auto !important;
    }

    .cta-text-block {
        flex: 1 !important;
    }
}

/* CTA BUTTON — Responsive sizing */
@media (max-width: 1100px) {
    .cta-button {
        font-size: 17px;
        padding: 12px 26px;
    }
}

@media (max-width: 900px) {
    .cta-button {
        font-size: 16px;
        padding: 12px 22px;
    }
}

@media (max-width: 700px) {
    .cta-button {
        font-size: 15px;
        padding: 10px 20px;
    }
}

@media (max-width: 500px) {
    .cta-button {
        font-size: 14px;
        padding: 10px 18px;
        border-width: 1.5px;
    }
}

@media (max-width: 380px) {
    .cta-button {
        font-size: 13px;
        padding: 8px 16px;
        border-width: 1.5px;
    }
}

/* ==========================================
   CTA CARD — Fully Responsive Shrinking
========================================== */

/* Default (desktop) */
.starlit-cta {
    max-width: 1200px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    transition: all 0.25s ease;
}

/* Large tablet */
@media (max-width: 1100px) {
    .starlit-cta {
        max-width: 900px; /* shrinks proportionately */
        padding: 50px 30px;
    }
}

/* Tablet */
@media (max-width: 900px) {
    .starlit-cta {
        max-width: 750px;
        width: calc(100% - 40px);  /* clean side spacing */
        padding: 40px 28px;
    }
}

/* Mobile */
@media (max-width: 700px) {
    .starlit-cta {
        max-width: 600px;
        width: calc(100% - 36px);
        padding: 32px 22px;
    }
}

/* Small mobile */
@media (max-width: 500px) {
    .starlit-cta {
        max-width: 450px;
        width: calc(100% - 28px);
        padding: 28px 18px;
    }
}

/* Very small screens */
@media (max-width: 380px) {
    .starlit-cta {
        max-width: 340px;
        width: calc(100% - 22px);
        padding: 24px 16px;
    }
}

/* =====================================================
   CTA CARD — FLUID RESPONSIVE WIDTH USING CLAMP()
===================================================== */

.starlit-cta {
    width: clamp(280px, 85vw, 900px); /* fluid scaling */
    margin-left: auto;
    margin-right: auto;
    padding: clamp(20px, 5vw, 50px) clamp(16px, 4vw, 40px);
    border-radius: 25px;
}

/* ==========================================
   CTA — Center logo+text SIDE-BY-SIDE
========================================== */

.cta-content {
    display: flex;
    flex-direction: row;
    align-items: center;        /* vertically center logo + text */
    justify-content: center;    /* horizontally center them together */
    gap: 32px;                  /* spacing between logo + text */
    text-align: left;           /* keeps the text left-aligned */
}

/* Logo sizing */
.cta-image img {
    width: clamp(100px, 20vw, 220px);
    height: auto;
    display: block;
}

/* Text block stays on the right */
.cta-text-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 420px;   /* keeps text from spreading too wide */
}

/* Responsive text scaling */
.cta-title {
    font-size: clamp(16px, 3vw, 28px);
    margin: 0;
}

.cta-subtitle {
    font-size: clamp(12px, 2vw, 18px);
    margin: 6px 0 20px;
}

/* Responsive button sizing */
.cta-button {
    align-self: flex-start; /* keeps button left-aligned under text */
    padding: clamp(8px, 1.2vw, 14px) clamp(14px, 2vw, 28px);
    font-size: clamp(12px, 1.8vw, 15px);
}

.starlit-cta {
    width: clamp(320px, 85vw, 900px);
    margin-left: auto;
    margin-right: auto;
    padding: clamp(24px, 4vw, 48px);
    border-radius: 25px;
}

/* Center the button under the text */
.cta-text-block {
    display: flex;
    margin-top: -10px;
    flex-direction: column;
    align-items: center;     /* centers button + subtitle inside the text block */
    text-align: center;      /* centers the actual text */
}

/* Ensure button is centered */
.cta-button {
    align-self: center !important;
}

/* =====================================
   FOOTER — Responsive single-row layout
===================================== */

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: nowrap;  /* prevents wrapping to next row */
}

/* Let each column shrink gracefully */
.footer-column,
.footer-logo-col {
    flex: 1 1 auto;
    min-width: 0;   /* allows shrinking instead of wrapping */
}

/* Reduce font sizes as the window narrows */
@media (max-width: 1100px) {
    .footer-column p,
    .footer-column a,
    .footer-locations {
        font-size: 15px;
    }
    .footer-heading {
        font-size: 17px;
    }
    .footer-logo {
        max-width: 160px;
    }
}

@media (max-width: 900px) {
    .footer-column p,
    .footer-column a,
    .footer-locations {
        font-size: 14px;
    }
    .footer-heading {
        font-size: 16px;
    }
    .footer-logo {
        max-width: 140px;
    }
}

/* For even narrower screens, compress spacing */
@media (max-width: 800px) {
    .footer-top {
        gap: 12px;
    }
    .footer-logo {
        max-width: 120px;
    }
}

/* Footer Contact Icons - Styled to match socials */
.footer-contact-icons {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: center; /* centers under "Contact" */
    margin-top: 6px;
}

.footer-contact-icons img {
    width: 28px;           /* match social icon size */
    height: 28px;
    object-fit: contain;
    transition: 0.2s ease;
}

.footer-contact-icons a:hover img {
    transform: scale(1.12);
    opacity: 0.85;
}

/* Keeps layout stable on smaller screens */
@media (max-width: 700px) {
    .footer-contact-icons img {
        width: 26px;
        height: 26px;
    }
}

/* Hide the mobile dropdown by default */
.mobile-category-select {
    display: none;
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    font-size: 16px;
    border: 1px solid #ddd;
    margin-bottom: 16px;
}

/* MOBILE MODE */
@media (max-width: 980px) {

    /* Hide the button list */
    .category-list {
        display: none !important;
    }

    /* Show dropdown instead */
    .mobile-category-select {
        display: block !important;
    }
}

/* ======================================================
   ALWAYS TWO ITEMS PER ROW ON MOBILE
====================================================== */
/* ALWAYS TWO ITEMS PER ROW */
@media (max-width: 1250px) {
    .rental-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px !important;
        width: 100%;
        padding: 0 14px;
        box-sizing: border-box;
    }

    .rental-card {
        width: 100% !important;    /* fill the grid column */
        max-width: none !important; /* allow full expansion */
    }
}

@media (max-width: 700px) {
    .rental-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
        width: 100%;
        padding: 0 14px;
        box-sizing: border-box;
    }

    .rental-card {
        width: 100% !important;    /* fill the grid column */
        max-width: none !important; /* allow full expansion */
    }
}


@media (max-width: 480px) {
    .rental-grid {
        gap: 12px !important;
        padding: 0 12px;
    }

    .rental-card {
        width: 100% !important;
        max-width: none !important;
    }
}

/* ===========================
   RENTALS HERO
=========================== */

.hero-rentals {
    position: relative;
    /*min-height: 35vh; /* HALF the height of home hero (70vh) */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    color: #fff;

    background:
        linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.4)),
        url("../images/Rentals_Title_Bar.JPG") center/cover no-repeat;
}

.hero-rentals-inner {
    max-width: 700px;
    padding: 60px 20px;
}

/* Title styling matches home hero */
.hero-rentals .hero-title {
    font-family: "Playfair Display", serif;
    /*font-size: 48px;*/
    font-weight: 600;
    margin: 0;
    letter-spacing: 1px;
    color: #ffffff;
}

/* Responsive scaling */
@media (max-width: 900px) {
    /*.hero-rentals {
        min-height: 30vh;
    }

    /*.hero-rentals .hero-title {
        font-size: 36px;
    }*/
}

@media (max-width: 600px) {
    /*.hero-rentals {
        min-height: 26vh;
    }

    /*.hero-rentals .hero-title {
        font-size: 30px;
    }*/
}

/* ===========================
   RENTALS HERO — FORCE HALF HEIGHT
=========================== */

.rentals-page .hero-rentals {
    height: 15vh !important;        /* FORCE half screen */
    min-height: unset !important;
    max-height: 15vh !important;

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

    color: #fff;

    background:
        linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.4)),
        url("../images/Rentals_Title_Bar.JPG") center/cover no-repeat;
}

/* =========================================
   RENTALS PAGE — NAVBAR OVER HERO IMAGE
========================================= */

/* Make header overlay the hero */
.rentals-page header {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 5000;
}

/* Transparent navbar on hero */
.rentals-page .navbar {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Navbar text + logo visible on image */
.rentals-page .navbar a,
.rentals-page .nav-toggle {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}

/* Ensure logo stays white */
.rentals-page .nav-logo {
    filter: brightness(1.1);
}

/* Remove top offset so hero reaches the top */
.rentals-page {
    padding-top: 0 !important;
}

.hero-rentals {
    position: relative;
    z-index: 1;
}

/* =========================================
   RENTALS PAGE — HERO REPLACES BLACK HEADER
========================================= */

/* Remove fixed black header on Rentals */
body.rentals-page header {
    position: absolute !important;
    background: transparent !important;
}

/* Remove black navbar background */
body.rentals-page .navbar {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* White nav text over image */
body.rentals-page .navbar a,
body.rentals-page .nav-toggle {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}

body.rentals-page {
    padding-top: 0 !important;
}

.hero-rentals {
    margin-top: 0 !important;
}

/* Space below Rentals hero image */
.rentals-page .hero-rentals {
    margin-bottom: 60px; /* ← controls white space under image */
}

/* =========================================
   RENTALS PAGE — MATCH HOME LOGO SIZE
========================================= */

.rentals-page .nav-logo {
    height: 75px !important;      /* same as home */
    padding-top: 10px !important;
    transform: translateY(4px);
}


/* =========================================
   SHARED HERO BASE (Non-home)
========================================= */

.hero-photography,
.hero-events {
    position: relative;
    height: 50vh !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    color: white;
}

.hero-inner {
    padding-top: 120px; /* clears navbar */
}

.hero-title {
    font-family: "Playfair Display", serif;
    font-size: 48px;
    font-weight: 600;
    margin: 0;
    letter-spacing: 1px;
}

.hero-photography {
    background:
        linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.4)),
        url("../images/Photography_Title_Bar.JPG") center/cover no-repeat;
}


.hero-events {
    background:
        linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.4)),
        url("../images/Events_Title_Bar.JPG") center/cover no-repeat;
}

/* =========================================
   HERO PAGES — NAVBAR OVER IMAGE
========================================= */

body.photography-page header,
body.events-page header {
    position: absolute !important;
    top: 0;
    width: 100%;
    z-index: 5000;
}

body.photography-page .navbar,
body.events-page .navbar {
    background: transparent !important;
    border-bottom: none !important;
}

body.photography-page .navbar a,
body.events-page .navbar a,
body.photography-page .nav-toggle,
body.events-page .nav-toggle {
    color: white !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}

/* =========================================
   HERO PAGES — MATCH HOME LOGO SIZE
========================================= */

.photography-page .nav-logo,
.events-page .nav-logo,
.rentals-page .nav-logo {
    height: 75px !important;
    padding-top: 10px !important;
    transform: translateY(4px);
}

.photography-page,
.events-page,
.rentals-page {
    padding-top: 0 !important;
}

/* =====================================================
   PHOTOGRAPHY + EVENTS — MATCH RENTALS HERO (SAFE)
   DOES NOT AFFECT HOME
===================================================== */

/* --- 1. Remove fixed white header ONLY on these pages --- */
body.photography-page header,
body.events-page header {
    position: absolute !important;
    background: transparent !important;
}

/* --- 2. Navbar overlays hero image --- */
body.photography-page .navbar,
body.events-page .navbar {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* --- 3. White nav text on hero image --- */
body.photography-page .navbar a,
body.events-page .navbar a,
body.photography-page .nav-toggle,
body.events-page .nav-toggle {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}

/* --- 4. Remove non-home body offset ONLY here --- */
body.photography-page,
body.events-page {
    padding-top: 0 !important;
}

/* --- 5. FORCE hero height to match Rentals EXACTLY --- */
body.photography-page .hero-photography,
body.events-page .hero-events {
    height: 15vh !important;
    min-height: 15vh !important;
    max-height: 15vh !important;
}

/* --- 6. Neutralize generic .hero ONLY inside these pages --- */
body.photography-page .hero,
body.events-page .hero {
    height: auto !important;
}

/* --- 7. Match spacing under hero --- */
body.photography-page .hero-photography,
body.events-page .hero-events {
    margin-bottom: 60px;
}


/* =====================================================
   CENTER HERO TEXT — EVENTS & PHOTOGRAPHY
===================================================== */

body.events-page .hero-events,
body.photography-page .hero-photography {
    display: flex;
    align-items: center;     /* vertical centering */
    justify-content: center; /* horizontal centering */
    text-align: center;
}

body.events-page .hero-events .hero-inner,
body.photography-page .hero-photography .hero-inner {
    padding: 0 !important;
    margin: 0;
}

/* =========================================
   PHOTOGRAPHY — RIGHT-ALIGN CTA UNDER HERO
========================================= */

.photography-page .photo-header-block {
    margin-top: 0 !important; /* remove gap from image */
    padding-top: 0 !important;
}

.photography-page .photo-subtext {
    margin-top: 0 !important;      /* no spacing from image */
    padding-top: 0 !important;

    text-align: right;             /* RIGHT aligned */
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;

    font-family: "Poppins", sans-serif;
    font-size: 15px;
}

/* Keep gold accent */
.photography-page .photo-subtext a {
    color: var(--accent);
    text-decoration: underline;
    font-weight: 500;
}

/* =========================================
   PHOTOGRAPHY — REDUCE GAP UNDER HERO
========================================= */

/* Reduce space BELOW the title bar image */
.photography-page .hero-photography {
    margin-bottom: 12px !important; /* was ~60px */
}

/* Kill extra spacing ABOVE the CTA text */
.photography-page .photo-header-block {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ensure CTA hugs the image */
.photography-page .photo-subtext {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* =====================================================
   PHOTOGRAPHY — CTA ON TITLE BAR IMAGE (BOTTOM RIGHT)
===================================================== */

.photography-page .hero-photography {
    position: relative;
}

/* Position CTA in bottom-right corner */
.photography-page .hero-cta-bottom {
    position: absolute;
    right: 20px;
    bottom: 10px;

    margin: 0;

    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 400;

    color: #ffffff;
    text-align: right;

    z-index: 2;
}

/* White link with subtle emphasis */
.photography-page .hero-cta-bottom a {
    color: #ffffff;
    text-decoration: underline;
    font-weight: 500;
}


/* =========================================
   PHOTOGRAPHY — SPACE BETWEEN HERO & CARDS
========================================= */

.photography-page .photography-section {
    margin-top: 60px; /* creates visible space below title bar */
}

/* =====================================================
   HERO CTA — BOTTOM RIGHT (Photography + Events)
===================================================== */

.photography-page .hero-cta-bottom,
.events-page .hero-cta-bottom {
    position: absolute;
    right: 20px;
    bottom: 10px;

    margin: 0;

    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 400;

    color: #ffffff;
    text-align: right;
    line-height: 1.6;

    z-index: 2;
}

/* Link styling */
.photography-page .hero-cta-bottom a,
.events-page .hero-cta-bottom a {
    color: #ffffff;
    text-decoration: underline;
    font-weight: 500;
}

/* =====================================================
   RENTALS — MATCH PHOTOGRAPHY TITLE EXACTLY
===================================================== */

/* Use same base sizing */
.rentals-page .hero-title {
    /*font-size: 48px !important;*/
    font-family: "Playfair Display", serif;
    font-weight: 600;
    letter-spacing: 1px;
}

/* Match responsive behavior */
@media (max-width: 900px) {
    .rentals-page .hero-title {
        font-size: 36px !important;
    }
}

@media (max-width: 600px) {
    /*.rentals-page .hero-title {
        font-size: 30px !important;
    }*/
}

/* Unified hero title scaling (Photography, Events, Rentals) */
@media (max-width: 900px) {
    .hero-title {
        font-size: 36px;
    }
}

@media (max-width: 600px) {
    .hero-title {
        font-size: 30px;
    }
}

/* =========================================
   RENTALS — MOBILE FILTER HEADER
========================================= */

@media (max-width: 1000px) {
    .mobile-filter-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 16px;
    }

    .mobile-filter-header .filter-title {
        margin: 0;
        font-size: 20px;
        white-space: nowrap;
    }
}

/* Gold framed mobile category select */
.mobile-category-select {
    border: 2px solid var(--accent);
    border-radius: 10px;
    padding: 6px 12px;

    background-color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    color: #222;
}

/* =========================================
   RENTALS — NUDGE CATEGORY DROPDOWN DOWN
========================================= */

@media (max-width: 980px) {
  .mobile-category-select {
      margin-top: 11px;   /* pushes dropdown slightly lower */
  }

  /* RENTALS: reduce space between Filter section and note */
  .rentals-page .rentals-sidebar {
  padding-bottom: 0 !important;
  }
  .rentals-page .rentals-sidebar .mobile-category-select {
    margin-bottom: 10px !important;
  }

  .rentals-page .rentals-sidebar .category-list {
    margin: 0 !important;
    padding: 0 !important;
  }

  .rentals-page .rentals-sidebar-note {
    margin-top: -25px !important;   /* reduce this if needed */
  }

  /* RENTALS — tighten space between note and search bar */
  .rentals-page .rentals-sidebar-note {
    margin-bottom: 12px !important;
  }

  .rentals-page .filter-bar {
    margin-top: -25px !important;   /* reduce gap above search */
  }

  /* RENTALS — control space under title bar image */
  body.rentals-page .hero-rentals{
    margin-bottom: 20px !important;  /* change 20px -> 0px / 10px / 30px */
  }

  .hero-rentals{
    margin-bottom: 20px !important;
  }

  body.rentals-page .hero-rentals{
    /*height: 22vh !important;*/
    max-height: 22vh !important;
  }




}

/* =========================================
   RENTALS HERO — LOCKED HEIGHT (MATCHES PHOTOGRAPHY & EVENTS)
========================================= */

body.rentals-page .hero-rentals {
    height: 15vh !important;
    min-height: 15vh !important;
    max-height: 15vh !important;

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

    background:
        linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.4)),
        url("../images/Rentals_Title_Bar.JPG") center/cover no-repeat;
}

/* FULLSCREEN MOBILE MENU */
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: #ffffff;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.mobile-menu-overlay.show {
    display: flex;
}

.mobile-menu-close {
    position: absolute;
    top: 24px;
    right: 24px;
    font-size: 28px;
    background: none;
    border: none;
    cursor: pointer;
}

.mobile-menu-links {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.mobile-menu-links li {
    margin: 14px 0;
}

.mobile-menu-links a {
    font-family: "Playfair Display", serif;
    font-size: 22px;
    text-decoration: none;
    color: #222;
}

.mobile-menu-footer {
    position: absolute;
    bottom: 30px;
    display: flex;
    gap: 20px;
}

.mobile-menu-footer img {
    width: 28px;
    height: 28px;
}

/* ================================
   MOBILE MENU FOOTER
================================ */

.mobile-menu-footer {
    position: absolute;
    bottom: 40px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Logo */
.footer-logo {
    width: 160px;
    max-width: 60vw;
    margin-bottom: 22px;
}

/* Icon row */
.mobile-menu-icons {
    display: flex;
    gap: 20px;
}

.mobile-menu-icons img {
    width: 36px;
    height: 36px;
}

.mobile-menu-footer {
    position: absolute;
    bottom: 40px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-logo {
    width: 160px;
    max-width: 60vw;
    margin-bottom: 22px;
}

.mobile-menu-icons {
    display: flex;
    gap: 20px;
}

.mobile-menu-icons img {
    width: 36px;
    height: 36px;
}

/* FORCE BIGGER LOGO IN MOBILE MENU */
.mobile-menu-footer .footer-logo {
    width: 200px !important;
    max-width: none !important;
    height: auto !important;
}

.contact-success {
    margin-top: 18px;
    padding: 14px 18px;
    border-radius: 8px;

    background: rgba(230, 192, 104, 0.15); /* soft gold background */
    border: 1.5px solid var(--accent);     /* gold border */
    color: #5c4a1a;                         /* deep warm gold text */

    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;

    text-align: center;
}

.contact-error {
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 8px;

    background: rgba(230, 192, 104, 0.12);
    border: 1.5px solid var(--accent);
    color: #5c4a1a;

    font-size: 0.9rem;
    text-align: center;
}

.field-error {
    border-color: var(--accent) !important;
    background: rgba(192, 57, 43, 0.04);
}

.form-message {
    display: none;
}

.form-message.show {
    display: block;
}

.contact-error {
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 8px;
    background: rgba(230, 192, 104, 0.12);
    border: 1.5px solid var(--accent);
    color: #5c4a1a;
    font-size: 0.9rem;
    text-align: center;
}

.contact-success {
    margin-top: 18px;
    padding: 14px 18px;
    border-radius: 8px;
    background: rgba(230, 192, 104, 0.15);
    border: 1.5px solid var(--accent);
    color: #5c4a1a;
    font-size: 0.95rem;
    font-weight: 500;
    text-align: center;
}

/* Error state – underline only */
.field-error {
    border-bottom-color: var(--accent) !important;
    color: #000 !important; /* KEEP TEXT BLACK */
}

/* Prevent browser invalid styles */
input:invalid,
textarea:invalid,
select:invalid {
    color: #000;
    box-shadow: none;
}

/* Remove red autofill / focus styles */
input:focus,
textarea:focus,
select:focus {
    color: #000;
}

/* Phone only */
@media (max-width: 480px) {
    .contact-send-btn {
        min-height: 48px;
        line-height: 1.2;
        padding: 12px 20px;
        font-size: 16px;
    }

    .contact-send-btn {
        color: #000 !important;
        -webkit-text-fill-color: #000 !important;
    }


    .contact-send-btn,
    .contact-send-btn:hover,
    .contact-send-btn:active,
    .contact-send-btn:focus {
        color: #000;
        -webkit-text-fill-color: #000 !important;
    }


    .form-row {
        flex-direction: column;
        gap: 16px;
    }

    .form-row .field-group {
        width: 100%;
    }

    .section-text,
    .why-subtext,
    .wwd-mobile-info p {
        font-size: 11px !important;
        line-height: 1.5;
        text-align: center;
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .review-text {
        padding: 0 42px;
    }

    .review-arrow-left {
        left: 8px;
    }

    .review-arrow-right {
        right: 8px;
    }

    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
        text-align: center;
    }

    body:not(.home-page) .nav-logo {
        height: 55px;
        max-height: 55px;
    }

    /* Home page – reduce "Grow Your Vision" TITLE size */
    #vision .section-title {
        font-size: 25px !important;
        line-height: 1.9;
        text-align: center;
    }

    /* Reviews – smaller text on phone */
    .review-text {
        font-size: 14px !important;
        line-height: 1.2;
    }

    .review-name {
        font-size: 11px !important;
        margin-top: 10px;
    }

    .starlit-cta .cta-image img {
        max-width: 100px;   /* adjust as needed */
        width: 100%;
        height: auto;
    }

    .contact-heading {
        font-size: 46px !important;   /* adjust to taste: 42–52 */
        line-height: 1.05 !important;
    }

}

/* =========================================================
   RENTALS MODAL (<=800px)
   Scale the ENTIRE card (and all its contents) down smoothly.
   No reflow, no stacking, no element-by-element sizing.
========================================================= */

:root{
  /* IMPORTANT: set this to the modal's desktop width */
  --modal-base-width: 1100px;

  /* margin around modal on small screens */
  --modal-margin: 24px;
}

@media (max-width: 800px){

  .modal-overlay{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: var(--modal-margin) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .modal-content{
    /* Lock to desktop size so scaling affects everything inside */
    width: var(--modal-base-width) !important;
    max-width: none !important;

    /* Scale factor based on available viewport width */
    --scale: min(
      1,
      calc((100vw - (var(--modal-margin) * 2)) / var(--modal-base-width))
    );

    transform-origin: center center !important;
    transform: scale(var(--scale)) !important;

    margin: 0 !important;
  }

  /* Avoid any clipping from overflow rules elsewhere */
  .modal-content,
  .modal-left,
  .modal-right,
  #modalThumbs,
  .modal-thumbs{
    overflow: visible !important;
  }
}


/* =========================================
   RENTALS MODAL — PHONE: fit within screen
========================================= */
@media (max-width: 850px) {

  /* Make sure the overlay doesn't force overflow */
  .modal-overlay {
    padding: 14px !important;
  }

  /* Modal card: never wider than screen */
  .modal-content {
    width: 70% !important;
    max-width: 70% !important;
    margin: 0 !important;

    padding: 16px !important;
    gap: 14px !important;

    display: flex !important;
    flex-direction: column !important;  /* stack image then text */
    box-sizing: border-box !important;
  }

  /* Left side: full width */
  .modal-left {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  /* Main image: full width, responsive height */
  #modalMainImage,
  .modal-left img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    margin: 0 !important;
  }

  /* Thumbnails: horizontal row under the main image */
  #modalThumbs,
  .modal-thumbs {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding-bottom: 6px !important;
    box-sizing: border-box !important;
  }

  #modalThumbs img,
  .modal-thumbs img {
    width: 62px !important;
    height: 62px !important;
    flex: 0 0 auto !important;
  }

  /* Right side: full width, smaller text so it fits nicely */
  .modal-right {
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .modal-right h2 {
    font-size: 18px !important;
    margin: 0 !important;
  }

  .modal-price {
    font-size: 16px !important;
    margin: 0 !important;
  }

  .modal-description {
    font-size: 13px !important;
  }

  /* Button: full width but not overflowing */
  .modal-add-btn {
    width: 100% !important;
    font-size: 14px !important;
    padding: 12px !important;
  }

  /* Close button: easier to tap */
  .modal-close {
    font-size: 28px !important;
    top: 10px !important;
    right: 10px !important;
  }
}

/* =========================================
   RENTALS MODAL — PHONE: fit within screen
========================================= */
@media (max-width: 480px) {

  /* Make sure the overlay doesn't force overflow */
  .modal-overlay {
    padding: 14px !important;
  }

  /* Modal card: never wider than screen */
  .modal-content {
    width: 100% !important;  /* big, but never exceeds screen */
    max-width: 1000px !important;
    margin: 0 !important;

    padding: 16px !important;
    gap: 14px !important;

    display: flex !important;
    flex-direction: column !important;  /* stack image then text */
    box-sizing: border-box !important;
  }

    /* CONTACT FORM — force inputs to always be full width */
    .contact-form .field-group {
    flex: 1;
    min-width: 0;            /* important inside flex rows */
    }

    .contact-form input,
    .contact-form textarea,
    .contact-form select,
    .select-wrapper {
    width: 100% !important;
    box-sizing: border-box;
    display: block;
    }

    /* CONTACT — Send button full width + centered + gold theme */
    .contact-send-btn {
    width: 100% !important;
    max-width: 520px;          /* optional: keeps it elegant on desktop */
    margin: 18px auto 0 !important; /* centers the button */
    display: block;

    background: #fff !important;
    border: 2px solid var(--accent) !important;
    color: var(--accent) !important;

    padding: 14px 16px !important;
    border-radius: 10px !important;
    font-weight: 600;
    }

    .contact-send-btn:hover {
    background: var(--accent) !important;
    color: #fff !important;
    }
}

@media (max-width: 480px) {
    /* ===== CONTACT FORM: FORCE FULL-WIDTH FIELDS (FINAL OVERRIDE) ===== */

    /* Make the form column actually take full available width */
    .contact-form {
    width: 100% !important;
    max-width: none !important;
    }

    /* Each row should span full width */
    .contact-form .form-row {
    width: 100% !important;
    }

    /* Each field-group should fill its column */
    .contact-form .field-group {
    flex: 1 1 0 !important;
    width: 100% !important;
    min-width: 0 !important; /* IMPORTANT for iPhone Safari flexbox */
    }

    /* Inputs/selects/textarea must be explicitly full width */
    .contact-form input,
    .contact-form textarea,
    .contact-form select {
    width: 100% !important;
    max-width: none !important;
    display: block !important;
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
    }

    /* Your dropdown wrapper also needs to fill the row */
    .contact-form .select-wrapper {
    width: 100% !important;
    max-width: none !important;
    display: block !important;
    box-sizing: border-box !important;
    }

    /* ===== CONTACT SEND BUTTON: FULL WIDTH + GOLD TEXT ===== */
    .contact-send-btn {
    width: 100% !important;
    max-width: 520px;                 /* optional (remove if you want full desktop width too) */
    margin: 18px auto 0 !important;
    display: block !important;

    background: #fff !important;
    border: 2px solid var(--accent) !important;

    color: var(--accent) !important;
    -webkit-text-fill-color: var(--accent) !important; /* iPhone Safari */
    font-weight: 700 !important;

    padding: 14px 16px !important;
    border-radius: 10px !important;
    }

    /* Hover: keep text gold too */
    .contact-send-btn:hover {
    background: rgba(230, 192, 104, 0.12) !important; /* soft gold tint */
    color: var(--accent) !important;
    -webkit-text-fill-color: var(--accent) !important;
    }


    /* ===== CONTACT SEND BUTTON: TRUE FULL WIDTH ===== */
    .contact-send-btn {
    width: 100% !important;
    max-width: none !important;   /* remove desktop cap */
    display: block !important;

    margin: 18px 0 0 0 !important;

    background: #fff !important;
    border: 2px solid var(--accent) !important;

    color: var(--accent) !important;
    -webkit-text-fill-color: var(--accent) !important;

    font-weight: 700 !important;
    padding: 14px 16px !important;
    border-radius: 10px !important;

    box-sizing: border-box !important;
    }


}

/* =========================
   RENTALS POPUP — PHONE SIZE FIX
   (Put at VERY END of CSS)
========================= */
@media (max-width: 480px) {

  .modal-overlay{
    padding: 12px !important;
  }

  /* Kill any scaling rules from the <=800px block */
  .modal-content{
    transform: none !important;
    width: min(92vw, 440px) !important;   /* <-- big (about 2x what you have now) */
    max-width: 92vw !important;
    padding: 18px !important;
    gap: 14px !important;
  }
}

/* =========================
   CONTACT FORM — CONSISTENT LABEL/FIELD SPACING (PHONE)
   (Put at VERY END of CSS)
========================= */
@media (max-width: 900px) {

  /* Make every label + input spacing identical */
  .contact-form .field-group{
    gap: 4px !important;              /* controls the exact label->field spacing */
  }

  .contact-form label{
    margin: 0 !important;             /* remove inconsistent margins */
    padding: 0 !important;
    line-height: 1.2 !important;
  }

  .contact-form input,
  .contact-form textarea,
  .contact-form select{
    margin: 0 !important;             /* prevent extra gaps */
  }

  .contact-form .select-wrapper{
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* =========================
   CONTACT — MAKE SELECT/DATE MATCH UNDERLINE INPUTS (PHONE)
   Put at VERY END of CSS
========================= */
@media (max-width: 480px) {

  /* Ensure label + control always stack the same way */
  .contact-form .field-group{
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* Use ONE consistent label spacing */
  .contact-form .field-group label{
    margin: 0 0 16px 0 !important;   /* <-- controls label -> field spacing */
    line-height: 1.2 !important;
  }

  /* Make all controls share the same “underline” look/spacing */
  .contact-form input,
  .contact-form textarea,
  .contact-form select{
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid #000 !important;
    border-radius: 0 !important;

    padding: 16px 0 10px 0 !important;  /* <-- controls the “empty space” above the line */
    margin: 0 0 18px 0 !important;      /* <-- space after each field */
    line-height: 1.2 !important;

    -webkit-appearance: none !important;
    appearance: none !important;
  }

  /* If your select is inside a wrapper, kill wrapper spacing */
  .contact-form .select-wrapper{
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Keep your dropdown arrow usable */
  .contact-form select{
    padding-right: 34px !important;
    background-position: right 8px center !important;
    background-repeat: no-repeat !important;
  }
}

/* --- Make First/Last match other fields --- */

/* The row that contains First + Last */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;          /* spacing between First/Last */
  align-items: start;
}

/* Each field wrapper inside the row */
.form-row > * {
  min-width: 0;              /* prevents weird shrinking */
}

/* Make ALL inputs/selects truly fill their container */
.form-row input,
.form-row select,
.form-row .select-wrap {
  width: 100%;
  box-sizing: border-box;
  display: block;
}

/* Ensure label-to-line spacing matches everywhere */
.form-row label {
  display: block;
  margin-bottom: 12px;       /* match your other fields’ spacing */
}

/* If you use underline style inputs */
.form-row input {
  border: 0;
  border-bottom: 2px solid #000;
  padding: 12px 0;
  background: transparent;
}

/* Mobile: stack First/Last like the other fields */
@media (max-width: 480px) {
  .form-row {
    grid-template-columns: 1fr;
    row-gap: 18px;
  }
}

/* =========================================
   WIX CONTACT FORM — TIGHTER, MATCHING SPACING
   (paste at the VERY END of your CSS)
========================================= */

/* 1) Reduce space between label text and the input underline/box */
form label,
form [class*="label"],
form [class*="Label"]{
  margin-bottom: 6px !important;
  padding-bottom: 0 !important;
  line-height: 1.15 !important;
}

/* 2) Reduce internal top/bottom padding of ALL inputs/selects/textarea */
form input,
form textarea,
form select,
form [class*="TextInput"] input,
form [class*="Input"] input,
form [class*="Dropdown"] select,
form [class*="Date"] input,
form [class*="Phone"] input{
  padding-top: 10px !important;
  padding-bottom: 6px !important;
}

/* 3) Reduce space AFTER each field (the gap between one field and the next) */
form .field,
form [class*="field"],
form [class*="Field"],
form [class*="input"],
form [class*="Input"],
form [class*="TextInput"],
form [class*="Dropdown"],
form [class*="Date"],
form [class*="Phone"]{
  margin-bottom: 12px !important;
}

/* 4) Specifically tighten the dropdown container too (Wix often adds extra height) */
form [class*="Dropdown"]{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 5) If the date field is using a separate wrapper, tighten it */
form [class*="Date"]{
  margin-top: 0 !important;
}