/* Font Awesome 6 Free - Solid */
@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 900;
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/webfonts/fa-solid-900.woff2") format("woff2");
  font-display: swap;
}

/* Font Awesome 6 Brands */
@font-face {
  font-family: "Font Awesome 6 Brands";
  font-style: normal;
  font-weight: 400;
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/webfonts/fa-brands-400.woff2") format("woff2");
  font-display: swap;
}

body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
/* Ρύθμιση για το logo */
.logo {
    max-width: 200px;
    height: auto;
}

/* Στυλ για το Header */
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-container {
    flex: 1;
    text-align: left;
}
.subtitle {
    font-size: 1.1em;
    color: #555;
	font-weight: 600;
    margin-right: 15px; /* Απόσταση από το τηλέφωνο */
    white-space: nowrap; /* Εμποδίζει το κείμενο να σπάσει σε νέα γραμμή */
}

/* Για μικρές οθόνες */
@media screen and (max-width: 768px) {
    .phone-container {
        display: flex;
        flex-direction: column; /* Κάνει το κείμενο να πηγαίνει πάνω από το τηλέφωνο */
        align-items: center; /* Κεντράρει τα στοιχεία */
        text-align: center;
    }

    .subtitle {
        margin-right: 0; /* Αφαιρούμε την απόσταση δεξιά */
        margin-bottom: 5px; /* Προσθέτουμε λίγο κενό κάτω από το κείμενο */
    }
}




