/* =========================================
   MODERN NAVBAR
========================================= */

.site-header{
  width:100%;
  height:92px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(34,103,141,.08);

  position:fixed;
  top:0;
  left:0;
  z-index:9999;

  font-family:'Poppins',sans-serif;
}

.navbar{
  height:100%;
  padding:0 6%;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}

/* LOGO */

.nav-logo{
  display:flex;
  align-items:center;
  text-decoration:none;
}

.nav-logo img{
  height:72px;
  width:auto;
  max-width:210px;
  object-fit:contain;
  display:block;
}

/* MENU */

.nav-menu{
  display:flex;
  align-items:center;
  gap:10px;
  list-style:none;
  margin:0;
  padding:0;
}

.nav-menu li{
  position:relative;
}

.nav-link{
  position:relative;

  display:flex;
  align-items:center;
  gap:7px;

  padding:12px 16px;

  border-radius:999px;

  text-decoration:none;

  color:#13283a;

  font-size:16px;
  font-weight:500;

  transition:.3s ease;
}

.nav-link ion-icon{
  font-size:14px;
  transition:.3s ease;
}

.nav-link:hover,
.nav-link.active{
  color:#22678d;
  background:rgba(63,169,245,.10);
}

.nav-link.active::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:5px;

  width:22px;
  height:3px;

  border-radius:10px;

  background:#3fa9f5;

  transform:translateX(-50%);
}

/* DROPDOWN */

.dropdown:hover .nav-link ion-icon{
  transform:rotate(180deg);
}

.dropdown-menu{
  position:absolute;
  top:120%;
  left:0;

  min-width:230px;

  padding:12px;

  background:rgba(255,255,255,.96);
  backdrop-filter:blur(18px);

  border:1px solid rgba(34,103,141,.08);
  border-radius:22px;

  list-style:none;

  box-shadow:
    0 20px 50px rgba(8,32,50,.12);

  opacity:0;
  visibility:hidden;

  transform:translateY(14px) scale(.98);

  transition:.28s ease;
}

.dropdown:hover .dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}

.dropdown-menu li a{
  display:flex;
  align-items:center;

  padding:13px 16px;

  border-radius:14px;

  color:#334155;

  font-size:15px;
  font-weight:500;

  text-decoration:none;

  transition:.25s ease;
}

.dropdown-menu li a:hover{
  background:rgba(63,169,245,.10);
  color:#22678d;
  transform:translateX(4px);
}

/* DONATE */

.donate-nav-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  padding:17px 32px;

  border-radius:999px;

  background:
    linear-gradient(135deg,#45b7ff,#1f7ed8);

  color:#fff;

  text-decoration:none;

  font-size:17px;
  font-weight:700;

  box-shadow:
    0 15px 35px rgba(31,126,216,.30);

  transition:.3s ease;

  white-space:nowrap;
}

.donate-nav-btn ion-icon{
  font-size:20px;
}

.donate-nav-btn:hover{
  transform:translateY(-3px);
  box-shadow:
    0 22px 45px rgba(31,126,216,.40);
}

/* HAMBURGER */

.hamburger{
  display:none;

  width:48px;
  height:48px;

  border:none;
  border-radius:16px;

  background:rgba(63,169,245,.10);

  cursor:pointer;

  position:relative;
}

.hamburger span{
  position:absolute;
  left:13px;

  width:22px;
  height:2px;

  border-radius:10px;

  background:#22678d;

  transition:.35s ease;
}

.hamburger span:nth-child(1){
  top:15px;
}

.hamburger span:nth-child(2){
  top:23px;
}

.hamburger span:nth-child(3){
  top:31px;
}

/* Hamburger active X */

.hamburger.active span:nth-child(1){
  top:23px;
  transform:rotate(45deg);
}

.hamburger.active span:nth-child(2){
  opacity:0;
  transform:translateX(-10px);
}

.hamburger.active span:nth-child(3){
  top:23px;
  transform:rotate(-45deg);
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:1100px){

  .site-header{
    height:86px;
  }

  .nav-logo img{
    height:64px;
    max-width:190px;
  }

  .hamburger{
    display:block;
  }

  .donate-nav-btn{
    display:none;
  }

  .nav-menu{
    position:absolute;

    top:86px;
    left:5%;
    right:5%;

    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:6px;

    padding:22px;

    background:rgba(255,255,255,.96);
    backdrop-filter:blur(18px);

    border:1px solid rgba(34,103,141,.08);
    border-radius:26px;

    box-shadow:
      0 25px 60px rgba(8,32,50,.14);

    opacity:0;
    visibility:hidden;

    transform:translateY(-12px) scale(.98);

    transition:.35s ease;
  }

  .nav-menu.active{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
  }

  .nav-menu li{
    width:100%;
  }

  .nav-link{
    width:100%;
    justify-content:space-between;
    padding:15px 16px;
  }

  .nav-link.active::after{
    display:none;
  }

  .dropdown-menu{
    position:static;

    min-width:100%;

    margin-top:6px;
    padding:6px 0 6px 14px;

    border:none;
    box-shadow:none;
    background:transparent;
    backdrop-filter:none;

    opacity:1;
    visibility:visible;
    transform:none;

    display:none;
  }

  .dropdown.active .dropdown-menu{
    display:block;
  }

  .dropdown.active .nav-link ion-icon{
    transform:rotate(180deg);
  }

  .dropdown:hover .dropdown-menu{
    transform:none;
  }

}