/* Basic Resets & Global Styles */
:root {
    /* Ghibli-inspired Palette - More vibrant and better contrast */
    --ghibli-sky-light: #CDEFF7; /* Very light, gentle sky/cloud */
    --ghibli-sky-mid: #93D5ED; /* Mid-tone sky blue */
    --ghibli-forest-deep: #4A6B5C; /* Deep, rich forest green - for headings and primary text */
    --ghibli-earth-warm: #E2C9A1; /* Warm, soft earthy tone - for accents/backgrounds */
    --ghibli-petal-soft: #F9E0B2; /* Soft, warm yellow/peach - for buttons, highlights */
    --ghibli-sun-bright: #FDD87F; /* Brighter yellow for active states/accents */
    --ghibli-stone-grey: #7B8D9E; /* Muted grey for subtle details */
    --ghibli-text-dark: #2C3E50; /* Almost black, dark blue-grey for main body text */
    --ghibli-text-light: #FDFDFD; /* Off-white for text on dark backgrounds */

    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-medium: rgba(0, 0, 0, 0.25);
    --shadow-strong: rgba(0, 0, 0, 0.35);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fallback fonts */
    color: var(--ghibli-text-dark); /* Default text color set to dark for readability */
    line-height: 1.6;
    background-color: var(--ghibli-sky-light); /* Gentle, inviting base background */
}

/* Custom Ghibli-esque Font (You might need to import a specific Google Font here) */
/* Example: @import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&family=Playfair+Display:wght@400;700&display=swap'); */
/* For a Ghibli feel, consider fonts like 'Merriweather', 'Playfair Display', 'Lora', or 'Garamond' for body and something whimsical like 'Amatic SC' for titles if appropriate, or a classic serif. */
h1, h2, h3, h4 {
    font-family: 'Playfair Display', serif; /* Example Ghibli-friendly font */
    color: var(--ghibli-forest-deep); /* Deep green for headings */
    margin-bottom: 0.8em;
    text-shadow: 1px 1px 3px var(--shadow-light); /* Subtle text shadow for depth */
}

p {
    margin-bottom: 1em;
}

a {
    color: var(--ghibli-forest-deep); /* Link color matches headings */
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--ghibli-stone-grey); /* Subtle change on hover */
}

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

/* Header & Navbar */
.navbar {
    background: rgba(255, 255, 255, 0.95); /* Less transparent for better readability */
    backdrop-filter: blur(8px); /* Slightly stronger blur */
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 15px 0;
    box-shadow: 0 4px 15px var(--shadow-medium); /* Stronger shadow */
}

.navbar .container {
    display: flex;
    justify-content: space-between; /* Ensures logo and nav/toggle are spaced out */
    align-items: center;
    max-width: 1200px; /* Assuming a max width for your content, adjust if needed */
    margin: 0 auto; /* Center the container */
    padding: 0 20px; /* Add some horizontal padding */
}

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

.navbar .logo img {
    height: 45px; /* Slightly larger logo */
    margin-right: 12px;
}

.navbar .logo h1 {
    font-size: 2em; /* Slightly larger logo text */
    margin: 0;
    color: var(--ghibli-forest-deep);
    text-shadow: none; /* No shadow on logo text */
}

/* Desktop Navigation */
.navbar nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Display links in a row on desktop */
}

.navbar nav ul li {
    margin-left: 30px; /* More spacing */
}

.navbar nav ul li a {
    font-weight: bold;
    color: var(--ghibli-text-dark); /* Dark text on light background */
    position: relative;
    padding-bottom: 5px;
    text-decoration: none; /* Ensure no default underline */
    transition: color 0.3s ease; /* Smooth transition for color on hover */
}

.navbar nav ul li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px; /* Thicker underline */
    background: var(--ghibli-petal-soft); /* Accent color for underline */
    bottom: 0;
    left: 0;
    transition: width 0.3s ease;
}

.navbar nav ul li a:hover::after {
    width: 100%;
}
.navbar nav ul li a:hover {
    color: var(--ghibli-forest-deep); /* Hover color matches headings */
}

.navbar .centered-multiline-link {
    display: block;
    text-align: center;
}

/* Hamburger Menu Icon Styling (hidden on desktop) */
.menu-toggle {
    display: none; /* Hidden by default for desktop */
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    cursor: pointer;
    z-index: 1001; /* Ensure it's above other content when visible */
}

.menu-toggle .bar {
    width: 100%;
    height: 3px;
    background-color: var(--ghibli-forest-deep); /* Color of the bars, matching your dark text */
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
}

