@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Source+Sans+Pro:wght@300;400;600&display=swap');

/* ============================================
   WHY CHOOSE PAKGUSU - MASTER UI DESIGN
   ============================================
   Scoped styles for Why Choose PakGusu section.
   Features:
   - Base Background: Dark Blue (#004685)
   - Animation: Drifting Gradient Blobs (Floating/Light particle-like soft shapes)
   - Colors: Light Blue (#29afe3) variants for overlay
   - Layering: Behind content, above base
   - Responsive: Full width/fluid
   - Customization: See variables below
   ============================================ */

/* ============================================
   CUSTOMIZATION & VARIABLES
   ============================================ */
#why-choose-pakgusu-section {
  /* Base Colors */
  --wcp-bg-base: #004685; /* Dark Blue */
  --wcp-blob-color-1: #29afe3; /* Light Blue */
  --wcp-blob-color-2: #4fc3f7; /* Lighter Blue */
  --wcp-blob-color-3: #0277bd; /* Medium Blue */
  
  /* Animation Settings */
  --wcp-anim-speed-slow: 25s;
  --wcp-anim-speed-med: 20s;
  --wcp-anim-speed-fast: 15s;
  --wcp-blob-opacity: 0.4; /* Subtle overlay */
  --wcp-blob-blur: 80px; /* Soft edges */
  
  /* Content Colors (Ensure readability on dark background) */
  --wcp-text-primary: #FFFFFF;
  --wcp-text-secondary: #E1F5FE;
  --wcp-accent: #29afe3;
  --wcp-card-bg: rgba(255, 255, 255, 0.95); /* Light card to stand out */
  --wcp-card-text: #1A1A1A;
}

/* Dark Mode Adjustments (if needed, though base is already dark) */
/* REMOVED: @media (prefers-color-scheme: dark) - Dark mode is now user-activated only via body.dark-mode or html[data-theme="dark"] class. See docs/workflow/dark-mode.md */
}

/* ============================================
   SECTION LAYOUT
   ============================================ */
#why-choose-pakgusu-section {
  position: relative;
  background-color: var(--wcp-bg-base);
  padding: 80px 0;
  overflow: hidden;
  isolation: isolate; /* Create stacking context */
  color: var(--wcp-text-primary);
}

/* ============================================
   BACKGROUND ANIMATION CONTAINER
   ============================================ */
#why-choose-pakgusu-section .wcp-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Behind content */
  overflow: hidden;
  pointer-events: none;
}

/* ============================================
   DRIFTING BLOBS
   ============================================ */
#why-choose-pakgusu-section .wcp-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(var(--wcp-blob-blur));
  opacity: var(--wcp-blob-opacity);
  animation: wcp-float infinite ease-in-out alternate;
}

/* Blob 1: Large, top-left drifting */
#why-choose-pakgusu-section .wcp-blob-1 {
  width: 500px;
  height: 500px;
  background: var(--wcp-blob-color-1);
  top: -100px;
  left: -100px;
  animation-duration: var(--wcp-anim-speed-slow);
}

/* Blob 2: Medium, bottom-right drifting */
#why-choose-pakgusu-section .wcp-blob-2 {
  width: 400px;
  height: 400px;
  background: var(--wcp-blob-color-2);
  bottom: -50px;
  right: -50px;
  animation-duration: var(--wcp-anim-speed-med);
  animation-delay: -5s;
}

/* Blob 3: Small, center-ish drifting */
#why-choose-pakgusu-section .wcp-blob-3 {
  width: 300px;
  height: 300px;
  background: var(--wcp-blob-color-3);
  top: 40%;
  left: 60%;
  animation-duration: var(--wcp-anim-speed-fast);
  animation-delay: -10s;
}

/* Animation Keyframes */
@keyframes wcp-float {
  0% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}

/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
  #why-choose-pakgusu-section .wcp-blob {
    animation: none;
    opacity: 0.2; /* Static subtle background */
  }
}

/* ============================================
   CONTENT STYLING (Ensure readability)
   ============================================ */
#why-choose-pakgusu-section .video-section-full {
  background-color: var(--wcp-card-bg);
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  position: relative;
  z-index: 2;
  color: var(--wcp-card-text); /* Override white text for card content */
}

#why-choose-pakgusu-section .site-text-primary {
  color: var(--wcp-bg-base) !important; /* Use dark blue for accent text in card */
}

#why-choose-pakgusu-section .wt-tilte {
  color: var(--wcp-card-text);
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1.3;
  letter-spacing: -0.5px;
}

