:root {
    /* fonts */
    --milkyway: 'Milkyway';
    --quicksand: "Quicksand", sans-serif;
    
    /* colors */
    --black: #1A1A1A;
    --grey: #555555;
    --lightgrey: #F5F5F5;
    --red: #F77E78;
    --white: #fff;
    --blue: #C6DDF2;
    --green: #BEECE1;
    --voilet: #DDCFED;
    --yellow: #FFE7B1;
    --pink: #F3C7DF;
    --darkblue: #5297FF;
}
/* 
========================================== 
General CSS
========================================== 
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-synthesis: none !important;
}

body {
    font-family: var(--quicksand);
    font-weight: 400;
    color: #555555;
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    touch-action: manipulation;
}
h1,h2,h3,h4,h5,h6 {
    font-family: var(--milkyway);
}
h1 {
    font-size: 100px;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0.32px;
}
h2 {
    font-size: 72px;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0.32px;
}
h2.small {
    font-size: 62px;
}
h2.mini {
    font-size: 52px;
}
h2.red b {
    color: var(--red);
}
h2.voilet b {
    color: var(--voilet);
}
h3 {
    font-size: 72px;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0.32px;
}
h4 {

}
h5 {
    font-family: var(--quicksand);
    font-size: 32px;
    font-weight: 700;
    line-height: 120%;
    letter-spacing: -0.3px;
}
h6 {
    font-family: var(--quicksand);
    font-size: 20px;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: -0.3px;
}
p {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.16px;
}
a {
    text-decoration: none;
    color: inherit;
}
ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}
.lenis-locked {
    overflow: hidden !important;
    height: 100% !important;
}
.spacer {
    height: 90px;
}
.container {
    max-width: 1380px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding: 0 40px;
}
.container-fluid {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding: 0 40px;
}
.custom-btn {
    display: inline-block;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 16px 22px;
    border-radius: 8px;
    transition: .3s ease all;
    border: 1px solid transparent;
    cursor: pointer;
}
.custom-btn.blue {
    background-color: #5297FF;
    border-color: #5297FF;
    color: #1A1A1A;
    position: relative;
}
.custom-btn.blue::before {
    content: '';
    position: absolute;
    background-image: url(../images/drop-bottom.svg);
    background-repeat: no-repeat;
    background-size: 12px;
    background-position: 100% 100%;
    bottom: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
}
.custom-btn.blue::after {
    content: '';
    position: absolute;
    background-image: url(../images/drop-top.svg);
    background-repeat: no-repeat;
    background-size: 12px;
    background-position: 100% 100%;
    top: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
}
.custom-btn.blue:hover {
    background-color: var(--red);
    border-color: var(--red);
    color: var(--white);
}
.custom-btn.red {
    background-color: #F77E78;
    border-color: #F77E78;
    color: #1A1A1A;
    position: relative;
}
.custom-btn.red::before {
    content: '';
    position: absolute;
    background-image: url(../images/drop-bottom.svg);
    background-repeat: no-repeat;
    background-size: 12px;
    background-position: 100% 100%;
    bottom: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
}
.custom-btn.red::after {
    content: '';
    position: absolute;
    background-image: url(../images/drop-top.svg);
    background-repeat: no-repeat;
    background-size: 12px;
    background-position: 100% 100%;
    top: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
}
.custom-btn.red:hover {
    background-color: var(--darkblue);
    border-color: var(--darkblue);
    color: var(--white);
}
.custom-btn.white {
    background-color: var(--white);
    border-color: var(--white);
    color: #1A1A1A;
}
.custom-btn.white:hover {
    background-color: transparent;
    /* border-color: #5297FF; */
    color: var(--white);
}
.custom-btn.rounded {
    border-radius: 35px;
    padding: 16px 45px;
}
.custom-btn.black {
    background-color: var(--black);
    color: #DDDDDD;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 2px;
}
.custom-btn.rounded.black:hover {
    background-color: var(--red);
    color: var(--black);
}
.button-wrap {
    position: relative;
    display: inline-block;
    aspect-ratio: 2 / 1;
    min-width: 210px;
    width: auto;
}
.button-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.button-wrap .text {
    width: 100%;
    text-align: center;
    font-weight: 700;
    color: var(--black);
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    white-space: nowrap;
    z-index: 999;
    position: relative;
    padding: 0 40px;
    padding-top: 5px;
}
/* .button-wrap .text::after {
    content: '';
    position: absolute;
    bottom: 46px;
    width: calc(100% - 80px);
    height: 1px;
    background-color: var(--black);
    left: 40px;
    transition: 1s ease all;
    opacity: 0;
}
.button-wrap:hover .text::after {
    opacity: 1;
} */
.heading {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.heading.center {
    align-items: center;
    justify-content: center;
}
.heading.white h2, .heading.white p {
    color: var(--white);
}
.heading.center h2, .heading.center p {
    text-align: center;
}
.heading.center h2 {
    max-width: 22ch;
}
.heading.center h2.full {
    max-width: inherit;
}
.heading h2 {
    text-transform: uppercase;
    color: var(--black);
}
.heading p {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.16px;
    color: var(--grey);
    max-width: 50ch;
}
.heading h2 span img {
    transform: scale(0.1);
    transform-origin: bottom left;
    transition: 1.5s ease all;
    width: 54px;
}
.heading h2.mini span img {
    width: 40px;
}
.heading.aos-animate h2 span img {
    transform: scale(1);
}
.heading h2 b {
    color: #5297FF;
}
.heading h2.voilet b {
    color: var(--voilet);
}
.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Header CSS */
header {
    padding: 10px 0;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--green);
    transition: .3s ease all;
    z-index: 99999;
}
header.white {
    background-color: var(--white);
}
header.backdrop {
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2);
}
.header-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.header-logo {
    width: 124px; 
}
.header-logo img {
    width: 100%;
    height: auto;
}
.mobile-header {
    display: none;
}
.h-center .hmenu {

}
.hmenu ul {
    list-style: none;
    position: relative;
}
.hmenu > ul {
    display: flex;
    align-items: center;
    gap: 80px;
}
.hmenu ul .dropdown {
    position: absolute;
    top: auto;
    left: -30px;
    opacity: 0;
    visibility: hidden;
    transition: .3s ease all;
    transform: translateY(20px);
    padding: 36px 74px 32px 30px;
    background-color: var(--white);
}
.hmenu ul li a {
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    line-height: 150%;
    letter-spacing: 2px;
    color: var(--black);
    transition: .3s ease all;
}
.hmenu ul li a:hover {
    /* font-weight: 500; */
    color: var(--black);
    text-decoration: underline;
}
.hmenu > ul > li.has-links > a {
    padding-right: 20px;
    position: relative;
}
.hmenu > ul > li.has-links > a::before {
    content: '';
    position: absolute;
    background-image: url(../images/cheveron-down.svg);
    background-repeat: no-repeat;
    background-size: 10px;
    width: 10px;
    height: 6px;
    top: 6px;
    right: 0;
    transition: .3s ease all;
}
.hmenu > ul > li.has-links:hover > a::before {
    transform: rotate(180deg);
}
.dropdown ul {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.dropdown ul li {
    position: relative;
    overflow: hidden;
}
.dropdown ul li a {
    white-space: nowrap;
    color: var(--grey);
    position: relative;
    padding-left: 30px;
    transform: translateX(-30px);
    display: inline-block;
    transition: .3s ease all;
}
.dropdown ul li a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(../images/dropdown-image.svg);
    background-repeat: no-repeat;
    background-size: 24px;
    width: 24px;
    height: 24px;
    opacity: 0;
    transition: .3s ease all;
}
.dropdown ul li a:hover {
    transform: translate(0);
    font-weight: 500;
    color: var(--black);
}
.dropdown ul li a:hover::before {
    opacity: 1;
}
#overlay {
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: black;
    opacity: 0;
    z-index: -1;
    transition: opacity .8s;
  }
.header-in .h-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}
.h-right .header-btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}
.nav-button {
    position: relative;
    width: 27px;
    height: 19px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
}
.nav-button .nb-in {
    width: 27px;
    height: 3px;
    background-color: var(--black);
    border-radius: 5px;
    transition: .3s ease all;
    cursor: pointer;
}
.nav-button .nb-in::before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0;
    width: 27px;
    height: 3px;
    background-color: var(--black);
    border-radius: 5px;
    transition: .3s ease all;
}
.nav-button .nb-in::after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 27px;
    height: 3px;
    background-color: var(--black);
    border-radius: 5px;
    transition: .3s ease all;
}
.nav-button.active .nb-in {
    background-color: transparent;
}
.nav-button.active .nb-in::before {
    transform: rotate(45deg);
    top: 8px;
}
.nav-button.active .nb-in::after {
    transform: rotate(-45deg);
    bottom: 8px;
}
/* Header CSS */

/* Landing Page CSS */
.main {
    position: relative;
}
.main::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: #000;
    opacity: 0;
    transition: .3s ease all;
}
.main.open::after {
    opacity: 0.5;
    z-index: 999;
}
.landingbanner {
    background-color: var(--green);
}
.banner-in {
    height: calc(100vh - 90px);
    min-height: 700px;
    max-height: 720px;
    position: relative;
}
.banner-image {
    width: 80%;
    position: relative;
    margin-left: auto;
    overflow: hidden;
    height: 100%;
}
.banner-image-mask {
    -webkit-mask-image: url(../images/hero-banner-mask.svg);
    mask-image: url(../images/hero-banner-mask.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    width: 100%;
    height: 100%;
    mask-size: 100%;
    -webkit-mask-size: 124%;
    transform-origin: center center;
    mask-position: -40% 53%;
    position: relative;
    z-index: 1;
    display: flex;
}
.banner-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/hero-banner-mask.svg);
    background-size: 124%;
    background-repeat: no-repeat;
    background-position: -61% 55%;
    z-index: 0;
}
.banner-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.banner-in .banner-content {
    position: absolute;
    top: 90px;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}
