/* =========================================
   ΤABLE OF CONTENTS
   =========================================
   1. CSS Variables & Theme (Χρώματα, Μεταβλητές)
   2. Reset & Global Styles (Βασικές ρυθμίσεις)
   3. Layout & Utilities (Containers)
   4. Header & Logo (Το κεντρικό μενού)
   5. Ecosystem Navigation (Μπάρα με τα Tags)
   6. Hero Section (Το αρχικό section της σελίδας)
   7. Stats Section
   8. Services Section (Marquee)
   9. About Us Section
   10. Portfolio & Instagram CTA
   11. Partners Carousel
   12. Contact Section & Form
   13. Footer
   14. Testimonials
   15. Floatig CTA 
   16. FAQ

   ========================================= */

/* =========================================
   1. CSS VARIABLES & THEME
   ========================================= */
:root {
    /* Εδώ ορίζουμε τα χρώματα για να τα αλλάζουμε εύκολα από ένα σημείο */
    --bg-color: #fafafa; /* Ανοιχτό φόντο (ή #0a0a0a για dark mode) */
    --text-color: #111111;
    --primary-color: #2563eb; /* Το δυναμικό μπλε του brand σας */
    --tag-bg: #e5e7eb;
    --tag-hover-bg: #d1d5db;
    --transition-speed: 0.3s; /* Κοινή ταχύτητα για όλα τα animations */
    --accent-color:red;

}

/* =========================================
   BACKGROUND EFFECT (Dot Grid)
   ========================================= */
.dot-grid-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none; /* Δεν εμποδίζει τα κλικ του χρήστη */
    
    /* Η μαγεία: Φτιάχνει τελείες μεγέθους 1.5px με απόσταση 24px μεταξύ τους */
    background-image: radial-gradient(#cbd5e1 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    
    /* Απαλό "σβήσιμο" προς τα κάτω για να μην κουράζει το μάτι */
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 80%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 80%);
}

/* =========================================
   2. RESET & GLOBAL STYLES
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Για να μην μεγαλώνουν τα στοιχεία από το padding */
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    overflow-x: hidden; /* Αποτρέπει το ανεπιθύμητο οριζόντιο scroll στο κινητό */
}

html {
    scroll-behavior: smooth; /* Μαγική εντολή: Κάνει το scroll στα links ομαλό σαν animation */
}

/* =========================================
   3. LAYOUT & UTILITIES
   ========================================= */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px; /* Ασφαλές περιθώριο αριστερά-δεξιά για τα κινητά */
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lang-switcher {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 0.95rem;
}

.lang-switcher a {
    text-decoration: none;
    color: #9ca3af; /* Γκρι για τη μη-επιλεγμένη γλώσσα */
    transition: color var(--transition-speed) ease;
}

.lang-switcher a.active, 
.lang-switcher a:hover {
    color: var(--primary-color); /* Μπλε για την ενεργή γλώσσα */
}

.lang-switcher .divider {
    color: #e5e7eb;
    font-weight: 400;
}

/* =========================================
   4. HEADER & LOGO
   ========================================= */
.main-header {
    text-align: center;
    padding: 20px 0;
    background-color: transparent;
    display: flex;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: 800;
    text-decoration: none;
    color: var(--text-color);
    letter-spacing: -0.5px; /* Κάνει το κείμενο του logo πιο "δεμένο" */
}

/* =========================================
   5. ECOSYSTEM NAVIGATION
   ========================================= */
.ecosystem-nav {
    justify-items: center;
    width: 100%;
    padding: 10px 0 20px 0;
    overflow-x: auto; /* Επιτρέπει οριζόντιο swipe στα κινητά */
    scrollbar-width: none; /* Κρύβει το scrollbar σε Firefox */
}

/* Κρύβει το scrollbar σε Chrome/Safari/Edge για καθαρό UI */
.ecosystem-nav::-webkit-scrollbar {
    display: none; 
}

.tag-list {
    display: flex;
    gap: 12px;
    list-style: none;
    padding: 0 20px;
    white-space: nowrap; /* Κρατάει τα tags στην ίδια γραμμή */
}

