/* Semantic CSS for Done Right Roofing */

:root {
    --color-primary: #4682b4;
    /* Steel Blue */
    --color-primary-dark: #3a6ba0;
    --color-secondary: #2a2a2a;
    --color-text: #303030;
    --color-text-light: #666;
    --color-bg-light: #ffffff;
    --color-bg-alt: #f4f4f4;

    --font-heading: 'Muli', sans-serif;
    --font-body: 'Quicksand', sans-serif;

    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 32px;
    --spacing-xl: 64px;

    --container-width: 1200px;
    --header-height: 80px;
    --border-radius: 4px;
}

/* Reset & Base */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    color: white;
    /* Text white on blue bg */
    line-height: 1.6;
    background-color: var(--color-primary);
    /* Blue body */
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    line-height: 1.2;
}

h2 {
    font-size: 2.5rem;
    color: white;
    /* Headings white */
}

h3 {
    font-size: 1.5rem;
    margin-top: var(--spacing-md);
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
    height: auto;
}

/* Utilities */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

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

.mb-lg {
    margin-bottom: var(--spacing-lg);
}

.bg-light {
    background-color: transparent;
    /* Remove alt bg */
}

.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: var(--border-radius);
    font-weight: bold;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background-color: white;
    color: var(--color-primary);
    border-radius: 50px;
    border: 2px solid white;
}

.btn-primary:hover {
    background-color: #f0f0f0;
    color: var(--color-primary-dark);
}

.btn-blue {
    background-color: var(--color-primary);
    color: white;
    border-radius: 50px;
    border: 2px solid var(--color-primary);
}

.btn-blue:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: white;
}

.section {
    padding: var(--spacing-xl) 0;
}

.section-header-wrapper {
    background-color: rgba(255, 255, 255, 0.85);
    width: 100%;
    padding: var(--spacing-md) 0;
    margin-bottom: var(--spacing-lg);
}

.section-header-wrapper h2 {
    color: var(--color-primary);
    margin: 0;
}

/* Header */
.site-header {
    background-color: rgba(70, 130, 180, 0.85);
    /* Slightly more transparent steel blue */
    color: white;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
}

.header-inner {
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo img {
    height: 200px;
    width: 320px;
    /* Wider fixed width */
    object-fit: contain;
    /* Prevents distortion when height changes */
    border-radius: 0;
    transition: height 0.3s ease;
    background: white;
    padding: 0 30px;
    /* Wider padding on sides */
    box-shadow: none;
}

/* Create the "hanging" effect by absolute positioning or negative margin if needed,
   but simplest is just letting it overflow if the header is fixed height,
   BUT header is flex. Let's make the logo container allow overflow. */


/* Adjust header to allow logo to exceed bounds if we want that overlapping look,
   OR just make the header tall initially.
   The request says "resize ... to fit within the menu's area".
   This implies the menu area stays same size or shrinks?
   Let's make the header tall initially? Or logo absolute?
   Let's try absolute positioning for the logo to overlap the hero section effectively
   without pushing the nav down too much. */
.logo {
    position: relative;
    z-index: 1001;
    align-self: flex-start;
    margin-top: 0px;
}

/* Scrolled State */
.site-header.scrolled .logo img {
    height: 64px;
}

.site-header {
    transition: background-color 0.3s ease, padding 0.3s ease;
}

.nav-menu {
    display: flex;
    gap: var(--spacing-lg);
    align-items: center;
}

.nav-link {
    color: white;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    cursor: pointer;
}

.nav-link:hover {
    color: #e0e0e0;
}

/* Dropdown */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--color-primary);
    /* Match header blue */
    min-width: 200px;
    /* Slightly wider */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1002;
    /* Higher z-index */
    border-radius: 0 0 4px 4px;
    overflow: hidden;
    padding: 10px 0;
}

.dropdown-content a {
    color: white;
    /* White text */
    padding: 12px 20px;
    text-decoration: none;
    display: block;
    font-weight: 700;
    /* Match nav links */
    font-size: 16px;
    /* Match nav links */
    text-transform: uppercase;
    /* Match nav links */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    /* Subtle separator */
}

.dropdown-content a:last-child {
    border-bottom: none;
}

.dropdown-content a:hover {
    background-color: var(--color-primary-dark);
    /* Darker blue on hover */
    color: white;
}

/* .dropdown:hover .dropdown-content {
    display: block;
} */

.dropdown.active .dropdown-content {
    display: block;
}

.phone-number {
    font-weight: 400;
    font-size: 32px;
    color: #FFD700;
}