.phone-container {
    flex: 1;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.phone-icon {
    font-size: 1em; /* Μέγεθος εικονιδίου */
    color: #4CAF50; /* Χρώμα εικονιδίου */
}

.phone-number {
    font-size: 1.2em;
    color: #333;
    text-decoration: none; /* Αφαιρεί την υπογράμμιση */
}

/*  /////////////////////////////////////////////////////////   */
/*                          Κεντρικό Menu                       */
/*  /////////////////////////////////////////////////////////   */
/* === DESKTOP MENU === */
.menu-container {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.menu-bar {
    background-color: #9d2121;
    color: white;
    position: sticky;
    top: 0;
    z-index: 999;
    transition: box-shadow 0.3s ease;
    overflow: visible; /* <-- σημαντικό για να φαίνεται το dropdown */
}


/* Shadow όταν γίνεται scroll */
.menu-bar.scrolled {
    box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}

.menu-bar .button-menu {
    text-decoration: none;
}
.menu-bar .button-menu:hover {
    color: #66C5B6;
}

/* === MOBILE TOGGLE === */
.menu-toggle-container {
    display: none;
    width: 100%;
    padding: 10px 20px;
    background-color: #9d2121;
    align-items: center;
    justify-content: space-between;
}

.menu-text {
    font-size: 1.2em;
    color: white;
}

.menu-icon {
    position: relative;
    width: 30px;
    height: 3px;
    background-color: white;
    display: inline-block;
    transition: all 0.3s ease;
	cursor: pointer;
}

.menu-icon::before,
.menu-icon::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 3px;
    background-color: white;
    transition: all 0.3s ease;
}

.menu-icon::before {
    top: -10px;
}

.menu-icon::after {
    bottom: -10px;
}

/* Όταν ανοίγει το menu */
.menu-icon.open {
    background-color: transparent; /* Κρύβουμε την κεντρική γραμμή */
}

.menu-icon.open::before {
    transform: rotate(45deg);
    top: 0;
}

.menu-icon.open::after {
    transform: rotate(-45deg);
    bottom: 0;
}

/* === DROPDOWN MENU (mobile) === */
.w3-dropdown-content {
    position: absolute;
    width: 100%;
    left: 0;

    background-color: #9d2121ed;
    display: block;

    opacity: 0;
    max-height: 0;
    overflow: hidden;

    transform: translateY(-10px);
    transition:
        opacity 0.35s ease,
        max-height 0.4s ease,
        transform 0.35s ease;

    z-index: 999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.w3-dropdown-content.show {
    opacity: 1;
    max-height: 600px;
    transform: translateY(0);
}

/* Menu links */
.w3-dropdown-content a {
    opacity: 1;
    transform: none;
    padding: 14px 22px;
    text-align: left;
    color: white;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.w3-dropdown-content a:hover {
    background-color: #7b1a1a;
}

/* === MOBILE VIEW === */
@media screen and (max-width: 1330px) {

    .header-container {
        flex-direction: column;
        align-items: center;
    }

    .logo-container {
        margin-bottom: 10px;
    }

    .menu-container {
        display: none;
    }

    .menu-toggle-container {
        display: flex;
    }
}


/*  /////////////////////////////////////////////////////////   */
/*                       Τέλος Κεντρικό Menu                    */
/*  /////////////////////////////////////////////////////////   */
/* Hero Section με background εικόνα */
.hero-section {
    background-image: url('Images/background/bg_mainpage.webp?v2');
    background-size: cover;
    background-position: center;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* ΜΟΝΟ desktop */
@media (hover: hover) and (pointer: fine) {
    .hero-section {
        background-attachment: fixed;
    }
}

/* Mobile / iOS */
@media (hover: none) and (pointer: coarse) {
    .hero-section {
        background-attachment: scroll;
    }
}


/* Στυλ μόνο για το section "Η Τέχνη της Μεταξοτυπίας" */
.art-of-silk-screen {
    background-color: #f9f9f9; /* Ανοιχτό φόντο για να ξεχωρίζει το section */
    padding: 40px 20px; /* Πρόσθετο padding για καλύτερη εμφάνιση */
    border-radius: 10px; /* Λίγο στρογγυλεμένα άκρα */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Σκιά γύρω από το section */
    margin: 20px auto;
	max-width: 1000px;
}

/* Στυλ για τις επικεφαλίδες */
.art-of-silk-screen h1{
    color: #333; /* Σκούρο χρώμα για τις επικεφαλίδες */
    font-family: 'Arial', sans-serif; /* Γραμματοσειρά για τις επικεφαλίδες */
    font-weight: bold;
    margin-bottom: 15px;
	font-size: 1.5em; /* Μέγεθος κειμένου */
	text-align: center;
}
.art-of-silk-screen h2,
.art-of-silk-screen h3 {
    color: #333; /* Σκούρο χρώμα για τις επικεφαλίδες */
    font-family: 'Arial', sans-serif; /* Γραμματοσειρά για τις επικεφαλίδες */
    font-weight: bold;
    margin-bottom: 15px;
}

/* Κεντρικό κείμενο */
.art-of-silk-screen p {
    color: #555; /* Χρώμα για το κείμενο */
    font-size: 1.1em; /* Μέγεθος κειμένου */
    line-height: 1.6; /* Απόσταση μεταξύ των γραμμών */
    margin-bottom: 20px; /* Απόσταση από την επόμενη παράγραφο */
}

/* Στυλ για τις λίστες */
.art-of-silk-screen ul {
    margin-left: 30px; /* Απόσταση από την αριστερή πλευρά */
    color: #555; /* Χρώμα για τα στοιχεία της λίστας */
    font-size: 1.1em; /* Μέγεθος γραμματοσειράς για τα στοιχεία της λίστας */
    line-height: 1.6;
}

/* Στυλ για τα στοιχεία της λίστας */
.art-of-silk-screen ul li {
    margin-bottom: 10px; /* Απόσταση μεταξύ των στοιχείων */
}

/* Κεντρική ευθυγράμμιση για τα παρακάτω στοιχεία */
.art-of-silk-screen h3 {
    font-size: 1.8em;
    margin-top: 20px;
}

/* Προσθήκη μικρού padding στις παραγράφους για πιο άνετη ανάγνωση */
.art-of-silk-screen p,
.art-of-silk-screen ul {
    padding: 0 10px;
}

/* Διαφορά με το υπόλοιπο κείμενο */
.art-of-silk-screen ul {
    padding: 0;
}

/* Στυλ για τη Γκαλερί */
.texture-gallery {
    text-align: center;
    padding: 50px 20px;
    background-color: #f8f8f8;
}

.texture-gallery h2 {
    margin-bottom: 20px;
    font-size: 24px;
    color: #333;
}

.textures-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    max-width: 900px;
    margin: auto;
}

.texture-item {
    text-align: center;
}

.texture-item img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out;
}

.texture-item img:hover {
    transform: scale(1.1);
}

.texture-item p {
    margin-top: 10px;
    font-size: 16px;
    color: #555;
    font-weight: bold;
}
@media (max-width: 768px) {
    .textures-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .textures-container {
        grid-template-columns: repeat(1, 1fr);
    }
}


/* Στυλ για το Banner με τα λογότυπα */
.logo-banner {
    background-color: #f1f1f1; /* Ελαφρύ χρώμα φόντου */
    padding: 40px 20px; /* Padding για απόσταση γύρω από το banner */
    text-align: center; /* Κεντράρισμα του περιεχομένου */
}

.logo-banner .logo-container {
    display: flex; /* Χρησιμοποιούμε flexbox για τα λογότυπα */
    justify-content: center; /* Κεντράρισμα των λογότυπων */
    gap: 60px; /* Απόσταση μεταξύ των λογότυπων */
    flex-wrap: wrap; /* Επιτρέπει τα λογότυπα να μετακινούνται σε νέες γραμμές όταν είναι πολύ στενά για την οθόνη */
}

.logo-banner .logo-item {
    width: 130px; /* Πλάτος του κάθε λογότυπου */
    height: auto; /* Διατηρεί την αναλογία του λογότυπου */
    object-fit: contain; /* Διασφαλίζει ότι το λογότυπο θα παραμείνει εντός του πλαισίου χωρίς παραμόρφωση */
}

@media screen and (max-width: 768px) {
    .logo-item {
        width: 70px; /* Μειώνουμε το πλάτος των λογότυπων σε μικρές οθόνες */
    }
	.logo-container {
        gap: 2px; /* Μικρότερο gap για μικρές οθόνες */
    }
}



/* Στυλ για το Flyer με προσφορές */
.offer-flyer {
    text-align: center; /* Κεντράρισμα της εικόνας */
    margin-top: 40px; /* Απόσταση πάνω από το banner των λογότυπων */
    margin-bottom: 40px; /* Απόσταση κάτω από το flyer */
}

.flyer-image {
    max-width: 100%; /* Το flyer θα προσαρμόζεται στο πλάτος της οθόνης */
    height: auto; /* Διατηρεί την αναλογία της εικόνας */
    border-radius: 8px; /* Προαιρετικό: Ελαφρώς στρογγυλεμένες γωνίες για πιο κομψό αποτέλεσμα */
}

@media screen and (max-width: 768px) {
    /* Σε μικρές οθόνες, μπορούμε να κάνουμε τη εικόνα να έχει μικρότερο padding αν θέλουμε */
    .offer-flyer {
        margin-top: 20px; /* Μικρότερη απόσταση για κινητά */
        margin-bottom: 20px;
    }
}

/* Style για FAQ*/
.faq {
    background-color: #f9f9f9;
    padding: 40px 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin: 20px auto;
    max-width: 1000px;
}
/* Footer container */
.footer-container {
    display: flex;
    justify-content: space-between; /* Δίνει ίσες αποστάσεις μεταξύ των τριών τμημάτων */
    align-items: center; /* Κεντράρισμα κάθε στοιχείου κάθετα */
    padding: 20px;
    text-align: center; /* Κεντράρισμα του κειμένου σε περίπτωση που χρειαστεί */
    flex-wrap: wrap; /* Επιτρέπει το wrapping σε μικρές οθόνες */
    background-color: #efefef; /* Χρησιμοποιεί πιο ανοιχτό μαύρο */
}

/* Στυλ για το λογότυπο στο footer */
.footer-logo-img {
    max-width: 150px; /* Το λογότυπο να μην είναι μεγαλύτερο από 150px */
    height: auto;
}

/* Στυλ για το μενού στο footer */
.footer-menu ul {
    display: flex;
    gap: 20px;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.footer-menu li {
    display: inline-block;
}

.footer-menu a {
    color: black;
    text-decoration: none;
    font-size: 1.2em;
}

.footer-menu a:hover {
    color: #66C5B6; /* Χρώμα όταν περνάει το ποντίκι πάνω */
}

/* Στυλ για τα social media στο footer */
.footer-social-media {
    display: flex;
    gap: 15px;
}

.social-icon {
    color: black;
    font-size: 1.5em;
    text-decoration: none;
}

.social-icon:hover {
    color: #66C5B6; /* Χρώμα όταν περνάει το ποντίκι πάνω */
}

/* Media Queries για μικρές οθόνες */
@media screen and (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        text-align: center;
    }

    .footer-menu ul {
        flex-direction: column;
        gap: 10px;
    }

    .footer-social-media {
        justify-content: center;
        gap: 10px;
    }
}

/* Στυλ για το footer */
.footer-content {
    background-color: #444; /* Μπορείς να το αλλάξεις αν θέλεις άλλο χρώμα */
    color: white;
}


.footer-links {
    margin-top: 10px; /* Απόσταση από το menu */
    margin-bottom: 10px; /* Απόσταση από το menu */
    font-size: 0.9em;
}

.footer-links a {
    text-decoration: none;
    color: #666;
    margin: 0 5px;
}

.footer-links a:hover {
    text-decoration: underline;
}




.footer-line .phone-number {
    color: white; /* Χρώμα εικονιδίου */
}

.footer-line .email-button{
	text-decoration:none;
}

.cookies-banner {
    position: fixed;
    bottom: 0;
    right: 0; /* Τοποθέτηση του banner στη δεξιά πλευρά */
    width: 100%; /* Πλάτος 100% για μικρές οθόνες */
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 15px;
    font-size: 16px;
    z-index: 9999;
    display: none; /* Αρχικά κρυφό */
}

.cookies-banner p {
    margin: 0;
    padding: 0;
}

.accept-cookies {
    background-color: #66C5B6;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    margin-left: 20px;
    border-radius: 5px;
}

.accept-cookies:hover {
    background-color: white;
    color: black;
}

/* Προσαρμογή για μεγαλύτερες οθόνες (>= 768px) */
@media screen and (min-width: 768px) {
    .cookies-banner {
        width: 40%; /* Περιορισμένο πλάτος για μεγαλύτερες οθόνες */
    }
}

/* Προσαρμογή για πολύ μικρές οθόνες (<= 480px) */
@media screen and (max-width: 480px) {
    .cookies-banner {
        font-size: 14px; /* Μικρότερο μέγεθος κειμένου */
        padding: 10px; /* Λιγότερο padding */
    }

    .accept-cookies {
        font-size: 14px; /* Μικρότερο μέγεθος κουμπιού */
        padding: 8px 15px; /* Μικρότερο padding για το κουμπί */
    }
}
.steps-container {
    display: flex;
    justify-content: center;
    align-items: stretch; /* Διασφαλίζει ότι όλα τα boxes θα έχουν το ίδιο ύψος */
    gap: 40px;
	padding: 40px 40px 0px 40px;
    max-width: 1000px;
    margin: 0 auto;
    flex-wrap: wrap;
    text-align: center;
}

.step-box {
    flex: 1 1 200px;
    background-color: #f9f9f9;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    min-height: 250px; /* Ελάχιστο ύψος για τα boxes */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Για να κατανέμεται το περιεχόμενο */
}


.step-box i {
    font-size: 40px;
    color: #333;
    margin-bottom: 15px;
}

.step-box h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.step-box p {
    flex-grow: 1; /* Αυτό βοηθάει στο να κρατήσουν τα κουτιά ίσο ύψος */
}

@media (max-width: 768px) {
    .steps-container {
        flex-direction: column;
        gap: 20px;
    }
}
.no-underline {
    text-decoration: none;
}