:root {
      --primary: #2a6f4e;
      --secondary: #1d4b37;
      --accent: #4caf50;
      --light: #f8f9fa;
      --dark: #212529;
      --gradient-start: #2a6f4e;
      --gradient-end: #1d4b37;
      --card-bg: #ffffff;
      --shadow: rgba(0, 0, 0, 0.1);
      --hover-shadow: rgba(0, 0, 0, 0.15);
      --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      --danger: #dc3545;
    }

    /* Override Bootstrap text-success to make navigation green very dark */
    .text-success {
      color: #4d4d4d !important;
    }
    body {
      font-family: 'IRANSans', sans-serif;
      background-color: #fff;
      color: #333;
      overflow-x: hidden;
      line-height: 1.6;
    }

    /* Ensure all headings use IRANSans */
    h1, h2, h3, h4, h5, h6 {
      font-family: 'IRANSans', sans-serif;
    }

    /* Ensure all text elements use IRANSans */
    p, span, div, a, li, td, th, label, input, textarea, button {
      font-family: 'IRANSans', sans-serif;
    }
    .hero-bg {
      background: linear-gradient(135deg, rgba(42,111,78,0.8) 0%, rgba(29,75,55,0.8) 100%), url('asset/images/5.webp');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      color: white;
      padding: 120px 0;
      min-height: 90vh;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
    }
    .hero-bg::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(42, 111, 78, 0.7),
                  radial-gradient(circle at 20% 30%, rgba(255,255,255,0.1) 0%, transparent 20%),
                  radial-gradient(circle at 80% 70%, rgba(255,255,255,0.1) 0%, transparent 20%);
      pointer-events: none;
    }
    .hero-content {
      position: relative;
      z-index: 2;
    }
    .hero-title {
      text-shadow: 3px 3px 6px rgba(0,0,0,0.5);
      font-size: 3.5rem;
      line-height: 1.2;
      margin-bottom: 1rem;
    }
    .hero-subtitle {
      font-size: 1.4rem;
      font-weight: 300;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
      margin-bottom: 2rem;
    }
    .hero-stats {
      margin: 2rem 0;
    }
    .stat-item {
      background: rgba(255, 255, 255, 0.0);
      backdrop-filter: blur(10px);
      border-radius: 15px;
      padding: 1rem;
      border: 1px solid rgba(255, 255, 255, 0.2);
      transition: var(--transition);
      text-align: center;
 
    }
    .stat-item:hover {
      transform: translateY(-5px);
      background: rgba(255, 255, 255, 0.15);
    }
    .stat-number {
      font-size: 2rem;
      font-weight: 700;
      color: #fff;
      margin-bottom: 0.5rem;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    }
    .stat-label {
      font-size: 0.9rem;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.9);
    }

/* Hero Carousel Styles */
#heroCarousel .carousel-inner {
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.3),
    0 5px 15px rgba(0, 0, 0, 0.2),
    0 2px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border: 3px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
  border-radius: 15px;
}

#heroCarousel .carousel-item {
  position: relative;
  height: 400px;
}

#heroCarousel .carousel-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
  pointer-events: none;
  border-radius: 15px;
  z-index: 1;
}

#heroCarousel .carousel-item img {
  border-radius: 15px;
  aspect-ratio: 1;
  height: 400px;
}

#heroCarousel .carousel-caption {
  border-radius: 10px;
  padding: 10px;
  bottom: 20px;
  z-index: 2;
}

#heroCarousel .carousel-caption h5,
#heroCarousel .carousel-caption p {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

#heroCarousel .carousel-indicators button {
  background-color: rgba(255, 255, 255, 0.7);
  border: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin: 0 4px;
}

#heroCarousel .carousel-indicators .active {
  background-color: var(--primary, #28a745);
}

/* Responsive carousel */
@media (max-width: 1199.98px) {
  #heroCarousel .carousel-item img {
    height: 300px !important;
  }

  .hero-content .row {
    text-align: center;
  }
}

@media (max-width: 576px) {
  #heroCarousel .carousel-item img {
    height: 250px !important;
  }
}

