/* ══ TOKENS ══ */
      :root {
        --blue: #0b4ba8;
        --blue-dark: #083a82;
        --blue-deeper: #062d66;
        --blue-light: #1a64c8;
        --gold: #f5a623;
        --gold-dark: #d4880a;
        --off-white: #f0f4fc;
        --text-dark: #0d1b36;
        --text-mid: #2c3e6b;
        --border: #c8d6f0;
        --shadow-sm: 0 2px 12px rgba(11, 75, 168, 0.1);
        --shadow-md: 0 6px 28px rgba(11, 75, 168, 0.18);
        --radius: 10px;
        --ease: 0.32s cubic-bezier(0.4, 0, 0.2, 1);
      }
      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        font-family: "Inter", sans-serif;
        font-size: 1rem;
        color: var(--text-dark);
        background: #fff;
        overflow-x: hidden;
      }

      /* ══ REVEAL ANIMATIONS ══ */
      .reveal {
        opacity: 0;
        transform: translateY(36px);
        transition:
          opacity 0.65s ease,
          transform 0.65s ease;
      }
      .reveal-left {
        opacity: 0;
        transform: translateX(-40px);
        transition:
          opacity 0.6s ease,
          transform 0.6s ease;
      }
      .reveal-right {
        opacity: 0;
        transform: translateX(40px);
        transition:
          opacity 0.6s ease,
          transform 0.6s ease;
      }
      .reveal.visible,
      .reveal-left.visible,
      .reveal-right.visible {
        opacity: 1;
        transform: translate(0);
      }

      /* ══ HEADER ══ */
      .site-header {
        background: #fff;
        padding: 16px 0 12px;
        border-bottom: 4px solid var(--blue);
        box-shadow: 0 2px 16px rgba(11, 75, 168, 0.08);
        position: relative;
        z-index: 100;
      }
      /* Logos — transparent, no bg at all */
      .logo-davv,
      .logo-dept {
        width: 130px;
        height: 130px;
        object-fit: contain;
        background: transparent;
        flex-shrink: 0;
        transition:
          transform var(--ease),
          filter var(--ease);
        filter: drop-shadow(0 4px 12px rgba(11, 75, 168, 0.28));
      }
      .logo-davv:hover,
      .logo-dept:hover {
        transform: scale(1.1) rotate(-2deg);
        filter: drop-shadow(0 8px 20px rgba(11, 75, 168, 0.45));
      }

      .header-center h1 {
        font-family: "Merriweather", serif;
        font-size: clamp(1.3rem, 3vw, 2.1rem);
        font-weight: 900;
        color: var(--blue);
        letter-spacing: -0.01em;
        line-height: 1.15;
      }
      .header-center .sub {
        font-size: clamp(0.88rem, 1.6vw, 1.05rem);
        color: var(--text-mid);
        margin: 5px 0 0;
        font-weight: 500;
      }
      .dept-bar {
        display: inline-block;
        margin-top: 9px;
        font-size: clamp(0.95rem, 1.8vw, 1.15rem);
        font-weight: 700;
        letter-spacing: 0.06em;
        color: var(--blue-dark);
        text-transform: uppercase;
        border-top: 2px solid var(--border);
        padding-top: 7px;
      }

      /* ══ NAVBAR ══ */
      .main-nav {
        background: var(--blue);
        box-shadow: 0 3px 18px rgba(11, 75, 168, 0.38);
        position: sticky;
        top: 0;
        z-index: 999;
      }
      .main-nav .navbar-nav .nav-link {
        color: #fff !important;
        font-weight: 700;
        font-size: 0.93rem;
        letter-spacing: 0.05em;
        padding: 14px 17px;
        text-transform: uppercase;
        position: relative;
        transition:
          color var(--ease),
          background var(--ease);
      }
      /* Gold underline animation on hover */
      .main-nav .navbar-nav .nav-link::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        right: 50%;
        height: 3px;
        background: var(--gold);
        border-radius: 2px 2px 0 0;
        transition:
          left var(--ease),
          right var(--ease);
      }
      .main-nav .navbar-nav .nav-link:hover::before,
      .main-nav .navbar-nav .nav-link.active::before {
        left: 0;
        right: 0;
      }
      .main-nav .navbar-nav .nav-link:hover,
      .main-nav .navbar-nav .nav-link.active {
        color: var(--gold) !important;
        background: rgba(0, 0, 0, 0.18);
      }
      /* Dropdown caret — always white */
      .main-nav .navbar-nav .dropdown-toggle.nav-link::after {
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: 0.4em;
        vertical-align: 0.22em;
        border-top: 0.4em solid #fff;
        border-right: 0.4em solid transparent;
        border-left: 0.4em solid transparent;
        border-bottom: 0;
        background: none;
        content: "";
        transition: transform var(--ease);
        position: static;
      }
      .main-nav .navbar-nav .dropdown-toggle.nav-link:hover::after,
      .main-nav .navbar-nav .show > .dropdown-toggle.nav-link::after {
        transform: rotate(180deg);
      }
      /* Open dropdown on hover (desktop) */
      @media (min-width: 992px) {
        .main-nav .nav-item.dropdown:hover > .dropdown-menu {
          display: block;
        }
      }
      /* Dropdown menu — WHITE background */
      .main-nav .dropdown-menu {
        background: #fff;
        border: none;
        border-radius: 0 0 var(--radius) var(--radius);
        border-top: 3px solid var(--gold);
        box-shadow: 0 8px 32px rgba(11, 75, 168, 0.2);
        animation: dropFade 0.22s ease;
        margin-top: 0;
        min-width: 190px;
      }
      @keyframes dropFade {
        from {
          opacity: 0;
          transform: translateY(-8px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .main-nav .dropdown-item {
        color: var(--text-dark);
        font-size: 0.88rem;
        padding: 9px 18px;
        font-weight: 500;
        border-left: 3px solid transparent;
        transition:
          background var(--ease),
          color var(--ease),
          border-color var(--ease),
          padding-left var(--ease);
      }
      .main-nav .dropdown-item:hover {
        background: var(--off-white);
        color: var(--blue);
        border-left-color: var(--blue);
        padding-left: 22px;
      }
      .main-nav .navbar-toggler {
        border-color: rgba(255, 255, 255, 0.5);
        padding: 6px 10px;
      }
      .main-nav .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
      }

      /* ══ CAROUSEL ══ */
      .hero-carousel {
        position: relative;
      }
      .hero-carousel .carousel-item {
        height: 340px;
        overflow: hidden;
      }
      .hero-carousel .carousel-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: transform 8s ease;
      }
      .hero-carousel .carousel-item.active img {
        transform: scale(1.06);
      }
      .hero-carousel .carousel-item::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to top,
          rgba(6, 45, 102, 0.7) 0%,
          rgba(6, 45, 102, 0.12) 55%,
          transparent 100%
        );
      }
      .hero-carousel .carousel-caption {
        z-index: 2;
        bottom: 26px;
        left: 50%;
        transform: translateX(-50%);
        width: max-content;
        max-width: 92%;
        background: rgba(11, 75, 168, 0.52);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: var(--radius);
        padding: 10px 28px;
      }
      .hero-carousel .carousel-caption h5 {
        font-family: "Merriweather", serif;
        font-size: 1.15rem;
        font-weight: 700;
        color: #fff;
        letter-spacing: 0.02em;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
        margin: 0;
      }
      .hero-carousel .carousel-control-prev-icon,
      .hero-carousel .carousel-control-next-icon {
        background-color: var(--blue);
        border-radius: 50%;
        padding: 20px;
        background-size: 48%;
        box-shadow: var(--shadow-sm);
        transition:
          background-color var(--ease),
          transform var(--ease);
      }
      .hero-carousel .carousel-control-prev:hover .carousel-control-prev-icon,
      .hero-carousel .carousel-control-next:hover .carousel-control-next-icon {
        background-color: var(--gold-dark);
        transform: scale(1.12);
      }
      .hero-carousel .carousel-indicators [data-bs-target] {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.55);
        border: none;
        transition:
          background-color var(--ease),
          transform var(--ease);
      }
      .hero-carousel .carousel-indicators .active {
        background-color: var(--gold);
        transform: scale(1.35);
      }

      /* ══ TICKER ══ */
      .ticker-bar {
        background: linear-gradient(90deg, var(--blue-deeper), var(--blue));
        color: #fff;
        padding: 10px 0;
        display: flex;
        align-items: center;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(11, 75, 168, 0.22);
      }
      .ticker-label {
        background: var(--gold);
        color: var(--blue-deeper);
        font-weight: 700;
        font-size: 0.92rem;
        padding: 5px 20px;
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 7px;
        flex-shrink: 0;
        letter-spacing: 0.04em;
      }
      .ticker-wrap {
        overflow: hidden;
        flex: 1;
        margin: 0 14px;
      }
      .ticker-text {
        display: inline-block;
        white-space: nowrap;
        font-size: 0.93rem;
        font-weight: 500;
        letter-spacing: 0.01em;
        animation: ticker-scroll 35s linear infinite;
      }
      @keyframes ticker-scroll {
        0% {
          transform: translateX(100vw);
        }
        100% {
          transform: translateX(-100%);
        }
      }
      .ticker-controls {
        display: flex;
        gap: 6px;
        padding-right: 14px;
        flex-shrink: 0;
      }
      .ticker-controls button {
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.35);
        color: #fff;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        font-size: 0.78rem;
        cursor: pointer;
        transition:
          background var(--ease),
          color var(--ease);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .ticker-controls button:hover {
        background: var(--gold);
        color: var(--blue-deeper);
        border-color: var(--gold);
      }

      /* ══ SECTION TITLE ══ */
      .section-title {
        font-family: "Merriweather", serif;
        font-size: 1.38rem;
        font-weight: 700;
        color: var(--blue);
        position: relative;
        padding-bottom: 10px;
        margin-bottom: 20px;
        display: inline-block;
      }
      .section-title::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg, var(--gold), var(--gold-dark));
        border-radius: 2px;
      }

      /* ══ CARD PANEL ══ */
      .card-panel {
        background: #fff;
        border: 1.5px solid var(--border);
        border-radius: var(--radius);
        padding: 26px;
        height: 100%;
        box-shadow: var(--shadow-sm);
        transition:
          box-shadow var(--ease),
          transform var(--ease),
          border-color var(--ease);
      }
      .card-panel:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-3px);
        border-color: var(--blue-light);
      }

      /* ══ HOD ══ */
      .hod-photo-placeholder {
        width: 115px;
        height: 135px;
        background: linear-gradient(135deg, var(--off-white), var(--border));
        border: 3px solid var(--blue);
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--blue);
        font-size: 2.8rem;
        flex-shrink: 0;
      }
      .hod-name {
        color: var(--blue);
        font-weight: 700;
        font-size: 0.93rem;
        text-align: center;
        margin-top: 8px;
        line-height: 1.4;
      }
      .hod-body {
        font-size: 0.97rem;
        line-height: 1.78;
        color: var(--text-mid);
        text-align: justify;
      }

      /* ══ PLACEMENTS ══ */
      .view-all-btn {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--blue);
        border: 2px solid var(--blue);
        padding: 4px 16px;
        border-radius: 20px;
        text-decoration: none;
        transition: all var(--ease);
      }
      .view-all-btn:hover {
        background: var(--blue);
        color: #fff;
      }
      .student-card {
        text-align: center;
      }
      .student-photo-placeholder {
        width: 82px;
        height: 90px;
        background: linear-gradient(135deg, var(--off-white), var(--border));
        border-radius: 6px;
        border: 2px solid var(--border);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--blue);
        font-size: 1.8rem;
        transition:
          border-color var(--ease),
          transform var(--ease);
      }
      .student-card:hover .student-photo-placeholder {
        border-color: var(--blue);
        transform: scale(1.06);
      }
      .student-name {
        font-size: 0.83rem;
        color: var(--blue-dark);
        font-weight: 600;
        margin-top: 6px;
      }

      /* ══ RECRUITERS ══ */
      .recruiters-section {
        background: var(--off-white);
        padding: 46px 0;
        border-top: 2px solid var(--border);
        border-bottom: 2px solid var(--border);
      }
      /* Marquee track */
      .recruiter-track-wrap {
        overflow: hidden;
        position: relative;
        width: 100%;
        padding: 10px 0;
      }
      .recruiter-track-wrap::before,
      .recruiter-track-wrap::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 80px;
        z-index: 2;
        pointer-events: none;
      }
      .recruiter-track-wrap::before {
        left: 0;
        background: linear-gradient(to right, var(--off-white), transparent);
      }
      .recruiter-track-wrap::after {
        right: 0;
        background: linear-gradient(to left, var(--off-white), transparent);
      }
      .recruiter-track {
        display: flex;
        align-items: center;
        gap: 60px;
        width: max-content;
        animation: marquee-scroll 18s linear infinite;
      }
      .recruiter-track.paused {
        animation-play-state: paused;
      }
      @keyframes marquee-scroll {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(-50%);
        }
      }
      .recruiter-item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: transform var(--ease);
      }
      .recruiter-item:hover {
        transform: scale(1.12);
      }
      .recruiter-name {
        font-size: 2rem;
        font-weight: 900;
        letter-spacing: -0.03em;
      }
      .r-infosys {
        color: #007cc3;
      }
      .r-cognizant {
        color: #1a6dc6;
      }
      .r-factset {
        color: #e4202b;
      }
      .r-wipro {
        color: #8a328c;
      }
      /* Slider controls */
      .rec-controls {
        display: flex;
        gap: 8px;
        justify-content: center;
        margin-top: 16px;
      }
      .rec-controls button {
        background: var(--blue);
        border: none;
        color: #fff;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        font-size: 0.82rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition:
          background var(--ease),
          transform var(--ease);
        box-shadow: var(--shadow-sm);
      }
      .rec-controls button:hover {
        background: var(--gold-dark);
        transform: scale(1.1);
      }

      /* ══ LINK CARDS ══ */
      .links-section {
        padding: 42px 0;
      }
      .link-card {
        background: #fff;
        border: 1.5px solid var(--border);
        border-radius: var(--radius);
        padding: 26px;
        height: 100%;
        box-shadow: var(--shadow-sm);
        transition:
          box-shadow var(--ease),
          transform var(--ease);
      }
      .link-card:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-3px);
      }
      .link-icon-wrap {
        width: 48px;
        height: 48px;
        background: var(--blue);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 1.15rem;
        flex-shrink: 0;
        transition:
          background var(--ease),
          transform var(--ease);
      }
      .link-card:hover .link-icon-wrap {
        background: var(--gold-dark);
        transform: rotate(10deg) scale(1.1);
      }
      .link-card h5 {
        font-family: "Merriweather", serif;
        font-size: 1.1rem;
        color: var(--blue);
        margin-bottom: 14px;
        padding-bottom: 8px;
        border-bottom: 2px solid var(--gold);
      }
      .link-card ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }
      .link-card ul li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #eef1f8;
        padding: 10px 4px;
        font-size: 0.93rem;
        color: var(--text-mid);
        cursor: pointer;
        text-align: left;
        transition:
          color var(--ease),
          padding-left var(--ease);
      }
      .link-card ul li:last-child {
        border-bottom: none;
      }
      .link-card ul li:hover {
        color: var(--blue);
        padding-left: 5px;
      }
      .link-card ul li::before {
        content: "▶";
        color: var(--gold-dark);
        font-size: 0.55rem;
        margin-right: 10px;
        flex-shrink: 0;
      }

      /* ══ FOOTER ══ */
      .site-footer {
        background: linear-gradient(
          160deg,
          var(--blue-deeper) 0%,
          var(--blue-dark) 100%
        );
        color: #c8d6f0;
        padding: 50px 0 0;
      }
      .site-footer h6 {
        color: #fff;
        font-family: "Merriweather", serif;
        font-size: 1rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        margin-bottom: 18px;
        padding-bottom: 8px;
        border-bottom: 2px solid var(--gold);
        display: inline-block;
      }
      .site-footer p {
        font-size: 0.91rem;
        line-height: 1.75;
        color: #aac0df;
      }
      .site-footer ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }
      .site-footer ul li {
        margin-bottom: 8px;
      }
      .site-footer ul li a {
        color: #aac0df;
        text-decoration: none;
        font-size: 0.89rem;
        transition:
          color var(--ease),
          padding-left var(--ease);
        display: inline-block;
      }
      .site-footer ul li a::before {
        content: "▶ ";
        font-size: 0.5rem;
        color: var(--gold);
        margin-right: 4px;
      }
      .site-footer ul li a:hover {
        color: var(--gold);
        padding-left: 5px;
      }
      .footer-contact {
        list-style: none;
        padding: 0;
        margin: 0;
      }
      .footer-contact li {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        margin-bottom: 12px;
        font-size: 0.89rem;
        color: #aac0df;
      }
      .footer-contact li i {
        color: var(--gold);
        margin-top: 2px;
        flex-shrink: 0;
        font-size: 1rem;
      }
      .footer-social {
        display: flex;
        gap: 10px;
        margin-top: 18px;
        flex-wrap: wrap;
      }
      .footer-social a {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.05rem;
        color: #fff !important;
        transition:
          transform var(--ease),
          box-shadow var(--ease),
          opacity var(--ease);
      }
      .footer-social a i {
        color: #fff !important;
      }
      .footer-social a:hover {
        transform: translateY(-4px) scale(1.12);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
      }
      .fs-fb {
        background: #1877f2;
      }
      .fs-ig {
        background: linear-gradient(
          45deg,
          #f09433,
          #e6683c,
          #dc2743,
          #cc2366,
          #bc1888
        );
      }
      .fs-tw {
        background: #1da1f2;
      }
      .fs-yt {
        background: #ff0000;
      }
      .fs-wa {
        background: #25d366;
      }
      .footer-divider {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin-top: 38px;
      }
      .footer-bottom {
        background: rgba(0, 0, 0, 0.25);
        padding: 14px 0;
        text-align: center;
        font-size: 0.82rem;
        color: #7a96c0;
      }

      /* ══ PULSE ══ */
      @keyframes pulse-ring {
        0% {
          box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.55);
        }
        70% {
          box-shadow: 0 0 0 10px rgba(245, 166, 35, 0);
        }
        100% {
          box-shadow: 0 0 0 0 rgba(245, 166, 35, 0);
        }
      }
      .pulse {
        border-radius: 50%;
        animation: pulse-ring 2.4s ease infinite;
      }

      /* ══ RESPONSIVE ══ */
      @media (max-width: 767px) {
        .hero-carousel .carousel-item {
          height: 230px;
        }
        .logo-davv,
        .logo-dept {
          width: 80px;
          height: 80px;
        }
        .header-center h1 {
          font-size: 1.05rem;
        }
      }
      @media (max-width: 575px) {
        .logo-davv,
        .logo-dept {
          width: 62px;
          height: 62px;
        }
      }
    .student-photo-placeholder {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  margin: auto;
}

