:root {
    --primary-color: #e0b090;
    --secondary-color: #f7e1d7;
    --dark-text: #5c4033;
    --light-text: #ffffff;
    --accent-pink: #f0c2c2;
    --light-grey: #f0f0f0;
}

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

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--secondary-color);
    color: var(--dark-text);
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

header {
    background-color: var(--primary-color);
    padding: 15px 0;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    font-size: 1.8em;
    font-weight: 700;
    color: var(--light-text);
    text-decoration: none;
}

.logo img {
    height: 40px;
    margin-right: 10px;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 30px;
}

.nav-links a {
    color: var(--light-text);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: var(--dark-text);
}

.nav-icons {
    display: flex;
    gap: 20px;
}

.nav-icons .fas {
    /* Styling for Font Awesome icons */
    font-size: 20px;
    color: var(--light-text);
    cursor: pointer;
    transition: color 0.3s ease;
}

.nav-icons .fas:hover {
    color: var(--dark-text);
}


.hero {
    background: url('img/bg.jpeg') center/cover no-repeat;
    border-radius: 20px;
    margin-top: 20px;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--dark-text);
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 20px;
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero h1 {
    font-size: 3.5em;
    margin-bottom: 10px;
    font-weight: 700;
}

.hero p {
    font-size: 1.2em;
    margin-bottom: 30px;
}

.shop-now-btn {
    background-color: var(--primary-color);
    color: var(--light-text);
    padding: 12px 25px;
    border: none;
    border-radius: 25px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.shop-now-btn:hover {
    background-color: var(--dark-text);
}

.section-title {
    text-align: left;
    font-size: 2.5em;
    margin: 60px 0 40px;
    font-weight: 600;
    color: var(--dark-text);
}

/* Add this to your existing CSS */
/* Add this new rule to your style.css */
.products-grid .featured-large {
    grid-column: span 2; /* This makes the card span two columns */
}

/* You might want to adjust the image height for the large card if it looks off */
.products-grid .featured-large img {
    height: 300px; /* Example: make it a bit taller to fill the space better */
    /* Or you can use aspect-ratio: 16/9; for a video-like aspect ratio */
}

/* Also, ensure your grid is responsive to this change.
   For example, in your media queries, you might want to adjust the layout for smaller screens.
   For now, the general grid rules will adapt, but you can fine-tune if needed.
*/
@media (max-width: 992px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr); /* Ensure this is still 2 columns */
    }
    .products-grid .featured-large {
        grid-column: span 2; /* Still span 2 columns on tablets */
    }
}

@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: 1fr; /* Switch to single column on mobile */
    }
    .products-grid .featured-large {
        grid-column: span 1; /* Make it single column on mobile too */
        height: auto; /* Reset any fixed height if necessary */
    }
    .products-grid .featured-large img {
        height: 200px; /* Adjust height for mobile if needed */
    }
}
.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

.product-card {
    background-color: var(--light-grey);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    position: relative;
    transition: transform 0.3s ease;
    display: flex;
    /* Added for better internal alignment */
    flex-direction: column;
    /* Added for better internal alignment */
}

.product-card:hover {
    transform: translateY(-5px);
}

.product-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-bottom: 1px solid #eee;
}

.product-info {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
    /* Allows info section to grow and push heart down if text wraps */
}

/* Rest of your CSS remains the same */
.product-info h3 {
    font-size: 1.1em;
    color: var(--dark-text);
    font-weight: 500;
}

.heart-icon {
    /* Styling for Font Awesome heart icon */
    font-size: 20px;
    color: var(--primary-color);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease, color 0.3s ease;
}

.heart-icon:hover {
    opacity: 1;
    color: #ff6b6b;
    /* A common color for a "liked" heart */
}

.about-section {
    background-color: var(--primary-color);
    color: var(--light-text);
    padding: 60px 0;
    border-radius: 20px;
    margin-bottom: 60px;
    text-align: center;
}

.about-section p {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.1em;
    line-height: 1.8;
}

.newsletter-section {
    text-align: center;
    margin-bottom: 60px;
}

.newsletter-form {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 30px;
}

.newsletter-form input[type="email"] {
    padding: 12px 20px;
    border: 1px solid var(--primary-color);
    border-radius: 25px;
    width: 300px;
    font-size: 1em;
    color: var(--dark-text);
}

.newsletter-form input[type="email"]::placeholder {
    color: #aaa;
}

