@font-face {
    font-family: "Wix Madefor Text";
    src: url("fonts/wix-madefor-text.woff2") format("woff2");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}

/*color: #366177;
FDF6EE
222
77A6BD
E9E7E2
164056

font-size: clamp(2.5rem, 5vw, 4.5rem);

font-size: clamp(2.15rem, 3.75vw, 3.5rem);

font-size: clamp(2rem, 3.5vw, 3rem);

font-size: clamp(1.35rem, 2vw, 1.75rem);

font-size: clamp(1.225rem, 1.75vw, 1.55rem);

font-size: clamp(1.1rem, 1.5vw, 1.35rem);

font-size: clamp(1.05rem, 1.3vw, 1.25rem);

font-size: clamp(1rem, 1.15vw, 1.15rem);

font-size: clamp(0.9375rem, 1vw, 1.0625rem);

font-size: clamp(0.90625rem, 1vw, 1rem);

font-size: clamp(0.875rem, 1vw, 0.9375rem);

font-size: clamp(0.8125rem, 1vw, 0.875rem); 

font-size: clamp(0.6875rem, 1vw, 0.75rem);  

font-size: clamp(0.5rem, 1.5vw, 0.5625rem); 

*/

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Wix Madefor Text", Arial, sans-serif;

    background: #FDF6EE;

    color: #222;

    line-height: 1.5;

    -webkit-font-smoothing: antialiased;
}

img {
    display: block;
    width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
	
}

button {
    font: inherit;
	
}

header {
    background: #366177;
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    color: #FFFFFF;
    transition: transform 0.3s ease;
}

.site-header.hide {
    transform: translateY(-100%);
}

.header-container {
    max-width: 1200px;

    height: 82px;

    margin: 0 auto;

    padding: 0 30px;

    display: flex;

    align-items: center;

    justify-content: space-between;
}

.site-logo {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    text-decoration: none;
}

.logo-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;

    fill: none;
    stroke: #77A6BD;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.logo-main {
    font-family: "Wix Madefor Text", Arial, sans-serif;

    font-size:
        clamp(1.1rem, 1.5vw, 1.35rem);

    font-weight:
        800;

    letter-spacing:
        -0.03em;

    color:
        #FDF6EE;
}

.logo-sub {
    margin-top:
        6px;

    font-family: "Wix Madefor Text", Arial, sans-serif;

	font-size: clamp(0.6875rem, 1vw, 0.75rem);  


    font-weight:
        600;

    letter-spacing:
        0em;

    text-transform:
        uppercase;

    color:
        rgba(253, 246, 238, 0.50);
}

.main-nav {
    display: flex;

    align-items: center;

    gap: 27px;

    margin-left: auto;

    margin-right: 30px;
}

.nav-link {
    position: relative;

    padding: 8px 0;

    color: rgba(255, 255, 255, 0.6);

	font-size: clamp(0.8125rem, 1vw, 0.875rem);

    transition: all 0.25s ease;
}

.nav-link:hover {
    
	color: rgba(255, 255, 255, 1);

}

.nav-link::after {
    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0;

    height: 2px;

    background: #77A6BD;

    transition: all 0.25s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.header-button {
    padding: 10px 17px;

    border: 1px solid rgba(255, 255, 255, 0.4);

    border-radius: 999px;

    font-size: clamp(0.8125rem, 1vw, 0.875rem);

    font-weight: 700;

    white-space: nowrap;

    background: rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(5px);

    color: #FFFFFF;

    transition: all 0.25s ease;
}

.header-button:hover {
    background: #FFFFFF;

    color: #164056;
	
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.mobile-menu-button {
    display: none;

    width: 43px;

    height: 40px;

    border: 1px solid rgba(255, 255, 255, 0.3);

    border-radius: 8px;

    background: rgba(22, 64, 86, 0.18);

    cursor: pointer;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 4px;
}

.mobile-menu-button span {
    display: block;

    width: 19px;

    height: 2px;

    background: #FFFFFF;
}

.mobile-nav {
    display: none;
}

.button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 48px;

    padding: 0 22px;

    border-radius: 999px;

    font-size: clamp(0.8125rem, 1.2vw, 0.875rem);

    font-weight: 700;

    transition: all 0.25s ease;
	
	border: 1px solid rgba(255, 255, 255, 0.4);

    backdrop-filter: blur(5px);
	
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}


/* ==================================================
   HERO VERTICAL SEQUENCE
================================================== */

/* ---------- HERO ITEMS ---------- */

.course-hero-content > *:not(h1) {

    opacity: 0;

    transform: translateY(20px);

    animation:
        heroVerticalFade 1.2s ease forwards;

}


/* ---------- HERO HEADING LINES ---------- */

.course-hero-content h1 .hero-line {

    display: block;

    opacity: 0;

    transform: translateY(20px);

    animation:
        heroVerticalFade 1.2s ease forwards;

}


/* ==================================================
   ANIMATION ORDER
================================================== */

/* 01 — IELTS Speaking Specialist */

.course-hero-content .course-hero-eyebrow {
    animation-delay: 0.2s;
}


/* 02 — Speak English */

.course-hero-content h1 .hero-line:nth-child(1) {
    animation-delay: 0.4s;
}


/* 03 — With Confidence */

.course-hero-content h1 .hero-line:nth-child(2) {
    animation-delay: 0.6s;
}


/* 04 — with Teacher Ashley */

.course-hero-content h1 .hero-line:nth-child(3) {
    animation-delay: 0.8s;
}


/* 05 — Description */

.course-hero-content > p {
    animation-delay: 1.0s;
}


/* 06 — Button */

.course-hero-content .course-hero-button {
    animation-delay: 1.2s;
}


/* ==================================================
   HERO ANIMATION
================================================== */

@keyframes heroVerticalFade {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}



/* ==================================================
   ABOUT SECTION SCROLL FADE-IN
================================================== */

.section-eyebrow,
.intro-heading h2,
.intro-text > p,
.intro-photo {

    opacity: 0;

    transform: translateY(20px);

    transition:
        opacity 1.2s ease,
        transform 1.2s ease;

}


/* ---------- VISIBLE STATE ---------- */

.section-eyebrow.show,
.intro-heading h2.show,
.intro-text > p.show,
.intro-photo.show {

    opacity: 1;

    transform: translateY(0);

}

/* ==================================================
   ABOUT SECTION SCROLL FADE-IN
================================================== */

#about .section-eyebrow,
#about .intro-heading h2,
#about .intro-text > p,
#about .intro-photo {

    opacity: 0;

    transform: translateY(20px);

    transition:
        opacity 1.2s ease,
        transform 1.2s ease;

}


/* ---------- ABOUT VISIBLE STATE ---------- */

#about .section-eyebrow.show,
#about .intro-heading h2.show,
#about .intro-text > p.show,
#about .intro-photo.show {

    opacity: 1;

    transform: translateY(0);

}

/* ==================================================
   EXPERIENCE SECTION SCROLL FADE-IN
================================================== */

#experience .section-header > div,
#experience .section-header > p,
#experience .about-card-grid .level-card {

    opacity: 0;

    transform: translateY(20px);

    transition:
        opacity 1.2s ease,
        transform 1.2s ease;

}


/* ---------- EXPERIENCE VISIBLE STATE ---------- */

#experience .section-header > div.show,
#experience .section-header > p.show,
#experience .about-card-grid .level-card.show {

    opacity: 1;

    transform: translateY(0);

}


/* ---------- CARD STAGGER ---------- */

#experience .about-card-grid .level-card:nth-child(1) {
    transition-delay: 0.2s;
}

