/* ============================================================
   SITE.CSS — Ενιαιο αρχειο CSS για το f2f.gr (FACEtoFACE)
   ============================================================
   Δημιουργηθηκε απο τη συγχωνευση 6 αρχειων:
     01.css           → Βασικο layout (font-size, container)
     style_shared.css → Κυριο theme (buttons, cards, nav, forms)
     shared.css       → Menu, backgrounds, products, hr-text
     table.css        → Πινακας αναζητησης (#myTable)
     callout.css      → Callout boxes
     styleTest.css    → Σεμιναρια & ECDL

   ΣΗΜΕΙΩΣΗ: Οπου υπηρχαν διπλοτυποι κανονες μεταξυ αρχειων,
   κρατηθηκε η τελευταια εκδοση (αυτη που εφαρμοζοταν στον browser).
   ============================================================ */

/* ================================================================
   0. CSS CUSTOM PROPERTIES (Variables)
   Κεντρικος ορισμος χρωματων για ολο το site.
   ================================================================ */
:root {
    --pink: #e03784;
    --pink-dark: rgba(224, 55, 132, 0.78);
    --dark: #343a40;
    --white: #ffffff;
    --whitesmoke: #f5f5f5;
    --gray-light: #f8f9fa;
    --shadow: rgba(0, 0, 0, 0.1);
    --yellow: yellow;
}


/* ================================================================
   1. ΒΑΣΙΚΕΣ ΡΥΘΜΙΣΕΙΣ (Reset & Base)
   Γενικοι κανονες για html, body.
   Καθοριζουν font-size, χρωμα κειμενου, background.
   ================================================================ */

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html,
body {
    margin: 0;
    padding: 0;
    text-align: justify;
    background-color: var(--white);
    word-wrap: normal !important;
    white-space: normal !important;
    color: var(--dark);
    width: 100%;
    height: auto !important;
}

body {
    min-height: 100vh !important;
}

/* Ολα τα βασικα στοιχεια: κανονικο white-space */
a, p, hr, h1, h2, h3, h4, h5, h6,
button, td, th, tr {
    white-space: normal !important;
}

thead > tr > th {
    vertical-align: top !important;
}

article {
    width: 100% !important;
}

.container {
    max-width: 960px;
}

/* Επιλογη κειμενου (selection) → κιτρινο φοντο */
::selection {
    background-color: var(--yellow);
    color: #000;
}
::-moz-selection {
    background-color: var(--yellow);
    color: #000;
}
::-o-selection {
    background-color: var(--yellow);
    color: #000;
}
::-ms-selection {
    background-color: var(--yellow);
    color: #000;
}
::-webkit-selection {
    background-color: var(--yellow);
    color: #000;
}

/* Links: χωρις underline */
a,
a:hover {
    text-decoration: none !important;
}

/* Στυλ placeholder σε input/textarea */
input[type="email"]::-webkit-input-placeholder,
input[type="email"]::placeholder,
input[type="text"]::-webkit-input-placeholder,
input[type="text"]::placeholder {
    font-style: italic;
    font-size: small;
}
textarea::-webkit-input-placeholder,
textarea::placeholder {
    font-style: italic;
    font-size: small;
}


/* ================================================================
   2. ΤΥΠΟΓΡΑΦΙΑ (Typography)
   Headings, line-height, font families, μεγεθη
   ================================================================ */

h1, h2, h3, h4, h5, h6 {
    text-align: left;
    line-height: 1.5;
}
.h1, .h2, .h3, .h4, .h5, .h6 {
    text-align: left;
    line-height: 1.5;
}

li, p {
    text-align: justify;
}


/* Πολυ μικρο κειμενο */
.vsmall {
    font-size: 45%;
    font-weight: 400;
}

/* Μεγαλο line-height */
.lh-big {
    line-height: 2.5rem;
}

.li-he {
    line-height: 2.8rem;
}

/* Strikethrough χρωμα */
del {
    text-decoration-color: rgba(0, 0, 0, 0.29);
}


/* ================================================================
   3. ΧΡΩΜΑΤΑ ΚΕΙΜΕΝΟΥ (Text Colors)
   Βοηθητικες κλασεις: .text-pink, .text-black, .text-yellow κλπ
   ================================================================ */

.text-pink {
    color: var(--pink) !important;
}

a.text-pink {
    color: var(--pink) !important;
}
a.text-pink:hover {
    color: var(--pink-dark) !important;
}
a.text-pink:focus {
    color: var(--pink-dark) !important;
}

.text-black {
    color: #000 !important;
}

.text-gray {
    color: #999 !important;
}

.text-yellow {
    color: var(--yellow) !important;
}

.text-yellow-hover {
    color: var(--white) !important;
}
.text-yellow-hover:hover {
    color: var(--yellow) !important;
}

.text-opacity {
    opacity: 0.2;
}

.text-elearing {
    color: #cdd0d3 !important;
}


/* ================================================================
   4. ΧΡΩΜΑΤΑ ΦΟΝΤΟΥ & PATTERNS (Backgrounds)
   Φοντα χρωματα και background-image patterns.
   ΣΗΜΕΙΩΣΗ: Τα url() εικονων δειχνουν σε φακελους που ΔΕΝ
   υπαρχουν στη νεα δομη (img/, img_new/). Χρειαζονται διορθωση
   οταν ανεβουν οι σωστες εικονες.
   ================================================================ */

.bg-pink {
    background-color: var(--pink) !important;
}

.bg-black {
    background-color: #000 !important;
}

.bg-whitesmoke {
    background-color: var(--whitesmoke) !important;
}

.bg-yellow {
    background-color: var(--yellow) !important;
}

.bg-blue {
    background-color: #2e3192 !important;
}

.text-blue {
    color: #2e3192 !important;
}

.bg-ecdl {
    background-color: #00ADEF !important;
}

.bg-gray {
    background-color: rgba(51, 51, 51, 0.8);
}