.bannerc-in {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.bannerc-in h1 {
    max-width: 12ch;
    color: var(--black);
    text-transform: uppercase;
}
.bannerc-in p {
    max-width: 42ch;
    font-size: 20px;
    margin-top: 10px;
    color: #555555;
}
.banner-button {
    margin-top: 44px;
}
.splash {
    position: relative;
    margin-top: -80px;
    z-index: 2;
}
.splash-in {
    position: relative;
    overflow: hidden;
}
.splash-wrap {
    background-color: #F77E78;
    padding-top: 40px;
    padding-bottom: 30px;
}
.splash-wave {
    background-image: url(../images/wave-red.svg);
    background-repeat: repeat-x;
    animation: wave 10s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
    height: 100px;
}
@keyframes wave {
    0% {
      margin-left: 0;
    }
    100% {
      margin-left: -1600px;
    }
}
.splashin-image {
    width: 50%;
    margin-left: auto;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    overflow: hidden;
}
.sii-image {
    -webkit-mask-image: url(../images/splash-mask.svg);
    mask-image: url(../images/splash-mask.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    width: 105%;
    height: 100%;
    mask-size: 100%;
    -webkit-mask-size: contain;
    transform-origin: top left;
    mask-position: 100% 0%;
    position: relative;
    z-index: 1;
    /* padding-top: 98%; */
}
.splashin-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 110%;
    height: 100%;
    background-image: url(../images/splash-mask.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    z-index: 0;
}
.sii-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
	object-position: right;
}
.splashin-content {
    /* position: absolute; */
    /* height: 100%;
    width: 100%;
    left: 0;
    top: 0; */
    width: 100%;
    padding-bottom: 100px;
}
.splashcontent-in {
    padding-top: 50px;
    width: 50%;
}
.splashcontent-in h2 {
    max-width: 13ch;
}
.splashcontent-in p {
    max-width: 64ch;
}
.splash-button {
    margin-top: 30px;
}
.sec-with-heading {
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.journey-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 17px 20px;
}
.jg-item {
    border-radius: 16px;
    overflow: hidden;
}
.journey-grid .jg-item:nth-child(6n+1) {
    background-color: #F6EADC;
}
.journey-grid .jg-item:nth-child(6n+2) {
    background-color: #DDCFED;
}
.journey-grid .jg-item:nth-child(6n+3) {
    background-color: #BEECE1;
}
.journey-grid .jg-item:nth-child(6n+4) {
    background-color: #F9DBD1;
}
.journey-grid .jg-item:nth-child(6n+5) {
    background-color: #C6DDF2;
}
.journey-grid .jg-item:nth-child(6n+6) {
    background-color: #F3C7DF;
}
.jgitem-in {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-start;
    padding-bottom: 380px;
    position: relative;
}
.jgimg-wrap {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: auto;
}
.jgi-image {
    mask-repeat: no-repeat;
    /* width: 100%; */
    mask-size: 85%;
    -webkit-mask-size: 85%;
    transform-origin: top right;
    mask-position: 100% 100%;
    position: relative;
    z-index: 1;
    height: 0;
    display: flex;
    padding-top: 100%;
}
.jgimg-wrap {
    position: absolute;
    bottom: 0;
    width: 85%;
    height: auto;
    right: 0;
}
.jgi-image img {
    position: absolute;
    inset: 0;
}
.journey-grid .jg-item:nth-child(6n+1) .jgi-image {
    -webkit-mask-image: url(../images/journey-mask-vector-1.png);
    mask-image: url(../images/journey-mask-vector-1.png);
}
.journey-grid .jg-item:nth-child(6n+2) .jgimg-wrap {
    width: 65%;
}
.journey-grid .jg-item:nth-child(6n+2) .jgi-image {
    -webkit-mask-image: url(../images/journey-mask-vector-2.png);
    mask-image: url(../images/journey-mask-vector-2.png);
}
.journey-grid .jg-item:nth-child(6n+3) .jgimg-wrap {
    width: 85%;
}
.journey-grid .jg-item:nth-child(6n+3) .jgi-image {
    -webkit-mask-image: url(../images/journey-mask-vector-3.png);
    mask-image: url(../images/journey-mask-vector-3.png);
    padding-top: 70%;
}
.journey-grid .jg-item:nth-child(6n+4) .jgimg-wrap {
    width: 72%;
}
.journey-grid .jg-item:nth-child(6n+4) .jgi-image {
    -webkit-mask-image: url(../images/journey-mask-vector-4.png);
    mask-image: url(../images/journey-mask-vector-4.png);
}
.journey-grid .jg-item:nth-child(6n+5) .jgimg-wrap {
    width: 90%;
}
.journey-grid .jg-item:nth-child(6n+5) .jgi-image {
    -webkit-mask-image: url(../images/journey-mask-vector-5.png);
    mask-image: url(../images/journey-mask-vector-5.png);
    padding-top: 70%;
}
.journey-grid .jg-item:nth-child(6n+6) .jgimg-wrap {
    width: 90%;
}
.journey-grid .jg-item:nth-child(6n+6) .jgi-image {
    -webkit-mask-image: url(../images/journey-mask-vector-5.png);
    mask-image: url(../images/journey-mask-vector-5.png);
    padding-top: 70%;
}
/* .journey-grid .jg-item:last-child .jgitem-in {
    position: relative;
    padding-bottom: 0;
} */

.jgi-content {
    padding: 56px 40px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.jgi-content h3 {
    color: var(--black);
    max-width: 25ch;
    font-family: var(--quicksand);
    font-size: 32px;
    font-weight: 700;
    line-height: 120%;
    letter-spacing: -0.3px;
}
.jgi-content p {
    max-width: 49ch;
}
/* .journey-grid .jg-item:nth-child(6n+6) .jgitem-in .jgi-content {
    height: 100%;
    align-items: center;
    justify-content: center;
    z-index: 9;
    max-width: 42ch;
    margin: 0 auto;
}
.journey-grid .jg-item:nth-child(6n+6) .jgitem-in .jgi-content h3 {
    text-align: center;
    text-transform: capitalize;
} */

.teaching-in .heading.center h2 {
    max-width: 16ch;
}
.teaching-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
}
.teaching-item {
    background-color: var(--blue);
    border-radius: 16px;
    /* overflow: hidden; */
    padding: 16px;
}
.ti-in {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 20px;
    padding-bottom: 50px;
    height: 100%;
}
.ti-in .ti-image {
    aspect-ratio: 3/2;
    border-radius: 8px;
    overflow: hidden;
}
.ti-in .ti-image img {
    transition: .3s ease all;
}
.ti-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
}
.ti-content h3 {
    max-width: 26ch;
    color: var(--black);
    font-family: var(--quicksand);
    font-size: 20px;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: -0.3px;
}
.ti-content p {
    color: var(--grey);
    font-size: 14px;
    max-width: 38ch;
    line-height: 150%;
}
.ti-icon {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 30px;
    height: 30px;
    transition: .3s ease all;
}
.ti-icon img {
    width: 100%;
    transition: .3s ease all;
}
.teaching-item:hover .ti-icon img {
    transform: scale(1.5);
}
.teaching-item:hover .ti-image img {
    transform: scale(1.12);
}
.partners .partners-in {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:30px;
}
.partners-in .partners-heading h2 {
    font-family: var(--quicksand);
    font-size: 24px;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: 1.28px;
    text-transform: uppercase;
    color: var(--black);
}
.partners-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 150px;
}
.partners-wrap .partner-logo {
    display: flex;
}
.partner-logo img {
    max-width: 200px;
    max-height: 80px;
}
.vs-video {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56%;
}
.vs-video video {
	position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
	object-fit: cover;
    object-position: top right;
}
.video-control {
	position: absolute;
	left: 0;
	top: 0;
	width: 100px;
	height: 100px;
    background-color: rgba(95, 95, 95, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    margin: auto;
    right: 0;
    bottom: 0;
    /* display: none; */
}
.video-control:not(.playing) .video-control-pause,
.video-control.playing .video-control-play {
	display: none;
}
.video-control-symbol {
	width: 30px;
    height: 30px;
    display: inline-block;
}
.video-control-symbol img {
    width: 100%;
}
.videosec-in {
    margin-top: 80px;
    position: relative;
    z-index: 1;
}
.videosec-in .vsi-in {
    position: relative;
    padding: 100px 0px 100px 0px;
}
.videosec-in .vsi-in::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(../images/video-top-bg.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom;
    width: 100%;
    height: 100px;
}
.videosec-in .vsi-in::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    background-image: url(../images/video-bottom-bg.svg);
    background-size: 100%;
    background-position: bottom;
    width: 100%;
    height: 100px;
}
.vsi-wrap {
    background-color: #BEECE1;
    padding: 0px 40px 0px 40px;
    position: relative;
    z-index: 1;
}
.vsi-wrap .heading.center h2 {
    max-width: 18ch;
}
.vsi-wrap .heading.center p {
    max-width: 78ch;
    line-height: 180%;
    margin-top: 10px;
}

