/* ================================================================
   NAVBAR CSS — PART 1: Top bar + Main header-nav + dropdowns
   (as-is, extracted from original <style> block)
   ================================================================ */

      .header-top {
        background: #0c1d4e;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 8px 0;
        transition: max-height .38s cubic-bezier(.4,0,.2,1),
                    padding .38s cubic-bezier(.4,0,.2,1),
                    opacity .25s ease,
                    transform .38s cubic-bezier(.4,0,.2,1);
        overflow: hidden;
        max-height: 100px;
        opacity: 1;
        transform: translateY(0);
      }

      header.scrolled .header-top {
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
        transform: translateY(-100%);
        pointer-events: none;
      }

      header.scrolled .header-nav {
        padding-top: 8px;
        padding-bottom: 8px;
      }

      .header-top-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
      }

      .header-top-content .contact-info {
        display: flex;
        align-items: center;
        gap: 24px;
        list-style: none;
        flex-wrap: wrap;
      }

      .header-top-content .contact-info li {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .header-top-content .contact-info .para {
        font-size: 0.82rem;
        color: rgba(255, 255, 255, 0.85);
        font-weight: 400;
        margin: 0;
        white-space: nowrap;
      }

      .header-top-content .contact-info .my-icon {
        font-size: 0.9rem;
        color: var(--secondary);
      }

      /* Map custom icon classes → Font Awesome */
      .icon-call-us::before {
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        content: "\f095";
      }

      .icon-massage::before {
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        content: "\f0e0";
      }

      .icon-time-hour::before {
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        content: "\f017";
      }

      .icon-facebook::before {
        font-family: "Font Awesome 6 Brands";
        font-weight: 400;
        content: "\f09a";
      }

      .icon-instagram::before {
        font-family: "Font Awesome 6 Brands";
        font-weight: 400;
        content: "\f16d";
      }

      .icon-youtube::before {
        font-family: "Font Awesome 6 Brands";
        font-weight: 400;
        content: "\f167";
      }

      .follow-us-link {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
      }

      .follow-us-link .para {
        font-size: 0.82rem;
        color: rgba(255, 255, 255, 0.85);
        font-weight: 400;
        white-space: nowrap;
      }

      .follow-icon a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: rgba(255, 255, 255, 0.8);
        text-decoration: none;
        font-size: 0.78rem;
        transition: all 0.3s;
      }

      .follow-icon a:hover {
        background: var(--secondary);
        color: #fff;
        border-color: var(--secondary);
        transform: translateY(-2px);
      }
      /* ===============================
   TOP HEADER FIX
================================ */

      /* Top header side spacing fix */
      .header-top .container {
        width: 100% !important;
        max-width: 1280px !important;
        margin: 0 auto !important;
        padding: 0 24px !important;
      }

      /* Call, Mail, Clock icons white */
      .header-top-content .contact-info .my-icon {
        color: #ffffff !important;
      }

      /* Text bhi clean white */
      .header-top-content .contact-info .para {
        color: rgba(255, 255, 255, 0.9) !important;
      }

      /* Top header layout proper */
      .header-top-content {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
      }

      /* Mobile spacing */
      @media (max-width: 768px) {
        .header-top .container {
          padding: 0 15px !important;
        }

        .header-top-content {
          justify-content: center !important;
          gap: 12px !important;
        }

        .header-top-content .contact-info {
          justify-content: center !important;
        }
      }
      /* Header */
      header {
        padding: 0;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(15px);
        border-bottom: 1px solid var(--border);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      }

      header.scrolled {
        background: #ffffff;
        box-shadow: var(--shadow-md);
      }

      .header-nav {
        padding: 10px 0;
      }

      @media (max-width: 768px) {
        .header-top-content .contact-info li:not(:first-child) {
          display: none;
        }

        .follow-us-link .para {
          display: none;
        }
      }
      .header-nav .container.nav-container {
        width: 100% !important;
        max-width: 1280px !important;
        margin: 0 auto !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
      }

      /* Logo left se chipke nahi */
      .logo {
        margin-left: 0 !important;
      }

      /* Enquire Now button right se chipke nahi */
      .nav-links {
        margin-right: 0 !important;
      }

      /* Button ka proper spacing */
      .nav-links .btn-nav {
        margin-right: 0 !important;
        white-space: nowrap !important;
      }
      .nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
      }

      .logo img {
        height: 60px;
        filter: drop-shadow(0 4px 10px rgba(26, 63, 168, 0.15));
      }

      .nav-links {
        display: flex;
        gap: 30px;
        list-style: none;
        align-items: center;
      }

      .nav-links a {
        color: var(--text-main);
        text-decoration: none;
        font-size: 16px;
        font-weight: 500;
        transition: color 0.3s;
      }

      .nav-links a:hover,
      .nav-links a.active {
        color: var(--primary);
      }

      /* Mobile Toggle */
      .menu-toggle {
        display: none;
        font-size: 1.4rem;
        color: var(--text-main);
        cursor: pointer;
        z-index: 1001;
        transition: all 0.3s;
        width: 42px;
        height: 42px;
        align-items: center;
        justify-content: center;
        background: var(--bg-soft);
        border-radius: 10px;
        border: 1px solid var(--border);
        line-height: 1;
      }

      .menu-toggle:hover {
        background: var(--primary-light);
        color: var(--primary);
        margin-bottom: 20px;
      }

      /* Dropdown Styles */
      .nav-links li {
        position: relative;
        padding-bottom: 10px;
        margin-bottom: -10px;
      }
      .nav-links {
        display: flex;
        gap: 30px;
        list-style: none;
        align-items: center;
      }

      .nav-links a {
        color: var(--text-main);
        text-decoration: none;
        font-size: 16px;
        font-weight: 500;
        transition: color 0.3s;
      }

      .nav-links a:hover {
        color: #209d58;
      }

      /* Mobile Toggle */
      .menu-toggle {
        display: none;
        font-size: 1.4rem;
        color: var(--text-main);
        cursor: pointer;
        z-index: 1001;
        transition: all 0.3s;
        width: 42px;
        height: 42px;
        align-items: center;
        justify-content: center;
        background: var(--bg-soft);
        border-radius: 10px;
        border: 1px solid var(--border);
        line-height: 1;
      }

      .menu-toggle:hover {
        background: var(--primary-light);
        color: var(--primary);
      }

      /* Dropdown Styles */
      .nav-links li {
        position: relative;
        padding-bottom: 10px;
        margin-bottom: -10px;
      }

      .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(15px);
        min-width: 220px;
        background: #f7f5f5;
        border: 1px solid var(--border);
       
        padding: 15px 0;
        list-style: none;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: var(--shadow-lg);
        margin-top: 22px;
      }

 

      .dropdown:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
      }

      .dropdown-menu li {
        width: 100%;
      }

      .dropdown-menu li a {
        display: block;
        padding: 12px 25px;
        font-size: 14px;
        font-weight: 600;
        color: var(--text-main);
        transition: all 0.3s;
      }

      .dropdown-menu li a:hover {
        color: var(--primary);
        background: var(--primary-light);
        padding-left: 20px;
      }

      /* Mega Menu Styles */
      .nav-links li.mega-dropdown {
        position: relative;
      }
      @media (max-width: 992px) {
        .nav-links li.mega-dropdown {
          position: relative;
        }

        .mega-menu {
          position: static;
          transform: none !important;
          width: 100%;
          max-width: 100%;
          box-shadow: none;
          border: none;
          padding: 10px !important;
          margin-top: 10px;
          opacity: 0;
          visibility: hidden;
          display: none;
        }

        .mega-dropdown:hover .mega-menu {
          opacity: 1;
          visibility: visible;
          display: block;
        }

        .mega-menu-grid {
          grid-template-columns: 1fr;
          gap: 10px;
        }

        .mega-menu-col li a {
          padding: 8px 10px;
        }
      }

      .btn-nav {
        background: green;
        border: none;
        padding: 14px 28px;
        font-family: "Outfit", sans-serif;
        font-size: 15px;
        font-weight: 700;
        color: #fff;
        cursor: pointer;
        text-decoration: none;
        transition:
          transform 0.25s,
          box-shadow 0.25s;
        box-shadow: 0 4px 20px rgba(26, 63, 168, 0.25);
        display: inline-block;
      }

      /* Enquire Now button square box */
      .btn-nav {
        border-radius: 0 !important;
        background: green !important;
        padding: 12px 24px !important;
      }

      /* Mobile me bhi radius remove */
      .nav-links .btn-nav {
        border-radius: 0 !important;
      }

      .btn-outline:hover {
        background: var(--primary);
        color: #fff;
      }
      .course-menu-card {
        background: #4456a6;
        border: 1px solid #e5e5e5;
        border-radius: 12px;
        padding: 16px 18px;
        min-height: 92px;
        text-decoration: none !important;
        color: #1f2937 !important;
        box-shadow: 0 5px 14px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
        min-height: 72px !important;
        padding: 12px 14px !important;
        border-radius: 10px !important;
      }

      .course-menu-card h4 {
        font-size: 14px !important;
        margin-bottom: 8px !important;
        line-height: 1.25 !important;
        margin: 0 0 12px;
        color: #1e293b;
        font-weight: 600;
      }

      .courses-card-menu::before {
        left: 50% !important;
      }
      .course-menu-card p {
        font-size: 12px !important;
        gap: 6px !important;

        color: #666666;
        margin: 0;
        display: flex;
        align-items: center;
      }

      .course-menu-card p i {
        color: #209d58;
        font-size: 12px;
      }
      /* Course dropdown position fix */
      .courses-card-menu {
        left: 50% !important;
        transform: translateX(-60%) translateY(15px) !important;
           width: 1050px !important;
      }

      .mega-dropdown:hover .courses-card-menu {
        transform: translateX(-60%) translateY(0) !important;
      }

      .courses-card-menu::before {
        left: 60% !important;
      }
     

      .course-column {
        padding: 20px 18px !important;
        gap: 12px !important;
      }

      .course-menu-card {
        min-height: 72px !important;
        padding: 12px 14px !important;
        border-radius: 10px !important;
      }

      .mega-menu-brand img.mega-menu-logo {
        margin-top: 15px;
        max-width: 200px;
        margin-bottom: 15px;
        height: auto;
        margin-left: 50px;
      }
      @media (max-width: 992px) {
        .course-menu-columns {
          grid-template-columns: 1fr;
        }

        .course-column {
          border-right: none;
          border-bottom: 1px solid #dcdcdc;
          padding: 16px;
        }

        .course-column:last-child {
          border-bottom: none;
        }

        .course-menu-card {
          min-height: 82px;
        }
      }
      /* ===============================
        FINAL NAVBAR + COURSE DROPDOWN FIX
        ================================ */

      /* Desktop Course Dropdown - Navbar se attach */
      @media (min-width: 993px) {
        .nav-container {
          position: relative;
        }

        .nav-links li.mega-dropdown {
          position: static !important;
        }

        .courses-card-menu {
          position: absolute !important;
          top: 100% !important;
          left: 50% !important;
          transform: translateX(-50%) translateY(0) !important;
          margin-top: 0 !important;
          width: 1050px !important;
          max-width: 95vw !important;
          z-index: 9999 !important;
        }

        .mega-dropdown:hover .courses-card-menu {
          opacity: 1 !important;
          visibility: visible !important;
          transform: translateX(-50%) translateY(0) !important;
        }

        .courses-card-menu::before {
          display: none !important;
        }
      }

      /* Mobile Navbar Toggle Fix */

      .course-menu-card {
        background: #ffffff;
        border: 1px solid #e5e5e5;
        border-radius: 12px;
        padding: 16px 18px;
        min-height: 92px;
        text-decoration: none !important;
        color: #1f2937 !important;
        box-shadow: 0 5px 14px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
      }

      .course-menu-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
        background: #ffffff;
      }

      .mega-dropdown:hover .courses-card-menu {
        transform: translateX(-50%) translateY(0) !important;
      }

      .courses-card-menu::before {
        left: 50% !important;
      }

      /* Course dropdown position fix */
      .courses-card-menu {
        left: 50% !important;
        transform: translateX(-60%) translateY(15px) !important;
      }

      .mega-dropdown:hover .courses-card-menu {
        transform: translateX(-60%) translateY(0) !important;
      }

      .courses-card-menu::before {
        left: 60% !important;
      }
      /* Course dropdown card size small */
      .courses-card-menu {
        width: 1050px !important;
      }

      .course-column {
        padding: 20px 18px !important;
        gap: 12px !important;
      }

      .course-menu-card {
        min-height: 72px !important;
        padding: 12px 14px !important;
        border-radius: 10px !important;
      }

      .mega-menu-brand img.mega-menu-logo {
        max-width: 120px;
        margin-bottom: 15px;
        height: auto;
        margin-left: 50px;
      }
      /* Enquire Now Button - White to Black Transition */
      .header-nav .nav-links .btn-nav {
        background: #04a64c !important;
        color: #ffffff !important;

        box-shadow: none !important;
        transition: all 0.35s ease !important;
      }

      /* Hover ke baad black */
      .header-nav .nav-links .btn-nav:hover {
        background: #000000 !important;
        color: #ffffff !important;
        border-color: #000000 !important;
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22) !important;
      }

      /* =====================================
   FIXED MOVING NAVBAR LINE + COURSES DROPDOWN
   Paste this at the END of style tag
===================================== */

      @media (min-width: 993px) {
        .header-nav {
          position: relative !important;
          overflow: visible !important;
        }

        .header-nav .nav-container {
          position: static !important;
        }

        /* Important: nav-links relative nahi hona chahiye */
        .header-nav .nav-links {
          position: static !important;
        }

        .header-nav .nav-links > li {
          position: relative;
        }

        .header-nav .nav-links > li.mega-dropdown {
          position: static !important;
        }

        /* Purana individual underline band */
        .header-nav .nav-links > li > a:not(.btn-nav)::after {
          height: 8px !important;
          content: none !important;
          display: none !important;
        }

        /* Moving underline ab header-nav se chalegi */
        .header-nav::after {
          height: 5px !important;
          content: "";
          position: absolute;
          left: 0;
          bottom: -1px;
          width: var(--nav-line-width, 0px);
          height: 3px;
          background: #209d58;
          transform: translateX(var(--nav-line-left, 0px));
          opacity: var(--nav-line-opacity, 0);
          transition:
            transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
            width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.2s ease;
          pointer-events: none;
          z-index: 99999;
        }

        .header-nav .nav-links > li > a:not(.btn-nav) {
          color: #1f2937 !important;
          transition: color 0.35s ease !important;
        }

        .header-nav .nav-links > li:hover > a:not(.btn-nav),
        .header-nav .nav-links > li > a.active:not(.btn-nav) {
          color: #209d58 !important;
        }

        /* About dropdown normal */
        .header-nav .dropdown:hover > .dropdown-menu {
          opacity: 1 !important;
          visibility: visible !important;
          transform: translateX(-50%) translateY(0) !important;
        }

        /* Courses mega dropdown pehle jaisa */
        .header-nav .courses-card-menu {
          position: absolute !important;
          top: 100% !important;
          left: 50% !important;
          transform: translateX(-50%) translateY(0) !important;
          margin-top: 0 !important;
          padding: 0 !important;
          width: 1050px !important;
          max-width: 95vw !important;
          opacity: 0 !important;
          visibility: hidden !important;
          z-index: 999999 !important;
          border-top: 0 !important;
       
          overflow: hidden !important;
        }

        .header-nav .mega-dropdown:hover > .courses-card-menu,
        .header-nav .courses-card-menu:hover {
          opacity: 1 !important;
          visibility: visible !important;
          transform: translateX(-50%) translateY(0) !important;
        }

        .header-nav .courses-card-menu::before {
          display: none !important;
        }

        .header-nav .dropdown:hover > a i,
        .header-nav .mega-dropdown:hover > a i {
          transform: rotate(180deg);
          transition: transform 0.35s ease;
        }
      }
      /* ===============================
        FINAL NAVBAR + COURSE DROPDOWN FIX
        ================================ */

      /* Desktop Course Dropdown - Navbar se attach */
      @media (min-width: 993px) {
        .nav-container {
          position: relative;
        }

        .nav-links li.mega-dropdown {
          position: static !important;
        }

        .courses-card-menu {
          position: absolute !important;
          top: 100% !important;
          left: 50% !important;
          transform: translateX(-50%) translateY(0) !important;
          margin-top: 0 !important;
          width: 1050px !important;
          max-width: 95vw !important;
          z-index: 9999 !important;
        }

        .mega-dropdown:hover .courses-card-menu {
          opacity: 1 !important;
          visibility: visible !important;
          transform: translateX(-50%) translateY(0) !important;
        }

        .courses-card-menu::before {
          display: none !important;
        }
      }
