.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;
      } 
    }
    
    @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;
    }
  
    .picture2 {
      margin-top: 0 !important;
      margin-bottom: 0 !important;
    }
    
    /* 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; 
    }