/**
* Template Name: Academy - v1.0
* Template URL:https://creativeitem.com
* Author: creativeitem.com
=======================================================
Type of Content
===============
Import Google fonts
Default Css
*/
/***** Import Google Fonts
/*****************************************************/
/* Poppins + Hind Siliguri are no longer @import'd here — they're loaded via
/ tags in the of
layouts/default.blade.php instead, so the browser can fetch them in
parallel with this stylesheet rather than discovering them only after
this file itself has downloaded and parsed. */
/* Bangla fallback used by the active theme (site body/heading font-family
stack is 'Poppins', 'Anek Bangla', ...) is a Google Font, loaded via
in layouts/default.blade.php alongside Poppins/Hind Siliguri —
no local @font-face needed here (that's what the old Bornomala import
used to be, before switching to Anek Bangla). */
/* The other locally-hosted font families this template ships (Inter,
Ubuntu, Euclid Circular A, Manrope, Mica Valo, Mulish, Raleway,
Montserrat, Rubik, Lexend Deca, Outfit, Lato, DM Sans) belonged
entirely to the ~7 inactive demo homepage themes bundled in this same
stylesheet (cooking/kindergarden/meditation/university/developer/etc.)
— verified zero selectors using them appear in the active
home_made_by_builder theme or any shared frontend page. Removed. */
/***** CSS VARIABLES - Design System
/*****************************************************/
:root {
--text-color: #6b7385;
--color-white: #fff;
--color-1: #FFDA1C;
--color-2: #192335;
--color-black: #000;
--box-shadow: rgba(100, 100, 111, 0.2) 12px 11px 34px 11px;
--box-shadow-2: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
/* Primary Colors */
--primary-color: #FFDA1C !important;
--primary-hover: #d6cd1b;
--primary-active: #f2e52b;
--primary-light: rgba(239, 223, 47, 0.12);
/* Secondary Colors */
--secondary-color: #ffc664;
--secondary-hover: #f5d14e;
/* Purple Theme */
--purple-primary: #754FFE;
--purple-hover: #6d28d9;
--purple-active: #5324FF;
--purple-light: rgba(117, 79, 254, 0.11);
/* Grayscale */
--white: #ffffff;
--black: #000000;
--dark-bg: #050328;
--dark-primary: #1a1a1a;
--dark-secondary: #192335;
--dark-tertiary: #1E293B;
--dark-accent: #0a0e27;
/* Text Colors */
--text-primary: #192335;
--text-secondary: #6b7385;
--text-tertiary: #6E798A;
--text-light: #a1a7b4;
--text-muted: #747579;
/* Background Colors */
--bg-white: #ffffff;
--bg-light: #f4f7fd;
--bg-lighter: #F6F7F8;
--bg-lightest: #f8f7fe;
--bg-gray: #edf0f7;
--bg-dark: #050328;
/* Border Colors */
--border-color: solid 2px #8673ff;
--border-light: #f7f4ed;
--border-lighter: #e0e5f3;
--border-gray: #d9d9d9;
--border-dark: 1px solid rgba(0, 0, 0, 0.08);
/* Status Colors */
--success: #17b06d;
--success-light: rgba(23, 176, 109, 0.18);
--success-bg: #e4fde7;
--warning: #f2bb12;
--warning-light: rgba(242, 187, 18, 0.18);
--danger: #ef3f6e;
--danger-light: rgba(239, 63, 110, 0.18);
--info: #1b84ff;
--info-light: rgba(27, 132, 255, 0.18);
/* Rating Color */
--rating-star: #efbb02;
--rating-gold: #FFD700;
/* ============================================
GRADIENTS
============================================ */
--gradient-primary: linear-gradient(to right, #efcc2f 0%, #ffdd64 51%, #fff264 100%);
--gradient-primary-hover: linear-gradient(to right, #1b3fd6 0%, #b44ef5 51%, #b44ef5 100%);
--gradient-purple: linear-gradient(135deg, #ffff5e 0%, #ffca3a 100%);
--gradient-purple-alt: linear-gradient(135deg, #6d56ff 0%, #a95cf6 100%);
--gradient-light: linear-gradient(270deg, rgba(102, 81, 245, 0.06) 1.37%, rgba(129, 58, 244, 0.06) 86.05%);
--gradient-banner: repeating-linear-gradient(to right, transparent 30px, transparent 50px, rgba(255, 255, 255, 0.1) 120px, rgba(255, 255, 255, 0.1) 121px), linear-gradient(to bottom, #ffffff 0%, #fffcef 20%, #fff9c4 70%, #fff475 100%);
--gradient-overlay: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
/* ============================================
TYPOGRAPHY
============================================ */
--font-primary: "Poppins", "Anek Bangla", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
/* These all used to point at separate template fonts (Euclid Circular A,
Inter, plain Poppins) — now aliased to --font-primary so every
var(--...)-based font-family declaration resolves to the same
Poppins/Anek Bangla stack as everything else, without having to
rewrite every individual usage site. */
--font-secondary: var(--font-primary);
--font-inter: var(--font-primary);
--font-poppins: var(--font-primary);
--second-font-family: var(--font-primary);
--font-family: var(--font-primary);
/* ============================================
SPACING
============================================ */
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
--spacing-2xl: 48px;
/* ============================================
BORDERS
============================================ */
--border-width: 1px;
--border-width-thick: 2px;
--border-style: solid;
/* Border Radius */
--radius-xs: 3px;
--radius-sm: 4px;
--radius-md: 6px;
--radius-base: 8px;
--radius-lg: 10px;
--radius-xl: 12px;
--radius-2xl: 15px;
--radius-3xl: 20px;
--radius-4xl: 24px;
--radius-round: 50%;
/* ============================================
SHADOWS
============================================ */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 0px 15px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
--shadow-lg-color: 0 10px 15px -3px rgba(255, 224, 22, 0.1);
/* Custom Shadows */
--shadow-card: 0px 2px 12px -4px rgba(217, 217, 217, 0.6);
--shadow-card-hover: 0 12px 32px rgba(0, 0, 0, 0.15);
--shadow-primary: 0 4px 12px rgba(47, 87, 239, 0.3);
--shadow-purple: 0px 0px 29.6px 0px rgba(110, 121, 138, 0.10);
--shadow-button: 0 0 20px rgba(238, 238, 238, 0.5);
/* ============================================
TRANSITIONS
============================================ */
--transition-fast: 0.15s ease-in-out;
--transition-base: 0.3s ease;
--transition-slow: 0.5s ease;
--transition-all: all 0.3s ease;
/* ============================================
Z-INDEX
============================================ */
--z-dropdown: 1000;
--z-sticky: 1020;
--z-fixed: 1030;
--z-modal: 1050;
}
/***** Default Base Styles
/***************************************************/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
scroll-behavior: smooth;
}
html,
body {
max-width: 100%;
overflow-x: hidden;
position: relative;
}
body {
font-size: 15px;
font-weight: 400;
line-height: 22px;
font-family: var(--font-primary);
color: var(--text-secondary);
}
.container {
max-width: 1180px;
margin: auto;
padding-left: 20px;
padding-right: 20px;
}
h1,
h2,
h3,
h4,
h5,
h6,
ul,
p,
a {
margin: 0;
font-family: var(--font-primary) !important;
}
ul {
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
img {
display: block;
max-width: 100%;
}
/* Focus Visible */
*:focus-visible {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
/***** Color Utility Classes
/***************************************************/
/***** Spacing Utilities
/***************************************************/
.g-5 {
gap: 5px;
}
.mt-15 {
margin-top: 15px;
}
.mt-20 {
margin-top: 20px;
}
.mt-25 {
margin-top: 25px;
}
.mb-15 {
margin-bottom: 15px !important;
}
.mb-20 {
margin-bottom: 20px !important;
}
.mb-30 {
margin-bottom: 30px;
}
.pt-30 {
padding-top: 30px;
}
/***** Text Size Utilities
/***************************************************/
.text-12 {
font-size: 12px !important;
}
.text-14 {
font-size: 14px !important;
}
.text-16 {
font-size: 16px !important;
}
.text-20 {
font-size: 20px !important;
}
/***** Form Controls
/***************************************************/
.form-select:focus {
box-shadow: none;
border-color: var(--primary-color);
}
/***** Border Radius Utilities
/***************************************************/
.radius-10 {
border-radius: var(--radius-lg) !important;
}
.radius-22 {
border-radius: 22px !important;
}
/***** Shadow Utilities
/***************************************************/
.shadow-none {
box-shadow: none !important;
}
/***** BUTTON COMPONENTS - Unified & Consistent
/***************************************************/
/* Base Button Styles */
.darkBtn {
padding: 12px 30px;
border-radius: var(--radius-lg);
color: var(--white);
font-size: 15px;
font-weight: 600;
display: inline-block;
border: none;
cursor: pointer;
transition: var(--transition-all);
text-align: center;
background-color: var(--dark-primary);
}
.darkBtn:hover {
background-color: var(--black);
color: var(--white);
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.darkBtn svg {
transition: transform 0.3s ease;
}
.darkBtn:hover svg {
transform: translateX(6px);
}
.eBtn {
padding: 12px 30px;
border-radius: 10px;
color: var(--dark-bg) !important;
font-size: 15px;
font-weight: 600;
display: inline-block;
}
.gradient {
background-image: linear-gradient(to right,
#efe92f 0%,
#ffcb64 51%,
#ffc464 100%) !important;
transition: 0.5s;
background-size: 200% auto;
}
.btn-light {
padding: 12px 30px;
border-radius: var(--radius-lg);
color: var(--dark-primary);
font-size: 14px;
font-weight: 600;
display: inline-block;
border: none;
cursor: pointer;
transition: var(--transition-all);
text-align: center;
background-color: var(--bg-white);
border: 1px solid var(--border-gray);
}
.btn-gradient {
padding: 12px 30px;
border-radius: var(--radius-lg);
color: var(--dark-bg);
font-size: 15px;
font-weight: 600;
display: inline-block;
border: none;
cursor: pointer;
transition: var(--transition-all);
text-align: center;
background: var(--gradient-purple);
}
.btn-gradient svg {
transition: transform 0.3s ease;
}
.btn-light svg {
transition: transform 0.3s ease;
}
.btn-gradient:hover svg {
transform: translateX(6px);
}
.btn-light:hover svg {
transform: translateX(6px);
}
.btn-light:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg-color);
background-color: var(--bg-dark);
color: var(--white);
}
.btn-gradient:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg-color);
}
/* Primary Button - Dark */
.btn-primary{
background-color: var(--primary-color)!important;
color: var(--bg-dark)!important;
}
.btn-primary:hover {
background-color: var(--primary-color)!important;
color: var(--bg-dark)!important;
transform: translateY(-2px);
box-shadow: var(--shadow-lg-color)!important;
}
.btn-primary:active {
transform: translateY(0);
}
/* Secondary Button - Gradient */
.gradient {
background-image: var(--gradient-primary);
transition: var(--transition-slow);
background-size: 200% auto;
color: var(--white);
}
.gradient:hover {
background-position: right center;
color: var(--white);
text-decoration: none;
transform: translateY(-2px);
box-shadow: var(--shadow-xl);
}
/* Purple Button */
/* Outline Purple Button */
/* Secondary Light Button */
/* Small Outline Secondary */
/* Icon Buttons */
.icon-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: transparent;
border: var(--border-width) solid var(--border-dark);
border-radius: var(--radius-lg);
color: var(--text-primary);
cursor: pointer;
transition: var(--transition-all);
padding: 0;
}
.icon-btn:hover {
background: var(--primary-light);
}
.icon-btn svg {
width: 20px;
height: 20px;
}
/* Sidebar Button */
/* Button Sizes */
/* Rounded Button */
/***** Section & Layout
/***************************************************/
.section-padding {
padding-top: 100px;
}
/***** Sub Header Area
/***************************************************/
.sub-header {
padding: 16px 0;
border-bottom: var(--border-width) solid var(--border-light);
}
.sub-header-left ul {
gap: 20px;
flex-wrap: wrap;
}
.sub-header-left ul li a {
font-size: 15px;
font-weight: 400;
color: var(--dark-secondary);
transition: var(--transition-slow);
}
.sub-header-left ul li a:hover {
color: var(--secondary-color);
}
.right-sub ul {
justify-content: flex-end;
gap: 16px;
}
.right-sub ul li a i {
height: 20px;
width: 20px;
font-size: 20px;
}
/******** Header/Navigation Area - Updated
***************************************************************/
:root {
--nav-height: 80px;
}
body {
padding-top: var(--nav-height);
}
@media (max-width: 991px) {
body {
padding-top: 56px;
}
}
body.menu-open,
html.menu-open {
overflow: hidden;
}
body.menu-open {
position: fixed;
width: 100%;
height: 100%;
top: 0;
}
.glass-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: var(--z-fixed);
background: rgba(8, 10, 20, 0.65);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
transition: var(--transition-all);
width: 100%;
}
.nav-container {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--nav-height);
gap: 32px;
max-width: 100%;
}
.nav-logo {
flex-shrink: 0;
display: flex;
align-items: center;
text-decoration: none;
}
.logo-img {
height: 36px;
width: auto;
object-fit: contain;
transition: transform 0.2s ease;
}
.logo-img:hover {
transform: scale(1.02);
}
.nav-menu {
flex: 1;
max-width: 700px;
}
.nav-list {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 4px;
list-style: none;
margin: 0;
padding: 0;
}
.nav-item {
position: relative;
}
.nav-link {
position: relative;
display: flex;
align-items: center;
gap: 4px;
padding: 8px 14px;
color: var(--text-primary);
font-size: 14px;
font-weight: 500;
letter-spacing: -0.01em;
text-decoration: none;
border: none;
border-radius: var(--radius-base);
cursor: pointer;
transition: var(--transition-all);
white-space: nowrap;
background: transparent;
}
/* Elastic yellow underline instead of a hover/active background box —
grows from the center with an overshoot easing for a springy feel. */
.nav-link::after {
content: "";
position: absolute;
left: 50%;
bottom: 2px;
transform: translateX(-50%);
width: 0;
height: 2px;
background: var(--primary-color);
border-radius: 2px;
transition: width 0.45s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.nav-link:hover,
.nav-link.active {
background: transparent;
}
.nav-link:hover::after,
.nav-link.active::after {
width: 70%;
}
.nav-link.active {
color: var(--primary-color);
}
.nav-link svg {
width: 16px;
height: 16px;
flex-shrink: 0;
transition: transform 0.2s ease;
}
.dropdown-panel {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 240px;
border: 0.5px solid rgba(255, 255, 255, 0.8);
border-radius: var(--radius-xl);
box-shadow: 0 0 0 0.5px var(--border-dark), 0 12px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
padding: 8px;
opacity: 0;
visibility: hidden;
transform: translateY(-8px) scale(0.96);
transition: var(--transition-all);
pointer-events: none;
background-color: var(--white);
z-index: 100;
}
.dropdown-content {
display: flex;
flex-direction: column;
gap: 2px;
}
.dropdown-link {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
color: var(--text-primary);
font-size: 14px;
font-weight: 500;
text-decoration: none;
border-radius: 7px;
transition: var(--transition-all);
cursor: pointer;
}
.dropdown-link:hover {
background: rgba(0, 0, 0, 0.05);
color: var(--text-primary);
}
.dropdown-link.active,
.dropdown-link.view-all {
color: var(--purple-primary);
}
.search-form {
position: relative;
}
.search-box {
position: relative;
display: flex;
align-items: center;
}
.search-icon {
position: absolute;
left: 12px;
color: rgba(124, 127, 132, 0.8);
pointer-events: none;
z-index: 1;
}
.search-input {
width: 280px;
height: 40px;
padding: 0 14px 0 40px;
background: transparent;
border: var(--border-width) solid var(--border-dark);
border-radius: var(--radius-lg);
color: var(--text-primary);
font-size: 14px;
font-weight: 400;
transition: var(--transition-all);
outline: none;
}
.search-input::placeholder {
color: rgba(124, 127, 132, 0.8);
}
.search-input:focus {
background: transparent;
border-color: var(--purple-primary);
}
.profile-dropdown {
position: relative;
}
.profile-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 10px 4px 4px;
background: rgba(0, 0, 0, 0.04);
border: none;
border-radius: 24px;
cursor: pointer;
transition: var(--transition-all);
}
.profile-btn:hover {
background: rgba(0, 0, 0, 0.08);
}
.profile-avatar {
width: 32px;
height: 32px;
border-radius: var(--radius-round);
object-fit: cover;
border: 1.5px solid rgba(255, 255, 255, 0.8);
}
/******** CARD COMPONENTS - Unified Styles
***************************************************************/
.course-card,
.Ecard,
.ol-card {
background: var(--white);
border-radius: var(--radius-3xl);
overflow: hidden;
transition: var(--transition-all);
box-shadow: var(--shadow-card);
height: 100%;
border: var(--border-width) solid var(--border-light);
}
.course-card:hover,
.Ecard:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-card-hover);
}
/******** FORM CONTROLS - Consistent Styling
***************************************************************/
.form-control {
width: 100%;
padding: 12px 18px;
border-radius: var(--radius-lg);
border: 1px solid var(--border-light);
font-size: 15px;
color: var(--text-primary);
background-color: var(--white);
transition: var(--transition-base);
}
.form-control:hover {
border-color: var(--primary-color);
}
.form-control:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px var(--primary-light);
color: var(--text-primary) !important;
}
.form-control::placeholder {
color: var(--text-secondary);
}
/******** BADGES - Status Indicators
***************************************************************/
.badge {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: var(--radius-md);
font-size: 12px;
font-weight: 600;
}
/******** BANNER SECTION
***************************************************************/
.color,
.gradient.color {
color: var(--purple-primary);
background: linear-gradient(135deg, #7579FF 0%, #5468bc 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-transform: capitalize;
}
/******** FOOTER - Updated Consistent Styling
***************************************************************/
.footer-area-new {
background: var(--dark-accent);
padding: 70px 0 0;
color: var(--text-secondary);
}
.footer-brand {
padding-right: 40px !important;
}
.footer-logo-wrapper {
margin-bottom: 24px;
}
.footer-logo {
max-width: 150px;
height: auto;
display: block;
}
.footer-description {
font-size: 13.5px;
line-height: 1.8;
color: #7a8399;
margin-bottom: 32px;
font-weight: 400;
}
.footer-social-section {
margin-top: 24px;
}
.footer-social-title {
font-size: 16px;
font-weight: 600;
color: var(--white);
margin-bottom: 16px;
}
.footer-social-links {
display: flex;
gap: 10px;
list-style: none;
padding: 0;
margin: 0;
flex-wrap: wrap;
}
.footer-social-links li a {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.08);
border-radius: var(--radius-md);
color: #a8b3cf;
font-size: 16px;
transition: var(--transition-all);
text-decoration: none;
}
.footer-social-links li a:hover {
background: rgba(117, 121, 255, 0.2);
color: var(--white);
transform: translateY(-2px);
}
.footer-widget-title {
font-size: 18px;
font-weight: 600;
color: var(--white);
margin-bottom: 22px;
letter-spacing: 0.3px;
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 13px;
}
.footer-links li:last-child {
margin-bottom: 0;
}
.footer-links li a {
color: #7a8399;
font-size: 13.5px;
text-decoration: none;
transition: var(--transition-all);
display: inline-block;
line-height: 1.6;
}
.footer-links li a:hover {
color: var(--white);
padding-left: 5px;
}
.footer-bottom-new {
background: #060918;
padding: 24px 0;
margin-top: 65px;
border-top: var(--border-width) solid rgba(255, 255, 255, 0.08);
}
.copyright-text {
color: #6b7589;
font-size: 13.5px;
margin: 0;
letter-spacing: 0.3px;
font-weight: 400;
}
/******** FEATURED COURSES - Consistent Card Design
***************************************************************/
.featured-courses .section-header h1 {
font-size: 42px;
font-weight: 600;
color: var(--dark-primary);
margin-bottom: 15px;
}
.courses-img {
position: relative;
overflow: hidden;
border-radius: 10px;
}
.single-feature:hover .courses-img img {
transform: scale(1.1);
transition: 0.5s;
}
.single-feature {
background-color: var(--bg-white);
padding: 20px;
border-radius: 20px;
display: inline-block;
box-shadow: var(--shadow-lg);
color: var(--text-color);
transition: 0.5s;
}
.courses-img:after {
position: absolute;
content: "";
top: 0;
left: 0;
height: 100%;
width: 100%;
background: url(/assets/frontend/default/image/safe.png) no-repeat center center / cover;
border-radius: 10px;
}
.courses-img img {
height: 221px;
width: 100%;
object-fit: cover;
border-radius: 10px;
transition: 0.5s;
transform: scale(1);
}
.course-card .card-body {
padding: 24px;
}
.course-card .course-title,
.entry-title h3 {
font-size: 18px;
font-weight: 600;
color: var(--dark-primary);
margin-bottom: 0px;
line-height: 1.4;
min-height: 50px;
}
.course-card .course-title a,
.entry-title h3 a {
text-decoration: none;
color: inherit;
transition: color 0.2s;
}
.course-card .course-title a:hover,
.entry-title h3 a:hover {
color: var(--purple-primary);
}
.course-card .rating-section {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
background-color: var(--bg-gray);
padding: 5px 10px;
border-radius: 7px;
}
.course-card .rating-section i {
font-size: 10px;
}
.course-card .card-footer {
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.course-card .price-tag {
font-family: var(--font-primary);
font-size: 26px;
font-weight: 600;
color: var(--success);
}
.course-card .btn-enroll {
background: var(--gradient-purple);
color: var(--bg-dark);
padding: 10px 24px;
border-radius: var(--radius-base);
border: none;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: var(--transition-all);
box-shadow: 0 2px 8px rgba(241, 224, 99, 0.3);
}
.course-card .btn-enroll:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg-color);
}
/******** WEBINAR SECTION
***************************************************************/
/******** STATISTICS SECTION
***************************************************************/
.stats-title {
font-size: 42px;
font-weight: 600;
color: var(--dark-primary);
margin-bottom: 50px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.05);
}
/******** TESTIMONIALS SECTION
***************************************************************/
.testimonials-wrapper {
background-color: var(--white);
position: relative;
overflow: hidden;
padding: 60px 0;
}
.testimonials-wrapper .title {
font-size: clamp(24px, 5vw, 42px);
font-weight: 600;
color: var(--dark-primary);
font-family: var(--font-primary);
line-height: 1.3;
margin-bottom: 0;
}
.small-testimonial {
background: var(--white);
padding: var(--spacing-md);
border: var(--border-width) solid #e6e8ff;
border-radius: var(--radius-xl);
transition: var(--transition-all);
flex: 1;
display: flex;
flex-direction: column;
}
.small-testimonial:hover {
transform: translateY(-3px);
box-shadow: 0 4px 15px rgba(255, 206, 83, 0.15) !important;
border-color: var(--purple-primary);
}
.featured-card-wrapper {
background: var(--white);
border: var(--border-color) !important;
border-radius: var(--radius-3xl);
padding: var(--spacing-lg);
box-shadow: 0 8px 30px rgba(88, 101, 242, 0.15);
width: 100%;
display: flex;
flex-direction: column;
}
/******** PRICING SECTION
***************************************************************/
.pricing-section {
background-color: var(--white);
}
.pricing-main-title {
font-size: 42px;
font-weight: 600;
color: var(--dark-primary);
margin-bottom: 0;
line-height: 1.3;
}
.pricing-card {
background: var(--white);
border: var(--border-width) solid var(--border-lighter);
border-radius: var(--radius-3xl);
padding: 35px 30px;
height: 100%;
display: flex;
flex-direction: column;
position: relative;
transition: var(--transition-all);
}
.pricing-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.pricing-card-popular {
border: 2px solid var(--purple-primary);
background: linear-gradient(135deg, rgba(124, 58, 237, 0.05) 0%, rgba(168, 85, 247, 0.05) 100%);
}
.pricing-btn {
display: block;
width: 100%;
padding: 14px 28px;
background: transparent;
border: 2px solid var(--dark-primary);
color: var(--dark-primary);
text-align: center;
border-radius: var(--radius-lg);
font-size: 16px;
font-weight: 600;
text-decoration: none;
transition: var(--transition-all);
margin-bottom: 25px;
}
.pricing-btn:hover {
background: var(--dark-primary);
color: var(--white);
}
/******** FAQ SECTION
***************************************************************/
.faq-accordion .accordion-item {
border: none;
border-bottom: var(--border-width) solid var(--border-gray);
background: transparent;
margin-bottom: 0;
}
.faq-accordion .accordion-button {
background: transparent;
border: none;
box-shadow: none;
padding: 22px 0;
font-size: 17px;
font-weight: 600;
color: var(--dark-primary);
line-height: 1.5;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
}
.faq-accordion .accordion-button:not(.collapsed) {
background: transparent;
color: var(--dark-primary);
box-shadow: none;
}
.faq-accordion .accordion-button:focus {
border: none;
box-shadow: none;
outline: none;
}
/******** CTA SECTION
***************************************************************/
/******** BORDER UTILITIES - Consistent Borders
***************************************************************/
.border {
border: var(--border-width) var(--border-style) var(--border-color) !important;
}
.border-top {
border-top: var(--border-width) var(--border-style) var(--border-color) !important;
}
.border-bottom {
border-bottom: var(--border-width) var(--border-style) var(--border-color) !important;
}
/******** TRANSITION UTILITIES
***************************************************************/
.transition-all {
transition: var(--transition-all);
}
/******** DISPLAY & LAYOUT UTILITIES
***************************************************************/
.flex {
display: flex;
}
.inline-flex {
display: inline-flex;
}
.flex-column {
flex-direction: column;
}
.items-center {
align-items: center;
}
.gap-1 {
gap: var(--spacing-xs);
}
.gap-2 {
gap: var(--spacing-sm);
}
.gap-3 {
gap: var(--spacing-md);
}
.gap-4 {
gap: var(--spacing-lg);
}
.gap-5 {
gap: var(--spacing-xl);
}
/******** HOVER EFFECTS
***************************************************************/
/******** End of home Styles
***************************************************************/
/******** Sub Header Area Start
***************************************************************/
.sub-header {
padding: 16px 0;
border-bottom: 1px solid #edf0f7;
}
.sub-header-left ul {
gap: 20px;
flex-wrap: wrap;
}
.sub-header-left ul li a {
font-size: 15px;
font-weight: 400;
color: var(--color-2);
transition: 0.5s;
}
.sub-header-left ul li a:hover {
color: #c664ff;
}
.right-sub ul {
justify-content: flex-end;
gap: 16px;
}
.right-sub ul li a i {
height: 20px;
width: 20px;
font-size: 20px;
}
/******** Header Area Start
*/
:root {
--nav-height: 80px;
--primary-color: #FFDA1C;
--text-primary: rgba(26, 28, 31, 0.92);
--text-secondary: rgba(87, 87, 87, 0.88);
--glass-bg: rgba(255, 255, 255, 0.72);
--glass-border: rgba(0, 0, 0, 0.04);
--hover-bg: rgba(0, 0, 0, 0.04);
--transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Prevent horizontal scroll */
html,
body {
max-width: 100%;
overflow-x: hidden;
position: relative;
}
body {
padding-top: var(--nav-height) !important;
}
@media (max-width: 991px) {
body {
padding-top: 56px;
}
}
body.menu-open,
html.menu-open {
overflow: hidden;
}
body.menu-open {
position: fixed;
width: 100%;
height: 100%;
top: 0;
}
.glass-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: rgba(8, 10, 20, 0.65);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
transition: var(--transition);
width: 100%;
}
/* Nav is always dark (see .glass-nav background above) — text/icons stay
light regardless of scroll position, no swap on .scrolled anymore. */
.glass-nav .nav-link {
color: rgba(255, 255, 255, 0.92);
}
.glass-nav .nav-link:hover {
background: transparent;
color: #ffffff;
}
.glass-nav .nav-link.active {
color: var(--primary-color);
}
.glass-nav .icon-btn {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.22);
color: #ffffff;
}
.glass-nav .icon-btn:hover {
background: rgba(255, 255, 255, 0.18);
}
.glass-nav .search-icon {
color: rgba(255, 255, 255, 0.75);
}
.glass-nav .search-input {
background: transparent;
border-color: rgba(255, 255, 255, 0.22);
color: #ffffff;
}
.glass-nav .search-input::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.glass-nav .search-input:focus {
background: transparent;
color: #ffffff;
}
.glass-nav .profile-btn {
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
}
.glass-nav .profile-btn:hover {
background: rgba(255, 255, 255, 0.2);
}
.glass-nav .profile-avatar {
border-color: rgba(255, 255, 255, 0.9);
}
.nav-container {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--nav-height);
gap: 32px;
max-width: 100%;
}
.nav-logo {
flex-shrink: 0;
display: flex;
align-items: center;
text-decoration: none;
}
.logo-img {
height: 36px;
width: auto;
object-fit: contain;
transition: transform 0.2s ease;
}
.logo-img:hover {
transform: scale(1.02);
}
.nav-menu {
flex: 1;
max-width: 700px;
}
.nav-list {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 4px;
list-style: none;
margin: 0;
padding: 0;
}
.nav-item {
position: relative;
}
.nav-link {
display: flex;
align-items: center;
gap: 4px;
padding: 8px 14px;
color: var(--text-primary);
font-size: 14px;
font-weight: 500;
letter-spacing: -0.01em;
text-decoration: none;
border: none;
border-radius: 8px;
cursor: pointer;
transition: var(--transition);
white-space: nowrap;
background: transparent;
}
.nav-link:hover {
background: transparent;
color: var(--text-primary);
}
.nav-link.active {
background: transparent;
color: var(--primary-color);
}
.nav-link svg {
width: 16px;
height: 16px;
flex-shrink: 0;
transition: transform 0.2s ease;
}
.dropdown-panel {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 240px;
border: 0.5px solid rgba(255, 255, 255, 0.8);
border-radius: 12px;
box-shadow:
0 0 0 0.5px rgba(0, 0, 0, 0.04),
0 12px 40px rgba(0, 0, 0, 0.12),
0 2px 8px rgba(0, 0, 0, 0.06);
padding: 8px;
opacity: 0;
visibility: hidden;
transform: translateY(-8px) scale(0.96);
transition: var(--transition);
pointer-events: none;
background-color: white;
z-index: 100;
}
.dropdown-content {
display: flex;
flex-direction: column;
gap: 2px;
}
.dropdown-item-wrap {
position: relative;
}
.dropdown-link {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
color: var(--text-primary);
font-size: 14px;
font-weight: 500;
letter-spacing: -0.01em;
text-decoration: none;
border-radius: 7px;
transition: var(--transition);
cursor: pointer;
}
.dropdown-link:hover {
background: rgba(0, 0, 0, 0.05);
color: var(--text-primary);
}
.dropdown-link.active,
.dropdown-link.view-all {
color: var(--primary-color);
}
.dropdown-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
font-size: 16px;
}
.dropdown-item-wrap.active .arrow-right {
transform: rotate(90deg);
}
.dropdown-item-wrap.active .sub-dropdown {
opacity: 1;
visibility: visible;
transform: translateX(0);
pointer-events: auto;
}
.nav-actions {
display: flex;
align-items: center;
gap: 12px;
}
.search-form {
position: relative;
}
.search-box {
position: relative;
display: flex;
align-items: center;
}
.search-box:focus-within {
outline: none;
box-shadow: none;
}
.search-box input {
outline: none;
box-shadow: none;
}
.search-icon {
position: absolute;
left: 12px;
color: rgba(124, 127, 132, 0.8);
pointer-events: none;
z-index: 1;
}
.search-input {
width: 280px;
height: 40px;
padding: 0 14px 0 40px;
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 10px;
color: var(--text-primary);
font-size: 14px;
font-weight: 400;
letter-spacing: -0.01em;
transition: var(--transition);
outline: none;
}
.search-input::placeholder {
color: rgba(124, 127, 132, 0.8);
}
.search-input:focus {
background: transparent;
border-color: var(--primary-color);
}
/* Backstop for the browser's own autofill/suggestion highlight, which
ignores normal `background` and can't be stopped by autocomplete="off"
alone in every browser. */
.search-input:-webkit-autofill,
.search-input:-webkit-autofill:hover,
.search-input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px transparent inset;
-webkit-text-fill-color: inherit;
transition: background-color 9999s ease-in-out 0s;
}
.profile-dropdown {
position: relative;
}
.profile-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 10px 4px 4px;
background: rgba(0, 0, 0, 0.04);
border: none;
border-radius: 24px;
cursor: pointer;
transition: var(--transition);
}
.profile-btn:hover {
background: rgba(0, 0, 0, 0.08);
}
.profile-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
border: 1.5px solid rgba(255, 255, 255, 0.8);
}
.profile-avatar-lg {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(117, 121, 255, 0.2);
}
.profile-menu {
min-width: 260px;
margin-top: 8px !important;
padding: 12px !important;
background: rgb(255, 255, 255) !important;
border: 0.5px solid rgba(255, 255, 255, 0.8) !important;
border-radius: 14px !important;
box-shadow:
0 0 0 0.5px rgba(0, 0, 0, 0.04),
0 12px 40px rgba(0, 0, 0, 0.12),
0 2px 8px rgba(0, 0, 0, 0.06) !important;
}
.profile-header {
display: flex;
align-items: center;
gap: 12px;
padding: 6px;
}
.profile-name {
color: var(--text-primary);
font-size: 15px;
font-weight: 600;
letter-spacing: -0.02em;
margin: 0 0 2px 0;
}
.profile-role {
color: var(--text-secondary);
font-size: 13px;
font-weight: 500;
letter-spacing: -0.01em;
margin: 0;
}
.profile-divider {
height: 0.5px;
background: rgba(0, 0, 0, 0.08);
margin: 10px 0;
}
.profile-links {
display: flex;
flex-direction: column;
gap: 2px;
}
.profile-link {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
color: var(--text-primary);
font-size: 14px;
font-weight: 500;
letter-spacing: -0.01em;
text-decoration: none;
border-radius: 8px;
transition: var(--transition);
}
.profile-link:hover,
.profile-link.active {
background: var(--primary-color);
color: #000;
}
.profile-link svg {
flex-shrink: 0;
}
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
padding: 0 20px;
background: var(--primary-color);
color: #ffffff;
font-size: 14px;
font-weight: 600;
letter-spacing: -0.01em;
text-decoration: none;
border: none;
border-radius: 10px;
cursor: pointer;
transition: var(--transition);
box-shadow: 0 1px 3px rgba(117, 121, 255, 0.2);
}
.btn-primary:hover {
background: #6569e8;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(117, 121, 255, 0.3);
color: #ffffff;
}
.icon-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 10px;
color: var(--text-primary);
cursor: pointer;
transition: var(--transition);
}
.icon-btn:hover {
background: var(--hover-bg);
}
.icon-btn svg {
width: 20px;
height: 20px;
}
.mobile-search-overlay {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
padding: 16px 0;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: var(--transition);
pointer-events: none;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
z-index: 999;
}
.mobile-search-overlay.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.mobile-search-form .search-box {
width: 100%;
}
.mobile-search-form .search-input {
width: 100%;
padding-right: 90px;
height: 44px;
}
.search-submit {
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
height: 36px;
padding: 0 18px;
background: var(--primary-color);
color: #ffffff;
font-size: 13px;
font-weight: 600;
letter-spacing: -0.01em;
border: none;
border-radius: 8px;
cursor: pointer;
transition: var(--transition);
}
.search-submit:hover {
background: #6569e8;
}
/* Mobile Menu - Fixed Implementation
Dark theme to match .glass-nav (rgb(8,10,20)) instead of the previous
plain white panel. That old white background also silently broke two
things: .glass-nav .icon-btn already forces its color to white (see
the glass-nav rules above) for the desktop-dark-nav icons, so the
menu-close (X) button here was rendering white-on-white; and the
header logo is the "dark_logo" variant (light-colored, meant for a
dark background), so it was low-contrast against white too. Both are
simply correct now that the panel itself is dark. */
.mobile-menu {
position: fixed;
top: 0;
right: 0;
width: 320px;
max-width: 85vw;
height: 100vh;
height: 100dvh;
background: rgb(8, 10, 20);
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 10000;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
.mobile-menu.active {
transform: translateX(0);
}
/* Mobile Menu Overlay/Backdrop — was var(--bg-gray) (#edf0f7) with
opacity going to 1, i.e. an opaque pale-grey wash over the rest of
the page instead of a dim scrim. Switched to a translucent black
scrim, which is what this rule was actually meant to do. */
.mobile-menu::before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 320px;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
pointer-events: none;
z-index: -1;
}
.mobile-menu.active::before {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.mobile-menu-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
background: rgba(8, 10, 20, 0.95);
position: sticky;
top: 0;
z-index: 10;
}
.mobile-menu-header .logo-img {
height: 32px;
}
.mobile-menu-body {
padding: 16px 20px 32px;
}
.mobile-menu-item {
margin-bottom: 4px;
}
.mobile-menu-link {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 12px 16px;
color: rgba(255, 255, 255, 0.85);
font-size: 15px;
font-weight: 500;
letter-spacing: -0.01em;
text-decoration: none;
background: transparent;
border: none;
border-radius: 10px;
cursor: pointer;
transition: var(--transition);
text-align: left;
}
.mobile-menu-link:hover {
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
}
.mobile-menu-link.active {
background: rgba(255, 255, 255, 0.08);
color: var(--primary-color);
}
.mobile-menu-link svg {
width: 16px;
height: 16px;
flex-shrink: 0;
transition: transform 0.2s ease;
}
.mobile-menu-item.active .accordion-toggle svg {
transform: rotate(-180deg);
}
.desktop-only {
display: flex;
}
.mobile-only {
display: none;
}
/* Responsive Media Queries */
@media (max-width: 991px) {
:root {
--nav-height: 56px;
}
.desktop-only {
display: none !important;
}
.mobile-only {
display: flex !important;
}
.nav-container {
gap: 12px;
}
.logo-img {
height: 32px;
}
.nav-actions {
gap: 8px;
}
.icon-btn {
width: 36px;
height: 36px;
}
}
@media (max-width: 575px) {
.nav-container {
gap: 8px;
padding: 0 16px;
}
.logo-img {
height: 28px;
}
.btn-primary {
height: 36px;
padding: 0 16px;
font-size: 13px;
}
.icon-btn {
width: 36px;
height: 36px;
border: none;
}
.mobile-menu {
width: 100%;
max-width: 100%;
}
.mobile-menu::before {
right: 0;
}
}
@media (max-width: 375px) {
.logo-img {
height: 26px;
}
.btn-primary {
padding: 0 12px;
font-size: 12px;
}
}
/* Accessibility */
*:focus-visible {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
/* Smooth scrolling */
html {
scroll-behavior: smooth;
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInRight {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
.mobile-menu.active {
user-select: none;
-webkit-user-select: none;
}
.mobile-menu.active * {
user-select: text;
-webkit-user-select: text;
}
@supports (-webkit-touch-callout: none) {
.mobile-menu {
height: -webkit-fill-available;
}
}
/***** Banner *****/
.color,
.gradient.color {
color: var(--color-1, #7579FF);
background: linear-gradient(135deg, #7579FF 0%, #5468bc 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-transform: capitalize;
}
.eBtn:hover,
.eBtn.gradient:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgb(255, 242, 190);
color: #fff !important;
}
.eBtn svg {
transition: transform 0.3s ease;
}
.eBtn:hover svg {
transform: translateX(6px);
}
.position-relative {
position: relative;
}
@keyframes loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* Large Devices (991px and below) */
/* Medium Devices (767px and below) */
@media (max-width: 767px) {
.eBtn,
.eBtn.gradient {
padding: 12px 28px;
font-size: 0.95rem;
}
}
/* Small Devices (575px and below) */
/* Extra Small Devices (375px and below) */
@media (max-width: 375px) {
.eBtn,
.eBtn.gradient {
padding: 10px 24px;
font-size: 0.85rem;
}
}
/* Reduced Motion for Accessibility */
@media (prefers-reduced-motion: reduce) {
.eBtn,
.eBtn.gradient,
.eBtn svg {
transition: none;
}
.eBtn:hover,
.eBtn.gradient:hover {
transform: none;
}
.eBtn:hover svg {
transform: none;
}
@keyframes loading {
0%,
100% {
background-position: 0% 0;
}
}
}
/******** Banner Area End
***************************************************************/
/******** performance Area Start
***************************************************************/
/******** Performance Area End
***************************************************************/
/******** Category Area Start
***************************************************************/
.title-head {
font-size: 15px;
display: inline-block;
margin-bottom: 16px;
font-weight: 500;
color: var(--color-1);
}
.title {
display: block !important;
font-size: 40px;
font-weight: 500;
color: var(--color-2);
font-family: var(--font-primary);
}
.single-category {
text-align: center;
padding: 0px;
border-radius: 16px;
background-color: #fff;
box-shadow: 0px 2px 12px -4px #d9d9d9;
transition: 0.5s;
position: relative;
width: 100%;
display: flex;
align-items: center;
}
.single-category:hover {
background-color: var(--color-2);
color: #fff;
}
.single-category:hover p,
.single-category:hover h4 {
color: #fff;
}
.single-category .single-category-logo {
width: 80px;
height: 80px;
object-fit: cover;
margin: 10px 10px 10px 10px;
}
.single-category .single-category-name {
padding: 25px 0px;
text-align: left;
}
.single-category .single-category-logo img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
}
.single-category h4 {
font-family: var(--font-primary);
font-size: 20px;
font-weight: 600;
color: var(--color-2);
transition: 0.5s;
margin-bottom: 6px;
}
.single-category p {
font-family: var(--font-primary);
font-weight: 500;
font-size: 13px;
color: var(--text-color);
transition: 0.5s;
}
/******** Category Area End
***************************************************************/
/******** Featured Courses Section - Updated Design
***************************************************************/
.featured-courses .section-header {
margin-bottom: 50px;
}
.featured-courses .section-header h1 {
font-size: 42px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 15px;
}
/* Course Card */
.course-card {
background: white;
border-radius: 20px;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
height: 100%;
border: none;
display: block;
}
.course-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}
/* Card Banner - fixed 16:9 (YouTube-thumbnail-style) box, inset with its
own rounded corners rather than bleeding edge-to-edge with the card.
aspect-ratio (not a fixed px height) so it holds exactly 16:9 at every
card width the grid renders at, not just one specific breakpoint. */
.course-card .card-banner {
display: block;
position: relative;
overflow: hidden;
padding: 14px 14px 0;
}
.course-card .card-banner img,
.course-card .card-banner-placeholder {
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
object-fit: cover;
border-radius: 14px;
display: block;
}
.course-card .card-banner-placeholder {
background: #eef0f3;
}
.course-card .course-category {
display: inline-block;
background: #f0edff;
color: #6366f1;
font-size: 12px;
font-weight: 600;
padding: 4px 12px;
border-radius: 20px;
margin-bottom: 10px;
}
/* Course Title */
.course-card .course-title,
.entry-title h3 {
font-size: 18px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 0px;
line-height: 1.4;
min-height: 50px;
}
.course-card .course-title a,
.entry-title h3 a {
text-decoration: none;
color: inherit;
transition: color 0.2s;
}
.course-card .course-title a:hover,
.entry-title h3 a:hover {
color: #6366f1;
}
/* Rating Section */
.course-card .rating-section {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
background-color: #eeeeee;
padding: 5px 10px;
border-radius: 7px;
}
.course-card .rating-section i {
font-size: 10px;
}
.course-card .rating-section .rating-text {
color: #6b7280;
font-size: 14px;
}
.course-card .enrollment-section {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
background-color: #eeeeee;
padding: 5px 10px;
border-radius: 7px;
color: #171717;
font-size: 12px;
}
/* Course Features List */
.course-card .course-features {
list-style: none;
padding: 0;
margin: 0 0 15px 0;
}
.course-card .course-features li {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 8px 0;
color: #4b5563;
font-size: 14px;
line-height: 1.5;
}
.course-card .course-features li i {
color: #6366f1;
margin-top: 3px;
font-size: 16px;
flex-shrink: 0;
}
/* The "+ N more" line when a course has more than 4 outcome points — no
checkmark icon (it isn't itself a point), set apart from the real
bullets above it. */
.course-card .course-features-more {
padding: 8px 0 0;
color: #6366f1;
font-size: 14px;
font-weight: 600;
}
/* Show More Button */
.course-card .show-more-btn {
color: #ffc413;
font-size: 14px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 8px 0;
text-decoration: none;
transition: color 0.2s;
}
.course-card .show-more-btn:hover {
color: #4f46e5;
}
/* Enrollment Count */
/* Card Footer */
.course-card .card-footer {
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
/* Price Tag
font-weight 700 + font-family pinned explicitly, removing any ambiguity
about what it inherits at this much larger 26px size. (Historical note:
this was originally forced to 700 because Bornomala, the Bangla font
used before switching to Anek Bangla, only shipped 400/700 — a 600
request triggered a synthetic-weight substitution that looked like a
different typeface. Anek Bangla is a variable font with real
intermediate weights, so that specific constraint no longer applies,
but 700 still reads correctly here.) */
.course-card .price-tag {
font-family: var(--font-primary);
font-size: 26px;
font-weight: 600;
color: #059669;
margin-top: 6px;
}
.course-card .price-tag .old-price {
font-size: 15px;
font-weight: 500;
color: #9ca3af;
text-decoration: line-through;
margin-right: 6px;
}
.course-card .price-tag.free {
color: #059669;
}
/* Action Buttons */
.course-card .action-buttons {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.course-card .btn-details {
background: #f3f4f6;
color: #374151;
padding: 10px 20px;
border-radius: 8px;
border: none;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
text-decoration: none;
}
.course-card .btn-details:hover {
background: #e5e7eb;
}
.cText {
position: absolute;
bottom: 10px;
left: 12px;
gap: 7px;
z-index: 999;
align-items: center;
flex-wrap: wrap;
}
.cText h4 {
font-size: 24px;
font-weight: 600;
color: var(--bg-white);
}
.cText del {
font-size: 15px;
font-weight: 500;
color: var(--border-gray);
}
.entry-details ul {
display: flex;
gap: 30px;
margin-bottom: 20px;
}
.entry-details .description {
line-height: 27px;
margin-bottom: 12px;
font-size: 13px;
font-weight: 500;
color: #4b5563;
}
.creator {
display: flex;
align-items: center;
}
.creator img {
height: 30px;
width: 30px;
border-radius: 50%;
object-fit: cover;
margin-right: 12px;
}
.creator p span {
color: #1a1a1a;
font-weight: 500;
}
.learn-creator {
display: flex;
justify-content: space-between;
align-items: center;
}
.learn-creator .learn-more {
color: #000015;
font-weight: 500;
margin-right: 7px;
transition: 0.3s;
}
.single-feature:hover .learn-creator .learn-more {
color: #e5ab46;
}
.heart {
display: inline-block;
height: 30px;
width: 30px;
border-radius: 50%;
line-height: 30px;
text-align: center;
background: #ebedf2;
transition: 0.3s;
}
.heart:hover {
background-color: #6366f1;
color: white;
}
/* Responsive Design */
@media (max-width: 768px) {
.featured-courses .section-header h1 {
font-size: 32px;
}
.course-card .action-buttons {
flex-direction: column;
width: 100%;
}
.course-card .btn-details,
.course-card .btn-enroll {
width: 100%;
text-align: center;
}
.course-card .card-footer {
flex-direction: column;
gap: 15px;
align-items: stretch;
}
.course-card .price-tag {
text-align: center;
}
}
/******** Feature Area End
***************************************************************/
/******** Webinar area start
***************************************************************/
/* Outline (remaining cards) */
/* ─── View All Button (bottom center) ─── */
/* ─── Responsive ─── */
/******** Webinar area end
***************************************************************/
/******** live course area start
***************************************************************/
.live-course-features-section {
background-color: var(--bg-white);
}
.lcf-left-block {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 40px 34px 40px 10px;
}
.lcf-main-title {
font-size: 4.5rem;
font-weight: 600;
color: #141824;
line-height: 1.18;
margin-bottom: 20px;
}
.lcf-main-desc {
font-size: 1.5rem;
color: #6b7280;
line-height: 1.65;
margin-bottom: 0;
max-width: 440px;
}
.lcf-card {
position: relative;
background: #fffef5;
border-radius: 20px;
padding: 2px;
height: 100%;
overflow: hidden;
}
.lcf-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: 20px;
background: radial-gradient(circle 180px at var(--mouse-x, 50%) var(--mouse-y, 50%),
#ffef63 0%,
#fae48b 18%,
transparent 60%);
opacity: 0;
transition: opacity 0.35s ease;
z-index: 0;
}
.lcf-card:hover::before {
opacity: 1;
}
.lcf-card-inner {
position: relative;
z-index: 1;
background: #fffef9;
border-radius: 18px;
padding: 34px 30px 30px;
height: 100%;
display: flex;
flex-direction: column;
}
.lcf-icon-box {
width: 58px;
height: 58px;
min-width: 58px;
background: #ffdf11;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
}
.lcf-card-title {
font-size: 2.2rem;
font-weight: 600;
color: #141824;
line-height: 1.35;
margin-bottom: 13px;
}
.lcf-card-desc {
font-size: 1.4rem;
color: #6b7280;
line-height: 1.65;
margin-bottom: 0;
}
/* ─── Responsive ─── */
@media (max-width: 991px) {
.lcf-main-title {
font-size: 3rem;
}
.lcf-main-desc {
font-size: 1rem;
}
.lcf-left-block {
padding: 30px 20px 30px 10px;
}
}
@media (max-width: 575px) {
.live-course-features-section {
padding: 50px 0 60px;
}
.lcf-main-desc {
font-size: 1.5rem;
}
.lcf-main-title {
font-size: 3.2rem;
}
.lcf-card-inner {
padding: 26px 22px 24px;
}
.lcf-icon-box {
width: 50px;
height: 50px;
}
}
/******** Live Course Feature Area end
***************************************************************/
/******** stats Area start
***************************************************************/
.stats-header {
position: relative;
z-index: 2;
}
.stats-title {
font-size: 42px;
font-weight: 600;
color: #1a1a2e;
margin-bottom: 50px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.05);
}
@keyframes pulse {
0%,
100% {
transform: scale(1);
opacity: 0.5;
}
50% {
transform: scale(1.1);
opacity: 0.8;
}
}
/* Responsive Design */
@media (max-width: 992px) {
.stats-title {
font-size: 32px;
}
}
@media (max-width: 768px) {
.stats-title {
font-size: 28px;
}
}
@media (max-width: 576px) {
.stats-title {
font-size: 24px;
}
}
/******** stats Area end
***************************************************************/
/******** teams Area start
***************************************************************/
.xt-team-section {
padding: 80px 0;
}
/* Head */
.xt-team-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 40px;
flex-wrap: wrap;
gap: 16px;
}
.xt-team-title {
font-size: 42px;
font-weight: 600;
color: var(--dark-primary);
margin: 0;
}
.xt-team-viewall {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
}
/* Swiper container */
.xt-swiper {
width: 100%;
padding-bottom: 48px !important;
}
/* Pagination */
.xt-swiper-pagination {
bottom: 0 !important;
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
margin-top: 24px !important;
}
.xt-swiper-pagination .swiper-pagination-bullet {
width: 8px;
height: 8px;
background: #dbdbd1;
opacity: 1;
border-radius: 50%;
transition: background 0.3s, width 0.3s, border-radius 0.3s;
margin: 0 !important;
}
.xt-swiper-pagination .swiper-pagination-bullet-active {
background: #ffd000;
width: 28px;
border-radius: 4px;
}
/* Card */
.xt-card {
border-radius: 28px;
border: 1px solid var(--border-color, #e5e7eb);
background: #fff;
cursor: pointer;
transition: box-shadow 0.3s ease;
}
/* Image container — aspect ratio box */
.xt-card-img {
position: relative;
width: 100%;
padding-bottom: 125%;
overflow: hidden;
border-radius: 28px;
background: #f3f4f6;
}
.xt-card-img img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* Only transform on hover — NOT on scroll enter */
transition: transform 0.4s ease;
will-change: transform;
}
.xt-card:hover .xt-card-img img {
transform: scale(1.06);
}
/* Overlay — hidden by default, show only on hover */
.xt-card-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 40px 18px 18px;
background: linear-gradient(to bottom,
transparent 0%,
rgba(15, 15, 30, 0.82) 100%);
border-radius: 0 0 28px 28px;
opacity: 0;
transition: opacity 0.3s ease;
}
.xt-card:hover .xt-card-overlay {
opacity: 1;
}
.xt-card-name {
font-size: 18px;
font-weight: 600;
color: #ffffff;
margin: 0 0 4px;
line-height: 1.3;
}
.xt-card-role {
font-size: 13px;
color: rgba(255, 255, 255, 0.88);
margin: 0;
line-height: 1.4;
}
/* Promo video play button — always visible (not gated behind the
name/role overlay's hover-only opacity), so it's reachable on touch
devices where :hover never reliably triggers. */
.xt-card-play {
position: absolute;
top: 14px;
right: 14px;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(15, 15, 30, 0.55);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
padding-left: 2px;
backdrop-filter: blur(2px);
transition: background 0.2s ease, transform 0.2s ease;
z-index: 2;
}
.xt-card-play:hover {
background: var(--color-1);
color: #192335;
transform: scale(1.08);
}
/* Responsive */
@media (max-width: 767px) {
.xt-team-section {
padding: 50px 0;
}
.xt-team-title {
font-size: 26px;
}
.xt-team-head {
flex-direction: column;
align-items: flex-start;
}
.xt-card-img {
padding-bottom: 135%;
}
.xt-card-name {
font-size: 16px;
}
}
@media (max-width: 575px) {
.xt-team-title {
font-size: 22px;
}
}
/******** teams Area end
***************************************************************/
/******** support Area start
***************************************************************/
.support-section .row {
display: flex;
}
.support-section .col-lg-7,
.support-section .col-lg-5 {
display: flex !important;
}
.support-card-large {
border-radius: 30px;
padding: 0;
margin: 0;
overflow: hidden;
width: 100%;
flex: 1;
background: url("/assets/frontend/default/images/support-model.webp");
background-size: cover;
background-position: right center;
background-repeat: no-repeat;
display: flex;
}
/* Photo is dark — light overlay swapped for light text/button instead. */
.support-card-large .support-title {
color: #ffffff;
}
.support-card-large .support-description {
color: rgba(255, 255, 255, 0.85);
}
.support-card-large .darkBtn {
background-color: #ffffff;
color: #111111;
}
.support-card-large .darkBtn:hover {
background-color: #f0f0f0;
color: #111111;
}
.support-card-content {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
padding: 0;
margin: 0;
z-index: 2;
}
.support-text {
position: relative;
z-index: 3;
width: 60%;
padding: 28px 32px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: left;
}
.support-title {
font-size: 32px;
font-weight: 600;
color: #202020;
margin-bottom: 12px;
line-height: 1.3;
}
.support-description {
font-size: 16px;
color: rgba(59, 59, 59, 0.95);
margin-bottom: 18px;
line-height: 1.6;
}
.support-availability {
margin-bottom: 22px;
}
.availability-badge {
position: relative;
display: inline-block;
padding: 6px 10px 6px 14px;
}
.availability-badge::before {
content: "";
position: absolute;
left: 4px;
width: 6px;
height: 70%;
background: #ff8800;
border-radius: 10px;
}
.availability-text {
color: #8563ff;
font-size: 18px;
font-weight: 600;
padding-left: 8px;
}
/* Small Support Cards */
.support-cards-small {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
flex: 1;
}
.support-card-small {
border-radius: 24px;
padding: 24px 26px;
flex: 1;
display: flex;
background-size: cover;
background-position: right center;
background-repeat: no-repeat;
}
.youtube {
background-image: url("/assets/frontend/default/images/youtube-channel.webp");
}
.facebook {
background-image: url("/assets/frontend/default/images/facebook-group.webp");
}
.support-card-small-content {
position: relative;
z-index: 2;
display: flex;
align-items: center;
width: 100%;
}
.text-content {
display: flex;
flex-direction: column;
text-align: left;
}
.support-title-small {
font-size: 24px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 12px;
line-height: 1.3;
}
.support-btn-small {
display: inline-flex;
align-items: center;
background: var(--bg-dark);
backdrop-filter: blur(10px);
color: var(--bg-white);
padding: 12px 24px;
border-radius: 10px;
text-decoration: none;
font-weight: 600;
font-size: 15px;
transition: all 0.3s ease;
width: fit-content;
}
.support-btn-small:hover {
transform: translateY(-2px);
}
/* Responsive Design */
@media (max-width: 991px) {
.support-card-large {
min-height: 380px;
}
.support-text {
width: 60%;
padding: 26px 22px;
}
.support-title {
font-size: 28px;
}
.support-cards-small {
margin-top: 20px;
}
}
@media (max-width: 767px) {
.support-section {
padding: 35px 0;
}
.support-section .col-lg-7,
.support-section .col-lg-5 {
display: block !important;
}
.support-card-large {
min-height: auto;
/* The model sits lower/more compact in this crop so she stays
fully visible once the card's aspect ratio shortens on mobile. */
background-image: url("/assets/frontend/default/images/support-model-mobile.webp");
}
.support-card-content {
flex-direction: column;
align-items: flex-start;
}
.support-text {
width: 100%;
padding: 22px 18px;
z-index: 3;
}
.support-title {
font-size: 26px;
margin-bottom: 12px;
}
.support-description {
font-size: 15px;
margin-bottom: 15px;
}
.availability-text {
font-size: 16px;
}
.support-availability {
margin-bottom: 20px;
}
.support-card-small {
padding: 22px 20px;
min-height: 140px;
}
.support-title-small {
font-size: 20px;
}
.support-btn-small {
padding: 10px 24px;
font-size: 14px;
}
}
@media (max-width: 575px) {
.support-card-large {
min-height: auto;
}
.support-text {
padding: 20px 18px;
}
.support-title {
font-size: 22px;
margin-bottom: 10px;
}
.support-description {
font-size: 14px;
margin-bottom: 12px;
}
.support-availability {
margin-bottom: 18px;
}
.support-title-small {
font-size: 18px;
}
.support-card-small {
min-height: 130px;
}
}
@media (max-width: 375px) {
.support-card-large {
min-height: auto;
}
.support-text {
padding: 18px 15px;
}
.support-title {
font-size: 20px;
}
.support-description {
font-size: 13px;
}
}
/******** support Area end
***************************************************************/
/******** faq Area start
***************************************************************/
/* Left Side - Accordion Styles */
.faq-accordion-wrapper {
padding-right: 30px;
}
.faq-accordion .accordion-item {
border: none;
border-bottom: 1px solid #d9d9d9;
background: transparent;
margin-bottom: 0;
}
.faq-accordion .accordion-item:last-child {
border-bottom: 1px solid #d9d9d9;
}
.faq-accordion .accordion-button {
background: transparent;
border: none;
box-shadow: none;
padding: 22px 0;
font-size: 17px;
font-weight: 600;
color: #1a1a1a;
line-height: 1.5;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
}
.faq-accordion .accordion-button:not(.collapsed) {
background: transparent;
color: #1a1a1a;
box-shadow: none;
}
.faq-accordion .accordion-button:focus {
border: none;
box-shadow: none;
outline: none;
}
.faq-accordion .accordion-button::after {
display: none;
}
.faq-accordion .accordion-icon {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease;
}
.faq-accordion .accordion-icon i {
font-size: 13px;
color: #666;
transition: transform 0.3s ease;
}
.faq-accordion .accordion-button:not(.collapsed) .accordion-icon i {
transform: rotate(-180deg);
}
.faq-accordion .accordion-body {
padding: 0 0 22px 0;
}
.faq-accordion .faq-answer {
font-size: 15px;
line-height: 1.7;
color: #555;
margin: 0;
padding-right: 40px;
}
.faq-accordion .accordion-collapse {
border: none;
}
/* Right Side - Content Styles */
.faq-content-wrapper {
display: flex;
align-items: start;
justify-content: center;
height: 100%;
min-height: 450px;
border-radius: 16px;
padding: 0px;
}
.faq-content {
text-align: left;
color: #ffffff;
}
.faq-main-title {
font-size: 46px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 20px;
line-height: 1.25;
}
.faq-description {
font-size: 16px;
color: #1a1a1a;
margin-bottom: 35px;
line-height: 1.6;
}
/* Responsive Design */
@media (max-width: 991px) {
.faq-section {
padding: 50px 0;
}
.faq-accordion-wrapper {
padding-right: 0;
margin-bottom: 30px;
}
.faq-content-wrapper {
min-height: 380px;
padding: 40px 35px;
}
.faq-main-title {
font-size: 38px;
}
}
@media (max-width: 767px) {
.faq-section {
padding: 0px 0;
}
.faq-accordion .accordion-button {
font-size: 16px;
padding: 20px 0;
padding-right: 30px;
}
.faq-accordion .accordion-body {
padding: 0 0 20px 0;
}
.faq-accordion .faq-answer {
font-size: 14px;
padding-right: 30px;
}
.faq-content-wrapper {
min-height: 340px;
padding: 35px 28px;
border-radius: 14px;
}
.faq-main-title {
font-size: 34px;
margin-bottom: 18px;
}
.faq-description {
font-size: 15px;
margin-bottom: 28px;
}
}
@media (max-width: 575px) {
.faq-accordion .accordion-button {
font-size: 15px;
padding: 18px 0;
padding-right: 28px;
}
.faq-section {
padding: 00px 0;
}
.faq-accordion .accordion-body {
padding: 0 0 18px 0;
}
.faq-accordion .faq-answer {
padding-right: 25px;
}
.faq-content-wrapper {
min-height: 320px;
padding: 30px 24px;
}
.faq-main-title {
font-size: 30px;
}
.faq-description {
font-size: 14px;
}
}
@media (max-width: 375px) {
.faq-main-title {
font-size: 26px;
}
.faq-content-wrapper {
padding: 26px 20px;
}
.faq-accordion .accordion-button {
font-size: 14px;
}
}
/******** faq Area end
***************************************************************/
/******** pricing Area start
***************************************************************/
.pricing-section {
margin-top: 0px;
padding: 0px;
background-color: var(--bg-white);
}
/* Main Title */
.pricing-main-title {
font-size: 42px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 0;
line-height: 1.3;
}
/* Toggle Buttons */
.pricing-toggle-wrapper {
display: flex;
justify-content: center;
margin-bottom: 50px;
}
.pricing-toggle {
position: relative;
display: inline-flex;
background: var(--bg-gray);
border-radius: 50px;
padding: 6px;
}
.toggle-slider {
position: absolute;
top: 6px;
left: 6px;
width: calc(50% - 6px);
height: calc(100% - 12px);
background: var(--gradient-purple);
border-radius: 50px;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 0;
}
.pricing-toggle.yearly .toggle-slider {
transform: translateX(100%);
}
.toggle-btn {
position: relative;
padding: 12px 32px;
border: none;
background: transparent;
color: var(--dark-primary);
font-size: 16px;
font-weight: 600;
border-radius: 50px;
cursor: pointer;
transition: color 0.3s ease;
z-index: 1;
min-width: 150px;
}
.toggle-btn.active {
color: #ffffff;
}
/* Pricing Cards */
.pricing-card {
background: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 20px;
padding: 35px 30px;
height: 100%;
display: flex;
flex-direction: column;
position: relative;
transition: all 0.3s ease;
}
.pricing-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.pricing-card-popular {
border: var(--border-color);
background: linear-gradient(135deg, rgba(124, 58, 237, 0.05) 0%, rgba(168, 85, 247, 0.05) 100%);
}
.popular-badge {
position: absolute;
top: 20px;
right: 20px;
background: #ff6b6b;
color: #ffffff;
padding: 6px 14px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
display: flex;
align-items: center;
gap: 5px;
}
.popular-badge i {
font-size: 11px;
}
/* Card Header */
.pricing-card-header {
margin-bottom: 30px;
}
.plan-name {
font-size: 24px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 12px;
}
.plan-description {
font-size: 14px;
color: #666;
line-height: 1.6;
margin-bottom: 25px;
min-height: 60px;
}
/* Price Wrapper - Contains both monthly and yearly prices */
.plan-price-wrapper {
position: relative;
min-height: 90px;
}
.plan-price-content {
opacity: 0;
visibility: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
transition: opacity 0.4s ease, visibility 0s 0.4s;
}
.plan-price-content.active {
opacity: 1;
visibility: visible;
position: relative;
transition: opacity 0.4s ease, visibility 0s 0s;
}
.plan-price {
display: flex;
align-items: baseline;
gap: 5px;
margin-bottom: 8px;
}
.price {
font-size: 44px;
font-weight: 800;
color: #1a1a1a;
margin: 0;
}
.price-period {
font-size: 18px;
color: #666;
font-weight: 500;
}
.price-tax {
font-size: 14px;
color: #888;
margin: 0;
}
/* Card Body */
.pricing-card-body {
flex: 1;
display: flex;
flex-direction: column;
}
.pricing-btn {
display: block;
width: 100%;
padding: 14px 28px;
background: transparent;
border: 2px solid var(--dark-primary);
color: var(--dark-primary);
text-align: center;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
margin-bottom: 25px;
}
.pricing-btn:hover {
background: var(--dark-primary);
color: var(--bg-white);
}
.btn-popular {
background: var(--gradient-purple);
color: var(--bg-white);
transition: all 0.3s ease;
display: block;
width: 100%;
padding: 14px 28px;
text-align: center;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
margin-bottom: 25px;
}
.btn-popular:hover {
transform: translateY(-2px);
}
/* Features List */
.plan-features {
list-style: none;
padding: 0;
margin: 0;
}
.plan-features li {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 14px;
font-size: 14px;
color: #333;
line-height: 1.5;
}
.plan-features li:last-child {
margin-bottom: 0;
}
.plan-features li i {
color: #7c3aed;
font-size: 12px;
margin-top: 3px;
flex-shrink: 0;
}
/* Responsive Design */
@media (max-width: 991px) {
.pricing-section {
padding: 0px 0;
}
.pricing-main-title {
font-size: 36px;
}
.pricing-card {
margin-bottom: 20px;
}
}
@media (max-width: 767px) {
.pricing-section {
padding: 0px 0;
}
.pricing-main-title {
font-size: 30px;
margin-bottom: 30px;
}
.toggle-btn {
padding: 10px 24px;
font-size: 14px;
min-width: 130px;
}
.pricing-card {
padding: 30px 25px;
}
.plan-name {
font-size: 22px;
}
.plan-description {
font-size: 13px;
min-height: auto;
}
.price {
font-size: 38px;
}
.price-period {
font-size: 16px;
}
.pricing-btn {
font-size: 15px;
padding: 12px 24px;
}
.plan-features li {
font-size: 13px;
}
}
@media (max-width: 575px) {
.pricing-main-title {
font-size: 26px;
}
.toggle-btn {
padding: 9px 20px;
font-size: 13px;
min-width: 115px;
}
.pricing-card {
padding: 25px 20px;
}
.plan-name {
font-size: 20px;
}
.price {
font-size: 34px;
}
.popular-badge {
font-size: 12px;
padding: 5px 12px;
}
}
@media (max-width: 375px) {
.pricing-main-title {
font-size: 24px;
}
.price {
font-size: 30px;
}
.plan-name {
font-size: 18px;
}
}
/******** pricing Area end
***************************************************************/
/******** cta Area start
***************************************************************/
.cta-inner-container {
/* Dark navy base gradient (replacing the old yellow banner gradient)
with a tiled mosaic of faint rounded squares — each cell's opacity
was randomized when the tile was generated (see
public/assets/frontend/default/image/cta-mosaic-overlay.svg) so it
reads as noise rather than a uniform grid, all at low enough opacity
to blend into the navy instead of standing out. The mosaic layer is
pinned to the viewport (background-attachment: fixed) same as the
app-showcase section, so this box reads as a window rolling over one
static backdrop rather than carrying its own copy of the texture. */
background-image:
url(/assets/frontend/default/image/cta-mosaic-overlay.svg),
linear-gradient(135deg,
#171449 0%,
#0a0836 40%,
#050328 70%,
#020112 100%);
background-repeat: repeat, no-repeat;
background-position: left top, center;
background-size: 960px 480px, cover;
background-attachment: fixed, scroll;
border-radius: 24px;
padding: 60px 40px;
position: relative;
overflow: hidden;
animation: fadeInScale 0.6s ease-out;
}
/* Brand Badge */
.brand-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 24px;
background: rgba(255, 255, 255, 0.95);
border-radius: 50px;
backdrop-filter: blur(10px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.brand-badge span {
color: #ffb300;
font-weight: 600;
font-size: 14px;
letter-spacing: 0.3px;
}
/* CTA Title */
.cta-title {
font-size: clamp(28px, 4.5vw, 48px);
font-weight: 600;
line-height: 1.2;
color: #ffffff;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
margin-bottom: 16px !important;
padding: 0 20px;
}
.cta-subtitle {
font-size: 16px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.75);
max-width: 620px;
margin: 0 auto 32px !important;
padding: 0 20px;
}
/* Button Wrapper */
.cta-btn-wrapper {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
align-items: center;
margin-bottom: 0;
}
/* This section's yellow button keeps the shared .eBtn.gradient:hover
position-shift + arrow-move, but not its amber glow/color swap — against
the dark navy backdrop that glow read as an odd highlight, not a hover
affordance, and the color swap fought the button's own yellow fill.
!important on box-shadow here too since the rule it's beating
(.eBtn:hover, .eBtn.gradient:hover — line ~3256) sets one without it;
relying on specificity alone already wins, but this makes it unconditional. */
.cta-btn-wrapper .eBtn.gradient:hover,
.cta-btn-wrapper .eBtn.gradient:focus,
.cta-btn-wrapper .eBtn.gradient:active {
box-shadow: none !important;
color: var(--dark-bg) !important;
}
/* Google Play download button — frosted glass outline, readable against
the dark navy background without competing with the yellow primary CTA. */
.cta-btn-playstore {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 30px;
border-radius: 10px;
border: 1.5px solid rgba(255, 255, 255, 0.35);
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(10px);
color: #ffffff;
font-size: 15px;
font-weight: 600;
text-decoration: none;
transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.cta-btn-playstore svg {
flex-shrink: 0;
}
.cta-btn-playstore:hover {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.6);
color: #ffffff;
transform: translateY(-2px);
}
/* Primary Button */
/* Secondary Button */
/* This section had no base padding at all — only a max-width:768px override
further down — so on desktop it sat flush against whatever came right
before it (e.g. the FAQ section, which itself only has padding-top, no
padding-bottom). The mobile override still applies its own smaller value. */
.cta-section-wrapper {
padding: 80px 0;
}
/* Content Animation */
.cta-content>* {
animation: fadeInUp 0.6s ease-out forwards;
opacity: 0;
}
.cta-content>*:nth-child(1) {
animation-delay: 0.2s;
}
.cta-content>*:nth-child(2) {
animation-delay: 0.3s;
}
.cta-content>*:nth-child(3) {
animation-delay: 0.4s;
}
/* Responsive Styles */
@media (max-width: 768px) {
.cta-section-wrapper {
padding: 40px 0 !important;
}
.cta-inner-container {
padding: 40px 24px !important;
border-radius: 16px !important;
background-size: 480px 240px, cover !important;
}
.cta-btn-wrapper {
flex-direction: column !important;
width: 100%;
}
.cta-btn-playstore {
width: 100%;
justify-content: center;
}
.brand-badge {
font-size: 13px !important;
padding: 8px 18px !important;
}
.brand-badge svg {
width: 16px !important;
height: 16px !important;
}
.cta-title {
padding: 0 10px !important;
}
.cta-subtitle {
padding: 0 10px !important;
font-size: 14px !important;
}
}
@media (max-width: 576px) {
.cta-inner-container {
padding: 32px 20px !important;
border-radius: 12px !important;
}
.cta-btn-playstore {
padding: 14px 24px !important;
font-size: 15px !important;
}
}
/******** cta Area end
***************************************************************/
/******** Footer Area Start
***************************************************************/
.footer-area-new {
background: #0a0e27;
color: #8892ab;
margin-top: 80px !important;
}
.footer-brand {
padding-right: 40px !important;
}
.footer-logo-wrapper {
margin-bottom: 24px;
}
.footer-logo {
max-width: 150px;
height: auto;
display: block;
}
.footer-description {
font-size: 13.5px;
line-height: 1.8;
color: #7a8399;
margin-bottom: 32px;
font-weight: 400;
}
.footer-social-section {
margin-top: 24px;
}
.footer-social-title {
font-size: 16px;
font-weight: 600;
color: #ffffff;
margin-bottom: 16px;
}
.footer-social-links {
display: flex;
gap: 10px;
list-style: none;
padding: 0;
margin: 0;
flex-wrap: wrap;
}
.footer-social-links li a {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.08);
border-radius: 6px;
color: #a8b3cf;
font-size: 16px;
transition: all 0.3s ease;
text-decoration: none;
}
.footer-social-links li a:hover {
background: rgba(117, 121, 255, 0.2);
color: #ffffff;
transform: translateY(-2px);
}
.footer-widget-new {
height: 100%;
}
.footer-widget-title {
font-size: 18px;
font-weight: 600;
color: #ffffff;
margin-bottom: 22px;
letter-spacing: 0.3px;
}
/* Footer Links */
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 13px;
}
.footer-links li:last-child {
margin-bottom: 0;
}
.footer-links li a {
color: #7a8399;
font-size: 13.5px;
text-decoration: none;
transition: all 0.3s ease;
display: inline-block;
line-height: 1.6;
}
.footer-links li a:hover {
color: #ffffff;
padding-left: 5px;
}
/* Contact Info */
.footer-contact-info {
list-style: none;
padding: 0;
margin: 0;
}
.footer-contact-info .contact-item {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 18px;
font-size: 13.5px;
line-height: 1.7;
}
.footer-contact-info .contact-item:last-child {
margin-bottom: 0;
}
.footer-contact-info .footer-contact-icon {
width: 18px;
flex-shrink: 0;
text-align: left;
margin-top: 3px;
}
.footer-contact-info .footer-contact-icon i {
color: #BCBBCA;
font-size: 15px;
}
.footer-contact-info .footer-contact-icon svg {
display: block;
width: 18px;
height: 18px;
}
.footer-contact-info .contact-text {
flex: 1;
}
.footer-contact-info .contact-text a,
.footer-contact-info .contact-text span {
color: #7a8399;
text-decoration: none;
transition: color 0.3s ease;
display: block;
}
.footer-contact-info .contact-text a:hover {
color: #ffffff;
}
/* Footer Bottom */
.footer-bottom-new {
background: #060918;
padding: 24px 0;
margin-top: 65px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-bottom-content {
text-align: center;
}
.copyright-text {
color: #6b7589;
font-size: 13.5px;
margin: 0;
letter-spacing: 0.3px;
font-weight: 400;
}
/* Responsive */
@media (max-width: 1199px) {
.footer-area-new {
padding: 60px 0 0;
}
}
@media (max-width: 991px) {
.footer-area-new {
padding: 50px 0 0;
}
.footer-bottom-new {
margin-top: 45px;
}
.footer-brand {
margin-bottom: 35px;
}
.footer-widget-new {
margin-bottom: 35px;
}
}
@media (max-width: 767px) {
.footer-area-new {
padding: 40px 15px 0;
}
.footer-brand {
margin-bottom: 30px;
padding: 0 10px;
}
.footer-widget-new {
margin-bottom: 30px;
padding: 0 10px;
}
.footer-widget-title {
font-size: 16px;
margin-bottom: 18px;
}
.footer-description {
font-size: 13px;
margin-bottom: 26px;
line-height: 1.7;
}
.footer-logo-wrapper {
margin-bottom: 20px;
}
.footer-social-section {
margin-top: 20px;
}
.footer-social-title {
font-size: 15px;
margin-bottom: 14px;
}
.footer-social-links {
gap: 8px;
}
.footer-social-links li a {
width: 38px;
height: 38px;
font-size: 15px;
}
.footer-bottom-new {
margin-top: 35px;
padding: 20px 0;
}
.copyright-text {
font-size: 12px;
padding: 0 15px;
}
.footer-links li {
margin-bottom: 11px;
}
.footer-links li a {
font-size: 13px;
}
.footer-contact-info .contact-item {
margin-bottom: 16px;
font-size: 13px;
}
.footer-contact-icon i {
font-size: 14px;
}
.footer-logo {
max-width: 130px;
}
}
@media (max-width: 575px) {
.footer-area-new {
padding: 35px 10px 0;
}
.footer-brand {
padding: 0 5px;
margin-bottom: 25px;
}
.footer-widget-new {
padding: 0 5px;
margin-bottom: 25px;
}
.footer-social-title {
font-size: 14px;
}
.footer-widget-title {
font-size: 15px;
margin-bottom: 16px;
}
.footer-description {
font-size: 12.5px;
margin-bottom: 22px;
}
.footer-links li a {
font-size: 12.5px;
}
.footer-contact-info .contact-item {
font-size: 12.5px;
margin-bottom: 14px;
}
.footer-logo {
max-width: 120px;
}
.footer-social-links li a {
width: 36px;
height: 36px;
font-size: 14px;
}
.footer-bottom-new {
margin-top: 30px;
padding: 18px 0;
}
.copyright-text {
font-size: 11px;
padding: 0 10px;
}
}
@media (max-width: 400px) {
.footer-area-new {
padding: 30px 5px 0;
}
.footer-logo {
max-width: 110px;
}
.footer-description {
font-size: 12px;
}
.footer-widget-title {
font-size: 14px;
}
.footer-links li a,
.footer-contact-info .contact-item {
font-size: 12px;
}
}
/******** Footer Area End
***************************************************************/
/******** Skill Area Start
***************************************************************/
.description {
font-size: 15px;
font-weight: 500;
line-height: 27px;
color: var(--text-color);
}
/******** Skill Area End
***************************************************************/
/******** Instructor Area Start
***************************************************************/
/******** Instructor Area End
***************************************************************/
/******** Blog Area Start
***************************************************************/
.Ecard {
background-color: var(--bg-white);
box-shadow: var(--shadow-lg);
border-radius: 20px;
transition: .5s;
}
.card {
border: none;
}
.Ecard .card-body h4 {
font-size: 20px;
font-weight: 600;
font-family: var(--font-primary);
color: var(--color-2);
line-height: 32px;
}
.Ecard .card-body {
padding: 16px 30px;
}
.Ecard .card-body p {
margin-top: 8px;
font-size: 13px;
font-weight: 500;
line-height: 23px;
}
.border-none {
border: none !important;
}
.form-check-input:checked {
border-color: 1px solid var(--color-1);
background-color: var(--color-1);
}
.border-bottom {
border-bottom: 1px solid #eee;
}
.widget .tags {
gap: 12px;
}
/******** Blog Area End
***************************************************************/
/******** Testimnonials Area Start
***************************************************************/
:root {
--featured-width: 450px;
--featured-card-padding: 18px;
--featured-media-height: 350px;
--small-card-padding: 16px;
--testimonial-gap: 20px;
}
/* Main Section Styling */
.testimonials-wrapper {
background-color: white;
position: relative;
overflow: hidden;
padding: 60px 0;
}
.testimonials-wrapper .title {
font-size: clamp(24px, 5vw, 42px);
font-weight: 600;
color: #1a1a2e;
font-family: var(--font-primary);
line-height: 1.3;
margin-bottom: 0;
}
.testimonials-container {
position: relative;
margin: 0 auto;
padding: 40px 0;
}
/* Flexbox Layout - Key to auto-adjustment */
.testimonials-flex-wrapper {
display: flex;
align-items: stretch;
gap: var(--testimonial-gap);
position: relative;
}
/* Column Layout */
.testimonial-column {
display: flex;
flex-direction: column;
}
/* Side columns grow to fill remaining space */
.testimonial-column-side {
flex: 1;
min-width: 0;
}
/* Center column has fixed width */
.testimonial-column-center {
flex: 0 0 var(--featured-width);
max-width: var(--featured-width);
}
.fade-overlay {
position: absolute;
left: 0;
right: 0;
height: 120px;
pointer-events: none;
z-index: 2;
}
.fade-overlay.fade-top {
top: 0;
background: linear-gradient(to bottom,
rgb(255, 255, 255) 0%,
rgba(255, 255, 255, 0.7) 50%,
rgba(255, 255, 255, 0) 100%);
}
.fade-overlay.fade-bottom {
bottom: 0;
background: linear-gradient(to top,
rgb(255, 255, 255) 0%,
rgba(255, 255, 255, 0.7) 50%,
rgba(255, 255, 255, 0) 100%);
}
/* Side Testimonials Container */
.side-testimonials {
display: flex;
flex-direction: column;
gap: var(--testimonial-gap);
height: 100%;
position: relative;
z-index: 1;
}
/* Small Testimonial Cards */
.small-testimonial {
background: white;
padding: var(--small-card-padding);
border: 1px solid #fff268;
border-radius: 12px;
transition: all 0.3s ease;
flex: 1;
display: flex;
flex-direction: column;
}
.small-testimonial:hover {
transform: translateY(-3px);
box-shadow: 0 4px 15px rgba(88, 101, 242, 0.15);
border-color: #ffd500;
}
.small-testimonial .description-small {
font-size: 13px;
color: #666;
line-height: 1.6;
margin-bottom: 12px;
font-family: var(--font-primary);
flex-grow: 1;
}
.small-testimonial .user-info-small {
margin-top: auto;
}
.small-testimonial .user-info-small img {
width: 40px;
height: 40px;
object-fit: cover;
margin-right: 10px;
border: 2px solid #f0f0f0;
flex-shrink: 0;
}
.small-testimonial .user-info-small h6 {
font-size: 14px;
font-weight: 600;
margin: 0 0 2px 0;
color: #1a1a2e;
font-family: var(--font-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.small-testimonial .user-info-small p {
font-size: 11px;
color: #888;
margin: 0;
font-family: var(--font-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.small-testimonial .stars-small {
display: flex;
gap: 2px;
margin-left: 8px;
flex-shrink: 0;
}
.small-testimonial .stars-small i {
color: #FFD700;
font-size: 11px;
}
.small-testimonial .stars-small i.inactive {
color: #e0e0e0;
}
/* Main Featured Testimonial Card */
.main-featured-testimonial {
height: 100%;
display: flex;
align-items: stretch;
z-index: 999;
}
.featured-card-wrapper {
background: white;
border: 2px solid #ffd815 !important;
border-radius: 20px;
padding: var(--featured-card-padding);
box-shadow: 0 8px 30px rgba(242, 224, 88, 0.15);
width: 100%;
display: flex;
flex-direction: column;
}
/* Media Container - Direct height control */
.media-player-container {
position: relative;
width: 100%;
height: var(--featured-media-height);
border-radius: 15px;
overflow: hidden;
margin-bottom: 20px;
background: linear-gradient(135deg, rgba(242, 209, 88, 0.08) 0%, rgba(88, 101, 242, 0.03) 100%);
flex-shrink: 0;
}
.testimonial-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 15px;
}
/* Stars Main */
.stars-main {
margin-bottom: 15px;
flex-shrink: 0;
}
.stars-main i {
color: #FFD700;
font-size: 20px;
margin: 0 2px;
}
.stars-main i.inactive {
color: #e0e0e0;
}
/* Main Description */
.description-main {
font-size: 15px;
line-height: 1.7;
color: #444;
margin-bottom: 20px;
font-family: var(--font-primary);
flex-grow: 1;
}
/* Main User Info */
.main-user-info {
flex-shrink: 0;
}
.main-user-info h4 {
font-size: 18px;
font-weight: 600;
color: #1a1a2e;
margin-bottom: 4px;
font-family: var(--font-primary);
}
.main-user-info p {
font-size: 13px;
color: #888;
margin: 0;
font-family: var(--font-primary);
}
/* Tablet Responsive */
@media (min-width: 768px) and (max-width: 991px) {
.testimonials-wrapper {
padding: 50px 0;
}
.testimonials-flex-wrapper {
flex-direction: column;
}
.testimonial-column-center {
order: -1;
flex: 1;
max-width: 100%;
margin-bottom: var(--testimonial-gap);
}
.side-testimonials {
flex-direction: row !important;
flex-wrap: wrap;
}
.small-testimonial {
flex: 1 1 calc(50% - calc(var(--testimonial-gap) / 2));
min-width: calc(50% - calc(var(--testimonial-gap) / 2));
}
}
/* Mobile Responsive */
@media (max-width: 767px) {
:root {
--featured-width: 100%;
--featured-card-padding: 15px;
--featured-media-height: 300px;
--small-card-padding: 14px;
}
.testimonials-wrapper {
padding: 40px 0;
}
.testimonials-container {
padding: 20px 0;
}
.testimonials-flex-wrapper {
flex-direction: column;
}
.testimonial-column-center {
order: -1;
flex: 1;
max-width: 100%;
margin-bottom: var(--testimonial-gap);
}
.stars-main i {
font-size: 18px;
}
.description-main {
font-size: 14px;
margin-bottom: 15px;
}
.main-user-info h4 {
font-size: 16px;
}
.main-user-info p {
font-size: 12px;
}
.small-testimonial .description-small {
font-size: 12px;
}
}
/* Extra large screens */
@media (min-width: 1400px) {
.stars-main i {
font-size: 24px;
}
.description-main {
font-size: 16px;
}
.main-user-info h4 {
font-size: 20px;
}
}
/******** Testimnonials Area End
***************************************************************/
/******** Blog Area Start
***************************************************************/
.ol-card p-4 {
background-color: var(--bg-white);
box-shadow: var(--shadow-2xl);
border-radius: 20px;
transition: 0.5s;
}
.card {
cursor: pointer;
border: none;
}
.ol-card p-4 .card-body h4 {
font-size: 20px;
font-weight: 600;
font-family: var(--font-primary);
color: var(--color-2);
line-height: 32px;
}
.ol-card p-4 .card-body {
padding: 16px 30px;
}
.ol-card p-4 .card-body p {
margin-top: 8px;
font-size: 13px;
font-weight: 500;
line-height: 23px;
}
.border-none {
border: none !important;
}
.form-check-input:checked {
border-color: var(--color-1) !important;
}
.border-bottom {
border-bottom: 1px solid #eee;
}
.widget .tags {
gap: 12px;
}
/******** Blog Area End
***************************************************************/
/************ List View Page ***************/
/******** Breadcumb Area Start
***************************************************************/
.breadcum-area {
/* The fixed, semi-transparent .glass-nav sits on top of the page via
position:fixed — but body's own padding-top (var(--nav-height))
pushes this section's box down below it, leaving a plain white
gap behind the nav (which is why it reads as a flat gray bar
instead of blending into this section's dark background). Pull
this box back up by that same amount, then add it straight back
as extra padding-top so the breadcrumb/title content inside lands
at the exact same visual position as before — only the
background extends up behind the nav. */
margin-top: calc(-1 * var(--nav-height));
padding-top: calc(var(--nav-height) + 30px);
padding-bottom: 200px;
background-color: var(--bg-dark);
background-image:
radial-gradient(circle, rgba(117, 121, 255, 0.3) 0%, transparent 50%),
radial-gradient(circle, rgba(117, 121, 255, 0.3)0%, transparent 50%);
background-size: 800px 800px, 500px 800px;
background-position: top -200px left -150px, bottom -300px right -50px;
background-repeat: no-repeat, no-repeat;
}
.playing-breadcum {
padding-bottom: 150px;
height: auto;
min-height: 300px;
}
.eNtry-breadcum .breadcrumb {
margin-bottom: 12px;
margin-top: 50px;
}
.eNtry-breadcum .breadcrumb-item a {
font-size: 15px;
/* Pinned explicitly rather than left at 500 — under the old Bornomala
font (400/700 only) an unavailable weight resolved inconsistently
across browsers, making this link and the .active item next to it
render in visibly different weights despite both requesting "500".
Anek Bangla supports 500 natively, but keeping this pinned avoids
reintroducing that ambiguity. */
font-weight: 400;
color: var(--bg-white);
}
.breadcrumb-item+.breadcrumb-item::before {
padding: 0 12px;
color: var(--bg-white);
content: var(--bs-breadcrumb-divider, ">");
margin-top: 1px;
}
.eNtry-breadcum .breadcrumb-item.active {
color: var(--bg-white);
font-size: 15px;
font-weight: 400;
}
.g-title {
font-size: 24px;
font-weight: 600;
color: var(--bg-white);
}
.g-title-dark {
font-size: 30px;
font-weight: 600;
color: var(--dark-bg);
}
.breadcrumb-item+.breadcrumb-item {
padding-left: 0;
}
.showing-text {
font-weight: 500;
color: var(--bg-white);
}
.tab-list ul {
justify-content: flex-end;
align-items: center;
border-radius: 10px;
background-color: #eaeaea;
margin: auto;
gap: 12px;
float: right;
display: flex;
padding: 5px;
}
.tab-list ul li {
padding: 6px;
}
.tab-list a {
color: var(--color-2);
font-weight: 500;
display: inline-block;
}
.tab-list li.active {
padding: 7px 14px;
background: var(--bg-white);
border-radius: 10px;
}
.eNtery-item {
margin-top: -150px;
}
.entry-pagination .pagination {
display: flex;
justify-content: center;
--bs-pagination-border-width: none;
}
.entry-pagination {
margin-top: 50px;
}
.entry-pagination .pagination li.active a {
background-image: linear-gradient(to right,
#efa52f 0%,
#ffce64 51%,
#ffdb64 100%) !important;
transition: 0.5s;
background-size: 200% auto;
box-shadow: 0 0 20px #eee;
color: #fff !important;
}
/******** Breadcumb Area End
***************************************************************/
/******** Grid View Area Start
***************************************************************/
.info-card {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.info-card .heart {
position: relative;
z-index: 999;
cursor: pointer;
}
.g-card .card-body h5 {
font-size: 16px;
font-weight: 500;
line-height: 23px;
color: var(--color-2);
}
.g-card .entry-title h3 {
margin-bottom: 8px;
line-height: 32px;
width: 270px;
}
.g-card {
padding: 20px;
border-radius: 15px;
}
.g-card .card-body {
padding: 0;
margin-top: 20px;
}
/******** Grid View Area End
***************************************************************/
/******** Search Filter Area Start
***************************************************************/
.sidebar {
background-color: var(--bg-white);
box-shadow: var(--shadow-lg);
border-radius: 20px;
padding: 20px;
}
.widget {
margin-bottom: 30px;
}
.search {
position: relative;
}
.search .form-control {
background-color: transparent;
border: 1px solid #eee;
color: var(--text-color);
}
.search .form-control:focus,
.search .form-control::placeholder {
color: var(--text-color) !important;
}
.search .submit {
position: absolute;
top: 12px;
right: 11px;
border: none;
background: transparent;
color: var(--text-color);
}
.search .form-control::placeholder {
font-weight: 500;
}
.widget-title {
font-size: 18px;
font-weight: 600;
color: var(--dark-primary);
padding-bottom: 11px;
border-bottom: 1px solid #eee;
}
.entry-widget li {
margin-top: 16px;
font-weight: 500;
cursor: pointer;
}
.entry-widget li a {
font-size: 15px;
font-weight: 500;
color: var(--text-color);
display: inline-block;
transition: 0.5s;
}
.entry-widget li a:hover {
color: var(--color-1);
}
.form-check-input {
width: 20px;
height: 20px;
margin-right: 8px;
border: 1px solid #949183 !important;
}
.form-check-input:focus {
box-shadow: none;
}
.form-check-label {
cursor: pointer;
}
/* Price Range */
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
border: 1px solid var(--color-1) !important;
background: var(--color-1) !important;
font-weight: normal;
color: var(--color-1);
border-radius: 50%;
height: 18px;
width: 18px;
}
.ui-widget-header {
border: 1px solid var(--color-1) !important;
background: var(--color-1) !important;
}
.ui-slider-horizontal .ui-slider-range {
top: 0 !important;
height: 3px !important;
}
.ui-widget-content {
border-color: #d9d9d9 !important;
background-color: #d9d9d9 !important;
}
.ui-slider .ui-slider-handle {
width: 10px !important;
height: 10px !important;
}
.ui-slider-horizontal .ui-slider-handle {
top: -4px !important;
}
.ui-widget.ui-widget-content {
border: 1px solid var(--text-color);
height: 3px !important;
position: relative;
top: 26px;
cursor: pointer;
}
.form-check-input[type="checkbox"] {
border-radius: 5px;
}
.widget:last-child {
margin-bottom: 0;
}
/*New Grid View */
/* Active price or Free text */
/* Old line-through price */
.eBar-card {
padding: 20px;
}
.eBar-card .entry-title h3 {
font-size: 18px;
line-height: 30px;
}
.eBar-card .card-body {
padding: 12px 0;
}
.eBar-card .creator h5 {
font-size: 16px;
font-weight: 500;
}
.eBar-card ul {
margin-bottom: 0;
justify-content: space-between;
align-items: center;
}
.eBar-card ul li span {
font-weight: 500;
color: var(--color-2);
}
.eBar-card .heart {
position: absolute;
top: 10px;
right: 10px;
z-index: 999;
}
.eBar-card ul li i {
font-size: 13px;
color: #efbb02;
margin-left: 5px;
}
.eBar-card .learn-more {
font-size: 15px;
font-weight: 500;
color: var(--color-2);
transition: 0.5s;
display: inline-block;
position: relative;
margin-top: 6px;
}
.eBar-card .learn-more::after {
position: absolute;
content: "";
bottom: -1px;
left: 0;
width: 0;
height: 1px;
background-color: var(--primary-color);
visibility: hidden;
opacity: 0;
transition: 0.5s;
}
.eBar-card:hover .learn-more::after {
visibility: visible;
opacity: 1;
width: 104px;
}
.eBar-card:hover .learn-more {
color: var(--primary-color) !important;
}
.eBar-card .courses-img img {
height: 165px;
}
/******** Search Filter Area End
***************************************************************/
/******** Instructor Area Start
***************************************************************/
/******** Instructor Area End
***************************************************************/
/******** Instructor Details Area Start
***************************************************************/
/******** Instructor Details Area End
***************************************************************/
/******** Contact Page Start
***************************************************************/
.contact-card {
padding: 30px 50px;
text-align: center;
}
.contact-card .g-title {
font-size: 20px;
margin-bottom: 16px;
}
.contact-icon {
display: inline-block;
height: 70px;
width: 70px;
line-height: 70px;
text-align: center;
margin: auto;
border: 1px solid #edf0f7;
border-radius: 50%;
margin-bottom: 16px;
}
.contact-card p {
font-weight: 500;
color: var(--text-color);
line-height: 27px;
}
.contact-card a {
color: var(--color-1);
font-weight: 500;
}
.conatact-map iframe {
height: 628px;
border-radius: 15px;
width: 100%;
}
.form-label {
font-size: 16px;
line-height: 28px;
margin-bottom: 16px;
font-weight: 500;
color: var(--color-2);
font-family: var(--font-primary);
}
.global-form .form-control {
padding: 14px 22px;
line-height: 28px;
margin-bottom: 8px;
color: var(--text-color);
}
.global-form .form-control::placeholder {
color: var(--text-color);
}
.global-form .form-control:focus {
color: var(--text-color) !important;
}
.global-form textarea {
height: 157px;
resize: none;
}
.global-form button {
border: none;
padding: 12px 30px;
}
.contact-left {
margin-top: 10px;
margin-left: 40px;
}
/******** About Us Area Start
***************************************************************/
/******** About Us Area End
***************************************************************/
/******** My Courses Area Start
***************************************************************/
.preview-image {
width: 200px;
height: 200px;
overflow: hidden;
}
.preview-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.gradient-border {
background: linear-gradient(to right,
#2f57ef 0%,
#c664ff 51%,
#c664ff 100%);
border-radius: 12px;
padding: 2px;
width: 100%;
}
.progress {
--bs-progress-height: 8px;
}
.c-card .eBtn {
padding: 9px 30px !important;
color: var(--color-2) !important;
transition: 0.5s;
color: var(--color-2);
border: 1px solid #2f57ef38;
}
.c-card:hover .eBtn {
background-image: linear-gradient(to right,
#2f57ef 0%,
#c664ff 51%,
#c664ff 100%);
background-size: 200% auto;
box-shadow: 0 0 20px #eee;
transition: 0.5s;
color: var(--color-white) !important;
}
/******** My Courses Area End
***************************************************************/
.privacy-policy {
background-color: #fff;
box-shadow: var(--shadow-2xl);
padding: 30px;
border-radius: 20px;
}
.privacy-policy h3 {
font-size: 36px;
font-weight: 500;
margin-bottom: 30px;
}
.privacy-policy p {
margin-bottom: 20px;
}
.privacy-policy p:last-child {
margin-bottom: 0;
}
/******** Privay Policy Area End
***************************************************************/
/******** Login Area Start
***************************************************************/
.global-form .g-title {
font-size: 36px;
line-height: 38px;
margin-bottom: 20px;
}
.global-form .description {
margin-bottom: 30px;
}
/******** Login Area End
***************************************************************/
/******** Courses Playing Area Start
***************************************************************/
.lesson-play-list {
padding: 20px;
}
.accordion-button {
font-size: 16px;
font-weight: 600;
color: var(--color-2);
padding: 20px;
}
.accordion-button:not(.collapsed) {
background-color: transparent;
box-shadow: none;
color: var(--color-1);
}
.accordion-collapse {
padding: 0px 20px;
}
.accordion-button:focus {
border-color: transparent;
box-shadow: none;
}
.accordion-item {
border: none;
border-bottom: 1px solid #eee;
border-radius: 0;
}
.accordion-item:last-of-type,
.accordion-item:first-of-type {
border-radius: 0;
}
.lesson-list span {
font-size: 13px;
font-weight: 500;
}
.lesson-list li {
margin-bottom: 16px;
}
.lesson-list li a {
font-weight: 500;
transition: 0.5s;
color: var(--color-2);
}
.lesson-list li a:hover svg path,
.lesson-list li a:hover {
color: var(--color-1);
fill: var(--color-1);
}
.lesson-list li svg,
.lesson-list li i {
margin-right: 10px;
transition: 0.5s;
margin-top: 5px;
}
.accordion-body {
padding: 0;
}
.accordion-button::after {
background: url(/assets/frontend/default/image/plus.svg) no-repeat scroll center center / cover;
background-size: 17px;
transition: inherit;
}
.accordion-button:not(.collapsed)::after {
background: url(/assets/frontend/default/image/minus.svg) no-repeat scroll center center / cover;
background-size: 17px;
transition: inherit;
}
/* Tab */
/******** Courses Playing Area End
***************************************************************/
/******** Courses Detals Area Start
***************************************************************/
.pro-32 {
height: 32px;
width: 32px;
border-radius: 50%;
object-fit: cover;
}
.pro-20 {
width: 20px;
height: 20px;
}
.hero-details {
position: relative;
}
.hero-details img {
width: 100%;
height: 480px;
border-radius: 20px;
object-fit: cover;
}
.hero-details a {
height: 46px;
width: 46px;
line-height: 46px;
text-align: center;
display: inline-block;
background-color: var(--bg-white);
border-radius: 50%;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hero-details a::before {
height: 60px;
width: 60px;
}
.hero-details a:after,
.hero-details a:before {
border-radius: 50%;
border: 1px solid #fff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
content: "";
}
.hero-details a:after {
height: 75px;
width: 75px;
}
.hero-details {
position: relative;
}
.course-details h2 {
font-size: 40px;
margin-bottom: 30px !important;
max-width: 794px;
margin: auto;
}
.static-menu {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 99;
}
.ps-box {
margin-top: 30px;
padding: 20px;
background-color: var(--bg-white);
box-shadow: var(--shadow-2xl);
border-radius: 20px;
}
.ps-box .g-title {
font-size: 20px;
padding-bottom: 16px;
border-bottom: 1px solid #eee;
margin-bottom: 30px;
}
.s_stext {
font-weight: 500;
color: var(--color-1);
display: inline-block;
margin-top: 30px;
}
.ps-box .accordion-button {
font-size: 18px;
}
.preview-text {
display: flex;
gap: 11px;
align-items: center;
}
.preview-text p {
font-size: 13px;
font-weight: 500;
color: var(--text-color);
padding: 4px 13px;
border-radius: 5px;
background-color: rgba(47, 87, 239, 12%);
transition: 0.5s;
}
.preview-text p svg {
margin-top: 0;
margin-right: 0;
}
.lesson-list li a:hover .preview-text p {
color: var(--color-1);
}
.course_list li {
margin-bottom: 25px;
}
.accordion-item:last-child {
border-bottom: none;
}
.requirment {
display: flex;
gap: 30px;
}
.requirment ul li {
gap: 7px;
margin-bottom: 16px;
}
.requirment ul li:last-child {
margin-bottom: 0;
}
.requirment ul li i {
background: rgba(47, 87, 239, 12%);
height: 20px;
width: 20px;
line-height: 20px !important;
border-radius: 50%;
color: var(--color-1);
text-align: center;
font-size: 12px;
justify-content: center;
}
.requirment ul li p {
max-width: 290px;
margin-top: -4px;
}
.istructor-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.ins-left {
display: flex;
gap: 12px;
align-items: center;
}
.ins-left img {
height: 50px;
width: 50px;
border-radius: 50%;
object-fit: cover;
}
.ins-designation h5 {
font-size: 18px;
font-weight: 600;
color: var(--color-2);
margin-bottom: 3px;
}
.ins-right .action {
display: flex;
gap: 12px;
opacity: 0;
visibility: hidden;
transition: 0.2s;
}
.E-review:hover .ins-right .action {
opacity: 1;
visibility: visible;
}
.ins-right a {
color: var(--text-color);
font-weight: 500;
}
.ins-right {
display: flex;
gap: 8px;
}
.ins-right p {
font-weight: 500;
color: var(--color-2);
}
.re-star {
gap: 5px;
}
.re-star li i {
color: #efbb02;
font-size: 13px;
}
.reviews {
max-height: 910px;
overflow: hidden;
}
.review .E-review:last-child {
border-bottom: none;
padding-bottom: 0;
}
.E-review {
margin-bottom: 21px;
padding-bottom: 20px;
border-bottom: 1px solid #eee;
}
.review .E-review:last-child {
border: none;
}
.review .see-more {
font-weight: 600;
color: var(--text-color);
transition: 0.3s;
}
.review .see-more:hover {
color: var(--color-1);
}
.review .see-more i {
margin-left: 10px;
}
.ps-sidebar {
margin-top: 0;
padding: 12px 20px;
}
.ps-sidebar .g-title {
font-size: 36px;
border-bottom: 0;
margin-bottom: 0;
}
.ps-sidebar del {
font-family: var(--font-primary);
font-size: 20px;
font-weight: 500;
margin-top: 30px;
margin-left: 5px;
color: var(--text-color);
}
.ps-sidebar .eBtn {
display: flex;
align-items: center;
justify-content: center;
padding: 12px 20px;
font-weight: 500;
}
.ps-sidebar .eBtn img {
height: 20px;
width: 20px;
margin-right: 8px;
}
.ps-sidebar .description {
font-size: 13px;
}
.ps-side-feature {
margin-top: 30px;
}
.ps-side-feature li {
color: var(--color-2);
font-size: 15px;
font-weight: 500;
padding-bottom: 14px;
border-bottom: 1px solid #eee;
margin-bottom: 12px;
text-transform: capitalize;
}
.ps-side-feature li:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.ps-side-feature li span {
color: var(--text-color) !important;
display: flex;
gap: 5px;
}
.ps-side-feature li span img {
height: 20px;
}
/******** Courses Detals Area End
***************************************************************/
/******** Blog Detals Area Start
***************************************************************/
.tags {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 50px;
}
.tags li a {
display: inline-block;
border: 1px solid #edf0f7;
padding: 7px 20px;
font-size: 13px;
font-weight: 500;
color: var(--text-color);
transition: 0.5s;
border-radius: 6px;
}
.tags li a:hover,
.tags li a.active {
color: var(--color-white);
background-color: var(--color-1);
border-color: var(--color-1);
}
/******** Blog Detals Area End
***************************************************************/
/******** Wishlist Area Start
***************************************************************/
/******** Wishlist Area End
***************************************************************/
/******** Purchase History Area Start
***************************************************************/
.ellipsis-2 {
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}
.ellipsis-4 {
display: -webkit-box !important;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}
textarea::placeholder {
font-size: 15px;
font-weight: 500;
line-height: 27px;
color: var(--text-color) !important;
}
.category.active a {
color: #2f57ef;
}
/******** Cart list style start
***************************************************************/
.cart-item-title {
font-size: 15px;
font-weight: 500;
color: var(--color-2);
margin-bottom: 8px;
}
/******** Cart list style end
***************************************************************/
/******** bootstrap toastr start
***************************************************************/
/*Bootstrap toaster*/
.toast {
border-radius: 10px;
}
.toast-header {
color: #fff;
border-radius: 8px 8px 0px 0px;
border-bottom: none;
}
.toast-header .btn-close {
width: 20px;
height: 10px;
padding: 0px 1px;
filter: invert(1);
}
.toast-body {
color: #fff;
border-radius: 0px 0px 8px 8px;
padding: 0px 14px 14px 14px;
}
.toast.success .toast-header,
.toast.success .toast-body {
background-color: #13a96c;
}
.toast.warning .toast-header,
.toast.warning .toast-body {
background-color: rgb(229 153 40);
}
.toast.error .toast-header,
.toast.error .toast-body {
background-color: rgb(255 85 119);
}
/******** bootstrap toastr end
***************************************************************/
.rating-stars i {
color: #efbb02;
font-size: 20px !important;
cursor: pointer;
}
#remove-stars {
font-weight: 600;
color: #fff;
padding: 10px 20px;
border-radius: 30px;
cursor: pointer;
}
.ins-right i {
cursor: pointer;
padding: 4px;
display: inline-flex;
}
.ins-right i.fi-rr-trash {
font-size: 17px;
color: red;
}
.ins-right i.fi-rr-edit {
font-size: 16px;
color: blue;
}
/******** modal css starts
***************************************************************/
/******** Message Area Start
***************************************************************/
/* Message */
/******** Message Area End
***************************************************************/
.modal-content {
border: none;
border-radius: 12px;
overflow: hidden;
}
.modal-header {
padding: 10px 16px;
border-bottom: 0;
background-image: linear-gradient(to right,
#2f57ef 0%,
#c664ff 51%,
#c664ff 100%);
transition: 0.5s;
background-position: center;
color: #fff !important;
}
.modal-header h2 {
font-size: 20px;
color: #fff;
padding: 8px;
}
.modal-header .btn-close {
color: #fff;
margin-right: 10px;
}
.modal-header button:focus:not(:focus-visible) {
box-shadow: none;
}
.eModal .modal-body {
padding: 0;
}
/******** modal css ends
***************************************************************/
textarea.form-control {
font-weight: 500;
}
/*=============================
bootcamp style end
==============================*/
.modules {
margin-top: 30px;
}
.modules:empty {
display: none;
}
.modules .accordion-button {
padding-left: 30px;
position: relative;
}
.modules .accordion-button::after {
background: url(/assets/frontend/default/image/arrow-down.svg) no-repeat scroll center center / cover;
transition: var(--bs-accordion-btn-icon-transition);
margin: 0px !important;
position: absolute;
left: 0;
top: 18px;
background-size: 12px;
width: 15px;
height: 15px;
}
.modules .accordion-button {
border-bottom: 0px !important;
margin-bottom: 0;
height: 60px;
padding-top: 0 !important;
}
.modules .accordion-button:not(.collapsed) {
color: var(--color-2) !important;
}
.modules .accordion-collapse.collapse {
border-top: 1px solid red !important;
border-bottom: 1px solid red !important;
}
.modules .accordion-button:not(.collapsed) {
padding-bottom: 0 !important;
}
.accordion-collapse.collapse.show {
border-top: 1px solid var(--border-clr) !important;
border-bottom: 1px solid var(--border-clr) !important;
}
.modules .badge {
width: 67px;
}
/*=============================
bootcamp style end
==============================*/
/*=============================
badges start
==============================*/
/*=============================
badges end
==============================*/
/* Sham started */
/*=============================
team training start
==============================*/
.en-title h3 {
flex-grow: 1;
}
#members .result:hover {
background: #4141410d;
}
#members .result {
display: flex;
gap: 12px;
align-items: center;
justify-content: space-between;
font-size: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--border-clr);
cursor: pointer;
padding: 12px;
}
#members .result:nth-last-child(1) {
border: none;
}
#members .result .user-photo {
width: 45px;
height: 45px;
overflow: hidden;
border-radius: 50%;
}
/* Buttons Css Start ***
**********************/
/* Light button */
/* Small button */
/* Rounded */
/* Ony Icon btn */
/* For icon */
/* Buttons Css End ***
*********************/
/* Sham ended */
/* ===================================================================
Tutor Filter CSS Start
====================================================================*/
/* top */
/* sidebar */
/* Checkbox */
/* Slider Range */
/* Select */
/* Video */
/* ===================================================================
Tutor Filter CSS End
====================================================================*/
/* ===================================================================
Tutor Details CSS Start
====================================================================*/
/* Flat Pickr */
.flat-picker-dropdown .flatpickr-months .flatpickr-prev-month svg path,
.flat-picker-dropdown .flatpickr-months .flatpickr-next-month svg path {
fill: #6E798A;
}
.flat-picker-dropdown .flatpickr-months .flatpickr-prev-month:hover svg path,
.flat-picker-dropdown .flatpickr-months .flatpickr-next-month:hover svg path {
fill: #754FFE;
}
.flat-picker-dropdown .flatpickr-day.selected,
.flat-picker-dropdown .flatpickr-day.startRange,
.flat-picker-dropdown .flatpickr-day.endRange,
.flat-picker-dropdown .flatpickr-day.selected.inRange,
.flat-picker-dropdown .flatpickr-day.startRange.inRange,
.flat-picker-dropdown .flatpickr-day.endRange.inRange,
.flat-picker-dropdown .flatpickr-day.selected:focus,
.flat-picker-dropdown .flatpickr-day.startRange:focus,
.flat-picker-dropdown .flatpickr-day.endRange:focus,
.flat-picker-dropdown .flatpickr-day.selected:hover,
.flat-picker-dropdown .flatpickr-day.startRange:hover,
.flat-picker-dropdown .flatpickr-day.endRange:hover,
.flat-picker-dropdown .flatpickr-day.selected.prevMonthDay,
.flat-picker-dropdown .flatpickr-day.startRange.prevMonthDay,
.flat-picker-dropdown .flatpickr-day.endRange.prevMonthDay,
.flat-picker-dropdown .flatpickr-day.selected.nextMonthDay,
.flat-picker-dropdown .flatpickr-day.startRange.nextMonthDay,
.flat-picker-dropdown .flatpickr-day.endRange.nextMonthDay {
background: #754FFE;
border-color: #754FFE;
}
/* Hide the default date picker icon in Chrome, Safari, and Edge */
/* Hide the default date picker icon in Firefox */
/* .date-picker-input {
position: relative;
z-index: 0;
display: inline-block;
left: -20px;
top: 6px;
background-color: white;
} */
/* Slider */
.date-slider .swiper-slide {
width: fit-content;
}
/* Modal */
@media (min-width: 992px) {
.tutor-service-modal .modal-lg {
--bs-modal-width: 846px;
}
}
.tutor-service-modal .modal-content {
border-radius: 12px;
background: #FFF;
padding: 24px 9px 17px 24px;
max-height: 546px;
}
.tutor-service-modal .modal-body {
padding: 0 7px 0 0;
}
/* Scrollbar */
/* Firefox (uncomment to work in Firefox, although other properties will not work!) */
.tutor-service-modal .modal-body {
scrollbar-width: thin;
scrollbar-color: rgba(110, 121, 138, 0.3) rgba(146, 154, 167, 0.3);
}
/* Chrome, Edge and Safari */
.tutor-service-modal .modal-body::-webkit-scrollbar {
height: 5px;
width: 5px;
}
.tutor-service-modal .modal-body::-webkit-scrollbar-track {
border-radius: 32px;
background-color: rgba(110, 121, 138, 0.3);
}
.tutor-service-modal .modal-body::-webkit-scrollbar-track:hover {
background-color: rgba(110, 121, 138, 0.3);
}
.tutor-service-modal .modal-body::-webkit-scrollbar-track:active {
background-color: rgba(110, 121, 138, 0.3);
}
.tutor-service-modal .modal-body::-webkit-scrollbar-thumb {
border-radius: 32px;
background-color: rgba(146, 154, 167, 0.3);
}
.tutor-service-modal .modal-body::-webkit-scrollbar-thumb:hover {
background-color: rgba(146, 154, 167, 0.3);
}
.tutor-service-modal .modal-body::-webkit-scrollbar-thumb:active {
background-color: rgba(146, 154, 167, 0.3);
}
/* List */
/* Reviews */
/* Comment Reply */
/* Select */
/* ===================================================================
Tutor Details CSS End
====================================================================*/
/* ebooks details */
.ebook-details-info .row {
row-gap: 30px;
--bs-gutter-x: 30px;
}
.ebook-details-info {
padding: 40px;
background-color: #ffffff;
border-radius: 20px;
gap: 30px;
box-shadow: 0 8px 38px 0 rgba(16, 16, 16, 0.08);
}
.ebook-card-img {
width: 100%;
position: relative;
z-index: 1;
}
.ebook-card-img::after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: linear-gradient(180deg, rgba(17, 22, 44, 0) 59.89%, #071135 94.27%);
border-radius: 10px;
z-index: 1;
}
.ebook-card-img img {
width: 100%;
border-radius: 10px;
}
.ebook-new-price {
font-family: var(--second-font-family);
font-weight: 500;
font-size: 48px;
color: #edf0f7;
}
.ebook-old-price {
font-family: var(--second-font-family);
font-weight: 500;
font-size: 20px;
text-decoration: line-through;
color: #edf0f7;
margin-bottom: 8px;
}
.content {
height: 100%;
}
.content h2 {
font-family: var(--second-font-family);
font-weight: 600;
font-size: 40px;
line-height: 130%;
color: #192335;
padding-bottom: 12px;
}
.content img {
width: 32px;
height: 32px;
}
.creator h5 {
font-weight: 500;
font-size: 15px;
color: #192335;
}
.rating {
font-weight: 500;
font-size: 15px;
color: #192335;
}
.fa-star {
color: rgb(255, 203, 17);
}
.book-details {
font-weight: 500;
font-size: 15px;
line-height: 167%;
color: #6b7385;
padding-top: 12px;
padding-bottom: 12px;
}
/* table start */
.ebook-btn {
margin-top: 30px;
}
.ebook-card {
height: 438px;
}
.ebook-card .courses-img {
height: 202px !important;
}
.ebook-card .courses-img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* eboks btn */
.ebook-nav {
border-bottom: 1px solid #edf0f7;
/* padding-bottom: 10px; */
row-gap: 10px;
column-gap: 80px;
}
.ebook-tab-btn {
font-weight: 500;
font-size: 20px;
color: #6b7385;
position: relative;
padding-left: 0 !important;
padding-right: 0 !important;
padding-bottom: 10px !important;
}
.ebook-tab-btn:hover,
.ebook-tab-btn.active {
background: linear-gradient(135deg, #2f57ef 0%, #c464fd 93.75%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.ebook-tab-btn.active::after {
position: absolute;
content: "";
left: 0;
bottom: 0px;
width: 100%;
height: 1px;
background: linear-gradient(135deg, #2f57ef 0%, #c464fd 93.75%);
}
.nav-link {
border: none !important;
}
.nav-items {
padding-bottom: 30px;
}
.rating {
padding-right: 12px;
}
.input {
padding-top: 16px;
}
.date {
font-weight: 500;
font-size: 13px;
color: #6b7385;
padding-bottom: 4px;
}
.related-ebooks {
padding-top: 100px;
}
.related-ebooks h2 {
font-weight: 600;
font-size: 40px;
color: #192335;
}
.related-ebooks-btn a {
margin: 0;
}
.related-ebooks-wrap {
margin-bottom: 50px;
justify-content: space-between;
}
.ebook-new-price {
font-family: var(--second-font-family);
font-weight: 500 !important;
font-size: 48px !important;
color: #edf0f7 !important;
}
.ebook-tab-area {
margin-top: 330px;
}
/* ebooks details */
.ebook-details-info .row {
row-gap: 30px;
--bs-gutter-x: 30px;
}
.ebook-details-info {
padding: 40px;
background-color: #ffffff;
border-radius: 20px;
gap: 30px;
box-shadow: 0 8px 38px 0 rgba(16, 16, 16, 0.08);
}
.ebook-card-img {
width: 100%;
position: relative;
z-index: 1;
}
.ebook-card-img::after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: linear-gradient(180deg, rgba(17, 22, 44, 0) 59.89%, #071135 94.27%);
border-radius: 10px;
z-index: 1;
}
.ebook-card-img img {
width: 100%;
border-radius: 10px;
}
.ebook-new-price {
font-family: var(--second-font-family);
font-weight: 500;
font-size: 48px;
color: #edf0f7;
}
.ebook-old-price {
font-family: var(--second-font-family);
font-weight: 500;
font-size: 20px;
text-decoration: line-through;
color: #edf0f7;
margin-bottom: 8px;
}
.content {
height: 100%;
}
.content h2 {
font-family: var(--second-font-family);
font-weight: 600;
font-size: 40px;
line-height: 130%;
color: #192335;
padding-bottom: 12px;
}
.content img {
width: 32px;
height: 32px;
}
.creator h5 {
font-weight: 500;
font-size: 15px;
color: #192335;
}
.rating {
font-weight: 500;
font-size: 15px;
color: #192335;
}
.fa-star {
color: rgb(255, 203, 17);
}
.book-details {
font-weight: 500;
font-size: 15px;
line-height: 167%;
color: #6b7385;
padding-top: 12px;
padding-bottom: 12px;
}
/* table start */
.ebook-btn {
margin-top: 30px;
}
.ebook-card {
height: 438px;
}
/* eboks btn */
.ebook-nav {
border-bottom: 1px solid #edf0f7;
/* padding-bottom: 10px; */
row-gap: 10px;
column-gap: 80px;
}
.ebook-tab-btn {
font-weight: 500;
font-size: 20px;
color: #6b7385;
position: relative;
padding-left: 0 !important;
padding-right: 0 !important;
padding-bottom: 10px !important;
}
.ebook-tab-btn:hover,
.ebook-tab-btn.active {
background: linear-gradient(135deg, #2f57ef 0%, #c464fd 93.75%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.ebook-tab-btn.active::after {
position: absolute;
content: "";
left: 0;
bottom: 0px;
width: 100%;
height: 1px;
background: linear-gradient(135deg, #2f57ef 0%, #c464fd 93.75%);
}
.nav-link {
border: none !important;
}
.nav-items {
padding-bottom: 30px;
}
.rating {
padding-right: 12px;
}
.input {
padding-top: 16px;
}
.date {
font-weight: 500;
font-size: 13px;
color: #6b7385;
padding-bottom: 4px;
}
.related-ebooks {
padding-top: 100px;
}
.related-ebooks h2 {
font-weight: 600;
font-size: 40px;
color: #192335;
}
.related-ebooks-btn a {
margin: 0;
}
.related-ebooks-wrap {
margin-bottom: 50px;
justify-content: space-between;
}
.ebook-new-price {
font-family: var(--second-font-family);
font-weight: 500 !important;
font-size: 48px !important;
color: #edf0f7 !important;
}
.ePrice h2 {
color: #192335 !important;
font-size: 24px !important;
font-weight: 600 !important;
}
.ePrice .ebook-old-price del {
font-size: 18px !important;
margin-left: 10px;
color: #050e1f82;
}
.content h2 {
font-weight: 600;
font-size: 24px;
}
.ebook-card-img .card-img-top {
object-fit: contain;
height: 600px;
}
.ecardImage::after {
display: none !important;
}
.zoom-container {
position: relative;
overflow: hidden;
cursor: zoom-in;
}
.zoom-image {
transition: transform 0.4s ease-out, transform-origin 0.2s ease-out;
will-change: transform;
}
.magnific {
position: absolute;
right: 15px;
top: 6px;
background: #fff;
border-radius: 50%;
height: 30px;
width: 30px;
line-height: 30px;
text-align: center;
font-size: 14px;
}
.icon-confirm {
padding: 20px 0px;
}
#confirmModal {
font-size: 14px;
}
#confirmModal .title {
margin-bottom: 5px;
color: #000;
font-size: 18px;
font-weight: 500;
}
#confirmModal .text-muted {
font-size: 14px;
}
.confirmBtn .eBtn-red {
background-color: #e8e7ee;
color: #000;
padding: 7px 24px;
}
.confirmBtn .eBtn-green {
border-radius: 8px;
background: #242D47;
padding: 11px 24px;
border: none;
transition: .3s;
width: fit-content;
color: var(--whiteColor);
font-family: var(--font-primary);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 100%;
}
.confirmBtn {
padding-top: 15px;
padding-bottom: 20px;
border-top: 1px solid #d5d5d5;
margin-top: 15px;
}
/* ════════════════════════════════
RENDERED OUTPUT (display saved content)
════════════════════════════════ */
/* slide in */
.zPill-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.zPill-track {
position: relative;
display: inline-flex;
align-items: center;
gap: 4px;
list-style: none;
margin: 0;
padding: 5px;
background: rgba(0, 0, 0, 0.04);
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 14px;
white-space: nowrap;
}
.zPill-item {
position: relative;
z-index: 1;
}
.zPill-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 18px;
font-size: 14px;
font-weight: 500;
color: #6b7280;
background: transparent;
border: none;
border-radius: 10px;
cursor: pointer;
transition: color 0.25s ease;
white-space: nowrap;
outline: none;
position: relative;
z-index: 1;
}
.zPill-btn:hover {
color: #111827;
}
.zPill-btn.zPill-active {
color: #ffffff;
}
.zPill-glider {
position: absolute;
top: 5px;
height: calc(100% - 10px);
background: #FFBF00;
border-radius: 10px;
transition: left 0.28s cubic-bezier(0.22, 1, 0.36, 1),
width 0.28s cubic-bezier(0.22, 1, 0.36, 1);
z-index: 0;
}
.zPill-btn svg {
flex-shrink: 0;
}
/* Panels */
.zPill-panel {
display: none;
}
.zPill-panel.zPill-panel-active {
display: block;
animation: zSlideUp 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes zSlideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* About us page */
.about-hero {
margin-top: calc(-1 * var(--nav-height));
padding-top: calc(var(--nav-height) + 80px);
padding-bottom: 60px;
background: var(--bg-dark, #192335);
position: relative;
overflow: hidden;
}
.about-hero::before {
content: "";
position: absolute;
top: -100px;
right: -100px;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(53, 13, 191, 0.15) 0%, transparent 70%);
pointer-events: none;
}
.about-hero::after {
content: "";
position: absolute;
bottom: -80px;
left: -80px;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(124, 58, 237, 0.25) 0%, transparent 70%);
pointer-events: none;
}
.about-breadcrumb {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 24px;
}
.about-breadcrumb a {
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: color 0.2s;
}
.about-breadcrumb a:hover {
color: #fff;
}
.about-breadcrumb span {
color: rgba(255, 255, 255, 0.4);
font-size: 14px;
}
.about-breadcrumb .current {
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
font-weight: 500;
}
.about-hero-title {
font-size: 52px;
font-weight: 600;
color: #ffffff;
line-height: 1.15;
margin-bottom: 16px;
letter-spacing: -0.02em;
}
.about-hero-title span {
color: var(--purple-primary, #7c3aed);
}
.about-hero-subtitle {
font-size: 17px;
color: rgba(255, 255, 255, 0.6);
max-width: 520px;
line-height: 1.7;
}
.about-stats-bar {
display: flex;
align-items: center;
gap: 48px;
margin-top: 48px;
padding-top: 40px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
flex-wrap: wrap;
}
.about-stat-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.about-stat-number {
font-size: 32px;
font-weight: 600;
color: #ffffff;
line-height: 1;
}
.about-stat-label {
font-size: 13px;
color: rgba(255, 255, 255, 0.5);
font-weight: 500;
}
.about-stat-divider {
width: 1px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
}
.about-features {
padding: 60px 0 80px;
background: #f9fafb;
}
.about-features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 48px;
}
@media (max-width: 991px) {
.about-features-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 575px) {
.about-features-grid {
grid-template-columns: 1fr;
}
.about-hero-title {
font-size: 36px;
}
.about-stats-bar {
gap: 24px;
}
.about-stat-divider {
display: none;
}
}
.about-feature-card {
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 16px;
padding: 28px 24px;
transition: all 0.25s ease;
}
.about-feature-card:hover {
border-color: var(--purple-primary, #7c3aed);
box-shadow: 0 8px 30px rgba(124, 58, 237, 0.1);
transform: translateY(-3px);
}
.about-feature-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: rgba(124, 58, 237, 0.08);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
color: var(--purple-primary, #7c3aed);
}
.about-feature-title {
font-size: 16px;
font-weight: 600;
color: #111827;
margin-bottom: 8px;
}
.about-feature-text {
font-size: 14px;
color: #6b7280;
line-height: 1.6;
margin: 0;
}
.about-section-label {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: rgba(124, 58, 237, 0.08);
border-radius: 100px;
color: var(--purple-primary, #7c3aed);
font-size: 13px;
font-weight: 600;
margin-bottom: 16px;
}
.about-section-title {
font-size: 36px;
font-weight: 600;
color: #111827;
letter-spacing: -0.02em;
line-height: 1.2;
margin-bottom: 16px;
}
.about-section-subtitle {
font-size: 16px;
color: #6b7280;
line-height: 1.7;
max-width: 560px;
}
.about-content-section {
padding: 80px 0;
background: #ffffff;
}
.about-content-inner {
max-width: 860px;
margin: 0 auto;
}
.about-description-style {
font-size: 16px;
color: #374151;
line-height: 1.8;
}
.about-description-style h1,
.about-description-style h2,
.about-description-style h3,
.about-description-style h4 {
color: #111827;
font-weight: 600;
margin-top: 32px;
margin-bottom: 12px;
}
.about-description-style p {
margin-bottom: 16px;
}
.about-description-style ul,
.about-description-style ol {
padding-left: 20px;
margin-bottom: 16px;
}
.about-description-style li {
margin-bottom: 8px;
}
.about-description-style img {
max-width: 100%;
border-radius: 12px;
margin: 24px 0;
}
.about-founders-section {
padding: 80px 0;
background: #fafafb;
}
.about-founders-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 28px;
max-width: 900px;
margin: 40px auto 0;
}
.about-founder-card {
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 20px;
padding: 32px 20px;
text-align: center;
transition: all 0.25s ease;
}
.about-founder-card:hover {
border-color: var(--purple-primary, #7c3aed);
box-shadow: 0 8px 30px rgba(124, 58, 237, 0.1);
transform: translateY(-3px);
}
.about-founder-photo {
width: 112px;
height: 112px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto 18px;
display: block;
background: #f3f4f6;
}
.about-founder-name {
font-size: 17px;
font-weight: 600;
color: #111827;
margin-bottom: 4px;
}
.about-founder-role {
font-size: 13.5px;
color: var(--purple-primary, #7c3aed);
font-weight: 500;
margin-bottom: 14px;
}
.about-founder-social {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.about-founder-social a {
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(124, 58, 237, 0.08);
color: var(--purple-primary, #7c3aed);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.about-founder-social a:hover {
background: var(--purple-primary, #7c3aed);
color: #ffffff;
}
.about-cta {
padding: 80px 0;
background: transparent;
text-align: center;
position: relative;
}
.about-cta-title {
font-size: 40px;
font-weight: 600;
color: #111827;
margin-bottom: 16px;
letter-spacing: -0.02em;
}
.about-cta-text {
font-size: 16px;
color: #6b7280;
margin-bottom: 36px;
max-width: 480px;
margin-left: auto;
margin-right: auto;
}
/* Cookie Policy */
.cookie-hero {
margin-top: calc(-1 * var(--nav-height));
padding-top: calc(var(--nav-height) + 80px);
padding-bottom: 60px;
background-color: var(--bg-dark);
background-image:
radial-gradient(circle, rgba(117, 121, 255, 0.3) 0%, transparent 50%),
radial-gradient(circle, rgba(53, 13, 191, 0.4) 0%, transparent 50%);
background-size: 600px 600px, 500px 500px;
background-position: top -100px right -100px, bottom -100px left -100px;
background-repeat: no-repeat, no-repeat;
position: relative;
}
.cookie-breadcrumb {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 24px;
}
.cookie-breadcrumb a {
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: color 0.2s;
}
.cookie-breadcrumb a:hover {
color: #fff;
}
.cookie-breadcrumb span {
color: rgba(255, 255, 255, 0.4);
font-size: 14px;
}
.cookie-breadcrumb .current {
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
font-weight: 500;
}
.cookie-hero-title {
font-size: 52px;
font-weight: 600;
color: #ffffff;
line-height: 1.15;
margin-bottom: 16px;
letter-spacing: -0.02em;
}
.cookie-hero-title span {
color: var(--purple-primary, #7c3aed);
}
.cookie-hero-subtitle {
font-size: 17px;
color: rgba(255, 255, 255, 0.6);
max-width: 520px;
line-height: 1.7;
margin: 0;
}
.cookie-content-section {
padding: 80px 0;
background: #ffffff;
}
.cookie-content-inner {
max-width: 860px;
margin: 0 auto;
}
.cookie-section-label {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: rgba(124, 58, 237, 0.08);
border-radius: 100px;
color: var(--purple-primary, #7c3aed);
font-size: 13px;
font-weight: 600;
margin-bottom: 20px;
}
.cookie-description-style {
font-size: 16px;
color: #374151;
line-height: 1.8;
}
.cookie-description-style h1,
.cookie-description-style h2,
.cookie-description-style h3,
.cookie-description-style h4 {
color: #111827;
font-weight: 600;
margin-top: 32px;
margin-bottom: 12px;
}
.cookie-description-style p {
margin-bottom: 16px;
}
.cookie-description-style ul,
.cookie-description-style ol {
padding-left: 20px;
margin-bottom: 16px;
}
.cookie-description-style li {
margin-bottom: 8px;
}
.cookie-description-style img {
max-width: 100%;
border-radius: 12px;
margin: 24px 0;
}
.cookie-description-style a {
color: var(--purple-primary, #7c3aed);
text-decoration: underline;
}
.cookie-info-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 60px;
}
@media (max-width: 991px) {
.cookie-info-cards {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 575px) {
.cookie-info-cards {
grid-template-columns: 1fr;
}
.cookie-hero-title {
font-size: 36px;
}
}
.cookie-info-card {
background: #f9fafb;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 16px;
padding: 24px 20px;
transition: all 0.25s ease;
}
.cookie-info-card:hover {
border-color: var(--purple-primary, #7c3aed);
box-shadow: 0 8px 30px rgba(124, 58, 237, 0.1);
transform: translateY(-3px);
}
.cookie-info-icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(124, 58, 237, 0.08);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
color: var(--purple-primary, #7c3aed);
}
.cookie-info-title {
font-size: 15px;
font-weight: 600;
color: #111827;
margin-bottom: 6px;
}
.cookie-info-text {
font-size: 13px;
color: #6b7280;
line-height: 1.6;
margin: 0;
}
.cookie-cta {
padding: 60px 0 80px;
text-align: center;
}
.cookie-cta-title {
font-size: 32px;
font-weight: 600;
color: #111827;
margin-bottom: 12px;
letter-spacing: -0.02em;
}
.cookie-cta-text {
font-size: 15px;
color: #6b7280;
margin-bottom: 28px;
max-width: 440px;
margin-left: auto;
margin-right: auto;
}
/* Faq Page */
.faq-hero {
margin-top: calc(-1 * var(--nav-height));
padding-top: calc(var(--nav-height) + 80px);
padding-bottom: 60px;
background-color: var(--bg-dark);
background-image:
radial-gradient(circle, rgba(117, 121, 255, 0.3) 0%, transparent 50%),
radial-gradient(circle, rgba(53, 13, 191, 0.4) 0%, transparent 50%);
background-size: 600px 600px, 500px 500px;
background-position: top -100px right -100px, bottom -100px left -100px;
background-repeat: no-repeat, no-repeat;
position: relative;
}
.faq-breadcrumb {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 24px;
}
.faq-breadcrumb a {
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: color 0.2s;
}
.faq-breadcrumb a:hover {
color: #fff;
}
.faq-breadcrumb span {
color: rgba(255, 255, 255, 0.4);
font-size: 14px;
}
.faq-breadcrumb .current {
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
font-weight: 500;
}
.faq-hero-title {
font-size: 52px;
font-weight: 600;
color: #ffffff;
line-height: 1.15;
margin-bottom: 16px;
letter-spacing: -0.02em;
}
.faq-hero-title span {
color: var(--purple-primary, #7c3aed);
}
.faq-hero-subtitle {
font-size: 17px;
color: rgba(255, 255, 255, 0.6);
max-width: 520px;
line-height: 1.7;
margin: 0;
}
.faq-content-section {
padding: 80px 0;
background: #ffffff;
}
.faq-content-inner {
max-width: 860px;
margin: 0 auto;
}
.faq-section-label {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: rgba(124, 58, 237, 0.08);
border-radius: 100px;
color: var(--purple-primary, #7c3aed);
font-size: 13px;
font-weight: 600;
margin-bottom: 16px;
}
.faq-section-title {
font-size: 36px;
font-weight: 600;
color: #111827;
letter-spacing: -0.02em;
line-height: 1.2;
margin-bottom: 12px;
}
.faq-section-subtitle {
font-size: 16px;
color: #6b7280;
line-height: 1.7;
margin-bottom: 48px;
}
/* Custom Accordion */
.faq-accordion {
display: flex;
flex-direction: column;
gap: 12px;
}
.faq-accordion-item {
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 14px;
overflow: hidden;
transition: all 0.25s ease;
background: #ffffff;
}
.faq-accordion-item:hover {
border-color: rgba(124, 58, 237, 0.3);
box-shadow: 0 4px 20px rgba(124, 58, 237, 0.08);
}
.faq-accordion-item.open {
border-color: var(--purple-primary, #7c3aed);
box-shadow: 0 4px 20px rgba(124, 58, 237, 0.12);
}
.faq-accordion-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 24px;
cursor: pointer;
user-select: none;
}
.faq-accordion-question {
font-size: 16px;
font-weight: 600;
color: #111827;
line-height: 1.4;
margin: 0;
flex: 1;
}
.faq-accordion-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(124, 58, 237, 0.08);
display: flex;
align-items: center;
justify-content: center;
color: var(--purple-primary, #7c3aed);
flex-shrink: 0;
transition: all 0.25s ease;
}
.faq-accordion-item.open .faq-accordion-icon {
background: var(--purple-primary, #7c3aed);
color: #ffffff;
transform: rotate(45deg);
}
.faq-accordion-body {
display: none;
padding: 0 24px 20px;
}
.faq-accordion-item.open .faq-accordion-body {
display: block;
animation: faqSlideDown 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes faqSlideDown {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.faq-accordion-answer {
font-size: 15px;
color: #6b7280;
line-height: 1.7;
margin: 0;
padding-top: 4px;
border-top: 1px solid rgba(0, 0, 0, 0.06);
padding-top: 16px;
}
.faq-cta {
padding: 60px 0 80px;
text-align: center;
}
.faq-cta-title {
font-size: 32px;
font-weight: 600;
color: #111827;
margin-bottom: 12px;
letter-spacing: -0.02em;
}
.faq-cta-text {
font-size: 15px;
color: #6b7280;
margin-bottom: 28px;
max-width: 440px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 575px) {
.faq-hero-title {
font-size: 36px;
}
.faq-section-title {
font-size: 28px;
}
}
/* intructor details page */
/* Courses Section */
/* privacy policy */
.privacy-hero {
margin-top: calc(-1 * var(--nav-height));
padding-top: calc(var(--nav-height) + 80px);
padding-bottom: 60px;
background-color: var(--bg-dark);
background-image:
radial-gradient(circle, rgba(117, 121, 255, 0.3) 0%, transparent 50%),
radial-gradient(circle, rgba(53, 13, 191, 0.4) 0%, transparent 50%);
background-size: 600px 600px, 500px 500px;
background-position: top -100px right -100px, bottom -100px left -100px;
background-repeat: no-repeat, no-repeat;
position: relative;
}
.privacy-breadcrumb {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 24px;
}
.privacy-breadcrumb a {
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: color 0.2s;
}
.privacy-breadcrumb a:hover {
color: #fff;
}
.privacy-breadcrumb span {
color: rgba(255, 255, 255, 0.4);
font-size: 14px;
}
.privacy-breadcrumb .current {
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
font-weight: 500;
}
.privacy-hero-title {
font-size: 52px;
font-weight: 600;
color: #ffffff;
line-height: 1.15;
margin-bottom: 16px;
letter-spacing: -0.02em;
}
.privacy-hero-title span {
color: var(--purple-primary, #7c3aed);
}
.privacy-hero-subtitle {
font-size: 17px;
color: rgba(255, 255, 255, 0.6);
max-width: 520px;
line-height: 1.7;
margin: 0;
}
.privacy-info-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 60px;
}
@media (max-width: 991px) {
.privacy-info-cards {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 575px) {
.privacy-info-cards {
grid-template-columns: 1fr;
}
.privacy-hero-title {
font-size: 36px;
}
}
.privacy-info-card {
background: #f9fafb;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 16px;
padding: 24px 20px;
transition: all 0.25s ease;
}
.privacy-info-card:hover {
border-color: var(--purple-primary, #7c3aed);
box-shadow: 0 8px 30px rgba(124, 58, 237, 0.1);
transform: translateY(-3px);
}
.privacy-info-icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(124, 58, 237, 0.08);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
color: var(--purple-primary, #7c3aed);
}
.privacy-info-title {
font-size: 15px;
font-weight: 600;
color: #111827;
margin-bottom: 6px;
}
.privacy-info-text {
font-size: 13px;
color: #6b7280;
line-height: 1.6;
margin: 0;
}
.privacy-content-section {
padding: 80px 0;
background: #ffffff;
}
.privacy-content-inner {
max-width: 860px;
margin: 0 auto;
}
.privacy-section-label {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: rgba(124, 58, 237, 0.08);
border-radius: 100px;
color: var(--purple-primary, #7c3aed);
font-size: 13px;
font-weight: 600;
margin-bottom: 20px;
}
.privacy-description-style {
font-size: 16px;
color: #374151;
line-height: 1.8;
}
.privacy-description-style h1,
.privacy-description-style h2,
.privacy-description-style h3,
.privacy-description-style h4 {
color: #111827;
font-weight: 600;
margin-top: 32px;
margin-bottom: 12px;
}
.privacy-description-style p {
margin-bottom: 16px;
}
.privacy-description-style ul,
.privacy-description-style ol {
padding-left: 20px;
margin-bottom: 16px;
}
.privacy-description-style li {
margin-bottom: 8px;
}
.privacy-description-style img {
max-width: 100%;
border-radius: 12px;
margin: 24px 0;
}
.privacy-description-style a {
color: var(--purple-primary, #7c3aed);
text-decoration: underline;
}
.privacy-cta {
padding: 60px 0 80px;
text-align: center;
}
.privacy-cta-title {
font-size: 32px;
font-weight: 600;
color: #111827;
margin-bottom: 12px;
letter-spacing: -0.02em;
}
.privacy-cta-text {
font-size: 15px;
color: #6b7280;
margin-bottom: 28px;
max-width: 440px;
margin-left: auto;
margin-right: auto;
}
/* refund policy */
.refund-hero {
margin-top: calc(-1 * var(--nav-height));
padding-top: calc(var(--nav-height) + 80px);
padding-bottom: 60px;
background-color: var(--bg-dark);
background-image:
radial-gradient(circle, rgba(117, 121, 255, 0.3) 0%, transparent 50%),
radial-gradient(circle, rgba(53, 13, 191, 0.4) 0%, transparent 50%);
background-size: 600px 600px, 500px 500px;
background-position: top -100px right -100px, bottom -100px left -100px;
background-repeat: no-repeat, no-repeat;
position: relative;
}
.refund-breadcrumb {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 24px;
}
.refund-breadcrumb a {
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: color 0.2s;
}
.refund-breadcrumb a:hover {
color: #fff;
}
.refund-breadcrumb span {
color: rgba(255, 255, 255, 0.4);
font-size: 14px;
}
.refund-breadcrumb .current {
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
font-weight: 500;
}
.refund-hero-title {
font-size: 52px;
font-weight: 600;
color: #ffffff;
line-height: 1.15;
margin-bottom: 16px;
letter-spacing: -0.02em;
}
.refund-hero-title span {
color: var(--purple-primary, #7c3aed);
}
.refund-hero-subtitle {
font-size: 17px;
color: rgba(255, 255, 255, 0.6);
max-width: 520px;
line-height: 1.7;
margin: 0;
}
.refund-info-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 60px;
}
@media (max-width: 991px) {
.refund-info-cards {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 575px) {
.refund-info-cards {
grid-template-columns: 1fr;
}
.refund-hero-title {
font-size: 36px;
}
}
.refund-info-card {
background: #f9fafb;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 16px;
padding: 24px 20px;
transition: all 0.25s ease;
}
.refund-info-card:hover {
border-color: var(--purple-primary, #7c3aed);
box-shadow: 0 8px 30px rgba(124, 58, 237, 0.1);
transform: translateY(-3px);
}
.refund-info-icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(124, 58, 237, 0.08);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
color: var(--purple-primary, #7c3aed);
}
.refund-info-title {
font-size: 15px;
font-weight: 600;
color: #111827;
margin-bottom: 6px;
}
.refund-info-text {
font-size: 13px;
color: #6b7280;
line-height: 1.6;
margin: 0;
}
.refund-content-section {
padding: 80px 0;
background: #ffffff;
}
.refund-content-inner {
max-width: 860px;
margin: 0 auto;
}
.refund-section-label {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: rgba(124, 58, 237, 0.08);
border-radius: 100px;
color: var(--purple-primary, #7c3aed);
font-size: 13px;
font-weight: 600;
margin-bottom: 20px;
}
.refund-description-style {
font-size: 16px;
color: #374151;
line-height: 1.8;
}
.refund-description-style h1,
.refund-description-style h2,
.refund-description-style h3,
.refund-description-style h4 {
color: #111827;
font-weight: 600;
margin-top: 32px;
margin-bottom: 12px;
}
.refund-description-style p {
margin-bottom: 16px;
}
.refund-description-style ul,
.refund-description-style ol {
padding-left: 20px;
margin-bottom: 16px;
}
.refund-description-style li {
margin-bottom: 8px;
}
.refund-description-style img {
max-width: 100%;
border-radius: 12px;
margin: 24px 0;
}
.refund-description-style a {
color: var(--purple-primary, #7c3aed);
text-decoration: underline;
}
.refund-cta {
padding: 60px 0 80px;
text-align: center;
}
.refund-cta-title {
font-size: 32px;
font-weight: 600;
color: #111827;
margin-bottom: 12px;
letter-spacing: -0.02em;
}
.refund-cta-text {
font-size: 15px;
color: #6b7280;
margin-bottom: 28px;
max-width: 440px;
margin-left: auto;
margin-right: auto;
}
/* student frontend */
/* ---- Submitted Alert ---- */
/* ---- Score Block ---- */
/* ---- Feedback Block ---- */
/* Course Bundle */
/* Course Bundle */
@media all and (min-width:992px) {
.nav-menu {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
}
.offcanvas {
display: flex;
}
}
@media all and (max-width:991px) {
.nav-menu {
display: none !important;
position: absolute;
left: -550px;
height: 100vh;
background: var(--bg-white);
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
top: 0;
width: 398px;
z-index: 999;
justify-content: flex-start;
transition: .5s;
}
.gSearch-show {
width: 90%;
}
.left {
left: 0;
}
.single-feature {
width: 100%;
}
.testimonials-wrapper {
background-color: transparent;
}
.copyright-text {
justify-content: center;
margin-top: 13px;
}
.contact-left {
margin-top: 30px;
margin-left: 0;
}
.conatact-map iframe {
height: 450px;
}
.requirment ul li p {
max-width: 90%;
}
.ps-sidebar {
margin-top: 30px;
}
.ps-sidebar del {
font-size: 18px;
margin-top: 15px;
}
.ps-sidebar .g-title {
font-size: 34px;
}
.gradient-border {
background: transparent;
padding: 0;
}
.sidebar {
margin-bottom: 30px;
}
.offcanvas {
display: block;
}
}
@media all and (max-width:767px) {
.gSearch-show.active {
top: 79px;
}
.gSearch-show {
width: 96%;
}
.section-padding {
padding-top: 70px;
}
.g-title {
font-size: 34px;
}
.privacy-policy h3 {
font-size: 30px;
margin-bottom: 20px;
}
.hero-details img {
height: 400px;
}
.requirment {
flex-wrap: wrap;
}
.learn-creator {
flex-wrap: wrap;
}
.right-sub {
margin-top: 15px;
}
.sub-header-left ul {
justify-content: center;
}
/* Ebook */
.eBookDetails{
height: auto !important;
}
.ebook-tab-area {
margin-top: 0;
}
.ebook-card-img .card-img-top {
object-fit: cover;
height: 400px;
}
}
@media all and (max-width:576px) {
.gSearch-icon {
margin-right: 5px;
}
.gSearch-icon::after {
display: none;
}
.primary-end .nice-control {
margin-right: 2px;
}
.title {
font-size: 34px;
}
.single-feature .entry-title {
margin-top: 18px;
}
.entry-title h3 {
width: 90%;
}
.conatact-map iframe {
height: 300px;
}
.lesson-list li a {
flex-wrap: wrap;
gap: 10px;
}
.istructor-info {
flex-wrap: wrap;
gap: 20px;
}
.nav-menu {
width: 300px;
}
/* New for University home page*/
/* New for University home page ENDED*/
}
/* New Responsive */
@media all and (min-width: 576px){
/* Tutor Filter */
}
@media all and (max-width: 1199px){
/* Tutor Details */
}
@media all and (max-width: 991px){
/* Tutor Filter */
/* Tutor Details */
}
@media all and (max-width: 767px){
/* Tutor Filter */
/* Tutor Details */
}
@media all and (max-width: 575px){
/* Tutor Filter */
/* Tutor Details */
}
.text-16px {
font-size: 16px !important;
}
.text-14px {
font-size: 14px !important;
}
.nice-select.form-select ul.list {
width: auto;
border-radius: 8px;
border: 1px solid #fff;
padding: 5px 5px;
margin: 0px;
}
.nice-select.form-select ul li {
border-radius: 5px;
border: 1px solid #fff;
padding: 2px 10px;
margin: 0px;
}
/* Modal custom animation */
.fade-scale {
transform: scale(0);
opacity: 0;
-webkit-transition: all .2s cubic-bezier(0.87, 0.94, 0.68, 1.1);
-o-transition: all .2s cubic-bezier(0.87, 0.94, 0.68, 1.1);
transition: all .2s cubic-bezier(0.87, 0.94, 0.68, 1.1);
}
.fade-scale.in {
opacity: 1;
transform: scale(1);
}
@keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Modal custom animation Ended*/
/* 8 home page code start */
/* Common Css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--skinColor1: #13BE95;
--skinColor2: #5363D2;
--skinColor3: #00907f;
--skinColor4: #f95c16;
--skinColor5: #264871;
--skinColor6: #ff2458;
--whiteColor: #FFF;
--blackColor: #000;
/* Background Colors */
--bg-white: #ffffff;
--bg-light: #f4f7fd;
--bg-lighter: #F6F7F8;
--bg-lightest: #f8f7fe;
--bg-gray: #edf0f7;
--bg-dark: #050328;
}
body {
padding: 0;
margin: 0;
color: #858C8A;
font-family: var(--font-primary);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
background-color: #fff;
}
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
label {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
display: inline-block;
color: inherit;
transition: .3s;
outline: none;
}
.btn:focus,
button:focus,
.form-control:focus {
box-shadow: none;
}
button {
border: none;
outline: none;
}
img {
max-width: 100%;
max-height: 100%;
display: block;
}
i[class^="fi-rr-"]:before,
span[class^="fi-rr-"]:before {
line-height: unset;
}
/* old */
/* new */
/* flex gap */
/* old */
.mb-20 {
margin-bottom: 20px;
}
.mb-30 {
margin-bottom: 30px;
}
/* new */
/* padding */
/* font size */
.fs-28px {
font-size: 28px !important;
}
/* line hight */
/* title */
/* Text Color */
/* ===================================================================
Header Footer CSS Start
====================================================================*/
/* Header Area Css Start ***
**************************/
.nav-wrap {
column-gap: 50px;
}
.nav-area ul {
column-gap: 50px;
}
.nav-area ul li a {
font-family: var(--font-primary);
font-size: 15px;
font-weight: 500;
transition: .3s;
position: relative;
color: #858c8a;
z-index: 3;
}
.nav-area ul li a svg {
display: none;
}
.nav-area nav>ul>li>a::after {
position: absolute;
content: " ";
left: 0;
bottom: -2px;
height: 2px;
width: 0px;
background: var(--skinColor1);
border-radius: 3px;
transition: .3s;
z-index: -1;
}
.nav-area ul li a.active,
.nav-area ul li a:hover {
color: #0d221d;
}
.nav-area ul li a.active::after,
.nav-area ul li a:hover::after {
width: 20px;
}
/* Dropdown */
.nav-area nav>ul>li {
position: relative;
}
.nav-area ul li .menu-dropdown {
position: absolute;
border-radius: 10px;
background: var(--whiteColor);
box-shadow: 0px 8px 38px 0px rgba(16, 16, 16, 0.08);
padding: 8px;
min-width: 220px;
left: 0;
top: calc(100% + 25px);
transform: translateX(-37%);
visibility: hidden;
opacity: 0;
transition: .5s;
z-index: 2;
}
.nav-area nav>ul li:hover .menu-dropdown {
top: calc(100% + 16px);
visibility: visible;
opacity: 1;
}
.nav-area ul li .menu-dropdown a {
padding: 8px;
border-radius: 7px;
width: 100%;
transition: .3s;
}
.nav-area ul li .menu-dropdown a:hover {
background: rgba(19, 190, 149, 0.08);
color: var(--skinColor1);
}
.nav-area ul li .menu-dropdown::after {
content: "";
position: absolute;
width: 0px;
height: 0px;
background: transparent;
border: 17px solid transparent;
border-bottom-color: var(--whiteColor);
top: -34px;
left: 50%;
transform: translateX(-50%);
filter: drop-shadow(0px -2px 38px rgba(16, 16, 16, 0.08));
}
/* Language Dropdown */
.language-dropdown .nice-select .list {
border-radius: 10px;
background: var(--whiteColor);
box-shadow: 0px 8px 38px 0px rgba(16, 16, 16, 0.08);
padding: 8px;
min-width: 115px;
left: -50%;
transform: translateX(-10%);
}
.language-dropdown .nice-select .option.selected {
font-weight: 500;
}
.language-dropdown .nice-select .option {
font-family: var(--font-primary);
color: #858C8A;
font-size: 15px;
font-style: normal;
font-weight: 500;
line-height: normal;
padding: 8px;
border-radius: 7px;
}
/* Nice Select */
.language-dropdown .nice-select {
margin: 0;
padding-right: 26px;
padding-left: 0;
background: transparent;
color: #192335;
font-family: var(--font-primary);
font-size: 15px;
font-style: normal;
font-weight: 500;
line-height: normal;
border: none;
display: flex;
align-items: center;
}
.language-dropdown .nice-select:after {
border: none;
background-image: url(/assets/frontend/default/image/angle-down-black-20.svg);
background-repeat: no-repeat;
background-size: 20px;
transform-origin: 10px 0;
right: 0px;
height: 20px;
width: 20px;
top: 50%;
transform: rotate(0deg) translateY(-50%);
margin: 0;
margin-top: 1px;
}
.language-dropdown .nice-select.open:after {
transform: rotate(180deg) translateY(-50%);
}
/* Search */
.nav-btn-area .nav-search {
margin-right: 20px;
}
.nav-search .search-form {
right: 200px;
top: 200px;
}
.nav-search .search-form .search-submit {
display: none;
}
/* clears the ‘X’ from Internet Explorer */
.nav-search input[type=search]::-ms-clear {
display: none;
width: 0;
height: 0;
}
.nav-search input[type=search]::-ms-reveal {
display: none;
width: 0;
height: 0;
}
/* clears the ‘X’ from Chrome */
.nav-search input[type="search"]::-webkit-search-decoration,
.nav-search input[type="search"]::-webkit-search-cancel-button,
.nav-search input[type="search"]::-webkit-search-results-button,
.nav-search input[type="search"]::-webkit-search-results-decoration {
display: none;
}
.nav-search input:-webkit-autofill,
.nav-search input:-webkit-autofill:focus {
transition: background-color 600000s 0s, color 600000s 0s;
}
.nav-btn-area .language-dropdown {
padding: 0 30px 0 20px;
position: relative;
}
.nav-btn-area .language-dropdown::after {
position: absolute;
content: "";
height: 20px;
width: 1px;
background: #EDF0F7;
left: 0;
top: 50%;
transform: translateY(-50%);
}
/* Off Canvas Css Start */
/* Off Canvas Css End */
/* Header Area Css End ***
************************/
/* Footer Area Css End ***
************************/
/* Footer Nav */
/* Footer Bottom */
/* Footer Area Css End ***
************************/
/* ===================================================================
Header Footer CSS End
====================================================================*/
/* ===================================================================
Elegant Homepage 1 CSS Start
====================================================================*/
/* Crash Course */
/* Section Title */
/* Course Card */
/* Why Choose */
/* Testimonial */
.elegant-testimonial-2 .swiper-slide {
height: auto;
}
.elegant-testimonial-1 .swiper-slide {
height: auto;
}
/* QNA Accordion */
/* Blog Post */
/* Download */
/* ===================================================================
Elegant Homepage 1 CSS End
====================================================================*/
/* ===================================================================
Meditation CSS Start
====================================================================*/
/* Harmony */
/* Pose's Journey */
/* Yoga Benefti */
/* True Self */
/* Video */
/* Pricing */
/* Blog */
/* ===================================================================
Meditation CSS End
====================================================================*/
/* ===================================================================
Cooking CSS Start
====================================================================*/
/* Service */
/* Section Title */
/* Course Card */
/* Course List View */
/* Counter */
/* Kitchen */
/* Become Instructor */
/* Video Modal */
/* Video */
/* Popular Instructor */
/* Frequently Asked Questions */
/* Accordion */
/* News */
/* ===================================================================
Cooking CSS End
====================================================================*/
/* ===================================================================
Development CSS End
====================================================================*/
/* Software Development */
/* Section Title */
/* Course */
/* Programming E-book */
/* QNA Accordion */
/* Testimonial */
.dev-student-swiper .swiper-slide {
height: auto;
}
.swiper-button-wrap .swiper-button-next,
.swiper-button-wrap .swiper-button-prev {
position: inherit;
margin: 0;
height: 46px;
width: 46px;
}
.swiper-button-wrap .swiper-button-next:after,
.swiper-button-wrap .swiper-button-prev:after {
content: "";
height: 46px;
width: 46px;
background-size: 46px;
background-position: center;
background-repeat: no-repeat;
}
.swiper-button-wrap .swiper-button-next:after {
background-image: url(/assets/frontend/default/image/angle-circle-right-46.svg);
}
.swiper-button-wrap .swiper-button-prev:after {
background-image: url(/assets/frontend/default/image/angle-circle-left-46.svg);
}
.swiper-button-wrap .swiper-button-next.swiper-button-disabled,
.swiper-button-wrap .swiper-button-prev.swiper-button-disabled {
opacity: 0.45;
}
/* News Blog */
/* ===================================================================
Development CSS End
====================================================================*/
/* ===================================================================
Language CSS Start
====================================================================*/
/* Service */
/* Course */
/* card design */
/* card 1 */
i:not(.fas, .fa, .fab) {
/* line-height: 1.5em !important; */
/* vertical-align: -0.12em !important; */
display: inline-flex;
}
i[class^="fi-rr-"]:before,
i[class*=" fi-rr-"]:before,
span[class^="fi-rr-"]:before,
span[class*="fi-rr-"]:before {
line-height: 1.5em !important;
}
/* card hover */
/* Form and Why choose Area */
/* Team */
/* Language Slider */
/* Details */
/* ===================================================================
Language CSS End
====================================================================*/
/* ===================================================================
Kindergarten CSS End
====================================================================*/
/* Category */
/* Accordion */
/* Testimonial */
.lms-testimonial-1 .swiper-slide {
height: auto;
}
.lms-testimonial-1 .swiper-button-prev,
.lms-testimonial-1 .swiper-button-next {
background: rgba(134, 134, 141, 0.15);
backdrop-filter: blur(8px);
height: 42px;
width: 42px;
border-radius: 50%;
color: var(--blackColor);
transition: .3s;
}
.swiper-button-next {
right: 3px;
}
.swiper-button-prev {
left: 3px;
}
.lms-testimonial-1 .swiper-button-prev:hover,
.lms-testimonial-1 .swiper-button-next:hover {
background: var(--skinColor2);
color: var(--whiteColor);
}
.lms-testimonial-1 .swiper-button-prev:after,
.lms-testimonial-1 .swiper-button-next:after {
font-size: 14px;
font-weight: bold;
margin-left: -2px;
}
.swiper-slide.swiper-slide-active .testimonial1-profile-img {
outline-color: #FF375E;
}
/* ===================================================================
Kindergarten CSS End
====================================================================*/
/* ===================================================================
Marketplace CSS Start
====================================================================*/
.banner-swiper-1 .swiper-horizontal>.swiper-pagination-bullets,
.banner-swiper-1 .swiper-pagination-bullets.swiper-pagination-horizontal,
.banner-swiper-1 .swiper-pagination-custom,
.banner-swiper-1 .swiper-pagination-fraction {
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
height: 10.35px;
}
.banner-swiper-1 .swiper-pagination-bullet {
height: 8.62px;
width: 8.62px;
background: #b6bdc6;
opacity: 1;
transition: .3s;
}
.banner-swiper-1 .swiper-pagination-bullet-active {
height: 10.35px;
width: 10.35px;
background: var(--whiteColor);
}
.banner-swiper-1 .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.banner-swiper-1 .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 4.75px;
}
/* Categories */
/* Card */
/* Counter */
/* Video */
/* QNA Accordion */
/* Testimonial */
.lms-testimonial-2 .swiper-slide {
height: auto;
}
/* Subscribe Area */
/* blog */
/* ===================================================================
Marketplace CSS End
====================================================================*/
/* ===================================================================
University CSS Start
====================================================================*/
/* New Start */
/* Video */
/* New End */
/* .lms-banner-section4 {
padding-top: 60px;
background: #121421;
} */
/* Service */
/* Community */
/* Section Title */
/* Event */
/* Accordion */
/* ===================================================================
University CSS End
====================================================================*/
/* 8 home page code ended */
.hero-details {
margin-top: 20px;
}
.page-content-pb-100 {
padding-bottom: 40px !important;
}
@media only screen and (min-width: 992px) {
.page-static-sidebar {
position: sticky;
top: 5px;
margin-top: -365px;
}
.hero-details,
.details-page-content {
margin-top: -100px;
}
.page-content-pb-100 {
padding-bottom: 100px !important;
}
}
.course-details h2.g-title {
margin: 30px 0px 20px 0px !important;
}
.course-details .g-text {
margin-bottom: 30px;
color: var(--bg-white);
}
.hero-details img {
height: auto;
}
.eNtery-item {
position: relative;
}
.breadcum-area:after {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgb(255 255 255 / 94%) 0%, rgb(255 255 255 / 35%) 70%);
z-index: -1;
}
.breadcum-area.bg-white:after {
background: linear-gradient(180deg, rgb(255 255 255 / 94%) 0%, rgb(255 255 255 / 68%) 70%) !important;
}
.sub-header-left .nice-select {
padding: 0px;
}
.eNtry-breadcum .breadcrumb-item.active {
color: #ffffff;
}
.tab-list li.active {
border-radius: 6px;
}
.tooltip {
font-size: 13px;
}
/*Start common css*/
.ellipsis-line-1 {
display: -webkit-box !important;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: normal !important;
}
.ellipsis-line-2 {
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: normal !important;
}
.ellipsis-line-4 {
display: -webkit-box !important;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}
.alert-purple {
color: #b94aff;
background-color: #c364ff1a;
border-color: #c364ff45;
}
.alert-purple a {
color: #b94aff;
}
/* floating searchbar for mobile app */
.primary-end .nice-control .current {
display: inline-block !important;
padding: 0px 6px !important;
}
/* floating searchbar for mobile app ENDED*/
.modal-spinner-border {
width: 100px;
height: 100px;
line-height: 100px;
padding: 0px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.color-linkedin {
color: #0077b5;
}
.color-whatsapp {
color: #128c7e;
}
.color-twitter {
color: #1DA1F2;
}
.color-facebook {
color: #316FF6;
}
.description-style {
color: #3b3b3b;
}
.description-style h1,
.description-style h2,
.description-style h3,
.description-style h4,
.description-style h5,
.description-style h6 {
margin-bottom: 14px;
}
.description-style h1,
.description-style h2,
.description-style h3,
.description-style h4,
.description-style h5,
.description-style h6,
.description-style strong {
color: #232323;
}
.description-style ul,
.description-style ol {
list-style: initial;
margin: initial;
padding: 0px 0px 0px 17.5px;
}
.card.Ecard.eBar-card {
height: 400px;
}
.ps-box {
position: relative;
z-index: 2;
}
.breadcum-area {
z-index: 0 !important;
background-color: var(--dark-bg);
}
.nav.nav-bordered .nav-link {
border-bottom: 2px solid #2f56f000;
color: #131315;
}
.nav.nav-bordered .nav-link:hover,
.nav.nav-bordered .nav-link.active {
border-bottom: 2px solid #2f57f0;
color: #2f57f0;
}
/* overlap content start*/
.overlay-content.show-more {
max-height: 125px;
height: min-content;
overflow-y: hidden;
position: relative;
}
.overlay-content-max-h-800.show-more {
max-height: 800px;
}
.overlay-content-max-h-700.show-more {
max-height: 700px;
}
.overlay-content-max-h-600.show-more {
max-height: 600px;
}
.overlay-content-max-h-500.show-more {
max-height: 500px;
}
.overlay-content-max-h-400.show-more {
max-height: 400px;
}
.overlay-content-max-h-300.show-more {
max-height: 300px;
}
.overlay-content-max-h-200.show-more {
max-height: 200px;
}
.overlay-content-max-h-150.show-more {
max-height: 150px;
}
.overlay-content-max-h-100.show-more {
max-height: 100px;
}
.overlay-content.show-less {
position: relative;
padding-bottom: 40px;
}
.overlay-content.show-more p:last-child {
position: absolute;
width: -webkit-fill-available;
z-index: 1111;
bottom: 0px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%);
padding: 30px 0px 6px 0px;
}
.overlay-content.show-less p:last-child {
padding: 5px 0px;
width: -webkit-fill-available;
position: absolute;
z-index: 1111;
bottom: -8px;
}
/* overlap content ended*/
.sub-header li.primary-end {
height: 22px !important;
margin-top: 4px !important;
}
.swiper-button-prev,
.swiper-button-next {
border-radius: 50%;
height: 50px;
width: 50px;
border: 1px solid #000;
color: #000;
transition: 0.3s;
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
background-color: #000;
color: #fff;
transition: 0.3s;
}
.swiper-button-next:after,
.swiper-button-prev:after {
font-size: 25px;
}
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
content: "";
font-family: "uicons-regular-rounded";
}
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
content: "";
font-family: "uicons-regular-rounded";
}
.swiper-horizontal .row .swiper-scrollbar {
height: 5px;
width: 240px;
}
@media all and (max-width:400px) {
.swiper-horizontal .row .swiper-scrollbar {
height: 5px;
width: 180px;
}
}
.swiper-scrollbar-drag {
background: #000;
}
.swiper-scrollbar {
background: #fff;
box-shadow: 0px 0px 5px 2px #413d3d0a;
}
.swiper-button-prev {
left: 20px;
}
.swiper-button-next {
right: 20px;
}
@media all and (max-width:576px) {
.swiper-slide {
padding-left: 15px;
padding-right: 15px;
}
}
.meditation-testimonial-1 .swiper-slide{
height: unset;
}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{
content: "" !important;
}
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{
content: "" !important;
}
.editor-content ul, .editor-content ol{
margin: 0px 14px;
padding: unset;
list-style: unset;
}
.editor-content *{
max-width: 100%;
}
@media all and (max-width: 1399px) {
/* Development Css Start */
/* Development Css End */
}
@media all and (max-width: 1199px) {
/* Header Css Start */
.nav-area ul {
column-gap: 30px;
}
.nav-wrap {
column-gap: 30px;
}
.language-dropdown .nice-select {
padding-right: 20px;
}
.language-dropdown .nice-select .list {
transform: translateX(-14%);
}
.nav-btn-area .nav-search {
margin-right: 0px;
}
.nav-btn-area .language-dropdown::after {
display: none;
}
/* Header Css End */
/* Footer Css Start */
/* Footer Css End */
/* Homepage 1 Css End */
/* Meditation Css Start */
/* Meditation Css End */
/* Cooking Css Start */
/* Cooking Css End */
/* Development Css Start */
/* Development Css End */
/* Kindertarten Css Start */
/* Kindertarten Css End */
}
@media all and (max-width: 991px) {
/* Header Css Start */
.nav-btn-area {
display: none !important;
}
.nav-area ul {
flex-direction: column;
align-items: baseline !important;
}
.nav-area ul li .menu-dropdown {
position: inherit;
transform: translateX(0);
visibility: visible;
opacity: 1;
border-radius: 0;
padding: 0;
box-shadow: none;
}
.nav-area nav>ul>li {
position: inherit;
}
.nav-area ul li a {
display: flex;
align-items: center;
column-gap: 6px;
position: inherit;
padding: 12px;
border-radius: 8px;
margin-bottom: 8px;
line-height: 24px;
letter-spacing: -0.15px;
width: 291px;
}
.nav-area ul li a svg {
display: block;
}
.nav-area ul li a.active svg path,
.nav-area ul li a:hover svg path {
fill: var(--skinColor1);
}
.nav-area ul li a.active,
.nav-area ul li a:hover {
background: rgba(19, 190, 149, 0.08);
color: var(--skinColor1);
}
.nav-area ul li.menu-item-has-children>a {
position: relative;
}
.nav-area ul li.menu-item-has-children .menu-dropdown {
display: none;
transition: 0s;
}
.nav-area ul li .menu-dropdown::after {
display: none;
}
.nav-area nav>ul>li>a::after {
display: none;
}
.nav-area ul li .menu-dropdown a {
padding: 6px 12px 6px 42px;
}
/* Header Css End */
/* Footer Css Start */
/* Footer Css End */
/* Homepage 1 Css Start */
/* Homepage 1 Css End */
/* Meditation Css Start */
/* Meditation Css End */
/* Cooking Css start */
/* Cooking Css End */
/* Development Css Start */
/* Development Css End */
/* Language Css Start */
/* Language Css End */
/* Kindergarten Css Start */
/* Kindergarten Css End */
/* Marketplace Css Start */
/* Marketplace Css End */
/* University Css Start */
/* University Css End */
}
@media all and (max-width: 767px) {
/* Header Css Start */
/* Header Css End */
/* Footer Css Start */
/* Footer Css End */
/* Homepage 1 Css Start */
/* Homepage 1 Css End */
/* Meditation Css Start */
/* Meditation Css End */
/* Cooking Css Start */
/* Cooking Css End */
/* Development Css Start */
/* Development Css End */
/* Language Css Start */
/* Language Css End */
/* Kindergarten Css Start */
/* Kindergarten Css End */
/* Marketplace Css Start */
/* Marketplace Css End */
}
@media all and (max-width: 575px) {
.fs-28px {
font-size: 24px !important;
}
/* Footer Css Start */
/* Footer Css End */
/* Homepage 1 Css Start */
/* Homepage 1 Css End */
/* Meditation Css Start */
/* Meditation Css End */
/* Cooking Css Start */
/* Cooking Css End */
/* Development Css Start */
.swiper-button-wrap .swiper-button-next,
.swiper-button-wrap .swiper-button-prev {
height: 38px;
width: 38px;
}
.swiper-button-wrap .swiper-button-next:after,
.swiper-button-wrap .swiper-button-prev:after {
height: 38px;
width: 38px;
background-size: 38px;
}
/* Development Css End */
/* Language Css Start */
/* Language Css End */
/* Kindergarten Css Start */
/* Kindergarten Css End */
/* Marketplace Css Start */
/* Marketplace Css End */
/* University Css Start */
/* University Css End */
}
@media all and (max-width: 450px) {
/* Development Css Start */
/* Development Css End */
/* Marketplace Css Start */
/* Marketplace Css End */
}
/* EPS payment badge — centered full-width row in the footer container, uses light-background badge art */
.footer-payment {
margin-top: 40px;
padding-top: 32px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
justify-content: center;
}
.footer-payment-img {
width: 100%;
max-width: 900px;
height: auto;
border-radius: var(--radius-md);
}
.footer-payment-img--mobile {
display: none;
}
@media (max-width: 640px) {
.footer-payment-img--desktop {
display: none;
}
.footer-payment-img--mobile {
display: block;
}
}
/* Cart — toast + header badge + add-to-cart buttons */
.krititto-cart-toast {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%) translateY(16px);
background: #0d1117;
color: #fff;
padding: 12px 22px;
border-radius: 999px;
font-size: 14px;
font-weight: 500;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
opacity: 0;
transition: opacity 0.25s ease, transform 0.25s ease;
z-index: 9999;
pointer-events: none;
}
.krititto-cart-toast.is-visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.header-cart-link {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
color: inherit;
text-decoration: none;
transition: transform 0.2s ease, background 0.2s ease;
}
.header-cart-link:hover {
background: rgba(0, 0, 0, 0.05);
transform: translateY(-2px);
}
.krititto-cart-badge {
display: none;
align-items: center;
justify-content: center;
position: absolute;
top: -6px;
right: -6px;
min-width: 19px;
height: 19px;
padding: 0 5px;
border-radius: 999px;
background: linear-gradient(135deg, #ff6b6b, #dc3545);
box-shadow: 0 2px 6px rgba(220, 53, 69, 0.5), 0 0 0 2px #08090f;
color: #fff;
font-size: 10.5px;
font-weight: 700;
line-height: 1;
}
.eBtn-cart {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
flex-shrink: 0;
border-radius: 10px;
border: 1.5px solid rgba(0, 0, 0, 0.12);
background: #fff;
color: var(--bg-dark, #0d1117);
font-size: 17px;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.eBtn-cart:hover {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.2);
}