/* --- Patterns --- */

/* Ριγες φοντου (CSS-only, αντικατασταση του stripe.png) */
.bg-stripes {
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(0,0,0,0.03) 10px,
        rgba(0,0,0,0.03) 20px
    );
}


/* ================================================================
   5. NAVIGATION / MENU
   Navbar, dropdown, menu tabs, menubar.
   To μαυρο top navbar και τα menu items.
   ================================================================ */

/* Κυριο navbar: μαυρο φοντο, πανω απο ολα */
.navbar.navbar-expand-lg.navbar-dark.fixed-top {
    background-color: #000 !important;
    z-index: 999999 !important;
}

/* Μικρο εικονιδιο μενου */
.smallIcon {
    height: 1.5rem;
}

/* Google Maps: κρυβει τα controls */
.gmnoprint .gm-style-mtc {
    display: none !important;
}

/* Navbar links */
.navbar-brand,
.navbar-nav li a {
    line-height: 2rem;
    color: #6b6b6b;
    white-space: nowrap;
}

.navbar-nav li a:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

/* Menubar 1ου επιπεδου */
.menunavbar .nav-item .nav-link {
    color: #ddd;
}
.menunavbar .nav-item:hover .nav-link {
    color: #fff;
}
.menunavbar .nav-item.active .nav-link {
    color: var(--pink) !important;
}

/* Menubar 2ου επιπεδου */
.menunavbar2 .nav-item .dropdown-toggle {
    color: #fff;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    background-color: transparent !important;
}

.dropdown-toggle .active {
    background-color: inherit;
    border-bottom: 4px solid var(--pink);
}

/* Menu tabs (χρησιμοποιουνται στο index.html) */
.navbar-nav.menu-tabs .nav-link {
    color: var(--white) !important;
}
.navbar-nav.menu-tabs .active,
.navbar-nav.menu-tabs .show > .nav-link {
    color: var(--pink) !important;
    background-color: transparent;
}
.navbar-nav.menu-tabs .nav-link:hover {
    color: var(--pink) !important;
    background-color: transparent;
}

/* Dropdown transition */
.dropdown-menu,
.dropdown-toggle {
    transition: 2s all;
}


/* ================================================================
   6. ΚΟΥΜΠΙΑ (Buttons)
   Ολα τα custom buttons: pink, yellow, outline, dark-pink, white
   ================================================================ */

/* Γενικα: χωρις shadow */
.btn {
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0px;
}

button.active,
button:hover,
button:visited,
button:focus {
    box-shadow: none !important;
    outline: 0 !important;
}

/* --- btn-pink: Κυριο ροζ κουμπι --- */
.btn-pink,
a.btn-pink,
.btn-pink:focus {
    outline: 0;
    border: 0;
    box-shadow: none !important;
    background-color: var(--pink);
    color: var(--white);
    cursor: pointer;
}

.btn-pink:hover,
a.btn-pink:hover,
.btn-pink.active,
.btn-pink:active,
a.btn-pink:focus,
a.btn-pink:active,
a.btn-pink.active {
    background-color: var(--dark) !important;
    color: var(--white) !important;
}

/* --- btn-outline-pink: Ροζ outline κουμπι --- */
.btn-outline-pink {
    color: var(--dark);
    background-color: var(--white);
    box-shadow: none !important;
    border: 1px solid var(--dark);
}
.btn-outline-pink:hover,
.btn-outline-pink:focus,
.btn-outline-pink:active,
.btn-outline-pink.active {
    color: var(--white);
    background-color: var(--pink);
    box-shadow: none !important;
    border: 1px solid var(--pink);
}

/* --- btn-dark-pink: Σκουρο ροζ κουμπι --- */
.btn-dark-pink {
    color: var(--pink);
    background-color: #000;
    box-shadow: none !important;
}
.btn-dark-pink:hover,
.btn-dark-pink:focus {
    color: var(--white);
    background-color: var(--pink);
    transition: 1s;
    box-shadow: none !important;
}

/* --- btn-yellow: Κιτρινο κουμπι --- */
a.btn-yellow,
.btn-yellow {
    background-color: var(--yellow) !important;
    border-color: var(--yellow) !important;
    color: var(--dark) !important;
    box-shadow: none !important;
    transition: 0.5s all;
}
a.btn-yellow:hover,
.btn-yellow:hover,
a.btn-yellow:focus,
.btn-yellow:focus {
    background-color: darkgoldenrod;
    border-color: darkgoldenrod !important;
    color: var(--dark) !important;
    box-shadow: none !important;
    transition: 0.5s all;
}

.btn-warning {
    background-color: var(--yellow) !important;
}

/* --- btn-white: Διαφανες λευκο κουμπι --- */
.btn-white,
.btn-white:focus {
    outline: 0;
    border: 0;
    box-shadow: none;
    background-color: transparent;
    color: var(--white);
}
.btn-white:hover,
.btn-white.active {
    color: var(--pink) !important;
}


/* ================================================================
   7. ΦΟΡΜΕΣ (Forms)
   Custom selects, inputs, checkboxes, radio buttons.
   Ροζ focus states, σκουρο input-group-text.
   ================================================================ */

.custom-select,
.custom-file-input,
.form-control {
    border: 1px solid var(--dark) !important;
}

.input-group-text {
    background-color: var(--dark);
    color: var(--white);
    border: none !important;
}

.custom-select:focus,
.custom-file-input:focus,
.form-control:focus {
    box-shadow: 0 0 0 0.02rem var(--pink);
    border: 1px solid var(--pink) !important;
}

/* Checkbox: ροζ οταν ειναι checked */
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--pink) !important;
    box-shadow: none !important;
}
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: none !important;
}

/* Radio: ροζ οταν ειναι checked */
.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--pink) !important;
    box-shadow: none !important;
}


