* {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
    
        body {
            font-family: Arial, sans-serif;
            background-color: #f1f1f1;
            color: #333;
            line-height: 1.6;
        }
    
        .header {
            background-color: #d4b69e;
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: white;
            transition: background-color 0.5s;
        }
    
        .menu-icon {
            font-size: 24px;
            cursor: pointer;
            color: white;
        }
    
        .logo {
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            flex: 1;
            color: white;
        }
    
        .header-icons {
            display: flex;
            align-items: center;
            gap: 20px;
        }
    
        .header-icons span {
            font-size: 20px;
            cursor: pointer;
            color: white;
        }
    
        .carousel {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #d4b69e;
            color: white;/* Uniform padding for top, bottom, left, and right */
            height: 350px;
            position: relative;
            transition: background-color 0.5s;
        }
        
    
        .carousel-text {
            max-width: 42%;
            
        }
    
        .carousel-text h1 {
            font-size: 25px;
            margin-bottom: 8px;
            padding-right: 50px;
            padding-left: 10px;
            font-weight: bold;
        }
    
        .carousel-text p {
            font-size: 18px;
            margin-bottom: 12px;
        }
    
        .view-more {
            padding: 6px 12px;
            background-color: transparent;
            color: black;
            border: 2px solid black;
            cursor: pointer;
            text-decoration: none;
            font-weight: bold;
            transition: background 0.3s, color 0.3s;
        }
    
        .view-more:hover {
            background-color: white;
            color: #d4b69e;
        }
    
        .carousel-image {
            max-width: 50%;
            height: 100%;
            overflow: hidden;
            position: relative;
        }
    
        .carousel-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: none;
            transition: opacity 0.5s;
        }
    
        .carousel-image img.active {
            display: block;
            opacity: 1;
        }
    
        .first-background {
            background-color: #c9ac8e;
            color: white;
        }
    
        .second-background {
            background-color: #ac9988;
            color: white;
        }
    
        .purple-background {
            background-color: #9d70f1;
            color: white;
        }
    
        .carousel-btn {
            position: absolute;
            top: 50%;
          
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: white;
        }
    
        .left-btn {
            left: 10px;
        }
    
        .right-btn {
            right: 10px;
        }
    
        .main {
            padding: 20px;
        }
    
        .most-popular {
            text-align: center;
            margin-top: 40px;
            padding: 40px;
            background-color: #f1f1f1;
        }
    
        .most-popular h2 {
            font-size: 32px;
            margin-bottom: 30px;
            font-weight: bold;
            color: black;
        }
    
        .product-cards {
            display: flex;
            justify-content: space-between;
            gap: 30px;
            max-width: 1200px;
            margin: 0 auto;
            flex-wrap: wrap;
        }
    
        .product-card {
            background-color: #f1f1f1;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 20px;
            width: 100%;
            max-width: 320px;
            text-align: center;
            position: relative;
            transition: transform 0.3s;
            overflow: hidden;
            color: black;
            text-decoration: none;
        }
    
        .product-card:hover {
            transform: translateY(-5px);
        }
    
        .product-card img {
            width: 100%;
            height: 350px;
            object-fit: cover;
            border-bottom: 1px solid #ddd;
            margin-bottom: 15px;
        }
    
        .product-card h3, .product-card p {
            text-decoration: none;
            color: black;
        }
    
        .quick-view {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #333;
            color: white;
            padding: 5px 10px;
            font-size: 14px;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.3s;
        }
    
        .product-card:hover .quick-view {
            opacity: 1;
        }
    
        .new-arrivals {
            background-color: #9ac7cc;
            padding: 20px;
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 40px;
        }
    
        .new-arrivals-text {
            max-width: 90%;
            color: #333;
            margin-bottom: 20px;
        }
    
        .new-arrivals-text h2 {
            font-size: 20px;
            margin-bottom: 10px;
            color: black;
        }
    
        .arrivalh1 {
            font-size: 32px;
            font-weight: bold;
            margin-bottom: 20px;
            color: black;
        }
    
        .new-arrivals-text p {
            font-size: 14px;
            color: #555;
            margin-bottom: 15px;
        }
    
        .see-more {
            font-size: 14px;
            color: black;
            text-decoration: underline;
            cursor: pointer;
        }
    
        .new-arrivals-image img {
            width: 100%;
            max-width: 500px;
            height: auto;
            object-fit: cover;
        }
    
        .mission-vision {
            background-color: #f1f1f1;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding: 40px;
            margin-top: 10px;
            height: 450px; /* Increased height for full-width view */
        }
    
        .mission, .vision {
            flex: 1;
            max-width: 50%;
            color: white;
            font-size: 18px;
            line-height: 1.4;
            padding: 20px;
            box-sizing: border-box;
            text-align: left;
        }
    
        .mission {
            background-image: url('images/shampoo-hand.png');
            background-size: cover;
            background-position: center;
        }
    
        .vision {
            background-color: #c09b79;
            /* Right padding for full-width */
        }
    
        .mission h2, .vision h2 {
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 15px;
        }
    
        .our-story {
            background-color: #f6f5f3;
            display: flex;
            flex-direction: column;
            padding: 30px;
            align-items: center;
            margin-top: 10px;
        }
    
        .story-text {
            max-width: 90%;
            text-align: center;
            margin-bottom: 20px;
        }
    
        .story-text h2 {
            font-size: 22px;
            margin-bottom: 20px;
            color: #333;
        }
    
        .story-text p {
            font-size: 16px;
            color: #555;
            line-height: 1.8;
        }
    
        .story-image img {
            width: 100%;
            max-width: 600px;
            height: auto;
            object-fit: cover;
            border-radius: 5px;
        }
    
        @media (min-width: 1024px) {
            .our-story {
                flex-direction: row;
                justify-content: space-between;
                padding: 60px;
            }
    
            .story-text {
                max-width: 50%;
                text-align: left;
                padding-right: 30px;
            }
    
            .story-image {
                max-width: 50%;
            }
        }
    
        .h1tag {
            text-align: center;
            margin-top: 25px;
        }
    
        .footer {
            background-color: #dcdcd3;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #333;
            margin-top: 20px;
        }
    
        .footer-section {
            width: 100%;
            max-width: 600px;
            text-align: center;
            margin-bottom: 20px;
        }
    
        .footer-logo {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 15px;
        }
    
        @media (max-width: 900px) {
            .mission-vision {
                height: auto; /* Set height to auto for smaller screens */
            }
        }
    
        @media (max-width: 850px) {
            .product-cards {
                justify-content: space-around;
                flex-wrap: wrap;
            }
    
            .product-card {
                max-width: calc(50% - 20px);
            }
            .vision{
                padding-right: 0px;
            }
        }
    
        @media (max-width: 700px) {
            .product-cards {
                flex-direction: column;
                gap: 20px;
            }
    
            .product-card {
                max-width: 100%;
            }
    
            .mission-vision {
                flex-direction: column;
                align-items: center;
                height: auto;
            }
    
            .mission, .vision {
                max-width: 100%;
                margin-bottom: 20px;
            }
            .vision{
                padding-right: 0px;
            }
        }
    
        @media (max-width: 600px) {
            .carousel {
                flex-direction: column;
                padding: 20px;
                height: auto;
            }
    
            .carousel-text {
                max-width: 100%;
                text-align: center;
                margin-bottom: 20px;
               
            }
    
            .carousel-text h1 {
                font-size: 22px;
            }
    
            .carousel-text p {
                font-size: 16px;
            }
    
            .carousel-image {
                max-width: 100%;
                height: auto;
            }
    
            .carousel-btn {
                font-size: 18px;
                top: auto;
                bottom: 10px;
            }
    
            .new-arrivals {
                flex-direction: column;
                padding: 20px;
            }
    
            .mission-vision {
                flex-direction: column;
                padding: 20px;
                align-items: center;
                height: auto;
            }
    
            .mission, .vision {
                max-width: 100%;
                margin-bottom: 20px;
            }
    
            .footer {
                flex-direction: column;
            }
            .vision{
                padding-right: 0px;
            }
        }
    
        @media (min-width: 768px) {
            .carousel {
                flex-direction: row;
                padding: 15px 40px;
            }
    
            .new-arrivals {
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                padding: 40px;
            }
    
            .new-arrivals-text, .new-arrivals-image {
                max-width: 45%;
            }
    
            .mission-vision {
                flex-direction: row;
                justify-content: space-between;
                padding: 40px;
            }
    
            .footer {
                flex-direction: row;
                justify-content: space-between;
            }
    
            .footer-section {
                text-align: left;
                padding: 0 20px;
            }
            .vision{
                padding-right: 0px;
            }
        }
        /* Basic styling for the breadcrumb container */
