.responsive-container {
    width: 90%;          /* Στα κινητά καταλαμβάνει το 90% του πλάτους της οθόνης */
    max-width: 1100px;    /* Σε μεγάλες οθόνες δεν θα ξεπεράσει ποτέ τα 800px */
    margin: 0 auto;      /* Το "auto" αναγκάζει το περιέκτη να κεντραριστεί οριζόντια */
    padding: 20px 0;     /* Προαιρετικό: Προσθέτει λίγο κενό πάνω και κάτω */
    box-sizing: border-box; /* Διασφαλίζει ότι το padding δεν θα χαλάσει το πλάτος */
}

    .animated-table {
        width: 100%;
        /* Κλειδώνει τις διαστάσεις του πίνακα για να μην επηρεάζονται από το κείμενο */
        table-layout: fixed; 
        border-collapse: separate; 
        border-spacing: 5px; 
        font-family: Arial, sans-serif;
    }
    
    .animated-table th, .animated-table td {
        padding: 15px;
        text-align: center;
        border: 1px solid #333;
        /* Κάθε κελί πιάνει ακριβώς το 1/5 του πίνακα */
        width: 20%; 
        /* Κόβει το κείμενο αν τυχόν ξεπεράσει το κελί */
        overflow: hidden; 
        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; 
    }

    
    /* Όταν το ποντίκι περνάει πάνω από ΟΠΟΙΟΔΗΠΟΤΕ κελί ή επικεφαλίδα */
    .animated-table th:hover, .animated-table td:hover {
        transform: scale(1.05); /* Μεγέθυνση κατά 5% */
        box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* Προσθήκη σκιάς για τρισδιάστατο εφέ */
        cursor: pointer; /* Το ποντίκι γίνεται χεράκι */
    }

    /* Στυλ Επικεφαλίδας */
    .animated-table th {
        background-color: #212529;
        color: #ffffff;
    }
    
    /* Στυλ 1ης Σειράς */
    .animated-table .first-row td {
	background-color: #f8d7da;
        color: #333;
    }
	
			.custom-line {
    border: none;               /* Αφαιρεί το προεπιλεγμένο στυλ του browser */
    height: 3px;                /* Το πάχος της γραμμής */
    background-color: #0d6efd;  /* Το χρώμα της γραμμής */
    width: 50%;                 /* Το πλάτος της (π.χ. να πιάνει τη μισή σελίδα) */
    margin: 10px auto;          /* 20px κενό πάνω/κάτω και κεντραρισμένη οριζόντια */
}
img[src$=".gif"] {
    filter: opacity(0.85) grayscale(20%);
    transition: all 0.3s ease;
}

img[src$=".gif"]:hover {
    filter: opacity(1) grayscale(0%);
    transform: scale(1.3); /* Μεγάλη μεγέθυνση */
}

img[src$=".jpg"]:hover {
    outline: 3px solid #ff4500; /* Πορτοκαλί/κόκκινο περίγραμμα που ταιριάζει με τη φωτιά (FWI) */
    outline-offset: 4px;
}






/* Νέα κλάση για 2 στήλες */
.double-cards-grid {
    display: grid;
    grid-template-columns: 1fr; /* 1 στήλη στα κινητά */
    gap: 30px;
    max-width: 90%;
    margin: 30px auto 60px auto;
}

@media (min-width: 768px) {
    .double-cards-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 ίσες στήλες για PC */
    }
}

/* ─── CSS ΓΙΑ ΤΗ ΜΙΑ ΕΝΟΤΗΤΑ ΣΤΗ ΜΕΣΗ ─── */
.single-card-grid {
    max-width: 90%;
    margin: 30px auto 60px auto;
    display: flex;
    justify-content: center; /* Κεντράρει το περιεχόμενο οριζόντια */
}

/* Δίνουμε στην ενότητα το ίδιο πλάτος που έχουν και οι από πάνω για ομοιομορφία */
.single-card-grid .card-container {
    width: 100%;
    max-width: 500px; /* Αυτό το μέγεθος ταιριάζει με το πλάτος των 3 από πάνω σε PC */
}

 .note-box {
    background: rgba(0, 123, 255, 0.08); /* Απαλό μπλε ημιδιαφανές φόντο */
    border-left: 5px solid #f58d42; /* Έντονη μπλε κάθετη γραμμή αριστερά */
    padding: 15px;                  /* Εσωτερικό κενό */
    margin: 20px 0;                 /* Κενό πάνω και κάτω από το κουτί */
    border-radius: 4px;             /* Ελαφρώς στρογγυλεμένες γωνίες */
    font-family: sans-serif;
}

