/* ==========================================================================
   1. ΓΕΝΙΚΕΣ ΡΥΘΜΙΣΕΙΣ (RESET & BASICS)
   ========================================================================== */
* { box-sizing: border-box; }

body { 
    margin: 0; 
    font-family: Arial, Helvetica, sans-serif; 
    background: #fafafa; 
    color: #111; 
    overflow-x: hidden; 
}

/* ==========================================================================
   2. HERO SLIDER & LOGO
   ========================================================================== */
.hero-slider {
    position: relative;
    width: 100%;
    height: 90vh;
    background: url('images/new-bg.png') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.top-logo {
    position: absolute;
    top: 30px;
    left: 40px;
    z-index: 10;
}

.top-logo img {
    height: 100px;
    width: auto;
}

.slider-container {
    width: 100%;
    max-width: 850px;
    text-align: center;
    padding: 0 20px;
    z-index: 5;
    transition: opacity 0.4s ease;
}

.slide-text {
    font-size: 42px;
    font-weight: bold;
    line-height: 1.3;
    text-shadow: 2px 2px 15px rgba(0,0,0,0.6);
}

/* Φόρμα μέσα στο Slider */
.slider-form {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 30px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    color: #444; 
}

.slider-form h2 { 
    margin: 0 0 20px; 
    font-size: 24px; 
    text-transform: none; 
}

.form-row { display: flex; gap: 12px; margin-bottom: 12px; }

.form-row input, .slider-form textarea {
    width: 100%; padding: 12px 15px; border-radius: 10px; border: none;
    outline: none; background: rgba(255, 255, 255, 0.9); font-size: 14px;
    font-family: inherit;
    color: #444; 
}

.slider-form textarea { margin-bottom: 15px; resize: none; }

.services-selection { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 15px 0; }

.chip {
    padding: 8px 14px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3);
    border-radius: 20px; font-size: 13px; cursor: pointer; transition: 0.3s;
    color: #444; 
}