#experience .about-card-grid .level-card:nth-child(2) {
    transition-delay: 0.4s;
}

#experience .about-card-grid .level-card:nth-child(3) {
    transition-delay: 0.6s;
}

#experience .about-card-grid .level-card:nth-child(4) {
    transition-delay: 0.8s;
}

#experience .about-card-grid .level-card:nth-child(5) {
    transition-delay: 1.0s;
}


/* ==================================================
   WHY STUDY WITH TEACHER ASHLEY
   SCROLL FADE-IN
================================================== */

#study .section-header > div,
#study .section-header > p,
#study .about-card-grid .intro-note {

    opacity: 0;

    transform: translateY(20px);

    transition:
        opacity 1.2s ease,
        transform 1.2s ease;

}


/* ---------- VISIBLE STATE ---------- */

#study .section-header > div.show,
#study .section-header > p.show,
#study .about-card-grid .intro-note.show {

    opacity: 1;

    transform: translateY(0);

}


/* ---------- CARD STAGGER ---------- */

#study .about-card-grid .intro-note:nth-child(1) {
    transition-delay: 0.2s;
}

#study .about-card-grid .intro-note:nth-child(2) {
    transition-delay: 0.4s;
}

#study .about-card-grid .intro-note:nth-child(3) {
    transition-delay: 0.6s;
}


/* ==================================================
   LESSONS SECTION SCROLL FADE-IN
================================================== */

#lessons .section-header > div,
#lessons .section-header > p,
#lessons .about-card-grid .level-card {

    opacity: 0;

    transform: translateY(20px);

    transition:
        opacity 1.2s ease,
        transform 1.2s ease;

}


/* ---------- VISIBLE STATE ---------- */

#lessons .section-header > div.show,
#lessons .section-header > p.show,
#lessons .about-card-grid .level-card.show {

    opacity: 1;

    transform: translateY(0);

}


/* ---------- CARD STAGGER ---------- */

#lessons .about-card-grid .level-card:nth-child(1) {
    transition-delay: 0.2s;
}

#lessons .about-card-grid .level-card:nth-child(2) {
    transition-delay: 0.4s;
}

#lessons .about-card-grid .level-card:nth-child(3) {
    transition-delay: 0.6s;
}



/* ==================================================
   PACKAGES SECTION SCROLL FADE-IN
================================================== */

#packages .section-header > div,
#packages .section-header > p,
#packages .about-card-grid .level-card {

    opacity: 0;

    transform: translateY(20px);

    transition:
        opacity 1.2s ease,
        transform 1.2s ease;

}


/* ---------- VISIBLE STATE ---------- */

#packages .section-header > div.show,
#packages .section-header > p.show,
#packages .about-card-grid .level-card.show {

    opacity: 1;

    transform: translateY(0);

}


/* ---------- CARD STAGGER ---------- */

#packages .about-card-grid .level-card:nth-child(1) {
    transition-delay: 0.2s;
}

#packages .about-card-grid .level-card:nth-child(2) {
    transition-delay: 0.4s;
}

#packages .about-card-grid .level-card:nth-child(3) {
    transition-delay: 0.6s;
}

 /* ==================================================
   TESTIMONIALS SECTION SCROLL FADE-IN
================================================== */

#testimonials .section-header > div,
#testimonials .section-header > p,
#testimonials .about-card-grid .level-card {

    opacity: 0;

    transform: translateY(20px);

    transition:
        opacity 1.2s ease,
        transform 1.2s ease;

}


/* ---------- VISIBLE STATE ---------- */

#testimonials .section-header > div.show,
#testimonials .section-header > p.show,
#testimonials .about-card-grid .level-card.show {

    opacity: 1;

    transform: translateY(0);

}


/* ---------- CARD STAGGER ---------- */

/* ---------- CARD STAGGER ---------- */

#testimonials .about-card-grid .level-card:nth-child(1) {
    transition-delay: 0.2s;
}

#testimonials .about-card-grid .level-card:nth-child(2) {
    transition-delay: 0.4s;
}

#testimonials .about-card-grid .level-card:nth-child(3) {
    transition-delay: 0.6s;
}

#testimonials .about-card-grid .level-card:nth-child(4) {
    transition-delay: 0.8s;
}

#testimonials .about-card-grid .level-card:nth-child(5) {
    transition-delay: 1.0s;
}

#testimonials .about-card-grid .level-card:nth-child(6) {
    transition-delay: 1.2s;
}

/* ==================================================
   CONTACT SECTION SCROLL FADE-IN
================================================== */

#contact .section-header > div,
#contact .section-header > p,
#contact .intro-text > p,
#contact .contact-form {

    opacity: 0;

    transform: translateY(20px);

    transition:
        opacity 1.2s ease,
        transform 1.2s ease;

}


/* ---------- VISIBLE STATE ---------- */

#contact .section-header > div.show,
#contact .section-header > p.show,
#contact .intro-text > p.show,
#contact .contact-form.show {

    opacity: 1;

    transform: translateY(0);

}


/* ---------- CONTACT TEXT STAGGER ---------- */

#contact .intro-text > p:nth-child(1) {
    transition-delay: 0.2s;
}

#contact .intro-text > p:nth-child(2) {
    transition-delay: 0.4s;
}

#contact .intro-text > p:nth-child(3) {
    transition-delay: 0.6s;
}


/* ---------- CONTACT FORM ---------- */

#contact .contact-form {
    transition-delay: 0.8s;
}


/* ==================================================
   FOOTER SCROLL FADE-IN
================================================== */

.site-footer .footer-container > div,
.site-footer .footer-bottom {

    opacity: 0;

    transform: translateY(20px);

    transition:
        opacity 1.2s ease,
        transform 1.2s ease;

}


/* ---------- VISIBLE STATE ---------- */

.site-footer .footer-container > div.show,
.site-footer .footer-bottom.show {

    opacity: 1;

    transform: translateY(0);

}


/* ---------- FOOTER STAGGER ---------- */

.site-footer .footer-container > div:nth-child(1) {
    transition-delay: 0.2s;
}

.site-footer .footer-container > div:nth-child(2) {
    transition-delay: 0.4s;
}

.site-footer .footer-bottom {
    transition-delay: 0.6s;
}



/* ==================================================
   HERO FADE ANIMATION
================================================== */

@keyframes heroFade {

    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}



.section-container {
    width:
        min(
            calc(100% - 60px),
            1200px
        );

    margin: 0 auto;
}

