ul.MeniuSection{
    /* afiseaza fiecare li pe cate o coloana */
    display:flex;
    padding:0;
    margin:0;
    list-style-type:none;
  
  
  }
  
  ul.MeniuSection li a{
    display:block;
    /* height:100% - pentru a avea inaltimea egala cu inalimea intregului buton */
    height:100%;

  }
  
  ul.MeniuSection li a, ul.MeniuSection li div{
    color: black;
  }
  
  /* sunt selectate doar primele li din meniu (ca ierarhie) */
  ul.MeniuSection>li{
    height: var(--spaceHeight);
    /* este vizibil doar textul din tagul <a>, nu si <ul> - pentru ca <ul> ar iesi din dimensiunile butonului, asa ca nu se mai afiseaza */
    overflow:hidden;
    line-height: var(--spaceHeight);
    vertical-align: middle;
    width:var(--buttonLength);
    text-align: center;
  }
  
  /* Când venim cu cursorul pe o opțiune din meniu, se va realiza tranziția indicată în videoclip: va apărea trepat o umbră internă în boxul opțiunii meniului, iar culoarea "butonului"-link se va schimba.*/
  ul.MeniuSection>li>a, ul.MeniuSection>li>div{
    box-shadow: none;
    transition: box-shadow 0.5s linear;
  }
  
  ul.MeniuSection>li>a:hover, ul.MeniuSection>li>div:hover{
    box-shadow: 0 0 10px 2px inset var(--color6);
  }
  
  /*ma ajuta sa imi asez elementele din acasa*/
  ul.MeniuSection ul{
    /* nu se afiseaza bulinutele de la li */
    list-style-type: none;
    z-index:10px;
    position:relative;
    left:-1px;
    padding:0;
    margin:0;
    display:none;
  }
  
  ul.MeniuSection li:hover ul{
    animation-name: animatie_submeniu;
    animation-duration: 0.7s;
    /* de cate ori se repeta animatia */
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    /* transformarea incepe pe x - din centru, pe y - de sus */
    transform-origin: center top;
    display:block;
  }
  
  ul.MeniuSection ul li{
    height: var(--spaceHeight);
    width:var(--buttonLength);
    /* nu se afiseaza pentru li-urile care contin si submeniu (un alt ul) decat <a>, nu si <ul> */
    overflow: hidden;
    top: -1px;
    left: 0;
    /* position relative - pentru a putea folosi top si left */
    position: relative;
    /*position: relative;: This sets the positioning context for the <li> elements, allowing the use of top and left properties.  */
  }
  
  ul.MeniuSection ul li::after{
    content: "→";
    position: absolute;
    /* position: absolute;: This positions the pseudo-element absolutely within the <li> element's containing block. */
    left: -30px;
    top: 50%;
    translate: 0 -50%;
    /* translate: 0 -50%;: This applies a translation to the pseudo-element, moving it 50% upwards relative to its own height, effectively centering it vertically. */
    transition: transform 0.5s linear;
  }
  
  ul.MeniuSection ul li:hover::after{
    transform: translateX(32px);
    /* offset 2px */
  }
  
  ul.MeniuSection li{
    color: black;
    /* mouse-ul se transforma in manuta */
    cursor:pointer;
    background-color: var(--color8);
    /* elementul (butonul) va avea dimesiunea lui in width si height + dimeniunea border-ului + dimeniunea padding-ului -> fara margin */
    box-sizing:border-box;
  }
  
  /* afiseaza ul din li */
  ul.MeniuSection>li:hover{
    overflow:visible;
  }
  
  ul.MeniuSection a{
    color:black;
    text-decoration:none;
  }
  
  nav{
    height:var(--spaceHeight);
    background-color: var(--color8);
    overflow: visible;
    position: fixed;
    top:0;
    left:0;
    width:100vw;
  }
  
  #hamburger, #ch-MeniuSection{
    display:none;
  }
  
  @keyframes animatie_submeniu {
    0%{
      transform: scale(1,0);/*x latime*//*1 latime*/ /*0 inaltime*/
    }
    100%{
      transform: scale(1,1);/*y inaltime*//*1 latime*/ /*0 inaltime*/
    }
  }