/* Hero Section */
.hero {
    position: relative;
    height: 70vh;
    min-height: 500px;
    background-color: #333;
    /* Fallback */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
}

.hero-home {
    background-image: url('../img/front-page.jpg');
}

.hero-services {
    background-image: url('../img/front-page-7.jpg');
}

.hero-emergency {
    background-image: url('../img/front-page-2.jpg');
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    /* Overlay removed per request */
    z-index: 1;
    pointer-events: none;
    /* Let clicks pass through if needed */
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    padding: var(--spacing-xl);
    width: 600px;
    height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1;
    /* Ensures it stays circular */
}

.hero-content h1 {
    font-size: 2.5rem;
    text-shadow: none;
    margin-bottom: var(--spacing-md);
    color: var(--color-primary);
    /* Blue text */
}

.hero-content p {
    font-size: 1.1rem;
    margin-bottom: var(--spacing-lg);
    text-shadow: none;
    color: var(--color-text-light);
    /* Grey text */
    max-width: 80%;
}

/* Feature/Service Cards */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.feature-card {
    text-align: center;
    padding: var(--spacing-lg);
    border-radius: 8px;
    background: white;
    color: var(--color-text);
    /* Keep text dark in cards */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.card-image img {
    width: 280px;
    height: 280px;
    object-fit: cover;
    border-radius: 50%;
    margin: 0 auto var(--spacing-md);
    display: block;
}

.service-list {
    text-align: left;
    margin-top: var(--spacing-md);
    padding-left: var(--spacing-md);
    list-style: disc;
}

/* Paged Gallery Grid */
.gallery-section {
    padding-top: 0;
}

.gallery-container {
    width: 80%;
    margin: 0 auto;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    /* Optional small gap for clean grid */
    gap: 0;
    /* Sticky to 0 per previous request */
}

.gallery-item {
    width: 100%;
    padding-bottom: 100%;
    /* Square */
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.gallery-item:hover {
    transform: scale(1.05);
    z-index: 2;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.gallery-pagination {
    margin-top: var(--spacing-md);
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.page-dot {
    width: 12px;
    height: 12px;
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s;
}

.page-dot.active {
    background: var(--color-primary);
    transform: scale(1.2);
}

/* Responsive Gallery */
@media (max-width: 900px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .gallery-container {
        width: 100%;
        /* Full width mobile */
        padding: 0 10px;
    }
}

/* Lightbox */
.lightbox {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
    /* Flex centering for wrapper */
    display: none;
    /* Toggled by JS to flex */
    justify-content: center;
    align-items: center;
}

.lightbox-wrapper {
    position: relative;
    max-width: 80%;
    max-height: 90vh;
}

.lightbox-content {
    display: block;
    width: 100%;
    height: auto;
    max-height: 90vh;
    object-fit: contain;
    border: 5px solid white;
    /* Thin frame */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    animation-name: zoom;
    animation-duration: 0.3s;
}

.lightbox-watermark {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: normal;
    text-shadow: 1px 1px 3px black;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
}

.close-lightbox {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.close-lightbox:hover,
.close-lightbox:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

/* Social */
/* Social */
.social-links {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.social-icon-link {
    display: inline-block;
    color: white;
    /* Icons white on blue bg */
    transition: transform 0.3s ease, color 0.3s ease;
}

.social-icon-link svg {
    width: 80px;
    height: 80px;
    fill: currentColor;
}

.social-icon-link:hover {
    color: var(--color-primary-dark);
    transform: scale(1.1);
}

/* Form & Contact Layout */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: start;
}

.contact-form {
    max-width: 100%;
    margin: 0;
}

.info-col {
    background: white;
    padding: var(--spacing-lg);
    border-radius: 8px;
    color: var(--color-text);
    /* Dark text on white bg */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.contact-col h4 {
    margin-bottom: var(--spacing-md);
    color: var(--color-primary);
    /* Blue headings in white box */
}

.info-col p {
    margin-bottom: var(--spacing-md);
    font-size: 0.95rem;
    color: #333;
}

.info-col a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: bold;
}

/* Hours Widget - Dark text */
.hours-table {
    width: auto;
    display: inline-table;
    border-spacing: 0;
    font-size: 0.95rem;
    color: #333;
}

.hours-row td {
    padding: 4px 0;
}

.day-cell {
    font-weight: bold;
    padding-right: 15px;
}

.arrow-cell {
    text-align: left;
    padding-left: 10px;
}

#hours-toggle {
    cursor: pointer;
}

.hours-arrow {
    transition: transform 0.3s ease;
}

.hours-expanded .hours-arrow {
    transform: rotate(180deg);
}

.hours-expanded #hours-details {
    display: table-row-group !important;
}

/* Honeypot for spam protection */
.honey-pot {
    display: none;
}

.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-control {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: var(--border-radius);
    font-family: inherit;
    font-size: 1rem;
    background-color: white;
    /* Inputs white */
    color: #333;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(70, 130, 180, 0.4);
}

.attachment-group {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    cursor: pointer;
    margin-bottom: var(--spacing-md);
}

.recaptcha-text {
    font-size: 0.75rem;
    color: #eee;
    margin-top: var(--spacing-sm);
}

.site-footer {
    background-color: #2a2a2a;
    color: white;
    padding: var(--spacing-xl) 0;
}

.closed-badge {
    background: #ccc;
    color: #333;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8em;
    margin-left: 8px;
}

/* Responsive Contact */
@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}



.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
}

.footer-col h3 {
    color: white;
    margin-bottom: var(--spacing-md);
}

/* Reviews Section */
#reviews {
    background-image: url('../img/manny_ceo.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: var(--spacing-xl) 0;
    position: relative;
    /* Constrain width per user request */
    width: 85%;
    margin: var(--spacing-xl) auto;
    border-radius: 16px;
    /* Rounded corners for the container look */
    /* Optional: Overlay to darken background for better text contrast if needed */
}

/* Ensure the container content sits on top */
#reviews .container {
    position: relative;
    z-index: 2;
}

