/* Hero wrapper */
.hero-spot {
  position: relative;
  min-height: 50vh;           
}

/* Background image */
.hero-spot__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Gradient overlay ON the image (not affecting text) */
.hero-spot__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
 
}

/* Center the breadcrumb + title perfectly */
.hero-content {
  position: relative;
  z-index: 1;                 
  min-height: 44vh;          
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;    
  text-align: center;
  padding: 2rem 1rem;
  color: #FFFFFF;            
}

/*.hero-content .breadcrumb,*/
/*.hero-content .breadcrumb a,*/
/*.hero-content svg {*/
/*  color: #FFFFFF !important;  */
/*}*/

.breadcrumb-item + .breadcrumb-item::before {
  display: none;
}


/* ------------------------------------------------------------------------------------- */


.image-program{
    width: 111px;
    height : 107.73px
}

.image-horizon{
    width:250px;
}

 .programs-title{color:#916627 !important;}

 .program-button{
    background-color: #152349;   
 }
.program-button:hover {
    background-color: #6b86dd;
}

 /* FULL-WIDTH, edges tak tabs */
.active-links.nav-tabs{
  width:100%;
  display:flex;
  justify-content:space-between; /* first & last edges ko touch karein */
  align-items:center;
  border-bottom: none;            /* bootstrap wali line hata do */
  padding:0;
  margin:0;
}

/* link color = black, koi animation/hover color nahi */
.active-links .nav-link{
  color:#000 !important;
  background: transparent !important;
  border: none !important;
  position: relative;            /* underline ke liye */
  padding-inline: 0.25rem;       /* zaroorat ho to halka padding */
}
.active-links .nav-link:hover,
.active-links .nav-link:focus{
  color:#000 !important;
}


.active-links .nav-link.active{
  color:#000 !important;
}
.active-links .nav-link::after{
  content:"";
  position:absolute;
  inset-block-end: 2px;
  inset-inline-start: 0;
  height:3px;
  width:0;                       /* default: no line */
  background:#916627;            /* brand bar color */
  border-radius:2px;
}
.active-links .nav-link.active::after{
  width:50px;                    /* start → center ki taraf chhota bar */
}


#wrapwrap > main  {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 auto;
    flex: 1 0 auto;
    background-color:  #FAF8F5;;
}

.adjust_height {
    flex: 1 0 auto;
    min-height: 61vh;
}


/* =========================================
   Mobile Only Styles (Max Width 767px)
   ========================================= */
@media (max-width: 767px) {

    /* 1. Reset the Flexbox logic for scrolling */
    #programsNavContainer {
        overflow-x: auto !important;
        scroll-behavior: smooth;
        /* Hide scrollbar for clean look */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none;  /* IE 10+ */
    }
    #programsNavContainer::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    /* 2. Override the UL style to be a horizontal row, not full width space-between */
    .active-links.nav-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        width: auto !important;
        gap: 10px; /* Space between boxes */
        border-bottom: none !important;
        padding: 5px 0;
    }

    /* 3. Style the Tabs as Boxes (Pills) like screenshot */
    .active-links.nav-tabs .nav-link {
        border: 1px solid #dee2e6 !important;
        border-radius: 4px !important;
        background-color: #fff !important;
        color: #6c757d !important; /* Grey text for inactive */
        white-space: nowrap;
        padding: 8px 16px !important;
        font-weight: 500;
        font-size: 14px;
    }

    /* 4. Active Tab Style (Brown Background, White Text) */
    .active-links.nav-tabs .nav-link.active {
        background-color: #916627 !important; /* Your brand brown */
        color: #fff !important;
        border-color: #916627 !important;
    }

    /* 5. Hide the desktop "Underline" effect */
    .active-links .nav-link::after {
        display: none !important;
    }

    /* 6. Arrow Button Styling */
    .program-scroll-btn {
        text-decoration: none !important;
        font-weight: bold;
        color: #000;
        background: #fff;
        height: 100%;
        display: flex;
        align-items: center;
        padding: 0 5px !important;
    }
}