/* ==========================================================================
   E-KORS MODERN 3D HOMEPAGE STYLES
   ========================================================================== */

/* 1. Global 3D Perspective & Motion Defaults */
:root {
  --ekors-maroon: #8A3324;
  --ekors-maroon-dark: #6e281b;
  --ekors-gold: #ffb600;
  --ekors-gold-dark: #e0a100;
  --ekors-dark: #0f172a;
  --ekors-card-bg: #ffffff;
  --ekors-shadow-3d: 0 15px 35px -5px rgba(15, 23, 42, 0.12), 0 5px 15px -3px rgba(0, 0, 0, 0.06);
  --ekors-shadow-3d-hover: 0 25px 45px -5px rgba(138, 51, 36, 0.22), 0 12px 25px -5px rgba(0, 0, 0, 0.12);
}

/* 2. Hero Carousel 3D Glassmorphism Enhancements */
.banner-carousel-item {
  position: relative;
  overflow: hidden;
}

.banner-carousel-item .slider-content {
  perspective: 1000px;
}

.slide-title-box {
  background: linear-gradient(135deg, var(--ekors-maroon) 0%, #a83d2c 100%) !important;
  color: #ffffff !important;
  display: inline-block;
  padding: 8px 20px !important;
  border-radius: 30px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 1px !important;
  box-shadow: 0 8px 20px rgba(138, 51, 36, 0.35) !important;
  transform: translateZ(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.slider.btn {
  transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25) !important;
}

.slider.btn:hover {
  transform: translateY(-4px) scale(1.04) !important;
  box-shadow: 0 14px 28px rgba(138, 51, 36, 0.45) !important;
}

/* 3. Call To Action 3D Glass Bar */
.action-style-box {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
  border-radius: 16px !important;
  padding: 30px 40px !important;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  position: relative;
  z-index: 10;
  transform: translateY(-20px);
  margin-bottom: 20px;
}

/* 4. Features Section (About Us & Our Values) - 3D Cards */
.ts-features {
  padding-top: 60px;
}

.ts-intro {
  background: #ffffff;
  padding: 35px;
  border-radius: 16px;
  box-shadow: var(--ekors-shadow-3d);
  border: 1px solid rgba(0,0,0,0.05);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  overflow: hidden;
}

.ts-intro::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(to bottom, var(--ekors-maroon), var(--ekors-gold));
}

.ts-intro:hover {
  transform: translateY(-6px);
  box-shadow: var(--ekors-shadow-3d-hover);
}

.ts-service-box {
  background: #ffffff;
  padding: 24px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.ts-service-box:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 16px 32px rgba(138, 51, 36, 0.12);
  border-color: rgba(138, 51, 36, 0.2);
}

.ts-service-icon {
  width: 54px;
  height: 54px;
  background: linear-gradient(135deg, rgba(138, 51, 36, 0.1) 0%, rgba(255, 182, 0, 0.15) 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ekors-maroon);
  font-size: 22px;
  box-shadow: 0 4px 12px rgba(138, 51, 36, 0.1);
  transition: all 0.3s ease;
}

.ts-service-box:hover .ts-service-icon {
  background: linear-gradient(135deg, var(--ekors-maroon) 0%, #a83d2c 100%);
  color: #ffffff;
  transform: rotateY(180deg);
}

/* 5. Facts / Stats Counter Section - 3D Glass Cards */
#facts.facts {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  position: relative;
  overflow: hidden;
}

#facts.facts::after {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255, 182, 0, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.ts-facts-img {
  width: 70px;
  height: 70px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px auto;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  transition: all 0.4s ease;
}

.ts-facts-num {
  font-size: 40px !important;
  font-weight: 800 !important;
  color: var(--ekors-gold) !important;
  text-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.ts-facts-title {
  color: #e2e8f0 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.5px;
}

/* 6. "We Are Specialists In" Section - 3D Perspective Cards */
.ts-service-area {
  padding: 80px 0;
  background: #f8fafc;
}

.specialist-3d-card-wrapper {
  perspective: 1000px;
}

.specialist-3d-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.15);
  border: 4px solid #ffffff;
  background: #ffffff;
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  transform-style: preserve-3d;
}

.specialist-3d-card:hover {
  transform: translateY(-10px) rotateX(4deg) rotateY(-4deg);
  box-shadow: 0 30px 60px rgba(138, 51, 36, 0.25);
}

.specialist-3d-card img {
  transition: transform 0.6s ease;
}

.specialist-3d-card:hover img {
  transform: scale(1.06);
}

/* 7. Recent Projects Section - 3D Tilt Grid Cards */
.project-area {
  padding: 80px 0;
  background: #ffffff;
}

.project-img-container {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  border: 1px solid rgba(0,0,0,0.05);
  background: #ffffff;
  margin-bottom: 30px;
}

.project-img-container:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 22px 44px rgba(138, 51, 36, 0.2);
}

.project-item-info {
  background: linear-gradient(to top, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.6) 70%, transparent 100%) !important;
  backdrop-filter: blur(6px);
  padding: 25px 20px !important;
}

.project-item-title a {
  color: #ffffff !important;
  font-weight: 700 !important;
  transition: color 0.3s ease;
}

.project-item-title a:hover {
  color: var(--ekors-gold) !important;
}

/* Category chip: style.css paints it gold, so the text must be dark --
   gold-on-gold made the label invisible. */
.project-cat {
  display: inline-block;
  background: var(--ekors-gold) !important;
  color: #1a1a1a !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 3px 10px !important;
  border-radius: 6px;
  margin: 0;
}

/* Stacking on hover: image < dark overlay (::after, z1) < caption + icon (z2)
   < shimmer band (::before, z3, pointer-events none). Without this the
   overlay sat above the caption and dimmed the title. */
.shuffle-item .project-img-container::after {
  z-index: 1;
}
.shuffle-item .project-img-container .project-item-info,
.shuffle-item .project-img-container .gallery-popup .gallery-icon {
  z-index: 2;
}

/* 8. Testimonials Section - 3D Glass Quote Cards */
.quote-item {
  background: #ffffff;
  padding: 35px;
  border-radius: 16px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.07);
  border: 1px solid rgba(0, 0, 0, 0.05);
  position: relative;
  transition: all 0.35s ease;
}

.quote-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 45px rgba(138, 51, 36, 0.14);
}

.testimonial-thumb {
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  border: 3px solid var(--ekors-gold) !important;
  box-shadow: 0 6px 15px rgba(0,0,0,0.15) !important;
}

/* 9. Sectors / Happy Clients Grid */
.clients-logo {
  transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 4px 15px rgba(0,0,0,0.04);
}

.clients-logo:hover {
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 15px 30px rgba(138, 51, 36, 0.15);
  border-color: rgba(138, 51, 36, 0.2) !important;
}

/* GPU Acceleration & Performance Optimizations */
* {
  -webkit-font-smoothing: antialiased;
}

.banner-carousel-item,
.specialist-3d-card,
.project-img-container,
.quote-item,
.ts-service-box,
.ts-intro {
  transform: translateZ(0);
  will-change: transform;
}

/* 3D CIRCULAR REVOLVING SECTOR CAROUSEL WITH CENTER LIGHTNING ARRESTER ROD */
.sector-3d-stage {
  perspective: 1400px;
  height: 320px;
  position: relative;
  margin: 30px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}

/* Center Standing Lightning Arrester Rod in 3D Stage */
.sector-center-arrester {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(170px);
  transform-style: preserve-3d;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  width: 160px;
  height: 260px;
}

.sector-center-rod-svg {
  height: 180px;
  width: auto;
}

/* Thunder cloud. Was a JPEG whose white background only blended because the
   page behind it was white -- it showed as a hard white rectangle on the
   tinted mobile stage panel. Now a real alpha cutout (WebP + PNG fallback).
   `display: contents` keeps the <img> a direct flex child of the arrester. */
