h2 {
  font-size: 46px;
  font-weight: 700;
}


/* ================= GLASS NAVBAR ================= */
.navbar {
  background: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 0;
  z-index: 999;
}

/* ================= LOGO ================= */
.logo-text {
  line-height: 1.1;
}

.logo-text strong {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: #2a0db8;
}

.logo-text span {
  font-size: 14px;
  color: #e11c2a;
}

/* ================= NAV LINKS ================= */
.navbar .nav-link,
.navbar .dropdown-toggle {
  font-size: 15px;
  font-weight: 500;
  color: #000;
  padding: 8px 14px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

/* HOVER */
.navbar .nav-link:hover,
.navbar .dropdown-toggle:hover {
  background: rgba(13, 110, 253, 0.1);
  color: #0d6efd;
}

/* ACTIVE */
.navbar .nav-link.active {
  color: #0d6efd;
  background: rgba(13, 110, 253, 0.15);
}

/* ================= DROPDOWN ================= */
.dropdown-menu {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
  padding: 10px;
}

/* DROPDOWN ITEMS */
.dropdown-item {
  border-radius: 8px;
  padding: 10px 14px;
  transition: all 0.25s ease;
}

.dropdown-item:hover {
  background: rgba(13, 110, 253, 0.12);
  color: #0d6efd;
}

/* ================= TOGGLER ================= */
.navbar-toggler {
  border: none;
}

.navbar-toggler:focus {
  box-shadow: none;
}

/* ================= MOBILE ================= */
@media (max-width: 991px) {
  .navbar-collapse {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: 16px;
    padding: 15px;
    margin-top: 10px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
  }
}


/* ================= HERO ================= */
.hero-section {
  min-height: 300px;
  background: linear-gradient(135deg, #020024, #090979, #6e0ca3, #006d83);
  padding: 80px 15px;
}

.hero-title {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 20px;
}

.hero-subtitle {
  font-size: 18px;
  max-width: 900px;
  margin: auto;
  line-height: 1.6;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 991px) {
  .hero-title {
    font-size: 36px;
  }
}

@media (max-width: 576px) {
  .hero-section {
    min-height: auto;
    padding: 60px 15px;
  }

  .hero-title {
    font-size: 28px;
  }

  .hero-subtitle {
    font-size: 16px;
  }
}



/* ================== FEATURED SECTION ================== */
/* ================== SECTION ================== */
.featured-universities {
  background: #f8f9fa;
}

/* ================== LINK RESET ================== */
.university-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  height: 100%;
}

/* ================== BASE CARD ================== */
.university-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;

  height: 100%;
  border-radius: 18px;
  overflow: hidden;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* ================== HOVER ================== */
.university-card-link:hover .university-card {
  transform: translateY(-6px);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
}

/* ================== CONTENT ================== */
.card-content {
  max-width: 65%;
  padding: 34px;
}

.university-card h4 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #ffffff;
}

.university-card p {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 18px;
}

/* ================== CTA ================== */
.card-cta {
  display: inline-block;
  background: #ffffff;
  color: #333;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
}

/* ================== IMAGE ================== */
.card-image {
  flex-shrink: 0;
}

.card-image img {
  width: 276px;
  height: 291px;
  object-fit: cover;
  background: #ffffff;
}

