:root{
      --bg1: #0f172a;
      --accent-a: rgba(99,102,241,0.12);
      --glass: rgba(255,255,255,0.06);
      --glass-2: rgba(255,255,255,0.08);
      --glass-stroke: rgba(255,255,255,0.12);
      --text: rgba(255,255,255,0.95);
      --muted: rgba(255,255,255,0.7);
    }
html{background: #1b3b60;}
body {font-family: "Mulish",sans-serif !important;background-color: transparent;}
body:not(.fsComposeMode) .panel-gray > *, body:not(.fsComposeMode) .panel-light-blue > *, body:not(.fsComposeMode) .panel-image > * { max-width: 1350px;}
#fsPageBody {max-width: 1350px;}
#fsHeader .header-page-title > .fsElementContent{max-width: 1350px;}
figure {
  margin: 0;
}
.header-logo img {
  max-width: none !important;
}
.sticky-header-visible #fsHeader .main-header, #fsHeader .main-header:focus-within {
    background: #eef8fd;
    border-bottom: 1px solid #1b3b60;
}
.fw-bold {font-weight:bold;}
body:not(.fsComposeMode) .custom-resource-slider article .scroller {max-height: 400px;}

#fsFooter .footer-logo > footer :is(h1, h2, h3, h4, h5, h6) {font-size: 20px;}
.fsResourceTypeVideo.videoPlaying .fsVideoPlayOverlay{
    opacity: 0;
}
.testimonial-videos .fsResourceTypeVideo.videoPlaying .close-trigger{
    z-index: 50;
}
body:not(.fsComposeMode).home .panel-2 .ticker p .school-logo-icon {
  width: 25px;
  height: 30px;
  background-image: url('../img/logo-50.png');
  background-size: 100% auto;
}
.hero-popup-trigger .play-icon {display: none;}
#fsFooter .footer-accreditation{padding-top: 2px;padding-bottom: 0;}
/* .nav-social .fsNavLevel1 a .diamond-bg {display: none;} */
.nav-social .fsNavLevel1 a .socialIcons {position: absolute;top: 51%;left: 51%;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);font-style: normal;text-indent: 0;}
#fsBreadcrumbs .header-page-title {
  padding: 30px 40px;
}
#fsBreadcrumbs .fsElement {
  margin-bottom: 0;
}
/* #fsEl_19243 {margin-bottom: -95px;} */
#fsPageBodyWrapper {
  padding-bottom: 42px;
}
.maxWidthSec .fsElementContent {display: flex;justify-content: space-between;max-width: 1180px;margin: 0 auto;}
.fsAboutSec .card{flex-direction: initial;border: none;}
.normalFs {
  font-size: 1.3rem;
  line-height: 1.5;
  font-weight: 400;
  color: #1b3b60;
}

.mhKeysSec {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px;
	background: radial-gradient(1200px 600px at 10% 30%, rgba(99,102,241,0.12), transparent 10%), radial-gradient(900px 500px at 90% 80%, rgba(34,197,94,0.06), transparent 15%), linear-gradient(180deg,var(--bg1) 0%, #071028 100%);
	position: relative;
	overflow: hidden;
    flex-direction: column;
}
.mhKeysSec::after{
    content:"";
    position:absolute;inset:0;pointer-events:none;
    background-image:linear-gradient(transparent 48%, rgba(255,255,255,0.01) 49%, transparent 51%), linear-gradient(90deg, transparent 48%, rgba(255,255,255,0.01) 49%, transparent 51%);
    background-size: 16px 16px, 16px 16px;
    opacity:0.6;
    mix-blend-mode:overlay;
}
.mhKeysSec::before {background: transparent !important;}
.mhKeysSec .fsThreeColumnLayout{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;z-index:2;}
.mhKeysSec .fsFourColumnLayout{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;z-index:2;}

.mhKeysSec .card{
      position:relative;
      padding:28px;
      border-radius:18px;
      /* background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); */
       background: linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0.2));
      /* border:1px solid rgba(255,255,255,0.06); */
      border: 1px solid #fff;
      box-shadow: 0 8px 30px rgba(2,6,23,0.6);
      /* backdrop-filter: blur(8px) saturate(120%); */
      overflow:hidden;
      transition:transform .35s cubic-bezier(.2,.9,.2,1), box-shadow .35s;
      cursor:default;
    }