/* =====================================================
   KINGSTER STYLE: COURSE DROPDOWN IMAGE FULL SECTION
   Paste this at the END of your style tag
===================================================== */

@media (min-width: 993px) {
  .courses-card-menu .course-menu-columns {
    align-items: stretch !important;
  }

  .courses-card-menu .course-column:last-child {
    position: relative !important;
    overflow: hidden !important;
    min-height: 100% !important;
    padding: 28px 24px !important;
    background: #f1eded !important;
  }

  /* Image ko pura last section/column me spread karega */
  .courses-card-menu .course-column:last-child .course-students-img,
  .courses-card-menu .course-column:last-child .mega-menu-brand {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background: transparent !important;
    z-index: 1 !important;
    display: block !important;
  }

  .courses-card-menu .course-column:last-child .mega-menu-student-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center right !important;
    opacity: 0.72 !important;
    filter: brightness(1.08) contrast(0.92) saturate(0.75) !important;
    z-index: 1 !important;
  }

  /* Kingster jaisa white fade overlay */
  .courses-card-menu .course-column:last-child .course-students-img::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
      90deg,
      rgba(241, 237, 237, 0.98) 0%,
      rgba(241, 237, 237, 0.82) 38%,
      rgba(241, 237, 237, 0.35) 70%,
      rgba(241, 237, 237, 0.12) 100%
    ) !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  /* Cards image ke upar clean dikhengi */
  .courses-card-menu .course-column:last-child .course-menu-card {
    position: relative !important;
    z-index: 5 !important;
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
  }

  /* Bottom text like Kingster */
  .mega-course-img-text {
    position: absolute !important;
    left: 24px !important;
    right: 22px !important;
    bottom: 24px !important;
    z-index: 4 !important;
  }

  .mega-course-img-text h3 {
    font-size: 22px !important;
    line-height: 1.2 !important;
    color: #17335f !important;
    font-weight: 800 !important;
    margin: 0 0 10px !important;
    font-family: "Outfit", Arial, sans-serif !important;
  }

  .mega-course-img-text p {
    font-size: 15px !important;
    line-height: 1.55 !important;
    color: #5f6470 !important;
    font-weight: 600 !important;
    margin: 0 !important;
    font-family: "Outfit", Arial, sans-serif !important;
  }

  /* Purana logo completely hide */
  .courses-card-menu .mega-menu-brand img.mega-menu-logo {
    display: none !important;
  }
}

