/* about */
/* Remove default browser spacing */
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
.about-bg {
  background: linear-gradient(to bottom, #2F3985 0%, #2F3985 30%, #FFFFFF 30%, #FFFFFF 100%);
}

#features {
  background-color: #FFFFFF;
  overflow: hidden;
}

.heading-main {
  /* font-size: 3rem; */
  color: #2f3985;
  font-weight: 700;
}

.feature-box {
  position: relative;
  /* background: #fff; */
  border-left: 4px solid transparent;
  padding-left: 90px;
}

.icon-circle {
  position: absolute;
  top: 0;
  left: 0;
  background: radial-gradient(circle at center, #fff 50%, #ffcccc 100%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  color: #2f3985;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 0 15px rgba(255, 0, 0, 0.1);
}

.feature-list {
  list-style: none;
  padding-left: 0;
  margin-top: 15px;
}

.feature-list li {
  position: relative;
  padding-left: 60px;
  margin-bottom: 10px;
  font-weight: 500;
}

.feature-list li::before {
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #FF3514;
  position: absolute;
  left: 40px;
  top: 2px;
}

/* ! our cliends */
.logo-slider {
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

.logo-track {
  animation: scroll 40s linear infinite;
  display: flex;
}

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

.bg-light-gray{ background: #fafafa; }

/* ! hero section */
.hero-section {
            position: relative;
            height: 75vh;
            /* background: linear-gradient(135deg, #0f172a 0%, #1e293b 35%, #334155 100%); */
            /* background-color: #334155; */
            background-color: #2f3985;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* background: 
                radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(16, 185, 129, 0.2) 0%, transparent 50%),
                radial-gradient(circle at 40% 80%, rgba(139, 92, 246, 0.2) 0%, transparent 50%); */
            animation: float 20s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(2deg); }
        }
.hero-title {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 900;
  color: #ffffff;
  line-height: 1.1;
}
.hero-title1 {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 900;
  color: #ffffff;
  line-height: 1.1;
}

.hero-title .highlight {
  background: linear-gradient(135deg, #ef4444 0%, #f97316 50%, #eab308 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.hero-title1 .highlight {
  background: linear-gradient(135deg, #ef4444 0%, #f97316 50%, #eab308 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.5rem);
  color: #cbd5e1;
  max-width: 720px;
}

@media(min-width:768px){
  .hero-title{
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 900;
  color: #ffffff;
  line-height: 1.1;
  }
}
        .geometric-shapes {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .shape {
            position: absolute;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            animation: drift 15s linear infinite;
        }

        .shape:nth-child(1) {
            width: 300px;
            height: 300px;
            top: 10%;
            left: -150px;
            animation-delay: 0s;
        }

        .shape:nth-child(2) {
            width: 200px;
            height: 200px;
            top: 60%;
            right: -100px;
            animation-delay: -5s;
        }

        .shape:nth-child(3) {
            width: 150px;
            height: 150px;
            top: 80%;
            left: 20%;
            animation-delay: -10s;
        }

        @keyframes drift {
            0% { transform: translateX(0) translateY(0) rotate(0deg); }
            25% { transform: translateX(100px) translateY(-50px) rotate(90deg); }
            50% { transform: translateX(200px) translateY(0) rotate(180deg); }
            75% { transform: translateX(100px) translateY(50px) rotate(270deg); }
            100% { transform: translateX(0) translateY(0) rotate(360deg); }
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .hero-container {
                padding: 0 20px;
            }
            .hero-buttons {
                flex-direction: column;
                align-items: center;
            }
            

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

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

        @media (max-width: 480px) {
            .stats-grid {
                grid-template-columns: 1fr;
            }
        }
/* responsive */
        @media (min-width: 1400px){
          .hero-title{
            font-size: 6rem;
          }
          .hero-subtitle{
            font-size: 2rem;
          }
        }
        /* Subtle focus states for accessibility */
        .btn:focus {
            outline: 2px solid #60a5fa;
            outline-offset: 2px;
        }

        /* Clean scrollbar for webkit browsers */
        ::-webkit-scrollbar {
            width: 6px;
        }

        ::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.3);
            border-radius: 3px;
        }
.gradient-text {
  background: linear-gradient(135deg, #ef4444 0%, #f97316 50%, #eab308 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* hero section corosoul */
.hero-title1 {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.3;
}



/* .btn-primary {
  background-color: #2f3985;
  border: none;
  transition: background-color 0.3s ease;
} */

.btn-highlight{
  background: linear-gradient(135deg, #ef4444 0%, #f97316 50%, #eab308 100%);
   color: white;
}

.image-animate {
  transition: transform 0.8s ease;
 
}

.image-animate:hover {
  transform: scale(1.05);
}