/* Fonts — per Suryadhi Learning brand guidelines: headings use DM Serif
   Display, body/UI text uses Quicksand (the guideline defines only these
   two typefaces, so --font-secondary is also mapped to Quicksand) */
:root {
  --font-default: "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-primary: "DM Serif Display", serif;
  --font-secondary: "Quicksand", sans-serif;
}

/* Colors */
:root {
  --color-default: #2b1f0d;
  --color-primary: #34AEF3; /* Blue */
  --color-secondary: #F79809;  /* Orange */
  --color-neutral: #6B6B78; /* Gray */
  --color-orange-light: #ffecc4;
  /* --color-secondary: #04299c; */
}

.bg-light {
  background-color: #deefff94 !important;
}

/* Smalt (blue)
#04299c

California (yellow)
#fb9c04

Monza (red)
#d50404

Peppermint (wheat)
#e4f3dc */

/* Smooth scroll behavior  */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  font-family: var(--font-default);
  color: var(--color-default);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: 0.3s;
}



h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-primary);
}

/*--------------------------------------------------------------
# Sections & Section Header
--------------------------------------------------------------*/
section {
  overflow: hidden;
  padding: 80px 0;
}

.section-header {
  text-align: center;
  padding-bottom: 30px;
}

.section-header h2 {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.section-header h2:after {
  content: "";
  position: absolute;
  display: block;
  width: 150px;
  height: 40px;
  background-image: url('../img/line.png'); /* Use full URL or local copy */
  background-size: contain;
  background-repeat: no-repeat;
  left: 0;
  right: 0;
  bottom: -25px;
  margin: auto;
}

.section-header p {
  margin-bottom: 0;

}

/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
  padding: 140px 0 60px 0;
  min-height: 30vh;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.breadcrumbs:before {
  content: "";
  background-color: rgba(255, 255, 255, 0.2);
  position: absolute;
  inset: 0;
}

.breadcrumbs h2 {
  font-size: 56px;
  font-weight: 500;
  color: #000000;
  font-family: var(--font-secondary);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0 0 10px 0;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-primary);
}

.breadcrumbs ol a {
  color: rgba(0, 0, 0, 0.2);
  transition: 0.3s;
}

.breadcrumbs ol a:hover {
  text-decoration: underline;
}

.breadcrumbs ol li+li {
  padding-left: 10px;
}

.breadcrumbs ol li+li::before {
  display: inline-block;
  padding-right: 10px;
  color: #000000;
  content: "/";
}

/*--------------------------------------------------------------
# Scroll top button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background: var(--color-primary);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: #000000;
  line-height: 0;
}

.scroll-top:hover {
  background: rgba(4, 20, 161, 0.8);
  color: #ffffff;
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: #fff;
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid var(--color-primary);
  border-top-color: #fff;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.header {
  transition: all 0.5s;
  z-index: 997;
  padding: 12px 0;
  background: rgba(39, 39, 39, 0.99)
}

@media (max-width: 1200px) {
  .header {
    padding: 12px 0;
  }
}

.header.sticked {
  background: rgba(39, 39, 39, 0.99);
  padding: 8px 0;
}

.header .logo img {
  max-height: 45px;
  margin-right: 6px;
}

.header .logo h1 {
  font-size: 20px;
  font-weight: 700;
  color: #000000;
  font-family: var(--font-secondary);
  margin: 0;
}

.header .social-links a {
  /* !important: `.navbar a:focus` sets font-size:16px with the same
     specificity as this rule, and comes later in the stylesheet, so on
     click+hover together (a real mouse click) it would win and shrink
     both the link and the icon that inherits its size from it. */
  font-size: 30px !important;
  /* !important: `.navbar li:hover>a` (for regular single-link menu items)
     is more specific than this rule. Since all three icons share one
     <li>, hovering/clicking any one of them puts the whole <li> into
     :hover and that rule turns the OTHER icons blue too — without
     !important here they'd flash that unrelated color on every click. */
  color: white !important;
  /* !important: `.navbar a:focus` also sets padding:15px 0 15px 36px with
     the same specificity, and comes later — on click it would win and
     jump this link's left padding from 4px to 36px, shoving the next
     icon over. */
  padding-inline: 4px !important;
}
.header .social-links a:hover{
  color: var(--color-secondary) !important;
}

/* .navbar a i sets font-size:12px for the dropdown chevrons; since the
   social icons now live inside the nav <ul>, this stops it also shrinking
   the facebook/instagram/linkedin glyphs down to that size. The :focus
   variant is needed too — clicking a link gives it focus, and
   `.navbar a:focus i` has the same specificity but comes later in the
   stylesheet, so without this it would win and shrink the icon back down
   right after a click. */
.header .social-links a i,
.header .social-links a:focus i {
  font-size: inherit;
  margin-left: 0;
}

.navbar .social-links {
  gap: 18px;
  padding-left: 28px;
  margin-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

/*--------------------------------------------------------------
# Desktop Navigation
--------------------------------------------------------------*/


.navbar ul li a {
  font-size: 16px;
  text-align: center;
  font-weight: 700;
  line-height: 1.2;
}

.navbar ul li {
  position: relative;
}

.navbar ul li.dropdown > a img {
  width: 24px;
}

.navbar ul li ul {
  z-index: 999;
}

/* Hide/Show based on screen size */
.only-mobile {
  display: none;
}
.desktop-only {
  display: block;
}



/* ================================================ */
@media (min-width: 1280px) {
  .navbar {
    padding: 0;
  }

  .navbar ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navbar li {
    position: relative;
  }

  .navbar a,
  .navbar a:focus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0 15px 36px;
    font-family: var(--font-default);
    font-size: 16px;
    font-weight: 700;
    color: rgb(238, 238, 238);
    white-space: nowrap;
    transition: 0.3s;
  }

  .navbar a i,
  .navbar a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
  }

  .navbar a:hover,
  .navbar .active,
  .navbar .active:focus,
  .navbar li:hover>a {
    color: var(--color-primary);
  }

  .navbar .dropdown ul {
    display: block;
    position: absolute;
    right: 2px;
    top: calc(100% + 30px);
    margin: 0;
    padding: 10px 0;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    background: #fff;
    box-shadow: 0px 0px 30px rgba(128, 161, 127, 0.25);
    transition: 0.2s;
  }

  .navbar .dropdown ul li {
    min-width: 200px;
  }

  .navbar .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: #000;
  }

  .navbar .dropdown ul a i {
    font-size: 12px;
  }

  .navbar .dropdown ul a:hover,
  .navbar .dropdown ul .active:hover,
  .navbar .dropdown ul li:hover>a {
    color: var(--color-primary);
  }

  .navbar .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navbar .dropdown .dropdown ul {
    top: 0;
    left: calc(100% - 30px);
    visibility: hidden;
  }

  .navbar .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: 100%;
    visibility: visible;
  }
}

@media (min-width: 1280px) and (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {
    left: -90%;
  }

  .navbar .dropdown .dropdown:hover>ul {
    left: -100%;
  }
}

@media (min-width: 1280px) {

  .mobile-nav-show,
  .mobile-nav-hide {
    display: none;
  }
}

/*--------------------------------------------------------------
# Mobile Navigation
--------------------------------------------------------------*/


