/* ==========================================================
ZEBLEARN — LAYOUT + HEADER + FOOTER (combined, global)
Loaded on every page. Fonts are NOT @import'd here anymore —
see the for fonts in the page .
========================================================== */
/* ============================================================
ZebLearn India — LAYOUT Stylesheet
Includes: Fonts, Variables, Reset, Utils, Animations,
Section headings, Buttons, Keyframes,
Responsive (layout-only)
Used by: every page (load once, globally)
NOTE: Header/Nav rules moved fully to header.css,
Cookies-card rules moved fully to footer.css.
(Removed here to avoid duplicate CSS.)
============================================================ */
/* ── 0. GOOGLE FONTS ─────────────────────────────────────── */
/* MOVED: the @import was here before. @import inside CSS is discovered
late (browser must first fetch+parse this whole stylesheet before it
even sees the @import, then fetch the font CSS, then the font files —
three round trips in serial). It now loads via +
directly in pageLayout.blade.php's ,
which lets the browser discover and fetch it immediately in parallel
with everything else. Do not re-add the @import here. */
/* ── 1. CSS VARIABLES ────────────────────────────────────── */
:root {
/* Brand */
--gold: #FFB800;
--gold-d: #e6a500;
--gold-l: rgba(255,184,0,.1);
--orange: #FF6B00;
--red: #e53935;
--green: #22c55e;
/* Layout */
--navy: #050c18;
--navy-2: #0b1a30;
--navy-3: #102040;
--text: #1e293b;
--muted: #64748b;
--border: #e2e8f0;
--bg: #f4f6fa;
/* Shadows */
--sh-sm: 0 2px 8px rgba(0,0,0,.07);
--sh-md: 0 8px 32px rgba(0,0,0,.13);
--sh-lg: 0 24px 64px rgba(0,0,0,.22);
/* Radii */
--r: 10px;
--r-lg: 16px;
--r-xl: 22px;
/* Typography */
--font-h: 'Outfit', sans-serif;
--font-b: 'DM Sans', sans-serif;
/* Bootstrap-compatible overrides */
--bs-font-sans-serif: var(--font-b);
--bs-link-color: #f44a25;
}
/* ── 2. RESET / BASE ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-b); font-size: 1rem; font-weight: 400; color: var(--text); background: #fff; line-height: 1.6; overflow-x: hidden; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-h); font-weight: 700; line-height: 1.2; color: #232323; margin-top: 0; }
h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }
p { margin-top: 0; }
ul { list-style: none; padding: 0; margin: 0; }
a { text-decoration: none; transition: color .2s, background .2s; }
img { display: block; max-width: 100%; }
::selection { background: #f44a25; color: #fff; }
/* ── 3. UTILITY CLASSES ──────────────────────────────────── */
.hw { font-family: var(--font-b); color: var(--text); overflow-x: hidden; }
.hw-inner { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.section-bg { background: #f5f5f7 !important; }
.text--base { color: #f44a25; }
.btn--base,
.btn--base:hover { background: #f44a25; color: #fff; font-weight: 700; }
.mw-100 { max-width: 100%; }
/* ── 4. SCROLL-REVEAL ANIMATIONS ────────────────────────── */
.anim-fade { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.anim-left { opacity: 0; transform: translateX(-32px); transition: opacity .7s ease, transform .7s ease; }
.anim-right { opacity: 0; transform: translateX(32px); transition: opacity .7s ease, transform .7s ease; }
.anim-scale { opacity: 0; transform: scale(.9); transition: opacity .6s ease, transform .6s ease; }
.anim-fade.is-vis,
.anim-left.is-vis,
.anim-right.is-vis { opacity: 1; transform: none; }
.anim-scale.is-vis { opacity: 1; transform: scale(1); }
.anim-d1 { transition-delay: .1s; }
.anim-d2 { transition-delay: .2s; }
.anim-d3 { transition-delay: .3s; }
.anim-d4 { transition-delay: .4s; }
.anim-d5 { transition-delay: .5s; }
.anim-d6 { transition-delay: .6s; }
/* ── 5. SECTION HEADINGS ─────────────────────────────────── */
.hw-sh { text-align: center; margin-bottom: 36px; }
.hw-sh__ey { font-size: .6rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.hw-sh__ey::before,
.hw-sh__ey::after { content: ''; width: 28px; height: 1.5px; background: var(--gold); opacity: .45; }
.hw-sh h2 { font-family: var(--font-h); font-size: clamp(1.2rem,2.8vw,2rem); font-weight: 900; color: var(--navy); margin-bottom: 10px; letter-spacing: -.03em; text-transform: uppercase; }
.hw-sh h2 em { color: var(--gold); font-style: normal; }
.hw-sh--w h2 { color: #fff; }
.hw-sh p { color: var(--muted); font-size: .86rem; line-height: 1.75; max-width: 540px; margin: 0 auto; }
.hw-sh--w p { color: rgba(255,255,255,.58); }
/* ── 6. GLOBAL BUTTONS ───────────────────────────────────── */
.hw-btn-gold {
display: inline-flex; align-items: center; gap: 8px;
background: var(--gold); color: var(--navy);
padding: 13px 24px; border-radius: var(--r);
font-family: var(--font-h); font-weight: 800; font-size: .85rem;
text-transform: uppercase; letter-spacing: .04em;
box-shadow: 0 6px 20px rgba(255,184,0,.4);
transition: background .2s, transform .15s; border: none; cursor: pointer;
}
.hw-btn-gold:hover { background: var(--gold-d); transform: translateY(-2px); color: var(--navy); }
.hw-btn-outline-w {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(255,255,255,.08); color: #fff;
padding: 12px 22px; border-radius: var(--r);
font-family: var(--font-h); font-weight: 700; font-size: .85rem;
border: 1.5px solid rgba(255,255,255,.3);
transition: border-color .2s, background .2s; cursor: pointer;
}
.hw-btn-outline-w:hover { border-color: var(--gold); background: rgba(255,184,0,.08); color: var(--gold); }
/* ── 32. KEYFRAME ANIMATIONS ─────────────────────────────── */
@keyframes hw-blink { 0%,100% { box-shadow: 0 0 0 3px rgba(34,197,94,.2); } 50% { box-shadow: 0 0 0 6px rgba(34,197,94,.06); } }
@keyframes zlBlink { 0%,100% { opacity: 1; } 50% { opacity: .15; } }
@keyframes zlSpin { to { transform: rotate(360deg); } }
@keyframes hw-ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes hw-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes hw-reviews { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes hw-hire-fwd { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes hw-hire-rev { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
@keyframes hw-cap-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes hw-stu-fwd { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes hw-stu-rev { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
@keyframes zl-verify-fwd { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes zl-lb-in { from { opacity: 0; transform: scale(.92) translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes ppSlide { 0%,100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@keyframes zlMarqScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes zlUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes zlDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.zl-spin { animation: zlSpin .75s linear infinite; display: inline-block; }
/* ── 39. CUSTOM SCROLLBAR ────────────────────────────────── */
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { box-shadow: inset 0 0 5px grey; border-radius: 10px; }
::-webkit-scrollbar-thumb { background: #000; border-radius: 10px; }
/* ── FONT AWESOME BASE CLASSES ───────────────────────────── */
.fa,.fab,.fad,.fal,.far,.fas {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
}
.fab { font-family: "Font Awesome 5 Brands"; }
.fa,.far,.fas { font-family: "Font Awesome 5 Free"; }
.fa,.fas { font-weight: 900; }
.fab,.far { font-weight: 400; }
/* ── @FONT-FACE DECLARATIONS ─────────────────────────────── */
@font-face {
font-family: "Font Awesome 5 Free";
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("../../../../global/webfonts/fa-solid-900.woff2") format("woff2"),
url("../../../../global/webfonts/fa-solid-900.woff") format("woff");
}
@font-face {
font-family: "Font Awesome 5 Free";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../../../../global/webfonts/fa-regular-400.woff2") format("woff2"),
url("../../../../global/webfonts/fa-regular-400.woff") format("woff");
}
@font-face {
font-family: "Font Awesome 5 Brands";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../../../../global/webfonts/fa-brands-400.woff2") format("woff2"),
url("../../../../global/webfonts/fa-brands-400.woff") format("woff");
}
/* ── INDIVIDUAL ICON GLYPHS ──────────────────────────────── */
.fa-award:before { content:"\f559"; }
.fa-blender-phone:before { content:"\f6b6"; }
.fa-briefcase:before { content:"\f0b1"; }
.fa-certificate:before { content:"\f0a3"; }
.fa-check-circle:before { content:"\f058"; }
.fa-cogs:before { content:"\f085"; }
.fa-comments:before { content:"\f086"; }
.fa-credit-card:before { content:"\f09d"; }
.fa-facebook:before { content:"\f09a"; }
.fa-chevron-right:before { content:"\f054"; }
.fa-home:before { content:"\f015"; }
.fa-facebook-f:before { content:"\f39e"; }
.fa-flag:before { content:"\f024"; }
.fa-globe-europe:before { content:"\f7a2"; }
.fa-graduation-cap:before { content:"\f19d"; }
.fa-handshake:before { content:"\f2b5"; }
.fa-instagram:before { content:"\f16d"; }
.fa-laptop:before { content:"\f109"; }
.fa-laptop-code:before { content:"\f5fc"; }
.fa-linkedin-in:before { content:"\f0e1"; }
.fa-list-alt:before { content:"\f022"; }
.fa-paper-plane:before { content:"\f1d8"; }
.fa-phone:before { content:"\f095"; }
.fa-question:before { content:"\f128"; }
.fa-star:before { content:"\f005"; }
.fa-star-and-crescent:before { content:"\f699"; }
.fa-star-half:before { content:"\f089"; }
.fa-star-half-alt:before { content:"\f5c0"; }
.fa-star-of-david:before { content:"\f69a"; }
.fa-star-of-life:before { content:"\f621"; }
.fa-suitcase:before { content:"\f0f2"; }
.fa-user-check:before { content:"\f4fc"; }
.fa-user-shield:before { content:"\f505"; }
.fa-users:before { content:"\f0c0"; }
.fa-whatsapp:before { content:"\f232"; }
.fa-youtube:before { content:"\f167"; }
.fa-brain:before { content: "\f5dc"; }
.fa-chart-line:before { content: "\f201"; }
.fa-code:before { content: "\f121"; }
.fa-comment-dots:before { content: "\f4ad"; }
.fa-database:before { content: "\f1c0"; }
.fa-eye:before { content: "\f06e"; }
.fa-film:before { content: "\f008"; }
.fa-image:before { content: "\f03e"; }
.fa-keyboard:before { content: "\f11c"; }
.fa-layer-group:before { content: "\f5fd"; }
.fa-link:before { content: "\f0c1"; }
.fa-magic:before { content: "\f0d0"; }
.fa-network-wired:before { content: "\f6ff"; }
.fa-project-diagram:before { content: "\f542"; }
.fa-robot:before { content: "\f544"; }
.fa-rocket:before { content: "\f135"; }
.fa-search:before { content: "\f002"; }
.fa-shield-alt:before { content: "\f3ed"; }
.fa-sliders-h:before { content: "\f1de"; }
.fa-square-root-alt:before { content: "\f698"; }
.fa-play:before { content: "\f04b"; }
/* ── RESPONSIVE (layout-only) ────────────────────────────── */
@media (max-width: 768px) {
.hide { display: none; }
}
/* ============ HEADER ============ */
/* ============================================
HEADER CSS
ZebLearn Two-Column Simplilearn-Style Header
============================================ */
/* ----- TRANSITIONS & ANIMATIONS ----- */
.zl-top-bar a { transition: text-decoration 0.2s; }
.zl-top-bar a:hover { text-decoration: underline; }
.zl-nav-link { transition: color 0.3s ease; }
.zl-nav-link::after {
content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px;
background: linear-gradient(to right, #f44a25, #df340f); transition: width 0.3s ease;
}
.zl-nav-link:hover { color: #f44a25; }
.zl-nav-link:hover::after { width: 100%; }
/* ----- NAV ITEMS ----- */
.zl-nav-item { position: relative; }
.zl-nav-icon { width: 1rem; height: 1rem; transition: transform 0.3s; }
.zl-nav-item.active .zl-nav-icon { transform: rotate(180deg); }
/* ----- DROPDOWN MENUS ----- */
.zl-dropdown-menu {
position: absolute; left: 50%; transform: translateX(-50%); margin-top: 0.5rem;
background: white; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
border-radius: 0.5rem; padding: 1.5rem; opacity: 0; visibility: hidden;
transform: translateX(-50%) translateY(-10px); transition: all 0.3s ease; pointer-events: none;
}
.zl-nav-item.active .zl-dropdown-menu {
opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto;
}
.zl-mega-menu { width: 100%; max-width: 72rem; }
.zl-simple-dropdown { width: 16rem; left: 0; transform: none; }
.zl-dropdown-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.zl-dropdown-item {
color: #4b5563; padding: 0.375rem 0.5rem; border-radius: 0.25rem; transition: all 0.2s;
display: flex; align-items: center; gap: 0.5rem; text-decoration: none;
font-size: 0.875rem; line-height: 1.4; font-weight: 400;
}
.zl-dropdown-item:hover { color: #f44a25; background: #f3f4f6; padding-left: 0.75rem; text-decoration: none; }
.zl-dropdown-item i { width: 1.15rem; text-align: center; flex-shrink: 0; font-size: 1rem; }
/* ----- TWO COLUMN COURSES DROPDOWN ----- */
.zl-two-column-courses { max-width: 950px; min-width: 850px; padding: 0; border-radius: 0.75rem; overflow: hidden; }
.zl-two-column-container { display: flex; min-height: 450px; max-height: 550px; }
/* Left Sidebar */
.zl-categories-sidebar { width: 280px; background: #f8f9fa; border-right: 1px solid #e5e7eb; padding: 1.5rem 0; overflow-y: auto; }
.zl-sidebar-title { font-size: 0.75rem; font-weight: 700; color: #6b7280; letter-spacing: 0.05em; padding: 0 1.5rem; margin-bottom: 1rem; }
.zl-category-list { list-style: none; padding: 0; margin: 0; }
.zl-category-list li { margin: 0; }
.zl-category-btn {
width: 100%; display: flex; align-items: center; justify-content: space-between;
padding: 0.875rem 1.5rem; background: transparent; border: none; border-left: 3px solid transparent;
cursor: pointer; text-align: left; font-size: 0.9375rem; color: #374151; transition: all 0.2s;
}
.zl-category-btn:hover { background: #ffffff; color: #f44a25; }
.zl-category-btn.active { background: #ffffff; border-left-color: #f44a25; color: #f44a25; font-weight: 600; }
.zl-category-btn svg { width: 1rem; height: 1rem; opacity: 0; transition: opacity 0.2s; }
.zl-category-btn.active svg { opacity: 1; }
/* Right Content */
.zl-courses-content { flex: 1; padding: 2rem; overflow-y: auto; background: white; }
.zl-course-category { display: none; }
.zl-course-category.active { display: block; }
.zl-content-title { font-size: 1.5rem; font-weight: 700; color: #111827; margin-bottom: 0.5rem; }
.zl-content-subtitle { font-size: 0.9375rem; color: #6b7280; margin-bottom: 1.5rem; }
/* Course Cards Grid */
.zl-courses-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.zl-course-card {
padding: 1rem; border: 1px solid #e5e7eb; border-radius: 0.5rem; text-decoration: none;
transition: all 0.2s ease; background: white; display: flex; flex-direction: column; overflow: hidden;
}
.zl-course-card:hover {
border-color: #f44a25; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
transform: translateY(-2px); background: #f44a25;
}
.zl-course-card h4 { font-size: 0.9375rem; font-weight: 600; color: #111827; margin-bottom: 0.25rem; line-height: 1.4; }
.zl-course-card p { font-size: 0.8125rem; color: #6b7280; margin: 0; }
.zl-course-card:hover h4,
.zl-course-card:hover p { color: #ffffff; }
.zl-view-all-btn {
display: inline-flex; align-items: center; gap: 0.5rem; color: #f44a25;
font-size: 0.9375rem; font-weight: 600; text-decoration: none; transition: gap 0.2s;
}
.zl-view-all-btn:hover { gap: 0.75rem; text-decoration: none; color: #f44a25; }
/* Scrollbar Styling */
.zl-categories-sidebar::-webkit-scrollbar,
.zl-courses-content::-webkit-scrollbar { width: 6px; }
.zl-categories-sidebar::-webkit-scrollbar-track,
.zl-courses-content::-webkit-scrollbar-track { background: #f1f1f1; }
.zl-categories-sidebar::-webkit-scrollbar-thumb,
.zl-courses-content::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 10px; }
.zl-categories-sidebar::-webkit-scrollbar-thumb:hover,
.zl-courses-content::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }
/* ----- SEARCH ----- */
.zl-search-wrapper { position: relative; }
.zl-search-input {
width: 16rem; padding: 0.5rem 1rem 0.5rem 2.5rem; border: 1px solid #d1d5db;
border-radius: 9999px; outline: none; transition: border-color 0.3s;
}
.zl-search-input:focus { border-color: #f44a25; }
.zl-search-icon {
position: absolute; left: 0.75rem; top: 0.625rem; width: 1.25rem; height: 1.25rem;
color: #9ca3af; pointer-events: none;
}
#suggestions,
#mobileSuggestions {
position: absolute; top: 100%; left: 0; right: 0; background: white;
border: 1px solid #e5e7eb; border-radius: 0.5rem; margin-top: 0.25rem;
max-height: 300px; overflow-y: auto; list-style: none; padding: 0; z-index: 1000; display: none;
}
#suggestions.active,
#mobileSuggestions.active { display: block; }
.suggestion-item {
padding: 0.75rem 1rem; cursor: pointer; transition: background 0.2s;
border-bottom: 1px solid #f3f4f6; font-weight: 600; font-size: 14px; letter-spacing: 1px;
color: #ff5722; border-radius: 4px; background: #fff; box-shadow: inset 0 0 20px #fff; margin-bottom: 2px;
}
.suggestion-item:hover { background-color: #fff; color: #000; box-shadow: 0 0 4px rgba(0,0,0,0.1); }
.suggestion-link { text-decoration: none; color: inherit; }
/* ----- BUTTONS ----- */
.zl-btn-primary {
background: #374151; color: white; padding: 0.625rem 1.5rem; border-radius: 9999px;
font-weight: 600; text-decoration: none; display: inline-block; border: none; cursor: pointer; transition: all 0.3s;
}
.zl-btn-primary:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2); transform: scale(1.05); color: white; text-decoration: none; }
.zl-btn-outline {
border: 1px solid #f44a25; color: #f44a25; padding: 0.5rem 1rem; border-radius: 9999px;
font-weight: 600; text-align: center; display: block; text-decoration: none; transition: background 0.3s;
}
.zl-btn-outline:hover { background: #eff6ff; color: #f44a25; text-decoration: none; }
/* ----- HEADER WRAPPER ----- */
.zl-header-wrapper {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
position: relative; z-index: 9999;
}
.zl-top-bar { background: #0c1a1e; color: white; padding: 0.5rem 0; }
.zl-top-bar-content {
max-width: 1280px; margin: 0 auto; padding: 0 1rem; display: flex;
justify-content: space-between; align-items: center; font-size: 0.875rem;
}
.zl-top-bar-left,
.zl-top-bar-right { display: flex; align-items: center; gap: 1rem; }
.zl-top-bar a { color: white; text-decoration: none; }
.zl-main-nav { background: white; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); position: sticky; top: 0; z-index: 9998; }
.zl-main-nav-content {
max-width: 1280px; margin: 0 auto; padding: 0 1rem; display: flex;
align-items: center; justify-content: space-between; height: 5rem;
}
.zl-logo { flex-shrink: 0; }
.zl-logo img { height: 3rem; width: auto; }
.zl-desktop-nav { display: none; align-items: center; gap: 2rem; flex: 1; justify-content: center; }
.zl-nav-link {
position: relative; padding: 0.5rem 0; color: #374151; font-weight: 500; text-decoration: none;
display: inline-flex; align-items: center; gap: 0.25rem; background: none; border: none; cursor: pointer; font-size: 1rem;
}
.zl-desktop-actions { display: none; align-items: center; gap: 1rem; }
.zl-mobile-toggle { display: block; color: #374151; background: none; border: none; cursor: pointer; padding: 0.5rem; }
.zl-mobile-toggle svg { width: 1.5rem; height: 1.5rem; }
.zl-mobile-toggle .zl-icon-close { display: none; }
/* ----- MOBILE MENU ----- */
.zl-mobile-menu { display: none; background: white; border-top: 1px solid #e5e7eb; }
.zl-mobile-menu.active { display: block; }
.zl-mobile-menu-content { padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.zl-mobile-search { position: relative; margin-bottom: 1rem; }
.zl-mobile-search input { width: 100%; }
.zl-mobile-nav-link { padding: 0.5rem 0; color: #374151; font-weight: 500; text-decoration: none; display: block; }
.zl-mobile-nav-link:hover { color: #f44a25; text-decoration: none; }
.zl-mobile-dropdown { border-bottom: 1px solid #f3f4f6; }
.zl-mobile-dropdown-toggle {
width: 100%; display: flex; justify-content: space-between; align-items: center;
background: none; border: none; cursor: pointer; text-align: left;
}
.zl-mobile-dropdown-toggle svg { width: 1rem; height: 1rem; transition: transform 0.3s; }
.zl-mobile-dropdown-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding: 0 0 0 1rem; }
.zl-mobile-dropdown-content.active { max-height: 1000px; padding: 0.5rem 0 1rem 1rem; }
.zl-mobile-dropdown.active .zl-mobile-dropdown-toggle svg { transform: rotate(180deg); }
.zl-mobile-category-section { margin-bottom: 1rem; }
.zl-mobile-main-category {
font-weight: 600; color: #1f2937; display: block; margin-bottom: 0.5rem;
padding: 0.25rem 0; text-decoration: none;
}
.zl-mobile-category-link { display: block; padding: 0.25rem 0 0.25rem 1rem; color: #6b7280; font-size: 0.875rem; text-decoration: none; }
.zl-mobile-category-link:hover,
.zl-mobile-main-category:hover { color: #f44a25; text-decoration: none; }
.zl-mobile-cert-link { display: block; padding: 0.5rem 1rem; color: #6b7280; text-decoration: none; }
.zl-mobile-cert-link:hover { color: #f44a25; text-decoration: none; }
.zl-mobile-view-all { margin-top: 0.5rem; }
.zl-mobile-actions {
padding-top: 1rem; border-top: 1px solid #e5e7eb; display: flex;
flex-direction: column; gap: 0.5rem; margin-top: 1rem;
}
/* ----- RESPONSIVE ----- */
@media (max-width: 767px) {
.zl-top-bar-left span { font-size: 0.75rem; }
.zl-top-bar-right { gap: 0.5rem; }
.hide { display: none; }
}
@media (max-width: 1280px) {
.zl-two-column-courses { min-width: 750px; max-width: 800px; }
.zl-categories-sidebar { width: 250px; }
}
@media (max-width: 1280px) {
.zl-courses-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
.zl-two-column-courses { min-width: 700px; max-width: 750px; }
.zl-two-column-container { min-height: 400px; max-height: 500px; }
}
@media (min-width: 1024px) {
.zl-desktop-nav { display: flex; }
.zl-desktop-actions { display: flex; }
.zl-mobile-toggle { display: none; }
}
/* ============================================
LOGGED-IN USER MENU + AUTH (account dropdown)
In classes ki CSS purani header.css me nahi thi —
ab add ki gayi hai taaki login ke baad menu sahi dikhe.
============================================ */
.zl-user-menu { position: relative; }
/* User info block (dropdown ke top par) */
.zl-dropdown-user-info {
padding: 0 0.5rem 0.75rem;
margin-bottom: 0.5rem;
border-bottom: 1px solid #f1f5f9;
}
.zl-dropdown-user-name { font-weight: 700; color: #111827; font-size: 0.95rem; line-height: 1.3; }
.zl-dropdown-user-role {
font-size: 0.78rem; color: #6b7280; margin-top: 2px;
display: flex; align-items: center; gap: 6px;
}
.zl-approved-dot {
width: 8px; height: 8px; border-radius: 50%;
background: #22c55e; display: inline-block; flex-shrink: 0;
box-shadow: 0 0 0 2px rgba(34,197,94,.2);
}
/* Divider between menu groups */
.zl-dropdown-divider {
height: 1px; background: #f1f5f9; margin: 0.5rem 0;
list-style: none; padding: 0;
}
/* Logout item — red hover */
.zl-dropdown-logout:hover {
color: #e53935 !important; background: #fef2f2 !important;
}
/* Mobile logged-in strip */
.zl-mobile-user-strip {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; background: #f8f9fa;
border-radius: 0.5rem; margin-bottom: 0.5rem;
}
.zl-mobile-user-name { font-weight: 700; color: #111827; font-size: 0.9rem; line-height: 1.3; }
.zl-mobile-user-role { font-size: 0.75rem; color: #6b7280; }
/* ============ FOOTER ============ */
/* ============================================
FOOTER CSS
ZebLearn Dark Footer
============================================ */
/* ----- MAIN FOOTER ----- */
.footer-dark {
background-color: #0c1a1e;
color: #fff;
font-size: 14px;
}
.footer-dark a {
color: #ccc;
text-decoration: none;
}
.footer-dark a:hover {
color: #ff5722;
text-decoration: underline;
}
.footer-heading,
.footer-dark h6 {
font-weight: 700;
font-size: 15px;
text-transform: uppercase;
}
.footer-dark h5 {
font-weight: 700;
font-size: 1.2rem;
margin-bottom: 1rem;
color: white;
}
.footer-dark ul li {
padding: 2px 0;
}
/* ----- FOOTER MENU (Policy Links) ----- */
.footer-menu {
background-color: #081014;
}
.footer-menu a {
color: #999;
margin: 0 6px;
text-decoration: none;
}
.footer-menu a:hover {
color: #ff5722;
text-decoration: underline;
}
/* ----- FOOTER BOTTOM ----- */
.footer-bottom {
background-color: #081014;
border-top: 1px solid #444;
padding: 20px 0;
padding-bottom: 60px; /* space for floating CTAs */
text-align: center;
}
.footer-bottom p {
margin-bottom: 0 !important;
margin-top: 0 !important;
}
.footer-bottom p a {
color: #f44a25 !important;
}
@media (max-width: 442px) {
.footer-bottom p {
margin-bottom: 15px !important;
}
}
/* ----- SOCIAL ICONS ----- */
.footer-bottom .social-icon a {
font-size: 18px;
color: #fff;
margin: 0 8px;
display: inline-block;
}
/* ----- WHATSAPP BAR ----- */
.bar_wpp {
position: fixed;
bottom: 50px;
left: 20px;
z-index: 120;
border-radius: 5px 5px 0 0;
}
.bar_wpp a,
.bar_call a,
.bar_zoom a,
.bar_demo a {
display: flex;
align-items: stretch;
justify-content: space-between;
text-decoration: none !important;
}
.bar_wpp a:hover,
.bar_call a:hover,
.bar_zoom a:hover,
.bar_demo a:hover {
text-decoration: none !important;
}
.bar_wpp .icon_wpp,
.bar_call .icon_call,
.bar_zoom .icon_zoom,
.bar_demo .icon_demo {
width: 40px;
height: 40px;
float: left;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
z-index: 2;
transition: 0.3s;
}
.bar_wpp .icon_wpp,
.bar_wpp a:hover .icon_wpp {
background: linear-gradient(90deg, #12c665 0.85%, #009446 100%);
}
.bar_wpp .txt_wpp,
.bar_zoom .txt_zoom,
.bar_call .txt_call,
.bar_demo .txt_demo {
display: flex;
text-align: center;
transition: 0.3s;
font-weight: 700;
margin-left: -35px;
}
.bar_wpp .txt_wpp {
align-items: center;
justify-content: center;
color: #12c665;
padding-left: 45px !important;
border-radius: 50px;
border: 2px solid;
padding: 0 10px;
font-size: 14px;
z-index: 1;
background: white;
}
.bar_wpp a:hover .txt_wpp {
background-color: #fff;
}
/* ----- CALL BAR ----- */
.bar_call {
position: fixed;
bottom: 96px;
left: 20px;
z-index: 120;
border-radius: 5px 5px 0 0;
}
.bar_call .icon_call {
background: linear-gradient(180deg, rgb(7 5 9 / 75%) 0, #000 100%);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
transition: 0.3s;
border-radius: 100%;
z-index: 2;
}
.bar_call a:hover .icon_call {
background: linear-gradient(180deg, rgb(7 5 9 / 75%) 0, #000 100%);
}
.bar_call .txt_call {
align-items: center;
justify-content: center;
background-color: #fff;
color: #000;
padding: 0 10px;
font-size: 14px;
transition: 0.3s;
padding-left: 45px !important;
z-index: 1;
border-radius: 50px;
border: 2px solid;
text-align: center;
display: flex;
}
.bar_call .icon_call i,
.bar_demo .icon_demo i,
.bar_wpp .icon_wpp i,
.bar_zoom .icon_zoom i {
color: #fff;
font-size: 20px;
}
/* ----- ZOOM BAR ----- */
.bar_zoom {
position: fixed;
bottom: 5px;
left: 20px;
z-index: 120;
border-radius: 5px 5px 0 0;
}
.bar_zoom .icon_zoom,
.bar_zoom a:hover .icon_zoom {
background: linear-gradient(90deg, #1b6dff 0.85%, #0062ff 100%);
}
.bar_zoom .txt_zoom {
align-items: center;
justify-content: center;
background-color: #fff;
color: #1b6dff;
padding-left: 45px !important;
border-radius: 50px;
border: 2px solid;
padding: 0 10px;
font-size: 14px;
z-index: 1;
}
/* ----- DEMO BAR ----- */
.bar_demo {
position: fixed;
bottom: 140px;
left: 20px;
z-index: 120;
border-radius: 5px 5px 0 0;
}
.bar_demo a {
display: flex;
align-items: center;
justify-content: center;
}
.bar_demo .icon_demo,
.bar_demo a:hover .icon_demo {
background: linear-gradient(90deg, #007bff 0.85%, #0056b3 100%);
}
.bar_demo .txt_demo {
align-items: center;
justify-content: center;
background-color: #fff;
color: #007bff;
padding: 6px 40px;
font-size: 14px;
border-radius: 50px;
border: 2px solid #007bff;
}
/* ----- COOKIES CARD ----- */
.cookies-card {
max-width: 725px;
position: fixed;
bottom: 10px;
left: 15px;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
padding: 10px 15px;
z-index: 9999999999;
transition: opacity 0.4s, transform 0.4s;
opacity: 0;
transform: translateY(30px);
border-radius: 5px;
color: #8492a6;
border: 1px solid;
}
.cookies-card.show {
opacity: 1;
transform: translateY(0);
}
.cookies-card.hide {
opacity: 0;
transform: translateY(50px);
}
.cookie-btn {
cursor: pointer;
}
@media (max-width: 767px) {
.cookies-card {
width: calc(100% - 20px);
left: 10px;
bottom: 10px;
font-size: 12px;
padding: 10px;
flex-direction: column;
text-align: center;
}
.cookie-btn {
width: 100%;
margin: 5px 0;
}
}
/* ----- RESPONSIVE FLOATING BARS ----- */
@media (max-width: 475px) {
.bar_wpp { left: 8px; bottom: 60px; }
.bar_call { left: 8px; bottom: 102px; }
.bar_call .txt_call,
.bar_demo .txt_demo,
.bar_wpp .txt_wpp,
.bar_zoom .txt_zoom { display: none; }
.bar_call .icon_call i,
.bar_demo .icon_demo i,
.bar_wpp .icon_wpp i,
.bar_zoom .icon_zoom i { font-size: 25px; }
.bar_demo {
left: 9px !important;
bottom: 145px !important;
position: fixed;
z-index: 120;
border-radius: 5px 5px 0 0;
overflow: hidden;
}
}
@media (max-width: 500px) {
.footer-dark { text-align: center; }
.footer-area .footer-widget.widget-link ul li a { font-size: 15px; padding: 0; }
}
/* ============ MAIN-PAGE EXTRA (course listing cards) ============ */
/* ============================================================
MAINPAGE EXTRA CSS
mainPageLayout.blade.php ke se nikaali gayi inline CSS.
(Course-card listing + know-more link styles.)
============================================================ */
.know-more-wrap { text-align: right; margin-top: 6px; padding-right: 4px; }
.know-more-link {
font-size: 14px; font-weight: 600; color: #1e3a5f;
text-decoration: none; border-bottom: 1px dashed #1e3a5f;
transition: color 0.3s;
}
.know-more-link:hover { color: #e74c3c; border-bottom-color: #e74c3c; }
.courses-section { background: #f4f6fb; padding: 60px 0; font-family: 'Poppins', sans-serif; }
.section-badge {
background: #fff3e0; color: #e65100; font-size: 0.78rem; font-weight: 600;
letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 16px;
border-radius: 30px; display: inline-block; margin-bottom: 12px;
}
.section-title { font-size: 2rem; font-weight: 700; color: #1a1a2e; }
.section-title span { color: #e65100; }
.section-sub { color: #6b7280; font-size: 0.95rem; }
/* Horizontal course card */
.course-card {
background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
overflow: hidden; display: flex; flex-direction: row; align-items: stretch;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.course-card:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0,0,0,0.09); }
.card-img-wrap { width: 200px; min-width: 200px; flex-shrink: 0; overflow: hidden; }
.card-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-content {
flex: 1; padding: 18px 22px; display: flex; flex-direction: column;
justify-content: center; gap: 8px; border-right: 1px solid #f1f5f9;
}
.badge-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hot-badge {
background: #e65100; color: #fff; font-size: 0.62rem; font-weight: 700;
padding: 2px 10px; border-radius: 20px; letter-spacing: 0.5px; text-transform: uppercase;
}
.cat-tag {
font-size: 0.68rem; font-weight: 600; color: #3b5bdb; background: #eef2ff;
padding: 2px 10px; border-radius: 20px;
}
.card-title-text { font-size: 1rem; font-weight: 700; color: #1a1a2e; line-height: 1.35; margin: 0; }
.card-desc {
font-size: 0.80rem; color: #6b7280; line-height: 1.6; margin: 0;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rating-row { display: flex; align-items: center; gap: 5px; font-size: 0.80rem; }
.stars { color: #f59e0b; letter-spacing: 2px; font-size: 0.85rem; }
.rating-num { font-weight: 700; color: #1a1a2e; }
.votes-text { color: #9ca3af; font-size: 0.74rem; }
.meta-row { display: flex; flex-wrap: wrap; gap: 6px; }
.meta-pill {
font-size: 0.70rem; color: #475569; background: #f1f5f9;
padding: 2px 10px; border-radius: 20px; font-weight: 500;
}
.instructor-row { font-size: 0.78rem; color: #6b7280; font-weight: 500; }
.instructor-label {
font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.8px;
color: #9ca3af; margin-right: 4px;
}
.card-action {
width: 160px; min-width: 160px; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 10px; padding: 18px 16px;
flex-shrink: 0; background: #fafbff;
}
.price-now { font-size: 1.35rem; font-weight: 700; color: #1a1a2e; line-height: 1; }
.price-old { font-size: 0.76rem; color: #9ca3af; text-decoration: line-through; margin-top: 2px; }
.discount-pct {
font-size: 0.68rem; font-weight: 700; color: #16a34a; background: #dcfce7;
padding: 2px 8px; border-radius: 20px;
}
.enroll-btn {
background: #e65100; color: #fff; border: none; padding: 9px 0; width: 100%;
border-radius: 8px; font-size: 0.80rem; font-weight: 600; cursor: pointer;
transition: background 0.2s; font-family: 'Poppins', sans-serif;
text-transform: uppercase; letter-spacing: 0.5px;
}
.enroll-btn:hover { background: #bf360c; }
@media (max-width: 576px) {
.course-card { flex-direction: column; }
.card-img-wrap { width: 100%; min-width: unset; height: 160px; }
.card-action { width: 100%; flex-direction: row; justify-content: space-between; border-top: 1px solid #f1f5f9; }
.enroll-btn { width: auto; padding: 8px 20px; }
}
/* ============ FOOTER (inline style block, mostly legacy/commented) ============ */
/* ----- REVIEW BAR ----- */
/*.bar_review{*/
/* position:fixed;*/
/*bottom:142px; */
/* left:20px;*/
/* z-index:120;*/
/*}*/
/*.bar_review a{*/
/* display:flex;*/
/* align-items:center;*/
/* text-decoration:none !important;*/
/*}*/
/*.bar_review .icon_review{*/
/* width:40px;*/
/* height:40px;*/
/* border-radius:50%;*/
/* display:flex;*/
/* align-items:center;*/
/* justify-content:center;*/
/* background:linear-gradient(90deg, #b7b0a7 0%, #e8e8e8 100%);*/
/* z-index:2;*/
/*}*/
/*.bar_review .icon_review i{*/
/* color:#fff;*/
/* font-size:20px;*/
/*}*/
/*.bar_review .txt_review{*/
/* display:flex;*/
/* align-items:center;*/
/* justify-content:center;*/
/* margin-left:-35px;*/
/* padding-left:45px !important;*/
/* padding-right:14px;*/
/* height:40px;*/
/* background:#fff;*/
/* color:#ff5722;*/
/* border:2px solid #ff5722;*/
/* border-radius:50px;*/
/* font-size:14px;*/
/* font-weight:700;*/
/* transition:.3s;*/
/*}*/
/*.bar_review a:hover .txt_review{*/
/* background:#fff7f3;*/
/*}*/
/*@media (max-width:475px){*/
/* .bar_review{*/
/* left:8px;*/
/* bottom:145px;*/
/* }*/
/* .bar_review .txt_review{*/
/* display:none;*/
/* }*/
/* .bar_review .icon_review i{*/
/* font-size:25px;*/
/* }*/
/*}*/