/* Mobile me dropdown already hide hai, safe fix */
@media (max-width: 992px) {
  .courses-card-menu .course-students-img,
  .courses-card-menu .mega-menu-brand {
    display: none !important;
  }
}

      /* Mobile Navbar Toggle Fix */
      @media (max-width: 992px) {
        .menu-toggle {
          display: flex !important;
        }

        .nav-container {
          position: relative;
        }

        .nav-links {
          position: absolute;
          top: 100%;
          left: 0;
          right: 0;
          width: 100%;
          display: none;
          flex-direction: column;
          align-items: flex-start;
          gap: 0;
          background: #ffffff;
          padding: 15px;
          border-top: 1px solid var(--border);
          box-shadow: var(--shadow-lg);
          z-index: 9999;
          max-height: calc(100vh - 90px);
          overflow-y: auto;
        }

        .nav-links.active {
          display: flex !important;
        }

        .nav-links li {
          width: 100%;
          padding-bottom: 0 !important;
          margin-bottom: 0 !important;
        }

        .nav-links li a {
          width: 100%;
          display: flex;
          justify-content: space-between;
          padding: 12px 10px;
        }

        .btn-nav {
          width: 100%;
          text-align: center;
          margin-top: 8px;
        }

        .dropdown-menu,
        .mega-menu,
        .courses-card-menu {
          position: static !important;
          width: 100% !important;
          max-width: 100% !important;
          transform: none !important;
          margin-top: 0 !important;
          box-shadow: none !important;
          border: none !important;
          border-radius: 0 !important;
          opacity: 1 !important;
          visibility: visible !important;
          display: none;
          background: #ffffff;
        }

        .dropdown.open > .dropdown-menu,
        .mega-dropdown.open > .courses-card-menu {
          display: block !important;
        }

        .dropdown-menu::before,
        .courses-card-menu::before {
          display: none !important;
        }

        .course-menu-columns {
          grid-template-columns: 1fr !important;
        }

        .course-column {
          border-right: none !important;
          border-bottom: 1px solid #dcdcdc;
        }

        .course-column:last-child {
          border-bottom: none !important;
        }
      }

      /* 4 columns */
      .course-menu-columns {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        background: #f1eded;
      }

      /* Each column */
      .course-column {
        padding: 28px 24px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        border-right: 1px solid #dcdcdc;
      }

      .course-column:last-child {
        border-right: none;
      }

      /* Mobile toggle menu start gap remove */
      @media (max-width: 992px) {
        .nav-links {
          padding: 0 !important;
          gap: 0 !important;
        }

        .nav-links li {
          padding: 0 !important;
          margin: 0 !important;
        }

        .nav-links li a {
          padding: 12px 16px !important;
          margin: 0 !important;
        }

        .dropdown-menu,
        .mega-menu,
        .courses-card-menu {
          padding: 0 !important;
          margin: 0 !important;
        }

        .course-menu-columns {
          grid-template-columns: 1fr !important;
          padding: 0 !important;
          margin: 0 !important;
        }

        .course-column {
          padding: 10px 12px !important;
          margin: 0 !important;
          gap: 10px !important;
        }

        .course-menu-card {
          margin: 0 !important;
        }
      }
      @media (max-width: 992px) {
        .header-nav {
          position: relative !important;
        }

        .header-nav .container.nav-container {
          position: static !important;
          padding-left: 0 !important;
          padding-right: 0 !important;
          max-width: 100% !important;
          width: 100% !important;
        }

        .logo {
          margin-left: 15px !important;
        }

        .menu-toggle {
          margin-right: 15px !important;
        }

        .nav-links {
          position: absolute !important;
          top: 100% !important;
          left: 0 !important;
          right: 0 !important;
          width: 100% !important;
          padding: 0 !important;
          margin: 0 !important;
          list-style: none !important;
          border-radius: 0 !important;
        }

        .nav-links li {
          padding: 0 !important;
          margin: 0 !important;
          width: 100% !important;
        }

        .nav-links li a {
          padding: 12px 6px !important;
          margin: 0 !important;
          justify-content: flex-start !important;
          gap: 6px !important;
        }
      }
      @media (max-width: 992px) {
        .nav-links.active {
          display: flex !important;
          justify-content: flex-start !important;
          align-items: flex-start !important;
        }

        .nav-links {
          top: 100% !important;
          padding-top: 0 !important;
          margin-top: 0 !important;
          height: auto !important;
          min-height: 0 !important;
          justify-content: flex-start !important;
        }

        .nav-links li:first-child a {
          padding-top: 12px !important;
        }
      }
      /* ===============================
    MOBILE TOGGLE INNER DESIGN
    ================================ */
      @media (max-width: 992px) {
        .nav-links {
          position: absolute !important;
          top: 100% !important;
          left: 0 !important;
          right: 0 !important;
          width: 100% !important;

          background: #ffffff !important;
          padding: 14px 14px 18px !important;
          margin: 0 !important;

          border-top: 1px solid #e8eef8 !important;
          box-shadow: 0 16px 35px rgba(0, 0, 0, 0.12) !important;
          border-radius: 0 0 18px 18px !important;

          gap: 8px !important;
          max-height: calc(100vh - 120px) !important;
          overflow-y: auto !important;
        }

        .nav-links.active {
          display: flex !important;
          flex-direction: column !important;
          align-items: stretch !important;
          justify-content: flex-start !important;
        }

        .nav-links li {
          width: 100% !important;
          padding: 0 !important;
          margin: 0 !important;
        }

        .nav-links li a {
          width: 100% !important;
          padding: 13px 15px !important;
          margin: 0 !important;

          display: flex !important;
          align-items: center !important;
          justify-content: space-between !important;

      
          border: 1px solid #e4ebf7 !important;
       

          color: #17233c !important;
          font-size: 15px !important;
          font-weight: 600 !important;
          text-decoration: none !important;

          transition: all 0.3s ease !important;
        }

        .nav-links li a:hover,
        .nav-links li a.active {
          background: #1c51a4 !important;
          color: #ffffff !important;
          border-color: #1c51a4 !important;
        }

        .nav-links li a i {
          color: inherit !important;
        }

      .nav-links .btn-nav {
  background: #24b85a !important;
  color: #ffffff !important;
}

        .nav-links .btn-nav:hover {
          background: #ffffff !important;
          color: #ffffff !important;
        }
        .mega-menu-brand {
          display: none !important;
        }
      }
      @media (max-width: 992px) {
        .mega-dropdown > .courses-card-menu {
          display: none !important;
          opacity: 0 !important;
          visibility: hidden !important;
          height: 0 !important;
          overflow: hidden !important;
          padding: 0 !important;
          margin: 0 !important;
        }

        .mega-dropdown.open > .courses-card-menu {
          display: none !important;
        }

        .mega-dropdown > .dropdown-toggle i {
          display: none !important;
        }
      }
      /* =====================================================
            FINAL OVERRIDE: Courses dropdown navbar se attach
            Paste this at the END of your <style> tag.
            ===================================================== */
      @media (min-width: 993px) {
        .header-nav {
          position: relative !important;
        }

        /* menu ko full navbar ke bottom se align karne ke liye */
        .header-nav .nav-container {
          position: static !important;
        }

        .nav-links li.mega-dropdown {
          position: static !important;
        }

        .courses-card-menu {
          position: absolute !important;
          top: 100% !important;
          left: 50% !important;
          transform: translateX(-50%) translateY(0) !important;
          margin-top: 0 !important;
          padding: 0 !important;
          width: 1050px !important;
          max-width: 95vw !important;
          opacity: 0 !important;
          visibility: hidden !important;
          z-index: 99999 !important;
          border-top: 0 !important;
          border-radius: 0 0  !important;
          overflow: hidden !important;
        }

        .mega-dropdown:hover > .courses-card-menu,
        .courses-card-menu:hover {
          opacity: 1 !important;
          visibility: visible !important;
          transform: translateX(-50%) translateY(0) !important;
        }

        .courses-card-menu::before {
          display: none !important;
        }
      }

      /* Kingster type navbar hover transition */
      @media (min-width: 993px) {
        .header-nav .nav-links > li > a:not(.btn-nav) {
          position: relative !important;
          color: #1f2937 !important;
          transition: color 0.35s ease !important;
        }

        .header-nav .nav-links > li > a:not(.btn-nav)::after {
          content: "";
          position: absolute;
          left: 0;
          bottom: -14px;
          width: 100%;
          height: 3px;
          background: #209d58;
          transform: scaleX(0);
          transform-origin: left center;
          transition: transform 0.35s ease;
        }

        .header-nav .nav-links > li:hover > a:not(.btn-nav),
        .header-nav .nav-links > li > a.active:not(.btn-nav) {
          color: #209d58 !important;
        }

        .header-nav .nav-links > li:hover > a:not(.btn-nav)::after,
        .header-nav .nav-links > li > a.active:not(.btn-nav)::after {
          transform: scaleX(1);
        }

        .header-nav .nav-links > li.dropdown:hover > a i {
          transform: rotate(180deg);
          transition: transform 0.35s ease;
        }
      }


