/* ================== MOBILE STYLES (max-width: 935px) ================== */
@media (max-width: 935px) {

    /* ================== Body Overflow & Zoom ================== */
    body { 
        overflow-x: hidden; 
        max-width: 100%; 
        zoom: 1.1; 
    }

    /* ================== Dashboard Button ================== */
    .loginDashboardBTN {
        top: 5px; 
        left: 10px; 
        right: auto;
        padding: 10px 14px; 
        font-size: 0;
        border-radius: 50%; 
        width: 48px; 
        height: 48px; 
        border: 0px solid #D4A94F;
    }
    .loginDashboardBTN:hover { 
        background: transparent; 
        color: #D4A94F; 
    }
    .loginDashboardBTN:hover img { 
        filter: none; 
    }

    /* ================== Background Video Brightness ================== */
    .bg-layer-video { 
        filter: brightness(35%); 
    }

    /* ================== Top UI ================== */
    .top-ui { 
        display: flex !important; 
        justify-content: center; 
        align-items: flex-start !important; /* push logo to top */
        padding-top: 8px !important;       /* adjust top gap */
    }


 .mobile-only {
        display: flex;
    }

    .menu.mobile-only {
        display: none;
        flex-direction: column;
        background: #000; /* sidebar color */
        position: absolute;
        top: 50px; /* below top bar */
        left: 0;
        width: 200px;
        padding: 15px;
        z-index: 1000;
    }

    .menu.mobile-only.active {
        display: flex;
    }

    .hamburger.mobile-only {
        flex-direction: column;
        justify-content: space-between;
        width: 25px;
        height: 20px;
        cursor: pointer;
        z-index: 1100;
    }

    .hamburger.mobile-only span {
        display: block;
        height: 3px;
        background: #fff;
        border-radius: 2px;
    }

    /* Hide desktop nav on mobile */
    .nav-center {
        display: none;
    }




    /* ================== Top Left Alignment ================== */
    .top-left { 
        display: flex; 
        justify-content: center; 
        width: 100%; 
    }

    /* ================== Logo ================== */
    .logo-img { 
        width: 120px; 
        max-width: 90vw; 
    }

    /* ================== Hide Center Nav ================== */
    .nav-center { 
        display: none !important; 
    }

    /* ================== Mobile Sticky Buttons ================== */
    .mobile-sticky-contact,
    .mobile-sticky-dashboard {
        position: fixed; 
        top: 8px; 
        right: 16px; 
        z-index: 999999;
        display: flex !important; 
        align-items: center; 
        justify-content: center;
        width: 46px; 
        height: 46px; 
        padding: 0; 
        border: none; 
        background: transparent; 
        cursor: pointer;
    }

    /* ================== Hero Section ================== */
    .hero {
        padding: 0 16px !important; 
        margin-top: 120px !important; 
        margin-bottom: 10px;
        text-align: center !important; 
        justify-content: center !important;
    }

    /* ================== Hero Typography ================== */
    .hero h1, 
    .hero h2 { 
        font-size: 30px !important; 
        line-height: 1.05 !important; 
    }
    .hero h2 { 
        margin-top: -2px !important; 
    }
    .hero p { 
        font-size: 13px !important; 
        max-width: 280px !important; 
        margin-left: auto !important; 
        margin-right: auto !important; 
    }

    /* ================== CTA BUTTON ================== */
    .cta {
        font-size: 15px;
    }

    /* ================== Section Header ================== */
    .section-header { 
        width: 100%; 
        padding: 0 16px; 
        margin: 0; 
    }

    /* ================== Featured Section ================== */
    .featured { 
        display: flex !important; 
        flex-direction: column !important; 
        width: 100% !important; 
        padding: 0 16px !important; 
        gap: 12px !important; 
        overflow: hidden !important; 
    }
    .featured-left, 
    .featured-right { 
        display: contents !important; 
    }
    .feature { 
        width: 100% !important; 
        height: 100% !important; 
        border-radius: 12px !important; 
    }
    .feature img { 
        width: 100% !important; 
        height: 100% !important; 
        object-fit: cover !important; 
        border-radius: 12px !important; 
        display: block; 
    }

    /* ================== Grid Layout ================== */
    .grid { 
        display: grid !important; 
        grid-template-columns: repeat(2, 1fr) !important; 
        width: 100%; 
        padding: 0 16px; 
        gap: 14px !important; 
    }
    .card { 
        width: 100% !important; 
        height: auto !important; 
    }
    .card img { 
        width: 100%; 
        height: auto; 
        aspect-ratio: 1 / 1; 
    }

    /* ================== Gallery Controls ================== */
    .gallery-close { 
        top: 12px !important; 
        right: 16px !important; 
        z-index: 10000; 
    }
    .gallery-arrow { 
        z-index: 10000; 
        font-size: 42px !important; 
    }
    .gallery-prev { 
        left: 10px !important; 
    }
    .gallery-next { 
        right: 10px !important; 
    }
    .gallery-thumbs img { 
        width: 80px !important; 
        height: 45px !important; 
    }

    /* ================== Services Section ================== */
    .services-row { 
        width: 100% !important; 
        flex-direction: column !important; 
        align-items: center; 
        gap: 18px; 
        padding: 0 16px; 
    }
    .service { 
        width: 100%; 
        max-width: 420px; 
        display: flex; 
        align-items: center; 
        gap: 12px; 
    }
    .service img { 
        flex-shrink: 0; 
    }
    .service div { 
        text-align: left; 
    }
    .divider { 
        display: none; 
    }
    .services-bottom { 
        width: 100% !important; 
        display: flex !important; 
        flex-direction: column !important; 
        gap: 14px; 
        margin-top: 10px !important; 
    }
    .services-left, 
    .services-right { 
        width: 100% !important; 
    }

    /* ================== Testimonials Grid ================== */
    .testimonial-grid { 
        grid-template-columns: 1fr; 
    }

    /* ================== Contact Form CTA ================== */
    .contact-form .cta { 
        width: fit-content !important; 
        padding: 15px 30px !important; 
        font-size: 20px !important; 
        display: inline-block; 
        margin: 0 auto; 
    }

}