/* ========================================
   Responsive Styles - The Management Gurus
   ======================================== */

/* Desktop (1200px+) */
@media (min-width: 1200px) {
    .container { max-width: 1200px; }
}

/* Tablet (768px - 1199px) */
@media (max-width: 1199px) {
    :root {
        --text-h1: 48px;
        --text-h2: 36px;
        --section-padding: 60px;
    }
    .hero-container { gap: var(--space-2xl); }
    .hero-illustration { max-width: 400px; }
    .roadmap-stages { grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); }
    .timeline-line { display: none; }
    .colleges-carousel-wrapper { gap: var(--space-md); }
    .college-card { flex: 0 0 calc(50% - var(--space-lg)); }
    .college-logo { height: 240px; }
    .testimonial-card { flex: 0 0 calc(50% - var(--space-lg) / 2); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
    .decorative-circle { display: none; }
}

/* Tablet/Small Desktop - Image Centering Fix (300px - 767px) */
@media (max-width: 767px) and (min-width: 300px) {
    .hero-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
    }
    
    .hero-visual {
        order: -1 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 auto 20px !important;
    }
    
    .hero-image-container {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 420px !important;
        margin: 0 auto !important;
    }
    
    .hero-main-img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }
    
    .hero-content {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
}

/* Mobile (< 768px) */
@media (max-width: 767px) {
    :root {
        --text-h1: 32px;
        --text-h2: 26px;
        --text-h3: 20px;
        --section-padding: 48px;
        --card-padding: 20px;
    }
    .container { padding: 0 var(--space-md); }
    
    /* Header & Navigation - Mobile */
    .header-container {
        padding: var(--space-sm) var(--space-md);
    }
    
    .site-logo {
        font-size: 18px;
    }
    
    .logo-icon {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
    
    .logo-text .main {
        font-size: 16px;
    }
    
    .logo-text .sub {
        font-size: 9px;
    }
    
    .main-nav {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: flex;
    }
    
    .mobile-nav {
        display: block;
    }
    
    /* Hero */
    .hero { 
        min-height: 100vh; 
        height: auto;
        padding-top: 80px; 
        padding-bottom: 40px; 
    }
    .hero-container { 
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center; 
        gap: 24px;
        height: auto;
    }
    .hero-content { max-width: 100%; }
    .hero-title { font-size: 28px; line-height: 1.3; margin-bottom: var(--space-sm); }
    .hero-subtitle { font-size: 16px; margin-bottom: var(--space-sm); }
    .hero-services { justify-content: center; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-md); }
    .hero-visual { 
        order: -1; 
        margin-bottom: 20px; 
        margin-top: 0;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
    }
    .hero-image-container {
        width: 100% !important;
        max-width: 380px !important;
        margin: 0 auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    .hero-main-img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }
    .hero-illustration { max-width: 300px; margin: 0 auto; }
    .hero-stats { justify-content: center; flex-wrap: wrap; gap: var(--space-md); }
    .stat-card { min-width: 130px; padding: var(--space-md); }
    .stat-number { font-size: 24px; }
    .hero-shapes .shape { width: 200px !important; height: 200px !important; filter: blur(40px); opacity: 0.25; }
    .decorative-circle { display: none; }
    
    /* Bottom Nav - REMOVED */
    
    /* About */
    .about-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
    .about-visual { order: -1; }
    .about-illustration { max-width: 280px; margin: 0 auto; }
    .about-accent-card { position: relative; right: auto; bottom: auto; transform: none; margin: var(--space-lg) auto 0; display: inline-block; }
    .about-features { gap: var(--space-md); }
    .feature-item { flex-direction: row; text-align: left; }
    .feature-icon { width: 44px; height: 44px; flex-shrink: 0; }
    
    /* Roadmap */
    .roadmap-stages { grid-template-columns: 1fr; gap: var(--space-lg); }
    .stage-card { padding: var(--space-lg); }
    .stage-illustration { height: 100px; }
    .roadmap-cta, .colleges-cta { padding: var(--space-lg); }
    .cta-text { font-size: 16px; }
    
    /* Testimonials - Mobile Responsive */
    .testimonials-wrapper { 
        flex-direction: column; 
        gap: 0;
    }
    
    .carousel-btn { 
        display: none; 
    }
    
    .testimonials-carousel {
        width: 100%;
        overflow: visible;
        padding: 0;
    }
    
    .testimonials-track { 
        display: flex;
        flex-direction: column;
        gap: var(--space-lg);
        transform: none !important;
        width: 100%;
    }
    
    .testimonial-card { 
        flex: 0 0 auto;
        width: 100% !important;
        max-width: 100%;
        padding: var(--space-lg);
        margin: 0;
    }
    
    .testimonial-text { 
        font-size: 14px;
        line-height: 1.6;
    }
    
    .author-avatar { 
        width: 40px; 
        height: 40px; 
    }
    
    .carousel-dots {
        display: none;
    }
    
    /* Colleges - Full Width Cards on Mobile */
    .colleges {
        padding: var(--space-2xl) 0;
    }
    
    .colleges-carousel-wrapper { 
        flex-direction: column; 
        gap: 0;
        padding: 0;
        margin-bottom: var(--space-lg);
    }
    
    .carousel-btn { 
        display: none; 
    }
    
    .colleges-carousel {
        width: 100%;
        overflow: visible;
        padding: 0;
    }
    
    .colleges-track { 
        gap: var(--space-lg);
        display: flex;
        flex-direction: column;
        width: 100%;
        transform: none !important;
    }
    
    .college-card { 
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: var(--card-radius);
        box-shadow: var(--shadow-md);
        transform: none !important;
    }
    
    .college-card:hover {
        transform: none !important;
    }
    
    .college-logo { 
        height: 220px;
        width: 100%;
        padding: var(--space-xl);
        background: linear-gradient(135deg, rgba(30, 64, 175, 0.05) 0%, rgba(8, 145, 178, 0.05) 100%);
    }
    
    .college-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    
    .college-card h4 { 
        font-size: 16px;
        font-weight: 600;
        padding: var(--space-md) var(--space-lg) var(--space-xs);
    }
    
    .college-card p { 
        font-size: 13px;
        display: block;
        padding: 0 var(--space-lg) var(--space-lg);
    }
    
    .colleges-dots {
        display: none;
    }
    
    .colleges-cta {
        padding-top: var(--space-lg);
        margin-top: var(--space-lg);
    }
    
    /* Footer */
    .footer { padding: var(--space-2xl) 0 calc(var(--space-4xl) + 20px); }
    .footer-grid { grid-template-columns: 1fr; gap: var(--space-xl); text-align: center; }
    .footer-logo { font-size: 20px; }
    .footer-social { justify-content: center; }
    .footer-links ul, .footer-contact ul { align-items: center; }
    .footer-contact li { justify-content: center; flex-wrap: wrap; }
    
    /* Modal */
    .modal-content { margin: var(--space-sm); max-height: 92vh; border-radius: 20px; }
    .modal-header { padding: var(--space-xl) var(--space-lg) var(--space-md); }
    .modal-header::before { font-size: 36px; }
    .modal-header h3 { font-size: 22px; }
    .modal-close { top: var(--space-md); right: var(--space-md); width: 36px; height: 36px; }
    .inquiry-form { padding: 0 var(--space-lg) var(--space-lg); }
    .form-group { margin-bottom: var(--space-md); }
    .form-input, .form-textarea { padding: var(--space-md); font-size: 16px; border-radius: 10px; }
    .form-textarea { min-height: 80px; }
    .btn-submit { padding: var(--space-md); font-size: 16px; border-radius: 10px; }
    .btn-lg { padding: var(--space-md) var(--space-lg); font-size: 15px; }
    .section-header { margin-bottom: var(--space-xl); }
    .section-header p { font-size: 14px; }
    .section-badge { font-size: 12px; padding: 6px 12px; }
}

