/* ============================================================
   hero-effects.css — Bespoke Ultra-Smooth Transitions for index.html
   - Retains 100% original site width & container margins (no widening)
   - Protects and guarantees 100% clarity for in-image letters/titles
   - True 60fps simultaneous cinematic cross-dissolve (zero jump)
   - Anchored at left-bottom so text never crops, blurs, or leaves screen
   - Elegant gold-green timer line and responsive hero-card spacing
   ============================================================ */

/* ── 1. HERO BASE & BANNER SIZING ── */
.hero {
  position: relative;
  width: 100%;
  height: clamp(580px, 40vw, 700px) !important;
  background: #0C3A1D;
  overflow: hidden;
  box-sizing: border-box;
}

.hero .carousel,
.hero .carousel-inner,
.hero .carousel-item {
  height: 100% !important;
  width: 100% !important;
}

.hero .carousel-item {
  position: relative;
  overflow: hidden;
  background: #0C3A1D;
}

/* Ground the image at left-bottom */
.hero .carousel-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: left bottom !important;
  transform-origin: left bottom !important;
  display: block !important;
  will-change: transform, opacity, filter;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* ── 2. TRUE BUTTER-SMOOTH 60FPS SIMULTANEOUS CROSS-FADE ── */
.hero #heroCarousel.carousel-fade .carousel-item {
  opacity: 0 !important;
  transition: opacity 1.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
  transform: none !important;
  z-index: 1;
  pointer-events: none;
}

.hero #heroCarousel.carousel-fade .carousel-item.active {
  opacity: 1 !important;
  z-index: 2;
  pointer-events: auto;
}

.hero #heroCarousel.carousel-fade .carousel-item-next.carousel-item-left,
.hero #heroCarousel.carousel-fade .carousel-item-prev.carousel-item-right {
  opacity: 1 !important;
  z-index: 3;
}

.hero #heroCarousel.carousel-fade .active.carousel-item-left,
.hero #heroCarousel.carousel-fade .active.carousel-item-right {
  opacity: 0 !important;
  z-index: 1;
  transition: opacity 1.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* ── 3. BESPOKE CORPORATE CINEMA MOTIONS (ZERO TEXT CUTOFF / ZERO BLUR) ──
   All motions start immediately upon entering the transition queue
   and are anchored to left-bottom so text remains razor-sharp & legible. */

