/* -----------------------------------------HEADER--------------------------------------------*/

.header{
    position: relative;  /*doe position:fixed om de navbar vast te houden*/
    top: 0;
    left: 1;
    width: 100%;
    padding: 1.3rem 10%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    max-height: 70px;
  }


  .header::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1b2f62;
    /* background: rgba(255, 255, 255, 0.05);  */
    backdrop-filter: blur(50px);
    z-index: -1;
  }
  
  
  /* ANIMATIE NAVBAR WITTE SCHIJN */
  /*
   .header::after{
    content: '';
    position: absolute;
    top: 0;
    left:-100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), 
    transparent);
    transition: 2s;  
  } 
  */
  /* < ----------------------------------------------- > */
  
  
  
  .header:hover::after{
    left: 100%;
  }
  
  /*logo en tekst in de navbar*/
  
  #header-logo{
    max-width: 50px;
    height: auto;
  }
  
  .logo{
    font-size: 2rem;
    color: white;
    text-decoration: none;
    font-weight: 700;
  }
  
  .logoEnNaam {
    display: flex;
    align-items: center; /* Verticaal centreren */
  }
  
  .logoEnNaam img {
    margin-right: 10px; /* Ruimte tussen afbeelding en tekst toevoegen */
  }
  
  /* -----------------------------------------NAVBAR--------------------------------------------*/
  
  nav.navbar{
    backdrop-filter: blur(50px);   /*maakt het blurry bij gsm hamburgermenu*/
  }
   
  .navbar a{
    font-size: 1.15rem;
    color: white;
    text-decoration: none;
    font-weight: 500;
    margin-left: 2.5rem;
    transition: border-color .5s ease; /* Voeg een overgang toe met een langzamere snelheid */
    border-bottom: 2px solid transparent; /* Standaard geen border */
  }
  
  .navbar a:hover {
    border-bottom: 2px solid white;/* Voeg een border toe wanneer de muis over de link gaat */
    transition: .3s ease;  
  }
  
  #check{
    display: none;
  }
  
  
  .icons{
    position: absolute;
    right: 5%;
    font-size: 2.8rem;
    color: white;
    cursor: pointer;
    display: none;
  }

  

/*----------------------------📱MEDIA QUERRY'S📱-----------------------------*/


@media (max-width: 992px ) /* for tablet*/ {
  
    /* ------------- HEADER TABLET -------------*/
    .header{
      padding: 1.3rem 5%;
    }
    .navbar a {   
      border-bottom: none; 
    }

  }
  

  @media (max-width: 864px )/* for mobile*/ {

    /* ------------- NAVBAR MOBILE -------------*/

    .header{
      position: fixed;
      max-height: 70px;

    }
  
    .icons{
      display: inline-flex;
    }
    
    #check:checked~.icons #menu-icon {
      display: none;
    }
    
      .icons #close-icon{
        display: none;
      }
  
      #check:checked~.icons #close-icon {
        display: block;
      }
  
      .navbar{
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 0;
        background: rgba(15, 36, 90, 0.920); /*kleur van de backdrop menu op mobile*/
        backdrop-filter: blur(50px);
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .10); /*.1 is een achtergrond*/
        overflow: hidden;
        transition: .3s ease; /*aanpassen hoe lang de animatie duurt*/
      }

      
      
      #check:checked~.navbar {
        height: 17.7rem;
      }
  
      .navbar a {
        display: block;
        font-size: 1.1rem;
        margin: 1.5rem 0;
        text-align: center;
        transform: translateY(-50px);
        opacity: 0;
        transition: .3s ease;    
        border-bottom: none;
      }
  
      #check:checked~.navbar a{
        transform: translateY(0);
        opacity: 1;
        transition-delay: calc(.15s * var(--i));
      }

      .markedPage{
        border-bottom: none;
        background: none;
        border: none;
        border-radius: none;
        padding: none;    
        border-bottom: none !important;
      }

      nav.navbar a {
        background: none;
        border: none !important;

      }


  
  }

  .markedPage{
    /* border: 2px solid #62a7b7;
    border-radius: 25px; */
    /* padding: 5px; */
    color: rgb(98,167,183);
    /* background: linear-gradient(90deg, rgba(98,167,183,1) 0%, rgba(74,123,190,1) 100%); */
  }
  nav.navbar a.markedPage {
    border-bottom: 2px solid #62a7b7 ;
    
}

.markedPage a{
  color:  rgb(98,167,183);;
}