/* Small Mobile (< 480px) */
@media (max-width: 479px) {
    :root { --text-h1: 26px; --text-h2: 22px; --text-h3: 18px; }
    .hero-title { font-size: 24px; }
    .hero-services { flex-direction: column; gap: var(--space-xs); }
    .hero-services .dot { display: none; }
    .hero-stats { flex-direction: row; gap: var(--space-sm); }
    .stat-card { flex: 1; min-width: auto; padding: var(--space-sm); }
    .stat-number { font-size: 20px; }
    .stat-label { font-size: 10px; }
    .hero-image-container {
        max-width: 340px !important;
    }
    .hero-illustration { max-width: 250px; }
    .about-illustration { max-width: 240px; }
    .feature-item { flex-direction: column; text-align: center; }
    .college-logo { 
        height: 180px;
        padding: var(--space-lg);
    }
    
    .college-card h4 { 
        font-size: 15px;
        padding: var(--space-md) var(--space-md) var(--space-xs);
    }
    
    .college-card p { 
        font-size: 12px;
        display: block;
        padding: 0 var(--space-md) var(--space-md);
    }
    /* Bottom Nav - REMOVED */
    .modal-content { margin: var(--space-xs); }
    .modal-header { padding: var(--space-lg) var(--space-md) var(--space-sm); }
    .modal-header::before { font-size: 28px; }
    .modal-header h3 { font-size: 18px; }
    .inquiry-form { padding: 0 var(--space-md) var(--space-md); }
    .form-group::before { display: none; }
}

