@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

* {
  font-family: "Inter", sans-serif !important;
  font-optical-sizing: auto;
}

html {
  scroll-behavior: smooth;
}

/* Nav */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  height: 97px;
  background-color: #ffffff;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);
  z-index: 1000;
}

/* Fix logo cropping - remove negative positioning */
.nav-left {
  display: flex;
  align-items: center;
}

.logo {
  width: 195px;
  height: auto;
  object-fit: contain;
  cursor: pointer;
  /* Remove any negative margins or absolute positioning */
  position: relative;
  margin: 0;
}

/* Navigation links */
.nav-right {
  list-style: none;
  display: flex;
  gap: 50px;
  margin: 0;
  padding: 0;
  align-items: center;
}

.nav-right li {
  margin: 0;
}

.nav-right li a {
  color: #4c4c4c;
  font-size: 18px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  text-decoration: none;
  opacity: 0.8;
  transition: color 0.3s ease;
  position: relative;
  padding: 5px 0;
}

/* Hover state */
.nav-right li a:hover {
  color: #0046FF;
  text-decoration: underline;
  text-decoration-thickness: 2.5px;
  text-underline-offset: 6px;
}

/* Active state - NO blue background/tint */
.nav-right li a.active {
  font-weight: 900;
  color: #0046ff;
  text-decoration: underline;
  text-decoration-thickness: 2.5px;
  text-underline-offset: 6px;
  opacity: 1;
  /* Remove any background color */
  background: none !important;
  background-color: transparent !important;
}

/* Remove blue tint/highlight on focus */
.nav-right li a:focus,
.nav-right li a:active {
  outline: none;
  background: none;
  background-color: transparent;
}

