/********** Template CSS **********/
:root {
    --primary: #302f84;
    --secondary: #a77029;
    --light: #ECF4FF;
    --dark: #8799a0;
}

html,
body {
    background-color: #ffffff;
    color: #212529;
}

[class^=flaticon-]:before,
[class*=" flaticon-"]:before,
[class^=flaticon-]:after,
[class*=" flaticon-"]:after {
    font-size: inherit;
    margin-left: 0;
}

h1,
h2,
.font-weight-bold {
    font-weight: 700 !important;
}

h3,
h4,
.font-weight-semi-bold {
    font-weight: 600 !important;
}

h5,
h6,
.font-weight-medium {
    font-weight: 500 !important;
}

.btn {
    font-family: 'Jost', sans-serif;
    font-weight: 600;
    transition: .5s;
}

.btn-primary,
.btn-secondary,
.btn-primary:hover,
.btn-secondary:hover {
    color: #FFFFFF;
}

.btn-primary:hover {
    background: var(--secondary);
    border-color: var(--secondary);
}

.btn-secondary:hover {
    background: var(--primary);
    border-color: var(--primary);
}

.btn-square {
    width: 36px;
    height: 36px;
}

.btn-sm-square {
    width: 28px;
    height: 28px;
}

.btn-lg-square {
    width: 46px;
    height: 46px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

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

.navbar-light .navbar-nav .nav-link {
    font-family: 'Jost', sans-serif;
    position: relative;
    margin-left: 30px;
    padding: 30px 0;
    font-size: 20px;
    font-weight: 500;
    color: var(--dark);
    outline: none;
    transition: .5s;
}

.sticky-top.navbar-light .navbar-nav .nav-link {
    padding: 20px 0;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    color: var(--primary);
}

@media (min-width: 992px) {
    .navbar-light .navbar-nav .nav-link::before {
        position: absolute;
        content: "";
        width: 0;
        height: 5px;
        bottom: 0;
        left: 50%;
        background: var(--primary);
        transition: .5s;
    }

    .navbar-light .navbar-nav .nav-link:hover::before,
    .navbar-light .navbar-nav .nav-link.active::before {
        width: 100%;
        left: 0;
    }

    .navbar-light .navbar-nav .nav-link.nav-contact::before {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .navbar-light .navbar-nav .nav-link  {
        margin-left: 0;
        padding: 10px 0;
    }
}

.carousel-caption {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(18, 15, 45, .5);
    z-index: 1;
}

@media (max-width: 576px) {
    .carousel-caption h5 {
        font-size: 14px;
        font-weight: 500 !important;
    }

    .carousel-caption h1 {
        font-size: 30px;
        font-weight: 600 !important;
    }
}

.carousel-control-prev,
.carousel-control-next {
    width: 10%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
}

.carousel-indicators {
    align-items: flex-end;
}

.carousel-indicators [data-bs-target] {
    width: 5px;
    height: 25px;
}

.carousel-indicators .active {
    height: 45px;
}

.pec-header1 {
    background: linear-gradient(rgba(18, 15, 45, .5), rgba(18, 15, 45, .5)), url(../img/carousel-6.jpg) top right no-repeat;
    background-size: cover;
}

    /* Use a real image path you have in /img/. Fallbacks: tries pec-header2.jpg, then Engineering.jpg */
    .pec-header2{
      position: relative;
      /* Top overlay gradient, then image layer */
      background-image:
        linear-gradient(120deg, rgba(13,110,253,.55), rgba(111,66,193,.55)),
        url("img/carousel-4.jpg");
      /* If pec-header2.jpg is missing, uncomment the next line as a hard fallback: */
      /* background-image: linear-gradient(120deg, rgba(13,110,253,.55), rgba(111,66,193,.55)), url("img/Engineering.jpg"); */
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      /* Ensure visible height even if content is short */
      min-height: 360px;
      /* Create contrast for text if bg image is bright */
      color: #fff;
    }
    /* Optional: subtle overlay via ::before if you want stronger readability */
    .pec-header2::before{
      content:"";
      position:absolute; inset:0;
      background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.25) 60%, rgba(0,0,0,.35));
      pointer-events:none;
    }
    /* Ensure inner content sits above the overlay */
    .pec-header2 > .row{ position: relative; z-index: 1; }
  

.pec-header3 {
    background: linear-gradient(rgba(18, 15, 45, .5), rgba(18, 15, 45, .5)), url(../img/Engineering-1.jpg) top right no-repeat;
    background-size: cover;
}
.pec-header4 {
    background: linear-gradient(rgba(18, 15, 45, .5), rgba(18, 15, 45, .5)), url(../img/carousel-3.jpg) top right no-repeat;
    background-size: cover;
}
.pec-header5 {
    background: linear-gradient(rgba(18, 15, 45, .5), rgba(18, 15, 45, .5)), url(../img/carousel-11.jpg) top right no-repeat;
    background-size: cover;
}

