* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #fff;
    overflow-x: hidden;
}

/* ---------------------------------------------
   BACKGROUND SLIDESHOW WITH FADE
--------------------------------------------- */
.bg-container {
    position: fixed;
    top:0; left:0;
    width:100%; height:100%;
    z-index:-1;
    overflow:hidden;
}

.bg-slide {
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    background-size:cover;
    background-position:center;
    opacity:0;
    transition: opacity 2.5s ease;
}

.bg-slide.active {
    opacity:1;
}

/* --------------------------------------------- */

.overlay {
    background: rgba(0,0,0,0.45);
    min-height: 100vh;
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
/* ---------------------------------------------
   LOGO TOP
--------------------------------------------- */
.logo-top {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 30px;
    width: 100%;
}

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

/* ---------------------------------------------
   TITLE BLOCK
--------------------------------------------- */
.brand-title {
    text-align: center;
    font-size: 26px;
    font-weight: 300;
    letter-spacing: 1px;
    margin-bottom: 10px;
    opacity: 0.95;
}

.title-block {
    text-align: center;
    margin-bottom: 40px;
}

.title-main {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 300;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.title-sub {
    font-size: clamp(14px, 2vw, 18px);
    font-weight: 300;
    line-height: 1.35;
    margin: 0 auto;
    max-width: 700px;
    text-align: center;
}


/* ---------------------------------------------
   PAGE LAYOUT (INFO + LINKS + FINEART)
--------------------------------------------- */
.page {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
	flex: 1;
}

/* ---------------------------------------------
   INFO BLOCK (LEFT)
--------------------------------------------- */
.info-block {
    flex: 1 1 55%;
    background: rgba(0,0,0,0.25);
    border: 1px solid #fff;
    border-radius: 14px;
    padding: 25px 30px;
    backdrop-filter: blur(4px);
}

.info-block p {
    color: #FFF;
    font-size: 18px;
    line-height: 1.55;
    margin-bottom: 16px;
}

.info-block .areas {
    font-size: clamp(12px, 1.4vw, 14px);
    font-weight: 300;
    opacity: 0.85;
    text-align: center;
    margin-top: 8px;
    line-height: 1.35;
    letter-spacing: 0.3px;
}



/* ---------------------------------------------
   LINKS BLOCK (RIGHT)
--------------------------------------------- */
.links-block {
    flex: 1 1 35%;
    background: rgba(0,0,0,0.45);
    border: 1px solid #fff;
    border-radius: 14px;
    padding: 25px;
    height: fit-content;
}

.links-block a {
    display: block;
    font-weight: 700;
    color: #FFFFFF;
    font-size: 18px;
    margin: 10px 0;
    text-decoration: none;
    transition: color 0.25s ease;
}

.links-block a:visited {
    color: #F5F5F5;
}

.links-block a:hover,
.links-block a:active,
.links-block a:focus {
    color: #F00 !important;
}

/* ---------------------------------------------
   FINEART (BOTTOM RIGHT IN DESKTOP)
--------------------------------------------- */
.fineart-link {
    flex: 1 1 100%;        /* Πάντα κάτω από τα links */
    text-align: right;     /* Δεξιά σε PC */
    margin-top: 30px;
}

.fineart-link img {
    width: 260px;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.3s ease;
    max-width: 100%;
    height: auto;
}

.fineart-link img:hover {
    transform: scale(1.1);
}

/* ---------------------------------------------
   MOBILE LAYOUT
--------------------------------------------- */
@media (max-width: 900px) {
    .page {
        flex-direction: column;
    }

    .fineart-link {
        text-align: center;
        margin-top: 20px;
    }

    .fineart-link img {
        width: 200px;
    }

}


/* ---------------------------------------------
   APPOINTMENT BUTTON
--------------------------------------------- */
.appointment {
    text-align: center;
    margin-top: 50px;
}

.appointment a {
    background: #ffffff;
    color: #000;
    padding: 14px 26px;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
}

.appointment a:hover {
    background: #e5e5e5;
}

@media (max-width: 900px) {
    .title-main {
        font-size: 32px;
    }

    .title-sub {
        font-size: 18px;
        max-width: 90%;
    }

    .info-block p {
        font-size: 16px;
        line-height: 1.5;
    }

    .links-block a {
        font-size: 17px;
    }
}

@media (max-width: 480px) {
    .title-main {
        font-size: 28px;
    }

    .title-sub {
        font-size: 16px;
    }

    .info-block p {
        font-size: 15px;
    }

    .links-block a {
        font-size: 16px;
    }
}

#footer {
    text-align: center;
    padding: 20px 0;
    margin-top: 30px;
    z-index: 10;
}

#footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#footer li {
    display: inline-block;
    margin: 0 8px;
}

#footer img {
    width: 26px;
    height: auto;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

#footer img:hover {
    opacity: 1;
}

#footer .copyright {
    font-size: clamp(12px, 1.4vw, 14px);
    font-weight: 300;
    opacity: 0.85;
    margin-right: 10px;
}

/* FOOTER LINKS – SAME STYLE AS MAIN LINKS */
#footer a {
    color: #FFFFFF;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.25s ease;
}

/* Visited */
#footer a:visited {
    color: #F5F5F5;
}

/* Hover / Active / Focus */
#footer a:hover,
#footer a:active,
#footer a:focus {
    color: #F00 !important;
}


/* ---------------------------------------------
   RUNNING GALLERY (FULL-WIDTH BUT CENTERED)
--------------------------------------------- */
.running-gallery {
    width: 100vw;              /* full width */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;        /* break overlay padding */
    margin-right: -50vw;
    overflow: hidden;
    background: #fff;
    padding: 12px 0;
    margin-top: -20px;
    margin-bottom: 40px;
}

/* Centered content inside full-width container */
.running-track {
    display: flex;
    animation: runSlider 30s linear infinite;
    max-width: 1400px;         /* keeps the gallery visually centered */
    margin: 0 auto;            /* centers the track */
}

.running-track img {
    height: 150px;
    width: auto;
    object-fit: contain;
    margin-right: 30px;
    filter: brightness(0.95);
    transition: transform 0.3s ease;
}

.running-track img:hover {
    transform: scale(1.1);
}

@keyframes runSlider {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}