/* ── SLIDE 1: Majestic Ken Burns Scale (Greenhouse Infra) ── */
.carousel-item.slide-trans-1.active img,
.carousel-item.slide-trans-1.carousel-item-next img,
.carousel-item.slide-trans-1.carousel-item-prev img {
  animation: trans1KenBurns 6.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes trans1KenBurns {
  0%   { transform: scale(1.0); }
  100% { transform: scale(1.035); }
}

/* ── SLIDE 2: Precision Perspective Drift (Soilless Cultivation) ── */
.carousel-item.slide-trans-2.active img,
.carousel-item.slide-trans-2.carousel-item-next img,
.carousel-item.slide-trans-2.carousel-item-prev img {
  animation: trans2Pan 6.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes trans2Pan {
  0%   { transform: scale(1.025); }
  100% { transform: scale(1.0); }
}

/* ── SLIDE 3: High-Tech Biotech Clarity (Tissue Culture) ── */
.carousel-item.slide-trans-3.active img,
.carousel-item.slide-trans-3.carousel-item-next img,
.carousel-item.slide-trans-3.carousel-item-prev img {
  animation: trans3Clarity 6.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes trans3Clarity {
  0%   { transform: scale(1.03); filter: brightness(1.03); }
  100% { transform: scale(1.0);  filter: brightness(1.0); }
}

/* ── SLIDE 4: Solar Skylight Sheen (Green Energy) ── */
.carousel-item.slide-trans-4.active img,
.carousel-item.slide-trans-4.carousel-item-next img,
.carousel-item.slide-trans-4.carousel-item-prev img {
  animation: trans4Solar 6.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes trans4Solar {
  0%   { transform: scale(1.0); }
  100% { transform: scale(1.035); }
}
/* Delicate top-right sky sheen (never covers bottom-left text) */
.carousel-item.slide-trans-4::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  height: 55%;
  background: radial-gradient(circle at 80% 20%, rgba(255, 235, 150, 0.28) 0%, transparent 70%);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
}
.carousel-item.slide-trans-4.active::after,
.carousel-item.slide-trans-4.carousel-item-next::after {
  animation: trans4Sheen 3.2s ease-out forwards;
}
@keyframes trans4Sheen {
  0%   { opacity: 0; transform: scale(0.95); }
  35%  { opacity: 0.65; }
  100% { opacity: 0; transform: scale(1.1); }
}

/* ── SLIDE 5: Gentle Aerial Elevation (Organic Farming) ── */
.carousel-item.slide-trans-5.active img,
.carousel-item.slide-trans-5.carousel-item-next img,
.carousel-item.slide-trans-5.carousel-item-prev img {
  animation: trans5Elevate 6.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes trans5Elevate {
  0%   { transform: scale(1.03); }
  100% { transform: scale(1.0); }
}

/* ── SLIDE 6: Morning Dew Vitality (Hi-Tech Nursery) ── */
.carousel-item.slide-trans-6.active img,
.carousel-item.slide-trans-6.carousel-item-next img,
.carousel-item.slide-trans-6.carousel-item-prev img {
  animation: trans6Bloom 6.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes trans6Bloom {
  0%   { transform: scale(1.0);  filter: saturate(1.06) brightness(1.03); }
  100% { transform: scale(1.03); filter: saturate(1.0)  brightness(1.0); }
}

/* ── SLIDE 7: Enterprise Grand Survey (Polyhouse Infrastructure) ── */
.carousel-item.slide-trans-7.active img,
.carousel-item.slide-trans-7.carousel-item-next img,
.carousel-item.slide-trans-7.carousel-item-prev img {
  animation: trans7Survey 6.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes trans7Survey {
  0%   { transform: scale(1.035); }
  100% { transform: scale(1.0); }
}

/* ── 4. HERO CARD SPACING — GUARANTEES BANNER LETTERS ARE NEVER COVERED ── */
/* Ensure the hero-card sits comfortably on the right without overlapping
   the banner's bottom-left headline and tagline */
@media (min-width: 992px) and (max-width: 1199px) {
  .hero {
    height: 480px !important;
  }
}

@media (max-width: 991px) {
  .hero {
    height: auto !important;
    background: #0C3A1D !important;
    padding-bottom: 28px !important;
    position: relative !important;
  }

  /* Spacious, majestic slider container on mobile/tablet (never a squeezed ribbon) */
  .hero .carousel {
    height: clamp(260px, 64vw, 360px) !important;
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
  }
  .hero .carousel-inner,
  .hero .carousel-item {
    height: 100% !important;
    width: 100% !important;
  }
  .hero .carousel-item img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: left bottom !important;
    transform-origin: left bottom !important;
    display: block !important;
  }

  /* Floating Hero Card on Mobile: elegant slight overlap over slider, zero awkward void */
  .hero-card {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    margin: -22px 16px 0 !important;
    width: calc(100% - 32px) !important;
    max-width: 520px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28) !important;
    z-index: 10 !important;
  }

  /* Subtle, slim wave on mobile so text is never covered */
  .hero-liquid-wave {
    height: 22px !important;
    opacity: 0.55 !important;
  }
}


/* ── 5. ELEGANT GOLDEN-GREEN TIMER PROGRESS LINE ── */
.hero-slider-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #E0A526 0%, #FCD34D 50%, #27843F 100%);
  z-index: 6;
  box-shadow: 0 0 8px rgba(224, 165, 38, 0.6);
  pointer-events: none;
}
.hero-slider-progress-bar.is-filling {
  animation: heroBarFill 5.5s linear forwards;
}
.hero:hover .hero-slider-progress-bar.is-filling,
.hero:hover .hero-glass-sweep::after {
  animation-play-state: paused !important;
}
@keyframes heroBarFill {
  0% { width: 0%; }
  100% { width: 100%; }
}


/* ── 6. INNOVATION: AUTOMATIC GLASSPHORMISM WAVE & LIGHT-SWEEP (BUSINESS VERTICALS DNA) ── */

/* 1. Full-Slider Automatic Prismatic Glass Light-Sweep */
:root {
  --hero-slide-duration: 5.5s;
}

.hero-glass-sweep {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
  overflow: hidden;
}
.hero-glass-sweep::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -90%;
  width: 55%;
  height: 220%;
  background: linear-gradient(
    102deg,
    transparent 15%,
    rgba(255, 255, 255, 0.04) 30%,
    rgba(255, 255, 255, 0.32) 48%,
    rgba(224, 165, 38, 0.42) 51%,
    rgba(255, 255, 255, 0.26) 54%,
    rgba(39, 132, 63, 0.15) 65%,
    transparent 82%
  );
  transform: rotate(9deg);
  filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  will-change: transform, left, opacity;
}
.hero-glass-sweep.sweep-active::after {
  animation: heroGlassLightSweep var(--hero-slide-duration, 5.5s) linear forwards;
}
@keyframes heroGlassLightSweep {
  0% {
    left: -90%;
    opacity: 0;
  }
  12% {
    opacity: 0.90;
  }
  88% {
    opacity: 0.90;
  }
  100% {
    left: 145%;
    opacity: 0;
  }
}

/* 2. Undulating Liquid Glassmorphism Wave Crest */
.hero-liquid-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 48px;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}
.hero-liquid-wave svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
  display: block;
}
.hero-liquid-wave .wave-path-back {
  fill: rgba(12, 58, 29, 0.35);
  animation: waveFloatBack 12s ease-in-out infinite alternate;
}
.hero-liquid-wave .wave-path-front {
  fill: url(#glassWaveGrad);
  filter: drop-shadow(0 -4px 10px rgba(255, 255, 255, 0.18));
  animation: waveFloatFront 8s ease-in-out infinite alternate;
}
@keyframes waveFloatFront {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes waveFloatBack {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* 3. Frosted Glass Live Counter (Removed per user request) */
.hero-glass-counter {
  display: none !important;
}

/* ── 7. PROFESSIONAL HTML TYPOGRAPHY & ANIMATED CAPTIONS (OVER CLEAN 4K IMAGES) ── */

/* Focused ambient vignette: guarantees razor-sharp 100% legibility in the designated left zone
   while leaving the photo's center and right pristine & brilliant */
.carousel-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(6, 24, 12, 0.28) 0%,
    rgba(6, 24, 12, 0.16) 26%,
    rgba(6, 24, 12, 0.04) 45%,
    transparent 58%
  ),
  linear-gradient(
    180deg,
    rgba(6, 24, 12, 0.10) 0%,
    transparent 18%,
    transparent 72%,
    rgba(6, 24, 12, 0.18) 100%
  );
  z-index: 2;
  pointer-events: none;
}

/* THE CAPTION CONTAINER:
   Anchored precisely in the designated RED ZONE (lower-middle left, exactly where b1.jpg-b7.jpg had text)
   leaving ample clearance above the bottom wave and below the left nav chevron */
.hero-slide-caption {
  position: absolute;
  left: clamp(80px, 6vw, 105px) !important;
  bottom: clamp(140px, 16vw, 210px) !important;
  z-index: 5;
  max-width: min(620px, 50vw);
  pointer-events: none;
  box-sizing: border-box;
}

/* Glassmorphic Category Badge */
.hsc-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(135deg, rgba(21, 128, 61, 0.95) 0%, rgba(13, 84, 38, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  margin-bottom: 12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  will-change: transform, opacity;
}
.hsc-badge i {
  color: #FCD34D;
  font-size: 12px;
}
.hsc-badge-biotech {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.95) 0%, rgba(3, 105, 161, 0.98) 100%) !important;
}
.hsc-badge-energy {
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.95) 0%, rgba(15, 118, 110, 0.98) 100%) !important;
}
.hsc-badge-organic {
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.95) 0%, rgba(180, 83, 9, 0.98) 100%) !important;
}