/* Video Button Styling (Re-applying from previous design) */
#why-choose-pakgusu-section .play-now {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background-color: var(--wcp-bg-base); /* Dark blue button */
  border-radius: 50%;
  position: relative;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

#why-choose-pakgusu-section .play-now:hover {
  transform: scale(1.1);
  background-color: var(--wcp-blob-color-1); /* Light blue on hover */
}

#why-choose-pakgusu-section .play-now .icon {
  color: #fff;
  font-size: 24px;
}

#why-choose-pakgusu-section .play-now .ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid var(--wcp-bg-base);
  animation: wcp-ripple 2s infinite;
  opacity: 0;
}

@keyframes wcp-ripple {
  0% { width: 100%; height: 100%; opacity: 0.6; }
  100% { width: 150%; height: 150%; opacity: 0; }
}

#why-choose-pakgusu-section .video-secion-right a {
  color: var(--wcp-bg-base);
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
}

#why-choose-pakgusu-section .video-secion-right a:hover {
  color: var(--wcp-blob-color-1);
}

/* Responsive */
@media (max-width: 768px) {
  #why-choose-pakgusu-section .wt-tilte {
    font-size: 1.8rem;
  }
  #why-choose-pakgusu-section .video-section-full {
    padding: 20px;
  }
}
/* ==========================================================================
   Latest News Redesign - The "News Hub" Layout
   Desktop: 1 Featured (Left) + 2 Stacked (Right) CSS Grid
   Mobile: Horizontal Scroll Snap Carousel (No JS)
   ========================================================================== */

#latest-news-section {
  --ln-card-bg: #fff;
  --ln-card-border: rgba(0, 0, 0, 0.06);
  --ln-card-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  --ln-text-main: #1f2937;
  --ln-text-muted: #6b7280;
  --ln-primary: #004685;
  --ln-accent: #29afe3;
  --ln-date-badge: #29afe3;
  --ln-date-text: #fff;

  position: relative;
  overflow: hidden;
  background: #f9fafb;
  padding-top: 80px;
  padding-bottom: 100px;
}

[data-theme="dark"] #latest-news-section {
  background: #0d1117;
  --ln-card-bg: #161b22;
  --ln-card-border: rgba(255, 255, 255, 0.08);
  --ln-text-main: #e6edf3;
  --ln-text-muted: #8b949e;
  --ln-primary: #58a6ff;
  --ln-card-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Background Wave */
#latest-news-section .wave-background {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  opacity: 0.1;
  pointer-events: none;
}

/* 2. Grid Layout Structure */
.news-hub-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 30px;
  position: relative;
  z-index: 2;
  margin-top: 40px;
}

.news-stack {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* 3. Card Base Styling */
.news-card {
  background: var(--ln-card-bg);
  border: 1px solid var(--ln-card-border);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  flex-direction: column;
}

.news-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--ln-card-shadow);
  border-color: var(--ln-accent);
}

/* Media Area */
.news-media {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.featured-card .news-media {
  height: 380px;
  /* Taller for featured */
}

.standard-card .news-media {
  height: 200px;
}

.news-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.news-card:hover .news-media img {
  transform: scale(1.05);
}

/* Date Badge */
.date-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  background: var(--ln-date-badge);
  color: var(--ln-date-text);
  padding: 8px 15px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  line-height: 1.1;
}

.date-badge .day {
  display: block;
  font-size: 1.2rem;
  font-weight: 800;
}

.date-badge .month {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
}

.date-badge.small {
  padding: 6px 12px;
}

.date-badge.small .day {
  font-size: 1rem;
}

.date-badge.small .month {
  font-size: 0.7rem;
}

