/* Hero Big Text and image background   */

/* hidden unless slide is active */
.hero-shadow-text {
  position: absolute;
  top: 30%;
  left: 0;
  width: 200%;              /* enough to scroll through */
  transform: translateY(-50%) translateX(100%);
  font-size: 10vw;          /* adjust scale */
  font-weight: 900;
  color: rgba(0,0,0,0.1);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  animation: slideShadow 20s linear infinite;
  z-index: 0;
}

/* only active slide’s shadow is visible */
.swiper-slide-active .hero-shadow-text {
  opacity: 1;
}

/* shadow scroll animation */
@keyframes slideShadow {
  from { transform: translateY(-50%) translateX(100%); }
  to   { transform: translateY(-50%) translateX(-100%); }
}

/* make sure your hero text sits above */
.mil-hero-text, .mil-hero-text * {
  position: relative;
  z-index: 1;
}

/* HERO background + light overlay */
#top.mil-hero-4 {
  position: relative;
  overflow: hidden;
  min-height: 80vh;
  background:
    /* 1) dark‑to‑light wash */
    linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.9)),
    /* 2) hero image */
    url('../img/deb389ad-612d-4b4b-a65c-de05a0257b11.png')
      center/cover no-repeat;
}

/* ── LIGHT MODE VARIABLES ───────────────────────────────────────────────── */
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --text-primary: #111111;
  --text-secondary: #333333;
  --accent: #f37021;
  --overlay-light: rgba(255, 255, 255, 0.9);
  --overlay-dark: rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) { 
  .mil-top-panel-2 {
    height: 100px;
    /*background-color: rgba(24, 24, 23, 0.9);*/
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    /* border-bottom: solid 1px rgba(210, 210, 208, 0.1); */
    -webkit-filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.9));
    filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.9));
  }

  /* make all FA icons inside .mil-top-panel-2 white on mobile */
  .mil-top-panel-2 .social-icons i {
    color: #fff !important;
  }
}

@media (max-width: 768px) {
    .mil-top-panel-2 {
        height: 100px;
        /*background-color: rgb(255 255 255 / 70%);*/
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        /* border-bottom: solid 1px rgba(210, 210, 208, 0.1); */
        -webkit-filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.1));
        filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.1));
    }
}

h1,
h2,
h4,
.mil-h1,
.mil-h2,
.mil-h4 {
  font-family: 'Muli', sans-serif;
  color: #333;
  /*font-weight: 600;*/
  line-height: normal;
  text-transform: uppercase;
  color: #333;
  letter-spacing: -2%;
}

/* mobile overrides */
@media (max-width: 767.98px) {
  h1,
  .mil-h1 {
    font-size: 2.00rem;  /* was 3rem, now 75% */
  }

  h2,
  .mil-h2 {
    font-size: 1.5rem; /* was 2.5rem, now 75% */
  }

  h4,
  .mil-h4 {
    font-size: 1.0rem; /* was 1.75rem, now 75% */
  }
}

h3,
h5,
h6,
.mil-h3,
.mil-h5,
.mil-h6 {
  font-family: 'Muli', sans-serif;
  color: #000;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
  color: #000;
  letter-spacing: -2%;
}

*

.mil-iconbox i {
    font-size: 100px;
    color: transparent;
    -webkit-text-stroke: 1.5px rgb(0 0 0 / 60%);
}

.mil-breadcrumbs li a {
    width: 100%;
    text-transform: uppercase;
    line-height: 100%;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #000 !important;
}

.mil-top-panel-2.mil-scroll {
    background-color: rgb(255 255 255 / 70%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: solid 1px rgba(210, 210, 208, 0.1);
    height: 120px;
    -webkit-filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.1));
    filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.1));
}

.mil-head1 {
   
    text-align: center;
    color: #000;
}

/* ── RESET & BASE ─────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: Poppins, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
}

.mil-hero-1.mil-sm-hero.mil-stl .mil-hero-text .mil-text-pad {
    background-color: #ffffff !important;
}





/* Hero Big Text and image background   */

/* hidden unless slide is active */
.hero-shadow-text {
  position: absolute;
  top: 30%;
  left: 0;
  width: 200%;              /* enough to scroll through */
  transform: translateY(-50%) translateX(100%);
  font-size: 6vw;          /* adjust scale */
  font-weight: 900;
  color: rgba(0,0,0,0.1);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  animation: slideShadow 20s linear infinite;
  z-index: 0;
}

/* only active slide’s shadow is visible */
.swiper-slide-active .hero-shadow-text {
  opacity: 1;
}

/* shadow scroll animation */
@keyframes slideShadow {
  from { transform: translateY(-50%) translateX(100%); }
  to   { transform: translateY(-50%) translateX(-100%); }
}



/* ── LEFT SIDE MENU───────────────────────────────────────────────────── */
.mil-menu-frame-2 .mil-menu-window .mil-left-side .mil-menu-part .mil-main-menu {
    width: 100%;
    padding-bottom: 30px;
    background-color: #fff;
}

.mil-menu-frame-2 .mil-menu-window {
    background-color: #ffffff;
    width: 100%;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 0;
    padding-top: 160px;
}