/* ================== BACKGROUNDS ================== */
.bg-upes {
  background: linear-gradient(90deg, #021a5e, #00c6ff);
}

.bg-graphic-era {
  background: linear-gradient(90deg, rgb(212, 75, 0), #ffc354);
}

.bg-graphic-era-hill {
  background: linear-gradient(90deg, #8c0101, #ff7777);
}

.bg-uit {
  background: linear-gradient(90deg, #021a5e, #00c6ff);
}

/* =================================================
   RESPONSIVE SCALING (LAYOUT DOES NOT CHANGE)
================================================= */

/* ---- Small Laptops (≤ 1200px) ---- */
@media (max-width: 1200px) {
  .card-content {
    padding: 28px;
    max-width: 60%;
  }

  .card-image img {
    width: 222px;
    height: 381px;
  }
}

/* ---- Tablets (≤ 992px) ---- */
@media (max-width: 992px) {
  .university-card {
    gap: 20px;
  }

  .card-content {
    padding: 24px;
    max-width: 62%;
  }

  .university-card h4 {
    font-size: 20px;
  }

  .university-card p {
    font-size: 14px;
    line-height: 1.6;
  }

  .card-image img {
    width: 210px;
    height: 230px;
  }
}

/* ---- Mobiles (≤ 768px) ---- */
@media (max-width: 768px) {
  .university-card {
    gap: 16px;
  }

  .card-content {
    padding: 20px;
    max-width: 65%;
  }

  .university-card h4 {
    font-size: 18px;
  }

  .university-card p {
    font-size: 13px;
    line-height: 1.55;
  }

  .card-cta {
    padding: 7px 14px;
    font-size: 13px;
  }

  .card-image img {
    width: 282px;
    height: 187px;
  }
}

/* ---- Very Small Phones (≤ 480px) ---- */
@media (max-width: 480px) {
  .card-content {
    padding: 16px;
    max-width: 68%;
  }

  .university-card h4 {
    font-size: 16px;
  }

  .university-card p {
    font-size: 12.5px;
  }

  .card-image img {
    width: 168px;
    height: 289px;
  }
}


/* ================= WHY US SECTION ================= */
.why-us-section {
  background: linear-gradient(135deg, #020024, #090979, #6e0ca3, #006d83);
}

/* ================= CARD ================= */
.why-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 35px 30px;
  height: 100%;
  /* box-shadow: 0 10px 25px rgb(0 0 0 / 25%); */
  transition: all 0.3s ease;
  text-align: center;

  position: relative;
  overflow: hidden;
}

/* ================= BASE BLUR ================= */
.why-card::after {
  content: "";
  position: absolute;
  left: -20%;
  bottom: -45%;
  width: 140%;
  height: 65%;

  filter: blur(45px);
  z-index: 0;
  opacity: 0.9;
}

/* ================= CONTENT ABOVE BLUR ================= */
.why-card > * {
  position: relative;
  z-index: 1;
}

/* ================= ICON ================= */
.icon-box {
  font-size: 40px;
  color: #2a0db8;
  margin-bottom: 20px;
}

/* ================= TITLE ================= */
.why-card h5 {
  font-weight: 700;
  margin-bottom: 15px;
  color: #000000;
}

/* ================= TEXT ================= */
.why-card p {
  font-size: 15px;
  line-height: 1.7;
  color: #333333;
  margin-bottom: 0;
}

/* ================= HOVER ================= */
.why-card:hover {
  transform: translateY(-6px);
  cursor: pointer;
  /* box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12); */
}

.why-card:hover::after {
  filter: blur(55px);
  opacity: 1;
}

/* ================= DIFFERENT COLORS ================= */

/* Card 1 – Blue */
.col-lg-4:nth-child(1) .why-card::after {
  background: radial-gradient(
    ellipse at center,
    rgba(0, 114, 255, 0.85),
    rgba(9, 9, 121, 0.50),
    transparent 100%
  );
}

/* Card 2 – Teal */
.col-lg-4:nth-child(2) .why-card::after {
  background: radial-gradient(
    ellipse at center,
    rgba(0, 187, 190, 0.85),
    rgba(0, 198, 255, 0.50),
    transparent 100%
  );
}

/* Card 3 – Purple */
.col-lg-4:nth-child(3) .why-card::after {
  background: radial-gradient(
    ellipse at center,
    rgba(138, 43, 226, 0.85),
    rgba(90, 24, 154, 0.50),
    transparent 100%
  );
}

/* Card 4 – Orange */
.col-lg-4:nth-child(4) .why-card::after {
  background: radial-gradient(
    ellipse at center,
    rgba(255, 140, 0, 0.85),
    rgba(255, 94, 0, 0.50),
    transparent 100%
  );
}

/* Card 5 – Green */
.col-lg-4:nth-child(5) .why-card::after {
  background: radial-gradient(
    ellipse at center,
    rgba(46, 204, 113, 0.85),
    rgba(32, 191, 107, 0.50),
    transparent 100%
  );
}

/* Card 6 – Pink */
.col-lg-4:nth-child(6) .why-card::after {
  background: radial-gradient(
    ellipse at center,
    rgba(255, 0, 174, 0.85),
    rgba(190, 24, 93, 0.50),
    transparent 100%
  );
}

/* ================= MOBILE ================= */
@media (max-width: 576px) {
  .why-card {
    padding: 28px 22px;
  }

  .icon-box {
    font-size: 34px;
  }

  .why-card p {
    font-size: 14px;
  }
}




/* ================= ABOUT US ================= */
.about-section {
  background: #fafafa;
}

/* CONTENT WIDTH */
.about-content {
  font-size: 16px;
  line-height: 1.8;
  color: #000;
}

/* QUOTE */
.about-quote {
  font-size: 18px;
  margin-bottom: 20px;
}

/* LIST */
.about-list {
  padding-left: 20px;
  margin-bottom: 25px;
}

.about-list li {
  margin-bottom: 10px;
}

/* ENDING LINE */
.about-ending {
  font-size: 17px;
}

/* MOBILE */
@media (max-width: 576px) {
  .about-content {
    font-size: 15px;
  }
}



/* ================= CONTACT SECTION ================= */
.contact-section {
  background: linear-gradient(135deg, #020024, #090979, #6e0ca3, #006d83);
}

/* ================= GLASS CARD ================= */
.contact-card {
  background: rgba(255, 255, 255, 0.45);
  border-radius: 14px;
  padding: 40px 30px;
  height: 100%;

  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);

  border: 1px solid rgba(0, 0, 0, 0.74);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);

  transition: all 0.35s ease;
  position: relative;
  overflow: hidden;
}

/* ================= SUBTLE GLASS GLOW ================= */
.contact-card::after {
  content: "";
  position: absolute;
  inset: auto -40% -50% -40%;
  height: 60%;

  background: radial-gradient(
    ellipse at center,
    rgba(42, 13, 184, 0.25),
    rgba(0, 26, 255, 0.2),
    transparent 70%
  );

  filter: blur(40px);
  z-index: 0;
}

/* ================= CONTENT ABOVE GLASS ================= */
.contact-card > * {
  position: relative;
  z-index: 1;
}

/* ================= ICON ================= */
.contact-icon {
  font-size: 40px;
  color: #2a0db8;
  margin-bottom: 20px;
}

/* ================= LINKS ================= */
.contact-link {
  text-decoration: none;
  color: #000;
  font-weight: 600;
}

.contact-link:hover {
  text-decoration: underline;
}

/* ================= LABEL ================= */
.contact-label {
  margin-top: 8px;
  font-size: 14px;
  color: #333;
}

/* ================= ADDRESS ================= */
.contact-address {
  font-size: 14px;
  line-height: 1.7;
  margin-top: 10px;
  color: #333;
}

/* ================= HOVER ================= */
.contact-card:hover {
  transform: translateY(-6px);
  cursor: pointer;
  /* box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18); */
}

/* ================= MOBILE ================= */
@media (max-width: 576px) {
  .contact-card {
    padding: 30px 22px;
  }

  .contact-icon {
    font-size: 34px;
  }
}

