/* ===== Responsive Styles - Mobile & Tablet Only ===== */
/* Desktop (>=992px) design is NOT changed */


/* --- Mobile (max-width: 575.98px) --- */
@media (max-width: 575.98px) {

    /* Typography */
    .display-1 { font-size: 2.5rem !important; }
    .display-4 { font-size: 2rem !important; }
    h1 { font-size: 1.75rem !important; }
    h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.25rem !important; }

    .section-title h1,
    .section-title h2 { font-size: 1.5rem !important; }

    /* Page header (bg-header) */
    .bg-header .display-4 { font-size: 1.75rem !important; }
    .bg-header .h5 { font-size: 0.95rem !important; }
    .bg-header .far.fa-circle { font-size: 0.5rem !important; }

    /* Carousel */
    .carousel-caption h1.display-1 { font-size: 2rem !important; }
    .carousel-caption h4 { font-size: 1rem !important; }
    .carousel-caption { padding: 1rem !important; }
    .carousel-control-prev-icon,
    .carousel-control-next-icon { width: 2rem; height: 2rem; }

    /* Facts */
    .facts h1 { font-size: 1.8rem !important; }

    /* Pricing */
    .pricing-plan h1.display-5 { font-size: 2rem !important; }

    /* Team */
    .team-item .text-center h4 { font-size: 1.1rem !important; }

    /* Section padding */
    .container-fluid.py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
    .container.py-5 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
    .container-fluid.px-5 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .container { padding-left: 1rem !important; padding-right: 1rem !important; }

    /* Service items */
    .service-item { padding: 1.5rem 1rem !important; }

    /* Pricing plans */
    .pricing-plan .p-5 { padding: 1.5rem !important; }

    /* Testimonial */
    .testimonial-item .px-5 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }

    /* Quote form */
    .quote-form .row.g-3 { gap: 0.5rem; }
    .quote-form input,
    .quote-form select,
    .quote-form textarea { font-size: 14px !important; }

    /* Team social */
    .team-social .btn { width: 35px; height: 35px; font-size: 0.8rem; }

    /* Footer copyright */
    .footer-copyright .copyright-text,
    .footer-copyright .d-flex {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.25rem;
    }
    .footer-copyright .copyright-text p,
    .footer-copyright .d-flex p { font-size: 0.8rem; }

    /* Back to top */
    .back-to-top { width: 40px; height: 40px; font-size: 1rem; bottom: 15px; right: 15px; }

    /* SSL banner */
    .ssl-banner-wrapper img { max-height: 80px; }

    /* Vendor carousel */
    .vendor-carousel img { max-height: 60px; }

    /* About / Feature image */
    .about-img-wrapper,
    .feature-img-wrapper { min-height: 200px; }

    /* Container bg-primary sections */
    .bg-primary.p-4 { padding: 1rem !important; }

    /* Topbar (if visible on mobile) */
    .topbar-small { font-size: 0.75rem; }

    /* Policy page cards */
    .terms-card { padding: 18px 16px; }
    .terms-card-title { font-size: 17px; gap: 10px; }
    .terms-num { width: 34px; height: 34px; font-size: 13px; }
    .lang-switch { padding: 6px 12px; gap: 0.6rem; }
    .lang-opt { min-width: 50px; font-size: 13px; }

    /* Tables - horizontal scroll */
    .table-responsive-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table { font-size: 13px; }

    /* Career page */
    .career-content { padding: 0 1rem; }

    /* Notice page */
    .notice-content { padding: 0 1rem; }

    /* Product pages - fixed dimension images */
    .col-lg-5 img[style*="height:600px"],
    .col-lg-5 img[style*="width:600px"] {
        width: 100% !important;
        height: auto !important;
        max-width: 100%;
    }
    .col-lg-5[style*="min-height: 500px"] {
        min-height: auto !important;
    }

    /* SSL banner */
    img[src*="sslbanner"] {
        width: 100% !important;
        height: auto !important;
        max-width: 100%;
        max-height: 80px;
    }

    /* Payment banner image */
    img[src*="paymentbanner"] {
        width: 100% !important;
        height: auto !important;
        max-width: 100%;
    }
}


/* --- Tablet (max-width: 767.98px) --- */
@media (max-width: 767.98px) {

    /* Typography */
    .display-1 { font-size: 3rem !important; }
    .display-4 { font-size: 2.2rem !important; }

    /* Page header */
    .bg-header { margin-bottom: 10px !important; }
    .bg-header.py-5 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
    .bg-header .row.py-5 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
    .bg-header .display-4 { font-size: 2rem !important; }

    /* Carousel */
    .carousel-caption { padding: 1rem !important; }
    .carousel-caption h1.display-1 { font-size: 2.2rem !important; }

    /* About / Feature image */
    .about-img-wrapper { min-height: 250px; }
    .feature-img-wrapper { min-height: 200px; margin: 1rem 0; }

    /* Facts */
    .facts .col-lg-4 { margin-bottom: 0.5rem; }
    .facts .bg-primary,
    .facts .bg-light { height: 120px !important; padding: 0.5rem !important; }
    .facts .ps-4 { padding-left: 0.75rem !important; }
    .facts .rounded { width: 45px !important; height: 45px !important; }
    .facts .rounded i { font-size: 1.2rem !important; }

    /* Footer */
    .footer-about { margin-bottom: 1rem; }

    /* SSL banner */
    .ssl-banner-wrapper img { max-height: 80px; }

    /* Section padding */
    .container-fluid.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
    .container.py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }

    /* Page header margin */
    .bg-header[style*="margin-bottom: 90px"] { margin-bottom: 30px !important; }

    /* Policy cards */
    .terms-card { padding: 22px 20px; }

    /* Product pages - tablet */
    .col-lg-5 img[style*="height:600px"],
    .col-lg-5 img[style*="width:600px"] {
        width: 100% !important;
        height: auto !important;
        max-width: 100%;
    }
    .col-lg-5[style*="min-height: 500px"] {
        min-height: 350px !important;
    }

    /* SSL banner - tablet */
    img[src*="sslbanner"] {
        max-height: 100px;
    }
}


