body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #ecf5fc;
}

header {
    background: #fff;
    color: #fff;
    padding: 20px 10px;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.logo {
    height: 90px; /* Adjust as needed */
}

.header-buttons {
    display: flex;
}

.header-buttons button {
    margin-left: 10px;
    padding: 10px 15px;
    background-color: #000000;
    color: #ffffff;
    border: none;
    cursor: pointer;
    border-radius: 5px; /* Rounded corners */
    transition: background-color 0.3s; /* Smooth transition */
}

.header-buttons button:hover {
    background-color: #00000076;
}

#mahalaxmi-apparels {
    position: relative; /* Position relative for the overlay */
    padding: 120px; /* Increased padding for larger size */
    background-image: url('background.jpg'); /* Placeholder for background image */
    background-size: cover; /* Cover the entire section */
    background-position: center; /* Center the image */
    color: #0f0e0e; /* Change text color for better contrast */
    margin: 40px 10px; /* Margin for spacing */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7); /* Subtle shadow */
    display: flex; /* Use flexbox for alignment */
    flex-direction: column; /* Stack items vertically */
    align-items: flex-end; /* Align content to the right */
    text-align: left; /* Align text to the right */
}

#mahalaxmi-apparels::before {
    content: ''; /* Empty content for the overlay */
    position: absolute; /* Position absolute to cover the section */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7); /* Black overlay with 50% opacity */
    border-radius: 5px; /* Match the border radius */
    z-index: 1; /* Ensure the overlay is above the background */
}

#mahalaxmi-apparels h2 {
    position: relative; /* Position relative to ensure text is above the overlay */
    z-index: 2; /* Ensure text is above the overlay */
    font-size: 3.5em; /* Increase font size for the heading */
    color: #fff; /* Change color to gold for better visibility */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Add text shadow for better contrast */
    margin-bottom: 20px; /* Increase gap between h2 and p */
}

#mahalaxmi-apparels p {
    position: relative; /* Position relative to ensure text is above the overlay */
    z-index: 2; /* Ensure text is above the overlay */
    font-size: 1.4em; /* Increase font size for the paragraph */
    color: #FFFFFF; /* Ensure the paragraph text is white for contrast */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Add text shadow for better contrast */
    /* margin-left: auto; /* Move paragraph to the right */
    /* margin-top: 50px; Increase gap between h2 and p */ 
    margin-right: 50px;
}


.about-container {
    display: flex; /* Use flexbox for layout */
    justify-content: space-between; /* Space between columns */
    margin-top: 20px; /* Space above the columns */
}

.about-column {
    flex: 1; /* Each column takes equal space */
    margin-right: 60px; /* Space between columns */
}

.about-column:last-child {
    margin-right: 0; /* Remove margin for the last column */
}

.about-column p {
    margin-top: 20px; /* Increase space above the paragraph */
}


#about {
    position: relative; /* Position relative for the overlay */
    padding: 100px; /* Increased padding for larger size */
    background-image: url('path/to/background-image.jpg'); /* Placeholder for background image */
    background-size: cover; /* Cover the entire section */
    background-position: center; /* Center the image */
    color: #fff; /* Change text color for better contrast */
    margin: 40px 10px; /* Margin for spacing */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 2px 5px rgba(94, 184, 181, 0.1); /* Subtle shadow */
}


#about::before {
    content: ''; /* Empty content for the overlay */
    position: absolute; /* Position absolute to cover the section */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(147, 188, 234, 0.3); /* Reduced opacity for better visibility */
    border-radius: 5px; /* Match the border radius */
    z-index: 1; /* Ensure the overlay is above the background */
}

#about h2 {
    position: relative; /* Position relative to ensure text is above the overlay */
    z-index: 2; /* Ensure text is above the overlay */
    font-size: 2.5em; /* Increase font size for the heading */
    color: #000000; /* Change color to gold for better visibility */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Add text shadow for better contrast */
}

