/* ===== Homepage re-skin v2 — Modern Gradient + Glassmorphism, purple (#4b1c6c) brand ===== */

:root {
  --gk-purple: #4b1c6c;
  --gk-purple-dark: #2f1147;
  --gk-purple-light: #8e44ec;
  --gk-purple-soft: #efe4f7;
  --gk-glass-bg: rgba(255, 255, 255, 0.55);
  --gk-glass-bg-2: rgba(255, 255, 255, 0.75);
  --gk-glass-border: rgba(255, 255, 255, 0.55);
  --gk-glow: 0 10px 34px rgba(75, 28, 108, 0.18);
  --gk-text: #453a53;
}

/* ============================================================
   HEADER / TOP BAR / FOOTER — purple brand, now with gradient
   ============================================================ */
.top-header-area {
  background: linear-gradient(120deg, #3a1554 0%, var(--gk-purple) 55%, #6a2f96 100%) !important;
}

.navbar-area.nav-bg-2,
.nav-bg-2 {
  background: #fff !important;
}

/* mobile hamburger toggles (meanmenu bars + the round dot-menu icon) —
   match the top header's purple instead of the theme's default red */
.mobile-responsive-nav .mobile-responsive-menu.mean-container a.meanmenu-reveal {
  color: var(--gk-purple) !important;
}

.mobile-responsive-nav .mobile-responsive-menu.mean-container a.meanmenu-reveal span {
  background: var(--gk-purple) !important;
}

.others-option-for-responsive .dot-menu .inner .icon {
  background-color: var(--gk-purple) !important;
}

.navbar-area.nav-bg-2 .desktop-nav .navbar-nav .nav-item a,
.navbar-area.nav-bg-2 .desktop-nav .others-options .icon {
  color: #000 !important;
}

.desktop-nav .navbar .navbar-nav .nav-item a:hover,
.desktop-nav .navbar .navbar-nav .nav-item a:focus,
.desktop-nav .navbar .navbar-nav .nav-item a.active,
.desktop-nav .navbar .navbar-nav .nav-item:hover a,
.desktop-nav .navbar .navbar-nav .nav-item:focus a,
.desktop-nav .navbar .navbar-nav .nav-item.active a {
  color: var(--gk-purple) !important;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu {
  background: #fff;
  backdrop-filter: none;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a {
  color: #1b2336;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a:hover,
.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a:focus,
.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a.active {
  color: var(--gk-purple);
}

.buy-now {
  background: linear-gradient(160deg, var(--gk-purple-light), var(--gk-purple)) !important;
}

.buy-now::after {
  background-color: var(--gk-purple) !important;
}

.buy-now-btn:hover {
  background-color: var(--gk-purple) !important;
}

.marquee-container {
  background: linear-gradient(90deg, var(--gk-purple-dark), var(--gk-purple), var(--gk-purple-light)) !important;
}

.footer-area {
  background: linear-gradient(160deg, #180c26 0%, #241533 55%, #341350 100%) !important;
}

.footer-widjet .list ul li a:hover {
  color: #d9aaff;
}

.copyright-area {
  background: linear-gradient(90deg, var(--gk-purple-dark), var(--gk-purple)) !important;
}

.copyright .social-content ul li a:hover {
  color: #d9aaff;
}

/* ============================================================
   SHARED — section backgrounds + gradient title style
   ============================================================ */
body {
  background: #fbfaff;
}

.section-title h2,
.section-title h2 a {
  position: relative;
  display: inline-block;
  font-weight: 800;
  padding-bottom: 16px;
  margin-bottom: 12px;
  color: var(--gk-purple) !important;
}

.section-title h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 70px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--gk-purple), var(--gk-purple-light));
}

.section-title {
  text-align: center;
  margin-bottom: 40px;
}

/* alternating soft gradient washes behind each content section */
.video-container {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--gk-glow);
}

.campus-information-area {
  background: linear-gradient(135deg, #f5eefb 0%, #fbfaff 45%, #eee3f9 100%);
}

.courses-area {
  background: linear-gradient(135deg, #fbfaff 0%, #f2e9fa 100%);
}

.admisssion-area {
  background: linear-gradient(135deg, #f8f3fd 0%, #ffffff 100%);
}

.health-care-area.bg-f4f6f9 {
  background: linear-gradient(135deg, #f6f0fb 0%, #fdfbff 100%) !important;
}

.events-area {
  background: linear-gradient(135deg, #fbfaff 0%, #f2e9fa 100%);
}

.podcasts-area.bg-f4f6f9 {
  background: linear-gradient(135deg, #fdfbff 0%, #f5eefb 100%) !important;
}

/* ============================================================
   ABOUT + COUNTERS
   ============================================================ */
.campus-content .campus-title h3 {
  color: var(--gk-purple);
  font-weight: 800;
  margin-bottom: 6px;
}

.campus-content .campus-title h4 {
  color: #8a7a99;
  font-weight: 500;
  font-style: italic;
  margin-bottom: 18px;
}

.campus-content .campus-title p {
  color: var(--gk-text) !important;
  line-height: 1.85;
}

.counter {
  margin-top: 25px;
}

.counter-card {
  background: var(--gk-glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--gk-glass-border);
  border-radius: 18px;
  text-align: center;
  padding: 22px 10px;
  margin-bottom: 15px;
  box-shadow: var(--gk-glow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.counter-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(75, 28, 108, 0.25);
}

.counter-card h3 {
  color: var(--gk-purple);
  font-weight: 800;
  margin-bottom: 6px;
  text-align: center;
}

.counter-card h3 .odometer {
  color: var(--gk-purple);
}

.counter-card h3 .target,
.counter-card h3 .target.heading-color {
  color: var(--gk-purple-light);
}

.counter-card p {
  color: #6d6078 !important;
  margin: 0;
  font-size: 14px;
  text-align: center;
}

.campus-information-area .default-btn {
  background: linear-gradient(120deg, var(--gk-purple), var(--gk-purple-light));
  border: none;
  color: #fff;
  border-radius: 30px;
  padding: 11px 28px;
  box-shadow: 0 8px 22px rgba(75, 28, 108, 0.3);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.campus-information-area .default-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(75, 28, 108, 0.4);
  color: #fff;
}

/* ---------- Apply Now form — glass card ---------- */
.estemate-form {
  background: var(--gk-glass-bg-2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--gk-glass-border);
  border-radius: 20px;
  padding: 32px 26px;
  box-shadow: var(--gk-glow);
}

.estemate-form h3 {
  color: var(--gk-purple);
  font-weight: 800;
  margin-bottom: 22px;
  letter-spacing: 0.5px;
}

.estemate-form .form-control,
.estemate-form .form-select {
  border: 1px solid rgba(75, 28, 108, 0.18);
  border-radius: 10px;
  padding: 11px 15px;
  margin-bottom: 14px;
  background: rgba(255, 255, 255, 0.7);
}

.estemate-form .form-control:focus,
.estemate-form .form-select:focus {
  border-color: var(--gk-purple);
  box-shadow: 0 0 0 3px rgba(75, 28, 108, 0.15);
  outline: none;
}

.estemate-form #btnSubmit2 {
  width: 100%;
  background: linear-gradient(120deg, var(--gk-purple), var(--gk-purple-light));
  border: none;
  border-radius: 10px;
  padding: 13px;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(75, 28, 108, 0.3);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.estemate-form #btnSubmit2:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(75, 28, 108, 0.4);
}

/* ============================================================
   OUR RECRUITERS — glass panel with logo grid
   ============================================================ */
/* seamless auto-scrolling marquee — .logo_items holds the 13 logos twice
   (see index.html) so translating exactly -50% loops without a visible jump */
.logos {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  background: var(--gk-glass-bg-2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--gk-glass-border);
  border-radius: 20px;
  padding: 28px 0;
  box-shadow: var(--gk-glow);
}

.logos::before,
.logos::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.logos::before {
  left: 0;
  background: linear-gradient(to right, var(--gk-glass-bg-2), rgba(255, 255, 255, 0));
}

.logos::after {
  right: 0;
  background: linear-gradient(to left, var(--gk-glass-bg-2), rgba(255, 255, 255, 0));
}

.logos .logo_items {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  gap: 46px;
  animation: gk-logo-scroll 26s linear infinite;
}

.logos:hover .logo_items {
  animation-play-state: paused;
}

@keyframes gk-logo-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.logos .logo_items img {
  height: 55px;
  max-height: 55px;
  width: auto;
  flex: 0 0 auto;
  border: none;
  filter: none;
  opacity: 1;
  transition: transform 0.25s ease;
}

.logos .logo_items img:hover {
  transform: scale(1.1);
}

/* ============================================================
   OUR CAMPUS / OUR EVENTS — video frames
   ============================================================ */
.admisssion-area video,
.events-area video {
  width: 100%;
  border-radius: 18px;
  box-shadow: var(--gk-glow);
  border: 1px solid var(--gk-glass-border);
}

/* ============================================================
   OUR DIRECTORS
   ============================================================ */
.health-care-slider .single-health-care-card.style-3 {
  background: var(--gk-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--gk-glass-border);
  border-radius: 18px;
  padding: 22px 14px 20px;
  box-shadow: var(--gk-glow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.health-care-slider .single-health-care-card.style-3:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(75, 28, 108, 0.25);
}

.health-care-slider .single-health-care-card.style-3 .img.board-team img {
  border-radius: 50%;
  width: 150px;
  height: 150px;
  object-fit: cover;
  margin: 0 auto;
  display: block;
  padding: 4px;
  background: linear-gradient(135deg, var(--gk-purple-light), var(--gk-purple));
  transition: transform 0.25s ease;
}

.health-care-slider .single-health-care-card.style-3 .img.board-team img:hover {
  transform: scale(1.05);
}

.health-care-slider .single-health-care-card.style-3 .board-team-content {
  text-align: center;
  margin-top: 14px;
}

.health-care-slider .single-health-care-card.style-3 .board-team-content h3 {
  color: var(--gk-purple);
  font-size: 18px;
  font-weight: 700;
}

/* ============================================================
   OUR INFRASTRUCTURE
   ============================================================ */
/* full-bleed photo cards with a gradient scrim; description reveals on hover */
.single-health-care-card.style1,
.single-health-care-card.style2 {
  position: relative;
  min-height: 420px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--gk-glow);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  margin-bottom: 24px;
}

.single-health-care-card.style1:hover,
.single-health-care-card.style2:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(75, 28, 108, 0.35);
}

.single-health-care-card.style1::before,
.single-health-care-card.style2::before {
  position: absolute;
  top: 18px;
  left: 20px;
  font-size: 46px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.5);
  z-index: 2;
  line-height: 1;
}

.single-health-care-card.style1::before {
  content: "01";
}

.single-health-care-card.style2::before {
  content: "02";
}

.single-health-care-card.style1 .img,
.single-health-care-card.style2 .img {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.single-health-care-card.style1 .img::after,
.single-health-care-card.style2 .img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(24, 10, 38, 0.95) 0%,
    rgba(43, 17, 66, 0.75) 30%,
    rgba(75, 28, 108, 0.15) 60%,
    transparent 80%
  );
}

.single-health-care-card.style1 .img img,
.single-health-care-card.style2 .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.single-health-care-card.style1:hover .img img,
.single-health-care-card.style2:hover .img img {
  transform: scale(1.08);
}

.single-health-care-card.style1 .health-care-content,
.single-health-care-card.style2 .health-care-content {
  background-color: transparent;
  box-shadow: none;
  max-width: none;
  margin: 0;
  position: absolute;
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  z-index: 2;
  padding: 24px 26px 28px;
}

.single-health-care-card.style1 .health-care-content h3,
.single-health-care-card.style2 .health-care-content h3 {
  color: #fff;
  font-weight: 700;
  margin-bottom: 10px;
}

.single-health-care-card.style1 .health-care-content h3 a,
.single-health-care-card.style2 .health-care-content h3 a {
  color: #fff;
}

.single-health-care-card.style1 .health-care-content p,
.single-health-care-card.style2 .health-care-content p {
  color: #e8ddf2 !important;
  line-height: 1.7;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.4s ease;
}

.single-health-care-card.style1:hover .health-care-content p,
.single-health-care-card.style2:hover .health-care-content p {
  max-height: 200px;
  opacity: 1;
  margin: 0 0 14px;
}

.single-health-care-card .read-more-btn {
  color: #fff;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 30px;
  background: linear-gradient(120deg, var(--gk-purple), var(--gk-purple-light));
  box-shadow: 0 6px 18px rgba(75, 28, 108, 0.4);
}

.single-health-care-card .read-more-btn:hover {
  color: #fff;
  transform: translateY(-2px);
}

.more-health-care.style2 {
  margin-top: 10px;
}

.more-health-care.style2 .read-more-btn.active {
  color: var(--gk-purple);
  border-bottom: 1px solid var(--gk-purple);
}

/* ============================================================
   OUR ACTIVITIES — podcast/video cards
   ============================================================ */
.single-podcasts-card.style2 {
  background: var(--gk-glass-bg-2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--gk-glass-border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--gk-glow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 20px;
}

.single-podcasts-card.style2:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(75, 28, 108, 0.25);
}

.single-podcasts-card.style2 .podcasts-image {
  position: relative;
  overflow: hidden;
}

.single-podcasts-card.style2 .podcasts-image img {
  width: 100%;
  display: block;
  transition: transform 0.4s ease;
}

.single-podcasts-card.style2:hover .podcasts-image img {
  transform: scale(1.08);
}

.single-podcasts-card.style2 .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gk-purple-light), var(--gk-purple));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.35), 0 10px 24px rgba(75, 28, 108, 0.4);
  transition: transform 0.25s ease;
}