/* Content Area */
.news-content {
  padding: 30px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.standard-card .news-content {
  padding: 25px;
  /* Slightly less padding */
}

/* Meta Tags (Featured) */
.news-meta-top {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
  font-size: 0.85rem;
  color: var(--ln-accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.meta-tag {
  background: rgba(41, 175, 227, 0.1);
  padding: 4px 10px;
  border-radius: 4px;
}

/* Titles */
.news-title {
  font-family: 'Martel', serif;
  font-weight: 700;
  color: var(--ln-text-main);
  line-height: 1.3;
  margin-bottom: 15px;
}

.featured-card .news-title {
  font-size: 1.8rem;
}

.standard-card .news-title {
  font-size: 1.3rem;
}

.news-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s;
  background-image: linear-gradient(var(--ln-accent), var(--ln-accent));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: left bottom;
  padding-bottom: 2px;
}

.news-card:hover .news-title a {
  color: var(--ln-primary);
  background-size: 100% 2px;
}

.news-excerpt {
  color: var(--ln-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 25px;
  flex-grow: 1;
}

/* Footer */
.news-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid var(--ln-card-border);
  font-size: 0.9rem;
  color: var(--ln-text-muted);
}

.author-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.author-info img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

.interaction-stats {
  display: flex;
  gap: 15px;
}

.interaction-stats .stat {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: color 0.3s;
}

.interaction-stats .stat:hover {
  color: var(--ln-accent);
}

/* 4. Mobile Layout (Horizontal Scroll Snap) */
.mobile-scroll-hint {
  display: none;
  text-align: right;
  font-size: 0.8rem;
  color: var(--ln-text-muted);
  margin-bottom: 10px;
  animation: fadePulse 2s infinite;
}

@keyframes fadePulse {

  0%,
  100% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }
}

@media (max-width: 991px) {
  .news-hub-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 20px;
    padding-bottom: 30px;
    /* Space for shadow */
    -webkit-overflow-scrolling: touch;
    margin-right: -15px;
    /* Bleed off screen */
    padding-right: 30px;
  }

  .mobile-scroll-hint {
    display: block;
    /* Show hint on mobile */
  }

  .news-stack {
    display: contents;
    /* Ungroup stack so items flow in horizontal flex */
  }

  .news-card {
    flex: 0 0 85vw;
    /* Card width */
    scroll-snap-align: center;
    height: auto;
  }

  .featured-card .news-media,
  .standard-card .news-media {
    height: 220px;
    /* Equalize heights for mobile consistency */
  }

  .featured-card .news-title {
    font-size: 1.4rem;
  }
}
/* ==========================================================================
   Intro Hero Section - "Cleanroom Manufacturer" Hero Layout
   Asymmetric Split: Content (Left) / Visual Frame (Right)
   Premium Glassmorphism & Depth
   ========================================================================== */

#intro-hero-section {
    --hero-primary: #004685;
    --hero-accent: #29afe3;
    --hero-bg-light: #f8fbfe;
    --hero-text-main: #1f2937;
    --hero-text-muted: #6b7280;
    --hero-glass: rgba(255, 255, 255, 0.9);
    --hero-border: rgba(41, 175, 227, 0.2);
    --hero-shadow: 0 20px 40px rgba(0, 70, 133, 0.1);

    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #fff 0%, #f0f7ff 100%);
    padding: 100px 0;
}

[data-theme="dark"] #intro-hero-section {
    --hero-bg-light: #0f172a;
    --hero-text-main: #f3f4f6;
    --hero-text-muted: #9ca3af;
    --hero-glass: rgba(30, 41, 59, 0.85);
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    --hero-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* 1. Background Decoration */
.hero-accent-shape {
    position: absolute;
    top: -10%;
    right: -5%;
    width: 50%;
    height: 120%;
    background: linear-gradient(180deg, rgba(41, 175, 227, 0.05), rgba(0, 70, 133, 0.05));
    transform: skewX(-12deg);
    border-left: 1px solid rgba(41, 175, 227, 0.1);
    z-index: 0;
    pointer-events: none;
}

/* 2. Left Column: Content Panel */
.hero-content-panel {
    position: relative;
    z-index: 5;
    padding-right: 30px;
}

#intro-hero-section .section-head {
    margin-bottom: 30px;
}

#intro-hero-section .section-head h2 {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-top: 10px;
    background: linear-gradient(90deg, var(--hero-primary), var(--hero-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="dark"] #intro-hero-section .section-head h2 {
    background: linear-gradient(90deg, #fff, var(--hero-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-desc {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--hero-text-muted);
    margin-bottom: 40px;
}

.hero-desc strong {
    color: var(--hero-text-main);
    font-weight: 600;
}

/* 3. Modern Accordion Styling */
.hero-accordion .panel {
    border: none;
    background: transparent;
    box-shadow: none;
    margin-bottom: 15px;
}

.hero-accordion .acod-head {
    background: var(--hero-glass);
    border: 1px solid var(--hero-border);
    border-radius: 12px;
    padding: 15px 20px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.hero-accordion .acod-head:hover,
.hero-accordion .acod-head.acc-actives {
    background: #fff;
    box-shadow: var(--hero-shadow);
    border-color: var(--hero-accent);
    transform: translateX(10px);
}

[data-theme="dark"] .hero-accordion .acod-head:hover,
[data-theme="dark"] .hero-accordion .acod-head.acc-actives {
    background: var(--hero-glass);
}

.hero-accordion .acod-title a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--hero-text-main);
    text-decoration: none;
}

