/* ----------------------------Navbar CSS-------------------------------- */
.navbar-toggler {
    border: none;
}

.navbar-toggler-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path stroke="rgba(0, 0, 0, 0.5)" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg>');
}

.navbar-toggler.collapsed .navbar-toggler-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path stroke="rgba(0, 0, 0, 0.5)" stroke-width="2" d="M7 7l16 16M7 23L23 7"/></svg>');
}



@media (max-width: 480px) {
    .navbar {
        font-size: 14px;
    }

    .btn-sign {
        font-size: 12px;
    }
}


@media (min-width: 481px) and (max-width: 767px) {
    .navbar {
        font-size: 16px;
    }

    .btn-sign {
        font-size: 14px;
    }
}


@media (min-width: 768px) and (max-width: 1024px) {
    .navbar {
        font-size: 18px;
    }
}


@media (min-width: 1025px) and (max-width: 1440px) {
    .navbar {
        font-size: 20px;
    }
}



/* ----------------------------Navbar CSS End-------------------------------- */

/* ----------------------------Index CSS-------------------------------- */


@media (max-width: 768px) {
    .hero-section {
        background-image: url('images/index-bg-5.png');
       height: auto;
    }
    /* .hero-section {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding-top: 50px; 
    }

    .hero-section .container {
        height: auto;
    } */

}
@media (max-width: 768px) {
    .hero-section .btn-outline-secondary {
        display: block;
        width: 100%;
        text-align:left;
        margin-top: 10px;
        
    }
}


@media (max-width: 900px) {
    .hero-section {
        background-size: cover; 
        background-position: center;
        height: auto;
        padding-top: 20px; 
        padding-bottom: 20px;
    }

    .hero-section .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    
    .hero-section .row {
        align-items: flex-start !important; 
        height: auto !important; 
    }

    .hero-section h1 {
        font-size: 2.2rem; 
        line-height: 1.3;
        margin-bottom: 0.5rem;
    }

    .hero-section h2 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }

    .hero-section p {
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 1rem;
    }

    .btn {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
        margin-top: 1rem;
    }

    .icon-bg-index {
        width: 24px;
        height: 24px;
        font-size: 0.8rem;
        margin-right: 5px;
    }

 

    .text-start {
        text-align: center; 
}


@media (min-width: 768px) and (max-width: 1200px) {
    .hero-section {
        background-image: url('images/index-bg-2.png');
        height: auto;
    }
}
@media (max-width: 768px) {
    .hero-section .btn-outline-secondary {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: fit-content;
        padding-left: 0 !important; 
        margin-left: 0 !important; 
    }

    
    .hero-section .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}



@media (max-width: 767px) {
    .stats-section h3 {
        font-size: 2.9rem !important;
    }

    .stats-section p {
        font-size: 1.5rem !important;
    }
}


@media (min-width: 768px) and (max-width: 1024px) {
    .stats-section h3 {
        font-size: 4rem;
    }

    .stats-section p {
        font-size: 4rem;
    }
}


@media (min-width: 1025px) and (max-width: 1440px) {
    .stats-section h3 {
        font-size: 4rem;
    }

    .stats-section p {
        font-size: 4rem;
    }
}


@media (min-width: 1441px) and (max-width: 1900px) {
    .stats-section h3 {
        font-size: 4rem;
    }

    .stats-section p {
        font-size: 4rem;
    }
}


@media screen and (max-width: 768px) {
    .main-content {
        margin: 15px;
        padding: 15px;
    }

    .contact-info,
    .contact-form {
        flex: 0 0 100%;
        max-width: 100%;
        border-radius: 8px;
    }

    .contact-info {
        min-height: 300px;
        margin-bottom: 20px;
        border-radius: 8px 8px 0 0;
    }

    .contact-form {
        border-radius: 0 0 8px 8px;
    }

   
    .contact-form .row {
        margin: 0;
    }

    .contact-form .col-md-6 {
        padding: 0;
        margin-bottom: 15px;
    }

   
    .contact-form input,
    .contact-form textarea {
        margin-bottom: 20px;
    }

   
    .btn-primary {
        width: 100%;
        padding: 12px;
    }

   
    .social-icons {
        margin-top: 15px;
    }

    .social-icons a {
        margin: 0 15px 0 0;
    }
}


@media (max-width: 480px) {
    .stats-section{
        height: auto;
    }
    .stat-number {
        font-size: 2.5rem;
    }
    
    .stat-number span {
        font-size: 1.8rem;
    }

    .stats-section p {
        font-size: 1rem;
    }
}


