body {
            font-family: 'Roboto', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #E5EBF2;
        }

        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 20px;
            background-color: #FFFFFF;
        }

        .logo {
            display: flex;
            align-items: center;
            margin: 0;
            padding: 0;
        }

        .logo img {
            max-width: 300px;
            margin-right: 0;
        }

        .contact-info {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }
 .menu a {
    font-family: 'Roboto', sans-serif;  /* Specifying the font family */
    font-weight: 800;  /* Regular weight, not bold */
    font-size: 22px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.3s;
    display: block;
    margin: 0;
}
.menu {
    list-style-type: none;
    display: flex;
    margin: 0;
    padding: 0;
}




.menu li {
    position: relative;
    text-align: center;
    margin-right: 40px; /* horizontal spacing between items */
    padding: 0;
    display: inline-block; /* changed from inline */
}


/* Commenting out or removing specific font changes on hover */
/*
.menu li:not(:last-child) {
    margin-right: 40px;
}

.menu li:first-child a:hover {
    font-family: 'Times New Roman', serif;
}

.menu li:nth-child(2) a:hover {
    font-family: 'Verdana', sans-serif;
}

.menu li:nth-child(3) a:hover {
    font-family: 'Georgia', serif;
}
*/


/* Adjusting dropdown font size for better visibility */
.dropdown a {
    font-size: 22px; /* Adjust as needed */
}

.menu a:hover {
    background-color: #FFA500;
    color: #FFF;
    border-radius: 0px;
        }

.dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;  /* Align it to the left edge of parent li */
    background-color: white;
    border: none;
    list-style-type: none;
    z-index: 10;
    margin: 0;
    padding: 0;
    width: 225px;
}

.menu li:hover .dropdown {
    display: block;
}


.dropdown li {
    display: block;
    padding: 0;
    margin: 0;
    background-color: blue; /* For visualization */
    border: none;
    line-height: 1; /* Set a specific line height */
}

.dropdown li:hover {
    background-color: #f5f5f5;
}
.dropdown a {
    padding: 5px 20px;
    display: block;
    background-color: white;
    line-height: .9;
    margin: 0;
    text-align: left;  /* Ensure text inside each dropdown item is left-aligned */
}

.menu .dropdown li a {
    font-size: 14px !important;
}



.contact-info {
    font-size: 18px;
    text-align: left;
    margin-top: 10px;
}

.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Aligns items to the top of the container */
    margin-bottom: 20px; /* Adds some space before the footer */
}

.text-section {
    flex: 1;
    padding-right: 20px; 
     max-width: 600px;  /* Adjust as needed */
    margin: 0 auto;    /* Centers the text if it's narrower than the co
}

.image-section {
   flex-basis: 300px; 
   
}

.feature {
    margin-top: 20px; /* Adds some space between features */
}

.slideshow {
    width: 100%;
    height: 650px;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    border: 0px ;  /* For visualization */
    background-color: transparent;
}

.slideshow-image {
    width: 100%;
    height: 100%;
    position: relative;
}

.slideshow-image img {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 100%;  /* All images start off the right side */
    transition: left 1s ease;
}

#slideshow-img1 {
    left: 0;  /* Only the first image is visible initially */
}


#slideshow-img2 {
    z-index: 2;
}

#slideshow-img3 {
    z-index: 1;
}
.content-container {
    max-width: 1200px; /* Adjust as needed */
    margin: 0 auto;    /* This will center the content on the page */
     margin-left: 220px;  /* width of the sidebar + some spacing */
    padding: 0 20px;   /* Adds some space on the sides for smaller screens */
}


/* Sidebar styles */
.sidebar {
    position: fixed;
    top: 100px;
    left: 0;
    width: 250px;
    height: 10vh;
    background-color: transparent;
    color: #333;
    padding: 20px;
}

/* Styling for the unordered list within the sidebar */
.sidebar ul {
    list-style-type: none;
    padding: 0;
}

/* Styling for the list items within the sidebar */
.sidebar li {
    margin-bottom: 10px;
}

/* Sidebar link styles */
.sidebar ul li a {
    text-decoration: none;
    color: blue;
    background-color: #aDD8E6;
    padding: 20px 60px;
    font-size: 25px;
    border-radius: 0px;
    display: inline-block;
    width: 150px;
    margin-bottom: 10px;
    transition: background-color 0.3s, color 0.3s;
}

/* Hover effect for the links (buttons) within the sidebar */
.sidebar ul li a:hover {
    background-color: orange;
    color: white;
}


  
  
  
/* Table Base Styles */
.specifications-table {
    width: auto;
    border-collapse: collapse;
    font-size: 1em;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);
    margin: 20px auto;
}


.specifications-table th {
    font-size: 1.2em;  /* Adjust this value as desired */
    font-weight: bold;  /* Makes the font bolder */
    text-transform: uppercase;  /* Converts the text to uppercase */
    color: #ffffff;  /* Assuming the background is blue as in the previous style */
    background-color: #007BFF;  /* Blue background */
    ...
}

.specifications-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #ddd;  /* Light border for the cells */
}


.specifications-table thead tr {
    background-color: #007BFF;
    color: #ffffff;
    text-align: left;
}

/* Hover Effect for Rows */
.specifications-table tbody tr:hover {
    background-color: #f5f5f5;
}

/* Differentiating each row with alternating colors */
.specifications-table tbody tr:nth-of-type(even) {
    background-color: #f2f2f2;
}        