.sector-center-arrester picture {
  display: contents;
}

.sector-thunder-cloud {
  width: 180px;
  height: auto;
  object-fit: contain;
  animation: cloudPulse 3s infinite ease-in-out;
  margin-bottom: -15px;
}

@keyframes cloudPulse {
  0%, 100% {
    opacity: 0.92;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

.sector-center-base-ring {
  width: 140px;
  height: 32px;
  background: radial-gradient(ellipse at center, rgba(138, 51, 36, 0.35) 0%, rgba(251, 191, 36, 0.18) 50%, transparent 80%);
  border-radius: 50%;
  margin-top: -15px;
  border: 1.5px dashed rgba(138, 51, 36, 0.45);
  transform: rotateX(70deg);
}

.sector-3d-carousel {
  width: 170px;
  height: 140px;
  position: absolute;
  transform-style: preserve-3d;
  will-change: transform;
  animation: rotate3dCarousel 25s linear infinite;
}

.sector-3d-stage:hover .sector-3d-carousel {
  animation-play-state: paused;
}

@keyframes rotate3dCarousel {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

.sector-3d-card {
  position: absolute;
  width: 170px;
  height: 140px;
  left: 0;
  top: 0;
  backface-visibility: hidden;
}

.sector-3d-card-inner {
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%);
  border: 2px solid rgba(138, 51, 36, 0.18);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255,255,255,0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  cursor: pointer;
  backface-visibility: visible;
}

/* Front face hidden when looking at back */
.sector-3d-card-inner {
  backface-visibility: hidden;
}

.sector-3d-card:hover .sector-3d-card-inner {
  transform: scale(1.35);
  border-color: #8A3324 !important;
  box-shadow: 0 20px 40px rgba(138, 51, 36, 0.4);
  background: linear-gradient(145deg, #ffffff 0%, #fff7ed 100%);
}

/* 6 items on a cylinder. Angle and radius are custom properties so the
   responsive blocks only need to change --orbit, and the entrance animation
   can reuse --angle without every breakpoint fighting over `transform`. */
.sector-3d-carousel { --orbit: 340px; }
.sector-3d-card.card-1 { --angle: 0deg; }
.sector-3d-card.card-2 { --angle: 60deg; }
.sector-3d-card.card-3 { --angle: 120deg; }
.sector-3d-card.card-4 { --angle: 180deg; }
.sector-3d-card.card-5 { --angle: 240deg; }
.sector-3d-card.card-6 { --angle: 300deg; }
.sector-3d-card { transform: rotateY(var(--angle)) translateZ(var(--orbit)); }

.sector-client-logo {
  max-height: 44px;
  max-width: 82%;
  object-fit: contain;
  mix-blend-mode: multiply;
  margin-bottom: 6px;
  transition: transform 0.3s ease;
}

.sector-3d-card:hover .sector-client-logo {
  transform: scale(1.15);
}

.sector-3d-card i {
  font-size: 28px;
  margin-bottom: 6px;
  transition: transform 0.3s ease;
}

.sector-3d-card:hover i {
  transform: scale(1.2);
}

.sector-3d-card span,
.sector-client-name {
  font-size: 11.5px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.2;
}

/* =========================================================================
   9b. SECTOR STAGE - ANIMATION ENHANCEMENTS
   The concept (a lightning arrester with client sectors orbiting it) was not
   readable: the rod sat at translateZ(170px) while the cards orbit at 340px,
   so the nearest card covered the rod and the piece read as one floating card
   with a smudge behind it. The rod now sits on the cylinder axis, the stage is
   tall enough for the cloud to clear the orbit, and the strike is choreographed
   on one 6s cycle instead of a constant flicker.
   ========================================================================= */

.sector-3d-stage {
  height: 460px;
  perspective: 1250px;
  perspective-origin: 50% 46%;
  margin: 10px 0 0;
}

/* Rod on the cylinder axis, so near cards pass in front of it and the
   cloud/bolt clear the top of the orbit. */
.sector-center-arrester {
  /* lifted so the cloud, spark gap and upper rod clear the card orbit */
  transform: translate(-50%, -54%) translateZ(0);
  width: 230px;
  height: 360px;
  justify-content: flex-start;
}

.sector-center-rod-svg {
  height: 225px;
  margin-top: -52px;
  filter: drop-shadow(0 8px 14px rgba(15, 23, 42, 0.18));
}

.sector-thunder-cloud {
  width: 225px;
  margin-bottom: -18px;
  animation: cloudCharge 6s ease-in-out infinite;
  filter: drop-shadow(0 10px 18px rgba(15, 23, 42, 0.12));
}

/* Cloud now breathes on the same 6s clock as the strike and briefly
   over-brightens just before the bolt fires. */
@keyframes cloudCharge {
  0%, 55%   { opacity: 0.9;  transform: scale(1);    filter: brightness(1); }
  66%       { opacity: 1;    transform: scale(1.05); filter: brightness(1.18); }
  71%       { opacity: 1;    transform: scale(1.06); filter: brightness(1.45); }
  78%       { opacity: 1;    transform: scale(1.02); filter: brightness(0.88); }
  100%      { opacity: 0.9;  transform: scale(1);    filter: brightness(1); }
}

/* Ground ring: charges up, then flares on impact. */
.sector-center-base-ring {
  margin-top: -6px;
  animation: baseRingCharge 6s ease-in-out infinite;
}

@keyframes baseRingCharge {
  0%, 68%  { opacity: 0.55; transform: rotateX(70deg) scale(1); }
  73%      { opacity: 1;    transform: rotateX(70deg) scale(1.16); }
  80%      { opacity: 0.7;  transform: rotateX(70deg) scale(1.04); }
  100%     { opacity: 0.55; transform: rotateX(70deg) scale(1); }
}

/* Shockwave rings leaving the strike point.
   Drawn as pseudo-elements of the arrester rather than extra <span>s: markup
   that only behaves correctly when its CSS is present is fragile (a stale
   cached stylesheet turns such elements into static blocks that wreck the
   layout). Nothing here depends on the HTML. */
.sector-center-arrester::before,
.sector-center-arrester::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 150px;
  height: 150px;
  margin-left: -75px;
  border-radius: 50%;
  border: 2px solid rgba(138, 51, 36, 0.5);
  opacity: 0;
  pointer-events: none;
  animation: sectorShockwave 6s ease-out infinite;
}

.sector-center-arrester::after {
  border-color: rgba(251, 191, 36, 0.55);
  animation-delay: 0.18s;
}

@keyframes sectorShockwave {
  0%, 71%  { transform: rotateX(74deg) scale(0.25); opacity: 0; }
  73%      { opacity: 0.75; }
  100%     { transform: rotateX(74deg) scale(2.6);  opacity: 0; }
}

/* Whole-stage flash on impact (pseudo-element -- see note above). */
.sector-3d-stage::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 720px;
  height: 380px;
  margin: -190px 0 0 -360px;
  border-radius: 50%;
  /* origin sits at the strike point, not over the cloud, so the peak flash
     lights the scene instead of blowing the cloud out entirely */
  background: radial-gradient(ellipse at 50% 62%,
              rgba(255, 255, 255, 0.7) 0%,
              rgba(254, 240, 138, 0.42) 26%,
              rgba(251, 191, 36, 0.14) 50%,
              transparent 72%);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  animation: sectorStrikeFlash 6s linear infinite;
}

@keyframes sectorStrikeFlash {
  0%, 70%  { opacity: 0; }
  72%      { opacity: 0.72; }
  74%      { opacity: 0.1; }
  76%      { opacity: 0.55; }
  79%      { opacity: 0.07; }
  81%      { opacity: 0.34; }
  86%, 100%{ opacity: 0; }
}

/* Depth haze behind the orbit so the far side recedes (pseudo-element). */
.sector-3d-stage::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 960px;
  height: 360px;
  margin: -180px 0 0 -480px;
  transform: translateZ(-280px);
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
              rgba(138, 51, 36, 0.10) 0%,
              rgba(251, 191, 36, 0.06) 42%,
              transparent 72%);
  pointer-events: none;
}

