/* ─── Font Awesome ─── */
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css");



/* HEADER */
/* ================= ΟΡΙΣΜΟΣ ΜΕΤΑΒΛΗΤΩΝ ΓΙΑ ΕΥΚΟΛΟ TWEAKING ================= */
:root {
  /* διάκενο μεταξύ links */
  --nav-gap:          5rem;
  /* font-size των links */
  --nav-font-size:    1.90rem;
  /* αριστερό margin του menu (mobile/tablet) */
  --nav-margin-base:  6rem;   /* αντί για ms-4 */
  /* αριστερό margin του menu (desktop ≥992px) */
  --nav-margin-lg:    0.5rem;   /* αντί για ms-lg-2 */
}

/* ================= ΒΑΣΙΚΕΣ ΡΥΘΜΙΣΕΙΣ ================= */
.logo-container {
  padding-left: min(1rem,8%);
  margin-right: 1rem;
}



.logo-container img {
  text-align: center;
  height: 50px; /* αρχικό ύψος για desktop */
  max-width: 100%;
  object-fit: contain;
}


.navbar-brand img {
  height: 5vw;
  max-height: 100px;
}

@media (max-width: 991.98px) {
  .navbar-brand img {
    height: 17vw;
    max-height: 83px;
  }
}


/* Σε μικρές οθόνες, μικραίνουμε το ύψος */
@media (max-width: 767.98px) {
  .logo-container img {
    max-height: 70px;
    height: 60px;
  }
}

/* Σε μεσαίες οθόνες */
@media (min-width: 768px) and (max-width: 991.98px) {
  .logo-container img {
    max-height: 80px;
    height: 80px;
  }
}
/* Σε μεσαίες οθόνες */
@media (min-width: 992px) and (max-width: 2200px) {
  .logo-container img {
    height: 94px;
  }
}

/* Σε μεσαίες οθόνες */
@media (min-width: 992px){
.menu-links {
  padding-left: 4.0rem;
}
}


.menu-links {
  display: flex;
  gap: var(--nav-gap);
}

.navbar-nav {
  display: flex;                /* για να λειτουργεί το gap */
  flex-wrap: wrap;              /* σπάσιμο σε γραμμές αν χρειάζεται */
  gap: var(--nav-gap);
  margin-left: var(--nav-margin-base);
  margin-right: 0;
}

.navbar-nav .nav-link {
  font-size: clamp(0.5rem, 3.0vw, 1rem);
  transition: color 0.3s ease;
}
.navbar-nav .nav-link:hover {
  background-color: black !important;
  color: white !important;
  border-radius: 5px; /* για λίγο ωραίο στρογγυλεμένο εφέ */
  padding: 0.25rem 0.5rem; /* για να φαίνεται το background γύρω από το κείμενο */
  transition: background-color 0.3s ease, color 0.3s ease;
}

.navbar-nav .nav-link {
  padding: 0.25rem 0.5rem;
  transition: background-color 0.3s ease, color 0.3s ease;
}


/* ======= HEADER για πολύ μεγάλες οθόνες (≥ 2200px) ======= */
@media (min-width: 2000px) {

  :root {
    --nav-gap: 7rem;           /* αυξημένο διάκενο ανάμεσα στα links */
    --nav-font-size: 2.4rem;   /* μεγαλύτερο μέγεθος γραμματοσειράς */
    --nav-margin-base: 8rem;   /* λίγο μεγαλύτερο κενό στην αρχή */
    --nav-margin-lg: 2rem;     /* λίγο μεγαλύτερο margin για desktop */
  }

  /* Λογότυπο */
  .logo-container img {
    height: 50vw;             /* μεγαλύτερο ύψος λογοτύπου */
    max-height: none;          /* χωρίς περιορισμό max-height */
  }

  .navbar-brand img {
    height: 7vw;             /* σταθερό μέγεθος για μεγάλη ανάλυση */
    max-height: none;
  }

  /* Links στο menu */
  .navbar-nav .nav-link {
    font-size: 1.5vw;           /* ευανάγνωστο σε απόσταση (τηλεόραση) */
    padding: 0.6rem 1.2rem;
  }

  /* Menu container */
  .menu-links {
    padding-left: 6rem;        /* περισσότερο padding */
  }
}

  /* FOOTER */