/* ================================================================
   8. ΠΙΝΑΚΑΣ ΑΝΑΖΗΤΗΣΗΣ (Search Table)
   Στυλ για τον πινακα αναζητησης σεμιναριων (#myTable).
   Χρησιμοποιειται στο index.html.
   (Αρχικα: table.css)
   ================================================================ */

* {
    box-sizing: border-box;
}

#myInput {
    /* background-image: url('/css/searchicon.png'); — ΣΠΑΣΜΕΝΟ PATH */
    background-position: 10px 10px;
    background-repeat: no-repeat;
    width: 100%;
    font-size: 16px;
    padding: 12px 20px 12px 40px;
    border: 1px solid #ddd;
    margin-bottom: 12px;
}

#myTable {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #ddd;
    font-size: 18px;
}

#myTable th,
#myTable td {
    text-align: left;
    padding: 12px;
}

#myTable tr {
    border-bottom: 1px solid #ddd;
}

#myTable tr.header,
#myTable tr:hover {
    background-color: #f1f1f1;
}

#table_paginate {
    float: left;
}


/* ================================================================
   9. CALLOUT BOXES
   Πλαισια ειδοποιησεων με ροζ αριστερο border.
   Χρησιμοποιουνται στο index.html και certificate/ecdl.html.
   (Αρχικα: callout.css)
   ================================================================ */

.callout-info {
    padding: 20px;
    margin: 20px 0;
    border: 1px solid var(--pink);
    border-left-width: 5px;
    border-radius: 3px;
}

/* Links με class "pp" — ροζ visited/hover */
a.pp:link {
    color: black;
}
a.pp:visited {
    color: var(--pink);
}
a.pp:hover,
a.pp:focus {
    color: var(--pink);
}
a.pp:active {
    color: deeppink;
}

.flex-container {
    display: flex;
    flex-wrap: nowrap;
    text-align: center;
    flex-flow: row wrap;
    justify-content: center;
}


/* ================================================================
   10. LAYOUT (Main, Footer, Sticky, Wrapper)
   Βασικη δομη σελιδας: main content, footer, wrappers.
   ================================================================ */

/* Main content: μετατοπιση κατω λογω fixed navbar */
.main-index {
    position: relative;
    top: 2.6rem !important;
    margin-bottom: 5rem;
}

.main {
    position: relative;
    top: 2rem !important;
}

/* Footer */
footer {
    clear: both;
    position: relative;
    bottom: 0 !important;
}

footer.footer {
    height: 500px;
}

/* Pushfooter: κραταει χωρο πριν το footer */
.pushfooter {
    height: 5rem !important;
}

/* Wrapper: banner areas */
#wrapper {
    width: 100%;
    height: 28rem;
}

#wrapper-index {
    width: 100%;
    height: 18rem;
}

/* Sticky top offset (κατω απο navbar) */
.sticky-top {
    top: 2px;
}

section.sticky-top {
    top: 70px !important;
}

/* Overlap section: ανεβαζει content πανω στο banner */
.overlap-section {
    position: relative;
    top: -8rem;
}

/* Map canvas */
.map-canvas {
    min-height: 300px;
    height: 25rem !important;
}

/* Block πανω στον χαρτη */
.block-on-map {
    position: absolute;
    right: 0;
    z-index: 2;
    background-color: #2e3192;
}



/* ================================================================
   11. ΚΑΡΤΕΣ & ΠΡΟΪΟΝΤΑ (Cards & Products)
   Product cards για σεμιναρια, card effects, hover animations.
   ================================================================ */

/* --- Product: Καρτα σεμιναριου --- */
.product {
    background-color: var(--white);
    display: block;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
    padding: 0 1rem 1.5rem;
    position: relative;
    height: 18rem;
    transition: border 0.5s ease, background-color 0.5s ease;
}

.product:hover {
    border: 1px solid var(--pink);
    background-color: rgba(255, 255, 255, 0.9);
}

/* Λογοτυπο πανω στην καρτα */
.productLogo {
    margin-top: -1.5rem;
}

.productLogo > img,
.productLogo > .headertext,
.productLogo img,
.productLogo .headertext,
.productLogo svg {
    height: 3rem;
    width: auto;
    z-index: 100;
    position: relative;
}

/* Τιτλος και κειμενο καρτας */
.product h2 {
    margin: 1rem 0 .6rem;
    font-size: 1.3375rem;
    line-height: 1.5625rem;
    font-weight: 300;
}

.product h2 a {
    color: var(--dark);
    margin-top: 1.5rem;
    text-decoration: none;
}

.product:not(#end) h2 a:hover {
    color: var(--pink);
}

.product p:not(.alignLine) {
    font-weight: 500;
    opacity: 0.8;
}

.product p:not(.alignLine) a {
    color: #333;
    font-size: 12px;
}
.product p:not(.alignLine) a:hover {
    color: var(--dark);
    font-size: 12px;
}

.product a {
    text-decoration: none;
    display: inline-block;
}

/* Κουμπι κατω στην καρτα */
.alignLine {
    margin-bottom: -1rem;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.prodButton {
    background: rgb(20, 115, 230);
    border-radius: 1rem;
    border: .125rem solid transparent;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    font-family: adobe-clean, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    color: white;
    line-height: 1.75rem;
    padding: 0 .75rem .0625rem;
    text-decoration: none;
    transition: background 150ms ease-out 0s, border-color 150ms ease-out 0s, color 150ms ease-out 0s, box-shadow 150ms ease-out 0s;
    vertical-align: top;
}
.prodButton:hover {
    text-decoration: none;
    color: white;
    background: rgb(18, 97, 193);
}

/* --- Time-table: Πινακας ωρων σεμιναριων --- */
.time-table {
    border: 1px solid #ccc;
    padding: 0 1rem 1.5rem;
    transition: border 0.5s ease, background-color 0.5s ease;
}

.time-table:hover {
    border: 1px solid var(--pink);
}

.time-tableLogo {
    margin-top: -0.70rem;
}

/* --- Card Effect: Hover animation στις καρτες --- */
.card.effect {
    -webkit-box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.75) !important;
    -moz-box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.75) !important;
    box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.75) !important;
    transition: all 0.5s;
}

