.engin-t1, .engin-t2 {
    font-size: 3rem !important;
    font-family: 'Montserrat','Arial Black','Impact',sans-serif;
    margin-bottom:0.2rem;
    
  }

  .eng{
    opacity:0;
    transform:translateX(-10vw);
    transition:transform 1.2s ease,opacity 0.9s ease;
  }
  .eng.show{
    opacity:1;
    transform:translateX(0);
  }
  .engin-t3{
  font-size: 1rem !important;
  font-family: 'Montserrat', 'Arial Black', 'Impact', sans-serif;
  margin-top: 1.5rem;
}
.engineer-overv{
  height: auto;
  width: 80vw;
  background-color: #001028;
  border: 2px solid #d4af37;
  border-radius: 10px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 3vh;
  margin-bottom: 6vh;
}

.title-wrapper{
 width: max-content;      /* shrink to the title’s width */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5vh;         
    text-align: center; 

}
.iteration-butt-wrapper{
  display: flex;
  flex-direction: row;
  margin-left: 16vw;
  margin-top: 2vh;
  gap: 7.5vw;
  margin-bottom: 6.8rem;
  align-items: center;
  
  
}
.iteration-butt1,
.iteration-butt2 {
  padding: 0;
  background: none;
  cursor: pointer;
  border: none;
  position: relative;
  transform: scale(1);              /* Αρχική κλίμακα */
  transition: transform 0.3s ease;  /* Ομαλή μετάβαση */
}





.iteration-img{
  width:auto;
  height:36vh;
  object-fit:contain;
  display:block;
}
#wet-lab, #dry-lab{
  padding:0; background:transparent; border:0; cursor:pointer;
  position:relative; display:inline-block;
  transform:scale(1); transition:transform .3s ease; transform-origin:center;
}
#wet-lab:hover, #dry-lab:hover{ transform:scale(1.2); }
.wrapper-change{
  position:relative;
  min-height:35vh;   
  padding-left:5vw;
  padding-top:5vh;
  padding-bottom:.8rem;
}

.Iterations-wrapper{
  margin-left: -1vw;
  margin-top: 0vh;
  gap: 7.5vw;
  margin-bottom: 0.8rem;
  align-items: center;
  display: none;
  flex-direction: row;
  position: absolute;
  justify-content: flex-start;
  opacity:0;
  transform:translateY(-50vh);
  transition:transform 2s ease,opacity 0.9s ease;

}
.correct-d{
  margin-left:3vw!important;
  gap: 15.5vw!important;
}

.Iterations-wrapper.show{
opacity:1;
transform:translateY(0);
}
.l{
  opacity: 0;
  transform: translateY(24vh);
  transition: opacity 0.8s ease, transform 1.2ms ease;
 
  will-change: opacity, transform;
}
.l.show{
  opacity: 1;
  transform: translateY(0);
}

.Itter-butt{
  padding:0;
  border:none;
  display:inline-block;
  background:none;
}
.itter{
  object-fit:content;
  display:block;
  width:auto;
  height:15vh;
}
.itter-d{
height:19vh;
}

.eng-itter-title{
  margin-left:25vw;
font-size: clamp(20px, 4vw, 48px) !important;
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
margin-top:2vh;
font-family:bold;
color:white;
  width: auto;

}
.cat-tit-wrapp-en{
  position:absolute;
  top: -13vh;
  left: 23vw;
}
.itter-cat-t{
  font-size: 1.7rem !important;
    font-family: 'Montserrat','Arial Black','Impact',sans-serif;
    color:#d4af37;
    margin-bottom:0.2vh;
    width:max-content;
  }

  /*scrolling περιεχόμενο*/
  .scrolling-area{
    position: relative;
 overflow-x:hidden;
  overflow-y: visible;
  width:100%;
  display:none;
  margin-top:5vh;
  border:2px solid #d4af37;
  opacity:0;
  transform:translateX(-30vw);
  transition:transform 1.9s ease,opacity 0.8s ease;
  }
.scrolling-area.show{
  opacity:1;
  transform:translateX(0);
}

.scrolling-wrapper-eng .row{
  display: flex; 
  flex-direction: row;
  min-height: 0;            /* ΚΛΕΙΔΙ */
}
.scrolling-wrapper-eng .row > .col-md-7,
.scrolling-wrapper-eng .row > .col-7{
  display: flex;
  flex-direction: column;
  min-height: 0;            /* ΚΛΕΙΔΙ */
}
.itter-main-titl{
 margin-inline:auto;
font-size: clamp(0.9375rem, 5vw, 2.1875rem)!important;
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
margin-top:6vh!important;
font-family:bold;
color:white;
  width: auto;
}
.scrolling-wrapper-eng{
  position: static;
   height: 100%;
  width: 100%;

}
.gear-wrapper{
  position:relative;
  margin-left: 2.68vw;
 
}
.gear-button-1,
.gear-button-2,
.gear-button-3,
.gear-button-4 {
  position: absolute;
  width: min(20vw, 20vh);
  height: min(20vw, 20vh);
  border: none;
  padding: 0;
  border-radius: 50%;  
  overflow: hidden;    
  background: transparent;
  
}



.gear-button-1,
.gear-button-2,
.gear-button-3,
.gear-button-4 {
  transform:scale(1.2);
}

.gear-button-1 {
 left: 9.2vw;
  top: 4.9vh;
  
}

.gear-button-2 {
  left: 18.4vw;
  top: 23.7vh;
}

.gear-button-3 {
  left: 9.2vw;
  top: 44.7vh;
}

.gear-button-4 {
 left: 0.4vw;
  top: 23.3vh;
}
.gear-button-1 img,
.gear-button-2 img,
.gear-button-3 img,
.gear-button-4 img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* ή cover αν θες να γεμίζει */
  display: block;
transform:rotate(0) scale(1);
}
.gear-button-1 img.active,
.gear-button-2 img.active,
.gear-button-3 img.active,
.gear-button-4 img.active {
animation:spin 6s linear infinite;

}
/* Το column γίνεται «κάθετη σελίδα» που scroll-άρει ομαλά */
.text-column{
  height: 100dvh;                 /* σταθερό viewport ύψος */
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  padding-top: 8vh;               /* «κεφαλίδα» μέσα στο column */
  scroll-padding-top: 8vh;        /* ώστε το snap να κάθεται κάτω από την «κεφαλίδα» */
  overscroll-behavior: contain;
  box-sizing: border-box;
  margin-left:40vw;
}

/* Κάθε section «πιάνει» τουλάχιστον 1 οθόνη,
   αλλά όταν το περιεχόμενο είναι μεγαλύτερο, *μεγαλώνει* χωρίς να κόβεται */
.stage-section{
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: calc(100dvh - 8vh); /* 1 οθόνη μείον το padding-top του column */
  margin: 0;
  display: block;                 /* απλό block για ασφαλές auto-height */
  padding-bottom: 8vh;            /* λίγο buffer στο τέλος για ευχάριστο snap */
  transition: opacity .6s ease, transform .6s ease;
  opacity: 1;
  transform: translateY(0);
}

/* Προαιρετικά, αν θέλεις εσωτερικά wrap */
.stage-inner{ margin-bottom:2rem; }
.stage-section.show{
  opacity:1;
  transform:translateY(0);
  
}
.stage-inner{
  margin-bottom:2rem;
}
@keyframes spin {
  from { transform: rotate(0deg) scale(1.2); }
  to   { transform: rotate(360deg) scale(1.2); }
}
.human-overview{
    height:auto;
    width:80vw;
    background-color:#001028 ;
    border:2px solid  #d4af37;
    border-radius: 10px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 3vh;
    margin-bottom: 6vh;
  }


/* =========================================================
   FUNCTIONAL STACK LAYOUT
   Gears ΠΑΝΩ (centered) — Text ΚΑΤΩ
   + πλαϊνά περιθώρια ~2rem στον συνολικό wrapper
   Ενεργό για οθόνες έως 1400px (ενδιάμεσες & μικρές)
   ========================================================= */
/* =========================================================
   RESPONSIVE (λειτουργικό)
   Gears ΠΑΝΩ (centered, μικρότερα) — Text ΚΑΤΩ (snap μέσα στη στήλη)
   Περιθώρια ~2rem στα πλάγια του συνολικού wrapper
   ========================================================= */

/* ---------- Tablet / μεσαίες οθόνες ---------- */
/* MOBILE: μικρότερα Iterations + κρατάμε το click animation */
@media (max-width: 1150px){

  .wrapper-change{
    min-height: auto;
    padding: 3vh 0 1rem 4vw;
  }

  /* Δεν είναι πια absolute, αλλά ΔΕΝ φαίνονται μέχρι να μπουν .show */
  .Iterations-wrapper{
    position: static;          /* override absolute */
    display: none;             /* Μένει κρυφό μέχρι το .show από JS */
    flex-direction: column;    /* κάθετα */
    align-items: center;       /* κεντραρισμένα looks καλύτερα */
    gap: 1.25rem;
    width: 100%;
    margin: 1rem 0 4rem 0;
    

    /* ήπιο animation εισόδου για mobile */
    opacity: 0;
    transform: translateY(6vh);
    transition: transform .6s ease, opacity .6s ease;
  }

  /* Όταν πατηθεί το button */
  .Iterations-wrapper.show{
    display: flex;
    opacity: 1;
    transform: none;
  }

  /* Μικρότερο gap στο dry */
  .correct-d{
    margin-left: 0 !important;
    gap: 1.25rem !important;
  }

  /* Κουμπιά σε στήλη */
  .Itter-butt{
    display: block;
    width: 100%;
    text-align: center;
  }

  /* ΕΙΚΟΝΕΣ: περιορίζουμε πλάτος & αφήνουμε auto ύψος */
  .itter,
  .itter-d{
    width: clamp(100px, 20vw, 150px); /* << μικρότερο από πριν */
    height: auto;
    max-width: 100%;
    display: inline-block;
  }

  /* Τίτλοι/γραμμή μέσα στη ροή */
  .cat-tit-wrapp-en{
  position: static;         /* όχι absolute — μπαίνει στη ροή */
  width: 100%;
  display: block;
  margin: 0.75rem 0 0.25rem;
  text-align: center;
}
  .itter-cat-t{
    margin: 0;
    font-size: clamp(20px, 5.5vw, 30px);
    text-align: center;
    margin-left:5vw;
  }
  
  /* Ήπια per-item είσοδος (κρατάμε το click stagger) */
  .l{
    opacity: 0;
    transform: translateY(6vh);         /* μικρότερο “πέσιμο” */
    transition: opacity .45s ease, transform .45s ease;
    will-change: opacity, transform;
  }
  .l.show{
    opacity: 1;
    transform: none;
  }

  /* Τα δύο μεγάλα buttons (wet/dry) να χωράνε ωραία */
  .iteration-butt-wrapper{
    display: flex;
    flex-wrap: wrap;
    gap: 2.75rem;
    justify-content: center;
     margin-bottom: 2.25rem;
  }
.ki{
  display:none;
}
}


@media (max-width: 771px){

  /* Μεταβλητές για εύκολο fine-tune */
  :root{
    --outer-pad: clamp(2rem, 4vw, 5rem);   /* πλαϊνά περιθώρια στον wrapper */
    --gear-area: 48dvh;                    /* ύψος ζώνης με γρανάζια */
    --gear-size: clamp(4.6rem, 22vw, 9.5rem);
    --gear-radius: clamp(3.8rem, 24vw, 11rem);
    --stack-gap: 2.2vh;                    /* κενό ανάμεσα σε gears & κείμενο */
    --content-max: 68ch;                   /* ιδανικό πλάτος κειμένου */
  }

  /* Συνολικός wrapper του section (τίτλοι + gears + κείμενα) */
  .scrolling-area{
    padding-left: var(--outer-pad);
    padding-right: var(--outer-pad);
  }

  /* Στοίχιση: πάνω τα gears, κάτω η στήλη κειμένου */
  .scrolling-wrapper-eng .row{
    display: flex;
    flex-direction: column;
    min-height: 0; /* για σωστό overflow στα παιδιά */
  }
  .scrolling-wrapper-eng .row > [class*="col-"]{ min-height: 0; }

  /* Ζώνη γραναζιών */
  .gear-wrapper{
     position: relative;
  width: 100%;
  max-width: 1100px;              /* φραγή για υπερ-πλατιές οθόνες */
  height: var(--gear-area, 50dvh);
  margin: clamp(6vh, 8vh, 10vh) auto clamp(12vh, 15vh, 18vh);
  /* ↑ top / auto center / bottom — ΔΕΝ βάζουμε margin-left/right σταθερό */
  }

  /* --- Κεντράρισμα 4 γραναζιών σε κύκλο γύρω από το κέντρο --- */
  .gear-button-1,
  .gear-button-2,
  .gear-button-3,
  .gear-button-4{
    position: absolute;
    inset: auto !important;
    top: 50% !important;
    left: 50% !important;
    width: clamp(4.8rem, 18vw, 9.5rem);
    height: clamp(4.8rem, 18vw, 9.5rem);
    border: 0;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    overflow: hidden;
    transform: translate(-50%, -50%); /* αρχικό κεντράρισμα */
  }

  /* θέσεις πάνω/δεξιά/κάτω/αριστερά γύρω από το κέντρο */
  .gear-button-1{ --angle:-90deg; }   /* North */
  .gear-button-2{ --angle:  0deg; }   /* East  */
  .gear-button-3{ --angle: 90deg; }   /* South */
  .gear-button-4{ --angle:180deg; }   /* West  */

  .gear-button-1,
  .gear-button-2,
  .gear-button-3,
  .gear-button-4{
    --gear-radius: clamp(4rem, 20vw, 11rem);
    transform:
      translate(-50%, -50%)
      rotate(var(--angle))
      translate(var(--gear-radius))
      rotate(calc(var(--angle) * -1));
  }

  /* καθαρή εικόνα χωρίς έξτρα scale από desktop */
  .gear-button-1 img,
  .gear-button-2 img,
  .gear-button-3 img,
  .gear-button-4 img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transform: none;
  }
    .itter-main-titl{
    margin-top: 1.2vh !important;
    text-align: center;
  }


  /* ---------- Κείμενα ΚΑΤΩ με εσωτερικό snap-scroll ---------- */
  .text-column{
    /* κρατάμε snap μέσα στη στήλη όπως ζήτησες */
     scroll-snap-type: y mandatory;
    scroll-padding-top: 6vh;

    height: auto;
    max-height: calc(100dvh - var(--gear-area, 48dvh) - 2.2vh - 8vh);
    overflow-y: auto;
    overscroll-behavior: contain;

    max-width: min(1000px, 100%);
    margin-inline: auto;
    margin-top: 2.2vh;
    padding: 0 clamp(.5rem, 1vw, 1rem) 10vh;
    width:95%;
  }

  /* περιεχόμενο μέσα στη στήλη: κέντρο & «στενό» πλάτος */
  .text-column > *{
    max-width: var(--content-max);
    margin-left: auto;
    margin-right: auto;
  }

  /* Snap targets (sections) */
  .stage-section{
    scroll-snap-align: start;
    height: auto;
    transition: opacity .6s ease, transform .6s ease;
    opacity: 1;                 /* ορατά by default */
    transform: none;
    padding-block: .5rem;
  }
  /* αποστάσεις μεταξύ διαδοχικών sections */
  .stage-section + .stage-section{
    margin-top: clamp(1.6rem, 4.6vh, 2.6rem);
    padding-top: clamp(.4rem, 1vh, .8rem);
    border-top: 1px solid rgba(255,255,255,.12);
  }

  /* εικόνες/πίνακες ασφαλείς στο πλάτος */
  .text-column img,
  .text-column video,
  .text-column canvas,
  .text-column table{
    max-width: 100%;
    height: auto;
  }
}

/* ---------- Κινητά / μικρότερα tablets ---------- */