.footer{
  padding-left: 2%;
}

.footer .social-links {
  padding-top: 1vh;
  display: inline-flex;
  gap: 1.5rem;
}

.footer .social-icon {
  padding-bottom: 1.2vw;
  font-size: clamp(1.4rem,1.8vw,2.0rem);
  transition: color .3s, transform .3s;
}

.footer .social-icon:hover {
  transform: translateY(-2px);
}

.footer .social-icon.facebook:hover {
  color: #3b5998;  /* Facebook blue */
}

.footer .social-icon.instagram:hover {
  color: #E1306C;  /* Instagram gradient pink */
}

.footer .footer-copy {
  font-size:clamp(0.8rem,1.0vw,1.4rem);
  opacity: 0.9;
}


body {
  background: #f7fafd;
  font-family: 'Montserrat', Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* ================= Hero Section ================= */
.body-main {
  background: #fff;
}

.main {
  position: relative;
  width: 100%;
  height: 80vh;                        /* Υψος ή πχ min-height: 500px */
  background: url('assets/hero.png')   /* δικό σου αρχείο εικόνας */
              no-repeat center center;
  background-size: cover;
  overflow: hidden;
}

.overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* σκουραίνει ελαφρώς την εικόνα */
  pointer-events: none;
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;                           /* πάνω από το overlay */
  /* max-width: 800px;                     να μην απλωθεί υπερβολικά το κείμενο */
  padding-left: 8vw;
  padding-right: 8vw;
  /* padding: 0 1rem; */
}

.hero-content h1 {
  font-size: clamp(1.4rem,3.50vw,2.5rem);
}

.hero-content p.lead {
  font-size: clamp(0.70rem,1.5vw,1.25rem);
}