.service-item div {
    z-index: 1;
}

.service-item div::after {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 2px 2px 0 0;
    transition: .5s;
    z-index: -1;
}

.service-item div:hover::after {
    width: 100%;
    background: var(--primary);
}

.service-item * {
    transition: .5s;
}

.service-item:hover * {
    color: var(--light) !important;
}

.bg-services {
    background: linear-gradient(rgba(18, 15, 45, .5), rgba(18, 15, 45, .5)), url(../img/carousel-1.jpg) top right no-repeat;
    background-size: cover;
}
.bg-services-1 {
    background: linear-gradient(rgba(18, 15, 45, .5), rgba(18, 15, 45, .5)), url(../img/carousel-2.jpg) top right no-repeat;
    background-size: cover;
}
.bg-services-2 {
    background: linear-gradient(rgba(18, 15, 45, .5), rgba(18, 15, 45, .5)), url(../img/carousel-3.jpg) top right no-repeat;
    background-size: cover;
}
.bg-services-3 {
    background: linear-gradient(rgba(18, 15, 45, .5), rgba(18, 15, 45, .5)), url(../img/carousel-4.jpg) top right no-repeat;
    background-size: cover;
}
.bg-services-4 {
    background: linear-gradient(rgba(18, 15, 45, .5), rgba(18, 15, 45, .5)), url(../img/carousel-5.jpg) top right no-repeat;
    background-size: cover;
}
.bg-services-5 {
    background: linear-gradient(rgba(18, 15, 45, .5), rgba(18, 15, 45, .5)), url(../img/carousel-6.jpg) top right no-repeat;
    background-size: cover;
}
.bg-services-5 {
    background: linear-gradient(rgba(18, 15, 45, .5), rgba(18, 15, 45, .5)), url(../img/carousel-7.jpg) top right no-repeat;
    background-size: cover;
}
.bg-services-5 {
    background: linear-gradient(rgba(18, 15, 45, .5), rgba(18, 15, 45, .5)), url(../img/carousel-8.jpg) top right no-repeat;
    background-size: cover;
}
.bg-services-5 {
    background: linear-gradient(rgba(18, 15, 45, .5), rgba(18, 15, 45, .5)), url(../img/carousel-9.jpg) top right no-repeat;
    background-size: cover;
}
.bg-services-5 {
    background: linear-gradient(rgba(18, 15, 45, .5), rgba(18, 15, 45, .5)), url(../img/carousel-10.jpg) top right no-repeat;
    background-size: cover;
}
.bg-services-5 {
    background: linear-gradient(rgba(18, 15, 45, .5), rgba(18, 15, 45, .5)), url(../img/carousel-11.jpg) top right no-repeat;
    background-size: cover;
}
.bg-services-5 {
    background: linear-gradient(rgba(18, 15, 45, .5), rgba(18, 15, 45, .5)), url(../img/carousel-12.jpg) top right no-repeat;
    background-size: cover;
}

.testimonial-carousel .owl-dots {
    height: 45px;
    margin-top: 5px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.testimonial-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 5px;
    height: 25px;
    background: #DDDDDD;
    transition: .1s;
}

.testimonial-carousel .owl-dot.active {
    height: 45px;
    background: var(--primary);
}

.testimonial-carousel .owl-item .testimonial-text,
.testimonial-carousel .owl-item .testimonial-text * {
    transition: .1s;
}

.testimonial-carousel .owl-item.center .testimonial-text {
    background: var(--primary) !important;
}

.testimonial-carousel .owl-item.center .testimonial-text * {
    color: #FFFFFF !important;
}

.blog-date {
    position: absolute;
    width: 90px;
    height: 65px;
    top: 75px;
    left: -25px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: var(--secondary);
}

