/* ── Show hamburger only below 1200px ──────────────────────── */
@media (min-width: 1200px) {
    .hamburger-btn {
        display: none !important;
    }

    .mobile-nav-popup {
        display: none !important;
    }
}

@media (min-width: 1300px) {
    .why-choose-body h3 {
        font-size: 17px;
    }

    .why-choose-body p {
        font-size: 14px;
    }
}

@media (max-width: 1199px) {
    .hamburger-btn {
        display: flex;
    }
}

/* ── Group lang-switcher + hamburger together on the right (768px–1199px) ── */
@media (min-width: 768px) and (max-width: 1199px) {
    .header .row {
        justify-content: flex-start !important;
    }

    /* Push the lang-switcher col (second-to-last) to the right,
       hamburger naturally follows it */
    .header .row>.col-auto:nth-last-child(2) {
        margin-left: auto;
    }
}

/* ── Check Status item in mobile nav ───────────────────────── */
.check-status-mobile {
    color: #22c55e !important;
    font-weight: 600 !important;
}

@media (min-width: 1800px) and (max-width: 1900px) {
    .about-hero-content {
        padding-top: 308px !important;
    }
}

/* ============================================================
   END MOBILE NAV STYLES
   ============================================================ */

/* ── Keep header items on one line for 321px–482px ─────────── */
@media (min-width: 321px) and (max-width: 482px) {

    /* Force the header row to never wrap */
    .header .row {
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    /* Logo scaling to fit */
    .header .row>.col-auto:first-child {
        flex-shrink: 1;
        min-width: 0;
    }

    .logo-container {
        gap: 4px;
    }

    .logo-container img {
        height: 28px;
    }

    .logo-text {
        padding-left: 4px;
        margin-left: 2px;
    }

    .powered-by-text {
        font-size: 8px;
    }

    .novatech-text {
        font-size: 11px;
        margin-top: 2px;
    }

    /* Group Language switcher & Hamburger to the right */
    .header .row>.col-auto:nth-last-child(2) {
        flex-shrink: 0;
        margin-left: auto;
        padding-right: 10px;
    }

    /* Compact the language switcher pill */
    .header .language-switcher {
        font-size: 11px;
        gap: 2px;
    }

    .header .language-switcher .lang-btn {
        padding: 5px 15px !important;
        font-size: 12px;
        gap: 3px !important;
        white-space: nowrap;
    }

    .language-switcher {
        padding: 4px 4px 4px 4px;
    }

    .header .language-switcher .lang-btn img {
        width: 12px;
        height: 12px;
    }

    /* Hamburger col */
    .header .row>.col-auto:last-child {
        flex-shrink: 0;
        padding-left: 0;
    }
}

@media (min-width: 1603px) and (max-width: 1900px) {
    .about-hero-content {
        padding-top: 259px;
    }
}

/* ── Header alignment fix for 992px–1199px ─────────── */
@media (min-width: 992px) and (max-width: 1199px) {
    .header .row {
        flex-wrap: nowrap !important;
    }

    .main-nav ul {
        gap: 1.5rem !important;
    }

    .main-nav .nav-link {
        font-size: 15px;
    }

    .logo-container img {
        height: 35px;
    }

    .header .language-switcher .lang-btn {
        padding: 6px 14px !important;
    }
}

/* ── Header single-line fix for 1199px–1400px ────────── */
@media (min-width: 1199px) and (max-width: 1400px) {
    .header .row {
        flex-wrap: nowrap !important;
        gap: 0 !important;
    }

    .main-nav ul {
        gap: clamp(0.75rem, 1.15vw, 1.5rem) !important;
    }

    .main-nav .nav-link {
        font-size: 14px;
    }

    .logo-container img {
        height: 36px;
    }

    .header .language-switcher .lang-btn {
        padding: 6px 12px !important;
        font-size: 13px;
    }

    .check-status-btn {
        padding: 7px 13px !important;
        font-size: 13px !important;
    }

    .header .row>.col-auto:last-child,
    .header .row>.col-auto {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}

/* ── Header single-line fix for 1401px–1600px ────────── */
@media (min-width: 1401px) and (max-width: 1600px) {
    .main-nav ul {
        gap: 2rem !important;
    }

    .main-nav .nav-link {
        font-size: 15px;
    }
}

@media (max-width: 1400px) {
    .hero-title {
        font-size: 50px;
    }
}

@media (max-width: 1200px) {

    /* ==============================home page============================== */
    .hero-title {
        font-size: 46px;
    }

    .hero-sub {
        margin-top: 75px;
    }

    .hero-about-section {
        padding-top: 51px;
        padding-bottom: 45px;
    }

    .device-content h2 {
        font-size: 41px;
    }

    .card-img {
        height: 152px;
    }

    .card-img img {
        max-height: 142px;
    }

    .quick_links {
        margin-left: 0px;
    }

    .repairing-ftr {
        margin-left: 0px;
    }

    .contact-details {
        margin-left: 0px;
    }

    .hero-about-heading {
        font-size: 36px;
    }

    section#newsletter {
        padding: 20px 97px 20px 97px;
    }

    /* ==========================================about page===================================== */
    .repairing-right {
        margin-top: 57px;
    }

    .sa-list li {
        font-size: 14.5px;
    }

    .sa-title {
        font-size: 32px;
    }

    .service-alternate-row {
        margin-top: 89px;
    }

    #repairing-content {
        padding: 90px 0px;
    }

    .trading-heading {
        font-size: 34px;
    }
}