.mil-menu-frame-2 .mil-menu-window .mil-left-side .mil-menu-part {
    padding-right: 160px;
    height: calc(100vh - 280px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
;
    -webkit-box-align: center;
    -ms-flex-align: center;
    background-color: #fff;
    align-items: center;
}

.mil-menu-frame-2 .mil-menu-window .mil-left-side .mil-bottom-part {
    position: relative;
    height: 120px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
;
    -webkit-box-align: center;
    background-color: #fff;
    -ms-flex-align: center;
    align-items: center;
}

.mil-main-menu li a {
    text-transform: uppercase;
    font-family: "Anton", sans-serif;
    font-size: 22px;
    color: #000;
    -webkit-transition: 0.2s cubic-bezier(0, 0, 0.3642, 1);
    transition: 0.2s cubic-bezier(0, 0, 0.3642, 1);
}

.mil-menu-frame-2 .mil-menu-window .mil-right-side .mil-links-part .mil-links li a {
    font-family: "Outfit", sans-serif;
    color: rgb(0 0 0 / 60%);
    text-transform: uppercase;
    line-height: 100%;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    -webkit-transition: 0.2s cubic-bezier(0, 0, 0.3642, 1);
    transition: 0.2s cubic-bezier(0, 0, 0.3642, 1);
}

/* ── LOGO ────────────────────────────────────────────────────────────── */
.mil-logo-img {
  height: 80px;
  width: auto;
  display: block;
  transition: opacity .3s;
}
body.scrolled .mil-logo-img {
  opacity: .75;
}

/* ── PRELOADER VIDEO ─────────────────────────────────────────────────── */
.mil-logo-video {
  height: 30%;
  width: 30%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
@media (max-width: 768px) {
  .mil-logo-video {
    width: 60vw;
    height: auto;
    max-width: 300px;
    max-height: 260px;
    object-fit: contain;
  }
}
.mil-preloader.mil-hide {
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease .2s;
}

/* ── HERO TEXT ON DESKTOP ───────────────────────────────────────────── */
/* ── HERO 4: strip out dark gradient & blur shape for light theme ── */
.mil-hero-4 .mil-overlay {
  background: none !important;
}

.mil-hero-4 .mil-hero-scene .mil-pad-frame .mil-shape-pad {
  background: transparent !important;
  filter: none !important;
}

.mil-hero-4 .mil-hero-text {
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
  max-width: 45%;
  z-index: 2;
  padding: 1rem;
}
.hero-title {
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  color: var(--text-primary);
}
.hero-desc {
  font-size: 1rem;
  color: var(--text-secondary);
}

/* ── HERO TEXT ON TABLET & MOBILE ─────────────────────────────────── */
@media (max-width: 992px) {
  .mil-hero-4 .mil-hero-text {
    position: relative;
    top: 140px;
    max-width: 90%;
    padding: 0 1rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    margin-bottom: 1.5rem;
  }
  .hero-title,
  .hero-desc {
    text-align: center !important;
  }
  .hero-title { font-size: 1.75rem; }
  .hero-desc  { font-size: 0.9rem;  }
}

/* ── DESKTOP HERO LAYOUT ────────────────────────────────────────────── */
@media (min-width: 992px) {
  :root { --header-h: 150px; }
  .mil-hero-4 .swiper-slide,
  .mil-hero-4 .mil-hero-main {
    height: calc(140vh - var(--header-h));
  }
  .mil-hero-4 .mil-hero-main {
    display: flex;
    align-items: center;
  }
  .mil-hero-4 .mil-hero-text {
    position: static;
    transform: none;
    max-width: 500px;
    margin-right: auto;
    text-align: left;
  }
  .hero-title { font-size: 3.25rem; }
  .hero-desc  { font-size: 1.05rem; }
}

.hero-cta {
    padding: .35rem .9rem;
    font-size: .75rem;
    line-height: 1.15;
    -webkit-transition: transform .25s ease;
    transition: transform .25s ease;
}
.hero-cta:hover {
  transform: scale(1.05);
}
@media (min-width:576px) { .hero-cta { padding:.5rem 1.15rem; font-size:.8rem; } }
@media (min-width:768px) { .hero-cta { padding:.6rem 1.4rem;  font-size:.9rem; } }
@media (min-width:992px) { .hero-cta { padding:.7rem 1.75rem; font-size:1rem; } }
@media (min-width:1200px){ .hero-cta { padding:.9rem 2.25rem; font-size:1.1rem; } }

.mil-btn.mil-m1.mil-btn-border {
    background-color: transparent;
    -webkit-box-shadow: 0 0 0 2px #f37021;
    box-shadow: 0 0 0 2px #000000;
    color: #000000;
}

/* ── HERO ANIMATION POSITION ───────────────────────────────────────── */
@media (min-width: 992px) {
  .mil-hero-4 .mil-hero-scene .mil-anim-frame .mil-hero-animation {
    top: -60px;
    right: 100px;
    left: auto;
    transform: none;
    width: 60%;
  }
}
@media (min-width: 1400px) {
  .mil-hero-4 .mil-hero-scene .mil-anim-frame .mil-hero-animation {
    width: 80%;
  }
}
@media (max-width:991.98px) {
  .mil-hero-4 .mil-hero-scene .mil-anim-frame .mil-hero-animation {
    top: 200px;
    right: 10%;
    transform: translateX(-50%);
    width: 200%;
    animation: hero-anim-sm 12s ease-in-out infinite;
  }
}
@media (max-width:575.98px) {
  .mil-hero-4 .mil-hero-scene .mil-anim-frame .mil-hero-animation {
    top: 220px;
    left: 20%;
    transform: translateX(-50%);
    width: 140%;
    animation: hero-anim-sm 12s ease-in-out infinite;
  }
}

/* ── NAV CLUSTER ────────────────────────────────────────────────────── */
.mil-onepage-nav ul li a {
    text-transform: uppercase;
    line-height: 100%;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #000000;
}

.mil-top-panel-2 .mil-buttons-tp-frame .mil-buttons .mil-tp-btn {
    margin-right: 15px;
    height: 50px;
    color: #000000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.mil-top-panel-2 .mil-buttons-tp-frame .mil-buttons .mil-tp-btn .mil-menu-btn span, .mil-top-panel-2 .mil-buttons-tp-frame .mil-buttons .mil-tp-btn .mil-menu-btn span:after, .mil-top-panel-2 .mil-buttons-tp-frame .mil-buttons .mil-tp-btn .mil-menu-btn span:before {
    background-color: #000000;
}

/* ── NAV CLUSTER ────────────────────────────────────────────────────── */
  .hero-nav {
    position: absolute;
    right: 25px;
    top: 60%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    z-index: 200;
    overflow: visible;
  }
  .hero-nav .hero-pagination {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .hero-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #000;
    opacity: .35;
    position: relative;
    -webkit-transition: height .25s, opacity .25s;
            transition: height .25s, opacity .25s;
  }
  .hero-pagination .swiper-pagination-bullet-active {
    height: 32px;
    border-radius: 4px;
    opacity: 1;
    background-color: #f37021 !important;
  }
  .hero-pagination .swiper-pagination-bullet::after {
    content: attr(data-service);
    position: absolute;
    right: calc(100% + 12px);
    top: 60%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    background: #fff;
    color: #000;
    font-size: 12px;
    line-height: 1.2;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,.08);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity .15s;
            transition: opacity .15s;
  }
  .hero-pagination .swiper-pagination-bullet::before {
    content: '';
    position: absolute;
    right: calc(100% + 4px);
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: #fff;
    box-shadow: 0 0 1px rgba(0,0,0,.05);
    opacity: 0;
    -webkit-transition: opacity .15s;
            transition: opacity .15s;
  }
  .hero-pagination .swiper-pagination-bullet:hover::after,
  .hero-pagination .swiper-pagination-bullet:hover::before {
    opacity: 1;
  }

/* ── CIRCULAR ARROW ────────────────────────────────────────────────── */
.hero-arrow {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .25s;
}
.hero-arrow:hover { background: darken(var(--accent),10%); }
.hero-arrow::before {
  content: "\f061";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 36px;
  color: var(--bg-primary);
}
@media (max-width:575.98px) {
  .hero-arrow { width: 60px; height: 60px; }
  .hero-arrow::before { font-size: 28px; }
  .hero-pagination .swiper-pagination-bullet { width: 8px; height: 8px; }
  .hero-pagination .swiper-pagination-bullet-active { height: 24px; }
}

/* ── SHOW/HIDE CIRCLE & BUTTON ─────────────────────────────────────── */
.circle-desktop,
.btn-mobile {
  display: none !important;
}
@media (max-width: 991.98px) {
  .btn-mobile { display: inline-block !important; }
}
@media (min-width: 992px) {
  .circle-desktop {
    display: block !important;
    margin-top: 1rem !important;
  }
}

/* ── FLOAT KEYFRAMES ───────────────────────────────────────────────── */
@keyframes floatY {
  0%,100% { transform: translateY(-50%) translateX(0); }
  50%     { transform: translateY(-60%) translateX(0); }
}
.jump { animation: floatY 4s ease-in-out infinite; }
.jump-reverse { animation: floatY 4s ease-in-out infinite reverse; }

/* ── SPIN TEXT KEYFRAMES ───────────────────────────────────────────── */
@keyframes spin-text {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.mil-rotate {
    -webkit-transform-box: fill-box;
    transform-box: fill-box;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation: spin-text 12s linear infinite;
    animation: spin-text 12s linear infinite;
}

/* ── DESKTOP ONLY: fixed bottom positions ─────────────────────────── */
@media (min-width: 992px) {
  /* down-arrow in center bottom */
  .mil-scroll-down {
    position: fixed !important;
    left: 50% !important;
    bottom: 40px !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    width: 56px;
    height: 56px;
    border: 2px solid var(--text-primary);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: opacity .3s, transform .3s;
  }
  .mil-scroll-down i {
    font-size: 24px;
    color: var(--text-primary);
    animation: arrowBounce 1.6s ease-in-out infinite;
  }

  /* up-next in bottom-right */
  .hero-up-next {
    position: fixed !important;
    right: 25px !important;
    bottom: 40px !important;
    left: auto !important;
    transform: none !important;
    display: block !important;
    color: var(--text-primary);
    line-height: 1.4;
    cursor: pointer;
    z-index: 10000;
  }
  .hero-up-next .label {
    font-size: .75rem;
    opacity: .7;
  }
  .hero-up-next .name {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
  }
}

/* ── TABLET & MOBILE: hide arrow, center up-next under hero ───────── */
@media (max-width: 991.98px) {
  .mil-scroll-down {
    display: none !important;
  }
  .hero-up-next {
    position: fixed !important;
    left: 50% !important;
    bottom: 120px !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    text-align: center;
  }
}

/* ── bounce keyframes ─────────────────────────────────────────────── */
@keyframes arrowBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}


.hero-shape2-1 {
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 1;
}

/* ── ENSURE CLICK-THROUGH Hero Layers ───────────────────────────────── */
.mil-hero-text,
.circle-desktop,
.btn-mobile,
.hero-up-next,
.mil-scroll-down {
  position: relative;
  z-index: 300;
}
.mil-hero-animation,
.mil-anim-frame,
.mil-pad-frame {
  pointer-events: none !important;
}

/* ── CONTACTS FORM CARD ────────────────────────────────────────────── */
.contact-form-card {
  background: var(--bg-secondary);
  border-radius: 1rem;
  padding: 2rem;
  max-width: 400px;
  margin: 2rem auto;
  color: var(--text-primary);
  box-shadow: 0 4px 12px var(--overlay-dark);
}
.contact-form-card h4 {
  margin-bottom: 1.5rem;
}
.contact-form-card .form-control {
  width: 100%;
  background: var(--bg-primary);
  border: 1px solid var(--overlay-dark);
  padding: .75rem 1rem;
  border-radius: .5rem;
  margin-bottom: 1rem;
  color: var(--text-primary);
}
.contact-form-card .form-control::placeholder {
  color: var(--text-secondary);
}
.contact-form-card button {
  width: 100%;
  background: var(--accent);
  color: var(--bg-primary);
  border: none;
  padding: .75rem;
  border-radius: .5rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .3s;
}
.contact-form-card button:hover {
  background: darken(var(--accent),10%);
}

/* ─── Call-to-Action Section ─── */
    .mil-call-action1 {
      position: relative;
      background: url('/path/to/your/bg.jpg') center/cover no-repeat;
      color: #fff;
      padding: 0px 0;
      overflow: hidden;
    }
    
    .mil-call-action .mil-call-overlay {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background-color: rgba(0, 0, 0, 0.6);
      pointer-events: none;  /* so overlay never blocks clicks */
      z-index: 1;
    }
    
    .mil-call-action .mil-relative {
      position: relative;
      z-index: 2;            /* bring content above overlay */
    }

    .mil-head1.mil-mb90.mil-up {
      text-align: center;
    }

    /* Decorative objects (optional styling if you need) */
    .mil-objects .mil-obj-1 {
    width: 170px;
    height: 170px;
    border: solid 30px #cecece;
    position: absolute;
    left: 30%;
    top: 8%;
    -webkit-animation: rotate 6s linear infinite;
    animation: rotate 6s linear infinite;
}
    .mil-objects .mil-obj-2 {
    width: 300px;
    height: 30px;
    background-color: #cecece;
    position: absolute;
    right: 30%;
    top: 30%;
    -webkit-animation: rotate2 6s ease-in-out infinite;
    animation: rotate2 6s ease-in-out infinite;
}

    /* Headline & subtext keep your mil- classes */

    /* Portfolio button – your existing styling */
    .mil-btn-border { /* ... */ }
    .mil-m1 { /* ... */ }
    .mil-c-gone { /* ... */ }

    /* Get in Touch button */
    .mil-cta-btn {
      display: inline-block;
      background-color: #f37021;
      color: #000;
      text-transform: uppercase;
      font-weight: 600;
      padding: 0.75rem 2.5rem;
      border-radius: 4px;
      transition: background 0.2s;
      text-decoration: none;
      position: relative;
      z-index: 2;            /* above overlay */
    }
    .mil-cta-btn:hover {
      background-color: #f37021;
    }

    /* Social columns */
    .social-col {
      text-align: center;
    }
    .social-col a {
      display: block;        /* full-block link */
      width: 100%;
      height: 100%;
      padding: 0.75rem 0;    /* breathing room */
      position: relative;
      z-index: 2;            /* above overlay */
      text-decoration: none;
      color: inherit;
      transition: color 0.2s;
    }
    .social-col .icon i {
      font-size: 2.5rem;
      color: #f37021;
      margin-bottom: 0.5rem;
    }
    .social-col h5 {
      margin: 0.25rem 0;
      font-weight: 500;
      font-size: 1.1rem;
      color: #000;
    }
    .social-col p {
      margin: 0;
      font-size: 0.9rem;
      color: #000;
    }
    .social-col:hover h5,
    .social-col:hover p {
      color: #f37021;
    }

/* ── SERVICES HIGHLIGHT CARDS ──────────────────────────────────────── */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}
.cards-grid .card {
  background: #cecece;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 4px 12px var(--overlay-dark);
  transition: transform .3s, box-shadow .3s;
}
.cards-grid .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,.1);
}
.cards-grid .card-subtitle {
  font-size: .85rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: .5rem;
}
.cards-grid .card-title {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  color: var(--text-primary);
}
.cards-grid .card-text {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: var(--text-secondary);
}
.cards-grid .card-btn {
  background: var(--accent);
  color: #000000;
  padding: .6rem 1.2rem;
  border-radius: .5rem;
  text-decoration: none;
  font-weight: 500;
  transition: background .3s;
}
.cards-grid .card-btn:hover {
  background: darken(var(--accent),10%);
}