/* ================================================================
   NAVBAR CSS — PART 2: Enquire Now button (.btn-nav) hover shine
   NOTE: this rule block is SHARED with other buttons on the site
   (.hero-btn, .apply-btn, .future-btn, .gv-guidance-btn, .gv-know-btn,
   .gv-download-btn, .news-btn) — kept exactly as in the original file.
   ================================================================ */

.header-nav .nav-links .btn-nav,
.btn-nav,
.hero-btn,
.apply-btn,
.future-btn,
.gv-guidance-btn,
.gv-know-btn,
.gv-download-btn,
.news-btn {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    filter 0.35s ease,
    background-color 0.35s ease !important;
}

/* Moving shine line */
.header-nav .nav-links .btn-nav::before,
.btn-nav::before,
.hero-btn::before,
.apply-btn::before,
.future-btn::before,
.gv-guidance-btn::before,
.gv-know-btn::before,
.gv-download-btn::before,
.news-btn::before {
  content: "" !important;
  position: absolute !important;
  top: -70% !important;
  left: -90% !important;
  width: 45% !important;
  height: 240% !important;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 30%,
    rgba(255, 255, 255, 0.75) 50%,
    rgba(255, 255, 255, 0.15) 70%,
    transparent 100%
  ) !important;
  transform: rotate(25deg) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 2 !important;
  transition:
    left 0.75s ease,
    opacity 0.35s ease !important;
}

