html {
  scroll-behavior: smooth;
}

@layer fonts{
/* barlow-300 - latin */
    @font-face {
      font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
      font-family: 'Barlow';
      font-style: normal;
      font-weight: 300;
      src: url('./fonts/barlow-v12-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }
    /* barlow-regular - latin */
    @font-face {
      font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
      font-family: 'Barlow';
      font-style: normal;
      font-weight: 400;
      src: url('./fonts/barlow-v12-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }
    /* barlow-500 - latin */
    @font-face {
      font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
      font-family: 'Barlow';
      font-style: normal;
      font-weight: 500;
      src: url('./fonts/barlow-v12-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }
    /* barlow-700 - latin */
    @font-face {
      font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
      font-family: 'Barlow';
      font-style: normal;
      font-weight: 700;
      src: url('./fonts/barlow-v12-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    /* lato-300 - latin */
    @font-face {
      font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
      font-family: 'Lato';
      font-style: normal;
      font-weight: 300;
      src: url('./fonts/lato-v24-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }
    /* lato-regular - latin */
    @font-face {
      font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
      font-family: 'Lato';
      font-style: normal;
      font-weight: 400;
      src: url('./fonts/lato-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }
    /* lato-italic - latin */
    @font-face {
      font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
      font-family: 'Lato';
      font-style: italic;
      font-weight: 400;
      src: url('./fonts/lato-v24-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }
    /* lato-700 - latin */
    @font-face {
      font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
      font-family: 'Lato';
      font-style: normal;
      font-weight: 700;
      src: url('./fonts/lato-v24-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }
}

@layer colors{
    :root{
        --c-blue: #577BBA;
        --c-blue-100: #C1D5FF;
        --c-blue-200: #5172AD;
        --c-black: #000000;
        --c-gray: #F6F6F6;

        --background-primary-blue: #577BBA;
        --background-blue: #ADC7FF;
        --background-gray: #F6F6F6;

    }
}

@layer typography{
    :root{
        --fs-80: calc(80 / 16 * 1rem);
        --fs-48: calc(48 / 16 * 1rem);
        --fs-32: calc(32 / 16 * 1rem);
        --fs-20: calc(20 / 16 * 1rem);
        --fs-17: calc(17 / 16 * 1rem);
        --fs-16: calc(16 / 16 * 1rem);
        --fs-14: calc(14 / 16 * 1rem);
        --font-size-h1: var(--fs-32);
        --font-size-h2: var(--fs-32);
        --font-size-h3: var(--fs-20);
        --font-size-p: var(--fs-16);
        --font-size-p-sm: var(--fs-16);
        --font-size-tab: var(--fs-17);
        --font-size-booking-h3: var(--fs-32);
        --font-size-footer: var(--fs-14);

        @media (width >= calc(700 / 16 * 1rem)) {
            --font-size-h1: var(--fs-48);
            --font-size-h2: var(--fs-48);
            --font-size-booking-h3: var(--fs-48);
            --font-size-p: var(--fs-20);
        }
    
        @media (width >= calc(1100 / 16 * 1rem)) {
        --font-size-h1: var(--fs-80);
        }
    }
}

/* ===== Grid Background (StudyFox-style) ===== */
:root{
  --grid-x: 32px;                          /* column width  */
  --grid-y: 40px;                          /* row height    */
  --grid-line: rgba(255,255,255,0.12);     /* line color    */ /* line color    */
  --grid-glow: rgba(255,255,255,0.12);     /* soft glow     */
  --grid-deep: #577BBA;                    /* deep blue     */
  --grid-deeper: #567AB9;                  /* deeper blue   */
}

@layer global {
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    body {
        margin: 0;
               background: #0f1f6d; /* deep blue base so grid reads correctly */
        color: #fff;         /* ensure text contrasts on dark bg */
        font-family: 'Lato', Arial, Helvetica, sans-serif;
        font-size: 16px;
      }
  

    p{
        margin: 0;
        line-height: 1.5;
    }
    img{
        display: block;
        max-width:100%;
        height: auto;
    }

    a {
      text-decoration: none;
      color: #333;
    }

    ul {
      list-style: none;
    }

    .text-center{
      text-align: center;
    }

    /* Text Classes */
    h1,
    h2,
    h3{
        margin:0;
        font-family: 'Barlow', Arial, Helvetica, sans-serif;
        line-height: 1.5;
    }
    h1{
      display:block;
      font-size: 5.5rem;
      letter-spacing: 1px;
      line-height:1.3;
      margin-bottom: 28px;
      font-weight: 700;
    }

    h2{
      font-size:2.4rem;
      line-height: 1.6;
      font-weight:500;
    }
    h3{
      font-size:1.75rem;
      font-weight:500;
    }


    .mb-2{
      margin-bottom: 2rem;
    }
    .mb-3{
      margin-bottom: 3rem;
    }

    .overflow-wrapper{
      overflow-x: hidden;
      position: relative;
    }

    .container {
      width: 90%;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
    }

    .btn{
      display: inline-block;
      padding: 15px 30px;
      font-weight: 600;
      text-decoration: none;
      border: none;
      border-radius: 360px;
      cursor: pointer;
      text-align: center;
      transition: 0.5s ease;
      background: var(--light-color);
      color: #333;
    }

    .btn-primary {
      background: var(--c-blue);
      color: #fff;
  }


    .btn-primary-outline {
     background: transparent;
    color: #fff;
    border: 2px solid #fff;
  }

  .borderline {
    width: 100%;
    height: 1px;
    background-color: rgba(0,0,0, .2);
    border: none;
    margin: 2rem 0;
  }
  
  .borderline.white {
    background-color: rgba(255,255,255, .3);
  }
    
}



/** header **/

nav{
  position: fixed;
  width: 100%;
  z-index: 999;         /* ensure nav sits above hero grid */
  padding: 10px 0;
}
nav.nav-scrolled {
  /* semi‑transparent so the blur shows through */
  background: rgba(87, 123, 186, 0.55);
  /* frosted glass blur (Safari + modern browsers) */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  /* subtle separation from content */
  border-bottom: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
  transition: background 0.3s, box-shadow 0.3s, backdrop-filter 0.3s;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  nav.nav-scrolled {
    background: rgba(87, 123, 186, 0.85);
  }
}

nav.nav-scrolled .top-nav{
  margin-top: 0;
}

/* Default (on hero): white links and button for contrast */
nav:not(.nav-scrolled) .top-nav .top-nav-img { filter: none; } /* keep logo as-is */
nav:not(.nav-scrolled) ul.menu li a { color: #fff; }
nav:not(.nav-scrolled) ul.menu li a:hover { color: var(--c-blue-100); }
nav:not(.nav-scrolled) .contact-btn{
  color: #fff;
  border-color: #fff;
  background: transparent;
}
nav:not(.nav-scrolled) .contact-btn:hover{
  background: #fff;
  color: var(--c-blue);
}
nav:not(.nav-scrolled) .hamburger-button .hamburger-line{
  background: #fff;
}

/* When scrolled: revert to dark-on-light scheme */
nav.nav-scrolled ul.menu li a { color: #fff); }
nav.nav-scrolled ul.menu li a:hover { color: var(--c-blue-100); }
nav.nav-scrolled .contact-btn{
  color: #fff;
  background: var(--c-blue-10);
  border-color: #fff;
}
nav.nav-scrolled .hamburger-button .hamburger-line{
  background: #333;
}


.top-nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  transition: 0.3s ease;
}

.top-nav .top-nav-img{
  display: block;
  width: 180px;
  transition: width 0.3s ease;
}


nav.nav-scrolled .top-nav-img{
  width: 120px;
}

ul.menu{
  display: flex;
  align-items: center;
}

ul.menu li a {
  color: currentColor;
  font-size: 1.125rem;
  padding: 10px 20px;
  display: block;
  font-weight: 700;
  transition: 0.3s ease;
  text-decoration: none;
}

ul.menu li a:hover {
  color: var(--c-blue);
}

/* Active link color respects nav state */
.menu a.active {
  color: inherit;
  font-weight: bold;
}
nav.nav-scrolled .menu a.active {
  color: var(--c-blue-100);
}

.contact-btn{
  color: var(--c-blue);
  border: 1px solid var(--c-blue);
  width: 167px;
  height: 56px;
  border-radius: 28px;
  font-size: 1.125rem;
  font-weight: 700;
  cursor: pointer;
  transition: .3s ease-in;
  background: none;
}

.contact-btn:hover{
  background: var(--c-blue);
  color: #fff;
}

.menu a.active .contact-btn{
  background: var(--c-blue);
  color: #fff;
}

/* Hamburger Button */
.hamburger-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.hamburger-button .hamburger-line {
  width: 30px;
  height: 3px;
  background: #333;
  margin: 3px 0;
  transition: 0.3s;
}
.hamburger-button.open .hamburger-line:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.hamburger-button.open .hamburger-line:nth-child(2) {
  opacity: 0;
}
.hamburger-button.open .hamburger-line:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* Mobile Menu */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -300px;
  width:250px;
  height: 100%;
  z-index: 100;
  background: #fff;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
  transition: right 0.3s ease-in-out;
}

.mobile-menu.active {
  right: 0;
}

.mobile-menu ul {
  margin-top: 100px;
  padding-right: 10px;
}

.mobile-menu ul li {
  margin: 40px 0;
}

.mobile-menu ul li a {
  font-size: 20px;
  transition: 0.3s;
}




/** Hero Section **/


/* Apply this class to any section that needs the blueprint grid */
.bg-grid{
    background-color: #577BBA; /* fallback base for browsers / layers */
  background-image:
    radial-gradient(1000px 600px at 70% 12%, var(--grid-glow), transparent 60%),
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px),
    linear-gradient(180deg, var(--grid-deep) 0%, var(--c-blue) 45%, var(--grid-deeper) 100%);
  background-size:
    auto,                 /* glow */
    var(--grid-x) 100%,   /* vertical lines repeat every grid-x across full height */
    100% var(--grid-y),   /* horizontal lines repeat every grid-y across full width */
    auto;                 /* gradient base */
  background-position:
    center,
    0 0,
    0 0,
    0 0;
  background-repeat:
    no-repeat,  /* glow */
    repeat,     /* vertical lines */
    repeat,     /* horizontal lines */
    no-repeat;  /* blue gradient base */
  background-attachment: scroll, scroll, scroll, scroll; /* broader compatibility (iOS/Safari) */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04); /* subtle frame to help perceive the grid on very dark monitors */
}

@media (min-width: 1100px){
  :root{
    --grid-x: 36px;
    --grid-y: 44px;
  }
}

.bottom-0 {
    bottom: calc(var(--spacing) * 0);
}
.absolute, .sr-only {
    position: absolute;
}

@supports (color:color-mix(in lab,red,red)) {
    * {
        outline-color: 
 color-mix(in oklab, var(--color-ring) 50%, transparent);
    }
}

/* replace your entire .hero-section block with this */
.hero-section{
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: 500px; /* ensure enough area for grid to show */
  border-bottom: 4px solid var(--c-blue-200);
}
@media (min-width: 1200px) {
.hero-section h1{
  width: 75%
}
}

.hero-section.bg-grid{
  /* no shorthand background here; rely on .bg-grid layers */
}

/* .bg-grid { outline: 2px dashed hotpink; } */

/* keep your inner elements’ styles */
.hero-section .blob-blue{
  font-family: 'Lato', Arial, Helvetica, sans-serif;
  background: #C1D5FF;
  color: var(--c-black);
  padding: 10px 20px;
  border-radius: 360px;
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 1px;
  margin: 4.5rem 0 2rem 0;
  display: inline-block;
}
.hero-section .hero-tagline{
  font-size: 1.5rem;
  font-weight:400;
}
.hero-section .hero-button{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 40px 0;
}

/* .hero-section{

  background-image: linear-gradient(90deg, #d5cccc2e 1px, #0000 0), linear-gradient(#d5cccc2e 1px, #0000 0);
  width: 100%;
  height: 80vh;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

  .blob-blue{
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    background: #C1D5FF;
    color: var(--c-black);
    padding: 10px 20px;
    border-radius: 360px;
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: 1px;
    margin-bottom: 40px;
    display: inline-block;
  }


  .hero-tagline{
    font-size: 1.5rem;
    font-weight:400;
  }

  .hero-button{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 40px 0;
  }

} */

/** Services Section **/
.services-section{
  background-color: var(--c-blue);
  padding: 80px 0 80px 0;

  h2{
    border-bottom: 1px solid rgba(0,0,0,.1);
    padding: 40px 0 20px 0;
    margin-bottom: 40px;
  }

  .services-card-img{
    margin-bottom: 20px;
  }

  .services-list{
    list-style-type: disc;
    padding-left: 15px;
    font-weight: 400;
  }

  .services-list li{
    padding-bottom:10px;
  }

  .services-grid{ 
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }
}

/** About Us Section **/

.about-section{
  padding: 120px 0 120px 0;
  background-color: var(--background-gray);
  color: #000;

  h2{
    color: var(--c-blue);
    padding: 40px 0 20px 0;
  }


  .about-grid{
    display: grid;
    grid-template-columns: 1fr 3fr;
    align-items: center;
    gap: 30px;
  }
  
}

/** Testimonials Section **/
.testimonials-section{
  background-color: #fff;
  padding: 80px 0 80px 0;
  color: #000;
  
  h2{
    color: var(--c-blue);
    padding: 40px 0 10px 0;
  }
  .testimonials-section--para{
    margin-bottom: 40px;
  }

  .testimonials-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap:30px;
  }
  .testimonial-card{
    background-color: #F6F6F6;
    padding:30px 20px;
    border-radius: 10px;
  }

  .testimonial-card--header{
    display: flex;
    align-items: center;
    gap:10px;
    margin-bottom: 20px;
  }

  .testimonial-circle-sm{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: var(--c-blue);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .testimonial-circle-sm img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }
}

.testimonials-slider-controls {
  display: flex;
  justify-content: center;
  align-items: center;

  padding: 0.5rem 1rem;
  /* border-radius: 30px; */
  gap: 50vw;
  margin-top: 1rem;
}
.testimonial-arrow {
  /* background:  var(--c-blue, #4460FF); */
  background: none;
  color:var(--c-blue, #4460FF);;
  border: none;
  border-radius: 50%;
  /* width: 100%;
  height: 38px; */
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* box-shadow: 0 2px 6px rgba(0,0,0,0.08); */
  transition: background 0.2s, color 0.2s;
}
.testimonial-arrow:active,
.testimonial-arrow:focus {
  background: var(--c-blue, #4460FF);
  color: #fff;
  outline: none;
}
@media (min-width: 671px) {
  .testimonials-slider-controls {
    display: none !important;
  }
}


/** Book Appointment Section **/

.book-appointment-section{
  background-color: var(--background-gray);
  padding: 80px 0 80px 0;
  color: #000;

  h2{
    padding: 40px 0 10px 0;
  }

  .book-appointment-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    align-items: center;
    justify-items: center;
  }
  
  .book-appointment--blue-card{
    background-color: var(--background-primary-blue);
    padding:30px 20px;
    border-radius: 10px;
  }

  .book-appointment--list{
    list-style: none;
    padding: 0;
  }

  .book-appointment--list li{
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    color: #fff;
  }

  .book-appointment--list li::before{
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-image: url('images/check-icon.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

}

.contact-section{
  background-color: #fff;
  padding: 40px 0 40px 0;
  color: #000;
  h2{
    color:var(--c-blue);
    padding: 40px 0 10px 0;
  }

  .footer-logo-borderline{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 2rem 0;
  }

  .footer-logo-img{
    width:110px;
  }

  .footer-logo-borderline::before,
  .footer-logo-borderline::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(0,0,0,.2); /* or use your borderline color */
    margin: 0 1.5rem;
  }


  .footer-logo-text {
    font-weight: 700;
    font-size: 3rem; /* adjust as needed */
    color: #4460FF;  /* your blue */
    white-space: nowrap;
  }

  .contact-list-card{
    border:1px solid rgba(0,0,0,.2);
    border-radius: 10px;
    padding: 20px 20px;
  }

  .contact-list-group{
    display: flex;
    gap: 15px;

  }

  .contact-list-3-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }

  .contact-list-2-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }

}

.footer-section{
  background-color: var(--background-primary-blue);
  padding: 60px 0 40px 0;
  color: #fff;

  a{
    color: #fff;
  }

  .footer-bottom-grp {
    display: flex;
    justify-content: center;
  }

  .footer-bottom-grp ul{
    display: flex;
    align-items: center;
    justify-content:center;
    padding-left:0;
  }

  .footer-bottom-grp li{
    color: #fff;
    padding: 0px 20px 0 20px;
    display: block;
    font-weight: 400;
    transition: 0.3s ease;
    text-decoration: none;
    border-left: 1px solid rgba(255,255,255,0.5);
  }

  .footer-bottom-grp li:first-child {
    border-left: none;
  }
  
  ul.menu li a:hover {
    color: var(--c-blue);
  }
}


/** Media Queries **/

@media (max-width: 960px) {
  .services-section .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 670px) {
  h1{
    font-size: 2.5rem;
    line-height:1.2;
    margin-bottom: 18px;
  }
  h2 {
    font-size: 2rem;
    line-height: 1.2;
  }

  h3 {
    font-size: 1.2rem;
    line-height: 1.2;
  }
  .mb-2{
    margin-bottom: 1rem;
  }


  ul.menu{
    display: none;
  }

  .hero-section {
    height: 90vh;
    .blob-blue{
      font-size: 1rem;
      padding: 5px 10px;
      margin-bottom: 20px;
      margin-top: 80px;
    }
  }
  .services-section{
    padding: 0px 0 30px 0;
  }

  .services-section .services-grid {
    grid-template-columns: 1fr;
  }

  .about-section {
    padding: 40px 0 40px 0;

    .about-grid{
      grid-template-columns: 1fr;
    }

    .about-img img{
      width:180px;
    }

  }

  .testimonials-section{
    padding: 20px 0 40px 0;

   
  }
  /** Vertical Slider **/
  .testimonials-section .testimonials-grid {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    -webkit-overflow-scrolling: touch;
  }
  .testimonials-section .testimonial-card {
    min-width: 80vw;
    flex: 0 0 80vw;
    scroll-snap-align: start;
  }
  
  .book-appointment-section{
    padding: 20px 0 40px 0;
    .book-appointment-grid{
      grid-template-columns: 1fr;
    }
  }

  .contact-section{
    padding: 20px 0 40px 0;

    .contact-list-3-grid{
      grid-template-columns: 1fr;
      gap:10px;
    }

    .contact-list-2-grid{
      grid-template-columns: 1fr;
      gap:10px;
    }
  }
}
@media (min-width: 671px) {
  .hamburger-button {
    display: none !important;
  }
}
@media (max-width: 500px) {}