/* Slight tilt so the orbit reads as a ring seen from just above,
   rather than a flat left-right slide. */
@keyframes rotate3dCarousel {
  0%   { transform: translateY(64px) rotateX(-7deg) rotateY(0deg); }
  100% { transform: translateY(64px) rotateX(-7deg) rotateY(360deg); }
}

.sector-3d-carousel {
  animation: rotate3dCarousel 26s linear infinite;
}

/* Hover eases the orbit to a stop instead of snapping. */
.sector-3d-stage:hover .sector-3d-carousel {
  animation-play-state: paused;
}

.sector-3d-card-inner {
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.13),
              0 2px 6px rgba(15, 23, 42, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ---- Entrance: cards deploy out of the centre when the stage scrolls in.
   .is-in-view is added by js/scroll-animator.js, which already observes
   .sector-3d-stage. ---- */
/* Gated on .ekors-animate, which js/scroll-animator.js adds to the stage.
   Without that class (JS disabled or the script failed) the cards keep their
   normal transform and stay visible instead of being stuck at opacity 0. */
.sector-3d-stage.ekors-animate .sector-3d-card {
  opacity: 0;
  transform: rotateY(var(--angle)) translateZ(0) scale(0.35);
}

.sector-3d-stage.is-in-view .sector-3d-card {
  animation: sectorCardDeploy 0.95s cubic-bezier(0.22, 1, 0.3, 1) both;
}

.sector-3d-stage.is-in-view .sector-3d-card.card-1 { animation-delay: 0.05s; }
.sector-3d-stage.is-in-view .sector-3d-card.card-2 { animation-delay: 0.14s; }
.sector-3d-stage.is-in-view .sector-3d-card.card-3 { animation-delay: 0.23s; }
.sector-3d-stage.is-in-view .sector-3d-card.card-4 { animation-delay: 0.32s; }
.sector-3d-stage.is-in-view .sector-3d-card.card-5 { animation-delay: 0.41s; }
.sector-3d-stage.is-in-view .sector-3d-card.card-6 { animation-delay: 0.50s; }

@keyframes sectorCardDeploy {
  from { opacity: 0; transform: rotateY(var(--angle)) translateZ(0) scale(0.35); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: rotateY(var(--angle)) translateZ(var(--orbit)) scale(1); }
}

/* Rod rises as the section arrives (same no-JS guard as the cards). */
.sector-3d-stage.ekors-animate .sector-center-arrester {
  opacity: 0;
}

.sector-3d-stage.is-in-view .sector-center-arrester {
  animation: sectorRodRise 1s cubic-bezier(0.22, 1, 0.3, 1) 0.1s both;
}

@keyframes sectorRodRise {
  from { opacity: 0; transform: translate(-50%, -46%) translateZ(0) scale(0.9); }
  to   { opacity: 1; transform: translate(-50%, -54%) translateZ(0) scale(1); }
}

/* Fall back to a visible, still composition when motion is reduced. */
@media (prefers-reduced-motion: reduce) {
  .sector-3d-carousel,
  .sector-thunder-cloud,
  .sector-center-base-ring,
  .sector-center-arrester::before,
  .sector-center-arrester::after,
  .sector-3d-stage::after,
  .sector-3d-stage.is-in-view .sector-3d-card,
  .sector-3d-stage.is-in-view .sector-center-arrester {
    animation: none;
  }
  .sector-3d-stage.ekors-animate .sector-3d-card {
    opacity: 1;
    transform: rotateY(var(--angle)) translateZ(var(--orbit));
  }
  .sector-3d-stage.ekors-animate .sector-center-arrester { opacity: 1; }
  .sector-3d-stage::before,
  .sector-3d-stage::after,
  .sector-center-arrester::before,
  .sector-center-arrester::after { display: none; }
}

/* 10. Newsletter Subscribe Section 3D Bar */
.subscribe.no-padding {
  background: linear-gradient(135deg, var(--ekors-maroon) 0%, #6e281b 100%);
  border-radius: 20px;
  margin: 40px auto;
  box-shadow: 0 20px 40px rgba(138, 51, 36, 0.3);
  padding: 35px 25px !important;
}

/* 11. Logo-Matched Hamburger Menu Button */
.navbar-toggler {
  background: linear-gradient(135deg, #8A3324 0%, #a83d2c 100%) !important;
  border: 2px solid #ffb600 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  box-shadow: 0 4px 12px rgba(138, 51, 36, 0.3) !important;
  transition: all 0.3s ease !important;
}

.navbar-toggler:hover,
.navbar-toggler:focus {
  background: linear-gradient(135deg, #a83d2c 0%, #8A3324 100%) !important;
  border-color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(255, 182, 0, 0.4) !important;
}

.navbar-dark .navbar-toggler-icon,
.navbar-light .navbar-toggler-icon,
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffb600' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* 12. MOBILE HERO SECTION OPTIMIZATION (LESS CONTENT, CLEAN RESPONSIVE LOOK) */
@media (max-width: 767px) {
  .banner-carousel-item {
    height: 340px !important;
    min-height: 340px !important;
    background-position: center center !important;
  }

  .slider-content {
    padding: 15px 10px !important;
  }

  .slide-title {
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 6px !important;
  }

  .slide-title-box {
    font-size: 11px !important;
    padding: 4px 10px !important;
    margin-bottom: 8px !important;
  }

  .slide-sub-title {
    font-size: 20px !important;
    line-height: 1.25 !important;
    margin-bottom: 10px !important;
  }

  /* Hide heavy paragraph text on mobile to keep hero section ultra-clean */
  .slider-description {
    display: none !important;
  }

  /* Compact button styling on mobile */
  .slider.btn {
    padding: 8px 18px !important;
    font-size: 12px !important;
    border-radius: 20px !important;
    margin: 4px 2px !important;
    display: inline-block !important;
    visibility: visible !important;
  }

  /* Secondary button on mobile */
  .slider.btn.border {
    display: inline-block !important;
    visibility: visible !important;
  }

  /* Mobile Call to Action Box */
  .action-style-box {
    padding: 16px 18px !important;
    border-radius: 12px !important;
    margin-bottom: 0 !important;
    transform: translateY(-10px) !important;
  }

  .action-title {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  .call-to-action-btn .btn {
    padding: 8px 16px !important;
    font-size: 12px !important;
  }

  .sector-3d-stage {
    height: 200px !important;
  }

  .sector-3d-carousel {
    width: 130px !important;
    height: 110px !important;
  }

  .sector-3d-card {
    width: 130px !important;
    height: 110px !important;
    padding: 10px !important;
  }

  .sector-3d-card i {
    font-size: 24px !important;
    margin-bottom: 6px !important;
  }

  .sector-3d-card span {
    font-size: 10px !important;
  }

  .sector-3d-card.card-1 { transform: rotateY(0deg) translateZ(210px) !important; }
  .sector-3d-card.card-2 { transform: rotateY(60deg) translateZ(210px) !important; }
  .sector-3d-card.card-3 { transform: rotateY(120deg) translateZ(210px) !important; }
  .sector-3d-card.card-4 { transform: rotateY(180deg) translateZ(210px) !important; }
  .sector-3d-card.card-5 { transform: rotateY(240deg) translateZ(210px) !important; }
  .sector-3d-card.card-6 { transform: rotateY(300deg) translateZ(210px) !important; }

  /* Mobile Touch-Swipeable Project Navigation Filter Bar */
  .shuffle-btn-group {
    display: flex !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
    padding: 8px 4px !important;
    gap: 8px !important;
    margin: 15px 0 30px !important;
    border-bottom: 2px solid rgba(138, 51, 36, 0.15) !important;
    scrollbar-width: none;
  }

  .shuffle-btn-group::-webkit-scrollbar {
    display: none;
  }

  .shuffle-btn-group label {
    display: inline-block !important;
    flex: 0 0 auto !important;
    padding: 8px 16px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 20px !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    margin: 0 !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    transition: all 0.3s ease !important;
  }

  .shuffle-btn-group label.active {
    background: linear-gradient(135deg, #8A3324 0%, #a83d2c 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(138, 51, 36, 0.3) !important;
    border-color: #8A3324 !important;
  }
}

/* GLOBAL DESKTOP SHUFFLE CATEGORY FILTER NAVIGATION */
.shuffle-btn-group {
  display: inline-block;
  margin: 20px 0 40px;
  width: 100%;
  border-bottom: 3px solid #8A3324 !important;
}

.shuffle-btn-group label {
  display: inline-block;
  color: #1e293b !important;
  font-size: 14px !important;
  padding: 10px 24px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  transition: all 0.3s ease !important;
  cursor: pointer;
  margin: 0;
  border-radius: 6px 6px 0 0;
}

.shuffle-btn-group label:hover {
  background: rgba(138, 51, 36, 0.1) !important;
  color: #8A3324 !important;
}

.shuffle-btn-group label.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #8A3324 0%, #a83d2c 100%) !important;
  border-radius: 6px 6px 0 0 !important;
  box-shadow: 0 -4px 15px rgba(138, 51, 36, 0.3) !important;
}

.shuffle-btn-group label input {
  display: none !important;
}

/* 13. LIGHT LOGO-THEMED RESPONSIVE MOBILE NAVIGATION DROPDOWN DRAWER */
@media (max-width: 991px) {
  .navbar-collapse {
    background: linear-gradient(135deg, #ffffff 0%, #fdf2f1 100%) !important;
    backdrop-filter: blur(14px) !important;
    border-radius: 16px !important;
    padding: 20px 24px !important;
    margin-top: 15px !important;
    box-shadow: 0 15px 35px rgba(138, 51, 36, 0.15), 0 5px 15px rgba(0, 0, 0, 0.05) !important;
    border: 2px solid #ebd9d8 !important;
  }

  .navbar-nav {
    margin: 0 !important;
    width: 100% !important;
  }

  .navbar-nav .nav-item {
    border-bottom: 1px solid #ebd9d8 !important;
    padding: 4px 0 !important;
    width: 100% !important;
  }

  .navbar-nav .nav-item:last-child {
    border-bottom: none !important;
  }

  .navbar-nav .nav-link {
    color: #222222 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    transition: all 0.3s ease !important;
  }

  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-item.active > .nav-link {
    color: #8A3324 !important;
    background: rgba(138, 51, 36, 0.1) !important;
    padding-left: 18px !important;
  }

  /* Submenu Dropdown Container */
  .navbar-nav .dropdown-menu {
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #ebd9d8 !important;
    margin: 8px 0 12px 10px !important;
    padding: 8px 10px !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05) !important;
  }

  /* Mobile Nested Submenu (.dropdown-submenu) Responsive Formatting */
  .navbar-nav .dropdown-submenu {
    position: relative !important;
    width: 100% !important;
  }

  .navbar-nav .dropdown-submenu > .dropdown-menu {
    position: static !important;
    float: none !important;
    width: 100% !important;
    display: block !important;
    margin: 6px 0 10px 10px !important;
    padding: 6px 8px !important;
    background: #fdf5f4 !important;
    border: 1px solid #ebd9d8 !important;
    border-left: 3px solid #8A3324 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }

  .navbar-nav .dropdown-submenu > .dropdown-menu li a {
    font-size: 13px !important;
    color: #333333 !important;
    padding: 7px 12px !important;
    font-weight: 600 !important;
    display: block !important;
  }

  .navbar-nav .dropdown-submenu > .dropdown-menu li a:hover {
    color: #8A3324 !important;
    background: rgba(138, 51, 36, 0.12) !important;
    padding-left: 16px !important;
  }

  .navbar-nav .dropdown-menu li {
    margin-bottom: 4px !important;
  }

  .navbar-nav .dropdown-menu li a {
    color: #444444 !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    padding: 8px 14px !important;
    border-radius: 6px !important;
    display: block !important;
    transition: all 0.25s ease !important;
  }

  .navbar-nav .dropdown-menu li a:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, #8A3324 0%, #a83d2c 100%) !important;
    padding-left: 18px !important;
  }

  /* Get Free Quote Button inside Mobile Drawer */
  .header-get-a-quote {
    margin-top: 18px !important;
    width: 100% !important;
    padding-top: 10px !important;
  }

  .header-get-a-quote .btn {
    width: 100% !important;
    background: linear-gradient(135deg, #8A3324 0%, #a83d2c 100%) !important;
    border: 2px solid #ffb600 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 30px !important;
    padding: 12px 20px !important;
    text-align: center !important;
    box-shadow: 0 8px 20px rgba(138, 51, 36, 0.25) !important;
    font-size: 14px !important;
    letter-spacing: 0.5px !important;
  }
}

/* Desktop Submenu Flyout Styling */
@media (min-width: 992px) {
  .dropdown-submenu {
    position: relative;
  }

  .dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(138, 51, 36, 0.18);
    border: 1px solid #ebd9d8;
    background: #ffffff;
    padding: 8px;
    min-width: 210px;
    display: none;
  }

  .dropdown-submenu:hover > .dropdown-menu {
    display: block;
    animation: fadeInSubmenu 0.25s ease;
  }

  @keyframes fadeInSubmenu {
    from { opacity: 0; transform: translateX(8px); }
    to { opacity: 1; transform: translateX(0); }
  }
}

/* ==========================================================================
   14. TESTIMONIALS & SECTORS SECTION - ALL-MOBILE-SCREEN RESPONSIVE SYSTEM
   ========================================================================== */

/* Universal Testimonials & Quote Item Refinement */
.quote-item {
  background: #ffffff !important;
  padding: 32px 28px !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.07) !important;
  border: 1px solid rgba(138, 51, 36, 0.12) !important;
  position: relative !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
}

.quote-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 18px 40px rgba(138, 51, 36, 0.15) !important;
  border-color: rgba(138, 51, 36, 0.25) !important;
}

.quote-item .quote-text {
  display: block !important;
  position: relative !important;
  padding: 0 0 16px 45px !important;
  margin: 0 !important;
  font-size: 15.5px !important;
  line-height: 1.65 !important;
  color: #334155 !important;
  font-style: italic !important;
  background: transparent !important;
  font-family: inherit !important;
}

.quote-item .quote-text::before {
  content: "\f10d" !important;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  position: absolute !important;
  left: 0 !important;
  top: -2px !important;
  font-size: 26px !important;
  color: #ffb600 !important;
  line-height: 1 !important;
  opacity: 0.9 !important;
}

.quote-item-footer {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-left: 0 !important;
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px dashed rgba(138, 51, 36, 0.15) !important;
}

img.testimonial-thumb {
  width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  border: 2px solid #ffb600 !important;
  box-shadow: 0 4px 12px rgba(138, 51, 36, 0.18) !important;
  object-fit: cover !important;
  float: none !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.quote-item-info {
  padding-top: 0 !important;
  display: block !important;
  flex: 1 !important;
}

.quote-author {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #8A3324 !important;
  margin: 0 0 2px !important;
  line-height: 1.25 !important;
  display: block !important;
}

.quote-subtext {
  font-size: 12.5px !important;
  color: #64748b !important;
  font-weight: 500 !important;
  display: block !important;
  line-height: 1.3 !important;
}

/* Slick Carousel Indicators - Custom Pill Dots */
.testimonial-slide {
  position: relative !important;
  padding-bottom: 45px !important;
}

.testimonial-slide .slick-dots {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.testimonial-slide .slick-dots li {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block !important;
  height: 10px !important;
}

.testimonial-slide .slick-dots li button {
  font-size: 0 !important;
  line-height: 0 !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 10px !important;
  background: #cbd5e1 !important;
  border: none !important;
  padding: 0 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  outline: none !important;
  cursor: pointer !important;
}

.testimonial-slide .slick-dots li.slick-active button {
  width: 28px !important;
  background: linear-gradient(135deg, #8A3324 0%, #a83d2c 100%) !important;
  box-shadow: 0 3px 8px rgba(138, 51, 36, 0.35) !important;
}

.testimonial-slide .slick-dots li button:before {
  content: "" !important;
  display: none !important;
}

/* RESPONSIVE MEDIA QUERIES FOR ALL MOBILE SCREENS */

/* Tablet & Mobile Screens (max-width: 991px) */
@media (max-width: 991px) {
  section.content {
    padding: 45px 0 25px !important;
  }
}

/* Mobile Screens (max-width: 767px) */
@media (max-width: 767px) {
  section.content {
    padding: 35px 0 20px !important;
  }

  section.content .column-title {
    font-size: 20px !important;
    margin-bottom: 18px !important;
    position: relative !important;
    padding-bottom: 8px !important;
  }

  section.content .column-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 45px;
    height: 3px;
    background: #ffb600;
    border-radius: 2px;
  }

  .quote-item {
    padding: 22px 18px !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05) !important;
  }

  .quote-item .quote-text {
    font-size: 14px !important;
    line-height: 1.55 !important;
    padding: 0 0 12px 36px !important;
  }

  .quote-item .quote-text::before {
    font-size: 22px !important;
    top: -1px !important;
  }

  .quote-item-footer {
    gap: 12px !important;
    margin-top: 12px !important;
    padding-top: 12px !important;
  }

  img.testimonial-thumb {
    width: 48px !important;
    height: 48px !important;
  }

  .quote-author {
    font-size: 15px !important;
  }

  .quote-subtext {
    font-size: 12px !important;
  }

  .testimonial-slide {
    padding-bottom: 40px !important;
  }

  /* 3D Sector Revolving Stage Mobile Responsiveness */
  .sector-3d-stage {
    height: 190px !important;
    perspective: 700px !important;
    margin: 15px 0 !important;
    width: 100% !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #ffffff 0%, #faf4f3 100%) !important;
    border: 1px solid rgba(138, 51, 36, 0.12) !important;
  }

  .sector-3d-carousel {
    width: 115px !important;
    height: 95px !important;
  }

  .sector-3d-card {
    width: 115px !important;
    height: 95px !important;
    padding: 8px 6px !important;
    border-radius: 12px !important;
  }

  .sector-3d-card i {
    font-size: 22px !important;
    margin-bottom: 4px !important;
  }

  .sector-3d-card span {
    font-size: 9.5px !important;
    line-height: 1.2 !important;
  }

  .sector-3d-carousel { --orbit: 110px !important; }
}

/* Compact Mobile Screens (max-width: 575px) */
@media (max-width: 575px) {
  section.content {
    padding: 28px 0 15px !important;
  }

  .quote-item {
    padding: 18px 15px !important;
    border-radius: 12px !important;
  }

  .quote-item .quote-text {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    padding: 0 0 10px 30px !important;
  }

  .quote-item .quote-text::before {
    font-size: 18px !important;
    top: 0 !important;
  }

  img.testimonial-thumb {
    width: 44px !important;
    height: 44px !important;
  }

  .quote-author {
    font-size: 14px !important;
  }

  .quote-subtext {
    font-size: 11.5px !important;
  }

  /* 3D Carousel Compact Radius */
  .sector-3d-stage {
    height: 175px !important;
    perspective: 550px !important;
  }

  .sector-3d-carousel {
    width: 95px !important;
    height: 85px !important;
  }

  .sector-3d-card {
    width: 95px !important;
    height: 85px !important;
    padding: 6px 4px !important;
  }

  .sector-3d-card i {
    font-size: 18px !important;
    margin-bottom: 3px !important;
  }

  .sector-3d-card span {
    font-size: 8.5px !important;
  }

  .sector-3d-carousel { --orbit: 90px !important; }
}

/* Ultra Small Mobile Screens (max-width: 375px - e.g. iPhone SE, Fold) */
@media (max-width: 375px) {
  section.content .column-title {
    font-size: 18px !important;
    margin-bottom: 14px !important;
  }

  .quote-item {
    padding: 15px 12px !important;
    border-radius: 10px !important;
  }

  .quote-item .quote-text {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    padding: 0 0 8px 24px !important;
  }

  .quote-item .quote-text::before {
    font-size: 15px !important;
  }

  .quote-item-footer {
    gap: 10px !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
  }

  img.testimonial-thumb {
    width: 40px !important;
    height: 40px !important;
  }

  .quote-author {
    font-size: 13px !important;
  }

  .quote-subtext {
    font-size: 10.5px !important;
  }

  .sector-3d-stage {
    height: 160px !important;
    perspective: 450px !important;
  }

  .sector-3d-carousel {
    width: 85px !important;
    height: 75px !important;
  }

  .sector-3d-card {
    width: 85px !important;
    height: 75px !important;
    padding: 4px 2px !important;
  }

  .sector-3d-card i {
    font-size: 16px !important;
    margin-bottom: 2px !important;
  }

  .sector-3d-card span {
    font-size: 8px !important;
  }

  .sector-3d-carousel { --orbit: 75px !important; }
}

/* ==========================================================================
   16. HERO SECTION - MODERN GLASSMORPHIC & FULLY RESPONSIVE TYPOGRAPHY & BUTTONS
   ========================================================================== */

/* Universal Hero Slide Container Refinements */
.banner-carousel-item {
  position: relative !important;
  min-height: 520px !important;
  display: flex !important;
  align-items: center !important;
  background-size: cover !important;
  background-position: center center !important;
}

.banner-carousel-item::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.78) 0%, rgba(15, 23, 42, 0.65) 100%) !important;
  z-index: 1 !important;
}

.slider-content {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  padding: 60px 0 !important;
}

/* Glassmorphic Hero Eyebrow Badge */
.hero-badge {
  background: rgba(138, 51, 36, 0.85) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 182, 0, 0.5) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 18px !important;
  border-radius: 30px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
  margin-bottom: 16px !important;
}