.cb-in .heading h2 {
    max-width: 16ch;
}
.cb-wrap {
    display: flex;
    overflow: hidden;
    border-radius: 12px;
}
.cb-wrap .cb-item {
    display: flex;
    align-items: center;
}
.cb-item .cbitem-head {
    padding: 45px 30px;
    height: 100%;
    display: flex;
    cursor: pointer;
}
.cb-item .cbitem-head p {
    writing-mode: tb-rl;
    -webkit-writing-mode: tb-rl;
    font-weight: 500;
    font-size: 24px;
    letter-spacing: -0.3px;
    text-transform: capitalize;
    transition: .3s ease all;
    transform: rotate(180deg);
}
.cb-item.active .cbitem-head p {
    font-weight: 500;
    color: var(--black);
}
.cb-wrap .cb-item:nth-child(5n+1) .cbitem-head {
    background-color: var(--blue);
}
.cb-wrap .cb-item:nth-child(5n+2) .cbitem-head {
    background-color: var(--green);
}
.cb-wrap .cb-item:nth-child(5n+3) .cbitem-head {
    background-color: var(--voilet);
}
.cb-wrap .cb-item:nth-child(5n+4) .cbitem-head {
    background-color: var(--yellow);
}
.cb-wrap .cb-item:nth-child(5n+5) .cbitem-head {
    background-color: var(--pink);
}
.cbitem-data {
    display: grid;
    grid-template-columns: 1fr 1fr;
    clip-path: inset(0 0 0 100%);
    overflow: hidden;
    transition: .5s ease all;
    visibility: hidden;
    width: 0;
    min-height: 70vh;
    max-height: 700px;
    height: 100%;
}
.cb-item.active .cbitem-data {
    clip-path: inset(0 0% 0 0);
    visibility: visible;
    width: auto;
}
.cbd-image {
    height: 100%;
    /* padding-top: 110%; */
    position: relative;
}
.cbd-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* position: absolute;
    top: 0;
    left: 0; */
}
.cbd-content {
    padding: 40px 44px;
    background-color: #FFFAF3;
}
.cbdcontent-in {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.cbdcontent-in .cbdi-num {
    background-image: url(../images/num-bg.svg);
    background-repeat: no-repeat;
    background-size: contain;
	background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    width: 64px;
    font-weight: 700;
    font-size: 22px;
    color: var(--black);
}
.cbdi-data {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.cbdi-data .cbd-head {
    font-weight: 500;
    font-size: 28px;
    line-height: 32px;
    max-width: 22ch;
    color: var(--black);
}
.cbdi-data .cbd-data {
    font-weight: 400;
    font-size: 20px;
    line-height: 150%;
    /* max-width: 28ch; */
    color: var(--grey);
}

.puddle {
    position: relative;
}
.puddle-animate {
    /* position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; */
    width: 100%;
}
.puddle-animate .puddle-image-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 35%;
    margin-left: auto;
}
.puddle-wave-top {
    background-image: url(../images/wave-yellow-top.svg);
    background-repeat: repeat-x;
    animation: wave 10s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
    height: 100px;
}
.puddle-wave-bottom {
    background-image: url(../images/wave-yellow-bottom.svg);
    background-repeat: repeat-x;
    animation: wave 10s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
    height: 100px;
}
@keyframes waveslow {
    0% {
      margin-left: 0;
    }
    100% {
      margin-left: -2400px;
    }
}
.puddle-image-box img {
    width: 100%;
}
.puddle-top-image {
    position: relative;
    z-index: 2;
    /* animation: moveIt 2.5s ease-in-out infinite; */
}
@keyframes moveIt {
    0%, 100% {
      transform: rotate(4deg);
      transform-origin: center;
    }
    50% {
      transform: rotate(-4deg);
      transform-origin: center;
    }
  }
.puddle-top-image .duck-bubble {
    position: absolute;
    width: 100%;
    height: auto;
    right: 67%;
    top: -40px;
    background-image: url(../images/idea-bubble.svg);
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 5 / 3;
}
.duck-bubble p {
    font-weight: 700;
    font-size: 22px;
    line-height: 150%;
    letter-spacing: 0.16px;
    color: var(--grey);
    max-width: 22ch;
    margin-bottom: 12px;
}
.puddle-bottom-image {
    margin-top: -70px;
    position: relative;
    z-index: 1;
}
.puddle-in {
    padding: 120px 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 0; */
}
.puddle-wrap {
    background-color: #FFE7B1;
    height: calc(100% - 120px);
    display: flex;
    align-items: center;
}
.puddle-wrap .puddle-image-box {
    display: none;
}
.puddle-wrap .puddle-wrap-in {
    width: 65%;
}
.puddle-wrap-in .heading-button {
    margin-top: 30px;
}
.puddle-wrap-in .heading h2 {
    max-width: 14ch;
}
.together-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.together-wrap .tw-left {
    background-color: #F9DBD1;
    border-radius: 16px;
    overflow: hidden;
}
.tw-left .tw-item {
    display: flex;
    flex-direction: column-reverse;
    height: 100%;
    justify-content: space-between;
}
.tw-image {
    -webkit-mask-image: url(../images/together-bg.svg);
    mask-image: url(../images/together-bg.svg);
    mask-repeat: no-repeat;
    width: 100%;
    mask-size: 86%;
    -webkit-mask-size: 86%;
    transform-origin: bottom right;
    mask-position: 210% 0%;
    position: relative;
    z-index: 1;
    margin-top: -60px;
}
.tw-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tw-content {
    padding: 70px 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.tw-content.heading h2 {
    font-size: 72px;
    line-height: 96%;
    color: #F77E78;
    max-width: 14ch;
}
.tw-content.heading p {
    font-size: 16px;
    line-height: 150%;
    max-width: 36ch;
}
.tw-right {
    background-color: #DDCFED;
    border-radius: 16px;
}
.tw-right .tw-form {
    height: 100%;
    padding: 70px 40px;
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.form-heading h2 {
    font-size: 52px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 96%;
    letter-spacing: 0.32px;
    color: #6B68D9;
}
.form-wrap form {
    display: flex;
    flex-direction: column;
    gap: 36px;
}
.form-wrap form .form-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.form-group label {
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 3.51px;
    color: #2A279B;
}
.form-group input, .form-group textarea, .form-group select {
    border: none;
    border-bottom: 1px solid #3B38CC;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    background-color: transparent;
    color: #3B38CC;
    padding: 4px 0;
    font-family: var(--quicksand);
}
.form-group input::placeholder, .form-group textarea::placeholder {
    color: #3B38CC;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    font-family: var(--quicksand);
}
.form-button {
    text-align: center;
}
.form-group input:focus, .form-group textarea:focus {
    outline: none;
}

footer {
    background-color: var(--red);
    padding-top: 80px;
}
.footer-in {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.footer-in .fi-top {
    display: flex;
    flex-direction: column;
    gap: 130px;
}
.fi-top > .fit-logo {
    display: none;
}
.fi-top .fit-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 50px;
}
.fit-wrap .fit-item {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.fiti-head {
    min-height: 20px;
    font-family: var(--milkyway);
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--white);
}
.fiti-data {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.fiti-data:nth-child(3) {
    margin-top: 40px;
}
.fiti-data ul {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.fiti-data > ul > li > a {
    font-weight: 700;
    font-size: 20px;
    line-height: 150%;
    letter-spacing: 0;
    color: var(--white);
    transition: .3s ease all;
}
.fiti-data > ul > li > a:hover {
    color: var(--black);
}
.fiti-data .fitl-item {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.fit-wrap .fit-left {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.fitl-item a, .fitl-item p {
    font-weight: 400;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: 0;
    color: var(--white);
    max-width: 30ch;
    display: inline-block;
    position: relative;
}
.fitl-item a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--white);
    transition: .3s ease all;
}
.fitl-item a:hover::after {
    width: 100%;
}
.fitl-social ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
}
.fitl-social ul li img {
    transition: .3s ease all;
}
.fitl-social ul li a:hover img {
    transform: scale(1.12);
}
.fit-newswrap {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.fitr-newsletter {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.fitr-newsletter .nl-heading {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.nl-heading .nlh-head {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 3px;
    color: var(--white);
}
.nl-heading .nlh-subhead {
    font-size: 14px;
    font-weight: 500;
    color: var(--white);
}
.nl-news form {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    gap: 20px;
}
.nl-news form input:not([disabled]):not([type="submit"]) {
    border: 1px solid #fff;
    padding: 16px 12px;
    width: 100%;
    background: transparent;
    color: var(--white);
    font-family: var(--quicksand);
    width: calc(100% - 116px);
    border-right: none;
}
.nl-news form input::placeholder {
    font-size: 14px;
    font-weight: 400;
    color: var(--white);
    font-family: var(--quicksand);
}
.nl-news form input:focus {
    outline: none;
}
.nl-news form input.custom-btn {
    border-radius: 0;
    text-transform: capitalize;
    font-weight: 500;
    letter-spacing: 1px;
    font-size: 14px;
}
.nl-news form .wpcf7-turnstile {
    order: 2;
}
.nl-news form > p {
    order: 3;
}
.nl-news form .wpcf7-response-output {
    order: 1;
}
.fit-logo img {
    max-width: 160px;
}
.fit-logos ul {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 30px
}
.fit-logos ul li img {
    max-width: 130px;
    max-height: 60px;
}
.fit-logos ul li:first-child img {
    max-width: 110px;
    max-height: 50px;
}
.fi-bottom {
    padding: 25px 0;
    border-top: 1px solid var(--white);
}
.fi-bottom .fib-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.fib-in .fib-left p {
    font-weight: 500;
    font-size: 14px;
    color: var(--white);
}
.fib-in .fib-right p {
    font-weight: 600;
    font-size: 12px;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    letter-spacing: 4px;
    text-transform: uppercase;
    gap: 12px;
}
.fib-right p a {
    transition: .3s ease all;
    position: relative;
}
.fib-right p a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--white);
    transition: .3s ease all;
}
.fib-right p a:hover::before {
    width: 100%;
}

.difference {
    position: relative;
    overflow: hidden;
}
.difference-wave {
    background-image: url(../images/wave-blue.svg);
    background-repeat: repeat-x;
    animation: wave 10s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
    height: 100px;
}
.diff-container {
    padding: 80px 0 120px 0;
    background-color: var(--darkblue);
}
.diff-container .heading.center h2 {
    max-width: 19ch;
}
.difference-grid {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 50px;
    margin-top: 100px;
}
.difference-grid .dg-item {

}
.dg-item-in {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
}
.dgi-image {
    height: 87px;
}
.dgi-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.dgi-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
}
.dgi-content h3 {
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    color: var(--white);
    letter-spacing: -0.3px;
    text-align: center;
    max-width: 16ch;
    font-family: var(--quicksand);
    min-height: 64px;
}
.dgi-content p {
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    color: var(--white);
    letter-spacing: 0px;
    text-align: center;
    max-width: 28ch;
}
.announcement {
    background-color: #FFE7B1;
    padding: 10px 0;
    position: relative;
    z-index: 9999;
}
.announcement .announcement-in {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.announcement-in p {
    font-size: 16px;
    font-weight: 700;
    color: #000;
}
.announcement-in p a {
    text-decoration: underline;
    text-underline-offset: 1px;
    transition: .3s ease all;
}
.announcement-in p a:hover {
    color: #f77e78;
}
.announcement-in span {
    display: flex;
}
.announcement-in span svg {

}
.for-mobile {
    display: none;
}
.footer-logo {
    width: 160px;
}
.footer-logo img {
    width: 100%;
    height: auto;
}
/* Landing Page CSS */

/* Thankyou Page CSS */
.thankyou {
    height: 100vh;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    gap: 40px;
}
.tywave-wrap {
    width: 100%;
    position: relative;
}
.tywave-wrap .ty-wave {
    background-image: url(../images/wave-blue.svg);
    background-repeat: repeat-x;
    animation: wave 10s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
    height: 100px;
}
.tywave-wrap .ty-wave-light {
    background-image: url(../images/wave-light-blue.svg);
    background-repeat: repeat-x;
    animation: wave 10s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
    height: 100px;
    position: absolute;
    width: -webkit-fill-available;
    height: 100px;
    bottom: 30px;
    z-index: -1;
    left: 100px;
}
.ty-header {
    padding-top: 24px;
}
.ty-header img {
    width: 150px;
}
.tyc-in {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}
.tyc-head {
    position: relative;
}
.tyc-head h1 {
    display: flex;
    align-items: center;
    font-size: 180px;
    text-transform: uppercase;
    color: #2064CA;
    gap: 50px;
}
.tyc-head h1 b {
    position: relative;
    z-index: 1;
}
.tyc-head h1 span.thankimage {
    width: 60px;
    display: inline-block;
    position: absolute;
    left: 30%;
    opacity: 0;
    transition: 1.3s ease all;
    bottom: 0;
}
.tyc-head h1.aos-init span.thankimage {
    left: 57%;
    opacity: 1;
}
.tyc-head h1 span.thankimage img {
    width: 100%;
}
.tyc-in .tyc-para {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}
.tyc-para p {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 400;
    color: var(--grey);
    text-align: center;
}
.tyc-para p a {
    display: flex;
}
.stories {
    position: relative;
}
.stories .stories-top img,
.stories .stories-bottom img {
    width: 100%;
    display: flex;
}
.stories-wrap {
    background-color: var(--voilet);
    padding: 80px 0;
}
.ss-wrap {
    display: grid;
    /* grid-template-columns: 1fr 1fr; */
    grid-template-columns: 1fr;
}
.ss-wrap .ssw-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* gap: 32px; */
    gap: 60px;
    /* padding-bottom: 50px; */
}
.sswl-text p {
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0.16px;
    color: var(--black);
    max-width: 70ch;
    opacity: 0;
    text-align: center;
    transition: 1s ease all;
    transform: translateY(40px);
}
.sswl-name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}
.sswl-name p {
    font-weight: 600;
    font-size: 16px;
    line-height: 173%;
    letter-spacing: 3.56px;
    color: var(--grey);
    text-transform: uppercase;
    opacity: 0;
    transition: 1.2s ease all;
    transform: translateY(40px);
}
.slick-active .sswl-text p,
.slick-active .sswl-name p,
.slick-active .sswr-image {
    opacity: 1;
    transform: translateY(0);
}
.ssw-right {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ssw-right .sswr-bg {
    transition: .3s ease all;
    position: relative;
    aspect-ratio: 1/1;
}
.ssw-right .sswr-bg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: 1.5s ease all;
    transform: scale(0.5);
}
.slick-active .ssw-right .sswr-bg img {
    transform: scale(1);
}
.sswr-image {
    /* border-radius: 36px; */
    border-radius: 50%;
    overflow: hidden;
    aspect-ratio: 1/1;
    /* position: absolute; */
    width: 80px;
    height: 80px;
    /* width: 70%; */
    /* height: 0;
    padding-top: 70%;
    inset: auto; */
    opacity: 0;
    transition: 1.2s ease all;
    transform: translateY(40px);
}
.sswr-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* position: absolute;
    top: 0;
    left: 0; */
}
.stories-heading {
    /* margin-bottom: -120px; */
    width: 100%;
    text-align: center;
    margin-bottom: 50px;
}
.stories-heading h2 {
    text-transform: uppercase;
    color: var(--black);
    /* max-width: 16ch; */
}
.stories-heading h2 b {
    color: #8B89E1;
}
.stories-heading h2 span img {
    transform: scale(0.1);
    transform-origin: bottom left;
    transition: 1.5s ease all;
    width: 54px;
}
.stories-heading.aos-animate h2 span img {
    transform: scale(1);
}
.stories-slider {
    position: relative;
    padding-bottom: 30px;
}
.stories-slider .slick-prev {
    position: absolute;
    left: calc(50% - 48px);
    bottom: 0px;
    top: auto;
    width: 42px;
    height: 42px;
    border: 1px solid var(--black);
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
    transition: .3s ease all;
    background-image: url(../images/arrow-left.svg);
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: center;
}
.stories-slider .slick-next {
    position: absolute;
    right: calc(50% - 48px);
    bottom: 0px;
    top: auto;
    width: 42px;
    height: 42px;
    border: 1px solid var(--black);
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
    transition: .3s ease all;
    background-image: url(../images/arrow-right.svg);
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: center;
}
.stories-slider .slick-prev:hover,
.stories-slider .slick-next:hover {
    background-color: var(--red);
}
.slick-prev:before, .slick-next:before {
    content: '';
}
/* Thankyou Page CSS */


/* Contact Page CSS */
.contact-us {
    padding: 80px 0;
}
.contact-us .contact-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: flex-start;
}
.contact-left {
    padding-top: 40px;
}
.contact-left .cl-in {
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.cl-in .cli-top {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.cli-top .clit-heading {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.clit-heading h1 {
    font-weight: 400;
    font-size: 72px;
    line-height: 101%;
    text-transform: uppercase;
    color: var(--black);
    max-width: 14ch;
}
.clit-heading h1 b {
    font-weight: 400;
    color: var(--darkblue);
}
.clit-heading h1 span img {
    transform: scale(0.1);
    transform-origin: bottom left;
    transition: 1.5s ease all;
    width: 54px;
}
.clit-heading.aos-animate h1 span img {
    transform: scale(1);
}
.clit-heading p {
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    color: var(--grey);
    max-width: 51ch;
}
.cli-bottom {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.cli-bottom .clib-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.clib-item .clib-head {
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    line-height: 96%;
    letter-spacing: 2px;
    color: var(--red);
}
.clib-item .clib-data p {
    font-weight: 400;
    color: var(--black);
    font-size: 16px;
    line-height: 150%;
    max-width: 35ch;
}
.clib-item .clib-data p a {
    transition: .3s ease all;
}
.clib-item .clib-data p a:hover {
    color: var(--darkblue);
}
.cli-bottom .clib-item:first-child .clib-data p {
    font-size: 20px;
    line-height: 130%;
    max-width: 24ch;
}
.clib-data iframe {
    max-width: 100%!important;
}
.clib-item:last-child {
    gap: 16px;
}
.clib-item:last-child .clib-head {
    color: var(--grey);
    font-size: 12px;
    letter-spacing: 0;
}
.clib-data .clib-social ul {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
}
.clib-social ul li img {
    width: 24px;
    height: 24px;
    transition: .3s ease all;
}
.clib-social ul li a:hover img {
    transform: scale(1.12);
}
.contact-right {
    background-color: #F6EADC;
    border-radius: 32px;
    width: 100%;
}
.contact-wrap > .cli-top {
    display: none;
}
.contact-right .tw-form {
    height: 100%;
    padding: 70px 40px;
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.contact-right .form-heading h2 {
    color: var(--black);
}
.contact-right .form-group label {
    color: var(--black);
}
.contact-right .form-group input, .contact-right .form-group textarea, .contact-right .form-group select {
    color: var(--grey);
    border-color: #DCAE79;
}
.contact-right .form-group input::placeholder, .contact-right .form-group textarea::placeholder {
    color: var(--grey);
}
.contact-right .form-group select:focus-visible {
    outline: none;
}
/* Contact Page CSS */

/* Lesson Page CSS */
.lesson-banner.blue {
    background-color: var(--darkblue);
}
.lesson-banner.red {
    background-color: var(--red);
}
.lesson-banner.voilet {
    background-color: var(--voilet);
}
.lesson-banner.green {
    background-color: var(--green);
}
.lesson-banner.pink {
    background-color: var(--pink);
}
.lesson-banner.purple {
    background-color: #8B89E1;
}
.lesson-banner.yellow {
    background-color: #FFE7B1;
}
.lb-in .banner-image {
    height: 540px;
    width: 55%;
}
.lb-in .banner-image::after {
    content: none;
}
.lb-in .banner-image-mask {
    -webkit-mask-image: url(../images/journey-mask-vector-5.png);
    mask-image: url(../images/journey-mask-vector-5.png);
    mask-size: 110%;
    -webkit-mask-size: 110%;
    transform-origin: center center;
    mask-position: 0% 80%;
}
.lb-in .banner-image-mask picture {
    display: flex;
}
.lb-in .banner-content {
    position: absolute;
    top: 90px;
    left: 0;
    width: 100%;
    /* height: 100%; */
    z-index: 3;
}
.lb-in .bannerc-in h1 {
    font-size: 60px;
    color: var(--white);
    font-weight: 400;
    max-width: 23ch;
}
.lb-in .bannerc-in h1 span img {
    transform: scale(0.1);
    transform-origin: bottom left;
    transition: 1.5s ease all;
    width: 46px;
}
.lb-in .bannerc-in h1 span img {
    transform: scale(1);
}
.lb-in .bannerc-in p {
    color: var(--white);
    font-weight: 500;
    font-size: 16px;
}
.lesson-banner.voilet .lb-in .bannerc-in h1,
.lesson-banner.green .lb-in .bannerc-in h1,
.lesson-banner.pink .lb-in .bannerc-in h1,
.lesson-banner.green .lb-in .bannerc-in p,
.lesson-banner.pink .lb-in .bannerc-in p,
.lesson-banner.yellow .lb-in .bannerc-in h1,
.lesson-banner.yellow .lb-in .bannerc-in p,
.lesson-banner.voilet .lb-in .bannerc-in p {
    color: var(--black);
}
.lesson-banner.voilet .lb-in .bannerc-in h1 span img,
.lesson-banner.green .lb-in .bannerc-in h1 span img,
.lesson-banner.pink .lb-in .bannerc-in h1 span img {
    filter: invert();
}
.lb-in .bannerc-in .banner-text {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.lesson-details {

}
.lesson-details .ld-in {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 45px;
    margin-top: 42px;
}
.ld-in .ldi-header {
    padding-bottom: 30px;
    border-bottom: 1px solid #D5D5D5;
}
.ldi-header .ldih-wrap {
    display: flex;
    gap: 30px;
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
}
.ldih-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ldih-item .ldii-head {
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 2px;
    line-height: 150%;
    color: var(--black);
    text-transform: uppercase;
    /* text-decoration: underline; */
    /* text-underline-offset: 3px; */
}
.ldih-item .ldii-data {
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 0px;
    line-height: 150%;
    color: var(--black);
    max-width: 25ch;
}
.ldi-content .ldic-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}
.ldic-wrap .ldic-item {
    transition: .3s ease all;
    background-color: var(--lightgrey);
    border-radius: 15px;
    overflow: hidden;
    padding: 55px 70px 50px 150px;
    position: relative;
}
.ldic-wrap.bp .ldic-item {
    background-image: url(https://puddlesswimschool.com/wp-content/uploads/2025/12/Group-427323390.png);
    background-repeat: no-repeat;
    background-size: 150px;
    background-position: 0 100%;
    padding: 55px 70px 150px 150px;
}
.ldic-item .ldic-icon {
    position: absolute;
    top: 75px;
    left: 50px;
    width: 70px;
    height: 70px;
}
.ldic-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.ldic-item .ldic-head {
    display: none;
}
.ldic-head .ldc-topdata {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ldic-item .ldic-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    position: relative;
}
.ldic-row::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1px;
    height: 100%;
    background-color: #BCBCBC;
    transition: .3s ease all;
}
.ldic-item:hover .ldic-row::after {
    background-color: var(--white);
} 
.green .ldic-item:hover .ldic-row::after {
    background-color: #CACACA;
} 
.voilet .ldic-item:hover .ldic-row::after {
    background-color: #CACACA;
} 
.ldic-colm .ldc-topdata {
    display: flex;
    flex-direction: column;
    gap: 0px;
}
.ldic-colm .ldc-subtext {
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    transition: .3s ease all;
    color: var(--black);
}
.ldic-colm h2 {
    font-size: 52px;
    transition: .3s ease all;
    color: var(--red);
    line-height: 150%;
}
/* .ldic-wrap.red h2 {
    color: var(--black);
}
.ldic-wrap.blue h2 {
    color: var(--black);
}
.ldic-wrap.green h2 {
    color: var(--black);
}
.ldic-wrap.voilet h2 {
    color: var(--black);
} */
.ldcolm-left {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.ldc-goals p {
    font-weight: 500;
    font-size: 18px;
    line-height: 150%;
    color: #606060;
    transition: .3s ease all;
    max-width: 42ch;
}
.ldc-goals p b {
    font-weight: 700;
    color: var(--black);
    margin-right: 5px;
    transition: .3s ease all;
}
.ldc-focus.nomargin {
    margin-top: -20px;
}
.ldc-focus ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}
.ldc-focus ul li {
    position: relative;
    padding-left: 30px;
    font-weight: 500;
    font-size: 18px;
    line-height: 150%;
    transition: .3s ease all;
}
.ldc-focus ul li::before {
    content: '';
    position: absolute;
    top: 11px;
    left: 10px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #606060;
    transition: .3s ease all;
}
.ldcolm-right .ldc-focus ul li::before {
    background-image: url(../images/brain-shape.svg);
    background-repeat: no-repeat;
    background-size: 18px;
    width: 18px;
    height: 14px;
    border-radius: 0;
    background-color: transparent!important;
    top: 7px;
    left: 4px;
    transition: .3s ease all;
}

.ldic-item.active .ldc-subtext,
.ldic-item.active .ldic-colm h2,
.ldic-item.active .ldc-focus ul li,
.ldic-item.active .ldc-goals p,
.ldic-item.active .ldc-goals p b {
    color: var(--white);
}
.green .ldic-item.active .ldc-subtext,
.green  .ldic-item.active .ldic-colm h2,
.green .ldic-item.active .ldc-goals p b,
.voilet .ldic-item.active .ldc-subtext,
.voilet  .ldic-item.active .ldic-colm h2,
.voilet .ldic-item.active .ldc-goals p b {
    color: #1A1A1A;
}
.green .ldic-item.active .ldc-focus ul li,
.green .ldic-item.active .ldc-goals p,
.voilet .ldic-item.active .ldc-focus ul li,
.voilet .ldic-item.active .ldc-goals p {
    color: #606060;
}
.ldic-item.active .ldc-focus ul li::before {
    background-color: var(--white);
}
.green .ldic-item.active .ldc-focus ul li::before,
.voilet .ldic-item.active .ldc-focus ul li::before {
    background-color: #606060;
}
.ldic-item.active .ldic-head h2 {
    color: var(--white);
}
.voilet .ldic-item.active .ldcolm-right .ldc-focus ul li::before {
    filter: contrast(0) brightness(2);
}
.green .ldic-item.active .ldic-head h2,
.voilet .ldic-item.active .ldic-head h2 {
    color: #1A1A1A;
}
.ldcolm-right {
    width: 80%;
    margin-left: auto;
    /* margin-right: auto; */
}

.for-video .videosec-wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}
.videosec-wrap .vs-video {
    border-radius: 16px;
    overflow: hidden;
    padding-top: 36%;
}
.videosec-wrap .video-control {
    display: flex;
    width: 50px;
    height: 50px;
}
.videosec-wrap .video-control-symbol {
    width: 20px;
    height: 20px;
}
.videosec-wrap .video-content p {
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0;
    color: #606060;
}
.faq-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
}
.faq-accordian-wrapper {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
/* .faq-item {
    break-inside: avoid;
} */
.faq-item {
    padding-bottom: 0;
    transition: .4s all ease;
    position: relative;
    padding-left: 48px;
}
.faq-item .faq-bg {
    position: absolute;
    left: 0;
    top: 2px;
    width: 32px;
    display: flex;
}
.faq-item .faq-bg svg {
    width: 100%;
    height: auto;
}
.faq-item .faq-bg svg path {
    transition: .3s ease all;
}
.faq-item.active .faq-bg svg path {
    fill: #8B89E1;
}
.faq-item .faq-question {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    cursor: pointer;
    padding-bottom: 12px;
    transition: .4s all ease;
    gap: 20px;
}
.faq-item .faq-question:focus-visible {
    outline: none;
}
.f-question {
    font-weight: 500;
    font-size: 18px;
    line-height: 150%;
    letter-spacing: 0;
    color: var(--black);
}
.faq-question-right {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding-top: 6px;
}
.faq-item.active .faq-question-right svg {
    transition: .4s all ease;
}
.faq-item.active .faq-question-right svg {
    transform: rotate(180deg);
}
.faq-answer {
    border-bottom: 1px solid #DDDDDD;
    padding-bottom: 18px;
}
.faq-answer .f-answer {
    display: none;
}
.faq-answer p {
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: var(--grey);
    max-width: 51ch;
}
.faq-answer p a {
    text-decoration: underline;
    transition: .3s ease all;
    font-weight: 600;
}
.faq-answer p a:hover {
    color: var(--darkblue);
}
.faq-answer ul {
    padding: revert;
    margin: 10px 0;
    list-style: disc;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.faq-answer ul li {
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: var(--grey);
    max-width: 51ch;
}
.guides-wrap {
    margin-top: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 50px;
}
.guides-wrap .guides-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}

.gi-image {
    -webkit-mask-image: url(../images/journey-mask-3.svg);
    mask-image: url(../images/journey-mask-3.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    width: 80%;
    mask-size: 100%;
    -webkit-mask-size: 100%;
    transform-origin: center center;
    mask-position: -40% 53%;
    aspect-ratio: 6 / 5;
    overflow: hidden;
}
.gi-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 100% 4%;
}
.gi-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.gi-content .gic-name {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0;
    color: #000;
    text-align: center;
}
.gi-content .gic-level {
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0;
    color: #6B6B6B;
    text-align: center;
}
/* Lesson Page CSS */

/* About Page CSS */
.about-banner {
    background-color: var(--darkblue);
}
.about-banner .ab-in {
    position: relative;
}
.ab-in .banner-image {
    width: 60%;
    height: 750px;
}
.ab-in .banner-image-mask {
    -webkit-mask-image: url(../images/about-banner-mask.svg);
    mask-image: url(../images/about-banner-mask.svg);
    mask-size: 114%;
    -webkit-mask-size: 114%;
    transform-origin: center;
    mask-position: 0% 33%;
}
.ab-in .banner-image::after {
    content: none;
}
.ab-in .banner-content {
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    padding: 80px 0;
    display: flex;
    align-items: stretch;
}
.ab-in .bannerc-in {
    height: 100%;
    align-items: stretch;
    flex-direction: inherit;
}
.ab-in .bannerc-in .banner-text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.ab-in .bannerc-in h1 {
    font-size: 76px;
    color: var(--white);
    font-weight: 400;
    max-width: 14ch;
    line-height: 96%;
    letter-spacing: 0.32px;
}
.ab-in .bannerc-in h1 span img {
    transform: scale(0.1);
    transform-origin: bottom left;
    transition: 1.5s ease all;
    width: 54px;
}
.ab-in .bannerc-in .aos-animate h1 span img {
    transform: scale(1);
}
.ab-in .bannerc-in p {
    color: #fff;
    font-weight: 500;
    font-size: 18px;
    max-width: 45ch;
}
.values-in {
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
}
.values-in .values-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
}
.values-top .vt-heading h2 {
    font-size: 62px;
    font-weight: 400;
    line-height: 96%;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    color: var(--black);
    max-width: 18ch;
}
.vt-heading h2 b {
    color: var(--red);
}
.vt-heading h2 span img {
    transform: scale(0.1);
    transform-origin: bottom left;
    transition: 1.5s ease all;
    width: 46px;
}
.aos-animate.vt-heading h2 span img {
    transform: scale(1);
}
.vt-para p {
    font-size: 20px;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: 0.16px;
    color: var(--grey);
    max-width: 39ch;
    margin-left: auto;
}
.values-bottom .values-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 22px;
}
.values-wrap .vw-item {
    position: relative;
    padding: 34px 30px;
    display: flex;
    align-items: stretch;
    background-color: var(--red);
    border-radius: 15px;
    overflow: hidden;
    min-height: 480px;
}
.vw-item .vwi-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    display: flex;
    width: 100%;
    height: 60%;
}
.vwi-bg img {
    width: 100%;
    /* height: 100%; */
    /* object-fit: contain; */
    object-position: bottom;
}
.vwitem-in {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 50px;
    z-index: 1;
}
.vwi-top h3 {
    font-size: 32px;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.16px;
    color: var(--black);
}
.vwi-bottom p {
    font-weight: 500;
    font-size: 20px;
    line-height: 138%;
    letter-spacing: 0.32px;
    color: #858585;
    max-width: 28ch;
}
.values-wrap .vw-item:nth-child(3n+1) .vwi-top h3,
.values-wrap .vw-item:nth-child(3n+1) .vwi-bottom p {
    color: var(--white);
}
.values-wrap .vw-item:nth-child(3n+2) {
    background-color: var(--green);
}
.values-wrap .vw-item:nth-child(3n+3) {
    background-color: #F6EADC;
}
.values-wrap .vw-item:nth-child(3n+2) p {
    max-width: 26ch;
}
.values-wrap .vw-item:nth-child(3n+3) p {
    max-width: 26ch;
}

.as-in {
    position: relative;
}
.as-in .asi-heading {
    width: 45%;
    margin-left: auto;
}
.asi-heading h2 {
    color: var(--black);
    text-transform: uppercase;
    max-width: 16ch;
    margin-left: auto;
}
.asi-wrap {
    position: relative;
    margin-top: -130px;
}
.asi-wrap .asiwrap-left {
    display: flex;
    flex-direction: column;
    width: 60%;
}
.asl-top-image,
.asl-bottom-image {
    display: flex;
}
.asl-top-image img, .asl-bottom-image img {
    width: 100%;
}
.asl-content {
    background-color: var(--green);
    position: relative;
    z-index: 1;
    padding: 0 100px;
}
.asl-content .aslc-in {
    margin-top: -120px;
    margin-bottom: -80px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}
.aslc-in .aslc-image {
    width: 45px;
}
.aslc-image img {
    width: 100%;
}
.aslc-in p,
.aslc-in ul li,
.aslc-in ol li {
    font-weight: 500;
    font-size: 18px;
    line-height: 160%;
    letter-spacing: 0.16px;
    color: #323131;
    max-width: 52ch;
}
.aslc-in ul,
.aslc-in ol {
    padding-left: 20px;
    list-style: inherit;
}
.asiwrap-right {
    position: absolute;
    right: 0;
    width: 45%;
    height: 0;
    padding-top: 45%;
    bottom: 100px;
}
.asiwrap-right .asir-mask-image {
    -webkit-mask-image: url(../images/smaile-mask.png);
    mask-image: url(../images/smaile-mask.png);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    width: 100%;
    height: 100%;
    mask-size: 100%;
    -webkit-mask-size: 100%;
    transform-origin: top left;
    mask-position: 100% 0%;
    position: relative;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
}
.asir-mask-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.say-hello {
    position: relative;
    overflow: hidden;
}
.hello-wave-top {
    background-image: url(../images/wave-lblue-top.svg);
    background-repeat: repeat-x;
    animation: wave 10s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
    height: 100px;
}
.hello-wave-bottom {
    background-image: url(../images/wave-lblue-bottom.svg);
    background-repeat: repeat-x;
    animation: wave 10s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
    height: 100px;
}
.sh-in {
    background-color: #C7E1F5;
    padding: 120px 0;
}
.sh-heading .shh-in {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.shh-in h2 {
    font-size: 200px;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    color: var(--black);
}
.shh-in h2.blue {
    color: var(--darkblue);
}
.shh-image {
    margin-top: -100px;
    margin-bottom: -30px;
    position: relative;
    z-index: 2;
    text-align: center;
}
.shh-image img {
    width: 80%;
    margin: 0 auto;
}
.ssh-para {
    margin-top: 24px;
}
.ssh-para p {
    font-weight: 700;
    font-size: 32px;
    line-height: 129%;
    color: var(--black);
    letter-spacing: 0.32px;
    text-align: center;
    max-width: 43ch;
}
.sh-sections {
    margin-top: 100px;
    overflow: hidden;
}
.sh-sections .shs-in {

}
.shs-in .shs-wrap {
    
}
.shs-wrap .shs-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}
.shs-wrap .shs-item:nth-child(even){
    flex-direction: row-reverse;
}
.shs-item .shsi-left {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.shs-item .shsi-right {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.shsi-left .shsl-image {
    width: 100%;
    max-width: 55ch;
}
.shsl-image img {
    width: 50px;
}
.shsi-left .shsl-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.shsi-left p {
    font-weight: 500;
    font-size: 24px;
    line-height: 150%;
    letter-spacing: 0.16px;
    color: var(--black);
    max-width: 36ch;
}
.shs-wrap .shs-item:nth-child(even) .shsi-left p,
.shs-wrap .shs-item:nth-child(even) .shsi-left .shsl-image {
    margin-left: auto;
}
.shsi-right {
    position: relative;
}
.shsi-right .shsr-image-bg {
    position: relative;
    width: 100%;
    display: none;
}
.shsi-right .shsr-image-bg img {
    width: 100%;
}
.shsr-image {
    position: relative;
    width: 65%;
    /* height: 80%; */
    inset: 0;
    margin: auto;
}
.shs-wrap .shs-item:nth-child(even) .shsi-right .shsr-image {
    width: 45%;
}
.shsr-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.shsr-image video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: inherit;
    filter: saturate(1.5);
}
.heading.center.full-width h2 {
    max-width: 28ch;
}
.heading.center.full-width p {
    color: #555555;
    font-weight: 700;
    max-width: 54ch;
}
.heading.full-width h2 b {
    color: #8B89E1;
}
.heartpud-in {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}
.heartpud-in .hpi-wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}
/* .hpi-wrap .hpiw-top {
    width: 400px;
} */
.hpiw-top img {
    width: 100%;
}
.hpiw-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.hpiw-bottom .hpb-name {
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 0;
    color: #000;
}
.hpiw-bottom .hpb-desig {
    color: #6B6B6B;
    font-weight: 700;
    font-size: 16px;
}
.our-location {
    overflow: hidden;
}
.oloc-in {
    
}
.oloc-in .oloc-heading h2 {
    color: #202322;
    text-transform: uppercase;
}
.oloc-wrap {
    position: relative;
    margin-top: 40px;
}
.oloc-wrap .oli-left {
    width: 65%;
    position: absolute;
    height: 80%;
}
.oli-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.oli-left iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.oloc-wrap .oli-right {
    width: 55%;
    margin-left: auto;
    padding-top: 30px;
    margin-right: -8%;
}
.olir-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.olir-wrap .olir-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.olir-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.olir-content {
    position: relative;
    width: 70%;
    margin: 0 auto;
    padding: 40px 0;
}
.olirc-head h3 {
    font-size: 36px;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--black);
}
.olirc-list {
    margin-top: 20px;
}
.olirc-list ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.olirc-list ul li {
    position: relative;
    padding-left: 50px;
    font-weight: 500;
    font-size: 20px;
    color: #555555;
    letter-spacing: 0;
}
.olirc-list ul li a {
    font-weight: 500;
    font-size: 24px;
    color: #555555;
    letter-spacing: 0;
    text-decoration: underline;
}
.olirc-list ul li span {
    width: 30px;
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
}
.olirc-list ul li span img {
    width: 100%;
}
.olirc-hours {
    margin-top: 40px;
}
.olirc-link {
    margin-top: 50px;
}
.olirc-hours .olih-title {
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--black);
    margin-bottom: 8px;
}
.olih-data {
    display: flex;
    flex-direction: column;
    gap: 0px;
}
.olih-data p {
    font-weight: 400;
    font-size: 20px;
    line-height: 160%;
    letter-spacing: 0;
    color: var(--grey);
}
.olirc-link a {
    font-weight: 500;
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 3.4px;
    text-decoration: underline;
    color: #4B3A36;
}
/* About Page CSS */