/* Media Queries for Mobile Devices */
@media (max-width: 768px) { /* This breakpoint determines "mobile" */
    .navbar .container {
        display: flex; /* Ensure it's a flex container on mobile */
        justify-content: space-between; /* Pushes logo to left, menu-toggle to right */
        align-items: center;
        padding: 0 15px; /* Adjust padding for smaller screens */
        width: 100%; /* Ensure container takes full width */
    }

    /* Show hamburger menu on mobile */
    .menu-toggle {
        display: flex; /* Make hamburger visible on mobile */
        z-index: 1001;
    }

    /* Hide desktop navigation and prepare for mobile display */
    .navbar .nav-menu {
        display: none; /* Crucial: Hide navigation by default on mobile */
        flex-direction: column; /* Stack menu items vertically */
        width: 100%;
        position: absolute; /* Position relative to the nearest positioned ancestor (body/html if none) */
        /* Make sure it's positioned correctly below the header */
        top: 75px; /* Adjust this value if your actual header height is different */
        left: 0;
        background: rgba(255, 255, 255, 0.98); /* Slightly less transparent for menu items */
        backdrop-filter: blur(8px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* Stronger shadow for the dropdown */
        padding: 20px 0; /* Vertical padding for the menu content */
        text-align: center;
        transition: transform 0.3s ease-in-out;
        transform: translateY(-100%); /* Start off-screen above the viewport */
        z-index: 999; /* Ensure it's below the toggle but above main content */
        overflow-y: auto; /* Enable scrolling if content exceeds height */
        max-height: calc(100vh - 75px); /* Max height for scrollable menu */
    }

    /* When .active class is added by JS */
    .navbar .nav-menu.active {
        display: flex; /* IMPORTANT: SHOW navigation when active, and make it a flex container */
        transform: translateY(0); /* Slide into view */
    }

    /* Ensure the UL inside the active nav-menu is also flex-column */
    .navbar .nav-menu.active ul { /* Target ul when nav-menu is active */
        display: flex; /* Make the UL a flex container too */
        flex-direction: column; /* Ensure vertical stacking for mobile */
        width: 100%; /* Ensure UL takes full width of nav-menu */
    }

    .navbar .nav-menu ul li {
        margin: 15px 0; /* Spacing for mobile menu items */
    }

    .navbar .nav-menu ul li a {
        font-size: 1.1em; /* Slightly larger text for mobile menu */
        padding: 10px 0; /* Increased padding for better tap target */
        color: var(--ghibli-text-dark); /* Ensure text color is defined for mobile */
        display: block; /* Make links block level to fill li space */
    }

    .navbar .nav-menu ul li a::after {
        height: 4px; /* Slightly thicker underline for mobile */
        background: var(--ghibli-petal-soft); /* Ensure accent color is applied */
    }

    /* Animation for hamburger icon to 'X' */
    .menu-toggle.active .bar:nth-child(1) {
        transform: translateY(11px) rotate(45deg);
    }
    .menu-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle.active .bar:nth-child(3) {
        transform: translateY(-11px) rotate(-45deg);
    }
}

/* Story Sections (applies to homepage sections and product detail sections) */
.story-section {
    min-height: 100vh; /* Each section takes full viewport height */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 0; /* Add some padding */
    background-color: var(--ghibli-sky-light); /* Default background, will be overridden by images */
    position: relative;
    overflow: hidden; /* For parallax or image masking if needed */
    transition: background-color 0.8s ease; /* Smooth transition between section backgrounds */
}

.section-reverse {
    background-color: var(--ghibli-petal-soft);
}

.story-content {
    display: flex;
    align-items: center;
    gap: 60px; /* Increased gap */
    background: rgba(255, 255, 255, 0.95); /* Almost opaque white for readability */
    padding: 50px; /* More padding */
    border-radius: 20px; /* Softer corners */
    box-shadow: 0 15px 40px var(--shadow-strong); /* Stronger, more defined shadow */
    max-width: 95%; /* Slightly wider content area */
    position: relative; /* For image overlay positioning */
    border: 1px solid rgba(255, 255, 255, 0.5); /* Subtle border */
}

.story-content.reverse-layout {
    flex-direction: row-reverse;
}

.story-image {
    max-width: 55%; /* Image takes a bit more space */
    height: auto;
    border-radius: 15px; /* Softer corners for images */
    box-shadow: 0 8px 25px var(--shadow-medium); /* Clearer image shadow */
    object-fit: cover; /* Ensures image covers area without distorting */
    filter: brightness(1.05) saturate(1.05); /* Slight enhancement for Ghibli images */
}

.text-overlay {
    flex: 1; /* Text takes remaining space */
    padding: 20px;
    text-align: left;
}

.text-overlay h2, .text-overlay h3 {
    font-size: 3.2em; /* Larger headings */
    line-height: 1.2;
    color: var(--ghibli-forest-deep); /* Deep green for headings */
    margin-bottom: 0.6em;
    text-shadow: 2px 2px 4px var(--shadow-light); /* Clearer text shadow */
}

.text-overlay h4 {
    font-size: 1.5em; /* Larger headings */
    line-height: 1.2;
    color: var(--ghibli-forest-deep); /* Deep green for headings */
    margin-bottom: 0.6em;
    text-shadow: 2px 2px 4px var(--shadow-light); /* Clearer text shadow */
}

.text-overlay p {
    font-size: 1.15em; /* Slightly larger body text */
    color: var(--ghibli-text-dark); /* Dark text for readability */
}

.cta-button {
    display: inline-block;
    background: linear-gradient(to right, var(--ghibli-petal-soft), var(--ghibli-sun-bright)); /* Gradient button */
    color: var(--ghibli-text-dark); /* Dark text on light button for contrast */
    padding: 18px 35px; /* Larger padding */
    border-radius: 50px;
    margin-top: 30px; /* More margin */
    font-weight: bold;
    font-size: 1.2em; /* Larger font */
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 5px 15px var(--shadow-light);
}

.cta-button:hover {
    background: linear-gradient(to right, var(--ghibli-sun-bright), var(--ghibli-petal-soft)); /* Reverse gradient on hover */
    transform: translateY(-5px) scale(1.02); /* More pronounced hover effect */
    box-shadow: 0 8px 20px var(--shadow-medium);
}

/* Specific Section Styles (Backgrounds and unique elements) */

/* Hero Section */
#hero {
    background: linear-gradient(to bottom, var(--ghibli-sky-mid) 0%, var(--ghibli-sky-light) 100%);
    position: relative;
    text-align: center;
    overflow: hidden;
    width: 100vw; /* Make it span the full viewport width */
    margin-left: calc(50% - 50vw); /* Pull to the left edge of the viewport */
    margin-right: calc(50% - 50vw); /* Pull to the right edge of the viewport */
    display: flex;
    align-items: stretch;   
    margin-top: 0;
    padding-top: 0;
    height: 100vh;     
}