.about-us-section .about-column {
    position: relative; /* Position relative to ensure text is above the overlay */
    z-index: 2; /* Ensure text is above the overlay */
    font-size: 1.2em; /* Increase font size for the paragraph */
    color: #000000; /* Ensure the paragraph text is white for contrast */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Add text shadow for better contrast */
}


.catalog-section {
    position: relative;
    padding: 120px; 
    background-image: url('pexel-neww.JPG');
    background-size: cover;
    background-color: #fff; 
    background-position: center; 
    margin: 40px 10px; 
    border-radius: 5px; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    
}


.catalog-section h1 {
    font-size: 2.5em; /* Increase font size for the heading */
    color: #ffffff; /* Change heading color to white for contrast */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Add shadow for better visibility */
    margin-bottom: 20px; /* Space below the heading */
}

.catalog-section p {
    font-size: 1.2em; /* Increase font size for the paragraph */
    color: #ffffff; /* Change text color to white for better readability */
    margin-bottom: 20px; /* Space below the paragraph */
}


.catalog-button {
    display: inline-block; /* Make the link a button */
    padding: 12px 24px; /* Button padding */
    background-color: #c9c0c0; /* Button background color */
    color: #000000; /* Button text color */
    border:none; /* No border */
    border-style:groove;
    border-radius: 5px; /* Rounded corners */
    text-decoration: none; /* Remove underline */
    margin: 30px; /* Add margin for spacing between buttons */
    transition: background-color 0.3s, transform 0.2s; /* Smooth transition */
}

.catalog-button:hover {
    background-color: #c9c0c065; /* Darker blue on hover */
    transform: scale(1.05); /* Slightly enlarge button on hover */
}


.brands-section {
    padding: 40px; /* Increase padding for a larger section */
    background-color: #daeaf4; /* Light background color for contrast */
    text-align: center; /* Center the text */
}

.brands-container {
    display: flex; /* Use flexbox for layout */
    justify-content: center; /* Center the logos */
    flex-wrap: wrap; /* Allow logos to wrap to the next line */
}

.brand-logo {
    width: 150px; /* Set a fixed width for logos */
    height: 150px; /* Maintain aspect ratio */
    margin: 30px; /* Space between logos */
    border-radius: 50%; /* Rounded edges for logos */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}

.reviews-section {
    padding: 40px; /* Increased padding for larger size */
    background-color: #fff; /* White background for contrast */
    margin: 40px 10px; /* Margin for spacing */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    text-align: center; /* Center text */
}

.review-container {
    display: flex; /* Use flexbox for layout */
    justify-content: center; /* Space between review cards */
    margin-bottom: 20px; /* Space below reviews */
}

.review-card {
    flex: 0 0 auto; /* Prevent flex-grow and flex-shrink */
    margin: 0 10px; /* Space between cards */
    padding: 20px; /* Padding inside the card */
    background-color: #cbd9f3; /* Light background for the card */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    opacity: 0; /* Start hidden */
    transform: translateX(100%); /* Start off-screen */
    transition: transform 0.5s ease, opacity 0.5s ease; /* Smooth transition for transform and opacity */
}

.review-card.active {
    opacity: 1; /* Fully visible when active */
    transform: translateX(0); /* Reset position */
}

.navigation-buttons {
    display: flex; /* Use flexbox for navigation buttons */
    justify-content: space-between; /* Center buttons */
    margin-top: 20px; /* Space above the buttons */
}

.nav-button {
    width: 40px; /* Set width for circular shape */
    height: 40px; /* Set height for circular shape */
    background-color: transparent; /* Transparent background */
    border: 2px solid #333; /* Border color */
    border-radius: 50%; /* Make it circular */
    color: #333; /* Icon color */
    font-size: 20px; /* Font size for the icon */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s; /* Smooth transition */
}

.nav-button:hover {
    background-color: #f4f4f4; /* Darker background on hover */
}

footer {
    padding: 20px; /* Increase padding for a larger footer */
    background-color: #f8f9fa; /* Optional: Add a background color for contrast */
    text-align: center; /* Center the text */
    font-size: 1.2em; /* Increase font size for better readability */
}