.elementor-341 .elementor-element.elementor-element-9fb92b2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-341 .elementor-element.elementor-element-0af1f94{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-341 .elementor-element.elementor-element-c1ef41f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-341 .elementor-element.elementor-element-c1ef41f:not(.elementor-motion-effects-element-type-background), .elementor-341 .elementor-element.elementor-element-c1ef41f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F4F8FC;}.elementor-341 .elementor-element.elementor-element-035bd62{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-341 .elementor-element.elementor-element-035bd62:not(.elementor-motion-effects-element-type-background), .elementor-341 .elementor-element.elementor-element-035bd62 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F4F8FC;}.elementor-341 .elementor-element.elementor-element-2cb8b6d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-341 .elementor-element.elementor-element-25d22a0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-341 .elementor-element.elementor-element-f472500{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-341 .elementor-element.elementor-element-f472500:not(.elementor-motion-effects-element-type-background), .elementor-341 .elementor-element.elementor-element-f472500 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E2EFF7;}.elementor-341 .elementor-element.elementor-element-2407c5d{background-color:#E2EFF7;}.elementor-341 .elementor-element.elementor-element-a907096{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-341 .elementor-element.elementor-element-a907096:not(.elementor-motion-effects-element-type-background), .elementor-341 .elementor-element.elementor-element-a907096 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E2EFF7;}.elementor-341 .elementor-element.elementor-element-0db1486{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-341 .elementor-element.elementor-element-0db1486:not(.elementor-motion-effects-element-type-background), .elementor-341 .elementor-element.elementor-element-0db1486 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F4F8FC;}.elementor-341 .elementor-element.elementor-element-ce3ce1c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-341 .elementor-element.elementor-element-ce3ce1c:not(.elementor-motion-effects-element-type-background), .elementor-341 .elementor-element.elementor-element-ce3ce1c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F8FAFC;}.elementor-341 .elementor-element.elementor-element-ef839fe{padding:0px 0px 0px 0px;}.elementor-341 .elementor-element.elementor-element-4125ce9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-341 .elementor-element.elementor-element-4125ce9:not(.elementor-motion-effects-element-type-background), .elementor-341 .elementor-element.elementor-element-4125ce9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#005188;}@media(min-width:768px){.elementor-341 .elementor-element.elementor-element-c1ef41f{--content-width:1440px;}.elementor-341 .elementor-element.elementor-element-2cb8b6d{--content-width:1440px;}.elementor-341 .elementor-element.elementor-element-25d22a0{--content-width:1440px;}.elementor-341 .elementor-element.elementor-element-f472500{--content-width:1440px;}.elementor-341 .elementor-element.elementor-element-0db1486{--content-width:1440px;}.elementor-341 .elementor-element.elementor-element-ce3ce1c{--content-width:1440px;}.elementor-341 .elementor-element.elementor-element-4125ce9{--content-width:1440px;}}@media(max-width:1024px){.elementor-341 .elementor-element.elementor-element-9fb92b2{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}@media(max-width:767px){.elementor-341 .elementor-element.elementor-element-9fb92b2{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS for html, class: .elementor-element-b5a879f *//* ============================================================
   MSI About — Merged Image Story Section
   Scoped only to .about-story-merged
   ============================================================ */

.about-story-merged{
  position:relative !important;
  overflow:hidden !important;
  min-height:720px !important;
  padding:120px 40px !important;
  display:flex !important;
  align-items:center !important;
  background:#003d6b !important;
}

/* full background image */
.about-story-merged .about-story-bg{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  background-image:url('https://images.unsplash.com/photo-1566221857770-508d35ee6220?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  transform:scale(1.02) !important;
}

/* merged blue overlay */
.about-story-merged .about-story-overlay{
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  background:
    linear-gradient(90deg, rgba(0,40,70,.36) 0%, rgba(0,61,107,.58) 42%, rgba(0,25,55,.92) 100%),
    linear-gradient(180deg, rgba(0,81,136,.10) 0%, rgba(0,25,55,.22) 100%) !important;
  pointer-events:none !important;
}

/* content layout */
.about-story-merged .about-story-wrap{
  position:relative !important;
  z-index:2 !important;
  display:grid !important;
  grid-template-columns:1fr 1.05fr !important;
  gap:72px !important;
  align-items:center !important;
}

/* left title */
.about-story-merged .about-story-title h2{
  font-family:'Overused Grotesk',sans-serif !important;
  font-size:clamp(36px,4.2vw,64px) !important;
  font-weight:800 !important;
  letter-spacing:-2.5px !important;
  line-height:1.08 !important;
  color:#fff !important;
  margin:0 !important;
  max-width:560px !important;
}

.about-story-merged .about-story-title h2 span{
  color:#78BDE7 !important;
}

/* subtle line below heading, blue not yellow */
.about-story-merged .about-story-title h2::after{
  content:'' !important;
  display:block !important;
  width:128px !important;
  height:3px !important;
  margin-top:24px !important;
  border-radius:99px !important;
  background:linear-gradient(90deg, #78BDE7, rgba(120,189,231,.10)) !important;
}

/* right text */
.about-story-merged .about-story-content{
  max-width:660px !important;
  margin-left:auto !important;
}

.about-story-merged .about-story-content p{
  font-size:16px !important;
  line-height:1.72 !important;
  color:rgba(255,255,255,.82) !important;
  margin:0 0 22px !important;
  font-weight:400 !important;
}

.about-story-merged .about-story-content p:last-child{
  margin-bottom:0 !important;
}

.about-story-merged .about-story-content strong{
  color:#fff !important;
  font-weight:800 !important;
}

/* remove any old story card/fact styles if Elementor keeps old children */
.about-story-merged .story-facts,
.about-story-merged .sf{
  display:none !important;
}

/* tablet */
@media(max-width:1100px){
  .about-story-merged{
    min-height:auto !important;
    padding:100px 40px !important;
  }

  .about-story-merged .about-story-wrap{
    grid-template-columns:1fr !important;
    gap:42px !important;
  }

  .about-story-merged .about-story-content{
    max-width:760px !important;
    margin-left:0 !important;
  }

  .about-story-merged .about-story-overlay{
    background:
      linear-gradient(180deg, rgba(0,25,55,.58) 0%, rgba(0,25,55,.92) 100%),
      linear-gradient(90deg, rgba(0,81,136,.25), rgba(0,25,55,.40)) !important;
  }
}

/* mobile */
@media(max-width:768px){
  .about-story-merged{
    padding:84px 16px !important;
  }

  .about-story-merged .about-story-title h2{
    font-size:clamp(32px,10vw,46px) !important;
    letter-spacing:-1.6px !important;
  }

  .about-story-merged .about-story-title h2::after{
    width:96px !important;
    margin-top:20px !important;
  }

  .about-story-merged .about-story-content p{
    font-size:14.5px !important;
    line-height:1.75 !important;
    margin-bottom:18px !important;
  }
}
/* ============================================================
   MSI About Story — Image left focus + darker text side
   Paste at VERY BOTTOM of Global CSS
   ============================================================ */

/* Move/focus image more to the left */
.about-story-merged .about-story-bg{
  background-position:left center !important;
}

/* Make right paragraph area extremely dim */
.about-story-merged .about-story-overlay{
  background:
    linear-gradient(
      90deg,
      rgba(0, 24, 45, .22) 0%,
      rgba(0, 35, 62, .46) 32%,
      rgba(0, 18, 36, .88) 55%,
      rgba(0, 10, 24, .98) 76%,
      rgba(0, 8, 20, .99) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 25, 55, .12) 0%,
      rgba(0, 25, 55, .38) 100%
    ) !important;
}

/* Add an extra dark readable zone behind paragraph column */
.about-story-merged .about-story-content{
  position:relative !important;
  z-index:2 !important;
}

.about-story-merged .about-story-content::before{
  content:'' !important;
  position:absolute !important;
  top:-38px !important;
  right:-90px !important;
  bottom:-38px !important;
  left:-48px !important;
  z-index:-1 !important;
  background:
    linear-gradient(
      90deg,
      rgba(0, 18, 36, .18) 0%,
      rgba(0, 18, 36, .74) 28%,
      rgba(0, 10, 24, .92) 100%
    ) !important;
  border-radius:0 !important;
  pointer-events:none !important;
}

/* Keep text clean and readable */
.about-story-merged .about-story-content p{
  color:rgba(255,255,255,.84) !important;
}

.about-story-merged .about-story-content strong{
  color:#fff !important;
}

/* Mobile/tablet: make entire background darker for readability */
@media(max-width:1100px){
  .about-story-merged .about-story-bg{
    background-position:left center !important;
  }

  .about-story-merged .about-story-overlay{
    background:
      linear-gradient(
        180deg,
        rgba(0, 18, 36, .72) 0%,
        rgba(0, 12, 28, .96) 100%
      ) !important;
  }

  .about-story-merged .about-story-content::before{
    display:none !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-efb4349 *//* ============================================================
   MSI Milestones — keep original timeline, fix connection + hover text
   Paste at VERY BOTTOM of Global CSS
   ============================================================ */

/* More space for connected 6-step timeline */
.milestones-enhanced .ms-track{
  position:relative !important;
  margin-top:70px !important;
  min-height:560px !important;
  padding-bottom:30px !important;
}

/* One connected horizontal line through all dots */
.milestones-enhanced .ms-path-wrap{
  position:absolute !important;
  top:260px !important;
  left:0 !important;
  right:0 !important;
  height:6px !important;
  z-index:1 !important;
}

.milestones-enhanced .ms-path-line{
  left:7% !important;
  right:7% !important;
  top:0 !important;
  height:4px !important;
  background:linear-gradient(90deg, var(--p), var(--a), var(--p)) !important;
  box-shadow:0 8px 24px rgba(0,81,136,.18) !important;
}

/* Force all 6 nodes into one connected row */
.milestones-enhanced .ms-nodes{
  display:grid !important;
  grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
  gap:0 !important;
  min-height:560px !important;
  position:relative !important;
  z-index:2 !important;
}

/* Each node becomes a fixed timeline column */
.milestones-enhanced .ms-node{
  position:relative !important;
  min-height:560px !important;
  display:block !important;
}

/* Dot always sits on the same connected line */
.milestones-enhanced .ms-dot{
  position:absolute !important;
  top:260px !important;
  left:50% !important;
  transform:translate(-50%, -50%) !important;
  width:58px !important;
  height:58px !important;
  z-index:4 !important;
  box-shadow:0 10px 28px rgba(0,81,136,.24) !important;
}

.milestones-enhanced .ms-node:hover .ms-dot{
  transform:translate(-50%, -50%) scale(1.12) !important;
}

/* Cards: same old timeline style, just better aligned */
.milestones-enhanced .ms-card{
  position:absolute !important;
  left:50% !important;
  width:92% !important;
  max-width:230px !important;
  min-height:190px !important;
  padding:28px 20px !important;
  border-radius:18px !important;
  background:#fff !important;
  border:1px solid rgba(0,81,136,.12) !important;
  box-shadow:0 10px 30px rgba(0,81,136,.07) !important;
  overflow:hidden !important;
  text-align:center !important;
  z-index:3 !important;
  transition:
    transform .32s ease,
    box-shadow .32s ease,
    border-color .32s ease !important;
}

/* Odd cards above line */
.milestones-enhanced .ms-node:nth-child(odd) .ms-card{
  top:0 !important;
  margin:0 !important;
  transform:translateX(-50%) !important;
}

/* Even cards below line */
.milestones-enhanced .ms-node:nth-child(even) .ms-card{
  top:330px !important;
  margin:0 !important;
  transform:translateX(-50%) !important;
}

/* Vertical connector stems */
.milestones-enhanced .ms-stem{
  position:absolute !important;
  left:50% !important;
  width:2px !important;
  height:72px !important;
  margin:0 !important;
  transform:translateX(-50%) !important;
  background:linear-gradient(180deg, rgba(0,81,136,.08), rgba(0,81,136,.28), rgba(0,81,136,.08)) !important;
  z-index:2 !important;
}

.milestones-enhanced .ms-node:nth-child(odd) .ms-stem{
  top:190px !important;
}

.milestones-enhanced .ms-node:nth-child(even) .ms-stem{
  top:260px !important;
}

/* Normal visible content */
.milestones-enhanced .ms-card-main{
  position:relative !important;
  z-index:3 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:130px !important;
  transition:opacity .25s ease, transform .25s ease !important;
}

.milestones-enhanced .ms-year{
  font-size:30px !important;
  font-weight:800 !important;
  line-height:1 !important;
  margin-bottom:12px !important;
  letter-spacing:-1px !important;
}

.milestones-enhanced .ms-title{
  font-size:16px !important;
  font-weight:800 !important;
  color:var(--tx) !important;
  line-height:1.25 !important;
}

/* Hide lengthy text before hover */
.milestones-enhanced .ms-desc{
  position:absolute !important;
  inset:0 !important;
  z-index:5 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:24px 20px !important;
  margin:0 !important;
  color:rgba(255,255,255,.93) !important;
  font-size:13.5px !important;
  line-height:1.55 !important;
  font-weight:500 !important;
  text-align:center !important;
  opacity:0 !important;
  visibility:hidden !important;
  transform:translateY(12px) !important;
  transition:opacity .28s ease, visibility .28s ease, transform .28s ease !important;
}

/* Country image background appears only on hover */
.milestones-enhanced .ms-card::after{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  background-image:var(--ms-bg) !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  opacity:0 !important;
  transform:scale(1.12) translateY(16px) !important;
  transition:opacity .35s ease, transform .8s cubic-bezier(.22,1,.36,1) !important;
}

/* dark overlay for readable hover text */
.milestones-enhanced .ms-card::before{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  background:
    linear-gradient(180deg, rgba(0,25,55,.30) 0%, rgba(0,25,55,.94) 100%),
    linear-gradient(90deg, rgba(0,81,136,.42), rgba(0,25,55,.74)) !important;
  opacity:0 !important;
  transition:opacity .3s ease !important;
}

/* Hover card effect */
.milestones-enhanced .ms-node:hover .ms-card{
  border-color:rgba(120,189,231,.75) !important;
  box-shadow:0 20px 54px rgba(0,81,136,.18) !important;
}

.milestones-enhanced .ms-node:nth-child(odd):hover .ms-card{
  transform:translateX(-50%) translateY(-7px) !important;
}

.milestones-enhanced .ms-node:nth-child(even):hover .ms-card{
  transform:translateX(-50%) translateY(-7px) !important;
}

.milestones-enhanced .ms-node:hover .ms-card::after{
  opacity:1 !important;
  transform:scale(1.04) translateY(0) !important;
}

.milestones-enhanced .ms-node:hover .ms-card::before{
  opacity:1 !important;
}

.milestones-enhanced .ms-node:hover .ms-card-main{
  opacity:0 !important;
  transform:scale(.96) !important;
}

.milestones-enhanced .ms-node:hover .ms-desc{
  opacity:1 !important;
  visibility:visible !important;
  transform:translateY(0) !important;
}

/* Dot colors for new 5th and 6th items */
.milestones-enhanced .ms-node:nth-child(5) .ms-dot{
  background:var(--p) !important;
}

.milestones-enhanced .ms-node:nth-child(6) .ms-dot{
  background:var(--a) !important;
}

/* Tablet */
@media(max-width:1100px){
  .milestones-enhanced .ms-track{
    min-height:auto !important;
  }

  .milestones-enhanced .ms-path-wrap{
    display:none !important;
  }

  .milestones-enhanced .ms-nodes{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:24px !important;
    min-height:auto !important;
  }

  .milestones-enhanced .ms-node{
    min-height:auto !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
  }

  .milestones-enhanced .ms-dot,
  .milestones-enhanced .ms-card,
  .milestones-enhanced .ms-stem{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    transform:none !important;
  }

  .milestones-enhanced .ms-card{
    width:100% !important;
    max-width:none !important;
    min-height:210px !important;
    order:1 !important;
    margin-top:16px !important;
  }

  .milestones-enhanced .ms-stem{
    height:28px !important;
    order:0 !important;
  }

  .milestones-enhanced .ms-dot{
    order:0 !important;
  }
}

/* Mobile */
@media(max-width:768px){
  .milestones-enhanced .ms-nodes{
    grid-template-columns:1fr !important;
  }

  .milestones-enhanced .ms-desc{
    position:relative !important;
    inset:auto !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    margin-top:16px !important;
    padding:16px !important;
    border-radius:14px !important;
    background:rgba(0,81,136,.08) !important;
    color:var(--mu) !important;
  }

  .milestones-enhanced .ms-node:hover .ms-card-main{
    opacity:1 !important;
    transform:none !important;
  }
}
/* ============================================================
   MSI Milestones — Brand-matching hover overlay color
   Paste at VERY BOTTOM of Global CSS
   ============================================================ */

.milestones-enhanced .ms-desc{
  background:
    linear-gradient(
      180deg,
      rgba(0,81,136,.28) 0%,
      rgba(0,81,136,.72) 42%,
      rgba(0,61,107,.94) 100%
    ),
    linear-gradient(
      90deg,
      rgba(120,189,231,.18) 0%,
      rgba(0,81,136,.38) 45%,
      rgba(0,61,107,.76) 100%
    ),
    var(--ms-bg) !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}

/* Slight blue glow on hover, matching MSI palette */
.milestones-enhanced .ms-node:hover .ms-card{
  box-shadow:
    0 20px 48px rgba(0,81,136,.18),
    0 0 0 1px rgba(120,189,231,.22) !important;
  border-color:rgba(120,189,231,.75) !important;
}

/* Make hover paragraph still readable but softer */
.milestones-enhanced .ms-desc{
  color:rgba(255,255,255,.94) !important;
}

/* Optional: make the card accent line brand blue */
.milestones-enhanced .ms-card::before{
  background:
    linear-gradient(
      180deg,
      rgba(0,81,136,.22) 0%,
      rgba(0,81,136,.72) 46%,
      rgba(0,61,107,.94) 100%
    ),
    linear-gradient(
      90deg,
      rgba(120,189,231,.18),
      rgba(0,81,136,.70)
    ) !important;
}
/* ============================================================
   MSI Milestones — Make hover background image more visible
   Paste at VERY BOTTOM of Global CSS
   ============================================================ */

.milestones-enhanced .ms-desc{
  background:
    linear-gradient(
      180deg,
      rgba(0,81,136,.08) 0%,
      rgba(0,81,136,.32) 45%,
      rgba(0,61,107,.62) 100%
    ),
    linear-gradient(
      90deg,
      rgba(0,81,136,.10) 0%,
      rgba(0,61,107,.28) 55%,
      rgba(0,35,62,.50) 100%
    ),
    var(--ms-bg) !important;

  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  color:#fff !important;
  text-shadow:0 2px 8px rgba(0,0,0,.42) !important;
}

/* Make card hover slightly cleaner and image-focused */
.milestones-enhanced .ms-node:hover .ms-card{
  box-shadow:
    0 20px 48px rgba(0,81,136,.16),
    0 0 0 1px rgba(120,189,231,.28) !important;
  border-color:rgba(120,189,231,.72) !important;
}

/* Remove any extra dark overlay if an older milestone override is still active */
.milestones-enhanced .ms-card::before{
  opacity:0 !important;
}
/* ============================================================
   MSI Milestones — Fully Responsive Timeline Fix
   Paste at VERY BOTTOM of Global CSS
   Desktop: connected horizontal timeline
   Tablet/Mobile: clean responsive card timeline
   ============================================================ */

.milestones-enhanced{
  background:var(--w) !important;
  overflow:hidden !important;
}

.milestones-enhanced .ms-track{
  position:relative !important;
  margin-top:70px !important;
  min-height:560px !important;
  padding-bottom:30px !important;
}

/* Desktop horizontal path */
.milestones-enhanced .ms-path-wrap{
  position:absolute !important;
  top:260px !important;
  left:0 !important;
  right:0 !important;
  height:6px !important;
  z-index:1 !important;
  display:block !important;
}

.milestones-enhanced .ms-path-line{
  position:absolute !important;
  left:7% !important;
  right:7% !important;
  top:0 !important;
  height:4px !important;
  border-radius:100px !important;
  background:linear-gradient(90deg, var(--p), var(--a), var(--p)) !important;
  box-shadow:0 8px 24px rgba(0,81,136,.18) !important;
}

/* Desktop 6-column timeline */
.milestones-enhanced .ms-nodes{
  display:grid !important;
  grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
  gap:0 !important;
  min-height:560px !important;
  position:relative !important;
  z-index:2 !important;
}

.milestones-enhanced .ms-node{
  position:relative !important;
  min-height:560px !important;
  display:block !important;
}

/* Dot on timeline */
.milestones-enhanced .ms-dot{
  position:absolute !important;
  top:260px !important;
  left:50% !important;
  transform:translate(-50%, -50%) !important;
  width:58px !important;
  height:58px !important;
  border-radius:50% !important;
  z-index:4 !important;
  background:var(--p) !important;
  border:3px solid #fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:0 10px 28px rgba(0,81,136,.24) !important;
  transition:transform .3s ease, box-shadow .3s ease !important;
}

.milestones-enhanced .ms-dot svg{
  width:24px !important;
  height:24px !important;
}

.milestones-enhanced .ms-node:hover .ms-dot{
  transform:translate(-50%, -50%) scale(1.12) !important;
  box-shadow:0 16px 38px rgba(0,81,136,.28) !important;
}

/* Dot colors */
.milestones-enhanced .ms-node:nth-child(1) .ms-dot{background:var(--p) !important;}
.milestones-enhanced .ms-node:nth-child(2) .ms-dot{background:#087fca !important;}
.milestones-enhanced .ms-node:nth-child(3) .ms-dot{background:#0066aa !important;}
.milestones-enhanced .ms-node:nth-child(4) .ms-dot{background:#0891B2 !important;}
.milestones-enhanced .ms-node:nth-child(5) .ms-dot{background:var(--p) !important;}
.milestones-enhanced .ms-node:nth-child(6) .ms-dot{background:var(--a) !important;}

/* Cards */
.milestones-enhanced .ms-card{
  position:absolute !important;
  left:50% !important;
  width:92% !important;
  max-width:230px !important;
  min-height:190px !important;
  padding:28px 20px !important;
  border-radius:18px !important;
  background:#fff !important;
  border:1px solid rgba(0,81,136,.12) !important;
  box-shadow:0 10px 30px rgba(0,81,136,.07) !important;
  overflow:hidden !important;
  text-align:center !important;
  z-index:3 !important;
  transition:
    transform .32s ease,
    box-shadow .32s ease,
    border-color .32s ease !important;
}

/* Odd cards above line */
.milestones-enhanced .ms-node:nth-child(odd) .ms-card{
  top:0 !important;
  transform:translateX(-50%) !important;
}

/* Even cards below line */
.milestones-enhanced .ms-node:nth-child(even) .ms-card{
  top:330px !important;
  transform:translateX(-50%) !important;
}

/* Vertical stems */
.milestones-enhanced .ms-stem{
  position:absolute !important;
  left:50% !important;
  width:2px !important;
  height:72px !important;
  margin:0 !important;
  transform:translateX(-50%) !important;
  background:linear-gradient(180deg, rgba(0,81,136,.08), rgba(0,81,136,.28), rgba(0,81,136,.08)) !important;
  z-index:2 !important;
}

.milestones-enhanced .ms-node:nth-child(odd) .ms-stem{
  top:190px !important;
}

.milestones-enhanced .ms-node:nth-child(even) .ms-stem{
  top:260px !important;
}

/* Main visible content */
.milestones-enhanced .ms-card-main{
  position:relative !important;
  z-index:3 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:130px !important;
  transition:opacity .25s ease, transform .25s ease !important;
}

.milestones-enhanced .ms-year{
  font-size:30px !important;
  font-weight:800 !important;
  line-height:1 !important;
  margin-bottom:12px !important;
  letter-spacing:-1px !important;
  color:var(--p) !important;
}

.milestones-enhanced .ms-title{
  font-size:16px !important;
  font-weight:800 !important;
  color:var(--tx) !important;
  line-height:1.25 !important;
}

/* Hidden description on desktop, appears on hover */
.milestones-enhanced .ms-desc{
  position:absolute !important;
  inset:0 !important;
  z-index:5 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:24px 20px !important;
  margin:0 !important;
  color:#fff !important;
  text-shadow:0 2px 8px rgba(0,0,0,.42) !important;
  font-size:13.5px !important;
  line-height:1.55 !important;
  font-weight:500 !important;
  text-align:center !important;
  opacity:0 !important;
  visibility:hidden !important;
  transform:translateY(12px) !important;
  transition:opacity .28s ease, visibility .28s ease, transform .28s ease !important;
  background:
    linear-gradient(
      180deg,
      rgba(0,81,136,.08) 0%,
      rgba(0,81,136,.32) 45%,
      rgba(0,61,107,.62) 100%
    ),
    linear-gradient(
      90deg,
      rgba(0,81,136,.10) 0%,
      rgba(0,61,107,.28) 55%,
      rgba(0,35,62,.50) 100%
    ),
    var(--ms-bg) !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}

/* Hover image layer */
.milestones-enhanced .ms-card::after{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  background-image:var(--ms-bg) !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  opacity:0 !important;
  transform:scale(1.12) translateY(16px) !important;
  transition:opacity .35s ease, transform .8s cubic-bezier(.22,1,.36,1) !important;
}

/* Keep extra dark overlay off */
.milestones-enhanced .ms-card::before{
  opacity:0 !important;
  display:none !important;
  content:none !important;
}

/* Hover effect */
.milestones-enhanced .ms-node:hover .ms-card{
  border-color:rgba(120,189,231,.72) !important;
  box-shadow:
    0 20px 48px rgba(0,81,136,.16),
    0 0 0 1px rgba(120,189,231,.28) !important;
}

.milestones-enhanced .ms-node:nth-child(odd):hover .ms-card,
.milestones-enhanced .ms-node:nth-child(even):hover .ms-card{
  transform:translateX(-50%) translateY(-7px) !important;
}

.milestones-enhanced .ms-node:hover .ms-card::after{
  opacity:1 !important;
  transform:scale(1.04) translateY(0) !important;
}

.milestones-enhanced .ms-node:hover .ms-card-main{
  opacity:0 !important;
  transform:scale(.96) !important;
}

.milestones-enhanced .ms-node:hover .ms-desc{
  opacity:1 !important;
  visibility:visible !important;
  transform:translateY(0) !important;
}

/* ============================================================
   Tablet — 2-column cards, no broken absolute timeline
   ============================================================ */

@media(max-width:1100px){
  .milestones-enhanced{
    padding-left:24px !important;
    padding-right:24px !important;
  }

  .milestones-enhanced .ms-track{
    margin-top:44px !important;
    min-height:auto !important;
    padding-bottom:0 !important;
  }

  .milestones-enhanced .ms-path-wrap{
    display:none !important;
  }

  .milestones-enhanced .ms-nodes{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:22px !important;
    min-height:auto !important;
  }

  .milestones-enhanced .ms-node{
    min-height:auto !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    position:relative !important;
    background:#fff !important;
    border:1px solid rgba(0,81,136,.10) !important;
    border-radius:22px !important;
    padding:22px !important;
    box-shadow:0 10px 28px rgba(0,81,136,.06) !important;
  }

  .milestones-enhanced .ms-dot,
  .milestones-enhanced .ms-card,
  .milestones-enhanced .ms-stem{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;
  }

  .milestones-enhanced .ms-dot{
    order:1 !important;
    width:58px !important;
    height:58px !important;
    margin:0 auto 16px !important;
  }

  .milestones-enhanced .ms-stem{
    display:none !important;
  }

  .milestones-enhanced .ms-card{
    order:2 !important;
    width:100% !important;
    max-width:none !important;
    min-height:auto !important;
    padding:0 !important;
    border:none !important;
    box-shadow:none !important;
    background:transparent !important;
    overflow:visible !important;
  }

  .milestones-enhanced .ms-card-main{
    min-height:auto !important;
  }

  .milestones-enhanced .ms-year{
    font-size:30px !important;
  }

  .milestones-enhanced .ms-title{
    font-size:17px !important;
  }

  .milestones-enhanced .ms-desc{
    position:relative !important;
    inset:auto !important;
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    margin-top:14px !important;
    padding:0 !important;
    background:none !important;
    color:var(--mu) !important;
    text-shadow:none !important;
    font-size:14px !important;
    line-height:1.68 !important;
  }

  .milestones-enhanced .ms-card::after,
  .milestones-enhanced .ms-card::before{
    display:none !important;
    content:none !important;
  }

  .milestones-enhanced .ms-node:hover .ms-dot{
    transform:translateY(-2px) scale(1.04) !important;
  }

  .milestones-enhanced .ms-node:hover .ms-card,
  .milestones-enhanced .ms-node:nth-child(odd):hover .ms-card,
  .milestones-enhanced .ms-node:nth-child(even):hover .ms-card{
    transform:none !important;
    box-shadow:none !important;
  }

  .milestones-enhanced .ms-node:hover .ms-card-main{
    opacity:1 !important;
    transform:none !important;
  }

  .milestones-enhanced .ms-node:hover .ms-desc{
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
  }
}

/* ============================================================
   Mobile — clean vertical timeline
   ============================================================ */

@media(max-width:768px){
  .milestones-enhanced{
    padding:62px 18px !important;
  }

  .milestones-enhanced .wrap{
    max-width:100% !important;
  }

  .milestones-enhanced .cx{
    margin-bottom:0 !important;
  }

  .milestones-enhanced .sh{
    font-size:30px !important;
    line-height:1.08 !important;
    letter-spacing:-1px !important;
  }

  .milestones-enhanced .sp{
    font-size:14.5px !important;
    line-height:1.7 !important;
  }

  .milestones-enhanced .ms-track{
    margin-top:38px !important;
    padding-bottom:0 !important;
  }

  .milestones-enhanced .ms-nodes{
    display:flex !important;
    flex-direction:column !important;
    gap:20px !important;
  }

  .milestones-enhanced .ms-node{
    display:grid !important;
    grid-template-columns:58px 1fr !important;
    align-items:start !important;
    column-gap:16px !important;
    min-height:auto !important;
    padding:0 !important;
    background:transparent !important;
    border:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
    position:relative !important;
  }

  /* vertical connector line */
  .milestones-enhanced .ms-node::before{
    content:'' !important;
    position:absolute !important;
    left:29px !important;
    top:62px !important;
    bottom:-22px !important;
    width:2px !important;
    background:linear-gradient(180deg, rgba(0,81,136,.20), rgba(120,189,231,.45)) !important;
    z-index:0 !important;
  }

  .milestones-enhanced .ms-node:last-child::before{
    display:none !important;
  }

  .milestones-enhanced .ms-dot{
    grid-column:1 !important;
    grid-row:1 !important;
    width:58px !important;
    height:58px !important;
    min-width:58px !important;
    margin:0 !important;
    position:relative !important;
    z-index:2 !important;
    top:auto !important;
    left:auto !important;
    transform:none !important;
  }

  .milestones-enhanced .ms-card{
    grid-column:2 !important;
    grid-row:1 !important;
    width:100% !important;
    max-width:none !important;
    min-height:auto !important;
    position:relative !important;
    top:auto !important;
    left:auto !important;
    transform:none !important;
    margin:0 !important;
    padding:22px 20px !important;
    border-radius:18px !important;
    background:#fff !important;
    border:1px solid rgba(0,81,136,.12) !important;
    box-shadow:0 10px 28px rgba(0,81,136,.07) !important;
    text-align:left !important;
    overflow:hidden !important;
  }

  .milestones-enhanced .ms-stem{
    display:none !important;
  }

  .milestones-enhanced .ms-card-main{
    display:block !important;
    min-height:auto !important;
    opacity:1 !important;
    transform:none !important;
    text-align:left !important;
  }

  .milestones-enhanced .ms-year{
    font-size:28px !important;
    margin-bottom:8px !important;
    color:var(--p) !important;
  }

  .milestones-enhanced .ms-title{
    font-size:17px !important;
    color:var(--tx) !important;
    line-height:1.25 !important;
  }

  .milestones-enhanced .ms-desc{
    position:relative !important;
    inset:auto !important;
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    margin-top:12px !important;
    padding:0 !important;
    background:none !important;
    color:var(--mu) !important;
    text-shadow:none !important;
    font-size:14px !important;
    line-height:1.68 !important;
    text-align:left !important;
  }

  .milestones-enhanced .ms-card::before,
  .milestones-enhanced .ms-card::after{
    display:none !important;
    content:none !important;
  }

  .milestones-enhanced .ms-node:hover .ms-dot{
    transform:none !important;
  }

  .milestones-enhanced .ms-node:hover .ms-card,
  .milestones-enhanced .ms-node:nth-child(odd):hover .ms-card,
  .milestones-enhanced .ms-node:nth-child(even):hover .ms-card{
    transform:none !important;
    box-shadow:0 12px 32px rgba(0,81,136,.10) !important;
    border-color:rgba(120,189,231,.45) !important;
  }

  .milestones-enhanced .ms-node:hover .ms-card-main{
    opacity:1 !important;
    transform:none !important;
  }

  .milestones-enhanced .ms-node:hover .ms-desc{
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
  }
}

/* Very small phones */
@media(max-width:430px){
  .milestones-enhanced{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .milestones-enhanced .ms-node{
    grid-template-columns:48px 1fr !important;
    column-gap:14px !important;
  }

  .milestones-enhanced .ms-node::before{
    left:24px !important;
    top:54px !important;
  }

  .milestones-enhanced .ms-dot{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
  }

  .milestones-enhanced .ms-dot svg{
    width:20px !important;
    height:20px !important;
  }

  .milestones-enhanced .ms-card{
    padding:20px 18px !important;
  }

  .milestones-enhanced .ms-year{
    font-size:25px !important;
  }

  .milestones-enhanced .ms-title{
    font-size:16px !important;
  }

  .milestones-enhanced .ms-desc{
    font-size:13.5px !important;
  }
}
/* ============================================================
   MSI Milestones — HARD MOBILE/TABLET FIX
   Paste at the VERY BOTTOM of Global CSS
   This overrides all old absolute timeline rules on mobile
   ============================================================ */

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

  .milestones-enhanced{
    padding:70px 18px !important;
    overflow:hidden !important;
  }

  .milestones-enhanced .wrap{
    width:100% !important;
    max-width:100% !important;
    padding-left:0 !important;
    padding-right:0 !important;
    margin-left:auto !important;
    margin-right:auto !important;
    overflow:visible !important;
  }

  .milestones-enhanced .cx{
    max-width:100% !important;
    margin:0 auto 34px !important;
    text-align:center !important;
  }

  .milestones-enhanced .sh{
    font-size:30px !important;
    line-height:1.08 !important;
    letter-spacing:-1px !important;
    margin-bottom:14px !important;
  }

  .milestones-enhanced .sp{
    max-width:360px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    font-size:14.5px !important;
    line-height:1.7 !important;
  }

  .milestones-enhanced .ms-track{
    width:100% !important;
    max-width:100% !important;
    margin:34px auto 0 !important;
    min-height:0 !important;
    height:auto !important;
    padding:0 !important;
    position:relative !important;
    overflow:visible !important;
  }

  .milestones-enhanced .ms-path-wrap,
  .milestones-enhanced .ms-path-line{
    display:none !important;
  }

  .milestones-enhanced .ms-nodes{
    width:100% !important;
    max-width:100% !important;
    min-height:0 !important;
    height:auto !important;
    display:flex !important;
    flex-direction:column !important;
    gap:20px !important;
    position:relative !important;
    overflow:visible !important;
  }

  .milestones-enhanced .ms-node{
    width:100% !important;
    max-width:100% !important;
    min-height:0 !important;
    height:auto !important;
    position:relative !important;
    display:grid !important;
    grid-template-columns:54px minmax(0, 1fr) !important;
    column-gap:14px !important;
    align-items:start !important;
    padding:0 !important;
    margin:0 !important;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    overflow:visible !important;
  }

  .milestones-enhanced .ms-node::before{
    content:'' !important;
    position:absolute !important;
    left:27px !important;
    top:58px !important;
    bottom:-22px !important;
    width:2px !important;
    background:linear-gradient(180deg, rgba(0,81,136,.20), rgba(120,189,231,.48)) !important;
    z-index:0 !important;
  }

  .milestones-enhanced .ms-node:last-child::before{
    display:none !important;
  }

  /* Force all dots to left column, regardless of original HTML order */
  .milestones-enhanced .ms-dot{
    grid-column:1 !important;
    grid-row:1 !important;
    width:54px !important;
    height:54px !important;
    min-width:54px !important;
    min-height:54px !important;
    max-width:54px !important;
    max-height:54px !important;
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;
    margin:0 !important;
    z-index:3 !important;
    border-radius:50% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .milestones-enhanced .ms-dot svg{
    width:21px !important;
    height:21px !important;
  }

  .milestones-enhanced .ms-stem{
    display:none !important;
  }

  /* Force all cards to right column, no absolute positioning */
  .milestones-enhanced .ms-card,
  .milestones-enhanced .ms-node:nth-child(odd) .ms-card,
  .milestones-enhanced .ms-node:nth-child(even) .ms-card{
    grid-column:2 !important;
    grid-row:1 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    height:auto !important;
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;
    margin:0 !important;
    padding:22px 20px !important;
    border-radius:18px !important;
    background:#fff !important;
    border:1px solid rgba(0,81,136,.12) !important;
    box-shadow:0 10px 28px rgba(0,81,136,.08) !important;
    text-align:left !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  .milestones-enhanced .ms-card::before,
  .milestones-enhanced .ms-card::after{
    display:none !important;
    content:none !important;
  }

  .milestones-enhanced .ms-card-main{
    display:block !important;
    min-height:0 !important;
    height:auto !important;
    position:relative !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    text-align:left !important;
    z-index:2 !important;
  }

  .milestones-enhanced .ms-year{
    display:block !important;
    font-size:27px !important;
    font-weight:800 !important;
    line-height:1 !important;
    margin:0 0 8px !important;
    color:var(--p) !important;
    letter-spacing:-.8px !important;
  }

  .milestones-enhanced .ms-title{
    display:block !important;
    font-size:16.5px !important;
    font-weight:800 !important;
    line-height:1.25 !important;
    color:var(--tx) !important;
    margin:0 !important;
  }

  .milestones-enhanced .ms-desc{
    display:block !important;
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    margin:12px 0 0 !important;
    padding:0 !important;
    background:none !important;
    color:var(--mu) !important;
    text-shadow:none !important;
    font-size:13.8px !important;
    font-weight:500 !important;
    line-height:1.65 !important;
    text-align:left !important;
    z-index:2 !important;
  }

  /* Disable desktop hover behavior on touch/tablet */
  .milestones-enhanced .ms-node:hover .ms-card,
  .milestones-enhanced .ms-node:nth-child(odd):hover .ms-card,
  .milestones-enhanced .ms-node:nth-child(even):hover .ms-card{
    transform:none !important;
    box-shadow:0 12px 32px rgba(0,81,136,.10) !important;
    border-color:rgba(120,189,231,.45) !important;
  }

  .milestones-enhanced .ms-node:hover .ms-card-main{
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
  }

  .milestones-enhanced .ms-node:hover .ms-desc{
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
  }

  .milestones-enhanced .ms-node:hover .ms-dot{
    transform:none !important;
  }
}

/* Extra small phones */
@media screen and (max-width:430px){

  .milestones-enhanced{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .milestones-enhanced .ms-node{
    grid-template-columns:48px minmax(0, 1fr) !important;
    column-gap:12px !important;
  }

  .milestones-enhanced .ms-node::before{
    left:24px !important;
    top:52px !important;
  }

  .milestones-enhanced .ms-dot{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    min-height:48px !important;
    max-width:48px !important;
    max-height:48px !important;
  }

  .milestones-enhanced .ms-dot svg{
    width:19px !important;
    height:19px !important;
  }

  .milestones-enhanced .ms-card,
  .milestones-enhanced .ms-node:nth-child(odd) .ms-card,
  .milestones-enhanced .ms-node:nth-child(even) .ms-card{
    padding:20px 17px !important;
    border-radius:16px !important;
  }

  .milestones-enhanced .ms-year{
    font-size:25px !important;
  }

  .milestones-enhanced .ms-title{
    font-size:16px !important;
  }

  .milestones-enhanced .ms-desc{
    font-size:13.4px !important;
    line-height:1.62 !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-2407c5d *//* ── VISION & MISSION ───────────────────────────────────── */

.vm{
  background:var(--w);
  padding-top:92px;
  padding-bottom:92px;
}

.vm .cx{
  margin-bottom:0;
}

.vm .sh{
  font-size:clamp(32px,3.1vw,50px);
  font-weight:800;
  color:var(--tx);
  letter-spacing:-1.9px;
  line-height:1.05;
  margin-bottom:0;
}

.vm-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  margin-top:50px;
}

/* Similar cards */
.vm-card{
  position:relative;
  overflow:hidden;
  min-height:330px;
  border-radius:var(--rx);
  padding:44px 36px;
  background:var(--w);
  border:1px solid rgba(0,81,136,.11);
  box-shadow:0 10px 30px rgba(0,81,136,.055);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  transition:
    transform .32s ease,
    box-shadow .32s ease,
    border-color .32s ease,
    background .32s ease;
}

/* Make old vision/mission colors same by default */
.vm-card.vision,
.vm-card.mission{
  background:var(--w);
  border:1px solid rgba(0,81,136,.11);
}

/* Remove old circle decoration from first card */
.vm-card.vision::after{
  display:none;
  content:none;
}

/* Soft background shape */
.vm-card::before{
  content:'';
  position:absolute;
  right:-80px;
  bottom:-80px;
  width:190px;
  height:190px;
  border-radius:50%;
  background:rgba(120,189,231,.12);
  transition:transform .35s ease, opacity .35s ease;
  pointer-events:none;
}

/* Better hover: card background changes, stronger shadow */
.vm-card:hover{
  transform:translateY(-7px);
  background:linear-gradient(135deg, var(--p) 0%, var(--pm) 62%, var(--pd) 100%);
  border-color:rgba(120,189,231,.55);
  box-shadow:0 24px 64px rgba(0,81,136,.22);
}

.vm-card:hover::before{
  transform:scale(1.2);
  opacity:.35;
  background:rgba(255,255,255,.14);
}

/* Icon centered */
.vm-icon{
  position:relative;
  z-index:2;
  width:68px;
  height:68px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 24px;
  background:var(--ap);
  border:1px solid rgba(120,189,231,.42);
  color:var(--p);
  box-shadow:0 8px 22px rgba(0,81,136,.07);
  transition:
    transform .3s ease,
    background .3s ease,
    color .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.vm-card.vision .vm-icon,
.vm-card.mission .vm-icon{
  background:var(--ap);
  border:1px solid rgba(120,189,231,.42);
  color:var(--p);
}

.vm-icon svg{
  width:29px;
  height:29px;
  stroke:currentColor;
}

.vm-card:hover .vm-icon{
  transform:translateY(-4px);
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.28);
  color:#fff;
  box-shadow:0 14px 34px rgba(0,0,0,.16);
}

/* Label */
.vm-label{
  position:relative;
  z-index:2;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.7px;
  text-transform:uppercase;
  color:var(--p);
  margin-bottom:14px;
  text-align:center;
  transition:color .3s ease;
}

.vm-card.vision .vm-label,
.vm-card.mission .vm-label{
  color:var(--p);
}

.vm-card:hover .vm-label{
  color:var(--al);
}

/* Heading centered and increased */
.vm-title{
  position:relative;
  z-index:2;
  font-size:clamp(24px,1.9vw,31px);
  font-weight:800;
  letter-spacing:-1px;
  line-height:1.13;
  color:var(--tx);
  margin:0 auto 18px;
  max-width:540px;
  text-align:center;
  transition:color .3s ease;
}

.vm-card.vision .vm-title,
.vm-card.mission .vm-title{
  color:var(--tx);
}

.vm-card:hover .vm-title{
  color:#fff;
}

/* Text easier to read */
.vm-text{
  position:relative;
  z-index:2;
  font-size:15.5px;
  line-height:1.78;
  color:var(--md);
  max-width:590px;
  margin:0 auto;
  text-align:center;
  transition:color .3s ease;
}

.vm-card.vision .vm-text,
.vm-card.mission .vm-text{
  color:var(--md);
}

.vm-card:hover .vm-text{
  color:rgba(255,255,255,.78);
}

/* Responsive */
@media(max-width:1100px){
  .vm-grid{
    grid-template-columns:1fr;
  }

  .vm-card{
    min-height:auto;
  }
}

@media(max-width:768px){
  .vm{
    padding-top:72px;
    padding-bottom:72px;
  }

  .vm .sh{
    font-size:clamp(30px,9vw,42px);
    letter-spacing:-1.4px;
  }

  .vm-grid{
    margin-top:36px;
    gap:18px;
  }

  .vm-card{
    padding:34px 22px;
    border-radius:20px;
  }

  .vm-icon{
    width:62px;
    height:62px;
    border-radius:16px;
    margin-bottom:22px;
  }

  .vm-icon svg{
    width:27px;
    height:27px;
  }

  .vm-title{
    font-size:23px;
  }

  .vm-text{
    font-size:14.5px;
    line-height:1.72;
  }
}
/* ============================================================
   VM cards — Vision blue by default, switches on hover
   Mission light by default, switches blue on hover
   ============================================================ */

/* First card default: blue like old design */
.vm-card.vision{
  background:var(--p) !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:0 16px 42px rgba(0,81,136,.18) !important;
}

.vm-card.vision .vm-icon{
  background:rgba(255,255,255,.12) !important;
  border-color:rgba(255,255,255,.22) !important;
  color:#fff !important;
}

.vm-card.vision .vm-label{
  color:var(--al) !important;
}

.vm-card.vision .vm-title{
  color:#fff !important;
}

.vm-card.vision .vm-text{
  color:rgba(255,255,255,.76) !important;
}

/* First card hover: change to second/light style */
.vm-card.vision:hover{
  background:var(--w) !important;
  border-color:rgba(120,189,231,.58) !important;
  box-shadow:0 24px 64px rgba(0,81,136,.14) !important;
}

.vm-card.vision:hover .vm-icon{
  background:var(--ap) !important;
  border-color:rgba(120,189,231,.42) !important;
  color:var(--p) !important;
  box-shadow:0 12px 30px rgba(0,81,136,.09) !important;
}

.vm-card.vision:hover .vm-label{
  color:var(--p) !important;
}

.vm-card.vision:hover .vm-title{
  color:var(--tx) !important;
}

.vm-card.vision:hover .vm-text{
  color:var(--md) !important;
}

/* Second card default: light */
.vm-card.mission{
  background:var(--w) !important;
  border-color:rgba(0,81,136,.11) !important;
}

/* Second card hover: blue */
.vm-card.mission:hover{
  background:linear-gradient(135deg, var(--p) 0%, var(--pm) 62%, var(--pd) 100%) !important;
  border-color:rgba(120,189,231,.55) !important;
  box-shadow:0 24px 64px rgba(0,81,136,.22) !important;
}

.vm-card.mission:hover .vm-icon{
  background:rgba(255,255,255,.14) !important;
  border-color:rgba(255,255,255,.28) !important;
  color:#fff !important;
  box-shadow:0 14px 34px rgba(0,0,0,.16) !important;
}

.vm-card.mission:hover .vm-label{
  color:var(--al) !important;
}

.vm-card.mission:hover .vm-title{
  color:#fff !important;
}

.vm-card.mission:hover .vm-text{
  color:rgba(255,255,255,.78) !important;
}
/* ============================================================
   Vision/Mission card switch effect
   Default: Vision blue, Mission light
   Hover Mission: Mission blue, Vision light
   ============================================================ */

/* Vision default blue */
.vm .vm-card.vision{
  background:var(--p) !important;
  border-color:rgba(255,255,255,.14) !important;
  box-shadow:0 16px 42px rgba(0,81,136,.18) !important;
}

.vm .vm-card.vision .vm-icon{
  background:rgba(255,255,255,.12) !important;
  border-color:rgba(255,255,255,.22) !important;
  color:#fff !important;
}

.vm .vm-card.vision .vm-label{
  color:var(--al) !important;
}

.vm .vm-card.vision .vm-title{
  color:#fff !important;
}

.vm .vm-card.vision .vm-text{
  color:rgba(255,255,255,.76) !important;
}

/* Mission default light */
.vm .vm-card.mission{
  background:#fff !important;
  border-color:rgba(0,81,136,.11) !important;
  box-shadow:0 10px 30px rgba(0,81,136,.055) !important;
}

.vm .vm-card.mission .vm-icon{
  background:var(--ap) !important;
  border-color:rgba(120,189,231,.42) !important;
  color:var(--p) !important;
}

.vm .vm-card.mission .vm-label{
  color:var(--p) !important;
}

.vm .vm-card.mission .vm-title{
  color:var(--tx) !important;
}

.vm .vm-card.mission .vm-text{
  color:var(--md) !important;
}

/* When hovering Mission, Mission becomes blue */
.vm .vm-card.mission:hover{
  background:linear-gradient(135deg, var(--p) 0%, var(--pm) 62%, var(--pd) 100%) !important;
  border-color:rgba(120,189,231,.55) !important;
  box-shadow:0 24px 64px rgba(0,81,136,.22) !important;
}

.vm .vm-card.mission:hover .vm-icon{
  background:rgba(255,255,255,.14) !important;
  border-color:rgba(255,255,255,.28) !important;
  color:#fff !important;
  box-shadow:0 14px 34px rgba(0,0,0,.16) !important;
}

.vm .vm-card.mission:hover .vm-label{
  color:var(--al) !important;
}

.vm .vm-card.mission:hover .vm-title{
  color:#fff !important;
}

.vm .vm-card.mission:hover .vm-text{
  color:rgba(255,255,255,.78) !important;
}

/* When hovering Mission, Vision changes to light */
.vm .vm-grid:has(.vm-card.mission:hover) .vm-card.vision{
  background:#fff !important;
  border-color:rgba(120,189,231,.58) !important;
  box-shadow:0 10px 30px rgba(0,81,136,.055) !important;
}

.vm .vm-grid:has(.vm-card.mission:hover) .vm-card.vision .vm-icon{
  background:var(--ap) !important;
  border-color:rgba(120,189,231,.42) !important;
  color:var(--p) !important;
  box-shadow:0 8px 22px rgba(0,81,136,.07) !important;
}

.vm .vm-grid:has(.vm-card.mission:hover) .vm-card.vision .vm-label{
  color:var(--p) !important;
}

.vm .vm-grid:has(.vm-card.mission:hover) .vm-card.vision .vm-title{
  color:var(--tx) !important;
}

.vm .vm-grid:has(.vm-card.mission:hover) .vm-card.vision .vm-text{
  color:var(--md) !important;
}
.vm{
  background:#E2EFF7 !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-84155ca *//* ============================================================
   MSI Values — use MSI Advantage card style
   Scoped only to .values-adv-style
   ============================================================ */

.values-adv-style{
  background:#005188 !important;
  position:relative !important;
  overflow:hidden !important;
}

.values-adv-style::before{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  opacity:.12 !important;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.28) 1px, transparent 1px) !important;
  background-size:26px 26px !important;
}

.values-adv-style .wrap{
  position:relative !important;
  z-index:1 !important;
}

.values-adv-style .sh{
  color:#fff !important;
}

.values-adv-style .sp{
  color:rgba(255,255,255,.68) !important;
  max-width:680px !important;
}

/* Use same 3 x 2 advantage grid */
.values-adv-style .msi-adv-clean-grid{
  margin-top:52px !important;
}

/* Make values cards slightly more compact than Advantage */
.values-adv-style .msi-adv-clean-card,
.values-adv-style .msi-adv-clean-card-front{
  min-height:245px !important;
}

/* Keep normal visible content centered */
.values-adv-style .msi-adv-clean-title{
  max-width:310px !important;
}

/* Make overlay text comfortable */
.values-adv-style .msi-adv-clean-reveal p{
  max-width:330px !important;
}

/* Remove old .values grid behavior if any old CSS interferes */
.values-adv-style .val-grid,
.values-adv-style .vcard{
  all:unset;
}

/* Mobile */
@media(max-width:768px){
  .values-adv-style .msi-adv-clean-card,
  .values-adv-style .msi-adv-clean-card-front{
    min-height:auto !important;
  }
}
.values-adv-style{
  background:#E2EFF7 !important;
}

.values-adv-style .sh{color: #0c1a26!important}
.values-adv-style .sp{color:#6b8aa0!important}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-bf94c67 *//* ============================================================
   MSI Leadership — Names + Larger Photos + Duplicate-safe tabs
   ============================================================ */

.leadership-enhanced{
  background:var(--off) !important;
}

/* Force only active panel to show */
.leadership-enhanced .lpanel{
  display:none !important;
}

.leadership-enhanced .lpanel.active{
  display:block !important;
}

/* Tabs */
.leadership-enhanced .leader-tabs{
  display:flex !important;
  gap:12px !important;
  margin-top:36px !important;
  margin-bottom:34px !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
}

.leadership-enhanced .ltab{
  display:flex !important;
  align-items:center !important;
  gap:13px !important;
  padding:10px 22px 10px 12px !important;
  border-radius:999px !important;
  background:#fff !important;
  border:2px solid var(--br) !important;
  color:var(--md) !important;
  text-align:left !important;
  cursor:pointer !important;
  font-family:'Overused Grotesk',sans-serif !important;
  transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease,
    transform .25s ease,
    box-shadow .25s ease !important;
}

.leadership-enhanced .ltab:hover,
.leadership-enhanced .ltab.active{
  background:var(--p) !important;
  color:#fff !important;
  border-color:var(--p) !important;
  transform:translateY(-2px) !important;
  box-shadow:0 12px 28px rgba(0,81,136,.18) !important;
}

/* Bigger tab photo */
.leadership-enhanced .ltab-av{
  width:52px !important;
  height:52px !important;
  min-width:52px !important;
  border-radius:50% !important;
  overflow:hidden !important;
  background:var(--ap) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid rgba(120,189,231,.35) !important;
}

.leadership-enhanced .ltab.active .ltab-av,
.leadership-enhanced .ltab:hover .ltab-av{
  background:rgba(255,255,255,.15) !important;
  border-color:rgba(255,255,255,.25) !important;
}

.leadership-enhanced .ltab-av img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  border-radius:50% !important;
}

/* Tab text */
.leadership-enhanced .ltab span{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  line-height:1.2 !important;
}

.leadership-enhanced .ltab strong{
  font-size:13px !important;
  font-weight:800 !important;
  letter-spacing:-.1px !important;
}

.leadership-enhanced .ltab small{
  display:block !important;
  font-size:11.5px !important;
  font-weight:500 !important;
  color:var(--mu) !important;
  margin-top:3px !important;
  white-space:nowrap !important;
}

.leadership-enhanced .ltab.active small,
.leadership-enhanced .ltab:hover small{
  color:rgba(255,255,255,.78) !important;
}

/* Panel */
.leadership-enhanced .lpanel-in{
  border-radius:var(--rx) !important;
  overflow:hidden !important;
  border:1px solid var(--br) !important;
  box-shadow:0 18px 54px rgba(0,81,136,.08) !important;
  display:grid !important;
  grid-template-columns:330px 1fr !important;
  background:#fff !important;
}

/* Left panel */
.leadership-enhanced .lp-side{
  background:var(--p) !important;
  padding:46px 34px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
}

/* Larger main photo */
.leadership-enhanced .lp-av{
  width:160px !important;
  height:160px !important;
  border-radius:50% !important;
  overflow:hidden !important;
  margin-bottom:28px !important;
  background:rgba(255,255,255,.12) !important;
  border:3px solid rgba(255,255,255,.24) !important;
  box-shadow:0 18px 42px rgba(0,0,0,.20) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.leadership-enhanced .lp-av img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  border-radius:50% !important;
}

/* Role tag */
.leadership-enhanced .lp-role-tag{
  color:var(--al) !important;
  background:rgba(120,189,231,.12) !important;
  border:1px solid rgba(120,189,231,.22) !important;
}

/* Name + designation */
.leadership-enhanced .lp-name{
  font-size:27px !important;
  line-height:1.14 !important;
  font-weight:800 !important;
  letter-spacing:-.7px !important;
  color:#fff !important;
  margin-bottom:8px !important;
}

.leadership-enhanced .lp-title{
  font-size:13px !important;
  line-height:1.45 !important;
  color:rgba(255,255,255,.64) !important;
}

/* Quote */
.leadership-enhanced .lp-quote{
  margin-top:32px !important;
  padding-top:26px !important;
  border-top:1px solid rgba(255,255,255,.12) !important;
}

.leadership-enhanced .lp-quote-text{
  color:rgba(255,255,255,.58) !important;
}

/* Body */
.leadership-enhanced .lp-body{
  padding:46px 42px !important;
  background:#fff !important;
}

.leadership-enhanced .lp-body p{
  color:var(--md) !important;
  font-size:14.5px !important;
  line-height:1.88 !important;
  margin-bottom:18px !important;
}

.leadership-enhanced .lp-body p:last-child{
  margin-bottom:0 !important;
}

.leadership-enhanced .lp-sig{
  color:var(--p) !important;
  font-weight:800 !important;
  font-size:13.5px !important;
  margin-top:24px !important;
  padding-top:18px !important;
  border-top:1px solid var(--br) !important;
}

/* Responsive */
@media(max-width:1100px){
  .leadership-enhanced .lpanel-in{
    grid-template-columns:1fr !important;
  }

  .leadership-enhanced .lp-side{
    padding:40px 30px !important;
  }
}

@media(max-width:768px){
  .leadership-enhanced .leader-tabs{
    justify-content:flex-start !important;
  }

  .leadership-enhanced .ltab{
    width:100% !important;
    justify-content:flex-start !important;
  }

  .leadership-enhanced .ltab small{
    white-space:normal !important;
  }

  .leadership-enhanced .lp-av{
    width:126px !important;
    height:126px !important;
  }

  .leadership-enhanced .lp-name{
    font-size:23px !important;
  }

  .leadership-enhanced .lp-body{
    padding:32px 24px !important;
  }

  .leadership-enhanced .lp-body p{
    font-size:14px !important;
    line-height:1.78 !important;
  }
}/* End custom CSS */