@media (min-width: 482px) and (max-width: 992px) {
    .device-category {
        padding-bottom: 49px !important;
    }
}

@media (min-width: 482px) and (max-width: 768px) {
    .hero-content h1 {
        font-size: 39px !important;
    }

    /* Keep header items on one line */
    .header .row {
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    .header .row>.col-auto:first-child {
        flex-shrink: 1;
        min-width: 0;
        /* allow logo area to shrink if needed */
    }

    /* Push language switcher & hamburger to right */
    .header .row>.col-auto:nth-last-child(2) {
        margin-left: auto;
    }

    .header .row>.col-auto:last-child {
        flex-shrink: 0;
        padding-left: 10px;
    }
}


@media (max-width: 992px) {

    .hero-section,
    .hero-img {
        height: 700px !important;
    }

    nav.main-nav {
        display: none;
    }

    .hero-content h1 {
        text-align: left;
    }

    .hero-desc {
        text-align: left;
        font-size: 15px;
    }

    .hero-content h1 {
        font-size: 47px;
    }

    .hero-man img.man-bg.ring {
        display: none;
    }

    .device-category {
        padding-bottom: 0px;
        height: auto;
        min-height: auto;
    }

    #testimonials {
        padding-bottom: 61px;
    }

    /* ===================================about page=========================================== */
    .about-right {
        margin-top: 58px;
    }

    .about-fade img {
        width: 39%;
    }

    .about-hero-content {
        padding-top: 244px;
    }

    .global-heading {
        font-weight: 500;
        font-size: 35px;
    }

    /* ==========================trading page - why choose boxes spacing============================= */
    #why-choose-2 .why-choose-box {
        margin-bottom: 24px;
    }

    /* ========================================repairing page================================== */
    .we-supply {
        padding: 39px 0px;
    }

    .supply-content h3 {
        font-size: 30px;
    }

}

@media (max-width: 768px) {
    .service-boxes {
        margin-bottom: 10px;
    }

    /* =============================about page============================= */
    .about-hero-content {
        padding-top: 263px;
    }

    .about-hero-content h1 {
        font-size: 46px;
    }

    .about-hero-content p {
        font-size: 16px;
    }

    /* ====================================trading page==================================== */
    #trading-hub {
        padding-top: 73px;
    }

    .trading-heading {
        font-size: 32px;
    }

    .we-supply {
        padding: 14px 0px;
    }

}

@media (min-width: 768px) and (max-width: 992px) {}


@media (min-width: 482px) and (max-width: 991px) {
    .hero-man img.img-fluid {
        display: none;
    }
}

@media (min-width: 482px) and (max-width: 768px) {
    .hero-about-bg {
        height: 46%;
        left: 36%;
    }

}