@media (min-width: 481px) and (max-width: 767px) {
    .stats-section{
        height: auto;
    }
    .stat-number {
        font-size: 3rem;
    }
    
    .stat-number span {
        font-size: 2rem;
    }

    .stats-section p {
        font-size: 1.1rem;
    }
}


@media (min-width: 768px) and (max-width: 1024px) {
    .stat-number {
        font-size: 3.5rem;
    }
    
    .stat-number span {
        font-size: 2.3rem;
    }

    .stats-section p {
        font-size: 1.2rem;
    }
}


@media (min-width: 1025px) and (max-width: 1440px) {
    .stat-number {
        font-size: 4rem;
    }
    
    .stat-number span {
        font-size: 2.5rem;
    }

    .stats-section p {
        font-size: 1.25rem;
    }
}


@media screen and (max-width: 480px) {
    .contact-header h2 {
        font-size: 1.5rem;
    }

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

    .contact-form label {
        font-size: 0.85rem;
    }
}


@media (max-width: 480px) {
    .mentorship-section .bg-small {
        display: none;
    }
    
    .mentorship-section .bg-big {
        display: none;
    }
    .mentorship-section {
       
        padding: 40px 15px;
        height: auto;
    }

    .mentorship-content {
        margin-top: 0;
        color: #333;
        text-align: center;
    }

    .mentorship-content h2 {
        font-size: 1.8rem;
    }

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

    .mentorship-list li {
        padding: 12px 15px;
        font-size: 1rem;
        min-height: 90px;
        border-radius: 20px; 
        transition: all 0.3s ease;
    }

    .mentorship-list li:hover {
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); 
        transform: translateY(-3px);
    }

    .mentorship-content h2 {
        font-size: 1.5rem;
        display: block; 
    }
    
}


@media (max-width: 767px) {
    .mentorship-section .bg-small {
        display: none; 
    }
    
    .mentorship-section .bg-big {
        display: none; 
    }
    .mentorship-section {
        
        height: auto;
    }
    .mentorship-list li span.number {
       
       
        color: #686868;
       
        
       
    }
    
    .mentorship-list li span.text {
       
        color: #686868;
       
    }
}



@media (min-width: 481px) and (max-width: 767px) {
    

    .mentorship-section {
        padding: 50px 20px;
        height: auto;
    }

    .mentorship-content {
        margin-top: 0;
        color: #333;
        text-align: center;
    }

    .mentorship-content h2 {
        font-size: 2rem;
    }

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

    .mentorship-list li {
        padding: 14px 18px;
        font-size: 1.1rem;
        min-height: 90px;
        border-radius: 20px; 
        transition: all 0.3s ease;
    }

    .mentorship-list li:hover {
        box-shadow: 0px 5px 12px rgba(0, 0, 0, 0.25); 
        transform: translateY(-4px);
    }

    .mentorship-content h2 {
        font-size: 1.8rem; 
        display: block; 
    }
    .mentorship-list li span.number {
       
       
        color: #686868;
        font-size: 2.20rem;
        
       
    }
    
    .mentorship-list li span.text {
        flex-grow: 1;
       
        text-align:left;
       
        color: #686868;
       font-size: 1.370rem;
       padding-left: 50px;
    }
    
}
@media (min-width: 768px) and (max-width: 1440px) {
    .mentorship-section .bg-big {
        display: none !important;
    }

    .mentorship-section .bg-small {
        display: block !important;
    }
}



@media (max-width: 768px) {
    /* .college-semesters .row {
        display: flex;
        flex-direction: column;
        gap: 20px;
    } */

    .college-semesters .card {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 15px;
        border-radius: 10px;
        background-color: #ffffff00;
        border: none;
    }

    .college-semesters .card img {
        width: 40%;
        height: auto;
        border-radius: 10px;
        object-fit: cover;
    }

    .college-semesters .card-body {
        width: 60%;
        padding: 10px;
        text-align: left;
        background-color: #ffffff00;
    }

    .college-semesters .card-body h5 {
        font-size: 1rem;
        margin-bottom: 8px;
    }

    .college-semesters .card-body p {
       display: none;
    }

    .college-semesters .btn-read-more {
        position: relative;
        bottom: 0;
        left: 0;
        transform: none;
        display: block;
        width: 100%;
        text-align: center;
        padding: 6px 10px;
        font-size: 0.9rem;
    }
   
}


@media (min-width: 768px) and (max-width: 866px) {
    .btn-read-more, .btn-all-batches {
        padding: 5px 14px;
        font-size: 0.85rem;
    }
    .card h5 {
        font-size: 0.95rem;
    }
    .card p {
        font-size: 0.75rem;
    }
    .card img {
        height: 160px;
    }
}



