body {
  font-family: "Nunito Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin: 0;
  padding: 0;
  height: 100%;
  background: linear-gradient(
    180deg,
    #7096D1 0%,
    #a7c7e7 30%,
    #d0e3ff 60%,
    #f5f9ff 100%
  );
}

/* Header + footer */
header, footer {
  background: white;
  color: #1e3a8a;
  padding: 10px;
  text-align: center;
  /*
  border-top: 2px solid #2563eb;
  border-bottom: 1px solid #2563eb;
  */
}

/* Navbar wrapper */
.navbar {
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 35px;
  background: white;
  border-top: 2px solid #2563eb;   /* top blue line */
  border-bottom: 1px solid #2563eb; /* bottom blue line */
}

/* Logo */
.navbar img {
  height: 40px;
}

/* Center links: grid so indicator math is stable */
.nav-links {
  flex: 1;
  display: flex;
  justify-content: center; /* center the group */
  align-items: center;
  gap: 10px;               /* requested spacing between items */
  margin: 0 auto;
  position: relative;      /* for #indicator positioning */
  padding-bottom: 10px;     /* room for underline */
  background: #fff;
}

.nav-links a {
  display: inline-block;
  position: relative;
  text-align: center;
  font-family: 'Segoe UI', Arial, sans-serif;
  text-decoration: none;
  color: #1e3a8a;
  font-weight: 500;
  font-size: 16px;
  padding: 8px 12px; /* slightly tighter for close spacing */
  transition: color 0.2s ease;
}

.nav-links a:hover { color: #2563eb; }

/* Right side (Contact Us button) */
.nav-action { display: flex; align-items: center; }

.contact-btn {
  padding: 9px 20px;
  border: 1px solid #2563eb;
  border-radius: 6px;
  background: transparent;
  color: #2563eb;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
}

.contact-btn:hover { background: #2563eb; color: #fff; }

/* === Simplified Navbar Underline (4 links, palette applied) === */
.nav-links { 
  position: relative; 
  display: flex;             /* shrink-wrap to text */
  justify-content: center;   
  align-items: center;
  gap: 16px;                 /* spacing between links */
  margin: 0 auto;            
  width: auto;               /* let content define width */
  padding-bottom: 10px;      /* room for underline */
}

.nav-links a {
  position: relative;        /* anchor for ::after underline */
  display: inline-block;     /* size to text */
  text-align: center;
  color: #1e3a8a;            
  text-decoration: none;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  padding: 10px 12px;
  transition: color 0.2s ease;
}

.nav-links a:hover { color: #081F5C; }

/* Per-link underline that matches text width */
.nav-links a::after{
  content:"";
  position:absolute;
  left: 0;
  bottom: 0;                 /* sits at the bottom edge of link */
  height: 3px;               /* underline thickness */
  width: 100%;               /* match text width */
  background: transparent;
  border-radius: 5px;
  transform: scaleX(0);      /* hidden by default */
  transform-origin:left center;
  transition: transform 0.2s ease;
}

/* Colored underline gradients per link */
.nav-links a:nth-child(1)::after{ background: linear-gradient(130deg, #334EAC, #BAD6EB); }
.nav-links a:nth-child(2)::after{ background: linear-gradient(130deg, #F7F2EB, #7096D1); }
.nav-links a:nth-child(3)::after{ background: linear-gradient(130deg, #081F5C, #D0E3FF); }
.nav-links a:nth-child(4)::after{ background: linear-gradient(130deg, #FFF9F0, #334EAC); }

.nav-links a:hover::after,
.nav-links a.active::after{ 
  transform: scaleX(1);      /* reveal underline */
}

/* Decorative dots (use ::before only so ::after can be the underline) */
.nav-links a::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px; /* canvas for both dots */
  height: 14px;
  /* two dots via layered radial-gradients; colors come from CSS variables */
  background:
    radial-gradient(var(--dot1, #334EAC) 60%, transparent 61%) no-repeat 2px 0 / 6px 6px,
    radial-gradient(var(--dot2, #BAD6EB) 60%, transparent 61%) no-repeat 8px 5px / 4px 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.nav-links a:hover::before{ opacity: 1; }

/* Dot colors using your palette */
.nav-links a:nth-child(1){ --dot1:#334EAC; --dot2:#BAD6EB; }
.nav-links a:nth-child(2){ --dot1:#F7F2EB; --dot2:#7096D1; }
.nav-links a:nth-child(3){ --dot1:#081F5C; --dot2:#D0E3FF; }
.nav-links a:nth-child(4){ --dot1:#FFF9F0; --dot2:#334EAC; }

/* Underline indicator */
#indicator{ display:none; }

/* Hover positions & gradients (quarters) */
.nav-links a:nth-child(1):hover ~ #indicator { 
  left: 0%;  
  background: linear-gradient(130deg, #334EAC, #BAD6EB); 
}
.nav-links a:nth-child(2):hover ~ #indicator { 
  left: 25%; 
  background: linear-gradient(130deg, #F7F2EB, #7096D1); 
}
.nav-links a:nth-child(3):hover ~ #indicator { 
  left: 50%; 
  background: linear-gradient(130deg, #081F5C, #D0E3FF); 
}
.nav-links a:nth-child(4):hover ~ #indicator { 
  left: 75%; 
  background: linear-gradient(130deg, #FFF9F0, #334EAC); 
}

/* ==== NilStem tagline: closer and constrained to ~2 lines ==== */
.orbital-menu__center-pic .orbital-menu__tagline{ 
  position:absolute; 
  top: calc(100% + 6px);        /* sits just under the logo */
  left:50%;
  transform: translateX(-50%);
  width: max-content;            /* size to text width */
  max-width: none;               /* allow full single-line width */
  white-space: nowrap;           /* force one line */
  line-height: 1.15; 
  font-weight: 700; 
  font-size: clamp(20px, 2.4vw, 34px); /* responsive but bigger */
  text-align:center;
  margin:0;
}