.card.effect .overlap-card {
    background-color: var(--white);
    transition: all 0.7s;
    height: 0px;
    width: 0px;
    position: absolute;
    top: 0;
}

.card.effect a {
    z-index: 2;
}

.card.effect p.display-2 {
    height: 2em;
    transition: all 0.5s;
}

.card-top {
    height: 188.88px;
}

.card.effect:hover {
    transition: all 0.7s;
    opacity: 0.9;
}

.card.effect #h5show {
    display: none !important;
}
.card.effect:hover #h5show {
    display: block !important;
    color: var(--pink) !important;
    transition: all 0.7s;
    opacity: 0.9;
}
.card.effect:hover #h5hide {
    display: none !important;
}

.card.effect .card-body h5,
.card.effect .card-body p {
    transition: all 0.7s;
    opacity: 0.9;
}
.card.effect:hover .card-body h5,
.card.effect:hover .card-body p {
    color: var(--white) !important;
    transition: all 0.7s;
    opacity: 0.9;
}

.card.effect:hover .overlap-card {
    transition: all 0.7s;
}

/* Card wrapper (για σεμιναρια) */
a.card.cardwrapper {
    transition: 1s all;
    border: 1px solid var(--dark);
    color: var(--dark);
}
a.card.cardwrapper:hover {
    box-shadow: none !important;
    transform: scale(1.07, 1.07);
    transition: 1s all;
}

.card-header {
    transition: 1s all;
    border-bottom: 1px solid var(--dark);
    color: var(--dark);
}

a.card.cardwrapper .card-body .card-title.pricing-card-title {
    transition: 1s all;
}
a.card.cardwrapper:hover .card-header {
    transition: 1s all;
    background-color: #000 !important;
    font-weight: bold;
    color: var(--white);
}
a.card.cardwrapper:hover .card-body .card-title.pricing-card-title {
    transition: 1s all;
    color: #000;
}

/* Pricing card */
.pricing-header {
    max-width: 700px;
}

.card-deck .card {
    min-width: 220px;
}


/* ================================================================
   12. TABS & PILLS
   Navigation tabs (κατηγοριες σεμιναριων), pills, v-pills.
   ================================================================ */

/* Κατηγοριες σεμιναριων (ροζ active, λευκο default) */
.nav.nav-tabs.nav-categories .nav-item.nav-link {
    color: var(--white);
    background-color: transparent;
    box-shadow: none !important;
    outline: 0 !important;
    border: none !important;
}
.nav.nav-tabs.nav-categories .nav-item.nav-link:hover {
    color: var(--pink);
    background-color: white;
}
.nav.nav-tabs.nav-categories .nav-item.nav-link.active {
    color: var(--pink) !important;
    background-color: white;
}

/* ECDL tabs */
.nav.nav-tabs.nav-ecdl .nav-item.nav-link,
.nav.nav-tabs.nav-ecdl .nav-item.nav-link:after {
    color: var(--dark) !important;
    background-color: transparent;
    box-shadow: none !important;
    outline: 0 !important;
    border: none;
}
.nav.nav-tabs.nav-ecdl .nav-item.nav-link:hover {
    color: var(--pink) !important;
    background-color: transparent;
}
.nav.nav-tabs.nav-ecdl .nav-item.nav-link.active {
    color: var(--pink) !important;
    background-color: transparent;
}
.nav.nav-tabs.nav-ecdl .nav-item.nav-link.active:after {
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid var(--pink);
}

/* Highlighted arrow indicator */
.highlighted:after {
    content: "";
    position: absolute;
    right: 0;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid var(--pink);
}

/* V-pills (κατακορυφο μενου) */
#v-pills-tab a.nav-link {
    transition: none;
}
#v-pills-tab a.nav-link:hover {
    transition: none;
    background-color: transparent;
    color: var(--pink) !important;
}
#v-pills-tab a.nav-link.active,
#v-pills-tab a.nav-link:focus {
    transition: none;
    background-color: var(--gray-light) !important;
    color: var(--pink) !important;
}

/* Stickytabs (πλευρικο μενου σεμιναριων) */
#stickytabs .list-group-item {
    outline: 0 !important;
    box-shadow: none !important;
    color: #000 !important;
}
#stickytabs .list-group-item:hover,
#stickytabs .list-group-item:focus {
    background-color: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
    color: var(--pink) !important;
}
#stickytabs .list-group-item:hover:active,
#stickytabs .list-group-item:active {
    background-color: none !important;
    outline: 0 !important;
    box-shadow: none !important;
    border-color: none !important;
}
#stickytabs .list-group-item.active {
    background-color: var(--pink) !important;
    color: var(--white) !important;
    outline: 0 !important;
    box-shadow: none !important;
    border-color: var(--pink) !important;
}

#stickytabs a {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

/* Nav pills (σεμιναρια) */
.nav-pills > .nav-link.active {
    border-right: 4px solid var(--pink) !important;
    transition: all 0.3s ease;
}
.nav-pills > .nav-link.active:after {
    position: absolute;
    right: 20px;
}
.nav-pills > .nav-link {
    border-right: 4px solid transparent !important;
}

/* Pill link με δεξι border */
a.pilltest {
    border-right: 4px solid transparent;
    transition: border 0.3s ease;
}
a.pilltest.active {
    border-right: 4px solid var(--pink);
}

#v-pills-1-tab {
    border-top: 4px solid var(--pink);
}

/* Tab pane links */
.tab-pane ul li a:hover {
    text-decoration: none !important;
    color: var(--pink) !important;
    background-color: transparent !important;
}
.tab-pane ul li a {
    white-space: normal;
}

