/* style.css */
/* --- 1. Variables & Global Styles --- */
:root {
--color-primary-dark: #161618;
--color-accent-gold: #d4af37;
--color-text-light: #f0f0f0;
--color-text-medium: #a0a0a0;
--glass-bg: rgba(255, 255, 255, 0.05);
--glass-bg: rgba(30, 30, 30, 0.7);
--glass-border: 1px solid rgba(255, 255, 255, 0.1);
--color-accent-gold-dark: #e0a800;
--color-bg-light: #1a1a1d;
--color-secondary-dark: #1e1e1e;
/* Tag Colors */
--tag-red: #ff6868;
--tag-orange: #ffb362;
--tag-green: #4ade80;
--tag-blue: #60a5fa;
--tag-purple: #c084fc;
/* Typography */
--font-primary: "Poppins", sans-serif;
--font-bengali: "Hind Siliguri", sans-serif;
/* Shadows and Transitions */
--shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.3);
--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
--transition-base: all 0.3s ease;
--soft-transition: all 0.3s ease-in-out;
}
h1,
h2,
h3,
h4,
p,
a,
span,
li,
button,
select,
option,
label {
font-family: var(--font-bengali), var(--font-primary);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scrollbar-width: thin;
scrollbar-color: var(--color-accent-gold) var(--color-primary-dark);
}
ul li {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
body,
html {
overflow-x: hidden;
}
body {
background-color: var(--color-primary-dark);
color: var(--color-text-light);
overflow-x: hidden;
font-family: var(--font-bengali), var(--font-primary);
line-height: 1.6;
}
/* --- Navigation Styles --- */
/* Style for the 'active' link (used by both navs) */
.nav-link.active,
.nav-item.active {
color: var(--color-accent-gold);
/* Your gold accent color */
}
.mt-100 {
margin-top: 100px !important;
}
.mt-50 {
margin-top: 50px !important;
}
.main-content {
padding-bottom: 80px;
}
/* --- 1. General About Page Styles --- */
/* Apply Bengali font to elements that need it */
.section-title,
.mission-text,
.timeline-content {
font-family: "Hind Siliguri", "Poppins", sans-serif;
}
/* --- 1. Desktop Header (Hidden by default) --- */
/* --- NEW TOPBAR STYLES (Adapted for Dark Theme) --- */
.topbar {
background: rgba(22, 22, 24, 0.7);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--glass-border);
padding: 0 24px;
height: 70px;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
.topbar__container {
max-width: 1200px;
margin: 0 auto;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
.event-search {
cursor: pointer;
font-size: 1.5rem;
color: var(--color-text-light);
/* FIX: Add z-index to keep it clickable */
position: relative;
z-index: 1001;
}
.fullscreen-search {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--color-primary-dark);
display: flex;
align-items: center;
justify-content: center;
padding: 0 20px;
gap: 15px;
z-index: 1000;
opacity: 0;
transform: translateY(-100%);
pointer-events: none;
transition: transform 0.4s ease, opacity 0.4s ease;
}
.fullscreen-search.active {
/* সক্রিয় অবস্থা (দৃশ্যমান) */
opacity: 1;
transform: translateY(0);
pointer-events: auto;
/* সক্রিয় অবস্থায় ক্লিক করা যাবে */
}
.fullscreen-search input {
width: 100%;
max-width: 800px;
padding: 12px 20px;
font-size: 1rem;
border-radius: 30px;
border: 1px solid rgba(255, 255, 255, 0.1);
background-color: rgba(255, 255, 255, 0.1);
color: #fff;
outline: none;
}
.fullscreen-search input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.close-search {
background: none;
border: none;
font-size: 2.5rem;
color: #fff;
cursor: pointer;
line-height: 1;
padding: 0;
}
.topbar__logo a {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
}
.topbar__logo img {
max-height: 50px;
width: auto;
}
.topbar__nav--desktop {
display: none;
gap: 40px;
}
.topbar__nav--desktop a {
text-decoration: none;
color: var(--color-text-light);
font-weight: 600;
font-size: 1rem;
padding: 10px 0;
position: relative;
transition: color 0.3s ease;
}
.topbar__nav--desktop a:hover,
.topbar__nav--desktop a.active {
color: var(--color-accent-gold);
}
.topbar__nav--desktop a.active::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: var(--color-accent-gold);
}
.topbar__actions {
display: flex;
align-items: center;
gap: 20px;
}
.action-icon {
display: flex;
color: var(--color-text-medium);
text-decoration: none;
position: relative;
font-size: 1.5rem;
transition: color 0.2s ease;
}
.action-icon:hover {
color: var(--color-text-light);
}
.notification-badge {
position: absolute;
top: -2px;
right: -4px;
background-color: #ef4444;
color: white;
font-size: 0.6rem;
font-weight: 700;
width: 14px;
height: 14px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
/* ============================================= */
/* 15. Notification Dropdown (Solid & Premium) */
/* ============================================= */
/* Wrapper for positioning */
.notification-wrapper {
position: relative;
}
.notification-dropdown {
position: absolute;
top: calc(100% + 15px);
/* Position below the header */
right: 0;
width: 380px;
/* Solid, rich dark background instead of transparent */
background-color: #1f2229;
/* A deep, solid dark color */
border: 1px solid #333740;
/* A subtle border */
border-radius: 12px;
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.25);
z-index: 1050;
color: #eaecef;
/* Light text for high contrast and readability */
/* Smooth transition for showing/hiding */
opacity: 0;
visibility: hidden;
transform: translateY(10px) scale(0.98);
transition: opacity 0.25s ease, transform 0.25s ease;
}
/* The small arrow pointing up */
.notification-dropdown::before {
content: "";
position: absolute;
top: -9px;
right: 18px;
width: 16px;
height: 16px;
background-color: #1f2229;
/* Matches the solid background */
border-top: 1px solid #333740;
border-left: 1px solid #333740;
transform: rotate(45deg);
}
/* Active state to show the dropdown */
.notification-dropdown.active {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.notification-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid #333740;
/* Clearer separator */
}
.notification-header h4 {
margin: 0;
font-size: 1rem;
font-weight: 600;
color: #ffffff;
/* Bright white for the heading */
}
.mark-all-read {
font-size: 0.8rem;
color: var(--color-accent-gold, #d4af37);
/* Golden accent color */
text-decoration: none;
font-weight: 500;
background: none;
border: none;
cursor: pointer;
transition: color 0.2s;
}
.mark-all-read:hover {
color: #fff;
}
.notification-list {
max-height: 380px;
overflow-y: auto;
}
/* Custom scrollbar for a modern look */
.notification-list::-webkit-scrollbar {
width: 6px;
}
.notification-list::-webkit-scrollbar-track {
background: transparent;
}
.notification-list::-webkit-scrollbar-thumb {
background-color: #4a4e57;
border-radius: 6px;
}
.notification-list::-webkit-scrollbar-thumb:hover {
background-color: #6a6e77;
}
.notification-item {
display: flex;
align-items: flex-start;
gap: 15px;
padding: 15px 20px;
border-bottom: 1px solid #2c2f37;
/* Subtle item separator */
text-decoration: none;
color: inherit;
transition: background-color 0.2s ease;
}
.notification-item:hover {
background-color: #2a2d34;
/* A slight hover effect */
}
/* Unread item style with a more noticeable background */
.notification-item.unread {
background-color: rgba(212, 175, 55, 0.1);
/* A soft golden tint */
border-left: 3px solid var(--color-accent-gold, #d4af37);
/* A clear indicator on the left */
padding-left: 17px;
/* Adjust padding to compensate for the border */
}
.status-dot {
display: none;
/* The left border is a better indicator, so we hide the dot */
}
.notification-content {
flex-grow: 1;
}
.notification-text {
margin: 0;
font-size: 0.9rem;
color: #d1d5db;
/* Soft white for better readability */
line-height: 1.5;
}
.notification-text strong {
color: #ffffff;
/* Important parts in bright white */
font-weight: 600;
}
.notification-meta {
font-size: 0.75rem;
color: #8d939d;
/* Muted gray for meta info */
margin-top: 4px;
display: block;
}
.live-badge-small {
background-color: var(--color-accent-red, #ff5b5b);
color: white;
padding: 2px 6px;
border-radius: 4px;
font-size: 0.7rem;
font-weight: 700;
margin-right: 5px;
vertical-align: middle;
}
.notification-footer {
text-align: center;
padding: 10px;
border-top: 1px solid #333740;
background-color: #1a1c22;
/* Slightly different footer background */
}
.see-all-btn {
font-weight: 600;
color: var(--color-accent-gold, #d4af37);
text-decoration: none;
font-size: 0.9rem;
display: block;
padding: 10px;
border-radius: 8px;
transition: background-color 0.2s, color 0.2s;
}
.see-all-btn:hover {
background-color: var(--color-accent-gold, #d4af37) !important;
color: #1f2229;
/* Dark text on hover */
}
.profile-avatar img {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--glass-border);
}
.btn {
flex-shrink: 0;
}
.btn-login {
background-color: var(--color-accent-gold);
color: var(--color-primary-dark);
text-decoration: none;
padding: 8px 16px;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 600;
transition: opacity 0.2s ease;
}
.btn-login:hover {
opacity: 0.9;
}
.hamburger-menu,
.close-menu {
background: transparent;
border: none;
cursor: pointer;
font-size: 2rem;
color: var(--color-text-light);
display: flex;
align-items: center;
}
/* Mobile Slideout Menu */
.mobile-nav__overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 1010;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.mobile-nav__overlay.is-active {
opacity: 1;
visibility: visible;
}
.mobile-nav a.active {
color: var(--color-accent-gold);
}
.mobile-nav {
position: fixed;
top: 0;
right: 0;
width: 280px;
height: 100%;
background-color: #1c1c1e;
z-index: 1020;
transform: translateX(100%);
transition: transform 0.3s ease-in-out;
display: flex;
flex-direction: column;
padding: 24px;
}
.mobile-nav.is-active {
transform: translateX(0);
}
.mobile-nav__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
font-size: 1.1rem;
font-weight: 600;
color: var(--color-text-light);
}
.mobile-nav a {
text-decoration: none;
color: var(--color-text-medium);
padding: 10px 0;
font-weight: 500;
font-size: 1.1rem;
transition: color 0.2s ease;
}
.mobile-nav a:hover {
color: var(--color-accent-gold);
}
.mobile-nav hr {
border: none;
border-top: 1px solid var(--glass-border);
margin: 16px 0;
}
.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: rgba(22, 22, 24, 0.8);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border-top: 1px solid var(--glass-border);
display: flex;
justify-content: space-around;
z-index: 900;
padding: 5px 0;
}
.bottom-nav__item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: var(--color-text-medium);
padding: 8px 0;
transition: color 0.2s ease;
}
.bottom-nav__item i {
font-size: 1.5rem;
}
.bottom-nav__item span {
font-size: 0.7rem;
margin-top: 2px;
}
.bottom-nav__item.active {
color: var(--color-accent-gold);
}
/* --- Daily Wisdom Ticker Section --- */
#daily-wisdom {
padding-top: 0;
/* Removing top padding to bring it closer to the section above */
}
.wisdom-ticker-wrapper {
background: var(--glass-bg);
/* Uses the same glass effect as other cards */
backdrop-filter: blur(5px);
border: 1px solid rgba(212, 175, 55, 0.2);
/* Subtle gold border */
border-radius: 15px;
padding: 25px 30px;
text-align: center;
}
.ticker-title {
font-size: 1.5rem;
font-weight: 600;
color: var(--color-accent-gold);
margin-bottom: 20px;
}
.ticker-viewport {
width: 100%;
overflow: hidden;
/* This hides the content that goes outside the box */
white-space: nowrap;
/* Ensures all quotes stay on a single line */
}
.ticker-content {
display: inline-block;
/* The magic animation that scrolls the text */
animation: scroll-left 120s linear infinite;
}
/* On hover, the animation will pause so users can read */
.ticker-content:hover {
animation-play-state: paused;
cursor: default;
}
/* Defines the scrolling animation */
@keyframes scroll-left {
from {
transform: translateX(0%);
}
to {
/* Scrolls exactly half the width (since we duplicated the content) */
transform: translateX(-50%);
}
}
.quote-item {
display: inline-block;
/* Lays out each quote horizontally */
font-size: 1.1rem;
color: var(--color-text-light);
margin: 0 40px;
/* Space between each quote */
}
.quote-source {
color: var(--color-accent-gold);
font-style: italic;
margin-left: 10px;
font-weight: 300;
}
.desktop-nav .nav-link {
color: var(--color-text-light);
text-decoration: none;
font-weight: 600;
padding: 10px 0;
position: relative;
transition: color 0.3s ease;
}
.desktop-nav .nav-link::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: var(--color-accent-gold);
transform: scaleX(0);
transform-origin: bottom right;
transition: transform 0.3s ease;
}
.desktop-nav .nav-link:hover,
.desktop-nav .nav-link.active {
color: var(--color-accent-gold);
}
.desktop-nav .nav-link.active::after {
transform: scaleX(1);
transform-origin: bottom left;
}
.section-title {
font-size: 2.8rem;
font-weight: 700;
text-align: center;
margin-bottom: 60px;
color: #fff;
}
.btn {
display: inline-block;
padding: 12px 30px;
background: transparent;
border: 2px solid var(--color-accent-gold);
color: var(--color-accent-gold);
border-radius: 50px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.btn:hover {
background-color: var(--color-accent-gold);
color: var(--color-primary-dark);
transform: translateY(0px);
border: 2px solid var(--color-accent-gold);
}
.card-link {
color: var(--color-accent-gold);
text-decoration: none;
font-weight: 600;
transition: color 0.3s;
}
.card-link:hover {
color: #fff;
}
/* --- 2. Loader Animation --- */
#loader {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: var(--color-primary-dark);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
}
#loader.hidden {
opacity: 0;
visibility: hidden;
}
.sun-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.sun {
width: 150px;
height: 150px;
background: radial-gradient(circle, #fff7e0 0%, var(--color-accent-gold) 70%);
border-radius: 50%;
box-shadow: 0 0 40px rgba(212, 175, 55, 0.7);
animation: sun-glow 4s infinite ease-in-out, sun-fade-in 2s forwards;
opacity: 0;
}
.om-symbol {
position: absolute;
font-size: 80px;
font-weight: bold;
color: var(--color-primary-dark);
opacity: 0;
transform: scale(0.5);
animation: om-emerge 2.5s forwards ease-out 1s;
}
@keyframes sun-fade-in {
to {
opacity: 1;
}
}
@keyframes sun-glow {
0%,
100% {
box-shadow: 0 0 40px rgba(212, 175, 55, 0.7);
}
50% {
box-shadow: 0 0 60px rgba(212, 175, 55, 1);
}
}
@keyframes om-emerge {
to {
opacity: 1;
transform: scale(1);
}
}
/* --- 3. Hero Section --- */
#hero {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
background: linear-gradient(-45deg, #161618, #2a2a2c, #161618, #3c3c3e);
background-size: 400% 400%;
animation: gradient-bg 15s ease infinite;
}
@keyframes gradient-bg {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.hero-title {
font-size: 4rem;
font-weight: 700;
margin-bottom: 1rem;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.hero-subtitle {
font-size: 1.5rem;
font-weight: 300;
color: var(--color-text-medium);
}
.scroll-down-link {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
}
.mouse-icon {
width: 25px;
height: 45px;
border: 2px solid var(--color-text-medium);
border-radius: 15px;
position: relative;
}
.wheel {
width: 4px;
height: 8px;
background: var(--color-text-medium);
border-radius: 2px;
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
animation: scroll-wheel 2s infinite;
}
@keyframes scroll-wheel {
0% {
top: 8px;
opacity: 1;
}
100% {
top: 20px;
opacity: 0;
}
}
/* --- 4. Intro Section --- */
.intro-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.intro-image img {
max-height: 350px;
max-width: 550px;
width: 100%;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.intro-text h2 {
text-align: left;
}
.intro-text p {
color: var(--color-text-medium);
line-height: 1.8;
margin-bottom: 30px;
}
/* --- 5. Events Section --- */
.events-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.event-card {
background: var(--glass-bg);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: var(--glass-border);
border-radius: 15px;
padding: 30px;
transition: all 0.3s ease;
position: relative;
}
.event-card:hover {
transform: translateY(-10px);
border-color: var(--color-accent-gold);
box-shadow: 0 0 30px rgba(212, 175, 55, 0.2);
}
.event-date {
position: absolute;
top: 20px;
right: 20px;
background-color: var(--color-accent-gold);
color: var(--color-primary-dark);
border-radius: 8px;
text-align: center;
padding: 8px;
font-weight: 700;
line-height: 1;
}
.event-date span {
font-size: 1.5rem;
display: block;
}
.event-title {
margin-bottom: 10px;
color: #fff;
}
.event-description {
color: var(--color-text-medium);
margin-bottom: 20px;
font-size: 0.9rem;
}
/* --- 6. Courses Section --- */
/* .courses-grid {
gap: 30px;
} */
.popular-course {
max-height: 250px;
}
.course-card {
position: relative;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.course-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.course-card:hover img {
transform: scale(1.1);
}
.course-info {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 100px 20px 20px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
color: #fff;
}
.course-info h3 {
font-weight: 600;
}
.course-info p {
font-size: 0.9rem;
color: var(--color-text-medium);
}
/* ============================================= */
/* 16. Course Tabs Slider Styles */
/* ============================================= */
.course-tabs-slider-wrapper {
position: relative;
margin: 30px 0;
padding: 0 40px;
}
.course-tabs-swiper {
width: 100%;
overflow: hidden;
}
.swiper-slide {
width: auto;
}
.tab-btn {
display: inline-block;
padding: 12px 25px;
white-space: nowrap;
}
/* --- 7. Blog Section --- */
.blog-scroller {
display: flex;
gap: 30px;
overflow-x: auto;
padding: 20px;
margin: 0 -20px;
scrollbar-width: none;
}
.blog-scroller::-webkit-scrollbar {
display: none;
}
/* Chrome, Safari, Opera */
.blog-card {
flex: 0 0 320px;
/* Don't shrink, don't grow, base width */
background: var(--glass-bg);
backdrop-filter: blur(10px);
border: var(--glass-border);
padding: 30px;
border-radius: 15px;
}
.blog-card h4 {
margin-bottom: 14px;
color: #fff;
}
.blog-card p {
color: var(--color-text-medium);
margin-bottom: 20px;
font-size: 0.9rem;
}
.blog-page {
margin-top: 100px;
font-family: var(--font-bengali), var(--font-primary);
}
.blog-hero {
background:
linear-gradient(rgba(18, 18, 18, 0.7), rgba(18, 18, 18, 0.9)),
var(--hero-bg) no-repeat center center;
background-size: cover;
padding: 80px 0;
border-radius: 16px;
text-align: center;
margin-top: 40px;
margin-bottom: 50px;
}
.blog-hero-title {
font-weight: 700;
font-size: clamp(2.5rem, 5vw, 3.5rem);
}
.blog-filter-nav {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 40px;
}
.filter-btn {
background-color: var(--color-secondary-dark);
border: var(--glass-border);
color: var(--color-text-medium);
padding: 8px 20px;
border-radius: 50px;
font-weight: 500;
transition: var(--soft-transition);
}
.filter-btn:hover {
color: var(--color-text-light);
background-color: #2a2a2e;
}
.filter-btn.active {
background-color: var(--color-accent-gold);
color: var(--color-primary-dark);
border-color: var(--color-accent-gold);
font-weight: 600;
}
.blog-card {
background: var(--glass-bg);
border: var(--glass-border);
border-radius: 12px;
overflow: hidden;
backdrop-filter: blur(10px);
transition: var(--soft-transition);
display: flex;
flex-direction: column;
height: 100%;
}
.blog-card:hover {
transform: translateY(-8px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
border-color: rgba(212, 175, 55, 0.4);
}
.blog-card-image {
aspect-ratio: 16 / 9;
overflow: hidden;
}
.blog-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.blog-card:hover .blog-card-image img {
transform: scale(1.05);
}
.blog-card-body {
padding: 20px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.blog-card-category {
background-color: var(--color-accent-gold);
color: var(--color-primary-dark);
padding: 3px 10px;
border-radius: 50px;
font-size: 0.8rem;
font-weight: 600;
display: inline-block;
margin-bottom: 15px;
}
.blog-card-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--color-text-light);
line-height: 1.4;
margin-bottom: 10px;
}
.blog-card-excerpt {
color: var(--color-text-medium);
font-size: 0.95rem;
flex-grow: 1;
margin-bottom: 20px;
}
.blog-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 15px;
border-top: 1px solid var(--glass-border);
}
.home-blog-card {
height: auto;
}
.home-blog-card .card-link {
margin-top: auto;
}
.read-more-btn {
color: var(--color-accent-gold);
text-decoration: none;
font-weight: 600;
}
.read-more-btn i {
transition: transform 0.2s ease;
}
.read-more-btn:hover i {
transform: translateX(5px);
}
.blog-card-meta {
font-size: 0.85rem;
color: var(--color-text-medium);
}
/* Sidebar Styles */
.blog-sidebar .sidebar-widget {
background-color: var(--color-secondary-dark);
border: var(--glass-border);
padding: 25px;
border-radius: 12px;
margin-bottom: 25px;
}
.sidebar-title {
font-size: 1.3rem;
font-weight: 600;
color: var(--color-text-light);
margin-bottom: 20px;
}
.recent-post {
display: flex;
gap: 15px;
align-items: flex-start;
}
.recent-post:not(:last-child) {
margin-bottom: 20px;
}
.recent-post img {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 8px;
}
.recent-post-title {
color: var(--color-text-light);
text-decoration: none;
font-weight: 500;
line-height: 1.3;
font-size: 0.95rem;
}
.category-list li a {
color: var(--color-text-medium);
text-decoration: none;
transition: var(--soft-transition);
}
.category-list li a:hover {
color: var(--color-accent-gold);
}
/* Pagination Styles */
.pagination .page-link {
background-color: var(--color-secondary-dark);
color: var(--color-text-medium);
border: var(--glass-border);
margin: 0 4px;
border-radius: 8px !important;
transition: var(--soft-transition);
}
.pagination .page-link:hover {
background-color: #2a2a2e;
color: var(--color-text-light);
border-color: var(--glass-border);
}
.pagination .page-item.active .page-link {
background-color: var(--color-accent-gold);
color: var(--color-primary-dark);
border-color: var(--color-accent-gold);
font-weight: 600;
}
.pagination .page-item.disabled .page-link {
background-color: transparent;
color: #555;
border-color: var(--glass-border);
}
/* --- 8. Donation Section --- */
#donate {
padding-top: 20px;
}
.donate-banner {
background: linear-gradient(45deg,
rgba(212, 175, 55, 0.1),
rgba(212, 175, 55, 0.2));
border-radius: 20px;
padding: 60px;
text-align: center;
border: var(--glass-border);
}
.btn-donate {
margin-top: 10px;
background-color: var(--color-accent-gold);
color: var(--color-primary-dark);
font-size: 1.1rem;
animation: pulse 2s infinite;
}
.btn-donate:hover {
animation: none;
/* Stop pulsing on hover for better UX */
}
@keyframes pulse {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 20px rgba(212, 175, 55, 0);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
}
}
/* blog details page */
.blog-details-page {
font-family: var(--font-bengali), var(--font-primary);
padding-top: 50px;
padding-bottom: 50px;
}
/* 1. Blog Header & Cover */
.blog-cover-image {
height: 400px;
border-radius: 12px;
background-size: cover;
background-position: center;
margin-bottom: 25px;
}
.blog-details-title {
font-size: clamp(1.8rem, 5vw, 2.8rem);
font-weight: 700;
color: var(--color-text-light);
line-height: 1.3;
}
.blog-meta {
display: flex;
flex-wrap: wrap;
gap: 10px 20px;
color: var(--color-text-medium);
margin-top: 15px;
padding-bottom: 20px;
border-bottom: var(--glass-border);
}
.blog-meta-item {
display: flex;
align-items: center;
gap: 8px;
}
.category-badge {
background-color: var(--color-accent-gold);
color: var(--color-primary-dark);
padding: 4px 12px;
border-radius: 50px;
font-size: 0.85rem;
font-weight: 600;
}
/* 2. Blog Content Body */
.blog-content {
padding-top: 20px;
line-height: 1.8;
font-size: 1.1rem;
color: var(--color-text-light);
}
.blog-content h2,
.blog-content h3 {
font-weight: 600;
margin-top: 40px;
margin-bottom: 20px;
color: var(--color-text-light);
}
.blog-content p {
color: var(--color-text-medium);
margin-bottom: 1.5rem;
}
.blog-content ul {
padding-left: 25px;
margin-bottom: 1.5rem;
color: var(--color-text-medium);
}
.blog-content blockquote {
border-left: 4px solid var(--color-accent-gold);
padding-left: 25px;
margin: 30px 0;
font-style: italic;
font-size: 1.2rem;
color: var(--color-text-light);
}
.blog-content img {
max-width: 100%;
height: auto;
border-radius: 12px;
margin: 20px 0 10px;
}
.blog-content figcaption {
text-align: center;
font-size: 0.9rem;
color: var(--color-text-medium);
}
/* 3 & 4. Tags and Social Share */
.tags-and-share {
margin-top: 30px;
padding-top: 20px;
border-top: var(--glass-border);
}
.tag-list a {
display: inline-block;
background-color: var(--glass-bg);
border: var(--glass-border);
color: var(--color-text-medium);
padding: 5px 15px;
border-radius: 50px;
text-decoration: none;
margin-right: 10px;
margin-bottom: 10px;
transition: var(--soft-transition);
}
.tag-list a:hover {
background-color: var(--color-accent-gold);
color: var(--color-primary-dark);
}
.social-share-icons a {
font-size: 1.5rem;
color: var(--color-text-medium);
transition: var(--soft-transition);
}
.social-share-icons a:hover {
color: var(--color-accent-gold);
transform: scale(1.1);
}
/* 5. Author Box */
.author-box {
background: var(--glass-bg);
backdrop-filter: blur(10px);
}
.author-box img {
width: 80px;
height: 80px;
border-radius: 50%;
border: 2px solid var(--color-accent-gold);
}
/* 6. Comment Section */
/* === ENHANCED COMMENT SECTION === */
.section-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 20px;
}
.comment-form .form-control {
background-color: var(--glass-bg);
border: var(--glass-border);
color: var(--color-text-light);
padding: 12px;
}
.comment-form .form-control:focus {
background-color: var(--color-secondary-dark);
box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25);
border-color: var(--color-accent-gold);
color: var(--color-text-light);
}
.btn-submit-comment {
background-color: var(--color-accent-gold);
color: var(--color-primary-dark);
font-weight: 600;
border: none;
padding: 8px 20px;
}
.comment-list {
border-top: var(--glass-border);
padding-top: 20px;
}
.comment-thread {
position: relative;
}
.comment-item {
display: flex;
gap: 15px;
padding: 20px 0;
}
.comment-thread:not(:first-child)>.comment-item {
border-top: var(--glass-border);
}
.comment-avatar {
width: 45px;
height: 45px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.comment-content {
flex-grow: 1;
}
.comment-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
}
.comment-author-name {
font-weight: 600;
color: var(--color-text-light);
}
.comment-time {
font-size: 0.8rem;
color: var(--color-text-medium);
}
.comment-body p {
margin-bottom: 10px;
color: var(--color-text-medium);
}
/* Reply-specific styling */
.comment-replies {
margin-left: 30px;
padding-left: 30px;
border-left: 2px solid rgba(255, 255, 255, 0.1);
}
.reply-item {
position: relative;
padding-top: 20px;
}
.reply-item::before {
content: "";
position: absolute;
top: 42px;
/* Vertically center with avatar */
left: -31px;
/* (padding-left + border-width) */
width: 20px;
height: 2px;
background-color: rgba(255, 255, 255, 0.1);
}
.replying-to {
font-size: 0.85rem;
color: var(--color-text-medium);
margin-bottom: 5px !important;
}
/* Actions: Love & Reply */
.comment-actions {
display: flex;
gap: 20px;
font-size: 0.85rem;
}
.comment-actions button {
background: none;
border: none;
color: var(--color-text-medium);
padding: 0;
font-weight: 500;
transition: var(--soft-transition);
}
.comment-actions button:hover {
color: var(--color-accent-gold);
}
.btn-love.loved {
color: #e53935;
/* Red for loved */
font-weight: 600;
}
.btn-love .love-count {
margin-left: 5px;
}
/* Reply Form */
.reply-form-container {
display: none;
margin-left: 60px;
/* Aligns with comment text */
padding-bottom: 20px;
}
/* 7. Related Posts Section */
.related-post-card {
background: var(--color-secondary-dark);
border: var(--glass-border);
border-radius: 12px;
overflow: hidden;
transition: var(--soft-transition);
display: block;
text-decoration: none;
}
.related-post-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}
.related-post-card img {
aspect-ratio: 16/10;
object-fit: cover;
}
.related-post-card .card-body {
padding: 20px;
}
.related-post-card .card-title {
color: var(--color-text-light);
font-size: 1.1rem;
font-weight: 600;
}
/* end blog details page */
/* about page */
.about-page-section {
padding: 100px 0;
overflow: hidden;
}
#about-header {
min-height: 50vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(rgba(22, 22, 24, 0.8), rgba(22, 22, 24, 0.8)),
url("https://images.unsplash.com/photo-1508921340878-ba53e1f416ec?q=80&w=1770&auto=format&fit=crop") no-repeat center center/cover;
position: relative;
text-align: center;
}
.about-page-title {
font-size: 3.5rem;
font-weight: 700;
color: #fff;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.about-page-subtitle {
font-size: 1.2rem;
color: var(--color-text-medium);
margin-top: 10px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* --- 3. Mission & Vision Section --- */
#mission {
background-color: #1a1a1d;
/* Slightly different dark shade */
}
.mission-grid {
display: grid;
grid-template-columns: 150px 1fr;
gap: 50px;
align-items: center;
background: var(--glass-bg);
border: var(--glass-border);
border-radius: 20px;
padding: 50px;
}
.mission-icon {
text-align: center;
}
.mission-icon i {
font-size: 80px;
color: var(--color-accent-gold);
text-shadow: 0 0 25px rgba(212, 175, 55, 0.3);
}
.mission-text h3 {
color: var(--color-accent-gold);
font-weight: 600;
margin-bottom: 15px;
font-size: 1.8rem;
}
.mission-text p {
color: var(--color-text-medium);
line-height: 2;
/* Increased line-height for readability */
margin-bottom: 25px;
font-size: 1.1rem;
}
/* --- 4. History / Timeline Section --- */
.timeline {
position: relative;
max-width: 800px;
margin: 0 auto;
}
/* The vertical line in the middle */
.timeline::after {
content: "";
position: absolute;
width: 3px;
background-color: rgba(212, 175, 55, 0.2);
top: 0;
bottom: 0;
left: 50%;
margin-left: -1.5px;
}
.timeline-item {
padding: 10px 40px;
position: relative;
width: 50%;
}
/* The circle on the timeline */
.timeline-dot {
content: "";
position: absolute;
width: 18px;
height: 18px;
right: -9px;
top: 25px;
background-color: var(--color-primary-dark);
border: 4px solid var(--color-accent-gold);
border-radius: 50%;
z-index: 1;
}
/* Place items on the left side */
.timeline-item:nth-child(odd) {
left: 0;
padding-right: 70px;
}
/* Place items on the right side */
.timeline-item:nth-child(even) {
left: 50%;
padding-left: 70px;
}
/* Adjust dot for even items */
.timeline-item:nth-child(even) .timeline-dot {
left: -9px;
}
.timeline-content {
padding: 20px 30px;
background: var(--glass-bg);
border: var(--glass-border);
backdrop-filter: blur(5px);
position: relative;
border-radius: 10px;
}
.timeline-date {
display: inline-block;
padding: 5px 15px;
background-color: var(--color-accent-gold);
color: var(--color-primary-dark);
border-radius: 20px;
font-weight: 700;
font-size: 0.9rem;
margin-bottom: 15px;
}
.timeline-title {
color: var(--color-text-light);
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 10px;
}
.timeline-content p {
font-size: 0.95rem;
color: var(--color-text-medium);
line-height: 1.7;
}
/* --- 5. Call to Action Section --- */
#join-us {
background-color: #161618;
}
/* Reusing .donate-banner, but we can override text if needed */
#join-us .donate-banner h2 {
color: #fff;
}
/* --- 9. Footer Section --- */
.site-footer {
background-color: #1c1c1e;
/* A slightly different dark shade to distinguish it */
color: var(--color-text-medium);
padding: 80px 0 30px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-grid {
display: grid;
/* 4-column layout for desktop */
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 40px;
margin-bottom: 60px;
}
.footer-brand {
font-size: 2rem;
font-weight: 700;
color: var(--color-accent-gold);
margin: 0 0 10px 0;
}
.footer-tagline {
line-height: 1.7;
max-width: 300px;
}
.footer-heading {
color: #fff;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 20px;
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 12px;
}
.footer-links a {
color: var(--color-text-medium);
text-decoration: none;
transition: color 0.3s ease, padding-left 0.3s ease;
}
.footer-links a:hover {
color: var(--color-accent-gold);
padding-left: 5px;
/* Adds a nice little shift on hover */
}
.social-icons {
display: flex;
gap: 20px;
}
.social-icons a {
color: var(--color-text-medium);
font-size: 1.5rem;
text-decoration: none;
transition: color 0.3s ease, transform 0.3s ease;
}
.social-icons a:hover {
color: var(--color-accent-gold);
transform: translateY(-3px);
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 30px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.9rem;
}
.footer-legal-links a {
color: var(--color-text-medium);
text-decoration: none;
margin: 0 10px;
}
.footer-legal-links a:hover {
color: #fff;
}
/* even page css */
/* events.css */
/* --- 1. General Page & Header Styles --- */
.page-header-section {
min-height: 50vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(rgba(22, 22, 24, 0.85), rgba(22, 22, 24, 0.85)),
url("https://images.unsplash.com/photo-1519741497674-611481863552?q=80&w=1770&auto=format&fit=crop") no-repeat center center/cover;
text-align: center;
}
.page-title {
font-size: 3.5rem;
font-weight: 700;
color: #fff;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.page-subtitle {
font-size: 1.2rem;
color: var(--color-text-medium);
margin-top: 10px;
}
.page-section {
padding: 80px 0;
overflow: hidden;
}
/* --- 2. Live Countdown Section --- */
.countdown-banner {
background: linear-gradient(45deg,
rgba(212, 175, 55, 0.1),
rgba(212, 175, 55, 0.15));
border: var(--glass-border);
border-radius: 20px;
padding: 60px 40px;
text-align: center;
}
.countdown-title,
.live-title {
font-size: 1.8rem;
font-weight: 600;
margin-bottom: 40px;
color: #fff;
}
#timer {
display: flex;
justify-content: center;
gap: 30px;
margin-bottom: 40px;
}
.time-block {
display: flex;
flex-direction: column;
}
.time-block span {
font-size: 3.5rem;
font-weight: 700;
color: var(--color-accent-gold);
line-height: 1;
}
.time-block small {
font-size: 1rem;
color: var(--color-text-medium);
text-transform: uppercase;
}
.btn-register,
.btn-live {
background-color: var(--color-accent-gold);
color: var(--color-primary-dark);
}
.btn-live {
animation: pulse 2s infinite;
}
#live-now-message.hidden,
#countdown-container.hidden {
display: none;
}
.live-indicator {
display: inline-block;
width: 12px;
height: 12px;
background-color: #ff3b30;
border-radius: 50%;
margin-right: 10px;
animation: live-pulse 1.5s infinite;
}
@keyframes live-pulse {
0% {
box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(255, 59, 48, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 59, 48, 0);
}
}
/* --- 3. Event List Section --- */
.events-controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 50px;
flex-wrap: wrap;
gap: 20px;
}
.event-filters {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.filter-btn {
background: transparent;
border: 1px solid var(--color-accent-gold);
color: var(--color-accent-gold);
padding: 8px 20px;
border-radius: 30px;
cursor: pointer;
font-weight: 500;
transition: all 0.3s ease;
}
.filter-btn:hover,
.filter-btn.active {
background: var(--color-accent-gold);
color: var(--color-primary-dark);
}
/* ----------------- */
.activity-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 30px;
}
.activity-card {
background: var(--glass-bg);
border: var(--glass-border);
border-radius: 15px;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
height: 100%;
}
.activity-card:hover {
transform: translateY(-8px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.card-content {
width: 100%;
padding: 30px;
display: flex;
flex-direction: column;
}
.card-title {
font-size: 1.4rem;
font-weight: 600;
color: var(--color-text-light);
margin-bottom: 15px;
}
.card-meta {
display: flex;
flex-wrap: wrap;
gap: 10px 20px;
font-size: 0.9rem;
color: var(--color-text-medium);
margin-bottom: 15px;
}
.card-meta i {
margin-right: 8px;
color: var(--color-accent-gold);
}
.card-description {
color: var(--color-text-medium);
line-height: 1.7;
flex-grow: 1;
margin-bottom: 25px;
}
/* --- 4. Enhanced Event Calendar Section (Clickable Version) --- */
/* ============================================= */
/* ✦ 12. Enhanced Event Calendar Section */
/* ============================================= */
.calendar-controls {
display: flex;
justify-content: flex-end;
/* Aligns filter to the right */
margin-bottom: 25px;
}
.calendar-filter-wrapper {
display: flex;
align-items: center;
gap: 10px;
}
.filter-label {
font-weight: 500;
color: var(--color-text-medium);
}
.calendar-filter {
padding: 8px 12px;
border-radius: 8px;
border: 1px solid #ddd;
background-color: #fff;
font-family: "Poppins", sans-serif;
cursor: pointer;
transition: border-color 0.3s;
}
.programs-filter {
padding: 8px 12px;
border: var(--glass-border);
border-radius: 8px;
background: var(--glass-bg);
color: var(--color-text-light) #f0f0f0;
font-family: "Poppins", sans-serif;
cursor: pointer;
transition: border-color 0.3s;
}
.calendar-filter:focus {
outline: none;
border-color: var(--color-accent-gold);
box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
}
.calendar-wrapper {
background: 0 0 0 2px rgba(212, 175, 55, 0.2);
border-radius: 15px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
max-width: 900px;
margin: 0 auto;
}
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
#month-year {
font-size: 1.5rem;
font-weight: 600;
color: #fff;
}
.cal-nav {
background: transparent;
border: none;
color: var(--color-text-light);
font-size: 1.5rem;
cursor: pointer;
padding: 5px 10px;
border-radius: 50%;
transition: background-color 0.3s;
}
.cal-nav:hover {
background-color: #f0f0f0;
}
.weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
font-weight: 600;
color: var(--color-text-medium);
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
.days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 5px;
}
.days div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
height: 120px;
/* Increased height for event titles */
padding: 5px;
border-radius: 8px;
transition: background-color 0.3s;
}
.days div.empty {
visibility: hidden;
}
.days div.today .date-num {
background-color: var(--color-accent-gold);
color: #fff;
}
.date-num {
font-size: 0.9rem;
font-weight: 500;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
margin-bottom: 5px;
}
.event-day {
background-color: #fff8e1;
/* Light yellow for event days */
border: 1px solid #ffecb3;
cursor: pointer;
}
.event-day:hover {
background-color: #fff0c7;
}
.event-title-text {
font-size: 0.75rem;
font-weight: 500;
padding: 3px 6px;
border-radius: 5px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
display: block;
/* Ensures it takes up width */
}
/* Event type specific colors */
.event-title-text.workshop {
background-color: #e3f2fd;
color: #1565c0;
}
.event-title-text.seminar {
background-color: #e8f5e9;
color: #2e7d32;
}
.event-title-text.live {
background-color: #fce4ec;
color: #c2185b;
}
.date-link {
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
/* event css end */
/* event-details.css */
/* --- 1. Event Page Header --- */
#event-page-header {
padding: 120px 0 60px 0;
text-align: center;
background: linear-gradient(135deg,
var(--color-primary-dark) 0%,
#2a2a2d 100%);
}
.header-content {
max-width: 800px;
margin: 0 auto;
}
.event-tag {
display: inline-block;
padding: 6px 15px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 20px;
}
/* Color coding for tags */
.tag-workshop {
background-color: rgba(52, 152, 219, 0.8);
color: #fff;
}
.tag-seminar {
background-color: rgba(46, 204, 113, 0.8);
color: #fff;
}
.tag-live {
background-color: rgba(231, 76, 60, 0.8);
color: #fff;
}
.event-title {
font-size: 28px;
font-weight: 700;
color: #fff;
margin-bottom: 20px;
}
.event-meta-info {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 15px 30px;
color: var(--color-text-medium);
}
.event-meta-info i {
margin-right: 8px;
color: var(--color-accent-gold);
}
/* --- 2. Main Details Layout --- */
.event-details-layout {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 50px;
}
.event-banner-image {
width: 100%;
border-radius: 15px;
margin-bottom: 40px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.event-description-body h3 {
font-size: 1.8rem;
font-weight: 600;
color: #fff;
margin-top: 40px;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.event-description-body p,
.event-description-body li {
color: var(--color-text-medium);
font-size: 1.1rem;
line-height: 1.8;
}
.event-description-body ul {
list-style: none;
padding-left: 0;
}
.event-description-body li {
padding-left: 25px;
position: relative;
margin-bottom: 10px;
}
.event-description-body li::before {
content: "\F26A";
/* Bootstrap Icon check-circle */
font-family: "bootstrap-icons";
position: absolute;
left: 0;
color: var(--color-accent-gold);
}
/* --- 3. Speaker & Video Section --- */
.speaker-info {
display: flex;
align-items: center;
gap: 25px;
background: var(--glass-bg);
padding: 25px;
border-radius: 15px;
margin-top: 40px;
}
.speaker-photo {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--color-accent-gold);
}
.speaker-details h4 {
font-size: 1.3rem;
color: #fff;
margin: 0 0 5px 0;
}
.speaker-details .speaker-title {
color: var(--color-accent-gold);
font-weight: 600;
margin-bottom: 10px;
}
.event-video-wrapper {
position: relative;
padding-bottom: 56.25%;
/* 16:9 aspect ratio */
height: 0;
overflow: hidden;
border-radius: 15px;
margin-top: 30px;
}
.event-video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* --- 4. Sidebar --- */
.event-sidebar {
position: relative;
}
.sidebar-sticky-panel {
position: sticky;
top: 100px;
/* Adjust based on your header height */
background: var(--glass-bg);
backdrop-filter: blur(10px);
border: var(--glass-border);
border-radius: 15px;
padding: 30px;
}
.sidebar-sticky-panel h4 {
font-size: 1.2rem;
text-align: center;
margin-bottom: 20px;
}
#detail-timer {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
margin-bottom: 25px;
}
#detail-timer .time-block {
text-align: center;
}
#detail-timer .time-block span {
font-size: 2rem;
color: var(--color-accent-gold);
}
#detail-timer .time-block small {
font-size: 0.8rem;
}
.btn-register-cta {
display: block;
width: 100%;
text-align: center;
background: var(--color-accent-gold);
color: var(--color-primary-dark);
font-size: 1.1rem;
animation: pulse 2s infinite;
}
.sidebar-section {
margin-top: 30px;
padding-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.sidebar-section h5 {
font-size: 1rem;
font-weight: 600;
color: var(--color-text-medium);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 15px;
}
.sidebar-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.sidebar-tags span {
background-color: rgba(255, 255, 255, 0.1);
padding: 5px 12px;
border-radius: 20px;
font-size: 0.8rem;
}
.social-share {
display: flex;
gap: 20px;
}
.social-share a {
color: var(--color-text-medium);
font-size: 1.5rem;
transition: color 0.3s ease, transform 0.3s ease;
}
.social-share a:hover {
color: var(--color-accent-gold);
transform: scale(1.1);
}
.btn-add-calendar {
margin-top: 30px;
display: block;
width: 100%;
text-align: center;
}
.btn-add-calendar i {
margin-right: 8px;
}
.bengali-text {
font-family: "Hind Siliguri", sans-serif;
}
.section-title {
font-size: 2.8rem;
font-weight: 700;
text-align: center;
margin-bottom: 60px;
color: #fff;
}
/* --- 🌟 2. TOPBAR & NAVIGATION (FROM PREVIOUS) 🌟 --- */
/* This section contains the consistent topbar and mobile navigation styles */
/* ... other topbar styles remain the same ... */
/* --- 🔷 3. NEW HERO SECTION STYLES 🔷 --- */
.hero-section {
padding-top: 150px;
padding-bottom: 80px;
background: linear-gradient(135deg,
#1a1a1d 0%,
var(--color-primary-dark, #161618) 100%);
}
.hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 50px;
}
/* .hero-title {
font-size: 3.5rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 20px;
} */
/* .hero-title .highlight {
background: linear-gradient(90deg, #D4AF37, #F0C27B);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} */
.hero-title .highlight {
color: var(--color-accent-gold, #d4af37);
font-weight: 700;
}
.hero-subtitle {
font-size: 1.1rem;
color: var(--color-text-medium, #a0a0a0);
margin-bottom: 30px;
}
.hero-cta {
font-size: 1.1rem;
padding: 14px 35px;
}
.hero-image-wrapper {
background: var(--glass-bg, rgba(255, 255, 255, 0.05));
border-radius: 20px;
padding: 20px;
border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
}
.hero-image-wrapper img {
width: 100%;
border-radius: 15px;
}
/* --- 🔷 4. COURSE TABS & CARDS STYLES 🔷 --- */
.course-tabs {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 50px;
}
.tab-btn {
background: var(--glass-bg, rgba(255, 255, 255, 0.05));
border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
color: var(--color-text-medium, #a0a0a0);
padding: 10px 25px;
border-radius: 30px;
cursor: pointer;
font-weight: 500;
transition: all 0.3s ease;
}
.tab-btn:hover {
color: #fff;
border-color: var(--color-accent-gold, #d4af37);
}
.tab-btn.active {
background: var(--color-accent-gold, #d4af37);
color: var(--color-primary-dark, #161618);
border-color: var(--color-accent-gold, #d4af37);
}
/* .courses-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 30px;
} */
.course-card {
display: flex;
flex-direction: column;
text-decoration: none;
background: var(--glass-bg, rgba(255, 255, 255, 0.05));
border: var(--glass-border, 1px solid rgba(255, 255, 255, 0.1));
border-radius: 15px;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.course-card:hover {
transform: translateY(-8px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.card-thumbnail {
position: relative;
height: 200px;
}
.card-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.live-badge {
position: absolute;
top: 15px;
left: 15px;
background-color: #e74c3c;
color: #fff;
padding: 5px 12px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 5px;
}
.live-badge::before {
content: "";
width: 6px;
height: 6px;
background: #fff;
border-radius: 50%;
animation: live-pulse 1.5s infinite;
}
@keyframes live-pulse {
0% {
box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(255, 59, 48, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 59, 48, 0);
}
}
.card-body {
padding: 25px;
flex-grow: 1;
}
.course-card-body {
padding: 25px 0 0 25px;
flex-grow: 1;
}
.card-title {
color: var(--color-text-light, #f0f0f0);
font-size: 1.3rem;
margin: 0 0 10px 0;
}
.card-description {
color: var(--color-text-medium, #a0a0a0);
font-size: 0.95rem;
line-height: 1.6;
}
.card-footer {
padding: 20px 25px;
border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
color: var(--color-accent-gold, #d4af37);
font-weight: 600;
}
/* --- 🔷 5. "WHAT YOU GET" (BENEFITS) SECTION --- */
#benefits-section {
background-color: #1a1a1d;
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}
.benefit-card {
background: var(--glass-bg, rgba(255, 255, 255, 0.05));
border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
border-radius: 15px;
padding: 30px;
text-align: center;
}
.benefit-icon {
font-size: 3rem;
color: var(--color-accent-gold, #d4af37);
margin-bottom: 20px;
}
.benefit-card h4 {
color: #fff;
font-size: 1.2rem;
margin-bottom: 10px;
}
.benefit-card p {
color: var(--color-text-medium, #a0a0a0);
font-size: 0.95rem;
line-height: 1.6;
}
/* --- 🔷 6. TESTIMONIALS SECTION --- */
.testimonial-grid {
column-count: 3;
column-gap: 30px;
}
.testimonial-card {
background: var(--glass-bg, rgba(255, 255, 255, 0.05));
border: var(--glass-border, 1px solid rgba(255, 255, 255, 0.1));
padding: 30px;
border-radius: 15px;
margin-bottom: 30px;
break-inside: avoid;
position: relative;
}
.testimonial-quote-icon {
position: absolute;
top: 20px;
right: 20px;
font-size: 3rem;
color: rgba(212, 175, 55, 0.2);
}
.testimonial-quote {
color: var(--color-text-light, #f0f0f0);
font-style: italic;
line-height: 1.7;
margin-bottom: 20px;
z-index: 2;
position: relative;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 15px;
}
.author-avatar img {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
}
.author-name {
color: #fff;
font-weight: 600;
}
.author-role {
color: var(--color-text-medium, #a0a0a0);
font-size: 0.9rem;
}
.app-download-card {
background: var(--glass-bg, rgba(255, 255, 255, 0.05));
backdrop-filter: blur(10px);
border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
border-radius: 20px;
padding: 40px;
display: flex;
align-items: center;
gap: 40px;
}
.app-download-image {
flex-basis: 40%;
}
.app-download-image img {
max-width: 100%;
}
.app-download-content {
flex-basis: 60%;
}
.app-download-content h3 {
font-size: 2.5rem;
color: #fff;
margin-bottom: 15px;
}
.app-download-content p {
color: var(--color-text-medium, #a0a0a0);
font-size: 1.1rem;
margin-bottom: 30px;
}
.download-buttons {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.download-btn {
background: rgba(255, 255, 255, 0.9);
color: #161618;
border: none;
padding: 12px 25px;
border-radius: 8px;
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
font-weight: 600;
transition: background-color 0.3s ease;
}
.download-btn:hover {
background: #fff;
}
.download-btn i {
font-size: 1.5rem;
}
/* cursor page css end */
/* cursor datalist page css */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.section-title {
text-align: center;
font-size: clamp(2rem, 5vw, 2.5rem);
font-weight: 700;
margin-bottom: 60px;
color: var(--color-text-light);
}
.section-title span {
position: relative;
display: inline-block;
}
.section-title span::after {
content: "";
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background-color: var(--color-accent-gold);
border-radius: 2px;
}
/* === Button Styles === */
.btn {
display: inline-block;
align-items: center;
padding: 12px 24px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: var(--transition-base);
}
.btn-enroll,
.btn-enroll-sticky {
background: linear-gradient(135deg,
var(--color-accent-gold),
var(--color-accent-gold-dark));
color: var(--color-primary-dark);
box-shadow: 0 4px 12px rgba(252, 194, 3, 0.3);
padding: 8px 16px;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 600;
}
.btn-enroll:hover,
.btn-enroll-sticky:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(252, 194, 3, 0.5);
}
/* === Course Hero Section === */
#course-hero {
padding: 0px 0 80px;
}
.course-hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.hero-text-content h1 {
font-size: clamp(2.2rem, 6vw, 3rem);
line-height: 1.3;
margin-bottom: 20px;
}
.course-tag {
display: inline-block;
background: rgba(255, 104, 104, 0.1);
color: var(--tag-red);
padding: 8px 16px 6px;
border-radius: 20px;
font-size: 0.95rem;
font-weight: 600;
transition: var(--transition-base);
margin-bottom: 6px;
}
.course-tag:hover {
background: rgba(255, 104, 104, 0.2);
}
.course-rating {
display: flex;
align-items: center;
gap: 8px;
color: #facc15;
margin-bottom: 12px;
font-size: 1.1rem;
}
.hero-video-content {
position: relative;
z-index: 1;
}
.hero-video-content::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(0 0 0 / 39%);
border-radius: 12px;
}
.hero-video-content img {
object-fit: cover;
max-height: 340px;
width: 100%;
border-radius: 12px;
box-shadow: var(--shadow-md);
transition: transform 0.3s ease;
loading: lazy;
}
.hero-video-content:hover img {
transform: scale(1.02);
}
.play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 5rem;
color: rgba(255, 255, 255, 0.9);
transition: var(--transition-base);
z-index: 2;
border-radius: 50%;
animation: shadows 1.4s linear infinite;
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
}
.hero-video-content:hover .play-button {
transform: translate(-50%, -50%) scale(1.1);
}
.course-stats-bar {
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 20px;
background: var(--glass-bg);
padding: 30px;
border-radius: 12px;
border: var(--glass-border);
margin-top: 60px;
backdrop-filter: blur(5px);
}
.stat-item {
text-align: center;
color: var(--color-text-medium);
}
.stat-item i {
margin-right: 8px;
color: var(--color-accent-gold);
}
.hero-actions {
display: flex;
gap: 10px;
margin-top: 10px;
}
/* === NEW: RECORDED COURSES SECTION === */
#recorded-courses {
background-color: #1a1a1d;
color: var(--color-text-dark);
}
#recorded-courses .section-title {
color: var(--color-text-dark);
}
#recorded-courses .section-title i {
font-size: 2.2rem;
color: #4a90e2;
}
#recorded-courses .section-subtitle {
text-align: center;
color: #fff;
font-size: 1.1rem;
margin-top: -30px;
margin-bottom: 40px;
}
.recorded-course-tabs {
display: flex;
justify-content: center;
margin-bottom: 40px;
background-color: #1a1a1d;
border: 1px solid #dee2e6;
border-radius: 8px;
padding: 5px;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
.recorded-course-tabs .tab-btn {
flex: 1;
padding: 10px 20px;
font-size: 1rem;
font-weight: 600;
border: none;
background-color: transparent;
color: #495057;
cursor: pointer;
border-radius: 6px;
transition: all 0.3s ease;
}
.recorded-course-tabs .tab-btn.active {
background-color: #4a5568;
color: #fff;
box-shadow: 0 4px 10px rgba(74, 85, 104, 0.2);
}
.recorded-course-card {
background-color: #1a1a1d;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
opacity: 1;
transform: scale(1);
border: var(--glass-border, 1px solid rgba(255, 255, 255, 0.1));
border-radius: 15px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.recorded-course-card.hide {
opacity: 0;
transform: scale(0.95);
display: none;
}
.recorded-course-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.recorded-card-thumbnail {
position: relative;
cursor: pointer;
}
.recorded-card-thumbnail img {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
}
.recorded-card-thumbnail .play-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 3rem;
color: rgba(255, 255, 255, 0.9);
background-color: rgba(0, 0, 0, 0.4);
border-radius: 50%;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
backdrop-filter: blur(2px);
}
.recorded-course-card:hover .play-icon {
transform: translate(-50%, -50%) scale(1.1);
background-color: rgba(212, 175, 55, 0.8);
color: #fff;
}
.recorded-card-body {
padding: 20px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.recorded-card-category {
font-size: 0.85rem;
color: #fff;
margin-bottom: 8px;
}
.recorded-card-title {
font-size: 1.15rem;
font-weight: 600;
color: var(--color-text-dark);
line-height: 1.4;
margin-bottom: 15px;
flex-grow: 1;
/* Pushes meta to bottom */
}
.recorded-card-meta {
font-size: 0.9rem;
color: var(--color-text-medium, #a0a0a0);
display: flex;
flex-direction: column;
gap: 8px;
margin-top: auto;
/* Aligns to bottom */
border-top: 1px solid #f1f3f5;
padding-top: 15px;
}
.recorded-card-meta span {
display: flex;
align-items: center;
gap: 8px;
}
.recorded-card-meta i {
color: var(--color-text-medium, #a0a0a0);
}
.btn-watch {
display: block;
background-color: var(--color-accent-gold);
color: #1a1a1d;
text-align: center;
padding: 12px;
text-decoration: none;
font-weight: 600;
margin: 20px;
border-radius: 8px;
transition: all 0.3s ease;
}
.btn-watch:hover {
color: var(--color-text-light);
}
.btn-watch i {
margin-right: 8px;
}
#live-courses .course-card {
display: flex;
}
/* === Sticky Course Navigation === */
#course-nav-sticky {
background: rgba(22, 22, 24, 0.7);
backdrop-filter: blur(10px);
border-bottom: var(--glass-border);
padding: 0 24px;
height: 60px;
width: 100%;
z-index: 990;
transition: var(--transition-base);
}
#course-nav-sticky.is-sticky {
position: fixed;
top: 70px;
animation: slideDown 0.3s ease-out;
}
@keyframes slideDown {
from {
top: 0;
opacity: 0;
}
to {
top: 70px;
opacity: 1;
}
}
.course-nav-container {
max-width: 1200px;
height: 100%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
}
.course-nav-container a {
color: var(--color-text-medium);
text-decoration: none;
font-weight: 500;
transition: var(--transition-base);
}
.course-nav-container a:hover,
.course-nav-container a.active {
color: var(--color-accent-gold);
}
/* === Curriculum Section === */
#curriculum {
background-color: var(--color-bg-light);
padding: 80px 0;
}
#curriculum .section-title {
color: var(--color-text-light);
}
#curriculum .section-title span::after {
background-color: #20bf96;
}
.curriculum-meta-info {
padding-top: 32px;
text-align: center;
color: var(--color-text-medium);
margin-top: -40px;
margin-bottom: 40px;
display: flex;
justify-content: center;
gap: 25px;
font-size: 1rem;
}
.curriculum-meta-info i {
color: #20bf96;
margin-right: 8px;
}
.curriculum-group-header {
background: #ffffff;
padding: 30px;
border-radius: 12px;
box-shadow: var(--shadow-sm);
margin-bottom: 30px;
}
.curriculum-group-title {
font-size: 1.8rem;
color: #20bf96;
margin-bottom: 15px;
}
.curriculum-instructors {
display: flex;
align-items: center;
gap: 20px;
color: #4a5568;
}
.curriculum-instructors img {
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
loading: lazy;
}
.module-item {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
overflow: hidden;
transition: var(--transition-base);
}
.module-item:hover {
box-shadow: var(--shadow-md);
}
.module-header {
display: flex;
align-items: center;
gap: 15px;
padding: 20px;
cursor: pointer;
}
.module-badge {
width: 60px;
height: 60px;
border-radius: 8px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
flex-shrink: 0;
}
.module-badge .badge-week {
font-size: 0.8rem;
font-weight: 500;
}
.module-badge .badge-num {
font-size: 1.5rem;
font-weight: 700;
}
.badge-green {
background-color: #20bf96;
}
.badge-yellow {
background-color: #f5a623;
}
.badge-orange {
background-color: #f37c22;
}
.badge-purple {
background-color: #9013fe;
}
.badge-blue {
background-color: #4a90e2;
}
.badge-pink {
background-color: #d00282;
}
.badge-red {
background-color: #d0021b;
}
.module-title-text {
font-size: 1.1rem;
color: #2d3748;
font-weight: 600;
flex-grow: 1;
margin: 0;
}
.module-header .bi-chevron-down {
transition: transform 0.4s ease-in-out;
background-color: #f0f2f5;
border-radius: 50%;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
color: #718096;
flex-shrink: 0;
}
.module-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
padding-left: 20px;
padding-right: 20px;
}
.module-content-inner {
padding-top: 15px;
padding-bottom: 20px;
border-top: 1px solid #e2e8f0;
}
.module-item.active .module-content {
max-height: 300px;
}
.module-item.active .bi-chevron-down {
transform: rotate(180deg);
background-color: #e2e8f0;
}
.module-details {
display: flex;
gap: 20px;
font-size: 0.9rem;
color: #4a5568;
margin-bottom: 10px;
}
.module-details i {
margin-right: 5px;
color: #718096;
}
.module-description {
font-size: 0.95rem;
color: #718096;
line-height: 1.7;
margin: 0;
}
/* === Course Features Section === */
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
}
.feature-card {
background: var(--glass-bg);
border: var(--glass-border);
padding: 30px;
border-radius: 12px;
text-align: center;
backdrop-filter: blur(5px);
transition: var(--transition-base);
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
}
.feature-card .icon {
font-size: 2.5rem;
color: var(--color-accent-gold);
margin-bottom: 20px;
}
.feature-card h3 {
font-size: 1.3rem;
color: var(--color-text-light);
margin-bottom: 10px;
}
/* === Instructor Section === */
.instructor-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
}
.instructor-card {
background: var(--glass-bg);
border: var(--glass-border);
border-radius: 12px;
padding: 25px;
transition: var(--transition-base);
}
.instructor-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
}
.instructor-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 20px;
}
.instructor-tag {
background: rgba(192, 132, 252, 0.1);
color: var(--tag-purple);
padding: 5px 10px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 500;
}
.instructor-photo {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--color-accent-gold);
transition: var(--transition-base);
loading: lazy;
}
.instructor-card:hover .instructor-photo {
transform: scale(1.05);
}
.instructor-card h4 {
font-size: 1.4rem;
color: var(--color-text-light);
}
.instructor-card .title {
color: var(--color-text-medium);
margin-bottom: 15px;
}
.company-logos {
margin-top: 20px;
padding-top: 20px;
border-top: var(--glass-border);
display: flex;
align-items: center;
gap: 20px;
filter: grayscale(1) brightness(1.5);
}
.company-logos img {
max-height: 25px;
loading: lazy;
}
/* === Testimonials Section === */
.testimonial-card {
background: var(--glass-bg);
border: var(--glass-border);
padding: 30px;
border-radius: 12px;
position: relative;
transition: var(--transition-base);
}
.testimonial-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
}
.testimonial-card .quote-icon {
position: absolute;
top: 20px;
right: 20px;
font-size: 3rem;
color: var(--color-accent-gold);
opacity: 0.2;
}
.testimonial-card p {
color: var(--color-text-medium);
margin-bottom: 25px;
font-style: italic;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 15px;
}
.author-avatar {
width: 45px;
height: 45px;
border-radius: 50%;
background: var(--color-accent-gold);
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
color: var(--color-primary-dark);
}
/* === Certificate Section === */
.certificate-container {
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
flex-wrap: wrap;
}
.certificate-img-wrapper {
max-width: 70%;
margin: 0 auto;
}
.certificate-img-wrapper img {
width: 100%;
height: auto;
border-radius: 12px;
box-shadow: var(--shadow-md);
border: 1px solid rgba(255, 255, 255, 0.1);
loading: lazy;
}
/* === FAQ Section === */
.faq-accordion-container {
max-width: 800px;
margin: 0 auto;
}
.faq-item {
background: #ffffff;
border-radius: 8px;
margin-bottom: 15px;
overflow: hidden;
border: 1px solid #e2e8f0;
transition: var(--transition-base);
}
.faq-item:hover {
box-shadow: var(--shadow-sm);
}
.faq-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
cursor: pointer;
font-size: 1.1rem;
font-weight: 500;
color: #2d3748;
}
.faq-header .bi-chevron-down {
transition: transform 0.3s ease;
color: #718096;
}
.faq-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-out, padding 0.4s ease-out;
}
.faq-content p {
padding: 0 20px 20px 20px;
color: #4a5568;
line-height: 1.8;
border-top: 1px solid #e2e8f0;
padding-top: 20px;
margin-bottom: 0;
}
.faq-item.active .faq-content {
max-height: 200px;
}
.faq-item.active .bi-chevron-down {
transform: rotate(180deg);
color: var(--color-accent-gold);
}
.faq-item.active {
box-shadow: var(--shadow-md);
}
/* === Community Section === */
.community-container {
max-width: 1000px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.5fr;
align-items: center;
gap: 50px;
}
.community-card {
background: #ffffff;
border-radius: 12px;
overflow: hidden;
display: flex;
align-items: center;
padding: 20px;
gap: 20px;
box-shadow: var(--shadow-md);
}
.community-card-img {
max-width: 150px;
height: auto;
border-radius: 8px;
flex-shrink: 0;
loading: lazy;
}
.community-card-content {
color: var(--color-primary-dark);
width: 100%;
}
.community-meta {
font-size: 0.9rem;
color: #65676b;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 5px;
}
.community-title {
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 15px;
color: #050505;
line-height: 1.4;
}
.btn-join {
background: #e4e6eb;
color: #050505;
display: block;
text-align: center;
padding: 10px;
border-radius: 6px;
text-decoration: none;
font-weight: 600;
transition: var(--transition-base);
}
.btn-join:hover {
background-color: #d8dade;
}
.price {
padding-left: 5px;
}
/* === Sticky Enrollment Footer === */
.sticky-enroll-footer {
position: fixed;
bottom: -150px;
left: 0;
width: 100%;
background: #ffffff;
padding: 15px 0;
z-index: 1000;
box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.2);
transition: bottom 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.sticky-enroll-footer.visible {
bottom: 0;
}
.footer-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}
.footer-price-section .price {
font-size: 1.8rem;
font-weight: 700;
color: #1a202c;
margin: 0;
}
.promo-code-link {
font-size: 0.9rem;
color: #718096;
text-decoration: none;
display: flex;
align-items: center;
gap: 5px;
transition: var(--transition-base);
}
.promo-code-link:hover {
color: var(--color-accent-gold);
}
.footer-contact-section {
text-align: right;
color: #718096;
}
.footer-contact-section p {
margin: 0;
font-size: 0.8rem;
}
.footer-contact-section span {
font-weight: 600;
color: #1a202c;
font-size: 1.1rem;
}
/* shop css page css */
.section-heading {
color: var(--color-text-light);
font-weight: 600;
margin-bottom: 25px;
padding-bottom: 10px;
border-bottom: 2px solid rgba(212, 175, 55, 0.2);
display: inline-block;
}
/* === 1. VOUCHER BANNER SECTION === */
#voucher-section {
padding: 40px 0;
}
.voucher-swiper {
border-radius: 16px;
overflow: hidden;
position: relative;
background: linear-gradient(90deg, #f52063, #d60a45);
color: #fff;
padding: 30px;
}
.voucher-content-grid {
display: grid;
grid-template-columns: 40% 60%;
align-items: center;
gap: 20px;
}
.voucher-main-title {
font-size: clamp(2.5rem, 5vw, 4.5rem);
font-weight: 800;
text-transform: uppercase;
line-height: 1.1;
margin: 0;
background: linear-gradient(180deg, #fff27d, #e1b432);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.voucher-subtitle {
font-size: clamp(1.2rem, 3vw, 1.8rem);
font-weight: 600;
text-transform: uppercase;
margin-bottom: 30px;
}
.btn-collect-all {
background: #fff27d;
color: #d60a45;
font-weight: 700;
border-radius: 50px;
padding: 10px 25px;
border: none;
transition: var(--transition-soft);
}
.btn-collect-all:hover {
transform: scale(1.05);
box-shadow: 0 5px 15px rgba(255, 242, 125, 0.3);
}
.voucher-ticket {
background-color: rgba(255, 255, 255, 0.95);
color: #333;
border-radius: 12px;
padding: 15px;
display: flex;
align-items: center;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
position: relative;
}
.voucher-ticket:not(:last-child) {
margin-bottom: 15px;
}
.voucher-discount {
text-align: center;
padding-right: 20px;
color: #d60a45;
}
.voucher-discount .off-percent {
font-size: 1.8rem;
font-weight: 800;
line-height: 1;
}
.voucher-discount .min-spend {
font-size: 0.8rem;
font-weight: 500;
}
.voucher-separator {
position: relative;
border-left: 2px dashed #e0e0e0;
height: 60px;
}
.voucher-separator::before,
.voucher-separator::after {
content: "";
position: absolute;
left: -8px;
width: 16px;
height: 16px;
background-color: #e21856;
border-radius: 50%;
}
.voucher-separator::before {
top: -8px;
}
.voucher-separator::after {
bottom: -8px;
}
.voucher-details h5 {
font-weight: 700;
font-size: 1rem;
margin-bottom: 2px;
}
.btn-collect {
background: linear-gradient(90deg, #ff8c42, #ff5f6d);
color: #fff;
border: none;
padding: 5px 20px;
font-weight: 600;
border-radius: 50px;
transition: var(--transition-soft);
}
.voucher-swiper .swiper-pagination-bullet {
background-color: rgba(0, 0, 0, 0.5);
}
.voucher-swiper .swiper-pagination-bullet-active {
background-color: #fff;
}
.voucher-swiper .swiper-button-next,
.voucher-swiper .swiper-button-prev {
color: #fff;
background: rgba(0, 0, 0, 0.2);
width: 40px;
height: 40px;
border-radius: 50%;
transition: var(--transition-soft);
}
.voucher-swiper .swiper-button-next:after,
.voucher-swiper .swiper-button-prev:after {
font-size: 1rem;
font-weight: 800;
}
/* === 2. CATEGORIES SECTION (ENHANCED) === */
#categories-section {
padding: 60px 0;
}
.category-card {
text-align: center;
text-decoration: none;
color: var(--color-text-light);
transition: var(--transition-soft);
}
.category-icon {
background-color: var(--color-secondary-dark);
height: 120px;
width: 120px;
margin: 0 auto 15px auto;
border-radius: 50%;
overflow: hidden;
border: 2px solid rgba(255, 255, 255, 0.1);
transition: var(--transition-soft);
}
.category-icon img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition-soft);
}
.category-title {
font-weight: 500;
transition: var(--transition-soft);
}
/* Enhanced Hover Effect */
.category-card:hover {
transform: translateY(-8px);
}
.category-card:hover .category-icon {
background-color: #2a2a2e;
border-color: var(--color-accent-gold);
box-shadow: 0 0 25px rgba(212, 175, 55, 0.2);
}
.category-card:hover .category-icon img {
transform: scale(1.1);
}
.category-card:hover .category-title {
color: var(--color-accent-gold);
}
/* === 3. PRODUCTS SECTION (Polished) === */
.product-card {
background-color: var(--color-secondary-dark);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
overflow: hidden;
transition: var(--transition-soft);
display: flex;
flex-direction: column;
height: 100%;
transition: all 350ms ease;
}
.product-card:hover {
transform: translateY(-8px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
border-color: rgba(212, 175, 55, 0.5);
}
.product-image {
aspect-ratio: 1 / 1;
overflow: hidden;
}
.product-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.product-card:hover .product-image img {
transform: scale(1.05);
}
.product-info {
padding: 20px;
flex-grow: 1;
display: flex;
flex-direction: column;
text-align: left;
}
.product-rating {
display: flex;
gap: 3px;
color: #f5c518;
font-size: 0.9rem;
margin-bottom: 10px;
}
.product-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--color-text-light);
margin-bottom: auto;
line-height: 1.4;
padding-bottom: 15px;
}
.product-price {
font-size: 1.3rem;
font-weight: 700;
color: var(--color-accent-gold);
margin-bottom: 0;
}
.btn-add-to-cart {
background-color: transparent;
color: var(--color-accent-gold);
border: 2px solid var(--color-accent-gold);
text-align: center;
padding: 8px 15px;
margin: 0 20px 20px 20px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: var(--transition-soft);
}
.btn-add-to-cart:hover {
background-color: var(--color-accent-gold);
color: var(--color-primary-dark);
}
#load-more-btn {
background-color: transparent;
color: var(--color-text-medium);
border: 2px solid var(--color-text-medium);
font-weight: 600;
padding: 10px 30px;
border-radius: 50px;
margin-top: 40px;
transition: var(--transition-soft);
}
#load-more-btn:hover {
background-color: var(--color-accent-gold);
border-color: var(--color-accent-gold);
color: var(--color-primary-dark);
transform: scale(1.05);
}
/* Cart Dropdown */
.cart-dropdown {
position: absolute;
top: 100%;
right: 0;
background-color: var(--color-secondary-dark);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 15px;
width: 300px;
display: none;
z-index: 1000;
color: var(--color-text-light);
}
.cart-dropdown.active {
display: block;
}
.cart-item {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.cart-total {
font-weight: 600;
margin-top: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 10px;
}
/* end shop css page css */
/* shop_details css page css */
.product-details-page {
padding-top: 100px;
}
.product-details-page .section-card {
background-color: var(--color-secondary-dark);
border: var(--glass-border);
border-radius: 12px;
padding: 25px;
margin-bottom: 25px;
}
.section-title {
font-size: 1.5rem;
font-weight: 600;
color: var(--color-text-light);
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid var(--glass-border);
}
/* 1. Product Image Gallery */
.image-gallery .main-image img {
width: 100%;
height: auto;
aspect-ratio: 1/1;
object-fit: cover;
border-radius: 12px;
border: var(--glass-border);
}
.thumbnail-list {
display: flex;
gap: 10px;
margin-top: 15px;
}
.thumbnail-item img {
width: 70px;
height: 70px;
object-fit: cover;
border-radius: 8px;
cursor: pointer;
border: 2px solid transparent;
transition: var(--soft-transition);
}
.thumbnail-item img:hover {
border-color: rgba(212, 175, 55, 0.5);
}
.thumbnail-item.active img {
border-color: var(--color-accent-gold);
box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
}
/* 2. Product Info Block */
.product-title-main {
font-size: 2rem;
font-weight: 600;
}
.product-rating-summary {
display: flex;
align-items: center;
gap: 8px;
color: var(--color-text-medium);
margin-bottom: 15px;
}
.product-rating-summary .stars {
color: #f5c518;
}
.product-pricing {
background-color: rgba(0, 0, 0, 0.2);
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.current-price {
font-size: 2.2rem;
font-weight: 700;
color: var(--color-accent-gold);
}
.old-price {
font-size: 18px;
text-decoration: line-through;
color: var(--color-text-medium);
margin-left: 10px;
}
.discount-badge {
background-color: var(--color-accent-gold);
color: var(--color-text-dark);
font-weight: 600;
padding: 4px 8px;
border-radius: 5px;
margin-left: 10px;
}
.variant-selector label {
font-weight: 500;
margin-bottom: 10px;
display: block;
}
.color-options {
display: flex;
gap: 10px;
}
.color-option {
width: 30px;
height: 30px;
border-radius: 50%;
cursor: pointer;
border: 2px solid transparent;
transition: var(--soft-transition);
}
.color-option.active {
text-align: center;
border-color: var(--color-accent-gold);
transform: scale(1.1);
}
.quantity-btn {
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
color: var(--color-text-light);
width: 35px;
height: 35px;
transition: var(--soft-transition);
}
.quantity-input {
width: 50px;
height: 40px;
text-align: center;
background-color: transparent;
border: none;
border-top: var(--glass-border);
border-bottom: var(--glass-border);
color: var(--color-text-light);
}
.quantity-input {
width: 100%;
text-align: center;
background: transparent;
border-left: var(--glass-border);
border-right: var(--glass-border);
color: var(--color-text-light);
height: 35px;
-moz-appearance: textfield;
}
.quantity-input::-webkit-inner-spin-button,
.quantity-input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.quantity-input:focus {
outline: none;
}
.action-buttons .btn {
width: 100%;
margin-bottom: 10px;
padding: 12px;
font-weight: 600;
}
.btn-buy-now {
background-color: var(--color-accent-gold);
color: var(--color-text-dark);
}
.btn-add-to-cart-page {
background-color: transparent;
border: 2px solid var(--color-accent-gold);
color: var(--color-accent-gold);
}
/* 3 & 4. Delivery & Seller Info */
.info-card {
background: var(--glass-bg);
backdrop-filter: blur(5px);
padding: 20px;
border-radius: 8px;
border: var(--glass-border);
height: 100%;
}
.info-card h6 {
color: var(--color-text-light);
font-weight: 600;
}
.info-card p,
.info-card span {
font-size: 0.9rem;
color: var(--color-text-medium);
}
.seller-stats .stat-item {
flex: 1;
text-align: center;
}
.seller-stats h5 {
color: var(--color-text-light);
margin-bottom: 0;
}
/* 5-8. Description, Reviews, etc. */
.nav-tabs .nav-link {
background-color: transparent;
border-color: var(--glass-border);
color: var(--color-text-medium);
}
.nav-tabs .nav-link.active {
background-color: var(--color-secondary-dark);
color: var(--color-accent-gold);
border-bottom-color: var(--color-secondary-dark);
}
.tab-content {
padding-top: 20px;
}
.spec-table {
width: 100%;
}
.spec-table td {
padding: 8px;
border-bottom: 1px solid var(--glass-border);
}
.spec-table td:first-child {
color: var(--color-text-medium);
width: 30%;
}
.review-summary {
display: flex;
align-items: center;
gap: 30px;
}
.review-card {
border-bottom: 1px solid var(--glass-border);
/* padding: 20px 0; */
}
.review-card:last-child {
border-bottom: none;
}
.review-author img {
width: 40px;
height: 40px;
border-radius: 50%;
}
/* 9. Related Products */
.related-product-card {
background-color: var(--color-secondary-dark);
border-radius: 8px;
overflow: hidden;
transition: var(--soft-transition);
}
.related-product-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
}
/* shop_details css page css end */
/* ebook css page css */
/* --- Page Container --- */
.ebook-page-content {
background-color: var(--color-primary-dark);
font-family: var(--font-primary);
color: var(--color-text-light);
}
/* --- Hero Section --- */
@keyframes pan-bg {
0% {
background-position: 25% 50%;
}
100% {
background-position: 75% 50%;
}
}
.ebook-hero {
background-image: linear-gradient(rgba(22, 22, 24, 0.8), rgba(22, 22, 24, 1)),
url("https://images.unsplash.com/photo-1532012197267-da84d127e765?q=80&w=1887");
background-size: 150% auto;
animation: pan-bg 20s linear alternate infinite;
padding: 60px 0;
position: relative;
overflow: hidden;
border-bottom: var(--glass-border);
margin-top: 70px;
}
.breadcrumb-item a {
color: var(--color-accent-gold);
text-decoration: none;
}
.breadcrumb-item.active {
color: var(--color-text-medium);
}
.ebook-hero-title {
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 700;
color: var(--color-text-light);
}
/* --- Sidebar Filter --- */
.filter-sidebar {
background: var(--glass-bg);
border: var(--glass-border);
border-radius: 16px;
padding: 25px;
backdrop-filter: blur(12px);
}
.filter-group-title {
font-size: 1.2rem;
font-weight: 600;
color: var(--color-text-light);
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: var(--glass-border);
}
.filter-list {
list-style: none;
padding-left: 0;
}
.filter-list .form-check {
margin-bottom: 12px;
}
.filter-list .form-check input {
display: none;
}
.filter-list .form-check-label {
color: var(--color-text-medium);
position: relative;
cursor: pointer;
transition: var(--soft-transition);
}
.filter-list .form-check:hover .form-check-label {
color: var(--color-text-light);
}
.filter-list .form-check-label::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
border: 2px solid var(--color-text-medium);
border-radius: 50%;
transition: var(--soft-transition);
}
.filter-list .form-check-label::after {
content: "";
position: absolute;
left: 5px;
top: 50%;
transform: translateY(-50%) scale(0);
width: 10px;
height: 10px;
background: var(--color-accent-gold);
border-radius: 50%;
transition: var(--soft-transition);
}
.filter-list .form-check-input:checked+.form-check-label {
color: var(--color-accent-gold);
font-weight: 600;
}
.filter-list .form-check-input:checked+.form-check-label::before {
border-color: var(--color-accent-gold);
}
.filter-list .form-check-input:checked+.form-check-label::after {
transform: translateY(-50%) scale(1);
}
.filter-list .count {
color: var(--color-text-medium);
}
.rating-filter .bi {
color: var(--color-accent-gold);
}
/* --- Search Bar --- */
.search-ebook {
position: relative;
}
.search-ebook .search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--color-text-medium);
}
.search-ebook input {
width: 100%;
padding: 0.6rem 1rem 0.6rem 2.5rem;
border: var(--glass-border);
border-radius: 8px;
background: var(--glass-bg);
color: var(--color-text-light);
transition: var(--soft-transition);
}
.search-ebook input:focus {
border-color: var(--color-accent-gold);
outline: none;
}
/* --- Ebook Card --- */
.ebook-card {
background: var(--glass-bg);
border: var(--glass-border);
border-radius: 18px;
overflow: hidden;
transition: var(--soft-transition);
box-shadow: var(--shadow-sm);
backdrop-filter: blur(12px);
display: flex;
flex-direction: column;
height: 100%;
position: relative;
}
.ebook-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: var(--shadow-md);
border-color: var(--color-accent-gold-dark);
}
.ebook-card-img {
aspect-ratio: 4/3;
overflow: hidden;
border-bottom: var(--glass-border);
position: relative;
}
.ebook-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.ebook-card:hover .ebook-card-img img {
transform: scale(1.08);
}
.price-badge {
position: absolute;
top: 12px;
right: 12px;
background-color: var(--tag-green);
color: #000;
padding: 5px 12px;
border-radius: 50px;
font-size: 0.75rem;
font-weight: 600;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.price-badge.free {
background-color: var(--tag-blue);
color: #fff;
}
.ebook-card-body {
padding: 20px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.ebook-card-category {
font-size: 0.8rem;
color: var(--color-accent-gold);
font-weight: 500;
margin-bottom: 6px;
text-transform: uppercase;
}
.ebook-card-title {
color: var(--color-text-light);
font-size: 1.1rem;
font-weight: 600;
text-decoration: none;
line-height: 1.4;
margin-bottom: 5px;
}
.ebook-card-author {
color: var(--color-text-medium);
font-size: 0.9rem;
margin-bottom: 12px;
}
.ebook-card-footer {
margin-top: auto;
padding-top: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.ebook-card-rating {
color: var(--color-accent-gold);
font-size: 0.95rem;
transition: var(--soft-transition);
}
.ebook-card-rating i {
transition: transform 0.3s;
}
.ebook-card:hover .ebook-card-rating i:hover {
transform: scale(1.2);
}
.btn-details {
background-color: var(--color-accent-gold);
border: none;
color: #000;
font-weight: 600;
font-size: 0.85rem;
padding: 8px 16px;
border-radius: 8px;
transition: var(--soft-transition);
opacity: 0;
transform: translateY(10px);
}
.ebook-card:hover .btn-details {
opacity: 1;
transform: translateY(0);
}
.ebook-card:hover .ebook-card-rating {
opacity: 0.6;
}
/* .ebook-card:hover::before {
content: "";
position: absolute;
inset: 0;
border-radius: 18px;
background: radial-gradient(ellipse at center,
rgba(255, 215, 0, 0.06),
transparent);
z-index: 1;
} */
.ebook-card-link {
text-decoration: none;
color: inherit;
display: block;
}
/* ebook end */
/* ebook details css */
.ebook-details-page {
background-color: var(--color-primary-dark);
color: var(--color-text-light);
font-family: var(--font-primary);
padding: 50px 0;
}
/* 1. Left Section: eBook Cover */
.ebook-cover-wrapper {
background: linear-gradient(145deg, #2a2a2e, #1a1a1d);
border-radius: 16px;
padding: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
position: relative;
overflow: hidden;
}
.ebook-cover-image {
width: 100%;
border-radius: 8px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
aspect-ratio: 2 / 3;
object-fit: cover;
}
.ebook-price-overlay {
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
padding: 40px 20px 20px;
text-align: center;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.ebook-price {
font-size: 2.5rem;
font-weight: 700;
color: #fff;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
/* 2. Right Section: eBook Info */
.ebook-title {
font-size: 2.5rem;
font-weight: 700;
color: var(--color-text-light);
}
.ebook-author {
display: flex;
align-items: center;
gap: 10px;
margin: 1rem 0;
}
.ebook-author img {
width: 30px;
height: 30px;
border-radius: 50%;
}
.ebook-author span {
color: var(--color-text-medium);
}
.ebook-rating {
display: flex;
align-items: center;
gap: 8px;
color: var(--color-accent-gold);
margin-bottom: 1rem;
}
.ebook-short-desc {
color: var(--color-text-medium);
margin-bottom: 1.5rem;
}
.ebook-meta-table {
font-size: 0.95rem;
}
.ebook-meta-table .meta-label {
color: var(--color-text-medium);
}
.ebook-meta-table .meta-value {
color: var(--color-text-light);
font-weight: 500;
}
.btn-gradient {
background: linear-gradient(90deg, #8b5cf6, #6366f1);
border: none;
color: #fff;
font-weight: 600;
padding: 12px 30px;
border-radius: 8px;
transition: var(--soft-transition);
box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2);
}
.btn-gradient:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}
.btn-gradient.preview {
background: transparent;
border: 2px solid #8b5cf6;
}
/* 3. Tabbed Interface */
.ebook-tabs .nav-link {
background: none;
border: none;
color: var(--color-text-medium);
font-weight: 500;
padding: 10px 0;
margin-right: 25px;
border-bottom: 2px solid transparent;
border-radius: 0;
}
.ebook-tabs .nav-link.active {
color: var(--color-accent-gold);
border-bottom-color: var(--color-accent-gold);
}
.tab-content {
padding-top: 2rem;
color: var(--color-text-medium);
}
.spec-table .spec-label {
color: var(--color-text-medium);
}
.spec-table .spec-value {
color: var(--color-text-light);
}
/* About Author Tab */
.author-info-card {
display: flex;
gap: 25px;
align-items: flex-start;
}
.author-info-card img {
width: 100px;
height: 100px;
border-radius: 50%;
}
.author-stats {
display: flex;
gap: 20px;
margin-top: 10px;
color: var(--color-text-medium);
}
.author-socials a {
color: var(--color-text-medium);
border: var(--glass-border);
width: 40px;
height: 40px;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
text-decoration: none;
transition: var(--soft-transition);
}
.author-socials a:hover {
color: #fff;
background-color: var(--color-accent-gold);
}
/* 4. Related eBooks Section */
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.section-header h2 {
color: var(--color-text-light);
font-weight: 600;
margin: 0;
}
.related-ebook-card {
background: var(--glass-bg);
border: var(--glass-border);
border-radius: 12px;
overflow: hidden;
transition: var(--soft-transition);
}
.related-ebook-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}
.related-ebook-card .card-img-top {
aspect-ratio: 2/3;
object-fit: cover;
}
.related-ebook-card .card-body {
padding: 1.25rem;
}
.related-ebook-card .card-title {
color: var(--color-text-light);
font-size: 1rem;
font-weight: 500;
}
.related-ebook-card .card-price {
color: var(--color-accent-gold);
font-weight: 600;
}
.related-ebook-card .learn-more {
color: var(--color-text-medium);
text-decoration: none;
font-weight: 500;
}
.related-ebook-card .learn-more:hover {
color: var(--color-accent-gold);
}
.ebook-details-page-section {
margin-top: 50px;
}
#related-ebooks {
margin-bottom: 50px;
}
/* === REVIEW TAB STYLES === */
.review-form-wrapper {
background: var(--glass-bg);
padding: 20px;
border-radius: 12px;
border: var(--glass-border);
}
.star-rating-input {
gap: 2px;
display: flex;
align-items: center;
}
.star-rating-input i {
font-size: 1.5rem;
color: var(--color-accent-gold);
cursor: pointer;
transition: var(--soft-transition);
}
.star-rating-input i:hover,
.star-rating-input i.hover,
.star-rating-input i.filled {
color: var(--color-accent-gold);
transform: scale(1.1);
}
.btn-remove-rating {
background: var(--color-accent-gold);
color: #000000;
border: none;
font-size: 0.8rem;
padding: 6px 12px;
border-radius: 50px;
}
.review-textarea {
background-color: var(--color-secondary-dark);
border: var(--glass-border);
color: var(--color-text-light);
border-radius: 8px;
padding: 15px;
}
.review-textarea:focus {
background-color: var(--color-secondary-dark);
color: var(--color-text-light);
border-color: var(--color-accent-gold);
box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25);
}
.reviews-title {
font-weight: 600;
color: var(--color-text-light);
padding-bottom: 10px;
border-bottom: var(--glass-border);
}
.review-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
border-bottom: var(--glass-border);
}
.review-item:last-child {
border-bottom: none;
}
.review-main {
display: flex;
align-items: center;
gap: 20px;
}
.review-rating-display {
text-align: center;
}
.rating-score {
font-size: 2rem;
font-weight: 600;
color: var(--color-text-light);
}
.review-author {
font-weight: 600;
color: var(--color-text-light);
}
.review-comment-text {
color: var(--color-text-medium);
margin: 0;
}
.review-date {
font-size: 0.85rem;
color: var(--color-text-medium);
}
.review-actions .action-link {
font-size: 0.9rem;
text-decoration: none;
color: var(--color-accent-gold);
margin-left: 15px;
font-weight: 500;
}
/* ebook details css end */
/* add-to-cart */
.cart-page-content {
padding-top: 100px;
background-color: var(--color-primary-dark);
color: var(--color-text-light);
font-family: var(--font-primary);
}
.page-title {
font-weight: 700;
color: var(--color-text-light);
}
.page-subtitle {
color: var(--color-text-medium);
}
tr:hover {
background: #61616126;
}
.gateway {
display: flex;
gap: 12px;
border-radius: 12px;
padding: 12px;
background: #61616126;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
-ms-border-radius: 12px;
-o-border-radius: 12px;
transition: .3s ease;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-ms-transition: .3s ease;
-o-transition: .3s ease;
border: 1px solid transparent;
}
.gateway .gateway-logo {
width: 100%;
height: 100px;
border-radius: 8px;
border: var(--glass-border);
display: flex;
justify-content: center;
align-items: center;
background-color: var(--color-secondary-dark);
overflow: hidden;
}
.gateway:hover,
.gateway.active {
border: 1px solid var(--color-accent-gold);
}
.gateway img {
width: 100%;
object-fit: cover;
height: 100%;
}
.merchant,
.account-number {
font-size: 20px;
}
.account-number {
color: var(--color-accent-gold);
}
.copy-account-number svg {
display: inline-flex;
}
.copy-account-number svg path {
transition: .3s;
fill: rgb(255 255 255 / 50%);
-webkit-transition: .3s;
-moz-transition: .3s;
-ms-transition: .3s;
-o-transition: .3s;
}
.copy-account-number {
display: flex;
justify-content: center;
align-items: center;
background: #61616126;
width: 32px;
height: 32px;
border: var(--glass-border);
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
transition: .3s;
-webkit-transition: .3s;
-moz-transition: .3s;
-ms-transition: .3s;
-o-transition: .3s;
}
.copy-account-number:hover {
background: var(--color-accent-gold);
}
.copy-account-number:hover svg path {
fill: var(--color-primary-dark);
}
/* Cart Item Card */
.cart-item-card {
transition: var(--soft-transition);
padding-bottom: 1.5rem;
margin-bottom: 1.5rem;
padding: 12px;
border-radius: 12px;
transition: .3s ease;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-ms-transition: .3s ease;
-o-transition: .3s ease;
}
.cart-item-card:hover {
background: #61616126;
}
.cart-item-image {
position: relative;
display: block;
width: 60px;
/* Reduced size for a more compact look */
height: 60px;
overflow: hidden;
/* Ensures image stays within bounds */
border-radius: 8px;
/* Consistent with theme's rounded corners */
border: 1px solid var(--glass-border);
/* Subtle border for definition */
}
.cart-item-image img {
width: 100%;
height: 100%;
object-fit: cover;
/* Maintains aspect ratio, crops overflow */
display: block;
/* Removes any inline spacing */
}
.cart-item-image::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom,
transparent,
var(--color-primary-dark));
/* Gradient overlay for depth */
border-radius: 8px;
pointer-events: none;
/* Ensures clicks pass through */
}
.item-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--color-text-light);
text-decoration: none;
}
.item-title:hover {
color: var(--color-accent-gold);
}
.item-category {
font-size: 0.8rem;
font-weight: 500;
padding: 4px 12px;
border-radius: 20px;
display: inline-block;
}
.item-category.product {
background: var(--color-accent-gold);
color: var(--color-primary-dark);
}
.item-category.course {
background: var(--tag-green);
color: var(--color-primary-dark);
}
.item-category.ebook {
background: var(--tag-blue);
color: var(--color-primary-dark);
}
.item-price {
font-size: 1.2rem;
font-weight: 600;
color: var(--color-text-light);
}
.item-old-price {
text-decoration: line-through;
color: var(--color-text-medium);
font-size: 0.9rem;
margin-left: 8px;
}
.quantity-selector {
display: flex;
align-items: center;
background-color: var(--color-secondary-dark);
border: var(--glass-border);
border-radius: 8px;
max-width: 160px;
margin-bottom: 6px;
}
button#qty-minus {
font-size: 22px;
line-height: 0;
}
.btn-remove-item {
background: none;
border: none;
color: var(--color-text-medium);
font-size: 1.2rem;
transition: var(--soft-transition);
}
.btn-remove-item:hover {
color: var(--tag-red);
}
.summary-row {
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
color: var(--color-text-medium);
}
.summary-row.total {
color: var(--color-text-light);
font-weight: 600;
font-size: 1.2rem;
border-top: var(--glass-border);
padding-top: 1rem;
}
.coupon-form .form-control {
background: var(--color-secondary-dark);
border: var(--glass-border);
color: var(--color-text-light);
}
.coupon-form .btn-apply {
background: var(--color-secondary-dark);
border: var(--glass-border);
color: var(--color-accent-gold);
transition: var(--soft-transition);
}
.coupon-form .btn-apply:hover {
background: var(--color-accent-gold);
color: var(--color-primary-dark);
}
.btn-checkout {
background-color: var(--color-accent-gold);
border: none;
color: var(--color-primary-dark);
font-weight: 700;
padding: 10px 16px;
font-size: 1.1rem;
transition: var(--soft-transition);
/* animation: breathe 2.5s infinite ease-in-out; */
/* -webkit-animation: breathe 2.5s infinite ease-in-out; */
border: 2px solid transparent;
}
@keyframes breathe {
0%,
100% {
transform: scale(1);
box-shadow: 0 5px 15px rgba(212, 175, 55, 0.2);
}
50% {
transform: scale(1.03);
box-shadow: 0 8px 25px rgba(212, 175, 55, 0.3);
}
}
.btn-checkout:hover {
background-color: #eab308;
animation-play-state: paused;
}
/* Recommended Items Slider */
.recommended-swiper .swiper-slide {
height: auto;
}
.recommended-swiper .program-card {
height: 100%;
transition: var(--soft-transition);
}
.program-card-img {
position: relative;
}
.program-card-img img {
width: 100%;
height: 150px;
object-fit: cover;
border-radius: 8px;
}
/* Mobile Summary Bar & Offcanvas */
.mobile-summary-bar {
background: var(--glass-bg);
backdrop-filter: blur(12px);
border-top: var(--glass-border);
z-index: 1000;
}
.offcanvas.offcanvas-bottom {
background-color: var(--color-secondary-dark);
border-top: var(--glass-border);
color: var(--color-text-light);
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}
.offcanvas-header {
border-bottom: var(--glass-border);
}
.btn-close-white {
filter: invert(1);
}
/* Empty Cart State */
.empty-cart img {
max-width: 150px;
opacity: 0.5;
}
/* Toast Notification */
.toast-container {
z-index: 1056;
}
.toast {
background-color: var(--color-secondary-dark);
color: var(--color-text-light);
border: var(--glass-border);
}
.toast-header {
background-color: var(--glass-bg);
color: var(--color-text-light);
border-bottom: var(--glass-border);
}
/* program single page css */
.program-page-content {
padding-top: 100px;
background-color: var(--color-primary-dark);
color: var(--color-text-light);
font-family: var(--font-primary);
}
.program-page-title {
color: var(--color-text-light);
font-weight: 700;
margin-bottom: 2.5rem;
text-align: center;
}
.year-section {
margin-bottom: 3.5rem;
}
.year-title {
font-size: 1.8rem;
font-weight: 600;
color: var(--color-accent-gold);
margin-bottom: 1.5rem;
padding-bottom: 10px;
border-bottom: 1px solid var(--glass-border);
}
.program-card {
background: var(--glass-bg);
border: var(--glass-border);
border-radius: 12px;
overflow: hidden;
transition: var(--soft-transition);
backdrop-filter: blur(10px);
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
/* For the tag */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.btn-details-single-Item-page {
background-color: var(--color-accent-gold-dark);
color: #000;
border: none;
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: 0.3s ease;
opacity: 0;
/* Initially hidden */
visibility: hidden;
/* Prevent click before hover */
transform: translateY(10px);
/* Slide effect */
}
/* Show button on hover */
.program-card:hover .btn-details-single-Item-page {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.program-card:hover {
transform: translateY(-8px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
border-color: rgba(212, 175, 55, 0.5);
}
.program-card-img {
aspect-ratio: 16 / 10;
overflow: hidden;
}
.program-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.program-card:hover .program-card-img img {
transform: scale(1.05);
}
.program-card-body {
padding: 20px;
flex-grow: 1;
}
.program-card-title {
color: var(--color-text-light);
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 8px;
}
.program-card-date {
color: var(--color-text-medium);
font-size: 0.9rem;
}
#load-more-programs {
background-color: transparent;
color: var(--color-text-medium);
border: 2px solid var(--color-text-medium);
font-weight: 600;
padding: 10px 30px;
border-radius: 50px;
transition: var(--soft-transition);
}
#load-more-programs:hover {
background-color: var(--color-accent-gold);
border-color: var(--color-accent-gold);
color: var(--color-primary-dark);
transform: scale(1.05);
}
/* Wrapper */
.event-hero.hero-wrap {
position: relative;
overflow: hidden;
border-radius: 16px;
}
/* Image */
.event-hero-img.hero-bg-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
/* Content */
.hero-content.hero-text {
position: relative;
color: #fff;
padding: 0 40px;
max-width: 700px;
z-index: 3 !important;
}
/* Overlay */
.event-hero.hero-wrap::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom,
rgba(0, 0, 0, 0.25),
rgba(0, 0, 0, 0.65));
z-index: 2;
}
/* Title */
.hero-title.hero-heading {
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 3px !important;
}
/* Meta */
.hero-meta.hero-info {
font-size: 15px;
opacity: 0.9;
}
/* program single page css end */
/* program details page css */
.event-details-page {
background-color: var(--color-primary-dark);
color: var(--color-text-light);
font-family: var(--font-primary);
}
.section-card {
background: var(--glass-bg);
border: var(--glass-border);
border-radius: 16px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.section-title {
font-size: 1.8rem;
font-weight: 600;
color: var(--color-text-light);
margin-bottom: 1.5rem;
padding-bottom: 10px;
border-bottom: 1px solid var(--glass-border);
}
/* 1. Hero Section */
.event-hero {
height: 60vh;
min-height: 400px;
border-radius: 16px;
background-size: cover;
background-position: center;
position: relative;
display: flex;
align-items: flex-end;
padding: 2.5rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.event-hero::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top,
rgba(0, 0, 0, 0.85) 20%,
transparent 100%);
border-radius: 16px;
}
.hero-content {
position: relative;
z-index: 2;
}
.hero-category-badge {
background-color: var(--color-accent-gold);
color: var(--color-primary-dark);
font-weight: 600;
padding: 5px 15px;
border-radius: 50px;
display: inline-block;
margin-bottom: 1.6rem;
}
.hero-title {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 700;
color: #fff;
line-height: 1.2;
}
.hero-meta {
color: var(--color-text-light);
font-size: 1.1rem;
}
/* 2-3. Details & Description */
.details-grid {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.detail-item {
background: var(--color-secondary-dark);
padding: 1rem;
border-radius: 8px;
flex: 1 1 200px;
display: flex;
align-items: center;
gap: 1rem;
}
.detail-item i {
font-size: 1.5rem;
color: var(--color-accent-gold);
}
.detail-item .label {
color: var(--color-text-medium);
font-size: 0.9rem;
}
.detail-item .value {
color: var(--color-text-light);
font-weight: 500;
}
.description-content p {
color: var(--color-text-medium);
line-height: 1.8;
}
.event-related-btn {
margin-top: auto;
}
/* 4. iFrame Visibility Fix (For Video & Map) */
.iframe-wrapper {
position: relative;
width: 100%;
overflow: hidden;
border-radius: 12px;
aspect-ratio: 16 / 9;
}
.iframe-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
/* 5. Gallery & Lightbox */
.gallery-swiper .swiper-slide {
aspect-ratio: 16/10;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
}
.gallery-swiper img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gallery-swiper .swiper-pagination-bullet {
background-color: var(--color-text-medium);
opacity: 0.6;
}
.gallery-swiper .swiper-pagination-bullet-active {
background-color: var(--color-accent-gold);
transform: scale(1.2);
opacity: 1;
}
.lightbox-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
}
.lightbox-overlay.active {
opacity: 1;
visibility: visible;
}
.lightbox-image {
max-width: 90%;
max-height: 90%;
object-fit: contain;
border-radius: 8px;
transform: scale(0.8);
transition: transform 0.4s ease;
}
.lightbox-overlay.active .lightbox-image {
transform: scale(1);
}
.lightbox-close {
position: absolute;
top: 20px;
right: 30px;
font-size: 3rem;
color: #fff;
background: none;
border: none;
cursor: pointer;
line-height: 1;
}
/* 6. Schedule */
.timeline-item {
position: relative;
padding-left: 30px;
border-left: 2px solid var(--glass-border);
padding-bottom: 2rem;
}
.timeline-item::before {
content: "";
position: absolute;
left: -9px;
top: 0;
width: 16px;
height: 16px;
background-color: var(--color-accent-gold);
border-radius: 50%;
border: 3px solid var(--color-secondary-dark);
}
.timeline-time {
font-weight: 600;
color: var(--color-accent-gold);
}
/* 7. Guests */
.guest-card img {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--color-accent-gold);
}
.guest-name {
color: var(--color-text-light);
font-weight: 600;
margin-top: 1rem;
}
/* 9-11. Actions & Social */
.btn-gradient {
background: linear-gradient(90deg, #d4af37, #e0a800);
border: none;
color: var(--color-primary-dark);
font-weight: 600;
padding: 12px 30px;
border-radius: 8px;
transition: var(--soft-transition);
}
.btn-gradient:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
}
.social-share a {
color: var(--color-text-medium);
font-size: 1.5rem;
transition: var(--soft-transition);
}
.social-share a:hover {
color: var(--color-accent-gold);
transform: scale(1.1);
}
/* 12. Comments */
.comment-item {
display: flex;
gap: 15px;
padding: 20px 0;
border-top: var(--glass-border);
}
.comment-avatar {
width: 45px;
height: 45px;
border-radius: 50%;
}
/* program details page css end */
.program-page-content {
margin-top: 100px;
background-color: var(--color-primary-dark);
font-family: var(--font-primary);
color: var(--color-text-light);
}
/* 1. Page Header Section */
.program-header {
background: var(--glass-bg);
border: var(--glass-border);
border-radius: 16px;
padding: 2.5rem;
margin-top: 2rem;
margin-bottom: 2.5rem;
backdrop-filter: blur(12px);
}
.program-header .page-title {
font-weight: 700;
}
.program-header .page-tagline {
color: var(--color-text-medium);
}
.program-header .form-control,
.program-header .form-select {
background-color: var(--color-secondary-dark);
color: var(--color-text-light);
border: var(--glass-border);
border-radius: 8px;
}
.program-header .form-control:focus,
.program-header .form-select:focus {
border-color: var(--color-accent-gold);
box-shadow: 0 0 0 0.25rem rgba(212, 175, 55, 0.25);
}
.program-header .form-control::placeholder {
color: var(--color-text-medium);
}
/* 2. Filter Sidebar */
.filter-sidebar {
background: var(--glass-bg);
border: var(--glass-border);
border-radius: 16px;
padding: 25px;
backdrop-filter: blur(12px);
}
.filter-group-title {
font-size: 1.2rem;
font-weight: 600;
color: var(--color-text-light);
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid var(--glass-border);
}
.filter-list {
list-style: none;
padding-left: 0;
}
.filter-list .form-check {
padding-left: 2.2em;
margin-bottom: 15px;
}
.filter-list .form-check-input {
display: none;
}
.filter-list .form-check-label {
color: var(--color-text-medium);
cursor: pointer;
position: relative;
display: flex;
justify-content: space-between;
transition: var(--soft-transition);
}
.filter-list .form-check:hover .form-check-label {
color: var(--color-text-light);
}
.filter-list .form-check-label::before {
content: "";
position: absolute;
left: -2.2em;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid var(--color-text-medium);
transition: var(--soft-transition);
}
.filter-list .form-check-label::after {
content: "";
position: absolute;
left: -1.8em;
top: 50%;
transform: translateY(-50%) scale(0);
width: 12px;
height: 12px;
border-radius: 50%;
background-color: var(--color-accent-gold);
transition: var(--soft-transition);
}
.filter-list .form-check-input:checked+.form-check-label {
color: var(--color-accent-gold);
font-weight: 500;
}
.filter-list .form-check-input:checked+.form-check-label::before {
border-color: var(--color-accent-gold);
}
.filter-list .form-check-input:checked+.form-check-label::after {
transform: translateY(-50%) scale(1);
}
.rating-filter .bi {
color: var(--color-accent-gold);
}
/* 3. Program Card */
.program-card {
background: var(--glass-bg);
border: var(--glass-border);
border-radius: 12px;
overflow: hidden;
transition: var(--soft-transition);
backdrop-filter: blur(10px);
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
}
.program-card:hover {
transform: translateY(-8px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
border-color: rgba(212, 175, 55, 0.5);
}
.program-card-img {
aspect-ratio: 16 / 10;
overflow: hidden;
position: relative;
}
.program-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.program-card:hover .program-card-img img {
transform: scale(1.05);
}
.price-badge {
position: absolute;
top: 15px;
right: 15px;
background-color: var(--tag-green);
color: var(--color-primary-dark);
padding: 4px 12px;
border-radius: 50px;
font-size: 0.85rem;
font-weight: 600;
}
.price-badge.free {
background-color: var(--tag-blue);
color: #fff;
}
.program-card-body {
padding: 20px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.program-card-title {
color: var(--color-text-light);
font-size: 1.1rem;
font-weight: 600;
line-height: 1.4;
margin-bottom: 10px;
}
.program-card-instructor {
font-size: 0.9rem;
color: var(--color-text-medium);
margin-bottom: 15px;
}
.program-card-footer {
margin-top: auto;
padding-top: 15px;
border-top: 1px solid var(--glass-border);
display: flex;
justify-content: space-between;
align-items: center;
}
.program-card-rating {
color: var(--color-accent-gold);
font-size: 0.9rem;
}
.program-page-title {
color: var(--color-text-light);
font-weight: 700;
margin-bottom: 2.5rem;
text-align: center;
}
*/ .btn-details:hover {
background-color: var(--color-accent-gold-dark);
}
/* Mobile Filter Toggle Button */
#mobile-filter-toggle {
background-color: var(--glass-bg);
color: var(--color-accent-gold);
border: var(--glass-border);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
font-weight: 600;
}
/* my profile and ebook */
.dashboard-page {
background-color: var(--color-primary-dark);
color: var(--color-text-light);
font-family: var(--font-primary);
/* padding-top: 100px; */
padding-bottom: 50px;
}
/* 1. Profile Header Section */
.profile-header-card {
background: var(--glass-bg);
border: var(--glass-border);
border-radius: 16px;
padding: 2rem;
backdrop-filter: blur(12px);
position: relative;
margin-top: -80px;
/* Pulls it up into the banner */
}
.profile-banner {
height: 200px;
border-radius: 16px;
background: linear-gradient(100deg, #161618, #d4af37);
position: relative;
overflow: hidden;
}
/* Wave SVG for banner background */
.profile-banner svg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: auto;
opacity: 0.5;
}
.profile-avatar-dashbord {
width: 120px;
height: 120px;
border-radius: 50%;
border: 4px solid var(--color-primary-dark);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.profile-name {
font-size: 1.8rem;
font-weight: 600;
color: var(--color-text-light);
}
.profile-stats {
color: var(--color-text-medium);
display: flex;
gap: 1.5rem;
font-size: 0.9rem;
justify-content: center;
/* Center stats on mobile */
}
.profile-stats i {
color: var(--color-accent-gold);
}
/* 2. Sidebar Navigation */
.dashboard-sidebar {
background: var(--glass-bg);
border: var(--glass-border);
border-radius: 16px;
padding: 1.5rem;
backdrop-filter: blur(12px);
height: 100%;
position: sticky;
top: 20px;
height: 50vh;
overflow-y: auto;
}
/* .row {
align-items: flex-start;
} */
.sidebar-welcome-text {
font-size: 0.8rem;
color: var(--color-text-medium);
text-transform: uppercase;
font-weight: 500;
}
.sidebar-nav .nav-link {
display: flex;
align-items: center;
gap: 1rem;
color: var(--color-text-medium);
padding: 0.75rem 1rem;
border-radius: 8px;
font-weight: 500;
transition: var(--soft-transition);
border-left: 3px solid transparent;
}
.sidebar-nav .nav-link:hover {
background-color: rgba(255, 255, 255, 0.05);
color: var(--color-text-light);
}
.sidebar-nav .nav-link.active {
background-color: rgba(212, 175, 55, 0.1);
color: var(--color-accent-gold);
border-left-color: var(--color-accent-gold);
}
/* 3. Main Content Area (My Ebooks) */
.dashboard-content-card {
background: var(--glass-bg);
border: var(--glass-border);
border-radius: 16px;
padding: 2rem;
backdrop-filter: blur(12px);
min-height: 100%;
}
.content-title {
font-size: 1.5rem;
font-weight: 600;
color: var(--color-text-light);
margin-bottom: 1.5rem;
}
.ebook-card {
background: var(--color-secondary-dark);
border: var(--glass-border);
border-radius: 12px;
overflow: hidden;
transition: var(--soft-transition);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.ebook-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
border-color: rgba(212, 175, 55, 0.5);
}
.ebook-card-img img {
width: 100%;
aspect-ratio: 2 / 3;
object-fit: cover;
}
.ebook-card-body {
padding: 1rem;
}
.ebook-author {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
color: var(--color-text-medium);
margin-bottom: 0.5rem;
}
.ebook-author img {
width: 24px;
height: 24px;
border-radius: 50%;
}
.ebook-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--color-text-light);
line-height: 1.4;
}
.btn-read-now {
background: linear-gradient(100deg, #161618, #d4af37);
border: none;
color: #fff;
font-weight: 600;
padding: 10px;
border-radius: 8px;
transition: var(--soft-transition);
}
.btn-read-now:hover {
transform: scale(1.05);
box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2);
}
/* sms css start */
/* .dashboard-page {
padding-top: 100px;
} */
.dashboard-content-card.chat-container {
padding: 0;
display: flex;
height: 75vh;
overflow: hidden;
position: relative;
}
/* --- Sidebar --- */
.chat-sidebar {
width: 100%;
display: flex;
flex-direction: column;
background: var(--color-secondary-dark);
border-right: var(--glass-border);
transition: transform 0.3s ease-in-out;
}
.sidebar-search {
padding: 1rem;
border-bottom: var(--glass-border);
}
.sidebar-search .form-control {
background-color: var(--color-primary-dark);
border: var(--glass-border);
color: var(--color-text-light);
}
.conversation-list {
overflow-y: auto;
flex-grow: 1;
}
.conversation-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
cursor: pointer;
border-bottom: var(--glass-border);
}
.conversation-item.active {
background-color: var(--glass-bg);
border-left: 3px solid var(--color-accent-gold);
}
.convo-avatar img {
width: 45px;
height: 45px;
border-radius: 50%;
}
.convo-details .name {
font-weight: 600;
color: var(--color-text-light);
}
.convo-details .time {
font-size: 0.8rem;
color: var(--color-text-medium);
}
.convo-details .preview {
font-size: 0.9rem;
color: var(--color-text-medium);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* --- Chat Window --- */
.chat-window {
width: 100%;
flex-grow: 1;
display: flex;
flex-direction: column;
background-color: var(--color-primary-dark);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transform: translateX(100%);
transition: transform 0.3s ease-in-out;
z-index: 10;
}
.chat-window.active {
transform: translateX(0);
}
.chat-header {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.5rem;
background-color: var(--color-secondary-dark);
border-bottom: var(--glass-border);
}
.chat-header .back-btn {
font-size: 1.5rem;
color: var(--color-text-light);
}
.chat-header .dropdown-toggle::after {
display: none;
}
.chat-header .dropdown-menu {
background-color: var(--color-secondary-dark);
border: var(--glass-border);
}
.chat-header .dropdown-item {
color: var(--color-text-light);
}
.chat-header .dropdown-item:hover {
background-color: var(--glass-bg);
color: var(--color-accent-gold);
}
.chat-body {
flex-grow: 1;
padding: 1.5rem;
overflow-y: auto;
display: flex;
flex-direction: column-reverse;
}
.chat-body>div {
display: flex;
flex-direction: column-reverse;
}
.message-group {
display: flex;
margin-bottom: 1rem;
flex-direction: column;
max-width: 80%;
}
.message-group.outgoing {
align-items: flex-end;
margin-left: auto;
}
.message-group.incoming {
align-items: flex-start;
margin-right: auto;
}
/* Message Bubble & Options */
.thin-dropdown {
min-width: auto !important;
width: auto;
padding: 1px 0 0px;
}
.thin-dropdown .dropdown-item {
font-size: 10px;
font-weight: 300;
line-height: 1.2;
padding: 5px 14px;
white-space: nowrap;
}
.message-group.incoming .message-wrapper {
flex-direction: row;
}
.message-group.outgoing .message-wrapper {
flex-direction: row;
}
.message-bubble {
padding: 0.75rem 1rem;
border-radius: 18px;
color: var(--color-text-light);
}
.message-group.incoming .message-bubble {
background-color: var(--color-secondary-dark);
border-top-left-radius: 4px;
}
.message-group.outgoing .message-bubble {
background: linear-gradient(90deg, #8B5CF6, #6366F1);
border-top-right-radius: 4px;
}
.message-options .dropdown-toggle {
color: var(--color-text-medium);
text-decoration: none;
opacity: 0;
transition: var(--soft-transition);
}
.message-wrapper:hover .message-options .dropdown-toggle {
opacity: 1;
}
.message-options .dropdown-menu {
background-color: var(--color-secondary-dark);
border: var(--glass-border);
}
.message-options .dropdown-item {
font-size: 0.9rem;
color: var(--color-text-light);
}
.message-options .dropdown-item:hover {
background-color: var(--glass-bg);
}
.message-time {
font-size: 0.75rem;
color: var(--color-text-medium);
margin-top: 0.25rem;
}
.chat-footer {
padding: 1rem 1.5rem;
background-color: var(--color-secondary-dark);
border-top: var(--glass-border);
}
.chat-footer .form-control {
background-color: var(--color-primary-dark);
border: var(--glass-border);
color: var(--color-text-light);
border-radius: 20px;
}
.btn-send,
.btn-attach {
background: none;
border: none;
color: var(--color-text-medium);
font-size: 1.5rem;
}
.btn-send {
background: linear-gradient(90deg, #8B5CF6, #6366F1);
color: #fff;
border-radius: 50%;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
}
/* sms css end */
/* my shop css start */
.dashboard-content-card .table {
--bs-table-color: var(--color-text-light);
--bs-table-bg: transparent;
--bs-table-border-color: var(--glass-border);
--bs-table-hover-color: var(--color-text-light);
--bs-table-hover-bg: rgba(255, 255, 255, 0.05);
border-collapse: separate;
border-spacing: 0 0.5rem;
}
.dashboard-content-card thead th {
color: var(--color-text-medium);
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 0.5px;
font-weight: 600;
border-bottom-width: 2px;
}
.dashboard-content-card tbody tr {
background-color: var(--glass-bg);
transition: var(--soft-transition);
}
.dashboard-content-card tbody td {
vertical-align: middle;
padding: 1rem;
}
.dashboard-content-card tbody td:first-child {
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
}
.dashboard-content-card tbody td:last-child {
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
}
.product-title-in-table {
font-weight: 500;
color: var(--color-text-light);
text-decoration: none;
/* underline বন্ধ */
}
/* Hover এও underline বন্ধ রাখবো */
.product-title-in-table:hover {
text-decoration: none;
}
.product-image-in-table {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 8px;
}
/* পুরো tag underline বন্ধ রাখার জন্য */
a.d-flex.align-items-center {
text-decoration: none !important;
}
/* my shop css end */
/* register page css start */
.auth-wrapper {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 0;
}
.auth-container {
max-width: 1000px;
width: 100%;
background: var(--color-secondary-dark);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}
/* Left Branding Panel */
.auth-branding-panel {
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?q=80&w=1820') no-repeat center center;
background-size: cover;
padding: 3rem;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.auth-branding-panel .logo img {
max-width: 80px;
margin-bottom: 1.5rem;
}
.auth-branding-panel h1 {
font-weight: 700;
font-size: 2.5rem;
color: #fff;
}
.auth-branding-panel p {
color: var(--color-text-medium);
font-size: 1.1rem;
}
/* Right Form Panel */
.auth-form-panel {
padding: 2rem;
}
.auth-form-panel h2 {
font-weight: 600;
color: var(--color-text-light);
margin-bottom: 2rem;
}
.form-group {
position: relative;
}
.form-group .form-control {
background-color: var(--color-primary-dark);
border: var(--glass-border);
color: var(--color-text-light);
border-radius: 8px;
padding: 12px 15px 12px 45px;
/* Space for icon */
height: 50px;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-text-fill-color: #fff;
-webkit-box-shadow: 0 0 0px 1000px var(--color-primary-dark) inset;
transition: background-color 9999s ease-in-out 0s;
}
.form-group .form-control:focus {
background-color: var(--color-primary-dark);
color: var(--color-text-light);
border-color: var(--color-accent-gold);
box-shadow: 0 0 0 0.25rem rgba(212, 175, 55, 0.2);
}
.form-group .form-icon {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: var(--color-text-medium);
}
.rg-btn-submit {
background-color: var(--color-accent-gold);
border: none;
color: var(--color-primary-dark);
font-weight: 600;
padding: 12px;
border-radius: 8px;
transition: var(--soft-transition);
}
.rg-btn-submit:hover {
background-color: #eab308;
transform: translateY(-2px);
}
.divider {
text-align: center;
margin: 1.5rem 0;
color: var(--color-text-medium);
display: flex;
align-items: center;
}
.divider::before,
.divider::after {
content: '';
flex: 1;
border-bottom: 1px solid var(--glass-border);
}
.divider:not(:empty)::before {
margin-right: .5em;
}
.divider:not(:empty)::after {
margin-left: .5em;
}
.rg-btn-social {
background: var(--glass-bg);
border: var(--glass-border);
color: var(--color-text-light);
transition: var(--soft-transition);
}
.rg-btn-social:hover {
background-color: var(--color-accent-gold);
border-color: var(--color-text-medium);
}
.auth-switch-link a {
color: var(--color-accent-gold);
text-decoration: none;
font-weight: 500;
}
/* register page css end */
/* --------------------------------------------------------- */
/* Dark theme form styles */
.form-control,
.form-select,
textarea {
background-color: #1e1e2f;
/* ডার্ক ব্যাকগ্রাউন্ড */
color: #f5f5f5;
/* টেক্সট সাদা */
border: 1px solid #444;
/* হালকা বর্ডার */
}
.form-control::placeholder,
textarea::placeholder {
color: #aaa;
/* placeholder এর জন্য হালকা কালার */
}
.form-control:focus,
.form-select:focus,
textarea:focus {
background-color: #252538;
border-color: #666;
box-shadow: none;
/* bootstrap blue shadow remove */
color: #fff;
}
.profile-dropdown-wrapper .dropdown-menu {
background-color: #1F2229;
border: var(--glass-border, 1px solid rgba(255, 255, 255, 0.1));
border-radius: 12px;
min-width: 300px;
padding: 0.5rem 0;
transition: all 0.3s ease;
box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.4));
}
.profile-dropdown-wrapper .dropdown-item {
color: #D1D5DB;
font-weight: 500;
padding: 0.5rem 1rem;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
border-radius: 8px;
}
.name-text {
color: #D1D5DB;
}
.profile-dropdown-wrapper .dropdown-item:hover {
background: var(--color-accent-gold, #D4AF37);
color: #D1D5DB;
}
.profile-dropdown-wrapper .dropdown-toggle img {
width: 45px;
height: 45px;
object-fit: cover;
border-radius: 50%;
border: 2px solid var(--color-accent-gold, #D4AF37);
transition: transform 0.2s ease;
}
.profile-dropdown-wrapper .dropdown-toggle img:hover {
transform: scale(1.05);
}
.profile-img {
border: 3px solid var(--color-accent-gold, #D4AF37);
border-radius: 50%;
padding: 1px;
background-color: #D4AF37;
box-shadow: 0 0 2px var(--color-accent-gold, #D4AF37),
0 0 20px rgba(212, 175, 55, 0.6);
}
.course-player-page {
display: flex;
flex-direction: column;
height: 100vh;
}
/* Header */
.player-header {
padding: 1rem 1.25rem;
background: var(--color-secondary-dark);
border-bottom: var(--glass-border);
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-btn {
background: var(--glass-bg);
border: var(--glass-border);
color: var(--color-text-light);
padding: 0.4rem 0.8rem;
border-radius: 8px;
text-decoration: none;
}
.nav-btn:hover {
background: var(--color-accent-gold);
color: var(--color-primary-dark);
}
/* Main */
.player-main-content {
display: flex;
flex: 1;
overflow: hidden;
}
@media (max-width: 991.98px) {
.player-main-content {
flex-direction: column;
}
.course-content-sidebar {
height: auto;
}
}
/* Video area */
.video-player-container {
flex: 1;
background: #000;
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: auto;
}
video#custom-player {
width: 100%;
height: 100%;
object-fit: contain;
background: #000;
}
/* Controls bar */
.custom-controls {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 10px 14px;
display: flex;
gap: 12px;
align-items: center;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
opacity: 0;
transition: opacity 0.22s ease;
}
.video-player-container:hover .custom-controls,
.video-player-container.controls-visible .custom-controls {
opacity: 1;
}
.control-btn {
background: none;
border: none;
color: #fff;
font-size: 1.25rem;
cursor: pointer;
}
.control-btn:hover {
transform: scale(1.06);
}
.time-display {
width: 64px;
text-align: center;
font-size: 0.9rem;
color: var(--color-text-light);
}
/* Progress */
.progress-bar-container {
flex: 1;
height: 8px;
background: rgba(255, 255, 255, 0.18);
border-radius: 8px;
position: relative;
cursor: pointer;
overflow: hidden;
}
.progress-bar-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--color-accent-gold), #f3d97a);
box-shadow: 0 0 10px rgba(212, 175, 55, 0.35);
transition: width 0.12s linear;
}
/* thumb as pseudo */
.progress-bar-fill::after {
content: "";
position: absolute;
right: -8px;
top: 50%;
transform: translateY(-50%);
width: 14px;
height: 14px;
border-radius: 50%;
background: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
opacity: 0;
transition:
opacity 0.12s ease,
right 0.12s linear;
}
.progress-bar-container:hover .progress-bar-fill::after {
opacity: 1;
}
/* Volume group */
.volume-group {
display: flex;
align-items: center;
gap: 8px;
}
.volume-slider {
width: 110px;
accent-color: var(--color-accent-gold);
}
/* Settings menu (multi-level) */
.settings-shell {
position: absolute;
bottom: 64px;
right: 18px;
width: 220px;
background: var(--glass-bg);
border: var(--glass-border);
border-radius: 10px;
padding: 8px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
transform-origin: bottom right;
opacity: 0;
visibility: hidden;
transition:
opacity 0.18s ease,
transform 0.18s ease,
visibility 0.18s;
z-index: 60;
}
.settings-shell.open {
opacity: 1;
visibility: visible;
transform: translateY(-6px) scale(1);
}
.settings-shell .menu-main,
.settings-shell .menu-sub {
min-height: 40px;
}
.settings-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px;
border-radius: 6px;
color: var(--color-text-light);
cursor: pointer;
transition: background 0.12s ease;
}
.settings-item:hover {
background: rgba(255, 255, 255, 0.03);
}
.settings-item .label {
display: flex;
gap: 8px;
align-items: center;
}
/* Submenu container - sliding */
.menu-sub {
position: relative;
overflow: hidden;
height: auto;
}
.sub-panel {
position: relative;
transition: transform 0.22s ease;
padding: 6px;
}
.sub-panel.hidden {
display: none;
}
.sub-list {
display: flex;
flex-direction: column;
gap: 6px;
padding: 6px;
}
.sub-list button {
text-align: left;
background: none;
border: none;
padding: 8px;
border-radius: 6px;
color: var(--color-text-light);
cursor: pointer;
}
.sub-list button.active {
background: var(--color-accent-gold);
color: var(--color-primary-dark);
font-weight: 600;
}
.settings-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 6px 4px;
}
.settings-back {
background: none;
border: none;
color: var(--color-text-light);
cursor: pointer;
font-size: 1rem;
}
/* Small toast message (for Quality simulation) */
.ui-toast {
position: absolute;
left: 50%;
top: 18px;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.6);
padding: 6px 12px;
border-radius: 999px;
color: #fff;
font-size: 0.9rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease;
z-index: 90;
}
.ui-toast.show {
opacity: 1;
}
/* Sidebar / accordion & lessons */
.course-content-sidebar {
border-left: var(--glass-border);
height: calc(100vh - 64px);
padding: 1rem;
box-sizing: border-box;
overflow-y: auto;
scroll-behavior: smooth;
}
@media (min-width: 992px) {
.course-content-sidebar {
width: 360px;
}
}
.course-accordion .accordion-button {
background: var(--glass-bg);
color: var(--color-text-light);
border-radius: 8px;
}
.lesson-list {
list-style: none;
padding: 0;
margin: 0;
}
.lesson-item {
display: flex;
gap: 10px;
align-items: center;
padding: 0.6rem;
border-radius: 8px;
cursor: pointer;
transition: var(--soft-transition);
}
.lesson-item.active {
background: linear-gradient(90deg,
rgba(192, 132, 252, 0.08),
rgba(96, 165, 250, 0.08));
border: 1px solid rgba(192, 132, 252, 0.18);
}
.lesson-checkbox {
width: 22px;
height: 22px;
border-radius: 4px;
background: var(--glass-bg);
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid var(--color-text-medium);
color: transparent;
}
.lesson-item.watched .lesson-checkbox {
background: var(--color-accent-gold);
border-color: var(--color-accent-gold);
color: var(--color-primary-dark);
}
/* small responsiveness */
@media (max-width: 700px) {
.settings-shell {
right: 10px;
width: 200px;
bottom: 70px;
}
.volume-slider {
width: 70px;
}
}
@-webkit-keyframes shadows {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, .15), 0 0 0 30px rgba(255, 255, 255, .15), 0 0 0 50px rgba(255, 255, 255, .15);
}
100% {
box-shadow: 0 0 0 30px rgba(255, 255, 255, .15), 0 0 0 50px rgba(255, 255, 255, .15), 0 0 0 70px rgba(255, 255, 255, 0);
}
}
@keyframes shadows {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, .15), 0 0 0 30px rgba(255, 255, 255, .15), 0 0 0 50px rgba(255, 255, 255, .15);
}
100% {
box-shadow: 0 0 0 30px rgba(255, 255, 255, .15), 0 0 0 50px rgba(255, 255, 255, .15), 0 0 0 70px rgba(255, 255, 255, 0);
}
}
.voucher-swiper .swiper-slide {
height: 350px;
}
.voucher-swiper .swiper-pagination {
bottom: 2px !important;
}
.review-comment {
word-wrap: break-word;
}
.dot-icon {
color: #fff;
}
.password-toggle-icon {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
color: var(--color-text-medium);
cursor: pointer;
}
.forgot-password-link {
color: var(--color-accent-gold);
text-decoration: none;
font-size: 0.9rem;
}
.auth-switch-link a {
color: var(--color-accent-gold);
text-decoration: none;
font-weight: 500;
}
/* input:-internal-autofill-selected {
background-color: var(--color-primary-dark) !important;
} */
/* --- ENHANCED FULLCALENDAR THEME --- */
#calendar-container {
background: var(--glass-bg);
border: var(--glass-border);
border-radius: 16px;
padding: 1.5rem;
backdrop-filter: blur(12px);
}
/* Header Toolbar */
.fc .fc-toolbar.fc-header-toolbar {
margin-bottom: 1.5rem;
color: var(--color-text-light);
}
.fc .fc-toolbar-title {
font-size: 1.8rem;
font-weight: 600;
}
.fc .fc-button {
background-color: var(--color-secondary-dark);
border: var(--glass-border);
color: var(--color-text-light);
box-shadow: none !important;
transition: var(--soft-transition);
}
.fc .fc-button:hover {
background-color: var(--color-accent-gold);
color: var(--color-primary-dark);
}
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
background-color: var(--color-accent-gold);
color: var(--color-primary-dark);
border-color: var(--color-accent-gold);
}
/* Calendar Grid */
.fc .fc-daygrid-day-frame {
min-height: 120px;
/* Ensure cells have enough height */
}
.fc-theme-standard .fc-scrollgrid {
border: var(--glass-border);
}
.fc-theme-standard th,
.fc-theme-standard td {
border: 1px solid rgba(255, 255, 255, 0.1);
}
.fc .fc-col-header-cell-cushion {
/* Day names (Sun, Mon...) */
color: var(--color-text-medium);
text-decoration: none;
font-weight: 500;
}
.fc .fc-daygrid-day-number {
/* Date numbers */
color: var(--color-text-light);
text-decoration: none;
}
.fc .fc-day-today .fc-daygrid-day-frame {
background-color: rgba(212, 175, 55, 0.1);
/* Gold tint for today */
}
.fc .fc-day-today .fc-daygrid-day-number {
background-color: var(--color-accent-gold);
color: var(--color-primary-dark);
border-radius: 50%;
width: 28px;
height: 28px;
display: inline-flex;
justify-content: center;
align-items: center;
font-weight: 600;
}
/* Event Styling */
.fc-event {
border-radius: 4px;
padding: 2px 6px;
font-size: 0.8rem;
font-weight: 500;
cursor: pointer;
}
/* Custom Event Colors */
.fc-event.event-green {
background-color: #16a34a;
border-color: #16a34a;
}
.fc-event.event-blue {
background-color: #2563eb;
border-color: #2563eb;
}
.fc-event.event-purple {
background-color: #7c3aed;
border-color: #7c3aed;
}
.fc-event.event-orange {
background-color: #ea580c;
border-color: #ea580c;
}
.fc-event.event-red {
background-color: #dc2626;
border-color: #dc2626;
}
.fc-event.event-lime {
background-color: #65a30d;
border-color: #65a30d;
}
.empty-state-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rem 1rem;
text-align: center;
min-height: 400px;
}
.empty-state-illustration {
width: 180px;
height: 180px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 2rem;
}
/* The SVG for the illustration */
.empty-state-svg {
width: 100%;
height: 100%;
}
/* Animation for the cards */
@keyframes float-up-down {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
@keyframes float-down-up {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(10px);
}
}
#card-top {
animation: float-up-down 4s ease-in-out infinite;
}
#card-bottom {
animation: float-down-up 4s ease-in-out infinite 0.5s;
/* delayed start */
}
.empty-state-title {
font-size: 1.5rem;
font-weight: 600;
color: var(--color-text-light);
margin-bottom: 0.5rem;
}
.empty-state-subtitle {
font-size: 1rem;
color: var(--color-text-medium);
}
.zoom-box .viewer-box {
position: absolute;
border: 1px solid rgb(239, 237, 240);
overflow: hidden;
width: 516px !important;
height: 338px !important;
/* left: 346.578px !important; */
top: 3px !important;
display: none;
border-radius: 10px;
}
/* poll start */
.poll-wrapper {
background: var(--glass-bg);
border: var(--glass-border);
border-radius: 16px;
padding: 2rem;
backdrop-filter: blur(12px);
}
.poll-question {
font-size: 1.5rem;
font-weight: 600;
color: var(--color-text-light);
margin-bottom: 2rem;
text-align: center;
}
.poll-options {
display: grid;
gap: 1rem;
}
/* --- UNIQUE POLL OPTION DESIGN --- */
.poll-option {
background-color: var(--color-secondary-dark);
border: 2px solid var(--bs-secondary-text-emphasis);
border-radius: 12px;
padding: 1rem;
display: flex;
align-items: center;
cursor: pointer;
transition: var(--soft-transition);
position: relative;
overflow: hidden;
}
.poll-option .progress-bar-fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: linear-gradient(90deg, rgb(93 83 12), rgb(93 83 12));
width: 0;
/* Starts at 0 width */
transition: width 1s ease-in-out;
z-index: 1;
}
/* --- WINNER STYLING --- */
.poll-wrapper.voted .poll-option.winner .progress-bar-fill {
background: linear-gradient(90deg, rgb(93 83 12), rgb(93 83 12));
/* Red Gradient */
}
.poll-option:hover {
border-color: var(--color-text-medium);
}
.poll-option.selected {
border-color: var(--tag-blue);
box-shadow: 0 0 20px rgba(96, 165, 250, 0.4);
}
.poll-option-content {
display: flex;
align-items: center;
width: 100%;
position: relative;
z-index: 2;
}
.poll-option-img {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 8px;
margin-right: 1rem;
}
.poll-option-name {
font-weight: 500;
color: var(--color-text-light);
flex-grow: 1;
}
/* --- PERCENTAGE INSIDE BAR --- */
/* Voted State */
.poll-wrapper.voted .poll-option {
cursor: default;
}
.poll-wrapper.voted .poll-option:hover {
border-color: var(--glass-border);
}
.poll-wrapper.voted .poll-option.selected {
border-color: #d4af3787;
opacity: calc(50%);
}
.poll-wrapper.voted .poll-option-percent {
opacity: 1;
z-index: 2;
}
.poll-wrapper .poll-option-percent {
opacity: 0;
/* z-index: 2; */
}
.poll-wrapper .poll-options.submitting .poll-option-percent {
opacity: 1;
/* z-index: 2; */
}
/* Beautiful Submit Button */
.btn-submit-vote {
background: linear-gradient(90deg, #8B5CF6, #6366F1);
color: #fff;
font-weight: 600;
border: none;
padding: 14px 40px;
border-radius: 50px;
transition: var(--soft-transition);
box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2);
font-size: 1.1rem;
}
.btn-submit-vote:hover:not(:disabled) {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
}
.btn-submit-vote:disabled {
background: var(--color-secondary-dark);
color: var(--color-text-medium);
cursor: not-allowed;
box-shadow: none;
}
.poll-wrapper {
background: var(--glass-bg);
border: var(--glass-border);
border-radius: 14px;
padding: 25px;
margin-bottom: 40px;
}
.poll-question {
text-align: center;
margin-bottom: 20px;
color: #fff;
}
.poll-option {
position: relative;
background: var(--glass-bg);
border: var(--glass-border);
border-radius: 12px;
padding: 14px;
margin-bottom: 12px;
cursor: pointer;
overflow: hidden;
}
.poll-option.selected {
border-color: #8b5cf6;
box-shadow: 0 0 15px rgba(139, 92, 246, .4);
}
.poll-option.winner {
border-color: gold;
}
.progress-bar-fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background: linear-gradient(90deg, #8b5cf6, #6366f1);
transition: width 1s ease;
z-index: 1;
border-color: gold;
}
.poll-option-content {
position: relative;
z-index: 2;
display: flex;
justify-content: space-between;
align-items: center;
color: #fff;
}
.poll-option-percent {
font-weight: bold;
}
.winner-badge {
background: gold;
color: #000;
padding: 2px 6px;
border-radius: 6px;
margin-left: 5px;
font-size: 12px;
}
/* poll end */
/* Donation Cards */
.donate-mini-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 14px;
padding: 20px;
text-align: center;
transition: all 0.3s ease;
}
.donate-mini-card:hover {
transform: translateY(-5px);
border-color: #d4af37;
}
.donate-mini-card .amount {
font-size: 1.5rem;
font-weight: 600;
color: #d4af37;
margin-bottom: 6px;
}
.donate-mini-card small {
display: block;
color: #aaa;
margin-bottom: 12px;
}
/* Buttons */
.btn-donate-sm {
background: linear-gradient(135deg, #d4af37, #b8962e);
color: #000;
font-weight: 600;
border-radius: 8px;
padding: 6px 16px;
border: none;
}
.btn-donate-sm:hover {
background: linear-gradient(135deg, #e6c55c, #caa43a);
}
/* Input */
.donate-input {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
text-align: center;
}
.donate-input::placeholder {
color: #888;
}
.donate-input:focus {
border-color: #d4af37;
box-shadow: none;
color: #fff;
}
/* Glass style Form */
.glass-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(8px);
border-radius: 14px;
}
.glass-card input,
.glass-card textarea {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
}
.glass-card input::placeholder,
.glass-card textarea::placeholder {
color: #aaa;
}
.glass-card input:focus,
.glass-card textarea:focus {
border-color: #d4af37;
box-shadow: none;
color: #fff;
}
/* CTA Donate Button */
.btn-donate {
display: inline-block;
padding: 0.6rem 1.6rem;
font-size: 1rem;
font-weight: 600;
color: #fff;
background: linear-gradient(135deg, #d4af37, #e0a800);
border: none;
border-radius: 12px;
text-decoration: none;
text-align: center;
cursor: pointer;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease-in-out;
}
.btn-donate:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.4);
background: linear-gradient(135deg, #e0a800, #d4af37);
}
.btn-donate:active {
transform: translateY(0) scale(0.98);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}
/* Small version for mini-cards */
.btn-donate-sm {
display: inline-block;
padding: 0.4rem 1rem;
font-size: 0.85rem;
font-weight: 500;
color: #fff;
background: linear-gradient(135deg, #d4af37, #e0a800);
border-radius: 10px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.btn-donate-sm:hover {
transform: translateY(-2px) scale(1.05);
background: linear-gradient(135deg, #e0a800, #d4af37);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}
.plyr--video {
width: 100%;
}
/* ----------------------------------- */
/* HELP DESK START */
.dashboard-page {
padding-top: 50px;
}
.content-title {
color: var(--color-text-light);
font-weight: 600;
margin-bottom: 1.5rem;
}
.btn-create-ticket {
background: var(--color-accent-gold);
color: var(--color-primary-dark);
font-weight: 600;
border-radius: 8px;
border: none;
}
/* Filter Tabs */
.ticket-filter-pills .nav-link {
background-color: var(--color-secondary-dark);
color: var(--color-text-medium);
border-radius: 8px;
margin-right: 10px;
font-weight: 500;
}
.ticket-filter-pills .nav-link.active {
background-color: var(--glass-bg);
border: 1px solid var(--glass-border);
color: var(--color-accent-gold);
}
/* Ticket Card List */
.ticket-card {
display: flex;
flex-direction: column;
justify-content: space-between;
background: var(--glass-bg);
border: var(--glass-border);
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 1rem;
text-decoration: none;
transition: var(--soft-transition);
}
.ticket-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
border-color: rgba(212, 175, 55, 0.4);
}
.ticket-code {
font-size: 0.8rem;
color: var(--color-text-medium);
font-weight: 500;
}
.ticket-title {
font-size: 1.2rem;
font-weight: 600;
color: var(--color-text-light);
margin: 0.25rem 0 0.5rem;
}
.ticket-preview {
color: var(--color-text-medium);
font-size: 0.9rem;
margin: 0;
}
.ticket-meta {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
margin-top: 1rem;
flex-shrink: 0;
}
.ticket-date {
font-size: 0.8rem;
color: var(--color-text-medium);
}
/* Badges */
.badge {
font-weight: 600;
padding: 5px 10px;
font-size: 0.75rem;
}
.status-open {
background-color: rgba(255, 104, 104, 0.15);
color: #ff8a8a;
}
/* Red */
.status-pending {
background-color: rgba(251, 191, 36, 0.15);
color: #facc15;
}
/* Yellow */
.status-closed {
background-color: rgba(74, 222, 128, 0.15);
color: #6ee7b7;
}
/* Green */
.priority-high {
border: 1px solid #ff8a8a;
color: #ff8a8a;
}
.priority-medium {
border: 1px solid #facc15;
color: #facc15;
}
/* Ticket Details Page */
.btn-back {
font-size: 1.5rem;
color: var(--color-text-light);
text-decoration: none;
}
.conversation-history {
max-height: 60vh;
overflow-y: auto;
padding-right: 10px;
}
.message-bubble {
background-color: var(--color-secondary-dark);
border-radius: 16px;
padding: 1rem;
margin-bottom: 1.5rem;
}
.message-bubble.outgoing {
background: black;
}
.message-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
}
.message-meta {
font-size: 0.8rem;
color: var(--color-text-medium);
margin-top: 0.5rem;
}
.message-meta span:first-child {
color: var(--color-text-light);
font-weight: 500;
}
.ticket-details-sidebar {
position: sticky;
top: 120px;
}
.details-card {
background: var(--glass-bg);
border: var(--glass-border);
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.details-title {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 1rem;
}
.summary-item {
display: flex;
justify-content: space-between;
margin-bottom: 0.5rem;
color: var(--color-text-medium);
}
.details-card .form-control {
background-color: var(--color-primary-dark);
border: var(--glass-border);
color: var(--color-text-light);
}
.btn-reply {
background: var(--color-accent-gold);
color: var(--color-primary-dark);
font-weight: 600;
border: none;
}
/* --- THEMED MODAL STYLES --- */
.themed-modal {
background: var(--glass-bg);
border: var(--glass-border);
border-radius: 16px;
backdrop-filter: blur(15px);
color: var(--color-text-light);
}
.themed-modal .modal-header {
border-bottom: var(--glass-border);
}
.themed-modal .modal-footer {
border-top: var(--glass-border);
}
.themed-modal .btn-close {
filter: invert(1) grayscale(100%) brightness(200%);
}
.themed-modal .form-label {
color: var(--color-text-medium);
font-weight: 500;
}
.themed-modal .form-control,
.themed-modal .form-select {
background-color: var(--color-primary-dark);
border: var(--glass-border);
color: var(--color-text-light);
border-radius: 8px;
padding: 10px;
}
.themed-modal .form-control:focus,
.themed-modal .form-select:focus {
background-color: var(--color-primary-dark);
color: var(--color-text-light);
border-color: var(--color-accent-gold);
box-shadow: 0 0 0 0.25rem rgba(212, 175, 55, 0.2);
}
.themed-modal .btn-next-step {
background: var(--color-accent-gold);
color: var(--color-primary-dark);
border: none;
font-weight: 600;
padding: 10px 25px;
border-radius: 8px;
}
.themed-modal .btn-back {
background: var(--color-secondary-dark);
color: var(--color-text-light);
border: var(--glass-border);
font-weight: 500;
padding: 10px 25px;
border-radius: 8px;
}
.incoming {
border: 1px solid;
margin-left: 50px;
}
/* HELP DESK END */
.note-editor .note-editing-area .note-editable {
color: #ffffff !important;
}
.creator {
display: flex;
}
.creator img {
height: 30px !important;
width: 30px !important;
border-radius: 50%;
object-fit: cover !important;
margin-right: 12px;
}
.terms-content h2 {
color: var(--color-accent-gold);
font-weight: 600;
margin-top: 2.5rem;
margin-bottom: 1rem;
font-size: 1.5rem;
}
.terms-content h3 {
color: var(--color-text-light);
font-weight: 500;
margin-top: 2rem;
margin-bottom: 1rem;
font-size: 1.2rem;
}
.terms-content p,
.terms-content li {
color: var(--color-text-medium);
line-height: 1.8;
}
.terms-content ul {
padding-left: 25px;
}
/* Table of Contents Sidebar */
.toc-sidebar {
position: sticky;
top: 120px;
/* Adjust based on your header height */
}
.toc-title {
font-size: 1.2rem;
font-weight: 600;
color: var(--color-text-light);
margin-bottom: 1rem;
}
.toc-nav .nav-link {
color: var(--color-text-medium);
padding: 0.3rem 0;
font-size: 0.9rem;
border-left: 2px solid var(--glass-border);
padding-left: 1rem;
transition: var(--soft-transition);
}
.toc-nav .nav-link:hover {
color: var(--color-accent-gold);
border-left-color: var(--color-accent-gold);
}
.toc-nav .nav-link.active {
color: var(--color-accent-gold);
font-weight: 500;
border-left-color: var(--color-accent-gold);
}
.table-transparent .table>:not(caption)>*>* {
background: transparent;
color: var(--color-text-light);
}