*{
    box-sizing: border-box;
}
body { margin: 0; font-family: 'Inter', sans-serif; background-color: #0f172a; color: white; } /* Navigation */ .navbar { position: sticky; top: 0; width: 100%; background: rgba(15, 23, 42, 0.95); /* dark translucent */ backdrop-filter: blur(8px); z-index: 1000; border-bottom: 1px solid rgba(255,255,255,0.05); } .nav-container { max-width: 1200px; margin: auto; padding: 0.8rem 1.5rem; display: flex; align-items: center; justify-content: space-between; } .nav-logo { font-size: 1.2rem; font-weight: 700; color: white; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; } .nav-logo img { height: 35px; border-radius: 50%; } .nav-links { list-style: none; display: flex; gap: 1.5rem; } .nav-links li a { text-decoration: none; color: #cbd5e1; font-weight: 500; transition: color 0.3s; } .nav-links li a:hover { color: #0077ff; } .nav-links li a.active{ color: tomato; } .nav-btn { padding: 0.5rem 1rem; background: #0077ff; color: white; border-radius: 8px; text-decoration: none; font-weight: 600; transition: background 0.3s; } .nav-btn:hover { background: #005fcc; } /* Mobile */ .nav-toggle { display: none; font-size: 1.5rem; color: white; cursor: pointer; } @media (max-width: 768px) { .nav-links, .nav-btn { display: none; } .nav-links.active, .nav-btn.active { display: block; position: absolute; top: 60px; right: 1rem; background: #1e293b; padding: 1rem; border-radius: 8px; flex-direction: column; gap: 1rem; } .nav-links { flex-direction: column; } .nav-toggle { display: block; } } /* Hero CSS */ /* Hero Section with Background */ .hero { position: relative; overflow: hidden; background: #0f172a; padding: 80px 20px; color: white; } .hero #hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; } /* Hero Buttons */ .hero-buttons { margin-top: 20px; display: flex; gap: 15px; flex-wrap: wrap; } .hero-btn { padding: 12px 28px; border-radius: 50px; font-size: 1rem; font-weight: 600; text-decoration: none; transition: all 0.3s ease; display: inline-block; } /* Primary Button */ .hero-btn.primary { background: #0077ff; color: white; box-shadow: 0 4px 15px rgba(0, 119, 255, 0.4); } .hero-btn.primary:hover { background: #005fcc; box-shadow: 0 6px 20px rgba(0, 119, 255, 0.6); } /* Secondary Button */ .hero-btn.secondary { background: transparent; border: 2px solid #0077ff; color: #0077ff; } .hero-btn.secondary:hover { background: #0077ff; color: white; box-shadow: 0 6px 20px rgba(0, 119, 255, 0.6); } .hero-container { position: relative; z-index: 1; /* keep text above canvas */ max-width: 1200px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 50px; flex-wrap: wrap; } /* Hero Image Floating Animation */ .hero-image img { width: 100%; max-width: 500px; border-radius: 16px; animation: floatUpDown 5s ease-in-out infinite; } @keyframes floatUpDown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } .container { max-width: 900px; margin: auto; padding: 2rem; text-align: center; } .header{ padding-top: 2rem; } .header h1 { font-size: 2.5rem; font-weight: 700; margin: 0.5rem 0; } .tagline { font-size: 1rem; color: #cbd5e1; margin-bottom: 2rem; } .logo-placeholder { width: 80px; height: 80px; background: #1e293b; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #cbd5e1; margin: 0 auto 1rem; } .logo-placeholder img, .foot-logo{ height: 150px; border-radius: 100px; } .courses { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .course { background: #1e293b; padding: 1.2rem; border-radius: 12px; display: flex; flex-direction: column; align-items: center; transition: transform 0.2s ease; cursor: pointer; } .course:hover { transform: translateY(-5px); } .course i { font-size: 1.8rem; margin-bottom: 0.5rem; color: white; } .course p { margin: 0; font-weight: 500; font-size: 1rem; text-align: center; } .course small { font-size: 0.85rem; color: #94a3b8; } /* New sections */ .course-section { width: 100%; background: #0f172a; padding: 40px 0; } .course-row { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 40px; max-width: 1200px; margin: auto; margin-bottom: 60px; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .course-row.show { opacity: 1; transform: translateY(0); } .course-row:last-child { margin-bottom: 0; /* Remove space after the last row */ } .course-row.reverse { flex-direction: row-reverse; } .course-text { flex: 1; } .course-icon { font-size: 2.5rem; color: #0077ff; margin-bottom: 15px; } .course-text h2 { font-size: 1.8rem; margin-bottom: 10px; color: #FFF; } .course-text p { font-size: 1rem; color: #555; margin-bottom: 20px; line-height: 1.5; } .course-btn { display: inline-block; padding: 10px 20px; background: #0077ff; color: white; border-radius: 8px; text-decoration: none; transition: background 0.3s ease; } .course-btn:hover { background: #005fcc; } .course-image { flex: 1; } .course-image img { width: 100%; height: 400px; object-fit: cover; object-position: center; border-radius: 12px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); } @media (max-width: 768px) { .course-row { flex-direction: column; } .course-row.reverse { flex-direction: column; } } /* Testimonials */ /* Testimonials Section */ .testimonials { background: #0f172a; color: white; padding: 60px 20px; text-align: center; position: relative; } .testimonials h2 { font-size: 2rem; margin-bottom: 40px; } .testimonial-wrapper { display: flex; align-items: center; justify-content: center; position: relative; max-width: 1000px; margin: auto; overflow: hidden; } .testimonial-slider { display: flex; gap: 20px; transition: transform 0.5s ease-in-out; } .testimonial-card { background: #1e293b; border-radius: 16px; padding: 20px; min-width: 280px; max-width: 300px; text-align: center; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); transition: transform 0.3s ease; } .testimonial-card:hover { transform: translateY(-10px); } .testimonial-card img { width: 70px; height: 70px; border-radius: 50%; margin-bottom: 15px; object-fit: cover; border: 3px solid #0077ff; } .testimonial-card p { font-size: 0.95rem; margin-bottom: 15px; color: #cbd5e1; } .stars { font-size: 1.2rem; color: #facc15; /* gold stars */ } /* Navigation buttons */ .nav-btn { background: rgba(0, 119, 255, 0.8); border: none; color: white; font-size: 1.5rem; padding: 10px; border-radius: 50%; cursor: pointer; transition: background 0.3s ease; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; } .nav-btn:hover { background: #005fcc; } .prev { left: -40px; } .next { right: -40px; } /* ========== WHY CHOOSE US (WCU) ========== */ .wcu { padding: 80px 20px; background: #0f172a; text-align: center; } .wcu-container { max-width: 1100px; margin: 0 auto; } .wcu-header h2 { font-size: 2.4rem; margin: 0 0 10px; color: #FFFFFF; line-height: 1.2; } .wcu-header h2 span { color: #0077ff; } .wcu-subtitle { color: #666; font-size: 1.05rem; margin: 0 0 42px; } .wcu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; } .wcu-card { background: #fff; color: #222; border-radius: 14px; padding: 28px 22px; box-shadow: 0 10px 24px rgba(0,0,0,0.08); transition: transform 0.6s ease, opacity 0.6s ease, box-shadow 0.3s ease; will-change: transform, opacity; } .wcu-card:hover { transform: translateY(-6px); box-shadow: 0 16px 30px rgba(0,0,0,0.12); } .wcu-icon { width: 64px; height: 64px; margin: 0 auto 12px; display: grid; place-items: center; font-size: 30px; border-radius: 50%; background: #eef5ff; } .wcu-card h3 { font-size: 1.2rem; margin: 8px 0 8px; } .wcu-card p { margin: 0; color: #555; line-height: 1.55; } /* Reveal animation states (JS will add/remove these) */ .wcu-card.wcu-hide { opacity: 0; transform: translateY(34px); } .wcu-card.wcu-show { opacity: 1; transform: translateY(0); } /* Motion accessibility */ @media (prefers-reduced-motion: reduce) { .wcu-card { transition: none !important; } } /* Small screens */ @media (max-width: 480px) { .wcu-header h2 { font-size: 2rem; } .wcu-subtitle { font-size: 1rem; } } /* GOOGLE FONT */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap'); /* ========== COURSES SECTION ========== */ /*.courses2{ padding: 80px 20px; background: #0f172a; font-family: 'Poppins', sans-serif; } .courses-container { max-width: 1200px; margin: 0 auto; } .courses-header h2 { font-size: 2.4rem; margin: 0 0 10px; text-align: center; color: #222; } .courses-header h2 span { color: #0077ff; } .courses-subtitle { text-align: center; color: #666; font-size: 1.05rem; margin: 0 auto 50px; max-width: 700px; } .courses-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; } .course-card { background: #f9f9f9; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,0.08); transform: translateY(0); opacity: 1; transition: transform 0.6s ease, opacity 0.6s ease, box-shadow 0.3s ease; will-change: transform, opacity; } .course-card:hover { transform: translateY(-8px); box-shadow: 0 14px 28px rgba(0,0,0,0.12); } .course-card img { width: 100%; height: 300px; display: block; } .course-content { padding: 20px; text-align: center; } .course-content h3 { font-size: 1.3rem; margin: 10px 0; color: #222; } .course-content p { font-size: 0.95rem; color: #555; margin-bottom: 16px; line-height: 1.6; } .btn { display: inline-block; padding: 10px 20px; background: #0077ff; color: #fff; border-radius: 8px; font-weight: 600; text-decoration: none; transition: background 0.3s ease; } .btn:hover { background: #005ecc; }*/ /* Reveal states */ .course-card.course-hide { opacity: 0; transform: translateY(34px); } .course-card.course-show { opacity: 1; transform: translateY(0); } /* ========== CTA SECTION ========== */ .cta { position: relative; background: url("../images/learns2.jpg") center/cover no-repeat; padding: 100px 20px; color: #fff; text-align: center; overflow: hidden; } .cta-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 1; } .cta-content { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; opacity: 1; transform: translateY(0); transition: transform 0.8s ease, opacity 0.8s ease; } .cta-content h2 { font-size: 2.6rem; margin-bottom: 15px; line-height: 1.2; } .cta-content p { font-size: 1.1rem; margin-bottom: 25px; color: #ddd; } .cta-btn { display: inline-block; background: #0077ff; color: #fff; padding: 14px 30px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 1rem; transition: background 0.3s ease; } .cta-btn:hover { background: #005ecc; } /* Hidden state */ .cta-hide { opacity: 0; transform: translateY(40px); } /* Visible state */ .cta-show { opacity: 1; transform: translateY(0); } /* Responsive */ @media (max-width: 600px) { .cta-content h2 { font-size: 2rem; } .cta-content p { font-size: 1rem; } } /* ========== FAQ SECTION ========== */ .faq { padding: 80px 20px; background: #0f172a; font-family: 'Poppins', sans-serif; } .faq-container { max-width: 900px; margin: 0 auto; } .faq-header h2 { font-size: 2.4rem; text-align: center; color: #FFF; margin-bottom: 10px; } .faq-header h2 span { color: #0077ff; } .faq-subtitle { text-align: center; color: #666; margin-bottom: 40px; font-size: 1.05rem; } .faq-list { display: flex; flex-direction: column; gap: 15px; } .faq-item { border-radius: 10px; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.08); overflow: hidden; } .faq-question { width: 100%; padding: 18px 20px; font-size: 1.05rem; font-weight: 600; text-align: left; border: none; background: none; cursor: pointer; color: #222; position: relative; } .faq-question::after { content: "+"; position: absolute; right: 20px; font-size: 1.4rem; transition: transform 0.3s ease; } .faq-item.active .faq-question::after { content: "–"; } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s ease; padding: 0 20px; color: #555; } .faq-item.active .faq-answer { max-height: 200px; padding: 15px 20px 20px; } /* Responsive */ @media (max-width: 600px) { .faq-header h2 { font-size: 2rem; } .faq-subtitle { font-size: 1rem; } } /* ========== CONTACT SECTION ========== */ .contact { padding: 80px 20px; background: #0f172a; font-family: 'Poppins', sans-serif; } .contact-container { max-width: 1100px; margin: 0 auto; } .contact-header h2 { font-size: 2.4rem; text-align: center; color: #FFF; margin-bottom: 10px; } .contact-header h2 span { color: #0077ff; } .contact-subtitle { text-align: center; color: #666; margin-bottom: 50px; font-size: 1.05rem; } .contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; } .contact-form .form-group { margin-bottom: 20px; } .contact-form input, .contact-form textarea { width: 100%; padding: 14px 16px; border: 1px solid #ccc; border-radius: 8px; font-size: 1rem; font-family: 'Poppins', sans-serif; } .contact-form textarea { resize: none; } .btn-submit { display: inline-block; background: #0077ff; color: #fff; padding: 14px 26px; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: background 0.3s ease; } .btn-submit:hover { background: #005ecc; } .contact-info { background: #f9f9f9; padding: 30px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); } .contact-info h3 { margin-bottom: 15px; font-size: 1.3rem; color: #222; } .contact-info p { margin: 10px 0; color: #555; font-size: 0.95rem; } /* Responsive */ @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } } /* Footer */ .site-footer { background: #0b1e35; color: white; padding-top: 40px; font-family: Arial, sans-serif; } .footer-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; max-width: 1200px; margin: auto; padding: 0 20px 40px 20px; } .footer-about h2 { font-size: 1.5rem; margin-bottom: 10px; } .footer-about p { font-size: 0.95rem; line-height: 1.5; color: #ddd; } .footer-links h3, .footer-social h3 { font-size: 1.2rem; margin-bottom: 10px; } .footer-links ul { list-style: none; padding: 0; } .footer-links ul li { margin-bottom: 8px; } .footer-links ul li a { color: #ccc; text-decoration: none; transition: color 0.3s ease; } .footer-links ul li a:hover { color: #0077ff; } .social-icons a { display: inline-block; margin-right: 10px; font-size: 1.2rem; color: white; transition: color 0.3s ease; } .social-icons a:hover { color: #0077ff; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); text-align: center; padding: 15px; font-size: 0.85rem; color: #ccc; }