/* ========================================================= GLOBAL VARIABLES ========================================================= */ :root{ --accent:#f26d21; --accent-soft:#fff3ea; --dark:#0f172a; --text:#374151; --muted:#6b7280; --border:#e5e7eb; --bg:#ffffff; --card:#ffffff; --shadow-sm:0 4px 14px rgba(0,0,0,.06); --shadow-md:0 10px 30px rgba(0,0,0,.08); --shadow-lg:0 16px 40px rgba(0,0,0,.12); } /* ========================================================= RESET & BASE ========================================================= */ *{ margin:0; padding:0; box-sizing:border-box; } body{ font-family:'Inter',sans-serif; background:linear-gradient(180deg,#ffffff 0%, #fffaf7 100%); color:var(--text); line-height:1.75; } a{ text-decoration:none; color:inherit; } img{ max-width:100%; display:block; } .container{ width:92%; max-width:1200px; margin:auto; } /* ========================================================= TYPOGRAPHY ========================================================= */ h1,h2,h3{ color:var(--dark); letter-spacing:-0.02em; } h1{ font-size:34px; margin-bottom:14px; } h2{ font-size:28px; margin-bottom:14px; } h3{ font-size:18px; margin-bottom:10px; } p{ font-size:15.5px; color:var(--muted); max-width:780px; } /* ========================================================= SECTIONS ========================================================= */ section{ padding:64px 0; position:relative; } section::after{ content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:80%; height:1px; background:linear-gradient(to right, transparent, var(--border), transparent); } /* ========================================================= HEADER & NAVBAR ========================================================= */ .site-header{ position:sticky; top:0; z-index:1000; background:rgba(255,255,255,.96); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); } .header-wrap{ display:flex; justify-content:space-between; align-items:center; padding:14px 0; } .logo{ font-size:22px; font-weight:800; letter-spacing:-0.5px; } .logo span{ color:var(--accent); } /* NAV */ .nav{ display:flex; gap:12px; align-items:center; } .nav a, .nav-dropdown span{ font-size:14.5px; font-weight:600; padding:9px 18px; border-radius:999px; background:#fff; color:var(--dark); cursor:pointer; transition:all .25s ease; } /* hover */ .nav a:hover, .nav-dropdown span:hover{ background:var(--accent-soft); color:var(--accent); } /* active */ .nav a.active, .nav-dropdown.active span{ background:linear-gradient(135deg,#f26d21,#ff8a45); color:#fff; box-shadow:0 6px 18px rgba(242,109,33,.4); } /* enquire CTA */ .enquire-btn{ background:linear-gradient(135deg,#f26d21,#ff8a45) !important; color:#fff !important; box-shadow:0 8px 22px rgba(242,109,33,.45); } /* ========================================================= DROPDOWN ========================================================= */ .nav-dropdown{ position:relative; } .dropdown{ position:absolute; top:120%; left:0; background:#fff; border-radius:16px; box-shadow:var(--shadow-lg); padding:10px; display:none; min-width:170px; } .dropdown a{ display:block; padding:10px 14px; border-radius:12px; font-size:14px; } .dropdown a:hover{ background:var(--accent-soft); } .nav-dropdown:hover .dropdown{ display:block; } /* ========================================================= HAMBURGER & MOBILE MENU ========================================================= */ .hamburger{ display:none; flex-direction:column; gap:5px; cursor:pointer; } .hamburger span{ width:24px; height:3px; background:var(--dark); border-radius:4px; } .mobile-menu{ display:none; flex-direction:column; background:#fff; padding:20px; border-top:1px solid var(--border); } .mobile-menu.active{ display:flex; } .mobile-menu a{ padding:14px; font-weight:600; border-radius:14px; } .mobile-dropdown span{ padding:14px; font-weight:600; display:block; cursor:pointer; } .mobile-submenu{ display:none; padding-left:14px; } .mobile-submenu.active{ display:block; } .mobile-enquire{ background:linear-gradient(135deg,#f26d21,#ff8a45); color:#fff; text-align:center; margin-top:12px; } /* ========================================================= HERO ========================================================= */ .hero{ padding-top:40px; background: radial-gradient(circle at top right, var(--accent-soft), transparent 55%); } .hero-grid{ display:grid; grid-template-columns:1fr; gap:36px; } .hero h1 span{ color:var(--accent); } /* ========================================================= ENQUIRY FORM ========================================================= */ .enquiry-box{ background:var(--card); border-radius:22px; padding:26px; box-shadow:var(--shadow-md); border:1px solid var(--border); } .enquiry-box input, .enquiry-box select{ width:100%; padding:15px; margin-bottom:14px; border-radius:14px; border:1px solid var(--border); font-size:15px; } .enquiry-box button{ width:100%; background:linear-gradient(135deg,#f26d21,#ff8a45); color:#fff; padding:15px; border:none; border-radius:16px; font-weight:700; box-shadow:0 8px 22px rgba(242,109,33,.45); } /* ========================================================= LISTS ========================================================= */ .points{ margin-top:18px; padding-left:20px; } .points li{ margin-bottom:10px; font-weight:500; } /* ========================================================= BANNER SLIDER ========================================================= */ .banner-slider{ overflow:hidden; border-radius:26px; box-shadow:var(--shadow-md); } .banner-slide{ display:none; padding:56px 24px; text-align:center; font-size:18px; font-weight:700; background:linear-gradient(135deg,#fff7ed,#ffffff); } .banner-slide.active{ display:block; } /* ========================================================= EPA SECTION ========================================================= */ .why-epa{ background:var(--accent-soft); } .epa-grid{ display:grid; grid-template-columns:1fr; gap:18px; margin-top:28px; } .epa-card{ background:#fff; padding:22px; border-radius:20px; box-shadow:var(--shadow-sm); font-weight:500; border-left:4px solid var(--accent); } /* ========================================================= PROGRAM SELECTOR ========================================================= */ .selector{ margin-top:28px; display:grid; gap:16px; } .selector select, .selector button{ padding:15px; border-radius:16px; font-size:15px; } .selector button{ background:linear-gradient(135deg,#f26d21,#ff8a45); color:#fff; font-weight:700; border:none; box-shadow:0 8px 22px rgba(242,109,33,.45); } /* ========================================================= FAQ ========================================================= */ .faq details{ background:#fff; border:1px solid var(--border); border-radius:18px; padding:18px 20px; margin-bottom:14px; } .faq summary{ font-weight:600; cursor:pointer; position:relative; list-style:none; } .faq summary::after{ content:"+"; position:absolute; right:0; color:var(--accent); font-size:20px; } .faq details[open] summary::after{ content:"–"; } .faq details p{ margin-top:12px; font-size:15px; color:var(--muted); } /* ========================================================= FOOTER ========================================================= */ .site-footer{ background:#0f172a; color:#cbd5f5; padding:32px 0; text-align:center; font-size:14px; } /* ========================================================= STICKY BOTTOM CTA (MOBILE) ========================================================= */ .sticky-cta{ position:fixed; bottom:12px; left:50%; transform:translateX(-50%); width:92%; max-width:420px; z-index:999; display:none; } .sticky-cta a{ display:block; text-align:center; background:linear-gradient(135deg,#f26d21,#ff8a45); color:#fff; padding:16px; border-radius:20px; font-weight:800; box-shadow:0 14px 36px rgba(242,109,33,.55); } .year-chips { display: flex; gap: 10px; margin-bottom: 12px; } .year-chips button { padding: 10px 16px; border-radius: 20px; border: 1px solid #ddd; background: #fff; cursor: pointer; font-weight: 600; } .year-chips button.active { background: #ff6611; color: #fff; border-color: #ff6611; } /* Sticky WhatsApp */ .wa-sticky { position: fixed; bottom: 16px; right: 16px; background: #25d366; color: #fff; padding: 14px 18px; border-radius: 30px; font-weight: 600; text-decoration: none; z-index: 999; } /* ========================================================= RESPONSIVE ========================================================= */ @media(max-width:768px){ .nav{display:none;} .hamburger{display:flex;} .sticky-cta{display:block;} } @media (min-width: 768px) { .wa-sticky { display: none; } } @media(min-width:768px){ h1{font-size:44px;} h2{font-size:32px;} .hero-grid{ grid-template-columns:1.25fr .75fr; align-items:center; } .epa-grid{ grid-template-columns:repeat(3,1fr); } .selector{ grid-template-columns:repeat(4,1fr); align-items:end; } } /* =============================== YEAR CHIPS – DEFAULT (INACTIVE) =============================== */ .year-chips button { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--border); background: #fff; /* INACTIVE = WHITE */ color: var(--dark); font-size: 14.5px; font-weight: 600; cursor: pointer; transition: all 0.25s ease; } /* Hover (optional) */ .year-chips button:hover { background: var(--accent-soft); color: var(--accent); } /* =============================== YEAR CHIPS – ACTIVE =============================== */ .year-chips button.active { background: linear-gradient(135deg, #f26d21, #ff8a45); /* ACTIVE = ORANGE */ color: #fff; border-color: transparent; box-shadow: 0 6px 18px rgba(242, 109, 33, 0.35); } /* ========================================================= WHATSAPP SUBMIT BUTTON (FORM) ========================================================= */ .enquiry-box button { display: flex; align-items: center; justify-content: center; gap: 8px; } /* Optional: WhatsApp green hint on hover */ .enquiry-box button:hover { filter: brightness(1.05); } .course-benefits{ padding:64px 0; background:#fffaf7; } .section-title{ font-size:30px; margin-bottom:8px; } .section-sub{ color:#6b7280; max-width:720px; margin-bottom:28px; } .benefit-grid{ display:grid; gap:18px; } .benefit-card{ background:#fff; border-radius:18px; padding:22px; border:1px solid #fde2cf; box-shadow:0 6px 18px rgba(0,0,0,.05); } .benefit-card h4{ margin-bottom:6px; font-size:17px; } @media(min-width:768px){ .benefit-grid{ grid-template-columns:repeat(3,1fr); } } .course-testimonials{ padding:64px 0; background:#ffffff; } .testimonial-grid{ display:grid; gap:18px; margin-top:28px; } .testimonial-card{ background:#0f172a; color:#e5e7eb; padding:22px; border-radius:18px; font-size:15px; } .testimonial-card strong{ display:block; margin-top:10px; color:#ffb089; } @media(min-width:768px){ .testimonial-grid{ grid-template-columns:repeat(3,1fr); } }