/* ===============================
   RESPONSIVE — Super Mobile Ready
   =============================== */

/* ---------- Large Desktops (up to 1400px) ---------- */
@media (max-width: 1400px) {
    .hero-title { font-size: 3.8rem; }
}

/* ---------- Desktops / Laptops (up to 1199px) ---------- */
@media (max-width: 1199px) {
    .hero-title { font-size: 3.2rem; }
    .section-title { font-size: 2.2rem; }
    .page-hero h1 { font-size: 2.8rem; }
    .floating-phone { max-height: 450px; }
    .leader-row { min-height: 320px; }
    .about-section .col-lg-6 .fs-5 { font-size: 1rem !important; }
}

/* ---------- Tablets / Small Laptops (up to 991px) ---------- */
@media (max-width: 991px) {
    /* ── Header / Nav ── */
    .luxury-header {
        background: rgba(5, 5, 5, 0.95);
        backdrop-filter: blur(20px);
    }
    .luxury-header.scrolled {
        background: rgba(253, 253, 253, 0.95);
    }
    .navbar-toggler {
        border-color: rgba(255,255,255,0.3);
    }
    .luxury-header.scrolled .navbar-toggler {
        border-color: rgba(0,0,0,0.15);
    }
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,0.6)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
    #navbarNav {
        background: rgba(255,255,255,0.98);
        backdrop-filter: blur(20px);
        border-radius: 16px;
        padding: 20px;
        margin-top: 12px;
        box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    }
    #navbarNav .navbar-nav { gap: 0 !important; }
    #navbarNav .nav-link {
        padding: 10px 0 !important;
        font-size: 1.05rem;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }
    #navbarNav .nav-item.ms-3 { margin-left: 0 !important; margin-top: 12px; }
    #navbarNav .btn-premium { width: 100%; text-align: center; display: block !important; }

    /* ── Hero ── */
    .hero-section { height: auto; min-height: 100vh; padding: 120px 0 60px; }
    .hero-title { font-size: 2.8rem; }
    .hero-subtitle { font-size: 1rem; }

    /* ── Typography ── */
    .section-title { font-size: 2rem; }

    /* ── Sections ── */
    section { padding: 70px 0; }

    /* ── About ── */
    .about-image-wrapper .floating-badge {
        position: relative !important;
        bottom: auto !important;
        right: auto !important;
        margin-top: 16px;
        display: inline-flex;
    }

    /* ── Products ── */
    .products-section .row { flex-direction: column-reverse; }
    .floating-phone { max-height: 350px; }

    /* ── Culture ── */
    .culture-section .row { flex-direction: column-reverse; }
    .culture-section .display-5 { font-size: 2.2rem; }

    /* ── Leadership ── */
    .leadership-section .row { flex-direction: column; }
    .leadership-section .col-lg-4 { margin-bottom: 20px; }
    .leader-row { min-height: 250px; gap: 4px; }
    .leader-piece.active { flex: 3; }
    .leader-info { padding: 12px 14px; }
    .leader-name { font-size: 0.9rem; }
    .leader-bio { font-size: 0.65rem; }
    .leader-role { font-size: 0.6rem; }

    /* ── Tech Section ── */
    .tech-section .glass-card { font-size: 0.75rem !important; }

    /* ── CTA ── */
    .cta-section .glass-card { padding: 40px 20px !important; }

    /* ── Contact ── */
    .contact-section .glass-card.p-5 { padding: 24px !important; }

    /* ── Footer ── */
    .luxury-footer .border-top {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

/* ---------- Large Phones / Small Tablets (up to 768px) ---------- */
@media (max-width: 768px) {
    /* ── Sections ── */
    section { padding: 60px 0; }

    /* ── Hero ── */
    .hero-section { padding: 110px 0 50px; min-height: auto; }
    .hero-title { font-size: 2.2rem; }
    .hero-title .d-block { display: inline !important; }
    .hero-subtitle { font-size: 0.95rem; max-width: 100%; }
    .hero-section .btn-lg {
        padding: 10px 24px;
        font-size: 0.9rem;
    }
    .scroll-indicator { display: none; }

    /* ── Typography ── */
    .section-title { font-size: 1.7rem; }
    .display-5 { font-size: 1.8rem !important; }

    /* ── Stats ── */
    .stat-item { padding: 15px 8px; }
    .stat-item .fs-3 { font-size: 1.2rem !important; }
    .stat-item h3 { font-size: 1.3rem; }
    .stat-item p { font-size: 0.75rem; }

    /* ── Vision / Mission ── */
    .vision-card.glass-card.p-5,
    .mission-card.glass-card.p-5 { padding: 30px 24px !important; }
    .vision-card .fs-5,
    .mission-card .fs-5 { font-size: 1rem !important; }

    /* ── Products ── */
    .floating-phone { max-height: 280px; }
    .products-section ul li { font-size: 0.9rem; }

    /* ── Culture ── */
    .culture-section .display-5 { font-size: 1.8rem; }
    .culture-section .value-tab { padding: 6px 16px; font-size: 0.8rem; }
    .culture-section .fs-5 { font-size: 0.95rem !important; }

    /* ── Leadership ── */
    .leader-row { min-height: 200px; gap: 3px; }
    .leader-piece.active { flex: 2.5; }
    .leader-info { padding: 8px 10px; }
    .leader-name { font-size: 0.75rem; }
    .leader-bio { font-size: 0.55rem; }
    .leader-role { font-size: 0.5rem; letter-spacing: 0.5px; margin-bottom: 2px; }
    .leader-line { display: none; }

    /* ── Products Grid ── */
    .products-grid-section .glass-card.p-4 { padding: 20px 16px !important; }
    .products-grid-section .fs-1 { font-size: 1.8rem !important; }

    /* ── Why Choose ── */
    .why-choose-section .glass-card.p-4 { padding: 20px 16px !important; }

    /* ── Tech ── */
    .tech-section .glass-card { padding: 20px 16px !important; }
    .tech-section .fs-2 { font-size: 1.5rem !important; }

    /* ── News ── */
    .news-section .glass-card { padding: 0 !important; }
    .news-section .p-4 { padding: 16px !important; }
    .news-section h5 { font-size: 1rem; }

    /* ── Contact ── */
    .contact-section .glass-card.p-4 { padding: 20px !important; }
    .contact-section form .form-label { font-size: 0.9rem; }
    .contact-section .section-title { font-size: 1.5rem; }

    /* ── Offices ── */
    .offices-section .glass-card.p-4 { padding: 20px !important; }

    /* ── Core Values (About page) ── */
    .about-page-values .glass-card.p-4 { padding: 20px !important; }
    .about-page-values .d-flex.gap-4 { gap: 16px !important; flex-direction: column; text-align: center; }
    .about-page-values .flex-shrink-0 { margin-bottom: 8px; }

    /* ── Footer ── */
    .luxury-footer .row .col-lg-2.col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .luxury-footer .social-icon { width: 36px; height: 36px; font-size: 0.85rem; }

    /* ── Partners Marquee ── */
    .partner-logo { width: 100px; height: 60px; }
    .partner-logo .fs-1 { font-size: 1.5rem !important; }

    /* ── FAQ / Support ── */
    .faq-section .glass-card.p-4 { padding: 20px !important; }

    /* ── Team Cards ── */
    .team-card .rounded-circle { width: 60px !important; height: 60px !important; font-size: 1.5rem !important; }
    .team-card h6 { font-size: 0.85rem; }
    .team-card .small { font-size: 0.7rem; }

    /* ── Awards ── */
    .awards-section .glass-card.p-4 { padding: 16px !important; }
}

/* ---------- Small Phones (up to 576px) ---------- */
@media (max-width: 576px) {
    /* ── Hero ── */
    .hero-title { font-size: 1.8rem; }
    .hero-section .d-flex.gap-3 { flex-direction: column; }
    .hero-section .d-flex.gap-3 .btn { width: 100%; }

    /* ── Typography ── */
    .section-title { font-size: 1.4rem; }


    /* ── Stats ── */
    .stats-section .col-6 { flex: 0 0 50%; max-width: 50%; }
    .stats-section .col-6:nth-child(5) { flex: 0 0 100%; max-width: 100%; }

    /* ── Products ── */
    .floating-phone { max-height: 220px; }

    /* ── Leadership ── */
    .leader-row { min-height: 150px; }
    .leader-name { font-size: 0.65rem; }
    .leader-bio { font-size: 0.5rem; }
    .leader-role { font-size: 0.45rem; }

    /* ── Cards ── */
    .glass-card { padding: 20px 16px !important; }

    /* ── Offices / Awards / Team ── */
    .offices-grid .col-md-6 { flex: 0 0 100%; max-width: 100%; }
    .awards-grid .col-md-6.col-lg-3 { flex: 0 0 100%; max-width: 100%; }
    .team-grid .col-md-3.col-6 { flex: 0 0 50%; max-width: 50%; }

    /* ── Footer ── */
    .luxury-footer .row .col-lg-2.col-md-6 { flex: 0 0 100%; max-width: 100%; }
    .luxury-footer .brand-text { font-size: 1.2rem; }

    /* ── Marquee ── */
    .partner-logo { width: 80px; height: 50px; }
    .partner-logo .fs-1 { font-size: 1.2rem !important; }

    /* ── Contact Form ── */
    .contact-section .col-md-6 { flex: 0 0 100%; max-width: 100%; }

    /* ── Vision/Mission ── */
    .vision-card.glass-card.p-5,
    .mission-card.glass-card.p-5 { padding: 24px 18px !important; }
    .vision-card .fs-5,
    .mission-card .fs-5 { font-size: 0.9rem !important; }
}

/* ---------- Very Small Phones (up to 400px) ---------- */
@media (max-width: 400px) {
    .hero-title { font-size: 1.5rem; }
    .section-title { font-size: 1.2rem; }
    .brand-text { font-size: 1.1rem; }
    .btn-premium { padding: 6px 18px; font-size: 0.8rem; }
    .stat-item h3 { font-size: 1.1rem; }
    .leader-name { font-size: 0.55rem; }
    .leader-bio { display: none; }
    .leader-role { font-size: 0.4rem; }
}

/* ---------- Fix: Horizontal Overflow Prevention ---------- */
html, body {
    overflow-x: hidden;
    width: 100%;
}
img, video, canvas, svg {
    max-width: 100%;
    height: auto;
}
.container {
    padding-left: 16px;
    padding-right: 16px;
}

/* ---------- Fix: Floating Badge on Mobile ---------- */
@media (max-width: 768px) {
    .floating-badge {
        position: relative !important;
        bottom: auto !important;
        right: auto !important;
        margin-top: -40px;
        margin-left: 20px;
        display: inline-flex;
        padding: 12px 16px !important;
    }
    .floating-badge .fs-2 { font-size: 1.5rem !important; }
    .floating-badge h4 { font-size: 1rem !important; }
    .floating-badge .small { font-size: 0.75rem !important; }
}

/* ---------- Fix: Culture Section Mobile ---------- */
@media (max-width: 768px) {
    .culture-section .col-lg-7 { margin-bottom: 30px; }
    .culture-section .mb-5 { margin-bottom: 30px !important; }
    .culture-section .d-flex.gap-2 { justify-content: center; }
}

/* ---------- Fix: Support Hours Section Mobile ---------- */
@media (max-width: 768px) {
    .support-hours-section .row { flex-direction: column; }
    .support-hours-section .fs-2 { font-size: 1.5rem !important; }
}

/* ---------- Fix: Values Section (About page) ---------- */
@media (max-width: 768px) {
    .values-section .glass-card.p-4 {
        padding: 20px 16px !important;
    }
    .values-section .d-flex.gap-4 {
        flex-direction: column;
        text-align: center;
    }
    .values-section .flex-shrink-0 {
        margin: 0 auto 12px;
    }
}

/* ---------- Fix: Core Values inline style cards ---------- */
@media (max-width: 768px) {
    section .glass-card.p-4.d-flex.gap-4 {
        flex-direction: column;
        text-align: center;
    }
    section .glass-card.p-4.d-flex.gap-4 .flex-shrink-0 {
        margin: 0 auto 12px;
    }
}

/* ---------- Fix: Awards Section ---------- */
@media (max-width: 576px) {
    section .col-md-6.col-lg-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ---------- Fix: Team Section ---------- */
@media (max-width: 400px) {
    section .col-md-3.col-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ---------- Fix: Contact Page Offices ---------- */
@media (max-width: 576px) {
    .offices-section .col-md-6.col-lg-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ---------- Fix: Map Section ---------- */
@media (max-width: 768px) {
    #map .world-map-svg { opacity: 0.15 !important; }
    .map-pin { width: 10px; height: 10px; }
    .map-pin .glow { width: 20px; height: 20px; }
}

/* ---------- Fix: Page Hero Description ---------- */
@media (max-width: 576px) {
    .page-hero p.mx-auto {
        max-width: 100% !important;
        font-size: 0.9rem !important;
    }
}

/* ---------- Fix: Products Section Button Group ---------- */
@media (max-width: 576px) {
    .products-section .btn-premium { width: 100%; }
}

/* ---------- Fix: Tech Section Code Block ---------- */
@media (max-width: 576px) {
    .tech-section .glass-card {
        font-size: 0.65rem !important;
        padding: 16px 12px !important;
    }
    .tech-section .glass-card p {
        font-size: 0.6rem !important;
        word-break: break-all;
    }
}

/* ---------- Smooth transition for nav collapse ---------- */
.navbar-collapse {
    transition: all 0.3s ease;
}