/* --- Small desktop / Tablet landscape (max-width: 991.98px) --- */
@media (max-width: 991.98px) {

    /* Navbar - match Bootstrap collapse breakpoint */
    .sticky-top.navbar-dark { position: relative; background: #FFFFFF; }

    .navbar-dark .navbar-nav .nav-link,
    .navbar-dark .navbar-nav .nav-link.show,
    .sticky-top.navbar-dark .navbar-nav .nav-link {
        padding: 10px 0;
        color: var(--dark);
    }

    .navbar-dark .navbar-brand h1 { color: var(--primary); }

    .navbar-nav .nav-item { padding: 0.25rem 0; }

    .navbar .btn-primary { margin-left: 0 !important; margin-top: 0.5rem; }
    .navbar .ms-3 { margin-left: 0 !important; }

    /* Dropdown in mobile navbar */
    .navbar-nav .dropdown-menu {
        position: static !important;
        border: none;
        background: transparent;
        padding-left: 1rem;
    }
    .navbar-nav .dropdown-menu.show {
        display: block;
    }
    .navbar-nav .dropdown-menu .dropdown-item {
        color: var(--dark);
        padding: 0.4rem 1rem;
        font-size: 0.95rem;
        white-space: normal;
    }
    .navbar-nav .dropdown-menu .dropdown-item:hover {
        background: transparent;
        color: var(--primary);
    }

    /* Navbar button spacing */
    .navbar .btn-primary { display: inline-block; width: auto; }
    .navbar .d-flex { flex-wrap: wrap; gap: 0.5rem; }
    .navbar .ms-auto { margin-left: 0 !important; }

    /* Navbar search button */
    .navbar .btn.text-primary.ms-3 { margin-left: 0 !important; }

    /* Topbar on mobile - hide by default (already has d-none d-lg-block) */

    /* Footer copyright - center on mobile */
    .footer-copyright .copyright-text { justify-content: center !important; }
}


/* --- Desktop (min-width: 992px) - keep existing --- */


/* --- General responsive utilities --- */

/* Responsive images (base, not inside @media) */
img { max-width: 100%; height: auto; }

/* Service icons - ensure they scale */
.service-icon svg { width: 2em; height: 2em; }

/* Team images */
.team-img img { width: 100%; height: auto; object-fit: cover; }

/* Vendor carousel images */
.vendor-carousel img { max-width: 100%; height: auto; max-height: 80px; object-fit: contain; margin: 0 auto; }
.vendor-carousel .owl-item { display: flex; align-items: center; justify-content: center; }

/* SSL Banner */
.ssl-banner-wrapper { width: 100%; max-width: 1500px; margin: 0 auto; padding: 0 15px; }
.ssl-banner-wrapper img { width: 100%; height: auto; max-height: 150px; object-fit: contain; }

/* About section image */
.about-img-wrapper { width: 100%; height: 100%; min-height: 300px; border-radius: 15px !important; overflow: hidden; }
.about-img-wrapper img { width: 100%; height: 100%; object-fit: cover; border-radius: 15px !important; }

/* Feature section image */
.feature-img-wrapper { width: 100%; height: 100%; min-height: 300px; border-radius: 15px !important; overflow: hidden; }
.feature-img-wrapper img { width: 100%; height: 100%; object-fit: cover; border-radius: 15px !important; }

/* Footer adjustments */
.footer-about .navbar-brand img { max-width: 100%; height: auto; }

/* Footer links */
.link-animated a { transition: all 0.3s ease; }
.link-animated a:hover { color: #ffffff !important; padding-left: 0.5rem; }

/* Testimonial items */
.testimonial-item { height: 100%; }

/* Service items */
.service-item { height: 100%; padding: 2rem 1.5rem; }

/* Pricing cards */
.pricing-plan .bg-light,
.pricing-plan .bg-white { height: 100%; }

/* Facts transition */
.facts .bg-primary,
.facts .bg-light { transition: all 0.3s ease; }

/* Footer copyright */
.footer-copyright .copyright-text {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    min-height: 75px;
    padding: 10px 0;
}
.footer-copyright .d-flex {
    gap: 0.5rem 0.75rem;
    flex-wrap: wrap;
    min-height: 75px;
    padding: 10px 0;
}

@media (min-width: 992px) {
    .footer-copyright .copyright-text { justify-content: flex-end; }
    .footer-copyright .d-flex { flex-wrap: nowrap !important; justify-content: flex-end; }
}

/* Back to top button */
.back-to-top {
    position: fixed;
    display: none;
    right: 45px;
    bottom: 45px;
    z-index: 99;
}

/* Facts positioning */
@media (min-width: 991.98px) {
    .facts { position: relative; margin-top: -75px; z-index: 1; }
}

/* Footer about positioning */
@media (min-width: 767.98px) {
    .footer-about { margin-bottom: -75px; }
}

/* Quote form */
.quote-form .form-control,
.quote-form .form-select { border-radius: 8px; }

/* Team social icons */
.team-social .btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Page header bg-header */
.bg-header {
    background: linear-gradient(rgba(9, 30, 62, .7), rgba(9, 30, 62, .7)), url(../img/carousel-1.jpg) center center no-repeat;
    background-size: cover;
}