.breadcrumb-container {
    background-color: #d2a679; /* Light brown background color */
    color: white; /* White text color */
    padding: 20px; /* Padding around the content */
    text-align: left; /* Align text to the left */
    margin: 0; /* Remove any margin */
}

/* Styling for the heading inside the breadcrumb container */
.breadcrumb-container h1 {
    font-size: 28px; /* Font size for the heading */
    margin-bottom: 10px; /* Space below the heading */
    font-weight: bold; /* Make the heading bold */
}

/* Styling for the breadcrumb text */
.breadcrumb-container p {
    font-size: 16px; /* Font size for the breadcrumb text */
    color: #f5f5f5; /* Light gray color for breadcrumb text */
    margin: 0; /* Remove any margin */
}

/* Responsive styling */
@media (max-width: 768px) {
    .breadcrumb-container {
        padding: 15px; /* Reduce padding for smaller screens */
        text-align: center; /* Center text for smaller screens */
    }

    .breadcrumb-container h1 {
        font-size: 24px; /* Reduce font size for the heading */
    }

    .breadcrumb-container p {
        font-size: 14px; /* Reduce font size for the breadcrumb text */
    }
}

@media (max-width: 480px) {
    .breadcrumb-container {
        padding: 10px; /* Further reduce padding for very small screens */
    }

    .breadcrumb-container h1 {
        font-size: 20px; /* Further reduce font size for the heading */
    }

    .breadcrumb-container p {
        font-size: 12px; /* Further reduce font size for the breadcrumb text */
    }
}