/* Hero Titles Typography */
.slide-eyebrow {
  color: #ffb600 !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  font-size: clamp(16px, 2.2vw, 22px) !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

.slide-sub-title {
  font-size: clamp(24px, 4.5vw, 44px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
  margin-bottom: 16px !important;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.7) !important;
}

.slider-description {
  font-size: clamp(14px, 1.8vw, 16.5px) !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  margin-bottom: 28px !important;
  max-width: 780px !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}

/* Hero Action Buttons - Modern Glassmorphism & Solid Styles */
.hero-btn-group {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
}

.hero-btn-primary {
  background: linear-gradient(135deg, #8A3324 0%, #a83d2c 100%) !important;
  color: #ffffff !important;
  border: 2px solid #ffb600 !important;
  padding: 13px 28px !important;
  border-radius: 30px !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  letter-spacing: 0.4px !important;
  box-shadow: 0 8px 25px rgba(138, 51, 36, 0.4) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

.hero-btn-primary:hover {
  background: linear-gradient(135deg, #a83d2c 0%, #8A3324 100%) !important;
  border-color: #ffffff !important;
  transform: translateY(-4px) scale(1.03) !important;
  box-shadow: 0 14px 30px rgba(255, 182, 0, 0.45) !important;
  color: #ffffff !important;
}

.hero-btn-secondary {
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  padding: 13px 28px !important;
  border-radius: 30px !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  letter-spacing: 0.4px !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  margin-left: 0 !important;
}

.hero-btn-secondary:hover {
  background: #ffffff !important;
  color: #8A3324 !important;
  border-color: #ffffff !important;
  transform: translateY(-4px) scale(1.03) !important;
  box-shadow: 0 12px 28px rgba(255, 255, 255, 0.3) !important;
}

/* RESPONSIVE MEDIA QUERIES FOR HERO SECTION */

/* Tablet & Medium Screens (max-width: 991px) */
@media (max-width: 991px) {
  .banner-carousel-item {
    min-height: 440px !important;
  }

  .slider-content {
    padding: 40px 0 !important;
  }
}

/* Mobile Screens (max-width: 767px) */
@media (max-width: 767px) {
  .banner-carousel-item {
    min-height: 380px !important;
    height: auto !important;
    padding: 25px 0 !important;
  }

  .slider-content {
    padding: 20px 10px !important;
  }

  .hero-badge {
    padding: 6px 14px !important;
    font-size: 11.5px !important;
    margin-bottom: 12px !important;
  }

  .slide-eyebrow {
    font-size: 14px !important;
    margin-bottom: 6px !important;
  }

  .slide-sub-title {
    font-size: 22px !important;
    line-height: 1.25 !important;
    margin-bottom: 10px !important;
  }

  .slider-description {
    font-size: 13px !important;
    line-height: 1.45 !important;
    margin-bottom: 18px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .hero-btn-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
    width: 100% !important;
  }

  .hero-btn-primary,
  .hero-btn-secondary {
    flex: 1 1 auto !important;
    min-width: 130px !important;
    padding: 10px 16px !important;
    font-size: 12.5px !important;
    border-radius: 25px !important;
  }
}

/* Ultra Small Mobile Screens (max-width: 380px) */
@media (max-width: 380px) {
  .banner-carousel-item {
    min-height: 340px !important;
  }

  .hero-badge {
    font-size: 10.5px !important;
    padding: 5px 12px !important;
  }

  .slide-sub-title {
    font-size: 19px !important;
  }

  .slider-description {
    font-size: 12px !important;
  }

  .hero-btn-primary,
  .hero-btn-secondary {
    width: 100% !important;
    font-size: 12px !important;
    padding: 9px 14px !important;
  }
}


/* ==========================================================================
   15. MODERN HIGH-PERFORMANCE VERTICAL SCROLL ANIMATIONS & INTERACTION SYSTEM
   ========================================================================== */

/* Top Scroll Progress Indicator Bar */
#ekors-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3.5px;
  background: linear-gradient(90deg, #8A3324 0%, #ffb600 50%, #a83d2c 100%);
  z-index: 99999;
  box-shadow: 0 0 10px rgba(255, 182, 0, 0.7);
  transition: width 0.1s ease-out;
  pointer-events: none;
}

/* Base Scroll Reveal Element States */
.ekors-animate {
  opacity: 0;
  will-change: transform, opacity;
  transition-property: transform, opacity, filter;
  transition-duration: 0.75s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Scroll Animation Types (Initial Hidden State) */
.ekors-animate[data-animate="fade-up"],
.ekors-fade-up {
  transform: translate3d(0, 40px, 0);
}

.ekors-animate[data-animate="fade-down"],
.ekors-fade-down {
  transform: translate3d(0, -40px, 0);
}

.ekors-animate[data-animate="fade-left"],
.ekors-fade-left {
  transform: translate3d(-50px, 0, 0);
}

.ekors-animate[data-animate="fade-right"],
.ekors-fade-right {
  transform: translate3d(50px, 0, 0);
}

.ekors-animate[data-animate="scale-up"],
.ekors-scale-up {
  transform: scale3d(0.9, 0.9, 1);
}

.ekors-animate[data-animate="flip-up"],
.ekors-flip-up {
  transform: perspective(800px) rotateX(25deg) translate3d(0, 30px, 0);
}

/* Visible Revealed State (Activated by Observer) */
.ekors-animate.animated {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0deg) !important;
}

/* Stagger Delays for Grid Elements */
.ekors-animate[data-delay="100"], .delay-100 { transition-delay: 0.1s; }
.ekors-animate[data-delay="150"], .delay-150 { transition-delay: 0.15s; }
.ekors-animate[data-delay="200"], .delay-200 { transition-delay: 0.2s; }
.ekors-animate[data-delay="250"], .delay-250 { transition-delay: 0.25s; }
.ekors-animate[data-delay="300"], .delay-300 { transition-delay: 0.3s; }
.ekors-animate[data-delay="400"], .delay-400 { transition-delay: 0.4s; }
.ekors-animate[data-delay="500"], .delay-500 { transition-delay: 0.5s; }

/* Enhanced Back to Top Button Styling */
#back-to-top {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 9999;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #8A3324 0%, #a83d2c 100%) !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 8px 25px rgba(138, 51, 36, 0.4), 0 0 0 3px rgba(255, 182, 0, 0.3) !important;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: none !important;
  opacity: 0;
  visibility: hidden;
}

#back-to-top.show {
  opacity: 1 !important;
  visibility: visible !important;
}

#back-to-top:hover {
  transform: translateY(-5px) scale(1.1) !important;
  box-shadow: 0 14px 30px rgba(138, 51, 36, 0.5), 0 0 0 5px rgba(255, 182, 0, 0.6) !important;
  background: linear-gradient(135deg, #a83d2c 0%, #8A3324 100%) !important;
}

#back-to-top i {
  font-size: 18px;
  transition: transform 0.3s ease;
}

#back-to-top:hover i {
  transform: translateY(-3px);
}