@media (min-width: 867px) and (max-width: 1024px) {
    .college-semesters h4 {
        font-size: 1.4rem;
    }
    .college-semesters p {
        font-size: 1.2rem;
    }
    .card h5 {
        font-size: 1rem;
    }
    .card p {
        font-size: 0.8rem;
    }
    .btn-read-more, .btn-all-batches {
        padding: 6px 16px;
        font-size: 0.9rem;
    }
    .card img {
        height: 180px;
    }
}


@media (min-width: 1025px) and (max-width: 1440px) {
    .college-semesters h4 {
        font-size: 1.6rem;
    }
    .college-semesters p {
        font-size: 1.3rem;
    }
    .card h5 {
        font-size: 1.1rem;
    }
    .card p {
        font-size: 0.85rem;
    }
    .btn-read-more, .btn-all-batches {
        padding: 7px 18px;
        font-size: 1rem;
    }
    .card img {
        height: 190px;
    }
}


@media (min-width: 1441px) and (max-width: 1800px) {
    .college-semesters h4 {
        font-size: 1.7rem;
    }
    .college-semesters p {
        font-size: 1.4rem;
    }
    .card h5 {
        font-size: 1.15rem;
    }
    .card p {
        font-size: 0.9rem;
    }
    .btn-read-more, .btn-all-batches {
        padding: 8px 20px;
        font-size: 1.05rem;
    }
    .card img {
        height: 200px;
    }
}


@media (max-width: 480px) {
    .college-admission h2 {
        font-size: 1.5rem;
    }
    .college-admission p.fs-1 {
        font-size: 1rem;
    }
    .college-admission p.fs-5 {
        font-size: 0.75rem;
    }
    .card2 img.card-img-top {
        height: 150px;
    }
   
    .card-text2 {
        font-size: 0.75rem;
    }
    .btn-hover {
        padding: 6px 15px;
        font-size: 0.75rem;
    }
    .btn-all-courses {
        font-size: 0.85rem;
        padding: 8px 20px;
    }
}


@media (min-width: 481px) and (max-width: 767px) {
    .card2{
        width: 50%;
    }
    .college-admission h2 {
        font-size: 1.75rem;
    }
    .college-admission p.fs-1 {
        font-size: 1.15rem;
    }
    .college-admission p.fs-5 {
        font-size: 0.85rem;
    }
    .card2 img.card-img-top {
        height: 170px;
    }
   
    .card-text2 {
        font-size: 0.85rem;
    }
    .btn-hover {
        padding: 8px 18px;
        font-size: 0.85rem;
    }
    .btn-all-courses {
        font-size: 0.9rem;
        padding: 10px 24px;
    }
}


@media (min-width: 768px) and (max-width: 1024px) {
    .college-admission h2 {
        font-size: 2rem;
    }
    .college-admission p.fs-1 {
        font-size: 1.25rem;
    }
    .college-admission p.fs-5 {
        font-size: 0.9rem;
    }
    .card2 img.card-img-top {
        height: 180px;
    }
    
    .card-text2 {
        font-size: 0.9rem;
    }
    .btn-hover {
        padding: 8px 20px;
        font-size: 0.9rem;
    }
    .btn-all-courses {
        font-size: 1rem;
        padding: 10px 26px;
    }
}

@media (min-width: 1025px) and (max-width: 1440px) {
    .college-admission h2 {
        font-size: 2.25rem;
    }
    .college-admission p.fs-1 {
        font-size: 1.35rem;
    }
    .college-admission p.fs-5 {
        font-size: 1rem;
    }
    .card2 img.card-img-top {
        height: 190px;
    }
    
    .card-text2 {
        font-size: 0.95rem;
    }
    .btn-hover {
        padding: 9px 22px;
        font-size: 1rem;
    }
    .btn-all-courses {
        font-size: 1.05rem;
        padding: 12px 28px;
    }
}