/* Tabs με κατω border (σεμιναρια) */
.tabs .nav-tabs .nav-item.show .nav-link,
.tabs .nav-tabs .nav-link.active {
    color: #000;
    background-color: transparent;
    border-bottom: 4px solid var(--pink) !important;
    font-weight: bold;
}
.tabs .nav-tabs .nav-link {
    border: 1px solid transparent;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    color: #000;
}

/* Tab content ελαχιστο υψος */
#nav-tabContent-zwni .tab-pane .carousel.slide {
    min-height: 300px !important;
}


/* ================================================================
   13. HR-TEXT (Οριζοντιες γραμμες με κειμενο)
   Decorative horizontal rules: γραμμη με κειμενο στη μεση.
   Χρησιμοποιουνται ως section dividers.
   ================================================================ */

/* --- Βασικο hr-text (γκρι γραμμη, λευκο φοντο) --- */
.hr-text {
    line-height: 3rem;
    position: relative;
    outline: 0;
    border: 0;
    color: #333;
    text-align: center;
    height: auto;
    margin-bottom: 0px;
    font-size: 1rem;
    font-weight: 300;
    white-space: nowrap;
}
.hr-text:before {
    content: '';
    background: linear-gradient(to right, transparent, #818078, transparent);
    opacity: 0.5;
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 2px;
}
.hr-text:after {
    content: attr(data-content);
    position: relative;
    display: inline-block;
    padding: 0 0.5rem;
    line-height: 3rem;
    color: #333;
    background-color: var(--white);
}

/* --- hr-text πανω σε μαυρο φοντο --- */
.hr-text-black {
    line-height: 3rem;
    position: relative;
    outline: 0;
    border: 0;
    color: #fff;
    text-align: center;
    height: auto;
    margin-bottom: 0px;
    font-size: 1rem;
    font-weight: 300;
    white-space: nowrap;
}
.hr-text-black:before {
    content: '';
    background: linear-gradient(to right, transparent, #818078, transparent);
    opacity: 0.5;
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 2px;
}
.hr-text-black:after {
    content: attr(data-content);
    position: relative;
    display: inline-block;
    padding: 0 0.5rem;
    line-height: 3rem;
    color: #fff;
    background-color: #000;
}

/* --- hr-text πανω σε λευκο φοντο (λευκο κειμενο) --- */
.hr-text-white {
    line-height: 3rem;
    position: relative;
    outline: 0;
    border: 0;
    color: #fff;
    text-align: center;
    height: auto;
    margin-bottom: 0px;
    font-size: 1rem;
    font-weight: 300;
    white-space: nowrap;
}
.hr-text-white:before {
    content: '';
    background: linear-gradient(to right, transparent, #818078, transparent);
    opacity: 0.5;
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 2px;
}
.hr-text-white:after {
    content: attr(data-content);
    position: relative;
    display: inline-block;
    padding: 0 0.5rem;
    line-height: 3rem;
    background-color: var(--white);
}

/* --- hr-text για banner (κρυμμενο) --- */
.hr-text-banner {
    display: none;
    line-height: 3rem;
    position: relative;
    outline: 0;
    border: 0;
    color: #fff;
    text-align: center;
    height: auto;
    margin-bottom: 0px;
    font-size: 1rem;
    font-weight: 300;
    white-space: nowrap;
}
.hr-text-banner:before {
    content: '';
    background: linear-gradient(to right, transparent, #81807859, transparent);
    opacity: 0.5;
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 2px;
}
.hr-text-banner:after {
    content: attr(data-content);
    position: relative;
    display: inline-block;
    padding: 0 0.5rem;
    line-height: 3rem;
    background-color: rgba(255, 255, 255, 0);
}

/* --- hr-text δωρεαν (ροζ γραμμη) --- */
.hr-text-free {
    line-height: 3rem;
    position: relative;
    outline: 0;
    border: 0;
    color: #fff;
    text-align: center;
    height: auto;
    margin-bottom: 0px;
    font-size: 1rem;
    font-weight: 300;
    white-space: nowrap;
}
.hr-text-free:before {
    content: '';
    background: linear-gradient(to right, transparent, #e03784, transparent);
    opacity: 0.5;
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 2px;
}
.hr-text-free:after {
    content: attr(data-content);
    position: relative;
    display: inline-block;
    padding: 0 0.5rem;
    line-height: 3rem;
    background-color: var(--white);
}

/* --- hr-text solid (μαυρη γραμμη) --- */
.hr-text-solid:before {
    background: #000;
    height: 1px;
}

/* --- hr-text μεγαλο (μεγαλυτερη γραμματοσειρα) --- */
.hr-text-big {
    line-height: 3rem;
    position: relative;
    outline: 0;
    border: 0;
    color: #333;
    text-align: center;
    height: 3rem;
    margin-bottom: 0px;
    font-size: 3rem;
    font-weight: 300;
    white-space: nowrap;
}
.hr-text-big:before {
    content: '';
    background: linear-gradient(to right, transparent, #818078, transparent);
    opacity: 0.5;
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 2px;
}
.hr-text-big:after {
    content: attr(data-content);
    position: relative;
    display: inline-block;
    padding: 0 .5rem;
    line-height: 3rem;
    color: #333;
    background-color: var(--white);
}


/* ================================================================
   14. PAGINATION (Σελιδοποιηση)
   Στυλ για page numbers (μαυρα active)
   ================================================================ */

.pagination {
    margin-bottom: 15px;
}

.page-link {
    position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #555555;
    background-color: var(--white);
    border: 1px solid #dee2e6;
}

.page-item.active .page-link,
.page-link:hover {
    z-index: 1;
    color: #fff;
    background-color: #555555;
    border-color: #555555;
    box-shadow: none !important;
}


/* ================================================================
   15. BANNERS & HEADERS
   Κυριο banner σελιδας, header row, banner content overlay.
   ================================================================ */

.header_row {
    min-height: 320px !important;
}

/* Banner: background εικονα σεμιναριου */
.banner {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* Banner1: με εικονα ONE.jpg — ΣΠΑΣΜΕΝΟ URL */
.banner1 {
    background-repeat: no-repeat;
    background-image: url("../images/ONE.jpg");
    background-position: center;
    background-color: whitesmoke;
    background-blend-mode: overlay;
    background-size: cover;
    opacity: 0.95;
}

.bannerArticleContainer {
    background-color: rgba(255, 255, 255, 0.69);
}

#bannerArticle > img {
    height: 30px;
}

.banner > img {
    max-width: 100% !important;
    height: 400px !important;
}

/* Banner κεντρικο (index) */
#banner {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: rgb(199, 199, 199) !important;
    background-blend-mode: overlay;
}

#banner-content {
    position: absolute;
    z-index: 999;
    bottom: 30%;
}

/* Breadcrumb πανω στο banner */
.breadcrumb-item a {
    color: lavender !important;
}
.breadcrumb-item a:hover {
    color: var(--white) !important;
}
.breadcrumb-item.active {
    color: var(--white) !important;
}


/* ================================================================
   16. RIBBONS & ΕΚΠΤΩΣΕΙΣ (Discount Tags)
   Κορδελες εκπτωσης, price tags, τριγωνα
   ================================================================ */

/* --- Ετικετα εκπτωσης (ροζ tag) --- */
.discount {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    position: relative;
    display: inline-block;
    background: var(--pink);
    width: auto;
    height: 30px;
    line-height: 32px;
    font-size: 16px;
    font-weight: bold;
    color: var(--white);
    text-align: center;
    border-radius: 4px;
    padding: 0 15px;
}
.discount:after {
    content: " ";
    height: 22px;
    width: 22px;
    background: var(--pink);
    position: absolute;
    top: 4px;
    left: -9px;
    border-radius: 4px;
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.discount:before {
    content: "";
    width: 7px;
    height: 7px;
    background: var(--white);
    position: absolute;
    top: 12px;
    left: 0px;
    z-index: 1;
    border-radius: 10px;
}

/* --- Κορδελα πανω δεξια (κιτρινη) --- */
.ribbon-wrapper-green {
    width: 85px;
    height: 88px;
    overflow: hidden;
    position: absolute;
    top: -3px;
    right: -3px;
    z-index: 1;
}

.ribbon-green {
    font-size: 10px;
    font-weight: bolder;
    color: var(--pink) !important;
    text-align: center;
    text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    position: relative;
    padding: 7px 0;
    left: -5px;
    top: 15px;
    width: 120px;
    z-index: 1;
    background-color: var(--yellow);
    color: #6a6340;
    -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
}
.ribbon-green:before,
.ribbon-green:after {
    content: "";
    border-top: 3px solid #6e8900;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    position: absolute;
    bottom: -3px;
}
.ribbon-green:before { left: 0; }
.ribbon-green:after  { right: 0; }

/* --- Ribbon3: ροζ κορδελα αριστερα (σεμιναρια) --- */
.ribbon {
    background-color: var(--pink);
}
.ribbon:nth-child(even) {
    margin-right: 4%;
}

.ribbon3 {
    width: 70%;
    height: 50px;
    position: absolute;
    left: 0px;
    top: -25px;
    background: var(--pink);
    padding-left: 2rem;
}
.ribbon3:before,
.ribbon3:after {
    content: "";
    position: absolute;
}
.ribbon3:before {
    height: 0;
    width: 0;
    bottom: -9px;
    left: 0.1px;
    border-top: 9px solid #e037849e;
    border-left: 15px solid transparent;
}
.ribbon3:after {
    height: 0;
    width: 0;
    right: -15px;
    top: 0;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 15px solid var(--pink);
}

/* --- Ribbon3-ecdl: μπλε κορδελα ECDL --- */
.ribbon3-ecdl {
    width: 70%;
    height: 50px;
    position: absolute;
    left: 0px;
    top: -25px;
    background: #00ADEF;
    padding-left: 2rem;
}
.ribbon3-ecdl:before,
.ribbon3-ecdl:after {
    content: "";
    position: absolute;
}
.ribbon3-ecdl:before {
    height: 0;
    width: 0;
    bottom: -9px;
    left: 0.1px;
    border-top: 9px solid #00ADEF;
    border-left: 15px solid transparent;
}
.ribbon3-ecdl:after {
    height: 0;
    width: 0;
    right: -15px;
    top: 0;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 15px solid #00ADEF;
}

/* Τριγωνο κατω δεξια (index) — "απο το 1984" */
.triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 125px solid var(--yellow);
    border-left: 125px solid transparent;
    position: absolute;
    right: 0px;
    bottom: 0px;
}
.triangle-bottomright:before {
    content: '';
    position: absolute;
    width: 185px;
    height: 0px;
    transform: rotate(-45deg);
    background-color: transparent;
    border-top: 2px dashed var(--yellow);
    left: -159px;
    bottom: -61px;
}
.triangle-bottomright:after {
    content: 'apo to 1984';
    font-size: 16px;
    color: black;
    position: absolute;
    left: -90px;
    padding-right: 10px;
    bottom: -120px;
    text-align: right;
}


/* ================================================================
   17. GALLERY / GRID (Masonry)
   Grid layout για εικονες projects.
   ================================================================ */

.project-gallery {
    max-width: 350px !important;
    max-height: 300px !important;
    width: 350px !important;
    height: 300px !important;
}

.grid {
    background: #eee;
    max-width: 1200px;
}
.grid:after {
    content: "";
    display: block;
    clear: both;
}

.grid-item {
    width: 160px;
    height: 120px;
    float: left;
    background: #d26;
    border: 2px solid #333;
    border-color: hsla(0, 0%, 0%, 0.5);
    border-radius: 5px;
}
.grid-item--width2  { width: 320px; }
.grid-item--width3  { width: 480px; }
.grid-item--width4  { width: 640px; }
.grid-item--height2 { height: 200px; }
.grid-item--height3 { height: 260px; }
.grid-item--height4 { height: 360px; }
.grid-item--gigante { width: 320px; height: 360px; }

.grid-item:hover {
    background: #a2c;
    border-color: white;
    cursor: pointer;
}


/* ================================================================
   18. CAROUSEL (Slideshow)
   Carousel indicators χρωματα
   ================================================================ */

ol.carousel-indicators li {
    background-color: var(--white) !important;
}
ol.carousel-indicators li.active {
    background-color: var(--pink) !important;
}


/* ================================================================
   19. QUOTES (Αποσπασματα)
   Styled blockquotes & quote boxes.
   ================================================================ */

blockquote {
    border-left: none;
}

.quote-badge {
    background-color: rgba(0, 0, 0, 0.2);
}

.quote-box {
    overflow: hidden;
    padding-top: -100px;
    border-radius: 17px;
    background-color: #4ADFCC;
    color: white;
    width: 225px;
    box-shadow: 2px 2px 2px 2px #E0E0E0;
}

.quotation-mark {
    margin-top: -10px;
    font-weight: bold;
    font-size: 100px;
    color: white;
    font-family: "Times New Roman", Georgia, Serif;
}

.quote-text {
    font-size: 19px;
    margin-top: -65px;
}

.quote {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 1rem;
    background-color: var(--white);
}

.quote__body {
    z-index: 1;
    position: relative;
    margin: 0;
    padding: .75rem 2.75rem;
    font-family: Georgia, serif;
    font-size: 1.125rem;
    font-style: italic;
}
.quote__body::before,
.quote__body::after {
    z-index: -1;
    position: absolute;
    color: #d2d2d2;
    font-size: 4rem;
    font-style: normal;
    font-weight: 700;
}
.quote__body::before {
    content: "\201C";
    top: 0;
    left: 0;
    line-height: 1;
}
.quote__body::after {
    content: "\201D";
    bottom: 0;
    right: 0;
    line-height: 0;
}

.quote__credits {
    margin-left: 2.75rem;
    padding-right: 2.75rem;
    color: #8c8c8c;
    font-size: .8125rem;
}

a.bg-dark:focus {
    background-color: inherit !important;
}


/* ================================================================
   20. VIDEO (Βιντεο)
   Sticky video player, featured video.
   ================================================================ */

#featured-video {
    transition: width .2s ease-in-out, height .2s ease-in-out, transform .38s ease-in-out;
}

#featured-video.is-sticky {
    position: fixed;
    top: 15px;
    left: auto;
    max-width: 280px;
    max-height: 158px;
    width: 280px;
    height: 158px;
}

#featured-video.sticky-top {
    top: 5em;
}


/* ================================================================
   21. BORDERS, SHADOWS, Z-INDEX (Βοηθητικα)
   Utility classes
   ================================================================ */

/* --- Borders --- */
.border-top    { border-top: 1px solid #e5e5e5; }
.border-bottom { border-bottom: 1px solid #e5e5e5; }
.border-black  { border-color: #000 !important; }
.border-pink   { border-color: var(--pink) !important; }
.border-dashed { border-style: dashed !important; }
.border-dotted { border-style: dotted !important; }

/* --- Shadows --- */
.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

.shadow {
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.25) !important;
    -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.25) !important;
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.25) !important;
}

.shadow-custom {
    -webkit-box-shadow: 0 0px 10px rgba(0, 0, 0, 0.5) !important;
    -moz-box-shadow: 0 0px 10px rgba(0, 0, 0, 0.5) !important;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.5) !important;
}