.eco-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: rgba(0, 0, 0, 0.602);
    color: white;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 100px; /* Pill-shape εμφάνιση */
    font-size: 0.875rem;
    font-weight: 500;
    transition: background-color var(--transition-speed) ease;

    /* --- Νέος κώδικας για το Animation με Delay --- */
    opacity: 0; /* Κρατάει το tag αόρατο στην αρχή */
    animation: popInTag 0.5s ease-out forwards; 
    animation-delay: 1s; /* Καθυστέρηση 1 δευτερόλεπτο πριν εμφανιστεί */
}

/* Keyframes για την εμφάνιση του tag */
@keyframes popInTag {
    0% {
        opacity: 0;
        transform: scale(0.85); /* Ξεκινάει ελαφρώς πιο μικρό */
    }
    100% {
        opacity: 1;
        transform: scale(1); /* Φτάνει στο κανονικό του μέγεθος */
    }
}

.eco-tag:hover {
    background-color: var(--primary-color);
    color: white;
}

.eco-tag .arrow {
    font-size: 1.1rem;
    transition: transform var(--transition-speed) ease;
}

/* Προαιρετικό: Αν θέλεις το βελάκι να κινείται στο hover του tag */
.eco-tag:hover .arrow {
    transform: translateX(4px); /* Μετακινεί το βελάκι λίγο δεξιά */
}

/* Εφέ στο βελάκι όταν το ποντίκι είναι πάνω από το tag (Desktop) */
.eco-tag:hover .arrow {
    transform: translate(2px, -2px);
}

/* =========================================
   6. HERO SECTION
   ========================================= */
.hero-section {
    padding: 60px 0 100px; /* Λίγο περισσότερο κενό στο κάτω μέρος */
    min-height: 50vh;
    display: flex;
    align-items: center;
}

.hero-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* Κεντράρισμα των πάντων */
    gap: 10px; /* Κενό ανάμεσα στον τίτλο και το κείμενο που αλλάζει */
}

/* Στυλ για το στατικό κομμάτι του τίτλου */
.hero-title {
    font-size: clamp(2rem, 5vw, 3.5rem); /* Μαγεία! Προσαρμόζεται αυτόματα στο μέγεθος της οθόνης */
    font-weight: 800;
    color: var(--text-color);
    line-height: 1.2;
    text-align: center;
}

/* Ο δικός σου κώδικας για το animation */
.fade-text {
    position: relative;
    /* Αύξησα ελάχιστα το min-height σε 4em για να μην κόβεται στα πολύ μικρά κινητά (πχ iPhone SE) αν σπάσει σε 3 γραμμές */
    min-height: 4em; 
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Κρατάει το κείμενο κοντά στον κεντρικό τίτλο */
    text-align: center;
    padding: 0 16px;
    box-sizing: border-box;
}

.fade-text span {
    position: absolute;
    opacity: 0;
    animation: fadeCycle 9s infinite linear;
    color: var(--primary-color);
    font-size: clamp(1.2rem, 3vw, 2rem); /* Responsive μέγεθος και εδώ */
    font-weight: 600;
    padding: 0 8px;
    text-align: center;
    white-space: normal; 
    width: 100%;
    box-sizing: border-box;
}

/* Animation delays */
.fade-text span:nth-child(1) { animation-delay: 0s; }
.fade-text span:nth-child(2) { animation-delay: 3s; }
.fade-text span:nth-child(3) { animation-delay: 6s; }

@keyframes fadeCycle {
    0%   { opacity: 0; transform: translateY(10px); } /* Πρόσθεσα ένα μικρό ανέβασμα στο fade in για πιο premium αίσθηση (προαιρετικό) */
    10%  { opacity: 1; transform: translateY(0); }   
    30%  { opacity: 1; transform: translateY(0); }   
    40%  { opacity: 0; transform: translateY(-10px); } /* ...και ένα μικρό ανέβασμα στο fade out */
    100% { opacity: 0; }
}

/* =========================================
   7. STATS SECTION
   ========================================= */
