@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Open+Sans:wght@400;500;600;700&display=swap');

:root {
  --bg-page:#0a0a16; --bg-card:#15162c; --bg-nav:rgba(10,10,22,0.97);
  --bg-topbar:#1c1d35; --bg-footer:#050509; --bg-alt:#14152a;
  --text-main:#edeef6; --text-muted:#b8bad4; --text-head:#ffffff;
  --border-subtle:rgba(255,255,255,0.10); --shadow-card:0 8px 32px rgba(0,0,0,0.45);
  --input-bg:rgba(255,255,255,0.07); --input-border:rgba(255,167,51,0.3);
  --primary:#FFA733; --primary-dark:#e08800; --accent:#33D6C6;
  --grad-hero:linear-gradient(135deg,#1a0e3d 0%,#0d1c3f 50%,#0d2c1e 100%);
  --grad-primary:linear-gradient(135deg,#FFA733,#FFE66D);
  --radius:14px; --radius-lg:22px;
  --font-head:'Poppins',sans-serif; --font-body:'Open Sans',sans-serif;
  --transition:all 0.3s cubic-bezier(.4,0,.2,1);
}
body.light {
  --bg-page:#f7f8fc; --bg-card:#ffffff; --bg-nav:rgba(255,255,255,0.98);
  --bg-topbar:#fff4e2; --bg-footer:#16172c; --bg-alt:#eef0f8;
  --text-main:#23233f; --text-muted:#4b4b6b; --text-head:#14142b;
  --border-subtle:rgba(0,0,0,0.09); --shadow-card:0 4px 20px rgba(20,20,40,0.08);
  --input-bg:#fafbff; --input-border:rgba(255,159,28,0.35);
  --grad-hero:linear-gradient(135deg,#fff4e2,#e9f2ff 50%,#eafff6);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{font-family:var(--font-body);background:var(--bg-page);color:var(--text-main);line-height:1.7;transition:background .3s,color .3s;overflow-x:hidden;}
.container{max-width:1180px;margin:0 auto;padding:0 1.5rem;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
img{max-width:100%;display:block;}
h1,h2,h3,h4,h5{font-family:var(--font-head);color:var(--text-head);line-height:1.2;}
.text-gradient{background:var(--grad-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

/* TOP BAR */
.top-bar{background:var(--bg-topbar);padding:.55rem 1rem;text-align:center;font-size:.88rem;color:#cc7700;font-weight:700;border-bottom:2px solid var(--primary);transition:var(--transition);}
body.light .top-bar{color:#883300;}
.top-bar a{color:var(--primary);margin:0 .75rem;}

/* HEADER */
header{background:var(--bg-nav);backdrop-filter:blur(12px);position:sticky;top:0;z-index:1000;border-bottom:2px solid var(--primary);box-shadow:0 4px 24px rgba(255,159,28,.1);transition:var(--transition);max-width:100%;}
header nav{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.5rem;gap:1rem;}

/* LOGO */
.logo{display:flex;align-items:center;gap:.6rem;}
.logo-svg{width:42px;height:42px;flex-shrink:0;}
.logo-text{font-family:var(--font-head);font-size:1.5rem;font-weight:800;background:var(--grad-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.5px;}

/* NAV */
.nav-menu{display:flex;gap:1.6rem;align-items:center;}
.nav-menu a{font-weight:700;font-size:.92rem;color:var(--text-main);position:relative;padding-bottom:3px;transition:color .25s;}
.nav-menu a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--grad-primary);transition:width .3s;border-radius:2px;}
.nav-menu a:hover,.nav-menu a.active{color:var(--primary);}
.nav-menu a:hover::after,.nav-menu a.active::after{width:100%;}

/* DARK/LIGHT TOGGLE */
.theme-toggle{display:flex;align-items:center;gap:.45rem;cursor:pointer;flex-shrink:0;}
.toggle-track{width:52px;height:27px;background:#333355;border-radius:50px;position:relative;transition:background .3s;border:2px solid var(--primary);}
body.light .toggle-track{background:#ffe0a0;}
.toggle-thumb{position:absolute;top:2px;left:2px;width:19px;height:19px;background:var(--primary);border-radius:50%;transition:transform .35s cubic-bezier(.68,-.55,.27,1.55);display:flex;align-items:center;justify-content:center;font-size:.7rem;box-shadow:0 2px 8px rgba(0,0,0,.3);}
body.light .toggle-thumb{transform:translateX(25px);}
.toggle-label{font-size:.78rem;font-weight:800;color:var(--primary);min-width:26px;}

/* HAMBURGER */
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;}
.hamburger span{width:25px;height:3px;background:var(--primary);border-radius:3px;transition:var(--transition);}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.8rem 1.8rem;border-radius:50px;font-family:var(--font-head);font-size:1rem;font-weight:800;cursor:pointer;border:none;transition:var(--transition);text-align:center;}
.btn-primary{background:var(--grad-primary);color:#1a0a00;box-shadow:0 4px 20px rgba(255,159,28,.3);}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(255,159,28,.5);}
.btn-secondary{background:transparent;color:var(--primary);border:2.5px solid var(--primary);}
.btn-secondary:hover{background:var(--primary);color:#1a0a00;}
.btn-large{padding:1rem 2.4rem;font-size:1.1rem;}
.btn:disabled{opacity:.65;cursor:not-allowed;transform:none!important;}

/* PAGE HEADER */
.page-header{background:var(--grad-hero);padding:3rem 1.5rem 2.5rem;text-align:center;border-bottom:3px solid var(--primary);position:relative;overflow:hidden;}
.page-header h1{font-size:2.8rem;margin-bottom:.75rem;}
.page-header p{font-size:1.1rem;color:var(--text-muted);}

/* SECTION HEADINGS */
.section-title{font-size:2.3rem;text-align:center;margin-bottom:.5rem;}
.section-subtitle{text-align:center;color:var(--text-muted);font-size:1.05rem;margin-bottom:3rem;}

/* HERO */
.hero{background:var(--grad-hero);padding:3.5rem 0;position:relative;overflow:hidden;transition:var(--transition);max-width:100%;}
.hero::before{content:'';position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(255,159,28,.15) 0%,transparent 70%);top:-80px;right:-80px;pointer-events:none;}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;}
.hero-tag{display:inline-block;background:rgba(255,159,28,.15);color:var(--primary);font-weight:800;font-size:.88rem;padding:.35rem 1rem;border-radius:50px;margin-bottom:1.2rem;border:1.5px solid rgba(255,159,28,.3);}
.hero-title{font-size:3.2rem;margin-bottom:1rem;line-height:1.1;}
.hero-desc{font-size:1.05rem;color:var(--text-muted);margin-bottom:2rem;line-height:1.8;}
.hero-desc strong{color:var(--primary);}
.cta-buttons{display:flex;gap:1rem;flex-wrap:wrap;}
.stats-row{display:flex;gap:2rem;margin-top:2.5rem;flex-wrap:wrap;}
.stat-item{text-align:center;}
.stat-number{font-family:var(--font-head);font-size:2rem;font-weight:800;color:var(--primary);display:block;}
.stat-label{font-size:.82rem;color:var(--text-muted);font-weight:700;}

/* CODE WINDOW */
.code-window{background:rgba(10,10,30,.9);border-radius:var(--radius-lg);overflow:hidden;border:2px solid rgba(255,159,28,.4);box-shadow:0 0 50px rgba(255,159,28,.15),var(--shadow-card);}
.window-header{background:rgba(255,255,255,.06);padding:.7rem 1.1rem;display:flex;align-items:center;gap:.5rem;border-bottom:1px solid rgba(255,255,255,.08);}
.dot{width:12px;height:12px;border-radius:50%;}
.dot.red{background:#ff5f56;} .dot.yellow{background:#ffbd2e;} .dot.green{background:#27c93f;}
.window-title{margin-left:auto;font-size:.82rem;color:#888;}
.code-content{padding:1.4rem;font-family:'Courier New',monospace;font-size:.88rem;line-height:1.9;}
.code-keyword{color:#ff79c6;} .code-function{color:#50fa7b;} .code-string{color:#f1fa8c;} .code-comment{color:#6272a4;} .code-var{color:#8be9fd;}

/* QUICK ACTIONS */
.quick-actions{padding:2.5rem 0;}
.actions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
.action-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:2rem 1.5rem;text-align:center;border:2px solid var(--border-subtle);transition:var(--transition);box-shadow:var(--shadow-card);}
.action-card:hover{transform:translateY(-8px);border-color:var(--primary);box-shadow:0 16px 40px rgba(255,159,28,.2);}
.action-card.card-1{border-color:rgba(46,196,182,.3);} .action-card.card-2{border-color:rgba(255,159,28,.3);} .action-card.card-3{border-color:rgba(231,29,54,.3);}
.action-icon{font-size:3.2rem;margin-bottom:1rem;}
.action-card h3{font-size:1.2rem;color:var(--primary);margin-bottom:.5rem;}
.action-card p{color:var(--text-muted);font-size:.92rem;margin-bottom:1rem;font-style:normal;}
.action-link{color:var(--accent);font-weight:800;}
.action-link:hover{color:var(--primary);}

/* WHY CHOOSE */
.why-choose-us{padding:2.5rem 0;}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
.feature-card{background:var(--bg-card);padding:1.8rem;border-radius:var(--radius);border:2px solid var(--border-subtle);text-align:center;transition:var(--transition);box-shadow:var(--shadow-card);}
.feature-card:hover{border-color:var(--primary);transform:translateY(-5px);}
.feature-icon{font-size:2.6rem;margin-bottom:1rem;}
.feature-card h3{color:var(--primary);margin-bottom:.5rem;}
.feature-card p{color:var(--text-muted);font-size:.92rem;}

/* COURSE CARDS (home) */
.featured-courses{padding:2.5rem 0;}
.courses-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.8rem;}
.course-card{background:var(--bg-card);border-radius:var(--radius-lg);overflow:hidden;border:2px solid var(--border-subtle);transition:var(--transition);box-shadow:var(--shadow-card);display:block;color:inherit;}
.course-card:hover{transform:translateY(-8px);border-color:var(--primary);box-shadow:0 16px 40px rgba(255,159,28,.2);}
.course-img-wrap{position:relative;height:175px;overflow:hidden;}
.course-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.course-card:hover .course-img-wrap img{transform:scale(1.08);}
.course-badge{position:absolute;top:.8rem;right:.8rem;background:var(--primary);color:#1a0a00;font-size:.75rem;font-weight:800;padding:.25rem .75rem;border-radius:50px;}
.course-body{padding:1.4rem;}
.course-body h3{font-size:1.2rem;color:var(--text-head);margin-bottom:.4rem;}
.course-body p{color:var(--text-muted);font-size:.9rem;margin-bottom:.8rem;}
.course-highlights{margin-bottom:.75rem;}
.course-highlights li{color:var(--text-muted);font-size:.86rem;padding:.2rem 0;}
.course-meta{display:flex;gap:1rem;padding-top:.75rem;border-top:1px solid var(--border-subtle);}
.course-meta span{font-size:.8rem;color:var(--text-muted);}
.view-all-courses{text-align:center;margin-top:3rem;}

/* ── INDIVIDUAL COURSE PAGE ── */
.course-hero{background:var(--grad-hero);padding:2.5rem 0;border-bottom:3px solid var(--primary);}
body.dark .course-hero{background:linear-gradient(135deg,#1a0a3e,#0d1b3e);}
.course-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;}
.course-hero-img{border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 20px 60px rgba(59,111,232,.18);border:3px solid var(--primary);}
.course-hero-img img{width:100%;height:280px;object-fit:cover;}
.course-hero-badge{display:inline-block;background:var(--primary);color:#fff;padding:.3rem 1rem;border-radius:50px;font-size:.82rem;font-weight:700;margin-bottom:.9rem;box-shadow:0 4px 12px rgba(255,140,0,.3);}
.course-hero-title{font-size:2.5rem;margin-bottom:.75rem;line-height:1.1;}
.course-hero-desc{font-size:1rem;color:var(--text-muted);margin-bottom:1.5rem;line-height:1.8;}
.eligibility-tag{display:inline-flex;align-items:center;gap:.4rem;background:var(--secondary-light);color:var(--secondary);padding:.4rem 1rem;border-radius:50px;font-size:.85rem;font-weight:600;border:1.5px solid rgba(59,111,232,.2);margin-bottom:1.2rem;}
body.dark .eligibility-tag{background:rgba(59,111,232,.15);}

.course-content{padding:3rem 0;}
.course-content-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:3rem;align-items:start;}
.course-about h2{font-size:1.8rem;color:var(--text-head);margin-bottom:1rem;padding-left:.9rem;border-left:4px solid var(--primary);}
.course-about p{color:var(--text-muted);margin-bottom:1rem;line-height:1.85;font-size:.97rem;}
.course-about p strong{color:var(--text-head);}
.learn-list{margin:1.2rem 0 1.5rem;display:grid;grid-template-columns:1fr 1fr;gap:.55rem;}
.learn-item{display:flex;align-items:center;gap:.5rem;background:var(--primary-light);border-radius:var(--radius);padding:.6rem .9rem;font-size:.88rem;font-weight:600;color:var(--text-main);border:1.5px solid rgba(255,140,0,.15);}
body.dark .learn-item{background:rgba(255,140,0,.08);}

.video-box{background:var(--bg-alt);border-radius:var(--radius-lg);overflow:hidden;border:2px solid var(--border-subtle);box-shadow:var(--shadow-card);}
body.dark .video-box{background:#111122;}
.video-box .video-placeholder{width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,#1e1e2e,#2d2d4e);display:flex;align-items:center;justify-content:center;font-size:4rem;cursor:pointer;position:relative;}
.video-box .video-frame{width:100%;aspect-ratio:16/9;border:0;display:block;}
.video-play-btn{position:absolute;width:60px;height:60px;background:var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;box-shadow:0 8px 24px rgba(255,140,0,.4);transition:var(--transition);}
.video-play-btn:hover{transform:scale(1.1);}
.video-info{padding:1.2rem;}
.video-info h4{color:var(--text-head);margin-bottom:.3rem;font-size:1rem;}
.video-info p{color:var(--text-muted);font-size:.85rem;}

.course-cta-box{background:linear-gradient(135deg,var(--primary-light),var(--secondary-light));border-radius:var(--radius-lg);padding:2rem;border:2px solid rgba(255,140,0,.2);text-align:center;margin-top:2rem;}
body.dark .course-cta-box{background:rgba(255,140,0,.06);}
.course-cta-box h3{color:var(--text-head);margin-bottom:.5rem;font-size:1.4rem;}
.course-cta-box p{color:var(--text-muted);margin-bottom:1.3rem;font-size:.92rem;}

/* COURSES PAGE */
.courses-section{padding:2rem 0 1.5rem;}
.courses-nav{background:var(--bg-nav);padding:1rem 0;position:sticky;top:72px;z-index:100;border-bottom:1px solid var(--border-subtle);transition:var(--transition);}
.course-categories{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center;}
.category-btn{padding:.55rem 1.3rem;background:transparent;border:2px solid rgba(255,159,28,.25);border-radius:50px;color:var(--text-main);font-weight:700;font-size:.88rem;cursor:pointer;transition:var(--transition);font-family:var(--font-body);text-decoration:none;display:inline-block;}
.category-btn:hover,.category-btn.active{background:var(--primary);color:#1a0a00;border-color:var(--primary);}
/* Offset scroll for sticky header + sticky course nav */
.courses-section[id]{scroll-margin-top:140px;}
.category-title{display:flex;align-items:center;gap:.75rem;font-size:1.8rem;margin-bottom:1.8rem;color:var(--primary);}
.courses-list{display:flex;flex-direction:column;gap:1.5rem;}
.course-detail-card{background:var(--bg-card);border-radius:var(--radius-lg);overflow:hidden;border:2px solid var(--border-subtle);transition:var(--transition);box-shadow:var(--shadow-card);}
.course-detail-card:hover{border-color:var(--primary);box-shadow:0 12px 30px rgba(255,159,28,.15);}
.course-detail-header{display:flex;align-items:center;gap:1.5rem;padding:1.6rem;}
.course-detail-header img{width:120px;height:85px;object-fit:cover;border-radius:var(--radius);flex-shrink:0;}
.course-detail-header h3{font-size:1.5rem;color:#fff;margin-bottom:.3rem;}
.course-detail-header p{color:rgba(255,255,255,.8);font-size:.9rem;}
.course-detail-body{padding:1.6rem;background:rgba(0,0,0,.15);}
body.light .course-detail-body{background:rgba(0,0,0,.03);}
.course-detail-body h4{color:var(--primary);margin-bottom:.75rem;}
.checkmark-list{margin-bottom:1.5rem;}
.checkmark-list li{padding:.4rem 0;color:var(--text-main);}
.course-actions{display:flex;gap:1rem;flex-wrap:wrap;}
/* CTA BANNER */
.cta-banner{padding:3rem 0;background:linear-gradient(135deg,rgba(255,159,28,.06),rgba(46,196,182,.06));border-top:2px solid rgba(255,159,28,.15);border-bottom:2px solid rgba(255,159,28,.15);margin:2rem 0;}
.cta-content{text-align:center;}
.cta-content h2{font-size:2.4rem;color:var(--primary);margin-bottom:.75rem;}
.cta-content p{color:var(--text-muted);font-size:1.1rem;margin-bottom:2rem;}

/* TESTIMONIALS */
.testimonials-section{padding:5rem 0;}
.testimonial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:1.8rem;margin-top:2rem;}
.testimonial-card{background:var(--bg-card);padding:1.8rem;border-radius:var(--radius-lg);border-left:4px solid var(--primary);box-shadow:var(--shadow-card);transition:var(--transition);}
.testimonial-card:hover{transform:translateY(-5px);box-shadow:0 12px 30px rgba(255,159,28,.15);}
.t-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;}
.t-avatar{width:50px;height:50px;border-radius:50%;background:var(--grad-primary);display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:800;color:#1a0a00;flex-shrink:0;}
.t-name{font-weight:800;color:var(--text-head);}
.t-role{font-size:.86rem;color:var(--text-muted);}
.t-stars{color:#FFD700;font-size:.95rem;margin-bottom:.7rem;}
.t-text{color:var(--text-muted);font-style:italic;line-height:1.75;margin-bottom:.7rem;}
.t-course{display:inline-block;background:rgba(255,159,28,.1);color:var(--primary);padding:.28rem .9rem;border-radius:50px;font-size:.8rem;font-weight:700;border:1px solid rgba(255,159,28,.22);}

/* FACEBOOK REVIEWS */
.fb-reviews-section{padding:4rem 0;}
.fb-embed-wrap{background:var(--bg-card);border-radius:var(--radius-lg);padding:2rem;border:2px solid #1877F2;box-shadow:var(--shadow-card);text-align:center;}
.fb-embed-wrap h3{color:#1877F2;margin-bottom:1rem;font-size:1.5rem;}
.fb-embed-wrap p{color:var(--text-muted);margin-bottom:1.5rem;}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:3rem;align-items:start;padding:4rem 0;}
.about-photo-wrap{position:sticky;top:100px;}
.about-photo{background:var(--grad-primary);border-radius:var(--radius-lg);aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;font-size:6rem;box-shadow:0 20px 60px rgba(255,159,28,.25);border:4px solid var(--primary);}
.about-badge-row{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.5rem;}
.about-badge{background:var(--bg-card);border:2px solid var(--primary);border-radius:50px;padding:.45rem 1.1rem;font-size:.86rem;font-weight:700;color:var(--primary);}
.about-content h2{font-size:2.3rem;margin-bottom:.5rem;}
.about-content h2 span{color:var(--primary);}
.about-intro{font-size:1.05rem;line-height:1.9;color:var(--text-muted);margin-bottom:2rem;padding-left:1rem;border-left:4px solid var(--primary);}
.about-section-title{font-size:1.3rem;color:var(--primary);margin-bottom:1rem;display:flex;align-items:center;gap:.5rem;}
.goal-list,.offer-list{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:2rem;}
.goal-item,.offer-item{background:var(--bg-card);padding:.75rem 1rem;border-radius:var(--radius);border:1px solid var(--border-subtle);font-size:.9rem;color:var(--text-main);display:flex;align-items:center;gap:.5rem;transition:var(--transition);}
.goal-item:hover,.offer-item:hover{border-color:var(--primary);}
.why-list{display:flex;flex-direction:column;gap:.6rem;margin-bottom:2rem;}
.why-item{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem 1rem;background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border-subtle);transition:var(--transition);}
.why-item:hover{border-color:var(--primary);}
.why-icon{font-size:1.25rem;flex-shrink:0;}
.why-text{font-size:.92rem;color:var(--text-muted);}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-top:3rem;}
.info-box{background:var(--bg-card);padding:2rem;border-radius:var(--radius-lg);border:2px solid var(--border-subtle);margin-bottom:2rem;box-shadow:var(--shadow-card);}
.info-box h3{color:var(--primary);margin-bottom:1.5rem;font-size:1.35rem;}
.contact-item{display:flex;align-items:flex-start;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--border-subtle);}
.contact-item:last-child{border-bottom:none;}
.ci-icon{font-size:1.4rem;flex-shrink:0;}
.ci-label{font-weight:800;color:var(--text-head);margin-bottom:.2rem;font-size:.92rem;}
.ci-value{color:var(--text-muted);font-size:.9rem;}
.form-group{margin-bottom:1.3rem;}
.form-group label{display:block;margin-bottom:.4rem;color:var(--primary);font-weight:700;font-size:.88rem;}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:.85rem 1rem;background:var(--input-bg);border:2px solid var(--input-border);border-radius:var(--radius);color:var(--text-main);font-family:var(--font-body);font-size:.92rem;transition:var(--transition);}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(255,159,28,.12);}
.form-group select option{background:#1a1a2e;color:#ffffff;}
.form-group textarea{resize:vertical;min-height:135px;}
.btn-spinner{display:inline-block;width:15px;height:15px;border:2.5px solid rgba(0,0,0,.2);border-top-color:#1a0a00;border-radius:50%;animation:spin .8s linear infinite;vertical-align:middle;}
@keyframes spin{to{transform:rotate(360deg);}}
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(80px);padding:.85rem 2rem;border-radius:50px;font-weight:800;font-size:.92rem;z-index:9999;transition:transform .4s cubic-bezier(.175,.885,.32,1.275);pointer-events:none;white-space:nowrap;}
.toast.show{transform:translateX(-50%) translateY(0);}
.toast.success{background:linear-gradient(45deg,#27c93f,#00ff88);color:#0a1f0f;box-shadow:0 8px 24px rgba(39,201,63,.4);}
.toast.error{background:linear-gradient(45deg,#ff5f56,#ff1744);color:#fff;box-shadow:0 8px 24px rgba(255,95,86,.4);}
.success-box{display:none;background:rgba(39,201,63,.06);border:2px solid #27c93f;border-radius:var(--radius-lg);padding:2rem;text-align:center;margin-top:1rem;}
.success-box h3{color:#27c93f;margin-bottom:.75rem;}
.success-box p{color:var(--text-muted);line-height:1.8;}
.setup-guide{background:rgba(255,215,0,.05);border:2px solid #ffd700;border-radius:var(--radius);padding:1.4rem 1.8rem;margin-bottom:2rem;}
.setup-guide h4{color:#ffd700;margin-bottom:.6rem;}
.setup-guide ol{color:var(--text-muted);padding-left:1.4rem;}
.setup-guide ol li{margin-bottom:.4rem;line-height:1.65;}
.setup-guide a{color:#ffd700;}
.setup-guide code{background:rgba(255,215,0,.1);padding:.1rem .35rem;border-radius:3px;font-size:.82rem;color:#ffd700;}

/* GALLERY */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.5rem;margin-top:2rem;}
.gallery-item{position:relative;height:210px;border-radius:var(--radius-lg);overflow:hidden;border:2px solid var(--border-subtle);cursor:pointer;transition:var(--transition);}
.gallery-item:hover{border-color:var(--primary);transform:translateY(-5px);box-shadow:0 12px 30px rgba(255,159,28,.2);}
.gallery-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:3.2rem;}
.gallery-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.9),transparent);padding:1.1rem;transform:translateY(100%);transition:transform .3s;}
.gallery-item:hover .gallery-overlay{transform:translateY(0);}
.gallery-title{color:var(--primary);font-weight:800;margin-bottom:.2rem;}
.gallery-desc{color:#ccc;font-size:.86rem;}
.filter-btn{padding:.55rem 1.3rem;background:transparent;border:2px solid rgba(255,159,28,.25);border-radius:50px;color:var(--text-main);font-weight:700;font-size:.88rem;cursor:pointer;transition:var(--transition);font-family:var(--font-body);}
.filter-btn:hover,.filter-btn.active{background:var(--primary);color:#1a0a00;border-color:var(--primary);}

/* FOOTER */
footer{background:var(--bg-footer);padding:3rem 1.5rem 1.5rem;border-top:3px solid var(--primary);margin-top:3rem;transition:var(--transition);}
body.light footer{background:#1a1a2e;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:2.5rem;margin-bottom:3rem;}
.footer-section h3{color:var(--primary);margin-bottom:1rem;font-size:1.05rem;}
.footer-section p,.footer-section .contact-info li{color:#888aaa;line-height:1.75;font-size:.88rem;}
.footer-section ul li{margin-bottom:.4rem;}
.footer-section a{color:#888aaa;transition:color .2s;font-size:.88rem;}
.footer-section a:hover{color:var(--primary);}
.footer-logo{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;}
.social-links{display:flex;gap:.7rem;margin-top:1rem;flex-wrap:wrap;}
.social-links a{width:40px;height:40px;background:rgba(255,255,255,.05);border:2px solid rgba(255,159,28,.25);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:var(--transition);}
.social-links a:hover{background:var(--primary);border-color:var(--primary);transform:scale(1.1);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.07);padding-top:1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;}
.footer-bottom p,.footer-links a{color:#666688;font-size:.86rem;}
.footer-links{display:flex;gap:1rem;}
.footer-links a{color:var(--primary);}

/* WHATSAPP */
.whatsapp-float{position:fixed;bottom:28px;right:28px;width:56px;height:56px;background:#25d366;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.7rem;box-shadow:0 6px 20px rgba(37,211,102,.5);z-index:999;transition:var(--transition);}
.whatsapp-float:hover{transform:scale(1.12);box-shadow:0 10px 30px rgba(37,211,102,.7);}

/* RESPONSIVE */
@media(max-width:1024px){.footer-grid{grid-template-columns:1fr 1fr;}.hero-grid{gap:2rem;}}
@media(max-width:768px){
  .nav-menu{position:fixed;top:0;right:-100%;width:280px;height:100vh;background:var(--bg-nav);flex-direction:column;justify-content:center;gap:2rem;padding:2rem;transition:right .35s;border-left:2px solid var(--primary);box-shadow:-10px 0 40px rgba(0,0,0,.3);z-index:2000;}
  .nav-menu.active{right:0;}
  .hamburger{display:flex;}
  .hero-grid{grid-template-columns:1fr;}
  .hero-title{font-size:2.3rem;}
  .actions-grid{grid-template-columns:1fr;}
  .features-grid{grid-template-columns:1fr 1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .about-grid{grid-template-columns:1fr;}
  .about-photo-wrap{position:static;margin-bottom:1.5rem;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .goal-list,.offer-list{grid-template-columns:1fr;}
  .course-hero-grid{grid-template-columns:1fr;}
  .course-content-grid{grid-template-columns:1fr;}
  .learn-list{grid-template-columns:1fr;}
  .page-header h1{font-size:2rem;}
  .section-title{font-size:1.8rem;}
  .course-detail-header{flex-direction:column;align-items:flex-start;}
  .course-detail-header img{width:100%;height:160px;}
  .course-actions{flex-direction:column;}
  .course-actions .btn{width:100%;justify-content:center;}
}
@media(max-width:480px){
  .hero-title{font-size:1.9rem;}
  .features-grid{grid-template-columns:1fr;}
  .cta-buttons{flex-direction:column;}
  .btn{width:100%;justify-content:center;}
  .footer-grid{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;text-align:center;}
  .about-photo{font-size:4rem;aspect-ratio:1/1;}
  .about-badge-row{justify-content:center;}
  .stats-row{gap:1.2rem;}
  .stat-number{font-size:1.5rem;}
  .cta-content h2{font-size:1.7rem;}
  .page-header h1{font-size:1.7rem;}
  .course-hero-title{font-size:1.8rem;}
  .phone-input-row{flex-direction:column;}
  .country-select{width:100%;}
  .section-title{font-size:1.5rem;}
  .about-content h2{font-size:1.8rem;}
  .about-intro{padding-left:.7rem;}
}

/* DATABASE & OFFICE — 4 tools in one row */
.database-grid {
  grid-template-columns: repeat(4, 1fr) !important;
}
.database-grid .course-card .course-img-wrap { height: 145px; }
.database-grid .course-card .course-body { padding: 1.1rem; }
.database-grid .course-card .course-body h3 { font-size: 1.05rem; }
.database-grid .course-card .course-body p { font-size: .82rem; }
.database-grid .course-card .course-highlights li { font-size: .78rem; }

/* ACADEMICS — 4 subjects in one row */
.academics-grid {
  grid-template-columns: repeat(4, 1fr) !important;
}
.academics-grid .course-card .course-img-wrap { height: 145px; }
.academics-grid .course-card .course-body { padding: 1.1rem; }
.academics-grid .course-card .course-body h3 { font-size: 1.05rem; }
.academics-grid .course-card .course-body p { font-size: .82rem; }
.academics-grid .course-card .course-highlights li { font-size: .78rem; }

@media(max-width:900px) {
  .database-grid, .academics-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media(max-width:480px) {
  .database-grid, .academics-grid { grid-template-columns: 1fr !important; }
}

/* Course nav CTA pill */
.category-btn-cta{background:var(--primary)!important;color:#1a0a00!important;border-color:var(--primary)!important;}
.category-btn-cta:hover{opacity:.88;}

/* ── PHONE INPUT ROW: country dropdown + number field ── */
.phone-input-row {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
}
.phone-input-row .phone-num-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  background: var(--input-bg);
  color: var(--text-main);
}
.country-select {
  flex-shrink: 0;
  width: 130px;
  padding: .85rem .7rem;
  background: var(--input-bg);
  border: 2px solid var(--input-border);
  border-radius: var(--radius);
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: .92rem;
  cursor: pointer;
  transition: var(--transition);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23FF9F1C'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  padding-right: 2rem;
}
.country-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255,159,28,.12);
}
.phone-number-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.phone-number-wrap input {
  width: 100%;
  padding: .85rem 1rem;
  background: var(--input-bg);
  border: 2px solid var(--input-border);
  border-radius: var(--radius);
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: .92rem;
  transition: var(--transition);
  letter-spacing: .05em;
}
.phone-number-wrap input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255,159,28,.12);
}
.phone-number-wrap input.input-error {
  border-color: #ff5f56 !important;
  box-shadow: 0 0 0 3px rgba(255,95,86,.15) !important;
}
.phone-number-wrap input.input-ok {
  border-color: #27c93f !important;
  box-shadow: 0 0 0 3px rgba(39,201,63,.12) !important;
}
.phone-error {
  display: none;
  color: #ff5f56;
  font-size: .82rem;
  font-weight: 700;
  padding: .2rem .1rem;
}
.phone-error.visible {
  display: block;
}
@media(max-width: 480px) {
  .country-select { width: 110px; font-size: .8rem; }
}

/* ── CONTACT PAGE FIXES ── */
/* Fix select/option visibility for both modes */
.form-group select {
  color: var(--text-main) !important;
}
body.light .form-group select {
  background: #ffffff !important;
  color: #2d2d4e !important;
  border-color: rgba(255,159,28,.5) !important;
}
body.light .form-group select option,
body.light .form-group select optgroup {
  background: #ffffff !important;
  color: #2d2d4e !important;
}
body.light .country-select {
  background-color: #ffffff !important;
  color: #2d2d4e !important;
}
body.light .country-select option {
  background: #ffffff !important;
  color: #2d2d4e !important;
}
/* Fix country-code-select class (was mismatched in HTML) */
.country-code-select {
  flex-shrink: 0;
  width: 145px;
  padding: .85rem .7rem;
  background: var(--input-bg);
  border: 2px solid var(--input-border);
  border-radius: var(--radius);
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: .85rem;
  cursor: pointer;
  transition: var(--transition);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23FF9F1C'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  padding-right: 2rem;
}
.country-code-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255,159,28,.12);
}
body.light .country-code-select {
  background-color: #ffffff !important;
  color: #2d2d4e !important;
}
body.light .country-code-select option {
  background: #ffffff !important;
  color: #2d2d4e !important;
}
/* Info boxes in light mode */
body.light .info-box {
  background: #ffffff !important;
  border-color: rgba(255,159,28,.25) !important;
}
body.light .ci-label { color: #1a1a2e !important; }
body.light .ci-value { color: #444466 !important; }
body.light .contact-item { border-bottom-color: rgba(0,0,0,.08) !important; }
body.light .form-group label { color: var(--primary) !important; }
body.light .form-group input,
body.light .form-group textarea {
  background: #f9f9ff !important;
  color: #2d2d4e !important;
  border-color: rgba(255,159,28,.4) !important;
}
body.light .form-group input::placeholder,
body.light .form-group textarea::placeholder {
  color: #9999bb !important;
}

/* ── HOME TUITIONS PAGE STYLES ── */
.tuition-hero-badge {
  display: inline-block;
  background: rgba(46,196,182,.15);
  color: var(--accent);
  font-weight: 800;
  font-size: .88rem;
  padding: .35rem 1.1rem;
  border-radius: 50px;
  margin-bottom: 1.2rem;
  border: 1.5px solid rgba(46,196,182,.35);
}
.subjects-grid-home {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.subject-card-home {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem;
  text-align: center;
  border: 2px solid var(--border-subtle);
  transition: var(--transition);
  box-shadow: var(--shadow-card);
  cursor: pointer;
}
.subject-card-home:hover {
  transform: translateY(-7px);
  border-color: var(--accent);
  box-shadow: 0 16px 40px rgba(46,196,182,.2);
}
.subject-icon-home { font-size: 3rem; margin-bottom: 1rem; }
.subject-card-home h3 { color: var(--accent); margin-bottom: .4rem; font-size: 1.15rem; }
.subject-card-home p { color: var(--text-muted); font-size: .9rem; }
.grade-badges { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: .75rem; }
.grade-badge {
  background: rgba(46,196,182,.1);
  color: var(--accent);
  border: 1.5px solid rgba(46,196,182,.3);
  border-radius: 50px;
  padding: .2rem .7rem;
  font-size: .78rem;
  font-weight: 700;
}
.tuition-features-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}
.tuition-feature {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 1.5rem;
  border: 2px solid var(--border-subtle);
  text-align: center;
  transition: var(--transition);
}
.tuition-feature:hover { border-color: var(--accent); transform: translateY(-4px); }
.tuition-feature .tf-icon { font-size: 2.4rem; margin-bottom: .75rem; }
.tuition-feature h4 { color: var(--accent); margin-bottom: .4rem; }
.tuition-feature p { color: var(--text-muted); font-size: .88rem; }
@media(max-width:768px) {
  .tuition-features-grid { grid-template-columns: 1fr 1fr; }
}
@media(max-width:480px) {
  .tuition-features-grid { grid-template-columns: 1fr; }
}