.hero-accordion .indicator {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(41, 175, 227, 0.1);
    color: var(--hero-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.3s;
}

.hero-accordion .acod-head.acc-actives .indicator {
    background: var(--hero-accent);
    color: #fff;
    transform: rotate(90deg);
}

.hero-accordion .acod-body {
    border: none;
    padding: 0 20px;
}

.hero-accordion .acod-content {
    padding-top: 15px;
    padding-bottom: 10px;
    color: var(--hero-text-muted);
    line-height: 1.6;
}

/* 4. Right Column: Visual Frame */
.hero-visual-frame {
    position: relative;
    z-index: 2;
    padding-left: 20px;
}

.hero-main-slider-wrap {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--hero-shadow);
    background: #000;
    margin-bottom: 20px;
    aspect-ratio: 3/4;
}

.hero-main-slider-wrap .owl-stage-outer,
.hero-main-slider-wrap .owl-stage,
.hero-main-slider-wrap .owl-item,
.hero-main-slider-wrap .item,
.hero-main-slider-wrap .wt-box,
.hero-main-slider-wrap .wt-thum-bx,
.hero-main-slider-wrap img {
    height: 100%;
    width: 100%;
}

.hero-main-slider-wrap img {
    object-fit: cover;
}

/* Custom Navigation Overlays */
#sync1 .owl-nav {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
    margin: 0 !important;
}

#sync1 .owl-prev,
#sync1 .owl-next {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(5px);
    border-radius: 50% !important;
    color: #fff !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    font-size: 16px !important;
    margin: 0 !important;
}

#sync1 .owl-prev:hover,
#sync1 .owl-next:hover {
    background: var(--hero-accent) !important;
    transform: scale(1.1);
}

/* Thumbnails */
#sync2 {
    margin-top: 10px;
}

#sync2 .item {
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
    opacity: 0.6;
    transition: all 0.3s;
    border: 2px solid transparent;
}

#sync2 .item img {
    border-radius: 10px;
    height: 80px;
    /* Fixed height for consistent thumbs */
    object-fit: cover;
}

#sync2 .current .item {
    opacity: 1;
    border-color: var(--hero-accent);
    transform: translateY(-5px);
}

/* 5. Responsive */
@media (max-width: 991px) {
    #intro-hero-section {
        padding: 60px 0;
    }

    /* Reverse order on mobile: visual first, then text? 
       Or standard top-down. Let's stick to content first for intro logic, 
       but ensure visual isn't buried too deep. 
       Actually, standard stacking (Text then Image) is fine, 
       but let's reduce margins. */

    .hero-content-panel {
        padding-right: 0;
        margin-bottom: 40px;
    }

    #intro-hero-section .section-head h2 {
        font-size: 2.5rem;
    }

    .hero-visual-frame {
        padding-left: 0;
    }

    .hero-accent-shape {
        width: 100%;
        top: 0;
        right: 0;
        transform: none;
    }
}
/* ==========================================================================
   Social Proof Section - Testimonial & Stats
   Premium Layout: Testimonial Story (Left) / Heroic Stats Grid (Right)
   ========================================================================== */

#social-proof-section {
    --sp-primary: #004685;
    --sp-accent: #29afe3;
    --sp-bg-light: #f8fbfe;
    --sp-card-bg: #ffffff;
    --sp-text-main: #1f2937;
    --sp-text-muted: #6b7280;
    --sp-border-color: rgba(41, 175, 227, 0.15);
    --sp-shadow: 0 10px 30px rgba(0, 70, 133, 0.08);

    background: linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%);
    position: relative;
    padding: 100px 0;
    overflow: hidden;
}

[data-theme="dark"] #social-proof-section {
    --sp-bg-light: #0d1117;
    --sp-card-bg: #161b22;
    --sp-text-main: #f3f4f6;
    --sp-text-muted: #9ca3af;
    --sp-border-color: rgba(255, 255, 255, 0.1);
    --sp-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
}

#social-proof-section .container {
    position: relative;
    z-index: 2;
}

/* Background Pattern */
.sp-bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(var(--sp-border-color) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.5;
    z-index: 1;
}

/* ===========================================
   Left Column: Testimonial Story
   =========================================== */