/* Glassmorphic Header Effect on Scroll */
.header-one.header-scrolled .site-navigation,
.header-two.header-scrolled .site-navigation {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

/* Accessibility - Honor Reduced Motion Preferences */
@media (prefers-reduced-motion: reduce) {
  .ekors-animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   18. ABOUT US & CORE VALUES - LEFT SCROLLABLE & MODERN UI/UX SYSTEM
   ========================================================================== */

/* Left Scrollable Container for Desktop */
@media (min-width: 992px) {
  .left-scroll-container {
    max-height: 540px;
    overflow-y: auto;
    padding-right: 14px;
    scrollbar-width: thin;
    scrollbar-color: #8A3324 #f1f5f9;
  }

  .left-scroll-container::-webkit-scrollbar {
    width: 6px;
  }

  .left-scroll-container::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
  }

  .left-scroll-container::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #8A3324 0%, #a83d2c 100%);
    border-radius: 10px;
  }

  .left-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #ffb600;
  }
}

/* Glassmorphism About Us Intro Card */
.ts-intro {
  background: #ffffff !important;
  padding: 30px 28px !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
  border: 1px solid rgba(138, 51, 36, 0.12) !important;
  border-left: 5px solid #8A3324 !important;
  position: relative !important;
  transition: all 0.35s ease !important;
}