/* ── SERVICES ICON CIRCLE ─────────────────────────────────────────── */
.service-icon-circle {
  width: 80px;
  height: 80px;
  background: var(--bg-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .75rem;
  box-shadow: 0 2px 8px var(--overlay-dark);
}
.service-icon-circle img {
  max-width: 100%;
  max-height: 100%;
}

.mil-head3 {
    font-size: 32px;
    line-height: 120%;
    color: #000;
}

.mil-head6 {
    font-size: 16px;
    line-height: 120%;
    color: #000;
}

/* ── SERVICES SWIPER ───────────────────────────────────────────────── */
.services-swiper .swiper-pagination-bullet {
  background: var(--text-secondary) !important;
}
.services-swiper .swiper-pagination-bullet-active {
  background: var(--text-primary) !important;
}

/* ── Desktop circle link (large screens) ────────────────────────── */
  .services-swiper .circle-desktop {
    display: block;
    text-align: center;
    margin: 1rem auto;
  }

  /* ── Mobile circle link hidden by default ───────────────────────── */
  .services-swiper .circle-mobile {
    display: none;
  }

  /* ── MOBILE‐ONLY OVERRIDES (<768px) ─────────────────────────────── */
  @media (max-width: 767.98px) {
    /* 1) Stack & center each slide */
    .services-swiper .mil-service-item {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      text-align: center !important;
      padding: 0 1rem !important;
    }

    /* 2) Center the icon */
    .services-swiper .service-icon-circle {
      margin: 0 auto 1rem !important;
    }

    /* 3) Center the text block */
    .services-swiper .mil-item-text {
      margin: 0 auto 1rem !important;
    }

    /* 4) Hide desktop “Read more” button */
    .services-swiper .mil-stylized-btn,
    .services-swiper .btn-mobile {
      display: none !important;
    }

    /* 5) Hide desktop circle link */
    .services-swiper .circle-desktop {
      display: none !important;
    }

    /* 6) Show & center mobile circle link */
    .services-swiper .circle-mobile {
      display: flex !important;
      justify-content: center;
      align-items: center;
      margin: 1rem auto !important;
      width: 80px !important;
      height: 80px !important;
    }
    .services-swiper .circle-mobile .mil-circle-text {
      display: inline-flex !important;
      justify-content: center;
      align-items: center;
      width: 100% !important;
      height: 100% !important;
      text-align: center !important;
    }
    .services-swiper .circle-mobile .mil-circle-text svg {
      width: 100% !important;
      height: 100% !important;
    }
  }
  
  .mil-circle-text-frame svg text {
  fill: #000 !important;
}

  /* make sure your <section id="services"> is the positioning context */
#services {
  position: relative;
  overflow: hidden; /* so the shape can float slightly outside if needed */
}

