@media (max-width: 575.98px) {
    .custom-col {
        flex: 0 0 33.33%;
        max-width: 33.33%;
        padding: 5px !important;
    }

    .w-70 {
        width: 100% !important;
    }

    .vcn-logo {
        width: 100% !important;
    }

    .font-xxs {
        font-size: 0.5rem;
    }

    .font-smaller {
        font-size: 0.7rem;
    }

    .font-xs {
        font-size: 0.8rem;
    }

    .font-sm {
        font-size: 1.2rem !important;
    }

    .font-md {
        font-size: 1.7rem !important;
    }

    .font-lg {
        font-size: 2.5rem;
    }

    .nav1 {
        padding-top: 5rem;
        align-items: start !important;
    }

    .banner-heading {
        font-size: 2rem !important;
    }

    .btn-dark-blue {
        padding: 10px 20px !important;
        font-size: 0.7rem !important;
    }

    .image-container {
        height: 440px !important;
    }

    .line {
        height: 5px !important;
        width: 50px !important;
    }

    .swiper-wrapper {
        display: flex;
        /* animation: scroll-left 10s linear infinite !important; */
    }

    .swiper-wrapper1 {
        display: flex;
        /* animation: scroll-right 10s linear infinite !important; */
    }


    .column-seven {
        flex: 0 0 33.33% !important;
        /* 100% / 7 = 33.33% !important */
        max-width: 33.33% !important;
        box-sizing: border-box;
        padding: 8px;
        /* Adjust padding as needed */
    }

    .bg-emergency-service {
        height: 35vh !important;
    }

    .about-us-img {
        height: 35vh !important;
    }

    .leadership {
        height: 35vh !important;
    }

    .bg-dev-project {
        height: 35vh !important;
    }

    /* .bg-dev-stroke {
        height: 35vh !important;
    } */

    .initiative-img {
        height: 35vh !important;
    }

    .bg-volunteer-program {

        height: 35vh !important;
    }

    .res-border {
        border-bottom: 0.5px solid #25242057 !important;
    }
}

@media (min-width: 576px) and (max-width: 769px) {
    .custom-col {
        flex: 0 0 20% !important;
        max-width: 20% !important;
    }

    .vcn-logo {
        width: 50% !important;
    }

    .custom-col {
        flex: 0 0 25%;
        max-width: 25%;
        padding: 5px !important;
    }

    .nav1 {
        padding-top: 5rem;
        align-items: start !important;
    }

    .w-70 {
        width: 100% !important;
    }

    .w-75 {
        width: 50% !important;
    }

    .swiper-wrapper {
        display: flex;
        /* animation: scroll-left 20s linear infinite !important; */
    }

    .swiper-wrapper1 {
        display: flex;
        /* animation: scroll-right 20s linear infinite !important; */
    }


    .column-seven {
        flex: 0 0 14.28% !important;
        /* 100% / 7 = 14.28% !important */
        max-width: 14.28% !important;
        box-sizing: border-box;
        padding: 8px;
        /* Adjust padding as needed */
    }

    .res-border {
        border-bottom: 0.5px solid #25242057 !important;
    }
}

@media (min-width: 770px) and (max-width: 991.98px) {
    .custom-col {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .custom-col {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .swiper-wrapper {
        display: flex;
        /* animation: scroll-left 30s linear infinite !important; */
    }

    .swiper-wrapper1 {
        display: flex;
        /* animation: scroll-right 30s linear infinite !important; */
    }
}

@media (min-width: 1200px) and (max-width:1400px) {
    .custom-col {
        flex: 0 0 14.2857%;
        max-width: 14.2857%;
    }


}

@media (min-width:1401px) {

    .font-14 {
        font-size: 16px !important;
    }

    .font-15 {
        font-size: 17px !important;
    }

    .font-16 {
        font-size: 18px !important;
    }

    .font-17 {
        font-size: 19px !important;
    }

    .font-18 {
        font-size: 20px !important;
    }

    .font-19 {
        font-size: 21px !important;
    }

    .font-20 {
        font-size: 22px !important;
    }

    .font-21 {
        font-size: 23px !important;
    }

    .font-22 {
        font-size: 24px !important;
    }

    .font-23 {
        font-size: 25px !important;
    }

    .font-24 {
        font-size: 26px !important;
    }

    .font-25 {
        font-size: 27px !important;
    }

    .font-26 {
        font-size: 28px !important;
    }

    .font-27 {
        font-size: 29px !important;
    }

    .font-xs {
        font-size: 1.1rem !important;
    }

    .w-60 {
        width: 40% !important;
    }

    .fs-5 {
        font-size: 1.4rem !important;
    }

    .fs-6 {
        font-size: 1.2rem !important;
    }

    .fs-7 {
        font-size: 1rem !important;
    }

    .banner-heading {
        font-size: 4rem !important;
    }

    .btn-donate {
        font-size: 0.9rem !important;
    }

    .btn-read {

        font-size: 16px;

    }

    .btn-dark-blue {
        padding: 10px 20px !important;
        font-size: 1rem !important;
    }

}

/* Default position for larger screens */
#prev-btn,
#next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
}

#prev-btn {
    left: -50px;
}

#next-btn {
    right: -50px;
}

/* Small devices (e.g., max width 767px) */
@media (max-width: 767px) {

    /* Center the buttons horizontally in one line */
    #timeline-buttons {
        display: flex;
        width: 100% !important;
        justify-content: center;
        /* Align buttons in the center */
        margin-top: 20px !important;
    }

    #prev-btn,
    #next-btn {
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        transform: none !important;
        width: 40px !important;
        z-index: 1 !important;
        display: inline-block;
    }

    .timeline-img {
        height: 165px !important;
    }

    #prev-btn {
        margin-right: 10px !important;
        /* Add spacing between the buttons */
    }

    .timeline-btn {
        font-size: 24px !important;
    }

    #navigation-buttons {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        position: relative;
        padding: 0 20px;
        margin-top: 20px;
    }

    /* Spacing between the previous and next buttons */
    .prev_btn {
        margin-right: 10px;
    }

    .h-100 {
        height: auto !important;
    }
}