.ts-intro .into-title {
  color: #8A3324 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}

.ts-intro .into-sub-title {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.3 !important;
  margin-bottom: 12px !important;
}

.ts-intro p {
  color: #475569 !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  margin-bottom: 0 !important;
}

/* Feature Service Cards UI Upgrade - Single Vertical Full Info Cards */
.feature-vertical-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 15px !important;
}

.ts-service-box.full-info-card {
  padding: 18px 20px !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  border: 1px solid rgba(138, 51, 36, 0.12) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05) !important;
  align-items: flex-start !important;
  gap: 16px !important;
  margin-bottom: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ts-service-box.full-info-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 32px rgba(138, 51, 36, 0.15) !important;
  border-color: rgba(138, 51, 36, 0.3) !important;
  background: #fffdfd !important;
}

.ts-service-box.full-info-card .ts-service-icon {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #fdf2f1 0%, #fce8e6 100%) !important;
  border: 1px solid rgba(138, 51, 36, 0.15) !important;
  color: #8A3324 !important;
  font-size: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 10px rgba(138, 51, 36, 0.1) !important;
  transition: all 0.3s ease !important;
  margin-top: 2px !important;
}

.ts-service-box.full-info-card:hover .ts-service-icon {
  background: linear-gradient(135deg, #8A3324 0%, #a83d2c 100%) !important;
  color: #ffffff !important;
  border-color: #ffb600 !important;
  transform: scale(1.08) !important;
}

.ts-service-box.full-info-card .ts-service-box-content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: block !important;
}

