/* =========================================
   0. LOCAL FONTS (MANROPE) - SOLID MODE
   ========================================= */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 300; src: url('../fonts/manrope-300.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; src: url('../fonts/manrope-400.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; src: url('../fonts/manrope-500.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; src: url('../fonts/manrope-600.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; src: url('../fonts/manrope-700.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; src: url('../fonts/manrope-800.woff2') format('woff2'); font-display: block; }

/* =========================================
   1. VARIABLES
   ========================================= */
:root {
    --header-height: 85px; 
    --ergo-red: #8a0d2d;         
    --ergo-red-light: #a31035;   
    --ergo-dark: #2A2A2A;    
    --ergo-gray: #F2F4F7;    
    --pure-white: #FFFFFF;
    --shadow-soft: 0 10px 30px rgba(0,0,0,0.08);
    --shadow-hover: 0 15px 40px rgba(138, 13, 45, 0.15); 
    --font-main: 'Manrope', Helvetica, Arial, sans-serif;
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* =========================================
   2. GLOBAL RESET
   ========================================= */
/* =========================================
   2. GLOBAL RESET (CLEAN VERSION)
   ========================================= */
html {

    /* Επαναφέρουμε τη φυσιολογική συμπεριφορά */
    overflow-x: hidden;          
    overflow-y: auto;  /* Η μπάρα εμφανίζεται μόνο αν χρειάζεται */
    
    background-color: #ffffff; 
    
    /* Σβήνουμε αυτό που δημιουργούσε το κενό */
    /* scrollbar-gutter: stable; <--- ΑΦΑΙΡΕΣΗ */
}

body {

    margin: 0;
    padding-top: 0;
    overflow-x: hidden;
    position: relative;
    box-sizing: border-box;
    font-family: var(--font-main);
    color: var(--ergo-dark);
    line-height: 1.6;
    background-color: #ffffff; 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    opacity: 1;
    visibility: visible;
}

main {
    background-color: #ffffff;
    position: relative;
    z-index: 1;
    width: 100%;
}

*, *::before, *::after { box-sizing: inherit; }
ul, li, h1, h2, h3, h4, p { margin: 0; padding: 0; }
a { text-decoration: none; color: inherit; }

/* =========================================
   4. UTILITIES
   ========================================= */
.container { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.text-red { color: var(--ergo-red); }

/* =========================================
   5. HEADER STYLING (STICKY FIX - NO SCROLLBAR ISSUE)
   ========================================= */
.main-header {
    background: var(--pure-white);
    
    /* ΑΛΛΑΓΗ 1: Sticky αντί για Fixed */
    position: sticky; 
    position: -webkit-sticky; /* Για Safari */
    
    top: 0; 
    left: 0; 
    
    /* ΑΛΛΑΓΗ 2: Κανονικό πλάτος (τώρα σέβεται την μπάρα) */
    width: 100%; 
    
    height: var(--header-height);
    display: flex; align-items: center;
    z-index: 9999; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.main-header .container { width: 100%; }
.nav-flex { display: flex; justify-content: space-between; align-items: center; height: 100%; }

/* --- ΡΥΘΜΙΣΕΙΣ ΓΙΑ ΤΟ LINK ΤΟΥ LOGO --- */
a.logo {
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    height: 100%; 
}

a.logo:hover { opacity: 0.9; }

/* --- ΤΟ ΥΒΡΙΔΙΚΟ ΛΟΓΟΤΥΠΟ --- */
.hybrid-logo {
    display: inline-flex; 
    align-items: center;  
    gap: 15px;            
    height: 50px; 
}

.ergo-img-part {
    height: 60%;        
    width: auto;        
    object-fit: contain; 
    display: block;
}

.separator-line-part {
    width: 2px;           
    height: 80%;         
    background-color: #7A0014; 
}

.name-text-part {
    font-family: 'Manrope', sans-serif; 
    color: #7A0014;        
    font-size: 1.35rem;    
    font-weight: 700;      
    white-space: nowrap;   
    line-height: 1;       
    letter-spacing: 0.5px; 
}

/* --- RESPONSIVE LOGO --- */
@media (max-width: 1024px) {
    .hybrid-logo { height: 42px; gap: 12px; }
    .name-text-part { font-size: 1.1rem; }
}

@media (max-width: 480px) {
    .hybrid-logo { height: 36px; gap: 8px; }
    .name-text-part { font-size: 0.95rem; } 
    .separator-line-part { height: 70%; }
}

/* --- NAVIGATION MENUS (DESKTOP) --- */
nav ul { display: flex; gap: 30px; list-style: none; align-items: center; margin: 0; padding: 0; }
nav a {
    font-weight: 500; font-size: 1rem; transition: var(--transition);
    display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 4px;
    -webkit-text-size-adjust: 100%;
    color: var(--ergo-dark); text-decoration: none; 
}
nav a:hover, nav a.active { color: var(--ergo-red); background-color: transparent; }

/* --- BUTTON STYLING & ACTIVE STATE --- */
.btn-nav {
    background: var(--ergo-red) !important; color: white !important;
    padding: 10px 24px; border-radius: 4px; transition: var(--transition);
}
.btn-nav:hover { background: var(--ergo-red-light) !important; color: white !important; } 

/* Active State (Outline Style) */
a.btn-nav.active {
    background-color: transparent !important; 
    border: 2px solid var(--ergo-red) !important; 
    color: var(--ergo-red) !important; 
    font-weight: 700;
    cursor: pointer; 
    transition: all 0.3s ease; 
}

a.btn-nav.active:hover {
    background-color: rgba(229, 0, 26, 0.08) !important; 
    box-shadow: 0 4px 10px rgba(229, 0, 26, 0.15); 
}

/* --- MOBILE MENU ICON --- */
.mobile-menu-icon { display: none; font-size: 1.5rem; cursor: pointer; color: var(--ergo-dark); }


/* =========================================
   MOBILE MENU STYLING (DROPDOWN STYLE)
   ========================================= */

@media (max-width: 1024px) {
    
    .mobile-menu-icon { display: block; }

    /* 1. ΤΟ ΚΟΥΤΙ ΤΟΥ ΜΕΝΟΥ */
    nav ul {
        display: none; 
        flex-direction: column;
        position: fixed; 
        top: var(--header-height); 
        left: 0;
        width: 100%;
        height: auto; 
        background-color: var(--pure-white);
        
        gap: 0 !important; /* Σβήνουμε το κενό του Desktop */
        
        /* ΑΛΛΑΓΗ: Δώσαμε λίγο "αέρα" πάνω-κάτω για να ανασάνει */
        padding: 15px 0; 
        
        text-align: center;
        box-shadow: 0 15px 40px rgba(0,0,0,0.15);
        border-bottom: 3px solid var(--ergo-red);
        
        max-height: calc(100vh - var(--header-height));
        overflow-y: auto;
    }

    nav ul.active {
        display: flex; 
        animation: slideDown 0.3s ease-out forwards;
    }

    /* 2. ΣΤΟΙΧΕΙΑ ΛΙΣΤΑΣ */
    nav ul li {
        margin: 0 !important; 
        width: 100%;
        /* Διακριτική γραμμή για διαχωρισμό */
        border-bottom: 1px solid rgba(0,0,0,0.04); 
    }

    /* 3. ΤΑ LINKS (Αρχική, Το Γραφείο...) */
    nav a {
        font-size: 1.1rem; /* Κανονικό μέγεθος */
        display: block;
        
        /* ΑΛΛΑΓΗ: Το πήγαμε στο 15px (ήταν 8px πριν). 
           Είναι το ιδανικό για να μην είναι στριμωγμένα */
        padding: 15px 0; 
        
        color: var(--ergo-dark);
        text-decoration: none;
    }

    /* 4. ΤΟ ΚΟΥΜΠΙ ΕΠΙΚΟΙΝΩΝΙΑ */
    .btn-nav {
        display: inline-block;
        width: auto;
        min-width: 180px;
        
        /* ΑΛΛΑΓΗ: Λίγο περισσότερο κενό για να ξεχωρίζει */
        margin: 20px 0; 
        padding: 10px 25px;
    }
    
    
    /* --- DROPDOWN SERVICES (BALANCED) --- */
    
    .dropdown-toggle {
        cursor: pointer;
        display: flex;
        justify-content: center; 
        align-items: center;
        width: 100%; 
        gap: 10px; 
        
        /* Ίδιο "αέρα" με τα υπόλοιπα links */
        padding: 15px 0; 
        
        font-size: 1.1rem; 
        color: var(--ergo-dark);
    }
    
    /* ΒΕΛΑΚΙ (ΣΩΣΤΟ) */
    .dropdown-toggle::after {
        content: '\f078'; 
        font-family: "Font Awesome 5 Free"; 
        font-weight: 900;
        font-size: 0.8rem;
        display: inline-block; 
        transform: rotate(0deg) !important; 
        transition: transform 0.3s ease !important;
    }
    
    .dropdown-toggle.open::after {
        transform: rotate(180deg) !important;
    }

    .dropdown-menu {
        position: static !important;
        display: none;
        width: 100%;
        background-color: #f8f8f8; /* Γκρι φόντο */
        padding: 0;
        margin: 0;
        border: none;
        box-shadow: none !important;
    }

    .dropdown-menu.show {
        display: block;
        animation: fadeIn 0.3s ease;
    }

    .mega-menu-grid {
        display: flex !important; 
        flex-direction: column !important; 
        gap: 0 !important; 
        width: 100% !important;
    }

    /* --- LINKS ΥΠΗΡΕΣΙΩΝ --- */
    .mega-link {
        width: 100% !important;
        
        /* ΠΡΟΣΘΗΚΗ: Βάζουμε όριο στο πλάτος (π.χ. 500px) */
        max-width: 500px !important; 
        
        /* ΠΡΟΣΘΗΚΗ: Αυτό το φέρνει στο κέντρο της οθόνης */
        margin: 0 auto !important;   
        
        padding: 12px 20px !important; 
        border-bottom: 1px solid #e0e0e0; 
        display: flex !important; 
        align-items: center;
        text-align: left; /* Τα γράμματα μένουν αριστερά για να είναι στοιχισμένα με τα εικονίδια */
    }

    .mega-link h4 {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--ergo-dark);
        display: flex; 
        align-items: center;
        gap: 10px; 
    }

    .mega-link span { display: none !important; }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
	
	/* =========================================
       GLOBAL MOBILE CONTENT FIXES
       ========================================= */
    
    /* 1. Αποφυγή οριζόντιου scroll (το πιο συχνό πρόβλημα) */
    html, body {
        overflow-x: hidden;
        width: 100%;
    }

    /* 2. Όλες οι εικόνες να προσαρμόζονται στο πλάτος του κινητού */
    img {
        max-width: 100%;
        height: auto;
    }

    /* 3. Γενικό "αέρα" στο Container για να μην κολλάνε τα γράμματα στις άκρες */
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        width: 100% !important;
        box-sizing: border-box; /* Σιγουριά ότι το padding δεν μεγαλώνει το πλάτος */
    }

    /* 4. Όλοι οι τίτλοι (H1, H2) να μικραίνουν λίγο για να μην σπάνε άσχημα */
    h1 { font-size: 2rem !important; line-height: 1.2; }
    h2 { font-size: 1.75rem !important; }
    h3 { font-size: 1.5rem !important; }
    p { font-size: 1rem !important; line-height: 1.6; }
	
	
}


/* Animation για ομαλό άνοιγμα */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}


/* =========================================
   6. FOOTER STYLING (FINAL CORRECTED)
   ========================================= */
.main-footer { 
    background-color: #1a1a1a; 
    color: #b0b0b0; 
    padding: 4rem 0 1.5rem 0; 
    font-size: 0.95rem; 
}

.footer-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Το έκανα 200px για να χωράνε καλύτερα */
    gap: 2rem; /* ΜΕΙΩΣΗ: Από 3rem σε 2rem για να έρθουν πιο κοντά */
    margin-bottom: 3rem; 
}

/* --- ΜΕΤΑΚΙΝΗΣΗ ΣΤΗΛΩΝ ΔΕΞΙΑ (ΕΚΤΟΣ ΤΗΣ ΠΡΩΤΗΣ) --- */

/* Αυτό ισχύει ΜΟΝΟ για μεγάλες οθόνες (όχι κινητά) */
@media (min-width: 1024px) { 
    .footer-col:not(:first-child) {
        padding-left: 50px; /* <--- Αυξομείωσε αυτό το νούμερο για να πάνε όσο δεξιά θες */
    }
}

/* --- FOOTER HYBRID LOGO (ΓΙΑ ΣΚΟΥΡΟ ΦΟΝΤΟ) --- */

/* Ο Container για το Footer */
.footer-logo-hybrid {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    height: 45px;
    margin-bottom: 1.5rem;
    
    /* Η ΔΙΟΡΘΩΣΗ: Το τραβάμε λίγο πάνω */
    margin-top: -8px; 
}

/* 1. Εικόνα ERGO (Στο Footer) */
.footer-ergo-img {
    height: 60%; /* Προσαρμογή ύψους */
    width: auto;
    object-fit: contain;
    display: block;
    /* Αν η εικόνα σου είναι PNG με διάφανο φόντο, θα φαίνεται τέλεια στο σκούρο */
}

/* 2. Κάθετη Γραμμή (Εδώ την κάνουμε ΚΟΚΚΙΝΗ για στυλ) */
.footer-separator {
    width: 2px;
    height: 80%;
    background-color: var(--ergo-red); /* Κόκκινη γραμμή */
}

/* 3. Όνομα "Κώστας Σισμανίδης" (ΛΕΥΚΑ Γράμματα) */
.footer-name-text {
    font-family: 'Manrope', sans-serif;
    color: #ffffff;       /* Λευκό χρώμα για να φαίνεται στο σκούρο */
    font-size: 1.2rem;    /* Λίγο πιο μικρά από το header */
    font-weight: 700;
    white-space: nowrap;
    line-height: 1;
    letter-spacing: 0.5px;
}

/* --- RESPONSIVE FOOTER LOGO --- */
@media (max-width: 480px) {
    .footer-logo-hybrid {
        height: 38px;
        gap: 10px;
        /* Στα κινητά κεντράρουμε το λογότυπο αν το footer είναι centered */
        justify-content: center; 
        margin-left: auto;
        margin-right: auto;
    }
    .footer-name-text {
        font-size: 1rem;
    }
}

/* --- ΥΠΟΛΟΙΠΟ FOOTER --- */
.footer-col h3 { color: #fff; font-size: 1.1rem; margin-bottom: 1.5rem; position: relative; padding-bottom: 0.5rem; }
.footer-col h3::after { content: ''; position: absolute; left: 0; bottom: 0; width: 30px; height: 2px; background-color: var(--ergo-red); }

.footer-links { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 0.8rem; }
.footer-links a { color: #b0b0b0; text-decoration: none; transition: color 0.3s ease, padding-left 0.3s ease; }
.footer-links a:hover { color: var(--ergo-red); padding-left: 5px; }

.social-links { margin-top: 1.5rem; }
.social-links a { display: inline-flex; justify-content: center; align-items: center; width: 36px; height: 36px; background: #333; color: #fff; border-radius: 50%; margin-right: 10px; transition: all 0.3s ease; text-decoration: none; }
.social-links a:hover { background: var(--ergo-red); transform: translateY(-3px); }

.contact-info { list-style: none; padding: 0; }
.contact-info li { display: flex; align-items: flex-start; margin-bottom: 1rem; }
.contact-info i { color: var(--ergo-red); margin-right: 12px; margin-top: 4px; }
.contact-info a { color: #b0b0b0; text-decoration: none; transition: color 0.3s; }
/* Η ΑΛΛΑΓΗ: Τώρα γίνονται ΚΟΚΚΙΝΑ στο hover */
.contact-info a:hover { 
    color: var(--ergo-red); 
}

/* ... Τα από πάνω (Logo, Columns, Social) τα κρατάς όπως είναι ... */

/* --- ΔΙΑΧΩΡΙΣΤΙΚΗ ΓΡΑΜΜΗ & BOTTOM BAR --- */
.footer-divider { 
    border: 0; 
    border-top: 1px solid #333; 
    margin-bottom: 1.5rem; 
}

/* Η ΚΥΡΙΑ ΑΛΛΑΓΗ ΓΙΑ ΤΟ BOTTOM BAR */
.footer-bottom { 
    display: flex; 
    justify-content: space-between; /* Αυτό στέλνει: Αριστερά - Κέντρο - Δεξιά */
    align-items: center; 
    flex-wrap: wrap; 
    font-size: 0.85rem;
    padding-bottom: 10px;
    gap: 20px; /* Απόσταση αν στριμωχτούν */
}

/* --- COPYRIGHT (ΑΡΙΣΤΕΡΑ) --- */
.footer-bottom p {
    margin: 0; /* Αφαιρούμε τα default margins */
    opacity: 0.8;
}

/* --- LEGAL LINKS (ΔΕΞΙΑ) --- */
.footer-legal {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
}

.footer-legal a {
    color: #888; 
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 0.8rem;
}

/* Η ΑΛΛΑΓΗ: Κόκκινο χρώμα και εδώ */
.footer-legal a:hover {
    color: var(--ergo-red); 
}

.separator {
    color: #444; 
    font-size: 0.8rem;
}

/* --- RESPONSIVE (ΚΙΝΗΤΑ) --- */
@media (max-width: 900px) {
    .footer-bottom { 
        flex-direction: column; 
        text-align: center; 
        gap: 15px; 
    }

    /* Έξυπνη σειρά εμφάνισης στο κινητό */
    .flowgeek-credit { order: 1; margin-bottom: 5px; } /* Πρώτο το Powered by */
    .footer-legal    { order: 2; margin-bottom: 5px; } /* Δεύτερα τα Legal */
    .footer-bottom p { order: 3; opacity: 0.5; font-size: 0.75rem; } /* Τρίτο το Copyright */
}

/* =========================================
   FOOTER LAYOUT FIX (TABLET & MOBILE)
   ========================================= */

/* 1. ΓΙΑ TABLET / IPAD (Από 600px έως 1024px) */
/* Εδώ θέλουμε το 2x2 που ζήτησες */
@media (min-width: 601px) and (max-width: 1024px) {
    .footer-grid {
        display: grid !important;
        /* Η ΕΝΤΟΛΗ ΚΛΕΙΔΙ: Ακριβώς 2 στήλες. Θα βγουν 2 πάνω, 2 κάτω. */
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 40px !important;
        padding: 0 30px; /* Λίγο αέρα στο πλάι για να μην κολλάνε */
    }
    
    /* Στοίχιση αριστερά, όπως ζήτησες */
    .footer-col {
        align-items: flex-start !important;
        text-align: left !important;
    }
}


/* 2. ΓΙΑ ΚΙΝΗΤΑ (Κάτω από 600px) */
/* Εδώ θέλουμε 1 στήλη (το ένα κάτω από το άλλο) */
@media (max-width: 600px) {
    .footer-grid {
        display: grid !important;
        grid-template-columns: 1fr !important; /* Μία στήλη */
        gap: 30px !important;
        text-align: left !important; /* Κείμενο αριστερά */
        padding: 0 20px;
    }

    .footer-col {
        align-items: flex-start !important; 
    }

    /* Βεβαιωνόμαστε ότι όλα κοιτάνε αριστερά */
    .footer-logo-hybrid, 
    .social-links, 
    .contact-info li, 
    .footer-links li a {
        justify-content: flex-start !important;
        text-align: left !important;
    }
}


/* =========================================
   GLOBAL UTILITY: PERFECT FULL SCREEN SECTION
   ========================================= */

/* Πρόσθεσε την class "full-screen-hero" σε όποιο section 
   θέλεις να πιάνει όλη την οθόνη και να είναι κεντραρισμένο */

.full-screen-hero {
    position: relative;
    width: 100%;
    
    /* Υπολογισμός ύψους: Οθόνη μείον Header */
    min-height: calc(100vh - var(--header-height));
    
    /* Κάθετο Κεντράρισμα */
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    padding: 2rem 0;
}

/* Στο κινητό το αφήνουμε ελεύθερο */
@media (max-width: 900px) {
    .full-screen-hero {
        min-height: auto;
        display: block;
        padding: 4rem 0;
    }
}




/* =========================================
   GLOBAL: FINAL SCREEN WRAPPER (Sticky Footer Logic)
   ========================================= */

.final-screen-wrapper {
    display: block;
}

/* Ενεργοποίηση ΜΟΝΟ σε Laptop/Desktop (άνω των 1024px) */
@media (min-width: 1024px) {
    
    .final-screen-wrapper {
        /* ΤΟ ΠΑΛΙΟ (ΛΑΘΟΣ): min-height: 100vh; */
        
        /* ΤΟ ΣΩΣΤΟ: 
           Πιάσε όλο το ύψος (100vh) και ΑΦΑΙΡΕΣΕ το ύψος του Header. 
           Έτσι κουμπώνει ακριβώς στο κάτω μέρος της οθόνης. */
        min-height: calc(100vh - var(--header-height));
        
        display: flex;
        flex-direction: column;
    }

    /* Ρυθμίζουμε τα 3 είδη περιεχομένου που μπορεί να έχεις πριν το footer */
    .final-screen-wrapper .cta-banner, 
    .final-screen-wrapper .cta-banner-mini,
    .final-screen-wrapper .map-stretch-container {
        
        flex-grow: 1; /* "Ρουφάει" όλον τον κενό χώρο μέχρι το footer */
        display: flex;
        flex-direction: column;
        justify-content: center; /* Κεντράρει κάθετα */
        align-items: center; 
        
        padding: 0; 
        width: 100%;
        position: relative;
    }

    /* Ειδική ρύθμιση για τον Χάρτη (Contact Page) */
    .map-stretch-container iframe {
        width: 100%;
        height: 100%;
        min-height: 450px; /* Ελάχιστο ύψος για να μη γίνει ποτέ πολύ στενός */
        border: 0;
        display: block;
    }

    /* Το Footer μένει σταθερό κάτω */
    .final-screen-wrapper .main-footer {
        flex-shrink: 0; 
        width: 100%;
        margin-top: auto;
    }
}



/* =========================================
   MEGA MENU STYLING (MONETO STYLE)
   ========================================= */

/* 1. Απαραίτητο για να πιάσει το menu όλο το πλάτος */
nav ul li {
    position: static; /* Αφαιρούμε το relative από το li για να ακούσει στο header */
}

/* 2. Το Mega Menu Container */
.dropdown-menu {
    position: absolute;
    top: 100%; /* Ξεκινάει ακριβώς κάτω από το header */
    left: 0;
    width: 100%; /* Πιάνει όλο το πλάτος της οθόνης */
    background: #fff;
    border-top: 1px solid #f0f0f0; /* Λεπτή διαχωριστική γραμμή */
    box-shadow: 0 15px 40px rgba(0,0,0,0.1); /* Μεγάλη, ωραία σκιά */
    padding: 30px 0;
    
    /* Κίνηση Εμφάνισης */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 900;
}

/* Εμφάνιση στο Hover */
nav ul li:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 3. Το Grid μέσα στο Mega Menu */
.mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 Στήλες */
    gap: 30px;
    max-width: 1280px; /* Ίδιο πλάτος με το container του site */
    margin: 0 auto;
    padding: 0 20px;
}

/* 4. Το κάθε Link/Κάρτα μέσα στο μενού */
.mega-link {
    display: flex;
    flex-direction: column; /* Εικονίδιο πάνω, κείμενο κάτω ή δίπλα */
    align-items: flex-start;
    padding: 15px;
    border-radius: 8px;
    transition: background 0.2s;
    text-decoration: none;
    height: 100%;
}

.mega-link:hover {
    background: #f9f9f9; /* Απαλό γκρι στο hover */
}

/* Τίτλος Υπηρεσίας */
.mega-link h4 {
    color: #1a1a1a;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mega-link h4 i {
    color: var(--ergo-red);
    font-size: 1.1rem;
}

/* Περιγραφή από κάτω (για να γεμίσει ο χώρος) */
.mega-link span {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.4;
    font-weight: 400;
}

/* 1. Αρχική Κατάσταση (Κλειστό) -> Κοιτάει ΠΑΝΩ (^) */
.dropdown-toggle::after {
    content: '\f106'; /* Κωδικός FontAwesome για Angle UP (^) */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: 8px;
    font-size: 0.8em;
    transition: transform 0.3s ease; /* Ομαλή κίνηση */
    display: inline-block; 
}

/* 2. Κατάσταση Hover (Ανοιχτό) -> Γυρίζει ΚΑΤΩ (v) */
nav ul li:hover .dropdown-toggle::after {
    transform: rotate(180deg); /* Περιστρέφεται 180 μοίρες για να κοιτάξει κάτω */
}








/* =========================================
   FLOWGEEK BADGE STYLING (GLOBAL)
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap');

/* 1. Το κείμενο "Powered by" */
.flowgeek-credit {
    display: inline-flex;
    align-items: center; 
    gap: 6px;
    
    font-family: var(--font-main);
    font-size: 0.85rem;
    color: #b0b0b0; 
    opacity: 0.7;
}

/* 2. Το Λογότυπο "Flowgeek" */
a.flowgeek-logo {
    text-decoration: none;
    font-family: 'Orbitron', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    
    /* Gradient Χρώμα */
    background: linear-gradient(90deg, #60a5fa, #06b6d4, #4ade80);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    
    /* --- Η ΔΙΟΡΘΩΣΗ ΓΙΑ ΤΗΝ ΟΥΡΑ ΤΟΥ 'g' --- */
    position: relative; 
    top: 2px; /* Το κατεβάζουμε λίγο για να ευθυγραμμιστεί με το κείμενο */
    
    line-height: 1.4; /* Δίνουμε ύψος για να χωρέσει η ουρά */
    padding-bottom: 2px; /* Έξτρα χώρος κάτω για σιγουριά */
    
    /* Transition μόνο για το φίλτρο */
    transition: filter 0.3s ease;
}

a.flowgeek-logo:hover {
    /* ΜΟΝΟ ΦΩΤΙΣΜΟΣ */
    filter: brightness(1.3) contrast(1.1);
}