/* Pricing Page CSS */
.pwi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}
.pwi-grid .pwi-item {
    padding: 37px 30px 37px 30px;
    border-radius: 16px;
    position: relative;
    background-repeat: no-repeat;
    background-size: 44px;
    background-position: 92% 92%;
}
.pwi-grid .pwi-item:nth-child(7n+1) {
    background-color: #F6EADC;
    background-image: url(../images/pwi-item-icon-1.svg);
}
.pwi-grid .pwi-item:nth-child(7n+2) {
    background-color: #F9DBD1;
    background-image: url(../images/pwi-item-icon-2.svg);
}
.pwi-grid .pwi-item:nth-child(7n+3) {
    background-color: #C6DDF2;
    background-image: url(../images/pwi-item-icon-3.svg);
}
.pwi-grid .pwi-item:nth-child(7n+4) {
    background-color: #F3C7DF;
    background-image: url(../images/pwi-item-icon-4.svg);
}
.pwi-grid .pwi-item:nth-child(7n+5) {
    background-color: #DDCFED;
    background-image: url(../images/pwi-item-icon-5.svg);
}
.pwi-grid .pwi-item:nth-child(7n+6) {
    background-color: #E9C0C0;
    background-image: url(../images/pwi-item-icon-6.svg);
}
.pwi-grid .pwi-item:nth-child(7n+7) {
    background-color: #FFE7B1;
    background-image: url(../images/pwi-item-icon-7.svg);
}
.pwi-in {
    display: flex;
    flex-direction: column;
    gap: 100px;
    height: 100%;
    justify-content: space-between;
}
.pwi-in .pwi-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.pwi-top h3 {
    font-size: 42px;
    color: var(--black);
    letter-spacing: -0.3px;
}
.pwi-top p {
    font-size: 22px;
    line-height: 150%;
    font-weight: 400;
    color: #606060;
}
.pwi-top a.birthday-button {
    font-weight: 600;
    font-size: 18px;
    text-transform: uppercase;
    text-decoration: underline;
    color: #606060;
    margin-top: 10px;
    text-underline-offset: 1px;
    transition: .3s ease all;
}
.pwi-top a.birthday-button:hover {
    color: #1a1a1a;
}
.pwi-top a.custom-btn {
    margin-top: 20px;
}
.pwi-bottom {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
.pwi-bottom .pwib-colm {
    display: flex;
    flex-direction: column;
    gap: 0px;
}
.pwibcolm-tag {
    font-weight: 400;
    font-size: 22px;
    line-height: 130%;
    letter-spacing: 0px;
    color: var(--black);
}
.pwibcolm-desc {
    font-weight: 700;
    font-size: 26px;
    line-height: 150%;
    letter-spacing: 2px;
    color: var(--black);
}
.pwi-grid .pwi-item.full {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.full .pwi-in .pwi-top {
    gap: 20px;
    margin-bottom: 80px;
}
.full .pwi-top h3 {
    font-size: 32px;
}
.pwi-text {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 80px;
}
.pwitext-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pwitext-item .pwitext-heading {
    font-family: var(--milkyway);
    font-size: 24px;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    color: var(--black);
    line-height: 130%;
}
.pwitext-content ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pwitext-content ul li {
    padding-left: 30px;
    position: relative;
    font-weight: 500;
    font-size: 16px;
    line-height: 160%;
    letter-spacing: 0.64px;
    color: #555555;
    max-width: 100ch;
}
.pwitext-content ul li b {
    font-weight: 700;
}
.pwitext-content ul li::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #555555;
}
/* Pricing Page CSS */

/* Blog Page CSS */
.blogs-top {
    margin-top: 60px;
}
.bt-wrap {
    display: grid;
    grid-template-columns: 4fr 3fr;
    gap: 60px;
}
.btw-left {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
}
.btwl-head h2 {
    font-size: 52px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: 0.32px;
    color: var(--black);
    text-transform: uppercase;
}
.btwl-head h2 span img {
    transform: scale(0.1);
    transform-origin: bottom left;
    transition: 1.5s ease all;
    width: 40px;
}
.btwl-head.aos-animate h2 span img {
    transform: scale(1);
}
.blog-item .blogi-in {
    padding: 20px;
    border-radius: 12px;
    background-color: #F6EADC;
    display: flex;
    flex-direction: column;
    gap: 26px;
}
.blogi-in .blogi-image {

}
.blog-item.big {
    position: relative;
}
.blog-item.big::after {
    content: '';
    position: absolute;
    right: -30px;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: #F6EADC;
}
.blog-item.big .blogi-image {
    aspect-ratio: 13/6;
    overflow: hidden;
    border-radius: 12px;
    width: 100%;
}
.blog-grid .blogi-image {
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: 12px;
    width: 100%;
}
.blogi-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .3s ease all;
}
.blogi-in:hover .blogi-image img {
    transform: scale(1.12);
}
.blogi-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
}
.blogi-content .blogi-content-top {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.blogi-content-top .bct-category {
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 1.28px;
    text-transform: uppercase;
    color: var(--grey);
}
.blogi-content-top .bct-heading {
    font-weight: 500;
    font-size: 24px;
    line-height: 130%;
    color: #000;
    transition: .3s ease all;
}
.blogi-in:hover .bct-heading {
    color: var(--red);
}
.blogi-in .bct-para {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Number of lines to display */
    -webkit-box-orient: vertical;
    line-clamp: 2;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.16px;
    color: var(--grey);
}
.blogi-content-date {
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.28px;
    color: var(--red);
}
.btw-right {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: flex-start;
    justify-content: flex-start;
}
.btwr-head h2 {
    font-size: 32px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: 0.32px;
    color: var(--black);
    text-transform: uppercase;
}
.btwr-data {
    margin-top: 8px;
}
.btwr-data .btwr-wrap { 
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}
.btwr-item .blogi-in {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
}
.btwr-item .blogi-in .blogi-image {
    aspect-ratio: 10/9;
    overflow: hidden;
    border-radius: 8px;
    width: 160px;
}
.btwr-item .blogi-content {
    width: calc(100% - 174px);
}
.btwr-item .blogi-content-top .bct-heading {
    font-weight: 400;
    font-size: 16px;
    max-width: 40ch;
}
.ab-tabs {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 30px;
    position: relative;
}
.filter-sort {
    position: absolute;
    top: -80px;
    right: 0;
}
.abtabs-header .tab {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 40px;
}
.abtabs-header .tab .tablinks {
    transition: .3s ease all;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.16px;
    color: var(--grey);
    cursor: pointer;
}
.abtabs-header .tab .tablinks:hover,
.abtabs-header .tab .tablinks.active {
    color: var(--red);
}
.abtabs-data .tabcontent {
    display: none;
    animation: fadeEffect 1s;
}
@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}
.abtabs-data .blog-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}
.blog-grid .blog-item {
    display: flex;
    align-items: stretch;
}
.blog-item .blogi-in {
    height: 100%;
}
.ts-control, .ts-wrapper.single.input-active .ts-control {
    width: 150px;
    border: none;
    border-bottom: 1px solid #616161;
    border-radius: 0;
    padding: 0;
    padding-bottom: 8px;
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.64px;
    color: #000;
    background-image: url(../images/arrow-down-black.svg);
    background-repeat: no-repeat;
    background-size: 12px;
    background-position: 96% 30%;
}
.ts-wrapper.single.input-active .ts-control {

}
.ts-dropdown {
    border: 1px solid var(--black);
}
.ts-dropdown-content .option {
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.64px;
    color: #000;
}
.ts-control:focus, .ts-wrapper.single.input-active .ts-control:focus {
    outline: none;
}
.load-more {
    margin-top: 50px;
    text-align: center;
}
.newsletter-wrap {
    display: flex;
    flex-direction: column;
}
.nl-top {
    display: flex;
}
.nl-top img {
    width: 100%;
}
.nl-content {
    background-color: var(--blue);
    padding: 0 20px;
}
.nlc-newsletter {
    margin-top: 40px;
}
.nlc-newsletter form {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 32%;
    margin: 0 auto;
}
.nlc-newsletter form input[type=search] {
    border: 1px solid var(--grey);
    height: 52px;
    background-color: transparent;
    border-radius: 35px;
    width: 100%;
    padding: 10px 150px 10px 20px;
}
.nlc-newsletter form input[type=submit] {
    position: absolute;
    width: 140px;
    height: 42px;
    right: 5px;
    top: 5px;
    background-color: #fff;
    border: none;
    border-radius: 35px;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 1px;
    color: var(--black);
    cursor: pointer;
    transition: .3s ease all;
}
.nlc-newsletter form input[type=submit]:hover {
    background-color: var(--darkblue);
    color: #fff;
}
.nlc-newsletter form input:focus {
    outline: none;
}
/* Blog Page CSS */

