/* ==========================================================
   NICE PREMIUM GLOBAL UNIVERSITY THEME V3
   Pakistan Government Green / White / Premium Gold
   ========================================================== */

:root{
  --nice-green-950:#002B14;
  --nice-green-900:#00351A;
  --nice-green-850:#004522;
  --nice-green-800:#01411C;
  --nice-green-700:#056338;
  --nice-green-600:#047857;
  --nice-green-500:#059669;
  --nice-green-400:#34D399;
  --nice-green-300:#6EE7B7;
  --nice-green-100:#D1FAE5;
  --nice-green-50:#ECFDF5;

  --nice-gold:#C9A227;
  --nice-gold-light:#F2D675;

  --nice-text:#10241A;
  --nice-muted:#66766E;

  --nice-white:#FFFFFF;
  --nice-paper:#FBFDFB;
  --nice-soft:#F5F9F6;

  --nice-border:rgba(1,65,28,.12);

  --nice-shadow:
    0 18px 48px rgba(0,43,20,.10);

  --nice-shadow-hover:
    0 25px 60px rgba(0,43,20,.17);
}

/* ---------- GLOBAL ---------- */

html{
  scroll-behavior:smooth;
}

body{
  background:var(--nice-paper) !important;
  color:var(--nice-text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.font-display,
h1,h2,h3,h4{
  font-family:
    Georgia,
    "Times New Roman",
    serif !important;
  letter-spacing:-.018em;
}

p,
a,
button,
span,
input,
textarea{
  font-family:
    "DM Sans",
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

/* ---------- MAIN NAV ---------- */

nav.fixed{
  background:
    rgba(255,255,255,.96) !important;

  backdrop-filter:
    blur(18px) saturate(150%) !important;

  border-bottom:
    1px solid rgba(1,65,28,.12) !important;

  box-shadow:
    0 8px 28px rgba(0,43,20,.07);

  z-index:100 !important;
}

nav.fixed > div:first-child{
  min-height:74px;
}

nav.fixed .nav-link{
  color:#173A29 !important;
  font-weight:600 !important;
  position:relative;
}

nav.fixed .nav-link::after{
  content:"";
  position:absolute;
  height:2px;
  left:50%;
  right:50%;
  bottom:-9px;
  background:var(--nice-gold);
  transition:.25s ease;
}

nav.fixed .nav-link:hover{
  color:var(--nice-green-800) !important;
}

nav.fixed .nav-link:hover::after{
  left:0;
  right:0;
}

nav.fixed .text-white,
nav.fixed .text-blue-100,
nav.fixed .text-blue-200,
nav.fixed .text-blue-300,
nav.fixed .text-blue-400{
  color:var(--nice-green-800) !important;
}

nav.fixed .btn-primary,
nav.fixed a.btn-primary{
  color:#fff !important;
}

/* logo block */

nav.fixed .w-9.h-9{
  background:
    linear-gradient(
      135deg,
      var(--nice-green-800),
      var(--nice-green-600)
    ) !important;

  box-shadow:
    0 8px 22px rgba(1,65,28,.22);
}

/* hamburger */

nav.fixed button.lg\:hidden{
  background:var(--nice-green-800);
  border-radius:10px;
  padding:10px !important;
}

nav.fixed button.lg\:hidden .bg-white{
  background:#fff !important;
}

/* ---------- MOBILE MENU ---------- */

nav.fixed > div.lg\:hidden{
  background:
    rgba(0,53,26,.985) !important;

  border-top:
    1px solid rgba(255,255,255,.10) !important;

  box-shadow:
    0 20px 40px rgba(0,0,0,.18);
}

nav.fixed > div.lg\:hidden a{
  color:#E8FFF3 !important;
  border-color:rgba(255,255,255,.09) !important;
  font-size:14px !important;
  padding:13px 5px !important;
}

nav.fixed > div.lg\:hidden a:hover{
  color:#fff !important;
}

/* ---------- HERO ---------- */

#home{
  min-height:730px;

  padding-top:128px !important;
  padding-bottom:90px !important;

  background:
    linear-gradient(
      108deg,
      rgba(255,255,255,.99) 0%,
      rgba(250,253,251,.98) 47%,
      rgba(232,247,237,.92) 100%
    ) !important;

  color:var(--nice-text);
}

/* blended skyline across hero */

#home::before{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:47%;
  pointer-events:none;

  background-image:
    url("/nice-pakistan-landmarks.svg");

  background-size:
    cover;

  background-position:
    center bottom;

  background-repeat:
    no-repeat;

  opacity:.58;
}

/* white fade over skyline */

#home::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    radial-gradient(
      circle at 70% 35%,
      rgba(52,211,153,.12),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,0) 55%,
      rgba(255,255,255,.72) 100%
    );
}

