/*

Theme Name: American Rental Theme

Author: Zach Sykes

Description: A custom theme for American Rental.

Version: 1.0

*/



/* General Body Styling */

body {

    font-family: Arial, sans-serif;

    margin: 0;

    padding: 0;

    color: #333;

}



/* Header Styling */

header {

    background: #a62020; /* Red background for the entire header */

    color: white;

    padding: 10px 20px;

    display: flex;

    align-items: center;

    justify-content: space-between; /* Space between logo and navigation */

}



header .logo {

    color: white;

    font-size: 20px;

    font-weight: bold;

}



header .logo a {

    text-decoration: none;

    color: white; /* White text for the site name */

}



header .logo img {

    max-width: 200px;

}



/* Navigation Bar */
nav {
    background: none; /* No extra background for the navigation */
}

/* Navigation Menu */
nav .main-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-end; /* Align menu items to the right */
    gap: 20px; /* Space between menu items */
}

nav .main-menu li {
    display: inline;
}

nav .main-menu a {
    color: white; /* White text color */
    text-decoration: none; /* Remove underline */
    font-size: 16px; /* Font size */
    font-weight: bold;
    padding: 10px 15px; /* Spacing around menu items */
    border-radius: 5px; /* Slightly rounded corners */
    transition: background-color 0.3s ease; /* Smooth hover transition */
}

/* Hover and Active State for Menu Items */
nav .main-menu a:hover,
nav .main-menu a:focus,
nav .main-menu .current-menu-item a {
    background-color: #7d1a1a; /* Darker red for hover/active */
    color: #ffffff; /* Keep text white */
}



/* Dropdown Styles */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-button {
    background-color: #a62020; /* Red button */
    color: white;
    padding: 16px 16px 16px 16px;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.8s ease;
}

.dropdown-button:hover {
    background-color: #7d1a1a; /* Darker red on hover */
}

.dropdown-menu {
    display: none; /* Initially hidden */
    position: absolute;
    top: 100%; /* Position below the button */
    left: 0;
    background-color: white; /* White dropdown background */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    border-radius: 5px;
    padding: 10px 0;
    z-index: 1000;
    min-width: 200px; /* Consistent width */
}

