/*
 Theme Name:   Astra Child
 Theme URI:    https://yourwebsite.com
 Description:  Astra Child Theme
 Author:       Alby
 Author URI:   https://yourwebsite.com
 Template:     astra
 Version:      1.0.0
*/

/* Import parent theme styles */
/* @import url("../astra/style.css"); */

/* Your custom CSS goes below */
/* Add this to the top of your style.css file */

/* Performance optimizations */
* {
    /* transform-style: preserve-3d; */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Optimize heavy animations */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Optimize backdrop filters for performance */
.service-card,
.testimonial-card,
.social-link,
.cta-card {
    will-change: transform;
    transform: translateZ(0);
}

/* Reduce GPU memory usage */
.hero-slider::after,
.why-hire-us-section::after,
.testimonials-section::after,
.blog-section::after {
    will-change: auto;
}

/* Optimize video rendering */
.slide-video {
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    transform: translateZ(0);
}

/* Lazy load images */
img {
    loading: lazy;
    decoding: async;
}

/* Optimize heavy gradients */
.why-hire-us-section,
.testimonials-section,
.footer-section {
    background-attachment: scroll; /* Instead of fixed */
}

/* Reduce animation complexity on mobile */
@media (max-width: 768px) {
    .service-card::before,
    .testimonial-card::before,
    .slider-arrow::before,
    .social-link::before {
        display: none;
    }
    
    .cta-background-effects::after,
    .cta-gradient-orb {
        display: none;
    }
}

/* Optimize carousel performance */
.cards-container {
    contain: layout style paint;
}

/* Reduce repaints */
.hero-controls,
.slider-controls {
    contain: layout;
}
  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  :root {
      --brand-orange: #ed8321;
      --brand-orange-light: #fd7e14;
      --brand-orange-dark: #d67416;
      --brand-blue: #0d9fe8;
      --brand-blue-dark: #0056b3;
      --brand-blue-light: #3ba7f0;
      --brand-orange-text: #d67416;
      --brand-blue-text: #0466c8;
      --text-primary: #212529;
      --text-secondary: #121212;
      --text-muted: #6c757d;

      /* Dark theme colors for mixed sections */
      --dark-bg-primary: #0f1419;
      --dark-bg-secondary: #1a2332;
      --dark-bg-tertiary: #252b3d;
      --dark-text-primary: #ffffff;
      --dark-text-secondary: rgba(255, 255, 255, 0.85);
      --dark-text-muted: rgba(255, 255, 255, 0.65);
  }

  a {
      color: var(--brand-blue-text);
      /* Use text-safe blue for links */
  }

  a:hover,
  a:focus {
      color: var(--brand-blue-dark);
      text-decoration: unset;
  }

  /* 10. ADD Screen Reader Support */
  .visually-hidden {
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      height: 1px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap;
      width: 1px;
  }

  /* 11. ADD Enhanced Touch Targets for Mobile */
  @media (pointer: coarse) {

      .nav-menu a,
      .mobile-nav-menu a,
      .cta-button,
      .hero-cta,
      .stats-nav-dot {
          /* min-height: 44px; */
          min-width: 44px;
          display: flex;
          align-items: center;
      }
  }

  /* 12. ADD Text Selection Colors for Brand Consistency */
  ::selection {
      background: var(--brand-orange);
      color: white;
  }

  ::-moz-selection {
      background: var(--brand-orange);
      color: white;
  }

  /* 13. ADD Utility Classes for Future Use */
  .text-contrast-high {
      color: var(--text-primary);
  }

  .text-contrast-medium {
      color: var(--text-secondary);
  }

  .text-contrast-low {
      color: var(--text-muted);
  }

  .bg-brand-safe {
      background: var(--brand-orange-text);
      color: white;
  }

  .bg-blue-safe {
      background: var(--brand-blue-text);
      color: white;
  }


  body {
      font-family: 'Manrope', sans-serif;
      line-height: 1.6;
      color: #212529;
      background: #ffffff;
      overflow-x: hidden;
      /* padding-top: 20px; */
  }

  .code,
  .monospace {
      font-family: 'IBM Plex Mono', monospace;
  }


  .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
  }

  /* Skip Link for Accessibility */
  .skip-link {
      position: absolute;
      top: -500px !important;
      left: 6px;
      background: #000;
      color: var(--text-primary);
      padding: 8px;
      text-decoration: none;
      z-index: 10000;
      border-radius: 4px;
  }

  .skip-link:focus {
      top: 6px;
  }

  /* Enhanced Navigation Styles */
   .navbar {
      background: transparent;
       box-shadow: 0 2px 10px rgba(0,0,0,0.08); 
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
  } 

  .nav-container {
      margin: 0 auto;
      padding: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
  }

  .nav-logo {
      display: flex;
      align-items: center;
      gap: 8px;
  }

  .logo-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 56px;
      height: 56px;
      border-radius: 8px;
      color: white;
      font-weight: 700;
      font-size: 18px;
  }

  .logo-icon svg {
      width: 56px;
      height: 56px;
  }

  .logo-text {
      font-size: 24px;
      font-weight: 700;
      color: var(--brand-blue);
      letter-spacing: -0.5px;
  }

  /* Desktop Navigation Menu */
  .nav-menu {
      display: flex;
      list-style: none;
      gap: 0;
      margin: 0;
      padding: 0;
  }

  .nav-menu>li {
      position: relative;
  }

  .nav-menu a {
      display: flex;
      align-items: center;
      text-decoration: none;
      color: var(--dark-text-primary);
      font-weight: 500;
      padding: 12px 20px;
      transition: all 0.3s ease;
      border-radius: 6px;
      position: relative;
  }

  .nav-menu a:hover,
  .nav-menu a:focus {
      color: var(--brand-blue-dark);
      background: rgba(0, 86, 179, 0.05);
      /* outline: 2px solid transparent; */
  }

  .nav-menu a:focus {
      /* outline: 2px solid var(--brand-blue-dark); */
      outline-offset: 2px;
  }

  /* Dropdown Arrow */
  .dropdown-arrow {
      margin-left: 8px;
      transition: transform 0.3s ease;
  }

  .nav-menu li:hover .dropdown-arrow {
      transform: rotate(180deg);
  }

  /* Standard Dropdown Menu */
  .dropdown-menu {
      position: absolute;
      top: 100%;
      left: 0;
      background: #ffffff;
      border: 1px solid #e9ecef;
      border-radius: 8px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
      min-width: 200px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: all 0.3s ease;
      z-index: 1001;
      list-style: none;
  }

  .nav-menu li:hover .dropdown-menu,
  .nav-menu li:focus-within .dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
  }

  .dropdown-menu li {
      border-bottom: 1px solid #f8f9fa;
  }

  .dropdown-menu li:last-child {
      border-bottom: none;
  }

  .dropdown-menu a {
      padding: 12px 20px;
      color: var(--text-secondary);
      font-weight: 400;
      border-radius: 0;
  }

  .dropdown-menu a:hover,
  .dropdown-menu a:focus {
      color: var(--brand-blue-dark);
  }

  /* Mega Menu for Services */
  .mega-menu {
      position: absolute;
      top: 100%;
      left: -200px;
      background: #ffffff;
      border: 1px solid #e9ecef;
      border-radius: 12px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
      width: 800px;
      padding: 40px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-20px);
      transition: all 0.3s ease;
      z-index: 1001;
  }

  .nav-menu li:hover .mega-menu,
  .nav-menu li:focus-within .mega-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
  }

  .mega-menu-content {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
  }

  .mega-menu-section h3 {
      font-size: 16px;
      font-weight: 600;
      color: #212529;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 2px solid var(--brand-blue-dark);
  }

  .mega-menu-section ul {
      list-style: none;
  }

  .mega-menu-section li {
      margin-bottom: 12px;
  }

  .mega-menu-section a {
      color: #495057;
      text-decoration: none;
      font-weight: 400;
      display: flex;
      align-items: center;
      padding: 8px 0;
      transition: color 0.3s ease;
  }

  .mega-menu-section a:hover,
  .mega-menu-section a:focus {
      color: var(--brand-blue-dark);
      background: none;
  }

  .mega-menu-section .service-icon {
      width: 20px;
      height: 20px;
      margin-right: 12px;
      color: var(--brand-orange-text);
  }

  /* Navigation Right Section */
  .nav-right {
      display: flex;
      align-items: center;
      gap: 20px;
  }

  .cta-button {
      background: transparent;
      color: white !important;
      border: 2px solid var(--dark-text-primary);
      padding: 12px 24px !important;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      text-decoration: none;
      display: inline-block;
      line-height: 1;
  }

  .cta-button:hover,
  .cta-button:focus {
      background: #e8640f;
      border-color: #e8640f;
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(214, 116, 22, 0.3);
      outline: 2px solid transparent;
      text-decoration: unset;
      color: white;
  }

  .cta-button:focus {
      outline: 2px solid var(--brand-orange-dark);
      outline-offset: 2px;
  }

  /* Mobile Menu Styles */
  .mobile-menu-toggle {
      display: flex;
      flex-direction: column;
      gap: 4px;
      cursor: pointer;
      padding: 8px;
      border: none;
      background: none;
      border-radius: 4px;
  }

  .mobile-menu-toggle:focus {
      /* outline: 2px solid var(--brand-blue-dark);
            outline-offset: 2px; */
  }

  .mobile-menu-toggle span {
      width: 25px;
      height: 3px;
      background: var(--dark-text-primary);
      border-radius: 2px;
      transition: 0.3s;
  }

  .mobile-menu-toggle.active span:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
  }

  .mobile-menu-toggle.active span:nth-child(2) {
      opacity: 0;
  }

  .mobile-menu-toggle.active span:nth-child(3) {
      transform: rotate(-45deg) translate(5px, -5px);
  }

  /* Mobile Navigation Menu */
  .mobile-nav {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      background: #ffffff;
      z-index: 1001;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-20px);
      transition: all 0.3s ease;
      overflow-y: auto;
  }

  .mobile-nav.active {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
  }

  .mobile-nav.active::after {
      content: '';
      display: block;
      position: absolute;
      width: 100vw;
      height: 100vh;
  }

  .mobile-nav-menu {
      list-style: none;
      padding: 20px;
  }

  li.mobile-home {
      display: flex;
      align-items: center;
      justify-content: space-between;
  }

  .mobile-nav-logo {
      display: flex;
      align-items: center;
      gap: 8px;
  }

  .mobile-nav-logo .logo-icon {
      width: 32px;
      height: 32px;
  }

  .mobile-nav-logo .logo-icon svg {
      width: 32px;
      height: 32px;
  }

  .mobile-nav-logo .logo-text {
      font-size: 20px;
  }

  i#mobile-nav-close {
      font-size: 24px;
      color: #d67416;
  }

  .mobile-nav-menu>li {
      border-bottom: 1px solid #e9ecef;
  }

  .mobile-nav-menu>li:last-child {
      border-bottom: none;
  }

  .mobile-nav-menu a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px 0;
      color: var(--text-primary);
      text-decoration: none;
      font-weight: 500;
  }

  .mobile-nav-menu .mobile-dropdown-arrow {
      transition: transform 0.3s ease;
  }

  .mobile-nav-menu .mobile-dropdown-arrow.rotated {
      transform: rotate(180deg);
  }

  /* Mobile Submenu */
  .mobile-submenu {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
      background: #f8f9fa;
      margin: 0 -20px;
      padding: 0 20px;
  }

  .mobile-submenu.active {
      max-height: 500px;
  }

  .mobile-submenu ul {
      list-style: none;
      padding: 10px 0;
  }

  .mobile-submenu a {
      padding: 10px 20px;
      color: #495057;
      font-weight: 400;
      border-bottom: 1px solid #e9ecef;
  }

  .mobile-submenu a:hover {
      color: var(--text-secondary);
      background: rgba(0, 86, 179, 0.05);
  }

  /* Mobile Mega Menu */
  .mobile-mega-menu {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.5s ease;
      background: #f8f9fa;
      margin: 0 -20px;
      padding: 0 20px;
  }

  .mobile-mega-menu.active {
      max-height: 1000px;
  }

  .mobile-mega-section {
      padding: 15px 0;
      border-bottom: 1px solid #dee2e6;
  }

  .mobile-mega-section:last-child {
      border-bottom: none;
  }

  .mobile-mega-section h3 {
      font-size: 16px;
      font-weight: 600;
      color: var(--brand-blue-dark);
      margin-bottom: 10px;
  }

  .mobile-mega-section ul {
      list-style: none;
  }

  .mobile-mega-section a {
      padding: 8px 0;
      color: var(--text-secondary);
      font-weight: 400;
      display: flex;
      align-items: center;
  }

  .mobile-mega-section .service-icon {
      margin-right: 10px;
      color: var(--brand-orange-text);
  }

  /* Enhanced Hero Section */
  .hero {
      position: relative;
      height: 90vh;
      min-height: 700px;
      /* margin-top: 72px; */
      /* border-radius: 16px; */
      /* margin-left: 20px; */
      /* margin-right: 20px; */
      /* margin-top: 20px; */
      overflow: hidden;
      display: flex;
      align-items: center;
  }

  .hero-slider {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
  }

  .hero-slider::after {
      content: '';
      background: linear-gradient(135deg, rgb(0 0 0 / 70%), rgb(83 38 0 / 50%));
      width: 100%;
      height: 100%;
      z-index: 2;
      position: absolute;
      backdrop-filter: blur(2px);
  }

  .slide {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: 0;
      transition: opacity 1.5s ease-in-out;
  }

  .slide.active {
      opacity: 1;
  }

  .slide-bg {
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  /* Background Video Styling */
  .slide-video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 1;
  }

  /* Background Image Styling */
  .slide-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 1;
  }

  /* Fallback backgrounds for demo */
  .slide-bg-1 {
      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><defs><pattern id="grid" width="50" height="50" patternUnits="userSpaceOnUse"><path d="M 50 0 L 0 0 0 50" fill="none" stroke="%23f8f9fa" stroke-width="1"/></pattern></defs><rect fill="%23e3f2fd" width="100%" height="100%"/><rect fill="url(%23grid)" width="100%" height="100%"/><rect fill="%23ffffff" x="100" y="150" width="1000" height="500" rx="20" opacity="0.9"/><text x="600" y="300" text-anchor="middle" font-family="Inter" font-size="32" fill="%23495057">Modern Development Workspace</text><rect fill="%230056b3" x="200" y="350" width="800" height="200" rx="10" opacity="0.1"/></svg>');
  }

  .slide-bg-2 {
      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><defs><pattern id="dots" width="30" height="30" patternUnits="userSpaceOnUse"><circle cx="15" cy="15" r="2" fill="%23fd7e14" opacity="0.3"/></pattern></defs><rect fill="%23fff3e0" width="100%" height="100%"/><rect fill="url(%23dots)" width="100%" height="100%"/><rect fill="%23ffffff" x="150" y="100" width="900" height="600" rx="15" opacity="0.95"/><text x="600" y="300" text-anchor="middle" font-family="Inter" font-size="32" fill="%23495057">Collaborative Team Environment</text><rect fill="%23fd7e14" x="250" y="400" width="700" height="150" rx="8" opacity="0.1"/></svg>');
  }

  .slide-bg-3 {
      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><defs><linearGradient id="tech-grad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%230056b3;stop-opacity:0.1"/><stop offset="100%" style="stop-color:%23fd7e14;stop-opacity:0.1"/></linearGradient></defs><rect fill="%23f8f9fa" width="100%" height="100%"/><rect fill="url(%23tech-grad)" width="100%" height="100%"/><rect fill="%23ffffff" x="200" y="200" width="800" height="400" rx="12" opacity="0.9"/><text x="600" y="350" text-anchor="middle" font-family="Inter" font-size="32" fill="%23495057">Innovation &amp; Technology</text><rect fill="%230056b3" x="300" y="450" width="600" height="100" rx="6" opacity="0.1"/></svg>');
  }

  /* Video Controls */
  .video-controls {
      position: absolute;
      bottom: 50px;
      left: 20px;
      z-index: 3;
      display: flex;
      gap: 10px;
  }

  .video-control-btn {
      background: rgba(0, 0, 0, 0.6);
      border: 2px solid rgba(255, 255, 255, 0.3);
      color: white;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 14px;
  }

  .video-control-btn:hover,
  .video-control-btn:focus {
      background: rgba(0, 0, 0, 0.8);
      border-color: var(--brand-orange-dark);
      transform: scale(1.1);
  }

  .slide.has-video .video-controls {
      display: flex;
  }

  .slide:not(.has-video) .video-controls {
      display: none;
  }

  /* Decorative Elements */
  .hero-decorations {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 3;
      pointer-events: none;
  }

  .dots-pattern {
      position: absolute;
      width: 200px;
      height: 150px;
      opacity: 0.4;
  }

  .dots-left {
      top: 15%;
      left: 5%;
      background: radial-gradient(circle, rgba(0, 86, 179, 0.6) 2px, transparent 2px);
      background-size: 20px 20px;
  }

  .dots-right {
      bottom: 20%;
      right: 8%;
      background: radial-gradient(circle, rgba(253, 126, 20, 0.6) 2px, transparent 2px);
      background-size: 15px 15px;
  }

  .geometric-lines {
      position: absolute;
      top: 30%;
      right: 25%;
      width: 300px;
      height: 200px;
      opacity: 0.2;
      background: linear-gradient(45deg, transparent 49%, rgba(0, 86, 179, 0.4) 49%, rgba(0, 86, 179, 0.4) 51%, transparent 51%),
          linear-gradient(-45deg, transparent 49%, rgba(253, 126, 20, 0.4) 49%, rgba(253, 126, 20, 0.4) 51%, transparent 51%);
      background-size: 30px 30px;
  }

  /* Hero Touch Controls */
  .hero-controls {
      position: absolute;
      bottom: 64px;
      /* left: 50%;
            transform: translateX(-50%); */
      z-index: 4;
      display: flex;
      gap: 15px;
      right: 40px;
  }

  .hero-control-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.4);
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
  }

  .hero-control-dot.active {
      background: var(--brand-orange-text);
      transform: scale(1.2);
  }

  /* Hero Content */
  .hero-content {
      position: relative;
      z-index: 4;
      width: 100%;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
  }

  .content-wrapper {
      /* max-width: 700px;
            margin-left: 60px; */
  }

  .hero-headline {
      font-size: 3.3333333333rem;
      font-weight: 500;
      color: white;
      line-height: 1.1;
      margin-bottom: 30px;
  }

  .hero-headline .highlight {
      color: #ffc947;
  }

  .hero-subtext {
      font-size: 18px;
      color: rgba(255, 255, 255, 0.95);
      line-height: 1.6;
      margin-bottom: 35px;
      max-width: 600px;
  }

  .hero-cta {
      background: var(--brand-orange-text);
      color: white;
      border: none;
      padding: 16px 32px;
      font-size: 16px;
      font-weight: 600;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
      text-decoration: none;
      display: inline-block;
  }

  .hero-cta:hover,
  .hero-cta:focus {
      background: #e8640f;
      transform: translateY(-2px);
      box-shadow: 0 12px 35px rgba(214, 116, 22, 0.4);
      outline: 2px solid transparent;
      text-decoration: unset;
      color: white;
  }

  .hero-cta:focus {
      outline: 2px solid #ffc947;
      outline-offset: 2px;
  }

  /* Enhanced Statistics Bar */
  .stats-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.45);
      backdrop-filter: blur(15px);
      z-index: 5;
      padding: 8px 0;
      overflow: hidden;
  }

  .stats-container {
      position: relative;
      overflow: hidden;
  }

  .stats-grid {
      display: flex;
      transition: transform 0.3s ease;
  }

  .stat-item {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-width: 20%;
      flex-shrink: 0;
  }

  /* Animated Spark Icon - Rotate + Scale + Brightness */
  .stat-circle {
      width: 16px;
      height: 16px;
      background: none;
      flex-shrink: 0;
      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 304.05 302.82"><path fill="%23d67416" d="M385.63,2212.85c-3.83-.06-6.68-2.56-8-7.16-3.57-12.43-7.18-24.85-10.62-37.31q-19.14-69.26-88.45-88.51c-12.47-3.47-24.91-7-37.37-10.58-4.88-1.38-7.44-4.16-7.47-8.12s2.54-6.8,7.37-8.2c16.74-4.84,33.84-8.71,50.15-14.72,38.67-14.27,63.44-41.92,74.92-81.42,3.82-13.14,7.53-26.3,11.3-39.45,1.38-4.81,4.17-7.3,8.21-7.34s7,2.51,8.35,7.19c4.84,16.59,8.73,33.53,14.73,49.7,14.31,38.6,42.06,63.25,81.64,74.67,13.27,3.83,26.58,7.54,39.87,11.35,5,1.43,7.45,4.11,7.51,8.07s-2.46,6.81-7.69,8.32c-15.31,4.41-30.83,8.22-45.91,13.31-40.68,13.73-66.77,41.66-78.81,82.72-3.92,13.37-7.63,26.79-11.46,40.18C392.53,2210.35,389.58,2212.92,385.63,2212.85Z" transform="translate(-233.72 -1910.04)"/></svg>');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      animation: sparkle 2s ease-in-out infinite;
  }

  @keyframes sparkle {

      0%,
      100% {
          transform: scale(1) rotate(0deg);
          filter: brightness(1);
      }

      25% {
          transform: scale(1.1) rotate(45deg);
          filter: brightness(1.2);
      }

      50% {
          transform: scale(1.05) rotate(90deg);
          filter: brightness(1.1);
      }

      75% {
          transform: scale(1.15) rotate(135deg);
          filter: brightness(1.3);
      }
  }

  /* Numbers - Glow Pulse Effect with Text-Shadow */
  .stat-number {
      font-size: 16px;
      font-weight: 700;
      color: #ffc947;
      animation: glowPulse 2s ease-in-out infinite;
  }

  @keyframes glowPulse {

      0%,
      100% {
          text-shadow: 0 0 10px rgba(255, 201, 71, 0.3);
      }

      50% {
          text-shadow:
              0 0 20px rgba(255, 201, 71, 0.6),
              0 0 30px rgba(255, 201, 71, 0.4),
              0 0 40px rgba(255, 201, 71, 0.2);
      }
  }

  /* Text - Subtle Shimmer Sweep Effect */
  .stat-text {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.9);
      background: linear-gradient(90deg,
              rgba(255, 255, 255, 0.9) 0%,
              rgba(255, 255, 255, 1) 50%,
              rgba(255, 255, 255, 0.9) 100%);
      background-size: 200% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      animation: shimmer 3s ease-in-out infinite;
  }

  @keyframes shimmer {

      0%,
      100% {
          background-position: -200% 0;
      }

      50% {
          background-position: 200% 0;
      }
  }

  /* Reduced Motion Support */
  @media (prefers-reduced-motion: reduce) {

      .stat-circle,
      .stat-number,
      .stat-text {
          animation: none !important;
      }
  }

  /* Stats Navigation Dots */
  .stats-nav {
      display: none;
      justify-content: center;
      gap: 8px;
      margin-top: 15px;
  }

  .stats-nav-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      cursor: pointer;
      transition: all 0.3s ease;
  }

  .stats-nav-dot.active {
      background: var(--brand-orange-text);
  }

  /* Responsive Design */

  /* Large PC Screen (1200px and above) */
  @media (min-width: 1200px) {


      .hero-headline {
          font-size: 3.3333333333rem;
      }

      .mega-menu {
          width: 900px;
          left: -250px;
      }
  }

  /* Medium PC Screen (992px to 1199px) */
  @media (min-width: 992px) and (max-width: 1199px) {
      .hero-headline {
          font-size: 2.7777777778rem;
      }

      .mega-menu {
          width: 700px;
          left: -150px;
      }

      .mega-menu-content {
          grid-template-columns: repeat(2, 1fr);
          gap: 30px;
      }
  }

  /* Tablet View (768px to 991px) */
  @media (min-width: 768px) and (max-width: 991px) {

      .nav-menu {
          display: none;
      }

      .mobile-menu-toggle {
          display: flex;
      }

      .hero {
          /* height: 80vh; */
          min-height: 600px;
          margin-left: 15px;
          margin-right: 15px;
      }

      .content-wrapper {
          margin-left: 40px;
          max-width: 90%;
      }

      .hero-headline {
          font-size: 2rem;
      }

      .hero-subtext {
          font-size: 16px;
      }

      /* Stats as slideshow for tablet */
      .stats-grid {
          justify-content: flex-start;
      }

      .stat-item {
          min-width: 50%;
      }

      .stats-nav {
          /* display: flex; */
      }
  }

  /* Mobile View (767px and below) */
  @media (max-width: 767px) {

      .nav-menu,
      .cta-button {
          display: none;
      }

      .mobile-menu-toggle {
          display: flex;
      }

      .mobile-submenu a {
          padding: 8px;
      }

      .mobile-mega-section {
          padding: 8px;
      }

      .hero {
          margin-left: 10px;
          margin-right: 10px;
          /* height: 75vh; */
          min-height: 500px;
      }

      .content-wrapper {
          margin-left: 20px;
          max-width: 95%;
      }

      .hero-headline {
          font-size: 2rem;
      }

      .hero-subtext {
          font-size: 14px;
      }

      .hero-cta {
          padding: 14px 28px;
          font-size: 14px;
      }

      /* Stats as slideshow for mobile */
      .stats-grid {
          justify-content: flex-start;
      }

      .stat-item {
          min-width: 100%;
          text-align: center;
      }

      .stats-nav {
          /* display: flex; */
      }

      .stats-bar {
          padding: 8px 0;
      }

      /* Mobile decorative adjustments */
      .dots-left,
      .dots-right,
      .geometric-lines {
          display: none;
      }

      .hero-controls {
          bottom: 65px;
          right: 24px;
      }
  }

  /* Small Mobile (480px and below) */
  @media (max-width: 480px) {

      .container {
          padding: 0 15px;
      }

      .hero-headline {
          font-size: 2rem;
          line-height: 1.2;
      }

      .logo-text {
          font-size: 20px;
      }

      .mobile-nav-menu {
          padding: 15px;
      }
  }

  /* Touch and Swipe Support */
  .touch-enabled {
      touch-action: pan-y;
  }

  .swipe-indicator {
      position: absolute;
      bottom: 20px;
      right: 20px;
      color: rgba(255, 255, 255, 0.6);
      font-size: 12px;
      z-index: 4;
  }

  /* Focus management and keyboard navigation */
  .nav-menu li:focus-within>a,
  .nav-menu a:focus {
      /* outline: 2px solid var(--brand-blue-dark);
            outline-offset: 2px; */
  }

  /* High contrast mode support */
  @media (prefers-contrast: high) {
      .hero-slider::after {
          background: rgba(0, 0, 0, 0.9);
      }

      .hero-headline {
          text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
      }

      .hero-subtext {
          text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
      }
  }

  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {

      .slide,
      .dropdown-menu,
      .mega-menu,
      .hero-cta,
      .cta-button,
      .nav-menu a,
      .stats-grid {
          transition: none;
      }

      .hero-slider::after {
          backdrop-filter: none;
      }
  }

  /* Screen Reader Only Styles */
  .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
  }

  .focused {
      /* outline: 3px solid var(--brand-blue-dark) !important;
            outline-offset: 2px !important; */
  }



  /* Navigation Overlay Base Styles */
  .nav-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: radial-gradient(ellipse at top left, rgb(13 143 208 / 32%) 0%, #00000014 50%), radial-gradient(ellipse at top right, rgb(217 111 13 / 33%) 0%, #00000029 50%), radial-gradient(ellipse at bottom left, rgb(11 101 147 / 23%) 0%, #00000014 50%), radial-gradient(ellipse at bottom right, rgb(131 67 6 / 29%) 0%, transparent 50%), linear-gradient(135deg, var(--dark-bg-primary) 0%, var(--dark-bg-secondary) 25%, #1a2030 50%, var(--dark-bg-secondary) 75%, var(--dark-bg-primary) 100%);
      backdrop-filter: blur(20px);
      z-index: 9999;
      opacity: 0;
      visibility: hidden;
      transition: all 0.4s ease;
      display: flex;
  }

  .nav-overlay.active {
      opacity: 1;
      visibility: visible;
  }

  /* Close Button */
  .nav-close {
      position: absolute;
      top: 22px;
      right: 56px;
      background: none;
      border: none;
      color: white;
      font-size: 28px;
      cursor: pointer;
      padding: 10px;
      border-radius: 50%;
      transition: all 0.3s ease;
      z-index: 10000;
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .nav-close:hover {
      background: rgba(255, 255, 255, 0.1);
      transform: rotate(90deg);
  }

  /* Submenu Links Styling */
  .submenu-links {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1rem;
      margin: 2rem 0;
  }

  .submenu-link {
      display: flex;
      align-items: center;
      padding: 1rem;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      color: #fff;
      text-decoration: none;
      transition: all 0.3s ease;
      backdrop-filter: blur(10px);
  }

  .submenu-link:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.2);
      transform: translateY(-2px);
      color: #64b5f6;
  }

  .submenu-link i {
      margin-right: 0.75rem;
      font-size: 1.1rem;
      color: #64b5f6;
  }

  /* Content Sections */
  .content-section {
      opacity: 1;
      transition: opacity 0.3s ease;
      animation: fadeInUp 0.4s ease-out;
  }

  .content-section.hidden {
      display: none;
  }

  @keyframes fadeInUp {
      from {
          opacity: 0;
          transform: translateY(20px);
      }

      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  .content-title {
      font-size: 3rem;
      font-weight: 300;
      color: white;
      margin-bottom: 30px;
      letter-spacing: -1px;
  }

  .content-description {
      font-size: 1.1rem;
      color: rgba(255, 255, 255, 0.9);
      line-height: 1.7;
      margin-bottom: 40px;
      max-width: 600px;
  }

  .content-button {
      background: #d67416;
      color: white;
      border: none;
      padding: 16px 32px;
      font-size: 1rem;
      font-weight: 600;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
      text-decoration: none;
      display: inline-block;
      box-shadow: 0 6px 20px rgba(214, 116, 22, 0.3);
      width: fit-content;
  }

  .content-button:hover {
      background: #e8640f;
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(214, 116, 22, 0.4);
      color: white;
      text-decoration: none;
  }

  /* Impact Stats */
  .impact-stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 40px;
      margin: 40px 0;
  }

  .impact-stat {
      text-align: left;
  }

  .impact-number {
      font-size: 3rem;
      font-weight: 700;
      color: #ffc947;
      margin-bottom: 10px;
      line-height: 1;
  }

  .impact-label {
      font-size: 1rem;
      color: rgba(255, 255, 255, 0.8);
      line-height: 1.4;
  }

  /* Contact Locations */
  .contact-locations {
      margin: 40px 0;
  }

  .location {
      padding: 20px 0;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      padding: 1.5rem;
      backdrop-filter: blur(10px);
  }

  .location-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
  }

  .location-flag {
      width: 24px;
      height: 18px;
      border-radius: 2px;
      background: linear-gradient(to bottom, #ff9933, #ffffff, #138808);
  }

  .location-name {
      font-size: 1.2rem;
      font-weight: 600;
      color: white;
  }

  .location-details {
      color: rgba(255, 255, 255, 0.8);
      line-height: 1.6;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
  }

  .location-phone,
  .location-email {
      display: block;
      margin-bottom: 8px;
      text-decoration: none;
      color: rgba(255, 255, 255, 0.8);
      transition: color 0.3s ease;
  }

  .location-phone:hover,
  .location-email:hover {
      color: #ffc947;
  }

  /* Desktop Navigation - Only show on screens >= 1200px */
  @media (min-width: 1400px) {
    .submenu-links{
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
  }
  @media (min-width: 1200px) {
      .nav-overlay-content {
          display: flex !important;
          width: 100%;
          height: 100%;
          max-height: 85%;
          max-width: 85%;
          margin: auto;
      }

      .nav-content-left {
          flex: 1;
          padding: 0 60px 0 0;
          display: flex !important;
          flex-direction: column;
          justify-content: center;
          transform: translateX(-30px);
          transition: transform 0.4s ease 0.1s;
      }

      .nav-content-right {
          width: 30%;
          transform: translateX(30px);
          transition: transform 0.4s ease 0.2s;
          display: flex;
          align-items: center;
      }

      .nav-overlay.active .nav-content-left {
          transform: translateX(0);
      }

      .nav-overlay.active .nav-content-right {
          transform: translateX(0);
      }

      .main-nav-menu {
          list-style: none;
          padding: 0;
          margin: 0;
          flex: 1;
          display: flex;
          flex-direction: column;
      }

      .main-nav-link {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 18px 0;
          color: var(--dark-text-primary);
          text-decoration: none;
          font-size: 2.5rem;
          font-weight: 300;
          transition: all 0.3s ease;
          position: relative;
          opacity: .6;
          line-height: 1;
      }

      .main-nav-link.active,
      .main-nav-link:hover,
      .main-nav-link:focus {
          opacity: 1;
          color: var(--dark-text-primary);
          letter-spacing: .01em;
      }

      /* Hide submenus on desktop */
      .submenu-expanded {
          display: none !important;
      }
  }

  /* Mobile/Tablet Navigation - Only show on screens < 1200px */
  @media (max-width: 1199px) {

      /* Force hide desktop content */
      .nav-content-left {
          display: none !important;
      }

      /* Make navigation full width and centered */
      .nav-overlay-content {
          display: flex !important;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          max-width: 450px;
          margin: 0 auto;
          padding: 4rem 2rem 2rem 2rem;
          height: 100vh;
          overflow-y: auto;
          width: 100%;
      }

      .nav-content-right {
          width: 100% !important;
          max-width: none;
          margin: 0;
          display: flex !important;
          align-items: flex-start;
      }

      /* Vertical menu styling */
      .main-nav-menu {
          list-style: none;
          margin: 0;
          padding: 0;
          width: 100%;
      }

      .main-nav-item {
          margin-bottom: 0;
          border-bottom: 1px solid rgba(255, 255, 255, 0.08);
          width: 100%;
      }

      .main-nav-item:last-child {
          border-bottom: none;
      }

      .main-nav-link {
          display: flex !important;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          padding: 1.75rem 0;
          color: rgba(255, 255, 255, 0.9);
          text-decoration: none;
          font-size: 1.4rem;
          font-weight: 400;
          transition: all 0.3s ease;
          border-radius: 0;
          margin-bottom: 0;
          background: none !important;
          border: none !important;
          border-left: none !important;
          letter-spacing: -0.02em;
      }

      .main-nav-link:hover {
          color: #64b5f6;
          background: none !important;
      }

      .main-nav-link.active {
          color: #64b5f6;
          background: none !important;
          border-left: none !important;
      }

      .main-nav-link.active .dropdown-arrow {
          transform: rotate(180deg);
          color: #64b5f6;
      }

      .dropdown-arrow {
          font-size: 1.1rem;
          opacity: 0.6;
          color: rgba(255, 255, 255, 0.6);
          transition: all 0.3s ease;
          margin-left: 1rem;
      }

      /* Hide dropdown arrows for Blog and Contact */
      .main-nav-item:nth-last-child(1) .dropdown-arrow,
      .main-nav-item:nth-last-child(2) .dropdown-arrow {
          display: none;
      }

      /* Expandable submenu styling */
      .submenu-expanded {
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.4s ease-out;
          background: rgba(255, 255, 255, 0.02);
          margin-top: 0;
          border-top: 1px solid rgba(255, 255, 255, 0.05);
          width: 100%;
      }

      .submenu-expanded.active {
          max-height: 600px;
          padding: 1.5rem 0 1rem 0;
      }

      .submenu-expanded .submenu-item {
          display: block;
          padding: 1rem 1.5rem;
          color: rgba(255, 255, 255, 0.7);
          text-decoration: none;
          font-size: 1.05rem;
          font-weight: 300;
          border-bottom: none;
          transition: all 0.3s ease;
          letter-spacing: -0.01em;
          width: 100%;
          box-sizing: border-box;
      }

      .submenu-expanded .submenu-item:last-child {
          border-bottom: none;
      }

      .submenu-expanded .submenu-item:hover {
          color: #64b5f6;
          background: rgba(100, 181, 246, 0.05);
          padding-left: 2rem;
      }

      .submenu-expanded .submenu-item i {
          margin-right: 1rem;
          font-size: 1rem;
          color: #64b5f6;
          width: 18px;
          opacity: 0.8;
      }

      /* Close button positioning */
      .nav-close {
          position: absolute !important;
          top: 2rem;
          right: 2rem;
          background: none;
          border: none;
          color: rgba(255, 255, 255, 0.8);
          font-size: 1.5rem;
          cursor: pointer;
          padding: 0.5rem;
          transition: all 0.3s ease;
          z-index: 1000;
          width: 50px;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
      }

      .nav-close:hover {
          color: #fff;
          transform: scale(1.1);
          background: rgba(255, 255, 255, 0.1);
      }
  }

  @media (max-width: 768px) {
      .nav-overlay-content {
          padding: 2.5rem 1.5rem 1.5rem 1.5rem;
          max-width: 100%;
      }

      .main-nav-link {
          font-size: 1.2rem;
          padding: 1.5rem 0;
      }

      .submenu-expanded .submenu-item {
          font-size: 1rem;
          padding: 0.85rem 1.25rem;
      }

      .nav-close {
          top: 1.5rem;
          right: 1.5rem;
          font-size: 1.3rem;
          width: 40px;
          height: 40px;
      }
  }



  /* Partners Carousel Section */
  .partners-section {
      padding: 48px 0;
      position: relative;
      overflow: hidden;
  }

  .partners-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><defs><pattern id="partners-dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="2" cy="2" r="1" fill="%23e9ecef" opacity="0.5"/></pattern></defs><rect fill="url(%23partners-dots)" width="100%" height="100%"/></svg>');
      opacity: 0.3;
      pointer-events: none;
  }

  .partners-content {
      text-align: center;
      position: relative;
      z-index: 2;
  }

  .partners-title {
      font-size: 42px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 16px;
      position: relative;
  }

  .partners-title::after {
      content: '';
      position: absolute;
      bottom: -8px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 3px;
      background: linear-gradient(90deg, var(--brand-orange-text), var(--brand-blue-text));
      border-radius: 2px;
  }

  .partners-subtitle {
      font-size: 18px;
      color: var(--text-secondary);
      margin-bottom: 60px;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
  }

  .partners-carousel-wrapper {
      overflow: hidden;
      position: relative;
      mask-image: linear-gradient(to right,
              transparent 0%,
              black 10%,
              black 90%,
              transparent 100%);
      -webkit-mask-image: linear-gradient(to right,
              transparent 0%,
              black 10%,
              black 90%,
              transparent 100%);
  }

  .partners-carousel {
      display: flex;
      gap: 60px;
      animation: scrollLogos 40s linear infinite;
      width: fit-content;
  }

  @keyframes scrollLogos {
      0% {
          transform: translateX(0);
      }

      100% {
          transform: translateX(-50%);
      }
  }

  .partner-logo {
      flex-shrink: 0;
      width: 180px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
  }

  .partner-logo::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg,
              transparent,
              rgba(255, 255, 255, 0.6),
              transparent);
      transition: left 0.6s ease;
  }

  .partner-logo:hover::before {
      left: 100%;
  }

  .partner-logo:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 30px rgba(0, 86, 179, 0.1);
  }

  .partner-logo img {
      width: 140px;
      height: auto;
      max-height: 50px;
      object-fit: contain;
      opacity: 0.7;
      transition: all 0.3s ease;
      filter: grayscale(1);
  }

  .partner-logo:hover img {
      opacity: 1;
      filter: grayscale(0);
      transform: scale(1.05);
  }

  /* Pause animation on hover */
  .partners-carousel-wrapper:hover .partners-carousel {
      animation-play-state: paused;
  }

  /* Responsive Design */
  @media (min-width: 1200px) {
      .partners-title {
          font-size: 48px;
      }

      .partners-carousel {
          gap: 80px;
      }

      .partner-logo {
          width: 200px;
      }
  }

  @media (max-width: 991px) {
      .partners-section {
          padding: 40px 0;
      }

      .partners-title {
          font-size: 36px;
      }

      .partners-subtitle {
          font-size: 16px;
          margin-bottom: 40px;
      }

      .partners-carousel {
          gap: 40px;
          animation-duration: 35s;
      }

      .partner-logo {
          width: 160px;
      }

      .partner-logo img {
          width: 120px;
          max-height: 40px;
      }
  }

  @media (max-width: 767px) {
      .partners-section {
          padding: 40px 0;
      }

      .partners-title {
          font-size: 28px;
      }

      .partners-subtitle {
          font-size: 14px;
          margin-bottom: 30px;
      }

      .partners-carousel {
          gap: 30px;
          animation-duration: 30s;
      }

      .partner-logo {
          width: 140px;
          height: 60px;
      }

      .partner-logo img {
          width: 100px;
      }
  }

  @media (max-width: 480px) {
      .partners-title {
          font-size: 24px;
      }

      .partners-carousel {
          gap: 25px;
          animation-duration: 25s;
      }

      .partner-logo {
          width: 120px;
          height: 55px;
      }

      .partner-logo img {
          width: 90px;
          max-height: 30px;
      }
  }

  /* Reduced Motion Support */
  @media (prefers-reduced-motion: reduce) {
      .partners-carousel {
          animation: none;
      }

      .partners-carousel-wrapper {
          mask-image: none;
          -webkit-mask-image: none;
      }

      .partners-carousel {
          flex-wrap: wrap;
          justify-content: center;
          gap: 30px;
      }

      .partner-logo::before {
          display: none;
      }
  }

  /* High Contrast Support */
  @media (prefers-contrast: high) {
      .partner-logo {
          border: 2px solid #333;
      }

      .partner-logo img {
          opacity: 1;
          filter: contrast(1.2);
      }
  }

  /* Focus Management for Accessibility */
  .partner-logo:focus-within {
      outline: 2px solid var(--brand-blue-dark);
      outline-offset: 4px;
  }

  /* Screen Reader Support */
  .partners-carousel[aria-label]::before {
      content: attr(aria-label);
      position: absolute;
      left: -10000px;
      width: 1px;
      height: 1px;
      overflow: hidden;
  }


  /* About Us Section */
  .about-section {
      padding: 40px 0 80px;
      background: #ffffff;
      position: relative;
  }

  .about-content {
      position: relative;
      z-index: 2;
  }

  /* Section Header */
  .about-header {
      margin-bottom: 48px;
  }

  .section-badge {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 24px;
  }

  .badge-dot {
      width: 6px;
      height: 6px;
      background: var(--brand-orange-text);
      border-radius: 50%;
  }

  .badge-text {
      font-size: 13px;
      font-weight: 500;
      color: var(--brand-orange-text);
      letter-spacing: 0.5px;
      text-transform: uppercase;
  }

  .about-title {
      font-size: 3.3333333333rem;
      font-weight: 400;
      color: var(--text-primary);
      line-height: 1.15;
      margin: 0;
      /* max-width: 800px; */
  }

  /* Main Content Grid */
  .about-main-grid {
      display: grid;
      grid-template-columns: 420px 1fr;
      gap: 120px;
      align-items: start;
  }

  /* Team Image Section */
  .about-image-section {
      position: relative;
  }

  .team-image-container {
      position: relative;
      width: 100%;
      height: 520px;
      border-radius: 20px;
      overflow: hidden;
      background: #f8f9fa;
  }

  .team-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
  }

  .image-overlay-geometric {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 80px;
      height: 100px;
      background: linear-gradient(135deg, rgba(237, 131, 33, 0.9) 0%, rgba(253, 126, 20, 0.8) 100%);
      border-radius: 8px;
      opacity: 0.95;
  }

  .image-overlay-geometric::before {
      content: '';
      position: absolute;
      top: -10px;
      right: -10px;
      width: 60px;
      height: 80px;
      background: linear-gradient(135deg, rgba(237, 131, 33, 0.6) 0%, rgba(253, 126, 20, 0.5) 100%);
      border-radius: 6px;
      z-index: -1;
  }

  /* Statistics Grid */

  .stats-grid-about {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
  }

  .stat-card {
      background: #ffffff;
      border: 1px solid #f1f3f4;
      border-radius: 16px;
      padding: 24px 20px;
      position: relative;
      transition: all 0.3s ease;
      min-height: 200px;
  }

  .stat-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
      border-color: #e1e5e9;
  }

  .stat-primary {
      background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
  }

  .stat-secondary {
      background: linear-gradient(135deg, #ffffff 0%, #fffaf7 100%);
  }

  .stat-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 16px;
  }

  .stat-label {
      font-size: 13px;
      font-weight: 600;
      color: #4b5158;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      line-height: 1.2;
  }

  .stat-arrow {
      width: 24px;
      height: 24px;
      background: rgba(139, 148, 158, 0.1);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #8b949e;
      font-size: 12px;
      transition: all 0.3s ease;
      flex-shrink: 0;
  }

  .stat-card:hover .stat-arrow {
      background: var(--brand-blue-text);
      color: white;
      transform: translateX(2px) translateY(-2px);
  }

  .stat-value {
      font-size: 32px;
      font-weight: 400;
      color: var(--text-primary);
      line-height: 1;
      margin-bottom: 16px;
  }

  .stat-unit {
      font-size: 16px;
      font-weight: 400;
      color: var(--text-secondary);
      margin-left: 4px;
  }

  .stat-description {
      font-size: 16px;
      color: var(--text-secondary);
      line-height: 1.5;
      font-weight: 400;
  }

  /* Responsive Design */
  @media (min-width: 1400px) {
      .about-title {
          font-size: 3.3333333333rem;
      }

      .about-main-grid {
          grid-template-columns: 480px 1fr;
          gap: 140px;
      }

      .team-image-container {
          height: 580px;
      }
  }

  @media (min-width: 1200px) and (max-width: 1399px) {
      .about-main-grid {
          gap: 100px;
      }

      .about-title {
          font-size: 3.3333333333rem;
      }
  }

  @media (max-width: 1199px) {
      .about-main-grid {
          grid-template-columns: 380px 1fr;
          gap: 80px;
      }

      .about-title {
          font-size: 3.3333333333rem;
      }

      .team-image-container {
          height: 480px;
      }
  }

  @media (max-width: 991px) {
      .about-section {
          padding: 60px 0 60px;
      }

      .about-main-grid {
          grid-template-columns: 1fr;
          gap: 60px;
      }

      .about-title {
          font-size: 2.7777777778rem;
          text-align: center;
      }

      .about-header {
          text-align: center;
          margin-bottom: 48px;
      }

      .team-image-container {
          height: 400px;
          max-width: 420px;
          margin: 0 auto;
      }

      .about-stats-section {
          padding-top: 0;
      }
  }

  @media (max-width: 767px) {
      .about-section {
          padding: 50px 0 50px;
      }

      .about-title {
          font-size: 2rem;
          line-height: 1.25;
      }

      .about-header {
          margin-bottom: 50px;
      }

      .stats-grid-about {
          grid-template-columns: 1fr;
          gap: 24px;
      }

      .stat-card {
          padding: 28px 24px;
          min-height: auto;
      }

      .stat-value {
          font-size: 40px;
      }

      .team-image-container {
          height: 320px;
      }

      .image-overlay-geometric {
          width: 60px;
          height: 80px;
          top: 15px;
          right: 15px;
      }

      .image-overlay-geometric::before {
          width: 45px;
          height: 60px;
          top: -8px;
          right: -8px;
      }
  }

  @media (max-width: 480px) {
      .about-title {
          font-size: 2rem;
      }

      .stat-card {
          padding: 24px 20px;
      }

      .stat-value {
          font-size: 36px;
      }

      .stat-description {
          font-size: 14px;
      }

      .team-image-container {
          height: 280px;
      }
  }

  /* Reduced Motion Support */
  @media (prefers-reduced-motion: reduce) {

      .stat-card,
      .stat-arrow {
          transition: none;
      }

      .stat-card:hover {
          transform: none;
      }

      .stat-card:hover .stat-arrow {
          transform: none;
      }
  }

  /* High Contrast Support */
  @media (prefers-contrast: high) {
      .stat-card {
          border: 2px solid #666;
      }

      .stat-arrow {
          border: 1px solid #666;
      }
  }

  /* Focus States for Accessibility */
  .stat-card:focus-within {
      outline: 2px solid var(--brand-blue-dark);
      outline-offset: 4px;
  }

  .team-image:focus {
      outline: 2px solid var(--brand-blue-dark);
      outline-offset: 4px;
  }


  /* Bottom Statistics Counter */
  .bottom-stats-counter {
      margin-top: 24px;
      padding: 0;
      position: relative;
  }

  .bottom-stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 56px;
      border-radius: 16px;
      position: relative;
      overflow: hidden;
  }


  .bottom-stat-item {
      text-align: center;
      position: relative;
      z-index: 2;
  }

  .bottom-stat-item::after {
      content: '';
      position: absolute;
      right: -30px;
      top: 50%;
      transform: translateY(-50%);
      width: 1px;
      height: 80px;
      background: linear-gradient(to bottom, transparent, #d1d5db, transparent);
  }

  .bottom-stat-item:last-child::after {
      display: none;
  }

  .bottom-stat-number {
      font-size: 32px;
      font-weight: 500;
      background: linear-gradient(135deg, var(--brand-blue-light) 0%, var(--brand-orange-light) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1;
      margin-bottom: 16px;
      transition: all 0.3s ease;
  }

  .bottom-stat-label {
      font-size: 16px;
      color: var(--text-secondary);
      font-weight: 400;
      line-height: 1.4;
  }

  /* Hover Effects */
  .bottom-stat-item:hover .bottom-stat-number {
      transform: scale(1.05);
      filter: brightness(1.1);
  }

  /* Animation on Scroll */
  .bottom-stat-item {
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.6s ease;
  }

  .bottom-stats-counter.animate-in .bottom-stat-item {
      opacity: 1;
      transform: translateY(0);
  }

  .bottom-stats-counter.animate-in .bottom-stat-item:nth-child(1) {
      transition-delay: 0.1s;
  }

  .bottom-stats-counter.animate-in .bottom-stat-item:nth-child(2) {
      transition-delay: 0.2s;
  }

  .bottom-stats-counter.animate-in .bottom-stat-item:nth-child(3) {
      transition-delay: 0.3s;
  }

  .bottom-stats-counter.animate-in .bottom-stat-item:nth-child(4) {
      transition-delay: 0.4s;
  }

  /* Responsive Design */
  @media (min-width: 1200px) {
      .bottom-stats-grid {
          gap: 56px;
      }

      .bottom-stat-number {
          font-size: 32px;
      }

      .bottom-stat-label {
          font-size: 15px;
      }
  }

  @media (max-width: 991px) {

      .bottom-stats-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 40px;
      }

      .bottom-stat-item::after {
          display: none;
      }

      .bottom-stat-number {
          font-size: 32px;
      }
  }

  @media (max-width: 767px) {
      .bottom-stats-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 40px;
          text-align: center;
      }

      .bottom-stat-number {
          font-size: 32px;
      }

      .bottom-stat-label {
          font-size: 14px;
      }
  }

  @media (max-width: 480px) {


      .bottom-stat-number {
          font-size: 32px;
      }

      .bottom-stat-label {
          font-size: 14px;
      }
  }

  /* Reduced Motion Support */
  @media (prefers-reduced-motion: reduce) {

      .bottom-stat-item,
      .bottom-stat-number {
          transition: none;
          opacity: 1;
          transform: none;
      }

      .bottom-stat-item:hover .bottom-stat-number {
          transform: none;
      }
  }

  /* High Contrast Support */
  @media (prefers-contrast: high) {
      .bottom-stats-grid {
          border: 2px solid #333;
      }

      .bottom-stat-number {
          background: none;
          -webkit-text-fill-color: initial;
          color: var(--text-primary);
      }
  }

  /* Accessibility Focus States */
  .bottom-stat-item:focus-within {
      outline: 2px solid var(--brand-blue-dark);
      outline-offset: 4px;
      border-radius: 8px;
  }


  /* Mixed Theme - Dark "Why Hire Us" Section */
  .why-hire-us-section {
      background:
          radial-gradient(ellipse at top left, rgb(13 143 208 / 32%) 0%, #00000014 50%), radial-gradient(ellipse at top right, rgb(217 111 13 / 33%) 0%, #00000029 50%), radial-gradient(ellipse at bottom left, rgb(11 101 147 / 23%) 0%, #00000014 50%), radial-gradient(ellipse at bottom right, rgb(131 67 6 / 29%) 0%, transparent 50%), linear-gradient(135deg, var(--dark-bg-primary) 0%, var(--dark-bg-secondary) 25%, #1a2030 50%, var(--dark-bg-secondary) 75%, var(--dark-bg-primary) 100%);
      position: relative;
      padding: 100px 0;
      display: flex;
      flex-direction: column;

      /* Smooth transition from light sections */
      margin-top: 0;
      border-top: none;
  }

  /* Subtle animated background */
  .why-hire-us-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background:
          radial-gradient(circle at 25% 25%, rgba(13, 159, 232, 0.04) 0%, transparent 50%),
          radial-gradient(circle at 75% 25%, rgba(237, 131, 33, 0.03) 0%, transparent 50%),
          radial-gradient(circle at 25% 75%, rgba(13, 159, 232, 0.02) 0%, transparent 50%),
          radial-gradient(circle at 75% 75%, rgba(237, 131, 33, 0.04) 0%, transparent 50%);
      pointer-events: none;
  }

  /* Floating particles for depth */
  .why-hire-us-section::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image:
          radial-gradient(1px 1px at 120px 80px, rgba(13, 159, 232, 0.2), transparent),
          radial-gradient(1px 1px at 320px 200px, rgba(237, 131, 33, 0.15), transparent),
          radial-gradient(1px 1px at 580px 120px, rgba(13, 159, 232, 0.1), transparent),
          radial-gradient(1px 1px at 820px 300px, rgba(237, 131, 33, 0.2), transparent),
          radial-gradient(1px 1px at 180px 400px, rgba(13, 159, 232, 0.08), transparent);
      background-size: 1000px 500px;
      animation: float 25s ease-in-out infinite;
      pointer-events: none;
  }

  @keyframes float {

      0%,
      100% {
          transform: translateX(0) translateY(0);
      }

      25% {
          transform: translateX(-15px) translateY(-8px);
      }

      50% {
          transform: translateX(8px) translateY(-15px);
      }

      75% {
          transform: translateX(-8px) translateY(8px);
      }
  }

  /* Header Section - Dark theme styling */
  .hire-us-header-section {
      text-align: center;
      margin-bottom: 80px;
      position: relative;
      z-index: 2;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 80px;
  }



  .main-title {
      font-size: 3.3333333333rem;
      font-weight: 400;
      color: var(--dark-text-primary);
      line-height: 1.15;
      margin: 0;
      text-align: center;
      text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
  }

  .main-title .bold-text {
      font-weight: 500;
      background: linear-gradient(135deg, #0d9fe8 0%, #ed8321 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
  }

  .description-text {
      font-size: 18px;
      color: var(--dark-text-secondary);
      line-height: 1.6;
      max-width: 650px;
      text-align: center;
      margin: 32px auto 0;
  }

  .hire-us-header-section p.description-text {
      margin: 0;
      text-align: right;
  }

  /* Premium Glass-morphism Cards */
  .service-card {
      min-width: 270px;
      width: 270px;
      height: 340px;
      background: rgba(255, 255, 255, 0.04);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 24px;
      padding: 40px 32px 32px 32px;
      display: flex;
      flex-direction: column;
      position: relative;
      cursor: pointer;
      transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      /* box-shadow:
                    0 8px 32px rgba(0, 0, 0, 0.2),
                    inset 0 1px 0 rgba(255, 255, 255, 0.04); */
      flex-shrink: 0;
      overflow: hidden;
  }

  /* Hover light sweep effect */
  .service-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg,
              transparent,
              rgba(13, 159, 232, 0.08),
              rgba(237, 131, 33, 0.06),
              transparent);
      transition: left 0.6s ease;
      pointer-events: none;
  }

  .service-card:hover::before {
      left: 100%;
  }

  .service-card:hover {
      transform: translateY(-12px);
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(13, 159, 232, 0.25);
      box-shadow:
          0 8px 24px rgba(13, 159, 232, 0.15),
          0 0 0 1px rgba(13, 159, 232, 0.1),
          inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  /* Icon with glow effect */
  .card-icon {
      width: 60px;
      height: 60px;
      margin-bottom: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--brand-blue-light);
      font-weight: 300;
      position: relative;
  }

  .card-icon::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50px;
      height: 50px;
      background: radial-gradient(circle, rgba(13, 159, 232, 0.1) 0%, transparent 70%);
      border-radius: 50%;
      transition: all 0.4s ease;
  }

  .service-card:hover .card-icon::before {
      width: 70px;
      height: 70px;
      background: radial-gradient(circle, rgba(237, 131, 33, 0.15) 0%, transparent 70%);
  }

  .card-icon svg {
      transition: all 0.4s ease;
      position: relative;
      z-index: 1;
      filter: drop-shadow(0 0 8px rgba(13, 159, 232, 0.2));
  }

  .service-card:hover .card-icon svg {
      transform: scale(1.15);
      color: var(--brand-orange-light);
      filter: drop-shadow(0 0 15px rgba(237, 131, 33, 0.4));
  }

  .service-card .card-title {
      font-size: 20px;
      font-weight: 600;
      color: var(--dark-text-primary);
      margin-bottom: 16px;
      line-height: 1.3;
      transition: all 0.3s ease;
  }

  .service-card:hover .card-title {
      color: #ffffff;
  }

  .card-description {
      font-size: 16px;
      color: var(--dark-text-secondary);
      line-height: 1.5;
      flex-grow: 1;
      transition: all 0.3s ease;
  }

  .service-card:hover .card-description {
      color: rgba(255, 255, 255, 0.9);
  }

  /* Premium Slider Controls */
  .slider-controls {
      margin-left: auto;
      display: flex;
      gap: 16px;
      z-index: 1;
      width: fit-content;
  }

  .slider-arrow {
      width: 40px;
      height: 40px;
      background: rgba(255, 255, 255, 0.06);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--dark-text-secondary);
      font-size: 1.3rem;
      transition: all 0.4s ease;
      position: relative;
      overflow: hidden;
  }

  .slider-arrow::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(237, 131, 33, 0.15), transparent);
      transition: left 0.4s ease;
  }

  .slider-arrow:hover::before {
      left: 100%;
  }

  .slider-arrow:hover {
      background: rgba(237, 131, 33, 0.15);
      color: var(--brand-orange-light);
      border-color: rgba(237, 131, 33, 0.3);
      transform: translateY(-2px);
      box-shadow: 0 12px 35px rgba(237, 131, 33, 0.2);
  }

  .slider-arrow:active {
      transform: translateY(0);
  }

  /* Elegant Control Dots */
  .hero-controls {
      position: absolute;
      bottom: 50px;
      right: 40px;
      z-index: 4;
      display: flex;
      gap: 16px;
  }

  .hero-control-dot::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: transparent;
      transition: all 0.4s ease;
  }

  .hero-control-dot.active {
      background: var(--brand-orange-light);
      border-color: var(--brand-orange-light);
      transform: scale(1.3);
      box-shadow:
          0 0 20px rgba(237, 131, 33, 0.4),
          0 0 40px rgba(237, 131, 33, 0.2);
  }

  .hero-control-dot.active::before {
      background: rgba(255, 255, 255, 0.9);
      width: 4px;
      height: 4px;
  }

  .hero-control-dot:hover:not(.active) {
      background: rgba(13, 159, 232, 0.3);
      border-color: var(--brand-blue-light);
      transform: scale(1.2);
      box-shadow: 0 0 15px rgba(13, 159, 232, 0.3);
  }

  /* Cards Container */
  .cards-container {
      display: flex;
      /* gap: 24px; */
      width: fit-content;
      transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      padding: 16px 0;
  }

  .hire-us-cards-section {
      flex: 1;
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: hidden;
  }

  .hire-us-cards-section .cards-slider-wrapper {
      max-width: 100%;
  }

  /* Transition borders for seamless integration */
  .why-hire-us-section {
      position: relative;
      overflow: hidden;
  }


  /* Responsive Design */
  @media (min-width: 1200px) {
      .main-title {
          font-size: 3.3333333333rem;
      }

      .service-card {
          width: 270px;
          min-width: 270px;
      }
  }

  @media (max-width: 1199px) {
      .main-title {
          font-size: 3.3333333333rem;
      }

      .service-card {
          width: 270px;
          min-width: 270px;
      }
  }

  @media (max-width: 991px) {
      .main-title {
          font-size: 2.7777777778rem;
          min-width: 320px;
      }

      .hire-us-header-section {
          flex-direction: column;
          gap: 24px;
      }

      .main-title,
      .hire-us-header-section p.description-text {
          text-align: left;
      }

      .description-text {
          font-size: 16px;
      }

      .why-hire-us-section {
          padding: 80px 0;
      }

      .service-card {
          width: 270px;
          min-width: 270px;
          height: 320px;
      }

      .slider-controls {
          top: -70px;
      }

      .slider-arrow {
          width: 40px;
          height: 40px;
      }
  }

  @media (max-width: 767px) {
      .main-title {
          font-size: 2.7777777778rem;
          line-height: 1.25;
      }

      .description-text {
          font-size: 15px;
      }

      .why-hire-us-section {
          padding: 70px 0;
      }

      .service-card {
          height: 310px;
          padding: 35px 28px 28px 28px;
          width: 270px;
          min-width: 270px;
      }

      .slider-controls {
          top: -60px;
      }

      .slider-arrow {
          width: 40px;
          height: 40px;
          border-radius: 12px;
      }

      .cards-container {
          /* gap: 24px; */
      }

      .hero-controls {
          bottom: 40px;
          right: 25px;
      }
  }

  @media (max-width: 480px) {
      .main-title {
          font-size: 2rem;
      }

      .service-card {
          min-width: 270px;
          width: 270px;
      }

      .hero-control-dot {
          width: 10px;
          height: 10px;
      }
  }

  /* Accessibility and Performance */
  @media (prefers-reduced-motion: reduce) {
      .why-hire-us-section::after {
          animation: none;
      }

      .service-card::before,
      .slider-arrow::before {
          display: none;
      }

      .service-card,
      .slider-arrow,
      .hero-control-dot,
      .card-icon svg,
      .card-icon::before {
          transition: none;
      }

      .service-card:hover,
      .slider-arrow:hover {
          transform: none;
      }
  }

  /* High Contrast Mode Support */
  @media (prefers-contrast: high) {
      .service-card {
          border: 2px solid rgba(255, 255, 255, 0.3);
      }

      .service-card:hover {
          border-color: var(--brand-orange-light);
      }

      .slider-arrow {
          border: 2px solid rgba(255, 255, 255, 0.2);
      }

      .hero-control-dot {
          border: 2px solid rgba(255, 255, 255, 0.2);
      }
  }

  @media (max-width:1200px) {
      .container {
          max-width: 100vw;
      }
  }

  /* Featured Projects Section */
  .featured-projects-section {
      padding: 100px 0 0px;
      background: #ffffff;
  }

  /* Section Header */
  .featured-projects-header {
      margin-bottom: 80px;
  }

  .section-title {
      font-size: 3.3333333333rem;
      font-weight: 400;
      color: var(--text-primary);
      line-height: 1.15;
      margin: 0;
  }

  /* Projects Grid */
  .projects-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
      margin-bottom: 80px;
  }

  /* Project Card - Minimal Design */
  .project-card {
      background: transparent;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
  }

  .project-card:hover {
      transform: translateY(-4px);
  }

  /* Card Image Container */
  .card-image-container {
      width: 100%;
      height: 224px;
      margin-bottom: 16px;
      border-radius: 6px;
      overflow: hidden;
      background: #f8f9fa;
      position: relative;
  }

  .card-image-container::after {
      content: '';
      background: linear-gradient(135deg, #00368a66, #e4740952);
      width: 100%;
      height: 100%;
      z-index: 1;
      position: absolute;
      backdrop-filter: blur(.5px);
      top: 0;
      left: 0;
  }

  .card-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
      display: block;
  }

  .project-card:hover .card-image {
      transform: scale(1.02);
  }

  /* Achievement Badges */
  .achievement-badges {
      position: absolute;
      bottom: 16px;
      left: 16px;
      right: 16px;
      z-index: 2;
      display: flex;
      flex-direction: column;
      gap: 8px;
  }

  .achievement-badge {
      background: rgb(9 63 90 / 81%);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 25px;
      padding: 6px 10px;
      font-size: 14px;
      font-weight: 400;
      color: var(--dark-text-primary);
      text-align: center;
      line-height: 1.25;
      max-width: fit-content;
  }

  /* Demo Images */
  .demo-image-food {
      background: linear-gradient(135deg, #8B4513 0%, #D2691E 50%, #F4A460 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 4rem;
      position: relative;
  }

  .demo-image-food::before {
      content: '☕';
      opacity: 0.8;
      filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
  }

  .demo-image-retail {
      background: linear-gradient(135deg, var(--brand-blue-light) 0%, var(--brand-blue) 50%, var(--brand-blue-dark) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 4rem;
      position: relative;
  }

  .demo-image-retail::before {
      content: '🛒';
      opacity: 0.9;
      filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
  }

  .demo-image-education {
      background: linear-gradient(135deg, var(--brand-orange-light) 0%, var(--brand-orange) 50%, var(--brand-orange-dark) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 4rem;
      position: relative;
  }

  .demo-image-education::before {
      content: '🎓';
      opacity: 0.9;
      filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
  }

  .demo-image-healthcare {
      background: linear-gradient(135deg, #e8f5e8 0%, #81c784 50%, #4caf50 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 4rem;
      position: relative;
  }

  .demo-image-healthcare::before {
      content: '🏥';
      opacity: 0.8;
      filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
  }

  .demo-image-fintech {
      background: linear-gradient(135deg, #f3e5f5 0%, #ba68c8 50%, #9c27b0 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 4rem;
      position: relative;
  }

  .demo-image-fintech::before {
      content: '💳';
      opacity: 0.8;
      filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
  }

  .demo-image-logistics {
      background: linear-gradient(135deg, #e3f2fd 0%, var(--brand-blue) 50%, var(--brand-orange) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 4rem;
      position: relative;
  }

  .demo-image-logistics::before {
      content: '🚚';
      opacity: 0.9;
      filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
  }

  /* Card Content */
  .card-category {
      font-size: 16px;
      font-weight: 500;
      color: var(--brand-orange-text);
      margin-bottom: 8px;
      text-transform: capitalize;
  }

  .card-title {
      font-size: 18px;
      font-weight: 500;
      color: var(--text-primary);
      line-height: 1.4;
      margin: 0;
  }

  /* View All Works Button - Minimal */
  .view-all-container {
      display: flex;
      justify-content: center;
  }

  .view-all-btn {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: transparent;
      color: var(--text-primary);
      border: 1px solid #e9ecef;
      padding: 16px 32px;
      font-size: 16px;
      font-weight: 600;
      border-radius: 8px;
      text-decoration: none;
      transition: all 0.3s ease;
  }

  .view-all-btn:hover {
      border-color: var(--text-primary);
      color: var(--text-primary);
  }

  .view-all-btn .arrow {
      transition: transform 0.3s ease;
  }

  .view-all-btn:hover .arrow {
      transform: translateX(4px);
  }

  /* Responsive Design */
  @media (min-width: 992px) {
      .projects-grid {
          grid-template-columns: repeat(3, 1fr);
      }
  }

  @media (min-width: 768px) and (max-width: 991px) {
      .projects-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 30px;
      }
  }

  @media (max-width: 767px) {
      .projects-grid {
          grid-template-columns: 1fr;
          gap: 30px;
      }
  }

  @media (max-width: 1199px) {
      .section-title {
          font-size: 3rem;
      }
  }

  @media (max-width: 991px) {
      .featured-projects-section {
          padding: 80px 0 0;
      }

      .section-title {
          font-size: 2.7777777778rem;
          text-align: center;
      }

      .featured-projects-header {
          margin-bottom: 60px;
          text-align: center;
      }

      .card-image-container {
          height: 280px;
      }

      .projects-grid {
          margin-bottom: 80px;
      }

      .achievement-badge {
          font-size: 11px;
          padding: 6px 12px;
      }
  }

  @media (max-width: 767px) {
      .container {
          padding: 0 15px;
      }

      .featured-projects-section {
          padding: 60px 0 0px;
      }

      .section-title {
          font-size: 2rem;
          line-height: 1.25;
      }

      .featured-projects-header {
          margin-bottom: 50px;
      }

      .card-image-container {
          height: 240px;
      }

      .view-all-btn {
          padding: 14px 28px;
          font-size: 15px;
      }

      .projects-grid {
          gap: 30px;
      }

      .achievement-badge {
          font-size: 10px;
          padding: 5px 10px;
      }
  }

  @media (max-width: 480px) {
      .section-title {
          font-size: 2rem;
      }

      .view-all-btn {
          width: 100%;
          justify-content: center;
      }
  }

  /* Animation on scroll */
  .project-card {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .project-card.animate-in {
      opacity: 1;
      transform: translateY(0);
  }

  /* Accessibility */
  .project-card:focus-within {
      outline: 2px solid var(--brand-blue);
      outline-offset: 4px;
      border-radius: 8px;
  }

  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {

      .project-card,
      .card-image,
      .view-all-btn,
      .view-all-btn .arrow {
          transition: none;
      }

      .project-card:hover {
          transform: none;
      }

      .project-card:hover .card-image {
          transform: none;
      }

      .view-all-btn:hover .arrow {
          transform: none;
      }

      .project-card {
          opacity: 1;
          transform: none;
      }
  }


  /* Blog Content Section */
  .blog-content-section {
      background:
          radial-gradient(ellipse at top left, rgb(13 143 208 / 15%) 0%, transparent 50%),
          radial-gradient(ellipse at top right, rgb(217 111 13 / 18%) 0%, transparent 50%),
          radial-gradient(ellipse at bottom left, rgb(11 101 147 / 12%) 0%, transparent 50%),
          radial-gradient(ellipse at bottom right, rgb(131 67 6 / 15%) 0%, transparent 50%),
          linear-gradient(135deg, var(--dark-bg-primary) 0%, var(--dark-bg-secondary) 25%, #1a2030 50%, var(--dark-bg-secondary) 75%, var(--dark-bg-primary) 100%);
      padding: 100px 0;
      position: relative;
      overflow: hidden;
  }

  /* Floating particles */
  .blog-content-section::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image:
          radial-gradient(1px 1px at 120px 80px, rgba(13, 159, 232, 0.15), transparent),
          radial-gradient(1px 1px at 320px 200px, rgba(237, 131, 33, 0.12), transparent),
          radial-gradient(1px 1px at 580px 120px, rgba(13, 159, 232, 0.08), transparent),
          radial-gradient(1px 1px at 820px 300px, rgba(237, 131, 33, 0.15), transparent),
          radial-gradient(1px 1px at 180px 400px, rgba(13, 159, 232, 0.06), transparent);
      background-size: 1000px 500px;
      animation: float 25s ease-in-out infinite;
      pointer-events: none;
  }

  @keyframes float {

      0%,
      100% {
          transform: translateX(0) translateY(0);
      }

      25% {
          transform: translateX(-15px) translateY(-8px);
      }

      50% {
          transform: translateX(8px) translateY(-15px);
      }

      75% {
          transform: translateX(-8px) translateY(8px);
      }
  }

  /* Blog Grid */
  .blog-grid {
      display: grid;
      grid-template-columns: 3fr 360px;
      gap: 32px;
      align-items: start;
      position: relative;
      z-index: 2;
  }

  /* Featured Article */
  .featured-article {
      transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      cursor: pointer;
  }

  .featured-image {
      width: 100%;
      height: 200px;
      position: relative;
      overflow: hidden;
      border-radius: 6px;
  }

  .featured-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
  }

  .featured-content {
      padding: 16px 0 0;
  }

  .featured-meta {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 12px;
  }

  .blog-tag {
      font-size: 12px;
      font-weight: 600;
      color: var(--dark-text-secondary);
      letter-spacing: 0.5px;
      text-transform: uppercase;
  }

  .read-time,
  .post-read-time {
      font-size: 14px;
      color: var(--dark-text-muted);
  }

  .featured-title {
      font-size: 24px;
      font-weight: 300;
      color: var(--dark-text-primary);
      line-height: 1.3;
      margin-bottom: 20px;
      transition: color 0.3s ease;
  }

  .featured-article:hover .featured-title {
      color: #ffffff;
  }

  .explore-btn {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: var(--brand-orange-text);
      color: white;
      font-size: 16px;
      font-weight: 600;
      text-decoration: none;
      padding: 16px 32px;
      border-radius: 8px;
      transition: all 0.3s ease;
      border: none;
      cursor: pointer;
  }

  .explore-btn:hover {
      background: #e8640f;
      transform: translateY(-2px);
      box-shadow: 0 12px 35px rgba(214, 116, 22, 0.4);
      color: white;
  }

  .explore-btn i {
      transition: transform 0.3s ease;
  }

  .explore-btn:hover i {
      transform: translateX(4px);
  }

  /* Recent Posts */
  .recent-posts {
      position: sticky;
      top: 40px;
  }

  .posts-list {
      display: flex;
      flex-direction: column;
      gap: 24px;
  }

  .post-item {
      background: transparent;
      border: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 0;
      padding: 0 0 24px 0;
      transition: all 0.3s ease;
      cursor: pointer;
      position: relative;
      overflow: hidden;
  }

  .post-item:first-child {
      padding-top: 0;
  }

  .post-item:last-child {
      border-bottom: none;
  }

  .post-item::before {
      display: none;
  }

  .post-item:hover {
      background: transparent;
      border-color: rgba(13, 159, 232, 0.15);
      transform: none;
  }

  .post-meta {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
  }

  .post-tag {
      font-size: 12px;
      font-weight: 600;
      color: var(--dark-text-secondary);
      letter-spacing: 0.5px;
      text-transform: uppercase;
  }

  .post-read-time {
      font-size: 14px;
      color: var(--dark-text-muted);
  }

  .post-title {
      font-size: 16px;
      font-weight: 300;
      color: var(--dark-text-primary);
      line-height: 1.4;
      transition: color 0.3s ease;
  }

  .post-item:hover .post-title {
      color: var(--brand-blue-light);
  }

  /* Explore All Button */
  .explore-all-container {
      margin-top: 40px;
      text-align: right;
  }

  .explore-all-btn {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: var(--brand-orange-text);
      color: white;
      border: none;
      padding: 16px 32px;
      font-size: 16px;
      font-weight: 600;
      border-radius: 8px;
      text-decoration: none;
      transition: all 0.3s ease;
      cursor: pointer;
  }

  .explore-all-btn:hover {
      background: #e8640f;
      transform: translateY(-2px);
      box-shadow: 0 12px 35px rgba(214, 116, 22, 0.4);
      color: white;
  }

  .explore-all-btn i {
      transition: transform 0.3s ease;
  }

  .explore-all-btn:hover i {
      transform: translateX(4px);
  }

  /* Responsive Design */
  @media (max-width: 1199px) {
      .blog-grid {
          grid-template-columns: 1fr 350px;
          gap: 50px;
      }

      .blog-title {
          font-size: 2.8rem;
      }
  }

  @media (max-width: 991px) {
      .blog-content-section {
          padding: 80px 0;
      }

      .blog-grid {
          grid-template-columns: 1fr;
          gap: 60px;
      }

      .blog-title {
          font-size: 2.5rem;
      }

      .blog-description {
          font-size: 16px;
      }

      .recent-posts {
          position: static;
      }
  }

  @media (max-width: 767px) {
      .blog-content-section {
          padding: 60px 0;
      }

      .blog-title {
          font-size: 2rem;
          line-height: 1.25;
      }

      .blog-description {
          font-size: 15px;
      }

      .featured-content {
          padding: 24px;
      }

      .featured-title {
          font-size: 24px;
      }

      .featured-image {
          height: 250px;
      }

      .apple-logo {
          font-size: 3rem;
      }

      .posts-list {
          gap: 20px;
      }

      .post-item {
          padding: 20px;
      }
  }

  @media (max-width: 480px) {
      .container {
          padding: 0 15px;
      }

      .blog-title {
          font-size: 1.8rem;
      }

      .featured-title {
          font-size: 20px;
      }

      .explore-all-btn {
          width: 100%;
          justify-content: center;
      }
  }

  /* Reduced Motion Support */
  @media (prefers-reduced-motion: reduce) {
      .blog-content-section::after {
          animation: none;
      }

      .featured-article::before,
      .post-item::before,
      .featured-article,
      .post-item,
      .explore-btn,
      .explore-all-btn {
          transition: none;
      }

      .featured-article:hover,
      .post-item:hover {
          transform: none;
      }
  }

  /* High Contrast Support */
  @media (prefers-contrast: high) {

      .featured-article,
      .post-item {
          border: 2px solid rgba(255, 255, 255, 0.3);
      }

      .explore-all-btn {
          border: 2px solid var(--brand-blue-light);
      }
  }



  /* CTA Section Styles */
  .cta-section {
      padding: 50px 0 100px;
      background: #ffffff;
      position: relative;
      overflow: hidden;
  }

  .cta-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background:
          radial-gradient(circle at 25% 25%, rgba(13, 159, 232, 0.03) 0%, transparent 50%),
          radial-gradient(circle at 75% 75%, rgba(237, 131, 33, 0.02) 0%, transparent 50%);
      pointer-events: none;
  }

  .cta-wrapper {
      position: relative;
      z-index: 2;
  }

  .cta-card {
      position: relative;
      background:
          radial-gradient(ellipse at top left, rgb(13 143 208 / 15%) 0%, transparent 40%),
          radial-gradient(ellipse at top right, rgb(217 111 13 / 18%) 0%, transparent 40%),
          radial-gradient(ellipse at bottom left, rgb(11 101 147 / 12%) 0%, transparent 40%),
          radial-gradient(ellipse at bottom right, rgb(131 67 6 / 15%) 0%, transparent 40%),
          linear-gradient(135deg, var(--dark-bg-primary) 0%, var(--dark-bg-secondary) 25%, #1a2030 50%, var(--dark-bg-secondary) 75%, var(--dark-bg-primary) 100%);
      border-radius: 32px;
      padding: 100px 60px;
      overflow: hidden;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow:
          0 24px 80px rgba(13, 159, 232, 0.08),
          0 12px 40px rgba(237, 131, 33, 0.05),
          inset 0 1px 0 rgba(255, 255, 255, 0.06);
      opacity: 0;
      transform: translateY(60px) scale(0.95);
      transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .cta-card.animate-in {
      opacity: 1;
      transform: translateY(0) scale(1);
  }

  .cta-card:hover {
      transform: translateY(-8px) scale(1);
      box-shadow:
          0 32px 100px rgba(13, 159, 232, 0.12),
          0 16px 50px rgba(237, 131, 33, 0.08),
          inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  /* Background Effects */
  .cta-background-effects {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
      border-radius: 32px;
      pointer-events: none;
  }

  /* Floating Particles */
  .cta-background-effects::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image:
          radial-gradient(1px 1px at 15% 20%, rgba(13, 159, 232, 0.15), transparent),
          radial-gradient(1px 1px at 85% 30%, rgba(237, 131, 33, 0.12), transparent),
          radial-gradient(1px 1px at 25% 80%, rgba(13, 159, 232, 0.08), transparent),
          radial-gradient(1px 1px at 70% 70%, rgba(237, 131, 33, 0.15), transparent),
          radial-gradient(1px 1px at 45% 40%, rgba(13, 159, 232, 0.06), transparent);
      background-size: 400px 300px;
      animation: floatParticles 20s ease-in-out infinite;
  }

  @keyframes floatParticles {

      0%,
      100% {
          transform: translateX(0) translateY(0);
      }

      25% {
          transform: translateX(-10px) translateY(-5px);
      }

      50% {
          transform: translateX(5px) translateY(-10px);
      }

      75% {
          transform: translateX(-5px) translateY(5px);
      }
  }

  /* Gradient Orbs */
  .cta-gradient-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(60px);
      opacity: 0.15;
      animation: floatOrb 15s ease-in-out infinite;
  }

  .cta-orb-1 {
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, rgba(13, 159, 232, 0.4) 0%, transparent 70%);
      top: -150px;
      left: -100px;
      animation-delay: 0s;
  }

  .cta-orb-2 {
      width: 200px;
      height: 200px;
      background: radial-gradient(circle, rgba(237, 131, 33, 0.3) 0%, transparent 70%);
      bottom: -100px;
      right: -50px;
      animation-delay: -5s;
  }

  .cta-orb-3 {
      width: 150px;
      height: 150px;
      background: radial-gradient(circle, rgba(13, 159, 232, 0.2) 0%, transparent 70%);
      top: 40%;
      right: 20%;
      animation-delay: -10s;
  }

  @keyframes floatOrb {

      0%,
      100% {
          transform: translateY(0px) translateX(0px) scale(1);
      }

      33% {
          transform: translateY(-20px) translateX(15px) scale(1.1);
      }

      66% {
          transform: translateY(15px) translateX(-10px) scale(0.9);
      }
  }

  /* Geometric Patterns */
  .cta-geometric-pattern {
      position: absolute;
      top: 20%;
      right: 10%;
      width: 200px;
      height: 200px;
      opacity: 0.03;
      background:
          linear-gradient(45deg, transparent 49%, var(--brand-blue-light) 49%, var(--brand-blue-light) 51%, transparent 51%),
          linear-gradient(-45deg, transparent 49%, var(--brand-orange-light) 49%, var(--brand-orange-light) 51%, transparent 51%);
      background-size: 20px 20px;
      animation: rotatePattern 30s linear infinite;
  }

  @keyframes rotatePattern {
      from {
          transform: rotate(0deg);
      }

      to {
          transform: rotate(360deg);
      }
  }

  /* Content */
  .cta-content {
      position: relative;
      z-index: 2;
      text-align: center;
  }

  .cta-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 50px;
      padding: 8px 20px;
      margin-bottom: 32px;
      font-size: 14px;
      font-weight: 500;
      color: var(--dark-text-secondary);
      letter-spacing: 0.5px;
      text-transform: uppercase;
      opacity: 0;
      transform: translateY(20px);
      transition: all 0.6s ease 0.2s;
  }

  .cta-card.animate-in .cta-badge {
      opacity: 1;
      transform: translateY(0);
  }

  .cta-badge-icon {
      width: 16px;
      height: 16px;
      background: var(--brand-orange-text);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .cta-badge-icon i {
      font-size: 8px;
      color: white;
  }

  .cta-title {
      font-size: 3.5rem;
      font-weight: 400;
      color: var(--dark-text-primary);
      line-height: 1.1;
      margin-bottom: 24px;
      text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.8s ease 0.4s;
  }

  .cta-card.animate-in .cta-title {
      opacity: 1;
      transform: translateY(0);
  }

  .cta-highlight {
      font-weight: 500;
      background: linear-gradient(135deg, #0d9fe8 0%, #ed8321 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0 0 20px rgba(13, 159, 232, 0.3));
  }

  .cta-description {
      font-size: 18px;
      color: var(--dark-text-secondary);
      line-height: 1.7;
      margin-bottom: 48px;
      opacity: 0;
      transform: translateY(20px);
      transition: all 0.6s ease 0.6s;
  }

  .cta-card.animate-in .cta-description {
      opacity: 1;
      transform: translateY(0);
  }

  /* CTA Buttons */
/*   .cta-buttons {
      display: flex;
      gap: 20px;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      opacity: 0;
      transform: translateY(20px);
      transition: all 0.6s ease 0.8s;
  } */

  .cta-card.animate-in .cta-buttons {
      opacity: 1;
      transform: translateY(0);
  }

  .cta-button-primary {
      background: var(--brand-orange-text);
      color: white;
      border: none;
      padding: 18px 36px;
      font-size: 16px;
      font-weight: 600;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.3s ease;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      box-shadow:
          0 8px 32px rgba(214, 116, 22, 0.25),
          0 0 0 1px rgba(214, 116, 22, 0.1);
      position: relative;
      overflow: hidden;
      font-family: inherit;
  }

  .cta-button-primary::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: left 0.5s ease;
  }

  .cta-button-primary:hover::before {
      left: 100%;
  }

  .cta-button-primary:hover {
      background: #e8640f;
      transform: translateY(-3px);
      box-shadow:
          0 12px 40px rgba(214, 116, 22, 0.4),
          0 0 0 1px rgba(214, 116, 22, 0.2);
      color: white;
      text-decoration: none;
  }

  .cta-button-primary:focus {
      outline: 2px solid #ffc947;
      outline-offset: 3px;
  }

  .cta-button-primary i {
      transition: transform 0.3s ease;
  }

  .cta-button-primary:hover i {
      transform: translateX(4px);
  }

  .cta-button-secondary {
      background: rgba(255, 255, 255, 0.08);
      color: var(--dark-text-primary);
      border: 1px solid rgba(255, 255, 255, 0.15);
      padding: 18px 36px;
      font-size: 16px;
      font-weight: 600;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.3s ease;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      backdrop-filter: blur(10px);
      font-family: inherit;
  }

  .cta-button-secondary:hover {
      background: rgba(255, 255, 255, 0.15);
      border-color: rgba(255, 255, 255, 0.25);
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
      color: var(--dark-text-primary);
      text-decoration: none;
  }

  .cta-button-secondary:focus {
      outline: 2px solid var(--brand-blue-light);
      outline-offset: 3px;
  }

  /* Responsive Design */
  @media (min-width: 1200px) {
      .cta-title {
          font-size: 3.3333333333rem;
      }

      .cta-card {
          padding: 56px 56px;
      }
  }

  @media (max-width: 1199px) {
      .cta-title {
          font-size: 3rem;
      }

      .cta-card {
          padding: 80px 60px;
      }
  }

  @media (max-width: 991px) {
      .cta-section {
          padding: 80px 0;
      }

      .cta-title {
          font-size: 2.5rem;
      }

      .cta-description {
          font-size: 16px;
      }

      .cta-card {
          padding: 70px 50px;
      }

/*       .cta-buttons {
          flex-direction: column;
          gap: 16px;
      } */

      .cta-button-primary,
      .cta-button-secondary {
          width: 100%;
          max-width: 300px;
          justify-content: center;
      }
  }

  @media (max-width: 767px) {
      .cta-section {
          padding: 60px 0;
      }

      .cta-title {
          font-size: 2rem;
          line-height: 1.2;
      }

      .cta-description {
          font-size: 15px;
          margin-bottom: 40px;
      }

      .cta-card {
          padding: 60px 30px;
          border-radius: 24px;
      }

      .cta-button-primary,
      .cta-button-secondary {
          padding: 16px 32px;
          font-size: 15px;
      }
  }

  @media (max-width: 480px) {
      .cta-title {
          font-size: 1.8rem;
      }

      .cta-card {
          padding: 50px 25px;
      }

      .cta-button-primary,
      .cta-button-secondary {
          padding: 14px 28px;
          font-size: 14px;
      }
  }

  /* Accessibility and Performance */
  @media (prefers-reduced-motion: reduce) {

      .cta-card,
      .cta-title,
      .cta-description,
      .cta-badge,
      .cta-buttons,
      .cta-button-primary,
      .cta-button-secondary,
      .cta-gradient-orb,
      .cta-background-effects::after,
      .cta-geometric-pattern {
          animation: none !important;
          transition: none !important;
      }

      .cta-card {
          opacity: 1 !important;
          transform: none !important;
      }

      .cta-title,
      .cta-description,
      .cta-badge,
      .cta-buttons {
          opacity: 1 !important;
          transform: none !important;
      }

      .cta-button-primary:hover,
      .cta-button-secondary:hover {
          transform: none !important;
      }
  }

  /* High Contrast Mode Support */
  @media (prefers-contrast: high) {
      .cta-card {
          border: 3px solid #ffffff;
          background: linear-gradient(135deg, #000080 0%, #4b0082 50%, #8b4513 100%);
      }

      .cta-button-primary {
          border: 2px solid #ffffff;
      }

      .cta-button-secondary {
          border: 2px solid #ffffff;
          background: rgba(255, 255, 255, 0.2);
      }

      .cta-title,
      .cta-description {
          text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
      }
  }

  /* Screen Reader Only */
  .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
  }



  /* Light Theme Testimonials Section */
  .testimonials-section {
      background:
          radial-gradient(ellipse at top left, rgba(13, 143, 208, 0.03) 0%, transparent 50%),
          radial-gradient(ellipse at top right, rgba(217, 111, 13, 0.04) 0%, transparent 50%),
          radial-gradient(ellipse at bottom left, rgba(11, 101, 147, 0.02) 0%, transparent 50%),
          radial-gradient(ellipse at bottom right, rgba(131, 67, 6, 0.03) 0%, transparent 50%),
          linear-gradient(135deg, #ffffff 0%, #f8f9fa 25%, #ffffff 50%, #f8f9fa 75%, #ffffff 100%);
      position: relative;
      padding: 100px 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
  }

  /* Subtle animated background */
  .testimonials-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background:
          radial-gradient(circle at 25% 25%, rgba(13, 159, 232, 0.02) 0%, transparent 50%),
          radial-gradient(circle at 75% 25%, rgba(237, 131, 33, 0.015) 0%, transparent 50%),
          radial-gradient(circle at 25% 75%, rgba(13, 159, 232, 0.01) 0%, transparent 50%),
          radial-gradient(circle at 75% 75%, rgba(237, 131, 33, 0.02) 0%, transparent 50%);
      pointer-events: none;
  }

  /* Floating particles for depth */
  .testimonials-section::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image:
          radial-gradient(1px 1px at 120px 80px, rgba(13, 159, 232, 0.08), transparent),
          radial-gradient(1px 1px at 320px 200px, rgba(237, 131, 33, 0.06), transparent),
          radial-gradient(1px 1px at 580px 120px, rgba(13, 159, 232, 0.04), transparent),
          radial-gradient(1px 1px at 820px 300px, rgba(237, 131, 33, 0.08), transparent),
          radial-gradient(1px 1px at 180px 400px, rgba(13, 159, 232, 0.03), transparent);
      background-size: 1000px 500px;
      animation: float 25s ease-in-out infinite;
      pointer-events: none;
  }

  @keyframes float {

      0%,
      100% {
          transform: translateX(0) translateY(0);
      }

      25% {
          transform: translateX(-15px) translateY(-8px);
      }

      50% {
          transform: translateX(8px) translateY(-15px);
      }

      75% {
          transform: translateX(-8px) translateY(8px);
      }
  }

  /* Header Section */
  .testimonials-header-section {
      text-align: center;
      margin-bottom: 48px;
      position: relative;
      z-index: 2;
  }

  .testimonials-section .main-title {
      font-size: 3.3333333333rem;
      font-weight: 400;
      color: var(--text-primary);
      line-height: 1.15;
      margin: 0;
      text-align: center;
  }

  .main-title .bold-text {
      font-weight: 500;
      background: linear-gradient(135deg, #0d9fe8 0%, #ed8321 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
  }

  .testimonials-section .description-text {
      font-size: 18px;
      color: var(--text-secondary);
      line-height: 1.6;
      max-width: 650px;
      text-align: center;
      margin: 32px auto 0;
  }

  /* Premium Light Theme Cards */
  .testimonial-card {
      min-width: 350px;
      width: 350px;
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(0, 0, 0, 0.05);
      border-radius: 24px;
      padding: 40px 32px 32px 32px;
      display: flex;
      flex-direction: column;
      position: relative;
      cursor: pointer;
      transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      box-shadow:
          0 4px 20px rgba(0, 0, 0, 0.04),
          0 1px 3px rgba(0, 0, 0, 0.02);
      flex-shrink: 0;
      overflow: hidden;
  }

  /* Hover light sweep effect */
  .testimonial-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg,
              transparent,
              rgba(13, 159, 232, 0.03),
              rgba(237, 131, 33, 0.02),
              transparent);
      transition: left 0.6s ease;
      pointer-events: none;
  }

  .testimonial-card:hover::before {
      left: 100%;
  }

  .testimonial-card:hover {
      transform: translateY(-8px);
      background: rgba(255, 255, 255, 0.95);
      border: 1px solid rgba(13, 159, 232, 0.1);
      box-shadow:
          0 12px 40px rgba(0, 0, 0, 0.08),
          0 4px 12px rgba(13, 159, 232, 0.04),
          inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  /* Person Photo */
  .testimonial-photo {
      min-width: 80px;
      min-height: 80px;
      max-width: 80px;
      max-height: 80px;
      border-radius: 50%;
      margin-bottom: 24px;
      position: relative;
      overflow: hidden;
      border: 3px solid rgba(13, 159, 232, 0.1);
      transition: all 0.4s ease;
  }

  .testimonial-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
  }

  .testimonial-card:hover .testimonial-photo {
      border-color: rgba(237, 131, 33, 0.2);
      transform: scale(1.05);
  }

  .testimonial-card:hover .testimonial-photo img {
      transform: scale(1.1);
  }

  /* Person Name */
  .testimonial-name {
      font-size: 20px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 8px;
      line-height: 1.3;
      transition: all 0.3s ease;
  }

  .testimonial-card:hover .testimonial-name {
      color: var(--brand-blue-text);
  }

  /* Company Logo */
  .testimonial-company {
      height: 18px;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
  }

  .testimonial-company img {
      max-height: 100%;
      max-width: 120px;
      object-fit: contain;
      opacity: 0.7;
      transition: all 0.3s ease;
      filter: grayscale(0.5);
  }

  .testimonial-card:hover .testimonial-company img {
      opacity: 1;
      filter: grayscale(0);
  }

  /* Testimonial Message */
  .testimonial-message {
      font-size: 16px;
      color: var(--text-secondary);
      line-height: 1.6;
      flex-grow: 1;
      font-style: italic;
      position: relative;
      transition: all 0.3s ease;
  }

  .testimonial-message::before {
      content: '"';
      font-size: 64px;
      color: rgba(13, 159, 232, 0.1);
      position: absolute;
      top: -20px;
      left: -10px;
      font-family: serif;
      line-height: 1;
  }

  .testimonial-card:hover .testimonial-message {
      color: var(--text-primary);
  }

  /* Premium Slider Controls */
  .slider-controls {
      margin-left: auto;
      display: flex;
      gap: 16px;
      z-index: 1;
      width: fit-content;
      margin-bottom: 40px;
  }

  .testimonials-section .slider-arrow {
      width: 48px;
      height: 48px;
      background: #FFF3E0;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-secondary);
      font-size: 1.2rem;
      transition: all 0.4s ease;
      position: relative;
      overflow: hidden;
  }

  .slider-arrow::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(237, 131, 33, 0.1), transparent);
      transition: left 0.4s ease;
  }

  .slider-arrow:hover::before {
      left: 100%;
  }

  .slider-arrow:hover {
      background: rgba(237, 131, 33, 0.1);
      color: var(--brand-orange-text);
      border-color: rgba(237, 131, 33, 0.2);
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(237, 131, 33, 0.15);
  }

  .slider-arrow:active {
      transform: translateY(0);
  }

  /* Cards Container */
  .cards-container {
      display: flex;
      /* gap: 32px; */
      width: fit-content;
      transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      padding: 16px 0;
  }

  .testimonials-cards-section {
      flex: 1;
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: hidden;
  }

  .testimonials-cards-section .cards-slider-wrapper {
      max-width: 100%;
  }

  /* Star Rating */
  .testimonial-rating {
      display: flex;
      gap: 4px;
      margin-bottom: 16px;
  }

  .star {
      color: #ffc947;
      font-size: 16px;
  }

  /* Responsive Design */
  @media (min-width: 1200px) {
      .main-title {
          font-size: 3.3333333333rem;
      }

      .testimonial-card {
          width: 350px;
          min-width: 350px;
      }
  }

  @media (max-width: 1199px) {
      .main-title {
          font-size: 3.3333333333rem;
      }

      .testimonial-card {
          width: 350px;
          min-width: 350px;
      }
  }

  @media (max-width: 991px) {
      .main-title {
          font-size: 2.7777777778rem;
      }

      .description-text {
          font-size: 16px;
      }

      .testimonials-section {
          padding: 80px 0;
      }

      .testimonial-card {
          width: 320px;
          min-width: 320px;
      }

      .slider-controls {
          margin-bottom: 30px;
      }

      .slider-arrow {
          width: 44px;
          height: 44px;
      }
  }

  @media (max-width: 767px) {
      .main-title {
          font-size: 2.7777777778rem;
          line-height: 1.25;
      }

      .description-text {
          font-size: 15px !important;
      }

      .testimonials-section {
          padding: 60px 0;
      }

      .testimonial-card {
          padding: 32px 24px 24px 24px;
          width: 300px;
          min-width: 300px;
      }

      .slider-controls {
          margin-bottom: 25px;
      }

      .slider-arrow {
          width: 42px;
          height: 42px;
          border-radius: 10px;
      }

      .cards-container {
          /* gap: 24px; */
      }

      .testimonial-photo {
          width: 70px;
          height: 70px;
          margin-bottom: 20px;
      }

      .testimonial-name {
          font-size: 18px;
      }

      .testimonial-company {
          height: 18px;
          margin-bottom: 20px;
      }

      .testimonial-message {
          font-size: 15px;
      }
  }

  @media (max-width: 480px) {
      .main-title {
          font-size: 2rem !important;
      }

      .testimonial-card {
          min-width: 280px;
          width: 280px;
      }
  }

  /* Accessibility and Performance */
  @media (prefers-reduced-motion: reduce) {
      .testimonials-section::after {
          animation: none;
      }

      .testimonial-card::before,
      .slider-arrow::before {
          display: none;
      }

      .testimonial-card,
      .slider-arrow,
      .testimonial-photo,
      .testimonial-photo img {
          transition: none;
      }

      .testimonial-card:hover,
      .slider-arrow:hover {
          transform: none;
      }
  }

  /* High Contrast Mode Support */
  @media (prefers-contrast: high) {
      .testimonial-card {
          border: 2px solid #333;
          background: #ffffff;
      }

      .testimonial-card:hover {
          border-color: var(--brand-orange-text);
      }

      .slider-arrow {
          border: 2px solid #333;
      }
  }



  /* Blog Section Styles */
  .blog-section {
      background: #fff;
      padding: 100px 0;
      position: relative;
      overflow: hidden;
  }

  /* Floating particles */
  .blog-section::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image:
          radial-gradient(1px 1px at 120px 80px, rgba(13, 159, 232, 0.15), transparent),
          radial-gradient(1px 1px at 320px 200px, rgba(237, 131, 33, 0.12), transparent),
          radial-gradient(1px 1px at 580px 120px, rgba(13, 159, 232, 0.08), transparent),
          radial-gradient(1px 1px at 820px 300px, rgba(237, 131, 33, 0.15), transparent),
          radial-gradient(1px 1px at 180px 400px, rgba(13, 159, 232, 0.06), transparent);
      background-size: 1000px 500px;
      animation: floatParticles 25s ease-in-out infinite;
      pointer-events: none;
  }

  @keyframes floatParticles {

      0%,
      100% {
          transform: translateX(0) translateY(0);
      }

      25% {
          transform: translateX(-15px) translateY(-8px);
      }

      50% {
          transform: translateX(8px) translateY(-15px);
      }

      75% {
          transform: translateX(-8px) translateY(8px);
      }
  }

  /* Blog Header */
  .blog-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 80px;
      position: relative;
      z-index: 2;
  }

  .blog-title-wrapper {
      flex: 1;
  }

  .blog-title {
      font-size: 3.3333333333rem;
      font-weight: 400;
      color: var(--text-primary);
      line-height: 1.15;
      margin: 0;
      max-width: 800px;
  }

  .gradient-text {
      background: linear-gradient(135deg, #0d9fe8 0%, #ed8321 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-weight: 500;
  }

  .blog-actions {
      margin-left: 60px;
      margin-top: 20px;
  }

  .view-details-btn {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      color: var(--text-primary);
      text-decoration: none;
      font-size: 16px;
      font-weight: 500;
      transition: all 0.3s ease;
      padding: 12px 0;
      border-bottom: 1px solid transparent;
  }

  .view-details-btn:hover {
      color: var(--text-secondary);
      text-decoration: none;
  }

  .view-details-btn i {
      transition: transform 0.3s ease;
  }

  .view-details-btn:hover i {
      transform: translateX(4px);
  }

  /* Blog Grid */
  .blog-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
      position: relative;
      z-index: 2;
  }

  /* Blog Card */
  .blog-card {
      overflow: hidden;
      transition: all 0.3s ease;
      cursor: pointer;
      position: relative;
  }


  .blog-card:hover {
      transform: translateY(-4px);
  }

  /* Blog Card Image */
  .blog-card-image {
      position: relative;
      height: 224px;
      overflow: hidden;
      border-radius: 6px;
  }

  .blog-card-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease !important;
  }

  .blog-card:hover .blog-card-image img {
      transform: scale(1.05);
  }

  .blog-card-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(13, 159, 232, 0.1) 0%, rgba(237, 131, 33, 0.1) 100%);
      opacity: 0;
      transition: opacity 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .blog-card:hover .blog-card-overlay {
      opacity: 1;
  }



  /* Blog Card Content */
  .blog-card-content {
      padding: 32px 0 0;
      position: relative;
      z-index: 2;
  }

  .blog-card-title {
      font-size: 18px;
      font-weight: 400;
      color: var(--text-primary);
      line-height: 1.4;
      margin: 0 0 20px 0;
      transition: color 0.3s ease;
  }

  .blog-card:hover .blog-card-title {
      color: var(--text-secondary);
  }

  .blog-card-meta {
      display: flex;
      align-items: center;
      margin-bottom: 24px;
      font-size: 14px;
      color: var(--text-muted);
  }

  .blog-category {
      color: var(--brand-orange-text);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
  }

  .blog-read-time {
      margin-left: 4px;
  }

  /* Author Info */
  .blog-card-author {
      display: flex;
      align-items: center;
      gap: 12px;
      display: none;
  }

  .author-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      border: 2px solid rgba(255, 255, 255, 0.1);
      transition: border-color 0.3s ease;
  }

  .blog-card:hover .author-avatar {
      border-color: var(--brand-orange-text);
  }

  .author-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  .author-info {
      display: flex;
      align-items: center;
      font-size: 14px;
  }

  .author-name {
      color: var(--dark-text-secondary);
      font-weight: 500;
      transition: color 0.3s ease;
  }

  .blog-card:hover .author-name {
      color: var(--dark-text-primary);
  }

  .publish-date {
      color: var(--dark-text-muted);
      margin-left: 4px;
  }

  /* Responsive Design */
  @media (max-width: 1199px) {
      .blog-title {
          font-size: 2.7777777778rem;
      }

      .blog-grid {
          gap: 30px;
      }
  }

  @media (max-width: 991px) {
      .blog-section {
          padding: 80px 0;
      }

      .blog-header {
          flex-direction: column;
          gap: 30px;
          margin-bottom: 60px;
      }

      .blog-actions {
          margin-left: 0;
          margin-top: 0;
      }

      .blog-title {
          font-size: 2.5rem;
      }

      .blog-grid {
          grid-template-columns: repeat(2, 1fr);
      }

      /* Make the last blog card full width */
      .blog-card:last-child {
          grid-column: 1 / -1;
      }

      .blog-card:last-child .blog-card-image {
          height: 300px;
      }
  }

  @media (max-width: 767px) {
      .blog-section {
          padding: 60px 0;
      }

      .blog-title {
          font-size: 2rem;
          line-height: 1.25;
      }

      .blog-grid {
          grid-template-columns: 1fr;
          gap: 30px;
      }

      .blog-card-image {
          height: 224px;
      }

      .blog-card-content {
          padding: 24px;
      }

      .blog-card-title {
          font-size: 20px;
      }

      .blog-card:last-child .blog-card-image {
          height: 220px;
      }
  }

  @media (max-width: 480px) {
      .blog-title {
          font-size: 1.8rem;
      }

      .blog-card-title {
          font-size: 18px;
      }
  }

  /* Accessibility */
  .blog-card:focus-within {
      outline: 2px solid var(--brand-blue-light);
      outline-offset: 4px;
  }

  /* Reduced Motion Support */
  @media (prefers-reduced-motion: reduce) {
      .blog-section::after {
          animation: none;
      }

      .blog-card,
      .blog-card-image img,
      .view-details-btn i {
          transition: none;
      }

      .blog-card:hover {
          transform: none;
      }

      .blog-card:hover .blog-card-image img {
          transform: none;
      }
  }

  /* High Contrast Support */
  @media (prefers-contrast: high) {
      .blog-card {
          border: 2px solid rgba(255, 255, 255, 0.3);
      }

      .blog-card:hover {
          border-color: var(--brand-orange-text);
      }
  }



  /* Footer Section Styles */
  .footer-section {
      background: radial-gradient(ellipse at top left, rgb(13 143 208 / 15%) 0%, transparent 40%),
          radial-gradient(ellipse at top right, rgb(217 111 13 / 18%) 0%, transparent 40%),
          radial-gradient(ellipse at bottom left, rgb(11 101 147 / 12%) 0%, transparent 40%),
          radial-gradient(ellipse at bottom right, rgb(131 67 6 / 15%) 0%, transparent 40%),
          linear-gradient(135deg, var(--dark-bg-primary) 0%, var(--dark-bg-secondary) 25%, #1a2030 50%, var(--dark-bg-secondary) 75%, var(--dark-bg-primary) 100%);
      position: relative;
      padding: 80px 0 40px;
      overflow: hidden;
  }


  /* Footer Main Content */
  .footer-main {
      position: relative;
      z-index: 2;
      margin-bottom: 60px;
  }

  /* Footer CTA Section */
  .footer-cta {
      margin-bottom: 64px;
      padding-bottom: 32px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
  }

  .footer-cta-title {
      font-size: 3.5rem;
      font-weight: 400;
      color: var(--dark-text-primary);
      margin-bottom: 16px;
      line-height: 1.1;
  }

  .footer-cta-subtitle {
      font-size: 18px;
      color: var(--dark-text-secondary);
      line-height: 1.6;
  }

  .footer-cta-button {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: transparent;
      color: var(--dark-text-primary);
      border: 2px solid rgba(255, 255, 255, 0.2);
      padding: 16px 32px;
      font-size: 16px;
      font-weight: 600;
      border-radius: 8px;
      text-decoration: none;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
  }

  .footer-cta-button::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(237, 131, 33, 0.1), transparent);
      transition: left 0.4s ease;
  }

  .footer-cta-button:hover::before {
      left: 100%;
  }

  .footer-cta-button:hover {
      background: var(--brand-orange-text);
      border-color: var(--brand-orange-text);
      color: white;
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(214, 116, 22, 0.3);
      text-decoration: none;
  }

  .footer-cta-button:hover i {
      transform: translateX(4px);
  }

  .footer-cta-button i {
      transition: transform 0.3s ease;
  }

  /* Footer Links Grid */
  .footer-links-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 60px;
      position: relative;
      z-index: 2;
  }

  .footer-column {
      display: flex;
      flex-direction: column;
  }

  .footer-column-title {
      font-size: 18px;
      font-weight: 600;
      color: var(--dark-text-primary);
      margin-bottom: 24px;
      line-height: 1.3;
  }

  .footer-links {
      list-style: none;
      padding: 0;
      margin: 0;
  }

  .footer-links li {
      margin-bottom: 12px;
  }

  .footer-links a {
      color: var(--dark-text-secondary);
      text-decoration: none;
      font-size: 15px;
      line-height: 1.5;
      transition: all 0.3s ease;
      position: relative;
      display: inline-block;
  }

  .footer-links a::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 0;
      height: 1px;
      background: var(--brand-orange-text);
      transition: width 0.3s ease;
  }

  .footer-links a:hover {
      color: var(--dark-text-primary);
      transform: translateX(4px);
      text-decoration: none;
  }

  .footer-links a:hover::after {
      width: 100%;
  }

  /* Contact Links Styling */
  .footer-contact-links {
      list-style: none;
      padding: 0;
      margin: 0;
  }

  .footer-contact-item {
      margin-bottom: 20px;
      display: flex;
      flex-direction: column;
      gap: 4px;
  }

  .contact-label {
      font-size: 13px;
      color: var(--dark-text-muted);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.5px;
  }

  .contact-value {
      color: var(--dark-text-secondary);
      text-decoration: none;
      font-size: 15px;
      font-weight: 500;
      transition: all 0.3s ease;
      line-height: 1.4;
  }

  .contact-value:hover {
      color: var(--brand-orange-text);
      text-decoration: none;
  }

  /* Footer Bottom */
  .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 40px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      position: relative;
      z-index: 2;
  }

  .footer-copyright {
      display: flex;
      align-items: center;
      gap: 40px;
  }

  .footer-copyright p {
      color: var(--dark-text-muted);
      font-size: 14px;
      margin: 0;
  }

  .footer-legal-links {
      display: flex;
      gap: 24px;
  }

  .footer-legal-links a {
      color: var(--dark-text-muted);
      text-decoration: none;
      font-size: 14px;
      transition: color 0.3s ease;
  }

  .footer-legal-links a:hover {
      color: var(--dark-text-secondary);
      text-decoration: none;
  }

  /* Social Media Links */
  .footer-social {
      display: flex;
      gap: 16px;
      align-items: center;
  }

  .social-link {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--dark-text-secondary);
      text-decoration: none;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
  }

  .social-link::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(237, 131, 33, 0.15), transparent);
      transition: left 0.4s ease;
  }

  .social-link:hover::before {
      left: 100%;
  }

  .social-link:hover {
      background: rgba(237, 131, 33, 0.1);
      border-color: rgba(237, 131, 33, 0.3);
      color: var(--brand-orange-text);
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(237, 131, 33, 0.2);
  }

  .social-link i {
      font-size: 16px;
      transition: transform 0.3s ease;
  }

  .social-link:hover i {
      transform: scale(1.1);
  }

  /* Responsive Design */
  @media (min-width: 1200px) {
      .footer-cta-title {
          font-size: 4rem;
      }

      .footer-links-grid {
          gap: 80px;
      }
  }

  @media (max-width: 1199px) {
      .footer-cta-title {
          font-size: 3rem;
      }

      .footer-links-grid {
          gap: 50px;
      }
  }

  @media (max-width: 991px) {
      .footer-section {
          padding: 60px 0 30px;
      }

      .footer-cta {
          margin-bottom: 60px;
          padding-bottom: 50px;
      }

      .footer-cta-title {
          font-size: 2.5rem;
      }

      .footer-cta-subtitle {
          font-size: 16px;
      }

      .footer-links-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 40px 30px;
      }

      .footer-bottom {
          flex-direction: column;
          gap: 30px;
          text-align: center;
      }

      .footer-copyright {
          flex-direction: column;
          gap: 20px;
      }
  }

  @media (max-width: 767px) {
      .footer-section {
          padding: 50px 0 25px;
      }

      .footer-cta {
          margin-bottom: 50px;
          padding-bottom: 40px;
      }

      .footer-cta-title {
          font-size: 2rem;
          line-height: 1.2;
      }

      .footer-cta-subtitle {
          font-size: 15px;
      }

      .footer-cta-button {
          padding: 14px 28px;
          font-size: 15px;
      }

      .footer-column-title {
          font-size: 16px;
          margin-bottom: 20px;
      }

      .footer-links a,
      .contact-value {
          font-size: 14px;
      }

      .footer-bottom {
          padding-top: 30px;
          gap: 25px;
      }

      .footer-copyright {
          gap: 15px;
      }

      .footer-legal-links {
          gap: 16px;
      }

      .social-link {
          width: 36px;
          height: 36px;
      }

      .social-link i {
          font-size: 14px;
      }
  }

  @media (max-width: 550px) {
      .footer-cta {
          flex-direction: column;
          text-align: center;
      }
  }

  @media (max-width: 480px) {
      .footer-cta-title {
          font-size: 1.8rem;
      }

      .footer-cta-button {
          width: 100%;
          justify-content: center;
          max-width: 280px;
      }

      .footer-social {
          gap: 12px;
      }
  }
  @media (min-width: 922px) {
    .site-content .ast-container {
        display: block;
    }
    }

        /* Contact Modal Overlay */
        .contact-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.75);
            backdrop-filter: blur(8px);
            z-index: 10000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.28s ease;
            overflow-y: auto;
            padding: 40px 20px;
            display: flex;
            align-items: flex-start;
            justify-content: center;
        }

        .contact-modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        /* inner container */
        .contact-modal-overlay-inner {
            width: 100%;
            max-width: 1400px;
        }

        /* Contact Modal Container */
        .contact-modal-container {
            background: white;
            border-radius: 20px;
            width: 100%;
            display: grid;
            grid-template-columns: 45% 55%;
            transform: translateY(30px) scale(0.98);
            transition: transform 0.28s ease, opacity 0.28s ease;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            margin: auto;
        }

        .contact-modal-overlay.active .contact-modal-container {
            transform: translateY(0) scale(1);
        }

        /* Left side */
        .contact-modal-left {
            background: radial-gradient(ellipse at top left, rgba(13, 143, 208, 0.32) 0%, rgba(0, 0, 0, 0.08) 40%),
                radial-gradient(ellipse at bottom right, rgba(237, 131, 33, 0.22) 0%, transparent 50%),
                linear-gradient(135deg, #0f1419 0%, #1a2332 50%, #1a2030 100%);
            padding: 60px 40px;
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            border-radius: 20px 0 0 20px;
            position: relative;
        }

        /* floating particles */
        .contact-modal-left::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                radial-gradient(1px 1px at 120px 80px, rgba(13, 159, 232, 0.12), transparent),
                radial-gradient(1px 1px at 320px 200px, rgba(237, 131, 33, 0.10), transparent);
            background-size: 500px 400px;
            animation: contactFloat 20s ease-in-out infinite;
            pointer-events: none;
        }

        @keyframes contactFloat {

            0%,
            100% {
                transform: translate(0, 0);
            }

            33% {
                transform: translate(-6px, -4px);
            }

            66% {
                transform: translate(5px, -8px);
            }
        }

        /* clients */
        .contact-clients-section h2 {
            font-size: 28px;
            margin-bottom: 28px;
        }

        .contact-clients-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-bottom: 30px;
        }

        .contact-client-logo {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 8px;
        }

        .contact-client-logo img {
            max-width: 120px;
/*             filter: brightness(0) invert(1); */
			height:auto;
            opacity: 0.92;
            transition: opacity .25s;
        }

		.contact-clients-section h2 {
			color:white;
			}

		@media(min-width:765px){
				.contact-modal-right .contact-form-title{
				margin-bottom: 1.2em;
			}
	      }

        /* stats */
        .contact-stats-section {
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            padding-top: 30px;
        }

        .contact-stat-number {
            font-size: 40px;
            font-weight: 500;
            background: linear-gradient(135deg, #0d9fe8 0%, #ed8321 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            display: block;
            margin-bottom: 8px;
        }

        .contact-stat-description {
            color: rgba(255, 255, 255, 0.85);
            font-size: 15px;
        }

        /* Right side (form) */
        .contact-modal-right {
            background: #f8f9fa;
            padding: 50px;
            border-radius: 0 20px 20px 0;
            position: relative;
        }

        /* close */
        .contact-close-btn {
            position: absolute;
            top: 18px;
            right: 18px;
            background: transparent;
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            color: #9ca3af;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all .22s;
        }

        .contact-close-btn:hover {
            background: #e5e7eb;
            color: #222;
            transform: rotate(90deg);
        }

        /* form */
        .contact-form-title {
            font-size: 36px;
            margin-bottom: 10px;
            color: #212529;
        }

        .contact-form {
            display: flex;
            flex-direction: column;
            gap: 18px;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }

        .form-group {
            display: flex;
            flex-direction: column;
        }

        .contact-form .form-group {
            margin-bottom: 0;
        }

        .phone-input-group {
            display: flex;
            gap: 8px;
        }

        .form-label {
            font-weight: 600;
            margin-bottom: 8px;
            color: #212529;
        }

        .form-input,
        .form-textarea {
            padding: 14px 16px;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            font-size: 15px;
            background: white;
        }

        .form-input:focus,
        .form-textarea:focus {
            outline: none;
            box-shadow: 0 0 0 4px rgba(13, 159, 232, 0.08);
            border-color: #0d9fe8;
        }

        .country-select {
            width: 80px;
            padding: 12px;
            border-radius: 8px;
            border: 2px solid #e5e7eb;
        }

        .form-textarea {
            min-height: 120px;
            resize: vertical;
        }

        /* char counter */
        .char-counter {
            text-align: right;
            font-size: 12px;
            color: #6c757d;
            margin-top: 6px;
        }

        /* submit */
        .submit-btn {
            width: 100%;
            background: #121212;
            color: white;
            padding: 16px 20px;
            font-weight: 600;
            border-radius: 8px;
            border: none;
            cursor: pointer;
            display: inline-flex;
            gap: 10px;
            align-items: center;
            justify-content: center;
        }

        .submit-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
        }

        /* input icon */
        .input-with-icon {
            position: relative;
        }

        .input-icon {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: #22c55e;
            display: none;
        }

        /* responsive */
        @media (max-width: 991px) {
            .contact-modal-container {
                grid-template-columns: 1fr;
                max-width: 680px;
                border-radius: 20px;
            }

            .contact-modal-right {
                order: 1;
                border-radius: 20px 20px 0 0;
                padding: 36px;
            }

            .contact-modal-left {
                order: 2;
                border-radius: 0 0 20px 20px;
                padding: 30px;
            }

            .contact-clients-grid {
                grid-template-columns: repeat(4, 1fr);
                gap: 10px;
            }

            .contact-stat-number {
                font-size: 34px;
            }

            .form-row {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 480px) {

            .contact-modal-right,
            .contact-modal-left {
                padding: 20px;
            }

            .contact-client-logo img {
                max-width: 70px;
            }

            .contact-modal-container {
                max-width: 96vw;
            }

            .contact-clients-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
.img-fluid {
    transition: transform 0.3s;
    border-radius: 5px;
}

.img-fluid:hover {
    transform: scale(1.05); /* slight zoom on hover */
}
.ast-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0;
    padding-right: 0;
}
.form-group {
    margin-bottom: 24px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    transition: all 0.3s ease;
    background: #ffffff;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--brand-blue-text);
    box-shadow: 0 0 0 3px rgba(13, 159, 232, 0.1);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}
/* Success Message */
.success-message {
    display: none;
    position: fixed;
    top: 20px;
    right: 20px;
    background: #4caf50;
    color: white;
    padding: 16px 24px;
    border-radius: 8px;
    z-index: 1001;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Error styling */
.form-input.error,
.form-select.error,
.form-textarea.error {
    border-color: #e74c3c;
}

.error-message {
    color: #e74c3c;
    font-size: 12px;
    margin-top: 4px;
}

/* Loading states */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

.loading .submit-button {
    background: #ccc;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
.videos-sections, .photos-sections{
    background: white;
}

.videos-grid {
  display: grid;
/*   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* flexible columns */ 
  grid-template-columns: repeat(3, 1fr);
  gap: 20px; /* space between items */
}
@media(max-width:765px){
	.videos-grid {
		  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* flexible columns */ 
		}
}
.card-image-container video {
  width: 100%;         /* make video fill its grid cell */
  height: 200px;       /* fixed height like thumbnail */
  object-fit: cover;   /* crop like an image thumbnail */
  border-radius: 10px; /* rounded corners */
  display: block;
}

/* .main-content > section:first-of-type{
	padding-top:110px;
/* 	padding-bottom:35px; *//*
} */
.nav-menu .mega-menu-section ul{
	margin:0;
}
/* @media(max-width:765px){
		.main-content > section:first-of-type{
			padding-top:90px;
		}
	}
 */
.card-image-container.video::after, .card-image-container.photo::after {
  content: normal;
}

.contact-form-container .form-header, .contact-form-container .form-row .form-group, .contact-modal-right .form-row, section.contact-section .contact-methods{
  margin-bottom: 0px;
}
span.wpcf7-form-control.wpcf7-acceptance .wpcf7-list-item{
	margin-left:0px;
}
#contactForm .form-row {
  display: grid;
  margin-right: 0;
  margin-left: 0;
}

.ai-menu-btn:hover {
	text-decoration:none;
	color:white;
}
.ai-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;

    background: linear-gradient(135deg, #0f5ef7, #00c6ff);
    color: #ffffff;

    transition: all 0.3s ease;
}

.ai-menu-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 123, 255, 0.3);
}

.ai-icon {
    font-size: 14px;
}
input, select {
    height: 46px !important;
}
.phone-input-group span.wpcf7-form-control-wrap {
    width: fit-content;
}