/* Video Container Styles */
.video-container {
  background: white;
  border-radius: 15px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.video-container .ratio {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.video-container iframe,
.video-container video {
  border: none;
  border-radius: 10px;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.video-container p {
  font-size: 0.9rem;
  margin-bottom: 0;
}

/* Responsive video */
@media (max-width: 991.98px) {
  .video-container {
    margin-top: 2rem;
  }

  .video-container .ratio {
    margin-bottom: 1rem;
  }
}

/* Dark stats for light backgrounds */
    .stat-item-dark {
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(10px);
      border-radius: 15px;
      padding: 1rem;
      border: 1px solid rgba(0, 0, 0, 0.1);
      transition: var(--transition);
      text-align: center;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .stat-item-dark:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    }
    .stat-number-dark {
      font-size: 2rem;
      font-weight: 700;
      color: #2c3e50;
      margin-bottom: 0.5rem;
      text-shadow: none;
    }
    .stat-label-dark {
      font-size: 0.9rem;
      font-weight: 500;
      color: #34495e;
    }
    .hero-buttons {
      margin: 2rem 0;
    }
    /* Outline Light Button */
    .btn-outline-light {
      background: rgba(255, 255, 255, 0.1) !important;
      backdrop-filter: blur(10px) !important;
      border: 2px solid rgba(255, 255, 255, 0.8) !important;
      color: white !important;
      box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1) !important;
    }

    .btn-outline-light:hover {
      background: rgba(255, 255, 255, 0.2) !important;
      border-color: white !important;
      color: white !important;
      transform: translateY(-3px) scale(1.02) !important;
      box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2) !important;
    }

    /* Outline Success Button */
    .btn-outline-success {
      background: transparent !important;
      border: 2px solid var(--accent) !important;
      color: var(--accent) !important;
      box-shadow: 0 4px 15px rgba(76, 175, 80, 0.2) !important;
    }

    .btn-outline-success:hover {
      background: var(--accent) !important;
      color: white !important;
      transform: translateY(-3px) scale(1.02) !important;
      box-shadow: 0 8px 25px rgba(76, 175, 80, 0.4) !important;
      border-color: var(--accent) !important;
    }

    /* Outline Primary Button */
    .btn-outline-primary {
      background: transparent !important;
      border: 2px solid var(--primary) !important;
      color: var(--primary) !important;
      box-shadow: 0 4px 15px rgba(42, 111, 78, 0.2) !important;
    }

    .btn-outline-primary:hover {
      background: var(--primary) !important;
      color: white !important;
      transform: translateY(-3px) scale(1.02) !important;
      box-shadow: 0 8px 25px rgba(42, 111, 78, 0.4) !important;
      border-color: var(--primary) !important;
    }

    /* Light Button */
    .btn-light {
      background: rgba(255, 255, 255, 0.95) !important;
      color: var(--primary) !important;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
      border: 1px solid rgba(255, 255, 255, 0.8) !important;
    }

    .btn-light:hover {
      background: white !important;
      color: var(--accent) !important;
      transform: translateY(-3px) scale(1.02) !important;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
    }

    /* Button Sizes */
    .btn-sm {
      padding: 10px 24px !important;
      font-size: 0.9rem !important;
      min-width: 120px !important;
    }

    .btn-lg {
      padding: 16px 40px !important;
      font-size: 1.1rem !important;
      min-width: 200px !important;
    }

    /* Button with Icons */
    .btn i {
      font-size: 1.1em !important;
      transition: transform 0.3s ease !important;
    }

    .btn:hover i {
      transform: scale(1.1) !important;
    }

    /* Button Loading State */
    .btn.loading {
      pointer-events: none !important;
      position: relative !important;
      color: transparent !important;
    }

    .btn.loading::after {
      content: '' !important;
      position: absolute !important;
      width: 16px !important;
      height: 16px !important;
      top: 50% !important;
      left: 50% !important;
      margin-left: -8px !important;
      margin-top: -8px !important;
      border: 2px solid rgba(255, 255, 255, 0.3) !important;
      border-radius: 50% !important;
      border-top-color: white !important;
      animation: spin 1s ease-in-out infinite !important;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    /* Button Pulse Animation */
    .btn-pulse {
      animation: pulse 2s infinite !important;
    }

    @keyframes pulse {
      0% { box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4); }
      50% { box-shadow: 0 4px 25px rgba(76, 175, 80, 0.8); }
      100% { box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4); }
    }
    .hero-social {
      margin-top: 3rem;
      padding-top: 2rem;
      border-top: 1px solid rgba(255, 255, 255, 0.2);
    }
    .hero-social p {
      font-size: 0.9rem;
      opacity: 0.9;
      margin-bottom: 1rem;
    }
    .social-icons {
      display: flex;
      justify-content: center;
      gap: 1rem;
    }
    .social-link {
      width: 50px;
      height: 50px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 1.2rem;
      transition: var(--transition);
      text-decoration: none;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .social-link:hover {
      background: rgba(255, 255, 255, 0.2);
      transform: translateY(-3px) scale(1.1);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }

    /* 3D Floating Elements */
    .floating-elements {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      overflow: hidden;
    }
    .floating-element {
      position: absolute;
      color: rgba(255, 255, 255, 0.3);
      font-size: 3rem;
      animation: float 6s ease-in-out infinite;
      z-index: 1;
    }
    .floating-1 {
      top: 15%;
      left: 8%;
      animation-delay: 0s;
    }
    .floating-2 {
      top: 15%;
      right: 8%;
      animation-delay: 2s;
    }
    .floating-3 {
      top: 70%;
      left: 12%;
      animation-delay: 4s;
    }
    .floating-4 {
      top: 70%;
      right: 12%;
      animation-delay: 1s;
    }
    @keyframes float {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      25% { transform: translateY(-20px) rotate(5deg); }
      50% { transform: translateY(-10px) rotate(0deg); }
      75% { transform: translateY(-30px) rotate(-5deg); }
    }

    /* Parallax Layers */
    .parallax-layer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      pointer-events: none;
    }
    .parallax-layer-1 {
  
      opacity: 0.1;
      transform: translateZ(0) scale(1.1);
    }
    .parallax-layer-2 {
      background: linear-gradient(45deg, transparent 30%, rgba(42,111,78,0.1) 50%, transparent 70%);
      transform: translateZ(0) scale(1.05);
    }
    .parallax-layer-3 {
      background: radial-gradient(circle at center, transparent 40%, rgba(29,75,55,0.05) 100%);
      transform: translateZ(0) scale(1.02);
    }

    /* Scroll Indicator */
    .scroll-indicator {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
      display: flex;
      flex-direction: column;
      align-items: center;
      opacity: 0.8;
      animation: fadeInOut 2s ease-in-out infinite;
    }

    .scroll-mouse {
      width: 24px;
      height: 36px;
      border: 2px solid rgba(255, 255, 255, 0.7);
      border-radius: 12px;
      position: relative;
      margin-bottom: 8px;
    }

    .scroll-wheel {
      width: 4px;
      height: 8px;
      background: rgba(255, 255, 255, 0.7);
      border-radius: 2px;
      position: absolute;
      top: 6px;
      left: 50%;
      transform: translateX(-50%);
      animation: scrollWheel 2s ease-in-out infinite;
    }

    .scroll-arrows {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .scroll-arrow {
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 8px solid rgba(255, 255, 255, 0.7);
      animation: scrollArrows 2s ease-in-out infinite;
    }

    .scroll-arrow:nth-child(2) {
      animation-delay: 0.2s;
    }

    .scroll-arrow:nth-child(3) {
      animation-delay: 0.4s;
    }

    @keyframes fadeInOut {
      0%, 100% { opacity: 0.5; }
      50% { opacity: 1; }
    }

    @keyframes scrollWheel {
      0%, 100% {
        opacity: 0;
        transform: translateX(-50%) translateY(0);
      }
      50% {
        opacity: 1;
        transform: translateX(-50%) translateY(6px);
      }
    }

    @keyframes scrollArrows {
      0%, 20%, 50%, 80%, 100% {
        opacity: 0;
        transform: translateY(0);
      }
      40% {
        opacity: 1;
        transform: translateY(8px);
      }
      60% {
        opacity: 1;
        transform: translateY(16px);
      }
    }

    /* Modern Button System */
    .btn {
      position: relative !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 0.5rem !important;
      padding: 14px 32px !important;
      font-size: 1rem !important;
      font-weight: 600 !important;
      text-align: center !important;
      text-decoration: none !important;
      border: none !important;
      border-radius: 12px !important;
      cursor: pointer !important;
      transition: var(--transition) !important;
      overflow: hidden !important;
      text-transform: none !important;
      letter-spacing: 0.3px !important;
      min-width: 160px !important;
      box-sizing: border-box !important;
    }

    .btn::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: var(--transition);
    }

    .btn:hover::before {
      left: 100%;
    }

    /* Primary Button - Hero CTA */
    .btn-primary {
      background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 50%, #2e7d32 100%) !important;
      color: white !important;
      box-shadow: 0 8px 25px rgba(42, 111, 78, 0.4) !important;
      border: 2px solid transparent !important;
      position: relative !important;
      z-index: 1 !important;
    }

    .btn-primary::after {
      content: '' !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      background: linear-gradient(135deg, #2e7d32 0%, var(--accent) 50%, var(--primary) 100%) !important;
      opacity: 0 !important;
      transition: opacity 0.3s ease !important;
      border-radius: 10px !important;
      z-index: -1 !important;
    }

    .btn-primary:hover {
      transform: translateY(-3px) scale(1.02) !important;
      box-shadow: 0 12px 35px rgba(42, 111, 78, 0.6) !important;
      border-color: rgba(255, 255, 255, 0.3) !important;
    }

    .btn-primary:hover::after {
      opacity: 1 !important;
    }

    .btn-primary:active {
      transform: translateY(-1px) scale(0.98) !important;
      box-shadow: 0 4px 15px rgba(42, 111, 78, 0.4) !important;
    }
    .section-title {
      position: relative;
      margin-bottom: 50px;
      text-align: center;
      font-weight: 700;
      font-size: 1.5rem;
      color: var(--dark);
      text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    }
    .section-title::after {
      content: '';
      position: absolute;
      bottom: -25px;
      right: 50%;
      transform: translateX(50%);
      width: 120px;
      height: 24px;
      animation: pulse 2s infinite;
    }

    /* Creative SVG Designs for Section Titles */
    .section-title[data-svg="sprout"]::after {
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' width='120' height='24'%3E%3Cdefs%3E%3ClinearGradient id='sproutGrad' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' style='stop-color:%23FF6B35;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%232A6F4E;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M10 12 Q30 8 50 12 Q70 16 90 12 Q110 8 120 12' stroke='url(%23sproutGrad)' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='12' r='2' fill='%23FF6B35'/%3E%3Cpath d='M10 12 Q15 8 20 12 Q25 16 30 12' stroke='%23FF6B35' stroke-width='2' fill='none'/%3E%3Cpath d='M15 12 Q20 8 25 12' stroke='%23FF6B35' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center;
    }

    .section-title[data-svg="wave"]::after {
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' width='120' height='24'%3E%3Cdefs%3E%3ClinearGradient id='waveGrad' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' style='stop-color:%232A6F4E;stop-opacity:1' /%3E%3Cstop offset='50%25' style='stop-color:%23FF6B35;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%232A6F4E;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 12 Q20 6 40 12 T80 12 Q100 18 120 12' stroke='url(%23waveGrad)' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='0' cy='12' r='1.5' fill='%232A6F4E'/%3E%3Ccircle cx='120' cy='12' r='1.5' fill='%232A6F4E'/%3E%3C/svg%3E") no-repeat center;
    }

    .section-title[data-svg="leaf"]::after {
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' width='120' height='24'%3E%3Cdefs%3E%3ClinearGradient id='leafGrad' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' style='stop-color:%232A6F4E;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%2334D399;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M10 20 Q40 8 70 12 Q100 16 120 8' stroke='url(%23leafGrad)' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M10 20 Q25 15 40 18 Q55 21 70 18' stroke='%2334D399' stroke-width='2' fill='none' opacity='0.8'/%3E%3Cpath d='M15 18 Q30 12 45 15 Q60 18 75 15' stroke='%2334D399' stroke-width='1.5' fill='none' opacity='0.6'/%3E%3Ccircle cx='10' cy='20' r='2' fill='%232A6F4E'/%3E%3C/svg%3E") no-repeat center;
    }

    /* Technology section SVG - keep white/light styling */
    #technology .section-title[data-svg="leaf"]::after {
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' width='120' height='24'%3E%3Cdefs%3E%3ClinearGradient id='leafGradTech' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' style='stop-color:%23FFFFFF;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23E8F5E8;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M10 20 Q40 8 70 12 Q100 16 120 8' stroke='url(%23leafGradTech)' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M10 20 Q25 15 40 18 Q55 21 70 18' stroke='%23E8F5E8' stroke-width='2' fill='none' opacity='0.8'/%3E%3Cpath d='M15 18 Q30 12 45 15 Q60 18 75 15' stroke='%23E8F5E8' stroke-width='1.5' fill='none' opacity='0.6'/%3E%3Ccircle cx='10' cy='20' r='2' fill='%23FFFFFF'/%3E%3C/svg%3E") no-repeat center;
    }

    .section-title[data-svg="molecule"]::after {
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' width='120' height='24'%3E%3Cdefs%3E%3ClinearGradient id='molGrad' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' style='stop-color:%23FF6B35;stop-opacity:1' /%3E%3Cstop offset='50%25' style='stop-color:%23F59E0B;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%232A6F4E;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='15' cy='12' r='3' fill='%23FF6B35'/%3E%3Ccircle cx='45' cy='8' r='2.5' fill='%23F59E0B'/%3E%3Ccircle cx='75' cy='16' r='2.5' fill='%23F59E0B'/%3E%3Ccircle cx='105' cy='10' r='3' fill='%232A6F4E'/%3E%3Cline x1='18' y1='12' x2='42' y2='8' stroke='url(%23molGrad)' stroke-width='2'/%3E%3Cline x1='47.5' y1='8' x2='72.5' y2='16' stroke='url(%23molGrad)' stroke-width='2'/%3E%3Cline x1='77.5' y1='16' x2='102' y2='10' stroke='url(%23molGrad)' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
    }

    .section-title[data-svg="growth"]::after {
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' width='120' height='24'%3E%3Cdefs%3E%3ClinearGradient id='growthGrad' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' style='stop-color:%2334D399;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%232A6F4E;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M5 19 L5 12 L15 12 L15 8 L25 8 L25 15 L35 15 L35 10 L45 10 L45 17 L55 17 L55 12 L65 12 L65 19 L75 19 L75 14 L85 14 L85 16 L95 16 L95 11 L105 11 L105 18 L115 18 L115 13' stroke='url(%23growthGrad)' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='5' cy='19' r='1.5' fill='%2334D399'/%3E%3Ccircle cx='15' cy='8' r='1.5' fill='%2334D399'/%3E%3Ccircle cx='25' cy='15' r='1.5' fill='%2334D399'/%3E%3Ccircle cx='35' cy='10' r='1.5' fill='%2334D399'/%3E%3Ccircle cx='45' cy='17' r='1.5' fill='%2334D399'/%3E%3Ccircle cx='55' cy='12' r='1.5' fill='%2334D399'/%3E%3Ccircle cx='65' cy='19' r='1.5' fill='%2334D399'/%3E%3Ccircle cx='75' cy='14' r='1.5' fill='%2334D399'/%3E%3Ccircle cx='85' cy='16' r='1.5' fill='%2334D399'/%3E%3Ccircle cx='95' cy='11' r='1.5' fill='%2334D399'/%3E%3Ccircle cx='105' cy='18' r='1.5' fill='%2334D399'/%3E%3Ccircle cx='115' cy='13' r='1.5' fill='%2334D399'/%3E%3C/svg%3E") no-repeat center;
    }
    @keyframes pulse {
      0% { opacity: 1; }
      50% { opacity: 0.7; }
      100% { opacity: 1; }
    }
    .feature-card {
      background: var(--card-bg);
      border-radius: 15px;
      padding: 25px;
      box-shadow: 0 10px 30px var(--shadow);
      transition: var(--transition);
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      border: 1px solid #e9ecef;
      position: relative;
      overflow: hidden;
    }
    .feature-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
      transition: var(--transition);
    }
    .feature-card:hover::before {
      left: 100%;
    }
    .feature-card:hover {
      transform: translateY(-10px) scale(1.02);
      box-shadow: 0 20px 40px rgba(0,0,0,0.15);
      border-left: 5px solid var(--accent);
    }

   
    .feature-icon {
      width: 70px;
      height: 70px;
      background: linear-gradient(135deg, var(--primary), var(--accent));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 2rem;
      margin-bottom: 20px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
      transition: var(--transition);
    }
    .feature-icon:hover {
      transform: scale(1.1) rotate(15deg);
    }

    /* Add spacing between title and text in feature cards */
    .feature-card .card-title {
      margin-bottom: 15px;
    }

    /* Add spacing between title and text in tech cards */
    .tech-card .card-title {
      margin-bottom: 15px;
    }

    /* Tech card images */
    .tech-image {
      width: 100%;
      height: 200px;
      margin-bottom: 20px;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

    .tech-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: var(--transition);
    }

    .tech-card:hover .tech-image img {
      transform: scale(1.05);
    }
    .tech-card {
 
   
      border-radius: 15px;
      padding: 25px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.2);
      transition: var(--transition);
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .tech-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 5px;
      background: linear-gradient(90deg, var(--primary), var(--accent));
      transition: var(--transition);
    }
    .tech-card:hover::before {
      height: 10px;
    }
    .tech-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    }
    .comparison-table {
      background: white;
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
      border: 1px solid #dee2e6;
    }
    .comparison-table th {
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      color: white;
      font-weight: 600;
      padding: 15px;
      text-align: center;
    }
    .comparison-table td {
      padding: 15px;
      vertical-align: middle;
      text-align: center;
    }
    .badge-success {
      background: linear-gradient(135deg, var(--accent), #3d8b40);
      color: white;
      font-weight: 600;
      padding: 5px 15px;
      border-radius: 20px;
      font-size: 0.85rem;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    .testimonial-card {
      background: white;
      border-radius: 15px;
      padding: 25px;
      box-shadow: 0 5px 20px rgba(0,0,0,0.05);
      border: 1px solid #e9ecef;
      transition: var(--transition);
      position: relative;
      overflow: hidden;
    }
    .testimonial-card::before {
      content: '"';
      position: absolute;
      top: 10px;
      right: 20px;
      font-size: 4rem;
      color: rgba(76, 175, 80, 0.1);
      font-family: serif;
      z-index: 0;
    }
    .testimonial-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
    .rating {
      color: #ffc107;
      font-size: 1.2rem;
    }
    .digital-tool-card {
      background: linear-gradient(135deg, #f8f9fa, #e9ecef);
      border-radius: 15px;
      padding: 25px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.05);
      transition: var(--transition);
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .digital-tool-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 5px;
      background: linear-gradient(90deg, var(--primary), var(--accent));
      transition: var(--transition);
    }
    .digital-tool-card:hover::before {
      height: 10px;
    }
    .digital-tool-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    }
    .article-card {
      background: white;
      border-radius: 15px;
      padding: 20px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.05);
      transition: var(--transition);
      height: 100%;
      border: 1px solid #e9ecef;
    }
    .article-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    }
    .gallery-item {
      position: relative;
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
      transition: var(--transition);
      height: 250px;
    }
    .gallery-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: var(--transition);
    }
    .gallery-item:hover img {
      transform: scale(1.05);
    }
    .gallery-item::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
      opacity: 0;
      transition: var(--transition);
    }
    .gallery-item:hover::before {
      opacity: 1;
    }
    .gallery-item .caption {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 15px;
      color: white;
      background: rgba(0,0,0,0.7);
      transform: translateY(100%);
      transition: var(--transition);
    }
    .gallery-item:hover .caption {
      transform: translateY(0);
    }
    .faq-item {
      background: white;
      border-radius: 15px;
      padding: 20px;
      margin-bottom: 15px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.05);
      border: 1px solid #e9ecef;
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      overflow: hidden;
    }
    .faq-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 25px rgba(0,0,0,0.1);
      border-color: rgba(42, 111, 78, 0.2);
    }
    .faq-item.active {
      box-shadow: 0 8px 30px rgba(42, 111, 78, 0.15);
      border-color: var(--primary);
      background: linear-gradient(135deg, rgba(42, 111, 78, 0.02), rgba(76, 175, 80, 0.02));
    }
    .faq-question {
      font-weight: 600;
      color: var(--primary);
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      border-bottom: 2px solid transparent;
      transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      user-select: none;
    }
    .faq-question:hover {
      color: var(--accent);
      border-bottom: 2px solid var(--accent);
      transform: translateX(5px);
    }
    .faq-question i {
      transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      font-size: 1.2rem;
    }
    .faq-question.active i {
      transform: rotate(180deg);
      color: var(--accent);
    }
    .faq-answer {
      max-height: 0;
      overflow: hidden;
      padding: 0;
      color: #666;
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      transform: translateY(-10px);
      opacity: 0;
    }
    .faq-answer.show {
      max-height: 500px;
      padding: 15px 0 0;
      transform: translateY(0);
      opacity: 1;
    }
    .cta-section {
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      color: white;
      text-align: center;
    }
    .cta-section h2 {
      font-size: 2rem;
      margin-bottom: 20px;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    }
    .cta-section p {
      font-size: 1.2rem;
      max-width: 600px;
      margin: 0 auto 30px;
    }
    .social-icons {
      display: flex;
      justify-content: center;
      gap: 15px;
      margin-top: 30px;
    }
    .social-icons a {
      width: 50px;
      height: 50px;
      background: rgba(255,255,255,0.1);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 1.2rem;
      transition: var(--transition);
    }
    .social-icons a:hover {
      background: rgba(255,255,255,0.2);
      transform: translateY(-5px) scale(1.1);
    }
    /* Footer Main Styles */
    .footer {
      background: #1a1919;
      color: white;
      padding: 40px 0 20px;
    }

    .footer-main {
      margin-bottom: 0px;
    }

    .footer-column {
      margin-bottom: 30px;
    }

    /* Footer About Section */
    .footer-about {
      /* Additional styles for about section can go here */
    }

    .footer-title {
      font-weight: 600;
      margin-bottom: 20px;
      color: white;
    }

    .footer-logo {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--accent);
      margin-bottom: 15px;
    }

    .footer-description {
      color: #ddd;
      line-height: 1.6;
      margin-bottom: 0;
    }

    /* Footer Links Section */
    .footer-links-section {
      /* Additional styles for links section can go here */
    }

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

    .footer-link-item {
      margin-bottom: 10px;
    }

    .footer-link {
      color: #ddd;
      text-decoration: none;
      transition: var(--transition);
      display: inline-block;
    }

    .footer-link:hover {
      color: var(--accent);
      padding-right: 5px;
    }

    .footer-modal-btn {
      border: none !important;
      background: transparent !important;
      padding: 0 !important;
      text-align: right;
      width: auto;
    }

    .footer-modal-btn:hover {
      color: var(--accent) !important;
      padding-right: 5px !important;
    }

    /* Footer Contact Section */
    .footer-contact {
      /* Additional styles for contact section can go here */
    }

    .footer-contact-list {
      /* Specific styles for contact list if needed */
    }

    .footer-contact-item {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
    }

    .footer-contact-icon {
      color: var(--accent);
      flex-shrink: 0;
    }

    .footer-contact-text {
      color: #ddd;
      line-height: 1.4;
    }

    .footer-contact-text a {
      color: #ddd !important;
      text-decoration: none !important;
      transition: color 0.3s ease;
    }

    .footer-contact-text a:hover {
      color: #fff !important;
      text-decoration: underline !important;
    }

    /* Footer Bottom */
    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,0.1);
      padding-top: 20px;
    }

    .copyright {
      text-align: center;
      font-size: 0.9rem;
      color: #aaa;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 10px;
    }

    .copyright-text {
      /* Main copyright text */
    }

    .copyright-separator {
      color: rgba(255,255,255,0.3);
    }

    .copyright-developer {
      /* Developer credit text */
    }

    .copyright-link {
      text-decoration: none;
      color: var(--accent);
      transition: color 0.3s ease;
    }

    .copyright-link:hover {
      color: #4CAF50;
    }
    .copyright a:hover {
      color: #45a049;
    }

    /* Footer Responsive Styles */
    @media (max-width: 768px) {
      .footer {
        padding: 30px 0 15px;
      }

      .footer-column {
        margin-bottom: 25px;
        text-align: center;
      }

      .footer-contact-item {
        justify-content: center;
        margin-bottom: 12px;
      }

      .footer-contact-icon {
        margin-left: 8px;
        margin-right: 0;
      }

      .copyright {
        flex-direction: column;
        gap: 8px;
        font-size: 0.85rem;
        line-height: 1.4;
      }

      .copyright-separator {
        display: none;
      }

      .footer-modal-btn {
        text-align: center !important;
      }
    }

    @media (max-width: 576px) {
      .footer {
        padding: 25px 0 10px;
      }

      .footer-main {
        margin-bottom: 20px;
      }

      .footer-column {
        margin-bottom: 20px;
      }

      .footer-title {
        font-size: 1.1rem;
        margin-bottom: 15px;
      }

    .footer-logo {
      font-size: 1.3rem;
        margin-bottom: 12px;
      }

    .footer-logo-img {
      display: block;
      margin: 0 auto 10px;
      filter: brightness(0.9);
    }

    /* Mobile responsive for footer logo */
    @media (max-width: 767.98px) {
      .footer-logo-img {
        height: 60px !important;
      }
    }

      .footer-description {
        font-size: 0.9rem;
      }

      .footer-link-item {
        margin-bottom: 8px;
      }

      /* Reduce line-height for article titles on mobile */
      .article-card h5 {
        line-height: 1.4 !important;
        font-size: 1rem !important;
      }
    }
    .chart-container {
      background: white;
      border-radius: 15px;
      padding: 15px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
      border: 1px solid #e9ecef;
      margin: 20px 0;
    }

    /* Responsive chart adjustments */
    @media (max-width: 991.98px) {
      .chart-container {
        margin: 20px 0 0 0;
        max-width: none;
        padding: 10px;
      }
    }

    /* Custom Scrollbar */
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    ::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.05);
      border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb {
      background: var(--primary);
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.3);
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--accent);
    }

    ::-webkit-scrollbar-corner {
      background: rgba(0, 0, 0, 0.05);
    }

    /* Firefox scrollbar */
    * {
      scrollbar-width: thin;
      scrollbar-color: var(--primary) rgba(0, 0, 0, 0.05);
    }
    /* Animation */
    .animate-on-scroll {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }
    .animate-on-scroll.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .fade-in {
      animation: fadeIn 1s ease-out;
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    .slide-in-left {
      animation: slideInLeft 1s ease-out;
    }
    @keyframes slideInLeft {
      from { opacity: 0; transform: translateX(-100px); }
      to { opacity: 1; transform: translateX(0); }
    }
    .slide-in-right {
      animation: slideInRight 1s ease-out;
    }
    @keyframes slideInRight {
      from { opacity: 0; transform: translateX(100px); }
      to { opacity: 1; transform: translateX(0); }
    }
    .bounce-in {
      animation: bounceIn 1s ease-out;
    }
    @keyframes bounceIn {
      0% { opacity: 0; transform: scale(0.3); }
      50% { opacity: 1; transform: scale(1.05); }
      70% { transform: scale(0.9); }
      100% { transform: scale(1); }
    }
    /* Responsive */
    @media (max-width: 768px) {
      .section-title {
        font-size: 1.2rem;
      }
      .section-title::after {
        width: 100px;
        height: 20px;
        bottom: -20px;
      }
      .feature-card, .tech-card, .testimonial-card, .article-card {
        margin-bottom: 20px;
      }
      .hero-bg {
        padding: 80px 0;
      }
      .hero-title {
        font-size: 3rem;
        line-height: 1.3;
      }
      .hero-subtitle {
        font-size: 1.1rem;
      }
      .hero-stats {
        margin: 1.5rem 0;
      }
      .stat-item {
        padding: 0.8rem;
        margin-bottom: 1rem;
      }
      .stat-number {
        font-size: 1.5rem;
      }
      .hero-buttons {
        margin: 1.5rem 0;
        flex-direction: column;
        gap: 1rem;
      }
      .hero-buttons .btn {
        width: 100%;
        margin: 0;
        min-width: auto;
      }
      .btn {
        min-width: 140px;
        padding: 12px 24px;
        font-size: 0.95rem;
      }
      .btn-sm {
        min-width: 100px;
        padding: 8px 20px;
      }
      .hero-social {
        margin-top: 2rem;
      }
      .social-icons {
        gap: 0.8rem;
      }
      .social-link {
        width: 45px;
        height: 45px;
        font-size: 1rem;
      }
      .floating-element {
        font-size: 2rem;
      }
      .cta-section h2 {
        font-size: 1.8rem;
      }
    }

    @media (max-width: 576px) {
      .hero-title {
        font-size: 2rem;
      }
      .hero-subtitle {
        font-size: 1rem;
      }
      .stat-number {
        font-size: 1.2rem;
      }
      .stat-label {
        font-size: 0.8rem;
      }
      .floating-element {
        font-size: 1.5rem;
      }
      .btn {
        min-width: 120px;
        padding: 10px 20px;
        font-size: 0.9rem;
      }
      .btn-sm {
        min-width: 80px;
        padding: 6px 16px;
        font-size: 0.8rem;
      }
    }

/* Slick Slider Custom Styles for Testimonials */
.testimonials-slider {
  position: relative;
  margin: 0 auto;
  max-width: 100%;
}

.testimonial-slide {
  padding: 0 15px;
  box-sizing: border-box;
}

.testimonials-slider .slick-track {
  display: flex;
  align-items: stretch;
}

.testimonials-slider .slick-slide {
  height: auto;
}

.testimonials-slider .slick-slide > div {
  height: 100%;
}

/* Custom Slick Navigation Arrows */
.testimonials-slider .slick-prev,
.testimonials-slider .slick-next {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: white !important;
  font-size: 1.2rem;
  z-index: 10;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(42, 111, 78, 0.3);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.testimonials-slider .slick-prev {
  right: -20px;
}

.testimonials-slider .slick-next {
  left: -20px;
}

.testimonials-slider .slick-prev:hover,
.testimonials-slider .slick-next:hover,
.testimonials-slider .slick-prev:focus,
.testimonials-slider .slick-next:focus {
  background: linear-gradient(135deg, var(--accent), var(--primary));
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 6px 20px rgba(42, 111, 78, 0.5);
  opacity: 1 !important;
  visibility: visible !important;
  color: white !important;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.testimonials-slider .slick-prev:active,
.testimonials-slider .slick-next:active {
  transform: translateY(-50%) scale(0.95);
  transition: all 0.1s ease;
}

.testimonials-slider .slick-prev:before,
.testimonials-slider .slick-next:before {
  display: none;
}

/* Custom Slick Dots */
.testimonials-slider .slick-dots {
  bottom: -50px;
}

.testimonials-slider .slick-dots li {
  margin: 0 5px;
}

.testimonials-slider .slick-dots li button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(42, 111, 78, 0.3);
  border: none;
  transition: var(--transition);
}

.testimonials-slider .slick-dots li button:before {
  display: none;
}

.testimonials-slider .slick-dots li.slick-active button {
  background: var(--primary);
  transform: scale(1.2);
}

/* Hide slick navigation buttons on mobile */
@media (max-width: 767.98px) {
  .testimonials-slider .slick-prev,
  .testimonials-slider .slick-next {
    display: none !important;
  }
}

/* RTL Support for Slick */
[dir="rtl"] .testimonials-slider .slick-prev {
  right: auto;
  left: -20px;
}

[dir="rtl"] .testimonials-slider .slick-next {
  left: auto;
  right: -20px;
}

@media (max-width: 768px) {
  [dir="rtl"] .testimonials-slider .slick-prev {
    left: 15px;
  }

  [dir="rtl"] .testimonials-slider .slick-next {
    right: 15px;
  }
}

/* Responsive adjustments for testimonials slider */
@media (max-width: 1200px) {
  .testimonials-slider .slick-prev {
    right: -15px;
  }
  .testimonials-slider .slick-next {
    left: -15px;
  }
}

@media (max-width: 992px) {
  .testimonials-slider .slick-prev,
  .testimonials-slider .slick-next {
    width: 45px;
    height: 45px;
    font-size: 1rem;
  }
  .testimonials-slider .slick-prev {
    right: -12px;
  }
  .testimonials-slider .slick-next {
    left: -12px;
  }
}

@media (max-width: 768px) {
  .testimonials-slider .slick-prev {
    right: 15px;
  }
  .testimonials-slider .slick-next {
    left: 15px;
  }

  .testimonials-slider .slick-dots {
    bottom: -40px;
  }

  .testimonials-slider .slick-prev,
  .testimonials-slider .slick-next {
    width: 40px;
    height: 40px;
    font-size: 0.9rem;
    opacity: 1; /* Always visible on mobile */
  }
}

/* Prevent testimonial cards from being cut off */
.testimonials-slider .testimonial-card {
  margin-bottom: 0;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ========================================
   ARTICLES SLIDER STYLES
   ======================================== */

.articles-slider {
  position: relative;
  margin: 0 auto;
  max-width: 100%;
}

.article-slide {
  padding: 0 15px;
  box-sizing: border-box;
}

.articles-slider .slick-track {
  display: flex;
  align-items: stretch;
}

.articles-slider .slick-slide {
  height: auto;
}

.articles-slider .slick-slide > div {
  height: 100%;
}

/* Custom Slick Navigation Arrows for Articles */
.articles-slider .slick-prev,
.articles-slider .slick-next {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: white !important;
  font-size: 1.2rem;
  z-index: 10;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(42, 111, 78, 0.3);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.articles-slider .slick-prev {
  right: -20px;
}

.articles-slider .slick-next {
  left: -20px;
}

.articles-slider .slick-prev:hover,
.articles-slider .slick-next:hover,
.articles-slider .slick-prev:focus,
.articles-slider .slick-next:focus {
  background: linear-gradient(135deg, var(--accent), var(--primary));
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 6px 20px rgba(42, 111, 78, 0.5);
  opacity: 1 !important;
  visibility: visible !important;
  color: white !important;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.articles-slider .slick-prev:active,
.articles-slider .slick-next:active {
  transform: translateY(-50%) scale(0.95);
  transition: all 0.1s ease;
}

.articles-slider .slick-prev:before,
.articles-slider .slick-next:before {
  display: none;
}

/* Custom Slick Dots for Articles */
.articles-slider .slick-dots {
  bottom: -50px;
}

.articles-slider .slick-dots li {
  margin: 0 5px;
}

.articles-slider .slick-dots li button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(42, 111, 78, 0.3);
  border: none;
  transition: var(--transition);
}

.articles-slider .slick-dots li button:before {
  display: none;
}

.articles-slider .slick-dots li.slick-active button {
  background: var(--primary);
  transform: scale(1.2);
}

/* Hide slick navigation buttons on mobile */
@media (max-width: 767.98px) {
  .articles-slider .slick-prev,
  .articles-slider .slick-next {
    display: none !important;
  }
}

/* RTL Support for Articles Slider */
[dir="rtl"] .articles-slider .slick-prev {
  right: auto;
  left: -20px;
}

[dir="rtl"] .articles-slider .slick-next {
  left: auto;
  right: -20px;
}

[dir="rtl"] .articles-slider .slick-prev:before {
  content: '→';
}

[dir="rtl"] .articles-slider .slick-next:before {
  content: '←';
}

/* Mobile Styles for Articles Slider */
@media (max-width: 768px) {
  .articles-slider .slick-prev,
  .articles-slider .slick-next {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .articles-slider .slick-prev {
    right: -15px;
  }

  .articles-slider .slick-next {
    left: -15px;
  }
}

/* Prevent article cards from being cut off */
.articles-slider .article-card {
  margin-bottom: 0;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ========================================
   DESKTOP NAVIGATION STYLES
   ======================================== */
 

/* ========================================
   MOBILE MENU STYLES
   ======================================== */

/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 15px rgba(42, 111, 78, 0.3);
  position: relative;
  z-index: 1001;
}

.mobile-menu-toggle:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(42, 111, 78, 0.4);
}

.mobile-menu-toggle:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.hamburger-line {
  width: 25px;
  height: 3px;
  background-color: white;
  margin: 3px 0;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border-radius: 2px;
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform: translateX(100%);
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* Mobile Menu Content */
.mobile-menu-content {
  position: absolute;
  top: 0;
  right: 0;
  width: 320px;
  max-width: 85vw;
  height: 100vh;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.3);
  padding: 2rem 1.5rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mobile-menu-overlay.active .mobile-menu-content {
  transform: translateX(0);
}

/* Mobile Menu Header */
.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid rgba(42, 111, 78, 0.1);
}

.mobile-menu-header h3 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
}

.mobile-menu-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--primary);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  transition: all 0.3s ease;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-menu-close:hover {
  background: rgba(42, 111, 78, 0.1);
  transform: rotate(90deg);
}

/* Mobile Navigation List */
.mobile-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-nav-item {
  margin-bottom: 0.5rem;
  transform: translateX(50px);
  opacity: 0;
  animation: slideInFromRight 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.mobile-menu-overlay.active .mobile-nav-item:nth-child(1) { animation-delay: 0.1s; }
.mobile-menu-overlay.active .mobile-nav-item:nth-child(2) { animation-delay: 0.15s; }
.mobile-menu-overlay.active .mobile-nav-item:nth-child(3) { animation-delay: 0.2s; }
.mobile-menu-overlay.active .mobile-nav-item:nth-child(4) { animation-delay: 0.25s; }
.mobile-menu-overlay.active .mobile-nav-item:nth-child(5) { animation-delay: 0.3s; }
.mobile-menu-overlay.active .mobile-nav-item:nth-child(6) { animation-delay: 0.35s; }
.mobile-menu-overlay.active .mobile-nav-item:nth-child(7) { animation-delay: 0.4s; }

@keyframes slideInFromRight {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Mobile Navigation Links */
.mobile-nav-link {
  display: flex;
  align-items: center;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  text-decoration: none;
  color: var(--dark);
  font-weight: 500;
  font-size: 1rem;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(42, 111, 78, 0.1);
}

.mobile-nav-link:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 25px rgba(42, 111, 78, 0.2);
  background: linear-gradient(135deg, rgba(42, 111, 78, 0.05), rgba(76, 175, 80, 0.05));
  color: var(--primary);
}

.mobile-nav-link i {
  font-size: 1.2rem;
  color: var(--primary);
  margin-left: 1rem;
  width: 20px;
  text-align: center;
}

.mobile-nav-link span {
  margin-right: 1rem;
  flex-grow: 1;
}

/* Mobile Dropdown Styles */
.mobile-dropdown {
  position: relative;
}

.mobile-dropdown-toggle {
  cursor: pointer;
  justify-content: space-between;
}

.dropdown-icon {
  transition: transform 0.3s ease;
  font-size: 0.9rem;
  color: var(--primary);
}

.mobile-dropdown-menu {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0 0;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(42, 111, 78, 0.1);
}

.mobile-dropdown-item {
  padding: 0;
}

.mobile-dropdown-item .mobile-nav-link,
.mobile-dropdown-item button {
  padding: 0.75rem 1.5rem;
  margin: 0;
  border-radius: 0;
  border-bottom: 1px solid rgba(42, 111, 78, 0.1);
  background: transparent;
  box-shadow: none;
  text-align: start;
  width: 100%;
  display: flex;
  align-items: center;
}

.mobile-dropdown-item:last-child .mobile-nav-link,
.mobile-dropdown-item:last-child button {
  border-bottom: none;
}

.mobile-dropdown-item .mobile-nav-link:hover,
.mobile-dropdown-item button:hover {
  transform: none;
  background: rgba(42, 111, 78, 0.05);
  color: var(--primary);
}

.mobile-dropdown.active .dropdown-icon {
  transform: rotate(180deg);
}

/* ========================================
   BOOTSTRAP DROPDOWN STYLES
   ======================================== */

.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}

.dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropdown-menu {
  position: absolute;
  z-index: 1000;
  display: none;
  min-width: 10rem;
  padding: 0.5rem 0;
  margin: 0;
  font-size: 1rem;
  color: #212529;
  text-align: left;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
}

.dropdown-menu.show {
  display: block;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.25rem 1.5rem;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}

.dropdown-item:hover, .dropdown-item:focus {
  color: #16181b;
  text-decoration: none;
  background-color: #f8f9fa;
}

/* RTL Support for Dropdown */
[dir="rtl"] .dropdown-toggle::after {
  margin-left: 0;
  margin-right: 0.255em;
}

[dir="rtl"] .dropdown-menu {
  left: auto;
  right: 0;
}

.dropdown {
  position: relative;
}

/* Mobile Menu Footer */
.mobile-menu-footer {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 2px solid rgba(42, 111, 78, 0.1);
}

.contact-info-mobile {
  margin-bottom: 2rem;
}

.contact-info-mobile p {
  margin: 0.75rem 0;
  color: var(--dark);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
}

.contact-info-mobile i {
  color: var(--primary);
  margin-left: 0.75rem;
  width: 16px;
}

.social-links-mobile {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.social-links-mobile a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: white;
  border-radius: 50%;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 15px rgba(42, 111, 78, 0.3);
}

.social-links-mobile a:hover {
  transform: translateY(-3px) scale(1.1);
  box-shadow: 0 8px 25px rgba(42, 111, 78, 0.4);
}

/* Body scroll prevention */
body.mobile-menu-open {
  overflow: hidden;
}

/* Responsive adjustments for very small screens */
@media (max-width: 480px) {
  .mobile-menu-content {
    width: 100vw;
    max-width: 100vw;
    padding: 1.5rem 1rem;
  }

  .mobile-menu-toggle {
    width: 40px;
    height: 40px;
  }

  .hamburger-line {
    width: 22px;
  }

  .mobile-nav-link {
    padding: 0.875rem 1rem;
    font-size: 0.95rem;
  }

  .mobile-nav-link i {
    font-size: 1.1rem;
    margin-left: 0.75rem;
  }
}

/* Focus management for accessibility */
.mobile-menu-toggle:focus,
.mobile-menu-close:focus,
.mobile-nav-link:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .mobile-menu-overlay {
    background: rgba(0, 0, 0, 0.95);
  }

  .mobile-menu-content {
    background: #ffffff;
    border-left: 3px solid var(--primary);
  }

  .mobile-nav-link {
    border: 2px solid var(--dark);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .mobile-menu-overlay,
  .mobile-menu-content,
  .mobile-nav-item,
  .mobile-menu-toggle,
  .hamburger-line,
  .mobile-menu-close,
  .mobile-nav-link,
  .social-links-mobile a,
  .faq-item,
  .faq-question,
  .faq-question i,
  .faq-answer {
    transition: none;
    animation: none;
  }
}

/* ========================================
   FORM VALIDATION STYLES
   ======================================== */

/* Invalid input styling */
.form-control.is-invalid {
  border-color: var(--danger);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 4.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: left calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
  padding-left: calc(1.5em + 0.75rem);
}

.form-control.is-invalid:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

/* Invalid feedback styling for RTL */
.invalid-feedback {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: var(--danger);
  text-align: right;
  direction: rtl;
}

/* Valid input styling (optional enhancement) */
.form-control.is-valid {
  border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='m2.3 6.73 3.42-3.42c.39-.39 1.03-.39 1.42 0s.39 1.03 0 1.42L3.15 8.85c-.39.39-1.03.39-1.42 0L.29 6.15c-.39-.39-.39-1.03 0-1.42s1.03-.39 1.42 0l1.27 1.27z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: left calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
  padding-left: calc(1.5em + 0.75rem);
}

.form-control.is-valid:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
}

/* Hide validation feedback by default */
.invalid-feedback {
  display: none;
}

/* Show validation feedback when input is invalid */
.form-control.is-invalid ~ .invalid-feedback {
  display: block;
}

/* Number input improvements */
input[type="number"] {
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Modal form improvements */
.modal .form-control {
  border-radius: 8px;
  border: 2px solid #e9ecef;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.modal .form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.2rem rgba(42, 111, 78, 0.25);
}

.modal .btn-success {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border: none;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.modal .btn-success:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(42, 111, 78, 0.3);
}

/* Hero Logo Section */
.hero-logo-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.hero-logo {
  height: 60px;
  width: auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.hero-company-name {
  font-size: 2rem;
  font-weight: 700;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  margin: 0;
}

/* Mobile responsive for hero logo */
@media (max-width: 767.98px) {
  .hero-logo-section {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }

  .hero-logo {
    height: 120px;
    margin-bottom: 0.5rem;
  }

  .hero-company-name {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}

/* Header Logo Styles */
.logo-img {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.logo-img:hover {
  opacity: 1;
}