.elementor-12458 .elementor-element.elementor-element-3bf29d8{--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:-1px;--padding-bottom:-1px;--padding-left:-1px;--padding-right:-1px;}.elementor-12458 .elementor-element.elementor-element-67deb91{width:100%;max-width:100%;padding:-1px -1px -1px -1px;}.elementor-12458 .elementor-element.elementor-element-67deb91 img{width:100%;}.elementor-12458 .elementor-element.elementor-element-e3689a3{margin:-241px 0px calc(var(--kit-widget-spacing, 0px) + 0240px) 0px;text-align:center;}.elementor-12458 .elementor-element.elementor-element-e3689a3 .elementor-heading-title{color:#0034FF;}.elementor-12458 .elementor-element.elementor-element-c4d76d8{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-12458 .elementor-element.elementor-element-c8556b7{--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-12458 .elementor-element.elementor-element-56bdf8b{--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-12458 .elementor-element.elementor-element-21a3351{--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-12458 .elementor-element.elementor-element-07e7276 .e-gallery-item:hover .elementor-gallery-item__overlay, .elementor-12458 .elementor-element.elementor-element-07e7276 .e-gallery-item:focus .elementor-gallery-item__overlay{background-color:rgba(0,0,0,0.5);}.elementor-12458 .elementor-element.elementor-element-07e7276{--image-transition-duration:800ms;--overlay-transition-duration:800ms;--content-text-align:center;--content-padding:20px;--content-transition-duration:800ms;--content-transition-delay:800ms;}.elementor-12458 .elementor-element.elementor-element-9d75d33{--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-12458 .elementor-element.elementor-element-657cf41 .elementor-wrapper{--video-aspect-ratio:0.5625;}@media(min-width:768px){.elementor-12458 .elementor-element.elementor-element-c8556b7{--width:50%;}.elementor-12458 .elementor-element.elementor-element-56bdf8b{--width:50%;}}/* Start custom CSS for container, class: .elementor-element-c4d76d8 *//* =========================================================
   1) YEARS / GRADES SECTION (elementor page id: 12449)
   Modern cards + title overlay on hover (clickable link)
   ========================================================= */
.elementor-12449 .elementor-element-81ddc35 .e-con-inner > .elementor-element{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.10) !important;
  transform: translateZ(0) !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
  min-height: 220px !important;
}

.elementor-12449 .elementor-element-81ddc35 .e-con-inner > .elementor-element:hover{
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 45px rgba(0,0,0,.16) !important;
}

/* Make the image fill the "card" area */
.elementor-12449 .elementor-element-81ddc35 .e-con-inner > .elementor-element .elementor-widget-image{
  margin: 0 !important;
}

.elementor-12449 .elementor-element-81ddc35 .e-con-inner > .elementor-element .elementor-widget-image img{
  width: 100% !important;
  height: 230px !important;
  object-fit: cover !important;
  display: block !important;
  transform: scale(1) !important;
  transition: transform .35s ease !important;
}

.elementor-12449 .elementor-element-81ddc35 .e-con-inner > .elementor-element:hover .elementor-widget-image img{
  transform: scale(1.06) !important;
}

/* Dark gradient overlay (hidden, appears on hover) */
.elementor-12449 .elementor-element-81ddc35 .e-con-inner > .elementor-element::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.70) 100%) !important;
  opacity: 0 !important;
  transition: opacity .25s ease !important;
  z-index: 2 !important;
}

.elementor-12449 .elementor-element-81ddc35 .e-con-inner > .elementor-element:hover::before{
  opacity: 1 !important;
}

/* Title block positioned above overlay */
.elementor-12449 .elementor-element-81ddc35 .e-con-inner > .elementor-element .elementor-widget-heading{
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  bottom: 14px !important;
  z-index: 3 !important;
  margin: 0 !important;
  opacity: 0 !important;
  transform: translateY(10px) !important;
  transition: opacity .25s ease, transform .25s ease !important;
}

