JezK
Edit File: about.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>About Us | Skylor Institute Bathinda | Our Mission & Methodology</title> <meta name="description" content="Expert coaching for CLAT, CUET, IPMAT, and UPSC Foundation."> <meta name="author" content="Skylor Institute"> <meta property="og:title" content="About Us | Skylor Institute Bathinda | Our Mission & Methodology"> <meta property="og:description" content="Expert coaching for CLAT, CUET, IPMAT, and UPSC Foundation."> <meta property="og:type" content="website"> <meta name="google-site-verification" content="EJw2Mf8YQSUaCSMfraU1c7U6kT5epjb0LX5FRNuuYWQ" /> <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> <style> /* Google Fonts Import */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap'); :root { /* Color Palette - Premium & Modern */ --primary-color: #003366; /* Deep Royal Blue */ --primary-dark: #001a33; /* Darker Blue for depth */ --primary-light: #004d99; /* Lighter Blue for accents */ --secondary-color: #FFB300; /* Rich Gold */ --secondary-hover: #FFC107; /* Brighter Gold */ --text-dark: #1F2937; /* Dark Gray for text */ --text-light: #4B5563; /* Medium Gray for subtext */ --text-white: #F9FAFB; --bg-white: #FFFFFF; --bg-light: #F5F6FA; /* Very light gray for backgrounds */ --bg-accent: #E5E7EB; --border-color: #E5E7EB; /* Shadows */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.04); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.08); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15); /* Typography */ --font-heading: 'Montserrat', sans-serif; --font-body: 'Montserrat', sans-serif; /* Modern, clean sans-serif */ /* Spacing */ --container-width: 1280px; /* Slightly wider container */ --header-height: 80px; --section-spacing: 100px; } /* Reset & Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; } body { font-family: var(--font-body); color: var(--text-dark); line-height: 1.7; background-color: var(--bg-white); -webkit-font-smoothing: antialiased; overflow-x: hidden; width: 100%; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--primary-color); margin-bottom: 1rem; font-weight: 700; line-height: 1.2; } p { margin-bottom: 1.5rem; color: var(--text-light); } a { text-decoration: none; color: inherit; transition: all 0.3s ease; } ul { list-style: none; } img { max-width: 100%; display: block; } /* Utility Classes */ .container { max-width: var(--container-width); margin: 0 auto; padding: 0 24px; } .section-padding { padding: var(--section-spacing) 0; } .bg-light { background-color: var(--bg-light); } .text-center { text-align: center; } /* Modern Buttons */ .btn { display: inline-block; padding: 16px 36px; border-radius: 12px; font-family: var(--font-heading); font-weight: 600; text-align: center; cursor: pointer; border: none; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; z-index: 1; } .btn-sm { padding: 10px 24px; font-size: 0.9rem; } .btn-primary { background: linear-gradient(135deg, var(--secondary-color), #FFC72C); color: var(--primary-dark); box-shadow: 0 4px 15px rgba(255, 179, 0, 0.3); } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(255, 179, 0, 0.4); } .btn-outline { border: 2px solid rgba(255, 255, 255, 0.8); color: var(--text-white); background: transparent; } .btn-outline:hover { background: var(--bg-white); color: var(--primary-color); border-color: var(--bg-white); } .btn-outline-dark { border: 2px solid var(--primary-color); color: var(--primary-color); background: transparent; } .btn-outline-dark:hover { background: var(--primary-color); color: var(--text-white); } .btn-secondary-outline { border: 2px solid var(--primary-color); color: var(--primary-color); background: transparent; } .btn-secondary-outline:hover { background: var(--primary-color); color: var(--text-white); } /* Header & Navigation */ header { background-color: rgba(255, 255, 255, 0.95); /* Slight transparency */ backdrop-filter: blur(10px); box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 1000; height: var(--header-height); display: flex; align-items: center; transition: all 0.3s ease; } header .container { display: flex; justify-content: space-between; align-items: center; width: 100%; } .logo img { height: 55px; width: auto; } .nav-menu { display: flex; gap: 40px; align-items: center; } .nav-link { font-family: var(--font-heading); font-weight: 600; color: var(--primary-color); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.5px; position: relative; } .nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -4px; left: 0; background-color: var(--secondary-color); transition: width 0.3s ease; } .nav-link:hover::after { width: 100%; } .nav-link:hover { color: var(--primary-light); } .mobile-toggle { display: none; font-size: 1.5rem; color: var(--primary-color); cursor: pointer; } /* Hero Section Styles (Split Layout Slider) */ .hero-slider-section { position: relative; height: 80vh; /* Reduced height for better placement */ min-height: 550px; overflow: hidden; background-color: #FFFFFF; /* White background matching reference */ /* padding-top removed to fix alignment */ } /* Alignment Fix */ .hero-slider-section .container { position: relative; height: 100%; } .hero-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity 0.8s ease-in-out, visibility 0.8s; display: flex; align-items: center; z-index: 1; } .hero-slide.active { opacity: 1; visibility: visible; z-index: 2; } /* Remove dark overlay since we want light background */ .hero-slide::before { display: none; } .hero-split-layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; width: 100%; height: 100%; } /* Left Content Column */ .hero-text-col { padding-right: 20px; z-index: 2; animation: slideRight 1s ease 0.2s backwards; } /* Badge Style */ .hero-badge { display: inline-block; background: rgba(255, 179, 0, 0.15); /* Light Orange/Gold bg */ color: #D97706; /* Darker Orange text */ padding: 8px 16px; border-radius: 30px; font-size: 0.9rem; font-weight: 600; margin-bottom: 24px; display: inline-flex; align-items: center; gap: 8px; } .hero-badge i { color: var(--secondary-color); } /* Typography matching reference */ .hero-text-col h1 { font-size: 3.5rem; /* Large Headline */ line-height: 1.15; color: var(--primary-dark); margin-bottom: 20px; font-weight: 800; } .hero-text-col h1 span { color: var(--secondary-color); /* Highlight color */ } .hero-text-col h1 .highlight-blue { color: var(--primary-color); } .hero-text-col p { font-size: 1.15rem; color: var(--text-light); /* Dark gray */ margin-bottom: 35px; max-width: 90%; line-height: 1.6; } /* Buttons Group */ .hero-btns { display: flex; gap: 15px; } /* Custom Button Styles for Hero */ .btn-hero-primary { background-color: var(--primary-color); color: white; padding: 16px 32px; border-radius: 12px; font-weight: 600; box-shadow: 0 4px 6px rgba(0, 51, 102, 0.3); text-transform: uppercase; } .btn-hero-primary:hover { background-color: var(--primary-dark); transform: translateY(-2px); } .btn-hero-secondary { background: linear-gradient(135deg, #FF9F00, #FFC107); /* Orange/Gold gradient */ color: white; padding: 16px 32px; border-radius: 12px; font-weight: 600; box-shadow: 0 4px 10px rgba(255, 160, 0, 0.3); text-transform: uppercase; } .btn-hero-secondary:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(255, 160, 0, 0.4); } /* Right Image Column */ .hero-img-col { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; animation: fadeIn 1.2s ease 0.2s backwards; } /* Abstract Background Shapes */ .hero-blob-bg { position: absolute; width: 500px; height: 500px; background: linear-gradient(135deg, #FFF8E1, #FFECB3); /* Very light gold */ border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; /* Organic Blob shape */ z-index: -1; animation: morph 8s ease-in-out infinite; right: 50px; } .hero-blob-bg.blue-accent { background: linear-gradient(135deg, #E3F2FD, #BBDEFB); /* Light Blue */ width: 450px; height: 450px; border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; right: 80px; } .hero-student-img { position: relative; z-index: 1; max-height: 85%; width: auto; object-fit: contain; /* filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15)); */ } @keyframes slideRight { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } @keyframes morph { 0% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; } 50% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } 100% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; } } /* Page Hero Generic */ .page-header { position: relative; height: 40vh; /* Reduced height for inner pages */ min-height: 350px; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--text-white); background-size: cover; background-position: center; margin-top: -80px; /* Pull up behind header */ padding-top: 80px; } .page-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(0, 15, 30, 0.7), rgba(0, 30, 60, 0.9)); z-index: 1; } .page-header .container { position: relative; z-index: 2; } .page-header h1 { font-size: 3.5rem; color: var(--text-white); margin-bottom: 20px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } .page-header p { font-size: 1.2rem; color: rgba(255, 255, 255, 0.9); max-width: 700px; margin: 0 auto; } /* Section Titles */ .section-title { margin-bottom: 60px; position: relative; display: block; text-align: center; } .section-title h2 { font-size: 2.8rem; color: var(--primary-dark); margin-bottom: 15px; } .section-title p { font-size: 1.1rem; max-width: 600px; margin: 0 auto; } .section-title::after { content: ''; display: block; width: 80px; height: 4px; background: var(--secondary-color); margin: 20px auto 0; border-radius: 4px; } /* Feature Cards (New Core Features) */ .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; } .feature-card { text-align: left; padding: 35px; background: var(--bg-white); border-radius: 16px; box-shadow: var(--shadow-md); transition: all 0.4s ease; border: 1px solid rgba(0, 0, 0, 0.03); position: relative; overflow: hidden; } .feature-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--secondary-color); transform: scaleY(0); transition: transform 0.4s ease; } .feature-card:hover::before { transform: scaleY(1); } .feature-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); } .feature-icon { font-size: 2rem; color: var(--secondary-color); margin-bottom: 20px; display: inline-block; background: rgba(255, 179, 0, 0.1); padding: 15px; border-radius: 12px; } .feature-card h3 { font-size: 1.3rem; margin-bottom: 10px; color: var(--primary-color); } .feature-card p { font-size: 0.95rem; color: var(--text-light); margin-bottom: 0; } /* Course Cards */ .courses-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; } .course-card { background: var(--bg-white); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-md); transition: all 0.4s ease; display: flex; flex-direction: column; height: 100%; border-bottom: 3px solid transparent; } .course-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); border-bottom-color: var(--secondary-color); } .course-icon-wrapper { background: var(--primary-color); padding: 40px 30px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .course-icon-wrapper i { font-size: 4rem; color: rgba(255, 255, 255, 0.1); position: absolute; right: -10px; bottom: -10px; transform: rotate(-15deg); } .course-main-icon { font-size: 3rem; color: var(--secondary-color); z-index: 1; } .course-content { padding: 30px; flex-grow: 1; display: flex; flex-direction: column; } .course-card h3 { font-size: 1.6rem; margin-bottom: 12px; } .course-card p { color: var(--text-light); margin-bottom: 24px; flex-grow: 1; } /* About Us Section Styles */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .about-image { position: relative; } .about-image img { border-radius: 20px; box-shadow: var(--shadow-xl); } .about-shape { position: absolute; bottom: -30px; left: -30px; width: 100px; height: 100px; background: var(--secondary-color); border-radius: 50%; z-index: -1; opacity: 0.5; } /* Request Call Back Section */ .call-back-section { background-color: var(--bg-light); position: relative; } .call-back-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .call-back-content h2 { font-size: 2.5rem; margin-bottom: 20px; } .call-back-form-wrapper { background: var(--bg-white); padding: 40px; border-radius: 20px; box-shadow: var(--glass-shadow); } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--primary-dark); } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px 16px; border: 1px solid var(--border-color); border-radius: 8px; font-family: inherit; font-size: 1rem; transition: all 0.3s; background: #FAFAFA; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary-color); background: var(--bg-white); box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.1); } /* Download Material Visualization */ .download-section-content { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(135deg, var(--primary-color), #002244); border-radius: 24px; padding: 60px; color: white; box-shadow: var(--shadow-xl); overflow: hidden; position: relative; } .download-text-content { flex: 1; position: relative; z-index: 2; padding-right: 40px; } .download-text-content h2 { color: white; font-size: 2.5rem; margin-bottom: 15px; } .download-text-content p { color: rgba(255, 255, 255, 0.8); font-size: 1.1rem; margin-bottom: 30px; } .download-visual { flex: 0 0 300px; position: relative; width: 300px; height: 250px; display: flex; justify-content: center; align-items: center; } /* CSS Graphic for Books */ .book-graphic { width: 140px; height: 180px; background: white; border-radius: 4px 12px 12px 4px; position: absolute; box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.3); transform: rotate(-10deg) translateY(-10px); z-index: 2; } .book-graphic::before { content: 'CLAT 2027'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(90deg); color: var(--primary-color); font-weight: 800; font-size: 1.2rem; white-space: nowrap; } .book-graphic.book-2 { background: var(--secondary-color); transform: rotate(5deg) translateX(40px); z-index: 1; } .book-graphic.book-2::before { content: 'GUIDE'; color: var(--primary-dark); } /* Downloads Page Grid */ .downloads-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; } .download-card { background: var(--bg-white); border: 1px solid var(--border-color); border-radius: 12px; padding: 24px; display: flex; align-items: flex-start; transition: all 0.3s; } .download-card:hover { box-shadow: var(--shadow-lg); border-color: var(--secondary-color); } .file-icon { font-size: 2.5rem; margin-right: 20px; } .file-icon.pdf { color: #DC2626; } .file-icon.excel { color: #10B981; } .file-info h3 { font-size: 1.1rem; margin-bottom: 5px; color: var(--text-dark); } .file-info p { font-size: 0.9rem; margin-bottom: 15px; } /* FAQs Section */ .faq-container { max-width: 800px; margin: 0 auto; } .faq-item { background: var(--bg-white); border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 15px; overflow: hidden; } .faq-question { padding: 20px; background: var(--bg-white); cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 600; color: var(--primary-dark); transition: all 0.3s; } .faq-question:hover { background: #f9f9f9; } .faq-question i { transition: transform 0.3s; } .faq-item.active .faq-question i { transform: rotate(180deg); } .faq-item.active .faq-question { color: var(--secondary-color); /* Highlight active question */ } .faq-answer { padding: 0 20px; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out, padding 0.3s; background: #ffffff; color: var(--text-light); } .faq-item.active .faq-answer { padding: 20px; max-height: 500px; /* Arbitrary large height */ border-top: 1px solid var(--bg-accent); } /* Footer (Modern) */ footer { background-color: var(--primary-dark); color: var(--text-white); padding: 80px 0 30px; font-size: 0.95rem; } .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 60px; margin-bottom: 60px; } .footer-col h3 { color: var(--secondary-color); margin-bottom: 30px; font-size: 1.3rem; } .footer-links a { color: #9CA3AF; /* Gray-400 */ display: block; margin-bottom: 12px; transition: 0.2s; } .footer-links a:hover { color: var(--secondary-color); transform: translateX(5px); } .bottom-bar { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 30px; text-align: center; color: #6B7280; } /* Animation Utilities */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Responsive */ @media (max-width: 992px) { .call-back-grid, .about-grid, .hero-split-layout { grid-template-columns: 1fr; } .hero-text-col { padding-right: 0; text-align: center; } .hero-btns { justify-content: center; } .hero-img-col { display: none; /* Hide image on smaller screens or adjust */ } .download-section-content { flex-direction: column; text-align: center; padding: 40px; } .download-text-content { padding-right: 0; margin-bottom: 40px; } .hero-text-col h1 { font-size: 3rem; } } @media (max-width: 768px) { .nav-menu { position: fixed; top: var(--header-height); left: -100%; width: 100%; height: calc(100vh - var(--header-height)); background-color: var(--bg-white); flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 60px; transition: 0.3s; box-shadow: var(--shadow-xl); } .nav-menu.active { left: 0; } .mobile-toggle { display: block; margin-left: auto; } .hero-slider-section { height: auto; min-height: 600px; padding-bottom: 40px; } .hero-text-col h1 { font-size: 2.5rem; } .hero-btns { gap: 10px; } .btn-hero-primary, .btn-hero-secondary { padding: 12px 20px; font-size: 0.9rem; } } /* Contact Page Specific Styles */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; } .contact-details { padding-right: 20px; } .info-item { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 40px; } .info-item .icon { width: 60px; height: 60px; background: rgba(255, 179, 0, 0.1); color: var(--secondary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; } .info-item h4 { font-size: 1.2rem; margin-bottom: 5px; color: var(--primary-color); } .contact-form-wrapper { background: var(--bg-white); padding: 40px; border-radius: 20px; box-shadow: var(--shadow-xl); border: 1px solid var(--border-color); } @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } .contact-details { padding-right: 0; margin-bottom: 20px; } } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link rel="icon" href="assets/images/site-icon.jpeg"> <script async src="https://www.googletagmanager.com/gtag/js?id=G-62RTB2WHZ9"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'G-62RTB2WHZ9'); </script> </head> <body class="bg-light"> <header style="background: white; border-bottom: 1px solid #E5E7EB; box-shadow: 0 4px 15px rgba(0,0,0,0.02);"> <div class="container" style="height: 80px;"> <a href="index.html" class="logo"> <img src="assets/images/logo.png" alt="Skylor Institute Logo" style="height:55px;"> </a> <div class="mobile-toggle" onclick="toggleMenu()"><i class="fas fa-bars"></i></div> <nav> <ul class="nav-menu" id="navMenu"> <li><a href="index.html" class="nav-link">Home</a></li> <li><a href="about.html" class="nav-link">About Us</a></li> <li><a href="index.html#courses" class="nav-link">Courses</a></li> <li><a href="downloads.html" class="nav-link">Downloads</a></li> <li><a href="contact.html" class="nav-link">Contact Us</a></li> <li><a href="contact.html" class="btn btn-primary" style="padding: 10px 24px;">Enroll Now</a></li> </ul> </nav> </div> </header> <main> <!-- Page Header --> <section class="page-header" style="background-image: url('assets/images/about_hero.png');"> <div class="container" data-aos="fade-up"> <h1>About Skylor Institute</h1> <p>Transforming Aspirations into Achievement through Excellence & Dedication.</p> </div> </section> <!-- Mission & Vision --> <section class="section-padding"> <div class="container"> <div class="mission-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 50px; align-items: center;"> <div class="mission-content" data-aos="fade-right"> <div class="section-title" style="text-align: left; margin-bottom: 25px;"> <h2>Our Mission</h2> </div> <p>At Skylor Institute, we believe that every student has the potential to achieve greatness. Our mission is to provide the highest quality coaching for competitive exams like CLAT, CUET, IPMAT, and UPSC, bridging the gap between ambition and success.</p> <p>We are not just a coaching center; we are mentors, guides, and partners in your journey. With a focus on disciplinary rigor, conceptual clarity, and personalized attention, we ensure that our students are prepared not just for exams, but for the challenges of top-tier professional life.</p> </div> <div class="mission-stats" style="background: var(--bg-light); padding: 40px; border-radius: 16px; box-shadow: var(--shadow-md);" data-aos="fade-left"> <h3 style="text-align: center; margin-bottom: 30px; color: var(--primary-color);">Why Choose Us? </h3> <ul style="list-style: none;"> <li style="margin-bottom: 20px; display: flex; gap: 15px; align-items: start;"> <i class="fas fa-check-circle" style="color: var(--secondary-color); font-size: 1.2rem; margin-top: 2px;"></i> <span style="font-weight: 500;">Proven track record of success in national level exams.</span> </li> <li style="margin-bottom: 20px; display: flex; gap: 15px; align-items: start;"> <i class="fas fa-check-circle" style="color: var(--secondary-color); font-size: 1.2rem; margin-top: 2px;"></i> <span style="font-weight: 500;">Curriculum designed by alumni of top NLUs and IIMs.</span> </li> <li style="display: flex; gap: 15px; align-items: start;"> <i class="fas fa-check-circle" style="color: var(--secondary-color); font-size: 1.2rem; margin-top: 2px;"></i> <span style="font-weight: 500;">Small batch sizes for individual attention and feedback.</span> </li> </ul> </div> </div> </div> </section> <!-- Meet Our Mentors --> <section class="section-padding bg-light"> <div class="container"> <!-- <div class="text-center section-title" data-aos="fade-up">--> <!-- <h2>Meet Our Mentors</h2>--> <!-- <p class="mt-2">Learn from the masters of the trade.</p>--> <!-- </div>--> <div class="mentors-grid"> <!-- Mentors Grid style defined in style.css or inline previously, assuming .mentors-grid exists in CSS (it was in the old one, but I should ensure it's in the new one. Check style.css write - I might have missed it? I should check.) --> <!-- Checking style.css again: I defined features-grid, courses-grid, footer-grid. Did I define mentors-grid? Wait, I missed mentors-grid in the new style.css write. I should add it via inline styles here or update style.css. The previous file content had it inline-ish or in css. I'll add inline styles for grid here to be safe, or just use features-grid class if it fits? Actually, `mentors-grid` class was in the previous CSS file I read (Step 8: lines 355-393). I *replaced* style.css content. Let me check if I included it in the replace. My `write_to_file` for style.css (Step 41) *did not* explicitly include .mentors-grid. It included features-grid, features-card, etc. I should probably use standard grid classes or add inline styles for this section to avoid breakage. I'll use `features-grid` class for the Layout, and customized `feature-card` or just inline styles for the mentor card specific look. Actually, I'll add the styles in valid <style> block in head or just use inline styles for now to keep it simple. --> <style> .mentors-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; justify-content: center; } .mentor-card { background: var(--bg-white); padding: 30px; border-radius: 16px; text-align: center; box-shadow: var(--shadow-md); transition: 0.3s; } .mentor-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } .mentor-img { width: 150px; height: 150px; object-fit: cover; border-radius: 50%; margin: 0 auto 20px; border: 4px solid var(--secondary-color); } .mentor-role { color: var(--secondary-color); font-weight: 600; margin-bottom: 5px; } .mentor-qual { font-size: 0.9rem; color: var(--text-light); } /* Process Steps Styles for Methodology Section */ .process-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; } .step-card { position: relative; padding: 30px; background: var(--bg-white); border: 1px solid var(--bg-accent); border-radius: 12px; box-shadow: var(--shadow-sm); transition: 0.3s; } .step-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } .step-number { font-size: 3rem; font-weight: 700; color: rgba(0, 51, 102, 0.1); position: absolute; top: 10px; right: 20px; } </style> <!--<div class="mentor-card" data-aos="fade-up" data-aos-delay="100">--> <!-- Using placeholder or existing images if available. Previous file referenced assets/images/mentor1.png. I should keep that reference. --> <!-- <img src="assets/images/mentor1.png" alt="Mr. Rajesh Kumar" class="mentor-img"--> <!-- onerror="this.src='https://via.placeholder.com/150';">--> <!-- <h3>Mr. Rajesh Kumar</h3>--> <!-- <p class="mentor-role">Chief Mentor, UPSC & GK</p>--> <!-- <p class="mentor-qual">Ex-Civil Servant, 10+ Years Experience</p>--> <!--</div>--> <!--<div class="mentor-card" data-aos="fade-up" data-aos-delay="200">--> <!-- <img src="assets/images/mentor2.png" alt="Ms. Priya Sharma" class="mentor-img"--> <!-- onerror="this.src='https://via.placeholder.com/150';">--> <!-- <h3>Ms. Priya Sharma</h3>--> <!-- <p class="mentor-role">Head of Legal Studies (CLAT)</p>--> <!-- <p class="mentor-qual">Alumna of NLSIU Bangalore</p>--> <!--</div>--> </div> </div> </section> <!-- Methodology --> <section class="section-padding"> <div class="container"> <div class="text-center section-title" data-aos="fade-up"> <h2>Our Methodology</h2> <p>A structured approach to guarantee results.</p> </div> <div class="process-steps"> <div class="step-card" data-aos="fade-up" data-aos-delay="100"> <div class="step-number">01</div> <h3>Concept Building</h3> <p>We start from the basics, ensuring every fundamental concept is crystal clear before moving to advanced topics.</p> </div> <div class="step-card" data-aos="fade-up" data-aos-delay="200"> <div class="step-number">02</div> <h3>Practice & Mock Tests</h3> <p>Rigorous practice with previous year papers and simulated mock tests to build speed and accuracy.</p> </div> <div class="step-card" data-aos="fade-up" data-aos-delay="300"> <div class="step-number">03</div> <h3>Analysis & Feedback</h3> <p>Detailed performance analysis after every test, followed by one-on-one feedback sessions to plug gaps.</p> </div> </div> </div> </section> </main> <footer> <div class="container"> <div class="footer-grid"> <div class="footer-col"> <a href="index.html" style="display: block; margin-bottom: 20px;"> <img src="assets/images/footer-logo.png" alt="Skylor Institute" style="height: 45px; filter: brightness(0) invert(1);"> </a> <p style="color: #9CA3AF;">Excel, Lead, Conquer. Pioneering competitive coaching in the Malwa Region.</p> </div> <div class="footer-col"> <h3>Quick Links</h3> <ul class="footer-links" style="list-style:none;"> <li><a href="index.html">Home</a></li> <li><a href="index.html#courses">Courses</a></li> <li><a href="about.html">About Us</a></li> <li><a href="contact.html">Contact Us</a></li> </ul> </div> <div class="footer-col"> <h3>Contact Us</h3> <ul class="contact-info" style="list-style: none;"> <li style="display: flex; gap: 10px; margin-bottom: 15px; color: #9CA3AF;"><i class="fas fa-map-marker-alt" style="color: var(--secondary-color); margin-top: 5px;"></i> Bathinda, Punjab - 151001 </li> <li style="display: flex; gap: 10px; margin-bottom: 15px; color: #9CA3AF;"><i class="fas fa-phone" style="color: var(--secondary-color); margin-top: 5px;"></i> +91 97794-00128</li> <li style="display: flex; gap: 10px; margin-bottom: 15px; color: #9CA3AF;"><i class="fas fa-envelope" style="color: var(--secondary-color); margin-top: 5px;"></i> info@skylor.co.in</li> </ul> </div> </div> <div class="bottom-bar"> <p>© 2026 Skylor Institute. All Rights Reserved.</p> </div> </div> </footer> <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> <script> AOS.init({ duration: 800, once: true, offset: 100, easing: 'ease-out-cubic' }); function toggleMenu() { document.getElementById('navMenu').classList.toggle('active'); } </script> </body> </html>