.clsnav{
    background-color: #ffde59;
}
body{
    overflow-x: hidden;
    font-family: 'Poppins', sans-serif;
}
@media (max-width: 768px) {
    body {
        overflow-x: hidden; /* Hides horizontal scrollbar */
    }
    .clsabout{
    margin-top: 5%;
}
.navbar-brand img{
    width:250px;
}
}

.nav-item a,.navbar-dark .navbar-nav .nav-link{
    color: #f8f9fa;
    font-weight: 700;
}

.nav-item a:hover {
    text-decoration: underline;
    text-decoration-color: black; /* Blue underline on hover */
    text-underline-offset: 4px; 
}
.carousel-caption {
    top:10%;
}
h1{
    color:floralwhite;
}
btn:hover{
    color: #ffde59;
}
.about-section 
{
            background-color: #f8f9fa; /* Light background */
            padding: 80px 0;
    
}
.about-img
{
            border-radius: 10px;
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1);
}

.ctastrip {
    background-color: #5774f7;
}
.btn-custom {
            padding: 12px 24px;
            font-size: 16px;
            font-weight: bold;
            border-radius: 8px;
            transition: all 0.3s ease-in-out;
        }
        .btn-white {
            background-color: #ffde59;
            color: black;
            border: 2px solid black;
        }
        .btn-white:hover {
            background-color: black;
            color: white;
        }
.service-section {
            background-color: black;
            padding: 80px 0;
        }
        .service-card {
            margin-top:50px;
            min-height:347px;
            background: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease-in-out;
        }
        .service-card:hover {
            transform: translateY(-10px);
        }
        .service-icon {
            font-size: 40px;
            color: #007bff;
        }
        
        
        .icon-circle {
            width: 100px; /* Adjust size */
            height: 100px;
            background-color: #5774F7; /* Circle background color */
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%; /* Makes it a perfect circle */
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Optional shadow */
        }
        .icon-circle i {
            font-size: 32px; /* Icon size */
            color: white; /* Icon color */
        }
        
        section {
    scroll-margin-top: 300px; /* Adjust based on your navbar height */
}


  .benefit-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: #fff;
  }
  .benefit-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  }
  .icon i {
    font-size: 2.5rem;
  }