:root {
    --primary-green: #005199;
    /* Main Blue */
    --icon-green: #ed3b43;
    /* Accent Red */
    /* Bright green for search icon */
    --bg-grey: #f5f7fa;
    --text-dark: #1a1a1a;
    --font-family: 'Roboto', sans-serif;
}

body {
    font-family: var(--font-family);
    background-color: #f4f6f9 !important;
    /* Back to Grey per user request "Site White -> Header Grey" correction */
}

/* Header Styles */
.header-wrapper {
    background-color: #f4f6f9 !important;
    /* Match body grey */
}

header {
    background-color: #ffffff !important;
    /* Header White */
}

/* Ensure rounded corners are visible with padding */
.rounded-4 {
    border-radius: 1rem !important;
}

.logo-icon i {
    color: #ed3b43 !important;
    /* Red Icon */
}

/* Search Bar Specifics */
.search-container {
    background-color: #ffffff !important;
    /* White search bar to contrast with grey header */
    max-width: 600px;
    margin: 0 auto;
    /* Center it */
}

.search-icon-wrapper {
    width: 36px;
    height: 36px;
    min-width: 36px;
    justify-content: center;
    border-radius: 50%;
    /* Ensure circular */
}

.search-container input {
    font-size: 1rem;
    /* Larger input text */
    color: #333;
}

.search-container input::placeholder {
    color: #777;
}

/* Typography & Spacing */
.fw-bold {
    font-weight: 700 !important;
}

.fw-medium {
    font-weight: 600 !important;
    /* Bolder for better visibility */
}

/* Override bootstrap small to be larger as requested */
.small,
small {
    font-size: 0.95rem !important;
    /* Increased from 0.85rem */
}

.badge {
    font-weight: 600;
}

/* Specific component tweaks */
.vr {
    width: 1px;
    background-color: #ccc;
    opacity: 1;
}

.bi-percent {
    color: #ed3b43 !important;
    /* Red for discounts */
}

/* Hover effects */
header a:hover {
    color: var(--icon-green) !important;
}

/* Hero Section */
.hero-card {
    background-color: #005199;
    /* Primary Blue */
    padding-bottom: 0 !important;
    transition: background-color 0.5s ease;
}

.hero-bg-text {
    position: absolute;
    top: 25%;
    /* First third of the screen */
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 19vw;
    /* Adjusted for mixed case width */
    font-weight: 900;
    color: rgba(255, 255, 255, 0.05);
    /* Subtle transparency for contrast on Blue */
    opacity: 1;
    line-height: 0.8;
    z-index: 1;
    pointer-events: none;
    /* text-transform: uppercase; REMOVED */
    width: 100%;
    letter-spacing: -5px;
}

.hero-image-container {
    position: relative;
    z-index: 10;
    margin-bottom: 0;
    /* Remove negative margin to sit flush */
    display: flex;
    align-items: flex-end;
    /* Ensure image runs to bottom */
    height: 100%;
}

.mix-blend-multiply {
    mix-blend-mode: multiply;
    /* Makes white background transparent */
    filter: contrast(1.1);
}



.dr-raouf-logo-overlay {
    position: absolute;
    top: 36%;
    right: 23%;
    width: 65px;
    background: white;
    padding: 3px;
    border-radius: 2px;
    transform: rotate(-12deg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
}

.upload-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    border: none !important;
}

/* Categories Section */
.categories-section {
    border-top-left-radius: 2.5rem;
    border-top-right-radius: 2.5rem;
    margin-top: -40px;
    /* Negative margin to pull it up over the green hero */
    z-index: 20;
    /* Ensure it sits on top of hero */
    padding-top: 60px !important;
    /* Compensate for negative margin + extra space */
}

/* Individual Category Card */
.category-card {
    transition: transform 0.3s ease;
    cursor: pointer;
}

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

.category-img-wrapper {
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f8f9fa;
    /* Fallback */
}

.category-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-title {
    color: #1a1a3c;
    /* Dark blue/purple shade from image */
    font-size: 1rem;
}

/* Best Deals Section */
.product-card {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 1.5rem;
    transition: box-shadow 0.3s ease;
}

.product-card:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    border-color: transparent;
}

.product-img-wrapper {
    height: 200px;
    background-color: #f8f9fa;
    border-radius: 1rem;
    padding: 1rem;
}

.product-img-wrapper img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.product-card .btn-outline-dark {
    border-width: 1px;
    font-size: 0.8rem;
    font-weight: 600;
}

