.display_container{
    display:grid;
    grid-template-columns: repeat(10, 10%);
    grid-auto-rows: min-content;
 }
  
  .item-bg {
    width: 300px;
    height: 500px;
    position: absolute;
    top: 30px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 26px 6px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transition: all 0.3s;
    left: -30px;
    z-index: 12;
  }
  .item-bg.active {
    left: 0;
    top:0;
    opacity: 1;
  }
 
 *{
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     font-family: "Chakra Petch", sans-serif;
     font-weight: 300;
     font-size: 20px;
     font-style: normal;
 }
 html{
     scroll-behavior: smooth;
 }
 
 #navbarImg {
    position: absolute;
    cursor: pointer; 
    height: 80%;
    left: 10%;
    top: 10%;
 }
 
 .header-image {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1; /* Ensure it appears in front of the navbar */
    margin-top: 0; /* Adjust as needed to position the image */
 }
 
 /*Pozitia navbarului si background*/
 .navbar {
     background-image: linear-gradient(to right, rgba(219, 219, 201, 1)  0%, rgba(95, 89, 95, 1) 100%);
     height: 80px;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 1.2rem;
     position: sticky;
     top:0;
     z-index:999;
 }
 
 /*Pozitia Itemelor din navbar*/
 .navbarContainer {
     display: flex;
     justify-content: space-between;
     height: 80px;
     z-index: 1;
     width: 100%;
     max-width: 1300px;
     margin: 0 auto;
     padding: 0 50px;
 }
 
 #navbarImg{
   position: absolute;
   cursor: pointer; 
   height: 80%;
   left: 1%;
   top: 10%;
}
 
 /*Itemele din lista sa fie aliniate*/
 .navbarMenu {
     display: flex;
     align-items: center;
     list-style: none;
     text-align: center;
     position:absolute;
     right: 5vh;
 }
 
 
 .navbarItem{
     height: 80px;
 }
 
 .bebas-neue-regular {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
 
 /*Butoanele/Itemele sa fie aranjate*/
 .navbarLinks{
     font-family:'BebasNeueRegular';
     columns: #ffff;
     display: flex;
     align-items: center;
     justify-content: center;
     text-decoration: none;
     padding: 0 1rem;
     height: 100%;
     color: rgb(0, 0, 0);
     font-weight: 1000;
 }
 
 /*hoverul la iteme sa fie iesit in evidenta*/
 .navbarLinks:hover{
 color: #d7d0d0;
 transition: all ease 1s;
 }
 
 
 @media screen and (max-width:1150px){
     .navbarContainer{
         display: flex;
         justify-content: space-between;
         height: 80px;
         z-index: 1;
         width: 100%;
         max-width: 1300px;
         padding: 0;
     }
 
     .navbarMenu{
         display: grid;
         grid-template-columns: auto;
         margin: 0;
         width: 100%;
         position: absolute;
         top: -1000px;
         opacity: 0;
         transition: all 0.5s ease;
         height: 50vh;
         z-index: -1;
         background: #131313;
         right: 0%;
     }
 
     .navbarMenu.active{
         top: 100%;
         opacity: 1;
         transition: all 0.5 ease;
         z-index: 99;
         height: auto;
         font-size: 1.6rem;
     }
 
     #navbarLogo{
         padding-left: 25px;
     }
 
     .navbarToggle .bar{
         width: 25px;
         height: 3px;
         margin: 5px auto;
         transition: all 0.3s ease-in-out;
         background: #ffff;
     }
 
     .navbarItem{
         width: 100%;
     }
 
     .navbarLinks{
         text-align: center;
         padding: 2rem;
         width: 100%;
         display: table;
     }
 
     #mobile-menu {
         position: absolute;
         top: 20%;
         right: 5%;
         transform: translate(5%, 20%);
     }
 
     .navbarToggle .bar{
         display: block;
         cursor: pointer;
     }
 
     /*cand duci cursorul pe acele 3 linii sa devina incrucisate*/
     #mobile-menu.is-active .bar:nth-child(2){
         opacity: 0;
     }
 
     #mobile-menu.is-active .bar:nth-child(1){
         transform: translateY(8px) rotate(45deg);
     }
 
     #mobile-menu.is-active .bar:nth-child(3){
         transform: translateY(-8px) rotate(-45deg);
     }
 }
 
 #vanta{
     padding: 0;
     height: 100vh;
     width: auto;
     z-index: 1;
 }
 .homeAbout{
    grid-column: 3/9;
    grid-row-start: 1;
    background-color: #131313;
    display:flex;
    flex-wrap: wrap;
 }
 
 /*@keyframes aboutChange {
     0%   {background-color: aqua;}
     25%  {background-color: pink;}
     50%  {background-color: blue;}
     100% {background-color: fuchsia;}
   }*/
 
 .mainAbout{
     font-size: 25px;
     font-weight: 500;
     width: 100%;
     z-index:2;
     text-align:justify;
     background-size: 100%;
     -webkit-background-clip: text;
     -moz-background-clip: text;
     -webkit-text-fill-color: white;
     -moz-text-fill-color: white;
     position:relative;;
     word-spacing: 5px;
     line-height: 30px;
     /*  background-color: black;
   animation-name: aboutChange;
   animation-duration: ;*/
   
 }
 .mainAbout p{
    margin-bottom: 0px;
    word-spacing: 5px;
    line-height: 30px;
    font-size: 30px;
    font-weight: 500;
 }
 
 /*ECHIPA*/
 
 
 .echipaClass {
    grid-column: 2/10;
    background-color: #131313;
 }
 
 .pozeleEchipa  {
     width: 100%;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-evenly;
     position: relative;
 
 }
 
 .pozeleEchipa img {
     width: 100%; 
     height: auto; 
     margin-bottom: 10px;
     
 }
 
 .pozeleEchipa h1, .pozeleEchipa h2, .pozeleEchipa p {
    position:relative;
     text-align: center;
     font-size: 120%;
 }
 
 .poza{
    display:flex;
    flex-wrap: wrap;
    align-items: center;
     width: 220px;
     padding: 1em;
     margin-left:5%;
     margin-right:5%;
 }
 
 .line{
 margin:0 auto;
 margin-bottom: 2%;
 height:2px;
 background:rgb(0, 0, 0);
 opacity: 50%;
 width:70%;
 justify-self: center;
 border-bottom: 10%;
 }
 
 #inv{
    display: none;
 }
 .titluEchipa{
    font-family:"BebasNeueRegular";
    text-wrap:wrap;
    position:relative;
    padding-top: 9%;
     font-weight: 999;
    /*  font-size: 70px; */
     font-size: 300%;
     margin: 0 auto;
     display: flex;
     justify-content: center;
     background-size: 100%;
     -webkit-background-clip: text;
     -moz-background-clip: text;
     -webkit-text-fill-color: rgb(0, 0, 0);
     -moz-text-fill-color: rgb(0, 0, 0);
     /*text-decoration: underline #FF0080;*/
     padding-bottom: 1%;
 }
 
 #persoanaNume{
     /*background-color: aqua;
     -webkit-background-clip: text;
     -moz-background-clip: text;
     -webkit-text-fill-color: transparent;
     -moz-text-fill-color:transparent;
     -webkit-text-stroke: 1px aqua;*/
     font-family:'BebasNeueRegular';
     color: rgb(0, 0, 0);
     font-weight: 900;
     margin:0 auto;
 }
 
 #persoanaRol{
    font-family:'Palentino Linotype';
    color:rgb(0, 0, 0);
    margin:0 auto;
     position: relative;
     top: 1%;
 }
 
 #email{
    margin:0 auto;
     position: relative;
     top: 2%;
     font-size: 80%;
     text-align: center;
 }
 
 
 
  
  @keyframes glitch-it {
     0% {
        transform: translate(0);
     }
     20% {
        transform: translate(-2px, 2px);
     }
     40% {
        transform: translate(-2px, -2px);
     }
     60% {
        transform: translate(2px, 2px);
     }
     80% {
        transform: translate(2px, -2px);
     }
     to {
        transform: translate(0);
     }
  }
 
 
  
  @keyframes noise-before {
     0% {
        clip: rect(61px, 9999px, 52px, 0);
     }
     5% {
        clip: rect(33px, 9999px, 144px, 0);
     }
     10% {
        clip: rect(121px, 9999px, 115px, 0);
     }
     15% {
        clip: rect(144px, 9999px, 162px, 0);
     }
     20% {
        clip: rect(62px, 9999px, 180px, 0);
     }
     25% {
        clip: rect(34px, 9999px, 42px, 0);
     }
     30% {
        clip: rect(147px, 9999px, 179px, 0);
     }
     35% {
        clip: rect(99px, 9999px, 63px, 0);
     }
     40% {
        clip: rect(188px, 9999px, 122px, 0);
     }
     45% {
        clip: rect(154px, 9999px, 14px, 0);
     }
     50% {
        clip: rect(63px, 9999px, 37px, 0);
     }
     55% {
        clip: rect(161px, 9999px, 147px, 0);
     }
     60% {
        clip: rect(109px, 9999px, 175px, 0);
     }
     65% {
        clip: rect(157px, 9999px, 88px, 0);
     }
     70% {
        clip: rect(173px, 9999px, 131px, 0);
     }
     75% {
        clip: rect(62px, 9999px, 70px, 0);
     }
     80% {
        clip: rect(24px, 9999px, 153px, 0);
     }
     85% {
        clip: rect(138px, 9999px, 40px, 0);
     }
     90% {
        clip: rect(79px, 9999px, 136px, 0);
     }
     95% {
        clip: rect(25px, 9999px, 34px, 0);
     }
     100% {
        clip: rect(173px, 9999px, 166px, 0);
     }
  }
  
  @keyframes noise-after {
     0% {
        clip: rect(26px, 9999px, 33px, 0);
     }
     5% {
        clip: rect(140px, 9999px, 198px, 0);
     }
     10% {
        clip: rect(184px, 9999px, 89px, 0);
     }
     15% {
        clip: rect(121px, 9999px, 6px, 0);
     }
     20% {
        clip: rect(181px, 9999px, 99px, 0);
     }
     25% {
        clip: rect(154px, 9999px, 133px, 0);
     }
     30% {
        clip: rect(134px, 9999px, 169px, 0);
     }
     35% {
        clip: rect(26px, 9999px, 187px, 0);
     }
     40% {
        clip: rect(147px, 9999px, 137px, 0);
     }
     45% {
        clip: rect(31px, 9999px, 52px, 0);
     }
     50% {
        clip: rect(191px, 9999px, 109px, 0);
     }
     55% {
        clip: rect(74px, 9999px, 54px, 0);
     }
     60% {
        clip: rect(145px, 9999px, 75px, 0);
     }
     65% {
        clip: rect(153px, 9999px, 198px, 0);
     }
     70% {
        clip: rect(99px, 9999px, 136px, 0);
     }
     75% {
        clip: rect(118px, 9999px, 192px, 0);
     }
     80% {
        clip: rect(1px, 9999px, 83px, 0);
     }
     85% {
        clip: rect(145px, 9999px, 98px, 0);
     }
     90% {
        clip: rect(121px, 9999px, 154px, 0);
     }
     95% {
        clip: rect(156px, 9999px, 44px, 0);
     }
     100% {
        clip: rect(67px, 9999px, 122px, 0);
     }
  }
  
  
  .glitch {
     position: relative;
     font-size: 200px;
     font-weight: bold;
     font-family: "Chakra Petch" sans-serif,
     monospace;
     color: #FFFFFF;
     letter-spacing: 3px;
     animation: shift 4s ease-in-out infinite alternate;
     transform: skewX(0deg);
     z-index: 1;
  }
  
  @keyframes shift {
     0%, 40%, 44%, 58%, 61%, 65%, 69%, 73%, 100% {
        transform: skewX(0deg);
     }
     41% {
        transform: skewX(10deg);
     }
     42% {
        transform: skewX(-10deg);
     }
     59% {
        transform: skewX(35deg) skewY(10deg);
     }
     60% {
        transform: skewX(-35deg) skewY(-10deg);
     }
     63% {
        transform: skewX(10deg) skewY(-5deg);
     }
     70% {
        transform: skewX(-30deg) skewY(-20deg);
     }
     71% {
        transform: skewX(10deg) skewY(-10deg);
     }
  }
  
 
  @media screen and (max-width:750px){
     .glitch{
         font-size: 100px;
     }
  }
 
 
 .parteneriClass{
    grid-column: 3/9;
 }
 
 .parteneriClass {
    text-align: center;
    margin-bottom: 30%;
 }
 
 
 
 #Haufe{
    width: 40%;
    height: auto;
 }
 .parteneriHaufe {
    margin-bottom: 5%;
    margin-top: 5%;
    position: relative;
    width: 100%;
    height: auto;
 }
 
 .parteneriLogo {
    float: left;
    padding: 1rem;
    width: 50%;
 }
 
 .parteneriLogo img {
    width: 30%;
    height: auto;
    margin: auto;
 }
 
 #gdsc{
    height: 50%;
    width: auto;
 }
 
 
 .contactLogo img{
    width: 50%;
    height: auto;
 }
 
 .contactLogo {
    float: left;
    width: 30%;
 }
 
 
 
 
 .display_container {
    display: grid;
    grid-template-columns: repeat(10, 10%);
    grid-auto-rows: min-content;
    width: 100%;
    min-height: 100vh; /* Ensure it takes the full height */
 }
 
 
 /*FOOTER*/
 
 .footerBackground{
   grid-column: 1/end;
   background-color: #272525;
   position:relative
}