/* FAR RIGHT vertical SERVICES label */
#services .vertical-text {
  position: absolute;
  top: 50%;
  left: 30px;                      /* flush to the very edge */
  transform: translateY(-50%);   /* center it vertically */
  writing-mode: vertical-rl;     /* stack letters bottom→top */
  
  font-size: 4vw;
  font-weight: 700;
  letter-spacing: 0.5rem;
  color: #cecece;
  pointer-events: none;
  z-index: 1;
}







/* ── PARALLAX SECTION ──────────────────────────────────────────────── */
.parallax-section {
  position: relative;
  overflow: hidden;
  padding: 0;
}
.parallax-bg {
  background:
    linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.9)),
    url('img/Construction1.jpg') center/cover fixed;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 140%;
  transform: translateY(-25%);
  z-index: 0;
}
.parallax-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 120%;
  background-color: rgba(255,255,255,0.7);
  z-index: 1;
}
.parallax-section .container {
  position: relative;
  z-index: 2;
}

/* Achievements Section */

  /* Counters */
  #achievements .counter-item h4 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: #000000;
  }
  

  /* Cards grid */
  #achievements .cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
  }
  #achievements .card {
    background: rgba(0,0,0,0.1);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 1.5rem;
    color: #fff;
    transition: transform 0.3s, box-shadow 0.3s;
  }
  #achievements .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.15);
  }
  #achievements .card-subtitle {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(0,0,0,0.8);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
  }
  #achievements .card-title {
    font-size: 1.4rem;
    margin-bottom: 1rem;
  }
  #achievements .card-text {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
  }
  #achievements .card-btn {
    font-weight: 500;
    text-decoration: none;
    color: #fff;
    background: #f37021;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    transition: background 0.3s;
  }
  #achievements .card-btn:hover {
    background: #c37119;
  }

  /* Overlay */
  #achievements .overlay {
    pointer-events: none;
  }

  /* Responsive tweaks */
  @media (max-width: 768px) {
    #achievements .counter-item h4 { font-size: 2rem; }
    #achievements .card-title { font-size: 1.2rem; }
    #achievements .card-text { font-size: 0.95rem; }
  }


    /* optional: tighten up the four-across on desktop, two on tablet */
        @media (min-width: 992px) {
          .mil-p-0-160 .row > [class*="col-lg-3"] {
            max-width: 25%;
          }
        }
        @media (max-width: 767px) {
          .mil-p-0-160 .row > [class*="col-md-6"] {
            max-width: 50%;
          }
        }
        
        /* Make the counter number & % smaller */
        .mil-counter-item1 h4 {
          font-size: 2rem;       /* overall size */
        }
        .mil-counter-item1 h4 .counter-number {
          font-size: 2rem;
        }
        .mil-counter-item1 h4 .mil-a2 {
          font-size: 1.2rem;
          vertical-align: super;
          margin-left: 0.2rem;
        }
        
        /* Small tablets (576px–767px), if you want a slightly larger size there: */
        @media (min-width: 206px) and (max-width: 767.98px) {
          .mil-head4 {
            font-size: 16px;
            line-height: 120%;
            text-align: center;
          }
        }
        
        /* small “subtitle” above each card */