.chip.active { background: #00A81A; border-color: #00A81A; color: white; }

.form-btn {
    background: #00A81A; color: white; border: none; padding: 14px; border-radius: 10px;
    font-weight: bold; cursor: pointer; transition: 0.3s; width: 100%; font-size: 16px;
    text-transform: none; 
}

.arrow {
    position: absolute; top: 50%; transform: translateY(-50%); font-size: 35px;
    color: rgba(255,255,255,0.4); cursor: pointer; background: none; border: none; z-index: 15;
}
.arrow-left { left: 10px; } .arrow-right { right: 10px; }


/* ==========================================================================
   3. QUICK START & SERVICES GRID
   ========================================================================== */
.quick-start { text-align: center; padding: 80px 20px 40px; max-width: 1200px; margin: 0 auto; }
.quick-start h1 { font-size: 32px; margin-bottom: 40px; color: #111; letter-spacing: -0.5px; }

.services-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 25px; }

.service-card { 
    background:#fff; border: none; padding: 35px 20px 25px; text-align: center; 
    cursor: pointer; display: flex; flex-direction: column; gap: 16px; 
    border-radius: 20px; box-shadow: 0 12px 30px rgba(0,0,0,0.08); 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}

.service-card i { font-size: 40px; color: #888; transition: color 0.3s ease; }
.service-card i.uil, .service-card i.uit { display: block; line-height: 1; }

.service-title { font-size: 16px; font-weight: 600; }

.service-cta { 
    margin-top: auto; padding: 10px 0; border-radius: 12px; 
    background: #c9f2d9; color: #1f7a43; font-weight: 600; 
    font-size: 14px; transition: all 0.3s ease; 
}

.service-card:hover { transform: scale(1.06); box-shadow: 0 20px 45px rgba(0,0,0,0.12); }
.service-card:hover i { color: #00A81A; }
.service-card:hover .service-cta { background: #00A81A; color: #fff; }

/* ==========================================================================
   4. TIMELINE SECTION
   ========================================================================== */
.circle-intro { text-align: center; padding: 100px 20px 60px; max-width: 1000px; margin: 0 auto; }
.circle-intro h2 { font-size: 38px; letter-spacing: -1px; margin-bottom: 15px; color: #111; }
.circle-intro p { font-size: 20px; color: #777; line-height: 1.6; margin: 0; }

section.timeline-section { width: 100%; padding: 20px 0 80px; }
.timeline-wrapper { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.timeline-line { position: absolute; left: 50%; transform: translateX(-50%); width: 6px; background: #d0d0d0; border-radius: 3px; overflow: hidden; }
.timeline-progress { position: absolute; top: 0; width: 100%; height: 0%; background: #00A81A; }

.timeline { display: flex; flex-direction: column; gap: 110px; }
.stage { display: grid; grid-template-columns: 1fr 80px 1fr; align-items: center; }

.step-label { color: #00A81A; font-size: 14px; font-weight: 300; opacity: 0.8; }
.stage.left .step-label { grid-column: 3; justify-self: start; margin-left: 20px; }
.stage.right .step-label { grid-column: 1; justify-self: end; margin-right: 20px; }

.message { 
    background: #fff; border: 1px solid #eee; border-radius: 16px; padding: 30px 25px; 
    box-shadow: 0 15px 35px rgba(0,0,0,0.08); display: flex; flex-direction: column; 
    justify-content: center; text-align: center; 
}

.stage.left .message { grid-column: 1; justify-self: end; margin-right: 20px; }
.stage.right .message { grid-column: 3; justify-self: start; margin-left: 20px; }

.message h2 { margin: 0 0 14px; font-size: 22px; color: #111; }
.message p { margin: 0; color: #666; line-height: 1.8; font-size: 16px; }

.center { grid-column: 2; display: flex; justify-content: center; }
.circle { width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 2px solid #d0d0d0; display: flex; align-items: center; justify-content: center; z-index: 2; transition: all 0.4s ease; }
.circle i { font-size: 22px; color: #888; transition: color 0.4s ease; }

.stage.active .circle { border-color: #00A81A; }
.stage.active .circle i { color: #00A81A; }

/* ==========================================================================
   5. MODAL STYLING
   ========================================================================== */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
    display: none; 
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: white;
    padding: 40px;
    border-radius: 20px;
    width: 90%;
    max-width: 400px;
    position: relative;
    text-align: center;
}

.close-btn {
    position: absolute;
    top: 15px; right: 20px;
    font-size: 30px;
    cursor: pointer;
    color: #888;
}

/* ==========================================================================
   6. FOOTER - ΕΠΑΝΑΦΟΡΑ ΓΚΡΙ ΦΟΝΤΟΥ & ΔΙΑΤΑΞΗΣ
   ========================================================================== */

/* Δίνουμε το γκρι χρώμα σε όλο το σώμα του footer */
.main-footer {
    background: #f2f2f2; 
    width: 100%;
    margin: 0;
    padding: 0;
}

.footer-container {
    display: grid;
    /* 320px αριστερά, 1fr δεξιά για τον χάρτη */
    grid-template-columns: 320px 1fr; 
    gap: 40px;
    width: 100%;
    max-width: 100%;
    padding: 40px 40px; /* Padding για να αναπνέουν τα στοιχεία μέσα στο γκρι */
    box-sizing: border-box;
    align-items: center;
}

/* --- ΕΔΩ ΠΑΡΑΜΕΝΕΙ Ο ΔΙΚΟΣ ΣΟΥ ΚΩΔΙΚΑΣ ΑΥΤΟΥΣΙΟΣ --- */

.footer-contact { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
}

.footer-contact li { 
    display: flex;
    align-items: center; 
    gap: 12px;
    margin-bottom: 10px;
    color: #444;
    font-size: 16px;
}

.footer-icon-img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(104deg) brightness(92%) contrast(101%);
}

.social-icons { 
    margin-top: 20px; 
    display: flex; 
    gap: 15px; 
}

.social-icon-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    transition: all 0.3s ease;
    filter: invert(21%) sepia(0%) saturate(614%) hue-rotate(151deg) brightness(100%) contrast(86%);
}

.social-icons a:hover .social-icon-img {
    transform: scale(1.3);
    filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(104deg) brightness(92%) contrast(101%) !important;
}

/* --- ΤΕΛΟΣ ΤΟΥ ΔΙΚΟΥ ΣΟΥ ΚΩΔΙΚΑ --- */

.footer-map iframe {
    width: 100%;
    height: 300px;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.copyright-bar {
    background: #3f3f3f; 
    color: white;
    text-align: center;
    padding: 15px 0;
    font-size: 14px;
    font-weight: 500;
    width: 100%;
    margin: 0; /* Κολλάει στο τέλος του γκρι πλαισίου */
}
/* ==========================================================================
   7. RESPONSIVE DESIGN (MEDIA QUERIES)
   ========================================================================== */
@media (max-width: 900px) {
    /* Hero & Logo */
    .top-logo img { height: 60px; }
    .top-logo { left: 20px; top: 20px; }
    .slide-text { font-size: 26px; }
    .hero-slider { height: 100vh; }

    /* Services Grid */
    .services-grid { grid-template-columns: 1fr 1fr; gap: 15px; }

    /* Timeline */
    .timeline-wrapper { padding: 0 15px; }
    .timeline-line { display: block; left: 35px; transform: translateX(-50%); width: 4px; }
    .stage { 
        display: grid !important; 
        grid-template-columns: 40px 1fr !important; 
        grid-template-areas: "circle label" "circle msg" !important; 
        gap: 0; margin-bottom: 50px; align-items: center; 
    }
    .stage.left .message, .stage.right .message { 
        grid-area: msg; grid-column: 2 !important; margin: 0 5px 0 20px !important; 
        text-align: left; padding: 18px; justify-self: stretch !important; 
    }
    .stage.left .center, .stage.right .center { grid-area: circle; grid-column: 1 !important; }
    .stage.left .step-label, .stage.right .step-label { 
        grid-area: label; grid-column: 2 !important; margin-left: 20px; 
        margin-bottom: 5px; font-weight: 700; font-size: 15px; text-align: left; 
    }
    .circle { width: 36px; height: 36px; }

    /* Footer */
    .footer-container { grid-template-columns: 1fr; text-align: center; }
    .footer-contact li { justify-content: center; }
    .social-icons { justify-content: center; }
}

/* ==========================================================================
   8. ΔΙΟΡΘΩΣΗ ΓΙΑ ΤΟ SVG ICON
   ========================================================================== */

.card-custom-icon {
    /* Εδώ ορίζουμε αυστηρά το μέγεθος για να μην είναι τεράστιο */
    width: 40px !important; 
    height: 40px !important;
    display: block;
    margin: 0 auto 15px;
    object-fit: contain;
    
    /* Αρχικό χρώμα (Γκρι) */
    filter: invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
    transition: transform 0.3s ease; /* Μόνο το μεγάλωμα έχει κίνηση */
}

/* ΠΡΟΣΟΧΗ: Το hover πρέπει να πιάνει ΟΛΗ την κάρτα για να αλλάξει το εικονίδιο */
.service-card:hover .card-custom-icon {
    /* Πράσινο χρώμα Ins4u */
    filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(104deg) brightness(92%) contrast(101%) !important;
    transform: scale(1.1);
}