.section-eyebrow {
    display: block;

    margin-bottom: 10px;

    color: #164056;

    font-size: clamp(1.1rem, 1.5vw, 1.35rem);

    font-weight: 600;

    letter-spacing: 0.26em;
	
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.introduction {
    padding: 105px 0 110px;

    background: #FDF6EE;

    color: #222;
}

.intro-heading {
    max-width: 720px;
	margin-bottom: 35px;
}


.intro-heading h2 {
    color: #366177;

    font-size: clamp(2.15rem, 3.75vw, 3.5rem);

    line-height: 1.05;

    letter-spacing: -0.045em;
	
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.intro-heading h2 span {
    display: block;

    color: #164056;

    font-weight: 300;

}

.intro-content {
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    gap: 70px;
    align-items: start;
}

.intro-text {
    display: flex;
    flex-direction: column;

}


.intro-text p {
    margin-bottom: 17px;

    color: #366177;
    
	font-size: clamp(0.9375rem, 1vw, 1.0625rem);
	
	letter-spacing: 0px;
	
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.intro-text p:last-child {
    margin-bottom: 0;
}

.intro-note {
    display: flex;

    gap: 22px;

    padding: 28px;

    background: #FDF6EE;

    border-radius: 16px;

	border: 1px solid #77A6BD;

    border-left: 5px solid #164056;

    box-shadow: 0 15px 40px rgba(22, 64, 86, 0.05);
}


.contact-form {
    padding: 32px;

    background: #E9E7E2;

    border: 1px solid #77A6BD;

    border-left: 5px solid #164056;

    border-radius: 16px;

    box-shadow: 0 15px 40px rgba(22, 64, 86, 0.20);
}


.contact-form form {
    display: flex;

    flex-direction: column;

    gap: 12px;
}


.contact-form label {
    color: #164056;

    font-size: 0.875rem;

    font-weight: 600;

    letter-spacing: 0.3px;
}


.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;

    padding: 13px 15px;

    border: 1px solid #C8C1B8;

    border-radius: 8px;

    background: #FFFFFF;

    color: #164056;

    font-family: inherit;

    font-size: 0.9375rem;

    outline: none;

    transition: border-color 0.25s ease;
}


.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    border-color: #366177;
}


.contact-form textarea {
    resize: vertical;

    min-height: 120px;
}


.contact-form button {
    margin-top: 8px;

    padding: 14px 24px;

    border: none;

    border-radius: 8px;

    background: #164056;

    color: #FFFFFF;

    font-family: inherit;

    font-size: 0.9375rem;

    font-weight: 600;

    letter-spacing: 0.3px;

    cursor: pointer;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}


.contact-form button:hover {
    background: #366177;

    transform: translateY(-1px);
}


.form-privacy {
    margin-top: 6px;

    color: #366177;

    font-size: 0.75rem;

    line-height: 1.6;
}


.form-privacy a {
    color: #164056;

    text-decoration: underline;
}


.contact-email {
    color: #164056;

    font-weight: 600;

    text-decoration: none;
}


.contact-email:hover {
    text-decoration: underline;
}



.intro-photo {
    display: flex;
    align-items: flex-start;

    background: #FDF9F2;

    border-radius: 10px;

    border: 1px solid rgba(22, 64, 86, 0.10);

    box-shadow: 0 10px 25px rgba(22, 64, 86, 0.06);

    overflow: hidden;
	
	align-self: start;
}

.intro-photo img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}




/* ==================================================
   INTRODUCTION VIDEO
================================================== */

.intro-photo video {

    display: block;

    width: 100%;

    max-width: 520px;

    height: auto;

    margin: 0 auto;

    border-radius: 20px;

    object-fit: cover;

}




.intro-note-link {
	display: block;

	color: inherit;

	text-decoration: none;

	transition:
		color 0.25s ease,
		transform 0.25s ease;
}

.intro-note-link:hover {
	
	transform: translateX(2px);
}

.note-number {
    color: #164056;

    font-size: clamp(0.875rem, 1.5vw, 1rem);

    font-weight: 900;
}