/* Responsive ύψος hero */
@media (max-width: 767.98px) {
  .main {
    height: 60vh;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .main {
    height: 70vh;
  }
}
@media (min-width: 992px) {
  .main {
    height: 80vh;
  }
}


/* ======= FOOTER & HERO για πολύ μεγάλες οθόνες (≥ 2200px) ======= */
@media (min-width: 2000px) {

  /* FOOTER */
  .footer {
    padding-left: 1vw; /* λίγο παραπάνω κενό για ισορροπία */
  }
  .footer .social-links {
    gap: 3rem; /* μεγαλύτερη απόσταση ανάμεσα στα icons */
  }
  .footer .social-icon {
    font-size: 1.5vw; /* εμφανή σε 4K/8K */
    padding-bottom: 1.5rem;
  }
  .footer .footer-copy {
    font-size: 1vw;
  }

  /* HERO SECTION */
  .main {
    height: 90vh; /* πιο ψηλό hero */
    background-size: contain; /* για να φαίνεται όλη η εικόνα */
  }
  .hero-content {
    padding-left: 15vw;
    padding-right: 15vw;
  }
  .hero-content h1 {
    font-size: 4.2rem;
  }
  .hero-content p.lead {
    font-size: 2rem;
  }
}



/* ─────────────── Base (Mobile First) ─────────────── */
.intro-section {
  background-color: #f9f9f9;
  color: #333;
}
.intro-section .container {
  max-width: 100%;
  margin: 0 auto;
    padding: 8rem 6rem;
    max-width: 80%;
      text-align: center;
}
.intro-section h2 {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(2.00rem,1.75rem,2.25rem);
  font-weight: 600;
  line-height: 1.2;
  color: #002E5B;
  margin-bottom: 1rem;
}
.intro-section p {
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(1.00rem,1.5vw,1.25rem);
  line-height: 1.6;
  margin: 0 auto;
  max-width: 90%;
  color: #555;
}

/* ─────────────── Tablet (768px–1023px) ─────────────── */
  @media (max-width: 991.8px) {
  .intro-section .container {
    padding: 2rem 1.0rem;
    max-width: 85%;
  }
  .intro-section h2 {
    font-size: clamp(1.40rem,2vw,1.75rem);
  }
  .intro-section p {
    font-size: clamp(0.90rem,2vw,1.25rem);
    max-width: 80%;
  }
}  

/* ======= INTRO SECTION για πολύ μεγάλες οθόνες (≥ 2200px) ======= */
@media (min-width: 2000px) {
    .main {
    height: 90vh;
    background-size: cover; /* Γεμίζει όλο το πλάτος/ύψος */
    background-position: center;
  }
  .intro-section h2 {
    font-size: 3vw;    /* μεγάλο, ευδιάκριτο */
  }

  .intro-section p {
    font-size: 2vw;      /* πιο άνετη ανάγνωση σε τηλεόραση */
  }

.hero-content h1 {
    font-size: 3.5vw;    /* μεγάλο, ευδιάκριτο */
}

.hero-content p.lead {
    font-size: 2vw;    /* μεγάλο, ευδιάκριτο */
}

}

/* ─────────────── Wide (≥1440px) ─────────────── */
/* @media (min-width: 2000px) {
  .intro-section .container {
    padding: 6rem 4rem;
    max-width: 80%;
  }
  .intro-section h2 {
    font-size: 3.75rem;
  }
  .intro-section p {
    font-size: 2.675rem;
    max-width: 75%;
  }
} */



  /* RATIONAL */


/* Logo rational στο κέντρο, με μικρή απόσταση πάνω/κάτω */
.rational-logo-section {
  padding-top:  clamp(0.25rem, 3vw, 4rem);
  text-align: center;
  margin: 2rem 0;      /* 2rem πάνω / κάτω – πειραματίσου αν θες άλλο διάκενο */
  overflow: hidden;    /* για να μην πετάει έξω ό,τι ξεχειλίζει */
}

/* Fluid sizing για το logo */
.rational-logo-img {
  display: inline-block;
  width: clamp(12rem,22vw,25rem);
/* width: clamp(20%, 8vw, 40%); */
  /* ποτέ μικρότερο από 120px, ιδανικά 12% του viewport πλάτους, ούτε πάνω από 240px */
  height: auto;
}
/* ----------- Section Container ----------- */
.rational-icombi-ivario-layout {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(1rem, 2vw, 3rem); /* μικρότερο από πριν */
  padding: 4rem 2rem;
  flex-wrap: wrap;  /* για responsive */
  border-radius: 24px;
  margin: 3rem auto;
  max-width: 1200px;
  transform: translateX(-5vw); /* μετακίνησέ τα λίγο αριστερά */

}
.rational-icombi-layout1 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap:clamp(1rem,8vw,12rem);
  padding: 4rem 2rem;
  flex-wrap: wrap;  /* για responsive */
  border-radius: 24px;
  margin: 3rem auto;
  max-width: 1200px;
}

/* ----------- Feature Cards ----------- */
.features-cards {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
}

/* Στυλ card */
.feature-card {
margin-right: 10%;
border: none;
outline: none;
background: linear-gradient(
  0deg,
  #38619b 0%,
  #38619b 7%,
  #4b70a4 15%,
  #617ea6 20%,
  #7a9ed0 30%,  /* σκούρο πιάνει 70% */
  #93aed0 40%,
  #a1badd 50%,
  #e2eefe 100%  /* ανοιχτό τα τελευταία 30% */
);  color: white;
  border-radius: 20px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  padding: 1rem 1.5rem;
  width: clamp(5rem,8vw,15rem);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-bottom: 4px solid #ff3b3b; /* κόκκινη γραμμή κάτω */
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}