/* Hover par chamak move hogi */
.header-nav .nav-links .btn-nav:hover::before,
.btn-nav:hover::before,
.hero-btn:hover::before,
.apply-btn:hover::before,
.future-btn:hover::before,
.gv-guidance-btn:hover::before,
.gv-know-btn:hover::before,
.gv-download-btn:hover::before,
.news-btn:hover::before {
  left: 125% !important;
  opacity: 1 !important;
}

/* Premium hover lift */
.header-nav .nav-links .btn-nav:hover,
.btn-nav:hover,
.hero-btn:hover,
.apply-btn:hover,
.future-btn:hover,
.gv-guidance-btn:hover,
.gv-know-btn:hover,
.gv-download-btn:hover,
.news-btn:hover {
  transform: translateY(-3px) !important;
  filter: brightness(1.05) !important;
  box-shadow: 0 14px 32px rgba(32, 157, 88, 0.32) !important;
}

/* Mobile touch par bhi effect feel hoga */
.header-nav .nav-links .btn-nav:active,
.btn-nav:active,
.hero-btn:active,
.apply-btn:active,
.future-btn:active,
.gv-guidance-btn:active,
.gv-know-btn:active,
.gv-download-btn:active,
.news-btn:active {
  transform: translateY(-1px) scale(0.98) !important;
}


/* ================================================================
   NAVBAR CSS — PART 3: Mobile right-side slider navbar (kg-*) +
   About Us dropdown final fix
   ================================================================ */

/* =====================================
   MOBILE RIGHT SIDE SLIDER NAVBAR
===================================== */

:root {
  --kg-blue: #192f59;
  --kg-blue-dark: #142747;
  --kg-gold: #f2b827;
  --kg-white: #ffffff;
  --kg-border: rgba(255, 255, 255, 0.13);
}

.kg-mobile-drawer,
.kg-menu-overlay {
  display: none;
}

@media (max-width: 992px) {
  body.kg-menu-active {
    overflow: hidden !important;
  }

  /* Main file ka old dropdown mobile menu band - sirf un pages pe jahan naya kg-mobile-drawer maujood hai */
  body:has(.kg-mobile-drawer) .nav-links.active {
    display: none !important;
  }

  .kg-menu-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.58);
    z-index: 99991;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
  }

  .kg-menu-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  .kg-mobile-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: -100%;
    width: 71%;
    max-width: 370px;
    height: 100vh;
    background: var(--kg-blue);
    z-index: 99992;
    transition: right 0.35s ease;
    overflow: hidden;
    box-shadow: -18px 0 45px rgba(0, 0, 0, 0.35);
  }

  .kg-mobile-drawer.active {
    right: 0;
  }

  .kg-drawer-head {
    min-height: 78px;
    padding: 16px 18px;
    background: var(--kg-white);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .kg-drawer-logo img {
    max-height: 50px;
    width: auto;
    display: block;
  }

  .kg-menu-close {
    width: 42px;
    height: 42px;
    border: none;
    color: var(--kg-blue);
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    border-radius: 0;
  }

  .kg-mobile-nav {
    padding: 8px 0 0;
    background: var(--kg-blue);
    overflow-y: auto;
  }

  .kg-mobile-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .kg-mobile-nav > ul > li {
    border-bottom: 1px solid var(--kg-border);
  }

  .kg-mobile-nav a {
    color: var(--kg-white);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    display: block;
    padding: 17px 22px;
    transition: 0.25s ease;
  }

  .kg-mobile-nav a:hover {
    color: var(--kg-gold);
    background: var(--kg-blue-dark);
  }

  .kg-menu-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .kg-menu-row > a {
    flex: 1;
  }

  .kg-course-open-btn {
    width: 56px;
    height: 54px;
    border: none;
    background: transparent;
    color: var(--kg-white);
    font-size: 30px;
    cursor: pointer;
    border-left: 1px solid var(--kg-border);
  }

  .kg-course-open-btn:hover {
    color: var(--kg-gold);
    background: var(--kg-blue-dark);
  }

  .kg-drawer-bottom {
    margin-top: auto;
    padding: 18px;
   
    display: grid;
    gap: 10px;
  }

  .kg-call-btn,
  .kg-whatsapp-btn {
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-weight: 700;
    font-size: 13.5px;
    border-radius: 0;
  }

  .kg-call-btn {
    background: var(--kg-gold);
    color: var(--kg-blue);
  }

  .kg-whatsapp-btn {
    background: transparent;
    color: var(--kg-white);
    border: 1px solid rgba(255, 255, 255, 0.35);
  }

  /* Courses Inner Right Slider */
  .kg-course-panel {
    position: absolute;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    background: var(--kg-blue);
    z-index: 5;
    transition: right 0.35s ease;
    display: flex;
    flex-direction: column;
  }

  .kg-course-panel.active {
    right: 0;
  }

  .kg-course-panel-head {
    min-height: 78px;
    background: var(--kg-white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
  }

  .kg-course-panel-head h3 {
    margin: 0;
    font-size: 18px;
    color: var(--kg-blue);
    font-weight: 800;
  }

  .kg-course-back,
  .kg-course-close {
    width: 42px;
    height: 42px;
    border: none;
    cursor: pointer;
    border-radius: 0;
    line-height: 1;
  }

  .kg-course-back {
    background: var(--kg-blue);
    color: var(--kg-white);
    font-size: 34px;
  }

  .kg-course-close {
    color: var(--kg-blue);
    font-size: 30px;
  }

  .kg-course-list {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
  }

  .kg-course-list li {
    border-bottom: 1px solid var(--kg-border);
  }

  .kg-course-list a {
    display: block;
    color: var(--kg-white);
    text-decoration: none;
    padding: 17px 22px;
    font-size: 14px;
    font-weight: 600;
    transition: 0.25s ease;
  }

  .kg-course-list a:hover {
    color: var(--kg-gold);
    background: var(--kg-blue-dark);
    padding-left: 28px;
  }
}
/* Mobile Slider Enquire Now Button */
@media (max-width: 992px) {
  .kg-drawer-bottom {
    margin-top: auto !important;
    padding: 18px !important;
    display: block !important;
  }

  .kg-enquire-now-btn {
    width: 100% !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #23ad58 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 0.4px !important;
    border-radius: 0 !important;
    transition: all 0.3s ease !important;
  }

  .kg-enquire-now-btn:hover {
    background: #f2b827 !important;
    color: #192f59 !important;
  }
}
/* ABOUT US DROPDOWN FINAL FIX */
@media (min-width: 993px) {
  .header-nav .about-dropdown {
    position: relative !important;
  }

  .header-nav .about-dropdown .about-menu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(12px) !important;
    min-width: 230px !important;
    background: #ffffff !important;
    padding: 10px 0 !important;
    margin-top: 20px !important;
    list-style: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: 999999 !important;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.14) !important;
    border: 1px solid #e8e8e8 !important;
  }

  .header-nav .about-dropdown:hover > .about-menu,
  .header-nav .about-dropdown .about-menu:hover {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
  }

  .header-nav .about-dropdown .about-menu li {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .header-nav .about-dropdown .about-menu li a {
    display: block !important;
    padding: 12px 22px !important;
    color: #17233c !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  .header-nav .about-dropdown .about-menu li a:hover {
    background: #eef6ff !important;
    color: #209d58 !important;
    padding-left: 26px !important;
  }
}
/* ABOUT US MOBILE INNER SLIDER FIX */
@media (max-width: 992px) {
  .kg-about-panel {
    background: var(--kg-blue) !important;
  }

  .kg-about-panel.active {
    right: 0 !important;
  }

  .kg-about-panel .kg-course-list a {
    color: #ffffff !important;
  }

  .kg-about-panel .kg-course-list a:hover {
    color: var(--kg-gold) !important;
    background: var(--kg-blue-dark) !important;
  }
}