.product-card .btn-outline-dark:hover {
    background-color: #000;
    color: #fff;
}

/* Promo Cards Section */
.bg-yellow {
    background-color: #fff9c4;
    /* Light Yellow */
}

.bg-peach {
    background-color: #ffccbc;
    /* Light Peach */
}

.btn-dark-brown {
    background-color: #3e2723;
    border: none;
}

.btn-dark-brown:hover {
    background-color: #3e2723;
}

.btn-dark-purple {
    background-color: #1a1a2e;
    /* Deep purple/black */
    border: none;
}

.btn-dark-purple:hover {
    background-color: #1a1a2e;
}


/* Featured Brands Section */
.brand-circle {
    width: 140px;
    height: 140px;
    transition: transform 0.3s ease;
}

.brand-circle:hover {
    transform: translateY(-5px);
}

/* Mixed Promo Cards Section */
.promo-box {
    min-height: 320px;
    transition: transform 0.3s ease;
}

.promo-box:hover {
    transform: translateY(-5px);
}

.bg-orange-soft {
    background-color: #ffccb0;
    /* Soft Peach/Orange */
}

.bg-teal-soft {
    background-color: #b2dfdb;
    /* Soft Teal */
}

.bg-yellow-soft {
    background-color: #fff59d;
    /* Soft Yellow */
}

.promo-img {
    mix-blend-mode: multiply;
    /* Helps blend the image background if not perfectly transparent */
    filter: contrast(1.1);
}

/* Adjust image positioning for specific layouts */
.promo-box .promo-img-container.position-absolute {
    bottom: 0;
    right: 0;
    width: 60%;
    /* Limit width to not overlap text too much */
}

.bg-orange-soft .promo-img-container {
    /* Maternal card image might need different positioning */
    margin-top: -20px;
    margin-right: -20px;
}

.bg-orange-soft .promo-img {
    max-height: 300px;
    border-bottom-right-radius: 2rem;
}

/* Cereal Healthy Food Section */
.cereal-card {
    min-height: 600px;
    /* Ensure tall enough */
}

/* Specific stacking for the bottom tabs */
.flavor-tab {
    transition: transform 0.3s ease;
    cursor: pointer;
}

.flavor-tab:hover {
    transform: translateY(-5px);
}

/* Adjust the bottom tabs visually */
.cereal-section .bg-warning {
    position: absolute;
    bottom: 50px;
    /* Sits above the Peach one */
    left: 0;
    z-index: 1;
    transform: scaleX(0.95);
    /* Slightly narrower? Reference looks full width usually or stacked. Let's keep full width but stacked vertically */
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
}

.cereal-section .bg-warning+div {
    /* This selector targets the Oats/Orange div if it follows immediately */
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    /* Actually Orange is bottom-most? No, in the image Orange is bottom, Yellow is above it, Blue is main.
       Wait, usually cards stack like papers. Top sheet is Blue. Underneath is Yellow. Underneath is Orange.
       The visual shows Blue card *ending*, then Yellow strip, then Orange strip.
       So Blue shouldn't cover them. They should append to bottom.
       
       Let's adjust HTML structure in next step to be cleaner if needed, or CSS hack it. 
       Better approach: The tabs are INSIDE the .cereal-card container.
       So .cereal-card needs padding-bottom to reveal them? Or they overlay?
       
       In the provided HTML, I put them absolute bottom. Background of card is #a7e4e1.
       If Yellow is bottom: 50px, and Orange is bottom: 0.
       Main card content needs to not overlap them.
    */
    background-color: #ffab91;
    /* Deep Peach/Orange */
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
    height: 60px !important;
    padding-top: 15px;
}

/* Fix z-indexes */
.cereal-card .row {
    position: relative;
    z-index: 10;
    /* Above the tabs */
    padding-bottom: 80px;
    /* specific space for tabs */
}

.cereal-img {
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.15));
}

/* Customer Reviews Section */
.review-card {
    background-color: #f0f4f8 !important;
    /* Light blue-ish grey from image */
    transition: transform 0.3s ease;
    border: none;
}

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

/* Delivery & Membership Section */
.bg-medical-yellow {
    background-color: #fff59d !important;
    /* Lighter yellow */
}

.bg-medical-green {
    background-color: #cfe2ff !important;
    /* Light Blue */
}

.feature-banner {
    min-height: 400px;
}

/* FAQ Section */
.faq-item {
    background-color: #f0f4f8;
    /* Default grey background */
    transition: background-color 0.3s ease;
}