.mil-subtitle {
  display: block;
  font-size: .9rem;
  color: rgba(255,255,255,.8);
}

/* thin centered line under the heading */
.mil-underline {
  width: 50px;
  height: 2px;
  background-color: rgba(255,255,255,.6);
  border: none;
  margin: .5rem auto 1.5rem;
}

/* ensure each card stretches to equal height in the row */
.mil-item-text.h-100 {
  height: 100%;
}

.mil-counter-item1 {
    width: 100%;
    
    padding-bottom: 30px;
    position: relative;
    }
/*────────────────────────────────────────────────────────
  Giant vertical “ACHIEVEMENTS” down the left
  (paste this AFTER every other stylesheet rule)
────────────────────────────────────────────────────────*/
#achievements{
  position:relative;
  overflow:hidden;
}

/* big word */
#achievements>.achievements-bg-text{
  position:absolute;
  top:70%;
  left:10px;
  transform:translateY(-50%) rotate(-90deg);
  transform-origin:left center;

  font-size:6vw;                 /* responsive */
  font-weight:800;
  /* ✱ use a LIGHT colour so it’s visible on the dark bg */
  color:#012060;    /* <──── change only this line */

  white-space:nowrap;
  pointer-events:none;
  user-select:none;
  z-index:2;                      /* above bg, below real content */
}

/* hide the big word on mobile (<768px) */
@media (max-width: 767px) {
  #achievements > .achievements-bg-text {
    display: none;
  }
}

/* normal content stays on top */
#achievements>.container{
  position:relative;
  z-index:3;
}

/* smaller on phones */
@media(max-width:768px){
  #achievements>.achievements-bg-text{font-size:15vw;}
}

.mil-display3 {
    font-size: 56px;
    line-height: 100%;
    color: #000;
}
/* ── FAQ SECTION ───────────────────────────────────────────────────── */
:root {
  --faq-bg: var(--bg-secondary);
  --faq-text: var(--text-primary);
  --faq-accent: var(--accent);
  --faq-shadow: rgba(0,0,0,0.05);
}
.mil-accordion-item {
    background: var(--faq-bg);
    border-radius: .75rem;
    box-shadow: 0 4px 12px var(--faq-shadow);
    overflow: hidden;
    transition: transform .3s;
}
.mil-accordion-item:hover {
  transform: translateY(-3px);
}
.mil-accordion-header {
  display: flex;
  align-items: center;
  padding: 1.25rem 1.5rem;
  background: transparent;
  border: none;
  color: var(--faq-text);
  font-size: .8rem;
  cursor: pointer;
  transition: background .3s;
}
.mil-accordion-header:hover {
  background: var(--overlay-dark);
}
.mil-accordion-icon {
  margin-left: auto;
  font-size: 1.5rem;
  color: var(--faq-accent);
  transition: transform .3s;
}
.mil-accordion-header.active .mil-accordion-icon {
  transform: rotate(45deg);
}
.mil-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
  padding: 0 1.5rem;
}
.mil-accordion-body p {
  margin: 1rem 0;
  color: var(--faq-text);
  line-height: 1.6;
}