.stats-section {
    padding: 60px 0;
    /* Ένα ελαφρώς διαφορετικό φόντο ή λευκό, για να ξεχωρίζει από το hero */
    background-color: #ffffff; 
    border-top: 1px solid #eaeaea; /* Διακριτική γραμμή διαχωρισμού */
    border-bottom: 1px solid #eaeaea;
}

.stats-grid {
    display: grid;
    /* Σε desktop, δημιουργεί 3 ίσες στήλες */
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px;
    text-align: center;
}

.stat-item {
    padding: 20px;
    transition: transform var(--transition-speed) ease;
}

/* Ένα ελαφρύ ανασήκωμα όταν το ποντίκι πάει πάνω από το στατιστικό (για desktop) */
.stat-item:hover {
    transform: translateY(-5px);
}

.stat-number {
    font-size: clamp(2.5rem, 5vw, 3.5rem); /* Μεγάλα νούμερα που προσαρμόζονται */
    font-weight: 800;
    color: var(--primary-color); /* Το μπλε χρώμα του brand */
    margin-bottom: 10px;
    line-height: 1;
}

.stat-text {
    font-size: 0.95rem;
    color: #555555;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* =========================================
   MOBILE RESPONSIVE RULES (@media)
   ========================================= */
/* Όταν η οθόνη είναι μικρότερη από 768px (Tablet & Mobile) */
@media (max-width: 768px) {
    .stats-grid {
        /* Σπάει τις 3 στήλες και τις κάνει 1 (η μία κάτω από την άλλη) */
        grid-template-columns: 1fr; 
        gap: 40px; /* Λίγο περισσότερο κενό ανάμεσά τους στα κινητά */
    }
    
    .stats-section {
        padding: 50px 0;
    }
}


/* =========================================
   8. SERVICES SECTION (CLOUD LAYOUT)
   ========================================= */
.services-section {
    padding: 80px 0;
    background-color: var(--bg-color);
}

.services-header {
    text-align: center;
    margin-bottom: 40px;
}

.services-subtitle {
    color: #6b7280;
    font-size: 1.05rem;
    margin-top: 0px; /* Φέρνει τον υπότιτλο λίγο πιο κοντά στον τίτλο */
}



/* Το δοχείο που τακτοποιεί τα χάπια σαν παζλ */
.services-cloud {
    display: flex;
    flex-wrap: wrap; /* Επιτρέπει να αλλάζουν γραμμή όταν δεν χωράνε */
    justify-content: center; /* Κεντράρει όλο το μπλοκ */
    gap: 16px; /* Κενό ανάμεσα στις υπηρεσίες */
    max-width: 900px; /* Συμμαζεύει λίγο το πλάτος σε μεγάλες οθόνες για να φαίνεται γεμάτο */
    margin: 0 auto;
}

.service-pill {
    background-color: #ffffff;
    border: 1px solid #eaeaea;
    padding: 16px 32px;
    border-radius: 100px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-color);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: all var(--transition-speed) ease;
    cursor: default;
}

/* Εφέ αλληλεπίδρασης (Hover) */
.service-pill:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-4px); /* Ανασηκώνεται ελαφρώς */
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.1);
}

/* =========================================
   MOBILE RESPONSIVE RULES (Services Cloud)
   ========================================= */
@media (max-width: 768px) {
    .services-section {
        padding: 60px 0;
    }
    
    .services-cloud {
        gap: 12px; /* Μικραίνουμε λίγο το κενό */
    }
    
    .service-pill {
        /* Προσαρμογή μεγέθους για τα κινητά */
        padding: 14px 20px;
        font-size: 0.95rem;
        /* Η ΜΑΓΕΙΑ ΕΔΩ: Το flex-grow: 1 κάνει τα μικρά κείμενα 
           να "απλώνουν" για να γεμίσουν τα κενά της οθόνης, 
           δημιουργώντας ένα τέλειο grid! */
        flex-grow: 1; 
        text-align: center;
    }
}

/* =========================================
   9. ABOUT US SECTION
   ========================================= */
.about-section {
    padding: 100px 0;
    background-color: #ffffff; /* Λευκό φόντο για καθαρότητα */
}