@media (max-width: 991px) {
  /* Single consolidated mobile-drawer block — this used to be two
     overlapping @media blocks (max-width:991px and max-width:1279px)
     that both styled .navbar with different values (opposite slide
     directions, different z-index stacks), which is what caused the
     visible glitch/flash when opening the menu. */

  .navbar {
    position: fixed;
    top: 0;
    left: -100%;
    right: auto;
    width: 100%;
    max-width: 320px;
    height: 100vh;
    background: rgba(20, 20, 20, 0.97);
    box-shadow: 2px 0 15px rgba(0, 0, 0, 0.25);
    transition: left 0.4s ease;
    padding: 0;
    z-index: 9999;
    /* Grid (not flex) for the header/scrollable-list/footer stack — the
       middle row's minmax(0, 1fr) is what actually lets it shrink to fit
       and scroll internally; with flexbox here the list ignored its
       siblings' space and pushed the footer out below the viewport. */
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .mobile-nav-active .navbar {
    left: 0 !important;
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  /* Semi-transparent backdrop over the page content, like the reference
     design — was previously opaque/near-opaque via .navbar:before. */
  .mobile-nav-active::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
  }

  /* .header has its own z-index:997 and is itself position:fixed, so it
     forms a stacking context capped at 997 — everything inside it,
     including .navbar's z-index:9999, was still stuck below this overlay
     (z-index:9998). The overlay was visually see-through (so the drawer
     still looked fine) but was silently absorbing every tap/click and
     blocking scroll gestures meant for the drawer underneath it. */
  .mobile-nav-active .header {
    z-index: 10000;
  }

  .mobile-nav-show {
    font-size: 28px;
    color: #fff;
    cursor: pointer;
  }

  .navbar-mobile-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 20px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
  }

  .navbar-mobile-title {
    color: #fff;
    font-weight: 700;
    font-size: 19px;
    line-height: 1.3;
  }

  .navbar-mobile-header .mobile-nav-hide {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    font-size: 15px;
    color: #fff;
    cursor: pointer;
  }

  .navbar ul {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 10px;
    margin: 0;
  }

  .navbar .dropdown > ul {
    display: none;
    padding-left: 15px;
  }

  .navbar .dropdown > .dropdown-active {
    display: block;
  }

  .navbar ul li a {
    display: block;
    width: 100%;
    padding: 10px 12px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    white-space: normal;
    text-align: left;
    background-color: transparent;
    color: #fff;
    border-radius: 6px;
    transition: background 0.3s ease;
  }

  .navbar ul li a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-primary);
  }

  .navbar .d-lg-none a {
    color: var(--color-secondary);
  }

  /* .header-simple .navbar a (in the header-simple rules, no media query)
     sets link color to the brand blue for the Locate-Us-style header —
     that reads fine on its light desktop bar but needs to stay white on
     this dark drawer. Needs the extra `ul` + `li` to out-specificity it. */
  .header-simple .navbar ul li a {
    color: #fff;
  }

  .only-mobile {
    display: block;
  }
  .desktop-only {
    display: none;
  }

  .navbar-mobile-footer {
    flex-shrink: 0;
    padding: 16px 20px 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .navbar-mobile-contact {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
  }

  /* Extra .navbar prefix on these two matches the specificity of
     .navbar .d-lg-none a above (both footer sections carry d-lg-none),
     which would otherwise win with its orange color and override these. */
  .navbar .navbar-mobile-contact a {
    color: #fff;
    font-size: 13px;
    text-decoration: none;
  }

  .navbar-mobile-contact a i {
    margin-right: 6px;
    color: #fff;
  }

  .navbar-mobile-social {
    display: flex;
    gap: 14px;
  }

  .navbar .navbar-mobile-social a {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
  }
}

@media (min-width: 992px) and (max-width: 1279px) {
  .navbar {
    position: static;
    right: auto;
    width: auto;
    max-width: none;
    height: auto;
    background: transparent;
    box-shadow: none;
  }

  .navbar ul {
    position: static;
    display: flex;
    flex-direction: row;
    background: none;
  }

  .mobile-nav-show,
  .mobile-nav-hide {
    display: none;
  }

  /* Same current-page highlight as the >=1280px rule below, so smaller
     laptop widths (992-1279px) get it too. */
  .navbar a:hover,
  .navbar .active,
  .navbar .active:focus,
  .navbar li:hover > a {
    color: var(--color-primary);
  }
}


/*--------------------------------------------------------------
# Hero Section about
--------------------------------------------------------------*/
.hero {
  overflow: hidden;
  padding: 0;
}

.hero .carousel {
  width: 100%;
  height: calc(100vh - 94px);
  margin: 94px 0 0;
  padding: 0;
  background: #E0E9EE;
  position: relative;
}

@media (max-width: 992px) {
.hero .carousel {
  width: 100%;
  aspect-ratio: 2.4;
  height: auto;
  /* Mobile/tablet header is shorter (~74px, single logo+hamburger row)
     than desktop's 94px — using the desktop value here left a visible
     gap of empty white space between the header and the banner. */
  margin: 74px 0 0;
  padding: 0;
  position: relative;
}
}

.hero-half .carousel {
  min-height: 70vh;
}
.hero .carousel-item {
  position: absolute;
  inset: 0;
  display: block !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease-in-out;
}

.hero .carousel-item.active {
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
}

.hero .carousel-indicators {
  position: absolute;
  bottom: 16px;
  z-index: 2;
  margin: 0;
  gap: 1px;
}

.hero .carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background-color: rgba(255, 255, 255, 0.6);
  opacity: 1;
  text-indent: -9999px;
}

.hero .carousel-indicators [data-bs-target].active {
  background-color: var(--color-secondary);
}

.hero .carousel-item::before {
  content: "";
  background-color: rgba(255, 255, 255, 0.1);
  position: absolute;
  inset: 0;
}

.hero .info {
  position: absolute;
  z-index: 2;
}

@media (max-width: 768px) {
  .hero .info {
    padding: 0 40px;
    padding-top: 60px; 
  }
}

.hero .info h2 {
  color: #fff;
  margin-bottom: 30px;
  padding-bottom: 30px;
  font-size: 56px;
  font-weight: 700;
  position: relative;
}

.hero .info h2:after {
  content: "";
  position: absolute;
  display: block;
  width: 80px;
  height: 4px;
  background: var(--color-primary);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

@media (max-width: 768px) {
  .hero .info h2 {
    font-size: 36px;
  }
}

.hero .info p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 18px;
}

.hero .info .btn-get-started {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 9px 26px;
  border-radius: 6px;
  transition: 0.5s;
  margin: 10px;
  color: #ccd7ec;
  border: 2px solid #ccd7ec;
}

.hero .info .btn-get-started:hover {
  background: #ccd7ec;
  color: #000;
  
}

.hero .carousel-control-prev {
  justify-content: start;
}

@media (min-width: 640px) {
  .hero .carousel-control-prev {
    padding-left: 15px;
  }
}

.hero .carousel-control-next {
  justify-content: end;
}

@media (min-width: 640px) {
  .hero .carousel-control-next {
    padding-right: 15px;
  }
}

.hero .carousel-control-next-icon,
.hero .carousel-control-prev-icon {
  background: none;
  font-size: 26px;
  line-height: 0;
  background: rgba(0, 0, 0, 0.9);
  color: rgb(255, 255, 255);
  border-radius: 50px;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero .carousel-control-prev,
.hero .carousel-control-next {
  z-index: 3;
  transition: 0.3s;
}

.hero .carousel-control-prev:focus,
.hero .carousel-control-next:focus {
  opacity: 0.67;
}

.hero .carousel-control-prev:hover,
.hero .carousel-control-next:hover {
  opacity: 0.9;
}

/*--------------------------------------------------------------
# Why Choose Us Section
--------------------------------------------------------------*/
.why-us {
  padding-bottom: 0;
}

.why-us .img-bg {
  min-height: 500px;
  background-size: cover;
}

.why-us .slides {
  background-color: #f7f9fc;
}

.why-us h3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-secondary);
}

.why-us h4 {
  font-size: 18px;
  font-weight: 400;
  color: #296a2c;
  font-family: var(--font-secondary);
}

.why-us .swiper {
  margin: 140px 140px 120px 140px;
  overflow: hidden;
}

.why-us .swiper-button-prev:after,
.why-us .swiper-button-next:after {
  font-size: 24px;
  color: var(--color-secondary);
}

.why-us .swiper-button-prev {
  left: 80px;
}

.why-us .swiper-button-next {
  right: 80px;
}

.why-us .swiper-pagination {
  margin-top: 30px;
  position: relative;
}

.why-us .swiper-pagination .swiper-pagination-bullet {
  background-color: var(--color-secondary);
}

.why-us .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--color-primary);
}

@media (max-width: 1200px) {
  .why-us .swiper {
    margin: 60px 60px 40px 60px;
  }

  .why-us .swiper-button-prev,
  .why-us .swiper-button-next {
    display: none;
  }
}

@media (max-width: 575px) {
  .why-us .swiper {
    margin: 40px 40px 20px 40px;
  }
}

.page-about .why-us {
  padding: 0 0 80px 0;
}


/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/

.about-importance .content ul li {
  line-height: 1.6; 
  padding-left: 32px; 
  list-style: none;
  font-size: 24px;
  font-weight: 500;
}
@media (max-width: 766px)  {
  .about-importance .content ul li {
    line-height: 1.6; 
    padding-left: 2px; 
    list-style: none;
    font-size: 18px;
    font-weight: 500;
  }

}
  .about-importance .content ul li {
  transition: transform 0.3s ease;
  
}
.about-importance .content ul li:hover {
  transform: translateY(-5px);
}
.about-importance .content ul li i{
  font-size: 28px;
  color: var(--color-primary);
}


/*--------------------------------------------------------------
# Services List Section
--------------------------------------------------------------*/