.note-box-red {
    background-color: #fdf2f2;      /* Πολύ απαλό κόκκινο/ροζ φόντο για να ταιριάζει */
    border-left: 5px solid #ec5b5b; /* Έντονη κόκκινη κάθετη γραμμή αριστερά */
    color: #c0392b;                 /* Σκούρο κόκκινο κείμενο για να διαβάζεται εύκολα */
    
    /* Περιορισμός πλάτους και responsive κεντράρισμα */
    width: 80%;                     /* Πιάνει το 90% στις μικρές οθόνες */
    max-width: 400px;               /* Στις μεγάλες οθόνες σταματάει στα 600px (δεν απλώνει) */
    margin: 5px auto;              /* Κενό πάνω/κάτω και auto για να κεντραριστεί στη σελίδα */
    
    padding: 5px;                  /* Εσωτερικό κενό για να αναπνέει το κείμενο */
    border-radius: 4px;             /* Ελαφρώς στρογγυλεμένες γωνίες */
    font-family: sans-serif;
    box-sizing: border-box;         /* Προστατεύει το πλάτος από το padding */
}

/* Στυλ Πίνακα */
table {
    width: 100%;
    border-collapse: collapse;
    font-family: sans-serif;
    background-color: #e9d2fa;
}

/* Κοινό στυλ για επικεφαλίδες και κελιά */
th, td {
    border: 1px solid #e0e0e0;
    padding: 14px 16px;
    text-align: left;
    vertical-align: top; /* Ευθυγραμμίζει το κείμενο στην κορυφή του κελιού */
}

/* Στυλ Κεφαλίδας Πίνακα */
th {
    background-color: #f5f5f5;
    color: #333333;
    font-weight: bold;
}

/* Έμφαση στη στήλη των τίτλων */
.title-column {
    font-weight: bold;
    color: #2c3e50;
    width: 25%; /* Δίνει ένα σταθερό πλάτος 25% στους τίτλους */
    white-space: nowrap; /* Εμποδίζει τον τίτλο να σπάσει σε 2 γραμμές αν είναι μικρός */
}

/* Εναλλαγή χρωμάτων στις γραμμές για ξεκούραστη ανάγνωση */
tbody tr:nth-child(even) {
    background-color: #eedefa;
}



/* Το κεντρικό responsive container για το πλέγμα */
.grid-container {
    width: 95%;
    max-width: 1000px; /* Λίγο πιο φαρδύ για να χωράνε άνετα 3 στήλες */
    margin: 40px auto;
    display: flex;
    flex-wrap: wrap; 
    justify-content: center; /* Κεντράρει τις 2 κάτω κάρτες */
    gap: 20px; /* Το κενό ανάμεσα στα κουτιά */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Το περίγραμμα και το στυλ της κάθε ενότητας */
.grid-item {
    background-color: #d2c3db;
    border: 2px solid #e67e22;  /* Πορτοκαλί περίγραμμα */
    border-radius: 8px;          /* Στρογγυλεμένες γωνίες */
    padding: 22px;               /* Εσωτερικός χώρος για να απλώνεται το κείμενο άνετα */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); /* Πολύ απαλή σκιά για βάθος */
    transition: transform 0.2s, box-shadow 0.2s;
	    flex: 1 1 280px;       
    max-width: 310px;      /* Εμποδίζει τις 2 κάτω κάρτες να απλώσουν υπερβολικά */
}

/* Εφέ όταν ο χρήστης περνάει το ποντίκι πάνω από την ενότητα (Hover) */
.grid-item:hover {
    transform: translateY(-3px); /* Σηκώνεται ελαφρώς */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); /* Η σκιά γίνεται πιο έντονη */
    border-color: #b2bec3;       /* Το περίγραμμα σκουραίνει λίγο στο hover */
}

/* Ο Τίτλος της κάθε ενότητας */
.grid-item-title {
    font-size: 1.6rem;
    color: #2c3e50;
    margin: 0 0 12px 0;
    font-weight: bold;
    border-bottom: 1px solid #f1f2f6; /* Λεπτή γραμμή κάτω από τον τίτλο */
    padding-bottom: 8px;
}

