@font-face {
    font-family: 'Figtree';
    src: url('/wp-content/themes/parul/assets/font/Figtree-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Figtree';
    src: url('/wp-content/themes/parul/assets/font/Figtree-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Figtree';
    src: url('/wp-content/themes/parul/assets/font/Figtree-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Figtree';
    src: url('/wp-content/themes/parul/assets/font/Figtree-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Figtree';
    src: url('/wp-content/themes/parul/assets/font/Figtree-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Polymath Display';
    src: url('/wp-content/themes/parul/assets/font/Polymath-Display-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Polymath Display';
    src: url('/wp-content/themes/parul/assets/font/Polymath-Display-Extralight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Polymath Display';
    src: url('/wp-content/themes/parul/assets/font/Polymath-Display-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Polymath Display';
    src: url('/wp-content/themes/parul/assets/font/Polymath-Display-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Polymath Display';
    src: url('/wp-content/themes/parul/assets/font/Polymath-Display-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Polymath Display';
    src: url('/wp-content/themes/parul/assets/font/Polymath-Display-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Polymath Display';
    src: url('/wp-content/themes/parul/assets/font/Polymath-Display-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Polymath Display';
    src: url('/wp-content/themes/parul/assets/font/Polymath-Display-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root{
  --navy:        #0F0445;
  --warning-yellow:      #FFC800;

  /* These three were used throughout this file (var(--ink),
     var(--muted), var(--border) — 11 places) but were never
     declared here, so every one of those properties was silently
     computing to nothing. Restored with the values this file was
     originally built against. */
  --ink:         #12093f;
  --muted:       #8a8aa0;
  --border:      rgba(15,4,69,.12);

  --header-h:    80px;   /* main bar height, used to size the drawer */
  --utility-h:   62px;

  --font-figtree: 'Figtree', sans-serif;
  --font-display: 'Polymath Display', sans-serif;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family:var(--font-figtree);
  color:var(--ink);
  background:#fff;
}
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

.pu-wrap{
/*   max-width:1320px; */
  margin:0 auto;
  padding:0 24px;
}

/* ============================================================
   HEADER SHELL
============================================================ */
.pu-header{
  position:sticky;
  top:0;
  /* Above the mobile drawer (z-index:160) and its backdrop (150) —
     the drawer has no header of its own, so the real header must
     stay on top and clickable while the drawer is open. */
  z-index:200;
  width:100%;
}

.pu-header{ position:fixed; }
.pu-main{ position:relative; }

/* ---------- utility bar ---------- */
.pu-utility{
  display:flex;
	align-items:center;
	height:62px;
  background:var(--navy);
  color:rgba(255,255,255,.75);
  font-size:13px;
}
.pu-utility-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  height:var(--utility-h);
	width:100%;
}
.pu-utility-phones{ display:flex; gap:1.5rem; flex-shrink:0; }
.pu-phone{ 
display: flex;
padding: 6px 12px;
align-items: center;
gap: 4px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.10);
	color:var(--warning-yellow);
	font-weight:600;
	font-size:12px;
}
.pu-phone span{ color: rgba(255, 255, 255, 0.50); margin-right:.3rem; }

.pu-utility-links{ display:flex; gap:1.75rem; }
.pu-utility-links a{ font-size:12px; color:rgba(255,255,255,1); font-weight:700; }

.pu-utility-actions{ display:flex; align-items:center; gap:.75rem; flex-shrink:0; }
.pu-icon-btn{
  display: flex;
	width: 54.409px;
	padding: 8.636px 10.364px;
	justify-content: center;
	align-items: center;
	gap: 6.909px;
  border-radius: 62.182px;
  border: 1.727px solid #FFC800;
  color:var(--warning-yellow);
}
/* ---------- search toggle ---------- */
.pu-utility-actions{ position:relative; }  /* add position:relative to the existing rule */

.pu-search-box{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:280px;
  background:#fff;
  border-radius:10px;
  box-shadow:0 20px 45px rgba(6,2,40,.22);
  padding:10px;
  z-index:60;
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.pu-search-box.is-open{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.pu-search-form{ display:flex; gap:8px; }
.pu-search-input{
  flex:1;
  min-width:0;
  border:1px solid var(--border);
  border-radius:8px;
  padding:.5rem .75rem;
  font-size:14px;
  font-family:inherit;
  color:var(--ink);
}
.pu-search-input:focus{ outline:2px solid var(--navy); outline-offset:1px; }
.pu-search-submit{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  flex-shrink:0;
  border-radius:8px;
  background:var(--navy);
  color:#fff;
}
.pu-login{
  display: flex;
width: 144px;
padding: 10px 12px;
justify-content: center;
align-items: center;
gap: 8px;
	border-radius: 72px;
border: 2px solid rgba(255, 255, 255, 0.40);
  color:#fff;
	font-size:12px;
  font-weight:400;
  white-space:nowrap;
}
.pu-login svg, path{
	color: inherit;
}
.pu-login:hover{ border-color:rgba(255,255,255,.6); }

/* ---------- main bar ---------- */
.pu-main{
  background: #F5F5F5;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.10);
}
.pu-main-inner{
  display:flex;
  align-items:center;
  gap:2rem;
  height:var(--header-h);
}

.pu-logo{
  flex-shrink:0;
  font-weight:800;
  font-size:20px;
  color:var(--navy);
  white-space:nowrap;
}
.pu-logo sup{ font-size:11px; margin-left:1px; }
.pu-logo-mobile{ display:none; }
/* ---------- desktop nav ---------- */
.pu-nav{ display:flex; justify-content:center; flex:1; min-width:0; }
.pu-nav-list{
  display:flex;
  align-items:center;
  gap:1.9rem;
  flex-wrap:nowrap;
}
.is-open .pu-nav-link{
	display: flex;
	padding: 6px 6px 6px 8px;
	align-items: center;
	gap: 4px;
	border-radius: 4px;
background: rgba(15, 4, 69, 0.10);
	color: #0F0445;

}
.pu-nav-link{
  display:inline-flex;
  align-items:center;
  color: rgba(15, 4, 69, 0.50);
  text-align: center;
font-size: 14px;
font-weight: 400;
  white-space:nowrap;
}
a.pu-nav-link:hover,
button.pu-nav-link:hover{ color:var(--navy); }

.pu-caret{ width:14px; height:14px; transition:transform .2s ease; color:var(--muted); }
.pu-caret path { color: inherit; }
.has-mega .pu-caret{ transform:rotate(180deg); }
.has-mega.is-open .pu-caret{ transform:rotate(360deg); }
.has-mega.is-open > .pu-nav-link{ color:var(--navy); }

/* ---------- apply button + burger ---------- */
.pu-apply{
  flex-shrink:0;
  background:var(--warning-yellow);
  color:var(--navy);
  font-weight:700;
  font-size:14px;
  border-radius:999px;
  padding:.65rem 1.5rem;
}
.pu-apply:hover{ background:#ffd633; }

.pu-burger{
  display:none;
  align-items:center;
  justify-content:center;
  width:75px; height:75px;
  flex-shrink:0;
}
.pu-burger svg{
  display:block;
  width:40px; height:40px;
}
/* The drawer has no header of its own now — the real .pu-main-inner
   bar (logo + this button) stays visible and doubles as the drawer's
   header, so this button itself needs to show the close (X) icon
   while the drawer is open.
   Selectors below are qualified as ".pu-burger .pu-burger-icon-*"
   (two classes), not just ".pu-burger-icon-*" alone — the plain
   single-class form loses to ".pu-burger svg" above on specificity
   (0,1,1 beats 0,1,0), so the close icon would never actually hide. */
.pu-burger .pu-burger-icon-close{ display:none; }
.pu-burger.is-open .pu-burger-icon-open{ display:none; }
.pu-burger.is-open .pu-burger-icon-close{ display:block; }

/* ============================================================
   MEGA MENU
   ------------------------------------------------------------
   .mega-top can hold EITHER
     .mega-feature + .mega-cols--2   (design 2: "About Us")
   OR
     .mega-cols--4                   (design 1: "Faculties")
   .mega-promos is optional in both and always the same markup,
   so one ACF "promo cards" repeater serves every menu.
============================================================ */
.pu-mega{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  width:min(1200px, 95vw);
  max-width:calc(100vw - 32px);
  margin-top:14px;
  background:#fff;
  border-radius:20px;
  box-shadow:0 30px 70px rgba(6,2,40,.22);
/*   border:1px solid var(--border); */
  opacity:0;
  visibility:hidden;
  transform:translateX(-50%) translateY(8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:50;
}
.has-mega.is-open .pu-mega{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}
.pu-mega-inner{ padding:28px 32px 24px; }

.mega-top{ display:block; }
.mega-top--feature{
  display:grid;
  grid-template-columns:400px 1fr;
  gap:32px;
  margin-bottom:24px;
}

.mega-feature{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.55rem;
  padding:22px;
  border-radius:16px;
  background:url('https://www.paruluniversity.ac.in/wp-content/uploads/2026/09/menubg.gif');
  color:#fff;
  min-height:190px;
}
.mega-feature-eyebrow{
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--warning-yellow);
}
.mega-feature-title{ font-size:32px; font-family:var(--font-display); font-weight:700; line-height:1.2; color: inherit; }
.mega-feature-text{ font-size:14px; line-height:1.45; color:rgba(255,255,255,1); }
.mega-feature-btn{
  display: flex;
	min-width: 152px;
	height: 37px;
	padding: 10px 12px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	border-radius: 72px;
border: 2px solid rgba(255, 255, 255, 0.40);
  margin-top:.4rem;
  background:var(--warning-yellow);
  color:var(--navy);
  font-weight:700;
  font-size:14px;
  border-radius:999px;
  padding:.5rem 1.1rem;
}

.mega-cols{
  display:grid;
  gap:28px;
/*  margin-left:50px; */
  grid-template-columns:repeat(var(--cols, 2), 1fr);
}
.mega-cols--2{ --cols:2; }
.mega-cols--4{ --cols:4; }

.mega-col-title{
  margin:0 0 .65rem;
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  color: #E73649;
  padding-bottom:.55rem;
  border-bottom:1px solid var(--navy);
}
.mega-links li{ margin-bottom:1rem; }
.mega-links a{
  position:relative;
  padding-left:14px;
  font-size:14px;
  font-weight:700;
  color:var(--navy);
	
}
.mega-links a,.mega-links a:hover{
	text-decoration:none;
}
.mega-links a::before{
  content:"";
  position:absolute;
  left:0; top:.5em;
  width:5px; height:5px;
  border-radius:50%;
  background:var(--warning-yellow);
}

/* ---------- promo row (optional, shared shape) ---------- */
.mega-promos{
  display:grid;
  grid-template-columns:repeat(2, 1fr) 2fr;
  gap:16px;
}
.mega-promo{
  position:relative;
  display: flex;
	padding: 20px;
	flex-direction: column;
	justify-content: center;

	gap: 10px;
	align-self: stretch;
  border-radius: 16px;
background: linear-gradient(0deg, #0F0445 0%, #0F0445 100%), #FFF;
  min-height:150px;
	overflow:hidden;
}
.mega-promo-tag{
	font-size: 10px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
  text-transform:uppercase;
  color:var(--warning-yellow);
	text-align:left;
}
.mega-promo-text{
  font-size:24px;
  font-weight:700;
  color:#fff;
	font-family:var(--font-display);
}
.mega-promo--wide .mega-promo-text{ max-width:60%; }
.mega-promo-img{
  position:absolute;
  right:-30px;
 bottom:-120px;
  width:250px; height:250px;
}

/* ============================================================
   MOBILE DRAWER  (< 992px)
============================================================ */
.pu-drawer,
.pu-backdrop{ display:none; }

@media (max-width: 991.98px){
	.pu-main-inner{justify-content:space-between; height:80px;}
	.pu-utility{display:none;}
/* 	.mega-links{border-bottom:1px solid rgb(0 0 0 / 20%);} */
	.mega-links{padding-bottom:20px;}
  .pu-nav,
  .pu-apply{ display:none; }
  .pu-burger{ display:flex; }
  .pu-main{ background:var(--navy); }
  .pu-logo img{ height:35px;}
	.pu-logo-desktop{ display:none; }
.pu-logo-mobile{ display:block; }

  .pu-utility-links{ display:none; }
  .pu-utility-phones{ gap:.9rem; }
  .pu-utility-phones .pu-phone span{ display:none; }

  .pu-utility-actions{ display:none; }

  .pu-backdrop{
    display:block;
    position:fixed;
    top:var(--pu-drawer-top, 0px); left:0; right:0; bottom:0;
    background:rgba(6,2,32,.45);
    z-index:150;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
  }
  .pu-backdrop.is-open{ opacity:1; pointer-events:auto; }

  .pu-drawer{
    display:flex;
    flex-direction:column;
    position:fixed;
    top:var(--pu-drawer-top, 0px); left:0;
    width:100%;   /* was min(420px, 92vw) — see note above */
    height:calc(100% - var(--pu-drawer-top, 0px));
    background:#fff;
    z-index:160;
    opacity:0;   /* was transform:translateX(100%) — reference design fades in, doesn't slide from the right */
    transition:opacity .28s ease;
    pointer-events:none;
  }
  .pu-drawer.is-open{ opacity:1; pointer-events:auto; }

  .pu-drawer-body{
    flex:1;
    overflow-y:auto;
    padding:8px 20px 28px;
  }

  /* accordion */
  /* Every row now has its own background + border-radius (closed:
     #F5F5F5, open: navy), not just the open one — a border-bottom
     divider would poke out past those rounded corners. Spacing
     between rows instead. */
  .pu-acc{ margin-bottom:8px; }
  .pu-acc:last-of-type{ margin-bottom:0; }
  .pu-acc-head{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 16px;
    font-size:16px;
    font-weight:700;
    text-align:left;
    color:var(--navy);
    background:#F5F5F5;
    border-radius:4px;
    transition:background .2s ease, color .2s ease, border-radius .2s ease;
  }
  .pu-acc-head svg{ width:16px; height:16px; transition:transform .2s ease; flex-shrink:0; color:var(--navy); }
  .pu-acc.is-open .pu-acc-head svg{ transform:rotate(180deg); }

  /* Active/open state — navy bar with yellow text, matching the
     reference design exactly. */
  .pu-acc.is-open .pu-acc-head{
    background:var(--navy);
    color:var(--warning-yellow);
    padding:14px 16px;
    border-radius:4px;
  }
  .pu-acc.is-open .pu-acc-head path{ color:#fff; }

  /* Plain nav items (no mega menu) render as a direct link in the
     drawer instead of an accordion toggle — there's nothing to
     expand, so no caret and no reason to push it to the far right. */
  .pu-acc-head--plain{ justify-content:flex-start; gap:.4rem; }

  .pu-acc-body{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .25s ease;
  }
  .pu-acc-body > *{ overflow:hidden; min-height:0; }
  .pu-acc.is-open .pu-acc-body{ grid-template-rows:1fr; }

  /* The actual light-grey card (background:#E7E6EC / border-radius:4px,
     the exact values from the reference design). This CANNOT go on
     .pu-acc-body or .pu-acc-body-inner directly — either one carrying
     padding would stop the 0fr collapse above from ever reaching true
     0 (a box can't render shorter than its own padding under
     box-sizing:border-box, confirmed by measuring it live earlier:
     18px of padding on .pu-acc-body-inner left an 18px sliver of the
     "closed" panel visible instead of 0). .pu-acc-panel is one more
     wrapper INSIDE .pu-acc-body-inner for exactly that reason — see
     header-new.php, where the drawer's column/feature markup is now
     wrapped in <div class="pu-acc-panel">. */
  .pu-acc-panel{
    background:#E7E6EC;
    border-radius:4px;
    padding:16px 20px;
    margin-top:10px;
  }

  .pu-acc-body-inner > *:last-child{ margin-bottom:18px; }

  /* reuse the same mega-col-title / mega-links / mega-feature
     styles from desktop — only the surrounding layout changes */
  .pu-acc-body .mega-col-title{ margin-top:1rem; }
  .pu-acc-body .mega-col-title:first-child{ margin-top:0; }
  .pu-acc-body .mega-feature{ margin-top:1.25rem; min-height:0; }

	
}



/* ============================================================
   DEMO FILLER (prototype only — delete in production)
============================================================ */
.demo{
  max-width:900px;
  margin:80px auto;
  padding:0 24px;
  color:var(--ink);
}
.demo h1{ font-size:28px; }
.demo p{ color:var(--muted); }