.mhKeysSec .card:hover{transform:translateY(-12px) scale(1.02);box-shadow:0 22px 50px rgba(2,6,23,0.7);}

    /* glowing accent shape */
.mhKeysSec .card::before{
       content: "";
      position: absolute;
      inset: 0;
      padding: 2px;
      border-radius: 18px;
      background: linear-gradient(270deg, rgba(255,255,255,1), rgba(255,255,255,0.4), rgba(255,255,255,1));
      background-size: 400% 400%;
      z-index: -1;
      opacity: 0;
      transition: opacity 0.3s ease;
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude;
    }

.mhKeysSec .card:hover::before {
      opacity: 1;
      animation: whiteBorder 3s linear infinite;
    }

    @keyframes whiteBorder {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

.mhKeysSec .icon{
      width:62px;height:62px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:22px;color:var(--text);
      background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
      border:1px solid rgba(255,255,255,0.06);
      box-shadow: inset 0 -6px 20px rgba(255,255,255,0.02);
      margin-bottom:16px;
      min-width: 62px;
    }

.mhKeysSec .title{font-size:18px;font-weight:700;margin:0 0 15px;color: #fff !important;}
.mhKeysSec .desc{font-size:16px;color:var(--muted);line-height:1.45;margin:0 0 18px}
.mhKeysSec .meta{display:flex;align-items:center;gap:10px}
.mhKeysSec .meta small{font-size:13px;color:var(--muted)}
.mhKeysSec .cta{
      margin-top:18px;display:inline-block;padding:8px 14px;border-radius:10px;font-weight:600;font-size:14px;text-decoration:none;border:1px solid rgba(255,255,255,0.06);
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      transition:transform .22s, box-shadow .22s, opacity .22s;
    }
.mhKeysSec .card:hover .cta{transform:translateY(-3px);opacity:0.99}

    /* small sparkle decoration */
.mhKeysSec .spark{
      position:absolute;left:18px;bottom:18px;width:60px;height:20px;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.04));border-radius:10px;opacity:0.6;pointer-events:none;
    }

    /* responsive */
    @media (max-width:920px){
      .mhKeysSec .fsThreeColumnLayout{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width:600px){
      .mhKeysSec .fsThreeColumnLayout{grid-template-columns:1fr}
      .mhKeysSec .fsFourColumnLayout{grid-template-columns:1fr}
      .mhKeysSec .card{padding:20px;border-radius:14px}
      .mhKeysSec .icon{width:56px;height:56px}
    }
.staffList .team-card {
      border: none;
      border-radius: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      overflow: hidden;
      transition: transform 0.3s ease;
      position: relative;
    }
.staffList .team-card:hover {
      transform: translateY(-5px);
    }
.staffList .team-img {
      width: 100%;
      border-radius: 0px 0px 180px 0px;
    }
.staffList .social-icons {
    position: absolute;
    top: -1px;
    right: 0px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #1b3b60;
    padding: 8px 8px 15px 8px;
    border-radius: 0px 0px 0px 25px;
    }
.staffList .social-icons a {
      color: #fff;
      font-size: 16px;
      text-align: center;
      background: transparent;
    }
.staffList a {background: transparent;}
.staffList .card-body {
      text-align: center;
      padding: 20px;
    }
.staffList .card-body h5 {
      font-weight: 700;
      margin-bottom: 5px;
    }
.staffList .card-body p {
      color: #6c757d;
      margin: 0;
    }
 .contact-box {
      background: #fff;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    }

    .contact-box.show {
      opacity: 1;
      transform: translateY(0);
    }

    .contact-left {
      background: radial-gradient(1200px 600px at 10% 30%, rgba(99,102,241,0.12), transparent 10%), radial-gradient(900px 500px at 90% 80%, rgba(34,197,94,0.06), transparent 15%), linear-gradient(180deg,var(--bg1) 0%, #071028 100%);
      color: #fff;
      padding: 40px 30px;
      position: relative;
    }

    .contact-left h2 {
      font-size: 22px;
      margin-bottom: 10px;
    }

    .contact-left p {
      margin-bottom: 25px;
    }

    .contact-info div {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      font-size: 14px;
    }
#inquiryForm .form-select, #inquiryForm  .form-control {
    border-color: #1b3b60;
  border-width: 0px 0px 2px 0px;
  border-radius: 6px 6px 6px 6px;
}
#inquiryForm .form-select:focus, #inquiryForm  .form-control:focus {
  border-color: #00ac5b !important;
  background: transparent !important;
  box-shadow: none !important;
}
#inquiryForm .form-select.jqError:focus, #inquiryForm  .form-control.jqError:focus {
  border-color: #dc3545 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.cl-w {color: #fff !important;}
.contact-left .card {padding: 10px;border: 1px solid rgba(255,255,255,0.4);}
.contact-left .card .desc{font-size: 20px;color: #fff;}
.bg-none {background: none !important;}
.bg-none::before{background: none !important;}
.contact-left .mhKeysSec .card:hover {transform: initial;}
.contact-box ul.fsNavLevel1{list-style: none;}
.nav-social .fsNavLevel1 a .socialIcons{top: 46%;left: 50%;}
.formBtn {
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	height: 55px;
	max-width: 250px;
	margin: 1rem auto;
	text-transform: uppercase;
	border: 1px solid currentColor;
    transition: 0.5s ease-in-out;
    background: #1b3b60;
    border-radius: 8px;
}
.formBtn::before, .formBtn::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-top: 28px solid #8cd1f1;
	border-bottom: 28px solid #8cd1f1;
    transition: 0.5s ease-in-out;
}
.formBtn span {position: relative;z-index: 555;color: #fff;font-weight: bold;}
.formBtn:hover span{color: #1b3b60; }
.formBtn:hover {
	color: #fff;
    border: 1px solid #1b3b60;
}
.formBtn::before {
	border-right: 40px solid transparent;
	transform: translateX(-100%);
}
.formBtn::after {
	border-left: 40px solid transparent;
	transform: translateX(100%);
}

.formBtn:hover::after {
	transform: translateX(30%);
}
.formBtn:hover::before {
	transform: translateX(-30%);
}
.jqError, .errorplac {
  color: #dc3545;
  text-align: left;
  font-size: 15px;
}
.hideLi {display: none;}
.imgGallery article {padding: 15px;
  background: transparent;border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;}
  .main-menu .menu-cta .fsNavLevel1 > li, #fsMenu .menu-cta .fsNavLevel1 > li {width: 50%;}
.gallery-item {
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: transform 0.5s, opacity 0.5s;
}
.gallery-item img {
    width: 100%;
    display: block;
    transition: transform 0.5s;
}
.gallery-item:hover img {
    transform: scale(1.1);
}

/* Hide animation */
.gallery-item.hide {
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
    position: absolute !important;
}
.galleryFilter button {
	color: #000;
	background-color: transparent;
	font-weight: 500;
	margin-right: 10px;
	box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
	border-radius: 5px;
	padding: .5rem 1rem;
	font-size: 16px;
	margin-bottom: 15px;
	outline: none;
	border: none;
	background: transparent;
}
.galleryFilter .active {
  background-color: #1b3b60;
  color: #fff;
}
.service-wrapper {
      position: relative;
      background: #1b3b60;
      width: 100%;
  height: 350px;
      border-radius: 15px;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    }

    /* White card with deep corner cuts */
    .service-card {
      position: absolute;
      top: 58px;
      left: -15px; /* stick out for shadow effect */
      background: #fff;
      width: 100%;
      height: 274px;
      padding: 20px 15px;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
      border-radius: 3px;
      clip-path: polygon(
        60px 0%,
        100% 0%,
        100% calc(100% - 60px),
        calc(100% - 60px) 100%,
        0% 100%,
        0% 60px
      );
      text-align: center; /* center all text */
      transition: all 0.3s ease;
      border: 4px solid #1b3b60;
    }

    .service-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
    }

    .service-icon {
      font-size: 30px;
      color: #1b3b60;
      margin-bottom: 10px;
    }

    .service-title {
      font-weight: 700;
      color: #1b3b60;
      margin-bottom: 10px;
      font-size: 16px;
    }

    /* Plus button OUTSIDE white box, inside green box */
    .more-btn {
      position: absolute;
      bottom: 10px;
      right: 10px;
      background: #fff;
      color: #1b3b60;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: bold;
      box-shadow: 0 3px 6px rgba(0,0,0,0.15);
      text-decoration: none;
    }

    .more-btn:hover {
      background: #1b3b60;
      color: #fff;
    }
  .services-icon {
  position: absolute;
  top: -31px;
  background: #1b3b60;
  border-radius: 50%;
  padding: 7px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.services-icon img{ width: 60px; }
.fs-16 {font-size: 16px;
  line-height: 1;
  font-weight: 400;
  color: #1b3b60;}
  .InquiryFormMain .box-grey {
	padding-top: 50px;
	padding-bottom: 50px;
	border-radius: 10px;
	position: relative;
	box-shadow: 0 10px 50px 0 rgba(26,46,45,0.1);
	background: #fff;
	text-align: center;
	display: grid;
	align-items: center;
}
.marginauto {
  margin: 0 auto;
}
.teachingMethodsMain ol, .teachingMethodsMain ul {
  margin-top: 0;
  padding-left: 50px;
}
.teachingMethodsMain ol li, .teachingMethodsMain ul li{
  font-size: 1.425rem;
  line-height: 1.5;
  font-weight: 400;
  color: #1b3b60;
}
.teachingMethodsMain p{
  font-size: 1.425rem;
  line-height: 1.5;
  font-weight: 400;
  color: #1b3b60;
}
.imageSliderGal .close-trigger{ display: none !important;}
.homeStory .card-link{ display: none !important;}
.schoolLeargSec .faux-link { display: none !important;}
.testimonial {
	background: #fff;
	text-align: center;
	padding: 30px 30px 50px;
	margin: 0 15px 100px;
	position: relative;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.testimonial::before, .testimonial::after {
  content: "";
  border-top: 40px solid #fff;
  border-right: 125px solid transparent;
  position: absolute;
  bottom: -40px;
  left: 0;
}
.testimonial::after {
  border-right: none;
  border-left: 125px solid transparent;
  left: auto;
  right: 0;
}
.testimonial .description {
	font-size: 20px;
	color: #1b3b60;
	text-align: left;
	margin-bottom: 30px;
	opacity: 0.8;
}
.testimonial .testimonial-content {
	width: 100%;
	position: absolute;
	left: 0;
}

.testimonial .pic {
	display: inline-block;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 2px 2px #1b3b60;
    overflow: hidden;
    z-index: 1;
    position: relative;
    background: #1b3b60;
    width: 100px;
    height: 100px;
    padding-top: 9px;
}
.testimonial .pic i{ font-size: 66px;color: #fff; }
.testimonial .title {
	font-size: 20px;
	font-weight: bold;
	color: #1b3b60;
	text-transform: capitalize;
	margin: 0 0 25px 0;
}
.testimonial .post {
	display: block;
	font-size: 14px;
	color: #ffd9b8;
}

.it-blog-style-6 .it-blog-item {
	box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.07);
}
.it-blog-thumb {
	padding-bottom: 25px;
	border-radius: 10px 10px 0px 0px;
}
.fix {
	overflow: hidden;
}
.it-blog-style-6 .it-blog-thumb {
	padding-bottom: 0;
}
.it-blog-style-6 .it-blog-content {
	padding: 25px;
	padding-bottom: 35px;
	border-radius: 0 0 5px 5px;
	background-color: #fff;
}
.pb-25 {
	padding-bottom: 25px;
}
.it-blog-meta span:not(:last-child) {
	margin-right: 22px;
}
.it-blog-meta span {
	color: #4D5756;
	font-size: 15px;
	font-style: normal;
	font-weight: 600;
	line-height: 32px;
}
.it-blog-meta span i {
	display: inline-block;
    color: #1b3b60;
	margin-right: 5px;
}
.it-blog-style-6 .it-blog-meta span i {
	color: #1b3b60;
}
.it-blog-title {
	font-size: 19px;
	font-style: normal;
	font-weight: 600;
	line-height: 1.4;
	margin-bottom: 20px;
}
.pb-5 {
	padding-bottom: 5px !important;
}
.it-blog-title a {
	transition: 0.3s;
    text-decoration: none;
  background: transparent;
  color: #1b3b60;
  text-transform: capitalize;
}
.it-blog-thumb img {
	transition: 0.9s;
}
.it-blog-style-3 .it-blog-title {
	font-size: 21px;
}
.it-blog-item:hover .it-blog-thumb img {
  transform: scale(1.1) rotate(-2deg);
}
.it-btn {
	display: inline-block;
	font-weight: 600;
	text-transform: capitalize;
	padding: 0 25px;
	height: 44px;
	line-height: 43px;
	position: relative;
	transition: 0.4s;
	border-radius: 5px;
	z-index: 1;
	color: #fff;
	background-color: #1b3b60;
}
.it-btn:hover { color: #fff; }
.rightBtnSec {
  position: absolute;
  right: 12px;
  padding: 8px 0px 0px 10px;
  background: #fff;
  bottom: 0px;
  border-radius: 16px 0px 0px 0px;
}
.btn-solid i{ font-size: 20px; }
.btn-solid {
    display: inline-block;
	padding: 10px 12px;
	color: #fff;
	letter-spacing: 0.05em;
    border-radius: 10px;
	background: #1b3b60;
	background-size: 850px;
	background-repeat: no-repeat;
	background-position: 0;
	-webkit-transition: background 300ms ease-in-out;
	transition: background 300ms ease-in-out;
}
.btn-solid:hover {
    background: transparent;
    border: 2px solid #1b3b60;
}
.btn-solid:hover i{ color: #1b3b60; }
.mordern-bottom {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.pb-15 {padding-bottom: 15px;}
#fsHeader .main-breadcrumbs {max-width: 100%;}
.blogDetail .blTitle {font-size: 36px;}
.blogDetail .blSubTitle {font-size: 28px;}
.custom-pagination {
    display: flex;
    justify-content: center;
    margin: 30px 0;
    gap: 8px;
    flex-wrap: wrap;
}

.custom-pagination a,
.custom-pagination span {
    color: #000;
    font-weight: 500;
    margin-right: 1px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    border-radius: 5px;
    padding: .5rem 1rem;
    font-size: 16px;
    margin-bottom: 15px;
    outline: none;
    border: none;
    background: transparent;
}

.custom-pagination a:hover {
    border-color: #1b3b60;
    background: #1b3b60;
    color: #fff;
}

.custom-pagination .active {
    border-color: #1b3b60;
    background: #1b3b60;
    color: #fff;
    font-weight: 600;
}

.custom-pagination .disabled {
    color: #aaa;
    border-color: #eee;
    cursor: not-allowed;
    background: #f9f9f9;
}
.bg-cats {background: #1b3b60;color: #fff;font-size: 17px;padding-top: 8px;padding-bottom: 8px;margin-right: 4px;}
.blogDetail a{background: transparent;}
.blogTags {border-top: 1px solid #1b3b60; border-bottom: 1px solid #1b3b60;padding-top: 8px; padding-bottom: 2px; }
.blogTagsLab {
  font-size: 18px;
  color: #1b3b60;
}

.blog-sidebar .theme-card {
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #eee;
  position: relative;
  border-radius: 5px;
  margin-bottom: 25px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.07);
}
.blog-sidebar h4 {
	color: #222;
	text-transform: unset;
	font-weight: 600;
	margin-bottom: calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320)));
	line-height: 1.3;
	letter-spacing: unset;
	font-size: calc(17px + (21 - 17) * ((100vw - 320px) / (1920 - 320)));
	padding-bottom: 6px;
	border-bottom: 1px solid #eee;
}
.blog-sidebar .theme-card .recent-blog li .blog-box {
	-webkit-box-align: unset;
	-ms-flex-align: unset;
	align-items: unset;
	gap: 10px;
	border: unset;
	padding-bottom: 0;
	border-radius: 0;
}
.blog-sidebar .theme-card .recent-blog li .blog-box .blog-image {
	width: calc(90px + (100 - 90) * ((100vw - 320px) / (1920 - 320)));
	height: auto;
	margin: 0;
}
.blog-sidebar .theme-card .recent-blog li .blog-box .blog-image img{border-radius: 5px;}
.blog-sidebar .theme-card .recent-blog li .blog-box .blog-content {
	width: calc(100% - calc(90px + (100 - 90) * ((100vw - 320px) / (1920 - 320))) - 10px);
}
.blog-sidebar .theme-card .recent-blog li .blog-box .blog-content h6 {
	line-height: 1.4;
	color: #777;
	font-weight: 500;
	margin-bottom: calc(2px + (5 - 2) * ((100vw - 320px) / (1920 - 320)));
	font-size: calc(13px + (14 - 13) * ((100vw - 320px) / (1920 - 320)));
}
.blog-sidebar .theme-card .recent-blog li .blog-box .blog-content a h5 {
	padding-bottom: 0;
	text-transform: unset;
	margin: 0;
	line-height: 1.4;
	font-size: calc(14px + (15 - 14) * ((100vw - 320px) / (1920 - 320)));
	font-weight: 500;
}
.blog-sidebar .recent-blog {list-style: none;padding-left: 0;}
.blog-sidebar .theme-card .categories {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: calc(10px + (14 - 10) * ((100vw - 320px) / (1920 - 320)));
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-bottom: -4px;
    list-style: none;
    padding-left: 0px;
}
.blog-sidebar .theme-card .categories li {
	position: relative;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	z-index: 0;
	width: 100%;
	padding-left: 0;
	padding-top: 0;
}
.blog-sidebar .theme-card .categories li a {
	display: block;
	font-size: calc(14px + 0.00125 * (100vw - 320px));
	color: #222;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: baseline;
	-ms-flex-align: baseline;
	align-items: baseline;
	gap: 8px;
}
.blog-sidebar .theme-card .categories li a h5 {
	margin: 0;
	padding: 0;
	font-weight: 500;
	text-transform: none;
	line-height: 1.3;
	font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
}
.blog-sidebar .theme-card .tags {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: 9px 12px;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
    list-style: none;
    padding-left: 0px;
}
.blog-sidebar .theme-card .tags li {
	padding: 6px calc(9px + (13 - 9) * ((100vw - 320px) / (1920 - 320)));
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	background-color: #fff;
	border: 1px solid #eee;
}
.blog-sidebar .theme-card .tags li a {
	font-size: calc(13px + (14 - 13) * ((100vw - 320px) / (1920 - 320)));
	color: #777;
	text-transform: unset;
	font-weight: 500;
}
@media (max-width: 1023px) {
  .card.image-right, .card.image-left {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  body:not(.fsComposeMode) .panel-gray, body:not(.fsComposeMode) .panel-light-blue, body:not(.fsComposeMode) .panel-image {
        position: relative;
        margin: 40px 0;
        padding: 30px 20px 80px 20px;
    }
    body:not(.fsComposeMode) .custom-posts.fsGrid .fsStyleFourColumns article {
        width: calc(50% - 20px);
    }

  #fsEl_18699 {display: none;}  
  #fsEl_18701 {width: 100% !important;}
  div#fsMenu .header-logo img {max-width: initial !important;}

}
@media (max-width: 600px) {
    body:not(.fsComposeMode) .custom-posts.fsGrid .fsStyleFourColumns article {
        width: calc(100% - 20px);
    }
}


  .holisticCard .card {
            background: #f8f8f8;
            border-radius: 20px;
            padding: 40px 30px;
            text-align: center;
            box-shadow: -6px -6px 8px rgba(255, 255, 255, 0.8), -2px -1px 8px #FFF, 2px 2px 10px rgba(255, 255, 255, 0.25), -4px -4px 20px rgba(255, 255, 255, 0.8), 1px 1px 5px rgba(185, 185, 185, 0.6), 4px 4px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            border: none;
            height: 100%;
        }

        .holisticCard .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.5s ease;
        }

        .holisticCard .card:hover::before {
            left: 100%;
        }

        .holisticCard .card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
        }

        .holisticCard .card-title {
            font-size: 17px;
            font-weight: 600;
            letter-spacing: 2px;
            color: #1b3b60;
            margin-bottom: 30px;
            text-transform: uppercase;
        }

        .holisticCard .icon-container {
            width: 120px;
            height: 120px;
            margin: 0 auto 30px;
            border-radius: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.3s ease;
            position: relative;
            background: linear-gradient(133.21deg, #F7F7F7 -2.44%, #F9F9F9 135.62%);
            box-shadow: -6px -6px 8px rgba(255, 255, 255, 0.8), -2px -1px 8px #FFF, 2px 2px 10px rgba(255, 255, 255, 0.25), -4px -4px 20px rgba(255, 255, 255, 0.8), 1px 1px 5px rgba(185, 185, 185, 0.6), 4px 4px 15px rgba(0, 0, 0, 0.1);
        }

        .holisticCard .icon {
            width: 60px;
            height: 60px;
            transition: all 0.5s ease;
        }

        .holisticCard .card:hover .icon {
            transform: rotate(360deg) scale(1.1);
        }

        .holisticCard .card-description {
            font-size: 17px;
            line-height: 1.8;
            color: #1b3b60;
            margin-bottom: 20px;
        }

        .holisticCard .card-button {
            display: inline-block;
            padding: 12px 30px;
            background: #4a90e2;
            color: white;
            text-decoration: none;
            border-radius: 25px;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.3s ease;
            margin-top: 10px;
            opacity: 0;
            transform: translateY(10px);
        }

        .holisticCard .card:hover .card-button {
            opacity: 1;
            transform: translateY(0);
        }

        .holisticCard .card-button:hover {
            background: #357abd;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(74, 144, 226, 0.4);
        }

        /* Rocket Icon SVG */
        .holisticCard .rocket {
            fill: #9ca3af;
            transition: fill 0.3s ease;
        }

        .holisticCard .card:hover .rocket {
            fill: #4a90e2;
        }

        /* Code Icon SVG */
        .holisticCard .code {
            fill: #9ca3af;
            transition: fill 0.3s ease;
        }

        .holisticCard .card:hover .code {
            fill: #10b981;
        }

        /* Design Icon SVG */
        .holisticCard .design {
            fill: #9ca3af;
            transition: fill 0.3s ease;
        }

        .holisticCard .card:hover .design {
            fill: #f59e0b;
        }

        /* Animation for cards on load */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .holisticCard .card {
            animation: fadeInUp 0.6s ease forwards;
        }

        .holisticCard .col-12:nth-child(1) .card {
            animation-delay: 0.1s;
            opacity: 0;
        }

        .holisticCard .col-12:nth-child(2) .card {
            animation-delay: 0.2s;
            opacity: 0;
        }

        .holisticCard .col-12:nth-child(3) .card {
            animation-delay: 0.3s;
            opacity: 0;
        }

        /* Card click effect */
        .holisticCard .card:active {
            transform: scale(0.98);
        }

         /* Icon Colors */
       .holisticCard .icon-balanced {
            fill: #9ca3af;
            transition: fill 0.3s ease;
        }
        .holisticCard .card:hover .icon-balanced {
            fill: #8b5cf6;
        }
        .holisticCard .card:hover .icon-container:has(.icon-balanced) {
            background: #f3e8ff;
        }

        .holisticCard .icon-integrated {
            fill: #9ca3af;
            transition: fill 0.3s ease;
        }
        .holisticCard .card:hover .icon-integrated {
            fill: #3b82f6;
        }
        .holisticCard .card:hover .icon-container:has(.icon-integrated) {
            background: #dbeafe;
        }

        .holisticCard .icon-creative {
            fill: #9ca3af;
            transition: fill 0.3s ease;
        }
        .holisticCard .card:hover .icon-creative {
            fill: #ec4899;
        }
        .holisticCard .card:hover .icon-container:has(.icon-creative) {
            background: #fce7f3;
        }

        .holisticCard .icon-social {
            fill: #9ca3af;
            transition: fill 0.3s ease;
        }
        .holisticCard .card:hover .icon-social {
            fill: #10b981;
        }
        .holisticCard .card:hover .icon-container:has(.icon-social) {
            background: #d1fae5;
        }

        .holisticCard .icon-experiential {
            fill: #9ca3af;
            transition: fill 0.3s ease;
        }
        .holisticCard .card:hover .icon-experiential {
            fill: #f59e0b;
        }
        .holisticCard .card:hover .icon-container:has(.icon-experiential) {
            background: #fef3c7;
        }

        .holisticCard .icon-health {
            fill: #9ca3af;
            transition: fill 0.3s ease;
        }
        .holisticCard .card:hover .icon-health {
            fill: #ef4444;
        }
        .holisticCard .card:hover .icon-container:has(.icon-health) {
            background: #fee2e2;
        }

        .holisticCard .icon-global {
            fill: #9ca3af;
            transition: fill 0.3s ease;
        }
        .holisticCard .card:hover .icon-global {
            fill: #06b6d4;
        }
        .holisticCard .card:hover .icon-container:has(.icon-global) {
            background: #cffafe;
        }
.school-logo-icon-for-listitem {
	width: 25px;
	height: 30px;
	background-image: url('../img/logo-50.png');
	background-size: 100% auto;
  display: inline-block;
  vertical-align: middle;
}