html, body {
   overflow-x: hidden; /* ✅ Αποτρέπει την οριζόντια κύλιση */
   width: 100%;
   max-width: 100vw; /* ✅ Περιορίζει το πλάτος ώστε να μην ξεπερνά την οθόνη */
}


/* Απόκρυψη αρχικά */
.hero-content .text-content,
.hero-content .hero-buttons,
.hero-content .gif-container {
   opacity: 0;
   transform: translateY(50px);
   transition: opacity 1s ease-out, transform 1s ease-out;
}

/* -------- ANIMATION για DESKTOP -------- */
.hero-content.show .text-content {
   opacity: 1;
   transform: translateY(0);
   transition-delay: 0s;
}

.hero-content.show .gif-container {
   opacity: 1;
   transform: translateY(0);
   transition-delay: 0.5s;
   right: 100px; /* Αυτό εφαρμόζεται ΜΟΝΟ στον υπολογιστή */
}

.hero-content.show .hero-buttons {
   opacity: 1;
   transform: translateY(0);
   transition-delay: 1s;
}

/* -------- DESKTOP STYLES -------- */
.hero-content {
   position: relative;
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   padding: 4rem;
   color: white;
}

.hero-content .text-content {
   font-family: 'AkruxLight', sans-serif;
   max-width: 100%;
   color: white;
}

.hero-content .text-content .title-line span {
   color: white;
}

.hero-content .title {
   font-size: 3.1rem;
   font-weight: bold;
   margin-bottom: 1rem;
   letter-spacing: 0.2em;
   text-align: left;
   line-height: 1.2;
   color: white;
}

.hero-content .hero-text h3 {
   font-size: 1.25rem;
   margin-top: 3rem;
   letter-spacing: 0.15em;
   word-spacing: 0.3em;
   color: white !important;
}

.hero-content .hero-buttons {
   display: flex;
   gap: 3rem;
   margin-top: 13rem;
}

.hero-content .hero-buttons .button {
   display: inline-block;
   background-color: #D73CBE;
   color: white;
   text-transform: uppercase;
   text-decoration: none;
   font-size: 1.5rem;
   font-weight: bold;
   padding: 1.5rem 3.5rem;
   border-radius: 1rem;
   cursor: pointer;
   text-align: center;
   min-width: 180px;
}

.hero-content .hero-buttons .button:hover {
   background-color: #3B82F6;
   color: white;
}

/* GIF styling για υπολογιστή */
.hero-content .gif-container {
   position: absolute;
   bottom: 0;
   right: 0;
   max-width: 50%;
   height: auto;
}

.hero-content .gif-container .hero-gif {
   width: 350px;
   height: auto;
   margin-right: 20px;
   margin-bottom: 20px;
}

/* -------- MOBILE STYLES -------- */
@media (max-width: 768px) {
   .hero-content {
       flex-direction: column;
       align-items: center;
       padding: 2rem 1rem;
       text-align: center;
   }

   .hero-content .text-content {
       margin-bottom: 2rem;
   }

   .hero-content .title {
       font-size: 1.5rem;
       line-height: 1.3;
   }

   .hero-content .hero-text h3 {
       font-size: 1rem;
   }

   .hero-content .hero-buttons {
       flex-direction: column;
       gap: 1rem;
       margin-top: 2rem;
       margin-bottom: 2rem;
   }

   .hero-content .hero-buttons .button {
       font-size: 0.9rem;
       padding: 0.8rem 1.5rem;
   }

   /* Κεντράρισμα GIF στο κινητό */
   .hero-content .gif-container {
       position: relative;
       display: flex;
       justify-content: center;
       align-items: center;
       width: 100%;
       margin-top: 2rem;
   }

   .hero-content .gif-container .hero-gif {
       width: 100%;
       max-width: 350px;
       height: auto;
	   margin-right: 0px;
   }

   /* -------- ΑΛΛΑΓΕΣ για το ANIMATION στο MOBILE -------- */
   .hero-content.show .gif-container {
      right: -10vh;
   }
}


/* Divider Line */
.divider-line {
   width: 100%;
   max-width: 1200px;
   height: 2px;
   background-color: white;
   margin: 2rem auto;
}

/* Data-Driven Section */
.data-driven-section {
   padding: 2rem 1rem;
   text-align: left;
}

.title-container {
   width: 100%;
   margin-bottom: 1.5rem;
}

.section-title {
   font-family: 'AkruxLight', sans-serif;
   text-transform: uppercase; /* Κεφαλαία γράμματα */
   color: #D73CBE; /* Ροζ χρώμα */
   font-size: 2.5rem; /* Μέγεθος γραμματοσειράς */
   font-weight: bold; /* Έντονα γράμματα */
   text-align: left; /* Κεντραρισμένος τίτλος */
}

.content-container {
   display: flex;
   justify-content: space-between; /* Αποστάσεις μεταξύ των στηλών */
   align-items: flex-start; /* Ευθυγράμμιση στο πάνω μέρος */
   gap: 2rem; /* Απόσταση μεταξύ των στηλών */
   width: 100%;
   max-width: 1200px; /* Περιορισμός πλάτους */
   margin: 0 auto; /* Κεντράρει το container */
}

/* Left Column: GIFs */
.gif-column {
   position: relative; /* Ορίζει πλαίσιο αναφοράς για τα absolute στοιχεία */
   width: 400px;
   height: 500px; /* Περιορισμός ύψους */
   transform: rotate(-90deg); /* Περιστροφή 90° αριστερά */
   transform-origin: center; /* Περιστροφή γύρω από το κέντρο */
}