.newsletter-form button {
    background-color: var(--primary-color);
    color: var(--light-text);
    padding: 12px 25px;
    border: none;
    border-radius: 25px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.newsletter-form button:hover {
    background-color: var(--dark-text);
}

footer {
    background-color: var(--dark-text);
    color: var(--light-text);
    padding: 25px 0;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    font-size: 0.9em;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-logo {
    display: flex;
    align-items: center;
}

.footer-logo img {
    height: 30px;
    filter: brightness(0) invert(1);
    /* Makes the logo white */
    margin-right: 10px;
}

.footer-logo span {
    font-weight: 600;
}

.social-links {
    display: flex;
    gap: 15px;
    align-items: center;
}

.social-links span {
    margin-right: 5px;
}

.social-links .fab {
    /* Styling for Font Awesome social icons */
    font-size: 20px;
    color: var(--light-text);
    transition: transform 0.3s ease, color 0.3s ease;
}

.social-links .fab:hover {
    transform: translateY(-3px);
    color: var(--primary-color);
    /* Hover color for social icons */
}

@media (max-width: 992px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        gap: 15px;
    }

    .nav-links {
        gap: 20px;
    }

    .hero h1 {
        font-size: 2.5em;
    }

    .products-grid {
        grid-template-columns: 1fr;
    }

    .newsletter-form {
        flex-direction: column;
        gap: 10px;
    }

    .newsletter-form input[type="email"] {
        width: 80%;
    }

    .footer-content {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .logo {
        font-size: 1.5em;
    }

    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
    }

    .hero h1 {
        font-size: 2em;
    }

    .hero p {
        font-size: 1em;
    }

    .section-title {
        font-size: 2em;
    }
}

.hero-fancy {
    height: 300px; /* Adjust height as needed */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px 0;
}

.hero-fancy-text h1 {
    font-size: 4em; /* Larger title */
    font-weight: 700;
    color: var(--dark-text);
    margin-bottom: 10px;
}

.hero-fancy-text p {
    font-size: 1.5em;
    color: var(--dark-text);
}

.offer-banner {
    background-color: var(--accent-pink);
    color: var(--light-text);
    padding: 25px 20px;
    text-align: center;
    font-size: 1.5em;
    font-weight: 600;
    border-radius: 15px;
    margin: 40px auto;
    max-width: 900px; /* Adjust width as seen in image */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.collections {
    margin-top: 60px;
    margin-bottom: 60px;
    text-align: center; /* For the button */
}

.collection-card {
    background-color: var(--light-grey);
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 200px; /* Consistent height for collection cards */
    margin-bottom: 30px; /* Space between cards */
    position: relative;
    transition: transform 0.3s ease;
}

.collection-card:hover {
    transform: translateY(-5px);
}

.collection-card h3 {
    font-size: 2em;
    font-weight: 600;
    color: var(--dark-text);
}

.collection-card .heart-icon-small {
    position: absolute;
    bottom: 15px;
    right: 15px;
    font-size: 1.2em; /* Smaller heart icon for these cards */
    color: var(--primary-color);
    opacity: 0.7;
    transition: opacity 0.3s ease, color 0.3s ease;
}

.collection-card .heart-icon-small:hover {
    opacity: 1;
    color: #ff6b6b;
}

.collection-card.wide {
    width: 100%; /* Spans full width of container */
    max-width: 800px; /* Adjust based on image perception */
    height: 250px; /* Taller for the wide card */
    margin-left: auto; /* Center the wide card */
    margin-right: auto; /* Center the wide card */
}

.collection-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns for Summer and Autumn */
    gap: 30px;
    margin-top: 0; /* Align with the wide card spacing */
    margin-bottom: 30px;
}

.collection-grid .collection-card {
    margin-bottom: 0; /* Grid items handle their own spacing */
}

.view-more-btn {
    background-color: var(--accent-pink); /* Pink button as in image */
    color: var(--light-text);
    padding: 15px 30px;
    border: none;
    border-radius: 25px;
    font-size: 1.1em;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: 30px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.view-more-btn:hover {
    background-color: #e09999; /* Slightly darker pink on hover */
    transform: translateY(-2px);
}

footer {
    background-color: var(--dark-text);
    color: var(--light-text);
    padding: 25px 0;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    font-size: 0.9em;
}
/* --- New Styles for Contact Page --- */

.contact-hero {
    text-align: center;
    padding: 80px 0 40px; /* Adjust spacing as needed */
}

.contact-heading {
    font-size: 3.5em; /* Large heading as in the image */
    font-weight: 700;
    color: var(--dark-text);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.2;
}

.contact-form-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
    margin-bottom: 60px; /* Space before the extended footer */
}

.contact-form-card {
    background-color: var(--dark-brown-form); /* Darker brown background for the form */
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between form fields */
    width: 100%;
    max-width: 500px; /* Max width for the form card */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.contact-form-card input[type="text"],
.contact-form-card input[type="email"],
.contact-form-card input[type="tel"],
.contact-form-card textarea {
background-color: lightblue;
    border: none;
    border-radius: 20px;
    padding: 15px 20px;
    font-size: 1em;
    color: var(--dark-text);
    width: 100%;
    justify-content: center;
    outline: none;
    text-align: center;
    color: pink;
}

.contact-form-card input::placeholder,
.contact-form-card textarea::placeholder {
    color: var(--dark-text); /* Placeholder text color */
    opacity: 0.7; /* Make placeholder text slightly lighter */
}

.contact-form-card textarea {
    height: 120px; /* Taller for message area */
    resize: vertical; /* Allow vertical resizing */
}

.submit-btn {
    background-color: var(--accent-pink); /* Pink submit button */
    color: var(--light-text);
    padding: 15px 30px;
    border: none;
    border-radius: 10px; /* Rounded button */
    font-size: 1.1em;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
    align-self: center; /* Center the button within the flex container */
    width: fit-content; /* Adjust width to content */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.submit-btn:hover {
    background-color: #e09999; /* Darker pink on hover */
}

/* --- Extended Footer Styles --- */
.extended-footer {
    padding: 60px 0;
    background-color: var(--secondary-color); /* Matches body background, no distinct background for this section */
}

.footer-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Four columns as in the image */
    gap: 30px;
    text-align: left;
}

.footer-col h4 {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--dark-text);
    margin-bottom: 20px;
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 10px;
    color: var(--dark-text); /* Default list item color */
}

.footer-col ul li a {
    color: var(--dark-text);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-col ul li a:hover {
    color: var(--primary-color); /* Hover effect for links */
}