/* Blog Details Page CSS */
.bib-image {
    aspect-ratio: 3/1;
    overflow: hidden;
}
.bib-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bib-content {
    margin: 50px auto 40px auto;
    max-width: 1200px;
    display: grid;
    grid-template-columns: 2fr 5fr;
    gap: 40px;
}
.bid-nav {
    
}
.bidnav-in {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 30px;
    position: sticky;
    top: 110px;
    left: 0;
}
.bid-nav .bdpic-top {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}
.open-icon {
    position: relative;
    display: none;
}
.open-icon .oi-current {
    position: relative;
    z-index: 2;
    transition: .3s ease all;
    display: flex;
}
.open-icon .oi-open {
    position: absolute;
    z-index: 1;
    transition: .3s ease all;
    display: flex;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
}
.bid-nav p {
    font-weight: 500;
    font-size: 18px;
    color: var(--black);
}
.bdcontent-list > ol {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
}
.bdcontent-list > ol > li {
    position: relative;
    padding-left: 14px;
    display: flex;
    flex-direction: column;
}
.bdcontent-list > ol > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 6px;
    height: 1px;
    background-color: var(--black);
}
.bdcontent-list > ol > li > a {
    font-weight: 500;
    font-size: 14px;
    color: var(--grey);
    transition: .3s ease all;
    line-height: 120%;
}
.bdcontent-list > ol > li > a:hover {
    color: var(--red);
}
.bibc-in h1,
.bibc-in h2,
.bibc-in h3,
.bibc-in h4,
.bibc-in h5,
.bibc-in h6 {
    font-family: var(--quicksand);
    font-weight: 600;
    color: var(--black);
    line-height: 110%;
    margin-top: 20px;
}
.bibc-in h1 {
    font-size: 44px;
}
.dwt-wrap {
    padding: 30px 10px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.dwt-date,
.dwt-writer,
.dwt-time {
    font-weight: 400;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 1.12px;
    text-transform: uppercase;
    color: var(--grey);
    position: relative;
}
.dwt-wrap > div::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: var(--grey);
}
.dwt-wrap > div:first-child::before {
    content: none;
}
.share-wrap {
    padding: 18px 0;
    border-top: 1px solid #E2D5C4;
    border-bottom: 1px solid #E2D5C4;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--black);
    letter-spacing: 2.56px;
}
.bibc-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: 40px 0;
}
.bibc-content p,
.bibc-content li {
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    letter-spacing: 0.48px;
    color: var(--grey);
}
.bibc-content h2 {
    font-size: 38px;
}
.bibc-content h3 {
    font-size: 34px;
}
.bibc-content h4 {
    font-size: 28px;
}
.bibc-content h5 {
    font-size: 24px;
}
.bibc-content h6 {
    font-size: 22px;
}
.bibc-content ul,
.bibc-content ol {
    padding-left: 20px;
    list-style: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bibc-content ul {
    list-style: disc;
}
.bibc-content img {
    width: 100%;
    border-radius: 12px;
}
.bibc-content caption,
.bibc-content .caption {
    text-align: center;
    font-weight: 400;
    font-size: 12px;
    color: var(--grey);
    margin-top: 6px;
}
.bibc-content a {
    transition: .3s ease all;
    text-decoration: underline;
}
.bibc-content a:hover {
    color: var(--red);
}
.bib-content .faq-colm {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 40px;
}
.bib-content .faq-colm h2 {
    font-size: 40px;
}
/* Policy Page CSS */
.policy-page .bibc-in h1, 
.policy-page .bibc-in h2, 
.policy-page .bibc-in h3, 
.policy-page .bibc-in h4, 
.policy-page .bibc-in h5, 
.policy-page .bibc-in h6 {
    font-family: var(--milkyway);
    text-transform: uppercase;
}
.bibc-in .policy-date {
    margin-top: 20px;
}
.policy-page .bibc-content {
    gap: 20px;
}
.policy-page .bibc-content p,
.policy-page .bibc-content li {
    font-weight: 500;
    letter-spacing: 0.64px;
}

/* 404 Error Page CSS */
.error-page {
    height: calc(100vh - 140px);
    position: relative;
    background-color: #FFFAF3;
    overflow: hidden;
    min-height: 800px;
}
.error-content {
    padding-top: 80px;
}
.ep-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
.ep-bottom .difference-wave.light {
    position: absolute;
    bottom: 20px;
    left: 80px;
    width: 300%;
    opacity: 0.4;
}
.ec-in {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
}
.ec-head {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    position: relative;
}
.ec-head h1 {
    text-align: center;
    font-size: 300px;
    color: var(--red);
    position: relative;
    z-index: 1;
}
.duck-image {
    position: absolute;
    width: 60px;
    top: 30%;
    left: 45%;
    z-index: 1;
    animation: linear infinite;
    animation-name: run;
    animation-duration: 5s;
}
@keyframes run {
    0% {
      left: 35%;
    }
    50% {
      left: 50%;
    }
    100% {
      left: 35%;    
    }
  }
.duck-image img {
    width: 100%;
}
.ech-left, .ech-right {
    display: flex;
    position: relative;
}
.ech-left {
    z-index: 2;
}
.ech-right {
    z-index: 0;
}
.ech-left img,
.ech-right img {
    width: auto;
    height: 300px;
}
.ec-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}
.ec-content .ecc-top {
    font-weight: 500;
    font-size: 28px;
    text-align: center;
    color: var(--black);
}
.ec-content p {
    font-weight: 400;
    font-size: 16px;
    max-width: 52ch;
    color: var(--grey);
    text-align: center;
}