@media (min-width: 992px) and (max-width: 1400px) {
    .about-img-short {
        height: 300px;
    }

    .training-img-short {
        height: 255px;
    }

    .training-hero-content h1 {
        font-size: 45px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .trading-image-wrapper img {
        height: 410px;
    }

    .training-img-short {
        height: 281px;
    }
}

@media (min-width: 1700px) and (max-width: 1900px) {
    .hero-sub {
        margin-top: 166px;
    }

}

@media (min-width: 410px) and (max-width: 482px) {
    .about-fade img {
        width: 47% !important;
    }
}



@media (min-width: 321px) and (max-width: 482px) {

    /* ==========================home page============================== */
    .lang-fr.heading {
        font-size: 35px;
    }

    .hero-content h1 {
        font-size: 34px;
    }

    .hero-about-section {
        padding-top: 26px;
        padding-bottom: 27px;
    }

    .hero-about-heading {
        font-size: 33px;
    }

    .fst-italic {
        font-size: 14px;
    }

    .hero-about-bg {
        display: none;
    }

    /* .slide-indicator {
        margin-bottom: -32px;
    } */

    #services {
        padding-top: 93px;
        padding-bottom: 66px;
    }

    .common-title {
        font-size: 29px;
        margin-bottom: 20px;
    }

    .setting-bg-icon {
        top: 4px;
        right: -47px;
        width: 135px;
    }

    .why-choose-box {
        margin-bottom: 0px;
    }

    /* .img-fluid {
        max-width: 85%;
    } */

    .icon-box img {
        width: 29px;
    }

    .why-choose-box h5 {
        font-size: 21px;
    }

    .why-choose-box .icon-box {
        width: 44px;
        height: 44px;
    }

    .why-choose-bg.setting-br {
        bottom: 37px;
        right: -35px;
        width: 165px;
    }

    .device-category {
        padding: 14px 14px 0px 14px !important;
        height: auto;
        min-height: auto;
    }

    #testimonials {
        padding-top: 61px;
    }

    .center-content {
        justify-content: flex-start !important;
        align-items: flex-start !important;
    }

    section#newsletter {
        padding: 7px 0px 14px 0px;
    }

    #testimonials {
        padding-bottom: 11px;
    }

    .cta-title,
    .cta-subtitle {
        /* font-size: 2.1rem; */
        font-size: 29px;
    }

    .btn-call {
        padding: 10px 18px;
    }

    .btn-cta-outline {
        padding: 10px 21px 8px 21px;
    }

    .cta-desc {
        font-size: 16px;
    }

    .device-content h2 {
        font-size: 34px;
    }

    /* Reordering elements in device category section */
    .device-category .row {
        display: flex !important;
        flex-direction: column !important;
    }

    .device-category .col-lg-5 {
        display: contents !important;
    }

    .device-category .device-content {
        order: 1 !important;
    }

    .device-category .col-lg-7 {
        order: 2 !important;
        width: 100% !important;
    }

    .device-category .hero-man {
        order: 3 !important;
        margin-top: 30px !important;
        margin-bottom: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: center !important;
    }

    .device-category .hero-man img.img-fluid {
        display: block;
        margin: 0 auto;
    }

    /* Sliding cards implementation */
    .device-category .col-lg-7 .row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        gap: 16px !important;
        padding: 10px 15px !important;
        scrollbar-width: none;
        margin-top: 36px;
    }

    /* Hide scrollbar for Chrome, Safari and Opera */
    .device-category .col-lg-7 .row::-webkit-scrollbar {
        display: none !important;
    }

    .device-category .col-md-6 {
        display: contents !important;
    }

    .device-category .service-card {
        flex: 0 0 290px !important;
        /* Premium card width for mobile sliding */
        max-width: 290px !important;
        scroll-snap-align: center;
        margin-top: 0 !important;
        margin-bottom: 10px !important;
        height: auto !important;
    }

    .hero-man img.img-fluid {
        right: 12%;
    }

    .why-choose-bg.setting-tl {
        top: 14px;
        left: -50px;
    }

    #why-choose {
        padding-top: 45px;
        padding-bottom: 104px;
    }

    .btn-support {
        padding: 10px 11px;
    }

    .hero-sub {
        margin-top: 11px;
    }

    body.lang-fr .device-category {
        height: auto;
        min-height: auto;
    }

    .site-footer {
        margin: 67px 10px 10px 10px;
    }

    .hero-desc {
        margin-bottom: 21px !important;
    }

    .cta-man-img {
        max-height: 315px !important;
    }

    .footer-copy {
        font-size: 13px;
    }

    .footer-legal a {
        font-size: 13px !important;
    }

    .animate-float {
        width: 87%;
    }


    /* ===================================about page==================================== */
    .about-details-section h2 {
        font-size: 26px;
    }

    .about-hero-content h1 {
        font-size: 39px;
    }

    .about-fade img {
        width: 56%;
        margin-left: -13%;
        margin-bottom: 30px;
    }

    .about-img-tall {
        height: 91%;
    }

    .about-image-layout {
        margin-bottom: 0px;
    }

    .training-about-image img {
        max-height: 300px;
        margin-bottom: 24px;
    }

    .training-float-box {
        padding: 12px 16px;
        min-width: 120px;
        border-radius: 12px;
    }

    .training-float-number {
        font-size: 22px;
    }

    .training-float-text {
        font-size: 12px;
    }

    .training-float-box-top {
        top: 10px;
        left: 8px;
    }

    .training-float-box-right {
        right: 8px;
        top: auto;
        bottom: 10px;
        transform: none;
        width: 180px;
        min-width: 180px;
    }

    .btn-view-services {
        padding: 8px 15px;
    }

    #mv-section {
        padding: 80px 0px;
    }

    .vision-card,
    .mission-card {
        padding: 29px 26px 30px 24px;
        margin-top: 21px;
    }

    .vision-card .icon-box {
        width: 56px;
        height: 56px;
    }

    .premium-item-content {
        padding: 24px 20px 10px 20px;
    }

    .card-text {
        font-size: 15px;
    }

    .about-hero-content {
        padding-top: 238px;
    }

    .global-heading {
        font-size: 27px;
    }

    .rp-text-content {
        margin-top: 0px;
    }

    .about-hero-content.policies {
        padding-top: 200px !important;
    }

    .about-hero-content p {
        font-size: 15px;
    }

    .about-blue-card p {
        font-size: 15px;
    }



    /* =====================================repairing page ================================================= */

    .values-header.service-content {
        text-align: left !important;
    }

    .values-header.service-content .lead-desc {
        margin-left: 0 !important;
        text-align: left !important;
    }

    .repairing-right h3 {
        font-size: 28px;
    }

    #repairing-content {
        padding: 74px 0px;
    }

    #our-services {
        padding: 74px 0 71px;
    }

    .sa-image-box {
        width: 100%;
    }

    .sa-image-box img {
        width: 100% !important;
        max-width: 100% !important;
    }

    .sa-title {
        font-size: 28px;
    }

    .service-alternate-row {
        margin-top: 0px;
        margin-bottom: 0 !important;
    }

    hr.sa-divider.divider-1 {
        margin: 11px 0px;
    }

    .sa-divider {
        margin: 59px 0;
    }

    #brands {
        padding: 71px 0px;
        padding-bottom: 32px;
    }

    /*=========================================trading page ===================================  */
    .trading-heading {
        font-size: 26px;
    }

    .trading-lead {
        font-size: 16px;
    }

    .supply-icon {
        width: 45px;
        height: 45px;
        font-size: 19px;
    }

    .supply-content h3 {
        font-size: 26px;
        font-weight: 600;
    }

    .supply-content p {
        font-size: 15px;
    }

    .trading-highlight-box {
        padding: 17px;
        margin-top: 44px;
    }

    .trading-highlight-box p {
        font-size: 14.5px;
    }

    .trading-content {
        margin-top: 47px;
    }

    .global {
        margin-bottom: 20px;
    }

    .common-title.customers {
        text-align: left !important;
        margin-bottom: 36px !important;
    }

    #why-choose-2 {
        padding: 50px 0px;
        padding-bottom: 20px;
    }

    .ftr-content {
        padding-top: 4px;
    }

    /* ==================================contact page================================= */
    .contact-form-box {
        padding: 37px 22px 37px 22px;
        border-radius: 24px;
        margin-top: 35px !important;
    }

    .main-links {
        gap: 8px !important;
    }

    .contact-icon-box {
        width: 43px;
        height: 43px;
    }

    .text-muted {
        font-size: 16px;
    }

    section#contact-details {
        padding-bottom: 0px !important;
    }

    .logo img {
        width: 88%;
    }

    .contact-btn-2 {
        width: 44px;
        height: 44px;
        font-size: 21px;
    }

    div#heroCarousel {
        height: 100vh !important;
    }

    .slide-indicator {
        display: none;
    }
}



@media (max-width: 991px) {
    .about-image {
        display: none;
    }

    /* Fix hero-man negative margin causing overflow */
    .hero-man {
        margin-left: 0;
    }

    /* Ensure the newsletter section doesn't overflow */
    section#newsletter {
        padding-left: 6px;
        padding-right: 6px;
    }
}

@media (max-width: 768px) {

    /* Ensure service alternate rows don't bleed */
    .service-alternate-row {
        overflow: hidden;
    }

    /* Constrain the floating trading card so it doesn't bleed */
    .trading-floating-card {
        right: 10px;
        padding: 14px 16px;
    }

    /* Ensure supply expand container doesn't overflow */
    .supply-expand-container {
        overflow: hidden;
    }
}