/* Βοηθητική κλάση για αριστερή στοίχιση του τίτλου */
.section-title.left-align {
    text-align: left;
    margin-bottom: 24px;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Δύο ίσες στήλες στο Desktop */
    gap: 60px;
    align-items: center; /* Κεντράρει κάθετα το περιεχόμενο στις στήλες */
}

.about-text {
    font-size: 1.1rem;
    color: #4b5563; /* Ένα απαλό γκρι για να μην κουράζει το μάτι */
    margin-bottom: 20px;
    line-height: 1.8;
}

.about-text strong {
    color: var(--text-color);
    font-weight: 700;
}

/* --- Στυλ για την περιοχή της εικόνας --- */
.about-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3; /* Κρατάει σταθερές αναλογίες στο κουτί */
}

/* Στυλ για την πραγματική εικόνα */
.about-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ΠΟΛΥ ΣΗΜΑΝΤΙΚΟ: Καλύπτει όλο το πλαίσιο χωρίς να παραμορφώνεται η εικόνα */
    border-radius: 20px; /* Στρογγυλεμένες άκρες */
    position: relative;
    z-index: 2; /* Φέρνει την εικόνα ΠΑΝΩ από το decorative-shape */
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1); /* Απαλή σκιά */
}

.image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e5e7eb, #d1d5db);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    color: #9ca3af;
    font-size: 1.2rem;
    position: relative;
    z-index: 2; /* Φέρνει το κουτί μπροστά */
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
}

/* Ένα διακοσμητικό "μπλε" τετράγωνο που βγαίνει ελαφρώς από πίσω για 3D effect */
.decorative-shape {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 80%;
    height: 80%;
    background-color: var(--primary-color);
    border-radius: 20px;
    z-index: 1; /* Πάει πίσω από την εικόνα */
    opacity: 0.1; /* Πολύ διακριτικό */
}

/* =========================================
   MOBILE RESPONSIVE RULES (About Us)
   ========================================= */
@media (max-width: 992px) {
    /* Σπάει το grid σε ταμπλέτες και μικρότερες οθόνες */
    .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .section-title.left-align {
        text-align: center; /* Στα κινητά συνήθως δείχνει καλύτερα στο κέντρο */
    }
    
    .about-text {
        text-align: center;
    }

    /* Μικραίνουμε λίγο το offset του διακοσμητικού στα κινητά για να μην χαλάει το width */
    .decorative-shape {
        bottom: -10px;
        right: -10px;
    }
}

/* =========================================
   10. PORTFOLIO & INSTAGRAM CTA
   ========================================= */
.portfolio-section {
    padding: 100px 0;
    background-color: var(--bg-color);
}

.portfolio-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 50px;
}

.portfolio-subtitle {
    font-size: 1.05rem;
    color: #4b5563;
    margin-top: 0px; /* Φέρνει τον υπότιτλο λίγο πιο κοντά στον τίτλο */
}

/* Το Grid για τα Posts */
.ig-grid {
    display: grid;
    /* 4 στήλες στο Desktop */
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 50px;
}

/* Το κάθε "post" έχει αναλογία 1:1 (τέλειο τετράγωνο) */
.ig-post {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #d1d5db; /* Φαίνεται μόνο αν αργήσει να φορτώσει η εικόνα */
    
    background-size: cover; /* Καλύπτει όλο το κουτί χωρίς να παραμορφώνει την εικόνα */
    background-position: center; /* Κεντράρει την εικόνα */
    background-repeat: no-repeat; /* Δεν την επαναλαμβάνει */
    
    border-radius: 12px;
    overflow: hidden;
    display: block;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
/* Το μαύρο φίλτρο που εμφανίζεται όταν περνάς το ποντίκι από πάνω */
.ig-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-weight: 600;
    font-size: 1rem;
    opacity: 0;
    transition: opacity var(--transition-speed) ease;
}

.ig-post:hover .ig-overlay {
    opacity: 1;
}

/* Κουμπί Instagram */
.portfolio-cta {
    display: flex;
    justify-content: center;
}