/* Overlay removed */

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.review-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    padding: var(--spacing-lg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color: #333;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.review-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.reviewer-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.reviewer-initial {
    width: 50px;
    height: 50px;
    background: #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
}

.recommend-badge {
    color: #65676B;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

.heart-icon {
    color: #F277A7;
}

.review-text {
    font-size: 0.95rem;
    margin-bottom: var(--spacing-lg);
    line-height: 1.5;
}

.review-text a {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.9rem;
}

.review-footer {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.85rem;
    color: #65676B;
    border-top: 1px solid #eee;
    padding-top: var(--spacing-md);
}

.fb-icon {
    width: 20px;
    height: 20px;
    background: #1877F2;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 14px;
}

.google-icon {
    width: 20px;
    height: 20px;
    background: #4285F4;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 14px;
}

.star-rating {
    color: #FFD700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 1px;
}

.footer-bottom {
    border-top: 1px solid #444;
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 2.5rem;
    }

    .header-inner {
        flex-direction: column;
        height: auto;
        padding: var(--spacing-sm);
    }

    .nav-menu {
        margin: var(--spacing-md) 0;
    }
}

/* Map Embed */
.map-container {
    margin-top: 24px;
    border-radius: 8px;
    overflow: hidden;
    display: block;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.map-container iframe {
    width: 100%;
    min-height: 300px;
    border: 0;
    display: block;
}

/* Service Areas */
.areas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    text-align: left;
}

.areas-grid h4 {
    color: white;
    margin-bottom: var(--spacing-sm);
    border-bottom: 2px solid white;
    padding-bottom: 5px;
}

.areas-grid ul {
    list-style: none;
    padding: 0;
}

.areas-grid li {
    margin-bottom: 5px;
    color: white;
}

.bbb-logo {
    display: block;
    max-width: 100px;
    height: auto;
    background-color: white;
    padding: 10px;
    border-radius: 8px;
}

.story-bbb-badge {
    display: block;
    max-width: 60px;
    margin: 10px auto;
    height: auto;
}

/* Google Review Logo */
.google-review-logo {
    display: block;
    max-height: 100px;
    width: auto;
    margin-top: var(--spacing-md);
}

.social-icon-img {
    width: 40px;
    height: 40px;
    fill: currentColor;
    display: inline-block;
    vertical-align: middle;
    transition: transform 0.3s ease;
}

.social-icon-img:hover {
    transform: scale(1.1);
}

/* Mobile Menu & Responsive Navigation */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    z-index: 2001;
}