.gif-overlay {
   position: relative; /* Ορίζει πλαίσιο αναφοράς για τα absolute GIFs */
   width: 100%;
   height: 100%;
}

/* Πρώτο GIF */
.gif-overlay .gif-image:first-child {
   position: absolute;
   top: 180.528px; /* Απόσταση από την κορυφή */
   left: 19.4281px; /* Απόσταση από την αριστερή πλευρά */
   width: 333.613px; /* Πλάτος */
   height: 476.589px; /* Ύψος */
   transform: rotate(-4.81875deg); /* Περιστροφή */
   touch-action: pan-x pan-y pinch-zoom; /* Υποστήριξη touch */
   z-index: 1; /* Το πρώτο GIF κάτω από το δεύτερο */
}

/* Δεύτερο GIF */
.gif-overlay .gif-image:last-child {
   position: absolute;
   top: 30.525px; /* Απόσταση από την κορυφή */
   left: 72.5314px; /* Απόσταση από την αριστερή πλευρά */
   width: 286.094px; /* Πλάτος */
   height: 433.476px; /* Ύψος */
   transform: rotate(164.37deg); /* Περιστροφή */
   touch-action: pan-x pan-y pinch-zoom; /* Υποστήριξη touch */
   z-index: 2; /* Το δεύτερο GIF πάνω από το πρώτο */
}

/* Right Column: Text and SVG */
.text-column {
   display: flex;
   flex-direction: column; /* Κάθετη διάταξη */
   align-items: center; /* Κεντράρισμα στοιχείων */
   gap: 1.5rem; /* Απόσταση μεταξύ παραγράφου και SVG */
}

.text-paragraph {
   font-weight: 400; /* Κανονικό βάρος */
   font-size: 2.5rem;
   color: white;
   text-align: center;
   line-height: 1.4; /* Βελτίωση της αναγνωσιμότητας */
}

.circle-image {
   width: 200px; /* Πλάτος του SVG */
   height: auto;
   opacity: 0.45;
}

/* Responsive CSS for Mobile */
@media (max-width: 768px) {
   .data-driven-section {
      overflow: hidden; /* ✅ Εμποδίζει το περιεχόμενο να βγαίνει εκτός */
      position: relative;
   }

   
   .gif-column {
      width: 100%;
      max-width: 400px;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: visible; /* ✅ Επιτρέπει την ορατότητα των GIFs */
   }

      /* 🎯 Διατηρεί τα GIFs εντός του container */
   .gif-overlay {
      position: relative;
      width: 100%;
      max-width: 350px;
      height: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: visible; /* ✅ Επιτρέπει στα GIFs να εμφανίζονται σωστά */
   }

      /* 🎯 Εξασφαλίζει ότι τα GIFs δεν κόβονται */
   .gif-overlay .gif-image {
      position: relative;
      width: auto;
      max-width: 100%;
      height: auto;
      transform-origin: center;
   }

   .content-container {
       flex-direction: column;
       align-items: center;
       gap: 2rem;
       width: 100%;
       max-width: 100vw; /* ✅ Περιορίζει το περιεχόμενο στο πλάτος της οθόνης */
   }

   .title-container {
       text-align: center;
       margin-bottom: 1rem;
   }

   .section-title {
       font-size: 2rem;
       text-align: center;
   }

   .gif-column {
      width: 100%;
      max-width: 300px;
      height: 400px;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 2rem;
  }

  .gif-overlay {
      width: 100%;
      max-width: 250px; /* Περιορισμός ώστε να μην ξεφεύγει */
      height: auto;
  }

  .gif-overlay .gif-image:first-child {
      width: 166.806px;
      height: 238.295px;
      top: -80px; /* Διόρθωση αποστάσεων */
      left: 10px;
      transform: rotate(-4.81875deg);
  }

  .gif-overlay .gif-image:last-child {
      width: 143.047px;
      height: 216.738px;
      top: -160px;
      left: 50px;
      transform: rotate(164.37deg);
  }

   .text-column {
       width: 100%;
       text-align: center;
   }

   .text-paragraph {
       font-size: 1rem;
   }

   .circle-image {
       width: 150px;
   }
}