.single-podcasts-card.style2 .play-btn:hover {
  transform: translate(-50%, -50%) scale(1.08);
}

.single-podcasts-card.style2 .podcast-content {
  padding: 18px 20px 22px;
}

.single-podcasts-card.style2 .podcast-content h3 {
  font-size: 16px;
  font-weight: 600;
  color: #2d2038;
  margin: 0;
}

/* ================= Responsive ================= */
@media only screen and (max-width: 991px) {
  .estemate-form {
    margin-top: 30px;
  }

  .health-care-slider .single-health-care-card.style-3 .img.board-team img {
    width: 130px;
    height: 130px;
  }

  .logos .logo_items {
    gap: 18px;
  }

  .logos .logo_items img {
    max-height: 45px;
  }
}

@media only screen and (max-width: 767px) {
  .section-title h2 {
    font-size: 24px;
  }

  .counter-card {
    padding: 16px 8px;
    border-radius: 14px;
  }

  .counter-card h3 {
    font-size: 20px;
  }

  .estemate-form {
    padding: 24px 18px;
    border-radius: 16px;
  }

  .single-health-care-card.style1,
  .single-health-care-card.style2 {
    min-height: 320px;
  }

  .single-health-care-card.style1 .health-care-content,
  .single-health-care-card.style2 .health-care-content {
    padding: 18px 16px 22px;
  }

  /* touch devices have no hover — keep the description visible always */
  .single-health-care-card.style1 .health-care-content p,
  .single-health-care-card.style2 .health-care-content p {
    max-height: 200px;
    opacity: 1;
    margin: 0 0 14px;
  }

  .single-podcasts-card.style2 .play-btn {
    width: 48px;
    height: 48px;
    font-size: 18px;
  }
}

@media only screen and (max-width: 575px) {
  .logos {
    padding: 20px 12px;
    border-radius: 16px;
  }

  .logos .logo_items {
    gap: 12px;
  }

  .logos .logo_items img {
    max-height: 36px;
  }

  .health-care-slider .single-health-care-card.style-3 .img.board-team img {
    width: 110px;
    height: 110px;
  }

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