.sp-testimonial-card {
    background: transparent;
    padding: 20px 0;
    max-width: 95%;
    /* Prevent overly wide lines */
}

.sp-quote-icon {
    font-size: 3rem;
    color: var(--sp-accent);
    opacity: 0.3;
    display: block;
    margin-bottom: 20px;
}

.sp-testimonial-text p {
    font-family: 'Martel', serif;
    font-size: 1.4rem;
    line-height: 1.6;
    font-style: italic;
    color: var(--sp-text-main);
    margin-bottom: 30px;
}

.sp-author-block {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-top: 20px;
    border-top: 1px solid var(--sp-border-color);
    width: fit-content;
}

.sp-author-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border: 2px solid #fff;
}

.sp-author-info strong {
    display: block;
    font-size: 1rem;
    color: var(--sp-text-main);
    font-weight: 700;
}

.sp-author-info span {
    display: block;
    font-size: 0.85rem;
    color: var(--sp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Navigation Controls (Customizing Owl) */
#social-proof-section .owl-nav {
    position: absolute;
    top: -60px;
    /* Position above/right of the card */
    right: 0;
    display: flex !important;
    gap: 10px;
    margin: 0 !important;
}

#social-proof-section .owl-prev,
#social-proof-section .owl-next {
    width: 40px;
    height: 40px;
    background: var(--sp-card-bg) !important;
    border: 1px solid var(--sp-border-color) !important;
    border-radius: 50% !important;
    color: var(--sp-primary) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    font-size: 14px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

#social-proof-section .owl-prev:hover,
#social-proof-section .owl-next:hover {
    background: var(--sp-primary) !important;
    color: #fff !important;
    border-color: var(--sp-primary) !important;
    transform: translateY(-2px);
}

/* ===========================================
   Right Column: Stat Cluster Grid
   =========================================== */
.sp-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
    gap: 20px;
    margin-left: 20px;
}

.sp-stat-card {
    background: var(--sp-card-bg);
    padding: 30px;
    border-radius: 16px;
    border: 1px solid var(--sp-border-color);
    box-shadow: var(--sp-shadow);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.sp-stat-card:hover {
    transform: translateY(-5px);
    border-color: var(--sp-accent);
}

/* Primary Stat (Spans full width or large spot) 
   Let's make the first one span full width on top for impact?
   Or keep 2x2. Let's do 2x2 but varying sizes if content suggests.
   For now, strictly 2 columns.
*/

.sp-stat-card.primary {
    background: linear-gradient(135deg, var(--sp-primary), #003366);
    color: #fff;
    grid-column: span 2;
    /* Full width top */
}

.sp-stat-card.primary .sp-stat-num {
    color: #fff;
    font-size: 4rem;
    font-weight: 800;
}

.sp-stat-card.primary .sp-stat-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
}

/* Standard Stat Cards */
.sp-stat-num {
    font-size: 3rem;
    font-weight: 700;
    color: var(--sp-accent);
    line-height: 1;
    margin-bottom: 5px;
    display: flex;
    align-items: baseline;
    font-family: 'Poppins', sans-serif;
}

.sp-stat-num small {
    font-size: 1.5rem;
    margin-left: 2px;
}

.sp-stat-label {
    font-size: 0.95rem;
    color: var(--sp-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Decoration inside cards */
.sp-stat-card::after {
    content: '';
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 60px;
    height: 60px;
    background: var(--sp-accent);
    opacity: 0.05;
    border-radius: 50%;
}

/* ===========================================
   Responsive
   =========================================== */
@media (max-width: 991px) {
    #social-proof-section {
        padding: 60px 0;
    }

    .sp-bg-pattern {
        opacity: 0.2;
    }

    .sp-stat-grid {
        margin-left: 0;
        margin-top: 40px;
        grid-template-columns: 1fr 1fr;
        /* Keep 2 cols on tablet */
    }

    .sp-testimonial-card {
        text-align: center;
        max-width: 100%;
        padding: 0 10px;
    }

    .sp-author-block {
        margin: 0 auto;
        /* Center author */
    }

    #social-proof-section .owl-nav {
        /* Center arrows on mobile below text */
        position: relative;
        top: 0;
        justify-content: center;
        margin-top: 20px !important;
        width: 100%;
    }
}

@media (max-width: 576px) {
    .sp-stat-grid {
        grid-template-columns: 1fr;
        /* Stack on mobile */
    }

    .sp-stat-card.primary {
        grid-column: span 1;
    }

    .sp-stat-num {
        font-size: 2.5rem;
    }

    .sp-testimonial-text p {
        font-size: 1.2rem;
    }
}
/* ==========================================================================
   Dual CTA Section - Contact & Video Cards
   Premium Split-Card Layout with Custom Animations
   ========================================================================== */

#cta-dual-section {
    --cta-primary: #004685;
    --cta-accent: #29afe3;
    --cta-bg-light: #f4f9ff;
    --cta-card-bg: #ffffff;
    --cta-text-main: #1f2937;
    --cta-text-muted: #6b7280;
    --cta-border: rgba(41, 175, 227, 0.2);
    --cta-shadow: 0 20px 40px rgba(0, 70, 133, 0.1);

    padding: 100px 0;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] #cta-dual-section {
    --cta-bg-light: #161b22;
    --cta-card-bg: #0d1117;
    --cta-text-main: #f3f4f6;
    --cta-text-muted: #9ca3af;
    --cta-border: rgba(255, 255, 255, 0.1);
    --cta-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    background: #0d1117;
}

