@media (max-width: 767px) {
    /* body {
        overflow-x: hidden;
    } */

    .aos-init:not(.aos-animate) {
        position: fixed;
    }

    .dropdown-menu.show {
        display: block;
        visibility: visible;
        opacity: 1;
    }

    .py-5 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .banner-section .py-5 {
        padding-top: 1.5rem !important;
    }

    .heading-small {
        font-size: 1.2rem;
        letter-spacing: 1.5px;
    }

    .heading-large {
        font-size: 2rem;
        letter-spacing: 3px;
    }

    .line-with-circles span {
        width: 200px;
    }

    .line-with-circles::before,
    .line-with-circles::after {
        width: 8px;
        height: 8px;
    }

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

    .first-navbar {
        display: none !important;
    }

    .second-navbar .container-fluid {
        padding: 0 !important;
    }

    .navbar-brand img {
        /* height: 2.5rem !important; */
        width: 100% !important;
        /* content: url('../images/HMI_logo_only.png'); */
    }

    .navbar-toggler {
        margin-left: auto;
    }

    .collapse .navbar-nav .nav-link {
        padding: 0.5rem 0;
    }

    .navbar-nav {
        margin-top: 1rem;
    }

    .navbar-hidden {
        transform: translateY(-100%);
        transition: transform 0.3s ease-in-out;
    }

    .navbar-collapse {
        flex-direction: column;
    }

    .messenger-icon {
        display: none !important;
    }

    .messenger-window {
        display: none !important;
    }

    .messenger-window.show {
        display: none !important;
    }

    .banner-section .content.padding-format {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
    }

    .banner-element {
        display: none !important;
    }

    .intro {
        height: auto;
        background-color: #F0F7FF;
        text-align: left;
    }

    .intro .container {
        margin-top: 0.5rem;
    }

    .intro h1 {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .intro p {
        font-size: 1.3rem;
        font-weight: 400;
        margin-bottom: 30px;
    }

    .intro .element-design {
        margin-top: 4rem;
    }

    .intro .element-container img {
        width: 80% !important;
        height: auto;
    }

    .vector-girl {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .intro .h-line {
        /* width: 36% !important; */
        margin: 0 10% 0 10%;
    }

    .idea {
        top: -10%;
        left: 45%;
        transform: translateX(-50%);
    }

    .spark-1 {
        top: 10%;
        left: 18%;
    }

    .edge-computing {
        top: 55%;
        left: 10%;
    }

    .binary {
        top: 10%;
        right: 16%;
    }

    .spark-2 {
        top: 55%;
        right: 11%;
    }

    .map-container {
        position: relative;
        width: 100%;
        height: auto;
        margin: auto !important;
    }

    .title-text {
        font-size: 25px;
        font-weight: 600;
        color: #21A7E0;
        margin-bottom: 0;
        padding-left: 1rem;
    }

    .sm-vector:first-of-type,
    .sm-vector:last-of-type {
        display: none;
    }

    .career .container,
    .testimonial .container {
        padding-top: 0.5rem !important;
    }

    .career .video-file {
        min-height: 15rem !important;
    }

    .career .accordion {
        margin-top: 1rem;
    }

    /* Student Diversity */
    .student-diversity .ms-3 {
        margin-left: 0rem !important;
    }

    /* Student Testimonial Section */
    button .testimonial-frame {
        display: none !important;
    }

    /* Academic-program page */
    .program-intro .ps-5 {
        padding-left: 0.5rem !important;
    }

    .program-intro .pe-5 {
        padding-right: 0.5rem !important;
    }

    .detail-nav .nav button {
        width: auto;
        font-weight: 500;
        font-size: 16px;
        /* border-radius: 0; */
    }

    .academic-calendar .p-5 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .academic-calendar .calendar-text {
        padding: 0 2rem 0 2rem !important;
    }

    .calendar-item .semester {
        margin-bottom: 0.5rem;
    }

    .calendar-item .intake-2 {
        margin-top: 1rem;
    }

    .time-table .container {
        padding: 1rem 2rem 2rem 1rem !important;
    }

    .academic-fee .first-column {
        border-right: 0;
        border-bottom: 1px #21A7E0 dashed;
        padding-bottom: 0.5rem;
    }

    .academic-fee .container.p-5 {
        padding: 1.5rem 1rem 1.5rem 1rem !important;
    }

    .academic-fee .course-price {
        padding-right: 0.5rem;
    }

    .academic-fee .second-column.ps-3 {
        padding-left: 0 !important;
        margin-top: 1.5rem;
    }

    .study-plan .yearly-course {
        padding: 0;
    }

    .yearly-course .course-description {
        padding-left: 1.5rem;
    }

    .download-pdf .download-button {
        width: 100%;
    }

    .yearly-course .year-1 {
        padding-right: 0;
        padding-left: 0;
    }

    .yearly-course .year-2 {
        padding-left: 0;
        padding-right: 0;
        padding-top: 1.5rem;
    }


    /* Student Life Page */

    .odd-section .first-row .second-column .first-pic {
        padding-top: 1rem;
        margin-right: 0;
    }

    .odd-section .first-row .second-column .second-pic {
        padding-top: 1rem;
    }

    .odd-section .second-row .first-pic,
    .odd-section .second-row .second-pic {
        padding-bottom: 2rem;
    }

    .even-section .container {
        padding: 1rem;
    }

    .even-section .first-row .first-pic {
        width: 50%;
        height: auto;
        padding: 1rem 0.5rem 0.5rem 2rem;
    }

    .even-section .first-row .second-pic {
        width: 50%;
        height: auto;
        padding: 1rem 2rem 0.5rem 0.5rem;
        margin-left: 0;
        margin-top: 0;
    }

    .even-section .second-row .pic {
        width: 50%;
        height: auto;
        padding: 0 0.5rem 0.5rem 2rem;
    }

    .second-row .ms-5 {
        margin-left: 0 !important;
    }

    .even-section .second-row .title-text {
        font-size: 14px;
        font-weight: 600;
        color: #21A7E0;
        margin-bottom: 0;
        margin-left: 0;
    }

    .trip-section .first-column .first-pic {
        width: 100%;
        height: auto;
    }

    .trip-section .first-column .second-pic {
        width: 100%;
        height: 45%;
    }

    .trip-section .second-column {
        margin-top: 0;
    }

    .trip-section .third-column {
        display: flex !important;
        justify-content: center;
        align-items: center;
    }

    .trip-section .third-column .first-pic {
        width: 100%;
        height: 100%;
        padding-right: 0.5rem;
        object-fit: cover;
    }

    .trip-section .third-column .second-pic {
        width: 100%;
        height: 100%;
        margin-top: 0 !important;
        padding-left: 1rem;
        object-fit: cover;
    }

    /* Career Opportunities Page */
    .job-section .job-select {
        width: 47%;
    }

    .job-section .job-board .job-details .list {
        padding-left: 0.5rem;
    }

    .job-table th:nth-child(1),
    .job-table td:nth-child(1) {
        display: none;
    }

    .job-table th:nth-child(3),
    .job-table td:nth-child(3) {
        display: none;
    }

    .testimonial-card {
        background-color: #f0f8ff00;
        border-radius: 15px;
        padding: 0.5rem;
        margin: 0.5rem;
        background-color: white;
        border-radius: 5px;
        box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.5);
    }


    .footer .quicklinks {
        padding-left: 0 !important;
    }

    .footer .addresses {
        padding-left: 0.5rem !important;
    }
}

@media (max-width: 480px) {
    .heading-small {
        font-size: 1rem;
        letter-spacing: 1px;
    }

    .heading-large {
        font-size: 1.5rem;
        letter-spacing: 2px;
    }

    .line-with-circles span {
        width: 150px;
    }

    .line-with-circles::before,
    .line-with-circles::after {
        width: 6px;
        height: 6px;
    }

    .contact-info {
        font-size: 0.8rem;
    }
}

/* Styles for tablet */
@media (min-width: 768px) and (max-width: 992px) {
    .first-navbar {
        display: none !important;
    }

    .container {
        max-width: 100%;
        padding: 1rem 3rem !important;
    }

    .title-text {
        font-size: 25px;
        font-weight: 600;
        color: #21A7E0;
        margin-bottom: 0;
        padding-left: 1rem;
    }

    .messenger-icon {
        bottom: 2.5rem;
        right: 5rem;
    }

    .messenger-window {
        bottom: 1rem !important;
        right: 9rem !important;
    }

    .messenger-body {
        padding: 0 1rem !important;
    }

    /* Home Page */
    .intro {
        height: 100%;
    }

    .intro .container {
        margin-top: 1.5rem;
    }

    .intro h1 {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .intro p {
        font-size: 1.3rem;
        font-weight: 400;
        margin-bottom: 30px;
    }

    .intro .element-design {
        display: flex;
        align-items: center;
    }

    .intro .element-container img {
        width: 80% !important;
        height: auto;
    }

    .vector-girl {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Diversity Section */
    .map-container {
        width: 25rem;
        height: 30rem;
    }

    /* Student Life Page */
    .even-section .first-row .first-pic {
        width: 20rem;
        height: 237px;
        padding: 0;
    }

    .even-section .first-row .second-pic {
        width: 21rem;
        height: 215.45px;
        padding: 0;
        margin-left: 2rem;
        margin-top: 1.5rem;
    }

    .even-section .second-row .pic {
        width: 23rem;
        height: 281px;
        padding: 0;
    }

    .trip-section .first-pic,
    .trip-section .second-pic {
        width: 100% !important;
        height: 10rem !important;
    }
}