/* About Page New section */
.tabcontent {
/*     display: none; */
    animation: fadeEffect 1s;
}
@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}
.heartpud-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
}
.hpg-left {
    /* padding-top: 30px; */
}
.hpg-left .tab ul {
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    justify-content: center;
    gap: 40px;
}
.hpg-left .tab ul li {
    position: relative;
    /* padding-bottom: 20px;
    margin-bottom: 20px; */
    /* border-bottom: 1px solid #6B6B6B; */
    transition: .2s ease all;
    overflow: hidden;
}
.hpg-left .tab ul li .tabdata {
    display: flex;
    gap: 10px;
    transform: translateX(-30px);
    transition: .2s ease all;
    font-size: 20px;
    font-weight: 600;
    color: #858585;
    cursor: pointer;
    position: relative;
}
.hpg-left .tab ul li .tabdata::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: calc(100% - 31px);
    height: 1px;
    background-color: #5297FF;
    opacity: 0;
    transition: .2s ease all;
}
.hpg-left .tab ul li span {
    width: 20px;
    display: flex;
    transition: .3s ease all;
}
.hpg-left .tab ul li span img {
    width: 100%;
}
.hpg-left .tab ul li.active .tabdata {
    transform: translateX(0px);
    font-weight: 700;
    color: var(--darkblue);
}
.hpg-left .tab ul li.active .tabdata::before {
    opacity: 1;
}
.hpgr-wrap {
    /* display: grid;
    grid-template-columns: 1fr 1fr 1fr; */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 38px;
}
.hpi-wrap .hpiw-top {
    width: 100%!important;
}
.hpiw-bottom {
    margin-top: 10px;
}
.hpiw-bottom .hpb-desig {
    max-width: 22ch;
    text-align: center;
    font-size: 12px!important;
}
.hpiw-bottom .hpb-name {
    font-size: 18px!important;
}
.hpgr-item {
    perspective: 1000px;
    width: 30%;
}
.hpgritem-in {
    position: relative;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}
