/* Mobile Responsive Styles */

/* Mobile Menu Toggle */
@media (max-width: 768px) {
    /* Header */
    header {
        position: sticky;
        top: 0;
        z-index: 1000;
        background: white;
    }
    
    .header-container {
        position: relative;
        padding: 10px 20px;
    }
    
    /* Logo - Smaller on Mobile */
    header .logo img {
        height: 35px !important;
        width: auto !important;
    }
    
    /* Show Mobile Menu Button */
    .mobile-menu-btn {
        display: block !important;
        background: none;
        border: none;
        font-size: 1.5rem;
        color: #2c3e50;
        cursor: pointer;
        padding: 10px;
        z-index: 1002;
        position: relative;
    }
    
    /* DISABLE OLD BLUE MENU SYSTEM */
    header nav {
        display: none !important;
    }
    
    header .nav-menu {
        display: none !important;
    }
    
    .mobile-overlay {
        display: none !important;
    }
    
    header nav.mobile-active {
        display: none !important;
    }
    
    /* Hero Sections */
    .hero-section {
        padding: 60px 0 30px !important;
    }
    
    /* Home Hero - Full Background Image */
    .hero-modern .hero-background-image {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 0 !important;
    }
    
    .hero-modern .hero-background-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }
    
    .hero-modern {
        position: relative !important;
        min-height: 600px !important;
    }
    
    .hero-modern .hero-content-modern {
        position: relative !important;
        z-index: 2 !important;
    }
    
    .hero-section h1,
    section h1 {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
    }
    
    .hero-section p,
    section > div > p {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }
    
    /* Grid Layouts - Stack on Mobile */
    div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Tables - Mobile Optimized with Vertical Headers */
    div[style*="overflow-x: auto"],
    .table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        margin: 0 -10px;
        padding: 0 10px;
    }
    
    table {
        font-size: 0.75rem !important;
        width: 100% !important;
    }
    
    /* Make header cells narrower with vertical text */
    .package-section table thead th,
    section table thead th {
        padding: 10px 5px !important;
        font-size: 0.7rem !important;
        min-width: 80px !important;
        max-width: 80px !important;
        width: 80px !important;
        height: 180px !important;
        vertical-align: bottom !important;
        position: relative !important;
    }
    
    /* First column (FEATURES) stays horizontal */
    .package-section table thead th:first-child,
    section table thead th:first-child {
        writing-mode: horizontal-tb !important;
        height: auto !important;
        min-width: 120px !important;
        max-width: 120px !important;
        width: 120px !important;
        font-size: 0.75rem !important;
        padding: 10px 8px !important;
    }
    
    /* Rotate package name headers - first div only (title) */
    .package-section table thead th:not(:first-child) div:first-child,
    section table thead th:not(:first-child) div:first-child {
        writing-mode: vertical-rl !important;
        transform: rotate(180deg) !important;
        white-space: nowrap !important;
        font-size: 0.8rem !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        margin: 0 auto !important;
        padding: 5px 0 !important;
    }
    
    /* Hide subtitle descriptions on mobile - only show main title */
    .package-section table thead th:not(:first-child) div:last-child,
    section table thead th:not(:first-child) div:last-child {
        display: none !important;
    }
    
    /* Table body cells */
    .package-section table tbody td,
    section table tbody td {
        padding: 10px 5px !important;
        font-size: 0.75rem !important;
        text-align: center !important;
    }
    
    /* First column (feature labels) */
    .package-section table tbody td:first-child,
    section table tbody td:first-child {
        text-align: left !important;
        font-size: 0.75rem !important;
        line-height: 1.3 !important;
        padding: 10px 8px !important;
        min-width: 120px !important;
        max-width: 120px !important;
    }
    
    /* Icons in cells */
    .package-section table tbody td i,
    section table tbody td i {
        font-size: 1.1rem !important;
    }
    
    /* ILM logo in cells */
    .package-section table tbody td img,
    section table tbody td img {
        height: 25px !important;
        width: auto !important;
    }
    
    /* ILM logo in first column */
    .package-section table tbody td:first-child img,
    section table tbody td:first-child img {
        height: 28px !important;
    }
    
    /* Feature Cards */
    .staggered-feature-item,
    div[style*="display: flex"] {
        flex-direction: column !important;
    }
    
    /* Fix staggered feature images on mobile */
    .staggered-feature-image {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 0 20px 0 !important;
        padding: 0 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        display: block !important;
        position: relative !important;
    }
    
    .staggered-feature-image img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        min-height: 0 !important;
        display: block !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: contain !important;
        position: static !important;
    }
    
    .staggered-feature-content {
        width: 100% !important;
        padding: 20px 0 !important;
    }
    
    /* Contact Page - Mobile Specific */
    /* Make grid single column and center content */
    div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }
    
    /* Center contact info flex items */
    div[style*="align-items: start"] {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    /* Hide social media section - target the parent div with margin-top: 40px */
    div[style*="margin-top: 40px"]:has(h4) {
        display: none !important;
    }
    
    /* Buttons */
    a[style*="padding: 15px 40px"] {
        padding: 12px 25px !important;
        font-size: 1rem !important;
    }
    
    /* CTA Buttons Container */
    div[style*="display: flex"][style*="gap: 20px"] {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    /* Section Padding */
    section {
        padding: 40px 0 !important;
    }
    
    /* Container Padding */
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    /* Footer */
    footer div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    /* Images - Make Responsive */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Hero Images */
    .hero-background-image img,
    section img[style*="width: 100%"] {
        width: 100% !important;
        height: auto !important;
    }
    
    /* Client Logos - Full Width */
    .client-logos-section img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
    }
    
    .client-logos-section div {
        width: 100% !important;
    }
    
    /* Certifications - Single Row */
    .certifications-section .certifications-container,
    section[style*="padding: 60px 0"] div[style*="gap: 80px"],
    section[style*="padding: 30px 0"] div[style*="gap: 80px"] {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 15px !important;
        justify-content: center !important;
        align-items: center !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 10px 0 !important;
    }
    
    .certifications-section img,
    section[style*="padding: 60px 0"] div[style*="gap: 80px"] img,
    section[style*="padding: 30px 0"] div[style*="gap: 80px"] img {
        height: 50px !important;
        max-height: 50px !important;
        width: auto !important;
        flex-shrink: 0 !important;
    }
    
    /* Product Cards */
    .package-card,
    div[style*="padding: 30px"] {
        padding: 15px !important;
    }
    
    /* Headings */
    h2 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
    }
    
    h3 {
        font-size: 1.2rem !important;
        line-height: 1.3 !important;
    }
    
    h4 {
        font-size: 1.1rem !important;
    }
    
    /* Paragraphs */
    p {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
    }
    
    /* Why Choose Section - LMS */
    section div[style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Hide desktop-only elements on mobile */
    .desktop-only {
        display: none !important;
    }
}

/* Tablet Styles */
@media (min-width: 769px) and (max-width: 1024px) {
    /* 2 columns for tablets */
    div[style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    div[style*="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .container {
        padding-left: 30px;
        padding-right: 30px;
    }
    
    h1 {
        font-size: 2.5rem !important;
    }
    
    h2 {
        font-size: 2rem !important;
    }
}

/* Desktop - Hide Mobile Menu Button */
@media (min-width: 769px) {
    .mobile-menu-btn {
        display: none !important;
    }
}

/* Touch-friendly spacing */
@media (hover: none) and (pointer: coarse) {
    a, button {
        min-height: 44px;
        min-width: 44px;
    }
    
    .nav-link,
    .dropdown-link {
        padding: 15px 20px !important;
    }
}

/* Landscape Mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .hero-section {
        padding: 60px 0 40px !important;
    }
    
    section {
        padding: 30px 0 !important;
    }
}

/* Small Mobile Devices */
@media (max-width: 480px) {
    h1 {
        font-size: 1.75rem !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
    }
    
    h3 {
        font-size: 1.2rem !important;
    }
    
    p {
        font-size: 0.95rem !important;
    }
    
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Stack all flex items */
    div[style*="display: flex"] {
        flex-direction: column !important;
    }
}