.div.footer{
   background-color: #222222;
   position:relative
 }
 
 div.container-footer {
   display:flex;
   flex-wrap: wrap;
   justify-content: center;
   padding: 40px;
 }

 .OSUT_logo{
   width:200px;
   height:200px;
   margin-right: 10%;
   margin-top: 0px;
 }
 div.footer-column {
   box-sizing: border-box;
   padding-left: 10px;
   padding-right: 10px;
   position: relative;
   margin-left: 5%;
 }
 
 
 h3.footer-failory-name {
   box-sizing: border-box;
   color: #FFFFFF;
   display: block;
   font-family: "Chakra Petch", sans-serif;
   font-size: 20px;
   font-weight: 900;
   line-height: 1.1em;
   margin-bottom: 10px;
   margin-left: 10px;
   margin-top: 24px;
 }
 
 p.footer-description-failory {
   box-sizing: border-box;
   color: rgba(255, 255, 255, 0.8);
   display: block;
   font-family: "Chakra Petch", sans-serif;
   font-size: 17px;
   font-weight: 300;
   letter-spacing: .5px;
   line-height: 1.5em;
   margin-bottom: 16px;
   margin-top: 15px;
 }
 
 
 h3.footer-titles {
   box-sizing: border-box;
   color: #FFFFFF;
   display: block;
   font-family: "Chakra Petch", sans-serif;
   font-size: 20px;
   font-weight: 900;
   line-height: 1.1em;
   margin-bottom: 0;
   margin-left: 0;
   margin-top: 24px;
 }
 
 p.footer-links {
   box-sizing: border-box;
   color: rgba(255, 255, 255, 0.8);
   display: block;
   font-family: "Chakra Petch", sans-serif;
   font-size: 17px;
   font-weight: 300;
   letter-spacing: .5px;
   line-height: 1.8em;
   margin-bottom: 16px;
   margin-top: 2px;
 }
 
 a {
   background-color: transparent;
   box-sizing: border-box;
   color: #FFFFFF;
   font-family: "Chakra Petch", sans-serif;
   font-size: 17px;
   font-weight: 400;
   line-height: 1.2em;
   text-decoration: none;
 }
 
 a:active {
   outline: 0;
 }
 
 a:hover {
   outline: 0;
 }
 
 span.footer-link {
   box-sizing: border-box;
   color: rgba(255, 255, 255, 0.8);
   font-weight: 300;
 }
 
 span.footer-link:hover {
   color: #FFFFFF;
   font-weight: 400;
 }
 
 a.footer-social-network-icons.w-inline-block {
   background-color: transparent;
   box-sizing: border-box;
   color: #FFFFFF;
   display: inline-block;
   font-family: "Chakra Petch", sans-serif;
   font-size: 20px;
   font-weight: 400;
   line-height: 1.2em;
   margin-right: 8px;
   margin-top: 10px;
   max-width: 100%;
   opacity: .8;
   text-decoration: none;
 }

 a.footer-social-network-icons.w-inline-block2 {
   background-color: transparent;
   box-sizing: border-box;
   color: #FFFFFF;
   display: flex;
   font-family: "Chakra Petch", sans-serif;
   font-size: 20px;
   font-weight: 400;
   line-height: 1.2em;
   margin-right: 8px;
   margin-top: 0px;
   max-width: 100%;
   opacity: .8;
   text-decoration: none;
   margin-bottom: -17px;
 }
 
 a.footer-social-network-icons.w-inline-block:active {
   outline: 0;
 }
 
 a.footer-social-network-icons.w-inline-block:hover {
   opacity: 1;
   outline: 0;
 }

 
 p.footer-description {
   box-sizing: border-box;
   color: rgba(255, 255, 255, 0.8);
   display: block;
   font-family: "Chakra Petch", sans-serif;
   font-size: 17px;
   font-weight: 300;
   letter-spacing: .5px;
   line-height: 1.5em;
   margin-bottom: 16px;
   margin-top: 15px;
 }
 
 strong.link-email-footer {
   box-sizing: border-box;
   font-weight: 700;
 }

 .footer-social-network-icons.w-inline-block2 {
   display: flex;
   align-items: center;
 }
 
 .phone-number {
   margin-left: 5px;
   color: rgba(255, 255, 255, 0.8);
   font-size: 17px;
   margin-top: 6px;
 }
 
  
  /*BACKGROUND*/
  .backgroundMain {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }
  .backgroundMain:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .backgroundMain img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
  }
 
  #pozaE{
    border-radius: 50%;
  }
 
 .side-decoration{
    width:100%;
    height:auto;
    opacity:60%;
    z-index: 1;
 }
 .side-decoration.right{
    grid-column: 7/15;
    grid-row-start: 1;
 }
 .side-decoration.left{
    grid-column: 1/5;
    grid-row-start: 1;
 }
 .side-decoration.right2{
    grid-column: 7/15;
    grid-row-start: 3;
 }
 .side-decoration.left2{
    grid-column: 1/5;
    grid-row-start: 3;
 }
 .side-decoration.bottom{
    grid-column: 1/20;
 }
 
  @media only screen and (max-width:500px){
    .display_container{
       grid-template-columns: 2% 2% repeat(6,15%) 2% 2%;
       text-align: center;
    }
    #navbarImg{
       left:2%;
       top:20%;
       width:50%;
       height:auto;
    }
    .side-decoration{
       height: 0;
       width: 0;
       overflow: hidden;
    }
    .options{
       min-width:40px;
    }
  }
  #focus_button{
    color:white;
    margin-top: 10%;
    margin-bottom:100px;
  }
 
 
 
 
  
 
 
 .data_subtext{
    color:#fff;
    font-size:40px;
    font-weight: bold;
 }
 
 
 
 .column {
    float: left;
    width: 25%;
    padding: 20px;
    background-color: transparent;
  }
 
  .row{
    background-color: transparent;
    margin-top: 30px;
  }
  
  .display_container{
    display:grid;
    grid-template-columns: repeat(10, 10%);
    grid-auto-rows: min-content;
 }
  
  .item-bg {
    width: 300px;
    height: 500px;
    position: absolute;
    top: 30px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 26px 6px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transition: all 0.3s;
    left: -30px;
    z-index: 12;
  }
  .item-bg.active {
    left: 0;
    top:0;
    opacity: 1;
  }
 
 *{
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     font-family: "Chakra Petch", sans-serif;
     font-weight: 300;
     font-size: 20px;
     font-style: normal;
 }
 html{
     scroll-behavior: smooth;
 }
 
 #navbarImg {
    position: absolute;
    cursor: pointer; 
    height: 80%;
    left: 10%;
    top: 10%;
 }
 
 .header-image {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1; /* Ensure it appears in front of the navbar */
    margin-top: 0; /* Adjust as needed to position the image */
 }
 
 /*Pozitia navbarului si background*/
 .navbar {
     background-image: linear-gradient(to right, rgba(219, 219, 201, 1)  0%, rgba(95, 89, 95, 1) 100%);
     height: 80px;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 1.2rem;
     position: sticky;
     top:0;
     z-index:999;
 }
 
 /*Pozitia Itemelor din navbar*/
 .navbarContainer {
     display: flex;
     justify-content: space-between;
     height: 80px;
     z-index: 1;
     width: 100%;
     max-width: 1300px;
     margin: 0 auto;
     padding: 0 50px;
 }
 
 #navbarImg{
   position: absolute;
   cursor: pointer; 
   height: 80%;
   left: 1%;
   top: 10%;
}
 
 /*Itemele din lista sa fie aliniate*/
 .navbarMenu {
     display: flex;
     align-items: center;
     list-style: none;
     text-align: center;
     position:absolute;
     right: 5vh;
 }
 
 
 .navbarItem{
     height: 80px;
 }
 
 .bebas-neue-regular {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
 
 /*Butoanele/Itemele sa fie aranjate*/
 .navbarLinks{
     font-family:'BebasNeueRegular';
     columns: #ffff;
     display: flex;
     align-items: center;
     justify-content: center;
     text-decoration: none;
     padding: 0 1rem;
     height: 100%;
     color: rgb(0, 0, 0);
     font-weight: 1000;
 }
 
 /*hoverul la iteme sa fie iesit in evidenta*/
 .navbarLinks:hover{
 color: #d7d0d0;
 transition: all ease 1s;
 }
 
 
 @media screen and (max-width:1150px){
     .navbarContainer{
         display: flex;
         justify-content: space-between;
         height: 80px;
         z-index: 1;
         width: 100%;
         max-width: 1300px;
         padding: 0;
     }
 
     .navbarMenu{
         display: grid;
         grid-template-columns: auto;
         margin: 0;
         width: 100%;
         position: absolute;
         top: -1000px;
         opacity: 0;
         transition: all 0.5s ease;
         height: 50vh;
         z-index: -1;
         background: #131313;
         right: 0%;
     }
 
     .navbarMenu.active{
         top: 100%;
         opacity: 1;
         transition: all 0.5 ease;
         z-index: 99;
         height: auto;
         font-size: 1.6rem;
     }
 
     #navbarLogo{
         padding-left: 25px;
     }
 
     .navbarToggle .bar{
         width: 25px;
         height: 3px;
         margin: 5px auto;
         transition: all 0.3s ease-in-out;
         background: #ffff;
     }
 
     .navbarItem{
         width: 100%;
     }
 
     .navbarLinks{
         text-align: center;
         padding: 2rem;
         width: 100%;
         display: table;
     }
 
     #mobile-menu {
         position: absolute;
         top: 20%;
         right: 5%;
         transform: translate(5%, 20%);
     }
 
     .navbarToggle .bar{
         display: block;
         cursor: pointer;
     }
 
     /*cand duci cursorul pe acele 3 linii sa devina incrucisate*/
     #mobile-menu.is-active .bar:nth-child(2){
         opacity: 0;
     }
 
     #mobile-menu.is-active .bar:nth-child(1){
         transform: translateY(8px) rotate(45deg);
     }
 
     #mobile-menu.is-active .bar:nth-child(3){
         transform: translateY(-8px) rotate(-45deg);
     }
 }
 
 #vanta{
     padding: 0;
     height: 100vh;
     width: auto;
     z-index: 1;
 }
 .homeAbout{
    grid-column: 3/9;
    grid-row-start: 1;
    background-color: #131313;
    display:flex;
    flex-wrap: wrap;
 }
 
 /*@keyframes aboutChange {
     0%   {background-color: aqua;}
     25%  {background-color: pink;}
     50%  {background-color: blue;}
     100% {background-color: fuchsia;}
   }*/
 
 .mainAbout{
     font-size: 25px;
     font-weight: 500;
     width: 100%;
     z-index:2;
     text-align:justify;
     background-size: 100%;
     -webkit-background-clip: text;
     -moz-background-clip: text;
     -webkit-text-fill-color: white;
     -moz-text-fill-color: white;
     position:relative;;
     word-spacing: 5px;
     line-height: 30px;
     /*  background-color: black;
   animation-name: aboutChange;
   animation-duration: ;*/
   
 }
 .mainAbout p{
    margin-bottom: 0px;
    word-spacing: 5px;
    line-height: 30px;
    font-size: 30px;
    font-weight: 500;
 }
 
 /*ECHIPA*/
 
 
 .echipaClass {
    grid-column: 2/10;
    background-color:transparent;
 }
 
 .pozeleEchipa  {
     width: 100%;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-evenly;
     position: relative;
 
 }
 
 .pozeleEchipa img {
     width: 100%; 
     height: auto; 
     margin-bottom: 10px;
     
 }
 
 .pozeleEchipa h1, .pozeleEchipa h2, .pozeleEchipa p {
    position:relative;
     text-align: center;
     font-size: 120%;
 }
 
 .poza{
    display:flex;
    flex-wrap: wrap;
    align-items: center;
     width: 220px;
     padding: 1em;
     margin-left:5%;
     margin-right:5%;
 }
 
 .line{
 margin:0 auto;
 margin-bottom: 2%;
 height:2px;
 background:rgb(0, 0, 0);
 opacity: 50%;
 width:70%;
 justify-self: center;
 border-bottom: 10%;
 }
 
 #inv{
    display: none;
 }
 .titluEchipa{
    font-family:"BebasNeueRegular";
    text-wrap:wrap;
    position:relative;
    padding-top: 9%;
     font-weight: 999;
    /*  font-size: 70px; */
     font-size: 300%;
     margin: 0 auto;
     display: flex;
     justify-content: center;
     background-size: 100%;
     -webkit-background-clip: text;
     -moz-background-clip: text;
     -webkit-text-fill-color: rgb(0, 0, 0);
     -moz-text-fill-color: rgb(0, 0, 0);
     /*text-decoration: underline #FF0080;*/
     padding-bottom: 1%;
 }
 
 #persoanaNume{
     /*background-color: aqua;
     -webkit-background-clip: text;
     -moz-background-clip: text;
     -webkit-text-fill-color: transparent;
     -moz-text-fill-color:transparent;
     -webkit-text-stroke: 1px aqua;*/
     font-family:'BebasNeueRegular';
     color: rgb(0, 0, 0);
     font-weight: 900;
     margin:0 auto;
 }
 
 #persoanaRol{
    font-family:'Palentino Linotype';
    color:rgb(0, 0, 0);
    margin:0 auto;
     position: relative;
     top: 1%;
 }
 
 #email{
    margin:0 auto;
     position: relative;
     top: 2%;
     font-size: 80%;
     text-align: center;
 }
 
 
 
  
  @keyframes glitch-it {
     0% {
        transform: translate(0);
     }
     20% {
        transform: translate(-2px, 2px);
     }
     40% {
        transform: translate(-2px, -2px);
     }
     60% {
        transform: translate(2px, 2px);
     }
     80% {
        transform: translate(2px, -2px);
     }
     to {
        transform: translate(0);
     }
  }
 
 
  
  @keyframes noise-before {
     0% {
        clip: rect(61px, 9999px, 52px, 0);
     }
     5% {
        clip: rect(33px, 9999px, 144px, 0);
     }
     10% {
        clip: rect(121px, 9999px, 115px, 0);
     }
     15% {
        clip: rect(144px, 9999px, 162px, 0);
     }
     20% {
        clip: rect(62px, 9999px, 180px, 0);
     }
     25% {
        clip: rect(34px, 9999px, 42px, 0);
     }
     30% {
        clip: rect(147px, 9999px, 179px, 0);
     }
     35% {
        clip: rect(99px, 9999px, 63px, 0);
     }
     40% {
        clip: rect(188px, 9999px, 122px, 0);
     }
     45% {
        clip: rect(154px, 9999px, 14px, 0);
     }
     50% {
        clip: rect(63px, 9999px, 37px, 0);
     }
     55% {
        clip: rect(161px, 9999px, 147px, 0);
     }
     60% {
        clip: rect(109px, 9999px, 175px, 0);
     }
     65% {
        clip: rect(157px, 9999px, 88px, 0);
     }
     70% {
        clip: rect(173px, 9999px, 131px, 0);
     }
     75% {
        clip: rect(62px, 9999px, 70px, 0);
     }
     80% {
        clip: rect(24px, 9999px, 153px, 0);
     }
     85% {
        clip: rect(138px, 9999px, 40px, 0);
     }
     90% {
        clip: rect(79px, 9999px, 136px, 0);
     }
     95% {
        clip: rect(25px, 9999px, 34px, 0);
     }
     100% {
        clip: rect(173px, 9999px, 166px, 0);
     }
  }
  
  @keyframes noise-after {
     0% {
        clip: rect(26px, 9999px, 33px, 0);
     }
     5% {
        clip: rect(140px, 9999px, 198px, 0);
     }
     10% {
        clip: rect(184px, 9999px, 89px, 0);
     }
     15% {
        clip: rect(121px, 9999px, 6px, 0);
     }
     20% {
        clip: rect(181px, 9999px, 99px, 0);
     }
     25% {
        clip: rect(154px, 9999px, 133px, 0);
     }
     30% {
        clip: rect(134px, 9999px, 169px, 0);
     }
     35% {
        clip: rect(26px, 9999px, 187px, 0);
     }
     40% {
        clip: rect(147px, 9999px, 137px, 0);
     }
     45% {
        clip: rect(31px, 9999px, 52px, 0);
     }
     50% {
        clip: rect(191px, 9999px, 109px, 0);
     }
     55% {
        clip: rect(74px, 9999px, 54px, 0);
     }
     60% {
        clip: rect(145px, 9999px, 75px, 0);
     }
     65% {
        clip: rect(153px, 9999px, 198px, 0);
     }
     70% {
        clip: rect(99px, 9999px, 136px, 0);
     }
     75% {
        clip: rect(118px, 9999px, 192px, 0);
     }
     80% {
        clip: rect(1px, 9999px, 83px, 0);
     }
     85% {
        clip: rect(145px, 9999px, 98px, 0);
     }
     90% {
        clip: rect(121px, 9999px, 154px, 0);
     }
     95% {
        clip: rect(156px, 9999px, 44px, 0);
     }
     100% {
        clip: rect(67px, 9999px, 122px, 0);
     }
  }
  
  
  .glitch {
     position: relative;
     font-size: 200px;
     font-weight: bold;
     font-family: "Chakra Petch" sans-serif,
     monospace;
     color: #FFFFFF;
     letter-spacing: 3px;
     animation: shift 4s ease-in-out infinite alternate;
     transform: skewX(0deg);
     z-index: 1;
  }
  
  @keyframes shift {
     0%, 40%, 44%, 58%, 61%, 65%, 69%, 73%, 100% {
        transform: skewX(0deg);
     }
     41% {
        transform: skewX(10deg);
     }
     42% {
        transform: skewX(-10deg);
     }
     59% {
        transform: skewX(35deg) skewY(10deg);
     }
     60% {
        transform: skewX(-35deg) skewY(-10deg);
     }
     63% {
        transform: skewX(10deg) skewY(-5deg);
     }
     70% {
        transform: skewX(-30deg) skewY(-20deg);
     }
     71% {
        transform: skewX(10deg) skewY(-10deg);
     }
  }
  
 
  @media screen and (max-width:750px){
     .glitch{
         font-size: 100px;
     }
  }
 
 
 .parteneriClass{
    grid-column: 3/9;
 }
 
 .parteneriClass {
    text-align: center;
    margin-bottom: 30%;
 }
 
 
 
 #Haufe{
    width: 40%;
    height: auto;
 }
 .parteneriHaufe {
    margin-bottom: 5%;
    margin-top: 5%;
    position: relative;
    width: 100%;
    height: auto;
 }
 
 .parteneriLogo {
    float: left;
    padding: 1rem;
    width: 50%;
 }
 
 .parteneriLogo img {
    width: 30%;
    height: auto;
    margin: auto;
 }
 
 #gdsc{
    height: 50%;
    width: auto;
 }
 
 
 .contactLogo img{
    width: 50%;
    height: auto;
 }
 
 .contactLogo {
    float: left;
    width: 30%;
 }
 
 
 
 
 .display_container {
    display: grid;
    grid-template-columns: repeat(10, 10%);
    grid-auto-rows: min-content;
    width: 100%;
    min-height: 100vh; /* Ensure it takes the full height */
 }
 
 
 /*FOOTER*/
 
 .footerBackground{
    grid-column: 1/end;
    background-color: #272525;
    position:relative
 }
 
 .div.footer{
    background-color: #222222;
    position:relative
  }
  
  div.container-footer {
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 40px;
  }
 
  .OSUT_logo{
    width:200px;
    height:200px;
    margin-right: 10%;
    margin-top: 0px;
  }
  div.footer-column {
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
    margin-left: 5%;
  }
  
  
  h3.footer-failory-name {
    box-sizing: border-box;
    color: #FFFFFF;
    display: block;
    font-family: "Chakra Petch", sans-serif;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.1em;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-top: 24px;
  }
  
  p.footer-description-failory {
    box-sizing: border-box;
    color: rgba(255, 255, 255, 0.8);
    display: block;
    font-family: "Chakra Petch", sans-serif;
    font-size: 17px;
    font-weight: 300;
    letter-spacing: .5px;
    line-height: 1.5em;
    margin-bottom: 16px;
    margin-top: 15px;
  }
  
  
  h3.footer-titles {
    box-sizing: border-box;
    color: #FFFFFF;
    display: block;
    font-family: "Chakra Petch", sans-serif;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.1em;
    margin-bottom: 0;
    margin-left: 0;
    margin-top: 24px;
  }
  
  p.footer-links {
    box-sizing: border-box;
    color: rgba(255, 255, 255, 0.8);
    display: block;
    font-family: "Chakra Petch", sans-serif;
    font-size: 17px;
    font-weight: 300;
    letter-spacing: .5px;
    line-height: 1.8em;
    margin-bottom: 16px;
    margin-top: 2px;
  }
  
  a {
    background-color: transparent;
    box-sizing: border-box;
    color: #FFFFFF;
    font-family: "Chakra Petch", sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.2em;
    text-decoration: none;
  }
  
  a:active {
    outline: 0;
  }
  
  a:hover {
    outline: 0;
  }
  
  span.footer-link {
    box-sizing: border-box;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 300;
  }
  
  span.footer-link:hover {
    color: #FFFFFF;
    font-weight: 400;
  }
  
  a.footer-social-network-icons.w-inline-block {
    background-color: transparent;
    box-sizing: border-box;
    color: #FFFFFF;
    display: inline-block;
    font-family: "Chakra Petch", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2em;
    margin-right: 8px;
    margin-top: 10px;
    max-width: 100%;
    opacity: .8;
    text-decoration: none;
  }
  
  a.footer-social-network-icons.w-inline-block:active {
    outline: 0;
  }
  
  a.footer-social-network-icons.w-inline-block:hover {
    opacity: 1;
    outline: 0;
  }
 
  
  p.footer-description {
    box-sizing: border-box;
    color: rgba(255, 255, 255, 0.8);
    display: block;
    font-family: "Chakra Petch", sans-serif;
    font-size: 17px;
    font-weight: 300;
    letter-spacing: .5px;
    line-height: 1.5em;
    margin-bottom: 16px;
    margin-top: 15px;
  }
  
  strong.link-email-footer {
    box-sizing: border-box;
    font-weight: 700;
  }
 
 
  
  /*BACKGROUND*/
  .backgroundMain {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }
  .backgroundMain:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .backgroundMain img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
  }
 
  #pozaE{
    border-radius: 50%;
  }
 
 .side-decoration{
    width:100%;
    height:auto;
    opacity:60%;
    z-index: 1;
 }
 .side-decoration.right{
    grid-column: 7/15;
    grid-row-start: 1;
 }
 .side-decoration.left{
    grid-column: 1/5;
    grid-row-start: 1;
 }
 .side-decoration.right2{
    grid-column: 7/15;
    grid-row-start: 3;
 }
 .side-decoration.left2{
    grid-column: 1/5;
    grid-row-start: 3;
 }
 .side-decoration.bottom{
    grid-column: 1/20;
 }
 
  @media only screen and (max-width:500px){
    .display_container{
       grid-template-columns: 2% 2% repeat(6,15%) 2% 2%;
       text-align: center;
    }
    #navbarImg{
      left:2%;
      top:10%;
      width:45%;
      height:auto;
   }
    .side-decoration{
       height: 0;
       width: 0;
       overflow: hidden;
    }
    .options{
       min-width:40px;
    }
  }
  #focus_button{
    color:white;
    margin-top: 10%;
    margin-bottom:100px;
  }
 
 
 
 
  
 
 
 .data_subtext{
    color:#fff;
    font-size:40px;
    font-weight: bold;
 }
 
 
 
 .column {
    float: left;
    width: 25%;
    padding: 20px;
    background-color: transparent;
  }
 
  .row{
    background-color: transparent;
    margin-top: 30px;
  }
  
  .alternate-section {
   display: flex;
   flex-direction: column;
   gap: 20px;
 }
 
 .section {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
 }
 
 .section:nth-child(odd) .text-box {
   order: 1;
 }
 
 .section:nth-child(odd) .image-box {
   order: 2;
 }
 
 .section:nth-child(even) .text-box {
   order: 2;
 }
 
 .section:nth-child(even) .image-box {
   order: 1;
 }
 
 .text-box {
   flex: 1;
 }
 
 .image-box {
   flex: 1;
 }
 
 .image-box img {
   width: 100%;
   height: auto;
   border-radius: 8px;
 }
 *{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Poppins', sans-serif;
 }
 nav{
   position: fixed;
   z-index: 99;
   width: 100%;
   background-image: linear-gradient(to right, rgba(219, 219, 201, 1)  0%, rgba(95, 89, 95, 1) 100%);
 }
 nav .wrapper{
   position: relative;
   max-width: 1300px;
   padding: 0px 30px;
   height: 70px;
   line-height: 70px;
   margin: auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 .wrapper .logo a{
   color: #f2f2f2;
   font-size: 30px;
   font-weight: 600;
   text-decoration: none;
 }
 .wrapper .nav-links{
   display: inline-flex;
   margin-right: -40px;
 }
 .nav-links li{
   list-style: none;
 }
 .nav-links li a{
   font-family: 'BebasNeueRegular';
   color: black;
   text-decoration: none;
   font-size: 19px;
   font-weight: 1000;
   padding: 9px 15px;
   border-radius: 5px;
   transition: all 0.3s ease;

 }
 .nav-links li a:hover{
   background: #d7d0d0;
 }
 .nav-links .mobile-item{
   display: none;
 }
 .nav-links .drop-menu{
   position: absolute;
   background: #242526;
   width: 180px;
   line-height: 45px;
   top: 85px;
   opacity: 0;
   visibility: hidden;
   box-shadow: 0 6px 10px rgba(0,0,0,0.15);
 }
 .nav-links li:hover .drop-menu,
 .nav-links li:hover .mega-box{
   transition: all 0.3s ease;
   top: 70px;
   opacity: 1;
   visibility: visible;
 }
 .drop-menu li a{
   width: 100%;
   display: block;
   padding: 0 0 0 15px;
   font-weight: 400;
   border-radius: 0px;
 }
 .mega-box{
   position: absolute;
   left: 0;
   width: 100%;
   padding: 0 30px;
   top: 85px;
   opacity: 0;
   visibility: hidden;
 }
 .mega-box .content{
   background: #242526;
   padding: 25px 20px;
   display: flex;
   width: 100%;
   justify-content: space-between;
   box-shadow: 0 6px 10px rgba(0,0,0,0.15);
 }
 .mega-box .content .row{
   width: calc(25% - 30px);
   line-height: 45px;
 }
 .content .row img{
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 .content .row header{
   color: #f2f2f2;
   font-size: 20px;
   font-weight: 500;
 }
 .content .row .mega-links{
   margin-left: -40px;
   border-left: 1px solid rgba(255,255,255,0.09);
 }
 .row .mega-links li{
   padding: 0 20px;
 }
 .row .mega-links li a{
   padding: 0px;
   padding: 0 20px;
   color: #d9d9d9;
   font-size: 17px;
   display: block;
 }
 .row .mega-links li a:hover{
   color: #f2f2f2;
 }
 .wrapper .btn{
   color: #000000;
   font-size: 20px;
   cursor: pointer;
   display: none;
 }
 .wrapper .btn.close-btn{
   position: absolute;
   right: 30px;
   top: 10px;
 }
 
 @media screen and (max-width: 970px) {
   .wrapper .btn{
     display: block;
   }
   .wrapper .nav-links{
     position: fixed;
     height: 100vh;
     width: 100%;
     max-width: 350px;
     top: 0;
     left: -100%;
     background-image: linear-gradient(to right, rgba(219, 219, 201, 1)  0%, rgba(95, 89, 95, 1) 100%);;
     display: block;
     padding: 50px 10px;
     line-height: 50px;
     overflow-y: auto;
     box-shadow: 0px 15px 15px rgba(0,0,0,0.18);
     transition: all 0.3s ease;
   }
   /* custom scroll bar */
   ::-webkit-scrollbar {
     width: 10px;
   }
   ::-webkit-scrollbar-track {
     background: #242526;
   }
   ::-webkit-scrollbar-thumb {
     background: #3A3B3C;
   }
   #menu-btn:checked ~ .nav-links{
     left: 0%;
   }
   #menu-btn:checked ~ .btn.menu-btn{
     display: none;
   }
   #close-btn:checked ~ .btn.menu-btn{
     display: block;
   }
   .nav-links li{
     margin: 15px 10px;
   }
   .nav-links li a{
     padding: 0 20px;
     display: block;
     font-size: 20px;
   }
   .nav-links .drop-menu{
     position: static;
     opacity: 1;
     top: 65px;
     visibility: visible;
     padding-left: 20px;
     width: 100%;
     max-height: 0px;
     overflow: hidden;
     box-shadow: none;
     transition: all 0.3s ease;
   }
   #showDrop:checked ~ .drop-menu,
   #showMega:checked ~ .mega-box{
     max-height: 100%;
   }
   .nav-links .desktop-item{
     display: none;
   }
   .nav-links .mobile-item{
     display: block;
     color: #f2f2f2;
     font-size: 20px;
     font-weight: 500;
     padding-left: 20px;
     cursor: pointer;
     border-radius: 5px;
     transition: all 0.3s ease;
   }
   .nav-links .mobile-item:hover{
     background: #3A3B3C;
   }
   .drop-menu li{
     margin: 0;
   }
   .drop-menu li a{
     border-radius: 5px;
     font-size: 18px;
   }
   .mega-box{
     position: static;
     top: 65px;
     opacity: 1;
     visibility: visible;
     padding: 0 20px;
     max-height: 0px;
     overflow: hidden;
     transition: all 0.3s ease;
   }
   .mega-box .content{
     box-shadow: none;
     flex-direction: column;
     padding: 20px 20px 0 20px;
   }
   .mega-box .content .row{
     width: 100%;
     margin-bottom: 15px;
     border-top: 1px solid rgba(255,255,255,0.08);
   }
   .mega-box .content .row:nth-child(1),
   .mega-box .content .row:nth-child(2){
     border-top: 0px;
   }
   .content .row .mega-links{
     border-left: 0px;
     padding-left: 15px;
   }
   .row .mega-links li{
     margin: 0;
   }
   .content .row header{
     font-size: 19px;
   }
 }
 nav input{
   display: none;
 }
 
 .body-text{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 100%;
   text-align: center;
   padding: 0 30px;
 }
 .body-text div{
   font-size: 45px;
   font-weight: 600;
 }

 .echipaContent {
   display: flex;
   align-items: center;
   padding: 10px;
 }
 
 .myImage {
   margin-right: 20px;
   height: auto; /* Adjust as needed */
   width: 235px; /* Adjust as needed */
   border: 2px solid #000;
 }
 
 .textBox {
   padding: 20px;
   flex: 1;
   border: 2px solid #000;
 }
 
 
 .textBox .heading {
   margin-bottom: 10px;
   font-size: 2em;
   font-weight: bold;
 }
 
 .textBox p {
   font-size: 1em;
   color: #333;
 }

 .echipaContent {
   display: flex;
   visibility: visible;
   position: relative;
   z-index: 1;
 }

 .echipaContentReverse {
   display: flex;
   align-items: center;
   padding: 10px;
   visibility: visible;
   position: relative;
   z-index: 1;
   flex-direction: row-reverse;
 }
 
.myImageReverse {
   margin-left: 20px;
   height: auto; /* Adjust as needed */
   width: 235px; /* Adjust as needed */
   border: 2px solid #000;

}