@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap");

:root {

  --black: #000000;
  --color-003b6e: #003b6e;
  --color-005495: #005495;
  --color-0b67b3: #0b67b3;
  --color-e0e0e0: #e0e0e0;
  --color-f1c22b: #f1c22b;
  --color-fff0d8: #fff0d8;
  --white: #fff;
}


/* RESET (IMPORTANT FIX) */
* {

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

/* CONTAINER */
.pd-shell {

  max-width: 1440px;
  /* Increased to allow wider spread */
  width: 100%;
  margin: 0 auto;
  padding: 0 5%;
  /* Matches the 5% dashed lines perfectly for layout alignment */

}

/* HEADER */
.pd-header {

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 8px 0;
  background: var(--color-fff0d8);
  border-bottom: 2px solid var(--color-f1c22b);
  width: 100%;
  transition: box-shadow 0.3s ease;
}

.pd-header.sticky-active {

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* NAVBAR GRID */
.pd-navbar {

  display: grid;
  grid-template-columns: 1fr 180px 1.1fr;
  /* Lock middle track to 180px to prevent browser SVG collapse bugs */
  gap: 0;
  align-items: center;
  height: fit-content;
  position: relative;
  width: 100%;
}

/* GROUPS */
.pd-group {

  display: flex;
  align-items: center;
  gap: 54px;
  /* Increased unified gap between all menus */
  padding: 0;
}

/* ALIGN */
.pd-left {

  display: flex;
  align-items: center;
  justify-content: flex-end;
  grid-column: 1;
  padding-right: 54px;
  /* Unified gap spacing to the logo */

}

.pd-right {

  display: flex;
  align-items: center;
  justify-content: flex-start;
  grid-column: 3;
  padding-left: 54px;
  /* Unified gap spacing to the logo */

}

/* LINKS */
.pd-group a {

  text-decoration: none;
  font-weight: 400;
  color: var(--black) !important;
  position: relative;
  transition: all 0.3s ease;
  white-space: nowrap;
  /* Prevent menus from breaking into two lines */

}

.pd-group a:hover {

  color: var(--color-005495) !important;
  /* Inactive menu hover is var(--color-005495) */

}

.pd-group a.active {

  color: var(--color-005495) !important;
  /* Active menu is var(--color-005495) */
  font-weight: 700 !important;
  /* Active menu uses Lato Bold */

}

/* LOGO */
.pd-brand {

  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  grid-column: 2;
  flex-shrink: 0;
  width: 100%;
  padding: 0 8px;
}

.pd-logo {

  height: 160px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}

/* LOGO SHAPE (Deprecated but kept for reference) */
.pd-badge {

  width: 110px;
  height: 90px;
  background: var(--color-0b67b3);
  color: var(--white);
  display: grid;
  place-items: center;
  font-weight: 800;
  border-radius: 18px;
  text-align: center;

  /* exact shape */
  clip-path: polygon(18% 5%,
      82% 5%,
      94% 16%,
      94% 78%,
      82% 95%,
      18% 95%,
      6% 78%,
      6% 16%);
}

/* TAGLINE */
.pd-tag {

  font-weight: 600;
  color: var(--color-0b67b3);
  margin-top: 6px;
}

/* SEARCH */
.pd-search {

  display: flex;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--color-e0e0e0);
  border-radius: 20px;
  padding: 4px 12px;
  height: 30px;
  width: 160px;
  /* Comfortable wider fixed width */
  flex-shrink: 0;
  /* Prevent search bar from shrinking */

}

.pd-search input {

  border: none;
  outline: none;
  background: transparent;
  box-shadow: none;
  width: 100%;
  /* Fill remaining width inside parent */
  color: var(--color-003b6e);
  height: 100%;
  min-width: 0;
  /* Allow graceful shrinkage within fixed parent */

}

.pd-search span {

  color: var(--color-003b6e);
  font-weight: 400;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.pd-search img {

  height: 18px;
  width: 18px;
  /* Fixed width prevents image distortion */
  display: block;
  margin-left: 8px;
  flex-shrink: 0;
  /* Prevent search icon image from shrinking */

}

nav a {

  display: inline-block;
}

/* HAMBURGER */
.pd-hamburger {

  display: none;
  height: 28px;
  width: 28px;
  cursor: pointer;
  justify-self: end;
}

/* MOBILE MENU */
.pd-mobile-menu {

  display: none;
  flex-direction: column;
  background: var(--color-fff0d8);
  padding: 20px;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 10000;
  border-bottom: 2px solid var(--color-f1c22b);
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
  align-items: center;
}

/* MOBILE SEARCH */
.pd-mobile-search {

  display: flex;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--color-e0e0e0);
  border-radius: 20px;
  padding: 8px 15px;
  width: 100%;
  max-width: 300px;
  margin-bottom: 20px;
}

.pd-mobile-search input {

  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  color: var(--color-003b6e);
}

.pd-mobile-search img {

  height: 18px;
  width: 18px;
  margin-left: 10px;
  flex-shrink: 0;
}

.pd-mobile-menu a {

  padding: 12px 0;
  text-decoration: none;
  color: var(--black) !important;
  font-weight: 400;
  /* Inactive menus use Lato Regular */
  text-align: center;
  width: 100%;
  transition: all 0.3s ease;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.pd-mobile-menu a:last-child {

  border-bottom: none;
}

.pd-mobile-menu a:hover {

  color: var(--color-005495) !important;
}

.pd-mobile-menu a.active {

  color: var(--color-005495) !important;
  font-weight: 700 !important;
  /* Active menus use Lato Bold */

}

/* SHOW MENU */
.pd-mobile-menu.active {

  display: flex !important;
}

/* RESPONSIVE (MOBILE & TABLET) */
@media (max-width: 1024px) {

  .pd-header {

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 10px 0;
}

  .pd-header.sticky-active {

    box-shadow: none;
}

  .pd-navbar {

    display: flex;
    justify-content: center;
    position: relative;
    height: auto;
    min-height: 80px;
    margin-left: 0 !important;

    /* Reset user manual hack */
  
}

  /* HIDE DESKTOP */
  .pd-desktop {

    display: none;
}

  /* HAMBURGER */
  .pd-hamburger {

    display: flex;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
}

  /* LOGO CENTER FIX */
  .pd-brand {

    position: relative;
    left: auto;
    top: auto;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
}

  /* LOGO SIZE CONTROL */
  .pd-logo {

    height: 80px;
    transition: height 0.3s ease;
}

  .pd-tag {

    margin-top: 4px;
}

  /* MOBILE MENU POSITIONING */
  .pd-mobile-menu {

    top: 100%;
    /* Align perfectly below header */
  
}
}

/* SMALL MOBILE */
@media (max-width: 480px) {

  .pd-logo {

    height: 65px;
}

  .pd-header {

    padding: 8px 0;
}
}

/* RESPONSIVE MEDIUM DESKTOP (1025px to 1280px) */
@media (max-width: 1280px) and (min-width: 1025px) {

  .pd-navbar {

    grid-template-columns: 1fr 180px 1.08fr !important;
    /* 1.08fr balances the laptop layout beautifully */
  
}

  .pd-group {

    gap: 36px !important;
    /* Unified equal gaps between links */
  
}

  .pd-left {

    justify-content: flex-end !important;
    grid-column: 1 !important;
    padding-right: 36px !important;
    /* Unified gap to the logo */
    padding-left: 0 !important;
}

  .pd-right {

    justify-content: flex-start !important;
    grid-column: 3 !important;
    padding-left: 36px !important;
    /* Unified gap to the logo */
    padding-right: 0 !important;
}

  .pd-shell {

    padding: 0 5% !important;
    /* Keep 5% container padding aligned to guidelines */
  
}

  .pd-group a {

    /* Slightly compact font for neat fit */
  
}

  .pd-search {

    width: 140px !important;
    /* Locked and equal width on smaller desktops */
  
}
}

/* ULTRA-WIDESCREEN DESKTOP (1900px and above) */
@media (min-width: 1900px) {

  .pd-navbar {

    grid-template-columns: 1fr 180px 1.25fr !important;
    /* 1.25fr balances logo centering while reducing outer gaps */
  
}

  .pd-shell {

    padding: 0 5% 0 3.5% !important;
    /* Specifically reduces the leftmost gap before About Paal Dappa for a tight, elegant fit */
  
}

  .pd-group {

    gap: 72px !important;
    /* Reduced outer gaps by expanding menu items spacing */
  
}

  .pd-left {

    padding-right: 72px !important;
    /* Spacing to the logo */
  
}

  .pd-right {

    padding-left: 72px !important;
    /* Spacing to the logo */
  
}

  .pd-group a {

    /* Scaled font size */
  
}

  .pd-search {

    width: 160px !important;
    /* Centered and proportional search box */
  
}
}