.div2 {
    top: 50px;
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    width: 100%;
    height: auto;
    position: relative;
    padding-left: 146px;
}


#imgbe {
    width: 100%;
    height: auto; 
}

#imgtop {
    position: absolute;
}

#imgbottom {
    position: absolute;
}

.brochure {
    width: 100%;
    height: 46%;
    bottom: 58px;
    font-size: 26px;
    z-index: 3;
    position: relative;
    display: flex;
}

    .brochure #idbrochure9s {
        border: groove;
        left: 0px;
        bottom: 2px;
        color: white;
    }

    .brochure #idenquiry {
        color: white;
        bottom: 2px;
        border: groove;
    }

.boxtextBE {
    width: 500px;
    height: 200px;
    position: absolute;
    top: 334px;
    right: -44%;
}

    .boxtextBE .head1 {
        font-size: 40px;
        font-weight: 700;
    }

    .boxtextBE .head2 {
        font-size: 25px;
        font-weight: 700;
    }

    .boxtextBE .head3 {
        font-size: 12px;
        font-weight: 700
    }


#brochuredownload_b6 {
    margin-top: 50px;
}

brochuredownloadcenter_b6 {
    align-items: center;
}

.b6logodown {
    padding-left: 123px;
    height: 233px;
    z-index: auto;
    margin-top: 56px;
}




/* Media query for large screens (Desktop) */
@media (min-width: 992px) {
    .div2 {
        width: 1200px; /* Set a fixed width for larger screens */

    }

    #imgtop {
        left: 1200px;
        top: 0px;
    }

    #imgbottom {
        left: 1200px;
        bottom: 0px;
    }

    .boxtextBE {
        width: 500px;
        height: 200px;
        position: absolute;
        top: 334px;
        right: -44%;
    }

        .boxtextBE .head1 {
            font-size: 40px;
            font-weight: 700;
        }

        .boxtextBE .head2 {
            font-size: 25px;
            font-weight: 700;
        }

        .boxtextBE .head3 {
            font-size: 12px;
            font-weight: 700
        }
}

/* Media query for medium screens (Tablets) */
@media (max-width: 991px) and (min-width: 768px) {
    .div2 {
        width: 90%; /* Adjust width for tablets */
    }

    #imgtop {
        width: 150px;
        height: 100px;
        left: 50%;
        top: 20px;
    }

    #imgbottom {
        width: 150px;
        height: 100px;
        left: 50%;
        bottom: 20px;
    }

    .boxtextBE {
        width: 997px;
        height: 193px;
        position: absolute;
        top: 256px;
        right: -49%;
    }

        .boxtextBE .head1 {
            font-size: 28px;
            font-weight: 700;
        }

        .boxtextBE .head2 {
            font-size: 20px;
            font-weight: 700;
        }

        .boxtextBE .head3 {
            font-size: 12px;
            font-weight: 700
        }
}


/* Media query for small screens (Mobile) */
@media (max-width: 767px) {
    .div2 {
        width: 100%; /* Full width for small screens */
        padding-left: 22px;
    }

    #imgbe {
        width: 100%;
        height: 237px;
    }


    #imgtop {
        width: 177px;
        height: 129px;
        left: 3%;
        bottom: -55%;
    }

    #imgbottom {
        width: 150px;
        height: 120px;
        left: 56%;
        bottom: -120px;
    }

    .boxtextBE {
        width: 468px;
        height: 65px;
        position: absolute;
        top: 10px;
        left: 9%;
    }


        .boxtextBE .head1 {
            font-size: 24px;
            font-weight: 700;
        }

        .boxtextBE .head2 {
            font-size: 20px;
            font-weight: 700;
        }

        .boxtextBE .head3 {
            font-size: 10px;
            font-weight: 700
        }

    #footercontainer {
        margin-top: 250px;
    }
}





/* Media query for small screens (Mobile) */
@media (max-width: 320px) {
    .div2 {
        top: 50px;
        display: flex;
        flex-direction: column;
        row-gap: 20px;
        width: 100%;
        height: auto;
        position: relative;
        padding-left: 10px;
    }

    #imgbe {
        width: 316px;
        height: 218px;
    }

    #imgtop {
        width: 133px;
        height: 91px;
        left: 7%;
        top: 234px;
    }

    #imgbottom {
        width: 126px;
        height: 88px;
        left: 66%;
        bottom: -97px;
    }

    .boxtextBE {
        width: 310px;
        height: 195px;
        position: absolute;
        right: 56%;
        text-align: justify;
        font-size: 5px;
        color: black;
    }


        .boxtextBE .head1 {
            font-size: 24px;
            font-weight: 700;
        }

        .boxtextBE .head2 {
            font-size: 20px;
            font-weight: 700;
        }

        .boxtextBE .head3 {
            font-size: 11px;
            font-weight: 700
        }

    #footercontainer {
        margin-top: 250px;
    }

    .b6logodown {
        padding-left: 70px;
        height: 233px;
        z-index: auto;
        margin-top: 56px;
    }

    #brochuredownload_b6 {
        margin-top: 106px;
    }

    #brochuredownloadcenter_b6 a {
        align-items: center;
    }

}




/* Main container for the links */
#displayinfo19s {
    background-color: #000000;
    display: grid;
    position: relative;
    top: 47px;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Auto-fill grid with flexible column widths */
    gap: 20px; /* Space between the grid items */
    padding: 20px;
}

    /* Style for the links */
    #displayinfo19s a {
        color: white;
        text-decoration: none;
        border: medium;
        border: ridge;
        padding: 10px;
        background-color: #000000;
        text-align: center; /* Center the text */
        transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effect */
    }

        /* Hover effect on the links */
        #displayinfo19s a:hover {
            color: #ccc;
            background-color: #444; /* Darken background on hover */
        }