/* Το κείμενο που απλώνεται μέσα στο κουτί */
.grid-item-text {
    font-size: 1.4rem;
    color: #57606f;
    line-height: 1.6;           /* Ιδανικός αέρας ανάμεσα στις γραμμές */
    margin: 0;
    text-align: justify;        /* ΑΠΛΩΜΑ: Πλήρης στοίχιση κειμένου (Justified) */
}




/* Το κεντρικό responsive container για όλη την ενότητα των όρων */
.terms-container {
    width: 100%;
    max-width: 1100px;
    margin: 40px auto;
    font-family: sans-serif;
}

/* Το «κουτί» για τον κάθε όρο ξεχωριστά */
.term-section {
    background-color: #eedefa;
    border: 1px solid #e0e0e0;
    border-left: 5px solid #e67e22; /* ΑΛΛΑΓΗ: Έντονη Πορτοκαλί κάθετη γραμμή αριστερά */
    border-radius: 6px;
    padding: 25px;
    margin-bottom: 35px; /* Απόσταση ανάμεσα στους όρους */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); /* Πολύ απαλή σκιά */
	
}

/* Ο Τίτλος του Όρου (π.χ. ANGSTROM INDEX) */
.term-title {
    font-size: 1.8rem;
    color: #d35400; /* ΑΛΛΑΓΗ: Σκούρο πορτοκαλί/κεραμιδί για να δένει με τη γραμμή */
    margin: 0 0 12px 0;
    text-transform: uppercase; /* Μετατρέπει αυτόματα σε κεφαλαία */
    letter-spacing: 0.5px;
    font-weight: bold;
}

/* Η Επεξήγηση του Όρου */
.term-definition {
    font-size: 1.6rem;
    color: #4a5568;
    line-height: 1.6;
    margin: 0 0 15px 0;
}

/* Το εσωτερικό κουτάκι για την Εφαρμογή */
.application-box {
    background-color: #fff9f5; /* ΑΛΛΑΓΗ: Πολύ απαλό πορτοκαλί/κρεμ φόντο */
    border-left: 3px solid #e67e22; /* ΑΛΛΑΓΗ: Πορτοκαλί γραμμή για την εφαρμογή */
    padding: 12px 15px;
    font-size: 1.3rem;
    color: #334155;
    line-height: 1.5;
    border-radius: 0 4px 4px 0;
	
}


#scrollTopBtn {
    display: none;            /* Κρυμμένο από προεπιλογή */
    position: fixed;          /* Σταθερή θέση στην οθόνη, δεν κουνιέται με το scroll */
    bottom: 30px;             /* 30px από το κάτω μέρος */
    right: 30px;              /* 30px από τα δεξιά */
    z-index: 99;              /* Διασφαλίζει ότι θα είναι πάνω από όλα τα άλλα στοιχεία */
    border: none;
    outline: none;
    background-color: #e67e22; /* Πορτοκαλί χρώμα για να ταιριάζει με το στυλ σας */
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 50%;       /* Τέλειο στρογγυλό κουμπί */
    font-size: 18px;
    width: 50px;
    height: 50px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s, transform 0.2s;
}

/* Εφέ όταν ο χρήστης περνάει το ποντίκι από πάνω (Hover) */
#scrollTopBtn:hover {
    background-color: #d35400; /* Σκούρο πορτοκαλί στο hover */
    transform: scale(1.1);     /* Μεγαλώνει ελαφρώς για καλύτερη αίσθηση */
}

/* Το κεντρικό πλαίσιο στην κορυφή της σελίδας */
.top-warning-box {
    width: 100%;
    max-width: 1000px;
    margin: 30px auto;          /* Κεντράρισμα στη σελίδα */
    background: rgba(0, 123, 255, 0.08); /* Απαλό μπλε ημιδιαφανές φόντο */
    border: 2px solid #e67e22;  /* Πορτοκαλί περίγραμμα */
    border-radius: 8px;         /* Στρογγυλεμένες γωνίες */
    overflow: hidden;           /* Κρατάει το banner τέλεια μέσα στις γωνίες */
    box-shadow: 0 5px 20px rgba(230, 126, 34, 0.15); /* Διακριτική πορτοκαλί σκιά */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Container για το .gif ώστε να κεντράρεται σωστά */
.warning-gif-wrapper {
    text-align: center;
    padding: 20px 20px 10px 20px;
}

/* Ρύθμιση για το GIF (Responsive μέγεθος) */
.warning-gif {
    max-width: 400px;           /* Ρυθμίστε το μέγιστο πλάτος που θέλετε να έχει το GIF */
    height: auto;
    display: inline-block;
}

/* Το κόκκινο Banner προειδοποίησης */
.warning-banner {
    background-color: #d35400;  /* Έντονο πυρώδες πορτοκαλί/κόκκινο */
    color: white;
    text-align: center;
    padding: 12px 20px;
    font-size: 1.3rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,0.15); /* Εσωτερική σκιά για βάθος */
}

