/* General Responsive Navbar and Carousel Adjustments */
@media (max-width: 992px) {
    /* Navbar Adjustments */
    .navbar-collapse {
        position: absolute;
        top: 100%;
        right: 0;
        width: 25%;
        background-color: rgba(45, 98, 150, 0.74);
        padding: 0.5rem;
        z-index: 1;
        box-shadow: 0vw 0.37vh 0.52vw rgba(0, 0, 0, 0.4);

    }
    #services .col-lg-5 {
        padding-left: 0vw;
        padding-right: 0vw;
    }
    .navbar-toggler {
        margin-left: auto;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
    }
    .navbar-brand .web-title {
        font-size: 4vw;
    }
    .navbar-nav {
        margin-left: auto;
        padding: 0;
    }
    .navbar-nav .nav-item {
        margin-top: 0.5vh;
        margin-bottom: 0.5vh;
        padding: 0;
    }

    /* Carousel Caption Adjustments */
    .carousel-caption {
        padding: 0.8vh 1.5vw 0.3vh;
        height: 13vh;
    }
    .carousel-caption h1 {
        font-size: 2.5vw;
    }
    .carousel-caption p {
        font-size: 1.5vw;
        line-height: 2vw;
    }
    .img-shadow {
        box-shadow: 0 0.1vh 0.1vw rgba(0, 0, 0, 0.3); 
    }

    /* Meet the Team Layout Adjustment */
    #meet-the-team .col-md-4,
    #meet-the-team .col-lg-3 {
        flex: 0 0 28%;
    }
    #services .facility-separator {
        width: 90%;
    }
    #services .img {
        width: 60vw;
        height: 60vh;
    }
    #services {
        margin-right: 4vw;
        margin-left: 4vw;
    }
    #meet-the-team h5 {
        font-size: 1.5vh;
    }
    #meet-the-team p {
        font-size: 1vh;
    }
}

/* Smaller Screens (max-width: 768px) */
@media (max-width: 768px) {
    .navbar-brand .web-title {
        font-size: 5vw;
    }
    #about h3, #about p {
        text-align: left;
    }
    #services h4, #services p {
        text-align: left;
    }
    #contactForm {
        padding: 1.5rem;
    }
    #contactForm h2 {
        font-size: 1.5rem;
    }
    #biodiesel h3, #biodiesel p {
        text-align: center;
    }
    .navbar-nav .nav-link {
        font-size: 1.5vh;
    }
    #meet-the-team .col-md-4 {
        flex: 0 0 30%;
    }
    .logo {
        width: 22vw;
    }
    #biodiesel-info .image-fluid {
        width: 85%;
    }
    #biodiesel-info .img-fluid {
        width: 75%;
    }
}

/* Extra Small Screens (max-width: 576px) */
@media (max-width: 576px) {
    /* Navbar and Carousel Adjustments */
    .carousel-caption {
        padding: 0.5vh 1vw 0.2vh;
        height: 11.5vh;
    }
    #services .services-content img {
        width: 90%;
    }
    .carousel-caption h1 {
        font-size: 3vw;
    }
    .carousel-caption p {
        font-size: 2.2vw;
        line-height: 3.5vw;
        margin-bottom: 0;
        text-align: center;
    }
    .navbar-brand .web-title {
        font-size: 5vw;
    }
    .logo {
        width: 25vw;
    }
    #services .image-border {
        height: auto;
    }
    #meet-the-team .col-sm-6 {
        flex: 0 0 100%;
    }
    #services p, #services h4 {
        margin-right: 1vw;
        margin-left: 1vw;
    }
    #about .row {
        width: 100%; /* Ensures the row takes full width */
        margin-left: 0;
    }
    .team-card img {
        width: 100%;           /* Set image width to fill the container */
        height: 15vh;         /* Fixed height for all images */
        object-fit: cover;     /* Crops image to fit the container */
        border-radius: 10px;   /* Optional: Rounds the image corners */
    }
    #biodiesel h3, #biodiesel p {
        text-align: left;
        
    }
    #biodiesel-info h4, #biodiesel-info p {
        text-align: left;
    }
    #biodiesel .img {
        width: 74%;
    }
    #what-is-biodiesel .img {
        width: 100%;
    }
}

/* Very Small Screens (max-width: 480px) */
@media (max-width: 480px) {
    .logo {
        width: 30vw;
    }
    
}

/* Small Height Screens (max-height: 584px) */
@media (max-height: 584px) {
    .carousel-caption {
        padding: 0.5vh 1vw 0.2vh;
        height: 15vh;
    }
    .carousel-caption p {
        line-height: 1.6vw;
    }
    .navbar-brand {
        height: 12vh;
    }
}

/* Very Small Height Screens (max-height: 450px) */
@media (max-height: 450px) {
    .carousel-caption {
        height: 17.5vh;
    }
    .navbar-brand .web-title {
        font-size: 3vw;
    }
    .carousel-caption p {
        line-height: 2.2vw;
        margin-bottom: 0;
    }

}

/* Square-Like Screens (max-width: 576px and max-height: 576px) */
@media (max-width: 576px) and (max-height: 576px) {
    .carousel-caption p {
        font-size: 2.3vw;
        line-height: 2.4vw;
        margin-bottom: 0;
        height: 13vh;
    }
}

/* Large Screens (min-width: 1200px) */
@media (min-width: 1200px) {
    #meet-the-team .col-lg-3 {
        flex: 0 0 25%;
    }
}


@media (max-width: 850px) {
    .content-box {
        width: clamp(45vw, 45vw, 50vw);
        left:50%;
    }
}

@media (max-width: 505px) {
    .content-box p {
        font-size: clamp(0.5rem, 1vw, 0.7rem); /* Min 0.4rem, scaling based on 1vw, max 0.7rem */
        overflow-wrap: break-word; /* Ensure text wraps and doesn't overflow */
    }
    .content-box {
        width: clamp(52vw, 52vw, 53vw);
    }
}