/* Modern High-Impact Editorial Heading */
.hsc-title {
  font-family: inherit;
  font-size: clamp(28px, 3.2vw, 44px) !important;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.7), 0 16px 36px rgba(0, 0, 0, 0.4);
  will-change: transform, opacity, filter;
}
.hsc-title .hsc-reg {
  font-size: 0.52em;
  vertical-align: super;
  opacity: 0.9;
  font-weight: 700;
  color: #FCD34D;
}

/* Professional Subtitle Tagline Pill */
.hsc-sub {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0 0;
  padding: 6px 14px;
  background: rgba(12, 45, 22, 0.70);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-radius: 8px;
  border-left: 3px solid #FCD34D;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.95);
  font-size: clamp(12px, 1.05vw, 14px);
  font-weight: 600;
  letter-spacing: 0.3px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  will-change: transform, opacity;
}
.hsc-sub i {
  color: #22C55E;
  font-size: 13px;
}

/* ── STAGGERED ENTRANCE ANIMATIONS ── */
.carousel-item.active .hsc-badge,
.carousel-item-next.carousel-item-left .hsc-badge {
  animation: hscBadgeIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
}
.carousel-item.active .hsc-title,
.carousel-item-next.carousel-item-left .hsc-title {
  animation: hscTitleIn 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.20s both;
}
.carousel-item.active .hsc-sub,
.carousel-item-next.carousel-item-left .hsc-sub {
  animation: hscSubIn 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.34s both;
}

@keyframes hscBadgeIn {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1.0);
  }
}

@keyframes hscTitleIn {
  0% {
    opacity: 0;
    transform: translateY(22px);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
  }
}

@keyframes hscSubIn {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── 8. BESPOKE FROSTED GLASS NAVIGATION DISCS ── */
.hero .carousel-control-prev,
.hero .carousel-control-next {
  width: 46px !important;
  height: 46px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  opacity: 1 !important;
  z-index: 8 !important;
  border-radius: 50% !important;
  background: rgba(12, 58, 29, 0.55) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
  transition: all 0.25s ease !important;
}
.hero .carousel-control-prev {
  left: 20px !important;
}
.hero .carousel-control-next {
  right: 20px !important;
}
.hero .carousel-control-prev:hover,
.hero .carousel-control-next:hover {
  background: #14542c !important;
  border-color: #FCD34D !important;
  transform: translateY(-50%) scale(1.10) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), 0 0 12px rgba(252, 211, 77, 0.35) !important;
}
.hero .carousel-control-prev-icon,
.hero .carousel-control-next-icon {
  width: 18px !important;
  height: 18px !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)) !important;
}

