/* Apply custom gutter spacing to all row elements */
.carousel {
    margin-bottom: 0rem !important; /* Set vertical gutters to 0 */
}

/* Intro Section */
#intro {
    position: fixed; /* Make the intro section overlay the entire viewport */
    top: 0;
    left: 0;
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    background-image: url('../img/Banner.png'); /* Replace with your image path */
    background-size: cover; /* Ensure the image covers the entire section */
    background-position: center; /* Center the background image */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    display: flex; /* Flexbox for centering content */
    align-items: center; /* Vertically center content */
    justify-content: center; /* Horizontally center content */
    text-align: center;
    z-index: 1000; /* Ensure it sits above all other content */
    transition: opacity 1s ease-in-out; /* Fade-out transition */
}

#intro h3 {
    color: var(--text-color); /* Text color */
    margin-bottom: 1rem; /* Space below the heading */
}

/* Landing Page */
#landing-page {
    opacity: 1; /* Ensure the landing page is visible by default */
    transition: opacity 1s ease-in-out; /* Fade-in transition */
}

/* Heading */
#heading-banner {
    border-top: var(--border-width) solid var(--border-color); /* Black border at the top */
    border-bottom: var(--border-width) solid var(--border-color); /* Black border at the bottom */
    padding-top: var(--border-size) !important; /* Add margin to the bottom */
}

#heading-inner {
    background-color: var(--background-color); /* Light background color */
    border-top: var(--border-width) solid var(--border-color); /* Black border at the top */
    padding: 3rem !important;
}

/* Quote Section */
#quote {
    background-color: var(--background-color);
    color: var(--text-color);
    border-top: var(--border-width) solid var(--border-color); /* Black border at the top */
    border-bottom: var(--border-width) solid var(--border-color); /* Black border at the bottom */
    padding-top: 1rem;
    padding-bottom: 0.5rem;
    margin-top: var(--border-size) !important; /* Add margin to the top */
    margin-bottom: var(--border-size) !important; /* Add margin to the bottom */
}

/* About Us Section */
#about {
    background-color: var(--empty-color);
    height: 100vh; /* Height of screen to act as a full page section */
    display: flex;
    margin-bottom: var(--border-size) !important;
}

.about-text {
    background-color: var(--background-color);
    color: var(--text-color);
    padding: 2rem;
    display: flex;
    flex-direction: column; /* Stack content vertically */
    align-items: flex-start; /* Align text to the top */
    justify-content: center; /* Center vertically within the column */
    margin-right: var(--border-size) !important; /* Add padding to the right */
    border-right: var(--border-width) solid var(--border-color); /* Black line on the right */
    border-top: var(--border-width) solid var(--border-color); 
    border-bottom: var(--border-width) solid var(--border-color);
}

.about-image {
    position: relative; /* Make the container a positioned element */
    width: 100%; /* Ensure the container spans the full width */
    height: 100vh; /* Ensure the container height is always 100% of the viewport height */
    overflow: hidden; /* Hide any part of the image that overflows the container */
    border-left: var(--border-width) solid var(--border-color); /* Black line on the left */
    border-top: var(--border-width) solid var(--border-color); 
    border-bottom: var(--border-width) solid var(--border-color);
}

.about-image img {
    min-width: 100vw; /* Ensure the image takes up the full width */
    min-height: 100vh; /* Ensure the image takes up the full height */
    max-width: 1000vw !important; /* Disable max width */
    object-fit: cover; /* Scale the image to cover the container while maintaining aspect ratio */
    object-position: center; /* Center the image within the container */
}

/* Features List */
.features-list {
    list-style: none;
    padding: 0;
}

.features-list li {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.features-list li i {
    margin-right: var(--border-size);
    color: var(--icon-color);
}


/* Products Section */
#products {
    display: flex;
    align-items: center; /* Center vertically */
    padding-top: 0 !important; /* Remove default padding */
    padding-bottom: 0 !important; /* Remove default padding */
    margin-top: var(--border-size) !important;
    /* margin-bottom: var(--border-size) !important; */
}

.products-carousels {
    padding-right: 0.0rem !important; /* Reset padding to the right */
    
    border-right: var(--border-width) solid var(--border-color);
    border-top: var(--border-width) solid var(--border-color);
    border-bottom: var(--border-width) solid var(--border-color);
}

.products-carousels .carousel-inner img {
    height: 300px; /* Set a fixed height for carousel images */
    object-fit: cover; /* Ensure images cover the carousel area */
}

.products-text {
    background-color: var(--empty-color);
    padding: 0rem !important; /* Reset padding */
    display: flex;
    flex-direction: column; /* Stack content vertically */
    align-items: flex-start; /* Align text to the top */
    justify-content: center; /* Center vertically within the column */
}

.products-text .inner-container {
    background-color: var(--background-color);
    color: var(--text-color);
    padding: 2rem;
    width: 100%; /* Ensure the inner container takes the full width */
    height: 100%; /* Ensure the inner container spans the full height */
    box-sizing: border-box; /* Include padding in the width calculation */
    margin-left: var(--border-size) !important; /* Add padding to the left */
    
    border-left: var(--border-width) solid var(--border-color);
    border-top: var(--border-width) solid var(--border-color);
    border-bottom: var(--border-width) solid var(--border-color);
}

/* .products-text ul {
    list-style: none;
    padding: 0;
}

.products-text ul li {
    margin-bottom: 1rem;
} */

/* Contact Us Section */
#contact {
    background-color: var(--background-color);
    color: var(--text-color);
    margin-top: var(--border-size) !important;
    border-top: var(--border-width) solid var(--border-color);
    border-bottom: var(--border-width) solid var(--border-color);
}

/* Disable scrolling when the sidebar is active */
.no-scroll {
    overflow: hidden; /* Disable scrolling */
}