/* =====================================================================
   JPS Vijayapura — Custom Overrides
   Loaded after style.css and page CSS. Keeps theme intact while
   refining the main menu spacing, redesigning the homepage banner,
   and adding light, consistent polish across the website.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Main menu — always one line, on every device.
      * >= 1300px : full inline menu on a single row.
      * < 1300px  : collapse to the mobile hamburger menu so the bar
                    never wraps or overflows.
      Selectors are scoped to the header element so they reliably
      override the per-page header-layout6 / header-layout14 rules.
   --------------------------------------------------------------------- */
.th-header.header-layout14 .main-menu > ul > li,
.th-header.header-layout6 .main-menu > ul > li {
  margin: 0 10px;
}

.th-header .main-menu > ul > li > a {
  font-size: 15px;
  letter-spacing: 0.01em;
}

/* Keep the logo / menu / button row on a single line. */
@media (min-width: 1300px) {
  .th-header.header-layout14 .menu-area .row,
  .th-header.header-layout6 .menu-area .row {
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
  }
  .th-header.header-layout14 .main-menu > ul,
  .th-header.header-layout6 .main-menu > ul {
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    white-space: nowrap;
  }
  .th-header.header-layout14 .menu-main-wrap,
  .th-header.header-layout6 .menu-main-wrap {
    gap: 28px;
  }
  .th-header.header-layout14 .main-menu > ul,
  .th-header.header-layout6 .main-menu > ul {
    padding-right: 8px;
  }
  .th-header.header-layout14 .header-button,
  .th-header.header-layout6 .header-button {
    padding-left: 4px;
  }
  /* Nudge the logo toward the left edge. */
  .th-header.header-layout14 .header-logo,
  .th-header.header-layout6 .header-logo {
    margin-left: -28px;
  }
  /* Shift the menu group a little to the right. */
  .th-header.header-layout14 .main-menu,
  .th-header.header-layout6 .main-menu {
    margin-right: -6px;
  }
}

/* Keep the Enroll Now button text on a single line. */
.th-header .header-button .th-btn {
  white-space: nowrap;
}

/* Tighten spacing on smaller desktops so the single row still fits. */
@media (max-width: 1499px) and (min-width: 1300px) {
  .th-header.header-layout14 .main-menu > ul > li,
  .th-header.header-layout6 .main-menu > ul > li {
    margin: 0 7px;
  }
  .th-header .main-menu > ul > li > a {
    font-size: 14px;
  }
}

/* Below 1300px the seven items can't share one line, so swap the
   inline menu for the hamburger toggle (still a single, tidy row). */
@media (max-width: 1299px) {
  .th-header.header-layout14 .main-menu.d-lg-inline-block,
  .th-header.header-layout6 .main-menu.d-lg-inline-block {
    display: none !important;
  }
  .th-header.header-layout14 .th-menu-toggle.d-lg-none,
  .th-header.header-layout6 .th-menu-toggle.d-lg-none {
    display: inline-block !important;
  }
}

/* ---------------------------------------------------------------------
   2. Homepage hero / banner — modern, cleaner redesign.
      - Vertically center the content card so the banner never looks
        empty at the top or pushed too far down.
      - Use a clean solid card with an accent edge and soft shadow.
      - Add a gentle gradient on the photo for readable contrast.
   --------------------------------------------------------------------- */
.hero-15 .th-hero-bg {
  position: absolute;
  inset: 0;
}

.hero-15 .th-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(13, 23, 47, 0.55) 0%,
    rgba(13, 23, 47, 0.30) 40%,
    rgba(13, 23, 47, 0.05) 72%
  );
  z-index: 1;
  pointer-events: none;
}

/* Vertically center the card within each slide */
.hero-15 .th-hero-slide {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 660px;
}

.hero-15 .container {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Hide the large decorative shadow word (also removed from markup). */
.hero-style15 .shadow-text {
  display: none !important;
}

.hero-15 .hero-style15 {
  margin: 70px 0;
  max-width: 600px;
  padding: 46px 48px;
  border-radius: 16px;
  background: var(--white-color);
  border-left: 6px solid var(--theme-color);
  box-shadow: 0 24px 60px rgba(13, 23, 47, 0.20);
}

.hero-15 .hero-style15 .hero-name {
  position: relative;
  margin-bottom: 20px;
  padding-bottom: 14px;
}

.hero-15 .hero-style15 .hero-name::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 3px;
  border-radius: 3px;
  background: var(--theme-color);
}

.hero-15 .hero-style15 .hero-title {
  font-size: 46px;
  line-height: 1.15;
  margin-bottom: 18px;
}

.hero-15 .hero-style15 .hero-text {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 28px;
}

.hero-15 .hero-style15 .btn-group {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  gap: 15px;
}

/* Responsive hero sizing */
@media (max-width: 1399px) {
  .hero-15 .th-hero-slide {
    min-height: 580px;
  }
  .hero-15 .hero-style15 .hero-title {
    font-size: 42px;
  }
}

@media (max-width: 1199px) {
  .hero-15 .th-hero-slide {
    min-height: 520px;
  }
  .hero-15 .hero-style15 {
    max-width: 540px;
    padding: 40px;
  }
  .hero-15 .hero-style15 .hero-title {
    font-size: 36px;
  }
}

@media (max-width: 991px) {
  .hero-15 .th-hero-slide {
    min-height: 460px;
  }
  .hero-15 .hero-style15 {
    max-width: 100%;
    margin: 50px 0;
  }
}

