/* =========================================================
   RESPONSIVE FIX — load this file AFTER style.css and
   responsive.css so it can override the conflicting rules.
   ========================================================= */

/* ---------------------------------------------------------
   1) NAVBAR DROPDOWN FIX
   Problem: style.css opens dropdowns via :hover starting at
   min-width:992px, but the hamburger menu also starts at
   992px (up to 1199.98px). The two rules fight each other,
   which is why the dropdown breaks specifically at 1024px.

   Fix: hover fly-out dropdowns are now ONLY active on true
   desktop (1200px+). Everything below 1200px gets a single,
   consistent click-toggle / stacked-list dropdown, same as
   your mobile behaviour.
   --------------------------------------------------------- */

/* Kill the old hover-based dropdown below 1200px */
@media (max-width: 1199.98px) {
    .navbar .nav-item .dropdown-menu {
        position: static !important;
        top: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        transition: none !important;
        display: none;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        background: #f5f5f5 !important;
        border-radius: 0 !important;
        transform: none !important;
    }
    /* Bootstrap adds .show via JS when the dropdown-toggle is clicked */
    .navbar .nav-item .dropdown-menu.show {
        display: block !important;
    }
    .navbar .dropdown-item {
        display: block;
        width: 100%;
        padding: 10px 25px !important;
        margin: 0 !important;
        white-space: normal !important;
        font-size: 15px;
        line-height: 1.4;
        color: #474747 !important;
        background: #f5f5f5 !important;
    }
    .navbar .dropdown-item:hover,
    .navbar .dropdown-item:focus {
        color: #fff !important;
        background: #01589b !important;
    }
}

/* Restore the hover fly-out ONLY on real desktop (1200px+) */
@media (min-width: 1200px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        position: absolute;
        border: none;
        margin-top: 0;
        top: 150%;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
    }
    .navbar .nav-item:hover .dropdown-menu {
        top: 100%;
        visibility: visible;
        opacity: 1;
        transition: .5s;
    }
}

/* Unified hamburger layout for 992px–1199.98px (tablet / small laptop)
   — same treatment as below 992px, so 1024px behaves identically
   to a phone/tablet instead of half-desktop/half-mobile. */