.blog-date::after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    top: -25px;
    left: 0;
    border: 13px solid;
    border-color: transparent #D34351 #D34351 transparent;
    z-index: -1;
}

  .section-services { overflow: hidden; }
  .services-bg{
    position:absolute; inset:0; pointer-events:none;
    background:
      radial-gradient(1200px 600px at 10% -10%, rgba(13,110,253,.07), transparent 60%),
      radial-gradient(1000px 500px at 110% 10%, rgba(111,66,193,.07), transparent 60%);
  }

  .svc-card{
    position: relative;
    border-radius: 1.25rem;
    background: rgba(255,255,255,.78);
    box-shadow: 0 10px 30px rgba(16,24,40,.08);
    backdrop-filter: blur(6px);
    transition: transform .35s ease, box-shadow .35s ease;
  }
  .svc-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(16,24,40,.14);
  }
  .svc-card__border{
    position:absolute; inset:-1px; border-radius: inherit;
    background:rgba(33,37,41,.12)!important;
/* Gradient border mask — WebKit + standard syntax */
.client-card::before{
  content:"";
  position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:rgba(33,37,41,.12)!important;

  /* Standard */
  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-origin: content-box, border-box;
  mask-clip: content-box, border-box;
  mask-composite: exclude; /* = XOR */

  /* WebKit */
  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-origin: content-box, border-box;
  -webkit-mask-clip: content-box, border-box;
  -webkit-mask-composite: xor; /* = exclude */
  pointer-events:none;
}
    -webkit-mask-composite: xor; mask-composite: exclude;
    padding:1px; pointer-events:none;
  }
  .svc-card__body{ position: relative; z-index: 1; padding: 1.75rem; }

  .svc-card__icon{
    width:64px; height:64px; border-radius:14px; display:grid; place-items:center;
    background: linear-gradient(145deg, #eff4ff, #ffffff);
    color:#0d6efd; font-size:28px; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 6px 16px rgba(13,110,253,.15);
    margin-bottom: .75rem;
  }

  .svc-list{ list-style:none; padding:0; margin:0 0 .25rem; }
  .svc-list li{ display:flex; align-items:flex-start; gap:.5rem; margin:.35rem 0; }
  .svc-list i{ color:#198754; font-size:1.05rem; margin-top:.2rem; }

  .svc-meta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.25rem; }
  .bg-primary-subtle{ background:rgba(13,110,253,.12)!important; }
  .bg-secondary-subtle{ background:rgba(108,117,125,.14)!important; }
  .bg-dark-subtle{ background:rgba(33,37,41,.12)!important; }

  /* KPIs */
  .kpi{ display:inline-flex; flex-direction:column; align-items:center; gap:.2rem; }
  .kpi__num{ font-weight:700; font-size:clamp(1.5rem, 3.2vw, 2.2rem); line-height:1; }
  .kpi__lbl{ color:#6c757d; font-size:.9rem; text-transform:uppercase; letter-spacing:.06em; }

  /* Hero */
    .pec-header2 { background: linear-gradient(120deg,#0d6efd 0%,#6f42c1 60%); }
    /* About image */
    .about-img { object-fit: cover; border-radius: .75rem; }
    /* Clients section — premium grid */
    .clients {
      position: relative; overflow: hidden; background:
        radial-gradient(1200px 600px at 10% -10%, rgba(13,110,253,.06), transparent 60%),
        radial-gradient(1000px 500px at 110% 10%, rgba(111,66,193,.06), transparent 60%);
    }
    .clients .section-intro { max-width: 900px; }
    .client-grid {
      display: grid; gap: 1rem;
      grid-template-columns: repeat(2,1fr);
    }
    @media (min-width:768px){ .client-grid{ grid-template-columns: repeat(4,1fr);} }
    @media (min-width:1200px){ .client-grid{ grid-template-columns: repeat(6,1fr);} }
    .client-card {
      position: relative; border-radius: 14px; background: #fff;
      box-shadow: 0 8px 26px rgba(16,24,40,.08);
      display:flex; align-items:center; justify-content:center;
      aspect-ratio: 3 / 2; padding: .75rem; transition: transform .3s ease, box-shadow .3s ease;
      isolation:isolate;
    }
    .client-card::before{
      content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
      background: linear-gradient(135deg, rgba(13,110,253,.45), rgba(111,66,193,.45), rgba(13,202,240,.45));
     /* Fixed */
-webkit-mask: linear-gradient(#000, #000) content-box,
               linear-gradient(#000, #000);

/* (Optional) include compositing for the common “inner border” trick */
-webkit-mask-composite: xor;
mask: linear-gradient(#000, #000) content-box,
      linear-gradient(#000, #000);
mask-composite: exclude;

      -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none;
    }
    .client-card:hover{ transform: translateY(-4px); box-shadow: 0 14px 36px rgba(16,24,40,.14); }
    .client-logo{
      max-width: 100%; max-height: 60px; object-fit: contain;
      filter: grayscale(100%) contrast(1.1) brightness(.95); opacity:.85;
      transition: filter .25s ease, opacity .25s ease, transform .25s ease;
    }
    .client-card:hover .client-logo{ filter:none; opacity:1; transform: scale(1.02); }
    .client-name{
      position:absolute; left:.75rem; bottom:.6rem; font-size:.78rem; font-weight:600;
      color:#6c757d; background: rgba(248,249,250,.85); padding:.2rem .5rem; border-radius:.5rem;
      backdrop-filter: blur(4px);
    }
    /* Clients strip (auto-scroll, optional) */
    .clients-strip{
      --speed: 24s; overflow:hidden; mask-image: linear-gradient(90deg,transparent, #000 8%, #000 92%, transparent);
    }
    .clients-strip__track{ display:flex; gap:2.5rem; align-items:center; animation: marquee var(--speed) linear infinite; }
    .clients-strip img{ height: 42px; filter: grayscale(100%); opacity:.8; transition: filter .2s ease, opacity .2s ease; }
    .clients-strip img:hover{ filter:none; opacity:1; }
    @keyframes marquee { from { transform: translateX(0);} to { transform: translateX(-50%);} }

     /* Section ambiance */
  .client-carousel { padding: .25rem 0; }
  .client-card{
    position: relative;
    border-radius: 16px;
    padding: 2px; /* for the glow border */
    background:
      radial-gradient(1200px 600px at -10% -20%, rgba(13,110,253,.18), transparent 55%),
      radial-gradient(1000px 400px at 110% 0%, rgba(111,66,193,.18), transparent 55%),
      transparent;
    transition: transform .3s ease, box-shadow .3s ease;
  }
  .client-card:hover{ transform: translateY(-4px); }
  .client-card__inner{
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,249,250,.95));
    box-shadow: 0 8px 26px rgba(16,24,40,.08);
    padding: 2.25rem 1.25rem;
    min-height: 120px;
    display: grid; place-items: center;
    position: relative; isolation:isolate;
  }

  /* Gradient ring border (mask-safe) */
  .client-card::before{
    content:"";
    position:absolute; inset:0; border-radius:16px; padding:1px;
    background: linear-gradient(135deg, rgba(13,110,253,.75), rgba(111,66,193,.75), rgba(13,202,240,.75));
    /* Standard mask */
    mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
    mask-origin: content-box, border-box;
    mask-clip: content-box, border-box;
    mask-composite: exclude;
    /* WebKit fallback */
    -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
    -webkit-mask-origin: content-box, border-box;
    -webkit-mask-clip: content-box, border-box;
    -webkit-mask-composite: xor;
    pointer-events:none;
  }
  .client-card:hover .client-card__inner{
    box-shadow: 0 14px 36px rgba(16,24,40,.14);
  }

  .client-card__title{
    font-weight: 700;
    font-size: 1.125rem;
    color: #0f172a; /* slate-900 */
    text-align: center;
    padding: 0 .25rem;
  }

  /* Owl spacing & dots */
  .client-carousel .owl-stage-outer{ padding: .25rem 0 .5rem; }
  .client-carousel .owl-item{ padding: .35rem; }
  .client-carousel .owl-dots .owl-dot span{
    width: 8px; height: 8px; margin: 4px 6px;
    background: rgba(13,110,253,.35);
    transition: transform .2s ease, background .2s ease;
  }
  .client-carousel .owl-dots .owl-dot.active span{
    transform: scale(1.4);
    background: #0d6efd;
  }

  /* KPI (unchanged text, improved look) */
  .kpi{
    display: inline-flex; align-items: baseline; gap: .4rem;
    background: linear-gradient(180deg, #fff, #f8f9fa);
    border: 1px solid rgba(13,110,253,.15);
    border-radius: 12px;
    padding: .75rem 1rem;
    box-shadow: 0 8px 24px rgba(16,24,40,.06);
  }
  .kpi__num{ font-weight: 800; font-size: 1.5rem; line-height: 1; color:#0d6efd; }
  .kpi__lbl{ font-weight: 600; font-size: .95rem; color:#475569; }
  @media (min-width: 768px){
    .kpi__num{ font-size: 1.75rem; }
    .kpi__lbl{ font-size: 1rem; }
  }
  
  .client-ribbons { display: grid; gap: .75rem; margin-bottom: .5rem; }
  .ribbon {
    --h: 44px;
    height: var(--h);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
    background:
      linear-gradient(180deg, rgba(13,110,253,.12), rgba(111,66,193,.12));
    border: 1px solid rgba(13,110,253,.18);
  }
  .ribbon--alt{
    background:
      linear-gradient(180deg, rgba(13,202,240,.10), rgba(13,110,253,.10));
    border-color: rgba(13,202,240,.22);
  }
  .ribbon__track{
    display: flex;
    gap: 2rem;
    align-items: center;
    height: 100%;
    padding: 0 1.25rem;
    list-style: none;
    margin: 0;
    animation: slideLeft 22s linear infinite;
    will-change: transform;
  }
  .ribbon--alt .ribbon__track{ animation-duration: 26s; animation-name: slideRight; }
  .ribbon__track li{
    white-space: nowrap;
    font-weight: 700;
    letter-spacing: .2px;
    color: #0f172a;
    opacity: .9;
  }
  @keyframes slideLeft{ to{ transform: translateX(-50%); } }
  @keyframes slideRight{ to{ transform: translateX(50%); } }
  @media (prefers-reduced-motion: reduce){
    .ribbon__track{ animation: none; }
  }

  /* ==== Grid Cards ==== */
  .client-grid{
    --gap: 16px;
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  @media (min-width: 576px){ .client-grid{ grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 992px){ .client-grid{ grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 1400px){ .client-grid{ grid-template-columns: repeat(3, 1fr); } }

  .client-card{
    position: relative;
    border-radius: 16px;
    padding: 1.25rem 1rem;
    background: linear-gradient(180deg, #fff, #f8f9fa);
    border: 1px solid rgba(13,110,253,.15);
    box-shadow: 0 10px 30px rgba(2,6,23,.06);
    isolation: isolate;
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  }
  .client-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 18px 44px rgba(2,6,23,.12);
    border-color: rgba(13,110,253,.28);
  }
  /* Animated sheen */
  .client-card__shine{
    position: absolute; inset: -40% -80% auto -80%;
    height: 160%;
    transform: rotate(12deg);
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(13,110,253,.07) 35%,
      rgba(111,66,193,.10) 50%,
      rgba(13,202,240,.07) 65%,
      transparent 100%);
    animation: sheen 5.5s ease-in-out infinite;
    pointer-events: none; z-index: 0;
  }
  .client-card:hover .client-card__shine{ animation-duration: 3.5s; }
  @keyframes sheen { 0% { transform: translateX(-10%) rotate(12deg); } 100% { transform: translateX(55%) rotate(12deg); } }
  @media (prefers-reduced-motion: reduce){
    .client-card__shine{ animation: none; }
  }
  .client-card__title{
    position: relative; z-index: 1;
    margin: 0;
    text-align: center;
    font-weight: 700;
    font-size: 1.08rem;
    letter-spacing: .2px;
    color: #0f172a; /* slate-900 */
  }

  /* ==== KPI ==== */
  .kpi{
    display: inline-flex; align-items: baseline; gap: .45rem;
    background: linear-gradient(180deg, #ffffff, #f8f9fa);
    border: 1px solid rgba(13,110,253,.18);
    border-radius: 12px;
    padding: .8rem 1.05rem;
    box-shadow: 0 10px 28px rgba(2,6,23,.06);
  }
  .kpi__num{ font-weight: 800; font-size: 1.55rem; line-height: 1; color:#0d6efd; }
  .kpi__lbl{ font-weight: 600; font-size: .98rem; color:#475569; }
  @media (min-width:768px){ .kpi__num{ font-size:1.75rem } .kpi__lbl{ font-size:1.05rem } }

  /* Make sure animations resume on visibility changes */
.ribbon__track,
.client-card__shine {
  animation-play-state: running;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .ribbon__track, .client-card__shine { animation: none !important; }
}
/* --- Force site to stay light on mobile / OS dark mode --- */

/* Tell browsers & iOS Safari to NOT auto-darken form controls, scrollbars, etc. */
:root {
  color-scheme: light;
}

/* Bootstrap variable safety: if any dark-mode rules slip in, pin common vars to light */
html[data-bs-theme="light"], 
:root {
  --bs-body-bg: #ffffff;
  --bs-body-color: #212529;
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;
  background-color: #ffffff;
  color: #212529;
}
:root {
  color-scheme: only light;
}

html,
body {
  background-color: #ffffff !important;
  color: #212529;
}

@media (prefers-color-scheme: dark) {
  html,
  body {
    background-color: #ffffff !important;
    color: #212529 !important;
  }

  body,
  .bg-body,
  .bg-dark {
    background-color: #ffffff !important;
  }
}

/* If any theme or custom CSS uses prefers-color-scheme to flip to dark, null it out */
@media (prefers-color-scheme: dark) {
  html, body {
    background-color: #ffffff !important;
    color: #212529 !important;
  }
  /* Optional: keep nav/footers light if something was styling them dark */
  .navbar, .bg-dark, .footer, footer {
    filter: none !important;
  }
}

/* Prevent WebKit auto-inversion on images/media */
img, video, canvas, iframe {
  filter: none !important;
}