/* ===================================
   RISING STAR DIGITAL - MOBILE CSS
   Complete Mobile-First Responsive
   =================================== */

/* ---- BASE FIXES ---- */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    width: 100%;
}

img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

a { touch-action: manipulation; }

/* ---- TABLET (max 1024px) ---- */
@media (max-width: 1024px) {
    .container { padding: 0 20px; }
    .nav-container { padding: 0.5rem 1.5rem; gap: 1rem; }
    .nav-menu { gap: 1rem; }
    .nav-link { font-size: 0.85rem; }
    .logo-image { width: 55px; height: 55px; }

    .hero { padding: 120px 20px 80px; }
    .hero-title { font-size: 3rem; }
    .hero-subtitle { font-size: 1.05rem; }

    .why-us-grid { grid-template-columns: 1fr; gap: 3rem; }
    .visual-card-wrap { max-width: 100%; min-height: auto; }

    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .testimonials-grid { grid-template-columns: repeat(2, 1fr); }

    .footer-content { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
    .team-page-grid { grid-template-columns: repeat(3, 1fr); }
    .mv-grid { grid-template-columns: repeat(3, 1fr); }
    .features-grid { grid-template-columns: repeat(3, 1fr); }

    .newsletter-content { flex-direction: column; text-align: center; }
    .newsletter-form { min-width: 100%; }

    .section-title { font-size: 2.4rem; }
    .page-header { padding: 140px 20px 80px !important; }

    .testimonials-hero { padding: 140px 20px 80px; }
    .testimonials-hero h1 { font-size: 3rem; }

    /* Client logos */
    .client-logo-box { width: 85px; height: 85px; padding: 14px; }
    .clients-logos { gap: 1.5rem; }
}

/* ---- MOBILE (max 768px) ---- */
@media (max-width: 768px) {

    /* === NAVBAR === */
    .hamburger { display: flex !important; }
    .nav-container {
        padding: 0.6rem 1rem;
        justify-content: space-between;
        gap: 0;
    }
    .logo { order: 1; flex-shrink: 0; margin: 0; }
    .hamburger { order: 2; margin: 0; }
    .logo-image { width: 50px; height: 50px; border-width: 2px; }

    .nav-menu {
        position: fixed !important;
        top: 0; right: -100% !important; left: auto !important;
        width: 82%; max-width: 300px;
        height: 100vh;
        background: #fff;
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 85px 1.5rem 2rem;
        gap: 0 !important;
        box-shadow: -5px 0 30px rgba(0,0,0,0.18);
        transition: right 0.3s ease !important;
        overflow-y: auto;
        z-index: 999;
        order: 3;
        flex: none !important;
        justify-content: flex-start !important;
        margin: 0 !important;
    }
    .nav-menu.active { right: 0 !important; }
    .nav-menu li { width: 100%; border-bottom: 1px solid #f0f4ff; }
    .nav-menu li:last-child { border-bottom: none; }
    .nav-link { display: block !important; padding: 0.9rem 0; font-size: 0.95rem; }
    .nav-link::after { display: none !important; }
    .btn-nav { display: block !important; text-align: center; padding: 0.8rem 1.2rem; margin-top: 0.5rem; }

    .dropdown-menu {
        position: static !important; opacity: 1 !important; visibility: visible !important;
        transform: none !important; box-shadow: none !important;
        background: #f0f4ff; border-radius: 10px;
        padding: 0.4rem 0; margin: 0.4rem 0 0.8rem 1rem; min-width: unset;
        max-height: 300px; overflow-y: auto;
    }
    .dropdown-menu a { padding: 0.6rem 1rem; font-size: 0.88rem; }

    .nav-overlay {
        display: none; position: fixed; inset: 0;
        background: rgba(0,0,0,0.5); z-index: 998;
    }
    .nav-overlay.active { display: block; }

    /* === HERO === */
    .hero { padding: 100px 16px 60px; min-height: auto; }
    .hero-title { font-size: 2rem; line-height: 1.3; letter-spacing: -0.02em; }
    .hero-subtitle { font-size: 0.95rem; margin-bottom: 2rem; }
    .hero-badge { font-size: 0.78rem; padding: 0.55rem 1rem; }
    .hero-badge-wrap { margin-bottom: 1.5rem; }

    .hero-cta { flex-direction: column; align-items: center; gap: 0.85rem; margin-bottom: 2rem; }
    .hero-btn-primary, .hero-btn-secondary, .hero-btn-outline {
        width: 100% !important; max-width: 300px;
        justify-content: center; font-size: 0.95rem; padding: 0.9rem 1.5rem;
    }

    .hero-trust { gap: 0.5rem; font-size: 0.75rem; flex-wrap: wrap; justify-content: center; }
    .trust-dot { display: none; }
    .scroll-indicator { display: none; }

    .hero-stats {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0; padding: 1rem; max-width: 100%;
    }
    .stat-divider { display: none !important; }
    .stat-item { padding: 0.75rem 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
    .stat-item:nth-child(1), .stat-item:nth-child(3) { border-right: 1px solid rgba(255,255,255,0.1); }
    .stat-number { font-size: 1.85rem; }
    .stat-item p { font-size: 0.75rem; }

    /* === SECTIONS === */
    .section-title { font-size: 1.75rem; }
    .section-subtitle { font-size: 0.95rem; }
    .section-header { margin-bottom: 2rem; }

    /* === CLIENT LOGOS STRIP === */
    .clients-strip { padding: 2rem 16px; }
    .clients-logos {
        gap: 1rem;
        flex-wrap: wrap;
        justify-content: center;
    }
    .client-logo-box {
        width: 75px;
        height: 75px;
        padding: 12px;
        border-radius: 50%;
    }

    /* === WHY US === */
    .why-us-section { padding: 60px 16px; }
    .why-us-grid { grid-template-columns: 1fr; gap: 2rem; }
    .why-us-content h2 { font-size: 1.75rem; }
    .why-us-content p { font-size: 0.95rem; }
    .usp-list li { font-size: 0.9rem; gap: 0.75rem; padding: 0.75rem 0; }
    .visual-float-card { display: none !important; }
    .visual-card-wrap { min-height: auto; }
    .visual-main-card { padding: 2rem; }

    /* === SERVICES === */
    .services-section { padding: 60px 16px; }
    .services-grid { grid-template-columns: 1fr !important; gap: 1.25rem; }
    .service-card { padding: 2rem 1.5rem !important; border-radius: 20px !important; }
    .service-card h3 { font-size: 1.2rem; }

    /* === PROCESS === */
    .process-section { padding: 60px 16px; }
    .process-grid { flex-direction: column !important; align-items: center; gap: 0.5rem; }
    .process-step { max-width: 100% !important; width: 100%; }
    .process-arrow { transform: rotate(90deg); margin: 0; padding: 0.2rem 0; }

    /* === TESTIMONIALS HOME === */
    .testimonials-section { padding: 60px 16px; }
    .testimonials-grid { grid-template-columns: 1fr !important; gap: 1.25rem; }
    .testi-card { padding: 1.75rem 1.5rem; }

    /* === TESTIMONIALS PAGE === */
    .testimonials-hero { padding: 110px 16px 60px; }
    .testimonials-hero h1 { font-size: 2rem; }
    .testimonials-hero p { font-size: 1rem; }
    .testimonials-main { padding: 60px 16px; }
    .testimonial-card { padding: 2rem 1.5rem; }
    .testimonial-text { font-size: 1rem; }
    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1.5rem; }
    .stat-box h3 { font-size: 2.5rem; }
    .logos-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1.25rem; }
    .logo-item { padding: 1.5rem 1rem; }
    .client-logos { padding: 60px 16px; }
    .testimonial-card video { border-radius: 10px; width: 100%; }

    /* === NEWSLETTER === */
    .newsletter-section { padding: 50px 16px; }
    .newsletter-content { padding: 2rem 1.5rem; gap: 1.5rem; flex-direction: column; text-align: center; }
    .newsletter-text h3 { font-size: 1.4rem; }
    .newsletter-form { flex-direction: column; gap: 0.75rem; min-width: 100%; }
    .newsletter-form input, .newsletter-form button { width: 100%; }

    /* === CTA === */
    .cta-section { padding: 60px 16px; }
    .cta-content h2 { font-size: 1.75rem; }
    .cta-content p { font-size: 0.95rem; margin-bottom: 2rem; }
    .cta-buttons { flex-direction: column !important; align-items: center; gap: 1rem; }
    .cta-buttons .hero-btn-primary,
    .cta-buttons .hero-btn-outline { width: 100% !important; max-width: 300px; justify-content: center; }

    /* === PAGE HEADER === */
    .page-header { padding: 110px 16px 60px !important; }
    .page-header h1 { font-size: 2rem; }
    .page-header p { font-size: 0.95rem; }

    /* === ABOUT === */
    .about-story { padding: 60px 16px; }
    .story-content h2 { font-size: 1.75rem; }
    .story-content p { font-size: 0.95rem; }
    .mission-vision { padding: 60px 16px; }
    .mv-grid { grid-template-columns: 1fr !important; gap: 1.25rem; }
    .mv-card { padding: 2rem 1.5rem; }
    .why-choose { padding: 60px 16px; }
    .features-grid { grid-template-columns: 1fr !important; gap: 1.25rem; }
    .feature-card { padding: 2rem 1.5rem; }

    /* === TEAM PAGE === */
    .team-page-section { padding: 60px 16px; }
    .team-page-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1.25rem; }
    .team-page-grid .team-card:last-child:nth-child(3n+1) { grid-column: auto !important; }
    .team-card-body { padding: 1.25rem 1rem; }
    .team-card-body h4 { font-size: 1.05rem; }
    .team-card-img { height: 240px; }
    .team-join-cta { padding: 2.5rem 1.5rem; margin-top: 3rem; }
    .team-join-cta h3 { font-size: 1.5rem; }
    .team-departments { gap: 0.5rem; }
    .dept-filter { padding: 0.5rem 1rem; font-size: 0.82rem; }

    /* === CONTACT === */
    .contact-section { padding: 60px 16px; }
    .contact-grid { grid-template-columns: 1fr !important; gap: 2rem; }
    .contact-info-box { position: static !important; padding: 2rem 1.5rem; }
    .form-row { grid-template-columns: 1fr !important; }
    .contact-form-box { padding: 2rem 1.5rem; }
    .contact-map { height: 220px; margin-top: 2rem; }

    /* === CAREERS === */
    .careers-section { padding: 60px 16px; }
    .job-card { flex-direction: column; align-items: flex-start; padding: 1.5rem; }
    .job-card .btn { width: 100%; justify-content: center; text-align: center; }
    .apply-form-container { padding: 0 !important; border-radius: 20px; }
    .form-top-banner { padding: 2rem 1.5rem 1.5rem; border-radius: 20px 20px 0 0; }
    .form-top-banner h2 { font-size: 1.4rem; }
    .form-body { padding: 1.5rem; }
    .form-row-2 { grid-template-columns: 1fr !important; }

    /* === FOOTER === */
    .footer { padding: 60px 16px 24px; }
    .footer-content { grid-template-columns: 1fr !important; gap: 2rem; }
    .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
    .footer-links { flex-wrap: wrap; justify-content: center; gap: 1rem; }
    .footer-logo-image { width: 50px; height: 50px; }
    .footer-newsletter-form { flex-direction: column; }
    .footer-newsletter-form button { width: 100%; height: 50px; border-radius: 50px; }
    .social-links { flex-wrap: wrap; }

    /* === MISC === */
    .btn { padding: 0.85rem 1.75rem; font-size: 0.95rem; }
    .left-sidebar { display: none !important; }
    .section-badge { font-size: 0.78rem; padding: 0.4rem 1rem; }
}