.feature-card img {
  width: clamp(70px, 20vw, 140px);/*100px*/
  height: auto;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.card0 img{
  width: clamp(80px, 25vw, 170px);/*120px*/
}


.iproduction-card img{
  width: clamp(90px, 25vw, 200px);
}
.iproduction-card{
  width: clamp(100px,30vw,325px);
  height: clamp(40px,6vw,80px);
}
.feature-card:nth-child(1)  { width: clamp(100px,30vw,325px); height: clamp(40px,6vw,80px);}/*200px*/
.feature-card:nth-child(2)  { width: clamp(100px,30vw,325px); height: clamp(40px,6vw,80px)}
.feature-card:nth-child(3)  { width: clamp(100px,30vw,325px); height: clamp(40px,6vw,80px)}

/* Διαφορετικές διαστάσεις μόνο για τις κάτω */
/* ----------- Main Image ----------- */
.image-area img {
  width: clamp(550px, 50vw, 750px);
  height: auto;
  display: block;
}
.image-area1 img {
  margin-left: calc(
    -60px - ( (95vw - 600px) * 100 / 1440 )
  );  
  width: clamp(450px, 50vw, 600px); /* responsive πλάτος */
  height: auto;
  display: block;
}
/* ----------- Animation Keyframes ----------- */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ----------- Responsive ----------- */
@media (max-width: 903px) {
  
  .rational-icombi-ivario-layout {
    margin-bottom: 0;
    padding-bottom: 0;
    margin-top: 0;
    padding-top: 2rem;
    flex-direction: column;
    text-align: center;
    gap: 2rem;
    margin-left: clamp(-1rem,-3vw,-5rem);
    transform: translateX(clamp(0px,0.5vw,3px)); /* μετακίνησέ τα λίγο αριστερά */
  }

  .features-cards {
  padding-top: 0;
  padding-bottom: clamp(0.05rem, 0.1vw, 0.1rem); 
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(5px,4vw,30px);
  
  }

  .image-area{
      padding-bottom:0;
    margin-bottom: 0;

    overflow: hidden;   /* κρύβει το κομμάτι που περισσεύει */
    transform: translateX(1.5vw); /* μετακίνησέ τα λίγο αριστερά */
    width:clamp(185px,70vw,450px);
  }
  .image-area img {
      padding-bottom:0;
    margin-bottom: 0;

    width: 100%;
    height: 100%;
    object-fit: cover;  /* κάνει zoom ώστε να καλύπτει όλο το container */

  }
}



/* ======= RATIONAL για πολύ μεγάλες οθόνες (≥ 2200px) ======= */
@media (min-width: 2200px) {

  /* Λογότυπο Rational */
  .rational-logo-img {
    width: 20vw; /* μεγαλύτερο logo */
  }

  /* Container διάταξης */
  .rational-icombi-ivario-layout,
  .rational-icombi--vario-layout1 {
    gap: 4vw;          /* μεγαλύτερο κενό μεταξύ στοιχείων */
    width: 80vw;
    max-width: none;
    transform: translate(-2);    /* κεντραρισμένο */
    padding: 6rem 4rem;
  }

  /* Κάρτες χαρακτηριστικών */
  .feature-card {
    width: 30vw;
    height: 10vw;
  }
  .feature-card img {
    width: 30vw;
    height: 10vw;
  }

  /* Κεντρικές εικόνες */
  .image-area img {
    width: 40vw;
  }
  /* .image-area1 img {
    width: 30;
    margin-left: 0;
  } */
   
.feature-card img {
  width: 10vw;
  height: auto;
}
  .feature-card:nth-child(1)  { width: 20vw; height: 5vw;}/*200px*/
.feature-card:nth-child(2)  { width: 20vw; height: 5vw}
.feature-card:nth-child(3)  { width: 20vw; height: 5vw}

.card0 img{
  width: 12vw;
}


.iproduction-card img{
  width: 15vw
}
.iproduction-card{
  width: 20vw;
  height: 5vw;
}
}





  /* POLARIS GENIOUS LOGICAL AREA */

/* κεντράρει το logo και δίνει κενό από κάτω */
.polaris-logo-section {
  text-align: center;
  margin: 3rem 0;       /* 3rem πάνω ΚΑΙ κάτω, πειραματίσου αν θες άλλο διάκενο */
  overflow: hidden;
  padding-top:  clamp(0.25rem, 3vw, 4rem);
}

/* κλιμακωτό μέγεθος για το logo */
.polaris-logo-img {
  display: inline-block;
  width: clamp(13rem, 25vw,23rem);
  /* ποτέ μικρότερο από 150px, ιδανικά 10% του viewport, ούτε πάνω από 300px */
  height: auto;
}


.polaris-section {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  max-width: 1400px;         /* σταθερό container */
  margin: 0 auto;
}
/* Container για τις δύο δεξιές εικόνες */
.genious-wrapper {
  display: flex;
  align-items: flex-start;
}

.polaris-img {
  padding-top: 1vw;
  display: block;
  width: clamp(15rem, 50vw,40rem);
  height: auto;
  transform: translateX(10%);  /* πάει λίγο δεξιά */
}


/* Μεγάλη Genious δεξιά: από 30–40% → 35–50% */
.genious-img {
  display: block;
  width: clamp(35%, 25vw, 50%);
  height: auto;
  transform: translateX(-10%); /* πάει λίγο αριστερά */
  width: 40%;        /* μπορείς να το αυξομειώσεις */
  height: auto;
  display: block;
  margin-left: auto; /* την σπρώχνει δεξιά */
}
/* ------------ */
.ataslr-section .ataslr-image a,
.polaris-section a {
  display: inline-block; /* ή block αν θέλεις να πιάνει όλο το πλάτος του container */
  line-height: 0;        /* εξαφανίζει το extra κενό */
}

.ataslr-section .ataslr-image img,
.polaris-section img {
  display: block;        /* για να μην επηρεάζεται από line-height */
  width: 90%;           /* αφήνει τον έλεγχο στο container/κλάσεις */
  height: auto;
}
/* ----------------- */
/* Responsive αλλαγή στα 768px */
@media (max-width: 768px) {
  .polaris-img {
  width: 95%;
  transform: translateX(10%);  /* πάει λίγο δεξιά */
  }
  .genious-img {
    width: 55%;         /* μεγαλώνει */
    margin: 1rem 0.6rem 0.5rem 0.2rem; /* μειώνουμε περιθώρια */
    transform: translateX(-2%);  /* πάει λίγο δεξιά */

  }
}

@media (max-width: 418px) {
  .polaris-img {
    width: 100%      /* μικρό για κινητά */
  }
  .genious-img {
    width: 55%;      /* μεγαλώνει */
    max-width: none !important;


  }
}

@media (max-width: 350px) {
  .polaris-img {
    width: 110%;       /* μικρό για κινητά */
    margin: 0 0 0 0rem; /* μειώνουμε περιθώρια */
    transform: translateX(5%);;  /* πάει λίγο δεξιά */

  }
  .genious-img {
    width: 58%;      /* μεγαλώνει */
    max-width: none !important;
    transform: translateX(2%);;  /* πάει λίγο δεξιά */

  }
}

/* ======= POLARIS μεγάλα μεγέθη με vw (≥ 2200px) ======= */
@media (min-width: 2000px) {

  /* Λογότυπο Polaris */
  .polaris-logo-img {
    width: 25vw; /* μεγαλύτερο, αλλά κλιμακωτό */
  }

  /* Κύριο container */
  .polaris-section {
    max-width: none; /* πιο φαρδύ */
    gap: 5vw;
  }

  /* Κύρια εικόνα Polaris */
  .polaris-img {
    width: 50vw; /* μεγαλύτερη αναλογία εικόνας */
    padding-top: 0.5vw;
    transform: none;
  }

  /* Εικόνα Genious */
  .genious-img {
    width: 25vw;
    margin-left: 0;
    transform: none;
  }

  /* Wrapper για τις δύο δεξιές εικόνες */
  .genious-wrapper {
    gap: 3vw;
  }
}

 /* ATA SLR */

.ataslr-logo-section {
  text-align: center;
  margin: 3rem 0;       /* 3rem πάνω ΚΑΙ κάτω, πειραματίσου αν θες άλλο διάκενο */
  overflow: hidden;
  padding-top:  clamp(0.25rem, 4vw, 4.5rem);

}
.ataslr-logo-img {
  display: inline-block;
  width: clamp(6rem, 13vw,20rem);
  /* ποτέ μικρότερο από 120px, ιδανικά 15vw, ούτε πάνω από 240px */
  height: auto;
}




.ataslr-section {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  max-width: 1400px;
  margin: 0 auto;
  gap: 2rem; /* desktop gap */
  overflow: hidden;
  padding: 2rem; /* λίγο padding για αναπνοή */
}

/* Κείμενο */
.ataslr-text {
  padding-left: 2vw;
  padding-top: 10vh;
}

.ataslr-text h2 {
  font-size: 2.0vw;
  line-height: 1.2;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.ataslr-text p {
  font-size: 1.5vw;
  line-height: 1.6;
  margin-bottom: 1vh;
}

/* Εικόνα */
.ataslr-image {
  flex-shrink: 0;
  width: clamp(37%, 50vw, 57%);
}

.ataslr-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ───────────── Responsive ───────────── */

/* Tablet */
@media (max-width: 1024px) {
  .ataslr-section {
    gap: 2rem; /* μικρότερο κενό */
    padding: 1.5rem;
  }
  
  .ataslr-text h2 {
    font-size: 2.5vw;
  }

  .ataslr-text p {
    font-size: 1.5vw;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .ataslr-section {
    padding-top: 0.1rem;
    flex-direction: column; /* κάθετη στο κινητό */
    align-items: center;
    gap: 1.5rem;
    text-align: center;
  }
  
  .ataslr-text {
    padding: 0;
  }

  .ataslr-text h2 {
    font-size: 4vw;
  }

  .ataslr-text p {
    font-size: 3vw;
  }

  .ataslr-image {
    width: 90%;
  }
}

/* ======= ATA SLR μεγάλα μεγέθη με vw (≥ 2200px) ======= */
@media (min-width: 2000px) {

  /* Λογότυπο */
  .ataslr-logo-img {
    width: 15vw; /* μεγαλύτερο logo */
  }

  /* Κύριο container */
  .ataslr-section {
    max-width: none; /* πιο φαρδύ */
    gap: 5vw;        /* μεγαλύτερο κενό ανάμεσα */
    padding: 4vw;
  }

  /* Κείμενο */
  .ataslr-text {
    padding-left: 3vw;
    padding-top: 8vh;
  }

  .ataslr-text h2 {
    font-size: 2.6vw; /* πιο μεγάλο για 4K */
  }

  .ataslr-text p {
    font-size: 2vw; /* αναλογικό με την οθόνη */
  }

  /* Εικόνα */
  .ataslr-image {
    width: 45vw; /* μεγαλύτερη εικόνα */
  }
}
  



.see-more-container {
  text-align: center;
  margin-top: 3rem;
}


@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.see-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: linear-gradient(135deg, #003366, #0155a8);
  color: white;
  padding: 1rem 2rem;
  border-radius: 50px;
  font-size: 2vw;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

.see-more-btn .arrow {
  font-size: 1vw;
  transition: transform 0.3s ease;
}

.see-more-btn:hover {
  background: linear-gradient(135deg, #0155a8, #003366);
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}

.see-more-btn:hover .arrow {
  transform: translateX(5px);
}



/* ---------------- Video Carousel Styles ---------------- */
.video-carousel-section {
  text-align: center;
}

/* Προαιρετικά: μικρό padding γύρω από το carousel */
.video-carousel-section .carousel {
  padding: 0 1rem;
}

/* Αν θες να έχεις λίγο κενό πάνω/κάτω */
.video-carousel-section {
  margin: clamp(1rem, 5vh, 3rem) 0;
}

/* Κάνουμε το carousel μεγαλύτερο και fluid */
#videoCarousel {
  width: 80vw;            /* 90% του viewport width */
  max-width: 1200px;      /* όμως ποτέ πάνω από 1200px */
}

/* Προαιρετικά: αν θες πάντα full-width χωρίς όριο */
#videoCarousel {
  width: 100%;
  max-width: none;
}


/* Με αυτό το max-width στο inline style κρατάς το carousel μέχρι 800px */
#videoCarousel {
  width: clamp(60%, 70vw, 80%);
}


.video-section {
  background-color: #000;      /* μαύρο φόντο */
  color: #fff;                 /* λευκό χρώμα κειμένου (αν έχεις captions) */
  padding: clamp(1rem,5vh,2rem) 2.5vw;
}

/* αν έχεις carousel */
.video-carousel-section {
  background-color: #000;
  color: #fff;
  margin: clamp(1rem,5vh,3rem) 0;
}