/* Fonts loaded via header.php */


:root{--color-navy:#0d1b2e;--color-navy-mid:#112240;--color-primary:#1e4d8c;--color-accent:#2979d4;--color-accent-hover:#1e65bb;--color-light:#5ba3e8;--color-ice:#a8d4f5;--color-white:#ffffff;--text-primary:#ffffff;--text-secondary:#334155;--text-muted:#475569;--text-accent:#2979d4;--text-link:#a5cbf5;--text-link-hover:#ffffff;--heading-h1:#ffffff;--heading-h2:#e2eaf5;--heading-h3:#2979d4;--heading-footer:#ffffff;--bg-footer:#0d1b2e;--bg-footer-bottom:#091525;--bg-footer-divider:rgba(255, 255, 255, 0.07);--btn-primary-bg:#2979d4;--btn-primary-text:#ffffff;--btn-primary-hover-bg:#1e65bb;--input-bg:rgba(255, 255, 255, 0.06);--input-border:rgba(255, 255, 255, 0.12);--input-border-focus:#2979d4;--input-text:#ffffff;--input-placeholder:#a0b2c4;--input-shadow-focus:0 0 0 3px rgba(41, 121, 212, 0.22);--logo-icon-bg:#2979d4;--logo-icon-border:rgba(91, 163, 232, 0.4);--border-footer:rgba(255, 255, 255, 0.07);--border-accent:#2979d4;--gradient-footer-top:linear-gradient(180deg, rgba(41, 121, 212, 0.05) 0%, transparent 60px);--shadow-btn:0 4px 20px rgba(41, 121, 212, 0.35);--shadow-btn-hover:0 6px 28px rgba(41, 121, 212, 0.50);--transition-base:220ms ease;--transition-fast:140ms ease;--footer-pt:72px;--footer-pb:48px;--font-body:'Plus Jakarta Sans', sans-serif;--font-display:font-family: "Space Grotesk", sans-serif;--font-size-xs:0.72rem;--font-size-sm:0.85rem;--font-size-base:1rem;--font-size-lg:1.1rem;--radius-sm:5px;--radius-md:8px;--radius-lg:12px;--radius-pill:9999px}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html,body{overflow-x:hidden;overflow-x:clip}body{font-family:var(--font-body);color:var(--text-secondary)}h1{font-family:'Plus Jakarta Sans',sans-serif;font-size:var(--font-size-5xl);font-weight:var(--font-black);color:var(--heading-h1);letter-spacing:-.02em;margin-bottom:var(--space-md)}h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:var(--font-size-3xl);font-weight:var(--font-bold);color:var(--heading-h2);margin-bottom:var(--space-md)}h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:var(--font-size-2xl);font-weight:var(--font-semibold);color:var(--heading-h3)}small,.text-muted{font-size:var(--font-size-sm);color:var(--text-muted)}.main-footer{background:var(--bg-footer);position:relative;overflow:hidden}.main-footer::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgb(41 121 212 / .6) 30%,rgb(91 163 232 / .8) 50%,rgb(41 121 212 / .6) 70%,transparent 100%)}.main-footer::after{content:'';position:absolute;top:-80px;left:-80px;width:460px;height:360px;background:radial-gradient(ellipse,rgb(41 121 212 / .07) 0%,transparent 70%);pointer-events:none}.footer-inner{padding:var(--footer-pt) 0 var(--footer-pb);position:relative;z-index:1}.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:20px;text-decoration:none}.footer-tagline{color:#94a3b8;font-size:14px;line-height:1.65;max-width:295px;font-weight:400}.footer-heading{font-family:var(--font-display);font-size:1.05rem;font-weight:700;letter-spacing:.03em;color:var(--heading-footer);margin-bottom:20px;position:relative;padding-bottom:10px}.footer-heading::after{content:'';position:absolute;bottom:0;left:0;width:77px;height:2px;background:var(--border-accent);border-radius:2px}.footer-link{display:block;color:var(--text-link);text-decoration:none;font-size:14px;font-weight:400;line-height:1;margin-bottom:13px;transition:color var(--transition-fast),transform var(--transition-fast);letter-spacing:.01em}.footer-link:hover{color:var(--text-link-hover);transform:translateX(3px)}.footer-link:last-child{margin-bottom:0}.footer-divider{border:none;border-top:1px solid var(--border-footer);margin:0}.footer-bottom{background:var(--bg-footer-bottom);padding:18px 0}.footer-copyright{color:#94a3b8;font-size:var(--font-size-xs);font-weight:400;letter-spacing:.05em;text-transform:uppercase;margin:0}.footer-legal-links{display:flex;gap:28px;align-items:center}.footer-legal-link{color:#94a3b8;text-decoration:none;font-size:var(--font-size-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;transition:color var(--transition-fast)}.footer-legal-link:hover{color:var(--text-link-hover)}@media (max-width:991.98px){:root{--footer-pt:52px;--footer-pb:36px}.footer-heading{margin-top:8px}}@media (max-width:767.98px){:root{--footer-pt:44px;--footer-pb:28px}.footer-tagline{max-width:100%}.footer-bottom .container>div{flex-direction:column;gap:14px;text-align:center}.footer-legal-links{gap:18px;flex-wrap:wrap;justify-content:center}}.main-header{background:var(--header-bg);border-bottom:1px solid var(--header-border);box-shadow:var(--header-shadow);transition:all var(--transition-base);z-index:1050}.navbar-nav .nav-link{font-size:17px;font-weight:600;color:var(--nav-link-color)!important;padding:10px 15px!important;position:relative;transition:color var(--transition-fast)}.navbar-nav .nav-link::after{content:'';position:absolute;bottom:5px;left:15px;right:15px;height:2px;background:var(--color-accent);transform:scaleX(0);transition:transform var(--transition-base);border-top:0px!important}.navbar-nav .nav-link:hover::after,.navbar-nav .nav-link.active::after,.navbar-nav .show>.nav-link::after{transform:scaleX(1)}.navbar-nav .nav-link:hover,.navbar-nav .nav-link.active,.navbar-nav .show>.nav-link{color:var(--color-accent)!important}@media (min-width:1200px){.dropdown-menu{display:block;opacity:0;visibility:hidden;transform:translateY(10px);transition:all 0.3s ease;border:none;box-shadow:0 10px 30px rgb(0 0 0 / .1);border-top:3px solid var(--color-accent)}.dropdown:hover>.dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}}.dropdown-item{font-weight:500;padding:.6rem 1.5rem;transition:all 0.2s ease}.dropdown-item:hover{background-color:#f8fafc;color:var(--color-accent);padding-left:1.8rem;background-color:#f8fafc;color:var(--color-accent)!important}.navbar-toggler{box-shadow:none!important;border:none}.navbar-toggler .bi-list{color:var(--color-accent);font-size:1.8rem}@media (max-width:1199px){.offcanvas{width:300px!important;background-color:#0d1b2e!important}.offcanvas .nav-link{color:#fff!important;border-bottom:1px solid rgb(255 255 255 / .1);padding:15px 15px!important}.offcanvas .dropdown-menu{background:rgb(255 255 255 / .05);border:none;margin:0}.offcanvas .dropdown-item{color:rgb(255 255 255 / .8);padding:12px 30px;border-bottom:1px solid rgb(255 255 255 / .05)}.offcanvas .nav-link::after{display:none}.offcanvas-body{display:flex;flex-direction:column;justify-content:space-between}}.btn-primary{background-color:#2563eb;border:none;font-weight:600;transition:transform 0.2s;font-size:20px}.btn-primary:hover{background-color:var(--color-accent-hover);transform:translateY(-2px)}.light-subheading{font-size:18px;color:#6c757d}.content-p{font-size:16px}.hero-section{background-image:url(/img/banner.webp);background-size:cover;background-position:center;background-repeat:no-repeat;padding-top:115px;padding-bottom:100px}.hero-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,rgb(255 255 255 / 94%) 0%,rgb(21 50 80 / 64%) 100%)}.banner-hover-btn:hover{color:#084298}.z-1{z-index:1}@media (max-width:576px){.display-2{font-size:2.5rem}.hero-section{height:auto!important;padding:120px 0 80px}}.card-img-top{object-fit:cover;object-position:center}.image-fade-overlay{position:absolute;bottom:0;left:0;width:100%;height:60px;background:linear-gradient(to bottom,#fff0 0%,rgb(255 255 255) 100%)}.rounded-4{border-radius:1.25rem!important}.card-body{display:flex;flex-direction:column}.shadow-hover{box-shadow:0 10px 30px rgb(0 0 0 / .05);transition:all 0.4s cubic-bezier(.165,.84,.44,1)}.shadow-hover:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgb(0 0 0 / .12)}.product-showcase{background:#f8f9fa;height:260px;position:relative;z-index:1;overflow:hidden}.product-img{height:85%;width:85%;object-fit:cover;border-radius:12px;transition:transform 0.5s ease;z-index:2}.card:hover .product-img{transform:scale(1.08)}.product-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:150%;height:150%;background:radial-gradient(circle,rgb(13 110 253 / .05) 0%,#fff0 70%);z-index:1}.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:40px}.btn-link-modern{color:#084298;font-weight:700;font-size:.875rem;text-decoration:none;display:flex;align-items:center;gap:8px;transition:gap 0.3s ease}.btn-link-modern:hover{gap:12px;color:#0a58ca}.rounded-4{border-radius:1.25rem!important}.service-card-v2{min-height:405px;position:relative;transition:all 0.5s cubic-bezier(.4,0,.2,1);border:1px solid #4848488c!important}.v2-img-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.v2-card-img{width:100%;height:100%;object-fit:cover;transition:transform 0.8s ease}.v2-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgb(6 9 18 / .1) 0%,rgb(6 9 18 / .7) 50%,rgb(6 9 18) 100%)}.v2-icon-box{width:52px;height:52px;background:rgb(37 99 235 / .2);border:1px solid rgb(37 99 235 / .4);border-radius:14px;display:flex;align-items:center;justify-content:center;color:#3b82f6;font-size:1.4rem;box-shadow:0 4px 12px rgb(0 0 0 / .3)}.v2-text-muted{color:#94a3b8;line-height:1.7;font-size:16px}.service-card-v2:hover{transform:translateY(-10px)}.service-card-v2:hover .v2-card-img{transform:scale(1.1);opacity:.6}.service-card-v2:hover .v2-icon-box{background:#2563eb;color:#fff;border-color:#3b82f6}.check-icon-circle{width:26px;height:27px;border-radius:50%;flex-shrink:0;background-color:#d0ffad!important}.check-icon-circle i{font-size:20px;color:darkgreen}@media (max-width:991px){.display-6{font-size:1.75rem}}.custom-input{background-color:#f1f5f9!important;border:1px solid #001fff63!important;border-radius:12px!important;padding:12px 18px!important;font-size:1rem;transition:all 0.2s ease-in-out}.custom-input:focus{background-color:#ffffff!important;border-color:#3b82f6!important;box-shadow:0 4px 12px rgb(59 130 246 / .08)!important}.btn-primary.transition-all:hover{transform:translateY(-2px);background-color:#1d4ed8!important;box-shadow:0 10px 20px rgb(37 99 235 / .2)!important}.check-icon-box{flex-shrink:0}@media (max-width:991px){.col-lg-6{padding:3rem 1.5rem!important}.col-md-6{width:100%!important}}.featured-tech-card{background:radial-gradient(circle at 100% 100%,#2b6df5 0%,#2563eb 100%);border:1px solid rgb(255 255 255 / .1)}.rounded-5{border-radius:2.5rem!important}.tech-cta-btn{color:#2563eb!important;font-size:1.1rem;transition:all 0.3s ease}.tech-cta-btn:hover{transform:scale(1.05);background-color:#f8fafc;box-shadow:0 10px 20px rgb(0 0 0 / .15)!important}@media (max-width:768px){.display-5{font-size:2rem}.featured-tech-card{text-align:center}.featured-tech-card .d-flex{justify-content:center}}.accordion-item{transition:all 0.25s ease-in-out}.accordion-item:hover{border-color:#3b82f6!important;transform:translateY(-2px)}.accordion-button{background-color:#ffffff!important;box-shadow:none!important;color:#1e293b}.accordion-button:not(.collapsed){color:#2563eb;background-color:#f8fafc!important}.accordion-button::after{filter:grayscale(1) opacity(.5)}.accordion-button:not(.collapsed)::after{filter:none}.main-header{height:auto;background:#fff;transition:height 0.3s ease-in-out,background 0.3s ease-in-out,box-shadow 0.3s ease-in-out,border-bottom 0.3s ease-in-out;z-index:1050;display:flex;align-items:center}.main-header.scrolled{height:75px;background:rgb(255 255 255 / .9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 4px 30px rgb(0 0 0 / .03);border-bottom:1px solid rgb(255 255 255 / .3);overflow:visible}.nav-link{font-weight:600;font-size:15px;color:var(--brocus-navy)!important;padding:0 15px!important;transition:color 0.2s ease}.nav-link:hover{color:var(--brocus-blue)!important}.phone-link{font-weight:700;color:var(--brocus-blue);text-decoration:none;font-size:15px;display:flex;align-items:center;gap:8px}.fixed-call-wrapper{position:fixed;bottom:0;left:0;right:0;z-index:1040;display:flex;align-items:center;justify-content:center}.floating-call-btn{background:#2563eb;color:#fff;text-decoration:none;padding:13px 16px;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;font-weight:800;font-size:15px;box-shadow:0 -4px 20px rgba(13,27,46,.35);transition:background 0.3s ease;position:relative;z-index:10}.floating-call-btn i{font-size:1.05rem}.floating-call-btn:hover{background:#1e65bb;color:#fff}.call-text{white-space:nowrap}@media (max-width:575.98px){.floating-call-btn{font-size:13px;padding:12px 10px;gap:8px}.call-text{white-space:normal;text-align:center;line-height:1.3}}@media (max-width:1199.98px){.dropdown-text-wrap{white-space:normal;word-break:break-word;overflow-wrap:break-word}}@media (min-width:1200px){.dropdown-text-wrap{white-space:nowrap;word-break:normal;overflow-wrap:normal}}


.blog-card-wrapper-custom {
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Fixed Image Size & Zoom Effect */
.blog-card-img-custom {
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    position: relative;
}

.blog-card-img-custom img {
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease;
}

.blog-card-wrapper-custom:hover .blog-card-img-custom img {
    transform: scale(1.05);
}

/* Typography & Hover Colors */
.blog-title-custom {
    font-size: 1.25rem;
    color: #1a1a1a;
    transition: color 0.3s ease;
    line-height: 1.4;
}

.blog-card-wrapper-custom:hover .blog-title-custom,
.blog-card-wrapper-custom:hover .btn-link-modern-custom {
    color: #2563eb !important; 
}

/* Line Clamp for Excerpt - Updated to 2 Lines */
.blog-excerpt-custom {
    color: #6c757d;
    font-size: 0.95rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Restricts to exactly 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-meta-custom {
    font-size: 0.85rem;
    color: #878a8f;
}

.btn-link-modern-custom {
    text-decoration: none;
    color: #1a1a1a;
    font-weight: 600;
    font-size: 0.9rem;
    transition: color 0.3s ease;
    display: inline-flex;
    align-items: center;
}

/* Optional: Minor adjustments to Swiper Navigation Arrows so they don't overlap the design */

 .stickyMobileHeader {
         display: flex;
    flex-direction: column;
 
 }
    
    
   .stickyMobileHeaderMainDiv {
           background: #134fd2;
    width: -webkit-fill-available;
    width: -moz-available;
    width: stretch;
        text-align: center;
        display: none;
    }
    .stickyMobileHeaderMainDiv a{
            color: white;
            text-decoration: none;
                font-size: 14px;
    margin-left: 10px;
    }
  @media (max-width: 1199px) {
    .stickyMobileHeaderMainDiv {
        display: block;
        padding-top: 2px;
        padding-bottom: 2px;
    }
    
    /* Fix: On mobile/tablet, don't restrict header height when scrolled â€” 
       the call bar + navbar need more than 75px */
    .main-header.scrolled {
        height: auto;
        overflow: visible !important;
        /* CRITICAL FIX: backdrop-filter creates a new containing block on mobile browsers,
           making the offcanvas (position:fixed) relative to the header instead of viewport.
           This is what clips the offcanvas to ~75px. Disable it on mobile. */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(255, 255, 255, 0.98) !important;
    }
    
    /* Fix: Increase hero top padding on mobile to account for 
       the sticky call bar height added to the fixed header */
    .hero-section {
        padding-top: 140px;
    }
}

/* Stack the top hotline bar into two clean centered lines on mobile/tablet */
@media (max-width: 767.98px) {
    .stickyMobileHeaderMainDiv {
        flex-direction: column !important;
        gap: 2px !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }
    .stickyMobileHeaderMainDiv .topbar-sep {
        display: none !important;
    }
}

/* Keep the top hotline bar compact on narrow phones */
@media (max-width: 480px) {
    .stickyMobileHeaderMainDiv span,
    .stickyMobileHeaderMainDiv a {
        font-size: 12px !important;
    }
}

/* Hero CTA: always render on a single line, shrink to fit on mobile */
.hero-cta-btn {
    white-space: nowrap;
}
@media (max-width: 575.98px) {
    .hero-cta-btn {
        font-size: 12px !important;
        padding: 12px 14px !important;
    }
}
@media (max-width: 359.98px) {
    .hero-cta-btn {
        font-size: 11px !important;
        padding: 11px 10px !important;
    }
}

/* Fix: Hide floating call button when mobile nav (offcanvas) is open */

/* Fix: Extra bottom padding in offcanvas so items aren't cut off on short viewports */
@media (max-width: 1199px) {
    .offcanvas .offcanvas-body {
        padding-bottom: 30px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Accessibility fixes for touch targets */
button:not(.splide__pagination__page):not(.splide__arrow):not(.btn-close), a.btn {
    min-width: 48px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.iti input[type="tel"].custom-input { padding-left: 90px !important; }
.deviceSwiper{position:relative;max-width:100%;padding:0 10px}
.deviceSwiper .splide__track{overflow:hidden;height:auto!important;padding:10px 45px 25px 45px!important}
.deviceSwiper .splide__list{display:flex!important;height:auto!important;min-height:auto!important;align-items:stretch!important}
.deviceSwiper .splide__slide{height:auto!important;display:flex!important;flex-direction:column!important}
.deviceSwiper .splide__slide .card{height:100%!important;width:100%;max-width:100%;display:flex!important;flex-direction:column!important;justify-content:space-between!important;background:#fff;border:1px solid #eef2f6!important;box-shadow:0 4px 20px rgba(0,0,0,0.05);border-radius:1.25rem!important;transition:transform .3s ease,box-shadow .3s ease}
.deviceSwiper .product-showcase{background:#f1f5f9!important;height:190px!important;min-height:190px!important;max-height:190px!important;width:100%!important;position:relative;border-radius:1rem!important;display:block!important;overflow:hidden!important;padding:0!important;margin-bottom:0.85rem!important}
.deviceSwiper .product-img{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:cover!important;object-position:center!important;border-radius:1rem!important;display:block!important;transition:transform .4s ease}
.deviceSwiper .card:hover .product-img{transform:scale(1.06)}
.deviceSwiper .card-body{display:flex!important;flex-direction:column!important;flex-grow:1!important;padding:0.5rem 0.85rem 0.85rem!important}
.deviceSwiper .card-body h5{font-size:1.05rem;font-weight:700;line-height:1.35;min-height:2.7em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:0.4rem}
.deviceSwiper .card-body p.line-clamp-2{font-size:0.85rem;line-height:1.45;color:#64748b;min-height:2.9em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:0}
.deviceSwiper .card-body .border-top{margin-top:auto!important;padding-top:0.75rem!important;border-color:#f1f5f9!important}
.deviceSwiper .splide__arrow{background:#fff!important;color:#0d6efd!important;box-shadow:0 4px 14px rgba(0,0,0,0.15)!important;width:40px!important;height:40px!important;opacity:1!important;transition:all .25s ease!important;z-index:10;top:calc(50% - 10px)!important}
.deviceSwiper .splide__arrow:hover{background:#0d6efd!important;color:#fff!important;transform:translateY(-50%) scale(1.1)!important;box-shadow:0 6px 18px rgba(13,110,253,0.3)!important}
.deviceSwiper .splide__arrow--prev{left:0!important}
.deviceSwiper .splide__arrow--next{right:0!important}
.deviceSwiper .splide__pagination{bottom:-10px!important}
.deviceSwiper .splide__pagination__page{background:#cbd5e1!important;transition:all .3s ease!important}
.deviceSwiper .splide__pagination__page.is-active{background:#0d6efd!important;transform:scale(1.3)!important}
@media(max-width:991px){.deviceSwiper .splide__track{padding:10px 0 25px 0!important}.deviceSwiper .splide__arrow{display:none!important}.deviceSwiper{padding:0}}