/* ---------- Πολύ στενές οθόνες ---------- */
@media (max-width: 480px){
  :root{
    --outer-pad: clamp(1.6rem, 7vw, 2.4rem);
    --gear-area: 42dvh;
    --gear-size: clamp(3.8rem, 30vw, 8rem);
    --gear-radius: clamp(2.6rem, 30vw, 9.2rem);
    --content-max: 58ch;
  }
  .scrolling-area{
    padding-left: var(--outer-pad);
    padding-right: var(--outer-pad);
  }
  .text-column{
    width:90%;
  }
}
/* =========================================================
   ΕΝΔΙΑΜΕΣΑ ΠΛΑΤΗ (fix)
   Gears ΠΑΝΩ κεντραρισμένα σε κύκλο — Text ΚΑΤΩ με snap
   ========================================================= */


/* Body */ 








.content a {
  text-decoration: none !important;
  color: black !important;
}

.otherpagelink {
  color: white;
  font-size: 1.2rem;
}

/* Carousel */

.carousel {
    position: relative;
    width: 100%;
    max-width: 40vw;
    margin: auto;
    overflow: hidden;
  }
  
  .carousel-images {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }
  
  .carousel-images img {
    width: 30vw;
    display: none;
  }
  
  .carousel-images img.active {
    display: block;
  }
  
  .carousel button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
  }
  
  .carousel button.prev {
    left: 1vw;
  }
  
  .carousel button.next {
    right: 1vw;
  }
  
  .carousel button:hover {
    background-color: rgba(0, 0, 0, 0.8);
  }

/* Body */ 


