:root {
--yellow: #FFC107;
--yellow-dark: #e6a800;
--dark: #1a1a2e;
--teal: #ffc107;
--pink: #ff6b9d;
--green: #4caf50;
--light-bg: #f8f9fa;
--card-bg: #fff;
}
body { font-family: 'Nunito', sans-serif; color: #000; overflow-x: hidden; background:url(../image/bg_01.jpg) fixed;}
h1,h2,h3,h4,h5 { font-family: 'Poppins', sans-serif; }
p{
font-size:16px;
}
.w-700{
width:700px;
margin:0 auto;
}
.navbar { background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.08); padding: 0;}
.navbar-brand { font-family: 'Poppins', sans-serif; font-weight: 900; font-size: 1.4rem; color: var(--dark) !important; }
.navbar-brand span { color: var(--yellow); }
.nav-link { font-weight: 800; color: #000 !important; font-size: 14px; padding: 0 30px !important;}
.btn-cta { background: var(--yellow); color: #000 !important; font-weight: 700;     border-radius: 0; padding: 20px 30px; border: none; }
.btn-cta:hover { background: var(--yellow-dark); }
.hero{position:relative;overflow:hidden;height:90vh;text-align:center;}
video{width:100%;}
.position-absolute{position:absolute;top:0;left:0;width:100%;height:100%;}
.hero::before {content: '';position: absolute; inset: 0;background: rgb(0 0 0 / 42%);height:100%;width:100%;}

.trust-bar { padding: 60px 0; background:url(../image/bg_02.jpg);}
.trust-bar h2 { font-weight: 700; font-size: 2.5rem; color: var(--dark);}
.trust-badge { text-align: center; }
.trust-badge .num { font-family: 'Poppins', sans-serif; font-weight: 900; font-size: 2rem; color: var(--dark); }
.trust-badge .lbl { font-size: .82rem; color: #666; }
.review-card { background: #fff; border-radius: 16px; padding: 1rem 1.2rem; box-shadow: 0 4px 20px rgba(0,0,0,.08);   min-height: 200px;}
.review-card .stars { color: var(--yellow); }
.feature-tag { border-radius: 12px; padding: .8rem 1rem; font-size: .82rem; font-weight: 600; }
.btn-book{    font-weight: 700;background: #ffc107;padding: 14px 30px; color:#000;font-size:18px;}
.section-block4{
	 padding: 60px 0; background:url(../image/bg_02.jpg);
}




 .hero h1 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 700; line-height: 1.15; color:#fff; }
    .hero p {max-width: 700px; margin:0 auto; color:#fff; }
    .hero .btn-yellow { background: var(--yellow); color: #000; font-weight: 800; border-radius: 30px; padding: .7rem 2rem; font-size: 1rem; border: none;     margin: 0 auto;}
    .hero .btn-yellow:hover { background: var(--yellow-dark); }
    .stat-pill { background: rgba(255,255,255,.12); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.2); border-radius: 12px; padding: .6rem 1rem; display: inline-flex; align-items: center; gap: .5rem; color:#fff;}
    .stat-pill .stat-num { font-weight: 800; font-size: 1.1rem; }
    .stat-pill .stat-label { font-size: .75rem; opacity: .8; }

    .section-videos {padding: 70px 0; }
    .video-thumb { border-radius: 14px; overflow: hidden; position: relative; cursor: pointer; }
    .video-thumb img { width: 100%; height: 180px; object-fit: cover; transition: transform .3s; }
    .video-thumb:hover img { transform: scale(1.05); }
    .play-btn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
    .play-btn i { font-size: 2.8rem; color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.5); }
    .quote-card { background: #fff; border-radius: 16px; padding: 1.5rem; box-shadow: 0 4px 20px rgba(0,0,0,.08); }
	.section-videos h2{ font-weight: 600; color:#000; font-size: 3rem;}
    /* ── EXPERT TUTOR 1 ── */
    .section-expert1 { padding: 70px 0; }
    .section-expert1 h2 {  font-weight: 600; color:#000; font-size: 3rem; }
    .benefit-strip { display: flex; gap: 1.5rem; flex-wrap: wrap; }
    .benefit-item { display: flex; align-items: flex-start; gap: .75rem; }
    .benefit-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1rem; }

    .strip-features {padding: 40px 0; border-top: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; }
    .strip-feature { padding: 2rem 2.5rem; border-radius: 12px; }
   .strip-feature h6 {
    font-weight: 700;
    font-size: 18px;
    margin-bottom: .2rem;
    text-transform: uppercase;
}
    .strip-feature p { font-size: 16px; margin: 0; }
    .sf-teal   { background: #e0f7f6; color: #000; border:1px solid #9fd9d6; }
    .sf-yellow { background: #FFE0FD; color: #000; border:1px solid #c7c5b0;}
    .sf-blue   { background: #FFF1CC; color: #000; border:1px solid #c1b38f;}

    .section-expert2 { padding: 70px 0;}
    .section-expert2 h2, .section-block4 h2{  font-weight: 600; color:#000; font-size: 3rem;}
    .goal-card { border-radius: 14px; padding: 1rem; font-size: .82rem; font-weight: 600; text-align: center; cursor: pointer; transition: transform .2s; border: 2px solid transparent; }
    .goal-card:hover { transform: translateY(-3px); }
    .goal-pink   { background: #fce7f3; color: #be185d; }
    .goal-blue   { background: #dbeafe; color: #1d4ed8; }
    .goal-green  { background: #dcfce7; color: #15803d; }
    .goal-purple { background: #f3e8ff; color: #7c3aed; }
    .goal-orange { background: #ffedd5; color: #c2410c; }
    .learner-img { border-radius: 50%; width: 80px; height: 80px; object-fit: cover; }

    /* ── FOR PARENTS ── */
    .section-parents { padding: 70px 0; }
    .section-parents h2 { font-weight: 600; color:#000; font-size: 3rem; }
    .parent-feature { display: flex; align-items: flex-start; gap: .8rem; margin-bottom: 1.2rem; }
    .pf-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.1rem; }

    .section-faq { padding: 70px 0;  }
    .section-faq h2 {  font-weight: 600; color:#000; font-size: 3rem;  }
    .accordion-button { font-weight: 500; font-size: 20px; color:#000; }
    .accordion-button:not(.collapsed) { color: var(--dark); background: #ffffff; }

    .section-join { background: #111; color: #fff; padding: 80px 0; }
    .section-join h2 {  font-weight: 600; color:#fff; font-size: 3rem; }
    .section-join p { opacity: .8; }
    .btn-get-started { background: var(--yellow); color: #000; font-weight: 800; border-radius: 30px; padding: .8rem 2.4rem; font-size: 1rem; border: none; }
    .btn-get-started:hover { background: var(--yellow-dark); }


    footer { background: #fff; color: #aaa; font-size: .85rem; padding: 50px 0 30px; }
    footer h6 { color: #fff; font-weight: 700; margin-bottom: 1rem; font-size: .9rem; }
    footer a { color: #000; text-decoration: none; display: block; margin-bottom: .4rem; font-weight:700; font-size: 14px; }
    footer a:hover { color: var(--yellow); }
    .footer-brand { font-family: 'Poppins', sans-serif; font-weight: 900; font-size: 1.3rem; color: #fff; }
    .footer-brand span { color: var(--yellow); }
    .social-icon { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.1); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: .9rem; margin-right: .4rem; text-decoration: none !important; transition: background .2s; }
    .social-icon:hover { background: var(--yellow); color: #000; }

    .section-label { font-size: .8rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--teal); margin-bottom: .5rem; }
    .stars-sm { color: var(--yellow); font-size: .8rem; }
    @media(max-width:767px){
    .position-absolute {position: static !important; background:#000;}
.hero::before{content:none;}
.w-700 {width: 100%;}
.section-expert1 h2, .section-expert2 h2, .section-faq h2, .section-videos h2 {   font-size: 2rem;}
    }
    
    .field input, .field textarea, .field select {
    width: 100%;
    border: 1px solid #ccd9f6;
    border-radius: 10px;
    background: #fff;
    color: #1d2c4c;
    font: inherit;
    font-size: 16px;
    line-height: 1.35;
    padding: .72rem .78rem;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.lead-form-grid {
    grid-template-columns: 1fr 1fr;
    gap: .9rem;
    margin-top: 0;
}