.faq-question {
    background-color: transparent;
    /* Button takes parent bg */
}

/* Active State */
.faq-item.active {
    background-color: #005199 !important;
    /* Active Blue */
    color: #fff;
}

/* Chevron Rotation */
.transition-transform {
    transition: transform 0.3s ease;
}

.faq-item.active .transition-transform {
    transform: rotate(180deg);
    filter: brightness(0) invert(1);
    /* Make chevron white on blue bg */
    filter: brightness(0) invert(1);
}

/* Force text white in active state to override Bootstrap text-dark */
.faq-item.active .faq-question span,
.faq-item.active .faq-answer div {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Answer Visibility */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.faq-item.active .faq-answer {
    max-height: 500px;
    /* Arbitrary large height to allow expansion */
    transition: max-height 0.5s ease-in;
}

/* Download App Section */
.bg-light-blue {
    background-color: #eef2f6;
    /* Very light grey/blue */
}

/* Download App Section */
.bg-light-blue {
    background-color: #eef2f6;
    /* Very light grey/blue */
}

.download-card {
    min-height: 500px;
}

.app-download-section .btn {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.app-download-section .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.phone-mockup-wrapper img {
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.2));
    transition: transform 0.3s ease;
}


/* Footer Section */
.bg-dark-green {
    background-color: #005199 !important;
    /* Primary Blue */
}

.footer-white-card {
    min-height: 400px;
}

.footer-brand-banner {
    min-height: 250px;
}

.footer-links-card h6 {
    font-size: 1.1rem;
}

.footer-links-card ul li a:hover {
    color: var(--primary-green) !important;
    text-decoration: underline !important;
}

/* Specific Logo Icon Styling */
.logo-icon-large i {
    font-size: 5rem;
    color: #ed3b43;
}


/* Owl Carousel Navigation Styling - Larger Arrows */
.best-deals-carousel .owl-nav {
    margin-top: 25px;
    text-align: center;
    direction: ltr !important;
    /* Keep arrows left/right correctly oriented */
}

.best-deals-carousel .owl-nav button.owl-prev,
.best-deals-carousel .owl-nav button.owl-next {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 50% !important;
    width: 40px !important;
    /* Reduced from 60px */
    height: 40px !important;
    /* Reduced from 60px */
    line-height: 38px !important;
    /* Adjusted for centering */
    font-size: 18px !important;
    /* Reduced from 28px */
    margin: 0 10px !important;
    transition: all 0.3s ease;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.best-deals-carousel .owl-nav button.owl-prev:hover,
.best-deals-carousel .owl-nav button.owl-next:hover {
    background: #ed3b43 !important;
    /* Brand Red */
    color: #ffffff !important;
    border-color: #ed3b43 !important;
    transform: scale(1.1);
    box-shadow: 0 6px 15px rgba(237, 59, 67, 0.3);
}

/* Trickces Link Hover Effect */
.trickces-link {
    transition: color 0.3s ease;
}


/* Smaller App Download Buttons (approx 2/3 size) */
.btn-app-small {
    padding: 0.35rem 0.6rem !important;
    /* Reduced padding */
    border-radius: 0.4rem !important;
    /* Adjusted radius */
}

.btn-app-small i {
    font-size: 1rem !important;
    /* Reduced icon size */
}

.btn-app-small .small-text {
    font-size: 0.45rem !important;
}

.btn-app-small .large-text {
    font-size: 0.65rem !important;
}

/* Social Network Icons Styling */
.social-icons li {
    display: inline-block;
    margin: 0 5px;
}

.social-networks {
    font-size: 1.5rem;
    color: #6c757d;
    /* Bootstrap text-secondary default */
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-networks:hover {
    color: #ed3b43;
    /* Brand Red */
    transform: translateY(-3px);
}

/* Footer Links Hover Effect */
.footer-link:hover {
    color: #ed3b43 !important;
}

.footer-link:hover i {
    color: #ed3b43 !important;
}

.pl-50px {
    padding-left: 50px;
}

.upload-card {
    margin-right: 50px;
    margin-left: 0;
    margin-bottom: 30px !important;
}

@media(max-width: 575px) {
    .upload-card {
        margin-right: 20px !important;
        margin-left: 20px !important;
    }


}

@media(min-width: 575px) {
    .abcd {
        margin-top: 200px;
        padding-left: 5vw;
    }

    .xyz {
        margin-top: 75px;
    }
}