#hero .story-content {
    background: none; /* No white background for hero */
    box-shadow: none;
    max-width: 100%; /* Ensure it's not limited by general .story-content */
    width: 100%;    /* <-- ADD THIS LINE: Explicitly set width to 100% */
    justify-content: center;
    align-items: flex-end; /* Text sits at bottom of image */
    padding: 0;
    border: none; /* No border for hero content */
    position: relative; /* For image overlay positioning */
    justify-content: center; /* Horizontal center */
    align-items: center; /* Vertical center */    

    display: flex;
    flex-direction: column;
    height: 100%;   
    flex-grow: 1; 
}

#hero .story-image {
    width: 100%;
    max-width: 100%;
    height: 100vh;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#hero .text-overlay {
    position: relative;
    z-index: 10;
    text-align: center;
    align-self: center;
    padding: 30px 20px; /* Reduced side padding */
    margin-top: 35px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 20px;
    margin-bottom: 70px;
    box-shadow: 0 10px 30px var(--shadow-medium);
    max-width: 90%;
}

/* Mobile devices */
@media (max-width: 768px) {
    #hero {
        height: auto; /* Allow #hero to expand beyond 100vh on mobile if content needs more space */
        min-height: 100vh; /* But ensure it's at least the viewport height */
        align-items: center; /* Adjust alignment as per your content's needs on mobile */
    }

    #hero .story-content {
        height: auto; /* Allow story-content to grow with its stacked content */
        min-height: 100vh; /* Ensure it's at least the viewport height on mobile */
        padding-top: 50px;
        padding-bottom: 50px;
        justify-content: flex-start; /* Align content to the top within story-content */
        align-items: center; /* Center horizontally */
    }

    #hero .story-image {
        height: 100%; /* Remains 100% of story-content */
        min-height: 100vh; /* Ensure the image covers at least the viewport height on mobile */
        /* object-fit: cover will ensure it covers even if story-content's height is more than 100vh */
    }

    #hero .text-overlay {
        max-width: 95%;
        padding: 30px 20px 30px 20px; /* Adjust padding: Top padding pushes down, other paddings as before */
        margin-top: 0;
        margin-bottom: 30px; /* Reduce bottom margin on mobile if needed */
        position: relative; /* Ensure it stays above the image */
        display: flex;
        flex-direction: column; /* Stack its children vertically */
        align-items: center; /* Center content within the overlay */
        justify-content: center;
        box-sizing: border-box; /* Include padding and border in the element's total width and height */
    }

    .overlay-content {
        flex-direction: column; /* Stack the side-icons and text-content vertically */
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .pump-wrapper {
        margin-bottom: 20px; /* Add some space between stacked pump wrappers */
    }
}

.pump-wrapper{
    flex-direction: column;

}

.pump-wrapper h4{
    font-size: 1.5em;
}

.overlay-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px; /* Increased gap between icons and text */
}

.text-content {
    flex: 1;
    max-width: 600px;
    margin: 0 20px; /* Additional margin for text */
}

.side-icon {
    height: auto; /* Changed from fixed height */
    width: clamp(60px, 8vw, 120px); /* Responsive sizing with min/max */
    opacity: 0.8;
    transition: all 0.3s ease;
    flex-shrink: 0; /* Prevent icons from shrinking */
}

/* Large desktop screens */
@media (min-width: 1600px) {
    .side-icon {
        width: 140px; /* Larger icons for big screens */
    }
    .overlay-content {
        gap: 60px; /* More space on big screens */
    }
}

/* Tablets and small desktops */
@media (max-width: 1024px) {
    .side-icon {
        width: clamp(50px, 6vw, 80px);
    }
    .overlay-content {
        gap: 30px;
    }
}

/* Mobile devices */
@media (max-width: 768px) {
    .side-icon {
        width: 50px;
    }
    .overlay-content {
        gap: 20px;
    }
}

/* Very small mobile devices - stack vertically */
@media (max-width: 480px) {
    .overlay-content {
        flex-direction: column;
        gap: 15px;
    }
    .side-icon {
        width: 40px;
    }
    .text-content {
        margin: 15px 0;
    }
}

/* Text styles remain the same */
#hero .text-overlay h2 {
    font-size: 3.5em;
    color: var(--ghibli-forest-deep);
    text-shadow: 3px 3px 6px var(--shadow-light);
    margin-bottom: 0.3em;
}

#hero .text-overlay p {
    font-size: 1.6em;
    color: var(--ghibli-text-dark);
}

/* Product Grid Styles - REVISED */
.animate-wrapper {
    height: auto; /* Allow height to adjust based on content */
    width: 100%; /* Take full available width of its parent */
    max-width: 100%; /* Ensure it doesn't exceed parent's width */
    display: flex; /* Use flexbox to center the image */
    justify-content: center; /* Center image horizontally */
    align-items: center; /* Center image vertically */
    /* Remove object-fit from wrapper as it's for the img tag itself */
}

.animate-img {
    width: 100%; /* Image takes full width of its wrapper */
    height: auto; /* Maintain aspect ratio */
    max-width: 100%; /* Ensure image doesn't overflow its wrapper */
    max-height: 450px; /* Set a maximum height for larger screens */
    object-fit: contain; /* Ensures the entire image is visible within its bounds */
    border-radius: 15px;
    box-shadow: 0 8px 25px var(--shadow-medium);
    filter: brightness(1.05) saturate(1.05);
}

/* Responsive Adjustments for .animate-wrapper and .animate-img - REVISED */
@media (min-width: 1200px) {
    .animate-wrapper {
        /* If 'gap' is intended for internal spacing in a flex/grid layout within the wrapper, keep it.
           If the wrapper is just for a single image, this property might be irrelevant here. */
        gap: 30px;
        /* max-width: 700px; - Removed to allow it to grow larger within its parent (.text-content) */
    }
    .animate-img {
        /* max-width: 180px; - Removed to allow the image to scale up */
        max-height: 500px; /* Adjusted for very large screens to allow it to be as tall as story-image-wrapper */
    }
}