/* ---- SMALL MOBILE (max 480px) ---- */
@media (max-width: 480px) {
    .container { padding: 0 14px; }
    .nav-container { padding: 0.5rem 0.85rem; }
    .logo-image { width: 46px; height: 46px; }

    .hero { padding: 90px 14px 50px; }
    .hero-title { font-size: 1.75rem; }
    .hero-subtitle { font-size: 0.9rem; }
    .hero-badge { font-size: 0.72rem; padding: 0.45rem 0.85rem; }
    .stat-number { font-size: 1.65rem; }
    .stat-item p { font-size: 0.72rem; }

    .section-title { font-size: 1.55rem; }
    .page-header h1 { font-size: 1.75rem; }
    .page-header { padding: 95px 14px 50px !important; }

    /* Client logos small mobile */
    .client-logo-box { width: 62px; height: 62px; padding: 10px; }
    .clients-logos { gap: 0.75rem; }

    .team-page-grid { grid-template-columns: 1fr !important; }
    .team-card-img { height: 280px; }
    .team-grid { grid-template-columns: 1fr !important; }
    .mv-grid { grid-template-columns: 1fr !important; }
    .features-grid { grid-template-columns: 1fr !important; }
    .services-grid { grid-template-columns: 1fr !important; }
    .testimonials-grid { grid-template-columns: 1fr !important; }

    .service-card { padding: 1.75rem 1.25rem !important; }
    .feature-card { padding: 1.75rem 1.25rem; }
    .mv-card { padding: 1.75rem 1.25rem; }
    .testi-card { padding: 1.5rem 1.25rem; }
    .testimonial-card { padding: 1.75rem 1.25rem; }

    .footer-links { flex-direction: column; gap: 0.5rem; }
    .footer-logo-image { width: 45px; height: 45px; }

    .cta-content h2 { font-size: 1.55rem; }
    .newsletter-text h3 { font-size: 1.25rem; }

    .stats-grid { grid-template-columns: 1fr !important; }
    .logos-grid { grid-template-columns: repeat(2, 1fr) !important; }

    .testimonials-hero h1 { font-size: 1.75rem; }
    .stat-box h3 { font-size: 2rem; }

    .job-title { font-size: 1rem; }
    .job-meta { gap: 0.5rem; }
    .job-meta span { font-size: 0.78rem; }

    .contact-social-icons { gap: 0.5rem; }
    .contact-social-icons a { width: 38px; height: 38px; font-size: 0.9rem; }

    .form-top-banner h2 { font-size: 1.25rem; }
    .form-body { padding: 1.25rem; }
}

/* ---- VERY SMALL (max 360px) ---- */
@media (max-width: 360px) {
    .hero-title { font-size: 1.55rem; }
    .stat-number { font-size: 1.5rem; }
    .hero-stats { padding: 0.75rem; }
    .section-title { font-size: 1.4rem; }
    .page-header h1 { font-size: 1.55rem; }
    .nav-container { padding: 0.5rem 0.75rem; }
    .logo-image { width: 42px; height: 42px; }
    .hero-btn-primary, .hero-btn-secondary, .hero-btn-outline { font-size: 0.88rem; padding: 0.8rem 1.2rem; }
    .footer-content { gap: 1.5rem; }
    .client-logo-box { width: 55px; height: 55px; padding: 8px; }
    .clients-logos { gap: 0.6rem; }
}