.hpgr-item:hover .hpgritem-in {
    transform: rotateY(180deg);
}
.hpgri-front {
    position: relative;
    width: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}
.hpgri-back {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('https://puddlesswimschool.com/wp-content/uploads/2025/10/Frame-427324947.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.hpgri-back p {
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    padding: 50px 30px;
    color: #F6EADC;
}
.hpgri-back {
    transform: rotateY(180deg);
}

@media(max-width:1200px){
    .heartpud-grid {
        gap: 30px;
    }
    .hpg-left .tab ul li {
        margin-bottom: 16px;
        padding-bottom: 16px;
    }
    .hpg-left .tab ul li .tabdata {
        font-size: 14px;
        transform: translateX(-26px);
    }
    .hpg-left .tab ul li span {
        width: 16px;
    }
    .hpgr-wrap {
        gap: 32px;
        grid-template-columns: 1fr 1fr;
    }
    .hpg-left .tab ul {
        gap: 22px;
    }
    .hpg-left .tab ul li .tabdata::before {
        width: calc(100% - 25px);
    }
}

@media(max-width:991px){
    .hmenu ul .dropdown.active{
z-index: 9;
}
    .heartpud-grid {
        grid-template-columns: 1fr;
    }
    .hpg-left .tab {
        overflow: hidden;
        overflow-x: auto;
        width: 100%;
    }
    .hpg-left .tab ul {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0 15px;
    }
    .hpg-left .tab ul li {
        white-space: nowrap;
    }
    .hpg-left .tab ul li.active .tabdata {
        margin-right: 20px;
        overflow: inherit;
    }
    .hpgr-wrap {
        grid-template-columns: 1fr 1fr;
    }
    .hpgr-item {
        width: 47%;
    }
}

@media(max-width: 767px){
    .hpgr-wrap {
        grid-template-columns: 1fr;
        gap: 26px;
    }
    .hpgri-back p {
        font-size: 12px;
    }
    .hpgr-item {
        width: 100%;
    }
}

/* Enroll Sec */
section.enroll-sec {
    background-color: #F6EADC;
    padding: 100px 0;
}
.enroll-wrap {
    margin-top: 40px;
}
.enroll-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 50px;
}
.enrollgrid-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    position: relative;
}
.eri-top {
    padding: 16px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #F9DBD1;
    position: relative;
}
.enrollgrid-item::before {
    content: '';
    position: absolute;
    left: -59px;
    top: 100px;
    width: 80px;
    height: 1px;
    /* background-color: #767676; */
    background-image: linear-gradient(to right, #767676 55%, rgba(255,255,255,0) 0%);
    background-position: bottom;
    background-size: 9px 1px;
    background-repeat: repeat-x;
    z-index: -1;
}
.enrollgrid-item:nth-child(1)::before {
    content: none;
}
.enrollgrid-item:nth-child(2) .eri-top {
    background-color: #DDCFED;
}
.enrollgrid-item:nth-child(3) .eri-top {
    background-color: #F3C7DF;
}
.enrollgrid-item:nth-child(4) .eri-top {
    background-color: #C6DDF2;
}
.eri-top .eritop-in {

}
.eritop-in .eritop-image {
    border-radius: 2px;
    overflow: hidden;
    aspect-ratio: 3/2;
}
.eritop-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.eri-bottom  {
    width: 100%;
}
.eri-bottom .eribottom-in {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
}
.eribottom-in h5 {
    font-weight: 700;
    letter-spacing: 0.16px;
    color: #1A1A1A;
    font-size: 24px;
    text-align: center;
}
.eribottom-in p {
    text-align: center;
    font-weight: 500;
    color: #555555;
    letter-spacing: 0.16px;
    line-height: 140%;
    font-size: 16px;
    max-width: 26ch;
}
.enroll-bottom {
    margin-top: 80px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}
.enroll-bottom h5 {
    font-weight: 700;
    font-size: 18px;
    text-align: center;
    text-transform: uppercase;
    color: #1A1A1A;
    letter-spacing: 1.28px;
}
.enroll-bottom p {
    text-align: center;
    font-weight: 500;
    color: #555555;
    letter-spacing: 0.16px;
    line-height: 150%;
    font-size: 18px;
    max-width: 45ch;
}
li.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-has-children.has-links {
    position: relative;
}