/* ============ Header ============ */
:root {
  --header-height: 0px;
  --header-extra-space: clamp(5px, 2vw, 30px);
}
.header-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: clamp(15px, 1.563vw, 30px);
  padding: clamp(15px, 1.146vw, 22px) clamp(15px, 1.302vw, 25px);
  border-radius: clamp(35px, 2.604vw, 50px);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(15px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  z-index: 1001;
}

/* .header-container */
 .menu-active {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Menu Button */
.menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: clamp(10px, 0.885vw, 17px);
  cursor: pointer;
  user-select: none;
}

.menu span {
  font-size: clamp(16px, 1.042vw, 20px);
  font-weight: 500;
}

.menu-icon,
.close-icon {
  width: clamp(40px, 2.865vw, 55px);
  aspect-ratio: 1;
  padding: clamp(10px, 0.677vw, 13px);
  background: var(--darkblue);
  border-radius: clamp(30px, 2.604vw, 50px);
  transition: all 0.3s ease;
}

.menu:hover .menu-icon,
.menu:hover .close-icon {
  background: rgba(0, 44, 83, 0.8);
  transform: scale(1.05);
}

/* Centered Logo */
.logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cpw-logo {
  width: clamp(120px, 10.417vw, 200px);
  height: auto;
  display: block;
}

.cpw-logo-mobile{
  display: none;
}

/* ============ Nav Panel ============ */
.nav-panel {
  height: 90vh;
  position: fixed;
  left: clamp(15px, 1.563vw, 30px);
  right: clamp(15px, 1.563vw, 30px);
  padding: clamp(2rem, 3.125vw, 3rem) clamp(2rem, 3.125vw, 3rem) 1rem;
  border-radius: 30px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.5s ease,
    padding 0.5s ease;
  z-index: 999;

  background: var(--bg-dark-overlay);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.nav-panel.active {
  max-height: calc(100vh - clamp(120px, 8.333vw, 160px));
  opacity: 1;
  /* overflow-y: auto; */
}



/* ============ Nav Content ============ */
.nav-content {
  margin: 0 auto;
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(clamp(160px, 12.5vw, 180px), 1fr)); */
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: clamp(2rem, 5.208vw, 5rem);
  height: 90%;
}

.nav-section h3 {
  font-size: clamp(14px, 1.042vw, 20px);
  margin-bottom: clamp(0.75rem, 1.042vw, 1rem);
  font-weight: 600;
  text-align: left;
  color: var(--text-color);
}

.nav-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-section a {
  text-decoration: none;
  font-size: clamp(12px, 0.833vw, 16px);
  transition: color 0.3s ease, padding-left 0.3s ease;
  color: rgba(255, 255, 255, 0.85);
  display: inline-flex;
  padding: 0 0 5px 0;
}

.nav-section a:hover {
  color: #fff;
  padding-left: 5px;
}

/* ============ Social Links ============ */
.social-links {
  display: flex;
  gap: clamp(1.5rem, 2.604vw, 2.5rem);
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.social-link {
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: clamp(0.3rem, 0.521vw, 0.5rem);
  font-size: clamp(12px, 0.938vw, 18px);
  font-weight: 500;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.social-link img {
  width: clamp(28px, 1.875vw, 36px);
  height: auto;
}

.social-link:hover {
  opacity: 0.7;
  transform: translateY(-2px);
}

/* ============ Scroll Lock ============ */
body.menu-open {
  overflow: hidden;
}

/* ============ Responsive ============ */
@media (max-width: 1366px) {
  .nav-content {
    gap: clamp(1.8rem, 4.39vw, 4rem);
  }

  .header-container {
    margin: clamp(12px, 1.76vw, 25px);
  }
}

@media (max-width: 1024px) {
  .header-container {
    margin: clamp(12px, 1.95vw, 20px);
    padding: clamp(12px, 1.56vw, 18px) clamp(15px, 1.95vw, 20px);
  }

  .nav-content {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: clamp(1.5rem, 3.91vw, 3rem);
  }

  .nav-panel {
    top: clamp(80px, 9.77vw, 100px);
    padding: clamp(1.5rem, 2.93vw, 2.5rem);
  }

  /* .nav-panel.active {
    max-height: calc(100vh - clamp(100px, 11.72vw, 120px));
  } */

  .nav-panel.active {
    max-height: calc(90dvh - 100px);
  }

  .cpw-logo {
    width: clamp(120px, 14.65vw, 150px);
  }

}

@media (max-width: 768px) {
  .header-container {
    /* margin: clamp(10px, 1.95vw, 15px); */
    padding: 13px;
  }

  .menu-icon,
  .close-icon {
    width: clamp(35px, 5.86vw, 45px);
    /*height: clamp(35px, 5.86vw, 45px);*/
    padding: clamp(8px, 1.3vw, 10px);
  }

  .menu span {
    font-size: clamp(14px, 2.08vw, 16px);
  }

  .cpw-logo {
    
    display: none;
  }
  
  .cpw-logo-mobile{
    width: clamp(25px, calc(25px + 1.302vw), 35px);
    display: block;
  }

  .header-container .hero-btn {
    font-size: clamp(14px, 2.08vw, 16px);
    padding: clamp(10px, 1.56vw, 12px) clamp(20px, 3.91vw, 30px);
  }

  .nav-content {
    /* grid-template-columns: 1fr; */
    gap: clamp(1.5rem, 2.6vw, 2rem);
  }

  .nav-panel {
    padding: clamp(4rem, 10.42vw, 8rem) clamp(1.5rem, 2.6vw, 2rem) clamp(1.5rem, 2.6vw, 2rem);
    top: clamp(80px, 13.02vw, 100px);
    left: clamp(10px, 1.95vw, 15px);
    right: clamp(10px, 1.95vw, 15px);
  }

  /* .nav-panel.active {
    max-height: calc(100vh - clamp(90px, 14.32vw, 110px));
  } */

  .nav-section h3 {
    font-size: clamp(15px, 2.08vw, 18px);
  }

  .nav-section a {
    font-size: clamp(13px, 1.82vw, 15px);
  }

  .social-links {
    justify-content: center;
    margin-top: clamp(2rem, 3.91vw, 3rem);
    gap: clamp(1rem, 2.6vw, 2rem);
  }

  .social-link {
    font-size: clamp(11px, 1.56vw, 14px);
  }

  .social-link img {
    width: clamp(24px, 3.91vw, 32px);
  }
}

@media (max-width: 480px) {


  .header-container {
    margin: 10px;
  
  }

  .menu span {
    display: none;
  }

  .menu-icon,
  .close-icon {
    width: 40px;
    height: 40px;
  }

  .header-container .hero-btn {
    font-size: 14px;
    padding: 10px 20px;
  }

  .nav-panel {
    padding: 1.5rem 1.5rem 1.5rem;
    top: 75px;
    left: 10px;
    right: 10px;
    /* border-radius: 20px; */
  }

  .nav-section h3 {
    font-size: 16px;
  }

  .nav-section a {
    font-size: 14px;
  }

  .social-link {
    font-size: 12px;
  }

  .social-link img {
    width: 28px;
  }
}