/* Mobile Responsive Enhancements for APEX Luxury Recruitment */

/* Base mobile improvements */
* {
  -webkit-tap-highlight-color: transparent;
}
/* Do NOT disable selection globally; allow inputs to focus/select */
input, textarea, select {
  -webkit-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
}
/* Improve tap behavior on interactive elements */
button, a, [role="button"], .btn {
  touch-action: manipulation;
}

/* Enhanced Mobile Navigation */

@media (max-width: 576px) {
    .mobile-nav {
        padding: 0.5rem 0 !important;
        min-height: 70px !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1030 !important;
        background: white !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    }
    
    .mobile-nav .container-fluid {
        padding: 0 1rem !important;
    }
    
    .mobile-nav-toggler {
        padding: 0.75rem !important;
        font-size: 1.2rem !important;
        border: 2px solid var(--primary-color) !important;
        border-radius: 8px !important;
        background: white !important;
        color: var(--primary-color) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        transition: all 0.3s ease !important;
        position: relative !important;
        z-index: 1050 !important;
        min-height: 44px !important;
        min-width: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .mobile-nav-toggler:hover {
        background: var(--primary-color) !important;
        color: white !important;
        transform: scale(1.05) !important;
    }
    
    .mobile-nav-toggler:focus {
        box-shadow: 0 0 0 0.25rem rgba(212, 175, 55, 0.25) !important;
        outline: none !important;
    }
    
    .mobile-nav-collapse {
        background: white !important;
        border-radius: 12px !important;
        margin-top: 0 !important;
        box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
        padding: 1rem 0 !important;
        border: 1px solid #e9ecef !important;
        position: fixed !important;
        top: 70px !important; /* aligné à la hauteur de la navbar mobile */
        left: 0 !important;
        right: 0 !important;
        z-index: 1040 !important;
        /* Hidden state defaults: ensure it does NOT overlay the page */
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* Only when opened, enable interactions and size */
    .mobile-nav-collapse.show {
        display: block !important;
        height: auto !important;
        max-height: calc(100vh - 120px) !important;
        overflow-y: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* For robustness, completely hide when not opened */
    .mobile-nav-collapse:not(.show) {
        display: none !important;
    }
    
    .mobile-nav-menu {
        padding: 0.5rem !important;
        margin: 0 !important;
    }
    
    .mobile-nav-item {
        margin: 0.25rem 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
        list-style: none !important;
    }
    
    .mobile-nav-item:last-child {
        border-bottom: none !important;
    }
    
    .mobile-nav-link {
        padding: 1rem 1.5rem !important;
        font-size: 1.1rem !important;
        font-weight: 600 !important;
        color: var(--secondary-color) !important;
        transition: all 0.3s ease !important;
        border-radius: 8px !important;
        display: block !important;
        width: 100% !important;
        text-decoration: none !important;
        position: relative !important;
        min-height: 44px !important;
    }
    
    .mobile-nav-link:hover {
        background: linear-gradient(135deg, var(--primary-color), var(--primary-color)) !important;
        color: white !important;
        transform: translateX(5px) !important;
        box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3) !important;
    }
    
    .mobile-nav-link.active {
        background: var(--primary-color) !important;
        color: white !important;
    }
    
    /* Mobile dropdown adjustments */
    .mobile-nav-item .dropdown-menu {
        border: none !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
        border-radius: 8px !important;
        margin-top: 0.5rem !important;
        background: #f8f9fa !important;
        position: static !important;
        float: none !important;
        transform: none !important;
        margin-left: 1rem !important;
    }
    
    .mobile-nav-item .dropdown-item {
        padding: 0.75rem 1.5rem !important;
        font-size: 1rem !important;
        color: var(--secondary-color) !important;
        border-radius: 6px !important;
        margin: 0.25rem !important;
        min-height: 44px !important;
    }
    
    .mobile-nav-item .dropdown-item:hover {
        background: var(--primary-color) !important;
        color: white !important;
    }
    
    /* Mobile logo adjustments */
    .navbar-brand img {
        max-height: 45px !important;
        width: auto !important;
    }
    
    /* Fix for navbar positioning */
     main {
         margin-top: 70px !important;
     }
}

/* Enhanced Mobile Hero Section */
@media (max-width: 576px) {
    .hero-section-premium {
        min-height: calc(100vh - 70px) !important;
        padding: 4rem 0 2rem !important;
        margin-top: 70px !important;
    }
    
    .hero-content-layer {
        padding: 0 1rem !important;
    }
    
    .logo-section-premium {
        margin-bottom: 2rem !important;
    }
    
    .logo-section-premium img {
        max-height: 40px !important;
        width: auto !important;
    }
    
    .main-title-premium {
        font-size: clamp(1.4rem, 6vw, 2.2rem) !important;
        line-height: 1.3 !important;
        margin-bottom: 1rem !important;
        word-wrap: break-word !important;
    }
    
    .main-subtitle-premium {
        font-size: clamp(0.9rem, 3.5vw, 1.1rem) !important;
        line-height: 1.5 !important;
        margin-bottom: 2rem !important;
        padding: 0 0.5rem !important;
    }
    
    /* Mobile Hero Buttons */
    .hero-buttons-premium {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        margin-bottom: 2rem !important;
        padding: 0 1rem !important;
    }
    
    .hero-buttons-premium .btn {
        width: 100% !important;
        padding: 1.25rem 1.5rem !important;
        font-size: 1.1rem !important;
        font-weight: 600 !important;
        border-radius: 12px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        min-height: 56px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.3s ease !important;
    }
    
    .hero-buttons-premium .btn:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 25px rgba(212, 175, 55, 0.3) !important;
    }
    
    .hero-buttons-premium .btn:active {
        transform: translateY(0) !important;
    }
    
    /* Mobile Feature Cards */
    .features-cards-premium {
        padding: 0 0.5rem !important;
    }
    
    .features-cards-premium .row {
        margin: 0 -0.5rem !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .features-cards-premium .col-lg-4 {
        padding: 0 !important;
        margin-bottom: 0 !important;
        width: 100% !important;
        flex: none !important;
        max-width: 100% !important;
    }
    
    .feature-card-premium {
        padding: 1.5rem !important;
        margin-bottom: 0 !important;
        border-radius: 16px !important;
        text-align: center !important;
        min-height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 !important;
    }
    
    .feature-icon-premium {
        font-size: 2rem !important;
        margin-bottom: 1rem !important;
    }
    
    .feature-title-premium {
        font-size: 1.1rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .feature-description-premium {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }
    
    /* Mobile Bottom Slogan */
    .bottom-slogan-premium {
        margin-top: 2rem !important;
        padding: 0 1rem !important;
    }
    
    .bottom-slogan-premium p {
        font-size: clamp(0.8rem, 3vw, 1rem) !important;
        line-height: 1.4 !important;
    }
    
    /* Hide complex background elements on mobile */
    .hero-background-premium .geometric-shapes,
    .hero-background-premium .floating-dots {
        display: none !important;
    }
    
    .hero-background-premium .subtle-pattern {
         opacity: 0.3 !important;
     }
}

/* Comprehensive Mobile Button Improvements */
@media (max-width: 576px) {
    /* Global button improvements */
    .btn {
        min-height: 56px !important;
        min-width: 120px !important;
        padding: 1rem 1.5rem !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        border-radius: 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.3s ease !important;
        position: relative !important;
        overflow: hidden !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        touch-action: manipulation !important;
    }
    
    /* Button hover and active states */
    .btn:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
    }
    
    .btn:active {
        transform: translateY(0) !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    }
    
    .btn:focus {
        box-shadow: 0 0 0 0.25rem rgba(212, 175, 55, 0.25) !important;
        outline: none !important;
    }
    
    /* Primary button styling */
    .btn-primary {
        background: linear-gradient(135deg, var(--primary-color), var(--primary-color)) !important;
        border: 2px solid var(--primary-color) !important;
        color: var(--secondary-color) !important;
        box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3) !important;
    }
    
    .btn-primary:hover {
        background: linear-gradient(135deg, var(--primary-color), var(--primary-color)) !important;
        box-shadow: 0 8px 30px rgba(212, 175, 55, 0.4) !important;
    }
    
    /* Secondary button styling */
    .btn-outline-primary,
    .btn-outline-premium {
        background: transparent !important;
        border: 2px solid var(--primary-color) !important;
        color: var(--primary-color) !important;
        box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2) !important;
    }
    
    .btn-outline-primary:hover,
    .btn-outline-premium:hover {
        background: var(--primary-color) !important;
        color: var(--secondary-color) !important;
        box-shadow: 0 8px 30px rgba(212, 175, 55, 0.3) !important;
    }
    
    /* Button spacing improvements */
    .btn-group,
    .button-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        margin: 1rem 0 !important;
    }
    
    .btn-group .btn,
    .button-group .btn {
        margin: 0 !important;
        width: 100% !important;
    }
    
    /* Form button improvements */
    .form-group .btn,
    .card .btn,
    .modal .btn {
        width: 100% !important;
        margin: 0.5rem 0 !important;
    }
    
    /* Icon button improvements */
    .btn i,
    .btn .fas,
    .btn .fab,
    .btn .far {
        font-size: 1.1rem !important;
        margin-right: 0.5rem !important;
    }
    
    /* Small button adjustments */
    .btn-sm {
        min-height: 44px !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
    }
    
    /* Large button adjustments */
    .btn-lg {
        min-height: 64px !important;
        padding: 1.25rem 2rem !important;
        font-size: 1.2rem !important;
        font-weight: 700 !important;
    }
    
    /* Button ripple effect for touch feedback */
    .btn::after {
        content: '' !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 0 !important;
        height: 0 !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.3) !important;
        transform: translate(-50%, -50%) !important;
        transition: width 0.6s, height 0.6s !important;
    }
    
    .btn:active::after {
        width: 300px !important;
        height: 300px !important;
    }
    
    /* Navigation button improvements */
    .navbar .btn,
    .nav-link {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 0.75rem 1rem !important;
        border-radius: 8px !important;
        margin: 0.25rem !important;
    }
    
    /* Footer button improvements */
     footer .btn,
     .social-links a {
         min-height: 44px !important;
         min-width: 44px !important;
         display: inline-flex !important;
         align-items: center !important;
         justify-content: center !important;
         border-radius: 8px !important;
         margin: 0.25rem !important;
     }
}