@media (max-width: 768px) {
    .animate-wrapper {
        gap: 15px;
        /* max-width: 400px; - Removed */
    }
    .animate-img {
        /* max-width: 120px; - Removed */
        max-height: 350px; /* Similar to story-image on mobile, adjusted for better display */
    }
}

@media (max-width: 480px) {
    .animate-img {
        /* max-width: 100px; - Removed */
        max-height: 280px; /* Adjusted for very small screens */
    }
}

.story-image-wrapper {
    position: relative;
    height: 500px;
    max-width: 55%;
    background: transparent;
    display: flex;
    justify-content: center;
}

.story-section:not(#hero) .story-image {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    border-radius: 15px;
    box-shadow: 0 8px 25px var(--shadow-medium);
    filter: brightness(1.05) saturate(1.05);
}

/* --- Mobile Specific Overrides --- */
@media (max-width: 768px) {
    .story-image-wrapper {
        height: auto; /* Remove fixed height on mobile */
        max-width: 90%; /* Allow image wrapper to take more width on mobile */
        margin-bottom: 20px; /* Add some space between image and text */
        width: 100%; /* Ensure it takes available width */
    }

    .story-section:not(#hero) .story-image {
        width: 100%; /* Make image take full width of its container */
        height: auto; /* Allow height to adjust proportionally based on width */
        max-height: 300px; /* Optional: Set a max-height to prevent it from getting too tall on some devices */
        object-fit: contain; /* Ensure image isn't stretched within its new dimensions */
    }

    /* If you have .story-content.reverse-layout for stacking, ensure it's still active */
    .story-content.reverse-layout {
        flex-direction: column;
    }
}


/* Section 2: The Daily Chore */
#story-problem {
    background-color: var(--ghibli-earth-warm); /* Warm earthy background */
}

/* Section 3: The Gentle Helper */
#story-solution {
    background-color: var(--ghibli-sky-mid); /* Gentle sky background */
}


/* Traits Section */
#traits {
    background-color: var(--ghibli-sky-light); /* Soft sky background */
}

.trait-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Slightly wider columns */
    gap: 30px; /* More gap */
    margin-top: 30px;
}

.trait-item {
    background: var(--ghibli-petal-soft); /* Soft yellow/peach background for traits */
    color: var(--ghibli-text-dark); /* Dark text on light background */
    padding: 25px; /* More padding */
    border-radius: 12px;
    box-shadow: 0 8px 20px var(--shadow-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.7); /* Subtle border */
    overflow: auto; /* or overflow: hidden; if you prefer to hide overflow */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    max-height: 100vh; /* Optional: limit height */    
}

.trait-item:hover {
    transform: translateY(-8px); /* More pronounced lift */
    box-shadow: 0 12px 25px var(--shadow-medium);
}

.trait-item h4 {
    color: var(--ghibli-forest-deep); /* Deep green for trait headings */
    font-size: 1.4em;
    margin-bottom: 0.6em;
    text-shadow: none; /* No shadow on trait headings */
}
.trait-item p {
    font-size: 1.05em;
}


/* Benefits Section */
#benefits {
    background-color: var(--ghibli-earth-warm); /* Warm earthy background */
}

.benefit-list {
    list-style: none; /* Remove default list style */
    padding-left: 0;
    margin-top: 30px;
}

.benefit-list li {
    background: var(--ghibli-forest-deep); /* Darker background for benefits */
    color: var(--ghibli-text-light); /* Light text on dark background for contrast */
    padding: 18px 25px; /* More padding */
    margin-bottom: 15px; /* More spacing */
    border-radius: 10px;
    font-size: 1.25em; /* Larger font */
    display: flex;
    align-items: center;
    gap: 20px; /* More gap */
    box-shadow: 0 5px 15px var(--shadow-medium);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.benefit-list li:hover {
    transform: translateX(10px); /* Slide effect on hover */
    box-shadow: 0 8px 20px var(--shadow-strong);
}

.benefit-list li strong {
    color: var(--ghibli-text-light); /* Ensure strong text is visible */
}

/* Add an icon or a Ghibli-esque symbol before each benefit if possible */
.benefit-list li::before {
    content: '✨'; /* A magical sparkle, replace with a custom SVG or image if preferred */
    font-size: 1.3em;
    line-height: 1;
    min-width: 30px; /* Ensure space for icon */
    text-align: center;
}

.brand-promise {
    font-style: italic;
    font-weight: bold;
    font-size: 1.35em; /* Larger font */
    color: var(--ghibli-forest-deep); /* Deep green for brand promise */
    margin-top: 40px;
    padding: 25px;
    background: var(--ghibli-petal-soft); /* Soft yellow/peach background */
    border-radius: 15px;
    box-shadow: 0 5px 15px var(--shadow-light);
    border: 1px solid rgba(255, 255, 255, 0.7);
}

/* ---------- TODO: Common for class for multiple products display -------*/

.story-content.vertical-layout {
    flex-direction: column;
    align-items: stretch;
    width: 95%;
}

.product-image-wrapper {
    position: relative;
    height: auto;
    width: 100%; /* Full width */
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    justify-content: center; /* Centers child horizontally */
    align-items: center; /* Centers child vertically (if needed) */
    min-height: 300px;
    margin: 0 auto; /* Ensures wrapper itself is centered */
}

.product-image-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    opacity: 0.4; /* Optional: set background visibility */
}

.product-image-wrapper.bg-1::before {
    background-image: url('../img/product-bg-1.png');
}

