body {
  font-family: "Raleway", sans-serif;
}

:root {
  --primary-color: #0087b2;
  --secondary-color: #2c3e50;
  --accent-color: #d1c9ff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Montserrat", sans-serif;
}
.hrl-container{
  width: 1320px;
  margin: 0 auto;
  max-width: 100%;
}
.nav-bg {
  border-radius: 10px;
  position: sticky !important;
  top: 20px;
}


.animate-item {
  opacity: 0;
  transform: translateY(1rem);
  transition: all 0.5s ease;
}
.animate-item.show {
  opacity: 1;
  transform: translateY(0);
}
 /* Custom animations */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    .animate-item {
      animation: fadeInUp 0.6s ease-out forwards;
      opacity: 0;
    }
    
    
    .dark-mode-toggle {
      position: relative;
      width: 50px;
      height: 24px;
      border-radius: 12px;
      background-color: #e5e7eb;
      cursor: pointer;
      transition: background-color 0.3s;
    }
    
    .dark-mode-toggle.dark {
      background-color: #4b5563;
    }
    
    .toggle-circle {
      position: absolute;
      top: 2px;
      left: 2px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: white;
      transition: transform 0.3s;
    }
    
    .dark-mode-toggle.dark .toggle-circle {
      transform: translateX(26px);
      background-color: #1f2937;
    }
    
    @media (max-width: 768px) {
      .hero-title {
        font-size: 2.5rem;
      }
      .feature-cards {
        grid-template-columns: 1fr;
      }
      .feature-card {
        width: 100%;
      }
    }


    .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .scrollbar-thin {
        scrollbar-width: thin;
    }

    .scrollbar-thin::-webkit-scrollbar {
        height: 8px;
        width: 8px;
    }

    .scrollbar-thin::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 9999px;
    }

    .dark .scrollbar-thin::-webkit-scrollbar-thumb {
        background: #475569;
    }
  

      .hero-bg {
        background-image: url('../img/herobg.svg');
    }

    .dark .hero-bg {
        background-image: url('../img/ctaBackground-dark.png');
    }

    .cta-bg {
        background-image: url('../img/ctaBackground.webp');
    }

    .dark .cta-bg {
        background-image: url('../img/ctaBackground-dark.png');
    }


      .value-bg {
        background-image: url('../img/valuebg.svg');
    }