@media (max-width: 768px) {
    .navbar .nav-links {
        display: none;
    }

    .navbar .container .logo img {
        width: 70%;
        margin: 0px auto;
    }

    .navbar .menu-icon {
        display: block;
        color: #ffcc00;
    }
    .about, .courses{
        padding: 6rem 0;
    }

    .carousel{
        align-items: center;
    }
    .testimonials {
        padding: 2rem 0;
    }
    .testimonial-slider{
        height: 80vh;
    }

    .hero h1 {
        font-size: 2rem;
    }
    .container-faculty{
        flex-direction: column;
    }
    .expertises{
        flex-direction: column;
    }
    .footer .container{
        flex-direction: column;
        gap: 10px;
        padding: 10px;
    }
    .div-card{
        width: 80%;
        height: auto;
    }
    .heading .links {
display: flex;
gap: 10px;
justify-content: center;
align-items: center;
margin: 5%;
flex-wrap: wrap;
    }
    .address-link{
        margin: 0px;
        font-size: 16px;
    }
}


@media (max-width: 600px) {
    .modal-content {
        width: 95%;
        padding: 15px;
    }

    h2 {
        font-size: 18px;
    }

    .submit-button {
        padding: 12px;
        font-size: 16px;
    }
    .carousel-item {
        width: 80% !important; 
    }
    .div-card{
    width: 90%;
    }
    .testimonial-slider marquee{
        height: 30vh;
    }

    .address-link{
        margin: 0px;
        font-size: 16px;
    }

    .modal-content{
        margin-top: 150px;
        width: 60% !important;

    }
}

@media (max-width: 900px) {
    .modal-content {
        width: 45%;
    }
    .about .container-about{
        flex-direction: column;
    }
    .container-about img{
    width: 90%;
    height: 30vh;

    }
    .carousel {
        flex-direction: column;
        gap: 30px;
    }
    .carousel-item {
        width: 50%;
    }
    .modal-content{
        margin-top: 150px;

    }
}

/* @media (max-width: 1100px) {
    .carousel-item {
        width: 30%;
    }
} */