:root {
      --primary: #173f73;
      --primary-dark: #0d2d55;
      --secondary: #b51f2a;
      --accent: #f4b400;
      --success: #138a4b;

      --white: #ffffff;
      --dark: #172334;
      --text: #5f6b7a;
      --muted: #8d98a8;

      --border: #dce5f0;
      --light-bg: #f5f8fc;
      --soft-blue: #eaf1fa;

      --shadow: 0 18px 45px rgba(13, 45, 85, 0.09);
      --shadow-lg: 0 28px 75px rgba(13, 45, 85, 0.14);

      --radius: 24px;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: "Inter", sans-serif;
      color: var(--dark);
      background: var(--white);
      overflow-x: hidden;
    }

    a {
      text-decoration: none;
      transition: all 0.3s ease;
    }

    img {
      max-width: 100%;
    }

    .section-pad {
      padding: 76px 0;
    }

    .section-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--soft-blue);
      color: var(--primary);
      border: 1px solid rgba(23, 63, 115, 0.13);
      padding: 8px 14px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 850;
      margin-bottom: 13px;
    }

    .section-badge i {
      color: var(--secondary);
    }

    .section-title {
      font-size: 36px;
      line-height: 1.16;
      font-weight: 950;
      color: var(--primary-dark);
      letter-spacing: -0.8px;
      margin-bottom: 10px;
    }

    .section-text {
      max-width: 720px;
      color: var(--text);
      font-size: 15.5px;
      line-height: 1.7;
      margin-bottom: 0;
    }

    .section-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 34px;
    }

    .outline-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 46px;
      padding: 11px 19px;
      border-radius: 999px;
      background: #ffffff;
      color: var(--primary);
      border: 1px solid rgba(23, 63, 115, 0.16);
      font-size: 14px;
      font-weight: 850;
      box-shadow: 0 10px 24px rgba(13, 45, 85, 0.07);
      white-space: nowrap;
    }

    .outline-btn:hover {
      background: var(--primary);
      color: #ffffff;
      transform: translateY(-2px);
      box-shadow: 0 16px 34px rgba(13, 45, 85, 0.2);
    }

    /* ================= TOP BAR PREMIUM START ================= */

.topbar {
  position: relative;
  z-index: 1000;
  padding: 8px 0;
  color: var(--white);
  font-size: 13px;
  background:
    radial-gradient(circle at 10% 50%, rgba(244, 180, 0, 0.18), transparent 28%),
    radial-gradient(circle at 88% 30%, rgba(255, 255, 255, 0.13), transparent 26%),
    linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 58%, #24598f 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: 0 8px 24px rgba(13, 45, 85, 0.12);
  overflow: hidden;
}

/* soft premium shine */
.topbar::before {
  content: "";
  position: absolute;
  top: 0;
  left: -35%;
  width: 28%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.16),
    transparent
  );
  transform: skewX(-20deg);
  animation: topbarShine 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes topbarShine {
  0% {
    left: -35%;
  }

  45% {
    left: 120%;
  }

  100% {
    left: 120%;
  }
}

.topbar .container {
  position: relative;
  z-index: 2;
}

.topbar .row {
  row-gap: 8px;
}

/* LEFT INFO */
.topbar span,
.topbar a {
  color: rgba(255, 255, 255, 0.95);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.8px;
  font-weight: 750;
  line-height: 1.35;
}

.topbar span i,
.topbar a i {
  color: var(--accent);
  font-size: 14px;
}

.topbar .ms-3 {
  margin-left: 18px !important;
}

/* RIGHT QUICK LINKS */
.top-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}

.top-links a {
  position: relative;
  min-height: 32px;
  padding: 7px 12px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  overflow: hidden;
  transition: all 0.3s ease;
}

.top-links a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.18),
    rgba(255, 255, 255, 0.03)
  );
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
}

.top-links a i,
.top-links a span {
  position: relative;
  z-index: 2;
}

.top-links a:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-2px);
}

.top-links a:hover::after {
  opacity: 1;
}

.top-links a:hover i {
  color: #ffffff;
}

/* ================= LAPTOP RESPONSIVE ================= */

@media (max-width: 1199px) {
  .topbar {
    font-size: 12.5px;
  }

  .topbar span,
  .topbar a {
    font-size: 12.2px;
  }

  .top-links {
    gap: 6px;
  }

  .top-links a {
    padding: 6px 9px;
  }
}

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

@media (max-width: 991px) {
  .topbar {
    padding: 9px 0;
  }

  .topbar .col-lg-6:first-child {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px 14px;
  }

  .topbar .ms-3 {
    margin-left: 0 !important;
  }

  .top-links {
    justify-content: flex-start;
    margin-top: 2px;
  }

  .top-links a {
    min-height: 31px;
  }
}

@media (max-width: 767px) {
  .topbar span,
  .topbar a {
    font-size: 12px;
  }

  .topbar span i,
  .topbar a i {
    font-size: 13px;
  }

  .top-links a {
    padding: 6px 10px;
  }
}

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

@media (max-width: 575px) {
  .topbar {
    padding: 10px 0;
  }

  .topbar .row {
    row-gap: 10px;
  }

  .topbar .col-lg-6:first-child {
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
  }

  .topbar span {
    width: 100%;
    min-height: 35px;
    padding: 8px 10px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.12);
    justify-content: flex-start;
  }

  .top-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    gap: 7px;
    margin-top: 0;
  }

  .top-links a {
    width: 100%;
    min-height: 36px;
    justify-content: center;
    text-align: center;
    padding: 8px 9px;
    font-size: 12px;
    border-radius: 13px;
  }
}

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

@media (max-width: 420px) {
  .topbar span,
  .topbar a {
    font-size: 11.5px;
  }

  .topbar span {
    padding: 8px 9px;
  }

  .top-links {
    gap: 6px;
  }

  .top-links a {
    padding: 8px 7px;
  }
}

@media (max-width: 380px) {
  .top-links {
    grid-template-columns: 1fr;
  }

  .top-links a {
    min-height: 35px;
  }
}

@media (max-width: 340px) {
  .topbar span,
  .topbar a {
    font-size: 11px;
  }

  .topbar span i,
  .topbar a i {
    font-size: 12.5px;
  }
}

/* ================= TOP BAR PREMIUM END ================= */


/* ================= HEADER PREMIUM RESPONSIVE START ================= */

.main-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(220, 229, 240, 0.95);
  box-shadow: 0 14px 42px rgba(13, 45, 85, 0.09);
  transition: all 0.35s ease;
}

.main-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(23, 63, 115, 0.045), transparent 48%),
    radial-gradient(circle at 8% 50%, rgba(181, 31, 42, 0.05), transparent 30%);
  pointer-events: none;
}

.main-header .navbar {
  position: relative;
  z-index: 2;
  padding: 0;
}

.main-header .container {
  position: relative;
}

/* ================= BRAND START ================= */

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  max-width: 430px;
  min-width: 0;
  padding: 10px 0;
  margin-right: 16px;
}

.navbar-brand img {
  width: 62px;
  height: 62px;
  min-width: 62px;
  object-fit: contain;
  display: block;
  padding: 7px;
  border-radius: 18px;
  background: linear-gradient(145deg, #ffffff, var(--soft-blue));
  border: 1px solid rgba(23, 63, 115, 0.14);
  box-shadow:
    0 14px 32px rgba(13, 45, 85, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.brand-text {
  min-width: 0;
}

.brand-text h1 {
  margin: 0;
  color: var(--primary-dark);
  font-size: 18.5px;
  line-height: 1.16;
  font-weight: 950;
  letter-spacing: -0.5px;
  white-space: nowrap;
}

.brand-text span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
  color: var(--text);
  font-size: 11.8px;
  line-height: 1.25;
  font-weight: 750;
}

.brand-text span::before {
  content: "";
  width: 7px;
  height: 7px;
  min-width: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(19, 138, 75, 0.12);
}

/* ================= NAVIGATION START ================= */

.navbar-collapse {
  flex-grow: 1;
}

.navbar-nav {
  gap: 3px;
}

.navbar-nav .nav-item {
  position: relative;
}

.navbar-nav .nav-link {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--dark);
  font-size: 13.6px;
  line-height: 1;
  font-weight: 850;
  padding: 31px 8px;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.navbar-nav .nav-link::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 20px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.32s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active,
.navbar-nav .show > .nav-link {
  color: var(--primary);
}

.navbar-nav .nav-link:hover::before,
.navbar-nav .nav-link.active::before {
  transform: scaleX(1);
}

.navbar-nav .dropdown-toggle::after {
  margin-left: 6px;
  vertical-align: 1px;
  border-top-width: 5px;
  transition: transform 0.3s ease;
}

@media (min-width: 992px) {
  .navbar-nav .dropdown:hover .dropdown-toggle::after {
    transform: rotate(180deg);
  }
}

/* ================= DROPDOWN START ================= */

.dropdown-menu {
  min-width: 248px;
  padding: 10px;
  margin-top: 0;
  border: 1px solid rgba(220, 229, 240, 0.96);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 26px 58px rgba(13, 45, 85, 0.15),
    0 8px 18px rgba(13, 45, 85, 0.06);
  animation: headerDropdownFade 0.24s ease;
}

@keyframes headerDropdownFade {
  from {
    opacity: 0;
    transform: translateY(9px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown-item {
  position: relative;
  padding: 10px 13px 10px 36px;
  border-radius: 12px;
  color: var(--dark);
  font-size: 14px;
  line-height: 1.25;
  font-weight: 750;
  transition: all 0.25s ease;
}

.dropdown-item::before {
  content: "\F285";
  font-family: "bootstrap-icons";
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary);
  font-size: 12px;
  opacity: 0.9;
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), rgba(234, 241, 250, 0.55));
  transform: translateX(3px);
}

@media (min-width: 992px) {
  .navbar-nav .dropdown:hover > .dropdown-menu {
    display: block;
  }

  .navbar-nav .dropdown-menu {
    top: 100%;
    left: 0;
  }
}

/* ================= TOGGLER START ================= */

.navbar-toggler {
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  border-radius: 14px;
  border: 1px solid rgba(23, 63, 115, 0.18);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(13, 45, 85, 0.08) !important;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 4px rgba(23, 63, 115, 0.12) !important;
}

.navbar-toggler-icon {
  width: 20px;
  height: 20px;
}

/* ================= LARGE LAPTOP ================= */

@media (max-width: 1399px) {
  .navbar-brand {
    max-width: 380px;
    gap: 11px;
    margin-right: 10px;
  }

  .navbar-brand img {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 16px;
  }

  .brand-text h1 {
    font-size: 16.7px;
  }

  .brand-text span {
    font-size: 11px;
  }

  .navbar-nav {
    gap: 1px;
  }

  .navbar-nav .nav-link {
    font-size: 12.8px;
    padding-left: 5.5px;
    padding-right: 5.5px;
  }

  .navbar-nav .nav-link::before {
    left: 5.5px;
    right: 5.5px;
  }
}

/* ================= LAPTOP ================= */

@media (max-width: 1199px) {
  .navbar-brand {
    max-width: 320px;
    gap: 10px;
  }

  .navbar-brand img {
    width: 52px;
    height: 52px;
    min-width: 52px;
    padding: 6px;
    border-radius: 15px;
  }

  .brand-text h1 {
    font-size: 14.8px;
    line-height: 1.18;
    white-space: normal;
  }

  .brand-text span {
    font-size: 10.4px;
  }

  .navbar-nav .nav-link {
    font-size: 12.1px;
    padding-left: 4.5px;
    padding-right: 4.5px;
  }
}

/* ================= TABLET / MOBILE MENU ================= */

@media (max-width: 991px) {
  .main-header {
    background: rgba(255, 255, 255, 0.985);
  }

  .main-header .navbar {
    padding: 9px 0;
  }

  .navbar-brand {
    max-width: calc(100% - 58px);
    padding: 0;
    margin-right: 0;
    gap: 12px;
  }

  .navbar-brand img {
    width: 54px;
    height: 54px;
    min-width: 54px;
    padding: 6px;
    border-radius: 15px;
  }

  .brand-text h1 {
    max-width: 520px;
    font-size: 17px;
    line-height: 1.2;
    white-space: normal;
  }

  .brand-text span {
    max-width: 520px;
    font-size: 11.2px;
    line-height: 1.2;
    margin-top: 4px;
  }

  .navbar-collapse {
    margin-top: 12px;
    padding: 10px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 20px 45px rgba(13, 45, 85, 0.12);
    max-height: calc(100vh - 125px);
    overflow-y: auto;
  }

  .navbar-nav {
    gap: 5px;
  }

  .navbar-nav .nav-link {
    display: block;
    padding: 13px 14px;
    border-radius: 13px;
    color: var(--dark);
    font-size: 14px;
    line-height: 1.2;
    white-space: normal;
  }

  .navbar-nav .nav-link::before {
    display: none;
  }

  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-link.active,
  .navbar-nav .show > .nav-link {
    color: var(--primary);
    background: var(--soft-blue);
  }

  .navbar-nav .dropdown-toggle::after {
    float: right;
    margin-top: 7px;
  }

  .dropdown-menu {
    width: 100%;
    min-width: 100%;
    padding: 6px;
    margin: 4px 0 8px;
    border: 0;
    border-radius: 14px;
    background: var(--light-bg);
    box-shadow: none;
    animation: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .dropdown-item {
    padding: 10px 12px 10px 34px;
    border-radius: 11px;
    font-size: 13.5px;
  }

  .dropdown-item:hover,
  .dropdown-item:focus {
    transform: none;
  }
}

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

@media (max-width: 575px) {
  .main-header .navbar {
    padding: 8px 0;
  }

  .navbar-brand {
    max-width: calc(100% - 52px);
    gap: 10px;
  }

  .navbar-brand img {
    width: 48px;
    height: 48px;
    min-width: 48px;
    padding: 5px;
    border-radius: 13px;
  }

  .brand-text h1 {
    max-width: 245px;
    font-size: 14.2px;
    line-height: 1.22;
  }

  .brand-text span {
    max-width: 238px;
    font-size: 10px;
    margin-top: 3px;
  }

  .brand-text span::before {
    width: 6px;
    height: 6px;
    min-width: 6px;
    box-shadow: 0 0 0 3px rgba(19, 138, 75, 0.12);
  }

  .navbar-toggler {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
  }

  .navbar-toggler-icon {
    width: 18px;
    height: 18px;
  }

  .navbar-collapse {
    margin-top: 10px;
    padding: 8px;
    border-radius: 15px;
    max-height: calc(100vh - 112px);
  }

  .navbar-nav .nav-link {
    padding: 12px 12px;
    font-size: 13.5px;
    border-radius: 12px;
  }

  .dropdown-item {
    font-size: 13px;
  }
}

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

@media (max-width: 420px) {
  .navbar-brand {
    max-width: calc(100% - 48px);
    gap: 9px;
  }

  .navbar-brand img {
    width: 43px;
    height: 43px;
    min-width: 43px;
    padding: 4px;
    border-radius: 12px;
  }

  .brand-text h1 {
    max-width: 205px;
    font-size: 12.8px;
  }

  .brand-text span {
    max-width: 198px;
    font-size: 9.3px;
  }

  .navbar-toggler {
    width: 38px;
    height: 38px;
    min-width: 38px;
  }
}

@media (max-width: 350px) {
  .brand-text span {
    display: none;
  }

  .brand-text h1 {
    max-width: 185px;
    font-size: 12.3px;
  }

  .navbar-brand img {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }
}

/* ================= HEADER PREMIUM RESPONSIVE END ================= */



 /* ================= ADMISSION POPUP START ================= */

  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f6f9fd;
  }

  .admission-popup {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.35s ease;
  }

  .admission-popup.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .admission-popup-overlay {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 20% 15%, rgba(244, 180, 0, 0.18), transparent 30%),
      radial-gradient(circle at 80% 85%, rgba(181, 31, 42, 0.18), transparent 34%),
      linear-gradient(135deg, rgba(3, 18, 38, 0.86), rgba(8, 29, 57, 0.94));
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
  }

  .admission-popup-box {
    position: relative;
    z-index: 2;
    width: min(94vw, 560px);
    max-height: 92vh;
    padding: 9px;
    border-radius: 26px;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 253, 0.98));
    box-shadow:
      0 35px 100px rgba(0, 0, 0, 0.42),
      0 0 0 1px rgba(255, 255, 255, 0.25);
    transform: translateY(26px) scale(0.92);
    opacity: 0;
    transition: all 0.45s ease;
  }

  .admission-popup.active .admission-popup-box {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  .admission-popup-box::before {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: -1;
    border-radius: 28px;
    background: linear-gradient(135deg, #f4b400, #b51f2a, #0d2d55);
    opacity: 0.65;
  }

  .admission-popup-image {
    position: relative;
    width: 100%;
    max-height: calc(92vh - 18px);
    overflow: hidden;
    border-radius: 20px;
    background: #ffffff;
  }

  .admission-popup-image img {
    width: 100%;
    height: auto;
    max-height: calc(92vh - 18px);
    display: block;
    object-fit: contain;
    border-radius: 20px;
  }

  .admission-popup-close {
    position: absolute;
    right: -15px;
    top: -15px;
    z-index: 10;
    width: 44px;
    height: 44px;
    border: none;
    outline: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #b51f2a, #8f1520);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
    transition: all 0.3s ease;
  }

  .admission-popup-close:hover {
    background: linear-gradient(135deg, #173f73, #0d2d55);
    transform: rotate(90deg) scale(1.06);
  }

  body.popup-open {
    overflow: hidden;
  }

  /* Demo content */
  .demo-content {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px;
  }

  .demo-content h1 {
    color: #0d2d55;
    font-size: 42px;
    margin-bottom: 10px;
  }

  .demo-content p {
    color: #5b6b82;
    font-size: 16px;
  }

  /* RESPONSIVE */
  @media (max-width: 767px) {
    .admission-popup {
      padding: 14px;
    }

    .admission-popup-box {
      width: min(95vw, 460px);
      padding: 7px;
      border-radius: 22px;
    }

    .admission-popup-box::before {
      border-radius: 24px;
    }

    .admission-popup-image,
    .admission-popup-image img {
      border-radius: 16px;
    }

    .admission-popup-close {
      right: -8px;
      top: -8px;
      width: 38px;
      height: 38px;
      font-size: 15px;
    }
  }

  @media (max-width: 420px) {
    .admission-popup {
      padding: 10px;
    }

    .admission-popup-box {
      width: 96vw;
      padding: 6px;
      border-radius: 18px;
    }

    .admission-popup-box::before {
      border-radius: 20px;
    }

    .admission-popup-image,
    .admission-popup-image img {
      border-radius: 13px;
    }

    .admission-popup-close {
      right: 8px;
      top: 8px;
      width: 34px;
      height: 34px;
      font-size: 13px;
      background: rgba(181, 31, 42, 0.95);
    }

    .demo-content h1 {
      font-size: 30px;
    }
  }
    /* ================= ADMISSION POPUP END ================= */







/* ================= HERO SLIDER PREMIUM CLEAN CSS START ================= */

.hero-slider {
  position: relative;
  width: 100%;
  height: 590px;
  overflow: hidden;
  background: #06182f;
}

/* SLIDE BASE */
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition:
    transform 900ms cubic-bezier(0.76, 0, 0.24, 1),
    opacity 650ms ease,
    visibility 650ms ease;
  z-index: 1;
  will-change: transform, opacity;
}

/* ACTIVE SLIDE */
.hero-slide.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  z-index: 4;
}

/* PREVIOUS SLIDE */
.hero-slide.prev-slide {
  opacity: 1;
  visibility: visible;
  transform: translateX(-100%);
  z-index: 3;
}

/* IMAGE */
.hero-slide > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  transform: scale(1.04);
  transition: transform 4.5s ease;
}

.hero-slide.active > img {
  transform: scale(1);
}

/* OVERLAY */
.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      90deg,
      rgba(6, 24, 47, 0.90) 0%,
      rgba(13, 45, 85, 0.68) 42%,
      rgba(13, 45, 85, 0.18) 100%
    );
  pointer-events: none;
}

/* CONTENT WRAPPER */
.hero-slider .container {
  position: relative;
  z-index: 5;
  height: 100%;
  display: flex;
  align-items: center;
}

/* CONTENT */
.hero-content {
  max-width: 730px;
  color: #ffffff;
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 700ms ease 280ms,
    transform 700ms ease 280ms;
}

.hero-slide.active .hero-content {
  opacity: 1;
  transform: translateY(0);
}

/* BADGE */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px;
  margin-bottom: 15px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 12.5px;
  line-height: 1.2;
  font-weight: 850;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero-badge i {
  color: var(--accent);
}

/* HEADING */
.hero-content h2 {
  max-width: 800px;
  margin: 0 0 15px;
  color: #ffffff;
  font-size: 50px;
  line-height: 1.08;
  font-weight: 950;
  letter-spacing: -1.35px;
  text-shadow: 0 16px 38px rgba(0, 0, 0, 0.28);
}

/* PARAGRAPH */
.hero-content p {
  max-width: 650px;
  margin: 0 0 24px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 15.8px;
  line-height: 1.65;
  font-weight: 500;
}

/* BUTTONS */
.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 13.5px;
  line-height: 1;
  font-weight: 900;
  text-decoration: none;
  transition: all 0.3s ease;
}

.hero-btn.primary {
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 32px rgba(181, 31, 42, 0.32);
}

.hero-btn.light {
  color: var(--primary);
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.15);
}

.hero-btn:hover {
  transform: translateY(-3px);
}

/* DOT CONTROLS */
.hero-controls {
  position: absolute;
  left: 50%;
  bottom: 24px;
  z-index: 20;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero-controls button {
  width: 10px;
  height: 10px;
  border: 0;
  padding: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.52);
  cursor: pointer;
  transition:
    width 0.35s ease,
    background 0.35s ease,
    transform 0.35s ease;
}

.hero-controls button.active {
  width: 34px;
  background: #ffffff;
}

.hero-controls button:hover {
  background: #ffffff;
  transform: scale(1.12);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .hero-slider {
    height: 550px;
  }

  .hero-content {
    max-width: 680px;
  }

  .hero-content h2 {
    font-size: 43px;
  }

  .hero-content p {
    font-size: 15px;
  }
}

@media (max-width: 991px) {
  .hero-slider {
    height: 525px;
  }

  .hero-content {
    max-width: 640px;
  }

  .hero-content h2 {
    font-size: 38px;
    letter-spacing: -0.9px;
  }

  .hero-content p {
    font-size: 14.6px;
  }
}

@media (max-width: 767px) {
  .hero-slider {
    height: 540px;
  }

  .hero-slide::after {
    background:
      linear-gradient(
        180deg,
        rgba(6, 24, 47, 0.40) 0%,
        rgba(13, 45, 85, 0.84) 54%,
        rgba(6, 24, 47, 0.96) 100%
      );
  }

  .hero-slider .container {
    align-items: flex-end;
    padding-bottom: 72px;
  }

  .hero-content h2 {
    font-size: 32px;
    line-height: 1.13;
  }

  .hero-content p {
    font-size: 14px;
    line-height: 1.62;
  }
}

@media (max-width: 575px) {
  .hero-slider {
    height: 570px;
  }

  .hero-slider .container {
    padding-bottom: 66px;
  }

  .hero-badge {
    font-size: 11.2px;
    padding: 7px 11px;
    margin-bottom: 13px;
    white-space: normal;
  }

  .hero-content h2 {
    font-size: 26px;
    line-height: 1.14;
    margin-bottom: 13px;
  }

  .hero-content p {
    font-size: 13.2px;
    line-height: 1.6;
    margin-bottom: 18px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
  }

  .hero-btn {
    width: 100%;
    min-height: 43px;
    padding: 11px 18px;
  }

  .hero-controls {
    bottom: 20px;
  }
}

@media (max-width: 420px) {
  .hero-slider {
    height: 590px;
  }

  .hero-content h2 {
    font-size: 24px;
  }

  .hero-content p {
    font-size: 12.8px;
  }
}

/* ================= HERO SLIDER PREMIUM CLEAN CSS END ================= */


/* ================= COLLEGE IDENTITY PREMIUM START ================= */

.identity-section {
  position: relative;
  padding: 10px 0;
  background:
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
  z-index: 1;
}

.identity-section::before {
  content: "";
  position: absolute;
  left: -120px;
  top: -140px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(23, 63, 115, 0.10), transparent 68%);
  z-index: -1;
}

.identity-section::after {
  content: "";
  position: absolute;
  right: -130px;
  bottom: -150px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(181, 31, 42, 0.08), transparent 70%);
  z-index: -1;
}

/* MAIN WRAP */
.identity-wrap {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: stretch;
  gap: 22px;
  padding: 18px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(220, 229, 240, 0.95);
  box-shadow: 0 24px 70px rgba(13, 45, 85, 0.10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* COLLEGE CARD */
.college-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 170px;
  padding: 26px;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(23, 63, 115, 0.98), rgba(13, 45, 85, 0.96));
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(13, 45, 85, 0.20);
}

.college-card::before {
  content: "";
  position: absolute;
  right: -80px;
  top: -90px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}

.college-card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, var(--accent), var(--secondary));
}

.college-card img {
  position: relative;
  z-index: 2;
  width: 92px;
  height: 92px;
  min-width: 92px;
  object-fit: contain;
  padding: 12px;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.college-card div {
  position: relative;
  z-index: 2;
}

.college-card h3 {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 25px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.college-card p {
  max-width: 560px;
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 14.8px;
  line-height: 1.72;
  font-weight: 500;
}

/* STATS GRID */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.stat-card {
  position: relative;
  min-height: 120px;
  padding: 22px 18px;
  border-radius: 22px;
  background:
    linear-gradient(145deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid rgba(220, 229, 240, 0.95);
  box-shadow: 0 14px 35px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.stat-card::before {
  content: "";
  position: absolute;
  right: -32px;
  top: -32px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.07);
  transition: all 0.35s ease;
}

.stat-card::after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: 0;
  width: 48px;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  transition: width 0.35s ease;
}

.stat-card strong {
  position: relative;
  z-index: 2;
  display: block;
  margin-bottom: 8px;
  color: var(--primary-dark);
  font-size: 34px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -1px;
}

.stat-card span {
  position: relative;
  z-index: 2;
  display: block;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.25;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-card:hover {
  transform: translateY(-6px);
  border-color: rgba(23, 63, 115, 0.22);
  box-shadow: 0 24px 52px rgba(13, 45, 85, 0.14);
}

.stat-card:hover::before {
  transform: scale(1.25);
  background: rgba(181, 31, 42, 0.08);
}

.stat-card:hover::after {
  width: 72px;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .identity-wrap {
    grid-template-columns: 1fr;
  }

  .college-card {
    min-height: 150px;
  }

  .college-card h3 {
    font-size: 23px;
  }
}

@media (max-width: 991px) {
  .identity-section {
    padding: 28px 0;
  }

  .identity-wrap {
    padding: 14px;
    border-radius: 24px;
    gap: 16px;
  }

  .college-card {
    padding: 22px;
    border-radius: 20px;
  }

  .college-card img {
    width: 82px;
    height: 82px;
    min-width: 82px;
    border-radius: 20px;
  }

  .college-card h3 {
    font-size: 21px;
  }

  .college-card p {
    font-size: 14.3px;
  }

  .stat-card {
    min-height: 110px;
  }

  .stat-card strong {
    font-size: 31px;
  }
}

@media (max-width: 767px) {
  .identity-section {
    padding: 24px 0;
  }

  .college-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    text-align: left;
  }

  .college-card img {
    width: 78px;
    height: 78px;
    min-width: 78px;
  }

  .stats-grid {
    gap: 12px;
  }

  .stat-card {
    padding: 20px 16px;
  }

  .stat-card strong {
    font-size: 29px;
  }

  .stat-card span {
    font-size: 12.8px;
  }
}

@media (max-width: 575px) {
  .identity-wrap {
    padding: 12px;
    border-radius: 22px;
  }

  .college-card {
    padding: 20px;
    border-radius: 18px;
  }

  .college-card h3 {
    font-size: 19px;
    line-height: 1.25;
  }

  .college-card p {
    font-size: 13.6px;
    line-height: 1.65;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .stat-card {
    min-height: auto;
    padding: 19px 18px;
    border-radius: 18px;
  }

  .stat-card strong {
    font-size: 30px;
  }
}

@media (max-width: 420px) {
  .college-card {
    padding: 18px;
  }

  .college-card img {
    width: 70px;
    height: 70px;
    min-width: 70px;
    padding: 9px;
  }

  .college-card h3 {
    font-size: 17.5px;
  }

  .college-card p {
    font-size: 13px;
  }

  .stat-card strong {
    font-size: 28px;
  }
}

/* ================= COLLEGE IDENTITY PREMIUM END ================= */

/* ================= AFFILIATION / COMMON CARDS PREMIUM START ================= */

/* SECTION BASE */
.section-pad {
  padding: 78px 0;
}

.soft-section {
  position: relative;
  background:
    radial-gradient(circle at 8% 18%, rgba(23, 63, 115, 0.075), transparent 31%),
    radial-gradient(circle at 92% 84%, rgba(181, 31, 42, 0.055), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f6f9fd 100%);
  overflow: hidden;
}

.soft-section::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -100px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 34px solid rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.soft-section::after {
  content: "";
  position: absolute;
  left: -95px;
  bottom: -130px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.085);
  pointer-events: none;
}

.soft-section .container {
  position: relative;
  z-index: 2;
}

/* SECTION HEAD */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
}

.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  margin-bottom: 13px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(234, 241, 250, 0.95), rgba(255, 255, 255, 0.9));
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.14);
  box-shadow: 0 8px 22px rgba(13, 45, 85, 0.055);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 850;
}

.section-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.section-title {
  max-width: 820px;
  margin: 0 0 10px;
  color: var(--primary-dark);
  font-size: 36px;
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -0.9px;
}

.section-text {
  max-width: 735px;
  margin: 0;
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.75;
  font-weight: 500;
}

/* GRID */
.card-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.card-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* PREMIUM CARD */
.premium-card {
  position: relative;
  min-height: 230px;
  padding: 24px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 255, 0.96));
  border: 1px solid rgba(220, 229, 240, 0.96);
  border-radius: 26px;
  box-shadow:
    0 15px 36px rgba(13, 45, 85, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
  transition: all 0.35s ease;
}

.premium-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(23, 63, 115, 0.07), rgba(181, 31, 42, 0.035));
  opacity: 0;
  transition: all 0.35s ease;
}

.premium-card::after {
  content: "";
  position: absolute;
  right: -44px;
  bottom: -44px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.premium-card:hover {
  transform: translateY(-7px);
  border-color: rgba(23, 63, 115, 0.2);
  box-shadow: 0 26px 60px rgba(13, 45, 85, 0.14);
}

.premium-card:hover::before {
  opacity: 1;
}

.premium-card:hover::after {
  right: -30px;
  bottom: -30px;
  background: rgba(181, 31, 42, 0.06);
}

.premium-card > * {
  position: relative;
  z-index: 2;
}

/* ICON */
.icon-box {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  margin-bottom: 19px;
  box-shadow:
    0 14px 28px rgba(13, 45, 85, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  transition: all 0.35s ease;
}

.icon-box::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 22px;
  background: rgba(23, 63, 115, 0.065);
  z-index: -1;
}

.premium-card:hover .icon-box {
  transform: translateY(-2px) scale(1.04);
}

/* CARD TYPOGRAPHY */
.premium-card h4 {
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.3;
  font-weight: 950;
  letter-spacing: -0.35px;
  margin-bottom: 8px;
}

.premium-card p {
  color: var(--text);
  font-size: 13.6px;
  line-height: 1.68;
  font-weight: 500;
  margin-bottom: 0;
}

/* CARD COLOR VARIATIONS */
.card-grid-4 .premium-card:nth-child(1) .icon-box {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.card-grid-4 .premium-card:nth-child(2) .icon-box {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.card-grid-4 .premium-card:nth-child(3) .icon-box {
  background: linear-gradient(135deg, var(--success), #0d6d3a);
}

.card-grid-4 .premium-card:nth-child(4) .icon-box {
  background: linear-gradient(135deg, var(--accent), #d88d00);
}

.card-grid-4 .premium-card:nth-child(2)::after {
  background: rgba(181, 31, 42, 0.055);
}

.card-grid-4 .premium-card:nth-child(3)::after {
  background: rgba(19, 138, 75, 0.055);
}

.card-grid-4 .premium-card:nth-child(4)::after {
  background: rgba(244, 180, 0, 0.075);
}

/* ================= LAPTOP RESPONSIVE ================= */

@media (max-width: 1199px) {
  .section-pad {
    padding: 68px 0;
  }

  .section-title {
    font-size: 33px;
  }

  .card-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .premium-card {
    min-height: 215px;
  }
}

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

@media (max-width: 991px) {
  .section-pad {
    padding: 60px 0;
  }

  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 30px;
  }

  .section-title {
    font-size: 31px;
    letter-spacing: -0.6px;
  }

  .section-text {
    font-size: 15px;
  }

  .card-grid-4,
  .card-grid-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .premium-card {
    padding: 22px;
    border-radius: 24px;
  }
}

@media (max-width: 767px) {
  .section-pad {
    padding: 54px 0;
  }

  .section-title {
    font-size: 28px;
  }

  .section-badge {
    font-size: 12.5px;
    padding: 8px 13px;
  }

  .premium-card {
    min-height: 205px;
  }

  .icon-box {
    width: 54px;
    height: 54px;
    border-radius: 17px;
    font-size: 21px;
  }
}

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

@media (max-width: 575px) {
  .section-pad {
    padding: 48px 0;
  }

  .soft-section::before {
    width: 210px;
    height: 210px;
    right: -105px;
    top: -120px;
    border-width: 28px;
  }

  .soft-section::after {
    width: 210px;
    height: 210px;
    left: -115px;
    bottom: -120px;
  }

  .section-head {
    margin-bottom: 24px;
  }

  .section-badge {
    max-width: 100%;
    font-size: 11.8px;
    line-height: 1.35;
    white-space: normal;
  }

  .section-title {
    font-size: 25px;
    line-height: 1.18;
    margin-bottom: 9px;
  }

  .section-text {
    font-size: 13.8px;
    line-height: 1.68;
  }

  .card-grid-4,
  .card-grid-3 {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .premium-card {
    min-height: auto;
    padding: 20px;
    border-radius: 21px;
  }

  .premium-card::after {
    width: 96px;
    height: 96px;
    right: -42px;
    bottom: -42px;
  }

  .icon-box {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 16px;
    font-size: 20px;
    margin-bottom: 16px;
  }

  .icon-box::before {
    border-radius: 20px;
  }

  .premium-card h4 {
    font-size: 16px;
  }

  .premium-card p {
    font-size: 13px;
    line-height: 1.6;
  }
}

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

@media (max-width: 420px) {
  .section-pad {
    padding: 42px 0;
  }

  .section-title {
    font-size: 23px;
  }

  .section-text {
    font-size: 13.2px;
  }

  .premium-card {
    padding: 18px;
    border-radius: 19px;
  }

  .icon-box {
    width: 47px;
    height: 47px;
    min-width: 47px;
    border-radius: 14px;
    font-size: 18px;
  }
}

@media (max-width: 340px) {
  .section-title {
    font-size: 21px;
  }

  .section-badge {
    font-size: 11.2px;
  }

  .premium-card h4 {
    font-size: 15.2px;
  }

  .premium-card p {
    font-size: 12.5px;
  }
}

/* ================= AFFILIATION / COMMON CARDS PREMIUM END ================= */


/* ================= PRINCIPAL + ABOUT PREMIUM START ================= */

/* SECTION BASE */
.section-pad {
  position: relative;
  padding: 78px 0;
}

/* WRAPPER */
.about-wrap {
  position: relative;
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  gap: 26px;
  align-items: stretch;
}

/* ================= PRINCIPAL CARD ================= */

.principal-card {
  position: relative;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 255, 0.96));
  border: 1px solid rgba(220, 229, 240, 0.96);
  border-radius: 32px;
  box-shadow:
    0 18px 46px rgba(13, 45, 85, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
  transition: all 0.35s ease;
}

.principal-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(23, 63, 115, 0.07), rgba(181, 31, 42, 0.035));
  opacity: 0;
  transition: all 0.35s ease;
  pointer-events: none;
}

.principal-card:hover {
  transform: translateY(-7px);
  border-color: rgba(23, 63, 115, 0.2);
  box-shadow: 0 28px 68px rgba(13, 45, 85, 0.14);
}

.principal-card:hover::before {
  opacity: 1;
}

.principal-img {
  position: relative;
  height: 338px;
  overflow: hidden;
}

.principal-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
  linear-gradient(to top, rgba(13, 45, 85, 0.28), transparent 52%),
  radial-gradient(circle at 18% 18%, rgba(244, 180, 0, 0.16), transparent 32%);
}

.principal-img::after {
  content: "Principal";
  position: absolute;
  left: 22px;
  bottom: 20px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.2px;
  box-shadow: 0 12px 30px rgba(13, 45, 85, 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.principal-body {
  position: relative;
  z-index: 2;
  padding: 26px;
}

.principal-body .section-badge {
  margin-bottom: 14px;
}

.principal-body h3 {
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.55px;
  margin-bottom: 11px;
}

.principal-body p {
  color: var(--text);
  font-size: 14.4px;
  line-height: 1.72;
  font-weight: 500;
  margin-bottom: 20px;
}

/* ================= ABOUT CARD ================= */

.about-card {
  position: relative;
  padding: 34px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 255, 0.96));
  border: 1px solid rgba(220, 229, 240, 0.96);
  border-radius: 32px;
  box-shadow:
    0 18px 46px rgba(13, 45, 85, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
  transition: all 0.35s ease;
}

.about-card::before {
  content: "";
  position: absolute;
  right: -90px;
  top: -90px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  pointer-events: none;
}

.about-card::after {
  content: "\F19D";
  font-family: "bootstrap-icons";
  position: absolute;
  right: 24px;
  bottom: -28px;
  color: rgba(23, 63, 115, 0.04);
  font-size: 118px;
  line-height: 1;
  pointer-events: none;
}

.about-card:hover {
  transform: translateY(-7px);
  border-color: rgba(23, 63, 115, 0.2);
  box-shadow: 0 28px 68px rgba(13, 45, 85, 0.14);
}

.about-card > * {
  position: relative;
  z-index: 2;
}

/* SECTION BADGE */
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  margin-bottom: 14px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(234, 241, 250, 0.95), rgba(255, 255, 255, 0.92));
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.14);
  box-shadow: 0 8px 22px rgba(13, 45, 85, 0.055);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 850;
}

.section-badge i {
  color: var(--secondary);
  font-size: 15px;
}

/* TYPOGRAPHY */
.section-title {
  max-width: 760px;
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 36px;
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -0.9px;
}

.section-text {
  max-width: 720px;
  margin: 0;
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.75;
  font-weight: 500;
}

/* OUTLINE BUTTON */
.outline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 11px 19px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.16);
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.07);
  transition: all 0.32s ease;
}

.outline-btn i {
  transition: transform 0.32s ease;
}

.outline-btn:hover {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(13, 45, 85, 0.22);
}

.outline-btn:hover i {
  transform: translateX(4px);
}

/* ================= ABOUT POINTS ================= */

.about-points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 13px;
  margin-top: 24px;
}

.about-point {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 54px;
  padding: 14px 15px;
  background:
    linear-gradient(145deg, rgba(245, 248, 252, 0.98), rgba(255, 255, 255, 0.92));
  border: 1px solid rgba(220, 229, 240, 0.9);
  border-radius: 17px;
  color: var(--dark);
  font-size: 13.6px;
  line-height: 1.35;
  font-weight: 800;
  overflow: hidden;
  transition: all 0.32s ease;
}

.about-point::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(23, 63, 115, 0.06), rgba(181, 31, 42, 0.035));
  opacity: 0;
  transition: all 0.32s ease;
}

.about-point i,
.about-point {
  position: relative;
  z-index: 2;
}

.about-point i {
  color: var(--success);
  font-size: 18px;
  min-width: 18px;
  filter: drop-shadow(0 4px 8px rgba(19, 138, 75, 0.18));
}

.about-point:hover {
  transform: translateY(-4px);
  border-color: rgba(23, 63, 115, 0.16);
  box-shadow: 0 16px 34px rgba(13, 45, 85, 0.1);
}

.about-point:hover::before {
  opacity: 1;
}

/* COLOR VARIATION */
.about-point:nth-child(2) i {
  color: var(--primary);
}

.about-point:nth-child(3) i {
  color: var(--secondary);
}

.about-point:nth-child(4) i {
  color: var(--accent);
}

.about-point:nth-child(5) i {
  color: var(--success);
}

.about-point:nth-child(6) i {
  color: var(--primary-dark);
}

/* ================= LAPTOP RESPONSIVE ================= */

@media (max-width: 1199px) {
  .section-pad {
    padding: 68px 0;
  }

  .about-wrap {
    grid-template-columns: 0.95fr 1.05fr;
    gap: 22px;
  }

  .principal-img {
    height: 320px;
  }

  .section-title {
    font-size: 33px;
  }

  .about-card {
    padding: 30px;
  }
}

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

@media (max-width: 991px) {
  .section-pad {
    padding: 60px 0;
  }

  .about-wrap {
    grid-template-columns: 1fr;
  }

  .principal-card,
  .about-card {
    border-radius: 28px;
  }

  .principal-img {
    height: 360px;
  }

  .principal-body {
    padding: 25px;
  }

  .section-title {
    font-size: 31px;
    letter-spacing: -0.6px;
  }

  .section-text {
    font-size: 15px;
  }

  .about-points {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .section-pad {
    padding: 54px 0;
  }

  .principal-img {
    height: 310px;
  }

  .principal-body h3 {
    font-size: 22px;
  }

  .section-title {
    font-size: 28px;
  }

  .section-badge {
    font-size: 12.5px;
    padding: 8px 13px;
  }

  .about-card {
    padding: 26px;
  }

  .about-points {
    grid-template-columns: 1fr;
    gap: 11px;
  }
}

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

@media (max-width: 575px) {
  .section-pad {
    padding: 48px 0;
  }

  .about-wrap {
    gap: 18px;
  }

  .principal-card,
  .about-card {
    border-radius: 22px;
  }

  .principal-img {
    height: 250px;
  }

  .principal-img::after {
    left: 16px;
    bottom: 16px;
    font-size: 11.5px;
    padding: 7px 12px;
  }

  .principal-body {
    padding: 20px;
  }

  .principal-body h3 {
    font-size: 20px;
    line-height: 1.28;
  }

  .principal-body p {
    font-size: 13.5px;
    line-height: 1.65;
    margin-bottom: 18px;
  }

  .about-card {
    padding: 20px;
  }

  .about-card::before {
    width: 180px;
    height: 180px;
    right: -95px;
    top: -95px;
  }

  .about-card::after {
    font-size: 88px;
    right: 14px;
    bottom: -22px;
  }

  .section-badge {
    max-width: 100%;
    font-size: 11.8px;
    line-height: 1.35;
    white-space: normal;
    padding: 7px 12px;
  }

  .section-title {
    font-size: 25px;
    line-height: 1.18;
    margin-bottom: 9px;
  }

  .section-text {
    font-size: 13.8px;
    line-height: 1.68;
  }

  .outline-btn {
    width: 100%;
    min-height: 45px;
    font-size: 13.5px;
  }

  .about-points {
    margin-top: 20px;
  }

  .about-point {
    min-height: 50px;
    padding: 13px;
    border-radius: 15px;
    font-size: 13px;
  }

  .about-point i {
    font-size: 17px;
  }
}

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

@media (max-width: 420px) {
  .section-pad {
    padding: 42px 0;
  }

  .principal-img {
    height: 220px;
  }

  .principal-body,
  .about-card {
    padding: 18px;
  }

  .principal-body h3 {
    font-size: 18.5px;
  }

  .principal-body p {
    font-size: 13px;
  }

  .section-title {
    font-size: 23px;
  }

  .section-text {
    font-size: 13.2px;
  }

  .about-point {
    font-size: 12.6px;
  }
}

@media (max-width: 340px) {
  .principal-img {
    height: 205px;
  }

  .section-title {
    font-size: 21px;
  }

  .section-badge {
    font-size: 11.2px;
  }

  .principal-body h3 {
    font-size: 17.8px;
  }
}

/* ================= PRINCIPAL + ABOUT PREMIUM END ================= */



/* ================= NOTICES + ADMISSIONS PREMIUM START ================= */

/* SECTION BASE */
.section-pad {
  position: relative;
  padding: 78px 0;
}

.soft-section {
  position: relative;
  background:
    radial-gradient(circle at 8% 18%, rgba(23, 63, 115, 0.075), transparent 31%),
    radial-gradient(circle at 92% 84%, rgba(181, 31, 42, 0.055), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f6f9fd 100%);
  overflow: hidden;
}

.soft-section::before {
  content: "";
  position: absolute;
  top: -130px;
  right: -110px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 36px solid rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.soft-section::after {
  content: "";
  position: absolute;
  left: -100px;
  bottom: -135px;
  width: 270px;
  height: 270px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.085);
  pointer-events: none;
}

.soft-section .container {
  position: relative;
  z-index: 2;
}

/* MAIN LAYOUT */
.notice-admission-wrap {
  display: grid;
  grid-template-columns: 1.28fr 0.92fr;
  gap: 26px;
  align-items: stretch;
}

/* COMMON CARD */
.notice-list-card,
.admission-card {
  position: relative;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 255, 0.96));
  border: 1px solid rgba(220, 229, 240, 0.96);
  border-radius: 32px;
  box-shadow:
    0 18px 46px rgba(13, 45, 85, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
  transition: all 0.35s ease;
}

.notice-list-card:hover,
.admission-card:hover {
  transform: translateY(-6px);
  border-color: rgba(23, 63, 115, 0.2);
  box-shadow: 0 28px 68px rgba(13, 45, 85, 0.14);
}

/* NOTICE HEADER */
.panel-head {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 23px 25px;
  border-bottom: 1px solid rgba(220, 229, 240, 0.95);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 252, 0.96));
}

.panel-head::before {
  content: "";
  position: absolute;
  left: 24px;
  bottom: -1px;
  width: 74px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}

.panel-head h3 {
  display: flex;
  align-items: center;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.45px;
  margin: 0;
}

.panel-head h3 i {
  color: var(--secondary);
  filter: drop-shadow(0 6px 12px rgba(181, 31, 42, 0.16));
}

/* OUTLINE BUTTON */
.outline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 43px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.16);
  font-size: 13.5px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.07);
  transition: all 0.32s ease;
}

.outline-btn:hover {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(13, 45, 85, 0.22);
}

/* NOTICE ITEMS */
.notice-item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 15px;
  align-items: center;
  padding: 16px;
  margin: 12px;
  border-radius: 20px;
  color: var(--dark);
  background: transparent;
  border: 1px solid transparent;
  overflow: hidden;
  transition: all 0.32s ease;
}

.notice-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(23, 63, 115, 0.055), rgba(181, 31, 42, 0.035));
  opacity: 0;
  transition: all 0.32s ease;
}

.notice-item:hover {
  background: var(--light-bg);
  border-color: rgba(220, 229, 240, 0.92);
  transform: translateY(-3px);
  box-shadow: 0 15px 34px rgba(13, 45, 85, 0.08);
}

.notice-item:hover::before {
  opacity: 1;
}

.notice-item > * {
  position: relative;
  z-index: 2;
}

/* DATE BOX */
.notice-date {
  position: relative;
  width: 64px;
  height: 64px;
  min-width: 64px;
  border-radius: 19px;
  background:
    linear-gradient(145deg, rgba(234, 241, 250, 0.98), rgba(255, 255, 255, 0.9));
  border: 1px solid rgba(23, 63, 115, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  box-shadow:
    0 10px 24px rgba(13, 45, 85, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
}

.notice-date::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 4px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}

.notice-date strong {
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.7px;
}

.notice-date span {
  color: var(--text);
  font-size: 12px;
  line-height: 1;
  font-weight: 850;
  margin-top: 5px;
  text-transform: uppercase;
}

/* NOTICE TEXT */
.notice-item h4 {
  color: var(--primary-dark);
  font-size: 15.2px;
  line-height: 1.35;
  font-weight: 900;
  letter-spacing: -0.25px;
  margin-bottom: 5px;
  transition: color 0.3s ease;
}

.notice-item p {
  color: var(--text);
  font-size: 12.9px;
  line-height: 1.55;
  font-weight: 500;
  margin: 0;
}

.notice-item > i {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 8px 18px rgba(13, 45, 85, 0.07);
  transition: all 0.32s ease;
}

.notice-item:hover h4 {
  color: var(--primary);
}

.notice-item:hover > i {
  background: var(--primary);
  color: #ffffff;
  transform: translateX(4px);
}

/* ADMISSION CARD */
.admission-card {
  padding: 32px;
  background:
    linear-gradient(135deg, rgba(13, 45, 85, 0.98), rgba(23, 63, 115, 0.94)),
    url("https://images.unsplash.com/photo-1523580846011-d3a5bc25702b?q=80&w=900&auto=format&fit=crop") center/cover;
  color: #ffffff;
  isolation: isolate;
}

.admission-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 18%, rgba(244, 180, 0, 0.2), transparent 34%),
    radial-gradient(circle at 92% 92%, rgba(181, 31, 42, 0.28), transparent 35%);
  z-index: -1;
}

.admission-card::after {
  content: "\F4B8";
  font-family: "bootstrap-icons";
  position: absolute;
  right: 22px;
  bottom: -28px;
  color: rgba(255, 255, 255, 0.08);
  font-size: 118px;
  line-height: 1;
  pointer-events: none;
}

.admission-card .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 12.5px;
  line-height: 1.2;
  font-weight: 850;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.admission-card .hero-badge i {
  color: var(--accent);
}

.admission-card h3 {
  max-width: 430px;
  color: #ffffff;
  font-size: 31px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.8px;
  margin-bottom: 14px;
  text-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.admission-card p {
  color: rgba(255, 255, 255, 0.87);
  font-size: 14.4px;
  line-height: 1.75;
  font-weight: 500;
  margin-bottom: 0;
}

/* ADMISSION LIST */
.admission-list {
  display: grid;
  gap: 10px;
  margin: 22px 0 26px;
}

.admission-list div {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 45px;
  padding: 12px 13px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.115);
  border: 1px solid rgba(255, 255, 255, 0.13);
  color: rgba(255, 255, 255, 0.95);
  font-size: 13.2px;
  line-height: 1.35;
  font-weight: 850;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.32s ease;
}

.admission-list div:hover {
  background: rgba(255, 255, 255, 0.17);
  transform: translateX(4px);
}

.admission-list i {
  color: var(--accent);
  font-size: 16px;
  min-width: 16px;
  filter: drop-shadow(0 5px 10px rgba(244, 180, 0, 0.22));
}

/* WHITE BUTTON */
.white-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 21px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--primary);
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.32s ease;
}

.white-btn i {
  transition: transform 0.32s ease;
}

.white-btn:hover {
  color: var(--primary-dark);
  background: var(--soft-blue);
  transform: translateY(-3px);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.2);
}

.white-btn:hover i {
  transform: translateX(4px);
}

/* ================= LAPTOP RESPONSIVE ================= */

@media (max-width: 1199px) {
  .section-pad {
    padding: 68px 0;
  }

  .notice-admission-wrap {
    grid-template-columns: 1.15fr 0.95fr;
    gap: 22px;
  }

  .admission-card {
    padding: 28px;
  }

  .admission-card h3 {
    font-size: 28px;
  }

  .notice-item {
    padding: 15px;
  }
}

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

@media (max-width: 991px) {
  .section-pad {
    padding: 60px 0;
  }

  .notice-admission-wrap {
    grid-template-columns: 1fr;
  }

  .notice-list-card,
  .admission-card {
    border-radius: 28px;
  }

  .admission-card {
    min-height: 430px;
  }

  .admission-card h3 {
    font-size: 31px;
  }

  .panel-head {
    padding: 21px 22px;
  }

  .panel-head h3 {
    font-size: 19px;
  }
}

@media (max-width: 767px) {
  .section-pad {
    padding: 54px 0;
  }

  .panel-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 13px;
  }

  .panel-head .outline-btn {
    min-height: 42px;
  }

  .notice-item {
    grid-template-columns: auto 1fr;
    gap: 13px;
  }

  .notice-item > i {
    display: none;
  }

  .notice-date {
    width: 58px;
    height: 58px;
    min-width: 58px;
    border-radius: 17px;
  }

  .notice-date strong {
    font-size: 22px;
  }

  .admission-card {
    min-height: auto;
  }
}

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

@media (max-width: 575px) {
  .section-pad {
    padding: 48px 0;
  }

  .soft-section::before {
    width: 220px;
    height: 220px;
    right: -115px;
    top: -125px;
    border-width: 28px;
  }

  .soft-section::after {
    width: 210px;
    height: 210px;
    left: -110px;
    bottom: -120px;
  }

  .notice-admission-wrap {
    gap: 18px;
  }

  .notice-list-card,
  .admission-card {
    border-radius: 22px;
  }

  .panel-head {
    padding: 18px;
  }

  .panel-head::before {
    left: 18px;
  }

  .panel-head h3 {
    font-size: 17px;
    line-height: 1.35;
  }

  .panel-head .outline-btn {
    width: 100%;
  }

  .notice-item {
    margin: 9px;
    padding: 13px;
    border-radius: 17px;
  }

  .notice-date {
    width: 54px;
    height: 54px;
    min-width: 54px;
    border-radius: 16px;
  }

  .notice-date strong {
    font-size: 20px;
  }

  .notice-date span {
    font-size: 11px;
  }

  .notice-item h4 {
    font-size: 13.8px;
    line-height: 1.38;
  }

  .notice-item p {
    font-size: 12.2px;
    line-height: 1.5;
  }

  .admission-card {
    padding: 22px;
  }

  .admission-card::after {
    font-size: 88px;
    right: 14px;
    bottom: -20px;
  }

  .admission-card .hero-badge {
    font-size: 11.8px;
    padding: 7px 12px;
    margin-bottom: 15px;
  }

  .admission-card h3 {
    font-size: 25px;
    line-height: 1.2;
  }

  .admission-card p {
    font-size: 13.5px;
    line-height: 1.65;
  }

  .admission-list {
    margin: 20px 0 22px;
  }

  .admission-list div {
    min-height: 43px;
    padding: 11px 12px;
    border-radius: 14px;
    font-size: 12.6px;
  }

  .white-btn {
    width: 100%;
    min-height: 46px;
    font-size: 13.5px;
  }
}

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

@media (max-width: 420px) {
  .section-pad {
    padding: 42px 0;
  }

  .panel-head {
    padding: 16px;
  }

  .notice-item {
    grid-template-columns: 1fr;
  }

  .notice-date {
    width: 52px;
    height: 52px;
    min-width: 52px;
  }

  .notice-item h4 {
    font-size: 13.4px;
  }

  .notice-item p {
    font-size: 11.8px;
  }

  .admission-card {
    padding: 19px;
  }

  .admission-card h3 {
    font-size: 23px;
  }

  .admission-card p {
    font-size: 13px;
  }
}

@media (max-width: 340px) {
  .panel-head h3 {
    font-size: 15.8px;
  }

  .admission-card h3 {
    font-size: 21px;
  }

  .admission-list div {
    font-size: 12px;
  }
}

/* ================= NOTICES + ADMISSIONS PREMIUM END ================= */



/* ================= IMPORTANT LINKS PREMIUM START ================= */

/* SECTION BASE */
.section-pad {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 18%, rgba(23, 63, 115, 0.055), transparent 30%),
    radial-gradient(circle at 92% 82%, rgba(181, 31, 42, 0.04), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #fbfdff 100%);
  overflow: hidden;
}

.section-pad::before {
  content: "";
  position: absolute;
  left: -90px;
  top: -120px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.07);
  pointer-events: none;
}

.section-pad::after {
  content: "";
  position: absolute;
  right: -115px;
  bottom: -135px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 34px solid rgba(23, 63, 115, 0.045);
  pointer-events: none;
}

.section-pad .container {
  position: relative;
  z-index: 2;
}

/* SECTION HEAD FIX */
.important-links-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
}

.important-links-head > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.important-links-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  max-width: max-content;
  padding: 8px 15px;
  margin-bottom: 13px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(234, 241, 250, 0.96), rgba(255, 255, 255, 0.92));
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.14);
  box-shadow: 0 8px 22px rgba(13, 45, 85, 0.055);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 850;
}

.important-links-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.section-title {
  max-width: 780px;
  margin: 0 0 10px;
  color: var(--primary-dark);
  font-size: 36px;
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -0.9px;
}

.section-text {
  max-width: 735px;
  margin: 0;
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.75;
  font-weight: 500;
}

/* OUTLINE BUTTON */
.outline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 11px 19px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.16);
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.07);
  transition: all 0.32s ease;
  text-decoration: none;
}

.outline-btn i {
  transition: transform 0.32s ease;
}

.outline-btn:hover {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(13, 45, 85, 0.22);
}

.outline-btn:hover i {
  transform: translateX(4px);
}

/* GRID */
.card-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

/* IMPORTANT LINK CARD */
.premium-card {
  position: relative;
  display: block;
  min-height: 238px;
  padding: 24px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 255, 0.96));
  border: 1px solid rgba(220, 229, 240, 0.96);
  border-radius: 26px;
  box-shadow:
    0 15px 36px rgba(13, 45, 85, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
  color: var(--dark);
  transition: all 0.35s ease;
  text-decoration: none;
}

.premium-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(23, 63, 115, 0.07), rgba(181, 31, 42, 0.035));
  opacity: 0;
  transition: all 0.35s ease;
}

.premium-card::after {
  content: "\F138";
  font-family: "bootstrap-icons";
  position: absolute;
  right: 20px;
  bottom: 18px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.08);
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.35s ease;
}

.premium-card:hover {
  transform: translateY(-7px);
  border-color: rgba(23, 63, 115, 0.2);
  box-shadow: 0 26px 60px rgba(13, 45, 85, 0.14);
}

.premium-card:hover::before {
  opacity: 1;
}

.premium-card:hover::after {
  opacity: 1;
  transform: translateX(0);
  background: var(--primary);
  color: #ffffff;
}

.premium-card > * {
  position: relative;
  z-index: 2;
}

/* ICON */
.icon-box {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  margin-bottom: 19px;
  box-shadow:
    0 14px 28px rgba(13, 45, 85, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  transition: all 0.35s ease;
}

.icon-box::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 22px;
  background: rgba(23, 63, 115, 0.065);
  z-index: -1;
}

.premium-card:hover .icon-box {
  transform: translateY(-2px) scale(1.05);
}

/* CARD TEXT */
.premium-card h4 {
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.3;
  font-weight: 950;
  letter-spacing: -0.35px;
  margin-bottom: 8px;
  transition: color 0.32s ease;
}

.premium-card p {
  color: var(--text);
  font-size: 13.6px;
  line-height: 1.68;
  font-weight: 500;
  margin-bottom: 0;
}

.premium-card:hover h4 {
  color: var(--primary);
}

/* CARD ICON VARIATIONS */
.card-grid-4 .premium-card:nth-child(1) .icon-box {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.card-grid-4 .premium-card:nth-child(2) .icon-box {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.card-grid-4 .premium-card:nth-child(3) .icon-box {
  background: linear-gradient(135deg, var(--success), #0d6d3a);
}

.card-grid-4 .premium-card:nth-child(4) .icon-box {
  background: linear-gradient(135deg, var(--accent), #d88d00);
}

.card-grid-4 .premium-card:nth-child(2)::before {
  background: linear-gradient(135deg, rgba(181, 31, 42, 0.07), rgba(23, 63, 115, 0.035));
}

.card-grid-4 .premium-card:nth-child(3)::before {
  background: linear-gradient(135deg, rgba(19, 138, 75, 0.07), rgba(23, 63, 115, 0.035));
}

.card-grid-4 .premium-card:nth-child(4)::before {
  background: linear-gradient(135deg, rgba(244, 180, 0, 0.09), rgba(23, 63, 115, 0.035));
}

/* ================= LAPTOP RESPONSIVE ================= */

@media (max-width: 1199px) {
  .section-pad {
    padding: 68px 0;
  }

  .section-title {
    font-size: 33px;
  }

  .card-grid-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .premium-card {
    min-height: 220px;
  }
}

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

@media (max-width: 991px) {
  .section-pad {
    padding: 60px 0;
  }

  .important-links-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 30px;
  }

  .section-title {
    font-size: 31px;
    letter-spacing: -0.6px;
  }

  .section-text {
    font-size: 15px;
  }

  .outline-btn {
    min-height: 44px;
  }

  .premium-card {
    padding: 22px;
    border-radius: 24px;
  }
}

@media (max-width: 767px) {
  .section-pad {
    padding: 54px 0;
  }

  .section-title {
    font-size: 28px;
  }

  .important-links-badge {
    font-size: 12.5px;
    padding: 8px 13px;
  }

  .premium-card {
    min-height: 205px;
  }

  .icon-box {
    width: 54px;
    height: 54px;
    border-radius: 17px;
    font-size: 21px;
  }
}

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

@media (max-width: 575px) {
  .section-pad {
    padding: 48px 0;
  }

  .section-pad::before {
    width: 210px;
    height: 210px;
    left: -115px;
    top: -115px;
  }

  .section-pad::after {
    width: 220px;
    height: 220px;
    right: -120px;
    bottom: -125px;
    border-width: 28px;
  }

  .important-links-head {
    margin-bottom: 24px;
  }

  .important-links-badge {
    max-width: 100%;
    font-size: 11.8px;
    line-height: 1.35;
    white-space: normal;
  }

  .section-title {
    font-size: 25px;
    line-height: 1.18;
    margin-bottom: 9px;
  }

  .section-text {
    font-size: 13.8px;
    line-height: 1.68;
  }

  .outline-btn {
    width: 100%;
    min-height: 45px;
    font-size: 13.5px;
  }

  .card-grid-4 {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .premium-card {
    min-height: auto;
    padding: 20px;
    border-radius: 21px;
  }

  .premium-card::after {
    width: 34px;
    height: 34px;
    right: 17px;
    bottom: 17px;
    opacity: 1;
    transform: none;
    background: var(--soft-blue);
  }

  .icon-box {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 16px;
    font-size: 20px;
    margin-bottom: 16px;
  }

  .icon-box::before {
    border-radius: 20px;
  }

  .premium-card h4 {
    font-size: 16px;
  }

  .premium-card p {
    max-width: calc(100% - 42px);
    font-size: 13px;
    line-height: 1.6;
  }
}

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

@media (max-width: 420px) {
  .section-pad {
    padding: 42px 0;
  }

  .section-title {
    font-size: 23px;
  }

  .section-text {
    font-size: 13.2px;
  }

  .premium-card {
    padding: 18px;
    border-radius: 19px;
  }

  .premium-card p {
    max-width: 100%;
    padding-right: 34px;
  }

  .icon-box {
    width: 47px;
    height: 47px;
    min-width: 47px;
    border-radius: 14px;
    font-size: 18px;
  }
}

@media (max-width: 340px) {
  .section-title {
    font-size: 21px;
  }

  .important-links-badge {
    font-size: 11.2px;
  }

  .premium-card h4 {
    font-size: 15.2px;
  }

  .premium-card p {
    font-size: 12.5px;
  }
}

/* ================= IMPORTANT LINKS PREMIUM END ================= */


/* ================= ACADEMIC HIGHLIGHTS PREMIUM START ================= */

/* SECTION BASE */
.section-pad {
  position: relative;
  padding: 10px 0;
}

.soft-section {
  position: relative;
  background:
    radial-gradient(circle at 8% 18%, rgba(23, 63, 115, 0.075), transparent 31%),
    radial-gradient(circle at 92% 84%, rgba(181, 31, 42, 0.055), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f6f9fd 100%);
  overflow: hidden;
}

.soft-section::before {
  content: "";
  position: absolute;
  top: -130px;
  right: -110px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 36px solid rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.soft-section::after {
  content: "";
  position: absolute;
  left: -100px;
  bottom: -135px;
  width: 270px;
  height: 270px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.085);
  pointer-events: none;
}

.soft-section .container {
  position: relative;
  z-index: 2;
}

/* SECTION HEAD FIX */
.academic-highlights-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
}

.academic-highlights-head > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.academic-highlights-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  max-width: max-content;
  padding: 8px 15px;
  margin-bottom: 13px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(234, 241, 250, 0.96), rgba(255, 255, 255, 0.92));
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.14);
  box-shadow: 0 8px 22px rgba(13, 45, 85, 0.055);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 850;
}

.academic-highlights-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.section-title {
  max-width: 820px;
  margin: 0 0 10px;
  color: var(--primary-dark);
  font-size: 36px;
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -0.9px;
}

.section-text {
  max-width: 735px;
  margin: 0;
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.75;
  font-weight: 500;
}

/* OUTLINE BUTTON */
.outline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 11px 19px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.16);
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.07);
  transition: all 0.32s ease;
  text-decoration: none;
}

.outline-btn i {
  transition: transform 0.32s ease;
}

.outline-btn:hover {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(13, 45, 85, 0.22);
}

.outline-btn:hover i {
  transform: translateX(4px);
}

/* GRID */
.card-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* ACADEMIC CARD */
.premium-card {
  position: relative;
  min-height: 230px;
  padding: 24px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 255, 0.96));
  border: 1px solid rgba(220, 229, 240, 0.96);
  border-radius: 26px;
  box-shadow:
    0 15px 36px rgba(13, 45, 85, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
  transition: all 0.35s ease;
}

.premium-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(23, 63, 115, 0.07), rgba(181, 31, 42, 0.035));
  opacity: 0;
  transition: all 0.35s ease;
}

.premium-card::after {
  content: "";
  position: absolute;
  right: -44px;
  bottom: -44px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.premium-card:hover {
  transform: translateY(-7px);
  border-color: rgba(23, 63, 115, 0.2);
  box-shadow: 0 26px 60px rgba(13, 45, 85, 0.14);
}

.premium-card:hover::before {
  opacity: 1;
}

.premium-card:hover::after {
  right: -30px;
  bottom: -30px;
  background: rgba(181, 31, 42, 0.06);
}

.premium-card > * {
  position: relative;
  z-index: 2;
}

/* ICON BOX */
.icon-box {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  margin-bottom: 19px;
  box-shadow:
    0 14px 28px rgba(13, 45, 85, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  transition: all 0.35s ease;
}

.icon-box::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 22px;
  background: rgba(23, 63, 115, 0.065);
  z-index: -1;
}

.premium-card:hover .icon-box {
  transform: translateY(-2px) scale(1.05);
}

/* CARD TEXT */
.premium-card h4 {
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.3;
  font-weight: 950;
  letter-spacing: -0.35px;
  margin-bottom: 8px;
  transition: color 0.32s ease;
}

.premium-card p {
  color: var(--text);
  font-size: 13.6px;
  line-height: 1.68;
  font-weight: 500;
  margin-bottom: 0;
}

.premium-card:hover h4 {
  color: var(--primary);
}

/* CARD ICON VARIATIONS */
.card-grid-3 .premium-card:nth-child(1) .icon-box {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.card-grid-3 .premium-card:nth-child(2) .icon-box {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.card-grid-3 .premium-card:nth-child(3) .icon-box {
  background: linear-gradient(135deg, var(--success), #0d6d3a);
}

.card-grid-3 .premium-card:nth-child(4) .icon-box {
  background: linear-gradient(135deg, var(--accent), #d88d00);
}

.card-grid-3 .premium-card:nth-child(5) .icon-box {
  background: linear-gradient(135deg, #6d4aff, #3c2cb3);
}

.card-grid-3 .premium-card:nth-child(6) .icon-box {
  background: linear-gradient(135deg, #0ea5e9, #075985);
}

.card-grid-3 .premium-card:nth-child(2)::after {
  background: rgba(181, 31, 42, 0.055);
}

.card-grid-3 .premium-card:nth-child(3)::after {
  background: rgba(19, 138, 75, 0.055);
}

.card-grid-3 .premium-card:nth-child(4)::after {
  background: rgba(244, 180, 0, 0.075);
}

.card-grid-3 .premium-card:nth-child(5)::after {
  background: rgba(109, 74, 255, 0.055);
}

.card-grid-3 .premium-card:nth-child(6)::after {
  background: rgba(14, 165, 233, 0.06);
}

/* ================= LAPTOP RESPONSIVE ================= */

@media (max-width: 1199px) {
  .section-pad {
    padding: 68px 0;
  }

  .section-title {
    font-size: 33px;
  }

  .card-grid-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .premium-card {
    min-height: 225px;
    padding: 22px;
  }
}

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

@media (max-width: 991px) {
  .section-pad {
    padding: 60px 0;
  }

  .academic-highlights-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 30px;
  }

  .section-title {
    font-size: 31px;
    letter-spacing: -0.6px;
  }

  .section-text {
    font-size: 15px;
  }

  .outline-btn {
    min-height: 44px;
  }

  .card-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .premium-card {
    min-height: 215px;
    border-radius: 24px;
  }
}

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

@media (max-width: 767px) {
  .section-pad {
    padding: 54px 0;
  }

  .section-title {
    font-size: 28px;
  }

  .academic-highlights-badge {
    font-size: 12.5px;
    padding: 8px 13px;
  }

  .premium-card {
    min-height: 205px;
  }

  .icon-box {
    width: 54px;
    height: 54px;
    border-radius: 17px;
    font-size: 21px;
  }
}

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

@media (max-width: 575px) {
  .section-pad {
    padding: 48px 0;
  }

  .soft-section::before {
    width: 220px;
    height: 220px;
    right: -115px;
    top: -125px;
    border-width: 28px;
  }

  .soft-section::after {
    width: 210px;
    height: 210px;
    left: -110px;
    bottom: -120px;
  }

  .academic-highlights-head {
    margin-bottom: 24px;
  }

  .academic-highlights-badge {
    max-width: 100%;
    font-size: 11.8px;
    line-height: 1.35;
    white-space: normal;
  }

  .section-title {
    font-size: 25px;
    line-height: 1.18;
    margin-bottom: 9px;
  }

  .section-text {
    font-size: 13.8px;
    line-height: 1.68;
  }

  .outline-btn {
    width: 100%;
    min-height: 45px;
    font-size: 13.5px;
  }

  .card-grid-3 {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .premium-card {
    min-height: auto;
    padding: 20px;
    border-radius: 21px;
  }

  .premium-card::after {
    width: 96px;
    height: 96px;
    right: -42px;
    bottom: -42px;
  }

  .icon-box {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 16px;
    font-size: 20px;
    margin-bottom: 16px;
  }

  .icon-box::before {
    border-radius: 20px;
  }

  .premium-card h4 {
    font-size: 16px;
  }

  .premium-card p {
    font-size: 13px;
    line-height: 1.6;
  }
}

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

@media (max-width: 420px) {
  .section-pad {
    padding: 42px 0;
  }

  .section-title {
    font-size: 23px;
  }

  .section-text {
    font-size: 13.2px;
  }

  .premium-card {
    padding: 18px;
    border-radius: 19px;
  }

  .icon-box {
    width: 47px;
    height: 47px;
    min-width: 47px;
    border-radius: 14px;
    font-size: 18px;
  }
}

@media (max-width: 340px) {
  .section-title {
    font-size: 21px;
  }

  .academic-highlights-badge {
    font-size: 11.2px;
  }

  .premium-card h4 {
    font-size: 15.2px;
  }

  .premium-card p {
    font-size: 12.5px;
  }
}

/* ================= ACADEMIC HIGHLIGHTS PREMIUM END ================= */


/* ================= GALLERY PREMIUM START ================= */

/* SECTION BASE */
.section-pad {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 18%, rgba(23, 63, 115, 0.055), transparent 30%),
    radial-gradient(circle at 92% 82%, rgba(181, 31, 42, 0.04), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #fbfdff 100%);
  overflow: hidden;
}

.section-pad::before {
  content: "";
  position: absolute;
  left: -90px;
  top: -120px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.07);
  pointer-events: none;
}

.section-pad::after {
  content: "";
  position: absolute;
  right: -115px;
  bottom: -135px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 34px solid rgba(23, 63, 115, 0.045);
  pointer-events: none;
}

.section-pad .container {
  position: relative;
  z-index: 2;
}

/* SECTION HEAD FIX */
.gallery-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
}

.gallery-section-head > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.gallery-section-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  max-width: max-content;
  padding: 8px 15px;
  margin-bottom: 13px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(234, 241, 250, 0.96), rgba(255, 255, 255, 0.92));
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.14);
  box-shadow: 0 8px 22px rgba(13, 45, 85, 0.055);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 850;
}

.gallery-section-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.section-title {
  max-width: 820px;
  margin: 0 0 10px;
  color: var(--primary-dark);
  font-size: 36px;
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -0.9px;
}

.section-text {
  max-width: 735px;
  margin: 0;
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.75;
  font-weight: 500;
}

/* OUTLINE BUTTON */
.outline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 11px 19px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.16);
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.07);
  transition: all 0.32s ease;
  text-decoration: none;
}

.outline-btn i {
  transition: transform 0.32s ease;
}

.outline-btn:hover {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(13, 45, 85, 0.22);
}

.outline-btn:hover i {
  transform: translateX(4px);
}

/* GALLERY LAYOUT */
.gallery-wrap {
  display: grid;
  grid-template-columns: 1.05fr 1.35fr;
  gap: 22px;
  align-items: stretch;
}

.gallery-large,
.gallery-small {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--primary-dark);
  color: #ffffff;
  isolation: isolate;
  box-shadow:
    0 20px 52px rgba(13, 45, 85, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: all 0.4s ease;
  text-decoration: none;
}

.gallery-large {
  min-height: 500px;
  border-radius: 32px;
}

.gallery-small {
  min-height: 240px;
  border-radius: 26px;
}

.gallery-large::before,
.gallery-small::before {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 3;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.18);
  opacity: 0;
  transform: scale(0.98);
  transition: all 0.4s ease;
  pointer-events: none;
}

.gallery-large::after,
.gallery-small::after {
  content: "\F138";
  font-family: "bootstrap-icons";
  position: absolute;
  right: 22px;
  top: 22px;
  z-index: 4;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translate(10px, -10px);
  transition: all 0.4s ease;
}

.gallery-large:hover,
.gallery-small:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 70px rgba(13, 45, 85, 0.18);
}

.gallery-large:hover::before,
.gallery-small:hover::before {
  opacity: 1;
  transform: scale(1);
}

.gallery-large:hover::after,
.gallery-small:hover::after {
  opacity: 1;
  transform: translate(0, 0);
}

/* IMAGES */
.gallery-large img,
.gallery-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 0.9s ease,
    filter 0.9s ease;
}

.gallery-large:hover img,
.gallery-small:hover img {
  transform: scale(1.08);
  filter: saturate(1.08) contrast(1.05);
}

/* OVERLAY */
.gallery-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to top,
      rgba(8, 29, 57, 0.94) 0%,
      rgba(13, 45, 85, 0.55) 48%,
      rgba(13, 45, 85, 0.08) 100%
    ),
    radial-gradient(circle at 18% 20%, rgba(244, 180, 0, 0.18), transparent 34%);
}

.gallery-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent 70%);
  pointer-events: none;
}

/* CONTENT */
.gallery-content {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 4;
  transform: translateY(0);
  transition: all 0.35s ease;
}

.gallery-large:hover .gallery-content,
.gallery-small:hover .gallery-content {
  transform: translateY(-4px);
}

.gallery-content span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 900;
  margin-bottom: 11px;
}

.gallery-content span::before {
  content: "";
  width: 7px;
  height: 7px;
  min-width: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(244, 180, 0, 0.15);
}

.gallery-content h3,
.gallery-content h4 {
  color: #ffffff;
  font-weight: 950;
  margin-bottom: 0;
  text-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}

.gallery-content h3 {
  font-size: 31px;
  line-height: 1.18;
  letter-spacing: -0.7px;
}

.gallery-content h4 {
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.35px;
}

/* SMALL GRID */
.gallery-small-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.gallery-small-grid .gallery-small:nth-child(2) .gallery-overlay {
  background:
    linear-gradient(to top, rgba(8, 29, 57, 0.92), rgba(13, 45, 85, 0.34), transparent),
    radial-gradient(circle at 20% 25%, rgba(181, 31, 42, 0.22), transparent 36%);
}

.gallery-small-grid .gallery-small:nth-child(3) .gallery-overlay {
  background:
    linear-gradient(to top, rgba(8, 29, 57, 0.92), rgba(13, 45, 85, 0.34), transparent),
    radial-gradient(circle at 20% 25%, rgba(19, 138, 75, 0.2), transparent 36%);
}

.gallery-small-grid .gallery-small:nth-child(4) .gallery-overlay {
  background:
    linear-gradient(to top, rgba(8, 29, 57, 0.92), rgba(13, 45, 85, 0.34), transparent),
    radial-gradient(circle at 20% 25%, rgba(244, 180, 0, 0.18), transparent 36%);
}

/* ================= LAPTOP RESPONSIVE ================= */

@media (max-width: 1199px) {
  .section-pad {
    padding: 68px 0;
  }

  .section-title {
    font-size: 33px;
  }

  .gallery-wrap {
    grid-template-columns: 1fr 1.25fr;
    gap: 18px;
  }

  .gallery-large {
    min-height: 465px;
  }

  .gallery-small {
    min-height: 222px;
  }

  .gallery-small-grid {
    gap: 18px;
  }

  .gallery-content h3 {
    font-size: 28px;
  }

  .gallery-content h4 {
    font-size: 17.5px;
  }
}

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

@media (max-width: 991px) {
  .section-pad {
    padding: 60px 0;
  }

  .gallery-section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 30px;
  }

  .section-title {
    font-size: 31px;
    letter-spacing: -0.6px;
  }

  .section-text {
    font-size: 15px;
  }

  .gallery-wrap {
    grid-template-columns: 1fr;
  }

  .gallery-large {
    min-height: 430px;
    border-radius: 28px;
  }

  .gallery-small {
    min-height: 230px;
    border-radius: 24px;
  }
}

@media (max-width: 767px) {
  .section-pad {
    padding: 54px 0;
  }

  .section-title {
    font-size: 28px;
  }

  .gallery-section-badge {
    font-size: 12.5px;
    padding: 8px 13px;
  }

  .gallery-large {
    min-height: 385px;
  }

  .gallery-small-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .gallery-small {
    min-height: 250px;
  }

  .gallery-content h3 {
    font-size: 25px;
  }

  .gallery-content h4 {
    font-size: 18px;
  }
}

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

@media (max-width: 575px) {
  .section-pad {
    padding: 48px 0;
  }

  .section-pad::before {
    width: 210px;
    height: 210px;
    left: -115px;
    top: -115px;
  }

  .section-pad::after {
    width: 220px;
    height: 220px;
    right: -120px;
    bottom: -125px;
    border-width: 28px;
  }

  .gallery-section-head {
    margin-bottom: 24px;
  }

  .gallery-section-badge {
    max-width: 100%;
    font-size: 11.8px;
    line-height: 1.35;
    white-space: normal;
  }

  .section-title {
    font-size: 25px;
    line-height: 1.18;
    margin-bottom: 9px;
  }

  .section-text {
    font-size: 13.8px;
    line-height: 1.68;
  }

  .outline-btn {
    width: 100%;
    min-height: 45px;
    font-size: 13.5px;
  }

  .gallery-wrap {
    gap: 15px;
  }

  .gallery-large,
  .gallery-small {
    border-radius: 22px;
  }

  .gallery-large {
    min-height: 330px;
  }

  .gallery-small {
    min-height: 230px;
  }

  .gallery-large::before,
  .gallery-small::before {
    inset: 10px;
  }

  .gallery-large::after,
  .gallery-small::after {
    right: 16px;
    top: 16px;
    width: 36px;
    height: 36px;
    opacity: 1;
    transform: none;
    font-size: 14px;
  }

  .gallery-content {
    left: 18px;
    right: 18px;
    bottom: 18px;
  }

  .gallery-content span {
    font-size: 11.5px;
    padding: 6px 10px;
    margin-bottom: 9px;
  }

  .gallery-content h3 {
    font-size: 22px;
  }

  .gallery-content h4 {
    font-size: 16.5px;
  }
}

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

@media (max-width: 420px) {
  .section-pad {
    padding: 42px 0;
  }

  .section-title {
    font-size: 23px;
  }

  .section-text {
    font-size: 13.2px;
  }

  .gallery-large {
    min-height: 285px;
  }

  .gallery-small {
    min-height: 210px;
  }

  .gallery-content {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }

  .gallery-content h3 {
    font-size: 20px;
  }

  .gallery-content h4 {
    font-size: 15.5px;
  }
}

@media (max-width: 340px) {
  .section-title {
    font-size: 21px;
  }

  .gallery-section-badge {
    font-size: 11.2px;
  }

  .gallery-large {
    min-height: 260px;
  }

  .gallery-small {
    min-height: 195px;
  }

  .gallery-content h3 {
    font-size: 18.5px;
  }

  .gallery-content h4 {
    font-size: 14.5px;
  }
}

/* ================= GALLERY PREMIUM END ================= */


/* ================= NAAC / IQAC PREMIUM START ================= */

/* SECTION BASE */
.section-pad {
  position: relative;
  padding: 10px 0;
}

.soft-section {
  position: relative;
  background:
    radial-gradient(circle at 8% 18%, rgba(23, 63, 115, 0.075), transparent 31%),
    radial-gradient(circle at 92% 84%, rgba(181, 31, 42, 0.055), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f6f9fd 100%);
  overflow: hidden;
}

.soft-section::before {
  content: "";
  position: absolute;
  top: -130px;
  right: -110px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 36px solid rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.soft-section::after {
  content: "";
  position: absolute;
  left: -100px;
  bottom: -135px;
  width: 270px;
  height: 270px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.085);
  pointer-events: none;
}

.soft-section .container {
  position: relative;
  z-index: 2;
}

/* SECTION HEAD FIX */
.naac-iqac-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
}

.naac-iqac-head > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.naac-iqac-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  max-width: max-content;
  padding: 8px 15px;
  margin-bottom: 13px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(234, 241, 250, 0.96), rgba(255, 255, 255, 0.92));
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.14);
  box-shadow: 0 8px 22px rgba(13, 45, 85, 0.055);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 850;
}

.naac-iqac-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.section-title {
  max-width: 820px;
  margin: 0 0 10px;
  color: var(--primary-dark);
  font-size: 36px;
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -0.9px;
}

.section-text {
  max-width: 735px;
  margin: 0;
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.75;
  font-weight: 500;
}

/* OUTLINE BUTTON */
.outline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 11px 19px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.16);
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.07);
  transition: all 0.32s ease;
  text-decoration: none;
}

.outline-btn i {
  transition: transform 0.32s ease;
}

.outline-btn:hover {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(13, 45, 85, 0.22);
}

.outline-btn:hover i {
  transform: translateX(4px);
}

/* GRID */
.card-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* NAAC / IQAC CARD */
.premium-card {
  position: relative;
  display: block;
  min-height: 232px;
  padding: 24px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 255, 0.96));
  border: 1px solid rgba(220, 229, 240, 0.96);
  border-radius: 26px;
  color: var(--dark);
  box-shadow:
    0 15px 36px rgba(13, 45, 85, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
  transition: all 0.35s ease;
  text-decoration: none;
}

.premium-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(23, 63, 115, 0.07), rgba(181, 31, 42, 0.035));
  opacity: 0;
  transition: all 0.35s ease;
}

.premium-card::after {
  content: "\F138";
  font-family: "bootstrap-icons";
  position: absolute;
  right: 20px;
  bottom: 18px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.08);
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.35s ease;
}

.premium-card:hover {
  transform: translateY(-7px);
  border-color: rgba(23, 63, 115, 0.2);
  box-shadow: 0 26px 60px rgba(13, 45, 85, 0.14);
}

.premium-card:hover::before {
  opacity: 1;
}

.premium-card:hover::after {
  opacity: 1;
  transform: translateX(0);
  background: var(--primary);
  color: #ffffff;
}

.premium-card > * {
  position: relative;
  z-index: 2;
}

/* ICON BOX */
.icon-box {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 19px;
  background:
    linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 20px;
  box-shadow:
    0 14px 28px rgba(13, 45, 85, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  transition: all 0.35s ease;
}

.icon-box::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 23px;
  background: rgba(23, 63, 115, 0.065);
  z-index: -1;
}

.premium-card:hover .icon-box {
  transform: translateY(-2px) scale(1.05);
}

/* CARD TEXT */
.premium-card h4 {
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.3;
  font-weight: 950;
  letter-spacing: -0.35px;
  margin-bottom: 8px;
  transition: color 0.32s ease;
}

.premium-card p {
  color: var(--text);
  font-size: 13.6px;
  line-height: 1.68;
  font-weight: 500;
  margin-bottom: 0;
  padding-right: 18px;
}

.premium-card:hover h4 {
  color: var(--primary);
}

/* CARD COLOR VARIATIONS */
.card-grid-3 .premium-card:nth-child(1) .icon-box {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.card-grid-3 .premium-card:nth-child(2) .icon-box {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.card-grid-3 .premium-card:nth-child(3) .icon-box {
  background: linear-gradient(135deg, var(--accent), #d88d00);
}

.card-grid-3 .premium-card:nth-child(1)::before {
  background: linear-gradient(135deg, rgba(23, 63, 115, 0.075), rgba(13, 45, 85, 0.035));
}

.card-grid-3 .premium-card:nth-child(2)::before {
  background: linear-gradient(135deg, rgba(181, 31, 42, 0.075), rgba(23, 63, 115, 0.035));
}

.card-grid-3 .premium-card:nth-child(3)::before {
  background: linear-gradient(135deg, rgba(244, 180, 0, 0.095), rgba(23, 63, 115, 0.035));
}

/* ================= LAPTOP RESPONSIVE ================= */

@media (max-width: 1199px) {
  .section-pad {
    padding: 68px 0;
  }

  .section-title {
    font-size: 33px;
  }

  .card-grid-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .premium-card {
    min-height: 220px;
    padding: 22px;
  }
}

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

@media (max-width: 991px) {
  .section-pad {
    padding: 60px 0;
  }

  .naac-iqac-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 30px;
  }

  .section-title {
    font-size: 31px;
    letter-spacing: -0.6px;
  }

  .section-text {
    font-size: 15px;
  }

  .outline-btn {
    min-height: 44px;
  }

  .card-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .premium-card {
    min-height: 210px;
    border-radius: 24px;
  }
}

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

@media (max-width: 767px) {
  .section-pad {
    padding: 54px 0;
  }

  .section-title {
    font-size: 28px;
  }

  .naac-iqac-badge {
    font-size: 12.5px;
    padding: 8px 13px;
  }

  .card-grid-3 {
    grid-template-columns: 1fr;
  }

  .premium-card {
    min-height: auto;
  }

  .icon-box {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    font-size: 22px;
  }
}

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

@media (max-width: 575px) {
  .section-pad {
    padding: 48px 0;
  }

  .soft-section::before {
    width: 220px;
    height: 220px;
    right: -115px;
    top: -125px;
    border-width: 28px;
  }

  .soft-section::after {
    width: 210px;
    height: 210px;
    left: -110px;
    bottom: -120px;
  }

  .naac-iqac-head {
    margin-bottom: 24px;
  }

  .naac-iqac-badge {
    max-width: 100%;
    font-size: 11.8px;
    line-height: 1.35;
    white-space: normal;
  }

  .section-title {
    font-size: 25px;
    line-height: 1.18;
    margin-bottom: 9px;
  }

  .section-text {
    font-size: 13.8px;
    line-height: 1.68;
  }

  .outline-btn {
    width: 100%;
    min-height: 45px;
    font-size: 13.5px;
  }

  .card-grid-3 {
    gap: 13px;
  }

  .premium-card {
    padding: 20px;
    border-radius: 21px;
  }

  .premium-card::after {
    width: 34px;
    height: 34px;
    right: 17px;
    bottom: 17px;
    opacity: 1;
    transform: none;
    background: var(--soft-blue);
  }

  .icon-box {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 16px;
    font-size: 20px;
    margin-bottom: 16px;
  }

  .icon-box::before {
    border-radius: 20px;
  }

  .premium-card h4 {
    font-size: 16px;
  }

  .premium-card p {
    max-width: calc(100% - 42px);
    font-size: 13px;
    line-height: 1.6;
    padding-right: 0;
  }
}

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

@media (max-width: 420px) {
  .section-pad {
    padding: 42px 0;
  }

  .section-title {
    font-size: 23px;
  }

  .section-text {
    font-size: 13.2px;
  }

  .premium-card {
    padding: 18px;
    border-radius: 19px;
  }

  .premium-card p {
    max-width: 100%;
    padding-right: 34px;
  }

  .icon-box {
    width: 47px;
    height: 47px;
    min-width: 47px;
    border-radius: 14px;
    font-size: 18px;
  }
}

@media (max-width: 340px) {
  .section-title {
    font-size: 21px;
  }

  .naac-iqac-badge {
    font-size: 11.2px;
  }

  .premium-card h4 {
    font-size: 15.2px;
  }

  .premium-card p {
    font-size: 12.5px;
  }
}

/* ================= NAAC / IQAC PREMIUM END ================= */


/* ================= DOWNLOADS + CONTACT PREMIUM START ================= */

/* SECTION BASE */
.section-pad {
  position: relative;
  padding: 78px 0;
  background:
    radial-gradient(circle at 8% 18%, rgba(23, 63, 115, 0.055), transparent 30%),
    radial-gradient(circle at 92% 82%, rgba(181, 31, 42, 0.04), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #fbfdff 100%);
  overflow: hidden;
}

.section-pad::before {
  content: "";
  position: absolute;
  left: -90px;
  top: -120px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.07);
  pointer-events: none;
}

.section-pad::after {
  content: "";
  position: absolute;
  right: -115px;
  bottom: -135px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 34px solid rgba(23, 63, 115, 0.045);
  pointer-events: none;
}

.section-pad .container {
  position: relative;
  z-index: 2;
}

/* MAIN LAYOUT */
.download-contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  align-items: stretch;
}

/* COMMON BOX */
.download-list,
.contact-box {
  position: relative;
  padding: 32px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 255, 0.96));
  border: 1px solid rgba(220, 229, 240, 0.96);
  border-radius: 32px;
  box-shadow:
    0 18px 46px rgba(13, 45, 85, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
  transition: all 0.35s ease;
}

.download-list::before,
.contact-box::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -85px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  pointer-events: none;
}

.download-list::after {
  content: "\F30A";
  font-family: "bootstrap-icons";
  position: absolute;
  right: 22px;
  bottom: -26px;
  color: rgba(23, 63, 115, 0.04);
  font-size: 118px;
  line-height: 1;
  pointer-events: none;
}

.contact-box::after {
  content: "\F5C1";
  font-family: "bootstrap-icons";
  position: absolute;
  right: 22px;
  bottom: -26px;
  color: rgba(23, 63, 115, 0.04);
  font-size: 118px;
  line-height: 1;
  pointer-events: none;
}

.download-list:hover,
.contact-box:hover {
  transform: translateY(-7px);
  border-color: rgba(23, 63, 115, 0.2);
  box-shadow: 0 28px 68px rgba(13, 45, 85, 0.14);
}

.download-list > *,
.contact-box > * {
  position: relative;
  z-index: 2;
}

/* SECTION BADGE */
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  margin-bottom: 14px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(234, 241, 250, 0.96), rgba(255, 255, 255, 0.92));
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.14);
  box-shadow: 0 8px 22px rgba(13, 45, 85, 0.055);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 850;
}

.section-badge i {
  color: var(--secondary);
  font-size: 15px;
}

/* TITLES */
.section-title {
  max-width: 760px;
  margin: 0 0 22px;
  color: var(--primary-dark);
  font-size: 34px;
  line-height: 1.16;
  font-weight: 950;
  letter-spacing: -0.85px;
}

/* DOWNLOAD ROW */
.download-row,
.contact-row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  padding: 15px;
  margin-bottom: 12px;
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(245, 248, 252, 0.98), rgba(255, 255, 255, 0.94));
  border: 1px solid rgba(220, 229, 240, 0.9);
  color: var(--dark);
  overflow: hidden;
  transition: all 0.32s ease;
}

.download-row:last-child,
.contact-row:last-child {
  margin-bottom: 0;
}

.download-row::before,
.contact-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(23, 63, 115, 0.06), rgba(181, 31, 42, 0.035));
  opacity: 0;
  transition: all 0.32s ease;
}

.download-row::after {
  content: "\F138";
  font-family: "bootstrap-icons";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translate(8px, -50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  opacity: 0;
  box-shadow: 0 8px 18px rgba(13, 45, 85, 0.08);
  transition: all 0.32s ease;
}

.download-row:hover,
.contact-row:hover {
  transform: translateY(-4px);
  border-color: rgba(23, 63, 115, 0.16);
  box-shadow: 0 16px 34px rgba(13, 45, 85, 0.1);
}

.download-row:hover::before,
.contact-row:hover::before {
  opacity: 1;
}

.download-row:hover::after {
  opacity: 1;
  transform: translate(0, -50%);
  background: var(--primary);
  color: #ffffff;
}

.download-row > *,
.contact-row > * {
  position: relative;
  z-index: 2;
}

/* ROW ICON */
.download-row > i,
.contact-row > i {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow:
    0 12px 26px rgba(13, 45, 85, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: all 0.32s ease;
}

.download-row:hover > i,
.contact-row:hover > i {
  transform: scale(1.05);
}

/* DOWNLOAD ICON VARIATIONS */
.download-row:nth-of-type(1) > i {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.download-row:nth-of-type(2) > i {
  background: linear-gradient(135deg, var(--success), #0d6d3a);
}

.download-row:nth-of-type(3) > i {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.download-row:nth-of-type(4) > i {
  background: linear-gradient(135deg, var(--accent), #d88d00);
}

/* CONTACT ICON VARIATIONS */
.contact-row:nth-of-type(1) > i {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.contact-row:nth-of-type(2) > i {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.contact-row:nth-of-type(3) > i {
  background: linear-gradient(135deg, var(--success), #0d6d3a);
}

.contact-row:nth-of-type(4) > i {
  background: linear-gradient(135deg, var(--accent), #d88d00);
}

/* ROW TEXT */
.download-row strong,
.contact-row strong {
  display: block;
  color: var(--primary-dark);
  font-size: 15px;
  line-height: 1.3;
  font-weight: 950;
  letter-spacing: -0.25px;
  margin-bottom: 4px;
  transition: color 0.32s ease;
}

.download-row span,
.contact-row span {
  display: block;
  color: var(--text);
  font-size: 12.9px;
  line-height: 1.48;
  font-weight: 550;
}

.download-row:hover strong,
.contact-row:hover strong {
  color: var(--primary);
}

/* ================= LAPTOP RESPONSIVE ================= */

@media (max-width: 1199px) {
  .section-pad {
    padding: 68px 0;
  }

  .download-contact-wrap {
    gap: 22px;
  }

  .download-list,
  .contact-box {
    padding: 28px;
  }

  .section-title {
    font-size: 31px;
  }

  .download-row,
  .contact-row {
    padding: 14px;
  }
}

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

@media (max-width: 991px) {
  .section-pad {
    padding: 60px 0;
  }

  .download-contact-wrap {
    grid-template-columns: 1fr;
  }

  .download-list,
  .contact-box {
    border-radius: 28px;
  }

  .section-title {
    font-size: 31px;
  }
}

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

@media (max-width: 767px) {
  .section-pad {
    padding: 54px 0;
  }

  .section-title {
    font-size: 28px;
  }

  .section-badge {
    font-size: 12.5px;
    padding: 8px 13px;
  }

  .download-list,
  .contact-box {
    padding: 25px;
  }

  .download-row > i,
  .contact-row > i {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 15px;
    font-size: 18px;
  }
}

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

@media (max-width: 575px) {
  .section-pad {
    padding: 48px 0;
  }

  .section-pad::before {
    width: 210px;
    height: 210px;
    left: -115px;
    top: -115px;
  }

  .section-pad::after {
    width: 220px;
    height: 220px;
    right: -120px;
    bottom: -125px;
    border-width: 28px;
  }

  .download-contact-wrap {
    gap: 18px;
  }

  .download-list,
  .contact-box {
    padding: 20px;
    border-radius: 22px;
  }

  .download-list::before,
  .contact-box::before {
    width: 180px;
    height: 180px;
    right: -95px;
    top: -95px;
  }

  .download-list::after,
  .contact-box::after {
    font-size: 88px;
    right: 14px;
    bottom: -22px;
  }

  .section-badge {
    max-width: 100%;
    font-size: 11.8px;
    line-height: 1.35;
    white-space: normal;
    padding: 7px 12px;
  }

  .section-title {
    font-size: 25px;
    line-height: 1.18;
    margin-bottom: 18px;
  }

  .download-row,
  .contact-row {
    grid-template-columns: auto 1fr;
    gap: 12px;
    padding: 13px;
    margin-bottom: 10px;
    border-radius: 16px;
  }

  .download-row::after {
    width: 32px;
    height: 32px;
    right: 13px;
    opacity: 1;
    transform: translate(0, -50%);
    background: var(--soft-blue);
  }

  .download-row > i,
  .contact-row > i {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 14px;
    font-size: 17px;
  }

  .download-row strong,
  .contact-row strong {
    font-size: 14px;
  }

  .download-row span,
  .contact-row span {
    font-size: 12.2px;
    line-height: 1.45;
  }

  .download-row div {
    padding-right: 36px;
  }
}

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

@media (max-width: 420px) {
  .section-pad {
    padding: 42px 0;
  }

  .download-list,
  .contact-box {
    padding: 18px;
    border-radius: 20px;
  }

  .section-title {
    font-size: 23px;
  }

  .download-row,
  .contact-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .download-row::after {
    top: 18px;
    right: 16px;
    transform: none;
  }

  .download-row div {
    padding-right: 0;
  }

  .download-row span,
  .contact-row span {
    font-size: 11.9px;
  }

  .download-row > i,
  .contact-row > i {
    width: 42px;
    height: 42px;
    min-width: 42px;
    font-size: 16px;
  }
}

@media (max-width: 340px) {
  .section-title {
    font-size: 21px;
  }

  .section-badge {
    font-size: 11.2px;
  }

  .download-row strong,
  .contact-row strong {
    font-size: 13.3px;
  }

  .download-row span,
  .contact-row span {
    font-size: 11.5px;
  }
}

/* ================= DOWNLOADS + CONTACT PREMIUM END ================= */


/* ================= ULTRA PREMIUM FOOTER START ================= */

.footer {
  position: relative;
  padding: 78px 0 0;
  color: rgba(255, 255, 255, 0.86);
  background:
    radial-gradient(circle at 12% 18%, rgba(244, 180, 0, 0.16), transparent 28%),
    radial-gradient(circle at 88% 78%, rgba(181, 31, 42, 0.19), transparent 31%),
    linear-gradient(135deg, #06182f 0%, #0d2d55 48%, #071f3d 100%);
  overflow: hidden;
}

.footer::before {
  content: "";
  position: absolute;
  top: -160px;
  right: -120px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.045);
  pointer-events: none;
}

.footer::after {
  content: "";
  position: absolute;
  left: -110px;
  bottom: 32px;
  width: 245px;
  height: 245px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(244, 180, 0, 0.12), rgba(244, 180, 0, 0.035) 58%, transparent 70%);
  pointer-events: none;
}

.footer .container {
  position: relative;
  z-index: 2;
}

/* FOOTER GRID */
.footer .row {
  position: relative;
  align-items: flex-start;
  padding: 28px 28px 44px;
  border-radius: 34px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  border: 1px solid rgba(255, 255, 255, 0.105);
  box-shadow:
    0 28px 76px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* LOGO DIRECTLY INSIDE ROW */
.footer .row > img {
  width: 86px;
  height: 86px;
  min-width: 86px;
  object-fit: contain;
  padding: 9px;
  margin: 0 8px 0 0;
  border-radius: 25px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(234, 241, 250, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    0 20px 44px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  flex: 0 0 auto;
}

/* BRAND COLUMN */
.footer .col-lg-4 {
  position: relative;
}

.footer .col-lg-4 h4 {
  color: #ffffff;
  font-size: 25px;
  line-height: 1.22;
  font-weight: 950;
  letter-spacing: -0.75px;
  margin-bottom: 15px;
}

.footer .col-lg-4 h4::after {
  content: "";
  display: block;
  width: 76px;
  height: 3px;
  margin-top: 13px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--secondary), transparent);
}

.footer p {
  max-width: 425px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 14.4px;
  line-height: 1.78;
  font-weight: 500;
  margin: 0;
}

/* FOOTER TITLES */
.footer h4 {
  position: relative;
  color: #ffffff;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.25px;
  margin-bottom: 18px;
}

.footer .col-lg-2 h4::after,
.footer .col-md-4 h4::after {
  content: "";
  display: block;
  width: 38px;
  height: 3px;
  margin-top: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--secondary));
}

/* LINKS */
.footer-links {
  display: grid;
  gap: 10px;
}

.footer-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  gap: 8px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 13.7px;
  line-height: 1.35;
  font-weight: 750;
  transition: all 0.28s ease;
}

.footer-links a::before {
  content: "\F285";
  font-family: "bootstrap-icons";
  color: var(--accent);
  font-size: 11px;
  opacity: 0.95;
  transition: all 0.28s ease;
}

.footer-links a::after {
  content: "";
  position: absolute;
  left: 19px;
  right: 0;
  bottom: -4px;
  height: 1px;
  border-radius: 999px;
  background: rgba(244, 180, 0, 0.78);
  transform: scaleX(0);
  transform-origin: left;
  transition: all 0.28s ease;
}

.footer-links a:hover {
  color: #ffffff;
  transform: translateX(5px);
}

.footer-links a:hover::before {
  color: #ffffff;
}

.footer-links a:hover::after {
  transform: scaleX(1);
}

/* FOOTER BOTTOM */
.footer-bottom {
  position: relative;
  padding: 21px 0;
  margin-top: 22px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 13.4px;
  line-height: 1.45;
  font-weight: 650;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
}

.footer-bottom::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -1px;
  transform: translateX(-50%);
  width: 150px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* ================= LAPTOP ================= */

@media (max-width: 1199px) {
  .footer {
    padding-top: 66px;
  }

  .footer .row {
    padding: 26px 24px 38px;
    border-radius: 30px;
  }

  .footer .row > img {
    width: 76px;
    height: 76px;
    min-width: 76px;
    border-radius: 22px;
  }

  .footer .col-lg-4 h4 {
    font-size: 22px;
  }

  .footer p {
    font-size: 14px;
  }

  .footer-links a {
    font-size: 13.2px;
  }
}

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

@media (max-width: 991px) {
  .footer {
    padding-top: 58px;
  }

  .footer .row {
    padding: 24px 22px 34px;
    row-gap: 28px;
  }

  .footer .row > img {
    width: 72px;
    height: 72px;
    min-width: 72px;
  }

  .footer .col-lg-4 {
    margin-bottom: 2px;
  }

  .footer .col-lg-4 h4 {
    max-width: 580px;
    font-size: 22px;
  }

  .footer p {
    max-width: 650px;
  }

  .footer h4 {
    margin-bottom: 14px;
  }
}

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

@media (max-width: 767px) {
  .footer {
    padding-top: 52px;
  }

  .footer .row {
    padding: 22px 20px 30px;
    row-gap: 26px;
    border-radius: 26px;
  }

  .footer .row > img {
    width: 66px;
    height: 66px;
    min-width: 66px;
    border-radius: 20px;
  }

  .footer .col-lg-4 h4 {
    font-size: 20px;
  }

  .footer p {
    font-size: 13.8px;
    line-height: 1.72;
  }

  .footer h4 {
    font-size: 15.5px;
  }

  .footer-links a {
    font-size: 13.1px;
  }

  .footer-bottom {
    margin-top: 18px;
    font-size: 12.8px;
  }
}

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

@media (max-width: 575px) {
  .footer {
    padding: 44px 0 0;
    background:
      radial-gradient(circle at 12% 8%, rgba(244, 180, 0, 0.13), transparent 30%),
      linear-gradient(135deg, #071b35 0%, var(--primary-dark) 58%, #092745 100%);
  }

  .footer::before {
    width: 230px;
    height: 230px;
    right: -130px;
    top: -125px;
    border-width: 30px;
  }

  .footer::after {
    width: 180px;
    height: 180px;
    left: -100px;
    bottom: 42px;
  }

  .footer .row {
    padding: 20px 17px 26px;
    row-gap: 23px;
    border-radius: 23px;
  }

  .footer .row > img {
    width: 62px;
    height: 62px;
    min-width: 62px;
    padding: 6px;
    border-radius: 18px;
    margin-bottom: -6px;
  }

  .footer .col-lg-4 h4 {
    font-size: 18px;
    line-height: 1.3;
    margin-bottom: 13px;
  }

  .footer .col-lg-4 h4::after {
    width: 62px;
    margin-top: 11px;
  }

  .footer p {
    max-width: 100%;
    font-size: 13.2px;
  }

  .footer h4 {
    font-size: 15px;
    margin-bottom: 12px;
  }

  .footer .col-lg-2 h4::after,
  .footer .col-md-4 h4::after {
    width: 34px;
    margin-top: 8px;
  }

  .footer-links {
    gap: 8px;
  }

  .footer-links a {
    font-size: 12.9px;
  }

  .footer-bottom {
    padding: 17px 0;
    margin-top: 14px;
    font-size: 12.2px;
  }
}

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

@media (max-width: 420px) {
  .footer {
    padding-top: 40px;
  }

  .footer .row {
    padding: 18px 15px 24px;
    border-radius: 20px;
  }

  .footer .row > img {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 16px;
  }

  .footer .col-lg-4 h4 {
    font-size: 16.6px;
  }

  .footer p {
    font-size: 12.8px;
  }

  .footer h4 {
    font-size: 14.4px;
  }

  .footer-links a {
    font-size: 12.5px;
  }
}

@media (max-width: 340px) {
  .footer .row > img {
    width: 50px;
    height: 50px;
    min-width: 50px;
  }

  .footer .col-lg-4 h4 {
    font-size: 15.6px;
  }

  .footer p {
    font-size: 12.4px;
  }

  .footer-bottom {
    font-size: 11.7px;
  }
}

/* ================= ULTRA PREMIUM FOOTER END ================= */


/* ================= INDEX PAGE END ================= */



/* ================= COLLEGE PROFILE PREMIUM CSS START ================= */

.college-profile-page {
  background: #ffffff;
  color: var(--dark);
  overflow: hidden;
}

.college-profile-page * {
  box-sizing: border-box;
}

.college-profile-page a {
  text-decoration: none;
}

.college-profile-page img {
  max-width: 100%;
  display: block;
}

/* ================= COMMON ================= */

.cp-section-badge,
.cp-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.cp-section-badge {
  padding: 8px 14px;
  margin-bottom: 14px;
  color: var(--primary);
  background: var(--soft-blue);
  border: 1px solid rgba(23, 63, 115, 0.12);
}

.cp-section-badge i {
  color: var(--secondary);
}

.cp-section-title {
  max-width: 780px;
  margin: 0 auto 42px;
}

.cp-section-title h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.cp-section-title p {
  max-width: 650px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 500;
}

.cp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 24px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.cp-btn.primary {
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8d1620);
  box-shadow: 0 15px 34px rgba(181, 31, 42, 0.32);
}

.cp-btn.light {
  color: var(--primary);
  background: #ffffff;
  box-shadow: 0 15px 34px rgba(0, 0, 0, 0.16);
}

.cp-btn:hover {
  transform: translateY(-3px);
}

/* ================= HERO ================= */

.cp-hero {
  position: relative;
  min-height: 440px;
  display: flex;
  align-items: center;
  background: #06182f;
  overflow: hidden;
}

.cp-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.cp-hero-bg img {
  width: 100%;
  height: 100%;
  min-height: 440px;
  object-fit: cover;
  object-position: center;
}

.cp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      90deg,
      rgba(6, 24, 47, 0.94) 0%,
      rgba(13, 45, 85, 0.82) 48%,
      rgba(13, 45, 85, 0.35) 100%
    );
}

.cp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
}

.cp-hero .container {
  position: relative;
  z-index: 4;
}

.cp-hero-content {
  max-width: 850px;
  padding: 84px 0;
  color: #ffffff;
}

.cp-badge {
  padding: 9px 15px;
  margin-bottom: 18px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(12px);
}

.cp-badge i {
  color: var(--accent);
}

.cp-hero h1 {
  max-width: 850px;
  margin: 0 0 18px;
  color: #ffffff;
  font-size: 58px;
  line-height: 1.06;
  font-weight: 950;
  letter-spacing: -1.8px;
  text-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

.cp-hero p {
  max-width: 720px;
  margin: 0 0 30px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 16.5px;
  line-height: 1.72;
  font-weight: 500;
}

.cp-hero-actions,
.cp-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ================= ABOUT ================= */

.cp-about-section {
  padding: 84px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
}

.cp-about-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 34px;
  align-items: center;
}

.cp-about-image {
  position: relative;
  min-height: 520px;
  border-radius: 34px;
  overflow: hidden;
  background: var(--soft-blue);
  box-shadow: var(--shadow-lg);
}

.cp-about-image img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
}

.cp-about-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(6, 24, 47, 0.76));
}

.cp-image-badge {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 3;
  padding: 18px;
  border-radius: 22px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(14px);
}

.cp-image-badge strong {
  display: block;
  margin-bottom: 5px;
  font-size: 28px;
  font-weight: 950;
}

.cp-image-badge span {
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  font-weight: 800;
}

.cp-about-content {
  position: relative;
  padding: 42px;
  border-radius: 34px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.cp-about-content::before {
  content: "";
  position: absolute;
  right: -90px;
  top: -95px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
}

.cp-about-content::after {
  content: "";
  position: absolute;
  left: 42px;
  right: 42px;
  bottom: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  border-radius: 999px 999px 0 0;
}

.cp-about-content > * {
  position: relative;
  z-index: 2;
}

.cp-about-content h2,
.cp-principal-content h2 {
  margin: 0 0 18px;
  color: var(--primary-dark);
  font-size: 40px;
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -1px;
}

.cp-about-content p,
.cp-principal-content p {
  margin: 0 0 16px;
  color: var(--text);
  font-size: 15.8px;
  line-height: 1.78;
  font-weight: 500;
}

.cp-points-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 26px;
}

.cp-points-grid div {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 14px;
  border-radius: 16px;
  background: var(--light-bg);
  border: 1px solid var(--border);
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 800;
}

.cp-points-grid i {
  color: var(--success);
  font-size: 18px;
}

/* ================= FACTS ================= */

.cp-facts-section {
  padding: 84px 0;
  background: #ffffff;
}

.cp-facts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.cp-fact-card {
  position: relative;
  min-height: 188px;
  padding: 27px 22px;
  border-radius: 28px;
  background: linear-gradient(145deg, #ffffff, #f7fbff);
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.cp-fact-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.07);
}

.cp-fact-icon {
  position: relative;
  z-index: 2;
  width: 56px;
  height: 56px;
  margin-bottom: 22px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
}

.cp-fact-card h3 {
  position: relative;
  z-index: 2;
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 36px;
  line-height: 1;
  font-weight: 950;
}

.cp-fact-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cp-fact-card:hover,
.cp-vision-card:hover,
.cp-academic-card:hover,
.cp-facility-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-lg);
}

/* ================= VISION ================= */

.cp-vision-section {
  padding: 84px 0;
  background: linear-gradient(180deg, var(--light-bg), #ffffff);
}

.cp-vision-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.cp-vision-card {
  position: relative;
  min-height: 285px;
  padding: 34px 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: all 0.35s ease;
}

.cp-vision-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 22px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 34px rgba(181, 31, 42, 0.22);
}

.cp-vision-icon i {
  font-size: 25px;
}

.cp-vision-card h3 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 24px;
  font-weight: 950;
}

.cp-vision-card p {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.76;
}

/* ================= PRINCIPAL ================= */

.cp-principal-section {
  padding: 84px 0;
  background: #ffffff;
}

.cp-principal-wrap {
  display: grid;
  grid-template-columns: 0.42fr 0.58fr;
  gap: 32px;
  align-items: center;
  padding: 28px;
  border-radius: 36px;
  background:
    radial-gradient(circle at 10% 20%, rgba(244, 180, 0, 0.15), transparent 28%),
    linear-gradient(135deg, rgba(23, 63, 115, 0.98), rgba(13, 45, 85, 0.96));
  box-shadow: var(--shadow-lg);
}

.cp-principal-photo {
  min-height: 390px;
  border-radius: 26px;
  overflow: hidden;
  background: var(--soft-blue);
}

.cp-principal-photo img {
  width: 100%;
  height: 100%;
  min-height: 390px;
  object-fit: cover;
}

.cp-principal-content {
  padding: 18px 12px;
  color: #ffffff;
}

.cp-principal-content .cp-section-badge {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.18);
}

.cp-principal-content .cp-section-badge i {
  color: var(--accent);
}

.cp-principal-content h2 {
  color: #ffffff;
}

.cp-principal-content p {
  color: rgba(255, 255, 255, 0.84);
}

.cp-principal-sign {
  padding-left: 16px;
  border-left: 4px solid var(--accent);
}

.cp-principal-sign strong {
  display: block;
  color: #ffffff;
  font-size: 18px;
  font-weight: 950;
}

.cp-principal-sign span {
  color: rgba(255, 255, 255, 0.76);
  font-size: 13px;
  font-weight: 750;
}

/* ================= ACADEMIC ================= */

.cp-academic-section {
  padding: 84px 0;
  background:
    radial-gradient(circle at 88% 14%, rgba(181, 31, 42, 0.08), transparent 26%),
    var(--light-bg);
}

.cp-academic-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.cp-academic-card {
  position: relative;
  min-height: 245px;
  padding: 30px 24px;
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
  transition: all 0.35s ease;
}

.cp-academic-card i {
  width: 56px;
  height: 56px;
  margin-bottom: 22px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.2);
}

.cp-academic-card h4 {
  margin: 0 0 10px;
  color: var(--primary-dark);
  font-size: 20px;
  font-weight: 950;
}

.cp-academic-card p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.68;
}

/* ================= FACILITIES ================= */

.cp-facilities-section {
  padding: 84px 0;
  background: #ffffff;
}

.cp-facilities-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.cp-facility-card {
  min-height: 145px;
  padding: 22px 14px;
  border-radius: 24px;
  background: linear-gradient(145deg, #ffffff, #f7fbff);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  transition: all 0.35s ease;
}

.cp-facility-card i {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
}

.cp-facility-card span {
  color: var(--primary-dark);
  font-size: 14px;
  font-weight: 900;
}

/* ================= CTA ================= */

.cp-cta-section {
  padding: 0 0 84px;
  background: #ffffff;
}

.cp-cta-wrap {
  position: relative;
  padding: 40px;
  border-radius: 34px;
  background:
    radial-gradient(circle at 10% 20%, rgba(244, 180, 0, 0.16), transparent 26%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.cp-cta-wrap span {
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.cp-cta-wrap h2 {
  max-width: 750px;
  margin: 0;
  color: #ffffff;
  font-size: 34px;
  line-height: 1.22;
  font-weight: 950;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .cp-hero h1 {
    font-size: 46px;
  }

  .cp-about-grid,
  .cp-principal-wrap {
    grid-template-columns: 1fr;
  }

  .cp-facts-grid,
  .cp-academic-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cp-vision-grid {
    grid-template-columns: 1fr;
  }

  .cp-facilities-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .cp-cta-wrap {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 991px) {
  .cp-hero {
    min-height: 390px;
  }

  .cp-hero-content {
    padding: 68px 0;
  }

  .cp-hero h1 {
    font-size: 40px;
  }

  .cp-section-title h2,
  .cp-about-content h2,
  .cp-principal-content h2 {
    font-size: 32px;
  }

  .cp-about-section,
  .cp-facts-section,
  .cp-vision-section,
  .cp-principal-section,
  .cp-academic-section,
  .cp-facilities-section {
    padding: 64px 0;
  }

  .cp-about-content {
    padding: 32px;
  }

  .cp-about-image,
  .cp-about-image img {
    min-height: 380px;
  }
}

@media (max-width: 767px) {
  .cp-hero {
    min-height: 430px;
  }

  .cp-hero::before {
    background:
      linear-gradient(
        180deg,
        rgba(6, 24, 47, 0.62) 0%,
        rgba(13, 45, 85, 0.88) 48%,
        rgba(6, 24, 47, 0.98) 100%
      );
  }

  .cp-hero h1 {
    font-size: 33px;
  }

  .cp-points-grid,
  .cp-facts-grid,
  .cp-academic-grid {
    grid-template-columns: 1fr;
  }

  .cp-facilities-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cp-hero-actions,
  .cp-cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cp-btn {
    width: 100%;
  }
}

@media (max-width: 575px) {
  .cp-hero {
    min-height: 455px;
  }

  .cp-hero h1 {
    font-size: 28px;
  }

  .cp-hero p,
  .cp-section-title p,
  .cp-about-content p,
  .cp-principal-content p {
    font-size: 14px;
  }

  .cp-section-title h2,
  .cp-about-content h2,
  .cp-principal-content h2 {
    font-size: 26px;
  }

  .cp-about-section,
  .cp-facts-section,
  .cp-vision-section,
  .cp-principal-section,
  .cp-academic-section,
  .cp-facilities-section {
    padding: 52px 0;
  }

  .cp-about-content,
  .cp-vision-card,
  .cp-fact-card,
  .cp-academic-card {
    padding: 22px;
    border-radius: 24px;
  }

  .cp-about-image,
  .cp-about-image img {
    min-height: 300px;
    border-radius: 24px;
  }

  .cp-facilities-grid {
    grid-template-columns: 1fr;
  }

  .cp-cta-wrap {
    padding: 24px;
    border-radius: 24px;
  }

  .cp-cta-wrap h2 {
    font-size: 23px;
  }
}

/* ================= COLLEGE PROFILE PREMIUM CSS END ================= */




/* ================= VISION MISSION PAGE PREMIUM CSS START ================= */

.vision-mission-page {
  background: #ffffff;
  color: var(--dark);
  overflow: hidden;
}

/* ================= COMMON ================= */

.vm-section-badge,
.vm-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.vm-section-badge {
  margin-bottom: 13px;
  padding: 8px 13px;
  color: var(--primary);
  background: var(--soft-blue);
}

.vm-section-badge i {
  color: var(--secondary);
}

.vm-section-head {
  max-width: 780px;
  margin: 0 auto 38px;
}

.vm-section-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -1.1px;
}

.vm-section-head p {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

.vm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 13px 24px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
  text-decoration: none;
  transition: all 0.3s ease;
}

.vm-btn.primary {
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 16px 36px rgba(181, 31, 42, 0.34);
}

.vm-btn.light {
  color: var(--primary);
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
}

.vm-btn:hover {
  transform: translateY(-3px);
}

/* ================= HERO ================= */

.vm-hero {
  position: relative;
  min-height: 430px;
  display: flex;
  align-items: center;
  background: #06182f;
  overflow: hidden;
  isolation: isolate;
}

.vm-hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(6, 24, 47, 0.95) 0%,
      rgba(13, 45, 85, 0.84) 48%,
      rgba(13, 45, 85, 0.34) 100%
    ),
    url("assets/img/vision-mission-hero.png") center / cover no-repeat;
  z-index: -2;
}

.vm-hero::before {
  content: "";
  position: absolute;
  left: -150px;
  bottom: -190px;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 180, 0, 0.22), transparent 68%);
  z-index: -1;
}

.vm-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.7), transparent 78%);
  pointer-events: none;
}

.vm-hero-content {
  max-width: 850px;
  padding: 82px 0;
  color: #ffffff;
}

.vm-badge {
  margin-bottom: 18px;
  padding: 9px 15px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.vm-badge i {
  color: var(--accent);
}

.vm-hero h1 {
  margin: 0 0 18px;
  color: #ffffff;
  font-size: 58px;
  line-height: 1.06;
  font-weight: 950;
  letter-spacing: -1.8px;
  text-shadow: 0 18px 42px rgba(0, 0, 0, 0.25);
}

.vm-hero p {
  max-width: 720px;
  margin: 0 0 30px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 17px;
  line-height: 1.75;
  font-weight: 500;
}

.vm-hero-actions,
.vm-cta-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* ================= INTRO ================= */

.vm-intro-section {
  position: relative;
  padding: 82px 0;
  background:
    radial-gradient(circle at 6% 15%, rgba(23, 63, 115, 0.08), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
}

.vm-intro-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 34px;
  align-items: center;
}

.vm-intro-content {
  padding-right: 16px;
}

.vm-intro-content h2 {
  margin: 0 0 18px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -1.1px;
}

.vm-intro-content p {
  margin: 0 0 16px;
  color: var(--text);
  font-size: 15.8px;
  line-height: 1.78;
  font-weight: 500;
}

.vm-intro-card {
  position: relative;
  min-height: 460px;
  border-radius: 34px;
  overflow: hidden;
  background: var(--soft-blue);
  box-shadow: var(--shadow-lg);
}

.vm-intro-card img {
  width: 100%;
  height: 100%;
  min-height: 460px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.vm-intro-card:hover img {
  transform: scale(1.045);
}

.vm-intro-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(6, 24, 47, 0.78));
}

.vm-intro-floating {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 3;
  padding: 18px;
  border-radius: 22px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.vm-intro-floating strong {
  display: block;
  margin-bottom: 5px;
  font-size: 28px;
  line-height: 1;
  font-weight: 950;
}

.vm-intro-floating span {
  font-size: 13px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.86);
}

/* ================= MAIN VISION MISSION ================= */

.vm-main-section {
  padding: 82px 0;
  background: #ffffff;
}

.vm-main-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.vm-card {
  position: relative;
  padding: 38px;
  min-height: 420px;
  border-radius: 34px;
  overflow: hidden;
  color: #ffffff;
  box-shadow: var(--shadow-lg);
  transition: all 0.35s ease;
}

.vm-card::before {
  content: "";
  position: absolute;
  right: -80px;
  top: -90px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}

.vm-card::after {
  content: "";
  position: absolute;
  left: 38px;
  right: 38px;
  bottom: 0;
  height: 5px;
  border-radius: 999px 999px 0 0;
  background: rgba(255, 255, 255, 0.75);
}

.vm-card-blue {
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.18), transparent 30%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.vm-card-red {
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.18), transparent 30%),
    linear-gradient(135deg, var(--secondary), #7f111b);
}

.vm-icon {
  position: relative;
  z-index: 2;
  width: 68px;
  height: 68px;
  margin-bottom: 24px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(12px);
}

.vm-icon i {
  font-size: 29px;
}

.vm-card h3 {
  position: relative;
  z-index: 2;
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.15;
  font-weight: 950;
}

.vm-card p {
  position: relative;
  z-index: 2;
  margin: 0 0 24px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 15.8px;
  line-height: 1.78;
  font-weight: 500;
}

.vm-card ul {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vm-card li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 14px;
  font-weight: 800;
}

.vm-card li i {
  color: var(--accent);
  font-size: 17px;
}

.vm-card:hover {
  transform: translateY(-8px);
}

/* ================= VALUES ================= */

.vm-values-section {
  padding: 82px 0;
  background:
    radial-gradient(circle at 88% 12%, rgba(181, 31, 42, 0.08), transparent 28%),
    var(--light-bg);
}

.vm-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.vm-value-card {
  position: relative;
  min-height: 245px;
  padding: 30px 24px;
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.vm-value-card::before {
  content: "";
  position: absolute;
  right: -38px;
  top: -38px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.07);
  transition: all 0.35s ease;
}

.vm-value-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.vm-value-icon {
  position: relative;
  z-index: 2;
  width: 56px;
  height: 56px;
  margin-bottom: 22px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.2);
}

.vm-value-icon i {
  font-size: 23px;
}

.vm-value-card h4 {
  position: relative;
  z-index: 2;
  margin: 0 0 10px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.vm-value-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.68;
  font-weight: 500;
}

.vm-value-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-lg);
}

.vm-value-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.vm-value-card:hover::after {
  transform: scaleX(1);
}

/* ================= OBJECTIVES ================= */

.vm-objectives-section {
  padding: 82px 0;
  background: #ffffff;
}

.vm-objectives-wrap {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 32px;
  padding: 34px;
  border-radius: 36px;
  background:
    linear-gradient(135deg, rgba(23, 63, 115, 0.98), rgba(13, 45, 85, 0.96));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.vm-objectives-left {
  color: #ffffff;
  padding: 12px;
}

.vm-objectives-left .vm-section-badge {
  background: rgba(255, 255, 255, 0.13);
  color: #ffffff;
}

.vm-objectives-left .vm-section-badge i {
  color: var(--accent);
}

.vm-objectives-left h2 {
  margin: 0 0 16px;
  color: #ffffff;
  font-size: 40px;
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -1px;
}

.vm-objectives-left p {
  margin: 0 0 26px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15.6px;
  line-height: 1.75;
  font-weight: 500;
}

.vm-objectives-list {
  display: grid;
  gap: 14px;
}

.vm-objective-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px);
  transition: all 0.35s ease;
}

.vm-objective-item span {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: #ffffff;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 950;
}

.vm-objective-item h4 {
  margin: 0 0 7px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 950;
}

.vm-objective-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.vm-objective-item:hover {
  transform: translateX(6px);
  background: rgba(255, 255, 255, 0.15);
}

/* ================= QUALITY ================= */

.vm-quality-section {
  padding: 82px 0;
  background:
    linear-gradient(180deg, var(--light-bg), #ffffff);
}

.vm-quality-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.vm-quality-card {
  position: relative;
  padding: 34px 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: all 0.35s ease;
}

.vm-quality-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(23, 63, 115, 0.06), transparent 48%);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.vm-quality-card i {
  position: relative;
  width: 62px;
  height: 62px;
  margin-bottom: 22px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 16px 34px rgba(181, 31, 42, 0.22);
  font-size: 25px;
}

.vm-quality-card h3 {
  position: relative;
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 23px;
  font-weight: 950;
}

.vm-quality-card p {
  position: relative;
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.76;
  font-weight: 500;
}

.vm-quality-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-lg);
}

.vm-quality-card:hover::before {
  opacity: 1;
}

/* ================= CTA ================= */

.vm-cta-section {
  padding: 0 0 82px;
  background: #ffffff;
}

.vm-cta-wrap {
  position: relative;
  padding: 38px;
  border-radius: 34px;
  background:
    radial-gradient(circle at 10% 20%, rgba(244, 180, 0, 0.16), transparent 26%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  overflow: hidden;
}

.vm-cta-wrap::after {
  content: "";
  position: absolute;
  right: -90px;
  top: -100px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  border: 45px solid rgba(255, 255, 255, 0.06);
}

.vm-cta-wrap > * {
  position: relative;
  z-index: 2;
}

.vm-cta-wrap span {
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.vm-cta-wrap h2 {
  max-width: 740px;
  margin: 0;
  color: #ffffff;
  font-size: 34px;
  line-height: 1.22;
  font-weight: 950;
  letter-spacing: -0.8px;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .vm-hero h1 {
    font-size: 50px;
  }

  .vm-intro-grid,
  .vm-objectives-wrap {
    grid-template-columns: 1fr;
  }

  .vm-values-grid,
  .vm-quality-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .vm-cta-wrap {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 991px) {
  .vm-hero {
    min-height: 390px;
  }

  .vm-hero-content {
    padding: 68px 0;
  }

  .vm-hero h1 {
    font-size: 42px;
  }

  .vm-hero p {
    font-size: 15.8px;
  }

  .vm-intro-section,
  .vm-main-section,
  .vm-values-section,
  .vm-objectives-section,
  .vm-quality-section {
    padding: 64px 0;
  }

  .vm-section-head h2,
  .vm-intro-content h2,
  .vm-objectives-left h2 {
    font-size: 34px;
  }

  .vm-main-grid {
    grid-template-columns: 1fr;
  }

  .vm-card {
    min-height: auto;
  }

  .vm-intro-card,
  .vm-intro-card img {
    min-height: 380px;
  }

  .vm-objectives-wrap {
    padding: 26px;
    border-radius: 30px;
  }
}

@media (max-width: 767px) {
  .vm-hero {
    min-height: 420px;
  }

  .vm-hero-bg {
    background:
      linear-gradient(
        180deg,
        rgba(6, 24, 47, 0.74) 0%,
        rgba(13, 45, 85, 0.92) 52%,
        rgba(6, 24, 47, 0.98) 100%
      ),
      url("assets/img/vision-mission-hero.png") center / cover no-repeat;
  }

  .vm-hero h1 {
    font-size: 36px;
    line-height: 1.12;
  }

  .vm-hero-actions,
  .vm-cta-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .vm-btn {
    width: 100%;
  }

  .vm-values-grid,
  .vm-quality-grid {
    grid-template-columns: 1fr;
  }

  .vm-intro-card,
  .vm-intro-card img {
    min-height: 330px;
  }

  .vm-objective-item {
    grid-template-columns: 54px 1fr;
    padding: 17px;
  }

  .vm-objective-item span {
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }

  .vm-cta-wrap {
    padding: 28px;
    border-radius: 28px;
  }

  .vm-cta-wrap h2 {
    font-size: 28px;
  }
}

@media (max-width: 575px) {
  .vm-hero {
    min-height: 450px;
  }

  .vm-hero-content {
    padding: 58px 0;
  }

  .vm-badge,
  .vm-section-badge {
    font-size: 11.5px;
  }

  .vm-hero h1 {
    font-size: 30px;
  }

  .vm-hero p {
    font-size: 14px;
    line-height: 1.65;
  }

  .vm-section-head h2,
  .vm-intro-content h2,
  .vm-objectives-left h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .vm-section-head p,
  .vm-intro-content p {
    font-size: 14px;
  }

  .vm-intro-section,
  .vm-main-section,
  .vm-values-section,
  .vm-objectives-section,
  .vm-quality-section {
    padding: 52px 0;
  }

  .vm-intro-card,
  .vm-intro-card img {
    min-height: 290px;
    border-radius: 24px;
  }

  .vm-intro-floating {
    left: 16px;
    right: 16px;
    bottom: 16px;
    border-radius: 18px;
  }

  .vm-intro-floating strong {
    font-size: 24px;
  }

  .vm-card {
    padding: 28px 24px;
    border-radius: 26px;
  }

  .vm-card h3 {
    font-size: 28px;
  }

  .vm-card p {
    font-size: 14px;
  }

  .vm-value-card,
  .vm-quality-card {
    border-radius: 22px;
  }

  .vm-objectives-wrap {
    padding: 18px;
    border-radius: 26px;
  }

  .vm-objective-item {
    grid-template-columns: 1fr;
  }

  .vm-cta-section {
    padding-bottom: 54px;
  }

  .vm-cta-wrap {
    padding: 24px;
    border-radius: 24px;
  }

  .vm-cta-wrap h2 {
    font-size: 24px;
  }
}

@media (max-width: 420px) {
  .vm-hero h1 {
    font-size: 27px;
  }

  .vm-section-head h2,
  .vm-intro-content h2,
  .vm-objectives-left h2 {
    font-size: 25px;
  }

  .vm-btn {
    min-height: 46px;
    font-size: 13px;
  }

  .vm-value-card,
  .vm-quality-card {
    padding: 26px 22px;
  }
}

/* ================= VISION MISSION PAGE PREMIUM CSS END ================= */







/* ================= PRINCIPAL MESSAGE PAGE PREMIUM CSS START ================= */

.principal-message-page {
  background: #ffffff;
  color: var(--dark);
  overflow: hidden;
}

/* ================= COMMON ================= */

.pm-section-badge,
.pm-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.pm-section-badge {
  margin-bottom: 13px;
  padding: 8px 13px;
  color: var(--primary);
  background: var(--soft-blue);
}

.pm-section-badge i {
  color: var(--secondary);
}

.pm-section-head {
  max-width: 780px;
  margin: 0 auto 38px;
}

.pm-section-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -1.1px;
}

.pm-section-head p {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

.pm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 13px 24px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
  text-decoration: none;
  transition: all 0.3s ease;
}

.pm-btn.primary {
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 16px 36px rgba(181, 31, 42, 0.34);
}

.pm-btn.light {
  color: var(--primary);
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
}

.pm-btn:hover {
  transform: translateY(-3px);
}

/* ================= HERO ================= */

.pm-hero {
  position: relative;
  min-height: 430px;
  display: flex;
  align-items: center;
  background: #06182f;
  overflow: hidden;
  isolation: isolate;
}

.pm-hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(6, 24, 47, 0.95) 0%,
      rgba(13, 45, 85, 0.84) 48%,
      rgba(13, 45, 85, 0.34) 100%
    ),
    url("assets/img/principal-message-hero.png") center / cover no-repeat;
  z-index: -2;
}

.pm-hero::before {
  content: "";
  position: absolute;
  left: -150px;
  bottom: -190px;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 180, 0, 0.22), transparent 68%);
  z-index: -1;
}

.pm-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.7), transparent 78%);
  pointer-events: none;
}

.pm-hero-content {
  max-width: 850px;
  padding: 82px 0;
  color: #ffffff;
}

.pm-badge {
  margin-bottom: 18px;
  padding: 9px 15px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.pm-badge i {
  color: var(--accent);
}

.pm-hero h1 {
  margin: 0 0 18px;
  color: #ffffff;
  font-size: 58px;
  line-height: 1.06;
  font-weight: 950;
  letter-spacing: -1.8px;
  text-shadow: 0 18px 42px rgba(0, 0, 0, 0.25);
}

.pm-hero p {
  max-width: 720px;
  margin: 0 0 30px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 17px;
  line-height: 1.75;
  font-weight: 500;
}

.pm-hero-actions,
.pm-cta-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* ================= MESSAGE SECTION ================= */

.pm-message-section {
  position: relative;
  padding: 82px 0;
  background:
    radial-gradient(circle at 6% 15%, rgba(23, 63, 115, 0.08), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
}

.pm-message-wrap {
  display: grid;
  grid-template-columns: 0.42fr 0.58fr;
  gap: 34px;
  align-items: stretch;
}

.pm-principal-card {
  position: relative;
  border-radius: 34px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}

.pm-principal-img {
  position: relative;
  min-height: 520px;
  background: var(--soft-blue);
  overflow: hidden;
}

.pm-principal-img img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.pm-principal-card:hover .pm-principal-img img {
  transform: scale(1.045);
}

.pm-principal-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 48%, rgba(6, 24, 47, 0.74));
}

.pm-principal-info {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 3;
  padding: 18px;
  border-radius: 22px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.pm-principal-info span {
  display: inline-block;
  margin-bottom: 7px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--primary-dark);
  font-size: 11px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
}

.pm-principal-info h3 {
  margin: 0 0 6px;
  color: #ffffff;
  font-size: 24px;
  line-height: 1.22;
  font-weight: 950;
}

.pm-principal-info p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  font-weight: 750;
}

.pm-message-content {
  position: relative;
  padding: 42px;
  border-radius: 34px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.pm-message-content::before {
  content: "\F6B0";
  font-family: "bootstrap-icons";
  position: absolute;
  right: 34px;
  top: 28px;
  color: rgba(23, 63, 115, 0.06);
  font-size: 94px;
  line-height: 1;
}

.pm-message-content::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -90px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: rgba(181, 31, 42, 0.06);
}

.pm-message-content h2 {
  position: relative;
  margin: 0 0 18px;
  color: var(--primary-dark);
  font-size: 38px;
  line-height: 1.16;
  font-weight: 950;
  letter-spacing: -1px;
}

.pm-message-content p {
  position: relative;
  margin: 0 0 16px;
  color: var(--text);
  font-size: 15.8px;
  line-height: 1.82;
  font-weight: 500;
}

.pm-signature-box {
  position: relative;
  z-index: 2;
  margin-top: 28px;
  padding: 20px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  box-shadow: 0 18px 42px rgba(13, 45, 85, 0.18);
}

.pm-signature-box strong {
  display: block;
  margin-bottom: 4px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 950;
}

.pm-signature-box span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 750;
}

.pm-signature-box i {
  color: var(--accent);
  font-size: 34px;
}

/* ================= VALUES ================= */

.pm-values-section {
  padding: 82px 0;
  background: #ffffff;
}

.pm-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.pm-value-card {
  position: relative;
  min-height: 245px;
  padding: 30px 24px;
  border-radius: 28px;
  background: linear-gradient(145deg, #ffffff, #f7fbff);
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.pm-value-card::before {
  content: "";
  position: absolute;
  right: -38px;
  top: -38px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.07);
  transition: all 0.35s ease;
}

.pm-value-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.pm-value-icon {
  position: relative;
  z-index: 2;
  width: 56px;
  height: 56px;
  margin-bottom: 22px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.2);
}

.pm-value-icon i {
  font-size: 23px;
}

.pm-value-card h4 {
  position: relative;
  z-index: 2;
  margin: 0 0 10px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.pm-value-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.68;
  font-weight: 500;
}

.pm-value-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-lg);
}

.pm-value-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.pm-value-card:hover::after {
  transform: scaleX(1);
}

/* ================= HIGHLIGHTS ================= */

.pm-highlights-section {
  padding: 82px 0;
  background:
    radial-gradient(circle at 88% 12%, rgba(181, 31, 42, 0.08), transparent 28%),
    var(--light-bg);
}

.pm-highlights-wrap {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 32px;
  padding: 34px;
  border-radius: 36px;
  background:
    linear-gradient(135deg, rgba(23, 63, 115, 0.98), rgba(13, 45, 85, 0.96));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.pm-highlights-left {
  color: #ffffff;
  padding: 12px;
}

.pm-highlights-left .pm-section-badge {
  background: rgba(255, 255, 255, 0.13);
  color: #ffffff;
}

.pm-highlights-left .pm-section-badge i {
  color: var(--accent);
}

.pm-highlights-left h2 {
  margin: 0 0 16px;
  color: #ffffff;
  font-size: 40px;
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -1px;
}

.pm-highlights-left p {
  margin: 0 0 26px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15.6px;
  line-height: 1.75;
  font-weight: 500;
}

.pm-highlights-list {
  display: grid;
  gap: 14px;
}

.pm-highlight-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px);
  transition: all 0.35s ease;
}

.pm-highlight-item span {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: #ffffff;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 950;
}

.pm-highlight-item h4 {
  margin: 0 0 7px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 950;
}

.pm-highlight-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.pm-highlight-item:hover {
  transform: translateX(6px);
  background: rgba(255, 255, 255, 0.15);
}

/* ================= COMMITMENT ================= */

.pm-commitment-section {
  padding: 82px 0;
  background: #ffffff;
}

.pm-commitment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.pm-commitment-card {
  position: relative;
  padding: 34px 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: all 0.35s ease;
}

.pm-commitment-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(23, 63, 115, 0.06), transparent 48%);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.pm-commitment-card i {
  position: relative;
  width: 62px;
  height: 62px;
  margin-bottom: 22px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 16px 34px rgba(181, 31, 42, 0.22);
  font-size: 25px;
}

.pm-commitment-card h3 {
  position: relative;
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 23px;
  font-weight: 950;
}

.pm-commitment-card p {
  position: relative;
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.76;
  font-weight: 500;
}

.pm-commitment-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-lg);
}

.pm-commitment-card:hover::before {
  opacity: 1;
}

/* ================= CTA ================= */

.pm-cta-section {
  padding: 0 0 82px;
  background: #ffffff;
}

.pm-cta-wrap {
  position: relative;
  padding: 38px;
  border-radius: 34px;
  background:
    radial-gradient(circle at 10% 20%, rgba(244, 180, 0, 0.16), transparent 26%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  overflow: hidden;
}

.pm-cta-wrap::after {
  content: "";
  position: absolute;
  right: -90px;
  top: -100px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  border: 45px solid rgba(255, 255, 255, 0.06);
}

.pm-cta-wrap > * {
  position: relative;
  z-index: 2;
}

.pm-cta-wrap span {
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.pm-cta-wrap h2 {
  max-width: 740px;
  margin: 0;
  color: #ffffff;
  font-size: 34px;
  line-height: 1.22;
  font-weight: 950;
  letter-spacing: -0.8px;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .pm-hero h1 {
    font-size: 50px;
  }

  .pm-message-wrap,
  .pm-highlights-wrap {
    grid-template-columns: 1fr;
  }

  .pm-values-grid,
  .pm-commitment-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pm-principal-img,
  .pm-principal-img img {
    min-height: 430px;
  }

  .pm-cta-wrap {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 991px) {
  .pm-hero {
    min-height: 390px;
  }

  .pm-hero-content {
    padding: 68px 0;
  }

  .pm-hero h1 {
    font-size: 42px;
  }

  .pm-hero p {
    font-size: 15.8px;
  }

  .pm-message-section,
  .pm-values-section,
  .pm-highlights-section,
  .pm-commitment-section {
    padding: 64px 0;
  }

  .pm-section-head h2,
  .pm-message-content h2,
  .pm-highlights-left h2 {
    font-size: 34px;
  }

  .pm-message-content {
    padding: 34px;
  }

  .pm-highlights-wrap {
    padding: 26px;
    border-radius: 30px;
  }
}

@media (max-width: 767px) {
  .pm-hero {
    min-height: 420px;
  }

  .pm-hero-bg {
    background:
      linear-gradient(
        180deg,
        rgba(6, 24, 47, 0.74) 0%,
        rgba(13, 45, 85, 0.92) 52%,
        rgba(6, 24, 47, 0.98) 100%
      ),
      url("assets/img/principal-message-hero.png") center / cover no-repeat;
  }

  .pm-hero h1 {
    font-size: 36px;
    line-height: 1.12;
  }

  .pm-hero-actions,
  .pm-cta-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .pm-btn {
    width: 100%;
  }

  .pm-values-grid,
  .pm-commitment-grid {
    grid-template-columns: 1fr;
  }

  .pm-principal-img,
  .pm-principal-img img {
    min-height: 360px;
  }

  .pm-message-content {
    padding: 28px;
    border-radius: 28px;
  }

  .pm-message-content::before {
    font-size: 70px;
    right: 22px;
    top: 18px;
  }

  .pm-highlight-item {
    grid-template-columns: 54px 1fr;
    padding: 17px;
  }

  .pm-highlight-item span {
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }

  .pm-cta-wrap {
    padding: 28px;
    border-radius: 28px;
  }

  .pm-cta-wrap h2 {
    font-size: 28px;
  }
}

@media (max-width: 575px) {
  .pm-hero {
    min-height: 450px;
  }

  .pm-hero-content {
    padding: 58px 0;
  }

  .pm-badge,
  .pm-section-badge {
    font-size: 11.5px;
  }

  .pm-hero h1 {
    font-size: 30px;
  }

  .pm-hero p {
    font-size: 14px;
    line-height: 1.65;
  }

  .pm-section-head h2,
  .pm-message-content h2,
  .pm-highlights-left h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .pm-section-head p,
  .pm-message-content p {
    font-size: 14px;
  }

  .pm-message-section,
  .pm-values-section,
  .pm-highlights-section,
  .pm-commitment-section {
    padding: 52px 0;
  }

  .pm-principal-card {
    border-radius: 24px;
  }

  .pm-principal-img,
  .pm-principal-img img {
    min-height: 300px;
  }

  .pm-principal-info {
    left: 16px;
    right: 16px;
    bottom: 16px;
    border-radius: 18px;
  }

  .pm-principal-info h3 {
    font-size: 20px;
  }

  .pm-message-content {
    padding: 24px;
    border-radius: 24px;
  }

  .pm-signature-box {
    flex-direction: column;
    align-items: flex-start;
    border-radius: 18px;
  }

  .pm-value-card,
  .pm-commitment-card {
    border-radius: 22px;
  }

  .pm-highlights-wrap {
    padding: 18px;
    border-radius: 26px;
  }

  .pm-highlight-item {
    grid-template-columns: 1fr;
  }

  .pm-cta-section {
    padding-bottom: 54px;
  }

  .pm-cta-wrap {
    padding: 24px;
    border-radius: 24px;
  }

  .pm-cta-wrap h2 {
    font-size: 24px;
  }
}

@media (max-width: 420px) {
  .pm-hero h1 {
    font-size: 27px;
  }

  .pm-section-head h2,
  .pm-message-content h2,
  .pm-highlights-left h2 {
    font-size: 25px;
  }

  .pm-btn {
    min-height: 46px;
    font-size: 13px;
  }

  .pm-value-card,
  .pm-commitment-card {
    padding: 26px 22px;
  }
}

/* ================= PRINCIPAL MESSAGE PAGE PREMIUM CSS END ================= */







/* ================= COLLEGE AT A GLANCE PREMIUM RESPONSIVE CSS START ================= */

.college-glance-page {
  background: #ffffff;
  color: var(--dark);
  overflow: hidden;
}

.college-glance-page * {
  box-sizing: border-box;
}

.college-glance-page a {
  text-decoration: none;
}

.college-glance-page img {
  max-width: 100%;
  display: block;
}

/* ================= COMMON ================= */

.cg-section-badge,
.cg-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.cg-section-badge {
  padding: 8px 14px;
  margin-bottom: 14px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
}

.cg-section-badge i {
  color: var(--secondary);
}

.cg-section-title {
  max-width: 790px;
  margin: 0 auto 42px;
}

.cg-section-title h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.cg-section-title p {
  max-width: 650px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

.cg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 13px 24px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.cg-btn.primary {
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 16px 36px rgba(181, 31, 42, 0.32);
}

.cg-btn.light {
  color: var(--primary);
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
}

.cg-btn:hover {
  transform: translateY(-3px);
}

/* ================= HERO ================= */

.cg-hero {
  position: relative;
  min-height: 430px;
  display: flex;
  align-items: center;
  background: #06182f;
  overflow: hidden;
  isolation: isolate;
}

.cg-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(
      90deg,
      rgba(6, 24, 47, 0.96) 0%,
      rgba(13, 45, 85, 0.86) 48%,
      rgba(13, 45, 85, 0.36) 100%
    ),
    url("assets/img/college-glance-hero.png") center / cover no-repeat;
}

.cg-hero-bg img {
  width: 100%;
  height: 100%;
  min-height: 430px;
  object-fit: cover;
  object-position: center;
}

.cg-hero::before {
  content: "";
  position: absolute;
  left: -150px;
  bottom: -190px;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 180, 0, 0.22), transparent 68%);
  z-index: -1;
}

.cg-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.7), transparent 78%);
  pointer-events: none;
}

.cg-hero-content {
  max-width: 860px;
  padding: 82px 0;
  color: #ffffff;
}

.cg-badge {
  padding: 9px 15px;
  margin-bottom: 18px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.cg-badge i {
  color: var(--accent);
}

.cg-hero h1 {
  margin: 0 0 18px;
  color: #ffffff;
  font-size: 58px;
  line-height: 1.06;
  font-weight: 950;
  letter-spacing: -1.8px;
  text-shadow: 0 18px 42px rgba(0, 0, 0, 0.25);
}

.cg-hero p {
  max-width: 730px;
  margin: 0 0 30px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 17px;
  line-height: 1.75;
  font-weight: 500;
}

.cg-hero-actions,
.cg-cta-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* ================= OVERVIEW ================= */

.cg-overview-section {
  position: relative;
  padding: 84px 0;
  background:
    radial-gradient(circle at 6% 15%, rgba(23, 63, 115, 0.08), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
}

.cg-overview-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
  align-items: stretch;
}

.cg-overview-card {
  position: relative;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 26px;
  padding: 34px;
  border-radius: 34px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.cg-overview-card::before {
  content: "";
  position: absolute;
  right: -80px;
  top: -90px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
}

.cg-overview-card::after {
  content: "";
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 0;
  height: 5px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
}

.cg-logo-box {
  position: relative;
  z-index: 2;
  width: 150px;
  height: 150px;
  border-radius: 34px;
  background: linear-gradient(145deg, #ffffff, var(--soft-blue));
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 18px 42px rgba(13, 45, 85, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cg-logo-box img {
  width: 108px;
  height: 108px;
  object-fit: contain;
}

.cg-overview-content {
  position: relative;
  z-index: 2;
}

.cg-overview-content h2,
.cg-about-content h2,
.cg-quality-content h2 {
  margin: 0 0 16px;
  color: var(--primary-dark);
  font-size: 38px;
  line-height: 1.16;
  font-weight: 950;
  letter-spacing: -1px;
}

.cg-overview-content p,
.cg-about-content p,
.cg-quality-content p {
  margin: 0 0 22px;
  color: var(--text);
  font-size: 15.8px;
  line-height: 1.78;
  font-weight: 500;
}

.cg-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cg-info-item {
  padding: 15px;
  border-radius: 16px;
  background: var(--light-bg);
  border: 1px solid var(--border);
}

.cg-info-item span {
  display: block;
  margin-bottom: 6px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cg-info-item strong {
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 800;
}

.cg-feature-card {
  position: relative;
  padding: 34px;
  border-radius: 34px;
  color: #ffffff;
  background:
    radial-gradient(circle at 10% 18%, rgba(244, 180, 0, 0.18), transparent 30%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.cg-feature-card::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -90px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 38px solid rgba(255, 255, 255, 0.06);
}

.cg-feature-icon {
  position: relative;
  z-index: 2;
  width: 66px;
  height: 66px;
  margin-bottom: 24px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(12px);
}

.cg-feature-icon i {
  font-size: 28px;
}

.cg-feature-card h3 {
  position: relative;
  z-index: 2;
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 30px;
  line-height: 1.18;
  font-weight: 950;
}

.cg-feature-card p {
  position: relative;
  z-index: 2;
  margin: 0 0 24px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.cg-text-link {
  position: relative;
  z-index: 2;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 950;
}

.cg-text-link i {
  transition: transform 0.3s ease;
}

.cg-text-link:hover {
  color: var(--accent);
}

.cg-text-link:hover i {
  transform: translateX(5px);
}

/* ================= STATS ================= */

.cg-stats-section {
  padding: 84px 0;
  background: #ffffff;
}

.cg-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.cg-stat-card {
  position: relative;
  min-height: 185px;
  padding: 26px 20px;
  border-radius: 28px;
  background: linear-gradient(145deg, #ffffff, #f7fbff);
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.cg-stat-card::before {
  content: "";
  position: absolute;
  right: -38px;
  top: -38px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.07);
  transition: all 0.35s ease;
}

.cg-stat-card::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.cg-stat-icon {
  position: relative;
  z-index: 2;
  width: 54px;
  height: 54px;
  margin-bottom: 22px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.2);
}

.cg-stat-icon i {
  font-size: 23px;
}

.cg-stat-card h3 {
  position: relative;
  z-index: 2;
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 36px;
  line-height: 1;
  font-weight: 950;
}

.cg-stat-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cg-stat-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-lg);
}

.cg-stat-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.cg-stat-card:hover::after {
  transform: scaleX(1);
}

/* ================= ABOUT ================= */

.cg-about-section {
  padding: 84px 0;
  background:
    radial-gradient(circle at 88% 12%, rgba(181, 31, 42, 0.08), transparent 28%),
    var(--light-bg);
}

.cg-about-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 28px;
  align-items: stretch;
}

.cg-about-content {
  position: relative;
  padding: 38px;
  border-radius: 34px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.cg-about-content::before {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -90px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
}

.cg-about-content > * {
  position: relative;
  z-index: 2;
}

.cg-points-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 26px;
}

.cg-points-grid div {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 13px;
  border-radius: 16px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 800;
}

.cg-points-grid i {
  color: var(--success);
  font-size: 17px;
}

.cg-about-image {
  position: relative;
  min-height: 430px;
  border-radius: 34px;
  overflow: hidden;
  background: var(--soft-blue);
  box-shadow: var(--shadow);
}

.cg-about-image img {
  width: 100%;
  height: 100%;
  min-height: 430px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.cg-about-image:hover img {
  transform: scale(1.045);
}

.cg-about-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 48%, rgba(6, 24, 47, 0.78));
}

.cg-image-caption {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 3;
  padding: 18px;
  border-radius: 22px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(14px);
}

.cg-image-caption strong {
  display: block;
  margin-bottom: 5px;
  font-size: 25px;
  line-height: 1;
  font-weight: 950;
}

.cg-image-caption span {
  color: rgba(255, 255, 255, 0.84);
  font-size: 13px;
  font-weight: 800;
}

/* ================= ACADEMIC ================= */

.cg-academic-section {
  padding: 84px 0;
  background: #ffffff;
}

.cg-academic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.cg-academic-card {
  position: relative;
  min-height: 245px;
  padding: 30px 24px;
  border-radius: 28px;
  background: linear-gradient(145deg, #ffffff, #f7fbff);
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.cg-academic-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.cg-academic-card i {
  width: 56px;
  height: 56px;
  margin-bottom: 22px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.2);
  font-size: 23px;
}

.cg-academic-card h4 {
  margin: 0 0 10px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.cg-academic-card p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.68;
  font-weight: 500;
}

.cg-academic-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-lg);
}

.cg-academic-card:hover::after {
  transform: scaleX(1);
}

/* ================= FACILITIES ================= */

.cg-facilities-section {
  padding: 84px 0;
  background: linear-gradient(180deg, var(--light-bg), #ffffff);
}

.cg-facilities-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.cg-facility-card {
  min-height: 145px;
  padding: 22px 14px;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  transition: all 0.35s ease;
}

.cg-facility-card i {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.2);
}

.cg-facility-card span {
  color: var(--primary-dark);
  font-size: 14px;
  font-weight: 900;
}

.cg-facility-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* ================= QUALITY ================= */

.cg-quality-section {
  padding: 84px 0;
  background: #ffffff;
}

.cg-quality-wrap {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 32px;
  padding: 34px;
  border-radius: 36px;
  background:
    radial-gradient(circle at 10% 20%, rgba(244, 180, 0, 0.14), transparent 28%),
    linear-gradient(135deg, rgba(23, 63, 115, 0.98), rgba(13, 45, 85, 0.96));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.cg-quality-content {
  color: #ffffff;
  padding: 12px;
}

.cg-quality-content .cg-section-badge {
  background: rgba(255, 255, 255, 0.13);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.16);
}

.cg-quality-content .cg-section-badge i {
  color: var(--accent);
}

.cg-quality-content h2 {
  color: #ffffff;
}

.cg-quality-content p {
  color: rgba(255, 255, 255, 0.82);
}

.cg-quality-list {
  display: grid;
  gap: 14px;
}

.cg-quality-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px);
  transition: all 0.35s ease;
}

.cg-quality-item span {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: #ffffff;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 950;
}

.cg-quality-item h4 {
  margin: 0 0 7px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 950;
}

.cg-quality-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.cg-quality-item:hover {
  transform: translateX(6px);
  background: rgba(255, 255, 255, 0.15);
}

/* ================= LINKS ================= */

.cg-links-section {
  padding: 84px 0;
  background: #ffffff;
}

.cg-links-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.cg-link-card {
  min-height: 92px;
  padding: 20px;
  border-radius: 22px;
  background: linear-gradient(145deg, #ffffff, #f7fbff);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--primary-dark);
  font-size: 15px;
  font-weight: 950;
  transition: all 0.35s ease;
}

.cg-link-card i {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.cg-link-card:hover {
  transform: translateY(-6px);
  color: var(--primary);
  box-shadow: var(--shadow-lg);
}

/* ================= CTA ================= */

.cg-cta-section {
  padding: 0 0 84px;
  background: #ffffff;
}

.cg-cta-wrap {
  position: relative;
  padding: 38px;
  border-radius: 34px;
  background:
    radial-gradient(circle at 10% 20%, rgba(244, 180, 0, 0.16), transparent 26%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  overflow: hidden;
}

.cg-cta-wrap::after {
  content: "";
  position: absolute;
  right: -90px;
  top: -100px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  border: 45px solid rgba(255, 255, 255, 0.06);
}

.cg-cta-wrap > * {
  position: relative;
  z-index: 2;
}

.cg-cta-wrap span {
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.cg-cta-wrap h2 {
  max-width: 740px;
  margin: 0;
  color: #ffffff;
  font-size: 34px;
  line-height: 1.22;
  font-weight: 950;
  letter-spacing: -0.8px;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .cg-hero h1 {
    font-size: 50px;
  }

  .cg-overview-grid,
  .cg-about-grid,
  .cg-quality-wrap {
    grid-template-columns: 1fr;
  }

  .cg-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cg-academic-grid,
  .cg-links-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cg-facilities-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .cg-cta-wrap {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 991px) {
  .cg-hero {
    min-height: 390px;
  }

  .cg-hero-content {
    padding: 68px 0;
  }

  .cg-hero h1 {
    font-size: 42px;
  }

  .cg-hero p {
    font-size: 15.8px;
  }

  .cg-overview-section,
  .cg-stats-section,
  .cg-about-section,
  .cg-academic-section,
  .cg-facilities-section,
  .cg-quality-section,
  .cg-links-section {
    padding: 64px 0;
  }

  .cg-section-title h2,
  .cg-overview-content h2,
  .cg-about-content h2,
  .cg-quality-content h2 {
    font-size: 34px;
  }

  .cg-overview-card {
    grid-template-columns: 1fr;
  }

  .cg-logo-box {
    width: 132px;
    height: 132px;
    border-radius: 28px;
  }

  .cg-logo-box img {
    width: 94px;
    height: 94px;
  }

  .cg-quality-wrap {
    padding: 26px;
    border-radius: 30px;
  }
}

@media (max-width: 767px) {
  .cg-hero {
    min-height: 420px;
  }

  .cg-hero-bg {
    background:
      linear-gradient(
        180deg,
        rgba(6, 24, 47, 0.74) 0%,
        rgba(13, 45, 85, 0.92) 52%,
        rgba(6, 24, 47, 0.98) 100%
      ),
      url("assets/img/college-glance-hero.png") center / cover no-repeat;
  }

  .cg-hero h1 {
    font-size: 36px;
    line-height: 1.12;
  }

  .cg-hero-actions,
  .cg-cta-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .cg-btn {
    width: 100%;
  }

  .cg-info-grid,
  .cg-points-grid,
  .cg-stats-grid,
  .cg-academic-grid,
  .cg-links-grid {
    grid-template-columns: 1fr;
  }

  .cg-facilities-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cg-about-image,
  .cg-about-image img {
    min-height: 340px;
  }

  .cg-quality-item {
    grid-template-columns: 54px 1fr;
    padding: 17px;
  }

  .cg-quality-item span {
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }

  .cg-cta-wrap {
    padding: 28px;
    border-radius: 28px;
  }

  .cg-cta-wrap h2 {
    font-size: 28px;
  }
}

@media (max-width: 575px) {
  .cg-hero {
    min-height: 450px;
  }

  .cg-hero-content {
    padding: 58px 0;
  }

  .cg-badge,
  .cg-section-badge {
    font-size: 11.5px;
  }

  .cg-hero h1 {
    font-size: 30px;
  }

  .cg-hero p {
    font-size: 14px;
    line-height: 1.65;
  }

  .cg-section-title h2,
  .cg-overview-content h2,
  .cg-about-content h2,
  .cg-quality-content h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .cg-section-title p,
  .cg-overview-content p,
  .cg-about-content p,
  .cg-quality-content p {
    font-size: 14px;
  }

  .cg-overview-section,
  .cg-stats-section,
  .cg-about-section,
  .cg-academic-section,
  .cg-facilities-section,
  .cg-quality-section,
  .cg-links-section {
    padding: 52px 0;
  }

  .cg-overview-card,
  .cg-feature-card,
  .cg-about-content {
    padding: 24px;
    border-radius: 24px;
  }

  .cg-stat-card,
  .cg-academic-card {
    border-radius: 22px;
  }

  .cg-facilities-grid {
    grid-template-columns: 1fr;
  }

  .cg-facility-card {
    min-height: 120px;
  }

  .cg-quality-wrap {
    padding: 18px;
    border-radius: 26px;
  }

  .cg-quality-item {
    grid-template-columns: 1fr;
  }

  .cg-link-card {
    min-height: 82px;
    padding: 16px;
  }

  .cg-cta-section {
    padding-bottom: 54px;
  }

  .cg-cta-wrap {
    padding: 24px;
    border-radius: 24px;
  }

  .cg-cta-wrap h2 {
    font-size: 24px;
  }
}

@media (max-width: 420px) {
  .cg-hero h1 {
    font-size: 27px;
  }

  .cg-section-title h2,
  .cg-overview-content h2,
  .cg-about-content h2,
  .cg-quality-content h2 {
    font-size: 25px;
  }

  .cg-btn {
    min-height: 46px;
    font-size: 13px;
  }

  .cg-stat-card,
  .cg-academic-card {
    padding: 26px 22px;
  }

  .cg-logo-box {
    width: 116px;
    height: 116px;
  }

  .cg-logo-box img {
    width: 82px;
    height: 82px;
  }
}

/* ================= COLLEGE AT A GLANCE PREMIUM RESPONSIVE CSS END ================= */






/* ================= COURSES OFFERED PREMIUM CSS START ================= */

.courses-page {
  background: #ffffff;
  color: var(--dark);
  overflow: hidden;
}

.courses-page * {
  box-sizing: border-box;
}

.courses-page a {
  text-decoration: none;
}

.courses-page img {
  max-width: 100%;
  display: block;
}

/* ================= COMMON ================= */

.course-section-badge,
.course-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.course-section-badge {
  padding: 8px 14px;
  margin-bottom: 14px;
  color: var(--primary);
  background: var(--soft-blue);
  border: 1px solid rgba(23, 63, 115, 0.12);
}

.course-section-badge i {
  color: var(--secondary);
}

.course-section-title {
  max-width: 780px;
  margin: 0 auto 42px;
}

.course-section-title h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.course-section-title p {
  max-width: 650px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 500;
}

.course-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 24px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.course-btn.primary {
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8d1620);
  box-shadow: 0 15px 34px rgba(181, 31, 42, 0.32);
}

.course-btn.light {
  color: var(--primary);
  background: #ffffff;
  box-shadow: 0 15px 34px rgba(0, 0, 0, 0.16);
}

.course-btn:hover {
  transform: translateY(-3px);
}

/* ================= HERO ================= */

.course-hero {
  position: relative;
  min-height: 440px;
  display: flex;
  align-items: center;
  background: #06182f;
  overflow: hidden;
}

.course-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.course-hero-bg img {
  width: 100%;
  height: 100%;
  min-height: 440px;
  object-fit: cover;
  object-position: center;
}

.course-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      90deg,
      rgba(6, 24, 47, 0.94) 0%,
      rgba(13, 45, 85, 0.82) 48%,
      rgba(13, 45, 85, 0.35) 100%
    );
}

.course-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
}

.course-hero .container {
  position: relative;
  z-index: 4;
}

.course-hero-content {
  max-width: 850px;
  padding: 84px 0;
  color: #ffffff;
}

.course-badge {
  padding: 9px 15px;
  margin-bottom: 18px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(12px);
}

.course-badge i {
  color: var(--accent);
}

.course-hero h1 {
  max-width: 850px;
  margin: 0 0 18px;
  color: #ffffff;
  font-size: 58px;
  line-height: 1.06;
  font-weight: 950;
  letter-spacing: -1.8px;
  text-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

.course-hero p {
  max-width: 720px;
  margin: 0 0 30px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 16.5px;
  line-height: 1.72;
  font-weight: 500;
}

.course-hero-actions,
.course-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ================= INTRO ================= */

.course-intro-section {
  padding: 84px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
}

.course-intro-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
  align-items: stretch;
}

.course-intro-card {
  position: relative;
  padding: 40px;
  border-radius: 34px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.course-intro-card::before {
  content: "";
  position: absolute;
  right: -90px;
  top: -95px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
}

.course-intro-card::after {
  content: "";
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  border-radius: 999px 999px 0 0;
}

.course-intro-card > * {
  position: relative;
  z-index: 2;
}

.course-intro-card h2,
.course-eligibility-content h2 {
  margin: 0 0 16px;
  color: var(--primary-dark);
  font-size: 38px;
  line-height: 1.16;
  font-weight: 950;
  letter-spacing: -0.9px;
}

.course-intro-card p,
.course-eligibility-content p {
  margin: 0 0 16px;
  color: var(--text);
  font-size: 15.8px;
  line-height: 1.78;
  font-weight: 500;
}

.course-intro-points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 26px;
}

.course-intro-points div {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 14px;
  border-radius: 16px;
  background: var(--light-bg);
  border: 1px solid var(--border);
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 800;
}

.course-intro-points i {
  color: var(--success);
  font-size: 18px;
}

.course-admission-card {
  position: relative;
  padding: 36px;
  border-radius: 34px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 18%, rgba(244, 180, 0, 0.18), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.course-admission-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -95px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  border: 40px solid rgba(255, 255, 255, 0.06);
}

.course-admission-icon {
  position: relative;
  z-index: 2;
  width: 68px;
  height: 68px;
  margin-bottom: 24px;
  border-radius: 22px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.course-admission-icon i {
  font-size: 29px;
}

.course-admission-card h3 {
  position: relative;
  z-index: 2;
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 30px;
  line-height: 1.18;
  font-weight: 950;
}

.course-admission-card p {
  position: relative;
  z-index: 2;
  margin: 0 0 24px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
}

.course-text-link {
  position: relative;
  z-index: 2;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 950;
}

.course-text-link:hover {
  color: var(--accent);
}

/* ================= PROGRAMMES ================= */

.course-programmes-section {
  padding: 84px 0;
  background: #ffffff;
}

.course-programmes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.course-card {
  position: relative;
  padding: 32px;
  border-radius: 30px;
  background: linear-gradient(145deg, #ffffff, #f7fbff);
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.course-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
}

.course-card > * {
  position: relative;
  z-index: 2;
}

.course-card-icon {
  width: 62px;
  height: 62px;
  margin-bottom: 22px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.2);
}

.course-card-icon i {
  font-size: 26px;
}

.course-level {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--soft-blue);
  color: var(--primary);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.course-card h3 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 26px;
  line-height: 1.2;
  font-weight: 950;
}

.course-card p {
  margin: 0 0 18px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.7;
}

.course-card ul {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 9px;
}

.course-card li {
  display: flex;
  gap: 9px;
  color: var(--dark);
  font-size: 14px;
  font-weight: 700;
}

.course-card li i {
  color: var(--success);
}

.course-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  font-size: 14px;
  font-weight: 950;
}

.course-card-link:hover {
  color: var(--secondary);
}

.course-card:hover,
.course-subject-card:hover,
.course-process-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-lg);
}

/* ================= SUBJECT ================= */

.course-subject-section {
  padding: 84px 0;
  background: linear-gradient(180deg, var(--light-bg), #ffffff);
}

.course-subject-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.course-subject-card {
  min-height: 220px;
  padding: 28px 22px;
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
  transition: all 0.35s ease;
}

.course-subject-card i {
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
}

.course-subject-card h4 {
  margin: 0 0 10px;
  color: var(--primary-dark);
  font-size: 20px;
  font-weight: 950;
}

.course-subject-card p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.68;
}

/* ================= ELIGIBILITY ================= */

.course-eligibility-section {
  padding: 84px 0;
  background: #ffffff;
}

.course-eligibility-wrap {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 32px;
  padding: 36px;
  border-radius: 36px;
  background:
    radial-gradient(circle at 10% 20%, rgba(244, 180, 0, 0.15), transparent 28%),
    linear-gradient(135deg, rgba(23, 63, 115, 0.98), rgba(13, 45, 85, 0.96));
  box-shadow: var(--shadow-lg);
}

.course-eligibility-content {
  color: #ffffff;
  padding: 12px;
}

.course-eligibility-content .course-section-badge {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.18);
}

.course-eligibility-content .course-section-badge i {
  color: var(--accent);
}

.course-eligibility-content h2 {
  color: #ffffff;
}

.course-eligibility-content p {
  color: rgba(255, 255, 255, 0.82);
}

.course-eligibility-list {
  display: grid;
  gap: 14px;
}

.course-eligibility-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  padding: 20px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.course-eligibility-item span {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: #ffffff;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 950;
}

.course-eligibility-item h4 {
  margin: 0 0 7px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 950;
}

.course-eligibility-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 14px;
  line-height: 1.62;
}

/* ================= PROCESS ================= */

.course-process-section {
  padding: 84px 0;
  background: var(--light-bg);
}

.course-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.course-process-card {
  position: relative;
  min-height: 210px;
  padding: 28px 22px;
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
  transition: all 0.35s ease;
}

.course-process-card span {
  width: 54px;
  height: 54px;
  margin-bottom: 22px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 950;
}

.course-process-card h4 {
  margin: 0 0 10px;
  color: var(--primary-dark);
  font-size: 20px;
  font-weight: 950;
}

.course-process-card p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.68;
}

/* ================= CTA ================= */

.course-cta-section {
  padding: 0 0 84px;
  background: #ffffff;
}

.course-cta-wrap {
  position: relative;
  padding: 40px;
  border-radius: 34px;
  background:
    radial-gradient(circle at 10% 20%, rgba(244, 180, 0, 0.16), transparent 26%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.course-cta-wrap span {
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.course-cta-wrap h2 {
  max-width: 750px;
  margin: 0;
  color: #ffffff;
  font-size: 34px;
  line-height: 1.22;
  font-weight: 950;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .course-hero h1 {
    font-size: 46px;
  }

  .course-intro-grid,
  .course-eligibility-wrap {
    grid-template-columns: 1fr;
  }

  .course-subject-grid,
  .course-process-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .course-cta-wrap {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 991px) {
  .course-hero {
    min-height: 390px;
  }

  .course-hero-content {
    padding: 68px 0;
  }

  .course-hero h1 {
    font-size: 40px;
  }

  .course-section-title h2,
  .course-intro-card h2,
  .course-eligibility-content h2 {
    font-size: 32px;
  }

  .course-intro-section,
  .course-programmes-section,
  .course-subject-section,
  .course-eligibility-section,
  .course-process-section {
    padding: 64px 0;
  }

  .course-programmes-grid {
    grid-template-columns: 1fr;
  }

  .course-intro-card {
    padding: 32px;
  }
}

@media (max-width: 767px) {
  .course-hero {
    min-height: 430px;
  }

  .course-hero::before {
    background:
      linear-gradient(
        180deg,
        rgba(6, 24, 47, 0.62) 0%,
        rgba(13, 45, 85, 0.88) 48%,
        rgba(6, 24, 47, 0.98) 100%
      );
  }

  .course-hero h1 {
    font-size: 33px;
  }

  .course-intro-points,
  .course-subject-grid,
  .course-process-grid {
    grid-template-columns: 1fr;
  }

  .course-hero-actions,
  .course-cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .course-btn {
    width: 100%;
  }

  .course-eligibility-item {
    grid-template-columns: 54px 1fr;
  }
}

@media (max-width: 575px) {
  .course-hero {
    min-height: 455px;
  }

  .course-hero h1 {
    font-size: 28px;
  }

  .course-hero p,
  .course-section-title p,
  .course-intro-card p,
  .course-eligibility-content p {
    font-size: 14px;
  }

  .course-section-title h2,
  .course-intro-card h2,
  .course-eligibility-content h2 {
    font-size: 26px;
  }

  .course-intro-section,
  .course-programmes-section,
  .course-subject-section,
  .course-eligibility-section,
  .course-process-section {
    padding: 52px 0;
  }

  .course-intro-card,
  .course-admission-card,
  .course-card,
  .course-subject-card,
  .course-process-card {
    padding: 22px;
    border-radius: 24px;
  }

  .course-eligibility-wrap {
    padding: 18px;
    border-radius: 24px;
  }

  .course-eligibility-item {
    grid-template-columns: 1fr;
  }

  .course-cta-wrap {
    padding: 24px;
    border-radius: 24px;
  }

  .course-cta-wrap h2 {
    font-size: 23px;
  }
}

/* ================= COURSES OFFERED PREMIUM CSS END ================= */






/* ================= ACADEMIC CALENDAR PREMIUM CSS START ================= */

.academic-calendar-page {
  background: #ffffff;
  color: var(--dark);
  overflow: hidden;
}

.academic-calendar-page * {
  box-sizing: border-box;
}

.academic-calendar-page a {
  text-decoration: none;
}

.academic-calendar-page img {
  max-width: 100%;
  display: block;
}

/* ================= COMMON ================= */

.calendar-section-badge,
.calendar-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.calendar-section-badge {
  padding: 8px 14px;
  margin-bottom: 14px;
  color: var(--primary);
  background: var(--soft-blue);
  border: 1px solid rgba(23, 63, 115, 0.12);
}

.calendar-section-badge i {
  color: var(--secondary);
}

.calendar-section-title {
  max-width: 780px;
  margin: 0 auto 42px;
}

.calendar-section-title h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.calendar-section-title p {
  max-width: 650px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 500;
}

.calendar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 24px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.calendar-btn.primary {
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8d1620);
  box-shadow: 0 15px 34px rgba(181, 31, 42, 0.32);
}

.calendar-btn.light {
  color: var(--primary);
  background: #ffffff;
  box-shadow: 0 15px 34px rgba(0, 0, 0, 0.16);
}

.calendar-btn:hover {
  transform: translateY(-3px);
}

/* ================= HERO ================= */

.calendar-hero {
  position: relative;
  min-height: 440px;
  display: flex;
  align-items: center;
  background: #06182f;
  overflow: hidden;
}

.calendar-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.calendar-hero-bg img {
  width: 100%;
  height: 100%;
  min-height: 440px;
  object-fit: cover;
  object-position: center;
}

.calendar-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      90deg,
      rgba(6, 24, 47, 0.94) 0%,
      rgba(13, 45, 85, 0.82) 48%,
      rgba(13, 45, 85, 0.35) 100%
    );
}

.calendar-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
}

.calendar-hero .container {
  position: relative;
  z-index: 4;
}

.calendar-hero-content {
  max-width: 850px;
  padding: 84px 0;
  color: #ffffff;
}

.calendar-badge {
  padding: 9px 15px;
  margin-bottom: 18px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(12px);
}

.calendar-badge i {
  color: var(--accent);
}

.calendar-hero h1 {
  max-width: 850px;
  margin: 0 0 18px;
  color: #ffffff;
  font-size: 58px;
  line-height: 1.06;
  font-weight: 950;
  letter-spacing: -1.8px;
  text-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

.calendar-hero p {
  max-width: 720px;
  margin: 0 0 30px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 16.5px;
  line-height: 1.72;
  font-weight: 500;
}

.calendar-hero-actions,
.calendar-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ================= INTRO ================= */

.calendar-intro-section {
  padding: 84px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
}

.calendar-intro-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
  align-items: stretch;
}

.calendar-intro-card {
  position: relative;
  padding: 40px;
  border-radius: 34px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.calendar-intro-card::before {
  content: "";
  position: absolute;
  right: -90px;
  top: -95px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
}

.calendar-intro-card::after {
  content: "";
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  border-radius: 999px 999px 0 0;
}

.calendar-intro-card > * {
  position: relative;
  z-index: 2;
}

.calendar-intro-card h2,
.calendar-dates-content h2 {
  margin: 0 0 16px;
  color: var(--primary-dark);
  font-size: 38px;
  line-height: 1.16;
  font-weight: 950;
  letter-spacing: -0.9px;
}

.calendar-intro-card p,
.calendar-dates-content p {
  margin: 0 0 16px;
  color: var(--text);
  font-size: 15.8px;
  line-height: 1.78;
  font-weight: 500;
}

.calendar-points-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 26px;
}

.calendar-points-grid div {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 14px;
  border-radius: 16px;
  background: var(--light-bg);
  border: 1px solid var(--border);
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 800;
}

.calendar-points-grid i {
  color: var(--success);
  font-size: 18px;
}

.calendar-notice-card {
  position: relative;
  padding: 36px;
  border-radius: 34px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 18%, rgba(244, 180, 0, 0.18), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.calendar-notice-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -95px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  border: 40px solid rgba(255, 255, 255, 0.06);
}

.calendar-notice-icon {
  position: relative;
  z-index: 2;
  width: 68px;
  height: 68px;
  margin-bottom: 24px;
  border-radius: 22px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.calendar-notice-icon i {
  font-size: 29px;
}

.calendar-notice-card h3 {
  position: relative;
  z-index: 2;
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 30px;
  line-height: 1.18;
  font-weight: 950;
}

.calendar-notice-card p {
  position: relative;
  z-index: 2;
  margin: 0 0 24px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
}

.calendar-text-link {
  position: relative;
  z-index: 2;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 950;
}

.calendar-text-link:hover {
  color: var(--accent);
}

/* ================= STATS ================= */

.calendar-stats-section {
  padding: 84px 0;
  background: #ffffff;
}

.calendar-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.calendar-stat-card {
  position: relative;
  min-height: 188px;
  padding: 27px 22px;
  border-radius: 28px;
  background: linear-gradient(145deg, #ffffff, #f7fbff);
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.calendar-stat-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.07);
}

.calendar-stat-icon {
  position: relative;
  z-index: 2;
  width: 56px;
  height: 56px;
  margin-bottom: 22px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
}

.calendar-stat-card h3 {
  position: relative;
  z-index: 2;
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 34px;
  line-height: 1;
  font-weight: 950;
}

.calendar-stat-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.calendar-stat-card:hover,
.calendar-month-card:hover,
.calendar-download-card:hover,
.calendar-process-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-lg);
}

/* ================= MONTH ================= */

.calendar-month-section {
  padding: 84px 0;
  background: linear-gradient(180deg, var(--light-bg), #ffffff);
}

.calendar-month-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.calendar-month-card {
  position: relative;
  padding: 28px 24px;
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
  transition: all 0.35s ease;
  overflow: hidden;
}

.calendar-month-card::before {
  content: "";
  position: absolute;
  right: -44px;
  top: -44px;
  width: 122px;
  height: 122px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
}

.calendar-month-card > * {
  position: relative;
  z-index: 2;
}

.calendar-month-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.calendar-month-head span {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 950;
}

.calendar-month-head h3 {
  margin: 0;
  color: var(--primary-dark);
  font-size: 24px;
  font-weight: 950;
}

.calendar-month-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 9px;
}

.calendar-month-card li {
  display: flex;
  gap: 9px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 650;
}

.calendar-month-card li i {
  color: var(--success);
}

/* ================= IMPORTANT DATES ================= */

.calendar-dates-section {
  padding: 84px 0;
  background: #ffffff;
}

.calendar-dates-wrap {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 32px;
  padding: 36px;
  border-radius: 36px;
  background:
    radial-gradient(circle at 10% 20%, rgba(244, 180, 0, 0.15), transparent 28%),
    linear-gradient(135deg, rgba(23, 63, 115, 0.98), rgba(13, 45, 85, 0.96));
  box-shadow: var(--shadow-lg);
}

.calendar-dates-content {
  color: #ffffff;
  padding: 12px;
}

.calendar-dates-content .calendar-section-badge {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.18);
}

.calendar-dates-content .calendar-section-badge i {
  color: var(--accent);
}

.calendar-dates-content h2 {
  color: #ffffff;
}

.calendar-dates-content p {
  color: rgba(255, 255, 255, 0.82);
}

.calendar-dates-list {
  display: grid;
  gap: 14px;
}

.calendar-date-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  padding: 20px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.calendar-date-item span {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: #ffffff;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 950;
}

.calendar-date-item h4 {
  margin: 0 0 7px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 950;
}

.calendar-date-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 14px;
  line-height: 1.62;
}

/* ================= DOWNLOADS ================= */

.calendar-download-section {
  padding: 84px 0;
  background: var(--light-bg);
}

.calendar-download-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.calendar-download-card {
  min-height: 120px;
  padding: 22px;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  display: flex;
  align-items: flex-start;
  gap: 16px;
  color: var(--dark);
  transition: all 0.35s ease;
}

.calendar-download-card > i {
  width: 54px;
  height: 54px;
  min-width: 54px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
}

.calendar-download-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 18px;
  font-weight: 950;
}

.calendar-download-card p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}

/* ================= CTA ================= */

.calendar-cta-section {
  padding: 0 0 84px;
  background: #ffffff;
}

.calendar-cta-wrap {
  position: relative;
  padding: 40px;
  border-radius: 34px;
  background:
    radial-gradient(circle at 10% 20%, rgba(244, 180, 0, 0.16), transparent 26%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.calendar-cta-wrap span {
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.calendar-cta-wrap h2 {
  max-width: 750px;
  margin: 0;
  color: #ffffff;
  font-size: 34px;
  line-height: 1.22;
  font-weight: 950;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .calendar-hero h1 {
    font-size: 46px;
  }

  .calendar-intro-grid,
  .calendar-dates-wrap {
    grid-template-columns: 1fr;
  }

  .calendar-month-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .calendar-cta-wrap {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 991px) {
  .calendar-hero {
    min-height: 390px;
  }

  .calendar-hero-content {
    padding: 68px 0;
  }

  .calendar-hero h1 {
    font-size: 40px;
  }

  .calendar-section-title h2,
  .calendar-intro-card h2,
  .calendar-dates-content h2 {
    font-size: 32px;
  }

  .calendar-intro-section,
  .calendar-stats-section,
  .calendar-month-section,
  .calendar-dates-section,
  .calendar-download-section {
    padding: 64px 0;
  }

  .calendar-intro-card {
    padding: 32px;
  }

  .calendar-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .calendar-hero {
    min-height: 430px;
  }

  .calendar-hero::before {
    background:
      linear-gradient(
        180deg,
        rgba(6, 24, 47, 0.62) 0%,
        rgba(13, 45, 85, 0.88) 48%,
        rgba(6, 24, 47, 0.98) 100%
      );
  }

  .calendar-hero h1 {
    font-size: 33px;
  }

  .calendar-points-grid,
  .calendar-stats-grid,
  .calendar-month-grid,
  .calendar-download-grid {
    grid-template-columns: 1fr;
  }

  .calendar-hero-actions,
  .calendar-cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .calendar-btn {
    width: 100%;
  }

  .calendar-date-item {
    grid-template-columns: 54px 1fr;
  }
}

@media (max-width: 575px) {
  .calendar-hero {
    min-height: 455px;
  }

  .calendar-hero h1 {
    font-size: 28px;
  }

  .calendar-hero p,
  .calendar-section-title p,
  .calendar-intro-card p,
  .calendar-dates-content p {
    font-size: 14px;
  }

  .calendar-section-title h2,
  .calendar-intro-card h2,
  .calendar-dates-content h2 {
    font-size: 26px;
  }

  .calendar-intro-section,
  .calendar-stats-section,
  .calendar-month-section,
  .calendar-dates-section,
  .calendar-download-section {
    padding: 52px 0;
  }

  .calendar-intro-card,
  .calendar-notice-card,
  .calendar-month-card,
  .calendar-download-card {
    padding: 22px;
    border-radius: 24px;
  }

  .calendar-dates-wrap {
    padding: 18px;
    border-radius: 24px;
  }

  .calendar-date-item {
    grid-template-columns: 1fr;
  }

  .calendar-cta-wrap {
    padding: 24px;
    border-radius: 24px;
  }

  .calendar-cta-wrap h2 {
    font-size: 23px;
  }
}

/* ================= ACADEMIC CALENDAR PREMIUM CSS END ================= */








/* ================= SYLLABUS PAGE PREMIUM CSS START ================= */

.syllabus-page {
  background: #ffffff;
  color: var(--dark);
  overflow: hidden;
}

.syllabus-page * {
  box-sizing: border-box;
}

.syllabus-page a {
  text-decoration: none;
}

.syllabus-page img {
  max-width: 100%;
  display: block;
}

/* ================= COMMON ================= */

.syllabus-section-badge,
.syllabus-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.syllabus-section-badge {
  padding: 8px 14px;
  margin-bottom: 14px;
  color: var(--primary);
  background: var(--soft-blue);
  border: 1px solid rgba(23, 63, 115, 0.12);
}

.syllabus-section-badge i {
  color: var(--secondary);
}

.syllabus-section-title {
  max-width: 780px;
  margin: 0 auto 42px;
}

.syllabus-section-title h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.syllabus-section-title p {
  max-width: 650px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 500;
}

.syllabus-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 24px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.syllabus-btn.primary {
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8d1620);
  box-shadow: 0 15px 34px rgba(181, 31, 42, 0.32);
}

.syllabus-btn.light {
  color: var(--primary);
  background: #ffffff;
  box-shadow: 0 15px 34px rgba(0, 0, 0, 0.16);
}

.syllabus-btn:hover {
  transform: translateY(-3px);
}

/* ================= HERO ================= */

.syllabus-hero {
  position: relative;
  min-height: 440px;
  display: flex;
  align-items: center;
  background: #06182f;
  overflow: hidden;
}

.syllabus-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.syllabus-hero-bg img {
  width: 100%;
  height: 100%;
  min-height: 440px;
  object-fit: cover;
  object-position: center;
}

.syllabus-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      90deg,
      rgba(6, 24, 47, 0.94) 0%,
      rgba(13, 45, 85, 0.82) 48%,
      rgba(13, 45, 85, 0.35) 100%
    );
}

.syllabus-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
}

.syllabus-hero .container {
  position: relative;
  z-index: 4;
}

.syllabus-hero-content {
  max-width: 850px;
  padding: 84px 0;
  color: #ffffff;
}

.syllabus-badge {
  padding: 9px 15px;
  margin-bottom: 18px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(12px);
}

.syllabus-badge i {
  color: var(--accent);
}

.syllabus-hero h1 {
  max-width: 850px;
  margin: 0 0 18px;
  color: #ffffff;
  font-size: 58px;
  line-height: 1.06;
  font-weight: 950;
  letter-spacing: -1.8px;
  text-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

.syllabus-hero p {
  max-width: 720px;
  margin: 0 0 30px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 16.5px;
  line-height: 1.72;
  font-weight: 500;
}

.syllabus-hero-actions,
.syllabus-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ================= INTRO ================= */

.syllabus-intro-section {
  padding: 84px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
}

.syllabus-intro-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
  align-items: stretch;
}

.syllabus-intro-card {
  position: relative;
  padding: 40px;
  border-radius: 34px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.syllabus-intro-card::before {
  content: "";
  position: absolute;
  right: -90px;
  top: -95px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
}

.syllabus-intro-card::after {
  content: "";
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  border-radius: 999px 999px 0 0;
}

.syllabus-intro-card > * {
  position: relative;
  z-index: 2;
}

.syllabus-intro-card h2,
.syllabus-guideline-content h2 {
  margin: 0 0 16px;
  color: var(--primary-dark);
  font-size: 38px;
  line-height: 1.16;
  font-weight: 950;
  letter-spacing: -0.9px;
}

.syllabus-intro-card p,
.syllabus-guideline-content p {
  margin: 0 0 16px;
  color: var(--text);
  font-size: 15.8px;
  line-height: 1.78;
  font-weight: 500;
}

.syllabus-points-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 26px;
}

.syllabus-points-grid div {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 14px;
  border-radius: 16px;
  background: var(--light-bg);
  border: 1px solid var(--border);
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 800;
}

.syllabus-points-grid i {
  color: var(--success);
  font-size: 18px;
}

.syllabus-note-card {
  position: relative;
  padding: 36px;
  border-radius: 34px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 18%, rgba(244, 180, 0, 0.18), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.syllabus-note-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -95px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  border: 40px solid rgba(255, 255, 255, 0.06);
}

.syllabus-note-icon {
  position: relative;
  z-index: 2;
  width: 68px;
  height: 68px;
  margin-bottom: 24px;
  border-radius: 22px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.syllabus-note-icon i {
  font-size: 29px;
}

.syllabus-note-card h3 {
  position: relative;
  z-index: 2;
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 30px;
  line-height: 1.18;
  font-weight: 950;
}

.syllabus-note-card p {
  position: relative;
  z-index: 2;
  margin: 0 0 24px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
}

.syllabus-text-link {
  position: relative;
  z-index: 2;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 950;
}

.syllabus-text-link:hover {
  color: var(--accent);
}

/* ================= STATS ================= */

.syllabus-stats-section {
  padding: 84px 0;
  background: #ffffff;
}

.syllabus-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.syllabus-stat-card {
  position: relative;
  min-height: 188px;
  padding: 27px 22px;
  border-radius: 28px;
  background: linear-gradient(145deg, #ffffff, #f7fbff);
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.syllabus-stat-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 22px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
}

.syllabus-stat-card h3 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 34px;
  line-height: 1;
  font-weight: 950;
}

.syllabus-stat-card p {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ================= DOWNLOAD CARDS ================= */

.syllabus-download-section {
  padding: 84px 0;
  background: linear-gradient(180deg, var(--light-bg), #ffffff);
}

.syllabus-download-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.syllabus-download-card {
  position: relative;
  padding: 32px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.syllabus-download-icon {
  width: 62px;
  height: 62px;
  margin-bottom: 22px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}

.syllabus-download-card span {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--soft-blue);
  color: var(--primary);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.syllabus-download-card h3 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 26px;
  line-height: 1.2;
  font-weight: 950;
}

.syllabus-download-card p {
  margin: 0 0 20px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.7;
}

.syllabus-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  font-size: 14px;
  font-weight: 950;
}

.syllabus-card-link:hover {
  color: var(--secondary);
}

/* ================= SUBJECT ================= */

.syllabus-subject-section {
  padding: 84px 0;
  background: #ffffff;
}

.syllabus-subject-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.syllabus-subject-card {
  min-height: 220px;
  padding: 28px 22px;
  border-radius: 28px;
  background: linear-gradient(145deg, #ffffff, #f7fbff);
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
  transition: all 0.35s ease;
}

.syllabus-subject-card i {
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
}

.syllabus-subject-card h4 {
  margin: 0 0 10px;
  color: var(--primary-dark);
  font-size: 20px;
  font-weight: 950;
}

.syllabus-subject-card p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.68;
}

.syllabus-stat-card:hover,
.syllabus-download-card:hover,
.syllabus-subject-card:hover,
.syllabus-link-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-lg);
}

/* ================= GUIDELINES ================= */

.syllabus-guideline-section {
  padding: 84px 0;
  background: #ffffff;
}

.syllabus-guideline-wrap {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 32px;
  padding: 36px;
  border-radius: 36px;
  background:
    radial-gradient(circle at 10% 20%, rgba(244, 180, 0, 0.15), transparent 28%),
    linear-gradient(135deg, rgba(23, 63, 115, 0.98), rgba(13, 45, 85, 0.96));
  box-shadow: var(--shadow-lg);
}

.syllabus-guideline-content {
  color: #ffffff;
  padding: 12px;
}

.syllabus-guideline-content .syllabus-section-badge {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.18);
}

.syllabus-guideline-content .syllabus-section-badge i {
  color: var(--accent);
}

.syllabus-guideline-content h2 {
  color: #ffffff;
}

.syllabus-guideline-content p {
  color: rgba(255, 255, 255, 0.82);
}

.syllabus-guideline-list {
  display: grid;
  gap: 14px;
}

.syllabus-guideline-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  padding: 20px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.syllabus-guideline-item span {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: #ffffff;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 950;
}

.syllabus-guideline-item h4 {
  margin: 0 0 7px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 950;
}

.syllabus-guideline-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 14px;
  line-height: 1.62;
}

/* ================= LINKS ================= */

.syllabus-links-section {
  padding: 84px 0;
  background: var(--light-bg);
}

.syllabus-links-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.syllabus-link-card {
  min-height: 94px;
  padding: 20px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--primary-dark);
  font-size: 15px;
  font-weight: 950;
  transition: all 0.35s ease;
}

.syllabus-link-card i {
  width: 50px;
  height: 50px;
  min-width: 50px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

/* ================= CTA ================= */

.syllabus-cta-section {
  padding: 0 0 84px;
  background: #ffffff;
}

.syllabus-cta-wrap {
  position: relative;
  padding: 40px;
  border-radius: 34px;
  background:
    radial-gradient(circle at 10% 20%, rgba(244, 180, 0, 0.16), transparent 26%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.syllabus-cta-wrap span {
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.syllabus-cta-wrap h2 {
  max-width: 750px;
  margin: 0;
  color: #ffffff;
  font-size: 34px;
  line-height: 1.22;
  font-weight: 950;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .syllabus-hero h1 {
    font-size: 46px;
  }

  .syllabus-intro-grid,
  .syllabus-guideline-wrap {
    grid-template-columns: 1fr;
  }

  .syllabus-stats-grid,
  .syllabus-subject-grid,
  .syllabus-links-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .syllabus-cta-wrap {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 991px) {
  .syllabus-hero {
    min-height: 390px;
  }

  .syllabus-hero-content {
    padding: 68px 0;
  }

  .syllabus-hero h1 {
    font-size: 40px;
  }

  .syllabus-section-title h2,
  .syllabus-intro-card h2,
  .syllabus-guideline-content h2 {
    font-size: 32px;
  }

  .syllabus-intro-section,
  .syllabus-stats-section,
  .syllabus-download-section,
  .syllabus-subject-section,
  .syllabus-guideline-section,
  .syllabus-links-section {
    padding: 64px 0;
  }

  .syllabus-intro-card {
    padding: 32px;
  }

  .syllabus-download-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .syllabus-hero {
    min-height: 430px;
  }

  .syllabus-hero::before {
    background:
      linear-gradient(
        180deg,
        rgba(6, 24, 47, 0.62) 0%,
        rgba(13, 45, 85, 0.88) 48%,
        rgba(6, 24, 47, 0.98) 100%
      );
  }

  .syllabus-hero h1 {
    font-size: 33px;
  }

  .syllabus-points-grid,
  .syllabus-stats-grid,
  .syllabus-subject-grid,
  .syllabus-links-grid {
    grid-template-columns: 1fr;
  }

  .syllabus-hero-actions,
  .syllabus-cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .syllabus-btn {
    width: 100%;
  }

  .syllabus-guideline-item {
    grid-template-columns: 54px 1fr;
  }
}

@media (max-width: 575px) {
  .syllabus-hero {
    min-height: 455px;
  }

  .syllabus-hero h1 {
    font-size: 28px;
  }

  .syllabus-hero p,
  .syllabus-section-title p,
  .syllabus-intro-card p,
  .syllabus-guideline-content p {
    font-size: 14px;
  }

  .syllabus-section-title h2,
  .syllabus-intro-card h2,
  .syllabus-guideline-content h2 {
    font-size: 26px;
  }

  .syllabus-intro-section,
  .syllabus-stats-section,
  .syllabus-download-section,
  .syllabus-subject-section,
  .syllabus-guideline-section,
  .syllabus-links-section {
    padding: 52px 0;
  }

  .syllabus-intro-card,
  .syllabus-note-card,
  .syllabus-download-card,
  .syllabus-subject-card {
    padding: 22px;
    border-radius: 24px;
  }

  .syllabus-guideline-wrap {
    padding: 18px;
    border-radius: 24px;
  }

  .syllabus-guideline-item {
    grid-template-columns: 1fr;
  }

  .syllabus-cta-wrap {
    padding: 24px;
    border-radius: 24px;
  }

  .syllabus-cta-wrap h2 {
    font-size: 23px;
  }
}

/* ================= SYLLABUS PAGE PREMIUM CSS END ================= */





/* ================= EXAMINATION PAGE PREMIUM CSS START ================= */

.examination-page {
  background: #ffffff;
  color: var(--dark);
  overflow: hidden;
}

.examination-page * {
  box-sizing: border-box;
}

.examination-page a {
  text-decoration: none;
}

.examination-page img {
  max-width: 100%;
  display: block;
}

/* ================= COMMON ================= */

.exam-section-badge,
.exam-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.exam-section-badge {
  padding: 8px 14px;
  margin-bottom: 14px;
  color: var(--primary);
  background: var(--soft-blue);
  border: 1px solid rgba(23, 63, 115, 0.12);
}

.exam-section-badge i {
  color: var(--secondary);
}

.exam-section-title {
  max-width: 780px;
  margin: 0 auto 42px;
}

.exam-section-title h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.exam-section-title p {
  max-width: 650px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 500;
}

.exam-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 24px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.exam-btn.primary {
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8d1620);
  box-shadow: 0 15px 34px rgba(181, 31, 42, 0.32);
}

.exam-btn.light {
  color: var(--primary);
  background: #ffffff;
  box-shadow: 0 15px 34px rgba(0, 0, 0, 0.16);
}

.exam-btn:hover {
  transform: translateY(-3px);
}

/* ================= HERO ================= */

.exam-hero {
  position: relative;
  min-height: 440px;
  display: flex;
  align-items: center;
  background: #06182f;
  overflow: hidden;
}

.exam-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.exam-hero-bg img {
  width: 100%;
  height: 100%;
  min-height: 440px;
  object-fit: cover;
  object-position: center;
}

.exam-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      90deg,
      rgba(6, 24, 47, 0.94) 0%,
      rgba(13, 45, 85, 0.82) 48%,
      rgba(13, 45, 85, 0.35) 100%
    );
}

.exam-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
}

.exam-hero .container {
  position: relative;
  z-index: 4;
}

.exam-hero-content {
  max-width: 850px;
  padding: 84px 0;
  color: #ffffff;
}

.exam-badge {
  padding: 9px 15px;
  margin-bottom: 18px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(12px);
}

.exam-badge i {
  color: var(--accent);
}

.exam-hero h1 {
  max-width: 850px;
  margin: 0 0 18px;
  color: #ffffff;
  font-size: 58px;
  line-height: 1.06;
  font-weight: 950;
  letter-spacing: -1.8px;
  text-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

.exam-hero p {
  max-width: 720px;
  margin: 0 0 30px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 16.5px;
  line-height: 1.72;
  font-weight: 500;
}

.exam-hero-actions,
.exam-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ================= INTRO ================= */

.exam-intro-section {
  padding: 84px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
}

.exam-intro-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
  align-items: stretch;
}

.exam-intro-card {
  position: relative;
  padding: 40px;
  border-radius: 34px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.exam-intro-card::before {
  content: "";
  position: absolute;
  right: -90px;
  top: -95px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
}

.exam-intro-card::after {
  content: "";
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  border-radius: 999px 999px 0 0;
}

.exam-intro-card > * {
  position: relative;
  z-index: 2;
}

.exam-intro-card h2,
.exam-guideline-content h2 {
  margin: 0 0 16px;
  color: var(--primary-dark);
  font-size: 38px;
  line-height: 1.16;
  font-weight: 950;
  letter-spacing: -0.9px;
}

.exam-intro-card p,
.exam-guideline-content p {
  margin: 0 0 16px;
  color: var(--text);
  font-size: 15.8px;
  line-height: 1.78;
  font-weight: 500;
}

.exam-points-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 26px;
}

.exam-points-grid div {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 14px;
  border-radius: 16px;
  background: var(--light-bg);
  border: 1px solid var(--border);
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 800;
}

.exam-points-grid i {
  color: var(--success);
  font-size: 18px;
}

.exam-alert-card {
  position: relative;
  padding: 36px;
  border-radius: 34px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 18%, rgba(244, 180, 0, 0.18), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.exam-alert-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -95px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  border: 40px solid rgba(255, 255, 255, 0.06);
}

.exam-alert-icon {
  position: relative;
  z-index: 2;
  width: 68px;
  height: 68px;
  margin-bottom: 24px;
  border-radius: 22px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.exam-alert-icon i {
  font-size: 29px;
}

.exam-alert-card h3 {
  position: relative;
  z-index: 2;
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 30px;
  line-height: 1.18;
  font-weight: 950;
}

.exam-alert-card p {
  position: relative;
  z-index: 2;
  margin: 0 0 24px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
}

.exam-text-link {
  position: relative;
  z-index: 2;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 950;
}

.exam-text-link:hover {
  color: var(--accent);
}

/* ================= STATS ================= */

.exam-stats-section {
  padding: 84px 0;
  background: #ffffff;
}

.exam-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.exam-stat-card {
  position: relative;
  min-height: 188px;
  padding: 27px 22px;
  border-radius: 28px;
  background: linear-gradient(145deg, #ffffff, #f7fbff);
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.exam-stat-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 22px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
}

.exam-stat-card h3 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 34px;
  line-height: 1;
  font-weight: 950;
}

.exam-stat-card p {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ================= SERVICES ================= */

.exam-services-section {
  padding: 84px 0;
  background: linear-gradient(180deg, var(--light-bg), #ffffff);
}

.exam-services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.exam-service-card {
  position: relative;
  padding: 32px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.exam-service-icon {
  width: 62px;
  height: 62px;
  margin-bottom: 22px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}

.exam-service-card span {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--soft-blue);
  color: var(--primary);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.exam-service-card h3 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 26px;
  line-height: 1.2;
  font-weight: 950;
}

.exam-service-card p {
  margin: 0 0 20px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.7;
}

.exam-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  font-size: 14px;
  font-weight: 950;
}

.exam-card-link:hover {
  color: var(--secondary);
}

.exam-stat-card:hover,
.exam-service-card:hover,
.exam-timeline-card:hover,
.exam-download-card:hover,
.exam-link-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-lg);
}

/* ================= TIMELINE ================= */

.exam-timeline-section {
  padding: 84px 0;
  background: #ffffff;
}

.exam-timeline-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.exam-timeline-card {
  min-height: 210px;
  padding: 28px 22px;
  border-radius: 28px;
  background: linear-gradient(145deg, #ffffff, #f7fbff);
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
  transition: all 0.35s ease;
}

.exam-timeline-card span {
  width: 54px;
  height: 54px;
  margin-bottom: 22px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 950;
}

.exam-timeline-card h4 {
  margin: 0 0 10px;
  color: var(--primary-dark);
  font-size: 20px;
  font-weight: 950;
}

.exam-timeline-card p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.68;
}

/* ================= GUIDELINES ================= */

.exam-guideline-section {
  padding: 84px 0;
  background: #ffffff;
}

.exam-guideline-wrap {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 32px;
  padding: 36px;
  border-radius: 36px;
  background:
    radial-gradient(circle at 10% 20%, rgba(244, 180, 0, 0.15), transparent 28%),
    linear-gradient(135deg, rgba(23, 63, 115, 0.98), rgba(13, 45, 85, 0.96));
  box-shadow: var(--shadow-lg);
}

.exam-guideline-content {
  color: #ffffff;
  padding: 12px;
}

.exam-guideline-content .exam-section-badge {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.18);
}

.exam-guideline-content .exam-section-badge i {
  color: var(--accent);
}

.exam-guideline-content h2 {
  color: #ffffff;
}

.exam-guideline-content p {
  color: rgba(255, 255, 255, 0.82);
}

.exam-guideline-list {
  display: grid;
  gap: 14px;
}

.exam-guideline-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  padding: 20px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.exam-guideline-item span {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: #ffffff;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 950;
}

.exam-guideline-item h4 {
  margin: 0 0 7px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 950;
}

.exam-guideline-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 14px;
  line-height: 1.62;
}

/* ================= DOWNLOAD ================= */

.exam-download-section {
  padding: 84px 0;
  background: var(--light-bg);
}

.exam-download-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.exam-download-card {
  min-height: 120px;
  padding: 22px;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  display: flex;
  align-items: flex-start;
  gap: 16px;
  color: var(--dark);
  transition: all 0.35s ease;
}

.exam-download-card > i {
  width: 54px;
  height: 54px;
  min-width: 54px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
}

.exam-download-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 18px;
  font-weight: 950;
}

.exam-download-card p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}

/* ================= LINKS ================= */

.exam-links-section {
  padding: 84px 0;
  background: #ffffff;
}

.exam-links-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.exam-link-card {
  min-height: 94px;
  padding: 20px;
  border-radius: 22px;
  background: linear-gradient(145deg, #ffffff, #f7fbff);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--primary-dark);
  font-size: 15px;
  font-weight: 950;
  transition: all 0.35s ease;
}

.exam-link-card i {
  width: 50px;
  height: 50px;
  min-width: 50px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

/* ================= CTA ================= */

.exam-cta-section {
  padding: 0 0 84px;
  background: #ffffff;
}

.exam-cta-wrap {
  position: relative;
  padding: 40px;
  border-radius: 34px;
  background:
    radial-gradient(circle at 10% 20%, rgba(244, 180, 0, 0.16), transparent 26%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.exam-cta-wrap span {
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.exam-cta-wrap h2 {
  max-width: 750px;
  margin: 0;
  color: #ffffff;
  font-size: 34px;
  line-height: 1.22;
  font-weight: 950;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .exam-hero h1 {
    font-size: 46px;
  }

  .exam-intro-grid,
  .exam-guideline-wrap {
    grid-template-columns: 1fr;
  }

  .exam-stats-grid,
  .exam-timeline-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .exam-cta-wrap {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 991px) {
  .exam-hero {
    min-height: 390px;
  }

  .exam-hero-content {
    padding: 68px 0;
  }

  .exam-hero h1 {
    font-size: 40px;
  }

  .exam-section-title h2,
  .exam-intro-card h2,
  .exam-guideline-content h2 {
    font-size: 32px;
  }

  .exam-intro-section,
  .exam-stats-section,
  .exam-services-section,
  .exam-timeline-section,
  .exam-guideline-section,
  .exam-download-section,
  .exam-links-section {
    padding: 64px 0;
  }

  .exam-intro-card {
    padding: 32px;
  }

  .exam-services-grid,
  .exam-download-grid,
  .exam-links-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .exam-hero {
    min-height: 430px;
  }

  .exam-hero::before {
    background:
      linear-gradient(
        180deg,
        rgba(6, 24, 47, 0.62) 0%,
        rgba(13, 45, 85, 0.88) 48%,
        rgba(6, 24, 47, 0.98) 100%
      );
  }

  .exam-hero h1 {
    font-size: 33px;
  }

  .exam-points-grid,
  .exam-stats-grid,
  .exam-services-grid,
  .exam-timeline-grid,
  .exam-download-grid,
  .exam-links-grid {
    grid-template-columns: 1fr;
  }

  .exam-hero-actions,
  .exam-cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .exam-btn {
    width: 100%;
  }

  .exam-guideline-item {
    grid-template-columns: 54px 1fr;
  }
}

@media (max-width: 575px) {
  .exam-hero {
    min-height: 455px;
  }

  .exam-hero h1 {
    font-size: 28px;
  }

  .exam-hero p,
  .exam-section-title p,
  .exam-intro-card p,
  .exam-guideline-content p {
    font-size: 14px;
  }

  .exam-section-title h2,
  .exam-intro-card h2,
  .exam-guideline-content h2 {
    font-size: 26px;
  }

  .exam-intro-section,
  .exam-stats-section,
  .exam-services-section,
  .exam-timeline-section,
  .exam-guideline-section,
  .exam-download-section,
  .exam-links-section {
    padding: 52px 0;
  }

  .exam-intro-card,
  .exam-alert-card,
  .exam-service-card,
  .exam-timeline-card,
  .exam-download-card {
    padding: 22px;
    border-radius: 24px;
  }

  .exam-guideline-wrap {
    padding: 18px;
    border-radius: 24px;
  }

  .exam-guideline-item {
    grid-template-columns: 1fr;
  }

  .exam-cta-wrap {
    padding: 24px;
    border-radius: 24px;
  }

  .exam-cta-wrap h2 {
    font-size: 23px;
  }
}

/* ================= EXAMINATION PAGE PREMIUM CSS END ================= */



/* ================= DEPARTMENT-WISE SECTION CSS START ================= */

.dept-wise-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.06), transparent 26%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.dept-wise-head {
  max-width: 820px;
  margin: 0 auto 44px;
}

.dept-wise-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.dept-wise-badge i {
  color: var(--secondary);
}

.dept-wise-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.dept-wise-head p {
  max-width: 680px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

.dept-wise-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.dept-wise-card {
  position: relative;
  min-height: 248px;
  padding: 28px 24px;
  border-radius: 28px;
  color: var(--dark);
  background: linear-gradient(145deg, #ffffff, #f7fbff);
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.dept-wise-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.07);
  transition: all 0.35s ease;
}

.dept-wise-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.dept-wise-card > * {
  position: relative;
  z-index: 2;
}

.dept-wise-icon {
  width: 58px;
  height: 58px;
  margin-bottom: 20px;
  border-radius: 19px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dept-wise-icon i {
  font-size: 24px;
}

.dept-wise-card h3 {
  margin: 0 0 10px;
  color: var(--primary-dark);
  font-size: 22px;
  line-height: 1.25;
  font-weight: 950;
}

.dept-wise-card p {
  margin: 0 0 18px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.68;
  font-weight: 500;
}

.dept-wise-card span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--primary);
  font-size: 13.5px;
  font-weight: 950;
}

.dept-wise-card span i {
  transition: transform 0.3s ease;
}

.dept-wise-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.dept-wise-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.dept-wise-card:hover::after {
  transform: scaleX(1);
}

.dept-wise-card:hover span i {
  transform: translateX(5px);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .dept-wise-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .dept-wise-head h2 {
    font-size: 38px;
  }
}

@media (max-width: 991px) {
  .dept-wise-section {
    padding: 64px 0;
  }

  .dept-wise-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dept-wise-head {
    margin-bottom: 36px;
  }

  .dept-wise-head h2 {
    font-size: 34px;
  }
}

@media (max-width: 767px) {
  .dept-wise-grid {
    grid-template-columns: 1fr;
  }

  .dept-wise-card {
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .dept-wise-section {
    padding: 52px 0;
  }

  .dept-wise-badge {
    font-size: 11.5px;
  }

  .dept-wise-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .dept-wise-head p {
    font-size: 14px;
  }

  .dept-wise-card {
    padding: 24px;
    border-radius: 24px;
  }
}

@media (max-width: 420px) {
  .dept-wise-head h2 {
    font-size: 25px;
  }

  .dept-wise-card {
    padding: 22px;
  }
}

/* ================= DEPARTMENT-WISE SECTION CSS END ================= */



/* ================= FACULTY LIST SECTION PREMIUM CSS START ================= */

.faculty-list-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.faculty-list-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 90px;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.faculty-list-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 120px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.faculty-list-section .container {
  position: relative;
  z-index: 2;
}

/* ================= SECTION HEAD ================= */

.faculty-list-head {
  max-width: 850px;
  margin: 0 auto 34px;
}

.faculty-list-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.faculty-list-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.faculty-list-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.faculty-list-head p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= FILTER ================= */

.faculty-filter-box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 950px;
  margin: 0 auto 38px;
  padding: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--border);
  box-shadow: 0 18px 45px rgba(13, 45, 85, 0.08);
  backdrop-filter: blur(14px);
}

.faculty-filter-box a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 11px 18px;
  border-radius: 999px;
  color: var(--dark);
  background: transparent;
  font-size: 13.5px;
  line-height: 1;
  font-weight: 850;
  transition: all 0.3s ease;
}

.faculty-filter-box a:hover,
.faculty-filter-box a.active {
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 12px 26px rgba(13, 45, 85, 0.20);
}

/* ================= GRID ================= */

.faculty-list-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

/* ================= CARD ================= */

.faculty-card {
  position: relative;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.faculty-card::before {
  content: "";
  position: absolute;
  right: -58px;
  top: -58px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  z-index: 2;
  transition: all 0.35s ease;
}

.faculty-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
  z-index: 4;
}

/* ================= PHOTO ================= */

.faculty-photo {
  position: relative;
  height: 250px;
  background:
    linear-gradient(145deg, var(--soft-blue), #ffffff);
  overflow: hidden;
}

.faculty-photo::before {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  z-index: 2;
  pointer-events: none;
}

.faculty-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 46%, rgba(6, 24, 47, 0.68));
  z-index: 1;
}

.faculty-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.55s ease;
}

/* ================= CONTENT ================= */

.faculty-info {
  position: relative;
  z-index: 3;
  padding: 24px;
  background: #ffffff;
}

.faculty-dept {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 7px 11px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  border: 1px solid rgba(23, 63, 115, 0.12);
  font-size: 11px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.faculty-info h3 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 950;
  letter-spacing: -0.4px;
}

.faculty-info > p {
  margin: 0 0 16px;
  color: var(--secondary);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 850;
}

/* ================= META ================= */

.faculty-meta {
  display: grid;
  gap: 9px;
  margin-bottom: 20px;
}

.faculty-meta span {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 700;
  word-break: break-word;
}

.faculty-meta i {
  color: var(--primary);
  font-size: 15px;
  margin-top: 1px;
}

/* ================= LINK ================= */

.faculty-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  transition: all 0.3s ease;
}

.faculty-link i {
  transition: transform 0.3s ease;
}

/* ================= HOVER ================= */

.faculty-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.faculty-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.faculty-card:hover::after {
  transform: scaleX(1);
}

.faculty-card:hover .faculty-photo img {
  transform: scale(1.07);
}

.faculty-card:hover .faculty-link {
  color: var(--secondary);
}

.faculty-card:hover .faculty-link i {
  transform: translateX(5px);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1399px) {
  .faculty-list-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .faculty-photo {
    height: 255px;
  }
}

@media (max-width: 1199px) {
  .faculty-list-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .faculty-list-head h2 {
    font-size: 38px;
  }

  .faculty-photo {
    height: 280px;
  }
}

@media (max-width: 991px) {
  .faculty-list-section {
    padding: 64px 0;
  }

  .faculty-list-head {
    margin-bottom: 30px;
  }

  .faculty-list-head h2 {
    font-size: 34px;
  }

  .faculty-filter-box {
    border-radius: 24px;
    margin-bottom: 32px;
  }

  .faculty-filter-box a {
    min-height: 38px;
    padding: 10px 15px;
  }
}

@media (max-width: 767px) {
  .faculty-list-grid {
    grid-template-columns: 1fr;
  }

  .faculty-photo {
    height: 330px;
  }

  .faculty-filter-box {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding: 10px;
    border-radius: 18px;
    scrollbar-width: none;
  }

  .faculty-filter-box::-webkit-scrollbar {
    display: none;
  }

  .faculty-filter-box a {
    white-space: nowrap;
  }
}

@media (max-width: 575px) {
  .faculty-list-section {
    padding: 52px 0;
  }

  .faculty-list-badge {
    font-size: 11.5px;
  }

  .faculty-list-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .faculty-list-head p {
    font-size: 14px;
  }

  .faculty-card {
    border-radius: 24px;
  }

  .faculty-photo {
    height: 280px;
  }

  .faculty-info {
    padding: 22px;
  }

  .faculty-info h3 {
    font-size: 21px;
  }

  .faculty-meta span {
    font-size: 13px;
  }
}

@media (max-width: 420px) {
  .faculty-list-head h2 {
    font-size: 25px;
  }

  .faculty-photo {
    height: 245px;
  }

  .faculty-info {
    padding: 20px;
  }

  .faculty-dept {
    font-size: 10px;
    line-height: 1.25;
  }

  .faculty-filter-box {
    margin-bottom: 26px;
  }
}

/* ================= FACULTY LIST SECTION PREMIUM CSS END ================= */



/* ================= ACTIVITIES SECTION CSS START ================= */

.activities-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 10%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 88%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.activities-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 110px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.activities-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.activities-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.activities-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.activities-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.activities-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.activities-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.activities-head p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= GRID ================= */

.activities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* ================= CARD ================= */

.activity-card {
  position: relative;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.activity-card::before {
  content: "";
  position: absolute;
  right: -58px;
  top: -58px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  z-index: 3;
  transition: all 0.35s ease;
}

.activity-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
  z-index: 4;
}

.activity-card.featured {
  grid-column: span 1;
}

/* ================= IMAGE ================= */

.activity-image {
  position: relative;
  height: 235px;
  background: var(--soft-blue);
  overflow: hidden;
}

.activity-image::before {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  z-index: 3;
  pointer-events: none;
}

.activity-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 42%, rgba(6, 24, 47, 0.72));
  z-index: 2;
}

.activity-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.55s ease;
}

.activity-image span {
  position: absolute;
  left: 22px;
  bottom: 20px;
  z-index: 4;
  display: inline-flex;
  padding: 8px 13px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(12px);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ================= CONTENT ================= */

.activity-content {
  position: relative;
  z-index: 3;
  padding: 26px 24px 24px;
  background: #ffffff;
}

.activity-icon {
  width: 58px;
  height: 58px;
  margin-top: -56px;
  margin-bottom: 18px;
  border-radius: 19px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.25);
  border: 4px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.activity-icon i {
  font-size: 23px;
}

.activity-content h3 {
  margin: 0 0 10px;
  color: var(--primary-dark);
  font-size: 22px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.4px;
}

.activity-content p {
  margin: 0 0 20px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.68;
  font-weight: 500;
}

.activity-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  transition: all 0.3s ease;
}

.activity-link i {
  transition: transform 0.3s ease;
}

/* ================= HOVER ================= */

.activity-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.activity-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.activity-card:hover::after {
  transform: scaleX(1);
}

.activity-card:hover .activity-image img {
  transform: scale(1.07);
}

.activity-card:hover .activity-link {
  color: var(--secondary);
}

.activity-card:hover .activity-link i {
  transform: translateX(5px);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .activities-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .activities-head h2 {
    font-size: 38px;
  }

  .activity-image {
    height: 255px;
  }
}

@media (max-width: 991px) {
  .activities-section {
    padding: 64px 0;
  }

  .activities-head {
    margin-bottom: 36px;
  }

  .activities-head h2 {
    font-size: 34px;
  }
}

@media (max-width: 767px) {
  .activities-grid {
    grid-template-columns: 1fr;
  }

  .activity-image {
    height: 300px;
  }
}

@media (max-width: 575px) {
  .activities-section {
    padding: 52px 0;
  }

  .activities-badge {
    font-size: 11.5px;
  }

  .activities-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .activities-head p {
    font-size: 14px;
  }

  .activity-card {
    border-radius: 24px;
  }

  .activity-image {
    height: 245px;
  }

  .activity-content {
    padding: 24px 22px 22px;
  }

  .activity-content h3 {
    font-size: 21px;
  }
}

@media (max-width: 420px) {
  .activities-head h2 {
    font-size: 25px;
  }

  .activity-image {
    height: 220px;
  }

  .activity-content {
    padding: 22px 20px 20px;
  }
}

/* ================= ACTIVITIES SECTION CSS END ================= */




/* ================= NOTICES SECTION CSS START ================= */

.notices-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.notices-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.notices-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.notices-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.notices-head {
  max-width: 850px;
  margin: 0 auto 34px;
}

.notices-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.notices-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.notices-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.notices-head p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= FILTER ================= */

.notices-filter-box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 950px;
  margin: 0 auto 38px;
  padding: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--border);
  box-shadow: 0 18px 45px rgba(13, 45, 85, 0.08);
  backdrop-filter: blur(14px);
}

.notices-filter-box a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 11px 18px;
  border-radius: 999px;
  color: var(--dark);
  background: transparent;
  font-size: 13.5px;
  line-height: 1;
  font-weight: 850;
  transition: all 0.3s ease;
}

.notices-filter-box a:hover,
.notices-filter-box a.active {
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 12px 26px rgba(13, 45, 85, 0.20);
}

/* ================= WRAPPER ================= */

.notices-wrapper {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= FEATURE CARD ================= */

.notice-feature-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.notice-feature-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.notice-feature-card::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.notice-feature-card > * {
  position: relative;
  z-index: 2;
}

.notice-feature-icon {
  width: 68px;
  height: 68px;
  margin-bottom: 24px;
  border-radius: 22px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.notice-feature-icon i {
  font-size: 30px;
}

.notice-label {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.notice-feature-card h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.notice-feature-card p {
  margin: 0 0 26px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.notice-main-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.notice-main-btn i {
  transition: transform 0.3s ease;
}

.notice-main-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.notice-main-btn:hover i {
  transform: translateX(5px);
}

/* ================= NOTICE LIST ================= */

.notices-list {
  display: grid;
  gap: 15px;
}

.notice-item {
  position: relative;
  display: grid;
  grid-template-columns: 78px 1fr 44px;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border-radius: 26px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.notice-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(23, 63, 115, 0.055), transparent 50%);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.notice-date,
.notice-content,
.notice-arrow {
  position: relative;
  z-index: 2;
}

.notice-date {
  width: 78px;
  min-height: 78px;
  border-radius: 22px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.notice-date strong {
  display: block;
  color: #ffffff;
  font-size: 26px;
  line-height: 1;
  font-weight: 950;
}

.notice-date span {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 12px;
  line-height: 1;
  font-weight: 850;
  text-transform: uppercase;
}

.notice-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 9px;
}

.notice-category {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.notice-category.admission {
  color: var(--primary);
  background: var(--soft-blue);
}

.notice-category.exam {
  color: #8f1520;
  background: rgba(181, 31, 42, 0.10);
}

.notice-category.academic {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.notice-category.student {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

.notice-top small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 850;
}

.notice-content h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.35;
  font-weight: 950;
  transition: color 0.3s ease;
}

.notice-content p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.58;
  font-weight: 500;
}

.notice-arrow {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  color: var(--primary);
  background: var(--soft-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.notice-arrow i {
  transition: transform 0.3s ease;
}

.notice-item:hover {
  transform: translateY(-5px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.notice-item:hover::before {
  opacity: 1;
}

.notice-item:hover .notice-content h4 {
  color: var(--secondary);
}

.notice-item:hover .notice-arrow {
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.notice-item:hover .notice-arrow i {
  transform: translateX(4px);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .notices-wrapper {
    grid-template-columns: 1fr;
  }

  .notices-head h2 {
    font-size: 38px;
  }

  .notice-feature-card {
    min-height: auto;
  }
}

@media (max-width: 991px) {
  .notices-section {
    padding: 64px 0;
  }

  .notices-head {
    margin-bottom: 30px;
  }

  .notices-head h2 {
    font-size: 34px;
  }

  .notices-filter-box {
    border-radius: 24px;
    margin-bottom: 32px;
  }

  .notices-filter-box a {
    min-height: 38px;
    padding: 10px 15px;
  }

  .notice-feature-card h3 {
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  .notices-filter-box {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 10px;
    border-radius: 18px;
    scrollbar-width: none;
  }

  .notices-filter-box::-webkit-scrollbar {
    display: none;
  }

  .notices-filter-box a {
    white-space: nowrap;
  }

  .notice-item {
    grid-template-columns: 70px 1fr;
    gap: 14px;
  }

  .notice-arrow {
    grid-column: 2;
    justify-self: flex-start;
  }

  .notice-date {
    width: 70px;
    min-height: 70px;
    border-radius: 20px;
  }

  .notice-date strong {
    font-size: 24px;
  }
}

@media (max-width: 575px) {
  .notices-section {
    padding: 52px 0;
  }

  .notices-badge {
    font-size: 11.5px;
  }

  .notices-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .notices-head p {
    font-size: 14px;
  }

  .notice-feature-card {
    padding: 24px;
    border-radius: 24px;
  }

  .notice-feature-card h3 {
    font-size: 23px;
  }

  .notice-feature-card p {
    font-size: 14px;
  }

  .notice-item {
    grid-template-columns: 1fr;
    padding: 18px;
    border-radius: 22px;
  }

  .notice-date {
    width: 70px;
    min-height: 70px;
  }

  .notice-arrow {
    grid-column: auto;
    justify-self: flex-start;
  }

  .notice-content h4 {
    font-size: 16.5px;
  }

  .notice-content p {
    font-size: 13.5px;
  }
}

@media (max-width: 420px) {
  .notices-head h2 {
    font-size: 25px;
  }

  .notice-feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .notice-main-btn {
    width: 100%;
  }
}

/* ================= NOTICES SECTION CSS END ================= */




/* ================= RESOURCES / SYLLABUS SECTION CSS START ================= */

.resources-syllabus-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.resources-syllabus-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.resources-syllabus-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.resources-syllabus-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.resources-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.resources-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.resources-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.resources-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.resources-head p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.resources-wrapper {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= FEATURE CARD ================= */

.resources-feature-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.resources-feature-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.resources-feature-card::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.resources-feature-card > * {
  position: relative;
  z-index: 2;
}

.resources-feature-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.resources-feature-icon i {
  font-size: 31px;
}

.resources-feature-card > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.resources-feature-card h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.resources-feature-card p {
  margin: 0 0 26px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.resources-main-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.resources-main-btn i {
  transition: transform 0.3s ease;
}

.resources-main-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.resources-main-btn:hover i {
  transform: translateX(5px);
}

/* ================= RESOURCE GRID ================= */

.resources-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.resource-card {
  position: relative;
  min-height: 210px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.resource-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.resource-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.resource-icon,
.resource-content {
  position: relative;
  z-index: 2;
}

.resource-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.resource-icon i {
  font-size: 26px;
}

.resource-tag {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  border: 1px solid rgba(23, 63, 115, 0.12);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.resource-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.resource-content p {
  margin: 0 0 17px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.resource-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.resource-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 850;
}

.resource-meta i {
  color: var(--secondary);
  font-size: 13px;
}

/* ================= HOVER ================= */

.resource-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.resource-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.resource-card:hover::after {
  transform: scaleX(1);
}

.resource-card:hover .resource-content h3 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .resources-wrapper {
    grid-template-columns: 1fr;
  }

  .resources-head h2 {
    font-size: 38px;
  }

  .resources-feature-card {
    min-height: auto;
  }
}

@media (max-width: 991px) {
  .resources-syllabus-section {
    padding: 64px 0;
  }

  .resources-head {
    margin-bottom: 36px;
  }

  .resources-head h2 {
    font-size: 34px;
  }

  .resources-feature-card h3 {
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  .resources-grid {
    grid-template-columns: 1fr;
  }

  .resource-card {
    grid-template-columns: 58px 1fr;
  }
}

@media (max-width: 575px) {
  .resources-syllabus-section {
    padding: 52px 0;
  }

  .resources-badge {
    font-size: 11.5px;
  }

  .resources-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .resources-head p {
    font-size: 14px;
  }

  .resources-feature-card {
    padding: 24px;
    border-radius: 24px;
  }

  .resources-feature-card h3 {
    font-size: 23px;
  }

  .resources-feature-card p {
    font-size: 14px;
  }

  .resource-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
    min-height: auto;
  }

  .resource-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .resource-content h3 {
    font-size: 19px;
  }

  .resource-content p {
    font-size: 13.5px;
  }
}

@media (max-width: 420px) {
  .resources-head h2 {
    font-size: 25px;
  }

  .resources-feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .resources-main-btn {
    width: 100%;
  }

  .resource-meta {
    gap: 7px;
  }
}

/* ================= RESOURCES / SYLLABUS SECTION CSS END ================= */



/* ================= ADMISSION NOTICE SECTION CSS START ================= */

.admission-notice-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.admission-notice-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.admission-notice-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.admission-notice-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.admission-notice-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.admission-notice-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.admission-notice-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.admission-notice-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.admission-notice-head p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.admission-notice-wrapper {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= FEATURE ================= */

.admission-notice-feature {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.admission-notice-feature::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.admission-notice-feature::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.admission-notice-feature > * {
  position: relative;
  z-index: 2;
}

.admission-feature-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.admission-feature-icon i {
  font-size: 31px;
}

.admission-notice-feature > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.admission-notice-feature h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.admission-notice-feature p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.admission-feature-points {
  display: grid;
  gap: 10px;
  margin-bottom: 26px;
}

.admission-feature-points div {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 13px;
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 800;
}

.admission-feature-points i {
  color: var(--accent);
  font-size: 16px;
}

.admission-main-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.admission-main-btn i {
  transition: transform 0.3s ease;
}

.admission-main-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.admission-main-btn:hover i {
  transform: translateX(5px);
}

/* ================= LIST ================= */

.admission-notice-list {
  display: grid;
  gap: 15px;
}

.admission-notice-item {
  position: relative;
  display: grid;
  grid-template-columns: 78px 1fr 44px;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border-radius: 26px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.admission-notice-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(23, 63, 115, 0.055), transparent 52%);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.admission-notice-date,
.admission-notice-content,
.admission-notice-action {
  position: relative;
  z-index: 2;
}

.admission-notice-date {
  width: 78px;
  min-height: 78px;
  border-radius: 22px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.admission-notice-date strong {
  display: block;
  color: #ffffff;
  font-size: 26px;
  line-height: 1;
  font-weight: 950;
}

.admission-notice-date span {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 12px;
  line-height: 1;
  font-weight: 850;
  text-transform: uppercase;
}

.admission-notice-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 9px;
}

.admission-category {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.admission-category.new {
  color: var(--primary);
  background: var(--soft-blue);
}

.admission-category.merit {
  color: #8f1520;
  background: rgba(181, 31, 42, 0.10);
}

.admission-category.document {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.admission-category.fee {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

.admission-notice-top small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 850;
}

.admission-notice-content h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.35;
  font-weight: 950;
  transition: color 0.3s ease;
}

.admission-notice-content p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.58;
  font-weight: 500;
}

.admission-notice-action {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  color: var(--primary);
  background: var(--soft-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.admission-notice-action i {
  transition: transform 0.3s ease;
}

.admission-notice-item:hover {
  transform: translateY(-5px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.admission-notice-item:hover::before {
  opacity: 1;
}

.admission-notice-item:hover .admission-notice-content h4 {
  color: var(--secondary);
}

.admission-notice-item:hover .admission-notice-action {
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.admission-notice-item:hover .admission-notice-action i {
  transform: translateX(4px);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .admission-notice-wrapper {
    grid-template-columns: 1fr;
  }

  .admission-notice-head h2 {
    font-size: 38px;
  }

  .admission-notice-feature {
    min-height: auto;
  }
}

@media (max-width: 991px) {
  .admission-notice-section {
    padding: 64px 0;
  }

  .admission-notice-head {
    margin-bottom: 36px;
  }

  .admission-notice-head h2 {
    font-size: 34px;
  }

  .admission-notice-feature h3 {
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  .admission-notice-item {
    grid-template-columns: 70px 1fr;
    gap: 14px;
  }

  .admission-notice-action {
    grid-column: 2;
    justify-self: flex-start;
  }

  .admission-notice-date {
    width: 70px;
    min-height: 70px;
    border-radius: 20px;
  }

  .admission-notice-date strong {
    font-size: 24px;
  }
}

@media (max-width: 575px) {
  .admission-notice-section {
    padding: 52px 0;
  }

  .admission-notice-badge {
    font-size: 11.5px;
  }

  .admission-notice-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .admission-notice-head p {
    font-size: 14px;
  }

  .admission-notice-feature {
    padding: 24px;
    border-radius: 24px;
  }

  .admission-notice-feature h3 {
    font-size: 23px;
  }

  .admission-notice-feature p {
    font-size: 14px;
  }

  .admission-notice-item {
    grid-template-columns: 1fr;
    padding: 18px;
    border-radius: 22px;
  }

  .admission-notice-date {
    width: 70px;
    min-height: 70px;
  }

  .admission-notice-action {
    grid-column: auto;
    justify-self: flex-start;
  }

  .admission-notice-content h4 {
    font-size: 16.5px;
  }

  .admission-notice-content p {
    font-size: 13.5px;
  }
}

@media (max-width: 420px) {
  .admission-notice-head h2 {
    font-size: 25px;
  }

  .admission-feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .admission-main-btn {
    width: 100%;
  }
}

/* ================= ADMISSION NOTICE SECTION CSS END ================= */



/* ================= COURSES AVAILABLE SECTION CSS START ================= */

.courses-available-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.courses-available-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.courses-available-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.courses-available-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.courses-available-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.courses-available-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.courses-available-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.courses-available-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.courses-available-head p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.courses-available-wrapper {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= FEATURE ================= */

.courses-available-feature {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.courses-available-feature::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.courses-available-feature::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.courses-available-feature > * {
  position: relative;
  z-index: 2;
}

.courses-feature-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.courses-feature-icon i {
  font-size: 31px;
}

.courses-available-feature > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.courses-available-feature h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.courses-available-feature p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.courses-feature-points {
  display: grid;
  gap: 10px;
  margin-bottom: 26px;
}

.courses-feature-points div {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 13px;
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 800;
}

.courses-feature-points i {
  color: var(--accent);
  font-size: 16px;
}

.courses-main-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.courses-main-btn i {
  transition: transform 0.3s ease;
}

.courses-main-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.courses-main-btn:hover i {
  transform: translateX(5px);
}

/* ================= COURSE GRID ================= */

.courses-available-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.course-available-card {
  position: relative;
  min-height: 246px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.course-available-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.course-available-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.course-card-icon,
.course-card-content {
  position: relative;
  z-index: 2;
}

.course-card-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.course-card-icon i {
  font-size: 26px;
}

.course-level {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  border: 1px solid rgba(23, 63, 115, 0.12);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.course-level.pg {
  color: #8f1520;
  background: rgba(181, 31, 42, 0.10);
}

.course-card-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.course-card-content p {
  margin: 0 0 17px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.course-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.course-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 850;
}

.course-meta i {
  color: var(--secondary);
  font-size: 13px;
}

/* ================= HOVER ================= */

.course-available-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.course-available-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.course-available-card:hover::after {
  transform: scaleX(1);
}

.course-available-card:hover .course-card-content h3 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .courses-available-wrapper {
    grid-template-columns: 1fr;
  }

  .courses-available-head h2 {
    font-size: 38px;
  }

  .courses-available-feature {
    min-height: auto;
  }
}

@media (max-width: 991px) {
  .courses-available-section {
    padding: 64px 0;
  }

  .courses-available-head {
    margin-bottom: 36px;
  }

  .courses-available-head h2 {
    font-size: 34px;
  }

  .courses-available-feature h3 {
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  .courses-available-grid {
    grid-template-columns: 1fr;
  }

  .course-available-card {
    grid-template-columns: 58px 1fr;
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .courses-available-section {
    padding: 52px 0;
  }

  .courses-available-badge {
    font-size: 11.5px;
  }

  .courses-available-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .courses-available-head p {
    font-size: 14px;
  }

  .courses-available-feature {
    padding: 24px;
    border-radius: 24px;
  }

  .courses-available-feature h3 {
    font-size: 23px;
  }

  .courses-available-feature p {
    font-size: 14px;
  }

  .course-available-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .course-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .course-card-content h3 {
    font-size: 19px;
  }

  .course-card-content p {
    font-size: 13.5px;
  }
}

@media (max-width: 420px) {
  .courses-available-head h2 {
    font-size: 25px;
  }

  .courses-feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .courses-main-btn {
    width: 100%;
  }

  .course-meta {
    gap: 7px;
  }
}

/* ================= COURSES AVAILABLE SECTION CSS END ================= */






/* ================= ELIGIBILITY SECTION CSS START ================= */

.eligibility-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.eligibility-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.eligibility-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.eligibility-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.eligibility-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.eligibility-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.eligibility-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.eligibility-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.eligibility-head p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.eligibility-wrapper {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= FEATURE ================= */

.eligibility-feature {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.eligibility-feature::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.eligibility-feature::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.eligibility-feature > * {
  position: relative;
  z-index: 2;
}

.eligibility-feature-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.eligibility-feature-icon i {
  font-size: 31px;
}

.eligibility-feature > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.eligibility-feature h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.eligibility-feature p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.eligibility-feature-points {
  display: grid;
  gap: 10px;
  margin-bottom: 26px;
}

.eligibility-feature-points div {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 13px;
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 800;
}

.eligibility-feature-points i {
  color: var(--accent);
  font-size: 16px;
}

.eligibility-main-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.eligibility-main-btn i {
  transition: transform 0.3s ease;
}

.eligibility-main-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.eligibility-main-btn:hover i {
  transform: translateX(5px);
}

/* ================= ELIGIBILITY GRID ================= */

.eligibility-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.eligibility-card {
  position: relative;
  min-height: 246px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.eligibility-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.eligibility-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.eligibility-icon,
.eligibility-content {
  position: relative;
  z-index: 2;
}

.eligibility-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.eligibility-icon i {
  font-size: 26px;
}

.eligibility-level {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  border: 1px solid rgba(23, 63, 115, 0.12);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.eligibility-level.pg {
  color: #8f1520;
  background: rgba(181, 31, 42, 0.10);
}

.eligibility-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.eligibility-content p {
  margin: 0 0 17px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.eligibility-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.eligibility-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 850;
}

.eligibility-meta i {
  color: var(--secondary);
  font-size: 13px;
}

/* ================= NOTE ================= */

.eligibility-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.eligibility-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.eligibility-note-icon i {
  font-size: 26px;
}

.eligibility-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.eligibility-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.eligibility-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.eligibility-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.eligibility-card:hover::after {
  transform: scaleX(1);
}

.eligibility-card:hover .eligibility-content h3 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .eligibility-wrapper {
    grid-template-columns: 1fr;
  }

  .eligibility-head h2 {
    font-size: 38px;
  }

  .eligibility-feature {
    min-height: auto;
  }
}

@media (max-width: 991px) {
  .eligibility-section {
    padding: 64px 0;
  }

  .eligibility-head {
    margin-bottom: 36px;
  }

  .eligibility-head h2 {
    font-size: 34px;
  }

  .eligibility-feature h3 {
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  .eligibility-grid {
    grid-template-columns: 1fr;
  }

  .eligibility-card {
    grid-template-columns: 58px 1fr;
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .eligibility-section {
    padding: 52px 0;
  }

  .eligibility-badge {
    font-size: 11.5px;
  }

  .eligibility-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .eligibility-head p {
    font-size: 14px;
  }

  .eligibility-feature {
    padding: 24px;
    border-radius: 24px;
  }

  .eligibility-feature h3 {
    font-size: 23px;
  }

  .eligibility-feature p {
    font-size: 14px;
  }

  .eligibility-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .eligibility-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .eligibility-content h3 {
    font-size: 19px;
  }

  .eligibility-content p {
    font-size: 13.5px;
  }

  .eligibility-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .eligibility-head h2 {
    font-size: 25px;
  }

  .eligibility-feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .eligibility-main-btn {
    width: 100%;
  }

  .eligibility-meta {
    gap: 7px;
  }
}

/* ================= ELIGIBILITY SECTION CSS END ================= */





/* ================= IMPORTANT DATES SECTION CSS START ================= */

.important-dates-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.important-dates-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.important-dates-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.important-dates-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.important-dates-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.important-dates-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.important-dates-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.important-dates-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.important-dates-head p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.important-dates-wrapper {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= FEATURE ================= */

.important-dates-feature {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.important-dates-feature::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.important-dates-feature::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.important-dates-feature > * {
  position: relative;
  z-index: 2;
}

.important-feature-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.important-feature-icon i {
  font-size: 31px;
}

.important-dates-feature > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.important-dates-feature h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.important-dates-feature p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.important-feature-points {
  display: grid;
  gap: 10px;
  margin-bottom: 26px;
}

.important-feature-points div {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 13px;
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 800;
}

.important-feature-points i {
  color: var(--accent);
  font-size: 16px;
}

.important-main-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.important-main-btn i {
  transition: transform 0.3s ease;
}

.important-main-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.important-main-btn:hover i {
  transform: translateX(5px);
}

/* ================= DATE LIST ================= */

.important-dates-list {
  position: relative;
  display: grid;
  gap: 15px;
}

.important-dates-list::before {
  content: "";
  position: absolute;
  left: 39px;
  top: 20px;
  bottom: 20px;
  width: 2px;
  background: linear-gradient(180deg, var(--primary), var(--secondary), var(--accent));
  opacity: 0.18;
}

.important-date-item {
  position: relative;
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border-radius: 26px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.important-date-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(23, 63, 115, 0.055), transparent 52%);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.important-date-item.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.important-date-box,
.important-date-content {
  position: relative;
  z-index: 2;
}

.important-date-box {
  width: 78px;
  min-height: 78px;
  border-radius: 22px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.important-date-item.active .important-date-box {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.24);
}

.important-date-box strong {
  display: block;
  color: #ffffff;
  font-size: 26px;
  line-height: 1;
  font-weight: 950;
}

.important-date-box span {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 12px;
  line-height: 1;
  font-weight: 850;
  text-transform: uppercase;
}

.important-date-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 9px;
}

.important-date-category {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.important-date-category.admission {
  color: var(--primary);
  background: var(--soft-blue);
}

.important-date-category.merit {
  color: #8f1520;
  background: rgba(181, 31, 42, 0.10);
}

.important-date-category.document {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.important-date-category.fee {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

.important-date-category.academic {
  color: #3d3d8f;
  background: rgba(23, 63, 115, 0.10);
}

.important-date-top small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 850;
}

.important-date-content h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.35;
  font-weight: 950;
  transition: color 0.3s ease;
}

.important-date-content p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.58;
  font-weight: 500;
}

/* ================= NOTE ================= */

.important-dates-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.important-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.important-note-icon i {
  font-size: 26px;
}

.important-dates-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.important-dates-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.important-date-item:hover {
  transform: translateY(-5px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.important-date-item:hover::before {
  opacity: 1;
}

.important-date-item:hover .important-date-content h4 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .important-dates-wrapper {
    grid-template-columns: 1fr;
  }

  .important-dates-head h2 {
    font-size: 38px;
  }

  .important-dates-feature {
    min-height: auto;
  }
}

@media (max-width: 991px) {
  .important-dates-section {
    padding: 64px 0;
  }

  .important-dates-head {
    margin-bottom: 36px;
  }

  .important-dates-head h2 {
    font-size: 34px;
  }

  .important-dates-feature h3 {
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  .important-dates-list::before {
    left: 35px;
  }

  .important-date-item {
    grid-template-columns: 70px 1fr;
    gap: 14px;
  }

  .important-date-box {
    width: 70px;
    min-height: 70px;
    border-radius: 20px;
  }

  .important-date-box strong {
    font-size: 24px;
  }
}

@media (max-width: 575px) {
  .important-dates-section {
    padding: 52px 0;
  }

  .important-dates-badge {
    font-size: 11.5px;
  }

  .important-dates-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .important-dates-head p {
    font-size: 14px;
  }

  .important-dates-feature {
    padding: 24px;
    border-radius: 24px;
  }

  .important-dates-feature h3 {
    font-size: 23px;
  }

  .important-dates-feature p {
    font-size: 14px;
  }

  .important-dates-list::before {
    display: none;
  }

  .important-date-item {
    grid-template-columns: 1fr;
    padding: 18px;
    border-radius: 22px;
  }

  .important-date-box {
    width: 70px;
    min-height: 70px;
  }

  .important-date-content h4 {
    font-size: 16.5px;
  }

  .important-date-content p {
    font-size: 13.5px;
  }

  .important-dates-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .important-dates-head h2 {
    font-size: 25px;
  }

  .important-feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .important-main-btn {
    width: 100%;
  }
}

/* ================= IMPORTANT DATES SECTION CSS END ================= */





/* ================= REQUIRED DOCUMENTS SECTION CSS START ================= */

.required-documents-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.required-documents-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.required-documents-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.required-documents-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.required-documents-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.required-documents-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.required-documents-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.required-documents-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.required-documents-head p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.required-documents-wrapper {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= FEATURE ================= */

.required-documents-feature {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.required-documents-feature::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.required-documents-feature::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.required-documents-feature > * {
  position: relative;
  z-index: 2;
}

.required-feature-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.required-feature-icon i {
  font-size: 31px;
}

.required-documents-feature > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.required-documents-feature h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.required-documents-feature p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.required-feature-points {
  display: grid;
  gap: 10px;
  margin-bottom: 26px;
}

.required-feature-points div {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 13px;
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 800;
}

.required-feature-points i {
  color: var(--accent);
  font-size: 16px;
}

.required-main-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.required-main-btn i {
  transition: transform 0.3s ease;
}

.required-main-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.required-main-btn:hover i {
  transform: translateX(5px);
}

/* ================= DOCUMENT GRID ================= */

.required-documents-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.required-document-card {
  position: relative;
  min-height: 198px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.required-document-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.required-document-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.required-document-icon,
.required-document-content {
  position: relative;
  z-index: 2;
}

.required-document-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.required-document-icon i {
  font-size: 26px;
}

.required-document-tag {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  border: 1px solid rgba(23, 63, 115, 0.12);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.required-document-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.required-document-content p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

/* ================= NOTE ================= */

.required-documents-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.required-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.required-note-icon i {
  font-size: 26px;
}

.required-documents-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.required-documents-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.required-document-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.required-document-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.required-document-card:hover::after {
  transform: scaleX(1);
}

.required-document-card:hover .required-document-content h3 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .required-documents-wrapper {
    grid-template-columns: 1fr;
  }

  .required-documents-head h2 {
    font-size: 38px;
  }

  .required-documents-feature {
    min-height: auto;
  }
}

@media (max-width: 991px) {
  .required-documents-section {
    padding: 64px 0;
  }

  .required-documents-head {
    margin-bottom: 36px;
  }

  .required-documents-head h2 {
    font-size: 34px;
  }

  .required-documents-feature h3 {
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  .required-documents-grid {
    grid-template-columns: 1fr;
  }

  .required-document-card {
    grid-template-columns: 58px 1fr;
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .required-documents-section {
    padding: 52px 0;
  }

  .required-documents-badge {
    font-size: 11.5px;
  }

  .required-documents-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .required-documents-head p {
    font-size: 14px;
  }

  .required-documents-feature {
    padding: 24px;
    border-radius: 24px;
  }

  .required-documents-feature h3 {
    font-size: 23px;
  }

  .required-documents-feature p {
    font-size: 14px;
  }

  .required-document-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .required-document-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .required-document-content h3 {
    font-size: 19px;
  }

  .required-document-content p {
    font-size: 13.5px;
  }

  .required-documents-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .required-documents-head h2 {
    font-size: 25px;
  }

  .required-feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .required-main-btn {
    width: 100%;
  }
}

/* ================= REQUIRED DOCUMENTS SECTION CSS END ================= */





/* ================= MERIT LIST SECTION CSS START ================= */

.merit-list-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.merit-list-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.merit-list-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.merit-list-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.merit-list-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.merit-list-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.merit-list-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.merit-list-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.merit-list-head p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.merit-list-wrapper {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= FEATURE ================= */

.merit-list-feature {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.merit-list-feature::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.merit-list-feature::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.merit-list-feature > * {
  position: relative;
  z-index: 2;
}

.merit-feature-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.merit-feature-icon i {
  font-size: 31px;
}

.merit-list-feature > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.merit-list-feature h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.merit-list-feature p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.merit-feature-points {
  display: grid;
  gap: 10px;
  margin-bottom: 26px;
}

.merit-feature-points div {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 13px;
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 800;
}

.merit-feature-points i {
  color: var(--accent);
  font-size: 16px;
}

.merit-main-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.merit-main-btn i {
  transition: transform 0.3s ease;
}

.merit-main-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.merit-main-btn:hover i {
  transform: translateX(5px);
}

/* ================= MERIT GRID ================= */

.merit-list-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.merit-list-card {
  position: relative;
  min-height: 246px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.merit-list-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.merit-list-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.merit-list-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.merit-card-icon,
.merit-card-content {
  position: relative;
  z-index: 2;
}

.merit-card-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.merit-list-card.active .merit-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.merit-card-icon i {
  font-size: 26px;
}

.merit-card-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 10px;
}

.merit-tag {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.merit-tag.first {
  color: var(--primary);
  background: var(--soft-blue);
}

.merit-tag.second {
  color: #8f1520;
  background: rgba(181, 31, 42, 0.10);
}

.merit-tag.pg {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.merit-tag.document {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

.merit-card-top small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 850;
}

.merit-card-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.merit-card-content p {
  margin: 0 0 17px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.merit-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.merit-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 850;
}

.merit-card-meta i {
  color: var(--secondary);
  font-size: 13px;
}

/* ================= PROCESS ================= */

.merit-process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.merit-process-card {
  position: relative;
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
}

.merit-process-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
}

.merit-process-card span {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 950;
}

.merit-process-card h4 {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

.merit-process-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

/* ================= NOTE ================= */

.merit-list-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.merit-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.merit-note-icon i {
  font-size: 26px;
}

.merit-list-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.merit-list-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.merit-list-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.merit-list-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.merit-list-card:hover::after {
  transform: scaleX(1);
}

.merit-list-card:hover .merit-card-content h3 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .merit-list-wrapper {
    grid-template-columns: 1fr;
  }

  .merit-list-head h2 {
    font-size: 38px;
  }

  .merit-list-feature {
    min-height: auto;
  }

  .merit-process-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .merit-list-section {
    padding: 64px 0;
  }

  .merit-list-head {
    margin-bottom: 36px;
  }

  .merit-list-head h2 {
    font-size: 34px;
  }

  .merit-list-feature h3 {
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  .merit-list-grid {
    grid-template-columns: 1fr;
  }

  .merit-list-card {
    grid-template-columns: 58px 1fr;
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .merit-list-section {
    padding: 52px 0;
  }

  .merit-list-badge {
    font-size: 11.5px;
  }

  .merit-list-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .merit-list-head p {
    font-size: 14px;
  }

  .merit-list-feature {
    padding: 24px;
    border-radius: 24px;
  }

  .merit-list-feature h3 {
    font-size: 23px;
  }

  .merit-list-feature p {
    font-size: 14px;
  }

  .merit-list-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .merit-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .merit-card-content h3 {
    font-size: 19px;
  }

  .merit-card-content p {
    font-size: 13.5px;
  }

  .merit-process-row {
    grid-template-columns: 1fr;
  }

  .merit-list-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .merit-list-head h2 {
    font-size: 25px;
  }

  .merit-feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .merit-main-btn {
    width: 100%;
  }

  .merit-card-meta {
    gap: 7px;
  }
}

/* ================= MERIT LIST SECTION CSS END ================= */




/* ================= FEE STRUCTURE SECTION CSS START ================= */

.fee-structure-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.fee-structure-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.fee-structure-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.fee-structure-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.fee-structure-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.fee-structure-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.fee-structure-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.fee-structure-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.fee-structure-head p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.fee-structure-wrapper {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= FEATURE ================= */

.fee-structure-feature {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.fee-structure-feature::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.fee-structure-feature::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.fee-structure-feature > * {
  position: relative;
  z-index: 2;
}

.fee-feature-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.fee-feature-icon i {
  font-size: 31px;
}

.fee-structure-feature > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.fee-structure-feature h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.fee-structure-feature p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.fee-feature-points {
  display: grid;
  gap: 10px;
  margin-bottom: 26px;
}

.fee-feature-points div {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 13px;
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 800;
}

.fee-feature-points i {
  color: var(--accent);
  font-size: 16px;
}

.fee-main-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.fee-main-btn i {
  transition: transform 0.3s ease;
}

.fee-main-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.fee-main-btn:hover i {
  transform: translateX(5px);
}

/* ================= TABLE CARD ================= */

.fee-structure-table-card {
  position: relative;
  padding: 24px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
  overflow: hidden;
}

.fee-structure-table-card::before {
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
}

.fee-table-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.fee-table-head h3 {
  margin: 0 0 5px;
  color: var(--primary-dark);
  font-size: 25px;
  line-height: 1.2;
  font-weight: 950;
}

.fee-table-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.fee-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 11px 16px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 12px 26px rgba(181, 31, 42, 0.22);
  transition: all 0.3s ease;
}

.fee-download-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.fee-table-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  overflow-x: auto;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: #ffffff;
}

.fee-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.fee-table thead {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.fee-table th {
  padding: 16px 18px;
  color: #ffffff;
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  text-align: left;
  white-space: nowrap;
}

.fee-table td {
  padding: 17px 18px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 650;
  vertical-align: middle;
}

.fee-table tbody tr:last-child td {
  border-bottom: 0;
}

.fee-table tbody tr {
  transition: all 0.3s ease;
}

.fee-table tbody tr:hover {
  background: var(--light-bg);
}

.fee-table td strong {
  display: block;
  color: var(--primary-dark);
  font-size: 15px;
  font-weight: 950;
}

.fee-table td span {
  display: inline-flex;
  margin-top: 5px;
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 900;
}

.fee-table td b {
  color: var(--secondary);
  font-weight: 950;
}

/* ================= INFO CARDS ================= */

.fee-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.fee-info-card {
  position: relative;
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.fee-info-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.fee-info-icon {
  position: relative;
  z-index: 2;
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  border-radius: 18px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.20);
}

.fee-info-icon i {
  font-size: 24px;
}

.fee-info-card h4 {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

.fee-info-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

.fee-info-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.fee-info-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

/* ================= NOTE ================= */

.fee-structure-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.fee-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.fee-note-icon i {
  font-size: 26px;
}

.fee-structure-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.fee-structure-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .fee-structure-wrapper {
    grid-template-columns: 1fr;
  }

  .fee-structure-head h2 {
    font-size: 38px;
  }

  .fee-structure-feature {
    min-height: auto;
  }

  .fee-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .fee-structure-section {
    padding: 64px 0;
  }

  .fee-structure-head {
    margin-bottom: 36px;
  }

  .fee-structure-head h2 {
    font-size: 34px;
  }

  .fee-structure-feature h3 {
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  .fee-table-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .fee-download-btn {
    width: 100%;
    justify-content: center;
  }

  .fee-structure-table-card {
    padding: 18px;
    border-radius: 26px;
  }
}

@media (max-width: 575px) {
  .fee-structure-section {
    padding: 52px 0;
  }

  .fee-structure-badge {
    font-size: 11.5px;
  }

  .fee-structure-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .fee-structure-head p {
    font-size: 14px;
  }

  .fee-structure-feature {
    padding: 24px;
    border-radius: 24px;
  }

  .fee-structure-feature h3 {
    font-size: 23px;
  }

  .fee-structure-feature p {
    font-size: 14px;
  }

  .fee-cards-grid {
    grid-template-columns: 1fr;
  }

  .fee-table-head h3 {
    font-size: 22px;
  }

  .fee-structure-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .fee-structure-head h2 {
    font-size: 25px;
  }

  .fee-feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .fee-main-btn {
    width: 100%;
  }
}

/* ================= FEE STRUCTURE SECTION CSS END ================= */




/* ================= PROSPECTUS / DOWNLOADS SECTION CSS START ================= */

.prospectus-downloads-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.prospectus-downloads-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.prospectus-downloads-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.prospectus-downloads-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.prospectus-downloads-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.prospectus-downloads-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.prospectus-downloads-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.prospectus-downloads-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.prospectus-downloads-head p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.prospectus-downloads-wrapper {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= FEATURE ================= */

.prospectus-feature-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.prospectus-feature-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.prospectus-feature-card::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.prospectus-feature-card > * {
  position: relative;
  z-index: 2;
}

.prospectus-feature-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.prospectus-feature-icon i {
  font-size: 31px;
}

.prospectus-feature-card > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.prospectus-feature-card h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.prospectus-feature-card p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.prospectus-feature-points {
  display: grid;
  gap: 10px;
  margin-bottom: 26px;
}

.prospectus-feature-points div {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 13px;
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 800;
}

.prospectus-feature-points i {
  color: var(--accent);
  font-size: 16px;
}

.prospectus-main-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.prospectus-main-btn i {
  transition: transform 0.3s ease;
}

.prospectus-main-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.prospectus-main-btn:hover i {
  transform: translateY(2px);
}

/* ================= DOWNLOAD GRID ================= */

.downloads-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.download-card {
  position: relative;
  min-height: 230px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.download-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.download-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.download-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.download-icon,
.download-content {
  position: relative;
  z-index: 2;
}

.download-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.download-card.active .download-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.download-icon i {
  font-size: 26px;
}

.download-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 10px;
}

.download-tag {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.download-tag.prospectus {
  color: var(--primary);
  background: var(--soft-blue);
}

.download-tag.admission {
  color: #8f1520;
  background: rgba(181, 31, 42, 0.10);
}

.download-tag.document {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.download-tag.fee {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

.download-tag.academic {
  color: #3d3d8f;
  background: rgba(23, 63, 115, 0.10);
}

.download-tag.syllabus {
  color: #6f3d8f;
  background: rgba(111, 61, 143, 0.10);
}

.download-top small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 850;
}

.download-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.download-content p {
  margin: 0 0 17px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.download-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.download-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 850;
}

.download-meta i {
  color: var(--secondary);
  font-size: 13px;
}

/* ================= QUICK ROW ================= */

.prospectus-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.prospectus-quick-card {
  position: relative;
  min-height: 92px;
  padding: 20px;
  border-radius: 24px;
  color: var(--primary-dark);
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  display: flex;
  align-items: center;
  gap: 14px;
  overflow: hidden;
  transition: all 0.35s ease;
}

.prospectus-quick-card::before {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 105px;
  height: 105px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.prospectus-quick-card i,
.prospectus-quick-card span {
  position: relative;
  z-index: 2;
}

.prospectus-quick-card i {
  width: 50px;
  height: 50px;
  min-width: 50px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  box-shadow: 0 12px 26px rgba(13, 45, 85, 0.18);
}

.prospectus-quick-card span {
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
}

.prospectus-quick-card:hover {
  transform: translateY(-6px);
  color: var(--secondary);
  box-shadow: var(--shadow-lg);
}

.prospectus-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

/* ================= NOTE ================= */

.prospectus-downloads-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.prospectus-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.prospectus-note-icon i {
  font-size: 26px;
}

.prospectus-downloads-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.prospectus-downloads-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.download-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.download-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.download-card:hover::after {
  transform: scaleX(1);
}

.download-card:hover .download-content h3 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .prospectus-downloads-wrapper {
    grid-template-columns: 1fr;
  }

  .prospectus-downloads-head h2 {
    font-size: 38px;
  }

  .prospectus-feature-card {
    min-height: auto;
  }

  .prospectus-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .prospectus-downloads-section {
    padding: 64px 0;
  }

  .prospectus-downloads-head {
    margin-bottom: 36px;
  }

  .prospectus-downloads-head h2 {
    font-size: 34px;
  }

  .prospectus-feature-card h3 {
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  .downloads-grid {
    grid-template-columns: 1fr;
  }

  .download-card {
    grid-template-columns: 58px 1fr;
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .prospectus-downloads-section {
    padding: 52px 0;
  }

  .prospectus-downloads-badge {
    font-size: 11.5px;
  }

  .prospectus-downloads-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .prospectus-downloads-head p {
    font-size: 14px;
  }

  .prospectus-feature-card {
    padding: 24px;
    border-radius: 24px;
  }

  .prospectus-feature-card h3 {
    font-size: 23px;
  }

  .prospectus-feature-card p {
    font-size: 14px;
  }

  .download-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .download-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .download-content h3 {
    font-size: 19px;
  }

  .download-content p {
    font-size: 13.5px;
  }

  .prospectus-quick-row {
    grid-template-columns: 1fr;
  }

  .prospectus-downloads-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .prospectus-downloads-head h2 {
    font-size: 25px;
  }

  .prospectus-feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .prospectus-main-btn {
    width: 100%;
  }

  .download-meta {
    gap: 7px;
  }
}

/* ================= PROSPECTUS / DOWNLOADS SECTION CSS END ================= */




/* ================= HELPDESK SECTION CSS START ================= */

.helpdesk-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.helpdesk-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.helpdesk-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.helpdesk-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.helpdesk-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.helpdesk-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.helpdesk-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.helpdesk-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.helpdesk-head p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.helpdesk-wrapper {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= FEATURE ================= */

.helpdesk-feature-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.helpdesk-feature-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.helpdesk-feature-card::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.helpdesk-feature-card > * {
  position: relative;
  z-index: 2;
}

.helpdesk-feature-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.helpdesk-feature-icon i {
  font-size: 31px;
}

.helpdesk-feature-card > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.helpdesk-feature-card h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.helpdesk-feature-card p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.helpdesk-feature-points {
  display: grid;
  gap: 10px;
  margin-bottom: 26px;
}

.helpdesk-feature-points div {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 13px;
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 800;
}

.helpdesk-feature-points i {
  color: var(--accent);
  font-size: 16px;
}

.helpdesk-main-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.helpdesk-main-btn i {
  transition: transform 0.3s ease;
}

.helpdesk-main-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.helpdesk-main-btn:hover i {
  transform: rotate(-12deg);
}

/* ================= HELPDESK GRID ================= */

.helpdesk-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.helpdesk-card {
  position: relative;
  min-height: 232px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.helpdesk-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.helpdesk-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.helpdesk-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.helpdesk-card-icon,
.helpdesk-card-content {
  position: relative;
  z-index: 2;
}

.helpdesk-card-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.helpdesk-card.active .helpdesk-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.helpdesk-card-icon i {
  font-size: 26px;
}

.helpdesk-tag {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.helpdesk-tag.phone {
  color: var(--primary);
  background: var(--soft-blue);
}

.helpdesk-tag.email {
  color: #8f1520;
  background: rgba(181, 31, 42, 0.10);
}

.helpdesk-tag.document {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.helpdesk-tag.fee {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

.helpdesk-card-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.helpdesk-card-content p {
  margin: 0 0 17px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.helpdesk-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.helpdesk-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 850;
}

.helpdesk-meta i {
  color: var(--secondary);
  font-size: 13px;
}

/* ================= INFO ROW ================= */

.helpdesk-info-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 24px;
}

.helpdesk-info-card {
  position: relative;
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.helpdesk-info-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.helpdesk-info-icon {
  position: relative;
  z-index: 2;
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  border-radius: 18px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.20);
}

.helpdesk-info-icon i {
  font-size: 24px;
}

.helpdesk-info-card h4 {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

.helpdesk-info-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

/* ================= NOTE ================= */

.helpdesk-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.helpdesk-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.helpdesk-note-icon i {
  font-size: 26px;
}

.helpdesk-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.helpdesk-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.helpdesk-card:hover,
.helpdesk-info-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.helpdesk-card:hover::before,
.helpdesk-info-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.helpdesk-card:hover::after {
  transform: scaleX(1);
}

.helpdesk-card:hover .helpdesk-card-content h3 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .helpdesk-wrapper {
    grid-template-columns: 1fr;
  }

  .helpdesk-head h2 {
    font-size: 38px;
  }

  .helpdesk-feature-card {
    min-height: auto;
  }
}

@media (max-width: 991px) {
  .helpdesk-section {
    padding: 64px 0;
  }

  .helpdesk-head {
    margin-bottom: 36px;
  }

  .helpdesk-head h2 {
    font-size: 34px;
  }

  .helpdesk-feature-card h3 {
    font-size: 28px;
  }

  .helpdesk-info-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .helpdesk-grid {
    grid-template-columns: 1fr;
  }

  .helpdesk-card {
    grid-template-columns: 58px 1fr;
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .helpdesk-section {
    padding: 52px 0;
  }

  .helpdesk-badge {
    font-size: 11.5px;
  }

  .helpdesk-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .helpdesk-head p {
    font-size: 14px;
  }

  .helpdesk-feature-card {
    padding: 24px;
    border-radius: 24px;
  }

  .helpdesk-feature-card h3 {
    font-size: 23px;
  }

  .helpdesk-feature-card p {
    font-size: 14px;
  }

  .helpdesk-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .helpdesk-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .helpdesk-card-content h3 {
    font-size: 19px;
  }

  .helpdesk-card-content p {
    font-size: 13.5px;
  }

  .helpdesk-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .helpdesk-head h2 {
    font-size: 25px;
  }

  .helpdesk-feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .helpdesk-main-btn {
    width: 100%;
  }

  .helpdesk-meta {
    gap: 7px;
  }
}

/* ================= HELPDESK SECTION CSS END ================= */



/* ================= SEARCHABLE NOTICE ARCHIVE CSS START ================= */

.notice-archive-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.notice-archive-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.notice-archive-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.notice-archive-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.notice-archive-head {
  max-width: 850px;
  margin: 0 auto 38px;
}

.notice-archive-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.notice-archive-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.notice-archive-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.notice-archive-head p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= SEARCH BOX ================= */

.notice-archive-search-box {
  display: grid;
  grid-template-columns: 1fr 210px 170px;
  gap: 14px;
  max-width: 1100px;
  margin: 0 auto 32px;
  padding: 14px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--border);
  box-shadow: 0 18px 45px rgba(13, 45, 85, 0.08);
  backdrop-filter: blur(14px);
}

.notice-search-field {
  position: relative;
}

.notice-search-field i {
  position: absolute;
  left: 17px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--secondary);
  font-size: 17px;
}

.notice-search-field input,
.notice-archive-search-box select {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #ffffff;
  color: var(--dark);
  font-size: 14px;
  font-weight: 700;
  outline: none;
  transition: all 0.3s ease;
}

.notice-search-field input {
  padding: 13px 16px 13px 46px;
}

.notice-archive-search-box select {
  padding: 13px 16px;
  cursor: pointer;
}

.notice-search-field input:focus,
.notice-archive-search-box select:focus {
  border-color: rgba(23, 63, 115, 0.35);
  box-shadow: 0 0 0 4px rgba(23, 63, 115, 0.08);
}

/* ================= WRAPPER ================= */

.notice-archive-wrapper {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= FEATURE ================= */

.notice-archive-feature {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.notice-archive-feature::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.notice-archive-feature::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.notice-archive-feature > * {
  position: relative;
  z-index: 2;
}

.notice-archive-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.notice-archive-icon i {
  font-size: 31px;
}

.notice-archive-feature > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.notice-archive-feature h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.notice-archive-feature p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.notice-archive-points {
  display: grid;
  gap: 10px;
}

.notice-archive-points div {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 13px;
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 800;
}

.notice-archive-points i {
  color: var(--accent);
  font-size: 16px;
}

/* ================= LIST ================= */

.notice-archive-list {
  display: grid;
  gap: 15px;
}

.archive-notice-item {
  position: relative;
  display: grid;
  grid-template-columns: 82px 1fr 44px;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border-radius: 26px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.archive-notice-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(23, 63, 115, 0.055), transparent 52%);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.archive-date,
.archive-content,
.archive-action {
  position: relative;
  z-index: 2;
}

.archive-date {
  width: 82px;
  min-height: 88px;
  border-radius: 22px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.archive-date strong {
  display: block;
  color: #ffffff;
  font-size: 26px;
  line-height: 1;
  font-weight: 950;
}

.archive-date span {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 12px;
  line-height: 1;
  font-weight: 850;
  text-transform: uppercase;
}

.archive-date small {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 800;
}

.archive-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 9px;
}

.archive-category {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.archive-category.admission {
  color: var(--primary);
  background: var(--soft-blue);
}

.archive-category.examination {
  color: #8f1520;
  background: rgba(181, 31, 42, 0.10);
}

.archive-category.academic {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.archive-category.student {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

.archive-category.tender {
  color: #6f3d8f;
  background: rgba(111, 61, 143, 0.10);
}

.archive-top small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 850;
}

.archive-content h3 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.35;
  font-weight: 950;
  transition: color 0.3s ease;
}

.archive-content p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.58;
  font-weight: 500;
}

.archive-action {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  color: var(--primary);
  background: var(--soft-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.archive-action i {
  transition: transform 0.3s ease;
}

/* ================= NO RESULT ================= */

.notice-no-result {
  display: none;
  margin-top: 24px;
  padding: 34px 24px;
  border-radius: 26px;
  text-align: center;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.notice-no-result i {
  width: 62px;
  height: 62px;
  margin: 0 auto 16px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}

.notice-no-result h4 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 22px;
  font-weight: 950;
}

.notice-no-result p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
}

/* ================= HOVER ================= */

.archive-notice-item:hover {
  transform: translateY(-5px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.archive-notice-item:hover::before {
  opacity: 1;
}

.archive-notice-item:hover .archive-content h3 {
  color: var(--secondary);
}

.archive-notice-item:hover .archive-action {
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.archive-notice-item:hover .archive-action i {
  transform: translateY(3px);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .notice-archive-wrapper {
    grid-template-columns: 1fr;
  }

  .notice-archive-head h2 {
    font-size: 38px;
  }

  .notice-archive-feature {
    min-height: auto;
  }
}

@media (max-width: 991px) {
  .notice-archive-section {
    padding: 64px 0;
  }

  .notice-archive-search-box {
    grid-template-columns: 1fr;
    border-radius: 22px;
  }

  .notice-archive-head h2 {
    font-size: 34px;
  }

  .notice-archive-feature h3 {
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  .archive-notice-item {
    grid-template-columns: 76px 1fr;
    gap: 14px;
  }

  .archive-action {
    grid-column: 2;
    justify-self: flex-start;
  }

  .archive-date {
    width: 76px;
    min-height: 82px;
    border-radius: 20px;
  }
}

@media (max-width: 575px) {
  .notice-archive-section {
    padding: 52px 0;
  }

  .notice-archive-badge {
    font-size: 11.5px;
  }

  .notice-archive-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .notice-archive-head p {
    font-size: 14px;
  }

  .notice-archive-feature {
    padding: 24px;
    border-radius: 24px;
  }

  .notice-archive-feature h3 {
    font-size: 23px;
  }

  .notice-archive-feature p {
    font-size: 14px;
  }

  .archive-notice-item {
    grid-template-columns: 1fr;
    padding: 18px;
    border-radius: 22px;
  }

  .archive-date {
    width: 76px;
    min-height: 82px;
  }

  .archive-action {
    grid-column: auto;
    justify-self: flex-start;
  }

  .archive-content h3 {
    font-size: 16.5px;
  }

  .archive-content p {
    font-size: 13.5px;
  }
}

@media (max-width: 420px) {
  .notice-archive-head h2 {
    font-size: 25px;
  }

  .notice-archive-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }
}

/* ================= SEARCHABLE NOTICE ARCHIVE CSS END ================= */




/* ================= NOTICE CATEGORIES SECTION CSS START ================= */

.notice-categories-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.notice-categories-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.notice-categories-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.notice-categories-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.notice-categories-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.notice-categories-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.notice-categories-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.notice-categories-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.notice-categories-head p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.notice-categories-wrapper {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= FEATURE ================= */

.notice-categories-feature {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.notice-categories-feature::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.notice-categories-feature::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.notice-categories-feature > * {
  position: relative;
  z-index: 2;
}

.notice-category-feature-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.notice-category-feature-icon i {
  font-size: 31px;
}

.notice-categories-feature > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.notice-categories-feature h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.notice-categories-feature p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.notice-category-feature-points {
  display: grid;
  gap: 10px;
  margin-bottom: 26px;
}

.notice-category-feature-points div {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 13px;
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 800;
}

.notice-category-feature-points i {
  color: var(--accent);
  font-size: 16px;
}

.notice-category-main-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.notice-category-main-btn i {
  transition: transform 0.3s ease;
}

.notice-category-main-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.notice-category-main-btn:hover i {
  transform: translateX(5px);
}

/* ================= CATEGORY GRID ================= */

.notice-categories-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.notice-category-card {
  position: relative;
  min-height: 205px;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.notice-category-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.notice-category-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.notice-category-icon,
.notice-category-content {
  position: relative;
  z-index: 2;
}

.notice-category-icon {
  width: 64px;
  height: 64px;
  border-radius: 21px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.notice-category-icon i {
  font-size: 27px;
}

.notice-category-icon.admission {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.notice-category-icon.examination {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.notice-category-icon.scholarship {
  background: linear-gradient(135deg, #138a4b, #0c6b38);
}

.notice-category-icon.tender {
  background: linear-gradient(135deg, #8a6200, #b78300);
}

.notice-category-icon.recruitment {
  background: linear-gradient(135deg, #6f3d8f, #4f2870);
}

.notice-category-icon.holiday {
  background: linear-gradient(135deg, #0b7a75, #075a56);
}

.notice-category-icon.government {
  background: linear-gradient(135deg, #1d4f91, #123a70);
}

.notice-category-icon.circular {
  background: linear-gradient(135deg, #c45a12, #9d4209);
}

.notice-category-content span {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  border: 1px solid rgba(23, 63, 115, 0.12);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.notice-category-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.notice-category-content p {
  margin: 0 0 15px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
}

.notice-category-content strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--secondary);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
}

.notice-category-content strong i {
  transition: transform 0.3s ease;
}

/* ================= HOVER ================= */

.notice-category-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.notice-category-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.notice-category-card:hover::after {
  transform: scaleX(1);
}

.notice-category-card:hover .notice-category-content h3 {
  color: var(--secondary);
}

.notice-category-card:hover .notice-category-content strong i {
  transform: translateX(5px);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .notice-categories-wrapper {
    grid-template-columns: 1fr;
  }

  .notice-categories-head h2 {
    font-size: 38px;
  }

  .notice-categories-feature {
    min-height: auto;
  }
}

@media (max-width: 991px) {
  .notice-categories-section {
    padding: 64px 0;
  }

  .notice-categories-head {
    margin-bottom: 36px;
  }

  .notice-categories-head h2 {
    font-size: 34px;
  }

  .notice-categories-feature h3 {
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  .notice-categories-grid {
    grid-template-columns: 1fr;
  }

  .notice-category-card {
    grid-template-columns: 58px 1fr;
    min-height: auto;
  }

  .notice-category-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }
}

@media (max-width: 575px) {
  .notice-categories-section {
    padding: 52px 0;
  }

  .notice-categories-badge {
    font-size: 11.5px;
  }

  .notice-categories-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .notice-categories-head p {
    font-size: 14px;
  }

  .notice-categories-feature {
    padding: 24px;
    border-radius: 24px;
  }

  .notice-categories-feature h3 {
    font-size: 23px;
  }

  .notice-categories-feature p {
    font-size: 14px;
  }

  .notice-category-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .notice-category-content h3 {
    font-size: 19px;
  }

  .notice-category-content p {
    font-size: 13.5px;
  }
}

@media (max-width: 420px) {
  .notice-categories-head h2 {
    font-size: 25px;
  }

  .notice-category-feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .notice-category-main-btn {
    width: 100%;
  }
}

/* ================= NOTICE CATEGORIES SECTION CSS END ================= */



/* ================= PDF UPLOAD SECTION CSS START ================= */

.pdf-upload-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.pdf-upload-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.pdf-upload-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.pdf-upload-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.pdf-upload-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.pdf-upload-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.pdf-upload-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.pdf-upload-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.pdf-upload-head p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.pdf-upload-wrapper {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= FEATURE ================= */

.pdf-upload-feature {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.pdf-upload-feature::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.pdf-upload-feature::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.pdf-upload-feature > * {
  position: relative;
  z-index: 2;
}

.pdf-feature-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.pdf-feature-icon i {
  font-size: 31px;
}

.pdf-upload-feature > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.pdf-upload-feature h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.pdf-upload-feature p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.pdf-feature-points {
  display: grid;
  gap: 10px;
  margin-bottom: 26px;
}

.pdf-feature-points div {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 13px;
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 800;
}

.pdf-feature-points i {
  color: var(--accent);
  font-size: 16px;
}

.pdf-feature-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.pdf-feature-btn i {
  transition: transform 0.3s ease;
}

.pdf-feature-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.pdf-feature-btn:hover i {
  transform: translateX(5px);
}

/* ================= UPLOAD CARD ================= */

.pdf-upload-card {
  position: relative;
  padding: 28px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
  overflow: hidden;
}

.pdf-upload-card::before {
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
}

.pdf-upload-card form {
  position: relative;
  z-index: 2;
}

.pdf-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-bottom: 18px;
}

.pdf-field {
  display: grid;
  gap: 8px;
}

.pdf-field label {
  color: var(--primary-dark);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
}

.pdf-field input,
.pdf-field select,
.pdf-field textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #ffffff;
  color: var(--dark);
  font-size: 14px;
  font-weight: 650;
  outline: none;
  transition: all 0.3s ease;
}

.pdf-field input,
.pdf-field select {
  min-height: 52px;
  padding: 13px 16px;
}

.pdf-field textarea {
  resize: none;
  padding: 15px 16px;
  line-height: 1.6;
}

.pdf-field input:focus,
.pdf-field select:focus,
.pdf-field textarea:focus {
  border-color: rgba(23, 63, 115, 0.35);
  box-shadow: 0 0 0 4px rgba(23, 63, 115, 0.08);
}

.pdf-full-field {
  margin-top: 18px;
}

/* ================= DROP BOX ================= */

.pdf-upload-area input {
  display: none;
}

.pdf-drop-box {
  position: relative;
  min-height: 220px;
  padding: 30px 24px;
  border-radius: 28px;
  border: 2px dashed rgba(23, 63, 115, 0.22);
  background:
    radial-gradient(circle at 20% 18%, rgba(23, 63, 115, 0.055), transparent 30%),
    #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  cursor: pointer;
  transition: all 0.35s ease;
}

.pdf-drop-icon {
  width: 76px;
  height: 76px;
  margin-bottom: 18px;
  border-radius: 24px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 16px 32px rgba(181, 31, 42, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdf-drop-icon i {
  font-size: 34px;
}

.pdf-drop-box strong {
  margin-bottom: 8px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
}

.pdf-drop-box small {
  max-width: 460px;
  margin-bottom: 12px;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.6;
  font-weight: 500;
}

.pdf-drop-box em {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  border: 1px solid rgba(23, 63, 115, 0.12);
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  font-style: normal;
}

.pdf-drop-box:hover {
  border-color: rgba(181, 31, 42, 0.35);
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(13, 45, 85, 0.10);
}

/* ================= ACTIONS ================= */

.pdf-upload-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 22px;
}

.pdf-reset-btn,
.pdf-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  border: 0;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  cursor: pointer;
  transition: all 0.3s ease;
}

.pdf-reset-btn {
  color: var(--primary);
  background: var(--soft-blue);
}

.pdf-submit-btn {
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 30px rgba(13, 45, 85, 0.22);
}

.pdf-reset-btn:hover,
.pdf-submit-btn:hover {
  transform: translateY(-3px);
}

/* ================= INFO ROW ================= */

.pdf-upload-info-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 24px;
}

.pdf-info-card {
  position: relative;
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.pdf-info-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.pdf-info-icon {
  position: relative;
  z-index: 2;
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  border-radius: 18px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.20);
}

.pdf-info-icon i {
  font-size: 24px;
}

.pdf-info-card h4 {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

.pdf-info-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

.pdf-info-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-lg);
}

.pdf-info-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .pdf-upload-wrapper {
    grid-template-columns: 1fr;
  }

  .pdf-upload-head h2 {
    font-size: 38px;
  }

  .pdf-upload-feature {
    min-height: auto;
  }
}

@media (max-width: 991px) {
  .pdf-upload-section {
    padding: 64px 0;
  }

  .pdf-upload-head {
    margin-bottom: 36px;
  }

  .pdf-upload-head h2 {
    font-size: 34px;
  }

  .pdf-upload-feature h3 {
    font-size: 28px;
  }

  .pdf-upload-info-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .pdf-form-grid {
    grid-template-columns: 1fr;
  }

  .pdf-upload-card {
    padding: 22px;
    border-radius: 26px;
  }

  .pdf-upload-actions {
    flex-direction: column;
  }

  .pdf-reset-btn,
  .pdf-submit-btn {
    width: 100%;
  }
}

@media (max-width: 575px) {
  .pdf-upload-section {
    padding: 52px 0;
  }

  .pdf-upload-badge {
    font-size: 11.5px;
  }

  .pdf-upload-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .pdf-upload-head p {
    font-size: 14px;
  }

  .pdf-upload-feature {
    padding: 24px;
    border-radius: 24px;
  }

  .pdf-upload-feature h3 {
    font-size: 23px;
  }

  .pdf-upload-feature p {
    font-size: 14px;
  }

  .pdf-drop-box {
    min-height: 200px;
    padding: 24px 18px;
    border-radius: 24px;
  }

  .pdf-drop-icon {
    width: 66px;
    height: 66px;
    border-radius: 22px;
  }

  .pdf-drop-icon i {
    font-size: 30px;
  }

  .pdf-drop-box strong {
    font-size: 18px;
  }
}

@media (max-width: 420px) {
  .pdf-upload-head h2 {
    font-size: 25px;
  }

  .pdf-feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .pdf-feature-btn {
    width: 100%;
  }
}

/* ================= PDF UPLOAD SECTION CSS END ================= */




/* ================= NOTICE OPTIONS SECTION CSS START ================= */

.notice-options-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.notice-options-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.notice-options-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.notice-options-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.notice-options-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.notice-options-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.notice-options-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.notice-options-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.notice-options-head p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.notice-options-wrapper {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= FEATURE ================= */

.notice-options-feature {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.notice-options-feature::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.notice-options-feature::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.notice-options-feature > * {
  position: relative;
  z-index: 2;
}

.notice-options-feature-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.notice-options-feature-icon i {
  font-size: 31px;
}

.notice-options-feature > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.notice-options-feature h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.notice-options-feature p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.notice-options-points {
  display: grid;
  gap: 10px;
  margin-bottom: 26px;
}

.notice-options-points div {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 13px;
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 800;
}

.notice-options-points i {
  color: var(--accent);
  font-size: 16px;
}

.notice-options-main-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.notice-options-main-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.notice-options-main-btn i {
  transition: transform 0.3s ease;
}

.notice-options-main-btn:hover i {
  transform: translateX(5px);
}

/* ================= FORM CARD ================= */

.notice-options-card {
  position: relative;
  padding: 28px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
  overflow: hidden;
}

.notice-options-card::before {
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
}

.notice-options-card form {
  position: relative;
  z-index: 2;
}

.notice-options-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.notice-option-field {
  display: grid;
  gap: 8px;
}

.notice-option-field label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--primary-dark);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
}

.notice-option-field label i {
  color: var(--secondary);
}

.notice-option-field input,
.notice-option-field select {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #ffffff;
  color: var(--dark);
  font-size: 14px;
  font-weight: 650;
  outline: none;
  transition: all 0.3s ease;
}

.notice-option-field input:focus,
.notice-option-field select:focus {
  border-color: rgba(23, 63, 115, 0.35);
  box-shadow: 0 0 0 4px rgba(23, 63, 115, 0.08);
}

/* ================= PINNED BOX ================= */

.notice-pinned-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 22px;
  padding: 22px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 10% 20%, rgba(181, 31, 42, 0.08), transparent 30%),
    #ffffff;
  border: 1px solid rgba(181, 31, 42, 0.16);
  box-shadow: 0 14px 36px rgba(181, 31, 42, 0.08);
}

.notice-pinned-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.notice-pinned-icon {
  width: 62px;
  height: 62px;
  min-width: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.notice-pinned-icon i {
  font-size: 26px;
}

.notice-pinned-content h3 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.notice-pinned-content p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.6;
  font-weight: 500;
}

/* ================= SWITCH ================= */

.notice-switch {
  position: relative;
  width: 64px;
  height: 36px;
  min-width: 64px;
  cursor: pointer;
}

.notice-switch input {
  display: none;
}

.notice-switch span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #d7e0ea;
  transition: all 0.3s ease;
}

.notice-switch span::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 6px 14px rgba(13, 45, 85, 0.18);
  transition: all 0.3s ease;
}

.notice-switch input:checked + span {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.notice-switch input:checked + span::before {
  transform: translateX(28px);
}

/* ================= CHECK OPTIONS ================= */

.notice-highlight-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.notice-check-card {
  cursor: pointer;
}

.notice-check-card input {
  display: none;
}

.notice-check-card span {
  min-height: 150px;
  padding: 20px;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 12px 30px rgba(13, 45, 85, 0.06);
  display: block;
  transition: all 0.35s ease;
}

.notice-check-card span i {
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 12px 25px rgba(13, 45, 85, 0.18);
}

.notice-check-card span strong {
  display: block;
  margin-bottom: 7px;
  color: var(--primary-dark);
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
}

.notice-check-card span small {
  display: block;
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.55;
  font-weight: 500;
}

.notice-check-card input:checked + span {
  border-color: rgba(181, 31, 42, 0.28);
  box-shadow: 0 18px 42px rgba(181, 31, 42, 0.12);
  transform: translateY(-4px);
}

.notice-check-card input:checked + span i {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

/* ================= ACTIONS ================= */

.notice-options-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 22px;
}

.notice-options-reset-btn,
.notice-options-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  border: 0;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  cursor: pointer;
  transition: all 0.3s ease;
}

.notice-options-reset-btn {
  color: var(--primary);
  background: var(--soft-blue);
}

.notice-options-submit-btn {
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 30px rgba(13, 45, 85, 0.22);
}

.notice-options-reset-btn:hover,
.notice-options-submit-btn:hover {
  transform: translateY(-3px);
}

/* ================= PREVIEW ROW ================= */

.notice-options-preview-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 24px;
}

.notice-preview-card {
  position: relative;
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border-radius: 26px;
  color: var(--dark);
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
}

.notice-preview-card.pinned {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.notice-preview-card.pinned::before {
  content: "Pinned";
  position: absolute;
  right: -32px;
  top: 18px;
  width: 118px;
  padding: 6px 0;
  transform: rotate(38deg);
  color: #ffffff;
  background: var(--secondary);
  text-align: center;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.notice-preview-date {
  width: 78px;
  min-height: 78px;
  border-radius: 22px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.notice-preview-card.pinned .notice-preview-date {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.notice-preview-date strong {
  color: #ffffff;
  font-size: 26px;
  line-height: 1;
  font-weight: 950;
}

.notice-preview-date span {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  line-height: 1;
  font-weight: 850;
  text-transform: uppercase;
}

.notice-preview-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 9px;
}

.notice-preview-category {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.notice-preview-category.admission {
  color: var(--primary);
  background: var(--soft-blue);
}

.notice-preview-category.examination {
  color: #8f1520;
  background: rgba(181, 31, 42, 0.10);
}

.notice-preview-top small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 850;
}

.notice-preview-content h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.35;
  font-weight: 950;
}

.notice-preview-content p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.58;
  font-weight: 500;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .notice-options-wrapper {
    grid-template-columns: 1fr;
  }

  .notice-options-head h2 {
    font-size: 38px;
  }

  .notice-options-feature {
    min-height: auto;
  }
}

@media (max-width: 991px) {
  .notice-options-section {
    padding: 64px 0;
  }

  .notice-options-head {
    margin-bottom: 36px;
  }

  .notice-options-head h2 {
    font-size: 34px;
  }

  .notice-options-feature h3 {
    font-size: 28px;
  }

  .notice-highlight-options {
    grid-template-columns: 1fr;
  }

  .notice-options-preview-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .notice-options-form-grid {
    grid-template-columns: 1fr;
  }

  .notice-options-card {
    padding: 22px;
    border-radius: 26px;
  }

  .notice-pinned-box {
    align-items: flex-start;
    flex-direction: column;
  }

  .notice-options-actions {
    flex-direction: column;
  }

  .notice-options-reset-btn,
  .notice-options-submit-btn {
    width: 100%;
  }
}

@media (max-width: 575px) {
  .notice-options-section {
    padding: 52px 0;
  }

  .notice-options-badge {
    font-size: 11.5px;
  }

  .notice-options-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .notice-options-head p {
    font-size: 14px;
  }

  .notice-options-feature {
    padding: 24px;
    border-radius: 24px;
  }

  .notice-options-feature h3 {
    font-size: 23px;
  }

  .notice-options-feature p {
    font-size: 14px;
  }

  .notice-pinned-content {
    align-items: flex-start;
    flex-direction: column;
  }

  .notice-preview-card {
    grid-template-columns: 1fr;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .notice-options-head h2 {
    font-size: 25px;
  }

  .notice-options-feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .notice-options-main-btn {
    width: 100%;
  }
}

/* ================= NOTICE OPTIONS SECTION CSS END ================= */




/* ================= ADMISSION UPDATES SECTION CSS START ================= */

.admission-updates-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.admission-updates-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.admission-updates-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.admission-updates-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.admission-updates-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.admission-updates-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.admission-updates-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.admission-updates-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.admission-updates-head p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.admission-updates-wrapper {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= FEATURE ================= */

.admission-updates-feature {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.admission-updates-feature::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.admission-updates-feature::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.admission-updates-feature > * {
  position: relative;
  z-index: 2;
}

.admission-updates-feature-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.admission-updates-feature-icon i {
  font-size: 31px;
}

.admission-updates-feature > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.admission-updates-feature h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.admission-updates-feature p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.admission-updates-points {
  display: grid;
  gap: 10px;
  margin-bottom: 26px;
}

.admission-updates-points div {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 13px;
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 800;
}

.admission-updates-points i {
  color: var(--accent);
  font-size: 16px;
}

.admission-updates-main-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.admission-updates-main-btn i {
  transition: transform 0.3s ease;
}

.admission-updates-main-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.admission-updates-main-btn:hover i {
  transform: translateX(5px);
}

/* ================= UPDATE LIST ================= */

.admission-updates-list {
  display: grid;
  gap: 15px;
}

.admission-update-item {
  position: relative;
  display: grid;
  grid-template-columns: 78px 1fr 44px;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border-radius: 26px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.admission-update-item.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.admission-update-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(23, 63, 115, 0.055), transparent 52%);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.admission-update-date,
.admission-update-content,
.admission-update-action {
  position: relative;
  z-index: 2;
}

.admission-update-date {
  width: 78px;
  min-height: 78px;
  border-radius: 22px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.admission-update-item.active .admission-update-date {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.admission-update-date strong {
  display: block;
  color: #ffffff;
  font-size: 26px;
  line-height: 1;
  font-weight: 950;
}

.admission-update-date span {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  line-height: 1;
  font-weight: 850;
  text-transform: uppercase;
}

.admission-update-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 9px;
}

.admission-update-category {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.admission-update-category.new {
  color: var(--primary);
  background: var(--soft-blue);
}

.admission-update-category.merit {
  color: #8f1520;
  background: rgba(181, 31, 42, 0.10);
}

.admission-update-category.verification {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.admission-update-category.fee {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

.admission-update-top small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 850;
}

.admission-update-content h3 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.35;
  font-weight: 950;
  transition: color 0.3s ease;
}

.admission-update-content p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.58;
  font-weight: 500;
}

.admission-update-action {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  color: var(--primary);
  background: var(--soft-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.admission-update-action i {
  transition: transform 0.3s ease;
}

/* ================= QUICK GRID ================= */

.admission-updates-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.admission-quick-card {
  position: relative;
  min-height: 96px;
  padding: 20px;
  border-radius: 24px;
  color: var(--dark);
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  display: flex;
  align-items: center;
  gap: 14px;
  overflow: hidden;
  transition: all 0.35s ease;
}

.admission-quick-card::before {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 105px;
  height: 105px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.admission-quick-card > i,
.admission-quick-card div {
  position: relative;
  z-index: 2;
}

.admission-quick-card > i {
  width: 54px;
  height: 54px;
  min-width: 54px;
  border-radius: 18px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 12px 26px rgba(13, 45, 85, 0.18);
}

.admission-quick-card h4 {
  margin: 0 0 5px;
  color: var(--primary-dark);
  font-size: 16px;
  line-height: 1.2;
  font-weight: 950;
}

.admission-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 600;
}

/* ================= NOTE ================= */

.admission-updates-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.admission-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.admission-note-icon i {
  font-size: 26px;
}

.admission-updates-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.admission-updates-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.admission-update-item:hover,
.admission-quick-card:hover {
  transform: translateY(-6px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.admission-update-item:hover::before,
.admission-quick-card:hover::before {
  opacity: 1;
  transform: scale(1.18);
  background: rgba(181, 31, 42, 0.08);
}

.admission-update-item:hover .admission-update-content h3,
.admission-quick-card:hover h4 {
  color: var(--secondary);
}

.admission-update-item:hover .admission-update-action {
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.admission-update-item:hover .admission-update-action i {
  transform: translateX(4px);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .admission-updates-wrapper {
    grid-template-columns: 1fr;
  }

  .admission-updates-head h2 {
    font-size: 38px;
  }

  .admission-updates-feature {
    min-height: auto;
  }

  .admission-updates-quick-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .admission-updates-section {
    padding: 64px 0;
  }

  .admission-updates-head {
    margin-bottom: 36px;
  }

  .admission-updates-head h2 {
    font-size: 34px;
  }

  .admission-updates-feature h3 {
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  .admission-update-item {
    grid-template-columns: 76px 1fr;
    gap: 14px;
  }

  .admission-update-action {
    grid-column: 2;
    justify-self: flex-start;
  }

  .admission-update-date {
    width: 76px;
    min-height: 76px;
  }
}

@media (max-width: 575px) {
  .admission-updates-section {
    padding: 52px 0;
  }

  .admission-updates-badge {
    font-size: 11.5px;
  }

  .admission-updates-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .admission-updates-head p {
    font-size: 14px;
  }

  .admission-updates-feature {
    padding: 24px;
    border-radius: 24px;
  }

  .admission-updates-feature h3 {
    font-size: 23px;
  }

  .admission-updates-feature p {
    font-size: 14px;
  }

  .admission-update-item {
    grid-template-columns: 1fr;
    padding: 18px;
    border-radius: 22px;
  }

  .admission-update-action {
    grid-column: auto;
  }

  .admission-updates-quick-grid {
    grid-template-columns: 1fr;
  }

  .admission-updates-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .admission-updates-head h2 {
    font-size: 25px;
  }

  .admission-updates-feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .admission-updates-main-btn {
    width: 100%;
  }
}

/* ================= ADMISSION UPDATES SECTION CSS END ================= */




/* ================= EXAMINATION UPDATES SECTION CSS START ================= */

.examination-updates-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.examination-updates-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.examination-updates-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.examination-updates-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.examination-updates-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.examination-updates-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.examination-updates-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.examination-updates-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.examination-updates-head p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.examination-updates-wrapper {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= FEATURE ================= */

.examination-updates-feature {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.examination-updates-feature::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.examination-updates-feature::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.examination-updates-feature > * {
  position: relative;
  z-index: 2;
}

.examination-updates-feature-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.examination-updates-feature-icon i {
  font-size: 31px;
}

.examination-updates-feature > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.examination-updates-feature h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.examination-updates-feature p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.examination-updates-points {
  display: grid;
  gap: 10px;
  margin-bottom: 26px;
}

.examination-updates-points div {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 13px;
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 800;
}

.examination-updates-points i {
  color: var(--accent);
  font-size: 16px;
}

.examination-updates-main-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.examination-updates-main-btn i {
  transition: transform 0.3s ease;
}

.examination-updates-main-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.examination-updates-main-btn:hover i {
  transform: translateX(5px);
}

/* ================= UPDATE LIST ================= */

.examination-updates-list {
  display: grid;
  gap: 15px;
}

.examination-update-item {
  position: relative;
  display: grid;
  grid-template-columns: 78px 1fr 44px;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border-radius: 26px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.examination-update-item.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.examination-update-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(23, 63, 115, 0.055), transparent 52%);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.examination-update-date,
.examination-update-content,
.examination-update-action {
  position: relative;
  z-index: 2;
}

.examination-update-date {
  width: 78px;
  min-height: 78px;
  border-radius: 22px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.examination-update-item.active .examination-update-date {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.examination-update-date strong {
  display: block;
  color: #ffffff;
  font-size: 26px;
  line-height: 1;
  font-weight: 950;
}

.examination-update-date span {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  line-height: 1;
  font-weight: 850;
  text-transform: uppercase;
}

.examination-update-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 9px;
}

.examination-update-category {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.examination-update-category.form {
  color: var(--primary);
  background: var(--soft-blue);
}

.examination-update-category.timetable {
  color: #8f1520;
  background: rgba(181, 31, 42, 0.10);
}

.examination-update-category.admit {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.examination-update-category.practical {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

.examination-update-category.result {
  color: #6f3d8f;
  background: rgba(111, 61, 143, 0.10);
}

.examination-update-top small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 850;
}

.examination-update-content h3 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.35;
  font-weight: 950;
  transition: color 0.3s ease;
}

.examination-update-content p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.58;
  font-weight: 500;
}

.examination-update-action {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  color: var(--primary);
  background: var(--soft-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.examination-update-action i {
  transition: transform 0.3s ease;
}

/* ================= QUICK GRID ================= */

.examination-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.examination-quick-card {
  position: relative;
  min-height: 96px;
  padding: 20px;
  border-radius: 24px;
  color: var(--dark);
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  display: flex;
  align-items: center;
  gap: 14px;
  overflow: hidden;
  transition: all 0.35s ease;
}

.examination-quick-card::before {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 105px;
  height: 105px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.examination-quick-card > i,
.examination-quick-card div {
  position: relative;
  z-index: 2;
}

.examination-quick-card > i {
  width: 54px;
  height: 54px;
  min-width: 54px;
  border-radius: 18px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 12px 26px rgba(13, 45, 85, 0.18);
}

.examination-quick-card h4 {
  margin: 0 0 5px;
  color: var(--primary-dark);
  font-size: 16px;
  line-height: 1.2;
  font-weight: 950;
}

.examination-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 600;
}

/* ================= NOTE ================= */

.examination-updates-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.examination-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.examination-note-icon i {
  font-size: 26px;
}

.examination-updates-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.examination-updates-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.examination-update-item:hover,
.examination-quick-card:hover {
  transform: translateY(-6px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.examination-update-item:hover::before,
.examination-quick-card:hover::before {
  opacity: 1;
  transform: scale(1.18);
  background: rgba(181, 31, 42, 0.08);
}

.examination-update-item:hover .examination-update-content h3,
.examination-quick-card:hover h4 {
  color: var(--secondary);
}

.examination-update-item:hover .examination-update-action {
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.examination-update-item:hover .examination-update-action i {
  transform: translateX(4px);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .examination-updates-wrapper {
    grid-template-columns: 1fr;
  }

  .examination-updates-head h2 {
    font-size: 38px;
  }

  .examination-updates-feature {
    min-height: auto;
  }

  .examination-quick-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .examination-updates-section {
    padding: 64px 0;
  }

  .examination-updates-head {
    margin-bottom: 36px;
  }

  .examination-updates-head h2 {
    font-size: 34px;
  }

  .examination-updates-feature h3 {
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  .examination-update-item {
    grid-template-columns: 76px 1fr;
    gap: 14px;
  }

  .examination-update-action {
    grid-column: 2;
    justify-self: flex-start;
  }

  .examination-update-date {
    width: 76px;
    min-height: 76px;
  }
}

@media (max-width: 575px) {
  .examination-updates-section {
    padding: 52px 0;
  }

  .examination-updates-badge {
    font-size: 11.5px;
  }

  .examination-updates-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .examination-updates-head p {
    font-size: 14px;
  }

  .examination-updates-feature {
    padding: 24px;
    border-radius: 24px;
  }

  .examination-updates-feature h3 {
    font-size: 23px;
  }

  .examination-updates-feature p {
    font-size: 14px;
  }

  .examination-update-item {
    grid-template-columns: 1fr;
    padding: 18px;
    border-radius: 22px;
  }

  .examination-update-action {
    grid-column: auto;
  }

  .examination-quick-grid {
    grid-template-columns: 1fr;
  }

  .examination-updates-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .examination-updates-head h2 {
    font-size: 25px;
  }

  .examination-updates-feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .examination-updates-main-btn {
    width: 100%;
  }
}

/* ================= EXAMINATION UPDATES SECTION CSS END ================= */



/* ================= SCHOLARSHIP SECTION CSS START ================= */

.scholarship-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.scholarship-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.scholarship-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.scholarship-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.scholarship-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.scholarship-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.scholarship-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.scholarship-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.scholarship-head p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.scholarship-wrapper {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= FEATURE ================= */

.scholarship-feature {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.scholarship-feature::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.scholarship-feature::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.scholarship-feature > * {
  position: relative;
  z-index: 2;
}

.scholarship-feature-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.scholarship-feature-icon i {
  font-size: 31px;
}

.scholarship-feature > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.scholarship-feature h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.scholarship-feature p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.scholarship-points {
  display: grid;
  gap: 10px;
  margin-bottom: 26px;
}

.scholarship-points div {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 13px;
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 800;
}

.scholarship-points i {
  color: var(--accent);
  font-size: 16px;
}

.scholarship-main-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.scholarship-main-btn i {
  transition: transform 0.3s ease;
}

.scholarship-main-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.scholarship-main-btn:hover i {
  transform: translateX(5px);
}

/* ================= GRID ================= */

.scholarship-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.scholarship-card {
  position: relative;
  min-height: 232px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.scholarship-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.scholarship-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.scholarship-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.scholarship-card-icon,
.scholarship-card-content {
  position: relative;
  z-index: 2;
}

.scholarship-card-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.scholarship-card.active .scholarship-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.scholarship-card-icon i {
  font-size: 26px;
}

.scholarship-card-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 10px;
}

.scholarship-tag {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.scholarship-tag.application {
  color: var(--primary);
  background: var(--soft-blue);
}

.scholarship-tag.document {
  color: #8f1520;
  background: rgba(181, 31, 42, 0.10);
}

.scholarship-tag.eligibility {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.scholarship-tag.benefit {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

.scholarship-card-top small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 850;
}

.scholarship-card-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.scholarship-card-content p {
  margin: 0 0 17px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.scholarship-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.scholarship-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 850;
}

.scholarship-meta i {
  color: var(--secondary);
  font-size: 13px;
}

/* ================= PROCESS ROW ================= */

.scholarship-process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.scholarship-process-card {
  position: relative;
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
}

.scholarship-process-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
}

.scholarship-process-card span {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 950;
}

.scholarship-process-card h4 {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

.scholarship-process-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

/* ================= NOTE ================= */

.scholarship-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.scholarship-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.scholarship-note-icon i {
  font-size: 26px;
}

.scholarship-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.scholarship-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.scholarship-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.scholarship-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.scholarship-card:hover::after {
  transform: scaleX(1);
}

.scholarship-card:hover .scholarship-card-content h3 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .scholarship-wrapper {
    grid-template-columns: 1fr;
  }

  .scholarship-head h2 {
    font-size: 38px;
  }

  .scholarship-feature {
    min-height: auto;
  }

  .scholarship-process-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .scholarship-section {
    padding: 64px 0;
  }

  .scholarship-head {
    margin-bottom: 36px;
  }

  .scholarship-head h2 {
    font-size: 34px;
  }

  .scholarship-feature h3 {
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  .scholarship-grid {
    grid-template-columns: 1fr;
  }

  .scholarship-card {
    grid-template-columns: 58px 1fr;
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .scholarship-section {
    padding: 52px 0;
  }

  .scholarship-badge {
    font-size: 11.5px;
  }

  .scholarship-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .scholarship-head p {
    font-size: 14px;
  }

  .scholarship-feature {
    padding: 24px;
    border-radius: 24px;
  }

  .scholarship-feature h3 {
    font-size: 23px;
  }

  .scholarship-feature p {
    font-size: 14px;
  }

  .scholarship-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .scholarship-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .scholarship-card-content h3 {
    font-size: 19px;
  }

  .scholarship-card-content p {
    font-size: 13.5px;
  }

  .scholarship-process-row {
    grid-template-columns: 1fr;
  }

  .scholarship-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .scholarship-head h2 {
    font-size: 25px;
  }

  .scholarship-feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .scholarship-main-btn {
    width: 100%;
  }

  .scholarship-meta {
    gap: 7px;
  }
}

/* ================= SCHOLARSHIP SECTION CSS END ================= */



/* ================= ANTI RAGGING SECTION CSS START ================= */

.anti-ragging-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.anti-ragging-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.anti-ragging-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.anti-ragging-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.anti-ragging-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.anti-ragging-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.anti-ragging-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.anti-ragging-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.anti-ragging-head p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.anti-ragging-wrapper {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= FEATURE ================= */

.anti-ragging-feature {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.anti-ragging-feature::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.anti-ragging-feature::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.anti-ragging-feature > * {
  position: relative;
  z-index: 2;
}

.anti-ragging-feature-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.anti-ragging-feature-icon i {
  font-size: 31px;
}

.anti-ragging-feature > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.anti-ragging-feature h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.anti-ragging-feature p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.anti-ragging-points {
  display: grid;
  gap: 10px;
  margin-bottom: 26px;
}

.anti-ragging-points div {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 13px;
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 800;
}

.anti-ragging-points i {
  color: var(--accent);
  font-size: 16px;
}

.anti-ragging-main-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.anti-ragging-main-btn i {
  transition: transform 0.3s ease;
}

.anti-ragging-main-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.anti-ragging-main-btn:hover i {
  transform: translateX(5px);
}

/* ================= GRID ================= */

.anti-ragging-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.anti-ragging-card {
  position: relative;
  min-height: 232px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.anti-ragging-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.anti-ragging-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.anti-ragging-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.anti-ragging-card-icon,
.anti-ragging-card-content {
  position: relative;
  z-index: 2;
}

.anti-ragging-card-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.anti-ragging-card.active .anti-ragging-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.anti-ragging-card-icon i {
  font-size: 26px;
}

.anti-ragging-card-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 10px;
}

.anti-ragging-tag {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.anti-ragging-tag.policy {
  color: var(--primary);
  background: var(--soft-blue);
}

.anti-ragging-tag.helpline {
  color: #8f1520;
  background: rgba(181, 31, 42, 0.10);
}

.anti-ragging-tag.committee {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.anti-ragging-tag.awareness {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

.anti-ragging-card-top small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 850;
}

.anti-ragging-card-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.anti-ragging-card-content p {
  margin: 0 0 17px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.anti-ragging-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.anti-ragging-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 850;
}

.anti-ragging-meta i {
  color: var(--secondary);
  font-size: 13px;
}

/* ================= PROCESS ROW ================= */

.anti-ragging-process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.anti-ragging-process-card {
  position: relative;
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
}

.anti-ragging-process-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
}

.anti-ragging-process-card span {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 950;
}

.anti-ragging-process-card h4 {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

.anti-ragging-process-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

/* ================= NOTE ================= */

.anti-ragging-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.anti-ragging-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.anti-ragging-note-icon i {
  font-size: 26px;
}

.anti-ragging-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.anti-ragging-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.anti-ragging-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.anti-ragging-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.anti-ragging-card:hover::after {
  transform: scaleX(1);
}

.anti-ragging-card:hover .anti-ragging-card-content h3 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .anti-ragging-wrapper {
    grid-template-columns: 1fr;
  }

  .anti-ragging-head h2 {
    font-size: 38px;
  }

  .anti-ragging-feature {
    min-height: auto;
  }

  .anti-ragging-process-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .anti-ragging-section {
    padding: 64px 0;
  }

  .anti-ragging-head {
    margin-bottom: 36px;
  }

  .anti-ragging-head h2 {
    font-size: 34px;
  }

  .anti-ragging-feature h3 {
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  .anti-ragging-grid {
    grid-template-columns: 1fr;
  }

  .anti-ragging-card {
    grid-template-columns: 58px 1fr;
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .anti-ragging-section {
    padding: 52px 0;
  }

  .anti-ragging-badge {
    font-size: 11.5px;
  }

  .anti-ragging-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .anti-ragging-head p {
    font-size: 14px;
  }

  .anti-ragging-feature {
    padding: 24px;
    border-radius: 24px;
  }

  .anti-ragging-feature h3 {
    font-size: 23px;
  }

  .anti-ragging-feature p {
    font-size: 14px;
  }

  .anti-ragging-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .anti-ragging-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .anti-ragging-card-content h3 {
    font-size: 19px;
  }

  .anti-ragging-card-content p {
    font-size: 13.5px;
  }

  .anti-ragging-process-row {
    grid-template-columns: 1fr;
  }

  .anti-ragging-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .anti-ragging-head h2 {
    font-size: 25px;
  }

  .anti-ragging-feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .anti-ragging-main-btn {
    width: 100%;
  }

  .anti-ragging-meta {
    gap: 7px;
  }
}

/* ================= ANTI RAGGING SECTION CSS END ================= */




/* ================= GRIEVANCE REDRESSAL SECTION CSS START ================= */

.grievance-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.grievance-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.grievance-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.grievance-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.grievance-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.grievance-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.grievance-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.grievance-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.grievance-head p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.grievance-wrapper {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= FEATURE ================= */

.grievance-feature {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.grievance-feature::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.grievance-feature::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.grievance-feature > * {
  position: relative;
  z-index: 2;
}

.grievance-feature-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.grievance-feature-icon i {
  font-size: 31px;
}

.grievance-feature > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.grievance-feature h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.grievance-feature p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.grievance-points {
  display: grid;
  gap: 10px;
  margin-bottom: 26px;
}

.grievance-points div {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 13px;
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 800;
}

.grievance-points i {
  color: var(--accent);
  font-size: 16px;
}

.grievance-main-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.grievance-main-btn i {
  transition: transform 0.3s ease;
}

.grievance-main-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.grievance-main-btn:hover i {
  transform: translateX(5px);
}

/* ================= GRID ================= */

.grievance-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.grievance-card {
  position: relative;
  min-height: 232px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.grievance-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.grievance-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.grievance-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.grievance-card-icon,
.grievance-card-content {
  position: relative;
  z-index: 2;
}

.grievance-card-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.grievance-card.active .grievance-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.grievance-card-icon i {
  font-size: 26px;
}

.grievance-card-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 10px;
}

.grievance-tag {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.grievance-tag.academic {
  color: var(--primary);
  background: var(--soft-blue);
}

.grievance-tag.exam {
  color: #8f1520;
  background: rgba(181, 31, 42, 0.10);
}

.grievance-tag.facility {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.grievance-tag.support {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

.grievance-card-top small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 850;
}

.grievance-card-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.grievance-card-content p {
  margin: 0 0 17px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.grievance-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.grievance-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 850;
}

.grievance-meta i {
  color: var(--secondary);
  font-size: 13px;
}

/* ================= PROCESS ROW ================= */

.grievance-process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.grievance-process-card {
  position: relative;
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
}

.grievance-process-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
}

.grievance-process-card span {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 950;
}

.grievance-process-card h4 {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

.grievance-process-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

/* ================= NOTE ================= */

.grievance-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.grievance-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.grievance-note-icon i {
  font-size: 26px;
}

.grievance-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.grievance-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.grievance-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.grievance-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.grievance-card:hover::after {
  transform: scaleX(1);
}

.grievance-card:hover .grievance-card-content h3 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .grievance-wrapper {
    grid-template-columns: 1fr;
  }

  .grievance-head h2 {
    font-size: 38px;
  }

  .grievance-feature {
    min-height: auto;
  }

  .grievance-process-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .grievance-section {
    padding: 64px 0;
  }

  .grievance-head {
    margin-bottom: 36px;
  }

  .grievance-head h2 {
    font-size: 34px;
  }

  .grievance-feature h3 {
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  .grievance-grid {
    grid-template-columns: 1fr;
  }

  .grievance-card {
    grid-template-columns: 58px 1fr;
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .grievance-section {
    padding: 52px 0;
  }

  .grievance-badge {
    font-size: 11.5px;
  }

  .grievance-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .grievance-head p {
    font-size: 14px;
  }

  .grievance-feature {
    padding: 24px;
    border-radius: 24px;
  }

  .grievance-feature h3 {
    font-size: 23px;
  }

  .grievance-feature p {
    font-size: 14px;
  }

  .grievance-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .grievance-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .grievance-card-content h3 {
    font-size: 19px;
  }

  .grievance-card-content p {
    font-size: 13.5px;
  }

  .grievance-process-row {
    grid-template-columns: 1fr;
  }

  .grievance-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .grievance-head h2 {
    font-size: 25px;
  }

  .grievance-feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .grievance-main-btn {
    width: 100%;
  }

  .grievance-meta {
    gap: 7px;
  }
}

/* ================= GRIEVANCE REDRESSAL SECTION CSS END ================= */




/* ================= ICC SECTION CSS START ================= */

.icc-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.icc-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.icc-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.icc-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.icc-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.icc-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.icc-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.icc-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.icc-head p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.icc-wrapper {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= FEATURE ================= */

.icc-feature {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.icc-feature::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.icc-feature::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.icc-feature > * {
  position: relative;
  z-index: 2;
}

.icc-feature-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.icc-feature-icon i {
  font-size: 31px;
}

.icc-feature > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.icc-feature h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.icc-feature p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.icc-points {
  display: grid;
  gap: 10px;
  margin-bottom: 26px;
}

.icc-points div {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 13px;
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 800;
}

.icc-points i {
  color: var(--accent);
  font-size: 16px;
}

.icc-main-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.icc-main-btn i {
  transition: transform 0.3s ease;
}

.icc-main-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.icc-main-btn:hover i {
  transform: translateX(5px);
}

/* ================= GRID ================= */

.icc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.icc-card {
  position: relative;
  min-height: 232px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.icc-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.icc-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.icc-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.icc-card-icon,
.icc-card-content {
  position: relative;
  z-index: 2;
}

.icc-card-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.icc-card.active .icc-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.icc-card-icon i {
  font-size: 26px;
}

.icc-card-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 10px;
}

.icc-tag {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.icc-tag.safety {
  color: var(--primary);
  background: var(--soft-blue);
}

.icc-tag.complaint {
  color: #8f1520;
  background: rgba(181, 31, 42, 0.10);
}

.icc-tag.committee {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.icc-tag.awareness {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

.icc-card-top small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 850;
}

.icc-card-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.icc-card-content p {
  margin: 0 0 17px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.icc-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.icc-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 850;
}

.icc-meta i {
  color: var(--secondary);
  font-size: 13px;
}

/* ================= PROCESS ROW ================= */

.icc-process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.icc-process-card {
  position: relative;
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
}

.icc-process-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
}

.icc-process-card span {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 950;
}

.icc-process-card h4 {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

.icc-process-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

/* ================= NOTE ================= */

.icc-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.icc-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.icc-note-icon i {
  font-size: 26px;
}

.icc-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.icc-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.icc-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.icc-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.icc-card:hover::after {
  transform: scaleX(1);
}

.icc-card:hover .icc-card-content h3 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .icc-wrapper {
    grid-template-columns: 1fr;
  }

  .icc-head h2 {
    font-size: 38px;
  }

  .icc-feature {
    min-height: auto;
  }

  .icc-process-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .icc-section {
    padding: 64px 0;
  }

  .icc-head {
    margin-bottom: 36px;
  }

  .icc-head h2 {
    font-size: 34px;
  }

  .icc-feature h3 {
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  .icc-grid {
    grid-template-columns: 1fr;
  }

  .icc-card {
    grid-template-columns: 58px 1fr;
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .icc-section {
    padding: 52px 0;
  }

  .icc-badge {
    font-size: 11.5px;
  }

  .icc-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .icc-head p {
    font-size: 14px;
  }

  .icc-feature {
    padding: 24px;
    border-radius: 24px;
  }

  .icc-feature h3 {
    font-size: 23px;
  }

  .icc-feature p {
    font-size: 14px;
  }

  .icc-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .icc-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .icc-card-content h3 {
    font-size: 19px;
  }

  .icc-card-content p {
    font-size: 13.5px;
  }

  .icc-process-row {
    grid-template-columns: 1fr;
  }

  .icc-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .icc-head h2 {
    font-size: 25px;
  }

  .icc-feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .icc-main-btn {
    width: 100%;
  }

  .icc-meta {
    gap: 7px;
  }
}

/* ================= ICC SECTION CSS END ================= */




/* ================= NCC / NSS SECTION CSS START ================= */

.ncc-nss-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.ncc-nss-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.ncc-nss-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.ncc-nss-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.ncc-nss-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.ncc-nss-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.ncc-nss-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.ncc-nss-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.ncc-nss-head p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.ncc-nss-wrapper {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= FEATURE ================= */

.ncc-nss-feature {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.ncc-nss-feature::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.ncc-nss-feature::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.ncc-nss-feature > * {
  position: relative;
  z-index: 2;
}

.ncc-nss-feature-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.ncc-nss-feature-icon i {
  font-size: 31px;
}

.ncc-nss-feature > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.ncc-nss-feature h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.ncc-nss-feature p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.ncc-nss-points {
  display: grid;
  gap: 10px;
  margin-bottom: 26px;
}

.ncc-nss-points div {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 13px;
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 800;
}

.ncc-nss-points i {
  color: var(--accent);
  font-size: 16px;
}

.ncc-nss-main-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.ncc-nss-main-btn i {
  transition: transform 0.3s ease;
}

.ncc-nss-main-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.ncc-nss-main-btn:hover i {
  transform: translateX(5px);
}

/* ================= GRID ================= */

.ncc-nss-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.ncc-nss-card {
  position: relative;
  min-height: 232px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.ncc-nss-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.ncc-nss-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.ncc-nss-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.ncc-nss-card-icon,
.ncc-nss-card-content {
  position: relative;
  z-index: 2;
}

.ncc-nss-card-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ncc-nss-card.active .ncc-nss-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.ncc-nss-card-icon i {
  font-size: 26px;
}

.ncc-nss-card-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 10px;
}

.ncc-nss-tag {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.ncc-nss-tag.ncc {
  color: var(--primary);
  background: var(--soft-blue);
}

.ncc-nss-tag.nss {
  color: #8f1520;
  background: rgba(181, 31, 42, 0.10);
}

.ncc-nss-tag.awareness {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.ncc-nss-tag.service {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

.ncc-nss-card-top small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 850;
}

.ncc-nss-card-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.ncc-nss-card-content p {
  margin: 0 0 17px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.ncc-nss-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.ncc-nss-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 850;
}

.ncc-nss-meta i {
  color: var(--secondary);
  font-size: 13px;
}

/* ================= PROCESS ROW ================= */

.ncc-nss-process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.ncc-nss-process-card {
  position: relative;
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
}

.ncc-nss-process-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
}

.ncc-nss-process-card span {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 950;
}

.ncc-nss-process-card h4 {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

.ncc-nss-process-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

/* ================= NOTE ================= */

.ncc-nss-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.ncc-nss-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.ncc-nss-note-icon i {
  font-size: 26px;
}

.ncc-nss-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.ncc-nss-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.ncc-nss-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.ncc-nss-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.ncc-nss-card:hover::after {
  transform: scaleX(1);
}

.ncc-nss-card:hover .ncc-nss-card-content h3 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .ncc-nss-wrapper {
    grid-template-columns: 1fr;
  }

  .ncc-nss-head h2 {
    font-size: 38px;
  }

  .ncc-nss-feature {
    min-height: auto;
  }

  .ncc-nss-process-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .ncc-nss-section {
    padding: 64px 0;
  }

  .ncc-nss-head {
    margin-bottom: 36px;
  }

  .ncc-nss-head h2 {
    font-size: 34px;
  }

  .ncc-nss-feature h3 {
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  .ncc-nss-grid {
    grid-template-columns: 1fr;
  }

  .ncc-nss-card {
    grid-template-columns: 58px 1fr;
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .ncc-nss-section {
    padding: 52px 0;
  }

  .ncc-nss-badge {
    font-size: 11.5px;
  }

  .ncc-nss-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .ncc-nss-head p {
    font-size: 14px;
  }

  .ncc-nss-feature {
    padding: 24px;
    border-radius: 24px;
  }

  .ncc-nss-feature h3 {
    font-size: 23px;
  }

  .ncc-nss-feature p {
    font-size: 14px;
  }

  .ncc-nss-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .ncc-nss-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .ncc-nss-card-content h3 {
    font-size: 19px;
  }

  .ncc-nss-card-content p {
    font-size: 13.5px;
  }

  .ncc-nss-process-row {
    grid-template-columns: 1fr;
  }

  .ncc-nss-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .ncc-nss-head h2 {
    font-size: 25px;
  }

  .ncc-nss-feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .ncc-nss-main-btn {
    width: 100%;
  }

  .ncc-nss-meta {
    gap: 7px;
  }
}

/* ================= NCC / NSS SECTION CSS END ================= */




/* ================= LIBRARY INFO SECTION CSS START ================= */

.library-info-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.library-info-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.library-info-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.library-info-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.library-info-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.library-info-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.library-info-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.library-info-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.library-info-head p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.library-info-wrapper {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= FEATURE ================= */

.library-info-feature {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.library-info-feature::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.library-info-feature::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.library-info-feature > * {
  position: relative;
  z-index: 2;
}

.library-feature-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.library-feature-icon i {
  font-size: 31px;
}

.library-info-feature > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.library-info-feature h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.library-info-feature p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.library-feature-points {
  display: grid;
  gap: 10px;
  margin-bottom: 26px;
}

.library-feature-points div {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 13px;
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 800;
}

.library-feature-points i {
  color: var(--accent);
  font-size: 16px;
}

.library-main-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.library-main-btn i {
  transition: transform 0.3s ease;
}

.library-main-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.library-main-btn:hover i {
  transform: translateX(5px);
}

/* ================= GRID ================= */

.library-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.library-info-card {
  position: relative;
  min-height: 232px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.library-info-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.library-info-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.library-info-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.library-card-icon,
.library-card-content {
  position: relative;
  z-index: 2;
}

.library-card-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.library-info-card.active .library-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.library-card-icon i {
  font-size: 26px;
}

.library-card-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 10px;
}

.library-tag {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.library-tag.books {
  color: var(--primary);
  background: var(--soft-blue);
}

.library-tag.digital {
  color: #8f1520;
  background: rgba(181, 31, 42, 0.10);
}

.library-tag.issue {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.library-tag.reading {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

.library-card-top small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 850;
}

.library-card-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.library-card-content p {
  margin: 0 0 17px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.library-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.library-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 850;
}

.library-meta i {
  color: var(--secondary);
  font-size: 13px;
}

/* ================= STATS ROW ================= */

.library-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.library-stat-card {
  position: relative;
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.library-stat-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.library-stat-icon {
  position: relative;
  z-index: 2;
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  border-radius: 18px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.20);
}

.library-stat-icon i {
  font-size: 24px;
}

.library-stat-card h4 {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

.library-stat-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

/* ================= RULES BOX ================= */

.library-rules-box {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.library-rules-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}

.library-rules-icon {
  width: 62px;
  height: 62px;
  min-width: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.library-rules-icon i {
  font-size: 27px;
}

.library-rules-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.library-rules-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.library-rules-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.library-rule-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 15px;
  border-radius: 18px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 700;
}

.library-rule-item i {
  color: var(--secondary);
  font-size: 16px;
  margin-top: 2px;
}

/* ================= NOTE ================= */

.library-info-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.library-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.library-note-icon i {
  font-size: 26px;
}

.library-info-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.library-info-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.library-info-card:hover,
.library-stat-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.library-info-card:hover::before,
.library-stat-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.library-info-card:hover::after {
  transform: scaleX(1);
}

.library-info-card:hover .library-card-content h3,
.library-stat-card:hover h4 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .library-info-wrapper {
    grid-template-columns: 1fr;
  }

  .library-info-head h2 {
    font-size: 38px;
  }

  .library-info-feature {
    min-height: auto;
  }

  .library-stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .library-info-section {
    padding: 64px 0;
  }

  .library-info-head {
    margin-bottom: 36px;
  }

  .library-info-head h2 {
    font-size: 34px;
  }

  .library-info-feature h3 {
    font-size: 28px;
  }

  .library-rules-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .library-info-grid {
    grid-template-columns: 1fr;
  }

  .library-info-card {
    grid-template-columns: 58px 1fr;
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .library-info-section {
    padding: 52px 0;
  }

  .library-info-badge {
    font-size: 11.5px;
  }

  .library-info-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .library-info-head p {
    font-size: 14px;
  }

  .library-info-feature {
    padding: 24px;
    border-radius: 24px;
  }

  .library-info-feature h3 {
    font-size: 23px;
  }

  .library-info-feature p {
    font-size: 14px;
  }

  .library-info-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .library-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .library-card-content h3 {
    font-size: 19px;
  }

  .library-card-content p {
    font-size: 13.5px;
  }

  .library-stats-row {
    grid-template-columns: 1fr;
  }

  .library-rules-box {
    padding: 22px;
    border-radius: 24px;
  }

  .library-rules-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .library-rules-head h3 {
    font-size: 21px;
  }

  .library-info-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .library-info-head h2 {
    font-size: 25px;
  }

  .library-feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .library-main-btn {
    width: 100%;
  }

  .library-meta {
    gap: 7px;
  }
}

/* ================= LIBRARY INFO SECTION CSS END ================= */



/* ================= DOWNLOADS / FORMS SECTION CSS START ================= */

.downloads-forms-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.downloads-forms-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.downloads-forms-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.downloads-forms-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.downloads-forms-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.downloads-forms-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.downloads-forms-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.downloads-forms-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.downloads-forms-head p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.downloads-forms-wrapper {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= FEATURE ================= */

.downloads-forms-feature {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.downloads-forms-feature::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.downloads-forms-feature::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.downloads-forms-feature > * {
  position: relative;
  z-index: 2;
}

.downloads-feature-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.downloads-feature-icon i {
  font-size: 31px;
}

.downloads-forms-feature > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.downloads-forms-feature h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.downloads-forms-feature p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.downloads-feature-points {
  display: grid;
  gap: 10px;
  margin-bottom: 26px;
}

.downloads-feature-points div {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 13px;
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 800;
}

.downloads-feature-points i {
  color: var(--accent);
  font-size: 16px;
}

.downloads-main-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.downloads-main-btn i {
  transition: transform 0.3s ease;
}

.downloads-main-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.downloads-main-btn:hover i {
  transform: translateX(5px);
}

/* ================= GRID ================= */

.downloads-forms-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.download-form-card {
  position: relative;
  min-height: 232px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.download-form-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.download-form-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.download-form-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.download-form-icon,
.download-form-content {
  position: relative;
  z-index: 2;
}

.download-form-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.download-form-card.active .download-form-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.download-form-icon i {
  font-size: 26px;
}

.download-form-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 10px;
}

.download-form-tag {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.download-form-tag.admission {
  color: var(--primary);
  background: var(--soft-blue);
}

.download-form-tag.examination {
  color: #8f1520;
  background: rgba(181, 31, 42, 0.10);
}

.download-form-tag.scholarship {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.download-form-tag.certificate {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

.download-form-tag.fee {
  color: #6f3d8f;
  background: rgba(111, 61, 143, 0.10);
}

.download-form-tag.academic {
  color: #0b7285;
  background: rgba(11, 114, 133, 0.10);
}

.download-form-top small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 850;
}

.download-form-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.download-form-content p {
  margin: 0 0 17px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.download-form-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.download-form-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 850;
}

.download-form-meta i {
  color: var(--secondary);
  font-size: 13px;
}

/* ================= FILTER ROW ================= */

.downloads-filter-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.download-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 18px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.3s ease;
}

.download-filter-btn.active,
.download-filter-btn:hover {
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  transform: translateY(-3px);
}

/* ================= TABLE ================= */

.downloads-table-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.downloads-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.downloads-table-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.downloads-table-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.downloads-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.downloads-table-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.downloads-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.downloads-table {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.downloads-table thead th {
  padding: 0 16px 8px;
  color: var(--primary-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.downloads-table tbody tr {
  background: var(--light-bg);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.04);
}

.downloads-table tbody td {
  padding: 16px;
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 750;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.downloads-table tbody td:first-child {
  border-left: 1px solid var(--border);
  border-radius: 16px 0 0 16px;
}

.downloads-table tbody td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 16px 16px 0;
}

.downloads-table td a {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
}

.table-tag {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
}

.table-tag.admission {
  color: var(--primary);
  background: var(--soft-blue);
}

.table-tag.examination {
  color: #8f1520;
  background: rgba(181, 31, 42, 0.10);
}

.table-tag.scholarship {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

/* ================= NOTE ================= */

.downloads-forms-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.downloads-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.downloads-note-icon i {
  font-size: 26px;
}

.downloads-forms-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.downloads-forms-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.download-form-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.download-form-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.download-form-card:hover::after {
  transform: scaleX(1);
}

.download-form-card:hover .download-form-content h3 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .downloads-forms-wrapper {
    grid-template-columns: 1fr;
  }

  .downloads-forms-head h2 {
    font-size: 38px;
  }

  .downloads-forms-feature {
    min-height: auto;
  }
}

@media (max-width: 991px) {
  .downloads-forms-section {
    padding: 64px 0;
  }

  .downloads-forms-head {
    margin-bottom: 36px;
  }

  .downloads-forms-head h2 {
    font-size: 34px;
  }

  .downloads-forms-feature h3 {
    font-size: 28px;
  }

  .downloads-table-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .downloads-forms-grid {
    grid-template-columns: 1fr;
  }

  .download-form-card {
    grid-template-columns: 58px 1fr;
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .downloads-forms-section {
    padding: 52px 0;
  }

  .downloads-forms-badge {
    font-size: 11.5px;
  }

  .downloads-forms-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .downloads-forms-head p {
    font-size: 14px;
  }

  .downloads-forms-feature {
    padding: 24px;
    border-radius: 24px;
  }

  .downloads-forms-feature h3 {
    font-size: 23px;
  }

  .downloads-forms-feature p {
    font-size: 14px;
  }

  .download-form-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .download-form-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .download-form-content h3 {
    font-size: 19px;
  }

  .download-form-content p {
    font-size: 13.5px;
  }

  .downloads-filter-row {
    justify-content: flex-start;
  }

  .download-filter-btn {
    width: 100%;
    justify-content: center;
  }

  .downloads-table-card {
    padding: 20px;
    border-radius: 24px;
  }

  .downloads-table-head h3 {
    font-size: 21px;
  }

  .downloads-table-btn {
    width: 100%;
  }

  .downloads-forms-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .downloads-forms-head h2 {
    font-size: 25px;
  }

  .downloads-feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .downloads-main-btn {
    width: 100%;
  }

  .download-form-meta {
    gap: 7px;
  }
}

/* ================= DOWNLOADS / FORMS SECTION CSS END ================= */



/* ================= CAREER / PLACEMENT SECTION CSS START ================= */

.career-placement-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.career-placement-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.career-placement-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.career-placement-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.career-placement-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.career-placement-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.career-placement-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.career-placement-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.career-placement-head p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.career-placement-wrapper {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= FEATURE ================= */

.career-placement-feature {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.career-placement-feature::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.career-placement-feature::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.career-placement-feature > * {
  position: relative;
  z-index: 2;
}

.career-feature-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.career-feature-icon i {
  font-size: 31px;
}

.career-placement-feature > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.career-placement-feature h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.career-placement-feature p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.career-feature-points {
  display: grid;
  gap: 10px;
  margin-bottom: 26px;
}

.career-feature-points div {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 13px;
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 800;
}

.career-feature-points i {
  color: var(--accent);
  font-size: 16px;
}

.career-main-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.career-main-btn i {
  transition: transform 0.3s ease;
}

.career-main-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.career-main-btn:hover i {
  transform: translateX(5px);
}

/* ================= GRID ================= */

.career-placement-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.career-placement-card {
  position: relative;
  min-height: 232px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.career-placement-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.career-placement-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.career-placement-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.career-card-icon,
.career-card-content {
  position: relative;
  z-index: 2;
}

.career-card-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.career-placement-card.active .career-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.career-card-icon i {
  font-size: 26px;
}

.career-card-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 10px;
}

.career-tag {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.career-tag.counselling {
  color: var(--primary);
  background: var(--soft-blue);
}

.career-tag.skill {
  color: #8f1520;
  background: rgba(181, 31, 42, 0.10);
}

.career-tag.placement {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.career-tag.interview {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

.career-card-top small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 850;
}

.career-card-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.career-card-content p {
  margin: 0 0 17px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.career-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.career-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 850;
}

.career-meta i {
  color: var(--secondary);
  font-size: 13px;
}

/* ================= PROCESS ROW ================= */

.career-process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.career-process-card {
  position: relative;
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
}

.career-process-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
}

.career-process-card span {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 950;
}

.career-process-card h4 {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

.career-process-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

/* ================= HIGHLIGHT BOX ================= */

.career-highlight-box {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.career-highlight-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}

.career-highlight-icon {
  width: 62px;
  height: 62px;
  min-width: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.career-highlight-icon i {
  font-size: 27px;
}

.career-highlight-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.career-highlight-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.career-highlight-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.career-highlight-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 15px;
  border-radius: 18px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 700;
}

.career-highlight-item i {
  color: var(--secondary);
  font-size: 16px;
  margin-top: 2px;
}

/* ================= NOTE ================= */

.career-placement-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.career-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.career-note-icon i {
  font-size: 26px;
}

.career-placement-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.career-placement-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.career-placement-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.career-placement-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.career-placement-card:hover::after {
  transform: scaleX(1);
}

.career-placement-card:hover .career-card-content h3 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .career-placement-wrapper {
    grid-template-columns: 1fr;
  }

  .career-placement-head h2 {
    font-size: 38px;
  }

  .career-placement-feature {
    min-height: auto;
  }

  .career-process-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .career-placement-section {
    padding: 64px 0;
  }

  .career-placement-head {
    margin-bottom: 36px;
  }

  .career-placement-head h2 {
    font-size: 34px;
  }

  .career-placement-feature h3 {
    font-size: 28px;
  }

  .career-highlight-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .career-placement-grid {
    grid-template-columns: 1fr;
  }

  .career-placement-card {
    grid-template-columns: 58px 1fr;
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .career-placement-section {
    padding: 52px 0;
  }

  .career-placement-badge {
    font-size: 11.5px;
  }

  .career-placement-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .career-placement-head p {
    font-size: 14px;
  }

  .career-placement-feature {
    padding: 24px;
    border-radius: 24px;
  }

  .career-placement-feature h3 {
    font-size: 23px;
  }

  .career-placement-feature p {
    font-size: 14px;
  }

  .career-placement-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .career-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .career-card-content h3 {
    font-size: 19px;
  }

  .career-card-content p {
    font-size: 13.5px;
  }

  .career-process-row {
    grid-template-columns: 1fr;
  }

  .career-highlight-box {
    padding: 22px;
    border-radius: 24px;
  }

  .career-highlight-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .career-highlight-head h3 {
    font-size: 21px;
  }

  .career-placement-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .career-placement-head h2 {
    font-size: 25px;
  }

  .career-feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .career-main-btn {
    width: 100%;
  }

  .career-meta {
    gap: 7px;
  }
}

/* ================= CAREER / PLACEMENT SECTION CSS END ================= */





/* ================= ALUMNI SECTION CSS START ================= */

.alumni-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.alumni-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.alumni-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.alumni-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.alumni-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.alumni-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.alumni-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.alumni-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.alumni-head p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.alumni-wrapper {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= FEATURE ================= */

.alumni-feature {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.alumni-feature::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.alumni-feature::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.alumni-feature > * {
  position: relative;
  z-index: 2;
}

.alumni-feature-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.alumni-feature-icon i {
  font-size: 31px;
}

.alumni-feature > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.alumni-feature h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.alumni-feature p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.alumni-feature-points {
  display: grid;
  gap: 10px;
  margin-bottom: 26px;
}

.alumni-feature-points div {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 13px;
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 800;
}

.alumni-feature-points i {
  color: var(--accent);
  font-size: 16px;
}

.alumni-main-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.alumni-main-btn i {
  transition: transform 0.3s ease;
}

.alumni-main-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.alumni-main-btn:hover i {
  transform: translateX(5px);
}

/* ================= GRID ================= */

.alumni-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.alumni-card {
  position: relative;
  min-height: 232px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.alumni-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.alumni-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.alumni-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.alumni-card-icon,
.alumni-card-content {
  position: relative;
  z-index: 2;
}

.alumni-card-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.alumni-card.active .alumni-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.alumni-card-icon i {
  font-size: 26px;
}

.alumni-card-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 10px;
}

.alumni-tag {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.alumni-tag.register {
  color: var(--primary);
  background: var(--soft-blue);
}

.alumni-tag.meet {
  color: #8f1520;
  background: rgba(181, 31, 42, 0.10);
}

.alumni-tag.mentor {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.alumni-tag.achievement {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

.alumni-card-top small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 850;
}

.alumni-card-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.alumni-card-content p {
  margin: 0 0 17px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.alumni-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.alumni-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 850;
}

.alumni-meta i {
  color: var(--secondary);
  font-size: 13px;
}

/* ================= PROCESS ROW ================= */

.alumni-process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.alumni-process-card {
  position: relative;
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
}

.alumni-process-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
}

.alumni-process-card span {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 950;
}

.alumni-process-card h4 {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

.alumni-process-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

/* ================= HIGHLIGHT BOX ================= */

.alumni-highlight-box {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.alumni-highlight-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}

.alumni-highlight-icon {
  width: 62px;
  height: 62px;
  min-width: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.alumni-highlight-icon i {
  font-size: 27px;
}

.alumni-highlight-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.alumni-highlight-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.alumni-highlight-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.alumni-highlight-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 15px;
  border-radius: 18px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 700;
}

.alumni-highlight-item i {
  color: var(--secondary);
  font-size: 16px;
  margin-top: 2px;
}

/* ================= NOTE ================= */

.alumni-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.alumni-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.alumni-note-icon i {
  font-size: 26px;
}

.alumni-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.alumni-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.alumni-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.alumni-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.alumni-card:hover::after {
  transform: scaleX(1);
}

.alumni-card:hover .alumni-card-content h3 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .alumni-wrapper {
    grid-template-columns: 1fr;
  }

  .alumni-head h2 {
    font-size: 38px;
  }

  .alumni-feature {
    min-height: auto;
  }

  .alumni-process-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .alumni-section {
    padding: 64px 0;
  }

  .alumni-head {
    margin-bottom: 36px;
  }

  .alumni-head h2 {
    font-size: 34px;
  }

  .alumni-feature h3 {
    font-size: 28px;
  }

  .alumni-highlight-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .alumni-grid {
    grid-template-columns: 1fr;
  }

  .alumni-card {
    grid-template-columns: 58px 1fr;
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .alumni-section {
    padding: 52px 0;
  }

  .alumni-badge {
    font-size: 11.5px;
  }

  .alumni-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .alumni-head p {
    font-size: 14px;
  }

  .alumni-feature {
    padding: 24px;
    border-radius: 24px;
  }

  .alumni-feature h3 {
    font-size: 23px;
  }

  .alumni-feature p {
    font-size: 14px;
  }

  .alumni-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .alumni-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .alumni-card-content h3 {
    font-size: 19px;
  }

  .alumni-card-content p {
    font-size: 13.5px;
  }

  .alumni-process-row {
    grid-template-columns: 1fr;
  }

  .alumni-highlight-box {
    padding: 22px;
    border-radius: 24px;
  }

  .alumni-highlight-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .alumni-highlight-head h3 {
    font-size: 21px;
  }

  .alumni-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .alumni-head h2 {
    font-size: 25px;
  }

  .alumni-feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .alumni-main-btn {
    width: 100%;
  }

  .alumni-meta {
    gap: 7px;
  }
}

/* ================= ALUMNI SECTION CSS END ================= */






/* ================= ADDRESS SECTION CSS START ================= */

.address-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.address-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.address-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.address-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.address-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.address-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.address-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.address-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.address-head p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.address-wrapper {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= FEATURE CARD ================= */

.address-feature-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.address-feature-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.address-feature-card::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.address-feature-card > * {
  position: relative;
  z-index: 2;
}

.address-feature-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.address-feature-icon i {
  font-size: 31px;
}

.address-feature-card > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.address-feature-card h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.address-feature-card p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.address-info-list {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
}

.address-info-item {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.address-info-item > i {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.address-info-item h4 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
}

.address-info-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 600;
}

.address-main-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.address-main-btn i {
  transition: transform 0.3s ease;
}

.address-main-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.address-main-btn:hover i {
  transform: translateX(5px);
}

/* ================= CONTENT AREA ================= */

.address-content-area {
  display: grid;
  gap: 18px;
}

.address-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.address-card {
  position: relative;
  min-height: 188px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.address-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.address-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.address-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.address-card-icon,
.address-card div {
  position: relative;
  z-index: 2;
}

.address-card-icon {
  width: 62px;
  height: 62px;
  margin-bottom: 18px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.address-card.active .address-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.address-card-icon i {
  font-size: 26px;
}

.address-card span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.address-card h3 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.address-card p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

/* ================= MAP ================= */

.address-map-box {
  position: relative;
  min-height: 330px;
  border-radius: 30px;
  background:
    linear-gradient(rgba(13, 45, 85, 0.78), rgba(13, 45, 85, 0.78)),
    url("assets/img/map-bg.jpg") center/cover no-repeat;
  border: 1px solid rgba(23, 63, 115, 0.16);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.10);
  overflow: hidden;
}

.address-map-box iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.address-map-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 34px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  background:
    radial-gradient(circle at 15% 18%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, rgba(23, 63, 115, 0.70), rgba(13, 45, 85, 0.88));
}

.address-map-overlay i {
  color: var(--accent);
  font-size: 38px;
  margin-bottom: 14px;
}

.address-map-overlay h3 {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 950;
}

.address-map-overlay p {
  max-width: 520px;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14.5px;
  line-height: 1.6;
  font-weight: 500;
}

.address-map-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 142px;
  min-height: 46px;
  padding: 12px 18px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  transition: all 0.3s ease;
}

.address-map-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

/* ================= QUICK ROW ================= */

.address-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.address-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 112px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.address-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.address-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.address-quick-card div {
  position: relative;
  z-index: 2;
}

.address-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.address-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= NOTE ================= */

.address-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.address-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.address-note-icon i {
  font-size: 26px;
}

.address-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.address-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.address-card:hover,
.address-quick-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.address-card:hover::before,
.address-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.address-card:hover::after {
  transform: scaleX(1);
}

.address-card:hover h3,
.address-quick-card:hover h4 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .address-wrapper {
    grid-template-columns: 1fr;
  }

  .address-head h2 {
    font-size: 38px;
  }

  .address-feature-card {
    min-height: auto;
  }

  .address-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .address-section {
    padding: 64px 0;
  }

  .address-head {
    margin-bottom: 36px;
  }

  .address-head h2 {
    font-size: 34px;
  }

  .address-feature-card h3 {
    font-size: 28px;
  }

  .address-map-overlay {
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-end;
  }
}

@media (max-width: 767px) {
  .address-card-grid {
    grid-template-columns: 1fr;
  }

  .address-map-box {
    min-height: 300px;
  }
}

@media (max-width: 575px) {
  .address-section {
    padding: 52px 0;
  }

  .address-badge {
    font-size: 11.5px;
  }

  .address-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .address-head p {
    font-size: 14px;
  }

  .address-feature-card {
    padding: 24px;
    border-radius: 24px;
  }

  .address-feature-card h3 {
    font-size: 23px;
  }

  .address-feature-card p {
    font-size: 14px;
  }

  .address-info-item {
    grid-template-columns: 1fr;
  }

  .address-card {
    padding: 22px;
    border-radius: 24px;
  }

  .address-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .address-card h3 {
    font-size: 19px;
  }

  .address-card p {
    font-size: 13.5px;
  }

  .address-map-overlay {
    padding: 24px;
  }

  .address-map-overlay h3 {
    font-size: 22px;
  }

  .address-map-btn {
    width: 100%;
  }

  .address-quick-row {
    grid-template-columns: 1fr;
  }

  .address-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .address-head h2 {
    font-size: 25px;
  }

  .address-feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .address-main-btn {
    width: 100%;
  }
}

/* ================= ADDRESS SECTION CSS END ================= */



/* ================= PHONE SECTION CSS START ================= */

.phone-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.phone-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.phone-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.phone-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.phone-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.phone-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.phone-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.phone-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.phone-head p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.phone-wrapper {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= FEATURE CARD ================= */

.phone-feature-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.phone-feature-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.phone-feature-card::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.phone-feature-card > * {
  position: relative;
  z-index: 2;
}

.phone-feature-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.phone-feature-icon i {
  font-size: 31px;
}

.phone-feature-card > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.phone-feature-card h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.phone-feature-card p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.phone-info-list {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
}

.phone-info-item {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.phone-info-item > i {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.phone-info-item h4 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
}

.phone-info-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 600;
}

.phone-main-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.phone-main-btn i {
  transition: transform 0.3s ease;
}

.phone-main-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.phone-main-btn:hover i {
  transform: translateX(5px);
}

/* ================= CONTENT AREA ================= */

.phone-content-area {
  display: grid;
  gap: 18px;
}

.phone-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.phone-card {
  position: relative;
  min-height: 188px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.phone-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.phone-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.phone-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.phone-card-icon,
.phone-card div {
  position: relative;
  z-index: 2;
}

.phone-card-icon {
  width: 62px;
  height: 62px;
  margin-bottom: 18px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-card.active .phone-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.phone-card-icon i {
  font-size: 26px;
}

.phone-card span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.phone-card h3 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.phone-card p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

/* ================= ACTION BOX ================= */

.phone-action-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 190px;
  padding: 30px;
  border-radius: 30px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.phone-action-content {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.phone-action-icon {
  width: 68px;
  height: 68px;
  min-width: 68px;
  border-radius: 22px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.20);
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-action-icon i {
  font-size: 30px;
}

.phone-action-content span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.phone-action-content h3 {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 950;
}

.phone-action-content p {
  max-width: 580px;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14.5px;
  line-height: 1.6;
  font-weight: 500;
}

.phone-action-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.phone-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 12px 18px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  transition: all 0.3s ease;
}

.phone-action-btn.primary {
  color: var(--primary);
  background: #ffffff;
}

.phone-action-btn.light {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.20);
}

.phone-action-btn:hover {
  transform: translateY(-3px);
}

/* ================= QUICK ROW ================= */

.phone-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.phone-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 112px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.phone-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.phone-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.phone-quick-card div {
  position: relative;
  z-index: 2;
}

.phone-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.phone-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= NOTE ================= */

.phone-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.phone-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.phone-note-icon i {
  font-size: 26px;
}

.phone-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.phone-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.phone-card:hover,
.phone-quick-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.phone-card:hover::before,
.phone-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.phone-card:hover::after {
  transform: scaleX(1);
}

.phone-card:hover h3,
.phone-quick-card:hover h4 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .phone-wrapper {
    grid-template-columns: 1fr;
  }

  .phone-head h2 {
    font-size: 38px;
  }

  .phone-feature-card {
    min-height: auto;
  }

  .phone-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .phone-action-box {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 991px) {
  .phone-section {
    padding: 64px 0;
  }

  .phone-head {
    margin-bottom: 36px;
  }

  .phone-head h2 {
    font-size: 34px;
  }

  .phone-feature-card h3 {
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  .phone-card-grid {
    grid-template-columns: 1fr;
  }

  .phone-action-content {
    flex-direction: column;
  }
}

@media (max-width: 575px) {
  .phone-section {
    padding: 52px 0;
  }

  .phone-badge {
    font-size: 11.5px;
  }

  .phone-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .phone-head p {
    font-size: 14px;
  }

  .phone-feature-card {
    padding: 24px;
    border-radius: 24px;
  }

  .phone-feature-card h3 {
    font-size: 23px;
  }

  .phone-feature-card p {
    font-size: 14px;
  }

  .phone-info-item {
    grid-template-columns: 1fr;
  }

  .phone-card {
    padding: 22px;
    border-radius: 24px;
  }

  .phone-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .phone-card h3 {
    font-size: 19px;
  }

  .phone-card p {
    font-size: 13.5px;
  }

  .phone-action-box {
    padding: 24px;
    border-radius: 24px;
  }

  .phone-action-content h3 {
    font-size: 22px;
  }

  .phone-action-buttons,
  .phone-action-btn {
    width: 100%;
  }

  .phone-quick-row {
    grid-template-columns: 1fr;
  }

  .phone-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .phone-head h2 {
    font-size: 25px;
  }

  .phone-feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .phone-main-btn {
    width: 100%;
  }
}

/* ================= PHONE SECTION CSS END ================= */



/* ================= EMAIL SECTION CSS START ================= */

.email-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.email-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.email-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.email-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.email-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.email-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.email-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.email-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.email-head p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.email-wrapper {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= FEATURE CARD ================= */

.email-feature-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.email-feature-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.email-feature-card::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.email-feature-card > * {
  position: relative;
  z-index: 2;
}

.email-feature-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.email-feature-icon i {
  font-size: 31px;
}

.email-feature-card > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.email-feature-card h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.email-feature-card p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.email-info-list {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
}

.email-info-item {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.email-info-item > i {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.email-info-item h4 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
}

.email-info-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 600;
}

.email-main-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.email-main-btn i {
  transition: transform 0.3s ease;
}

.email-main-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.email-main-btn:hover i {
  transform: translateX(5px);
}

/* ================= CONTENT AREA ================= */

.email-content-area {
  display: grid;
  gap: 18px;
}

.email-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.email-card {
  position: relative;
  min-height: 188px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.email-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.email-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.email-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.email-card-icon,
.email-card div {
  position: relative;
  z-index: 2;
}

.email-card-icon {
  width: 62px;
  height: 62px;
  margin-bottom: 18px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.email-card.active .email-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.email-card-icon i {
  font-size: 26px;
}

.email-card span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.email-card h3 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.email-card p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

/* ================= FORM BOX ================= */

.email-form-box {
  padding: 30px;
  border-radius: 30px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.email-form-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 22px;
}

.email-form-icon {
  width: 68px;
  height: 68px;
  min-width: 68px;
  border-radius: 22px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.20);
  display: flex;
  align-items: center;
  justify-content: center;
}

.email-form-icon i {
  font-size: 30px;
}

.email-form-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.email-form-head h3 {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 950;
}

.email-form-head p {
  max-width: 580px;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14.5px;
  line-height: 1.6;
  font-weight: 500;
}

.email-format-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.email-format-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 700;
}

.email-format-item i {
  color: var(--accent);
  font-size: 16px;
  margin-top: 2px;
}

.email-form-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.email-form-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 12px 18px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  transition: all 0.3s ease;
}

.email-form-btn.primary {
  color: var(--primary);
  background: #ffffff;
}

.email-form-btn.light {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.20);
}

.email-form-btn:hover {
  transform: translateY(-3px);
}

/* ================= QUICK ROW ================= */

.email-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.email-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 112px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.email-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.email-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.email-quick-card div {
  position: relative;
  z-index: 2;
}

.email-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.email-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= NOTE ================= */

.email-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.email-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.email-note-icon i {
  font-size: 26px;
}

.email-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.email-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.email-card:hover,
.email-quick-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.email-card:hover::before,
.email-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.email-card:hover::after {
  transform: scaleX(1);
}

.email-card:hover h3,
.email-quick-card:hover h4 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .email-wrapper {
    grid-template-columns: 1fr;
  }

  .email-head h2 {
    font-size: 38px;
  }

  .email-feature-card {
    min-height: auto;
  }

  .email-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .email-section {
    padding: 64px 0;
  }

  .email-head {
    margin-bottom: 36px;
  }

  .email-head h2 {
    font-size: 34px;
  }

  .email-feature-card h3 {
    font-size: 28px;
  }

  .email-format-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .email-card-grid {
    grid-template-columns: 1fr;
  }

  .email-form-head {
    flex-direction: column;
  }
}

@media (max-width: 575px) {
  .email-section {
    padding: 52px 0;
  }

  .email-badge {
    font-size: 11.5px;
  }

  .email-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .email-head p {
    font-size: 14px;
  }

  .email-feature-card {
    padding: 24px;
    border-radius: 24px;
  }

  .email-feature-card h3 {
    font-size: 23px;
  }

  .email-feature-card p {
    font-size: 14px;
  }

  .email-info-item {
    grid-template-columns: 1fr;
  }

  .email-card {
    padding: 22px;
    border-radius: 24px;
  }

  .email-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .email-card h3 {
    font-size: 19px;
  }

  .email-card p {
    font-size: 13.5px;
  }

  .email-form-box {
    padding: 24px;
    border-radius: 24px;
  }

  .email-form-head h3 {
    font-size: 22px;
  }

  .email-form-actions,
  .email-form-btn {
    width: 100%;
  }

  .email-quick-row {
    grid-template-columns: 1fr;
  }

  .email-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .email-head h2 {
    font-size: 25px;
  }

  .email-feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .email-main-btn {
    width: 100%;
  }
}

/* ================= EMAIL SECTION CSS END ================= */



/* ================= EMAIL SECTION CSS START ================= */

.email-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.email-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
}

.email-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
}

.email-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.email-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.email-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.email-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.email-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.email-head p {
  max-width: 710px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.email-wrapper {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= MAIN CARD ================= */

.email-main-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.email-main-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.email-main-card::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.email-main-card > * {
  position: relative;
  z-index: 2;
}

.email-main-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.email-main-icon i {
  font-size: 31px;
}

.email-main-card > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.email-main-card h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.email-main-card p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.email-main-list {
  display: grid;
  gap: 10px;
  margin-bottom: 26px;
}

.email-main-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px 13px;
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 800;
}

.email-main-item i {
  color: var(--accent);
  font-size: 16px;
  margin-top: 1px;
}

.email-main-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.email-main-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.email-main-btn i {
  transition: transform 0.3s ease;
}

.email-main-btn:hover i {
  transform: translateX(5px);
}

/* ================= CONTENT ================= */

.email-content {
  display: grid;
  gap: 18px;
}

.email-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.email-card {
  position: relative;
  min-height: 210px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.email-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.email-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.email-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.email-card-icon,
.email-card div {
  position: relative;
  z-index: 2;
}

.email-card-icon {
  width: 62px;
  height: 62px;
  margin-bottom: 18px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.email-card.active .email-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.email-card-icon i {
  font-size: 26px;
}

.email-card span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.email-card h3 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.email-card p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

/* ================= FORMAT BOX ================= */

.email-format-box {
  padding: 30px;
  border-radius: 30px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
}

.email-format-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 22px;
}

.email-format-icon {
  width: 68px;
  height: 68px;
  min-width: 68px;
  border-radius: 22px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.20);
  display: flex;
  align-items: center;
  justify-content: center;
}

.email-format-icon i {
  font-size: 30px;
}

.email-format-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.email-format-head h3 {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 950;
}

.email-format-head p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14.5px;
  line-height: 1.6;
  font-weight: 500;
}

.email-format-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.email-format-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 700;
}

.email-format-item i {
  color: var(--accent);
  font-size: 16px;
  margin-top: 2px;
}

/* ================= QUICK ROW ================= */

.email-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.email-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 112px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.email-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.email-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.email-quick-card div {
  position: relative;
  z-index: 2;
}

.email-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.email-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= NOTE ================= */

.email-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.email-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.email-note-icon i {
  font-size: 26px;
}

.email-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.email-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.email-card:hover,
.email-quick-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.email-card:hover::before,
.email-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.email-card:hover::after {
  transform: scaleX(1);
}

.email-card:hover h3,
.email-quick-card:hover h4 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .email-wrapper {
    grid-template-columns: 1fr;
  }

  .email-head h2 {
    font-size: 38px;
  }

  .email-main-card {
    min-height: auto;
  }

  .email-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .email-section {
    padding: 64px 0;
  }

  .email-head {
    margin-bottom: 36px;
  }

  .email-head h2 {
    font-size: 34px;
  }

  .email-main-card h3 {
    font-size: 28px;
  }

  .email-format-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .email-card-grid {
    grid-template-columns: 1fr;
  }

  .email-format-head {
    flex-direction: column;
  }
}

@media (max-width: 575px) {
  .email-section {
    padding: 52px 0;
  }

  .email-badge {
    font-size: 11.5px;
  }

  .email-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .email-head p {
    font-size: 14px;
  }

  .email-main-card {
    padding: 24px;
    border-radius: 24px;
  }

  .email-main-card h3 {
    font-size: 23px;
  }

  .email-main-card p {
    font-size: 14px;
  }

  .email-card {
    padding: 22px;
    border-radius: 24px;
  }

  .email-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .email-card h3 {
    font-size: 19px;
  }

  .email-card p {
    font-size: 13.5px;
  }

  .email-format-box {
    padding: 24px;
    border-radius: 24px;
  }

  .email-format-head h3 {
    font-size: 22px;
  }

  .email-quick-row {
    grid-template-columns: 1fr;
  }

  .email-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .email-head h2 {
    font-size: 25px;
  }

  .email-main-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .email-main-btn {
    width: 100%;
  }
}

/* ================= EMAIL SECTION CSS END ================= */



/* ================= OFFICE TIMING SECTION CSS START ================= */

.office-timing-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.office-timing-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.office-timing-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.office-timing-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.office-timing-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.office-timing-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.office-timing-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.office-timing-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.office-timing-head p {
  max-width: 710px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.office-timing-wrapper {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= MAIN CARD ================= */

.office-timing-main-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.office-timing-main-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.office-timing-main-card::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.office-timing-main-card > * {
  position: relative;
  z-index: 2;
}

.office-timing-main-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.office-timing-main-icon i {
  font-size: 31px;
}

.office-timing-main-card > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.office-timing-main-card h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.office-timing-main-card p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.office-timing-list {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
}

.office-timing-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.office-timing-item > i {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.office-timing-item h4 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
}

.office-timing-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.office-timing-main-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.office-timing-main-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.office-timing-main-btn i {
  transition: transform 0.3s ease;
}

.office-timing-main-btn:hover i {
  transform: translateX(5px);
}

/* ================= CONTENT ================= */

.office-timing-content {
  display: grid;
  gap: 18px;
}

.office-timing-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.office-timing-card {
  position: relative;
  min-height: 205px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.office-timing-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.office-timing-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.office-timing-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.office-timing-card-icon,
.office-timing-card div {
  position: relative;
  z-index: 2;
}

.office-timing-card-icon {
  width: 62px;
  height: 62px;
  margin-bottom: 18px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.office-timing-card.active .office-timing-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.office-timing-card-icon i {
  font-size: 26px;
}

.office-timing-card span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.office-timing-card h3 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.office-timing-card p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

/* ================= HOURS BOX ================= */

.office-hours-box {
  padding: 30px;
  border-radius: 30px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
}

.office-hours-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 22px;
}

.office-hours-icon {
  width: 68px;
  height: 68px;
  min-width: 68px;
  border-radius: 22px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.20);
  display: flex;
  align-items: center;
  justify-content: center;
}

.office-hours-icon i {
  font-size: 30px;
}

.office-hours-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.office-hours-head h3 {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 950;
}

.office-hours-head p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14.5px;
  line-height: 1.6;
  font-weight: 500;
}

.office-hours-table {
  display: grid;
  gap: 10px;
}

.office-hours-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.office-hours-row strong {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 950;
}

.office-hours-row span {
  color: rgba(255, 255, 255, 0.82);
  font-size: 13.5px;
  line-height: 1.2;
  font-weight: 750;
  text-align: right;
}

.office-hours-row.closed {
  background: rgba(181, 31, 42, 0.22);
  border-color: rgba(255, 255, 255, 0.16);
}

.office-hours-row.closed span {
  color: #ffffff;
}

/* ================= QUICK ROW ================= */

.office-timing-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.office-timing-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 112px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.office-timing-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.office-timing-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.office-timing-quick-card div {
  position: relative;
  z-index: 2;
}

.office-timing-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.office-timing-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= NOTE ================= */

.office-timing-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.office-timing-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.office-timing-note-icon i {
  font-size: 26px;
}

.office-timing-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.office-timing-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.office-timing-card:hover,
.office-timing-quick-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.office-timing-card:hover::before,
.office-timing-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.office-timing-card:hover::after {
  transform: scaleX(1);
}

.office-timing-card:hover h3,
.office-timing-quick-card:hover h4 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .office-timing-wrapper {
    grid-template-columns: 1fr;
  }

  .office-timing-head h2 {
    font-size: 38px;
  }

  .office-timing-main-card {
    min-height: auto;
  }

  .office-timing-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .office-timing-section {
    padding: 64px 0;
  }

  .office-timing-head {
    margin-bottom: 36px;
  }

  .office-timing-head h2 {
    font-size: 34px;
  }

  .office-timing-main-card h3 {
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  .office-timing-card-grid {
    grid-template-columns: 1fr;
  }

  .office-hours-head {
    flex-direction: column;
  }
}

@media (max-width: 575px) {
  .office-timing-section {
    padding: 52px 0;
  }

  .office-timing-badge {
    font-size: 11.5px;
  }

  .office-timing-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .office-timing-head p {
    font-size: 14px;
  }

  .office-timing-main-card {
    padding: 24px;
    border-radius: 24px;
  }

  .office-timing-main-card h3 {
    font-size: 23px;
  }

  .office-timing-main-card p {
    font-size: 14px;
  }

  .office-timing-item {
    grid-template-columns: 1fr;
  }

  .office-timing-card {
    padding: 22px;
    border-radius: 24px;
  }

  .office-timing-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .office-timing-card h3 {
    font-size: 19px;
  }

  .office-timing-card p {
    font-size: 13.5px;
  }

  .office-hours-box {
    padding: 24px;
    border-radius: 24px;
  }

  .office-hours-head h3 {
    font-size: 22px;
  }

  .office-hours-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .office-hours-row span {
    text-align: left;
  }

  .office-timing-quick-row {
    grid-template-columns: 1fr;
  }

  .office-timing-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .office-timing-head h2 {
    font-size: 25px;
  }

  .office-timing-main-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .office-timing-main-btn {
    width: 100%;
  }
}

/* ================= OFFICE TIMING SECTION CSS END ================= */




/* ================= GOOGLE MAP SECTION CSS START ================= */

.google-map-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.google-map-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.google-map-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.google-map-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.google-map-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.google-map-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.google-map-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.google-map-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.google-map-head p {
  max-width: 710px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.google-map-wrapper {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= INFO CARD ================= */

.google-map-info-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.google-map-info-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.google-map-info-card::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.google-map-info-card > * {
  position: relative;
  z-index: 2;
}

.google-map-info-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.google-map-info-icon i {
  font-size: 31px;
}

.google-map-info-card > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.google-map-info-card h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.google-map-info-card p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.google-map-info-list {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
}

.google-map-info-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.google-map-info-item > i {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.google-map-info-item h4 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
}

.google-map-info-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.google-map-main-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.google-map-main-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.google-map-main-btn i {
  transition: transform 0.3s ease;
}

.google-map-main-btn:hover i {
  transform: translateX(5px);
}

/* ================= MAP BOX ================= */

.google-map-box {
  position: relative;
  min-height: 560px;
  padding: 14px;
  border-radius: 34px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 18px 50px rgba(13, 45, 85, 0.11);
  overflow: hidden;
}

.google-map-box::before {
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  z-index: 1;
  pointer-events: none;
}

.google-map-frame {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  min-height: 532px;
  border-radius: 26px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(23, 63, 115, 0.08), rgba(181, 31, 42, 0.06)),
    #eef4fb;
}

.google-map-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 532px;
  filter: saturate(1.05) contrast(1.02);
}

.google-map-overlay-card {
  position: absolute;
  left: 36px;
  right: 36px;
  bottom: 36px;
  z-index: 4;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  align-items: center;
  padding: 20px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(220, 229, 240, 0.85);
  box-shadow: 0 18px 45px rgba(13, 45, 85, 0.16);
  backdrop-filter: blur(16px);
}

.google-map-overlay-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.google-map-overlay-icon i {
  font-size: 27px;
}

.google-map-overlay-card span {
  display: inline-flex;
  margin-bottom: 7px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.google-map-overlay-card h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.google-map-overlay-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= QUICK ROW ================= */

.google-map-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.google-map-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 112px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.google-map-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.google-map-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.google-map-quick-card div {
  position: relative;
  z-index: 2;
}

.google-map-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.google-map-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= NOTE ================= */

.google-map-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.google-map-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.google-map-note-icon i {
  font-size: 26px;
}

.google-map-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.google-map-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.google-map-quick-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.google-map-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.google-map-quick-card:hover h4 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .google-map-wrapper {
    grid-template-columns: 1fr;
  }

  .google-map-head h2 {
    font-size: 38px;
  }

  .google-map-info-card {
    min-height: auto;
  }

  .google-map-box {
    min-height: 500px;
  }

  .google-map-frame,
  .google-map-frame iframe {
    min-height: 472px;
  }

  .google-map-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .google-map-section {
    padding: 64px 0;
  }

  .google-map-head {
    margin-bottom: 36px;
  }

  .google-map-head h2 {
    font-size: 34px;
  }

  .google-map-info-card h3 {
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  .google-map-box {
    min-height: 440px;
    padding: 10px;
    border-radius: 28px;
  }

  .google-map-frame,
  .google-map-frame iframe {
    min-height: 420px;
    border-radius: 22px;
  }

  .google-map-overlay-card {
    left: 22px;
    right: 22px;
    bottom: 22px;
  }
}

@media (max-width: 575px) {
  .google-map-section {
    padding: 52px 0;
  }

  .google-map-badge {
    font-size: 11.5px;
  }

  .google-map-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .google-map-head p {
    font-size: 14px;
  }

  .google-map-info-card {
    padding: 24px;
    border-radius: 24px;
  }

  .google-map-info-card h3 {
    font-size: 23px;
  }

  .google-map-info-card p {
    font-size: 14px;
  }

  .google-map-info-item {
    grid-template-columns: 1fr;
  }

  .google-map-box {
    min-height: 390px;
    border-radius: 24px;
  }

  .google-map-frame,
  .google-map-frame iframe {
    min-height: 370px;
    border-radius: 18px;
  }

  .google-map-overlay-card {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin-top: 12px;
    grid-template-columns: 1fr;
    border-radius: 20px;
  }

  .google-map-box {
    overflow: visible;
  }

  .google-map-quick-row {
    grid-template-columns: 1fr;
  }

  .google-map-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .google-map-head h2 {
    font-size: 25px;
  }

  .google-map-info-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .google-map-main-btn {
    width: 100%;
  }

  .google-map-box {
    min-height: 350px;
  }

  .google-map-frame,
  .google-map-frame iframe {
    min-height: 330px;
  }
}

/* ================= GOOGLE MAP SECTION CSS END ================= */




/* ================= CONTACT FORM SECTION CSS START ================= */

.contact-form-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.contact-form-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.contact-form-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.contact-form-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.contact-form-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.contact-form-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.contact-form-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.contact-form-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.contact-form-head p {
  max-width: 710px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.contact-form-wrapper {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= INFO CARD ================= */

.contact-form-info-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.contact-form-info-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.contact-form-info-card::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.contact-form-info-card > * {
  position: relative;
  z-index: 2;
}

.contact-form-info-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.contact-form-info-icon i {
  font-size: 31px;
}

.contact-form-info-card > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.contact-form-info-card h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.contact-form-info-card p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.contact-form-info-list {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
}

.contact-form-info-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.contact-form-info-item > i {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.contact-form-info-item h4 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
}

.contact-form-info-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.contact-form-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.contact-form-info-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.contact-form-info-btn i {
  transition: transform 0.3s ease;
}

.contact-form-info-btn:hover i {
  transform: translateX(5px);
}

/* ================= FORM CARD ================= */

.contact-form-card {
  position: relative;
  padding: 30px;
  border-radius: 34px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border);
  box-shadow: 0 18px 50px rgba(13, 45, 85, 0.11);
  overflow: hidden;
}

.contact-form-card::before {
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
}

.contact-form {
  position: relative;
  z-index: 2;
}

.contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.contact-field {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.contact-field label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--primary-dark);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
}

.contact-field label i {
  color: var(--secondary);
  font-size: 14px;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;
  min-height: 54px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #ffffff;
  color: var(--dark);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 650;
  outline: none;
  transition: all 0.3s ease;
}

.contact-field textarea {
  min-height: 150px;
  resize: vertical;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: var(--muted);
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  border-color: rgba(23, 63, 115, 0.35);
  box-shadow: 0 0 0 4px rgba(23, 63, 115, 0.08);
}

/* ================= CHECK ================= */

.contact-form-check-row {
  margin-top: 2px;
  margin-bottom: 22px;
}

.contact-form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: fit-content;
  cursor: pointer;
}

.contact-form-check input {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-top: 2px;
  accent-color: var(--primary);
}

.contact-form-check span {
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 650;
}

/* ================= ACTIONS ================= */

.contact-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.contact-reset-btn,
.contact-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border: 0;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact-reset-btn {
  color: var(--primary);
  background: var(--soft-blue);
}

.contact-submit-btn {
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 30px rgba(13, 45, 85, 0.22);
}

.contact-reset-btn:hover,
.contact-submit-btn:hover {
  transform: translateY(-3px);
}

/* ================= QUICK ROW ================= */

.contact-form-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.contact-form-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 112px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.contact-form-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.contact-form-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.contact-form-quick-card div {
  position: relative;
  z-index: 2;
}

.contact-form-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.contact-form-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= NOTE ================= */

.contact-form-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.contact-form-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.contact-form-note-icon i {
  font-size: 26px;
}

.contact-form-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.contact-form-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.contact-form-quick-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.contact-form-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.contact-form-quick-card:hover h4 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .contact-form-wrapper {
    grid-template-columns: 1fr;
  }

  .contact-form-head h2 {
    font-size: 38px;
  }

  .contact-form-info-card {
    min-height: auto;
  }

  .contact-form-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .contact-form-section {
    padding: 64px 0;
  }

  .contact-form-head {
    margin-bottom: 36px;
  }

  .contact-form-head h2 {
    font-size: 34px;
  }

  .contact-form-info-card h3 {
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  .contact-form-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .contact-form-card {
    padding: 24px;
    border-radius: 28px;
  }

  .contact-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .contact-reset-btn,
  .contact-submit-btn {
    width: 100%;
  }
}

@media (max-width: 575px) {
  .contact-form-section {
    padding: 52px 0;
  }

  .contact-form-badge {
    font-size: 11.5px;
  }

  .contact-form-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .contact-form-head p {
    font-size: 14px;
  }

  .contact-form-info-card {
    padding: 24px;
    border-radius: 24px;
  }

  .contact-form-info-card h3 {
    font-size: 23px;
  }

  .contact-form-info-card p {
    font-size: 14px;
  }

  .contact-form-info-item {
    grid-template-columns: 1fr;
  }

  .contact-form-card {
    padding: 20px;
    border-radius: 24px;
  }

  .contact-field input,
  .contact-field select,
  .contact-field textarea {
    min-height: 50px;
    border-radius: 15px;
    font-size: 13.5px;
  }

  .contact-field textarea {
    min-height: 135px;
  }

  .contact-form-quick-row {
    grid-template-columns: 1fr;
  }

  .contact-form-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .contact-form-head h2 {
    font-size: 25px;
  }

  .contact-form-info-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .contact-form-info-btn {
    width: 100%;
  }
}

/* ================= CONTACT FORM SECTION CSS END ================= */




/* ================= DEPARTMENT / OFFICE CONTACTS SECTION CSS START ================= */

.department-contact-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.department-contact-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.department-contact-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.department-contact-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.department-contact-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.department-contact-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.department-contact-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.department-contact-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.department-contact-head p {
  max-width: 710px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.department-contact-wrapper {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= INFO CARD ================= */

.department-contact-info-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.department-contact-info-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.department-contact-info-card::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.department-contact-info-card > * {
  position: relative;
  z-index: 2;
}

.department-contact-info-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.department-contact-info-icon i {
  font-size: 31px;
}

.department-contact-info-card > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.department-contact-info-card h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.department-contact-info-card p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.department-contact-info-list {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
}

.department-contact-info-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.department-contact-info-item > i {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.department-contact-info-item h4 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
}

.department-contact-info-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.department-contact-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.department-contact-info-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.department-contact-info-btn i {
  transition: transform 0.3s ease;
}

.department-contact-info-btn:hover i {
  transform: translateX(5px);
}

/* ================= GRID ================= */

.department-contact-content {
  display: grid;
}

.department-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.department-contact-card {
  position: relative;
  min-height: 245px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.department-contact-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.department-contact-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.department-contact-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.department-contact-card-icon,
.department-contact-card-content {
  position: relative;
  z-index: 2;
}

.department-contact-card-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.department-contact-card.active .department-contact-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.department-contact-card-icon i {
  font-size: 26px;
}

.department-contact-card-content > span {
  display: inline-flex;
  margin-bottom: 9px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.department-contact-card-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.department-contact-card-content p {
  margin: 0 0 17px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.department-contact-meta {
  display: grid;
  gap: 8px;
}

.department-contact-meta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 850;
  word-break: break-word;
  transition: all 0.3s ease;
}

.department-contact-meta a i {
  color: var(--secondary);
  font-size: 13px;
}

.department-contact-meta a:hover {
  color: var(--primary);
  transform: translateX(3px);
}

/* ================= TABLE CARD ================= */

.department-contact-table-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.department-contact-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.department-contact-table-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.department-contact-table-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.department-contact-table-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.department-contact-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.department-contact-table-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.department-contact-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.department-contact-table {
  width: 100%;
  min-width: 880px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.department-contact-table thead th {
  padding: 0 16px 8px;
  color: var(--primary-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.department-contact-table tbody tr {
  background: var(--light-bg);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.04);
}

.department-contact-table tbody td {
  padding: 16px;
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 750;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.department-contact-table tbody td:first-child {
  border-left: 1px solid var(--border);
  border-radius: 16px 0 0 16px;
  color: var(--primary-dark);
  font-weight: 950;
}

.department-contact-table tbody td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 16px 16px 0;
}

.contact-status {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.contact-status.active {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.contact-status.pending {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

/* ================= QUICK ROW ================= */

.department-contact-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.department-contact-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 112px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.department-contact-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.department-contact-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.department-contact-quick-card div {
  position: relative;
  z-index: 2;
}

.department-contact-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.department-contact-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= NOTE ================= */

.department-contact-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.department-contact-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.department-contact-note-icon i {
  font-size: 26px;
}

.department-contact-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.department-contact-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.department-contact-card:hover,
.department-contact-quick-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.department-contact-card:hover::before,
.department-contact-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.department-contact-card:hover::after {
  transform: scaleX(1);
}

.department-contact-card:hover .department-contact-card-content h3,
.department-contact-quick-card:hover h4 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .department-contact-wrapper {
    grid-template-columns: 1fr;
  }

  .department-contact-head h2 {
    font-size: 38px;
  }

  .department-contact-info-card {
    min-height: auto;
  }

  .department-contact-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .department-contact-section {
    padding: 64px 0;
  }

  .department-contact-head {
    margin-bottom: 36px;
  }

  .department-contact-head h2 {
    font-size: 34px;
  }

  .department-contact-info-card h3 {
    font-size: 28px;
  }

  .department-contact-table-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .department-contact-grid {
    grid-template-columns: 1fr;
  }

  .department-contact-card {
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .department-contact-section {
    padding: 52px 0;
  }

  .department-contact-badge {
    font-size: 11.5px;
  }

  .department-contact-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .department-contact-head p {
    font-size: 14px;
  }

  .department-contact-info-card {
    padding: 24px;
    border-radius: 24px;
  }

  .department-contact-info-card h3 {
    font-size: 23px;
  }

  .department-contact-info-card p {
    font-size: 14px;
  }

  .department-contact-info-item {
    grid-template-columns: 1fr;
  }

  .department-contact-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .department-contact-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .department-contact-card-content h3 {
    font-size: 19px;
  }

  .department-contact-card-content p {
    font-size: 13.5px;
  }

  .department-contact-meta a {
    width: 100%;
  }

  .department-contact-table-card {
    padding: 20px;
    border-radius: 24px;
  }

  .department-contact-table-head h3 {
    font-size: 21px;
  }

  .department-contact-table-btn {
    width: 100%;
  }

  .department-contact-quick-row {
    grid-template-columns: 1fr;
  }

  .department-contact-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .department-contact-head h2 {
    font-size: 25px;
  }

  .department-contact-info-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .department-contact-info-btn {
    width: 100%;
  }
}

/* ================= DEPARTMENT / OFFICE CONTACTS SECTION CSS END ================= */







/* ================= RTI SECTION CSS START ================= */

.rti-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.rti-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.rti-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.rti-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.rti-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.rti-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.rti-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.rti-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.rti-head p {
  max-width: 710px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.rti-wrapper {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= INFO CARD ================= */

.rti-info-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.rti-info-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.rti-info-card::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.rti-info-card > * {
  position: relative;
  z-index: 2;
}

.rti-info-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.rti-info-icon i {
  font-size: 31px;
}

.rti-info-card > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.rti-info-card h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.rti-info-card p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.rti-info-list {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
}

.rti-info-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.rti-info-item > i {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.rti-info-item h4 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
}

.rti-info-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.rti-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.rti-info-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.rti-info-btn i {
  transition: transform 0.3s ease;
}

.rti-info-btn:hover i {
  transform: translateX(5px);
}

/* ================= GRID ================= */

.rti-content {
  display: grid;
}

.rti-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.rti-card {
  position: relative;
  min-height: 245px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.rti-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.rti-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.rti-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.rti-card-icon,
.rti-card-content {
  position: relative;
  z-index: 2;
}

.rti-card-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.rti-card.active .rti-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.rti-card-icon i {
  font-size: 26px;
}

.rti-card-content > span {
  display: inline-flex;
  margin-bottom: 9px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.rti-card-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.rti-card-content p {
  margin: 0 0 17px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.rti-meta {
  display: grid;
  gap: 8px;
}

.rti-meta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 850;
  word-break: break-word;
  transition: all 0.3s ease;
}

.rti-meta a i {
  color: var(--secondary);
  font-size: 13px;
}

.rti-meta a:hover {
  color: var(--primary);
  transform: translateX(3px);
}

/* ================= PROCESS ROW ================= */

.rti-process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.rti-process-card {
  position: relative;
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
}

.rti-process-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
}

.rti-process-card span {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 950;
}

.rti-process-card h4 {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

.rti-process-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

/* ================= TABLE CARD ================= */

.rti-table-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.rti-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.rti-table-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.rti-table-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.rti-table-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.rti-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.rti-table-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.rti-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.rti-table {
  width: 100%;
  min-width: 820px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.rti-table thead th {
  padding: 0 16px 8px;
  color: var(--primary-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rti-table tbody tr {
  background: var(--light-bg);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.04);
}

.rti-table tbody td {
  padding: 16px;
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 750;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.rti-table tbody td:first-child {
  border-left: 1px solid var(--border);
  border-radius: 16px 0 0 16px;
  color: var(--primary-dark);
  font-weight: 950;
}

.rti-table tbody td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 16px 16px 0;
}

.rti-table td a {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
}

.rti-status {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.rti-status.active {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.rti-status.pending {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

/* ================= QUICK ROW ================= */

.rti-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.rti-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 112px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.rti-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.rti-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.rti-quick-card div {
  position: relative;
  z-index: 2;
}

.rti-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.rti-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= NOTE ================= */

.rti-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.rti-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.rti-note-icon i {
  font-size: 26px;
}

.rti-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.rti-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.rti-card:hover,
.rti-quick-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.rti-card:hover::before,
.rti-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.rti-card:hover::after {
  transform: scaleX(1);
}

.rti-card:hover .rti-card-content h3,
.rti-quick-card:hover h4 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .rti-wrapper {
    grid-template-columns: 1fr;
  }

  .rti-head h2 {
    font-size: 38px;
  }

  .rti-info-card {
    min-height: auto;
  }

  .rti-process-row,
  .rti-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .rti-section {
    padding: 64px 0;
  }

  .rti-head {
    margin-bottom: 36px;
  }

  .rti-head h2 {
    font-size: 34px;
  }

  .rti-info-card h3 {
    font-size: 28px;
  }

  .rti-table-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .rti-grid {
    grid-template-columns: 1fr;
  }

  .rti-card {
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .rti-section {
    padding: 52px 0;
  }

  .rti-badge {
    font-size: 11.5px;
  }

  .rti-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .rti-head p {
    font-size: 14px;
  }

  .rti-info-card {
    padding: 24px;
    border-radius: 24px;
  }

  .rti-info-card h3 {
    font-size: 23px;
  }

  .rti-info-card p {
    font-size: 14px;
  }

  .rti-info-item {
    grid-template-columns: 1fr;
  }

  .rti-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .rti-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .rti-card-content h3 {
    font-size: 19px;
  }

  .rti-card-content p {
    font-size: 13.5px;
  }

  .rti-meta a {
    width: 100%;
  }

  .rti-process-row,
  .rti-quick-row {
    grid-template-columns: 1fr;
  }

  .rti-table-card {
    padding: 20px;
    border-radius: 24px;
  }

  .rti-table-head h3 {
    font-size: 21px;
  }

  .rti-table-btn {
    width: 100%;
  }

  .rti-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .rti-head h2 {
    font-size: 25px;
  }

  .rti-info-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .rti-info-btn {
    width: 100%;
  }
}

/* ================= RTI SECTION CSS END ================= */





/* ================= MANDATORY AFFILIATION SECTION CSS START ================= */

.mandatory-affiliation-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.mandatory-affiliation-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.mandatory-affiliation-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.mandatory-affiliation-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.mandatory-affiliation-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.mandatory-affiliation-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.mandatory-affiliation-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.mandatory-affiliation-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.mandatory-affiliation-head p {
  max-width: 710px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.mandatory-affiliation-wrapper {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= INFO CARD ================= */

.mandatory-affiliation-info-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.mandatory-affiliation-info-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.mandatory-affiliation-info-card::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.mandatory-affiliation-info-card > * {
  position: relative;
  z-index: 2;
}

.mandatory-affiliation-info-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.mandatory-affiliation-info-icon i {
  font-size: 31px;
}

.mandatory-affiliation-info-card > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.mandatory-affiliation-info-card h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.mandatory-affiliation-info-card p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.mandatory-affiliation-info-list {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
}

.mandatory-affiliation-info-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.mandatory-affiliation-info-item > i {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.mandatory-affiliation-info-item h4 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
}

.mandatory-affiliation-info-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.mandatory-affiliation-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.mandatory-affiliation-info-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.mandatory-affiliation-info-btn i {
  transition: transform 0.3s ease;
}

.mandatory-affiliation-info-btn:hover i {
  transform: translateX(5px);
}

/* ================= GRID ================= */

.mandatory-affiliation-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.mandatory-affiliation-card {
  position: relative;
  min-height: 245px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.mandatory-affiliation-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.mandatory-affiliation-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.mandatory-affiliation-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.mandatory-affiliation-card-icon,
.mandatory-affiliation-card-content {
  position: relative;
  z-index: 2;
}

.mandatory-affiliation-card-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mandatory-affiliation-card.active .mandatory-affiliation-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.mandatory-affiliation-card-icon i {
  font-size: 26px;
}

.mandatory-affiliation-card-content > span {
  display: inline-flex;
  margin-bottom: 9px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.mandatory-affiliation-card-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.mandatory-affiliation-card-content p {
  margin: 0 0 17px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.mandatory-affiliation-meta {
  display: grid;
  gap: 8px;
}

.mandatory-affiliation-meta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 850;
  transition: all 0.3s ease;
}

.mandatory-affiliation-meta a i {
  color: var(--secondary);
  font-size: 13px;
}

.mandatory-affiliation-meta a:hover {
  color: var(--primary);
  transform: translateX(3px);
}

/* ================= PROCESS ================= */

.mandatory-affiliation-process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.mandatory-affiliation-process-card {
  position: relative;
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
}

.mandatory-affiliation-process-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
}

.mandatory-affiliation-process-card span {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 950;
}

.mandatory-affiliation-process-card h4 {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

.mandatory-affiliation-process-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

/* ================= TABLE ================= */

.mandatory-affiliation-table-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.mandatory-affiliation-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.mandatory-affiliation-table-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.mandatory-affiliation-table-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.mandatory-affiliation-table-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.mandatory-affiliation-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.mandatory-affiliation-table-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.mandatory-affiliation-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.mandatory-affiliation-table {
  width: 100%;
  min-width: 850px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.mandatory-affiliation-table thead th {
  padding: 0 16px 8px;
  color: var(--primary-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mandatory-affiliation-table tbody tr {
  background: var(--light-bg);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.04);
}

.mandatory-affiliation-table tbody td {
  padding: 16px;
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 750;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.mandatory-affiliation-table tbody td:first-child {
  border-left: 1px solid var(--border);
  border-radius: 16px 0 0 16px;
  color: var(--primary-dark);
  font-weight: 950;
}

.mandatory-affiliation-table tbody td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 16px 16px 0;
}

.mandatory-affiliation-table td a {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
}

.mandatory-affiliation-status {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.mandatory-affiliation-status.active {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.mandatory-affiliation-status.pending {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

/* ================= QUICK ROW ================= */

.mandatory-affiliation-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.mandatory-affiliation-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 112px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.mandatory-affiliation-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.mandatory-affiliation-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.mandatory-affiliation-quick-card div {
  position: relative;
  z-index: 2;
}

.mandatory-affiliation-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.mandatory-affiliation-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= NOTE ================= */

.mandatory-affiliation-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.mandatory-affiliation-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.mandatory-affiliation-note-icon i {
  font-size: 26px;
}

.mandatory-affiliation-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.mandatory-affiliation-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.mandatory-affiliation-card:hover,
.mandatory-affiliation-quick-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.mandatory-affiliation-card:hover::before,
.mandatory-affiliation-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.mandatory-affiliation-card:hover::after {
  transform: scaleX(1);
}

.mandatory-affiliation-card:hover .mandatory-affiliation-card-content h3,
.mandatory-affiliation-quick-card:hover h4 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .mandatory-affiliation-wrapper {
    grid-template-columns: 1fr;
  }

  .mandatory-affiliation-head h2 {
    font-size: 38px;
  }

  .mandatory-affiliation-info-card {
    min-height: auto;
  }

  .mandatory-affiliation-process-row,
  .mandatory-affiliation-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .mandatory-affiliation-section {
    padding: 64px 0;
  }

  .mandatory-affiliation-head {
    margin-bottom: 36px;
  }

  .mandatory-affiliation-head h2 {
    font-size: 34px;
  }

  .mandatory-affiliation-info-card h3 {
    font-size: 28px;
  }

  .mandatory-affiliation-table-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .mandatory-affiliation-grid {
    grid-template-columns: 1fr;
  }

  .mandatory-affiliation-card {
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .mandatory-affiliation-section {
    padding: 52px 0;
  }

  .mandatory-affiliation-badge {
    font-size: 11.5px;
  }

  .mandatory-affiliation-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .mandatory-affiliation-head p {
    font-size: 14px;
  }

  .mandatory-affiliation-info-card {
    padding: 24px;
    border-radius: 24px;
  }

  .mandatory-affiliation-info-card h3 {
    font-size: 23px;
  }

  .mandatory-affiliation-info-card p {
    font-size: 14px;
  }

  .mandatory-affiliation-info-item {
    grid-template-columns: 1fr;
  }

  .mandatory-affiliation-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .mandatory-affiliation-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .mandatory-affiliation-card-content h3 {
    font-size: 19px;
  }

  .mandatory-affiliation-card-content p {
    font-size: 13.5px;
  }

  .mandatory-affiliation-meta a {
    width: 100%;
  }

  .mandatory-affiliation-process-row,
  .mandatory-affiliation-quick-row {
    grid-template-columns: 1fr;
  }

  .mandatory-affiliation-table-card {
    padding: 20px;
    border-radius: 24px;
  }

  .mandatory-affiliation-table-head h3 {
    font-size: 21px;
  }

  .mandatory-affiliation-table-btn {
    width: 100%;
  }

  .mandatory-affiliation-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .mandatory-affiliation-head h2 {
    font-size: 25px;
  }

  .mandatory-affiliation-info-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .mandatory-affiliation-info-btn {
    width: 100%;
  }
}

/* ================= MANDATORY AFFILIATION SECTION CSS END ================= */



/* ================= UNIVERSITY AFFILIATION SECTION CSS START ================= */

.university-affiliation-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.university-affiliation-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.university-affiliation-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.university-affiliation-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.university-affiliation-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.university-affiliation-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.university-affiliation-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.university-affiliation-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.university-affiliation-head p {
  max-width: 710px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.university-affiliation-wrapper {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= INFO CARD ================= */

.university-affiliation-info-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.university-affiliation-info-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.university-affiliation-info-card::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.university-affiliation-info-card > * {
  position: relative;
  z-index: 2;
}

.university-affiliation-info-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.university-affiliation-info-icon i {
  font-size: 31px;
}

.university-affiliation-info-card > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.university-affiliation-info-card h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.university-affiliation-info-card p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.university-affiliation-info-list {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
}

.university-affiliation-info-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.university-affiliation-info-item > i {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.university-affiliation-info-item h4 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
}

.university-affiliation-info-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.university-affiliation-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.university-affiliation-info-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.university-affiliation-info-btn i {
  transition: transform 0.3s ease;
}

.university-affiliation-info-btn:hover i {
  transform: translateX(5px);
}

/* ================= GRID ================= */

.university-affiliation-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.university-affiliation-card {
  position: relative;
  min-height: 245px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.university-affiliation-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.university-affiliation-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.university-affiliation-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.university-affiliation-card-icon,
.university-affiliation-card-content {
  position: relative;
  z-index: 2;
}

.university-affiliation-card-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.university-affiliation-card.active .university-affiliation-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.university-affiliation-card-icon i {
  font-size: 26px;
}

.university-affiliation-card-content > span {
  display: inline-flex;
  margin-bottom: 9px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.university-affiliation-card-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.university-affiliation-card-content p {
  margin: 0 0 17px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.university-affiliation-meta {
  display: grid;
  gap: 8px;
}

.university-affiliation-meta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 850;
  transition: all 0.3s ease;
}

.university-affiliation-meta a i {
  color: var(--secondary);
  font-size: 13px;
}

.university-affiliation-meta a:hover {
  color: var(--primary);
  transform: translateX(3px);
}

/* ================= PROCESS ================= */

.university-affiliation-process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.university-affiliation-process-card {
  position: relative;
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
}

.university-affiliation-process-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
}

.university-affiliation-process-card span {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 950;
}

.university-affiliation-process-card h4 {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

.university-affiliation-process-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

/* ================= TABLE ================= */

.university-affiliation-table-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.university-affiliation-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.university-affiliation-table-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.university-affiliation-table-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.university-affiliation-table-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.university-affiliation-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.university-affiliation-table-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.university-affiliation-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.university-affiliation-table {
  width: 100%;
  min-width: 850px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.university-affiliation-table thead th {
  padding: 0 16px 8px;
  color: var(--primary-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.university-affiliation-table tbody tr {
  background: var(--light-bg);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.04);
}

.university-affiliation-table tbody td {
  padding: 16px;
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 750;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.university-affiliation-table tbody td:first-child {
  border-left: 1px solid var(--border);
  border-radius: 16px 0 0 16px;
  color: var(--primary-dark);
  font-weight: 950;
}

.university-affiliation-table tbody td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 16px 16px 0;
}

.university-affiliation-table td a {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
}

.university-affiliation-status {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.university-affiliation-status.active {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.university-affiliation-status.pending {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

/* ================= QUICK ROW ================= */

.university-affiliation-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.university-affiliation-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 112px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.university-affiliation-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.university-affiliation-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.university-affiliation-quick-card div {
  position: relative;
  z-index: 2;
}

.university-affiliation-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.university-affiliation-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= NOTE ================= */

.university-affiliation-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.university-affiliation-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.university-affiliation-note-icon i {
  font-size: 26px;
}

.university-affiliation-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.university-affiliation-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.university-affiliation-card:hover,
.university-affiliation-quick-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.university-affiliation-card:hover::before,
.university-affiliation-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.university-affiliation-card:hover::after {
  transform: scaleX(1);
}

.university-affiliation-card:hover .university-affiliation-card-content h3,
.university-affiliation-quick-card:hover h4 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .university-affiliation-wrapper {
    grid-template-columns: 1fr;
  }

  .university-affiliation-head h2 {
    font-size: 38px;
  }

  .university-affiliation-info-card {
    min-height: auto;
  }

  .university-affiliation-process-row,
  .university-affiliation-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .university-affiliation-section {
    padding: 64px 0;
  }

  .university-affiliation-head {
    margin-bottom: 36px;
  }

  .university-affiliation-head h2 {
    font-size: 34px;
  }

  .university-affiliation-info-card h3 {
    font-size: 28px;
  }

  .university-affiliation-table-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .university-affiliation-grid {
    grid-template-columns: 1fr;
  }

  .university-affiliation-card {
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .university-affiliation-section {
    padding: 52px 0;
  }

  .university-affiliation-badge {
    font-size: 11.5px;
  }

  .university-affiliation-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .university-affiliation-head p {
    font-size: 14px;
  }

  .university-affiliation-info-card {
    padding: 24px;
    border-radius: 24px;
  }

  .university-affiliation-info-card h3 {
    font-size: 23px;
  }

  .university-affiliation-info-card p {
    font-size: 14px;
  }

  .university-affiliation-info-item {
    grid-template-columns: 1fr;
  }

  .university-affiliation-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .university-affiliation-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .university-affiliation-card-content h3 {
    font-size: 19px;
  }

  .university-affiliation-card-content p {
    font-size: 13.5px;
  }

  .university-affiliation-meta a {
    width: 100%;
  }

  .university-affiliation-process-row,
  .university-affiliation-quick-row {
    grid-template-columns: 1fr;
  }

  .university-affiliation-table-card {
    padding: 20px;
    border-radius: 24px;
  }

  .university-affiliation-table-head h3 {
    font-size: 21px;
  }

  .university-affiliation-table-btn {
    width: 100%;
  }

  .university-affiliation-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .university-affiliation-head h2 {
    font-size: 25px;
  }

  .university-affiliation-info-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .university-affiliation-info-btn {
    width: 100%;
  }
}

/* ================= UNIVERSITY AFFILIATION SECTION CSS END ================= */





/* ================= UGC / GOVERNMENT RECOGNITION SECTION CSS START ================= */

.ugc-recognition-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.ugc-recognition-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.ugc-recognition-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.ugc-recognition-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.ugc-recognition-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.ugc-recognition-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.ugc-recognition-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.ugc-recognition-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.ugc-recognition-head p {
  max-width: 710px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.ugc-recognition-wrapper {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= INFO CARD ================= */

.ugc-recognition-info-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.ugc-recognition-info-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.ugc-recognition-info-card::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.ugc-recognition-info-card > * {
  position: relative;
  z-index: 2;
}

.ugc-recognition-info-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.ugc-recognition-info-icon i {
  font-size: 31px;
}

.ugc-recognition-info-card > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.ugc-recognition-info-card h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.ugc-recognition-info-card p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.ugc-recognition-info-list {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
}

.ugc-recognition-info-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.ugc-recognition-info-item > i {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.ugc-recognition-info-item h4 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
}

.ugc-recognition-info-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.ugc-recognition-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.ugc-recognition-info-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.ugc-recognition-info-btn i {
  transition: transform 0.3s ease;
}

.ugc-recognition-info-btn:hover i {
  transform: translateX(5px);
}

/* ================= GRID ================= */

.ugc-recognition-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.ugc-recognition-card {
  position: relative;
  min-height: 245px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.ugc-recognition-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.ugc-recognition-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.ugc-recognition-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.ugc-recognition-card-icon,
.ugc-recognition-card-content {
  position: relative;
  z-index: 2;
}

.ugc-recognition-card-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ugc-recognition-card.active .ugc-recognition-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.ugc-recognition-card-icon i {
  font-size: 26px;
}

.ugc-recognition-card-content > span {
  display: inline-flex;
  margin-bottom: 9px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.ugc-recognition-card-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.ugc-recognition-card-content p {
  margin: 0 0 17px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.ugc-recognition-meta {
  display: grid;
  gap: 8px;
}

.ugc-recognition-meta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 850;
  transition: all 0.3s ease;
}

.ugc-recognition-meta a i {
  color: var(--secondary);
  font-size: 13px;
}

.ugc-recognition-meta a:hover {
  color: var(--primary);
  transform: translateX(3px);
}

/* ================= PROCESS ================= */

.ugc-recognition-process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.ugc-recognition-process-card {
  position: relative;
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
}

.ugc-recognition-process-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
}

.ugc-recognition-process-card span {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 950;
}

.ugc-recognition-process-card h4 {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

.ugc-recognition-process-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

/* ================= TABLE ================= */

.ugc-recognition-table-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.ugc-recognition-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.ugc-recognition-table-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.ugc-recognition-table-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.ugc-recognition-table-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.ugc-recognition-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.ugc-recognition-table-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.ugc-recognition-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.ugc-recognition-table {
  width: 100%;
  min-width: 850px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.ugc-recognition-table thead th {
  padding: 0 16px 8px;
  color: var(--primary-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ugc-recognition-table tbody tr {
  background: var(--light-bg);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.04);
}

.ugc-recognition-table tbody td {
  padding: 16px;
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 750;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.ugc-recognition-table tbody td:first-child {
  border-left: 1px solid var(--border);
  border-radius: 16px 0 0 16px;
  color: var(--primary-dark);
  font-weight: 950;
}

.ugc-recognition-table tbody td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 16px 16px 0;
}

.ugc-recognition-table td a {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
}

.ugc-recognition-status {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.ugc-recognition-status.active {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.ugc-recognition-status.pending {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

/* ================= QUICK ROW ================= */

.ugc-recognition-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.ugc-recognition-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 112px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.ugc-recognition-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.ugc-recognition-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.ugc-recognition-quick-card div {
  position: relative;
  z-index: 2;
}

.ugc-recognition-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.ugc-recognition-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= NOTE ================= */

.ugc-recognition-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.ugc-recognition-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.ugc-recognition-note-icon i {
  font-size: 26px;
}

.ugc-recognition-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.ugc-recognition-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.ugc-recognition-card:hover,
.ugc-recognition-quick-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.ugc-recognition-card:hover::before,
.ugc-recognition-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.ugc-recognition-card:hover::after {
  transform: scaleX(1);
}

.ugc-recognition-card:hover .ugc-recognition-card-content h3,
.ugc-recognition-quick-card:hover h4 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .ugc-recognition-wrapper {
    grid-template-columns: 1fr;
  }

  .ugc-recognition-head h2 {
    font-size: 38px;
  }

  .ugc-recognition-info-card {
    min-height: auto;
  }

  .ugc-recognition-process-row,
  .ugc-recognition-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .ugc-recognition-section {
    padding: 64px 0;
  }

  .ugc-recognition-head {
    margin-bottom: 36px;
  }

  .ugc-recognition-head h2 {
    font-size: 34px;
  }

  .ugc-recognition-info-card h3 {
    font-size: 28px;
  }

  .ugc-recognition-table-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .ugc-recognition-grid {
    grid-template-columns: 1fr;
  }

  .ugc-recognition-card {
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .ugc-recognition-section {
    padding: 52px 0;
  }

  .ugc-recognition-badge {
    font-size: 11.5px;
  }

  .ugc-recognition-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .ugc-recognition-head p {
    font-size: 14px;
  }

  .ugc-recognition-info-card {
    padding: 24px;
    border-radius: 24px;
  }

  .ugc-recognition-info-card h3 {
    font-size: 23px;
  }

  .ugc-recognition-info-card p {
    font-size: 14px;
  }

  .ugc-recognition-info-item {
    grid-template-columns: 1fr;
  }

  .ugc-recognition-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .ugc-recognition-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .ugc-recognition-card-content h3 {
    font-size: 19px;
  }

  .ugc-recognition-card-content p {
    font-size: 13.5px;
  }

  .ugc-recognition-meta a {
    width: 100%;
  }

  .ugc-recognition-process-row,
  .ugc-recognition-quick-row {
    grid-template-columns: 1fr;
  }

  .ugc-recognition-table-card {
    padding: 20px;
    border-radius: 24px;
  }

  .ugc-recognition-table-head h3 {
    font-size: 21px;
  }

  .ugc-recognition-table-btn {
    width: 100%;
  }

  .ugc-recognition-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .ugc-recognition-head h2 {
    font-size: 25px;
  }

  .ugc-recognition-info-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .ugc-recognition-info-btn {
    width: 100%;
  }
}

/* ================= UGC / GOVERNMENT RECOGNITION SECTION CSS END ================= */




/* ================= POLICIES SECTION CSS START ================= */

.policies-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.policies-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.policies-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.policies-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.policies-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.policies-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.policies-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.policies-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.policies-head p {
  max-width: 710px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.policies-wrapper {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= INFO CARD ================= */

.policies-info-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.policies-info-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.policies-info-card::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.policies-info-card > * {
  position: relative;
  z-index: 2;
}

.policies-info-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.policies-info-icon i {
  font-size: 31px;
}

.policies-info-card > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.policies-info-card h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.policies-info-card p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.policies-info-list {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
}

.policies-info-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.policies-info-item > i {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.policies-info-item h4 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
}

.policies-info-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.policies-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.policies-info-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.policies-info-btn i {
  transition: transform 0.3s ease;
}

.policies-info-btn:hover i {
  transform: translateX(5px);
}

/* ================= GRID ================= */

.policies-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.policies-card {
  position: relative;
  min-height: 245px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.policies-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.policies-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.policies-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.policies-card-icon,
.policies-card-content {
  position: relative;
  z-index: 2;
}

.policies-card-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.policies-card.active .policies-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.policies-card-icon i {
  font-size: 26px;
}

.policies-card-content > span {
  display: inline-flex;
  margin-bottom: 9px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.policies-card-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.policies-card-content p {
  margin: 0 0 17px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.policies-meta {
  display: grid;
  gap: 8px;
}

.policies-meta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 850;
  transition: all 0.3s ease;
}

.policies-meta a i {
  color: var(--secondary);
  font-size: 13px;
}

.policies-meta a:hover {
  color: var(--primary);
  transform: translateX(3px);
}

/* ================= PROCESS ================= */

.policies-process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.policies-process-card {
  position: relative;
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
}

.policies-process-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
}

.policies-process-card span {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 950;
}

.policies-process-card h4 {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

.policies-process-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

/* ================= TABLE ================= */

.policies-table-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.policies-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.policies-table-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.policies-table-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.policies-table-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.policies-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.policies-table-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.policies-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.policies-table {
  width: 100%;
  min-width: 850px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.policies-table thead th {
  padding: 0 16px 8px;
  color: var(--primary-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.policies-table tbody tr {
  background: var(--light-bg);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.04);
}

.policies-table tbody td {
  padding: 16px;
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 750;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.policies-table tbody td:first-child {
  border-left: 1px solid var(--border);
  border-radius: 16px 0 0 16px;
  color: var(--primary-dark);
  font-weight: 950;
}

.policies-table tbody td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 16px 16px 0;
}

.policies-table td a {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
}

.policies-status {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.policies-status.active {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.policies-status.pending {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

/* ================= QUICK ROW ================= */

.policies-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.policies-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 112px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.policies-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.policies-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.policies-quick-card div {
  position: relative;
  z-index: 2;
}

.policies-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.policies-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= NOTE ================= */

.policies-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.policies-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.policies-note-icon i {
  font-size: 26px;
}

.policies-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.policies-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.policies-card:hover,
.policies-quick-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.policies-card:hover::before,
.policies-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.policies-card:hover::after {
  transform: scaleX(1);
}

.policies-card:hover .policies-card-content h3,
.policies-quick-card:hover h4 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .policies-wrapper {
    grid-template-columns: 1fr;
  }

  .policies-head h2 {
    font-size: 38px;
  }

  .policies-info-card {
    min-height: auto;
  }

  .policies-process-row,
  .policies-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .policies-section {
    padding: 64px 0;
  }

  .policies-head {
    margin-bottom: 36px;
  }

  .policies-head h2 {
    font-size: 34px;
  }

  .policies-info-card h3 {
    font-size: 28px;
  }

  .policies-table-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .policies-grid {
    grid-template-columns: 1fr;
  }

  .policies-card {
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .policies-section {
    padding: 52px 0;
  }

  .policies-badge {
    font-size: 11.5px;
  }

  .policies-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .policies-head p {
    font-size: 14px;
  }

  .policies-info-card {
    padding: 24px;
    border-radius: 24px;
  }

  .policies-info-card h3 {
    font-size: 23px;
  }

  .policies-info-card p {
    font-size: 14px;
  }

  .policies-info-item {
    grid-template-columns: 1fr;
  }

  .policies-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .policies-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .policies-card-content h3 {
    font-size: 19px;
  }

  .policies-card-content p {
    font-size: 13.5px;
  }

  .policies-meta a {
    width: 100%;
  }

  .policies-process-row,
  .policies-quick-row {
    grid-template-columns: 1fr;
  }

  .policies-table-card {
    padding: 20px;
    border-radius: 24px;
  }

  .policies-table-head h3 {
    font-size: 21px;
  }

  .policies-table-btn {
    width: 100%;
  }

  .policies-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .policies-head h2 {
    font-size: 25px;
  }

  .policies-info-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .policies-info-btn {
    width: 100%;
  }
}

/* ================= POLICIES SECTION CSS END ================= */





/* ================= PROSPECTUS SECTION CSS START ================= */

.prospectus-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.prospectus-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.prospectus-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.prospectus-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.prospectus-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.prospectus-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.prospectus-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.prospectus-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.prospectus-head p {
  max-width: 710px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.prospectus-wrapper {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= INFO CARD ================= */

.prospectus-info-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.prospectus-info-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.prospectus-info-card::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.prospectus-info-card > * {
  position: relative;
  z-index: 2;
}

.prospectus-info-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.prospectus-info-icon i {
  font-size: 31px;
}

.prospectus-info-card > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.prospectus-info-card h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.prospectus-info-card p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.prospectus-info-list {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
}

.prospectus-info-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.prospectus-info-item > i {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.prospectus-info-item h4 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
}

.prospectus-info-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.prospectus-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.prospectus-info-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.prospectus-info-btn i {
  transition: transform 0.3s ease;
}

.prospectus-info-btn:hover i {
  transform: translateX(5px);
}

/* ================= GRID ================= */

.prospectus-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.prospectus-card {
  position: relative;
  min-height: 245px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.prospectus-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.prospectus-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.prospectus-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.prospectus-card-icon,
.prospectus-card-content {
  position: relative;
  z-index: 2;
}

.prospectus-card-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.prospectus-card.active .prospectus-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.prospectus-card-icon i {
  font-size: 26px;
}

.prospectus-card-content > span {
  display: inline-flex;
  margin-bottom: 9px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.prospectus-card-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.prospectus-card-content p {
  margin: 0 0 17px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.prospectus-meta {
  display: grid;
  gap: 8px;
}

.prospectus-meta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 850;
  transition: all 0.3s ease;
}

.prospectus-meta a i {
  color: var(--secondary);
  font-size: 13px;
}

.prospectus-meta a:hover {
  color: var(--primary);
  transform: translateX(3px);
}

/* ================= PROCESS ================= */

.prospectus-process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.prospectus-process-card {
  position: relative;
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
}

.prospectus-process-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
}

.prospectus-process-card span {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 950;
}

.prospectus-process-card h4 {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

.prospectus-process-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

/* ================= TABLE ================= */

.prospectus-table-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.prospectus-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.prospectus-table-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.prospectus-table-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.prospectus-table-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.prospectus-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.prospectus-table-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.prospectus-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.prospectus-table {
  width: 100%;
  min-width: 850px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.prospectus-table thead th {
  padding: 0 16px 8px;
  color: var(--primary-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.prospectus-table tbody tr {
  background: var(--light-bg);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.04);
}

.prospectus-table tbody td {
  padding: 16px;
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 750;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.prospectus-table tbody td:first-child {
  border-left: 1px solid var(--border);
  border-radius: 16px 0 0 16px;
  color: var(--primary-dark);
  font-weight: 950;
}

.prospectus-table tbody td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 16px 16px 0;
}

.prospectus-table td a {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
}

.prospectus-status {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.prospectus-status.active {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.prospectus-status.pending {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

/* ================= QUICK ROW ================= */

.prospectus-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.prospectus-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 112px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.prospectus-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.prospectus-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.prospectus-quick-card div {
  position: relative;
  z-index: 2;
}

.prospectus-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.prospectus-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= NOTE ================= */

.prospectus-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.prospectus-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.prospectus-note-icon i {
  font-size: 26px;
}

.prospectus-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.prospectus-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.prospectus-card:hover,
.prospectus-quick-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.prospectus-card:hover::before,
.prospectus-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.prospectus-card:hover::after {
  transform: scaleX(1);
}

.prospectus-card:hover .prospectus-card-content h3,
.prospectus-quick-card:hover h4 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .prospectus-wrapper {
    grid-template-columns: 1fr;
  }

  .prospectus-head h2 {
    font-size: 38px;
  }

  .prospectus-info-card {
    min-height: auto;
  }

  .prospectus-process-row,
  .prospectus-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .prospectus-section {
    padding: 64px 0;
  }

  .prospectus-head {
    margin-bottom: 36px;
  }

  .prospectus-head h2 {
    font-size: 34px;
  }

  .prospectus-info-card h3 {
    font-size: 28px;
  }

  .prospectus-table-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .prospectus-grid {
    grid-template-columns: 1fr;
  }

  .prospectus-card {
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .prospectus-section {
    padding: 52px 0;
  }

  .prospectus-badge {
    font-size: 11.5px;
  }

  .prospectus-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .prospectus-head p {
    font-size: 14px;
  }

  .prospectus-info-card {
    padding: 24px;
    border-radius: 24px;
  }

  .prospectus-info-card h3 {
    font-size: 23px;
  }

  .prospectus-info-card p {
    font-size: 14px;
  }

  .prospectus-info-item {
    grid-template-columns: 1fr;
  }

  .prospectus-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .prospectus-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .prospectus-card-content h3 {
    font-size: 19px;
  }

  .prospectus-card-content p {
    font-size: 13.5px;
  }

  .prospectus-meta a {
    width: 100%;
  }

  .prospectus-process-row,
  .prospectus-quick-row {
    grid-template-columns: 1fr;
  }

  .prospectus-table-card {
    padding: 20px;
    border-radius: 24px;
  }

  .prospectus-table-head h3 {
    font-size: 21px;
  }

  .prospectus-table-btn {
    width: 100%;
  }

  .prospectus-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .prospectus-head h2 {
    font-size: 25px;
  }

  .prospectus-info-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .prospectus-info-btn {
    width: 100%;
  }
}

/* ================= PROSPECTUS SECTION CSS END ================= */




/* ================= ANNUAL / AUDIT REPORTS SECTION CSS START ================= */

.annual-audit-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.annual-audit-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.annual-audit-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.annual-audit-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.annual-audit-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.annual-audit-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.annual-audit-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.annual-audit-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.annual-audit-head p {
  max-width: 710px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.annual-audit-wrapper {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= INFO CARD ================= */

.annual-audit-info-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.annual-audit-info-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.annual-audit-info-card::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.annual-audit-info-card > * {
  position: relative;
  z-index: 2;
}

.annual-audit-info-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.annual-audit-info-icon i {
  font-size: 31px;
}

.annual-audit-info-card > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.annual-audit-info-card h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.annual-audit-info-card p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.annual-audit-info-list {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
}

.annual-audit-info-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.annual-audit-info-item > i {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.annual-audit-info-item h4 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
}

.annual-audit-info-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.annual-audit-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.annual-audit-info-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.annual-audit-info-btn i {
  transition: transform 0.3s ease;
}

.annual-audit-info-btn:hover i {
  transform: translateX(5px);
}

/* ================= GRID ================= */

.annual-audit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.annual-audit-card {
  position: relative;
  min-height: 245px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.annual-audit-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.annual-audit-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.annual-audit-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.annual-audit-card-icon,
.annual-audit-card-content {
  position: relative;
  z-index: 2;
}

.annual-audit-card-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.annual-audit-card.active .annual-audit-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.annual-audit-card-icon i {
  font-size: 26px;
}

.annual-audit-card-content > span {
  display: inline-flex;
  margin-bottom: 9px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.annual-audit-card-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.annual-audit-card-content p {
  margin: 0 0 17px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.annual-audit-meta {
  display: grid;
  gap: 8px;
}

.annual-audit-meta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 850;
  transition: all 0.3s ease;
}

.annual-audit-meta a i {
  color: var(--secondary);
  font-size: 13px;
}

.annual-audit-meta a:hover {
  color: var(--primary);
  transform: translateX(3px);
}

/* ================= PROCESS ================= */

.annual-audit-process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.annual-audit-process-card {
  position: relative;
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
}

.annual-audit-process-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
}

.annual-audit-process-card span {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 950;
}

.annual-audit-process-card h4 {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

.annual-audit-process-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

/* ================= TABLE ================= */

.annual-audit-table-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.annual-audit-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.annual-audit-table-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.annual-audit-table-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.annual-audit-table-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.annual-audit-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.annual-audit-table-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.annual-audit-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.annual-audit-table {
  width: 100%;
  min-width: 850px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.annual-audit-table thead th {
  padding: 0 16px 8px;
  color: var(--primary-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.annual-audit-table tbody tr {
  background: var(--light-bg);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.04);
}

.annual-audit-table tbody td {
  padding: 16px;
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 750;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.annual-audit-table tbody td:first-child {
  border-left: 1px solid var(--border);
  border-radius: 16px 0 0 16px;
  color: var(--primary-dark);
  font-weight: 950;
}

.annual-audit-table tbody td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 16px 16px 0;
}

.annual-audit-table td a {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
}

.annual-audit-status {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.annual-audit-status.active {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.annual-audit-status.pending {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

/* ================= QUICK ROW ================= */

.annual-audit-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.annual-audit-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 112px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.annual-audit-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.annual-audit-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.annual-audit-quick-card div {
  position: relative;
  z-index: 2;
}

.annual-audit-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.annual-audit-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= NOTE ================= */

.annual-audit-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.annual-audit-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.annual-audit-note-icon i {
  font-size: 26px;
}

.annual-audit-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.annual-audit-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.annual-audit-card:hover,
.annual-audit-quick-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.annual-audit-card:hover::before,
.annual-audit-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.annual-audit-card:hover::after {
  transform: scaleX(1);
}

.annual-audit-card:hover .annual-audit-card-content h3,
.annual-audit-quick-card:hover h4 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .annual-audit-wrapper {
    grid-template-columns: 1fr;
  }

  .annual-audit-head h2 {
    font-size: 38px;
  }

  .annual-audit-info-card {
    min-height: auto;
  }

  .annual-audit-process-row,
  .annual-audit-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .annual-audit-section {
    padding: 64px 0;
  }

  .annual-audit-head {
    margin-bottom: 36px;
  }

  .annual-audit-head h2 {
    font-size: 34px;
  }

  .annual-audit-info-card h3 {
    font-size: 28px;
  }

  .annual-audit-table-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .annual-audit-grid {
    grid-template-columns: 1fr;
  }

  .annual-audit-card {
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .annual-audit-section {
    padding: 52px 0;
  }

  .annual-audit-badge {
    font-size: 11.5px;
  }

  .annual-audit-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .annual-audit-head p {
    font-size: 14px;
  }

  .annual-audit-info-card {
    padding: 24px;
    border-radius: 24px;
  }

  .annual-audit-info-card h3 {
    font-size: 23px;
  }

  .annual-audit-info-card p {
    font-size: 14px;
  }

  .annual-audit-info-item {
    grid-template-columns: 1fr;
  }

  .annual-audit-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .annual-audit-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .annual-audit-card-content h3 {
    font-size: 19px;
  }

  .annual-audit-card-content p {
    font-size: 13.5px;
  }

  .annual-audit-meta a {
    width: 100%;
  }

  .annual-audit-process-row,
  .annual-audit-quick-row {
    grid-template-columns: 1fr;
  }

  .annual-audit-table-card {
    padding: 20px;
    border-radius: 24px;
  }

  .annual-audit-table-head h3 {
    font-size: 21px;
  }

  .annual-audit-table-btn {
    width: 100%;
  }

  .annual-audit-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .annual-audit-head h2 {
    font-size: 25px;
  }

  .annual-audit-info-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .annual-audit-info-btn {
    width: 100%;
  }
}

/* ================= ANNUAL / AUDIT REPORTS SECTION CSS END ================= */




/* ================= TENDERS / RECRUITMENT / PUBLIC NOTICES SECTION CSS START ================= */

.public-notices-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.public-notices-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.public-notices-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.public-notices-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.public-notices-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.public-notices-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.public-notices-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.public-notices-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.public-notices-head p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.public-notices-wrapper {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= INFO CARD ================= */

.public-notices-info-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.public-notices-info-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.public-notices-info-card::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.public-notices-info-card > * {
  position: relative;
  z-index: 2;
}

.public-notices-info-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.public-notices-info-icon i {
  font-size: 31px;
}

.public-notices-info-card > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.public-notices-info-card h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.public-notices-info-card p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.public-notices-info-list {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
}

.public-notices-info-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.public-notices-info-item > i {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.public-notices-info-item h4 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
}

.public-notices-info-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.public-notices-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.public-notices-info-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.public-notices-info-btn i {
  transition: transform 0.3s ease;
}

.public-notices-info-btn:hover i {
  transform: translateX(5px);
}

/* ================= FILTER ================= */

.public-notices-content {
  display: grid;
  gap: 18px;
}

.public-notices-filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 18px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.07);
}

.public-notices-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 11px 16px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 12.5px;
  line-height: 1;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.3s ease;
}

.public-notices-filter-btn.active,
.public-notices-filter-btn:hover {
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  transform: translateY(-2px);
}

/* ================= NOTICE LIST ================= */

.public-notices-list {
  display: grid;
  gap: 16px;
}

.public-notice-item {
  position: relative;
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 18px;
  padding: 22px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.public-notice-item.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.public-notice-item::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.public-notice-item::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.public-notice-date,
.public-notice-content {
  position: relative;
  z-index: 2;
}

.public-notice-date {
  width: 76px;
  height: 82px;
  border-radius: 22px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.20);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.public-notice-item.active .public-notice-date {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.public-notice-date strong {
  font-size: 27px;
  line-height: 1;
  font-weight: 950;
}

.public-notice-date span {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.public-notice-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 9px;
}

.public-notice-tag {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.public-notice-tag.tender {
  color: var(--primary);
  background: var(--soft-blue);
}

.public-notice-tag.recruitment {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.public-notice-tag.public {
  color: #8f1520;
  background: rgba(181, 31, 42, 0.10);
}

.public-notice-tag.corrigendum {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

.public-notice-top small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 850;
}

.public-notice-content h3 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.public-notice-content p {
  margin: 0 0 14px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.public-notice-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.public-notice-meta a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 850;
  transition: all 0.3s ease;
}

.public-notice-meta a i {
  color: var(--secondary);
  font-size: 13px;
}

.public-notice-meta a:hover {
  color: var(--primary);
  transform: translateX(3px);
}

/* ================= CATEGORY CARDS ================= */

.public-notices-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.public-notices-card {
  position: relative;
  min-height: 238px;
  padding: 24px;
  border-radius: 26px;
  color: var(--dark);
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.public-notices-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.public-notices-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.public-notices-card > * {
  position: relative;
  z-index: 2;
}

.public-notices-card-icon {
  width: 60px;
  height: 60px;
  margin-bottom: 18px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}

.public-notices-card.active .public-notices-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.public-notices-card-icon i {
  font-size: 25px;
}

.public-notices-card span {
  display: inline-flex;
  margin-bottom: 9px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.public-notices-card h3 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 19px;
  line-height: 1.25;
  font-weight: 950;
}

.public-notices-card p {
  margin: 0 0 16px;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.58;
  font-weight: 500;
}

.public-notices-card a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--secondary);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
}

.public-notices-card a i {
  transition: transform 0.3s ease;
}

/* ================= TABLE ================= */

.public-notices-table-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.public-notices-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.public-notices-table-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.public-notices-table-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.public-notices-table-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.public-notices-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.public-notices-table-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.public-notices-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.public-notices-table {
  width: 100%;
  min-width: 850px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.public-notices-table thead th {
  padding: 0 16px 8px;
  color: var(--primary-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.public-notices-table tbody tr {
  background: var(--light-bg);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.04);
}

.public-notices-table tbody td {
  padding: 16px;
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 750;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.public-notices-table tbody td:first-child {
  border-left: 1px solid var(--border);
  border-radius: 16px 0 0 16px;
  color: var(--primary-dark);
  font-weight: 950;
}

.public-notices-table tbody td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 16px 16px 0;
}

.public-notices-table td a {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
}

.public-notices-status {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.public-notices-status.active {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.public-notices-status.pending {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

/* ================= NOTE ================= */

.public-notices-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.public-notices-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.public-notices-note-icon i {
  font-size: 26px;
}

.public-notices-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.public-notices-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.public-notice-item:hover,
.public-notices-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.public-notice-item:hover::before,
.public-notices-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.public-notice-item:hover::after,
.public-notices-card:hover::after {
  transform: scaleX(1);
}

.public-notice-item:hover h3,
.public-notices-card:hover h3 {
  color: var(--secondary);
}

.public-notices-card:hover a i {
  transform: translateX(5px);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .public-notices-wrapper {
    grid-template-columns: 1fr;
  }

  .public-notices-head h2 {
    font-size: 38px;
  }

  .public-notices-info-card {
    min-height: auto;
  }

  .public-notices-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .public-notices-section {
    padding: 64px 0;
  }

  .public-notices-head {
    margin-bottom: 36px;
  }

  .public-notices-head h2 {
    font-size: 34px;
  }

  .public-notices-info-card h3 {
    font-size: 28px;
  }

  .public-notices-table-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .public-notice-item {
    grid-template-columns: 1fr;
  }

  .public-notice-date {
    width: 72px;
    height: 78px;
  }
}

@media (max-width: 575px) {
  .public-notices-section {
    padding: 52px 0;
  }

  .public-notices-badge {
    font-size: 11.5px;
  }

  .public-notices-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .public-notices-head p {
    font-size: 14px;
  }

  .public-notices-info-card {
    padding: 24px;
    border-radius: 24px;
  }

  .public-notices-info-card h3 {
    font-size: 23px;
  }

  .public-notices-info-card p {
    font-size: 14px;
  }

  .public-notices-info-item {
    grid-template-columns: 1fr;
  }

  .public-notices-filter-row {
    padding: 14px;
    border-radius: 22px;
  }

  .public-notices-filter-btn {
    width: 100%;
  }

  .public-notice-item {
    padding: 20px;
    border-radius: 24px;
  }

  .public-notice-content h3 {
    font-size: 19px;
  }

  .public-notice-content p {
    font-size: 13.5px;
  }

  .public-notice-meta a {
    width: 100%;
  }

  .public-notices-grid {
    grid-template-columns: 1fr;
  }

  .public-notices-card {
    min-height: auto;
    padding: 22px;
    border-radius: 24px;
  }

  .public-notices-table-card {
    padding: 20px;
    border-radius: 24px;
  }

  .public-notices-table-head h3 {
    font-size: 21px;
  }

  .public-notices-table-btn {
    width: 100%;
  }

  .public-notices-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .public-notices-head h2 {
    font-size: 25px;
  }

  .public-notices-info-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .public-notices-info-btn {
    width: 100%;
  }
}

/* ================= TENDERS / RECRUITMENT / PUBLIC NOTICES SECTION CSS END ================= */




/* ================= ANTI-RAGGING & HARASSMENT GUIDELINES SECTION CSS START ================= */

.anti-harassment-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.anti-harassment-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.anti-harassment-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.anti-harassment-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.anti-harassment-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.anti-harassment-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.anti-harassment-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.anti-harassment-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.anti-harassment-head p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.anti-harassment-wrapper {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= INFO CARD ================= */

.anti-harassment-info-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.anti-harassment-info-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.anti-harassment-info-card::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.anti-harassment-info-card > * {
  position: relative;
  z-index: 2;
}

.anti-harassment-info-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.anti-harassment-info-icon i {
  font-size: 31px;
}

.anti-harassment-info-card > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.anti-harassment-info-card h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.anti-harassment-info-card p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.anti-harassment-info-list {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
}

.anti-harassment-info-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.anti-harassment-info-item > i {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.anti-harassment-info-item h4 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
}

.anti-harassment-info-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.anti-harassment-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.anti-harassment-info-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.anti-harassment-info-btn i {
  transition: transform 0.3s ease;
}

.anti-harassment-info-btn:hover i {
  transform: translateX(5px);
}

/* ================= GRID ================= */

.anti-harassment-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.anti-harassment-card {
  position: relative;
  min-height: 245px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.anti-harassment-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.anti-harassment-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.anti-harassment-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.anti-harassment-card-icon,
.anti-harassment-card-content {
  position: relative;
  z-index: 2;
}

.anti-harassment-card-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.anti-harassment-card.active .anti-harassment-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.anti-harassment-card-icon i {
  font-size: 26px;
}

.anti-harassment-card-content > span {
  display: inline-flex;
  margin-bottom: 9px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.anti-harassment-card-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.anti-harassment-card-content p {
  margin: 0 0 17px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.anti-harassment-meta {
  display: grid;
  gap: 8px;
}

.anti-harassment-meta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 850;
  transition: all 0.3s ease;
}

.anti-harassment-meta a i {
  color: var(--secondary);
  font-size: 13px;
}

.anti-harassment-meta a:hover {
  color: var(--primary);
  transform: translateX(3px);
}

/* ================= PROCESS ================= */

.anti-harassment-process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.anti-harassment-process-card {
  position: relative;
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
}

.anti-harassment-process-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
}

.anti-harassment-process-card span {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 950;
}

.anti-harassment-process-card h4 {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

.anti-harassment-process-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

/* ================= GUIDELINES ================= */

.anti-harassment-guideline-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.anti-harassment-guideline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.anti-harassment-guideline-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.anti-harassment-guideline-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.anti-harassment-guideline-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.anti-harassment-guideline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.anti-harassment-guideline-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.anti-harassment-guideline-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.anti-harassment-guideline-box {
  position: relative;
  padding: 24px;
  border-radius: 24px;
  background: var(--light-bg);
  border: 1px solid var(--border);
  overflow: hidden;
}

.anti-harassment-guideline-box::before {
  content: "";
  position: absolute;
  right: -46px;
  top: -46px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
}

.anti-harassment-guideline-box.do::before {
  background: rgba(19, 138, 75, 0.10);
}

.anti-harassment-guideline-box.dont::before {
  background: rgba(181, 31, 42, 0.10);
}

.anti-harassment-guideline-box h4 {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 15px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 950;
}

.anti-harassment-guideline-box.do h4 i {
  color: var(--success);
}

.anti-harassment-guideline-box.dont h4 i {
  color: var(--secondary);
}

.anti-harassment-guideline-box ul {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
}

.anti-harassment-guideline-box li {
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 600;
}

/* ================= TABLE ================= */

.anti-harassment-table-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.anti-harassment-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.anti-harassment-table-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.anti-harassment-table-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.anti-harassment-table-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.anti-harassment-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.anti-harassment-table-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.anti-harassment-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.anti-harassment-table {
  width: 100%;
  min-width: 850px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.anti-harassment-table thead th {
  padding: 0 16px 8px;
  color: var(--primary-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.anti-harassment-table tbody tr {
  background: var(--light-bg);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.04);
}

.anti-harassment-table tbody td {
  padding: 16px;
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 750;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.anti-harassment-table tbody td:first-child {
  border-left: 1px solid var(--border);
  border-radius: 16px 0 0 16px;
  color: var(--primary-dark);
  font-weight: 950;
}

.anti-harassment-table tbody td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 16px 16px 0;
}

.anti-harassment-table td a {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
}

.anti-harassment-status {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.anti-harassment-status.active {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.anti-harassment-status.pending {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

/* ================= QUICK ROW ================= */

.anti-harassment-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.anti-harassment-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 112px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.anti-harassment-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.anti-harassment-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.anti-harassment-quick-card div {
  position: relative;
  z-index: 2;
}

.anti-harassment-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.anti-harassment-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= NOTE ================= */

.anti-harassment-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.anti-harassment-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.anti-harassment-note-icon i {
  font-size: 26px;
}

.anti-harassment-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.anti-harassment-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.anti-harassment-card:hover,
.anti-harassment-quick-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.anti-harassment-card:hover::before,
.anti-harassment-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.anti-harassment-card:hover::after {
  transform: scaleX(1);
}

.anti-harassment-card:hover .anti-harassment-card-content h3,
.anti-harassment-quick-card:hover h4 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .anti-harassment-wrapper {
    grid-template-columns: 1fr;
  }

  .anti-harassment-head h2 {
    font-size: 38px;
  }

  .anti-harassment-info-card {
    min-height: auto;
  }

  .anti-harassment-process-row,
  .anti-harassment-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .anti-harassment-section {
    padding: 64px 0;
  }

  .anti-harassment-head {
    margin-bottom: 36px;
  }

  .anti-harassment-head h2 {
    font-size: 34px;
  }

  .anti-harassment-info-card h3 {
    font-size: 28px;
  }

  .anti-harassment-guideline-head,
  .anti-harassment-table-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .anti-harassment-guideline-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .anti-harassment-grid {
    grid-template-columns: 1fr;
  }

  .anti-harassment-card {
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .anti-harassment-section {
    padding: 52px 0;
  }

  .anti-harassment-badge {
    font-size: 11.5px;
  }

  .anti-harassment-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .anti-harassment-head p {
    font-size: 14px;
  }

  .anti-harassment-info-card {
    padding: 24px;
    border-radius: 24px;
  }

  .anti-harassment-info-card h3 {
    font-size: 23px;
  }

  .anti-harassment-info-card p {
    font-size: 14px;
  }

  .anti-harassment-info-item {
    grid-template-columns: 1fr;
  }

  .anti-harassment-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .anti-harassment-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .anti-harassment-card-content h3 {
    font-size: 19px;
  }

  .anti-harassment-card-content p {
    font-size: 13.5px;
  }

  .anti-harassment-meta a {
    width: 100%;
  }

  .anti-harassment-process-row,
  .anti-harassment-quick-row {
    grid-template-columns: 1fr;
  }

  .anti-harassment-guideline-card,
  .anti-harassment-table-card {
    padding: 20px;
    border-radius: 24px;
  }

  .anti-harassment-guideline-head h3,
  .anti-harassment-table-head h3 {
    font-size: 21px;
  }

  .anti-harassment-guideline-btn,
  .anti-harassment-table-btn {
    width: 100%;
  }

  .anti-harassment-guideline-box {
    padding: 20px;
    border-radius: 20px;
  }

  .anti-harassment-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .anti-harassment-head h2 {
    font-size: 25px;
  }

  .anti-harassment-info-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .anti-harassment-info-btn {
    width: 100%;
  }
}

/* ================= ANTI-RAGGING & HARASSMENT GUIDELINES SECTION CSS END ================= */
















/* ================= IQAC COMPOSITION SECTION CSS START ================= */

.iqac-composition-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.iqac-composition-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.iqac-composition-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.iqac-composition-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.iqac-composition-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.iqac-composition-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.iqac-composition-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.iqac-composition-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.iqac-composition-head p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.iqac-composition-wrapper {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= INFO CARD ================= */

.iqac-composition-info-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.iqac-composition-info-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.iqac-composition-info-card::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.iqac-composition-info-card > * {
  position: relative;
  z-index: 2;
}

.iqac-composition-info-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.iqac-composition-info-icon i {
  font-size: 31px;
}

.iqac-composition-info-card > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.iqac-composition-info-card h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.iqac-composition-info-card p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.iqac-composition-info-list {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
}

.iqac-composition-info-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.iqac-composition-info-item > i {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.iqac-composition-info-item h4 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
}

.iqac-composition-info-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.iqac-composition-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.iqac-composition-info-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.iqac-composition-info-btn i {
  transition: transform 0.3s ease;
}

.iqac-composition-info-btn:hover i {
  transform: translateX(5px);
}

/* ================= GRID ================= */

.iqac-composition-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.iqac-composition-card {
  position: relative;
  min-height: 245px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.iqac-composition-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.iqac-composition-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.iqac-composition-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.iqac-composition-card-icon,
.iqac-composition-card-content {
  position: relative;
  z-index: 2;
}

.iqac-composition-card-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.iqac-composition-card.active .iqac-composition-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.iqac-composition-card-icon i {
  font-size: 26px;
}

.iqac-composition-card-content > span {
  display: inline-flex;
  margin-bottom: 9px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.iqac-composition-card-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.iqac-composition-card-content p {
  margin: 0 0 17px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.iqac-composition-meta {
  display: grid;
  gap: 8px;
}

.iqac-composition-meta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 850;
  transition: all 0.3s ease;
}

.iqac-composition-meta a i {
  color: var(--secondary);
  font-size: 13px;
}

.iqac-composition-meta a:hover {
  color: var(--primary);
  transform: translateX(3px);
}

/* ================= PROCESS ================= */

.iqac-composition-process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.iqac-composition-process-card {
  position: relative;
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
}

.iqac-composition-process-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
}

.iqac-composition-process-card span {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 950;
}

.iqac-composition-process-card h4 {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

.iqac-composition-process-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

/* ================= TABLE ================= */

.iqac-composition-table-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.iqac-composition-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.iqac-composition-table-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.iqac-composition-table-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.iqac-composition-table-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.iqac-composition-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.iqac-composition-table-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.iqac-composition-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.iqac-composition-table {
  width: 100%;
  min-width: 850px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.iqac-composition-table thead th {
  padding: 0 16px 8px;
  color: var(--primary-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.iqac-composition-table tbody tr {
  background: var(--light-bg);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.04);
}

.iqac-composition-table tbody td {
  padding: 16px;
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 750;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.iqac-composition-table tbody td:first-child {
  border-left: 1px solid var(--border);
  border-radius: 16px 0 0 16px;
  color: var(--primary-dark);
  font-weight: 950;
}

.iqac-composition-table tbody td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 16px 16px 0;
}

.iqac-composition-table td a {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
}

.iqac-composition-status {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.iqac-composition-status.active {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.iqac-composition-status.pending {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

/* ================= QUICK ROW ================= */

.iqac-composition-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.iqac-composition-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 112px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.iqac-composition-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.iqac-composition-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.iqac-composition-quick-card div {
  position: relative;
  z-index: 2;
}

.iqac-composition-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.iqac-composition-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= NOTE ================= */

.iqac-composition-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.iqac-composition-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.iqac-composition-note-icon i {
  font-size: 26px;
}

.iqac-composition-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.iqac-composition-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.iqac-composition-card:hover,
.iqac-composition-quick-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.iqac-composition-card:hover::before,
.iqac-composition-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.iqac-composition-card:hover::after {
  transform: scaleX(1);
}

.iqac-composition-card:hover .iqac-composition-card-content h3,
.iqac-composition-quick-card:hover h4 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .iqac-composition-wrapper {
    grid-template-columns: 1fr;
  }

  .iqac-composition-head h2 {
    font-size: 38px;
  }

  .iqac-composition-info-card {
    min-height: auto;
  }

  .iqac-composition-process-row,
  .iqac-composition-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .iqac-composition-section {
    padding: 64px 0;
  }

  .iqac-composition-head {
    margin-bottom: 36px;
  }

  .iqac-composition-head h2 {
    font-size: 34px;
  }

  .iqac-composition-info-card h3 {
    font-size: 28px;
  }

  .iqac-composition-table-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .iqac-composition-grid {
    grid-template-columns: 1fr;
  }

  .iqac-composition-card {
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .iqac-composition-section {
    padding: 52px 0;
  }

  .iqac-composition-badge {
    font-size: 11.5px;
  }

  .iqac-composition-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .iqac-composition-head p {
    font-size: 14px;
  }

  .iqac-composition-info-card {
    padding: 24px;
    border-radius: 24px;
  }

  .iqac-composition-info-card h3 {
    font-size: 23px;
  }

  .iqac-composition-info-card p {
    font-size: 14px;
  }

  .iqac-composition-info-item {
    grid-template-columns: 1fr;
  }

  .iqac-composition-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .iqac-composition-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .iqac-composition-card-content h3 {
    font-size: 19px;
  }

  .iqac-composition-card-content p {
    font-size: 13.5px;
  }

  .iqac-composition-meta a {
    width: 100%;
  }

  .iqac-composition-process-row,
  .iqac-composition-quick-row {
    grid-template-columns: 1fr;
  }

  .iqac-composition-table-card {
    padding: 20px;
    border-radius: 24px;
  }

  .iqac-composition-table-head h3 {
    font-size: 21px;
  }

  .iqac-composition-table-btn {
    width: 100%;
  }

  .iqac-composition-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .iqac-composition-head h2 {
    font-size: 25px;
  }

  .iqac-composition-info-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .iqac-composition-info-btn {
    width: 100%;
  }
}

/* ================= IQAC COMPOSITION SECTION CSS END ================= */





/* ================= IQAC MEETINGS SECTION CSS START ================= */

.iqac-meetings-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.iqac-meetings-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.iqac-meetings-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.iqac-meetings-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.iqac-meetings-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.iqac-meetings-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.iqac-meetings-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.iqac-meetings-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.iqac-meetings-head p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.iqac-meetings-wrapper {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= INFO CARD ================= */

.iqac-meetings-info-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.iqac-meetings-info-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.iqac-meetings-info-card::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.iqac-meetings-info-card > * {
  position: relative;
  z-index: 2;
}

.iqac-meetings-info-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.iqac-meetings-info-icon i {
  font-size: 31px;
}

.iqac-meetings-info-card > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.iqac-meetings-info-card h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.iqac-meetings-info-card p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.iqac-meetings-info-list {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
}

.iqac-meetings-info-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.iqac-meetings-info-item > i {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.iqac-meetings-info-item h4 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
}

.iqac-meetings-info-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.iqac-meetings-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.iqac-meetings-info-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.iqac-meetings-info-btn i {
  transition: transform 0.3s ease;
}

.iqac-meetings-info-btn:hover i {
  transform: translateX(5px);
}

/* ================= FILTER ================= */

.iqac-meetings-content {
  display: grid;
  gap: 18px;
}

.iqac-meetings-filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 18px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.07);
}

.iqac-meetings-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 11px 16px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 12.5px;
  line-height: 1;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.3s ease;
}

.iqac-meetings-filter-btn.active,
.iqac-meetings-filter-btn:hover {
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  transform: translateY(-2px);
}

/* ================= MEETING LIST ================= */

.iqac-meetings-list {
  display: grid;
  gap: 16px;
}

.iqac-meeting-item {
  position: relative;
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 18px;
  padding: 22px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.iqac-meeting-item.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.iqac-meeting-item::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.iqac-meeting-item::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.iqac-meeting-date,
.iqac-meeting-content {
  position: relative;
  z-index: 2;
}

.iqac-meeting-date {
  width: 76px;
  height: 82px;
  border-radius: 22px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.20);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.iqac-meeting-item.active .iqac-meeting-date {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.iqac-meeting-date strong {
  font-size: 27px;
  line-height: 1;
  font-weight: 950;
}

.iqac-meeting-date span {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.iqac-meeting-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 9px;
}

.iqac-meeting-tag {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.iqac-meeting-tag.schedule {
  color: var(--primary);
  background: var(--soft-blue);
}

.iqac-meeting-tag.minutes {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.iqac-meeting-tag.atr {
  color: #8f1520;
  background: rgba(181, 31, 42, 0.10);
}

.iqac-meeting-tag.report {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

.iqac-meeting-top small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 850;
}

.iqac-meeting-content h3 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.iqac-meeting-content p {
  margin: 0 0 14px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.iqac-meeting-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.iqac-meeting-meta a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 850;
  transition: all 0.3s ease;
}

.iqac-meeting-meta a i {
  color: var(--secondary);
  font-size: 13px;
}

.iqac-meeting-meta a:hover {
  color: var(--primary);
  transform: translateX(3px);
}

/* ================= CATEGORY CARDS ================= */

.iqac-meetings-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.iqac-meetings-card {
  position: relative;
  min-height: 238px;
  padding: 24px;
  border-radius: 26px;
  color: var(--dark);
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.iqac-meetings-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.iqac-meetings-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.iqac-meetings-card > * {
  position: relative;
  z-index: 2;
}

.iqac-meetings-card-icon {
  width: 60px;
  height: 60px;
  margin-bottom: 18px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}

.iqac-meetings-card.active .iqac-meetings-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.iqac-meetings-card-icon i {
  font-size: 25px;
}

.iqac-meetings-card span {
  display: inline-flex;
  margin-bottom: 9px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.iqac-meetings-card h3 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 19px;
  line-height: 1.25;
  font-weight: 950;
}

.iqac-meetings-card p {
  margin: 0 0 16px;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.58;
  font-weight: 500;
}

.iqac-meetings-card a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--secondary);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
}

.iqac-meetings-card a i {
  transition: transform 0.3s ease;
}

/* ================= TABLE ================= */

.iqac-meetings-table-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.iqac-meetings-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.iqac-meetings-table-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.iqac-meetings-table-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.iqac-meetings-table-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.iqac-meetings-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.iqac-meetings-table-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.iqac-meetings-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.iqac-meetings-table {
  width: 100%;
  min-width: 850px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.iqac-meetings-table thead th {
  padding: 0 16px 8px;
  color: var(--primary-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.iqac-meetings-table tbody tr {
  background: var(--light-bg);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.04);
}

.iqac-meetings-table tbody td {
  padding: 16px;
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 750;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.iqac-meetings-table tbody td:first-child {
  border-left: 1px solid var(--border);
  border-radius: 16px 0 0 16px;
  color: var(--primary-dark);
  font-weight: 950;
}

.iqac-meetings-table tbody td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 16px 16px 0;
}

.iqac-meetings-table td a {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
}

.iqac-meetings-status {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.iqac-meetings-status.active {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.iqac-meetings-status.pending {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

/* ================= NOTE ================= */

.iqac-meetings-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.iqac-meetings-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.iqac-meetings-note-icon i {
  font-size: 26px;
}

.iqac-meetings-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.iqac-meetings-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.iqac-meeting-item:hover,
.iqac-meetings-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.iqac-meeting-item:hover::before,
.iqac-meetings-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.iqac-meeting-item:hover::after,
.iqac-meetings-card:hover::after {
  transform: scaleX(1);
}

.iqac-meeting-item:hover h3,
.iqac-meetings-card:hover h3 {
  color: var(--secondary);
}

.iqac-meetings-card:hover a i {
  transform: translateX(5px);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .iqac-meetings-wrapper {
    grid-template-columns: 1fr;
  }

  .iqac-meetings-head h2 {
    font-size: 38px;
  }

  .iqac-meetings-info-card {
    min-height: auto;
  }

  .iqac-meetings-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .iqac-meetings-section {
    padding: 64px 0;
  }

  .iqac-meetings-head {
    margin-bottom: 36px;
  }

  .iqac-meetings-head h2 {
    font-size: 34px;
  }

  .iqac-meetings-info-card h3 {
    font-size: 28px;
  }

  .iqac-meetings-table-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .iqac-meeting-item {
    grid-template-columns: 1fr;
  }

  .iqac-meeting-date {
    width: 72px;
    height: 78px;
  }
}

@media (max-width: 575px) {
  .iqac-meetings-section {
    padding: 52px 0;
  }

  .iqac-meetings-badge {
    font-size: 11.5px;
  }

  .iqac-meetings-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .iqac-meetings-head p {
    font-size: 14px;
  }

  .iqac-meetings-info-card {
    padding: 24px;
    border-radius: 24px;
  }

  .iqac-meetings-info-card h3 {
    font-size: 23px;
  }

  .iqac-meetings-info-card p {
    font-size: 14px;
  }

  .iqac-meetings-info-item {
    grid-template-columns: 1fr;
  }

  .iqac-meetings-filter-row {
    padding: 14px;
    border-radius: 22px;
  }

  .iqac-meetings-filter-btn {
    width: 100%;
  }

  .iqac-meeting-item {
    padding: 20px;
    border-radius: 24px;
  }

  .iqac-meeting-content h3 {
    font-size: 19px;
  }

  .iqac-meeting-content p {
    font-size: 13.5px;
  }

  .iqac-meeting-meta a {
    width: 100%;
  }

  .iqac-meetings-grid {
    grid-template-columns: 1fr;
  }

  .iqac-meetings-card {
    min-height: auto;
    padding: 22px;
    border-radius: 24px;
  }

  .iqac-meetings-table-card {
    padding: 20px;
    border-radius: 24px;
  }

  .iqac-meetings-table-head h3 {
    font-size: 21px;
  }

  .iqac-meetings-table-btn {
    width: 100%;
  }

  .iqac-meetings-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .iqac-meetings-head h2 {
    font-size: 25px;
  }

  .iqac-meetings-info-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .iqac-meetings-info-btn {
    width: 100%;
  }
}

/* ================= IQAC MEETINGS SECTION CSS END ================= */




/* ================= AQAR SECTION CSS START ================= */

.aqar-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.aqar-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.aqar-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.aqar-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.aqar-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.aqar-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.aqar-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.aqar-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.aqar-head p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.aqar-wrapper {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= INFO CARD ================= */

.aqar-info-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.aqar-info-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.aqar-info-card::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.aqar-info-card > * {
  position: relative;
  z-index: 2;
}

.aqar-info-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.aqar-info-icon i {
  font-size: 31px;
}

.aqar-info-card > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.aqar-info-card h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.aqar-info-card p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.aqar-info-list {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
}

.aqar-info-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.aqar-info-item > i {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.aqar-info-item h4 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
}

.aqar-info-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.aqar-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.aqar-info-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.aqar-info-btn i {
  transition: transform 0.3s ease;
}

.aqar-info-btn:hover i {
  transform: translateX(5px);
}

/* ================= GRID ================= */

.aqar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.aqar-card {
  position: relative;
  min-height: 245px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.aqar-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.aqar-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.aqar-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.aqar-card-icon,
.aqar-card-content {
  position: relative;
  z-index: 2;
}

.aqar-card-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.aqar-card.active .aqar-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.aqar-card-icon i {
  font-size: 26px;
}

.aqar-card-content > span {
  display: inline-flex;
  margin-bottom: 9px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.aqar-card-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.aqar-card-content p {
  margin: 0 0 17px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.aqar-meta {
  display: grid;
  gap: 8px;
}

.aqar-meta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 850;
  transition: all 0.3s ease;
}

.aqar-meta a i {
  color: var(--secondary);
  font-size: 13px;
}

.aqar-meta a:hover {
  color: var(--primary);
  transform: translateX(3px);
}

/* ================= PROCESS ================= */

.aqar-process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.aqar-process-card {
  position: relative;
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
}

.aqar-process-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
}

.aqar-process-card span {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 950;
}

.aqar-process-card h4 {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

.aqar-process-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

/* ================= TABLE ================= */

.aqar-table-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.aqar-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.aqar-table-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.aqar-table-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.aqar-table-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.aqar-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.aqar-table-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.aqar-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.aqar-table {
  width: 100%;
  min-width: 850px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.aqar-table thead th {
  padding: 0 16px 8px;
  color: var(--primary-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.aqar-table tbody tr {
  background: var(--light-bg);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.04);
}

.aqar-table tbody td {
  padding: 16px;
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 750;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.aqar-table tbody td:first-child {
  border-left: 1px solid var(--border);
  border-radius: 16px 0 0 16px;
  color: var(--primary-dark);
  font-weight: 950;
}

.aqar-table tbody td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 16px 16px 0;
}

.aqar-table td a {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
}

.aqar-status {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.aqar-status.active {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.aqar-status.pending {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

/* ================= QUICK ROW ================= */

.aqar-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.aqar-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 112px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.aqar-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.aqar-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.aqar-quick-card div {
  position: relative;
  z-index: 2;
}

.aqar-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.aqar-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= NOTE ================= */

.aqar-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.aqar-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.aqar-note-icon i {
  font-size: 26px;
}

.aqar-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.aqar-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.aqar-card:hover,
.aqar-quick-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.aqar-card:hover::before,
.aqar-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.aqar-card:hover::after {
  transform: scaleX(1);
}

.aqar-card:hover .aqar-card-content h3,
.aqar-quick-card:hover h4 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .aqar-wrapper {
    grid-template-columns: 1fr;
  }

  .aqar-head h2 {
    font-size: 38px;
  }

  .aqar-info-card {
    min-height: auto;
  }

  .aqar-process-row,
  .aqar-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .aqar-section {
    padding: 64px 0;
  }

  .aqar-head {
    margin-bottom: 36px;
  }

  .aqar-head h2 {
    font-size: 34px;
  }

  .aqar-info-card h3 {
    font-size: 28px;
  }

  .aqar-table-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .aqar-grid {
    grid-template-columns: 1fr;
  }

  .aqar-card {
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .aqar-section {
    padding: 52px 0;
  }

  .aqar-badge {
    font-size: 11.5px;
  }

  .aqar-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .aqar-head p {
    font-size: 14px;
  }

  .aqar-info-card {
    padding: 24px;
    border-radius: 24px;
  }

  .aqar-info-card h3 {
    font-size: 23px;
  }

  .aqar-info-card p {
    font-size: 14px;
  }

  .aqar-info-item {
    grid-template-columns: 1fr;
  }

  .aqar-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .aqar-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .aqar-card-content h3 {
    font-size: 19px;
  }

  .aqar-card-content p {
    font-size: 13.5px;
  }

  .aqar-meta a {
    width: 100%;
  }

  .aqar-process-row,
  .aqar-quick-row {
    grid-template-columns: 1fr;
  }

  .aqar-table-card {
    padding: 20px;
    border-radius: 24px;
  }

  .aqar-table-head h3 {
    font-size: 21px;
  }

  .aqar-table-btn {
    width: 100%;
  }

  .aqar-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .aqar-head h2 {
    font-size: 25px;
  }

  .aqar-info-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .aqar-info-btn {
    width: 100%;
  }
}

/* ================= AQAR SECTION CSS END ================= */



  /* ================= IQAC MINUTES SECTION CSS START ================= */

.iqac-minutes-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.iqac-minutes-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.iqac-minutes-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.iqac-minutes-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.iqac-minutes-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.iqac-minutes-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.iqac-minutes-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.iqac-minutes-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.iqac-minutes-head p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.iqac-minutes-wrapper {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= INFO CARD ================= */

.iqac-minutes-info-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.iqac-minutes-info-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.iqac-minutes-info-card::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.iqac-minutes-info-card > * {
  position: relative;
  z-index: 2;
}

.iqac-minutes-info-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.iqac-minutes-info-icon i {
  font-size: 31px;
}

.iqac-minutes-info-card > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.iqac-minutes-info-card h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.iqac-minutes-info-card p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.iqac-minutes-info-list {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
}

.iqac-minutes-info-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.iqac-minutes-info-item > i {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.iqac-minutes-info-item h4 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
}

.iqac-minutes-info-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.iqac-minutes-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.iqac-minutes-info-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.iqac-minutes-info-btn i {
  transition: transform 0.3s ease;
}

.iqac-minutes-info-btn:hover i {
  transform: translateX(5px);
}

/* ================= FILTER ================= */

.iqac-minutes-content {
  display: grid;
  gap: 18px;
}

.iqac-minutes-filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 18px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.07);
}

.iqac-minutes-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 11px 16px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 12.5px;
  line-height: 1;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.3s ease;
}

.iqac-minutes-filter-btn.active,
.iqac-minutes-filter-btn:hover {
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  transform: translateY(-2px);
}

/* ================= MINUTES LIST ================= */

.iqac-minutes-list {
  display: grid;
  gap: 16px;
}

.iqac-minute-item {
  position: relative;
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 18px;
  padding: 22px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.iqac-minute-item.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.iqac-minute-item::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.iqac-minute-item::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.iqac-minute-date,
.iqac-minute-content {
  position: relative;
  z-index: 2;
}

.iqac-minute-date {
  width: 76px;
  height: 82px;
  border-radius: 22px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.20);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.iqac-minute-item.active .iqac-minute-date {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.iqac-minute-date strong {
  font-size: 27px;
  line-height: 1;
  font-weight: 950;
}

.iqac-minute-date span {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.iqac-minute-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 9px;
}

.iqac-minute-tag {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.iqac-minute-tag.latest {
  color: var(--primary);
  background: var(--soft-blue);
}

.iqac-minute-tag.academic {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.iqac-minute-tag.feedback {
  color: #8f1520;
  background: rgba(181, 31, 42, 0.10);
}

.iqac-minute-tag.documentation {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

.iqac-minute-top small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 850;
}

.iqac-minute-content h3 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.iqac-minute-content p {
  margin: 0 0 14px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.iqac-minute-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.iqac-minute-meta a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 850;
  transition: all 0.3s ease;
}

.iqac-minute-meta a i {
  color: var(--secondary);
  font-size: 13px;
}

.iqac-minute-meta a:hover {
  color: var(--primary);
  transform: translateX(3px);
}

/* ================= CARDS ================= */

.iqac-minutes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.iqac-minutes-card {
  position: relative;
  min-height: 238px;
  padding: 24px;
  border-radius: 26px;
  color: var(--dark);
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.iqac-minutes-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.iqac-minutes-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.iqac-minutes-card > * {
  position: relative;
  z-index: 2;
}

.iqac-minutes-card-icon {
  width: 60px;
  height: 60px;
  margin-bottom: 18px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}

.iqac-minutes-card.active .iqac-minutes-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.iqac-minutes-card-icon i {
  font-size: 25px;
}

.iqac-minutes-card span {
  display: inline-flex;
  margin-bottom: 9px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.iqac-minutes-card h3 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 19px;
  line-height: 1.25;
  font-weight: 950;
}

.iqac-minutes-card p {
  margin: 0 0 16px;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.58;
  font-weight: 500;
}

.iqac-minutes-card a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--secondary);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
}

.iqac-minutes-card a i {
  transition: transform 0.3s ease;
}

/* ================= PROCESS ================= */

.iqac-minutes-process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.iqac-minutes-process-card {
  position: relative;
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
}

.iqac-minutes-process-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
}

.iqac-minutes-process-card span {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 950;
}

.iqac-minutes-process-card h4 {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

.iqac-minutes-process-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

/* ================= TABLE ================= */

.iqac-minutes-table-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.iqac-minutes-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.iqac-minutes-table-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.iqac-minutes-table-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.iqac-minutes-table-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.iqac-minutes-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.iqac-minutes-table-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.iqac-minutes-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.iqac-minutes-table {
  width: 100%;
  min-width: 850px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.iqac-minutes-table thead th {
  padding: 0 16px 8px;
  color: var(--primary-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.iqac-minutes-table tbody tr {
  background: var(--light-bg);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.04);
}

.iqac-minutes-table tbody td {
  padding: 16px;
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 750;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.iqac-minutes-table tbody td:first-child {
  border-left: 1px solid var(--border);
  border-radius: 16px 0 0 16px;
  color: var(--primary-dark);
  font-weight: 950;
}

.iqac-minutes-table tbody td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 16px 16px 0;
}

.iqac-minutes-table td a {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
}

.iqac-minutes-status {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.iqac-minutes-status.active {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.iqac-minutes-status.pending {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

/* ================= NOTE ================= */

.iqac-minutes-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.iqac-minutes-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.iqac-minutes-note-icon i {
  font-size: 26px;
}

.iqac-minutes-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.iqac-minutes-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.iqac-minute-item:hover,
.iqac-minutes-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.iqac-minute-item:hover::before,
.iqac-minutes-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.iqac-minute-item:hover::after,
.iqac-minutes-card:hover::after {
  transform: scaleX(1);
}

.iqac-minute-item:hover h3,
.iqac-minutes-card:hover h3 {
  color: var(--secondary);
}

.iqac-minutes-card:hover a i {
  transform: translateX(5px);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .iqac-minutes-wrapper {
    grid-template-columns: 1fr;
  }

  .iqac-minutes-head h2 {
    font-size: 38px;
  }

  .iqac-minutes-info-card {
    min-height: auto;
  }

  .iqac-minutes-grid,
  .iqac-minutes-process-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .iqac-minutes-section {
    padding: 64px 0;
  }

  .iqac-minutes-head {
    margin-bottom: 36px;
  }

  .iqac-minutes-head h2 {
    font-size: 34px;
  }

  .iqac-minutes-info-card h3 {
    font-size: 28px;
  }

  .iqac-minutes-table-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .iqac-minute-item {
    grid-template-columns: 1fr;
  }

  .iqac-minute-date {
    width: 72px;
    height: 78px;
  }
}

@media (max-width: 575px) {
  .iqac-minutes-section {
    padding: 52px 0;
  }

  .iqac-minutes-badge {
    font-size: 11.5px;
  }

  .iqac-minutes-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .iqac-minutes-head p {
    font-size: 14px;
  }

  .iqac-minutes-info-card {
    padding: 24px;
    border-radius: 24px;
  }

  .iqac-minutes-info-card h3 {
    font-size: 23px;
  }

  .iqac-minutes-info-card p {
    font-size: 14px;
  }

  .iqac-minutes-info-item {
    grid-template-columns: 1fr;
  }

  .iqac-minutes-filter-row {
    padding: 14px;
    border-radius: 22px;
  }

  .iqac-minutes-filter-btn {
    width: 100%;
  }

  .iqac-minute-item {
    padding: 20px;
    border-radius: 24px;
  }

  .iqac-minute-content h3 {
    font-size: 19px;
  }

  .iqac-minute-content p {
    font-size: 13.5px;
  }

  .iqac-minute-meta a {
    width: 100%;
  }

  .iqac-minutes-grid,
  .iqac-minutes-process-row {
    grid-template-columns: 1fr;
  }

  .iqac-minutes-card {
    min-height: auto;
    padding: 22px;
    border-radius: 24px;
  }

  .iqac-minutes-table-card {
    padding: 20px;
    border-radius: 24px;
  }

  .iqac-minutes-table-head h3 {
    font-size: 21px;
  }

  .iqac-minutes-table-btn {
    width: 100%;
  }

  .iqac-minutes-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .iqac-minutes-head h2 {
    font-size: 25px;
  }

  .iqac-minutes-info-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .iqac-minutes-info-btn {
    width: 100%;
  }
}

/* ================= IQAC MINUTES SECTION CSS END ================= */



/* ================= ACTION TAKEN REPORTS SECTION CSS START ================= */

.action-report-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.action-report-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.action-report-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.action-report-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.action-report-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.action-report-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.action-report-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.action-report-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.action-report-head p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.action-report-wrapper {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= INFO CARD ================= */

.action-report-info-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.action-report-info-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.action-report-info-card::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.action-report-info-card > * {
  position: relative;
  z-index: 2;
}

.action-report-info-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.action-report-info-icon i {
  font-size: 31px;
}

.action-report-info-card > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.action-report-info-card h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.action-report-info-card p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.action-report-info-list {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
}

.action-report-info-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.action-report-info-item > i {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.action-report-info-item h4 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
}

.action-report-info-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.action-report-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.action-report-info-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.action-report-info-btn i {
  transition: transform 0.3s ease;
}

.action-report-info-btn:hover i {
  transform: translateX(5px);
}

/* ================= GRID ================= */

.action-report-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.action-report-card {
  position: relative;
  min-height: 245px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.action-report-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.action-report-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.action-report-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.action-report-card-icon,
.action-report-card-content {
  position: relative;
  z-index: 2;
}

.action-report-card-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-report-card.active .action-report-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.action-report-card-icon i {
  font-size: 26px;
}

.action-report-card-content > span {
  display: inline-flex;
  margin-bottom: 9px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.action-report-card-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.action-report-card-content p {
  margin: 0 0 17px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.action-report-meta {
  display: grid;
  gap: 8px;
}

.action-report-meta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 850;
  transition: all 0.3s ease;
}

.action-report-meta a i {
  color: var(--secondary);
  font-size: 13px;
}

.action-report-meta a:hover {
  color: var(--primary);
  transform: translateX(3px);
}

/* ================= PROCESS ================= */

.action-report-process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.action-report-process-card {
  position: relative;
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
}

.action-report-process-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
}

.action-report-process-card span {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 950;
}

.action-report-process-card h4 {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

.action-report-process-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

/* ================= TIMELINE ================= */

.action-report-timeline-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.action-report-timeline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.action-report-timeline-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.action-report-timeline-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.action-report-timeline-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.action-report-timeline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.action-report-timeline-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.action-report-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.action-report-timeline-item {
  position: relative;
  padding: 22px;
  border-radius: 24px;
  background: var(--light-bg);
  border: 1px solid var(--border);
  overflow: hidden;
}

.action-report-timeline-item::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
}

.action-report-timeline-dot {
  position: relative;
  z-index: 2;
  width: 54px;
  height: 54px;
  margin-bottom: 15px;
  border-radius: 18px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.action-report-timeline-dot i {
  font-size: 22px;
}

.action-report-timeline-item div:not(.action-report-timeline-dot) {
  position: relative;
  z-index: 2;
}

.action-report-timeline-item h4 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.action-report-timeline-item p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.58;
  font-weight: 500;
}

/* ================= TABLE ================= */

.action-report-table-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.action-report-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.action-report-table-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.action-report-table-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.action-report-table-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.action-report-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.action-report-table-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.action-report-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.action-report-table {
  width: 100%;
  min-width: 850px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.action-report-table thead th {
  padding: 0 16px 8px;
  color: var(--primary-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.action-report-table tbody tr {
  background: var(--light-bg);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.04);
}

.action-report-table tbody td {
  padding: 16px;
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 750;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.action-report-table tbody td:first-child {
  border-left: 1px solid var(--border);
  border-radius: 16px 0 0 16px;
  color: var(--primary-dark);
  font-weight: 950;
}

.action-report-table tbody td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 16px 16px 0;
}

.action-report-table td a {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
}

.action-report-status {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.action-report-status.active {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.action-report-status.pending {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

/* ================= QUICK ROW ================= */

.action-report-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.action-report-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 112px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.action-report-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.action-report-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.action-report-quick-card div {
  position: relative;
  z-index: 2;
}

.action-report-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.action-report-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= NOTE ================= */

.action-report-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.action-report-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.action-report-note-icon i {
  font-size: 26px;
}

.action-report-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.action-report-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.action-report-card:hover,
.action-report-quick-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.action-report-card:hover::before,
.action-report-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.action-report-card:hover::after {
  transform: scaleX(1);
}

.action-report-card:hover .action-report-card-content h3,
.action-report-quick-card:hover h4 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .action-report-wrapper {
    grid-template-columns: 1fr;
  }

  .action-report-head h2 {
    font-size: 38px;
  }

  .action-report-info-card {
    min-height: auto;
  }

  .action-report-process-row,
  .action-report-timeline,
  .action-report-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .action-report-section {
    padding: 64px 0;
  }

  .action-report-head {
    margin-bottom: 36px;
  }

  .action-report-head h2 {
    font-size: 34px;
  }

  .action-report-info-card h3 {
    font-size: 28px;
  }

  .action-report-timeline-head,
  .action-report-table-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .action-report-grid {
    grid-template-columns: 1fr;
  }

  .action-report-card {
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .action-report-section {
    padding: 52px 0;
  }

  .action-report-badge {
    font-size: 11.5px;
  }

  .action-report-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .action-report-head p {
    font-size: 14px;
  }

  .action-report-info-card {
    padding: 24px;
    border-radius: 24px;
  }

  .action-report-info-card h3 {
    font-size: 23px;
  }

  .action-report-info-card p {
    font-size: 14px;
  }

  .action-report-info-item {
    grid-template-columns: 1fr;
  }

  .action-report-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .action-report-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .action-report-card-content h3 {
    font-size: 19px;
  }

  .action-report-card-content p {
    font-size: 13.5px;
  }

  .action-report-meta a {
    width: 100%;
  }

  .action-report-process-row,
  .action-report-timeline,
  .action-report-quick-row {
    grid-template-columns: 1fr;
  }

  .action-report-timeline-card,
  .action-report-table-card {
    padding: 20px;
    border-radius: 24px;
  }

  .action-report-timeline-head h3,
  .action-report-table-head h3 {
    font-size: 21px;
  }

  .action-report-timeline-btn,
  .action-report-table-btn {
    width: 100%;
  }

  .action-report-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .action-report-head h2 {
    font-size: 25px;
  }

  .action-report-info-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .action-report-info-btn {
    width: 100%;
  }
}

/* ================= ACTION TAKEN REPORTS SECTION CSS END ================= */




/* ================= BEST PRACTICES SECTION CSS START ================= */

.best-practices-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.best-practices-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.best-practices-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.best-practices-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.best-practices-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.best-practices-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.best-practices-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.best-practices-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.best-practices-head p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.best-practices-wrapper {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= INFO CARD ================= */

.best-practices-info-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.best-practices-info-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.best-practices-info-card::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.best-practices-info-card > * {
  position: relative;
  z-index: 2;
}

.best-practices-info-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.best-practices-info-icon i {
  font-size: 31px;
}

.best-practices-info-card > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.best-practices-info-card h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.best-practices-info-card p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.best-practices-info-list {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
}

.best-practices-info-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.best-practices-info-item > i {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.best-practices-info-item h4 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
}

.best-practices-info-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.best-practices-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.best-practices-info-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.best-practices-info-btn i {
  transition: transform 0.3s ease;
}

.best-practices-info-btn:hover i {
  transform: translateX(5px);
}

/* ================= GRID ================= */

.best-practices-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.best-practices-card {
  position: relative;
  min-height: 245px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.best-practices-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.best-practices-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.best-practices-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.best-practices-card-icon,
.best-practices-card-content {
  position: relative;
  z-index: 2;
}

.best-practices-card-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.best-practices-card.active .best-practices-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.best-practices-card-icon i {
  font-size: 26px;
}

.best-practices-card-content > span {
  display: inline-flex;
  margin-bottom: 9px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.best-practices-card-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.best-practices-card-content p {
  margin: 0 0 17px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.best-practices-meta {
  display: grid;
  gap: 8px;
}

.best-practices-meta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 850;
  transition: all 0.3s ease;
}

.best-practices-meta a i {
  color: var(--secondary);
  font-size: 13px;
}

.best-practices-meta a:hover {
  color: var(--primary);
  transform: translateX(3px);
}

/* ================= PROCESS ================= */

.best-practices-process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.best-practices-process-card {
  position: relative;
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
}

.best-practices-process-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
}

.best-practices-process-card span {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 950;
}

.best-practices-process-card h4 {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

.best-practices-process-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

/* ================= HIGHLIGHT ================= */

.best-practices-highlight-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.best-practices-highlight-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.best-practices-highlight-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.best-practices-highlight-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.best-practices-highlight-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.best-practices-highlight-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.best-practices-highlight-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.best-practices-highlight-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.best-practices-highlight-item {
  position: relative;
  padding: 22px;
  border-radius: 24px;
  background: var(--light-bg);
  border: 1px solid var(--border);
  overflow: hidden;
}

.best-practices-highlight-item::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
}

.best-practices-highlight-item i {
  position: relative;
  z-index: 2;
  width: 54px;
  height: 54px;
  margin-bottom: 15px;
  border-radius: 18px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.best-practices-highlight-item h4 {
  position: relative;
  z-index: 2;
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.best-practices-highlight-item p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.58;
  font-weight: 500;
}

/* ================= TABLE ================= */

.best-practices-table-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.best-practices-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.best-practices-table-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.best-practices-table-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.best-practices-table-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.best-practices-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.best-practices-table-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.best-practices-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.best-practices-table {
  width: 100%;
  min-width: 850px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.best-practices-table thead th {
  padding: 0 16px 8px;
  color: var(--primary-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.best-practices-table tbody tr {
  background: var(--light-bg);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.04);
}

.best-practices-table tbody td {
  padding: 16px;
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 750;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.best-practices-table tbody td:first-child {
  border-left: 1px solid var(--border);
  border-radius: 16px 0 0 16px;
  color: var(--primary-dark);
  font-weight: 950;
}

.best-practices-table tbody td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 16px 16px 0;
}

.best-practices-table td a {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
}

.best-practices-status {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.best-practices-status.active {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.best-practices-status.pending {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

/* ================= QUICK ROW ================= */

.best-practices-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.best-practices-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 112px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.best-practices-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.best-practices-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.best-practices-quick-card div {
  position: relative;
  z-index: 2;
}

.best-practices-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.best-practices-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= NOTE ================= */

.best-practices-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.best-practices-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.best-practices-note-icon i {
  font-size: 26px;
}

.best-practices-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.best-practices-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.best-practices-card:hover,
.best-practices-quick-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.best-practices-card:hover::before,
.best-practices-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.best-practices-card:hover::after {
  transform: scaleX(1);
}

.best-practices-card:hover .best-practices-card-content h3,
.best-practices-quick-card:hover h4 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .best-practices-wrapper {
    grid-template-columns: 1fr;
  }

  .best-practices-head h2 {
    font-size: 38px;
  }

  .best-practices-info-card {
    min-height: auto;
  }

  .best-practices-process-row,
  .best-practices-highlight-grid,
  .best-practices-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .best-practices-section {
    padding: 64px 0;
  }

  .best-practices-head {
    margin-bottom: 36px;
  }

  .best-practices-head h2 {
    font-size: 34px;
  }

  .best-practices-info-card h3 {
    font-size: 28px;
  }

  .best-practices-highlight-head,
  .best-practices-table-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .best-practices-grid {
    grid-template-columns: 1fr;
  }

  .best-practices-card {
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .best-practices-section {
    padding: 52px 0;
  }

  .best-practices-badge {
    font-size: 11.5px;
  }

  .best-practices-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .best-practices-head p {
    font-size: 14px;
  }

  .best-practices-info-card {
    padding: 24px;
    border-radius: 24px;
  }

  .best-practices-info-card h3 {
    font-size: 23px;
  }

  .best-practices-info-card p {
    font-size: 14px;
  }

  .best-practices-info-item {
    grid-template-columns: 1fr;
  }

  .best-practices-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .best-practices-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .best-practices-card-content h3 {
    font-size: 19px;
  }

  .best-practices-card-content p {
    font-size: 13.5px;
  }

  .best-practices-meta a {
    width: 100%;
  }

  .best-practices-process-row,
  .best-practices-highlight-grid,
  .best-practices-quick-row {
    grid-template-columns: 1fr;
  }

  .best-practices-highlight-card,
  .best-practices-table-card {
    padding: 20px;
    border-radius: 24px;
  }

  .best-practices-highlight-head h3,
  .best-practices-table-head h3 {
    font-size: 21px;
  }

  .best-practices-highlight-btn,
  .best-practices-table-btn {
    width: 100%;
  }

  .best-practices-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .best-practices-head h2 {
    font-size: 25px;
  }

  .best-practices-info-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .best-practices-info-btn {
    width: 100%;
  }
}

/* ================= BEST PRACTICES SECTION CSS END ================= */





/* ================= SSR / DVV / CRITERIA DOCUMENTS SECTION CSS START ================= */

.ssr-dvv-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.ssr-dvv-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.ssr-dvv-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.ssr-dvv-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.ssr-dvv-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.ssr-dvv-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.ssr-dvv-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.ssr-dvv-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.ssr-dvv-head p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.ssr-dvv-wrapper {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= INFO CARD ================= */

.ssr-dvv-info-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.ssr-dvv-info-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.ssr-dvv-info-card::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.ssr-dvv-info-card > * {
  position: relative;
  z-index: 2;
}

.ssr-dvv-info-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.ssr-dvv-info-icon i {
  font-size: 31px;
}

.ssr-dvv-info-card > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.ssr-dvv-info-card h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.ssr-dvv-info-card p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.ssr-dvv-info-list {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
}

.ssr-dvv-info-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.ssr-dvv-info-item > i {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.ssr-dvv-info-item h4 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
}

.ssr-dvv-info-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.ssr-dvv-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.ssr-dvv-info-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.ssr-dvv-info-btn i {
  transition: transform 0.3s ease;
}

.ssr-dvv-info-btn:hover i {
  transform: translateX(5px);
}

/* ================= GRID ================= */

.ssr-dvv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.ssr-dvv-card {
  position: relative;
  min-height: 245px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.ssr-dvv-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.ssr-dvv-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.ssr-dvv-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.ssr-dvv-card-icon,
.ssr-dvv-card-content {
  position: relative;
  z-index: 2;
}

.ssr-dvv-card-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ssr-dvv-card.active .ssr-dvv-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.ssr-dvv-card-icon i {
  font-size: 26px;
}

.ssr-dvv-card-content > span {
  display: inline-flex;
  margin-bottom: 9px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.ssr-dvv-card-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.ssr-dvv-card-content p {
  margin: 0 0 17px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.ssr-dvv-meta {
  display: grid;
  gap: 8px;
}

.ssr-dvv-meta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 850;
  transition: all 0.3s ease;
}

.ssr-dvv-meta a i {
  color: var(--secondary);
  font-size: 13px;
}

.ssr-dvv-meta a:hover {
  color: var(--primary);
  transform: translateX(3px);
}

/* ================= CRITERIA ================= */

.ssr-dvv-criteria-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.ssr-dvv-criteria-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.ssr-dvv-criteria-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.ssr-dvv-criteria-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.ssr-dvv-criteria-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.ssr-dvv-criteria-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.ssr-dvv-criteria-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.ssr-dvv-criteria-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 14px;
}

.ssr-dvv-criteria-item {
  position: relative;
  min-height: 250px;
  padding: 20px;
  border-radius: 24px;
  background: var(--light-bg);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: all 0.35s ease;
}

.ssr-dvv-criteria-item::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.ssr-dvv-criteria-item::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.ssr-dvv-criteria-icon,
.ssr-dvv-criteria-item span,
.ssr-dvv-criteria-item h4,
.ssr-dvv-criteria-item p,
.ssr-dvv-criteria-item a {
  position: relative;
  z-index: 2;
}

.ssr-dvv-criteria-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 15px;
  border-radius: 18px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.ssr-dvv-criteria-item.active .ssr-dvv-criteria-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.ssr-dvv-criteria-icon i {
  font-size: 23px;
}

.ssr-dvv-criteria-item span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 9px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  border: 1px solid var(--border);
  font-size: 10px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.ssr-dvv-criteria-item h4 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 950;
}

.ssr-dvv-criteria-item p {
  margin: 0 0 14px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
  font-weight: 500;
}

.ssr-dvv-criteria-item a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--secondary);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
}

.ssr-dvv-criteria-item a i {
  transition: transform 0.3s ease;
}

/* ================= PROCESS ================= */

.ssr-dvv-process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.ssr-dvv-process-card {
  position: relative;
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
}

.ssr-dvv-process-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
}

.ssr-dvv-process-card span {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 950;
}

.ssr-dvv-process-card h4 {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

.ssr-dvv-process-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

/* ================= TABLE ================= */

.ssr-dvv-table-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.ssr-dvv-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.ssr-dvv-table-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.ssr-dvv-table-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.ssr-dvv-table-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.ssr-dvv-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.ssr-dvv-table-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.ssr-dvv-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.ssr-dvv-table {
  width: 100%;
  min-width: 850px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.ssr-dvv-table thead th {
  padding: 0 16px 8px;
  color: var(--primary-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ssr-dvv-table tbody tr {
  background: var(--light-bg);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.04);
}

.ssr-dvv-table tbody td {
  padding: 16px;
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 750;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.ssr-dvv-table tbody td:first-child {
  border-left: 1px solid var(--border);
  border-radius: 16px 0 0 16px;
  color: var(--primary-dark);
  font-weight: 950;
}

.ssr-dvv-table tbody td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 16px 16px 0;
}

.ssr-dvv-table td a {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
}

.ssr-dvv-status {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.ssr-dvv-status.active {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.ssr-dvv-status.pending {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

/* ================= QUICK ROW ================= */

.ssr-dvv-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.ssr-dvv-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 112px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.ssr-dvv-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.ssr-dvv-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.ssr-dvv-quick-card div {
  position: relative;
  z-index: 2;
}

.ssr-dvv-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.ssr-dvv-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= NOTE ================= */

.ssr-dvv-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.ssr-dvv-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.ssr-dvv-note-icon i {
  font-size: 26px;
}

.ssr-dvv-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.ssr-dvv-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.ssr-dvv-card:hover,
.ssr-dvv-criteria-item:hover,
.ssr-dvv-quick-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.ssr-dvv-card:hover::before,
.ssr-dvv-criteria-item:hover::before,
.ssr-dvv-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.ssr-dvv-card:hover::after,
.ssr-dvv-criteria-item:hover::after {
  transform: scaleX(1);
}

.ssr-dvv-card:hover .ssr-dvv-card-content h3,
.ssr-dvv-criteria-item:hover h4,
.ssr-dvv-quick-card:hover h4 {
  color: var(--secondary);
}

.ssr-dvv-criteria-item:hover a i {
  transform: translateX(5px);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1399px) {
  .ssr-dvv-criteria-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1199px) {
  .ssr-dvv-wrapper {
    grid-template-columns: 1fr;
  }

  .ssr-dvv-head h2 {
    font-size: 38px;
  }

  .ssr-dvv-info-card {
    min-height: auto;
  }

  .ssr-dvv-process-row,
  .ssr-dvv-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .ssr-dvv-criteria-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 991px) {
  .ssr-dvv-section {
    padding: 64px 0;
  }

  .ssr-dvv-head {
    margin-bottom: 36px;
  }

  .ssr-dvv-head h2 {
    font-size: 34px;
  }

  .ssr-dvv-info-card h3 {
    font-size: 28px;
  }

  .ssr-dvv-criteria-head,
  .ssr-dvv-table-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .ssr-dvv-criteria-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .ssr-dvv-grid {
    grid-template-columns: 1fr;
  }

  .ssr-dvv-card {
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .ssr-dvv-section {
    padding: 52px 0;
  }

  .ssr-dvv-badge {
    font-size: 11.5px;
  }

  .ssr-dvv-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .ssr-dvv-head p {
    font-size: 14px;
  }

  .ssr-dvv-info-card {
    padding: 24px;
    border-radius: 24px;
  }

  .ssr-dvv-info-card h3 {
    font-size: 23px;
  }

  .ssr-dvv-info-card p {
    font-size: 14px;
  }

  .ssr-dvv-info-item {
    grid-template-columns: 1fr;
  }

  .ssr-dvv-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .ssr-dvv-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .ssr-dvv-card-content h3 {
    font-size: 19px;
  }

  .ssr-dvv-card-content p {
    font-size: 13.5px;
  }

  .ssr-dvv-meta a {
    width: 100%;
  }

  .ssr-dvv-criteria-card,
  .ssr-dvv-table-card {
    padding: 20px;
    border-radius: 24px;
  }

  .ssr-dvv-criteria-head h3,
  .ssr-dvv-table-head h3 {
    font-size: 21px;
  }

  .ssr-dvv-criteria-btn,
  .ssr-dvv-table-btn {
    width: 100%;
  }

  .ssr-dvv-criteria-grid,
  .ssr-dvv-process-row,
  .ssr-dvv-quick-row {
    grid-template-columns: 1fr;
  }

  .ssr-dvv-criteria-item {
    min-height: auto;
  }

  .ssr-dvv-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .ssr-dvv-head h2 {
    font-size: 25px;
  }

  .ssr-dvv-info-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .ssr-dvv-info-btn {
    width: 100%;
  }
}

/* ================= SSR / DVV / CRITERIA DOCUMENTS SECTION CSS END ================= */




/* ================= CERTIFICATES / REPORTS SECTION CSS START ================= */

.cert-reports-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.cert-reports-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.cert-reports-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.cert-reports-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.cert-reports-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.cert-reports-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.cert-reports-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.cert-reports-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.cert-reports-head p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.cert-reports-wrapper {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= INFO CARD ================= */

.cert-reports-info-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.cert-reports-info-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.cert-reports-info-card::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.cert-reports-info-card > * {
  position: relative;
  z-index: 2;
}

.cert-reports-info-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.cert-reports-info-icon i {
  font-size: 31px;
}

.cert-reports-info-card > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.cert-reports-info-card h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.cert-reports-info-card p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.cert-reports-info-list {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
}

.cert-reports-info-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.cert-reports-info-item > i {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.cert-reports-info-item h4 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
}

.cert-reports-info-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.cert-reports-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.cert-reports-info-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.cert-reports-info-btn i {
  transition: transform 0.3s ease;
}

.cert-reports-info-btn:hover i {
  transform: translateX(5px);
}

/* ================= GRID ================= */

.cert-reports-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.cert-reports-card {
  position: relative;
  min-height: 245px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.cert-reports-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.cert-reports-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.cert-reports-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.cert-reports-card-icon,
.cert-reports-card-content {
  position: relative;
  z-index: 2;
}

.cert-reports-card-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cert-reports-card.active .cert-reports-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.cert-reports-card-icon i {
  font-size: 26px;
}

.cert-reports-card-content > span {
  display: inline-flex;
  margin-bottom: 9px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.cert-reports-card-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.cert-reports-card-content p {
  margin: 0 0 17px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.cert-reports-meta {
  display: grid;
  gap: 8px;
}

.cert-reports-meta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 850;
  transition: all 0.3s ease;
}

.cert-reports-meta a i {
  color: var(--secondary);
  font-size: 13px;
}

.cert-reports-meta a:hover {
  color: var(--primary);
  transform: translateX(3px);
}

/* ================= CATEGORY ================= */

.cert-reports-category-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.cert-reports-category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.cert-reports-category-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.cert-reports-category-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.cert-reports-category-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.cert-reports-category-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.cert-reports-category-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.cert-reports-category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.cert-reports-category-item {
  position: relative;
  padding: 22px;
  border-radius: 24px;
  background: var(--light-bg);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: all 0.35s ease;
}

.cert-reports-category-item::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.cert-reports-category-item::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.cert-reports-category-item i,
.cert-reports-category-item h4,
.cert-reports-category-item p {
  position: relative;
  z-index: 2;
}

.cert-reports-category-item > i {
  width: 56px;
  height: 56px;
  margin-bottom: 15px;
  border-radius: 18px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.cert-reports-category-item.active > i {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.cert-reports-category-item h4 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.cert-reports-category-item p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.58;
  font-weight: 500;
}

/* ================= PROCESS ================= */

.cert-reports-process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.cert-reports-process-card {
  position: relative;
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
}

.cert-reports-process-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
}

.cert-reports-process-card span {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 950;
}

.cert-reports-process-card h4 {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

.cert-reports-process-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

/* ================= TABLE ================= */

.cert-reports-table-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.cert-reports-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.cert-reports-table-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.cert-reports-table-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.cert-reports-table-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.cert-reports-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.cert-reports-table-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.cert-reports-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.cert-reports-table {
  width: 100%;
  min-width: 850px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.cert-reports-table thead th {
  padding: 0 16px 8px;
  color: var(--primary-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cert-reports-table tbody tr {
  background: var(--light-bg);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.04);
}

.cert-reports-table tbody td {
  padding: 16px;
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 750;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.cert-reports-table tbody td:first-child {
  border-left: 1px solid var(--border);
  border-radius: 16px 0 0 16px;
  color: var(--primary-dark);
  font-weight: 950;
}

.cert-reports-table tbody td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 16px 16px 0;
}

.cert-reports-table td a {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
}

.cert-reports-status {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.cert-reports-status.active {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.cert-reports-status.pending {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

/* ================= QUICK ROW ================= */

.cert-reports-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.cert-reports-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 112px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.cert-reports-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.cert-reports-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.cert-reports-quick-card div {
  position: relative;
  z-index: 2;
}

.cert-reports-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.cert-reports-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= NOTE ================= */

.cert-reports-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.cert-reports-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.cert-reports-note-icon i {
  font-size: 26px;
}

.cert-reports-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.cert-reports-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.cert-reports-card:hover,
.cert-reports-category-item:hover,
.cert-reports-quick-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.cert-reports-card:hover::before,
.cert-reports-category-item:hover::before,
.cert-reports-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.cert-reports-card:hover::after,
.cert-reports-category-item:hover::after {
  transform: scaleX(1);
}

.cert-reports-card:hover .cert-reports-card-content h3,
.cert-reports-category-item:hover h4,
.cert-reports-quick-card:hover h4 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .cert-reports-wrapper {
    grid-template-columns: 1fr;
  }

  .cert-reports-head h2 {
    font-size: 38px;
  }

  .cert-reports-info-card {
    min-height: auto;
  }

  .cert-reports-category-grid,
  .cert-reports-process-row,
  .cert-reports-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .cert-reports-section {
    padding: 64px 0;
  }

  .cert-reports-head {
    margin-bottom: 36px;
  }

  .cert-reports-head h2 {
    font-size: 34px;
  }

  .cert-reports-info-card h3 {
    font-size: 28px;
  }

  .cert-reports-category-head,
  .cert-reports-table-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .cert-reports-grid {
    grid-template-columns: 1fr;
  }

  .cert-reports-card {
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .cert-reports-section {
    padding: 52px 0;
  }

  .cert-reports-badge {
    font-size: 11.5px;
  }

  .cert-reports-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .cert-reports-head p {
    font-size: 14px;
  }

  .cert-reports-info-card {
    padding: 24px;
    border-radius: 24px;
  }

  .cert-reports-info-card h3 {
    font-size: 23px;
  }

  .cert-reports-info-card p {
    font-size: 14px;
  }

  .cert-reports-info-item {
    grid-template-columns: 1fr;
  }

  .cert-reports-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .cert-reports-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .cert-reports-card-content h3 {
    font-size: 19px;
  }

  .cert-reports-card-content p {
    font-size: 13.5px;
  }

  .cert-reports-meta a {
    width: 100%;
  }

  .cert-reports-category-card,
  .cert-reports-table-card {
    padding: 20px;
    border-radius: 24px;
  }

  .cert-reports-category-head h3,
  .cert-reports-table-head h3 {
    font-size: 21px;
  }

  .cert-reports-category-btn,
  .cert-reports-table-btn {
    width: 100%;
  }

  .cert-reports-category-grid,
  .cert-reports-process-row,
  .cert-reports-quick-row {
    grid-template-columns: 1fr;
  }

  .cert-reports-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .cert-reports-head h2 {
    font-size: 25px;
  }

  .cert-reports-info-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .cert-reports-info-btn {
    width: 100%;
  }
}

/* ================= CERTIFICATES / REPORTS SECTION CSS END ================= */















/* ================= PROSPECTUS SECTION CSS START ================= */

.prospectus-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.prospectus-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.prospectus-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.prospectus-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.prospectus-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.prospectus-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.prospectus-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.prospectus-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.prospectus-head p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.prospectus-wrapper {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= INFO CARD ================= */

.prospectus-info-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.prospectus-info-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.prospectus-info-card::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.prospectus-info-card > * {
  position: relative;
  z-index: 2;
}

.prospectus-info-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.prospectus-info-icon i {
  font-size: 31px;
}

.prospectus-info-card > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.prospectus-info-card h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.prospectus-info-card p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.prospectus-info-list {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
}

.prospectus-info-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.prospectus-info-item > i {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.prospectus-info-item h4 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
}

.prospectus-info-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.prospectus-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.prospectus-info-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.prospectus-info-btn i {
  transition: transform 0.3s ease;
}

.prospectus-info-btn:hover i {
  transform: translateX(5px);
}

/* ================= GRID ================= */

.prospectus-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.prospectus-card {
  position: relative;
  min-height: 245px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.prospectus-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.prospectus-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.prospectus-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.prospectus-card-icon,
.prospectus-card-content {
  position: relative;
  z-index: 2;
}

.prospectus-card-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.prospectus-card.active .prospectus-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.prospectus-card-icon i {
  font-size: 26px;
}

.prospectus-card-content > span {
  display: inline-flex;
  margin-bottom: 9px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.prospectus-card-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.prospectus-card-content p {
  margin: 0 0 17px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.prospectus-meta {
  display: grid;
  gap: 8px;
}

.prospectus-meta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 850;
  transition: all 0.3s ease;
}

.prospectus-meta a i {
  color: var(--secondary);
  font-size: 13px;
}

.prospectus-meta a:hover {
  color: var(--primary);
  transform: translateX(3px);
}

/* ================= HIGHLIGHT ================= */

.prospectus-highlight-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.prospectus-highlight-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.prospectus-highlight-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.prospectus-highlight-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.prospectus-highlight-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.prospectus-highlight-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.prospectus-highlight-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.prospectus-highlight-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.prospectus-highlight-item {
  position: relative;
  padding: 22px;
  border-radius: 24px;
  background: var(--light-bg);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: all 0.35s ease;
}

.prospectus-highlight-item::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.prospectus-highlight-item::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.prospectus-highlight-item i,
.prospectus-highlight-item h4,
.prospectus-highlight-item p {
  position: relative;
  z-index: 2;
}

.prospectus-highlight-item > i {
  width: 56px;
  height: 56px;
  margin-bottom: 15px;
  border-radius: 18px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.prospectus-highlight-item.active > i {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.prospectus-highlight-item h4 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.prospectus-highlight-item p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.58;
  font-weight: 500;
}

/* ================= PROCESS ================= */

.prospectus-process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.prospectus-process-card {
  position: relative;
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
}

.prospectus-process-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
}

.prospectus-process-card span {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 950;
}

.prospectus-process-card h4 {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

.prospectus-process-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

/* ================= TABLE ================= */

.prospectus-table-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.prospectus-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.prospectus-table-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.prospectus-table-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.prospectus-table-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.prospectus-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.prospectus-table-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.prospectus-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.prospectus-table {
  width: 100%;
  min-width: 850px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.prospectus-table thead th {
  padding: 0 16px 8px;
  color: var(--primary-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.prospectus-table tbody tr {
  background: var(--light-bg);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.04);
}

.prospectus-table tbody td {
  padding: 16px;
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 750;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.prospectus-table tbody td:first-child {
  border-left: 1px solid var(--border);
  border-radius: 16px 0 0 16px;
  color: var(--primary-dark);
  font-weight: 950;
}

.prospectus-table tbody td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 16px 16px 0;
}

.prospectus-table td a {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
}

.prospectus-status {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.prospectus-status.active {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.prospectus-status.pending {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

/* ================= QUICK ROW ================= */

.prospectus-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.prospectus-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 112px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.prospectus-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.prospectus-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.prospectus-quick-card div {
  position: relative;
  z-index: 2;
}

.prospectus-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.prospectus-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= NOTE ================= */

.prospectus-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.prospectus-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.prospectus-note-icon i {
  font-size: 26px;
}

.prospectus-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.prospectus-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.prospectus-card:hover,
.prospectus-highlight-item:hover,
.prospectus-quick-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.prospectus-card:hover::before,
.prospectus-highlight-item:hover::before,
.prospectus-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.prospectus-card:hover::after,
.prospectus-highlight-item:hover::after {
  transform: scaleX(1);
}

.prospectus-card:hover .prospectus-card-content h3,
.prospectus-highlight-item:hover h4,
.prospectus-quick-card:hover h4 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .prospectus-wrapper {
    grid-template-columns: 1fr;
  }

  .prospectus-head h2 {
    font-size: 38px;
  }

  .prospectus-info-card {
    min-height: auto;
  }

  .prospectus-highlight-grid,
  .prospectus-process-row,
  .prospectus-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .prospectus-section {
    padding: 64px 0;
  }

  .prospectus-head {
    margin-bottom: 36px;
  }

  .prospectus-head h2 {
    font-size: 34px;
  }

  .prospectus-info-card h3 {
    font-size: 28px;
  }

  .prospectus-highlight-head,
  .prospectus-table-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .prospectus-grid {
    grid-template-columns: 1fr;
  }

  .prospectus-card {
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .prospectus-section {
    padding: 52px 0;
  }

  .prospectus-badge {
    font-size: 11.5px;
  }

  .prospectus-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .prospectus-head p {
    font-size: 14px;
  }

  .prospectus-info-card {
    padding: 24px;
    border-radius: 24px;
  }

  .prospectus-info-card h3 {
    font-size: 23px;
  }

  .prospectus-info-card p {
    font-size: 14px;
  }

  .prospectus-info-item {
    grid-template-columns: 1fr;
  }

  .prospectus-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .prospectus-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .prospectus-card-content h3 {
    font-size: 19px;
  }

  .prospectus-card-content p {
    font-size: 13.5px;
  }

  .prospectus-meta a {
    width: 100%;
  }

  .prospectus-highlight-card,
  .prospectus-table-card {
    padding: 20px;
    border-radius: 24px;
  }

  .prospectus-highlight-head h3,
  .prospectus-table-head h3 {
    font-size: 21px;
  }

  .prospectus-highlight-btn,
  .prospectus-table-btn {
    width: 100%;
  }

  .prospectus-highlight-grid,
  .prospectus-process-row,
  .prospectus-quick-row {
    grid-template-columns: 1fr;
  }

  .prospectus-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .prospectus-head h2 {
    font-size: 25px;
  }

  .prospectus-info-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .prospectus-info-btn {
    width: 100%;
  }
}

/* ================= PROSPECTUS SECTION CSS END ================= */




/* ================= ADMISSION FORMS SECTION CSS START ================= */

.admission-forms-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.admission-forms-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.admission-forms-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.admission-forms-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.admission-forms-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.admission-forms-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.admission-forms-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.admission-forms-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.admission-forms-head p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.admission-forms-wrapper {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= INFO CARD ================= */

.admission-forms-info-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.admission-forms-info-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.admission-forms-info-card::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.admission-forms-info-card > * {
  position: relative;
  z-index: 2;
}

.admission-forms-info-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.admission-forms-info-icon i {
  font-size: 31px;
}

.admission-forms-info-card > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.admission-forms-info-card h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.admission-forms-info-card p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.admission-forms-info-list {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
}

.admission-forms-info-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.admission-forms-info-item > i {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.admission-forms-info-item h4 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
}

.admission-forms-info-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.admission-forms-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.admission-forms-info-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.admission-forms-info-btn i {
  transition: transform 0.3s ease;
}

.admission-forms-info-btn:hover i {
  transform: translateX(5px);
}

/* ================= GRID ================= */

.admission-forms-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.admission-forms-card {
  position: relative;
  min-height: 245px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.admission-forms-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.admission-forms-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.admission-forms-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.admission-forms-card-icon,
.admission-forms-card-content {
  position: relative;
  z-index: 2;
}

.admission-forms-card-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.admission-forms-card.active .admission-forms-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.admission-forms-card-icon i {
  font-size: 26px;
}

.admission-forms-card-content > span {
  display: inline-flex;
  margin-bottom: 9px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.admission-forms-card-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.admission-forms-card-content p {
  margin: 0 0 17px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.admission-forms-meta {
  display: grid;
  gap: 8px;
}

.admission-forms-meta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 850;
  transition: all 0.3s ease;
}

.admission-forms-meta a i {
  color: var(--secondary);
  font-size: 13px;
}

.admission-forms-meta a:hover {
  color: var(--primary);
  transform: translateX(3px);
}

/* ================= REQUIRED DOCUMENTS ================= */

.admission-forms-required-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.admission-forms-required-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.admission-forms-required-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.admission-forms-required-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.admission-forms-required-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.admission-forms-required-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.admission-forms-required-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.admission-forms-required-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.admission-forms-required-item {
  position: relative;
  padding: 22px;
  border-radius: 24px;
  background: var(--light-bg);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: all 0.35s ease;
}

.admission-forms-required-item::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.admission-forms-required-item::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.admission-forms-required-item i,
.admission-forms-required-item h4,
.admission-forms-required-item p {
  position: relative;
  z-index: 2;
}

.admission-forms-required-item > i {
  width: 56px;
  height: 56px;
  margin-bottom: 15px;
  border-radius: 18px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.admission-forms-required-item.active > i {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.admission-forms-required-item h4 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.admission-forms-required-item p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.58;
  font-weight: 500;
}

/* ================= PROCESS ================= */

.admission-forms-process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.admission-forms-process-card {
  position: relative;
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
}

.admission-forms-process-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
}

.admission-forms-process-card span {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 950;
}

.admission-forms-process-card h4 {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

.admission-forms-process-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

/* ================= TABLE ================= */

.admission-forms-table-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.admission-forms-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.admission-forms-table-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.admission-forms-table-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.admission-forms-table-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.admission-forms-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.admission-forms-table-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.admission-forms-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.admission-forms-table {
  width: 100%;
  min-width: 850px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.admission-forms-table thead th {
  padding: 0 16px 8px;
  color: var(--primary-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.admission-forms-table tbody tr {
  background: var(--light-bg);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.04);
}

.admission-forms-table tbody td {
  padding: 16px;
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 750;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.admission-forms-table tbody td:first-child {
  border-left: 1px solid var(--border);
  border-radius: 16px 0 0 16px;
  color: var(--primary-dark);
  font-weight: 950;
}

.admission-forms-table tbody td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 16px 16px 0;
}

.admission-forms-table td a {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
}

.admission-forms-status {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.admission-forms-status.active {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.admission-forms-status.pending {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

/* ================= QUICK ROW ================= */

.admission-forms-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.admission-forms-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 112px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.admission-forms-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.admission-forms-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.admission-forms-quick-card div {
  position: relative;
  z-index: 2;
}

.admission-forms-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.admission-forms-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= NOTE ================= */

.admission-forms-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.admission-forms-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.admission-forms-note-icon i {
  font-size: 26px;
}

.admission-forms-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.admission-forms-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.admission-forms-card:hover,
.admission-forms-required-item:hover,
.admission-forms-quick-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.admission-forms-card:hover::before,
.admission-forms-required-item:hover::before,
.admission-forms-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.admission-forms-card:hover::after,
.admission-forms-required-item:hover::after {
  transform: scaleX(1);
}

.admission-forms-card:hover .admission-forms-card-content h3,
.admission-forms-required-item:hover h4,
.admission-forms-quick-card:hover h4 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .admission-forms-wrapper {
    grid-template-columns: 1fr;
  }

  .admission-forms-head h2 {
    font-size: 38px;
  }

  .admission-forms-info-card {
    min-height: auto;
  }

  .admission-forms-required-grid,
  .admission-forms-process-row,
  .admission-forms-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .admission-forms-section {
    padding: 64px 0;
  }

  .admission-forms-head {
    margin-bottom: 36px;
  }

  .admission-forms-head h2 {
    font-size: 34px;
  }

  .admission-forms-info-card h3 {
    font-size: 28px;
  }

  .admission-forms-required-head,
  .admission-forms-table-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .admission-forms-grid {
    grid-template-columns: 1fr;
  }

  .admission-forms-card {
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .admission-forms-section {
    padding: 52px 0;
  }

  .admission-forms-badge {
    font-size: 11.5px;
  }

  .admission-forms-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .admission-forms-head p {
    font-size: 14px;
  }

  .admission-forms-info-card {
    padding: 24px;
    border-radius: 24px;
  }

  .admission-forms-info-card h3 {
    font-size: 23px;
  }

  .admission-forms-info-card p {
    font-size: 14px;
  }

  .admission-forms-info-item {
    grid-template-columns: 1fr;
  }

  .admission-forms-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .admission-forms-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .admission-forms-card-content h3 {
    font-size: 19px;
  }

  .admission-forms-card-content p {
    font-size: 13.5px;
  }

  .admission-forms-meta a {
    width: 100%;
  }

  .admission-forms-required-card,
  .admission-forms-table-card {
    padding: 20px;
    border-radius: 24px;
  }

  .admission-forms-required-head h3,
  .admission-forms-table-head h3 {
    font-size: 21px;
  }

  .admission-forms-required-btn,
  .admission-forms-table-btn {
    width: 100%;
  }

  .admission-forms-required-grid,
  .admission-forms-process-row,
  .admission-forms-quick-row {
    grid-template-columns: 1fr;
  }

  .admission-forms-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .admission-forms-head h2 {
    font-size: 25px;
  }

  .admission-forms-info-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .admission-forms-info-btn {
    width: 100%;
  }
}

/* ================= ADMISSION FORMS SECTION CSS END ================= */




/* ================= EXAM FORM SECTION START ================= */

.exam-form-section {
  position: relative;
  overflow: hidden;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 10%, rgba(23, 63, 115, 0.075), transparent 32%),
    radial-gradient(circle at 92% 86%, rgba(181, 31, 42, 0.055), transparent 31%),
    linear-gradient(135deg, #ffffff 0%, #f7faff 100%);
}

.exam-form-section .container {
  position: relative;
  z-index: 2;
}

.exam-form-shape {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}

.exam-form-shape-1 {
  width: 290px;
  height: 290px;
  left: -120px;
  top: -130px;
  background: rgba(244, 180, 0, 0.085);
}

.exam-form-shape-2 {
  width: 320px;
  height: 320px;
  right: -145px;
  bottom: -150px;
  border: 38px solid rgba(23, 63, 115, 0.055);
}

/* HEAD */
.exam-form-head {
  max-width: 900px;
  margin: 0 auto 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.exam-form-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  max-width: max-content;
  padding: 8px 16px;
  margin-bottom: 14px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(234, 241, 250, 0.96), rgba(255, 255, 255, 0.92));
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.14);
  box-shadow: 0 8px 22px rgba(13, 45, 85, 0.055);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 850;
}

.exam-form-badge i {
  color: var(--secondary);
}

.exam-form-head h2 {
  max-width: 820px;
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: clamp(34px, 4.4vw, 48px);
  line-height: 1.12;
  font-weight: 950;
  letter-spacing: -1px;
}

.exam-form-head p {
  max-width: 780px;
  margin: 0;
  color: var(--text);
  font-size: 15.8px;
  line-height: 1.8;
  font-weight: 500;
}

/* TOP WRAPPER */
.exam-form-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr);
  gap: 26px;
  align-items: stretch;
  margin-bottom: 30px;
}

/* LEFT PREMIUM CARD */
.exam-form-info-card {
  position: relative;
  overflow: hidden;
  padding: 34px;
  border-radius: 34px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 14% 12%, rgba(244, 180, 0, 0.16), transparent 34%),
    radial-gradient(circle at 92% 8%, rgba(255, 255, 255, 0.11), transparent 32%),
    linear-gradient(135deg, rgba(23, 63, 115, 0.98), rgba(13, 45, 85, 0.99));
  color: #ffffff;
  box-shadow: 0 26px 70px rgba(13, 45, 85, 0.24);
}

.exam-form-info-card::before {
  content: "";
  position: absolute;
  right: -76px;
  top: -76px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  border: 31px solid rgba(255, 255, 255, 0.075);
}

.exam-form-info-card::after {
  content: "";
  position: absolute;
  left: -70px;
  bottom: -70px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: rgba(181, 31, 42, 0.22);
}

.exam-form-info-card > * {
  position: relative;
  z-index: 2;
}

.exam-form-info-main {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 18px;
  align-items: flex-start;
}

.exam-form-info-icon {
  width: 66px;
  height: 66px;
  min-width: 66px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 28px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 14px 28px rgba(0, 0, 0, 0.14);
}

.exam-form-info-title {
  min-width: 0;
}

.exam-form-info-title span {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  padding: 7px 13px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: rgba(244, 180, 0, 0.18);
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
}

.exam-form-info-title h3 {
  margin: 0 0 13px;
  color: #ffffff;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -0.9px;
}

.exam-form-info-title p {
  max-width: 760px;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14.8px;
  line-height: 1.78;
  font-weight: 500;
}

/* INFO LIST */
.exam-form-info-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 28px 0;
}

.exam-form-info-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: flex-start;
  gap: 13px;
  padding: 16px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.095);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  transition: all 0.35s ease;
}

.exam-form-info-item:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.13);
}

.exam-form-info-item > i {
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 18px;
}

.exam-form-info-item h4 {
  margin: 0 0 5px;
  color: #ffffff;
  font-size: 14.5px;
  line-height: 1.25;
  font-weight: 950;
}

.exam-form-info-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12.4px;
  line-height: 1.55;
  font-weight: 500;
}

.exam-form-info-footer {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.exam-form-info-btn,
.exam-form-required-btn,
.exam-form-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 12px 20px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 900;
  transition: all 0.35s ease;
}

.exam-form-info-btn {
  min-width: 210px;
  background: #ffffff;
  color: var(--primary);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
}

.exam-form-info-btn:hover {
  color: var(--primary-dark);
  transform: translateY(-3px);
}

.exam-form-info-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 12px 20px;
  border-radius: 999px;
  color: #ffffff;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 900;
  background: rgba(255, 255, 255, 0.105);
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: all 0.35s ease;
}

.exam-form-info-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-3px);
}

/* RIGHT CONTENT */
.exam-form-content {
  min-width: 0;
}

.exam-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  height: 100%;
}

/* RIGHT COMPACT CARD */
.exam-form-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 14px;
  align-items: flex-start;
  min-height: auto;
  padding: 18px;
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 255, 0.96));
  border: 1px solid rgba(220, 229, 240, 0.96);
  box-shadow:
    0 14px 32px rgba(13, 45, 85, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition: all 0.35s ease;
}

.exam-form-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(23, 63, 115, 0.06), rgba(181, 31, 42, 0.035));
  opacity: 0;
  transition: all 0.35s ease;
}

.exam-form-card::after {
  content: "";
  position: absolute;
  right: -42px;
  bottom: -42px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.045);
  transition: all 0.35s ease;
}

.exam-form-card:hover,
.exam-form-card.active {
  transform: translateY(-4px);
  border-color: rgba(23, 63, 115, 0.20);
  box-shadow: 0 22px 48px rgba(13, 45, 85, 0.12);
}

.exam-form-card:hover::before,
.exam-form-card.active::before {
  opacity: 1;
}

.exam-form-card > * {
  position: relative;
  z-index: 2;
}

.exam-form-card-icon {
  width: 52px;
  height: 52px;
  min-width: 52px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #ffffff;
  font-size: 21px;
  box-shadow: 0 12px 24px rgba(13, 45, 85, 0.17);
}

.exam-form-grid .exam-form-card:nth-child(2) .exam-form-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.exam-form-grid .exam-form-card:nth-child(3) .exam-form-card-icon {
  background: linear-gradient(135deg, var(--success), #0d6d3a);
}

.exam-form-grid .exam-form-card:nth-child(4) .exam-form-card-icon {
  background: linear-gradient(135deg, var(--accent), #d88d00);
}

.exam-form-card-content span {
  display: inline-flex;
  padding: 5px 10px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: rgba(23, 63, 115, 0.08);
  color: var(--primary);
  font-size: 11px;
  font-weight: 900;
}

.exam-form-card-content h3 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.3;
  font-weight: 950;
  letter-spacing: -0.35px;
}

.exam-form-card-content p {
  margin: 0 0 12px;
  color: var(--text);
  font-size: 12.8px;
  line-height: 1.58;
  font-weight: 500;
}

.exam-form-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.exam-form-meta a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.12);
  text-decoration: none;
  font-size: 12px;
  font-weight: 900;
  transition: all 0.32s ease;
}

.exam-form-meta a:hover {
  background: var(--primary);
  color: #ffffff;
  transform: translateY(-2px);
}

/* COMMON BIG CARDS */
.exam-form-required-card,
.exam-form-table-card,
.exam-form-note {
  position: relative;
  overflow: hidden;
  margin-top: 28px;
  padding: 30px;
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 255, 0.96));
  border: 1px solid rgba(220, 229, 240, 0.96);
  box-shadow:
    0 16px 38px rgba(13, 45, 85, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.exam-form-required-head,
.exam-form-table-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 24px;
}

.exam-form-required-head span,
.exam-form-table-head span {
  display: inline-flex;
  padding: 7px 12px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: rgba(23, 63, 115, 0.08);
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
}

.exam-form-required-head h3,
.exam-form-table-head h3 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 26px;
  line-height: 1.25;
  font-weight: 950;
}

.exam-form-required-head p,
.exam-form-table-head p {
  max-width: 680px;
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.7;
  font-weight: 500;
}

.exam-form-required-btn,
.exam-form-table-btn {
  background: #ffffff;
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.14);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.07);
  white-space: nowrap;
}

.exam-form-required-btn:hover,
.exam-form-table-btn:hover {
  background: var(--primary);
  color: #ffffff;
  transform: translateY(-3px);
}

/* REQUIRED GRID */
.exam-form-required-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.exam-form-required-item {
  padding: 22px;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid rgba(23, 63, 115, 0.10);
  transition: all 0.35s ease;
}

.exam-form-required-item:hover,
.exam-form-required-item.active {
  transform: translateY(-5px);
  border-color: rgba(23, 63, 115, 0.20);
  box-shadow: 0 18px 38px rgba(13, 45, 85, 0.10);
}

.exam-form-required-item i {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin-bottom: 15px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #ffffff;
  font-size: 22px;
  box-shadow: 0 12px 26px rgba(13, 45, 85, 0.17);
}

.exam-form-required-grid .exam-form-required-item:nth-child(2) i {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.exam-form-required-grid .exam-form-required-item:nth-child(3) i {
  background: linear-gradient(135deg, var(--success), #0d6d3a);
}

.exam-form-required-grid .exam-form-required-item:nth-child(4) i {
  background: linear-gradient(135deg, var(--accent), #d88d00);
}

.exam-form-required-item h4 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 16px;
  font-weight: 950;
}

.exam-form-required-item p {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.6;
  font-weight: 500;
}

/* PROCESS */
.exam-form-process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 28px;
}

.exam-form-process-card {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid rgba(23, 63, 115, 0.10);
  box-shadow: 0 12px 30px rgba(13, 45, 85, 0.06);
  transition: all 0.35s ease;
}

.exam-form-process-card:hover {
  transform: translateY(-6px);
  border-color: rgba(23, 63, 115, 0.20);
  box-shadow: 0 22px 48px rgba(13, 45, 85, 0.12);
}

.exam-form-process-card span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border-radius: 15px;
  background: rgba(23, 63, 115, 0.09);
  color: var(--primary);
  font-size: 13px;
  font-weight: 950;
}

.exam-form-process-card h4 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 16px;
  font-weight: 950;
}

.exam-form-process-card p {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.6;
  font-weight: 500;
}

/* TABLE */
.exam-form-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.exam-form-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
  min-width: 760px;
}

.exam-form-table th {
  padding: 12px 15px;
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 950;
  text-align: left;
  white-space: nowrap;
}

.exam-form-table td {
  padding: 16px 15px;
  background: #ffffff;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 650;
  border-top: 1px solid rgba(23, 63, 115, 0.10);
  border-bottom: 1px solid rgba(23, 63, 115, 0.10);
}

.exam-form-table td:first-child {
  border-left: 1px solid rgba(23, 63, 115, 0.10);
  border-radius: 18px 0 0 18px;
  color: var(--primary-dark);
  font-weight: 950;
}

.exam-form-table td:last-child {
  border-right: 1px solid rgba(23, 63, 115, 0.10);
  border-radius: 0 18px 18px 0;
}

.exam-form-table td a {
  color: var(--primary);
  font-size: 13px;
  font-weight: 950;
  text-decoration: none;
}

.exam-form-status {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.exam-form-status.active {
  background: rgba(19, 138, 75, 0.10);
  color: var(--success);
}

.exam-form-status.pending {
  background: rgba(244, 180, 0, 0.16);
  color: #b77900;
}

/* QUICK ROW */
.exam-form-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 28px;
}

.exam-form-quick-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid rgba(23, 63, 115, 0.10);
  box-shadow: 0 12px 30px rgba(13, 45, 85, 0.06);
  transition: all 0.35s ease;
}

.exam-form-quick-card:hover {
  transform: translateY(-5px);
  border-color: rgba(23, 63, 115, 0.20);
  box-shadow: 0 20px 44px rgba(13, 45, 85, 0.12);
}

.exam-form-quick-card > i {
  width: 48px;
  height: 48px;
  min-width: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(23, 63, 115, 0.09);
  color: var(--primary);
  font-size: 20px;
}

.exam-form-quick-card h4 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 15.5px;
  font-weight: 950;
}

.exam-form-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 12.8px;
  line-height: 1.55;
  font-weight: 500;
}

/* NOTE */
.exam-form-note {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.exam-form-note-icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--accent), #d88d00);
  color: #ffffff;
  font-size: 24px;
}

.exam-form-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 18px;
  font-weight: 950;
}

.exam-form-note p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
  font-weight: 500;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .exam-form-section {
    padding: 74px 0;
  }

  .exam-form-wrapper {
    grid-template-columns: 1fr;
  }

  .exam-form-info-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .exam-form-info-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .exam-form-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .exam-form-card {
    display: block;
    padding: 22px;
  }

  .exam-form-card-icon {
    margin-bottom: 16px;
  }

  .exam-form-required-grid,
  .exam-form-process-row,
  .exam-form-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .exam-form-section {
    padding: 64px 0;
  }

  .exam-form-head {
    margin-bottom: 36px;
  }

  .exam-form-info-card {
    padding: 28px;
    border-radius: 28px;
  }

  .exam-form-info-main {
    grid-template-columns: 66px 1fr;
  }

  .exam-form-info-list {
    grid-template-columns: 1fr;
  }

  .exam-form-required-head,
  .exam-form-table-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .exam-form-required-btn,
  .exam-form-table-btn {
    width: auto;
  }
}

@media (max-width: 767px) {
  .exam-form-section {
    padding: 56px 0;
  }

  .exam-form-head h2 {
    font-size: 32px;
  }

  .exam-form-head p {
    font-size: 14.5px;
  }

  .exam-form-info-card,
  .exam-form-required-card,
  .exam-form-table-card,
  .exam-form-note {
    padding: 22px;
    border-radius: 24px;
  }

  .exam-form-info-main {
    grid-template-columns: 1fr;
  }

  .exam-form-info-footer {
    grid-template-columns: 1fr;
  }

  .exam-form-grid {
    grid-template-columns: 1fr;
  }

  .exam-form-card {
    padding: 22px;
    border-radius: 24px;
  }

  .exam-form-process-row,
  .exam-form-quick-row,
  .exam-form-required-grid {
    grid-template-columns: 1fr;
  }

  .exam-form-note {
    flex-direction: column;
  }

  .exam-form-table {
    min-width: 0;
    border-spacing: 0;
  }

  .exam-form-table thead {
    display: none;
  }

  .exam-form-table,
  .exam-form-table tbody,
  .exam-form-table tr,
  .exam-form-table td {
    display: block;
    width: 100%;
  }

  .exam-form-table tr {
    margin-bottom: 14px;
    padding: 16px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid rgba(23, 63, 115, 0.10);
    box-shadow: 0 10px 24px rgba(13, 45, 85, 0.055);
  }

  .exam-form-table td {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 10px 0;
    border: 0;
    background: transparent;
    text-align: right;
  }

  .exam-form-table td:first-child,
  .exam-form-table td:last-child {
    border: 0;
    border-radius: 0;
  }

  .exam-form-table td::before {
    content: attr(data-label);
    color: var(--primary-dark);
    font-size: 12.5px;
    font-weight: 950;
    text-align: left;
  }
}

@media (max-width: 575px) {
  .exam-form-section {
    padding: 48px 0;
  }

  .exam-form-shape-1 {
    width: 210px;
    height: 210px;
    left: -120px;
    top: -115px;
  }

  .exam-form-shape-2 {
    width: 230px;
    height: 230px;
    right: -130px;
    bottom: -130px;
    border-width: 28px;
  }

  .exam-form-head h2 {
    font-size: 28px;
  }

  .exam-form-badge {
    font-size: 12px;
    padding: 8px 14px;
  }

  .exam-form-info-title h3 {
    font-size: 23px;
  }

  .exam-form-info-icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 18px;
    font-size: 23px;
  }

  .exam-form-info-item {
    grid-template-columns: 42px 1fr;
  }

  .exam-form-info-item > i {
    width: 42px;
    height: 42px;
    min-width: 42px;
  }

  .exam-form-required-head h3,
  .exam-form-table-head h3 {
    font-size: 23px;
  }

  .exam-form-required-btn,
  .exam-form-table-btn,
  .exam-form-info-btn,
  .exam-form-info-link {
    width: 100%;
  }

  .exam-form-meta a {
    width: 100%;
    justify-content: center;
  }

  .exam-form-quick-card {
    padding: 18px;
  }
}

@media (max-width: 420px) {
  .exam-form-head h2 {
    font-size: 25px;
  }

  .exam-form-head p {
    font-size: 13.5px;
  }

  .exam-form-info-card,
  .exam-form-card,
  .exam-form-required-card,
  .exam-form-table-card,
  .exam-form-note {
    padding: 18px;
    border-radius: 20px;
  }

  .exam-form-info-title h3 {
    font-size: 21px;
  }

  .exam-form-card-content h3 {
    font-size: 17px;
  }

  .exam-form-info-item {
    grid-template-columns: 1fr;
  }

  .exam-form-table td {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 5px;
  }
}

/* ================= EXAM FORM SECTION END ================= */




/* ================= SCHOLARSHIP FORMS SECTION CSS START ================= */

.scholarship-forms-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.scholarship-forms-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.scholarship-forms-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.scholarship-forms-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.scholarship-forms-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.scholarship-forms-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.scholarship-forms-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.scholarship-forms-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.scholarship-forms-head p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.scholarship-forms-wrapper {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= INFO CARD ================= */

.scholarship-forms-info-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.scholarship-forms-info-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.scholarship-forms-info-card::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.scholarship-forms-info-card > * {
  position: relative;
  z-index: 2;
}

.scholarship-forms-info-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.scholarship-forms-info-icon i {
  font-size: 31px;
}

.scholarship-forms-info-card > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.scholarship-forms-info-card h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.scholarship-forms-info-card p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.scholarship-forms-info-list {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
}

.scholarship-forms-info-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.scholarship-forms-info-item > i {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.scholarship-forms-info-item h4 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
}

.scholarship-forms-info-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.scholarship-forms-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.scholarship-forms-info-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.scholarship-forms-info-btn i {
  transition: transform 0.3s ease;
}

.scholarship-forms-info-btn:hover i {
  transform: translateX(5px);
}

/* ================= GRID ================= */

.scholarship-forms-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.scholarship-forms-card {
  position: relative;
  min-height: 245px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.scholarship-forms-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.scholarship-forms-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.scholarship-forms-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.scholarship-forms-card-icon,
.scholarship-forms-card-content {
  position: relative;
  z-index: 2;
}

.scholarship-forms-card-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.scholarship-forms-card.active .scholarship-forms-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.scholarship-forms-card-icon i {
  font-size: 26px;
}

.scholarship-forms-card-content > span {
  display: inline-flex;
  margin-bottom: 9px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.scholarship-forms-card-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.scholarship-forms-card-content p {
  margin: 0 0 17px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.scholarship-forms-meta {
  display: grid;
  gap: 8px;
}

.scholarship-forms-meta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 850;
  transition: all 0.3s ease;
}

.scholarship-forms-meta a i {
  color: var(--secondary);
  font-size: 13px;
}

.scholarship-forms-meta a:hover {
  color: var(--primary);
  transform: translateX(3px);
}

/* ================= REQUIRED DOCUMENTS ================= */

.scholarship-forms-required-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.scholarship-forms-required-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.scholarship-forms-required-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.scholarship-forms-required-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.scholarship-forms-required-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.scholarship-forms-required-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.scholarship-forms-required-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.scholarship-forms-required-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.scholarship-forms-required-item {
  position: relative;
  padding: 22px;
  border-radius: 24px;
  background: var(--light-bg);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: all 0.35s ease;
}

.scholarship-forms-required-item::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.scholarship-forms-required-item::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.scholarship-forms-required-item i,
.scholarship-forms-required-item h4,
.scholarship-forms-required-item p {
  position: relative;
  z-index: 2;
}

.scholarship-forms-required-item > i {
  width: 56px;
  height: 56px;
  margin-bottom: 15px;
  border-radius: 18px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.scholarship-forms-required-item.active > i {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.scholarship-forms-required-item h4 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.scholarship-forms-required-item p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.58;
  font-weight: 500;
}

/* ================= PROCESS ================= */

.scholarship-forms-process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.scholarship-forms-process-card {
  position: relative;
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
}

.scholarship-forms-process-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
}

.scholarship-forms-process-card span {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 950;
}

.scholarship-forms-process-card h4 {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

.scholarship-forms-process-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

/* ================= TABLE ================= */

.scholarship-forms-table-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.scholarship-forms-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.scholarship-forms-table-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.scholarship-forms-table-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.scholarship-forms-table-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.scholarship-forms-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.scholarship-forms-table-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.scholarship-forms-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.scholarship-forms-table {
  width: 100%;
  min-width: 850px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.scholarship-forms-table thead th {
  padding: 0 16px 8px;
  color: var(--primary-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.scholarship-forms-table tbody tr {
  background: var(--light-bg);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.04);
}

.scholarship-forms-table tbody td {
  padding: 16px;
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 750;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.scholarship-forms-table tbody td:first-child {
  border-left: 1px solid var(--border);
  border-radius: 16px 0 0 16px;
  color: var(--primary-dark);
  font-weight: 950;
}

.scholarship-forms-table tbody td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 16px 16px 0;
}

.scholarship-forms-table td a {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
}

.scholarship-forms-status {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.scholarship-forms-status.active {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.scholarship-forms-status.pending {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

/* ================= QUICK ROW ================= */

.scholarship-forms-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.scholarship-forms-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 112px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.scholarship-forms-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.scholarship-forms-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.scholarship-forms-quick-card div {
  position: relative;
  z-index: 2;
}

.scholarship-forms-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.scholarship-forms-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= NOTE ================= */

.scholarship-forms-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.scholarship-forms-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.scholarship-forms-note-icon i {
  font-size: 26px;
}

.scholarship-forms-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.scholarship-forms-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.scholarship-forms-card:hover,
.scholarship-forms-required-item:hover,
.scholarship-forms-quick-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.scholarship-forms-card:hover::before,
.scholarship-forms-required-item:hover::before,
.scholarship-forms-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.scholarship-forms-card:hover::after,
.scholarship-forms-required-item:hover::after {
  transform: scaleX(1);
}

.scholarship-forms-card:hover .scholarship-forms-card-content h3,
.scholarship-forms-required-item:hover h4,
.scholarship-forms-quick-card:hover h4 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .scholarship-forms-wrapper {
    grid-template-columns: 1fr;
  }

  .scholarship-forms-head h2 {
    font-size: 38px;
  }

  .scholarship-forms-info-card {
    min-height: auto;
  }

  .scholarship-forms-required-grid,
  .scholarship-forms-process-row,
  .scholarship-forms-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .scholarship-forms-section {
    padding: 64px 0;
  }

  .scholarship-forms-head {
    margin-bottom: 36px;
  }

  .scholarship-forms-head h2 {
    font-size: 34px;
  }

  .scholarship-forms-info-card h3 {
    font-size: 28px;
  }

  .scholarship-forms-required-head,
  .scholarship-forms-table-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .scholarship-forms-grid {
    grid-template-columns: 1fr;
  }

  .scholarship-forms-card {
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .scholarship-forms-section {
    padding: 52px 0;
  }

  .scholarship-forms-badge {
    font-size: 11.5px;
  }

  .scholarship-forms-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .scholarship-forms-head p {
    font-size: 14px;
  }

  .scholarship-forms-info-card {
    padding: 24px;
    border-radius: 24px;
  }

  .scholarship-forms-info-card h3 {
    font-size: 23px;
  }

  .scholarship-forms-info-card p {
    font-size: 14px;
  }

  .scholarship-forms-info-item {
    grid-template-columns: 1fr;
  }

  .scholarship-forms-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .scholarship-forms-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .scholarship-forms-card-content h3 {
    font-size: 19px;
  }

  .scholarship-forms-card-content p {
    font-size: 13.5px;
  }

  .scholarship-forms-meta a {
    width: 100%;
  }

  .scholarship-forms-required-card,
  .scholarship-forms-table-card {
    padding: 20px;
    border-radius: 24px;
  }

  .scholarship-forms-required-head h3,
  .scholarship-forms-table-head h3 {
    font-size: 21px;
  }

  .scholarship-forms-required-btn,
  .scholarship-forms-table-btn {
    width: 100%;
  }

  .scholarship-forms-required-grid,
  .scholarship-forms-process-row,
  .scholarship-forms-quick-row {
    grid-template-columns: 1fr;
  }

  .scholarship-forms-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .scholarship-forms-head h2 {
    font-size: 25px;
  }

  .scholarship-forms-info-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .scholarship-forms-info-btn {
    width: 100%;
  }
}

/* ================= SCHOLARSHIP FORMS SECTION CSS END ================= */




/* ================= SYLLABUS SECTION CSS START ================= */

.syllabus-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.syllabus-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.syllabus-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.syllabus-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.syllabus-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.syllabus-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.syllabus-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.syllabus-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.syllabus-head p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.syllabus-wrapper {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= INFO CARD ================= */

.syllabus-info-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.syllabus-info-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.syllabus-info-card::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.syllabus-info-card > * {
  position: relative;
  z-index: 2;
}

.syllabus-info-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.syllabus-info-icon i {
  font-size: 31px;
}

.syllabus-info-card > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.syllabus-info-card h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.syllabus-info-card p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.syllabus-info-list {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
}

.syllabus-info-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.syllabus-info-item > i {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.syllabus-info-item h4 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
}

.syllabus-info-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.syllabus-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.syllabus-info-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.syllabus-info-btn i {
  transition: transform 0.3s ease;
}

.syllabus-info-btn:hover i {
  transform: translateX(5px);
}

/* ================= GRID ================= */

.syllabus-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.syllabus-card {
  position: relative;
  min-height: 245px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.syllabus-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.syllabus-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.syllabus-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.syllabus-card-icon,
.syllabus-card-content {
  position: relative;
  z-index: 2;
}

.syllabus-card-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.syllabus-card.active .syllabus-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.syllabus-card-icon i {
  font-size: 26px;
}

.syllabus-card-content > span {
  display: inline-flex;
  margin-bottom: 9px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.syllabus-card-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.syllabus-card-content p {
  margin: 0 0 17px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.syllabus-meta {
  display: grid;
  gap: 8px;
}

.syllabus-meta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 850;
  transition: all 0.3s ease;
}

.syllabus-meta a i {
  color: var(--secondary);
  font-size: 13px;
}

.syllabus-meta a:hover {
  color: var(--primary);
  transform: translateX(3px);
}

/* ================= DEPARTMENT ================= */

.syllabus-department-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.syllabus-department-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.syllabus-department-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.syllabus-department-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.syllabus-department-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.syllabus-department-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.syllabus-department-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.syllabus-department-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.syllabus-department-item {
  position: relative;
  padding: 22px;
  border-radius: 24px;
  background: var(--light-bg);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: all 0.35s ease;
}

.syllabus-department-item::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.syllabus-department-item::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.syllabus-department-item i,
.syllabus-department-item h4,
.syllabus-department-item p,
.syllabus-department-item a {
  position: relative;
  z-index: 2;
}

.syllabus-department-item > i {
  width: 56px;
  height: 56px;
  margin-bottom: 15px;
  border-radius: 18px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.syllabus-department-item.active > i {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.syllabus-department-item h4 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.syllabus-department-item p {
  margin: 0 0 14px;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.58;
  font-weight: 500;
}

.syllabus-department-item a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--secondary);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
}

.syllabus-department-item a i {
  transition: transform 0.3s ease;
}

/* ================= PROCESS ================= */

.syllabus-process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.syllabus-process-card {
  position: relative;
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
}

.syllabus-process-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
}

.syllabus-process-card span {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 950;
}

.syllabus-process-card h4 {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

.syllabus-process-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

/* ================= TABLE ================= */

.syllabus-table-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.syllabus-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.syllabus-table-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.syllabus-table-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.syllabus-table-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.syllabus-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.syllabus-table-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.syllabus-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.syllabus-table {
  width: 100%;
  min-width: 850px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.syllabus-table thead th {
  padding: 0 16px 8px;
  color: var(--primary-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.syllabus-table tbody tr {
  background: var(--light-bg);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.04);
}

.syllabus-table tbody td {
  padding: 16px;
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 750;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.syllabus-table tbody td:first-child {
  border-left: 1px solid var(--border);
  border-radius: 16px 0 0 16px;
  color: var(--primary-dark);
  font-weight: 950;
}

.syllabus-table tbody td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 16px 16px 0;
}

.syllabus-table td a {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
}

.syllabus-status {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.syllabus-status.active {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.syllabus-status.pending {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

/* ================= QUICK ROW ================= */

.syllabus-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.syllabus-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 112px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.syllabus-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.syllabus-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.syllabus-quick-card div {
  position: relative;
  z-index: 2;
}

.syllabus-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.syllabus-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= NOTE ================= */

.syllabus-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.syllabus-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.syllabus-note-icon i {
  font-size: 26px;
}

.syllabus-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.syllabus-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.syllabus-card:hover,
.syllabus-department-item:hover,
.syllabus-quick-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.syllabus-card:hover::before,
.syllabus-department-item:hover::before,
.syllabus-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.syllabus-card:hover::after,
.syllabus-department-item:hover::after {
  transform: scaleX(1);
}

.syllabus-card:hover .syllabus-card-content h3,
.syllabus-department-item:hover h4,
.syllabus-quick-card:hover h4 {
  color: var(--secondary);
}

.syllabus-department-item:hover a i {
  transform: translateX(5px);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .syllabus-wrapper {
    grid-template-columns: 1fr;
  }

  .syllabus-head h2 {
    font-size: 38px;
  }

  .syllabus-info-card {
    min-height: auto;
  }

  .syllabus-department-grid,
  .syllabus-process-row,
  .syllabus-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .syllabus-section {
    padding: 64px 0;
  }

  .syllabus-head {
    margin-bottom: 36px;
  }

  .syllabus-head h2 {
    font-size: 34px;
  }

  .syllabus-info-card h3 {
    font-size: 28px;
  }

  .syllabus-department-head,
  .syllabus-table-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .syllabus-grid {
    grid-template-columns: 1fr;
  }

  .syllabus-card {
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .syllabus-section {
    padding: 52px 0;
  }

  .syllabus-badge {
    font-size: 11.5px;
  }

  .syllabus-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .syllabus-head p {
    font-size: 14px;
  }

  .syllabus-info-card {
    padding: 24px;
    border-radius: 24px;
  }

  .syllabus-info-card h3 {
    font-size: 23px;
  }

  .syllabus-info-card p {
    font-size: 14px;
  }

  .syllabus-info-item {
    grid-template-columns: 1fr;
  }

  .syllabus-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .syllabus-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .syllabus-card-content h3 {
    font-size: 19px;
  }

  .syllabus-card-content p {
    font-size: 13.5px;
  }

  .syllabus-meta a {
    width: 100%;
  }

  .syllabus-department-card,
  .syllabus-table-card {
    padding: 20px;
    border-radius: 24px;
  }

  .syllabus-department-head h3,
  .syllabus-table-head h3 {
    font-size: 21px;
  }

  .syllabus-department-btn,
  .syllabus-table-btn {
    width: 100%;
  }

  .syllabus-department-grid,
  .syllabus-process-row,
  .syllabus-quick-row {
    grid-template-columns: 1fr;
  }

  .syllabus-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .syllabus-head h2 {
    font-size: 25px;
  }

  .syllabus-info-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .syllabus-info-btn {
    width: 100%;
  }
}

/* ================= SYLLABUS SECTION CSS END ================= */




/* ================= ACADEMIC CALENDAR SECTION CSS START ================= */

.academic-calendar-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.academic-calendar-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.academic-calendar-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.academic-calendar-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.academic-calendar-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.academic-calendar-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.academic-calendar-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.academic-calendar-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.academic-calendar-head p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.academic-calendar-wrapper {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= INFO CARD ================= */

.academic-calendar-info-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.academic-calendar-info-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.academic-calendar-info-card::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.academic-calendar-info-card > * {
  position: relative;
  z-index: 2;
}

.academic-calendar-info-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.academic-calendar-info-icon i {
  font-size: 31px;
}

.academic-calendar-info-card > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.academic-calendar-info-card h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.academic-calendar-info-card p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.academic-calendar-info-list {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
}

.academic-calendar-info-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.academic-calendar-info-item > i {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.academic-calendar-info-item h4 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
}

.academic-calendar-info-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.academic-calendar-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.academic-calendar-info-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.academic-calendar-info-btn i {
  transition: transform 0.3s ease;
}

.academic-calendar-info-btn:hover i {
  transform: translateX(5px);
}

/* ================= GRID ================= */

.academic-calendar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.academic-calendar-card {
  position: relative;
  min-height: 245px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.academic-calendar-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.academic-calendar-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.academic-calendar-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.academic-calendar-card-icon,
.academic-calendar-card-content {
  position: relative;
  z-index: 2;
}

.academic-calendar-card-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.academic-calendar-card.active .academic-calendar-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.academic-calendar-card-icon i {
  font-size: 26px;
}

.academic-calendar-card-content > span {
  display: inline-flex;
  margin-bottom: 9px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.academic-calendar-card-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.academic-calendar-card-content p {
  margin: 0 0 17px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.academic-calendar-meta {
  display: grid;
  gap: 8px;
}

.academic-calendar-meta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 850;
  transition: all 0.3s ease;
}

.academic-calendar-meta a i {
  color: var(--secondary);
  font-size: 13px;
}

.academic-calendar-meta a:hover {
  color: var(--primary);
  transform: translateX(3px);
}

/* ================= MONTH CARD ================= */

.academic-calendar-month-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.academic-calendar-month-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.academic-calendar-month-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.academic-calendar-month-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.academic-calendar-month-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.academic-calendar-month-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.academic-calendar-month-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.academic-calendar-month-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.academic-calendar-month-item {
  position: relative;
  padding: 22px;
  border-radius: 24px;
  background: var(--light-bg);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: all 0.35s ease;
}

.academic-calendar-month-item::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.academic-calendar-month-item::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.academic-calendar-month-icon,
.academic-calendar-month-item span,
.academic-calendar-month-item h4,
.academic-calendar-month-item p {
  position: relative;
  z-index: 2;
}

.academic-calendar-month-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 15px;
  border-radius: 18px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.academic-calendar-month-item.active .academic-calendar-month-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.academic-calendar-month-icon i {
  font-size: 23px;
}

.academic-calendar-month-item span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 9px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  border: 1px solid var(--border);
  font-size: 10px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.academic-calendar-month-item h4 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.academic-calendar-month-item p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.58;
  font-weight: 500;
}

/* ================= PROCESS ================= */

.academic-calendar-process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.academic-calendar-process-card {
  position: relative;
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
}

.academic-calendar-process-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
}

.academic-calendar-process-card span {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 950;
}

.academic-calendar-process-card h4 {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

.academic-calendar-process-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

/* ================= TABLE ================= */

.academic-calendar-table-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.academic-calendar-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.academic-calendar-table-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.academic-calendar-table-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.academic-calendar-table-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.academic-calendar-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.academic-calendar-table-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.academic-calendar-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.academic-calendar-table {
  width: 100%;
  min-width: 850px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.academic-calendar-table thead th {
  padding: 0 16px 8px;
  color: var(--primary-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.academic-calendar-table tbody tr {
  background: var(--light-bg);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.04);
}

.academic-calendar-table tbody td {
  padding: 16px;
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 750;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.academic-calendar-table tbody td:first-child {
  border-left: 1px solid var(--border);
  border-radius: 16px 0 0 16px;
  color: var(--primary-dark);
  font-weight: 950;
}

.academic-calendar-table tbody td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 16px 16px 0;
}

.academic-calendar-table td a {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
}

.academic-calendar-status {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.academic-calendar-status.active {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.academic-calendar-status.pending {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

/* ================= QUICK ROW ================= */

.academic-calendar-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.academic-calendar-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 112px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.academic-calendar-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.academic-calendar-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.academic-calendar-quick-card div {
  position: relative;
  z-index: 2;
}

.academic-calendar-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.academic-calendar-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= NOTE ================= */

.academic-calendar-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.academic-calendar-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.academic-calendar-note-icon i {
  font-size: 26px;
}

.academic-calendar-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.academic-calendar-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.academic-calendar-card:hover,
.academic-calendar-month-item:hover,
.academic-calendar-quick-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.academic-calendar-card:hover::before,
.academic-calendar-month-item:hover::before,
.academic-calendar-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.academic-calendar-card:hover::after,
.academic-calendar-month-item:hover::after {
  transform: scaleX(1);
}

.academic-calendar-card:hover .academic-calendar-card-content h3,
.academic-calendar-month-item:hover h4,
.academic-calendar-quick-card:hover h4 {
  color: var(--secondary);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .academic-calendar-wrapper {
    grid-template-columns: 1fr;
  }

  .academic-calendar-head h2 {
    font-size: 38px;
  }

  .academic-calendar-info-card {
    min-height: auto;
  }

  .academic-calendar-month-grid,
  .academic-calendar-process-row,
  .academic-calendar-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .academic-calendar-section {
    padding: 64px 0;
  }

  .academic-calendar-head {
    margin-bottom: 36px;
  }

  .academic-calendar-head h2 {
    font-size: 34px;
  }

  .academic-calendar-info-card h3 {
    font-size: 28px;
  }

  .academic-calendar-month-head,
  .academic-calendar-table-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .academic-calendar-grid {
    grid-template-columns: 1fr;
  }

  .academic-calendar-card {
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .academic-calendar-section {
    padding: 52px 0;
  }

  .academic-calendar-badge {
    font-size: 11.5px;
  }

  .academic-calendar-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .academic-calendar-head p {
    font-size: 14px;
  }

  .academic-calendar-info-card {
    padding: 24px;
    border-radius: 24px;
  }

  .academic-calendar-info-card h3 {
    font-size: 23px;
  }

  .academic-calendar-info-card p {
    font-size: 14px;
  }

  .academic-calendar-info-item {
    grid-template-columns: 1fr;
  }

  .academic-calendar-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .academic-calendar-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .academic-calendar-card-content h3 {
    font-size: 19px;
  }

  .academic-calendar-card-content p {
    font-size: 13.5px;
  }

  .academic-calendar-meta a {
    width: 100%;
  }

  .academic-calendar-month-card,
  .academic-calendar-table-card {
    padding: 20px;
    border-radius: 24px;
  }

  .academic-calendar-month-head h3,
  .academic-calendar-table-head h3 {
    font-size: 21px;
  }

  .academic-calendar-month-btn,
  .academic-calendar-table-btn {
    width: 100%;
  }

  .academic-calendar-month-grid,
  .academic-calendar-process-row,
  .academic-calendar-quick-row {
    grid-template-columns: 1fr;
  }

  .academic-calendar-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .academic-calendar-head h2 {
    font-size: 25px;
  }

  .academic-calendar-info-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .academic-calendar-info-btn {
    width: 100%;
  }
}

/* ================= ACADEMIC CALENDAR SECTION CSS END ================= */




/* ================= TIMETABLE SECTION CSS START ================= */

.timetable-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.timetable-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.timetable-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.timetable-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.timetable-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.timetable-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.timetable-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.timetable-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.timetable-head p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.timetable-wrapper {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= INFO CARD ================= */

.timetable-info-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.timetable-info-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.timetable-info-card::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.timetable-info-card > * {
  position: relative;
  z-index: 2;
}

.timetable-info-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.timetable-info-icon i {
  font-size: 31px;
}

.timetable-info-card > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.timetable-info-card h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.timetable-info-card p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.timetable-info-list {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
}

.timetable-info-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.timetable-info-item > i {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.timetable-info-item h4 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
}

.timetable-info-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.timetable-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.timetable-info-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.timetable-info-btn i {
  transition: transform 0.3s ease;
}

.timetable-info-btn:hover i {
  transform: translateX(5px);
}

/* ================= GRID ================= */

.timetable-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.timetable-card {
  position: relative;
  min-height: 245px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.timetable-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.timetable-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.timetable-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.timetable-card-icon,
.timetable-card-content {
  position: relative;
  z-index: 2;
}

.timetable-card-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.timetable-card.active .timetable-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.timetable-card-icon i {
  font-size: 26px;
}

.timetable-card-content > span {
  display: inline-flex;
  margin-bottom: 9px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.timetable-card-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.timetable-card-content p {
  margin: 0 0 17px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.timetable-meta {
  display: grid;
  gap: 8px;
}

.timetable-meta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 850;
  transition: all 0.3s ease;
}

.timetable-meta a i {
  color: var(--secondary);
  font-size: 13px;
}

.timetable-meta a:hover {
  color: var(--primary);
  transform: translateX(3px);
}

/* ================= FILTER ================= */

.timetable-filter-card,
.timetable-week-card,
.timetable-table-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.timetable-filter-head,
.timetable-week-head,
.timetable-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.timetable-filter-head span,
.timetable-week-head span,
.timetable-table-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.timetable-filter-head h3,
.timetable-week-head h3,
.timetable-table-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.timetable-filter-head p,
.timetable-week-head p,
.timetable-table-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.timetable-filter-btn,
.timetable-week-btn,
.timetable-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.timetable-filter-btn:hover,
.timetable-week-btn:hover,
.timetable-table-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.timetable-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.timetable-filter-item {
  position: relative;
  padding: 22px;
  border-radius: 24px;
  background: var(--light-bg);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: all 0.35s ease;
}

.timetable-filter-item::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.timetable-filter-item::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.timetable-filter-item i,
.timetable-filter-item h4,
.timetable-filter-item p,
.timetable-filter-item a {
  position: relative;
  z-index: 2;
}

.timetable-filter-item > i {
  width: 56px;
  height: 56px;
  margin-bottom: 15px;
  border-radius: 18px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.timetable-filter-item.active > i {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.timetable-filter-item h4 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.timetable-filter-item p {
  margin: 0 0 14px;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.58;
  font-weight: 500;
}

.timetable-filter-item a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--secondary);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
}

.timetable-filter-item a i {
  transition: transform 0.3s ease;
}

/* ================= WEEK TABLE ================= */

.timetable-week-wrap,
.timetable-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.timetable-week-table,
.timetable-table {
  width: 100%;
  min-width: 850px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.timetable-week-table thead th,
.timetable-table thead th {
  padding: 0 16px 8px;
  color: var(--primary-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.timetable-week-table tbody tr,
.timetable-table tbody tr {
  background: var(--light-bg);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.04);
}

.timetable-week-table tbody td,
.timetable-table tbody td {
  padding: 16px;
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 750;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.timetable-week-table tbody td:first-child,
.timetable-table tbody td:first-child {
  border-left: 1px solid var(--border);
  border-radius: 16px 0 0 16px;
  color: var(--primary-dark);
  font-weight: 950;
}

.timetable-week-table tbody td:last-child,
.timetable-table tbody td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 16px 16px 0;
}

.timetable-table td a {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
}

.timetable-status {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.timetable-status.active {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.timetable-status.pending {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

/* ================= PROCESS ================= */

.timetable-process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.timetable-process-card {
  position: relative;
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
}

.timetable-process-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
}

.timetable-process-card span {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 950;
}

.timetable-process-card h4 {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

.timetable-process-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

/* ================= QUICK ROW ================= */

.timetable-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.timetable-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 112px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.timetable-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.timetable-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.timetable-quick-card div {
  position: relative;
  z-index: 2;
}

.timetable-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.timetable-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= NOTE ================= */

.timetable-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.timetable-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.timetable-note-icon i {
  font-size: 26px;
}

.timetable-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.timetable-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.timetable-card:hover,
.timetable-filter-item:hover,
.timetable-quick-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.timetable-card:hover::before,
.timetable-filter-item:hover::before,
.timetable-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.timetable-card:hover::after,
.timetable-filter-item:hover::after {
  transform: scaleX(1);
}

.timetable-card:hover .timetable-card-content h3,
.timetable-filter-item:hover h4,
.timetable-quick-card:hover h4 {
  color: var(--secondary);
}

.timetable-filter-item:hover a i {
  transform: translateX(5px);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .timetable-wrapper {
    grid-template-columns: 1fr;
  }

  .timetable-head h2 {
    font-size: 38px;
  }

  .timetable-info-card {
    min-height: auto;
  }

  .timetable-filter-grid,
  .timetable-process-row,
  .timetable-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .timetable-section {
    padding: 64px 0;
  }

  .timetable-head {
    margin-bottom: 36px;
  }

  .timetable-head h2 {
    font-size: 34px;
  }

  .timetable-info-card h3 {
    font-size: 28px;
  }

  .timetable-filter-head,
  .timetable-week-head,
  .timetable-table-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .timetable-grid {
    grid-template-columns: 1fr;
  }

  .timetable-card {
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .timetable-section {
    padding: 52px 0;
  }

  .timetable-badge {
    font-size: 11.5px;
  }

  .timetable-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .timetable-head p {
    font-size: 14px;
  }

  .timetable-info-card {
    padding: 24px;
    border-radius: 24px;
  }

  .timetable-info-card h3 {
    font-size: 23px;
  }

  .timetable-info-card p {
    font-size: 14px;
  }

  .timetable-info-item {
    grid-template-columns: 1fr;
  }

  .timetable-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .timetable-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .timetable-card-content h3 {
    font-size: 19px;
  }

  .timetable-card-content p {
    font-size: 13.5px;
  }

  .timetable-meta a {
    width: 100%;
  }

  .timetable-filter-card,
  .timetable-week-card,
  .timetable-table-card {
    padding: 20px;
    border-radius: 24px;
  }

  .timetable-filter-head h3,
  .timetable-week-head h3,
  .timetable-table-head h3 {
    font-size: 21px;
  }

  .timetable-filter-btn,
  .timetable-week-btn,
  .timetable-table-btn {
    width: 100%;
  }

  .timetable-filter-grid,
  .timetable-process-row,
  .timetable-quick-row {
    grid-template-columns: 1fr;
  }

  .timetable-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .timetable-head h2 {
    font-size: 25px;
  }

  .timetable-info-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .timetable-info-btn {
    width: 100%;
  }
}

/* ================= TIMETABLE SECTION CSS END ================= */




/* ================= NOTICES SECTION CSS START ================= */

.college-notices-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.college-notices-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.college-notices-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.college-notices-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.college-notices-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.college-notices-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.college-notices-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.college-notices-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.college-notices-head p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.college-notices-wrapper {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= INFO CARD ================= */

.college-notices-info-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.college-notices-info-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.college-notices-info-card::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.college-notices-info-card > * {
  position: relative;
  z-index: 2;
}

.college-notices-info-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.college-notices-info-icon i {
  font-size: 31px;
}

.college-notices-info-card > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.college-notices-info-card h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.college-notices-info-card p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.college-notices-info-list {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
}

.college-notices-info-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.college-notices-info-item > i {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.college-notices-info-item h4 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
}

.college-notices-info-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.college-notices-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.college-notices-info-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.college-notices-info-btn i {
  transition: transform 0.3s ease;
}

.college-notices-info-btn:hover i {
  transform: translateX(5px);
}

/* ================= FEATURE + LIST ================= */

.college-notices-content {
  display: grid;
  gap: 18px;
}

.college-notices-feature-card {
  position: relative;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid rgba(181, 31, 42, 0.16);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.10);
  overflow: hidden;
}

.college-notices-feature-card::before {
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: rgba(181, 31, 42, 0.07);
}

.college-notices-feature-top,
.college-notices-feature-card h3,
.college-notices-feature-card p,
.college-notices-feature-meta,
.college-notices-feature-btn {
  position: relative;
  z-index: 2;
}

.college-notices-feature-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.college-notices-feature-top span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--secondary);
  background: rgba(181, 31, 42, 0.08);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
}

.college-notices-feature-top small {
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
}

.college-notices-feature-card h3 {
  max-width: 730px;
  margin: 0 0 10px;
  color: var(--primary-dark);
  font-size: 25px;
  line-height: 1.28;
  font-weight: 950;
  letter-spacing: -0.4px;
}

.college-notices-feature-card p {
  max-width: 760px;
  margin: 0 0 16px;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

.college-notices-feature-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.college-notices-feature-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 850;
}

.college-notices-feature-meta i {
  color: var(--secondary);
}

.college-notices-feature-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.college-notices-feature-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.college-notices-list {
  display: grid;
  gap: 14px;
}

.college-notice-item {
  position: relative;
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 16px;
  padding: 18px;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.07);
  overflow: hidden;
  transition: all 0.35s ease;
}

.college-notice-item::before {
  content: "";
  position: absolute;
  right: -46px;
  top: -46px;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.05);
  transition: all 0.35s ease;
}

.college-notice-date {
  position: relative;
  z-index: 2;
  width: 74px;
  height: 74px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.college-notice-item.active .college-notice-date {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.college-notice-date strong {
  font-size: 24px;
  line-height: 1;
  font-weight: 950;
}

.college-notice-date span {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

.college-notice-body {
  position: relative;
  z-index: 2;
}

.college-notice-category {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.college-notice-category.admission {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.college-notice-category.exam {
  color: var(--secondary);
  background: rgba(181, 31, 42, 0.09);
}

.college-notice-category.academic {
  color: var(--primary);
  background: var(--soft-blue);
}

.college-notice-category.general {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.15);
}

.college-notice-body h4 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.3;
  font-weight: 950;
  transition: color 0.3s ease;
}

.college-notice-body p {
  margin: 0 0 12px;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

.college-notice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.college-notice-actions a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 12px;
  line-height: 1;
  font-weight: 850;
  transition: all 0.3s ease;
}

.college-notice-actions a i {
  color: var(--secondary);
}

/* ================= CATEGORY ================= */

.college-notices-category-card,
.college-notices-table-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.college-notices-category-head,
.college-notices-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.college-notices-category-head span,
.college-notices-table-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.college-notices-category-head h3,
.college-notices-table-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.college-notices-category-head p,
.college-notices-table-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.college-notices-category-btn,
.college-notices-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.college-notices-category-btn:hover,
.college-notices-table-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.college-notices-category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.college-notices-category-item {
  position: relative;
  padding: 22px;
  border-radius: 24px;
  background: var(--light-bg);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: all 0.35s ease;
}

.college-notices-category-item::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.college-notices-category-item::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.college-notices-category-item i,
.college-notices-category-item h4,
.college-notices-category-item p,
.college-notices-category-item a {
  position: relative;
  z-index: 2;
}

.college-notices-category-item > i {
  width: 56px;
  height: 56px;
  margin-bottom: 15px;
  border-radius: 18px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.college-notices-category-item.active > i {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.college-notices-category-item h4 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.college-notices-category-item p {
  margin: 0 0 14px;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.58;
  font-weight: 500;
}

.college-notices-category-item a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--secondary);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
}

.college-notices-category-item a i {
  transition: transform 0.3s ease;
}

/* ================= TABLE ================= */

.college-notices-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.college-notices-table {
  width: 100%;
  min-width: 850px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.college-notices-table thead th {
  padding: 0 16px 8px;
  color: var(--primary-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.college-notices-table tbody tr {
  background: var(--light-bg);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.04);
}

.college-notices-table tbody td {
  padding: 16px;
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 750;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.college-notices-table tbody td:first-child {
  border-left: 1px solid var(--border);
  border-radius: 16px 0 0 16px;
  color: var(--primary-dark);
  font-weight: 950;
}

.college-notices-table tbody td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 16px 16px 0;
}

.college-notices-table td a {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
}

.college-notices-status {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.college-notices-status.active {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.college-notices-status.pending {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

/* ================= QUICK ROW ================= */

.college-notices-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.college-notices-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 112px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.college-notices-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.college-notices-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.college-notices-quick-card div {
  position: relative;
  z-index: 2;
}

.college-notices-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.college-notices-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= NOTE ================= */

.college-notices-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.college-notices-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.college-notices-note-icon i {
  font-size: 26px;
}

.college-notices-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.college-notices-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.college-notice-item:hover,
.college-notices-category-item:hover,
.college-notices-quick-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.college-notice-item:hover::before,
.college-notices-category-item:hover::before,
.college-notices-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.college-notices-category-item:hover::after {
  transform: scaleX(1);
}

.college-notice-item:hover h4,
.college-notices-category-item:hover h4,
.college-notices-quick-card:hover h4 {
  color: var(--secondary);
}

.college-notice-actions a:hover {
  color: var(--primary);
  transform: translateX(3px);
}

.college-notices-category-item:hover a i {
  transform: translateX(5px);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .college-notices-wrapper {
    grid-template-columns: 1fr;
  }

  .college-notices-head h2 {
    font-size: 38px;
  }

  .college-notices-info-card {
    min-height: auto;
  }

  .college-notices-category-grid,
  .college-notices-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .college-notices-section {
    padding: 64px 0;
  }

  .college-notices-head {
    margin-bottom: 36px;
  }

  .college-notices-head h2 {
    font-size: 34px;
  }

  .college-notices-info-card h3 {
    font-size: 28px;
  }

  .college-notices-category-head,
  .college-notices-table-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 575px) {
  .college-notices-section {
    padding: 52px 0;
  }

  .college-notices-badge {
    font-size: 11.5px;
  }

  .college-notices-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .college-notices-head p {
    font-size: 14px;
  }

  .college-notices-info-card {
    padding: 24px;
    border-radius: 24px;
  }

  .college-notices-info-card h3 {
    font-size: 23px;
  }

  .college-notices-info-card p {
    font-size: 14px;
  }

  .college-notices-info-item,
  .college-notice-item {
    grid-template-columns: 1fr;
  }

  .college-notice-date {
    width: 64px;
    height: 64px;
    border-radius: 18px;
  }

  .college-notices-feature-card,
  .college-notices-category-card,
  .college-notices-table-card {
    padding: 20px;
    border-radius: 24px;
  }

  .college-notices-feature-card h3 {
    font-size: 20px;
  }

  .college-notices-feature-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .college-notices-feature-btn,
  .college-notices-category-btn,
  .college-notices-table-btn {
    width: 100%;
  }

  .college-notices-category-grid,
  .college-notices-quick-row {
    grid-template-columns: 1fr;
  }

  .college-notices-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .college-notices-head h2 {
    font-size: 25px;
  }

  .college-notices-info-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .college-notices-info-btn {
    width: 100%;
  }
}

/* ================= NOTICES SECTION CSS END ================= */



/* ================= POLICY DOCUMENTS SECTION CSS START ================= */

.policy-documents-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.policy-documents-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.policy-documents-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.policy-documents-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.policy-documents-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.policy-documents-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.policy-documents-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.policy-documents-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.policy-documents-head p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.policy-documents-wrapper {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= INFO CARD ================= */

.policy-documents-info-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.policy-documents-info-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.policy-documents-info-card::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.policy-documents-info-card > * {
  position: relative;
  z-index: 2;
}

.policy-documents-info-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.policy-documents-info-icon i {
  font-size: 31px;
}

.policy-documents-info-card > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.policy-documents-info-card h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.policy-documents-info-card p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.policy-documents-info-list {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
}

.policy-documents-info-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.policy-documents-info-item > i {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.policy-documents-info-item h4 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
}

.policy-documents-info-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.policy-documents-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.policy-documents-info-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.policy-documents-info-btn i {
  transition: transform 0.3s ease;
}

.policy-documents-info-btn:hover i {
  transform: translateX(5px);
}

/* ================= GRID ================= */

.policy-documents-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.policy-documents-card {
  position: relative;
  min-height: 245px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.policy-documents-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.policy-documents-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.policy-documents-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.policy-documents-card-icon,
.policy-documents-card-content {
  position: relative;
  z-index: 2;
}

.policy-documents-card-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.policy-documents-card.active .policy-documents-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.policy-documents-card-icon i {
  font-size: 26px;
}

.policy-documents-card-content > span {
  display: inline-flex;
  margin-bottom: 9px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.policy-documents-card-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.policy-documents-card-content p {
  margin: 0 0 17px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.policy-documents-meta {
  display: grid;
  gap: 8px;
}

.policy-documents-meta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 850;
  transition: all 0.3s ease;
}

.policy-documents-meta a i {
  color: var(--secondary);
  font-size: 13px;
}

.policy-documents-meta a:hover {
  color: var(--primary);
  transform: translateX(3px);
}

/* ================= CATEGORY / TABLE ================= */

.policy-documents-category-card,
.policy-documents-table-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.policy-documents-category-head,
.policy-documents-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.policy-documents-category-head span,
.policy-documents-table-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.policy-documents-category-head h3,
.policy-documents-table-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.policy-documents-category-head p,
.policy-documents-table-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.policy-documents-category-btn,
.policy-documents-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.policy-documents-category-btn:hover,
.policy-documents-table-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.policy-documents-category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.policy-documents-category-item {
  position: relative;
  padding: 22px;
  border-radius: 24px;
  background: var(--light-bg);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: all 0.35s ease;
}

.policy-documents-category-item::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.policy-documents-category-item::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.policy-documents-category-item i,
.policy-documents-category-item h4,
.policy-documents-category-item p,
.policy-documents-category-item a {
  position: relative;
  z-index: 2;
}

.policy-documents-category-item > i {
  width: 56px;
  height: 56px;
  margin-bottom: 15px;
  border-radius: 18px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.policy-documents-category-item.active > i {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.policy-documents-category-item h4 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.policy-documents-category-item p {
  margin: 0 0 14px;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.58;
  font-weight: 500;
}

.policy-documents-category-item a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--secondary);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
}

.policy-documents-category-item a i {
  transition: transform 0.3s ease;
}

/* ================= PROCESS ================= */

.policy-documents-process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.policy-documents-process-card {
  position: relative;
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
}

.policy-documents-process-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
}

.policy-documents-process-card span {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 950;
}

.policy-documents-process-card h4 {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

.policy-documents-process-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

/* ================= TABLE ================= */

.policy-documents-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.policy-documents-table {
  width: 100%;
  min-width: 850px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.policy-documents-table thead th {
  padding: 0 16px 8px;
  color: var(--primary-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.policy-documents-table tbody tr {
  background: var(--light-bg);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.04);
}

.policy-documents-table tbody td {
  padding: 16px;
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 750;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.policy-documents-table tbody td:first-child {
  border-left: 1px solid var(--border);
  border-radius: 16px 0 0 16px;
  color: var(--primary-dark);
  font-weight: 950;
}

.policy-documents-table tbody td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 16px 16px 0;
}

.policy-documents-table td a {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
}

.policy-documents-status {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.policy-documents-status.active {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.policy-documents-status.pending {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

/* ================= QUICK ROW ================= */

.policy-documents-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.policy-documents-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 112px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.policy-documents-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.policy-documents-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.policy-documents-quick-card div {
  position: relative;
  z-index: 2;
}

.policy-documents-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.policy-documents-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= NOTE ================= */

.policy-documents-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.policy-documents-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.policy-documents-note-icon i {
  font-size: 26px;
}

.policy-documents-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.policy-documents-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.policy-documents-card:hover,
.policy-documents-category-item:hover,
.policy-documents-quick-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.policy-documents-card:hover::before,
.policy-documents-category-item:hover::before,
.policy-documents-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.policy-documents-card:hover::after,
.policy-documents-category-item:hover::after {
  transform: scaleX(1);
}

.policy-documents-card:hover .policy-documents-card-content h3,
.policy-documents-category-item:hover h4,
.policy-documents-quick-card:hover h4 {
  color: var(--secondary);
}

.policy-documents-category-item:hover a i {
  transform: translateX(5px);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .policy-documents-wrapper {
    grid-template-columns: 1fr;
  }

  .policy-documents-head h2 {
    font-size: 38px;
  }

  .policy-documents-info-card {
    min-height: auto;
  }

  .policy-documents-category-grid,
  .policy-documents-process-row,
  .policy-documents-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .policy-documents-section {
    padding: 64px 0;
  }

  .policy-documents-head {
    margin-bottom: 36px;
  }

  .policy-documents-head h2 {
    font-size: 34px;
  }

  .policy-documents-info-card h3 {
    font-size: 28px;
  }

  .policy-documents-category-head,
  .policy-documents-table-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .policy-documents-grid {
    grid-template-columns: 1fr;
  }

  .policy-documents-card {
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .policy-documents-section {
    padding: 52px 0;
  }

  .policy-documents-badge {
    font-size: 11.5px;
  }

  .policy-documents-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .policy-documents-head p {
    font-size: 14px;
  }

  .policy-documents-info-card {
    padding: 24px;
    border-radius: 24px;
  }

  .policy-documents-info-card h3 {
    font-size: 23px;
  }

  .policy-documents-info-card p {
    font-size: 14px;
  }

  .policy-documents-info-item {
    grid-template-columns: 1fr;
  }

  .policy-documents-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .policy-documents-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .policy-documents-card-content h3 {
    font-size: 19px;
  }

  .policy-documents-card-content p {
    font-size: 13.5px;
  }

  .policy-documents-meta a {
    width: 100%;
  }

  .policy-documents-category-card,
  .policy-documents-table-card {
    padding: 20px;
    border-radius: 24px;
  }

  .policy-documents-category-head h3,
  .policy-documents-table-head h3 {
    font-size: 21px;
  }

  .policy-documents-category-btn,
  .policy-documents-table-btn {
    width: 100%;
  }

  .policy-documents-category-grid,
  .policy-documents-process-row,
  .policy-documents-quick-row {
    grid-template-columns: 1fr;
  }

  .policy-documents-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .policy-documents-head h2 {
    font-size: 25px;
  }

  .policy-documents-info-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .policy-documents-info-btn {
    width: 100%;
  }
}

/* ================= POLICY DOCUMENTS SECTION CSS END ================= */




/* ================= CERTIFICATES SECTION CSS START ================= */

.college-certificates-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.college-certificates-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.college-certificates-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.college-certificates-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.college-certificates-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.college-certificates-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.college-certificates-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.college-certificates-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.college-certificates-head p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.college-certificates-wrapper {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= INFO CARD ================= */

.college-certificates-info-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.college-certificates-info-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.college-certificates-info-card::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.college-certificates-info-card > * {
  position: relative;
  z-index: 2;
}

.college-certificates-info-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.college-certificates-info-icon i {
  font-size: 31px;
}

.college-certificates-info-card > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.college-certificates-info-card h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.college-certificates-info-card p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.college-certificates-info-list {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
}

.college-certificates-info-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.college-certificates-info-item > i {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.college-certificates-info-item h4 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
}

.college-certificates-info-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.college-certificates-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.college-certificates-info-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.college-certificates-info-btn i {
  transition: transform 0.3s ease;
}

.college-certificates-info-btn:hover i {
  transform: translateX(5px);
}

/* ================= GRID ================= */

.college-certificates-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.college-certificates-card {
  position: relative;
  min-height: 245px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.college-certificates-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.college-certificates-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.college-certificates-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.college-certificates-card-icon,
.college-certificates-card-content {
  position: relative;
  z-index: 2;
}

.college-certificates-card-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.college-certificates-card.active .college-certificates-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.college-certificates-card-icon i {
  font-size: 26px;
}

.college-certificates-card-content > span {
  display: inline-flex;
  margin-bottom: 9px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.college-certificates-card-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.college-certificates-card-content p {
  margin: 0 0 17px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.college-certificates-meta {
  display: grid;
  gap: 8px;
}

.college-certificates-meta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 850;
  transition: all 0.3s ease;
}

.college-certificates-meta a i {
  color: var(--secondary);
  font-size: 13px;
}

.college-certificates-meta a:hover {
  color: var(--primary);
  transform: translateX(3px);
}

/* ================= CATEGORY / TABLE ================= */

.college-certificates-category-card,
.college-certificates-table-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.college-certificates-category-head,
.college-certificates-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.college-certificates-category-head span,
.college-certificates-table-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.college-certificates-category-head h3,
.college-certificates-table-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.college-certificates-category-head p,
.college-certificates-table-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.college-certificates-category-btn,
.college-certificates-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.college-certificates-category-btn:hover,
.college-certificates-table-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.college-certificates-category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.college-certificates-category-item {
  position: relative;
  padding: 22px;
  border-radius: 24px;
  background: var(--light-bg);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: all 0.35s ease;
}

.college-certificates-category-item::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.college-certificates-category-item::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.college-certificates-category-item i,
.college-certificates-category-item h4,
.college-certificates-category-item p,
.college-certificates-category-item a {
  position: relative;
  z-index: 2;
}

.college-certificates-category-item > i {
  width: 56px;
  height: 56px;
  margin-bottom: 15px;
  border-radius: 18px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.college-certificates-category-item.active > i {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.college-certificates-category-item h4 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.college-certificates-category-item p {
  margin: 0 0 14px;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.58;
  font-weight: 500;
}

.college-certificates-category-item a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--secondary);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
}

.college-certificates-category-item a i {
  transition: transform 0.3s ease;
}

/* ================= PROCESS ================= */

.college-certificates-process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.college-certificates-process-card {
  position: relative;
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
}

.college-certificates-process-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
}

.college-certificates-process-card span {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 950;
}

.college-certificates-process-card h4 {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

.college-certificates-process-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

/* ================= TABLE ================= */

.college-certificates-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.college-certificates-table {
  width: 100%;
  min-width: 850px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.college-certificates-table thead th {
  padding: 0 16px 8px;
  color: var(--primary-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.college-certificates-table tbody tr {
  background: var(--light-bg);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.04);
}

.college-certificates-table tbody td {
  padding: 16px;
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 750;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.college-certificates-table tbody td:first-child {
  border-left: 1px solid var(--border);
  border-radius: 16px 0 0 16px;
  color: var(--primary-dark);
  font-weight: 950;
}

.college-certificates-table tbody td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 16px 16px 0;
}

.college-certificates-table td a {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
}

.college-certificates-status {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.college-certificates-status.active {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.college-certificates-status.pending {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

/* ================= QUICK ROW ================= */

.college-certificates-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.college-certificates-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 112px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.college-certificates-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.college-certificates-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.college-certificates-quick-card div {
  position: relative;
  z-index: 2;
}

.college-certificates-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.college-certificates-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= NOTE ================= */

.college-certificates-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.college-certificates-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.college-certificates-note-icon i {
  font-size: 26px;
}

.college-certificates-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.college-certificates-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.college-certificates-card:hover,
.college-certificates-category-item:hover,
.college-certificates-quick-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.college-certificates-card:hover::before,
.college-certificates-category-item:hover::before,
.college-certificates-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.college-certificates-card:hover::after,
.college-certificates-category-item:hover::after {
  transform: scaleX(1);
}

.college-certificates-card:hover .college-certificates-card-content h3,
.college-certificates-category-item:hover h4,
.college-certificates-quick-card:hover h4 {
  color: var(--secondary);
}

.college-certificates-category-item:hover a i {
  transform: translateX(5px);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .college-certificates-wrapper {
    grid-template-columns: 1fr;
  }

  .college-certificates-head h2 {
    font-size: 38px;
  }

  .college-certificates-info-card {
    min-height: auto;
  }

  .college-certificates-category-grid,
  .college-certificates-process-row,
  .college-certificates-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .college-certificates-section {
    padding: 64px 0;
  }

  .college-certificates-head {
    margin-bottom: 36px;
  }

  .college-certificates-head h2 {
    font-size: 34px;
  }

  .college-certificates-info-card h3 {
    font-size: 28px;
  }

  .college-certificates-category-head,
  .college-certificates-table-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .college-certificates-grid {
    grid-template-columns: 1fr;
  }

  .college-certificates-card {
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .college-certificates-section {
    padding: 52px 0;
  }

  .college-certificates-badge {
    font-size: 11.5px;
  }

  .college-certificates-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .college-certificates-head p {
    font-size: 14px;
  }

  .college-certificates-info-card {
    padding: 24px;
    border-radius: 24px;
  }

  .college-certificates-info-card h3 {
    font-size: 23px;
  }

  .college-certificates-info-card p {
    font-size: 14px;
  }

  .college-certificates-info-item {
    grid-template-columns: 1fr;
  }

  .college-certificates-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .college-certificates-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .college-certificates-card-content h3 {
    font-size: 19px;
  }

  .college-certificates-card-content p {
    font-size: 13.5px;
  }

  .college-certificates-meta a {
    width: 100%;
  }

  .college-certificates-category-card,
  .college-certificates-table-card {
    padding: 20px;
    border-radius: 24px;
  }

  .college-certificates-category-head h3,
  .college-certificates-table-head h3 {
    font-size: 21px;
  }

  .college-certificates-category-btn,
  .college-certificates-table-btn {
    width: 100%;
  }

  .college-certificates-category-grid,
  .college-certificates-process-row,
  .college-certificates-quick-row {
    grid-template-columns: 1fr;
  }

  .college-certificates-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .college-certificates-head h2 {
    font-size: 25px;
  }

  .college-certificates-info-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .college-certificates-info-btn {
    width: 100%;
  }
}

/* ================= CERTIFICATES SECTION CSS END ================= */




/* ================= TENDER DOCUMENTS SECTION CSS START ================= */

.tender-documents-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.tender-documents-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.tender-documents-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.tender-documents-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.tender-documents-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.tender-documents-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.tender-documents-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.tender-documents-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.tender-documents-head p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.tender-documents-wrapper {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= INFO CARD ================= */

.tender-documents-info-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.tender-documents-info-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.tender-documents-info-card::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.tender-documents-info-card > * {
  position: relative;
  z-index: 2;
}

.tender-documents-info-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.tender-documents-info-icon i {
  font-size: 31px;
}

.tender-documents-info-card > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.tender-documents-info-card h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.tender-documents-info-card p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.tender-documents-info-list {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
}

.tender-documents-info-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.tender-documents-info-item > i {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.tender-documents-info-item h4 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
}

.tender-documents-info-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.tender-documents-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.tender-documents-info-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.tender-documents-info-btn i {
  transition: transform 0.3s ease;
}

.tender-documents-info-btn:hover i {
  transform: translateX(5px);
}

/* ================= GRID ================= */

.tender-documents-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.tender-documents-card {
  position: relative;
  min-height: 245px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.tender-documents-card.active {
  border-color: rgba(181, 31, 42, 0.22);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.12);
}

.tender-documents-card::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.tender-documents-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.tender-documents-card-icon,
.tender-documents-card-content {
  position: relative;
  z-index: 2;
}

.tender-documents-card-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tender-documents-card.active .tender-documents-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.tender-documents-card-icon i {
  font-size: 26px;
}

.tender-documents-card-content > span {
  display: inline-flex;
  margin-bottom: 9px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.tender-documents-card-content h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.tender-documents-card-content p {
  margin: 0 0 17px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.tender-documents-meta {
  display: grid;
  gap: 8px;
}

.tender-documents-meta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 850;
  transition: all 0.3s ease;
}

.tender-documents-meta a i {
  color: var(--secondary);
  font-size: 13px;
}

.tender-documents-meta a:hover {
  color: var(--primary);
  transform: translateX(3px);
}

/* ================= CATEGORY / TABLE ================= */

.tender-documents-category-card,
.tender-documents-table-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.tender-documents-category-head,
.tender-documents-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.tender-documents-category-head span,
.tender-documents-table-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.tender-documents-category-head h3,
.tender-documents-table-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.tender-documents-category-head p,
.tender-documents-table-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.tender-documents-category-btn,
.tender-documents-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.tender-documents-category-btn:hover,
.tender-documents-table-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.tender-documents-category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.tender-documents-category-item {
  position: relative;
  padding: 22px;
  border-radius: 24px;
  background: var(--light-bg);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: all 0.35s ease;
}

.tender-documents-category-item::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.tender-documents-category-item::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.tender-documents-category-item i,
.tender-documents-category-item h4,
.tender-documents-category-item p,
.tender-documents-category-item a {
  position: relative;
  z-index: 2;
}

.tender-documents-category-item > i {
  width: 56px;
  height: 56px;
  margin-bottom: 15px;
  border-radius: 18px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.tender-documents-category-item.active > i {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.tender-documents-category-item h4 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.tender-documents-category-item p {
  margin: 0 0 14px;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.58;
  font-weight: 500;
}

.tender-documents-category-item a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--secondary);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
}

.tender-documents-category-item a i {
  transition: transform 0.3s ease;
}

/* ================= PROCESS ================= */

.tender-documents-process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.tender-documents-process-card {
  position: relative;
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
}

.tender-documents-process-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
}

.tender-documents-process-card span {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 950;
}

.tender-documents-process-card h4 {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

.tender-documents-process-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

/* ================= TABLE ================= */

.tender-documents-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.tender-documents-table {
  width: 100%;
  min-width: 850px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.tender-documents-table thead th {
  padding: 0 16px 8px;
  color: var(--primary-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tender-documents-table tbody tr {
  background: var(--light-bg);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.04);
}

.tender-documents-table tbody td {
  padding: 16px;
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 750;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.tender-documents-table tbody td:first-child {
  border-left: 1px solid var(--border);
  border-radius: 16px 0 0 16px;
  color: var(--primary-dark);
  font-weight: 950;
}

.tender-documents-table tbody td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 16px 16px 0;
}

.tender-documents-table td a {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
}

.tender-documents-status {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.tender-documents-status.active {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.tender-documents-status.pending {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

/* ================= QUICK ROW ================= */

.tender-documents-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.tender-documents-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 112px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.tender-documents-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.tender-documents-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.tender-documents-quick-card div {
  position: relative;
  z-index: 2;
}

.tender-documents-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.tender-documents-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= NOTE ================= */

.tender-documents-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.tender-documents-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.tender-documents-note-icon i {
  font-size: 26px;
}

.tender-documents-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.tender-documents-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.tender-documents-card:hover,
.tender-documents-category-item:hover,
.tender-documents-quick-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.tender-documents-card:hover::before,
.tender-documents-category-item:hover::before,
.tender-documents-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.tender-documents-card:hover::after,
.tender-documents-category-item:hover::after {
  transform: scaleX(1);
}

.tender-documents-card:hover .tender-documents-card-content h3,
.tender-documents-category-item:hover h4,
.tender-documents-quick-card:hover h4 {
  color: var(--secondary);
}

.tender-documents-category-item:hover a i {
  transform: translateX(5px);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .tender-documents-wrapper {
    grid-template-columns: 1fr;
  }

  .tender-documents-head h2 {
    font-size: 38px;
  }

  .tender-documents-info-card {
    min-height: auto;
  }

  .tender-documents-category-grid,
  .tender-documents-process-row,
  .tender-documents-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .tender-documents-section {
    padding: 64px 0;
  }

  .tender-documents-head {
    margin-bottom: 36px;
  }

  .tender-documents-head h2 {
    font-size: 34px;
  }

  .tender-documents-info-card h3 {
    font-size: 28px;
  }

  .tender-documents-category-head,
  .tender-documents-table-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .tender-documents-grid {
    grid-template-columns: 1fr;
  }

  .tender-documents-card {
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .tender-documents-section {
    padding: 52px 0;
  }

  .tender-documents-badge {
    font-size: 11.5px;
  }

  .tender-documents-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .tender-documents-head p {
    font-size: 14px;
  }

  .tender-documents-info-card {
    padding: 24px;
    border-radius: 24px;
  }

  .tender-documents-info-card h3 {
    font-size: 23px;
  }

  .tender-documents-info-card p {
    font-size: 14px;
  }

  .tender-documents-info-item {
    grid-template-columns: 1fr;
  }

  .tender-documents-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .tender-documents-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .tender-documents-card-content h3 {
    font-size: 19px;
  }

  .tender-documents-card-content p {
    font-size: 13.5px;
  }

  .tender-documents-meta a {
    width: 100%;
  }

  .tender-documents-category-card,
  .tender-documents-table-card {
    padding: 20px;
    border-radius: 24px;
  }

  .tender-documents-category-head h3,
  .tender-documents-table-head h3 {
    font-size: 21px;
  }

  .tender-documents-category-btn,
  .tender-documents-table-btn {
    width: 100%;
  }

  .tender-documents-category-grid,
  .tender-documents-process-row,
  .tender-documents-quick-row {
    grid-template-columns: 1fr;
  }

  .tender-documents-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .tender-documents-head h2 {
    font-size: 25px;
  }

  .tender-documents-info-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .tender-documents-info-btn {
    width: 100%;
  }
}

/* ================= TENDER DOCUMENTS SECTION CSS END ================= */














  /* ================= PHOTO GALLERY SECTION CSS START ================= */

.photo-gallery-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.photo-gallery-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.photo-gallery-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.photo-gallery-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.photo-gallery-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.photo-gallery-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.photo-gallery-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.photo-gallery-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.photo-gallery-head p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.photo-gallery-wrapper {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= INFO CARD ================= */

.photo-gallery-info-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.photo-gallery-info-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.06);
}

.photo-gallery-info-card::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.photo-gallery-info-card > * {
  position: relative;
  z-index: 2;
}

.photo-gallery-info-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 23px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.photo-gallery-info-icon i {
  font-size: 31px;
}

.photo-gallery-info-card > span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.photo-gallery-info-card h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.photo-gallery-info-card p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.photo-gallery-info-list {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
}

.photo-gallery-info-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.photo-gallery-info-item > i {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.photo-gallery-info-item h4 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
}

.photo-gallery-info-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.photo-gallery-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.photo-gallery-info-btn:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.photo-gallery-info-btn i {
  transition: transform 0.3s ease;
}

.photo-gallery-info-btn:hover i {
  transform: translateX(5px);
}

/* ================= CONTENT ================= */

.photo-gallery-content {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 18px;
}

.photo-gallery-feature-card {
  position: relative;
  min-height: 540px;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.65);
}

.photo-gallery-feature-card img,
.photo-gallery-item img,
.photo-gallery-album-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.55s ease;
}

.photo-gallery-feature-card::before,
.photo-gallery-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 45, 85, 0.08), rgba(13, 45, 85, 0.86));
  z-index: 1;
}

.photo-gallery-feature-overlay {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  color: #ffffff;
}

.photo-gallery-feature-overlay span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
  font-size: 11px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
  backdrop-filter: blur(12px);
}

.photo-gallery-feature-overlay span i {
  color: var(--accent);
}

.photo-gallery-feature-overlay h3 {
  margin: 0 0 9px;
  color: #ffffff;
  font-size: 27px;
  line-height: 1.18;
  font-weight: 950;
}

.photo-gallery-feature-overlay p {
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
}

.photo-gallery-feature-overlay a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 11px 16px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  transition: all 0.3s ease;
}

.photo-gallery-feature-overlay a:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

.photo-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 168px;
  gap: 18px;
}

.photo-gallery-item {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  min-height: 168px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.10);
  transition: all 0.35s ease;
}

.photo-gallery-item.big {
  grid-row: span 2;
}

.photo-gallery-item.wide {
  grid-column: span 2;
}

.photo-gallery-overlay {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 2;
}

.photo-gallery-overlay span {
  display: inline-flex;
  margin-bottom: 7px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.20);
  font-size: 10px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.photo-gallery-overlay h4 {
  margin: 0;
  color: #ffffff;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

/* ================= CATEGORY ================= */

.photo-gallery-category-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.photo-gallery-category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.photo-gallery-category-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.photo-gallery-category-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.photo-gallery-category-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.photo-gallery-category-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.photo-gallery-category-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.photo-gallery-category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.photo-gallery-category-item {
  position: relative;
  padding: 22px;
  border-radius: 24px;
  background: var(--light-bg);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: all 0.35s ease;
}

.photo-gallery-category-item::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.photo-gallery-category-item::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.photo-gallery-category-item i,
.photo-gallery-category-item h4,
.photo-gallery-category-item p,
.photo-gallery-category-item a {
  position: relative;
  z-index: 2;
}

.photo-gallery-category-item > i {
  width: 56px;
  height: 56px;
  margin-bottom: 15px;
  border-radius: 18px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.photo-gallery-category-item.active > i {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.photo-gallery-category-item h4 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.photo-gallery-category-item p {
  margin: 0 0 14px;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.58;
  font-weight: 500;
}

.photo-gallery-category-item a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--secondary);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
}

.photo-gallery-category-item a i {
  transition: transform 0.3s ease;
}

/* ================= ALBUM ROW ================= */

.photo-gallery-album-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 24px;
}

.photo-gallery-album-card {
  overflow: hidden;
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  transition: all 0.35s ease;
}

.photo-gallery-album-img {
  height: 220px;
  overflow: hidden;
}

.photo-gallery-album-body {
  padding: 22px;
}

.photo-gallery-album-body span {
  display: inline-flex;
  margin-bottom: 9px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.photo-gallery-album-body h4 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.28;
  font-weight: 950;
  transition: color 0.3s ease;
}

.photo-gallery-album-body p {
  margin: 0 0 14px;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.58;
  font-weight: 500;
}

.photo-gallery-album-body a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--secondary);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
}

/* ================= QUICK ROW ================= */

.photo-gallery-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.photo-gallery-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 112px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.photo-gallery-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.photo-gallery-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.photo-gallery-quick-card div {
  position: relative;
  z-index: 2;
}

.photo-gallery-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.photo-gallery-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= NOTE ================= */

.photo-gallery-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.photo-gallery-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.photo-gallery-note-icon i {
  font-size: 26px;
}

.photo-gallery-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.photo-gallery-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.photo-gallery-feature-card:hover img,
.photo-gallery-item:hover img,
.photo-gallery-album-card:hover img {
  transform: scale(1.08);
}

.photo-gallery-item:hover,
.photo-gallery-category-item:hover,
.photo-gallery-album-card:hover,
.photo-gallery-quick-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.photo-gallery-category-item:hover::before,
.photo-gallery-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.photo-gallery-category-item:hover::after {
  transform: scaleX(1);
}

.photo-gallery-category-item:hover h4,
.photo-gallery-album-card:hover h4,
.photo-gallery-quick-card:hover h4 {
  color: var(--secondary);
}

.photo-gallery-category-item:hover a i,
.photo-gallery-album-card:hover a i {
  transform: translateX(5px);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .photo-gallery-wrapper {
    grid-template-columns: 1fr;
  }

  .photo-gallery-head h2 {
    font-size: 38px;
  }

  .photo-gallery-info-card {
    min-height: auto;
  }

  .photo-gallery-content {
    grid-template-columns: 1fr;
  }

  .photo-gallery-feature-card {
    min-height: 430px;
  }

  .photo-gallery-category-grid,
  .photo-gallery-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .photo-gallery-album-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .photo-gallery-section {
    padding: 64px 0;
  }

  .photo-gallery-head {
    margin-bottom: 36px;
  }

  .photo-gallery-head h2 {
    font-size: 34px;
  }

  .photo-gallery-info-card h3 {
    font-size: 28px;
  }

  .photo-gallery-category-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .photo-gallery-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 230px;
  }

  .photo-gallery-item.big,
  .photo-gallery-item.wide {
    grid-column: auto;
    grid-row: auto;
  }

  .photo-gallery-feature-card {
    min-height: 360px;
  }

  .photo-gallery-album-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575px) {
  .photo-gallery-section {
    padding: 52px 0;
  }

  .photo-gallery-badge {
    font-size: 11.5px;
  }

  .photo-gallery-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .photo-gallery-head p {
    font-size: 14px;
  }

  .photo-gallery-info-card {
    padding: 24px;
    border-radius: 24px;
  }

  .photo-gallery-info-card h3 {
    font-size: 23px;
  }

  .photo-gallery-info-card p {
    font-size: 14px;
  }

  .photo-gallery-info-item {
    grid-template-columns: 1fr;
  }

  .photo-gallery-feature-card {
    min-height: 330px;
    border-radius: 24px;
  }

  .photo-gallery-feature-overlay {
    left: 18px;
    right: 18px;
    bottom: 18px;
  }

  .photo-gallery-feature-overlay h3 {
    font-size: 22px;
  }

  .photo-gallery-feature-overlay p {
    font-size: 13px;
  }

  .photo-gallery-feature-overlay a,
  .photo-gallery-category-btn {
    width: 100%;
  }

  .photo-gallery-category-card {
    padding: 20px;
    border-radius: 24px;
  }

  .photo-gallery-category-head h3 {
    font-size: 21px;
  }

  .photo-gallery-category-grid,
  .photo-gallery-quick-row {
    grid-template-columns: 1fr;
  }

  .photo-gallery-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .photo-gallery-head h2 {
    font-size: 25px;
  }

  .photo-gallery-info-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }

  .photo-gallery-info-btn {
    width: 100%;
  }

  .photo-gallery-grid {
    grid-auto-rows: 210px;
  }
}

/* ================= PHOTO GALLERY SECTION CSS END ================= */





/* ===========================
   VIDEO GALLERY SECTION
=========================== */

.video-gallery-section{
    padding:10px 0;
    background:#f8fafc;
}

.container{
    width:90%;
    max-width:1300px;
    margin:auto;
}

.section-heading{
    text-align:center;
    margin-bottom:60px;
}

.section-heading span{
    display:inline-block;
    color:#0B4F8A;
    font-weight:600;
    letter-spacing:1px;
    margin-bottom:12px;
}

.section-heading h2{
    font-size:42px;
    color:#111827;
    margin-bottom:15px;
}

.section-heading p{
    max-width:700px;
    margin:auto;
    color:#6b7280;
    line-height:1.8;
}

.video-gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.video-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 15px 35px rgba(0,0,0,0.08);
    transition:.4s ease;
}

.video-card:hover{
    transform:translateY(-10px);
}

.video-wrapper{
    position:relative;
    width:100%;
    padding-top:56.25%;
}

.video-wrapper iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:none;
}

.video-content{
    padding:25px;
}

.video-content h3{
    font-size:22px;
    color:#111827;
    margin-bottom:12px;
}

.video-content p{
    color:#6b7280;
    line-height:1.7;
    font-size:15px;
}

.gallery-btn{
    text-align:center;
    margin-top:50px;
}

.gallery-btn a{
    display:inline-block;
    padding:14px 34px;
    background:#0B4F8A;
    color:#fff;
    text-decoration:none;
    border-radius:50px;
    font-weight:600;
    transition:.3s;
}

.gallery-btn a:hover{
    transform:translateY(-3px);
    background:#08365f;
}

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

@media(max-width:991px){

    .video-gallery-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .section-heading h2{
        font-size:34px;
    }

}

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

@media(max-width:768px){

    .video-gallery-section{
        padding:70px 0;
    }

    .video-gallery-grid{
        grid-template-columns:1fr;
        gap:25px;
    }

    .section-heading h2{
        font-size:30px;
    }

    .video-content{
        padding:20px;
    }

}




/* ================= EVENT ALBUMS SECTION CSS START ================= */

.event-albums-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.event-albums-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.event-albums-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.event-albums-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.event-albums-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.event-albums-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.event-albums-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.event-albums-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.event-albums-head p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.event-albums-wrapper {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= FEATURE ================= */

.event-albums-feature-card {
  position: relative;
  min-height: 560px;
  border-radius: 34px;
  overflow: hidden;
  background: var(--primary-dark);
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: var(--shadow-lg);
}

.event-albums-feature-card img,
.event-albums-mini-card img,
.event-albums-card-img img,
.event-albums-masonry-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.55s ease;
}

.event-albums-feature-card::before,
.event-albums-mini-card::before,
.event-albums-card-img::before,
.event-albums-masonry-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 45, 85, 0.08), rgba(13, 45, 85, 0.88));
  z-index: 1;
}

.event-albums-feature-overlay {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 30px;
  z-index: 2;
  color: #ffffff;
}

.event-albums-feature-overlay > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  padding: 8px 13px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
  font-size: 11px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
  backdrop-filter: blur(12px);
}

.event-albums-feature-overlay > span i {
  color: var(--accent);
}

.event-albums-feature-overlay h3 {
  max-width: 610px;
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -0.7px;
}

.event-albums-feature-overlay p {
  max-width: 620px;
  margin: 0 0 17px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.65;
  font-weight: 500;
}

.event-albums-feature-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.event-albums-feature-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 12px;
  font-weight: 850;
}

.event-albums-feature-meta i {
  color: var(--accent);
}

.event-albums-feature-overlay a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.event-albums-feature-overlay a:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

/* ================= SIDE ================= */

.event-albums-side {
  display: grid;
  gap: 18px;
}

.event-albums-info-card {
  position: relative;
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 18px;
  padding: 28px;
  border-radius: 30px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.event-albums-info-card::before {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  border: 38px solid rgba(255, 255, 255, 0.06);
}

.event-albums-info-icon,
.event-albums-info-card div {
  position: relative;
  z-index: 2;
}

.event-albums-info-icon {
  width: 74px;
  height: 74px;
  border-radius: 24px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.event-albums-info-icon i {
  font-size: 31px;
}

.event-albums-info-card span {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 7px 11px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.event-albums-info-card h3 {
  margin: 0 0 9px;
  color: #ffffff;
  font-size: 24px;
  line-height: 1.22;
  font-weight: 950;
}

.event-albums-info-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.80);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.event-albums-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.event-albums-mini-card {
  position: relative;
  min-height: 190px;
  border-radius: 26px;
  overflow: hidden;
  background: var(--primary-dark);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.65);
  transition: all 0.35s ease;
}

.event-albums-mini-card div {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 2;
}

.event-albums-mini-card span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.20);
  font-size: 10px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.event-albums-mini-card h4 {
  margin: 0;
  color: #ffffff;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

/* ================= CATEGORY ================= */

.event-albums-category-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.event-albums-category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.event-albums-category-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.event-albums-category-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.event-albums-category-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.event-albums-category-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.event-albums-category-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

/* ================= ALBUM CARDS ================= */

.event-albums-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.event-albums-card {
  overflow: hidden;
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  transition: all 0.35s ease;
}

.event-albums-card.active {
  border-color: rgba(181, 31, 42, 0.20);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.11);
}

.event-albums-card-img {
  position: relative;
  height: 230px;
  overflow: hidden;
  background: var(--primary-dark);
}

.event-albums-card-img span {
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 2;
  display: inline-flex;
  padding: 7px 11px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
  backdrop-filter: blur(12px);
}

.event-albums-card-body {
  padding: 22px;
}

.event-albums-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 11px;
}

.event-albums-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  font-size: 11px;
  line-height: 1;
  font-weight: 850;
}

.event-albums-card-meta i {
  color: var(--secondary);
}

.event-albums-card-body h4 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 19px;
  line-height: 1.28;
  font-weight: 950;
  transition: color 0.3s ease;
}

.event-albums-card-body p {
  margin: 0 0 15px;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.58;
  font-weight: 500;
}

.event-albums-card-body a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--secondary);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
}

.event-albums-card-body a i {
  transition: transform 0.3s ease;
}

/* ================= MASONRY ================= */

.event-albums-masonry-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr 1fr;
  grid-auto-rows: 210px;
  gap: 18px;
  margin-top: 24px;
}

.event-albums-masonry-item {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background: var(--primary-dark);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.10);
  transition: all 0.35s ease;
}

.event-albums-masonry-item.large {
  grid-row: span 2;
}

.event-albums-masonry-item.wide {
  grid-column: span 2;
}

.event-albums-masonry-overlay {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 2;
}

.event-albums-masonry-overlay span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.20);
  font-size: 10px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.event-albums-masonry-overlay h4 {
  margin: 0;
  color: #ffffff;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

/* ================= QUICK ROW ================= */

.event-albums-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.event-albums-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 112px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.event-albums-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.event-albums-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.event-albums-quick-card div {
  position: relative;
  z-index: 2;
}

.event-albums-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.event-albums-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= NOTE ================= */

.event-albums-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.event-albums-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.event-albums-note-icon i {
  font-size: 26px;
}

.event-albums-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.event-albums-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.event-albums-feature-card:hover img,
.event-albums-mini-card:hover img,
.event-albums-card:hover img,
.event-albums-masonry-item:hover img {
  transform: scale(1.08);
}

.event-albums-mini-card:hover,
.event-albums-card:hover,
.event-albums-masonry-item:hover,
.event-albums-quick-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-lg);
}

.event-albums-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.event-albums-card:hover h4,
.event-albums-quick-card:hover h4 {
  color: var(--secondary);
}

.event-albums-card:hover a i {
  transform: translateX(5px);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .event-albums-wrapper {
    grid-template-columns: 1fr;
  }

  .event-albums-head h2 {
    font-size: 38px;
  }

  .event-albums-feature-card {
    min-height: 470px;
  }

  .event-albums-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .event-albums-masonry-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .event-albums-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .event-albums-section {
    padding: 64px 0;
  }

  .event-albums-head {
    margin-bottom: 36px;
  }

  .event-albums-head h2 {
    font-size: 34px;
  }

  .event-albums-category-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .event-albums-mini-grid,
  .event-albums-card-grid,
  .event-albums-masonry-grid {
    grid-template-columns: 1fr;
  }

  .event-albums-masonry-item.large,
  .event-albums-masonry-item.wide {
    grid-column: auto;
    grid-row: auto;
  }

  .event-albums-masonry-grid {
    grid-auto-rows: 240px;
  }

  .event-albums-feature-card {
    min-height: 390px;
  }
}

@media (max-width: 575px) {
  .event-albums-section {
    padding: 52px 0;
  }

  .event-albums-badge {
    font-size: 11.5px;
  }

  .event-albums-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .event-albums-head p {
    font-size: 14px;
  }

  .event-albums-feature-card {
    min-height: 360px;
    border-radius: 24px;
  }

  .event-albums-feature-overlay {
    left: 18px;
    right: 18px;
    bottom: 18px;
  }

  .event-albums-feature-overlay h3 {
    font-size: 24px;
  }

  .event-albums-feature-overlay p {
    font-size: 13px;
  }

  .event-albums-feature-overlay a,
  .event-albums-category-btn {
    width: 100%;
  }

  .event-albums-info-card {
    grid-template-columns: 1fr;
    padding: 24px;
    border-radius: 24px;
  }

  .event-albums-info-card h3 {
    font-size: 22px;
  }

  .event-albums-category-card {
    padding: 20px;
    border-radius: 24px;
  }

  .event-albums-category-head h3 {
    font-size: 21px;
  }

  .event-albums-card-img {
    height: 210px;
  }

  .event-albums-quick-row {
    grid-template-columns: 1fr;
  }

  .event-albums-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .event-albums-head h2 {
    font-size: 25px;
  }

  .event-albums-feature-card {
    min-height: 335px;
  }

  .event-albums-feature-overlay h3 {
    font-size: 21px;
  }
}

/* ================= EVENT ALBUMS SECTION CSS END ================= */



/* ================= CAMPUS PHOTO CATEGORIES SECTION CSS START ================= */

.campus-photo-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.campus-photo-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.campus-photo-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.campus-photo-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.campus-photo-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.campus-photo-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.campus-photo-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.campus-photo-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.campus-photo-head p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.campus-photo-wrapper {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 24px;
  align-items: stretch;
}

.campus-photo-feature {
  position: relative;
  min-height: 620px;
  border-radius: 34px;
  overflow: hidden;
  background: var(--primary-dark);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: var(--shadow-lg);
}

.campus-photo-feature img,
.campus-photo-img img,
.campus-photo-strip-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.55s ease;
}

.campus-photo-feature::before,
.campus-photo-img::before,
.campus-photo-strip-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 45, 85, 0.06), rgba(13, 45, 85, 0.86));
  z-index: 1;
}

.campus-photo-feature-content {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 30px;
  z-index: 2;
  color: #ffffff;
}

.campus-photo-feature-content > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  padding: 8px 13px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
  font-size: 11px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
  backdrop-filter: blur(12px);
}

.campus-photo-feature-content > span i {
  color: var(--accent);
}

.campus-photo-feature-content h3 {
  max-width: 560px;
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -0.7px;
}

.campus-photo-feature-content p {
  max-width: 580px;
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.65;
  font-weight: 500;
}

.campus-photo-feature-content a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.campus-photo-feature-content a:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

/* ================= CARDS ================= */

.campus-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.campus-photo-card {
  overflow: hidden;
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  transition: all 0.35s ease;
}

.campus-photo-card.active {
  border-color: rgba(181, 31, 42, 0.20);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.11);
}

.campus-photo-img {
  position: relative;
  height: 210px;
  overflow: hidden;
  background: var(--primary-dark);
}

.campus-photo-img::before {
  background: linear-gradient(180deg, rgba(13, 45, 85, 0.04), rgba(13, 45, 85, 0.48));
}

.campus-photo-body {
  position: relative;
  padding: 24px;
}

.campus-photo-icon {
  width: 58px;
  height: 58px;
  margin-top: -54px;
  margin-bottom: 16px;
  position: relative;
  z-index: 3;
  border-radius: 19px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border: 4px solid #ffffff;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}

.campus-photo-card.active .campus-photo-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.campus-photo-icon i {
  font-size: 23px;
}

.campus-photo-body > span {
  display: inline-flex;
  margin-bottom: 9px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.campus-photo-body h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.25px;
  transition: color 0.3s ease;
}

.campus-photo-body p {
  margin: 0 0 16px;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

.campus-photo-body a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--secondary);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
}

.campus-photo-body a i {
  transition: transform 0.3s ease;
}

/* ================= STRIP ================= */

.campus-photo-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 24px;
}

.campus-photo-strip-item {
  position: relative;
  min-height: 250px;
  border-radius: 28px;
  overflow: hidden;
  background: var(--primary-dark);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.65);
  transition: all 0.35s ease;
}

.campus-photo-strip-item div {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 2;
}

.campus-photo-strip-item span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.20);
  font-size: 10px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.campus-photo-strip-item h4 {
  margin: 0;
  color: #ffffff;
  font-size: 19px;
  line-height: 1.25;
  font-weight: 950;
}

/* ================= QUICK ================= */

.campus-photo-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.campus-photo-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 112px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.campus-photo-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.campus-photo-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.campus-photo-quick-card div {
  position: relative;
  z-index: 2;
}

.campus-photo-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.campus-photo-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= HOVER ================= */

.campus-photo-feature:hover img,
.campus-photo-card:hover img,
.campus-photo-strip-item:hover img {
  transform: scale(1.08);
}

.campus-photo-card:hover,
.campus-photo-strip-item:hover,
.campus-photo-quick-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-lg);
}

.campus-photo-card:hover h3,
.campus-photo-quick-card:hover h4 {
  color: var(--secondary);
}

.campus-photo-card:hover a i {
  transform: translateX(5px);
}

.campus-photo-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .campus-photo-wrapper {
    grid-template-columns: 1fr;
  }

  .campus-photo-head h2 {
    font-size: 38px;
  }

  .campus-photo-feature {
    min-height: 470px;
  }

  .campus-photo-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .campus-photo-section {
    padding: 64px 0;
  }

  .campus-photo-head {
    margin-bottom: 36px;
  }

  .campus-photo-head h2 {
    font-size: 34px;
  }

  .campus-photo-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .campus-photo-grid {
    grid-template-columns: 1fr;
  }

  .campus-photo-feature {
    min-height: 390px;
  }
}

@media (max-width: 575px) {
  .campus-photo-section {
    padding: 52px 0;
  }

  .campus-photo-badge {
    font-size: 11.5px;
  }

  .campus-photo-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .campus-photo-head p {
    font-size: 14px;
  }

  .campus-photo-feature {
    min-height: 360px;
    border-radius: 24px;
  }

  .campus-photo-feature-content {
    left: 18px;
    right: 18px;
    bottom: 18px;
  }

  .campus-photo-feature-content h3 {
    font-size: 24px;
  }

  .campus-photo-feature-content p {
    font-size: 13px;
  }

  .campus-photo-feature-content a {
    width: 100%;
  }

  .campus-photo-card {
    border-radius: 24px;
  }

  .campus-photo-img {
    height: 205px;
  }

  .campus-photo-body {
    padding: 22px;
  }

  .campus-photo-strip-item {
    min-height: 230px;
    border-radius: 24px;
  }

  .campus-photo-quick-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .campus-photo-head h2 {
    font-size: 25px;
  }

  .campus-photo-feature {
    min-height: 335px;
  }

  .campus-photo-feature-content h3 {
    font-size: 21px;
  }
}

/* ================= CAMPUS PHOTO CATEGORIES SECTION CSS END ================= */




















/* ================= LIBRARY SECTION CSS START ================= */

.library-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.library-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.library-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.library-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.library-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.library-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.library-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.library-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.library-head p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.library-wrapper {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= IMAGE CARD ================= */

.library-image-card {
  position: relative;
  min-height: 610px;
  border-radius: 34px;
  overflow: hidden;
  background: var(--primary-dark);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: var(--shadow-lg);
}

.library-image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.55s ease;
}

.library-image-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13, 45, 85, 0.08), rgba(13, 45, 85, 0.88));
  z-index: 1;
}

.library-image-overlay {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 30px;
  z-index: 2;
  color: #ffffff;
}

.library-image-overlay > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  padding: 8px 13px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
  font-size: 11px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
  backdrop-filter: blur(12px);
}

.library-image-overlay > span i {
  color: var(--accent);
}

.library-image-overlay h3 {
  max-width: 560px;
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -0.7px;
}

.library-image-overlay p {
  max-width: 580px;
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.65;
  font-weight: 500;
}

.library-image-overlay a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.library-image-overlay a:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

/* ================= CONTENT ================= */

.library-content {
  display: grid;
  gap: 18px;
}

.library-info-card {
  position: relative;
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 18px;
  padding: 28px;
  border-radius: 30px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.library-info-card::before {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  border: 38px solid rgba(255, 255, 255, 0.06);
}

.library-info-icon,
.library-info-card div {
  position: relative;
  z-index: 2;
}

.library-info-icon {
  width: 74px;
  height: 74px;
  border-radius: 24px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.library-info-icon i {
  font-size: 31px;
}

.library-info-card span {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 7px 11px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.library-info-card h3 {
  margin: 0 0 9px;
  color: #ffffff;
  font-size: 24px;
  line-height: 1.22;
  font-weight: 950;
}

.library-info-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.80);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.library-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.library-card {
  position: relative;
  padding: 24px;
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.library-card.active {
  border-color: rgba(181, 31, 42, 0.20);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.11);
}

.library-card::before {
  content: "";
  position: absolute;
  right: -46px;
  top: -46px;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.library-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.library-card-icon,
.library-card h4,
.library-card p,
.library-card a {
  position: relative;
  z-index: 2;
}

.library-card-icon {
  width: 58px;
  height: 58px;
  margin-bottom: 16px;
  border-radius: 19px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.library-card.active .library-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.library-card h4 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 19px;
  line-height: 1.25;
  font-weight: 950;
  transition: color 0.3s ease;
}

.library-card p {
  margin: 0 0 15px;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

.library-card a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--secondary);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
}

.library-card a i {
  transition: transform 0.3s ease;
}

/* ================= STATS ================= */

.library-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.library-stat-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 116px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.library-stat-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.library-stat-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.library-stat-card div {
  position: relative;
  z-index: 2;
}

.library-stat-card h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 23px;
  line-height: 1.1;
  font-weight: 950;
}

.library-stat-card p {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
}

/* ================= SERVICES ================= */

.library-services-card,
.library-table-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.library-services-head,
.library-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.library-services-head span,
.library-table-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.library-services-head h3,
.library-table-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.library-services-head p,
.library-table-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.library-services-btn,
.library-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.library-services-btn:hover,
.library-table-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.library-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.library-service-item {
  position: relative;
  padding: 22px;
  border-radius: 24px;
  background: var(--light-bg);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: all 0.35s ease;
}

.library-service-item::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.library-service-item::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.library-service-item i,
.library-service-item h4,
.library-service-item p {
  position: relative;
  z-index: 2;
}

.library-service-item > i {
  width: 56px;
  height: 56px;
  margin-bottom: 15px;
  border-radius: 18px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.library-service-item.active > i {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.library-service-item h4 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.library-service-item p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.58;
  font-weight: 500;
}

/* ================= TABLE ================= */

.library-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.library-table {
  width: 100%;
  min-width: 850px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.library-table thead th {
  padding: 0 16px 8px;
  color: var(--primary-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.library-table tbody tr {
  background: var(--light-bg);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.04);
}

.library-table tbody td {
  padding: 16px;
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 750;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.library-table tbody td:first-child {
  border-left: 1px solid var(--border);
  border-radius: 16px 0 0 16px;
  color: var(--primary-dark);
  font-weight: 950;
}

.library-table tbody td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 16px 16px 0;
}

.library-status {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.library-status.active {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.library-status.pending {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

/* ================= QUICK ================= */

.library-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.library-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 112px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.library-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.library-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.library-quick-card div {
  position: relative;
  z-index: 2;
}

.library-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.library-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= NOTE ================= */

.library-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.library-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.library-note-icon i {
  font-size: 26px;
}

.library-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.library-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.library-image-card:hover img {
  transform: scale(1.08);
}

.library-card:hover,
.library-stat-card:hover,
.library-service-item:hover,
.library-quick-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.library-card:hover::before,
.library-stat-card:hover::before,
.library-service-item:hover::before,
.library-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.library-card:hover::after,
.library-service-item:hover::after {
  transform: scaleX(1);
}

.library-card:hover h4,
.library-stat-card:hover h3,
.library-service-item:hover h4,
.library-quick-card:hover h4 {
  color: var(--secondary);
}

.library-card:hover a i {
  transform: translateX(5px);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .library-wrapper {
    grid-template-columns: 1fr;
  }

  .library-head h2 {
    font-size: 38px;
  }

  .library-image-card {
    min-height: 470px;
  }

  .library-stats-row,
  .library-services-grid,
  .library-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .library-section {
    padding: 64px 0;
  }

  .library-head {
    margin-bottom: 36px;
  }

  .library-head h2 {
    font-size: 34px;
  }

  .library-services-head,
  .library-table-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .library-grid {
    grid-template-columns: 1fr;
  }

  .library-image-card {
    min-height: 390px;
  }
}

@media (max-width: 575px) {
  .library-section {
    padding: 52px 0;
  }

  .library-badge {
    font-size: 11.5px;
  }

  .library-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .library-head p {
    font-size: 14px;
  }

  .library-image-card {
    min-height: 360px;
    border-radius: 24px;
  }

  .library-image-overlay {
    left: 18px;
    right: 18px;
    bottom: 18px;
  }

  .library-image-overlay h3 {
    font-size: 24px;
  }

  .library-image-overlay p {
    font-size: 13px;
  }

  .library-image-overlay a {
    width: 100%;
  }

  .library-info-card {
    grid-template-columns: 1fr;
    padding: 24px;
    border-radius: 24px;
  }

  .library-info-card h3 {
    font-size: 22px;
  }

  .library-card,
  .library-services-card,
  .library-table-card {
    border-radius: 24px;
  }

  .library-services-card,
  .library-table-card {
    padding: 20px;
  }

  .library-services-head h3,
  .library-table-head h3 {
    font-size: 21px;
  }

  .library-services-btn,
  .library-table-btn {
    width: 100%;
  }

  .library-stats-row,
  .library-services-grid,
  .library-quick-row {
    grid-template-columns: 1fr;
  }

  .library-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .library-head h2 {
    font-size: 25px;
  }

  .library-image-card {
    min-height: 335px;
  }

  .library-image-overlay h3 {
    font-size: 21px;
  }
}

/* ================= LIBRARY SECTION CSS END ================= */



/* ================= LABS SECTION CSS START ================= */

.college-labs-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.college-labs-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.college-labs-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.college-labs-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.college-labs-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.college-labs-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.college-labs-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.college-labs-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.college-labs-head p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.college-labs-wrapper {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= IMAGE CARD ================= */

.college-labs-image-card {
  position: relative;
  min-height: 610px;
  border-radius: 34px;
  overflow: hidden;
  background: var(--primary-dark);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: var(--shadow-lg);
}

.college-labs-image-card img,
.college-labs-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.55s ease;
}

.college-labs-image-card::before,
.college-labs-gallery-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13, 45, 85, 0.08), rgba(13, 45, 85, 0.88));
  z-index: 1;
}

.college-labs-image-overlay {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 30px;
  z-index: 2;
  color: #ffffff;
}

.college-labs-image-overlay > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  padding: 8px 13px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
  font-size: 11px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
  backdrop-filter: blur(12px);
}

.college-labs-image-overlay > span i {
  color: var(--accent);
}

.college-labs-image-overlay h3 {
  max-width: 560px;
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -0.7px;
}

.college-labs-image-overlay p {
  max-width: 580px;
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.65;
  font-weight: 500;
}

.college-labs-image-overlay a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.college-labs-image-overlay a:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

/* ================= CONTENT ================= */

.college-labs-content {
  display: grid;
  gap: 18px;
}

.college-labs-info-card {
  position: relative;
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 18px;
  padding: 28px;
  border-radius: 30px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.college-labs-info-card::before {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  border: 38px solid rgba(255, 255, 255, 0.06);
}

.college-labs-info-icon,
.college-labs-info-card div {
  position: relative;
  z-index: 2;
}

.college-labs-info-icon {
  width: 74px;
  height: 74px;
  border-radius: 24px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.college-labs-info-icon i {
  font-size: 31px;
}

.college-labs-info-card span {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 7px 11px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.college-labs-info-card h3 {
  margin: 0 0 9px;
  color: #ffffff;
  font-size: 24px;
  line-height: 1.22;
  font-weight: 950;
}

.college-labs-info-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.80);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.college-labs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.college-labs-card {
  position: relative;
  padding: 24px;
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.college-labs-card.active {
  border-color: rgba(181, 31, 42, 0.20);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.11);
}

.college-labs-card::before {
  content: "";
  position: absolute;
  right: -46px;
  top: -46px;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.college-labs-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.college-labs-card-icon,
.college-labs-card h4,
.college-labs-card p,
.college-labs-card a {
  position: relative;
  z-index: 2;
}

.college-labs-card-icon {
  width: 58px;
  height: 58px;
  margin-bottom: 16px;
  border-radius: 19px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.college-labs-card.active .college-labs-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.college-labs-card h4 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 19px;
  line-height: 1.25;
  font-weight: 950;
  transition: color 0.3s ease;
}

.college-labs-card p {
  margin: 0 0 15px;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

.college-labs-card a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--secondary);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
}

.college-labs-card a i {
  transition: transform 0.3s ease;
}

/* ================= FACILITY ROW ================= */

.college-labs-facility-row,
.college-labs-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.college-labs-facility-card,
.college-labs-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 116px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.college-labs-facility-card::before,
.college-labs-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.college-labs-facility-card > i,
.college-labs-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.college-labs-facility-card div,
.college-labs-quick-card div {
  position: relative;
  z-index: 2;
}

.college-labs-facility-card h3,
.college-labs-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.college-labs-facility-card p,
.college-labs-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= TYPES ================= */

.college-labs-types-card,
.college-labs-table-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.college-labs-types-head,
.college-labs-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.college-labs-types-head span,
.college-labs-table-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.college-labs-types-head h3,
.college-labs-table-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.college-labs-types-head p,
.college-labs-table-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.college-labs-types-btn,
.college-labs-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.college-labs-types-btn:hover,
.college-labs-table-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.college-labs-types-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.college-labs-type-item {
  position: relative;
  padding: 22px;
  border-radius: 24px;
  background: var(--light-bg);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: all 0.35s ease;
}

.college-labs-type-item::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.college-labs-type-item::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.college-labs-type-item i,
.college-labs-type-item h4,
.college-labs-type-item p {
  position: relative;
  z-index: 2;
}

.college-labs-type-item > i {
  width: 56px;
  height: 56px;
  margin-bottom: 15px;
  border-radius: 18px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.college-labs-type-item.active > i {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.college-labs-type-item h4 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.college-labs-type-item p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.58;
  font-weight: 500;
}

/* ================= GALLERY ================= */

.college-labs-gallery-row {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 1fr;
  grid-auto-rows: 215px;
  gap: 18px;
  margin-top: 24px;
}

.college-labs-gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: var(--primary-dark);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.10);
  transition: all 0.35s ease;
}

.college-labs-gallery-item.large {
  grid-row: span 2;
}

.college-labs-gallery-item.wide {
  grid-column: span 2;
}

.college-labs-gallery-item div {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 2;
}

.college-labs-gallery-item span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.20);
  font-size: 10px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.college-labs-gallery-item h4 {
  margin: 0;
  color: #ffffff;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

/* ================= TABLE ================= */

.college-labs-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.college-labs-table {
  width: 100%;
  min-width: 850px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.college-labs-table thead th {
  padding: 0 16px 8px;
  color: var(--primary-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.college-labs-table tbody tr {
  background: var(--light-bg);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.04);
}

.college-labs-table tbody td {
  padding: 16px;
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 750;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.college-labs-table tbody td:first-child {
  border-left: 1px solid var(--border);
  border-radius: 16px 0 0 16px;
  color: var(--primary-dark);
  font-weight: 950;
}

.college-labs-table tbody td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 16px 16px 0;
}

.college-labs-status {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.college-labs-status.active {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.college-labs-status.pending {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

/* ================= NOTE ================= */

.college-labs-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.college-labs-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.college-labs-note-icon i {
  font-size: 26px;
}

.college-labs-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.college-labs-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.college-labs-image-card:hover img,
.college-labs-gallery-item:hover img {
  transform: scale(1.08);
}

.college-labs-card:hover,
.college-labs-facility-card:hover,
.college-labs-type-item:hover,
.college-labs-gallery-item:hover,
.college-labs-quick-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.college-labs-card:hover::before,
.college-labs-facility-card:hover::before,
.college-labs-type-item:hover::before,
.college-labs-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.college-labs-card:hover::after,
.college-labs-type-item:hover::after {
  transform: scaleX(1);
}

.college-labs-card:hover h4,
.college-labs-facility-card:hover h3,
.college-labs-type-item:hover h4,
.college-labs-quick-card:hover h4 {
  color: var(--secondary);
}

.college-labs-card:hover a i {
  transform: translateX(5px);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .college-labs-wrapper {
    grid-template-columns: 1fr;
  }

  .college-labs-head h2 {
    font-size: 38px;
  }

  .college-labs-image-card {
    min-height: 470px;
  }

  .college-labs-facility-row,
  .college-labs-types-grid,
  .college-labs-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .college-labs-gallery-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .college-labs-section {
    padding: 64px 0;
  }

  .college-labs-head {
    margin-bottom: 36px;
  }

  .college-labs-head h2 {
    font-size: 34px;
  }

  .college-labs-types-head,
  .college-labs-table-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .college-labs-grid,
  .college-labs-gallery-row {
    grid-template-columns: 1fr;
  }

  .college-labs-gallery-item.large,
  .college-labs-gallery-item.wide {
    grid-column: auto;
    grid-row: auto;
  }

  .college-labs-gallery-row {
    grid-auto-rows: 240px;
  }

  .college-labs-image-card {
    min-height: 390px;
  }
}

@media (max-width: 575px) {
  .college-labs-section {
    padding: 52px 0;
  }

  .college-labs-badge {
    font-size: 11.5px;
  }

  .college-labs-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .college-labs-head p {
    font-size: 14px;
  }

  .college-labs-image-card {
    min-height: 360px;
    border-radius: 24px;
  }

  .college-labs-image-overlay {
    left: 18px;
    right: 18px;
    bottom: 18px;
  }

  .college-labs-image-overlay h3 {
    font-size: 24px;
  }

  .college-labs-image-overlay p {
    font-size: 13px;
  }

  .college-labs-image-overlay a {
    width: 100%;
  }

  .college-labs-info-card {
    grid-template-columns: 1fr;
    padding: 24px;
    border-radius: 24px;
  }

  .college-labs-info-card h3 {
    font-size: 22px;
  }

  .college-labs-card,
  .college-labs-types-card,
  .college-labs-table-card {
    border-radius: 24px;
  }

  .college-labs-types-card,
  .college-labs-table-card {
    padding: 20px;
  }

  .college-labs-types-head h3,
  .college-labs-table-head h3 {
    font-size: 21px;
  }

  .college-labs-types-btn,
  .college-labs-table-btn {
    width: 100%;
  }

  .college-labs-facility-row,
  .college-labs-types-grid,
  .college-labs-quick-row {
    grid-template-columns: 1fr;
  }

  .college-labs-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .college-labs-head h2 {
    font-size: 25px;
  }

  .college-labs-image-card {
    min-height: 335px;
  }

  .college-labs-image-overlay h3 {
    font-size: 21px;
  }
}

/* ================= LABS SECTION CSS END ================= */




/* ================= COMPUTER LAB SECTION CSS START ================= */

.computer-lab-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.computer-lab-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.computer-lab-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.computer-lab-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.computer-lab-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.computer-lab-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.computer-lab-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.computer-lab-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.computer-lab-head p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.computer-lab-wrapper {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= IMAGE CARD ================= */

.computer-lab-image-card {
  position: relative;
  min-height: 610px;
  border-radius: 34px;
  overflow: hidden;
  background: var(--primary-dark);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: var(--shadow-lg);
}

.computer-lab-image-card img,
.computer-lab-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.55s ease;
}

.computer-lab-image-card::before,
.computer-lab-gallery-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13, 45, 85, 0.08), rgba(13, 45, 85, 0.88));
  z-index: 1;
}

.computer-lab-image-overlay {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 30px;
  z-index: 2;
  color: #ffffff;
}

.computer-lab-image-overlay > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  padding: 8px 13px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
  font-size: 11px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
  backdrop-filter: blur(12px);
}

.computer-lab-image-overlay > span i {
  color: var(--accent);
}

.computer-lab-image-overlay h3 {
  max-width: 560px;
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -0.7px;
}

.computer-lab-image-overlay p {
  max-width: 580px;
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.65;
  font-weight: 500;
}

.computer-lab-image-overlay a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.computer-lab-image-overlay a:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

/* ================= CONTENT ================= */

.computer-lab-content {
  display: grid;
  gap: 18px;
}

.computer-lab-info-card {
  position: relative;
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 18px;
  padding: 28px;
  border-radius: 30px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.computer-lab-info-card::before {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  border: 38px solid rgba(255, 255, 255, 0.06);
}

.computer-lab-info-icon,
.computer-lab-info-card div {
  position: relative;
  z-index: 2;
}

.computer-lab-info-icon {
  width: 74px;
  height: 74px;
  border-radius: 24px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.computer-lab-info-icon i {
  font-size: 31px;
}

.computer-lab-info-card span {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 7px 11px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.computer-lab-info-card h3 {
  margin: 0 0 9px;
  color: #ffffff;
  font-size: 24px;
  line-height: 1.22;
  font-weight: 950;
}

.computer-lab-info-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.80);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.computer-lab-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.computer-lab-card {
  position: relative;
  padding: 24px;
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.computer-lab-card.active {
  border-color: rgba(181, 31, 42, 0.20);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.11);
}

.computer-lab-card::before {
  content: "";
  position: absolute;
  right: -46px;
  top: -46px;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.computer-lab-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.computer-lab-card-icon,
.computer-lab-card h4,
.computer-lab-card p,
.computer-lab-card a {
  position: relative;
  z-index: 2;
}

.computer-lab-card-icon {
  width: 58px;
  height: 58px;
  margin-bottom: 16px;
  border-radius: 19px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.computer-lab-card.active .computer-lab-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.computer-lab-card h4 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 19px;
  line-height: 1.25;
  font-weight: 950;
  transition: color 0.3s ease;
}

.computer-lab-card p {
  margin: 0 0 15px;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

.computer-lab-card a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--secondary);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
}

.computer-lab-card a i {
  transition: transform 0.3s ease;
}

/* ================= HIGHLIGHT ROW ================= */

.computer-lab-highlight-row,
.computer-lab-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.computer-lab-highlight-card,
.computer-lab-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 116px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.computer-lab-highlight-card::before,
.computer-lab-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.computer-lab-highlight-card > i,
.computer-lab-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.computer-lab-highlight-card div,
.computer-lab-quick-card div {
  position: relative;
  z-index: 2;
}

.computer-lab-highlight-card h3,
.computer-lab-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.computer-lab-highlight-card p,
.computer-lab-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= FACILITIES ================= */

.computer-lab-facilities-card,
.computer-lab-table-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.computer-lab-facilities-head,
.computer-lab-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.computer-lab-facilities-head span,
.computer-lab-table-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.computer-lab-facilities-head h3,
.computer-lab-table-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.computer-lab-facilities-head p,
.computer-lab-table-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.computer-lab-facilities-btn,
.computer-lab-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.computer-lab-facilities-btn:hover,
.computer-lab-table-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.computer-lab-facilities-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.computer-lab-facility-item {
  position: relative;
  padding: 22px;
  border-radius: 24px;
  background: var(--light-bg);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: all 0.35s ease;
}

.computer-lab-facility-item::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.computer-lab-facility-item::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.computer-lab-facility-item i,
.computer-lab-facility-item h4,
.computer-lab-facility-item p {
  position: relative;
  z-index: 2;
}

.computer-lab-facility-item > i {
  width: 56px;
  height: 56px;
  margin-bottom: 15px;
  border-radius: 18px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.computer-lab-facility-item.active > i {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.computer-lab-facility-item h4 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.computer-lab-facility-item p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.58;
  font-weight: 500;
}

/* ================= GALLERY ================= */

.computer-lab-gallery-row {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 1fr;
  grid-auto-rows: 215px;
  gap: 18px;
  margin-top: 24px;
}

.computer-lab-gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: var(--primary-dark);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.10);
  transition: all 0.35s ease;
}

.computer-lab-gallery-item.large {
  grid-row: span 2;
}

.computer-lab-gallery-item.wide {
  grid-column: span 2;
}

.computer-lab-gallery-item div {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 2;
}

.computer-lab-gallery-item span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.20);
  font-size: 10px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.computer-lab-gallery-item h4 {
  margin: 0;
  color: #ffffff;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

/* ================= TABLE ================= */

.computer-lab-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.computer-lab-table {
  width: 100%;
  min-width: 850px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.computer-lab-table thead th {
  padding: 0 16px 8px;
  color: var(--primary-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.computer-lab-table tbody tr {
  background: var(--light-bg);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.04);
}

.computer-lab-table tbody td {
  padding: 16px;
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 750;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.computer-lab-table tbody td:first-child {
  border-left: 1px solid var(--border);
  border-radius: 16px 0 0 16px;
  color: var(--primary-dark);
  font-weight: 950;
}

.computer-lab-table tbody td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 16px 16px 0;
}

.computer-lab-status {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.computer-lab-status.active {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.computer-lab-status.pending {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

/* ================= NOTE ================= */

.computer-lab-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.computer-lab-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.computer-lab-note-icon i {
  font-size: 26px;
}

.computer-lab-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.computer-lab-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.computer-lab-image-card:hover img,
.computer-lab-gallery-item:hover img {
  transform: scale(1.08);
}

.computer-lab-card:hover,
.computer-lab-highlight-card:hover,
.computer-lab-facility-item:hover,
.computer-lab-gallery-item:hover,
.computer-lab-quick-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.computer-lab-card:hover::before,
.computer-lab-highlight-card:hover::before,
.computer-lab-facility-item:hover::before,
.computer-lab-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.computer-lab-card:hover::after,
.computer-lab-facility-item:hover::after {
  transform: scaleX(1);
}

.computer-lab-card:hover h4,
.computer-lab-highlight-card:hover h3,
.computer-lab-facility-item:hover h4,
.computer-lab-quick-card:hover h4 {
  color: var(--secondary);
}

.computer-lab-card:hover a i {
  transform: translateX(5px);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .computer-lab-wrapper {
    grid-template-columns: 1fr;
  }

  .computer-lab-head h2 {
    font-size: 38px;
  }

  .computer-lab-image-card {
    min-height: 470px;
  }

  .computer-lab-highlight-row,
  .computer-lab-facilities-grid,
  .computer-lab-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .computer-lab-gallery-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .computer-lab-section {
    padding: 64px 0;
  }

  .computer-lab-head {
    margin-bottom: 36px;
  }

  .computer-lab-head h2 {
    font-size: 34px;
  }

  .computer-lab-facilities-head,
  .computer-lab-table-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .computer-lab-grid,
  .computer-lab-gallery-row {
    grid-template-columns: 1fr;
  }

  .computer-lab-gallery-item.large,
  .computer-lab-gallery-item.wide {
    grid-column: auto;
    grid-row: auto;
  }

  .computer-lab-gallery-row {
    grid-auto-rows: 240px;
  }

  .computer-lab-image-card {
    min-height: 390px;
  }
}

@media (max-width: 575px) {
  .computer-lab-section {
    padding: 52px 0;
  }

  .computer-lab-badge {
    font-size: 11.5px;
  }

  .computer-lab-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .computer-lab-head p {
    font-size: 14px;
  }

  .computer-lab-image-card {
    min-height: 360px;
    border-radius: 24px;
  }

  .computer-lab-image-overlay {
    left: 18px;
    right: 18px;
    bottom: 18px;
  }

  .computer-lab-image-overlay h3 {
    font-size: 24px;
  }

  .computer-lab-image-overlay p {
    font-size: 13px;
  }

  .computer-lab-image-overlay a {
    width: 100%;
  }

  .computer-lab-info-card {
    grid-template-columns: 1fr;
    padding: 24px;
    border-radius: 24px;
  }

  .computer-lab-info-card h3 {
    font-size: 22px;
  }

  .computer-lab-card,
  .computer-lab-facilities-card,
  .computer-lab-table-card {
    border-radius: 24px;
  }

  .computer-lab-facilities-card,
  .computer-lab-table-card {
    padding: 20px;
  }

  .computer-lab-facilities-head h3,
  .computer-lab-table-head h3 {
    font-size: 21px;
  }

  .computer-lab-facilities-btn,
  .computer-lab-table-btn {
    width: 100%;
  }

  .computer-lab-highlight-row,
  .computer-lab-facilities-grid,
  .computer-lab-quick-row {
    grid-template-columns: 1fr;
  }

  .computer-lab-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .computer-lab-head h2 {
    font-size: 25px;
  }

  .computer-lab-image-card {
    min-height: 335px;
  }

  .computer-lab-image-overlay h3 {
    font-size: 21px;
  }
}

/* ================= COMPUTER LAB SECTION CSS END ================= */




/* ================= CLASSROOMS SECTION CSS START ================= */

.classrooms-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.classrooms-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.classrooms-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.classrooms-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.classrooms-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.classrooms-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.classrooms-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.classrooms-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.classrooms-head p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.classrooms-wrapper {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= IMAGE CARD ================= */

.classrooms-image-card {
  position: relative;
  min-height: 610px;
  border-radius: 34px;
  overflow: hidden;
  background: var(--primary-dark);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: var(--shadow-lg);
}

.classrooms-image-card img,
.classrooms-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.55s ease;
}

.classrooms-image-card::before,
.classrooms-gallery-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13, 45, 85, 0.08), rgba(13, 45, 85, 0.88));
  z-index: 1;
}

.classrooms-image-overlay {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 30px;
  z-index: 2;
  color: #ffffff;
}

.classrooms-image-overlay > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  padding: 8px 13px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
  font-size: 11px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
  backdrop-filter: blur(12px);
}

.classrooms-image-overlay > span i {
  color: var(--accent);
}

.classrooms-image-overlay h3 {
  max-width: 560px;
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -0.7px;
}

.classrooms-image-overlay p {
  max-width: 580px;
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.65;
  font-weight: 500;
}

.classrooms-image-overlay a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.classrooms-image-overlay a:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

/* ================= CONTENT ================= */

.classrooms-content {
  display: grid;
  gap: 18px;
}

.classrooms-info-card {
  position: relative;
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 18px;
  padding: 28px;
  border-radius: 30px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.classrooms-info-card::before {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  border: 38px solid rgba(255, 255, 255, 0.06);
}

.classrooms-info-icon,
.classrooms-info-card div {
  position: relative;
  z-index: 2;
}

.classrooms-info-icon {
  width: 74px;
  height: 74px;
  border-radius: 24px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.classrooms-info-icon i {
  font-size: 31px;
}

.classrooms-info-card span {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 7px 11px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.classrooms-info-card h3 {
  margin: 0 0 9px;
  color: #ffffff;
  font-size: 24px;
  line-height: 1.22;
  font-weight: 950;
}

.classrooms-info-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.80);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.classrooms-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.classrooms-card {
  position: relative;
  padding: 24px;
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.classrooms-card.active {
  border-color: rgba(181, 31, 42, 0.20);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.11);
}

.classrooms-card::before {
  content: "";
  position: absolute;
  right: -46px;
  top: -46px;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.classrooms-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.classrooms-card-icon,
.classrooms-card h4,
.classrooms-card p,
.classrooms-card a {
  position: relative;
  z-index: 2;
}

.classrooms-card-icon {
  width: 58px;
  height: 58px;
  margin-bottom: 16px;
  border-radius: 19px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.classrooms-card.active .classrooms-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.classrooms-card h4 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 19px;
  line-height: 1.25;
  font-weight: 950;
  transition: color 0.3s ease;
}

.classrooms-card p {
  margin: 0 0 15px;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

.classrooms-card a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--secondary);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
}

.classrooms-card a i {
  transition: transform 0.3s ease;
}

/* ================= HIGHLIGHT ROW ================= */

.classrooms-highlight-row,
.classrooms-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.classrooms-highlight-card,
.classrooms-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 116px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.classrooms-highlight-card::before,
.classrooms-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.classrooms-highlight-card > i,
.classrooms-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.classrooms-highlight-card div,
.classrooms-quick-card div {
  position: relative;
  z-index: 2;
}

.classrooms-highlight-card h3,
.classrooms-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.classrooms-highlight-card p,
.classrooms-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= FACILITIES ================= */

.classrooms-facilities-card,
.classrooms-table-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.classrooms-facilities-head,
.classrooms-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.classrooms-facilities-head span,
.classrooms-table-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.classrooms-facilities-head h3,
.classrooms-table-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.classrooms-facilities-head p,
.classrooms-table-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.classrooms-facilities-btn,
.classrooms-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.classrooms-facilities-btn:hover,
.classrooms-table-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.classrooms-facilities-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.classrooms-facility-item {
  position: relative;
  padding: 22px;
  border-radius: 24px;
  background: var(--light-bg);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: all 0.35s ease;
}

.classrooms-facility-item::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.classrooms-facility-item::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.classrooms-facility-item i,
.classrooms-facility-item h4,
.classrooms-facility-item p {
  position: relative;
  z-index: 2;
}

.classrooms-facility-item > i {
  width: 56px;
  height: 56px;
  margin-bottom: 15px;
  border-radius: 18px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.classrooms-facility-item.active > i {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.classrooms-facility-item h4 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.classrooms-facility-item p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.58;
  font-weight: 500;
}

/* ================= GALLERY ================= */

.classrooms-gallery-row {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 1fr;
  grid-auto-rows: 215px;
  gap: 18px;
  margin-top: 24px;
}

.classrooms-gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: var(--primary-dark);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.10);
  transition: all 0.35s ease;
}

.classrooms-gallery-item.large {
  grid-row: span 2;
}

.classrooms-gallery-item.wide {
  grid-column: span 2;
}

.classrooms-gallery-item div {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 2;
}

.classrooms-gallery-item span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.20);
  font-size: 10px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.classrooms-gallery-item h4 {
  margin: 0;
  color: #ffffff;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

/* ================= TABLE ================= */

.classrooms-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.classrooms-table {
  width: 100%;
  min-width: 850px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.classrooms-table thead th {
  padding: 0 16px 8px;
  color: var(--primary-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.classrooms-table tbody tr {
  background: var(--light-bg);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.04);
}

.classrooms-table tbody td {
  padding: 16px;
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 750;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.classrooms-table tbody td:first-child {
  border-left: 1px solid var(--border);
  border-radius: 16px 0 0 16px;
  color: var(--primary-dark);
  font-weight: 950;
}

.classrooms-table tbody td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 16px 16px 0;
}

.classrooms-status {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.classrooms-status.active {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.classrooms-status.pending {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

/* ================= NOTE ================= */

.classrooms-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.classrooms-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.classrooms-note-icon i {
  font-size: 26px;
}

.classrooms-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.classrooms-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.classrooms-image-card:hover img,
.classrooms-gallery-item:hover img {
  transform: scale(1.08);
}

.classrooms-card:hover,
.classrooms-highlight-card:hover,
.classrooms-facility-item:hover,
.classrooms-gallery-item:hover,
.classrooms-quick-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.classrooms-card:hover::before,
.classrooms-highlight-card:hover::before,
.classrooms-facility-item:hover::before,
.classrooms-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.classrooms-card:hover::after,
.classrooms-facility-item:hover::after {
  transform: scaleX(1);
}

.classrooms-card:hover h4,
.classrooms-highlight-card:hover h3,
.classrooms-facility-item:hover h4,
.classrooms-quick-card:hover h4 {
  color: var(--secondary);
}

.classrooms-card:hover a i {
  transform: translateX(5px);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .classrooms-wrapper {
    grid-template-columns: 1fr;
  }

  .classrooms-head h2 {
    font-size: 38px;
  }

  .classrooms-image-card {
    min-height: 470px;
  }

  .classrooms-highlight-row,
  .classrooms-facilities-grid,
  .classrooms-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .classrooms-gallery-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .classrooms-section {
    padding: 64px 0;
  }

  .classrooms-head {
    margin-bottom: 36px;
  }

  .classrooms-head h2 {
    font-size: 34px;
  }

  .classrooms-facilities-head,
  .classrooms-table-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .classrooms-grid,
  .classrooms-gallery-row {
    grid-template-columns: 1fr;
  }

  .classrooms-gallery-item.large,
  .classrooms-gallery-item.wide {
    grid-column: auto;
    grid-row: auto;
  }

  .classrooms-gallery-row {
    grid-auto-rows: 240px;
  }

  .classrooms-image-card {
    min-height: 390px;
  }
}

@media (max-width: 575px) {
  .classrooms-section {
    padding: 52px 0;
  }

  .classrooms-badge {
    font-size: 11.5px;
  }

  .classrooms-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .classrooms-head p {
    font-size: 14px;
  }

  .classrooms-image-card {
    min-height: 360px;
    border-radius: 24px;
  }

  .classrooms-image-overlay {
    left: 18px;
    right: 18px;
    bottom: 18px;
  }

  .classrooms-image-overlay h3 {
    font-size: 24px;
  }

  .classrooms-image-overlay p {
    font-size: 13px;
  }

  .classrooms-image-overlay a {
    width: 100%;
  }

  .classrooms-info-card {
    grid-template-columns: 1fr;
    padding: 24px;
    border-radius: 24px;
  }

  .classrooms-info-card h3 {
    font-size: 22px;
  }

  .classrooms-card,
  .classrooms-facilities-card,
  .classrooms-table-card {
    border-radius: 24px;
  }

  .classrooms-facilities-card,
  .classrooms-table-card {
    padding: 20px;
  }

  .classrooms-facilities-head h3,
  .classrooms-table-head h3 {
    font-size: 21px;
  }

  .classrooms-facilities-btn,
  .classrooms-table-btn {
    width: 100%;
  }

  .classrooms-highlight-row,
  .classrooms-facilities-grid,
  .classrooms-quick-row {
    grid-template-columns: 1fr;
  }

  .classrooms-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .classrooms-head h2 {
    font-size: 25px;
  }

  .classrooms-image-card {
    min-height: 335px;
  }

  .classrooms-image-overlay h3 {
    font-size: 21px;
  }
}

/* ================= CLASSROOMS SECTION CSS END ================= */




/* ================= AUDITORIUM / SEMINAR HALL SECTION CSS START ================= */

.auditorium-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.auditorium-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.auditorium-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.auditorium-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.auditorium-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.auditorium-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.auditorium-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.auditorium-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.auditorium-head p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.auditorium-wrapper {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= IMAGE CARD ================= */

.auditorium-image-card {
  position: relative;
  min-height: 610px;
  border-radius: 34px;
  overflow: hidden;
  background: var(--primary-dark);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: var(--shadow-lg);
}

.auditorium-image-card img,
.auditorium-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.55s ease;
}

.auditorium-image-card::before,
.auditorium-gallery-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13, 45, 85, 0.08), rgba(13, 45, 85, 0.88));
  z-index: 1;
}

.auditorium-image-overlay {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 30px;
  z-index: 2;
  color: #ffffff;
}

.auditorium-image-overlay > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  padding: 8px 13px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
  font-size: 11px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
  backdrop-filter: blur(12px);
}

.auditorium-image-overlay > span i {
  color: var(--accent);
}

.auditorium-image-overlay h3 {
  max-width: 560px;
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -0.7px;
}

.auditorium-image-overlay p {
  max-width: 580px;
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.65;
  font-weight: 500;
}

.auditorium-image-overlay a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.auditorium-image-overlay a:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

/* ================= CONTENT ================= */

.auditorium-content {
  display: grid;
  gap: 18px;
}

.auditorium-info-card {
  position: relative;
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 18px;
  padding: 28px;
  border-radius: 30px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.auditorium-info-card::before {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  border: 38px solid rgba(255, 255, 255, 0.06);
}

.auditorium-info-icon,
.auditorium-info-card div {
  position: relative;
  z-index: 2;
}

.auditorium-info-icon {
  width: 74px;
  height: 74px;
  border-radius: 24px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.auditorium-info-icon i {
  font-size: 31px;
}

.auditorium-info-card span {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 7px 11px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.auditorium-info-card h3 {
  margin: 0 0 9px;
  color: #ffffff;
  font-size: 24px;
  line-height: 1.22;
  font-weight: 950;
}

.auditorium-info-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.80);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.auditorium-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.auditorium-card {
  position: relative;
  padding: 24px;
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.auditorium-card.active {
  border-color: rgba(181, 31, 42, 0.20);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.11);
}

.auditorium-card::before {
  content: "";
  position: absolute;
  right: -46px;
  top: -46px;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.auditorium-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.auditorium-card-icon,
.auditorium-card h4,
.auditorium-card p,
.auditorium-card a {
  position: relative;
  z-index: 2;
}

.auditorium-card-icon {
  width: 58px;
  height: 58px;
  margin-bottom: 16px;
  border-radius: 19px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.auditorium-card.active .auditorium-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.auditorium-card h4 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 19px;
  line-height: 1.25;
  font-weight: 950;
  transition: color 0.3s ease;
}

.auditorium-card p {
  margin: 0 0 15px;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

.auditorium-card a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--secondary);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
}

.auditorium-card a i {
  transition: transform 0.3s ease;
}

/* ================= HIGHLIGHT ROW ================= */

.auditorium-highlight-row,
.auditorium-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.auditorium-highlight-card,
.auditorium-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 116px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.auditorium-highlight-card::before,
.auditorium-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.auditorium-highlight-card > i,
.auditorium-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.auditorium-highlight-card div,
.auditorium-quick-card div {
  position: relative;
  z-index: 2;
}

.auditorium-highlight-card h3,
.auditorium-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.auditorium-highlight-card p,
.auditorium-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= FACILITIES ================= */

.auditorium-facilities-card,
.auditorium-table-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.auditorium-facilities-head,
.auditorium-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.auditorium-facilities-head span,
.auditorium-table-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.auditorium-facilities-head h3,
.auditorium-table-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.auditorium-facilities-head p,
.auditorium-table-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.auditorium-facilities-btn,
.auditorium-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.auditorium-facilities-btn:hover,
.auditorium-table-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.auditorium-facilities-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.auditorium-facility-item {
  position: relative;
  padding: 22px;
  border-radius: 24px;
  background: var(--light-bg);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: all 0.35s ease;
}

.auditorium-facility-item::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.auditorium-facility-item::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.auditorium-facility-item i,
.auditorium-facility-item h4,
.auditorium-facility-item p {
  position: relative;
  z-index: 2;
}

.auditorium-facility-item > i {
  width: 56px;
  height: 56px;
  margin-bottom: 15px;
  border-radius: 18px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.auditorium-facility-item.active > i {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.auditorium-facility-item h4 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.auditorium-facility-item p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.58;
  font-weight: 500;
}

/* ================= GALLERY ================= */

.auditorium-gallery-row {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 1fr;
  grid-auto-rows: 215px;
  gap: 18px;
  margin-top: 24px;
}

.auditorium-gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: var(--primary-dark);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.10);
  transition: all 0.35s ease;
}

.auditorium-gallery-item.large {
  grid-row: span 2;
}

.auditorium-gallery-item.wide {
  grid-column: span 2;
}

.auditorium-gallery-item div {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 2;
}

.auditorium-gallery-item span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.20);
  font-size: 10px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.auditorium-gallery-item h4 {
  margin: 0;
  color: #ffffff;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

/* ================= TABLE ================= */

.auditorium-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.auditorium-table {
  width: 100%;
  min-width: 850px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.auditorium-table thead th {
  padding: 0 16px 8px;
  color: var(--primary-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.auditorium-table tbody tr {
  background: var(--light-bg);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.04);
}

.auditorium-table tbody td {
  padding: 16px;
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 750;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.auditorium-table tbody td:first-child {
  border-left: 1px solid var(--border);
  border-radius: 16px 0 0 16px;
  color: var(--primary-dark);
  font-weight: 950;
}

.auditorium-table tbody td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 16px 16px 0;
}

.auditorium-status {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.auditorium-status.active {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.auditorium-status.pending {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

/* ================= NOTE ================= */

.auditorium-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.auditorium-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.auditorium-note-icon i {
  font-size: 26px;
}

.auditorium-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.auditorium-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.auditorium-image-card:hover img,
.auditorium-gallery-item:hover img {
  transform: scale(1.08);
}

.auditorium-card:hover,
.auditorium-highlight-card:hover,
.auditorium-facility-item:hover,
.auditorium-gallery-item:hover,
.auditorium-quick-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.auditorium-card:hover::before,
.auditorium-highlight-card:hover::before,
.auditorium-facility-item:hover::before,
.auditorium-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.auditorium-card:hover::after,
.auditorium-facility-item:hover::after {
  transform: scaleX(1);
}

.auditorium-card:hover h4,
.auditorium-highlight-card:hover h3,
.auditorium-facility-item:hover h4,
.auditorium-quick-card:hover h4 {
  color: var(--secondary);
}

.auditorium-card:hover a i {
  transform: translateX(5px);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .auditorium-wrapper {
    grid-template-columns: 1fr;
  }

  .auditorium-head h2 {
    font-size: 38px;
  }

  .auditorium-image-card {
    min-height: 470px;
  }

  .auditorium-highlight-row,
  .auditorium-facilities-grid,
  .auditorium-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .auditorium-gallery-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .auditorium-section {
    padding: 64px 0;
  }

  .auditorium-head {
    margin-bottom: 36px;
  }

  .auditorium-head h2 {
    font-size: 34px;
  }

  .auditorium-facilities-head,
  .auditorium-table-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .auditorium-grid,
  .auditorium-gallery-row {
    grid-template-columns: 1fr;
  }

  .auditorium-gallery-item.large,
  .auditorium-gallery-item.wide {
    grid-column: auto;
    grid-row: auto;
  }

  .auditorium-gallery-row {
    grid-auto-rows: 240px;
  }

  .auditorium-image-card {
    min-height: 390px;
  }
}

@media (max-width: 575px) {
  .auditorium-section {
    padding: 52px 0;
  }

  .auditorium-badge {
    font-size: 11.5px;
  }

  .auditorium-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .auditorium-head p {
    font-size: 14px;
  }

  .auditorium-image-card {
    min-height: 360px;
    border-radius: 24px;
  }

  .auditorium-image-overlay {
    left: 18px;
    right: 18px;
    bottom: 18px;
  }

  .auditorium-image-overlay h3 {
    font-size: 24px;
  }

  .auditorium-image-overlay p {
    font-size: 13px;
  }

  .auditorium-image-overlay a {
    width: 100%;
  }

  .auditorium-info-card {
    grid-template-columns: 1fr;
    padding: 24px;
    border-radius: 24px;
  }

  .auditorium-info-card h3 {
    font-size: 22px;
  }

  .auditorium-card,
  .auditorium-facilities-card,
  .auditorium-table-card {
    border-radius: 24px;
  }

  .auditorium-facilities-card,
  .auditorium-table-card {
    padding: 20px;
  }

  .auditorium-facilities-head h3,
  .auditorium-table-head h3 {
    font-size: 21px;
  }

  .auditorium-facilities-btn,
  .auditorium-table-btn {
    width: 100%;
  }

  .auditorium-highlight-row,
  .auditorium-facilities-grid,
  .auditorium-quick-row {
    grid-template-columns: 1fr;
  }

  .auditorium-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .auditorium-head h2 {
    font-size: 25px;
  }

  .auditorium-image-card {
    min-height: 335px;
  }

  .auditorium-image-overlay h3 {
    font-size: 21px;
  }
}

/* ================= AUDITORIUM / SEMINAR HALL SECTION CSS END ================= */




/* ================= COMMON ROOM SECTION CSS START ================= */

.common-room-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.common-room-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.common-room-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.common-room-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.common-room-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.common-room-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.common-room-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.common-room-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.common-room-head p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.common-room-wrapper {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= IMAGE CARD ================= */

.common-room-image-card {
  position: relative;
  min-height: 610px;
  border-radius: 34px;
  overflow: hidden;
  background: var(--primary-dark);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: var(--shadow-lg);
}

.common-room-image-card img,
.common-room-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.55s ease;
}

.common-room-image-card::before,
.common-room-gallery-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13, 45, 85, 0.08), rgba(13, 45, 85, 0.88));
  z-index: 1;
}

.common-room-image-overlay {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 30px;
  z-index: 2;
  color: #ffffff;
}

.common-room-image-overlay > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  padding: 8px 13px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
  font-size: 11px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
  backdrop-filter: blur(12px);
}

.common-room-image-overlay > span i {
  color: var(--accent);
}

.common-room-image-overlay h3 {
  max-width: 560px;
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -0.7px;
}

.common-room-image-overlay p {
  max-width: 580px;
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.65;
  font-weight: 500;
}

.common-room-image-overlay a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.common-room-image-overlay a:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

/* ================= CONTENT ================= */

.common-room-content {
  display: grid;
  gap: 18px;
}

.common-room-info-card {
  position: relative;
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 18px;
  padding: 28px;
  border-radius: 30px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.common-room-info-card::before {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  border: 38px solid rgba(255, 255, 255, 0.06);
}

.common-room-info-icon,
.common-room-info-card div {
  position: relative;
  z-index: 2;
}

.common-room-info-icon {
  width: 74px;
  height: 74px;
  border-radius: 24px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.common-room-info-icon i {
  font-size: 31px;
}

.common-room-info-card span {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 7px 11px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.common-room-info-card h3 {
  margin: 0 0 9px;
  color: #ffffff;
  font-size: 24px;
  line-height: 1.22;
  font-weight: 950;
}

.common-room-info-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.80);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.common-room-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.common-room-card {
  position: relative;
  padding: 24px;
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.common-room-card.active {
  border-color: rgba(181, 31, 42, 0.20);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.11);
}

.common-room-card::before {
  content: "";
  position: absolute;
  right: -46px;
  top: -46px;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.common-room-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.common-room-card-icon,
.common-room-card h4,
.common-room-card p,
.common-room-card a {
  position: relative;
  z-index: 2;
}

.common-room-card-icon {
  width: 58px;
  height: 58px;
  margin-bottom: 16px;
  border-radius: 19px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.common-room-card.active .common-room-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.common-room-card h4 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 19px;
  line-height: 1.25;
  font-weight: 950;
  transition: color 0.3s ease;
}

.common-room-card p {
  margin: 0 0 15px;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

.common-room-card a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--secondary);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
}

.common-room-card a i {
  transition: transform 0.3s ease;
}

/* ================= HIGHLIGHT ROW ================= */

.common-room-highlight-row,
.common-room-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.common-room-highlight-card,
.common-room-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 116px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.common-room-highlight-card::before,
.common-room-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.common-room-highlight-card > i,
.common-room-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.common-room-highlight-card div,
.common-room-quick-card div {
  position: relative;
  z-index: 2;
}

.common-room-highlight-card h3,
.common-room-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.common-room-highlight-card p,
.common-room-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= FACILITIES ================= */

.common-room-facilities-card,
.common-room-table-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.common-room-facilities-head,
.common-room-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.common-room-facilities-head span,
.common-room-table-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.common-room-facilities-head h3,
.common-room-table-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.common-room-facilities-head p,
.common-room-table-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.common-room-facilities-btn,
.common-room-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.common-room-facilities-btn:hover,
.common-room-table-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.common-room-facilities-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.common-room-facility-item {
  position: relative;
  padding: 22px;
  border-radius: 24px;
  background: var(--light-bg);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: all 0.35s ease;
}

.common-room-facility-item::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.common-room-facility-item::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.common-room-facility-item i,
.common-room-facility-item h4,
.common-room-facility-item p {
  position: relative;
  z-index: 2;
}

.common-room-facility-item > i {
  width: 56px;
  height: 56px;
  margin-bottom: 15px;
  border-radius: 18px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.common-room-facility-item.active > i {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.common-room-facility-item h4 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.common-room-facility-item p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.58;
  font-weight: 500;
}

/* ================= GALLERY ================= */

.common-room-gallery-row {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 1fr;
  grid-auto-rows: 215px;
  gap: 18px;
  margin-top: 24px;
}

.common-room-gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: var(--primary-dark);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.10);
  transition: all 0.35s ease;
}

.common-room-gallery-item.large {
  grid-row: span 2;
}

.common-room-gallery-item.wide {
  grid-column: span 2;
}

.common-room-gallery-item div {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 2;
}

.common-room-gallery-item span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.20);
  font-size: 10px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.common-room-gallery-item h4 {
  margin: 0;
  color: #ffffff;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

/* ================= TABLE ================= */

.common-room-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.common-room-table {
  width: 100%;
  min-width: 850px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.common-room-table thead th {
  padding: 0 16px 8px;
  color: var(--primary-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.common-room-table tbody tr {
  background: var(--light-bg);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.04);
}

.common-room-table tbody td {
  padding: 16px;
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 750;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.common-room-table tbody td:first-child {
  border-left: 1px solid var(--border);
  border-radius: 16px 0 0 16px;
  color: var(--primary-dark);
  font-weight: 950;
}

.common-room-table tbody td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 16px 16px 0;
}

.common-room-status {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.common-room-status.active {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.common-room-status.pending {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

/* ================= NOTE ================= */

.common-room-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.common-room-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.common-room-note-icon i {
  font-size: 26px;
}

.common-room-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.common-room-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.common-room-image-card:hover img,
.common-room-gallery-item:hover img {
  transform: scale(1.08);
}

.common-room-card:hover,
.common-room-highlight-card:hover,
.common-room-facility-item:hover,
.common-room-gallery-item:hover,
.common-room-quick-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.common-room-card:hover::before,
.common-room-highlight-card:hover::before,
.common-room-facility-item:hover::before,
.common-room-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.common-room-card:hover::after,
.common-room-facility-item:hover::after {
  transform: scaleX(1);
}

.common-room-card:hover h4,
.common-room-highlight-card:hover h3,
.common-room-facility-item:hover h4,
.common-room-quick-card:hover h4 {
  color: var(--secondary);
}

.common-room-card:hover a i {
  transform: translateX(5px);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .common-room-wrapper {
    grid-template-columns: 1fr;
  }

  .common-room-head h2 {
    font-size: 38px;
  }

  .common-room-image-card {
    min-height: 470px;
  }

  .common-room-highlight-row,
  .common-room-facilities-grid,
  .common-room-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .common-room-gallery-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .common-room-section {
    padding: 64px 0;
  }

  .common-room-head {
    margin-bottom: 36px;
  }

  .common-room-head h2 {
    font-size: 34px;
  }

  .common-room-facilities-head,
  .common-room-table-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .common-room-grid,
  .common-room-gallery-row {
    grid-template-columns: 1fr;
  }

  .common-room-gallery-item.large,
  .common-room-gallery-item.wide {
    grid-column: auto;
    grid-row: auto;
  }

  .common-room-gallery-row {
    grid-auto-rows: 240px;
  }

  .common-room-image-card {
    min-height: 390px;
  }
}

@media (max-width: 575px) {
  .common-room-section {
    padding: 52px 0;
  }

  .common-room-badge {
    font-size: 11.5px;
  }

  .common-room-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .common-room-head p {
    font-size: 14px;
  }

  .common-room-image-card {
    min-height: 360px;
    border-radius: 24px;
  }

  .common-room-image-overlay {
    left: 18px;
    right: 18px;
    bottom: 18px;
  }

  .common-room-image-overlay h3 {
    font-size: 24px;
  }

  .common-room-image-overlay p {
    font-size: 13px;
  }

  .common-room-image-overlay a {
    width: 100%;
  }

  .common-room-info-card {
    grid-template-columns: 1fr;
    padding: 24px;
    border-radius: 24px;
  }

  .common-room-info-card h3 {
    font-size: 22px;
  }

  .common-room-card,
  .common-room-facilities-card,
  .common-room-table-card {
    border-radius: 24px;
  }

  .common-room-facilities-card,
  .common-room-table-card {
    padding: 20px;
  }

  .common-room-facilities-head h3,
  .common-room-table-head h3 {
    font-size: 21px;
  }

  .common-room-facilities-btn,
  .common-room-table-btn {
    width: 100%;
  }

  .common-room-highlight-row,
  .common-room-facilities-grid,
  .common-room-quick-row {
    grid-template-columns: 1fr;
  }

  .common-room-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .common-room-head h2 {
    font-size: 25px;
  }

  .common-room-image-card {
    min-height: 335px;
  }

  .common-room-image-overlay h3 {
    font-size: 21px;
  }
}

/* ================= COMMON ROOM SECTION CSS END ================= */





/* ================= SPORTS SECTION CSS START ================= */

.sports-section {
  position: relative;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(181, 31, 42, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  overflow: hidden;
}

.sports-section::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  pointer-events: none;
}

.sports-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 100px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: rgba(244, 180, 0, 0.09);
  pointer-events: none;
}

.sports-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEAD ================= */

.sports-head {
  max-width: 850px;
  margin: 0 auto 44px;
}

.sports-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--soft-blue), #ffffff);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.06);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.sports-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.sports-head h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: -1px;
}

.sports-head p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

/* ================= WRAPPER ================= */

.sports-wrapper {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 24px;
  align-items: stretch;
}

/* ================= IMAGE CARD ================= */

.sports-image-card {
  position: relative;
  min-height: 610px;
  border-radius: 34px;
  overflow: hidden;
  background: var(--primary-dark);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: var(--shadow-lg);
}

.sports-image-card img,
.sports-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.55s ease;
}

.sports-image-card::before,
.sports-gallery-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13, 45, 85, 0.08), rgba(13, 45, 85, 0.88));
  z-index: 1;
}

.sports-image-overlay {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 30px;
  z-index: 2;
  color: #ffffff;
}

.sports-image-overlay > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  padding: 8px 13px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
  font-size: 11px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
  backdrop-filter: blur(12px);
}

.sports-image-overlay > span i {
  color: var(--accent);
}

.sports-image-overlay h3 {
  max-width: 560px;
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -0.7px;
}

.sports-image-overlay p {
  max-width: 580px;
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.65;
  font-weight: 500;
}

.sports-image-overlay a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: var(--primary);
  background: #ffffff;
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.sports-image-overlay a:hover {
  color: var(--secondary);
  transform: translateY(-3px);
}

/* ================= CONTENT ================= */

.sports-content {
  display: grid;
  gap: 18px;
}

.sports-info-card {
  position: relative;
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 18px;
  padding: 28px;
  border-radius: 30px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 16%, rgba(244, 180, 0, 0.20), transparent 34%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.sports-info-card::before {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  border: 38px solid rgba(255, 255, 255, 0.06);
}

.sports-info-icon,
.sports-info-card div {
  position: relative;
  z-index: 2;
}

.sports-info-icon {
  width: 74px;
  height: 74px;
  border-radius: 24px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.sports-info-icon i {
  font-size: 31px;
}

.sports-info-card span {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 7px 11px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sports-info-card h3 {
  margin: 0 0 9px;
  color: #ffffff;
  font-size: 24px;
  line-height: 1.22;
  font-weight: 950;
}

.sports-info-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.80);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}

.sports-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.sports-card {
  position: relative;
  padding: 24px;
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.sports-card.active {
  border-color: rgba(181, 31, 42, 0.20);
  box-shadow: 0 18px 48px rgba(181, 31, 42, 0.11);
}

.sports-card::before {
  content: "";
  position: absolute;
  right: -46px;
  top: -46px;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.sports-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.sports-card-icon,
.sports-card h4,
.sports-card p,
.sports-card a {
  position: relative;
  z-index: 2;
}

.sports-card-icon {
  width: 58px;
  height: 58px;
  margin-bottom: 16px;
  border-radius: 19px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.sports-card.active .sports-card-icon {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.sports-card h4 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 19px;
  line-height: 1.25;
  font-weight: 950;
  transition: color 0.3s ease;
}

.sports-card p {
  margin: 0 0 15px;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.62;
  font-weight: 500;
}

.sports-card a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--secondary);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
}

.sports-card a i {
  transition: transform 0.3s ease;
}

/* ================= COMMON CARDS ================= */

.sports-highlight-row,
.sports-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.sports-highlight-card,
.sports-quick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 116px;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
  overflow: hidden;
  transition: all 0.35s ease;
}

.sports-highlight-card::before,
.sports-quick-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.055);
  transition: all 0.35s ease;
}

.sports-highlight-card > i,
.sports-quick-card > i {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.sports-highlight-card div,
.sports-quick-card div {
  position: relative;
  z-index: 2;
}

.sports-highlight-card h3,
.sports-quick-card h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.sports-highlight-card p,
.sports-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* ================= FACILITIES ================= */

.sports-facilities-card,
.sports-table-card {
  margin-top: 24px;
  padding: 28px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 42px rgba(13, 45, 85, 0.08);
}

.sports-facilities-head,
.sports-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.sports-facilities-head span,
.sports-table-head span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--soft-blue);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.sports-facilities-head h3,
.sports-table-head h3 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
}

.sports-facilities-head p,
.sports-table-head p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.sports-facilities-btn,
.sports-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.18);
  transition: all 0.3s ease;
}

.sports-facilities-btn:hover,
.sports-table-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.sports-facilities-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.sports-facility-item {
  position: relative;
  padding: 22px;
  border-radius: 24px;
  background: var(--light-bg);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: all 0.35s ease;
}

.sports-facility-item::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.06);
  transition: all 0.35s ease;
}

.sports-facility-item::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.sports-facility-item i,
.sports-facility-item h4,
.sports-facility-item p {
  position: relative;
  z-index: 2;
}

.sports-facility-item > i {
  width: 56px;
  height: 56px;
  margin-bottom: 15px;
  border-radius: 18px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  box-shadow: 0 14px 28px rgba(13, 45, 85, 0.18);
}

.sports-facility-item.active > i {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.sports-facility-item h4 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
}

.sports-facility-item p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.58;
  font-weight: 500;
}

/* ================= GALLERY ================= */

.sports-gallery-row {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 1fr;
  grid-auto-rows: 215px;
  gap: 18px;
  margin-top: 24px;
}

.sports-gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: var(--primary-dark);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.10);
  transition: all 0.35s ease;
}

.sports-gallery-item.large {
  grid-row: span 2;
}

.sports-gallery-item.wide {
  grid-column: span 2;
}

.sports-gallery-item div {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 2;
}

.sports-gallery-item span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.20);
  font-size: 10px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.sports-gallery-item h4 {
  margin: 0;
  color: #ffffff;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

/* ================= TABLE ================= */

.sports-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.sports-table {
  width: 100%;
  min-width: 850px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.sports-table thead th {
  padding: 0 16px 8px;
  color: var(--primary-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sports-table tbody tr {
  background: var(--light-bg);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.04);
}

.sports-table tbody td {
  padding: 16px;
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 750;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.sports-table tbody td:first-child {
  border-left: 1px solid var(--border);
  border-radius: 16px 0 0 16px;
  color: var(--primary-dark);
  font-weight: 950;
}

.sports-table tbody td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 16px 16px 0;
}

.sports-status {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.sports-status.active {
  color: #136b3a;
  background: rgba(19, 138, 75, 0.10);
}

.sports-status.pending {
  color: #8a6200;
  background: rgba(244, 180, 0, 0.14);
}

/* ================= NOTE ================= */

.sports-note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(13, 45, 85, 0.08);
}

.sports-note-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--secondary), #8f1520);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(181, 31, 42, 0.22);
}

.sports-note-icon i {
  font-size: 26px;
}

.sports-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.sports-note p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

/* ================= HOVER ================= */

.sports-image-card:hover img,
.sports-gallery-item:hover img {
  transform: scale(1.08);
}

.sports-card:hover,
.sports-highlight-card:hover,
.sports-facility-item:hover,
.sports-gallery-item:hover,
.sports-quick-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.sports-card:hover::before,
.sports-highlight-card:hover::before,
.sports-facility-item:hover::before,
.sports-quick-card:hover::before {
  transform: scale(1.2);
  background: rgba(181, 31, 42, 0.08);
}

.sports-card:hover::after,
.sports-facility-item:hover::after {
  transform: scaleX(1);
}

.sports-card:hover h4,
.sports-highlight-card:hover h3,
.sports-facility-item:hover h4,
.sports-quick-card:hover h4 {
  color: var(--secondary);
}

.sports-card:hover a i {
  transform: translateX(5px);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .sports-wrapper {
    grid-template-columns: 1fr;
  }

  .sports-head h2 {
    font-size: 38px;
  }

  .sports-image-card {
    min-height: 470px;
  }

  .sports-highlight-row,
  .sports-facilities-grid,
  .sports-quick-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .sports-gallery-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .sports-section {
    padding: 64px 0;
  }

  .sports-head {
    margin-bottom: 36px;
  }

  .sports-head h2 {
    font-size: 34px;
  }

  .sports-facilities-head,
  .sports-table-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .sports-grid,
  .sports-gallery-row {
    grid-template-columns: 1fr;
  }

  .sports-gallery-item.large,
  .sports-gallery-item.wide {
    grid-column: auto;
    grid-row: auto;
  }

  .sports-gallery-row {
    grid-auto-rows: 240px;
  }

  .sports-image-card {
    min-height: 390px;
  }
}

@media (max-width: 575px) {
  .sports-section {
    padding: 52px 0;
  }

  .sports-badge {
    font-size: 11.5px;
  }

  .sports-head h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .sports-head p {
    font-size: 14px;
  }

  .sports-image-card {
    min-height: 360px;
    border-radius: 24px;
  }

  .sports-image-overlay {
    left: 18px;
    right: 18px;
    bottom: 18px;
  }

  .sports-image-overlay h3 {
    font-size: 24px;
  }

  .sports-image-overlay p {
    font-size: 13px;
  }

  .sports-image-overlay a {
    width: 100%;
  }

  .sports-info-card {
    grid-template-columns: 1fr;
    padding: 24px;
    border-radius: 24px;
  }

  .sports-info-card h3 {
    font-size: 22px;
  }

  .sports-card,
  .sports-facilities-card,
  .sports-table-card {
    border-radius: 24px;
  }

  .sports-facilities-card,
  .sports-table-card {
    padding: 20px;
  }

  .sports-facilities-head h3,
  .sports-table-head h3 {
    font-size: 21px;
  }

  .sports-facilities-btn,
  .sports-table-btn {
    width: 100%;
  }

  .sports-highlight-row,
  .sports-facilities-grid,
  .sports-quick-row {
    grid-template-columns: 1fr;
  }

  .sports-note {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .sports-head h2 {
    font-size: 25px;
  }

  .sports-image-card {
    min-height: 335px;
  }

  .sports-image-overlay h3 {
    font-size: 21px;
  }
}

/* ================= SPORTS SECTION CSS END ================= */



/* ================= HOSTEL / CANTEEN SECTION START ================= */

/* ================= HOSTEL / CANTEEN SECTION START ================= */

.hostel-canteen-section {
  position: relative;
  overflow: hidden;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 30%),
    radial-gradient(circle at 90% 85%, rgba(244, 180, 0, 0.14), transparent 32%),
    linear-gradient(180deg, var(--white) 0%, var(--light-bg) 100%);
}

.hostel-canteen-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(23, 63, 115, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 63, 115, 0.035) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}

.hostel-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.35;
  pointer-events: none;
}

.hostel-shape-1 {
  width: 210px;
  height: 210px;
  left: -80px;
  top: 80px;
  background: rgba(23, 63, 115, 0.12);
}

.hostel-shape-2 {
  width: 260px;
  height: 260px;
  right: -110px;
  bottom: 40px;
  background: rgba(244, 180, 0, 0.18);
}

.hostel-canteen-section .container {
  position: relative;
  z-index: 2;
}

.section-head {
  max-width: 760px;
  margin: 0 auto 46px;
}

.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(23, 63, 115, 0.08);
  color: var(--primary);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 14px;
}

.section-head h2 {
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 14px;
  line-height: 1.15;
}

.section-head p {
  font-size: 16px;
  color: var(--text);
  line-height: 1.8;
  margin: 0;
}

.hostel-canteen-wrapper {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 34px;
  align-items: center;
}

.facility-image-box {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  min-height: 520px;
  background: var(--white);
  box-shadow: var(--shadow-lg);
}

.facility-image-box img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.facility-image-box:hover img {
  transform: scale(1.06);
}

.facility-image-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(23, 35, 52, 0.08),
    rgba(23, 35, 52, 0.58)
  );
}

.facility-image-card {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(13, 45, 85, 0.18);
}

.facility-image-card i {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  font-size: 24px;
}

.facility-image-card h4 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 800;
  color: var(--dark);
}

.facility-image-card p {
  margin: 0;
  font-size: 14px;
  color: var(--text);
}

.facility-content-box {
  padding: 38px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.facility-tag {
  display: inline-flex;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(244, 180, 0, 0.14);
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 14px;
}

.facility-content-box h3 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 16px;
}

.facility-content-box > p {
  color: var(--text);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 28px;
}

.facility-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.facility-item {
  display: flex;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid rgba(23, 63, 115, 0.10);
  transition: all 0.35s ease;
}

.facility-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(13, 45, 85, 0.12);
  border-color: rgba(23, 63, 115, 0.22);
}

.facility-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: rgba(23, 63, 115, 0.08);
  color: var(--primary);
  font-size: 21px;
}

.facility-item h4 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 800;
  color: var(--dark);
}

.facility-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}

.facility-note {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  padding: 18px 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(23, 63, 115, 0.08), rgba(244, 180, 0, 0.10));
  border: 1px solid rgba(23, 63, 115, 0.10);
}

.facility-note i {
  color: var(--primary);
  font-size: 20px;
  margin-top: 2px;
}

.facility-note p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
}

/* Responsive */
@media (max-width: 991px) {
  .hostel-canteen-section {
    padding: 72px 0;
  }

  .hostel-canteen-wrapper {
    grid-template-columns: 1fr;
  }

  .facility-image-box,
  .facility-image-box img {
    min-height: 420px;
  }

  .facility-content-box {
    padding: 30px;
  }
}

@media (max-width: 767px) {
  .hostel-canteen-section {
    padding: 60px 0;
  }

  .section-head {
    margin-bottom: 34px;
  }

  .facility-grid {
    grid-template-columns: 1fr;
  }

  .facility-image-box,
  .facility-image-box img {
    min-height: 360px;
    border-radius: 22px;
  }

  .facility-content-box {
    padding: 24px;
    border-radius: 24px;
  }

  .facility-image-card {
    left: 16px;
    right: 16px;
    bottom: 16px;
    padding: 14px;
  }
}

@media (max-width: 480px) {
  .facility-image-box,
  .facility-image-box img {
    min-height: 310px;
  }

  .facility-image-card {
    align-items: flex-start;
  }

  .facility-image-card i {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    font-size: 21px;
  }

  .facility-item {
    padding: 16px;
  }
}

/* ================= HOSTEL / CANTEEN SECTION END ================= */




/* ================= SMART CLASSES SECTION START ================= */

.smart-classes-section {
  position: relative;
  overflow: hidden;
  padding: 10px 0;
  background:
    radial-gradient(circle at 10% 12%, rgba(23, 63, 115, 0.08), transparent 30%),
    radial-gradient(circle at 90% 82%, rgba(244, 180, 0, 0.14), transparent 32%),
    linear-gradient(180deg, var(--white) 0%, var(--light-bg) 100%);
}

.smart-classes-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(23, 63, 115, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 63, 115, 0.035) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}

.smart-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.35;
  pointer-events: none;
}

.smart-shape-1 {
  width: 220px;
  height: 220px;
  left: -90px;
  top: 80px;
  background: rgba(23, 63, 115, 0.12);
}

.smart-shape-2 {
  width: 260px;
  height: 260px;
  right: -110px;
  bottom: 40px;
  background: rgba(244, 180, 0, 0.18);
}

.smart-classes-section .container {
  position: relative;
  z-index: 2;
}

.section-head {
  max-width: 760px;
  margin: 0 auto 46px;
}

.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(23, 63, 115, 0.08);
  color: var(--primary);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 14px;
}

.section-head h2 {
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 14px;
  line-height: 1.15;
}

.section-head p {
  font-size: 16px;
  color: var(--text);
  line-height: 1.8;
  margin: 0;
}

.smart-classes-wrapper {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 34px;
  align-items: center;
}

.smart-content-box {
  padding: 38px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.smart-tag {
  display: inline-flex;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(244, 180, 0, 0.14);
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 14px;
}

.smart-content-box h3 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 16px;
}

.smart-content-box > p {
  color: var(--text);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 28px;
}

.smart-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.smart-feature-item {
  display: flex;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid rgba(23, 63, 115, 0.10);
  transition: all 0.35s ease;
}

.smart-feature-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(13, 45, 85, 0.12);
  border-color: rgba(23, 63, 115, 0.22);
}

.smart-feature-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: rgba(23, 63, 115, 0.08);
  color: var(--primary);
  font-size: 21px;
}

.smart-feature-item h4 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 800;
  color: var(--dark);
}

.smart-feature-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}

.smart-note {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  padding: 18px 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(23, 63, 115, 0.08), rgba(244, 180, 0, 0.10));
  border: 1px solid rgba(23, 63, 115, 0.10);
}

.smart-note i {
  color: var(--primary);
  font-size: 20px;
  margin-top: 2px;
}

.smart-note p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
}

.smart-image-box {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  min-height: 520px;
  background: var(--white);
  box-shadow: var(--shadow-lg);
}

.smart-image-box img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.smart-image-box:hover img {
  transform: scale(1.06);
}

.smart-image-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(23, 35, 52, 0.08),
    rgba(23, 35, 52, 0.58)
  );
}

.smart-image-card {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(13, 45, 85, 0.18);
}

.smart-image-card i {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  font-size: 24px;
}

.smart-image-card h4 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 800;
  color: var(--dark);
}

.smart-image-card p {
  margin: 0;
  font-size: 14px;
  color: var(--text);
}

/* Responsive */
@media (max-width: 991px) {
  .smart-classes-section {
    padding: 72px 0;
  }

  .smart-classes-wrapper {
    grid-template-columns: 1fr;
  }

  .smart-image-box {
    order: -1;
  }

  .smart-image-box,
  .smart-image-box img {
    min-height: 420px;
  }

  .smart-content-box {
    padding: 30px;
  }
}

@media (max-width: 767px) {
  .smart-classes-section {
    padding: 60px 0;
  }

  .section-head {
    margin-bottom: 34px;
  }

  .smart-feature-grid {
    grid-template-columns: 1fr;
  }

  .smart-image-box,
  .smart-image-box img {
    min-height: 360px;
    border-radius: 22px;
  }

  .smart-content-box {
    padding: 24px;
    border-radius: 24px;
  }

  .smart-image-card {
    left: 16px;
    right: 16px;
    bottom: 16px;
    padding: 14px;
  }
}

@media (max-width: 480px) {
  .smart-image-box,
  .smart-image-box img {
    min-height: 310px;
  }

  .smart-image-card {
    align-items: flex-start;
  }

  .smart-image-card i {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    font-size: 21px;
  }

  .smart-feature-item {
    padding: 16px;
  }
}

/* ================= SMART CLASSES SECTION END ================= */




/* ================= WI-FI / ICT SECTION START ================= */

.wifi-ict-section {
  position: relative;
  overflow: hidden;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 30%),
    radial-gradient(circle at 90% 85%, rgba(244, 180, 0, 0.14), transparent 32%),
    linear-gradient(180deg, var(--white) 0%, var(--light-bg) 100%);
}

.wifi-ict-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(23, 63, 115, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 63, 115, 0.035) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}

.wifi-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.35;
  pointer-events: none;
}

.wifi-shape-1 {
  width: 210px;
  height: 210px;
  left: -80px;
  top: 80px;
  background: rgba(23, 63, 115, 0.12);
}

.wifi-shape-2 {
  width: 260px;
  height: 260px;
  right: -110px;
  bottom: 40px;
  background: rgba(244, 180, 0, 0.18);
}

.wifi-ict-section .container {
  position: relative;
  z-index: 2;
}

.wifi-ict-wrapper {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 34px;
  align-items: center;
}

.wifi-image-box {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  min-height: 520px;
  background: var(--white);
  box-shadow: var(--shadow-lg);
}

.wifi-image-box img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.wifi-image-box:hover img {
  transform: scale(1.06);
}

.wifi-image-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(23, 35, 52, 0.08),
    rgba(23, 35, 52, 0.58)
  );
}

.wifi-image-card {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(13, 45, 85, 0.18);
}

.wifi-image-card i {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  font-size: 24px;
}

.wifi-image-card h4 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 800;
  color: var(--dark);
}

.wifi-image-card p {
  margin: 0;
  font-size: 14px;
  color: var(--text);
}

.wifi-content-box {
  padding: 38px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.wifi-tag {
  display: inline-flex;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(244, 180, 0, 0.14);
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 14px;
}

.wifi-content-box h3 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 16px;
}

.wifi-content-box > p {
  color: var(--text);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 28px;
}

.wifi-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.wifi-feature-item {
  display: flex;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid rgba(23, 63, 115, 0.10);
  transition: all 0.35s ease;
}

.wifi-feature-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(13, 45, 85, 0.12);
  border-color: rgba(23, 63, 115, 0.22);
}

.wifi-feature-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: rgba(23, 63, 115, 0.08);
  color: var(--primary);
  font-size: 21px;
}

.wifi-feature-item h4 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 800;
  color: var(--dark);
}

.wifi-feature-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}

.wifi-note {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  padding: 18px 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(23, 63, 115, 0.08), rgba(244, 180, 0, 0.10));
  border: 1px solid rgba(23, 63, 115, 0.10);
}

.wifi-note i {
  color: var(--primary);
  font-size: 20px;
  margin-top: 2px;
}

.wifi-note p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
}

/* Responsive */
@media (max-width: 991px) {
  .wifi-ict-section {
    padding: 72px 0;
  }

  .wifi-ict-wrapper {
    grid-template-columns: 1fr;
  }

  .wifi-image-box,
  .wifi-image-box img {
    min-height: 420px;
  }

  .wifi-content-box {
    padding: 30px;
  }
}

@media (max-width: 767px) {
  .wifi-ict-section {
    padding: 60px 0;
  }

  .wifi-feature-grid {
    grid-template-columns: 1fr;
  }

  .wifi-image-box,
  .wifi-image-box img {
    min-height: 360px;
    border-radius: 22px;
  }

  .wifi-content-box {
    padding: 24px;
    border-radius: 24px;
  }

  .wifi-image-card {
    left: 16px;
    right: 16px;
    bottom: 16px;
    padding: 14px;
  }
}

@media (max-width: 480px) {
  .wifi-image-box,
  .wifi-image-box img {
    min-height: 310px;
  }

  .wifi-image-card {
    align-items: flex-start;
  }

  .wifi-image-card i {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    font-size: 21px;
  }

  .wifi-feature-item {
    padding: 16px;
  }
}

/* ================= WI-FI / ICT SECTION END ================= */



/* ================= HEALTH / FIRST AID SECTION START ================= */

.health-aid-section {
  position: relative;
  overflow: hidden;
  padding: 10px 0;
  background:
    radial-gradient(circle at 10% 12%, rgba(23, 63, 115, 0.08), transparent 30%),
    radial-gradient(circle at 90% 82%, rgba(19, 138, 75, 0.13), transparent 32%),
    linear-gradient(180deg, var(--white) 0%, var(--light-bg) 100%);
}

.health-aid-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(23, 63, 115, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 63, 115, 0.035) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}

.health-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.35;
  pointer-events: none;
}

.health-shape-1 {
  width: 220px;
  height: 220px;
  left: -90px;
  top: 80px;
  background: rgba(23, 63, 115, 0.12);
}

.health-shape-2 {
  width: 260px;
  height: 260px;
  right: -110px;
  bottom: 40px;
  background: rgba(19, 138, 75, 0.16);
}

.health-aid-section .container {
  position: relative;
  z-index: 2;
}

.health-aid-wrapper {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 34px;
  align-items: center;
}

.health-content-box {
  padding: 38px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.health-tag {
  display: inline-flex;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(19, 138, 75, 0.12);
  color: var(--success);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 14px;
}

.health-content-box h3 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 16px;
}

.health-content-box > p {
  color: var(--text);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 28px;
}

.health-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.health-feature-item {
  display: flex;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid rgba(23, 63, 115, 0.10);
  transition: all 0.35s ease;
}

.health-feature-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(13, 45, 85, 0.12);
  border-color: rgba(19, 138, 75, 0.24);
}

.health-feature-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: rgba(19, 138, 75, 0.10);
  color: var(--success);
  font-size: 21px;
}

.health-feature-item h4 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 800;
  color: var(--dark);
}

.health-feature-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}

.health-note {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  padding: 18px 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(23, 63, 115, 0.08), rgba(19, 138, 75, 0.10));
  border: 1px solid rgba(23, 63, 115, 0.10);
}

.health-note i {
  color: var(--success);
  font-size: 20px;
  margin-top: 2px;
}

.health-note p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
}

.health-image-box {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  min-height: 520px;
  background: var(--white);
  box-shadow: var(--shadow-lg);
}

.health-image-box img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.health-image-box:hover img {
  transform: scale(1.06);
}

.health-image-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(23, 35, 52, 0.08),
    rgba(23, 35, 52, 0.58)
  );
}

.health-image-card {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(13, 45, 85, 0.18);
}

.health-image-card i {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--success), #0f6f3d);
  color: var(--white);
  font-size: 24px;
}

.health-image-card h4 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 800;
  color: var(--dark);
}

.health-image-card p {
  margin: 0;
  font-size: 14px;
  color: var(--text);
}

/* Responsive */
@media (max-width: 991px) {
  .health-aid-section {
    padding: 72px 0;
  }

  .health-aid-wrapper {
    grid-template-columns: 1fr;
  }

  .health-image-box {
    order: -1;
  }

  .health-image-box,
  .health-image-box img {
    min-height: 420px;
  }

  .health-content-box {
    padding: 30px;
  }
}

@media (max-width: 767px) {
  .health-aid-section {
    padding: 60px 0;
  }

  .health-feature-grid {
    grid-template-columns: 1fr;
  }

  .health-image-box,
  .health-image-box img {
    min-height: 360px;
    border-radius: 22px;
  }

  .health-content-box {
    padding: 24px;
    border-radius: 24px;
  }

  .health-image-card {
    left: 16px;
    right: 16px;
    bottom: 16px;
    padding: 14px;
  }
}

@media (max-width: 480px) {
  .health-image-box,
  .health-image-box img {
    min-height: 310px;
  }

  .health-image-card {
    align-items: flex-start;
  }

  .health-image-card i {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    font-size: 21px;
  }

  .health-feature-item {
    padding: 16px;
  }
}

/* ================= HEALTH / FIRST AID SECTION END ================= */





/* ================= SAFETY / SANITATION / DRINKING WATER SECTION START ================= */

.safety-water-section {
  position: relative;
  overflow: hidden;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 30%),
    radial-gradient(circle at 90% 85%, rgba(19, 138, 75, 0.13), transparent 32%),
    linear-gradient(180deg, var(--white) 0%, var(--light-bg) 100%);
}

.safety-water-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(23, 63, 115, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 63, 115, 0.035) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}

.safety-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.35;
  pointer-events: none;
}

.safety-shape-1 {
  width: 210px;
  height: 210px;
  left: -80px;
  top: 80px;
  background: rgba(23, 63, 115, 0.12);
}

.safety-shape-2 {
  width: 260px;
  height: 260px;
  right: -110px;
  bottom: 40px;
  background: rgba(19, 138, 75, 0.16);
}

.safety-water-section .container {
  position: relative;
  z-index: 2;
}

.safety-water-wrapper {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 34px;
  align-items: center;
}

.safety-image-box {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  min-height: 520px;
  background: var(--white);
  box-shadow: var(--shadow-lg);
}

.safety-image-box img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.safety-image-box:hover img {
  transform: scale(1.06);
}

.safety-image-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(23, 35, 52, 0.08),
    rgba(23, 35, 52, 0.58)
  );
}

.safety-image-card {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(13, 45, 85, 0.18);
}

.safety-image-card i {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--success), #0f6f3d);
  color: var(--white);
  font-size: 24px;
}

.safety-image-card h4 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 800;
  color: var(--dark);
}

.safety-image-card p {
  margin: 0;
  font-size: 14px;
  color: var(--text);
}

.safety-content-box {
  padding: 38px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.safety-tag {
  display: inline-flex;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(19, 138, 75, 0.12);
  color: var(--success);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 14px;
}

.safety-content-box h3 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 16px;
}

.safety-content-box > p {
  color: var(--text);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 28px;
}

.safety-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.safety-feature-item {
  display: flex;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid rgba(23, 63, 115, 0.10);
  transition: all 0.35s ease;
}

.safety-feature-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(13, 45, 85, 0.12);
  border-color: rgba(19, 138, 75, 0.24);
}

.safety-feature-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: rgba(19, 138, 75, 0.10);
  color: var(--success);
  font-size: 21px;
}

.safety-feature-item h4 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 800;
  color: var(--dark);
}

.safety-feature-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}

.safety-note {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  padding: 18px 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(23, 63, 115, 0.08), rgba(19, 138, 75, 0.10));
  border: 1px solid rgba(23, 63, 115, 0.10);
}

.safety-note i {
  color: var(--success);
  font-size: 20px;
  margin-top: 2px;
}

.safety-note p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
}

/* Responsive */
@media (max-width: 991px) {
  .safety-water-section {
    padding: 72px 0;
  }

  .safety-water-wrapper {
    grid-template-columns: 1fr;
  }

  .safety-image-box,
  .safety-image-box img {
    min-height: 420px;
  }

  .safety-content-box {
    padding: 30px;
  }
}

@media (max-width: 767px) {
  .safety-water-section {
    padding: 60px 0;
  }

  .safety-feature-grid {
    grid-template-columns: 1fr;
  }

  .safety-image-box,
  .safety-image-box img {
    min-height: 360px;
    border-radius: 22px;
  }

  .safety-content-box {
    padding: 24px;
    border-radius: 24px;
  }

  .safety-image-card {
    left: 16px;
    right: 16px;
    bottom: 16px;
    padding: 14px;
  }
}

@media (max-width: 480px) {
  .safety-image-box,
  .safety-image-box img {
    min-height: 310px;
  }

  .safety-image-card {
    align-items: flex-start;
  }

  .safety-image-card i {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    font-size: 21px;
  }

  .safety-feature-item {
    padding: 16px;
  }
}

/* ================= SAFETY / SANITATION / DRINKING WATER SECTION END ================= */



















/* ================= IQAC SECTION START ================= */

.iqac-section {
  position: relative;
  overflow: hidden;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 30%),
    radial-gradient(circle at 90% 85%, rgba(244, 180, 0, 0.14), transparent 32%),
    linear-gradient(180deg, var(--white) 0%, var(--light-bg) 100%);
}

.iqac-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(23, 63, 115, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 63, 115, 0.035) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}

.iqac-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.35;
  pointer-events: none;
}

.iqac-shape-1 {
  width: 220px;
  height: 220px;
  left: -90px;
  top: 80px;
  background: rgba(23, 63, 115, 0.12);
}

.iqac-shape-2 {
  width: 260px;
  height: 260px;
  right: -110px;
  bottom: 40px;
  background: rgba(244, 180, 0, 0.18);
}

.iqac-section .container {
  position: relative;
  z-index: 2;
}

/* ================= IQAC HEADING FIX START ================= */

.iqac-section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 850px;
  margin: 0 auto 46px;
  text-align: center;
}

.iqac-section-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  max-width: max-content;
  margin: 0 auto 14px;
  padding: 9px 20px;
  border-radius: 999px;
  background: rgba(23, 63, 115, 0.08);
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.12);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}

.iqac-section-badge i {
  color: var(--primary);
  font-size: 15px;
}

.iqac-section-head h2 {
  display: block;
  max-width: 760px;
  margin: 0 auto 14px;
  font-size: clamp(34px, 4.4vw, 48px);
  font-weight: 900;
  color: var(--dark);
  line-height: 1.16;
  letter-spacing: -0.8px;
}

.iqac-section-head p {
  display: block;
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.8;
}

/* ================= IQAC HEADING FIX END ================= */

.iqac-wrapper {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 34px;
  align-items: center;
}

.iqac-content-box {
  padding: 38px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.iqac-tag {
  display: inline-flex;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(244, 180, 0, 0.14);
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 14px;
}

.iqac-content-box h3 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 16px;
}

.iqac-content-box > p {
  color: var(--text);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 28px;
}

.iqac-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.iqac-feature-item {
  display: flex;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid rgba(23, 63, 115, 0.10);
  transition: all 0.35s ease;
}

.iqac-feature-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(13, 45, 85, 0.12);
  border-color: rgba(23, 63, 115, 0.22);
}

.iqac-feature-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: rgba(23, 63, 115, 0.08);
  color: var(--primary);
  font-size: 21px;
}

.iqac-feature-item h4 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 800;
  color: var(--dark);
}

.iqac-feature-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}

.iqac-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.iqac-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 14px 30px rgba(13, 45, 85, 0.18);
  transition: all 0.35s ease;
}

.iqac-btn:hover {
  transform: translateY(-3px);
  color: var(--white);
  box-shadow: 0 18px 42px rgba(13, 45, 85, 0.24);
}

.iqac-btn-light {
  background: var(--white);
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.15);
  box-shadow: none;
}

.iqac-btn-light:hover {
  color: var(--primary-dark);
  background: var(--soft-blue);
}

.iqac-highlight-box {
  position: relative;
}

.iqac-image-box {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  min-height: 520px;
  background: var(--white);
  box-shadow: var(--shadow-lg);
}

.iqac-image-box img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.iqac-image-box:hover img {
  transform: scale(1.06);
}

.iqac-image-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(23, 35, 52, 0.06),
    rgba(23, 35, 52, 0.55)
  );
}

.iqac-card-list {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  display: grid;
  gap: 12px;
}

.iqac-mini-card {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 15px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 36px rgba(13, 45, 85, 0.16);
}

.iqac-mini-card i {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  font-size: 20px;
}

.iqac-mini-card h4 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 800;
  color: var(--dark);
}

.iqac-mini-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}

/* Responsive */
@media (max-width: 991px) {
  .iqac-section {
    padding: 72px 0;
  }

  .iqac-section-head {
    margin-bottom: 36px;
  }

  .iqac-wrapper {
    grid-template-columns: 1fr;
  }

  .iqac-highlight-box {
    order: -1;
  }

  .iqac-image-box,
  .iqac-image-box img {
    min-height: 460px;
  }

  .iqac-content-box {
    padding: 30px;
  }
}

@media (max-width: 767px) {
  .iqac-section {
    padding: 60px 0;
  }

  .iqac-section-head {
    max-width: 100%;
    margin-bottom: 32px;
  }

  .iqac-section-head h2 {
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1.2;
  }

  .iqac-section-head p {
    font-size: 15px;
    line-height: 1.75;
  }

  .iqac-feature-grid {
    grid-template-columns: 1fr;
  }

  .iqac-image-box,
  .iqac-image-box img {
    min-height: 430px;
    border-radius: 22px;
  }

  .iqac-content-box {
    padding: 24px;
    border-radius: 24px;
  }

  .iqac-content-box h3 {
    font-size: 27px;
  }

  .iqac-card-list {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }

  .iqac-mini-card {
    padding: 13px;
  }

  .iqac-actions {
    flex-direction: column;
  }

  .iqac-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .iqac-section {
    padding: 52px 0;
  }

  .iqac-section-badge {
    font-size: 13px;
    padding: 8px 15px;
  }

  .iqac-section-head h2 {
    font-size: 30px;
    letter-spacing: -0.4px;
  }

  .iqac-image-box,
  .iqac-image-box img {
    min-height: 470px;
  }

  .iqac-mini-card i {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    font-size: 18px;
  }

  .iqac-feature-item {
    padding: 16px;
  }
}

/* ================= IQAC SECTION END ================= */





/* ================= NAAC COMMITTEE SECTION START ================= */

.naac-committee-section {
  position: relative;
  overflow: hidden;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 30%),
    radial-gradient(circle at 90% 85%, rgba(244, 180, 0, 0.14), transparent 32%),
    linear-gradient(180deg, var(--white) 0%, var(--light-bg) 100%);
}

.naac-committee-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(23, 63, 115, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 63, 115, 0.035) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}

.naac-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.35;
  pointer-events: none;
}

.naac-shape-1 {
  width: 220px;
  height: 220px;
  left: -90px;
  top: 80px;
  background: rgba(23, 63, 115, 0.12);
}

.naac-shape-2 {
  width: 260px;
  height: 260px;
  right: -110px;
  bottom: 40px;
  background: rgba(244, 180, 0, 0.18);
}

.naac-committee-section .container {
  position: relative;
  z-index: 2;
}

/* ================= NAAC HEADING FIX START ================= */

.naac-section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 850px;
  margin: 0 auto 46px;
  text-align: center;
}

.naac-section-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  max-width: max-content;
  margin: 0 auto 14px;
  padding: 9px 20px;
  border-radius: 999px;
  background: rgba(23, 63, 115, 0.08);
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.12);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}

.naac-section-badge i {
  color: var(--primary);
  font-size: 15px;
}

.naac-section-head h2 {
  display: block;
  max-width: 760px;
  margin: 0 auto 14px;
  font-size: clamp(34px, 4.4vw, 48px);
  font-weight: 900;
  color: var(--dark);
  line-height: 1.16;
  letter-spacing: -0.8px;
}

.naac-section-head p {
  display: block;
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.8;
}

/* ================= NAAC HEADING FIX END ================= */

.naac-committee-wrapper {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 34px;
  align-items: center;
}

.naac-highlight-box {
  position: relative;
}

.naac-image-box {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  min-height: 560px;
  background: var(--white);
  box-shadow: var(--shadow-lg);
}

.naac-image-box img {
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.naac-image-box:hover img {
  transform: scale(1.06);
}

.naac-image-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(23, 35, 52, 0.06),
    rgba(23, 35, 52, 0.60)
  );
}

.naac-floating-card {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(13, 45, 85, 0.18);
}

.naac-floating-card i {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  font-size: 24px;
}

.naac-floating-card h4 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 800;
  color: var(--dark);
}

.naac-floating-card p {
  margin: 0;
  font-size: 14px;
  color: var(--text);
}

.naac-content-box {
  padding: 38px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.naac-tag {
  display: inline-flex;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(244, 180, 0, 0.14);
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 14px;
}

.naac-content-box h3 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 16px;
}

.naac-content-box > p {
  color: var(--text);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 28px;
}

.naac-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.naac-feature-item {
  display: flex;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid rgba(23, 63, 115, 0.10);
  transition: all 0.35s ease;
}

.naac-feature-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(13, 45, 85, 0.12);
  border-color: rgba(23, 63, 115, 0.22);
}

.naac-feature-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: rgba(23, 63, 115, 0.08);
  color: var(--primary);
  font-size: 21px;
}

.naac-feature-item h4 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 800;
  color: var(--dark);
}

.naac-feature-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}

.naac-committee-list {
  margin-top: 24px;
  padding: 22px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(23, 63, 115, 0.08), rgba(244, 180, 0, 0.10));
  border: 1px solid rgba(23, 63, 115, 0.10);
}

.naac-list-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.naac-list-head i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  font-size: 20px;
}

.naac-list-head h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--dark);
}

.naac-committee-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.naac-committee-list li {
  position: relative;
  padding-left: 28px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
}

.naac-committee-list li:not(:last-child) {
  margin-bottom: 8px;
}

.naac-committee-list li::before {
  content: "\F26A";
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--primary);
  font-size: 16px;
}

.naac-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.naac-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 14px 30px rgba(13, 45, 85, 0.18);
  transition: all 0.35s ease;
}

.naac-btn:hover {
  transform: translateY(-3px);
  color: var(--white);
  box-shadow: 0 18px 42px rgba(13, 45, 85, 0.24);
}

.naac-btn-light {
  background: var(--white);
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.15);
  box-shadow: none;
}

.naac-btn-light:hover {
  color: var(--primary-dark);
  background: var(--soft-blue);
}

/* Responsive */
@media (max-width: 991px) {
  .naac-committee-section {
    padding: 72px 0;
  }

  .naac-section-head {
    margin-bottom: 36px;
  }

  .naac-committee-wrapper {
    grid-template-columns: 1fr;
  }

  .naac-image-box,
  .naac-image-box img {
    min-height: 430px;
  }

  .naac-content-box {
    padding: 30px;
  }
}

@media (max-width: 767px) {
  .naac-committee-section {
    padding: 60px 0;
  }

  .naac-section-head {
    max-width: 100%;
    margin-bottom: 32px;
  }

  .naac-section-head h2 {
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1.2;
  }

  .naac-section-head p {
    font-size: 15px;
    line-height: 1.75;
  }

  .naac-feature-grid {
    grid-template-columns: 1fr;
  }

  .naac-image-box,
  .naac-image-box img {
    min-height: 360px;
    border-radius: 22px;
  }

  .naac-content-box {
    padding: 24px;
    border-radius: 24px;
  }

  .naac-content-box h3 {
    font-size: 27px;
  }

  .naac-floating-card {
    left: 16px;
    right: 16px;
    bottom: 16px;
    padding: 14px;
  }

  .naac-actions {
    flex-direction: column;
  }

  .naac-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .naac-committee-section {
    padding: 52px 0;
  }

  .naac-section-badge {
    font-size: 13px;
    padding: 8px 15px;
  }

  .naac-section-head h2 {
    font-size: 30px;
    letter-spacing: -0.4px;
  }

  .naac-image-box,
  .naac-image-box img {
    min-height: 310px;
  }

  .naac-floating-card {
    align-items: flex-start;
  }

  .naac-floating-card i {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    font-size: 21px;
  }

  .naac-feature-item {
    padding: 16px;
  }

  .naac-committee-list {
    padding: 18px;
  }
}

/* ================= NAAC COMMITTEE SECTION END ================= */




/* ================= ADMISSION COMMITTEE SECTION START ================= */

.admission-committee-section {
  position: relative;
  overflow: hidden;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 30%),
    radial-gradient(circle at 90% 85%, rgba(244, 180, 0, 0.14), transparent 32%),
    linear-gradient(180deg, var(--white) 0%, var(--light-bg) 100%);
}

.admission-committee-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(23, 63, 115, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 63, 115, 0.035) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}

.admission-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.35;
  pointer-events: none;
}

.admission-shape-1 {
  width: 220px;
  height: 220px;
  left: -90px;
  top: 80px;
  background: rgba(23, 63, 115, 0.12);
}

.admission-shape-2 {
  width: 260px;
  height: 260px;
  right: -110px;
  bottom: 40px;
  background: rgba(244, 180, 0, 0.18);
}

.admission-committee-section .container {
  position: relative;
  z-index: 2;
}

/* ================= ADMISSION HEADING FIX START ================= */

.admission-section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 850px;
  margin: 0 auto 46px;
  text-align: center;
}

.admission-section-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  max-width: max-content;
  margin: 0 auto 14px;
  padding: 9px 20px;
  border-radius: 999px;
  background: rgba(23, 63, 115, 0.08);
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.12);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}

.admission-section-badge i {
  color: var(--primary);
  font-size: 15px;
}

.admission-section-head h2 {
  display: block;
  max-width: 760px;
  margin: 0 auto 14px;
  font-size: clamp(34px, 4.4vw, 48px);
  font-weight: 900;
  color: var(--dark);
  line-height: 1.16;
  letter-spacing: -0.8px;
}

.admission-section-head p {
  display: block;
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.8;
}

/* ================= ADMISSION HEADING FIX END ================= */

.admission-committee-wrapper {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 34px;
  align-items: center;
}

.admission-content-box {
  padding: 38px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.admission-tag {
  display: inline-flex;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(244, 180, 0, 0.14);
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 14px;
}

.admission-content-box h3 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 16px;
}

.admission-content-box > p {
  color: var(--text);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 28px;
}

.admission-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.admission-feature-item {
  display: flex;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid rgba(23, 63, 115, 0.10);
  transition: all 0.35s ease;
}

.admission-feature-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(13, 45, 85, 0.12);
  border-color: rgba(23, 63, 115, 0.22);
}

.admission-feature-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: rgba(23, 63, 115, 0.08);
  color: var(--primary);
  font-size: 21px;
}

.admission-feature-item h4 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 800;
  color: var(--dark);
}

.admission-feature-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}

.admission-info-box {
  margin-top: 24px;
  padding: 22px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(23, 63, 115, 0.08), rgba(244, 180, 0, 0.10));
  border: 1px solid rgba(23, 63, 115, 0.10);
}

.admission-info-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.admission-info-head i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  font-size: 20px;
}

.admission-info-head h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--dark);
}

.admission-info-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.admission-info-box li {
  position: relative;
  padding-left: 28px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
}

.admission-info-box li:not(:last-child) {
  margin-bottom: 8px;
}

.admission-info-box li::before {
  content: "\F26A";
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--primary);
  font-size: 16px;
}

.admission-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.admission-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 14px 30px rgba(13, 45, 85, 0.18);
  transition: all 0.35s ease;
}

.admission-btn:hover {
  transform: translateY(-3px);
  color: var(--white);
  box-shadow: 0 18px 42px rgba(13, 45, 85, 0.24);
}

.admission-btn-light {
  background: var(--white);
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.15);
  box-shadow: none;
}

.admission-btn-light:hover {
  color: var(--primary-dark);
  background: var(--soft-blue);
}

.admission-highlight-box {
  position: relative;
}

.admission-image-box {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  min-height: 560px;
  background: var(--white);
  box-shadow: var(--shadow-lg);
}

.admission-image-box img {
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.admission-image-box:hover img {
  transform: scale(1.06);
}

.admission-image-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(23, 35, 52, 0.06),
    rgba(23, 35, 52, 0.60)
  );
}

.admission-floating-card {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(13, 45, 85, 0.18);
}

.admission-floating-card i {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  font-size: 24px;
}

.admission-floating-card h4 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 800;
  color: var(--dark);
}

.admission-floating-card p {
  margin: 0;
  font-size: 14px;
  color: var(--text);
}

/* Responsive */
@media (max-width: 991px) {
  .admission-committee-section {
    padding: 72px 0;
  }

  .admission-section-head {
    margin-bottom: 36px;
  }

  .admission-committee-wrapper {
    grid-template-columns: 1fr;
  }

  .admission-highlight-box {
    order: -1;
  }

  .admission-image-box,
  .admission-image-box img {
    min-height: 430px;
  }

  .admission-content-box {
    padding: 30px;
  }
}

@media (max-width: 767px) {
  .admission-committee-section {
    padding: 60px 0;
  }

  .admission-section-head {
    max-width: 100%;
    margin-bottom: 32px;
  }

  .admission-section-head h2 {
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1.2;
  }

  .admission-section-head p {
    font-size: 15px;
    line-height: 1.75;
  }

  .admission-feature-grid {
    grid-template-columns: 1fr;
  }

  .admission-image-box,
  .admission-image-box img {
    min-height: 360px;
    border-radius: 22px;
  }

  .admission-content-box {
    padding: 24px;
    border-radius: 24px;
  }

  .admission-content-box h3 {
    font-size: 27px;
  }

  .admission-floating-card {
    left: 16px;
    right: 16px;
    bottom: 16px;
    padding: 14px;
  }

  .admission-actions {
    flex-direction: column;
  }

  .admission-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .admission-committee-section {
    padding: 52px 0;
  }

  .admission-section-badge {
    font-size: 13px;
    padding: 8px 15px;
  }

  .admission-section-head h2 {
    font-size: 30px;
    letter-spacing: -0.4px;
  }

  .admission-image-box,
  .admission-image-box img {
    min-height: 310px;
  }

  .admission-floating-card {
    align-items: flex-start;
  }

  .admission-floating-card i {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    font-size: 21px;
  }

  .admission-feature-item {
    padding: 16px;
  }

  .admission-info-box {
    padding: 18px;
  }
}

/* ================= ADMISSION COMMITTEE SECTION END ================= */




/* ================= EXAM COMMITTEE SECTION START ================= */

.exam-committee-section {
  position: relative;
  overflow: hidden;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 30%),
    radial-gradient(circle at 90% 85%, rgba(244, 180, 0, 0.14), transparent 32%),
    linear-gradient(180deg, var(--white) 0%, var(--light-bg) 100%);
}

.exam-committee-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(23, 63, 115, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 63, 115, 0.035) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}

.exam-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.35;
  pointer-events: none;
}

.exam-shape-1 {
  width: 220px;
  height: 220px;
  left: -90px;
  top: 80px;
  background: rgba(23, 63, 115, 0.12);
}

.exam-shape-2 {
  width: 260px;
  height: 260px;
  right: -110px;
  bottom: 40px;
  background: rgba(244, 180, 0, 0.18);
}

.exam-committee-section .container {
  position: relative;
  z-index: 2;
}

/* ================= EXAM HEADING FIX START ================= */

.exam-section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 850px;
  margin: 0 auto 46px;
  text-align: center;
}

.exam-section-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  max-width: max-content;
  margin: 0 auto 14px;
  padding: 9px 20px;
  border-radius: 999px;
  background: rgba(23, 63, 115, 0.08);
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.12);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}

.exam-section-badge i {
  color: var(--primary);
  font-size: 15px;
}

.exam-section-head h2 {
  display: block;
  max-width: 760px;
  margin: 0 auto 14px;
  font-size: clamp(34px, 4.4vw, 48px);
  font-weight: 900;
  color: var(--dark);
  line-height: 1.16;
  letter-spacing: -0.8px;
}

.exam-section-head p {
  display: block;
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.8;
}

/* ================= EXAM HEADING FIX END ================= */

.exam-committee-wrapper {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 34px;
  align-items: center;
}

.exam-highlight-box {
  position: relative;
}

.exam-image-box {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  min-height: 560px;
  background: var(--white);
  box-shadow: var(--shadow-lg);
}

.exam-image-box img {
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.exam-image-box:hover img {
  transform: scale(1.06);
}

.exam-image-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(23, 35, 52, 0.06),
    rgba(23, 35, 52, 0.60)
  );
}

.exam-floating-card {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(13, 45, 85, 0.18);
}

.exam-floating-card i {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  font-size: 24px;
}

.exam-floating-card h4 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 800;
  color: var(--dark);
}

.exam-floating-card p {
  margin: 0;
  font-size: 14px;
  color: var(--text);
}

.exam-content-box {
  padding: 38px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.exam-tag {
  display: inline-flex;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(244, 180, 0, 0.14);
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 14px;
}

.exam-content-box h3 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 16px;
}

.exam-content-box > p {
  color: var(--text);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 28px;
}

.exam-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.exam-feature-item {
  display: flex;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid rgba(23, 63, 115, 0.10);
  transition: all 0.35s ease;
}

.exam-feature-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(13, 45, 85, 0.12);
  border-color: rgba(23, 63, 115, 0.22);
}

.exam-feature-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: rgba(23, 63, 115, 0.08);
  color: var(--primary);
  font-size: 21px;
}

.exam-feature-item h4 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 800;
  color: var(--dark);
}

.exam-feature-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}

.exam-info-box {
  margin-top: 24px;
  padding: 22px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(23, 63, 115, 0.08), rgba(244, 180, 0, 0.10));
  border: 1px solid rgba(23, 63, 115, 0.10);
}

.exam-info-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.exam-info-head i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  font-size: 20px;
}

.exam-info-head h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--dark);
}

.exam-info-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.exam-info-box li {
  position: relative;
  padding-left: 28px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
}

.exam-info-box li:not(:last-child) {
  margin-bottom: 8px;
}

.exam-info-box li::before {
  content: "\F26A";
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--primary);
  font-size: 16px;
}

.exam-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.exam-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 14px 30px rgba(13, 45, 85, 0.18);
  transition: all 0.35s ease;
}

.exam-btn:hover {
  transform: translateY(-3px);
  color: var(--white);
  box-shadow: 0 18px 42px rgba(13, 45, 85, 0.24);
}

.exam-btn-light {
  background: var(--white);
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.15);
  box-shadow: none;
}

.exam-btn-light:hover {
  color: var(--primary-dark);
  background: var(--soft-blue);
}

/* Responsive */
@media (max-width: 991px) {
  .exam-committee-section {
    padding: 72px 0;
  }

  .exam-section-head {
    margin-bottom: 36px;
  }

  .exam-committee-wrapper {
    grid-template-columns: 1fr;
  }

  .exam-image-box,
  .exam-image-box img {
    min-height: 430px;
  }

  .exam-content-box {
    padding: 30px;
  }
}

@media (max-width: 767px) {
  .exam-committee-section {
    padding: 60px 0;
  }

  .exam-section-head {
    max-width: 100%;
    margin-bottom: 32px;
  }

  .exam-section-head h2 {
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1.2;
  }

  .exam-section-head p {
    font-size: 15px;
    line-height: 1.75;
  }

  .exam-feature-grid {
    grid-template-columns: 1fr;
  }

  .exam-image-box,
  .exam-image-box img {
    min-height: 360px;
    border-radius: 22px;
  }

  .exam-content-box {
    padding: 24px;
    border-radius: 24px;
  }

  .exam-content-box h3 {
    font-size: 27px;
  }

  .exam-floating-card {
    left: 16px;
    right: 16px;
    bottom: 16px;
    padding: 14px;
  }

  .exam-actions {
    flex-direction: column;
  }

  .exam-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .exam-committee-section {
    padding: 52px 0;
  }

  .exam-section-badge {
    font-size: 13px;
    padding: 8px 15px;
  }

  .exam-section-head h2 {
    font-size: 30px;
    letter-spacing: -0.4px;
  }

  .exam-image-box,
  .exam-image-box img {
    min-height: 310px;
  }

  .exam-floating-card {
    align-items: flex-start;
  }

  .exam-floating-card i {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    font-size: 21px;
  }

  .exam-feature-item {
    padding: 16px;
  }

  .exam-info-box {
    padding: 18px;
  }
}

/* ================= EXAM COMMITTEE SECTION END ================= */





/* ================= ANTI-RAGGING CELL SECTION START ================= */

.anti-ragging-section {
  position: relative;
  overflow: hidden;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 30%),
    radial-gradient(circle at 90% 85%, rgba(181, 31, 42, 0.12), transparent 32%),
    linear-gradient(180deg, var(--white) 0%, var(--light-bg) 100%);
}

.anti-ragging-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(23, 63, 115, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 63, 115, 0.035) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}

.ragging-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.35;
  pointer-events: none;
}

.ragging-shape-1 {
  width: 220px;
  height: 220px;
  left: -90px;
  top: 80px;
  background: rgba(23, 63, 115, 0.12);
}

.ragging-shape-2 {
  width: 260px;
  height: 260px;
  right: -110px;
  bottom: 40px;
  background: rgba(181, 31, 42, 0.14);
}

.anti-ragging-section .container {
  position: relative;
  z-index: 2;
}

/* ================= ANTI-RAGGING HEADING FIX START ================= */

.ragging-section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 850px;
  margin: 0 auto 46px;
  text-align: center;
}

.ragging-section-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  max-width: max-content;
  margin: 0 auto 14px;
  padding: 9px 20px;
  border-radius: 999px;
  background: rgba(23, 63, 115, 0.08);
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.12);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}

.ragging-section-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.ragging-section-head h2 {
  display: block;
  max-width: 760px;
  margin: 0 auto 14px;
  font-size: clamp(34px, 4.4vw, 48px);
  font-weight: 900;
  color: var(--dark);
  line-height: 1.16;
  letter-spacing: -0.8px;
}

.ragging-section-head p {
  display: block;
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.8;
}

/* ================= ANTI-RAGGING HEADING FIX END ================= */

.anti-ragging-wrapper {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 34px;
  align-items: center;
}

.ragging-content-box {
  padding: 38px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.ragging-tag {
  display: inline-flex;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(181, 31, 42, 0.10);
  color: var(--secondary);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 14px;
}

.ragging-content-box h3 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 16px;
}

.ragging-content-box > p {
  color: var(--text);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 28px;
}

.ragging-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.ragging-feature-item {
  display: flex;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid rgba(23, 63, 115, 0.10);
  transition: all 0.35s ease;
}

.ragging-feature-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(13, 45, 85, 0.12);
  border-color: rgba(181, 31, 42, 0.24);
}

.ragging-feature-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: rgba(181, 31, 42, 0.10);
  color: var(--secondary);
  font-size: 21px;
}

.ragging-feature-item h4 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 800;
  color: var(--dark);
}

.ragging-feature-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}

.ragging-info-box {
  margin-top: 24px;
  padding: 22px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(23, 63, 115, 0.08), rgba(181, 31, 42, 0.08));
  border: 1px solid rgba(23, 63, 115, 0.10);
}

.ragging-info-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.ragging-info-head i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  font-size: 20px;
}

.ragging-info-head h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--dark);
}

.ragging-info-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ragging-info-box li {
  position: relative;
  padding-left: 28px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
}

.ragging-info-box li:not(:last-child) {
  margin-bottom: 8px;
}

.ragging-info-box li::before {
  content: "\F26A";
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--secondary);
  font-size: 16px;
}

.ragging-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.ragging-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 14px 30px rgba(13, 45, 85, 0.18);
  transition: all 0.35s ease;
}

.ragging-btn:hover {
  transform: translateY(-3px);
  color: var(--white);
  box-shadow: 0 18px 42px rgba(13, 45, 85, 0.24);
}

.ragging-btn-light {
  background: var(--white);
  color: var(--secondary);
  border: 1px solid rgba(181, 31, 42, 0.18);
  box-shadow: none;
}

.ragging-btn-light:hover {
  color: var(--secondary);
  background: rgba(181, 31, 42, 0.06);
}

.ragging-highlight-box {
  position: relative;
}

.ragging-image-box {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  min-height: 560px;
  background: var(--white);
  box-shadow: var(--shadow-lg);
}

.ragging-image-box img {
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.ragging-image-box:hover img {
  transform: scale(1.06);
}

.ragging-image-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(23, 35, 52, 0.06),
    rgba(23, 35, 52, 0.60)
  );
}

.ragging-floating-card {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(13, 45, 85, 0.18);
}

.ragging-floating-card i {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--secondary), #8f1720);
  color: var(--white);
  font-size: 24px;
}

.ragging-floating-card h4 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 800;
  color: var(--dark);
}

.ragging-floating-card p {
  margin: 0;
  font-size: 14px;
  color: var(--text);
}

/* Responsive */
@media (max-width: 991px) {
  .anti-ragging-section {
    padding: 72px 0;
  }

  .ragging-section-head {
    margin-bottom: 36px;
  }

  .anti-ragging-wrapper {
    grid-template-columns: 1fr;
  }

  .ragging-highlight-box {
    order: -1;
  }

  .ragging-image-box,
  .ragging-image-box img {
    min-height: 430px;
  }

  .ragging-content-box {
    padding: 30px;
  }
}

@media (max-width: 767px) {
  .anti-ragging-section {
    padding: 60px 0;
  }

  .ragging-section-head {
    max-width: 100%;
    margin-bottom: 32px;
  }

  .ragging-section-head h2 {
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1.2;
  }

  .ragging-section-head p {
    font-size: 15px;
    line-height: 1.75;
  }

  .ragging-feature-grid {
    grid-template-columns: 1fr;
  }

  .ragging-image-box,
  .ragging-image-box img {
    min-height: 360px;
    border-radius: 22px;
  }

  .ragging-content-box {
    padding: 24px;
    border-radius: 24px;
  }

  .ragging-content-box h3 {
    font-size: 27px;
  }

  .ragging-floating-card {
    left: 16px;
    right: 16px;
    bottom: 16px;
    padding: 14px;
  }

  .ragging-actions {
    flex-direction: column;
  }

  .ragging-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .anti-ragging-section {
    padding: 52px 0;
  }

  .ragging-section-badge {
    font-size: 13px;
    padding: 8px 15px;
  }

  .ragging-section-head h2 {
    font-size: 30px;
    letter-spacing: -0.4px;
  }

  .ragging-image-box,
  .ragging-image-box img {
    min-height: 310px;
  }

  .ragging-floating-card {
    align-items: flex-start;
  }

  .ragging-floating-card i {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    font-size: 21px;
  }

  .ragging-feature-item {
    padding: 16px;
  }

  .ragging-info-box {
    padding: 18px;
  }
}

/* ================= ANTI-RAGGING CELL SECTION END ================= */





/* ================= GRIEVANCE CELL SECTION START ================= */

.grievance-cell-section {
  position: relative;
  overflow: hidden;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 30%),
    radial-gradient(circle at 90% 85%, rgba(244, 180, 0, 0.14), transparent 32%),
    linear-gradient(180deg, var(--white) 0%, var(--light-bg) 100%);
}

.grievance-cell-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(23, 63, 115, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 63, 115, 0.035) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}

.grievance-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.35;
  pointer-events: none;
}

.grievance-shape-1 {
  width: 220px;
  height: 220px;
  left: -90px;
  top: 80px;
  background: rgba(23, 63, 115, 0.12);
}

.grievance-shape-2 {
  width: 260px;
  height: 260px;
  right: -110px;
  bottom: 40px;
  background: rgba(244, 180, 0, 0.18);
}

.grievance-cell-section .container {
  position: relative;
  z-index: 2;
}

/* ================= GRIEVANCE HEADING FIX START ================= */

.grievance-section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 850px;
  margin: 0 auto 46px;
  text-align: center;
}

.grievance-section-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  max-width: max-content;
  margin: 0 auto 14px;
  padding: 9px 20px;
  border-radius: 999px;
  background: rgba(23, 63, 115, 0.08);
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.12);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}

.grievance-section-badge i {
  color: var(--primary);
  font-size: 15px;
}

.grievance-section-head h2 {
  display: block;
  max-width: 760px;
  margin: 0 auto 14px;
  font-size: clamp(34px, 4.4vw, 48px);
  font-weight: 900;
  color: var(--dark);
  line-height: 1.16;
  letter-spacing: -0.8px;
}

.grievance-section-head p {
  display: block;
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.8;
}

/* ================= GRIEVANCE HEADING FIX END ================= */

.grievance-cell-wrapper {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 34px;
  align-items: center;
}

.grievance-highlight-box {
  position: relative;
}

.grievance-image-box {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  min-height: 560px;
  background: var(--white);
  box-shadow: var(--shadow-lg);
}

.grievance-image-box img {
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.grievance-image-box:hover img {
  transform: scale(1.06);
}

.grievance-image-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(23, 35, 52, 0.06),
    rgba(23, 35, 52, 0.60)
  );
}

.grievance-floating-card {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(13, 45, 85, 0.18);
}

.grievance-floating-card i {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  font-size: 24px;
}

.grievance-floating-card h4 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 800;
  color: var(--dark);
}

.grievance-floating-card p {
  margin: 0;
  font-size: 14px;
  color: var(--text);
}

.grievance-content-box {
  padding: 38px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.grievance-tag {
  display: inline-flex;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(244, 180, 0, 0.14);
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 14px;
}

.grievance-content-box h3 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 16px;
}

.grievance-content-box > p {
  color: var(--text);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 28px;
}

.grievance-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.grievance-feature-item {
  display: flex;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid rgba(23, 63, 115, 0.10);
  transition: all 0.35s ease;
}

.grievance-feature-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(13, 45, 85, 0.12);
  border-color: rgba(23, 63, 115, 0.22);
}

.grievance-feature-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: rgba(23, 63, 115, 0.08);
  color: var(--primary);
  font-size: 21px;
}

.grievance-feature-item h4 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 800;
  color: var(--dark);
}

.grievance-feature-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}

.grievance-info-box {
  margin-top: 24px;
  padding: 22px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(23, 63, 115, 0.08), rgba(244, 180, 0, 0.10));
  border: 1px solid rgba(23, 63, 115, 0.10);
}

.grievance-info-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.grievance-info-head i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  font-size: 20px;
}

.grievance-info-head h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--dark);
}

.grievance-info-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.grievance-info-box li {
  position: relative;
  padding-left: 28px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
}

.grievance-info-box li:not(:last-child) {
  margin-bottom: 8px;
}

.grievance-info-box li::before {
  content: "\F26A";
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--primary);
  font-size: 16px;
}

.grievance-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.grievance-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 14px 30px rgba(13, 45, 85, 0.18);
  transition: all 0.35s ease;
}

.grievance-btn:hover {
  transform: translateY(-3px);
  color: var(--white);
  box-shadow: 0 18px 42px rgba(13, 45, 85, 0.24);
}

.grievance-btn-light {
  background: var(--white);
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.15);
  box-shadow: none;
}

.grievance-btn-light:hover {
  color: var(--primary-dark);
  background: var(--soft-blue);
}

/* Responsive */
@media (max-width: 991px) {
  .grievance-cell-section {
    padding: 72px 0;
  }

  .grievance-section-head {
    margin-bottom: 36px;
  }

  .grievance-cell-wrapper {
    grid-template-columns: 1fr;
  }

  .grievance-image-box,
  .grievance-image-box img {
    min-height: 430px;
  }

  .grievance-content-box {
    padding: 30px;
  }
}

@media (max-width: 767px) {
  .grievance-cell-section {
    padding: 60px 0;
  }

  .grievance-section-head {
    max-width: 100%;
    margin-bottom: 32px;
  }

  .grievance-section-head h2 {
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1.2;
  }

  .grievance-section-head p {
    font-size: 15px;
    line-height: 1.75;
  }

  .grievance-feature-grid {
    grid-template-columns: 1fr;
  }

  .grievance-image-box,
  .grievance-image-box img {
    min-height: 360px;
    border-radius: 22px;
  }

  .grievance-content-box {
    padding: 24px;
    border-radius: 24px;
  }

  .grievance-content-box h3 {
    font-size: 27px;
  }

  .grievance-floating-card {
    left: 16px;
    right: 16px;
    bottom: 16px;
    padding: 14px;
  }

  .grievance-actions {
    flex-direction: column;
  }

  .grievance-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .grievance-cell-section {
    padding: 52px 0;
  }

  .grievance-section-badge {
    font-size: 13px;
    padding: 8px 15px;
  }

  .grievance-section-head h2 {
    font-size: 30px;
    letter-spacing: -0.4px;
  }

  .grievance-image-box,
  .grievance-image-box img {
    min-height: 310px;
  }

  .grievance-floating-card {
    align-items: flex-start;
  }

  .grievance-floating-card i {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    font-size: 21px;
  }

  .grievance-feature-item {
    padding: 16px;
  }

  .grievance-info-box {
    padding: 18px;
  }
}

/* ================= GRIEVANCE CELL SECTION END ================= */





/* ================= ICC SECTION START ================= */

.icc-section {
  position: relative;
  overflow: hidden;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 30%),
    radial-gradient(circle at 90% 85%, rgba(181, 31, 42, 0.11), transparent 32%),
    linear-gradient(180deg, var(--white) 0%, var(--light-bg) 100%);
}

.icc-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(23, 63, 115, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 63, 115, 0.035) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}

.icc-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.35;
  pointer-events: none;
}

.icc-shape-1 {
  width: 220px;
  height: 220px;
  left: -90px;
  top: 80px;
  background: rgba(23, 63, 115, 0.12);
}

.icc-shape-2 {
  width: 260px;
  height: 260px;
  right: -110px;
  bottom: 40px;
  background: rgba(181, 31, 42, 0.14);
}

.icc-section .container {
  position: relative;
  z-index: 2;
}

/* ================= ICC HEADING FIX START ================= */

.icc-section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 850px;
  margin: 0 auto 46px;
  text-align: center;
}

.icc-section-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  max-width: max-content;
  margin: 0 auto 14px;
  padding: 9px 20px;
  border-radius: 999px;
  background: rgba(23, 63, 115, 0.08);
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.12);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}

.icc-section-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.icc-section-head h2 {
  display: block;
  max-width: 760px;
  margin: 0 auto 14px;
  font-size: clamp(34px, 4.4vw, 48px);
  font-weight: 900;
  color: var(--dark);
  line-height: 1.16;
  letter-spacing: -0.8px;
}

.icc-section-head p {
  display: block;
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.8;
}

/* ================= ICC HEADING FIX END ================= */

.icc-wrapper {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 34px;
  align-items: center;
}

.icc-content-box {
  padding: 38px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.icc-tag {
  display: inline-flex;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(181, 31, 42, 0.10);
  color: var(--secondary);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 14px;
}

.icc-content-box h3 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 16px;
}

.icc-content-box > p {
  color: var(--text);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 28px;
}

.icc-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.icc-feature-item {
  display: flex;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid rgba(23, 63, 115, 0.10);
  transition: all 0.35s ease;
}

.icc-feature-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(13, 45, 85, 0.12);
  border-color: rgba(181, 31, 42, 0.24);
}

.icc-feature-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: rgba(181, 31, 42, 0.10);
  color: var(--secondary);
  font-size: 21px;
}

.icc-feature-item h4 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 800;
  color: var(--dark);
}

.icc-feature-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}

.icc-info-box {
  margin-top: 24px;
  padding: 22px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(23, 63, 115, 0.08), rgba(181, 31, 42, 0.08));
  border: 1px solid rgba(23, 63, 115, 0.10);
}

.icc-info-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.icc-info-head i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  font-size: 20px;
}

.icc-info-head h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--dark);
}

.icc-info-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.icc-info-box li {
  position: relative;
  padding-left: 28px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
}

.icc-info-box li:not(:last-child) {
  margin-bottom: 8px;
}

.icc-info-box li::before {
  content: "\F26A";
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--secondary);
  font-size: 16px;
}

.icc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.icc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 14px 30px rgba(13, 45, 85, 0.18);
  transition: all 0.35s ease;
}

.icc-btn:hover {
  transform: translateY(-3px);
  color: var(--white);
  box-shadow: 0 18px 42px rgba(13, 45, 85, 0.24);
}

.icc-btn-light {
  background: var(--white);
  color: var(--secondary);
  border: 1px solid rgba(181, 31, 42, 0.18);
  box-shadow: none;
}

.icc-btn-light:hover {
  color: var(--secondary);
  background: rgba(181, 31, 42, 0.06);
}

.icc-highlight-box {
  position: relative;
}

.icc-image-box {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  min-height: 560px;
  background: var(--white);
  box-shadow: var(--shadow-lg);
}

.icc-image-box img {
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.icc-image-box:hover img {
  transform: scale(1.06);
}

.icc-image-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(23, 35, 52, 0.06),
    rgba(23, 35, 52, 0.60)
  );
}

.icc-floating-card {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(13, 45, 85, 0.18);
}

.icc-floating-card i {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--secondary), #8f1720);
  color: var(--white);
  font-size: 24px;
}

.icc-floating-card h4 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 800;
  color: var(--dark);
}

.icc-floating-card p {
  margin: 0;
  font-size: 14px;
  color: var(--text);
}

/* Responsive */
@media (max-width: 991px) {
  .icc-section {
    padding: 72px 0;
  }

  .icc-section-head {
    margin-bottom: 36px;
  }

  .icc-wrapper {
    grid-template-columns: 1fr;
  }

  .icc-highlight-box {
    order: -1;
  }

  .icc-image-box,
  .icc-image-box img {
    min-height: 430px;
  }

  .icc-content-box {
    padding: 30px;
  }
}

@media (max-width: 767px) {
  .icc-section {
    padding: 60px 0;
  }

  .icc-section-head {
    max-width: 100%;
    margin-bottom: 32px;
  }

  .icc-section-head h2 {
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1.2;
  }

  .icc-section-head p {
    font-size: 15px;
    line-height: 1.75;
  }

  .icc-feature-grid {
    grid-template-columns: 1fr;
  }

  .icc-image-box,
  .icc-image-box img {
    min-height: 360px;
    border-radius: 22px;
  }

  .icc-content-box {
    padding: 24px;
    border-radius: 24px;
  }

  .icc-floating-card {
    left: 16px;
    right: 16px;
    bottom: 16px;
    padding: 14px;
  }

  .icc-actions {
    flex-direction: column;
  }

  .icc-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .icc-section {
    padding: 52px 0;
  }

  .icc-section-badge {
    font-size: 13px;
    padding: 8px 15px;
  }

  .icc-section-head h2 {
    font-size: 30px;
    letter-spacing: -0.4px;
  }

  .icc-image-box,
  .icc-image-box img {
    min-height: 310px;
  }

  .icc-floating-card {
    align-items: flex-start;
  }

  .icc-floating-card i {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    font-size: 21px;
  }

  .icc-feature-item {
    padding: 16px;
  }

  .icc-info-box {
    padding: 18px;
  }
}

/* ================= ICC SECTION END ================= */




/* ================= WOMEN DEVELOPMENT CELL SECTION START ================= */

.women-dev-section {
  position: relative;
  overflow: hidden;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 30%),
    radial-gradient(circle at 90% 85%, rgba(181, 31, 42, 0.10), transparent 32%),
    linear-gradient(180deg, var(--white) 0%, var(--light-bg) 100%);
}

.women-dev-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(23, 63, 115, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 63, 115, 0.035) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}

.women-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.35;
  pointer-events: none;
}

.women-shape-1 {
  width: 220px;
  height: 220px;
  left: -90px;
  top: 80px;
  background: rgba(23, 63, 115, 0.12);
}

.women-shape-2 {
  width: 260px;
  height: 260px;
  right: -110px;
  bottom: 40px;
  background: rgba(181, 31, 42, 0.14);
}

.women-dev-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEADING FIX START ================= */

.women-section-head {
  display: block;
  width: 100%;
  max-width: 850px;
  margin: 0 auto 46px;
  text-align: center;
}

.women-section-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  max-width: max-content;
  margin: 0 auto 14px;
  padding: 9px 20px;
  border-radius: 999px;
  background: rgba(23, 63, 115, 0.08);
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.12);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}

.women-section-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.women-section-head h2 {
  display: block;
  max-width: 760px;
  margin: 0 auto 14px;
  font-size: clamp(34px, 4.4vw, 48px);
  font-weight: 900;
  color: var(--dark);
  line-height: 1.16;
  letter-spacing: -0.8px;
}

.women-section-head p {
  display: block;
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.8;
}

/* ================= HEADING FIX END ================= */

.women-dev-wrapper {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 34px;
  align-items: center;
}

.women-highlight-box {
  position: relative;
}

.women-image-box {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  min-height: 560px;
  background: var(--white);
  box-shadow: var(--shadow-lg);
}

.women-image-box img {
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.women-image-box:hover img {
  transform: scale(1.06);
}

.women-image-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(23, 35, 52, 0.06),
    rgba(23, 35, 52, 0.60)
  );
}

.women-floating-card {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(13, 45, 85, 0.18);
}

.women-floating-card i {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--secondary), #8f1720);
  color: var(--white);
  font-size: 24px;
}

.women-floating-card h4 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 800;
  color: var(--dark);
}

.women-floating-card p {
  margin: 0;
  font-size: 14px;
  color: var(--text);
}

.women-content-box {
  padding: 38px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.women-tag {
  display: inline-flex;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(181, 31, 42, 0.10);
  color: var(--secondary);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 14px;
}

.women-content-box h3 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 16px;
}

.women-content-box > p {
  color: var(--text);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 28px;
}

.women-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.women-feature-item {
  display: flex;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid rgba(23, 63, 115, 0.10);
  transition: all 0.35s ease;
}

.women-feature-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(13, 45, 85, 0.12);
  border-color: rgba(181, 31, 42, 0.24);
}

.women-feature-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: rgba(181, 31, 42, 0.10);
  color: var(--secondary);
  font-size: 21px;
}

.women-feature-item h4 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 800;
  color: var(--dark);
}

.women-feature-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}

.women-info-box {
  margin-top: 24px;
  padding: 22px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(23, 63, 115, 0.08), rgba(181, 31, 42, 0.08));
  border: 1px solid rgba(23, 63, 115, 0.10);
}

.women-info-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.women-info-head i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  font-size: 20px;
}

.women-info-head h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--dark);
}

.women-info-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.women-info-box li {
  position: relative;
  padding-left: 28px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
}

.women-info-box li:not(:last-child) {
  margin-bottom: 8px;
}

.women-info-box li::before {
  content: "\F26A";
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--secondary);
  font-size: 16px;
}

.women-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.women-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 14px 30px rgba(13, 45, 85, 0.18);
  transition: all 0.35s ease;
}

.women-btn:hover {
  transform: translateY(-3px);
  color: var(--white);
  box-shadow: 0 18px 42px rgba(13, 45, 85, 0.24);
}

.women-btn-light {
  background: var(--white);
  color: var(--secondary);
  border: 1px solid rgba(181, 31, 42, 0.18);
  box-shadow: none;
}

.women-btn-light:hover {
  color: var(--secondary);
  background: rgba(181, 31, 42, 0.06);
}

/* Responsive */
@media (max-width: 991px) {
  .women-dev-section {
    padding: 72px 0;
  }

  .women-section-head {
    margin-bottom: 36px;
  }

  .women-dev-wrapper {
    grid-template-columns: 1fr;
  }

  .women-image-box,
  .women-image-box img {
    min-height: 430px;
  }

  .women-content-box {
    padding: 30px;
  }
}

@media (max-width: 767px) {
  .women-dev-section {
    padding: 60px 0;
  }

  .women-section-head {
    max-width: 100%;
    margin-bottom: 32px;
  }

  .women-section-head h2 {
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1.2;
  }

  .women-section-head p {
    font-size: 15px;
    line-height: 1.75;
  }

  .women-feature-grid {
    grid-template-columns: 1fr;
  }

  .women-image-box,
  .women-image-box img {
    min-height: 360px;
    border-radius: 22px;
  }

  .women-content-box {
    padding: 24px;
    border-radius: 24px;
  }

  .women-floating-card {
    left: 16px;
    right: 16px;
    bottom: 16px;
    padding: 14px;
  }

  .women-actions {
    flex-direction: column;
  }

  .women-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .women-dev-section {
    padding: 52px 0;
  }

  .women-section-badge {
    font-size: 13px;
    padding: 8px 15px;
  }

  .women-section-head h2 {
    font-size: 30px;
    letter-spacing: -0.4px;
  }

  .women-image-box,
  .women-image-box img {
    min-height: 310px;
  }

  .women-floating-card {
    align-items: flex-start;
  }

  .women-floating-card i {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    font-size: 21px;
  }

  .women-feature-item {
    padding: 16px;
  }

  .women-info-box {
    padding: 18px;
  }
}

/* ================= WOMEN DEVELOPMENT CELL SECTION END ================= */




/* ================= SC/ST/OBC/MINORITY CELL SECTION START ================= */

.minority-cell-section {
  position: relative;
  overflow: hidden;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 30%),
    radial-gradient(circle at 90% 85%, rgba(19, 138, 75, 0.12), transparent 32%),
    linear-gradient(180deg, var(--white) 0%, var(--light-bg) 100%);
}

.minority-cell-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(23, 63, 115, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 63, 115, 0.035) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}

.minority-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.35;
  pointer-events: none;
}

.minority-shape-1 {
  width: 220px;
  height: 220px;
  left: -90px;
  top: 80px;
  background: rgba(23, 63, 115, 0.12);
}

.minority-shape-2 {
  width: 260px;
  height: 260px;
  right: -110px;
  bottom: 40px;
  background: rgba(19, 138, 75, 0.15);
}

.minority-cell-section .container {
  position: relative;
  z-index: 2;
}

/* ================= HEADING FIX START ================= */

.minority-section-head {
  display: block;
  width: 100%;
  max-width: 850px;
  margin: 0 auto 46px;
  text-align: center;
}

.minority-section-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  max-width: max-content;
  margin: 0 auto 14px;
  padding: 9px 20px;
  border-radius: 999px;
  background: rgba(23, 63, 115, 0.08);
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.12);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}

.minority-section-badge i {
  color: var(--success);
  font-size: 15px;
}

.minority-section-head h2 {
  display: block;
  max-width: 760px;
  margin: 0 auto 14px;
  font-size: clamp(34px, 4.4vw, 48px);
  font-weight: 900;
  color: var(--dark);
  line-height: 1.16;
  letter-spacing: -0.8px;
}

.minority-section-head p {
  display: block;
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.8;
}

/* ================= HEADING FIX END ================= */

.minority-cell-wrapper {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 34px;
  align-items: center;
}

.minority-content-box {
  padding: 38px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.minority-tag {
  display: inline-flex;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(19, 138, 75, 0.11);
  color: var(--success);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 14px;
}

.minority-content-box h3 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 900;
  color: var(--dark);
  line-height: 1.22;
  margin-bottom: 16px;
  letter-spacing: -0.4px;
}

.minority-content-box > p {
  color: var(--text);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 28px;
}

.minority-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.minority-feature-item {
  display: flex;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid rgba(23, 63, 115, 0.10);
  transition: all 0.35s ease;
}

.minority-feature-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(13, 45, 85, 0.12);
  border-color: rgba(19, 138, 75, 0.24);
}

.minority-feature-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: rgba(19, 138, 75, 0.10);
  color: var(--success);
  font-size: 21px;
}

.minority-feature-item h4 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 800;
  color: var(--dark);
}

.minority-feature-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}

.minority-info-box {
  margin-top: 24px;
  padding: 22px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(23, 63, 115, 0.08), rgba(19, 138, 75, 0.08));
  border: 1px solid rgba(23, 63, 115, 0.10);
}

.minority-info-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.minority-info-head i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  font-size: 20px;
}

.minority-info-head h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--dark);
}

.minority-info-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.minority-info-box li {
  position: relative;
  padding-left: 28px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
}

.minority-info-box li:not(:last-child) {
  margin-bottom: 8px;
}

.minority-info-box li::before {
  content: "\F26A";
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--success);
  font-size: 16px;
}

.minority-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.minority-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 14px 30px rgba(13, 45, 85, 0.18);
  transition: all 0.35s ease;
}

.minority-btn:hover {
  transform: translateY(-3px);
  color: var(--white);
  box-shadow: 0 18px 42px rgba(13, 45, 85, 0.24);
}

.minority-btn-light {
  background: var(--white);
  color: var(--success);
  border: 1px solid rgba(19, 138, 75, 0.18);
  box-shadow: none;
}

.minority-btn-light:hover {
  color: var(--success);
  background: rgba(19, 138, 75, 0.06);
}

.minority-highlight-box {
  position: relative;
}

.minority-image-box {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  min-height: 560px;
  background: var(--white);
  box-shadow: var(--shadow-lg);
}

.minority-image-box img {
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.minority-image-box:hover img {
  transform: scale(1.06);
}

.minority-image-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(23, 35, 52, 0.06),
    rgba(23, 35, 52, 0.60)
  );
}

.minority-floating-card {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(13, 45, 85, 0.18);
}

.minority-floating-card i {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--success), #0f6f3d);
  color: var(--white);
  font-size: 24px;
}

.minority-floating-card h4 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 800;
  color: var(--dark);
}

.minority-floating-card p {
  margin: 0;
  font-size: 14px;
  color: var(--text);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 991px) {
  .minority-cell-section {
    padding: 72px 0;
  }

  .minority-section-head {
    margin-bottom: 36px;
  }

  .minority-cell-wrapper {
    grid-template-columns: 1fr;
  }

  .minority-highlight-box {
    order: -1;
  }

  .minority-image-box,
  .minority-image-box img {
    min-height: 430px;
  }

  .minority-content-box {
    padding: 30px;
  }
}

@media (max-width: 767px) {
  .minority-cell-section {
    padding: 60px 0;
  }

  .minority-section-head {
    max-width: 100%;
    margin-bottom: 32px;
  }

  .minority-section-head h2 {
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1.2;
  }

  .minority-section-head p {
    font-size: 15px;
    line-height: 1.75;
  }

  .minority-feature-grid {
    grid-template-columns: 1fr;
  }

  .minority-image-box,
  .minority-image-box img {
    min-height: 360px;
    border-radius: 22px;
  }

  .minority-content-box {
    padding: 24px;
    border-radius: 24px;
  }

  .minority-content-box h3 {
    font-size: 27px;
  }

  .minority-floating-card {
    left: 16px;
    right: 16px;
    bottom: 16px;
    padding: 14px;
  }

  .minority-actions {
    flex-direction: column;
  }

  .minority-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .minority-cell-section {
    padding: 52px 0;
  }

  .minority-section-badge {
    font-size: 13px;
    padding: 8px 15px;
  }

  .minority-section-head h2 {
    font-size: 30px;
    letter-spacing: -0.4px;
  }

  .minority-image-box,
  .minority-image-box img {
    min-height: 310px;
  }

  .minority-floating-card {
    align-items: flex-start;
  }

  .minority-floating-card i {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    font-size: 21px;
  }

  .minority-feature-item {
    padding: 16px;
  }

  .minority-info-box {
    padding: 18px;
  }
}

/* ================= SC/ST/OBC/MINORITY CELL SECTION END ================= */




/* ================= NSS / NCC SECTION START ================= */

.nss-ncc-section {
  position: relative;
  overflow: hidden;
  padding: 10px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 30%),
    radial-gradient(circle at 90% 85%, rgba(244, 180, 0, 0.14), transparent 32%),
    linear-gradient(180deg, var(--white) 0%, var(--light-bg) 100%);
}

.nss-ncc-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(23, 63, 115, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 63, 115, 0.035) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}

.nss-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.35;
  pointer-events: none;
}

.nss-shape-1 {
  width: 220px;
  height: 220px;
  left: -90px;
  top: 80px;
  background: rgba(23, 63, 115, 0.12);
}

.nss-shape-2 {
  width: 260px;
  height: 260px;
  right: -110px;
  bottom: 40px;
  background: rgba(244, 180, 0, 0.18);
}

.nss-ncc-section .container {
  position: relative;
  z-index: 2;
}

/* ================= FIXED HEADING START ================= */

.nss-section-head {
  display: block;
  max-width: 820px;
  margin: 0 auto 46px;
  text-align: center;
}

.nss-section-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  max-width: max-content;
  margin: 0 auto 14px;
  padding: 9px 20px;
  border-radius: 999px;
  background: rgba(23, 63, 115, 0.08);
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.12);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}

.nss-section-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.nss-section-head h2 {
  display: block;
  max-width: 760px;
  margin: 0 auto 14px;
  font-size: clamp(34px, 4.4vw, 48px);
  font-weight: 900;
  color: var(--dark);
  line-height: 1.16;
  letter-spacing: -0.8px;
}

.nss-section-head p {
  display: block;
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.8;
}

/* ================= FIXED HEADING END ================= */

.nss-ncc-wrapper {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 34px;
  align-items: center;
}

.nss-highlight-box {
  position: relative;
}

.nss-image-box {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  min-height: 560px;
  background: var(--white);
  box-shadow: var(--shadow-lg);
}

.nss-image-box img {
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.nss-image-box:hover img {
  transform: scale(1.06);
}

.nss-image-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(23, 35, 52, 0.06),
    rgba(23, 35, 52, 0.60)
  );
}

.nss-floating-card {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(13, 45, 85, 0.18);
}

.nss-floating-card i {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  font-size: 24px;
}

.nss-floating-card h4 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 800;
  color: var(--dark);
}

.nss-floating-card p {
  margin: 0;
  font-size: 14px;
  color: var(--text);
}

.nss-content-box {
  padding: 38px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.nss-tag {
  display: inline-flex;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(244, 180, 0, 0.14);
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 14px;
}

.nss-content-box h3 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 900;
  color: var(--dark);
  line-height: 1.22;
  margin-bottom: 16px;
  letter-spacing: -0.4px;
}

.nss-content-box > p {
  color: var(--text);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 28px;
}

.nss-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.nss-feature-item {
  display: flex;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid rgba(23, 63, 115, 0.10);
  transition: all 0.35s ease;
}

.nss-feature-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(13, 45, 85, 0.12);
  border-color: rgba(23, 63, 115, 0.22);
}

.nss-feature-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: rgba(23, 63, 115, 0.08);
  color: var(--primary);
  font-size: 21px;
}

.nss-feature-item h4 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 800;
  color: var(--dark);
}

.nss-feature-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}

.nss-info-box {
  margin-top: 24px;
  padding: 22px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(23, 63, 115, 0.08), rgba(244, 180, 0, 0.10));
  border: 1px solid rgba(23, 63, 115, 0.10);
}

.nss-info-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.nss-info-head i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  font-size: 20px;
}

.nss-info-head h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--dark);
}

.nss-info-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nss-info-box li {
  position: relative;
  padding-left: 28px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
}

.nss-info-box li:not(:last-child) {
  margin-bottom: 8px;
}

.nss-info-box li::before {
  content: "\F26A";
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--primary);
  font-size: 16px;
}

.nss-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.nss-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 14px 30px rgba(13, 45, 85, 0.18);
  transition: all 0.35s ease;
}

.nss-btn:hover {
  transform: translateY(-3px);
  color: var(--white);
  box-shadow: 0 18px 42px rgba(13, 45, 85, 0.24);
}

.nss-btn-light {
  background: var(--white);
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.15);
  box-shadow: none;
}

.nss-btn-light:hover {
  color: var(--primary-dark);
  background: var(--soft-blue);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 991px) {
  .nss-ncc-section {
    padding: 72px 0;
  }

  .nss-section-head {
    margin-bottom: 36px;
  }

  .nss-ncc-wrapper {
    grid-template-columns: 1fr;
  }

  .nss-image-box,
  .nss-image-box img {
    min-height: 430px;
  }

  .nss-content-box {
    padding: 30px;
  }
}

@media (max-width: 767px) {
  .nss-ncc-section {
    padding: 60px 0;
  }

  .nss-section-head {
    max-width: 100%;
    margin-bottom: 32px;
  }

  .nss-section-head h2 {
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1.2;
  }

  .nss-section-head p {
    font-size: 15px;
    line-height: 1.75;
  }

  .nss-feature-grid {
    grid-template-columns: 1fr;
  }

  .nss-image-box,
  .nss-image-box img {
    min-height: 360px;
    border-radius: 22px;
  }

  .nss-content-box {
    padding: 24px;
    border-radius: 24px;
  }

  .nss-content-box h3 {
    font-size: 27px;
  }

  .nss-floating-card {
    left: 16px;
    right: 16px;
    bottom: 16px;
    padding: 14px;
  }

  .nss-actions {
    flex-direction: column;
  }

  .nss-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .nss-ncc-section {
    padding: 52px 0;
  }

  .nss-section-badge {
    font-size: 13px;
    padding: 8px 15px;
  }

  .nss-section-head h2 {
    font-size: 30px;
    letter-spacing: -0.4px;
  }

  .nss-image-box,
  .nss-image-box img {
    min-height: 310px;
  }

  .nss-floating-card {
    align-items: flex-start;
  }

  .nss-floating-card i {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    font-size: 21px;
  }

  .nss-feature-item {
    padding: 16px;
  }

  .nss-info-box {
    padding: 18px;
  }
}

/* ================= NSS / NCC SECTION END ================= */




/* ================= PLACEMENT CELL SECTION START ================= */

.placement-cell-section {
  position: relative;
  overflow: hidden;
  padding: 70px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 30%),
    radial-gradient(circle at 90% 85%, rgba(244, 180, 0, 0.14), transparent 32%),
    linear-gradient(180deg, var(--white) 0%, var(--light-bg) 100%);
}

.placement-cell-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(23, 63, 115, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 63, 115, 0.035) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}

.placement-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.35;
  pointer-events: none;
}

.placement-shape-1 {
  width: 220px;
  height: 220px;
  left: -90px;
  top: 80px;
  background: rgba(23, 63, 115, 0.12);
}

.placement-shape-2 {
  width: 260px;
  height: 260px;
  right: -110px;
  bottom: 40px;
  background: rgba(244, 180, 0, 0.18);
}

.placement-cell-section .container {
  position: relative;
  z-index: 2;
}

/* ================= FIXED HEADING START ================= */

.placement-section-head {
  display: block;
  max-width: 820px;
  margin: 0 auto 46px;
  text-align: center;
}

.placement-section-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  max-width: max-content;
  margin: 0 auto 14px;
  padding: 9px 20px;
  border-radius: 999px;
  background: rgba(23, 63, 115, 0.08);
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.12);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}

.placement-section-badge i {
  color: var(--secondary);
  font-size: 15px;
}

.placement-section-head h2 {
  display: block;
  max-width: 760px;
  margin: 0 auto 14px;
  font-size: clamp(34px, 4.4vw, 48px);
  font-weight: 900;
  color: var(--dark);
  line-height: 1.16;
  letter-spacing: -0.8px;
}

.placement-section-head p {
  display: block;
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.8;
}

/* ================= FIXED HEADING END ================= */

.placement-cell-wrapper {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 34px;
  align-items: center;
}

.placement-content-box {
  padding: 38px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.placement-tag {
  display: inline-flex;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(244, 180, 0, 0.14);
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 14px;
}

.placement-content-box h3 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 900;
  color: var(--dark);
  line-height: 1.22;
  margin-bottom: 16px;
  letter-spacing: -0.4px;
}

.placement-content-box > p {
  color: var(--text);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 28px;
}

.placement-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.placement-feature-item {
  display: flex;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid rgba(23, 63, 115, 0.10);
  transition: all 0.35s ease;
}

.placement-feature-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(13, 45, 85, 0.12);
  border-color: rgba(23, 63, 115, 0.22);
}

.placement-feature-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: rgba(23, 63, 115, 0.08);
  color: var(--primary);
  font-size: 21px;
}

.placement-feature-item h4 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 800;
  color: var(--dark);
}

.placement-feature-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}

.placement-info-box {
  margin-top: 24px;
  padding: 22px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(23, 63, 115, 0.08), rgba(244, 180, 0, 0.10));
  border: 1px solid rgba(23, 63, 115, 0.10);
}

.placement-info-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.placement-info-head i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  font-size: 20px;
}

.placement-info-head h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--dark);
}

.placement-info-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.placement-info-box li {
  position: relative;
  padding-left: 28px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
}

.placement-info-box li:not(:last-child) {
  margin-bottom: 8px;
}

.placement-info-box li::before {
  content: "\F26A";
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--primary);
  font-size: 16px;
}

.placement-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.placement-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 14px 30px rgba(13, 45, 85, 0.18);
  transition: all 0.35s ease;
}

.placement-btn:hover {
  transform: translateY(-3px);
  color: var(--white);
  box-shadow: 0 18px 42px rgba(13, 45, 85, 0.24);
}

.placement-btn-light {
  background: var(--white);
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.15);
  box-shadow: none;
}

.placement-btn-light:hover {
  color: var(--primary-dark);
  background: var(--soft-blue);
}

.placement-highlight-box {
  position: relative;
}

.placement-image-box {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  min-height: 560px;
  background: var(--white);
  box-shadow: var(--shadow-lg);
}

.placement-image-box img {
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.placement-image-box:hover img {
  transform: scale(1.06);
}

.placement-image-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(23, 35, 52, 0.06),
    rgba(23, 35, 52, 0.60)
  );
}

.placement-floating-card {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(13, 45, 85, 0.18);
}

.placement-floating-card i {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  font-size: 24px;
}

.placement-floating-card h4 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 800;
  color: var(--dark);
}

.placement-floating-card p {
  margin: 0;
  font-size: 14px;
  color: var(--text);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 991px) {
  .placement-cell-section {
    padding: 72px 0;
  }

  .placement-section-head {
    margin-bottom: 36px;
  }

  .placement-cell-wrapper {
    grid-template-columns: 1fr;
  }

  .placement-highlight-box {
    order: -1;
  }

  .placement-image-box,
  .placement-image-box img {
    min-height: 430px;
  }

  .placement-content-box {
    padding: 30px;
  }
}

@media (max-width: 767px) {
  .placement-cell-section {
    padding: 60px 0;
  }

  .placement-section-head {
    max-width: 100%;
    margin-bottom: 32px;
  }

  .placement-section-head h2 {
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1.2;
  }

  .placement-section-head p {
    font-size: 15px;
    line-height: 1.75;
  }

  .placement-feature-grid {
    grid-template-columns: 1fr;
  }

  .placement-image-box,
  .placement-image-box img {
    min-height: 360px;
    border-radius: 22px;
  }

  .placement-content-box {
    padding: 24px;
    border-radius: 24px;
  }

  .placement-content-box h3 {
    font-size: 27px;
  }

  .placement-floating-card {
    left: 16px;
    right: 16px;
    bottom: 16px;
    padding: 14px;
  }

  .placement-actions {
    flex-direction: column;
  }

  .placement-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .placement-cell-section {
    padding: 52px 0;
  }

  .placement-section-badge {
    font-size: 13px;
    padding: 8px 15px;
  }

  .placement-section-head h2 {
    font-size: 30px;
    letter-spacing: -0.4px;
  }

  .placement-image-box,
  .placement-image-box img {
    min-height: 310px;
  }

  .placement-floating-card {
    align-items: flex-start;
  }

  .placement-floating-card i {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    font-size: 21px;
  }

  .placement-feature-item {
    padding: 16px;
  }

  .placement-info-box {
    padding: 18px;
  }
}

/* ================= PLACEMENT CELL SECTION END ================= */





/* ================= SPORTS / CULTURAL / LIBRARY COMMITTEES SECTION START ================= */

.activity-committees-section {
  position: relative;
  overflow: hidden;
  padding: 70px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.08), transparent 30%),
    radial-gradient(circle at 90% 85%, rgba(244, 180, 0, 0.14), transparent 32%),
    linear-gradient(180deg, var(--white) 0%, var(--light-bg) 100%);
}

.activity-committees-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(23, 63, 115, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 63, 115, 0.035) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}

.activity-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.35;
  pointer-events: none;
}

.activity-shape-1 {
  width: 220px;
  height: 220px;
  left: -90px;
  top: 80px;
  background: rgba(23, 63, 115, 0.12);
}

.activity-shape-2 {
  width: 260px;
  height: 260px;
  right: -110px;
  bottom: 40px;
  background: rgba(244, 180, 0, 0.18);
}

.activity-committees-section .container {
  position: relative;
  z-index: 2;
}

/* Heading fixed */
.activity-committees-section .section-head {
  max-width: 900px;
  margin: 0 auto 46px;
  text-align: center;
}

.activity-committees-section .section-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 20px;
  border-radius: 999px;
  background: rgba(23, 63, 115, 0.08);
  color: var(--primary);
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 14px;
  border: 1px solid rgba(23, 63, 115, 0.12);
}

.activity-committees-section .section-badge i {
  color: var(--secondary);
}

.activity-committees-section .section-head h2 {
  max-width: 760px;
  margin: 0 auto 14px;
  font-size: clamp(34px, 4.4vw, 48px);
  font-weight: 900;
  color: var(--dark);
  line-height: 1.16;
  letter-spacing: -0.8px;
  text-wrap: balance;
}

.activity-committees-section .section-head p {
  max-width: 760px;
  margin: 0 auto;
  font-size: 16px;
  color: var(--text);
  line-height: 1.8;
}

.activity-committees-wrapper {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 34px;
  align-items: center;
}

.activity-highlight-box {
  position: relative;
}

.activity-image-box {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  min-height: 560px;
  background: var(--white);
  box-shadow: var(--shadow-lg);
}

.activity-image-box img {
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.activity-image-box:hover img {
  transform: scale(1.06);
}

.activity-image-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(23, 35, 52, 0.06),
    rgba(23, 35, 52, 0.60)
  );
}

.activity-floating-card {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(13, 45, 85, 0.18);
}

.activity-floating-card i {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  font-size: 24px;
}

.activity-floating-card h4 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 800;
  color: var(--dark);
}

.activity-floating-card p {
  margin: 0;
  font-size: 14px;
  color: var(--text);
}

.activity-content-box {
  padding: 38px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.activity-tag {
  display: inline-flex;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(244, 180, 0, 0.14);
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 14px;
}

.activity-content-box h3 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 900;
  color: var(--dark);
  line-height: 1.22;
  margin-bottom: 16px;
  letter-spacing: -0.4px;
}

.activity-content-box > p {
  color: var(--text);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 28px;
}

.activity-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.activity-feature-item {
  display: flex;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid rgba(23, 63, 115, 0.10);
  transition: all 0.35s ease;
}

.activity-feature-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(13, 45, 85, 0.12);
  border-color: rgba(23, 63, 115, 0.22);
}

.activity-feature-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: rgba(23, 63, 115, 0.08);
  color: var(--primary);
  font-size: 21px;
}

.activity-feature-item h4 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 800;
  color: var(--dark);
}

.activity-feature-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}

.activity-info-box {
  margin-top: 24px;
  padding: 22px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(23, 63, 115, 0.08), rgba(244, 180, 0, 0.10));
  border: 1px solid rgba(23, 63, 115, 0.10);
}

.activity-info-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.activity-info-head i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  font-size: 20px;
}

.activity-info-head h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--dark);
}

.activity-info-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.activity-info-box li {
  position: relative;
  padding-left: 28px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
}

.activity-info-box li:not(:last-child) {
  margin-bottom: 8px;
}

.activity-info-box li::before {
  content: "\F26A";
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--primary);
  font-size: 16px;
}

.activity-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.activity-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 14px 30px rgba(13, 45, 85, 0.18);
  transition: all 0.35s ease;
}

.activity-btn:hover {
  transform: translateY(-3px);
  color: var(--white);
  box-shadow: 0 18px 42px rgba(13, 45, 85, 0.24);
}

.activity-btn-light {
  background: var(--white);
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.15);
  box-shadow: none;
}

.activity-btn-light:hover {
  color: var(--primary-dark);
  background: var(--soft-blue);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .activity-committees-wrapper {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  .activity-content-box {
    padding: 30px;
  }

  .activity-feature-grid {
    gap: 14px;
  }

  .activity-feature-item {
    padding: 16px;
  }
}

@media (max-width: 991px) {
  .activity-committees-section {
    padding: 72px 0;
  }

  .activity-committees-section .section-head {
    margin-bottom: 36px;
  }

  .activity-committees-wrapper {
    grid-template-columns: 1fr;
  }

  .activity-image-box,
  .activity-image-box img {
    min-height: 430px;
  }

  .activity-content-box {
    padding: 30px;
  }
}

@media (max-width: 767px) {
  .activity-committees-section {
    padding: 60px 0;
  }

  .activity-committees-section .section-head {
    max-width: 100%;
    margin-bottom: 32px;
  }

  .activity-committees-section .section-head h2 {
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1.2;
  }

  .activity-committees-section .section-head p {
    font-size: 15px;
    line-height: 1.75;
  }

  .activity-feature-grid {
    grid-template-columns: 1fr;
  }

  .activity-image-box,
  .activity-image-box img {
    min-height: 360px;
    border-radius: 22px;
  }

  .activity-content-box {
    padding: 24px;
    border-radius: 24px;
  }

  .activity-content-box h3 {
    font-size: 27px;
  }

  .activity-floating-card {
    left: 16px;
    right: 16px;
    bottom: 16px;
    padding: 14px;
  }

  .activity-actions {
    flex-direction: column;
  }

  .activity-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .activity-committees-section {
    padding: 52px 0;
  }

  .activity-committees-section .section-badge {
    font-size: 13px;
    padding: 8px 15px;
  }

  .activity-committees-section .section-head h2 {
    font-size: 30px;
    letter-spacing: -0.4px;
  }

  .activity-image-box,
  .activity-image-box img {
    min-height: 310px;
  }

  .activity-floating-card {
    align-items: flex-start;
  }

  .activity-floating-card i {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    font-size: 21px;
  }

  .activity-floating-card h4 {
    font-size: 16px;
  }

  .activity-floating-card p {
    font-size: 13px;
  }

  .activity-feature-item {
    padding: 16px;
  }

  .activity-info-box {
    padding: 18px;
  }
}

/* ================= SPORTS / CULTURAL / LIBRARY COMMITTEES SECTION END ================= */














/* ================= EXAM FORM PAGE START ================= */

.exam-form-hero {
  position: relative;
  overflow: hidden;
  padding: 10px 0 82px;
  background:
    radial-gradient(circle at 8% 18%, rgba(23, 63, 115, 0.10), transparent 32%),
    radial-gradient(circle at 92% 84%, rgba(181, 31, 42, 0.07), transparent 31%),
    linear-gradient(135deg, #ffffff 0%, #f6f9fd 100%);
}

.exam-form-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(23, 63, 115, 0.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 63, 115, 0.038) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}

.exam-form-hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: min(980px, 86%);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(23, 63, 115, 0.20), transparent);
}

.exam-form-shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.exam-form-shape-1 {
  width: 270px;
  height: 270px;
  top: -135px;
  left: -105px;
  background: rgba(244, 180, 0, 0.11);
  filter: blur(1px);
}

.exam-form-shape-2 {
  width: 330px;
  height: 330px;
  right: -160px;
  bottom: -165px;
  border: 38px solid rgba(23, 63, 115, 0.065);
}

.exam-form-shape-3 {
  width: 105px;
  height: 105px;
  left: 12%;
  bottom: 70px;
  background: rgba(181, 31, 42, 0.055);
  filter: blur(4px);
}

.exam-form-hero .container {
  position: relative;
  z-index: 2;
}

.exam-form-hero-content {
  max-width: 900px;
  margin: 0 auto;
}

.exam-form-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  max-width: max-content;
  margin: 0 auto 18px;
  padding: 9px 18px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(234, 241, 250, 0.96), rgba(255, 255, 255, 0.94));
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.14);
  box-shadow: 0 8px 22px rgba(13, 45, 85, 0.065);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 850;
}

.exam-form-badge i {
  color: var(--secondary);
}

.exam-form-hero h1 {
  max-width: 820px;
  margin: 0 auto 16px;
  color: var(--primary-dark);
  font-size: clamp(38px, 5.2vw, 62px);
  line-height: 1.06;
  font-weight: 950;
  letter-spacing: -1.4px;
}

.exam-form-hero p {
  max-width: 760px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16.5px;
  line-height: 1.85;
  font-weight: 500;
}

.exam-form-hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.exam-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 16px 34px rgba(13, 45, 85, 0.20);
  transition: all 0.35s ease;
}

.exam-hero-btn:hover {
  transform: translateY(-3px);
  color: #ffffff;
  box-shadow: 0 22px 46px rgba(13, 45, 85, 0.26);
}

.exam-hero-btn.light {
  background: #ffffff;
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.16);
  box-shadow: 0 12px 26px rgba(13, 45, 85, 0.08);
}

.exam-hero-btn.light:hover {
  color: var(--primary-dark);
  background: var(--soft-blue);
}

.exam-form-breadcrumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.07);
  backdrop-filter: blur(12px);
}

.exam-form-breadcrumb a,
.exam-form-breadcrumb span {
  color: var(--primary);
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
}

.exam-form-breadcrumb span {
  color: var(--secondary);
}

.exam-form-breadcrumb i {
  color: var(--text);
  font-size: 11px;
}

.exam-form-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 820px;
  margin: 38px auto 0;
}

.exam-hero-stat {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 16px 34px rgba(13, 45, 85, 0.075);
  backdrop-filter: blur(12px);
}

.exam-hero-stat i {
  width: 46px;
  height: 46px;
  min-width: 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: rgba(23, 63, 115, 0.09);
  color: var(--primary);
  font-size: 20px;
}

.exam-hero-stat strong {
  display: block;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.1;
  font-weight: 950;
}

.exam-hero-stat span {
  display: block;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 750;
  margin-top: 3px;
}

/* CONTENT SECTION */
.exam-form-section {
  position: relative;
  padding: 82px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.055), transparent 30%),
    radial-gradient(circle at 92% 88%, rgba(244, 180, 0, 0.055), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.exam-form-section::before {
  content: "";
  position: absolute;
  left: -110px;
  bottom: 12%;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(23, 63, 115, 0.045);
  pointer-events: none;
}

.exam-form-section .container {
  position: relative;
  z-index: 2;
}

.exam-form-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 30px;
  align-items: start;
}

.exam-form-main {
  display: grid;
  gap: 24px;
}

.exam-form-card,
.exam-form-side-card {
  position: relative;
  overflow: hidden;
  padding: 30px;
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 255, 0.96));
  border: 1px solid rgba(220, 229, 240, 0.96);
  box-shadow:
    0 18px 44px rgba(13, 45, 85, 0.085),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.exam-form-card::before,
.exam-form-side-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(23, 63, 115, 0.045), rgba(181, 31, 42, 0.018));
  opacity: 0;
  transition: all 0.35s ease;
  pointer-events: none;
}

.exam-form-card:hover::before,
.exam-form-side-card:hover::before {
  opacity: 1;
}

.exam-form-card > *,
.exam-form-side-card > * {
  position: relative;
  z-index: 2;
}

.exam-form-highlight {
  background:
    linear-gradient(135deg, rgba(23, 63, 115, 0.095), rgba(255, 255, 255, 0.97)),
    linear-gradient(145deg, #ffffff, #f7faff);
}

.exam-form-card-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}

.exam-form-card-icon,
.side-card-icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  display: grid;
  place-items: center;
  border-radius: 19px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #ffffff;
  font-size: 25px;
  box-shadow: 0 15px 30px rgba(13, 45, 85, 0.22);
}

.side-card-icon.red {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.side-card-icon.yellow {
  background: linear-gradient(135deg, var(--accent), #d88d00);
}

.exam-form-card-head span,
.exam-form-small-badge {
  display: inline-flex;
  width: max-content;
  margin-bottom: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(23, 63, 115, 0.08);
  color: var(--primary);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 900;
}

.exam-form-card h2,
.exam-form-card h3,
.exam-form-side-card h3,
.exam-form-help-card h3 {
  margin: 0;
  color: var(--primary-dark);
  font-weight: 950;
  letter-spacing: -0.5px;
}

.exam-form-card h2 {
  font-size: clamp(27px, 3vw, 38px);
  line-height: 1.16;
}

.exam-form-card h3 {
  font-size: 26px;
  margin-bottom: 18px;
}

.exam-form-side-card h3,
.exam-form-help-card h3 {
  font-size: 21px;
  margin: 16px 0 14px;
}

.exam-form-card p,
.exam-form-side-card p,
.exam-form-help-card p {
  color: var(--text);
  font-size: 15px;
  line-height: 1.75;
  margin: 0;
  font-weight: 500;
}

.exam-form-alert {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  padding: 17px;
  border-radius: 20px;
  background: rgba(244, 180, 0, 0.12);
  border: 1px solid rgba(244, 180, 0, 0.22);
}

.exam-form-alert i {
  color: var(--accent);
  font-size: 20px;
  margin-top: 2px;
}

.exam-form-alert p {
  font-size: 14px;
}

/* NOTICE LIST */
.exam-form-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.exam-form-title-row h3 {
  margin-bottom: 0;
}

.exam-form-view-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
}

.exam-form-view-link i {
  transition: transform 0.32s ease;
}

.exam-form-view-link:hover i {
  transform: translateX(4px);
}

.exam-notice-list {
  display: grid;
  gap: 14px;
}

.exam-notice-item {
  display: grid;
  grid-template-columns: 72px 1fr 44px;
  gap: 16px;
  align-items: center;
  padding: 18px;
  border-radius: 23px;
  background: #ffffff;
  border: 1px solid rgba(23, 63, 115, 0.10);
  text-decoration: none;
  transition: all 0.35s ease;
}

.exam-notice-item:hover,
.exam-notice-item.active {
  transform: translateY(-4px);
  border-color: rgba(23, 63, 115, 0.20);
  box-shadow: 0 18px 38px rgba(13, 45, 85, 0.10);
}

.exam-notice-date {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(23, 63, 115, 0.08);
  color: var(--primary);
  text-align: center;
}

.exam-notice-date strong {
  display: block;
  font-size: 22px;
  line-height: 1;
  font-weight: 950;
}

.exam-notice-date span {
  display: block;
  font-size: 12px;
  font-weight: 850;
}

.exam-notice-content h4 {
  margin: 8px 0 6px;
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.35;
  font-weight: 950;
}

.exam-notice-content p {
  font-size: 13.5px;
  line-height: 1.6;
}

.notice-category {
  display: inline-flex;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.notice-category.form {
  background: rgba(23, 63, 115, 0.09);
  color: var(--primary);
}

.notice-category.fee {
  background: rgba(181, 31, 42, 0.10);
  color: var(--secondary);
}

.notice-category.verify {
  background: rgba(19, 138, 75, 0.10);
  color: var(--success);
}

.exam-notice-action {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--soft-blue);
  color: var(--primary);
  transition: all 0.35s ease;
}

.exam-notice-item:hover .exam-notice-action {
  background: var(--primary);
  color: #ffffff;
}

/* PROCESS */
.exam-process-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.exam-process-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 19px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(23, 63, 115, 0.10);
  transition: all 0.35s ease;
}

.exam-process-item:hover {
  transform: translateY(-5px);
  border-color: rgba(23, 63, 115, 0.20);
  box-shadow: 0 18px 38px rgba(13, 45, 85, 0.10);
}

.exam-process-number {
  width: 46px;
  height: 46px;
  min-width: 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #ffffff;
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 12px 24px rgba(13, 45, 85, 0.18);
}

.exam-process-item h4 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 16px;
  font-weight: 950;
}

.exam-process-item p {
  font-size: 13.5px;
  line-height: 1.6;
}

/* SIDEBAR */
.exam-form-sidebar {
  position: sticky;
  top: 110px;
  display: grid;
  gap: 20px;
}

.exam-date-list,
.exam-doc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.exam-date-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(23, 63, 115, 0.10);
}

.exam-date-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.exam-date-list span {
  color: var(--text);
  font-size: 13.5px;
  font-weight: 750;
}

.exam-date-list strong {
  color: var(--primary-dark);
  font-size: 13.5px;
  font-weight: 950;
  text-align: right;
}

.exam-doc-list {
  display: grid;
  gap: 12px;
}

.exam-doc-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 14px;
  font-weight: 750;
}

.exam-doc-list i {
  color: var(--success);
}

.exam-download-card p {
  margin-bottom: 16px;
}

.exam-download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 13px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 900;
  margin-top: 10px;
  transition: all 0.35s ease;
}

.exam-download-btn:hover {
  transform: translateY(-3px);
  color: #ffffff;
  box-shadow: 0 16px 34px rgba(13, 45, 85, 0.18);
}

.exam-download-btn.light {
  background: #ffffff;
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.14);
}

.exam-download-btn.light:hover {
  color: var(--primary-dark);
  background: var(--soft-blue);
}

.exam-form-help-card {
  position: relative;
  overflow: hidden;
  padding: 30px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 18% 16%, rgba(244, 180, 0, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(23, 63, 115, 0.96), rgba(13, 45, 85, 0.98));
  color: #ffffff;
  box-shadow: 0 20px 48px rgba(13, 45, 85, 0.22);
}

.exam-form-help-card::before {
  content: "";
  position: absolute;
  right: -50px;
  bottom: -60px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 24px solid rgba(255, 255, 255, 0.08);
}

.exam-form-help-card > * {
  position: relative;
  z-index: 2;
}

.exam-form-help-card > i {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 25px;
  margin-bottom: 16px;
}

.exam-form-help-card h3 {
  color: #ffffff;
  margin: 0 0 12px;
}

.exam-form-help-card p {
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 18px;
}

.exam-form-help-card a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
}

.exam-form-help-card a i {
  transition: transform 0.32s ease;
}

.exam-form-help-card a:hover i {
  transform: translateX(4px);
}

/* RESPONSIVE */
@media (max-width: 1199px) {
  .exam-form-wrapper {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
  }

  .exam-form-card,
  .exam-form-side-card,
  .exam-form-help-card {
    padding: 26px;
  }
}

@media (max-width: 991px) {
  .exam-form-hero {
    padding: 82px 0 68px;
  }

  .exam-form-section {
    padding: 68px 0;
  }

  .exam-form-wrapper {
    grid-template-columns: 1fr;
  }

  .exam-form-sidebar {
    position: static;
    grid-template-columns: repeat(2, 1fr);
  }

  .exam-form-help-card,
  .exam-download-card {
    grid-column: auto;
  }
}

@media (max-width: 767px) {
  .exam-form-hero {
    padding: 68px 0 58px;
  }

  .exam-form-hero h1 {
    font-size: 36px;
    letter-spacing: -0.8px;
  }

  .exam-form-hero p {
    font-size: 15px;
  }

  .exam-form-hero-stats {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-top: 30px;
  }

  .exam-form-section {
    padding: 58px 0;
  }

  .exam-form-card,
  .exam-form-side-card,
  .exam-form-help-card {
    padding: 22px;
    border-radius: 24px;
  }

  .exam-form-card-head {
    flex-direction: column;
  }

  .exam-form-title-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .exam-notice-item {
    grid-template-columns: 1fr;
  }

  .exam-notice-date {
    width: 62px;
    height: 62px;
  }

  .exam-notice-action {
    display: none;
  }

  .exam-process-grid,
  .exam-form-sidebar {
    grid-template-columns: 1fr;
  }

  .exam-hero-btn {
    width: 100%;
    max-width: 320px;
  }
}

@media (max-width: 575px) {
  .exam-form-breadcrumb {
    border-radius: 18px;
  }

  .exam-form-hero h1 {
    font-size: 32px;
  }

  .exam-form-card h2 {
    font-size: 27px;
  }

  .exam-form-card h3 {
    font-size: 22px;
  }

  .exam-form-card-icon,
  .side-card-icon,
  .exam-form-help-card > i {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 16px;
    font-size: 22px;
  }

  .exam-date-list li {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .exam-date-list strong {
    text-align: left;
  }

  .exam-hero-stat {
    padding: 14px;
    border-radius: 19px;
  }
}

@media (max-width: 420px) {
  .exam-form-hero {
    padding: 58px 0 50px;
  }

  .exam-form-hero h1 {
    font-size: 29px;
  }

  .exam-form-badge {
    font-size: 12px;
    padding: 8px 14px;
  }

  .exam-form-card,
  .exam-form-side-card,
  .exam-form-help-card {
    padding: 18px;
    border-radius: 20px;
  }

  .exam-process-item {
    padding: 15px;
  }

  .exam-notice-item {
    padding: 15px;
    border-radius: 20px;
  }
}

/* ================= EXAM FORM PAGE END ================= */











/* ================= ONLINE ADMISSION PAGE START ================= */

.online-admission-hero {
  position: relative;
  overflow: hidden;
  padding: 10px 0 78px;
  background:
    radial-gradient(circle at 8% 18%, rgba(23, 63, 115, 0.09), transparent 32%),
    radial-gradient(circle at 92% 84%, rgba(181, 31, 42, 0.065), transparent 31%),
    linear-gradient(135deg, #ffffff 0%, #f6f9fd 100%);
}

.online-admission-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(23, 63, 115, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 63, 115, 0.035) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}

.online-admission-shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.online-admission-shape-1 {
  width: 260px;
  height: 260px;
  left: -110px;
  top: -125px;
  background: rgba(244, 180, 0, 0.10);
}

.online-admission-shape-2 {
  width: 320px;
  height: 320px;
  right: -155px;
  bottom: -160px;
  border: 36px solid rgba(23, 63, 115, 0.06);
}

.online-admission-hero .container {
  position: relative;
  z-index: 2;
}

.online-admission-hero-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 36px;
  align-items: center;
}

.online-admission-badge,
.online-admission-small-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  max-width: max-content;
  padding: 8px 16px;
  margin-bottom: 14px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(234, 241, 250, 0.96), rgba(255, 255, 255, 0.92));
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.14);
  box-shadow: 0 8px 22px rgba(13, 45, 85, 0.055);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 850;
}

.online-admission-badge i,
.online-admission-small-badge i {
  color: var(--secondary);
}

.online-admission-hero-content h1 {
  max-width: 760px;
  margin: 0 0 16px;
  color: var(--primary-dark);
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1.06;
  font-weight: 950;
  letter-spacing: -1.4px;
}

.online-admission-hero-content p {
  max-width: 760px;
  margin: 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.85;
  font-weight: 500;
}

.online-admission-hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.online-admission-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 12px 21px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 16px 34px rgba(13, 45, 85, 0.20);
  transition: all 0.35s ease;
}

.online-admission-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 22px 46px rgba(13, 45, 85, 0.26);
}

.online-admission-btn.light {
  background: #ffffff;
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.16);
  box-shadow: 0 12px 26px rgba(13, 45, 85, 0.08);
}

.online-admission-btn.light:hover {
  color: var(--primary-dark);
  background: var(--soft-blue);
}

.online-admission-breadcrumb {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.07);
}

.online-admission-breadcrumb a,
.online-admission-breadcrumb span {
  color: var(--primary);
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
}

.online-admission-breadcrumb span {
  color: var(--secondary);
}

.online-admission-breadcrumb i {
  color: var(--text);
  font-size: 11px;
}

/* HERO CARD */
.online-admission-hero-card {
  position: relative;
  overflow: hidden;
  padding: 30px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 20% 12%, rgba(244, 180, 0, 0.17), transparent 34%),
    linear-gradient(135deg, rgba(23, 63, 115, 0.97), rgba(13, 45, 85, 0.99));
  color: #ffffff;
  box-shadow: 0 26px 70px rgba(13, 45, 85, 0.24);
}

.online-admission-hero-card::before {
  content: "";
  position: absolute;
  right: -65px;
  bottom: -65px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  border: 28px solid rgba(255, 255, 255, 0.08);
}

.online-admission-hero-card > * {
  position: relative;
  z-index: 2;
}

.hero-card-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 28px;
  margin-bottom: 18px;
}

.online-admission-hero-card h3 {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 26px;
  font-weight: 950;
}

.online-admission-hero-card p {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  line-height: 1.7;
}

.online-admission-hero-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 11px;
}

.online-admission-hero-card li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 13.5px;
  font-weight: 700;
}

.online-admission-hero-card li i {
  color: var(--accent);
}

/* COMMON SECTION */
.online-admission-section,
.online-application-section,
.admission-guidelines-section {
  position: relative;
  padding: 82px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.055), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.online-admission-head {
  max-width: 850px;
  margin: 0 auto 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.online-admission-head h2,
.online-application-content h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: clamp(32px, 4.4vw, 48px);
  line-height: 1.12;
  font-weight: 950;
  letter-spacing: -1px;
}

.online-admission-head p,
.online-application-content p {
  margin: 0;
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.8;
  font-weight: 500;
}

/* OVERVIEW */
.online-admission-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 26px;
  align-items: stretch;
}

.online-admission-info-card {
  position: relative;
  overflow: hidden;
  padding: 30px;
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 255, 0.96));
  border: 1px solid rgba(220, 229, 240, 0.96);
  box-shadow: 0 18px 44px rgba(13, 45, 85, 0.085);
}

.info-card-top {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.info-card-icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  display: grid;
  place-items: center;
  border-radius: 19px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #ffffff;
  font-size: 25px;
}

.info-card-top span {
  display: inline-flex;
  padding: 7px 12px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: rgba(23, 63, 115, 0.08);
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
}

.info-card-top h3 {
  margin: 0;
  color: var(--primary-dark);
  font-size: 28px;
  line-height: 1.2;
  font-weight: 950;
}

.online-admission-info-card > p {
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.75;
  font-weight: 500;
  margin-bottom: 22px;
}

.admission-feature-list {
  display: grid;
  gap: 13px;
}

.admission-feature-item {
  display: flex;
  gap: 13px;
  padding: 15px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(23, 63, 115, 0.10);
}

.admission-feature-item i {
  width: 42px;
  height: 42px;
  min-width: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(23, 63, 115, 0.09);
  color: var(--primary);
}

.admission-feature-item h4 {
  margin: 0 0 5px;
  color: var(--primary-dark);
  font-size: 15px;
  font-weight: 950;
}

.admission-feature-item p {
  margin: 0;
  color: var(--text);
  font-size: 12.8px;
  line-height: 1.55;
}

.online-admission-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.admission-mini-card {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid rgba(23, 63, 115, 0.10);
  box-shadow: 0 16px 38px rgba(13, 45, 85, 0.075);
  transition: all 0.35s ease;
}

.admission-mini-card:hover,
.admission-mini-card.active {
  transform: translateY(-6px);
  border-color: rgba(23, 63, 115, 0.20);
  box-shadow: 0 26px 60px rgba(13, 45, 85, 0.14);
}

.admission-mini-card > i {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #ffffff;
  font-size: 23px;
}

.admission-mini-card:nth-child(2) > i {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.admission-mini-card:nth-child(3) > i {
  background: linear-gradient(135deg, var(--success), #0d6d3a);
}

.admission-mini-card:nth-child(4) > i {
  background: linear-gradient(135deg, var(--accent), #d88d00);
}

.admission-mini-card span {
  display: inline-flex;
  padding: 6px 10px;
  margin-bottom: 9px;
  border-radius: 999px;
  background: rgba(23, 63, 115, 0.08);
  color: var(--primary);
  font-size: 11px;
  font-weight: 900;
}

.admission-mini-card h4 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 17px;
  font-weight: 950;
}

.admission-mini-card p {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.6;
}

/* APPLICATION FORM */
.online-application-section {
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.075), transparent 30%),
    radial-gradient(circle at 92% 88%, rgba(244, 180, 0, 0.055), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f7faff 100%);
}

.online-application-wrap {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 28px;
  align-items: start;
}

.online-application-content {
  position: sticky;
  top: 110px;
}

.application-help-box {
  display: flex;
  gap: 14px;
  margin-top: 24px;
  padding: 18px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(23, 63, 115, 0.10);
  box-shadow: 0 16px 38px rgba(13, 45, 85, 0.075);
}

.application-help-box i {
  color: var(--accent);
  font-size: 24px;
}

.application-help-box h4 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 17px;
  font-weight: 950;
}

.application-help-box p {
  font-size: 13.5px;
  line-height: 1.65;
}

.online-admission-form {
  padding: 30px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid rgba(220, 229, 240, 0.96);
  box-shadow: 0 18px 44px rgba(13, 45, 85, 0.085);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: var(--primary-dark);
  font-size: 13.5px;
  font-weight: 900;
}

.form-group label span {
  color: var(--secondary);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 15px;
  border-radius: 16px;
  border: 1px solid rgba(23, 63, 115, 0.14);
  background: #f8fbff;
  color: var(--primary-dark);
  font-size: 14px;
  font-weight: 600;
  outline: none;
  transition: all 0.3s ease;
}

.form-group textarea {
  resize: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: rgba(23, 63, 115, 0.35);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(23, 63, 115, 0.08);
}

.form-note {
  display: flex;
  gap: 10px;
  padding: 14px;
  margin: 4px 0 18px;
  border-radius: 18px;
  background: rgba(244, 180, 0, 0.12);
  border: 1px solid rgba(244, 180, 0, 0.22);
}

.form-note i {
  color: var(--accent);
  font-size: 19px;
}

.form-note span {
  color: var(--text);
  font-size: 13px;
  line-height: 1.6;
  font-weight: 600;
}

.online-form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 50px;
  padding: 13px 20px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 16px 34px rgba(13, 45, 85, 0.18);
  transition: all 0.35s ease;
}

.online-form-submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 46px rgba(13, 45, 85, 0.25);
}

/* GUIDELINES */
.guidelines-wrapper {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 26px;
  align-items: stretch;
}

.guidelines-card,
.important-date-card,
.admission-note {
  position: relative;
  overflow: hidden;
  padding: 30px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid rgba(220, 229, 240, 0.96);
  box-shadow: 0 18px 44px rgba(13, 45, 85, 0.085);
}

.guidelines-head span {
  display: inline-flex;
  padding: 7px 12px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: rgba(23, 63, 115, 0.08);
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
}

.guidelines-head h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 28px;
  font-weight: 950;
}

.guidelines-head p {
  margin: 0 0 22px;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.7;
}

.documents-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.document-item {
  padding: 20px;
  border-radius: 22px;
  background: #f8fbff;
  border: 1px solid rgba(23, 63, 115, 0.10);
}

.document-item i {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  margin-bottom: 13px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #ffffff;
  font-size: 21px;
}

.document-item h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 15.5px;
  font-weight: 950;
}

.document-item p {
  margin: 0;
  color: var(--text);
  font-size: 12.8px;
  line-height: 1.55;
}

.important-date-card {
  background:
    radial-gradient(circle at 18% 16%, rgba(244, 180, 0, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(23, 63, 115, 0.96), rgba(13, 45, 85, 0.98));
  color: #ffffff;
}

.date-card-icon {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 25px;
  margin-bottom: 18px;
}

.important-date-card h3 {
  margin: 0 0 16px;
  color: #ffffff;
  font-size: 23px;
  font-weight: 950;
}

.important-date-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.important-date-card li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.important-date-card li:last-child {
  border-bottom: 0;
}

.important-date-card span {
  color: rgba(255, 255, 255, 0.76);
  font-size: 13.5px;
  font-weight: 700;
}

.important-date-card strong {
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 950;
  text-align: right;
}

.admission-note {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 26px;
}

.admission-note-icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--accent), #d88d00);
  color: #ffffff;
  font-size: 24px;
}

.admission-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 18px;
  font-weight: 950;
}

.admission-note p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
}

/* RESPONSIVE */
@media (max-width: 1199px) {
  .online-admission-hero-wrap,
  .online-admission-grid,
  .online-application-wrap,
  .guidelines-wrapper {
    grid-template-columns: 1fr;
  }

  .online-application-content {
    position: static;
  }

  .documents-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .online-admission-hero {
    padding: 76px 0 64px;
  }

  .online-admission-section,
  .online-application-section,
  .admission-guidelines-section {
    padding: 66px 0;
  }

  .online-admission-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

@media (max-width: 767px) {
  .online-admission-hero-content h1 {
    font-size: 36px;
  }

  .online-admission-hero-content p {
    font-size: 15px;
  }

  .online-admission-cards,
  .documents-grid {
    grid-template-columns: 1fr;
  }

  .online-admission-hero-card,
  .online-admission-info-card,
  .online-admission-form,
  .guidelines-card,
  .important-date-card,
  .admission-note {
    padding: 22px;
    border-radius: 24px;
  }

  .info-card-top {
    flex-direction: column;
  }

  .admission-note {
    flex-direction: column;
  }
}

@media (max-width: 575px) {
  .online-admission-hero {
    padding: 62px 0 54px;
  }

  .online-admission-section,
  .online-application-section,
  .admission-guidelines-section {
    padding: 52px 0;
  }

  .online-admission-hero-content h1 {
    font-size: 31px;
  }

  .online-admission-head h2,
  .online-application-content h2 {
    font-size: 28px;
  }

  .online-admission-btn {
    width: 100%;
  }

  .online-admission-breadcrumb {
    border-radius: 18px;
  }

  .application-help-box,
  .admission-feature-item {
    flex-direction: column;
  }

  .important-date-card li {
    flex-direction: column;
    gap: 4px;
  }

  .important-date-card strong {
    text-align: left;
  }
}

@media (max-width: 420px) {
  .online-admission-hero-content h1 {
    font-size: 28px;
  }

  .online-admission-head h2,
  .online-application-content h2 {
    font-size: 25px;
  }

  .online-admission-hero-card,
  .online-admission-info-card,
  .online-admission-form,
  .guidelines-card,
  .important-date-card,
  .admission-note {
    padding: 18px;
    border-radius: 20px;
  }

  .admission-mini-card {
    padding: 20px;
  }
}

/* ================= ONLINE ADMISSION PAGE END ================= */








/* ================= ONLINE FEE PAGE START ================= */

.online-fee-hero {
  position: relative;
  overflow: hidden;
  padding: 10px 0 78px;
  background:
    radial-gradient(circle at 8% 18%, rgba(23, 63, 115, 0.09), transparent 32%),
    radial-gradient(circle at 92% 84%, rgba(181, 31, 42, 0.065), transparent 31%),
    linear-gradient(135deg, #ffffff 0%, #f6f9fd 100%);
}

.online-fee-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(23, 63, 115, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 63, 115, 0.035) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}

.online-fee-shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.online-fee-shape-1 {
  width: 260px;
  height: 260px;
  left: -110px;
  top: -125px;
  background: rgba(244, 180, 0, 0.10);
}

.online-fee-shape-2 {
  width: 320px;
  height: 320px;
  right: -155px;
  bottom: -160px;
  border: 36px solid rgba(23, 63, 115, 0.06);
}

.online-fee-hero .container {
  position: relative;
  z-index: 2;
}

.online-fee-hero-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 36px;
  align-items: center;
}

.online-fee-badge,
.online-fee-small-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  max-width: max-content;
  padding: 8px 16px;
  margin-bottom: 14px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(234, 241, 250, 0.96), rgba(255, 255, 255, 0.92));
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.14);
  box-shadow: 0 8px 22px rgba(13, 45, 85, 0.055);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 850;
}

.online-fee-badge i,
.online-fee-small-badge i {
  color: var(--secondary);
}

.online-fee-hero-content h1 {
  max-width: 760px;
  margin: 0 0 16px;
  color: var(--primary-dark);
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1.06;
  font-weight: 950;
  letter-spacing: -1.4px;
}

.online-fee-hero-content p {
  max-width: 760px;
  margin: 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.85;
  font-weight: 500;
}

.online-fee-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.online-fee-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 12px 21px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 16px 34px rgba(13, 45, 85, 0.20);
  transition: all 0.35s ease;
}

.online-fee-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 22px 46px rgba(13, 45, 85, 0.26);
}

.online-fee-btn.light {
  background: #ffffff;
  color: var(--primary);
  border: 1px solid rgba(23, 63, 115, 0.16);
  box-shadow: 0 12px 26px rgba(13, 45, 85, 0.08);
}

.online-fee-btn.light:hover {
  color: var(--primary-dark);
  background: var(--soft-blue);
}

.online-fee-breadcrumb {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(23, 63, 115, 0.12);
  box-shadow: 0 10px 24px rgba(13, 45, 85, 0.07);
}

.online-fee-breadcrumb a,
.online-fee-breadcrumb span {
  color: var(--primary);
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
}

.online-fee-breadcrumb span {
  color: var(--secondary);
}

.online-fee-breadcrumb i {
  color: var(--text);
  font-size: 11px;
}

/* HERO CARD */
.online-fee-hero-card {
  position: relative;
  overflow: hidden;
  padding: 30px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 20% 12%, rgba(244, 180, 0, 0.17), transparent 34%),
    linear-gradient(135deg, rgba(23, 63, 115, 0.97), rgba(13, 45, 85, 0.99));
  color: #ffffff;
  box-shadow: 0 26px 70px rgba(13, 45, 85, 0.24);
}

.online-fee-hero-card::before {
  content: "";
  position: absolute;
  right: -65px;
  bottom: -65px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  border: 28px solid rgba(255, 255, 255, 0.08);
}

.online-fee-hero-card > * {
  position: relative;
  z-index: 2;
}

.fee-hero-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 28px;
  margin-bottom: 18px;
}

.online-fee-hero-card h3 {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 26px;
  font-weight: 950;
}

.online-fee-hero-card p {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  line-height: 1.7;
}

.online-fee-hero-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 11px;
}

.online-fee-hero-card li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 13.5px;
  font-weight: 700;
}

.online-fee-hero-card li i {
  color: var(--accent);
}

/* COMMON SECTIONS */
.online-fee-section,
.online-fee-form-section,
.fee-guidelines-section {
  position: relative;
  padding: 82px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.055), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.online-fee-head {
  max-width: 850px;
  margin: 0 auto 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.online-fee-head h2,
.online-fee-form-content h2 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: clamp(32px, 4.4vw, 48px);
  line-height: 1.12;
  font-weight: 950;
  letter-spacing: -1px;
}

.online-fee-head p,
.online-fee-form-content p {
  margin: 0;
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.8;
  font-weight: 500;
}

/* OVERVIEW */
.online-fee-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 26px;
  align-items: stretch;
}

.online-fee-info-card {
  position: relative;
  overflow: hidden;
  padding: 30px;
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 255, 0.96));
  border: 1px solid rgba(220, 229, 240, 0.96);
  box-shadow: 0 18px 44px rgba(13, 45, 85, 0.085);
}

.fee-info-top {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.fee-info-icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  display: grid;
  place-items: center;
  border-radius: 19px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #ffffff;
  font-size: 25px;
}

.fee-info-top span {
  display: inline-flex;
  padding: 7px 12px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: rgba(23, 63, 115, 0.08);
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
}

.fee-info-top h3 {
  margin: 0;
  color: var(--primary-dark);
  font-size: 28px;
  line-height: 1.2;
  font-weight: 950;
}

.online-fee-info-card > p {
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.75;
  font-weight: 500;
  margin-bottom: 22px;
}

.fee-feature-list {
  display: grid;
  gap: 13px;
}

.fee-feature-item {
  display: flex;
  gap: 13px;
  padding: 15px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(23, 63, 115, 0.10);
}

.fee-feature-item i {
  width: 42px;
  height: 42px;
  min-width: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(23, 63, 115, 0.09);
  color: var(--primary);
}

.fee-feature-item h4 {
  margin: 0 0 5px;
  color: var(--primary-dark);
  font-size: 15px;
  font-weight: 950;
}

.fee-feature-item p {
  margin: 0;
  color: var(--text);
  font-size: 12.8px;
  line-height: 1.55;
}

.online-fee-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.fee-mini-card {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid rgba(23, 63, 115, 0.10);
  box-shadow: 0 16px 38px rgba(13, 45, 85, 0.075);
  transition: all 0.35s ease;
}

.fee-mini-card:hover,
.fee-mini-card.active {
  transform: translateY(-6px);
  border-color: rgba(23, 63, 115, 0.20);
  box-shadow: 0 26px 60px rgba(13, 45, 85, 0.14);
}

.fee-mini-card > i {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #ffffff;
  font-size: 23px;
}

.fee-mini-card:nth-child(2) > i {
  background: linear-gradient(135deg, var(--secondary), #8f1520);
}

.fee-mini-card:nth-child(3) > i {
  background: linear-gradient(135deg, var(--success), #0d6d3a);
}

.fee-mini-card:nth-child(4) > i {
  background: linear-gradient(135deg, var(--accent), #d88d00);
}

.fee-mini-card span {
  display: inline-flex;
  padding: 6px 10px;
  margin-bottom: 9px;
  border-radius: 999px;
  background: rgba(23, 63, 115, 0.08);
  color: var(--primary);
  font-size: 11px;
  font-weight: 900;
}

.fee-mini-card h4 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 17px;
  font-weight: 950;
}

.fee-mini-card p {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.6;
}

/* FORM SECTION */
.online-fee-form-section {
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 63, 115, 0.075), transparent 30%),
    radial-gradient(circle at 92% 88%, rgba(244, 180, 0, 0.055), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f7faff 100%);
}

.online-fee-form-wrap {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 28px;
  align-items: start;
}

.online-fee-form-content {
  position: sticky;
  top: 110px;
}

.fee-help-box {
  display: flex;
  gap: 14px;
  margin-top: 24px;
  padding: 18px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(23, 63, 115, 0.10);
  box-shadow: 0 16px 38px rgba(13, 45, 85, 0.075);
}

.fee-help-box i {
  color: var(--accent);
  font-size: 24px;
}

.fee-help-box h4 {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 17px;
  font-weight: 950;
}

.fee-help-box p {
  font-size: 13.5px;
  line-height: 1.65;
}

.online-fee-form {
  padding: 30px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid rgba(220, 229, 240, 0.96);
  box-shadow: 0 18px 44px rgba(13, 45, 85, 0.085);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: var(--primary-dark);
  font-size: 13.5px;
  font-weight: 900;
}

.form-group label span {
  color: var(--secondary);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 15px;
  border-radius: 16px;
  border: 1px solid rgba(23, 63, 115, 0.14);
  background: #f8fbff;
  color: var(--primary-dark);
  font-size: 14px;
  font-weight: 600;
  outline: none;
  transition: all 0.3s ease;
}

.form-group textarea {
  resize: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: rgba(23, 63, 115, 0.35);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(23, 63, 115, 0.08);
}

.form-note {
  display: flex;
  gap: 10px;
  padding: 14px;
  margin: 4px 0 18px;
  border-radius: 18px;
  background: rgba(244, 180, 0, 0.12);
  border: 1px solid rgba(244, 180, 0, 0.22);
}

.form-note i {
  color: var(--accent);
  font-size: 19px;
}

.form-note span {
  color: var(--text);
  font-size: 13px;
  line-height: 1.6;
  font-weight: 600;
}

.online-fee-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 50px;
  padding: 13px 20px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 16px 34px rgba(13, 45, 85, 0.18);
  transition: all 0.35s ease;
}

.online-fee-submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 46px rgba(13, 45, 85, 0.25);
}

/* GUIDELINES */
.fee-guidelines-wrapper {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 26px;
  align-items: stretch;
}

.fee-guidelines-card,
.fee-status-card,
.online-fee-note {
  position: relative;
  overflow: hidden;
  padding: 30px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid rgba(220, 229, 240, 0.96);
  box-shadow: 0 18px 44px rgba(13, 45, 85, 0.085);
}

.fee-guidelines-head span {
  display: inline-flex;
  padding: 7px 12px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: rgba(23, 63, 115, 0.08);
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
}

.fee-guidelines-head h3 {
  margin: 0 0 9px;
  color: var(--primary-dark);
  font-size: 28px;
  font-weight: 950;
}

.fee-guidelines-head p {
  margin: 0 0 22px;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.7;
}

.fee-documents-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.fee-document-item {
  padding: 20px;
  border-radius: 22px;
  background: #f8fbff;
  border: 1px solid rgba(23, 63, 115, 0.10);
}

.fee-document-item i {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  margin-bottom: 13px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #ffffff;
  font-size: 21px;
}

.fee-document-item h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 15.5px;
  font-weight: 950;
}

.fee-document-item p {
  margin: 0;
  color: var(--text);
  font-size: 12.8px;
  line-height: 1.55;
}

.fee-status-card {
  background:
    radial-gradient(circle at 18% 16%, rgba(244, 180, 0, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(23, 63, 115, 0.96), rgba(13, 45, 85, 0.98));
  color: #ffffff;
}

.fee-status-icon {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 25px;
  margin-bottom: 18px;
}

.fee-status-card h3 {
  margin: 0 0 16px;
  color: #ffffff;
  font-size: 23px;
  font-weight: 950;
}

.fee-status-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fee-status-card li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.fee-status-card li:last-child {
  border-bottom: 0;
}

.fee-status-card span {
  color: rgba(255, 255, 255, 0.76);
  font-size: 13.5px;
  font-weight: 700;
}

.fee-status-card strong {
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 950;
  text-align: right;
}

.online-fee-note {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 26px;
}

.online-fee-note-icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--accent), #d88d00);
  color: #ffffff;
  font-size: 24px;
}

.online-fee-note h4 {
  margin: 0 0 7px;
  color: var(--primary-dark);
  font-size: 18px;
  font-weight: 950;
}

.online-fee-note p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
}

/* RESPONSIVE */
@media (max-width: 1199px) {
  .online-fee-hero-wrap,
  .online-fee-grid,
  .online-fee-form-wrap,
  .fee-guidelines-wrapper {
    grid-template-columns: 1fr;
  }

  .online-fee-form-content {
    position: static;
  }

  .fee-documents-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .online-fee-hero {
    padding: 76px 0 64px;
  }

  .online-fee-section,
  .online-fee-form-section,
  .fee-guidelines-section {
    padding: 66px 0;
  }

  .online-fee-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

@media (max-width: 767px) {
  .online-fee-hero-content h1 {
    font-size: 36px;
  }

  .online-fee-hero-content p {
    font-size: 15px;
  }

  .online-fee-cards,
  .fee-documents-grid {
    grid-template-columns: 1fr;
  }

  .online-fee-hero-card,
  .online-fee-info-card,
  .online-fee-form,
  .fee-guidelines-card,
  .fee-status-card,
  .online-fee-note {
    padding: 22px;
    border-radius: 24px;
  }

  .fee-info-top {
    flex-direction: column;
  }

  .online-fee-note {
    flex-direction: column;
  }
}

@media (max-width: 575px) {
  .online-fee-hero {
    padding: 62px 0 54px;
  }

  .online-fee-section,
  .online-fee-form-section,
  .fee-guidelines-section {
    padding: 52px 0;
  }

  .online-fee-hero-content h1 {
    font-size: 31px;
  }

  .online-fee-head h2,
  .online-fee-form-content h2 {
    font-size: 28px;
  }

  .online-fee-btn {
    width: 100%;
  }

  .online-fee-breadcrumb {
    border-radius: 18px;
  }

  .fee-help-box,
  .fee-feature-item {
    flex-direction: column;
  }

  .fee-status-card li {
    flex-direction: column;
    gap: 4px;
  }

  .fee-status-card strong {
    text-align: left;
  }
}

@media (max-width: 420px) {
  .online-fee-hero-content h1 {
    font-size: 28px;
  }

  .online-fee-head h2,
  .online-fee-form-content h2 {
    font-size: 25px;
  }

  .online-fee-hero-card,
  .online-fee-info-card,
  .online-fee-form,
  .fee-guidelines-card,
  .fee-status-card,
  .online-fee-note {
    padding: 18px;
    border-radius: 20px;
  }

  .fee-mini-card {
    padding: 20px;
  }
}

/* ================= ONLINE FEE PAGE END ================= */