/* Home */
.home {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  height: 4877px;
  background-color: #fdfdfd;
  overflow: hidden;
  /* z-index: -1; */
}
  
  .home .home-hero-section {
    position: absolute;
    top: 89px;
    left: -4px;
    width: 100%;
    height: 738px;
    object-fit: cover;
  }
  
  .home .home-hero {
    position: absolute;
    top: 0;
    left: 4px;
    width: 100%;
    height: 738px;
    object-fit: cover;
    object-position: center;
  }
  
  .home .rectangle {
    position: absolute;
    top: calc(50% - 369px);
    /* left: calc(50% - 724px); */
    left: 3.5px;
    width: 100%;
    height: 738px;
    filter: blur(1.5px);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 13%, rgba(0, 0, 0, 1) 100%);
  }
  
  .home .frame {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    position: absolute;
    top: 584px;
    left: 56px;
  }
  
  .home .div-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0px 10px;
    position: relative;
    flex: 0 0 auto;
  }
  
  .home .text-wrapper {
    position: relative;
    width: fit-content;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #fdfdfd;
    font-size: 48px;
    letter-spacing: 0;
    line-height: 1.3em;
    top: -10px;
  }
  
  .home .swimming-journey {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    position: relative;
    flex: 0 0 auto;
    font-size: 32px;
    font-weight: 500;
    color: #48484A;
  }
  
  .home .learn-to-swim-in {
    position: relative;
    width: fit-content;
    margin-left: 15px;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #fdfdfd;
    font-size: 24px;
    letter-spacing: 0;
    line-height: 1.5em;
    top: -9px;
  }
  
  .home .enrol-now-button-wrapper {
    display: flex;
    flex-direction: column;
    width: 215px;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    position: relative;
    flex: 0 0 auto;
    top: -3px;
  }
  
  .home .enrol-now-button {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 76px;
    border-radius: 40px;
    border: 2.5px solid;
    border-color: #ffffff;
    background-color: transparent;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
  }
  
  .home .enrol-now-button:hover {
    background-color: #0046ff;
    border-color: #0046ff;
  }
  
  .home .text-wrapper-2 {
    position: absolute;
    width: 72.58%;
    height: 40.3%;
    top: 32%;
    left: 15%;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #ffffff;
    font-size: 22px;
    letter-spacing: 0;
    line-height: normal;
    transition: color 0.3s ease;
  }
  
  .home .enrol-now-button:hover .text-wrapper-2 {
    color: #ffffff;
  }
  
  .home .frame-2 {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    gap: 19px;
    position: absolute;
    top: 3827px;
  }
  
  .home .ready-to-become-a-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
  }
  
  .home .ready-to-become-a {
    position: relative;
    justify-content: center;
    width: fit-content;
    margin-top: -1px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #48484a;
    font-size: 52px;
    text-align: center;
    letter-spacing: 0;
    line-height: 65px;
  }
  
  .home .p {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 500;
    color: #48484a;
    font-size: 32px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .home .frame-3 {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    position: absolute;
    top: 951px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .home .text-wrapper-3 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #2f7eff;
    font-size: 52px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .home .frame-4 {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    position: absolute;
    top: 1034px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .home .text-wrapper-4 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Inter-SemiBold", Helvetica;
    font-weight: 600;
    color: #626363;
    font-size: 22px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .home .component-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: flex-start;
    gap: 10px;
    position: absolute;
    top: 4447px;
    left: 0;
  }
  
  .home .component {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 430px;
    background-color: #0a225c;
  }
  
  .home .group {
    position: absolute;
    top: 68px;
    left: calc(50% - 676px);
    width: 1349px;
    height: 294px;
  }
  
  .home .frame-5 {
    display: flex;
    flex-direction: column;
    width: 139px;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    top: 8px;
    left: calc(50% + 536px);
  }
  
  .home .text-wrapper-5 {
    position: relative;
    align-self: stretch;
    height: 30px;
    margin-top: -1px;
    font-family: "Inter-SemiBold", Helvetica;
    font-weight: 600;
    color: #fdfdfd;
    font-size: 24px;
    letter-spacing: 0;
    line-height: 30px;
    white-space: nowrap;
  }
  
  .home .error-form {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #e1f1fd;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 40px;
  }
  
  .home .frame-6 {
    display: flex;
    flex-direction: column;
    width: 152px;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    top: 8px;
    left: calc(50% + 123px);
  }
  
  .home .frame-7 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    position: relative;
    flex: 0 0 auto;
  }
  
  .home .quick-links {
    position: relative;
    width: 80px;
    height: 160px;
  }
  
  .home .text-wrapper-6 {
    position: absolute;
    width: 63.75%;
    height: 25%;
    top: 0;
    left: 0;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #e1f1fd;
    line-height: 40px;
    white-space: nowrap;
    font-size: 18px;
    letter-spacing: 0;
  }
  
  .home .text-wrapper-7 {
    position: absolute;
    width: 92.5%;
    height: 25%;
    top: 25%;
    left: 0;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #e1f1fd;
    line-height: 40px;
    white-space: nowrap;
    font-size: 18px;
    letter-spacing: 0;
  }
  
  .home .text-wrapper-8 {
    position: absolute;
    width: 100%;
    height: 25%;
    top: 50%;
    left: 0;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #e1f1fd;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 40px;
    white-space: nowrap;
  }
  
  .home .text-wrapper-9 {
    position: absolute;
    width: 86.25%;
    height: 25%;
    top: 75%;
    left: 0;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #e1f1fd;
    line-height: 40px;
    white-space: nowrap;
    font-size: 18px;
    letter-spacing: 0;
  }
  
  .home .frame-8 {
    display: flex;
    flex-direction: column;
    width: 159px;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    top: 8px;
    left: calc(50% + 330px);
  }
  
  .home .main-pages {
    position: relative;
    width: 74px;
    height: 80px;
  }
  
  .home .text-wrapper-10 {
    position: absolute;
    width: 100%;
    height: 50%;
    top: 0;
    left: 0;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #e1f1fd;
    line-height: 40px;
    white-space: nowrap;
    font-size: 18px;
    letter-spacing: 0;
  }
  
  .home .text-wrapper-11 {
    position: absolute;
    width: 93.24%;
    height: 50%;
    top: 50%;
    left: 0;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #e1f1fd;
    line-height: 40px;
    white-space: nowrap;
    font-size: 18px;
    letter-spacing: 0;
  }
  
  .home .frame-9 {
    display: flex;
    flex-direction: column;
    width: 446px;
    align-items: flex-start;
    gap: 10px;
    position: absolute;
    top: 0;
    left: calc(50% - 674px);
  }
  
  .home .frame-10 {
    display: inline-flex;
    align-items: center;
    position: relative;
    flex: 0 0 auto;
  }
  
  .home .sla-logo {
    position: relative;
    width: 61px;
    height: 38px;
    aspect-ratio: 1.59;
    object-fit: cover;
  }
  
  .home .group-wrapper {
    position: relative;
    width: 159px;
    height: 44px;
  }
  
  .home .group-2 {
    position: relative;
    width: 163px;
    height: 44px;
  }
  
  .home .text-wrapper-12 {
    position: absolute;
    top: 26px;
    left: 3px;
    font-family: "Poppins-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 12px;
    letter-spacing: 0.24px;
    line-height: normal;
  }
  
  .home .swim-life {
    position: absolute;
    top: 0;
    left: 0;
    width: 159px;
    font-family: "Poppins-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 26px;
    line-height: normal;
  }
  
  .home .footer-sla {
    letter-spacing: 0.41px;
  }
  
  .home .group-3 {
    position: relative;
    width: 446.3px;
    height: 240px;
  }
  
  .home .TEL-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .home .TEL {
    position: relative;
    width: 426.3px;
    margin-top: -1px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 400;
    color: #fdfdfd;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 30px;
  }
  
  .home .text-wrapper-16 {
    font-weight: 700;
  }
  
  .home .text-wrapper-18 {
    font-family: "Inter-Regular", Helvetica;
  }
  
  .home .frame-11 {
    display: flex;
    flex-wrap: wrap;
    width: 259px;
    align-items: flex-end;
    gap: 20px 10px;
    position: absolute;
    top: 165px;
    left: 10px;
  }
  
  .home .text-wrapper-19 {
    position: relative;
    width: 259.35px;
    height: 15px;
    margin-top: -1px;
    font-family: "Inter-SemiBold", Helvetica;
    font-weight: 600;
    color: #fdfdfd;
    font-size: 20px;
    letter-spacing: 0;
    line-height: 20px;
    white-space: nowrap;
  }
  
  .home .img-wrapper {
    position: relative;
    width: 42px;
    height: 40px;
    border-radius: 7px;
    border: 2px solid;
    border-color: #fdfdfd;
  }
  
  .home .eva-facebook-fill {
    position: absolute;
    width: 62.5%;
    top: 5px;
    left: 20%;
    height: 26px;
    aspect-ratio: 1;
  }
  
  .home .basil-instagram {
    position: absolute;
    width: 65%;
    top: 5px;
    left: 19%;
    height: 27px;
    aspect-ratio: 1;
  }
  
  .home .frame-12 {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    gap: 50px;
    position: absolute;
    top: 2876px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .home .text-wrapper-20 {
    position: relative;
    align-self: stretch;
    margin-top: -1px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #2f7eff;
    font-size: 52px;
    text-align: center;
    letter-spacing: 0;
    line-height: 65px;
  }
  
  .home .rectangle-2 {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 676px;
    background-color: #f5f5f5;
  }
  
  .home .testimonial {
    position: absolute;
    top: 167px;
    width: 1402px;
    height: 601px;
  }
  
  .home .testimonial-default-wrapper {
    display: flex;
    flex-direction: column;
    width: 1142px;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    position: absolute;
    top: -10px;
    left: 135px;
  }
  
  .home .testimonial-default {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 514.31px;
  }
  
  .home .outline-rectangle {
    position: absolute;
    width: 100%;
    height: 96.23%;
    top: 3.77%;
    left: 0;
    background-color: #fdfdfd;
    border-radius: 40px;
  }
  
  .home .pexels-photo-by-caio {
    position: absolute;
    width: 35.65%;
    height: 77.77%;
    top: 13.03%;
    left: 6.33%;
  }
  
  .home .coach-is-very {
    position: absolute;
    width: 46.7%;
    height: 46.86%;
    top: 31.5%;
    left: 47.06%;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 400;
    color: #0f1e43;
    font-size: 28px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .home .text-wrapper-21 {
    font-family: "Inter-MediumItalic", Helvetica;
    font-weight: 500;
    font-style: italic;
  }
  
  .home .text-wrapper-22 {
    font-family: "Inter-SemiBold Italic", Helvetica;
    font-weight: 600;
    font-style: italic;
    font-size: 32px;
  }
  
  .home .text-wrapper-23 {
    font-family: "Inter-SemiBold", Helvetica;
    font-weight: 600;
    font-size: 24px;
  }
  
  .home .frame-wrapper {
    display: flex;
    flex-direction: column;
    width: 90px;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    position: absolute;
    top: 547px;
    left: 656px;
  }
  
  .home .frame-13 {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
  }
  
  .home .ellipse {
    background-color: #2f7eff;
    position: relative;
    width: 14px;
    height: 14px;
    border-radius: 7px;
  }
  
  .home .ellipse-2 {
    background-color: #d9d9d9;
    position: relative;
    width: 14px;
    height: 14px;
    border-radius: 7px;
  }
  
  .home .left-testimonial {
    position: absolute;
    top: 216px;
    left: 20px;
    width: 82px;
    height: 82px;
    aspect-ratio: 1;
    background-image: url(./img/mingcute-square-arrow-right-fill.svg);
    background-size: 100% 100%;
  }
  
  .home .right {
    position: absolute;
    top: 216px;
    left: 1300px;
    width: 82px;
    height: 82px;
    display: flex;
    transform: rotate(180deg);
    aspect-ratio: 1;
  }
  
  .home .mingcute-square {
    flex: 1;
    width: 82px;
    transform: rotate(-180deg);
  }
  
  .home .book-a-lesson-button-wrapper {
    display: flex;
    flex-direction: column;
    width: 362px;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    position: absolute;
    top: 4134px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .home .book-a-lesson-button {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 136px;
  }
  
  .home .footer-CTA-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
  }

  .home .footer-CTA {
    flex: 1;
    width: 342px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 70px;
    overflow: hidden;
    border: 5px solid;
    border-color: #0046ff;
  }
  
  .home .BOOK-a-LESSON {
    margin-top: 2px;
    height: 39px;
    margin-left: 20px;
    width: 270px;
    font-family: "Inter-ExtraBold", Helvetica;
    font-weight: 800;
    color: #0046ff;
    font-size: 32px;
    line-height: normal;
  }

  .home .footer-CTA {
    flex: 1;
    width: 342px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 70px;
    overflow: hidden;
    border: 5px solid #0046ff;
    background-color: transparent;
    transition: background-color 0.3s ease, transform 0.2s ease;
  }
  
  /* TEXT DEFAULT */
  .home .BOOK-a-LESSON {
    font-family: "Inter-ExtraBold", Helvetica;
    font-weight: 800;
    color: #0046ff;
    font-size: 32px;
    transition: color 0.3s ease;
  }
  
  /* 🔵 HOVER STATE */
  .home .footer-CTA:hover {
    background-color: #0046ff;
    cursor: pointer;
    transform: translateY(-2px); /* subtle lift (optional) */
  }
  
  .home .footer-CTA:hover .BOOK-a-LESSON {
    color: #ffffff;
  }
  
  
  .home .text-wrapper-24 {
    letter-spacing: 0;
  }
  
  .home .text-wrapper-25 {
    letter-spacing: 0.51px;
  }
  
  .home .frame-14 {
    display: grid;
    grid-template-columns: repeat(2, fit-content(100%));
    grid-template-rows: repeat(1, fit-content(100%));
    width: 1282px;
    height: 609px;
    gap: 64px;
    position: absolute;
    top: 2068px;
    align-content: center;
    left: 13%;
  }
  
  .home .frame-15 {
    position: relative;
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    width: 693px;
    height: fit-content;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 22px 22px;
  }
  
  .home .img {
    position: relative;
    width: 266px;
    height: 293px;
  }
  
  .home .rectangle-3 {
    position: relative;
    width: 405px;
    height: 293px;
    object-fit: cover;
  }
  
  .home .rectangle-4 {
    position: relative;
    width: 405px;
    height: 293px;
  }
  
  .home .rectangle-5 {
    position: relative;
    width: 266px;
    height: 293px;
    object-fit: cover;
  }
  
  .home .frame-16 {
    position: relative;
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    width: 525px;
    height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 21px;
  }
  
  .home .text-wrapper-26 {
    position: relative;
    align-self: stretch;
    height: 26.06px;
    margin-top: -1px;
    font-family: "Inter-SemiBold", Helvetica;
    font-weight: 600;
    color: #636364;
    font-size: 22px;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  
  .home .text-wrapper-27 {
    position: relative;
    align-self: stretch;
    height: 49.22px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #2f7eff;
    font-size: 40px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .home .pepicons-pencil-wrapper {
    position: relative;
    width: 507px;
    height: 491.23px;
  }
  
  .home .pepicons-pencil {
    position: relative;
    top: 381px;
    left: 15px;
    width: 50px;
    height: 50px;
    display: flex;
    aspect-ratio: 1;
  }
  
  .home .frame-17 {
    display: flex;
    margin-top: -367px;
    width: 518px;
    height: 471px;
    margin-left: -15px;
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    gap: 50px;
  }
  
  .home .group-4 {
    position: relative;
    width: 522px;
    height: 81px;
    margin-right: -4px;
  }
  
  .home .text-wrapper-28 {
    position: absolute;
    top: 33px;
    left: 110px;
    width: 408px;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #48484a;
    font-size: 18px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .home .text-wrapper-29 {
    position: absolute;
    top: 0;
    left: calc(50% - 151px);
    width: 174px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #2f7eff;
    font-size: 24px;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  
  .home .solar-home-outline-wrapper {
    position: absolute;
    top: 1px;
    left: 0;
    width: 80px;
    height: 80px;
    display: flex;
    background-color: #f0f0f0;
    border-radius: 100px;
  }
  
  .home .solar-home-outline {
    margin-top: 12px;
    width: 50px;
    height: 50px;
    margin-left: 15px;
    aspect-ratio: 1;
  }
  
  .home .group-5 {
    position: relative;
    width: 514px;
    height: 80px;
  }
  
  .home .text-wrapper-30 {
    position: absolute;
    top: 34px;
    left: 110px;
    width: 400px;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #48484a;
    font-size: 18px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .home .text-wrapper-31 {
    position: absolute;
    top: 1px;
    left: calc(50% - 147px);
    width: 245px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #2f7eff;
    font-size: 24px;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  
  .home .group-6 {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    display: flex;
    background-color: #f0f0f0;
    border-radius: 100px;
  }
  
  .home .img-2 {
    margin-top: 15px;
    width: 50px;
    height: 50px;
    margin-left: 15px;
    aspect-ratio: 1;
  }
  
  .home .group-7 {
    position: relative;
    width: 460px;
    height: 80px;
  }
  
  .home .available-days-a {
    position: absolute;
    top: 34px;
    left: 110px;
    width: 346px;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #48484a;
    font-size: 18px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .home .text-wrapper-32 {
    position: absolute;
    top: 1px;
    left: calc(50% - 120px);
    width: 240px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #2f7eff;
    font-size: 24px;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  
  .home .group-8 {
    position: relative;
    width: 469px;
    height: 80px;
  }
  
  .home .from-babies-months {
    position: absolute;
    top: 36px;
    left: 110px;
    width: 355px;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #48484a;
    font-size: 18px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .home .text-wrapper-33 {
    position: absolute;
    top: 3px;
    left: calc(50% - 124px);
    width: 271px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #2f7eff;
    font-size: 24px;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  
  .home .group-9 {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
  }
  
  .home .frame-18 {
    display: flex;
    flex-direction: column;
    width: 909px;
    align-items: flex-end;
    gap: 26px;
    position: absolute;
    top: 1156px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .home .frame-19 {
    display: flex;
    flex-direction: column;
    width: 908px;
    height: 220px;
    align-items: flex-start;
    gap: 10px;
    padding: 36px 60px;
    position: relative;
    background-color: #56a4ff;
    border-radius: 40px;
  }
  
  .home .frame-20 {
    position: relative;
    width: 787px;
    height: 148px;
    overflow: hidden;
  }

  .home .text-wrapper-34,
  .home .text-wrapper-37,
  .home .text-wrapper-39 {
    margin-top: 10px;
  } 
  
  .home .group-10 {
    position: relative;
    top: -58px;
    left: 28px;
    width: 734px;
    display: flex;
    gap: 82px;
  }
  
  .home .text-wrapper-34 {
    width: 265px;
    letter-spacing: 5px;
    height: 317px;
    font-family: "Inter-ExtraLight", Helvetica;
    font-weight: 200;
    color: #f2f2f2;
    font-size: 262px;
    line-height: normal;
  }
  
  .home .element-group {
    margin-top: 78px;
    width: 389px;
    height: 107.85px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .home .text-wrapper-35 {
    width: 212.83px;
    height: 34.85px;
    font-family: "Inter-ExtraBold", Helvetica;
    font-weight: 800;
    color: #f2f2f2;
    font-size: 26px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .home .text-wrapper-36 {
    width: 385px;
    height: 61px;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #f2f2f2;
    font-size: 18px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .home .frame-21 {
    display: flex;
    flex-direction: column;
    width: 908px;
    height: 220px;
    align-items: flex-start;
    gap: 10px;
    padding: 36px 60px;
    position: relative;
    border-radius: 40px;
    background: linear-gradient(0deg, rgba(47, 126, 255, 1) 0%, rgba(47, 126, 255, 1) 100%),
      linear-gradient(0deg, rgba(47, 126, 255, 1) 0%, rgba(47, 126, 255, 1) 100%);
  }
  
  .home .frame-22 {
    position: relative;
    width: 787px;
    height: 148px;
    background-color: #2f7eff;
    overflow: hidden;
  }
  
  .home .group-11 {
    gap: 46px;
    position: relative;
    top: -58px;
    left: 28px;
    width: 734px;
    display: flex;
  }
  
  .home .text-wrapper-37 {
    width: 301px;
    letter-spacing: -10px;
    height: 317px;
    font-family: "Inter-ExtraLight", Helvetica;
    font-weight: 200;
    color: #f2f2f2;
    font-size: 262px;
    line-height: normal;
  }
  
  .home .element-group-2 {
    margin-top: 78px;
    width: 389px;
    height: 108px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .home .text-wrapper-38 {
    width: 247px;
    height: 35px;
    font-family: "Inter-ExtraBold", Helvetica;
    font-weight: 800;
    color: #f2f2f2;
    font-size: 26px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .home .frame-23 {
    display: flex;
    flex-direction: column;
    width: 908px;
    height: 220px;
    align-items: flex-start;
    gap: 10px;
    padding: 36px 60px;
    position: relative;
    background-color: #0c51ff;
    border-radius: 40px;
  }
  
  .home .group-12 {
    gap: 47px;
    position: relative;
    top: -58px;
    left: 28px;
    width: 734px;
    display: flex;
  }
  
  .home .text-wrapper-39 {
    width: 300px;
    margin-left: 0;
    letter-spacing: -10px;
    height: 317px;
    font-family: "Inter-ExtraLight", Helvetica;
    font-weight: 200;
    color: #f2f2f2;
    font-size: 262px;
    line-height: normal;
  }
  
  .home .NAV-frame {
    display: flex;
    flex-direction: column;
    width: 1920px;
    align-items: center;
    gap: 10px;
    padding: 10px;
    position: fixed;
    top: -18px;
    left: calc(50% - 960px);
  }
  
  .home .navigation-wrapper {
    display: flex;
    flex-direction: column;
    width: 1440px;
    height: 103px;
    align-items: flex-start;
    gap: 10px;
    position: relative;
  }
  
  .home .navigation {
    position: relative;
    width: 1440px;
    height: 97px;
    background-color: #ffffff;
    box-shadow: 0px 4px 15px #00000026;
  }
  
  .home .group-13 {
    position: absolute;
    top: 37px;
    left: 817px;
    width: 579px;
    height: 22px;
    display: flex;
    gap: 50px;
  }
  
  .home .text-wrapper-40 {
    width: 56px;
    height: 22px;
    opacity: 0.8;
    font-family: "Inter-ExtraBold", Helvetica;
    font-weight: 800;
    color: #0046ff;
    line-height: normal;
    text-decoration: underline;
    font-size: 18px;
    letter-spacing: 0;
  }
  
  .home .text-wrapper-41 {
    width: 93px;
    height: 22px;
    opacity: 0.8;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #4c4c4c;
    line-height: normal;
    font-size: 18px;
    letter-spacing: 0;
  }
  
  .home .text-wrapper-42 {
    width: 94px;
    height: 22px;
    opacity: 0.8;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #4c4c4c;
    font-size: 18px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .home .text-wrapper-43 {
    width: 90px;
    height: 22px;
    opacity: 0.8;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #4c4c4c;
    line-height: normal;
    font-size: 18px;
    letter-spacing: 0;
  }
  
  .home .text-wrapper-44 {
    width: 36px;
    height: 22px;
    opacity: 0.8;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #4c4c4c;
    font-size: 18px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .home .rectangle-6 {
    position: absolute;
    top: 28px;
    left: 50px;
    width: 195px;
    height: 40px;
    object-fit: cover;
  }
  
  /* Slideshow container */
.slideshow-container {
  max-width: 1700px;
  position: absolute;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 275px;
  width: auto;
  height: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  background-color: #0046FF;
  font-weight: bold;
  font-size: 26px;
  transition: background-color 0.6s ease;
  border-radius: 6px 6px 6px 6px;
  user-select: none;
  z-index: 10;
}

.prev-home, .next-home {
  cursor: pointer;
  position: absolute;
  top: 255px;
  width: auto;
  height: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  background-color: #0046FF;
  font-weight: bold;
  font-size: 26px;
  transition: background-color 0.6s ease;
  border-radius: 6px 6px 6px 6px;
  user-select: none;
  z-index: 10;
}

.nav, .prev, .next {
  cursor: pointer;
  position: absolute;
  top: 120px;
  width: auto;
  height: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  background-color: #0046FF;
  font-weight: bold;
  font-size: 26px;
  transition: background-color 0.6s ease;
  border-radius: 6px 6px 6px 6px;
  user-select: none;
  z-index: 10;
}

.prev {
  left: -145px;   /* increase this to move it further left */
}

.prev-home {
  left: 40px;   /* increase this to move it further left */
}

/* Position the "next button" to the right */
.next {
  right: -120px;
}

.next-home {
  right: -1360px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover, .prev-home:hover, .next-home:hover {
  background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.dot-slideshow {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 550px;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.dot.active {
  background-color: #2F7EFF;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

  /* Program */
  .program {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    height: 4933px;
    display: flex;
    flex-direction: column;
    background-color: #fdfdfd;
    overflow: hidden;
  }
  
  .program .frame {
    display: flex;
    z-index: 11;
    flex-direction: column;
    width: 1920px;
    align-items: center;
    gap: 10px;
    padding: 10px;
    position: fixed;
    top: -15px;
    left: calc(50% - 960px);
  }
  
  .program .navigation {
    position: relative;
    width: 1440px;
    height: 97px;
    background-color: #ffffff;
    box-shadow: 0px 4px 15px #00000026;
  }
  
  .program .navbar {
    position: absolute;
    top: 37px;
    left: 817px;
    width: 579px;
    height: 22px;
    display: flex;
  }
  
  .program .text-wrapper {
    width: 56px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #4c4c4c;
    height: 22px;
    opacity: 0.8;
    font-size: 18px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .program .div {
    width: 95px;
    margin-left: 50px;
    font-family: "Inter-ExtraBold", Helvetica;
    font-weight: 800;
    color: #0046ff;
    text-decoration: underline;
    height: 22px;
    opacity: 0.8;
    font-size: 18px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .program .text-wrapper-2 {
    width: 94px;
    height: 22px;
    margin-left: 48px;
    opacity: 0.8;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #4c4c4c;
    font-size: 18px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .program .text-wrapper-3 {
    width: 90px;
    height: 22px;
    margin-left: 50px;
    opacity: 0.8;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #4c4c4c;
    font-size: 18px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .program .text-wrapper-4 {
    width: 36px;
    margin-left: 50px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #4c4c4c;
    height: 22px;
    opacity: 0.8;
    font-size: 18px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .program .rectangle {
    position: absolute;
    top: 28px;
    left: 50px;
    width: 195px;
    height: 40px;
    object-fit: cover;
  }
  
  .program .frame-2 {
    z-index: 9;
    margin-left: 60px;
    width: 100%;
    height: 200px;
    position: relative;
    margin-top: 584px;
    object-fit: cover;
  }
  
  .program .program-hero {
    position: absolute;
    top: -493px;
    left: -60px;
    width: 100%;
    height: 738px;
    object-fit: cover;
    object-position: center;
  }
  
  .program .rectangle-2 {
    position: absolute;
    top: calc(50% - 586px);
    left: -60px;
    width: 100%;
    height: 738px;
    filter: blur(1.5px);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 13%, rgba(0, 0, 0, 1) 100%);
  }
  
  .program .frame-wrapper {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .program .PROGRAMS-FOR-every-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0px 10px;
    position: relative;
    flex: 0 0 auto;
  }
  
  .program .PROGRAMS-FOR-every {
    position: relative;
    width: fit-content;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #fdfdfd;
    font-size: 48px;
    letter-spacing: 0;
    line-height: 1.3em;
    top: -7px;
  }
  
  .program .div-wrapper {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    position: absolute;
    top: 61px;
    left: 0;
  }
  
  .program .frame-3 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    position: relative;
    flex: 0 0 auto;
    margin-left: -15px;
  }
  
  .program .p {
    position: relative;
    width: fit-content;
    margin-left: 15px;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #fdfdfd;
    font-size: 24px;
    letter-spacing: 0;
    line-height: 1.5em;
    top: -12px;
  }
  
  .program .frame-4 {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    position: absolute;
    top: 113px;
    left: 0;
  }
  
  .program .enrol-now-button-wrapper {
    display: flex;
    flex-direction: column;
    width: 215px;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    position: relative;
    flex: 0 0 auto;
    top: -10px;
  }
  
  .program .enrol-now-button {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 76px;
    border-radius: 40px;
    border: 2.5px solid;
    border-color: #ffffff;
    background-color: transparent;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
  }
  
  .program .enrol-now-button:hover {
    background-color: #0046ff;
    border-color: #0046ff;
  }
  
  .program .text-wrapper-5 {
    position: absolute;
    width: 72.58%;
    height: 40.3%;
    top: 32%;
    left: 15%;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #ffffff;
    font-size: 22px;
    letter-spacing: 0;
    line-height: normal;
    transition: color 0.3s ease;
  }
  
  .program .enrol-now-button:hover .text-wrapper-5 {
    color: #ffffff;
  }
  
  .program .frame-5 {
    display: inline-flex;
    z-index: 1;
    margin-left: 1px;
    height: 83px;
    width: 389px;
    align-self: center;
    position: relative;
    margin-top: 167px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
  }
  
  .program .text-wrapper-6 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #2f7eff;
    font-size: 52px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .program .frame-6 {
    display: inline-flex;
    z-index: 3;
    height: 47px;
    width: 570px;
    align-self: center;
    position: relative;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
  }
  
  .program .text-wrapper-7 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Inter-SemiBold", Helvetica;
    font-weight: 600;
    color: #636364;
    font-size: 22px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .program .frame-7 {
    display: inline-flex;
    z-index: 5;
    height: 1150px;
    width: 1256px;
    align-self: center;
    position: relative;
    margin-top: 75px;
    margin-left: 0%;
    margin-right: auto;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    gap: 62px;
  }
  
  .program .frame-8 {
    position: relative;
    width: 597px;
    height: 1150px;
    background-color: #f5f5f5;
    border-radius: 40px;
    overflow: hidden;
    box-shadow: 0px 7px 15px #0000001a;
  }
  
  .program .text-wrapper-8 {
    position: absolute;
    top: 180px;
    left: calc(50% - 156px);
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #48484a;
    font-size: 40px;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  
  .program .text-wrapper-9 {
    position: absolute;
    top: 248px;
    left: calc(50% - 182px);
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #48484a;
    font-size: 22px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .program .line {
    position: absolute;
    top: 318px;
    left: calc(50% - 254px);
    width: 510px;
    height: 2px;
  }
  
  .program .frame-9 {
    display: flex;
    flex-direction: column;
    width: 416px;
    align-items: center;
    gap: 10px;
    position: absolute;
    top: 360px;
    left: 93px;
  }
  
  .program .text-wrapper-10 {
    position: relative;
    align-self: stretch;
    margin-top: -1px;
    font-family: "Inter-ExtraBold", Helvetica;
    font-weight: 800;
    color: #48484a;
    font-size: 48px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .program .text-wrapper-11 {
    position: relative;
    align-self: stretch;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #48484a;
    font-size: 20px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .program .solar-home-bold {
    position: absolute;
    top: 55px;
    left: calc(50% - 42px);
    width: 85px;
    height: 85px;
    aspect-ratio: 1;
  }
  
  .program .private-lessons-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    position: absolute;
    top: 502px;
    left: 54px;
  }
  
  .program .private-lessons {
    display: flex;
    flex-direction: column;
    width: 469px;
    align-items: flex-start;
    gap: 40px;
    position: relative;
  }
  
  .program .group {
    position: relative;
    width: 469px;
    height: 269px;
    background-color: #fefefe;
    border-radius: 40px;
  }
  
  .program .group-2 {
    position: relative;
    width: 70.66%;
    height: 70.63%;
    top: 14.87%;
    left: 9.17%;
  }
  
  .program .water {
    position: absolute;
    width: 98.79%;
    height: 52.63%;
    top: 47.37%;
    left: 0;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 400;
    color: #48484a;
    font-size: 20px;
    letter-spacing: 0;
    line-height: 25px;
  }
  
  .program .span {
    font-weight: 500;
  }
  
  .program .text-wrapper-12 {
    font-family: "Inter-SemiBold", Helvetica;
    font-weight: 600;
  }
  
  .program .babies-toddlers {
    position: absolute;
    width: 75.2%;
    height: 31.05%;
    top: 0;
    left: 0;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 400;
    color: #48484a;
    font-size: 28px;
    line-height: 28px;
  }
  
  .program .text-wrapper-13 {
    font-weight: 700;
    letter-spacing: 0;
  }
  
  .program .text-wrapper-14 {
    font-family: "Inter-SemiBold", Helvetica;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 25px;
  }
  
  .program .group-wrapper {
    position: relative;
    width: 469px;
    height: 269px;
    background-color: #fefefe;
    border-radius: 40px;
  }
  
  .program .group-3 {
    position: relative;
    width: 83.58%;
    height: 70.63%;
    top: 14.87%;
    left: 9.17%;
  }
  
  .program .master-front-crawl {
    position: absolute;
    width: 98.98%;
    height: 52.63%;
    top: 47.37%;
    left: 0;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 400;
    color: #48484a;
    font-size: 20px;
    letter-spacing: 0;
    line-height: 25px;
  }
  
  .program .kids-adults {
    position: absolute;
    width: 46.68%;
    height: 31.05%;
    top: 0;
    left: 0;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 400;
    color: #48484a;
    font-size: 28px;
    line-height: 28px;
  }
  
  .program .frame-10 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    position: absolute;
    top: 170px;
    left: 142px;
  }
  
  .program .text-wrapper-16 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #48484a;
    font-size: 40px;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  
  .program .frame-11 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    position: absolute;
    top: 238px;
    left: 73px;
  }
  
  .program .text-wrapper-17 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #48484a;
    font-size: 22px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .program .text-wrapper-18 {
    position: absolute;
    top: 360px;
    left: calc(50% - 120px);
    font-family: "Inter-ExtraBold", Helvetica;
    font-weight: 800;
    color: #48484a;
    font-size: 48px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .program .text-wrapper-19 {
    position: absolute;
    top: 428px;
    left: calc(50% - 62px);
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #48484a;
    font-size: 20px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  
  .program .pepicons-print {
    display: flex;
    flex-direction: column;
    width: 95px;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 4px;
    position: absolute;
    top: 50px;
    left: calc(50% - 48px);
  }
  
  .program .img {
    position: relative;
    width: 84.08px;
    height: 67.69px;
  }
  
  .program .group-4 {
    position: absolute;
    top: 517px;
    left: 90px;
    width: 419px;
    height: 42px;
    display: flex;
    gap: 16px;
  }
  
  .program .charm-square-tick {
    width: 42px;
    height: 42px;
    aspect-ratio: 1;
  }
  
  .program .text-wrapper-20 {
    margin-top: 7px;
    width: 359px;
    height: 29px;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #48484a;
    font-size: 24px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .program .group-5 {
    position: absolute;
    top: 661px;
    left: 91px;
    width: 426px;
    height: 42px;
    display: flex;
    gap: 16px;
  }
  
  .program .age-skill {
    margin-top: 7px;
    width: 366px;
    height: 29px;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #48484a;
    font-size: 24px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .program .group-6 {
    position: absolute;
    top: 589px;
    left: 90px;
    width: 275px;
    height: 42px;
    display: flex;
    gap: 16px;
  }
  
  .program .text-wrapper-21 {
    margin-top: 7px;
    width: 215px;
    height: 29px;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #48484a;
    font-size: 24px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .program .group-7 {
    position: absolute;
    top: 733px;
    left: 91px;
    width: 378px;
    height: 42px;
    display: flex;
    gap: 16px;
  }
  
  .program .text-wrapper-22 {
    width: 318px;
    margin-top: 7px;
    height: 29px;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #48484a;
    font-size: 24px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .program .group-8 {
    position: absolute;
    top: 805px;
    left: 91px;
    width: 246px;
    height: 42px;
    display: flex;
    gap: 16px;
  }
  
  .program .text-wrapper-23 {
    margin-top: 7px;
    width: 186px;
    height: 29px;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #48484a;
    font-size: 24px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .program .frame-12 {
    display: inline-flex;
    z-index: 2;
    height: 83px;
    width: 450px;
    align-self: center;
    position: relative;
    margin-top: 190px;
    margin-left: 0%;
    margin-right: auto;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
  }
  
  .program .text-wrapper-24 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #2f7eff;
    font-size: 52px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .program .frame-13 {
    display: inline-flex;
    z-index: 4;
    margin-left: 1px;
    height: 47px;
    width: 457px;
    align-self: center;
    position: relative;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
  }
  
  .program .text-wrapper-25 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Inter-SemiBold", Helvetica;
    font-weight: 600;
    color: #636364;
    font-size: 22px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .program .frame-14 {
    display: flex;
    z-index: 6;
    margin-left: 1px;
    height: 1018px;
    width: 1257px;
    align-self: center;
    position: relative;
    margin-top: 75px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .program .frame-15 {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 1018px;
  }
  
  .program .frame-16 {
    position: absolute;
    top: 0;
    left: 0;
    width: 597px;
    height: 1018px;
    background-color: #f5f5f5;
    border-radius: 40px;
    overflow: hidden;
    box-shadow: 0px 7px 15px #0000001a;
  }
  
  .program .rectangle-3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 597px;
    height: 361px;
  }
  
  .program .group-9 {
    position: absolute;
    top: 32px;
    left: -10px;
    width: 617px;
    height: 930px;
  }
  
  .program .frame-17 {
    display: flex;
    flex-direction: column;
    width: 248px;
    align-items: flex-start;
    gap: 20px;
    position: absolute;
    top: 383px;
    left: 50px;
  }
  
  .program .group-10 {
    position: relative;
    width: 234px;
    height: 43px;
  }
  
  .program .mynaui-location {
    position: absolute;
    top: 0;
    left: 0;
    width: 42px;
    height: 43px;
    aspect-ratio: 1;
  }
  
  .program .text-wrapper-26 {
    top: 0;
    left: 53px;
    width: 179px;
    color: #48484a;
    font-size: 24px;
    line-height: normal;
    position: absolute;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    letter-spacing: 0;
  }
  
  .program .group-11 {
    position: relative;
    width: 180px;
    height: 43px;
  }
  
  .program .text-wrapper-27 {
    position: absolute;
    top: 0;
    left: 53px;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #48484a;
    font-size: 24px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .program .group-12 {
    position: relative;
    width: 150px;
    height: 43px;
  }
  
  .program .group-13 {
    position: relative;
    width: 250px;
    height: 43px;
    margin-right: -2px;
  }
  
  .program .group-14 {
    position: relative;
    width: 190px;
    height: 43px;
  }
  
  .program .group-15 {
    position: relative;
    width: 218px;
    height: 43px;
  }
  
  .program .group-16 {
    position: relative;
    width: 231px;
    height: 43px;
  }
  
  .program .group-17 {
    position: relative;
    width: 165px;
    height: 43px;
  }
  
  .program .group-18 {
    position: relative;
    width: 177px;
    height: 43px;
  }
  
  .program .rectangle-wrapper {
    display: flex;
    flex-direction: column;
    width: 617px;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .program .rectangle-4 {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 319px;
    filter: blur(1.5px);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 13%, rgba(0, 0, 0, 1) 100%);
  }
  
  .program .frame-18 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    position: absolute;
    top: 266px;
    left: 40px;
  }
  
  .program .text-wrapper-28 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #f7f7f7;
    font-size: 22px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .program .frame-19 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    position: absolute;
    top: 214px;
    left: 40px;
  }
  
  .program .text-wrapper-29 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #f7f7f7;
    font-size: 36px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .program .group-19 {
    position: absolute;
    top: 0;
    left: 650px;
    width: 617px;
    height: 1018px;
  }
  
  .program .img-wrapper {
    position: absolute;
    top: 0;
    left: 10px;
    width: 597px;
    height: 1018px;
    display: flex;
    background-color: #f5f5f5;
    border-radius: 40px;
    overflow: hidden;
    box-shadow: 0px 7px 15px #0000001a;
  }
  
  .program .rectangle-5 {
    width: 597px;
    height: 361px;
    object-fit: cover;
  }
  
  .program .group-20 {
    position: absolute;
    top: 32px;
    left: 0;
    width: 617px;
    height: 797px;
  }
  
  .program .frame-20 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    position: absolute;
    top: 213px;
    left: 40px;
  }
  
  .program .frame-21 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    position: absolute;
    top: 266px;
    left: 40px;
  }
  
  .program .frame-22 {
    display: flex;
    flex-direction: column;
    width: 451px;
    align-items: flex-start;
    gap: 43px;
    position: absolute;
    top: 381px;
    left: 54px;
  }
  
  .program .group-21 {
    position: relative;
    width: 443px;
    height: 43px;
  }
  
  .program .text-wrapper-30 {
    position: relative;
    align-self: stretch;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #48484a;
    font-size: 24px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .program .frame-23 {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 258px;
  }
  
  .program .group-22 {
    position: absolute;
    top: 0;
    left: 0;
    width: 445px;
    height: 42px;
    display: flex;
    gap: 16px;
  }
  
  .program .text-wrapper-31 {
    margin-top: 7px;
    width: 385px;
    height: 29px;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #48484a;
    font-size: 24px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .program .group-23 {
    position: absolute;
    top: 62px;
    left: 0;
    width: 372px;
    height: 42px;
    display: flex;
    gap: 16px;
  }
  
  .program .text-wrapper-32 {
    margin-top: 7px;
    width: 312px;
    height: 29px;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #48484a;
    font-size: 24px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .program .group-24 {
    position: absolute;
    top: 124px;
    left: 0;
    width: 346px;
    height: 42px;
    display: flex;
    gap: 16px;
  }
  
  .program .text-wrapper-33 {
    margin-top: 7px;
    width: 286px;
    height: 29px;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #48484a;
    font-size: 24px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .program .frame-24 {
    position: absolute;
    top: 186px;
    left: 0;
    width: 370px;
    height: 42px;
    display: flex;
  }
  
  .program .group-25 {
    width: 372px;
    display: flex;
    gap: 16px;
  }
  
  .program .frame-25 {
    display: flex;
    z-index: 7;
    margin-left: 1px;
    height: 209px;
    width: 1013px;
    align-self: center;
    position: relative;
    margin-top: 170px;
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }
  
  .program .ready-to-become-a {
    position: relative;
    align-self: stretch;
    margin-top: -1px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #48484a;
    font-size: 52px;
    text-align: center;
    letter-spacing: 0;
    line-height: 65px;
  }
  
  .program .text-wrapper-34 {
    position: relative;
    align-self: stretch;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #48484a;
    font-size: 32px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .program .book-a-lesson-button-wrapper {
    display: flex;
    flex-direction: column;
    width: 362px;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    position: absolute;
    top: 4200px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .program .book-a-lesson-button {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 136px;
  }
  
  .program .footer-CTA-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
  }

  .program .footer-CTA {
    flex: 1;
    width: 342px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 70px;
    overflow: hidden;
    border: 5px solid;
    border-color: #0046ff;
  }
  
  .program .BOOK-a-LESSON {
    margin-top: 2px;
    height: 39px;
    margin-left: 20px;
    width: 270px;
    font-family: "Inter-ExtraBold", Helvetica;
    font-weight: 800;
    color: #0046ff;
    font-size: 32px;
    line-height: normal;
  }

  .program .footer-CTA {
    flex: 1;
    width: 342px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 70px;
    overflow: hidden;
    border: 5px solid #0046ff;
    background-color: transparent;
    transition: background-color 0.3s ease, transform 0.2s ease;
  }
  
  /* TEXT DEFAULT */
  .program .BOOK-a-LESSON {
    font-family: "Inter-ExtraBold", Helvetica;
    font-weight: 800;
    color: #0046ff;
    font-size: 32px;
    transition: color 0.3s ease;
  }
  
  /* 🔵 HOVER STATE */
  .program .footer-CTA:hover {
    background-color: #0046ff;
    cursor: pointer;
    transform: translateY(-2px); /* subtle lift (optional) */
  }
  
  .program .footer-CTA:hover .BOOK-a-LESSON {
    color: #ffffff;
  }
  
  .program .text-wrapper-35 {
    letter-spacing: 0;
  }
  
  .program .text-wrapper-36 {
    letter-spacing: 0.51px;
  }
  
  .program .component {
    z-index: 8;
    height: 430px;
    width: 100%;
    align-self: center;
    position: relative;
    margin-top: 405px;
    background-color: #0a225c;
  }
  
  .program .footer {
    position: absolute;
    width: 105.97%;
    height: 100%;
    top: 0;
    left: -3.12%;
    background-color: #0a225c;
  }
  
  .program .group-26 {
    position: absolute;
    top: 68px;
    left: calc(50% - 676px);
    width: 1349px;
    height: 294px;
  }
  
  .program .frame-26 {
    display: flex;
    flex-direction: column;
    width: 139px;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    top: 8px;
    left: calc(50% + 536px);
  }
  
  .program .text-wrapper-37 {
    position: relative;
    align-self: stretch;
    height: 30px;
    margin-top: -1px;
    font-family: "Inter-SemiBold", Helvetica;
    font-weight: 600;
    color: #fdfdfd;
    font-size: 24px;
    letter-spacing: 0;
    line-height: 30px;
    white-space: nowrap;
  }
  
  .program .error-form {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #e1f1fd;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 40px;
  }
  
  .program .frame-27 {
    display: flex;
    flex-direction: column;
    width: 152px;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    top: 8px;
    left: calc(50% + 123px);
  }
  
  .program .frame-28 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    position: relative;
    flex: 0 0 auto;
  }
  
  .program .quick-links {
    position: relative;
    width: 80px;
    height: 160px;
  }
  
  .program .text-wrapper-38 {
    width: 63.75%;
    height: 25%;
    top: 0;
    left: 0;
    color: #e1f1fd;
    font-size: 18px;
    line-height: 40px;
    white-space: nowrap;
    position: absolute;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    letter-spacing: 0;
  }
  
  .program .text-wrapper-39 {
    position: absolute;
    width: 92.5%;
    height: 25%;
    top: 25%;
    left: 0;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #e1f1fd;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 40px;
    white-space: nowrap;
  }
  
  .program .text-wrapper-40 {
    position: absolute;
    width: 100%;
    height: 25%;
    top: 50%;
    left: 0;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #e1f1fd;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 40px;
    white-space: nowrap;
  }
  
  .program .text-wrapper-41 {
    width: 86.25%;
    height: 25%;
    top: 75%;
    left: 0;
    color: #e1f1fd;
    font-size: 18px;
    line-height: 40px;
    white-space: nowrap;
    position: absolute;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    letter-spacing: 0;
  }
  
  .program .frame-29 {
    display: flex;
    flex-direction: column;
    width: 159px;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    top: 8px;
    left: calc(50% + 330px);
  }
  
  .program .main-pages {
    position: relative;
    width: 74px;
    height: 80px;
  }
  
  .program .text-wrapper-42 {
    position: absolute;
    width: 100%;
    height: 50%;
    top: 0;
    left: 0;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #e1f1fd;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 40px;
    white-space: nowrap;
  }
  
  .program .text-wrapper-43 {
    width: 93.24%;
    height: 50%;
    top: 50%;
    left: 0;
    color: #e1f1fd;
    font-size: 18px;
    line-height: 40px;
    white-space: nowrap;
    position: absolute;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    letter-spacing: 0;
  }
  
  .program .frame-30 {
    display: flex;
    flex-direction: column;
    width: 446px;
    align-items: flex-start;
    gap: 10px;
    position: absolute;
    top: 0;
    left: calc(50% - 674px);
  }
  
  .program .frame-31 {
    display: inline-flex;
    align-items: center;
    position: relative;
    flex: 0 0 auto;
  }
  
  .program .sla-logo {
    position: relative;
    width: 61px;
    height: 38px;
    aspect-ratio: 1.59;
    object-fit: cover;
  }
  
  .program .group-27 {
    position: relative;
    width: 159px;
    height: 44px;
  }
  
  .program .group-28 {
    position: relative;
    width: 163px;
    height: 44px;
  }
  
  .program .text-wrapper-44 {
    position: absolute;
    top: 26px;
    left: 3px;
    font-family: "Poppins-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 12px;
    letter-spacing: 0.24px;
    line-height: normal;
  }
  
  .program .swim-life {
    position: absolute;
    top: 0;
    left: 0;
    width: 159px;
    font-family: "Poppins-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 26px;
    line-height: normal;
  }
  
  .program .text-wrapper-45 {
    letter-spacing: 0.41px;
  }
  
  .program .group-29 {
    position: relative;
    width: 446.3px;
    height: 240px;
  }
  
  .program .TEL-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .program .TEL {
    position: relative;
    width: 426.3px;
    margin-top: -1px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 400;
    color: #fdfdfd;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 30px;
  }
  
  .program .text-wrapper-49 {
    font-weight: 700;
  }
  
  .program .text-wrapper-51 {
    font-family: "Inter-Regular", Helvetica;
  }
  
  .program .frame-32 {
    display: flex;
    flex-wrap: wrap;
    width: 259px;
    align-items: flex-end;
    gap: 20px 10px;
    position: absolute;
    top: 165px;
    left: 10px;
  }
  
  .program .text-wrapper-52 {
    position: relative;
    width: 259.35px;
    height: 15px;
    margin-top: -1px;
    font-family: "Inter-SemiBold", Helvetica;
    font-weight: 600;
    color: #fdfdfd;
    font-size: 20px;
    letter-spacing: 0;
    line-height: 20px;
    white-space: nowrap;
  }
  
  .program .group-30 {
    position: relative;
    width: 42px;
    height: 40px;
    border-radius: 7px;
    border: 2px solid;
    border-color: #fdfdfd;
  }
  
  .program .eva-facebook-fill {
    position: absolute;
    width: 62.5%;
    top: 5px;
    left: 20%;
    height: 26px;
    aspect-ratio: 1;
  }
  
  .program .basil-instagram {
    position: absolute;
    width: 65%;
    top: 5px;
    left: 19%;
    height: 27px;
    aspect-ratio: 1;
  }
  
  /* About Us */
  .about-us {
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    height: 4537px;
    background-color: #fdfdfd;
    overflow: hidden;
  }
  
  .about-us .frame {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: flex-start;
    gap: 10px;
    position: absolute;
    top: 1959px;
  }
  
  .about-us .rectangle {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 420px;
    background-color: #f5f5f5;
  }
  
  .about-us .div-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    position: absolute;
    top: 1844px;
    left: calc(50% - 197px);
  }
  
  .about-us .text-wrapper {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #2f7eff;
    font-size: 48px;
    text-align: center;
    letter-spacing: 0;
    line-height: 65px;
    white-space: nowrap;
  }
  
  .about-us .div {
    display: flex;
    flex-direction: column;
    width: 1013px;
    align-items: center;
    gap: 40px;
    position: absolute;
    top: 3493px;
    left: calc(50% - 506px);
  }
  
  .about-us .ready-to-become-a {
    position: relative;
    align-self: stretch;
    margin-top: -1px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #48484a;
    font-size: 52px;
    text-align: center;
    letter-spacing: 0;
    line-height: 65px;
  }
  
  .about-us .p {
    position: relative;
    align-self: stretch;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #48484a;
    font-size: 32px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .about-us .component {
    position: absolute;
    top: 4107px;
    width: 100%;
    height: 430px;
    background-color: #0a225c;
  }
  
  .about-us .footer {
    position: absolute;
    width: 105.97%;
    height: 100%;
    top: 0;
    left: -3.12%;
    background-color: #0a225c;
  }
  
  .about-us .group {
    position: absolute;
    top: 68px;
    left: calc(50% - 676px);
    width: 1349px;
    height: 294px;
  }
  
  .about-us .frame-2 {
    display: flex;
    flex-direction: column;
    width: 139px;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    top: 8px;
    left: calc(50% + 536px);
  }
  
  .about-us .text-wrapper-2 {
    position: relative;
    align-self: stretch;
    height: 30px;
    margin-top: -1px;
    font-family: "Inter-SemiBold", Helvetica;
    font-weight: 600;
    color: #fdfdfd;
    font-size: 24px;
    letter-spacing: 0;
    line-height: 30px;
    white-space: nowrap;
  }
  
  .about-us .error-form-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    position: relative;
    flex: 0 0 auto;
  }
  
  .about-us .error-form {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #e1f1fd;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 40px;
  }
  
  .about-us .frame-3 {
    display: flex;
    flex-direction: column;
    width: 152px;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    top: 8px;
    left: calc(50% + 123px);
  }
  
  .about-us .frame-4 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    position: relative;
    flex: 0 0 auto;
  }
  
  .about-us .quick-links {
    position: relative;
    width: 80px;
    height: 160px;
  }
  
  .about-us .text-wrapper-3 {
    position: absolute;
    width: 63.75%;
    height: 25%;
    top: 0;
    left: 0;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #e1f1fd;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 40px;
    white-space: nowrap;
  }
  
  .about-us .text-wrapper-4 {
    position: absolute;
    width: 92.5%;
    height: 25%;
    top: 25%;
    left: 0;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #e1f1fd;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 40px;
    white-space: nowrap;
  }
  
  .about-us .text-wrapper-5 {
    position: absolute;
    width: 100%;
    height: 25%;
    top: 50%;
    left: 0;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #e1f1fd;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 40px;
    white-space: nowrap;
  }
  
  .about-us .text-wrapper-6 {
    width: 86.25%;
    height: 25%;
    top: 75%;
    position: absolute;
    left: 0;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #e1f1fd;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 40px;
    white-space: nowrap;
  }
  
  .about-us .frame-5 {
    display: flex;
    flex-direction: column;
    width: 159px;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    top: 8px;
    left: calc(50% + 330px);
  }
  
  .about-us .main-pages {
    position: relative;
    width: 74px;
    height: 80px;
  }
  
  .about-us .text-wrapper-7 {
    position: absolute;
    width: 100%;
    height: 50%;
    top: 0;
    left: 0;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #e1f1fd;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 40px;
    white-space: nowrap;
  }
  
  .about-us .text-wrapper-8 {
    width: 93.24%;
    height: 50%;
    top: 50%;
    position: absolute;
    left: 0;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #e1f1fd;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 40px;
    white-space: nowrap;
  }
  
  .about-us .frame-6 {
    display: flex;
    flex-direction: column;
    width: 446px;
    align-items: flex-start;
    gap: 10px;
    position: absolute;
    top: 0;
    left: calc(50% - 674px);
  }
  
  .about-us .frame-7 {
    display: inline-flex;
    align-items: center;
    position: relative;
    flex: 0 0 auto;
  }
  
  .about-us .sla-logo {
    position: relative;
    width: 61px;
    height: 38px;
    aspect-ratio: 1.59;
    object-fit: cover;
  }
  
  .about-us .group-wrapper {
    position: relative;
    width: 159px;
    height: 44px;
  }
  
  .about-us .group-2 {
    position: relative;
    width: 163px;
    height: 44px;
  }
  
  .about-us .text-wrapper-9 {
    position: absolute;
    top: 26px;
    left: 3px;
    font-family: "Poppins-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 12px;
    letter-spacing: 0.24px;
    line-height: normal;
  }
  
  .about-us .swim-life {
    position: absolute;
    top: 0;
    left: 0;
    width: 159px;
    font-family: "Poppins-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 26px;
    line-height: normal;
  }
  
  .about-us .span {
    letter-spacing: 0.41px;
  }
  
  .about-us .group-3 {
    position: relative;
    width: 446.3px;
    height: 240px;
  }
  
  .about-us .TEL-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .about-us .TEL {
    position: relative;
    width: 426.3px;
    margin-top: -1px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 400;
    color: #fdfdfd;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 30px;
  }
  
  .about-us .text-wrapper-13 {
    font-weight: 700;
  }
  
  .about-us .text-wrapper-15 {
    font-family: "Inter-Regular", Helvetica;
  }
  
  .about-us .frame-8 {
    display: flex;
    flex-wrap: wrap;
    width: 259px;
    align-items: flex-end;
    gap: 20px 10px;
    position: absolute;
    top: 165px;
    left: 10px;
  }
  
  .about-us .text-wrapper-16 {
    position: relative;
    width: 259.35px;
    height: 15px;
    margin-top: -1px;
    font-family: "Inter-SemiBold", Helvetica;
    font-weight: 600;
    color: #fdfdfd;
    font-size: 20px;
    letter-spacing: 0;
    line-height: 20px;
    white-space: nowrap;
  }
  
  .about-us .img-wrapper {
    position: relative;
    width: 42px;
    height: 40px;
    border-radius: 7px;
    border: 2px solid;
    border-color: #fdfdfd;
  }
  
  .about-us .eva-facebook-fill {
    position: absolute;
    width: 62.5%;
    top: 5px;
    left: 20%;
    height: 26px;
    aspect-ratio: 1;
  }
  
  .about-us .basil-instagram {
    position: absolute;
    width: 65%;
    top: 5px;
    left: 19%;
    height: 27px;
    aspect-ratio: 1;
  }
  
  .about-us .about-hero-section {
    position: absolute;
    top: 89px;
    width: 100%;
    height: 738px;
    object-fit: cover;
  }
  
  .about-us .about-hero {
    position: absolute;
    top: 0;
    width: 100%;
    height: 738px;
    object-fit: cover;
    object-position: center;
  }
  
  .about-us .rectangle-2 {
    position: absolute;
    top: calc(50% - 358px);
    width: 100%;
    height: 727px;
    filter: blur(1.5px);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 13%, rgba(0, 0, 0, 1) 100%);
  }
  
  .about-us .frame-9 {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    position: absolute;
    top: 584px;
    left: 70px;
  }
  
  .about-us .frame-10 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    flex: 0 0 auto;
  }
  
  .about-us .text-wrapper-17 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #ffffff;
    font-size: 48px;
    letter-spacing: 0;
    line-height: normal;
    top: -5px;
  }
  
  .about-us .frame-11 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 0px;
    position: relative;
    flex: 0 0 auto;
  }
  
  .about-us .text-wrapper-18 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #f6f1f1;
    font-size: 24px;
    letter-spacing: 0;
    line-height: normal;
    top: -7px;
  }
  
  .about-us .enrol-now-button-wrapper {
    display: flex;
    flex-direction: column;
    width: 215px;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    position: relative;
    flex: 0 0 auto;
    top: -9px;
    left: -15px;
  }
  
  .about-us .enrol-now-button {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 76px;
    border-radius: 40px;
    border: 2.5px solid;
    border-color: #ffffff;
    background-color: transparent;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
  }
  
  .about-us .enrol-now-button:hover {
    background-color: #0046ff;
    border-color: #0046ff;
  }
  
  .about-us .text-wrapper-19 {
    position: absolute;
    width: 72.58%;
    height: 40.3%;
    top: 32%;
    left: 15%;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #ffffff;
    font-size: 22px;
    letter-spacing: 0;
    line-height: normal;
    transition: color 0.3s ease;
  }
  
  .about-us .enrol-now-button:hover .text-wrapper-19 {
    color: #ffffff;
  }
  
  .about-us .book-a-lesson-button-wrapper {
    display: flex;
    flex-direction: column;
    width: 362px;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    position: absolute;
    top: 3801px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .about-us .book-a-lesson-button {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 136px;
  }
  
  .about-us .footer-CTA-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
  }

  .about-us .footer-CTA {
    flex: 1;
    width: 342px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 70px;
    overflow: hidden;
    border: 5px solid;
    border-color: #0046ff;
  }
  
  .about-us .BOOK-a-LESSON {
    margin-top: 2px;
    height: 39px;
    margin-left: 20px;
    width: 270px;
    font-family: "Inter-ExtraBold", Helvetica;
    font-weight: 800;
    color: #0046ff;
    font-size: 32px;
    line-height: normal;
  }

  .about-us .footer-CTA {
    flex: 1;
    width: 342px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 70px;
    overflow: hidden;
    border: 5px solid #0046ff;
    background-color: transparent;
    transition: background-color 0.3s ease, transform 0.2s ease;
  }
  
  /* TEXT DEFAULT */
  .about-us .BOOK-a-LESSON {
    font-family: "Inter-ExtraBold", Helvetica;
    font-weight: 800;
    color: #0046ff;
    font-size: 32px;
    transition: color 0.3s ease;
  }
  
  /* 🔵 HOVER STATE */
  .about-us .footer-CTA:hover {
    background-color: #0046ff;
    cursor: pointer;
    transform: translateY(-2px); /* subtle lift (optional) */
  }
  
  .about-us .footer-CTA:hover .BOOK-a-LESSON {
    color: #ffffff;
  }
  
  .about-us .text-wrapper-20 {
    letter-spacing: 0;
  }
  
  .about-us .text-wrapper-21 {
    letter-spacing: 0.51px;
  }
  
  .about-us .frame-12 {
    position: absolute;
    top: 2667px;
    left: calc(50% - 686px);
    width: 1371px;
    height: 655px;
    display: flex;
  }
  
  .about-us .group-4 {
    width: 1299.2px;
    height: 655.23px;
    margin-left: 36px;
    position: relative;
  }
  
  .about-us .frame-13 {
    display: flex;
    flex-direction: column;
    width: 355px;
    align-items: flex-start;
    gap: 55px;
    position: absolute;
    top: 0;
    left: 60px;
  }
  
  .about-us .text-wrapper-22 {
    position: relative;
    align-self: stretch;
    margin-top: -1px;
    left: -60px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #2f7eff;
    font-size: 48px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .about-us .at-swim-life-academy {
    position: relative;
    width: 217px;
    left: -57px;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #474749;
    font-size: 18px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .about-us .values {
    display: flex;
    flex-wrap: wrap;
    width: 952px;
    align-items: flex-start;
    gap: 26px 26px;
    position: absolute;
    top: 0;
    left: 360px;
  }
  
  .about-us .group-5 {
    position: relative;
    width: 462.6px;
    height: 314.61px;
    background-color: #f5f5f5;
    border-radius: 40px;
  }
  
  .about-us .group-6 {
    position: relative;
    top: 35px;
    left: 31px;
    width: 405px;
    height: 245px;
  }
  
  .about-us .group-7 {
    position: absolute;
    width: 13.38%;
    height: 22.14%;
    top: 0;
    left: 3.17%;
  }
  
  .about-us .vector {
    position: absolute;
    width: 100%;
    height: 100%;
    top: -2.46%;
    left: -2.46%;
  }
  
  .about-us .we-don-t-just-teach {
    position: absolute;
    top: 185px;
    left: 0;
    width: 401px;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #636364;
    font-size: 18px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .about-us .text-wrapper-23 {
    position: absolute;
    top: 114px;
    left: 0;
    width: 264px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #2f7eff;
    font-size: 32px;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  
  .about-us .line {
    position: absolute;
    top: 164px;
    left: 1px;
    width: 400px;
    height: 2px;
  }
  
  .about-us .group-8 {
    position: relative;
    top: 23px;
    left: 30px;
    width: 405px;
    height: 256px;
    display: flex;
    flex-direction: column;
  }
  
  .about-us .hugeicons-safety-pin {
    width: 70.2px;
    height: 70.2px;
    aspect-ratio: 1;
  }
  
  .about-us .text-wrapper-24 {
    margin-left: 0.5px;
    width: 204px;
    height: 34px;
    margin-top: 53.5px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #2f7eff;
    font-size: 32px;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  
  .about-us .line-2 {
    position: absolute;
    top: 175px;
    left: 1px;
    width: 400px;
    height: 2px;
  }
  
  .about-us .text-wrapper-25 {
    width: 400.84px;
    height: 59.43px;
    margin-top: 35.8px;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #636364;
    font-size: 18px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .about-us .group-9 {
    position: relative;
    top: 26px;
    left: 31px;
    width: 405px;
    height: 254px;
    display: flex;
    flex-direction: column;
  }
  
  .about-us .stash-user-heart {
    margin-left: 3.6px;
    width: 72.24px;
    height: 72.24px;
    aspect-ratio: 1;
  }
  
  .about-us .patient-caring {
    width: 288px;
    height: 33px;
    margin-top: 52.5px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #2f7eff;
    font-size: 32px;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  
  .about-us .line-3 {
    position: absolute;
    top: 173px;
    left: 1px;
    width: 400px;
    height: 2px;
  }
  
  .about-us .text-wrapper-26 {
    margin-left: 0.1px;
    width: 400.84px;
    height: 59.43px;
    margin-top: 36.8px;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #636364;
    font-size: 18px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .about-us .group-10 {
    position: relative;
    width: 87.51%;
    height: 77.58%;
    top: 11.31%;
    left: 6.57%;
  }
  
  .about-us .text-wrapper-27 {
    position: absolute;
    width: 99.01%;
    height: 24.35%;
    top: 75.65%;
    left: 0;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #636364;
    font-size: 18px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .about-us .text-wrapper-28 {
    position: absolute;
    width: 56.32%;
    height: 13.52%;
    top: 47.04%;
    left: 0;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #2f7eff;
    font-size: 32px;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  
  .about-us .line-4 {
    position: absolute;
    top: 164px;
    left: 1px;
    width: 400px;
    height: 2px;
  }
  
  .about-us .streamline-ultimate {
    position: absolute;
    top: 0;
    left: 4px;
    width: 62px;
    height: 62px;
    aspect-ratio: 1;
  }
  
  .about-us .group-11 {
    position: absolute;
    top: 957px;
    left: 50%;
    transform: translateX(-50%);
    width: 1400px;
    max-width: 90%;
    height: 707px;
    display: flex;
    justify-content: space-between;
    gap: 60px;
    align-items: flex-start;
  }
  
  .about-us .frame-14 {
    display: flex;
    margin-top: 81px;
    width: 311px;
    min-width: 311px;
    height: 541px;
    position: relative;
    flex-direction: column;
    align-items: center;
    gap: 52px;
    flex-shrink: 0;
  }
  
  .about-us .element-confident {
    position: relative;
    width: 100%;
    margin-top: -1px;
    margin-left: 0;
    left: -160%;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: transparent;
    font-size: 54px;
    text-align: center;
    line-height: 50px;
  }
  
  .about-us .text-wrapper-29 {
    color: #2f7eff;
    letter-spacing: 0.5px;
  }
  
  .about-us .text-wrapper-30 {
    color: #636364;
    font-size: 24px;
    letter-spacing: 0;
  }
  
  .about-us .line-5 {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 1.5px;
    display: block;
    border-width: 1px;
    border-color: #2f7eff;
    border-style: solid;
    margin-left: 0;
    left: -160%;
  }
  
  .about-us .div-2 {
    position: relative;
    width: fit-content;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: transparent;
    font-size: 54px;
    text-align: center;
    line-height: 50px;
    margin-left: 0;
    left: -160%;
  }
  
  .about-us .text-wrapper-32 {
    color: #3a59d1;
    letter-spacing: 0;
  }
  
  .about-us .group-12 {
    width: 574px;
    min-width: 400px;
    height: 707px;
    margin-left: 60px;
    flex-shrink: 0;
  }
  
  .about-us .frame-15 {
    display: flex;
    margin-top: 136px;
    width: 267px;
    height: 435px;
    position: relative;
    margin-left: 54px;
    flex-direction: column;
    align-items: flex-start;
    gap: 42px;
  }
  
  .about-us .text-wrapper-33 {
    position: relative;
    align-self: stretch;
    margin-top: -1px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #2f7eff;
    font-size: 52px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .about-us .founded-over-a {
    position: relative;
    align-self: stretch;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 400;
    color: transparent;
    font-size: 18px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .about-us .text-wrapper-34 {
    font-weight: 500;
    color: #636364;
  }
  
  .about-us .text-wrapper-35 {
    font-family: "Inter-SemiBold", Helvetica;
    font-weight: 600;
    color: #2f7eff;
  }
  
  .about-us .text-wrapper-36 {
    font-family: "Inter-SemiBold", Helvetica;
    font-weight: 600;
    color: #3a59d1;
  }
  
  .about-us .MOT-component-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    position: absolute;
    top: 2022px;
    left: calc(50% - 708px);
  }
  
  .about-us .MOT-component {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    padding: 0px 139px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
  }
  
  .about-us .meet-our-team {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 261px;
    border-radius: 40px;
    overflow: hidden;
  }
  
  .about-us .rectangle-3 {
    position: absolute;
    top: calc(50% - 130px);
    left: calc(50% - 100px);
    width: 428px;
    height: 260px;
    object-fit: cover;
  }
  
  .about-us .rectangle-4 {
    position: absolute;
    top: calc(50% - 2262px);
    left: calc(50% - 2998px);
    width: 429px;
    height: 260px;
    object-fit: cover;
  }
  
  .about-us .rectangle-5 {
    position: absolute;
    top: calc(50% - 2262px);
    left: calc(50% - 2538px);
    width: 428px;
    height: 260px;
    object-fit: cover;
  }
  
  .about-us .rectangle-6 {
    position: absolute;
    top: calc(50% - 130px);
    left: calc(50% - 560px);
    width: 429px;
    height: 260px;
    object-fit: cover;
  }
  
  .about-us .rectangle-7 {
    position: absolute;
    top: calc(50% - 130px);
    left: calc(50% + 358px);
    width: 202px;
    height: 260px;
    object-fit: cover;
  }
  
  .about-us .rectangle-8 {
    position: absolute;
    top: calc(50% - 2262px);
    left: calc(50% - 2080px);
    width: 429px;
    height: 260px;
    object-fit: cover;
  }
  
  .about-us .rectangle-9 {
    position: absolute;
    top: calc(50% - 2262px);
    left: calc(50% - 1622px);
    width: 429px;
    height: 260px;
    object-fit: cover;
  }
  
  .about-us .navigation-wrapper {
    display: flex;
    flex-direction: column;
    width: 1920px;
    align-items: center;
    gap: 10px;
    padding: 10px;
    position: fixed;
    top: -15px;
    left: calc(50% - 960px);
  }
  
  .about-us .navigation {
    position: relative;
    width: 1440px;
    height: 97px;
    background-color: #ffffff;
    box-shadow: 0px 4px 15px #00000026;
  }
  
  .about-us .navbar {
    position: absolute;
    top: 37px;
    left: 817px;
    width: 579px;
    height: 22px;
    display: flex;
  }
  
  .about-us .text-wrapper-37 {
    width: 56px;
    height: 22px;
    opacity: 0.8;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #4c4c4c;
    font-size: 18px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .about-us .text-wrapper-38 {
    width: 93px;
    margin-left: 50px;
    height: 22px;
    opacity: 0.8;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #4c4c4c;
    font-size: 18px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .about-us .text-wrapper-39 {
    width: 95px;
    height: 22px;
    margin-left: 50px;
    opacity: 0.8;
    font-family: "Inter-ExtraBold", Helvetica;
    font-weight: 800;
    color: #0046ff;
    font-size: 18px;
    letter-spacing: 0;
    line-height: normal;
    text-decoration: underline;
  }
  
  .about-us .text-wrapper-40 {
    width: 90px;
    height: 22px;
    margin-left: 49px;
    opacity: 0.8;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #4c4c4c;
    font-size: 18px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .about-us .text-wrapper-41 {
    width: 36px;
    margin-left: 50px;
    height: 22px;
    opacity: 0.8;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #4c4c4c;
    font-size: 18px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .about-us .rectangle-10 {
    position: absolute;
    top: 28px;
    left: 50px;
    width: 195px;
    height: 40px;
    object-fit: cover;
  }

  .slider-container {
    position: relative;
    width: 80%;
    display: flex;
    align-items: center;
  }
  
  .slider {
    overflow: hidden;
    width: 100%;
    margin-top: 30px;
    margin-left: 20px;
  }
  
  .slider-track {
    display: flex;
    transition: transform 0.5s ease;
  }
  
  .slider-track img {
    width: 300px;
    flex-shrink: 0;
    margin-right: 10px;
    border-radius: 30px;
  }
  
  .slider-track img:last-child {
    margin-right: 0;
  }
  
  .nav {
    background: #0046FF;
    color: #fff;
    border: none;
    font-size: 30px;
    padding: 10px 15px;
    margin-left: 50px;
    cursor: pointer;
    opacity: 1;
  }
  
  .nav:hover {
    opacity: 1;
  }

  .about-us .dot-slideshow {
    text-align: center;
    position: absolute;
    align-items: center;
    left: 610px;
    top: 270px;
  }
  
  /* The dots/bullets/indicators */
  .about-us .dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }
  
  .about-us .dot.active {
    background-color: #2F7EFF;
  }
  
  /* Contact */
  .contact {
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    height: 3692px;
    background-color: #fdfdfd;
    overflow: hidden;
  }

  
  .contact .map {
    position: relative;
    top: 1774px;
    transform: translateX(-45%);
    width: 1228px;
    height: 654px;
    display: flex;
    gap: 67px;
  }

  .contact .map iframe.google-map {
    width: 100%;
    max-width: 600px;
    height: 600px;
    border-radius: 30px;
    margin-top: 35px;
  }
  
  
  .contact .img {
    width: 654px;
    height: 654px;
  }
  
  .contact .frame {
    display: flex;
    margin-top: 167px;
    width: 507px;
    height: 311px;
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    gap: 31px;
  }
  
  .contact .text-wrapper {
    position: relative;
    align-self: stretch;
    margin-top: -1px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #2f7eff;
    font-size: 48px;
    letter-spacing: 0;
    line-height: 65px;
  }
  
  .contact .div {
    position: relative;
    align-self: stretch;
    height: 44px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #636364;
    font-size: 24px;
    letter-spacing: 0;
    line-height: 65px;
    white-space: nowrap;
  }
  
  .contact .group-2 {
    position: relative;
    width: 503px;
    height: 140px;
  }
  
  .contact .text-wrapper-2 {
    position: absolute;
    top: 26px;
    left: 79px;
    width: 327px;
    font-family: "Inter-SemiBold", Helvetica;
    font-weight: 600;
    color: #2f7eff;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 30px;
    text-decoration: underline;
    white-space: nowrap;
  }
  
  .contact .text-wrapper-3 {
    position: absolute;
    top: 0;
    left: 79px;
    width: 90px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #48484a;
    font-size: 20px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .contact .group-3 {
    position: absolute;
    top: 77px;
    left: 80px;
    width: 423px;
    height: 54px;
  }
  
  .contact .text-wrapper-4 {
    position: absolute;
    top: 26px;
    left: 0;
    width: 419px;
    font-family: "Inter-SemiBold", Helvetica;
    font-weight: 600;
    color: #2f7eff;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 30px;
    text-decoration: underline;
    white-space: nowrap;
  }
  
  .contact .text-wrapper-5 {
    position: absolute;
    top: 0;
    left: 0;
    width: 188px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #48484a;
    font-size: 20px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .contact .vector {
    position: absolute;
    width: 10.54%;
    height: 34.29%;
    top: 2.14%;
    left: 0;
  }
  
  .contact .location-map{
    position: absolute;
    top: 83px;
    left: 0;
    width: 57px;
    height: 57px;
    aspect-ratio: 1;
  }
  
  .contact .streamline-logos {
    position: absolute;
    top: 79px;
    left: 0;
    width: 49px;
    height: 49px;
    aspect-ratio: 1;
  }
  
  .contact .contact-hero-section {
    position: absolute;
    top: 82px;
    width: 100%;
    height: 745px;
  }
  
  .contact .contact-hero {
    position: absolute;
    top: 0;
    width: 100%;
    height: 745px;
    object-fit: cover;
  }
  
  .contact .rectangle {
    position: absolute;
    top: calc(50% - 354px);
    width: 100%;
    height: 727px;
    filter: blur(1.5px);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 13%, rgba(0, 0, 0, 1) 100%);
  }
  
  .contact .frame-2 {
    display: flex;
    flex-direction: column;
    width: 534px;
    align-items: flex-start;
    gap: 3px;
    position: absolute;
    top: 584px;
    left: 60px;
  }
  
  .contact .div-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0px 10px;
    position: relative;
    flex: 0 0 auto;
  }
  
  .contact .text-wrapper-6 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #ffffff;
    font-size: 48px;
    letter-spacing: 0;
    line-height: normal;
    top: -3px;
  }
  
  .contact .we-d-love-to-hear-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    top: -7px;
    left: -10px;
  }
  
  .contact .we-d-love-to-hear {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #f6f1f1;
    font-size: 24px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .contact .enrol-now-button-wrapper {
    display: flex;
    flex-direction: column;
    width: 215px;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    position: relative;
    flex: 0 0 auto;
    top: -10px;
  }
  
  .contact .enrol-now-button {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 76px;
    border-radius: 40px;
    border: 2.5px solid;
    border-color: #ffffff;
    background-color: transparent;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
  }
  
  .contact .enrol-now-button:hover {
    background-color: #0046ff;
    border-color: #0046ff;
  }
  
  .contact .text-wrapper-7 {
    position: absolute;
    width: 72.58%;
    height: 40.3%;
    top: 32%;
    left: 15%;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #ffffff;
    font-size: 22px;
    letter-spacing: 0;
    line-height: normal;
    transition: color 0.3s ease;
  }
  
  .contact .enrol-now-button:hover .text-wrapper-7 {
    color: #ffffff;
  }
  
  .contact .group-4 {
    position: absolute;
    top: 947px;
    left: 17%;
    width: 1116px;
    height: 597px;
    display: flex;
    gap: 90px;
  }
  
  .contact .frame-wrapper {
    margin-top: 108px;
    width: 454px;
    display: flex;
  }
  
  .contact .frame-3 {
    display: flex;
    width: 454px;
    height: 398px;
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
  }
  
  .contact .group-5 {
    position: relative;
    width: 454px;
    height: 116px;
    background-color: #56a4ff;
    border-radius: 40px;
  }
  
  .contact .frame-4 {
    display: flex;
    flex-direction: column;
    width: 251px;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    position: relative;
    top: 18px;
    left: 35px;
  }
  
  .contact .frame-5 {
    display: flex;
    align-items: center;
    gap: 40px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
  }
  
  .contact .fluent-call {
    position: relative;
    width: 41px;
    height: 54.4px;
    aspect-ratio: 1;
  }
  
  .contact .frame-6 {
    display: flex;
    flex-direction: column;
    width: 150px;
    align-items: flex-start;
    gap: 3px;
    position: relative;
  }
  
  .contact .text-wrapper-8 {
    position: relative;
    align-self: stretch;
    margin-top: -1px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #f2f2f2;
    font-size: 24px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .contact .text-wrapper-9 {
    position: relative;
    align-self: stretch;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #f2f2f2;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 30px;
  }
  
  .contact .frame-7 {
    display: flex;
    flex-direction: column;
    height: 116px;
    align-items: flex-start;
    gap: 10px;
    padding: 27px 35px;
    position: relative;
    align-self: stretch;
    width: 100%;
  }
  
  .contact .group-6 {
    position: absolute;
    top: 0;
    left: 0;
    width: 454px;
    height: 116px;
    background-color: #2f7eff;
    border-radius: 40px;
  }
  
  .contact .frame-8 {
    display: inline-flex;
    align-items: center;
    gap: 38px;
    position: relative;
    flex: 0 0 auto;
  }
  
  .contact .vector-2 {
    position: relative;
    width: 53px;
    height: 42px;
  }
  
  .contact .frame-9 {
    display: flex;
    flex-direction: column;
    width: 255px;
    align-items: flex-start;
    gap: 3px;
    position: relative;
  }
  
  .contact .group-wrapper {
    position: relative;
    width: 454px;
    height: 116px;
  }
  
  .contact .group-7 {
    position: relative;
    width: 458px;
    height: 116px;
  }
  
  .contact .text-wrapper-10 {
    position: absolute;
    top: 59px;
    left: 126px;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #2f7eff;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 30px;
    white-space: nowrap;
  }
  
  .contact .text-wrapper-11 {
    position: absolute;
    top: 27px;
    left: 126px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #2f7eff;
    font-size: 24px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .contact .frame-10 {
    display: flex;
    flex-direction: column;
    width: 454px;
    height: 116px;
    align-items: flex-start;
    gap: 10px;
    padding: 27px 40px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #0c51ff;
    border-radius: 40px;
  }
  
  .contact .frame-11 {
    display: flex;
    width: 258px;
    align-items: center;
    justify-content: space-between;
    position: relative;
    flex: 0 0 auto;
  }
  
  .contact .tdesign-location {
    position: relative;
    width: 52px;
    height: 55px;
    aspect-ratio: 1;
  }
  
  .contact .frame-12 {
    display: flex;
    flex-direction: column;
    width: 172px;
    align-items: flex-start;
    gap: 3px;
    position: relative;
  }
  
  .contact .group-8 {
    width: 572px;
    height: 597px;
    position: relative;
  }
  
  .contact .frame-13 {
    display: flex;
    flex-direction: column;
    width: 572px;
    height: 597px;
    align-items: flex-start;
    gap: 15px;
    padding: 22px 31px;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: 4px 4px 15px #00000026;
    border-radius: 40px;
  }
  
  .contact .rectangle-2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 572px;
    height: 597px;
    background-color: #f5f5f5;
    border-radius: 40px;
  }
  
  .contact .frame-14 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    position: relative;
    flex: 0 0 auto;
  }
  
  .contact .text-wrapper-12 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #2f7eff;
    font-size: 36px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .contact .frame-15 {
    display: flex;
    flex-direction: column;
    width: 510px;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    position: relative;
    flex: 0 0 auto;
  }
  
  .contact .frame-16 {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 21px 16px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
  }
  
  .contact .group-wrapper-2 {
    position: relative;
    width: 237px;
    height: 55px;
  }
  
  .contact .group-9 {
    position: relative;
    width: 239px;
    height: 55px;
  }
  
  .contact .rectangle-3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 237px;
    height: 55px;
    background-color: #ffffff;
    border-radius: 40px;
  }

  .contact, input, textarea {
    border-style: none;
  }

  input[type="text"], textarea{
    padding: 21px; /* Applies 10px padding on all sides */
  }
  
  .contact .text-wrapper-13 {
    /* top: 18px;
    left: 21px; */
    position: absolute;
    font-family: "Inter-SemiBold", Helvetica;
    font-weight: 600;
    color: #0e0e0e;
    font-size: 16px;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  
  .contact .form-message {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 198px;
    background-color: #ffffff;
    border-radius: 30px;
  }
  
  .contact .text-wrapper-14 {
    font-family: "Inter-SemiBold", Helvetica;
    font-weight: 600;
    color: #0e0e0e;
    font-size: 16px;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  
  .contact .submit-button-wrapper {
    all: unset;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 181px;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    position: absolute;
    top: 492px;
    left: 346px;
  }
  
  .contact .submit-button {
    all: unset;
    box-sizing: border-box;
    display: flex;
    height: 64px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px 82px;
    position: relative;
    align-self: stretch;
    width: 57px;
    height: 16px;
    background-color: #0046ff;
    border-radius: 40px;
    top: 505px;
    left: 365px;
    border: 2.5px solid #0046ff;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
  }
  
  .contact .submit-button:hover {
    background-color: #fdfdfd;
    border-color: #0046ff;
  }
  
  .contact .text-wrapper-15 {
    position: relative;
    width: fit-content;
    margin-top: -7.5px;
    margin-bottom: -5.5px;
    margin-left: -18.5px;
    margin-right: -18.5px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #fdfdfd;
    font-size: 24px;
    letter-spacing: 0;
    line-height: normal;
    transition: color 0.3s ease;
  }
  
  .contact .submit-button:hover .text-wrapper-15 {
    color: #0046ff;
  }
  
  .contact .frame-17 {
    display: flex;
    flex-direction: column;
    width: 1013px;
    align-items: center;
    gap: 40px;
    position: absolute;
    top: 2648px;
    left: calc(50% - 506px);
  }
  
  .contact .ready-to-become-a {
    position: relative;
    align-self: stretch;
    margin-top: -1px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #48484a;
    font-size: 52px;
    text-align: center;
    letter-spacing: 0;
    line-height: 65px;
  }
  
  .contact .p {
    position: relative;
    align-self: stretch;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #48484a;
    font-size: 32px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .contact .component {
    position: absolute;
    top: 3262px;
    width: 100%;
    height: 430px;
    background-color: #0a225c;
  }
  
  .contact .footer {
    position: absolute;
    width: 105.97%;
    height: 100%;
    top: 0;
    left: -3.12%;
    background-color: #0a225c;
  }
  
  .contact .group-10 {
    position: absolute;
    top: 68px;
    left: calc(50% - 676px);
    width: 1349px;
    height: 294px;
  }
  
  .contact .frame-18 {
    display: flex;
    flex-direction: column;
    width: 139px;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    top: 8px;
    left: calc(50% + 536px);
  }
  
  .contact .text-wrapper-16 {
    position: relative;
    align-self: stretch;
    height: 30px;
    margin-top: -1px;
    font-family: "Inter-SemiBold", Helvetica;
    font-weight: 600;
    color: #fdfdfd;
    font-size: 24px;
    letter-spacing: 0;
    line-height: 30px;
    white-space: nowrap;
  }
  
  .contact .error-form {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #e1f1fd;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 40px;
  }
  
  .contact .frame-19 {
    display: flex;
    flex-direction: column;
    width: 152px;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    top: 8px;
    left: calc(50% + 123px);
  }
  
  .contact .frame-20 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    position: relative;
    flex: 0 0 auto;
  }
  
  .contact .quick-links {
    position: relative;
    width: 80px;
    height: 160px;
  }
  
  .contact .text-wrapper-17 {
    width: 63.75%;
    height: 25%;
    top: 0;
    position: absolute;
    left: 0;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #e1f1fd;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 40px;
    white-space: nowrap;
  }
  
  .contact .text-wrapper-18 {
    width: 92.5%;
    height: 25%;
    top: 25%;
    position: absolute;
    left: 0;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #e1f1fd;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 40px;
    white-space: nowrap;
  }
  
  .contact .text-wrapper-19 {
    position: absolute;
    width: 100%;
    height: 25%;
    top: 50%;
    left: 0;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #e1f1fd;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 40px;
    white-space: nowrap;
  }
  
  .contact .text-wrapper-20 {
    width: 86.25%;
    height: 25%;
    top: 75%;
    position: absolute;
    left: 0;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #e1f1fd;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 40px;
    white-space: nowrap;
  }
  
  .contact .frame-21 {
    display: flex;
    flex-direction: column;
    width: 159px;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    top: 8px;
    left: calc(50% + 330px);
  }
  
  .contact .main-pages {
    position: relative;
    width: 74px;
    height: 80px;
  }
  
  .contact .text-wrapper-21 {
    width: 100%;
    height: 50%;
    top: 0;
    position: absolute;
    left: 0;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #e1f1fd;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 40px;
    white-space: nowrap;
  }
  
  .contact .text-wrapper-22 {
    width: 93.24%;
    height: 50%;
    top: 50%;
    position: absolute;
    left: 0;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #e1f1fd;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 40px;
    white-space: nowrap;
  }
  
  .contact .frame-22 {
    display: flex;
    flex-direction: column;
    width: 446px;
    align-items: flex-start;
    gap: 10px;
    position: absolute;
    top: 0;
    left: calc(50% - 674px);
  }
  
  .contact .frame-23 {
    display: inline-flex;
    align-items: center;
    position: relative;
    flex: 0 0 auto;
  }
  
  .contact .sla-logo {
    position: relative;
    width: 61px;
    height: 38px;
    aspect-ratio: 1.59;
    object-fit: cover;
  }
  
  .contact .group-11 {
    position: relative;
    width: 159px;
    height: 44px;
  }
  
  .contact .group-12 {
    position: relative;
    width: 163px;
    height: 44px;
  }
  
  .contact .text-wrapper-23 {
    position: absolute;
    top: 26px;
    left: 3px;
    font-family: "Poppins-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 12px;
    letter-spacing: 0.24px;
    line-height: normal;
  }
  
  .contact .swim-life {
    position: absolute;
    top: 0;
    left: 0;
    width: 159px;
    font-family: "Poppins-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 26px;
    line-height: normal;
  }
  
  .contact .span {
    letter-spacing: 0.41px;
  }

  .contact .group-13 {
    position: relative;
    width: 446.3px;
    height: 240px;
  }
  
  .contact .TEL-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .contact .TEL {
    position: relative;
    width: 426.3px;
    margin-top: -1px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 400;
    color: #fdfdfd;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 30px;
  }
  
  .contact .text-wrapper-27 {
    font-weight: 700;
  }
  
  .contact .text-wrapper-29 {
    font-family: "Inter-Regular", Helvetica;
  }
  
  .contact .frame-24 {
    display: flex;
    flex-wrap: wrap;
    width: 259px;
    align-items: flex-end;
    gap: 20px 10px;
    position: absolute;
    top: 165px;
    left: 10px;
  }
  
  .contact .text-wrapper-30 {
    position: relative;
    width: 259.35px;
    height: 15px;
    margin-top: -1px;
    font-family: "Inter-SemiBold", Helvetica;
    font-weight: 600;
    color: #fdfdfd;
    font-size: 20px;
    letter-spacing: 0;
    line-height: 20px;
    white-space: nowrap;
  }
  
  .contact .img-wrapper {
    position: relative;
    width: 42px;
    height: 40px;
    border-radius: 7px;
    border: 2px solid;
    border-color: #fdfdfd;
  }
  
  .contact .eva-facebook-fill {
    position: absolute;
    width: 62.5%;
    top: 5px;
    left: 20%;
    height: 26px;
    aspect-ratio: 1;
  }
  
  .contact .basil-instagram {
    position: absolute;
    width: 65%;
    top: 5px;
    left: 19%;
    height: 27px;
    aspect-ratio: 1;
  }
  
  .contact .book-a-lesson-button-wrapper {
    display: flex;
    flex-direction: column;
    width: 362px;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    position: absolute;
    top: 2956px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .contact .book-a-lesson-button {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 136px;
  }
  
  .contact .footer-CTA-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
  }

  .contact .footer-CTA {
    flex: 1;
    width: 342px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 70px;
    overflow: hidden;
    border: 5px solid;
    border-color: #0046ff;
  }
  
  .contact .BOOK-a-LESSON {
    margin-top: 2px;
    height: 39px;
    margin-left: 20px;
    width: 270px;
    font-family: "Inter-ExtraBold", Helvetica;
    font-weight: 800;
    color: #0046ff;
    font-size: 32px;
    line-height: normal;
  }

  .contact .footer-CTA {
    flex: 1;
    width: 342px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 70px;
    overflow: hidden;
    border: 5px solid #0046ff;
    background-color: transparent;
    transition: background-color 0.3s ease, transform 0.2s ease;
  }
  
  /* TEXT DEFAULT */
  .contact .BOOK-a-LESSON {
    font-family: "Inter-ExtraBold", Helvetica;
    font-weight: 800;
    color: #0046ff;
    font-size: 32px;
    transition: color 0.3s ease;
  }
  
  /* 🔵 HOVER STATE */
  .contact .footer-CTA:hover {
    background-color: #0046ff;
    cursor: pointer;
    transform: translateY(-2px); /* subtle lift (optional) */
  }
  
  .contact .footer-CTA:hover .BOOK-a-LESSON {
    color: #ffffff;
  }
  
  .contact .text-wrapper-31 {
    letter-spacing: 0;
  }
  
  .contact .text-wrapper-32 {
    letter-spacing: 0.51px;
  }
  
  .contact .navigation-wrapper {
    position: fixed;
    top: -15px;
    left: calc(50% - 960px);
    width: 1920px;
    height: 117px;
    display: flex;
  }
  
  .contact .navigation {
    margin-top: 10px;
    width: 1440px;
    height: 97px;
    margin-left: 240px;
    position: relative;
    background-color: #ffffff;
    box-shadow: 0px 4px 15px #00000026;
  }
  
  .contact .navbar {
    position: absolute;
    top: 37px;
    left: 817px;
    width: 579px;
    height: 22px;
    display: flex;
  }
  
  .contact .text-wrapper-33 {
    width: 56px;
    height: 22px;
    opacity: 0.8;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #4c4c4c;
    font-size: 18px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .contact .text-wrapper-34 {
    width: 93px;
    margin-left: 50px;
    height: 22px;
    opacity: 0.8;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #4c4c4c;
    font-size: 18px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .contact .text-wrapper-35 {
    width: 94px;
    height: 22px;
    margin-left: 50px;
    opacity: 0.8;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #4c4c4c;
    font-size: 18px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .contact .text-wrapper-36 {
    width: 91px;
    height: 22px;
    margin-left: 50px;
    opacity: 0.8;
    font-family: "Inter-ExtraBold", Helvetica;
    font-weight: 800;
    color: #0046ff;
    font-size: 18px;
    letter-spacing: 0;
    line-height: normal;
    text-decoration: underline;
  }
  
  .contact .text-wrapper-37 {
    width: 36px;
    margin-left: 49px;
    height: 22px;
    opacity: 0.8;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #4c4c4c;
    font-size: 18px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .contact .rectangle-4 {
    position: absolute;
    top: 28px;
    left: 50px;
    width: 195px;
    height: 40px;
    object-fit: cover;
  }


  /* FAQ */
  .FAQ {
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    background-color: #fdfdfd;
    padding-top: 95px;
    overflow: visible;
  }
  
  .FAQ .contact-hero-section {
    /* position: absolute; */
    /* top: calc(50% - 1398px); */
    width: 100%;
    height: 733px;
  }
  
  .FAQ .contact-hero {
    /* position: absolute; */
    /* top: calc(50% - 366px); */
    /* left: calc(50% - 714px); */
    width: 100%;
    height: 733px;
    object-fit: cover;
  }
  
  .FAQ .rectangle {
    position: absolute;
    top: 102px;
    left: 0;
    width: 100%;
    height: 733px;
    filter: blur(1.5px);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 13%, rgba(0, 0, 0, 1) 100%);
  }
  
  .FAQ .frame {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    position: absolute;
    top: 584px;
    left: 60px;
  }
  
  .FAQ .div-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0px 10px;
    position: relative;
    flex: 0 0 auto;
  }
  
  .FAQ .text-wrapper {
    width: fit-content;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #ffffff;
    font-size: 48px;
    line-height: normal;
    position: relative;
    margin-top: -1px;
    letter-spacing: 0;
    top: -5px;
  }
  
  .FAQ .before-you-ask {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    position: relative;
    flex: 0 0 auto;
    top: -9px;
    left: 3px;
  }
  
  .FAQ .p {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #f6f1f1;
    font-size: 24px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .FAQ .enrol-now-button-wrapper {
    display: flex;
    flex-direction: column;
    width: 215px;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    position: relative;
    flex: 0 0 auto;
    top: -10px;
  }
  
  .FAQ .enrol-now-button {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 76px;
    border-radius: 40px;
    border: 2.5px solid;
    border-color: #ffffff;
    background-color: transparent;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
  }
  
  .FAQ .enrol-now-button:hover {
    background-color: #0046ff;
    border-color: #0046ff;
  }
  
  .FAQ .text-wrapper-2 {
    position: absolute;
    width: 72.58%;
    height: 40.3%;
    top: 32%;
    left: 15%;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #ffffff;
    font-size: 22px;
    letter-spacing: 0;
    line-height: normal;
    transition: color 0.3s ease;
  }
  
  .FAQ .enrol-now-button:hover .text-wrapper-2 {
    color: #ffffff;
  }
  
  .FAQ .frame-2 {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 2034px;
    align-items: flex-start;
    gap: 10px;
    padding: 24px 70px;
    position: absolute;
    top: 950px;
    left: 0;
  }
  
  .FAQ .faq-auto-layout {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2034px;
  }
  
  .FAQ .frame-wrapper {
    width: 100%;
    height: 2034px;
    display: flex;
  }
  
  .FAQ .frame-3 {
    display: flex;
    width: 100%;
    height: 2904px;
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    gap: 170px;
  }
  
  .FAQ .frame-4 {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 1934px;
    align-items: flex-end;
    gap: 170px;
    position: relative;
  }
  
  .FAQ .frame-5 {
    display: flex;
    flex-direction: column;
    width: 762px;
    align-items: flex-start;
    gap: 26px;
    position: relative;
    flex: 0 0 auto;
  }
  
  .FAQ .faq {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 92px;
    background-color: #f5f5f5;
    border-radius: 40px;
  }
  
  .FAQ .faq-collapsed {
    /* position: absolute; */
    /* top: 32px; */
    /* left: 35px; */
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #48484a;
    font-size: 24px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .FAQ .vector {
    position: absolute;
    top: 32px;
    left: 667px;
    width: 29px;
    height: 29px;
  }



  .accordion {
    background-color: #f5f5f5;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 70%;
    height: 65px;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
    border-radius: 40px;
    margin: 0px 0px 10px 20%;
    max-height: 0;
  }
  
  .actv, .accordion:hover {
    background-color: blue;
    color: white;
  }
  
  .accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
  }
  
  .actv:after {
    content: "\2212";
  }
  
  .panel {
    padding: 0 18px;
    background-color: blue;
    color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    width: 60%;
    margin: 0px 0px 25px 20%;
  }

  .title {
    background-color: #f5f5f5;
    /* color: #444; */
    cursor: pointer;
    padding: 30px;
    padding-left: 30px;
    min-height: 70px;
    width: 725px;
    max-width: 670%;
    border: none;
    text-align: left;
    outline: none;
    /* font-size: 20px; */
    transition: 0.4s;
    border-radius: 40px;
    margin: 0px 0px 25px 5%;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #48484a;
    font-size: 24px;
    letter-spacing: 0;
    line-height: normal;
  }

  .faq-ques {
    color: white;
    font-size: 24px;
    letter-spacing: 0;
    line-height: normal;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    transition: 0.4s;
    border: none;
    text-align: left;
    outline: none;
  }

  .faq-ex-col {
    float: right;
    font-size: 30px;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    line-height: 1;
  }

  .faq-space {
    margin-top: 15px;
  }

  .faq-collapsed-content {
    color: white;
    font-size: 20px;
    letter-spacing: 0;
    line-height: normal;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    transition: 0.4s;
    border: none;
    text-align: left;
    outline: none;
  }

  .title-content {
    background-color: blue;
    color: white;
    cursor: pointer;
    padding: 30px;
    padding-left: 30px;
    width: 725px;
    max-width: 670%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 20px;
    transition: 0.4s;
    border-radius: 40px;
    margin: 0px 0px 25px 5%;
  }

  .title p::after {
    content: '\002B';
  }

  .title-content p::after {
    content: "\2212";
  }

  .title:hover{
    background-color: blue;
    color: white;
  }

  .on {
    display: block;
  }

  .off {
    display: none;
  }

  
  .FAQ .group-wrapper {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 464px;
    display: flex;
    justify-content: center;
  }
  
  .FAQ .group {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 1035px;
    max-width: 90%;
    height: 464px;
    display: flex;
    flex-direction: column;
    margin-left: 0;
  }
  
  .FAQ .ready-to-become-a-wrapper {
    width: 1033px;
    height: 150px;
    display: flex;
  }
  
  .FAQ .ready-to-become-a {
    margin-top: 10px;
    width: 100%;
    height: 130px;
    margin-left: 0;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #48484a;
    font-size: 52px;
    text-align: center;
    letter-spacing: 0;
    line-height: 65px;
  }
  
  .FAQ .text-wrapper-4 {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 540px;
    height: 39px;
    margin-top: 40px;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #48484a;
    font-size: 32px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .FAQ .book-a-lesson-button-wrapper {
    display: flex;
    flex-direction: column;
    width: 362px;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    position: absolute;
    top: 330px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .FAQ .book-a-lesson-button {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 136px;
  }
  
  .FAQ .footer-CTA-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
  }

  .FAQ .footer-CTA {
    flex: 1;
    width: 342px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 70px;
    overflow: hidden;
    border: 5px solid;
    border-color: #0046ff;
  }
  
  .FAQ .BOOK-a-LESSON {
    margin-top: 2px;
    height: 39px;
    margin-left: 20px;
    width: 270px;
    font-family: "Inter-ExtraBold", Helvetica;
    font-weight: 800;
    color: #0046ff;
    font-size: 32px;
    line-height: normal;
  }

  .FAQ .footer-CTA {
    flex: 1;
    width: 342px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 70px;
    overflow: hidden;
    border: 5px solid #0046ff;
    background-color: transparent;
    transition: background-color 0.3s ease, transform 0.2s ease;
  }
  
  /* TEXT DEFAULT */
  .FAQ .BOOK-a-LESSON {
    font-family: "Inter-ExtraBold", Helvetica;
    font-weight: 800;
    color: #0046ff;
    font-size: 32px;
    transition: color 0.3s ease;
  }
  
  /* 🔵 HOVER STATE */
  .FAQ .footer-CTA:hover {
    background-color: #0046ff;
    cursor: pointer;
    transform: translateY(-2px); /* subtle lift (optional) */
  }
  
  .FAQ .footer-CTA:hover .BOOK-a-LESSON {
    color: #ffffff;
  }
  
  .FAQ .span {
    letter-spacing: 0;
  }
  
  .FAQ .text-wrapper-5 {
    letter-spacing: 0.51px;
  }
  
  .FAQ .frame-6 {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 430px;
    margin-bottom: -100px;
  }
  
  .FAQ .component-wrapper {
    /* width: 1442px; */
    display: flex;
  }
  
  .FAQ .component {
    width: 100%;
    height: 430px;
    margin-left: 0;
    position: relative;
    background-color: #0a225c;
  }
  
  .FAQ .footer {
    position: absolute;
    /* width: 105.97%; */
    height: 100%;
    top: 0;
    left: 0;
    background-color: #0a225c;
  }
  
  .FAQ .group-2 {
    position: absolute;
    top: 68px;
    left: 50%;
    transform: translateX(-50%);
    width: 1349px;
    max-width: 90%;
    height: 294px;
  }
  
  .FAQ .frame-7 {
    display: flex;
    flex-direction: column;
    width: 139px;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    top: 8px;
    left: calc(50% + 536px);
  }
  
  .FAQ .text-wrapper-6 {
    position: relative;
    align-self: stretch;
    height: 30px;
    margin-top: -1px;
    font-family: "Inter-SemiBold", Helvetica;
    font-weight: 600;
    color: #fdfdfd;
    font-size: 24px;
    letter-spacing: 0;
    line-height: 30px;
    white-space: nowrap;
  }
  
  .FAQ .error-form {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #e1f1fd;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 40px;
  }
  
  .FAQ .frame-8 {
    display: flex;
    flex-direction: column;
    width: 152px;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    top: 8px;
    left: calc(50% + 123px);
  }
  
  .FAQ .frame-9 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    position: relative;
    flex: 0 0 auto;
  }
  
  .FAQ .quick-links {
    position: relative;
    width: 80px;
    height: 160px;
  }
  
  .FAQ .text-wrapper-7 {
    width: 63.75%;
    height: 25%;
    top: 0;
    position: absolute;
    left: 0;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #e1f1fd;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 40px;
    white-space: nowrap;
  }
  
  .FAQ .text-wrapper-8 {
    width: 92.5%;
    height: 25%;
    top: 25%;
    position: absolute;
    left: 0;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #e1f1fd;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 40px;
    white-space: nowrap;
  }
  
  .FAQ .text-wrapper-9 {
    position: absolute;
    width: 100%;
    height: 25%;
    top: 50%;
    left: 0;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #e1f1fd;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 40px;
    white-space: nowrap;
  }
  
  .FAQ .text-wrapper-10 {
    width: 86.25%;
    height: 25%;
    top: 75%;
    position: absolute;
    left: 0;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #e1f1fd;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 40px;
    white-space: nowrap;
  }
  
  .FAQ .frame-10 {
    display: flex;
    flex-direction: column;
    width: 159px;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    top: 8px;
    left: calc(50% + 330px);
  }
  
  .FAQ .main-pages {
    position: relative;
    width: 74px;
    height: 80px;
  }
  
  .FAQ .text-wrapper-11 {
    width: 100%;
    height: 50%;
    top: 0;
    position: absolute;
    left: 0;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #e1f1fd;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 40px;
    white-space: nowrap;
  }
  
  .FAQ .text-wrapper-12 {
    width: 93.24%;
    height: 50%;
    top: 50%;
    position: absolute;
    left: 0;
    font-family: "Inter-Medium", Helvetica;
    font-weight: 500;
    color: #e1f1fd;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 40px;
    white-space: nowrap;
  }
  
  .FAQ .frame-11 {
    display: flex;
    flex-direction: column;
    width: 446px;
    align-items: flex-start;
    gap: 10px;
    position: absolute;
    top: 0;
    left: calc(50% - 674px);
  }
  
  .FAQ .frame-12 {
    display: inline-flex;
    align-items: center;
    position: relative;
    flex: 0 0 auto;
  }
  
  .FAQ .sla-logo {
    position: relative;
    width: 61px;
    height: 38px;
    aspect-ratio: 1.59;
    object-fit: cover;
  }
  
  .FAQ .group-3 {
    position: relative;
    width: 159px;
    height: 44px;
  }
  
  .FAQ .group-4 {
    position: relative;
    width: 163px;
    height: 44px;
  }
  
  .FAQ .text-wrapper-13 {
    position: absolute;
    top: 26px;
    left: 3px;
    font-family: "Poppins-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 12px;
    letter-spacing: 0.24px;
    line-height: normal;
  }
  
  .FAQ .swim-life {
    position: absolute;
    top: 0;
    left: 0;
    width: 159px;
    font-family: "Poppins-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 26px;
    line-height: normal;
  }
  
  .FAQ .text-wrapper-14 {
    letter-spacing: 0.41px;
  }
  
  .FAQ .group-5 {
    position: relative;
    width: 446.3px;
    height: 240px;
  }
  
  .FAQ .TEL-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .FAQ .TEL {
    position: relative;
    width: 426.3px;
    margin-top: -1px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 400;
    color: #fdfdfd;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 30px;
  }
  
  .FAQ .text-wrapper-18 {
    font-weight: 700;
  }
  
  .FAQ .text-wrapper-20 {
    font-family: "Inter-Regular", Helvetica;
  }
  
  .FAQ .frame-13 {
    display: flex;
    flex-wrap: wrap;
    width: 259px;
    align-items: flex-end;
    gap: 20px 10px;
    position: absolute;
    top: 165px;
    left: 10px;
  }
  
  .FAQ .text-wrapper-21 {
    position: relative;
    width: 259.35px;
    height: 15px;
    margin-top: -1px;
    font-family: "Inter-SemiBold", Helvetica;
    font-weight: 600;
    color: #fdfdfd;
    font-size: 20px;
    letter-spacing: 0;
    line-height: 20px;
    white-space: nowrap;
  }
  
  .FAQ .img-wrapper {
    position: relative;
    width: 42px;
    height: 40px;
    border-radius: 7px;
    border: 2px solid;
    border-color: #fdfdfd;
  }
  
  .FAQ .eva-facebook-fill {
    position: absolute;
    width: 62.5%;
    top: 5px;
    left: 20%;
    height: 26px;
    aspect-ratio: 1;
  }
  
  .FAQ .basil-instagram {
    position: absolute;
    width: 65%;
    top: 5px;
    left: 19%;
    height: 27px;
    aspect-ratio: 1;
  }
  
  .FAQ .frame-14 {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 800px;
  }

  .FAQ .faq-section {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 10px;
    position: relative;
    padding-left: 5%;
  }

  .FAQ .white-banner {
    margin-top: 180px;
  }

  .FAQ .faq-header {
    display: flex;
    flex-direction: column;
    padding-left: 10%;
    width: 40%;
  }

  .FAQ .faq-title {
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #2f7eff;
    font-size: 52px;
    letter-spacing: 0;
    line-height: normal;
  }

  .FAQ .faq-desc {
    font-family: "Inter-SemiBold", Helvetica;
    font-weight: 600;
    color: #474749;
    font-size: 22px;
    letter-spacing: 0;
    line-height: normal;
    padding-top: 50px;
    max-width: 300px;
  }




  

















  
  .FAQ .questions-wrapper {
    display: flex;
    flex-direction: column;
    width: 387px;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    position: relative;
    flex: 0 0 auto;
  }
  
  .FAQ .questions {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 162px;
  }
  
  .FAQ .group-6 {
    position: relative;
    height: 100%;
    left: calc(50% - 184px);
    width: 371px;
  }
  
  .FAQ .text-wrapper-22 {
    position: absolute;
    height: 38.89%;
    top: 0;
    left: calc(50% - 186px);
    width: 355px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #2f7eff;
    font-size: 52px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .FAQ .text-wrapper-23 {
    position: absolute;
    height: 33.33%;
    top: 66.67%;
    left: calc(50% - 186px);
    width: 367px;
    font-family: "Inter-SemiBold", Helvetica;
    font-weight: 600;
    color: #474749;
    font-size: 22px;
    letter-spacing: 0;
    line-height: normal;
  }

  /* RESPONSIVE MEDIA QUERIES */

/* For very large screens (above 1920px) */
@media screen and (min-width: 1921px) {
  .home, .program, .about-us, .contact, .FAQ {
    max-width: 1920px;
    margin: 0 auto;
  }
  
  /* Center navigation on large screens */
  .navbar {
    max-width: 1920px;
    margin: 0 auto;
  }
}

/* For large screens (1440px to 1920px) */
@media screen and (min-width: 1440px) and (max-width: 1920px) {
  /* Adjust FAQ section */
  .FAQ .group {
    left: 50%;
    transform: translateX(-50%);
    max-width: 90%;
  }
  
  .FAQ .group-2 {
    left: 50%;
    transform: translateX(-50%);
    max-width: 90%;
  }
  
  /* Center home content */
  .home .frame-14 {
    left: 50%;
    transform: translateX(-50%);
  }
  
  /* Center program content */
  .program .frame-7 {
    left: 50%;
    transform: translateX(-50%);
  }
  
  /* Center contact form */
  .contact .group-4 {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* For medium-large screens (1200px to 1440px) */
@media screen and (min-width: 1200px) and (max-width: 1439px) {
  .FAQ .frame {
    left: 5%;
  }
  
  .FAQ .faq-section {
    padding-left: 8%;
  }
  
  .FAQ .group {
    left: 50%;
    transform: translateX(-50%);
    max-width: 85%;
  }
  
  /* Adjust home sections */
  .home .frame-14 {
    width: 90%;
    left: 5%;
  }
  
  /* Adjust program cards */
  .program .frame-7 {
    width: 90%;
    left: 5%;
  }
  
  /* Adjust contact sections */
  .contact .group-4 {
    width: 90%;
    left: 5%;
  }
}

/* For tablets and smaller laptops (768px to 1199px) */
@media screen and (max-width: 1199px) {
  /* Hero text adjustments */
  .FAQ .text-wrapper,
  .home .text-wrapper,
  .about-us .text-wrapper-17,
  .contact .text-wrapper-6,
  .program .PROGRAMS-FOR-every {
    font-size: 40px;
  }
  
  .FAQ .ready-to-become-a,
  .home .ready-to-become-a,
  .about-us .ready-to-become-a,
  .contact .ready-to-become-a,
  .program .ready-to-become-a {
    font-size: 44px;
    line-height: 55px;
  }
  
  /* FAQ adjustments */
  .FAQ .title,
  .FAQ .title-content {
    width: 90%;
    max-width: 100%;
    margin-left: 2%;
  }
  
  .FAQ .faq-section {
    padding-left: 5%;
  }
  
  /* Navigation adjustments */
  .navbar {
    padding: 0 20px;
  }
  
  .nav-right {
    gap: 30px;
  }
  
  .nav-right li a {
    font-size: 16px;
  }
}

/* For mobile devices (below 768px) */
@media screen and (max-width: 767px) {
  /* Hero text */
  .FAQ .text-wrapper,
  .home .text-wrapper,
  .about-us .text-wrapper-17,
  .contact .text-wrapper-6,
  .program .PROGRAMS-FOR-every {
    font-size: 32px;
  }
  
  .FAQ .p,
  .home .learn-to-swim-in,
  .about-us .text-wrapper-18,
  .contact .we-d-love-to-hear,
  .program .p {
    font-size: 18px;
  }
  
  /* FAQ mobile layout */
  .FAQ .faq-section {
    flex-direction: column;
    padding-left: 3%;
  }
  
  .FAQ .faq-header {
    width: 100%;
    padding-left: 5%;
    margin-bottom: 30px;
  }
  
  .FAQ .title,
  .FAQ .title-content {
    width: 95%;
    padding: 20px;
    font-size: 18px;
  }
  
  .FAQ .group {
    width: 95%;
    left: 2.5%;
  }
  
  /* Navigation mobile */
  .navbar {
    flex-direction: column;
    height: auto;
    padding: 15px 20px;
  }
  
  .nav-right {
    flex-direction: column;
    gap: 15px;
    margin-top: 15px;
  }
  
  /* Buttons mobile */
  .FAQ .enrol-now-button-wrapper,
  .home .enrol-now-button-wrapper,
  .about-us .enrol-now-button-wrapper,
  .contact .enrol-now-button-wrapper,
  .program .enrol-now-button-wrapper {
    width: 100%;
    max-width: 215px;
  }
  
  .FAQ .book-a-lesson-button-wrapper,
  .home .book-a-lesson-button-wrapper,
  .about-us .book-a-lesson-button-wrapper,
  .contact .book-a-lesson-button-wrapper,
  .program .book-a-lesson-button-wrapper {
    width: 90%;
    max-width: 362px;
  }
}

/* Specific fixes for centered content on all screen sizes */
.FAQ .group-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.FAQ .group {
  margin: 0 auto;
}

/* Footer responsive fix */
.FAQ .footer,
.home .footer,
.about-us .footer,
.contact .footer,
.program .footer {
  width: 110%;
  left: -5%;
}

.FAQ .group-2,
.home .group,
.about-us .group,
.contact .group-10,
.program .group-26 {
  max-width: 1349px;
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%);
}

/* Additional centering for key sections */
@media screen and (min-width: 1600px) {
  .home .frame-14,
  .home .frame-18,
  .home .text-wrapper-3,
  .home .text-wrapper-4,
  .contact .group-4 {
    left: 50%;
    transform: translateX(-45%);
  }
  
  .home .frame-12,
  .program .frame-7,
  .program .frame-12,
  .about-us .frame-12,
  .about-us .frame-14 {
    left: 50%;
    transform: translateX(-50%);
  }

  .contact .map {
    left: 50%;
    transform: translateX(-42%);
  }
}

.FAQ .group-wrapper,
.FAQ .group {
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.FAQ .text-wrapper-4 {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}