.product-image-wrapper.bg-2::before {
    background-image: url('../img/product-bg-2.png'); /* Replace with your background image */
}

.product-image-wrapper .product-image {
    height: auto;
    width: auto; /* Let the image scale naturally */
    max-width: 90%; /* Prevents overflow */
    max-height: 300px;
    object-fit: contain;
    border-radius: 15px;
    filter: brightness(1.05) saturate(1.05);
    display: block; /* Removes inline spacing issues */
}

/* Desktop Styles */
@media (min-width: 992px) {
    .product-image-wrapper {
        max-width:100%; /* Constrains width */
        height: 500px;
    }

    .product-image-wrapper .product-image {
        max-height: 80%; /* Prevents touching container edges */
        width: auto; /* Natural width */
        height: auto; /* Natural height */
    }
}

.trait-reverse {
    background: var(--ghibli-sky-mid); /* Soft yellow/peach background for traits */
}

.trait-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

.trait-list > div {
    flex: 1 1 30%; /* grow, shrink, base width */
    min-width: 250px; /* fallback on smaller screens */
}

.item-list li {
    position: relative;
    padding-left: 2em;
    margin-bottom: 0.8em;
    line-height: 1.6;
    color: var(--ghibli-text-dark);
    font-size: 1.05em;
    text-align: left; /* Explicit left alignment */
    display: block; /* Ensure full width behavior */
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    padding-right: 10px;    
}

.item-list li strong {
    color: var(--ghibli-sun-dark); /* Highlight important text */
    font-weight: 600; /* Slightly bolder than default strong */
}


.criteria-list li:before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--ghibli-sun);
    font-weight: bold;
    font-size: 1.1em;
}

.feature-list li:before {
content: "\f005"; /* Font Awesome star icon */
font-family: "Font Awesome 6 Free";
    position: absolute;
    left: 0;
    color: var(--ghibli-text-dark);
    font-weight: normal;
    font-size: 1.1em;
}

.sub-item-list li {
    position: relative;
    padding-left: 4em;
    margin-bottom: 0.8em;
    line-height: 1.6;
    color: var(--ghibli-text-dark);
    font-size: 1.05em;
    text-align: left; /* Explicit left alignment */
    display: block; /* Ensure full width behavior */
}

.sub-iitem-list li strong {
    color: var(--ghibli-sun-dark); /* Highlight important text */
    font-weight: 600; /* Slightly bolder than default strong */
}

.criteria-list .sub-item-list li:before {
    content: none; /* Remove the arrow */
}

/* ---------- End: Common for class for multiple products display -------*/

/* ---------- Matchmaking -------------*/
#product-matchmaker .story-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px; /* Reverted to desktop gap */
    background: rgba(255, 255, 255, 0.95); /* Reverted to desktop opacity */
    padding: 50px; /* Reverted to desktop padding */
    border-radius: 20px; /* Reverted to desktop border-radius */
    box-shadow: 0 15px 40px var(--shadow-strong); /* Reverted to desktop shadow */
    max-width: 95%; /* Reverted to desktop max-width */
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.5);
    /* box-sizing: border-box; - Keep this, it's generally good practice */
}

#product-matchmaker .product-intro { /* Renamed from #products */
    width: 100%;
}

#product-matchmaker .product-intro h3 { /* Renamed from #products */
    font-size: 3.5em; /* Reverted to desktop font size */
    margin-bottom: 0.5em;
}

#product-matchmaker .product-intro p { /* Renamed from #products */
    font-size: 1.25em; /* Reverted to desktop font size */
    margin: 0 auto;
}

#product-matchmaker .product-intro .intro-container {
    display: flex;
    flex-wrap: wrap;
    gap: 40px; /* Reverted to desktop gap */
    align-items: center;
    justify-content: space-between;
}

#product-matchmaker .product-intro .intro-text {
    flex: 1;
    min-width: 300px; /* Reverted to desktop min-width */
}

#product-matchmaker .product-intro .intro-image {
    flex: 0 1 auto;
    max-width: 400px; /* Reverted to desktop max-width */
}

#product-matchmaker .product-intro .intro-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 25px var(--shadow-medium);
}

.product-card {
    background-color: var(--ghibli-text-light);
    border-radius: 15px; /* Reverted to desktop border-radius */
    box-shadow: 0 5px 15px var(--shadow-light);
    padding: 25px; /* Reverted to desktop padding */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Added this for consistency, should be fine on desktop */
    box-sizing: border-box;
}

.product-card:hover {
    transform: translateY(-7px); /* Reverted to desktop hover effect */
    box-shadow: 0 10px 25px var(--shadow-medium);
}

.product-card .product-image-container {
    width: 100%; /* Reverted to desktop width */
    height: 180px; /* Reverted to desktop height */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    background-color: var(--ghibli-sky-light);
    background-image: url('../img/product-bg-1.png');
    border-radius: 10px;
    overflow: hidden;
}

