/* Basic styles for the entire body */
body {
    font-family: Arial, sans-serif; /* Sets the font style */
    line-height: 1.6; /* Improves readability */
    margin: 0; /* Removes default margin */
    padding: 0; /* Removes default padding */
    background-color: #D7D7D7; /* Sets background color */
    display: flex; /* Enables flexbox layout */
    justify-content: center; /* Centers content horizontally */
    align-items: center; /* Centers content vertically */
    min-height: 100vh; /* Ensures the body takes at least the full viewport height */
}

/* Container to center all content */
.main-container {
    width: 1200px; /* Fixed width for the content */
    background-color: #FFFFFF; /* Background color for the content */
    padding: 1rem; /* Optional: Adds padding inside the container */
    box-sizing: border-box; /* Ensures padding is included in the width */
}

/* Header styles */
header {
    background-color: #006AE3; /* Sets the background color */
    color: #fff; /* Sets the text color */
    text-align: center; /* Centers the text */
}

/* Styles for the main heading in the header */
header h1 {
    margin: 0; /* Removes default margin */
}

/* Navigation styles */
nav ul {
    list-style: none; /* Removes bullet points from the list */
    padding: 0; /* Removes default padding */
}

/* Styles for each list item in the navigation */
nav ul li {
    display: inline; /* Displays items in a row */
    margin: 0 10px; /* Adds space between items */
}

/* Styles for the links in the navigation */
nav ul li a {
    color: #fff; /* Sets the text color */
    text-decoration: none; /* Removes underline from links */
}

/* Product section styles */
.product {
    text-align: center; /* Centers the content */
    margin: 2rem; /* Adds margin around the section */
}

/* Styles for the product image */
.imgH2O2 {
    max-width: auto; /* Makes the image responsive */
    height: 120px; /* Maintains the aspect ratio */
}

/* Styles for the product image */
.imgPnS {
    max-width: auto; /* Makes the image responsive */
    height: 170px; /* Maintains the aspect ratio */
}

/* Styles for the product details container */
.product-details {
    display: flex; /* Use Flexbox for layout */
    flex-wrap: wrap; /* Allow wrapping to the next line */
    justify-content:center; /* Distribute space between items */
    gap: 1rem; /* Optional: Adds space between items */
	border-bottom: 1px solid #ddd; /* Adds a bottom border */
	padding: 1rem; /* Adds padding around the section */
}

.product-details:last-child {
    border-bottom: none; /* Removes the bottom border on the last item */
}

/* Styles for each product detail box */
.product-detail {
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 1rem; /* Add padding inside each box */
    border: 1px solid #ddd; /* Optional: Adds a border for visual separation */
    margin: 0.5rem; /* Optional: Adds margin around each item */
    text-align: center; /* Center the text inside each product detail */
    display: flex; /* Enables Flexbox for this container */
    flex-direction: column; /* Stacks children vertically */
    justify-content: center; /* Centers children vertically */
    align-items: center; /* Centers children horizontally */
}

/* Styles for the product details heading */
.product-details h3 {
    margin: 0; /* Removes default margin */
}

/* Styles for the product details paragraphs */
.product-details p {
    font-size: 1.2rem; /* Increases the font size */
}

/* Styles for the quantity label */
.product-details label {
    margin-right: 0.5rem; /* Adds space to the right */
}

/* Styles for the quantity input field */
.product-details input {
    width: 6rem; /* Sets a fixed width */
    text-align: center; /* Centers the text */
}

/* Styles for the "Add to Cart" button on hover */
.product-details button:hover {
    background-color: #019AE7; /* Darkens the background color */
}

/* Highlights section styles */
.highlights {
    display: flex; /* Uses flexbox for layout */
    justify-content: space-around; /* Distributes space evenly */
    margin: 2rem; /* Adds margin around the section */
}

/* Styles for each highlight box */
.highlight {
    max-width: 30%; /* Sets a maximum width */
    text-align: center; /* Centers the text */
}

/* Styles for the highlight headings */
.highlight h4 {
    color: #006AE3; /* Sets the text color */
}

/* About section styles */
.about {
    margin: 2rem; /* Adds margin around the section */
}

/* Styles for the list inside the about section */
.about ul {
    list-style: disc; /* Uses disc bullets */
    margin-left: 2rem; /* Adds space to the left */
}

/* Footer styles */
footer {
    background-color: #006AE3; /* Sets the background color */
    color: #fff; /* Sets the text color */
    text-align: center; /* Centers the text */
    padding: .1rem 0; /* Adds padding inside the footer */
}

/* Styles for image container */
.image-container {
    display: flex; /* Uses flexbox for layout */
    justify-content: center;  /* Centers content horizontally */
    align-items: center;      /* Centers content vertically if height is set */
    height: 35vh;            /* Sets a fixed height for the container */
}

/* Logo container styles */
.logo-container {
    position: relative; /* Allows positioning of overlay image */
    text-align: center; /* Centers the logo container */
    margin: 1rem 0; /* Adds margin above and below the logo */
}

/* Banner image styles */
.banner-img {
    width: 100%; /* Makes the banner full width */
    height: 300px; /* Sets a fixed height */
}

/* Overlay image styles */
.logo-img {
    position: absolute; /* Positions the image relative to the container */
    top: 50%; /* Positions the image vertically centered */
    left: 50%; /* Positions the image horizontally centered */
    transform: translate(-50%, -50%); /* Centers the image exactly */
    max-width: 800px; /* Makes the image responsive */
    height: auto; /* Maintains the aspect ratio */
}

.usage-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    background-color: #F4F4F4;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border-radius: 5px;
}

.dropdown {
    border-bottom: 1px solid #ddd;
}

.dropdown:last-child {
    border-bottom: none;
}

.dropdown-btn {
    width: 100%;
    background-color: #fff;
    border: none;
    text-align: left;
    padding: 15px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
	transition: background-color 0.3s; /* Smooth transition for background color */
}

.dropdown-btn:hover {
    background-color: #e0e0e0; /* Change this to your preferred highlight color */
}

.dropdown-content {
    display: none;
    padding: 15px;
    border-top: 1px solid #ddd;
}

.dropdown-content p {
    margin: 0;
}

.dropdown-btn:after {
    content: "\25B6"; /* Right arrow */
    font-size: 12px;
    transition: transform 0.3s;
}

.dropdown-btn.active:after {
    transform: rotate(90deg); /* Rotate arrow */
}