#home .grid-overlay{
  opacity:.13 !important;

  background-image:
    linear-gradient(
      rgba(1,65,28,.08) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(1,65,28,.08) 1px,
      transparent 1px
    ) !important;

  background-size:
    44px 44px !important;
}

#home .hero-glow{
  opacity:.22 !important;
  filter:blur(50px);
}

#home h1{
  color:#10241A !important;

  font-size:
    clamp(3rem,5.2vw,5.8rem) !important;

  line-height:
    .99 !important;

  max-width:700px;

  text-wrap:balance;
}

#home h1 .gradient-text{
  background:
    linear-gradient(
      90deg,
      var(--nice-green-800),
      var(--nice-green-600)
    ) !important;

  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
}

#home p.text-blue-200{
  color:#52665B !important;

  font-size:
    clamp(1rem,1.25vw,1.18rem) !important;

  line-height:1.8 !important;
}

#home .text-blue-300{
  color:#466356 !important;
}

/* hero course tags */

.course-tag{
  color:var(--nice-green-800) !important;

  background:
    rgba(255,255,255,.72) !important;

  border:
    1px solid rgba(1,65,28,.14) !important;

  box-shadow:
    0 6px 18px rgba(0,43,20,.05);

  backdrop-filter:
    blur(8px);
}

/* gold badge */

.badge-gold{
  background:
    #FFF9E8 !important;

  color:
    #866A00 !important;

  border:
    1px solid rgba(201,162,39,.38) !important;
}

/* ---------- HERO BUTTONS ---------- */

.btn-primary{
  background:
    linear-gradient(
      135deg,
      var(--nice-green-800),
      var(--nice-green-600)
    ) !important;

  box-shadow:
    0 12px 28px rgba(1,65,28,.23) !important;

  border:
    1px solid rgba(255,255,255,.12) !important;

  transition:
    transform .25s ease,
    box-shadow .25s ease !important;
}

.btn-primary:hover{
  transform:
    translateY(-2px);

  box-shadow:
    0 18px 34px rgba(1,65,28,.30) !important;
}

.btn-outline{
  border:
    1px solid rgba(1,65,28,.28) !important;

  color:
    var(--nice-green-800) !important;

  background:
    rgba(255,255,255,.82) !important;

  backdrop-filter:
    blur(10px);
}

.btn-outline:hover{
  background:
    var(--nice-green-50) !important;
}

/* ---------- REPLACE EXISTING RIGHT HERO CARD VISUALLY ---------- */

/*
 Existing React dashboard is preserved in DOM,
 but visually hidden.
*/

#home
.grid.lg\:grid-cols-2
> div:nth-child(2)
> *{
  opacity:0 !important;
  pointer-events:none !important;
}

/*
 The parent becomes the premium computer/books hero image.
*/

#home
.grid.lg\:grid-cols-2
> div:nth-child(2){

  min-height:555px;

  background:
    url("/nice-premium-hero.svg")
    center center /
    contain
    no-repeat;

  filter:
    drop-shadow(
      0 28px 34px rgba(0,43,20,.12)
    );

  position:relative;
}

/* ---------- STATS BAR IMMEDIATELY AFTER HERO ---------- */

#home + section{
  background:
    linear-gradient(
      90deg,
      var(--nice-green-900),
      var(--nice-green-800),
      #00562B
    ) !important;

  border-top:
    1px solid rgba(255,255,255,.08);

  border-bottom:
    1px solid rgba(255,255,255,.08);

  box-shadow:
    0 16px 36px rgba(0,43,20,.14);
}

#home + section p.text-blue-300{
  color:#CFF8DF !important;
}

/* ---------- SECTION SYSTEM ---------- */

section{
  position:relative;
}

.section-alt{
  background:
    linear-gradient(
      180deg,
      #F7FBF8,
      #F2F8F4
    ) !important;
}

.section-divider{
  background:
    linear-gradient(
      90deg,
      var(--nice-green-800),
      var(--nice-gold)
    ) !important;

  height:3px !important;
  width:64px !important;
  border-radius:10px;
}

.gradient-text-gold{
  background:
    linear-gradient(
      90deg,
      #8A6A00,
      var(--nice-gold)
    ) !important;

  -webkit-background-clip:
    text !important;

  background-clip:
    text !important;

  color:
    transparent !important;
}

/* ---------- UNIFY BLUE TEXT ---------- */

.text-blue-100{
  color:#D9F8E7 !important;
}

.text-blue-200{
  color:#BEEED3 !important;
}

.text-blue-300{
  color:#A7E6C2 !important;
}

.text-blue-400{
  color:#34D399 !important;
}

/* ---------- CARDS ---------- */

.card-hover,
.stat-card{
  background:
    rgba(255,255,255,.96) !important;

  border:
    1px solid var(--nice-border) !important;

  box-shadow:
    0 10px 30px rgba(0,43,20,.065);

  transition:
    transform .28s ease,
    box-shadow .28s ease,
    border-color .28s ease !important;
}