/* Enhanced Mobile Form Styling */
@media (max-width: 576px) {
    /* Form container improvements */
    .form-container,
    .admission-form-card {
        margin: 1rem 0 !important;
        border-radius: 16px !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
    }
    
    .form-container .card-body,
    .admission-form-card .card-body {
        padding: 1.5rem !important;
    }
    
    /* Form control improvements */
    .form-control,
    .form-select,
    .form-control-lg,
    .form-select-lg {
        min-height: 56px !important;
        padding: 1rem 1.25rem !important;
        font-size: 1rem !important;
        border-radius: 12px !important;
        border: 2px solid #e9ecef !important;
        background: white !important;
        transition: all 0.3s ease !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }
    
    /* Form control focus states */
    .form-control:focus,
    .form-select:focus {
        border-color: var(--primary-color) !important;
        box-shadow: 0 0 0 0.25rem rgba(212, 175, 55, 0.25) !important;
        background: white !important;
        transform: translateY(-1px) !important;
    }
    
    /* Form label improvements */
    .form-label,
    .col-form-label {
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        margin-bottom: 0.5rem !important;
        color: var(--secondary-color) !important;
        display: block !important;
    }
    
    /* Form group spacing */
    .form-group,
    .mb-3,
    .mb-4 {
        margin-bottom: 1.5rem !important;
    }
    
    /* Input group improvements */
    .input-group {
        border-radius: 12px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    }
    
    .input-group-text {
        min-height: 56px !important;
        padding: 1rem 1.25rem !important;
        font-size: 1rem !important;
        background: #f8f9fa !important;
        border: 2px solid #e9ecef !important;
        border-right: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .input-group .form-control {
        border-left: none !important;
    }
    
    /* Textarea improvements */
    textarea.form-control {
        min-height: 120px !important;
        resize: vertical !important;
        line-height: 1.5 !important;
    }
    
    /* Select dropdown improvements */
    .form-select {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23D4AF37' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
        background-repeat: no-repeat !important;
        background-position: right 1rem center !important;
        background-size: 16px 12px !important;
        padding-right: 3rem !important;
    }
    
    /* Form validation improvements */
    .is-valid {
        border-color: #28a745 !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='m2.3 6.73.6-.63c.1-.1.2-.1.3 0l2.1 2.1c.1.1.2.1.3 0l4.2-4.2c.1-.1.2-.1.3 0l.6.6c.1.1.1.2 0 .3l-4.8 4.8c-.1.1-.2.1-.3 0L2.6 7.03c-.1-.1-.1-.2 0-.3z'/%3e%3c/svg%3e") !important;
    }
    
    .is-invalid {
        border-color: #dc3545 !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") !important;
    }
    
    /* Form help text */
    .form-text {
        font-size: 0.85rem !important;
        margin-top: 0.5rem !important;
        color: #6c757d !important;
    }
    
    /* Checkbox and radio improvements */
    .form-check-input {
        width: 20px !important;
        height: 20px !important;
        margin-top: 0.25rem !important;
        cursor: pointer !important;
    }
    
    .form-check-label {
        font-size: 0.95rem !important;
        cursor: pointer !important;
        padding-left: 0.5rem !important;
        user-select: none !important;
        -webkit-user-select: none !important;
    }
    
    /* Form row improvements */
    .row.g-3 {
        margin-left: -0.75rem !important;
        margin-right: -0.75rem !important;
    }
    
    .row.g-3 > .col,
    .row.g-3 > [class*='col-'] {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    /* Submit button improvements */
    .form-container .btn[type="submit"],
    .admission-form-card .btn[type="submit"] {
        min-height: 56px !important;
        font-size: 1.1rem !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        margin-top: 1rem !important;
    }
    
    /* Form card improvements */
    .card.admission-form-card {
        border: none !important;
        border-radius: 16px !important;
        box-shadow: 0 12px 40px rgba(0,0,0,0.15) !important;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }
    
    /* Mobile form title */
    .admission-form-card h4 {
        font-size: 1.3rem !important;
        font-weight: 700 !important;
        margin-bottom: 1.5rem !important;
        text-align: center !important;
    }
}

/* Mobile Image and Card Optimization */
@media (max-width: 576px) {
    /* Image optimization */
    img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    
    /* Hero logo optimization */
    .hero-logo img {
        max-height: 80px !important;
        width: auto !important;
        margin: 0 auto !important;
    }
    
    /* Card image optimization */
    .card img,
    .feature-card img,
    .testimonial-card img,
    .team-card img {
        border-radius: 12px 12px 0 0 !important;
        max-height: 200px !important;
        object-fit: cover !important;
        width: 100% !important;
    }
    
    /* Feature card improvements */
    .feature-card {
        margin: 0.75rem 0 !important;
        border-radius: 16px !important;
        padding: 1.5rem !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
        transition: all 0.3s ease !important;
    }
    
    .feature-card:hover {
        transform: translateY(-4px) !important;
        box-shadow: 0 12px 40px rgba(0,0,0,0.15) !important;
    }
    
    .feature-card .card-icon {
        width: 60px !important;
        height: 60px !important;
        margin: 0 auto 1rem !important;
        background: linear-gradient(135deg, var(--primary-color), #b8941f) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.5rem !important;
        color: white !important;
    }
    
    .feature-card h5 {
        font-size: 1.1rem !important;
        font-weight: 600 !important;
        margin-bottom: 0.75rem !important;
        text-align: center !important;
    }
    
    .feature-card p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        text-align: center !important;
        margin-bottom: 0 !important;
    }
    
    /* Testimonial card optimization */
    .testimonial-card {
        margin: 1rem 0 !important;
        border-radius: 16px !important;
        padding: 1.5rem !important;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(0,0,0,0.05) !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.08) !important;
    }
    
    .testimonial-card .testimonial-avatar {
        width: 60px !important;
        height: 60px !important;
        border-radius: 50% !important;
        margin: 0 auto 1rem !important;
        object-fit: cover !important;
        border: 3px solid var(--primary-color) !important;
    }
    
    .testimonial-card .testimonial-content {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
        text-align: center !important;
        margin-bottom: 1rem !important;
        font-style: italic !important;
    }
    
    .testimonial-card .testimonial-author {
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        text-align: center !important;
        color: var(--primary-color) !important;
    }
    
    /* Team card optimization */
    .team-card {
        margin: 0.75rem 0 !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        background: white !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
        transition: all 0.3s ease !important;
    }
    
    .team-card:hover {
        transform: translateY(-4px) !important;
        box-shadow: 0 12px 40px rgba(0,0,0,0.15) !important;
    }
    
    .team-card .team-image {
        height: 200px !important;
        object-fit: cover !important;
        width: 100% !important;
    }
    
    .team-card .card-body {
        padding: 1.25rem !important;
        text-align: center !important;
    }
    
    .team-card h5 {
        font-size: 1rem !important;
        font-weight: 600 !important;
        margin-bottom: 0.25rem !important;
    }
    
    .team-card .team-role {
        font-size: 0.85rem !important;
        color: #6c757d !important;
        margin-bottom: 0.5rem !important;
    }
    
    .team-card .team-description {
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
        color: #495057 !important;
    }
    
    /* Stats card optimization */
    .stats-card {
        margin: 0.5rem 0 !important;
        border-radius: 12px !important;
        padding: 1.25rem !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        text-align: center !important;
        transition: all 0.3s ease !important;
    }
    
    .stats-card:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
    }
    
    .stats-card .stats-number {
        font-size: 2rem !important;
        font-weight: 700 !important;
        color: var(--primary-color) !important;
        margin-bottom: 0.25rem !important;
    }
    
    .stats-card .stats-label {
        font-size: 0.85rem !important;
        font-weight: 500 !important;
        color: #495057 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }
    
    /* Service card optimization */
    .service-card {
        margin: 0.75rem 0 !important;
        border-radius: 16px !important;
        padding: 1.5rem !important;
        background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(248,249,250,0.95)) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.08) !important;
        transition: all 0.3s ease !important;
    }
    
    .service-card:hover {
        transform: translateY(-4px) !important;
        box-shadow: 0 12px 40px rgba(0,0,0,0.12) !important;
    }
    
    .service-card .service-icon {
        width: 50px !important;
        height: 50px !important;
        margin: 0 auto 1rem !important;
        background: linear-gradient(135deg, var(--primary-color), #b8941f) !important;
        border-radius: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.25rem !important;
        color: white !important;
    }
    
    .service-card h5 {
        font-size: 1.05rem !important;
        font-weight: 600 !important;
        margin-bottom: 0.75rem !important;
        text-align: center !important;
    }
    
    .service-card p {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
        text-align: center !important;
        margin-bottom: 0 !important;
    }
    
    /* Image lazy loading */
    img[loading="lazy"] {
        transition: opacity 0.3s ease !important;
    }
    
    /* Image container optimization */
    .image-container,
    .image-wrapper {
        position: relative !important;
        overflow: hidden !important;
        border-radius: 12px !important;
    }
    
    .image-container img,
    .image-wrapper img {
        transition: transform 0.3s ease !important;
    }
    
    .image-container:hover img,
    .image-wrapper:hover img {
        transform: scale(1.05) !important;
    }
    
    /* Card grid spacing */
     .row-cols-1 > .col,
     .row-cols-md-2 > .col,
     .row-cols-lg-3 > .col,
     .row-cols-xl-4 > .col {
         padding: 0.5rem !important;
     }
}