.mil-half-container .mil-text-box.mil-g-m4:before {
    background: #cecece;
}

/* FAR RIGHT vertical FAQ label */
  #faq {
  position: relative;
  overflow: hidden; /* keep floats tidy */
}
  #faq .vertical-text {
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    
    font-size: 4vw;
    font-weight: 700;
    letter-spacing: 0.5rem;
    color: #cecece;
    pointer-events: none;
    z-index: 1;
  }
  
  .vertical-text2 {
    position: absolute;
    top: 50%;
    left: 30px;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    
    font-size: 4vw;
    font-weight: 700;
    letter-spacing: 0.5rem;
    color: #cecece;
    pointer-events: none;
    z-index: 1;
  }
  
  .vertical-text3 {
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    
    font-size: 4vw;
    font-weight: 700;
    letter-spacing: 0.5rem;
    color: #cecece;
    pointer-events: none;
    z-index: 1;
  }


/* FAR RIGHT vertical NEWS label for #clients */
  #clients {
    position: relative;
  }
  #clients .vertical-text {
    position: absolute;
    top: 50%;
    left: 30px;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    
    font-size: 4vw;
    font-weight: 700;
    letter-spacing: 0.5rem;
    color: #cecece;
    pointer-events: none;
    z-index: 1;
  }
  
 

/* Floating animation for FAQ illustration via CSS background */
  @keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0); }
  }
  .faq-animation {
    position: absolute;
    top: 40%;
    left: 20px;
    width: 200px;
    height: 200px;
    background-image: url('../img/faq-animation.png');
    background-size: contain;
    background-repeat: no-repeat;
    animation: float 4s ease-in-out infinite;
    pointer-events: none;
  }

/* ── FOOTER SECTION ────────────────────────────────────────────────── */
footer {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-family: inherit;
  position: relative;
  overflow: hidden;
}
.footer-main {
  background: var(--bg-primary);
  padding: 3rem 0 1rem;
}
.footer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.footer-col {
  flex: 1 1 280px;
  min-width: 220px;
}
.footer-col.about .logo {
  max-width: 180px;
  margin-bottom: 1rem;
}
.footer-col.about p,
.footer-col.links p,
.footer-col.links a {
  color: var(--text-secondary);
  font-size: .9rem;
  line-height: 1.6;
}
.footer-col.links h4,
.footer-col.about h4,
.footer-col.partners h4 {
  color: var(--accent);
  margin-bottom: 1rem;
}
.footer-col.links ul {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}
.footer-col.links ul li {
  margin-bottom: .5rem;
}
.footer-col.links ul a:hover {
  color: var(--text-primary);
}
.footer-col.partners .partner {
  margin-bottom: 1.5rem;
}
.footer-col.partners img {
  max-width: 140px;
  display: block;
}
.footer-bottom {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 1rem;
  border-top: 1px solid var(--overlay-dark);
  padding-padding: 1rem;
  color: var(--text-secondary);
}

/* ↓ pick the breakpoint that matches the rest of your site –  
   575.98 px (Bootstrap “xs”) or 767.98 px (“sm”) are both common. */
@media (max-width: 767.98px) {
  .footer-bottom {
    text-align: center;
    margin-bottom: 6rem;
    font-size: 1rem;
    border-top: 1px solid var(--overlay-dark);
    padding-bottom: 4rem;
    color: var(--text-secondary);
  }
}

footer .footer-anim-shape {
  position: absolute;
  bottom: 0px;
  right: 20px;
  width: 60vw;            /* adjust size as needed */
  max-width: 400px;
  opacity: 0.90;          /* subtle behind-text look */
  pointer-events: none;
  z-index: 0;             /* behind all footer content */
  animation: floatFooter 8s ease-in-out infinite;
}


/* Anniversary logo via CSS background */
.footer-col.about .anniversary {
  display: block;               /* make it a block so width/height apply */
  width: 120px;
  height: 120px;
  background-image: url('../img/faq-animation.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  margin-bottom: 1rem;
}

/* make sure footer is the positioning context */
.sgb-footer {
  position: relative;
}

/* floating animation keyframes */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}





/* keep the footer above any parallax layers or page‑transition frames */
.sgb-footer { position: relative; z-index: 20; }

/* give a little breathing room so the copyright strip is never clipped */
.sgb-footer .footer-main { padding-bottom: 3rem; }

/* add breathing room equal to footer height */
#smooth-content::after{
  content:"";
  display:block;
  height:120px;        /* ≈ footer‑bottom height – adjust if you change it */
}

@keyframes floatFooter {
  0%, 100%   { transform: translateY(0)    rotate(0deg); }
  50%        { transform: translateY(-15px) rotate(-1deg); }
}

.mil-tp-btn .fa-globe {
  color: #000000 !important;
}

/* show only light-mode image */
.light-mode-img { display: inline-block !important; }
.dark-mode-img  { display: none            !important; }


/* ── RESPONSIVE TWEAKS ─────────────────────────────────────────────── */

@media (max-width: 768px) {
  .cards-grid .card-title { font-size: 1.2rem; }
  .cards-grid .card-text  { font-size: .95rem; }
  #achievements .counter-item h4 { 
      font-size: 2rem; 
      color:#000;
  }
  #achievements .card-title { font-size: 1.2rem; }
  #achievements .card-text  { font-size: .95rem; }
}
@media (max-width: 576px) {
  .hero-cta { font-size: .7rem; }
}

/* show only the light image */
.light-img { display: inline-block !important; }
.dark-img  { display: none          !important; }


