*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html,
body{
  overflow-x:hidden;
  font-family:'Playfair Display', serif;
  background:#fdfdfd;
  scroll-behavior:smooth;
}

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

#main-navbar{

  position:fixed;

  top:0;
  left:0;

  width:100%;

  z-index:99999;

  background:#ffffff;

  border-bottom:4px solid #cb643e;

  box-shadow:
  0 4px 20px rgba(0,0,0,0.08);

}

/* BODY SPACE */

body{
  padding-top:105px;
}

/* =========================
   CONTAINER
========================= */

.navbar-container{

  width:100%;
  max-width:1450px;

  margin:auto;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  padding:12px clamp(15px, 3vw, 40px);

}

/* =========================
   LOGO
========================= */

.logo{

  display:flex;

  align-items:center;

  gap:14px;

  text-decoration:none;

  flex:1;

  min-width:0;

}

/* IMAGE */

.logo img{

  width:65px;
  height:65px;

  object-fit:contain;

  flex-shrink:0;

}

/* TEXT */

.logo-text{

  display:flex;

  flex-direction:column;

  justify-content:center;

  min-width:0;

}

/* TITLE */

.logo h2{

  font-size:28px;

  color:#13527d;

  font-weight:800;

  line-height:1.1;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;

}

/* SUBTITLE */

.logo p{

  font-size:12px;

  color:#0f3b74;

  font-weight:700;

  margin-top:4px;

  letter-spacing:.5px;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;

}

/* =========================
   DESKTOP NAV
========================= */

.desktop-nav ul{

  display:flex;

  align-items:center;

  gap:22px;

  list-style:none;

}

/* LINKS */

.desktop-nav ul li a{

  text-decoration:none;

  color:#0f3b74;

  font-weight:700;

  font-size:16px;

  position:relative;

  transition:.3s;

}

/* UNDERLINE */

.desktop-nav ul li a::after{

  content:"";

  position:absolute;

  left:0;
  bottom:-6px;

  width:0%;

  height:3px;

  background:#13527d;

  border-radius:10px;

  transition:.35s ease;

}

/* HOVER */

.desktop-nav ul li a:hover{

  color:#13527d;

}

.desktop-nav ul li a:hover::after{

  width:100%;

}

/* =========================
   BUTTONS
========================= */

.desktop-buttons,
.mobile-buttons{

  display:flex;

  gap:12px;

}

/* BUTTON STYLE */

.membership-btn,
.donate-btn{

  text-decoration:none;

  padding:12px 22px;

  border-radius:50px;

  color:#fff;

  font-size:15px;

  font-weight:700;

  transition:.35s ease;

}

/* COLORS */

.membership-btn{
  background:#13527d;
}

.donate-btn{
  background:#0f3b74;
}

/* HOVER */

.membership-btn:hover,
.donate-btn:hover{

  transform:
  translateY(-3px);

  box-shadow:
  0 8px 20px rgba(0,0,0,0.15);

}

/* =========================
   MOBILE TOGGLE
========================= */

.mobile-toggle{

  display:none;

  align-items:center;

  justify-content:center;

  width:42px;
  height:42px;

  font-size:32px;

  color:#13527d;

  cursor:pointer;

  flex-shrink:0;

}

/* =========================
   MOBILE MENU
========================= */

.mobile-menu{

  display:none;

  flex-direction:column;

  background:#fff;

  padding:18px 20px 22px;

  border-top:1px solid #eee;

  animation:slideDown .4s ease;

}

/* ACTIVE */

.mobile-menu.active{
  display:flex;
}

/* LIST */

.mobile-menu ul{
  list-style:none;
}

/* ITEM */

.mobile-menu ul li{
  margin-bottom:10px;
}

/* LINK */

.mobile-menu ul li a{

  text-decoration:none;

  color:#0f3b74;

  font-size:16px;

  font-weight:700;

  display:block;

  padding:7px 0;

  transition:.3s;

}

/* HOVER */

.mobile-menu ul li a:hover{
  color:#13527d;
}

/* BUTTONS */

.mobile-buttons{

  margin-top:18px;

  flex-direction:column;

  gap:12px;

}

/* BUTTON WIDTH */

.mobile-buttons a{

  width:100%;

  text-align:center;

  padding:14px 18px;

  border-radius:50px;

}