/* Final Mobile Navigation Flow Enhancements */
@media (max-width: 576px) {
    /* Body scroll lock when mobile nav is open */
    body.mobile-nav-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    /* Enhanced mobile nav backdrop */
    .mobile-nav-backdrop {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 1040 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: all 0.3s ease !important;
        backdrop-filter: blur(2px) !important;
        -webkit-backdrop-filter: blur(2px) !important;
    }
    
    body.mobile-nav-open .mobile-nav-backdrop {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Full-width dropdown under navbar (stable positioning) */
    body.mobile-nav-open::before {
        content: '' !important;
        position: fixed !important;
        top: 70px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0,0,0,0.45) !important;
        backdrop-filter: blur(2px) !important;
        -webkit-backdrop-filter: blur(2px) !important;
        z-index: 1035 !important;
        pointer-events: none !important;
    }

    .mobile-nav-collapse {
        position: fixed !important;
        top: 70px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        background: #ffffff !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transition: transform 0.2s ease !important;
        z-index: 1040 !important;
        overflow-y: auto !important;
        border-left: none !important;
        box-shadow: 0 8px 25px rgba(0,0,0,0.12) !important;
    }

    .mobile-nav-collapse.show {
        transform: none !important;
        right: auto !important;
        pointer-events: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Enhanced mobile nav header */
    .mobile-nav-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 1rem 1.5rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        background: rgba(0, 0, 0, 0.2) !important;
    }
    
    .mobile-nav-logo {
        height: 40px !important;
        width: auto !important;
    }
    
    .mobile-nav-close {
        background: none !important;
        border: none !important;
        color: var(--primary-color) !important;
        font-size: 1.5rem !important;
        padding: 0.5rem !important;
        border-radius: 50% !important;
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.2s ease !important;
    }
    
    .mobile-nav-close:hover {
        background: rgba(212, 175, 55, 0.1) !important;
        transform: rotate(90deg) !important;
    }
    
    /* Enhanced mobile nav menu */
    .mobile-nav-menu {
        padding: 1rem 0 !important;
        list-style: none !important;
        margin: 0 !important;
    }
    
    .mobile-nav-item {
        margin: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }
    
    .mobile-nav-link {
        display: flex !important;
        align-items: center !important;
        padding: 1rem 1.5rem !important;
        color: #ffffff !important;
        text-decoration: none !important;
        font-weight: 500 !important;
        font-size: 1rem !important;
        transition: all 0.2s ease !important;
        position: relative !important;
    }
    
    .mobile-nav-link:hover {
        background: rgba(212, 175, 55, 0.1) !important;
        color: var(--primary-color) !important;
        padding-left: 2rem !important;
    }
    
    .mobile-nav-link.active {
        background: rgba(212, 175, 55, 0.15) !important;
        color: var(--primary-color) !important;
        font-weight: 600 !important;
    }
    
    .mobile-nav-link.active::before {
        content: '' !important;
        position: absolute !important;
        left: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 4px !important;
        height: 60% !important;
        background: var(--primary-color) !important;
        border-radius: 0 2px 2px 0 !important;
    }
    
    /* Mobile nav icons */
    .mobile-nav-link i {
        margin-right: 1rem !important;
        width: 20px !important;
        text-align: center !important;
        font-size: 1.1rem !important;
    }
    
    /* Mobile nav dropdown improvements */
    .mobile-nav .dropdown-menu {
        background: rgba(0, 0, 0, 0.3) !important;
        border: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        z-index: 2000 !important;
        pointer-events: auto !important;
    }
    
    .mobile-nav .dropdown-item {
        color: #cccccc !important;
        padding: 0.75rem 2rem !important;
        font-size: 0.9rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        transition: all 0.2s ease !important;
    }
    
    .mobile-nav .dropdown-item:hover {
        background: rgba(212, 175, 55, 0.1) !important;
        color: var(--primary-color) !important;
        padding-left: 2.5rem !important;
    }
    
    /* Mobile nav user section */
    .mobile-nav-user {
        padding: 1.5rem !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        background: rgba(0, 0, 0, 0.2) !important;
        margin-top: auto !important;
    }
    
    .mobile-nav-user .btn {
        width: 100% !important;
        margin-bottom: 0.75rem !important;
        padding: 0.75rem !important;
        font-size: 0.9rem !important;
        border-radius: 8px !important;
    }
    
    .mobile-nav-user .btn:last-child {
        margin-bottom: 0 !important;
    }
    
    /* Language selector in mobile nav */
    .mobile-nav-language {
        padding: 1rem 1.5rem !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    .mobile-nav-language .form-select {
        background: rgba(0, 0, 0, 0.3) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: #ffffff !important;
        font-size: 0.9rem !important;
    }
    
    /* Mobile nav toggle button enhancements */
    .mobile-nav-toggler {
        position: relative !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        border: 2px solid var(--primary-color) !important;
        background: transparent !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-nav-toggler:hover {
        background: rgba(212, 175, 55, 0.1) !important;
        transform: scale(1.05) !important;
    }
    
    .mobile-nav-toggler:focus {
        box-shadow: 0 0 0 0.25rem rgba(212, 175, 55, 0.25) !important;
    }
    
    /* Animated hamburger icon */
    .mobile-nav-toggler .navbar-toggler-icon {
        background-image: none !important;
        position: relative !important;
        width: 24px !important;
        height: 2px !important;
        background: var(--primary-color) !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-nav-toggler .navbar-toggler-icon::before,
    .mobile-nav-toggler .navbar-toggler-icon::after {
        content: '' !important;
        position: absolute !important;
        left: 0 !important;
        width: 100% !important;
        height: 2px !important;
        background: var(--primary-color) !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-nav-toggler .navbar-toggler-icon::before {
        top: -8px !important;
    }
    
    .mobile-nav-toggler .navbar-toggler-icon::after {
        top: 8px !important;
    }
    
    /* Animated hamburger when active (use aria-expanded for robustness) */
    .mobile-nav-toggler[aria-expanded="true"] .navbar-toggler-icon {
        background: transparent !important;
    }
    .mobile-nav-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
        top: 0 !important;
        transform: rotate(45deg) !important;
    }
    .mobile-nav-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
        top: 0 !important;
        transform: rotate(-45deg) !important;
    }

/* --- Mobile Navbar Polishing ------------------------------------------ */
@media (max-width: 576px) {
  .mobile-nav {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.92) !important;
    border-bottom: 1px solid #eef0f3 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06) !important;
  }

  .mobile-nav .container-fluid {
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
  }

  /* Logo sizing in mobile */
  .mobile-nav .navbar-logo-svg {
    height: 44px !important;
    width: auto !important;
  }

  /* Nav link spacing */
  .mobile-nav .mobile-nav-link {
    padding: 0.6rem 0.75rem !important;
    font-weight: 600 !important;
  }

  /* Adjust main content offset for smaller navbar */
  main {
    margin-top: 72px !important;
  }
}

/* Ensure navbar dropdowns are interactable and above overlays */
.navbar .dropdown-menu {
    z-index: 2000 !important;
    pointer-events: auto !important;
}
.navbar .dropdown-toggle {
    pointer-events: auto !important;
}
    
    /* Main content positioning when mobile nav is open */
    .mobile-nav-open .main-content {
        transform: translateX(-20px) !important;
        transition: transform 0.3s ease !important;
    }
    
    /* Enhanced mobile nav animations */
    @keyframes slideInRight {
        from {
            transform: translateX(100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    
    .mobile-nav-collapse.show {
        animation: none !important;
    }
    
    /* Stagger animation for nav items */
    .mobile-nav-item {
        opacity: 0;
        transform: translateX(20px);
        animation: slideInItem 0.3s ease forwards;
    }
    
    .mobile-nav-item:nth-child(1) { animation-delay: 0.1s; }
    .mobile-nav-item:nth-child(2) { animation-delay: 0.15s; }
    .mobile-nav-item:nth-child(3) { animation-delay: 0.2s; }
    .mobile-nav-item:nth-child(4) { animation-delay: 0.25s; }
    .mobile-nav-item:nth-child(5) { animation-delay: 0.3s; }
    .mobile-nav-item:nth-child(6) { animation-delay: 0.35s; }
    
    @keyframes slideInItem {
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
}

/* Improve touch targets for mobile */
.btn,
.nav-link,
.navbar-toggler,
.dropdown-toggle,
.form-control,
.form-select {
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Better mobile typography */
body {
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Mobile navigation improvements */
.navbar {
  padding: 0.75rem 1rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.navbar-brand img {
  max-height: 50px;
  width: auto;
}

.navbar-toggler {
  border: none;
  padding: 0.75rem;
  border-radius: 8px;
  background: rgba(212, 175, 55, 0.1);
  color: var(--primary-color);
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25);
}

/* Mobile dropdown improvements */
.navbar-collapse {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 12px;
  margin-top: 0.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.nav-link {
  padding: 1rem 1.25rem;
  font-size: 1.1rem;
  font-weight: 500;
  border-radius: 8px;
  margin: 0.25rem 0;
  transition: all 0.3s ease;
}

.nav-link:hover {
  background: rgba(212, 175, 55, 0.1);
  color: var(--primary-color);
}

/* --- Mobile Auth & Cards Refinement ------------------------------------ */
@media (max-width: 576px) {
  /* Consistent lateral padding for mobile containers */
  .container,
  .container-fluid {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Card refinement for cleaner, professional look */
  .card {
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 28px rgba(0,0,0,0.12) !important;
    overflow: hidden !important;
  }

  .card-header {
    background: #ffffff !important;
    border-bottom: 1px solid #eef0f3 !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    padding: 1rem 1.25rem !important;
  }

  .card-body {
    padding: 1.25rem !important;
  }

  /* Login form spacing and readability */
  .card form .form-label {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
  }

  .card form .mb-3 {
    margin-bottom: 1rem !important;
  }

  /* Make primary action full width and comfortable */
  .card form .btn[type="submit"] {
    width: 100% !important;
    min-height: 52px !important;
    font-size: 1.05rem !important;
    margin-top: 0.5rem !important;
  }

  /* Place helper link underneath with clear touch target */
  .card form .d-flex.justify-content-between.align-items-center {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }

  .card form .d-flex.justify-content-between.align-items-center a {
    display: inline-block !important;
    text-align: center !important;
    padding: 0.75rem !important;
    color: #495057 !important;
  }
}

/* --- Mobile Input-Group Button Fix ------------------------------------- */
@media (max-width: 576px) {
  /* Prevent utility buttons inside inputs from becoming full-width */
  .card .input-group .btn,
  .form-container .input-group .btn,
  .modal .input-group .btn {
    width: auto !important;
    min-width: 44px !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 8px !important;
    background: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    box-shadow: none !important;
  }

  /* Keep only submit buttons full-width for better UX */
  .card .btn:not([type='submit']),
  .form-container .btn:not([type='submit']),
  .modal .btn:not([type='submit']) {
    width: auto !important;
  }
}

/* --- Global Mobile Responsiveness Fixes -------------------------------- */
@media (max-width: 576px) {
  /* Modal sizing: fit viewport and add comfortable spacing */
  .modal-dialog {
    max-width: calc(100% - 1rem) !important;
    margin: 0.5rem auto !important;
  }

  .modal-content {
    border-radius: 12px !important;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding: 1rem 1rem !important;
  }

  /* Tabs: allow horizontal scroll when there are multiple labels */
  .nav-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    border-bottom: 1px solid #eef0f3 !important;
    gap: 0.5rem;
  }

  .nav-tabs .nav-item {
    display: inline-block;
  }

  .nav-tabs .nav-link {
    display: inline-block;
    padding: 0.75rem 1rem !important;
    margin: 0 !important;
  }

  /* Grid gutters: soften horizontal overflow on tight layouts */
  .row {
    margin-left: -0.5rem !important;
    margin-right: -0.5rem !important;
  }

  .row > [class*="col-"] {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  /* Checkbox alignment */
  .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
  }

  .form-check-label {
    padding-left: 0.25rem;
    font-size: 0.95rem;
  }

  /* Buttons: minimum touch target and full width only for primary actions */
  .btn {
    min-height: 44px;
  }

  .btn[type="submit"],
  .btn.btn-primary,
  .btn.btn-warning {
    width: 100%;
  }
}
/* Mobile hero section improvements */
.hero-section-premium {
  min-height: 100vh;
  padding: 6rem 0 3rem;
  position: relative;
}

.hero-content-layer {
  padding: 0 1rem;
}

.main-title-premium {
  font-size: clamp(1.8rem, 8vw, 3.5rem);
  line-height: 1.2;
  margin-bottom: 1.5rem;
  word-wrap: break-word;
}

.main-subtitle-premium {
  font-size: clamp(1rem, 4vw, 1.3rem);
  line-height: 1.5;
  margin-bottom: 2rem;
}

/* Mobile button improvements */
.hero-buttons-premium {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 3rem;
}

.hero-buttons-premium .btn {
  width: 100%;
  padding: 1rem 1.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.hero-buttons-premium .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.3);
}

/* Mobile feature cards */
.feature-card-premium {
  padding: 1.5rem;
  margin-bottom: 1rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.feature-icon-premium {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.feature-title-premium {
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
}

.feature-description-premium {
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Mobile form improvements */
.form-control,
.form-select {
  padding: 0.875rem 1rem;
  font-size: 1rem;
  border-radius: 8px;
  border: 2px solid #e9ecef;
  transition: all 0.3s ease;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25);
}

.form-label {
  font-weight: 500;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

/* Mobile card improvements */
.card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  margin-bottom: 1.5rem;
}

.card-body {
  padding: 1.5rem;
}

/* Mobile spacing improvements */
.container {
  padding-left: 1rem;
  padding-right: 1rem;
}

.row {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

.col-*, .col-sm-*, .col-md-*, .col-lg-*, .col-xl-* {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Mobile text improvements */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.3;
  word-wrap: break-word;
}

/* Mobile image improvements */
img {
  max-width: 100%;
  height: auto;
}

.footer-logo-svg,
.navbar-logo-svg {
  max-height: 50px;
  width: auto;
}

/* Mobile footer improvements */
footer {
  padding: 2rem 0;
}

footer .row {
  gap: 2rem 0;
}

/* Mobile modal improvements */
.modal-dialog {
  margin: 1rem;
}

.modal-content {
  border-radius: 16px;
  border: none;
}

/* Mobile dropdown improvements */
.dropdown-menu {
  border-radius: 12px;
  border: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.dropdown-item {
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
  border-radius: 8px;
  margin: 0.25rem;
}

/* Mobile chatbot improvements */
#chatbot-button {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  font-size: 1.5rem;
}

#chatbot-window {
  width: 90vw;
  max-width: 350px;
  height: 70vh;
  max-height: 500px;
  border-radius: 16px;
}

/* Mobile performance improvements */
.hero-background-premium .geometric-shapes,
.hero-background-premium .floating-dots,
.hero-background-premium .subtle-pattern {
  opacity: 0.3;
}

/* Tablet adjustments */
@media (max-width: 992px) {
  .hero-services-premium { padding: 3rem 0; }
  .quick-stats-premium .row { row-gap: 1rem; }
  .service-card-premium { padding: 1.75rem; }

  /* Homepage hero tweaks */
  .hero-section-premium { padding: 4rem 0; }
  .main-title-premium { font-size: clamp(2rem, 6vw, 2.8rem); line-height: 1.15; }
  .main-subtitle-premium { font-size: clamp(1.1rem, 3.5vw, 1.3rem); }
  .hero-buttons-premium .btn { padding: 0.8rem 1.25rem; }
  .features-cards-premium .feature-card-premium { padding: 1.25rem; }

  /* Contact page: tidy spacing and fonts */
  .hero-contact-premium { padding: 3rem 0; }
  .contact-title-premium { font-size: clamp(1.8rem, 6vw, 2.4rem); }
  .contact-subtitle-premium { font-size: clamp(1rem, 4vw, 1.25rem); }
  .contact-form-card-premium { padding: 1.5rem; border-radius: 16px; }
  .form-title-premium { font-size: clamp(1.4rem, 4.5vw, 1.8rem); }
  .form-subtitle-premium { font-size: 1rem; }
  .contact-info-premium .info-card-premium { padding: 1rem; }
  .faq-premium .faq-item-premium { padding: 1rem; }
  .cta-contact-premium .cta-card-premium { padding: 2rem; }
  .cta-buttons-premium { gap: 0.75rem; }
  .section-title-premium { font-size: clamp(1.8rem, 5.5vw, 2.2rem); }
  .section-subtitle-premium { font-size: clamp(1rem, 4vw, 1.25rem); }
}
  .hero-services-premium { padding: 3rem 0; }
  .quick-stats-premium .row { row-gap: 1rem; }
  .service-card-premium { padding: 1.75rem; }

  /* Homepage hero tweaks */
  .hero-section-premium { padding: 4rem 0; }
  .main-title-premium { font-size: clamp(2rem, 6vw, 2.8rem); line-height: 1.15; }
  .main-subtitle-premium { font-size: clamp(1.1rem, 3.5vw, 1.3rem); }
  .hero-buttons-premium .btn { padding: 0.8rem 1.25rem; }
  .features-cards-premium .feature-card-premium { padding: 1.25rem; }

  /* Contact page: tidy spacing and fonts */
  .hero-contact-premium { padding: 3rem 0; }
  .contact-title-premium { font-size: clamp(1.8rem, 6vw, 2.4rem); }
  .contact-subtitle-premium { font-size: clamp(1rem, 4vw, 1.25rem); }
  .contact-form-card-premium { padding: 1.5rem; border-radius: 16px; }
  .form-title-premium { font-size: clamp(1.4rem, 4.5vw, 1.8rem); }
  .form-subtitle-premium { font-size: 1rem; }
  .contact-info-premium .info-card-premium { padding: 1rem; }
  .faq-premium .faq-item-premium { padding: 1rem; }
  .cta-contact-premium .cta-card-premium { padding: 2rem; }
  .cta-buttons-premium { gap: 0.75rem; }
  .section-title-premium { font-size: clamp(1.8rem, 5.5vw, 2.2rem); }
  .section-subtitle-premium { font-size: clamp(1rem, 4vw, 1.25rem); }


/* Small tablets and large phones */
@media (max-width: 768px) {
  .hero-services-premium { padding: 2.5rem 0; }
  .services-title-premium { font-size: clamp(1.6rem, 6vw, 2.2rem); }
  .services-subtitle-premium { font-size: clamp(1rem, 4.5vw, 1.25rem); }
  .quick-stats-premium .row { gap: 1rem; }
  .service-card-premium { border-radius: 16px; padding: 1.5rem; box-shadow: var(--shadow); }
  .service-title-premium { font-size: 1.2rem; }
  .service-description-premium { font-size: 0.95rem; }
  .feature-tag { font-size: 0.8rem; margin: 0.2rem; }

  /* Homepage hero & cards */
  .hero-section-premium { padding: 3rem 0; min-height: auto; }
  .hero-section-premium .geometric-shapes,
  .hero-section-premium .floating-dots,
  .hero-section-premium .subtle-pattern { display: none !important; }
  .main-title-premium { font-size: clamp(1.8rem, 7vw, 2.4rem); line-height: 1.15; }
  .main-subtitle-premium { font-size: clamp(1rem, 4.5vw, 1.25rem); }
  .hero-buttons-premium { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
  .hero-buttons-premium .btn { width: 100%; }
  .features-cards-premium .row { gap: 1rem; }
  .feature-title-premium { font-size: 1.05rem; }
  .feature-description-premium { font-size: 0.95rem; }
  .navbar-logo-svg { height: 48px !important; }

  /* About page: tidy spacing and font sizes */
  .hero-about-premium { padding: 3rem 0; }
  .hero-about-premium .geometric-shapes,
  .hero-about-premium .floating-dots,
  .hero-about-premium .subtle-pattern { display: none !important; }
  .about-title-premium { font-size: clamp(1.6rem, 6.5vw, 2.2rem); line-height: 1.15; }
  .about-subtitle-premium { font-size: clamp(1rem, 4.2vw, 1.25rem); }
  .quick-stats-premium .row { gap: 0.75rem; }
  .mission-vision-premium { padding: 3rem 0; }
  .mission-card-premium { padding: 1.5rem !important; border-radius: 16px !important; }
  .vision-circle-premium { width: 220px !important; height: 220px !important; }
  .values-premium { padding: 3rem 0; }
  .value-card-premium { padding: 1.5rem !important; border-radius: 16px !important; }

  /* Contact page */
  .hero-contact-premium { padding: 2.75rem 0; }
  .contact-title-premium { font-size: clamp(1.6rem, 6.5vw, 2.1rem); }
  .contact-subtitle-premium { font-size: clamp(1rem, 4.5vw, 1.2rem); }
  .contact-form-premium { padding: 2.5rem 0; }
  .contact-form-card-premium { padding: 1.4rem; border-radius: 14px; }
  .form-title-premium { font-size: clamp(1.3rem, 5vw, 1.6rem); }
  .form-subtitle-premium { font-size: 0.95rem; }
  .contact-quick-info-premium { gap: 0.75rem; }
  .contact-info-premium .info-card-premium { padding: 1rem; }
  .faq-premium .faq-item-premium { padding: 0.9rem; }
  .cta-contact-premium .cta-card-premium { padding: 1.75rem; }
  .cta-buttons-premium { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
}

/* Phones */
@media (max-width: 576px) {
  /* Reduce side paddings for tighter mobile layout */
  .container, .container-fluid { padding-left: 1rem; padding-right: 1rem; }

  /* Simplify heavy decorative layers on mobile */
  .hero-services-premium .geometric-shapes,
  .hero-services-premium .floating-dots,
  .hero-services-premium .subtle-pattern { display: none !important; }

  .hero-services-premium { padding: 2rem 0; }
  .services-title-premium { font-size: clamp(1.4rem, 7vw, 2rem); }
  .services-subtitle-premium { font-size: clamp(0.95rem, 4.2vw, 1.15rem); }

  .quick-stats-premium .col-6 { padding-left: 0.5rem; padding-right: 0.5rem; }

  /* Cards: make them breathe and auto-height on mobile */
  .service-card-premium { padding: 1.25rem; border-radius: 14px; box-shadow: var(--shadow); height: auto; }
  .service-title-premium { font-size: 1.1rem; }
  .service-description-premium { font-size: 0.95rem; }
  .service-features { margin-bottom: 1rem; }
  .feature-tag { font-size: 0.75rem; margin: 0.15rem; padding: 0.2rem 0.6rem; }

  /* Navbar spacing tweaks */
  .navbar .navbar-brand { font-size: 1rem; }
  .navbar .nav-link { padding: 0.5rem 0.75rem; }

  /* Homepage hero: compact and readable */
  .hero-section-premium { 
    padding: 2rem 0 !important; 
    min-height: auto !important; 
    margin-top: 70px !important;
  }
  .hero-section-premium .geometric-shapes,
  .hero-section-premium .floating-dots,
  .hero-section-premium .subtle-pattern { display: none !important; }
  .main-title-premium { 
    font-size: clamp(1.6rem, 8.5vw, 2.2rem) !important; 
    line-height: 1.15 !important; 
    letter-spacing: 0.5px !important; 
    word-wrap: break-word !important;
    margin-bottom: 1rem !important;
  }
  /* Ensure hero title line wraps and animations don't break layout */
  .title-line-premium {
    font-size: clamp(1.6rem, 8.5vw, 2.2rem) !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
    white-space: normal !important;
  }
  .typing-effect {
    white-space: normal !important;
    animation: none !important;
    border-right: none !important;
  }
  .main-subtitle-premium { 
    font-size: clamp(0.95rem, 4.2vw, 1.15rem) !important; 
    padding: 0 0.5rem !important;
    margin-bottom: 2rem !important;
  }
  .footer-logo-svg, .navbar-logo-svg { height: 42px !important; }
  .hero-buttons-premium { 
    display: grid !important; 
    grid-template-columns: 1fr !important; 
    gap: 0.75rem !important; 
    padding: 0 1rem !important;
    margin-bottom: 2rem !important;
  }
  .hero-buttons-premium .btn { 
    width: 100% !important; 
    padding: 0.75rem 1rem !important; 
    font-size: 0.9rem !important;
  }
  
  /* Features Cards - CRITICAL FIX */
  .features-cards-premium .row {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    margin: 0 !important;
  }
  
  .features-cards-premium .col-lg-4,
  .features-cards-premium .col-md-6 {
    width: 100% !important;
    flex: none !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .features-cards-premium .feature-card-premium { 
    padding: 1.5rem !important; 
    margin: 0 !important;
    width: 100% !important;
    min-height: auto !important;
  }
  .feature-title-premium { 
    font-size: 1.1rem !important; 
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
  }
  .feature-description-premium { 
    font-size: 0.9rem !important; 
    line-height: 1.4 !important;
  }
  
  /* Admission Form Section - CRITICAL FIX */
  .admission-form-card {
    margin: 1rem 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.15) !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
  }
  
  .admission-form-card .card-body {
    padding: 1.5rem !important;
  }
  
  .admission-form-card h4 {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    margin-bottom: 1.25rem !important;
    text-align: center !important;
  }
  
  /* Form inputs mobile optimization */
  .admission-form-card .row.g-3 {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    margin: 0 !important;
  }
  
  .admission-form-card .col-md-6,
  .admission-form-card .col-12 {
    width: 100% !important;
    flex: none !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Stats section: stack comfortably - CRITICAL FIX */
  .stat-card { 
    padding: 1rem !important; 
    margin: 0 !important;
    width: 100% !important;
  }
  .stat-number { 
    font-size: clamp(1.4rem, 8vw, 2rem) !important; 
  }
  .stat-label { 
    font-size: 0.9rem !important; 
  }
  
  /* Stats Section Container - CRITICAL FIX */
  #stats .row,
  .stats-section .row,
  .py-5:has(.stat-card) .row {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    margin: 0 !important;
  }
  
  #stats .col-md-3,
  #stats .col-sm-6,
  .stats-section .col-md-3,
  .stats-section .col-sm-6,
  .py-5:has(.stat-card) .col-md-3,
  .py-5:has(.stat-card) .col-sm-6 {
    width: 100% !important;
    flex: none !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* About page: compact layout */
  .hero-about-premium { 
    padding: 2rem 0 !important; 
    min-height: auto !important;
    margin-top: 70px !important;
  }
  .hero-about-premium .geometric-shapes,
  .hero-about-premium .floating-dots,
  .hero-about-premium .subtle-pattern { display: none !important; }
  .about-title-premium { 
    font-size: clamp(1.4rem, 7.5vw, 2rem) !important; 
    line-height: 1.15 !important; 
    word-wrap: break-word !important;
    margin-bottom: 1rem !important;
  }
  .about-subtitle-premium { 
    font-size: clamp(0.95rem, 4.5vw, 1.15rem) !important; 
    margin-bottom: 2rem !important;
  }
  
  /* Quick Stats - CRITICAL FIX */
  .quick-stats-premium .row { 
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    margin: 0 !important;
  }
  
  /* Show 2 stats per row on phones */
  .quick-stats-premium .col-3 { 
    flex: 0 0 48% !important; 
    max-width: 48% !important; 
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .quick-stats-premium .col-md-2 {
    flex: 0 0 48% !important;
    max-width: 48% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .quick-stat-item {
    padding: 1rem !important;
    margin: 0 !important;
    width: 100% !important;
  }
  
  .stat-number-premium { 
    font-size: clamp(1.3rem, 8vw, 1.8rem) !important; 
  }
  
  /* Mission Vision Section - CRITICAL FIX */
  .mission-vision-premium { 
    padding: 2rem 0 !important; 
  }
  
  .mission-vision-premium .row.g-5 {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
    margin: 0 !important;
  }
  
  .mission-vision-premium .col-lg-6 {
    width: 100% !important;
    flex: none !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .mission-card-premium { 
    padding: 1.5rem !important; 
    margin: 0 !important;
    width: 100% !important;
  }
  
  .vision-circle-premium { 
    width: 200px !important; 
    height: 200px !important; 
  }
  
  /* Values Section - CRITICAL FIX */
  .values-premium { 
    padding: 2rem 0 !important; 
  }
  
  .values-premium .row.g-4 {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    margin: 0 !important;
  }
  
  .values-premium .col-lg-4,
  .values-premium .col-md-6 {
    width: 100% !important;
    flex: none !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .value-card-premium { 
    padding: 1.5rem !important; 
    margin: 0 !important;
    width: 100% !important;
    min-height: auto !important;
  }
  
  /* Team Section - CRITICAL FIX */
  .team-premium { 
    padding: 2rem 0 !important; 
  }
  
  .team-premium .row {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    margin: 0 !important;
  }
  
  .team-premium .col-lg-3,
  .team-premium .col-md-6 {
    width: 100% !important;
    flex: none !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .team-card-premium { 
    padding: 1.5rem !important; 
    margin: 0 !important;
    width: 100% !important;
  }

  /* Dream Team mobile image clarity and sizing */
  .team-premium .avatar-ring {
    width: 120px !important;
    height: 120px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #ffffff !important; /* cercle blanc comme desktop */
    border: 3px solid #D4AF37 !important; /* anneau interne doré */
    outline: 3px solid #FFD700 !important; /* anneau externe doré */
    outline-offset: 6px !important;
    box-shadow: 0 10px 22px rgba(0,0,0,0.12) !important;
    position: relative !important;
    margin: 0 auto !important;
  }

  .team-premium .avatar-ring img,
  .team-premium .team-photo-premium img {
    filter: brightness(1.12) contrast(1.06) saturate(1.06) !important; /* clarté proche du desktop */
    object-fit: cover !important;
    object-position: center 22% !important; /* focus visage léger vers le haut */
    border: none !important;
    border-radius: 50% !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  /* Tighter card content spacing on phones */
  .team-premium .team-card-premium {
    padding: 1.25rem !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    border: 1px solid rgba(212, 175, 55, 0.20) !important;
  }

  /* Generic responsive image fallback (Bootstrap already provides .img-fluid) */
  
  /* CRITICAL FIXES for remaining responsive issues */
  
  /* General container fixes */
  .container, .container-fluid {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Section spacing fixes */
  section, .section, .py-5, .py-4 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  /* Row and column fixes */
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 1rem !important;
  }
  
  /* Text alignment fixes */
  h1, h2, h3, h4, h5, h6, p, .lead, .display-5 {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* Button fixes */
  .btn {
    white-space: normal !important;
    word-wrap: break-word !important;
    max-width: 100% !important;
  }
  
  /* Image responsive fixes */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Card image fixes */
  .card img, .feature-card img, .course-card img, .facility-card img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }
  
  /* Navigation spacing fix */
  body {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  
  /* Main content positioning */
  main, #main-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  img { max-width: 100%; height: auto; }

  /* Contact page: compact mobile layout */
  .hero-contact-premium { padding: 2rem 0; }
  .contact-title-premium { font-size: clamp(1.4rem, 8vw, 2rem); }
  .contact-subtitle-premium { font-size: clamp(0.95rem, 4.8vw, 1.15rem); }
  .contact-form-premium { padding: 2rem 0; }
  .contact-form-card-premium { padding: 1.1rem; border-radius: 12px; }
  .contact-form-premium-form .form-group-premium { margin-bottom: 0.85rem; }
  .form-label-premium { font-size: 0.95rem; }
  .form-control-premium, .form-check-input-premium { font-size: 0.95rem; padding: 0.6rem 0.75rem; }
  .btn-submit-premium { width: 100%; padding: 0.8rem 1rem; }
  .contact-quick-info-premium { gap: 0.5rem; }
  .contact-info-premium .info-card-premium { padding: 0.9rem; }
  .faq-premium { padding: 2rem 0; }
  .faq-premium .faq-item-premium { padding: 0.75rem; }
  .cta-contact-premium .cta-card-premium { padding: 1.5rem; }
  .cta-buttons-premium { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
  .cta-buttons-premium .btn { width: 100%; }

  /* Generic section titles across pages */
  .section-title-premium { font-size: clamp(1.3rem, 7.5vw, 1.8rem); }
  .section-subtitle-premium { font-size: clamp(0.95rem, 4.5vw, 1.15rem); }
}

/* Course Page Mobile Styles */
@media (max-width: 576px) {
    /* Course Detail Page */
    .py-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .d-flex.justify-content-between.align-items-center.mb-3 {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
    }

    .d-flex.justify-content-between.align-items-center.mb-3 h1 {
        font-size: 1.5rem !important;
        margin-bottom: 0 !important;
    }

    .d-flex.justify-content-between.align-items-center.mb-3 .btn {
        width: 100% !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
    }

    .card.shadow-sm {
        border-radius: 0.75rem !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    }

    .card-body {
        padding: 1.5rem !important;
    }

    .card-body .row {
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    .card-body .col-md-8,
    .card-body .col-md-4 {
        width: 100% !important;
        flex: none !important;
        max-width: 100% !important;
    }

    .card-body h2 {
        font-size: 1.25rem !important;
        margin-bottom: 1rem !important;
    }

    .card-body .text-muted {
        font-size: 0.875rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1rem !important;
    }

    .row.mt-3 {
        margin-top: 1rem !important;
    }

    .row.mt-3 .col-sm-3 {
        width: 100% !important;
        flex: none !important;
        max-width: 100% !important;
        margin-bottom: 0.25rem !important;
    }

    .row.mt-3 .col-sm-9 {
        width: 100% !important;
        flex: none !important;
        max-width: 100% !important;
        margin-bottom: 1rem !important;
    }

    .row.mt-3 dt {
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        color: var(--primary-color) !important;
        margin-bottom: 0.25rem !important;
    }

    .row.mt-3 dd {
        font-size: 0.875rem !important;
        color: #333 !important;
        margin-bottom: 0.5rem !important;
    }

    .mt-4 {
        margin-top: 1.5rem !important;
        text-align: center !important;
    }

    .mt-4 .btn {
        width: 100% !important;
        padding: 0.875rem 1.5rem !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        border-radius: 0.5rem !important;
        background: linear-gradient(135deg, var(--primary-color) 0%, #f9e076 100%) !important;
        border: none !important;
        color: white !important;
        box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3) !important;
        transition: all 0.3s ease !important;
    }

    .mt-4 .btn:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4) !important;
    }

    .mt-4 .btn:active {
        transform: translateY(0) !important;
    }

    .img-fluid.rounded {
        width: 100% !important;
        height: auto !important;
        max-height: 200px !important;
        object-fit: cover !important;
        border-radius: 0.5rem !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    }
}

/* Contact Page Mobile Styles */
@media (max-width: 576px) {
    /* Contact Hero Section */
    .hero-contact-premium {
        min-height: 60vh !important;
        padding: 2rem 0 !important;
    }

    .hero-contact-premium .min-vh-80 {
        min-height: auto !important;
    }

    .hero-contact-premium .contact-title-premium {
        font-size: clamp(1.75rem, 5vw, 2.5rem) !important;
        margin-bottom: 1rem !important;
        line-height: 1.2 !important;
    }

    .hero-contact-premium .contact-subtitle-premium {
        font-size: clamp(0.875rem, 3vw, 1rem) !important;
        margin-bottom: 2rem !important;
        padding: 0 1rem !important;
    }

    .contact-quick-info-premium {
        margin-bottom: 2rem !important;
    }

    .contact-quick-info-premium .row {
        gap: 1rem !important;
    }

    .contact-quick-info-premium .col-6 {
        flex: 0 0 48% !important;
        max-width: 48% !important;
        margin-bottom: 0.5rem !important;
    }

    .contact-quick-item {
        padding: 1rem 0.5rem !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 0.75rem !important;
        backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        transition: all 0.3s ease !important;
    }

    .contact-quick-item:active {
        transform: scale(0.95) !important;
    }

    .contact-quick-item .contact-icon {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem !important;
        color: var(--primary-color) !important;
    }

    .contact-quick-item .contact-label {
        font-size: 0.75rem !important;
        font-weight: 500 !important;
        display: block !important;
        text-align: center !important;
    }

    /* Contact Form Section */
    .contact-form-premium {
        padding: 3rem 0 !important;
    }

    .contact-form-premium .container .row {
        flex-direction: column !important;
        gap: 2rem !important;
    }

    .contact-form-premium .col-lg-8,
    .contact-form-premium .col-lg-4 {
        width: 100% !important;
        flex: none !important;
        max-width: 100% !important;
    }

    .contact-form-card-premium {
        padding: 1.5rem !important;
        border-radius: 1rem !important;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1) !important;
    }

    .form-header-premium {
        margin-bottom: 1.5rem !important;
        text-align: center !important;
    }

    .form-title-premium {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .form-subtitle-premium {
        font-size: 0.875rem !important;
        color: #666 !important;
    }

    .contact-form-premium-form .row {
        gap: 1rem !important;
    }

    .contact-form-premium-form .col-md-6 {
        width: 100% !important;
        flex: none !important;
        max-width: 100% !important;
    }

    .form-group-premium {
        margin-bottom: 0 !important;
    }

    .form-label-premium {
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        margin-bottom: 0.5rem !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }

    .form-control-premium {
        padding: 0.875rem 1rem !important;
        font-size: 1rem !important;
        border-radius: 0.5rem !important;
        border: 2px solid #e9ecef !important;
        transition: all 0.3s ease !important;
        background: white !important;
    }

    .form-control-premium:focus {
        border-color: var(--primary-color) !important;
        box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25) !important;
        outline: none !important;
    }

    select.form-control-premium {
        padding-right: 2.5rem !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
        background-position: right 0.75rem center !important;
        background-repeat: no-repeat !important;
        background-size: 1rem !important;
        appearance: none !important;
    }

    textarea.form-control-premium {
        min-height: 120px !important;
        resize: vertical !important;
    }

    .form-check-premium {
        padding-left: 1.75rem !important;
        margin-bottom: 1rem !important;
    }

    .form-check-input-premium {
        width: 1.25rem !important;
        height: 1.25rem !important;
        margin-left: -1.75rem !important;
        margin-top: 0.125rem !important;
        border: 2px solid #e9ecef !important;
        border-radius: 0.25rem !important;
        transition: all 0.3s ease !important;
    }

    .form-check-input-premium:checked {
        background-color: var(--primary-color) !important;
        border-color: var(--primary-color) !important;
    }

    .form-check-label-premium {
        font-size: 0.875rem !important;
        cursor: pointer !important;
        user-select: none !important;
    }

    .btn-submit-premium {
        width: 100% !important;
        padding: 1rem !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        border-radius: 0.5rem !important;
        background: linear-gradient(135deg, var(--primary-color) 0%, #f9e076 100%) !important;
        border: none !important;
        color: white !important;
        box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3) !important;
        transition: all 0.3s ease !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important;
    }

    .btn-submit-premium:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4) !important;
    }

    .btn-submit-premium:active {
        transform: translateY(0) !important;
    }

    .btn-submit-premium:disabled {
        opacity: 0.6 !important;
        cursor: not-allowed !important;
    }

    /* Contact Info Card */
    .contact-info-premium {
        margin-top: 0 !important;
    }

    .info-card-premium {
        padding: 1.5rem !important;
        border-radius: 1rem !important;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1) !important;
    }

    .info-header {
        margin-bottom: 1.5rem !important;
        text-align: center !important;
    }

    .info-title {
        font-size: 1.25rem !important;
        margin-bottom: 0.5rem !important;
    }

    .info-subtitle {
        font-size: 0.875rem !important;
        color: #666 !important;
    }

    .info-item {
        display: flex !important;
        align-items: flex-start !important;
        gap: 1rem !important;
        padding: 1rem !important;
        margin-bottom: 0.5rem !important;
        border-radius: 0.5rem !important;
        transition: all 0.3s ease !important;
    }

    .info-item:active {
        background: rgba(212, 175, 55, 0.05) !important;
    }

    .info-icon {
        width: 2.5rem !important;
        height: 2.5rem !important;
        background: linear-gradient(135deg, var(--primary-color) 0%, #f9e076 100%) !important;
        border-radius: 0.5rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: white !important;
        font-size: 1rem !important;
        flex-shrink: 0 !important;
    }

    .info-content h5 {
        font-size: 1rem !important;
        margin-bottom: 0.25rem !important;
        color: #333 !important;
    }

    .info-content p {
        font-size: 0.875rem !important;
        color: #666 !important;
        margin: 0 !important;
    }

    /* Hide decorative elements on mobile */
    .hero-background-premium .geometric-shapes,
    .hero-background-premium .floating-dots,
    .hero-background-premium .subtle-pattern {
        display: none !important;
    }
    
    /* Mobile Course Cards */
    .course-card {
        margin: 0 0 1.5rem 0 !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
        transition: all 0.3s ease !important;
        width: 100% !important;
    }
    
    .course-card:hover {
        transform: translateY(-4px) !important;
        box-shadow: 0 12px 40px rgba(0,0,0,0.15) !important;
    }
    
    .course-card .card-body {
        padding: 1.5rem !important;
    }
    
    .course-card .course-image {
        margin-bottom: 1rem !important;
        text-align: center !important;
    }
    
    .course-card .course-image i {
        font-size: 3rem !important;
        margin: 0 auto !important;
        display: block !important;
    }
    
    .course-card .card-title {
        font-size: 1.2rem !important;
        font-weight: 700 !important;
        margin-bottom: 0.75rem !important;
        text-align: center !important;
    }
    
    .course-card .card-text {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        margin-bottom: 1rem !important;
        text-align: center !important;
    }
    
    .course-card .course-features {
        margin-bottom: 1.25rem !important;
    }
    
    .course-card .course-features .d-flex {
        margin-bottom: 0.5rem !important;
        font-size: 0.85rem !important;
    }
    
    .course-card .btn {
        width: 100% !important;
        padding: 0.875rem !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        min-height: 48px !important;
    }
    
    /* Mobile Facility Cards */
    .facility-card {
        background: rgba(255, 255, 255, 0.05) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 16px !important;
        padding: 1.5rem !important;
        margin: 0 0 1rem 0 !important;
        text-align: center !important;
        transition: all 0.3s ease !important;
        width: 100% !important;
    }
    
    .facility-card:hover {
        background: rgba(255, 255, 255, 0.08) !important;
        transform: translateY(-2px) !important;
    }
    
    .facility-card .facility-icon {
        margin-bottom: 1rem !important;
    }
    
    .facility-card .facility-icon i {
        font-size: 2.5rem !important;
        margin: 0 auto !important;
        display: block !important;
    }
    
    .facility-card h5 {
        font-size: 1.1rem !important;
        font-weight: 600 !important;
        margin-bottom: 0.75rem !important;
    }
    
    .facility-card p {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0 !important;
    }
    
    /* Mobile Stats Cards */
    .stat-card {
        background: rgba(255, 255, 255, 0.03) !important;
        border-radius: 12px !important;
        padding: 1.25rem !important;
        margin: 0 0 1rem 0 !important;
        text-align: center !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        transition: all 0.3s ease !important;
        width: 100% !important;
    }
    
    .stat-card:hover {
        background: rgba(255, 255, 255, 0.05) !important;
        transform: translateY(-2px) !important;
    }
    
    .stat-card .stat-number {
        font-size: 2rem !important;
        font-weight: 700 !important;
        color: var(--primary-color) !important;
        margin-bottom: 0.25rem !important;
        display: block !important;
    }
    
    .stat-card .stat-label {
        font-size: 0.8rem !important;
        font-weight: 500 !important;
        color: rgba(255, 255, 255, 0.8) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        margin: 0 !important;
    }
    
    /* Mobile Course Section */
    #courses .row {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        margin: 0 !important;
    }
    
    #courses .col-lg-4,
    #courses .col-md-6 {
        width: 100% !important;
        flex: none !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Mobile Facilities Section */
    .py-5:has(.facility-card) .row {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        margin: 0 !important;
    }
    
    .py-5:has(.facility-card) .col-lg-3,
    .py-5:has(.facility-card) .col-md-6 {
        width: 100% !important;
        flex: none !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Mobile Stats Section */
    .py-5:has(.stat-card) .row {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        margin: 0 !important;
    }
    
    .py-5:has(.stat-card) .col-md-3,
    .py-5:has(.stat-card) .col-sm-6 {
        width: 100% !important;
        flex: none !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Mobile Admission Form Card */
    .admission-form-card {
        margin: 1rem 0 !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        box-shadow: 0 12px 40px rgba(0,0,0,0.15) !important;
        transition: all 0.3s ease !important;
        width: 100% !important;
    }
    
    .admission-form-card:hover {
        transform: translateY(-4px) !important;
        box-shadow: 0 16px 50px rgba(0,0,0,0.2) !important;
    }
    
    .admission-form-card .card-body {
        padding: 1.5rem !important;
    }
    
    .admission-form-card h4 {
        font-size: 1.2rem !important;
        font-weight: 700 !important;
        margin-bottom: 1.25rem !important;
        text-align: center !important;
    }
    
    /* Mobile CTA Section */
    .cta-section .row {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
        text-align: center !important;
    }
    
    .cta-section .col-lg-8,
    .cta-section .col-lg-4 {
        width: 100% !important;
        flex: none !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .cta-title {
        font-size: clamp(1.3rem, 5vw, 1.8rem) !important;
        font-weight: 700 !important;
        margin-bottom: 0.75rem !important;
        line-height: 1.3 !important;
    }
    
    .cta-subtitle {
        font-size: clamp(0.9rem, 3.5vw, 1.1rem) !important;
        margin-bottom: 1rem !important;
        line-height: 1.4 !important;
    }
    
    .cta-button {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto !important;
        padding: 1rem 1.5rem !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        border-radius: 12px !important;
        min-height: 56px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Mobile Special Training Card */
    .special-training-card {
        margin: 1rem 0 !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
        transition: all 0.3s ease !important;
        width: 100% !important;
        min-height: 200px !important;
    }
    
    .special-training-card:hover {
        transform: translateY(-4px) !important;
        box-shadow: 0 12px 40px rgba(0,0,0,0.15) !important;
    }
    
    /* Mobile Section Titles */
    .display-5 {
        font-size: clamp(1.4rem, 6vw, 2rem) !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
    }
    
    .lead {
        font-size: clamp(0.9rem, 3.5vw, 1.1rem) !important;
        line-height: 1.4 !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Mobile Row and Column Fixes */
    .container .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .container .col-lg-3,
    .container .col-lg-4,
    .container .col-lg-6,
    .container .col-lg-8,
    .container .col-md-3,
    .container .col-md-4,
    .container .col-md-6,
    .container .col-md-8,
    .container .col-sm-6 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
/* --- Mobile Navbar High-Contrast Fix ------------------------------------ */
@media (max-width: 576px) {
  /* Force a white navbar background on small screens for readability */
  .navbar,
  .theme-black-gold .navbar {
    background-color: #ffffff !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
    /* Bootstrap 5 navbar color variables for consistent link colors */
    --bs-navbar-color: #212529;
    --bs-navbar-hover-color: #0a0a0a;
    --bs-navbar-active-color: #0a0a0a;
    --bs-navbar-brand-color: #212529;
    --bs-navbar-brand-hover-color: #0a0a0a;
    --bs-navbar-toggler-border-color: #dddddd;
  }

  
  /* Ensure text contrasts well on a white background */
  .navbar .nav-link,
  .navbar .navbar-brand,
  .theme-black-gold .navbar .nav-link,
  .theme-black-gold .navbar .navbar-brand,
  .mobile-nav-header,
  .mobile-nav-link {
    color: #212529 !important;
    text-shadow: none !important;
  }

  /* Keep the mobile dropdown panel white as well */
  .mobile-nav-collapse,
  .mobile-nav-menu {
    background-color: #ffffff !important;
  }

  /* Toggler/close button should be visible on white */
  .navbar-toggler,
  .mobile-nav-close {
    color: #212529 !important;
    border-color: #dddddd !important;
  }

  /* Make sure brand logo isn't dimmed */
  .navbar-brand img,
  .navbar-logo-svg {
    filter: none !important;
    opacity: 1 !important;
  }
}