.service-card {
  border: 1px solid #c7c7c4;
  border-radius: 18px;
  box-shadow: 0 0 10px rgba(134, 134, 134, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.service-card .img-fluid {
  padding: 0;
  margin: 0;
  text-align: center;
}


.service-card img {
  display: block;
}

.service-card .service-content {
  padding: 20px;
  text-align: center;
}

.service-card .title {
  text-align: center;
  color: #1c3b14;
  padding-bottom: 20px;
}
.service-card a {
  font-weight: 600;
  color: #183d17;
}



.service-card .description {
  margin-bottom: 2px;
  text-align: center;
  color: rgb(0, 0, 0);
}


.services-list .service-item {
  position: relative;
}

.services-list .service-item .icon i {
  font-size: 32px;
  line-height: 0;
  margin-right: 20px;
  color: #38618e;
}

.services-list .service-item .title {
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 18px;
}

.services-list .service-item .title a {
  color: #000000;
}

.services-list .service-item .title a:hover {
  color: #000000;
}

.services-list .service-item .description {
  line-height: 24px;
  font-size: 16px;
}

.service-card-bg-1{
  background: #091c57;
}
.service-card-bg-2{
  background: #860303;
}
/*--------------------------------------------------------------
# Call To Action Section


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


.about-boxes {
  background: url("../img/cta-bg.jpg") center top no-repeat fixed;
  background-size: cover;
  padding: 100px 0;
  position: relative;
}

.about-boxes::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9;
}

.about-boxes .container,
.about-boxes .container-fluid {
  position: relative;
  z-index: 10;
}
/* .call-to-action {
  background: linear-gradient(rgba(27, 47, 69, 0.8), rgba(27, 47, 69, 0.8)), url("../img/cta-bg.jpg") center center;
  background-size: cover;
  padding: 100px 0;
}

@media (min-width: 1365px) {
  .call-to-action {
    background-attachment: fixed;
  }
} */

.call-to-action h3 {
  color: #fff;
  font-size: 28px;
  margin-bottom: 25px;
  font-weight: 700;
}

.call-to-action p {
  color: #fff;
  margin-bottom: 25px;
}

.call-to-action .cta-btn {
  font-family: var(--font-default);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 40px;
  border-radius: 5px;
  transition: 0.5s;
  margin: 10px;
  color: #000000;
  background: #ebcd28;
}

.call-to-action .cta-btn:hover {
  background:#155812;
  color: #ffffff;
}

/*--------------------------------------------------------------
# Features Section card
--------------------------------------------------------------*/
.features {
  padding-bottom: 0;
}

.features h3 {
  color: var(--color-secondary);
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 30px;
}

.features .icon-list i {
  margin-right: 10px;
  font-size: 24px;
  line-height: 1.2;
}

.features .icon-list span {
  font-size: 18px;
  color: #000000;
}

.features .phone-wrap {
  position: absolute;
  right: 0;
}

@media (max-width: 768px) {
  .features .phone-wrap {
    position: relative;
  }
}

.features .phone-wrap img {
  width: 340px;
}

@media (max-width: 992px) {
  .features .phone-wrap img {
    margin-top: 30px;
  }
}

@media (max-width: 768px) {
  .features .phone-wrap img {
    width: 100%;
  }
}

.features .details {
  margin-top: 80px;
  padding: 120px 0;
  background-color: #f7f9fc;
}

.features .details h4 {
  color: var(--color-secondary);
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
}

.features .details p {
  margin-bottom: 20px;
  font-size: 15px;
}

.features .details .btn-get-started {
  font-family: var(--font-primary);
  display: inline-block;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1px;
  padding: 10px 32px;
  border-radius: 5px;
  transition: 0.5s;
  background: #174b0b;
  color: #fff;
  
}

.features .details .btn-get-started:hover {
  background: #f7ce19;
  color: #000000;
  
}

/*--------------------------------------------------------------
# Recent Blog Posts Section
--------------------------------------------------------------*/
.recent-posts .post-box {
  transition: 0.3s;
  height: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.recent-posts .post-box .post-img {
  overflow: hidden;
  position: relative;
}

.recent-posts .post-box .post-img img {
  transition: 0.5s;
}

.recent-posts .post-box .meta {
  margin-top: 15px;
}

.recent-posts .post-box .meta .post-date {
  font-size: 15px;
  font-weight: 400;
  color: #000;
}

.recent-posts .post-box .meta .post-author {
  font-size: 15px;
  font-weight: 400;
  color: #000;
}

.recent-posts .post-box .post-title {
  font-size: 18px;
  color: #000;
  font-weight: 700;
  margin: 15px 0 0 0;
  position: relative;
  transition: 0.3s;
}

.recent-posts .post-box p {
  margin: 15px 0 0 0;
  color: #000;
}

.recent-posts .post-box .readmore {
  display: flex;
  align-items: center;
  font-weight: 600;
  line-height: 1;
  transition: 0.3s;
  margin-top: 15px;
}

.recent-posts .post-box .readmore i {
  line-height: 0;
  margin-left: 4px;
  font-size: 18px;
}

.recent-posts .post-box:hover .post-title {
  color: #000;
}

.recent-posts .post-box:hover .post-img img {
  transform: scale(1.1);
}

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .team-member {
  overflow: hidden;
  background: #fff;
}

.team .team-member .member-img {
  position: relative;
  overflow: hidden;
}

.team .team-member .social {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 40px;
  opacity: 0;
  transition: ease-in-out 0.3s;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
}

.team .team-member .social a {
  transition: color 0.3s;
  color: #427c31;
  margin: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.team .team-member .social a i {
  line-height: 0;
}

.team .team-member .social a:hover {
  color: #000;
}

.team .team-member .social i {
  font-size: 18px;
  margin: 0 2px;
}

.team .team-member .member-info {
  padding: 25px 15px 0 15px;
  text-align: center;
}

.team .team-member .member-info h4 {
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 18px;
  color: var(--color-secondary);
}

.team .team-member .member-info span {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: #6c757d;
}

.team .team-member .member-info p {
  font-style: italic;
  font-size: 14px;
  line-height: 26px;
  color: #6c757d;
}

.team .team-member:hover .social {
  opacity: 1;
}

/*--------------------------------------------------------------
# Services Cards Section
--------------------------------------------------------------*/
.services-cards {
  background: #f7f9fc;
}

.services-cards .card-item {
  border: 1px solid rgba(27, 47, 69, 0.1);
  background: #fff;
  position: relative;
  border-radius: 0;
}

.services-cards .card-item .card-bg {
  min-height: 300px;
  background-size: cover;
  background-repeat: no-repeat;
}

.services-cards .card-item .card-body {
  padding: 30px;
}

.services-cards .card-item h4 {
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 15px;
  color: var(--color-secondary);
}

.services-cards .card-item p {
  color: var(--color-secondary);
  margin: 0;
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials {
  padding-bottom: 0;
}
.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
  overflow: hidden;
}

.testimonials .testimonial-item {
  box-sizing: content-box;
  min-height: 320px;
}

.testimonials .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50%;
  margin: -40px 0 0 40px;
  position: relative;
  z-index: 2;
  border: 6px solid #fff;
}

.testimonials .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 5px 45px;
  color: #111;
}

.testimonials .testimonial-item h4 {
  font-size: 14px;
  color: #999;
  margin: 0 0 0 45px;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: #a8c2d3;
  font-size: 26px;
}

.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
}

.testimonials .testimonial-item p {
  font-style: italic;
  margin: 0 15px 0 15px;
  padding: 20px 20px 60px 20px;
  background: #eff4f7;
  position: relative;
  border-radius: 6px;
  position: relative;
  z-index: 1;
}

.testimonials .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 1;
  border: 1px solid #1b72ac;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #1b77ac;
}


/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-flters {
  padding: 0;
  margin: 0 auto 30px auto;
  list-style: none;
  text-align: center;
}

.portfolio .portfolio-flters li {
  color: var(--color-secondary);
  cursor: pointer;
  display: inline-block;
  padding: 0;
  font-size: 18px;
  font-weight: 400;
  margin: 0 10px;
  line-height: 1;
  margin-bottom: 5px;
  transition: all 0.3s ease-in-out;
}

.portfolio .portfolio-flters li:hover,
.portfolio .portfolio-flters li.filter-active {
  color: var(--color-primary);
}

.portfolio .portfolio-flters li:first-child {
  margin-left: 0;
}

.portfolio .portfolio-flters li:last-child {
  margin-right: 0;
}

@media (max-width: 575px) {
  .portfolio .portfolio-flters li {
    font-size: 14px;
    margin: 0 5px;
  }
}

.portfolio .portfolio-item {
  position: relative;
}

.portfolio .portfolio-item .portfolio-info {
  opacity: 0;
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 0;
  z-index: 3;
  transition: all ease-in-out 0.3s;
  background: rgba(255, 255, 255, 0.9);
  padding: 15px;
}

.portfolio .portfolio-item .portfolio-info h4 {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-default);
  padding-right: 50px;
}

.portfolio .portfolio-item .portfolio-info p {
  color: #6c757d;
  font-size: 14px;
  margin-bottom: 0;
  padding-right: 50px;
}

.portfolio .portfolio-item .portfolio-info .preview-link,
.portfolio .portfolio-item .portfolio-info .details-link {
  position: absolute;
  right: 50px;
  font-size: 24px;
  top: calc(50% - 14px);
  color: rgba(27, 69, 36, 0.7);
  transition: 0.3s;
  line-height: 0;
}

.portfolio .portfolio-item .portfolio-info .preview-link:hover,
.portfolio .portfolio-item .portfolio-info .details-link:hover {
  color: var(--color-primary);
}

.portfolio .portfolio-item .portfolio-info .details-link {
  right: 14px;
  font-size: 28px;
}

.portfolio .portfolio-item:hover .portfolio-info {
  opacity: 1;
  bottom: 20px;
}