.card-hover:hover,
.stat-card:hover{
  transform:
    translateY(-6px) !important;

  border-color:
    rgba(4,120,87,.26) !important;

  box-shadow:
    var(--nice-shadow-hover) !important;
}

/* all colored course-card headers become premium soft green */

.web-card,
.ai-card,
.lms-card,
.cyber-card,
.data-card{
  background:
    linear-gradient(
      135deg,
      #F3FBF6,
      #E9F6EE
    ) !important;
}

/* ---------- BADGES ---------- */

.badge-blue,
.badge-purple,
.badge-green,
.badge-red{
  background:
    var(--nice-green-50) !important;

  color:
    var(--nice-green-700) !important;

  border:
    1px solid rgba(4,120,87,.16) !important;
}

.badge-gold{
  background:
    #FFF8E0 !important;

  color:
    #886B00 !important;
}

/* ---------- FEATURE ICON ---------- */

.feature-icon{
  background:
    linear-gradient(
      145deg,
      var(--nice-green-50),
      var(--nice-green-100)
    ) !important;

  color:
    var(--nice-green-800) !important;

  border:
    1px solid rgba(4,120,87,.14);
}

/* ---------- TABS ---------- */

.tab-active{
  background:
    linear-gradient(
      135deg,
      var(--nice-green-800),
      var(--nice-green-600)
    ) !important;

  color:
    #fff !important;

  border-color:
    transparent !important;
}

.tab-inactive{
  background:
    #F6FAF7 !important;

  color:
    #53685C !important;

  border:
    1px solid rgba(1,65,28,.10) !important;
}

.tab-inactive:hover{
  background:
    var(--nice-green-50) !important;

  color:
    var(--nice-green-800) !important;
}

/* ---------- LINKS ---------- */

a{
  text-underline-offset:3px;
}

a:hover{
  text-decoration-color:
    var(--nice-gold);
}

/* ---------- INPUTS ---------- */

input,
textarea,
select{
  border-color:
    rgba(1,65,28,.16) !important;
}

input:focus,
textarea:focus,
select:focus{
  outline:
    2px solid rgba(52,211,153,.28) !important;

  border-color:
    var(--nice-green-600) !important;
}

/* ---------- FOOTER ---------- */

footer{
  background:
    linear-gradient(
      145deg,
      #002B14 0%,
      #003D1E 50%,
      #002713 100%
    ) !important;

  position:relative;
  overflow:hidden;
}

footer::before{
  content:"";

  position:absolute;
  inset:0 0 auto 0;

  height:220px;

  background:
    url("/nice-pakistan-landmarks.svg")
    center top /
    cover
    no-repeat;

  opacity:.19;

  pointer-events:none;
}

footer > *{
  position:relative;
  z-index:2;
}

footer .text-gray-400{
  color:#C6D8CD !important;
}

footer .text-gray-500,
footer .text-gray-600{
  color:#97ADA0 !important;
}

/* ---------- ACCESSIBILITY / MODERN MOTION ---------- */

button,
a,
.card-hover{
  transition-duration:.24s;
}

@media(prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }

}

/* ==========================================================
   TABLET
   ========================================================== */

@media(max-width:1023px){

  #home{
    padding-top:110px !important;
  }

  #home
  .grid.lg\:grid-cols-2
  > div:nth-child(2){
    min-height:460px;
    margin-top:10px;
  }

  nav.fixed .nav-link::after{
    display:none;
  }

}

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

@media(max-width:767px){

  nav.fixed > div:first-child{
    min-height:64px;
  }

  #home{
    min-height:auto;

    padding-top:
      94px !important;

    padding-bottom:
      54px !important;
  }

  #home h1{
    font-size:
      clamp(2.55rem,12vw,4rem) !important;

    line-height:
      1.02 !important;
  }

  #home p.text-blue-200{
    font-size:
      1rem !important;
  }

  #home
  .grid.lg\:grid-cols-2{
    gap:18px !important;
  }

  #home
  .grid.lg\:grid-cols-2
  > div:nth-child(2){

    min-height:
      345px;

    background-position:
      center center;

    margin-top:
      4px;
  }

  #home::before{
    height:30%;
    opacity:.35;
  }

  .course-tag{
    font-size:
      11px !important;
  }

  #home .btn-primary,
  #home .btn-outline{
    width:100%;
    text-align:center;
  }

  #home + section{
    border-radius:0;
  }

  .card-hover:hover{
    transform:none !important;
  }

}

/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media(max-width:420px){

  #home
  .grid.lg\:grid-cols-2
  > div:nth-child(2){

    min-height:
      285px;
  }

  #home h1{
    font-size:
      2.55rem !important;
  }

}