* {
    margin: 0;
    box-sizing: border-box;
}

/* ==========================================================
   MSIT-HOME · Notice Marquee
   ========================================================== */

/* put this near the top of frontend.css */
html, body{
    overflow-x:hidden;
}



.msith-notice-bar {
    position: relative;
    width: 100vw;             /* stretch edge-to-edge */
    left: 50%; 
    margin-left: -50vw;       /* break out of theme wrapper */
    background: #ffd600;
    overflow: hidden;
    z-index: 999;
    padding: 3px 0;           /* add some vertical padding */
    white-space: nowrap;
}

.msith-notice-bar__track {
    display: inline-flex;
    animation: msith-scroll 25s linear infinite;
    will-change: transform;   /* optimize for animation */
    /* Start from right edge of viewport */
    transform: translateX(100vw);
    padding-top: 0.2rem;
}

.msith-notice-bar__content {
    display: inline-flex;
    gap: 0.5rem;
}

.msith-notice-bar__item {
    font-weight: 700;
    color: #d50000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 3rem;
}




.msith-notice-bar__separator {
    font-weight: 700;
    color: #d50000;
    opacity: 0.6;
    margin: 0 2rem;
}

.msith-notice-bar__item a {
    color: inherit;
    text-decoration: none !important;
    font-size: 1.1rem;
}

.msith-notice-bar__item a:hover {
    text-decoration: underline;
}

/* Pause animation on hover for better UX */
.msith-notice-bar:hover .msith-notice-bar__track {
    animation-play-state: paused;
}

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

/* ==========================================================
   MSIT-HOME · Hero Background Slider
   ========================================================== */
.msith-hero{
    position:relative;
    width:100vw;
    left:50%; margin-left:-50vw;        /* full-bleed breakout */
    height:450px;                       /* adjust if needed   */
    overflow:hidden;
}

.msith-hero__slide{
    position:absolute; inset:0;
    background-size:cover; background-position:center;
    opacity:0; transition:opacity .8s linear;
}

.msith-hero__slide.is-active{ opacity:1; }


/* ==========================================================
   MSIT-HOME · Hero + 3-Column overlay
   ========================================================== */

/* A. HERO — unchanged height, but give it relative context */
.msith-hero{
    position:relative;
    width:100vw; left:50%; margin-left:-50vw;
    height:430px;           /* use whatever height looks right */
    overflow:hidden;
}

/* B. 3-column wrapper now ABSOLUTE, sits 40px above hero bottom */
.msith-cols{
    position:relative;
    top:-9rem;                               /* overlaps the hero */
    left:50%; transform:translateX(-50%);
    width:90vw; max-width:1280px;
    background: #e4e5df;
background-color: #9e363abe;
padding: 0.5rem;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:2rem;
}

/* C. individual card */
.msith-col {
    background-color: #9E363A;
    color: #fff;
    padding: 1.25rem 0.2rem;
    border-radius: 9px;
    box-shadow: 0 4px 10px rgba(0,0,0,.25);
    text-align: center;
}



.upper-msith-col {
    color: #fff300;
    border-radius: 0 !important;
    padding: 0rem 0rem;
}

.upper-msith-col__body,
.upper-msith-col__body ul,
.upper-msith-col__body li,
.upper-msith-col__body a {
  background-color: #9E363A !important;  /* your desired color */
  color: black !important;                /* optional for contrast */
}

.upper-msith-col .dcms-notification-scroller {
  background-color: #9E363A !important;
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: relative !important;
}

