/* Mobile App-like Responsive Layout */

@media screen and (max-width: 768px) {
    /* Base Body padding to prevent content from hiding behind bottom nav */
    body {
        padding-bottom: 70px !important;
    }

    /* 1. Hide Top Bar and standard Footer on Mobile */
    .top-bar, .footer-main, .newsletter-band {
        display: none !important;
    }

    /* 2. Main Header & Logo Fixes - Sticky Header */
    .main-header {
        position: sticky !important;
        top: 0;
        height: auto !important;
        padding: 10px 0 !important;
        background: #fff;
        z-index: 1000;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    
    .main-header .header-inner {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 15px !important;
    }
    
    .main-header .logo {
        margin-left: 0 !important;
        max-width: 70%;
        gap: 8px !important;
    }
    .main-header .logo img {
        max-height: 40px !important;
    }
    
    .logo-text-wrapper > div:nth-child(1) {
        font-size: 15px !important;
    }
    .logo-text-wrapper > div:nth-child(2) {
        font-size: 7px !important;
    }
    .logo-text-wrapper > div:nth-child(3) {
        display: none !important;
    }

    /* 3. Sliding Off-Canvas Navigation Menu */
    .hamburger {
        display: flex !important;
        flex-direction: column;
        justify-content: space-around;
        width: 28px;
        height: 22px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 1001; 
        order: -1;
    }
    .hamburger span {
        width: 28px;
        height: 3px;
        background: #922b21;
        border-radius: 10px;
        transition: all 0.3s linear;
        position: relative;
        transform-origin: 1px;
    }

    .hamburger.toggle span:nth-child(1) { transform: rotate(45deg); }
    .hamburger.toggle span:nth-child(2) { opacity: 0; }
    .hamburger.toggle span:nth-child(3) { transform: rotate(-45deg); }

    /* Drawer Overlay */
    .drawer-overlay {
        display: none;
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 998;
    }
    .drawer-overlay.active {
        display: block;
    }

    /* Drawer Menu */
    .main-header nav {
        position: fixed !important;
        top: 0 !important;
        right: -300px !important; /* hidden off-screen */
        width: 280px !important;
        height: 100vh !important;
        background-color: #fff;
        box-shadow: -4px 0 15px rgba(0,0,0,0.1);
        display: flex !important;
        flex-direction: column !important;
        padding: 80px 20px 20px !important;
        z-index: 999;
        transition: right 0.3s ease-in-out !important;
        margin-top: 0 !important;
        overflow-y: auto;
    }
    
    .main-header nav.nav-active {
        right: 0 !important;
    }

    .main-header nav ul {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding-left: 0 !important;
        margin-bottom: 0 !important;
    }
    .main-header nav ul li {
        width: 100%;
        text-align: left !important;
    }
    .main-header nav ul li a {
        display: block;
        padding: 15px 0;
        font-size: 16px;
        color: #333;
        font-weight: 500;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .main-header nav ul li a i {
        margin-right: 10px;
        color: #922b21;
        width: 20px;
        text-align: center;
    }

    .header-cta { display: none !important; }
    .mobile-only-cta { display: block !important; margin-top: 20px; text-align: center; }

    /* 4. App Bottom Navigation Bar */
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 65px;
        background: #fff;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
        display: flex !important;
        justify-content: space-around;
        align-items: center;
        z-index: 9999;
        padding-bottom: env(safe-area-inset-bottom); /* iOS safe area */
    }

    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #666;
        width: 25%;
        height: 100%;
        position: relative;
    }

    .mobile-nav-item i {
        font-size: 20px;
        margin-bottom: 4px;
        transition: all 0.2s ease;
    }

    .mobile-nav-item span {
        font-size: 10px;
        font-weight: 600;
        font-family: 'Inter', sans-serif;
    }

    .mobile-nav-item.active {
        color: #922b21;
    }

    .mobile-nav-item.active i {
        transform: translateY(-2px);
    }
    
    /* Central FAB-like button for Book */
    .mobile-nav-item.nav-book {
        position: relative;
    }
    .mobile-nav-item.nav-book .nav-book-btn {
        position: absolute;
        top: -20px;
        width: 50px;
        height: 50px;
        background: linear-gradient(135deg, #c0392b, #922b21);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 10px rgba(146,43,33,0.4);
        color: #fff;
        border: 4px solid #fff;
    }
    .mobile-nav-item.nav-book .nav-book-btn i {
        margin: 0;
        font-size: 20px;
    }
    .mobile-nav-item.nav-book span {
        position: absolute;
        bottom: 6px;
    }

    /* 5. Banner/Slider Fixes */
    .hero-slider .slide img { object-position: center center !important; }
    .hero-slider .slide-overlay { background: rgba(15, 20, 35, 0.7) !important; }
    .hero-slider .slide-title { font-size: 24px !important; line-height: 1.2 !important; }
    .hero-slider .slide-desc { font-size: 14px !important; }
    .slide-actions { display: flex; flex-direction: column; gap: 10px; }
    .slide-actions a { width: 100%; text-align: center; }

    /* 6. General Layout Tweaks */
    html, body { overflow-x: hidden; width: 100%; margin: 0; }
    section { padding: 40px 0 !important; }
    .container { padding-left: 15px; padding-right: 15px; }
    .row { margin-left: 0; margin-right: 0; }
    
    /* Grids to single column */
    .ceo-message-grid, .services-grid, .articles-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    /* Slider Wrappers */
    .team-track-wrap, .branches-track-wrap { overflow: hidden !important; position: relative; width: 100%; padding-bottom: 10px; }
    .team-grid, .branches-grid { display: flex !important; flex-wrap: nowrap !important; gap: 15px !important; transition: transform 0.5s ease-in-out !important; overflow: visible !important; }
    .team-card, .branch-card { min-width: 100% !important; width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; box-sizing: border-box; }
    
    .mobile-slider-controls { display: flex; align-items: center; justify-content: center; gap: 15px; margin-top: 20px; }
    .mobile-slider-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #922b21; background: transparent; color: #922b21; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s; }
    .mobile-slider-btn:hover { background: #922b21; color: white; }
    .mobile-slider-dots { display: flex; gap: 8px; }
    .mobile-slider-dot { width: 10px; height: 10px; border-radius: 50%; background: #ccc; border: none; cursor: pointer; transition: 0.3s; }
    .mobile-slider-dot.active { background: #922b21; width: 25px; border-radius: 10px; }
    
    .ceo-image-wrapper { height: 300px !important; }
}

@media screen and (min-width: 769px) {
    /* Hide Mobile Nav on Desktop */
    .mobile-bottom-nav { display: none !important; }
    .drawer-overlay { display: none !important; }
}

/* Extra small screen fixes */
@media screen and (max-width: 428px) {
    .logo-text-wrapper > div:nth-child(1) { font-size: 14px !important; }
    .main-header .logo img { max-height: 35px !important; }
}