.ig-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 35px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    border-radius: 100px;
    /* Το κλασικό Instagram Gradient */
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    box-shadow: 0 10px 20px -5px rgba(220, 39, 67, 0.4);
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.ig-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 25px -5px rgba(220, 39, 67, 0.5);
}

/* =========================================
   MOBILE RESPONSIVE RULES (Portfolio)
   ========================================= */
@media (max-width: 768px) {
    .ig-grid {
        /* Στα κινητά το κάνουμε 2x2 grid (2 στήλες, 2 γραμμές) για να φαίνονται ωραία τα τετράγωνα */
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .portfolio-section {
        padding: 60px 0;
    }
    
    .ig-btn {
        width: 100%; /* Στα κινητά το κουμπί πιάνει όλο το πλάτος για εύκολο πάτημα */
        max-width: 300px;
    }
}

/* =========================================
   11. PARTNERS CAROUSEL
   ========================================= */
.partners-section {
    padding: 60px 0;
    background-color: #ffffff;
    border-top: 1px solid #eaeaea; /* Διακριτική γραμμή διαχωρισμού πάνω και κάτω */
    border-bottom: 1px solid #eaeaea;
}

.partners-subtitle {
    text-align: center;
    font-size: 0.85rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 30px;
    font-weight: 600;
}
/* --- Ο "Κινητήρας" του Marquee (Επαναφορά) --- */
.marquee-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    /* Απαλό "σβήσιμο" δεξιά και αριστερά της οθόνης */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-track {
    display: flex;
    width: max-content;
    /* ΤΟ ΜΥΣΤΙΚΟ: Βάζουμε padding-right ίσο με το gap (80px) για να βγαίνουν τέλεια τα μαθηματικά */
    padding: 10px 80px 10px 0; 
}

.marquee-track:hover {
    animation-play-state: paused;
}

@keyframes marqueeScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Πλέον δεν χρειαζόμαστε calc(). Το -50% δουλεύει απόλυτα και αόρατα! */
        transform: translateX(-50%); 
    }
}
/* Ειδικές ρυθμίσεις για το track των λογοτύπων */
.partners-track {
    gap: 80px; /* Μεγαλύτερο κενό ανάμεσα στα λογότυπα για να "αναπνέουν" */
    animation: marqueeScroll 30s linear infinite; /* Λίγο πιο γρήγορο/απαλό scroll */
}

/* Πώς θα φαίνονται τα λογότυπα */
.partner-logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: #9ca3af; /* Γκρι χρώμα για τα κείμενα-placeholders */
    text-transform: uppercase;
    letter-spacing: -1px;
    opacity: 0.6;
    transition: opacity var(--transition-speed) ease;
    cursor: default;
}

/* Το κουτί που κρατάει την εικόνα */
.partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default; /* Βάλε 'pointer' αν θες στο μέλλον να πατιούνται σαν links */
}

/* Η ίδια η εικόνα του λογοτύπου */
.partner-logo img {
    height: 80px; /* Σταθερό ύψος για να φαίνονται όλα ομοιόμορφα - παίξε με αυτό το νούμερο */
    width: auto; /* Το πλάτος προσαρμόζεται αυτόματα για να μην παραμορφωθεί το logo */
    opacity: 0.8; /* Τα κάνει ελαφρώς διάφανα */
    transition: all var(--transition-speed) ease;
}

/* Όταν το ποντίκι πάει πάνω, παίρνουν χρώμα και ζωντανεύουν! */
.partner-logo:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

.partner-logo:hover {
    opacity: 1;
    color: var(--text-color); /* Σκουραίνει όταν το κάνεις hover (αν είναι κείμενο) */
}

/* =========================================
   MOBILE RESPONSIVE RULES (Partners)
   ========================================= */
@media (max-width: 768px) {
    .partners-section {
        padding: 40px 0;
    }
    
    .partners-track {
        gap: 50px; /* Μικραίνουμε ελαφρώς το κενό στα κινητά */
    }
    
    .partner-logo {
        font-size: 1.2rem;
    }
}

/* =========================================
   12. CONTACT SECTION & FORM
   ========================================= */
