/* Global Reset */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; } /* Smooth scrolling animation */ html { scroll-behavior: smooth; } header { background: linear-gradient(90deg, #007BFF, #FF6F00); color: white; padding: 20px 10%; display: flex; flex-direction: column; /* Stack logo and navigation vertically */ align-items: flex-start; /* Align to the left */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } /* Logo Styles */ header .logo { display: flex; align-items: center; /* Align the logo image and text horizontally */ justify-content: flex-start; /* Align the logo to the left */ width: 100%; margin-bottom: 10px; /* Space between the logo and navigation */ } header .logo-img { width: 80px; /* Adjust the size of the logo */ height: auto; margin-right: 15px; /* Space between logo image and text */ } header .logo h1 { font-size: 2rem; font-weight: bold; } header .logo p { font-size: 0.9rem; } /* Navigation Styles */ header .nav { display: flex; justify-content: right; /* Center align the navigation links */ width: 100%; /* Ensure full width for navigation */ margin-top: 10px; /* Space above navigation */ flex-wrap: wrap; /* Allow items to wrap on small screens */ gap: 15px; /* Space between links */ } header .nav a { text-decoration: none; color: white; font-weight: bold; transition: color 0.3s; } header .nav a:hover { color: #ffe08a; } /* Responsive Design: Stack logo on top and nav below */ @media (max-width: 768px) { header { padding: 20px 5%; text-align: center; /* Center align everything on small screens */ } header .logo { justify-content: center; /* Center the logo on small screens */ margin-bottom: 20px; /* More space between the logo and nav */ } header .logo h1 { font-size: 1.8rem; /* Slightly smaller font size for logo text */ } header .logo p { font-size: 0.8rem; /* Slightly smaller font size for logo description */ } header .nav { justify-content: center; /* Center the navigation */ width: 100%; } header .nav a { font-size: 1.1rem; /* Slightly bigger nav links */ } } /* Hero Section */ .hero-section { text-align: center; padding: 100px 20px; background: #007BFF; color: white; clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); } .hero-section h2 { font-size: 3rem; margin-bottom: 20px; } .hero-section p { font-size: 1.2rem; margin-bottom: 30px; } .cta-button { background-color: #FF6F00; color: white; padding: 10px 20px; font-size: 1rem; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; text-decoration: none; } .cta-button:hover { background-color: #cc5800; } /* Features Section */ .features { background-color: #f4f4f4; padding: 60px 10%; text-align: center; } .features h2 { color: #007BFF; margin-bottom: 30px; } .features-list { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .feature-item { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); flex: 1; min-width: 250px; transition: transform 0.3s; will-change: transform; } .feature-item:hover { transform: translateY(-10px); } /* Courses Section */ .courses { background-color: white; padding: 60px 10%; will-change: transform; } .courses h2 { color: #FF6F00; margin-bottom: 30px; text-align: center; } .course-list { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .course-item { background: #f4f4f4; padding: 20px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); flex: 1; min-width: 250px; transition: transform 0.3s; will-change: transform; } .course-item a { display: inline-block; margin-top: 10px; color: #007BFF; text-decoration: none; font-weight: bold; will-change: transform; } .course-item:hover { transform: translateY(-10px); } /* Testimonials Section */ .testimonials { background-color: #007BFF; color: white; text-align: center; padding: 60px 20px; will-change: transform; } .testimonials h2 { margin-bottom: 30px; } .testimonial { background: white; color: #333; margin: 20px auto; padding: 20px; border-radius: 10px; max-width: 600px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); will-change: transform; } /* FAQ Section Styles */ .faq { background-color: #f4f4f4; padding: 60px 10%; text-align: center; will-change: transform; } .faq h2 { color: #FF6F00; margin-bottom: 30px; font-size: 2rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; } .faq-item { background-color: white; margin-bottom: 20px; padding: 15px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; will-change: transform; } .faq-item:hover { transform: translateY(-5px); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); } .faq-question { font-size: 1.2rem; font-weight: 600; color: #007BFF; cursor: pointer; transition: color 0.3s ease; will-change: transform; } .faq-answer { font-size: 1rem; color: #555; margin-top: 10px; display: none; line-height: 1.6; will-change: transform; } /* Hover effect on question */ .faq-question:hover { color: #FF6F00; } /* On clicking the question (toggle the answer) */ .faq-item.active .faq-answer { display: block; } /* Mobile responsiveness */ @media (max-width: 768px) { .faq { padding: 40px 5%; } .faq h2 { font-size: 1.8rem; } .faq-item { padding: 12px; } .faq-question { font-size: 1rem; } .faq-answer { font-size: 0.9rem; } } /* Contact Section Styles */ .contact-section { background-color: white; padding: 60px 10%; text-align: center; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); border-radius: 10px; transition: box-shadow 0.3s ease-in-out; } .contact-section:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); } .contact-section h2 { color: #007BFF; margin-bottom: 20px; font-size: 2rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; } .contact-section a { color: #FF6F00; text-decoration: none; font-weight: bold; transition: color 0.3s ease-in-out; } .contact-section a:hover { color: #cc5800; text-decoration: underline; } .contact-section p { font-size: 1.1rem; margin-bottom: 15px; line-height: 1.6; color: #555; } .contact-section strong { font-weight: bold; color: #007BFF; } /* Responsive Styles for Contact Section */ @media (max-width: 768px) { .contact-section { padding: 40px 5%; } .contact-section h2 { font-size: 1.8rem; } .contact-section p { font-size: 1rem; } } /* Footer Section */ footer { background-color: #007BFF; color: white; text-align: center; padding: 20px 0; } /* Responsive Design for Smaller Screens */ @media (max-width: 768px) { header { flex-direction: column; text-align: center; } .features-list, .course-list { flex-direction: column; } .cta-button { padding: 12px 30px; font-size: 1.2rem; } .contact-form input, .contact-form textarea { width: 90%; } } /* Scroll to Top Button */ .scroll-to-top { position: fixed; bottom: 20px; right: 20px; background-color: #007BFF; color: white; border: none; padding: 10px; border-radius: 50%; font-size: 24px; cursor: pointer; display: none; /* Initially hidden */ transition: all 0.3s ease; } .scroll-to-top:hover { background-color: #FF6F00; } /* Scroll to Top Button */ .scroll-to-top { position: fixed; bottom: 20px; right: 20px; background-color: #007BFF; color: white; border: none; padding: 10px; border-radius: 50%; font-size: 24px; cursor: pointer; display: none; /* Initially hidden */ transition: all 0.3s ease; animation: slideIn 0.5s ease-in-out; } .scroll-to-top:hover { background-color: #FF6F00; } /* Scroll Button Animation */ @keyframes slideIn { 0% { transform: translateX(50px); /* Start from the right */ } 100% { transform: translateX(0); /* End at the original position */ } } /* For Left to Right Animation */ .scroll-to-top-left { animation: slideInLeft 0.5s ease-in-out; } @keyframes slideInLeft { 0% { transform: translateX(-50px); /* Start from the left */ } 100% { transform: translateX(0); /* End at the original position */ } } /* Animations */ @keyframes slideInRight { 0% { transform: translateX(-100%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } @keyframes slideInLeft { 0% { transform: translateX(100%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /* Default hidden state for animations */ .features, .courses, .testimonials, .faq { opacity: 0; transition: opacity 0.5s ease-in-out; } /* Trigger animations */ .features.animate { animation: slideInLeft 1s ease-in-out; opacity: 1; } .courses.animate { animation: slideInRight 1s ease-in-out; opacity: 1; } .testimonials.animate { animation: fadeIn 1.5s ease-in-out; opacity: 1; } .faq.animate { animation: slideInLeft 1s ease-in-out; opacity: 1; } /* Animations */ @keyframes slideInRight { 0% { transform: translateX(-100%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } @keyframes slideInLeft { 0% { transform: translateX(100%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /* Default hidden state for animations */ .feature-item, .course-item, .testimonial, .faq-item { opacity: 0; transition: opacity 0.5s ease-in-out; } /* Trigger animations */ .feature-item.animate { animation: slideInLeft 1s ease-in-out; opacity: 1; } .course-item.animate { animation: slideInRight 1s ease-in-out; opacity: 1; } .testimonial.animate { animation: fadeIn 1.5s ease-in-out; opacity: 1; } .faq-item.animate { animation: slideInLeft 1s ease-in-out; opacity: 1; }