@media (min-width: 1441px) and (max-width: 1800px) {
    .college-admission h2 {
        font-size: 2.5rem;
    }
    .college-admission p.fs-1 {
        font-size: 1.5rem;
    }
    .college-admission p.fs-5 {
        font-size: 1.1rem;
    }
    .card2 img.card-img-top {
        height: 200px;
    }
   
    .card-text2 {
        font-size: 1rem;
    }
    .btn-hover {
        padding: 10px 24px;
        font-size: 1.05rem;
    }
    .btn-all-courses {
        font-size: 1.1rem;
        padding: 14px 30px;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .row {
        justify-content: center; 
    }
    .col-md-4 {
        width: 80%; 
    }
    .card2 {
        width: 100%; 
    }
}

@media (max-width: 768px) {
    .college-admission h2,
    .college-admission p.fs-1,
    .college-admission p.fs-5,
    .card-title2,
    .card-text2 {
        text-align: center; 
    }
}


@media (max-width: 1024px) {
    .section-title {
        font-size: 1.8rem;
    }
    .review-text {
        font-size: 0.95rem;
        max-height: 180px;
    }
    .orange-circle {
        width: 40px;
        height: 40px;
    }
    .reviewer-dp img {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 768px) {
    .review-box {
        padding: 20px;
    
    }
   
    .review-text {
        max-height: 120px;
        font-size: 0.85rem;
        text-align: center;
    }
    .reviewer-name,
    .reviewer-location {
        font-size: 0.8rem;
    }
    .left-circle
     {
        bottom: 110px;
    left: 5px;
    }
    .right-circle {
        top: 40px;
        right: 5px;
    }
}




/* ----------------------------Index CSS End-------------------------------- */

/* ----------------------------About CSS-------------------------------- */

@media (max-width: 480px) {
    
    .about-hero h1 {
        font-size: 1rem;
       
        line-height: 1.4;
       
        text-align: left;
       
        word-wrap: break-word;
       
        width: 100%;
        margin-top: 20px;
       
    }

    .about-hero .lead {
        font-size: 1rem;
       
        line-height: 1.4;
       
        text-align: left;
       
        word-wrap: break-word;
       
        max-width: 280px;
       
    }

    .about-hero .btn-primary {
        font-size: 0.875rem;
       
        padding: 8px 20px;
       
        width: auto;
       
        text-align: left;
       
    }
}


@media (min-width: 481px) and (max-width: 1440px) {
    .about-hero h1 {
        font-size: 1rem;
       
        line-height: 1.4;
       
        text-align: left;
        max-width: 350px;
        margin-top: 20px;
    }

    .about-hero .lead {
        font-size: 1rem;
       
        line-height: 1.4;
        text-align: left;
        max-width: 300px;
       
    }

    .about-hero .btn-primary {
        font-size: 1rem;
       
        padding: 10px 10 px;
       
        width: auto;
       
        text-align: left;
       
    }
}



@media (min-width: 768px) and (max-width: 1440px) {
    .about-hero {
        height: auto;
        padding: 50px 30px;
        
    }

    .about-hero h1 {
        font-size: 1rem;
        text-align: left;
        margin-top: 10px;
    }

    .about-hero .lead {
        font-size: 1rem;
        text-align: left;
    }
}


@media (min-width: 1025px) and (max-width: 1440px) {
    .about-hero {
        padding: 60px 50px;
        height: 70vh;
        
    }

    .about-hero h1 {
        font-size: 1rem;
        text-align: left;
        margin-top: 20px;
    }

    .about-hero .lead {
        font-size: 1rem;
        text-align: left;
    }
}


@media (min-width: 1441px) and (max-width: 1900px) {
    .about-hero {
        height: 70vh;
        padding: 70px 80px;
       
    }

    .about-hero h1 {
        font-size: 2rem;
        text-align: left;
        margin-top: 40px;
    }

    .about-hero .lead {
        font-size: 2rem;
        text-align: left;
    }
}


@media (max-width: 480px) {
    .about-hero {
        height: 70vh;
    }
}


@media (min-width: 481px) and (max-width: 767px) {
    .about-hero {
        margin-top: 50px;
    }
}


@media (min-width: 768px) and (max-width: 1024px) {
    .about-hero {
        margin-top: 60px;
    }
}


@media (min-width: 1025px) and (max-width: 1440px) {
    .about-hero {
        margin-top: 70px;
    }
}


@media (min-width: 1441px) {
    .about-hero {
        margin-top: 80px;
    }
}



@media (max-width: 768px) {
    .row {
        display: flex;
        flex-wrap: wrap;
    }

    .header-sectioncourse {
        order: 1;
       
        width: 100%;
       
    }

    .col-md-5 {
        order: 2;
       
        width: 100%;
       
        margin-bottom: 20px;
       
    }

    .col-md-7 {
        order: 3;
       
        width: 100%;
       
    }

    .course-includes-section {
        order: 4;
       
    }
}


@media (max-width: 480px) {

    .about-section .bg-main,
    .about-section .bg-alt {
        display: none;
    }

    .about-section {
        min-height: 50vh;
       
        justify-content: flex-start;
       

    }

    .about-section .container {
        margin-top: 0;
       
        padding: 0;
       
    }
}


@media (min-width: 481px) and (max-width: 767px) {

    .about-section .bg-main,
    .about-section .bg-alt {
        display: none;
    }

    .about-section {
        min-height: 60vh;
       
        justify-content: flex-start;
       
        padding: 30px 15px;
       
    }

    .about-section .container {
        margin-top: 0;
       
        padding: 0;
       
    }

}


@media (min-width: 768px) and (max-width: 1024px) {

    .about-section h2 {
        transform: translateX(5%);
       
    }

    .about-section p {
        transform: translateX(5%);
       
    }
}


@media (min-width: 1025px) and (max-width: 1440px) {

    .about-section h2 {
        transform: translateX(10%);
       
    }

    .about-section p {
        transform: translateX(10%);
       
    }
}


@media (min-width: 1441px) {

    .about-section h2 {
        transform: translateX(0);
       
    }

    .about-section p {
        transform: translateX(0);
       
    }
}


@media (min-width: 768px) and (max-width: 1440px) {
    .about-section .bg-main {
        display: none;
       
    }

    .about-section .bg-alt {
        display: block;
       
    }
  
}
@media (min-width: 1200px) and (max-width: 1600px){
.about-section{
        margin-top: 40px;
}
}

@media (max-width: 767px) {
    .certifications-section h2 {
        font-size: 1.5rem;
    }

    .certifications-section p {
        font-size: 1rem;
    }

    .cert-card {
        padding: 15px;
        width: 100%;
       
        max-width: 100%;
    }

    .cert-icon img {
        width: 100px;
        height: 100px;
    }

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

@media (min-width: 768px) and (max-width: 991px) {
    .certifications-section h2 {
        font-size: 1.75rem;
    }

    .cert-card {
        padding: 18px;
    }

    .cert-icon img {
        width: 110px;
        height: 110px;
    }
}


@media (min-width: 516px) and (max-width: 767px) {
    .cert-card {
        max-width: 100%;
        width: 100%;
        padding: 15px;
    }
}


@media (max-width: 1200px) {
    .video-slider {
        width: 90%;
        gap: 15px;
    }

    .video-card {
        min-width: calc(60% - 10px);
       
    }
}

@media (max-width: 992px) {
    .testimonials-section h2 {
        font-size: 1.3rem;
    }

    .testimonials-section h3 {
        font-size: 1.75rem;
        margin-bottom: 30px;
    }

    .video-slider {
        width: 95%;
        gap: 10px;
    }

    .video-card {
        min-width: calc(70% - 10px);
       
    }
}

@media (max-width: 768px) {
    .testimonials-section h2 {
        font-size: 1.2rem;
    }

    .testimonials-section h3 {
        font-size: 1.5rem;
    }

    .video-slider {
        flex-direction: column;
        width: 100%;
        gap: 20px;
        overflow: visible;
       
    }

    .video-card {
        min-width: 100%;
       
    }

    .prev,
    .next {
        display: none;
       
    }
}

@media (max-width: 576px) {
    .testimonials-section {
        padding: 40px 10px;
    }

    .testimonials-section h2 {
        font-size: 1rem;
    }

    .testimonials-section h3 {
        font-size: 1.25rem;
    }

    .video-card {
        min-width: 100%;
       
        border-radius: 8px;
    }

    .video-card video {
        border-radius: 8px;
    }
}

@media (max-width: 767px) {
    .row.g-4 {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .metric-card {
        flex-direction: column;
        text-align: center;
        padding: 20px;
        width: 100%;
    }

    .metric-card img.icon {
        margin: 0 auto 10px; 
        width: 60px; 
        height: 60px;
    }

    .metric-card .metric-details {
        text-align: center;
    }
}

/* ----------------------------About CSS End-------------------------------- */

/* ----------------------------Course Individual CSS-------------------------------- */

@media (max-width: 768px) {
    .card-custom {
        margin-top: 0;
       
    }
}

@media (max-width: 1500px) {

   
    .learn-list {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: space-between;
    }

    .learn-list li {
        flex: 1 1 calc(50% - 20px);
       
        max-width: calc(50% - 20px);
        box-sizing: border-box;
    }
}



@media (max-width: 1500px) {
    .accordion-item {
        padding: 5px;
    }

   
    .row.g-4 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .accordion-button {
        font-size: 0.9rem;
    }

  


}

@media (max-width: 768px) {
    .container h3 {
        font-size: 1.2rem;
    }

    .container p {
        font-size: 0.9rem;
    }

    img[alt="Certificate"] {
        max-width: 100%;
       
    }
}

@media (max-width: 768px) {
    .course-includes-section ul {
        margin-bottom: 15px;
    }

    .course-includes-section h2 {
        font-size: 1.5rem;
    }
}


    #see-more-btn {
        display: inline-block;
    }
}

@media (max-width: 768px) {
    .row.g-4 .col-md-4 {
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    @media (max-width: 768px) {
        
        .d-flex.align-items-center.mb-3 {
            padding: 8px; 
            text-align: center; 
        }
    

        button.btn.btn-warning.d-flex {
            display: flex !important;
            justify-content: center; 
            width: 100%; 
            max-width: 250px; 
            margin: 0 auto; 
        }
    }
    
    .col-md-6.text-white {
        text-align: center;
        margin-bottom: 20px;
    }

    h4 {
        font-size: 1.4rem;
        font-weight: bold;
        margin-bottom: 15px;
    }

    p {
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    .col-md-6.text-center img {
        max-width: 80%;
        margin: 0 auto;
        display: block;
    }


   
   
     .row.g-4 .col-md-4:nth-child(n+4) {
        display: none;
    }

    
    .review-button-container {
        display: block;
        text-align: center;
    }

    .review-btn {
        font-size: 1rem;
        font-weight: bold;
        color: #007bff;
        text-decoration: underline;
        background: none;
        border: none;
        cursor: pointer;
    }

    .review-btn:hover {
        color: #0056b3;
    }
}


@media (max-width: 768px) {
    .faq-item:nth-child(n+7) {
        display: none;
    }

    #viewMoreBtn {
        display: inline-block;
    }
}


@media (min-width: 768px) {
    #viewMoreBtn {
        display: none;
    }
}

@media (max-width: 480px) {
    .learner-logo-wrapper {
        max-width: 180px; 
        height: 120px; 
    }
}


@media (min-width: 481px) and (max-width: 767px) {
    .learner-logo-wrapper {
        max-width: 220px; 
        height: 150px;
    }
}


@media (min-width: 768px) and (max-width: 1024px) {
    .learner-logo-wrapper {
        max-width: 260px; 
        height: 180px;
    }
}



/* ----------------------------Course Individual CSS End-------------------------------- */

/* ----------------------------Course CSS-------------------------------- */

@media (max-width: 440px) {
    .course-card2 {
        height: 600px;
       
        margin-bottom: 20px;
        width: 70%;
        margin-left: 50px;
    }

    .card-img2 {
        height: 100px;
       
    }

    .card-title2 {
        font-size: 1rem;
       
    }

    .card-details2 {
        font-size: 0.8rem;
       
        flex-direction: column;
       
        align-items: flex-start;
    }

    .view-more2-btn {
        width: 100%;
       
        text-align: center;
    }
}

@media (max-width: 480px) {
    .hero-sectioncourse {
        height: 200px;
        padding: 15px;
        text-align: left;
        margin-top:70px ;
    }

    .bengali-heading {
        font-size: 15px;
       
        line-height: 1.2;
        text-align: left;
    }

    .sub-heading {
        font-size: 12px;
        text-align: left;
    }

    .search input[type="text"] {
        width: 100%;
       
    }

    .search {
        width: 100%;
    }

    .course-card {
        height: auto;
        padding: 10px;
        margin-bottom: 15px;
       
    }

    .course-category-section .row>div {
        flex: 0 0 100%;
        max-width: 100%;
    }


    .sort-options {
        margin-top: 10px;
       
        text-align: center;
    }
}


@media (min-width: 481px) and (max-width: 767px) {
    .hero-sectioncourse {
        height: 200px;
        padding: 20px;
        text-align: left;
        margin-top:70px ;
    }

    .bengali-heading {
        font-size: 20px;
       
        line-height: 1.3;
        text-align: left;
    }

    .sub-heading {
        font-size: 16px;
        text-align: left;
    }

    .search {
        width: 100%;
    }

    .search input[type="text"] {
        width: 100%;
       
        margin-bottom: 1px;
       
    }

    .sort-options {
        display: block;
        margin-top: 10px;
        text-align: center;
    }

    .course-category-section .row {
        display: flex;
        flex-wrap: wrap;
       
        gap: 15px;
       
        justify-content: space-between;
       
    }

    .course-category-section .row>div {
        flex: 0 0 48%;
       
        max-width: 48%;
       
        margin-bottom: 20px;
       
        box-sizing: border-box;
       
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .hero-sectioncourse{
     margin-top: 50px ;
     height: auto;
    }
}


@media (min-width: 1025px) and (max-width: 1440px) {
     .hero-sectioncourse{
        margin-top: 50px ;
        height: auto;
     }
}


@media (min-width: 1441px) {
     .hero-sectioncourse{
        margin-top: 50px ;
        
     }
}

.course-card2 {
    height: 400px;
}

.card-img2 {
    height: 200px;
   
}

.card-title2 {
    font-size: 0.85rem;
}

.card-details2 {
    font-size: 0.85rem;
}

@media (min-width: 440px) and (max-width: 576px) {

    .web-development-section .row {
        display: flex;
        flex-wrap: wrap;
       
        justify-content: center;
       
    }

    .web-development-section .row .col-12 {
        width: 48%;
       
        margin: 1%;
       
    }

    .course-card2 {
        height: auto;
       
        margin-bottom: 20px;
       
    }

    .card-img2 {
        height: 150px;
       
    }

    .card-title2 {
        font-size: 0.29rem;
    }

    .card-details2 {
        font-size: 0.85rem;
    }
}


@media (min-width: 481px) and (max-width: 680px) {
    .hero-sectioncourse {
        min-height: 400px;
       
        background-size: cover;
       
        background-position: center center;
       
        background-repeat: no-repeat;
       
        padding: 20px;
        text-align: center;
        width: 100%;
        margin-top:40px ;
    }

    .bengali-heading {
        font-size: 22px;
        line-height: 1.3;
    }

    .sub-heading {
        font-size: 16px;
    }

    .search input[type="text"] {
        width: 100%;
        margin-bottom: 1px;
       
    }

    .search {
        width: 80%;
    }

    .sort-options {
        display: block;
        margin-top: 10px;
        text-align: center;
    }

    .course-card {
        height: auto;
        padding: 10px;
        margin-bottom: 20px;
       
    }

    .course-category-section .row>div {
        flex: 0 0 100%;
        max-width: 100%;
    }


}


@media (min-width: 681px) and (max-width: 1024px) {
    .hero-sectioncourse {
        min-height: 500px;
       
        background-size: cover;
       
        background-position: center center;
       
        background-repeat: no-repeat;
       
        padding: 30px;
        text-align: center;
        width: 100%;
        margin-top:40px ;
    }
}




@media (min-width: 768px) and (max-width: 1024px) {
    .hero-sectioncourse {
        height: 400px;
       
        padding: 30px;
        text-align: left;
        margin-top:40px ;
    }

    .bengali-heading {
        font-size: 26px;
       
        line-height: 1.4;
        text-align: left;
    }

    .sub-heading {
        font-size: 18px;
        text-align: left;
    }

    .search input[type="text"] {
        width: 100%;
       
    }

    .search {
        width: 60%;
    }

    .sort-options {
        display: inline-block;
        margin-left: 10px;
       
    }

    .course-category-section .row>div {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 20px;
       
    }

    .course-card2 {
        height: 450px;
    }

    .card-img2 {
        height: 299px;
    }

    .card-title2 {
        font-size: 1.2rem;
    }

    .card-details2 {
        font-size: 0.9rem;
    }

}


@media (max-width: 767px) {
    .section-header {
        flex-wrap: wrap;
       
        text-align: center;
       
    }

    .section-header h2 {
        margin-bottom: 10px;
       
        width: 100%;
       
    }

    .section-header .sort-by {
        width: 100%;
       
        text-align: center;
       
        margin-top: 10px;
       
    }

    .sort-by select {
        width: 90%;
       
        margin: 0 auto;
       
    }


}


@media (min-width: 1024px) and (max-width: 1500px) {
    .hero-sectioncourse {
        height: 600px;
       
        padding: 40px;
       
        text-align: left;
       
    }

    .bengali-heading {
        font-size: 32px;
       
        line-height: 1.5;
       
        text-align: left;
    }

    .sub-heading {
        font-size: 20px;
       
        text-align: left;
    }

    .search {
        width: 60%;
    }

    .search input[type="text"] {
        width: 100%;
       
        margin-bottom: 0;
       
    }

    .sort-options {
        display: inline-block;
        margin-left: 15px;
       
    }

    .course-category-section .row>div {
        flex: 0 0 33.33%;
       
        max-width: 33.33%;
        margin-bottom: 25px;
       
    }

    .course-card {
        height: auto;
       
        padding: 15px;
        margin-bottom: 30px;
       
    }

    .course-card2 {
        height: 500px;
    }

    .card-img2 {
        height: 400px;
    }

    .card-title2 {
        font-size: 1.3rem;
    }

    .card-details2 {
        font-size: 0.9rem;
    }
}

/* ----------------------------Course CSS End-------------------------------- */

/* ----------------------------Contact CSS-------------------------------- */
/* ----------------------------Contact CSS-------------------------------- */

@media screen and (min-width: 768px) and (max-width: 900px) {

    .navbar-nav .nav-item .nav-link {
        font-size: 0.9rem;
        padding: 5px 10px;
    }

    .btn-sign {
        padding: 5px 10px;
        font-size: 0.85rem;
    }

    .header h1 {
        font-size: 2rem;
        margin-top: 20px;
    }

    .text-section {
        padding: 30px 15px;
    }

    .text-section .bg-circle {
        width: 150px;
        height: 40px;
    }

    .text-section h2 {
        font-size: 1rem;
    }

    .text-section h1 {
        font-size: 1.8rem;
    }

    .text-section p {
        font-size: 0.9rem;
    }

    .main-content {
        padding: 15px;
    }

    .contact-info {
        padding: 15px;
        min-height: auto;
    }

    .contact-info h2 {
        font-size: 1.5rem;
    }

    .contact-info p {
        font-size: 0.9rem;
    }

    .contact-info .icon {
        font-size: 1rem;
        padding: 8px;
    }

    .social-icons a {
        font-size: 1rem;
        margin: 0 5px;
    }

    .contact-form {
        padding: 15px;
    }

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

    .contact-form input,
    .contact-form textarea {
        font-size: 0.9rem;
        padding: 5px;
    }

    .btn-primary {
        font-size: 0.9rem;
        padding: 8px 15px;
    }
}

/* ----------------------------Fix for Small Screens (Message Alignment)---------------------------- */

@media (max-width: 768px) {
    .contact-form {
        padding: 20px;
        text-align: left;
    }

    .contact-form label {
        display: block;
        font-size: 1rem;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .contact-form input,
    .contact-form textarea {
        width: 100% !important;
        box-sizing: border-box;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    .contact-form textarea {
        height: 150px;
        resize: vertical;
        margin-left: 0 !important;
    }

    .contact-form .row {
        margin: 0;
    }

    .contact-form .col-md-12 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .btn-primary {
        width: 100%;
        padding: 10px;
        font-size: 1rem;
        background-color: rgb(59, 69, 156);
        border: none;
        border-radius: 5px;
        color: white;
        cursor: pointer;
        text-align: center;
    }

    .btn-primary:hover {
        background-color: rgb(211, 213, 234);
    }
}

/* ----------------------------Contact CSS End-------------------------------- */


/* ----------------------------Contact CSS End-------------------------------- */

/* ----------------------------Signup OTP CSS-------------------------------- */

    @media (max-width: 768px) {
        .otp-container {
            padding: 30px;
        }

        .otp-container h1 {
            font-size: 2rem;
        }

        .otp-container p {
            font-size: 1rem;
        }

        .otp-inputs input {
            max-width: 60px;
            height: 60px;
            font-size: 1.5rem;
        }

        .btn-continue {
            font-size: 1rem;
            padding: 12px 15px;
        }
    }

/* ----------------------------Signup OTP CSS End-------------------------------- */

/* ----------------------------Footer CSS-------------------------------- */
@media (max-width: 768px) {

    .footer-section .col-lg-4 {
        text-align: center;
    }

    .footer-section .col-lg-4 img {
        height: 100px; 
        display: inline-block;
    }


    .footer-section .d-flex {
        justify-content: center !important;
    }

   
    .footer-section .row {
        text-align: left;
        display: flex;
        flex-wrap: wrap;
    }

    .footer-section .col-lg-2 {
        width: 50%; 
        padding-left: 15px;
    }


    .footer-section .col-lg-4:last-child {
        text-align: left !important;
    }

    
    .footer-line {
        border-top: 1px solid white;
        margin: 20px 0;
    }

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

  .footer-line {
    border-top: 1px solid white;
    width: 100%;
    margin: 20px 0;
}

.footer-copyright {
    text-align: center;
    color: white;
    font-size: 14px;
}
}

/* ----------------------------Footer CSS End-------------------------------- */

/*-----------------------------Testimonial CSS Start--------------------------*/

@media (max-width: 480px) {
    .center-img {
        width: 60%; 
    }
}


@media (min-width: 481px) and (max-width: 767px) {
    .center-img {
        width: 70%; 
    }
}


@media (min-width: 768px) and (max-width: 1024px) {
    .center-img {
        width: 80%; 
    }
}


@media (min-width: 1025px) and (max-width: 1440px) {
    .center-img {
        width: 90%; 
    }
}


@media (max-width: 767px) {
    .image-card {
        flex: 1 0 80%; 
    }
    
    
    .slider-btn {
        display: block !important;
        font-size: 1.5rem; 
        padding: 8px 10px;
    }
}


@media (min-width: 768px) and (max-width: 1024px) {
    .image-card {
        flex: 1 0 50%;
    }
}