/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 1;
  border: 1px solid var(--color-primary);
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--color-primary);
}

.portfolio-details .portfolio-info {
  padding: 30px;
  box-shadow: 0px 0 30px rgba(27, 47, 69, 0.1);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #d6e2ef;
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li+li {
  margin-top: 10px;
}

.portfolio-details .portfolio-description {
  padding-top: 30px;
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--color-secondary);
}

.portfolio-details .portfolio-description p {
  padding: 0;
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact {
  /* background: url("../img/contact-bg.png") left top no-repeat; */
  background-size: contain;
  position: relative;
}

@media (max-width: 640px) {
  .contact {
    background-position: center 50px;
  }
}

.contact:before {
  content: "";
  background: rgba(255, 255, 255, 0.7);
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}

.contact .info-item+.info-item {
  margin-top: 40px;
}

.contact .info-item i {
  font-size: 20px;
  background: var(--color-primary);
  color: #fff;
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
  margin-right: 15px;
}

.contact .info-item h4 {
  padding: 0;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--color-primary);
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}

@media (max-width: 500px) {
  .contact iframe {
    margin-top: 24px;
    height: 400px;
    width: 350px;
  }
}

@media (max-width: 1000px) {
  .contact iframe {
    margin-top: 24px;
    align-self: center;
    justify-self: center;
  }
}
.contact .php-email-form {
  width: 100%;
}

.contact .php-email-form .form-group {
  padding-bottom: 8px;
}

.contact .php-email-form .error-message {
  display: none;
  color: #fff;
  background: #df1529;
  text-align: left;
  padding: 15px;
  font-weight: 600;
}

.contact .php-email-form .error-message br+br {
  margin-top: 25px;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #fff;
  background: #059652;
  text-align: center;
  padding: 15px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: #fff;
  text-align: center;
  padding: 15px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid #059652;
  border-top-color: #fff;
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input,
.contact .php-email-form textarea {
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
  padding: 12px 15px;
}

.contact .php-email-form input:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--color-primary);
}

.contact .php-email-form textarea {
  padding: 10px 12px;
}

.contact .php-email-form button[type=submit] {
  background: #51d11f;
  border: 0;
  padding: 12px 40px;
  color: #fff;
  transition: 0.4s;
}

.contact .php-email-form button[type=submit]:hover {
  background: var(--color-primary);
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
  font-size: 14px;
}

.footer .footer-content {
  background-color: #f7f9fc;
  background-size: contain;
  padding: 60px 0 30px 0;
}

.footer .footer-content .footer-info {
  margin-bottom: 30px;
}

.footer .footer-content .footer-info .logo {
  line-height: 0;
  margin-bottom: 25px;
}

.footer .footer-content .footer-info .logo img {
  /* Keep the box at its original reserved size so the address text below
     doesn't get pushed down, and use transform to visually enlarge the
     logo instead — transform only affects painting, not layout. */
  max-height: 40px;
  margin-right: 6px;
  /* There's ~60px of free space above the logo (the footer's top
     padding) but only ~25px before the address text below, so an
     off-center origin (biased toward the bottom) uses both budgets
     proportionally and allows a much bigger scale than growing from
     the center, without touching either boundary. */
  transform: translate(-10px, 2px) scale(2.7);
  transform-origin: left 70%;
}

.footer .footer-content .footer-info .logo span {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--color-secondary);
  font-family: var(--font-secondary);
  margin-top: 3px;
}

.footer .footer-content .footer-info p {
  font-size: 15px;
  margin-bottom: 0;
  /* var(--font-primary) is the decorative serif used for headings — hard
     to read at this size, so use the readable sans-serif instead. */
  font-family: var(--font-secondary);
  line-height: 1.7;
  letter-spacing: 0.2px;
  color: black;
}

.footer .footer-content .social-links a {
  font-size: 14px;
  line-height: 0;
  display: inline-block;
  width: 32px;
  height: 32px;
  color: rgba(0, 0, 0, 0.5);
  margin-right: 10px;
  transition: 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  color: #fff;
  border-radius: 5px;
}

.footer .footer-content .social-links .facebook:hover {
  background-color: #297cc9;
}
.footer .footer-content .social-links .instagram:hover {
  background-color: #cb59e7;
}

.footer .footer-content h4 {
  font-size: 16px;
  font-weight: bold;
  color: #000000;
  position: relative;
  padding-bottom: 12px;
}

.footer .footer-content .footer-links {
  margin-bottom: 30px;
}

.footer .footer-content .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-content .footer-links ul i {
  margin-right: 2px;
  color: black;
  font-size: 16px;
  line-height: 0;
}

.footer .footer-content .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-content .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-content .footer-links ul a {
  color: #000000;
  transition: 0.3s;
  display: inline-block;
  line-height: 1;
}

.footer .footer-content .footer-links ul a:hover {
  color: var(--color-secondary);
}

.footer .footer-content .footer-contact p {
  line-height: 26px;
  color: black;
}

.footer .footer-legal {
  background: #fff;
  padding: 30px 0;
}

.footer .footer-legal .copyright {
  text-align: center;
  color: black;
}

.footer .footer-legal .credits {
  padding-top: 4px;
  text-align: center;
  font-size: 13px;
  color: black;
}

.mpd {
  overflow-x: auto;
}

/* new */

.features-section .feature-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 12px;
  background-color: #ffffff;
}

.features-section .feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.features-section .icon-wrap {
  font-size: 36px;
  color: var(--color-secondary); 
  flex-shrink: 0;
}

.features-section .icon-wrap {
  width: 60px;
  height: 60px;
  background-color: var(--color-secondary); 
  color: #000000;
  font-size: 24px;
  border-radius: 50%;
  transition: background-color 0.5s ease;
}

.features-section .feature-card:hover .icon-wrap {
  background-color: var(--color-primary);
  color: #ffffff;
}

.features-section .feature-icon-img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}


/* Same fix as .features-section .card-title below: overrides the global
   h1-h6 decorative serif (DM Serif Display) with the readable sans-serif,
   and loosens the tight default letter-spacing. */
.franchise-benefit-title {
  font-family: var(--font-secondary);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.3px;
  line-height: 1.4;
  margin: 0;
}

.features-section .card-title {
  /* Overrides the global h1-h6 rule's decorative serif (DM Serif Display)
     with the site's plain sans-serif — the serif reads fine at large
     headline sizes but was cramped and hard to read at card-title size. */
  font-family: var(--font-secondary);
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-bottom: 12px;
  color: var(--color-primary);
}

.features-section .card-text {
  color: var(--color-neutral);
}

.features-section .nav-tabs .nav-link {
  font-weight: 600;
  color: #555;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.features-section .nav-tabs .nav-link.active {
  background-color: var(--color-primary);
  color: #fff;
  border-radius: 0.5rem;
}

.feature-item img {
  transition: transform 0.3s ease;
  border-radius: 50%;
  object-fit: cover;
    width: 60px;
  height: 60px;
}
.feature-item:hover img {
  transform: scale(1.1);
}

/* == For bi icons == */

.icon-circle {
  width: 77px;
  height: 77px;
   min-width: 70px;
   min-height: 70px;
  border-radius: 50%;
  background-color: rgb(255, 255, 255); 
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: 26px;
  font-weight: bolder;
}


.icon-circle:hover {
  transform: translateY(-5px);
  transition: 0.3s ease;
}

.expertise-card {
  background-color: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.expertise-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}


/* =========== */

/* Make the tab buttons scrollable on small screens  */
.features-section .nav-pills {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;  /* Enable horizontal scrolling */
  -webkit-overflow-scrolling: touch;
}

/* Scrollbar styling for horizontal nav */
.features-section .nav-pills::-webkit-scrollbar {
  height: 6px;
}
.features-section .nav-pills::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}

/* For mobile devices, stack the tabs vertically */
@media (max-width: 767px) {
  .features-section .nav-pills {
    flex-direction: column;
    overflow-x: visible;
  }
  .features-section .row.align-items-center {
    flex-direction: column;
    text-align: center;
  }
  .feature-item {
    justify-content: center;
  }
  .feature-item img {
    margin-right: 0;
    margin-bottom: 8px;
  }
}
/* Optional: Style for active tabs */
.features-section .nav-pills .nav-link.active {
  background-color: var(--color-primary);
  color: #fff;
  border-radius: 0.5rem;
}



/* franchise section */

#franchise {
  background-color: var(--color-primary);
}

#franchise h5 {
  color: white;
  font-weight: 600;
}

#franchise ul li {
  font-size: 16px;
  margin-bottom: 8px;
}
#franchise .section-header h2{
  font-size: 44px;
}

/* about-page */

