:root {
    --background-blue: #ebf8fc; 
    --cream-label: #fffef8;    
    --firma-red: #c1272d;      
    --firma-blue: #1d3557;     
}

body {
    margin: 0; font-family: 'Fredoka', sans-serif;
    background-color: var(--background-blue); color: var(--firma-blue);
    overflow-x: hidden;
}

header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 5%; background: white; box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    position: sticky; top: 0; z-index: 1000;
}

.main-logo-img { height: 100px; cursor: pointer; }

.menu-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; }
.menu-toggle span { width: 30px; height: 4px; background: var(--firma-blue); border-radius: 2px; }

.nav-links button {
    background: none; border: none; margin-left: 20px;
    cursor: pointer; font-weight: 700; color: var(--firma-blue);
    text-transform: uppercase; font-size: 0.9rem;
}

#lang-switch {
    background: var(--firma-blue); color: white;
    padding: 6px 15px; border-radius: 20px; font-size: 0.8rem;
}

.hero-slider {
    width: 90%; max-width: 1200px; height: 500px;
    margin: 30px auto; position: relative; overflow: hidden;
    border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.slide {
    position: absolute; width: 100%; height: 100%;
    opacity: 0; transition: opacity 1.2s ease-in-out;
    background-size: cover; background-position: center;
}

.slide.active { opacity: 1; z-index: 1; }

.slide-overlay {
    background: rgba(29, 53, 87, 0.7); padding: 10px 20px;
    border-radius: 10px; position: absolute; bottom: 30px;
    left: 30px; color: white; text-transform: uppercase; letter-spacing: 2px;
    z-index: 10;
}

.container { padding: 20px 5%; display: none; animation: fadeIn 0.6s ease; }
.container.active { display: block; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.animation-box {
    background-color: var(--cream-label); max-width: 1000px;
    margin: 0 auto; padding: 60px 40px; border-radius: 30px;
    text-align: center; display: flex; align-items: center;
    justify-content: center; gap: 40px; box-shadow: 0 5px 20px rgba(0,0,0,0.03);
}

.bottle-img { height: 400px; transition: transform 0.5s ease; }
.bottle-img:hover { transform: rotate(3deg) scale(1.05); }

.lager-text { font-family: 'Pacifico', cursive; color: var(--firma-red); font-size: 3rem; }

/* ΝΕΟ: Στυλ για τη σελίδα About */
.presentation-gallery {
    display: flex; flex-direction: column; align-items: center; gap: 60px; padding: 40px 0;
}

.scroll-animate {
    max-width: 1000px; width: 100%; height: auto; border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    opacity: 0; transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

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

.contact-info { line-height: 2.5; font-size: 1.1rem; color: var(--firma-blue); margin-top: 20px; }
.instagram-link {
    display: inline-block; margin-top: 15px; padding: 10px 25px;
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: white !important; text-decoration: none; border-radius: 25px; font-weight: bold;
}

@media (max-width: 768px) {
    .menu-toggle { display: flex; }
    .nav-links {
        display: none; flex-direction: column; position: absolute;
        top: 100%; left: 0; width: 100%; background: white;
        padding: 20px 0; box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    }
    .nav-links.active { display: flex; }
    .nav-links button { margin: 10px 0; width: 100%; margin-left: 0; }
    .hero-slider { height: 350px; }
    .animation-box { flex-direction: column; }
    .scroll-animate { width: 95%; }
}

footer { text-align: center; padding: 40px; font-size: 0.8rem; color: var(--firma-blue); }