.product-card .product-image {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.product-card h4 {
    font-size: 1.4em; /* Reverted to desktop font size */
    color: var(--ghibli-forest-deep);
    margin-bottom: 10px;
}

.product-card p {
    font-size: 1em; /* Reverted to desktop font size */
    color: var(--ghibli-text-dark);
    margin-bottom: 20px;
    flex-grow: 1;
}

.product-card .product-link {
    background-color: var(--ghibli-forest-deep);
    color: var(--ghibli-text-dark);
    padding: 12px 25px; /* Reverted to desktop padding */
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95em; /* Reverted to desktop font size */
    transition: background-color 0.3s ease, transform 0.3s ease;
    margin-top: auto;
}

.product-card .product-link:hover {
    background-color: var(--ghibli-sun-bright);
    color: var(--ghibli-forest-deep);
    transform: translateY(-2px);
}

/* Matchmaker Specific Styles */
.matchmaker-container {
    padding: 50px; /* Reverted to desktop padding */
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    /* box-sizing: border-box; - Keep this, it's generally good practice */
}

.matchmaker-steps {
    margin-top: 30px;
    border: 1px solid var(--ghibli-sky-mid);
    border-radius: 15px; /* Reverted to desktop border-radius */
    padding: 30px; /* Reverted to desktop padding */
    background-color: var(--ghibli-text-light);
    box-shadow: 0 8px 20px var(--shadow-light);
    overflow: hidden;
}

.matchmaker-step {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.matchmaker-step.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.matchmaker-step h4 {
    font-size: 1.8em; /* Reverted to desktop font size */
    color: var(--ghibli-forest-deep);
    margin-bottom: 25px;
    text-align: center;
}

.options-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Reverted to desktop gap */
    justify-content: center;
    margin-bottom: 30px;
}

.option-card {
    background-color: var(--ghibli-sky-light);
    border: 2px solid var(--ghibli-sky-mid);
    border-radius: 15px; /* Reverted to desktop border-radius */
    padding: 20px; /* Reverted to desktop padding */
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1 1 calc(33.33% - 40px/3); /* Reverted to desktop flex basis for 3 columns */
    min-width: 180px; /* Reverted to desktop min-width */
    box-shadow: 0 2px 8px var(--shadow-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100px; /* Reverted to desktop min-height */
    /* box-sizing: border-box; - Keep this, it's generally good practice */
}

.option-card:hover {
    background-color: var(--ghibli-sky-mid);
    border-color: var(--ghibli-forest-deep);
    transform: translateY(-5px);
    box-shadow: 0 5px 15px var(--shadow-medium);
}

.option-card input[type="radio"] {
    display: none;
}

/* Ensure selected card styles apply to the *card itself* */
.option-card input[type="radio"]:checked + i + span,
.option-card input[type="radio"]:checked + span {
    /* These specific styles are problematic, the parent .option-card needs to be selected */
    /* Remove background-color, border-color, box-shadow, transform from here */
    background-color: transparent; /* This ensures the text/icon don't get their own background */
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

.option-card input[type="radio"]:checked + i,
.option-card input[type="radio"]:checked + i + i {
    color: var(--ghibli-forest-deep);
}

.option-card span {
    font-size: 1.2em; /* Reverted to desktop font size */
    font-weight: 600;
    color: var(--ghibli-text-dark);
    display: block;
    transition: color 0.3s ease;
}

.option-card i {
    font-size: 3em; /* Reverted to desktop icon size */
    color: var(--ghibli-stone-grey);
    margin-bottom: 15px;
    transition: color 0.3s ease;
}

/* This is the correct way to style the *parent* label when the radio is checked */
.option-card:has(input[type="radio"]:checked) {
    background-color: var(--ghibli-sun-bright);
    border-color: var(--ghibli-forest-deep);
    box-shadow: 0 3px 10px var(--shadow-medium);
    transform: translateY(-3px);
}

/* This ensures text and icon change color when the card is selected */
.option-card:has(input[type="radio"]:checked) span,
.option-card:has(input[type="radio"]:checked) i {
    color: var(--ghibli-forest-deep);
}

/* Recommended Product Display */
.recommended-product-display {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    margin-top: 40px;
    text-align: center;
    background-color: var(--ghibli-sky-light);
    border: 2px solid var(--ghibli-forest-deep);
    border-radius: 15px; /* Reverted to desktop border-radius */
    padding: 30px; /* Reverted to desktop padding */
    box-shadow: 0 8px 20px var(--shadow-medium);
}

.recommended-product-display.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.recommended-product-display h3 {
    color: var(--ghibli-forest-deep);
    font-size: 2em; /* Reverted to desktop font size */
    margin-bottom: 25px;
}

.recommended-product-display .product-card {
    background-color: var(--ghibli-text-light);
    border: 1px solid var(--ghibli-sky-mid);
    padding: 25px; /* Reverted to desktop padding */
    border-radius: 10px;
    box-shadow: 0 2px 10px var(--shadow-light);
    display: inline-block;
    width: 80%; /* Reverted to desktop width */
    margin: 0 auto 20px auto;
}

.recommended-product-display .product-card h4 {
    font-size: 1.5em; /* Reverted to desktop font size */
    margin-top: 15px;
}

.recommended-product-display .product-card p {
    font-size: 1.1em; /* Reverted to desktop font size */
}

.product-accessories {
    margin-top: 25px;
    padding: 15px 20px; /* Reverted to desktop padding */
    background-color: var(--ghibli-petal-soft);
    border-radius: 10px;
    border: 1px dashed var(--ghibli-forest-deep);
    max-width: 80%; /* Reverted to desktop max-width */
    margin-left: auto;
    margin-right: auto;
}

.product-accessories h4 {
    font-size: 1.3em; /* Reverted to desktop font size */
    color: var(--ghibli-forest-deep);
    margin-bottom: 10px;
}

.product-accessories p {
    font-size: 1.1em; /* Reverted to desktop font size */
    color: var(--ghibli-text-dark);
}

.note-message {
    background-color: #fff3cd;
    border-left: 5px solid #ffc107;
    padding: 15px; /* Reverted to desktop padding */
    margin-top: 20px;
    border-radius: 8px;
    color: #664d03;
    font-size: 0.95em; /* Reverted to desktop font size */
    text-align: left;
    width: 70%; /* Reverted to desktop width */
    margin-left: auto;
    margin-right: auto;
}

.warning-message {
    background-color: #f8d7da;
    border-left: 5px solid #dc3545;
    padding: 15px; /* Reverted to desktop padding */
    margin: 20px 0;
    border-radius: 8px;
    color: #58151c;
    font-weight: bold;
    font-size: 1.05em; /* Reverted to desktop font size */
    text-align: left;
}

.error-message {
    background-color: #dc3545;
    color: white;
    padding: 15px; /* Reverted to desktop padding */
    margin: 20px 0;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.1em; /* Reverted to desktop font size */
    text-align: center;
}
#motor1_unsupported_message.error-message {
    color: white;
}

.reset-button-container {
    text-align: center;
    margin-top: 40px;
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.reset-button-container.active {
    display: block;
    opacity: 1;
}

#buyNowButton {
    display: block; 
    width: fit-content;
    margin: 20px auto;
}

/* General Section Visibility Animations - These look fine as is */
.hidden-section {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive Design - Only apply overrides for smaller screens */

/* Media query for screens up to 992px (e.g., tablets in portrait, large phones) */
@media (max-width: 992px) {
    /* Existing story-content adjustments */
    .story-content {
        flex-direction: column;
        text-align: center;
    }

    .story-content.reverse-layout {
        flex-direction: column;
    }

    .story-image-wrapper {
        padding: 0;
    }

    .text-overlay {
        padding: 10px;
    }

    .text-overlay h2 {
        font-size: 2.5em;
    }

    .text-overlay h3 {
        font-size: 2em;
    }

    .text-overlay p {
        font-size: 1em;
    }

    .trait-list {
        grid-template-columns: 1fr;
    }

    .navbar nav ul {
        display: none;
    }

    /* Product Matchmaker Specific for 992px */
    #product-matchmaker .story-content {
        gap: 40px; /* Slightly reduced gap for larger tablets */
        padding: 40px; /* Slightly reduced padding */
    }

    #product-matchmaker .product-intro h3 {
        font-size: 2.8em; /* Slightly smaller for tablets */
    }

    #product-matchmaker .product-intro p {
        font-size: 1.1em; /* Slightly smaller for tablets */
    }

    #product-matchmaker .product-intro .intro-container {
        flex-direction: column; /* Stack on tablets as well */
        gap: 30px;
    }

    #product-matchmaker .product-intro .intro-text {
        min-width: unset; /* Allow to shrink */
        width: 100%; /* Take full width */
    }

    #product-matchmaker .product-intro .intro-image {
        max-width: 70%; /* Adjust image size for tablets */
        margin-top: 20px;
    }

    .matchmaker-step h4 {
        font-size: 1.6em;
    }
    .options-container {
        gap: 15px; /* Reduced gap between cards for tablets */
    }
    .option-card {
        flex: 1 1 calc(50% - 15px); /* Two columns on medium screens */
        min-width: unset; /* Allow to shrink further */
        min-height: 90px; /* Maintain height */
        padding: 15px; /* Adjusted padding */
    }
    .option-card span {
        font-size: 1.1em; /* Adjusted font size */
    }
    .option-card i {
        font-size: 2.8em; /* Adjusted icon size */
    }

    .recommended-product-display h3 {
        font-size: 1.8em;
    }
    .recommended-product-display .product-card {
        width: 90%; /* Make card wider on tablets */
    }
    .product-accessories {
        max-width: 90%; /* Make accessories wider on tablets */
    }
    .note-message,
    .warning-message,
    .error-message {
        width: 90%; /* Make messages wider on tablets */
    }
}