body::-webkit-scrollbar {      /* Chrome, Edge, Safari */
    display: none;
  }
  /* Global styles */
  body {
    background: url('https://static.igem.wiki/teams/5891/general/background-image.webp');
    /* background-size: cover; */
    background-repeat: repeat;  
    background-size: 100%;       
    position:relative;
    z-index:1000;
    overflow: auto; /* το περιεχόμενο παραμένει scrollable */
    scrollbar-width: none;      /* Firefox */
  }
  .img-title {
    width: 100%;
    height: 85vh;
    background-image: url('https://static.igem.wiki/teams/5891/general/menu-bar-image.webp'); 
    background-size: cover;         
    background-position: center;    
    position:relative;  
  }
  .des-con{
  background-color: #001028;
  border:2px solid #d4af37;
  border-radius: 10px;
  margin-bottom: 10vh;
  }
  
  @media (max-width:1100px){
    .des-con {
      margin-left: 8vw;
      margin-top: 5vh;
    }
  
    #ref-collapse-item {
      margin-left: 7w !important;
    }
  
    #fixing img {
    width: 73vw !important;
  }
  
  
  
    .descr-mini-title {
      font-size: 20px !important;
    }
  
    #temp {
      font-size: 22px !important;
    }
  
    #tempmain {
      font-size: 28px !important;
    }
  
    #refid {
      margin-left:10vw;
      max-width: 86vw;
    }
  
    #double_title .proj-t1 {
      font-size: 35px !important;
    }
    #double_title .proj-t2 {
      font-size: 35px !important;
    }
    #double_title .proj-t3 {
      font-size: 16px !important;
    }
  
    
  }
  
  @media (max-width: 1000px) {
  #sidebarContour {
      width: 90vw;
      max-width: 450px;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      margin-top: -8vh;
      margin-bottom: 10vh;
    }
    #part-page .human-overview {
      width: 90vw;
    } 
    .fixpos {
  transform: translateX(25%);
}
  }
  
  @media (max-width: 768px){
    #temp {
      font-size: 20px !important;
    }
  
    
  
    .sref {
      width: 3.1vh !important; 
      height: 3.1vh !important; 
    }
  
    .des-con {
      margin-left: 14vw;
    }
  
    #ref-collapse-item {
      margin-left: 10vw !important;
    }
  
    #refid {
      margin-left:12vw;
      max-width: 86vw;
    }
  
    #double_title .proj-t1 {
      margin-top: 12vh !important;
      margin-bottom: 0 !important;
      font-size: 25px !important;
    }
    #double_title .proj-t2 {
      margin-top: 2vh !important;
      margin-bottom: 0 !important;
      font-size: 25px !important;
    }
    #double_title .proj-t3 {
      margin-top: 2vh !important;
      margin-bottom: 0 !important;
      font-size: 13px !important;
    }
  
    .proj-t1 {
      margin-top: 15vh !important;
      font-size: 30px !important;
    }
  }
  
  
  /* Body styling */
  
  #fixing img {
    width: 60vw;
    margin-top: 2vh;
  }
  
  
  
  
  
  
   /*Button css*/
     /*Font-SIZE*/ 
  
  
   body *:not(button) {
    font-size: inherit !important;
    line-height:1.6;
    
  } 
  body.large-font h1,
  body.large-font h2,
  body.large-font h3 {
    font-size: clamp(1.2em, 2vw, 1.8em);
  }
  body.large-font p{
    line-height:1.3;
  }
  
  
  
  @keyframes slideInt{
    to { opacity: 1; transform: translateX(0); }
  }
  
  @keyframes slideInpic{
    0%   { transform: translateY(-160px); opacity: 0; }
    70%  { transform: translateY(10px);  opacity: 1; }  /* κατεβαίνει λίγο πιο κάτω από τον στόχο */
    85%  { transform: translateY(-5px);  opacity:1 ;       }  /* μικρή επιστροφή προς τα πάνω */
    100% { transform: translateY(0);     opacity:1;             }  /* σταθεροποίηση */
  }
  
  .scrolling-down-h{ 
    background:none; border:none; padding:0; margin:0; cursor:pointer;
    position:absolute; top:28rem; left:46%;
    opacity:0;
  animation: slideInpic 1s cubic-bezier(.22,.61,.36,1) forwards;
    will-change: transform, opacity;
    animation-delay:2.4s;
  }
  .scrolling-down-h:after{
    content: 'Scroll down';
    color: black;
    font-size: 19px !important;
    font-weight: bold;
    position: absolute;
    top: 6rem;
    left: 0rem;
  }
  
  /* .human-overview-wrapper{
    display:flex;
    justify-content:flex-start ;
    align-items:flex-start;
  } */
  
  .human-overview{
    height:auto;
    width:80vw;
    background-color:#001028 ;
    border:2px solid  #d4af37;
    border-radius: 10px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 3vh;
    margin-bottom: 6vh;
  }
  
  /*human icons parts*/
  
  
  .timeline-wrapper {
    position:relative;
    width: 85vw;
    height: 90vh;
    left:7.5vw;
    background-color: #001028;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    border:solid 2px #d4af37;
    z-index:100;
    margin-bottom: 5vh;
  }
  
  .timeline-container {
    margin-top: 35vh;
    display: flex;
    gap: 2vw; /* 27.5px */
    width: 100%;
    justify-content: center;
    font-weight: 900;
    font-size: 47px;
    z-index:1000;
  }
  
  
  .timeline-point img {
    height: 130px;
    border-radius: 50%;
    width: 100%;
    cursor: pointer;
    transition: transform 0.2s ease;
    opacity: 0; /* ξεκινά αόρατο */
    
  }
  .timeline-point.show img {
    animation: fadeIn 0.5s linear calc(var(--delay) + 0.5s) forwards;
  }
  
  .timeline-point img:hover{
    transform:scale(1.1);
  }
  
  
  /* Individual timeline point styling */
  .timeline-point {
    transition-duration: 0.5s;
    border-radius: 50%;
    background: linear-gradient(145deg, #1e2125, #23282c);
    box-shadow: 13.4px 13.4px 40.2px #1c1f23, -13.4px -13.4px 40.2px #262b2f;
    display: grid;
    place-items: center;
    width: 94px;
    position: relative;
    color: var(--color);
  }
  /*Εδώ υπάρχει και μέσα στο εικονίδιο μου, το ημικύκλιο, εμφανίζεται λόγω του μεγαλύτερου width και height Και z-index*/
  .timeline-point::before {
    content: "";
    width: 140px;
    height: 140px;
    z-index: -1;
    border-radius: 50%;
    position: absolute;
    background: conic-gradient(
      var(--color) var(--angle),
      transparent 0deg 360deg
    );
  
  }
  .timeline-point.show::before {
    animation: rotateBorder 1s linear var(--delay) forwards;
  }
  
  /*Χρησιμοποιεί τα child επειδή έχω position absolute και ρρελατιωε*/
  .timeline-point:nth-child(odd)::before {
    transform: rotate(-90deg);
   
  }
  
  .timeline-point:nth-child(even)::before {
    transform: rotate(90deg) scaleY(-1);
    
  }
  
  /* Custom property for angle */
  @property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
  }
  
  /* Common styling for timeline points */
  .timeline-point:nth-child(1) {
    --color:#efe1d2
  ;
    --delay: 0s;
  }
  
  .timeline-point:nth-child(2) {
    --color: #e5d49c;
    --delay: 1s;
  }
  
  .timeline-point:nth-child(3) {
    --color: #be9a67;
    --delay: 2s;
  }
  
  .timeline-point:nth-child(4) {
    --color:#a27a40;
    --delay: 3s;
  }
  
  .timeline-point:nth-child(5) {
    --color: #755500;
    --delay: 4s;
  } 
  
  
  /* Popup styling */
  .popup {
    width: 241.6px;
    height: 100%;
    max-height: 0;
    background-color: var(--color);
    display: grid;
    grid-template-columns: 16% 84%;/*Αριθμός+τίτλος*/
    position: absolute;
    color: white;
    border-radius: 22px;
    box-shadow: 6.7px 6.7px 21.4px #17191d, -6.7px -6.7px 21.4px #212529;
    transform-origin: bottom bottom;
    
  }
  .popup.show {
    animation: expandPopup 0.5s linear calc(var(--delay) + 0.5s) forwards;
  }
  
  
  
  .timeline-point:nth-child(odd) .popup {
    bottom: 170.1px;
  }
  
  .timeline-point:nth-child(even) .popup {
    top: 170.1px;
  }
  
  /* Popup number styling */
  /*Eπειδή είναι παιδί του popup, θα δεσμεύσει την πρώτη στήλη που πιάνει το 16%*/
  .popup-number {
    grid-row: span 2;
    display: grid;
    font-size: 2rem;
    font-weight: bold;
    place-items: center;
    cursor: auto;
    
    opacity: 0;
    height: 100%;
  }
  
  .popup-number.show {
    animation: fadeIn 0.5s linear calc(var(--delay) + 0.7s) forwards;
  }
  /*Αυτό ως δεύτερο παιδί θα δεσμεύει το υπόλοιπο 84%*/
  /* Popup title styling */
  .popup-title {
    color:white;
    padding-bottom: 6.7px;
    font-size: 18.1px;
    font-weight: 900;
    text-decoration:none;
    transition: transform 0.1s linear;
    display:inline-block;/*Για να δουλέψει το hover*/
    font-size:1.25em !important;
   
   
  }
  
  /* Popup details styling */
  .popup-details {
    padding: 14.1px;
    background-color: #1c1f23;
    border-radius: 22px;
    opacity: 0;
    font-weight: 500;
    user-select: none;
    cursor: pointer;
    overflow: hidden;
    font-size: 0.75rem;
    text-align:center;
    background: linear-gradient(120deg, #16181b, #22262b);
    margin: 3.35px;
    animation: fadeIn 0.5s linear calc(var(--delay) + 0.7s) forwards;
   
  }
  
  .popup::before {
    content: "";
    width: 6.7px;
    height: 0;
    border-radius: 20px;
    background-color: var(--color);
    position: absolute;
    left: 50%;
    top: -41.9px;
    display: flex;
    
  }
  
  .popup.show::before {
    animation: drawLine 0.5s linear var(--delay) forwards;
  }
  
  .timeline-point:nth-child(odd) .popup:before {
    top: calc(100% + 47px);
    transform: rotateX(180deg);
    transform-origin: top;
  }
  
  /* Hover effect for timeline points */
  .timeline-point:hover {
    background: linear-gradient(145deg, var(--color), #1e2125);
    color: white;
  }
  .popup-title:hover{
    transform:scale(1.2);
    color: var(--color);/*Μεταβλητή για να υιοθετεί κάθε μεταβλητή το χρώμα του γονιού*/
  }
  
  
  /* Animation for border rotation */
  @keyframes rotateBorder {
    from {
      --angle: 0deg;
    }
  
    to {
      --angle: 180deg;
    }
  }
  
  /* Animation for popup expansion */
  @keyframes expandPopup {
    0% {
      max-height: 0;
    }
  
    100% {
      max-height: 200px;
    }
  }
  
  /* Animation for line drawing */
  @keyframes drawLine {
    0% {
      height: 0%;
      opacity: 0;
    }
  
    100% {
      height: 33.5px;
      opacity: 1;
    }
  }
  
  /* Animation for fade-in effect */
  @keyframes fadeIn {
    to {
      opacity: 1;
    }
  }
  /*Για διαφορετικές οθόνες*/
  @media (max-width: 1050px) {
    body {
      height: auto;
      display: block;
    }
    .timeline-container {
      flex-direction: column;
      height: auto;
      width: 100%;
      /* padding: 100px 0px; */
    }
  
    .timeline-point {
      height: 134px;
      flex-shrink: 0;
      left: calc(-321px / 2);
      margin: 0px auto;
      position: relative;
    }
  
    .timeline-point:nth-child(odd)::before {
      transform: rotate(0deg);
    }
  
    .timeline-point:nth-child(even)::before {
      transform: rotate(0deg) scaleX(-1);
    }
  
    .timeline-point .popup:before {
      display: none;
    }
  
    .timeline-point:nth-child(odd) .popup{
      bottom: auto;
      right: -370.1px;
    }
  
    .timeline-point:nth-child(even) .popup {
      top: auto;
      right: -370.1px;
    }
    
    
  }
  
  
  .copyright__part{
      padding: 10px 20px;
      background: #000000;
      text-align: center;
      font-weight: 300;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
  }
  
  .copyright__part a{
      font-size: 14px;
      text-decoration: none;
      color: #ffffff;
  }
  
  
  .timeline__cover {
    display: none;
    opacity: 0;
    transform:translateX(-100px);
    background:#001028;
    width: 85vw;
    margin: 0 auto;
    /* padding: 60px 40px;  */
    padding: 5vh 7vw 23vh 7vw;
    margin-bottom: 10vh;
    border:solid 2px #d4af37;
    height:auto;
    transition:opacity 1.2s ease, transform 1.2s ease;
    background-color: rgba(0, 0, 0, 0.59);
  
  }
  
  .timeline__cover.show {
    opacity: 1;
    transform:translateX(0);
  }
  
  .preview-hum-texts{
    width: 95%;
    margin-top:2vh;
    text-align: center;
    color:#efe1d2;
    position: relative;
    left: 50%;
    transform: translateX(-50%) !important;
  }
  
  .timeline__cover .timeline__title{
      margin: 0 auto;
      text-align: center;
      padding: 0;
  }
  .timeline__cover .timeline__title h2{
      font-size: 3rem !important;
      font-weight: 600;
      margin-bottom: 1.26vh;
      color:#efe1d2;
  }
  
  
  .timeline__cover .timeline{
      padding-top: 4vw; /*64px*/
  }
  .timeline__cover .timeline ul{
      padding-top: 6.25vw; /*100px*/
  }
  .timeline__cover .timeline ul li {
      background: #9a9a9a;
      position: relative;
      margin: 0 auto;
      width: 0.125vw; /*2px*/
      margin-bottom: 3vw; /*48px*/
      list-style-type: none;
  }
  .timeline__cover .timeline ul li .hidden {
      opacity: 0;
  }
  
  .timeline__cover .timeline ul li:last-child {
      padding-bottom: 0.5vw;
    width: 0;
    height: 0;
  }
  
  .timeline__cover .timeline ul li:before {
      content: '';
      background: #a27a40;
      position: absolute;
      left: 50%;
      top: -2vw;
      transform: translateX(-50%);
      /* -webkit-transform: translateX(-50%); */
      width: 1vw;
      height: 1vw;
      /* -webkit-border-radius: 50%;
      -moz-border-radius: 50%; */
      border-radius: 50%;
  }
  
  
  
  .timeline__cover .timeline ul li .content {
      position: relative;
    top: -18vh; /* that's gone if something doesnt work */
    width: 20vw;
    height: auto;
    padding-top: 2vh;
    padding-bottom: 2vh;
  }
  
  .timeline__cover .timeline ul li .content img{
    opacity: 1;
    background-color: black;
    width: 14vh;
    height: 14vh;
    border-radius: 50%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .timeline__cover .timeline ul li .content h3{
    font-weight: 600;
    margin-top: 0.1vh;
    font-size: 1.26em ; /*1.26em*/
    color: black;
    opacity: 1;
    position: relative;
    text-align: center;
  }
  
   .timeline__cover .timeline ul li .content p{
      color: black;
    font-size: 0.9em;
    font-weight: 400;
    position: relative;
    text-align: center;
    margin-top: -0.5vh;
  }
  
  .Readmore{
    position: relative;
    background-color: #a27a40;
    color: black;
    border: 2px solid black;
    border-radius: 5px;
    transition: transform 0.2s ease;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  .Readmore:hover{
    background-color: #a27a40;
    opacity:0.8!important;
  }
  
  .timeline__cover .timeline ul li:nth-child(odd) .content {
      left: 5vw;
  }
  
  .timeline__cover .timeline ul li:nth-child(odd) .content:before {
      left: 0;
  }
  
  .timeline__cover .timeline ul li:nth-child(even) .content {
      left: -5vw;
    transform: translateX(-100%);
  }
  
  .timeline__cover .timeline ul li:nth-child(even) .content:before {
      right: 5vw;
  }
  
  .timeline__cover .timeline .content {
    position: relative;
    color:#efe1d2;
    background-color:white;
    border-radius: 16px;
    overflow:hidden;
    opacity:1;
    transition-delay:0.5s;
    transition: opacity 0.9s cubic-bezier(.22,.61,.36,1),
                transform 1.5s cubic-bezier(.22,.61,.36,1);
  }
    
  .timeline__cover .timeline .content.hidden {
    opacity: 0;
  }
  
  .timeline__cover .timeline ul li:before .content {
    background: #a27a40;
  }
  
  .my-modal-dialog{
   max-width:900px;
  }
  .my-modal-content{
    height:95vh;
    max-height:none!important;
    background-color:white;
    border-radius:5%;
    overflow-y:auto;
    position:relative;
    overflow-y:auto;
    overflow-x:hidden;
    width:auto;
  }
  
  .my-modal-title{
    color:black;
    font-size:12px;
    font-weight:bold;
  }
  .my-modal-header{
    background-color:#e5d49c;
  }
   
  
  
  .my-close-button{
    color:white;
    background-color:none;
    transition: transform ease 0.2s, background-color ease 0.2s;
    --bs-btn-close-color: black;
    position:absolute;
    left: 52.8rem;
    top: 1rem;
   }
  
  .my-close-button:hover{
  transform:scaleY(1.05);
  filter: brightness(1.5);
  background-color:grey;
  }
  .my-modal-body{
    background-color:#be9a67;
  }
  .my-modal-body img{
   max-width:100%; height:auto;
  }
  
  .my-modal-text {
    position: static !important;
    color: black !important;
    font-size: 1rem !important;
    font-weight: normal !important;
    line-height: 1.6 !important;
    opacity: 1 !important;
    background: transparent !important;
    border: none !important;
    padding: 0.5rem !important;
    text-align: left !important;
  }
  /*blur*/
  #main-content.blur > *:not(.no-blur) {
    filter: blur(5px);
    transition: filter 0.3s ease;
  }
  /*img and text στα buttons και progess-bar*/
  .img-text-dir{
    position:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }
  .img-button{
    height:50px;
    width:50px;
    
  }
  .inclusive-progress-bar{
    display:flex;
    flex-direction:row;
    justify-content:center;
    gap: 5.6px;
    padding-top: 1px;
    justify-content: flex-start;
    padding-left: 15px;
    padding-bottom:1px;
  }
  .step-bar{
   width: 24.2px;
    height: 3.9px;
    background-color:grey;
    display:none;
  }
  .step-bar.active {
    background-color: blue;
  }
  .const-properties{
    font-size:initial!important;
    letter-spacing: initial !important;
    word-spacing: initial !important;
    line-height: initial !important;
    font-family: "Nunito Sans", sans-serif!important;  
    text-align:center!important;
  }
  
  /* Media Queries */
  @media screen and (max-width: 1020px) {
      .preview-hum-texts {
      margin-bottom: 15vh;
    }
     .timeline__cover .timeline ul li .content {
        width: 25vw !important;
     }
     .timeline__cover .timeline ul li .content h3 {
        font-size: 1rem !important;
     }
     .timeline__cover .timeline ul li .content p {
        padding-left: 0.65vw;
        padding-right: 0.65vw;
        font-size: 0.78em !important;
     }
     .Readmore {
      font-size: 0.8rem;
     }
  }
  
  @media screen and (max-width: 768px) {
    .timeline__cover .timeline ul li .content {
        width: 30vw !important;
     }
      /* .timeline__cover {
          padding: 32px 0;
          background: #27272C;
      }
      .timeline__cover .timeline__title {
          text-align: left;
      }
      .timeline__cover .timeline {
          padding-top: 32px;
      }
      .timeline__cover .timeline ul li {
          margin-left: 48px !important;
      }
      .timeline__cover .timeline__title h2 {
          font-size: 32px;
          line-height: 44px;
          letter-spacing: 0.08px;
      }
      .timeline__cover .timeline ul li {
          margin-left: 20px;
      }
  
      .timeline__cover .timeline ul li .content {
          width: calc(100vw - 100px);
          transition: .2s;
      }
  
      .timeline__cover .timeline ul li .content p {
          min-height: 110px;
      }
  
      .timeline__cover .timeline ul li:nth-child(even) .content {
          left: 38px;
      }
  
      .timeline__cover .timeline ul li:nth-child(even) .content:before {
          left: -33px;
      }
      .timeline__cover .timeline ul li:nth-child(odd) .content {
          left: 38px;
      } */
  }
  
  /* timeline__cover ends */
  
  
  /* Entrepreneurship */
    /*Modal θΈΛΟΥΝ ΑΛΛΑΓΗ ΣΤΟ ENTERPREURSHIP, ΒΑΛΕ ΚΛΑΣΣΕΙΣ ΠΡΟΣΩΠΙΚΑ ΓΙΑ ΑΥΤΕΣ ΜΕ ΑΛΛΑ ΟΝΟΜΑΤΑ ΕΚΕΙ ΠΟΥ ΕΊΝΑΙ ΗΔΗ ΑΥΤΑ */
    /*.btn
    .modal-content {
        background-color: #ffffff !important;
      }
  
      .modal-backdrop.show {
        background-color: rgba(0, 0, 0, 0.6);
      }
  
      .btn-long{
          height: 32vh;
          width: 100%;
      }
  
      .btn-small{
          height: 15vh;
          width: 100%;
      }
  
      .btn-medium{
          height: 20vh;
          width: 100%;
      }
  
   
  
    /*sidebar Προσωρινά για τα Parts για να βλέπω*/
    /* .sidebar-sticky-box{
      position:relative;
      height:auto;
      overflow:visible;
    } */
    
    #fixing {
      margin-left: -7vh;
    }
  
    .sidebarbox {
      margin-left: 1vw;
    }
  
    #sidebartitle {
      text-align: center;
      font-size: 23px !important;
      margin-bottom: -1vh;
    }
  
    .sidebar-subcat a{
      font-size: 0.9rem !important;
      margin-top: 0.5vh !important;
      margin-bottom: 0 !important;
    }
    
  
    .toc {
      position: sticky;
      left: 0em;
      top: 3em;
      padding: 10px;
      width: 18vw;
      min-width: 240px;
      /* width: 18em;  */
      line-height: 5px;
      font-size: 16px;
      z-index: 5;
      border-radius: 4px !important;
      
      border: 3px solid #d4af37;
    }
    .toc a {
      padding-top: 1vh;
      padding-left: 20px;
      margin-top: 10px;
    }
    .toc ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .toc ul ul {
      padding-left: 2em;
    }
    .toc li a {
      display: inline-block;
      color: black;
      text-decoration: none;
      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
      font-weight:bold;
    }
    .toc li.visible > a {
      color: #21095e;
      transform: translate(5px);
    }
    .toc-marker {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
    .toc-marker path {
      transition: all 0.3s ease;
      z-index:1000;
      
    }
    @media screen and (max-width: 1200px) {
      .toc {
        font-size: 14px;
      }
    }
    /*Parts Page*/
    .Parts-container{
      position:relative;
      display:flex;
       background-image: url("https://static.igem.wiki/teams/thessaloniki/background/background-image.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height:75vh;
    visibility:hidden;
    opacity:0;
    transition:opacity 0.3s ease, transform 0.3s ease;
    transform:translateY(20px);
   margin-bottom:3rem;
    }
  .Part-title{
      font-weight: bold;
      font-size:4.5rem!important;
      color:black;
       padding-left: 10.8rem;
    padding-top: 2.8rem;
    transition: opacity 0.6s ease, transform 0.6s ease;
    opacity:0;
    transform:translateY(20px);
  }
  .Parts-img{
      padding-left: 22.8rem;
      padding-top:8rem;
      width:auto;
      height:270px;
      transition: opacity 0.6s ease, transform 0.6s ease;
  opacity:0;
    transform:translateY(20px);
  }
  .Parts-container.show{
      visibility:visible;
      opacity:1;
      transform:translateY(0);
  
  }
  .Parts-container.show .Parts-img{
      transition-delay:0.9s;
       visibility:visible;
      opacity:1;
      transform:translateY(0);
  
  }
  .Parts-container.show .Part-title{
  transition-delay:0.5s;
   visibility:visible;
      opacity:1;
      transform:translateY(0);
  }
  
  
  .toc-part li{
      opacity:0;
      transition:opacity 0.5s ease, transform 0.5 ease;
      transform:translateX(-30px);
  }
  .toc-part li.show{
      opacity:1;
      
      transform:translateX(0);
  }
  
  
  .toc-part.show li:nth-child(1) {
    transition-delay: 0.3s;
    opacity: 1;
    transform: translateX(0);
  }
  .toc-part.show li:nth-child(2) {
    transition-delay: 0.5s;
    opacity: 1;
    transform: translateX(0);
  }
  .toc-part.show li:nth-child(3) {
    transition-delay: 0.7s;
    opacity: 1;
    transform: translateX(0);
  }
  .toc-part.show li:nth-child(4) {
    transition-delay: 0.9s;
    opacity: 1;
    transform: translateX(0);
  }
  .toc-part.show li:nth-child(5) {
    transition-delay: 1.1s;
    opacity: 1;
    transform: translateX(0);
  }
  
  
  .toc-part.vanish li:nth-child(1){
      transition-delay:0.5s;
      opacity: 0;
    transform: translateX(-30px);
  }
  .toc-part.vanish li:nth-child(2){
      transition-delay:0.4s;
      opacity: 0;
    transform: translateX(-30px);
  }
  .toc-part.vanish li:nth-child(3){
      transition-delay:0.3s;
      opacity: 0;
    transform: translateX(-30px);
  }
  .toc-part.vanish li:nth-child(4){
      transition-delay:0.2s;
      opacity: 0;
    transform: translateX(-30px);
  }
  .toc-part.vanish li:nth-child(5){
      transition-delay:0.1s;
      opacity: 0;
    transform: translateX(-30px);
  }
  .Parts-contour{
      border:2px solid blue;
      height:5000px;;
      width:auto;
      display:flex;
      justify-content: flex-start;
      flex-direction:column;
      align-items:flex-start;
      opacity:0.4;
      transition:transform 0.5s ease, opacity 0.5s ease;
      transform:translateY(20px);
      background-color:white;
      
  }
  
  .Overv-part-title{
      font-weight: bold;
      color:black;
      font-size:3rem !important;
      margin: 0;
    padding: 0;
      
  }
  .hr-parts-line{
      height:4px;
      width:90%;
      padding-left:0;
      padding-top:0;
      background-color:#191970;
      margin: 0;
    padding: 0;
  }
  .Parts-contour.active{
    opacity:1;
    transform:translateY(0);
    transition-delay:0.2s;
  }
  .parts-text{
    font-size:1.2rem!important;
    margin-left:0.8rem;
    width:90%;
    
  }
  .pretext-parts-container{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    width:100%;
    height:80px;
    margin-top:1rem;
  }
  
  .table-parts-container{
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    width:100%;
    margin-bottom:2rem;
    
  }
  .table-class{
  width: 90%; 
    border-collapse: collapse;
  }
  
  .table-title-parts1,
  .table-title-parts2,
  .table-title-parts3,
  .table-title-parts4,
  .table-title-parts5{
  border:solid 2px #d4af37;
  background-color:#001028;
  color:#a27a40;
  height:67.8px;
  padding-left:3px!important;
  padding-right:3px!important;
  font-weight:bold;
  text-align:center;
  vertical-align:middle;
  font-size:1.2rem!important;
  
  }
  .table-title-parts1 { width: 15%; }
  .table-title-parts2 { width: 20%; }
  .table-title-parts3 { width: 15%; }
  .table-title-parts4 { width: 30%; }
  .table-title-parts5 { width: 20%; }
  
  
  
  .table-content-parts1,
  .table-content-parts2,
  .table-content-parts3,
  .table-content-parts4,
  .table-content-parts5{
  border:solid 2px #d4af37;
  background-color:#001028;
  color:#a27a40;
  height:88.8px;
  text-align:center;
  vertical-align:middle;
  font-size:1rem!important;
  }
  .table-content-parts1 { width: 15%; }
  .table-content-parts2 { width: 20%; }
  .table-content-parts3 { width: 15%; }
  .table-content-parts4 { width: 30%; }
  .table-content-parts5 { width: 20%; }
  
  @media (max-width: 768px) {
    .table-parts-container {
      overflow-x: auto;
      justify-content: flex-start; /* για scroll οριζόντια */
    }
  
    .table-class {
      width: 100%;
      min-width: 600px; /* για να ενεργοποιείται το scroll */
    }
  
    .table-title-parts1,
    .table-title-parts2,
    .table-title-parts3,
    .table-title-parts4,
    .table-title-parts5,
    .table-content-parts1,
    .table-content-parts2,
    .table-content-parts3,
    .table-content-parts4,
    .table-content-parts5 {
      font-size: 0.9rem !important;
      padding: 5px;
      height: auto;
      word-break: break-word;
    }
  
    .Overv-part-title {
      font-size: 2rem !important;
      padding-left: 1rem;
    }
  
    .Part-title {
      font-size: 2.5rem !important;
      padding-left: 1rem;
    }
  
    .Parts-img {
      max-width: 80%;
      height: 90px;
      padding-left: 0;
      padding-top: 2rem;
      display: block;
      margin: 0 auto;
    }
  
    .pretext-parts-container {
      height: auto;
    }
  }
  
  /*Inclusivity κώδικας*/
  /*Inclusivity κώδικας*/
  .Inclus-wrapper-intro {
    width: 100%;
    height: 100vh;
    background-image: url("Inclusivity image.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-left: 1rem;
    opacity: 0;
    transform: translateY(-30px);
    transition: transform 0.4s ease, opacity 0.4s ease;
    position: relative;
    background-color:black!important;
  }
  
  .Inclus-wrapper-intro.show {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.25s;
  }
  
  .inclus-title span {
    font-family: Impact, sans-serif;
    font-size: 120px!important;
    color: black;
    letter-spacing: 50px;
    display: inline-block;
    opacity: 0;
    transform: translateX(-30px);
    transition: transform 0.2s ease, opacity 0.2s ease;
    padding-top:26.8rem;
  }
  
  .inclus-title.show span {
    opacity: 1;
    transform: translateX(0);
  }
  
  /* με καθυστερήσεις */
  .inclus-title.show span:nth-child(1)  { transition-delay: 0.5s; }
  .inclus-title.show span:nth-child(2)  { transition-delay: 0.6s; }
  .inclus-title.show span:nth-child(3)  { transition-delay: 0.7s; }
  .inclus-title.show span:nth-child(4)  { transition-delay: 0.8s; }
  .inclus-title.show span:nth-child(5)  { transition-delay: 0.9s; }
  .inclus-title.show span:nth-child(6)  { transition-delay: 1s; }
  .inclus-title.show span:nth-child(7)  { transition-delay: 1.1s; }
  .inclus-title.show span:nth-child(8)  { transition-delay: 1.2s; }
  .inclus-title.show span:nth-child(9)  { transition-delay: 1.3s; }
  .inclus-title.show span:nth-child(10) { transition-delay: 1.4s; }
  .inclus-title.show span:nth-child(11) { transition-delay: 1.5s; }
  
  .img-inclusive-topr{
    position:absolute;
    left:2rem;
    top:2rem;
    width:auto;
    height:100px;
    opacity:0;
    transition:transform 0.3s ease, opacity 0.3s ease;
    transform:translateY(-30px);
  }
  .img-inclusive-topr.show{
    opacity:1;
    transform:translateY(0);
    transition-delay:0.8s;
  }
  .img-inclusive-topl{
    position:absolute;
    right:2rem;
    top:2rem;
    width:auto;
    height:100px;
    opacity:0;
    transition:transform 0.3s ease, opacity 0.3s ease;
    transform:translateY(-30px);
  }
  .img-inclusive-topl.show{
    opacity:1;
    transform:translateY(0);
    transition-delay:1s;
  }
  
  
  
  /*Ιnclusivity Envelope*/
  .envelope-container{
    position:absolute;
    top:15%;
    left:50%;
  transform: translateX(-50%) scale(0.9);
    transform-origin: top center;
  opacity:0;  
  z-index:5;
  
  
  }
  .envelope-container.show{
    animation: bounceInDown 1.2s ease forwards;
    animation-delay: 2s;
    pointer-events:auto!important;
  
  }
  
  
  
  @keyframes bounceInDown {
    0% {
      opacity: 0;
      transform: translateX(-50%) translateY(-300px) scale(0.9);
    }
    60% {
      opacity: 1;
      transform: translateX(-50%) translateY(30px) scale(0.9);
    }
    80% {
      transform: translateX(-50%) translateY(-10px) scale(0.9);
    }
    100% {
      transform: translateX(-50%) translateY(0) scale(1.3);
      opacity: 1;
    }
  }
  
  
  
  
  .envelope {
    position: relative;
    width: 240px;
    height: 0px;
    margin: 200px auto;
    
  }
  
  .icon-envelope {
    z-index: 1;
    position: relative;
    width: 240px;
    height: 45px;
    background-color: #40BAA5;
    box-shadow: 0px 5px 0px #36897F;
  }
  
  .icon-envelope::before {
    z-index: 1;
    position: absolute;
    display: block;
    content: '';
    top: -75px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 75px 0 0 120px;
    border-color: transparent transparent transparent #40BAA5;
  }
  
  .icon-envelope::after {
    z-index: 1;
    display: block;
    content: '';
    position: absolute;
    top: -75px;
    right: 0px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 0 75px 120px;
    border-color: transparent transparent #40BAA5 transparent;
  }
  
  .header {
    z-index: 2;
    position: absolute;
    top: -75px;
    display: block;
    box-shadow: 0px 0px 0px #36897F;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 120px 83px 120px;
    border-color: transparent transparent #36897F transparent;
    transform: rotate(180deg);
    transition: all 1s;
  }
  
  .header::before {
    display: block;
    content: '';
    position: absolute;
    top: 9px;
    left: -120px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 120px 75px 120px;
    border-color: transparent transparent #40BAA5 transparent;
  }
  
  .letter {
    z-index: 5;
    position: absolute;
    width: 150px;
    height: 0px;
    background: #FFF;
    left: 45px;
    bottom: 0px;
    opacity: 1;
    transition: all 2s;
    pointer-events:auto;
  }
  
  .letter::before {
    content: '';
    display: block;
    position: absolute;
    top: 20px;
    left: 25px;
    width: 100px;
    height: 6px;
    background-color: #FED350;
    transition: all 1.5s;
   opacity:0;
  }
  
  .letter::after {
    content: '';
    display: block;
    position: absolute;
    top: 30px;
    left: 25px;
    width: 100px;
    height: 6px;
    background-color: #FED350;
    transition: all 1.5s;
    opacity:0;
   
  }
  
  
  .envelope:hover .header {
    z-index: 0;
    top: -160px;
    transform: rotateY(180deg);
    border-width: 0 120px 75px 120px;
  }
  
  .envelope:hover .header::before {
    top: 0px;
    box-shadow: 0px 5px 0px #36897F;
    opacity:1;
  }
  
  .envelope:hover .letter {
    bottom: 0px;
    height: 100px;
    opacity: 1;
  }
  .Read-me-letter{
    position:absolute;
    top:43px;
    left:35px;
    opacity:0;
    transition:opacity 1.5s ease;
    border-radius:80%;
    pointer-events:auto;
    border:2px solid  #FED350;
    cursor:pointer;
    z-index:80;
    
  }
  .envelope:hover .Read-me-letter{
    opacity:1;
    
    
  }
  .envelope:hover .letter::before,
  .envelope:hover .letter::after {
    opacity: 1;
  }
  .letter-text-wrapper{
    position:fixed;
    overflow-y:auto;
    width:50%;
    height:450px;
    top:3rem;
    left:50%;
    transform: translateX(-50%) translateY(300px) scale(0.8);
    opacity:0;
    pointer-events:auto;
    background-color: orange;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius:10%;
    margin-top:1rem;
    margin-bottom:1rem;
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
  }
  @keyframes oppeningLetter{
    0%{
      opacity:0;
      transform:translateY(300px) translateX(-50%) scale(0.8);
    }
    65%{
      opacity:1;
      transform:translateY(80px) translateX(-50%) scale(0.8);
    }
    80%{
      opacity:1;
      transform:translateY(30px) translateX(-50%) scale(0.8);
    }
    100%{
      opacity:1;
      transform:translateY(0) translateX(-50%) scale(1.1);
    }
  
  }
  .letter-text-wrapper.show{
    animation:oppeningLetter 1.2s ease forwards;
    animation-delay:0.6s;
  }
  
  .letter-text-wrapper.show .butt-letter-closing{
    margin-top: 0.6rem;
    margin-left: 17.2rem;
  }
  @keyframes closingLetter {
    0% {
      opacity: 1;
      transform: translateY(0) translateX(-50%) scale(1.1);
    }
    50% {
      transform: translateY(30px) translateX(-50%) scale(0.95);
    }
    100% {
      opacity: 0;
      transform: translateY(300px) translateX(-50%) scale(0.8);
    }
  }
  .letter-text-wrapper.vanish{
    animation: closingLetter 0.6s ease forwards;
    transition-delay:0.4s;
  
  }
  .letter-img-incl{
    margin-top:0.4rem;
    height:40px;
    width:auto;
    margin-left:10px;
  }
  .letter-inlc-title{
    font-size: 40px !important;
    font-weight: bold;
    margin-top: -0.8rem;
    margin-left: 4.4rem;
  
  }
  
  
  /*Content of every category*/
  .main-incl-img {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: black;
    display: none;
    justify-content: center;
    align-items: center;
  
    
  }
  
  
  
  .diver-pic-wrapper {
    position: relative;
    width: 45%;
    aspect-ratio: 3 / 2;
    border-radius: 10%;
    background-color: black;
    margin-top:9rem;
    opacity:0;
    transform:translateY(-200px);
    transition:opacity 0.8s ease, transform 0.8s ease;
  }
  .diver-pic-wrapper.show{
    opacity:1;
    transform:translateY(0);
    transition-delay:0.3s;
  }
  
  .diver-pic-wrapper.vanish{
    opacity:0;
    transform:translateY(-200px);
  }
  
  
  .diver-pic {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10%;
    display: block;
    position: relative;
    z-index: 1;
  }
  
  /* Bullets */
  .bullet1-incl, .bullet2-incl, .bullet3-incl, .bullet4-incl, .bullet5-incl {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    z-index: 3;
    opacity:0;
    transform:translateY(-300px);
    transition:transform 0.9s ease,opacity 0.9s ease;
  }
  .bullet1-incl.show, .bullet2-incl.show, .bullet3-incl.show, .bullet4-incl.show, .bullet5-incl.show{
    opacity:1;
    transform:translateY(0);
  } 
  
  .bullet1-incl { top: 70%; left: -8%; transition-delay:0.7s;}
  .bullet2-incl { top: 5%;  left: -8%; transition-delay:1.60s;}
  .bullet3-incl { top: -5.7%; left: 46.4%; transition-delay:2.6s}
  .bullet4-incl { top: 5%;  left: 102%; transition-delay:3.6s;}
  .bullet5-incl { top: 70%; left: 102%; transition-delay:4.6s}
  
  
  
  
  
  /* Lines */
  .line-incl-1, .line-incl-2, .line-incl-3, .line-incl-4, .line-incl-5 {
    position: absolute;
    width: 3px;
    height: 40px;
    background-color: white;
    z-index: 1;
     opacity:0;
    transform:translateY(-300px);
    transition:transform 0.9s ease,opacity 0.9s ease;
  }
  .line-incl-1.show{transform:rotate(-30deg) translateY(0); opacity:1;}
   .line-incl-2.show{transform:rotate(-30deg) translateY(0); opacity:1;}
   .line-incl-3.show{transform: translateY(0); opacity:1;}
    .line-incl-4.show{transform:rotate(30deg) translateY(0); opacity:1;}
    .line-incl-5.show{transform:rotate(30deg) translateY(0); opacity:1;} 
  
  
  .line-incl-1 { top: 60.1%; left: -9.4%; transition-delay:0.8s;}
  .line-incl-2 { top: -5.1%; left: -9.6%;  transition-delay:1.70s;}
  .line-incl-3 { top: -16.2%; left: 48%;transition-delay:2.7s; }
  .line-incl-4 { top: -5.2%; left: 106.7%; transition-delay:3.7s; }
  .line-incl-5 { top: 61.3%; left: 106.6%; transition-delay:4.7s;}
  
  .incl-button-1,
  .incl-button-2,
  .incl-button-3,
  .incl-button-4,
  .incl-button-5{
  position:absolute;
  border-radius:100%;
  height:50px;
  width:50px;
  z-index:2;
   opacity:0;
    transform:translateY(-300px);
    transition:transform 0.9s ease,opacity 0.9s ease;
  }
  .incl-button-1.show,
  .incl-button-2.show,
  .incl-button-3.show,
  .incl-button-4.show,
  .incl-button-5.show{
     opacity:1;
    transform:translateY(0);
  }
  .incl-button-1.delay{
  transition-delay:0.9s;
  }
  .incl-button-2.delay{
  transition-delay:1.80s;
  }
  .incl-button-3.delay{
  transition-delay:2.8s;
  }
  .incl-button-4.delay{
  transition-delay:3.8s;
  }
  .incl-button-5.delay{
  transition-delay:4.8s;
  }
  .incl-button-1.show:hover,
  .incl-button-2.show:hover,
  .incl-button-3.show:hover,
  .incl-button-4.show:hover,
  .incl-button-5.show:hover{
    transform:scale(1.2);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3),
                0 2px 4px rgba(255, 255, 255, 0.2) inset;
  }
  .incl-button-1.show.hovering,
  .incl-button-2.show.hovering,
  .incl-button-3.show.hovering,
  .incl-button-4.show.hovering,
  .incl-button-5.show.hovering{
    transform:scale(1.2);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3),
                0 2px 4px rgba(255, 255, 255, 0.2) inset;
  }
  
  
  .incl-button-1{ top: 49.9%;left: -16.6%; }
  .incl-button-2{ top: -15.1%; left: -16.2%;}
  .incl-button-3{top: -25.3%; left: 44%;}
  .incl-button-4{ top: -15%; left: 105.8%;}
  .incl-button-5{ top: 53.1%; left: 107%;}
  
  .butt-inlc-img{
    object-fit:cover;
    border-radius:100%;
   height: 47.9px;
    width: 40.9px;
    z-index:2;
  }
  /* Αρχικό στυλ */
  .ref-incl1,
  .ref-incl2,
  .ref-incl3,
  .ref-incl4,
  .ref-incl5 {
    position: absolute;
    font-weight: bold;
    font-size: 22px !important;
    color: white;
    opacity: 0;
    transform: translateY(-300px);
    transition: transform 0.3s ease, opacity 0.9s ease;
  }
  
  /* Εμφάνιση */
  .ref-incl1.show,
  .ref-incl2.show,
  .ref-incl3.show,
  .ref-incl4.show,
  .ref-incl5.show {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1.1);
    z-index:100;
  }
  
  /* Delay μόνο για την εμφάνιση */
  .ref-incl1.delay { transition-delay: 1s; }
  .ref-incl2.delay { transition-delay: 1.9s; }
  .ref-incl3.delay { transition-delay: 2.9s; }
  .ref-incl4.delay { transition-delay: 3.9s; }
  .ref-incl5.delay { transition-delay: 4.9s; }
  
  /* Hover ελεύθερο από delay */
  .ref-incl1.show:hover,
  .ref-incl2.show:hover,
  .ref-incl3.show:hover,
  .ref-incl4.show:hover,
  .ref-incl5.show:hover {
    transform:  scale(1.25) translateX(15px);
      text-shadow:
    0 0 5px rgba(173, 216, 230, 0.8),
    0 0 15px rgba(173, 216, 230, 0.5);
    font-family:'Times New Roman', Times, serif;
  }
  .ref-incl1.show.hovering,
  .ref-incl2.show.hovering,
  .ref-incl3.show.hovering,
  .ref-incl4.show.hovering,
  .ref-incl5.show.hovering{
    transform:  scale(1.25) translateX(15px);
      text-shadow:
    0 0 5px rgba(173, 216, 230, 0.8),
    0 0 15px rgba(173, 216, 230, 0.5);
    font-family:'Times New Roman', Times, serif;
  }
  
  /* Θέσεις */
  .ref-incl1 { top: 46.1%; left: -54.2%; }
  .ref-incl2 { top: -19.3%; left: -56.2%; }
  .ref-incl3 { top: -33.3%; left: 54%; }
  .ref-incl4 { top: -17%; left: 115.8%; }
  .ref-incl5 { top: 53.1%; left: 118%; }
  
  
  .Incl-mini-text1,
  .Incl-mini-text2,
  .Incl-mini-text3,
  .Incl-mini-text4,
  .Incl-mini-text5{
    font-size:14px!important;
    position: absolute;
    color: white;
    width: 300px;
    line-height: 1.3;
    transition:transform 0.9s ease, opacity 0.9s ease;
    }
  .Incl-mini-text1{top:57.1%; left:-60.2%;transform:translateX(-300px); opacity:0; }
  .Incl-mini-text2{ top:8.9%; left:-60.2%;transform:translateX(-300px); opacity:0;}
  .Incl-mini-text3{top:-23.1%; left:54.2%;transform:translateY(-300px); opacity:0;}
  .Incl-mini-text4{top:4.9%; left:110.2%;transform:translateX(300px); opacity:0;}
  .Incl-mini-text5{top:74.1%; left:108.2%;transform:translateX(300px); opacity:0;}
  
  .Incl-mini-text1.show{opacity:1;transform:translateX(0);transition-delay:1.20s; }
  .Incl-mini-text2.show{opacity:1;transform:translateX(0);transition-delay:2.1s;}
  .Incl-mini-text3.show{opacity:1;transform:translateX(0);transition-delay:3.1s;}
  .Incl-mini-text4.show{opacity:1;transform:translateX(0); transition-delay:4.1s;}
  .Incl-mini-text5.show{opacity:1;transform:translateX(0); transition-delay:5.1s;}
  
  /*Wrapper of each category*/
  /*sidebar*/
  .inclusive-sidebar{
    opacity:1;
   
  }
  /*Tέλος sidebar*/
  
  .Categories-incl-Wrapper{
    position:relative;
    
  }
  
  .main-category-incl{
    background-color:#001028!important;
    border:2px solid #d4af37;
    position:absolute;
    top:0;
    justify-content:flex-start;
    flex-direction:column;
    align-items:flex-start;
    height:auto;
    width:85%;
    display:none;
    left:14.9rem;
  }
  
  
  
  
  .categorie-incl-titles-1,
  .categorie-incl-titles-2,
  .categorie-incl-titles-3,
  .categorie-incl-titles-4,
  .categorie-incl-titles-5{
    font-size:40px!important;
    font-family: "Unbounded", sans-serif;
    color:white;
    opacity:0;
    transform:translateY(-400px);
    transition:transform 0.7s ease, opacity 0.7s ease;
  }
  .categorie-incl-titles-1.show,
  .categorie-incl-titles-2.show,
  .categorie-incl-titles-3.show,
  .categorie-incl-titles-4.show,
  .categorie-incl-titles-5.show{
    transition-delay:0.4s;
    opacity:1;
    transform:translateY(0);
  }
  
  
  .categorie-incl-titles-1{margin-left:28.3rem;}
  .categorie-incl-titles-2{margin-left:16.3rem;}
  .categorie-incl-titles-3{margin-left:35.3rem;}
  .categorie-incl-titles-4{margin-left:28.3rem;}
  .categorie-incl-titles-5{margin-left:28.3rem;}
  
  
  .incl-line-l-1,
  .incl-line-l-2,
  .incl-line-l-3,
  .incl-line-l-4,
  .incl-line-l-5{
    width: 300px;
    height: 4px;
    background-color: #d4af37;
    margin-top: -35px;
    opacity:0;
    transform:translateX(-400px);
    transition:transform 0.7s ease, opacity 0.7s ease;
  }
  .incl-line-l-1.show,
  .incl-line-l-2.show,
  .incl-line-l-3.show,
  .incl-line-l-4.show,
  .incl-line-l-5.show{
     transition-delay:0.2s;
    opacity:1;
    transform:translateY(0);
  }
  
  
  .incl-line-l-1{ margin-left: 7.3rem;}
  .incl-line-l-2{ margin-left: 2.3rem; width:200px!important;}
  .incl-line-l-3{ margin-left: 3.3rem;}
  .incl-line-l-4{ margin-left: 7.3rem;}
  .incl-line-l-5{ margin-left: 7.3rem;}
  
  
  .incl-line-r-1,
  .incl-line-r-2,
  .incl-line-r-3,
  .incl-line-r-4,
  .incl-line-r-5{
    width: 300px;
    height: 4px;
    background-color: #d4af37;
   margin-top: -21.8px;
   opacity:0;
    transform:translateX(400px);
    transition:transform 0.7s ease, opacity 0.7s ease;
  
  }
  .incl-line-r-1.show,
  .incl-line-r-2.show,
  .incl-line-r-3.show,
  .incl-line-r-4.show,
  .incl-line-r-5.show{
     transition-delay:0.6s;
    opacity:1;
    transform:translateX(0);
  }
  
  .incl-line-r-1{margin-left: 48.9rem;}
  .incl-line-r-2{margin-left: 53.9rem; width:200px!important}
  .incl-line-r-3{margin-left: 52.9rem;}
  .incl-line-r-4{margin-left: 48.9rem;}
  .incl-line-r-5{margin-left: 48.9rem;}
  
  
  .second-title-guiding-1{
    width:auto;
    flex-wrap:wrap;
    font-size: 30px !important;
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
  margin-left:0.8rem;
  color:white;
  margin-top:3rem;
  font-weight:bold;
  }
  
  .text-of-incl-cat{
    margin-left:0.5rem;
    color:white;
    font-size: 20px!important;
    font-family:'Times New Roman', Times, serif;
    width:95%;
  }
  
  .butt-subcat {
   width: auto;
    height: 311px;
    padding: 0;
    border: 2px solid black;
    background: transparent;
    display: inline-block;
    margin-left: 2.5rem;
    border-radius: 87%;
    position:relative;
  }
  .butt-subcat:before{
  position:absolute;
  content:'Tap Me';
  font-size:25px!important;
  font-family:'Times New Roman', Times, serif;
  color:white;
  left:0rem;
  
  }
  
  
  
  .pulse-butt-incl{
  animation: pulse 1.5s ease-in-out infinite;
  transform-origin: center;
  border:none;
  }
  
  .img-title-incl {
    width: 99%;
    height: 289px;
    display: block;
    border-radius: 87%;
  }
  .pulse-butt-incl:hover{
  transform:scale(1.1);
  animation:none;
  }
  
  .subcategories-links-incl-wrapper-1,
  .subcategories-links-incl-wrapper-2,
  .subcategories-links-incl-wrapper-3,
  .subcategories-links-incl-wrapper-4,
  .subcategories-links-incl-wrapper-5{
    margin-left:30rem;
    margin-top:-15rem;
    opacity:0;
    transform:transalateY(-300px);
    transition:transform 0.5s ease, opacity 0.5s ease;
  }
  
  .subcategories-links-incl-wrapper-1.show,
  .subcategories-links-incl-wrapper-2.show,
  .subcategories-links-incl-wrapper-3.show,
  .subcategories-links-incl-wrapper-4.show,
  .subcategories-links-incl-wrapper-5.show{
    transform:translateY(0);
    opacity:1;
  }
  
  
  .links-sub-categ-incl{
     font-family:'Times New Roman', Times, serif;
     font-size:20px!important;
     color:white;
     text-decoration:none;
     display:block;
     margin-bottom:1rem;
     position:relative;
     transform:scale(0.9) translateX(-300px);
      text-shadow:none;
      transition:transform 0.1s ease, text-shadow 0.5s ease, opacity 0.1s ease;
      animation:pulselink 2s ease-in-out infinite;
      opacity:0;
  }
  .links-sub-categ-incl.show{
    opacity:1;
    transform:translateX(0);
  }
  
  
  .links-sub-categ-incl.show:hover{
  text-shadow:
    0 0 5px rgba(173, 216, 230, 0.8),
    0 0 15px rgba(173, 216, 230, 0.5);
    transform:translateX(10px) scale(1.05);
    
  }
  
  .links-sub-categ-incl::before {
    content: "➤"; 
    position: absolute;
    left: -53px;
    top: 3px;
    font-size: 20px!important;
    line-height: 1.5;
    color: #fff;
  }
  
  .subcateg-of-title{
    font-size: 30px !important;
    font-family: 'Times New Roman', Times, serif;
    font-weight: bold;
    color: white;
    margin-left: 0.5rem;
    opacity:0;
    transition:transform 0.5s ease, opacity 0.5s ease;
    transform:translateX(-300px);
  }
  .subcateg-of-title.show{
    opacity:1;
    transform:translateX(0);
    transition-delay:0.1s;
  }
  
  .hr-subcate-of-title{
     width: 98%;
     height: 4px;
     background-color: #d4af37;
      margin-top:-0.4rem;
      opacity:0;
    transition:transform 0.5s ease, opacity 0.5s ease;
    transform:translateX(-300px);
  }
  .hr-subcate-of-title.show{
    opacity:1;
    transform:translateX(0);
    transition-delay:0.2s;
  }
  
  
  
  
  .wrapper-text-subcat-incl-1{
   display:none;
    width:100%;
    height:auto;
    margin-top:1.5rem;
  }
  
  .wrapper-text-subcat-incl-2{
    display:none;
    width:100%;
    height:auto;
    margin-top:1.5rem;
  }
  .wrapper-text-subcat-incl-3{
    display:none;
    width:100%;
    height:auto;
    margin-top:1.5rem;
  }
  .wrapper-text-subcat-incl-4{
    display:none;
    width:100%;
    height:auto;
    margin-top:1.5rem;
  }
  .wrapper-text-subcat-incl-5{
    display:none;
    width:100%;
    height:auto;
    margin-top:1.5rem;
    transition:opacity 0.5s ease;
  }
  
  .wrapper-text-subcat-incl-1.show,
  .wrapper-text-subcat-incl-2.show,
  .wrapper-text-subcat-incl-3.show,
  .wrapper-text-subcat-incl-4.show,
  .wrapper-text-subcat-incl-5.show{
    display:block;
  }
  
  
  .second-title-guiding-2{
     width:auto;
    flex-wrap:wrap;
    font-size: 30px !important;
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
  margin-left:0.8rem;
  color:white;
  margin-top:3rem;
  font-weight:bold;
  }
  .sub-cat-text{
    font-size:14px!important;
    margin-left:0.4rem;
    color:white;
  width:100%;
  }
  .fade-on-scroll{
    opacity:0;
    transform:translateX(-200px);
    transition:transform 0.7s ease, opacity 0.7s ease;
  }
  
  .fade-on-scroll.show{
    opacity:1;
    transform:translateX(0);
    transition-delay:0.2s;
  }
  
  /*Sidebar*/
  
   .backgr-col-incl {
    display: none;
    position: relative;
    height: auto;
    overflow: visible;
  }
  
  /* ----- SIDEBAR CONTAINER ----- */
  .sidebar-wrapper-incl {
    position: sticky;
    top: 6rem;
    width: 100%;
    margin-left: 0;
    background-color: transparent;
    overflow: visible;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 1rem;
    box-sizing: border-box;
  }
  
  .sidebar-wrapper-incl.active-bg {
    background-color: #a27a40;
  }
  
  
  .links-sidebar {
    font-size: 15.8px !important;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    text-decoration: none;
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateX(-200px);
    transition: transform 0.7s ease, opacity 0.7s ease;
    color: white;
    font-weight: bold;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    width: 100%;
    line-height: 1.4;
    position:relative;
  }
  .links-sidebar:before{
    content:'➤';
    position:absolute;
     left: -19px;
    top: 3px;
    font-size: 12px!important;
    line-height: 1.5;
    color: #fff;
    
  }
  
  
  
  
  .links-sidebar.show {
    opacity: 1;
    transform: translateX(0) scale(0.9);
    text-shadow:2px 2px 4px rgba(0, 0, 0, 0.6);
  }
  
  .links-sidebar.activated {
    transform: translateX(20px) scale(1.05);
    transition: transform 0.4s ease;
    color: #fff;
    text-shadow: 2px 2px 8px rgba(255, 255, 255, 0.4);
    padding-left: 0.5rem;
    border-left: 3px solid white;
  }
  
  
  
  /*.scaling-effect {
    animation: scalePop 0.6s ease forwards;
  }*/
  
  /*Για νωρίτερη εμφάνιση του sidebar*/
  .sidebar-placeholder {
    width: 100%;
    max-width: 67%;
    height: auto;
    margin-bottom: 1rem;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    animation:pulse 3s ease-in-out infinite;
  }
  
  
  @keyframes scalePop {
    0% {
      transform: scale(0.9);
      opacity: 0.5;
    }
    100% {
      transform: scale(1.05);
      opacity: 1;
    }
  }
  
  
  @keyframes scalePop {
    0% {
      transform: scale(0.9);
      opacity: 0.5;
    }
    100% {
      transform: scale(1.05);
      opacity: 1;
    }
  }
  
  
  
  
  
  
  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.16); 
    }
    100% {
      transform: scale(1); 
    }
  }
  @keyframes pulselink{
    0%{
      transform:scale(0.9);
    }
    50%{
      transform:scale(1);
    }
    100%{
      transform:scale(0.9);
    }
  }
  
  
  
  
  @media (max-width: 768px) {
  
    /* ----------- ENVELOPE (δικό σου αρχικό) ----------- */
    .envelope-container {
      top: 18%;
      transform: translateX(-50%) scale(0.6);
    }
  
    .envelope {
      width: 160px;
      margin: 120px auto;
    }
  
    .icon-envelope {
      width: 160px;
      height: 35px;
    }
  
    .icon-envelope::before {
      top: -60px;
      border-width: 60px 0 0 80px;
      border-color: transparent transparent transparent #40BAA5;
    }
  
    .icon-envelope::after {
      top: -60px;
      border-width: 0 0 60px 80px;
      border-color: transparent transparent #40BAA5 transparent;
    }
  
    .header {
      top: -60px;
      border-width: 0 80px 70px 80px;
    }
  
    .header::before {
      top: 5px;
      left: -80px;
      border-width: 0 80px 60px 80px;
    }
  
    .letter {
      width: 100px;
      left: 30px;
    }
  
    .letter::before,
    .letter::after {
      width: 60px;
      left: 20px;
    }
  
    .Read-me-letter {
      top: 30px;
      left: 22px;
      font-size: 11px;
      padding: 3px 6px;
      width: 60px;
      height: 30px;
    }
  
    .letter-text-wrapper {
      width: 90%;
      height: auto;
      max-height: 80vh;
      font-size: 13px;
      padding: 1rem;
      border-radius: 8%;
    }
  
    .letter-inlc-title {
      font-size: 20px !important;
      text-align: center;
      margin-top: 4rem 0 auto !important;
    }
  
    .letter-img-incl {
      height: 30px;
      margin: 0 auto;
    }
  
    .img-inclusive-topr,
    .img-inclusive-topl {
      height: 50px;
      width: auto;
      top: 1rem;
    }
  
    .inclus-title span {
      font-size: 60px !important;
      letter-spacing: 12px;
      padding-top: 16rem;
    }
  
    .diver-pic-wrapper {
      width: 80%;
      margin-top: 5rem;
    }
  
    .incl-button-1,
    .incl-button-2,
    .incl-button-3,
    .incl-button-4,
    .incl-button-5 {
      width: 35px;
      height: 35px;
    }
  
    .butt-inlc-img {
      width: 100%;
      height: 100%;
    }
  
    .ref-incl1,
    .ref-incl2,
    .ref-incl3,
    .ref-incl4,
    .ref-incl5 {
      font-size: 14px !important;
      width: 150px;
      text-align: center;
      transform: translateX(-50%);
    }
  
    .ref-incl1 { top: 48%; left: 10%; }
    .ref-incl2 { top: 10%; left: 10%; }
    .ref-incl3 { top: -10%; left: 50%; }
    .ref-incl4 { top: 10%; left: 90%; }
    .ref-incl5 { top: 48%; left: 90%; }
  
    .Incl-mini-text1,
    .Incl-mini-text2,
    .Incl-mini-text3,
    .Incl-mini-text4,
    .Incl-mini-text5 {
      font-size: 11px !important;
      width: 200px;
      transform: translateX(-50%);
    }
  
    .Incl-mini-text1 { top: 56%; left: 10%; }
    .Incl-mini-text2 { top: 20%; left: 10%; }
    .Incl-mini-text3 { top: -3%; left: 50%; }
    .Incl-mini-text4 { top: 20%; left: 90%; }
    .Incl-mini-text5 { top: 65%; left: 90%; }
  
    /* ----------- INCLUSIVITY WRAPPERS ----------- */
  
    
  }
  
  
  /*--------PROJECT DESCRIPTION---------*/
  
  #double_title {
    top: 0rem;
  }
  
  #double_title h1 {
    font-size: 45px !important;
  }
  
  .intro-title-des{
    display:flex;
    position:absolute;
    left:3rem;
    top: 1rem;
    width:50%;
    height:50%;
    flex-direction:column;
  }
  /*Title 1*/
  .proj-t1{
    font-size: 40px !important;
   font-family: 'Montserrat', 'Arial Black', 'Impact', sans-serif;
  margin-bottom:1rem;
  opacity:0;
  transform:translateX(-300px);
  transition:opacity 0.5s ease, transform 0.5s ease;
  }
  .proj-t1.show{
    opacity:1;
    transform:translateX(0);
  }
  .proj-t1 span{
   opacity:0;
  transform:translateX(-300px);
  transition:opacity 0.5s ease, transform 0.5s ease; 
  }
  .proj-t1 span.show{
    opacity:1;
    transform:translateX(0);
  }
  .proj-t1 span.show:nth-child(1){transition-delay:0.2s;}
  .proj-t1 span.show:nth-child(2){transition-delay:0.3s;}
  .proj-t1 span.show:nth-child(3){transition-delay:0.4s;}
  .proj-t1 span.show:nth-child(4){transition-delay:0.5s;}
  .proj-t1 span.show:nth-child(5){transition-delay:0.6s;}
  .proj-t1 span.show:nth-child(6){transition-delay:0.7s;}
  .proj-t1 span.show:nth-child(7){transition-delay:0.8s;}
  .proj-t1 span.show:nth-child(8){transition-delay:0.9s;}
  .proj-t1 span.show:nth-child(9){transition-delay:1s;}
  .proj-t1 span.show:nth-child(10){transition-delay:1.1s;}
  .proj-t1 span.show:nth-child(11){transition-delay:1.2s;}
  .proj-t1 span.show:nth-child(12){transition-delay:1.3s;}
  .proj-t1 span.show:nth-child(13){transition-delay:1.4s;}
  .proj-t1 span.show:nth-child(14){transition-delay:1.5s;}
  
  /*Title 2*/
  .proj-t2{
    font-size: 50px !important;
   font-family: 'Montserrat', 'Arial Black', 'Impact', sans-serif;
  margin-bottom:1rem;
  margin-top: -2vh;
  
  opacity:0;
  transform:translateX(-300px);
  transition:opacity 0.5s ease, transform 0.5s ease;
  }
  .proj-t2.show{
    opacity:1;
    transform:translateX(0);
  }
  .proj-t2 span{
   opacity:0;
  transform:translateX(-300px);
  transition:opacity 0.5s ease, transform 0.5s ease; 
  }
  .proj-t2 span.show{
    opacity:1;
    transform:translateX(0);
  }
  .proj-t2 span.show:nth-child(1){transition-delay:0.9s;}
  .proj-t2 span.show:nth-child(2){transition-delay:1s;}
  .proj-t2 span.show:nth-child(3){transition-delay:1.1s;}
  .proj-t2 span.show:nth-child(4){transition-delay:1.2s;}
  .proj-t2 span.show:nth-child(5){transition-delay:1.3s;}
  .proj-t2 span.show:nth-child(6){transition-delay:1.4s;}
  .proj-t2 span.show:nth-child(7){transition-delay:1.5s;}
  .proj-t2 span.show:nth-child(8){transition-delay:1.6s;}
  .proj-t2 span.show:nth-child(9){transition-delay:1.7s;}
  .proj-t2 span.show:nth-child(10){transition-delay:1.8s;}
  .proj-t2 span.show:nth-child(11){transition-delay:1.9s;}
  
  .proj-t3{
    font-size: 1rem !important;
   font-family: 'Montserrat', 'Arial Black', 'Impact', sans-serif;
   margin-top: 1.5rem;
  margin-bottom:1rem;
  opacity:0;
  transform:translateX(-300px);
  transition:opacity 2.4s ease, transform 2.4s ease;
  }
  .proj-t3.show{
    opacity:1;
    transform:translateX(0);
  }
  
  /*img*/
  
  
  .descr-intro-img{
    height:auto;
    width:60%;
    position:absolute;
    left: 52rem;
    top: -12rem;
    transform:translateY(300px);
    opacity:0;
    transition:transform 0.8s ease, opacity 0.9s ease;
  }
  .descr-intro-img.show{
    animation: hue 8s ease-in-out infinite, pulse 2s linear infinite, drop-bounce 2.8s ease forwards;
    transition-delay:1.5s;
    opacity:1;
  }
  
  .scrolling-down-des {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: inline-block;
    position:absolute;
    top:28rem;
    left:46%;
    transform:translateX(-50%) translateY(-1000px);
    opacity:0;
    transition:transform 1s ease, opacity 1s ease;
    margin-bottom: -20vh;
  }
  
  .scrolling-down-des.show{
    transition-delay:2s;
    transform:translateX(-50%) translateY(0);
    opacity:1;
    animation:scrolling 2s ease infinite;
  }
  
  .scrolling-pic {
    width: 110px; 
    height: auto;
    position:relative;
    margin-bottom: -20vh;
  }
  .scrolling-down-des:after{
    content: 'Scroll down';
    color: black;
    font-size: 19px !important;
    font-weight: bold;
    position: absolute;
    top: 6rem;
    left: 0rem;
  }
  
  
  
  #Description {
    border: none !important;
    outline: none !important;
  }
  
  
  
  /*Main content description*/
  .Descript-main-content{
    height:auto;
    width:100%;
    border:2px solid yellow;
    margin-top:1rem;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
   
  }
  
  .first_title {
    margin-top: 1rem !important;
  }
  
  .main-cont-title-d{
   font-size: 28px !important;
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
  margin-top: 1rem;
  color:white;
    width: auto;
  }
  
  .fade-in-des-left{
    opacity:1;
    /* transform:translateX(-50px);
    transition:transform 0s ease, opacity 0s ease;
    overflow:hidden; */
  }
  .fade-in-des-left.show{
    opacity:1;
    /* transform:translateX(0); */
  
  }
  .fade-in-des-right{
    opacity:1;
    /* transform:translateX(100px);
    transition:transform 0s ease, opacity 0s ease; */
  }
  
  .fade-in-des-right.show{
     opacity:1;
    transform:translateX(0);
  }
  
  .descr-texts{
    color:#efe1d2;
    font-size: 16px ;
    line-height: 1.7; 
    letter-spacing: 0.2px; 
    margin-left: 0.6rem;
    width: 98%;
    margin-bottom:1rem;
  }
  .descr-mini-title{
    font-size: 25px !important;
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
    margin-top:2.6rem;
    margin-left:0.5rem;
    color:white;
    width: auto;
  }
  
  .title-wrapper {
    width: max-content;      /* shrink to the title’s width */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5vh;         
    text-align: center;     
  }
  
  /* fallback if you prefer super-wide support */
  @supports not (width: max-content) {
    .title-wrapper { display: table; margin: 0 auto; }
  }
  
  .line-descr { width: 100%; margin: .4rem 0 0; }  /* hr matches title-wrapper width */
  
  .subtitle-wrapper {
    width: max-content;      /* shrink to the title’s width */  
    margin-bottom: 1.5vh;  
  }
  
  /* fallback if you prefer super-wide support */
  @supports not (width: max-content) {
    .subtitle-wrapper { display: table; margin: 0 auto; }
  }
  
  .line-descr-mini { width: 100%; margin: .4rem 0 0; }  /* hr matches title-wrapper width */
  
  
  
  
  /*Βold Εμφάνιση λέξεων μου*/
  .bolding-w{
    font-weight:bold;
  }
  .line-descr{
    /* width: 45vw; */
    height: 0.5vh;
    background-color: #d4af37;
    margin-left: auto;
    margin-right: auto;
    margin-top: -0.8rem; 
  }
  .line-descr-mini{
    height: 0.5vh;
    background-color: #d4af37;
    margin-left:0.5rem; 
    margin-top:-0.8rem; 
  }
  
  .descr-sir-img{
    float: right;
    width: 180px;
    margin-left: 10rem;
    margin-bottom: 0.5rem;
    height:auto;
    animation:smoothrotation 1s ease infinite;
  }
  .chart-wrapper1{
    margin-top: -3.5rem !important;
    margin-bottom: 3.8rem !important;
    margin-left: 20rem !important;
    max-width:600px;
    max-height:300px;
  
  }
  .chart-wrapper2{
    margin-top: -3.5rem !important;
    margin-bottom: -3rem !important;
    margin-left: 22rem !important;
    max-width: 600px;
    overflow:visible;
    z-index:2;
  }
  .chart-title-info{
   text-align: center;
    font-size: 1.2rem !important;
    color: #cce7ff;
    margin-bottom: 2rem;
    margin-top: 5rem;
    margin-left: 4rem;
    font-family:'Palatino Linotype', 'Book Antiqua', Palatino, serif;
  }
  
  
  @keyframes scrolling{
    0%{
      transform:translateY(0);
    }
    50%{
      transform:translateY(20px);
  
    }
    100%{
      transform:translateY(0);
    }
  }
  
  @keyframes drop-bounce {
    0%   { transform: translateY(-300px); opacity: 0; }
    60%  { transform: translateY(30px); opacity: 1; }
    80%  { transform: translateY(-10px); }
    100% { transform: translateY(0); }
  }
  
  @keyframes hue {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
  }
  
  
  
  @keyframes smoothrotation {
    0%   { transform: rotate(0deg); }
    10%  { transform: rotate(36deg); }
    20%  { transform: rotate(72deg); }
    30%  { transform: rotate(108deg); }
    40%  { transform: rotate(144deg); }
    50%  { transform: rotate(180deg); }
    60%  { transform: rotate(216deg); }
    70%  { transform: rotate(252deg); }
    80%  { transform: rotate(288deg); }
    90%  { transform: rotate(324deg); }
    100% { transform: rotate(360deg); }
  }
  
  @media (max-width: 768px) {
  
    .intro-title-des {
      position: relative;
      left: 0;
      top: 0rem;
      width: 100%;
      height: auto;
      padding: 1rem;
      text-align: center;
      align-items: center;
    }
  
    .proj-t1,
    .proj-t2 {
      font-size: 32px !important;
      text-align: center;
    }
  
    .proj-t1 span,
    .proj-t2 span {
      display: inline-block;
      font-size: 28px !important;
    }
  
    .descr-intro-img {
      width: 80%;
      position: relative;
      left: auto;
      top: auto;
      margin: 2rem auto 0 auto;
      transform: translateY(300px);
      opacity: 0;
      transition: transform 0.8s ease, opacity 0.9s ease;
    }
  
    .descr-intro-img.show {
      animation: hue 8s ease-in-out infinite, pulse 2s linear infinite, drop-bounce 2.8s ease forwards;
      opacity: 1;
    }
  
    .scrolling-down-des {
      top: auto;
      bottom: 2rem;
      left: 50%;
      transform: translateX(-50%) translateY(0);
      opacity: 1;
      animation: scrolling 2s ease infinite;
    }
  
    .scrolling-down-des:after {
      font-size: 16px !important;
      top: 5rem;
    }
  
    /* .descr-texts {
      font-size: 20px !important;
      margin-left: 1rem;
      margin-right: 1rem;
      width: auto;
    } */
  
    /* .line-descr,
    .line-descr-mini {
      margin-left: 1rem;
      width: 1rem;
    } */
  
    .descr-sir-img {
      float: none;
      display: block;
      margin: 1rem auto;
      width: 120px;
      animation: smoothrotation 1s ease infinite;
    }
  
    .chart-wrapper1,
    .chart-wrapper2 {
      margin: 2rem auto !important;
      max-width: 100%;
      margin-left: 0 !important;
    }
  
    .chart-title-info {
      margin: 1rem auto;
      font-size: 1rem !important;
      text-align: center;
    }
  
    /* ✅ Κρατάμε το animation ενεργό */
    .fade-in-des-left,
    .fade-in-des-right {
      opacity: 1;
      /* transform: translateX(-50px); ή 100px για right
      transition: transform 0s ease, opacity 0s ease; */
    }
  
    .fade-in-des-left.show,
    .fade-in-des-right.show {
      opacity: 1;
      transform: translateX(0);
    }
  
  }
  
  
  /*HomePage*/
  
  .video-page{
    position:relative;
    height:100vh;
    width:100%;
    overflow:hidden;
  
  }
  .intro-vid{
    position:absolute;
    height:100%;
    width:100%;
    object-fit:cover;
     filter:brightness(.65); 
  }
  .video__content{
  
    position:relative; z-index:1; height:100%;
    display:flex;
    align-items:center;
    justify-content:start;
    margin-bottom:1rem;
    text-shadow:0 2px 8px rgba(0,0,0,.5);
    flex-direction:column;
  
  }
  
  
  .content-animative{
  
    position:absolute;
    height:auto;
    top:2rem;
    left:19vw;
    display: grid;           
   grid-template-columns:1fr;
   gap:0;
   align-items:start;/*κάθετη στοίχιση*/
   justify-items:center;
  
  }
  
  .content-animative img{
    width:auto;
    height:300px;
    margin-top:0;
    transform:translateY(-300px) translateX(-80px);
    opacity:0;
    
  }
  .content-animative img.show{
    animation:homepagecont 3.5s ease forwards; 
    animation-delay:0.4s;
  }
  
  .content-animative h1{
     font-size:70px!important;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
                 Arial, "Noto Sans", "Liberation Sans", sans-serif;
  margin-top:-2rem;
   margin-bottom:0;
  transform:translateY(-300px) translateX(-80px);
    opacity:0;
  }
  
  .content-animative h1.show{
      animation:homepagecont 3.5s ease forwards; 
  }
  .content-animative h1.show:first-of-type{
    animation-delay:0.2s;
   
  }
  .content-animative h1.show:last-of-type{
    animation-delay:0.6s;
    
  }
  
  @keyframes homepagecont{
  0% {
      opacity: 0;
      transform: translateY(-300px) translateX(-80px);
    }
    20% {
      opacity: 1;
      transform: translateY(0) translateX(0);
    }
    80% {
      opacity: 1;
      transform: translateY(0) translateX(0);
    }
    100% {
      opacity: 0;
      transform: translateY(-300px) translateX(-80px);
    }
  }
  .siren-img-h{
    position:absolute;
    top:50%;
    left:50%;
    
     
  
  }
  .siren-img-h img{
    width:auto;
    height:150px;
     transform: translate(300%, -50%) scale(1);
     opacity:0;
  }
  .siren-img-h img.show{
    animation:imghomepag 2s ease forwards;
    animation-delay:4.1s;
  }
  @keyframes imghomepag{
    0%{
      opacity:0;
       transform: translate(-50%, 300%) scale(1);
    }
    20%{
      opacity:1;
       transform: translate(-50%, -50%) scale(1);
    }
    40%{
   opacity:1;
       transform: translate(-50%, -50%) scale(1.7);
    }
    50%{
  transform: translate(-50%, -50%) scale(2.4);
   opacity:1;
    }
    70%{
      transform: translate(-50%, -50%) scale(2.9);
       opacity:1;
    }
    100%{
      transform: translate(-300%, -80%) scale(1);
       opacity:1;
    }
  }
  
  .hpage-title{
    margin-left:-2rem;
    margin-top:5rem;
  }
  
  .hpage-title span{
   font-size:170px!important;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
     Arial, "Noto Sans", "Liberation Sans", sans-serif;
   letter-spacing:0.5rem;
   opacity:0;
   transform:translateY(-200px);
   font-weight: bold;
    text-shadow: 0 4px 8px rgba(0,0,0,0.25);
    display:inline-block;
     transform-origin: center bottom;
     will-change:transform opacity;
  }
  
  
  .hpage-title span.show{
  animation:titlehomepage 1.3s ease forwards;
  }
  .hpage-title span.show:nth-child(1){
  animation-delay: 5.9s;
  
  }
  .hpage-title span.show:nth-child(2){
  animation-delay: 6s;
  
  }
  .hpage-title span.show:nth-child(3){
  animation-delay: 6.1s;
  
  }
  .hpage-title span.show:nth-child(4){
  animation-delay: 6.2s;
  
  }
  .hpage-title span.show:nth-child(5){
  animation-delay: 6.3s;
  
  }
  
  
  @keyframes titlehomepage{
  0%{
      opacity:0;
      transform: translateY(-200px) scale(0.6);   
    }
    40%{
      opacity:1;
      transform: translateY(-80px) scale(0.85);   
    }
    60%{
      opacity:1;
      transform: translateY(0) scale(1.05);      
    }
    78%{
      transform: translateY(-12px) scale(1.1);  
      opacity:1; 
    }
    100%{
      transform: translateY(0) scale(1);   
      opacity:1;      
    }
  }
  .mini-title-home{
    font-size:42px!important;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
     Arial, "Noto Sans", "Liberation Sans", sans-serif;
     opacity:0;
     transform:translateX(-200px);
     transition:transform 1.7s ease, opacity 0.9s ease;
     margin-top:-4rem;
     margin-left:-1rem;
  }
  .mini-title-home.show{
    opacity:1;
    transform:translateX(0);
    transition-delay:6.7s;
  
  }
  
  @keyframes slideInpic{
    0%   { transform: translateY(-160px); opacity: 0; }
    70%  { transform: translateY(10px);  opacity: 1; }  /* κατεβαίνει λίγο πιο κάτω από τον στόχο */
    85%  { transform: translateY(-5px);  opacity:1 ;       }  /* μικρή επιστροφή προς τα πάνω */
    100% { transform: translateY(0);     opacity:1;             }  /* σταθεροποίηση */
  }
  
  .scrolling-down-home{ 
    background:none; border:none; padding:0; margin:0; cursor:pointer;
    position:absolute; top:28rem; left:46%;
    opacity:0;
  animation: upandDoWn 1s cubic-bezier(.22,.61,.36,1) forwards;
    will-change: transform, opacity;
    animation-delay:7s;
  }
  .scrolling-down-home:after{
    content: 'Scroll down';
    color: black;
    font-size: 19px !important;
    font-weight: bold;
    position: absolute;
    top: 6rem;
    left: 0rem;
  }
  #Homepage-main-cont{
     /*width: min(1100px, 100% - 8rem);  */
    margin-inline: auto; 
    width:100%;
  }
  .Homapage-main{
    height:auto;
    width:100%;
    border:2px solid #d4af37;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    background-color:#001028;
    border-radius:12px;
    
    
  
  }
  
  .overvie-home-titl{
  margin-left:20rem;
   font-size: 48px !important;
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
  margin-top:1rem;
  font-family:bold;
  color:white;
    width: auto;
  }
  
  
  .text-home{
    color:#efe1d2;
    font-size: 16px!important ;
    line-height: 1.7; 
    letter-spacing: 0.2px; 
    padding-left:0.5rem;
    padding-right:0.5rem;
  }
  .overvie-home-mini-titl{
     font-size: 25px !important;
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
  margin-top:1rem;
  margin-left:15rem;
  color:white;
    width: auto;
  }
  .continents{
  position:absolute;
  top:12rem;
  width:300px;
  border-radius:30px;
  height:auto;
  left:1rem;
  border:2px solid yellow;
  display:flex;
  justify-content: flex-start;
    align-items: center;
  flex-direction:column;
  opacity:0;
  transform:translateX(-100px);
  transition:transform 1.5s ease, opacity 0.5 ease;
  }
  .continents.show{
    opacity:1;
    transform:translateX(0);
    transition-delay:0.2s;
  }
  
  
  /*Our Solution*/
  .scroll-to-cont{
    width:100%;
    height:auto;
  display:none;
  }
    
  .second-sroll-wrap{
    display:flex;              
    justify-content:center;
    align-items:center;
  }
  
  .scrolling-down-home-1{
    background: transparent;   
    border: none;
    padding: 0;
    display: inline-block;
    cursor: pointer;
    animation:upandDoWn 2s ease infinite;
    transform:translateY(0);
    opacity:1;
  }
  
  .scrolling-down-home-1 img.scrolling-pic{
    display: block;
    width: 100px;  
    height: auto;
  }
  
  .scrolling-down-home-1:before{
  content: 'Tap to continue';
    color: black;
    font-size: 21px !important;
    font-weight: bold;
    position: absolute;
    top: -3rem;
    left: 0rem;
    
  }
  
  
  
  
  
  @keyframes upandDoWn{
    0%   { transform: translateY(0); opacity: 1; }
    70%  { transform: translateY(10px);  opacity: 1; }  
    85%  { transform: translateY(-10px);  opacity:1 ;  }  
    100% { transform: translateY(0);     opacity:1;    } 
  }
  .content-after-scroll{
    display:none;
    height:1000px;
    width:100%;
  }
  
  /*scrolling-wrapper και scrolling περιεχόμενο*/
  .animation-wrapper-home{
  height: 100vh;           
    width: 100%;
    overflow-y: scroll;     
    scroll-snap-type: y mandatory; 
    overscroll-behavior: auto;
    margin-top:2rem;
    -webkit-overflow-scrolling: touch;
  
  }
  
  .PAGE1,
  .PAGE2{
  position: relative;
    width: 100%;
    height: 100vh;          
    scroll-snap-align: start;
    background-color:transparent;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top:2rem;
    display:flex;
    justify-content:center;
    align-items:flex-end;
  }
  
  .page1-scroll{
    overflow-y:auto;
    height:100%;
    width:100%;
    overscroll-behavior:auto;/*Είναι το wrapper που θέλω να είναι scrollable*/
    padding-top:6.5rem;
    box-sizing:border-box;/*Συνολικό width και height συναρτήση του γονέα,ώστε το padding να λειτουργεί με βάση αυτό το style και το border-box*/
    padding-left:5rem;
  }
  
  .page2-scroll{
    overflow:hidden;
    height:100%;
    width:100%;
    overscroll-behavior:auto;/*Είναι το wrapper που θέλω να είναι scrollable*/
    padding-top:6.5rem;
    box-sizing:border-box;/*Συνολικό width και height συναρτήση του γονέα,ώστε το padding να λειτουργεί με βάση αυτό το style και το border-box*/
    padding-left:5rem;
  }
  .page2-scroll.is-enabled{
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling: touch;
  }
  
  
  .page1-stage,
  .page2-stage{ position: relative; }
  
  
  .stage1-fixed,
  .stage2-fixed{
    position: sticky;
    top: 0;
    height: 100vh;     
    display: grid;      
    place-items: center;
  }
  .story-animation{
   position:relative;            
    width:min(1150px, 96%);      
    padding:2rem;
    min-height:80vh;             
    background:rgba(0,16,40,.85);
    color:#fff;
    border-radius:18px;
    overflow:hidden;              
    box-sizing:border-box;
    z-index:1;  
                    
  }
  .story-animation2{
   position:relative;            
    width:min(1150px, 96%);      
    padding:2rem;
    min-height:80vh;             
    background:rgba(0,16,40,.85);
    color:#fff;
    border-radius:18px;
    overflow:hidden;              
    box-sizing:border-box;
    z-index:1;  
    margin-top:3rem!important;   
  }
  
  .stage-track{
    height: 150vh;                   
  }
  
  .title-anim{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    position:absolute;
    top:0.2rem;
  
  }
  .gap-sol{
   display:inline-block;
    width:1.2rem; 
  }
  
  .plasmid-text{
    max-width: 280px;
    padding: 1rem;
    margin-left: 2rem;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 10px;
    font-size: 16px;
    line-height: 1.4;
    position:absolute;
    top: 3rem;
    left: 47rem;
    color:#efe1d2;
  }
  @keyframes fadeSliideIn {
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  .Si-mini-title{
    font-family:bold;font-size:25px!important;color:white;margin-bottom:0;
    position:absolute;
    top:-1rem;
    left:30rem;
  
  }
  
  
  .si-1,
  .si-2,
  .si-3,
  .si-4,
  .plasm,
  .arrow,
  .plasm-2,
  .plasm-3,
  .cancer-cell-1
  {
  position:absolute;
  height:150px;
  width:clamp(90px, 12vw, 180px);
  
  }
  .si-1{
  top: 2rem;
    left: 2rem;
  }
  
  .si-2{
  top: 4rem;
    left: 12rem;
  }
  .si-3{
  top: 22rem;
    left: 1rem;
  }
  .si-4{
  top: 21rem;
    left: 12rem;
  }
  .plasm{
  top: 21.5rem;
    left: 55rem;
  }
  .arrow{
  left: 32rem;
    top: 3rem;
  }
  .plasm-2{
  left: -1rem;
    top: 5rem;
  }
  .plasm-3{
   left: 10rem;
    top: 5rem;
  }
  .plasm-4{
     left: -1rem;
    top: 14rem;
      position:absolute;
  height:300px;
  width:clamp(90px, 12vw, 180px);
  }
  
  .cancer-cell-1{
   left: 58rem;
    top: 5rem;
  
  }
  
  .reveal{
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.9s ease, transform 2s ease;
  }
  .from-right{ transform: translateX(30px); }
  
  .reveal.r1{ transition-delay: 1s; }
  .reveal.r2{ transition-delay: 1.1s; }
  .reveal.r3{ transition-delay: 2s; }
  .reveal.r4{ transition-delay: 2.2s; }
  .reveal.r5{ transition-delay: 3.2s; }
  .reveal.r6{ transition-delay: 5.2s; }
  .reveal.r7{ transition-delay: 5.3s; }
  .reveal.r8{ transition-delay: 6s; }
  .reveal.r9{ transition-delay: 6.1s; }
  .reveal.r10{ transition-delay: 7s; }
  .reveal.r11{ transition-delay: 2.7s; }
  
  
  
  .reveal.show{
    opacity: 1;
    transform: none;
  }
  .targeting-t{
    position: absolute;
    font-family: bold;
    font-size: 20px !important;
    color: white;
    margin-bottom: 0;
    top: 12rem;
    left: 26rem;
  }
  .second-frame-text{
   color:#efe1d2;
   font-size:16px!important;
   position:absolute;
   top:1rem;
   left:1rem;
  }
  /*PAGE2*/
  .fade-in-des-right.d1{transition-delay:0s;}
  .fade-in-des-right.d2{  transition-delay:0s;}
  .fade-in-des-right.d3{transition-delay:0s;}
  
  .after-reveal{
    opacity:0;
    transform:translateY(50px);
    transition:transform 2s ease, opacity 0.9s ease;
  }
  .after-reveal.show{
    opacity:1;
    transform:translateY(0);
  }
  .lat{
    opacity:0;
    transform:translateX(50px);
    transition:transform 2s ease,opacity 0.9s ease;
  }
  .lat.show{
    opacity:1;
    transform:translateX(0);
  }
  
  .after-reveal-text{
     color:#efe1d2;
   font-size:16px!important;
   position:absolute;
  top: 11rem;
    left: 16rem;
  }
  
  .vesicle-layer    { 
    position: absolute;
     inset: 0; 
     pointer-events: none;
      z-index: 4; 
    left: -1rem;
    top: 14rem;
    }
    /* Βάση (όπως την έχεις) */
  .vesicle-dot{
    --size:120px; --h:55; --sat:91%; --lum:60%;
    position:relative; left:27rem; top:17.5rem;
    width:var(--size); height:var(--size); border-radius:50%;
    background:
      radial-gradient(55% 55% at 40% 35%,
        hsl(var(--h) var(--sat) 92%) 0%,
        hsl(var(--h) var(--sat) var(--lum)) 45%,
        hsl(var(--h) var(--sat) calc(var(--lum) - 10%)) 100%);
    box-shadow:
      0 0 0 8px hsl(var(--h) var(--sat) var(--lum) / .18),
      0 10px 22px rgba(0,0,0,.35);
    isolation:isolate;
  }
  .vesicle-dot.lat{
    animation-delay:1.2s;
  }
  .sirn-text{
    position:absolute;
    top:15rem;
  right:1rem;
  opacity:0;
  transform:translateY(-20px);
  font-size:22px!important;
  color:#efe1d2;
  transition:transform 2s ease,opacity 0.9s ease;
  }
  
  .sirn-text.show{
    opacity:1;
    transform:translateY(0);
    transition-delay:1.7s;
  
  }
  
  .vesicle-dot.cracked{
    transform: rotate(-2deg) scale(1.02);
    filter: saturate(.95) contrast(1.02);
    /* ελαφρύ εσωτερικό σκοτείνιασμα για πιο “γυάλινο” αποτέλεσμα */
    box-shadow:
      inset 0 10px 20px rgba(0,0,0,.18),
      0 0 0 10px hsl(var(--h) var(--sat) var(--lum) / .18),
      0 12px 28px rgba(0,0,0,.42);
    /* προαιρετικό “θαμπάδα” στην άκρη ραγίσματος */
    background:
      radial-gradient(55% 55% at 40% 35%,
        hsl(var(--h) var(--sat) 92%) 0%,
        hsl(var(--h) var(--sat) var(--lum)) 45%,
        hsl(var(--h) var(--sat) calc(var(--lum) - 10%)) 100%),
      conic-gradient(from -8deg at 56% 46%, transparent 0 47%,
        rgba(255,255,255,.28) 47.3% 48.7%, transparent 49% 100%);
  }
  
  /* Η ίδια η “ρωγμή” ως ζιγκ-ζαγκ πολυγωνικό μονοπάτι */
  .vesicle-dot.cracked::after{
    content:"";
    position:absolute; inset:-6% -6%; /* λίγο μεγαλύτερο καμβά για να μη κόβεται */
    background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.5));
    clip-path: polygon(
      52% 2%, 56% 6%, 50% 12%, 60% 18%, 48% 26%,
      62% 34%, 46% 42%, 62% 50%, 44% 58%,
      60% 66%, 46% 74%, 58% 82%, 50% 90%, 54% 98%,
      49% 100%, 45% 96%, 52% 88%, 40% 80%, 56% 70%,
      38% 60%, 54% 50%, 40% 40%, 55% 30%, 44% 20%,
      52% 12%, 48% 6%
    );
    filter:
      drop-shadow(0 0 2px rgba(0,0,0,.35))
      drop-shadow(0 2px 2px rgba(0,0,0,.35));
    pointer-events:none;
  }
  
  /* μικρά “θραύσματα” γύρω από τη ρωγμή (διακριτικά) */
  .vesicle-dot.cracked::before{
    content:"";
    position:absolute; inset:0;
    background:
      radial-gradient(8px 6px at 58% 22%, rgba(255,255,255,.55), transparent 60%),
      radial-gradient(7px 5px at 46% 46%, rgba(255,255,255,.4), transparent 60%),
      radial-gradient(6px 5px at 60% 74%, rgba(255,255,255,.45), transparent 60%);
    mix-blend-mode: screen;
    pointer-events:none;
  }
  
  .vesicle-dot::before{
    position:absolute;
    content:'➤Tap to see how';
    top:-3rem;
    left:0rem;
     color:#efe1d2;
     font-size:16px!important;
     text-decoration:underline;
    text-shadow:
    0 0 1px rgba(5,16,20,.85),
    0 0 8px rgba(212,175,55,.20);
    white-space: nowrap;     /* <-- δεν κάνει wrap */
    /* προαιρετικά, για έξτρα ασφάλεια: */
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
  }
  /* ===== Base design για μικρό siRNA (duplex με 3’ overhang) ===== */
  .small-si-1, .small-si-2, .small-si-3, .small-si-4, .small-si-5 {
    
    --w: 90px;                 
    --th: 6px;                
    --gap: 8px;               
    --over: 12px;             
    --rung: rgba(255,255,255,.75); 
    --hue: 150; --sat: 60%; --lum: 55%;  
  
    position: absolute;      
    width: var(--w);
    height: calc(var(--th) * 2 + var(--gap));
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
    will-change: transform;
    background:
      repeating-linear-gradient(
        90deg,
        var(--rung) 0 2px,
        transparent 2px 9px
      );
    background-position: 0 calc(50% - var(--th)/2);
    background-size: auto var(--th); 
    opacity:0;
    transform:translateX(-50px);
    transition:transform 2s ease,opacity 0.9s ease;
  
  }
  .small-si-1.show, .small-si-2.show, .small-si-3.show, .small-si-4.show, .small-si-5.show{
    opacity:1;
    transform:translateX(0);
  }
  
  
  @keyframes siTravel1-2 {
    0%   { opacity:1; transform: translateX(0); }
    75%  { opacity:1; transform: translateX(-300px); }  /* κύριο “ταξίδι” με ομαλό ease */
    92%  { opacity:1; transform: translateX(-420px); }  /* φρενάρισμα κοντά στην άκρη */
    100% { opacity:0; transform: translateX(-440px); }  /* ελαφρύ overshoot + fade */
  }
  @keyframes siTravel3-4-5 {
    0%   { opacity:1; transform: translateX(0); }
    75%  { opacity:1; transform: translateX(300px); }  /* κύριο “ταξίδι” με ομαλό ease */
    92%  { opacity:1; transform: translateX(420px); }  /* φρενάρισμα κοντά στην άκρη */
    100% { opacity:0; transform: translateX(550px); }  /* ελαφρύ overshoot + fade */
  }
  
  
  /* εφαρμογή */
  .small-si-1.leaving,
  .small-si-2.leaving{
    animation: siTravel1-2 1.8s cubic-bezier(.22,.75,.17,1) forwards!important;
    will-change: transform, opacity;
  }
  
  .small-si-3.leaving,
  .small-si-4.leaving,
  .small-si-5.leaving{
    animation: siTravel3-4-5 1.8s cubic-bezier(.22,.75,.17,1) forwards!important;
    will-change: transform, opacity;
  }
  
  
  
  .small-si-1::before, .small-si-2::before, .small-si-3::before, .small-si-4::before, .small-si-5::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: calc(var(--w) - var(--over));
    height: var(--th);
    border-radius: 999px;
    background: linear-gradient(
      180deg,
      hsl(var(--hue) var(--sat) calc(var(--lum) + 18%)),
      hsl(var(--hue) var(--sat) calc(var(--lum) - 12%))
    );
  }
  
  
  .small-si-1::after, .small-si-2::after, .small-si-3::after, .small-si-4::after, .small-si-5::after {
    content: "";
    position: absolute;
    left: var(--over);
    bottom: 0;
    width: calc(var(--w) - var(--over));
    height: var(--th);
    border-radius: 999px;
    background: linear-gradient(
      180deg,
      hsl(var(--hue) var(--sat) calc(var(--lum) + 18%)),
      hsl(var(--hue) var(--sat) calc(var(--lum) - 12%))
    );
  }
  
  /* Μικρό “πλεύσιμο” για ζωντάνια (προαιρετικό) */
  @keyframes siFloat { 
    0%,100% { transform: translateY(0) rotate(-1deg); }
    50%     { transform: translateY(-3px) rotate(1deg); }
  }
  .small-si-1, .small-si-2, .small-si-3, .small-si-4, .small-si-5 {
    animation: siFloat 3.6s ease-in-out infinite;
  }
  
  /* ===== Τοποθετήσεις + μικρές παραλλαγές χρώματος (προαιρετικά) ===== */
  /* Ρύθμισε top/left ανάλογα με το δικό σου layout (relative parent). */
  .small-si-1 { top: 20rem;  left: 19rem;  --hue: 152; }
  .small-si-2 { top: 17.6rem; left: 40rem; --hue: 158; }
  .small-si-3 { top: 24.2rem; left: 17rem;  --hue: 165; }
  .small-si-4 { top: 26rem;  left: 42rem; --hue: 170; }
  .small-si-5 { top: 26.6rem; left: 28.6rem;  --hue: 148; }
  
  /* Αν θέλεις πιο μικρά/μεγάλα siRNA, άλλαξε μόνο αυτό: */
  /* .small-si-1, .small-si-2, ... { --w: 72px; --th: 5px; --gap: 7px; --over: 10px; } */
  
  
  
  
  /* STAGE 2*/
  
  /*  CLL DATA STRIP (CSS) */
  .cll.sleek{
    --accent:#33c369;         /* primary green */
    --accent-2:#9fe6bb;       /* light green */
    --ink:#e9f1ff;            /* text on dark */
    --muted:#b9c5da;          /* secondary text */
    --sep:rgba(255,255,255,.15);   /* separators */
    --track:rgba(255,255,255,.18); /* bar background */
  }
  
  /* -------- Layout (map | content) -------- */
  .cll.sleek{ padding: clamp(24px, 5vw, 56px) 0; color: var(--ink); }
  .cll__grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(16px,3vw,40px); }
  .cll__map{ display:flex; align-items:flex-start; flex-direction:row; position:relative;}
  .cll__map:before{
    position:absolute;
    content:'Tap the Contintents';
    top:-2.8rem;
    left:6rem;
    font-size:20px; 
    color:#efe1d2;
    text-decoration:underline;
    text-shadow:
    0 0 1px rgba(5,16,20,.85),
    0 0 8px rgba(212,175,55,.20);
    transition: opacity .25s ease, transform .25s ease;
  }
  .cll__map.is-collapsed:before{
    opacity: 0;
    transform: translateY(-6px);
  }
  .map-caption{ opacity:.85; font-size:.95rem; }
  .cll__content h2{ margin:0 0 .6rem; letter-spacing:.3px; }
  .cll__content .text-home{ color:#efe1d2;
    font-size: 16px!important ;
    line-height: 1.7; 
    letter-spacing: 0.2px; 
    padding-left:0.5rem;
    padding-right:0.5rem; }
  
  /* -------- Reveal button + collapsible -------- */
  .cll-actions{ margin: 10px 0 12px; display:flex; justify-content:flex-start; }
  .revealbtn{
    display:inline-flex; align-items:center; gap:8px;
    background: linear-gradient(180deg, var(--accent), #1ea95b);
    color:#051014; font-weight:700; border:0; border-radius:999px;
    padding:10px 16px; cursor:pointer;
    box-shadow: 0 8px 22px rgba(51,195,105,.35);
  }
  .revealbtn .chev{
    width:10px; height:10px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform: rotate(45deg); transition: transform .25s ease;
  }
  .revealbtn[aria-expanded="true"] .chev{ transform: rotate(-135deg) translateY(1px); }
  
  .collapsible{
    overflow: clip;           /* ασφαλές για animations */
    height: 0;                /* κλειστό αρχικά */
    opacity: 0;
    transition: height .45s ease, opacity .3s ease;
    will-change: height, opacity;
  }
  
  /* -------- Clean strip (χωρίς κουτιά) -------- */
  .stat-strip{
    display:grid;
    grid-template-columns: minmax(180px,1fr) minmax(180px,1fr) 260px minmax(320px,1.2fr);
    align-items:center;
    gap:0;                               /* continuous strip */
    padding:14px 6px;
    border-top:1px solid var(--sep);
    border-bottom:1px solid var(--sep);
    background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    backdrop-filter:blur(4px);
    border-radius:14px;
    font-variant-numeric: tabular-nums;  /* aligned numbers */
  }
  
  /* λεπτοί κάθετοι διαχωριστές */
  .stat-strip>.stat{ padding:14px 16px; position:relative; }
  .stat-strip>.stat + .stat::before{
    content:"";
    position:absolute; left:0; top:14px; bottom:14px; width:1px;
    background:var(--sep);
  }
  
  /* ετικέτες */
  .stat__label{ margin-top:6px; font-size:.9rem; color:var(--muted); }
  
  /* KPI */
  .stat--kpi .stat__number{
    font-size:clamp(34px,4.6vw,48px);
    font-weight:800; color:#fff; letter-spacing:.3px;
  }
  
  /* -------- Donut -------- */
  .stat--donut{ display:grid; place-items:center; text-align:center; }
  .stat--donut .ring{
    --p:65;
    position:relative;
    width:132px; height:132px; border-radius:50%;
    background:
      radial-gradient(circle at center, #0b1425 58%, transparent 59%),
      conic-gradient(var(--accent) calc(var(--p)*1%), rgba(255,255,255,.16) 0);
    transition: background .7s ease;
  }
  .ring__center{
    position:absolute; inset:0;
    display:grid; place-items:center; gap:2px; pointer-events:none;
  }
  .ring__center strong{ color:#fff; font-size:1.15rem; }
  .ring__center span{ color:var(--muted); font-size:.85rem; }
  .legend{ margin-top:8px; display:flex; gap:12px; font-size:.82rem; color:var(--muted); }
  .legend .dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }
  .legend .dot.men{ background:var(--accent); }
  .legend .dot.women{ background:rgba(255,255,255,.6); }
  
  /* -------- Age bars -------- */
  .stat--age .bars{
    list-style:none; margin:6px 0 0; padding:0;
    display:grid; gap:8px;
  }
  .stat--age .bars li{
    display:grid; grid-template-columns:64px 1fr 42px; gap:10px; align-items:center;
  }
  .stat--age .bars .label{ color:var(--muted); font-size:.85rem; }
  .stat--age .bars .track{
    height:10px; border-radius:999px; background:var(--track);
    overflow:hidden; position:relative;
  }
  .stat--age .bars .track::after{
    content:""; position:absolute; inset:0;
    transform:scaleX(var(--v,0)); transform-origin:left center;
    background:linear-gradient(90deg, var(--accent), var(--accent-2));
    transition:transform .7s cubic-bezier(.2,.7,.2,1);
  }
  .stat--age .bars .val{ color:#fff; }
  
  /* -------- Toggle -------- */
  .toggle{
    margin-top:12px; display:inline-flex; gap:0; position:relative;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    border-radius:999px; padding:4px;
  }
  .toggle__rail{ position:absolute; inset:0; border-radius:999px; box-shadow: inset 0 1px rgba(255,255,255,.06); }
  .tbtn{
    position:relative; z-index:1; border:0; background:transparent; color:#e9f1ff;
    cursor:pointer; padding:8px 14px; border-radius:999px; font-weight:600; opacity:.85;
  }
  .tbtn.is-active{
    background:linear-gradient(180deg, var(--accent), #1ea95b);
    color:#051014; opacity:1; box-shadow:0 6px 18px rgba(51,195,105,.35);
  }
  
  /* Βοηθητική κλάση για προσβασιμότητα (κρυφή λεζάντα) */
  .sr-only{
    position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  
  /* Στυλ του figure/εικόνας και των pins */
  .worldmap{
    position:relative;
    width: min(580px, 100%);       
    aspect-ratio: 16 / 9;          
    margin-inline:auto;
    border-radius:15px;
    margin-top:-2rem;
  
  }
  .worldmap img{
    width:100%; height:100%; object-fit:contain; display:block;
    filter: drop-shadow(0 8px 24px rgba(0,0,0,.35));
    opacity:.95;
    
  }
  
  /* Pins */
  .worldmap .pin{
    position:absolute;
    left: var(--x); top: var(--y);
    translate: -50% -50%;
    width:14px; height:14px; border-radius:50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px rgba(51,195,105,.25), 0 6px 18px rgba(0,0,0,.28);
    transition: transform .2s ease, box-shadow .2s ease;
    z-index: 1; outline: none;
  }
  .worldmap .pin::after{
    content:""; position:absolute; inset:3px; border-radius:50%; background:#051014;
  }
  
  /* -- Το tooltip -- */
  .worldmap .pin::before{
    content: attr(data-label);
    position: absolute;
    left: 50%;
    bottom: 18px;                
    transform: translate(-50%, 4px) scale(.98);
    transform-origin: bottom center;
    background: rgba(11,20,37,.96);  
    color: #e9f1ff;
    font-size: .82rem;
    white-space: nowrap;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 8px 18px rgba(0,0,0,.35);
    pointer-events: none;
    opacity: 0;
    transition: opacity .16s ease, transform .16s ease;
  }
  
  /* Εμφάνιση στο hover ή σε keyboard focus */
  .worldmap .pin:hover::before,
  .worldmap .pin:focus-visible::before{
    opacity: 1;
    transform: translate(-50%, -2px) scale(1);
  }
  
  /* Ελαφρύ emphasis και στο ίδιο το pin όταν είναι hover/focus */
  .worldmap .pin:hover,
  .worldmap .pin:focus-visible{
    transform: translate(-50%,-50%) scale(1.12);
    box-shadow: 0 0 0 4px rgba(51,195,105,.35), 0 10px 26px rgba(0,0,0,.35);
  }
  
  /* Προαιρετικά: κατευθύνσεις αν θες tooltip αριστερά/δεξιά/κάτω για pins στην άκρη */
  .worldmap .pin[data-side="left"]::before{
    left: auto; right: calc(100% + 10px);
    bottom: 50%; transform: translate(0,50%) scale(.98);
  }
  .worldmap .pin[data-side="right"]::before{
    left: calc(100% + 10px); bottom: 50%; transform: translate(0,50%) scale(.98);
  }
  .worldmap .pin[data-side="bottom"]::before{
    top: 18px; bottom: auto; transform: translate(-50%, -4px) scale(.98);
  }
  
  
  .worldmap:not(:has(img[src]))::before{
    content:"Map of the world.png";
    position:absolute; inset:0; display:grid; place-items:center;
    color: var(--muted); border:1px dashed var(--sep); border-radius:12px;
    background: radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.05), transparent);
  }
  
  
  
  
  /* -------- Responsive -------- */
  @media (max-width:1100px){
    .cll__grid{ grid-template-columns:1fr; }
    .stat-strip{ grid-template-columns:1fr 1fr; row-gap:8px; }
    .stat-strip>.stat:nth-child(odd)::before{ display:none; }
  }
  @media (max-width:560px){
    .stat-strip{ grid-template-columns:1fr; }
    .stat-strip>.stat::before{ display:none; }
  }
  
  
  figcaption {
      text-align: center;
      margin-top: 1vh;
      margin-bottom: 4vh;
      color: white;
  }
  
  .picture {
    padding-top: 3vh;
    padding-bottom: 1vh;
  }
  
  /* Dropdown Button For Tables */
  
  .collapse-item {
    /* background-color: #fffaf3; */
    background-color: transparent;
    color: white;
    border: 0.3vh solid #ddd;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(230,144,227,0.5);
    margin: 0 0 3vh 0;
    overflow: hidden; /* keep it one box */
    width: 95%;
    margin-left: 1vw;
  }
  
  /* Header button pinned at top of the same box */
  .collapse-button {
    background: transparent;
    color: white;
    padding: 12px 48px 12px 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    text-align: left;
    width: 100%;
    position: relative;
    display: block;
  }
  
  /* Chevron */
  .collapse-button::after {
    content: '▼';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    transition: transform 0.3s ease;
  }
  
  .collapse-button.active::after {
    transform: translateY(-50%) rotate(180deg);
  }
  
  /* Inner content that expands */
  .collapse-inner {
    max-height: 0;
    padding: 0 0.5vw;          /* horizontal padding always */
    overflow: hidden;
    transition: max-height 0.35s ease, padding-top 0.25s ease, padding-bottom 0.25s ease;
  }
  
  /* When open, give vertical padding */
  .collapse-item.open .collapse-inner {
    padding-top: 1vh;
    padding-bottom: 6vh;
  }
  
  /* Optional wrapper you already had */
  .specdropdown {
    height: auto;
    margin-bottom: 5vh;
    border: 2px solid white;
    margin-top: 4vh !important;
  }
  
  .ref-collapse-item {
    background-color: #001028;
    color: white;
    border: 0.3vh solid #ddd;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(230,144,227,0.5);
    margin: 0 0 3vh 0;
    overflow: hidden; /* keep it one box */
    width: 95%;
    font-size: 50px;
    margin-left: 2vw;
    margin-top: -2vh;
    margin-bottom: 12vh;
  }
  
  /* Header button pinned at top of the same box */
  .ref-collapse-button {
    background: #001028;
    color: white;
    font-size: 26px !important;
    padding: 12px 48px 12px 16px;
    font-size: 18px;
    border: none;
    cursor: pointer;
    text-align: left;
    width: 100%;
    position: relative;
    display: block;
  }
  
  /* Chevron */
  .ref-collapse-button::after {
    content: '▼';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    transition: transform 0.3s ease;
  }
  
  .ref-collapse-button.active::after {
    transform: translateY(-50%) rotate(180deg);
  }
  
  /* Inner content that expands */
  .ref-collapse-inner {
    max-height: 0;
    padding: 0 0.5vw;          /* horizontal padding always */
    overflow: hidden;
    background: #001028;
    color: white;
    transition: max-height 0.35s ease, padding-top 0.25s ease, padding-bottom 0.25s ease;
  }
  
  /* When open, give vertical padding */
  .ref-collapse-item.open .ref-collapse-inner {
    padding-top: 1vh;
    padding-bottom: 8vh;
  }
  
  .ref-collapse-inner ol li {
    margin-bottom: 0.55vh;
  }
  
  /* Tables */
  
  td, th {
      border: 2px solid white;
      padding: 0.6vw;
      font-size: 0.5vw !important;
      color: white;
  }
  
  tr {
    border-bottom: 2px solid white !important;  
  }
  
  td {
    border-right: 2px solid white !important;
  }
  
  
    
  tr:nth-child(even){background-color: transparent;}
    
  /* tr:hover {background-color: #ddd;} */
    
  
  table {
      text-align: center;
      max-width: 26vw !important;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
  }
  
  #tableset td {
    font-size: clamp(8px, 1.5vw, 16px) !important;
  }
  
  #tableset2 td {
    font-size: clamp(8px, 1.5vw, 16px) !important;
  }
  
  .categ {
      background-color: transparent !important;
      color: white;
  }
  
  /* References Specific */
  
  .sref {
      display: inline-flex; 
      justify-content: center; 
      align-items: center;
      width: 2.2vh; 
      height: 2.2vh; 
      border-radius: 50%; 
      background-color: white; 
      color: black; 
      text-align: center; 
  }
  
  .sref a {
      color: inherit; /* Inherit text color from parent */
      text-decoration: none; /* Remove underline from the link */
      font-size: 0.8rem !important; 
  }