/* About Page Css Start Here  */
/* =========================================================
   PROFESSIONAL ABOUT PAGE ENHANCEMENTS
========================================================= */
:root{
  --primary:#23ad58;
  --primary-dark:#168943;
  --navy:#010521;
  --navy-soft:#09123d;
  --text:#15182b;
  --muted:#687087;
  --surface:#f6f8fc;
  --white:#ffffff;
  --border:rgba(7,19,61,.10);
  --shadow:0 22px 60px rgba(2,9,42,.10);
}

html{scroll-behavior:smooth;}

body{
  font-family:"Outfit",Arial,sans-serif;
  background:#fff;
  color:var(--text);
}

.page-banner{
  min-height:460px;
  background-position:center 32%;
}

.page-banner::before{
  background:
    linear-gradient(90deg,rgba(1,5,33,.97) 0%,rgba(1,5,33,.82) 42%,rgba(1,5,33,.28) 100%);
}

.page-banner .banner-content span{
  padding:8px 14px;
 
  border-radius:999px;
  
   
}

.page-banner .banner-content span::before{display:none;}

.page-banner .banner-content h1{
  text-shadow:0 12px 35px rgba(0,0,0,.32);
}

.history-section{
  padding:105px 0;
  background:
    radial-gradient(circle at 10% 10%,rgba(35,173,88,.08),transparent 28%),
    #fff;
}

.breadcrumb{
  display:inline-flex;
  padding:10px 16px;
  margin-bottom:52px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
  box-shadow:0 10px 30px rgba(2,9,42,.05);
}

.history-grid{
  grid-template-columns:.82fr 1fr 1fr;
  gap:55px;
}

.history-title h2{
  font-size:clamp(36px,3vw,54px);
  letter-spacing:-.035em;
  color:var(--navy);
}

.history-title h2::after{
  width:88px;
  height:5px;
  border-radius:999px;
}
.history-text p{
  font-family:"Outfit",sans-serif;
  font-size:15px;
  line-height:1.9;
  color:var(--muted);
}
/* =========================================
   GROVANCE MISSION & VISION SECTION
========================================= */

.grovance-mission-vision {
  margin-top: -50px;
  padding: 20px 20px;

}
 