.specifications-table ul {
    list-style-type: none;  /* Remove bullet points */
    padding-left: 0;        /* Remove default padding */
    margin-top: 0;          /* Remove default margin */
}

.specifications-table li {
    margin-bottom: 8px;     /* Add some space between list items */
     font-size: 1em; /* Adjust this value as needed */
 

}
.tables-container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
     max-width: 800px; /* Adjust the maximum width as needed */
    margin: 0 auto; /* To center the table horizontally */
}


.tables-container table {
    margin: 0 20px;  /* Reduced margins */
    padding: 0;
    border-spacing: 0;
    width: auto;    /* Ensure table width is auto */

}


.tables-container table:first-child {
    margin-right: 40px;
}

.centered-table {
    border-collapse: collapse; /* Ensures borders are combined into a single border */
    width: 100%; /* Optional: set to desired width */
}

.centered-table td, .centered-table th {
    text-align: center;
    padding: 8px;
    border: 1px solid black; /* This adds the black border around each cell */
}

.centered-table tr:nth-child(even) {
    background-color: #f2f2f2;
}

.centered-table th {
    background-color: #4CAF50; /* Optional: Set to desired color for header row */
    color: white;
}


.section-container .img-container:last-child {
    margin-right: 0;
}


.img-container {
    display: inline-block;
    width: calc(20% - 16px); /* this assumes a gap of 16px between images */
    text-align: center;
    vertical-align: top;
}

.content-container2 {
    padding: 10px; /* Adjust overall padding as needed */
}

.content-container2 .img-container {
    padding: 2px; /* This will add more space between the images. Adjust as needed. */
}

.content-container2 img {
    margin: 5px; /* This will add space around each image. Adjust as needed. */
}

.container3 {
    margin-bottom: 50px; /* Adjusts the space between the two containers */
    clear: both; /* Ensures no floating elements affect the layout */
}


.container3 {
    display: flex;
    justify-content: space-between; 
    align-items: center;
}

.img-container3 {
    flex: 1;
    text-align: center;
    margin: 0 20px; 
}

.contact-sections {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.contact-section {
    width: 30%; /* This gives each section roughly equal width with some space in between */
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid #ccc; /* Optional border for each section */
}

h2 {
    margin-top: 0;
}

p {
    margin-bottom: 0;
}





    .image-list {
        list-style-type: none; /* Remove bullet points */
        display: flex;
        flex-wrap: wrap;
        justify-content: center; /* Center images horizontally */
        padding: 0;
    }

    .image-list li {
        flex-basis: calc(33.33% - 10px); /* Three images per row with spacing */
        margin: 0;
        padding: 0;
        margin-bottom: 10px; /* Spacing between rows */
        text-align: center; /* Center images within list items */
    }

    .image-list img {
        width: 125px; /* Set image width to 100px */
        max-width: 100%;
    }
    
    
    
    
    
    
    .custom-image-list {
    list-style-type: none; /* Remove bullet points */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Distribute space between images horizontally */
    padding: 0;
    margin: 0;
}

.custom-image-list li {
    flex-basis: calc(50% - 10px); /* Two images per row with spacing */
    margin: 0;
    padding: 0;
    margin-bottom: 10px; /* Spacing between rows */
    text-align: center; /* Center images and titles within list items */
}

.custom-image-list img {
    width: 100%; /* Ensure images take up full width of their containers */
    max-width: 100%;
}

.custom-image-list p {
    margin: 5px 0; /* Add spacing around titles */
    font-weight: bold; /* Make titles bold if desired */
}

/* Mobile Devices */
@media (max-width: 480px) {
    .header {
        flex-direction: column;
        align-items: flex-start;
    }

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

    .menu {
        display: block;
    }

    .menu a {
        font-size: 18px; /* Smaller font size for mobile */
    }

    .contact-info {
        align-items: center;
        margin-top: 20px;
    }
}

/* Tablets */
@media (min-width: 481px) and (max-width: 768px) {
    .menu a {
        font-size: 20px; /* Slightly larger font size for tablets */
    }

    /* Adjustments to other elements as needed */
}

/* Desktops and larger tablets */
@media (min-width: 769px) {
    /* Styles for larger screens can go here,
    this can include the default styles outside of any media query if they're intended for desktop-first design */
}

.img-container {
    box-sizing: border-box; /* Make sure padding and borders are included in the total width and height */
    padding: 5px; /* Add some space around the images */
    width: 100%; /* Full width on small screens */
    margin-bottom: 10px; /* Add space between the images */
}

.img-container img {
    max-width: 100%; /* Ensure the image is fully responsive */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove extra space below the image */
}

/* Media query for tablets and desktops */
@media (min-width: 481px) {
    .img-container {
        width: 50%; /* Show two images per row on medium screens and larger */
        float: left; /* Float containers to the left */
    }
}

@media (min-width: 769px) {
    .img-container {
        width: 33.33%; /* Show three images per row on large screens */
    }
}

/* Clearfix for floated .img-container elements */
.section-container::after {
    content: "";
    clear: both;
    display: table;
}
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 10px;
}

.download-btn {
    padding: 8px 14px;
    background-color: #007BFF;
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    border-radius: 4px;
    margin-left: 12px;
    white-space: nowrap;
}

.download-btn:hover {
    background-color: #0056b3;
}