/* Media query for screens up to 768px (e.g., typical mobile phones) */
@media (max-width: 768px) {
    .navbar .logo h1 {
        font-size: 1.5em;
    }
    .navbar .logo img {
        height: 35px;
    }

    .story-section {
        padding: 40px 0;
    }

    .text-overlay {
        padding: 10px;
    }    

    .text-overlay h2 {
        font-size: 2em;
    }

    .text-overlay h3 {
        font-size: 1.8em;
    }

    .text-overlay p {
        font-size: 1em;
    }

    .cta-button {
        padding: 12px 25px;
        font-size: 1em;
    }

    .product-grid .product-img {
        width: 60px;
        height: 60px;
    }

    .benefit-list li {
        font-size: 1.1em;
        padding-left: 30px;
    }

    .benefit-list li::before {
        font-size: 1.3em;
    }

    .trait-item h4 {
        font-size: 1.2em;
    }

    .trait-item p {
        font-size: 0.9em;
    }

    .product-card {
        padding: 20px;
        border-radius: 12px; /* Adjusted for smaller screens */
        max-width: 350px; /* Limit max width even when full-width */
        width: 100%; /* Take full width of parent on small screens */
    }
    .product-card:hover {
        transform: translateY(-3px); /* Less dramatic hover */
        box-shadow: 0 5px 15px var(--shadow-medium);
    }
    .product-card .product-image-container {
        height: 150px; /* Smaller height for product image container */
    }
    .product-card h4 {
        font-size: 1.2em;
    }
    .product-card p {
        font-size: 0.95em;
    }
    .product-link {
        padding: 10px 20px;
        font-size: 0.9em;
    }

    /* Product Matchmaker Specific for 768px */
    #product-matchmaker .story-content {
        gap: 30px; /* Further reduced gap for mobile */
        padding: 20px; /* Further reduced padding */
    }
    #product-matchmaker .product-intro h3 {
        font-size: 2.2em; /* Smaller for mobile */
    }
    #product-matchmaker .product-intro p {
        font-size: 1em; /* Smaller for mobile */
        padding: 0 10px; /* Add horizontal padding to intro text */
    }
    #product-matchmaker .product-intro .intro-image {
        max-width: 85%; /* Adjust image size for mobile */
    }

    .matchmaker-container {
        padding: 20px; /* Reduced padding */
    }
    .matchmaker-steps {
        padding: 20px; /* Reduced padding */
        border-radius: 12px;
    }
    .matchmaker-step h4 {
        font-size: 1.5em;
    }
    .options-container {
        flex-direction: column; /* Stack options vertically on mobile */
        gap: 10px; /* Further reduced gap */
    }
    .option-card {
        width: 100%; /* Make cards full width on mobile */
        min-height: 80px; /* Reduced min-height for mobile */
        padding: 12px; /* Reduced padding */
    }
    .option-card i {
        font-size: 2.5em !important; /* Specific override for mobile icon size */
        margin-bottom: 8px;
    }
    .option-card span {
        font-size: 1em; /* Adjusted for mobile */
    }
    .recommended-product-display h3 {
        font-size: 1.5em;
    }
    .recommended-product-display .product-card {
        width: 95%; /* Make card nearly full width */
    }
    .product-accessories {
        padding: 12px 15px;
        max-width: 95%;
    }
    .product-accessories h4 {
        font-size: 1.1em;
    }
    .product-accessories p {
        font-size: 0.95em;
    }
    .note-message,
    .warning-message,
    .error-message {
        padding: 10px;
        font-size: 0.9em;
        width: 95%;
    }
}

