@font-face {
      font-family: 'vazir';
      src: url('../fonts/Vazir.eot');
      src: url('../fonts/Vazir.woff') format('woff'),
          url('../fonts/Vazir.ttf') format('truetype');
  }

  body {
      box-sizing: border-box;
      font-family: 'Vazirmatn', sans-serif, 'vazir';
      transition: all 0.3s ease;
  }


  /* Light Mode */
  :root {
      --bg-primary: #ffffff;
      --bg-secondary: #f8f9fa;
      --text-primary: #2c3e50;
      --text-secondary: #6c757d;
      --accent-color: #0d6efd;
      --border-color: #dee2e6;
      --header-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      --card-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }

  /* Dark Mode */
  [data-theme="dark"] {
      --bg-primary: #1a1a1a;
      --bg-secondary: #2d2d2d;
      --text-primary: #ffffff;
      --text-secondary: #b0b0b0;
      --accent-color: #4dabf7;
      --border-color: #404040;
      --header-bg: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
      --card-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  }

  body {
      background-color: var(--bg-primary);
      color: var(--text-primary);
  }

  .top-header {
      background: var(--header-bg);
      color: white;
      padding: 12px 0;
      position: relative;
      overflow: hidden;
  }

  .top-header::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="wave" x="0" y="0" width="100" height="20" patternUnits="userSpaceOnUse"><path d="M0 10 Q25 0 50 10 T100 10 V20 H0 Z" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="20" fill="url(%23wave)"/></svg>') repeat-x;
      animation: wave 20s linear infinite;
  }

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

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

  .email-address,
  .call {
      font-size: 14px;
      font-weight: 500;
      position: relative;
      z-index: 2;
  }

  .email-address i,
  .call i {
      margin-left: 8px;
      color: #ffd700;
      font-size: 16px;
  }

  .email-address span,
  .call span {
      margin-right: 8px;
      font-weight: 600;
      color: #ffffff;
  }

  .top-header-social {
      position: relative;
      z-index: 2;
  }

  /* Dark Mode Toggle */
  .theme-toggle {
      background: rgba(255, 255, 255, 0.2);
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-radius: 25px;
      width: 50px;
      height: 25px;
      position: relative;
      cursor: pointer;
      transition: all 0.3s ease;
      backdrop-filter: blur(10px);
  }

  .theme-toggle:hover {
      background: rgba(255, 255, 255, 0.3);
      transform: scale(1.05);
  }

  .theme-toggle::before {
      content: '';
      position: absolute;
      top: 2px;
      right: 2px;
      width: 19px;
      height: 19px;
      background: white;
      border-radius: 50%;
      transition: all 0.3s ease;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }

  [data-theme="dark"] .theme-toggle::before {
      transform: translateX(-25px);
      background: #2c3e50;
  }

  .theme-icon {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 12px;
      transition: all 0.3s ease;
  }

  .sun-icon {
      right: 6px;
      color: #ffd700;
      opacity: 1;
  }

  .moon-icon {
      left: 6px;
      color: #87ceeb;
      opacity: 0;
  }

  [data-theme="dark"] .sun-icon {
      opacity: 0;
  }

  [data-theme="dark"] .moon-icon {
      opacity: 1;
  }

  .contact-item {
      display: flex;
      align-items: center;
      padding: 8px 0;
      transition: all 0.3s ease;
  }

  .contact-item:hover {
      transform: translateY(-2px);
  }

  .contact-item:hover i {
      transform: scale(1.2);
      color: #ffd700 !important;
  }

  /* Responsive Design */
  @media (max-width: 768px) {
      .top-header {
          padding: 15px 0;
      }

      .email-address,
      .call {
          font-size: 13px;
          margin-bottom: 8px;
      }

      .theme-toggle {
          width: 45px;
          height: 22px;
      }

      .theme-toggle::before {
          width: 16px;
          height: 16px;
          top: 2px;
      }

      [data-theme="dark"] .theme-toggle::before {
          transform: translateX(-23px);
      }

      .navbar .logo {
          width: 100%;
      }
  }

  /* Animation for contact info */
  .contact-info-animate {
      animation: slideInRight 0.6s ease-out;
  }

  @keyframes slideInRight {
      from {
          opacity: 0;
          transform: translateX(30px);
      }

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

  .theme-toggle-container {
      animation: slideInLeft 0.6s ease-out;
  }

  @keyframes slideInLeft {
      from {
          opacity: 0;
          transform: translateX(-30px);
      }

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

  /* Hover effects for contact info */
  .contact-item {
      border-radius: 8px;
      padding: 8px 12px;
      transition: all 0.3s ease;
  }

  .contact-item:hover {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(5px);
  }

  /* Navigation Styles */
  header {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: var(--bg-primary);
      box-shadow: var(--card-shadow);
      border-bottom: 1px solid var(--border-color);
  }

  .navbar {
      padding: 15px 0;
      background: transparent;
  }

  .navbar-nav {
      position: fixed;
      top: 0;
      right: -100%;
      width: 300px;
      height: 100vh;
      background: var(--bg-primary);
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      padding: 80px 30px 30px;
      transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
      border-left: 1px solid var(--border-color);
      z-index: 1001;
  }

  .navbar-nav.active {
      right: 0;
  }

  .nav-item {
      width: 100%;
      margin-bottom: 5px;
  }

  .nav-link {
      color: var(--text-primary) !important;
      font-weight: 500;
      font-size: 16px;
      padding: 15px 20px;
      border-radius: 12px;
      transition: all 0.3s ease;
      display: block;
      position: relative;
      overflow: hidden;
  }

  .nav-link::before {
      content: '';
      position: absolute;
      top: 0;
      right: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
      transition: all 0.5s ease;
  }

  .nav-link:hover::before {
      right: 100%;
  }

  .nav-link:hover,
  .nav-link.active {
      background: var(--accent-color);
      color: white !important;
      transform: translateX(-5px);
  }

  .navbar .logo {

      /* ویژگی‌های CSS مورد نظر شما برای تصویر */
      width: 10%;
      height: auto;
      /* ... */

  }

  .hamburger-menu {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 45px;
      height: 45px;
      background: var(--accent-color);
      color: white;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3);
  }

  .hamburger-menu:hover {
      transform: scale(1.05);
      box-shadow: 0 6px 20px rgba(13, 110, 253, 0.4);
  }

  .hamburger-menu i {
      font-size: 18px;
      transition: all 0.3s ease;
  }

  .close-menu {
      position: absolute;
      top: 25px;
      left: 25px;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ff4757;
      color: white;
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.3s ease;
  }

  .close-menu:hover {
      transform: scale(1.1) rotate(90deg);
      background: #ff3742;
  }

  .logo {
      margin-right: auto;
  }

  .logo-container {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 24px;
      font-weight: 700;
      color: var(--text-primary);
      transition: all 0.3s ease;
  }

  .logo-container:hover {
      transform: scale(1.05);
  }

  .logo-container i {
      font-size: 32px;
      color: var(--accent-color);
      animation: float 3s ease-in-out infinite;
  }

  @keyframes float {

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

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

  .overlay-menu {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(5px);
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
      z-index: 1000;
  }

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

  /* Desktop Navigation */
  @media (min-width: 992px) {
      .hamburger-menu {
          display: none;
      }

      .navbar-nav {
          position: static;
          width: auto;
          height: auto;
          background: transparent;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          padding: 0;
          box-shadow: none;
          border: none;
      }

      .nav-item {
          width: auto;
          margin-bottom: 0;
          margin-left: 10px;
      }

      .nav-link {
          padding: 10px 20px;
          font-size: 15px;
      }

      .nav-link:hover,
      .nav-link.active {
          transform: translateY(-2px);
      }

      .close-menu {
          display: none;
      }

      .overlay-menu {
          display: none;
      }
  }

  /* Mobile Responsive */
  @media (max-width: 576px) {
      .navbar-nav {
          width: 280px;
          padding: 70px 20px 20px;
      }

      .nav-link {
          font-size: 15px;
          padding: 12px 15px;
      }

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

      .logo-container i {
          font-size: 28px;
      }

      .navbar .logo {
          width: 15%;
      }


  }

  /* Hero Section Styles */
  .hero-wrap {
      position: relative;
      min-height: 120vh;
      display: flex;
      align-items: center;
      overflow: hidden;
  }

  .hero-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #2c3e50 100%);
      background-size: 400% 400%;
      animation: gradientShift 15s ease infinite;
  }

  @keyframes gradientShift {
      0% {
          background-position: 0% 50%;
      }

      50% {
          background-position: 100% 50%;
      }

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

  .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.4);
      z-index: 1;
  }

  .hero-wrap-content {
      z-index: 2;
      animation: heroFadeIn 1.2s ease-out;
  }

  @keyframes heroFadeIn {
      from {
          opacity: 0;
          transform: translateY(50px);
      }

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

  .logo-anim {
      opacity: 0;
      transform: scale(0.9);
      animation: logoEnter 1.2s ease-out forwards, glowPulse 4s ease-in-out infinite 1.2s;
  }

  /* پالسینگ روی سایه */
  @keyframes glowPulse {
      0% {
          filter: drop-shadow(0 0 4px rgb(255, 255, 255)) drop-shadow(0 0 8px rgba(0, 180, 255, 0.15));
      }

      50% {
          filter: drop-shadow(0 0 12px rgba(0, 180, 255, 0.6)) drop-shadow(0 0 24px rgba(0, 180, 255, 0.4));
      }

      100% {
          filter: drop-shadow(0 0 4px rgb(255, 255, 255)) drop-shadow(0 0 8px rgba(0, 180, 255, 0.15));
      }
  }

  /* ورود */
  @keyframes logoEnter {
      0% {
          opacity: 0;
          transform: scale(0.9);
      }

      60% {
          opacity: 1;
          transform: scale(1.05);
      }

      100% {
          opacity: 1;
          transform: scale(1);
      }
  }

  .hero-subtitle {
      color: #ffd700;
      font-size: 1.2rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 2px;
      margin-bottom: 1rem;
      display: inline-block;
      animation: slideInFromTop 0.8s ease-out 0.3s both;
  }

  @keyframes slideInFromTop {
      from {
          opacity: 0;
          transform: translateY(-30px);
      }

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

  .hero-title {
      font-size: 4rem;
      color: white;
      font-weight: 700;
      line-height: 1.2;
      margin-bottom: 1.5rem;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
      animation: slideInFromLeft 0.8s ease-out 0.5s both;
  }

  @keyframes slideInFromLeft {
      from {
          opacity: 0;
          transform: translateX(-50px);
      }

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

  .hero-company-name {
      display: inline-block;
      transform: scale(1.3);
      background: linear-gradient(45deg, #ffd700, #ffed4e);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: glow 2s ease-in-out infinite alternate;
  }

  @keyframes glow {
      from {
          filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5));
      }

      to {
          filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8));
      }
  }

  .hero-description {
      color: rgba(255, 255, 255, 0.9);
      font-size: 1.1rem;
      line-height: 1.6;
      margin-bottom: 2.5rem;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
      animation: slideInFromRight 0.8s ease-out 0.7s both;
  }

  @keyframes slideInFromRight {
      from {
          opacity: 0;
          transform: translateX(50px);
      }

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

  .hero-buttons {
      margin-bottom: 3rem;
      animation: slideInFromBottom 0.8s ease-out 0.9s both;
  }

  @keyframes slideInFromBottom {
      from {
          opacity: 0;
          transform: translateY(30px);
      }

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

  .btn-hero-primary {
      background: linear-gradient(45deg, #ff6b6b, #ee5a24);
      border: none;
      color: white;
      padding: 15px 35px;
      font-weight: 600;
      border-radius: 50px;
      margin: 0 10px;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(238, 90, 36, 0.4);
      text-decoration: none;
      display: inline-block;
  }

  .btn-hero-primary:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(238, 90, 36, 0.6);
      color: white;
  }

  .btn-hero-secondary {
      background: transparent;
      border: 2px solid white;
      color: white;
      padding: 13px 35px;
      font-weight: 600;
      border-radius: 50px;
      margin: 0 10px;
      transition: all 0.3s ease;
      text-decoration: none;
      display: inline-block;
  }

  .btn-hero-secondary:hover {
      background: white;
      color: #2c3e50;
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);
  }

  .hero-features {
      display: flex;
      justify-content: center;
      gap: 40px;
      animation: fadeInUp 0.8s ease-out 1.1s both;
  }

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

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

  .feature-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: white;
      transition: all 0.3s ease;
  }

  .feature-item:hover {
      transform: translateY(-5px);
  }

  .feature-item i {
      font-size: 2rem;
      margin-bottom: 10px;
      color: #ffd700;
      transition: all 0.3s ease;
  }

  .feature-item:hover i {
      transform: scale(1.2);
      color: #ffed4e;
  }

  .feature-item span {
      font-size: 0.9rem;
      font-weight: 500;
  }

  /* Floating Elements */
  .floating-elements {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
  }

  .floating-ship {
      position: absolute;
      top: 20%;
      right: 10%;
      font-size: 3rem;
      color: rgba(255, 255, 255, 0.1);
      animation: float 6s ease-in-out infinite;
  }

  .floating-anchor {
      position: absolute;
      bottom: 30%;
      left: 15%;
      font-size: 2.5rem;
      color: rgba(255, 215, 0, 0.2);
      animation: float 4s ease-in-out infinite reverse;
  }

  .floating-compass {
      position: absolute;
      top: 40%;
      left: 5%;
      font-size: 2rem;
      color: rgba(255, 255, 255, 0.15);
      animation: rotate 20s linear infinite;
  }

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

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

  /* Wave Animation */
  .wave-container {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      overflow: hidden;
      line-height: 0;
      transform: rotate(180deg);
  }

  .wave {
      position: relative;
      display: block;
      width: calc(100% + 1.3px);
      height: 120px;
      animation: waveMove 10s ease-in-out infinite;
  }

  @keyframes waveMove {

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

      50% {
          transform: translateX(-20px);
      }
  }

  .shape-fill {
      fill: var(--bg-primary);
  }

  /* Responsive Design for Hero */
  @media (max-width: 768px) {
      .hero-title {
          font-size: 2.5rem;
      }

      .hero-company-name {
          transform: scale(1.1);
      }

      .hero-description {
          font-size: 1rem;
          margin-bottom: 2rem;
      }

      .hero-features {
          gap: 20px;
          flex-wrap: wrap;
      }

      .feature-item {
          flex: 1;
          min-width: 100px;
      }

      .btn-hero-primary,
      .btn-hero-secondary {
          padding: 12px 25px;
          margin: 5px;
          font-size: 0.9rem;
      }

      .floating-ship,
      .floating-anchor,
      .floating-compass {
          display: none;
      }
  }

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

      .hero-subtitle {
          font-size: 1rem;
      }

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

      .hero-features {
          gap: 15px;
      }

      .feature-item i {
          font-size: 1.5rem;
      }

      .feature-item span {
          font-size: 0.8rem;
      }
  }

  /* Services Section Styles */
  #services-section {
      background: var(--bg-secondary);
      position: relative;
      overflow: hidden;
  }

  #services-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(102,126,234,0.05)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
      opacity: 0.3;
  }

  .section-title {
      font-size: 2.5rem;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 1rem;
      position: relative;
  }

  .section-divider {
      width: 80px;
      height: 4px;
      background: linear-gradient(45deg, var(--accent-color), #ffd700);
      margin: 0 auto 1.5rem;
      border-radius: 2px;
      position: relative;
  }

  .section-divider::after {
      content: '';
      position: absolute;
      top: -2px;
      left: 50%;
      transform: translateX(-50%);
      width: 12px;
      height: 8px;
      background: var(--accent-color);
      border-radius: 50%;
  }

  .section-subtitle {
      font-size: 1.1rem;
      color: var(--text-secondary);
      font-weight: 500;
  }

  .service-card {
      background: var(--bg-primary);
      border-radius: 20px;
      padding: 2.5rem 2rem;
      text-align: center;
      box-shadow: var(--card-shadow);
      border: 1px solid var(--border-color);
      transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      position: relative;
      overflow: hidden;
      height: 100%;
      display: flex;
      flex-direction: column;
  }

  .service-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
      transition: all 0.6s ease;
  }

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

  .service-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
      border-color: var(--accent-color);
  }

  .service-icon {
      width: 80px;
      height: 80px;
      background: linear-gradient(135deg, var(--accent-color), #4dabf7);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1.5rem;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
  }

  .service-icon::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(45deg, rgba(255, 255, 255, 0.2), transparent);
      border-radius: 50%;
  }

  .service-card:hover .service-icon {
      transform: scale(1.1) rotate(5deg);
      box-shadow: 0 10px 25px rgba(13, 110, 253, 0.4);
  }

  .service-icon i {
      font-size: 2rem;
      color: white;
      z-index: 2;
      position: relative;
  }

  .service-title {
      font-size: 1.3rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 1.5rem;
      line-height: 1.4;
  }

  .service-list {
      list-style: none;
      padding: 0;
      margin: 0;
      flex-grow: 1;
  }

  .service-list li {
      padding: 0.5rem 0;
      color: var(--text-secondary);
      font-size: 0.95rem;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      text-align: right;
      transition: all 0.3s ease;
  }

  .service-list li:hover {
      color: var(--accent-color);
      transform: translateX(-5px);
  }

  .service-list li i {
      color: #28a745;
      margin-left: 10px;
      font-size: 0.8rem;
      flex-shrink: 0;
  }

  .service-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, var(--accent-color), #4dabf7);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: all 0.4s ease;
      border-radius: 20px;
  }

  .service-card:hover .service-overlay {
      opacity: 0.95;
  }

  .overlay-content {
      text-align: center;
      color: white;
      transform: translateY(20px);
      transition: all 0.4s ease;
  }

  .service-card:hover .overlay-content {
      transform: translateY(0);
  }

  .overlay-content h6 {
      font-size: 1.2rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
  }

  .overlay-content p {
      font-size: 0.9rem;
      opacity: 0.9;
      margin: 0;
  }

  /* Features Section */
  .features-section {
      margin-top: 4rem;
      position: relative;
  }

  .feature-card {
      background: var(--bg-primary);
      border-radius: 15px;
      padding: 2rem 1.5rem;
      text-align: center;
      box-shadow: var(--card-shadow);
      border: 1px solid var(--border-color);
      transition: all 0.3s ease;
      height: 100%;
      position: relative;
      overflow: hidden;
  }

  .feature-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, var(--accent-color), transparent);
      opacity: 0;
      transition: all 0.3s ease;
  }

  .feature-card:hover::before {
      opacity: 0.05;
  }

  .feature-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
      border-color: var(--accent-color);
  }

  .feature-icon {
      width: 60px;
      height: 60px;
      background: linear-gradient(135deg, #ffd700, #ffed4e);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1rem;
      transition: all 0.3s ease;
  }

  .feature-card:hover .feature-icon {
      transform: scale(1.1);
      box-shadow: 0 8px 20px rgba(255, 215, 0, 0.4);
  }

  .feature-icon i {
      font-size: 1.5rem;
      color: #2c3e50;
  }

  .feature-text {
      font-size: 1rem;
      font-weight: 500;
      color: var(--text-primary);
      margin: 0;
      line-height: 1.5;
      position: relative;
      z-index: 2;
  }

  /* Responsive Design for Services */
  @media (max-width: 768px) {
      .section-title {
          font-size: 2rem;
      }

      .service-card {
          padding: 2rem 1.5rem;
      }

      .service-icon {
          width: 70px;
          height: 70px;
      }

      .service-icon i {
          font-size: 1.8rem;
      }

      .service-title {
          font-size: 1.2rem;
      }

      .feature-card {
          padding: 1.5rem 1rem;
      }

      .feature-icon {
          width: 50px;
          height: 50px;
      }

      .feature-icon i {
          font-size: 1.3rem;
      }

      .feature-text {
          font-size: 0.9rem;
      }
  }

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

      .service-card {
          padding: 1.5rem 1rem;
      }

      .service-list li {
          font-size: 0.9rem;
      }

      .overlay-content h6 {
          font-size: 1.1rem;
      }

      .overlay-content p {
          font-size: 0.8rem;
      }
  }

  /* Animation Classes */
  .animate-on-scroll {
      opacity: 1;
      transform: translateY(0);
      transition: all 0.6s ease;
  }

  .animate-on-scroll.animated {
      opacity: 1;
      transform: translateY(0);
  }

  /* Counter Section Styles */
  .counter-section {
      position: relative;
      overflow: hidden;
  }

  .counter-bg-pattern {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="counterPattern" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.05)"/><circle cx="5" cy="5" r="0.5" fill="rgba(255,255,255,0.03)"/><circle cx="15" cy="15" r="0.5" fill="rgba(255,255,255,0.03)"/></pattern></defs><rect width="100" height="100" fill="url(%23counterPattern)"/></svg>');
      opacity: 0.6;
      z-index: 0;
  }

  .counter-floating-elements {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
  }

  .floating-shape {
      position: absolute;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
      animation: floatShape 6s ease-in-out infinite;
  }

  .shape-1 {
      width: 80px;
      height: 80px;
      top: 10%;
      left: 10%;
      animation-delay: 0s;
  }

  .shape-2 {
      width: 60px;
      height: 60px;
      top: 20%;
      right: 15%;
      animation-delay: 2s;
  }

  .shape-3 {
      width: 100px;
      height: 100px;
      bottom: 20%;
      left: 20%;
      animation-delay: 4s;
  }

  .shape-4 {
      width: 40px;
      height: 40px;
      bottom: 30%;
      right: 10%;
      animation-delay: 1s;
  }

  @keyframes floatShape {

      0%,
      100% {
          transform: translateY(0px) rotate(0deg);
          opacity: 0.3;
      }

      50% {
          transform: translateY(-20px) rotate(180deg);
          opacity: 0.6;
      }
  }

  .modern-counter {
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 20px;
      padding: 2.5rem 2rem;
      text-align: center;
      transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      position: relative;
      overflow: hidden;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  }

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

  .modern-counter:hover::before {
      left: 100%;
  }

  .modern-counter:hover {
      transform: translateY(-15px) scale(1.02);
      background: rgba(255, 255, 255, 0.12);
      border-color: rgba(255, 215, 0, 0.4);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  }

  .counter-icon-wrapper {
      position: relative;
      display: inline-block;
      margin-bottom: 1.5rem;
  }

  .counter-icon-bg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100px;
      height: 100px;
      background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.1));
      border-radius: 50%;
      transition: all 0.3s ease;
  }

  .counter-icon {
      position: relative;
      z-index: 2;
      width: 80px;
      height: 80px;
      background: linear-gradient(135deg, #ffd700, #ffed4e);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      transition: all 0.3s ease;
      box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
  }

  .modern-counter:hover .counter-icon {
      transform: scale(1.1) rotate(5deg);
      box-shadow: 0 12px 35px rgba(255, 215, 0, 0.5);
  }

  .modern-counter:hover .counter-icon-bg {
      transform: translate(-50%, -50%) scale(1.2);
      background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 215, 0, 0.15));
  }

  .counter-icon i {
      font-size: 2rem;
      color: #2c3e50;
      transition: all 0.3s ease;
  }

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

  .counter-number-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 0.5rem;
  }

  .counter {
      font-size: 3rem;
      font-weight: 700;
      color: white;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
      transition: all 0.3s ease;
  }

  .counter-plus {
      font-size: 2rem;
      color: #ffd700;
      margin-right: 0.5rem;
      opacity: 0;
      transform: translateX(-10px);
      transition: all 0.3s ease;
  }

  .modern-counter:hover .counter-plus {
      opacity: 1;
      transform: translateX(0);
  }

  .counter-text-name {
      font-size: 1.1rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
      text-transform: uppercase;
      letter-spacing: 1px;
  }

  .counter-description {
      font-size: 0.9rem;
      opacity: 0.8;
  }

  .counter-progress {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 0 0 20px 20px;
      overflow: hidden;
  }

  .progress-bar {
      height: 100%;
      background: linear-gradient(90deg, #ffd700, #ffed4e);
      width: 0;
      transition: width 2s ease-in-out;
      position: relative;
  }

  .progress-bar::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
      animation: progressShine 2s ease-in-out infinite;
  }

  @keyframes progressShine {
      0% {
          transform: translateX(-100%);
      }

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

  /* Mini Counters */
  .mini-counter {
      padding: 1rem;
      border-radius: 15px;
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      transition: all 0.3s ease;
  }

  .mini-counter:hover {
      transform: translateY(-5px);
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.2);
  }

  .mini-counter-icon {
      margin-bottom: 0.5rem;
  }

  .mini-counter-icon i {
      font-size: 1.5rem;
      transition: all 0.3s ease;
  }

  .mini-counter:hover .mini-counter-icon i {
      transform: scale(1.2);
  }

  .mini-counter-number {
      margin-bottom: 0.25rem;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  }

  .mini-counter-label {
      font-weight: 500;
  }

  /* Animation Classes */
  .animate-on-scroll {
      opacity: 0;
      transform: translateY(50px);
      transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .animate-on-scroll.animated {
      opacity: 1;
      transform: translateY(0);
  }

  /* Responsive Design for Counter */
  @media (max-width: 768px) {
      .modern-counter {
          padding: 2rem 1.5rem;
      }

      .counter-icon {
          width: 70px;
          height: 70px;
      }

      .counter-icon i {
          font-size: 1.8rem;
      }

      .counter {
          font-size: 2.5rem;
      }

      .counter-plus {
          font-size: 1.8rem;
      }

      .counter-text-name {
          font-size: 1rem;
      }

      .mini-counter {
          padding: 0.8rem;
      }

      .mini-counter-icon i {
          font-size: 1.3rem;
      }

      .mini-counter-number {
          font-size: 1.2rem !important;
      }

      .floating-shape {
          display: none;
      }
  }

  @media (max-width: 576px) {
      .modern-counter {
          padding: 1.5rem 1rem;
      }

      .counter-icon {
          width: 60px;
          height: 60px;
      }

      .counter-icon i {
          font-size: 1.5rem;
      }

      .counter {
          font-size: 2rem;
      }

      .counter-plus {
          font-size: 1.5rem;
      }

      .counter-text-name {
          font-size: 0.9rem;
      }

      .counter-description {
          font-size: 0.8rem;
      }
  }

  /* Clients Section Styles */
  .clients-section {
      position: relative;
      overflow: hidden;
  }

  .clients-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #2c3e50 0%, #34495e 50%, #2c3e50 100%);
      background-size: 400% 400%;
      animation: gradientShift 20s ease infinite;
  }

  .clients-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      z-index: 1;
  }

  .clients-section .container-lg {
      z-index: 2;
  }

  .client-card {
      background: rgba(255, 255, 255, 0.95);
      border-radius: 15px;
      padding: 2rem 1.5rem;
      text-align: center;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.2);
      transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      position: relative;
      overflow: hidden;
      height: 180px;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(10px);
  }

  .client-card::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: all 0.6s ease;
  }

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

  .client-card:hover {
      transform: translateY(-10px) scale(1.05);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
      background: rgba(255, 255, 255, 1);
  }

  .client-logo {
      width: 100%;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
  }

  .logo-svg {
      width: 140px;
      height: 60px;
      transition: all 0.3s ease;
  }

  .client-card:hover .logo-svg {
      transform: scale(1.1);
  }

  .client-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, var(--accent-color), #4dabf7);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: all 0.4s ease;
      border-radius: 15px;
  }

  .client-card:hover .client-overlay {
      opacity: 0.95;
  }

  .client-overlay .overlay-content {
      text-align: center;
      color: white;
      transform: translateY(20px);
      transition: all 0.4s ease;
  }

  .client-card:hover .overlay-content {
      transform: translateY(0);
  }

  .client-overlay h6 {
      font-size: 1.1rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
  }

  .client-overlay p {
      font-size: 0.9rem;
      opacity: 0.9;
      margin: 0;
  }

  /* Stats Section */
  .stats-section {
      border-top: 1px solid rgba(255, 255, 255, 0.2);
  }

  .stat-item {
      color: white;
      transition: all 0.3s ease;
  }

  .stat-item:hover {
      transform: translateY(-5px);
  }

  .stat-icon {
      width: 60px;
      height: 60px;
      background: linear-gradient(135deg, var(--accent-color), #4dabf7);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1rem;
      transition: all 0.3s ease;
  }

  .stat-item:hover .stat-icon {
      transform: scale(1.1);
      box-shadow: 0 10px 25px rgba(13, 110, 253, 0.4);
  }

  .stat-icon i {
      font-size: 1.5rem;
      color: white;
  }

  .stat-number {
      font-size: 2.5rem;
      font-weight: 700;
      color: #ffd700;
      margin-bottom: 0.5rem;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  }

  .stat-label {
      font-size: 1rem;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.9);
  }

  /* Responsive Design for Clients */
  @media (max-width: 768px) {
      .client-card {
          height: 150px;
          padding: 1.5rem 1rem;
      }

      .logo-svg {
          width: 120px;
          height: 50px;
      }

      .stat-number {
          font-size: 2rem;
      }

      .stat-icon {
          width: 50px;
          height: 50px;
      }

      .stat-icon i {
          font-size: 1.3rem;
      }
  }

  @media (max-width: 576px) {
      .client-card {
          height: 130px;
          padding: 1rem;
      }

      .logo-svg {
          width: 100px;
          height: 40px;
      }

      .stat-number {
          font-size: 1.8rem;
      }

      .stat-label {
          font-size: 0.9rem;
      }

      .client-overlay h6 {
          font-size: 1rem;
      }

      .client-overlay p {
          font-size: 0.8rem;
      }
  }

  /* Services Detailed Section Styles */
  .services-detailed {
      background: var(--bg-secondary);
      position: relative;
      overflow: hidden;
  }

  .services-detailed::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(102,126,234,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
      opacity: 0.5;
  }

  .services-list {
      position: relative;
      z-index: 2;
  }

  .service-detailed-item {
      display: flex;
      align-items: flex-start;
      background: var(--bg-primary);
      border-radius: 15px;
      padding: 2rem;
      margin-bottom: 1.5rem;
      box-shadow: var(--card-shadow);
      border: 1px solid var(--border-color);
      transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      position: relative;
      overflow: hidden;
  }

  .service-detailed-item::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
      transition: all 0.6s ease;
  }

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

  .service-detailed-item:hover {
      transform: translateX(-10px);
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
      border-color: var(--accent-color);
  }

  .service-detailed-icon {
      width: 80px;
      height: 80px;
      background: linear-gradient(135deg, var(--accent-color), #4dabf7);
      border-radius: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 1.5rem;
      flex-shrink: 0;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
  }

  .service-detailed-icon::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(45deg, rgba(255, 255, 255, 0.2), transparent);
      border-radius: 15px;
  }

  .service-detailed-item:hover .service-detailed-icon {
      transform: scale(1.1) rotate(5deg);
      box-shadow: 0 10px 25px rgba(13, 110, 253, 0.4);
  }

  .service-svg {
      width: 40px;
      height: 40px;
      color: white;
      z-index: 2;
      position: relative;
  }

  .service-detailed-content {
      flex: 1;
  }

  .service-detailed-title {
      font-size: 1.4rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 0.5rem;
      line-height: 1.3;
  }

  .service-detailed-description {
      color: var(--text-secondary);
      font-size: 1rem;
      line-height: 1.6;
      margin: 0;
  }

  /* Service Image Container */
  .service-image-container {
      position: relative;
      height: 100%;
      min-height: 500px;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .service-main-image {
      width: 100%;
      height: 100%;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: var(--card-shadow);
      border: 1px solid var(--border-color);
      background: var(--bg-primary);
      position: relative;
  }

  .service-illustration {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  .floating-service-elements {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
  }

  .floating-element {
      position: absolute;
      width: 50px;
      height: 50px;
      background: linear-gradient(135deg, var(--accent-color), #4dabf7);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 1.2rem;
      animation: floatElement 4s ease-in-out infinite;
      box-shadow: 0 5px 15px rgba(13, 110, 253, 0.3);
  }

  .floating-element:nth-child(1) {
      animation-delay: 0s;
  }

  .floating-element:nth-child(2) {
      animation-delay: 1s;
  }

  .floating-element:nth-child(3) {
      animation-delay: 2s;
  }

  .floating-element:nth-child(4) {
      animation-delay: 3s;
  }

  @keyframes floatElement {

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

      50% {
          transform: translateY(-10px) scale(1.1);
      }
  }

  /* Special styling for the last service item */
  .service-detailed-item:last-child {
      background: linear-gradient(135deg, var(--accent-color), #4dabf7);
      color: white;
  }

  .service-detailed-item:last-child .service-detailed-title {
      color: white;
  }

  .service-detailed-item:last-child .service-detailed-description {
      color: rgba(255, 255, 255, 0.9);
  }

  .service-detailed-item:last-child .service-detailed-icon {
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(10px);
  }

  .service-detailed-item:last-child .service-svg {
      color: white;
  }

  /* Responsive Design for Services Detailed */
  @media (max-width: 768px) {
      .service-detailed-item {
          flex-direction: column;
          text-align: center;
          padding: 1.5rem;
      }

      .service-detailed-icon {
          margin-left: 0;
          margin-bottom: 1rem;
          width: 70px;
          height: 70px;
      }

      .service-svg {
          width: 35px;
          height: 35px;
      }

      .service-detailed-title {
          font-size: 1.2rem;
      }

      .service-detailed-description {
          font-size: 0.9rem;
      }

      .service-image-container {
          min-height: 300px;
          margin-top: 2rem;
      }

      .floating-element {
          width: 40px;
          height: 40px;
          font-size: 1rem;
      }
  }

  @media (max-width: 576px) {
      .service-detailed-item {
          padding: 1rem;
          margin-bottom: 1rem;
      }

      .service-detailed-icon {
          width: 60px;
          height: 60px;
      }

      .service-svg {
          width: 30px;
          height: 30px;
      }

      .service-detailed-title {
          font-size: 1.1rem;
      }

      .service-detailed-description {
          font-size: 0.85rem;
      }

      .service-image-container {
          min-height: 250px;
      }

      .floating-element {
          width: 35px;
          height: 35px;
          font-size: 0.9rem;
      }
  }

  /* About Section Styles */
  .about-section {
      background: var(--bg-primary);
      position: relative;
      overflow: hidden;
  }

  .about-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="aboutPattern" width="25" height="25" patternUnits="userSpaceOnUse"><circle cx="12.5" cy="12.5" r="1" fill="rgba(102,126,234,0.06)"/><circle cx="6" cy="6" r="0.5" fill="rgba(102,126,234,0.04)"/><circle cx="19" cy="19" r="0.5" fill="rgba(102,126,234,0.04)"/></pattern></defs><rect width="100" height="100" fill="url(%23aboutPattern)"/></svg>');
      opacity: 0.5;
  }

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

  .section-badge {
      display: inline-block;
      padding: 0.5rem 1rem;
      background: linear-gradient(135deg, var(--accent-color), #4dabf7);
      color: white;
      border-radius: 25px;
      font-size: 0.9rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 1rem;
  }

  .lead-text {
      font-size: 1.1rem;
      line-height: 1.8;
      color: var(--text-primary);
      font-weight: 400;
      margin-bottom: 2rem;
      text-align: justify;
  }

  .about-features .feature-item {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem;
      background: var(--bg-secondary);
      border-radius: 12px;
      border: 1px solid var(--border-color);
      transition: all 0.3s ease;
      margin-bottom: 1rem;
  }

  .about-features .feature-item:hover {
      transform: translateY(-3px);
      box-shadow: var(--card-shadow);
      border-color: var(--accent-color);
  }

  .about-features .feature-icon {
      width: 50px;
      height: 50px;
      background: linear-gradient(135deg, var(--accent-color), #4dabf7);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.3s ease;
  }

  .about-features .feature-item:hover .feature-icon {
      transform: scale(1.1);
      box-shadow: 0 8px 20px rgba(13, 110, 253, 0.3);
  }

  .about-features .feature-icon i {
      font-size: 1.2rem;
      color: white;
  }

  .feature-content h6 {
      font-size: 1rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 0.25rem;
  }

  .feature-content p {
      font-size: 0.9rem;
      color: var(--text-secondary);
      margin: 0;
  }

  .about-cta {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
  }

  .btn-about-primary {
      background: linear-gradient(135deg, var(--accent-color), #4dabf7);
      color: white;
      padding: 0.8rem 1.5rem;
      border-radius: 25px;
      text-decoration: none;
      font-weight: 600;
      font-size: 0.95rem;
      transition: all 0.3s ease;
      border: none;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
  }

  .btn-about-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(13, 110, 253, 0.4);
      color: white;
  }

  .btn-about-secondary {
      background: transparent;
      color: var(--text-primary);
      padding: 0.8rem 1.5rem;
      border: 2px solid var(--border-color);
      border-radius: 25px;
      text-decoration: none;
      font-weight: 600;
      font-size: 0.95rem;
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
  }

  .btn-about-secondary:hover {
      background: var(--accent-color);
      color: white;
      border-color: var(--accent-color);
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(13, 110, 253, 0.3);
  }

  /* About Visual Styles */
  .about-visual {
      position: relative;
      height: 100%;
      min-height: 500px;
  }

  .about-image-container {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: var(--card-shadow);
      border: 1px solid var(--border-color);
  }

  .about-illustration {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  /* Floating Stats */
  .floating-stats {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
  }

  .stat-card {
      position: absolute;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border-radius: 15px;
      padding: 1rem;
      display: flex;
      align-items: center;
      gap: 0.8rem;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      transition: all 0.3s ease;
      animation: floatStat 4s ease-in-out infinite;
      min-width: 140px;
  }

  [data-theme="dark"] .stat-card {
      background: rgba(45, 45, 45, 0.95);
      border-color: rgba(255, 255, 255, 0.1);
  }

  .stat-1 {
      top: 15%;
      right: 10%;
      animation-delay: 0s;
  }

  .stat-2 {
      top: 45%;
      right: 5%;
      animation-delay: 1.5s;
  }

  .stat-3 {
      bottom: 20%;
      right: 15%;
      animation-delay: 3s;
  }

  @keyframes floatStat {

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

      50% {
          transform: translateY(-8px) scale(1.02);
      }
  }

  .stat-card .stat-icon {
      width: 40px;
      height: 40px;
      background: linear-gradient(135deg, var(--accent-color), #4dabf7);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
  }

  .stat-card .stat-icon i {
      font-size: 1rem;
      color: white;
  }

  .stat-content {
      display: flex;
      flex-direction: column;
  }

  .stat-number {
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1;
  }

  .stat-label {
      font-size: 0.8rem;
      color: var(--text-secondary);
      font-weight: 500;
  }

  /* Responsive Design for About */
  @media (max-width: 768px) {
      .about-visual {
          min-height: 350px;
          margin-top: 2rem;
      }

      .lead-text {
          font-size: 1rem;
          text-align: right;
      }

      .about-features .feature-item {
          padding: 0.8rem;
      }

      .about-features .feature-icon {
          width: 45px;
          height: 45px;
      }

      .about-features .feature-icon i {
          font-size: 1.1rem;
      }

      .about-cta {
          justify-content: center;
      }

      .btn-about-primary,
      .btn-about-secondary {
          padding: 0.7rem 1.2rem;
          font-size: 0.9rem;
      }

      .stat-card {
          padding: 0.8rem;
          min-width: 120px;
      }

      .stat-card .stat-icon {
          width: 35px;
          height: 35px;
      }

      .stat-card .stat-icon i {
          font-size: 0.9rem;
      }

      .stat-number {
          font-size: 1.1rem;
      }

      .stat-label {
          font-size: 0.75rem;
      }
  }

  @media (max-width: 576px) {
      .about-visual {
          min-height: 300px;
      }

      .section-badge {
          font-size: 0.8rem;
          padding: 0.4rem 0.8rem;
      }

      .lead-text {
          font-size: 0.95rem;
          margin-bottom: 1.5rem;
      }

      .about-features .feature-item {
          flex-direction: column;
          text-align: center;
          padding: 1rem;
      }

      .about-features .feature-icon {
          margin-bottom: 0.5rem;
      }

      .about-cta {
          flex-direction: column;
          align-items: center;
      }

      .btn-about-primary,
      .btn-about-secondary {
          width: 100%;
          justify-content: center;
          max-width: 250px;
      }

      .stat-card {
          padding: 0.6rem;
          min-width: 100px;
      }

      .stat-1 {
          top: 10%;
          right: 5%;
      }

      .stat-2 {
          top: 40%;
          right: 2%;
      }

      .stat-3 {
          bottom: 15%;
          right: 8%;
      }
  }

  /* Contact Section Styles */
  .contact-section {
      background: linear-gradient(135deg, #2c3e50 0%, #34495e 50%, #2c3e50 100%);
      background-size: 400% 400%;
      animation: gradientShift 25s ease infinite;
      position: relative;
      overflow: hidden;
      min-height: 100vh;
  }

  .contact-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="contactPattern" width="30" height="30" patternUnits="userSpaceOnUse"><circle cx="15" cy="15" r="2" fill="rgba(255,255,255,0.05)"/><circle cx="5" cy="5" r="1" fill="rgba(255,255,255,0.03)"/><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.03)"/></pattern></defs><rect width="100" height="100" fill="url(%23contactPattern)"/></svg>');
      opacity: 0.4;
  }

  .contact-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.4);
      z-index: 1;
  }

  .contact-floating-elements {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
  }

  .floating-contact-shape {
      position: absolute;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
      animation: floatContactShape 8s ease-in-out infinite;
  }

  .floating-contact-shape.shape-1 {
      width: 100px;
      height: 100px;
      top: 10%;
      left: 5%;
      animation-delay: 0s;
  }

  .floating-contact-shape.shape-2 {
      width: 60px;
      height: 60px;
      top: 20%;
      right: 8%;
      animation-delay: 2s;
  }

  .floating-contact-shape.shape-3 {
      width: 120px;
      height: 120px;
      bottom: 20%;
      left: 10%;
      animation-delay: 4s;
  }

  .floating-contact-shape.shape-4 {
      width: 40px;
      height: 40px;
      bottom: 30%;
      right: 5%;
      animation-delay: 1s;
  }

  @keyframes floatContactShape {

      0%,
      100% {
          transform: translateY(0px) rotate(0deg);
          opacity: 0.3;
      }

      50% {
          transform: translateY(-20px) rotate(180deg);
          opacity: 0.6;
      }
  }

  .contact-section-title {
      font-size: 1.5rem;
      font-weight: 600;
      position: relative;
      z-index: 2;
  }

  /* Contact Info Cards */
  .contact-info-wrapper {
      position: relative;
      z-index: 2;
  }

  .contact-cards {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
  }

  .contact-info-card {
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 20px;
      padding: 2rem;
      transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      position: relative;
      overflow: hidden;
  }

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

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

  .contact-info-card:hover {
      transform: translateY(-10px) scale(1.02);
      background: rgba(255, 255, 255, 0.12);
      border-color: rgba(255, 215, 0, 0.4);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  }

  .contact-card-icon {
      width: 60px;
      height: 60px;
      background: linear-gradient(135deg, #ffd700, #ffed4e);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.5rem;
      transition: all 0.3s ease;
      position: relative;
      z-index: 2;
  }

  .contact-info-card:hover .contact-card-icon {
      transform: scale(1.1) rotate(5deg);
      box-shadow: 0 10px 25px rgba(255, 215, 0, 0.4);
  }

  .contact-card-icon i {
      font-size: 1.5rem;
      color: #2c3e50;
  }

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

  .contact-card-content h5 {
      font-size: 1.2rem;
      font-weight: 600;
      color: white;
      margin-bottom: 1rem;
  }

  .contact-card-content p {
      color: rgba(255, 255, 255, 0.8);
      line-height: 1.6;
      margin-bottom: 1rem;
  }

  .contact-link {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      color: #ffd700;
      text-decoration: none;
      font-weight: 500;
      transition: all 0.3s ease;
      padding: 0.5rem 1rem;
      border-radius: 25px;
      background: rgba(255, 215, 0, 0.1);
      border: 1px solid rgba(255, 215, 0, 0.3);
  }

  .contact-link:hover {
      color: #2c3e50;
      background: #ffd700;
      border-color: #ffd700;
      transform: translateY(-2px);
  }

  .phone-numbers {
      display: flex;
      flex-direction: column;
      gap: 0.8rem;
      margin-bottom: 1rem;
  }

  .phone-link {
      display: inline-flex;
      align-items: center;
      gap: 0.8rem;
      color: white;
      text-decoration: none;
      font-size: 1.1rem;
      font-weight: 500;
      transition: all 0.3s ease;
      padding: 0.8rem 1rem;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .phone-link:hover {
      color: #ffd700;
      background: rgba(255, 215, 0, 0.1);
      border-color: rgba(255, 215, 0, 0.3);
      transform: translateX(-5px);
  }

  .phone-link i {
      color: #ffd700;
      font-size: 1rem;
  }

  .email-link {
      display: inline-flex;
      align-items: center;
      gap: 0.8rem;
      color: white;
      text-decoration: none;
      font-size: 1.1rem;
      font-weight: 500;
      transition: all 0.3s ease;
      padding: 0.8rem 1rem;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      margin-bottom: 1rem;
  }

  .email-link:hover {
      color: #ffd700;
      background: rgba(255, 215, 0, 0.1);
      border-color: rgba(255, 215, 0, 0.3);
      transform: translateX(-5px);
  }

  .email-link i {
      color: #ffd700;
      font-size: 1rem;
  }

  .contact-note {
      font-size: 0.9rem;
      color: rgba(255, 255, 255, 0.6);
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin: 0;
  }

  .contact-note i {
      color: #ffd700;
  }

  /* Social Links */
  .contact-social-links {
      display: flex;
      flex-wrap: wrap;
      gap: 0.8rem;
  }

  .contact-social-link {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.6rem 1rem;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 25px;
      color: white;
      text-decoration: none;
      font-size: 0.9rem;
      transition: all 0.3s ease;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .contact-social-link:hover {
      transform: translateY(-3px);
      color: white;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  }

  .contact-social-link.telegram:hover {
      background: #0088cc;
      border-color: #0088cc;
  }

  .contact-social-link.whatsapp:hover {
      background: #25d366;
      border-color: #25d366;
  }

  .contact-social-link.instagram:hover {
      background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
      border-color: #e6683c;
  }

  .contact-social-link.linkedin:hover {
      background: #0077b5;
      border-color: #0077b5;
  }

  /* Contact Form */
  .contact-form-wrapper {
      position: relative;
      z-index: 2;
  }

  .contact-form {
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 20px;
      padding: 2rem;
      position: relative;
      overflow: hidden;
  }

  .contact-form::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="formPattern" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.03)"/></pattern></defs><rect width="100" height="100" fill="url(%23formPattern)"/></svg>');
      opacity: 0.5;
  }

  .contact-input {
      background: rgba(255, 255, 255, 0.1);
      border: 2px solid rgba(255, 255, 255, 0.2);
      color: white;
      backdrop-filter: blur(10px);
      transition: all 0.3s ease;
      position: relative;
      z-index: 2;
  }

  .contact-input:focus {
      background: rgba(255, 255, 255, 0.15);
      border-color: rgba(255, 215, 0, 0.5);
      box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
      color: white;
  }

  .contact-input::placeholder {
      color: rgba(255, 255, 255, 0.6);
  }

  .form-floating>label {
      color: rgba(255, 255, 255, 0.8);
      position: relative;
      z-index: 2;
  }

  .form-floating>.contact-input:focus~label,
  .form-floating>.contact-input:not(:placeholder-shown)~label {
      color: #ffd700;
  }

  .form-check-label {
      position: relative;
      z-index: 2;
  }

  .form-check-input {
      background: rgba(255, 255, 255, 0.1);
      border: 2px solid rgba(255, 255, 255, 0.3);
  }

  .form-check-input:checked {
      background: #ffd700;
      border-color: #ffd700;
  }

  .btn-contact-submit {
      background: linear-gradient(135deg, #ffd700, #ffed4e);
      color: #2c3e50;
      border: none;
      padding: 1rem 2rem;
      font-weight: 600;
      font-size: 1rem;
      border-radius: 25px;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      z-index: 2;
  }

  .btn-contact-submit:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 25px rgba(255, 215, 0, 0.4);
      color: #2c3e50;
  }

  .btn-contact-submit:active {
      transform: translateY(-1px);
  }

  .btn-loading {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      opacity: 0;
      transition: all 0.3s ease;
  }

  .btn-contact-submit.loading .btn-loading {
      opacity: 1;
  }

  .btn-contact-submit.loading {
      color: transparent;
  }

  /* Quick Contact Buttons */
  .quick-contact-buttons {
      position: relative;
      z-index: 2;
  }

  .btn-quick-contact {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      padding: 1rem;
      border-radius: 15px;
      text-decoration: none;
      font-weight: 500;
      transition: all 0.3s ease;
      border: 2px solid rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(10px);
  }

  .btn-quick-contact.call {
      background: rgba(34, 197, 94, 0.2);
      color: #22c55e;
      border-color: rgba(34, 197, 94, 0.3);
  }

  .btn-quick-contact.call:hover {
      background: #22c55e;
      color: white;
      border-color: #22c55e;
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(34, 197, 94, 0.4);
  }

  .btn-quick-contact.whatsapp {
      background: rgba(37, 211, 102, 0.2);
      color: #25d366;
      border-color: rgba(37, 211, 102, 0.3);
  }

  .btn-quick-contact.whatsapp:hover {
      background: #25d366;
      color: white;
      border-color: #25d366;
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
  }

  .btn-quick-contact i {
      font-size: 1.2rem;
  }

  .btn-quick-contact span {
      font-size: 0.9rem;
  }

  /* Map Section */
  .map-section {
      position: relative;
      z-index: 2;
  }

  .map-container {
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.15);
  }

  .map-placeholder {
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(20px);
      min-height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
  }

  .map-content {
      text-align: center;
      color: white;
      position: relative;
      z-index: 2;
  }

  .map-icon {
      width: 80px;
      height: 80px;
      background: linear-gradient(135deg, #ffd700, #ffed4e);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1.5rem;
      animation: mapPulse 2s ease-in-out infinite;
  }

  @keyframes mapPulse {

      0%,
      100% {
          transform: scale(1);
          box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
      }

      50% {
          transform: scale(1.05);
          box-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
      }
  }

  .map-icon i {
      font-size: 2rem;
      color: #2c3e50;
  }

  .map-content h5 {
      font-size: 1.3rem;
      font-weight: 600;
      margin-bottom: 1rem;
  }

  .map-content p {
      color: rgba(255, 255, 255, 0.8);
      margin-bottom: 2rem;
  }

  .btn-map-view {
      background: linear-gradient(135deg, var(--accent-color), #4dabf7);
      color: white;
      padding: 1rem 2rem;
      border-radius: 25px;
      text-decoration: none;
      font-weight: 600;
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
  }

  .btn-map-view:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 25px rgba(13, 110, 253, 0.4);
      color: white;
  }

  .map-decorations {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
  }

  .map-pin {
      position: absolute;
      color: rgba(255, 215, 0, 0.3);
      font-size: 1.5rem;
      animation: mapFloat 4s ease-in-out infinite;
  }

  .map-pin.pin-1 {
      top: 20%;
      left: 15%;
      animation-delay: 0s;
  }

  .map-pin.pin-2 {
      top: 60%;
      right: 20%;
      animation-delay: 1.5s;
  }

  .map-pin.pin-3 {
      bottom: 30%;
      left: 25%;
      animation-delay: 3s;
  }

  @keyframes mapFloat {

      0%,
      100% {
          transform: translateY(0px);
          opacity: 0.3;
      }

      50% {
          transform: translateY(-10px);
          opacity: 0.6;
      }
  }

  /* Contact Stats */
  .contact-stats {
      position: relative;
      z-index: 2;
  }

  .contact-stat-item {
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 15px;
      padding: 2rem 1rem;
      text-align: center;
      transition: all 0.3s ease;
      color: white;
  }

  .contact-stat-item:hover {
      transform: translateY(-10px);
      background: rgba(255, 255, 255, 0.12);
      border-color: rgba(255, 215, 0, 0.4);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
  }

  .contact-stat-item .stat-icon {
      width: 60px;
      height: 60px;
      background: linear-gradient(135deg, #ffd700, #ffed4e);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1rem;
      transition: all 0.3s ease;
  }

  .contact-stat-item:hover .stat-icon {
      transform: scale(1.1);
      box-shadow: 0 10px 25px rgba(255, 215, 0, 0.4);
  }

  .contact-stat-item .stat-icon i {
      font-size: 1.5rem;
      color: #2c3e50;
  }

  .contact-stat-item .stat-number {
      font-size: 2rem;
      font-weight: 700;
      color: #ffd700;
      margin-bottom: 0.5rem;
  }

  .contact-stat-item .stat-label {
      font-size: 0.9rem;
      color: rgba(255, 255, 255, 0.8);
  }

  /* Responsive Design for Contact */
  @media (max-width: 768px) {
      .contact-section {
          min-height: auto;
      }

      .contact-info-card {
          padding: 1.5rem;
      }

      .contact-card-icon {
          width: 50px;
          height: 50px;
      }

      .contact-card-icon i {
          font-size: 1.3rem;
      }

      .contact-form {
          padding: 1.5rem;
      }

      .phone-numbers {
          gap: 0.5rem;
      }

      .phone-link,
      .email-link {
          padding: 0.6rem 0.8rem;
          font-size: 1rem;
      }

      .contact-social-links {
          gap: 0.5rem;
      }

      .contact-social-link {
          padding: 0.5rem 0.8rem;
          font-size: 0.8rem;
      }

      .btn-quick-contact {
          padding: 0.8rem;
      }

      .btn-quick-contact i {
          font-size: 1rem;
      }

      .btn-quick-contact span {
          font-size: 0.8rem;
      }

      .map-placeholder {
          min-height: 250px;
      }

      .map-icon {
          width: 60px;
          height: 60px;
      }

      .map-icon i {
          font-size: 1.5rem;
      }

      .contact-stat-item {
          padding: 1.5rem 0.8rem;
      }

      .contact-stat-item .stat-icon {
          width: 50px;
          height: 50px;
      }

      .contact-stat-item .stat-icon i {
          font-size: 1.3rem;
      }

      .contact-stat-item .stat-number {
          font-size: 1.5rem;
      }

      .floating-contact-shape {
          display: none;
      }
  }

  @media (max-width: 576px) {
      .contact-info-card {
          padding: 1rem;
      }

      .contact-card-content h5 {
          font-size: 1.1rem;
      }

      .contact-form {
          padding: 1rem;
      }

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

      .phone-link,
      .email-link {
          flex-direction: column;
          text-align: center;
          gap: 0.5rem;
      }

      .contact-social-links {
          justify-content: center;
      }

      .map-content h5 {
          font-size: 1.1rem;
      }

      .map-content p {
          font-size: 0.9rem;
      }

      .btn-map-view {
          padding: 0.8rem 1.5rem;
          font-size: 0.9rem;
      }

      .contact-stat-item .stat-number {
          font-size: 1.3rem;
      }

      .contact-stat-item .stat-label {
          font-size: 0.8rem;
      }
  }

  /* FAQ Section Styles */
  .faq-section {
      background: var(--bg-primary);
      position: relative;
      overflow: hidden;
  }

  .faq-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="faqPattern" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(102,126,234,0.04)"/><circle cx="5" cy="15" r="0.5" fill="rgba(102,126,234,0.02)"/><circle cx="15" cy="5" r="0.5" fill="rgba(102,126,234,0.02)"/></pattern></defs><rect width="100" height="100" fill="url(%23faqPattern)"/></svg>');
      opacity: 0.6;
  }

  .faq-accordion {
      position: relative;
      z-index: 2;
  }

  .faq-item {
      background: var(--bg-secondary);
      border-radius: 15px;
      margin-bottom: 1rem;
      box-shadow: var(--card-shadow);
      border: 1px solid var(--border-color);
      transition: all 0.3s ease;
      overflow: hidden;
  }

  .faq-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
      border-color: var(--accent-color);
  }

  .faq-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.5rem 2rem;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
  }

  .faq-header::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.05), transparent);
      transition: all 0.6s ease;
  }

  .faq-header:hover::before {
      left: 100%;
  }

  .faq-question {
      display: flex;
      align-items: center;
      gap: 1rem;
      flex: 1;
  }

  .faq-icon {
      width: 50px;
      height: 50px;
      background: linear-gradient(135deg, var(--accent-color), #4dabf7);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.3s ease;
  }

  .faq-item:hover .faq-icon {
      transform: scale(1.1);
      box-shadow: 0 8px 20px rgba(13, 110, 253, 0.3);
  }

  .faq-icon i {
      font-size: 1.2rem;
      color: white;
  }

  .faq-question h5 {
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--text-primary);
      margin: 0;
      line-height: 1.4;
      transition: all 0.3s ease;
  }

  .faq-header:hover .faq-question h5 {
      color: var(--accent-color);
  }

  .faq-toggle {
      width: 40px;
      height: 40px;
      background: rgba(102, 126, 234, 0.1);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      flex-shrink: 0;
  }

  .faq-toggle i {
      font-size: 1rem;
      color: var(--accent-color);
      transition: all 0.3s ease;
  }

  .faq-item.active .faq-toggle {
      background: var(--accent-color);
      transform: rotate(45deg);
  }

  .faq-item.active .faq-toggle i {
      color: white;
  }

  .faq-content {
      max-height: 0;
      overflow: hidden;
      transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      background: var(--bg-primary);
  }

  .faq-item.active .faq-content {
      max-height: 1000px;
      border-top: 1px solid var(--border-color);
  }

  .faq-answer {
      padding: 2rem;
      color: var(--text-secondary);
      line-height: 1.7;
  }

  .faq-answer p {
      margin-bottom: 1rem;
  }

  .faq-answer ul {
      margin: 1rem 0;
      padding-right: 1.5rem;
  }

  .faq-answer li {
      margin-bottom: 0.5rem;
      color: var(--text-secondary);
  }

  .faq-answer strong {
      color: var(--text-primary);
      font-weight: 600;
  }

  /* Document Grid Styles */
  .document-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1.5rem;
      margin: 1.5rem 0;
  }

  .doc-category {
      background: var(--bg-secondary);
      padding: 1.5rem;
      border-radius: 12px;
      border: 1px solid var(--border-color);
      transition: all 0.3s ease;
  }

  .doc-category:hover {
      transform: translateY(-3px);
      box-shadow: var(--card-shadow);
  }

  .doc-category h6 {
      font-size: 1rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 1rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
  }

  .doc-category ul {
      list-style: none;
      padding: 0;
      margin: 0;
  }

  .doc-category li {
      padding: 0.5rem 0;
      border-bottom: 1px solid var(--border-color);
      color: var(--text-secondary);
      font-size: 0.9rem;
  }

  .doc-category li:last-child {
      border-bottom: none;
  }

  /* Cost Factors Styles */
  .cost-factors {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1rem;
      margin: 1.5rem 0;
  }

  .factor-item {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      padding: 1rem;
      background: var(--bg-secondary);
      border-radius: 10px;
      border: 1px solid var(--border-color);
      transition: all 0.3s ease;
  }

  .factor-item:hover {
      transform: translateY(-2px);
      box-shadow: var(--card-shadow);
  }

  .factor-icon {
      width: 40px;
      height: 40px;
      background: linear-gradient(135deg, var(--accent-color), #4dabf7);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
  }

  .factor-icon i {
      font-size: 1rem;
      color: white;
  }

  .factor-content h6 {
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 0.5rem;
  }

  .factor-content p {
      font-size: 0.85rem;
      color: var(--text-secondary);
      margin: 0;
      line-height: 1.4;
  }

  .cost-note {
      background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(102, 126, 234, 0.05));
      padding: 1rem 1.5rem;
      border-radius: 10px;
      border-right: 4px solid var(--accent-color);
      margin-top: 1.5rem;
      display: flex;
      align-items: flex-start;
      gap: 1rem;
  }

  .cost-note i {
      color: var(--accent-color);
      font-size: 1.2rem;
      margin-top: 0.2rem;
  }

  .cost-note p {
      margin: 0;
      color: var(--text-primary);
      font-weight: 500;
  }

  /* Insurance Types Styles */
  .insurance-types {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1.5rem;
      margin: 1.5rem 0;
  }

  .insurance-item {
      background: var(--bg-secondary);
      padding: 1.5rem;
      border-radius: 12px;
      border: 1px solid var(--border-color);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
  }

  .insurance-item:hover {
      transform: translateY(-5px);
      box-shadow: var(--card-shadow);
  }

  .insurance-badge {
      position: absolute;
      top: 1rem;
      left: 1rem;
      padding: 0.3rem 0.8rem;
      border-radius: 15px;
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
  }

  .insurance-badge.basic {
      background: linear-gradient(135deg, #28a745, #20c997);
      color: white;
  }

  .insurance-badge.standard {
      background: linear-gradient(135deg, #ffd700, #ffed4e);
      color: #2c3e50;
  }

  .insurance-badge.premium {
      background: linear-gradient(135deg, #8e44ad, #9b59b6);
      color: white;
  }

  .insurance-item h6 {
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--text-primary);
      margin: 2rem 0 1rem 0;
  }

  .insurance-item ul {
      list-style: none;
      padding: 0;
      margin: 0;
  }

  .insurance-item li {
      padding: 0.5rem 0;
      color: var(--text-secondary);
      font-size: 0.9rem;
      display: flex;
      align-items: center;
  }

  .insurance-item li::before {
      content: '✓';
      color: #28a745;
      font-weight: bold;
      margin-left: 0.5rem;
      font-size: 1rem;
  }

  .insurance-note {
      background: rgba(40, 167, 69, 0.1);
      padding: 1rem 1.5rem;
      border-radius: 10px;
      border-right: 4px solid #28a745;
      margin-top: 1.5rem;
      display: flex;
      align-items: flex-start;
      gap: 1rem;
  }

  .insurance-note i {
      color: #28a745;
      font-size: 1.2rem;
      margin-top: 0.2rem;
  }

  .insurance-note p {
      margin: 0;
      color: var(--text-primary);
      font-weight: 500;
  }

  /* Tracking Methods Styles */
  .tracking-methods {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1rem;
      margin: 1.5rem 0;
  }

  .tracking-method {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem;
      background: var(--bg-secondary);
      border-radius: 10px;
      border: 1px solid var(--border-color);
      transition: all 0.3s ease;
  }

  .tracking-method:hover {
      transform: translateY(-2px);
      box-shadow: var(--card-shadow);
      border-color: var(--accent-color);
  }

  .method-icon {
      width: 40px;
      height: 40px;
      background: linear-gradient(135deg, var(--accent-color), #4dabf7);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
  }

  .method-icon i {
      font-size: 1rem;
      color: white;
  }

  .method-content h6 {
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 0.3rem;
  }

  .method-content p {
      font-size: 0.8rem;
      color: var(--text-secondary);
      margin: 0;
      line-height: 1.3;
  }

  /* Tracking Stages Styles */
  .tracking-stages {
      margin-top: 2rem;
      padding: 1.5rem;
      background: var(--bg-secondary);
      border-radius: 12px;
      border: 1px solid var(--border-color);
  }

  .tracking-stages h6 {
      font-size: 1rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 1.5rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
  }

  .stage-timeline {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 1rem;
  }

  .stage-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 1rem;
      background: var(--bg-primary);
      border-radius: 10px;
      border: 1px solid var(--border-color);
      transition: all 0.3s ease;
  }

  .stage-item:hover {
      transform: translateY(-3px);
      box-shadow: var(--card-shadow);
  }

  .stage-number {
      width: 30px;
      height: 30px;
      background: linear-gradient(135deg, var(--accent-color), #4dabf7);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: 600;
      font-size: 0.9rem;
      margin-bottom: 0.5rem;
  }

  .stage-item span {
      font-size: 0.85rem;
      color: var(--text-secondary);
      line-height: 1.3;
  }

  /* Countries Grid Styles */
  .countries-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1.5rem;
      margin: 1.5rem 0;
  }

  .region {
      background: var(--bg-secondary);
      padding: 1.5rem;
      border-radius: 12px;
      border: 1px solid var(--border-color);
      transition: all 0.3s ease;
  }

  .region:hover {
      transform: translateY(-3px);
      box-shadow: var(--card-shadow);
  }

  .region h6 {
      font-size: 1rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 1rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
  }

  .countries {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
  }

  .country-tag {
      padding: 0.3rem 0.8rem;
      background: rgba(102, 126, 234, 0.1);
      color: var(--accent-color);
      border-radius: 15px;
      font-size: 0.8rem;
      font-weight: 500;
      transition: all 0.3s ease;
      cursor: pointer;
  }

  .country-tag:hover {
      background: var(--accent-color);
      color: white;
      transform: translateY(-1px);
  }

  .service-note {
      background: rgba(23, 162, 184, 0.1);
      padding: 1rem 1.5rem;
      border-radius: 10px;
      border-right: 4px solid #17a2b8;
      margin-top: 1.5rem;
      display: flex;
      align-items: flex-start;
      gap: 1rem;
  }

  .service-note i {
      color: #17a2b8;
      font-size: 1.2rem;
      margin-top: 0.2rem;
  }

  .service-note p {
      margin: 0;
      color: var(--text-primary);
      font-weight: 500;
  }

  /* FAQ CTA Styles */
  .faq-cta {
      position: relative;
      z-index: 2;
  }

  .cta-card {
      background: linear-gradient(135deg, var(--accent-color), #4dabf7);
      padding: 3rem 2rem;
      border-radius: 20px;
      color: white;
      text-align: center;
      position: relative;
      overflow: hidden;
  }

  .cta-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="ctaPattern" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23ctaPattern)"/></svg>');
      opacity: 0.3;
  }

  .cta-icon {
      width: 80px;
      height: 80px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1.5rem;
      backdrop-filter: blur(10px);
      position: relative;
      z-index: 2;
  }

  .cta-icon i {
      font-size: 2rem;
      color: white;
  }

  .cta-card h4 {
      font-size: 1.8rem;
      font-weight: 600;
      margin-bottom: 1rem;
      position: relative;
      z-index: 2;
  }

  .cta-card p {
      font-size: 1.1rem;
      opacity: 0.9;
      margin-bottom: 2rem;
      position: relative;
      z-index: 2;
  }

  .cta-buttons {
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;
      position: relative;
      z-index: 2;
  }

  .btn-cta-primary {
      background: white;
      color: var(--accent-color);
      padding: 1rem 2rem;
      border-radius: 25px;
      text-decoration: none;
      font-weight: 600;
      font-size: 1rem;
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      border: 2px solid white;
  }

  .btn-cta-primary:hover {
      background: transparent;
      color: white;
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3);
  }

  .btn-cta-secondary {
      background: transparent;
      color: white;
      padding: 1rem 2rem;
      border: 2px solid rgba(255, 255, 255, 0.5);
      border-radius: 25px;
      text-decoration: none;
      font-weight: 600;
      font-size: 1rem;
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      backdrop-filter: blur(10px);
  }

  .btn-cta-secondary:hover {
      background: rgba(255, 255, 255, 0.2);
      color: white;
      border-color: white;
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(255, 255, 255, 0.2);
  }

  /* Responsive Design for FAQ */
  @media (max-width: 768px) {
      .faq-header {
          padding: 1rem 1.5rem;
      }

      .faq-question {
          gap: 0.8rem;
      }

      .faq-icon {
          width: 45px;
          height: 45px;
      }

      .faq-icon i {
          font-size: 1.1rem;
      }

      .faq-question h5 {
          font-size: 1rem;
      }

      .faq-toggle {
          width: 35px;
          height: 35px;
      }

      .faq-answer {
          padding: 1.5rem;
      }

      .document-grid {
          grid-template-columns: 1fr;
          gap: 1rem;
      }

      .cost-factors {
          grid-template-columns: 1fr;
          gap: 0.8rem;
      }

      .insurance-types {
          grid-template-columns: 1fr;
          gap: 1rem;
      }

      .tracking-methods {
          grid-template-columns: 1fr;
          gap: 0.8rem;
      }

      .stage-timeline {
          grid-template-columns: repeat(2, 1fr);
          gap: 0.8rem;
      }

      .countries-grid {
          grid-template-columns: 1fr;
          gap: 1rem;
      }

      .cta-card {
          padding: 2rem 1.5rem;
      }

      .cta-card h4 {
          font-size: 1.5rem;
      }

      .cta-card p {
          font-size: 1rem;
      }

      .cta-buttons {
          flex-direction: column;
          align-items: center;
      }

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

  @media (max-width: 576px) {
      .faq-header {
          padding: 1rem;
      }

      .faq-question {
          flex-direction: column;
          align-items: flex-start;
          gap: 0.8rem;
      }

      .faq-icon {
          width: 40px;
          height: 40px;
      }

      .faq-icon i {
          font-size: 1rem;
      }

      .faq-question h5 {
          font-size: 0.95rem;
      }

      .faq-answer {
          padding: 1rem;
      }

      .factor-item,
      .tracking-method {
          flex-direction: column;
          text-align: center;
          gap: 0.8rem;
      }

      .stage-timeline {
          grid-template-columns: 1fr;
      }

      .cta-card {
          padding: 1.5rem 1rem;
      }

      .cta-icon {
          width: 60px;
          height: 60px;
      }

      .cta-icon i {
          font-size: 1.5rem;
      }

      .cta-card h4 {
          font-size: 1.3rem;
      }

      .cta-card p {
          font-size: 0.9rem;
      }
  }

  /* Articles Section Styles */
  .articles-section {
      background: var(--bg-secondary);
      position: relative;
      overflow: hidden;
  }

  .articles-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="articlePattern" width="30" height="30" patternUnits="userSpaceOnUse"><circle cx="15" cy="15" r="2" fill="rgba(102,126,234,0.08)"/><circle cx="5" cy="5" r="1" fill="rgba(102,126,234,0.05)"/><circle cx="25" cy="25" r="1" fill="rgba(102,126,234,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23articlePattern)"/></svg>');
      opacity: 0.6;
  }

  .article-card {
      background: var(--bg-primary);
      border-radius: 20px;
      padding: 2rem;
      box-shadow: var(--card-shadow);
      border: 1px solid var(--border-color);
      transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      position: relative;
      overflow: hidden;
      height: 100%;
      display: flex;
      flex-direction: column;
  }

  .article-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
      transition: all 0.6s ease;
  }

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

  .article-card:hover {
      transform: translateY(-15px);
      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
      border-color: var(--accent-color);
  }

  .article-icon-wrapper {
      position: relative;
      margin-bottom: 1.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
  }

  .article-icon {
      width: 70px;
      height: 70px;
      background: linear-gradient(135deg, var(--accent-color), #4dabf7);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
  }

  .article-icon::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(45deg, rgba(255, 255, 255, 0.2), transparent);
      border-radius: 50%;
  }

  .article-card:hover .article-icon {
      transform: scale(1.1) rotate(5deg);
      box-shadow: 0 10px 25px rgba(13, 110, 253, 0.4);
  }

  .article-icon i {
      font-size: 1.8rem;
      color: white;
      z-index: 2;
      position: relative;
  }

  .article-badge {
      padding: 0.3rem 0.8rem;
      border-radius: 15px;
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      position: relative;
      z-index: 2;
  }

  .article-badge:not(.popular):not(.trending):not(.featured) {
      background: linear-gradient(135deg, #28a745, #20c997);
      color: white;
  }

  .article-badge.popular {
      background: linear-gradient(135deg, #ff6b6b, #ee5a24);
      color: white;
  }

  .article-badge.trending {
      background: linear-gradient(135deg, #ffd700, #ffed4e);
      color: #2c3e50;
  }

  .article-badge.featured {
      background: linear-gradient(135deg, #8e44ad, #9b59b6);
      color: white;
  }

  .article-content {
      flex-grow: 1;
      margin-bottom: 1.5rem;
  }

  .article-title {
      font-size: 1.3rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 1rem;
      line-height: 1.4;
      transition: all 0.3s ease;
  }

  .article-card:hover .article-title {
      color: var(--accent-color);
  }

  .article-description {
      color: var(--text-secondary);
      font-size: 0.95rem;
      line-height: 1.6;
      margin-bottom: 1.5rem;
  }

  .article-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
  }

  .reading-time {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      color: var(--text-secondary);
      font-size: 0.85rem;
  }

  .reading-time i {
      color: var(--accent-color);
  }

  .article-category {
      background: rgba(102, 126, 234, 0.1);
      color: var(--accent-color);
      padding: 0.3rem 0.8rem;
      border-radius: 12px;
      font-size: 0.8rem;
      font-weight: 500;
  }

  .article-footer {
      margin-top: auto;
  }

  .btn-read-more {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background: linear-gradient(135deg, var(--accent-color), #4dabf7);
      color: white;
      padding: 0.8rem 1.5rem;
      border-radius: 25px;
      text-decoration: none;
      font-weight: 500;
      font-size: 0.9rem;
      transition: all 0.3s ease;
      border: none;
      cursor: pointer;
  }

  .btn-read-more:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(13, 110, 253, 0.4);
      color: white;
  }

  .btn-read-more i {
      transition: all 0.3s ease;
  }

  .btn-read-more:hover i {
      transform: translateX(-3px);
  }

  .article-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, var(--accent-color), #4dabf7);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: all 0.4s ease;
      border-radius: 20px;
  }

  .article-card:hover .article-overlay {
      opacity: 0.95;
  }

  .article-overlay .overlay-content {
      text-align: center;
      color: white;
      transform: translateY(20px);
      transition: all 0.4s ease;
  }

  .article-card:hover .overlay-content {
      transform: translateY(0);
  }

  .article-overlay h6 {
      font-size: 1.2rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
  }

  .article-overlay p {
      font-size: 0.9rem;
      opacity: 0.9;
      margin: 0;
  }

  /* Newsletter Section */
  .newsletter-section {
      margin-top: 4rem;
  }

  .newsletter-card {
      background: linear-gradient(135deg, var(--accent-color), #4dabf7);
      border-radius: 20px;
      padding: 3rem 2rem;
      text-align: center;
      color: white;
      position: relative;
      overflow: hidden;
  }

  .newsletter-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="newsletterPattern" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23newsletterPattern)"/></svg>');
      opacity: 0.3;
  }

  .newsletter-icon {
      width: 80px;
      height: 80px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1.5rem;
      backdrop-filter: blur(10px);
      position: relative;
      z-index: 2;
  }

  .newsletter-icon i {
      font-size: 2rem;
      color: white;
  }

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

  .newsletter-content h4 {
      font-size: 1.8rem;
      font-weight: 600;
      margin-bottom: 1rem;
  }

  .newsletter-content p {
      font-size: 1.1rem;
      opacity: 0.9;
      margin-bottom: 2rem;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
  }

  .newsletter-form {
      display: flex;
      gap: 1rem;
      max-width: 400px;
      margin: 0 auto;
  }

  .newsletter-form input {
      flex: 1;
      padding: 1rem 1.5rem;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-radius: 25px;
      background: rgba(255, 255, 255, 0.1);
      color: white;
      font-size: 1rem;
      backdrop-filter: blur(10px);
      transition: all 0.3s ease;
  }

  .newsletter-form input::placeholder {
      color: rgba(255, 255, 255, 0.7);
  }

  .newsletter-form input:focus {
      outline: none;
      border-color: rgba(255, 255, 255, 0.6);
      background: rgba(255, 255, 255, 0.15);
  }

  .newsletter-form button {
      padding: 1rem 2rem;
      background: white;
      color: var(--accent-color);
      border: none;
      border-radius: 25px;
      font-weight: 600;
      font-size: 1rem;
      cursor: pointer;
      transition: all 0.3s ease;
      white-space: nowrap;
  }

  .newsletter-form button:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3);
  }

  /* Article Modal */
  .article-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
      backdrop-filter: blur(5px);
  }

  .article-modal.active {
      opacity: 1;
      visibility: visible;
  }

  .modal-content {
      background: var(--bg-primary);
      border-radius: 20px;
      padding: 2rem;
      max-width: 500px;
      width: 90%;
      text-align: center;
      transform: scale(0.8);
      transition: all 0.3s ease;
  }

  .article-modal.active .modal-content {
      transform: scale(1);
  }

  .modal-icon {
      width: 80px;
      height: 80px;
      background: linear-gradient(135deg, var(--accent-color), #4dabf7);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1.5rem;
  }

  .modal-icon i {
      font-size: 2rem;
      color: white;
  }

  .modal-title {
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 1rem;
  }

  .modal-text {
      color: var(--text-secondary);
      margin-bottom: 2rem;
      line-height: 1.6;
  }

  .modal-buttons {
      display: flex;
      gap: 1rem;
      justify-content: center;
  }

  .btn-modal {
      padding: 0.8rem 1.5rem;
      border-radius: 25px;
      font-weight: 500;
      text-decoration: none;
      transition: all 0.3s ease;
      border: none;
      cursor: pointer;
  }

  .btn-modal.primary {
      background: linear-gradient(135deg, var(--accent-color), #4dabf7);
      color: white;
  }

  .btn-modal.secondary {
      background: transparent;
      color: var(--text-secondary);
      border: 2px solid var(--border-color);
  }

  .btn-modal:hover {
      transform: translateY(-2px);
  }

  /* Responsive Design for Articles */
  @media (max-width: 768px) {
      .article-card {
          padding: 1.5rem;
      }

      .article-icon {
          width: 60px;
          height: 60px;
      }

      .article-icon i {
          font-size: 1.5rem;
      }

      .article-title {
          font-size: 1.2rem;
      }

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

      .newsletter-card {
          padding: 2rem 1.5rem;
      }

      .newsletter-content h4 {
          font-size: 1.5rem;
      }

      .newsletter-content p {
          font-size: 1rem;
      }

      .newsletter-form {
          flex-direction: column;
          gap: 1rem;
      }

      .newsletter-form button {
          padding: 1rem;
      }
  }

  @media (max-width: 576px) {
      .article-card {
          padding: 1rem;
      }

      .article-icon {
          width: 50px;
          height: 50px;
      }

      .article-icon i {
          font-size: 1.3rem;
      }

      .article-title {
          font-size: 1.1rem;
      }

      .article-description {
          font-size: 0.85rem;
      }

      .article-meta {
          flex-direction: column;
          gap: 0.5rem;
          align-items: flex-start;
      }

      .newsletter-card {
          padding: 1.5rem 1rem;
      }

      .newsletter-content h4 {
          font-size: 1.3rem;
      }

      .newsletter-content p {
          font-size: 0.9rem;
      }

      .modal-content {
          padding: 1.5rem;
          width: 95%;
      }

      .modal-buttons {
          flex-direction: column;
      }
  }

  /* Footer Section Styles */
  .footer-section {
      background: linear-gradient(135deg, #2c3e50 0%, #34495e 50%, #2c3e50 100%);
      background-size: 400% 400%;
      animation: gradientShift 25s ease infinite;
      position: relative;
      overflow: hidden;
      color: white;
  }

  .footer-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="footerPattern" width="25" height="25" patternUnits="userSpaceOnUse"><circle cx="12.5" cy="12.5" r="1.5" fill="rgba(255,255,255,0.05)"/><circle cx="6" cy="6" r="0.8" fill="rgba(255,255,255,0.03)"/><circle cx="19" cy="19" r="0.8" fill="rgba(255,255,255,0.03)"/></pattern></defs><rect width="100" height="100" fill="url(%23footerPattern)"/></svg>');
      opacity: 0.4;
  }

  .footer-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.3);
      z-index: 1;
  }

  .footer-floating-elements {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
  }

  .floating-footer-shape {
      position: absolute;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
      animation: floatFooterShape 8s ease-in-out infinite;
  }

  .floating-footer-shape.shape-1 {
      width: 120px;
      height: 120px;
      top: 15%;
      left: 8%;
      animation-delay: 0s;
  }

  .floating-footer-shape.shape-2 {
      width: 80px;
      height: 80px;
      top: 25%;
      right: 12%;
      animation-delay: 2s;
  }

  .floating-footer-shape.shape-3 {
      width: 150px;
      height: 150px;
      bottom: 25%;
      left: 15%;
      animation-delay: 4s;
  }

  .floating-footer-shape.shape-4 {
      width: 60px;
      height: 60px;
      bottom: 35%;
      right: 8%;
      animation-delay: 1s;
  }

  @keyframes floatFooterShape {

      0%,
      100% {
          transform: translateY(0px) rotate(0deg);
          opacity: 0.3;
      }

      50% {
          transform: translateY(-25px) rotate(180deg);
          opacity: 0.6;
      }
  }

  .footer-main {
      position: relative;
      z-index: 2;
  }

  .footer-widget {
      height: 100%;
  }

  .footer-logo .logo-container {
      display: flex;
      align-items: center;
      gap: 15px;
      font-size: 28px;
      font-weight: 700;
      color: white;
      transition: all 0.3s ease;
  }

  .footer-logo .logo-container:hover {
      transform: scale(1.05);
  }

  .footer-logo .logo-container i {
      font-size: 36px;
      color: #ffd700;
      animation: float 3s ease-in-out infinite;
  }

  .footer-description {
      color: rgba(255, 255, 255, 0.8);
      line-height: 1.7;
      font-size: 1rem;
      margin-bottom: 2rem;
  }

  .widget-title {
      font-size: 1.3rem;
      font-weight: 600;
      color: white;
      margin-bottom: 1.5rem;
      position: relative;
      padding-bottom: 0.5rem;
  }

  .widget-title::after {
      content: '';
      position: absolute;
      bottom: 0;
      right: 0;
      width: 50px;
      height: 3px;
      background: linear-gradient(45deg, #ffd700, #ffed4e);
      border-radius: 2px;
  }

  /* Footer Links */
  .footer-links {
      list-style: none;
      padding: 0;
      margin: 0;
  }

  .footer-links li {
      margin-bottom: 0.8rem;
  }

  .footer-links a {
      color: rgba(255, 255, 255, 0.8);
      text-decoration: none;
      font-size: 0.95rem;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      padding: 0.3rem 0;
  }

  .footer-links a::before {
      content: '';
      width: 6px;
      height: 6px;
      background: #ffd700;
      border-radius: 50%;
      margin-left: 10px;
      transition: all 0.3s ease;
      opacity: 0;
      transform: translateX(-10px);
  }

  .footer-links a:hover {
      color: #ffd700;
      transform: translateX(-5px);
  }

  .footer-links a:hover::before {
      opacity: 1;
      transform: translateX(0);
  }

  /* Footer Services */
  .footer-services {
      list-style: none;
      padding: 0;
      margin: 0;
  }

  .footer-services li {
      display: flex;
      align-items: center;
      margin-bottom: 1rem;
      padding: 0.5rem 0;
      transition: all 0.3s ease;
  }

  .footer-services li:hover {
      transform: translateX(-5px);
  }

  .footer-services li i {
      width: 20px;
      color: #ffd700;
      margin-left: 12px;
      font-size: 0.9rem;
  }

  .footer-services li span {
      color: rgba(255, 255, 255, 0.8);
      font-size: 0.95rem;
      transition: all 0.3s ease;
  }

  .footer-services li:hover span {
      color: white;
  }

  /* Social Media */
  .footer-social {
      margin-top: 2rem;
  }

  .social-title {
      font-size: 1.1rem;
      font-weight: 600;
      color: white;
      margin-bottom: 1rem;
  }

  .social-links {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
  }

  .social-link {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.6rem 1rem;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 25px;
      color: white;
      text-decoration: none;
      font-size: 0.9rem;
      transition: all 0.3s ease;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .social-link:hover {
      transform: translateY(-3px);
      color: white;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  }

  .social-link.instagram:hover {
      background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  }

  .social-link.linkedin:hover {
      background: #0077b5;
  }

  .social-link.telegram:hover {
      background: #0088cc;
  }

  .social-link.whatsapp:hover {
      background: #25d366;
  }

  /* Contact Info */
  .contact-info {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
  }

  .contact-item {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      padding: 1rem;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 12px;
      transition: all 0.3s ease;
      border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .contact-item:hover {
      background: rgba(255, 255, 255, 0.08);
      transform: translateY(-2px);
      border-color: rgba(255, 215, 0, 0.3);
  }

  .contact-icon {
      width: 45px;
      height: 45px;
      background: linear-gradient(135deg, #ffd700, #ffed4e);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.3s ease;
  }

  .contact-item:hover .contact-icon {
      transform: scale(1.1);
      box-shadow: 0 8px 20px rgba(255, 215, 0, 0.4);
  }

  .contact-icon i {
      color: #2c3e50;
      font-size: 1.1rem;
  }

  .contact-details h6 {
      font-size: 1rem;
      font-weight: 600;
      color: white;
      margin-bottom: 0.3rem;
  }

  .contact-details p {
      color: rgba(255, 255, 255, 0.8);
      font-size: 0.9rem;
      line-height: 1.5;
      margin: 0;
  }

  .contact-details a {
      color: rgba(255, 255, 255, 0.8);
      text-decoration: none;
      transition: all 0.3s ease;
  }

  .contact-details a:hover {
      color: #ffd700;
  }

  /* Newsletter */
  .footer-newsletter {
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      position: relative;
      z-index: 2;
  }

  .newsletter-content h5 {
      font-size: 1.3rem;
      font-weight: 600;
      color: white;
      margin-bottom: 0.5rem;
  }

  .newsletter-content p {
      color: rgba(255, 255, 255, 0.8);
      margin: 0;
  }

  .newsletter-form .input-group {
      display: flex;
      gap: 0;
      max-width: 400px;
      margin-right: auto;
  }

  .newsletter-form input {
      flex: 1;
      padding: 1rem 1.5rem;
      border: 2px solid rgba(255, 255, 255, 0.2);
      border-left: none;
      border-radius: 25px 0 0 25px;
      background: rgba(255, 255, 255, 0.1);
      color: white;
      font-size: 1rem;
      backdrop-filter: blur(10px);
      transition: all 0.3s ease;
  }

  .newsletter-form input::placeholder {
      color: rgba(255, 255, 255, 0.6);
  }

  .newsletter-form input:focus {
      outline: none;
      border-color: rgba(255, 215, 0, 0.5);
      background: rgba(255, 255, 255, 0.15);
  }

  .newsletter-form button {
      padding: 1rem 1.5rem;
      background: linear-gradient(135deg, #ffd700, #ffed4e);
      color: #2c3e50;
      border: 2px solid #ffd700;
      border-radius: 0 25px 25px 0;
      font-weight: 600;
      font-size: 1rem;
      cursor: pointer;
      transition: all 0.3s ease;
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 0.5rem;
  }

  .newsletter-form button:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(255, 215, 0, 0.4);
      background: linear-gradient(135deg, #ffed4e, #ffd700);
  }

  /* Footer Bottom */
  .footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      position: relative;
      z-index: 2;
  }

  .copyright p {
      color: rgba(255, 255, 255, 0.7);
      font-size: 0.9rem;
      margin: 0;
  }

  .footer-bottom-links {
      display: flex;
      gap: 2rem;
      justify-content: flex-end;
  }

  .footer-bottom-links a {
      color: rgba(255, 255, 255, 0.7);
      text-decoration: none;
      font-size: 0.9rem;
      transition: all 0.3s ease;
  }

  .footer-bottom-links a:hover {
      color: #ffd700;
  }

  /* Back to Top Button */
  .back-to-top {
      position: fixed;
      bottom: 30px;
      left: 30px;
      width: 50px;
      height: 50px;
      background: linear-gradient(135deg, #ffd700, #ffed4e);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transform: translateY(20px);
      box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
  }

  .back-to-top.visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
  }

  .back-to-top:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 25px rgba(255, 215, 0, 0.5);
  }

  .back-to-top i {
      color: #2c3e50;
      font-size: 1.2rem;
  }

  /* Responsive Design for Footer */
  @media (max-width: 768px) {
      .footer-logo .logo-container {
          font-size: 24px;
          justify-content: center;
      }

      .footer-logo .logo-container i {
          font-size: 30px;
      }

      .widget-title {
          font-size: 1.2rem;
          text-align: center;
      }

      .widget-title::after {
          left: 50%;
          transform: translateX(-50%);
      }

      .footer-description {
          text-align: center;
      }

      .social-links {
          justify-content: center;
      }

      .footer-services {
          text-align: center;
      }

      .footer-links {
          text-align: center;
      }

      .contact-info {
          align-items: center;
      }

      .newsletter-form .input-group {
          flex-direction: column;
          gap: 1rem;
      }

      .newsletter-form input {
          border-radius: 25px;
          border: 2px solid rgba(255, 255, 255, 0.2);
      }

      .newsletter-form button {
          border-radius: 25px;
          justify-content: center;
      }

      .footer-bottom-links {
          justify-content: center;
          margin-top: 1rem;
      }

      .back-to-top {
          bottom: 20px;
          left: 20px;
          width: 45px;
          height: 45px;
      }

      .floating-footer-shape {
          display: none;
      }
  }

  @media (max-width: 576px) {
      .footer-main {
          padding: 3rem 0 !important;
      }

      .footer-widget {
          margin-bottom: 2rem;
      }

      .widget-title {
          font-size: 1.1rem;
      }

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

      .social-link {
          padding: 0.5rem 0.8rem;
          font-size: 0.8rem;
      }

      .contact-item {
          padding: 0.8rem;
      }

      .contact-icon {
          width: 40px;
          height: 40px;
      }

      .contact-details h6 {
          font-size: 0.9rem;
      }

      .contact-details p {
          font-size: 0.8rem;
      }

      .newsletter-content h5 {
          font-size: 1.1rem;
          text-align: center;
      }

      .newsletter-content p {
          font-size: 0.9rem;
          text-align: center;
      }

      .footer-bottom-links {
          flex-direction: column;
          gap: 1rem;
          text-align: center;
      }

      .copyright {
          text-align: center;
      }
  }