/* Remove any inner glow or fading overlays */
.upper-msith-col .dcms-notification-scroller::before,
.upper-msith-col .dcms-notification-scroller::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  height: 0 !important;
}
.upper-msith-col .dcms-notification-scroller {
  max-height: 150px;
  overflow-y: auto;
}
.upper-msith-col:nth-child(2) {
  /* Custom styles for the middle column */
  background-color: #fff;
  color: #9E363A;
  box-shadow: none;
}
/* Target ONLY the 2nd upper-msith-col and its nested elements */
.upper-msith-col:nth-child(2),
.upper-msith-col:nth-child(2) .upper-msith-col__body,
.upper-msith-col:nth-child(2) .upper-msith-col__body ul,
.upper-msith-col:nth-child(2) .upper-msith-col__body li,
.upper-msith-col:nth-child(2) .upper-msith-col__body a,
.upper-msith-col:nth-child(2) .dcms-notification-scroller {
  background-color: #ffffff !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}


.upper-msith-col h3 {
    padding-top: 10px;
}

.msith-col h3 {
    margin: 0 0 0 0;
    font-size: 1.25rem;
    display: inline-flex;           /* ✅ inline-flex keeps it tight */
    align-items: center;
    justify-content: center;        /* ✅ Center the icon + text */
    gap: .55rem;
}

.msith-col h3 i {
    font-size: 1.3rem;
    line-height: 1;
}
/* Make sure the scrolling/list content stays left-aligned */
.msith-col__body,
.msith-sec-body,
.upper-msith-col .dcms-notification-scroller {
  text-align: left;
}





/* Keep links compact but readable */
.dcms-notification-scroller a {
  display: block;
  text-decoration: none;
  line-height: 1.15 !important;
  padding: 0;                       /* no extra vertical padding */
  padding-left: 1.5rem;
}

.msith-col__body{
    max-height:220px;
    overflow:hidden;                      /* ticker container */
    position:relative;
}

.upper-msith-col .msith-col__body ul{
    list-style:none; margin:0; padding:0 0 0 1.1rem;
}

.msith-col__body li{margin:.4rem 0;white-space:nowrap;}

.msith-col__body a{
    color:#080700; text-decoration:none !important; border-bottom:1px solid transparent;
}
.msith-col__body a:hover{border-bottom-color:#0e0c00}

/* Hide default ▸ arrow produced by some themes */
.msith-col__body summary{list-style:none}

/* D. notice underline removal in marquee column */
.msith-notice-bar__item a{border-bottom:none}

/* ==========================================================
   Vertical ticker animation
   ========================================================== */
@keyframes msith-vert{
    0%{ transform:translateY(0);}
    100%{ transform:translateY(-100%);}
}



.msith-section{
  position: relative;
  left: 50%; margin-left:-50vw;
  width: 100vw;
  top: -9rem;
  background: #e4e5df;
  padding: 0.5rem;
padding-left: 5rem;
padding-right: 5rem;
padding-bottom: 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  align-items: center;
  text-align: center;
}



.msith-sec-col {
    background: #9e363a;
    color: #fff;
    padding: 1.25rem 0.2rem;
    border-radius: 9px;
}

.msith-sec-col h3 {
    margin: 0 0 0 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    font-size: 1.25rem;
}

.msith-sec-body{max-height:200px;overflow:hidden}
.msith-sec-btns{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.75rem;align-items: center;justify-content: center;}
/* .msith-btn{
    background:#ffca28;color:#000;padding:.5rem 1rem;border-radius:4px;
    font-weight:600;text-decoration:none;display:inline-block;
} */
.msith-btn{
    width: 11rem;
  display: inline-flex;       /* fixes “text stuck at top” */
  align-items: center;        /* vertical centering */
  justify-content: center;    /* horizontal centering */
  padding: .6rem 1rem;
  border-radius: 9999px;      /* pill shape */
  background: #ffca28;
  color: #000;
  font-weight: 800;
  font-size: .8rem;
  line-height: 1.2;
  text-decoration: none !important;
  white-space: nowrap;        /* prevent wrap/overflow */
  box-sizing: border-box;
}
.msith-sec-btns .msith-btn:nth-of-type(4) {
  background-color: #A0180B;     /* or any custom color */
  color: #fff;
}
/* small screens: let buttons grow full width (optional) */
@media (max-width: 640px){
  .msith-btn{
    width: 100%;
    max-width: 320px;
  }
}
.msith-sec-col.is-center{text-align:center}
.msith-sec-col.is-center iframe{max-width:100%;height:auto; border: 3px solid white;}



/* ==========================================================
   LOWER 3-column block – normal flow, independent wrapper
   ========================================================== */
.msith-lower-cols{
    top: -9rem;                        /* overlaps the hero like .msith-cols */
    position: relative;
  left: 50%; margin-left:-50vw;
  width: 100vw;
  padding: 1.5rem;
padding-left: 5rem;
padding-right: 5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  gap: 2rem;
align-items: center;
text-align: center;
  z-index: 1;
}


/* cards inside are the same .msith-col you already styled, nothing
   else to add here */


/* ==========================================================
   COURSES OFFERED grid
   ========================================================== */
/* ===== Courses Offered ===== */
.msith-courses{
  position: relative;
  top: -9rem;                 /* overlaps the hero like .msith-cols */
  left: 50%;
  transform: translateX(-50%);
  width: 90vw;
  max-width: 1280px;
  gap: 2rem;

  margin: 0;                  /* centering handled by left/transform */
  z-index: 1;
}

.msith-courses__title     { text-align:center; margin:0 0 1rem; color:#7d1d1d; }

/* 4-up masonry-ish grid, centred even when the last row is short */
.msith-courses__grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:2rem;
    justify-content:center;      /* centre the final row */
}


.msith-course{
    background: linear-gradient(to bottom, #b6bdc2 0%, #9e363a 30%);

    color:#fff;
    padding:1.25rem;
    border-radius:6px;
    box-shadow:0 3px 6px rgba(0,0,0,.25);
    height:100%;             /* equal height */
}

.msith-course__heading { color:#ffca28; }   /* golden-yellow headings */
.msith-course__desc    { color:#f5f5f5; }
.msith-course__links a { color:#ffca28; transition: color .25s ease;}

.msith-course__heading a {
    letter-spacing: 0.5px;
    font-size: 0.8rem;
    font-weight: 800;
    color: white !important;
    transition: color .25s ease;
}
.msith-course__heading a:hover {
    color:#ffca28 !important;
}

.msith-course__thumb{
    width:100%; height:160px;                /* fixed ratio */
    background-size:cover;
    background-position:center;
    border-radius:4px;
    margin:0 0 1rem;                         /* padding all around */
    box-shadow:0 0 0 4px #fff inset;         /* white frame */
}


.msith-course__heading   { margin:0 0 .6rem; color:#fff300; font-size:1.1rem; }
.msith-course__desc      { flex:1 0 auto; font-size:.87rem; line-height:1.35; }
.msith-course__links     { margin:1rem 0 0; padding:0; list-style:none; }
.msith-course__links li  { margin:.3rem 0; }
.msith-course__links a   { color:#1565c0; text-decoration:none; border-bottom:1px solid transparent; }


/* inline link row --------------------------------------------------- */
.msith-course__links{
    margin:1rem 0 0;
    font-size:.8rem;
    display:flex;
    flex-wrap:wrap;              /* wraps nicely on narrow cards */
    gap:.4rem;
}
.msith-course__links a{
    color:white;               /* gold text like MSIT */
    text-decoration:none !important;
}
.msith-course__links a:hover{
    color: #fff300;
}
.msith-sep{
    color:white;
    opacity:.6;                  /* faint “ | ” like the live site */
}
.ug-courses {
    margin-top: 1rem;
    background-color: #9e363a;
    padding: 1rem;
}
.ug-courses h6 {
    color: white;
}

.ug-courses .msith-course {
    padding: 0 !important;
    box-shadow: none;
}

.sort-handle { cursor:move; text-align:center; }
.sort-handle .dashicons { line-height:28px; }


.ug-sort{ cursor:move;text-align:center }
.ug-sort .dashicons{ line-height:26px }
/* dark overlay for stats banner */
.msith-stats{position:relative;color:#fff}
.msith-stats::before{
    content:'';position:absolute;inset:0;
    background:#0006;
}
.msith-stats__wrap{position:relative}


/* ===== Key-Stats banner ===== */
.msith-stats{
    padding:3rem 0;
    text-align:center;
    background:#002d42;              /* fallback if no image */
    position:relative;               /* for ::before overlay */
    color:#fff;
}
.msith-stats__wrap{
    position:relative;               /* above overlay */
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:3rem;
}
.msith-stat__num{
    display:block;
    font:700 3rem/1 'Inter',sans-serif;
}
.msith-stat__label{
    opacity:.9;
    letter-spacing:.5px;
}


/* ---- make .msith-stats go full viewport width ---- */
.msith-stats{
    top: -7rem;
    width:100vw;
        height: 15rem;
        color: white;
        font-size: 1.25rem;
        font-weight: 500;
    align-content: center;            /* ignore theme wrapper */
    left:50%;               /* pull it out */
    margin-left:-50vw;
    position:relative;      /* already set, keeps overlay working */
    overflow:hidden;        /* hide any side bleed */
}

/* keep the inner content aligned with the site grid */
.msith-stats__wrap{
    width:90vw;
    max-width:1200px;       /* same as other sections */
    margin:0 auto;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:3rem;
}

.msith-stat__num {
    font-size: 5rem;
}

/* === Successful Entrepreneurs – full-width breakout ============= */
.msith-entre{     
    top: -7rem;                  /* section wrapper           */
    position:relative;
    width:100vw;                    /* stretch edge-to-edge      */
    left:50%;  margin-left:-50vw;   /* break out of theme shell  */
    background:#E4E5DF;             /* faint grey like live site */
}

.msith-entre__title{
    text-align:center;
    color:#083b5c;
}

/* viewport that hides the overflow */
.msith-entre__view{overflow:hidden;}

/* horizontal rail of cards */
.msith-entre__track{
    display:flex; gap:2rem;
    transition:transform .6s ease;
    will-change:transform;
}

/* ----- individual card ---------------------------------------- */
.msith-entre__card{
    flex:0 0 50%;       /* 2-up on desktop */
    max-width:50%;
    background:#E4E5DF;
    border-radius:8px;
    padding:2.25rem 4rem;
    text-align:center;
}

.msith-entre__photo{
    width:95px;height:95px;border-radius:50%;
    margin:0 auto 1.2rem;
    background-size:cover;background-position:center;
}

.msith-entre__quote      {padding-left:1rem;font-size:.95rem;line-height:1.45;margin:0 0 1.4rem;border-left: 2px solid black;}
.msith-entre__name       {color:#b71c1c;font-weight:700;margin:0 0 .3rem;text-align: center !important;border-left: 2px solid black;}
.msith-entre__role       {color:#005490;font-size:.85rem;margin:0;text-align: center !important;border-left: 2px solid black;}

/* ===== 1-up on mobile ===== */
@media(max-width:640px){
    .msith-entre__card{flex:0 0 100%;max-width:100%;}
}
/* Icon (photo) left, text right */
.msith-entre__card{
  display: grid;
  grid-template-columns: 110px 1fr;  /* left = photo, right = text */
  align-items: center;
  column-gap: 1rem;
  text-align: left;                  /* text aligns to the right column's left edge */
}

/* Park photo in left column, spanning all text rows */
.msith-entre__photo{
  grid-column: 1;
  grid-row: 1 / span 3;
  margin: 0;                         /* kill auto margins from old center layout */
}

/* Put text items in right column (and order them) */
.msith-entre__name{ grid-column: 2; grid-row: 2; margin: 0 0 .25rem; }
.msith-entre__role{ grid-column: 2; grid-row: 3; margin: 0 0 .5rem; }
.msith-entre__quote{ grid-column: 2; grid-row: 1; margin: 0; }

/* Mobile tweak */
@media (max-width: 780px){
  .msith-entre__card{ grid-template-columns: 80px 1fr; padding:1rem 2rem;}
  .msith-entre__photo{ width:80px; height:80px; }
}


/* ==========================================================
   Alumni-Speak strip
   ========================================================== */

   .msith-alumni {
    margin-top: -7rem;
   }

.msith-alumni__title{
    padding-top: 1rem;
    text-align:center;
    color:#00345c;  
    font-size: 1.8rem;
    font-weight: 700;
}

/* three-up on desktop, collapses to two / one by itself */
.msith-alumni__grid{
    position: relative;
  left: 50%;
  transform: translateX(-50%);
    width:90vw; max-width:1280px;
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
    gap:2rem;
    padding-bottom: 2rem;
}

/* responsive 16 : 9 wrapper — removes fixed width/height
   that come inside YouTube's copied <iframe> */
.msith-alumni__iframe{
    position:relative;
    padding-top:56.25%;              /* 16/9 = 56.25% */
    overflow:hidden;
    box-shadow:0 3px 8px rgba(0,0,0,.20);
}

.msith-alumni__iframe iframe{
    position:absolute; inset:0;
    width:100%; height:100%;
    border:0;
}


/* ==========================================================
   Success Stories – carousel version
   ========================================================== */
   .msith-entre{     
    top: -7rem;                  /* section wrapper           */
    position:relative;
    width:100vw;                    /* stretch edge-to-edge      */
    left:50%;  margin-left:-50vw;   /* break out of theme shell  */
    padding:1rem 0;                 /* vertical spacing          */
    background:#E4E5DF;             /* faint grey like live site */
}
.msith-success {
      position: relative;
  left: 50%; margin-left:-50vw;
    padding:1.5rem 0; 
    background: #E4E5DF;
    width: 100vw;
    position:relative;              /* pull it out */
    overflow:hidden; 
}
.msith-success__title     { text-align:center; margin:0; color:#00345c; padding-bottom: 1.5rem;}

/* viewport -------------------------------------------------- */
.msith-success__view{
    overflow-x:auto;                    /* scroll container   */
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling: touch;  /* smooth on iOS      */
    cursor:grab;
}

/* hide ugly native scrollbar (keeps keyboard accessibility) */
.msith-success__view::-webkit-scrollbar{ height:0 }

/* track ----------------------------------------------------- */
.msith-success__track{
    display:flex; gap:2rem;
    padding:0 4vw;            /* a bit of side-inset so edge cards centre nicely */
}

/* each card -------------------------------------------------- */
.msith-success__card{
    flex:0 0 420px;           /* fixed width → 3 fit on 1200px desktop */
    scroll-snap-align:center;
    background:#fff; border-radius:20px;
    padding:1.5rem; box-shadow:0 3px 10px rgba(0, 0, 0, 0.486);
    text-align:center; display:flex;flex-direction:column;align-items:center;
}
.msith-success__name{
  margin-top: auto;
  margin-bottom: 0;
  font-size: 1.1rem;
    font-weight:700;
    color:#00345c;
}

/* Sit flush with the card edge */
.msith-success__dept{
  margin-bottom: 0;
}
@media (max-width:640px){
    .msith-success__card{ flex-basis:80vw; } /* single card on phones */
}

.msith-success__photo{
    width:150px; height:150px; border-radius:6px;
    background-size:cover;background-position:center; margin:0 0 1rem;
}
.msith-success__desc { font-size:.9rem; line-height:1.45; margin:0 0 1rem; font-style: italic; }
.msith-success__title{ font-weight:700;}
.msith-success__dept { opacity:.8; font-size:.9rem; margin:0; font-size: 1rem;}


.msith-success__track::after {
  content: "";
  flex: 0 0 2vw; /* size of the right gutter, same as your left */
}








/* Extra Styling */

.msith-notice-bar__item a {
  color: inherit;
  text-decoration: none;     /* ✅ REMOVE underline */
  border-bottom: none;       /* ✅ REMOVE bottom border if present */
}

.msith-notice-bar__item a:hover {
  text-decoration: none;     /* ✅ KEEP clean on hover */
}
.dcms-notification-wrapper .dcms-notification-list .dcms-notification-item a.dcms-notification-link {
  text-decoration: none !important;
  border-bottom: none !important;
}

.upper-msith-col .dcms-notification-wrapper .dcms-notification-list .dcms-notification-item a.dcms-notification-link:hover {
color: #1565c0 !important;
}

.middle-one {
    margin: 0;
    padding: 0;
    background-color: #e4e5df;
    box-shadow: none;
}
.middle-one h5 {
    color: #00304d;
}


@media screen and (max-width: 1072px) {
.msith-section, .msith-lower-cols {
    padding-left: 3rem;
    padding-right: 3rem;
}
}

@media screen and (max-width: 602px) {

.msith-section, .msith-lower-cols {
    padding-left: 1rem;
    padding-right: 1rem;
}
}


/* ============== Recruiters strip ============== */

.msith-rec { width:100%; padding:1.5rem 0; }
.msith-rec__title { text-align:center; margin:0 0 2rem; color:#00304d; }
.msith-rec__view { overflow:hidden; margin:.75rem 0; }
.msith-rec__track { display:inline-flex; will-change:transform; } /* JS sets transform */
.msith-rec__logo { flex:0 0 auto; margin-right:4rem; }
.msith-rec__logo img { max-height:70px; width:auto; transition:filter .3s; filter:grayscale(0%); }
.msith-rec__logo img:hover { filter:none; }

@media (max-width:600px){
  .msith-rec__logo { margin-right:2rem; }
  .msith-rec__logo img { max-height:50px; }
}

 /* Key-Stats sizing */
.msith-stat__num{ font:700 clamp(2rem, 6vw, 4.5rem)/1 'Inter',system-ui; }
.msith-stat__label{ font-size:clamp(.8rem, 1.6vw, 1rem); }

/* Block MSIT-HOME ticker from moving DCMS lists */
.dcms-notification-scroller .dcms-notification-list { transform: none !important; }