.intro-note h3 {
    margin-bottom: 7px;

    color: #366177;

    font-size: clamp(1.1rem, 1.5vw, 1.35rem);
	
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.intro-note p {
    color: #366177;

    font-size: clamp(0.9375rem, 1vw, 1.0625rem);
}


.courses {
    padding: 110px 0 120px;

    background: #FFFFFF;
}

.section-header {
    display: flex;

    justify-content: space-between;

    align-items: end;

    gap: 40px;

    margin-bottom: 50px;
}

.section-header h2 {
    color: #366177;

    font-size: clamp(2.15rem, 3.75vw, 3.5rem);

    line-height: 1.05;

    letter-spacing: -0.045em;
	
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.section-header h2 span {
    display: block;

    color: #164056;

    font-weight: 300;
}

.section-header > p {
    max-width: 330px;

    color: #366177;

    font-size: clamp(0.9375rem, 1vw, 1.0625rem);
	

}



.site-footer {
    background: #164056;

    color: #FFFFFF;
}

.footer-container {
    width:
        min(
            calc(100% - 60px),
            1200px
        );

    margin: 0 auto;

    padding: 50px 0;

    display: flex;

    align-items: center;

    gap: 60px;
}

.footer-container strong {
    font-size: clamp(0.875rem, 1.5vw, 1rem);
	
	letter-spacing: 0.3px;

	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.footer-container p {
    margin-top: 4px;

    color: rgba(255, 255, 255, 0.55);

    font-size: clamp(0.875rem, 1.5vw, 1rem);
	
	letter-spacing: 0.6px;

	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.footer-links {
    display: flex;

    flex-wrap: wrap;

    gap: 22px;

    align-items: center;
}


.footer-links a {
    color: rgba(255, 255, 255, 0.70);
	
    font-size: clamp(0.8rem, 0.8vw, 0.9rem);
		
	letter-spacing: 0.6px;

	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);

    transition: all 0.25s ease;
}

.footer-links a:hover {
    color: #FFFFFF;
}

.footer-bottom {
    border-top:
        1px solid
        rgba(255, 255, 255, 0.10);

    text-align: center;

    padding: 18px;
}

.footer-bottom p {
    color: rgba(255, 255, 255, 0.40);
	
    font-size: clamp(0.8rem, 0.8vw, 0.9rem);
		
	letter-spacing: 0.6px;

	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.footer-social {
    display: flex;

    align-items: center;

	margin-left: 70px;



    gap: 18px;
}


.footer-social a {
    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: rgba(255, 255, 255, 0.70);

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}


.footer-social a:hover {
    color: #FFFFFF;

    transform: translateY(-2px);
}


.footer-social svg {
    width: 20px;

    height: 20px;

    fill: currentColor;

    stroke: currentColor;

    stroke-width: 1.5;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.course-hero {
    position: relative;
    min-height: 760px;
    display: flex;
    align-items: flex-start;
    overflow: hidden;
    color: #FFFFFF;
}

.course-hero-image {
    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

	margin-top: 75px;
	
    object-fit: cover;
	
	object-position: center;
}

.course-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(22, 64, 86, 0.92) 0%,
            rgba(22, 64, 86, 0.76) 45%,
            rgba(22, 64, 86, 0.35) 78%,
            rgba(22, 64, 86, 0.18) 100%
        );
}

.course-hero-content {
    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding:
        185px 30px 80px;
}

.course-hero-eyebrow {
    
	display: block;

    margin-bottom: 20px;

    color: #FDF6EE;

    font-size: clamp(0.8125rem, 1.2vw, 1.15rem);

    font-weight: 400;

    letter-spacing: 2px;
	
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.course-hero-eyebrow span {
    display: block;

    margin-bottom: 20px;

    color: #FDF6EE;

    font-size: clamp(0.8125rem, 1.2vw, 0.875rem);

    font-weight: 400;

    letter-spacing: 2px;
	
}

.course-hero h1 {
    max-width: 760px;

    color: #FFFFFF;

    font-size:
        clamp(2.3rem, 5vw, 5.8rem);

    line-height: 0.98;

    letter-spacing: -0.05em;

    font-weight: 800;
	
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
		
	
}
.course-hero-content h1 .hero-line:nth-child(1),
.course-hero-content h1 .hero-line:nth-child(2) {
    font-weight: 700;
}

.course-hero h1 span {
    display: block;
    color: #FFFFFF;
    font-weight: 300;
}

.course-hero h1 .hero-line:nth-child(3) {
    color: #FDF6EE;
}


.course-hero-content p  {
    max-width: 660px;

    margin-top: 24px;

    color: #E9E7E2;
	
    font-size: clamp(0.9375rem, 1vw, 1.0625rem);
	
    letter-spacing: 0px;
	
    line-height: 1.5;
}

.course-hero-button {
    margin-top: 32px;

    background: #164056;

    color: #FFFFFF;
}

.course-hero-button:hover {
    background: #366177;
}

.conversation-levels {
    padding:
        25px 0 120px;

    background: #FDF6EE;
}

.about-card-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr 1fr;

    gap: 24px;
}



/* EYEBROW*/

.level-label.package-eyebrow {
    display: inline-flex;
    align-items: center;
}


.global-eyebrow {
    display: inline-flex;
	border-radius: 20px 20px 20px 20px;
	padding: 8px 20px;
}

.package-eyebrow {
    display: inline-flex;
	border-radius: 15px 15px 15px 15px;
	padding: 4px 10px;
}

.cream-eyebrow {

    background: #FDF6EE;
	border:
        1px solid
        #C1C9CA;
	color: #366177;
}

.white-eyebrow {

    background: #FFFFFF;
	border:
        1px solid
        #C1C9CA;
	color: #366177;
}

.blue-eyebrow {
 
    background: #366177;
    border: 1px solid #77A6BD;
}

.pale-blue-eyebrow {

    background: #EAF1F4;
    border: 1px solid #B8CDD6;
    color: #366177;
}


.level-card {
    position: relative;

    padding: 42px;

    background: #FFFFFF;

    border:
        1px solid
        #164056;

    border-radius: 20px;

    box-shadow:
        0 15px 40px
        rgba(22, 64, 86, 0.08);

    transition:
        all 0.25s ease;
}

.level-card:hover {
    transform:
        translateY(-5px);

    box-shadow:
        0 20px 45px
        rgba(22, 64, 86, 0.13);
}

.level-card-dark {
    background: #366177;

    border-color: #366177;

    color: #FFFFFF;
}

/* ==================================================
   ENGLISH COACHING PACKAGES
================================================== */

#packages .about-card-grid .level-card:nth-child(1),
#packages .about-card-grid .level-card:nth-child(3) {

    background-color: #FFFFFF;

}



/* ==================================================
   ENGLISH LESSONS & IELTS COACHING
================================================== */

#lessons .about-card-grid .level-card:nth-child(1),
#lessons .about-card-grid .level-card:nth-child(3) {

    background-color: #FDF6EE;

}





.level-number {
    position: absolute;

    top: 16px;
    right: 16px;

    display: grid;

    place-items: center;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background: rgba(22, 64, 86, 0.83);

    color: #FFFFFF;

    font-size: clamp(0.875rem, 1.5vw, 1rem);

    font-weight: 800;
}

.level-label {
    display: block;

    margin-bottom: 14px;

    color: #164056;

    font-size: clamp(0.8rem, 1.2vw, 1.15rem);


    font-weight: 700;

    letter-spacing: 0px;
	
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.level-card-dark .level-label {
    color: #FDF6EE;
}

.level-card h2 {
    margin-bottom: 18px;

    color: #366177;

	font-size: clamp(1.225rem, 1.75vw, 1.55rem);
	
    line-height: 1.05;

    letter-spacing: -0.04em;
	
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.level-card-dark h2 {
    color: #FFFFFF;
}

.level-card > p {
    max-width: 500px;

    margin-bottom: 27px;

    color: #366177;

	font-size: clamp(0.9375rem, 1vw, 1.0625rem);

    line-height: 1.5;
	
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.level-card-dark > p {
    color:
        rgba(255, 255, 255, 0.76);
}

.level-card ul {
    list-style: none;

    margin-bottom: 32px;
}


.level-card li {
    padding:
        9px 0;

    border-bottom:
        1px solid
        #C1C9CA;

    color: #366177;

	font-size: clamp(0.9375rem, 1vw, 1.0625rem);

    font-weight: 500;
	
	letter-spacing: 0px;
	
	line-height: 1.6;

    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.level-card li:last-child {
    border-bottom: none;
}

.level-card-dark li {
    border-color:
        rgba(255, 255, 255, 0.14);

    color: #FDF6EE;
}

.level-link {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #164056;

	font-size: clamp(0.9375rem, 1vw, 1.0625rem);

    font-weight: 800;

    letter-spacing: 0.3px;
	
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.level-link span {
    transition:
        all 0.25s ease;
}

.level-link:hover span {
    transform:
        translateX(5px);
}

.level-card-dark .level-link {
    color: #FDF6EE;
}

/* ==================================================
   BRITISH ENGLISH LEARNING CENTRE
================================================== */

.learning-centre-section {

    background-color: #164056;

    padding: 50px 30px;

}


/* ==================================================
   CAROUSEL
================================================== */

.learning-centre-carousel {

    position: relative;

    width: 100%;

}


/* ==================================================
   VIEWPORT
================================================== */

.learning-centre-viewport {

    width: 70%;

    margin: 0 auto;

    overflow: hidden;

}

/* ==================================================
   TRACK
================================================== */

.learning-centre-track {

    display: flex;

    gap: 18px;

    width: 100%;

    overflow-x: auto;

    overflow-y: hidden;

    scroll-behavior: smooth;

    scroll-snap-type: x mandatory;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

}


.learning-centre-track::-webkit-scrollbar {

    display: none;

}

.learning-centre-track.is-dragging {

    cursor: grabbing;

    scroll-behavior: auto;

}
.learning-centre-track {

    cursor: grab;

}

/* ==================================================
   SLIDES — DESKTOP
================================================== */

.learning-centre-slide {

    display: block;

    flex:
        0 0
        calc(
            ((100% - 36px) / 3) * 0.90
        );

    min-width: 0;

    overflow: hidden;

    border-radius: 18px;

    scroll-snap-align: start;

    text-decoration: none;

}


.learning-centre-slide img {

    display: block;

    width: 100%;

    height: auto;

    aspect-ratio: 4 / 5;

    object-fit: cover;

}


/* ==================================================
   ARROWS
================================================== */

.learning-centre-arrow {

    position: absolute;

    top: 50%;

    z-index: 5;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 44px;

    height: 44px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background:
        rgba(
            253,
            246,
            238,
            0.92
        );

    color: #366177;

    font-size: 34px;

    font-weight: 300;

    line-height: 1;

    transform:
        translateY(-50%);

    cursor: pointer;

    box-shadow:
        0 4px 12px
        rgba(
            22,
            64,
            86,
            0.15
        );

}


.learning-centre-arrow-left {

    left: 12px;

}


.learning-centre-arrow-right {

    right: 12px;

}


.learning-centre-arrow:hover {

    background: #FDF6EE;

}


.learning-centre-arrow:active {

    transform:
        translateY(-50%)
        scale(0.94);

}


/* ==================================================
   INDICATOR LINES
================================================== */

.learning-centre-indicators {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 5px;

    margin-top: 16px;

}


.learning-centre-indicator {

    display: block;

    width: 18px;

    height: 3px;

    border-radius: 3px;

    background-color:
        rgba(
            22,
            22,
            22,
            0.25
        );

    transition:
        background-color 0.25s ease,
        width 0.25s ease;

}


.learning-centre-indicator.active {

    width: 24px;

    background-color: #111111;

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 768px) {

    .learning-centre-section {

        padding:
            40px 20px;

    }


    .learning-centre-track {

        gap: 0;

    }


    .learning-centre-slide {

        flex:
            0 0 100%;

        width: 100%;

        scroll-snap-align: start;

    }


    .learning-centre-slide img {

        aspect-ratio: 4 / 5;

    }


    .learning-centre-arrow {

        width: 40px;

        height: 40px;

        font-size: 30px;

    }


    .learning-centre-arrow-left {

        left: 10px;

    }


    .learning-centre-arrow-right {

        right: 10px;

    }


    .learning-centre-indicators {

        margin-top: 14px;

    }


    .learning-centre-indicator {

        width: 16px;

    }


    .learning-centre-indicator.active {

        width: 22px;

    }

}




/* ==================================================
CANCELLATION & REFUND POLICY
================================================== */

.legal-content {
padding: 100px 0 120px;


background: #FFFFFF;


}

/* --------------------------------------------------
TWO-COLUMN POLICY LAYOUT
-------------------------------------------------- */

.legal-layout {
display: grid;


grid-template-columns: 280px minmax(0, 1fr);

gap: 70px;

align-items: start;


}

/* --------------------------------------------------
TABLE OF CONTENTS
-------------------------------------------------- */

.contents {
position: sticky;


top: 30px;

align-self: start;


}

.contents-card {
padding: 28px 24px;


background: #FDF6EE;

border: 1px solid #E9E7E2;

border-left: 4px solid #164056;

border-radius: 14px;

box-shadow:
    0 12px 30px
    rgba(22, 64, 86, 0.08);


}

.contents-card h2 {
margin-bottom: 20px;


color: #164056;

font-size: 1.15rem;

font-weight: 800;

letter-spacing: -0.02em;


}

.contents-card nav {
display: flex;


flex-direction: column;

gap: 2px;


}

.contents-card nav a {
display: block;


padding: 8px 10px;

border-radius: 6px;

color: #366177;

font-size: 0.875rem;

line-height: 1.4;

transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;


}

.contents-card nav a:hover {
background: #E9E7E2;


color: #164056;

transform: translateX(2px);


}




.contents-card nav a.active {
background: #366177;


color: #FDF6EE;

font-weight: 700;


}

/* --------------------------------------------------
POLICY TEXT
-------------------------------------------------- */

.legal-text {
min-width: 0;


max-width: 800px;


}

.legal-text section {
scroll-margin-top: 35px;


padding-bottom: 65px;

margin-bottom: 65px;

border-bottom: 1px solid #E9E7E2;


}

.legal-text section:last-child {
padding-bottom: 0;


margin-bottom: 0;

border-bottom: none;


}

.legal-text h2 {
margin-bottom: 25px;


color: #366177;

font-size: clamp(1.55rem, 2.2vw, 2rem);

line-height: 1.1;

letter-spacing: -0.035em;


}

.legal-text h3 {
margin-bottom: 10px;


color: #164056;

font-size: 1rem;

line-height: 1.3;

font-weight: 800;


}

.legal-text p {
margin-bottom: 17px;


color: #366177;

font-size: clamp(0.9375rem, 1vw, 1.0625rem);

line-height: 1.65;


}

.legal-text p:last-child {
margin-bottom: 0;
}

.legal-text strong {
color: #164056;
}

.legal-text ul {
margin: 0 0 22px 20px;


color: #366177;


}

.legal-text li {
margin-bottom: 9px;


padding-left: 5px;

font-size: clamp(0.9375rem, 1vw, 1.0625rem);

line-height: 1.6;


}

.legal-text a {
color: #164056;


font-weight: 700;

text-decoration: underline;

text-decoration-color: #77A6BD;

text-underline-offset: 3px;

transition: color 0.25s ease;


}

.legal-text a:hover {
color: #366177;
}

/* --------------------------------------------------
INFORMATION BOXES
-------------------------------------------------- */

.info-box {
margin: 28px 0;


padding: 25px 28px;

background: #FDF6EE;

border: 1px solid #E9E7E2;

border-left: 4px solid #77A6BD;

border-radius: 10px;


}

.info-box p {
margin-bottom: 10px;
}

.info-box p:last-child {
margin-bottom: 0;
}

/* --------------------------------------------------
LEGAL NOTICES
-------------------------------------------------- */

.legal-notice {
margin: 25px 0;


padding: 20px 24px;

background: #E9E7E2;

border-radius: 10px;

border-left: 4px solid #164056;


}

.legal-notice p {
margin-bottom: 0;
}

/* --------------------------------------------------
CALCULATIONS
-------------------------------------------------- */

.calculation {
margin-top: 14px;


padding: 14px 18px;

background: #FFFFFF;

border-radius: 8px;

color: #164056 !important;

font-size: 1rem !important;

font-weight: 700;


}

/* --------------------------------------------------
TABLES
-------------------------------------------------- */

.package-table-wrapper {
width: 100%;


margin: 28px 0;

overflow-x: auto;

border: 1px solid #E9E7E2;

border-radius: 10px;


}

.package-table {
width: 100%;


border-collapse: collapse;

background: #FFFFFF;

color: #366177;

font-size: 0.9375rem;


}

.package-table th {
padding: 14px 16px;


background: #164056;

color: #FDF6EE;

text-align: left;

font-weight: 700;

white-space: nowrap;


}

.package-table td {
padding: 14px 16px;


border-top: 1px solid #E9E7E2;

vertical-align: top;

line-height: 1.5;


}

.package-table tbody tr:nth-child(even) {
background: #FDF6EE;
}

/* --------------------------------------------------
CONTACT LINK
-------------------------------------------------- */

.contact-link {
display: inline-flex;


margin-top: 5px;

padding: 10px 16px;

background: #164056;

border-radius: 999px;

color: #FDF6EE !important;

text-decoration: none !important;

font-weight: 700;

transition:
    background 0.25s ease,
    transform 0.25s ease;


}

.contact-link:hover {
background: #366177;


color: #FFFFFF !important;

transform: translateY(-2px);


}


/* ==================================================
   THANK YOU PAGE
================================================== */

.thank-you-content {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.thank-you-content h2 {
    margin: 14px 0 24px;
}

.thank-you-message {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 16px;
}

.thank-you-details {
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.8;
}


/* ==================================================
   NETLIFY HONEYPOT
================================================== */

.hidden {
    display: none;
}







/* ==================================================
   MAIN SITE MOBILE
================================================== */

@media (max-width: 900px) {


    /* ==================================================
       HEADER
    ================================================== */

    .header-container {
        height: 72px;

        padding: 0 24px;
    }

    .main-nav,
    .header-button {
        display: none;
    }

    .mobile-menu-button {
        display: flex;
    }


    /* ==================================================
       MOBILE NAVIGATION
    ================================================== */

    .mobile-nav {
        display: none;

        flex-direction: column;

        padding: 15px 24px 22px;
    }

    .mobile-nav.open {
        display: flex;
    }


    /* ==================================================
       HERO
    ================================================== */

    .course-hero {
        min-height: 680px;
    }

    .course-hero-image {
        margin-top: 0;
    }

    .course-hero-content {
        padding: 145px 24px 70px;
    }


    /* ==================================================
       INTRODUCTION
    ================================================== */

    .intro-content {
        grid-template-columns: 1fr;

        gap: 40px;
    }


    /* ==================================================
       SECTION HEADERS
    ================================================== */

    .section-header {
        align-items: flex-start;

        flex-direction: column;

        gap: 25px;

        margin-bottom: 40px;
    }

    .section-header > p {
        max-width: 600px;
    }


    /* ==================================================
       CARD GRIDS
    ================================================== */

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

        gap: 24px;
    }


    /* ==================================================
       SECTION SPACING
    ================================================== */

    .courses {
        padding: 80px 0 90px;
    }

    .conversation-levels {
        padding: 25px 0 80px;
    }


    /* ==================================================
       FOOTER
    ================================================== */

    .footer-container {
        flex-direction: column;

        align-items: flex-start;

        gap: 30px;

        padding: 40px 0;
    }

    .footer-social {
        margin-left: 0;
    }

}


/* ==================================================
   PRINT / PDF
================================================== */


@media print {

    @page {
        size: A4;
    }

    body {
        background: #fff;
    }
	
	body {
        zoom: 0.9;
    }

	
    .header-button,
    footer,
	header	{
        display: none !important;
    }
	
	#page-break-special,
	.intro-photo,
    .print-break {
        break-before: page;
        page-break-before: always;
		margin-top: 15mm;
    }

	.level-card {

		margin-top: 15mm;
    }

	
}






/* ==================================================
POLICY MOBILE
================================================== */

@media (max-width: 900px) {


.legal-layout {
    grid-template-columns: 1fr;

    gap: 45px;
}

.contents {
    position: relative;

    top: auto;
}

.contents-card nav {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 3px 8px;
}

.legal-text {
    max-width: none;
}


}

@media (max-width: 600px) {


	.legal-content {
		padding: 70px 0 80px;
	}

	.legal-layout {
		gap: 35px;
	}

	.contents-card {
		padding: 22px 18px;
	}

	.contents-card nav {
		grid-template-columns: 1fr;
	}

	.contents-card nav a {
		padding: 9px 8px;
	}

	.legal-text section {
		padding-bottom: 45px;

		margin-bottom: 45px;
	}

	.info-box {
		padding: 20px;
	}

	.legal-notice {
		padding: 18px 20px;
	}

	.package-table {
		min-width: 600px;
	}

}

 /* ==================================================
    STICKY BOTTOM BAR
 ================================================== */

 .sticky-bottom-bar {

     position: fixed;

     left: 0;
     right: 0;
     bottom: 0;

     z-index: 1000;

     display: grid;

     grid-template-columns:
         1fr 1fr 1fr;

     height: 60px;

     background:
         rgba(
             22,
             64,
             86,
             0.90
         );

     border-top:
         1px solid
         rgba(
             119,
             166,
             189,
             0.45
         );

     box-shadow:
         0 -4px 16px
         rgba(
             22,
             64,
             86,
             0.16
         );

     backdrop-filter:
         blur(8px);

     -webkit-backdrop-filter:
         blur(8px);

     transform:
         translateY(100%);

     opacity: 0;

     transition:
         transform 0.45s ease,
         opacity 0.45s ease;

 }


 /* ==================================================
    VISIBLE STATE
 ================================================== */

 .sticky-bottom-bar.sticky-bottom-visible {

     transform:
         translateY(0);

     opacity: 1;

 }


 /* ==================================================
    SHARED SECTIONS
 ================================================== */

 .sticky-bottom-section,
 .sticky-bottom-book {

     display: flex;

     align-items: center;

     justify-content: center;

     min-width: 0;

     height: 100%;

     color: #FFFFFF;

     font-size:
         clamp(
             0.6875rem,
             1vw,
             0.8125rem
         );

     font-weight: 600;

     letter-spacing: 0.2px;

     text-decoration: none;

     white-space: nowrap;

 }


 /* ==================================================
    LEFT AND RIGHT
 ================================================== */

 .sticky-bottom-left {

     border-right:
         1px solid
         rgba(
             253,
             246,
             238,
             0.14
         );

 }


 .sticky-bottom-right {

     border-left:
         1px solid
         rgba(
             253,
             246,
             238,
             0.14
         );

 }

/* ==================================================
   REVIEW STARS
================================================== */

.sticky-bottom-stars {

    color: #FDF6EE;

    font-size:
        clamp(
            0.75rem,
            1vw,
            0.875rem
        );

    font-weight: 700;

    letter-spacing: 1px;

    text-shadow:
        0 0 5px
        rgba(
            253,
            246,
            238,
            0.45
        );

}


 /* ==================================================
    BOOK A LESSON
 ================================================== */
.sticky-bottom-book {

    background:
        rgba(
            119,
            166,
            189,
            0.45
        );

    color: #FDF6EE;

    font-weight: 700;

    letter-spacing: 0.8px;

    text-shadow:
        0 1px 3px
        rgba(
            0,
            0,
            0,
            0.25
        );

    transition:
        background 0.25s ease,
        color 0.25s ease;

}


 .sticky-bottom-book:hover {

     background:
         rgba(
             119,
             166,
             189,
             0.75
         );

     color: #FFFFFF;

 }


 /* ==================================================
    MOBILE
 ================================================== */

 @media (max-width: 768px) {

     .sticky-bottom-bar {

         grid-template-columns: 1fr;

         height: 62px;

     }


     .sticky-bottom-left,
     .sticky-bottom-right {

         display: none;

     }


     .sticky-bottom-book {

         width: 100%;

         font-size:
             clamp(
                 0.8125rem,
                 2vw,
                 0.9375rem
             );

         letter-spacing: 0.8px;

     }

 }

/* ==================================================
   STUDENT TESTIMONIALS — MOBILE CAROUSEL
================================================== */


/* ---------- MOBILE ONLY ---------- */

@media (max-width: 768px) {

    .testimonials-carousel {

        width: 100%;

        overflow: hidden;

    }


    .testimonials-carousel .about-card-grid {

        display: flex;

        flex-wrap: nowrap;

        gap: 20px;

        width: 100%;

        overflow-x: auto;

        overflow-y: hidden;

        padding-bottom: 10px;

        scroll-snap-type: x mandatory;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;

    }


    /* Hide scrollbar */

    .testimonials-carousel .about-card-grid::-webkit-scrollbar {

        display: none;

    }


    /* ---------- TESTIMONIAL CARDS ---------- */

    .testimonials-carousel .level-card {

        flex: 0 0 88%;

        width: 88%;

        min-width: 0;

        scroll-snap-align: start;

    }

}

/* ==================================================
   TESTIMONIAL SLIDE INDICATORS
================================================== */

.testimonial-indicators {

    display: none;

}


@media (max-width: 768px) {

    .testimonial-indicators {

        display: flex;

        justify-content: center;

        align-items: center;

        gap: 5px;

        margin-top: 14px;

    }


    .testimonial-indicator {

        display: block;

        width: 18px;

        height: 3px;

        border-radius: 3px;

        background: rgba(
            54,
            97,
            119,
            0.25
        );

        transition:
            background 0.25s ease,
            width 0.25s ease;

    }


    .testimonial-indicator.active {

        width: 24px;

        background: #366177;

    }

}


/* ==================================================
   TESTIMONIALS — MOBILE SWIPE HINT
================================================== */

.testimonials-swipe-hint {

    display: none;

}


@media (max-width: 768px) {

    .testimonials-carousel {

        position: relative;

    }


    .testimonials-swipe-hint {

        display: flex;

        position: absolute;

        top: 50%;

        right: 6px;

        z-index: 5;

        transform: translateY(-50%);

        align-items: center;

        justify-content: center;

        width: 44px;

        height: 44px;

        padding: 0;

        border: none;

        border-radius: 50%;

        background:
            rgba(
                253,
                246,
                238,
                0.90
            );

        color: #366177;

        font-family: inherit;

        font-size: 28px;

        font-weight: 400;

        line-height: 1;

        box-shadow:
            0 4px 12px
            rgba(
                22,
                64,
                86,
                0.12
            );

        cursor: pointer;

        -webkit-tap-highlight-color: transparent;

        transition:
            opacity 0.25s ease,
            background 0.2s ease;

    }


    .testimonials-swipe-hint:hover {

        background:
            rgba(
                253,
                246,
                238,
                1
            );

    }


    .testimonials-swipe-hint:active {

        transform:
            translateY(-50%)
            scale(0.94);

    }


    .testimonials-swipe-hint span {

        display: block;

        transform: translateY(-1px);

    }

}











/* ==================================================
   WHY STUDY — MOBILE CAROUSEL
================================================== */

.why-study-carousel {

    width: 100%;

    overflow: hidden;

}


.why-study-indicators {

    display: none;

}


@media (max-width: 768px) {

    .why-study-carousel .about-card-grid {

        display: flex;

        flex-wrap: nowrap;

        gap: 20px;

        width: 100%;

        overflow-x: auto;

        overflow-y: hidden;

        padding-bottom: 10px;

        scroll-snap-type: x mandatory;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;

    }


    .why-study-carousel .about-card-grid::-webkit-scrollbar {

        display: none;

    }


    .why-study-carousel .intro-note {

		flex: 0 0 88%;
		width: 88%;

        min-width: 0;

        scroll-snap-align: start;

    }


    .why-study-indicators {

        display: flex;

        justify-content: center;

        align-items: center;

        gap: 5px;

        margin-top: 14px;

    }


    .why-study-indicator {

        display: block;

        width: 18px;

        height: 3px;

        border-radius: 3px;

        background: rgba(
            54,
            97,
            119,
            0.25
        );

        transition:
            background 0.25s ease,
            width 0.25s ease;

    }


    .why-study-indicator.active {

        width: 24px;

        background: #366177;

    }

}

/* ==================================================
   WHY STUDY — MOBILE SWIPE HINT
================================================== */

.why-study-swipe-hint {

    display: none;

}


@media (max-width: 768px) {

    .why-study-carousel {

        position: relative;

    }


    .why-study-swipe-hint {

        display: flex;

        position: absolute;

        top: 50%;

        right: 6px;

        z-index: 5;

        transform: translateY(-50%);

        align-items: center;

        justify-content: center;

        width: 44px;

        height: 44px;

        padding: 0;

        border: none;

        border-radius: 50%;

        background:
            rgba(
                253,
                246,
                238,
                0.90
            );

        color: #366177;

        font-family: inherit;

        font-size: 28px;

        font-weight: 400;

        line-height: 1;

        box-shadow:
            0 4px 12px
            rgba(
                22,
                64,
                86,
                0.12
            );

        cursor: pointer;

        -webkit-tap-highlight-color: transparent;

        transition:
            opacity 0.25s ease,
            background 0.2s ease;

    }


    .why-study-swipe-hint:hover {

        background:
            rgba(
                253,
                246,
                238,
                1
            );

    }


    .why-study-swipe-hint:active {

        transform:
            translateY(-50%)
            scale(0.94);

    }


    .why-study-swipe-hint span {

        display: block;

        transform: translateY(-1px);

    }

}


/* ==================================================
   QUALIFICATIONS — MOBILE CAROUSEL
================================================== */

.qualifications-carousel {

    width: 100%;

    overflow: hidden;

}


.qualifications-indicators {

    display: none;

}


@media (max-width: 768px) {

    .qualifications-carousel .about-card-grid {

        display: flex;

        flex-wrap: nowrap;

        gap: 20px;

        width: 100%;

        overflow-x: auto;

        overflow-y: hidden;

        padding-bottom: 10px;

        scroll-snap-type: x mandatory;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;

    }


    .qualifications-carousel .about-card-grid::-webkit-scrollbar {

        display: none;

    }


    .qualifications-carousel .level-card {

        flex: 0 0 88%;

        width: 88%;

        min-width: 0;

        scroll-snap-align: start;

    }


    .qualifications-indicators {

        display: flex;

        justify-content: center;

        align-items: center;

        gap: 5px;

        margin-top: 14px;

    }


    .qualifications-indicator {

        display: block;

        width: 18px;

        height: 3px;

        border-radius: 3px;

        background: rgba(
            54,
            97,
            119,
            0.25
        );

        transition:
            background 0.25s ease,
            width 0.25s ease;

    }


    .qualifications-indicator.active {

        width: 24px;

        background: #366177;

    }

}

/* ==================================================
   QUALIFICATIONS — MOBILE SWIPE HINT
================================================== */

.qualifications-swipe-hint {

    display: none;

}


@media (max-width: 768px) {

    .qualifications-carousel {

        position: relative;

    }


    .qualifications-swipe-hint {

        display: flex;

        position: absolute;

        top: 50%;

        right: 6px;

        z-index: 5;

        transform: translateY(-50%);

        align-items: center;

        justify-content: center;

        width: 44px;

        height: 44px;

        padding: 0;

        border: none;

        border-radius: 50%;

        background:
            rgba(
                253,
                246,
                238,
                0.90
            );

        color: #366177;

        font-family: inherit;

        font-size: 28px;

        font-weight: 400;

        line-height: 1;

        box-shadow:
            0 4px 12px
            rgba(
                22,
                64,
                86,
                0.12
            );

        cursor: pointer;

        -webkit-tap-highlight-color: transparent;

        transition:
            opacity 0.25s ease,
            background 0.2s ease;

    }


    .qualifications-swipe-hint:hover {

        background:
            rgba(
                253,
                246,
                238,
                1
            );

    }


    .qualifications-swipe-hint:active {

        transform:
            translateY(-50%)
            scale(0.94);

    }


    .qualifications-swipe-hint span {

        display: block;

        transform: translateY(-1px);

    }

}

/* ==================================================
   LESSONS — MOBILE CAROUSEL
================================================== */

.lessons-carousel {
    width: 100%;
    overflow: hidden;
}

.lessons-indicators {
    display: none;
}


@media (max-width: 768px) {

    .lessons-carousel .about-card-grid {

        display: flex;

        flex-wrap: nowrap;

        gap: 20px;

        width: 100%;

        overflow-x: auto;

        overflow-y: hidden;

        padding-bottom: 10px;

        scroll-snap-type: x mandatory;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;

    }


    .lessons-carousel .about-card-grid::-webkit-scrollbar {

        display: none;

    }


    .lessons-carousel .level-card {

        flex: 0 0 88%;

        width: 88%;

        min-width: 0;

        scroll-snap-align: start;

    }


    .lessons-indicators {

        display: flex;

        justify-content: center;

        align-items: center;

        gap: 5px;

        margin-top: 14px;

    }


    .lessons-indicator {

        display: block;

        width: 18px;

        height: 3px;

        border-radius: 3px;

        background: rgba(
            54,
            97,
            119,
            0.25
        );

        transition:
            background 0.25s ease,
            width 0.25s ease;

    }


    .lessons-indicator.active {

        width: 24px;

        background: #366177;

    }

}
/* ==================================================
   LESSONS — MOBILE SWIPE HINT
================================================== */

.lessons-swipe-hint {

    display: none;

}


@media (max-width: 768px) {

    .lessons-carousel {

        position: relative;

    }


    .lessons-swipe-hint {

        display: flex !important;

        position: absolute !important;

        top: 50% !important;

        right: 6px !important;

        z-index: 10 !important;

        transform: translateY(-50%) !important;

        align-items: center !important;

        justify-content: center !important;

        width: 44px !important;

        height: 44px !important;

        min-width: 44px !important;

        min-height: 44px !important;

        margin: 0 !important;

        padding: 0 !important;

        border: none !important;

        border-radius: 50% !important;

        background:
            rgba(
                253,
                246,
                238,
                0.90
            ) !important;

        color: #366177 !important;

        font-family: inherit;

        font-size: 28px !important;

        font-weight: 400 !important;

        line-height: 1 !important;

        box-shadow:
            0 4px 12px
            rgba(
                22,
                64,
                86,
                0.12
            ) !important;

        cursor: pointer;

        -webkit-tap-highlight-color: transparent;

        appearance: none;

        -webkit-appearance: none;

        transition:
            opacity 0.25s ease,
            background 0.2s ease;

    }


    .lessons-swipe-hint:hover {

        background:
            rgba(
                253,
                246,
                238,
                1
            ) !important;

    }


    .lessons-swipe-hint:active {

        transform:
            translateY(-50%)
            scale(0.94);

    }


    .lessons-swipe-hint span {

        display: block;

        transform: translateY(-1px);

    }

}


/* ==================================================
   ENGLISH COACHING PACKAGES — MOBILE CAROUSEL
================================================== */

.packages-carousel {
    width: 100%;
    overflow: hidden;
}

.packages-indicators {
    display: none;
}

@media (max-width: 768px) {

    .packages-carousel .about-card-grid {

        display: flex;
        flex-wrap: nowrap;
        gap: 20px;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 10px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;

    }

    .packages-carousel .about-card-grid::-webkit-scrollbar {
        display: none;
    }

    .packages-carousel .level-card {

        flex: 0 0 88%;
        width: 88%;
        min-width: 0;
        scroll-snap-align: start;

    }

    .packages-indicators {

        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
        margin-top: 14px;

    }

    .packages-indicator {

        display: block;
        width: 18px;
        height: 3px;
        border-radius: 3px;
        background: rgba(54, 97, 119, 0.25);

        transition:
            background 0.25s ease,
            width 0.25s ease;

    }

    .packages-indicator.active {

        width: 24px;
        background: #366177;

    }

}

/* ==================================================
   ENGLISH COACHING PACKAGES — MOBILE SWIPE HINT
================================================== */

.packages-swipe-hint {
    display: none;
}

@media (max-width: 768px) {

    .packages-carousel {
        position: relative;
    }

    .packages-swipe-hint {

        display: flex !important;

        position: absolute !important;

        top: 50% !important;

        right: 6px !important;

        z-index: 10 !important;

        transform: translateY(-50%) !important;

        align-items: center !important;

        justify-content: center !important;

        width: 44px !important;
        height: 44px !important;

        min-width: 44px !important;
        min-height: 44px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: none !important;
        border-radius: 50% !important;

        background:
            rgba(
                253,
                246,
                238,
                0.90
            ) !important;

        color: #366177 !important;

        font-family: inherit;

        font-size: 28px !important;
        font-weight: 400 !important;
        line-height: 1 !important;

        box-shadow:
            0 4px 12px
            rgba(
                22,
                64,
                86,
                0.12
            ) !important;

        cursor: pointer;

        -webkit-tap-highlight-color: transparent;

        appearance: none;
        -webkit-appearance: none;

        transition:
            opacity 0.25s ease,
            background 0.2s ease;

    }

    .packages-swipe-hint:hover {

        background:
            rgba(
                253,
                246,
                238,
                1
            ) !important;

    }

    .packages-swipe-hint:active {

        transform:
            translateY(-50%)
            scale(0.94) !important;

    }

    .packages-swipe-hint span {

        display: block;
        transform: translateY(-1px);

    }

}


/* ==================================================
   FIRST LESSON PROMOTION POP-UP
================================================== */

.promotion-popup {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px;

    visibility: hidden;

    opacity: 0;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;

}


/* ==================================================
   ACTIVE STATE
================================================== */

.promotion-popup.is-visible {

    visibility: visible;

    opacity: 1;

}


/* ==================================================
   BACKGROUND OVERLAY
================================================== */

.promotion-popup-overlay {

    position: absolute;

    inset: 0;

    background:
        rgba(
            22,
            64,
            86,
            0.65
        );

}


/* ==================================================
   POP-UP CONTENT
================================================== */

.promotion-popup-content {

    position: relative;

    z-index: 1;

    width: min(
        440px,
        100%
    );

    padding: 42px 40px 38px;

    background-color: #FDF6EE;

    border-radius: 20px;

    text-align: center;

    box-shadow:
        0 20px 60px
        rgba(
            0,
            0,
            0,
            0.22
        );

    transform:
        translateY(15px)
        scale(0.98);

    transition:
        transform 0.35s ease;

}


.promotion-popup.is-visible
.promotion-popup-content {

    transform:
        translateY(0)
        scale(1);

}


/* ==================================================
   CLOSE BUTTON
================================================== */

.promotion-popup-close {

    position: absolute;

    top: 14px;

    right: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 36px;

    height: 36px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background-color: transparent;

    color: #164056;

    font-size: 27px;

    font-weight: 300;

    line-height: 1;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;

}


.promotion-popup-close:hover {

    background-color: #E9E7E2;

}


/* ==================================================
   EYEBROW
================================================== */

.promotion-popup-eyebrow {

    display: block;

    margin-bottom: 12px;

    color: #366177;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.16em;

    text-transform: uppercase;

}


/* ==================================================
   HEADING
================================================== */

.promotion-popup-content h2 {

    margin:
        0 20px 16px;

    color: #164056;

    font-size: 30px;

    font-weight: 600;

    line-height: 1.2;

}


/* ==================================================
   DESCRIPTION
================================================== */

.promotion-popup-text {

    max-width: 360px;

    margin:
        0 auto 24px;

    color: #366177;

    font-size: 16px;

    line-height: 1.6;

}


/* ==================================================
   PROMOTION CODE
================================================== */

.promotion-popup-code {

    display: inline-flex;

    flex-direction: column;

    align-items: center;

    gap: 5px;

    min-width: 190px;

    margin-bottom: 24px;

    padding:
        14px 24px;

    border:
        1px solid
        rgba(
            54,
            97,
            119,
            0.25
        );

    border-radius: 12px;

    background-color: #E9E7E2;

}


.promotion-popup-code-label {

    color: #366177;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.14em;

    text-transform: uppercase;

}


.promotion-popup-code strong {

    color: #164056;

    font-size: 24px;

    font-weight: 700;

    letter-spacing: 0.08em;

}


/* ==================================================
   EMAIL BUTTON
================================================== */

.promotion-popup-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 48px;

    padding:
        12px 28px;

    border-radius: 8px;

    background-color: #164056;

    color: #FDF6EE;

    font-size: 15px;

    font-weight: 600;

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;

}


.promotion-popup-button:hover {

    background-color: #366177;

    transform:
        translateY(-1px);

}


/* ==================================================
   DISMISS LINK
================================================== */

.promotion-popup-dismiss {

    display: block;

    margin:
        16px auto 0;

    padding: 4px 8px;

    border: none;

    background: transparent;

    color: #6A7378;

    font-size: 13px;

    cursor: pointer;

}


.promotion-popup-dismiss:hover {

    color: #164056;

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 600px) {

    .promotion-popup {

        padding: 20px;

    }


    .promotion-popup-content {

        width: 100%;

        padding:
            38px 24px 30px;

        border-radius: 18px;

    }


    .promotion-popup-content h2 {

        margin:
            0 12px 14px;

        font-size: 26px;

    }


    .promotion-popup-text {

        font-size: 15px;

    }


    .promotion-popup-code {

        min-width: 175px;

    }

}



/* ==================================================
   CONTACT / LET'S TALK — CREAM BACKGROUND
================================================== */

.contact-section {
    background: #FDF6EE;
}