.about-page {
  background-image: url(https://img.freepik.com/premium-vector/light-sky-blue-background_1218087-237.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  height: auto;

}

.about-page2 {
 background-color: var(--color-primary);

}
 

/* forms*/


.form-contact-section {
  width: 100%;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
  padding: 1.5rem 1rem;

}

/* When ContactForm gets an imageSrc, the intro+fields share the section's
   existing width with the mascot instead of the section growing to fit
   both — the fields get narrower, not the box bigger. */
.form-contact-layout {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.form-contact-main {
  flex: 0 0 50%;
  max-width: 50%;
  min-width: 0;
}

.form-contact-side-image {
  flex: 0 0 50%;
  width: 50%;
  max-width: 50%;
}

.form-contact-side-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* On mobile the image drops below the form (in DOM order) instead of
   squeezing beside it, since there's no room for a side-by-side layout. */
@media (max-width: 767px) {
  .form-contact-layout {
    flex-direction: column;
    /* align-items: center (set for the desktop row layout) shrinks
       children to their content width once the axis flips to column —
       stretch so the form fields fill the available width instead. */
    align-items: stretch;
  }

  .form-contact-main {
    flex-basis: 100%;
    max-width: 100%;
  }

  .form-contact-side-image {
    flex-basis: auto;
    width: 55%;
    max-width: 220px;
    margin: 1.5rem auto 0;
  }
}

.form-contact-intro > * + * {
  margin-top: 0.5rem;
}

.form-contact-title {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: bolder;
}

.form-contact-description {
  color: rgb(92, 97, 105);
}


.form-group-container {
  display: grid;
  gap: 0.65rem;
  margin-top: 1.1rem;
  border-radius: 5px;
}

.form-group {
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.form-label {
  margin-bottom: 0.3rem;
  margin-left: 1px;
  font-size: 14px;
}

.form-input,
.form-textarea {
  padding: 6px 8px;
  border: 1px solid #a8a8a8;
  display: flex;
  height: 36px;
  width: 100%;
  border-radius: 6px;
  font-size: 14px;
  line-height: 20px;
}

.form-input::placeholder,
.form-textarea:focus-visible {
  color: #53575f;
}

.form-input:focus-visible,
.form-textarea:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.form-textarea {
  min-height: 80px;
}

.form-submit {
  width: 100%;
  margin-top: 0.7rem;
  background-color: var(--color-primary);
  color: #fff;
  padding: 13px 5px;
  border-radius: 0.375rem;
  transition: all 0.3s ease;
  border: 2px solid var(--color-primary);
}
.form-submit:hover {
  background-color: transparent;
  color: var(--color-primary);
}

/* Orange submit button for the "Join Our Family" form specifically
   (the ContactForm instance with a side image) — the plain /contact
   page form keeps the blue button. */
.form-contact-layout .form-submit {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.form-contact-layout .form-submit:hover {
  background-color: transparent;
  color: var(--color-secondary);
}


.form-box .form-control {
    padding: 8px 10px;        
}




.form-box .mb-3 {
    margin-bottom: 8px !important;
}

/* .hero-section sets overflow:hidden via the global `section` rule above,
   which breaks position:sticky on .form-box (sticky needs a scrollable
   ancestor, not a clipped one) */
.hero-section {
  overflow: visible;
  /* The generic `section{padding:80px 0}` above was being relied on as
     this class's only header clearance, but 80px doesn't match the real
     fixed header height at either breakpoint — it undershot the ~92px
     desktop header (banner content started ~12px under the header,
     hidden) and overshot the ~74px mobile header (a visible gap). This
     affects every page using .hero-section: Preschool Admission,
     Franchise Opportunity, Step Program, Playgroup, Nursery, SUJunior,
     SUSenior and the Locate Us centre-detail view. */
  padding-top: 94px;
}

@media (max-width: 991.98px) {
  .hero-section {
    padding-top: 74px;
  }
}

/* Curriculum page's top banner is a plain full-width div (not
   .hero-section), so it had no header clearance at all — its top edge
   was hidden behind the fixed header. */
.curriculum-hero-image {
  margin-top: 94px;
}

@media (max-width: 991.98px) {
  .curriculum-hero-image {
    /* Mobile header is ~69px tall, not 74px — that 5px difference was
       showing as a gap above the image. */
    margin-top: 69px;
  }
}

.form-box {
  background: rgb(38, 132, 255);
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  width: 100%;
}

/* Large screens */
/* Hero Section Height icon-circle Fix */
@media (min-width: 992px) {

  .form-box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 40px;
    margin: 10px 30px 30px 80px;
    width: calc(100% - 30px);
    max-width: 360px;
    position: sticky;
    top: 90px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
  }

  /* Forms taller than the viewport (e.g. PreschoolAdmissionForm with the
     captcha field) should size to their content instead of scrolling
     inside the sticky box. Also hug the narrower admission-form-pro width
     instead of stretching the whole column, which left large empty
     gutters on either side of the inputs. */
  .form-box-fit {
    max-height: none;
    overflow-y: visible;
    width: auto;
    max-width: 360px;
  }
}


/* Small screens */
@media (max-width: 991.98px) {

  .form-box {
    margin: 20px auto;
    padding: 20px;
    width: 90%;               /* reduce full form width */
    border-radius: 12px;
  }

  .form-box h2{
    font-weight: bolder;
    font-size: 22px;
    text-align: center;
  }

  .form-box .form-control {
    padding: 2px 8px;    
    max-width: 100%;      /* reduce input width */
    margin: 0 0;           /* center inputs */
  }

  .form-label {
  font-size: 12px;
}

  .form-box .mb-3 {
    padding-left: 15px;
    padding-right: 15px;
  }

  .form-box button {
    margin: 20px 0;
  }
}

/* Professional styling for PreschoolAdmissionForm (components/FormComponents) */

.admission-form-pro {
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
}

/* Solid brand blue (the same #34AEF3 the field icons used to be)
   instead of the navy gradient. Scoped to just this form via :has() so
   Nursery/Playgroup/etc. keep the original .form-box blue. */
.form-box:has(.admission-form-pro) {
  background: #3BA3DB;  /*34AEF38*/
}

.admission-form-pro-title {
  color: #FFFFFF;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 21px;
  text-align: center;
  margin: 0px 0px 20px;
}

.admission-form-pro-subtitle {
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  text-align: center;
  margin: -14px 0 14px;
}

.admission-form-pro .mb-3 {
  margin-bottom: 10px !important;
}

.admission-form-pro .form-label {
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 3px;
}

.admission-form-pro-star {
  color: var(--color-secondary);
  margin-left: 3px;
}

.admission-form-pro .form-control.admission-form-pro-input,
.admission-form-pro .form-select.admission-form-pro-input {
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 14px;
  height: auto;
}

.admission-form-pro-input:focus,
.admission-form-pro .form-select:focus {
  box-shadow: 0 0 0 3px rgba(247, 152, 9, 0.4);
}

.admission-form-pro-field,
.admission-form-pro-phone {
  display: flex;
  align-items: stretch;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
}

.admission-form-pro-field i,
.admission-form-pro-phone i {
  display: flex;
  align-items: center;
  padding-left: 14px;
  color: #000;
  font-size: 15px;
}

.admission-form-pro-code {
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-neutral);
  border-right: 1px solid #e0e0e0;
}

.admission-form-pro-field .form-control.admission-form-pro-input,
.admission-form-pro-field .form-select.admission-form-pro-input,
.admission-form-pro-phone .form-control.admission-form-pro-input {
  border-radius: 0;
  padding-left: 10px;
  flex: 1;
}

.admission-form-pro-error {
  color: #ffe0e0;
  background: rgba(220, 53, 69, 0.35);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  margin-bottom: 10px;
}

.admission-form-pro-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--color-secondary);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-top: 4px;
  transition: all 0.3s ease;
}

.admission-form-pro-submit:hover {
  background: #fff;
  color: var(--color-secondary);
}

/* Preschool Admission hero: banner image is full-width, form overlays
   the empty right side the image was designed with. */

.admission-hero-media {
  position: relative;
}

.admission-hero-media > img {
  display: block;
  width: 100%;
  height: auto;
}

.admission-hero-media .form-box {
  position: absolute;
  top: 50%;
  right: 10%;
  transform: translateY(-50%);
  margin: 0;
  width: 360px;
  max-width: 44%;
  max-height: none;
  overflow: visible;
}

@media (max-width: 991.98px) {
  .admission-hero-media {
    position: static;
  }

  .admission-hero-media .form-box {
    position: static;
    transform: none;
    width: 90%;
    max-width: 90%;
    margin: 20px auto;
  }
}

/* Franchise Opportunity hero: banner is height-constrained to fit the
   first screen (no scrolling needed to see all of it) instead of
   width-constrained. The outer strip is filled with the banner's own
   background colour, so the image (centered, scaled down to fit) blends
   in with no visible letterbox bars. Form width matches the Preschool
   Admission overlay form. */

.franchise-hero-outer {
  position: relative;
  width: 100%;
  height: calc(100vh - 90px);
  background: #E0E9EE;
  overflow: hidden;
  text-align: center;
  font-size: 0;
  line-height: calc(100vh - 90px);
}

.franchise-hero-media {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
  font-size: initial;
  transform: translateX(-60px);
}

.franchise-hero-media > img {
  display: block;
  max-width: calc(100vw - 120px);
  max-height: calc(100vh - 90px);
  width: auto;
  height: auto;
}