.ts-service-box.full-info-card .service-box-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-bottom: 6px !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  display: block !important;
}

.ts-service-box.full-info-card .service-box-desc {
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: #475569 !important;
  margin: 0 !important;
  font-weight: 400 !important;
}

@media (max-width: 575px) {
  .ts-service-box.full-info-card {
    padding: 15px 14px !important;
    gap: 12px !important;
  }

  .ts-service-box.full-info-card .ts-service-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
  }

  .ts-service-box.full-info-card .service-box-title {
    font-size: 14.5px !important;
  }

  .ts-service-box.full-info-card .service-box-desc {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }
}

/* Our Core Values Accordion Glassmorphic Polish */
#our-values-accordion .card {
  border: 1px solid rgba(138, 51, 36, 0.15) !important;
  border-radius: 12px !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.3s ease !important;
  background: #ffffff !important;
}

#our-values-accordion .card:hover {
  border-color: rgba(138, 51, 36, 0.35) !important;
  box-shadow: 0 8px 24px rgba(138, 51, 36, 0.12) !important;
}

#our-values-accordion .card-header button {
  background: #ffffff !important;
  color: #1e293b !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 16px 20px !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

#our-values-accordion .card-header button[aria-expanded="true"] {
  background: linear-gradient(135deg, #8A3324 0%, #a83d2c 100%) !important;
  color: #ffffff !important;
}

#our-values-accordion .card-header button[aria-expanded="true"] i {
  color: #ffb600 !important;
}

#our-values-accordion .card-body {
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: #475569 !important;
  padding: 16px 20px !important;
  background: #faf7f7 !important;
  border-top: 1px dashed rgba(138, 51, 36, 0.15) !important;
}

/* Global Mobile Touch & Responsive Safeguards */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

/* ==========================================
   HEADER ACTIVE & HOVER NAV LINK UNDERLINE BAR
   ========================================== */
.site-navigation .navbar-nav > .nav-item {
  position: relative !important;
}

.site-navigation .navbar-nav > .nav-item > .nav-link {
  position: relative !important;
  color: #1e293b !important;
  font-weight: 700 !important;
  transition: color 0.3s ease !important;
}

.site-navigation .navbar-nav > .nav-item > .nav-link::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0px !important;
  left: 50% !important;
  width: 0 !important;
  height: 3.5px !important;
  /* Bootstrap styles .dropdown-toggle::after as the caret triangle using
     border-left/right: .3em solid transparent. This underline reuses the same
     ::after, so without resetting the border those transparent borders gave the
     box ~7px of width and the background painted it -- a permanent little dash
     under Projects and Services even when they were not active. */
  border: 0 !important;
  margin: 0 !important;
  vertical-align: baseline !important;
  background-color: #8A3324 !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 6px rgba(138, 51, 36, 0.4) !important;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), left 0.3s ease !important;
  transform: translateX(-50%) !important;
  display: block !important;
}

/* Active & Hover Underline Expansion */
.site-navigation .navbar-nav > .nav-item:hover > .nav-link::after,
.site-navigation .navbar-nav > .nav-item.active > .nav-link::after {
  width: 85% !important;
}

/* Active & Hover Text Highlight */
.site-navigation .navbar-nav > .nav-item:hover > .nav-link,
.site-navigation .navbar-nav > .nav-item.active > .nav-link {
  color: #8A3324 !important;
  font-weight: 800 !important;
}

@media (max-width: 991px) {
  .site-navigation .navbar-nav > .nav-item > .nav-link::after {
    bottom: -2px !important;
    left: 0 !important;
    transform: none !important;
  }
  .site-navigation .navbar-nav > .nav-item:hover > .nav-link::after,
  .site-navigation .navbar-nav > .nav-item.active > .nav-link::after {
    width: 100% !important;
  }
}

/* GLOBAL HIDE BREADCRUMBS PATH ON ALL PAGES */
#breadcrumb-wrapper,
.breadcrumb,
.breadcrumb-item,
nav[aria-label="breadcrumb"],
.banner-title .breadcrumb {
  display: none !important;
}

/* ==========================================
   GET FREE QUOTE MODAL POPUP STYLES
   ========================================== */
.quote-modal-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(15, 23, 42, 0.75) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px 15px !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

.quote-modal-backdrop.active {
  opacity: 1 !important;
  visibility: visible !important;
}

.quote-modal-dialog {
  width: 100% !important;
  max-width: 550px !important;
  max-height: 92vh !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 25px 50px -12px rgba(138, 51, 36, 0.35) !important;
  border: 2px solid rgba(138, 51, 36, 0.2) !important;
  transform: scale(0.85) translateY(20px);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  overflow-y: auto !important;
  margin: auto !important;
}

.quote-modal-backdrop.active .quote-modal-dialog {
  transform: scale(1) translateY(0) !important;
}

.quote-modal-content {
  padding: 22px 24px !important;
  position: relative !important;
}

.quote-modal-close {
  position: absolute !important;
  top: 14px !important;
  right: 16px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: #f1f5f9 !important;
  border: none !important;
  font-size: 22px !important;
  color: #475569 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  line-height: 1 !important;
}

.quote-modal-close:hover {
  background: #8A3324 !important;
  color: #ffffff !important;
  transform: rotate(90deg) !important;
}

.quote-badge {
  display: inline-block !important;
  background: rgba(138, 51, 36, 0.1) !important;
  color: #8A3324 !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  margin-bottom: 6px !important;
  text-transform: uppercase !important;
}

.quote-modal-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  margin-bottom: 3px !important;
}

.quote-modal-subtitle {
  font-size: 12.5px !important;
  color: #64748b !important;
  margin-bottom: 14px !important;
}

.quote-modal-content label {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  margin-bottom: 4px !important;
}