.shadow-custom-in {
    -webkit-box-shadow: inset 0px 0px 10px 0px rgba(52,58,64,1) !important;
    -moz-box-shadow: inset 0px 0px 10px 0px rgba(52,58,64,1) !important;
    box-shadow: inset 0px 0px 10px 0px rgba(52,58,64,1) !important;
}

.white-shadow-custom {
    -webkit-box-shadow: 0px 0px 13px 0px rgba(255, 255, 255, 1) !important;
    -moz-box-shadow: 0px 0px 13px 0px rgba(255, 255, 255, 1) !important;
    box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 1) !important;
}

/* --- Z-index --- */
.z-999 { z-index: 999 !important; }
.z-1   { z-index: 1 !important; }

/* --- Width helpers --- */
.w-10 { width: 10% !important; }

.h-92 {
    min-height: 92% !important;
    height: 92% !important;
}


/* ================================================================
   22. ΕΦΦΕ & ANIMATIONS (Effects)
   Scale, grayscale, transitions, typewriter, loaded bar.
   ================================================================ */

/* Grayscale φιλτρο (ασπρομαυρο) */
.grayscale {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.blacknwhite-img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

/* Scale hover effect */
.scale {
    transition: 0.8s all;
}
.scale:hover {
    transition: 0.8s all;
    transform: scale(1.02, 1.02);
}

/* CAD video hover */
.cad-video.grayscale {
    transition: 1s all;
    background-color: transparent;
}
.cad-video.grayscale:hover {
    background-color: lightgray;
    color: #000;
    transition: 1s all;
}

/* DTP video hover */
.digital-dtp-video.grayscale {
    transition: 1s all;
    background-color: transparent;
}
.digital-dtp-video.grayscale:hover {
    background-color: lightgray;
    color: #000;
    transition: 1s all;
}

/* Delay animation */
.animated.delay-10s {
    -webkit-animation-delay: 10s;
    animation-delay: 10s;
}

/* Typewriter effect */
typewriter > * {
    display: none;
    line-height: 1.3;
    margin: 1em;
}

/* Loading bar (progress) */
.loaded {
    transition: width 1.5s ease;
    width: 0%;
    height: 2px;
}

/* Image hover: αφαιρεση grayscale */
a.img_newwrapper img_new.img_new-fluid.grayscale {
    transition: all 0.6s;
}
a.img_newwrapper:hover img_new.img_new-fluid.grayscale {
    transform: scale(1.2, 1.26);
    -webkit-filter: none !important;
    filter: none !important;
}
a.img_newwrapper:hover h6.textoverimage {
    z-index: 99999 !important;
}
a.img_newwrapper:hover h6.textoverimage svg {
    opacity: 1;
    background-color: var(--pink) !important;
}

/* Text overlay πανω σε εικονα */
h6.textoverimage {
    position: absolute;
    top: 35% !important;
    left: 15% !important;
    right: 15% !important;
}
h6.textoverimage svg {
    opacity: 0;
    border-radius: 100%;
}

/* Pinterest responsive */
.pinterest > span {
    max-width: 100% !important;
    max-height: 100% !important;
}

/* Flags hover (γλωσσες) */
ul.flags li a:hover {
    -webkit-box-shadow: 0px 0px 10px 0px rgba(255, 140, 0, 1) !important;
    -moz-box-shadow: 0px 0px 10px 0px rgba(255, 140, 0, 1) !important;
    box-shadow: 0px 0px 10px 0px rgba(255, 140, 0, 1) !important;
    background-color: transparent !important;
}

/* Jumbotron (ECDL header) */
.jumbotron {
    background-color: #000;
    border-top: 8px solid var(--pink);
}

/* E-learning styles */
.elearning-about {
    border-top: 8px solid var(--pink);
    border-width: 50%;
}

.list-group.elearning .list-group-item {
    border-color: #e0e1e2 !important;
}
.list-group.elearning .list-group-item-dark.list-group-item-action {
    background-color: var(--white) !important;
    color: var(--dark) !important;
}
.list-group.elearning .list-group-item-dark.list-group-item-action:hover {
    background-color: #f6f9fc !important;
    color: var(--dark) !important;
}
.list-group.elearning .list-group-item-pink.list-group-item-action {
    background-color: var(--white) !important;
    color: var(--pink) !important;
}
.list-group.elearning .list-group-item-pink.list-group-item-action:hover {
    background-color: #f6f9fc !important;
    color: var(--dark) !important;
}
.list-group.elearning .text-primary.list-group-item-action:hover {
    background-color: #f6f9fc !important;
    color: var(--dark) !important;
}

/* Media list-group */
.media.list-group-item {
    display: inline-flex !important;
}

/* Pink bullet list */
ul.pinkbulletlist {
    list-style: none;
}
ul.pinkbulletlist li ul {
    list-style: none;
}
ul.pinkbulletlist li::before {
    content: "\2022";
    color: var(--pink);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}
ul.pinkbulletlist li ul li::before {
    content: "\00ba";
    color: var(--pink);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}


/* ================================================================
   23. RESPONSIVE (Media Queries)
   Ρυθμισεις ανα μεγεθος οθονης.
   ================================================================ */

/* --- Wrappers ανα μεγεθος --- */
@media screen and (min-width: 1400px) {
    #wrapper       { width: 100%; height: 28rem; }
    #wrapper-index { width: 100%; height: 18rem; }
}

@media screen and (max-width: 1200px) {
    #wrapper       { width: 100%; height: 15rem; }
    #wrapper-index { width: 100%; height: 7rem; }
}

@media screen and (max-width: 900px) {
    #wrapper       { width: 100%; height: 15rem; }
    #wrapper-index { width: 100%; height: 7rem; }
}

@media screen and (max-width: 500px) {
    #wrapper       { width: 100%; height: 23rem; }
    #wrapper-index { width: 100%; height: 12rem; }

    .ribbon { width: 100%; }
    .ribbon:nth-child(even) { margin-right: 0%; }
}

/* --- Banner content τοποθετηση --- */
@media screen and (max-width: 1400px) {
    #banner-content { bottom: 25%; }
}
@media screen and (max-width: 1300px) {
    #banner-content { bottom: 15%; }
}
@media screen and (max-width: 900px) {
    #banner-content { bottom: 8%; }
}
@media screen and (max-width: 400px) {
    #banner-content { bottom: 1%; }
}

/* --- Overlap section σε μικρες οθονες --- */
@media screen and (max-width: 1090px) {
    section.overlap-section container {
        max-width: 100% !important;
        width: 100% !important;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }
}

/* --- Responsive πινακας: κρυβει headers σε μικρες οθονες --- */
@media only screen and (max-width: 40em) {
    thead th:not(:first-child) { display: none; }
    td, th { display: block; }
    td[data-th]:before { content: attr(data-th); }
}

/* --- hr-text-big σε μικρες οθονες --- */
@media (max-width: 870px) {
    .hr-text-big { font-size: 1.75rem; }
    .hr-text-big:after { line-height: 3rem; }
    #menuLogo { font-size: 3rem !important; }
}

@media (max-width: 504px),
       (max-height: 504px) {
    .hr-text-big:before { display: none; }
    .hr-text-big:after  { line-height: 2rem; }
    .triangle-bottomright { display: none; }
    .menunavbar, .menunavbar2 { display: none; }
}

@media (max-height: 504px) and (orientation: landscape) {
    .menunavmobile ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (min-width: 504px) and (orientation: portrait),
       (min-height: 504px) and (orientation: landscape) {
    .menunavmobile { display: none; }
}


/* ===================== 24. BOOTSTRAP 4 → 5 COMPATIBILITY ===================== */
/* Klases pou afairethikan sto Bootstrap 5 alla xrisimopoiountai apo selides    */

/* JUMBOTRON: afairethike sto BS5 — kratame to styling gia backward compatibility */
.jumbotron {
    padding: 2rem 1rem;
    margin-bottom: 2rem;
    background-color: #e9ecef;
    border-radius: 0.3rem;
}
@media (min-width: 576px) {
    .jumbotron {
        padding: 4rem 2rem;
    }
}

/* TEXT-JUSTIFY: afairethike sto BS5 */
.text-justify {
    text-align: justify !important;
}