@media (max-width: 768px) {
    .text-overlay {
        padding: 10px; 
    }
}

.social-list {
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center;
    align-items: flex-start; 
    gap: 30px;
    margin-top: 30px;     
    max-width: 1200px;
    margin: 0 auto;
}

.social-item {
    background: var(--ghibli-petal-soft);
    color: var(--ghibli-text-dark);
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 8px 20px var(--shadow-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.7);

    min-width: 350px;
    max-width: 350px;
    flex-shrink: 0;
    flex-grow: 0;

    display: flex;
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
}

.social-item:hover {
    transform: translateY(-8px); /* More pronounced lift */
    box-shadow: 0 12px 25px var(--shadow-medium);
}

/* These rules for h4 and p are kept for other potential uses within social-item,
   but they will not affect the specific social item you are modifying if h4 and p are removed from its HTML. */
.social-item h4 {
    color: var(--ghibli-forest-deep); /* Deep green for trait headings */
    font-size: 1.4em;
    margin-bottom: 0.6em;
    text-shadow: none; /* No shadow on trait headings */
}
.social-item p {
    font-size: 1.05em;
}

.social-reverse {
    background: var(--ghibli-sky-mid);
}

/* --- New and Updated Styles for the clickable content --- */

.social-link-wrapper {
    display: flex; /* Enables flexbox layout for children */
    flex-direction: column; /* Stacks children (image, then icon/text group) vertically */
    justify-content: center; /* Centers items vertically within the link wrapper */
    align-items: center; /* Centers items horizontally within the link wrapper */
    width: 100%; /* Make the link take the full width of its parent div */
    height: 100%; /* Make the link take the full height of its parent div */
    text-decoration: none; /* Removes underline from the link */
    color: inherit; /* Inherits text color from .social-item */
}

.social-item-image {
    max-width: 100%; /* Ensures the image doesn't overflow its container */
    height: auto; /* Maintains the image's aspect ratio */
    max-height: 400px; /* Sets the maximum height for the image as requested */
    object-fit: contain; /* Ensures the entire image is visible within its bounds */
    margin-bottom: 10px; /* Adds space between the image and the icon/text row below it */
}

.social-icon-text-group {
    display: flex; /* Enables flexbox for the icon and text */
    align-items: center; /* Vertically centers the icon and text with respect to each other */
    justify-content: center; /* Horizontally centers the icon and text within their group */
    gap: 8px; /* Adds space between the icon and the text */
}

.social-icon-text-group .social-icon {
    font-size: 2.5em; /* Adjust icon size as needed */
}

.social-icon-text-group span {
    font-size: 1.1em; /* Adjust text size as needed */
    font-weight: bold;
    color: var(--ghibli-text-dark); /* Ensures the text color is dark */
}

/* Optional: Add a hover effect for the link wrapper itself */
.social-link-wrapper:hover {
    color: var(--ghibli-forest-deep); /* Example: changes text color on hover */
}

/* Contact Section */
.contact-us {
    text-align: center;
}

.contact-us h3 {
    margin-bottom: 25px;
}

.contact-us p {
    max-width: 700px;
    margin: 0 auto 30px auto;
}

.contact-form {
    display: flex;
    flex-direction: column;
    max-width: 600px;
    margin: 0 auto;
    padding: 30px;
    background-color: var(--ghibli-sky-light);
    border-radius: 15px;
    box-shadow: 0 5px 15px var(--shadow-light);
}

.contact-form label {
    font-size: 1.1em;
    color: var(--ghibli-forest-deep);
    margin-bottom: 8px;
    text-align: left;
    font-weight: 600;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    padding: 12px 14px; /* More padding */
    border: 2px solid var(--ghibli-stone-grey); /* Thicker, muted border */
    border-radius: 10px; /* Softer corners */
    font-size: 1.1em;
    background-color: rgba(255, 255, 255, 0.95);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--ghibli-sun-bright); /* Bright accent on focus */
    box-shadow: 0 0 10px rgba(253, 216, 127, 0.7); /* Glowing effect */
    outline: none;
}

.contact-form textarea {
    resize: vertical; /* Allow vertical resizing */
}

.contact-info {
    margin-top: 35px;
    font-size: 1.15em;
    color: var(--ghibli-text-dark);
}

.contact-info a {
    font-weight: bold;
    color: var(--ghibli-forest-deep); /* Consistent link color */
}


/* Footer */
footer {
    background-color: var(--ghibli-forest-deep); /* Dark, rich green footer */
    color: var(--ghibli-text-light);
    text-align: center;
    padding: 30px 0;
    margin-top: 50px;
    box-shadow: 0 -4px 8px var(--shadow-medium);
}

footer p {
    font-size: 0.95em;
    margin: 0;
}