/* Basic Resets */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;         
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

/* Ad Banner Container */
.ad-banner-container {
    position: relative;
    width: 100%;
    height: 70vh;
    background-color: #333;
    overflow: hidden;
    margin-bottom: 3rem; /* Increased gap from banner to content */
    margin-top: 70px;
}

.ad-slide {
    flex: 0 0 100%;
}
.ad-slide img, .ad-slide video {
    width: 100%;
    height: auto;
}.ad-indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;  
}

.ad-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.ad-indicator.active {
    background-color: white;
}

.ad-banner {
    display: flex;
    width: 100%;
    height: 100%;
    white-space: nowrap;
    transition: transform 0.5s ease-in-out;
}

.ad-banner video, .ad-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex-shrink: 0; 
    /*display: flex;*/
}

.ad-controls {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
}

/* Center-align Headings and Paragraph */
h1, h2, p {
    text-align: center;
    max-width: 800px; /* Ensures readability on large screens */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5rem; /* Adds space between each block */
    padding: 0 1rem; /* Small padding for better readability on small screens */
}

h1 {
    font-size: 2rem;
    color: #222;
}

h2 {    
    font-size: 1.5  rem;
    color: #555;
}

p {
    font-size: 1rem;
    color: #666;
    line-height: 1.75;
    margin-bottom: .5rem; /* Add more space before next section */
    text-align: justify
}
/* Product Section */
.products-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
}
/* Product Landing */
.product-landing {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #8ad861;
    padding: 5px 100px;
    color: white;
    margin: 10px 0 60px;
}

/* Product Section */
/* Resetting any margin, padding, and box-sizing to avoid unexpected layout issues */
*, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Ensures the body has full width and the background is set properly */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
    margin: 0;
    padding: 20px;
}

/* Flex container setup */
.products-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; /* This distributes space around items */
    align-items: flex-start; /* Align items to the start of the flex line */
    max-width: 1200px;
    margin: 0 auto; /* Center the container horizontally */
}

.product {
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px; /* Adds space around each product */
    border-radius: 8px;
    width: calc(33.333% - 20px); /* Ensures 3 items per row, subtracting margin */
}

.product img {
    width: 100%; /* Ensures image takes full width of the container */
    height: auto;
    border-radius: 5px;
}

.product h2 {
    font-size: 18px;
    color: #025a02;
    margin: 10px 0 5px; /* Space above and below the heading */
}

.product p {
    font-size: 14px;
}
 .clickable-content {
        cursor: pointer;
    }

.clickable-content:hover {
    opacity: 0.8;
}
/* Responsive behavior for smaller screens */
@media (max-width: 800px) {
    .product {
        width: calc(50% - 20px); /* 2 items per row on medium screens */
    }
}

@media (max-width: 600px) {
    .product {
        width: 100%; /* Full width on smaller screens */
    }
}