/* Positioned relative to .franchise-hero-outer (not .franchise-hero-media),
   so moving the image (via the transform above) never drags the form
   along with it — each can be tuned independently. */
.franchise-hero-outer > .form-box {
  position: absolute;
  top: 50%;
  right: 3%;
  transform: translateY(-50%);
  margin: 0;
  width: 360px;
  max-width: 44%;
  max-height: none;
  overflow: visible;
  line-height: normal;
  font-size: initial;
  text-align: left;
}

@media (max-width: 991.98px) {
  .franchise-hero-outer {
    height: auto;
    background: none;
    line-height: normal;
  }

  .franchise-hero-media {
    display: block;
    transform: none;
  }

  .franchise-hero-media > img {
    max-width: 100%;
    max-height: none;
    width: 100%;
    height: auto;
  }

  .franchise-hero-outer > .form-box {
    position: static;
    transform: none;
    width: 90%;
    max-width: 90%;
    margin: 20px auto;
    text-align: left;
  }
}

/* Step Program hero: same full-bleed-banner-with-overlaid-form pattern
   as Franchise Opportunity, own classes since this banner's empty zone
   is shaped differently (narrower on the right, widest near the top). */

.step-program-hero-outer {
  position: relative;
  width: 100%;
  height: calc(100vh - 90px);
  background: #DDE5EC;
  overflow: hidden;
  text-align: center;
  font-size: 0;
  line-height: calc(100vh - 90px);
}

.step-program-hero-media {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
  font-size: initial;
  /* The woman/tablet in the source photo already reach almost to its own
     right edge, so keeping the banner large (rather than shrinking it to
     line up with the header logo) means it has to sit close to the left
     screen edge — translateX stays at half the img's max-width offset
     below so the headline text isn't cropped off-screen. */
  transform: translateX(-240px);
}

.step-program-hero-media > img {
  display: block;
  max-width: calc(100vw - 480px);
  max-height: calc(100vh - 90px);
  width: auto;
  height: auto;
}

.step-program-hero-outer > .form-box {
  position: absolute;
  top: 50%;
  right: 3%;
  transform: translateY(-50%);
  margin: 0;
  width: 360px;
  max-width: 44%;
  max-height: none;
  overflow: visible;
  line-height: normal;
  font-size: initial;
  text-align: left;
}

@media (max-width: 991.98px) {
  .step-program-hero-outer {
    height: auto;
    background: none;
    line-height: normal;
  }

  .step-program-hero-media {
    display: block;
    transform: none;
  }

  .step-program-hero-media > img {
    max-width: 100%;
    max-height: none;
    width: 100%;
    height: auto;
  }

  .step-program-hero-outer > .form-box {
    position: static;
    transform: none;
    width: 90%;
    max-width: 90%;
    margin: 20px auto;
    text-align: left;
  }
}




/* Importance of school 
 */


 .about-importance .importance {
  padding-right: 2px;
  margin-right: 2px;
  transition: transform 0.3s ease, color 0.3s ease;
}

.about-importance li:hover .importance {
  color: var(--color-secondary);
  transform: translateY(-5px);
}

.about-importance .btn-get-started {
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 18px;
  display: inline-block;
  padding: 12px 30px;
  border-radius: 4px;
  transition: 0.5s;
  color: white;
  background: var(--color-primary);
}

.about-importance .btn-get-started:hover {
  background: var(--color-secondary);
  color: black;
}

/*--------------------------------------------------------------
# F.A.Q
--------------------------------------------------------------*/
.faq .faq-list {
  padding: 0 100px;
}

.faq .faq-list ul {
  padding: 0;
  list-style: none;
}

.faq .faq-list li+li {
  margin-top: 15px;
}

.faq .faq-list li {
  padding: 20px;
  background: #ffffff;
  border-radius: 4px;
  position: relative;
  box-shadow: 5px 5px 10px #c0c0c0;
}

.faq .faq-list a {
  display: block;
  position: relative;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  padding: 0 30px;
  outline: none;
  cursor: pointer;
}
.faq .faq-list a {
  color: #343a40;
  padding-bottom: 4px;
}

.faq .faq-list .icon-help {
  font-size: 26px;
  position: absolute;
  right: 0;
  left: 20px;
  top: 15px;
  color: #689bc4;
}

.faq .faq-list .icon-show,
.faq .faq-list .icon-close {
  font-size: 24px;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 0.3s ease;
}

.faq .faq-list p {
  margin-bottom: 0;
  padding: 10px 20px 0;
}

.faq .faq-list .icon-show {
  display: none;
}

.faq .faq-list a.collapsed {
  color: #343a40;
}

.faq .faq-list a.collapsed:hover {
  color: #22282e;
}

.faq .faq-list a.collapsed .icon-show {
  display: inline-block;
}

.faq .faq-list a.collapsed .icon-close {
  display: none;
}

@media (max-width: 1200px) {
  .faq .faq-list {
    padding: 0;
  }
}

/* ================================================= */

.swiper-slide {
  display: flex;
  justify-content: center;
  height: auto;
}

/* ================================================= */
/* Floating CTA buttons (Enrol / Become a Partner) */

.floating-cta-buttons {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 996;
  display: flex;
  gap: 12px;
  opacity: 0;
  transform: translateX(-50%) translateY(20px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.floating-cta-buttons.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.floating-cta-btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

.floating-cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  color: #fff;
}

.floating-cta-enrol {
  background: var(--color-secondary);
}

.floating-cta-partner {
  background: var(--color-primary);
}

@media (max-width: 576px) {
  .floating-cta-buttons {
    left: 20px;
    right: 20px;
    bottom: 15px;
    flex-direction: column;
    transform: translateY(20px);
  }

  .floating-cta-buttons.is-visible {
    transform: translateY(0);
  }

  .floating-cta-btn {
    text-align: center;
  }
}

/* ================================================= */
/* Chatbot widget */

.chatbot-bubble {
  position: fixed;
  right: 20px;
  bottom: 90px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  border: none;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  z-index: 1000;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.chatbot-bubble-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* White (not the brand blue) while showing the mascot photo, since the
   photo itself sits on a white background — switches back to blue when
   the bubble shows the white "X" close icon instead. */
.chatbot-bubble.chatbot-bubble-photo {
  background: #fff;
}

.chatbot-bubble:hover {
  transform: translateY(-3px);
}

/* Teaser bubble: pops up beside the chat FAB a few seconds after the
   page loads, inviting the visitor to open the chat, until dismissed
   or the chat is opened. Sits to the FAB's left, level with its center,
   with a small tail connecting it to the icon. */
.chatbot-teaser {
  position: fixed;
  right: 90px;
  bottom: 100px;
  z-index: 999;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  padding: 8px 14px;
  animation: chatbot-teaser-in 0.3s ease;
}

.chatbot-teaser::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -5px;
  width: 10px;
  height: 10px;
  background: #fff;
  transform: translateY(-50%) rotate(45deg);
  box-shadow: 2px -2px 4px rgba(0, 0, 0, 0.06);
}

.chatbot-teaser-close {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: none;
  background: transparent;
  color: var(--color-neutral);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  margin-right: 6px;
}

.chatbot-teaser-close:hover {
  background: rgba(0, 0, 0, 0.06);
}

.chatbot-teaser-text {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-neutral);
  white-space: nowrap;
  cursor: pointer;
}

@keyframes chatbot-teaser-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 480px) {
  .chatbot-teaser {
    right: 86px;
    bottom: 156px;
  }
}

.chatbot-window {
  position: fixed;
  right: 20px;
  bottom: 156px;
  width: 340px;
  max-width: calc(100vw - 40px);
  height: 480px;
  max-height: calc(100vh - 200px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1000;
  font-family: var(--font-default);
}

.chatbot-header {
  background: var(--color-primary);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.chatbot-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  overflow: hidden;
}

.chatbot-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chatbot-name {
  font-weight: 700;
}

.chatbot-status {
  font-size: 12px;
  opacity: 0.9;
  display: flex;
  align-items: center;
  gap: 5px;
}

.chatbot-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  display: inline-block;
}

.chatbot-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #f5f7fa;
}

.chatbot-welcome-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  text-align: center;
}

.chatbot-welcome-card img {
  max-width: 140px;
  margin: 16px auto 8px;
  display: block;
}

.chatbot-welcome-card p {
  font-size: 13px;
  padding: 0 14px 14px;
  margin: 0;
  color: #444;
}

.chatbot-msg {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.4;
}

.chatbot-msg-bot {
  align-self: flex-start;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  border-bottom-left-radius: 4px;
}