.dropdown-menu a {
    display: block;
    color: black;
    padding: 10px 20px;
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.dropdown-menu a:hover {
    background-color: lightgray; /* Light gray highlight */
    color: black;
}

.dropdown:hover .dropdown-menu {
    display: block; /* Show dropdown when hovering */
}


/* Responsive Design for Buttons and Search Bar */

@media (max-width: 768px) {

    .button-section {

        flex-direction: column;

    }



    .dropdown {

        width: 100%;

    }



    .dropdown-button {

        width: 100%;

        margin-bottom: 10px;

    }



    .search-bar {

        margin-top: 10px;

    }

}

/* Hero Section Styling */

/* Branding Section with Image */

.branding-section {

    text-align: center;

    background-color: #fff; /* White background for the section */

    padding: 0px 0; /* Padding around the image */

    display: flex;

    justify-content: center; /* Center the image horizontally */

    align-items: center; /* Align the image vertically */

}



/* Styling for Hero Image */

.hero-image {

    width: 100%; /* Makes the image responsive and scales it with the container */

    max-width: 100%; /* Prevents the image from growing too large */

    height: auto; /* Maintains the image's aspect ratio */

    object-fit: cover; /* Ensures the image covers the space without distortion */

    max-height: 500px; /* Optional: limit the max height */

}



/* For Tablet and Mobile (Responsive) */

@media (max-width: 1024px) {

    .hero-image {

        max-height: 400px; /* Adjust the max height for tablet */

    }

}



@media (max-width: 768px) {

    .hero-image {

        max-height: 300px; /* Adjust the max height for mobile */

    }

}







/* Section Styling */

section {

    padding: 20px;

    margin: 20px;

    background: white;

}



/* Footer Styling */

footer {

    background: #082B6B;

    color: white;

    text-align: center;

    padding: 10px 0;

}



/* Responsive Design for Smaller Screens */

@media (max-width: 768px) {

    header {

        flex-direction: column;

        align-items: center;

    }



    header .logo {

        text-align: center;

    }



    nav .main-menu {

        flex-direction: column; /* Stack menu items vertically */

        gap: 10px; /* Reduce spacing between items */

    }

}



/* Branding Section Styling */

.branding-section {

    text-align: center;

    padding: 0px 0; /* Space above and below the image */

}



/* Full Width Blue Frame */

.full-width-frame {

    width: 100%; /* Makes the frame span across the full page */

    background-color: #082B6B; /* Blue background for the section */

    padding: 0px 0; /* Space around the frame */

    margin-top: 0px; /* Adds a bit of space between the content and the frame */

    box-sizing: border-box; /* Ensures padding doesn't affect width calculation */

}



/* Branding Section Styling */

.branding-section {

    text-align: center;

    padding: 0px 0; /* Space above and below the image */

}



/* Full Width Blue Frame */

.full-width-frame {

    width: 100%; /* Makes the frame span across the full page */

    background-color: #082B6B; /* Blue background for the section */

    padding: 0px 0; /* Space around the frame */

    margin-top: 0px; /* Adds a bit of space between the content and the frame */

    box-sizing: border-box; /* Ensures padding doesn't affect width calculation */

}



/* Blue Frame for the Logo */

.blue-frame {

    max-width: 100%; /* Ensures the frame stretches fully */

    margin: 0 auto; /* Centers the frame */

    display: block;

    text-align: center; /* Centers the image inside the frame */

}



/* Styling for the Logo Image inside the Blue Frame */

.logo-image {

    max-width: 100%;

    height: auto;

    display: block;

    margin: 0 auto;

    

}



/* Default Button Section Styling */
.button-section {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* Space between buttons */
    flex-wrap: wrap; /* Allow buttons to wrap to the next line */
    text-align: center;
    background-color: #082B6B; /* Keep your original background */
    padding: 20px 0;
}

/* Individual Button Styling */
.button {
    background-color: #a62020; /* Red background */
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    transition: background-color 0.3s ease;
    margin: 5px; /* Add space between buttons */
}

/* Hover Effect */
.button:hover {
    background-color: #7d1a1a; /* Darker red on hover */
}

/* Responsive Styling for Smaller Screens */
@media (max-width: 768px) {
    .button-section {
        flex-direction: column; /* Stack buttons vertically */
        align-items: center; /* Center align the buttons */
    }

    .button {
        width: 80%; /* Make buttons take most of the screen width */
        margin: 5px 0; /* Add spacing between stacked buttons */
    }
	
	
}

/* Tooltip container styling */

.tooltip-container {

    position: relative;

    display: inline-block; /* Ensures buttons stay in a row */

    vertical-align: middle; /* Aligns buttons properly */

}





/* Tooltip text styling */

.tooltip-text {

    visibility: hidden; /* Initially hide the tooltip */

    width: 300px; /* Width of the tooltip box */

    background-color: #082B6B; /* Background color of the tooltip */

    color: #fff; /* Text color */

    text-align: center; /* Center align the text */

    padding: 10px;

    border-radius: 5px;

    position: absolute;

    bottom: 120%; /* Position above the button */

    left: 50%;

    transform: translateX(-50%);

    z-index: 1; /* Ensure the tooltip appears above other elements */

    opacity: 0; /* Make it invisible initially */

    transition: opacity 0.3s ease-in-out; /* Smooth fade-in effect */

}



/* Tooltip arrow */

.tooltip-text::after {

    content: "";

    position: absolute;

    top: 100%; /* At the bottom of the tooltip */

    left: 50%;

    transform: translateX(-50%);

    border-width: 5px;

    border-style: solid;

    border-color: #555 transparent transparent transparent; /* Arrow pointing down */

}



/* Show tooltip on hover */

.tooltip-container:hover .tooltip-text {

    visibility: visible;

    opacity: 1; /* Make it visible */

}





/* Hover effect for buttons */

.button:hover {

    background-color: #7d1a1a; /* Darker red on hover */

}



/* Media Queries for Tablet and Mobile */



/* For Tablet (up to 1024px) */

@media (max-width: 1024px) {

    .button-section {

        padding: 20px 0;

    }



    .button {

        width: 80%; /* Buttons will take up 80% of the screen width */

        height: 50px; /* Smaller height on tablet */

        font-size: 14px; /* Smaller font size */

        margin: 10px auto; /* Center buttons and add margin */

    }

}



/* For Mobile (up to 768px) */

@media (max-width: 768px) {

    .button-section {

        padding: 20px 0;

    }



    .button {

        width: 90%; /* Buttons take full width of the screen */

        height: 50px; /* Adjust height for mobile */

        font-size: 14px; /* Adjust font size for mobile */

        margin: 10px auto; /* Center buttons and add margin */

    }

}

/* About Us Banner */

.about-us-banner {

    width: 100%;

    background-color: #082B6B; /* Blue color */

    padding: 30px 0;

    text-align: center;

}



.about-us-image {

    width: 100%;

    height: auto;

    object-fit: cover;

}



.about-us-text h1 {

    font-size: 48px;

    color: white;

    margin: 20px 0;

}



.about-us-text p {

    font-size: 18px;

    color: white;

    max-width: 800px;

    margin: 0 auto;

}



/* 3 Flexboxes Section */

.three-flexboxes-section {

    display: flex;

    justify-content: space-around;

    gap: 20px;

    margin-top: 40px;

    flex-wrap: wrap; /* Allow stacking on smaller screens */

}



.flexbox {

    width: 385px;

    height: 637px;

    flex-shrink: 0;

    background-color: #082B6B; /* Blue background */

    border-radius: 10px;

    padding: 10px;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    box-sizing: border-box;

}



.flexbox img {

    max-width: 100%;

    height: auto;

    border-radius: 10px;

    margin-bottom: 20px;

}



.flexbox p {

    font-size: 18px;

    color: white;

    font-weight: bold;

}



/* Responsive Design */

@media (max-width: 1024px) {

    .three-flexboxes-section {

        flex-direction: column;

        gap: 20px;

    }



    .flexbox {

        width: 100%;

        height: auto; /* Let height adjust with content */

    }

}



@media (max-width: 768px) {

    .about-us-text h1 {

        font-size: 32px;

    }



    .about-us-text p {

        font-size: 16px;

    }



    .flexbox p {

        font-size: 16px;

    }

}

/* General Body Styling */

body {

    font-family: Arial, sans-serif;

    margin: 0;

    padding: 0;

    color: #333;

}



/* Employee Website Banner */

.employee-website-banner-frame {

    background-color: #a62020; /* red banner */

    padding: 10px; /* Padding around the frame */

    border-radius: 0px; /* Rounded corners for the frame */

    margin-bottom: 10px; /* Space below the frame */

}



/* Employee Website Banner Styling */

.employee-website-banner {

    background-color: #a62020; /* red banner */

    display: flex; /* Flexbox to center the text */

    justify-content: center; /* Horizontally center the content */

    align-items: center; /* Vertically center the content */

    padding: 20px 10px; /* Add padding for top and bottom */

    border-radius: 10px; /* Rounded corners for the banner */

    text-align: center; /* Center the text */

}



.employee-website-banner .employee-website-text {

    color: white; /* White text color */

    max-width: 80%; /* Adjust this to fit text on smaller screens */

}



.employee-website-banner .employee-website-text h1 {

    font-size: 20px; /* Large font size for the heading */

    margin: 0; /* Remove default margin */

}



.employee-website-banner .employee-website-text p {

    font-size: 15px; /* Slightly smaller font size for the description */

    line-height: 1.5; /* Better spacing for the text */

    margin-top: 10px; /* Space above the paragraph */

}



/* Responsive adjustments for tablets and mobile */

@media (max-width: 1024px) {

    .employee-website-banner {

        padding: 40px 20px;

    }



    .employee-website-banner .employee-website-text h1 {

        font-size: 30px; /* Slightly smaller heading for tablets */

    }



    .employee-website-banner .employee-website-text p {

        font-size: 16px; /* Smaller font for paragraph */

    }

}



@media (max-width: 768px) {

    .employee-website-banner {

        padding: 30px 20px;

    }



    .employee-website-banner .employee-website-text h1 {

        font-size: 24px; /* Smaller heading for mobile */

    }



    .employee-website-banner .employee-website-text p {

        font-size: 14px; /* Adjust text size for mobile */

    }

}

/* Container for the Header */

.header-container {

    text-align: center; /* Centers the text horizontally */

    margin-bottom: 20px; /* Adds space below the header */

}



/* Header Styling */

.center-header {

    font-size: 32px; /* Adjust the size of the header */

    color: #082B6B; /* Blue color to match your theme */

    font-weight: bold; /* Make the header bold */

    margin: 0; /* Remove default margin */

}



/* General Button Styles */

.employee-website-buttons .button {

    display: inline-block; /* Makes it behave like a button */

    background-color: #a62020; /* Red background for consistency */

    border-radius: 25px; /* Rounded corners */

    padding: 15px 30px; /* Padding to give it the same button size */

    text-align: center;

    width: 200px; /* Same width for all buttons */

    height: 50px; /* Same height for all buttons */

    margin: 10px; /* Space between buttons */

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Drop shadow */

}



/* Styling for the Links inside the Buttons */

.employee-website-buttons .button a {

    color: white; /* White text color */

    text-decoration: none; /* Remove underline from the link */

    font-weight: bold; /* Bold text for emphasis */

    font-size: 20px; /* Adjust font size */

}



/* Large Button Styling */

.employee-website-buttons .large-button {

    width: 300px; /* Make the button wider */

    height: 120px; /* Make the button taller */

    font-size: 18px; /* Larger text */

    padding: 20px 40px; /* More padding for a bigger button */

    margin: 20px; /* More margin for spacing */

}

/* Styling for the Links inside the Buttons */

.employee-website-buttons .button a {

    color: white;

    text-decoration: none;

    font-weight: bold;

    font-size: 16px; /* Larger font size */

}



/* Specific styling for the large button link */

.employee-website-buttons .large-button a {

    font-size: 30px; /* Make the font size larger for the Employee Training Center button */

}





/* Hover Effect for All Buttons */

.employee-website-buttons .button:hover {

    background-color: #7d1a1a; /* Darker red on hover */

    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Darker shadow on hover */

}



.employee-website-buttons .button a:hover {

    color: white; /* Ensure text stays white on hover */

}



/* Paylocity Button Styling */

.paylocity-button {

    display: inline-block; /* Makes it behave like a button */

    background-color: white; /* Red background to match the other buttons */

    border-radius: 25px; /* Rounded corners */

    padding: 15px 30px; /* Padding to give it the same button size */

    text-align: center;

    width: 200px; /* Same width as the other buttons */

    height: 50px; /* Same height as the other buttons */

    display: flex;

    justify-content: center;

    align-items: center;

    margin: 10px; /* Space between buttons */

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Drop shadow */

}



/* Paylocity Logo Inside the Button */

.paylocity-logo {

    max-width: 100%; /* Ensures logo fits within the button width */

    height: auto; /* Maintains the aspect ratio */

    display: block;

}



/* Optional hover effect for the Paylocity button */

.paylocity-button a:hover {

    background-color: #7d1a1a; /* Darker red on hover */

    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Darker shadow on hover */

}



/* Full Width Blue Frame for Banner */

.employee-website-banner {

    background-color: #a62020; /* Dark blue background for the banner */

    text-align: center; /* Center the text */

    padding: 50px 20px; /* Add padding for top and bottom */

    border-radius: 0px; /* Rounded corners for the banner */

}



.employee-website-banner .employee-website-text {

    color: white; /* White text color */

}



.employee-website-banner .employee-website-text h1 {

    font-size: 36px; /* Large font size for the heading */

    margin: 0; /* Remove default margin */

}



.employee-website-banner .employee-website-text p {

    font-size: 18px; /* Slightly smaller font size for the description */

}



/* Section Container for Buttons */

.employee-website-section {

    margin: 20px 0;

}



.employee-website-section h2 {

    text-align: center;

    font-size: 24px;

    font-weight: bold;

    color: #082B6B; /* Dark blue color for the section heading */

}



/* Buttons Container Section */

.button-container {

    display: flex;

    flex-wrap: wrap;

    justify-content: center; /* Center the buttons */

    gap: 20px;

    margin-top: 20px;

}



/* 3 Flexboxes Section */

.three-flexboxes-section {

    display: flex;

    justify-content: space-around;

    gap: 20px;

    margin-top: 40px;

    flex-wrap: wrap; /* Allow stacking on smaller screens */

}



.flexbox {

    width: 385px;

    height: 637px;

    flex-shrink: 0;

    background-color: #082B6B; /* Blue background */

    border-radius: 0px;

    padding: 10px;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    box-sizing: border-box;

}



.flexbox img {

    max-width: 100%;

    height: auto;

    border-radius: 0px;

    margin-bottom: 20px;

}



.flexbox p {

    font-size: 18px;

    color: white;

    font-weight: bold;

}



/* Responsive Design for Buttons */

@media (max-width: 768px) {

    .button-container {

        flex-direction: column; /* Stack buttons vertically on mobile */

        gap: 15px; /* Space between buttons when stacked */

    }



    .button-container .button {

        width: 80%; /* Make buttons take up most of the screen width */

    }



    .employee-website-buttons .button {

        width: 80%;

        margin: 10px auto;

        font-size: 14px; /* Adjust font size */

    }

}



/* Paylocity Button Styling */

.paylocity-button {

    display: inline-block; /* Aligns like other buttons */

    background-color: white; /* White background */

    color: #333; /* Dark text color for readability */

    border-radius: 5px; /* Rounded corners */

    padding: 3px 10px 2px 15px; /* Padding for consistent sizing */

    text-align: center; /* Centers text/icon */

    font-weight: bold; /* Bold text */

    font-size: 14px; /* Same font size as other buttons */

    height: 40px; /* Fixed height */

    width: 140px; /* Fixed width */

    line-height: 30px; /* Centers text vertically */

    margin: 10px; /* Space between buttons */

    border: 1px solid #ccc; /* Subtle border for contrast */

    transition: background-color 0.3s ease, border-color 0.3s ease; /* Smooth hover transition */

    text-decoration: none; /* Removes underline */

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow */

}



/* Paylocity Button Hover Effect */

.paylocity-button:hover {

    background-color: #f0f0f0; /* Light gray background on hover */

    border-color: #999; /* Darker border on hover */

    color: #333; /* Text remains dark */

}



/* Paylocity Icon Inside the Button */

.paylocity-icon {

    max-width: 140px; /* Ensures icon fits within the button */

    max-height: 40px; /* Ensures icon fits within the button */

    margin-right: 0px; /* Spacing between icon and text */

    vertical-align: middle; /* Aligns icon with text */

    display: inline-block;

}



/* Dropdown Menu Styling for Paylocity Button */

.paylocity-dropdown .dropdown-menu {

    display: none; /* Hidden by default */

    position: absolute;

    background-color: #ffffff; /* White dropdown background */

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */

    border-radius: 5px; /* Rounded corners */

    padding: 10px 0;

    min-width: 200px; /* Matches button width */

    top: 100%; /* Dropdown appears below the button */

    z-index: 1000;

}



/* Show Dropdown on Hover */

.paylocity-dropdown:hover .dropdown-menu {

    display: block; /* Dropdown becomes visible */

}



/* Dropdown Menu Links */

.paylocity-dropdown .dropdown-menu a {

    display: block;

    color: #333; /* Dark text color */

    padding: 10px 20px;

    text-decoration: none;

    font-size: 14px; /* Matches other dropdown links */

    transition: background-color 0.3s ease;

}



.paylocity-dropdown .dropdown-menu a:hover {

    background-color: #f0f0f0; /* Light gray on hover */


    color: #000; /* Ensures text is dark on hover */

}

/* Wrapper Styling for the iFrame */

.store-reports-container {

    position: relative; /* Ensures proper iframe containment */

    width: 100%; /* Full width of the content box or container */

    height: 100vh; /* Height of the viewport to mimic a full web page */

    overflow: hidden; /* Prevents unnecessary scrollbars */

    background-color: #f9f9f9; /* Optional: Light background for better appearance */

    margin: 0 auto; /* Center the container horizontally if needed */

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for better visuals */

    border-radius: 10px; /* Optional: Rounded corners */

}



/* iFrame Styling */

.store-reports-iframe {

    position: absolute; /* Absolute positioning to fill the container */

    top: 0;

    left: 0;

    width: 100%; /* Full width of the container */

    height: 100%; /* Full height of the container */

    border: none; /* Removes iframe border */

    display: block; /* Ensures proper rendering */

    border-radius: 10px; /* Matches container's rounded corners */

}

/* Button Container Styling */

.button-container {

    margin: 20px 0; /* Space around the buttons */

    text-align: left; /* Align buttons to the left */

    padding: 0 20px; /* Optional: Padding for consistent alignment */

    display: flex;

    gap: 10px; /* Space between buttons */

}



/* Back Button Styling */

.back-button {

    display: inline-block;

    background-color: #a62020; /* Red background */

    color: white; /* White text */

    text-decoration: none; /* Remove underline */

    padding: 10px 20px 10px 20px; /* Button size */

    border-radius: 5px; /* Rounded corners */

    font-size: 16px; /* Text size */

    font-weight: bold; /* Bold text */

    transition: background-color 0.3s ease; /* Smooth hover effect */

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */

}





/* Find Button Styling */

.find-button {

    display: inline-block;

    background-color: #082B6B; /* Blue background */

    color: white; /* White text */

    border: none; /* Remove default border */

    padding: 10px 20px; /* Button size */

    border-radius: 5px; /* Rounded corners */

    font-size: 16px; /* Text size */

    font-weight: bold; /* Bold text */

    cursor: pointer; /* Pointer cursor for interactivity */

    transition: background-color 0.3s ease;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */

}



/* Find Button Hover Effect */

.find-button:hover {

    background-color: #0056b3; /* Darker blue on hover */

}





/* Furniture Dropdown Styling */
.furniture-dropdown {
    position: relative;
    display: inline-block;
    margin: 1px 10px 8px 10px; /* Ensures it has spacing like the other buttons */
}

.furniture-dropdown-toggle {
    display: block;
    background-color: #a62020;
    color: white;
    text-decoration: none;
    padding: 15px 30px 38px 30px; /* Adjust padding */
    font-size: 18px;
    font-weight: bold; /* Corrected font property */
    border-radius: 25px;
    cursor: pointer;
    text-align: center;
    width: 200px;
    height: 40px; /* Ensure consistent height */
    transition: background-color 0.3s ease;
}

.parts-container {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    gap: 20px; /* Add spacing between buttons */
}


.furniture-dropdown-toggle:hover {
    background-color: #7d1a1a; /* Darker red on hover */
}

.furniture-dropdown-menu {
    display: none; /* Hidden by default */
    position: absolute;
    top: 100%; /* Position below the toggle */
    left: 0;
    background-color: white; /* White background */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    border-radius: 5px;
    padding: 10px 0;
    z-index: 1000;
    min-width: 200px; /* Consistent width */
    list-style: none; /* Remove bullet points */
    margin: 0; /* Remove default margin */
}

.furniture-dropdown-menu li {
    padding: 0; /* Remove padding from list item */
}

.furniture-dropdown-menu a {
    display: block;
    color: black; /* Dark text */
    padding: 10px 20px;
    text-decoration: none; /* Remove underline */
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.furniture-dropdown-menu a:hover {
    background-color: lightgray; /* Highlight on hover */
    color: black;
}

/* Show Dropdown on Hover */
.furniture-dropdown:hover .furniture-dropdown-menu {
    display: block; /* Display dropdown on hover */
}

/* Manufacturer Drop Down */
/* Button Dropdown Container */
.button-dropdown {
    position: relative;
    display: inline-block;
    margin: 10px;
    text-align: center;
}

/* Dropdown Toggle Button Styling */
.button-dropdown-toggle {
    background-color: #a62020; /* Match the button background */
    color: white;
    text-decoration: none;
    padding: 30px 20px 30px 20px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: bold;
    display: inline-block;
    width: 200px;
    text-align: center;
    transition: background-color 0.3s ease;
}

.button-dropdown-toggle:hover {
    background-color: #7d1a1a; /* Darker red on hover */
}

/* Dropdown Menu */
.button-dropdown-menu {
    display: none; /* Hidden by default */
    position: absolute;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 10px 0;
    z-index: 1000;
    min-width: 200px;
    list-style: none;
    margin: 0;
    text-align: left;
}

/* Dropdown Menu Items */
.button-dropdown-menu li {
    padding: 0;
}

.button-dropdown-menu a {
    display: block;
    color: black;
    padding: 10px 20px;
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.button-dropdown-menu a:hover {
    background-color: lightgray;
    color: black;
}

/* Show Dropdown on Hover */
.button-dropdown:hover .button-dropdown-menu {
    display: block;
}

.company-directory h1 {
    text-align: center;
    margin-bottom: 20px;
}

.company-directory-table {
    width: 100%;
    border-collapse: collapse;
}

.company-directory-table th, .company-directory-table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
}

.company-directory-table th {
    background-color: #f1f1f1;
}

.company-directory-table tr:nth-child(even) {
    background-color: #f9f9f9;
}