/* Touch Devices */
@media (hover: none) and (pointer: coarse) {
    .btn:hover, .card:hover, .stage-card:hover, .college-card:hover { transform: none; }
    .college-card:hover::before { opacity: 0; }
    .form-input, .form-textarea { min-height: 48px; }
    .nav-link { min-height: 40px; display: flex; align-items: center; }
    .btn { min-height: 44px; }
    .btn-primary:hover, .btn-submit:hover { transform: none; }
}

/* Landscape Mobile */
@media (max-width: 767px) and (orientation: landscape) {
    .hero { padding-top: 40px; padding-bottom: 80px; }
    .hero-illustration { max-width: 200px; }
    .modal-content { max-height: 85vh; }
}

/* Print */
@media print {
    .bottom-nav, .modal, .btn, .hero-shapes, .decorative-circle { display: none !important; }
    .hero { min-height: auto; padding: 20px 0; }
    .section { padding: 20px 0; page-break-inside: avoid; }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}


/* ========================================
   FORM MOBILE RESPONSIVENESS
   ======================================== */

@media (max-width: 768px) {
    /* Form Modal - Mobile Optimized */
    .fullpage-form {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .form-close-btn {
        top: var(--space-md);
        right: var(--space-md);
        width: 40px;
        height: 40px;
    }
    
    .form-progress-dots {
        top: var(--space-md);
        gap: 6px;
    }
    
    .progress-dot {
        width: 8px;
        height: 8px;
    }
    
    .progress-dot.active {
        width: 24px;
    }
    
    /* Slides Container - Scrollable */
    .form-slides-container {
        padding: var(--space-lg) var(--space-md);
        align-items: flex-start;
        padding-top: 80px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .form-slide {
        padding: var(--space-md);
        position: absolute;
        inset: 0;
        min-height: 100%;
        justify-content: flex-start;
        padding-top: var(--space-xl);
    }
    
    .form-slide.active {
        display: flex !important;
        position: absolute;
        inset: 0;
    }
    
    .form-slide:not(.active) {
        display: none !important;
    }
    
    /* Slide Content - Mobile */
    .slide-content {
        max-width: 100%;
        width: 100%;
        padding-bottom: 100px;
    }
    
    .slide-emoji {
        font-size: 48px;
        margin-bottom: var(--space-md);
    }
    
    .slide-question {
        font-size: clamp(20px, 6vw, 28px);
        margin-bottom: var(--space-lg);
        line-height: 1.4;
    }
    
    /* Input Container - Mobile */
    .slide-input-container {
        margin-top: var(--space-lg);
    }
    
    .slide-input {
        padding: var(--space-md) var(--space-lg);
        font-size: 16px;
        border-radius: 12px;
    }
    
    .input-hint {
        font-size: 12px;
        margin-top: var(--space-sm);
    }
    
    .enter-key {
        padding: 4px 8px;
        font-size: 11px;
    }
    
    /* Error Message - Visible on Mobile */
    .form-error-inline {
        font-size: 13px;
        margin-top: var(--space-sm);
        padding: var(--space-sm);
        border-radius: 8px;
        display: block;
        min-height: 20px;
    }
    
    /* Success/Error Slides - Mobile */
    .success-slide .slide-content,
    .loading-slide .slide-content {
        padding-bottom: var(--space-2xl);
    }
    
    .success-slide h3 {
        font-size: 24px;
        margin-bottom: var(--space-md);
    }
    
    .success-slide p {
        font-size: 14px;
        line-height: 1.6;
    }
    
    .success-animation {
        width: 60px;
        height: 60px;
        margin-bottom: var(--space-lg);
    }
    
    /* Navigation Buttons - Mobile */
    .form-navigation {
        bottom: var(--space-lg);
        left: var(--space-md);
        right: var(--space-md);
    }
    
    .prev-btn {
        padding: var(--space-sm) var(--space-lg);
        font-size: 14px;
    }
}

/* Small Mobile - Extra Adjustments */
@media (max-width: 480px) {
    /* Testimonials - Small Mobile */
    .testimonial-card {
        padding: var(--space-md) !important;
    }
    
    .testimonial-text {
        font-size: 13px !important;
    }
    
    .testimonial-author h4 {
        font-size: 14px;
    }
    
    .testimonial-author p {
        font-size: 12px;
    }
    
    .author-avatar {
        width: 36px !important;
        height: 36px !important;
    }
    
    /* Form */
    .form-slides-container {
        padding: var(--space-md) var(--space-sm);
        padding-top: 70px;
    }
    
    .slide-question {
        font-size: 18px;
    }
    
    .slide-input {
        font-size: 16px;
        padding: 12px 16px;
    }
    
    .form-error-inline {
        font-size: 12px;
    }
}

/* Landscape Mobile - Keyboard Open */
@media (max-height: 500px) and (orientation: landscape) {
    .form-slides-container {
        padding-top: 60px;
        align-items: flex-start;
    }
    
    .slide-emoji {
        font-size: 32px;
        margin-bottom: var(--space-sm);
    }
    
    .slide-question {
        font-size: 18px;
        margin-bottom: var(--space-md);
    }
    
    .slide-input-container {
        margin-top: var(--space-md);
    }
    
    .input-hint {
        display: none;
    }
}




/* ========================================
   RESOURCES SECTION - MOBILE RESPONSIVE FIX
   ======================================== */

/* Tablet and Mobile */
@media screen and (max-width: 768px) {
    .resources .resources-grid {
        display: block !important;
        width: 100% !important;
    }
    
    .resources .resource-featured,
    .resources .resource-list {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 var(--space-lg) 0 !important;
        float: none !important;
    }
    
    .resources .resource-item {
        width: 100% !important;
        margin-bottom: var(--space-md);
    }
}

/* Small Mobile */
@media screen and (max-width: 480px) {
    .resources .container {
        padding-left: var(--space-md) !important;
        padding-right: var(--space-md) !important;
    }
    
    .resources .resource-featured {
        padding: var(--space-md) !important;
    }
    
    .resources .resource-featured h3 {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }
    
    .resources .resource-featured p {
        font-size: 14px !important;
    }
    
    .resources .resource-badge {
        font-size: 11px !important;
    }
    
    .resources .topic-tag {
        font-size: 10px !important;
        padding: 4px 8px !important;
    }
}