/* ── 9. EXECUTIVE HERO CARD ARCHITECTURAL REDESIGN ── */
.hero-card {
  background: rgba(255, 255, 255, 0.96) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  border-top: 4px solid #15803d !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 60px -10px rgba(12, 58, 29, 0.25), 0 10px 25px -5px rgba(0, 0, 0, 0.10) !important;
  padding: 24px 22px !important;
  z-index: 10 !important;
  box-sizing: border-box !important;
}

/* Desktop & Large Screens (>= 992px): Anchored prominently on the right side with 1-time page load entrance + subtle breathing */
@media (min-width: 1200px) {
  .hero-card {
    position: absolute !important;
    right: max(calc((100% - 1140px) / 2 + 15px), 80px) !important;
    top: 50% !important;
    width: min(420px, 32vw) !important;
    display: block !important;
    visibility: visible !important;
    will-change: transform, opacity, box-shadow !important;
    animation: heroCardEntranceDesktop 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both,
               heroCardFloatingBreath 5s ease-in-out 1.5s infinite alternate !important;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .hero-card {
    position: absolute !important;
    right: 76px !important;
    top: 50% !important;
    width: 360px !important;
    display: block !important;
    visibility: visible !important;
    will-change: transform, opacity, box-shadow !important;
    animation: heroCardEntranceDesktop 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both,
               heroCardFloatingBreath 5s ease-in-out 1.5s infinite alternate !important;
  }
}

/* Mobile & Tablet (< 992px): sits cleanly right below slider with slight overlap */
@media (max-width: 991px) {
  .hero-card {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    margin: -22px 16px 0 !important;
    width: calc(100% - 32px) !important;
    max-width: 520px !important;
    display: block !important;
    will-change: transform, opacity !important;
    animation: heroCardEntranceMobile 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both !important;
  }
}

/* ── 8. HERO CARD PAGE LOAD ENTRANCE KEYFRAMES & INNER STAGGER ── */
@keyframes heroCardEntranceDesktop {
  0% {
    opacity: 0;
    transform: translateY(calc(-50% + 28px)) translateX(40px) scale(0.95);
    box-shadow: 0 4px 14px rgba(12, 58, 29, 0.04);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(-50%) translateX(0) scale(1);
    box-shadow: 0 24px 60px -10px rgba(12, 58, 29, 0.25), 0 10px 25px -5px rgba(0, 0, 0, 0.10);
  }
}

/* Subtle continuous luxury breathing / floating effect */
@keyframes heroCardFloatingBreath {
  0% {
    transform: translateY(-50%) translateX(0);
  }
  100% {
    transform: translateY(calc(-50% - 7px)) translateX(0);
    box-shadow: 0 32px 70px -10px rgba(12, 58, 29, 0.30), 0 14px 30px -5px rgba(0, 0, 0, 0.12);
  }
}

@keyframes heroCardEntranceMobile {
  0% {
    opacity: 0;
    transform: translateY(32px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes heroItemStagger {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-card .hc-badge {
  animation: heroItemStagger 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.50s both !important;
}
.hero-card h1 {
  animation: heroItemStagger 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.65s both !important;
}
.hero-card p {
  animation: heroItemStagger 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.80s both !important;
}
.hero-card .hc-pt:nth-child(1) {
  animation: heroItemStagger 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.95s both !important;
}
.hero-card .hc-pt:nth-child(2) {
  animation: heroItemStagger 0.65s cubic-bezier(0.16, 1, 0.3, 1) 1.05s both !important;
}
.hero-card .hc-pt:nth-child(3) {
  animation: heroItemStagger 0.65s cubic-bezier(0.16, 1, 0.3, 1) 1.15s both !important;
}
.hero-card .hc-action-btn {
  animation: heroItemStagger 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.25s both !important;
}
.hero-card::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #15803d 0%, #E0A526 50%, #15803d 100%);
  border-radius: 20px 20px 0 0;
}
.hero-card .hc-badge {
  background: rgba(22, 101, 52, 0.08) !important;
  color: #166534 !important;
  border: 1px solid rgba(22, 101, 52, 0.20) !important;
  border-radius: 50px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  padding: 5px 13px !important;
  margin-bottom: 10px !important;
}
.hero-card h1 {
  font-size: clamp(20px, 1.75vw, 26px) !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.22 !important;
  letter-spacing: -0.5px !important;
  margin: 0 0 10px 0 !important;
}
.hero-card h1 span {
  color: #15803d !important;
}
.hero-card p {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: #475569 !important;
  margin-bottom: 16px !important;
}
.hero-card .hc-points {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  border-top: 1px solid #e2e8f0 !important;
  padding-top: 14px !important;
}
.hero-card .hc-pt {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 6px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 10px 4px !important;
  background: #ffffff !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}
.hero-card .hc-pt:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;
  border-color: #cbd5e1 !important;
}
.hero-card .hc-pt .hc-ico {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}
.hero-card .hc-pt:nth-child(1) .hc-ico {
  background: #fef3c7 !important;
  color: #d97706 !important;
}
.hero-card .hc-pt:nth-child(2) .hc-ico {
  background: #dcfce7 !important;
  color: #15803d !important;
}
.hero-card .hc-pt:nth-child(3) .hc-ico {
  background: #e0f2fe !important;
  color: #0284c7 !important;
}
.hero-card .hc-pt b {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  line-height: 1.2 !important;
}

/* Real High-Impact Executive Consultation CTA Button */
.hero-card .hc-action-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin-top: 16px !important;
  padding: 12px 18px !important;
  background: linear-gradient(135deg, #15803d 0%, #0c3a1d 100%) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  text-decoration: none !important;
  box-shadow: 0 10px 22px rgba(12, 58, 29, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  transition: all 0.25s ease !important;
}
.hero-card .hc-action-btn:hover {
  background: linear-gradient(135deg, #166534 0%, #15803d 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 28px rgba(12, 58, 29, 0.45) !important;
  color: #ffffff !important;
}
.hero-card .hc-action-btn i:first-child {
  color: #FCD34D !important;
}
.hero-card .hc-action-btn i:last-child {
  transition: transform 0.2s ease !important;
}
.hero-card .hc-action-btn:hover i:last-child {
  transform: translateX(4px) !important;
}

/* Mobile responsive caption */
@media (max-width: 991px) {
  .hero-slide-caption {
    left: 18px !important;
    bottom: 22px !important;
    max-width: calc(100% - 36px) !important;
  }
  .hsc-badge {
    padding: 5px 12px !important;
    font-size: 10px !important;
    margin-bottom: 6px !important;
  }
  .hsc-title {
    font-size: clamp(17px, 4.6vw, 24px) !important;
    line-height: 1.22 !important;
  }
  .hsc-sub {
    font-size: 11px !important;
    padding: 4px 10px !important;
    margin-top: 6px !important;
  }
}

/* ── 10. CINEMATIC SCROLL REVEAL ANIMATIONS (AWWWARDS / APPLE GRADE) ── */

.sat-reveal {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Directional Entrances ("kuch idhar se, kuch udhar se") */
.sat-reveal-left {
  opacity: 0;
  transform: translate3d(-60px, 0, 0);
}
.sat-reveal-right {
  opacity: 0;
  transform: translate3d(60px, 0, 0);
}
.sat-reveal-up {
  opacity: 0;
  transform: translate3d(0, 48px, 0);
}
.sat-reveal-down {
  opacity: 0;
  transform: translate3d(0, -36px, 0);
}
.sat-reveal-zoom {
  opacity: 0;
  transform: scale(0.88);
}
.sat-reveal-pop {
  opacity: 0;
  transform: scale(0.78) translate3d(0, 24px, 0);
  transition-duration: 0.72s;
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); /* playful spring bounce */
}

/* In-View Revealed State */
.sat-reveal.sat-in-view {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

/* Settled State: Unsets transform so all native hovers, flips, and clicks work seamlessly */
.sat-reveal.sat-settled {
  opacity: 1 !important;
  transform: none !important;
  will-change: auto !important;
}

/* Progressive Stagger Delays */
.sat-delay-1 { transition-delay: 0.10s !important; }
.sat-delay-2 { transition-delay: 0.20s !important; }
.sat-delay-3 { transition-delay: 0.30s !important; }
.sat-delay-4 { transition-delay: 0.40s !important; }
.sat-delay-5 { transition-delay: 0.50s !important; }
.sat-delay-6 { transition-delay: 0.60s !important; }

/* Mobile optimization */
@media (max-width: 767px) {
  .sat-reveal-left { transform: translate3d(-30px, 0, 0); }
  .sat-reveal-right { transform: translate3d(30px, 0, 0); }
  .sat-reveal-up { transform: translate3d(0, 26px, 0); }
}

/* ── 11. GUARANTEE DEAD-CENTER PLAY BUTTON FOR VIDEO CARDS ── */
.video-card {
  position: relative !important;
}
.video-card .play-btn {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 5 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
}
.video-card:hover .play-btn {
  transform: translate(-50%, -50%) scale(1.12) !important;
  background: var(--sat-gold-dark, #C48E1D) !important;
  border-color: var(--sat-gold-dark, #C48E1D) !important;
}

/* ── 12. CLEAN DEEP EMERALD GRADIENT FOR VIDEO SHOWCASE (ZERO GHOST WATERMARKS) ── */
.video-showcase {
  background: linear-gradient(135deg, #0C3A1D 0%, #062210 100%) !important;
}

/* ── 13. POPULAR PRODUCTS: BUTTERY SMOOTH 60FPS CAROUSEL TRANSITION ── */
.popular-area .carousel-inner {
  overflow: hidden !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  will-change: transform !important;
}

.popular-area .carousel-item {
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.85s ease !important;
  will-change: transform, opacity !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  perspective: 1000px !important;
  -webkit-perspective: 1000px !important;
}

.popular-area .carousel-item.active {
  opacity: 1 !important;
}
.popular-area .carousel-item-next.carousel-item-left,
.popular-area .carousel-item-prev.carousel-item-right {
  opacity: 1 !important;
}
.popular-area .active.carousel-item-left,
.popular-area .active.carousel-item-right {
  opacity: 0.25 !important;
}

/* Ambient backdrop image: clean soft fade mask (no harsh cut-offs) */
.popular-area .pa-side {
  width: min(38vw, 560px) !important;
  height: 72% !important;
  opacity: 0.75 !important;
  mask-image: linear-gradient(to bottom, black 35%, transparent 100%), linear-gradient(to left, black 40%, transparent 100%) !important;
  -webkit-mask-image: linear-gradient(to bottom, black 35%, transparent 100%), linear-gradient(to left, black 40%, transparent 100%) !important;
  mask-composite: source-in !important;
  -webkit-mask-composite: source-in !important;
}

@media (min-width: 992px) {
  .popular-area .pp-card {
    height: 285px !important;
    min-height: 285px !important;
    max-height: 285px !important;
    border-radius: 18px !important;
    background: linear-gradient(150deg, #1A6030 0%, #134B26 55%, #0D371B 100%) !important;
    box-shadow: 0 16px 40px rgba(12, 58, 29, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    overflow: hidden !important;
    position: relative !important;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important;
  }
  .popular-area .pp-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 24px 50px rgba(12, 58, 29, 0.28) !important;
    border-color: rgba(230, 169, 45, 0.45) !important;
  }

  /* Content area: generous padding & perfect vertical flex distribution */
  .popular-area .pp-card .pp-content {
    flex: 1 1 58% !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 24px 26px 22px !important;
    min-width: 0 !important;
  }

  /* Frosted Glass Icon Badge (Header Row Left) */
  .popular-area .pp-card .pp-ico {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: var(--sat-gold) !important;
    font-size: 20px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
    transition: transform 0.3s ease, background 0.3s ease !important;
  }
  .popular-area .pp-card:hover .pp-ico {
    transform: scale(1.08) rotate(3deg) !important;
    background: rgba(230, 169, 45, 0.18) !important;
  }

  /* Counter Badge (Header Row Right) */
  .popular-area .pp-card .pp-num {
    position: absolute !important;
    top: 26px !important;
    right: 26px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 2.5px !important;
    color: var(--sat-gold) !important;
    opacity: 0.9 !important;
    margin: 0 !important;
  }

  /* Executive Heading with Fixed Baseline (Supports 1 or 2 lines cleanly) */
  .popular-area .pp-card .pp-content h3 {
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    min-height: 48px !important;
    margin: 0 0 8px 0 !important;
    padding-right: 0 !important;
    display: block !important;
  }
  .popular-area .pp-card .pp-content h3 a {
    color: #ffffff !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
  }
  .popular-area .pp-card .pp-content h3 a:hover {
    color: var(--sat-gold) !important;
  }

  /* Full Readable Description (Zero Ellipsis, Zero Text Choking) */
  .popular-area .pp-card .pp-content p {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    color: rgba(255, 255, 255, 0.82) !important;
    margin: 0 0 14px 0 !important;
    padding-right: 0 !important;
    min-height: 42px !important;
    max-width: none !important;
    display: block !important;
    overflow: visible !important;
  }

  /* Sleek Modern CTA Pill Button */
  .popular-area .pp-card .pp-pill {
    position: static !important;
    transform: none !important;
    margin-top: auto !important;
    align-self: flex-start !important;
    width: auto !important;
    height: 36px !important;
    padding: 0 16px !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    letter-spacing: 0.3px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
  }
  .popular-area .pp-card .pp-pill::before {
    content: "View Details" !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
  }
  .popular-area .pp-card .pp-pill i {
    font-size: 11px !important;
    transform: none !important;
    transition: transform 0.3s ease !important;
  }
  .popular-area .pp-card:hover .pp-pill {
    background: var(--sat-gold) !important;
    border-color: var(--sat-gold) !important;
    color: #0C3A1D !important;
    box-shadow: 0 4px 16px rgba(230, 169, 45, 0.35) !important;
  }
  .popular-area .pp-card:hover .pp-pill i {
    transform: translateX(4px) !important;
  }

  /* Right-Side Thumbnail Image */
  .popular-area .pp-card .pp-thumb {
    flex: 0 0 42% !important;
    max-width: 42% !important;
    height: 100% !important;
    overflow: hidden !important;
    position: relative !important;
  }
  .popular-area .pp-card .pp-thumb img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    transition: transform 0.6s ease !important;
  }
  .popular-area .pp-card:hover .pp-thumb img {
    transform: scale(1.08) !important;
  }
}

@media (max-width: 991px) and (min-width: 768px) {
  .popular-area .pp-card {
    min-height: 270px !important;
  }
  .popular-area .pp-card .pp-content h3 {
    min-height: 46px !important;
  }
}

@media (max-width: 767px) {
  .popular-area .pp-card .pp-pill::before {
    content: "View Details" !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
  }
  .popular-area .pp-card .pp-pill {
    width: auto !important;
    height: 38px !important;
    padding: 0 16px !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
}

/* ── 14. CINEMATIC BUTTON EFFECTS SUITE (FOR INDEX-EFFECTS.HTML) ── */

/* 1. Global Button Interactive Base & Overflow for Ripple */
.hc-action-btn,
.btn-sat,
.pp-pill,
.pp-arrow,
.na-arrow,
.na2-arrow,
.sales-login {
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* 2. Primary Hero CTA (.hc-action-btn) — Ambient Breathing Glow + Continuous Light Shimmer */
.hero-card .hc-action-btn {
  animation: satHeroBtnPulse 3s ease-in-out infinite !important;
}

@keyframes satHeroBtnPulse {
  0%, 100% {
    box-shadow: 0 10px 22px rgba(21, 128, 61, 0.35), 0 0 0 0 rgba(21, 128, 61, 0.45);
  }
  50% {
    box-shadow: 0 14px 30px rgba(21, 128, 61, 0.55), 0 0 0 8px rgba(21, 128, 61, 0);
  }
}

/* Shimmer Light Beam Effect across primary CTA buttons */
.hero-card .hc-action-btn::after,
.btn-sat::after,
.sales-login::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -120% !important;
  width: 70% !important;
  height: 100% !important;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.4) 45%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.4) 55%, transparent 100%) !important;
  transform: skewX(-22deg) !important;
  pointer-events: none !important;
  animation: satShimmerSweep 3.8s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}

@keyframes satShimmerSweep {
  0%, 45% {
    left: -120%;
  }
  75%, 100% {
    left: 200%;
  }
}

/* 3. Hero CTA Icons Dynamic Interaction */
.hero-card .hc-action-btn i.fa-paper-plane {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.hero-card .hc-action-btn:hover i.fa-paper-plane {
  transform: translateY(-2px) rotate(-18deg) scale(1.18) !important;
  color: #fbbf24 !important;
}
.hero-card .hc-action-btn i.fa-arrow-right {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.hero-card .hc-action-btn:hover i.fa-arrow-right {
  transform: translateX(6px) scale(1.1) !important;
}

/* 4. Section CTA Buttons (.btn-sat, .btn-sat-green) */
.btn-sat {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, background 0.3s ease !important;
}
.btn-sat:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 14px 32px rgba(30, 107, 52, 0.45) !important;
}
.btn-sat i {
  display: inline-block !important;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.btn-sat:hover i {
  transform: translateX(6px) scale(1.15) !important;
}

/* 5. Popular Products Pill Button (.pp-pill) */
.popular-area .pp-card .pp-pill {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.popular-area .pp-card:hover .pp-pill {
  transform: scale(1.06) !important;
  box-shadow: 0 8px 20px rgba(230, 169, 45, 0.4) !important;
}

/* 6. Carousel Arrow Navigation Buttons (.pp-arrow, .na-prev, .na-next) */
.pp-arrow {
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.pp-arrow:hover {
  transform: scale(1.14) translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(12, 58, 29, 0.35) !important;
}
.pp-arrow.carousel-control-prev:hover i,
.pp-arrow.na-prev:hover i {
  animation: satArrowNudgeLeft 0.8s ease-in-out infinite alternate !important;
}
.pp-arrow.carousel-control-next:hover i,
.pp-arrow.na-next:hover i {
  animation: satArrowNudgeRight 0.8s ease-in-out infinite alternate !important;
}

@keyframes satArrowNudgeLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-4px); }
}
@keyframes satArrowNudgeRight {
  0% { transform: translateX(0); }
  100% { transform: translateX(4px); }
}

/* 7. Video Showcase Play Button (.play-btn) Continuous Radar Pulse Rings */
.play-btn {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45) !important;
}
.play-btn::before,
.play-btn::after {
  content: '' !important;
  position: absolute !important;
  inset: -6px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.7) !important;
  pointer-events: none !important;
  animation: satRadarRing 2.4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite !important;
}
.play-btn::after {
  animation-delay: 1.2s !important;
}

@keyframes satRadarRing {
  0% {
    transform: scale(0.95);
    opacity: 0.9;
    border-color: rgba(230, 169, 45, 0.8);
  }
  100% {
    transform: scale(1.75);
    opacity: 0;
    border-color: rgba(255, 255, 255, 0);
  }
}

.video-card:hover .play-btn {
  transform: translate(-50%, -50%) scale(1.15) !important;
  background: var(--sat-gold, #f59e0b) !important;
  color: #0c3a1d !important;
  box-shadow: 0 14px 36px rgba(245, 158, 11, 0.6) !important;
}

/* 8. Click Ripple Effect Element */
.sat-ripple-circle {
  position: absolute !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.45) !important;
  transform: scale(0) !important;
  animation: satRippleAnim 0.6s cubic-bezier(0.1, 0.8, 0.3, 1) forwards !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

@keyframes satRippleAnim {
  to {
    transform: scale(4) !important;
    opacity: 0 !important;
  }
}

/* 9. Back to Top Button (Fixed Floating on Bottom-Right) */
.back-to-top {
  position: fixed !important;
  right: 26px !important;
  bottom: 26px !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  background: var(--sat-green-700, #15803d) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  box-shadow: 0 10px 26px rgba(12, 58, 29, 0.35) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 9999 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(20px) !important;
  pointer-events: none !important;
}
.back-to-top.active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
  animation: satBttPulse 2.8s ease-in-out infinite !important;
}
@keyframes satBttPulse {
  0%, 100% {
    box-shadow: 0 8px 24px rgba(21, 128, 61, 0.4);
  }
  50% {
    box-shadow: 0 12px 30px rgba(21, 128, 61, 0.7), 0 0 0 6px rgba(21, 128, 61, 0.15);
  }
}
.back-to-top:hover {
  background: var(--sat-gold, #e0a526) !important;
  color: #0c3a1d !important;
  transform: translateY(-5px) scale(1.08) !important;
  box-shadow: 0 14px 32px rgba(224, 165, 38, 0.45) !important;
}
.back-to-top:hover i {
  animation: satArrowNudgeUp 0.6s ease-in-out infinite alternate !important;
}
@keyframes satArrowNudgeUp {
  0% { transform: translateY(0); }
  100% { transform: translateY(-3px); }
}

/* 10. Hero Carousel Slide Arrows */
.carousel-control-prev,
.carousel-control-next {
  transition: transform 0.3s ease, background 0.3s ease, opacity 0.3s ease !important;
}
.carousel-control-prev:hover {
  transform: translateY(-50%) translateX(-3px) scale(1.1) !important;
}
.carousel-control-next:hover {
  transform: translateY(-50%) translateX(3px) scale(1.1) !important;
}

/* ── 15. NEW ARRIVALS: BUTTERY SMOOTH HORIZONTAL CAROUSEL RAIL ── */
.na-track {
  scroll-snap-type: none !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: auto !important;
  will-change: scroll-position !important;
}

.na2-card {
  will-change: transform, box-shadow !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
}




/* ── 16. UNIVERSAL PRISMATIC GLASSPHORPHISM SHINE SWEEP ON HOVER ── */
.vt-win,
.pp-card .pp-thumb,
.na2-frame,
.video-card {
  position: relative !important;
  overflow: hidden !important;
}

.vt-win::after,
.pp-card .pp-thumb::after,
.na2-frame::after,
.video-card::after {
  content: "" !important;
  position: absolute !important;
  top: -65% !important;
  left: -130% !important;
  width: 65% !important;
  height: 230% !important;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.08) 20%,
    rgba(255, 255, 255, 0.40) 40%,
    rgba(255, 255, 255, 0.98) 50%,
    rgba(255, 255, 255, 0.40) 60%,
    rgba(255, 255, 255, 0.08) 80%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
  transform: rotate(22deg) translateZ(0) !important;
  -webkit-transform: rotate(22deg) translateZ(0) !important;
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.95)) !important;
  -webkit-filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.95)) !important;
  z-index: 5 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  will-change: left, opacity !important;
}

.vt-card:hover .vt-win::after,
.vt-frame:hover .vt-win::after,
.vt-win:hover::after,
.pp-card:hover .pp-thumb::after,
.pp-thumb:hover::after,
.na2-card:hover .na2-frame::after,
.na2-frame:hover::after,
.video-card:hover::after {
  animation: satGlassImageShine 0.85s cubic-bezier(0.2, 0.8, 0.25, 1) forwards !important;
}