.menu-toggle .bar {
    display: block;
    width: 100%;
    height: 3px;
    background-color: white;
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* Hamburger Animation */
.menu-toggle.active .bar:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.menu-toggle.active .bar:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active .bar:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

@media (max-width: 900px) {
    .site-header {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 2000;
    }

    /* Header Layout Changes */
    .header-inner {
        padding: 0 10px;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        /* Center the phone number basically */
        position: relative;
        /* Context for absolute hamburger */
    }

    /* Logo adjustment */
    .logo {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2002;
        max-width: 80px;
        /* Fixed small width to save space */
    }

    .logo img {
        height: 50px;
        width: auto;
        max-width: 100%;
        padding: 0;
        background: transparent;
        object-fit: contain;
    }

    .site-header.scrolled .logo img {
        height: 40px;
    }

    /* Phone Number on Mobile */
    .header-contact {
        display: block;
        text-align: center;
        margin: 0;
        width: 100%;
        /* Fill width to center text effectively */
        padding: 0 50px;
        /* significant padding to avoid logo and burger */
    }

    .phone-number {
        font-size: 1.75rem;
        /* Increased from 1rem */
        color: #FFD700;
        font-weight: bold;
        white-space: nowrap;
        display: block;
    }

    /* Hamburger - Pinned Absolutely */
    .menu-toggle {
        display: flex;
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2003;
        margin: 0;
    }

    /* Extra small screens (e.g. Galaxy Fold 280px or iPhone SE 320px) */
    @media (max-width: 360px) {
        .logo img {
            height: 40px;
            /* Smaller logo */
        }

        .phone-number {
            font-size: 1rem;
            /* Smaller phone but readable */
        }

        .header-inner {
            padding: 0 5px;
        }
    }

    /* Ensure no auto margin pushing it */


    /* Mobile Nav Dropdown (Overlay) */
    .nav-menu {
        position: absolute;
        top: 69px;
        /* slightly less than 70px to prevent gap */
        left: 0;
        right: 0;
        width: 100%;
        margin-top: 0;
        height: auto;
        background-color: rgba(70, 130, 180, 0.98);
        flex-direction: column;
        justify-content: flex-start;
        padding: 0 0 var(--spacing-md) 0;
        /* Removed top padding to close gap */

        display: none;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        z-index: 1000;
        gap: 0;
    }

    .nav-menu.active {
        display: flex;
    }

    .nav-link {
        color: white;
        font-size: 1.1rem;
        padding: 15px 20px;
        width: 100%;
        text-align: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .nav-link:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    /* Mobile Dropdown */
    .dropdown {
        display: block;
        width: 100%;
    }

    .dropdown .nav-link {
        display: block;
    }

    .dropdown-content {
        position: static;
        box-shadow: none;
        background-color: rgba(0, 0, 0, 0.1);
        min-width: 100%;
        display: none;
        /* Hidden by default */
    }

    .dropdown.active .dropdown-content {
        display: block;
        /* Show when active */
    }

    .dropdown-content a {
        color: white;
        padding-left: 40px;
    }

    .dropdown-content a:hover {
        background-color: rgba(255, 255, 255, 0.2);
    }

    /* BBB Logo Centering */
    .bbb-logo {
        margin: 10px auto;
    }

    .dropdown-content a {
        color: white;
        padding-left: 40px;
    }

    .dropdown-content a:hover {
        background-color: rgba(255, 255, 255, 0.2);
    }
}

/* Responsive Layout Adjustments */
@media (max-width: 768px) {

    /* Hero */
    .hero-content {
        width: 90%;
        height: auto;
        min-height: auto;
        border-radius: 16px;
        aspect-ratio: auto;
        padding: var(--spacing-lg) var(--spacing-md);
    }

    .hero-content h1 {
        font-size: 2rem;
    }

    .hero-content p {
        font-size: 1rem;
        max-width: 100%;
    }

    /* Typography */
    h2 {
        font-size: 2rem;
        /* Reduce heading size */
    }

    /* Contact Form & Info */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .map-container iframe {
        height: 250px;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

/* Floating Video Widget */
.floating-video-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    width: 320px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    /* overflow: hidden; Removed to allow close button outside */
    animation: slideUp 0.5s ease-out;
    /* Fix for flickering */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    /* Added radius here */
    /* Fix for flickering */
    mask-image: -webkit-radial-gradient(white, black);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.close-video {
    position: absolute;
    top: -10px;
    right: 0px;
    background: red;
    color: white;
    border: none;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10001;
    line-height: 1;
    padding: 0 8px 4px 8px;
    margin: 10px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.close-video:hover {
    background: darkred;
}

@keyframes slideUp {
    from {
        transform: translateY(100px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Mobile Responsive Video */
@media (max-width: 600px) {
    .floating-video-container {
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        border-radius: 0;
        border: none;
        border-top: 2px solid var(--color-primary);
        padding-bottom: env(safe-area-inset-bottom);
        /* Fix for iPhone bottom bar */
        background-color: white;
        /* Ensure background is solid */
    }

    /* Reset wrapper radius on mobile */
    .video-wrapper {
        border-radius: 0;
    }

    .close-video {
        top: -40px;
        right: 10px;
        margin: 0;
    }
}