.student-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



/*  About page*/
  
   
   
   
    /* ── PAGE HERO BANNER ── */
    .page-hero{
      background: linear-gradient(135deg, var(--blue-deeper) 0%, var(--blue) 60%, var(--blue-light) 100%);
      padding: 70px 0 55px;
      position: relative; overflow: hidden;
    }
    .page-hero::before{
      content:'';position:absolute;inset:0;
      background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }
    .page-hero .breadcrumb{background:transparent;margin:0;padding:0;}
    .page-hero .breadcrumb-item{color:rgba(255,255,255,.7);font-size:.85rem;}
    .page-hero .breadcrumb-item a{color:var(--gold);text-decoration:none;}
    .page-hero .breadcrumb-item.active{color:#fff;}
    .page-hero .breadcrumb-item+.breadcrumb-item::before{color:rgba(255,255,255,.5);}
    .page-hero h2{font-family:'Merriweather',serif;font-size:clamp(1.8rem,4vw,3rem);font-weight:900;color:#fff;margin-top:10px;line-height:1.2;}
    .page-hero p{color:rgba(255,255,255,.82);font-size:1.05rem;margin-top:10px;max-width:600px;}

    /* ── SECTION TITLE ── */
    .section-title{font-family:'Merriweather',serif;font-size:1.5rem;font-weight:700;color:var(--blue);position:relative;padding-bottom:10px;margin-bottom:24px;display:inline-block;}
    .section-title::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-dark));border-radius:2px;}

    /* ── ABOUT INTRO ── */
    .about-intro{padding:70px 0;background:#fff;}
    .about-intro .highlight-box{
      background:linear-gradient(135deg,var(--blue),var(--blue-light));
      border-radius:var(--radius);padding:36px 32px;color:#fff;
      box-shadow:var(--shadow-md);
    }
    .about-intro .highlight-box h3{font-family:'Merriweather',serif;font-size:1.6rem;font-weight:900;color:#fff;}
    .about-intro .highlight-box p{color:rgba(255,255,255,.88);font-size:1rem;line-height:1.75;margin-top:12px;}
    .about-intro .stat-chip{
      display:inline-flex;align-items:center;gap:8px;
      background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,.3);
      border-radius:30px;padding:6px 16px;font-size:.88rem;font-weight:600;
      color:#fff;margin:6px 4px 0;
    }
    .about-text{font-size:1rem;line-height:1.82;color:var(--text-mid);}

    /* ── STATS COUNTER ── */
    .stats-section{background:var(--blue);padding:60px 0;}
    .stat-card{text-align:center;padding:20px;}
    .stat-number{font-family:'Merriweather',serif;font-size:3rem;font-weight:900;color:#fff;line-height:1;}
    .stat-suffix{font-size:1.8rem;color:var(--gold);}
    .stat-label{font-size:.92rem;color:rgba(255,255,255,.75);margin-top:6px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;}
    .stat-icon{font-size:2rem;color:var(--gold);margin-bottom:8px;}

    /* ── VISION MISSION ── */
    .vm-section{padding:70px 0;background:var(--off-white);}
    .vm-card{
      background:#fff;border-radius:var(--radius);padding:34px 30px;height:100%;
      border-top:4px solid var(--blue);
      box-shadow:var(--shadow-sm);
      transition:transform var(--ease),box-shadow var(--ease);
      position:relative; overflow:hidden;
    }
    .vm-card::before{
      content:'';position:absolute;top:-40px;right:-40px;
      width:100px;height:100px;border-radius:50%;
      background:rgba(11,75,168,0.06);
    }
    .vm-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
    .vm-card .vm-icon{width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,var(--blue),var(--blue-light));display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:#fff;margin-bottom:16px;}
    .vm-card h4{font-family:'Merriweather',serif;font-size:1.2rem;color:var(--blue);font-weight:700;margin-bottom:12px;}
    .vm-card p{font-size:.95rem;line-height:1.78;color:var(--text-mid);}

    /* ── PROGRAMS ── */
    .programs-section{padding:70px 0;background:#fff;}
    .program-card{
      background:#fff;border:1.5px solid var(--border);border-radius:var(--radius);padding:28px 24px;
      height:100%;box-shadow:var(--shadow-sm);
      border-left:5px solid var(--blue);
      transition:transform var(--ease),box-shadow var(--ease),border-left-color var(--ease);
    }
    .program-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-left-color:var(--gold);}
    .program-card .badge-year{background:var(--off-white);color:var(--blue);font-size:.75rem;font-weight:700;padding:3px 10px;border-radius:20px;display:inline-block;margin-bottom:10px;}
    .program-card h5{font-family:'Merriweather',serif;font-size:1.05rem;color:var(--blue);font-weight:700;margin-bottom:8px;}
    .program-card p{font-size:.88rem;color:var(--text-mid);line-height:1.65;}
    .program-card .detail-row{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--text-mid);margin-top:8px;}
    .program-card .detail-row i{color:var(--gold);}

    /* ── LEADERSHIP ── */
    .leadership-section{padding:70px 0;background:var(--off-white);}
    .leader-card{
      background:#fff;border-radius:var(--radius);padding:28px 24px;text-align:center;
      box-shadow:var(--shadow-sm);border-top:3px solid var(--gold);
      transition:transform var(--ease),box-shadow var(--ease);
    }
    .leader-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
    .leader-avatar{width:90px;height:90px;background:linear-gradient(135deg,var(--off-white),var(--border));border-radius:50%;border:3px solid var(--blue);display:flex;align-items:center;justify-content:center;font-size:2.4rem;color:var(--blue);margin:0 auto 14px;}
    .leader-name{font-family:'Merriweather',serif;font-size:1rem;font-weight:700;color:var(--blue);}
    .leader-title{font-size:.83rem;color:var(--text-mid);margin-top:4px;}

   
  
  /*  Contact*/
   
        /* ── PAGE HERO ── */
    .page-hero{
      background:linear-gradient(135deg,var(--blue-deeper) 0%,var(--blue) 60%,var(--blue-light) 100%);
      padding:70px 0 55px;position:relative;overflow:hidden;
    }
    .page-hero::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");}
    .page-hero .breadcrumb{background:transparent;margin:0;padding:0;}
    .page-hero .breadcrumb-item{color:rgba(255,255,255,.7);font-size:.85rem;}
    .page-hero .breadcrumb-item a{color:var(--gold);text-decoration:none;}
    .page-hero .breadcrumb-item.active{color:#fff;}
    .page-hero .breadcrumb-item+.breadcrumb-item::before{color:rgba(255,255,255,.5);}
    .page-hero h2{font-family:'Merriweather',serif;font-size:clamp(1.8rem,4vw,3rem);font-weight:900;color:#fff;margin-top:10px;}
    .page-hero p{color:rgba(255,255,255,.82);font-size:1.05rem;margin-top:10px;}

    /* ── SECTION TITLE ── */
    .section-title{font-family:'Merriweather',serif;font-size:1.5rem;font-weight:700;color:var(--blue);position:relative;padding-bottom:10px;margin-bottom:24px;display:inline-block;}
    .section-title::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-dark));border-radius:2px;}

    /* ── CONTACT INFO CARDS ── */
    .contact-section{padding:70px 0;background:#fff;}
    .info-card{
      background:#fff;border:1.5px solid var(--border);border-radius:var(--radius);padding:30px 24px;
      text-align:center;height:100%;
      box-shadow:var(--shadow-sm);
      transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease);
      position:relative;overflow:hidden;
    }
    .info-card::before{
      content:'';position:absolute;top:0;left:0;right:0;height:4px;
      background:linear-gradient(90deg,var(--blue),var(--blue-light));
    }
    .info-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--blue);}
    .info-icon{
      width:64px;height:64px;border-radius:50%;
      background:linear-gradient(135deg,var(--blue),var(--blue-light));
      display:flex;align-items:center;justify-content:center;
      font-size:1.6rem;color:#fff;margin:0 auto 16px;
      box-shadow:0 4px 16px rgba(11,75,168,0.25);
      transition:transform var(--ease);
    }
    .info-card:hover .info-icon{transform:scale(1.12) rotate(-5deg);}
    .info-card h5{font-family:'Merriweather',serif;font-size:1rem;color:var(--blue);font-weight:700;margin-bottom:8px;}
    .info-card p,.info-card a{font-size:.92rem;color:var(--text-mid);line-height:1.65;text-decoration:none;}
    .info-card a:hover{color:var(--blue);}

    /* ── CONTACT FORM ── */
    .form-section{padding:70px 0;background:var(--off-white);}
    .form-card{
      background:#fff;border-radius:var(--radius);padding:42px 40px;
      box-shadow:var(--shadow-md);border-top:5px solid var(--blue);
    }
    .form-label{font-weight:600;font-size:.9rem;color:var(--text-dark);margin-bottom:5px;}
    .form-control,.form-select{
      border:1.5px solid var(--border);border-radius:8px;
      padding:11px 14px;font-size:.93rem;color:var(--text-dark);
      transition:border-color var(--ease),box-shadow var(--ease);
    }
    .form-control:focus,.form-select:focus{
      border-color:var(--blue);
      box-shadow:0 0 0 3px rgba(11,75,168,0.12);
      outline:none;
    }
    .form-control::placeholder{color:#a0aec0;}
    .btn-send{
      background:var(--blue);color:#fff;border:none;
      padding:13px 36px;border-radius:8px;font-weight:700;font-size:1rem;
      letter-spacing:.04em;cursor:pointer;
      transition:background var(--ease),transform var(--ease),box-shadow var(--ease);
      box-shadow:0 4px 14px rgba(11,75,168,0.3);
      display:flex;align-items:center;gap:8px;
    }
    .btn-send:hover{background:var(--blue-dark);transform:translateY(-2px);box-shadow:0 8px 22px rgba(11,75,168,0.4);}
    .btn-send.sending{background:var(--gold-dark);pointer-events:none;}
    .btn-send.success{background:var(--success);pointer-events:none;}

    /* Input floating label style */
    .input-group-icon{position:relative;}
    .input-group-icon .fi{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--blue);font-size:1rem;pointer-events:none;}
    .input-group-icon .form-control{padding-left:38px;}
    .input-group-icon textarea.form-control{padding-left:38px;padding-top:12px;}
    .input-group-icon .fi-top{top:16px;transform:none;}

    /* ── ANIMATED SUCCESS ── */
    .success-toast{
      position:fixed;bottom:30px;right:30px;z-index:9999;
      background:var(--success);color:#fff;border-radius:var(--radius);
      padding:16px 24px;font-weight:600;font-size:.95rem;
      box-shadow:0 8px 30px rgba(0,0,0,.2);
      display:flex;align-items:center;gap:10px;
      transform:translateY(100px);opacity:0;
      transition:transform .4s ease,opacity .4s ease;
    }
    .success-toast.show{transform:translateY(0);opacity:1;}

    /* ── MAP SECTION ── */
    .map-section{padding:0;}
    .map-wrapper{
      border-radius:var(--radius);overflow:hidden;
      box-shadow:var(--shadow-md);border:3px solid var(--border);
    }
    .map-wrapper iframe{width:100%;height:400px;border:none;display:block;}

    /* ── QUICK CONTACT STRIP ── */
    .quick-strip{background:var(--blue);padding:22px 0;}
    .quick-item{display:flex;align-items:center;gap:12px;color:#fff;}
    .quick-item i{font-size:1.5rem;color:var(--gold);}
    .quick-item .qi-label{font-size:.78rem;color:rgba(255,255,255,.65);letter-spacing:.04em;text-transform:uppercase;}
    .quick-item .qi-val{font-size:.95rem;font-weight:600;color:#fff;}

    

   @keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}