/* New Section */
/* Container of cards */
  .slanted-cards {
    gap: 1rem;
  }

  /* Base card: equal width, orange-tinted glass, slanted */
  .slanted-card {
    flex: 1;                                /* equal widths */
    display: flex;
    background: rgb(206 206 206);     /* #f37021 at 15% opacity */
    backdrop-filter: blur(12px);
    border: 3px solid rgba(243,112,33,0.9); /* #f37021 at 30% opacity */
    border-radius: 1rem;
    transform: skew(-10deg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
  }
  .slanted-card:hover {
    transform: skew(-10deg) translateY(-8px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.2);
  }

  /* Counter-skew inner content */
  .card-content {
    transform: skew(10deg);
    padding: 2rem;
    width: 100%;
  }

  /* White text & icons */
  .card-content i,
  .card-content h3,
  .card-content p {
    color: #000 !important;
  }

  /* Mobile: remove skew for readability */
  @media (max-width: 767px) {
    .slanted-cards {
      flex-direction: column;
    }
    .slanted-card {
      transform: none !important;
    }
    .card-content {
      transform: none !important;
    }
  }
  
  /* CTA visuals (unchanged feel) */
  .mil-call-overlay{
    position:absolute; inset:0; z-index:0;
    background:#ffffff;
    background-size:200% 200%;
    animation:overlaySlide 15s ease-in-out infinite alternate;
  }
  @keyframes overlaySlide{0%{background-position:0% 50%}100%{background-position:100% 50%}}
  

    /* ===== Call-to-action overlay + theme-safe text ===== */
.mil-call-action1{ position:relative; }

.mil-call-action1 .mil-call-overlay{
  position:absolute;
  inset:0;
  z-index:0;                 /* keep it behind the content */
  pointer-events:none;       /* avoid blocking clicks */
  /* dark theme overlay */
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.55));
}

/* make sure the content is above the overlay */
.mil-call-action1 > .container{
  position:relative; 
  z-index:1;
}

/* LIGHT THEME: soften the overlay and switch text back to dark */
html[data-theme="light"] .mil-call-action1 .mil-call-overlay{
  background:
    linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.75));
}

/* If the container has Bootstrap's .text-white, override it ONLY in this section */
html[data-theme="light"] .mil-call-action1 .text-white,
html[data-theme="light"] .mil-call-action1 h1,
html[data-theme="light"] .mil-call-action1 h2,
html[data-theme="light"] .mil-call-action1 h3,
html[data-theme="light"] .mil-call-action1 h4,
html[data-theme="light"] .mil-call-action1 h5,
html[data-theme="light"] .mil-call-action1 h6,
html[data-theme="light"] .mil-call-action1 p{
  color:#111 !important;
}

/* Optional: keep the orange CTA readable on both themes */
.mil-call-action1 .mil-cta-btn{
  color:#000;
  border:2px solid #0000;    /* no border tinting from parent */
}
/* Force white background for CTA section */
.mil-call-action1{
  background:#fff !important;
}

/* Keep overlay from tinting it */
.mil-call-action1 .mil-call-overlay{
  background:transparent !important;
}

/* If the container has .text-white, make it readable on white */
.mil-call-action1 .text-white{
  color:#111 !important;
}