.contact-section {
    padding: 100px 0;
    background-color: var(--bg-color);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* Η φόρμα πιάνει λίγο περισσότερο χώρο */
    gap: 60px;
    align-items: flex-start;
}

.contact-info .section-title {
    margin-bottom: 20px;
    line-height: 1.1;
}
.contact-info .contact-details { 
    text-align: center;
    align-items: center;
}

@media (min-width: 768px) {
    .contact-info .section-title , .contact-info .contact-text , .contact-info .contact-details {
        text-align: center; 
        align-items: center;
    }
}

@media (min-width: 768px) {
    .contact-section .contact-grid{
        align-items: center;
    }
}

/* Στυλ για τον Χάρτη (Google Maps) */
.map-container {
    margin-top: 35px; /* Απόσταση από τα στοιχεία επικοινωνίας */
    width: 100%;
    border-radius: 16px; /* Στρογγυλεμένες άκρες */
    overflow: hidden; /* Κόβει τις γωνίες του iframe για να φαίνονται στρογγυλεμένες */
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1); /* Απαλή σκιά που δίνει βάθος */
    border: 1px solid #eaeaea; /* Λεπτό περίγραμμα για συνοχή με τη φόρμα */
    background-color: #f9fafb; /* Εμφανίζεται για λίγο πριν φορτώσει ο χάρτης */
}

.map-container iframe {
    display: block; /* Αποτρέπει το κενό κάτω από το iframe */
    width: 100%;
    height: 250px;
    filter: contrast(1.1) saturate(1.1); /* Μια μικρή «πινελιά» για να φαίνονται πιο ζωντανά τα χρώματα του χάρτη */
}

.contact-text {
    text-align: center;
    font-size: 1.1rem;
    color: #4b5563;
    margin-bottom: 30px;
    line-height: 1.6;
}

/* Το container των στοιχείων */
.contact-details {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Κενό ανάμεσα στα στοιχεία */
    margin-bottom: 20px;
}

/* Τα μεμονωμένα στοιχεία (Email, Phone, Location) */
.contact-details p {
    position: relative;
    width: max-content; /* ΠΟΛΥ ΣΗΜΑΝΤΙΚΟ: Κάνει τη γραμμή να έχει ακριβώς το πλάτος του κειμένου και όχι όλου του div */
    font-size: 1rem;
    color: var(--text-color);
    padding-bottom: 4px; /* Αφήνουμε λίγο χώρο κάτω από το κείμενο για τη γραμμή */
    cursor: pointer; /* Αλλάζει τον κέρσορα σε "χεράκι" για να δείχνει ότι είναι interactive */
}

/* Η γραμμή που είναι κρυμμένη αρχικά */
.contact-details p::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--primary-color);
    
    /* Το μαγικό trick για το animation (Μπαίνει αριστερά, βγαίνει δεξιά) */
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1); /* Ένα πολύ "γλυκό" και επαγγελματικό easing */
}

/* Όταν το ποντίκι είναι από πάνω */
.contact-details p:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Στυλ Φόρμας */
.triumph-form {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08);
    border: 1px solid #eaeaea;
}

.form-group {
    margin-bottom: 24px;
}

.form-group.row {
    display: flex;
    gap: 20px;
}

.input-wrapper {
    flex: 1; /* Μοιράζει τον χώρο ίσα στο Name και το Email */
}

label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-color);
}

input, select, textarea {
    width: 100%;
    padding: 14px 16px;
    background-color: #f9fafb;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit; /* Κληρονομεί το font (Inter) */
    color: var(--text-color);
    transition: all var(--transition-speed) ease;
}

/* Αλλαγή χρώματος όταν ο χρήστης γράφει (Focus) */
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

/* Κουμπί Αποστολής */
.submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px;
    background-color: var(--text-color); /* Σκούρο κουμπί για contrast */
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-speed) ease;
}

.submit-btn:hover {
    background-color: var(--primary-color); /* Γίνεται μπλε στο hover */
    transform: translateY(-2px);
}

.submit-btn .arrow {
    transition: transform var(--transition-speed) ease;
}

.submit-btn:hover .arrow {
    transform: translateX(4px);
}