.chatbot-msg-user {
  align-self: flex-end;
  background: var(--color-primary);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.chatbot-centre-card {
  max-width: 90%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chatbot-centre-card strong {
  color: var(--color-primary);
}

.chatbot-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chatbot-choices button {
  border: 1px solid var(--color-primary);
  background: #fff;
  color: var(--color-primary);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.chatbot-choices button:hover {
  background: var(--color-primary);
  color: #fff;
}

.chatbot-input {
  display: flex;
  border-top: 1px solid #e5e7eb;
  padding: 10px;
  gap: 8px;
  flex-shrink: 0;
}

.chatbot-input input {
  flex: 1;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 14px;
  outline: none;
}

.chatbot-input input:focus {
  border-color: var(--color-primary);
}

.chatbot-input button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

@media (max-width: 576px) {
  .chatbot-window {
    right: 12px;
    left: 12px;
    width: auto;
    bottom: 210px;
  }

  .chatbot-bubble {
    right: 16px;
    /* Raised above .floating-cta-buttons (stacked, up to ~120px tall
       from the bottom edge on mobile) so the two don't overlap. */
    bottom: 145px;
  }
}

/* ================================================= */
/* Curriculum page — "Presenting Suryadhi" section */

.heureka-box {
  border-radius: 16px;
  padding: 36px 28px;
  color: #fff;
  text-align: center;
  height: 100%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.heureka-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

.heureka-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
}

/* ulogoo.png is already a complete circular badge (its own solid
   background baked in, filling the square canvas edge to edge), unlike
   the plain logo this replaced — so it just fills the icon circle
   directly instead of sitting on a separate background treatment. */
.heureka-icon-logo {
  background: transparent;
}

.heureka-icon-logo .heureka-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* brain.png is a full-color illustration with rays radiating to the edges
   of its transparent canvas — contain (not cover/crop) so none of it gets
   clipped, sitting inside the existing translucent circle background. */
.heureka-icon-brain .heureka-icon-img {
  width: 75%;
  height: 75%;
  object-fit: contain;
}

.heureka-box h4 {
  /* Overrides the global h1-h6 decorative serif (DM Serif Display) with
     the readable sans-serif — same fix as .features-section .card-title. */
  font-family: var(--font-secondary);
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-bottom: 12px;
}

.heureka-box p {
  margin-bottom: 0;
}

/* Both gradients were pale/light throughout, so the white text sat under
   WCAG AA contrast everywhere, not just at one end — darkened both while
   keeping the same orange/blue brand hues. The brand orange (#F79809)
   itself is still too light at the lighter end (2.2:1), so this uses a
   deeper burnt-orange range that stays >=4.5:1 throughout instead. */
.heureka-box-surya {
  background: var(--color-secondary);
}

.heureka-box-dhi {
  background: var(--color-primary);
}

.heureka-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  font-size: 26px;
  font-weight: 700;
  color: var(--color-neutral);
}

@media (max-width: 767.98px) {
  .heureka-plus {
    display: flex;
    margin: 10px auto;
  }
}

/* EPICS 360 wheel diagram — 50% width with a 900px cap reads fine on
   laptop/tablet, but at phone widths (50% of ~375-480px) it shrinks to
   under 250px, too small to read the labels inside the wheel. */
.epics-360-image {
  width: 50%;
  max-width: 900px;
}

@media (max-width: 767.98px) {
  .epics-360-image {
    width: 95%;
    max-width: none;
  }
}

/* ================================================= */
/* Curriculum page — "What are Thinking Routines?" section */

.thinking-routines-section {
  background: #fff;
  color: var(--color-neutral);
}

.thinking-routines-section h2 {
  /* Match the "27 Thinking Routines" heading style below (font, size,
     weight) instead of this section's earlier one-off styling. */
  font-family: var(--font-primary);
  font-weight: 600;
  color: var(--color-primary);
  font-size: 32px;
  margin-bottom: 20px;
}

.thinking-routines-grid-section {
  /* The global `section { padding: 80px 0 }` rule already adds 80px above
     via this section's own top padding, stacking with the previous
     section's 80px bottom padding for a 160px gap — override just the
     top here to pull it up. */
  padding-top: 20px;
  padding-bottom: 80px;
  background: #fff;
}

.thinking-routines-grid-section h2 {
  color: var(--color-primary);
}

.thinking-routine-card {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  background: #fff;
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.thinking-routine-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}

.thinking-routine-card p {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-neutral);
  line-height: 1.4;
}

.thinking-routines-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: var(--color-secondary);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 10px 26px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.thinking-routines-toggle-btn:hover {
  background: var(--color-primary);
  transform: translateY(-2px);
}

.thinking-routines-section p {
  color: var(--color-neutral);
  font-size: 17px;
  line-height: 1.7;
}

.thinking-routines-section .video-wrapper video {
  border-radius: 12px;
  width: 100%;
  /* Square box (was 16:9) per request. object-fit:contain still shows the
     poster/video in full without cropping, letterboxed on the shorter side. */
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: contain;
  background-color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  /* Shrink the square within its column instead of stretching full width. */
  max-width: 480px;
  margin: 0 auto;
  display: block;
}

/* Custom poster/play button: browsers draw their own darkening gradient
   over a paused <video>'s poster (to keep the control bar legible), which
   can't be removed via CSS. Showing the poster as a plain <img> until
   the user clicks play avoids that native overlay entirely. */
.thinking-routines-section .video-wrapper .video-poster-btn {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  /* Inset padding so the artwork doesn't touch the edges of the square. */
  padding: 24px;
  box-sizing: border-box;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  /* Shrink the square within its column instead of stretching full width. */
  max-width: 480px;
  margin: 0 auto;
}

.thinking-routines-section .video-wrapper .video-poster-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Play icon kept in the same bottom-bar position, just without the dark
   bar background — icon colored orange instead of white. */
.thinking-routines-section .video-wrapper .video-bottom-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: transparent;
  color: var(--color-secondary);
  font-size: 20px;
  transition: color 0.2s ease;
}

.thinking-routines-section .video-wrapper .video-poster-btn:hover .video-bottom-bar {
  color: var(--color-primary);
}

.featured-expert {
  background: #fff;
  border-left: 4px solid var(--color-primary);
  border-radius: 8px;
  padding: 18px 22px;
  margin-top: 20px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.featured-expert h5 {
  color: var(--color-primary);
  font-weight: 700;
  margin-bottom: 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.featured-expert p {
  margin-bottom: 0;
  font-size: 15px;
  color: var(--color-neutral);
}

/* ================================================= */
/* Curriculum page — "What is Visible Thinking?" section */

.visible-thinking-section {
  background: var(--color-secondary);
  color: var(--color-neutral);
  padding: 70px 0;
}

.visible-thinking-section h2 {
  color: var(--color-primary);
  font-family: var(--font-secondary);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-bottom: 20px;
}

.visible-thinking-img {
  max-width: 320px;
  width: 100%;
}

.visible-thinking-section p {
  color: #000;
  font-size: 17px;
  line-height: 1.6;
  max-width: 800px;
}

.visible-thinking-section ul {
  padding-left: 20px;
  margin-top: 10px;
  margin-bottom: 0;
  max-width: 800px;
}

.visible-thinking-section li {
  color: #000;
  font-size: 17px;
  margin-bottom: 8px;
}

/* ================================================= */
/* Curriculum page — "Harvard Project Zero" section */

.harvard-pz-section {
  background: rgb(255, 229, 245);
  padding: 70px 0;
}

.harvard-pz-img {
  width: 100%;
  max-width: 380px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  mix-blend-mode: multiply;
}

.harvard-pz-section h2 {
  font-family: var(--font-secondary);
  font-weight: 700;
  letter-spacing: 0.3px;
  font-size: 38px;
  margin-bottom: 16px;
}

.harvard-pz-section p {
  font-size: 17px;
  line-height: 1.6;
}

.harvard-pz-section ul {
  padding-left: 20px;
  margin-bottom: 24px;
}

.harvard-pz-section li {
  font-size: 17px;
  line-height: 1.5;
  margin-bottom: 8px;
}

.harvard-pz-btn {
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  background: transparent;
  border-radius: 30px;
  padding: 10px 26px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s ease, color 0.2s ease;
}

.harvard-pz-btn:hover {
  background: var(--color-primary);
  color: #fff;
}

/* HomeSunny App page — hero CTA pair */
.app-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
}

.app-cta-primary,
.app-cta-secondary {
  border-radius: 30px;
  padding: 12px 28px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s ease, color 0.2s ease;
}

.app-cta-primary {
  background: var(--color-secondary);
  color: #fff;
  border: 2px solid var(--color-secondary);
}

.app-cta-primary:hover {
  background: transparent;
  color: var(--color-secondary);
}

.app-cta-secondary {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.app-cta-secondary:hover {
  background: var(--color-primary);
  color: #fff;
}

/* ================================================= */
/* Locate Us page — pill-style search bar */

/* The fixed header (~92px tall) was covering the top of the section's
   own py-5 padding, hiding the "Locate Us" title behind it. Using
   margin-top (not padding-top) because Bootstrap's .py-5 utility sets
   padding-top with !important, which a plain override can't beat. */
#locate-us {
  margin-top: 92px;
}

.locate-search-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-bottom: 50px;
}

.locate-search-pill {
  border: none;
  border-radius: 30px;
  padding: 14px 26px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--color-secondary);
  min-width: 200px;
  outline: none;
  transition: box-shadow 0.2s ease;
}

