/* General Styles */\nbody {\n    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n    line-height: 1.6;\n    color: #333;\n    background-color: #F8F9FA;\n    padding-top: 70px; /* For fixed header */\n}\n\nh1, h2, h3, h4, h5, h6 {\n    font-family: 'Arial', sans-serif;\n    color: #2C3E50;\n    margin-bottom: 1rem;\n}\n\nh1 {\n    font-size: 2.5rem;\n    font-weight: 700;\n}\n\nh2 {\n    font-size: 2rem;\n    font-weight: 600;\n}\n\nh3 {\n    font-size: 1.75rem;\n    font-weight: 500;\n}\n\na {\n    color: #1ABC9C; /* Verde mentă */\n    text-decoration: none;\n}\n\na:hover {\n    color: #16A085;\n    text-decoration: underline;\n}\n\n.container {\n    max-width: 1200px;\n}\n\n.btn-primary {\n    background-color: #1ABC9C; /* Verde mentă */\n    border-color: #1ABC9C;\n    color: #fff;\n}\n\n.btn-primary:hover {\n    background-color: #16A085;\n    border-color: #16A085;\n}\n\n.btn-secondary {\n    background-color: #3498DB; /* Albastru deschis */\n    border-color: #3498DB;\n}\n\n.btn-secondary:hover {\n    background-color: #2980B9;\n    border-color: #2980B9;\n}\n\n.btn-info {\n    background-color: #F1C40F; /* Galben lămâie */\n    border-color: #F1C40F;\n    color: #333;\n}\n\n.btn-info:hover {\n    background-color: #F39C12;\n    border-color: #F39C12;\n}\n\n/* Header */\nheader {\n    background-color: #FFFFFF;\n    box-shadow: 0 2px 4px rgba(0,0,0,.08);\n    z-index: 1030;\n}\n\n.navbar-brand {\n    font-family: 'Arial', sans-serif;\n    font-weight: 700;\n    font-size: 1.8rem;\n    color: #1ABC9C !important;\n}\n\n.navbar-nav .nav-link {\n    color: #333 !important;\n    font-weight: 500;\n    padding: 0.5rem 1rem;\n}\n\n.navbar-nav .nav-link:hover,\n.navbar-nav .nav-item.active .nav-link {\n    color: #1ABC9C !important;\n}\n\n/* Footer */\nfooter {\n    background-color: #E9ECEF;\n    color: #555;\n    padding-top: 3rem;\n    border-top: 1px solid #dee2e6;\n}\n\nfooter a {\n    color: #555;\n}\n\nfooter a:hover {\n    color: #1ABC9C;\n}\n\n/* Cookie Banner */\n.cookie-banner {\n    position: fixed;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    background-color: #2C3E50;\n    color: #fff;\n    padding: 15px 0;\n    text-align: center;\n    z-index: 1050;\n    box-shadow: 0 -2px 5px rgba(0,0,0,0.2);\n    display: none; /* Hidden by default */\n}\n\n.cookie-banner p {\n    margin-bottom: 10px;\n    font-size: 0.9rem;\n}\n\n.cookie-banner .btn {\n    margin: 5px;\n    font-size: 0.85rem;\n    padding: 8px 15px;\n}\n\n/* Hero Section */\n.hero-section {\n    position: relative;\n    height: 450px;\n    background-size: cover;\n    background-position: center;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #fff;\n    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);\n    text-align: center;\n    margin-bottom: 3rem;\n}\n\n.hero-content {\n    max-width: 800px;\n    padding: 20px;\n    background-color: rgba(0, 0, 0, 0.3);\n    border-radius: 10px;\n}\n\n.hero-content h1 {\n    color: #fff;\n    font-size: 3rem;\n    margin-bottom: 1rem;\n}\n\n.hero-content p {\n    font-size: 1.2rem;\n    line-height: 1.8;\n}\n\n/* Section Layouts */\n.section-padding {\n    padding: 4rem 0;\n}\n\n.bg-light-green {\n    background-color: #E8F6F3; /* Light Verde mentă */\n}\n\n.bg-light-blue {\n    background-color: #D6EAF8; /* Light Albastru deschis */\n}\n\n.bg-light-yellow {\n    background-color: #FCF3CF; /* Light Galben lămâie */\n}\n\n.bg-light-coral {\n    background-color: #FADBD8; /* Light Coral */\n}\n\n/* Two-column layout */\n.two-column-section .col-md-6 {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n\n.two-column-section img {\n    max-width: 100%;\n    height: auto;\n    border-radius: 8px;\n    box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n}\n\n/* Card Layout */\n.card-grid .card {\n    border: none;\n    border-radius: 10px;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n    transition: transform 0.3s ease, box-shadow 0.3s ease;\n    height: 100%;\n}\n\n.card-grid .card:hover {\n    transform: translateY(-5px);\n    box-shadow: 0 8px 16px rgba(0,0,0,0.15);\n}\n\n.card-grid .card-body {\n    padding: 1.5rem;\n}\n\n.card-grid .card-title {\n    color: #1ABC9C;\n    font-weight: 600;\n}\n\n.card-icon {\n    font-size: 2.5rem;\n    color: #1ABC9C;\n    margin-bottom: 1rem;\n}\n\n/* Timeline (CSS-driven) */\n.timeline {\n    position: relative;\n    padding: 20px 0;\n    list-style: none;\n}\n\n.timeline::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    width: 4px;\n    background-color: #D6EAF8; /* Light Albastru deschis */\n    left: 50%;\n    margin-left: -2px;\n}\n\n.timeline-item {\n    margin-bottom: 20px;\n    position: relative;\n}\n\n.timeline-item-content {\n    background-color: #fff;\n    padding: 20px;\n    border-radius: 8px;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.05);\n    position: relative;\n    width: 45%;\n}\n\n.timeline-item-content::before {\n    content: '';\n    position: absolute;\n    top: 20px;\n    width: 0;\n    height: 0;\n    border-style: solid;\n}\n\n.timeline-item:nth-child(odd) .timeline-item-content {\n    left: 0;\n}\n\n.timeline-item:nth-child(even) .timeline-item-content {\n    left: 55%;\n}\n\n.timeline-item:nth-child(odd) .timeline-item-content::before {\n    border-width: 10px 0 10px 10px;\n    border-color: transparent transparent transparent #fff;\n    right: -10px;\n}\n\n.timeline-item:nth-child(even) .timeline-item-content::before {\n    border-width: 10px 10px 10px 0;\n    border-color: transparent #fff transparent transparent;\n    left: -10px;\n}\n\n.timeline-item-dot {\n    position: absolute;\n    top: 20px;\n    left: 50%;\n    width: 16px;\n    height: 16px;\n    background-color: #1ABC9C; /* Verde mentă */\n    border-radius: 50%;\n    margin-left: -8px;\n    z-index: 1;\n    border: 2px solid #fff;\n}\n\n/* Nutrient Icons (CSS-driven) */\n.nutrient-icon-grid .nutrient-item {\n    text-align: center;\n    padding: 15px;\n    background-color: #fff;\n    border-radius: 8px;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.05);\n    margin-bottom: 15px;\n}\n\n.nutrient-icon {\n    font-size: 3rem;\n    color: #F39C12; /* Coral */\n    margin-bottom: 10px;\n    display: block;\n}\n\n/* Blog Section Icons (CSS-driven) */\n.blog-card-icon {\n    font-size: 2rem;\n    color: #3498DB; /* Albastru deschis */\n    margin-right: 15px;\n}\n\n.blog-card {\n    display: flex;\n    align-items: center;\n    background-color: #fff;\n    padding: 15px;\n    border-radius: 8px;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.05);\n    margin-bottom: 15px;\n    transition: transform 0.2s ease;\n}\n\n.blog-card:hover {\n    transform: translateX(5px);\n}\n\n.blog-card h3 {\n    margin-bottom: 5px;\n    font-size: 1.25rem;\n}\n\n.blog-card p {\n    font-size: 0.9rem;\n    color: #666;\n    margin-bottom: 0;\n}\n\n/* Hydration Panel (Text-right / CSS-graphic-left) */\n.hydration-panel {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    background-color: #D6EAF8; /* Light Albastru deschis */\n    padding: 3rem;\n    border-radius: 10px;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n}\n\n.hydration-graphic {\n    flex: 1;\n    min-width: 250px;\n    height: 200px;\n    background-color: #3498DB; /* Albastru deschis */\n    border-radius: 10px;\n    margin-right: 2rem;\n    position: relative;\n    overflow: hidden;\n}\n\n.hydration-graphic::before {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 70%;\n    background: linear-gradient(to top, #2980B9, #3498DB);\n    border-radius: 10px 10px 0 0;\n}\n\n.hydration-graphic::after {\n    content: '💧';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    font-size: 4rem;\n    color: rgba(255,255,255,0.7);\n}\n\n.hydration-content {\n    flex: 2;\n    min-width: 300px;\n}\n\n/* Benefits List (CSS Icons) */\n.benefits-list .benefit-item {\n    display: flex;\n    align-items: flex-start;\n    margin-bottom: 1.5rem;\n}\n\n.benefit-icon {\n    font-size: 2rem;\n    color: #1ABC9C; /* Verde mentă */\n    margin-right: 15px;\n    flex-shrink: 0;\n}\n\n/* Myths Section (CSS-driven) */\n.myth-item {\n    background-color: #fff;\n    padding: 20px;\n    border-radius: 8px;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.05);\n    margin-bottom: 20px;\n}\n\n.myth-question {\n    font-weight: 600;\n    color: #F39C12; /* Coral */\n    cursor: pointer;\n    display: block;\n    position: relative;\n    padding-right: 30px;\n}\n\n.myth-question::after {\n    content: '+';\n    position: absolute;\n    right: 0;\n    top: 0;\n    transition: transform 0.3s ease;\n}\n\n.myth-item.active .myth-question::after {\n    transform: rotate(45deg);\n}\n\n.myth-answer {\n    margin-top: 10px;\n    display: none;\n}\n\n.myth-item.active .myth-answer {\n    display: block;\n}\n\n/* Meal Planning Steps (CSS-driven) */\n.step-item {\n    background-color: #fff;\n    padding: 20px;\n    border-radius: 8px;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.05);\n    margin-bottom: 20px;\n    position: relative;\n    padding-left: 60px;\n}\n\n.step-number {\n    position: absolute;\n    left: 20px;\n    top: 20px;\n    width: 30px;\n    height: 30px;\n    background-color: #F1C40F; /* Galben lămâie */\n    color: #fff;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-weight: 700;\n}\n\n/* FAQ (CSS-driven) */\n.faq-item {\n    margin-bottom: 15px;\n    border: 1px solid #eee;\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n.faq-question {\n    background-color: #f9f9f9;\n    padding: 15px 20px;\n    cursor: pointer;\n    font-weight: 600;\n    color: #2C3E50;\n    position: relative;\n}\n\n.faq-question::after {\n    content: '+';\n    position: absolute;\n    right: 20px;\n    top: 50%;\n    transform: translateY(-50%);\n    transition: transform 0.3s ease;\n}\n\n.faq-item.active .faq-question::after {\n    transform: translateY(-50%) rotate(45deg);\n}\n\n.faq-answer {\n    padding: 15px 20px;\n    background-color: #fff;\n    display: none;\n}\n\n.faq-item.active .faq-answer {\n    display: block;\n}\n\n/* Blog page specific styles */\n.blog-post-card {\n    background-color: #fff;\n    border-radius: 10px;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n    margin-bottom: 2rem;\n    overflow: hidden;\n    transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.blog-post-card:hover {\n    transform: translateY(-5px);\n    box-shadow: 0 8px 16px rgba(0,0,0,0.15);\n}\n\n.blog-post-card img {\n    width: 100%;\n    height: 200px;\n    object-fit: cover;\n}\n\n.blog-post-card .card-body {\n    padding: 1.5rem;\n}\n\n.blog-post-card .card-title {\n    font-size: 1.5rem;\n    color: #2C3E50;\n    margin-bottom: 0.75rem;\n}\n\n.blog-post-card .card-text {\n    font-size: 0.95rem;\n    color: #666;\n}\n\n/* Responsive Adjustments */\n@media (max-width: 768px) {\n    .hero-content h1 {\n        font-size: 2.2rem;\n    }\n\n    .hero-content p {\n        font-size: 1rem;\n    }\n\n    .timeline::before {\n        left: 20px;\n    }\n\n    .timeline-item-dot {\n        left: 20px;\n        margin-left: -8px;\n    }\n\n    .timeline-item-content {\n        width: calc(100% - 60px);\n        left: 60px !important;\n    }\n\n    .timeline-item-content::before {\n        border-width: 10px 10px 10px 0 !important;\n        border-color: transparent #fff transparent transparent !important;\n        left: -10px !important;\n        right: auto !important;\n    }\n\n    .hydration-panel {\n        flex-direction: column;\n    }\n\n    .hydration-graphic {\n        margin-right: 0;\n        margin-bottom: 1.5rem;\n        width: 100%;\n    }\n\n    .two-column-section .col-md-6 {\n        margin-bottom: 2rem;\n    }\n\n    .two-column-section .col-md-6:last-child {\n        margin-bottom: 0;\n    }\n}\n