.elementor-12449 .elementor-element-81ddc35 .e-con-inner > .elementor-element:hover .elementor-widget-heading{
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Make the link look like a modern pill button */
.elementor-12449 .elementor-element-81ddc35 .e-con-inner > .elementor-element .elementor-widget-heading a{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.15) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  letter-spacing: .2px !important;
  line-height: 1 !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.20) !important;
}

.elementor-12449 .elementor-element-81ddc35 .e-con-inner > .elementor-element .elementor-widget-heading a:hover{
  background: rgba(255,255,255,.22) !important;
  transform: translateY(-1px) !important;
}

/* Space between cards */
.elementor-12449 .elementor-element-81ddc35 .e-con-inner{
  gap: 16px !important;
}



/* =========================================================
   2) SINGLE CLASS PAGE (elementor single id: 12458)
   Modern layout + fix spacing + modern gallery
   ========================================================= */

/* Add top padding so header never overlaps content */
.post-12486 .elementor-12458{
  padding-top: 28px !important;
}

/* Make the first section (title + featured image) a modern 2-column grid */
.post-12486 .elementor-12458 .elementor-element-c4d76d8 .e-con-inner{
  display: grid !important;
  grid-template-columns: 1fr 1.25fr !important;
  gap: 28px !important;
  align-items: center !important;
}

/* On small screens stack */
@media (max-width: 900px){
  .post-12486 .elementor-12458 .elementor-element-c4d76d8 .e-con-inner{
    grid-template-columns: 1fr !important;
  }
}

/* Style the page title like a clean headline */
.post-12486 .elementor-12458 .elementor-element-b48ae9c .elementor-heading-title{
  font-size: clamp(28px, 3vw, 44px) !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  margin: 0 0 10px 0 !important;
  color: #0f172a !important;
  letter-spacing: -0.5px !important;
}

/* Give the title container a subtle card background */
.post-12486 .elementor-12458 .elementor-element-c8556b7{
  background: linear-gradient(135deg, #f8fafc, #ffffff) !important;
  border-radius: 18px !important;
  padding: 18px 18px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.08) !important;
}

/* Featured image modern card */
.post-12486 .elementor-12458 .elementor-element-05987ef img{
  width: 100% !important;
  height: auto !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.14) !important;
}

/* Gallery section spacing */
.post-12486 .elementor-12458 .elementor-element-21a3351{
  margin-top: 22px !important;
}

.post-12486 .elementor-12458 .elementor-element-07e7276 .elementor-gallery__container{
  --hgap: 14px !important;
  --vgap: 14px !important;
}

/* Gallery items rounded + shadow + smooth hover */
.post-12486 .elementor-12458 .elementor-element-07e7276 .e-gallery-item{
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.10) !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}

.post-12486 .elementor-12458 .elementor-element-07e7276 .e-gallery-item:hover{
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.16) !important;
}

/* Make the overlay look nicer */
.post-12486 .elementor-12458 .elementor-element-07e7276 .elementor-gallery-item__overlay{
  background: linear-gradient(180deg, rgba(2,6,23,0) 30%, rgba(2,6,23,.65) 100%) !important;
  opacity: .9 !important;
}



/* =========================================================
   3) FIX HEADER (white text on white background + absolute overlap)
   Scoped to this page only: .post-12486
   ========================================================= */

/* Force header to have a visible background on this page */
.post-12486 header,
.post-12486 #masthead,
.post-12486 .site-header{
  background: rgba(15, 23, 42, .92) !important;  /* deep navy */
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
}

/* Make menu text readable */
.post-12486 header a,
.post-12486 #masthead a,
.post-12486 .site-header a{
  color: #ffffff !important;
}

.post-12486 header a:hover,
.post-12486 #masthead a:hover,
.post-12486 .site-header a:hover{
  opacity: .85 !important;
}

/* If your theme forces absolute header, override it */
.post-12486 header,
.post-12486 #masthead,
.post-12486 .site-header{
  left: 0 !important;
  right: 0 !important;
}/* End custom CSS */