/* Additional styles for screens from 280px to 319px */
@media (min-width: 280px) and (max-width: 320px) {
    .hero-section {
        min-height: 45vh;
    }

    .hero-section .content {
        left: 1rem;
        top: 6vh;
    }

    .video video {
        height: 45vh;
    }

    body>section.hero-section>div.content>h2 {
        font-size: 20px;
    }

    .navbar {
        position: relative;
        width: 100%;
    }


    .navbar .nav-item a {
        color: rgb(0, 0, 0) !important;
    }

    .page-heading {
        background-color: #000;
        height: 30vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
}

/* Additional styles for screens from 321px to 360px */
@media (min-width: 321px) and (max-width: 360px) {
    .hero-section {
        min-height: 33vh;
    }

    body>section.hero-section>div.content>h2 {
        font-size: 20px;
    }

    .video video {
        height: 33vh;
    }

    .navbar {
        position: relative;
        width: 100%;
    }

    .hero-section .content {
        left: 1rem;
        top: 8vh;
    }


    .navbar .nav-item a {
        color: rgb(0, 0, 0) !important;
    }

    .page-heading {
        background-color: #000;
        height: 30vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    

}


/* Common styles for screens from 320px to 576px */
@media (min-width: 361px) and (max-width: 576px) {
    .hero-section {
        min-height: 33vh;
    }

    .hero-section .content {
        left: 1rem;
        top: 8vh;
    }

    .video video {
        height: 33vh;
    }

    .navbar {
        position: relative;
        width: 100%;
    }

    body>section.hero-section>div.content>h2 {
        font-size: 20px;
    }

    .navbar .nav-item a {
        color: rgb(0, 0, 0) !important;
    }
    .page-heading {
        background-color: #000;
        height: 30vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
}

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

    /* Styles for small screens (e.g., tablets in portrait mode) */
    .navbar {
        position: relative;
        width: 100%;
    }

    .hero-section .content {
        left: 1rem;
        top: 28vh;
    }
}


@media (min-width: 769px) and (max-width: 1024px) {
    /* Styles for medium screens (e.g., tablets in landscape mode, smaller desktop screens) */
}


@media (min-width: 1025px) and (max-width: 1200px) {
    /* Styles for large screens (e.g., larger desktop screens, laptops) */
}


@media (min-width: 1201px) {
    /* Styles for extra large screens (e.g., large desktop monitors) */
}