.faq-container {
    margin-top: 30px;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 15px; /* Add padding to the container for smaller screens */
}

.faq-item {
    margin-top: 40px;
    margin-bottom: 40px;
    border-bottom: 1px solid #ddd;
    padding: 15px 0;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
}

.faq-toggle {
    font-size: 18px;
    font-weight: bold;
}

.faq-answer {
    display: none;
    margin-top: 10px;
    font-size: 14px;
    color: #666;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .faq-container {
        padding: 0 10px; /* Reduce padding for smaller screens */
    }

    .faq-question {
        font-size: 15px; /* Adjust font size for smaller screens */
    }

    .faq-toggle {
        font-size: 16px; /* Adjust toggle size for smaller screens */
    }

    .faq-answer {
        font-size: 13px; /* Adjust answer font size for smaller screens */
    }
}

@media (max-width: 480px) {
    .faq-container {
        padding: 0 5px; /* Further reduce padding for very small screens */
    }

    .faq-question {
        font-size: 14px; /* Further adjust font size for very small screens */
    }

    .faq-toggle {
        font-size: 14px; /* Further adjust toggle size for very small screens */
    }

    .faq-answer {
        font-size: 12px; /* Further adjust answer font size for very small screens */
    }
}


/* contact us page style */
body {
    font-family: Arial, sans-serif;
    background-color: #f1f1f1;
    color: #333;
    margin: 20px;
}

.contact-container {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    flex-wrap: wrap; /* Enable wrapping for smaller screens */
}

.contact-form {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    flex: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    min-width: 300px; /* Ensure a minimum width */
}

.contact-form h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

.contact-form p {
    font-size: 14px;
    margin-bottom: 20px;
    color: #666;
}

.form-group {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap; /* Make input fields wrap on smaller screens */
}

input, textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 15px;
    font-size: 14px;
}

textarea {
    height: 100px;
}

button {
    background-color: #004400;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #003300;
}

.contact-info {
    background-color: #f0f0f5;
    padding: 20px;
    border-radius: 8px;
    flex: 1;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    min-width: 300px; /* Ensure a minimum width */
}

.contact-info h3 {
    font-size: 20px;
    margin-bottom: 15px;
}

.contact-info p {
    font-size: 14px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .contact-container {
        flex-direction: column; /* Stack the form and info section vertically */
        align-items: center; /* Center items */
        padding: 10px; /* Reduce padding for smaller screens */
    }

    .contact-form, .contact-info {
        width: 100%; /* Make both sections take full width */
        margin-bottom: 20px; /* Add space between sections */
    }

    .form-group {
        flex-direction: column; /* Stack input fields vertically */
        gap: 5px; /* Reduce gap between fields */
    }

    input, textarea {
        font-size: 13px; /* Adjust font size */
    }

    button {
        font-size: 13px; /* Adjust button font size */
        padding: 8px 15px; /* Adjust button padding */
    }

    .contact-info h3 {
        font-size: 18px; /* Reduce heading font size */
    }

    .contact-info p {
        font-size: 13px; /* Reduce font size for contact info */
    }
}

@media (max-width: 480px) {
    body {
        margin: 10px; /* Reduce margin for smaller screens */
    }

    .contact-container {
        padding: 5px; /* Further reduce padding */
    }

    .contact-form, .contact-info {
        padding: 15px; /* Adjust padding inside sections */
    }

    input, textarea {
        font-size: 12px; /* Further adjust font size */
    }

    button {
        font-size: 12px; /* Adjust button font size */
        padding: 6px 10px; /* Adjust button padding */
    }

    .contact-info h3 {
        font-size: 16px; /* Further reduce heading font size */
    }

    .contact-info p {
        font-size: 12px; /* Further reduce font size for contact info */
    }
}