/* Media Query for mobile screens */
@media (max-width: 768px) {
    #displayinfo19s {
        grid-template-columns: 1fr; /* Stack items in a single column on mobile */
    }

        #displayinfo19s a {
            font-size: 14px; /* Smaller font size on mobile */
            padding: 8px; /* Adjust padding for mobile */
        }
}

/* Media Query for larger screens (tablets) */
@media (max-width: 1024px) {
    #displayinfo19s {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); /* Adjust grid for tablets */
    }
}


#dispdetails9s {
    display: block;
    margin-top: 98px;
}


/* Container that holds the images */
#divmodelviews_xev9s {
    display: flex;
    overflow: hidden;
    width: 100%;
    background-color: #211f1f;
    position: relative;
}

/* Each image wrapper */
.divimgcolor {
    flex: 0 0 auto;
    width: 33.33%; /* Show 3 images on desktop */
    height: auto;
    padding: 5px;
    position: relative; /* To position the textcar inside */
}

    .divimgcolor img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover; /* Maintain aspect ratio without stretching */
    }

/* Buttons stay fixed within the divmodelviews */
.carousel-btnbe6 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
    font-size: 30px;
}

.prevbe6 {
    left: 10px;
}

.nextbe6 {
    right: 10px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .divimgcolor {
        width: 100%; /* Show 1 image per view on mobile */
    }

    /* Text style for mobile */
    .textcar {
        position: absolute;
        bottom: 3px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        text-align: center;
        color: white;
        font-size: 15px;
    }

        .textcar h3 {
            color: black !important;
        }

    /* Buttons will still be shown on mobile */
    .carousel-btnbe6 {
        display: block;
    }
}

/* This will ensure the container of the images is scrollable horizontally */
.carousel-containerbe6 {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    width: 100%;
}



#heading9s, #text9s {
    opacity: 0; /* Elements are invisible initially */
    transform: translateY(30px); /* Initially offset the elements down */
    transition: opacity 1s ease-out, transform 1s ease-out; /* Transition for opacity and sliding */
    line-height:1;
}

/* Add the fade-in class to trigger the animations */
.fadeIn {
    opacity: 1; /* Fade in the element */
    transform: translateY(0); /* Slide up to normal position */
}

/* Optional: Delay the text's fade-in for smooth staggered effect */
#text9s {
    transition-delay: 0.5s; /* Delay the text fade-in to appear after the heading */
}



.image-container_9s {
    width: 100%;
    height: 100%;
    margin-bottom: 15px;
    position: relative;
}


.image-container_9s img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumbs_images {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 15px;
}

.thumb_smallimages {
    width: 150px;
    height: 100px;
    background-size: cover;
    background-position: center;
    border: 2px solid #ddd;
    cursor: pointer;
}

.thumb:hover {
    border-color: #333;
}


.bottom_logoxuv9e {
    position: absolute;
    bottom: 0px;
    left: 5%;
    transform: translateX(-50%);
    max-width: 200px;
    width: 100%;
    display: flex;
    justify-content: center;
}

    .bottom_logoxuv9e img {
        width: auto;
        max-width: 100%;
        height: auto;
    }

.brochure_xev9s {
    position: absolute;
    bottom: 0px;
    right: 0px;
}






@media (max-width: 600px) {
    .thumb_smallimages {
        width: 100px;
        height: 70px;
    }


    .bottom_logoxuv9e {
        bottom: 10px; /* Adjust bottom spacing */
        left: 20%; /* Center the logo horizontally */
        transform: translateX(-50%); /* Keep it centered */
        max-width: 150px; /* Smaller max-width for the logo */
        width: 100%; /* Ensure it takes up full width */
    }

        .bottom_logoxuv9e img {
            max-width: 80%; /* Make the logo smaller on mobile */
            height: auto; /* Maintain aspect ratio */
        }
}

@media (max-width: 400px) {
    .thumb_smallimages {
        width: 80px;
        height: 60px;
    }


    .bottom_logoxuv9e {
        bottom: 5px; /* Adjust bottom distance even more */
        max-width: 120px; /* Further reduce max-width */
    }

        .bottom_logoxuv9e img {
            max-width: 70%; /* Further reduce logo size */
        }
}








/* Container that holds the images */
#divmodelviews_xev9s {
    display: flex;
    overflow: hidden;
    width: 100%;
    background-color: #211f1f;
    position: relative;
}

/* Each image wrapper */
.divimgcolor {
    flex: 0 0 auto;
    width: 33.33%; /* Show 3 images on desktop */
    height: auto;
    padding: 5px;
    position: relative; /* To position the textcar inside */
}

    .divimgcolor img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover; /* Maintain aspect ratio without stretching */
    }

/* Buttons stay fixed within the divmodelviews */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
    font-size: 30px;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .divimgcolor {
        width: 100%; /* Show 1 image per view on mobile */
    }

    /* Text style for mobile */
    .textcar {
        position: absolute;
        bottom: 3px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        text-align: center;
        color: white;
        font-size: 15px;
    }

        .textcar h3 {
            color: black !important;
        }

    /* Buttons will still be shown on mobile */
    .carousel-btn {
        display: block;
    }
}

/* This will ensure the container of the images is scrollable horizontally */
.carousel-container9s {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    width: 100%;
}