/* =========================
   MOBILE DROPDOWN
========================= */

.mobile-dropdown-menu{

  display:none;

  padding-left:15px;

  margin-top:8px;

}

/* ITEM */

.mobile-dropdown-menu li{

  margin-bottom:6px !important;

}

/* LINK */

.mobile-dropdown-menu li a{

  font-size:15px !important;

  color:#13527d;

  font-weight:600;

}

/* ACTIVE */

.mobile-dropdown.active .mobile-dropdown-menu{

  display:block;

  animation:slideDown .3s ease;

}

/* =========================
   DESKTOP DROPDOWN
========================= */

.dropdown{
  position:relative;
}

/* LINK */

.dropdown > a{

  display:flex;

  align-items:center;

  gap:6px;

  cursor:pointer;

}

/* MENU */

.dropdown-menu{

  position:absolute;

  top:100%;
  left:50%;

  transform:
  translateX(-50%)
  translateY(10px);

  width:330px;

  background:#fff;

  border-radius:22px;

  padding:20px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:18px;

  box-shadow:
  0 12px 35px rgba(0,0,0,0.10);

  opacity:0;

  visibility:hidden;

  pointer-events:none;

  transition:.35s ease;

  z-index:9999;

}

/* BRIDGE */

.dropdown-menu::before{

  content:"";

  position:absolute;

  top:-20px;
  left:0;

  width:100%;
  height:25px;

}

/* SHOW */

.dropdown:hover .dropdown-menu{

  opacity:1;

  visibility:visible;

  pointer-events:auto;

  transform:
  translateX(-50%)
  translateY(0);

}

/* ITEMS */

.dropdown-menu li{

  list-style:none;

  flex:1;

}

/* LINK */

.dropdown-menu li a{

  display:flex;

  align-items:center;

  justify-content:center;

  text-align:center;

  min-height:105px;

  padding:15px;

  text-decoration:none;

  font-size:22px;

  font-weight:600;

  line-height:1.2;

  color:#111;

  border-radius:14px;

  transition:.35s ease;

}

/* FIRST CARD */

.dropdown-menu li:first-child a{

  background:#f1efff;

  color:#0d1383;

  border-bottom:4px solid #1c5d93;

}

/* HOVER */

.dropdown-menu li a:hover{

  background:#f5f5f5;

  transform:translateY(-3px);

}

/* =========================
   ANIMATION
========================= */

@keyframes slideDown{

  from{

    opacity:0;

    transform:translateY(-15px);

  }

  to{

    opacity:1;

    transform:translateY(0);

  }

}

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

@media(max-width:1200px){

  .logo h2{
    font-size:24px;
  }

}

/* TABLET */

@media(max-width:992px){

  /* HIDE DESKTOP */

  .desktop-nav,
  .desktop-buttons{
    display:none;
  }

  /* SHOW TOGGLE */

  .mobile-toggle{
    display:flex;
  }

  /* CONTAINER */

  .navbar-container{

    width:94%;

    gap:12px;

    padding:10px 0;

  }

  /* LOGO */

  .logo{

    gap:10px;

    width:calc(100% - 60px);

  }

  /* IMAGE */

  .logo img{

    width:52px;
    height:52px;

  }

  /* TITLE */

  .logo h2{

    font-size:20px;

  }

  /* SUBTITLE */

  .logo p{

    font-size:10px;

    letter-spacing:.3px;

  }

  /* BODY */

  body{
    padding-top:88px;
  }

  /* DESKTOP DROPDOWN */

  .dropdown-menu{
    display:none !important;
  }

}

/* MOBILE */

@media(max-width:768px){

  .logo h2{

    font-size:17px;

  }

  .logo p{

    font-size:9px;

  }

  .mobile-toggle{

    width:40px;
    height:40px;

    font-size:28px;

  }

}

/* SMALL MOBILE */

@media(max-width:600px){

  .logo{

    gap:8px;

  }

  .logo img{

    width:45px;
    height:45px;

  }

  .logo h2{

    font-size:15px;

  }

  .logo p{

    font-size:8px;

    letter-spacing:0;

  }

}

/* EXTRA SMALL */

@media(max-width:420px){

  .logo h2{

    font-size:13px;

  }

  .logo p{

    font-size:7px;

  }

}