*{
    padding: 0;
    margin: 0;
}
.topbar{
    height: 44px;
    background-color: #231F20;
    color: white;
    font-size: 15px;
    font-weight: 400;
    display: flex;
    align-items: center;
justify-content: center;
}

.topbar-border{
    border-left: 1px solid rgba(255, 255, 255, 0.21);
    padding-left: 10px;
}


nav{
    /* height: 66px; */
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);
   
}

.navbar{
    padding: 0px;
    margin: 0px;
}

.nav-item{
    font-size: 17px;
    font-weight: 400;
    color: #0E2A46;
}

nav button{
    background-color: #00A650;
    border: none;
    padding:20px 10px;
    color: white;
    font-size: 17px;
    font-weight: 400;
}




.carousel-inner{
    box-shadow: 0px 9.443px 56.656px 0px rgba(38, 45, 118, 0.08);
}




@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600&display=swap');








.btn-slide { 
    position: relative;
    display: inline-block; 
    height: 50px;
    width: 260px;
    line-height: 50px;
    margin: 25px 0;
    padding: 0px;
    border-radius: 25px;
  
    background: linear-gradient(135deg, #00A650 0%,#231F20 100%);
        }
        
.btn-slide:active { 
   
    -webkit-transform: scale(0.98);
    transform: scale(0.96); }
    
.btn-slide:hover { 
    background: linear-gradient(-135deg, #00A650 0%,#231F20 100%); }
        
.btn-slide span.circle { 
    display: block;
    background-color: #2DE083;
    color: white;
    position: absolute;
    margin: 5px;
    height: 40px; 
    width: 40px;
    top: 0; left: 0;
    border-radius: 50%;
    transition: all 1.5s ease;
 }
        
.btn-slide:hover span.circle { 
    left: 100%;
    margin-left: -45px;
    background-color: #2DE083;
    color: white; }
        
.btn-slide span.title { 
    font-family: 'Nunito Sans';
    position: absolute;
    left: 85px;
    font-size: 20px;
    letter-spacing: 1px;
    color: #fff;
    transition: all 1.5s linear; 
 }
        
.btn-slide span.title-hover { opacity: 0;}
.btn-slide:hover span.title { opacity: 0; }
.btn-slide:hover span.title-hover { opacity: 1; left: 60px; }   
    
.circle{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* padding-bottom: 5px; */
    padding-top: 0px;
    margin-top: 0px;
    cursor: pointer;

}






/* Responsive styles for tablets */
@media (max-width: 991.98px) and (min-width: 768px) { /* For tablets */
    .btn-slide {
        height: 45px; /* Adjust height for tablets */
        width: 220px; /* Adjust width for tablets */
        line-height: 45px; /* Match line-height to height */
        border-radius: 20px; /* Adjust border-radius */
    }

    .btn-slide span.circle {
        height: 35px; /* Adjust circle size */
        width: 35px;
        margin: 4px; /* Adjust margin */
    }

    .btn-slide span.title {
        font-size: 18px; /* Adjust font size */
        left: 70px; /* Adjust position */
    }

    .btn-slide:hover span.circle {
        margin-left: -40px; /* Adjust hover margin for circle */
    }

    .btn-slide:hover span.title-hover {
        left: 50px; /* Adjust hover position for title */
    }
}


.animated-svg{
   margin-top: -50px;
   margin-left: -20px;
}


.animated-svg path {
    stroke-dasharray: 1000; /* Total length of the path */
    stroke-dashoffset: 1000; /* Start hidden */
    animation: draw 2s ease-in-out infinite, glow 1.5s infinite alternate;
}

@keyframes draw {
    to {
        stroke-dashoffset: 0; /* Fully visible */
    }
}

@keyframes glow {
    0% {
        stroke: #00A650;
    }
    100% {
        stroke: #00FF00;
    }
}


.hover-effect {
    color: #231F20; /* Default color */
    transition: color 0.3s ease, transform 0.3s ease;
}

.hover-effect:hover {
    color: #00A650; /* Change color on hover */
    transform: scale(1.1); /* Slightly enlarge the text */
   
}








.courses-card{
    border-radius: 37.77px;
background: rgba(255, 255, 255, 0.80);
box-shadow: 0px 9.443px 56.656px 0px rgba(38, 45, 118, 0.08);
/* padding: 20px 20px; */
width: 320px;
height: auto;
padding: 10px 10px;
text-align: center;

}



.courses-card-img{
    padding: 10px 10px;
    width: 300px;
    border-radius: 16px;

}

.courses-card2{
    text-align: start;
    padding: 10px 10px;
}



/* card css  */


/* .course-card {
    background-color: #fff;
    border: none !important;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 30px !important;
    height: 100% !important;
} */




/* video section start  */



.video-section {
    background: linear-gradient(135deg, rgba(35, 31, 32, 0.90), rgba(0, 0, 0, 0.70)), 
                url("../../assets/images/img/topper-img.svg") no-repeat center center;
    background-size: cover;
    height: 475px;
}




/* slider css */


.testimonials-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 20px;
    font-family: Arial, sans-serif;
    position: relative;
    overflow: hidden;
}

.testimonials-title {
    text-align: center;
    font-size: 32px;
    margin-bottom: 40px;
    color: #2c3e50;
}

.testimonials-carousel {
    display: flex;
    transition: transform 0.5s ease;
    width: 100%;
}

.testimonial-card {
    min-width: calc(100% / 3 - 20px);
    background: #fff;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    margin: 0 10px;
    transition: all 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

.testimonial-text {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    font-style: italic;
    margin-bottom: 20px;
    position: relative;
    padding-left: 20px;
}

.testimonial-text:before {
    content: '"';
    font-size: 50px;
    color: #e0e0e0;
    position: absolute;
    left: -15px;
    top: -15px;
}

.testimonial-author {
    font-weight: bold;
    font-size: 16px;
    color: #2c3e50;
    margin-top: 15px;
}

.testimonial-role {
    font-size: 14px;
    color: #0D9447;
    margin-top: 5px;
}

.carousel-nav {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.carousel-dot {
    width: 12px;
    height: 12px;
    background: #ccc;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
    transition: background 0.3s;
}

.carousel-dot.active {
    background: #00A650;
}

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 10;
    font-size: 20px;
    color: #333;
    border: none;
}

.carousel-arrow.prev {
    left: 10px;
}

.carousel-arrow.next {
    right: 10px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .testimonial-card {
        min-width: 100%;
        margin: 0;
    }
    
    .testimonials-title {
        font-size: 26px;
        margin-bottom: 30px;
    }
    
    .carousel-arrow {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }

    .counting-bg-phone{
        background-color: white !important;
    }

 

}


/* new slider css  */




.testimonial-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 20px;
    font-family: Arial, sans-serif;
    position: relative;
    overflow: hidden;
}

.testimonial-heading {
    text-align: center;
    font-size: 32px;
    margin-bottom: 40px;
    color: #2c3e50;
}

.testimonial-slider {
    display: flex;
    transition: transform 0.5s ease;
    width: 100%;
}

.testimonial-item {
    min-width: calc(100% / 3 - 20px);
    background: #fff;
    border-radius: 8px;
    /* padding: 30px; */
    /* box-shadow: 0 4px 12px rgba(0,0,0,0.1); */
    /* margin: 0 10px; */
    transition: all 0.3s ease;
}

.testimonial-item:hover {
    transform: translateY(-5px);
    /* box-shadow: 0 8px 16px rgba(0,0,0,0.15); */
}

.testimonial-content {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    font-style: italic;
    /* margin-bottom: 20px; */
    position: relative;
    padding-left: 20px;
}

.testimonial-content:before {
    content: '"';
    font-size: 50px;
    color: #e0e0e0;
    position: absolute;
    left: -15px;
    top: -15px;
}

.testimonial-name {
    font-weight: bold;
    font-size: 16px;
    color: #2c3e50;
    margin-top: 15px;
}

.testimonial-position {
    font-size: 14px;
    color: #7f8c8d;
    margin-top: 5px;
}

.slider-controls {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.slider-indicator {
    width: 12px;
    height: 12px;
    background: #ccc;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
    transition: background 0.3s;
}

.slider-indicator.active {
    background: #00A650;
}

.slider-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 10;
    font-size: 20px;
    color: #333;
    border: none;
}

.slider-button--prev {
    left: 10px;
}

.slider-button--next {
    right: 10px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .testimonial-item {
        min-width: 100%;
        margin: 0;
    }
    
    .testimonial-heading {
        font-size: 26px;
        margin-bottom: 30px;
    }
    
    .slider-button {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }
}

.animated-text {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    width: 0;
    animation: slideIn 3s ease-in-out infinite;
    font-size: 17px; /* Adjust as needed */
   /* Adjust text color */
}

@keyframes slideIn {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}





/* slider banner  */


.carousel-indicators [data-bs-target] {

width: 10px !important;
height: 10px !important;
color: #000 !important;
background-color: #00A650;
}


.carousel-indicators.active {
    background: #00A650 !important;
}

.carousel-indicators {
    margin-bottom: -2rem;
   
}




/* imgg fresponsive in phone */


@media (max-width: 768px) {
    .responsive-width-img2 {
        width: 240px !important;
    }

    .responsive-width-img2{
        width: 200px !important;
        margin-left: 20px !important;
        /* padding-left: 20px !important; */
    }

    .responsive-width-img3{
        width: 240px !important;
        
    }

    .responsive-width-img1{
        width: 250px !important;
        margin-left: 20px !important;
    }

    .button-for-phone{
        font-size: 15px !important;
    
    }

   

   

   


   
}


.border-right-new{
    border-right: 2px solid #fff; 
    padding-right: 10px;
}



/* Add styles for the image container and flash effect */
.image-container {
    position: relative;
    display: inline-block;
    overflow: hidden;
    border-radius: 10px; /* Optional: Add rounded corners */
}

.image-container img {
    display: block;
    width: 100%;
    height: auto;
}

.image-container .flash {
    position: absolute;
    top: -100%;
    left: -100%;
    width: 150%;
    height: 150%;
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(30deg);
    transition: all 0.4s ease-in-out;
}

.image-container:hover .flash {
    top: 100%;
    left: 100%;
}






/* border effect hover */



.courses-card {
    position: relative;
    overflow: hidden;
    border-radius: 10px; /* Optional: Add rounded corners */
    transition: transform 0.3s ease;
}

.courses-card:hover {
    transform: translateY(-5px); /* Optional: Add a slight lift effect */
}

.courses-card::before,
.courses-card::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background: #00A650; /* Border color */
    transition: all 0.4s ease;
}

.courses-card::before {
    top: 0;
    left: 0;
}

.courses-card::after {
    bottom: 0;
    right: 0;
}

.courses-card:hover::before,
.courses-card:hover::after {
    width: 100%;
}











/*  */



.navbar.fixed-top {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1030; /* Ensures the navbar stays above other elements */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Add a shadow for better visibility */
    transition: all 0.3s ease-in-out;
}



/* contact us css */

/* about us css */


/* .modal-content {
    position: relative;
  
    background-image: url("../../assets/logo/logo-footer.svg"), linear-gradient(#ffffff, #ffffff); 
  
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.8;
} */


/* css for educating  */


.typewriter {
    display: inline-block;
    font-size: 2rem;
    color: #04A54F;
    /* border-right: 2px solid #C83F2C; */
    white-space: nowrap;
    /* overflow: hidden; */
}