/* =========================================
   13. FOOTER
   ========================================= */

.centered-footer {
    background-color: #000000; /* Απόλυτο μαύρο όπως στο screenshot */
    color: #ffffff;
    padding: 80px 0 40px;
    text-align: center;
}

/* Ο τίτλος TRIUMPH MEDIA με Serif γραμματοσειρά */
/* Στυλ για το link μέσα στο λογότυπο του Footer */

.footer-logo { margin-bottom: 40px;}
.footer-logo a {
    color: #ffffff;
    text-decoration: none; /* Βγάζει την υπογράμμιση */
    transition: opacity var(--transition-speed) ease;
}

/* Τα κυκλικά εικονίδια */
.footer-socials {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.4); /* Λεπτό, ημιδιαφανές λευκό περίγραμμα */
    border-radius: 50%; /* Το κάνει τέλειο κύκλο */
    color: #ffffff;
    text-decoration: none;
    transition: all var(--transition-speed) ease;
}

/* Μέγεθος των SVG (των ίδιων των εικονιδίων) */
.social-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Hover Effect: Γεμίζει λευκό και το εικονίδιο γίνεται μαύρο */
.social-icon:hover {
    background-color: #ffffff;
    color: #000000;
    border-color: #ffffff;
    transform: translateY(-3px);
}

/* Κάτω κείμενο (Copyright & ΓΕΜΗ) */
.footer-bottom {
    font-size: 0.9rem;
    color: #9ca3af;
    letter-spacing: 0.5px;
    border-top: none; /* Αφαιρούμε τη γραμμή που υπήρχε στο παλιό design */
}

/* =========================================
   MOBILE RESPONSIVE RULES (Footer)
   ========================================= */
@media (max-width: 768px) {
    .footer-logo {
        font-size: 1.8rem;
        letter-spacing: 2px;
    }
    
    .footer-socials {
        gap: 15px;
        flex-wrap: wrap; /* Επιτρέπει στα εικονίδια να αλλάξουν γραμμή αν η οθόνη είναι πολύ μικρή */
    }
    
    .footer-bottom {
        font-size: 0.8rem;
        line-height: 1.8;
    }
}

/* =========================================
   MOBILE RESPONSIVE RULES (Contact & Footer)
   ========================================= */
@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .triumph-form {
        padding: 24px; /* Μικρότερα περιθώρια μέσα στη φόρμα στα κινητά */
    }

    .form-group.row {
        flex-direction: column; /* Το Name και το Email μπαίνουν το ένα κάτω από το άλλο */
        gap: 24px;
    }

    .footer-content {
        flex-direction: column;
        gap: 30px;
        text-align: center;
        align-items: center;
    }

    .footer-brand p {
        margin: 0 auto;
    }
}

/* =========================================
   14 . TESTIMONIALS SECTION
   ========================================= */
.testimonials-section {
    padding: 100px 0;
    background-color: #f9fafb; /* Ένα πολύ απαλό γκρι, για να ξεχωρίζει από το λευκό About Us */
}

.testimonials-header {
    text-align: center;
    margin-bottom: 50px;
}

.google-rating {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #ffffff;
    padding: 8px 16px;
    border-radius: 100px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
    margin-top: 15px;
    font-size: 1.1rem;
    font-weight: 700;
}

.g-logo {
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: -0.5px;
}

.stars {
    color: #FBBC05; /* Το χρυσό-κίτρινο της Google */
    letter-spacing: 2px;
}

.rating-score {
    color: #4b5563;
    font-size: 0.95rem;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 κάρτες δίπλα-δίπλα στο Desktop */
    gap: 30px;
}

.review-card {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08);
    border: 1px solid #eaeaea;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-speed) ease;
}

.review-card:hover {
    transform: translateY(-5px); /* Μικρό ανασήκωμα στο hover */
}

.review-stars {
    color: #FBBC05;
    font-size: 1.2rem;
    margin-bottom: 15px;
    letter-spacing: 2px;
}

.review-text {
    font-size: 1.05rem;
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 25px;
    font-style: italic;
    flex-grow: 1; /* Σπρώχνει το όνομα του reviewer στο κάτω μέρος, κάνοντας τις κάρτες ίσες */
}

