/* ========================================== GLOBAL PROFESSIONAL UI SYSTEM BAW SOLUTIONS ========================================== */ /* ROOT */ :root { --primary: #0B5CFF; --secondary: #19C37D; --text: #111827; --text-muted: #6B7280; --bg: #ffffff; --border: #E5E7EB; --radius-sm: 12px; --radius-md: 18px; --radius-lg: 28px; --shadow-sm: 0 5px 20px rgba(0, 0, 0, .06); --shadow-md: 0 20px 50px rgba(0, 0, 0, .12); } /* RESET */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: "Inter", "Segoe UI", Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; } /* CONTAINER */ .container { width: 100%; max-width: 1280px; margin: auto; padding-left: 24px; padding-right: 24px; } /* SECTIONS */ section { padding: 100px 0; } .section-heading { max-width: 760px; margin: auto; } .section-heading.center { text-align: center; } .section-badge { display: inline-flex; align-items: center; padding: 8px 18px; border-radius: 50px; background: rgba(11, 92, 255, .08); color: var(--primary); font-weight: 700; font-size: 14px; margin-bottom: 20px; } /* HEADINGS */ h1, h2, h3, h4, h5, h6 { font-weight: 800; line-height: 1.15; letter-spacing: -.03em; } h1 { font-size: clamp(42px, 6vw, 72px); } h2 { font-size: clamp(32px, 4vw, 52px); } h3 { font-size: clamp(22px, 3vw, 32px); } h4 { font-size: 22px; } p { color: var(--text-muted); font-size: 17px; line-height: 1.8; } /* BUTTON SYSTEM */ .btn, .nav-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 30px; border-radius: 50px; font-weight: 700; text-decoration: none; transition: .35s ease; } .btn-primary { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; box-shadow: 0 15px 35px rgba(11, 92, 255, .25); } .btn-primary:hover { transform: translateY(-4px); } /* GRID SYSTEM */ .services-grid, .courses-grid, .testimonials-grid, .statistics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } /* ALL CARDS */ .service-card, .course-card, .testimonial-card, .stat-card, .glass-card { background: white; border: 1px solid var(--border); border-radius: 28px; padding: 35px 30px; box-shadow: var(--shadow-sm); transition: .4s ease; } .service-card:hover, .course-card:hover, .testimonial-card:hover, .stat-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-md); } /* ICONS */ .service-icon, .course-icon, .stat-icon { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; border-radius: 22px; background: rgba(11, 92, 255, .08); color: var(--primary); margin-bottom: 25px; } /* IMAGES */ img { max-width: 100%; display: block; } /* FOOTER */ .site-footer { padding: 90px 0 30px; } /* TABLET */ @media(max-width:1100px) { section { padding: 80px 0; } .services-grid, .courses-grid, .testimonials-grid, .statistics-grid { grid-template-columns: repeat(2, 1fr); } } /* MOBILE */ @media(max-width:600px) { .container { padding-left: 18px; padding-right: 18px; } section { padding: 60px 0; } p { font-size: 16px; } .services-grid, .courses-grid, .testimonials-grid, .statistics-grid { grid-template-columns: 1fr; gap: 20px; } .service-card, .course-card, .testimonial-card { padding: 28px 22px; } .btn, .nav-btn { width: 100%; } } /* =================================================== 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:#0B5CFF; } /* 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; }