.locate-search-pill::placeholder {
  color: rgba(255, 255, 255, 0.85);
}

.locate-search-pill:focus {
  box-shadow: 0 0 0 3px rgba(247, 152, 9, 0.35);
}

select.locate-search-pill {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px;
  padding-right: 40px;
  cursor: pointer;
}

select.locate-search-pill option {
  color: #000;
  background: #fff;
}

.locate-search-btn {
  border: none;
  border-radius: 30px;
  padding: 14px 34px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.locate-search-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(52, 174, 243, 0.4);
}

@media (max-width: 767.98px) {
  .locate-search-bar {
    flex-direction: column;
  }

  .locate-search-pill,
  .locate-search-btn {
    width: 100%;
  }
}

/* Locate Us page — results: list + detail panel */

.locate-results {
  display: flex;
  gap: 20px;
  align-items: stretch;
}

.locate-results-list,
.locate-results-detail {
  background: #fff;
  border: 2px solid var(--color-primary);
  border-radius: 10px;
  max-height: 320px;
  overflow-y: auto;
  padding: 20px;
}

.locate-results-list {
  flex: 0 0 30%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.locate-results-detail {
  flex: 1;
}

.locate-results-list-item {
  border: none;
  background: none;
  text-align: left;
  padding: 10px 8px;
  border-radius: 6px;
  color: var(--color-primary);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.locate-results-list-item:hover {
  background: rgba(52, 174, 243, 0.08);
}

.locate-results-list-item.active {
  background: rgba(52, 174, 243, 0.14);
}

.locate-results-detail h5 {
  color: var(--color-primary);
  font-weight: 700;
  margin-bottom: 10px;
}

.locate-results-detail p {
  color: var(--color-default);
  margin-bottom: 8px;
  line-height: 1.5;
}

.locate-results-detail p:last-child {
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  .locate-results {
    flex-direction: column;
  }

  .locate-results-list {
    max-height: 160px;
  }
}

/* Centre detail page (/locate-us/preschool-in-{city}/{id}) */

.centre-hero-text {
  padding: 40px 40px 40px 64px;
}

.centre-hero-badge {
  display: inline-block;
  background: var(--color-secondary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 7px 18px;
  border-radius: 999px;
  margin-bottom: 18px;
  box-shadow: 0 4px 14px rgba(247, 152, 9, 0.4);
  animation: centreBadgePulse 2.4s ease-in-out infinite;
}

@keyframes centreBadgePulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(247, 152, 9, 0.4); }
  50% { box-shadow: 0 4px 22px rgba(247, 152, 9, 0.7); }
}

.centre-hero-text h2 {
  font-size: 42px;
  color: var(--color-primary);
  margin-bottom: 16px;
}

.centre-hero-text p {
  font-size: 18px;
  color: var(--color-default);
  line-height: 1.6;
}

.centre-hero-mascot-img {
  width: 100%;
  max-width: 240px;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.15));
  animation: centreMascotFloat 3.2s ease-in-out infinite;
}

@keyframes centreMascotFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* Self-contained entrance animations for the three hero columns — plain
   CSS, not AOS (AOS isn't reliably triggering site-wide, so anything
   depending on it can end up permanently hidden/off-screen). */

@keyframes centreHeroEnterRight {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes centreHeroEnterUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes centreHeroEnterLeft {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

.centre-hero-enter-1 {
  animation: centreHeroEnterRight 0.7s ease-out both;
}

.centre-hero-enter-2 {
  animation: centreHeroEnterUp 0.7s ease-out 0.15s both;
}

.centre-hero-enter-3 {
  animation: centreHeroEnterLeft 0.7s ease-out 0.3s both;
}

@media (max-width: 991.98px) {
  .centre-hero-text {
    padding: 30px 20px 10px;
    text-align: center;
  }

  .centre-hero-text h2 {
    font-size: 30px;
  }

  .centre-hero-mascot-img {
    max-width: 160px;
  }
}

.centre-hero-section {
  background: #EAF6FD;
}

/* Centre-detail page is just this one hero — fill the screen so it
   reads as a single, complete view with nothing to scroll to. */
.centre-hero-single-view {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.centre-hero-single-view .row {
  width: 100%;
}

@media (max-width: 991.98px) {
  .centre-hero-single-view {
    min-height: auto;
    padding: 110px 0 40px;
  }
}

/* Simplified header used only on centre-detail pages */

.header-simple,
.header-simple.sticked {
  background: #fff;
  top: 16px;
  left: 16px;
  right: 16px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.header-simple .logo-boxed {
  border: 2px solid var(--color-primary);
  border-radius: 8px;
  padding: 6px 12px;
}

.header-simple .navbar a,
.header-simple .navbar a:focus {
  color: var(--color-primary);
}

.header-simple .navbar a:hover,
.header-simple .navbar ul li:hover > a {
  color: var(--color-secondary);
}

.header-simple .mobile-nav-toggle {
  color: var(--color-primary);
}

/* ================================================= */
/* Blogs — listing + article pages */

/* Same fixed-header clearance fix as #locate-us: margin (not padding)
   because Bootstrap's .py-5 sets padding-top with !important. */
.blogs-page,
.blog-article-page {
  margin-top: 92px;
}

.blog-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 32px 0 40px;
}

.blog-filter-tab {
  border: 2px solid var(--color-primary);
  background: #fff;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 14px;
  padding: 8px 18px;
  border-radius: 999px;
  transition: all 0.25s ease;
}

.blog-filter-tab:hover {
  background: rgba(52, 174, 243, 0.1);
}

.blog-filter-tab.active {
  background: var(--color-primary);
  color: #fff;
}

.blog-category-badge {
  display: inline-block;
  background: var(--color-orange-light);
  color: var(--color-secondary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.blog-card {
  display: block;
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.05);
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  margin-bottom: 28px;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

.blog-card h3 {
  font-size: 22px;
  color: var(--color-default);
  margin-bottom: 12px;
  line-height: 1.3;
}

.blog-card-featured {
  background: linear-gradient(135deg, var(--color-primary), #1C7DBC);
  color: #fff;
  padding: 44px;
}

.blog-card-featured h3 {
  color: #fff;
  font-size: 28px;
}

.blog-card-featured .blog-category-badge {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.blog-card-badge {
  position: absolute;
  top: 24px;
  right: 24px;
  background: var(--color-secondary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}

.blog-card-excerpt {
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 18px;
  opacity: 0.9;
}

.blog-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-neutral);
  margin-bottom: 18px;
}

.blog-card-featured .blog-card-meta {
  color: rgba(255, 255, 255, 0.8);
}

.blog-card-meta-dot {
  opacity: 0.5;
}

.blog-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--color-primary);
  font-size: 14px;
}

.blog-card-featured .blog-card-cta {
  color: #fff;
}

.blog-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.blog-card-grid .blog-card {
  margin-bottom: 0;
}

.blog-no-results {
  text-align: center;
  color: var(--color-neutral);
  padding: 40px 0;
}

@media (max-width: 767.98px) {
  .blog-card-grid {
    grid-template-columns: 1fr;
  }

  .blog-card-featured {
    padding: 28px;
  }
}

/* Article page */

.blog-article-container {
  max-width: 760px;
}

.blog-article-page h1 {
  font-size: 36px;
  color: var(--color-default);
  margin: 6px 0 16px;
  line-height: 1.25;
}

.blog-article-lede {
  font-size: 18px;
  line-height: 1.7;
  color: var(--color-neutral);
  margin: 20px 0;
}

.blog-coming-soon {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-secondary);
  font-weight: 600;
  margin-bottom: 24px;
}

.blog-article-body {
  font-size: 17px;
  line-height: 1.8;
  color: var(--color-default);
  margin-top: 24px;
}

.blog-article-body h2 {
  font-size: 24px;
  color: var(--color-primary);
  margin: 40px 0 16px;
}

.blog-article-body p {
  margin-bottom: 18px;
}

.blog-article-body ul {
  padding-left: 22px;
  margin-bottom: 18px;
}

.blog-article-body li {
  margin-bottom: 12px;
  line-height: 1.7;
}

.blog-author-box {
  margin-top: 48px;
  padding: 28px;
  background: var(--color-orange-light);
  border-radius: 16px;
}

.blog-author-box-name {
  font-weight: 700;
  font-size: 18px;
  color: var(--color-default);
}

.blog-author-box-role {
  font-size: 14px;
  color: var(--color-secondary);
  font-weight: 600;
  margin-bottom: 10px;
}

.blog-author-box-bio {
  font-size: 15px;
  color: var(--color-neutral);
  margin: 0;
}

.blog-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  font-weight: 600;
  color: var(--color-primary);
}

.blog-sticky-cta {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
  padding: 16px;
  margin-top: 56px;
}

.blog-sticky-cta a {
  background: var(--color-secondary);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 22px;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.25s ease;
}

.blog-sticky-cta a:hover {
  background: var(--color-primary);
}