.grovance-mv-container {
  position: relative;
  z-index: 2;
  width: 90%;
  max-width: 1200px;
  margin: auto;

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.grovance-mv-card {
  position: relative;
  padding: 42px 40px;
 
 
 
  
  overflow: hidden;

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

  

 
 

.grovance-mv-label {
  position: relative;
  z-index: 2;

  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;

  color: #23ad58;
  font-family: "Outfit", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.grovance-mv-label i {
  font-size: 7px;
}

.grovance-mv-card h2 {
  position: relative;
  z-index: 2;

  margin: 0 0 20px;
  color: #010521;
  font-family: "Outfit", sans-serif;
  font-size: clamp(32px, 3vw, 42px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.grovance-mv-card p {
  position: relative;
  z-index: 2;

  margin: 0;
  max-width: 500px;
  color: #687087;
  font-family: "Outfit", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.9;
}

/* Tablet */
@media (max-width: 991px) {
  .grovance-mission-vision {
    padding: 75px 20px;
  }

  .grovance-mv-container {
    width: 92%;
    gap: 24px;
  }

  .grovance-mv-card {
    padding: 35px 30px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .grovance-mission-vision {
    padding: 60px 16px;
  }

  .grovance-mv-container {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .grovance-mv-card {
    padding: 32px 25px;
    border-radius: 15px;
  }

  .grovance-mv-card h2 {
    font-size: 30px;
  }

  .grovance-mv-card p {
    font-size: 14px;
    line-height: 1.8;
  }
}

.philosophy-section{
  padding:120px 0;
  background:
    linear-gradient(rgba(1,5,33,.87),rgba(1,5,33,.90)),
    url("images/bg-campus.jpg") center/cover fixed no-repeat;
}

.philosophy-section .overlay{display:none;}

.philosophy-grid{gap:28px;}

.philosophy-box{
  min-height:310px;
  padding:38px 32px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;
  background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.045));
  backdrop-filter:blur(12px);
  box-shadow:0 20px 50px rgba(0,0,0,.16);
  transition:transform .35s ease,border-color .35s ease,background .35s ease;
}

.philosophy-box:hover{
  transform:translateY(-8px);
  border-color:rgba(35,173,88,.55);
  background:linear-gradient(145deg,rgba(35,173,88,.18),rgba(255,255,255,.055));
}

.philosophy-box .icon{
  width:66px;
  height:66px;
  margin-bottom:25px;
  border:0;
  border-radius:16px;
  background:rgba(35,173,88,.15);
  box-shadow:inset 0 0 0 1px rgba(35,173,88,.38);
}

.philosophy-box h3{
  font-size:25px;
  color:#fff;
  margin-bottom:14px;
}

.philosophy-box p{
  color:#dbe2f4;
  font-size:15px;
  line-height:1.8;
}

.campus-features{background:#fff;}

.feature-row{
  min-height:420px;
  background:#fff;
}

.feature-content{
  min-height:420px;
  padding:70px 8vw;
  background:#fff;
}

.feature-inner{
  max-width:520px;
}

.feature-icon{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  margin-bottom:22px;
  border-radius:14px;
  background:rgba(35,173,88,.10);
}

.feature-icon i{
  color:var(--primary);
  font-size:25px;
}

.feature-content h3{
  margin-bottom:16px;
  color:var(--navy);
  font-size:clamp(25px,2.2vw,34px);
  letter-spacing:-.02em;
}

.feature-content p{
  color:var(--muted);
  font-size:15px;
  line-height:1.85;
}

.feature-image::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(120deg,rgba(1,5,33,.08),transparent 55%);
  pointer-events:none;
}

.grovance-footer{margin-top:0;}

@media(max-width:992px){
  .history-grid{grid-template-columns:1fr;}
  .history-text{padding:25px;}
  .philosophy-grid{grid-template-columns:1fr;}
  .philosophy-box{min-height:auto;}
}

@media(max-width:767px){
  .page-banner{min-height:310px;}
  .history-section{padding:75px 0;}
  .feature-content{padding:50px 25px;}
}


/* =========================================================
   PHILOSOPHY SECTION - CLASSIC IMAGE BACKGROUND STYLE
   Matches the first reference screenshot
========================================================= */
.philosophy-section {
  position: relative;
  width: 100%;
  padding: 88px 0 82px;
  overflow: hidden;
  background: url("images/bg-campus.jpg") center center / cover no-repeat !important;
}

.philosophy-section .overlay {
  display: block !important;
  position: absolute;
  inset: 0;
  background: rgba(8, 35, 78, 0.84);
  z-index: 1;
}

.philosophy-section .container {
  width: 94%;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.philosophy-section .philosophy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 66px;
  align-items: start;
}

.philosophy-section .philosophy-box {
  min-height: 0 !important;
  padding: 0 !important;
  color: #fff;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}

.philosophy-section .philosophy-box:hover {
  transform: none !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.philosophy-section .philosophy-box .icon {
  width: 42px !important;
  height: 42px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 30px !important;
  border: 2px solid #2dcc70 !important;
  border-radius: 6px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.philosophy-section .philosophy-box .icon i {
  color: #2dcc70 !important;
  font-size: 24px !important;
}

.philosophy-section .philosophy-box h3 {
  margin: 0 0 24px !important;
  color: #2dcc70 !important;
  font-family: "Outfit", Arial, sans-serif;
  font-size: 22px !important;
  font-weight: 700;
  line-height: 1.25;
}

.philosophy-section .philosophy-box p {
  margin: 0 !important;
  color: #fff !important;
  font-family: "Outfit", Arial, sans-serif;
  font-size: 17px !important;
  font-weight: 400;
  line-height: 1.62 !important;
}

@media (max-width: 992px) {
  .philosophy-section {
    padding: 72px 0;
  }

  .philosophy-section .philosophy-grid {
    grid-template-columns: 1fr;
    gap: 52px;
  }

  .philosophy-section .philosophy-box p {
    font-size: 16px !important;
  }
}

@media (max-width: 576px) {
  .philosophy-section {
    padding: 58px 0;
  }

  .philosophy-section .container {
    width: 88%;
  }

  .philosophy-section .philosophy-box .icon {
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 22px !important;
  }

  .philosophy-section .philosophy-box h3 {
    font-size: 21px !important;
    margin-bottom: 16px !important;
  }

  .philosophy-section .philosophy-box p {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }
}

/* About Page Css End Here */

 
 

 
 
 
 





















































































.grovance-footer {
  background: #010521;
  color: #c8d0e6;
  padding: 70px 40px 35px;
  font-family: 'Poppins', sans-serif;
  margin-top: 70px;
}

.footer-container {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 1.8fr 1.4fr;
  gap: 45px;
}

.footer-logo img {
  max-width: 210px;
  margin-bottom: 30px;
}

.footer-brand p {
  font-size: 17px;
  line-height: 1.7;
  max-width: 330px;
  margin-bottom: 30px;
}

.footer-box h3 {
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 28px;
}

.footer-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-box ul li {
  margin-bottom: 18px;
}

.footer-box a {
  color: #c8d0e6;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  transition: 0.3s ease;
}

.footer-box a:hover {
  color: #23ad58;
}

.course-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 35px;
}

.social-icons {
  display: flex;
  gap: 14px;
}

.social-icons a {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 20px;
}

.social-icons a:hover {
  background: #23ad58;
  color: #ffffff;
  border-color: #23ad58;
}

.contact-item {
  display: flex;
  gap: 18px;
  margin-bottom: 26px;
  align-items: flex-start;
}

.contact-item i {
  color: #23ad58;
  font-size: 22px;
  min-width: 24px;
  margin-top: 4px;
}

.contact-item a {
  line-height: 1.5;
  font-size: 16px;
}

.footer-bottom {
  max-width: 1200px;
  margin: 55px auto 0;
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  text-align: left;
}

.footer-bottom p {
  margin: 0;
  color: #aeb7d2;
  font-size: 15px;
  font-weight: 500;
}

.footer-bottom p a {
  color: #ffffff;
}

/* Responsive */
@media (max-width: 1024px) {
  .footer-container {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .grovance-footer {
    padding: 50px 22px 28px;
  }

  .footer-container {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .course-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .footer-logo img {
    max-width: 190px;
  }
}


.grovance-footer {
  margin-top: 0px !important;
  padding-top: 55px !important;
}

/* Mobile fix */
@media (max-width: 768px) {
  .grovance-footer {
  
    padding-top: 40px !important;
  }
}
/* ==========================
   PAGE BANNER (shared across About, Testimonials, Courses,
   Mentors, Blog, Contact pages) - set the image per page with:
   <section class="page-banner" style="--banner-bg:url('assets/images/banners/your-image.jpg')">
========================== */
.page-banner {
  position: relative;
  width: 100%;
  min-height: 430px;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background-image: var(--banner-bg);
  background-position: center 35%;
  background-size: cover;
  background-repeat: no-repeat;
}

.page-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(90deg, rgba(1, 5, 33, 0.96) 0%, rgba(1, 5, 33, 0.72) 46%, rgba(1, 5, 33, 0.25) 100%);
}

.page-banner::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 110px;
  z-index: -1;
  background: linear-gradient(to top, rgba(1, 5, 33, 0.82), transparent);
}

.page-banner .banner-overlay {
  display: none;
}

.page-banner .banner-container {
  width: min(90%, 1320px);
  margin-inline: auto;
  position: relative;
  z-index: 2;
}

.page-banner .banner-content {
  max-width: 760px;
  padding: 200px 0 0px;
}

.page-banner .banner-content span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: #23ad58;
  font-family: "Outfit", sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

 

.page-banner .banner-content h1 {
  margin: 0;
  color: #fff;
  font-family: "Outfit", sans-serif;
  font-size: clamp(48px, 6vw, 82px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.page-banner .banner-content .gv-hero-search {
  margin-top: 26px;
}

@media (max-width: 992px) {
  .page-banner {
    min-height: 350px;
    background-position: 62% center;
  }
  .page-banner .banner-content {
    padding: 65px 0 58px;
  }
}

@media (max-width: 768px) {
  .page-banner {
    min-height: 280px;
    background-position: 65% center;
  }
  .page-banner::before {
    background: linear-gradient(90deg, rgba(1, 5, 33, 0.96), rgba(1, 5, 33, 0.6));
  }
  .page-banner .banner-container {
    width: min(88%, 1320px);
  }
  .page-banner .banner-content {
    padding: 152px 0 44px;
  }
  .page-banner .banner-content span {
    font-size: 13px;
  }
}

/* ================================
   FLOATING WHATSAPP + PHONE BUTTONS
   ================================ */
.grovance-floating-contact {
  position: fixed;
  right: 22px;
  bottom: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.grovance-floating-contact a {
  position: relative;
  overflow: visible;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  font-size: 23px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
  transition: transform .25s ease, box-shadow .25s ease;
  animation: grovanceFloat 3.2s ease-in-out infinite;
}

.grovance-floating-contact a::before,
.grovance-floating-contact a::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  z-index: -1;
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
}

.grovance-floating-contact a::before {
  animation: grovanceRadiation 2.2s ease-out infinite;
}

.grovance-floating-contact a::after {
  animation: grovanceRadiation 2.2s ease-out infinite .8s;
}

.grovance-floating-contact a:hover {
  transform: translateY(-4px) scale(1.07);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}

.grovance-floating-contact .grovance-phone-float {
  background: linear-gradient(135deg, #17335f, #28579d);
  box-shadow: 0 10px 26px rgba(23, 51, 95, 0.4);
  animation-delay: 0s;
}

.grovance-floating-contact .grovance-phone-float::before,
.grovance-floating-contact .grovance-phone-float::after {
  border: 2px solid rgba(40, 87, 157, 0.45);
  box-shadow: 0 0 0 8px rgba(40, 87, 157, 0.08);
}

.grovance-floating-contact .grovance-whatsapp-float {
  background: linear-gradient(135deg, #25D366, #1ba94c);
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.42);
  animation-delay: .45s;
}

.grovance-floating-contact .grovance-whatsapp-float::before,
.grovance-floating-contact .grovance-whatsapp-float::after {
  border: 2px solid rgba(37, 211, 102, 0.45);
  box-shadow: 0 0 0 8px rgba(37, 211, 102, 0.10);
}

@keyframes grovanceFloat {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes grovanceRadiation {
  0% {
    opacity: .55;
    transform: scale(0.92);
  }
  70% {
    opacity: .16;
  }
  100% {
    opacity: 0;
    transform: scale(1.45);
  }
}

@media (max-width: 768px) {
  .grovance-floating-contact {
    right: 14px;
    bottom: 18px;
    gap: 10px;
  }

  .grovance-floating-contact a {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }
}

/* =========================================================
   CERTIFICATE VERIFICATION FEATURE
   (Search / view / download a student's course certificate)
   ========================================================= */
.cert-page-hero {
  background: linear-gradient(135deg, #0c1d4e 0%, #142747 60%, #0c1d4e 100%);
  padding: 150px 20px 70px;
  text-align: center;
  color: #fff;
}
 
.cert-page-hero h1 {
  font-family: "Outfit", Arial, sans-serif;
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 700;
  margin-bottom: 12px;
}
.cert-page-hero p {
  max-width: 560px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.75);
  font-size: 15.5px;
  line-height: 1.7;
}

.cert-section {
  padding: 60px 20px 90px;
  background: #f6f8fc;
}
.cert-container {
  max-width: 620px;
  margin: 0 auto;
}

.cert-manual-entry {
  display: flex;
  gap: 12px;
  background: #fff;
  padding: 14px;
  border-radius: 16px;
  box-shadow: 0 15px 40px rgba(2, 9, 42, 0.08);
  border: 1px solid rgba(7, 19, 61, 0.08);
}
.cert-manual-entry input {
  flex: 1;
  border: 1px solid rgba(7, 19, 61, 0.14);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 15px;
  font-family: "Outfit", Arial, sans-serif;
  color: #15182b;
  outline: none;
}
.cert-manual-entry input:focus {
  border-color: #23ad58;
}
.cert-btn {
  border: none;
  background: linear-gradient(135deg, #1c51a4, #23ad58);
  color: #fff;
  padding: 14px 26px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}
.cert-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(28, 81, 164, 0.3);
}
.cert-btn-outline {
  background: #fff;
  color: #17335f;
  border: 1.5px solid rgba(7, 19, 61, 0.16);
  box-shadow: none;
}
.cert-btn-outline:hover {
  border-color: #23ad58;
  color: #23ad58;
  box-shadow: none;
}

#cert-manual-error {
  display: none;
  text-align: center;
  color: #d8474f;
  font-size: 13.5px;
  margin-top: 14px;
  line-height: 1.6;
}

.cert-status {
  text-align: center;
  padding: 50px 20px;
  color: #687087;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 15px 40px rgba(2, 9, 42, 0.08);
}
.cert-status i {
  font-size: 32px;
  color: #f2b827;
  display: block;
  margin-bottom: 14px;
}

/* Certificate result popup */
.cert-modal {
  position: fixed;
  inset: 0;
  background: rgba(1, 5, 33, 0.72);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  padding: 20px;
}
.cert-modal.open {
  opacity: 1;
  visibility: visible;
}
.cert-modal-box {
  background: #fff;
  border-radius: 18px;
  max-width: 560px;
  width: 100%;
  padding: 28px;
  text-align: center;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 30px 70px rgba(2, 9, 42, 0.3);
}
.cert-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  color: #687087;
  font-size: 26px;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
}
.cert-modal-close:hover {
  color: #15182b;
}
.cert-modal-box img {
  width: 100%;
  border: 1px solid rgba(7, 19, 61, 0.1);
  border-radius: 10px;
  margin-bottom: 18px;
}
.cert-modal-name {
  font-family: "Outfit", Arial, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #17335f;
  margin: 0 0 4px;
}
.cert-modal-service {
  color: #687087;
  font-size: 14px;
  margin: 0 0 20px;
}
.cert-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .cert-page-hero {
    padding: 130px 18px 50px;
  }
  .cert-manual-entry {
    flex-direction: column;
  }
  .cert-btn {
    width: 100%;
  }
  .cert-modal-box {
    padding: 18px 14px;
    border-radius: 14px;
  }
  .cert-modal-actions {
    flex-direction: column;
  }
  .cert-modal-actions .cert-btn {
    width: 100%;
  }
}

/* Staff QR generator page */
.cert-admin-note {
  color: #687087;
  text-align: center;
  margin-bottom: 26px;
  font-size: 14.5px;
  line-height: 1.7;
}
.cert-admin-note code {
  background: rgba(7, 19, 61, 0.06);
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 13px;
}
#qr-output {
  text-align: center;
  margin-top: 30px;
}
#qr-canvas-wrap {
  display: inline-block;
  background: #fff;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 15px 40px rgba(2, 9, 42, 0.08);
}
#qr-link-preview {
  color: #687087;
  font-size: 13px;
  margin-top: 14px;
  word-break: break-word;
}