@media (max-width: 1199.98px) {

    header.sticky-top,
   .navbar {
    padding: 10px 0 !important;
    height: auto !important;
    min-height: 75px;
}

       .navbar > .container {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .navbar-brand {
        margin-right: auto !important;
        padding: 0 !important;
        flex-shrink: 0;
    }

    .navbar-brand img {
        width: 150px !important;
        max-width: 150px !important;
        height: auto !important;
        display: block !important;
    }

    .navbar-toggler {
        display: flex !important;
        width: 56px;
        height: 42px;
        margin-left: auto;
        padding: 6px 10px;
        align-items: center;
        justify-content: center;
        border: 1px solid #035899;
        background: #005998;
        border-radius: 10px;
    }
    .navbar-toggler:focus { box-shadow: none; }

    /* Bootstrap ships ".navbar-expand-lg .navbar-collapse{display:flex!important}"
       so we must match that same selector + !important, or it wins instead of us. */
    .navbar-expand-lg .navbar-collapse {
    display: none !important;
    width: 100% !important;
    flex-basis: 100% !important;
    order: 3 !important;
    margin-top: 10px !important;
}

.navbar-expand-lg .navbar-collapse.show {
    display: block !important;
}
    .navbar-expand-lg .navbar-collapse.show,
    .navbar-collapse.show {
        display: block !important;
    }

    /* If the top link row (Webinar / Blogs / Gallery ...) lives outside
       .navbar-collapse in your markup, this hides it independently too. */
   .navbar-collapse.show .navbar-nav-top {
    display: block !important;
}
   

    .navbar-nav {
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff;
    }
    .navbar-nav .nav-item { width: 100%; }
    .navbar-nav .nav-link {
        width: 100%;
        padding: 12px 15px !important;
        margin: 0 !important;
        font-size: 16px;
        color: #474747 !important;
    }
    .navbar-nav.main-nav {
        border-top: 1px solid #0290D0;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* ---------------------------------------------------------
   2) RESPONSIVE BANNER / HERO IMAGES
   Problem: hero/banner sections only had "background-size:
   cover" with no height control, so on smaller screens they
   either got cropped oddly or left huge empty white space.
   --------------------------------------------------------- */

.hero-header,
.hero-header1,
.hero-header.internal-banner,
.Outcome,
.Scholastic-Areas,
.Visit-Us,
.Visit-Us.About,
.Learn-at-Infini,
.Invest,
.Why-Choose {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    width: 100%;
}

@media (max-width: 1199.98px) {
    .hero-header,
    .hero-header1,
    .hero-header.internal-banner {
        min-height: 380px;
    }
    .Courses-item.PGP,
    .Courses-item.MDP,
    .Courses-item.MDP2 {
        height: 20rem;
    }
}

@media (max-width: 991.98px) {
    .hero-header,
    .hero-header1,
    .hero-header.internal-banner {
        min-height: 320px;
    }
    .hero-header h1 { font-size: 32px; }
     .navbar{
        padding: 0 !important; 
    }
}

@media (max-width: 767.98px) {
    .hero-header,
    .hero-header1,
    .hero-header.internal-banner {
        min-height: 240px;
        background-position: top center !important;
    }
    .hero-header h1 { font-size: 22px; }
    .hero-header p { font-size: 10px; }
    .Courses-item.PGP,
    .Courses-item.MDP,
    .Courses-item.MDP2 {
        height: 18rem;
    }
}

@media (max-width: 575.98px) {
    .hero-header,
    .hero-header1,
    .hero-header.internal-banner {
        min-height: 200px;
    }
}

/* Generic safety net so no background/img section overflows on
   very small screens regardless of which class it uses */
[class*="hero-header"],
[class*="banner"] {
    max-width: 100%;
    overflow: hidden;
}



/* =========================================================
   MOBILE / TABLET - REMOVE RIGHT WHITE SPACE
   ========================================================= */

@media (max-width: 767.98px) {

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: clip !important;
    }

    header,
    main,
    footer,
    section,
    .navbar,
    .container,
    .container-fluid,
    .row,
    .wrapper,
    .content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .container,
    .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    img {
        max-width: 100% !important;
    }
}



/* =========================================================
   TABLET 768px - 991px
   ========================================================= */

@media (min-width: 768px) and (max-width: 991.98px) {

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: clip !important;
    }

    #page,
    .site,
    .wrapper,
    .content,
    main,
    header,
    footer {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .container,
    .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .row {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .navbar {
        width: 100% !important;
        max-width: 100% !important;
    }

    .navbar > .container {
        width: 100% !important;
        max-width: 100% !important;
    }

    img {
        max-width: 100% !important;
    }
}





/* =========================================================
   MOBILE + TABLET MENU
   320px to 1199px
   TOP MENU + MAIN MENU + SCROLL
   ========================================================= */

@media (max-width: 1199.98px) {

    /* Opened menu */
    .navbar-expand-lg .navbar-collapse.show {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;

        max-height: 75vh !important;

        overflow-y: auto !important;
        overflow-x: clip !important;

        background: #fff !important;
    }

    /* =========================================
       TOP MENU
       Webinar / Blogs / Events / Gallery...
       ========================================= */

    .navbar-collapse.show .navbar-nav-top {
        display: block !important;
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #fff !important;
    }

    .navbar-collapse.show .navbar-nav-top .nav-item {
        display: block !important;
        width: 100% !important;
    }

    .navbar-collapse.show .navbar-nav-top .nav-link {
        display: block !important;
        width: 100% !important;

        padding: 10px 15px !important;
        margin: 0 !important;

        font-size: 14px !important;
        color: #474747 !important;
    }

    /* =========================================
       MAIN MENU BELOW TOP MENU
       ========================================= */

    .navbar-collapse.show .main-nav {
        display: block !important;
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        border-top: 1px solid #0290D0 !important;

        background: #fff !important;
    }

    .navbar-collapse.show .main-nav > .nav-item {
        display: block !important;
        width: 100% !important;
    }

    .navbar-collapse.show .main-nav > .nav-item > .nav-link {
        display: block !important;
        width: 100% !important;

        padding: 12px 15px !important;
        margin: 0 !important;

        font-size: 15px !important;
        color: #474747 !important;
    }

    /* =========================================
       DROPDOWNS
       ========================================= */

    .navbar-collapse.show .main-nav .dropdown-menu {
        position: static !important;

        display: none !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        box-shadow: none !important;
        transform: none !important;

        background: #f5f5f5 !important;

        opacity: 1 !important;
        visibility: visible !important;
    }

    

    .navbar-collapse.show .main-nav .dropdown-menu.show {
        display: block !important;
    }

    .navbar-collapse.show .main-nav .dropdown-item {
        display: block !important;
        width: 100% !important;

        padding: 10px 25px !important;
        margin: 0 !important;

        white-space: normal !important;

        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    /* =========================================
       SCROLLBAR
       ========================================= */

    .navbar-collapse.show::-webkit-scrollbar {
        width: 7px;
    }

    .navbar-collapse.show::-webkit-scrollbar-thumb {
        background: #999;
        border-radius: 10px;
    }

    .navbar-collapse.show::-webkit-scrollbar-track {
        background: #eee;
    }
}












/* =========================================================
   COMMON BANNER OVERLAY
   Keeps banner text readable over faces/images
   ========================================================= */

.hero-header,
.hero-header1,
.hero-header.internal-banner,
.Outcome,
.Scholastic-Areas,
.Visit-Us,
.Visit-Us.About,
.Learn-at-Infini,
.Invest,
.Why-Choose,
.Success-Stories,
.Career-Transforming .Courses-item.Life-at,
.Career-Transforming .Courses-item.Infini-Star,
.Career-Transforming .Courses-item.Events-Activities {
    position: relative !important;
    overflow: hidden;
}

/* Dark transparent layer */
.hero-header::after,
.hero-header1::after,
.hero-header.internal-banner::after,
.Outcome::after,
.Scholastic-Areas::after,
.Visit-Us::after,
.Visit-Us.About::after,
.Learn-at-Infini::after,
.Invest::after,
.Why-Choose::after,
.Success-Stories::after,
.Career-Transforming .Courses-item.Life-at::after,
.Career-Transforming .Courses-item.Infini-Star::after,
.Career-Transforming .Courses-item.Events-Activities::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.20);
    z-index: 1;
    pointer-events: none;
}

/* Keep banner text/content above the overlay */
.hero-header > *,
.hero-header1 > *,
.hero-header.internal-banner > *,
.Outcome > *,
.Scholastic-Areas > *,
.Visit-Us > *,
.Visit-Us.About > *,
.Learn-at-Infini > *,
.Invest > *,
.Why-Choose > *,
.Success-Stories > *,
.Career-Transforming .Courses-item.Life-at > *,
.Career-Transforming .Courses-item.Infini-Star > *,
.Career-Transforming .Courses-item.Events-Activities > * {
    position: relative;
    z-index: 2;
}











/* =========================================
   BELOW 768px
   SHOW ONLY CENTER PART OF BANNER IMAGE
   ========================================= */

/* =========================================
   BELOW 768px
   SHOW CENTER PART OF BANNER IMAGE
   ========================================= */

@media (max-width: 767.98px) {

    .hero-header,
    .hero-header1,
    .hero-header.internal-banner {
        background-position: 50% center !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
    }

}




/* =========================================================
   FINAL MOBILE / TABLET DROPDOWN FIX
   Dropdown opens ONLY when clicked
   ========================================================= */

@media (max-width: 1199.98px) {

    /* Never open dropdown just because the mouse is over it */
    .navbar .nav-item:hover > .dropdown-menu {
        display: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Closed state */
    .navbar .nav-item > .dropdown-menu:not(.show) {
        display: none !important;
    }

    /* Open state - Bootstrap adds .show after click */
    .navbar .nav-item > .dropdown-menu.show {
        display: block !important;
    }
}

/* =========================================================
   GLOBAL RESPONSIVE ACCURACY, BOX PADDING & TEXT ALIGNMENT
   ========================================================= */

/* 1. Global Word Wrap & Prevent Text Overflow */
h1, h2, h3, h4, h5, h6,
.title, .Subtitle, .section-eyebrow,
p, span, a, li, label, div {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* 2. Badge & Pill Tags Responsive Padding & Alignment */
.badge,
.badge.bg-light,
.badge.bg-primary,
.badge.bg-secondary {
    white-space: normal !important;
    word-break: break-word !important;
    text-align: center !important;
    margin: 5px 4px !important;
    padding: 9px 16px !important;
    display: inline-block !important;
    line-height: 1.4 !important;
    max-width: 100% !important;
    border-radius: 30px !important;
    font-size: 14px;
}

.badge.bg-light.text-dark.border {
    background-color: #f8fbff !important;
    border: 1px solid #d0e3ff !important;
    color: #0160A0 !important;
    font-weight: 600;
}

/* 3. Card & Box Grid Spacing */
.card,
.Outcomes-item,
.Courses-item,
.shadow-sm {
    margin-bottom: 15px;
    word-wrap: break-word !important;
}

.card .card-body {
    padding: 1.5rem !important;
}

/* 4. Floating Action Buttons (Enquire Now / Talk to Expert) Overlap Fix */
@media (max-width: 991px) {
    .AdmissionEnquiry {
        right: 0 !important;
        transform: none !important;
        top: auto !important;
        bottom: 75px !important;
        border-radius: 20px 0 0 20px !important;
        min-width: auto !important;
        padding: 7px 12px !important;
        font-size: 13px !important;
        z-index: 9999 !important;
    }

    .AdmissionEnquiry2 {
        right: 0 !important;
        transform: none !important;
        top: auto !important;
        bottom: 25px !important;
        border-radius: 20px 0 0 20px !important;
        min-width: auto !important;
        padding: 7px 12px !important;
        font-size: 13px !important;
        z-index: 9999 !important;
    }
}

@media (max-width: 767px) {
    .badge,
    .badge.bg-light,
    .badge.bg-primary {
        font-size: 13px !important;
        padding: 7px 12px !important;
        margin: 4px 3px !important;
    }

    .card .card-body {
        padding: 1.25rem 1rem !important;
    }

    .section-padding, .section {
        padding-top: 2.25rem !important;
        padding-bottom: 2.25rem !important;
    }
}



/* ONLY MAKE NAVBAR STICKY */

header.sticky-top {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
}

/* NAVBAR STICKY */

header.sticky-top {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    align-self: flex-start !important;
}



/* =========================================================
   STICKY NAVBAR - TABLET + LAPTOP + DESKTOP
   768px AND ABOVE
   ========================================================= */

@media (min-width: 768px) {

    html,
    body {
        overflow-x: clip !important;
    }

    header.sticky-top {
        position: sticky !important;
        position: -webkit-sticky !important;
        top: 0 !important;
        z-index: 9999 !important;
    }
}






/* =========================================================
   ENQUIRE / TALK BUTTONS - MOBILE & TABLET
   RIGHT SIDE + VERTICAL CENTER
   ========================================================= */

@media (max-width: 1199.98px) {

    .AdmissionEnquiry,
    .AdmissionEnquiry2 {
        position: fixed !important;
        right: 0 !important;
        left: auto !important;
        transform: none !important;
        z-index: 9999 !important;
    }

    .AdmissionEnquiry {
        top: calc(67% + 0px) !important;
        bottom: auto !important;
    }

    .AdmissionEnquiry2 {
        top: calc(73% + 50px) !important;
        bottom: auto !important;
    }
}
/* =========================================================
   CAREER PAGE - MOBILE HERO
   ========================================================= */

@media (max-width: 767px) {

    /* BANNER */
    .os-hero {
        height: 245px !important;
        min-height: 245px !important;
        margin-bottom: 105px !important;
        overflow: visible !important;
        background-size: cover !important;
        background-position: center center !important;
    }

    .os-hero .container {
        height: 100% !important;
    }

    .os-hero .row {
        height: 100% !important;
        align-items: flex-end !important;
        justify-content: flex-end !important;
    }

    /* RIGHT-BOTTOM TEXT AREA */
    .os-hero .col-lg-6 {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 12px 12px 0 !important;
        text-align: right !important;
    }

   .os-hero .col-lg-6 > div:first-child {
    position: absolute !important;
    right: -14px !important;
    bottom: 12px !important;

    display: inline-block !important;

    border-left: 3px solid #ff5a5f !important;

    padding-left: 10px !important;

    max-width: 78% !important;

    text-align: right !important;

    vertical-align: bottom !important;
}

    /* HEADLINE */
    .os-hero-title {
        font-size: 27px !important;
        line-height: 1.08 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* SUBTITLE */
    .os-hero-subtitle {
        font-size: 12px !important;
        line-height: 1.25 !important;
        margin: 4px 0 0 !important;
        padding: 0 !important;
    }

    /* =====================================================
       BUTTONS BELOW BANNER
       ===================================================== */

    .os-hero .col-lg-6 > div:last-child {
        position: absolute !important;

        top: 100% !important;
        left: 0 !important;

        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        gap: 8px !important;

        margin: 10px 0 0 0 !important;

        z-index: 100 !important;
    }

    /* BUTTON SIZE */
    .os-hero .col-lg-6 > div:last-child a {
        width: 88% !important;
        max-width: 280px !important;

        padding: 9px 12px !important;

        font-size: 13px !important;
        line-height: 1.2 !important;

        text-align: center !important;

        white-space: nowrap !important;
    }

    /* FIRST BUTTON */
    .os-hero .col-lg-6 > div:last-child .os-btn-cyan {
        background-color: #00a896 !important;
        border: 2px solid #00a896 !important;
        color: #fff !important;
    }

    /* SECOND BUTTON
       IMPORTANT: it is below the image, so white text
       would disappear on the white background. */
    .os-hero .col-lg-6 > div:last-child .os-btn-outline {
        background-color: #fff !important;
        border: 2px solid #0060a0 !important;
        color: #0060a0 !important;
    }
}



/* Tablet Responsive - 768px to 991px */
@media (min-width: 768px) and (max-width: 991px) {

    .os-hero {
        height: 310px !important;
        background-position: center center !important;
    }

    .os-hero .container {
        height: 100%;
    }

    .os-hero .row {
        justify-content: flex-end !important;
        align-items: flex-end !important;
    }

    .os-hero .col-lg-6 {
        width: 75% !important;
        margin-left: auto;
        padding-bottom: 18px !important;
        text-align: left !important;
    }

    .os-hero-title {
        font-size: 36px !important;
        line-height: 1.15 !important;
    }

    .os-hero-subtitle {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }

    .os-hero .d-flex {
        justify-content: flex-start !important;
        padding-left: 24px !important;
        gap: 12px !important;
    }

    .os-hero .btn {
        padding: 8px 20px !important;
        font-size: 14px !important;
    }
}

/* Tablet only: below 1024px */
@media (min-width: 768px) and (max-width: 1023px) {

    .os-hero-title {
        font-size: 36px !important;
    }

    .os-hero-subtitle {
        font-size: 18px !important;
    }

    .os-hero .col-lg-6 {
        width: 61% !important;
        margin-left: auto;
        text-align: left !important;
    }

    .os-hero .d-flex {
        justify-content: flex-start !important;
        padding-left: 24px !important;
        gap: 12px !important;
    }

    .os-hero .btn {
        font-size: 14px !important;
        padding: 8px 20px !important;
    }
}
@media (min-width: 1024px) and (max-width: 1199px) {
    .os-hero-title {
        font-size: 34px !important;
        line-height: 1.15 !important;
    }

    .os-hero-subtitle {
        font-size: 17px !important;
    }
}

/* Hide the small bar above banner on desktop */
@media (min-width: 1024px) {
    .YOUR-BAR-CLASS {
        display: none !important;
    }
}




/* ===== Fix: navbar dropdowns not visible on mobile ===== */
@media (max-width: 991.98px) {

  /* Let dropdown menus flow inline inside the collapsed hamburger menu
     instead of being absolutely positioned (which gets clipped/hidden) */
  .navbar-collapse .dropdown-menu {
    position: static;
    float: none;
    width: 100%;
    margin: 0;
    padding-left: 15px;
    border: none;
    box-shadow: none;
    background: transparent;
  }

  /* Make sure the collapsing menu can actually grow to show the
     expanded submenu instead of clipping it */
  .navbar-collapse {
    max-height: 80vh;
    overflow-y: auto;
  }

  /* Optional: slightly indent/style submenu items so they look
     nested under their parent on mobile */
  .navbar-collapse .dropdown-item {
    color: #fff;
    opacity: 0.85;
  }
  .navbar-collapse .dropdown-item:hover,
  .navbar-collapse .dropdown-item:focus {
    opacity: 1;
    background: transparent;
  }
}