
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root{
  --nice-green-950:#002B14;
  --nice-green-900:#00351A;
  --nice-green-850:#01411C;
  --nice-green-800:#056338;
  --nice-green-700:#047857;
  --nice-green-600:#059669;
  --nice-green-400:#34D399;
  --nice-green-300:#6EE7B7;
  --nice-green-100:#D1FAE5;
  --nice-green-50:#ECFDF5;
  --nice-gold:#C9A227;
  --nice-text:#10241A;
  --nice-muted:#5E7166;
  --nice-border:rgba(1,65,28,.12);
  --nice-shadow:0 18px 50px rgba(0,43,20,.10);
}

html{scroll-behavior:smooth;}

body,
button,
input,
textarea,
select,
a,
span,
p,
li{
  font-family:"Manrope",Inter,system-ui,-apple-system,sans-serif !important;
}

h1,h2,h3,h4,h5,h6,
.font-display{
  font-family:"Plus Jakarta Sans","Manrope",Inter,sans-serif !important;
  letter-spacing:-.03em !important;
}

/* Top navbar */
nav.fixed{
  background:rgba(255,255,255,.95) !important;
  backdrop-filter:blur(18px) saturate(160%) !important;
  border-bottom:1px solid rgba(1,65,28,.10) !important;
  box-shadow:0 10px 30px rgba(0,43,20,.06) !important;
}
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:#17432F !important;
}
nav.fixed .nav-link{
  color:#163C2A !important;
  font-weight:700 !important;
}
nav.fixed .nav-link:hover{
  color:#01411C !important;
}
nav.fixed .w-9.h-9{
  background:linear-gradient(135deg,#01411C,#047857) !important;
}

/* Hero */
#home{
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(241,249,244,.95)),
    #fff !important;
  position:relative;
  overflow:hidden;
}
#home::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:220px;
  background:url("/nice-tech-overlay.svg") center top / cover no-repeat;
  opacity:.9;
  pointer-events:none;
}
#home::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:44%;
  background:url("/nice-pakistan-landmarks-v2.svg") center bottom / cover no-repeat;
  opacity:.50;
  pointer-events:none;
}
#home .grid-overlay{
  opacity:.11 !important;
}
#home h1{
  color:#10241A !important;
  font-size:clamp(2.9rem,5.2vw,5.6rem) !important;
  line-height:1.02 !important;
}
#home h1 .gradient-text{
  background:linear-gradient(90deg,#01411C,#047857) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
}
#home p.text-blue-200{
  color:#5B6F64 !important;
  font-size:clamp(1rem,1.15vw,1.15rem) !important;
  line-height:1.8 !important;
}
#home .course-tag{
  background:rgba(255,255,255,.75) !important;
  border:1px solid rgba(1,65,28,.10) !important;
  color:#17432F !important;
  box-shadow:0 10px 20px rgba(0,43,20,.05);
}
.badge-gold{
  background:#FFF8E2 !important;
  border:1px solid rgba(201,162,39,.32) !important;
  color:#876A00 !important;
}
.btn-primary{
  background:linear-gradient(135deg,#01411C,#047857) !important;
  box-shadow:0 14px 30px rgba(1,65,28,.22) !important;
}
.btn-outline{
  color:#01411C !important;
  border:1px solid rgba(1,65,28,.22) !important;
  background:rgba(255,255,255,.8) !important;
}
#home .text-blue-300{
  color:#4E665A !important;
}

/* Modern cards */
.card-hover,
.stat-card,
[class*="cardBg"],
.bg-white.rounded-2xl,
.bg-white.rounded-xl{
  border:1px solid rgba(1,65,28,.08) !important;
  box-shadow:0 14px 40px rgba(0,43,20,.06) !important;
  border-radius:22px !important;
}
.card-hover:hover,
.stat-card:hover{
  transform:translateY(-5px);
  box-shadow:0 20px 52px rgba(0,43,20,.12) !important;
}

/* Section consistency */
.section-alt{
  background:linear-gradient(180deg,#F8FCF9,#F2F8F4) !important;
}
.section-divider{
  background:linear-gradient(90deg,#01411C,#C9A227) !important;
  height:3px !important;
  border-radius:999px;
}
.gradient-text-gold{
  background:linear-gradient(90deg,#8A6A00,#C9A227) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
}

/* Stats section */
#home + section{
  background:linear-gradient(90deg,#002B14,#01411C,#056338) !important;
}
#home + section .text-blue-300{
  color:#D1FAE5 !important;
}

/* Footer */
footer{
  background:linear-gradient(145deg,#002B14,#00351A,#002713) !important;
  position:relative;
  overflow:hidden;
}
footer::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:210px;
  background:url("/nice-pakistan-landmarks-v2.svg") center top / cover no-repeat;
  opacity:.18;
  pointer-events:none;
}
footer *{
  position:relative;
  z-index:2;
}
footer .text-gray-400,
footer .text-gray-500,
footer .text-gray-600{
  color:#C7DACE !important;
}

/* Mobile menu still works, just styled */
nav.fixed > div.lg\:hidden{
  background:rgba(0,53,26,.98) !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
}
nav.fixed > div.lg\:hidden a{
  color:#EBFFF3 !important;
}
nav.fixed button.lg\:hidden{
  background:#01411C !important;
  border-radius:12px !important;
  padding:10px !important;
}
nav.fixed button.lg\:hidden .bg-white{
  background:#fff !important;
}

/* Replace blue shades globally */
.text-blue-100{color:#E5FFF1 !important;}
.text-blue-200{color:#CDEEDC !important;}
.text-blue-300{color:#9DCCB3 !important;}
.text-blue-400{color:#34D399 !important;}

.badge-blue,
.badge-purple,
.badge-green,
.badge-red,
.badge-gold{
  border-radius:999px !important;
}

/* Responsive */
@media (max-width: 767px){
  #home{
    padding-top:96px !important;
  }
  #home::before{
    height:140px;
    opacity:.85;
  }
  #home::after{
    height:28%;
    opacity:.36;
  }
  #home h1{
    font-size:clamp(2.3rem,10vw,3.4rem) !important;
  }
}