/* Απόκρυψη αρχικά για το animation */
.data-driven-section .section-title,
.data-driven-section .gif-column,
.data-driven-section .text-column {
   opacity: 0;
   transform: translateY(50px); /* Αρχική μετατόπιση, χωρίς περιστροφή */
   transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Animation όταν γίνεται scroll */
.data-driven-section.show .section-title {
   opacity: 1;
   transform: translateY(0);
   transition-delay: 0s; /* Εμφανίζεται πρώτο */
}

.data-driven-section.show .gif-column {
   opacity: 1;
   transform: translateY(0) rotate(-90deg); /* Τώρα η περιστροφή γίνεται σωστά */
   transition-delay: 0.5s;
}

.data-driven-section.show .text-column {
   opacity: 1;
   transform: translateY(0);
   transition-delay: 1s; /* Εμφανίζεται τελευταίο */
}

/* 🎯 Στοχευμένη ρύθμιση μόνο για το Data-Driven Section */
.data-driven-section .gif-column {
   position: relative;
   width: 400px;
   height: 500px;
   opacity: 0;
   transform: translateY(50px); /* Ξεκινά χωρίς περιστροφή */
   transform-origin: center;
   transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
/* ΑΛΛΑΓΕΣ ΓΙΑ ΧΡΟΝΟ ΑΠΟ 1SEC ΣΕ 0.5 ΕΚΑΝΑ ΜΟΝΟ ΣΤΙΣ ΓΡΑΜΜΕΣ 383 ΚΑΙ 413 */

/* General Section Styles */
section {
   max-width: 1200px;
   margin: 0 auto;
   padding: 2rem 1rem;
}

/* Scientifically Documented Section */
.scientifically-documented-section {
   padding: 2rem 1rem;
   text-align: left;
}

.scientifically-documented-section .title-container {
   width: 100%;
   margin-bottom: 2rem;
}

.scientifically-documented-section .section-title {
   text-transform: uppercase; /* Κεφαλαία γράμματα */
   color: white; /* Ροζ χρώμα */
   font-size: 2.7rem; /* Μέγεθος γραμματοσειράς */
   font-weight: bold; /* Έντονα γράμματα */
   text-align: left; /* Κεντραρισμένος τίτλος */
}

.scientifically-documented-section .content-container {
   display: flex;
   justify-content: space-between; /* Αποστάσεις μεταξύ των στηλών */
   align-items: flex-start; /* Ευθυγράμμιση στο πάνω μέρος */
   gap: 2rem; /* Απόσταση μεταξύ των στηλών */
   width: 100%;
   max-width: 1200px; /* Περιορισμός πλάτους */
   margin: 0 auto; /* Κεντράρει το container */
}

/* Left Column: Images and Text */
.scientifically-documented-section .image-column {
   display: flex;
   flex-direction: column;
   align-items: flex-start; /* Ευθυγράμμιση αριστερά */
   gap: 1rem;
   margin-top: 1rem; /* Μικρή απόσταση από τον τίτλο */
}

.scientifically-documented-section .image-wrapper {
   position: relative;
   width: 500px; /* Προσαρμογή πλάτους */
   height: 350px; /* Προσαρμογή ύψους */
   margin-left: 0; /* Αφαίρεση τυχόν περιθωρίου */
}

.scientifically-documented-section .image-item {
   width: 100%;
   height: 100%;
   object-fit: cover; /* Προσαρμογή χωρίς παραμόρφωση */
}

.scientifically-documented-section .overlay-image-wrapper {
   position: absolute; /* Το wrapper τοποθετείται σωστά σε σχέση με την πρώτη εικόνα */
   bottom: 0;
   left: 0;
   width: 180px;
   height: 200px;
   background-color: rgba(255, 105, 180, 0.8); /* Ροζ φόντο με διαφάνεια */
   border-radius: 30px; /* Στρογγυλεμένες γωνίες */
   z-index: 1; /* Τοποθετείται πίσω από την εικόνα */
   display: flex; /* Ενεργοποίηση flexbox */
   justify-content: center; /* Κεντράρισμα οριζόντια */
   align-items: center; /* Κεντράρισμα κάθετα */
}

.scientifically-documented-section .overlay-image {
   position: relative; /* Σχετική θέση για να παραμείνει εντός του wrapper */
   width: 90%; /* Η εικόνα προσαρμόζεται στο μέγεθος του wrapper */
   height: 90%; /* Η εικόνα προσαρμόζεται στο μέγεθος του wrapper */
   object-fit: cover; /* Διατηρεί τις αναλογίες της εικόνας */
   border-radius: 10px; /* Ταιριάζει με το wrapper */
}

.scientifically-documented-section .description {
   width: 500px; /* Ίδιο πλάτος με την πρώτη εικόνα */
   text-align: left; /* Ευθυγράμμιση στο αριστερό μέρος */
   font-size: 1.2rem;
   color: white;
   line-height: 1.5;
}

/* Right Column: GIF */
.scientifically-documented-section .gif-column {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 600px; /* Ίδιο πλάτος με την εικόνα */
   height: 400px; /* Ίδιο ύψος με την εικόνα */
   position: relative; /* Επιτρέπει στο GIF να ξεφύγει */
}

.scientifically-documented-section .gif-image {
   position: absolute; /* Διατηρείται στο flexbox αλλά επιτρέπει μετατόπιση */
   width: 500px;
   height: auto;
}

/* Responsive CSS for Mobile */
@media (max-width: 768px) {
   .scientifically-documented-section {
       padding: 1.5rem 1rem;
   }

   .scientifically-documented-section .title-container {
       text-align: center;
   }

   .scientifically-documented-section .section-title {
       font-size: 2rem;
       text-align: center;
   }

   .scientifically-documented-section .content-container {
       flex-direction: column;
       align-items: center;
       gap: 1.5rem;
   }

   .scientifically-documented-section .image-wrapper {
       width: 100%;
       height: auto;
   }

   .scientifically-documented-section .description {
       width: 100%;
       text-align: center;
       font-size: 1rem;
   }

   .scientifically-documented-section .gif-image {
      width: 250px; /* Νέα τιμή πλάτους */
      height: auto; /* Διατήρηση αναλογιών */
   }
}

/* Secured Data Section */
.secured-data-section {
   padding: 2rem 1rem;
   text-align: center;
   background-color: #1a1a1a; /* Σκούρο φόντο */
   color: white;
   overflow: hidden;
}

.secured-data-section .secured-data-content {
   display: flex;
   justify-content: space-between;
   align-items: stretch;
   gap: 2rem;
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
   position: relative;
}

/* Αριστερή Στήλη: Κείμενο */
.secured-data-section .text-content {
   padding: 1rem;
   border: 2px solid transparent;
   text-align: left;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   transform: scale(0.8);
   transform-origin: center;
   opacity: 0;
   box-sizing: border-box;
   transition: opacity 1s ease-out, transform 1s ease-out, border 1s ease-out;
}

/* 🎯 Επικεφαλίδες */
.secured-data-section .text-content h1 {
   font-size: 3.5rem;
   margin-bottom: 1rem;
   color: white;
   text-transform: uppercase; /* ✅ Μόνο το h1 είναι κεφαλαίο */
   font-family: 'AkruxLight', sans-serif; /* ✅ Αρχική γραμματοσειρά */
   font-weight: bold;
   padding-left: 5%; /* ✅ Εσωτερικό περιθώριο */
   padding-right: 5%;
}

.secured-data-section .text-content h2 {
   font-size: 1.5rem;
   margin-bottom: 0rem;
   color: white; /* ✅ Χρώμα λευκό */
   font-weight: normal; /* ✅ Bold off */
   padding-left: 5%; /* ✅ Εσωτερικό περιθώριο */
   padding-right: 5%;
}

/* 🎯 Κουμπί */
.secured-data-section .text-content .button {
   display: inline-block;
   padding: 1rem 2rem;
   background-color: #d73cbe; /* ✅ Χρώμα κουμπιού */
   color: white;
   text-decoration: none;
   font-weight: bold; /* ✅ Bold ενεργοποιημένο */
   border-radius: 10px;
   transition: background-color 0.3s;
   text-align: center; /* ✅ Διασφαλίζει ότι το κείμενο είναι κεντραρισμένο */
   white-space: nowrap; /* ✅ Εμποδίζει το κείμενο να σπάει */
   width: fit-content; /* ✅ Το κουμπί θα έχει το πλάτος του περιεχομένου του */
   min-width: 180px; /* ✅ Ελάχιστο πλάτος για ομοιομορφία */
   margin-top: 1rem; /* ✅ Μειώσαμε το κενό από πάνω */
   margin-bottom: 1rem; /* ✅ Μειώσαμε το κενό από κάτω */
   margin-left: 5%; /* ✅ Το κουμπί ξεκινά από το ίδιο σημείο με το `h2` */
   align-self: start; /* ✅ Στοιχίζει το κουμπί στην αρχή της γραμμής */
}

.secured-data-section .text-content .button:hover {
   background-color: white;
   color: #d73cbe;
}

/* 🎯 Δεξιά Στήλη: GIF & Βίντεο */
.secured-data-section .media-content {
   flex: 0 0 600px;
   position: relative;
   height: 600px;
   display: flex;
   justify-content: center;
   align-items: center;
   opacity: 0; /* Απόκρυψη αρχικά */
   transform: translateY(50px);
   transition: opacity 1s ease-out, transform 1s ease-out;
}

/* 🎯 GIF */
.secured-data-section .media-content .gif-image {
   position: absolute;
   top: 20px;
   left: 20px;
   width: 90%;
   height: 90%;
   object-fit: cover;
   z-index: 1;
}

/* 🎯 Βίντεο μέσα σε κύκλο */
.secured-data-section .media-content .video-circle {
   width: 450px;
   height: 450px;
   border-radius: 50%;
   overflow: hidden;
   z-index: 2;
}

.secured-data-section .media-content .video-circle video {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* ✅ Animation όταν γίνεται scroll */
.secured-data-section.show .text-content {
   opacity: 1;
   transform: scale(1);
   border-color: white; /* ✅ Εμφάνιση του περιγράμματος σταδιακά */
}

.secured-data-section.show .media-content {
   opacity: 1;
   transform: translateY(0);
}

/* 🎯 Responsive CSS for Mobile */
@media (max-width: 768px) {
   .secured-data-section {
      padding: 0.5rem 1rem;
   }

   .secured-data-section .secured-data-content {
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      position: relative;
   }

   .secured-data-section .text-content {
      width: 100%;
      max-width: 75%;
      border: 2px solid white;
      padding: 0.8rem;
      margin: 0.5rem auto;
      text-align: left;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 0.5rem;
      box-sizing: border-box;
      flex: auto;
   }

   .secured-data-section .text-content h1 {
      font-size: 1.5rem;
      margin: 0;
   }

   .secured-data-section .text-content h2 {
      margin: 0;
   }

   /* Centered button for mobile */
   .secured-data-section .text-content .button {
      align-self: center;
      margin-left: 0;
   }

   .secured-data-section .media-content {
      width: 100%;
      height: auto;
      justify-content: center;
      align-items: center;
      margin-top: 0.5rem;
   }

   .secured-data-section .media-content .gif-image {
      width: 100%;
      height: auto;
      max-width: 400px;
      top: 100px;
      left: 0px;
   }

   .secured-data-section .media-content .video-circle {
       width: 300px;
       height: 300px;
   }
}


/* Customer Support Section */
.customer-support-section {
   padding: 2rem 1rem;
   text-align: center;
   background-color: #1a1a1a; /* Σκούρο φόντο */
   color: white;
   overflow: hidden;
}

.customer-support-section .customer-support-content {
   display: flex;
   justify-content: space-between;
   align-items: stretch;
   gap: 2rem;
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
   position: relative;
}

/* 🎯 Αριστερή Στήλη: Κείμενο */
.customer-support-section .text-content {
   padding: 1rem;
   border: 2px solid transparent;
   text-align: left;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   transform: scale(0.8);
   transform-origin: center;
   opacity: 0;
   box-sizing: border-box;
   transition: opacity 1s ease-out, transform 1s ease-out, border 1s ease-out;
}

/* 🎯 Επικεφαλίδες */
.customer-support-section .text-content h1 {
   font-size: 3.5rem;
   margin-bottom: 1rem;
   color: white;
   text-transform: uppercase; /* ✅ Μόνο το h1 είναι κεφαλαίο */
   font-family: 'AkruxLight', sans-serif; /* ✅ Αρχική γραμματοσειρά */
   font-weight: bold;
   padding-left: 5%; /* ✅ Εσωτερικό περιθώριο */
   padding-right: 5%;
}

.customer-support-section .text-content h2 {
   font-size: 1.5rem;
   margin-bottom: 0rem;
   color: white; /* ✅ Χρώμα λευκό */
   font-weight: normal; /* ✅ Bold off */
   padding-left: 5%; /* ✅ Εσωτερικό περιθώριο */
   padding-right: 5%;
}

/* 🎯 Κουμπί */
.customer-support-section .text-content .button {
   display: inline-block;
   padding: 1rem 2rem;
   background-color: #d73cbe; /* ✅ Χρώμα κουμπιού */
   color: white;
   text-decoration: none;
   font-weight: bold; /* ✅ Bold ενεργοποιημένο */
   border-radius: 10px;
   transition: background-color 0.3s;
   text-align: center; /* ✅ Διασφαλίζει ότι το κείμενο είναι κεντραρισμένο */
   white-space: nowrap; /* ✅ Εμποδίζει το κείμενο να σπάει */
   width: fit-content; /* ✅ Το κουμπί θα έχει το πλάτος του περιεχομένου του */
   min-width: 180px; /* ✅ Ελάχιστο πλάτος για ομοιομορφία */
   margin-top: 1rem; /* ✅ Μειώσαμε το κενό από πάνω */
   margin-bottom: 1rem; /* ✅ Μειώσαμε το κενό από κάτω */
   margin-left: 5%; /* ✅ Το κουμπί ξεκινά από το ίδιο σημείο με το `h2` */
   align-self: start; /* ✅ Στοιχίζει το κουμπί στην αρχή της γραμμής */
}

.customer-support-section .text-content .button:hover {
   background-color: white;
   color: #d73cbe;
}


/* 🎯 Δεξιά Στήλη: GIF & Βίντεο */
.customer-support-section .media-content {
   flex: 0 0 600px;
   position: relative;
   height: 600px;
   display: flex;
   justify-content: center;
   align-items: center;
   opacity: 0; /* Απόκρυψη αρχικά */
   transform: translateY(50px);
   transition: opacity 1s ease-out, transform 1s ease-out;
}

/* 🎯 GIF */
.customer-support-section .media-content .gif-image {
   position: absolute;
   top: 20px;
   left: 20px;
   width: 90%;
   height: 90%;
   object-fit: cover;
   z-index: 1;
   transform: rotate(180deg); /* Περιστροφή 180° */
}

/* 🎯 Βίντεο μέσα σε κύκλο */
.customer-support-section .media-content .video-circle {
   width: 450px;
   height: 450px;
   border-radius: 50%;
   overflow: hidden;
   z-index: 2;
}

.customer-support-section .media-content .video-circle video {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* ✅ Animation όταν γίνεται scroll */
.customer-support-section.show .text-content {
   opacity: 1;
   transform: scale(1);
   border-color: white; /* ✅ Εμφάνιση του περιγράμματος σταδιακά */
}

.customer-support-section.show .media-content {
   opacity: 1;
   transform: translateY(0);
}

/* 🎯 Responsive CSS for Mobile */
@media (max-width: 768px) {
   .customer-support-section {
      padding: 0.5rem 1rem;
   }

   .customer-support-section .customer-support-content {
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      position: relative;
   }

   .customer-support-section .text-content {
      width: 100%;
      max-width: 75%;
      border: 2px solid white;
      padding: 0.8rem;
      margin: 0.5rem auto;
      text-align: left;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 0.5rem;
      box-sizing: border-box;
      flex: auto;
   }

   .customer-support-section .text-content h1 {
      font-size: 1.5rem;
      margin: 0;
   }

   .customer-support-section .text-content h2 {
      margin: 0;
   }

   /* Centered button for mobile */
   .customer-support-section .text-content .button {
      align-self: center;
      margin-left: 0;
   }

   .customer-support-section .media-content {
      width: 100%;
      height: auto;
      justify-content: center;
      align-items: center;
      margin-top: 0.5rem;
   }

   .customer-support-section .media-content .gif-image {
      width: 100%;
      height: auto;
      max-width: 400px;
      top: 100px;
      left: 0px;
   }

   .customer-support-section .media-content .video-circle {
      width: 300px;
      height: 300px;
   }
}


/* Service We Provide Section */
.service-we-provide-section {
   padding: 2rem 1rem;
   background-color: #1a1a1a;
   color: white;
   max-width: 1200px;
   margin: 0 auto;
   overflow: hidden;
}

/* 🎯 Header Section */
.service-we-provide-section .section-header {
   text-align: left;
   margin-bottom: 2rem;
   opacity: 0;
   transform: translateY(30px);
   transition: opacity 1s ease-out, transform 1s ease-out;
}

.service-we-provide-section h1 {
   font-size: 3rem; /* ✅ Σωστό μέγεθος τίτλου */
   margin-bottom: 1rem;
   font-family: 'AkruxLight', sans-serif;
   letter-spacing: 0.2em;
}

/* 🎯 Περιγραφικά Κείμενα (h2) */
.service-we-provide-section h2 {
   font-size: 1.25rem; /* ✅ Σωστό μέγεθος */
   line-height: 1.6;
   margin-bottom: 2rem;
   font-weight: normal; /* ✅ Bold Off */
}

/* 🎯 Κεντρικά Κουτιά – Πακέτα */
.plans-container {
   display: flex;
   justify-content: space-between;
   gap: 2rem;
   margin: 0 auto;
   align-items: flex-start;
}

/* 🎯 Κάθε κουτί ξεκινάει μικρό και αόρατο */
.white-box {
   background-color: rgb(242, 242, 242);
   color: #ff69b4;
   text-align: center;
   padding: 1.5rem;
   width: 30%;
   box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
   opacity: 0;
   transform: scale(0.8);
   transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 🎯 Tokens Expiry Text */
.tokens-expiry {
   text-transform: uppercase; /* ✅ Κεφαλαία */
   color: white; /* ✅ Λευκό */
   font-size: 1.5rem;
   margin-top: 6rem;
   letter-spacing: 0.2em; /* ✅ Expanded spacing */
   text-align: center;
   opacity: 0;
   transform: translateY(30px);
   transition: opacity 1s ease-out, transform 1s ease-out;
   font-weight: normal;
}

/* ✅ Ενεργοποίηση του Animation όταν γίνεται scroll */
.service-we-provide-section.show .section-header {
   opacity: 1;
   transform: translateY(0);
}

.service-we-provide-section.show .tokens-expiry {
   opacity: 1;
   transform: translateY(0);
}

/* 🎯 Εμφάνιση των κουτιών με bubble effect */
.service-we-provide-section.show .white-box {
   opacity: 1;
   transform: scale(1.1);
   animation: bubbleEffect 0.8s ease-out forwards;
}

/* 🎯 Keyframes για το bubble effect */
@keyframes bubbleEffect {
   0% {
      transform: scale(0.8);
      opacity: 0;
   }
   50% {
      transform: scale(1.1);
      opacity: 1;
   }
   100% {
      transform: scale(1);
   }
}

/* 🎯 Πακέτα - Τίτλοι και Τιμές */
.white-box h1 {
   font-family: 'AkruxLight', sans-serif; 
   color: #d73cbe; /* ✅ Ροζ χρώμα */
   text-decoration: underline;
   font-size: 1.75rem;
   margin-bottom: 0;
   margin-top: 2rem;
   letter-spacing: 0rem;
}

.white-box h3 {
   font-family: 'AkruxLight', sans-serif; 
   color: #d73cbe; /* ✅ Ροζ χρώμα */
   font-size: 1rem;
   margin: 0;
}

.white-box h2 {
   font-family: 'AkruxLight', sans-serif; 
   color: #d73cbe; /* ✅ Ροζ χρώμα */
   font-size: 1.75rem;
   margin-bottom: 0;
   margin-top: 0;
}

/* 🎯 Πακέτα - Τιμή ανά Token */
.white-box h4 {
   font-size: 1rem;
   color: #2c1e4a; /* ✅ Σκούρο μπλε-μωβ */
   font-style: italic;
   font-weight: unset;
   margin: 0;
   margin-bottom: 2rem;
}


/* 🎯 Button Styling */
.white-box .button {
   display: inline-block;
   padding: 0.80rem 2rem;
   background-color: #2c1e4a;
   color: white;
   text-decoration: none;
   font-weight: bold;
   border-radius: 10px;
   transition: background-color 0.3s;
   margin-bottom: 2rem;
   font-size: large;
   cursor: pointer;
}

.white-box .button:hover {
   background-color: #ff69b4;
   color: white;
}

/* 🎯 Responsive CSS for Mobile */
@media (max-width: 768px) {
   .service-we-provide-section {
       padding: 1.5rem 1rem;
   }

   .service-we-provide-section .section-header {
       text-align: center;
   }

   .service-we-provide-section h1 {
       font-size: 2rem;
   }

   .service-we-provide-section h2 {
       font-size: 1.15rem;
       margin-bottom: 1.5rem;
   }

   .plans-container {
       flex-direction: column;
       gap: 1.5rem;
   }

   .white-box {
      width: 80%;
      padding: 0.75rem;
      margin: 0 auto;
  }

  .white-box h1 {
      font-size: 1.25rem;
  }

  .white-box h2 {
      font-size: 1.25rem;
  }

  .white-box h3, .white-box h4 {
      font-size: 0.875rem;
  }

  .white-box .button {
      font-size: 0.875rem;
      padding: 0.5rem 1rem;
  }
}

/* Companies Section */
.companies-section {
   padding: 2rem 1rem;
   background-color: #1a1a1a; /* Σκούρο φόντο */
   color: white;
   display: flex;
   flex-direction: column; /* Κατακόρυφη διάταξη */
   gap: 2rem; /* Απόσταση μεταξύ στοιχείων */
   height: 600px; /* Το section καλύπτει όλο το ύψος της οθόνης */
}

.companies-section .content-container {
   display: flex;
   justify-content: space-between; /* Απόσταση μεταξύ αριστερού και δεξιού τμήματος */
   gap: 2rem;
   align-items: stretch; /* Και οι δύο στήλες γεμίζουν το ύψος */
   height: 100%; /* Το container γεμίζει το ύψος του section */
   max-width: 1200px;
   margin: 0 auto; /* Κεντράρισμα */
}

/* Left Side: Title and GIFs */
.companies-section .left-container {
   display: flex;
   flex-direction: column; /* Κατακόρυφη διάταξη */
   gap: 2rem; /* Απόσταση μεταξύ τίτλου και GIFs */
   flex: 1; /* Ίσος χώρος με το δεξί μέρος */
   justify-content: center; /* Κεντραρισμένη στοίχιση */
}

/* Title */
.companies-section .title-container h1 {
   font-size: 2.5rem;
   color: white;
   margin-bottom: 0;
   text-align: left;
}

/* GIFs */
.companies-section .gif-container {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   width: 100%; /* Το container γεμίζει τον διαθέσιμο χώρο */
}

/* Πρώτο GIF */
.companies-section .gif-container .gif-top {
   touch-action: pan-x pan-y pinch-zoom;
   width: 258.951px; /* Διαστάσεις από το προηγούμενο δεύτερο GIF */
   height: 392.351px;
   transform: translate(230.701px, 48.9997px) rotate(-149.987deg); /* Μετατόπιση και περιστροφή */
   position: absolute; /* Τοποθέτηση σε σχέση με το container */
   top: 0; /* Ξεκινά από την κορυφή του container */
   left: 0; /* Ξεκινά από την αριστερή πλευρά του container */
   z-index: 2; /* Είναι πίσω από το δεύτερο GIF */
}

/* Δεύτερο GIF */
.companies-section .gif-container .gif-bottom {
   touch-action: pan-x pan-y pinch-zoom;
   width: 394.431px; /* Διαστάσεις από το προηγούμενο πρώτο GIF */
   height: 417.388px;
   transform: translate(0px, 0px); /* Μηδενική μετατόπιση */
   position: relative; /* Παραμένει στο φυσικό ρεύμα του container */
   z-index: 1; /* Είναι πάνω από το πρώτο GIF */
}

/* Right Side: Boxes */
.companies-section .boxes-container {
   flex: 1; /* Ίσος χώρος με το αριστερό μέρος */
   display: flex;
   flex-direction: column; /* Τα κουτιά σε κάθετη διάταξη */
   justify-content: center; /* Στοίχιση στο κέντρο κατακόρυφα */
   gap: 1.5rem; /* Απόσταση μεταξύ των κουτιών */
   height: 100%; /* Καλύπτει όλο το ύψος */
}

.companies-section .boxes-container .box {
   flex: 1; /* Τα κουτιά μεγαλώνουν ομοιόμορφα για να γεμίσουν το ύψος */
   padding: 1rem;
   border: 2px solid white; /* Λευκό περίγραμμα */
   text-align: left;
   display: flex;
   flex-direction: column; /* Κατακόρυφη διάταξη */
   justify-content: center; /* Περιεχόμενο στο κέντρο */
   align-items: flex-start;
   gap: 0.5rem;
}

.companies-section .boxes-container .box h3 {
   font-size: 1.25rem;
   margin: 0;
   color: white;
}

.companies-section .boxes-container .box h2 {
   font-size: 1.5rem;
   color: #ff69b4; /* Ροζ χρώμα */
   margin: 0;
}

/* Responsive CSS for Mobile */
@media (max-width: 768px) {
   .companies-section {
       padding: 1.5rem 1rem;
       height: auto;
   }

   .companies-section .content-container {
       flex-direction: column;
       align-items: center;
       gap: 2rem;
   }

   .companies-section .left-container {
       text-align: center;
       align-items: center;
   }

   .companies-section .title-container h1 {
       font-size: 2rem;
       text-align: center;
   }

   .companies-section .gif-container {
       position: relative;
       width: 100%;
       max-width: 400px;
       height: auto;
       display: flex;
       justify-content: center;
   }

   .companies-section .gif-container .gif-top {
      width: 129.476px; /* Νέα τιμή */
      height: 196.176px; /* Νέα τιμή */
      transform: translate(50px, 20px) rotate(-149.987deg); /* Προσαρμοσμένη μετατόπιση */
      left: 150px;
  }

  .companies-section .gif-container .gif-bottom {
      width: 197.216px; /* Νέα τιμή */
      height: 208.694px; /* Νέα τιμή */
      transform: translate(0, 0); /* Μηδενική μετατόπιση */
      left: 90px
  }

   .companies-section .boxes-container {
       width: 100%;
       gap: 1rem;
   }

   .companies-section .boxes-container .box {
      width: 90%; /* Μείωση πλάτους */
      padding: 0.75rem; /* Μικρότερο padding */
      margin: 0 auto; /* Κεντράρισμα */
  }

  .companies-section .boxes-container .box h2 {
      font-size: 1.125rem; /* Μείωση μεγέθους γραμματοσειράς */
  }

  .companies-section .boxes-container .box h3 {
      font-size: 0.875rem;
  }
}

/* Contact Section */
.contact-section {
   padding: 2rem 1rem;
   background-color: #1a1a1a;
   color: white;
   display: flex;
   flex-direction: column;
   margin-top: 3rem;
   overflow: hidden;
}

/* 🎯 Content Container */
.contact-section .content-container {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   max-width: 1200px;
   margin: 0 auto;
   gap: 2rem;
}

/* 🎯 Αριστερή Στήλη: Contact Details και Social */
.contact-section .left-container {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 2rem;
}

/* Contact Details */
.contact-section .contact-details {
   opacity: 0;
   transform: translateY(30px);
   transition: opacity 1s ease-out, transform 1s ease-out;
}

.contact-section .contact-details h1 {
   font-size: 2.5rem;
   margin-bottom: 2rem;
   font-family: 'AkruxLight', sans-serif;
}

.contact-section .contact-item {
   margin-bottom: 1.5rem;
}

.contact-section .contact-item h2 {
   margin: 0.5rem;
   font-family: 'AkruxLight', sans-serif;
}

.contact-section .contact-details {
   margin-bottom: 6rem;
}

/* 🎯 Contact Details - H3 */
.contact-section .contact-details h3 {
   font-weight: normal; /* ✅ Bold Off */
}

/* 🎯 Contact Items - H3 */
.contact-section .contact-item h3 {
   margin: 0.5rem;
   font-weight: normal; /* ✅ Bold Off */
}

/* Social Section */
.contact-section .social-section {
   padding: 1rem;
   border: 2px solid transparent;
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-top: 2rem;
   opacity: 0;
   transform: translateY(30px);
   transition: opacity 1s ease-out, transform 1s ease-out, border 1s ease-out;
}

.contact-section .social-section h1 {
   font-size: 1.5rem;
   margin: 0;
   font-family: 'AkruxLight', sans-serif;
}

.contact-section .social-icons {
   display: flex;
   gap: 1rem;
}

.contact-section .social-icons .social-icon {
   width: 50px;
   height: 50px;
   object-fit: contain;
}

/* 🎯 Δεξιά Στήλη: GIFs */
.contact-section .gif-column {
   position: relative;
   flex: 1;
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 6rem;
   opacity: 0;
   transform: translateY(50px) rotate(-90deg); /* ✅ Αρχική περιστροφή */
   transition: opacity 1s ease-out, transform 1s ease-out;
}

/* 🎯 GIF Container */
.contact-section .gif-overlay {
   position: relative;
   width: 400px;
   height: 500px;
   transform: rotate(-70deg); 
   transform-origin: center;
}

/* Πρώτο GIF */
.contact-section .gif-overlay .gif-image:first-child {
   position: absolute;
   top: 180.528px;
   left: 19.4281px;
   width: 333.613px;
   height: 476.589px;
   transform: rotate(-4.81875deg);
   touch-action: pan-x pan-y pinch-zoom;
   z-index: 1;
}

/* Δεύτερο GIF */
.contact-section .gif-overlay .gif-image:last-child {
   position: absolute;
   top: 30.525px;
   left: 72.5314px;
   width: 286.094px;
   height: 433.476px;
   transform: rotate(164.37deg);
   touch-action: pan-x pan-y pinch-zoom;
   z-index: 2;
}

/* ✅ Animation ενεργοποίηση όταν γίνεται scroll */
.contact-section.show .contact-details {
   opacity: 1;
   transform: translateY(0);
}

.contact-section.show .social-section {
   opacity: 1;
   transform: translateY(0);
   border-color: white;
}

.contact-section.show .gif-column {
   opacity: 1;
   transform: translateY(0) rotate(-90deg); /* ✅ Εμφανίζεται με -90° περιστροφή */
}

/* 🎯 Responsive CSS for Mobile */
@media (max-width: 768px) {
   .contact-section {
       padding: 1.5rem 1rem;
   }

   .contact-section .content-container {
       flex-direction: column;
       align-items: center;
   }

   .contact-section .left-container {
       align-items: center;
       text-align: center;
   }

   .contact-section .contact-details h1 {
       font-size: 2rem;
   }

   .contact-section .contact-item h2,
   .contact-section .contact-item h3 {
       font-size: 1rem;
   }

   .contact-section .social-section {
       flex-direction: column;
       align-items: center;
       gap: 1rem;
   }

   .contact-section .social-section h1 {
       font-size: 1.25rem;
   }

   .contact-section .social-icons .social-icon {
       width: 40px;
       height: 40px;
   }

   .contact-section .gif-column {
      width: 100%;
      max-width: 300px;
      height: auto;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .contact-section .gif-overlay {
      width: 100%;
      max-width: 250px;
      height: 300px;
  }

  .contact-section .gif-overlay .gif-image:first-child {
      width: 166.806px;
      height: 238.295px;
      left: 50px;
      transform: rotate(-4.81875deg);
  }

  .contact-section .gif-overlay .gif-image:last-child {
      width: 143.047px;
      height: 216.738px;
      top: 80px;
      left: 100px;
      transform: rotate(164.37deg);
  }
}



.secured-data-section,
.customer-support-section,
.service-we-provide-section,
.companies-section,
.contact-section {
    background-color: transparent; /* Set background to transparent */
}

.plans-container form {
   display: contents;
}


/* ============ DUTCH TWEAKS — SHRINK ============ */
/* 1) Data-Driven section (τίτλος + paragraph) */
html[lang^="nl"] .section-title {            /* .section-title στα Data-Driven/Scientifically */ 
  letter-spacing: 0.08em;                    /* μικρότερο spacing */
  font-size: clamp(1.4rem, 1.8vw + 1rem, 2.2rem);
}

html[lang^="nl"] .text-paragraph {           /* δεξιά παράγραφος στο Data-Driven */
  font-size: clamp(1.1rem, 1.4vw + 0.9rem, 2.0rem);
  line-height: 1.35;
  max-width: 48ch;                           /* κρατάει τις γραμμές “σφιχτές” */
}

/* 2) Boxes: 100% SECURED DATA / 24/7 CUSTOMER SUPPORT */
html[lang^="nl"] .customer-support-section .text-content h1,
html[lang^="nl"] .customer-support-section .text-content h2 {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* Αν δεις ότι οι τίτλοι “κολλάνε” στα όρια, άνοιξε λίγο το container αλλά κράτα fixed boxes */
html[lang^="nl"] .secured-data-section .text-content,
html[lang^="nl"] .customer-support-section .text-content {
  min-height: 24rem;   /* ίδιο οπτικό ύψος */
}