@media (max-width: 575px) {
  .hero-15 .th-hero-slide {
    min-height: 420px;
  }
  .hero-15 .hero-style15 {
    margin: 40px 0;
    padding: 32px 24px;
    border-radius: 14px;
  }
  .hero-15 .hero-style15 .hero-title {
    font-size: 30px;
  }
  .hero-15 .hero-style15 .btn-group .th-btn {
    width: 100%;
    text-align: center;
  }
}

/* ---------------------------------------------------------------------
   3. Inner-page breadcrumb banners — tighter, with a richer overlay
      so the title reads well over the photo.
   --------------------------------------------------------------------- */
.breadcumb-wrapper {
  padding: 120px 0;
  position: relative;
}

.breadcumb-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(13, 23, 47, 0.35) 0%,
    rgba(13, 23, 47, 0.55) 100%
  );
  z-index: 0;
  pointer-events: none;
}

.breadcumb-wrapper .container {
  position: relative;
  z-index: 1;
}

.breadcumb-title {
  letter-spacing: 0.01em;
}

@media (max-width: 991px) {
  .breadcumb-wrapper {
    padding: 90px 0;
  }
}

@media (max-width: 575px) {
  .breadcumb-wrapper {
    padding: 70px 0;
  }
}

/* ---------------------------------------------------------------------
   4. Site-wide polish — gentle hover lift and smoother transitions
      on the common interactive cards and buttons.
   --------------------------------------------------------------------- */
.th-btn {
  transition: transform 0.25s ease, box-shadow 0.25s ease,
    background-color 0.25s ease, color 0.25s ease;
}

.th-btn:hover {
  transform: translateY(-2px);
}

.feature-list,
.admission-card,
.infra-facility-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-list:hover,
.admission-card:hover,
.infra-facility-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 45px rgba(13, 23, 47, 0.12);
}

/* Keep images from overflowing rounded cards on hover */
.admission-card_img,
.infra-facility-card {
  overflow: hidden;
}

/* ---------------------------------------------------------------------
   5. Layout refresh — a cleaner, more modern look for the shared
      section components used across the homepage and inner pages.
      All changes are visual (no HTML structure changes), so the
      refresh carries over to every page that reuses these classes.
   --------------------------------------------------------------------- */

/* 5a. Section eyebrow ("sub-title") as a soft pill badge. */
.title-area .sub-title,
.sub-title {
  display: inline-block;
  padding: 7px 18px;
  border-radius: 999px;
  background: rgba(13, 94, 244, 0.08);
  color: var(--theme-color);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  margin-top: 0;
}

.title-area.text-center .sub-title {
  margin-left: auto;
  margin-right: auto;
}

/* Keep the badge readable when it sits on a dark section. */
[data-bg-src*="cta_bg"] .sub-title,
.text-white ~ * .sub-title {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* 5b. "Why Families Choose" feature cards — left-aligned, rounded,
       softer icon, and an inline arrow (no clipped overflow). */
.feature-list {
  text-align: left;
  border-radius: 18px;
  padding: 38px 32px 36px 32px;
  border: 1px solid rgba(13, 23, 47, 0.06);
  overflow: hidden;
}

.feature-list:after {
  border-radius: 18px;
}

.feature-list_icon {
  margin: 0 0 26px 0;
  width: 68px;
  height: 68px;
  line-height: 68px;
  font-size: 30px;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(13, 94, 244, 0.28);
}

.feature-list_title {
  font-size: 22px;
}

.feature-list .icon-btn {
  position: static;
  margin: 24px 0 0 0;
  left: auto;
  bottom: auto;
  --btn-size: 46px;
}

/* 5c. Program / admission cards — left aligned, larger media,
       cleaner type, consistent rounding. */
.admission-card {
  text-align: left;
  border-radius: 18px;
  padding: 22px 22px 30px 22px;
  border: 1px solid rgba(13, 23, 47, 0.06);
  box-shadow: 0 10px 40px rgba(0, 6, 18, 0.07);
}

.admission-card_img {
  margin-bottom: 26px;
  border-radius: 14px;
}

.admission-card_img img {
  width: 100%;
  height: 230px;
  object-fit: cover;
}

/* ---------------------------------------------------------------------
   6. Top contact bar — keep link hover readable.
      The homepage top bar (header-layout10) turns links dark on hover,
      which is invisible against the dark/blue bar. Force a light,
      clearly-visible hover state on every header top bar.
   --------------------------------------------------------------------- */
.th-header .header-top a:hover,
.th-header .header-top .header-links a:hover {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.admission-card_title {
  margin-bottom: 12px;
}

.admission-card .link-btn {
  margin-top: 4px;
}

/* 5d. News / blog cards — accent top edge and roomier type. */
.blog-recent {
  border-radius: 18px;
  border-top: 4px solid var(--theme-color);
}

.blog-recent .blog-content {
  padding: 34px 36px;
}

/* 5e. Facility cards (style2) — gentle rounding + hover lift. */
.feature-card.style2 {
  border-radius: 18px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card.style2:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 45px rgba(13, 23, 47, 0.12);
}

/* 5f. Section titles — a touch more weight and tighter leading. */
.sec-title {
  line-height: 1.18;
}

/* 5g. Image collage on the About section — unified rounding. */
.img-box12 .img1 img,
.img-box12 .img2 img,
.video-box2 img {
  border-radius: 18px;
}

/* Responsive tweaks for the refreshed cards. */
@media (max-width: 575px) {
  .feature-list {
    padding: 30px 24px;
  }
  .admission-card_img img {
    height: 200px;
  }
  .blog-recent .blog-content {
    padding: 28px 22px;
  }
}