/* ===================================================== BAW SOLUTIONS PREMIUM DARK MODE ===================================================== */ body { margin: 0; font-family: "Inter", "Segoe UI", sans-serif; background: var(--surface); color: var(--text); } /* ROOT DARK TOKENS */ html[data-theme="dark"] .service-card { background: #ffffff0e; border-radius: 14px; /* 2px Border Structure */ border-style: solid; border-width: 0 0 2px 2px; /* Top: 0, Right: 0, Bottom: 2px, Left: 2px */ /* Left to Bottom Gradient (Yellow -> Green -> Blue) */ border-image: linear-gradient(to bottom left, #facc1531, #16a34a59, #2564eb48) 1; } /* ROOT DARK TOKENS */ html[data-theme="dark"] .service-card:hover { background: #ffffff0e; border-radius: 14px; /* 2px Border Structure */ border-style: solid; border-width: 0 0 2px 2px; /* Top: 0, Right: 0, Bottom: 2px, Left: 2px */ /* Left to Bottom Gradient (Yellow -> Green -> Blue) */ background-image: linear-gradient(#020617, #020617), linear-gradient(135deg, #facc15, #16a34a, #2563eb, #f43f5e); /* Extra color for animation */ box-shadow: 0 0 20px rgba(0, 161, 68, 0.959), 0 0 30px rgba(75, 2, 190, 0.973); /* Glow effect */ transform: translateY(-4px); /* Slight lift */ } html[data-theme="dark"] { --dm-bg: #020617; --dm-surface: #ffffff1a; --dm-card: rgba(15, 23, 42, .65); --dm-text: #2269b1; --dm-muted: #8fa0b8; --dm-border: rgba(255, 255, 255, .08); --dm-blue: #0B5CFF; --dm-green: #19C37D; } /* ===================================================== GLOBAL ===================================================== */ html[data-theme="dark"] body { background: black; color: var(--dm-text); } html[data-theme="dark"] .section, html[data-theme="dark"] section { background: transparent; } html[data-theme="dark"] p { color: var(--dm-muted); } html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5 { color: white; } /* ===================================================== TOPBAR ===================================================== */ html[data-theme="dark"] .topbar { background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(20px); border-bottom: 1px solid var(--dm-border); } html[data-theme="dark"] .topbar-text { color: var(--dm-muted); } /* ===================================================== HEADER NAVBAR ===================================================== */ html[data-theme="dark"] .site-wrapper .site-header { background: linear-gradient(90deg, #121216 0.000%, #121216 7.692%, #16171a calc(7.692% + 1px), #16171a 15.385%, #1a1b1f calc(15.385% + 1px), #1a1b1f 23.077%, #1f2023 calc(23.077% + 1px), #1f2023 30.769%, #232427 calc(30.769% + 1px), #232427 38.462%, #27282b calc(38.462% + 1px), #27282b 46.154%, #2b2c2f calc(46.154% + 1px), #2b2c2f 53.846%, #2f3033 calc(53.846% + 1px), #2f3033 61.538%, #323337 calc(61.538% + 1px), #323337 69.231%, #36373a calc(69.231% + 1px), #36373a 76.923%, #38393d calc(76.923% + 1px), #38393d 84.615%, #3b3c40 calc(84.615% + 1px), #3b3c40 92.308%, #3d3e42 calc(92.308% + 1px) 100.000%); color: rgb(224, 222, 222); backdrop-filter: blur(22px); border-bottom: 1px solid var(--dm-border); } html[data-theme="dark"] .nav-link { color: #0f5bbe; } html[data-theme="dark"] .container { background: rgba(0, 0, 0, 0); color: white; } html[data-theme="dark"] .nav-link:hover, html[data-theme="dark"] .nav-link.active { color:blue; } html[data-theme="dark"] .nav-link::after { background: linear-gradient(90deg, var(--dm-blue), var(--dm-green)); } /* ===================================================== MEGA MENU ===================================================== */ html[data-theme="dark"] .mega-menu { background: rgb(1, 52, 82); backdrop-filter: blur(25px); border: 1px solid var(--dm-border); } html[data-theme="dark"] .mega-card { background: #101118; border: 1px solid var(--dm-border); } html[data-theme="dark"] .mega-card:hover { background: rgba(0, 153, 173, 0.808); } /* ===================================================== BUTTONS ===================================================== */ html[data-theme="dark"] .btn-primary, html[data-theme="dark"] .nav-btn { background: linear-gradient(135deg, #0B5CFF, #19C37D); color: white; } .btn-outline:hover { background: linear-gradient(135deg, #0B5CFF, #19C37D); color: white; } /* ===================================================== DARK HERO EXPERIENCE ===================================================== */ html[data-theme="dark"] .hero { position: relative; overflow: hidden; background: linear-gradient(135deg, #ffffff10, #f1f1f311, } html[data-theme="dark"] .hero-content { position: relative; } html[data-theme="dark"] .hero h1 { background: linear-gradient(90deg, #ffffff, #60a5fa, #34d399); -webkit-background-clip: text; color: transparent; } html[data-theme="dark"] .hero p { max-width: 650px; color: #94a3b8; } /* Hero Glass Card */ html[data-theme="dark"] .hero-card { background: rgb(233, 226, 226); backdrop-filter: blur(25px); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); } /* Floating Animation */ html[data-theme="dark"] .hero-image { animation: heroFloat 6s ease-in-out infinite; } @keyframes heroFloat { 0% { transform: translateY(0); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0); } } /* ===================================================== UNIVERSAL CARDS ===================================================== */ html[data-theme="dark"] .card, html[data-theme="dark"] .glass-card, html[data-theme="dark"] .service-card, html[data-theme="dark"] .course-card, html[data-theme="dark"] .testimonial-card, html[data-theme="dark"] .leader-card, html[data-theme="dark"] .experience-card, html[data-theme="dark"] .mission-card, html[data-theme="dark"] .value-card, html[data-theme="dark"] .stat-card, html[data-theme="dark"] .stats-card { background: var(--dm-card); backdrop-filter: blur(18px); border: 1px solid var(--dm-border); } html[data-theme="dark"] .card:hover, html[data-theme="dark"] .service-card:hover, html[data-theme="dark"] .course-card:hover, html[data-theme="dark"] .value-card:hover { border-color: rgba(11, 92, 255, .45); } html[data-theme="dark"] .course-card { background-color: black; } /* ===================================================== ICON BOXES ===================================================== */ html[data-theme="dark"] .service-icon, html[data-theme="dark"] .course-icon, html[data-theme="dark"] .mission-icon, html[data-theme="dark"] .value-icon, html[data-theme="dark"] .why-icon, html[data-theme="dark"] .stat-icon, html[data-theme="dark"] .process-icon { background: rgba(11, 92, 255, .12); color: #60a5fa; } /* ===================================================== ABOUT / WHY / STORY ===================================================== */ html[data-theme="dark"] .about-content, html[data-theme="dark"] .story-content, html[data-theme="dark"] .why-content, html[data-theme="dark"] .leader-content { color: var(--dm-text); } /* ===================================================== FORMS ===================================================== */ html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { background: rgba(255, 255, 255, .05); color: white; border: 1px solid var(--dm-border); } /* ===================================================== FOOTER ===================================================== */ html[data-theme="dark"] .site-footer { background: #010409; border-top: 1px solid var(--dm-border); } html[data-theme="dark"] .footer-column a, html[data-theme="dark"] .footer-social { color: var(--dm-muted); } /* ===================================================== MOBILE DRAWER ===================================================== */ html[data-theme="dark"] .nav-links { background: rgba(255, 255, 255, 0.95); color: rgb(65, 63, 63); backdrop-filter: blur(25px); } html[data-theme="dark"] .nav-overlay { background: linear-gradient(90deg, #121216 0.000%, #121216 7.692%, #16171a calc(7.692% + 1px), #16171a 15.385%, #1a1b1f calc(15.385% + 1px), #1a1b1f 23.077%, #1f2023 calc(23.077% + 1px), #1f2023 30.769%, #232427 calc(30.769% + 1px), #232427 38.462%, #27282b calc(38.462% + 1px), #27282b 46.154%, #2b2c2f calc(46.154% + 1px), #2b2c2f 53.846%, #2f3033 calc(53.846% + 1px), #2f3033 61.538%, #323337 calc(61.538% + 1px), #323337 69.231%, #36373a calc(69.231% + 1px), #36373a 76.923%, #38393d calc(76.923% + 1px), #38393d 84.615%, #3b3c40 calc(84.615% + 1px), #3b3c40 92.308%, #3d3e42 calc(92.308% + 1px) 100.000%); color: rgb(224, 222, 222); } /* ===================================================== THEME BUTTON ===================================================== */ html[data-theme="dark"] .theme-toggle { background: rgba(255, 255, 255, .08); color: rgb(175, 175, 175); border: 1px solid var(--dm-border); } /* ===================================================== DARK MODE EXTRA SECTIONS PATCH ===================================================== */ /* =============================== NAVBAR COMPLETE ================================ */ html[data-theme="dark"] .site-wrapper .navbar, html[data-theme="dark"] .site-wrapper .navbar-container { background: Black; } html[data-theme="dark"] .nav-dropdown { background: Black; } html[data-theme="dark"] .dropdown-btn { color: #e5e7eb; } /* =============================== DROPDOWN / MEGA MENU COMPLETE ================================ */ html[data-theme="dark"] .mega-menu, html[data-theme="dark"] .mega-inner, html[data-theme="dark"] .mega-section { background: rgba(2, 6, 23, .92); } html[data-theme="dark"] .mega-feature { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); } html[data-theme="dark"] .mega-feature a { color: white; } /* =============================== COURSES SECTION ================================ */ html[data-theme="dark"] .courses-section, html[data-theme="dark"] .courses-grid { background: transparent; } html[data-theme="dark"] .course-duration, html[data-theme="dark"] .course-price { color: #94a3b8; } html[data-theme="dark"] .course-benefits li { color: #cbd5e1; } /* =============================== CLIENT / TRUST SECTION ================================ */ html[data-theme="dark"] .trusted-title { color: white; } /* =============================== CTA SECTION ================================ */ html[data-theme="dark"] .cta-section, html[data-theme="dark"] .cta-wrapper, html[data-theme="dark"] .cta-box { background: linear-gradient(135deg, rgba(11, 92, 255, .18), rgba(25, 195, 125, .12)); border: 1px solid rgba(255, 255, 255, .08); backdrop-filter: blur(20px); } html[data-theme="dark"] .cta-content { background: black; } html[data-theme="dark"] .cta-content h2 { color: white; } /* =============================== SECTION HEADERS ================================ */ html[data-theme="dark"] .section-label, html[data-theme="dark"] .section-badge { background: linear-gradient(135deg, #0B5CFF, #19C37D); color: white; } html[data-theme="dark"] .navbar { background: black; color: white; } html[data-theme="dark"] .section-title, html[data-theme="dark"] .section-heading { color: white; } /* =============================== FLOATING ELEMENTS ================================ */ html[data-theme="dark"] .floating-card { background: rgba(15, 23, 42, .75); backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, .08); } /* =============================== IMAGES WRAPPER ================================ */ html[data-theme="dark"] .image-wrapper, html[data-theme="dark"] .hero-image-wrapper, html[data-theme="dark"] .story-image, html[data-theme="dark"] .about-image { background: rgba(255, 255, 255, .04); } /* =============================== ALL EMPTY WHITE BACKGROUNDS ================================ */ html[data-theme="dark"] .about-preview, html[data-theme="dark"] .about-grid, html[data-theme="dark"] .services-grid, html[data-theme="dark"] .testimonials-grid, html[data-theme="dark"] .leadership-section, html[data-theme="dark"] .mission-section, html[data-theme="dark"] .values-section, html[data-theme="dark"] .process-section, html[data-theme="dark"] .statistics-section { background: rgb(9, 10, 10); } /* ===================================================== DARK MODE HERO TYPOGRAPHY ===================================================== */ html[data-theme="dark"] .hero h1, html[data-theme="dark"] .hero-section h1, html[data-theme="dark"] .page-hero h1 { color: #ffffff; } html[data-theme="dark"] .hero h1 span, html[data-theme="dark"] .hero-section h1 span, html[data-theme="dark"] .page-hero h1 span { background-color: rgba(255, 255, 255, 0.151); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: white; } /* Hero normal text */ html[data-theme="dark"] .hero-content h1 { color: white !important; } html[data-theme="dark"] .hero-description { color: #94a3b8; } html[data-theme="dark"] .hero-trust, html[data-theme="dark"] .hero-trust span { color: #fbfdff; } html[data-theme="dark"] .site-wrapper { background: #020617 !important; color: white; min-height: 100vh; } .trust-item { color: white } /* ===================================== DARK MODE SECTION RESET ===================================== */ html[data-theme="dark"] .site-wrapper { background: #020617; } /* Remove light section backgrounds */ html[data-theme="dark"] .section, html[data-theme="dark"] section, html[data-theme="dark"] main { background: transparent; } /* Common website sections */ html[data-theme="dark"] .services-section, html[data-theme="dark"] .courses-section, html[data-theme="dark"] .trusted-section, html[data-theme="dark"] .statistics-section, html[data-theme="dark"] .testimonials-section, html[data-theme="dark"] .about-story, html[data-theme="dark"] .values-section, html[data-theme="dark"] .process-section { background: white !important; } html[data-theme="dark"] .card, html[data-theme="dark"] .service-card, html[data-theme="dark"] .course-card, html[data-theme="dark"] .testimonial-card, html[data-theme="dark"] .value-card, html[data-theme="dark"] .stat-card { background: rgba(15, 23, 42, .65) !important; backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, .08); } /* =================================== DARK MODE TYPOGRAPHY =================================== */ html[data-theme="dark"] .site-wrapper h1, html[data-theme="dark"] .site-wrapper h2, html[data-theme="dark"] .site-wrapper h3, html[data-theme="dark"] .site-wrapper h4, html[data-theme="dark"] .site-wrapper h5, html[data-theme="dark"] .site-wrapper h6 { color: #f8fafc !important; } html[data-theme="dark"] .site-wrapper p, html[data-theme="dark"] .site-wrapper span, html[data-theme="dark"] .site-wrapper li { color: #cbd5e1; } html[data-theme="dark"] .site-wrapper * { border-color: rgba(255, 255, 255, .08); } html[data-theme="dark"] .site-wrapper section, html[data-theme="dark"] .site-wrapper .container, html[data-theme="dark"] .site-wrapper .hero-content, html[data-theme="dark"] .site-wrapper .hero-grid { background: transparent !important; } html[data-theme="dark"] .card, html[data-theme="dark"] .service-card, html[data-theme="dark"] .course-card, html[data-theme="dark"] .testimonial-card, html[data-theme="dark"] .glass-card { background: rgba(15, 23, 42, .55) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } /* ================================ DARK MODE TEXT FIX ================================ */ html[data-theme="dark"] .fade-up, html[data-theme="dark"] .fade-up h1, html[data-theme="dark"] h1.fade-up { color: #f8fafc !important; } html[data-theme="dark"] .fade-up span { color: #feffff8a !important; } /* ===================================== DARK MODE HERO ===================================== */ html[data-theme="dark"] .hero-section, html[data-theme="dark"] .hero-content { color: #f8fafc; } html[data-theme="dark"] .hero-content h1 { color: #f8fafc !important; } html[data-theme="dark"] .hero-content h1 span { color: #38bdf8 !important; } html[data-theme="dark"] .hero-description { color: #cbd5e1 !important; } html[data-theme="dark"] .section-label { color: #60a5fa !important; } html[data-theme="dark"] .glass-card { background: rgba(15, 23, 42, .65) !important; border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(20px); color: #f8fafc; } html[data-theme="dark"] .glass-card p { color: #cbd5e1; } /* ================================= DARK MODE VARIABLES ================================= */ html[data-theme="dark"] { --heading: #f8fafc; --text: #cbd5e1; --glass: rgba(15, 23, 42, .55); --white: rgba(15, 23, 42, .95); --border: rgba(255, 255, 255, .08); --header-shadow: 0 10px 40px rgba(0, 0, 0, .35); } /* ================================= DARK MODE GLOBAL HEADINGS ================================= */ html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: #f8fafc !important; } html[data-theme="dark"] p, html[data-theme="dark"] span, html[data-theme="dark"] li { color: #cbd5e1; } /* ================================= NAVBAR DARK GLASS ================================= */ html[data-theme="dark"] .navbar { background: rgb(15, 23, 42) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 255, 255, .08); color: white; } /* ================================= MOBILE DRAWER DARK ================================= */ @media(max-width:1100px) { html[data-theme="dark"] .nav-links { background: linear-gradient(90deg, #ffdeea 0.000%, #ffdeea 20.000%, #fdedff calc(20.000% + 1px), #fdedff 40.000%, #ecfcff calc(40.000% + 1px), #ecfcff 60.000%, #d1ffff calc(60.000% + 1px), #d1ffff 80.000%, #b5fffb calc(80.000% + 1px) 100.000%) !important; backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border-left: 1px solid rgba(255, 255, 255, .08); } } /* ================================= NAV LINKS ================================= */ html[data-theme="dark"] .nav-link { color: #2a2b2c !important; } html[data-theme="dark"] .nav-link:hover { color: #38bdf8 !important; } /* ================================= MEGA MENU GLASS ================================= */ html[data-theme="dark"] .mega-menu { background: rgb(0, 0, 0) !important; backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border: 1px solid rgba(255, 255, 255, .1); } /* ================================= HERO FIX ================================= */ html[data-theme="dark"] .hero-content h1 { color: #f8fafc !important; } html[data-theme="dark"] .hero-content h1 span { color: #005fb8 !important; } html[data-theme="dark"] .hero-description { color: #cbd5e1 !important; } /* ================================= GLASS CARDS ================================= */ html[data-theme="dark"] .glass-card, html[data-theme="dark"] .card, html[data-theme="dark"] .service-card, html[data-theme="dark"] .course-card, html[data-theme="dark"] .testimonial-card { background: rgb(4, 5, 7) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgb(255, 255, 255); } /* ========================================== DARK THEME - GLOBAL ========================================== */ html[data-theme="dark"] { background: linear-gradient(135deg, #000000, #090909, #161616); color: #ffffff; } /* ========================================== NAVBAR ========================================== */ html[data-theme="dark"] .nav-link { color: #000000; } html[data-theme="dark"] .nav-link:hover, html[data-theme="dark"] .nav-link.active { color: #ffffff; } /* ========================================== MEGA MENU ========================================== */ html[data-theme="dark"] .mega-menu { background: linear-gradient(135deg, #050505, #151515); border: 1px solid rgba(255, 255, 255, .10); box-shadow: 0 30px 80px rgba(0, 0, 0, .70); } html[data-theme="dark"] .mega-section h4 { color: #ffffff; } html[data-theme="dark"] .mega-card { color: #ffffff; } html[data-theme="dark"] .mega-card:hover { background: rgba(255, 255, 255, .08); } html[data-theme="dark"] .mega-card p { color: #999999; } html[data-theme="dark"] .mega-feature { background: linear-gradient(135deg, #111111, #000000); border: 1px solid rgba(255, 255, 255, .10); } /* ========================================== TRUSTED LOGOS ========================================== */ html[data-theme="dark"] .trusted-logo { background: linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: 0 8px 30px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08); } html[data-theme="dark"] .trusted-logo:hover { background: linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .05)); border-color: rgba(255, 255, 255, .20); } /* ========================================== THEME BUTTON ========================================== */ html[data-theme="dark"] .theme-toggle { background: #111111; border: 1px solid #333333; color: #ffffff; } /* ========================================== HAMBURGER ========================================== */ html[data-theme="dark"] .hamburger span { background: #ffffff; color: black; } /* ========================================== SECTION BACKGROUND ========================================== */ html[data-theme="dark"] section, html[data-theme="dark"] .section { background: black; } .mobile-open .nav-link{ color: #000; } /* ========================================== MOBILE ========================================== */ @media (max-width:1100px) { html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { background: linear-gradient(135deg, #0B5CFF, #19C37D); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } } html[data-theme="dark"] .gradient-text { background: linear-gradient(135deg, #0B5CFF, #19C37D); -webkit-background-clip:text; -webkit-text-fill-color:transparent; } /* services css starts here */ /* ========================================== SERVICES - DARK THEME ========================================== */ html[data-theme="dark"] .service-card { background:linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)); border:1px solid rgba(255, 255, 255, .10); border-radius:25px; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); box-shadow: 0 12px 35px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05); transition:all .4s ease; } html[data-theme="dark"] .service-card:hover { transform:translateY(-12px); background:linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .05)); border-color:rgba(255, 255, 255, .22); box-shadow: 0 20px 60px rgba(0, 0, 0, .65), 0 0 25px rgba(255, 255, 255, .05); } html[data-theme="dark"] .service-icon { background:linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .06)); border:1px solid rgba(255, 255, 255, .12); color:#ffffff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); } html[data-theme="dark"] .service-icon svg { stroke:#ffffff; } html[data-theme="dark"] .service-card h3 { color:#ffffff; } html[data-theme="dark"] .service-card p { color:#b8b8b8; } html[data-theme="dark"] .service-card a { color:#ffffff; transition:.3s ease; } html[data-theme="dark"] .service-card a:hover { color:#8EC5FF; } html[data-theme="dark"] .site-footer { background:#030303 !important; color:white; } /* ========================================== DARK MODE ========================================== */ html[data-theme="dark"] .course-card { background: linear-gradient(145deg, rgba(15, 23, 42, .85), rgba(2, 6, 23, .95)); border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 25px 60px rgba(0, 0, 0, .45); } html[data-theme="dark"] .course-card h3 { color:#f8fafc; } html[data-theme="dark"] .course-card p, html[data-theme="dark"] .course-benefits li { color:#94a3b8; } html[data-theme="dark"] .course-price { color:#ffffff; } /* ========================================== TABLET ========================================== */ @media(max-width:1100px) { .courses-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap:25px; } .course-card { min-height:400px; padding:30px 25px; } } /* ========================================== MOBILE ========================================== */ @media(max-width:600px) { .courses-section { padding:60px 0; } .courses-grid { grid-template-columns:1fr; gap:20px; } .course-card { min-height:auto; padding:25px 20px; border-radius:22px; } .course-icon { width:60px; height:60px; border-radius:18px; } .course-card h3 { font-size:22px; } .course-card p { font-size:15px; } .course-price { font-size:24px; } } /* ========================================== PREMIUM CARD SHADOW + TRANSITION ========================================== */ .course-card { transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s cubic-bezier(.22, 1, .36, 1), border-color .35s ease, background .35s ease; box-shadow: 0 10px 25px rgba(0, 0, 0, .08), 0 20px 50px rgba(11, 92, 255, .08); will-change:transform; } /* HOVER EFFECT */ .course-card:hover { transform: translateY(-15px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, .12), 0 35px 80px rgba(11, 92, 255, .18), 0 0 40px rgba(25, 195, 125, .10); border-color: rgba(11, 92, 255, .35); } /* ICON ANIMATION */ .course-icon { transition: transform .4s ease, box-shadow .4s ease; } .course-card:hover .course-icon { transform: rotate(5deg) scale(1.1); box-shadow: 0 15px 35px rgba(11, 92, 255, .25); } /* BUTTON SMOOTH EFFECT */ .course-card a { transition: transform .3s ease, box-shadow .3s ease; } .course-card a:hover { transform: translateY(-4px); box-shadow: 0 15px 35px rgba(11, 92, 255, .35); } /* DARK MODE SHADOW */ html[data-theme="dark"] .course-card { box-shadow: 0 20px 50px rgba(0, 0, 0, .65), 0 0 40px rgba(11, 92, 255, .08); } html[data-theme="dark"] .course-card:hover { box-shadow: 0 30px 80px rgba(0, 0, 0, .85), 0 0 50px rgba(11, 92, 255, .25), 0 0 80px rgba(25, 195, 125, .12); } html[data-theme="dark"] .btn-outline { color: white; border-color: linear-gradient(135deg, #0B5CFF, #19C37D); } html[data-theme="dark"] .btn-outline:hover { color: white; border-color: linear-gradient(135deg, #0B5CFF, #19C37D) } .premium-hero-content{ padding:5px; border-radius:4px; } .hero-main-container{ } /* =================================================== PREMIUM FOOTER - BLACK & WHITE THEME SYSTEM =================================================== */ /* ================= LIGHT THEME ================= */ html[data-theme="light"] .site-footer, body:not(.dark-mode) .site-footer { background: radial-gradient( circle at 10% 0%, rgba(11,92,255,.08), transparent 35% ), #ffffff; color:#111827; } html[data-theme="light"] .footer-column h4, body:not(.dark-mode) .footer-column h4{ color:#111; } html[data-theme="light"] .footer-brand p, body:not(.dark-mode) .footer-brand p{ color:#6b7280; } html[data-theme="light"] .footer-column a, body:not(.dark-mode) .footer-column a{ color:#6b7280; } html[data-theme="light"] .footer-column a:hover, body:not(.dark-mode) .footer-column a:hover{ color:#000; } html[data-theme="light"] .footer-social a, body:not(.dark-mode) .footer-social a{ background:#fff; color:#111; border:1px solid #e5e7eb; } /* ================= DARK THEME ================= */ html[data-theme="dark"] .site-footer { background: radial-gradient( circle at 15% 10%, rgba(11,92,255,.18), transparent 35% ), radial-gradient( circle at 85% 20%, rgba(25,195,125,.12), transparent 35% ), #000000; color:#ffffff; } html[data-theme="dark"] .footer-column h4{ color:#ffffff; } html[data-theme="dark"] .footer-brand p{ color: rgba(255,255,255,.65); } html[data-theme="dark"] .footer-column a{ color: rgba(255,255,255,.65); } html[data-theme="dark"] .footer-column a:hover{ color:#ffffff; } html[data-theme="dark"] .footer-social a{ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); color:#ffffff; } html[data-theme="dark"] .footer-social a:hover{ background: linear-gradient( 135deg, #0B5CFF, #19C37D ); } /* CTA BOTH THEMES */ .footer-cta{ transition:.4s; } html[data-theme="dark"] .footer-cta{ background: linear-gradient( 135deg, rgba(255,255,255,.08), rgba(255,255,255,.02) ); border: 1px solid rgba(255,255,255,.12); } html[data-theme="dark"] .footer-cta h3{ color:#fff; } html[data-theme="dark"] .footer-cta p{ color:#a8b3c7; } /* CONTACT ICON */ html[data-theme="dark"] .footer-contact i{ color:#19C37D; } html[data-theme="light"] .footer-contact i{ color:#2c39af; } html[data-theme="dark"] .footer-contact{ border-color: rgba(255,255,255,.12); color:#d5d8dd; } /* FOOTER BOTTOM */ html[data-theme="dark"] .footer-bottom{ border-color: rgba(255,255,255,.12); color:#8b95a7; } html[data-theme="light"] .footer-bottom{ border-color:#e5e7eb; color:#6b7280; } /* ===================================== COUNTRY CARDS PREMIUM ===================================== */ .country-card{ display:flex; align-items:center; gap:15px; padding:22px 28px; background: rgba(255,255,255,.75); backdrop-filter: blur(20px); border: 1px solid rgba(0,0,0,.08); border-radius:22px; box-shadow: 0 20px 50px rgba(0,0,0,.08); animation: floatCountry 5s ease-in-out infinite; transition:.4s; } .country-card img{ width:42px; height:30px; object-fit:cover; border-radius:6px; box-shadow: 0 5px 15px rgba(0,0,0,.15); } .country-card h3{ font-size:18px; margin:0 0 5px; color:#111; } .country-card p{ margin:0; font-size:14px; color:#6b7280; } .country-card:hover{ transform: translateY(-12px) scale(1.05); box-shadow: 0 30px 80px rgba(0,0,0,.15); } @keyframes floatCountry{ 0%{ transform:translateY(0); } 50%{ transform:translateY(-18px); } 100%{ transform:translateY(0); } } /* Different animation timing */ .australia{ left:4%; top:35%; animation-delay:0s; } .malaysia{ right:5%; top:20%; animation-delay:1s; } .uk{ right:12%; bottom:18%; animation-delay:2s; } .thailand{ left:10%; bottom:15%; animation-delay:3s; } .singapore{ right:30%; top:8%; animation-delay:4s; } /* Dark Theme */ html[data-theme="dark"] .country-card{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.15); } html[data-theme="dark"] .country-card h3{ color:white; } html[data-theme="dark"] .country-card p{ color:#a8b3c7; } /* Default (light theme) */ .message { color: #25D366; /* WhatsApp green */ } /* Dark theme override */ html[data-theme="dark"] .message { color: rgb(66, 62, 62); /* Dark mode pe red */ transition: color 0.3s ease; /* Smooth change */ } /* ============================================================= BAW SOLUTIONS — FINAL AUDIT / COMPATIBILITY OVERRIDES ------------------------------------------------------------- This final block resolves conflicting legacy declarations above without changing existing HTML/JS class names. ============================================================= */ html[data-theme="dark"] { --dm-bg: #020617; --dm-surface: rgba(255, 255, 255, 0.04); --dm-card: rgba(15, 23, 42, 0.68); --dm-text: #f8fafc; --dm-muted: #94a3b8; --dm-border: rgba(255, 255, 255, 0.10); --dm-blue: #0B5CFF; --dm-green: #19C37D; --heading: #f8fafc; --text: #cbd5e1; --glass: rgba(15, 23, 42, 0.58); --white: rgba(15, 23, 42, 0.95); --border: rgba(255, 255, 255, 0.10); --header-shadow: 0 10px 40px rgba(0, 0, 0, 0.35); } html[data-theme="dark"], html[data-theme="dark"] body, html[data-theme="dark"] .site-wrapper { background: var(--dm-bg) !important; color: var(--dm-text); } html[data-theme="dark"] body { color: var(--dm-text); } html[data-theme="dark"] main, html[data-theme="dark"] section, html[data-theme="dark"] .section, html[data-theme="dark"] .about-preview, html[data-theme="dark"] .about-grid, html[data-theme="dark"] .services-section, html[data-theme="dark"] .services-grid, html[data-theme="dark"] .courses-section, html[data-theme="dark"] .courses-grid, html[data-theme="dark"] .trusted-section, html[data-theme="dark"] .statistics-section, html[data-theme="dark"] .testimonials-section, html[data-theme="dark"] .about-story, html[data-theme="dark"] .values-section, html[data-theme="dark"] .process-section, html[data-theme="dark"] .leadership-section, html[data-theme="dark"] .mission-section { background: transparent !important; } /* Do not paint generic containers black in dark mode. */ html[data-theme="dark"] .container, html[data-theme="dark"] .site-wrapper .container { background: transparent !important; color: inherit; } /* Navbar */ html[data-theme="dark"] .site-wrapper .site-header, html[data-theme="dark"] .site-wrapper .navbar, html[data-theme="dark"] .site-wrapper .navbar-container { background: rgba(2, 6, 23, 0.88) !important; color: #f8fafc; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border-bottom: 1px solid var(--dm-border); } html[data-theme="dark"] .nav-link, html[data-theme="dark"] .dropdown-btn { color: #e2e8f0 !important; } html[data-theme="dark"] .nav-link:hover, html[data-theme="dark"] .nav-link.active, html[data-theme="dark"] .dropdown-btn:hover { color: #60a5fa !important; } html[data-theme="dark"] .nav-link::after { background: linear-gradient(90deg, var(--dm-blue), var(--dm-green)); } /* Mega menu */ html[data-theme="dark"] .mega-menu, html[data-theme="dark"] .mega-inner, html[data-theme="dark"] .mega-section, html[data-theme="dark"] .nav-dropdown { background: rgba(2, 6, 23, 0.96) !important; color: #f8fafc; border-color: var(--dm-border); } html[data-theme="dark"] .mega-card, html[data-theme="dark"] .mega-feature { background: rgba(255, 255, 255, 0.045) !important; border: 1px solid var(--dm-border); color: #f8fafc; } html[data-theme="dark"] .mega-card:hover, html[data-theme="dark"] .mega-feature:hover { background: rgba(11, 92, 255, 0.12) !important; border-color: rgba(96, 165, 250, 0.35); } html[data-theme="dark"] .mega-card p, html[data-theme="dark"] .mega-feature p { color: var(--dm-muted); } /* Typography */ html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6, html[data-theme="dark"] .site-wrapper h1, html[data-theme="dark"] .site-wrapper h2, html[data-theme="dark"] .site-wrapper h3, html[data-theme="dark"] .site-wrapper h4, html[data-theme="dark"] .site-wrapper h5, html[data-theme="dark"] .site-wrapper h6 { color: #f8fafc !important; } html[data-theme="dark"] p, html[data-theme="dark"] li, html[data-theme="dark"] .site-wrapper p, html[data-theme="dark"] .site-wrapper li { color: #cbd5e1; } /* Hero */ html[data-theme="dark"] .hero, html[data-theme="dark"] .hero-section, html[data-theme="dark"] .page-hero { background: radial-gradient(circle at 15% 15%, rgba(11, 92, 255, 0.12), transparent 35%), radial-gradient(circle at 85% 20%, rgba(25, 195, 125, 0.08), transparent 35%), transparent !important; } html[data-theme="dark"] .hero-content { position: relative; z-index: 2; } html[data-theme="dark"] .hero h1 { background: linear-gradient(90deg, #ffffff, #60a5fa, #34d399); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent !important; } html[data-theme="dark"] .hero-description, html[data-theme="dark"] .section-description { color: #94a3b8 !important; } html[data-theme="dark"] .hero-card { background: rgba(15, 23, 42, 0.72) !important; border: 1px solid rgba(255, 255, 255, 0.10); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.50); } /* Buttons */ html[data-theme="dark"] .btn-primary, html[data-theme="dark"] .nav-btn { background: linear-gradient(135deg, #0B5CFF, #19C37D) !important; color: #ffffff !important; border: 0; } html[data-theme="dark"] .btn-outline { color: #ffffff !important; border: 1px solid transparent !important; background: linear-gradient(#020617, #020617) padding-box, linear-gradient(135deg, #0B5CFF, #19C37D) border-box !important; } html[data-theme="dark"] .btn-outline:hover { color: #ffffff !important; background: linear-gradient(135deg, #0B5CFF, #19C37D) !important; border-color: transparent !important; } /* Cards */ html[data-theme="dark"] .card, html[data-theme="dark"] .glass-card, html[data-theme="dark"] .service-card, html[data-theme="dark"] .course-card, html[data-theme="dark"] .testimonial-card, html[data-theme="dark"] .leader-card, html[data-theme="dark"] .experience-card, html[data-theme="dark"] .mission-card, html[data-theme="dark"] .value-card, html[data-theme="dark"] .stat-card, html[data-theme="dark"] .stats-card { background: rgba(15, 23, 42, 0.62) !important; border: 1px solid rgba(255, 255, 255, 0.09) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } html[data-theme="dark"] .card:hover, html[data-theme="dark"] .service-card:hover, html[data-theme="dark"] .course-card:hover, html[data-theme="dark"] .value-card:hover { border-color: rgba(96, 165, 250, 0.38) !important; } html[data-theme="dark"] .service-card { border-radius: 25px; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05); transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease; } html[data-theme="dark"] .service-card:hover { transform: translateY(-8px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.60), 0 0 30px rgba(11, 92, 255, 0.10); } html[data-theme="dark"] .course-card { background: linear-gradient(145deg, rgba(15, 23, 42, 0.85), rgba(2, 6, 23, 0.95)) !important; } /* Icons */ html[data-theme="dark"] .service-icon, html[data-theme="dark"] .course-icon, html[data-theme="dark"] .mission-icon, html[data-theme="dark"] .value-icon, html[data-theme="dark"] .why-icon, html[data-theme="dark"] .stat-icon, html[data-theme="dark"] .process-icon { background: linear-gradient(135deg, rgba(11, 92, 255, 0.16), rgba(25, 195, 125, 0.08)); color: #60a5fa; border-color: rgba(255, 255, 255, 0.10); } /* Forms */ html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { background: rgba(255, 255, 255, 0.05) !important; color: #f8fafc !important; border: 1px solid var(--dm-border) !important; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #64748b; } /* CTA */ html[data-theme="dark"] .cta-section, html[data-theme="dark"] .cta-wrapper, html[data-theme="dark"] .cta-box { background: linear-gradient(135deg, rgba(11, 92, 255, 0.16), rgba(25, 195, 125, 0.09)) !important; border: 1px solid var(--dm-border); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } html[data-theme="dark"] .cta-content { background: transparent !important; } /* Mobile drawer */ @media (max-width: 1100px) { html[data-theme="dark"] .nav-links { background: rgba(2, 6, 23, 0.98) !important; color: #f8fafc; backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border-left: 1px solid var(--dm-border); } html[data-theme="dark"] .nav-links .nav-link, html[data-theme="dark"] .mobile-open .nav-link { color: #e2e8f0 !important; } html[data-theme="dark"] .nav-links .nav-link:hover, html[data-theme="dark"] .nav-links .nav-link.active, html[data-theme="dark"] .mobile-open .nav-link:hover { color: #60a5fa !important; } html[data-theme="dark"] .nav-overlay { background: rgba(0, 0, 0, 0.68) !important; color: #ffffff; } } /* Keep gradient text intentional rather than applying it to every heading. */ @media (max-width: 1100px) { html[data-theme="dark"] .gradient-text { background: linear-gradient(135deg, #0B5CFF, #19C37D); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent !important; } } /* Floating elements / image wrappers */ html[data-theme="dark"] .floating-card, html[data-theme="dark"] .image-wrapper, html[data-theme="dark"] .hero-image-wrapper, html[data-theme="dark"] .story-image, html[data-theme="dark"] .about-image { background: rgba(255, 255, 255, 0.04) !important; border-color: var(--dm-border); } /* Country cards */ html[data-theme="dark"] .country-card { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.12); color: #f8fafc; } html[data-theme="dark"] .country-card h3 { color: #ffffff !important; } html[data-theme="dark"] .country-card p { color: #a8b3c7 !important; } /* Footer */ html[data-theme="dark"] .site-footer { background: radial-gradient(circle at 15% 10%, rgba(11, 92, 255, 0.18), transparent 35%), radial-gradient(circle at 85% 20%, rgba(25, 195, 125, 0.12), transparent 35%), #000000 !important; color: #ffffff; border-top: 1px solid var(--dm-border); } html[data-theme="dark"] .footer-column h4, html[data-theme="dark"] .footer-cta h3 { color: #ffffff !important; } html[data-theme="dark"] .footer-brand p, html[data-theme="dark"] .footer-column a, html[data-theme="dark"] .footer-bottom { color: rgba(255, 255, 255, 0.65); } html[data-theme="dark"] .footer-column a:hover { color: #ffffff; } /* Accessibility / performance */ @media (prefers-reduced-motion: reduce) { html[data-theme="dark"] .hero-image, .country-card { animation: none !important; } html[data-theme="dark"] .service-card, .course-card, .course-icon { transition: none !important; } } /* WhatsApp/message icon remains visible in dark mode. */ html[data-theme="dark"] .message { color: #25D366 !important; }