.quote-modal-content .form-control {
  border-radius: 8px !important;
  border: 1.5px solid #cbd5e1 !important;
  padding: 8px 12px !important;
  font-size: 13.5px !important;
  height: 38px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.quote-modal-content textarea.form-control {
  height: 48px !important;
  min-height: 48px !important;
  resize: vertical !important;
}

.quote-modal-content .form-control:focus {
  border-color: #8A3324 !important;
  box-shadow: 0 0 0 3px rgba(138, 51, 36, 0.15) !important;
  outline: none !important;
}

.quote-submit-btn {
  background: linear-gradient(135deg, #8A3324 0%, #6e281b 100%) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  padding: 11px !important;
  border-radius: 10px !important;
  border: none !important;
  box-shadow: 0 8px 16px rgba(138, 51, 36, 0.25) !important;
  transition: all 0.3s ease !important;
  margin-top: 4px !important;
}

.quote-submit-btn:hover {
  background: linear-gradient(135deg, #a03c2b 0%, #8A3324 100%) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 24px rgba(138, 51, 36, 0.35) !important;
}

/* Free Quote Modal Math Captcha Styling */
.quote-modal-content .math-captcha-container {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin-bottom: 12px !important;
  background: #f8fafc !important;
  border: 1.5px dashed #cbd5e1 !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
}

.quote-modal-content .math-captcha-label {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin-bottom: 8px !important;
}

.quote-modal-content .math-captcha-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  visibility: visible !important;
}

.quote-modal-content .math-captcha-equation {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #8A3324 !important;
  border: 2px solid #8A3324 !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: 2px !important;
  height: 42px !important;
  min-width: 105px !important;
  user-select: text !important;
  box-shadow: 0 2px 6px rgba(138,51,36,0.25) !important;
  visibility: visible !important;
}

.quote-modal-content .math-captcha-equation * {
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 18px !important;
}

.quote-modal-content .math-captcha-input {
  width: 100px !important;
  height: 42px !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #0f172a !important;
  border: 2px solid #cbd5e1 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  padding: 6px 10px !important;
  visibility: visible !important;
  outline: none !important;
}

.quote-modal-content .math-captcha-refresh {
  width: 42px !important;
  height: 42px !important;
  border: 2px solid #cbd5e1 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #8A3324 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 16px !important;
  transition: all 0.25s ease !important;
  visibility: visible !important;
}

.quote-modal-content .math-captcha-refresh:hover {
  background: #f1f5f9 !important;
  color: #8A3324 !important;
  border-color: #8A3324 !important;
}

@media (max-width: 575px) {
  .quote-modal-content {
    padding: 22px 18px !important;
  }
  .quote-modal-title {
    font-size: 19px !important;
  }
}

/* ==========================================
   CONSISTENT HIGH-IMPACT HERO BANNERS FOR ALL SUBPAGES
   ========================================== */
.banner-area {
  position: relative !important;
  min-height: 220px !important;
  height: 240px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  /* No gap and no drop-shadow under the banner. The 35px margin was painted by
     the page wrapper (white) while the section beneath varies per page
     (#fcf4f3 on service pages, dark on Clients, tinted on About), so every
     sub-page showed a mismatched strip -- and the shadow darkened it further.
     Each first section already carries its own top padding. */
  margin-bottom: 0 !important;
  border-bottom: 4px solid #8A3324 !important;
  box-shadow: none !important;
}

.banner-area::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.82) 0%, rgba(138, 51, 36, 0.75) 100%) !important;
  z-index: 1 !important;
}

.banner-area .banner-text {
  position: relative !important;
  z-index: 2 !important;
  top: 0 !important;
  transform: none !important;
  padding: 20px 15px !important;
  width: 100% !important;
}

.banner-area .banner-title {
  color: #ffffff !important;
  font-size: 34px !important;
  font-weight: 900 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  .banner-area {
    min-height: 170px !important;
    height: 180px !important;
  }
  .banner-area .banner-title {
    font-size: 24px !important;
  }
}

/* ==========================================
   SLEEK THIN SEPARATION LINE AT TOP OF FOOTER
   ========================================== */
.ekors-footer {
  position: relative !important;
  border-top: 1px solid rgba(138, 51, 36, 0.2) !important;
}

.ekors-footer::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background: linear-gradient(90deg, #8A3324 0%, #fbbf24 50%, #8A3324 100%) !important;
  opacity: 0.85 !important;
}





/* =========================================================================
   9c. SECTOR STAGE - RESPONSIVE CORRECTIONS FOR THE ENHANCED COMPOSITION
   The enhanced desktop centrepiece (230x360 arrester, 225px cloud) does not
   fit the short mobile stages, which also clip with overflow:hidden. Scale the
   whole piece per breakpoint. Placed at the end of the file so it wins over
   the earlier mobile blocks.
   ========================================================================= */

@media (max-width: 991px) {
  .sector-3d-stage {
    height: 300px !important;
    perspective: 760px !important;
    perspective-origin: 50% 46% !important;
  }

  .sector-center-arrester {
    width: 165px !important;
    height: 236px !important;
  }

  .sector-thunder-cloud {
    width: 152px !important;
    margin-bottom: -12px !important;
  }

  .sector-center-rod-svg {
    height: 150px !important;
    margin-top: -35px !important;
  }

  .sector-center-base-ring {
    width: 96px !important;
    height: 22px !important;
  }

  .sector-center-arrester::before,
  .sector-center-arrester::after {
    width: 104px !important;
    height: 104px !important;
    margin-left: -52px !important;
  }

  .sector-3d-stage::after {
    width: 380px !important;
    height: 230px !important;
    margin: -115px 0 0 -190px !important;
  }

  .sector-3d-stage::before {
    width: 420px !important;
    height: 220px !important;
    margin: -110px 0 0 -210px !important;
  }

  @keyframes rotate3dCarousel {
    0%   { transform: translateY(42px) rotateX(-6deg) rotateY(0deg); }
    100% { transform: translateY(42px) rotateX(-6deg) rotateY(360deg); }
  }
}

@media (max-width: 575px) {
  .sector-3d-stage {
    height: 268px !important;
    perspective: 600px !important;
  }

  .sector-center-arrester {
    width: 145px !important;
    height: 210px !important;
  }

  .sector-thunder-cloud {
    width: 132px !important;
    margin-bottom: -10px !important;
  }

  .sector-center-rod-svg {
    height: 132px !important;
    margin-top: -31px !important;
  }

  .sector-center-base-ring {
    width: 84px !important;
    height: 19px !important;
  }

  @keyframes rotate3dCarousel {
    0%   { transform: translateY(36px) rotateX(-6deg) rotateY(0deg); }
    100% { transform: translateY(36px) rotateX(-6deg) rotateY(360deg); }
  }
}

@media (max-width: 375px) {
  .sector-3d-stage {
    height: 244px !important;
    perspective: 500px !important;
  }

  .sector-center-arrester {
    width: 130px !important;
    height: 190px !important;
  }

  .sector-thunder-cloud {
    width: 118px !important;
  }

  .sector-center-rod-svg {
    height: 118px !important;
    margin-top: -28px !important;
  }

  @keyframes rotate3dCarousel {
    0%   { transform: translateY(31px) rotateX(-6deg) rotateY(0deg); }
    100% { transform: translateY(31px) rotateX(-6deg) rotateY(360deg); }
  }
}

/* =========================================================================
   Government client cards — interleaved between the six sector cards on
   the same 3D orbit (12 cards, 30deg apart). Hidden below 992px where the
   compact orbit radius only has room for the original six.
   ========================================================================= */
.sector-3d-card.card-g1 { --angle: 30deg; }
.sector-3d-card.card-g2 { --angle: 90deg; }
.sector-3d-card.card-g3 { --angle: 150deg; }
.sector-3d-card.card-g4 { --angle: 210deg; }
.sector-3d-card.card-g5 { --angle: 270deg; }
.sector-3d-card.card-g6 { --angle: 330deg; }

.sector-govt-card .sector-client-logo {
  max-height: 52px;
  max-width: 86%;
}

/* Staggered entrance, following card-1..card-6 */
.sector-3d-stage.is-in-view .sector-3d-card.card-g1 { animation-delay: 0.59s; }
.sector-3d-stage.is-in-view .sector-3d-card.card-g2 { animation-delay: 0.68s; }
.sector-3d-stage.is-in-view .sector-3d-card.card-g3 { animation-delay: 0.77s; }
.sector-3d-stage.is-in-view .sector-3d-card.card-g4 { animation-delay: 0.86s; }
.sector-3d-stage.is-in-view .sector-3d-card.card-g5 { animation-delay: 0.95s; }
.sector-3d-stage.is-in-view .sector-3d-card.card-g6 { animation-delay: 1.04s; }

@media (max-width: 991px) {
  .sector-3d-card.sector-govt-card {
    display: none !important;
  }
}