/* ===========================================
   Shared Card Styles
   =========================================== */
.cta-card {
    border-radius: 20px;
    /* Modern rounded corners */
    overflow: hidden;
    position: relative;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    height: 100%;
    border: 1px solid var(--cta-border);
    background: var(--cta-card-bg);
}

.cta-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--cta-shadow);
    border-color: var(--cta-accent);
}

/* Content Wrapper */
.cta-content {
    padding: 50px 40px;
    z-index: 2;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

/* Eyebrow Text */
.cta-eyebrow {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--cta-accent);
    margin-bottom: 15px;
    display: block;
}

/* Heading */
.cta-heading {
    font-family: 'Poppins', sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--cta-text-main);
    margin-bottom: 20px;
}

/* Paragraph */
.cta-text {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--cta-text-muted);
    margin-bottom: 30px;
    max-width: 90%;
}

/* ===========================================
   Type 1: Contact Card (Left)
   =========================================== */
.cta-contact-card {
    background: linear-gradient(135deg, var(--cta-card-bg) 0%, var(--cta-bg-light) 100%);
}

.cta-btn-primary {
    background: var(--cta-primary);
    color: #fff !important;
    padding: 16px 36px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 2px solid transparent;
    /* Prepare for border transition */
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.cta-btn-primary:hover {
    background: var(--cta-accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(41, 175, 227, 0.3);
}

/* ===========================================
   Type 2: Video Card (Right)
   =========================================== */
.cta-video-card {
    background: var(--cta-card-bg);
    /* Fallback */
    position: relative;
}

/* Gradient Overlay for visual dept */
.cta-video-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(41, 175, 227, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

/* Custom Play Button */
.cta-play-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
    cursor: pointer;
}

.cta-play-btn {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    border: 1px solid var(--cta-border);
}

.cta-play-btn i {
    font-size: 24px;
    color: var(--cta-primary);
    margin-left: 4px;
    /* Optical adjustment */
    transition: color 0.3s;
}

/* Pulse Animation Ring */
.cta-play-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--cta-accent);
    opacity: 0;
    animation: cta-pulse 2s infinite;
}

@keyframes cta-pulse {
    0% {
        width: 100%;
        height: 100%;
        opacity: 0.8;
    }

    100% {
        width: 160%;
        height: 160%;
        opacity: 0;
    }
}

.cta-play-wrapper:hover .cta-play-btn {
    transform: scale(1.1);
    background: var(--cta-primary);
    border-color: var(--cta-primary);
}

.cta-play-wrapper:hover .cta-play-btn i {
    color: #fff;
}

.cta-play-label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--cta-text-main);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s;
}

.cta-play-wrapper:hover .cta-play-label {
    color: var(--cta-primary);
}

/* ===========================================
   Responsive
   =========================================== */
@media (max-width: 991px) {
    #cta-dual-section {
        padding: 60px 0;
    }

    .cta-heading {
        font-size: 1.8rem;
    }

    .cta-content {
        padding: 40px 30px;
    }
}

@media (max-width: 767px) {
    .cta-card {
        margin-bottom: 20px;
    }

    /* Stack Order: Contact first usually better for conversion, 
       but design asked for Contact Left / Video Right which stacks naturally. */

    .cta-content {
        padding: 30px 20px;
        text-align: center;
        align-items: center;
    }

    .cta-play-wrapper {
        justify-content: center;
    }
}