/* ===================================
   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%;
    overflow-x: hidden;
}

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

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

a { touch-action: manipulation; }

/* hide close buttons by default on desktop */
@media (min-width: 769px) {
    .dropdown-menu-close,
    .submenu-close { display: none !important; }
}

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

    .hero { padding: 140px 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 === */
    .logo { order: 1 !important; flex-shrink: 0 !important; margin: 0 !important; margin-right: auto !important; }
    .logo-image { width: 45px !important; height: 45px !important; }
    #rsdHamburger { order: 2 !important; flex-shrink: 0 !important; }
    .nav-container {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0.4rem 0.75rem !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow: hidden !important;
        flex-wrap: nowrap !important;
        box-sizing: border-box !important;
    }
    .navbar {
        width: 100% !important;
        max-width: 100vw !important;
        overflow: hidden !important;
        left: 0 !important;
        right: 0 !important;
    }
    #navMenu, .nav-menu {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        flex: none !important;
        overflow: hidden !important;
        position: fixed !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    #navMenu li,
    .nav-menu li { width: 100% !important; border-bottom: 1px solid #f0f4ff !important; display: block !important; }
    #navMenu li:last-child,
    .nav-menu li:last-child { border-bottom: none !important; }
    .nav-link { display: flex !important; padding: 0.9rem 0.5rem !important; font-size: 0.95rem !important; color: #0f172a !important; }
    .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: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        box-shadow: none !important;
        background: #f0f4ff !important;
        border-radius: 10px !important;
        border-top: none !important;
        padding: 0.5rem 0.6rem 0.8rem !important;
        margin: 0.3rem 0 0.6rem 0 !important;
        width: 100% !important;
        min-width: unset !important;
        max-width: 100% !important;
        max-height: none !important;
        overflow: visible !important;
        display: none !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        z-index: 1 !important;
    }

    .dropdown-menu-close,
    .submenu-close {
        position: absolute;
        top: 0.6rem;
        right: 0.6rem;
        left: auto;
        width: 2rem;
        height: 2rem;
        border: none;
        border-radius: 50%;
        background: #ef4444;
        color: #fff;
        font-size: 1.1rem;
        line-height: 1;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 3px 10px rgba(239,68,68,0.35);
        z-index: 11;
        pointer-events: auto;
    }

    .dropdown-menu-close:hover,
    .submenu-close:hover {
        background: #dc2626;
    }

    .dropdown > .nav-link {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
        position: relative;
        padding-left: 0.5rem;
        cursor: pointer;
    }

    .dropdown > .nav-link::before {
        content: '';
    }

    .dropdown > .nav-link::after {
        content: '+';
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.8rem;
        height: 1.8rem;
        font-size: 1rem;
        color: #1e3a8a;
        background: #e0e7ff;
        border-radius: 50%;
        font-weight: 800;
        transition: all 0.25s ease;
        margin-left: auto;
    }

    .dropdown.active > .nav-link::after {
        content: '×';
        color: #ffffff;
        background: #ef4444;
    }

    .dropdown > .nav-link i {
        display: none !important;
    }
    .dropdown.active .dropdown-menu {
        display: flex !important;
    }
    .dropdown-menu a {
        padding: 0.6rem 0.8rem !important;
        font-size: 0.88rem !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        width: 100% !important;
        color: #0f172a !important;
        border-radius: 8px !important;
        text-decoration: none !important;
    }
    .dropdown-menu a:hover { background: #e0e7ff !important; }
    .dropdown-label { display: none !important; }

    .nav-overlay {
        display: none !important;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0,0,0,0.55) !important;
        z-index: 99998 !important;
    }
    .nav-overlay.active { display: block !important; }

    /* === HERO SWIPER === */
    .heroSwiper {
        height: 100svh !important;
        min-height: 100vh !important;
    }
    .heroSwiper .swiper-slide {
        display: flex !important;
        align-items: center !important;
    }
    .heroSwiper .overlay {
        position: absolute !important;
        top: 50% !important;
        left: 0 !important;
        right: 0 !important;
        transform: translateY(-50%) !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
        text-align: left !important;
        z-index: 20 !important;
    }
    .heroSwiper .overlay h1 {
        font-size: clamp(1.6rem, 7vw, 2.4rem) !important;
        line-height: 1.2 !important;
        margin-bottom: 0.5rem !important;
    }
    .heroSwiper .overlay p {
        font-size: clamp(0.82rem, 3.5vw, 1rem) !important;
        margin: 0.6rem 0 1rem 0 !important;
        max-width: 100% !important;
        padding-left: 12px !important;
    }
    .heroSwiper .hero-company-name { font-size: 0.75rem !important; margin-bottom: 0.4rem !important; }
    .heroSwiper .tech-tag { font-size: 0.68rem !important; padding: 4px 10px !important; margin-top: 0.4rem !important; }
    .heroSwiper .btn { padding: 0.7rem 1.5rem !important; font-size: 0.88rem !important; }
    .hero-slide-right { display: none !important; }
    .heroSwiper .swiper-pagination { bottom: 16px !important; }

    /* === HERO (old) === */
    .hero { padding: 115px 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-marquee-wrap { overflow: hidden; }
    .clients-logos {
        gap: 1rem;
        flex-wrap: wrap;
        justify-content: center;
    }
    .client-logo-box {
        width: 75px;
        height: 75px;
        padding: 12px;
    }

    /* === 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%; }

    /* === LOVED BY CLIENTS === */
    .loved-pics-grid { grid-template-columns: 1fr !important; gap: 1.5rem; }
    .loved-pic-item img { width: 140px; height: 140px; }
    .loved-heading { font-size: 1.8rem !important; }

    /* === VIDEO REVIEWS === */
    .video-reviews-grid { grid-template-columns: 1fr !important; gap: 1.5rem; }
    .vr-main-title { font-size: 1.8rem !important; }

    /* === STATS SECTION === */
    .testi-stats-grid { flex-direction: column !important; }
    .testi-stat-sep { width: 60px; height: 1px; margin: 0 auto; }
    .testi-stat-item { padding: 1.25rem 1rem; }
    .testi-stat-number { font-size: 2.5rem !important; }

    /* === SPLIT CTA === */
    .split-layout { flex-direction: column !important; }
    .split-cta-section .content-left { padding: 2rem 1.25rem !important; }
    .disruptive-headline { font-size: 1.5rem !important; }
    .split-image-right { min-height: 220px !important; padding: 0 !important; }
    .split-image-right img { width: 100% !important; max-height: 280px !important; object-fit: cover !important; }
    .split-stats-row { flex-direction: column; gap: 0.75rem; }

    /* === TIMELINE === */
    .circle-steps-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem; }
    .circle-step-card { max-width: 100%; }
    .timeline-main-title { font-size: 1.6rem !important; }

    /* === FREE AUDIT CTA === */
    .hero-cta-card { padding: 2rem 1.25rem !important; border-radius: 20px !important; }
    .audit-headline { font-size: 1.6rem !important; }
    .stat-highlight { padding: 0.6rem 1.2rem; }
    .cta-audit-btn { padding: 0.8rem 1.5rem; font-size: 0.9rem; width: 100%; justify-content: center; }
    .no-strings-note { font-size: 0.78rem; gap: 6px; }

    /* === 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; }

    /* === BACK TO TOP === */
    button[style*="bottom:30px"] { bottom: 20px !important; right: 16px !important; width: 42px !important; height: 42px !important; font-size: 1rem !important; }
}

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

    /* Hero swiper smaller phones */
    .heroSwiper .overlay h1 { font-size: clamp(1.3rem, 6vw, 1.8rem) !important; }
    .heroSwiper .overlay p { font-size: 0.8rem !important; }
    .heroSwiper .btn { padding: 0.6rem 1.2rem !important; font-size: 0.82rem !important; }
    .heroSwiper .hero-company-name { display: none !important; }
    .heroSwiper .tech-tag { display: none !important; }

    /* Timeline 1 col on very small */
    .circle-steps-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .circle-step-card { aspect-ratio: auto !important; border-radius: 16px !important; padding: 1rem !important; }
    .step-description-circle { display: none; }

    /* Loved pics */
    .loved-pics-grid { grid-template-columns: 1fr !important; }
    .loved-pic-item img { width: 120px; height: 120px; }

    .hero { padding: 105px 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.4rem 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; }
}