/* ======================================================= MAXYBYTE ACADEMY - Main Stylesheet Pure HTML version for Azure Static Web App ======================================================= This file controls HOW our website LOOKS. Think of HTML as the skeleton of a house (structure), and CSS as the paint, furniture, and decoration. Every rule below tells the browser: "Hey, make THIS element look LIKE THIS." ======================================================= */ /* ------------------------------------------------------- SECTION 1: CSS CUSTOM PROPERTIES (VARIABLES) ------------------------------------------------------- WHY: Instead of typing the same colour code (#8f12ba) 50 times across your stylesheet, we store it once in a variable and reuse the name. If the brand colour ever changes, you only update ONE line here and the whole site updates automatically. Super powerful! HOW: We put all variables inside :root {} which is the very top-level element of the page (basically the tag). Variables defined there are available everywhere. SYNTAX: --variable-name: value; To USE a variable: color: var(--variable-name); ------------------------------------------------------- */ :root { --purple-light: #8f12ba; /* bright purple - used for hover effects and highlights */ --purple-mid: #5c1b72; /* medium purple - used for buttons and active states */ --purple-dark: #3c1c56; /* darkest purple - used for the top bar background */ --yellow: #ffc600; /* golden yellow - used for CTA buttons on the banner */ --gray-light: #f9f9f9; /* very light gray - used for section backgrounds */ --gray-mid: #888888; /* medium gray - used for secondary text */ --black: #000000; /* pure black */ --white: #ffffff; /* pure white */ } /* ------------------------------------------------------- SECTION 2: BASE RESET & GLOBAL STYLES ------------------------------------------------------- WHY: Different browsers (Chrome, Firefox, Safari) have their own default styles for things like margins and padding. We reset/override them here so the site looks the same everywhere. The * selector means "apply this to EVERY element on the page." ------------------------------------------------------- */ *, *::before, *::after { /* box-sizing: border-box means padding and border are INCLUDED in the element's total width/height. Without this, a 200px wide box with 20px padding would actually be 240px wide - confusing! */ box-sizing: border-box; } html, body { /* height: 100% ensures the page can always fill the full screen height, which is important for the full-height hero banner */ height: 100%; /* font-family sets the default typeface for the whole site. 'Poppins' is our brand font (loaded from Google Fonts). 'sans-serif' is the fallback if Poppins fails to load */ font-family: 'Poppins', sans-serif; /* margin: 0 removes the default white gap browsers add around the element */ margin: 0; } a { /* cursor: pointer shows the hand icon when hovering over a link, giving users a visual hint it's clickable */ cursor: pointer; /* color: #4d4d4d makes all links dark gray by default instead of the browser's default blue */ color: #4d4d4d; } a:hover { /* color on hover changes to a slightly different shade so users see visual feedback when they hover */ color: #525252; /* text-decoration: none removes the underline from links on hover (some browsers add it by default) */ text-decoration: none; } p { /* font-size: 15px - slightly smaller than the browser default (16px) for a more refined look */ font-size: 15px; /* line-height: 26px controls the space between lines of text. More space = easier to read. Rule of thumb: line-height should be about 1.5-1.7x the font-size */ line-height: 26px; /* font-weight: 500 is medium weight - not too thin, not too bold. Values go from 100 (thin) to 900 (black) */ font-weight: 500; /* color: #535353 is a dark gray - easier on the eyes than pure black (#000) for long paragraphs */ color: #535353; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { /* All headings share these same base styles */ font-family: 'Poppins', sans-serif; color: #383737; /* font-weight: 700 is bold - headings should stand out */ font-weight: 700; /* margin-top: 0 prevents extra space from appearing above headings (browsers add it by default) */ margin-top: 0; } ul { /* Reset the browser's default bullet-point styles */ margin: 0; padding: 0; list-style: none; /* removes bullet points from all lists */ color: #535353; } /* Remove outline/glow on Bootstrap buttons when clicked */ .btn:focus, .btn.focus { outline: 0; box-shadow: none; } /* Page loader - the spinning overlay that shows while page loads */ .page_loader { /* position: fixed pins it to the screen even when you scroll */ position: fixed; /* These four properties (top/right/bottom/left: 0) stretch it to cover the ENTIRE screen */ top: 0; right: 0; bottom: 0; left: 0; /* z-index: 9999 puts it on TOP of everything else. Think of z-index as floors in a building - higher number = higher floor */ z-index: 9999; background: #fff url('../img/loader.gif') center center no-repeat; /* transition makes it fade out smoothly instead of disappearing instantly */ transition: opacity 0.3s ease; } /* When the page is done loading, we add class 'loaded' via JS to hide it */ .page_loader.loaded { opacity: 0; pointer-events: none; /* lets clicks pass through the invisible loader */ } /* ------------------------------------------------------- SECTION 3: TOP BAR (the narrow bar above the navbar) ------------------------------------------------------- WHY: The top bar shows contact info (phone, email, hours) and login/logout links. It's a common pattern on professional websites to give users quick contact access. ------------------------------------------------------- */ .top-header { /* padding: 8px 0 gives 8px of breathing room above and below the content, but no left/right padding (the container inside handles that) */ padding: 8px 0; /* Using our CSS variable for the dark purple background */ background: var(--purple-dark); /* font-size: 13px makes this bar subtly smaller than the main content below, showing visual hierarchy */ font-size: 13px; } .top-header .list-inline a { color: #ccc; /* light gray text on dark background */ margin-right: 20px; /* space between contact items */ text-decoration: none; } .top-header .list-inline a:hover { color: var(--white); } .top-header .list-inline a i { /* margin-right: 5px puts a small gap between the icon and the text next to it */ margin-right: 5px; color: var(--yellow); /* yellow icons pop against dark purple */ } .top-header .top-social-media { /* text-align: right pushes the login links to the right side */ text-align: right; } .top-header .top-social-media li { /* display: inline-block lets list items sit side by side instead of stacking vertically */ display: inline-block; margin-left: 10px; } .top-header .top-social-media .sign-in { color: var(--yellow); font-weight: 600; text-decoration: none; padding: 3px 10px; border: 1px solid var(--yellow); border-radius: 3px; transition: all 0.3s; /* smooth transition for hover effect */ } .top-header .top-social-media .sign-in:hover { background: var(--yellow); color: var(--purple-dark); } /* ------------------------------------------------------- SECTION 4: MAIN NAVIGATION BAR ------------------------------------------------------- WHY: The navbar is the main navigation. We make it sticky so it stays visible as users scroll down the page. "Sticky" means it follows you as you scroll! ------------------------------------------------------- */ .main-header { background: #fff; /* box-shadow adds a subtle shadow below the navbar to visually separate it from the page content */ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } /* sticky-header class makes the navbar stay at the top of the screen as you scroll */ .sticky-header { /* position: sticky means "stay in the normal flow BUT stick to the top when you scroll past it" */ position: sticky; /* top: 0 means stick to the very top of the viewport */ top: 0; /* z-index: 1000 keeps navbar above other page content */ z-index: 1000; } /* When the page has a top bar, we add header-with-top */ .header-with-top { /* No extra styles needed here - it's just a helper class */ } /* The company logo in the navbar */ .navbar-brand.company-logo img { /* max-height controls logo size in the navbar */ max-height: 50px; /* width: auto maintains the aspect ratio (no stretching) */ width: auto; } /* Navigation links */ .main-header .nav-link { font-weight: 600; font-size: 14px; color: #333 !important; /* !important overrides Bootstrap's default */ padding: 8px 15px !important; transition: color 0.3s; text-transform: uppercase; /* makes nav links all caps for a professional look */ letter-spacing: 0.5px; } .main-header .nav-link:hover { color: var(--purple-light) !important; } /* Active page link - highlights which page you're currently on */ .main-header .nav-link.active { color: var(--purple-mid) !important; /* border-bottom creates an underline effect to show active page */ border-bottom: 2px solid var(--purple-mid); } /* The search icon in the navbar */ .main-header .h-icon { font-size: 16px; } /* Mobile hamburger menu button */ .navbar-toggler { background: var(--purple-light); border: none; } .navbar-toggler .fa-bars { color: white; font-size: 18px; } /* ------------------------------------------------------- SECTION 5: FULL-PAGE SEARCH OVERLAY ------------------------------------------------------- WHY: When users click the search icon, we show a full-screen overlay with a search box. This gives it a dramatic, modern effect and keeps the navbar clean. ------------------------------------------------------- */ #full-page-search { /* position: fixed keeps it covering the whole screen even when you scroll */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; /* rgba(0,0,0,0.9) = black with 90% opacity = very dark but slightly see-through overlay. rgba = Red, Green, Blue, Alpha */ background: rgba(0, 0, 0, 0.9); /* display: none hides it until the user clicks search */ display: none; /* flex layout centers the search form perfectly both horizontally and vertically */ flex-direction: column; align-items: center; justify-content: center; z-index: 9998; } /* When search is open, we add class 'open' via JS */ #full-page-search.open { display: flex; } #full-page-search .close { /* position: absolute lets us place the close button exactly where we want - top-right corner */ position: absolute; top: 20px; right: 30px; color: #fff; font-size: 40px; cursor: pointer; background: none; border: none; opacity: 0.8; } #full-page-search .close:hover { opacity: 1; } .search-header { /* display: flex lets us put the input and button side by side */ display: flex; gap: 10px; width: 60%; max-width: 700px; } .search-header input[type="search"] { /* flex: 1 makes the input take up ALL remaining space after the button takes its share */ flex: 1; padding: 15px 20px; font-size: 16px; border: none; border-radius: 4px; outline: none; } .search-header .btn { padding: 15px 30px; background: var(--purple-light); color: #fff; border: none; border-radius: 4px; font-weight: 600; cursor: pointer; } /* ------------------------------------------------------- SECTION 6: HERO BANNER (Home page full-screen banner) ------------------------------------------------------- WHY: The hero banner is the FIRST thing visitors see. It needs to be impressive! We make it full-height with a background image and a dark overlay so text is readable. The dark overlay trick uses a pseudo-element (::before) which is like an invisible layer that sits on top of the background image but below the text. ------------------------------------------------------- */ .banner { /* position: relative is REQUIRED so that the ::before pseudo-element (our overlay) can be positioned relative to this container */ position: relative; overflow: hidden; /* min-height: 100vh means "at least as tall as the viewport (screen) height". vh = viewport height units. 100vh = 100% of screen height */ min-height: 100vh; /* background shorthand: color image repeat position / size cover = scale image to cover the whole area (may crop) center = center the image no-repeat = don't tile the image */ background: linear-gradient(rgba(30,10,50,0.48), rgba(30,10,50,0.48)), url('../img/slide01.jpg') center 32% / cover no-repeat; /* display: flex + align-items: center centers the content vertically */ display: flex; align-items: center; } /* The dark overlay on the banner (a second approach using pseudo-element) */ .banner::before { /* content: '' is REQUIRED for pseudo-elements to show. It can be empty like this */ content: ''; /* position: absolute positions it relative to .banner */ position: absolute; top: 0; left: 0; right: 0; bottom: 0; /* Semi-transparent dark overlay. We keep it lighter so the photo still feels visible and sharp instead of looking hidden behind a heavy dark layer. */ background: rgba(20, 5, 40, 0.16); } .banner-info-2 { /* position: relative puts it ABOVE the ::before overlay */ position: relative; z-index: 1; } .banner-container { /* max-width limits the text width for readability - very wide lines of text are hard to read */ max-width: 650px; } .banner h1 { color: #fff; font-size: 42px; font-weight: 700; margin-bottom: 15px; /* text-shadow adds a subtle shadow behind the text for better readability against the background image */ text-shadow: 2px 2px 10px rgba(0,0,0,0.5); } .banner h2 { color: rgba(255,255,255,0.85); font-size: 22px; font-weight: 400; margin-bottom: 20px; } .banner p { color: rgba(255,255,255,0.8); font-size: 16px; margin-bottom: 30px; } /* The big yellow call-to-action button on the banner */ .btn-banner { background: var(--yellow); color: #1a0a2e; font-weight: 700; padding: 14px 40px; border-radius: 4px; text-decoration: none; font-size: 16px; display: inline-block; transition: all 0.3s; border: 2px solid var(--yellow); } .btn-banner:hover { background: transparent; color: var(--yellow); /* transform: translateY moves the button UP by 2px on hover - a subtle lift effect that feels satisfying */ transform: translateY(-2px); } /* ------------------------------------------------------- SECTION 7: SUB-BANNER (Page header for inner pages) ------------------------------------------------------- WHY: Inner pages (About, Contact, etc.) don't need a full-screen hero. They use a shorter "sub-banner" that shows the page title and breadcrumb navigation. Each page has its own background image set via a unique class name (e.g., .banner-about, .banner-courses). ------------------------------------------------------- */ .sub-banner { /* position: relative so breadcrumb content sits above the background image overlay */ position: relative; /* height: 300px is a shorter, more modest banner height compared to the full-screen hero */ height: 300px; /* display: flex + align-items: center vertically centers the breadcrumb content */ display: flex; align-items: center; /* These background settings keep the page-header photos looking clean and intentional instead of zoomed awkwardly or tiling. */ background-repeat: no-repeat; background-size: cover; background-position: center 35%; overflow: hidden; } /* Dark overlay on sub-banners (same trick as the hero banner) */ .sub-banner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(25, 10, 50, 0.42); } /* The breadcrumb text area inside the sub-banner */ .breadcrumb-area { /* position: relative brings this content ABOVE the dark overlay (which has no z-index set) */ position: relative; z-index: 1; } .breadcrumb-areas h1 { color: #fff; font-size: 32px; margin-bottom: 10px; } /* Breadcrumbs are the "Home > About" navigation trail */ .breadcrumbs { display: flex; gap: 10px; } .breadcrumbs li { color: rgba(255,255,255,0.7); font-size: 14px; } .breadcrumbs li::after { /* This adds the ">" separator between breadcrumb items */ content: '›'; margin-left: 10px; color: rgba(255,255,255,0.5); } /* Last breadcrumb item has no arrow after it */ .breadcrumbs li:last-child::after { content: ''; } .breadcrumbs li a { color: rgba(255,255,255,0.7); text-decoration: none; } .breadcrumbs li a:hover { color: var(--yellow); } .breadcrumbs li.active { color: var(--yellow); font-weight: 600; } /* --- Individual page banner backgrounds --- WHY: Each page needs its own background image. Instead of inline styles in HTML, we use CSS classes. This keeps styling in CSS (where it belongs) and keeps HTML clean. */ .banner-about { background-image: url('../img/banner-about.jpg'); } .banner-courses { background-image: url('../img/banner-courses.jpg'); } .banner-services { background-image: url('../img/banner-services.jpg'); } .banner-contact { background-image: url('../img/banner-contact.jpg'); } .banner-career { background-image: url('../img/banner-career.jpg'); } .banner-login { background-image: url('../img/banner-login.jpg'); } .banner-register { background-image: url('../img/banner-register.jpg'); } .banner-course-detail { background-image: url('../img/banner-courses.jpg'); } .overview-bgi { background-image: url('../img/bg-img-6.jpg'); } /* ------------------------------------------------------- SECTION 8: SECTION LAYOUT HELPERS ------------------------------------------------------- WHY: We use consistent vertical padding (space above and below) for all sections. This creates a nice rhythm as you scroll down the page. ------------------------------------------------------- */ .content-area { /* padding: 80px 0 adds 80px of space above and below the section, but no left/right padding */ padding: 80px 0; } .content-area-5 { padding: 60px 0; } .content-area-6 { padding: 60px 0 80px; } /* Background color variations for sections */ .bg-grea-3 { background: var(--gray-light); } .mt-50 { margin-top: 50px; } .mb-50 { margin-bottom: 50px; } /* ------------------------------------------------------- SECTION 9: MAIN TITLE (Section headings) ------------------------------------------------------- WHY: Every section starts with a title block that follows the same visual pattern: - H1: small uppercase label (e.g., "OUR SERVICES") - H2: the actual section title - P: optional subtitle Keeping this consistent makes the page look professional. ------------------------------------------------------- */ .main-title { text-align: center; margin-bottom: 50px; } .main-title h1 { /* font-size: 13px makes the label small and refined */ font-size: 13px; /* letter-spacing: 3px spreads characters apart for an elegant uppercase label effect */ letter-spacing: 3px; color: var(--purple-mid); text-transform: uppercase; margin-bottom: 10px; } .main-title h2 { font-size: 28px; color: #333; margin-bottom: 15px; } .main-title p { max-width: 600px; /* margin: 0 auto is the classic trick to center a block element. auto means "split the remaining space equally on both sides" */ margin: 0 auto; color: var(--gray-mid); } /* ------------------------------------------------------- SECTION 10: COURSE CARDS ------------------------------------------------------- WHY: Courses are displayed as cards - a popular UI pattern where content is grouped in a box with consistent styling. Cards are great for listing items. ------------------------------------------------------- */ .course-block { background: #fff; /* border-radius: 8px rounds the corners of the card for a modern, friendly look */ border-radius: 8px; /* overflow: hidden is needed so the course photo doesn't stick out of the rounded corners at the top */ overflow: hidden; /* box-shadow creates a subtle drop shadow that lifts the card off the page. Values: x-offset y-offset blur-radius spread-radius color */ box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08); /* margin-bottom adds space between rows of cards */ margin-bottom: 30px; /* transition animates changes to CSS properties. Here we animate the box-shadow and transform over 0.3 seconds with an 'ease' timing curve */ transition: transform 0.3s ease, box-shadow 0.3s ease; /* display: block + height: 100% makes the card fill its grid column completely */ display: block; height: 100%; } .course-block:hover { /* translateY(-5px) moves the card UP by 5px on hover, creating a satisfying "lift" effect */ transform: translateY(-5px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); } /* The image container at the top of each course card */ .course-thumbnail { /* width: 100% makes the thumbnail span the full card width */ width: 100%; /* height: 220px gives all thumbnails the same height regardless of the original image dimensions */ height: 220px; /* overflow: hidden clips any part of the image that goes outside this 220px box */ overflow: hidden; background: #f7f8fc; } .course-thumbnail img { width: 100%; height: 100%; display: block; /* object-fit: cover scales the image to FILL the container while maintaining aspect ratio. Parts may be cropped. Alternative: object-fit: contain (no cropping, may have gaps) */ object-fit: cover; object-position: center; transition: transform 0.3s ease; } /* Subtle zoom effect on the course image when hovering */ .course-block:hover .course-thumbnail img { transform: scale(1.05); } /* The text content area below the course image */ .course-detail { padding: 20px; } .course-detail h1 { /* font-size: 16px - course titles should be readable but not too big since they're inside small cards */ font-size: 16px; margin-bottom: 8px; color: #333; /* line-height: 1.4 gives tight, comfortable spacing for multi-line course titles */ line-height: 1.4; } .course-detail > p { font-size: 13px; color: var(--gray-mid); margin-bottom: 15px; /* These three properties together create a "3-line clamp" - the text will be cut off after 3 lines with "..." It keeps all cards the same height */ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* The 3-column stats row at the bottom of each course card */ .course-detail .row.no-gutters { border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 10px; } .course-detail .row.no-gutters > div { text-align: center; /* padding: 5px adds a bit of breathing room */ padding: 5px; } .course-detail strong { /* display: block makes the label appear on its own line above the value */ display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #999; margin-bottom: 3px; } .course-detail span { font-size: 13px; color: var(--purple-mid); font-weight: 700; } /* Remove the default link underline and color from course cards */ a.course-card-link { text-decoration: none; color: inherit; display: block; height: 100%; } /* ------------------------------------------------------- SECTION 11: VIDEO / WELCOME SECTION ------------------------------------------------------- WHY: The home page has a side-by-side section with a video thumbnail on the left and welcome text on the right. The play button overlay is created with absolute positioning. ------------------------------------------------------- */ .about-car-photo { position: relative; } /* The card wrapper for the video thumbnail */ .card-content { position: relative; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; box-shadow: 0 5px 25px rgba(0,0,0,0.15); background: #f7f8fc; } .card-content img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; } /* The play button that sits on top of the video thumbnail */ .video-arrow-btn { /* position: absolute places it relative to .card-content */ position: absolute; top: 50%; left: 50%; /* transform: translate(-50%, -50%) centers it perfectly both horizontally and vertically */ transform: translate(-50%, -50%); background: rgba(255,255,255,0.9); padding: 15px 20px; border-radius: 50px; /* transition for smooth hover effect */ transition: all 0.3s; } .video-arrow-btn:hover { background: #fff; transform: translate(-50%, -50%) scale(1.1); } .video-arrow-btn2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(255,255,255,0.85); padding: 12px 16px; border-radius: 50px; transition: all 0.3s; opacity: 0.9; } .video-arrow-btn2:hover { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } /* Welcome text section next to the video */ .best-used-car h1 { font-size: 28px; color: #333; margin-bottom: 15px; line-height: 1.3; } /* Video Modal - Bootstrap modal that shows YouTube embed */ #videoModal .modal-header { /* border-bottom: none removes the default Bootstrap line under the modal header */ border-bottom: none; padding: 20px 30px 5px; } #videoModal iframe { width: 100%; height: 430px; } #videoModal button.close { padding: 10px 15px; font-size: 24px; } /* ------------------------------------------------------- SECTION 12: SLICK CAROUSEL (Sliding gallery) ------------------------------------------------------- WHY: We use Slick carousel to show multiple items (courses, instructors, testimonials) in a sliding format rather than a huge grid. This saves vertical space and looks polished. ------------------------------------------------------- */ .slick-slider-area { position: relative; } .slick-slide-item { /* padding: 0 12px adds space between slide items. This creates the "gap" between cards in the carousel */ padding: 0 12px; } /* The previous/next arrow buttons below the carousel */ .slick-btn { text-align: center; margin-top: 30px; } .slick-arrow-buton { /* display: inline-block lets these sit side by side while still allowing width/height/padding */ display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; border: 2px solid #ddd; border-radius: 50%; /* perfect circle */ margin: 0 5px; cursor: pointer; transition: all 0.3s; color: #555; } .slick-arrow-buton:hover { background: var(--purple-light); color: #fff; border-color: var(--purple-light); } /* ------------------------------------------------------- SECTION 13: TESTIMONIAL CARDS ------------------------------------------------------- WHY: Testimonials build trust. We display them in cards with a quotation mark and star rating to look authentic. ------------------------------------------------------- */ .service-info { background: #fff; padding: 25px; border-radius: 8px; box-shadow: 0 2px 15px rgba(0,0,0,0.08); margin-bottom: 25px; height: 100%; } /* Quotation mark icon at the top of each testimonial */ .service-info .quotation { width: 40px; margin-bottom: 10px; } /* Star rating image */ .service-info .rating { display: block; margin-bottom: 15px; width: 100px; } .service-info .detail p { font-size: 14px; color: #666; line-height: 1.7; margin-bottom: 15px; /* font-style: italic makes testimonial quotes look like real quotes */ font-style: italic; } /* Student name and avatar row */ .student-name { display: flex; align-items: center; gap: 12px; border-top: 1px solid #f0f0f0; padding-top: 12px; } .student-name img { width: 40px; height: 40px; border-radius: 50%; /* circular avatar */ object-fit: cover; flex-shrink: 0; } .student-name h3 { font-size: 14px; margin: 0; color: var(--purple-mid); } /* ------------------------------------------------------- SECTION 14: OUR FEATURES (Icon + text grid) ------------------------------------------------------- WHY: We use a 3-column grid of feature items to highlight what makes Maxybyte Academy special. Icon on top, heading, then description text. ------------------------------------------------------- */ .our-features { /* The outer section needs some context */ } .our-features .col-lg-4 { margin-bottom: 40px; } /* Feature icon images */ .our-features .quotation { /* width: 80px makes all icons the same size regardless of the original image dimensions */ width: 80px; height: 80px; object-fit: contain; margin: 0 auto 15px; display: block; } .our-features h5 { font-size: 16px; color: #333; margin-bottom: 10px; font-weight: 700; } .our-features p { font-size: 14px; color: var(--gray-mid); line-height: 1.6; } /* ------------------------------------------------------- SECTION 15: INSTRUCTOR / TEAM CARDS ------------------------------------------------------- WHY: Team cards show instructor photos with their names, titles, and social links. The photo fills the top of the card and the details sit below. ------------------------------------------------------- */ .team-1 { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 15px rgba(0,0,0,0.08); transition: transform 0.3s ease; margin-bottom: 5px; } .team-1:hover { transform: translateY(-5px); } /* Photo container at the top of the instructor card */ .team-1 .photo { /* height: 220px gives all photos the same height */ height: 220px; overflow: hidden; background: #f7f8fc; } .team-1 .photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center top; transition: transform 0.3s ease; } .team-1:hover .photo img { transform: scale(1.05); } /* Instructor name and social links */ .team-1 .details { padding: 18px; text-align: center; } .team-1 .details h4 { font-size: 15px; margin-bottom: 5px; } .team-1 .details h4 a { color: #333; text-decoration: none; } .team-1 .details h4 a:hover { color: var(--purple-mid); } .team-1 .details h5 { font-size: 13px; color: var(--gray-mid); font-weight: 400; margin-bottom: 12px; } /* Social icons row on instructor cards */ .social-list { display: flex; justify-content: center; gap: 8px; } .social-list a { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-size: 13px; text-decoration: none; transition: transform 0.2s; } .social-list a:hover { transform: scale(1.15); } /* Social media brand colors - each platform has its official color */ .facebook-bg { background: #3b5998; } /* Facebook blue */ .twitter-bg { background: #1da1f2; } /* Twitter blue */ .google-bg { background: #dd4b39; } /* Google red */ .linkedin-bg { background: #0077b5; } /* LinkedIn blue */ .github-bg { background: #333; } /* GitHub dark */ .instagram-bg { background: #e1306c; } /* Instagram pink */ /* Footer social icons - slightly larger */ .social-list-2 ul { display: flex; gap: 10px; } .social-list-2 ul li { list-style: none; } .social-list-2 ul a { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-size: 15px; text-decoration: none; transition: transform 0.2s, opacity 0.2s; } .social-list-2 ul a:hover { transform: scale(1.15); opacity: 0.9; } /* ------------------------------------------------------- SECTION 16: PARTNER LOGOS SECTION ------------------------------------------------------- WHY: Showing logos of companies that employ graduates builds credibility and trust with prospective students. ------------------------------------------------------- */ .other-logo { /* padding: 10px 15px adds space around each logo */ padding: 10px 15px; display: flex; align-items: center; justify-content: center; } .other-logo img { /* max-height: 60px keeps all logos at a consistent size */ max-height: 60px; max-width: 120px; object-fit: contain; /* A lighter grayscale/opacity balance keeps the logos readable while still giving the section a calm, polished look. */ filter: grayscale(20%); opacity: 0.92; transition: all 0.3s; } .other-logo img:hover { filter: grayscale(0%); opacity: 1; } /* ------------------------------------------------------- SECTION 17: BUTTONS ------------------------------------------------------- WHY: We have a consistent button system. Buttons must look the same everywhere they're used on the site. Each button class has its own color theme. ------------------------------------------------------- */ /* Purple button - main action button used across the site */ .btn-purple { background: var(--purple-mid); color: #fff !important; font-weight: 600; border-radius: 4px; padding: 12px 28px; border: 2px solid var(--purple-mid); transition: all 0.3s; text-decoration: none; display: inline-block; } .btn-purple:hover { background: var(--purple-light); border-color: var(--purple-light); color: #fff !important; transform: translateY(-2px); } /* Yellow button - used for prominent CTAs (Call-to-Action) */ .btn-yellow { background: var(--yellow); color: #1a0a2e; font-weight: 700; border: 2px solid var(--yellow); border-radius: 4px; transition: all 0.3s; } .btn-yellow:hover { background: #e6b300; border-color: #e6b300; } /* Button that sends a message - used on course detail page */ .btn-send-msg { display: block; width: 100%; background: var(--purple-light); color: #fff; font-weight: 600; padding: 10px; border: none; border-radius: 4px; cursor: pointer; transition: background 0.3s; text-align: center; margin-top: 15px; } .btn-send-msg:hover { background: var(--purple-dark); } /* ------------------------------------------------------- SECTION 18: STATS ROW (About page numbers) ------------------------------------------------------- WHY: Big numbers (39,000+ students!) look impressive and build trust. We style them to stand out visually. ------------------------------------------------------- */ .stats { background: var(--gray-light); padding: 30px; border-radius: 8px; margin-top: 30px; } .stats h1 { font-size: 36px; color: var(--purple-light); margin-bottom: 5px; } .stats h2 { font-size: 14px; color: var(--gray-mid); font-weight: 400; text-transform: uppercase; letter-spacing: 1px; } /* ------------------------------------------------------- SECTION 19: SERVICES PAGE ------------------------------------------------------- WHY: Services are displayed in alternating rows (image left / text right, then text left / image right). This "zigzag" layout is visually interesting and guides the reader through each service. ------------------------------------------------------- */ .services .row { margin-bottom: 10px; align-items: center; } .services .col-lg-5 img { width: 100%; aspect-ratio: 3 / 2; display: block; object-fit: cover; object-position: center; border-radius: 8px; box-shadow: 0 5px 20px rgba(0,0,0,0.1); } .services h2 { font-size: 24px; color: var(--purple-dark); margin-bottom: 15px; } .services p { color: #555; line-height: 1.8; } /* ------------------------------------------------------- SECTION 20: CONTACT PAGE ------------------------------------------------------- WHY: The contact page needs clear visual hierarchy to separate the contact info (left) from the form (right). ------------------------------------------------------- */ .contact-2 { /* No extra styles needed - uses content-area-5 */ } /* Each contact info item (phone, email, fax) */ .ci-box { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 20px; padding: 15px; background: var(--gray-light); border-radius: 6px; } .ci-box .icon img { width: 45px; height: 45px; object-fit: contain; } .ci-box .detail h5 { font-size: 14px; color: var(--purple-dark); margin-bottom: 4px; } .ci-box .detail p { font-size: 14px; margin: 0; color: #555; } /* Contact form styles */ .contact-2 .form-control { border-radius: 4px; border: 1px solid #ddd; padding: 12px 15px; font-size: 14px; margin-bottom: 5px; } .contact-2 .form-control:focus { /* border-color on focus gives visual feedback that the field is selected/active */ border-color: var(--purple-light); box-shadow: 0 0 0 3px rgba(143,18,186,0.1); } .contact-2 textarea.form-control { /* min-height makes the message box tall enough to type a reasonable message */ min-height: 120px; resize: vertical; /* lets users resize the textarea up and down */ } .send-btn { margin-top: 10px; } /* ------------------------------------------------------- SECTION 21: CAREER PAGE ------------------------------------------------------- WHY: The career page has a feature section at the top and a job listings table below. ------------------------------------------------------- */ .career-table { background: var(--gray-light); } /* Bootstrap table tweaks for the job listings */ .career-table .table { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.05); } .career-table .table thead { background: var(--purple-dark); color: #fff; } .career-table .table thead th { font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; padding: 15px; border: none; } .career-table .table tbody tr:hover { background: rgba(143,18,186,0.05); } .career-table .table td { padding: 14px 15px; vertical-align: middle; font-size: 14px; } /* The "no jobs available" message */ .no-job { text-align: center; padding: 50px; color: var(--gray-mid); } .no-job h4 span { color: var(--purple-light); } /* ------------------------------------------------------- SECTION 22: LOGIN / REGISTER FORMS ------------------------------------------------------- WHY: Login and register forms should feel clean and trustworthy. We center them on the page in a white card. ------------------------------------------------------- */ .contact-section { padding: 60px 0; background: var(--gray-light); } /* The white form card */ .form-section { /* max-width: 500px keeps the form from getting too wide */ max-width: 500px; margin: 0 auto; background: #fff; padding: 40px; border-radius: 8px; box-shadow: 0 5px 30px rgba(0,0,0,0.08); } .form-section .logo-2 { text-align: center; margin-bottom: 25px; } .form-section .logo-2 img { max-height: 50px; } .form-section h3 { text-align: center; font-size: 20px; color: #333; margin-bottom: 25px; } /* Form fields with icon inside */ .form-group.form-box { /* position: relative so the icon can be absolutely positioned inside the input field */ position: relative; margin-bottom: 18px; } .form-group.form-box .input-text { width: 100%; padding: 12px 45px 12px 15px; /* extra right padding for the icon */ border: 1px solid #ddd; border-radius: 4px; font-size: 14px; transition: border-color 0.3s; } .form-group.form-box .input-text:focus { border-color: var(--purple-light); outline: none; box-shadow: 0 0 0 3px rgba(143,18,186,0.1); } /* The icon inside the input field */ .form-group.form-box i { /* position: absolute places the icon inside the input */ position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: var(--gray-mid); font-size: 14px; } .form-group.form-box .btn-md { background: var(--purple-mid); color: #fff; padding: 12px 35px; border: none; border-radius: 4px; font-weight: 600; cursor: pointer; transition: background 0.3s; } .form-group.form-box .btn-md:hover { background: var(--purple-light); } /* The "Don't have an account?" link */ .form-section > p { text-align: center; margin-top: 20px; font-size: 14px; color: #666; } .form-section .thembo { color: var(--purple-mid); font-weight: 600; text-decoration: none; } .form-section .thembo:hover { color: var(--purple-light); } /* ------------------------------------------------------- SECTION 23: COURSE DETAIL PAGE ------------------------------------------------------- WHY: The course detail page uses a 2-column layout: the main content (description) on the left takes 8/12 columns, and a sidebar with course info takes 4/12. ------------------------------------------------------- */ .car-details-page { /* Background color for the detail page content area */ } /* Course description section */ .heading-car h2 { font-size: 24px; color: var(--purple-dark); margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #f0f0f0; } .heading-car p { line-height: 1.8; color: #555; } /* Right sidebar */ .sidebar-right { padding-left: 20px; } /* Advanced search widget (used as sidebar on detail page) */ .widget.advanced-search { background: #fff; border-radius: 8px; padding: 25px; box-shadow: 0 2px 15px rgba(0,0,0,0.08); } .widget.advanced-search .card-content { margin-bottom: 20px; border-radius: 6px; overflow: hidden; } /* The info list on the course sidebar */ .widget.advanced-search ul { margin-bottom: 20px; } .widget.advanced-search ul li { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid #f5f5f5; font-size: 14px; } .widget.advanced-search ul li img { width: 20px; height: 20px; object-fit: contain; margin-right: 10px; flex-shrink: 0; } .widget.advanced-search ul li span { font-weight: 700; color: #333; margin-right: 5px; min-width: 110px; } .widget.advanced-search h6 { font-size: 15px; color: var(--purple-dark); margin-bottom: 12px; font-weight: 700; text-align: center; } /* Contact sidebar widget on detail page */ .widget.question { background: #fff; border-radius: 8px; padding: 25px; box-shadow: 0 2px 15px rgba(0,0,0,0.08); margin-top: 20px; } .contact-info li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0f0f0; font-size: 14px; color: #555; } .contact-info li i { color: var(--purple-mid); width: 20px; text-align: center; margin-top: 2px; font-size: 16px; } .contact-info li a { color: #555; text-decoration: none; } .contact-info li a:hover { color: var(--purple-mid); } /* 30-day money-back guarantee bar at the bottom */ .guarantee { background: var(--purple-dark); color: #fff; padding: 30px 0; } .guarantee img { max-height: 80px; } .guarantee h5 { color: #fff; font-size: 20px; margin-bottom: 8px; } .guarantee p { color: rgba(255,255,255,0.8); margin: 0; } /* Inquiry modal logo */ .contact-dealer { background: var(--purple-dark); padding: 20px; } .contact-dealer img { max-height: 40px; filter: brightness(0) invert(1); /* makes the logo white */ } .contact-dealer .close { color: #fff; opacity: 0.8; font-size: 24px; } /* ------------------------------------------------------- SECTION 24: DASHBOARD PAGE ------------------------------------------------------- WHY: The dashboard shows logged-in users their inquiry history in a clean table. ------------------------------------------------------- */ .container.mt-50.mb-50 .main-title { text-align: left; } .container.mt-50.mb-50 .table { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.05); } /* ------------------------------------------------------- SECTION 25: FOOTER ------------------------------------------------------- WHY: The footer is the last thing visitors see. It provides navigation links, contact info, and social media in a dark background that contrasts with the white page content above. ------------------------------------------------------- */ .footer { background: #1e1e2e; /* very dark navy/purple */ color: #aaa; padding: 60px 0 30px; } .footer img { max-height: 45px; margin-bottom: 20px; } .footer p { color: #888; font-size: 14px; line-height: 1.7; } .footer .copy { margin-top: 20px; font-size: 13px; color: #666; } .footer .copy a { color: var(--yellow); text-decoration: none; } /* Footer column headings (Browse Site, Contact) */ .footer h1 { font-size: 16px; color: #fff; margin-bottom: 20px; font-weight: 700; position: relative; padding-bottom: 10px; } /* Decorative underline below footer headings */ .footer h1::after { content: ''; position: absolute; bottom: 0; left: 0; width: 30px; height: 2px; background: var(--purple-light); } /* Footer navigation links */ .footer ul li { margin-bottom: 10px; } .footer ul li a { color: #888; text-decoration: none; font-size: 14px; transition: color 0.2s; } .footer ul li a:hover { color: var(--yellow); } .footer ul li a strong { font-weight: 500; } /* Footer contact info */ .footer > .container > .row > div:last-child p { color: #888; font-size: 14px; margin-bottom: 10px; } .footer > .container > .row > div:last-child a { color: var(--yellow); text-decoration: none; } /* ------------------------------------------------------- SECTION 26: PAGINATION ------------------------------------------------------- WHY: When there are many courses, we use pagination to split them across multiple pages. Pagination gives users control over how they navigate the content. ------------------------------------------------------- */ .pagination-box { margin-top: 40px; } .pagination .page-link { color: var(--purple-mid); border-color: #ddd; } .pagination .page-item.active .page-link { background: var(--purple-mid); border-color: var(--purple-mid); color: #fff; } .pagination .page-link:hover { background: var(--gray-light); color: var(--purple-light); } /* ------------------------------------------------------- SECTION 27: SEARCH BAR (Courses page) ------------------------------------------------------- WHY: The search bar lets users filter courses by name, mode, start date, etc. A horizontal layout on the courses page saves space compared to a vertical form. ------------------------------------------------------- */ .search-horizontal { background: var(--purple-dark); padding: 25px; border-radius: 8px; margin-bottom: 40px; } .search-horizontal .form-control { border: none; border-radius: 4px; padding: 10px 15px; font-size: 14px; } .search-horizontal label { color: #ccc; font-size: 13px; margin-bottom: 3px; } /* Alert messages (success/error feedback) */ .alert { border-radius: 4px; font-size: 14px; } /* ------------------------------------------------------- SECTION 28: SCROLL-UP BUTTON ------------------------------------------------------- WHY: A floating button in the bottom-right corner lets users scroll back to the top without having to manually scroll up on long pages. ------------------------------------------------------- */ #page_scroller { position: fixed; bottom: 30px; right: 30px; width: 40px; height: 40px; background: var(--yellow); color: var(--purple-dark); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; opacity: 0; transition: opacity 0.3s; z-index: 999; text-decoration: none; } /* Show the scroll button when user has scrolled down */ #page_scroller.visible { opacity: 1; } #page_scroller:hover { background: var(--purple-light); color: #fff; } /* ------------------------------------------------------- SECTION 29: RESPONSIVE DESIGN ------------------------------------------------------- WHY: People visit websites on phones, tablets, and desktop computers. Media queries let us apply different styles at different screen sizes. @media (max-width: 768px) means "apply these styles ONLY when the screen is 768px wide or narrower" (i.e., phones and small tablets). ------------------------------------------------------- */ /* TABLET & MOBILE (screens up to 991px) */ @media (max-width: 991px) { /* Reduce banner height on smaller screens */ .banner { min-height: 70vh; } .banner h1 { font-size: 28px; } .banner h2 { font-size: 18px; } /* Stack the video and text columns on mobile */ .about-car .col-xl-5, .about-car .col-xl-7 { margin-bottom: 30px; } .card-content { aspect-ratio: 4 / 3; } /* Sidebar goes below main content on mobile */ .sidebar-right { padding-left: 15px; margin-top: 30px; } /* Make the top bar links wrap on small screens */ .top-header .list-inline a { display: block; margin-bottom: 3px; } } /* MOBILE PHONES (screens up to 767px) */ @media (max-width: 767px) { .banner h1 { font-size: 24px; } .sub-banner { height: 220px; background-position: center; } .card-content { aspect-ratio: 1 / 1; } .breadcrumb-areas h1 { font-size: 22px; } /* Full-width search input on mobile */ .search-header { width: 90%; } .search-header input { width: 100%; } /* Stats row stacks vertically on mobile */ .stats .col-md-4 { margin-bottom: 20px; } /* Footer columns stack on mobile */ .footer .col-md-6, .footer .col-md-3 { margin-bottom: 30px; } /* Form takes full width on mobile */ .form-section { padding: 25px; } /* Reduce section padding on mobile so content isn't too spread out on small screens */ .content-area { padding: 50px 0; } .content-area-5 { padding: 40px 0; } }