.reviewer-info {
    display: flex;
    align-items: center;
    gap: 15px;
    border-top: 1px solid #f3f4f6;
    padding-top: 15px;
}

/* Φτιάχνει ένα κυκλάκι με το αρχικό του ονόματος, όπως ακριβώς το κάνει η Google! */
.reviewer-avatar {
    width: 40px;
    height: 40px;
    background-color: var(--primary-color);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 1.1rem;
}

/* Για να μην έχουν όλα το ίδιο χρώμα (Προαιρετικό) */
.review-card:nth-child(2) .reviewer-avatar { background-color: #10b981; } /* Πράσινο */
.review-card:nth-child(3) .reviewer-avatar { background-color: #f59e0b; } /* Πορτοκαλί */

.reviewer-details {
    display: flex;
    flex-direction: column;
}

.reviewer-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.2;
}

.review-date {
    font-size: 0.8rem;
    color: #9ca3af;
}

/* =========================================
   MOBILE RESPONSIVE RULES (Testimonials)
   ========================================= */
@media (max-width: 992px) {
    .testimonials-grid {
        /* Σπάει σε 2 στήλες στα tablet */
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .testimonials-grid {
        /* Σπάει σε 1 στήλη στα κινητά */
        grid-template-columns: 1fr;
        gap: 20px; /* Μικραίνουμε λίγο το κενό */
    }
    
    .testimonials-section {
        padding: 60px 0;
    }
    
    .review-card {
        padding: 24px;
    }
}

/* =========================================
   FLOATING CTA
   ========================================= */
.floating-cta {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: var(--primary-color);
    color: #ffffff;
    padding: 14px 24px;
    border-radius: 100px;
    border: solid 1px var(--primary-color);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.4);
    z-index: 999; /* Εξασφαλίζει ότι θα είναι ΠΑΝΤΑ πάνω από όλα τα άλλα στοιχεία */
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, background-color var(--transition-speed) ease, color var(--transition-speed) ease, border var(--transition-speed) ease;
    
    /* --- Νέος κώδικας για το Animation με Delay --- */
    opacity: 0; /* Κρατάει το στοιχείο κρυφό όσο διαρκεί το delay */
    animation: slideUpFadeIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; 
    animation-delay: 1.5s; /* Καθυστέρηση 1.5 δευτερόλεπτο (άλλαξέ το αν θες) */
}

/* Keyframes για το animation εισόδου */
@keyframes slideUpFadeIn {
    0% {
        opacity: 0;
        transform: translateY(80px); /* Ξεκινάει 80px πιο κάτω */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* Καταλήγει στην κανονική του θέση */
    }
}

.floating-cta:hover {
    transform: translateY(-5px);
    background-color: white;
    color: var(--primary-color);
    border: solid 1px var(--primary-color);
}
/* =========================================
   MOBILE RESPONSIVE RULES (Floating CTA)
   ========================================= */
@media (max-width: 768px) {
    .floating-cta {
        bottom: 20px;
        right: 20px;
        padding: 12px 20px;
        font-size: 0.95rem;
        /* Στα κινητά η σκιά είναι λίγο πιο έντονη για να ξεχωρίζει πάνω στο κείμενο */
        box-shadow: 0 8px 20px rgba(37, 99, 235, 0.5); 
    }
}

/* =====================
--- 10. FAQ Section --- 
=========================*/
.faq-section { padding: 100px 0; background: #fff; }
.faq-header { text-align: center; margin-bottom: 50px; }
.faq-accordion { max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid #eaeaea; padding: 24px 0; }
.faq-item > summary { list-style: none; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-question { font-size: 1.1rem; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: color 0.3s; }
.faq-question:hover { color: var(--primary-color); }
.faq-question::after { content: '+'; font-size: 1.8rem; color: var(--primary-color); margin-left: 20px; transition: transform 0.3s; }
details[open] .faq-question::after { transform: rotate(45deg); color: #ef4444; }
.faq-answer { padding-top: 16px; padding-right: 40px; color: #4b5563; }