<!-- Scoped styles (pills fixed) -->
  
    :root{ --pd-orange:#f37021; --pd-panel:#111; --pd-line:#1f1f1f; }

    .pd-pill{
      display:inline-flex; align-items:center; gap:.55rem;
      background:var(--pd-orange); color:#000; text-decoration:none;
      padding:.55rem 1rem; border-radius:999px; font-weight:800;
      box-shadow:0 10px 26px rgba(0,0,0,.35)
    }
    .pd-pill i{ font-size:.95em }

    .pd-card{
      background:var(--pd-panel); border:1px solid var(--pd-line);
      border-radius:16px; padding:18px 18px 12px;
      box-shadow:0 20px 60px rgba(0,0,0,.28);
    }
    .pd-meta{ display:flex; align-items:center; gap:.6rem; margin-bottom:.35rem; opacity:.9 }
    .pd-cat{
      display:inline-block; padding:.35rem .65rem; border-radius:999px;
      border:1px solid #f37021; background:#fff; color:var(--pd-orange);
      font-size:.85rem; font-weight:700
    }
    .pd-dot{ opacity:.6 }
    .pd-date{ opacity:.85; font-size:.95rem }
    .pd-title{ margin:.3rem 0 .6rem; line-height:1.12; font-weight:900 }
    .pd-lead{ margin:.2rem 0 1rem; opacity:.9 }

    .pd-share{ display:flex; gap:10px; margin:.2rem 0 1rem }
    .pd-share a{ color:#000; opacity:.9; text-decoration:none; font-size:1.05rem }
    .pd-share a:hover{ opacity:1 }

    .pd-body p{ margin:0 0 1.05em }
    .pd-body h2,.pd-body h3,.pd-body h4{ margin:1.2em 0 .6em }
    .pd-body a{ color:#ffb17a }

    .pd-nav{ display:flex; justify-content:space-between; gap:12px; padding-top:10px }
    .pd-nav a{ display:inline-block; background:#2f2f2f; color:#fff; text-decoration:none; padding:10px 12px; border-radius:10px }
    .pd-nav a:hover{ background:#3a3a3a }

    /* ===== Square hero with COMPACT PILLS (fixed) ===== */
    .pd-hero{
      position:sticky; top:96px; margin:0;
      border:1px solid #222; border-radius:18px; overflow:hidden;
      background:#0e0e0e; aspect-ratio:1/1;
      box-shadow:0 24px 70px rgba(0,0,0,.38), 0 0 0 6px rgba(243,112,33,.06) inset;
    }
    .pd-hero img{
      width:100%; height:100%; object-fit:cover; object-position:center;
      display:block; transform:scale(1); transition:transform .45s ease;
    }
    .pd-hero:hover img{ transform:scale(1.03) }

    /* Overlay layer */
    .pd-hero-cap{
      position:absolute; inset:0; z-index:2; pointer-events:none;
    }
    /* Corner pills — COMPACT, no stretching */
    .pd-hero-badge,
    .pd-hero-date{
      position:absolute; top:12px;
      display:inline-flex; align-items:center; white-space:nowrap;
      height:auto; line-height:1;                /* <-- prevents tall pills */
      padding:6px 10px; border-radius:999px;
      background:rgba(255,255,255,.88);
      border:1px solid #2c2c2c; font-size:.85rem;
      box-shadow:0 4px 10px rgba(0,0,0,.25);
      pointer-events:auto;                       /* allow copy/select if needed */
    }
    .pd-hero-badge{ left:12px;  color:var(--pd-orange); }
    .pd-hero-date { right:12px; color:#000; opacity:.95; }

    /* Aspect-ratio fallback */
    @supports not (aspect-ratio: 1 / 1){
      .pd-hero{ position:relative }
      .pd-hero::before{ content:""; display:block; padding-top:100% }
      .pd-hero > img{ position:absolute; inset:0 }
    }

    /* Mobile tweaks */
    @media (max-width: 991.98px){
      .pd-hero{ position:relative; top:0; }
    }
 

  :root{ --ng-orange:#f37021; --ng-bg:#0b0b0b; --ng-panel:#111; --ng-line:#1f1f1f; }
  .ng-head{ margin:0 0 .25rem; }

  /* Search form */
  .ng-search{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
  .ng-input {
    background: #ffffff;
    border: 1px solid #f37021;
    border-radius: 12px;
    color: #000000;
    padding: 10px 12px;
    min-width: 250px;
}
  .ng-btn{
    display:inline-flex; align-items:center; gap:.5rem;
    background:var(--ng-orange); color:#fff; border:0; border-radius:12px;
    padding:10px 14px; font-weight:700; text-decoration:none; cursor:pointer;
  }
  .ng-btn.alt{ background:#2f2f2f; }

  /* Chips */
  .ng-chips{ display:flex; gap:8px; flex-wrap:wrap; }
  .ng-chip{
    display:inline-block; padding:7px 14px; border-radius:999px;
    background:#161616; color:#fff; border:1px solid #272727; text-decoration:none;
  }
  .ng-chip.active{ background:var(--ng-orange); border-color:var(--ng-orange); }

  /* Grid cards */
  .ng-grid{ row-gap:24px; }
  .ng-card-wrap{ display:flex; }
  .ng-card{
    background:#737373; border:1px solid var(--ng-line); border-radius:16px;
    overflow:hidden; display:flex; flex-direction:column; width:100%;
    text-decoration:none; color:#fff; transition:transform .25s ease, box-shadow .25s ease;
  }
  .ng-card:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.35); }

  .ng-thumb{ position:relative; aspect-ratio:1/1; overflow:hidden; background:#0e0e0e; }
  .ng-thumb img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; transform:scale(1); transition:transform .35s ease; }
  .ng-card:hover .ng-thumb img{ transform:scale(1.06); }

  /* Compact corner pills */
  .ng-pill{
    position:absolute; top:12px; display:inline-flex; align-items:center; white-space:nowrap;
    height:auto; line-height:1; padding:6px 10px; border-radius:999px;
    background:rgba(22,22,22,.88); border:1px solid #2c2c2c; font-size:.85rem;
    box-shadow:0 4px 10px rgba(0,0,0,.25); z-index:2;
  }
  .ng-cat{ left:12px; color:var(--ng-orange); }
  .ng-date{ right:12px; color:#fff; opacity:.95; }

  .ng-body{
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:flex-start;        /* <<< stops full-width stretch */
  }
  .ng-title{ margin:0; font-weight:800; line-height:1.3; }
  .ng-sum{ margin:0; opacity:.92; }

  /* Old "more" hidden */
  .ng-more{ display:none; }

  /* Compact pill CTA (content width) */
  .ng-cta{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    margin-top:auto;
    padding:8px 12px;             /* smaller */
    font-size:.9rem;              /* smaller */
    border-radius:999px;
    background: var(--ng-orange);
    color:#111;
    font-weight:800;
    letter-spacing:.02em;
    box-shadow:0 10px 20px rgba(243,112,33,.25);
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
    align-self:flex-start;        /* <<< content width */
    width:auto;                   /* <<< content width */
    white-space:nowrap;           /* keep short */
  }
  .ng-cta i{ transition: transform .2s ease; }
  .ng-card:hover .ng-cta,
  .ng-card:focus-visible .ng-cta{
    transform: translateY(-1px);
    box-shadow:0 14px 30px rgba(243,112,33,.35);
  }
  .ng-card:hover .ng-cta i,
  .ng-card:focus-visible .ng-cta i{
    transform: translateX(3px);
  }

  /* Optional ghost variant */
  .ng-cta.ghost{
    background: transparent;
    color:#fff;
    border:1px solid #2c2c2c;
    box-shadow:none;
  }
  .ng-card:hover .ng-cta.ghost{
    border-color: var(--ng-orange);
    color:#fff;
    box-shadow:0 8px 26px rgba(0,0,0,.25);
  }

  /* Pager */
  .ng-pager{ display:flex; gap:8px; justify-content:center; margin:28px 0 10px; flex-wrap:wrap; }
  .ng-pager a,.ng-pager span{ padding:9px 12px; border-radius:10px; border:1px solid #2c2c2c; text-decoration:none; color:#fff; }
  .ng-pager .active{ background:var(--ng-orange); border-color:var(--ng-orange); color:#000; font-weight:800; }
  .ng-pager .dots{ border:none; padding:9px 6px; }

  /* Empty */
  .ng-empty{
    background:#111; border:1px dashed #2b2b2b; padding:28px; border-radius:14px; text-align:center;
  }

  /* Fallback for very old browsers (no aspect-ratio) */
  @supports not (aspect-ratio: 1 / 1){
    .ng-thumb{ position:relative; }
    .ng-thumb::before{ content:""; display:block; padding-top:100%; }
    .ng-thumb > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  }