/* Ο χώρος του κειμένου - ΑΛΛΑΓΗ: ΠΛΗΡΩΣ ΚΕΝΤΡΑΡΙΣΜΕΝΟ */
.warning-text-content {
    padding: 25px;
    color: #2c3e50;             /* Σκούρο ευανάγνωστο χρώμα */
    font-size: 2.15rem;         /* Μεγαλύτεροι χαρακτήρες για να ξεχωρίζουν */
    line-height: 1.7;           /* Αυξημένος αέρας ανάμεσα στις γραμμές */
    text-align: center;         /* Κεντράρισμα όλων των παραγράφων */
}

/* Μορφοποίηση των παραγράφων μέσα στο warning box */
.warning-text-content p {
    margin: 0 0 15px 0;
}
.warning-text-content p:last-child {
    margin-bottom: 0;           /* Αφαιρεί το κενό από την τελευταία παράγραφο */
}

/* Έμφαση σε κρίσιμες λέξεις (Bold) */
.warning-text-content strong {
    color: #c0392b;             /* Οι έντονες λέξεις γίνονται σκούρες κόκκινες */
    font-weight: bold;
    background-color: #ffeaea;  /* Μικρό highlight πίσω από τα bold */
    padding: 2px 6px;
    border-radius: 3px;
    display: inline-block;      /* Διασφαλίζει σωστή εμφάνιση στο κέντρο */
}

html {
  scroll-behavior: smooth;
}

/* ─── ΣΤΥΛ ΓΙΑ ΤΟ ΔΙΑΧΩΡΙΣΤΙΚΟ BANNER ΜΕ ΠΛΑΙΣΙΟ ─── */
.section-banner {
    max-width: 1120px; /* Ευθυγραμμίζεται με το grid */
    margin: 50px auto 10px auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.banner-box {
    background: rgba(0, 123, 255, 0.1); /* Απαλό μπλε */
    border: 1px solid rgba(0, 123, 255, 0.2); 
    backdrop-filter: blur(5px); /* Εφέ θολώματος στο παρασκήνιο (αν υπάρχει background εικόνα) */
    padding: 35px 25px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    text-align: center;
    font-family: sans-serif;
}

.banner-box h2 {
    font-size: 24px;
    color: #111;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* Η διακριτική γραμμή κάτω από τον τίτλο */
.banner-box h2::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background-color: #007BFF; /* Το μπλε χρώμα των κουμπιών σου */
    margin: 12px auto 0 auto;
    border-radius: 2px;
}

.banner-box p {
    font-size: 15px;
    color: #555;
    margin: 15px 0 0 0;
    line-height: 1.6;
    max-width: 800px; /* Περιορίζει το πλάτος του κειμένου για να διαβάζεται πιο εύκολα */
    margin-left: auto;
    margin-right: auto;
}


/* Δημιουργεί ένα "κουτί" που επιτρέπει το scroll μόνο στον πίνακα */
.fwi-table-wrapper {
    width: 100%;
    overflow-x: auto; /* Εμφανίζει οριζόντιο scrollbar μόνο αν ο πίνακας ξεπερνάει την οθόνη */
    -webkit-overflow-scrolling: touch; /* Κάνει το scroll πολύ ομαλό στα iPhone/iPad */
    margin-top: 15px;
    margin-bottom: 25px;
    border: 1px solid #e0e0e0; /* Προαιρετικό: ένα απαλό περίγραμμα γύρω από το scroll περιοχή */
    border-radius: 4px;
}

/* Διασφαλίζει ότι ο πίνακας δεν θα στριμωχτεί, αλλά θα κρατήσει το ελάχιστο πλάτος του */
.fwi-table-wrapper table {
    min-width: 600px; /* Ρυθμίστε το ανάλογα με το πόσο μεγάλος είναι ο πίνακας */
    width: 100%;
}