/* ===== GLOBAL STYLES ===== */
html {
scroll-behavior: smooth;
}
:root {
--primary-color: #00bcd4;
--primary-dark: #0097a7;
--primary-light: #4dd0e1;
--secondary-color: #2c3e50;
--accent-color: #34495e;
--success-color: #10b981;
--danger-color: #ef4444;
--warning-color: #f59e0b;
--info-color: #3b82f6;
--light-color: #FFFFFF;
--dark-color: #2c3e50;
--text-primary: #2c3e50;
--text-secondary: #34495e;
--text-muted: #7f8c8d;
--border-color: #e0f7fa;
--section-bg: #f8f9fa;
--light-bg: #f8f9fa;
--newsletter-bg: linear-gradient(135deg, #ffe5e5 0%, #e0f7fa 50%, #f3e5f5 100%);
--newsletter-accent: #00bcd4;
--newsletter-secondary: #0097a7;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--border-radius: 0.5rem;
--border-radius-lg: 0.75rem;
--border-radius-xl: 1rem;
--transition: all 0.3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
line-height: 1.6;
color: var(--dark-color);
background-color: var(--light-bg);
overflow-x: hidden;
}
/* revert body-specific overflow for courses page */
/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
line-height: 1.3;
margin-bottom: 1rem;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }
p {
margin-bottom: 1rem;
color: var(--text-secondary);
}
/* ===== NAVIGATION ===== */
.navbar {
box-shadow: var(--shadow-md);
transition: var(--transition);
background: rgba(15, 15, 15, 0.8) !important;
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.navbar-brand {
font-size: 1.3rem;
font-weight: 700;
}
.navbar-nav .nav-link {
font-weight: 500;
padding: 1rem 1.5rem;
margin: 0 0.25rem;
transition: var(--transition);
border-radius: 6px;
font-size: 0.95rem;
}
.navbar-nav .nav-link:hover {
color: var(--light-color) !important;
background-color: rgba(255, 255, 255, 0.2);
transform: translateY(-1px);
}
.navbar-nav .nav-link.active {
/* background-color: rgba(255, 255, 255, 0.2); */
font-weight: 600;
}
.dropdown-menu {
border: none;
box-shadow: var(--shadow-lg);
border-radius: var(--border-radius);
background: linear-gradient(135deg, var(--light-color) 0%, var(--border-color) 100%);
}
.dropdown-item {
padding: 0.75rem 1.5rem;
font-weight: 500;
transition: var(--transition);
font-size: 0.9rem;
}
.dropdown-item:hover {
background-color: var(--primary-color);
color: white;
}
/* Mobile navbar fixes */
@media (max-width: 991.98px) {
.navbar-collapse {
background-color: rgba(30, 58, 95, 0.95);
backdrop-filter: blur(10px);
border-radius: var(--border-radius);
margin-top: 1rem;
padding: 1rem;
border: 1px solid rgba(255, 255, 255, 0.1);
max-height: 80vh;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
/* Custom scrollbar for webkit browsers */
.navbar-collapse::-webkit-scrollbar {
width: 6px;
}
.navbar-collapse::-webkit-scrollbar-track {
background: transparent;
}
.navbar-collapse::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
border-radius: 3px;
}
.navbar-collapse::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.5);
}
/* Add visual indicator for scrollable content */
.navbar-collapse::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 20px;
background: linear-gradient(transparent, rgba(30, 58, 95, 0.95));
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.navbar-collapse.scrollable::after {
opacity: 1;
}
/* Top scroll indicator */
.navbar-collapse::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 20px;
background: linear-gradient(rgba(30, 58, 95, 0.95), transparent);
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.navbar-collapse.scrolled-to-top::before {
opacity: 0;
}
.navbar-collapse.scrolled-to-bottom::after {
opacity: 0;
}
/* Smooth scroll behavior for mobile menu */
.navbar-collapse {
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
/* Ensure proper spacing for scrollable content */
.navbar-nav {
padding-bottom: 1rem;
}
/* Add visual indicator for scrollable content */
.navbar-collapse::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 20px;
background: linear-gradient(transparent, rgba(30, 58, 95, 0.95));
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.navbar-collapse.scrollable::after {
opacity: 1;
}
.navbar-nav .dropdown-menu {
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
margin-top: 0.5rem;
padding: 0.5rem 0;
position: static !important;
float: none;
width: 100%;
box-shadow: none;
display: none;
opacity: 1;
visibility: visible;
transform: none !important;
transition: all 0.3s ease;
}
.navbar-nav .dropdown-menu.show {
display: block !important;
opacity: 1;
visibility: visible;
animation: slideDown 0.3s ease;
}
.navbar-nav .dropdown-menu:not(.show) {
animation: slideUp 0.3s ease;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideUp {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-10px);
}
}
.navbar-nav .dropdown-item {
/* color: rgba(255, 255, 255, 0.8) !important; */
padding: 0.5rem 1rem;
}
.navbar-nav .dropdown-item:hover {
background-color: rgba(255, 255, 255, 0.1);
color: white !important;
}
.navbar-nav .dropdown-item.active {
background-color: rgba(255, 255, 255, 0.2);
color: white !important;
}
/* Active dropdown toggle indicator */
.navbar-nav .dropdown-toggle[aria-expanded="true"] {
background-color: rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius);
position: relative;
}
.navbar-nav .dropdown-toggle[aria-expanded="true"]::after {
transform: rotate(180deg);
transition: transform 0.3s ease;
}
.navbar-nav .dropdown-toggle::after {
transition: transform 0.3s ease;
}
.dropdown-toggle::after{
float: right;
margin-top: 8px;
}
/* Ensure navbar toggle works properly */
.navbar-toggler {
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 0.25rem 0.5rem;
}
.navbar-toggler:focus {
box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* Fix dropdown positioning on mobile */
.dropdown-menu.show {
display: block !important;
position: static !important;
transform: none !important;
width: 100%;
margin-top: 0.5rem;
opacity: 1 !important;
visibility: visible !important;
}
/* Ensure dropdown toggles don't interfere with main menu */
.dropdown-toggle {
pointer-events: auto;
}
/* Override Bootstrap's default dropdown behavior on mobile */
.navbar-nav .dropdown-menu.show {
display: block !important;
position: static !important;
float: none !important;
width: 100% !important;
margin-top: 0.5rem !important;
padding: 0.5rem 0 !important;
background-color: rgba(255, 255, 255, 0.1) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
box-shadow: none !important;
border-radius: var(--border-radius) !important;
}
/* Force dropdown visibility on mobile */
.navbar-nav .dropdown-menu.show,
.navbar-nav .dropdown-menu.show.show {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
transform: none !important;
position: static !important;
float: none !important;
width: 100% !important;
margin-top: 0.5rem !important;
padding: 0.5rem 0 !important;
}
/* Ensure dropdown items are visible */
.navbar-nav .dropdown-menu.show .dropdown-item {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Additional force rules for Bootstrap compatibility */
.navbar-nav .dropdown-menu.show {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
transform: none !important;
position: static !important;
float: none !important;
width: 100% !important;
margin-top: 0.5rem !important;
padding: 0.5rem 0 !important;
background-color: rgba(255, 255, 255, 0.1) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
box-shadow: none !important;
border-radius: var(--border-radius) !important;
z-index: 1000 !important;
}
/* Override any Bootstrap inline styles */
.navbar-nav .dropdown-menu.show[style*="display: none"] {
display: block !important;
}
.navbar-nav .dropdown-menu.show[style*="visibility: hidden"] {
visibility: visible !important;
}
.navbar-nav .dropdown-menu.show[style*="opacity: 0"] {
opacity: 1 !important;
}
}
/* ===== HERO SECTION ===== */
.hero-section {
background: var(--newsletter-bg);
color: var(--text-primary);
padding-top: 80px;
position: relative;
overflow: hidden;
}
.hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.4;
}
.hero-title {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
position: relative;
z-index: 2;
color: var(--text-primary);
}
.hero-subtitle {
font-size: 1.25rem;
font-weight: 400;
margin-bottom: 2rem;
opacity: 0.9;
position: relative;
z-index: 2;
color: var(--text-secondary);
}
.hero-buttons {
position: relative;
z-index: 2;
}
.hero-image {
text-align: center;
position: relative;
z-index: 2;
}
.hero-image img {
width: 100%;
max-width: 500px;
height: auto;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-lg);
}
.hero-icon {
font-size: 15rem;
opacity: 0.2;
animation: float 6s ease-in-out infinite;
}
.hero-image-svg {
width: 100%;
max-width: 400px;
height: auto;
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
/* ===== SECTIONS ===== */
.section-title {
font-size: 2.5rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 1rem;
}
.section-subtitle {
font-size: 1.125rem;
color: var(--text-secondary);
margin-bottom: 3rem;
}
.section-alt {
background-color: var(--section-bg);
}
/* ===== FEATURE CARDS ===== */
.feature-card {
background: white;
padding: 2rem;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
border: 2px solid var(--border-color);
text-align: center;
transition: var(--transition);
height: 100%;
border: 1px solid var(--border-color);
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
border-color: var(--primary-color);
}
.feature-icon {
width: 120px;
height: 120px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
color: white;
font-size: 2rem;
overflow: hidden;
}
.feature-icon img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.feature-image {
width: 100%;
height: 100%;
object-fit: contain;
}
.feature-card h3 {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1rem;
color: var(--text-primary);
}
.feature-card p {
color: var(--text-secondary);
margin-bottom: 0;
}
/* ===== LAW CARDS ===== */
.law-card {
background: white;
padding: 2rem;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
transition: var(--transition);
height: 100%;
border: 1px solid var(--border-color);
text-align: center;
/* Ensure consistent sizing for Owl Carousel */
min-height: 350px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.law-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
border-color: var(--primary-color);
}
.law-card-header {
margin-bottom: 1.5rem;
}
.law-card-header i {
font-size: 3rem;
color: var(--primary-color);
margin-bottom: 1rem;
display: block;
}
.law-card-header img {
width: 80px;
height: 80px;
margin: 0 auto 1rem;
display: block;
object-fit: cover;
border-radius: var(--border-radius);
}
.law-card-image {
width: 60px;
height: 60px;
margin: 0 auto 1rem;
display: block;
object-fit: contain;
}
.law-card-header h3 {
font-size: 1.5rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.5rem;
}
.law-card p {
color: var(--text-secondary);
margin-bottom: 1.5rem;
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
}
/* Owl Carousel specific styles for law cards */
.owl-carousel .item .law-card {
height: 400px;
width: 100%;
margin: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.owl-carousel .item .law-card .law-card-header {
flex-shrink: 0;
margin-bottom: 1rem;
}
.owl-carousel .item .law-card .law-card-header img {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: var(--border-radius);
margin: 0 auto 1rem;
}
.owl-carousel .item .law-card .law-card-header h3 {
font-size: 1.5rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.5rem;
}
.owl-carousel .item .law-card p {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin-bottom: 1rem;
line-height: 1.5;
}
.owl-carousel .item .law-card .btn {
flex-shrink: 0;
margin-top: auto;
}
/* ===== CONSTITUTION SECTION ===== */
.constitution-section {
background: linear-gradient(135deg, var(--light-bg) 0%, #f8f9fa 100%);
}
.constitution-image img {
width: 100%;
height: 400px;
object-fit: cover;
border-radius: var(--border-radius);
box-shadow: var(--shadow-lg);
}
.constitution-features {
margin: 2rem 0;
}
.constitution-feature {
display: flex;
align-items: center;
margin-bottom: 1rem;
font-size: 1.1rem;
}
.constitution-feature i {
font-size: 1.5rem;
margin-right: 1rem;
width: 30px;
}
/* ===== BUTTONS ===== */
.btn {
font-weight: 500;
border-radius: var(--border-radius);
/* padding: 0.75rem 1.5rem; */
transition: var(--transition);
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn-primary {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
border-color: var(--primary-color);
}
.btn-primary:hover {
background: var(--primary-dark);
border-color: var(--primary-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-outline-primary {
color: var(--primary-color);
border-color: var(--primary-color);
}
.btn-outline-primary:hover {
background: var(--primary-color);
border-color: var(--primary-color);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-lg {
padding: 1rem 2rem;
font-size: small;
}
.btn-accent {
background-color: var(--accent-color);
border-color: var(--accent-color);
color: white;
}
.btn-accent:hover,
.btn-accent:focus {
background-color: var(--primary-dark);
border-color: var(--primary-dark);
color: white;
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* ===== CTA SECTION ===== */
.cta-section {
background: var(--newsletter-bg);
}
/* ===== FOOTER ===== */
.footer {
background: linear-gradient(135deg, var(--secondary-color) 0%, var(--accent-color) 100%);
color: white;
}
.footer h5, .footer h6 {
color: white !important;
margin-bottom: 1rem;
font-weight: 600;
font-size: 1rem;
}
.footer p {
color: rgba(255, 255, 255, 0.9) !important;
line-height: 1.6;
font-size: 0.9rem;
}
.footer a {
text-decoration: none;
transition: var(--transition);
color: rgba(255, 255, 255, 0.8) !important;
font-size: 0.9rem;
}
.footer a:hover {
color: white !important;
text-decoration: underline;
}
.social-links a {
display: inline-block;
width: 40px;
height: 40px;
background: var(--primary-color);
border-radius: 50%;
text-align: center;
line-height: 40px;
transition: var(--transition);
margin-right: 10px;
}
.social-links a:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* Footer list items */
.footer ul li {
margin-bottom: 8px;
}
.footer ul li a {
color: rgba(255, 255, 255, 0.8) !important;
transition: all 0.3s ease;
font-size: 0.9rem;
}
.footer ul li a:hover {
color: white !important;
padding-left: 5px;
}
/* Footer contact info */
.footer .text-white-50 {
color: rgba(255, 255, 255, 0.8) !important;
}
.footer hr {
border-color: rgba(255, 255, 255, 0.2);
}
/* ===== HIGHLIGHTED SECTIONS ===== */
.highlight-section {
background: var(--newsletter-bg);
border-left: 4px solid var(--primary-color);
padding: 2rem;
margin: 2rem 0;
border-radius: var(--border-radius);
}
.highlight-section h3 {
color: var(--primary-color);
margin-bottom: 1rem;
}
.accent-border {
border: 2px solid var(--accent-color);
border-radius: var(--border-radius);
padding: 1rem;
background: rgba(52, 73, 94, 0.05);
}
/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 991.98px) {
.hero-title {
font-size: 2.5rem;
}
.hero-icon {
font-size: 10rem;
}
.hero-image-svg {
max-width: 300px;
}
.constitution-icon {
font-size: 8rem;
}
.constitution-image-svg {
max-width: 250px;
}
.section-title {
font-size: 2rem;
}
/* Disable parallax on mobile for better performance */
.parallax-bg {
background-attachment: scroll;
}
}
@media (max-width: 767.98px) {
.hero-title {
font-size: 2rem;
}
.hero-subtitle {
font-size: 1rem;
}
.hero-icon {
font-size: 8rem;
}
.hero-image-svg {
max-width: 250px;
}
.constitution-icon {
font-size: 6rem;
}
.constitution-image-svg {
max-width: 200px;
}
.section-title {
font-size: 1.75rem;
}
.feature-card,
.law-card {
padding: 1.5rem;
}
.hero-buttons .btn {
display: block;
width: 100%;
margin-bottom: 1rem;
}
.hero-buttons .btn:last-child {
margin-bottom: 0;
}
/* Disable parallax on mobile for better performance */
.parallax-bg {
background-attachment: scroll;
}
/* Additional mobile navbar fixes */
.navbar-collapse {
margin-top: 0.5rem;
padding: 0.75rem;
}
.navbar-nav .nav-link {
padding: 0.75rem 1rem;
margin: 0.25rem 0;
/* border-bottom: 1px solid rgba(255, 255, 255, 0.1); */
}
.navbar-nav .nav-link:last-child {
border-bottom: none;
}
.dropdown-menu {
margin-top: 0.25rem;
padding: 0.25rem 0;
}
.dropdown-item {
padding: 0.5rem 1rem;
font-size: 0.9rem;
}
}
@media (max-width: 575.98px) {
.hero-title {
font-size: 1.75rem;
}
.hero-icon {
font-size: 6rem;
}
.hero-image-svg {
max-width: 200px;
}
.constitution-icon {
font-size: 4rem;
}
.constitution-image-svg {
max-width: 150px;
}
.section-title {
font-size: 1.5rem;
}
/* Disable parallax on mobile for better performance */
.parallax-bg {
background-attachment: scroll;
}
/* Small mobile navbar fixes */
.navbar-brand {
font-size: 1.1rem;
}
.navbar-toggler {
padding: 0.2rem 0.4rem;
}
.navbar-collapse {
margin-top: 0.25rem;
padding: 0.75rem;
}
.navbar-nav .nav-link {
padding: 0.6rem 0.75rem;
margin: 0.2rem 0;
font-size: 0.9rem;
}
.dropdown-item {
padding: 0.4rem 0.75rem;
font-size: 0.8rem;
}
}
/* ===== UTILITY CLASSES ===== */
.text-primary { color: var(--primary-color) !important; }
.text-secondary { color: var(--secondary-color) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-accent { color: var(--accent-color) !important; }
.bg-light { background: var(--newsletter-bg) !important; }
.bg-dark { background-color: var(--dark-color) !important; }
.bg-accent { background-color: var(--accent-color) !important; }
.bg-secondary { background-color: var(--secondary-color) !important; }
.border-primary { border-color: var(--primary-color) !important; }
.border-light { border-color: var(--border-color) !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }
.rounded { border-radius: var(--border-radius) !important; }
.rounded-lg { border-radius: var(--border-radius-lg) !important; }
.rounded-xl { border-radius: var(--border-radius-xl) !important; }
/* ===== ANIMATIONS ===== */
.fade-in {
animation: fadeIn 1s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.slide-in-left {
animation: slideInLeft 1s ease-out;
}
@keyframes slideInLeft {
from { opacity: 0; transform: translateX(-50px); }
to { opacity: 1; transform: translateX(0); }
}
.slide-in-right {
animation: slideInRight 1s ease-out;
}
@keyframes slideInRight {
from { opacity: 0; transform: translateX(50px); }
to { opacity: 1; transform: translateX(0); }
}
/* ===== ACCESSIBILITY ===== */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ===== FOCUS STATES ===== */
.btn:focus,
.nav-link:focus,
.dropdown-item:focus {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
/* ===== BACK TO TOP BUTTON ===== */
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: var(--primary-color);
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: var(--transition);
z-index: 1000;
box-shadow: var(--shadow-lg);
}
.back-to-top.show {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
background: var(--primary-dark);
transform: translateY(-3px);
box-shadow: var(--shadow-xl);
}
/* ===== SCROLL PROGRESS BAR ===== */
.scroll-progress {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 3px;
background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
z-index: 9999;
transition: width 0.1s ease;
}
/* ===== SKIP LINK ===== */
.skip-link {
position: absolute;
top: -40px;
left: 6px;
background: var(--primary-color);
color: white;
padding: 8px;
text-decoration: none;
border-radius: var(--border-radius);
z-index: 10000;
transition: var(--transition);
}
.skip-link:focus {
top: 6px;
}
/* ===== PAGE HEADER ===== */
.page-header {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
position: relative;
overflow: hidden;
}
.page-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
/* ===== MISSION & VISION CARDS ===== */
.mission-vision-card {
background: #ffffff;
border-radius: 16px;
padding: 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
height: 100%;
transition: all 0.3s ease;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.mission-vision-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.card-header-section {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.5rem;
}
.card-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.25rem;
flex-shrink: 0;
}
.card-title-section {
flex: 1;
}
.card-title {
font-size: 1.5rem;
font-weight: 700;
color: #1f2937;
margin-bottom: 0.25rem;
line-height: 1.2;
}
.card-subtitle {
font-size: 0.875rem;
color: #6b7280;
margin: 0;
font-weight: 500;
}
.card-content {
margin-bottom: 1.5rem;
}
.card-content p {
color: #374151;
line-height: 1.6;
margin: 0;
font-size: 0.95rem;
}
.feature-tags {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.feature-tag {
background: #f3f4f6;
color: #374151;
padding: 0.5rem 0.75rem;
border-radius: 8px;
font-size: 0.8rem;
font-weight: 500;
display: flex;
align-items: center;
gap: 0.5rem;
border: 1px solid #e5e7eb;
}
.feature-tag i {
font-size: 0.75rem;
color: #6b7280;
}
.card-actions {
display: flex;
gap: 0.75rem;
}
.card-actions .btn {
flex: 1;
padding: 0.75rem 1rem;
border-radius: 8px;
font-weight: 500;
font-size: 0.875rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
transition: all 0.2s ease;
}
.card-actions .btn-outline-secondary {
background: #f9fafb;
border: 1px solid #d1d5db;
color: #374151;
}
.card-actions .btn-outline-secondary:hover {
background: #f3f4f6;
border-color: #9ca3af;
color: #1f2937;
}
.card-actions .btn-primary {
background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
border: none;
color: white;
}
.card-actions .btn-primary:hover {
background: linear-gradient(135deg, #7c3aed 0%, #9333ea 100%);
transform: translateY(-1px);
}
/* Responsive adjustments */
@media (max-width: 767.98px) {
.mission-vision-card {
padding: 1.5rem;
}
.card-header-section {
flex-direction: column;
text-align: center;
gap: 1rem;
}
.card-icon {
margin: 0 auto;
}
.card-actions {
flex-direction: column;
}
.feature-tags {
justify-content: center;
}
}
/* ===== VALUE CARDS ===== */
.value-card {
background: white;
padding: 2rem;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
transition: var(--transition);
height: 100%;
border: 1px solid var(--border-color);
}
.value-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
}
.value-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
margin: 0 auto;
}
.value-image {
width: 100%;
height: 100%;
object-fit: contain;
}
/* ===== TEAM CARDS ===== */
.team-card {
background: white;
padding: 2rem;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
transition: var(--transition);
height: 100%;
border: 1px solid var(--border-color);
}
.team-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
}
.team-avatar {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2rem;
margin: 0 auto;
}
.team-social a {
display: inline-block;
width: 35px;
height: 35px;
background: var(--light-color);
border-radius: 50%;
text-align: center;
line-height: 35px;
transition: var(--transition);
}
.team-social a:hover {
background: var(--primary-color);
color: white !important;
transform: translateY(-2px);
}
/* ===== IMPACT STATS ===== */
.impact-stat {
padding: 1.5rem;
}
.stat-number {
font-size: 2.5rem;
font-weight: 700;
color: white;
}
.stat-label {
font-size: 1rem;
color: rgba(255, 255, 255, 0.8);
font-weight: 500;
}
/* ===== CONTACT PAGE STYLES ===== */
/* Contact Cards */
.contact-card {
background: white;
padding: 2rem;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
transition: var(--transition);
height: 100%;
border: 1px solid var(--border-color);
}
.contact-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
}
.contact-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
margin: 0 auto;
overflow: hidden;
}
.contact-icon img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.contact-image {
width: 100%;
height: 100%;
object-fit: contain;
}
/* Contact Form */
.contact-form-card {
background: white;
padding: 3rem;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-lg);
border: 1px solid var(--border-color);
}
.form-control,
.form-select {
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
padding: 0.75rem 1rem;
transition: var(--transition);
}
.form-control:focus,
.form-select:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.25);
}
.form-label {
font-weight: 500;
color: var(--text-primary);
margin-bottom: 0.5rem;
}
/* Office Hours */
.hours-card,
.support-card {
background: white;
padding: 2rem;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
border: 1px solid var(--border-color);
height: 100%;
}
.hours-list {
list-style: none;
padding: 0;
}
.hours-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
border-bottom: 1px solid var(--border-color);
}
.hours-item:last-child {
border-bottom: none;
}
.day {
font-weight: 500;
color: var(--text-primary);
}
.time {
color: var(--text-secondary);
font-weight: 500;
}
/* Support Items */
.support-list {
list-style: none;
padding: 0;
}
.support-item {
display: flex;
align-items: flex-start;
margin-bottom: 1.5rem;
padding: 1rem;
background: var(--light-color);
border-radius: var(--border-radius);
transition: var(--transition);
}
.support-item:hover {
background: white;
box-shadow: var(--shadow-sm);
}
.support-icon {
width: 50px;
height: 50px;
background: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.25rem;
margin-right: 1rem;
flex-shrink: 0;
}
.support-content h5 {
margin-bottom: 0.5rem;
color: var(--text-primary);
}
.support-content p {
margin-bottom: 0;
color: var(--text-secondary);
}
/* FAQ Accordion */
.accordion-item {
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
margin-bottom: 1rem;
overflow: hidden;
}
.accordion-button {
background: white;
border: none;
padding: 1.25rem;
font-weight: 500;
color: var(--text-primary);
transition: var(--transition);
}
.accordion-button:not(.collapsed) {
background: var(--primary-color);
color: white;
}
.accordion-button:focus {
box-shadow: none;
border-color: var(--primary-color);
}
.accordion-body {
padding: 1.25rem;
background: var(--light-color);
color: var(--text-secondary);
}
/* ===== BLOG PAGE STYLES ===== */
/* Search and Filter */
.search-box .input-group {
box-shadow: var(--shadow-sm);
border-radius: var(--border-radius);
overflow: hidden;
}
.search-box .input-group-text {
border: 1px solid var(--border-color);
}
.search-box .form-control {
border: 1px solid var(--border-color);
}
/* Featured Article */
.featured-card {
background: white;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-lg);
overflow: hidden;
border: 1px solid var(--border-color);
}
.featured-image {
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
height: 100%;
min-height: 300px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.featured-badge {
position: absolute;
top: 1rem;
left: 1rem;
background: var(--accent-color);
color: white;
padding: 0.5rem 1rem;
border-radius: var(--border-radius);
font-weight: 600;
font-size: 0.875rem;
}
.featured-icon {
font-size: 8rem;
color: rgba(255, 255, 255, 0.2);
}
.featured-image-svg {
width: 100%;
height: 100%;
object-fit: contain;
opacity: 0.2;
}
.featured-content {
padding: 2.5rem;
}
.featured-title {
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--text-primary);
}
.featured-excerpt {
color: var(--text-secondary);
margin-bottom: 1.5rem;
line-height: 1.6;
}
/* Blog Cards */
.blog-card {
background: white;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
overflow: hidden;
transition: var(--transition);
height: 100%;
border: 1px solid var(--border-color);
}
.blog-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
}
.blog-image {
position: relative;
overflow: hidden;
}
.blog-image img {
width: 100%;
height: 250px;
object-fit: cover;
transition: var(--transition);
}
.blog-card:hover .blog-image img {
transform: scale(1.05);
}
.blog-content {
padding: 1.5rem;
}
.blog-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
font-size: 0.875rem;
}
.blog-category {
background: var(--primary-color);
color: white;
padding: 0.25rem 0.75rem;
border-radius: var(--border-radius);
font-weight: 500;
}
.blog-date {
color: var(--text-muted);
}
.blog-card h3 {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1rem;
color: var(--text-primary);
line-height: 1.4;
}
.blog-card p {
color: var(--text-secondary);
margin-bottom: 1.5rem;
line-height: 1.6;
}
.read-more {
color: var(--primary-color);
text-decoration: none;
font-weight: 500;
display: inline-flex;
align-items: center;
transition: var(--transition);
}
.read-more:hover {
color: var(--primary-dark);
text-decoration: underline;
}
.read-more i {
margin-left: 0.5rem;
transition: var(--transition);
}
.read-more:hover i {
transform: translateX(3px);
}
/* Article Meta */
.article-meta {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.category-badge {
background: var(--primary-color);
color: white;
padding: 0.25rem 0.75rem;
border-radius: var(--border-radius);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
}
.date {
color: var(--text-muted);
font-size: 0.875rem;
}
.read-time {
color: var(--text-muted);
font-size: 0.875rem;
}
/* Blog Author */
.blog-author,
.featured-author {
color: var(--text-secondary);
font-size: 0.875rem;
}
.blog-author i,
.featured-author i {
color: var(--primary-color);
}
/* Read More Link */
.read-more {
color: var(--primary-color);
text-decoration: none;
font-weight: 500;
transition: var(--transition);
}
.read-more:hover {
color: var(--primary-dark);
text-decoration: none;
}
/* Newsletter Section */
.newsletter-section {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
}
.newsletter-form .form-control {
border: none;
border-radius: var(--border-radius);
padding: 1rem 1.5rem;
font-size: 1rem;
}
.newsletter-form .btn {
border-radius: var(--border-radius);
font-weight: 500;
}
/* ===== LAW PAGE STYLES ===== */
.page-title-icon {
width: 60px;
height: 60px;
vertical-align: middle;
}
/* Breadcrumb */
.breadcrumb {
background: transparent;
padding: 0;
margin-bottom: 1rem;
}
.breadcrumb-item + .breadcrumb-item::before {
color: rgba(255, 255, 255, 0.7);
}
/* Law Content */
.law-content {
background: white;
padding: 2rem;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
border: 1px solid var(--border-color);
}
/* Change Cards */
.change-card {
background: white;
padding: 1.5rem;
border-radius: var(--border-radius);
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-color);
text-align: center;
height: 100%;
}
.change-icon {
font-size: 2rem;
margin-bottom: 1rem;
}
/* Features List */
.features-list {
list-style: none;
padding: 0;
}
.feature-item {
display: flex;
align-items: flex-start;
margin-bottom: 1.5rem;
padding: 1rem;
background: var(--light-color);
border-radius: var(--border-radius);
}
.feature-item i {
font-size: 1.5rem;
margin-top: 0.25rem;
}
.feature-item h5 {
margin-bottom: 0.5rem;
color: var(--text-primary);
}
.feature-item p {
margin-bottom: 0;
color: var(--text-secondary);
}
/* Law Sidebar */
.law-sidebar {
position: sticky;
top: 100px;
}
.sidebar-card {
background: white;
padding: 1.5rem;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
border: 1px solid var(--border-color);
}
.sidebar-title {
font-size: 1.125rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 1rem;
}
/* Table of Contents */
.toc-list {
list-style: none;
padding: 0;
margin: 0;
}
.toc-list li {
margin-bottom: 0.5rem;
}
.toc-link {
color: var(--text-secondary);
text-decoration: none;
padding: 0.5rem 0;
display: block;
transition: var(--transition);
border-radius: var(--border-radius);
}
.toc-link:hover {
color: var(--primary-color);
background: var(--light-color);
padding-left: 0.5rem;
}
/* Resource Links */
.resource-links {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.resource-link {
color: var(--primary-color);
text-decoration: none;
padding: 0.75rem;
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
transition: var(--transition);
}
.resource-link:hover {
background: var(--primary-color);
color: white;
text-decoration: none;
}
/* Timeline */
.timeline {
position: relative;
}
.timeline::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: var(--primary-color);
}
.timeline-item {
position: relative;
padding-left: 2rem;
margin-bottom: 1rem;
}
.timeline-item::before {
content: '';
position: absolute;
left: -4px;
top: 0.5rem;
width: 10px;
height: 10px;
background: var(--primary-color);
border-radius: 50%;
}
.timeline-date {
font-weight: 600;
color: var(--primary-color);
font-size: 0.875rem;
}
.timeline-content {
color: var(--text-secondary);
font-size: 0.875rem;
}
/* Chapter Cards */
.chapter-card {
background: white;
padding: 2rem;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
border: 1px solid var(--border-color);
transition: var(--transition);
height: 100%;
}
.chapter-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
.chapter-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.chapter-header h3 {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0;
}
.chapter-sections {
background: var(--primary-color);
color: white;
padding: 0.25rem 0.75rem;
border-radius: var(--border-radius);
font-size: 0.75rem;
font-weight: 600;
}
/* ===== PRINT STYLES ===== */
@media print {
.navbar,
.hero-buttons,
.cta-section,
.footer,
.back-to-top,
.scroll-progress {
display: none;
}
.hero-section {
background: white !important;
color: black !important;
padding: 2rem 0;
}
.hero-title {
color: black !important;
}
}
/* ===== ABOUT PAGE STYLES ===== */
.card-actions {
display: flex;
gap: 0.75rem;
}
.card-actions .btn {
flex: 1;
padding: 0.75rem 1rem;
border-radius: 8px;
font-weight: 500;
font-size: 0.875rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
transition: all 0.2s ease;
}
.card-actions .btn-outline-secondary {
background: #f9fafb;
border: 1px solid #d1d5db;
color: #374151;
}
.card-actions .btn-outline-secondary:hover {
background: #f3f4f6;
border-color: #9ca3af;
color: #1f2937;
}
.card-actions .btn-primary {
background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
border: none;
color: white;
}
.card-actions .btn-primary:hover {
background: linear-gradient(135deg, #7c3aed 0%, #9333ea 100%);
transform: translateY(-1px);
}
/* ===== LEGAL COURSES SECTION ===== */
.legal-courses-section {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
/* Course Filter Section */
.course-filter-section {
background: white;
padding: 2rem;
border-radius: var(--border-radius);
box-shadow: var(--shadow-sm);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.search-box .input-group {
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.search-box .form-control {
border: none;
padding: 0.75rem 1rem;
font-size: 1rem;
}
.search-box .input-group-text {
border: none;
background: white;
padding: 0.75rem 1rem;
}
#courseCategoryFilter {
border-radius: var(--border-radius);
border: 1px solid #dee2e6;
padding: 0.75rem 1rem;
font-size: 1rem;
box-shadow: var(--shadow-sm);
}
/* Course Categories */
.course-categories {
margin-bottom: 3rem;
}
.category-card {
background: white;
border: 2px solid transparent;
border-radius: var(--border-radius);
padding: 1.5rem 1rem;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: var(--shadow-sm);
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.category-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
border-color: var(--primary-color);
}
.category-card.active {
border-color: var(--primary-color);
color: white;
}
.category-card.active .category-icon {
background: rgba(255, 255, 255, 0.2);
color: white;
}
.category-icon {
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--primary-color);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 1rem;
transition: all 0.3s ease;
}
.category-card span {
font-weight: 600;
font-size: 0.9rem;
}
/* Course Grid */
.course-grid {
margin-bottom: 3rem;
}
.course-card {
background: white;
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: all 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
}
.course-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
}
.course-image {
position: relative;
overflow: hidden;
height: 200px;
}
.course-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.course-card:hover .course-image img {
transform: scale(1.1);
}
.course-badge {
position: absolute;
top: 1rem;
/* right: 1rem; */
background: var(--primary-color);
color: white;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
z-index: 2;
}
.course-badge.free {
background: #28a745;
}
.course-badge.premium {
background: #ffc107;
color: #212529;
}
.course-badge.popular {
background: #dc3545;
}
.course-badge.new {
background: #17a2b8;
}
.course-badge.trending {
background: #6f42c1;
}
.course-badge.best-seller {
background: #fd7e14;
}
.course-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.course-card:hover .course-overlay {
opacity: 1;
}
.course-content {
padding: 1.5rem;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.course-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.course-category {
background: rgba(13, 110, 253, 0.1);
color: var(--primary-color);
padding: 0.25rem 0.75rem;
border-radius: 15px;
font-size: 0.8rem;
font-weight: 600;
}
.course-duration {
color: #6c757d;
font-size: 0.8rem;
}
.course-title {
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 0.75rem;
color: #212529;
line-height: 1.4;
}
.course-description {
color: #6c757d;
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 1rem;
flex-grow: 1;
}
.course-features {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.course-features span {
background: #f8f9fa;
color: #495057;
padding: 0.25rem 0.5rem;
border-radius: 10px;
font-size: 0.75rem;
display: flex;
align-items: center;
}
.course-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
}
.course-price {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.current-price {
font-size: 1.2rem;
font-weight: 700;
color: var(--primary-color);
}
.original-price {
font-size: 0.9rem;
color: #6c757d;
text-decoration: line-through;
}
.discount {
font-size: 0.8rem;
color: #28a745;
font-weight: 600;
}
/* Load More Button */
#loadMoreCourses {
padding: 1rem 2rem;
border-radius: var(--border-radius);
font-weight: 600;
transition: all 0.3s ease;
}
#loadMoreCourses:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* Responsive Design for Courses */
@media (max-width: 991.98px) {
.course-categories .col-lg-2 {
margin-bottom: 1rem;
}
.category-card {
padding: 1rem 0.5rem;
}
.category-icon {
width: 50px;
height: 50px;
font-size: 1.2rem;
}
.category-card span {
font-size: 0.8rem;
}
}
@media (max-width: 767.98px) {
.course-filter-section {
padding: 1.5rem;
}
.course-categories .col-6 {
margin-bottom: 1rem;
}
.category-card {
padding: 1rem 0.5rem;
}
.category-icon {
width: 40px;
height: 40px;
font-size: 1rem;
margin-bottom: 0.5rem;
}
.category-card span {
font-size: 0.75rem;
}
.course-content {
padding: 1rem;
}
.course-title {
font-size: 1rem;
}
.course-features {
flex-direction: column;
gap: 0.25rem;
}
.course-footer {
flex-direction: column;
gap: 1rem;
align-items: stretch;
}
.course-price {
align-items: center;
}
}
@media (max-width: 575.98px) {
.course-categories .col-6 {
width: 50%;
}
.category-card {
padding: 0.75rem 0.25rem;
}
.category-icon {
width: 35px;
height: 35px;
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.category-card span {
font-size: 0.7rem;
}
.course-image {
height: 180px;
}
.course-content {
padding: 0.75rem;
}
.course-title {
font-size: 0.95rem;
}
.course-description {
font-size: 0.85rem;
}
}
/* Animation for course cards */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.course-card {
animation: fadeInUp 0.6s ease forwards;
}
.course-card:nth-child(1) { animation-delay: 0.1s; }
.course-card:nth-child(2) { animation-delay: 0.2s; }
.course-card:nth-child(3) { animation-delay: 0.3s; }
.course-card:nth-child(4) { animation-delay: 0.4s; }
.course-card:nth-child(5) { animation-delay: 0.5s; }
.course-card:nth-child(6) { animation-delay: 0.6s; }
.course-card:nth-child(7) { animation-delay: 0.7s; }
.course-card:nth-child(8) { animation-delay: 0.8s; }
.course-card:nth-child(9) { animation-delay: 0.9s; }
/* Filter functionality styles */
.course-card.hidden {
display: none;
}
.course-card.visible {
display: block;
animation: fadeInUp 0.6s ease forwards;
}
/* Courses Page Styles */
.courses-page-container {
/* padding-top: 80px; */
background-color: #f8f9fa;
min-height: 100vh;
}
/* Course Controls Section */
.course-controls-section {
background: white;
padding: 5px 0;
border-bottom: 1px solid #e9ecef;
}
.course-type-tabs {
display: flex;
gap: 0;
border-radius: 8px;
overflow: hidden;
/* border: 1px solid #dee2e6; */
}
.tab-btn {
background: white;
border: none;
padding: 12px 24px;
font-size: 12px;
font-weight: 500;
color: #6c757d;
cursor: pointer;
transition: all 0.3s ease;
border-right: 1px solid #dee2e6;
}
.tab-btn:last-child {
border-right: none;
}
.tab-btn:hover {
background: #f8f9fa;
color: #495057;
}
.tab-btn.active {
background: #28a745;
color: white;
font-weight: 600;
}
.course-controls {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 15px;
}
.search-container {
position: relative;
flex: 1;
max-width: 300px;
}
.search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #6c757d;
z-index: 2;
}
.search-input {
padding-left: 40px;
border-radius: 20px;
border: 1px solid #dee2e6;
font-size: 14px;
}
.search-input:focus {
border-color: #28a745;
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}
/* Legal Acts Filters Section */
.legal-acts-filters-section {
background: white;
padding: 0 0 20px 0;
border-bottom: 1px solid #e9ecef;
overflow: hidden;
max-width: 100%;
position: relative;
}
.green-top-bar {
height: 1px;
background: #28a745;
width: 100%;
margin-bottom: 20px;
}
.legal-acts-filters-section .container {
overflow: hidden;
/* max-width: 100%; */
}
.filter-label {
font-size: 16px;
font-weight: 600;
color: #495057;
margin-bottom: 15px;
font-family: 'Poppins', sans-serif;
}
.course-count-display {
font-size: 14px;
font-weight: 400;
color: #6c757d;
margin-left: 10px;
}
.legal-acts-filters {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 15px;
position: relative;
}
.filter-buttons-container {
display: flex;
align-items: center;
gap: 0;
position: relative;
width: 100%;
background: #f8f9fa;
border-radius: 8px;
padding: 4px;
border: 1px solid #e9ecef;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.filter-buttons {
display: flex;
align-items: center;
gap: 10px;
overflow-x: auto;
padding: 0 10px;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
position: relative;
scrollbar-width: none;
-ms-overflow-style: none;
flex: 1;
margin: 0 10px;
}
.language-filters::-webkit-scrollbar {
display: none;
}
.language-filter-btn {
background: white;
border: 1px solid #e0e0e0;
padding: 10px 16px;
border-radius: 6px;
font-size: 14px;
color: #495057;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
font-weight: 500;
min-width: 80px;
text-align: center;
flex-shrink: 0;
font-family: 'Poppins', sans-serif;
}
.language-filter-btn:hover {
border-color: #28a745;
color: #28a745;
}
.language-filter-btn.active {
background: #d4edda;
border-color: #28a745;
color: #28a745;
font-weight: 600;
}
.filter-btn {
background: white;
border: 1px solid #e0e0e0;
padding: 4px 7px;
border-radius: 6px;
font-size: 14px;
color: #495057;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
font-weight: 500;
min-width: 80px;
text-align: center;
flex-shrink: 0;
font-family: 'Poppins', sans-serif;
}
.filter-btn:hover {
border-color: #28a745;
color: #28a745;
}
.filter-btn-active {
background: #d4edda !important;
border-color: #28a745 !important;
color: #28a745 !important;
font-weight: 600;
}
/* Additional filter button styling to match image exactly */
.filter-btn i {
font-size: 12px;
margin-right: 6px;
}
.filter-btn-active i {
color: #28a745;
}
/* Responsive adjustments for filter section */
@media (max-width: 768px) {
/* .filter-buttons-container {
padding: 12px;
} */
.filter-buttons {
gap: 8px;
margin: 0 8px;
}
.filter-btn {
padding: 8px 12px;
font-size: 13px;
min-width: 70px;
}
.filter-nav-btn {
width: 32px;
height: 32px;
}
}
/* Filter Navigation Buttons */
.filter-nav-btn {
background: white;
border: 1px solid #e0e0e0;
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
color: #6c757d;
flex-shrink: 0;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
z-index: 10;
}
.filter-nav-left {
order: -1;
}
.filter-nav-right {
order: 999;
}
.filter-nav-btn:hover {
background: #e9ecef;
border-color: #adb5bd;
color: #495057;
}
.filter-nav-btn i {
font-size: 14px;
}
/* Course Grid Section */
.course-grid-section {
padding: 40px 0;
}
/* Prevent horizontal scroll on courses page */
.courses-page-container {
overflow-x: hidden;
max-width: 100%;
}
/* Additional overflow control for courses page */
.courses-page {
overflow-x: hidden;
max-width: 100%;
}
.courses-page .container {
overflow-x: hidden;
/* max-width: 100%; */
}
.course-card {
margin-bottom: 20px;
}
.course-card-inner {
background: white;
/* border-radius: 12px; */
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
height: 100%;
}
.course-card-inner:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.course-image {
position: relative;
height: 200px;
overflow: hidden;
}
.course-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.course-card-inner:hover .course-image img {
transform: scale(1.05);
}
.course-badge {
position: absolute;
top: 12px;
left: 12px;
padding: 4px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
color: white;
z-index: 2;
}
.course-badge.free {
background: #6f42c1;
}
.course-badge.premium {
background: #fd7e14;
}
.course-badge.popular {
background: #dc3545;
}
.course-badge.new {
background: #20c997;
}
.course-content {
padding: 20px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.course-title {
font-size: 18px;
font-weight: 600;
color: #212529;
margin-bottom: 12px;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.course-details {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 15px;
font-size: 14px;
color: #6c757d;
}
.course-details span {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 8px;
background: #f8f9fa;
border-radius: 6px;
font-size: 13px;
}
.course-details i {
font-size: 12px;
color: #6c757d;
}
.chapters i {
color: #007bff;
}
.readers i {
color: #28a745;
}
.file-type i {
color: #dc3545;
}
.course-action {
margin-top: auto;
}
.learn-free {
color: #28a745;
font-size: 14px;
font-weight: 600;
margin-bottom: 10px;
}
.btn-certification,
.btn-free-certificate {
background: var(--primary-color);
color: white;
border: none;
padding: 8px 16px;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
width: 100%;
transition: all 0.3s ease;
}
.btn-certification:hover,
.btn-free-certificate:hover {
background: var(--primary-dark);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
/* Responsive Design */
@media (max-width: 991.98px) {
.course-controls {
justify-content: flex-start;
/* margin-top: 20px; */
}
.course-type-tabs {
justify-content: center;
}
.language-filters {
justify-content: center;
}
}
@media (max-width: 767.98px) {
.course-controls {
flex-direction: column;
align-items: stretch;
}
.search-container {
max-width: none;
}
.course-type-tabs {
flex-wrap: wrap;
}
.tab-btn {
flex: 1;
min-width: 120px;
}
.language-filters {
gap: 8px;
}
.language-filter-btn {
padding: 6px 12px;
font-size: 13px;
}
}
@media (max-width: 575.98px) {
.course-card {
margin-bottom: 20px;
}
.course-content {
padding: 20px;
}
.course-title {
font-size: 18px;
}
.course-details {
flex-direction: column;
gap: 8px;
}
.course-details span {
padding: 4px 8px;
font-size: 13px;
}
}
/* Animation for course cards */
.course-card {
animation: fadeInUp 0.6s ease forwards;
opacity: 0;
transform: translateY(30px);
}
.course-card:nth-child(1) { animation-delay: 0.1s; }
.course-card:nth-child(2) { animation-delay: 0.2s; }
.course-card:nth-child(3) { animation-delay: 0.3s; }
.course-card:nth-child(4) { animation-delay: 0.4s; }
.course-card:nth-child(5) { animation-delay: 0.5s; }
.course-card:nth-child(6) { animation-delay: 0.6s; }
.course-card:nth-child(7) { animation-delay: 0.7s; }
.course-card:nth-child(8) { animation-delay: 0.8s; }
.course-card:nth-child(9) { animation-delay: 0.9s; }
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Top Categories Section */
.top-categories-section {
background: var(--newsletter-bg);
position: relative;
overflow: hidden;
padding: 80px 0;
}
.top-categories-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(200, 200, 200, 0.15) 1px, transparent 1px),
radial-gradient(circle at 80% 70%, rgba(200, 200, 200, 0.15) 1px, transparent 1px),
radial-gradient(circle at 40% 80%, rgba(200, 200, 200, 0.15) 1px, transparent 1px),
radial-gradient(circle at 90% 20%, rgba(200, 200, 200, 0.15) 1px, transparent 1px);
background-size: 100px 100px, 150px 150px, 80px 80px, 120px 120px;
background-position: 0 0, 50px 50px, 25px 75px, 75px 25px;
animation: float 20s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
33% { transform: translateY(-10px) rotate(1deg); }
66% { transform: translateY(10px) rotate(-1deg); }
}
.category-label {
display: inline-block;
background: var(--primary-color);
color: white;
border: 2px solid var(--primary-dark);
padding: 12px 24px;
border-radius: 25px;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 25px;
box-shadow: 0 4px 15px rgba(0, 188, 212, 0.3);
}
.category-heading {
font-size: 3rem;
font-weight: 800;
color: var(--text-primary);
line-height: 1.1;
margin-bottom: 0;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Category Slider Container */
.category-slider-container {
position: relative;
width: 100%;
overflow: hidden;
padding: 0 60px;
}
.category-slider {
display: flex;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
gap: 24px;
padding: 20px 0;
will-change: transform;
transform: translateX(0);
}
.category-card {
background: white;
border-radius: 20px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
overflow: hidden;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
height: 100%;
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
flex-shrink: 0;
transform: translateX(0);
opacity: 1;
animation: slideInRight 0.8s ease-out forwards;
}
.category-card:nth-child(1) { animation-delay: 0.1s; }
.category-card:nth-child(2) { animation-delay: 0.2s; }
.category-card:nth-child(3) { animation-delay: 0.3s; }
.category-card:nth-child(4) { animation-delay: 0.4s; }
.category-card:nth-child(5) { animation-delay: 0.5s; }
.category-card:nth-child(6) { animation-delay: 0.6s; }
.category-card:nth-child(7) { animation-delay: 0.7s; }
.category-card:nth-child(8) { animation-delay: 0.8s; }
.category-card:nth-child(9) { animation-delay: 0.9s; }
@keyframes slideInRight {
from {
transform: translateX(100px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* Slider Navigation */
.slider-navigation {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
pointer-events: none;
z-index: 10;
}
.slider-nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
color: var(--primary-color);
font-size: 18px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
pointer-events: auto;
display: flex;
align-items: center;
justify-content: center;
}
.slider-nav-btn:hover {
background: white;
transform: translateY(-50%) scale(1.1);
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
}
.slider-nav-btn:active {
transform: translateY(-50%) scale(0.95);
}
.slider-nav-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.slider-nav-btn:focus {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
.slider-prev {
left: -25px;
}
.slider-next {
right: -25px;
}
/* Slider Indicators */
.slider-indicators {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 30px;
}
.indicator {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.indicator:hover {
background: rgba(0, 0, 0, 0.4);
transform: scale(1.2);
}
.indicator.active {
background: var(--primary-color);
border-color: var(--secondary-color);
transform: scale(1.3);
}
.indicator:focus {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
.category-card:hover {
transform: translateY(-12px) scale(1.02);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
animation-play-state: paused;
}
.category-image {
position: relative;
overflow: hidden;
height: 220px;
}
.category-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.category-card:hover .category-image img {
transform: scale(1.1);
}
.category-content {
padding: 28px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.category-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 24px;
line-height: 1.3;
}
.category-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
}
.course-count {
/* background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); */
color: white;
padding: 10px 1px;
border-radius: 25px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
/* box-shadow: 0 4px 15px rgba(0, 188, 212, 0.4); */
}
.arrow-link {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
background: var(--newsletter-bg);
border-radius: 50%;
color: var(--text-secondary);
text-decoration: none;
transition: all 0.3s ease;
border: 2px solid var(--border-color);
}
.arrow-link:hover {
background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
color: var(--text-primary);
transform: scale(1.15) rotate(15deg);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.arrow-link i {
font-size: 16px;
font-weight: 600;
}
/* Responsive adjustments for categories */
@media (max-width: 991.98px) {
.category-heading {
font-size: 2.5rem;
}
.category-slider-container {
padding: 0 60px;
}
.category-card {
min-width: 0;
flex: 1;
}
.top-categories-section {
padding: 60px 0;
}
}
@media (max-width: 767.98px) {
.category-heading {
font-size: 2rem;
}
.category-slider-container {
padding: 0 50px;
}
.category-card {
min-width: 0;
flex: 1;
}
.category-content {
padding: 24px;
}
.category-title {
font-size: 1.1rem;
}
.slider-nav-btn {
width: 45px;
height: 45px;
font-size: 16px;
}
.slider-prev {
left: -25px;
}
.slider-next {
right: -25px;
}
.top-categories-section {
padding: 50px 0;
}
.category-label {
padding: 10px 20px;
font-size: 12px;
}
}
@media (max-width: 575.98px) {
.category-heading {
font-size: 1.75rem;
}
.category-slider-container {
padding: 0 40px;
}
.category-card {
min-width: 0;
flex: 1;
}
.category-label {
padding: 8px 16px;
font-size: 11px;
}
.category-content {
padding: 20px;
}
.course-count {
padding: 8px 16px;
font-size: 11px;
}
.arrow-link {
width: 38px;
height: 38px;
}
.arrow-link i {
font-size: 14px;
}
.slider-nav-btn {
width: 40px;
height: 40px;
font-size: 14px;
}
.slider-prev {
left: -20px;
}
.slider-next {
right: -20px;
}
.slider-indicators {
gap: 8px;
margin-top: 25px;
}
.indicator {
width: 10px;
height: 10px;
}
.top-categories-section {
padding: 40px 0;
}
}
/* Newsletter Subscription Section */
.newsletter-section {
background: var(--newsletter-bg);
position: relative;
overflow: hidden;
}
.newsletter-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.3;
}
.newsletter-container {
position: relative;
display: flex;
align-items: center;
min-height: 400px;
padding: 40px 0;
}
.newsletter-character {
position: absolute;
left: -50px;
bottom: -20px;
z-index: 2;
}
.character-image {
width: 300px;
height: 300px;
object-fit: cover;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
transform: rotate(-5deg);
}
.newsletter-content {
flex: 1;
text-align: center;
max-width: 600px;
margin: 0 auto;
position: relative;
z-index: 3;
}
.newsletter-title {
font-size: 2.5rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 2rem;
line-height: 1.2;
}
.newsletter-benefits {
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.benefit-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.1rem;
color: var(--text-secondary);
font-weight: 500;
}
.benefit-icon {
color: var(--newsletter-accent);
font-size: 1.2rem;
}
.newsletter-form {
max-width: 500px;
margin: 0 auto;
}
.newsletter-form .input-group {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border-radius: 50px;
overflow: hidden;
}
.newsletter-form .form-control {
border: none;
padding: 1rem 1.5rem;
font-size: 1.1rem;
border-radius: 50px 0 0 50px;
}
.newsletter-form .form-control:focus {
box-shadow: none;
border-color: var(--newsletter-accent);
}
.newsletter-form .btn {
padding: 1rem 2rem;
border-radius: 0 50px 50px 0;
font-weight: 600;
font-size: 1.1rem;
background: linear-gradient(135deg, var(--newsletter-accent) 0%, var(--newsletter-secondary) 100%);
border: none;
transition: all 0.3s ease;
}
.newsletter-form .btn:hover {
transform: translateY(-2px);
box-shadow: 0 15px 35px rgba(0, 188, 212, 0.3);
}
.decorative-icon {
position: absolute;
top: 20px;
right: 20px;
z-index: 3;
}
.decorative-icon i {
font-size: 2rem;
color: var(--newsletter-accent);
opacity: 0.7;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
/* Responsive Design */
@media (max-width: 991.98px) {
.newsletter-container {
flex-direction: column;
text-align: center;
padding: 60px 0;
}
.newsletter-character {
position: relative;
left: auto;
bottom: auto;
margin-bottom: 2rem;
}
.character-image {
width: 250px;
height: 250px;
transform: rotate(0deg);
}
.newsletter-title {
font-size: 2rem;
}
.newsletter-benefits {
gap: 1.5rem;
}
}
@media (max-width: 767.98px) {
.newsletter-title {
font-size: 1.8rem;
}
.newsletter-benefits {
flex-direction: column;
gap: 1rem;
}
.benefit-item {
justify-content: center;
}
.newsletter-form .input-group {
/* flex-direction: column; */
border-radius: 25px;
}
.newsletter-form .form-control,
.newsletter-form .btn {
border-radius: 25px;
margin: 0.25rem 0;
}
.character-image {
width: 200px;
height: 200px;
}
}
@media (max-width: 575.98px) {
.newsletter-title {
font-size: 1.5rem;
}
.newsletter-container {
padding: 40px 0;
}
.character-image {
width: 180px;
height: 180px;
}
.decorative-icon {
top: 10px;
right: 10px;
}
.decorative-icon i {
font-size: 1.5rem;
}
}
/* ===== LEGAL FRAMEWORKS SECTION ===== */
.legal-frameworks-section {
background: var(--newsletter-bg);
position: relative;
overflow: hidden;
}
/* Explore More Button Styles */
.legal-frameworks-section .btn {
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
position: relative;
overflow: hidden;
}
.legal-frameworks-section .btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
text-decoration: none;
}
.legal-frameworks-section .btn:active {
transform: translateY(0);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.legal-frameworks-section .btn:focus {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
.legal-frameworks-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.3;
}
/* ===== CONTACT FORM SECTION ===== */
.contact-form-section {
background: var(--newsletter-bg);
position: relative;
overflow: hidden;
}
.contact-form-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.3;
}
/* ===== FAQ SECTION ===== */
.faq-section {
background: var(--newsletter-bg);
position: relative;
overflow: hidden;
}
.faq-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.3;
}
/* ===== SEARCH FILTER SECTION ===== */
.search-filter {
background: var(--newsletter-bg);
position: relative;
overflow: hidden;
}
.search-filter::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.3;
}
/* ===== CHAPTERS SECTION ===== */
.chapters-section {
background: var(--newsletter-bg);
position: relative;
overflow: hidden;
}
.chapters-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.3;
}
/* ===== MULTI-CARD CAROUSEL SECTION ===== */
.carousel-section {
background: var(--newsletter-bg);
position: relative;
overflow: hidden;
padding: 3rem 0;
}
.carousel-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.3;
}
.carousel-container {
position: relative;
max-width: 100%;
overflow: hidden;
padding: 0 60px 0 20px; /* Reduced left padding since no prev button */
}
.carousel-track {
display: flex;
transition: transform 0.5s ease-in-out;
gap: 20px;
}
.carousel-card {
flex: 0 0 300px;
background: var(--light-color);
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: var(--transition);
margin: 0;
}
.carousel-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.card-image {
height: 200px;
overflow: hidden;
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.carousel-card:hover .card-image img {
transform: scale(1.05);
}
.card-content {
padding: 1.5rem;
}
.card-content h3 {
color: var(--text-primary);
font-size: 1.25rem;
margin-bottom: 0.75rem;
font-weight: 600;
}
.card-content p {
color: var(--text-secondary);
font-size: 0.95rem;
line-height: 1.5;
margin-bottom: 1rem;
}
.card-content .btn {
width: 100%;
padding: 0.75rem 1.5rem;
font-weight: 500;
border-radius: 8px;
transition: var(--transition);
}
.carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: var(--primary-color);
color: var(--light-color);
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
z-index: 10;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.carousel-btn:hover {
background: var(--primary-dark);
transform: translateY(-50%) scale(1.05);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.carousel-btn:active {
transform: translateY(-50%) scale(0.95);
}
.next-btn {
right: 0;
}
.carousel-btn i {
font-size: 1.2rem;
font-weight: 600;
}
/* Responsive Design */
@media (max-width: 768px) {
.carousel-container {
padding: 0 40px 0 15px; /* Reduced left padding since no prev button */
}
.carousel-card {
flex: 0 0 280px;
margin: 0;
}
.carousel-btn {
width: 45px;
height: 45px;
}
.carousel-btn i {
font-size: 1rem;
}
.card-content {
padding: 1.25rem;
}
.card-content h3 {
font-size: 1.1rem;
margin-bottom: 0.5rem;
}
.card-content p {
font-size: 0.9rem;
margin-bottom: 0.75rem;
}
.carousel-section {
padding: 2.5rem 0;
}
}
@media (max-width: 576px) {
.carousel-container {
padding: 0 30px 0 10px; /* Reduced left padding since no prev button */
}
.carousel-card {
flex: 0 0 260px;
margin: 0;
}
.carousel-btn {
width: 40px;
height: 40px;
}
.carousel-btn i {
font-size: 0.9rem;
}
.card-content {
padding: 1rem;
}
.card-content h3 {
font-size: 1rem;
margin-bottom: 0.5rem;
}
.card-content p {
font-size: 0.85rem;
margin-bottom: 0.75rem;
}
.carousel-section {
padding: 2rem 0;
}
}
/* ===== RESPONSIVE CAROUSEL STYLES ===== */
/* Enhanced responsive adjustments for all screen sizes */
/* Large Desktop (1200px and above) */
@media (min-width: 1200px) {
.carousel-container {
padding: 0 60px 0 20px;
}
.carousel-card {
flex: 0 0 320px;
}
.carousel-btn {
width: 50px;
height: 50px;
font-size: 1.2rem;
}
}
/* Desktop (992px - 1199px) */
@media (max-width: 1199px) and (min-width: 992px) {
.carousel-container {
padding: 0 50px 0 18px;
}
.carousel-card {
flex: 0 0 300px;
}
.carousel-btn {
width: 48px;
height: 48px;
font-size: 1.15rem;
}
}
/* Tablet Landscape (768px - 991px) */
@media (max-width: 991px) and (min-width: 768px) {
.carousel-container {
padding: 0 45px 0 16px;
}
.carousel-card {
flex: 0 0 280px;
}
.carousel-section {
padding: 60px 0;
}
.carousel-btn {
width: 45px;
height: 45px;
font-size: 1.1rem;
}
.carousel-card-content {
padding: 22px;
}
}
/* Tablet Portrait (576px - 767px) */
@media (max-width: 767px) and (min-width: 576px) {
.carousel-container {
padding: 0 40px 0 15px;
}
.carousel-card {
flex: 0 0 260px;
}
.carousel-section {
padding: 50px 0;
}
.carousel-btn {
width: 42px;
height: 42px;
font-size: 1.1rem;
}
.carousel-card-content {
padding: 20px;
}
.carousel-card h3 {
font-size: 1.2rem;
}
.carousel-card p {
font-size: 0.95rem;
}
}
/* Mobile Large (480px - 575px) */
@media (max-width: 575px) and (min-width: 480px) {
.carousel-container {
padding: 0 35px 0 12px;
}
.carousel-card {
flex: 0 0 240px;
}
.carousel-section {
padding: 40px 0;
}
.carousel-btn {
width: 38px;
height: 38px;
font-size: 0.95rem;
}
.carousel-card-content {
padding: 18px;
}
.carousel-card h3 {
font-size: 1.1rem;
margin-bottom: 10px;
}
.carousel-card p {
font-size: 0.9rem;
margin-bottom: 16px;
}
.carousel-card .btn {
padding: 10px 20px;
font-size: 0.9rem;
}
}
/* Mobile Medium (360px - 479px) */
@media (max-width: 479px) and (min-width: 360px) {
.carousel-container {
padding: 0 30px 0 10px;
}
.carousel-card {
flex: 0 0 220px;
}
.carousel-section {
padding: 35px 0;
}
.carousel-btn {
width: 35px;
height: 35px;
font-size: 0.9rem;
}
.carousel-card img {
height: 160px;
}
.carousel-card-content {
padding: 16px;
}
.carousel-card h3 {
font-size: 1rem;
}
.carousel-card p {
font-size: 0.85rem;
}
.carousel-card .btn {
padding: 9px 18px;
font-size: 0.85rem;
}
}
/* Mobile Small (below 360px) */
@media (max-width: 359px) {
.carousel-container {
padding: 0 25px 0 8px;
}
.carousel-card {
flex: 0 0 200px;
}
}
/* ===== OWL CAROUSEL SECTION STYLES ===== */
.owl-carousel-section {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
position: relative;
overflow: hidden;
}
.marquee-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.1);
z-index: 1;
}
.owl-carousel-section .container {
position: relative;
z-index: 2;
}
.owl-carousel-section .section-title {
color: white;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.owl-carousel-section .section-subtitle {
color: rgba(255, 255, 255, 0.9);
font-size: 1.1rem;
margin-bottom: 2rem;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.owl-carousel-container {
position: relative;
/* padding: 2rem 0; */
overflow: hidden;
width: 100%;
}
.owl-carousel {
padding: 10px 0;
}
.owl-card {
background: white;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
overflow: hidden;
transition: all 0.3s ease;
margin: 0 10px;
position: relative;
height: 400px;
}
.owl-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}
.owl-card .card-image {
height: 200px;
overflow: hidden;
position: relative;
width: 100%;
}
.marquee-card .card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.owl-card:hover .card-image img {
transform: scale(1.1);
}
.owl-card .card-content {
padding: 1.25rem;
text-align: center;
height: 200px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.owl-card .card-content h3 {
color: var(--text-primary);
font-size: 1.25rem;
margin-bottom: 0.5rem;
font-weight: 600;
flex-shrink: 0;
}
.owl-card .card-content p {
color: var(--text-secondary);
font-size: 0.9rem;
line-height: 1.4;
margin-bottom: 1rem;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.owl-card .card-content .btn {
width: 100%;
padding: 0.75rem 1.5rem;
font-weight: 500;
border-radius: 8px;
transition: all 0.3s ease;
background: var(--primary-color);
border: 2px solid var(--primary-color);
color: white;
flex-shrink: 0;
margin-top: auto;
}
.owl-card .card-content .btn:hover {
background: var(--primary-dark);
border-color: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
/* Owl Carousel responsive styles */
@media (max-width: 768px) {
.owl-carousel-section .section-title {
font-size: 2rem;
}
.owl-carousel-section .section-subtitle {
font-size: 1rem;
}
.owl-card {
height: 380px;
}
.owl-card .card-content {
padding: 1.25rem;
height: 180px;
}
.owl-card .card-content h3 {
font-size: 1.1rem;
}
.owl-card .card-content p {
font-size: 0.9rem;
}
}
@media (max-width: 576px) {
.owl-carousel-section .section-title {
font-size: 1.75rem;
}
.owl-card {
height: 360px;
}
.owl-card .card-image {
height: 160px;
}
.owl-card .card-content {
padding: 1rem;
height: 200px;
}
.owl-card .card-content h3 {
font-size: 1rem;
}
.owl-card .card-content p {
font-size: 0.85rem;
margin-bottom: 1rem;
}
.owl-card .card-content .btn {
padding: 0.6rem 1.25rem;
font-size: 0.9rem;
}
}
/* Owl Carousel animation enhancements */
@keyframes owl-card-glow {
0%, 100% {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
50% {
box-shadow: 0 15px 35px rgba(102, 126, 234, 0.3);
}
}
.owl-card {
animation: owl-card-glow 3s ease-in-out infinite;
}
.owl-card:nth-child(even) {
animation-delay: 1.5s;
}
.owl-card:nth-child(3n) {
animation-delay: 3s;
}
/* Owl Carousel Custom Navigation Styles */
.owl-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
pointer-events: none;
}
.owl-prev,
.owl-next {
position: absolute;
width: 50px;
height: 50px;
background: var(--primary-color) !important;
color: white !important;
border-radius: 50% !important;
display: flex !important;
align-items: center;
justify-content: center;
font-size: 1.2rem !important;
transition: all 0.3s ease;
pointer-events: auto;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.owl-prev:hover,
.owl-next:hover {
background: var(--primary-dark) !important;
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.owl-prev {
left: -25px;
}
.owl-next {
right: -25px;
}
/* Owl Carousel Dots Styles */
.owl-dots {
text-align: center;
margin-top: 20px;
}
.owl-dot {
width: 12px;
height: 12px;
background: rgba(255, 255, 255, 0.5) !important;
border-radius: 50%;
margin: 0 5px;
transition: all 0.3s ease;
}
.owl-dot.active {
background: var(--primary-color) !important;
transform: scale(1.2);
}
.owl-dot:hover {
background: var(--primary-color) !important;
transform: scale(1.1);
}
/* Responsive navigation adjustments */
@media (max-width: 768px) {
.owl-prev,
.owl-next {
width: 40px;
height: 40px;
font-size: 1rem;
}
.owl-prev {
left: -20px;
}
.owl-next {
right: -20px;
}
/* Responsive law card sizing */
.owl-carousel .item .law-card {
height: 380px;
}
.owl-carousel .item .law-card .law-card-header img {
width: 80px;
height: 80px;
}
.owl-carousel .item .law-card .law-card-header h3 {
font-size: 1.25rem;
}
.owl-carousel .item .law-card p {
font-size: 0.9rem;
}
}
@media (max-width: 576px) {
.owl-carousel .item .law-card {
height: 360px;
}
.owl-carousel .item .law-card .law-card-header img {
width: 70px;
height: 70px;
}
.owl-carousel .item .law-card .law-card-header h3 {
font-size: 1.1rem;
}
.owl-carousel .item .law-card p {
font-size: 0.85rem;
}
}
@media (max-width: 576px) {
.owl-prev,
.owl-next {
width: 35px;
height: 35px;
font-size: 0.9rem;
}
.owl-prev {
left: -17px;
}
.owl-next {
right: -17px;
}
}
/* ===== CAROUSEL SECTION STYLES ===== */
.carousel-section {
padding: 60px 0;
background: var(--light-color);
position: relative;
}
.carousel-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
z-index: 1;
}
.carousel-section .container {
position: relative;
z-index: 2;
}
.carousel-section .section-title {
font-size: 2.5rem;
font-weight: 700;
color: var(--text-primary);
text-align: center;
margin-bottom: 1rem;
}
.carousel-section .section-subtitle {
font-size: 1.1rem;
color: var(--text-secondary);
text-align: center;
margin-bottom: 3rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.carousel-container {
position: relative;
padding: 0 60px 0 20px;
overflow: hidden;
}
.carousel-track {
display: flex;
transition: transform 0.5s ease-in-out;
gap: 20px;
}
.carousel-card {
flex: 0 0 300px;
background: var(--light-color);
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: var(--transition);
margin: 0;
}
.carousel-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.card-image {
height: 200px;
overflow: hidden;
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.carousel-card:hover .card-image img {
transform: scale(1.05);
}
.card-content {
padding: 1.5rem;
}
.card-content h3 {
color: var(--text-primary);
font-size: 1.25rem;
margin-bottom: 0.75rem;
font-weight: 600;
}
.card-content p {
color: var(--text-secondary);
font-size: 0.95rem;
line-height: 1.5;
margin-bottom: 1rem;
}
.card-content .btn {
width: 100%;
padding: 0.75rem 1.5rem;
font-weight: 500;
border-radius: 8px;
transition: var(--transition);
}
.carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: var(--primary-color);
color: var(--light-color);
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
z-index: 10;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.carousel-btn:hover {
background: var(--primary-dark);
transform: translateY(-50%) scale(1.05);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.carousel-btn:active {
transform: translateY(-50%) scale(0.95);
}
.next-btn {
right: 0;
}
.carousel-btn i {
font-size: 1.2rem;
font-weight: 600;
}
/* Responsive carousel adjustments */
@media (max-width: 1199px) and (min-width: 992px) {
.carousel-container {
padding: 0 50px 0 18px;
}
.carousel-card {
flex: 0 0 280px;
margin: 0 10px;
}
.carousel-btn {
width: 45px;
height: 45px;
}
.carousel-btn i {
font-size: 1rem;
}
.card-content {
padding: 1.25rem;
}
.card-content h3 {
font-size: 1.1rem;
margin-bottom: 0.5rem;
}
.card-content p {
font-size: 0.9rem;
margin-bottom: 0.75rem;
}
.carousel-section {
padding: 2.5rem 0;
}
}
@media (max-width: 576px) {
.carousel-container {
padding: 0 30px 0 10px;
}
.carousel-card {
flex: 0 0 260px;
margin: 0 8px;
}
.carousel-btn {
width: 40px;
height: 40px;
}
.carousel-btn i {
font-size: 0.9rem;
}
.card-content {
padding: 1rem;
}
.card-content h3 {
font-size: 1rem;
margin-bottom: 0.5rem;
}
.card-content p {
font-size: 0.85rem;
margin-bottom: 0.75rem;
}
.carousel-section {
padding: 2rem 0;
}
}
/* Enhanced responsive adjustments for all screen sizes */
@media (min-width: 1200px) {
.carousel-container {
padding: 0 60px 0 20px;
}
.carousel-card {
flex: 0 0 320px;
}
.carousel-btn {
width: 50px;
height: 50px;
font-size: 1.2rem;
}
}
@media (max-width: 1199px) and (min-width: 992px) {
.carousel-container {
padding: 0 50px 0 18px;
}
.carousel-card {
flex: 0 0 300px;
}
.carousel-btn {
width: 48px;
height: 48px;
font-size: 1.15rem;
}
}
@media (max-width: 991px) and (min-width: 768px) {
.carousel-container {
padding: 0 45px 0 16px;
}
.carousel-card {
flex: 0 0 280px;
}
.carousel-section {
padding: 60px 0;
}
.carousel-btn {
width: 45px;
height: 45px;
font-size: 1.1rem;
}
.carousel-card-content {
padding: 22px;
}
}
@media (max-width: 767px) and (min-width: 576px) {
.carousel-container {
padding: 0 40px 0 15px;
}
.carousel-card {
flex: 0 0 260px;
}
.carousel-section {
padding: 50px 0;
}
.carousel-btn {
width: 42px;
height: 42px;
font-size: 1rem;
}
.carousel-card-content {
padding: 20px;
}
.carousel-card h3 {
font-size: 1.2rem;
}
.carousel-card p {
font-size: 0.95rem;
}
}
@media (max-width: 575px) and (min-width: 480px) {
.carousel-container {
padding: 0 35px 0 12px;
}
.carousel-card {
flex: 0 0 240px;
}
.carousel-section {
padding: 40px 0;
}
.carousel-btn {
width: 38px;
height: 38px;
font-size: 0.95rem;
}
.carousel-card-content {
padding: 18px;
}
.carousel-card h3 {
font-size: 1.1rem;
margin-bottom: 10px;
}
.carousel-card p {
font-size: 0.9rem;
margin-bottom: 16px;
}
.carousel-card .btn {
padding: 10px 20px;
font-size: 0.9rem;
}
}
@media (max-width: 479px) and (min-width: 360px) {
.carousel-container {
padding: 0 30px 0 10px;
}
.carousel-card {
flex: 0 0 220px;
}
.carousel-section {
padding: 35px 0;
}
.carousel-btn {
width: 35px;
height: 35px;
font-size: 0.9rem;
}
.carousel-card img {
height: 160px;
}
.carousel-card-content {
padding: 16px;
}
.carousel-card h3 {
font-size: 1rem;
}
.carousel-card p {
font-size: 0.85rem;
}
.carousel-card .btn {
padding: 9px 18px;
font-size: 0.85rem;
}
}
@media (max-width: 359px) {
.carousel-container {
padding: 0 25px 0 8px;
}
.carousel-card {
flex: 0 0 200px;
}
}
/* Landscape orientation adjustments for mobile */
@media (max-height: 500px) and (orientation: landscape) {
.carousel-section {
padding: 30px 0;
}
.carousel-card img {
height: 120px;
}
.carousel-card-content {
padding: 14px;
}
.carousel-card h3 {
font-size: 1rem;
margin-bottom: 8px;
}
.carousel-card p {
font-size: 0.85rem;
margin-bottom: 12px;
}
}
/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.carousel-btn {
border: 0.5px solid rgba(255, 255, 255, 0.3);
}
}
/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
.carousel-btn {
min-width: 44px;
min-height: 44px;
}
.carousel-card:hover {
transform: none;
}
.carousel-card:active {
transform: scale(0.98);
}
}
/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
.carousel-track {
transition: transform 0.2s ease;
}
.carousel-card {
transition: none;
}
.carousel-btn {
transition: none;
}
}
/* ===== PAGE HEADER SECTION STYLES ===== */
/* ===== PAGE HEADER SECTION STYLES ===== */
.page-header-section {
background: linear-gradient(135deg, #fdf2f8 0%, #f0f9ff 50%, #f0fdf4 100%);
padding: 80px 0 60px;
margin-top: 76px;
text-align: center;
}
.page-header-title {
font-size: 3.5rem;
font-weight: 800;
color: #000;
line-height: 1.2;
margin-bottom: 1.5rem;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.title-icon {
display: inline-block;
font-size: 2.5rem;
margin: 0 0.5rem;
vertical-align: middle;
}
.page-breadcrumb {
margin-bottom: 0;
}
.page-breadcrumb .breadcrumb {
background: transparent;
padding: 0;
margin: 0;
}
.page-breadcrumb .breadcrumb-item {
font-size: 1.1rem;
color: #374151;
font-weight: 500;
}
.page-breadcrumb .breadcrumb-item a {
color: #374151;
text-decoration: none;
transition: color 0.3s ease;
}
.page-breadcrumb .breadcrumb-item a:hover {
color: #000;
}
.page-breadcrumb .breadcrumb-item.active {
color: #000;
font-weight: 600;
}
.page-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
content: ">";
color: #374151;
font-weight: 600;
margin: 0 0.75rem;
}
.page-breadcrumb .fas.fa-home {
color: #6b7280;
font-size: 1rem;
}
/* Responsive adjustments for page header */
@media (max-width: 768px) {
.page-header-section {
padding: 60px 0 40px;
}
.page-header-title {
font-size: 2.5rem;
}
.title-icon {
font-size: 2rem;
}
.page-breadcrumb .breadcrumb-item {
font-size: 1rem;
}
}
@media (max-width: 576px) {
.page-header-title {
font-size: 2rem;
}
.title-icon {
font-size: 1.5rem;
}
.page-breadcrumb .breadcrumb-item {
font-size: 0.9rem;
}
}
/* ===== RELATED POSTS SECTION STYLES ===== */
.related-posts-section {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}
/* Major Legal Frameworks Section - Uniform Card Sizing */
#legal-frameworks .owl-carousel .item {
height: auto;
}
#legal-frameworks .related-post-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
overflow: hidden;
transition: all 0.3s ease;
height: 500px; /* Fixed height for all cards */
display: flex;
flex-direction: column;
width: 100%;
}
#legal-frameworks .related-post-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}
#legal-frameworks .post-image {
position: relative;
overflow: hidden;
height: 200px; /* Fixed image height */
flex-shrink: 0;
}
#legal-frameworks .post-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
#legal-frameworks .related-post-card:hover .post-image img {
transform: scale(1.05);
}
#legal-frameworks .post-category {
position: absolute;
top: 12px;
left: 12px;
background: rgba(0, 123, 255, 0.9);
color: white;
padding: 3px 10px;
border-radius: 18px;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.4px;
}
#legal-frameworks .post-content {
padding: 20px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
#legal-frameworks .post-title {
font-size: 1.1rem;
font-weight: 700;
color: #1a202c;
margin-bottom: 12px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
flex-shrink: 0;
}
#legal-frameworks .post-excerpt {
color: #4a5568;
font-size: 0.85rem;
line-height: 1.5;
margin-bottom: 16px;
/* flex: 1; */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
#legal-frameworks .post-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
font-size: 0.8rem;
color: #718096;
flex-shrink: 0;
}
#legal-frameworks .post-date, #legal-frameworks .post-read-time {
display: flex;
align-items: center;
}
#legal-frameworks .post-date i, #legal-frameworks .post-read-time i {
margin-right: 4px;
font-size: 0.75rem;
}
#legal-frameworks .related-post-card .btn {
align-self: flex-start;
font-size: 0.85rem;
padding: 8px 16px;
border-radius: 6px;
font-weight: 600;
transition: all 0.3s ease;
flex-shrink: 0;
/* margin-top: auto; */
}
#legal-frameworks .related-post-card .btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}
.related-post-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
overflow: hidden;
transition: all 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
}
.related-post-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}
.post-image {
position: relative;
overflow: hidden;
}
.post-image img {
width: 100%;
height: 200px;
object-fit: cover;
transition: transform 0.3s ease;
}
.related-post-card:hover .post-image img {
transform: scale(1.05);
}
.post-category {
position: absolute;
top: 12px;
left: 12px;
background: rgba(0, 123, 255, 0.9);
color: white;
padding: 3px 10px;
border-radius: 18px;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.post-content {
padding: 20px;
flex: 1;
display: flex;
flex-direction: column;
}
.post-title {
font-size: 1rem;
font-weight: 700;
color: #1a202c;
margin-bottom: 12px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.post-excerpt {
color: #4a5568;
font-size: 0.85rem;
line-height: 1.5;
margin-bottom: 16px;
/* flex: 1; */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.post-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
font-size: 0.8rem;
color: #718096;
}
.post-date, .post-read-time {
display: flex;
align-items: center;
}
.post-date i, .post-read-time i {
margin-right: 4px;
font-size: 0.75rem;
}
.related-post-card .btn {
align-self: flex-start;
font-size: 0.85rem;
padding: 8px 16px;
border-radius: 6px;
font-weight: 600;
transition: all 0.3s ease;
}
.related-post-card .btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}
/* Responsive adjustments for related posts */
@media (max-width: 1199px) {
.post-title {
font-size: 0.9rem;
}
.post-excerpt {
font-size: 0.8rem;
}
/* Major Legal Frameworks responsive adjustments */
#legal-frameworks .related-post-card {
height: 480px;
}
}
@media (max-width: 991px) {
.related-post-card {
margin-bottom: 20px;
}
.post-image img {
height: 180px;
}
/* Major Legal Frameworks responsive adjustments */
#legal-frameworks .related-post-card {
height: 460px;
}
#legal-frameworks .post-image {
height: 180px;
}
}
@media (max-width: 767px) {
.related-posts-section {
padding: 40px 0;
}
.post-image img {
height: 160px;
}
.post-content {
padding: 16px;
}
.post-title {
font-size: 0.9rem;
}
.post-excerpt {
font-size: 0.75rem;
-webkit-line-clamp: 2;
}
.post-meta {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
/* Major Legal Frameworks responsive adjustments */
#legal-frameworks .related-post-card {
height: 440px;
}
#legal-frameworks .post-image {
height: 160px;
}
#legal-frameworks .post-content {
padding: 16px;
}
}
@media (max-width: 575px) {
.post-image img {
height: 140px;
}
.post-content {
padding: 14px;
}
.post-title {
font-size: 0.9rem;
}
.post-excerpt {
font-size: 0.75rem;
}
.related-post-card .btn {
font-size: 0.8rem;
padding: 6px 12px;
}
/* Major Legal Frameworks responsive adjustments */
#legal-frameworks .related-post-card {
height: 420px;
}
#legal-frameworks .post-image {
height: 140px;
}
#legal-frameworks .post-content {
padding: 14px;
}
}
/* ===== MOST POPULAR COURSES SECTION ===== */
.popular-courses-section {
background: linear-gradient(135deg, #ffe5e5 0%, #e0f7fa 100%);
color: var(--text-primary);
position: relative;
overflow: hidden;
}
.popular-courses-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, rgba(255, 229, 229, 0.3) 0%, rgba(224, 247, 250, 0.3) 100%);
pointer-events: none;
}
.popular-courses-section .section-title {
color: var(--text-primary);
font-weight: 700;
font-size: 2.5rem;
margin-bottom: 1rem;
}
.course-card {
/* background: var(--light-color); */
/* border-radius: 16px; */
/* padding: 18px; */
text-align: left;
box-shadow: var(--shadow-md);
transition: var(--transition);
height: 90px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
position: relative;
z-index: 2;
gap: 16px;
}
.course-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
}
.course-card-highlighted {
background: #20c997;
color: var(--light-color);
transform: scale(1.05);
}
.course-card-highlighted:hover {
transform: scale(1.05) translateY(-8px);
}
.course-icon {
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
transition: var(--transition);
flex-shrink: 0;
background: #e8f5f5;
color: #20c997;
}
.course-card:not(.course-card-highlighted) .course-icon {
background: #e8f5f5;
color: #20c997;
}
.course-card-highlighted .course-icon {
background: #1abc9c;
color: var(--light-color);
}
.course-card:hover .course-icon {
transform: scale(1.1);
}
.course-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}
.course-title {
font-size: 1rem;
font-weight: 700;
margin-bottom: 3px;
color: inherit;
line-height: 1.2;
}
.course-count {
font-size: 0.8rem;
font-weight: 500;
margin: 0;
opacity: 0.8;
line-height: 1.2;
}
.course-card:not(.course-card-highlighted) .course-title {
color: var(--text-primary);
}
.course-card:not(.course-card-highlighted) .course-count {
color: var(--text-muted);
}
/* Responsive adjustments for Most Popular Courses */
@media (max-width: 1199px) {
.course-card {
padding: 16px;
height: 85px;
}
.course-icon {
width: 45px;
height: 45px;
font-size: 1.2rem;
}
.course-title {
font-size: 0.95rem;
}
}
@media (max-width: 991px) {
.course-card {
padding: 14px;
height: 80px;
}
.course-icon {
width: 42px;
height: 42px;
font-size: 1.1rem;
}
.course-title {
font-size: 0.9rem;
}
.course-count {
font-size: 0.75rem;
}
}
@media (max-width: 767px) {
.popular-courses-section .section-title {
font-size: 2rem;
}
.course-card {
padding: 12px;
margin-bottom: 16px;
height: 75px;
}
.course-icon {
width: 40px;
height: 40px;
font-size: 1rem;
}
.course-title {
font-size: 0.85rem;
}
.course-count {
font-size: 0.7rem;
}
}
@media (max-width: 575px) {
.popular-courses-section .section-title {
font-size: 1.75rem;
}
.course-card {
padding: 10px;
height: 70px;
}
.course-icon {
width: 38px;
height: 38px;
font-size: 0.9rem;
}
.course-title {
font-size: 0.8rem;
}
.course-count {
font-size: 0.65rem;
}
}
/* ===== COURSES PAGE SPECIFIC STYLES ===== */
/* Unique classes to prevent conflicts with other sections */
.courses-page .course-card {
margin-bottom: 0;
height: auto;
min-height: 400px;
margin-right: 0;
}
/* Ensure proper spacing in the grid */
.courses-page .row {
margin-left: 0;
margin-right: 0;
justify-content: center;
}
.courses-page .col-lg-4,
.courses-page .col-md-6,
.courses-page .col-sm-12 {
padding-left: 0;
padding-right: 0;
}
.courses-page .course-card-inner {
background: transparent;
border-radius: 0;
overflow: hidden;
box-shadow: none;
transition: all 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
border: none;
}
.courses-page .course-image {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
border-radius: 0;
}
.courses-page .course-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.courses-page .course-badge {
position: absolute;
top: 12px;
left: 12px;
background: var(--primary-color);
color: white;
padding: 4px 12px;
border-radius: 0;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.courses-page .course-content {
padding: 12px;
flex: 1;
display: flex;
flex-direction: column;
background: transparent;
}
.courses-page .course-title {
font-size: 18px;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 12px;
line-height: 1.4;
}
.courses-page .course-details {
display: flex;
flex-direction: row;
gap: 8px;
margin-bottom: 15px;
flex: 1;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
}
.courses-page .course-details span {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 8px;
background: rgba(0, 0, 0, 0.05);
border-radius: 0;
font-size: 13px;
color: var(--text-muted);
font-weight: 500;
}
.courses-page .course-action {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 10px;
}
.courses-page .learn-free {
font-size: 14px;
color: var(--primary-color);
font-weight: 600;
text-align: center;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.courses-page .btn {
width: 100%;
padding: 12px 24px;
border: none;
border-radius: 0;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.3s ease;
}
.courses-page .btn-primary {
background: var(--primary-color);
color: white;
}
.courses-page .btn-primary:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Desktop sizing adjustments removed per revert */
/* Responsive Design for All Screen Sizes */
@media (max-width: 1199.98px) {
.courses-page .course-card {
min-height: 380px;
}
.courses-page .course-image {
height: 180px;
}
.courses-page .course-content {
padding: 16px;
}
.courses-page .course-title {
font-size: 16px;
margin-bottom: 10px;
}
}
@media (max-width: 991.98px) {
.courses-page .course-card {
min-height: 360px;
}
.courses-page .course-image {
height: 160px;
}
.courses-page .course-content {
padding: 14px;
}
.courses-page .course-title {
font-size: 15px;
margin-bottom: 8px;
}
.courses-page .course-details {
gap: 6px;
margin-bottom: 12px;
}
.courses-page .course-details span {
padding: 3px 6px;
font-size: 12px;
}
.courses-page .learn-free {
font-size: 13px;
margin-bottom: 8px;
}
.courses-page .btn {
padding: 10px 20px;
font-size: 14px;
}
}
@media (max-width: 767.98px) {
.courses-page .course-card {
min-height: 340px;
margin-bottom: 20px;
}
.courses-page .course-image {
height: 140px;
}
.courses-page .course-content {
padding: 12px;
}
.courses-page .course-title {
font-size: 14px;
margin-bottom: 6px;
}
.courses-page .course-details {
gap: 4px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.courses-page .course-details span {
padding: 2px 4px;
font-size: 10px;
flex-shrink: 0;
}
.courses-page .course-details span i {
font-size: 11px;
}
.courses-page .learn-free {
font-size: 12px;
margin-bottom: 6px;
}
.courses-page .btn {
padding: 8px 16px;
font-size: 13px;
}
}
@media (max-width: 575.98px) {
.courses-page .course-card {
min-height: 320px;
margin-bottom: 16px;
}
.courses-page .course-image {
height: 120px;
}
.courses-page .course-content {
padding: 10px;
}
.courses-page .course-title {
font-size: 13px;
margin-bottom: 5px;
}
.courses-page .course-details {
gap: 3px;
margin-bottom: 8px;
flex-wrap: wrap;
}
.courses-page .course-details span {
padding: 1px 3px;
font-size: 9px;
flex-shrink: 0;
}
.courses-page .course-details span i {
font-size: 10px;
}
.courses-page .learn-free {
font-size: 11px;
margin-bottom: 5px;
}
.courses-page .btn {
padding: 6px 12px;
font-size: 12px;
}
}
@media (max-width: 480px) {
.courses-page .course-card {
min-height: 300px;
margin-bottom: 12px;
}
.courses-page .course-image {
height: 100px;
}
.courses-page .course-content {
padding: 8px;
}
.courses-page .course-title {
font-size: 12px;
margin-bottom: 4px;
}
.courses-page .course-details {
gap: 2px;
margin-bottom: 6px;
flex-wrap: wrap;
}
.courses-page .course-details span {
padding: 1px 2px;
font-size: 8px;
flex-shrink: 0;
}
.courses-page .course-details span i {
font-size: 9px;
}
.courses-page .learn-free {
font-size: 10px;
margin-bottom: 4px;
}
.courses-page .btn {
padding: 5px 10px;
font-size: 11px;
}
}
/* Landscape orientation for mobile devices */
@media (max-width: 767.98px) and (orientation: landscape) {
.courses-page .course-card {
min-height: 280px;
}
.courses-page .course-image {
height: 100px;
}
.courses-page .course-content {
padding: 8px;
}
.courses-page .course-title {
font-size: 12px;
margin-bottom: 4px;
}
.courses-page .course-details {
gap: 3px;
margin-bottom: 6px;
}
.courses-page .course-details span {
padding: 1px 3px;
font-size: 9px;
}
.courses-page .learn-free {
font-size: 10px;
margin-bottom: 4px;
}
.courses-page .btn {
padding: 5px 10px;
font-size: 11px;
}
}
/* Extra small devices */
@media (max-width: 360px) {
.courses-page .course-card {
min-height: 280px;
margin-bottom: 10px;
}
.courses-page .course-image {
height: 80px;
}
.courses-page .course-content {
padding: 6px;
}
.courses-page .course-title {
font-size: 11px;
margin-bottom: 3px;
}
.courses-page .course-details {
gap: 2px;
margin-bottom: 4px;
}
.courses-page .course-details span {
padding: 1px 2px;
font-size: 8px;
}
.courses-page .course-details span i {
font-size: 9px;
}
.courses-page .learn-free {
font-size: 9px;
margin-bottom: 3px;
}
.courses-page .btn {
padding: 4px 8px;
font-size: 10px;
}
}
/* Course Controls Section */
.courses-page .course-controls-section {
background: var(--section-bg);
/* padding: 40px 0; */
margin-top: 79px;
}
.courses-page .course-type-tabs {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.courses-page .tab-btn {
padding: 10px 20px;
border: 2px solid var(--primary-color);
background: transparent;
color: var(--primary-color);
border-radius: 25px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.courses-page .tab-btn:hover,
.courses-page .tab-btn.active {
background: var(--primary-color);
color: white;
}
.courses-page .search-container {
max-width: 300px;
}
.courses-page .search-input {
border: 2px solid var(--border-color);
border-radius: 25px;
/* padding: 10px 20px; */
width: 100%;
transition: border-color 0.3s ease;
}
.courses-page .search-input:focus {
outline: none;
border-color: var(--primary-color);
}
.courses-page .language-filters {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 20px;
}
.courses-page .language-filter-btn {
padding: 8px 16px;
border: 1px solid var(--border-color);
background: white;
border-radius: 20px;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
}
.courses-page .language-filter-btn:hover,
.courses-page .language-filter-btn.active {
border-color: var(--primary-color);
color: var(--primary-color);
}
/* Course Grid Section */
.courses-page .course-grid-section {
padding: 25px 0;
background: white;
}
/* .courses-page .course-grid-section .row {
margin-top: 30px;
} */
/* ===== GLOBAL STYLES ===== */
html {
scroll-behavior: smooth;
}
:root {
--primary-color: #00bcd4;
--primary-dark: #0097a7;
--primary-light: #4dd0e1;
--secondary-color: #2c3e50;
--accent-color: #34495e;
--success-color: #10b981;
--danger-color: #ef4444;
--warning-color: #f59e0b;
--info-color: #3b82f6;
--light-color: #FFFFFF;
--dark-color: #2c3e50;
--text-primary: #2c3e50;
--text-secondary: #34495e;
--text-muted: #7f8c8d;
--border-color: #e0f7fa;
--section-bg: #f8f9fa;
--light-bg: #f8f9fa;
--newsletter-bg: linear-gradient(135deg, #ffe5e5 0%, #e0f7fa 50%, #f3e5f5 100%);
--newsletter-accent: #00bcd4;
--newsletter-secondary: #0097a7;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--border-radius: 0.5rem;
--border-radius-lg: 0.75rem;
--border-radius-xl: 1rem;
--transition: all 0.3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
line-height: 1.6;
color: var(--dark-color);
background-color: var(--light-bg);
overflow-x: hidden;
}
/* revert body-specific overflow for courses page */
/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
line-height: 1.3;
margin-bottom: 1rem;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }
p {
margin-bottom: 1rem;
color: var(--text-secondary);
}
/* ===== NAVIGATION ===== */
.navbar {
box-shadow: var(--shadow-md);
transition: var(--transition);
background: rgba(15, 15, 15, 0.8) !important;
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.navbar-brand {
font-size: 1.3rem;
font-weight: 700;
}
.navbar-nav .nav-link {
font-weight: 500;
padding: 1rem 1.5rem;
margin: 0 0.25rem;
transition: var(--transition);
border-radius: 6px;
font-size: 0.95rem;
}
.navbar-nav .nav-link:hover {
color: var(--light-color) !important;
background-color: rgba(255, 255, 255, 0.2);
transform: translateY(-1px);
}
.navbar-nav .nav-link.active {
/* background-color: rgba(255, 255, 255, 0.2); */
font-weight: 600;
}
.dropdown-menu {
border: none;
box-shadow: var(--shadow-lg);
border-radius: var(--border-radius);
background: linear-gradient(135deg, var(--light-color) 0%, var(--border-color) 100%);
}
.dropdown-item {
padding: 0.75rem 1.5rem;
font-weight: 500;
transition: var(--transition);
font-size: 0.9rem;
}
.dropdown-item:hover {
background-color: var(--primary-color);
color: white;
}
/* Mobile navbar fixes */
@media (max-width: 991.98px) {
.navbar-collapse {
background-color: rgba(30, 58, 95, 0.95);
backdrop-filter: blur(10px);
border-radius: var(--border-radius);
margin-top: 1rem;
padding: 1rem;
border: 1px solid rgba(255, 255, 255, 0.1);
max-height: 80vh;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
/* Custom scrollbar for webkit browsers */
.navbar-collapse::-webkit-scrollbar {
width: 6px;
}
.navbar-collapse::-webkit-scrollbar-track {
background: transparent;
}
.navbar-collapse::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
border-radius: 3px;
}
.navbar-collapse::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.5);
}
/* Add visual indicator for scrollable content */
.navbar-collapse::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 20px;
background: linear-gradient(transparent, rgba(30, 58, 95, 0.95));
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.navbar-collapse.scrollable::after {
opacity: 1;
}
/* Top scroll indicator */
.navbar-collapse::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 20px;
background: linear-gradient(rgba(30, 58, 95, 0.95), transparent);
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.navbar-collapse.scrolled-to-top::before {
opacity: 0;
}
.navbar-collapse.scrolled-to-bottom::after {
opacity: 0;
}
/* Smooth scroll behavior for mobile menu */
.navbar-collapse {
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
/* Ensure proper spacing for scrollable content */
.navbar-nav {
padding-bottom: 1rem;
}
/* Add visual indicator for scrollable content */
.navbar-collapse::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 20px;
background: linear-gradient(transparent, rgba(30, 58, 95, 0.95));
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.navbar-collapse.scrollable::after {
opacity: 1;
}
.navbar-nav .dropdown-menu {
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
margin-top: 0.5rem;
padding: 0.5rem 0;
position: static !important;
float: none;
width: 100%;
box-shadow: none;
display: none;
opacity: 1;
visibility: visible;
transform: none !important;
transition: all 0.3s ease;
}
.navbar-nav .dropdown-menu.show {
display: block !important;
opacity: 1;
visibility: visible;
animation: slideDown 0.3s ease;
}
.navbar-nav .dropdown-menu:not(.show) {
animation: slideUp 0.3s ease;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideUp {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-10px);
}
}
.navbar-nav .dropdown-item {
/* color: rgba(255, 255, 255, 0.8) !important; */
padding: 0.5rem 1rem;
}
.navbar-nav .dropdown-item:hover {
background-color: rgba(255, 255, 255, 0.1);
color: white !important;
}
.navbar-nav .dropdown-item.active {
background-color: rgba(255, 255, 255, 0.2);
color: white !important;
}
/* Active dropdown toggle indicator */
.navbar-nav .dropdown-toggle[aria-expanded="true"] {
background-color: rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius);
position: relative;
}
.navbar-nav .dropdown-toggle[aria-expanded="true"]::after {
transform: rotate(180deg);
transition: transform 0.3s ease;
}
.navbar-nav .dropdown-toggle::after {
transition: transform 0.3s ease;
}
.dropdown-toggle::after{
float: right;
margin-top: 8px;
}
/* Ensure navbar toggle works properly */
.navbar-toggler {
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 0.25rem 0.5rem;
}
.navbar-toggler:focus {
box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* Fix dropdown positioning on mobile */
.dropdown-menu.show {
display: block !important;
position: static !important;
transform: none !important;
width: 100%;
margin-top: 0.5rem;
opacity: 1 !important;
visibility: visible !important;
}
/* Ensure dropdown toggles don't interfere with main menu */
.dropdown-toggle {
pointer-events: auto;
}
/* Override Bootstrap's default dropdown behavior on mobile */
.navbar-nav .dropdown-menu.show {
display: block !important;
position: static !important;
float: none !important;
width: 100% !important;
margin-top: 0.5rem !important;
padding: 0.5rem 0 !important;
background-color: rgba(255, 255, 255, 0.1) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
box-shadow: none !important;
border-radius: var(--border-radius) !important;
}
/* Force dropdown visibility on mobile */
.navbar-nav .dropdown-menu.show,
.navbar-nav .dropdown-menu.show.show {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
transform: none !important;
position: static !important;
float: none !important;
width: 100% !important;
margin-top: 0.5rem !important;
padding: 0.5rem 0 !important;
}
/* Ensure dropdown items are visible */
.navbar-nav .dropdown-menu.show .dropdown-item {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Additional force rules for Bootstrap compatibility */
.navbar-nav .dropdown-menu.show {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
transform: none !important;
position: static !important;
float: none !important;
width: 100% !important;
margin-top: 0.5rem !important;
padding: 0.5rem 0 !important;
background-color: rgba(255, 255, 255, 0.1) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
box-shadow: none !important;
border-radius: var(--border-radius) !important;
z-index: 1000 !important;
}
/* Override any Bootstrap inline styles */
.navbar-nav .dropdown-menu.show[style*="display: none"] {
display: block !important;
}
.navbar-nav .dropdown-menu.show[style*="visibility: hidden"] {
visibility: visible !important;
}
.navbar-nav .dropdown-menu.show[style*="opacity: 0"] {
opacity: 1 !important;
}
}
/* ===== HERO SECTION ===== */
.hero-section {
background: var(--newsletter-bg);
color: var(--text-primary);
padding-top: 80px;
position: relative;
overflow: hidden;
}
.hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.4;
}
.hero-title {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
position: relative;
z-index: 2;
color: var(--text-primary);
}
.hero-subtitle {
font-size: 1.25rem;
font-weight: 400;
margin-bottom: 2rem;
opacity: 0.9;
position: relative;
z-index: 2;
color: var(--text-secondary);
}
.hero-buttons {
position: relative;
z-index: 2;
}
.hero-image {
text-align: center;
position: relative;
z-index: 2;
}
.hero-image img {
width: 100%;
max-width: 500px;
height: auto;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-lg);
}
.hero-icon {
font-size: 15rem;
opacity: 0.2;
animation: float 6s ease-in-out infinite;
}
.hero-image-svg {
width: 100%;
max-width: 400px;
height: auto;
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
/* ===== SECTIONS ===== */
.section-title {
font-size: 2.5rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 1rem;
}
.section-subtitle {
font-size: 1.125rem;
color: var(--text-secondary);
margin-bottom: 3rem;
}
.section-alt {
background-color: var(--section-bg);
}
/* ===== FEATURE CARDS ===== */
.feature-card {
background: white;
padding: 2rem;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
border: 2px solid var(--border-color);
text-align: center;
transition: var(--transition);
height: 100%;
border: 1px solid var(--border-color);
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
border-color: var(--primary-color);
}
.feature-icon {
width: 120px;
height: 120px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
color: white;
font-size: 2rem;
overflow: hidden;
}
.feature-icon img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.feature-image {
width: 100%;
height: 100%;
object-fit: contain;
}
.feature-card h3 {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1rem;
color: var(--text-primary);
}
.feature-card p {
color: var(--text-secondary);
margin-bottom: 0;
}
/* ===== LAW CARDS ===== */
.law-card {
background: white;
padding: 2rem;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
transition: var(--transition);
height: 100%;
border: 1px solid var(--border-color);
text-align: center;
/* Ensure consistent sizing for Owl Carousel */
min-height: 350px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.law-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
border-color: var(--primary-color);
}
.law-card-header {
margin-bottom: 1.5rem;
}
.law-card-header i {
font-size: 3rem;
color: var(--primary-color);
margin-bottom: 1rem;
display: block;
}
.law-card-header img {
width: 80px;
height: 80px;
margin: 0 auto 1rem;
display: block;
object-fit: cover;
border-radius: var(--border-radius);
}
.law-card-image {
width: 60px;
height: 60px;
margin: 0 auto 1rem;
display: block;
object-fit: contain;
}
.law-card-header h3 {
font-size: 1.5rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.5rem;
}
.law-card p {
color: var(--text-secondary);
margin-bottom: 1.5rem;
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
}
/* Owl Carousel specific styles for law cards */
.owl-carousel .item .law-card {
height: 400px;
width: 100%;
margin: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.owl-carousel .item .law-card .law-card-header {
flex-shrink: 0;
margin-bottom: 1rem;
}
.owl-carousel .item .law-card .law-card-header img {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: var(--border-radius);
margin: 0 auto 1rem;
}
.owl-carousel .item .law-card .law-card-header h3 {
font-size: 1.5rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.5rem;
}
.owl-carousel .item .law-card p {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin-bottom: 1rem;
line-height: 1.5;
}
.owl-carousel .item .law-card .btn {
flex-shrink: 0;
margin-top: auto;
}
/* ===== CONSTITUTION SECTION ===== */
.constitution-section {
background: linear-gradient(135deg, var(--light-bg) 0%, #f8f9fa 100%);
}
.constitution-image img {
width: 100%;
height: 400px;
object-fit: cover;
border-radius: var(--border-radius);
box-shadow: var(--shadow-lg);
}
.constitution-features {
margin: 2rem 0;
}
.constitution-feature {
display: flex;
align-items: center;
margin-bottom: 1rem;
font-size: 1.1rem;
}
.constitution-feature i {
font-size: 1.5rem;
margin-right: 1rem;
width: 30px;
}
/* ===== BUTTONS ===== */
.btn-primary {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
border-color: var(--primary-color);
}
.btn-primary:hover {
background: var(--primary-dark);
border-color: var(--primary-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-outline-primary {
color: var(--primary-color);
border-color: var(--primary-color);
}
.btn-outline-primary:hover {
background: var(--primary-color);
border-color: var(--primary-color);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* .btn-lg {
padding: 1rem 2rem;
font-size: small;
} */
.btn-accent {
background-color: var(--accent-color);
border-color: var(--accent-color);
color: white;
}
.btn-accent:hover,
.btn-accent:focus {
background-color: var(--primary-dark);
border-color: var(--primary-dark);
color: white;
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* ===== CTA SECTION ===== */
.cta-section {
background: var(--newsletter-bg);
}
/* ===== FOOTER ===== */
.footer {
background: linear-gradient(135deg, var(--secondary-color) 0%, var(--accent-color) 100%);
color: white;
}
.footer h5, .footer h6 {
color: white !important;
margin-bottom: 1rem;
font-weight: 600;
font-size: 1rem;
}
.footer p {
color: rgba(255, 255, 255, 0.9) !important;
line-height: 1.6;
font-size: 0.9rem;
}
.footer a {
text-decoration: none;
transition: var(--transition);
color: rgba(255, 255, 255, 0.8) !important;
font-size: 0.9rem;
}
.footer a:hover {
color: white !important;
text-decoration: underline;
}
.social-links a {
display: inline-block;
width: 40px;
height: 40px;
background: var(--primary-color);
border-radius: 50%;
text-align: center;
line-height: 40px;
transition: var(--transition);
margin-right: 10px;
}
.social-links a:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* Footer list items */
.footer ul li {
margin-bottom: 8px;
}
.footer ul li a {
color: rgba(255, 255, 255, 0.8) !important;
transition: all 0.3s ease;
font-size: 0.9rem;
}
.footer ul li a:hover {
color: white !important;
padding-left: 5px;
}
/* Footer contact info */
.footer .text-white-50 {
color: rgba(255, 255, 255, 0.8) !important;
}
.footer hr {
border-color: rgba(255, 255, 255, 0.2);
}
/* ===== HIGHLIGHTED SECTIONS ===== */
.highlight-section {
background: var(--newsletter-bg);
border-left: 4px solid var(--primary-color);
padding: 2rem;
margin: 2rem 0;
border-radius: var(--border-radius);
}
.highlight-section h3 {
color: var(--primary-color);
margin-bottom: 1rem;
}
.accent-border {
border: 2px solid var(--accent-color);
border-radius: var(--border-radius);
padding: 1rem;
background: rgba(52, 73, 94, 0.05);
}
/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 991.98px) {
.hero-title {
font-size: 2.5rem;
}
.hero-icon {
font-size: 10rem;
}
.hero-image-svg {
max-width: 300px;
}
.constitution-icon {
font-size: 8rem;
}
.constitution-image-svg {
max-width: 250px;
}
.section-title {
font-size: 2rem;
}
/* Disable parallax on mobile for better performance */
.parallax-bg {
background-attachment: scroll;
}
}
@media (max-width: 767.98px) {
.hero-title {
font-size: 2rem;
}
.hero-subtitle {
font-size: 1rem;
}
.hero-icon {
font-size: 8rem;
}
.hero-image-svg {
max-width: 250px;
}
.constitution-icon {
font-size: 6rem;
}
.constitution-image-svg {
max-width: 200px;
}
.section-title {
font-size: 1.75rem;
}
.feature-card,
.law-card {
padding: 1.5rem;
}
.hero-buttons .btn {
display: block;
width: 100%;
margin-bottom: 1rem;
}
.hero-buttons .btn:last-child {
margin-bottom: 0;
}
/* Disable parallax on mobile for better performance */
.parallax-bg {
background-attachment: scroll;
}
/* Additional mobile navbar fixes */
.navbar-collapse {
margin-top: 0.5rem;
padding: 0.75rem;
}
.navbar-nav .nav-link {
padding: 0.75rem 1rem;
margin: 0.25rem 0;
/* border-bottom: 1px solid rgba(255, 255, 255, 0.1); */
}
.navbar-nav .nav-link:last-child {
border-bottom: none;
}
.dropdown-menu {
margin-top: 0.25rem;
padding: 0.25rem 0;
}
.dropdown-item {
padding: 0.5rem 1rem;
font-size: 0.9rem;
}
}
@media (max-width: 575.98px) {
.hero-title {
font-size: 1.75rem;
}
.hero-icon {
font-size: 6rem;
}
.hero-image-svg {
max-width: 200px;
}
.constitution-icon {
font-size: 4rem;
}
.constitution-image-svg {
max-width: 150px;
}
.section-title {
font-size: 1.5rem;
}
/* Disable parallax on mobile for better performance */
.parallax-bg {
background-attachment: scroll;
}
/* Small mobile navbar fixes */
.navbar-brand {
font-size: 1.1rem;
}
.navbar-toggler {
padding: 0.2rem 0.4rem;
}
.navbar-collapse {
margin-top: 0.25rem;
padding: 0.75rem;
}
.navbar-nav .nav-link {
padding: 0.6rem 0.75rem;
margin: 0.2rem 0;
font-size: 0.9rem;
}
.dropdown-item {
padding: 0.4rem 0.75rem;
font-size: 0.8rem;
}
}
/* ===== UTILITY CLASSES ===== */
.text-primary { color: var(--primary-color) !important; }
.text-secondary { color: var(--secondary-color) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-accent { color: var(--accent-color) !important; }
.bg-light { background: var(--newsletter-bg) !important; }
.bg-dark { background-color: var(--dark-color) !important; }
.bg-accent { background-color: var(--accent-color) !important; }
.bg-secondary { background-color: var(--secondary-color) !important; }
.border-primary { border-color: var(--primary-color) !important; }
.border-light { border-color: var(--border-color) !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }
.rounded { border-radius: var(--border-radius) !important; }
.rounded-lg { border-radius: var(--border-radius-lg) !important; }
.rounded-xl { border-radius: var(--border-radius-xl) !important; }
/* ===== ANIMATIONS ===== */
.fade-in {
animation: fadeIn 1s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.slide-in-left {
animation: slideInLeft 1s ease-out;
}
@keyframes slideInLeft {
from { opacity: 0; transform: translateX(-50px); }
to { opacity: 1; transform: translateX(0); }
}
.slide-in-right {
animation: slideInRight 1s ease-out;
}
@keyframes slideInRight {
from { opacity: 0; transform: translateX(50px); }
to { opacity: 1; transform: translateX(0); }
}
/* ===== ACCESSIBILITY ===== */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ===== FOCUS STATES ===== */
.btn:focus,
.nav-link:focus,
.dropdown-item:focus {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
/* ===== BACK TO TOP BUTTON ===== */
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: var(--primary-color);
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: var(--transition);
z-index: 1000;
box-shadow: var(--shadow-lg);
}
.back-to-top.show {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
background: var(--primary-dark);
transform: translateY(-3px);
box-shadow: var(--shadow-xl);
}
/* ===== SCROLL PROGRESS BAR ===== */
.scroll-progress {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 3px;
background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
z-index: 9999;
transition: width 0.1s ease;
}
/* ===== SKIP LINK ===== */
.skip-link {
position: absolute;
top: -40px;
left: 6px;
background: var(--primary-color);
color: white;
padding: 8px;
text-decoration: none;
border-radius: var(--border-radius);
z-index: 10000;
transition: var(--transition);
}
.skip-link:focus {
top: 6px;
}
/* ===== PAGE HEADER ===== */
.page-header {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
position: relative;
overflow: hidden;
}
.page-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
/* ===== MISSION & VISION CARDS ===== */
.mission-vision-card {
background: #ffffff;
border-radius: 16px;
padding: 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
height: 100%;
transition: all 0.3s ease;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.mission-vision-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.card-header-section {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.5rem;
}
.card-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.25rem;
flex-shrink: 0;
}
.card-title-section {
flex: 1;
}
.card-title {
font-size: 16px;
font-weight: 700;
color: #1f2937;
margin-bottom: 0.25rem;
line-height: 1.2;
}
.card-subtitle {
font-size: 0.875rem;
color: #6b7280;
margin: 0;
font-weight: 500;
}
.card-content {
margin-bottom: 1.5rem;
}
.card-content p {
color: #374151;
line-height: 1.6;
margin: 0;
font-size: 0.95rem;
}
.feature-tags {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.feature-tag {
background: #f3f4f6;
color: #374151;
padding: 0.5rem 0.75rem;
border-radius: 8px;
font-size: 0.8rem;
font-weight: 500;
display: flex;
align-items: center;
gap: 0.5rem;
border: 1px solid #e5e7eb;
}
.feature-tag i {
font-size: 0.75rem;
color: #6b7280;
}
.card-actions {
display: flex;
gap: 0.75rem;
}
.card-actions .btn {
flex: 1;
padding: 0.75rem 1rem;
border-radius: 8px;
font-weight: 500;
font-size: 0.875rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
transition: all 0.2s ease;
}
.card-actions .btn-outline-secondary {
background: #f9fafb;
border: 1px solid #d1d5db;
color: #374151;
}
.card-actions .btn-outline-secondary:hover {
background: #f3f4f6;
border-color: #9ca3af;
color: #1f2937;
}
.card-actions .btn-primary {
background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
border: none;
color: white;
}
.card-actions .btn-primary:hover {
background: linear-gradient(135deg, #7c3aed 0%, #9333ea 100%);
transform: translateY(-1px);
}
/* Responsive adjustments */
@media (max-width: 767.98px) {
.mission-vision-card {
padding: 1.5rem;
}
.card-header-section {
flex-direction: column;
text-align: center;
gap: 1rem;
}
.card-icon {
margin: 0 auto;
}
.card-actions {
flex-direction: column;
}
.feature-tags {
justify-content: center;
}
}
/* ===== VALUE CARDS ===== */
.value-card {
background: white;
padding: 2rem;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
transition: var(--transition);
height: 100%;
border: 1px solid var(--border-color);
}
.value-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
}
.value-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
margin: 0 auto;
}
.value-image {
width: 100%;
height: 100%;
object-fit: contain;
}
/* ===== TEAM CARDS ===== */
.team-card {
background: white;
padding: 2rem;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
transition: var(--transition);
height: 100%;
border: 1px solid var(--border-color);
}
.team-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
}
.team-avatar {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2rem;
margin: 0 auto;
}
.team-social a {
display: inline-block;
width: 35px;
height: 35px;
background: var(--light-color);
border-radius: 50%;
text-align: center;
line-height: 35px;
transition: var(--transition);
}
.team-social a:hover {
background: var(--primary-color);
color: white !important;
transform: translateY(-2px);
}
/* ===== IMPACT STATS ===== */
.impact-stat {
padding: 1.5rem;
}
.stat-number {
font-size: 2.5rem;
font-weight: 700;
color: white;
}
.stat-label {
font-size: 1rem;
color: rgba(255, 255, 255, 0.8);
font-weight: 500;
}
/* ===== CONTACT PAGE STYLES ===== */
/* Contact Cards */
.contact-card {
background: white;
padding: 2rem;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
transition: var(--transition);
height: 100%;
border: 1px solid var(--border-color);
}
.contact-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
}
.contact-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
margin: 0 auto;
overflow: hidden;
}
.contact-icon img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.contact-image {
width: 100%;
height: 100%;
object-fit: contain;
}
/* Contact Form */
.contact-form-card {
background: white;
padding: 3rem;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-lg);
border: 1px solid var(--border-color);
}
.form-control,
.form-select {
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
padding: 0.75rem 1rem;
transition: var(--transition);
}
.form-control:focus,
.form-select:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.25);
}
.form-label {
font-weight: 500;
color: var(--text-primary);
margin-bottom: 0.5rem;
}
/* Office Hours */
.hours-card,
.support-card {
background: white;
padding: 2rem;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
border: 1px solid var(--border-color);
height: 100%;
}
.hours-list {
list-style: none;
padding: 0;
}
.hours-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
border-bottom: 1px solid var(--border-color);
}
.hours-item:last-child {
border-bottom: none;
}
.day {
font-weight: 500;
color: var(--text-primary);
}
.time {
color: var(--text-secondary);
font-weight: 500;
}
/* Support Items */
.support-list {
list-style: none;
padding: 0;
}
.support-item {
display: flex;
align-items: flex-start;
margin-bottom: 1.5rem;
padding: 1rem;
background: var(--light-color);
border-radius: var(--border-radius);
transition: var(--transition);
}
.support-item:hover {
background: white;
box-shadow: var(--shadow-sm);
}
.support-icon {
width: 50px;
height: 50px;
background: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.25rem;
margin-right: 1rem;
flex-shrink: 0;
}
.support-content h5 {
margin-bottom: 0.5rem;
color: var(--text-primary);
}
.support-content p {
margin-bottom: 0;
color: var(--text-secondary);
}
/* FAQ Accordion */
.accordion-item {
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
margin-bottom: 1rem;
overflow: hidden;
}
.accordion-button {
background: white;
border: none;
padding: 1.25rem;
font-weight: 500;
color: var(--text-primary);
transition: var(--transition);
}
.accordion-button:not(.collapsed) {
background: var(--primary-color);
color: white;
}
.accordion-button:focus {
box-shadow: none;
border-color: var(--primary-color);
}
.accordion-body {
padding: 1.25rem;
background: var(--light-color);
color: var(--text-secondary);
}
/* ===== BLOG PAGE STYLES ===== */
/* Search and Filter */
.search-box .input-group {
box-shadow: var(--shadow-sm);
border-radius: var(--border-radius);
overflow: hidden;
}
.search-box .input-group-text {
border: 1px solid var(--border-color);
}
.search-box .form-control {
border: 1px solid var(--border-color);
}
/* Featured Article */
.featured-card {
background: white;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-lg);
overflow: hidden;
border: 1px solid var(--border-color);
}
.featured-image {
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
height: 100%;
min-height: 300px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.featured-badge {
position: absolute;
top: 1rem;
left: 1rem;
background: var(--accent-color);
color: white;
padding: 0.5rem 1rem;
border-radius: var(--border-radius);
font-weight: 600;
font-size: 0.875rem;
}
.featured-icon {
font-size: 8rem;
color: rgba(255, 255, 255, 0.2);
}
.featured-image-svg {
width: 100%;
height: 100%;
object-fit: contain;
opacity: 0.2;
}
.featured-content {
padding: 2.5rem;
}
.featured-title {
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--text-primary);
}
.featured-excerpt {
color: var(--text-secondary);
margin-bottom: 1.5rem;
line-height: 1.6;
}
/* Blog Cards */
.blog-card {
background: white;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
overflow: hidden;
transition: var(--transition);
height: 100%;
border: 1px solid var(--border-color);
}
.blog-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
}
.blog-image {
position: relative;
overflow: hidden;
}
.blog-image img {
width: 100%;
height: 250px;
object-fit: cover;
transition: var(--transition);
}
.blog-card:hover .blog-image img {
transform: scale(1.05);
}
.blog-content {
padding: 1.5rem;
}
.blog-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
font-size: 0.875rem;
}
.blog-category {
background: var(--primary-color);
color: white;
padding: 0.25rem 0.75rem;
border-radius: var(--border-radius);
font-weight: 500;
}
.blog-date {
color: var(--text-muted);
}
.blog-card h3 {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1rem;
color: var(--text-primary);
line-height: 1.4;
}
.blog-card p {
color: var(--text-secondary);
margin-bottom: 1.5rem;
line-height: 1.6;
}
.read-more {
color: var(--primary-color);
text-decoration: none;
font-weight: 500;
display: inline-flex;
align-items: center;
transition: var(--transition);
}
.read-more:hover {
color: var(--primary-dark);
text-decoration: underline;
}
.read-more i {
margin-left: 0.5rem;
transition: var(--transition);
}
.read-more:hover i {
transform: translateX(3px);
}
/* Article Meta */
.article-meta {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.category-badge {
background: var(--primary-color);
color: white;
padding: 0.25rem 0.75rem;
border-radius: var(--border-radius);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
}
.date {
color: var(--text-muted);
font-size: 0.875rem;
}
.read-time {
color: var(--text-muted);
font-size: 0.875rem;
}
/* Blog Author */
.blog-author,
.featured-author {
color: var(--text-secondary);
font-size: 0.875rem;
}
.blog-author i,
.featured-author i {
color: var(--primary-color);
}
/* Read More Link */
.read-more {
color: var(--primary-color);
text-decoration: none;
font-weight: 500;
transition: var(--transition);
}
.read-more:hover {
color: var(--primary-dark);
text-decoration: none;
}
/* Newsletter Section */
.newsletter-section {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
}
.newsletter-form .form-control {
border: none;
border-radius: var(--border-radius);
padding: 1rem 1.5rem;
font-size: 1rem;
}
.newsletter-form .btn {
border-radius: var(--border-radius);
font-weight: 500;
}
/* ===== LAW PAGE STYLES ===== */
.page-title-icon {
width: 60px;
height: 60px;
vertical-align: middle;
}
/* Breadcrumb */
.breadcrumb {
background: transparent;
padding: 0;
margin-bottom: 1rem;
}
.breadcrumb-item + .breadcrumb-item::before {
color: rgba(255, 255, 255, 0.7);
}
/* Law Content */
.law-content {
background: white;
padding: 2rem;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
border: 1px solid var(--border-color);
}
/* Change Cards */
.change-card {
background: white;
padding: 1.5rem;
border-radius: var(--border-radius);
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-color);
text-align: center;
height: 100%;
}
.change-icon {
font-size: 2rem;
margin-bottom: 1rem;
}
/* Features List */
.features-list {
list-style: none;
padding: 0;
}
.feature-item {
display: flex;
align-items: flex-start;
margin-bottom: 1.5rem;
padding: 1rem;
background: var(--light-color);
border-radius: var(--border-radius);
}
.feature-item i {
font-size: 1.5rem;
margin-top: 0.25rem;
}
.feature-item h5 {
margin-bottom: 0.5rem;
color: var(--text-primary);
}
.feature-item p {
margin-bottom: 0;
color: var(--text-secondary);
}
/* Law Sidebar */
.law-sidebar {
position: sticky;
top: 100px;
}
.sidebar-card {
background: white;
padding: 1.5rem;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
border: 1px solid var(--border-color);
}
.sidebar-title {
font-size: 1.125rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 1rem;
}
/* Table of Contents */
.toc-list {
list-style: none;
padding: 0;
margin: 0;
}
.toc-list li {
margin-bottom: 0.5rem;
}
.toc-link {
color: var(--text-secondary);
text-decoration: none;
padding: 0.5rem 0;
display: block;
transition: var(--transition);
border-radius: var(--border-radius);
}
.toc-link:hover {
color: var(--primary-color);
background: var(--light-color);
padding-left: 0.5rem;
}
/* Resource Links */
.resource-links {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.resource-link {
color: var(--primary-color);
text-decoration: none;
padding: 0.75rem;
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
transition: var(--transition);
}
.resource-link:hover {
background: var(--primary-color);
color: white;
text-decoration: none;
}
/* Timeline */
.timeline {
position: relative;
}
.timeline::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: var(--primary-color);
}
.timeline-item {
position: relative;
padding-left: 2rem;
margin-bottom: 1rem;
}
.timeline-item::before {
content: '';
position: absolute;
left: -4px;
top: 0.5rem;
width: 10px;
height: 10px;
background: var(--primary-color);
border-radius: 50%;
}
.timeline-date {
font-weight: 600;
color: var(--primary-color);
font-size: 0.875rem;
}
.timeline-content {
color: var(--text-secondary);
font-size: 0.875rem;
}
/* Chapter Cards */
.chapter-card {
background: white;
padding: 2rem;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
border: 1px solid var(--border-color);
transition: var(--transition);
height: 100%;
}
.chapter-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
.chapter-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.chapter-header h3 {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0;
}
.chapter-sections {
background: var(--primary-color);
color: white;
padding: 0.25rem 0.75rem;
border-radius: var(--border-radius);
font-size: 0.75rem;
font-weight: 600;
}
/* ===== PRINT STYLES ===== */
@media print {
.navbar,
.hero-buttons,
.cta-section,
.footer,
.back-to-top,
.scroll-progress {
display: none;
}
.hero-section {
background: white !important;
color: black !important;
padding: 2rem 0;
}
.hero-title {
color: black !important;
}
}
/* ===== ABOUT PAGE STYLES ===== */
.card-actions {
display: flex;
gap: 0.75rem;
}
.card-actions .btn {
flex: 1;
padding: 0.75rem 1rem;
border-radius: 8px;
font-weight: 500;
font-size: 0.875rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
transition: all 0.2s ease;
}
.card-actions .btn-outline-secondary {
background: #f9fafb;
border: 1px solid #d1d5db;
color: #374151;
}
.card-actions .btn-outline-secondary:hover {
background: #f3f4f6;
border-color: #9ca3af;
color: #1f2937;
}
.card-actions .btn-primary {
background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
border: none;
color: white;
}
.card-actions .btn-primary:hover {
background: linear-gradient(135deg, #7c3aed 0%, #9333ea 100%);
transform: translateY(-1px);
}
/* ===== LEGAL COURSES SECTION ===== */
.legal-courses-section {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
/* Course Filter Section */
.course-filter-section {
background: white;
padding: 2rem;
border-radius: var(--border-radius);
box-shadow: var(--shadow-sm);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.search-box .input-group {
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.search-box .form-control {
border: none;
padding: 0.75rem 1rem;
font-size: 1rem;
}
.search-box .input-group-text {
border: none;
background: white;
padding: 0.75rem 1rem;
}
#courseCategoryFilter {
border-radius: var(--border-radius);
border: 1px solid #dee2e6;
padding: 0.75rem 1rem;
font-size: 1rem;
box-shadow: var(--shadow-sm);
}
/* Course Categories */
.course-categories {
margin-bottom: 3rem;
}
.category-card {
background: white;
border: 2px solid transparent;
border-radius: var(--border-radius);
padding: 1.5rem 1rem;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: var(--shadow-sm);
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.category-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
border-color: var(--primary-color);
}
.category-card.active {
border-color: var(--primary-color);
color: white;
}
.category-card.active .category-icon {
background: rgba(255, 255, 255, 0.2);
color: white;
}
.category-icon {
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--primary-color);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 1rem;
transition: all 0.3s ease;
}
.category-card span {
font-weight: 600;
font-size: 0.9rem;
}
/* Course Grid */
.course-grid {
margin-bottom: 3rem;
}
.course-card {
background: white;
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: all 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
}
.course-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
}
.course-image {
position: relative;
overflow: hidden;
height: 200px;
}
.course-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.course-card:hover .course-image img {
transform: scale(1.1);
}
.course-badge {
position: absolute;
top: 1rem;
/* right: 1rem; */
background: var(--primary-color);
color: white;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
z-index: 2;
}
.course-badge.free {
background: #28a745;
}
.course-badge.premium {
background: #ffc107;
color: #212529;
}
.course-badge.popular {
background: #dc3545;
}
.course-badge.new {
background: #17a2b8;
}
.course-badge.trending {
background: #6f42c1;
}
.course-badge.best-seller {
background: #fd7e14;
}
.course-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.course-card:hover .course-overlay {
opacity: 1;
}
.course-content {
padding: 1.5rem;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.course-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.course-category {
background: rgba(13, 110, 253, 0.1);
color: var(--primary-color);
padding: 0.25rem 0.75rem;
border-radius: 15px;
font-size: 0.8rem;
font-weight: 600;
}
.course-duration {
color: #6c757d;
font-size: 0.8rem;
}
.course-title {
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 0.75rem;
color: #212529;
line-height: 1.4;
}
.course-description {
color: #6c757d;
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 1rem;
flex-grow: 1;
}
.course-features {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.course-features span {
background: #f8f9fa;
color: #495057;
padding: 0.25rem 0.5rem;
border-radius: 10px;
font-size: 0.75rem;
display: flex;
align-items: center;
}
.course-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
}
.course-price {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.current-price {
font-size: 1.2rem;
font-weight: 700;
color: var(--primary-color);
}
.original-price {
font-size: 0.9rem;
color: #6c757d;
text-decoration: line-through;
}
.discount {
font-size: 0.8rem;
color: #28a745;
font-weight: 600;
}
/* Load More Button */
#loadMoreCourses {
padding: 1rem 2rem;
border-radius: var(--border-radius);
font-weight: 600;
transition: all 0.3s ease;
}
#loadMoreCourses:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* Responsive Design for Courses */
@media (max-width: 991.98px) {
.course-categories .col-lg-2 {
margin-bottom: 1rem;
}
.category-card {
padding: 1rem 0.5rem;
}
.category-icon {
width: 50px;
height: 50px;
font-size: 1.2rem;
}
.category-card span {
font-size: 0.8rem;
}
}
@media (max-width: 767.98px) {
.course-filter-section {
padding: 1.5rem;
}
.course-categories .col-6 {
margin-bottom: 1rem;
}
.category-card {
padding: 1rem 0.5rem;
}
.category-icon {
width: 40px;
height: 40px;
font-size: 1rem;
margin-bottom: 0.5rem;
}
.category-card span {
font-size: 0.75rem;
}
.course-content {
padding: 1rem;
}
.course-title {
font-size: 1rem;
}
.course-features {
flex-direction: column;
gap: 0.25rem;
}
.course-footer {
flex-direction: column;
gap: 1rem;
align-items: stretch;
}
.course-price {
align-items: center;
}
}
@media (max-width: 575.98px) {
.course-categories .col-6 {
width: 50%;
}
.category-card {
padding: 0.75rem 0.25rem;
}
.category-icon {
width: 35px;
height: 35px;
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.category-card span {
font-size: 0.7rem;
}
.course-image {
height: 180px;
}
.course-content {
padding: 0.75rem;
}
.course-title {
font-size: 0.95rem;
}
.course-description {
font-size: 0.85rem;
}
}
/* Animation for course cards */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.course-card {
animation: fadeInUp 0.6s ease forwards;
}
.course-card:nth-child(1) { animation-delay: 0.1s; }
.course-card:nth-child(2) { animation-delay: 0.2s; }
.course-card:nth-child(3) { animation-delay: 0.3s; }
.course-card:nth-child(4) { animation-delay: 0.4s; }
.course-card:nth-child(5) { animation-delay: 0.5s; }
.course-card:nth-child(6) { animation-delay: 0.6s; }
.course-card:nth-child(7) { animation-delay: 0.7s; }
.course-card:nth-child(8) { animation-delay: 0.8s; }
.course-card:nth-child(9) { animation-delay: 0.9s; }
/* Filter functionality styles */
.course-card.hidden {
display: none;
}
.course-card.visible {
display: block;
animation: fadeInUp 0.6s ease forwards;
}
/* Courses Page Styles */
.courses-page-container {
/* padding-top: 80px; */
background-color: #f8f9fa;
min-height: 100vh;
}
/* Course Controls Section */
.course-controls-section {
background: white;
padding: 5px 0;
border-bottom: 1px solid #e9ecef;
}
.course-type-tabs {
display: flex;
gap: 0;
border-radius: 8px;
overflow: hidden;
/* border: 1px solid #dee2e6; */
}
.tab-btn {
background: white;
border: none;
padding: 12px 24px;
font-size: 12px;
font-weight: 500;
color: #6c757d;
cursor: pointer;
transition: all 0.3s ease;
border-right: 1px solid #dee2e6;
}
.tab-btn:last-child {
border-right: none;
}
.tab-btn:hover {
background: #f8f9fa;
color: #495057;
}
.tab-btn.active {
background: #28a745;
color: white;
font-weight: 600;
}
.course-controls {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 15px;
}
.search-container {
position: relative;
flex: 1;
max-width: 300px;
}
.search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #6c757d;
z-index: 2;
}
.search-input {
padding-left: 40px;
border-radius: 20px;
border: 1px solid #dee2e6;
font-size: 14px;
}
.search-input:focus {
border-color: #28a745;
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}
/* Legal Acts Filters Section */
.legal-acts-filters-section {
background: white;
padding: 0 0 20px 0;
border-bottom: 1px solid #e9ecef;
overflow: hidden;
max-width: 100%;
position: relative;
}
.green-top-bar {
height: 1px;
background: #28a745;
width: 100%;
margin-bottom: 20px;
}
.legal-acts-filters-section .container {
overflow: hidden;
/* max-width: 100%; */
}
.filter-label {
font-size: 16px;
font-weight: 600;
color: #495057;
margin-bottom: 15px;
font-family: 'Poppins', sans-serif;
}
.course-count-display {
font-size: 14px;
font-weight: 400;
color: #6c757d;
margin-left: 10px;
}
.legal-acts-filters {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 15px;
position: relative;
}
.filter-buttons-container {
display: flex;
align-items: center;
gap: 0;
position: relative;
width: 100%;
background: #f8f9fa;
border-radius: 8px;
padding: 4px;
border: 1px solid #e9ecef;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.filter-buttons {
display: flex;
align-items: center;
gap: 10px;
overflow-x: auto;
padding: 0 10px;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
position: relative;
scrollbar-width: none;
-ms-overflow-style: none;
flex: 1;
margin: 0 10px;
}
.language-filters::-webkit-scrollbar {
display: none;
}
.language-filter-btn {
background: white;
border: 1px solid #e0e0e0;
padding: 10px 16px;
border-radius: 6px;
font-size: 14px;
color: #495057;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
font-weight: 500;
min-width: 80px;
text-align: center;
flex-shrink: 0;
font-family: 'Poppins', sans-serif;
}
.language-filter-btn:hover {
border-color: #28a745;
color: #28a745;
}
.language-filter-btn.active {
background: #d4edda;
border-color: #28a745;
color: #28a745;
font-weight: 600;
}
.filter-btn {
background: white;
border: 1px solid #e0e0e0;
padding: 4px 7px;
border-radius: 6px;
font-size: 14px;
color: #495057;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
font-weight: 500;
min-width: 80px;
text-align: center;
flex-shrink: 0;
font-family: 'Poppins', sans-serif;
}
.filter-btn:hover {
border-color: #28a745;
color: #28a745;
}
.filter-btn-active {
background: #d4edda !important;
border-color: #28a745 !important;
color: #28a745 !important;
font-weight: 600;
}
/* Additional filter button styling to match image exactly */
.filter-btn i {
font-size: 12px;
margin-right: 6px;
}
.filter-btn-active i {
color: #28a745;
}
/* Responsive adjustments for filter section */
@media (max-width: 768px) {
/* .filter-buttons-container {
padding: 12px;
} */
.filter-buttons {
gap: 8px;
margin: 0 8px;
}
.filter-btn {
padding: 8px 12px;
font-size: 13px;
min-width: 70px;
}
.filter-nav-btn {
width: 32px;
height: 32px;
}
}
/* Filter Navigation Buttons */
.filter-nav-btn {
background: white;
border: 1px solid #e0e0e0;
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
color: #6c757d;
flex-shrink: 0;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
z-index: 10;
}
.filter-nav-left {
order: -1;
}
.filter-nav-right {
order: 999;
}
.filter-nav-btn:hover {
background: #e9ecef;
border-color: #adb5bd;
color: #495057;
}
.filter-nav-btn i {
font-size: 14px;
}
/* Course Grid Section */
.course-grid-section {
padding: 40px 0;
}
/* Prevent horizontal scroll on courses page */
.courses-page-container {
overflow-x: hidden;
max-width: 100%;
}
/* Additional overflow control for courses page */
.courses-page {
overflow-x: hidden;
max-width: 100%;
}
.courses-page .container {
overflow-x: hidden;
/* max-width: 100%; */
}
.course-card {
margin-bottom: 20px;
}
.course-card-inner {
background: white;
/* border-radius: 12px; */
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
height: 100%;
}
.course-card-inner:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.course-image {
position: relative;
height: 200px;
overflow: hidden;
}
.course-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.course-card-inner:hover .course-image img {
transform: scale(1.05);
}
.course-badge {
position: absolute;
top: 12px;
left: 12px;
padding: 4px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
color: white;
z-index: 2;
}
.course-badge.free {
background: #6f42c1;
}
.course-badge.premium {
background: #fd7e14;
}
.course-badge.popular {
background: #dc3545;
}
.course-badge.new {
background: #20c997;
}
.course-content {
padding: 20px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.course-title {
font-size: 18px;
font-weight: 600;
color: #212529;
margin-bottom: 12px;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.course-details {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 15px;
font-size: 14px;
color: #6c757d;
}
.course-details span {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 8px;
background: #f8f9fa;
border-radius: 6px;
font-size: 13px;
}
.course-details i {
font-size: 12px;
color: #6c757d;
}
.chapters i {
color: #007bff;
}
.readers i {
color: #28a745;
}
.file-type i {
color: #dc3545;
}
.course-action {
margin-top: auto;
}
.learn-free {
color: #28a745;
font-size: 14px;
font-weight: 600;
margin-bottom: 10px;
}
.btn-certification,
.btn-free-certificate {
background: var(--primary-color);
color: white;
border: none;
padding: 8px 16px;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
width: 100%;
transition: all 0.3s ease;
}
.btn-certification:hover,
.btn-free-certificate:hover {
background: var(--primary-dark);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
/* Responsive Design */
@media (max-width: 991.98px) {
.course-controls {
justify-content: flex-start;
/* margin-top: 20px; */
}
.course-type-tabs {
justify-content: center;
}
.language-filters {
justify-content: center;
}
}
@media (max-width: 767.98px) {
.course-controls {
flex-direction: column;
align-items: stretch;
}
.search-container {
max-width: none;
}
.course-type-tabs {
flex-wrap: wrap;
}
.tab-btn {
flex: 1;
min-width: 120px;
}
.language-filters {
gap: 8px;
}
.language-filter-btn {
padding: 6px 12px;
font-size: 13px;
}
}
@media (max-width: 575.98px) {
.course-card {
margin-bottom: 20px;
}
.course-content {
padding: 20px;
}
.course-title {
font-size: 18px;
}
.course-details {
flex-direction: column;
gap: 8px;
}
.course-details span {
padding: 4px 8px;
font-size: 13px;
}
}
/* Animation for course cards */
.course-card {
animation: fadeInUp 0.6s ease forwards;
opacity: 0;
transform: translateY(30px);
}
.course-card:nth-child(1) { animation-delay: 0.1s; }
.course-card:nth-child(2) { animation-delay: 0.2s; }
.course-card:nth-child(3) { animation-delay: 0.3s; }
.course-card:nth-child(4) { animation-delay: 0.4s; }
.course-card:nth-child(5) { animation-delay: 0.5s; }
.course-card:nth-child(6) { animation-delay: 0.6s; }
.course-card:nth-child(7) { animation-delay: 0.7s; }
.course-card:nth-child(8) { animation-delay: 0.8s; }
.course-card:nth-child(9) { animation-delay: 0.9s; }
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Top Categories Section */
.top-categories-section {
background: var(--newsletter-bg);
position: relative;
overflow: hidden;
padding: 80px 0;
}
.top-categories-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(200, 200, 200, 0.15) 1px, transparent 1px),
radial-gradient(circle at 80% 70%, rgba(200, 200, 200, 0.15) 1px, transparent 1px),
radial-gradient(circle at 40% 80%, rgba(200, 200, 200, 0.15) 1px, transparent 1px),
radial-gradient(circle at 90% 20%, rgba(200, 200, 200, 0.15) 1px, transparent 1px);
background-size: 100px 100px, 150px 150px, 80px 80px, 120px 120px;
background-position: 0 0, 50px 50px, 25px 75px, 75px 25px;
animation: float 20s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
33% { transform: translateY(-10px) rotate(1deg); }
66% { transform: translateY(10px) rotate(-1deg); }
}
.category-label {
display: inline-block;
background: var(--primary-color);
color: white;
border: 2px solid var(--primary-dark);
padding: 12px 24px;
border-radius: 25px;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 25px;
box-shadow: 0 4px 15px rgba(0, 188, 212, 0.3);
}
.category-heading {
font-size: 3rem;
font-weight: 800;
color: var(--text-primary);
line-height: 1.1;
margin-bottom: 0;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Category Slider Container */
.category-slider-container {
position: relative;
width: 100%;
overflow: hidden;
padding: 0 60px;
}
.category-slider {
display: flex;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
gap: 24px;
padding: 20px 0;
will-change: transform;
transform: translateX(0);
}
.category-card {
background: white;
border-radius: 20px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
overflow: hidden;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
height: 100%;
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
flex-shrink: 0;
transform: translateX(0);
opacity: 1;
animation: slideInRight 0.8s ease-out forwards;
}
.category-card:nth-child(1) { animation-delay: 0.1s; }
.category-card:nth-child(2) { animation-delay: 0.2s; }
.category-card:nth-child(3) { animation-delay: 0.3s; }
.category-card:nth-child(4) { animation-delay: 0.4s; }
.category-card:nth-child(5) { animation-delay: 0.5s; }
.category-card:nth-child(6) { animation-delay: 0.6s; }
.category-card:nth-child(7) { animation-delay: 0.7s; }
.category-card:nth-child(8) { animation-delay: 0.8s; }
.category-card:nth-child(9) { animation-delay: 0.9s; }
@keyframes slideInRight {
from {
transform: translateX(100px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* Slider Navigation */
.slider-navigation {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
pointer-events: none;
z-index: 10;
}
.slider-nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
color: var(--primary-color);
font-size: 18px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
pointer-events: auto;
display: flex;
align-items: center;
justify-content: center;
}
.slider-nav-btn:hover {
background: white;
transform: translateY(-50%) scale(1.1);
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
}
.slider-nav-btn:active {
transform: translateY(-50%) scale(0.95);
}
.slider-nav-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.slider-nav-btn:focus {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
.slider-prev {
left: -25px;
}
.slider-next {
right: -25px;
}
/* Slider Indicators */
.slider-indicators {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 30px;
}
.indicator {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.indicator:hover {
background: rgba(0, 0, 0, 0.4);
transform: scale(1.2);
}
.indicator.active {
background: var(--primary-color);
border-color: var(--secondary-color);
transform: scale(1.3);
}
.indicator:focus {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
.category-card:hover {
transform: translateY(-12px) scale(1.02);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
animation-play-state: paused;
}
.category-image {
position: relative;
overflow: hidden;
height: 220px;
}
.category-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.category-card:hover .category-image img {
transform: scale(1.1);
}
.category-content {
padding: 28px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.category-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 24px;
line-height: 1.3;
}
.category-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
}
.course-count {
/* background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); */
color: white;
padding: 10px 1px;
border-radius: 25px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
/* box-shadow: 0 4px 15px rgba(0, 188, 212, 0.4); */
}
.arrow-link {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
background: var(--newsletter-bg);
border-radius: 50%;
color: var(--text-secondary);
text-decoration: none;
transition: all 0.3s ease;
border: 2px solid var(--border-color);
}
.arrow-link:hover {
background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
color: var(--text-primary);
transform: scale(1.15) rotate(15deg);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.arrow-link i {
font-size: 16px;
font-weight: 600;
}
/* Responsive adjustments for categories */
@media (max-width: 991.98px) {
.category-heading {
font-size: 2.5rem;
}
.category-slider-container {
padding: 0 60px;
}
.category-card {
min-width: 0;
flex: 1;
}
.top-categories-section {
padding: 60px 0;
}
}
@media (max-width: 767.98px) {
.category-heading {
font-size: 2rem;
}
.category-slider-container {
padding: 0 50px;
}
.category-card {
min-width: 0;
flex: 1;
}
.category-content {
padding: 24px;
}
.category-title {
font-size: 1.1rem;
}
.slider-nav-btn {
width: 45px;
height: 45px;
font-size: 16px;
}
.slider-prev {
left: -25px;
}
.slider-next {
right: -25px;
}
.top-categories-section {
padding: 50px 0;
}
.category-label {
padding: 10px 20px;
font-size: 12px;
}
}
@media (max-width: 575.98px) {
.category-heading {
font-size: 1.75rem;
}
.category-slider-container {
padding: 0 40px;
}
.category-card {
min-width: 0;
flex: 1;
}
.category-label {
padding: 8px 16px;
font-size: 11px;
}
.category-content {
padding: 20px;
}
.course-count {
padding: 8px 16px;
font-size: 11px;
}
.arrow-link {
width: 38px;
height: 38px;
}
.arrow-link i {
font-size: 14px;
}
.slider-nav-btn {
width: 40px;
height: 40px;
font-size: 14px;
}
.slider-prev {
left: -20px;
}
.slider-next {
right: -20px;
}
.slider-indicators {
gap: 8px;
margin-top: 25px;
}
.indicator {
width: 10px;
height: 10px;
}
.top-categories-section {
padding: 40px 0;
}
}
/* Newsletter Subscription Section */
.newsletter-section {
background: var(--newsletter-bg);
position: relative;
overflow: hidden;
}
.newsletter-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.3;
}
.newsletter-container {
position: relative;
display: flex;
align-items: center;
min-height: 400px;
padding: 40px 0;
}
.newsletter-character {
position: absolute;
left: -50px;
bottom: -20px;
z-index: 2;
}
.character-image {
width: 300px;
height: 300px;
object-fit: cover;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
transform: rotate(-5deg);
}
.newsletter-content {
flex: 1;
text-align: center;
max-width: 600px;
margin: 0 auto;
position: relative;
z-index: 3;
}
.newsletter-title {
font-size: 2.5rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 2rem;
line-height: 1.2;
}
.newsletter-benefits {
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.benefit-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.1rem;
color: var(--text-secondary);
font-weight: 500;
}
.benefit-icon {
color: var(--newsletter-accent);
font-size: 1.2rem;
}
.newsletter-form {
max-width: 500px;
margin: 0 auto;
}
.newsletter-form .input-group {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border-radius: 50px;
overflow: hidden;
}
.newsletter-form .form-control {
border: none;
padding: 1rem 1.5rem;
font-size: 1.1rem;
border-radius: 50px 0 0 50px;
}
.newsletter-form .form-control:focus {
box-shadow: none;
border-color: var(--newsletter-accent);
}
.newsletter-form .btn {
padding: 1rem 2rem;
border-radius: 0 50px 50px 0;
font-weight: 600;
font-size: 1.1rem;
background: linear-gradient(135deg, var(--newsletter-accent) 0%, var(--newsletter-secondary) 100%);
border: none;
transition: all 0.3s ease;
}
.newsletter-form .btn:hover {
transform: translateY(-2px);
box-shadow: 0 15px 35px rgba(0, 188, 212, 0.3);
}
.decorative-icon {
position: absolute;
top: 20px;
right: 20px;
z-index: 3;
}
.decorative-icon i {
font-size: 2rem;
color: var(--newsletter-accent);
opacity: 0.7;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
/* Responsive Design */
@media (max-width: 991.98px) {
.newsletter-container {
flex-direction: column;
text-align: center;
padding: 60px 0;
}
.newsletter-character {
position: relative;
left: auto;
bottom: auto;
margin-bottom: 2rem;
}
.character-image {
width: 250px;
height: 250px;
transform: rotate(0deg);
}
.newsletter-title {
font-size: 2rem;
}
.newsletter-benefits {
gap: 1.5rem;
}
}
@media (max-width: 767.98px) {
.newsletter-title {
font-size: 1.8rem;
}
.newsletter-benefits {
flex-direction: column;
gap: 1rem;
}
.benefit-item {
justify-content: center;
}
.newsletter-form .input-group {
/* flex-direction: column; */
border-radius: 25px;
}
.newsletter-form .form-control,
.newsletter-form .btn {
border-radius: 25px;
margin: 0.25rem 0;
}
.character-image {
width: 200px;
height: 200px;
}
}
@media (max-width: 575.98px) {
.newsletter-title {
font-size: 1.5rem;
}
.newsletter-container {
padding: 40px 0;
}
.character-image {
width: 180px;
height: 180px;
}
.decorative-icon {
top: 10px;
right: 10px;
}
.decorative-icon i {
font-size: 1.5rem;
}
}
/* ===== LEGAL FRAMEWORKS SECTION ===== */
.legal-frameworks-section {
background: var(--newsletter-bg);
position: relative;
overflow: hidden;
}
/* Explore More Button Styles */
.legal-frameworks-section .btn {
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
position: relative;
overflow: hidden;
}
.legal-frameworks-section .btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
text-decoration: none;
}
.legal-frameworks-section .btn:active {
transform: translateY(0);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.legal-frameworks-section .btn:focus {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
.legal-frameworks-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.3;
}
/* ===== CONTACT FORM SECTION ===== */
.contact-form-section {
background: var(--newsletter-bg);
position: relative;
overflow: hidden;
}
.contact-form-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.3;
}
/* ===== FAQ SECTION ===== */
.faq-section {
background: var(--newsletter-bg);
position: relative;
overflow: hidden;
}
.faq-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.3;
}
/* ===== SEARCH FILTER SECTION ===== */
.search-filter {
background: var(--newsletter-bg);
position: relative;
overflow: hidden;
}
.search-filter::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.3;
}
/* ===== CHAPTERS SECTION ===== */
.chapters-section {
background: var(--newsletter-bg);
position: relative;
overflow: hidden;
}
.chapters-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.3;
}
/* ===== MULTI-CARD CAROUSEL SECTION ===== */
.carousel-section {
background: var(--newsletter-bg);
position: relative;
overflow: hidden;
padding: 3rem 0;
}
.carousel-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.3;
}
.carousel-container {
position: relative;
max-width: 100%;
overflow: hidden;
padding: 0 60px 0 20px; /* Reduced left padding since no prev button */
}
.carousel-track {
display: flex;
transition: transform 0.5s ease-in-out;
gap: 20px;
}
.carousel-card {
flex: 0 0 300px;
background: var(--light-color);
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: var(--transition);
margin: 0;
}
.carousel-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.card-image {
height: 200px;
overflow: hidden;
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.carousel-card:hover .card-image img {
transform: scale(1.05);
}
.card-content {
padding: 1.5rem;
}
.card-content h3 {
color: var(--text-primary);
font-size: 1.25rem;
margin-bottom: 0.75rem;
font-weight: 600;
}
.card-content p {
color: var(--text-secondary);
font-size: 0.95rem;
line-height: 1.5;
margin-bottom: 1rem;
}
.card-content .btn {
width: 100%;
padding: 0.75rem 1.5rem;
font-weight: 500;
border-radius: 8px;
transition: var(--transition);
}
.carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: var(--primary-color);
color: var(--light-color);
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
z-index: 10;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.carousel-btn:hover {
background: var(--primary-dark);
transform: translateY(-50%) scale(1.05);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.carousel-btn:active {
transform: translateY(-50%) scale(0.95);
}
.next-btn {
right: 0;
}
.carousel-btn i {
font-size: 1.2rem;
font-weight: 600;
}
/* Responsive Design */
@media (max-width: 768px) {
.carousel-container {
padding: 0 40px 0 15px; /* Reduced left padding since no prev button */
}
.carousel-card {
flex: 0 0 280px;
margin: 0;
}
.carousel-btn {
width: 45px;
height: 45px;
}
.carousel-btn i {
font-size: 1rem;
}
.card-content {
padding: 1.25rem;
}
.card-content h3 {
font-size: 1.1rem;
margin-bottom: 0.5rem;
}
.card-content p {
font-size: 0.9rem;
margin-bottom: 0.75rem;
}
.carousel-section {
padding: 2.5rem 0;
}
}
@media (max-width: 576px) {
.carousel-container {
padding: 0 30px 0 10px; /* Reduced left padding since no prev button */
}
.carousel-card {
flex: 0 0 260px;
margin: 0;
}
.carousel-btn {
width: 40px;
height: 40px;
}
.carousel-btn i {
font-size: 0.9rem;
}
.card-content {
padding: 1rem;
}
.card-content h3 {
font-size: 1rem;
margin-bottom: 0.5rem;
}
.card-content p {
font-size: 0.85rem;
margin-bottom: 0.75rem;
}
.carousel-section {
padding: 2rem 0;
}
}
/* ===== RESPONSIVE CAROUSEL STYLES ===== */
/* Enhanced responsive adjustments for all screen sizes */
/* Large Desktop (1200px and above) */
@media (min-width: 1200px) {
.carousel-container {
padding: 0 60px 0 20px;
}
.carousel-card {
flex: 0 0 320px;
}
.carousel-btn {
width: 50px;
height: 50px;
font-size: 1.2rem;
}
}
/* Desktop (992px - 1199px) */
@media (max-width: 1199px) and (min-width: 992px) {
.carousel-container {
padding: 0 50px 0 18px;
}
.carousel-card {
flex: 0 0 300px;
}
.carousel-btn {
width: 48px;
height: 48px;
font-size: 1.15rem;
}
}
/* Tablet Landscape (768px - 991px) */
@media (max-width: 991px) and (min-width: 768px) {
.carousel-container {
padding: 0 45px 0 16px;
}
.carousel-card {
flex: 0 0 280px;
}
.carousel-section {
padding: 60px 0;
}
.carousel-btn {
width: 45px;
height: 45px;
font-size: 1.1rem;
}
.carousel-card-content {
padding: 22px;
}
}
/* Tablet Portrait (576px - 767px) */
@media (max-width: 767px) and (min-width: 576px) {
.carousel-container {
padding: 0 40px 0 15px;
}
.carousel-card {
flex: 0 0 260px;
}
.carousel-section {
padding: 50px 0;
}
.carousel-btn {
width: 42px;
height: 42px;
font-size: 1rem;
}
.carousel-card-content {
padding: 20px;
}
.carousel-card h3 {
font-size: 1.2rem;
}
.carousel-card p {
font-size: 0.95rem;
}
}
/* Mobile Large (480px - 575px) */
@media (max-width: 575px) and (min-width: 480px) {
.carousel-container {
padding: 0 35px 0 12px;
}
.carousel-card {
flex: 0 0 240px;
}
.carousel-section {
padding: 40px 0;
}
.carousel-btn {
width: 38px;
height: 38px;
font-size: 0.95rem;
}
.carousel-card-content {
padding: 18px;
}
.carousel-card h3 {
font-size: 1.1rem;
margin-bottom: 10px;
}
.carousel-card p {
font-size: 0.9rem;
margin-bottom: 16px;
}
.carousel-card .btn {
padding: 10px 20px;
font-size: 0.9rem;
}
}
/* Mobile Medium (360px - 479px) */
@media (max-width: 479px) and (min-width: 360px) {
.carousel-container {
padding: 0 30px 0 10px;
}
.carousel-card {
flex: 0 0 220px;
}
.carousel-section {
padding: 35px 0;
}
.carousel-btn {
width: 35px;
height: 35px;
font-size: 0.9rem;
}
.carousel-card img {
height: 160px;
}
.carousel-card-content {
padding: 16px;
}
.carousel-card h3 {
font-size: 1rem;
}
.carousel-card p {
font-size: 0.85rem;
}
.carousel-card .btn {
padding: 9px 18px;
font-size: 0.85rem;
}
}
/* Mobile Small (below 360px) */
@media (max-width: 359px) {
.carousel-container {
padding: 0 25px 0 8px;
}
.carousel-card {
flex: 0 0 200px;
}
}
/* ===== OWL CAROUSEL SECTION STYLES ===== */
.owl-carousel-section {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
position: relative;
overflow: hidden;
}
.marquee-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.1);
z-index: 1;
}
.owl-carousel-section .container {
position: relative;
z-index: 2;
}
.owl-carousel-section .section-title {
color: white;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.owl-carousel-section .section-subtitle {
color: rgba(255, 255, 255, 0.9);
font-size: 1.1rem;
margin-bottom: 2rem;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.owl-carousel-container {
position: relative;
/* padding: 2rem 0; */
overflow: hidden;
width: 100%;
}
.owl-carousel {
padding: 10px 0;
}
.owl-card {
background: white;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
overflow: hidden;
transition: all 0.3s ease;
margin: 0 10px;
position: relative;
height: 400px;
}
.owl-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}
.owl-card .card-image {
height: 200px;
overflow: hidden;
position: relative;
width: 100%;
}
.marquee-card .card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.owl-card:hover .card-image img {
transform: scale(1.1);
}
.owl-card .card-content {
padding: 1.25rem;
text-align: center;
height: 200px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.owl-card .card-content h3 {
color: var(--text-primary);
font-size: 1.25rem;
margin-bottom: 0.5rem;
font-weight: 600;
flex-shrink: 0;
}
.owl-card .card-content p {
color: var(--text-secondary);
font-size: 0.9rem;
line-height: 1.4;
margin-bottom: 1rem;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.owl-card .card-content .btn {
width: 100%;
padding: 0.75rem 1.5rem;
font-weight: 500;
border-radius: 8px;
transition: all 0.3s ease;
background: var(--primary-color);
border: 2px solid var(--primary-color);
color: white;
flex-shrink: 0;
margin-top: auto;
}
.owl-card .card-content .btn:hover {
background: var(--primary-dark);
border-color: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
/* Owl Carousel responsive styles */
@media (max-width: 768px) {
.owl-carousel-section .section-title {
font-size: 2rem;
}
.owl-carousel-section .section-subtitle {
font-size: 1rem;
}
.owl-card {
height: 380px;
}
.owl-card .card-content {
padding: 1.25rem;
height: 180px;
}
.owl-card .card-content h3 {
font-size: 1.1rem;
}
.owl-card .card-content p {
font-size: 0.9rem;
}
}
@media (max-width: 576px) {
.owl-carousel-section .section-title {
font-size: 1.75rem;
}
.owl-card {
height: 360px;
}
.owl-card .card-image {
height: 160px;
}
.owl-card .card-content {
padding: 1rem;
height: 200px;
}
.owl-card .card-content h3 {
font-size: 1rem;
}
.owl-card .card-content p {
font-size: 0.85rem;
margin-bottom: 1rem;
}
.owl-card .card-content .btn {
padding: 0.6rem 1.25rem;
font-size: 0.9rem;
}
}
/* Owl Carousel animation enhancements */
@keyframes owl-card-glow {
0%, 100% {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
50% {
box-shadow: 0 15px 35px rgba(102, 126, 234, 0.3);
}
}
.owl-card {
animation: owl-card-glow 3s ease-in-out infinite;
}
.owl-card:nth-child(even) {
animation-delay: 1.5s;
}
.owl-card:nth-child(3n) {
animation-delay: 3s;
}
/* Owl Carousel Custom Navigation Styles */
.owl-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
pointer-events: none;
}
.owl-prev,
.owl-next {
position: absolute;
width: 50px;
height: 50px;
background: var(--primary-color) !important;
color: white !important;
border-radius: 50% !important;
display: flex !important;
align-items: center;
justify-content: center;
font-size: 1.2rem !important;
transition: all 0.3s ease;
pointer-events: auto;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.owl-prev:hover,
.owl-next:hover {
background: var(--primary-dark) !important;
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.owl-prev {
left: -25px;
}
.owl-next {
right: -25px;
}
/* Owl Carousel Dots Styles */
.owl-dots {
text-align: center;
margin-top: 20px;
}
.owl-dot {
width: 12px;
height: 12px;
background: rgba(255, 255, 255, 0.5) !important;
border-radius: 50%;
margin: 0 5px;
transition: all 0.3s ease;
}
.owl-dot.active {
background: var(--primary-color) !important;
transform: scale(1.2);
}
.owl-dot:hover {
background: var(--primary-color) !important;
transform: scale(1.1);
}
/* Responsive navigation adjustments */
@media (max-width: 768px) {
.owl-prev,
.owl-next {
width: 40px;
height: 40px;
font-size: 1rem;
}
.owl-prev {
left: -20px;
}
.owl-next {
right: -20px;
}
/* Responsive law card sizing */
.owl-carousel .item .law-card {
height: 380px;
}
.owl-carousel .item .law-card .law-card-header img {
width: 80px;
height: 80px;
}
.owl-carousel .item .law-card .law-card-header h3 {
font-size: 1.25rem;
}
.owl-carousel .item .law-card p {
font-size: 0.9rem;
}
}
@media (max-width: 576px) {
.owl-carousel .item .law-card {
height: 360px;
}
.owl-carousel .item .law-card .law-card-header img {
width: 70px;
height: 70px;
}
.owl-carousel .item .law-card .law-card-header h3 {
font-size: 1.1rem;
}
.owl-carousel .item .law-card p {
font-size: 0.85rem;
}
}
@media (max-width: 576px) {
.owl-prev,
.owl-next {
width: 35px;
height: 35px;
font-size: 0.9rem;
}
.owl-prev {
left: -17px;
}
.owl-next {
right: -17px;
}
}
/* ===== CAROUSEL SECTION STYLES ===== */
.carousel-section {
padding: 60px 0;
background: var(--light-color);
position: relative;
}
.carousel-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
z-index: 1;
}
.carousel-section .container {
position: relative;
z-index: 2;
}
.carousel-section .section-title {
font-size: 2.5rem;
font-weight: 700;
color: var(--text-primary);
text-align: center;
margin-bottom: 1rem;
}
.carousel-section .section-subtitle {
font-size: 1.1rem;
color: var(--text-secondary);
text-align: center;
margin-bottom: 3rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.carousel-container {
position: relative;
padding: 0 60px 0 20px;
overflow: hidden;
}
.carousel-track {
display: flex;
transition: transform 0.5s ease-in-out;
gap: 20px;
}
.carousel-card {
flex: 0 0 300px;
background: var(--light-color);
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: var(--transition);
margin: 0;
}
.carousel-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.card-image {
height: 200px;
overflow: hidden;
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.carousel-card:hover .card-image img {
transform: scale(1.05);
}
.card-content {
padding: 1.5rem;
}
.card-content h3 {
color: var(--text-primary);
font-size: 1.25rem;
margin-bottom: 0.75rem;
font-weight: 600;
}
.card-content p {
color: var(--text-secondary);
font-size: 0.95rem;
line-height: 1.5;
margin-bottom: 1rem;
}
.card-content .btn {
width: 100%;
padding: 0.75rem 1.5rem;
font-weight: 500;
border-radius: 8px;
transition: var(--transition);
}
.carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: var(--primary-color);
color: var(--light-color);
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
z-index: 10;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.carousel-btn:hover {
background: var(--primary-dark);
transform: translateY(-50%) scale(1.05);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.carousel-btn:active {
transform: translateY(-50%) scale(0.95);
}
.next-btn {
right: 0;
}
.carousel-btn i {
font-size: 1.2rem;
font-weight: 600;
}
/* Responsive carousel adjustments */
@media (max-width: 1199px) and (min-width: 992px) {
.carousel-container {
padding: 0 50px 0 18px;
}
.carousel-card {
flex: 0 0 280px;
margin: 0 10px;
}
.carousel-btn {
width: 45px;
height: 45px;
}
.carousel-btn i {
font-size: 1rem;
}
.card-content {
padding: 1.25rem;
}
.card-content h3 {
font-size: 1.1rem;
margin-bottom: 0.5rem;
}
.card-content p {
font-size: 0.9rem;
margin-bottom: 0.75rem;
}
.carousel-section {
padding: 2.5rem 0;
}
}
@media (max-width: 576px) {
.carousel-container {
padding: 0 30px 0 10px;
}
.carousel-card {
flex: 0 0 260px;
margin: 0 8px;
}
.carousel-btn {
width: 40px;
height: 40px;
}
.carousel-btn i {
font-size: 0.9rem;
}
.card-content {
padding: 1rem;
}
.card-content h3 {
font-size: 1rem;
margin-bottom: 0.5rem;
}
.card-content p {
font-size: 0.85rem;
margin-bottom: 0.75rem;
}
.carousel-section {
padding: 2rem 0;
}
}
/* Enhanced responsive adjustments for all screen sizes */
@media (min-width: 1200px) {
.carousel-container {
padding: 0 60px 0 20px;
}
.carousel-card {
flex: 0 0 320px;
}
.carousel-btn {
width: 50px;
height: 50px;
font-size: 1.2rem;
}
}
@media (max-width: 1199px) and (min-width: 992px) {
.carousel-container {
padding: 0 50px 0 18px;
}
.carousel-card {
flex: 0 0 300px;
}
.carousel-btn {
width: 48px;
height: 48px;
font-size: 1.15rem;
}
}
@media (max-width: 991px) and (min-width: 768px) {
.carousel-container {
padding: 0 45px 0 16px;
}
.carousel-card {
flex: 0 0 280px;
}
.carousel-section {
padding: 60px 0;
}
.carousel-btn {
width: 45px;
height: 45px;
font-size: 1.1rem;
}
.carousel-card-content {
padding: 22px;
}
}
@media (max-width: 767px) and (min-width: 576px) {
.carousel-container {
padding: 0 40px 0 15px;
}
.carousel-card {
flex: 0 0 260px;
}
.carousel-section {
padding: 50px 0;
}
.carousel-btn {
width: 42px;
height: 42px;
font-size: 1rem;
}
.carousel-card-content {
padding: 20px;
}
.carousel-card h3 {
font-size: 1.2rem;
}
.carousel-card p {
font-size: 0.95rem;
}
}
@media (max-width: 575px) and (min-width: 480px) {
.carousel-container {
padding: 0 35px 0 12px;
}
.carousel-card {
flex: 0 0 240px;
}
.carousel-section {
padding: 40px 0;
}
.carousel-btn {
width: 38px;
height: 38px;
font-size: 0.95rem;
}
.carousel-card-content {
padding: 18px;
}
.carousel-card h3 {
font-size: 1.1rem;
margin-bottom: 10px;
}
.carousel-card p {
font-size: 0.9rem;
margin-bottom: 16px;
}
.carousel-card .btn {
padding: 10px 20px;
font-size: 0.9rem;
}
}
@media (max-width: 479px) and (min-width: 360px) {
.carousel-container {
padding: 0 30px 0 10px;
}
.carousel-card {
flex: 0 0 220px;
}
.carousel-section {
padding: 35px 0;
}
.carousel-btn {
width: 35px;
height: 35px;
font-size: 0.9rem;
}
.carousel-card img {
height: 160px;
}
.carousel-card-content {
padding: 16px;
}
.carousel-card h3 {
font-size: 1rem;
}
.carousel-card p {
font-size: 0.85rem;
}
.carousel-card .btn {
padding: 9px 18px;
font-size: 0.85rem;
}
}
@media (max-width: 359px) {
.carousel-container {
padding: 0 25px 0 8px;
}
.carousel-card {
flex: 0 0 200px;
}
}
/* Landscape orientation adjustments for mobile */
@media (max-height: 500px) and (orientation: landscape) {
.carousel-section {
padding: 30px 0;
}
.carousel-card img {
height: 120px;
}
.carousel-card-content {
padding: 14px;
}
.carousel-card h3 {
font-size: 1rem;
margin-bottom: 8px;
}
.carousel-card p {
font-size: 0.85rem;
margin-bottom: 12px;
}
}
/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.carousel-btn {
border: 0.5px solid rgba(255, 255, 255, 0.3);
}
}
/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
.carousel-btn {
min-width: 44px;
min-height: 44px;
}
.carousel-card:hover {
transform: none;
}
.carousel-card:active {
transform: scale(0.98);
}
}
/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
.carousel-track {
transition: transform 0.2s ease;
}
.carousel-card {
transition: none;
}
.carousel-btn {
transition: none;
}
}
/* ===== PAGE HEADER SECTION STYLES ===== */
/* ===== PAGE HEADER SECTION STYLES ===== */
.page-header-section {
background: linear-gradient(135deg, #fdf2f8 0%, #f0f9ff 50%, #f0fdf4 100%);
padding: 80px 0 60px;
margin-top: 76px;
text-align: center;
}
.page-header-title {
font-size: 3.5rem;
font-weight: 800;
color: #000;
line-height: 1.2;
margin-bottom: 1.5rem;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.title-icon {
display: inline-block;
font-size: 2.5rem;
margin: 0 0.5rem;
vertical-align: middle;
}
.page-breadcrumb {
margin-bottom: 0;
}
.page-breadcrumb .breadcrumb {
background: transparent;
padding: 0;
margin: 0;
}
.page-breadcrumb .breadcrumb-item {
font-size: 1.1rem;
color: #374151;
font-weight: 500;
}
.page-breadcrumb .breadcrumb-item a {
color: #374151;
text-decoration: none;
transition: color 0.3s ease;
}
.page-breadcrumb .breadcrumb-item a:hover {
color: #000;
}
.page-breadcrumb .breadcrumb-item.active {
color: #000;
font-weight: 600;
}
.page-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
content: ">";
color: #374151;
font-weight: 600;
margin: 0 0.75rem;
}
.page-breadcrumb .fas.fa-home {
color: #6b7280;
font-size: 1rem;
}
/* Responsive adjustments for page header */
@media (max-width: 768px) {
.page-header-section {
padding: 60px 0 40px;
}
.page-header-title {
font-size: 2.5rem;
}
.title-icon {
font-size: 2rem;
}
.page-breadcrumb .breadcrumb-item {
font-size: 1rem;
}
}
@media (max-width: 576px) {
.page-header-title {
font-size: 2rem;
}
.title-icon {
font-size: 1.5rem;
}
.page-breadcrumb .breadcrumb-item {
font-size: 0.9rem;
}
}
/* ===== RELATED POSTS SECTION STYLES ===== */
.related-posts-section {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}
/* Major Legal Frameworks Section - Uniform Card Sizing */
#legal-frameworks .owl-carousel .item {
height: auto;
}
#legal-frameworks .related-post-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
overflow: hidden;
transition: all 0.3s ease;
height: 500px; /* Fixed height for all cards */
display: flex;
flex-direction: column;
width: 100%;
}
#legal-frameworks .related-post-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}
#legal-frameworks .post-image {
position: relative;
overflow: hidden;
height: 200px; /* Fixed image height */
flex-shrink: 0;
}
#legal-frameworks .post-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
#legal-frameworks .related-post-card:hover .post-image img {
transform: scale(1.05);
}
#legal-frameworks .post-category {
position: absolute;
top: 12px;
left: 12px;
background: rgba(0, 123, 255, 0.9);
color: white;
padding: 3px 10px;
border-radius: 18px;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.4px;
}
#legal-frameworks .post-content {
padding: 20px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
#legal-frameworks .post-title {
font-size: 1.1rem;
font-weight: 700;
color: #1a202c;
margin-bottom: 12px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
flex-shrink: 0;
}
#legal-frameworks .post-excerpt {
color: #4a5568;
font-size: 0.85rem;
line-height: 1.5;
margin-bottom: 16px;
/* flex: 1; */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
#legal-frameworks .post-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
font-size: 0.8rem;
color: #718096;
flex-shrink: 0;
}
#legal-frameworks .post-date, #legal-frameworks .post-read-time {
display: flex;
align-items: center;
}
#legal-frameworks .post-date i, #legal-frameworks .post-read-time i {
margin-right: 4px;
font-size: 0.75rem;
}
#legal-frameworks .related-post-card .btn {
align-self: flex-start;
font-size: 0.85rem;
padding: 8px 16px;
border-radius: 6px;
font-weight: 600;
transition: all 0.3s ease;
flex-shrink: 0;
/* margin-top: auto; */
}
#legal-frameworks .related-post-card .btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}
.related-post-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
overflow: hidden;
transition: all 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
}
.related-post-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}
.post-image {
position: relative;
overflow: hidden;
}
.post-image img {
width: 100%;
height: 200px;
object-fit: cover;
transition: transform 0.3s ease;
}
.related-post-card:hover .post-image img {
transform: scale(1.05);
}
.post-category {
position: absolute;
top: 12px;
left: 12px;
background: rgba(0, 123, 255, 0.9);
color: white;
padding: 3px 10px;
border-radius: 18px;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.post-content {
padding: 20px;
flex: 1;
display: flex;
flex-direction: column;
}
.post-title {
font-size: 1rem;
font-weight: 700;
color: #1a202c;
margin-bottom: 12px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.post-excerpt {
color: #4a5568;
font-size: 0.85rem;
line-height: 1.5;
margin-bottom: 16px;
/* flex: 1; */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.post-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
font-size: 0.8rem;
color: #718096;
}
.post-date, .post-read-time {
display: flex;
align-items: center;
}
.post-date i, .post-read-time i {
margin-right: 4px;
font-size: 0.75rem;
}
.related-post-card .btn {
align-self: flex-start;
font-size: 0.85rem;
padding: 8px 16px;
border-radius: 6px;
font-weight: 600;
transition: all 0.3s ease;
}
.related-post-card .btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}
/* Responsive adjustments for related posts */
@media (max-width: 1199px) {
.post-title {
font-size: 0.9rem;
}
.post-excerpt {
font-size: 0.8rem;
}
/* Major Legal Frameworks responsive adjustments */
#legal-frameworks .related-post-card {
height: 480px;
}
}
@media (max-width: 991px) {
.related-post-card {
margin-bottom: 20px;
}
.post-image img {
height: 180px;
}
/* Major Legal Frameworks responsive adjustments */
#legal-frameworks .related-post-card {
height: 460px;
}
#legal-frameworks .post-image {
height: 180px;
}
}
@media (max-width: 767px) {
.related-posts-section {
padding: 40px 0;
}
.post-image img {
height: 160px;
}
.post-content {
padding: 16px;
}
.post-title {
font-size: 0.9rem;
}
.post-excerpt {
font-size: 0.75rem;
-webkit-line-clamp: 2;
}
.post-meta {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
/* Major Legal Frameworks responsive adjustments */
#legal-frameworks .related-post-card {
height: 440px;
}
#legal-frameworks .post-image {
height: 160px;
}
#legal-frameworks .post-content {
padding: 16px;
}
}
@media (max-width: 575px) {
.post-image img {
height: 140px;
}
.post-content {
padding: 14px;
}
.post-title {
font-size: 0.9rem;
}
.post-excerpt {
font-size: 0.75rem;
}
.related-post-card .btn {
font-size: 0.8rem;
padding: 6px 12px;
}
/* Major Legal Frameworks responsive adjustments */
#legal-frameworks .related-post-card {
height: 420px;
}
#legal-frameworks .post-image {
height: 140px;
}
#legal-frameworks .post-content {
padding: 14px;
}
}
/* ===== MOST POPULAR COURSES SECTION ===== */
.popular-courses-section {
background: linear-gradient(135deg, #ffe5e5 0%, #e0f7fa 100%);
color: var(--text-primary);
position: relative;
overflow: hidden;
}
.popular-courses-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, rgba(255, 229, 229, 0.3) 0%, rgba(224, 247, 250, 0.3) 100%);
pointer-events: none;
}
.popular-courses-section .section-title {
color: var(--text-primary);
font-weight: 700;
font-size: 2.5rem;
margin-bottom: 1rem;
}
.course-card {
/* background: var(--light-color); */
/* border-radius: 16px; */
/* padding: 18px; */
text-align: left;
box-shadow: var(--shadow-md);
transition: var(--transition);
height: 90px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
position: relative;
z-index: 2;
gap: 16px;
}
.course-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
}
.course-card-highlighted {
background: #20c997;
color: var(--light-color);
transform: scale(1.05);
}
.course-card-highlighted:hover {
transform: scale(1.05) translateY(-8px);
}
.course-icon {
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
transition: var(--transition);
flex-shrink: 0;
background: #e8f5f5;
color: #20c997;
}
.course-card:not(.course-card-highlighted) .course-icon {
background: #e8f5f5;
color: #20c997;
}
.course-card-highlighted .course-icon {
background: #1abc9c;
color: var(--light-color);
}
.course-card:hover .course-icon {
transform: scale(1.1);
}
.course-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}
.course-title {
font-size: 1rem;
font-weight: 700;
margin-bottom: 3px;
color: inherit;
line-height: 1.2;
}
.course-count {
font-size: 0.8rem;
font-weight: 500;
margin: 0;
opacity: 0.8;
line-height: 1.2;
}
.course-card:not(.course-card-highlighted) .course-title {
color: var(--text-primary);
}
.course-card:not(.course-card-highlighted) .course-count {
color: var(--text-muted);
}
/* Responsive adjustments for Most Popular Courses */
@media (max-width: 1199px) {
.course-card {
padding: 16px;
height: 85px;
}
.course-icon {
width: 45px;
height: 45px;
font-size: 1.2rem;
}
.course-title {
font-size: 0.95rem;
}
}
@media (max-width: 991px) {
.course-card {
padding: 14px;
height: 80px;
}
.course-icon {
width: 42px;
height: 42px;
font-size: 1.1rem;
}
.course-title {
font-size: 0.9rem;
}
.course-count {
font-size: 0.75rem;
}
}
@media (max-width: 767px) {
.popular-courses-section .section-title {
font-size: 2rem;
}
.course-card {
padding: 12px;
margin-bottom: 16px;
height: 75px;
}
.course-icon {
width: 40px;
height: 40px;
font-size: 1rem;
}
.course-title {
font-size: 0.85rem;
}
.course-count {
font-size: 0.7rem;
}
}
@media (max-width: 575px) {
.popular-courses-section .section-title {
font-size: 1.75rem;
}
.course-card {
padding: 10px;
height: 70px;
}
.course-icon {
width: 38px;
height: 38px;
font-size: 0.9rem;
}
.course-title {
font-size: 0.8rem;
}
.course-count {
font-size: 0.65rem;
}
}
/* ===== COURSES PAGE SPECIFIC STYLES ===== */
/* Unique classes to prevent conflicts with other sections */
.courses-page .course-card {
margin-bottom: 0;
height: auto;
min-height: 400px;
margin-right: 0;
}
/* Ensure proper spacing in the grid */
.courses-page .row {
margin-left: 0;
margin-right: 0;
justify-content: center;
}
.courses-page .col-lg-4,
.courses-page .col-md-6,
.courses-page .col-sm-12 {
padding-left: 0;
padding-right: 0;
}
.courses-page .course-card-inner {
background: transparent;
border-radius: 0;
overflow: hidden;
box-shadow: none;
transition: all 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
border: none;
}
.courses-page .course-image {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
border-radius: 0;
}
.courses-page .course-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.courses-page .course-badge {
position: absolute;
top: 12px;
left: 12px;
background: var(--primary-color);
color: white;
padding: 4px 12px;
border-radius: 0;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.courses-page .course-content {
padding: 12px;
flex: 1;
display: flex;
flex-direction: column;
background: transparent;
}
.courses-page .course-title {
font-size: 18px;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 12px;
line-height: 1.4;
}
.courses-page .course-details {
display: flex;
flex-direction: row;
gap: 8px;
margin-bottom: 15px;
flex: 1;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
}
.courses-page .course-details span {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 8px;
background: rgba(0, 0, 0, 0.05);
border-radius: 0;
font-size: 13px;
color: var(--text-muted);
font-weight: 500;
}
.courses-page .course-action {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 10px;
}
.courses-page .learn-free {
font-size: 14px;
color: var(--primary-color);
font-weight: 600;
text-align: center;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.courses-page .btn {
width: 100%;
padding: 12px 24px;
border: none;
border-radius: 0;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.3s ease;
}
.courses-page .btn-primary {
background: var(--primary-color);
color: white;
}
.courses-page .btn-primary:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Desktop sizing adjustments removed per revert */
/* Responsive Design for All Screen Sizes */
@media (max-width: 1199.98px) {
.courses-page .course-card {
min-height: 380px;
}
.courses-page .course-image {
height: 180px;
}
.courses-page .course-content {
padding: 16px;
}
.courses-page .course-title {
font-size: 16px;
margin-bottom: 10px;
}
}
@media (max-width: 991.98px) {
.courses-page .course-card {
min-height: 360px;
}
.courses-page .course-image {
height: 160px;
}
.courses-page .course-content {
padding: 14px;
}
.courses-page .course-title {
font-size: 15px;
margin-bottom: 8px;
}
.courses-page .course-details {
gap: 6px;
margin-bottom: 12px;
}
.courses-page .course-details span {
padding: 3px 6px;
font-size: 12px;
}
.courses-page .learn-free {
font-size: 13px;
margin-bottom: 8px;
}
.courses-page .btn {
padding: 10px 20px;
font-size: 14px;
}
}
@media (max-width: 767.98px) {
.courses-page .course-card {
min-height: 340px;
margin-bottom: 20px;
}
.courses-page .course-image {
height: 140px;
}
.courses-page .course-content {
padding: 12px;
}
.courses-page .course-title {
font-size: 14px;
margin-bottom: 6px;
}
.courses-page .course-details {
gap: 4px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.courses-page .course-details span {
padding: 2px 4px;
font-size: 10px;
flex-shrink: 0;
}
.courses-page .course-details span i {
font-size: 11px;
}
.courses-page .learn-free {
font-size: 12px;
margin-bottom: 6px;
}
.courses-page .btn {
padding: 8px 16px;
font-size: 13px;
}
}
@media (max-width: 575.98px) {
.courses-page .course-card {
min-height: 320px;
margin-bottom: 16px;
}
.courses-page .course-image {
height: 120px;
}
.courses-page .course-content {
padding: 10px;
}
.courses-page .course-title {
font-size: 13px;
margin-bottom: 5px;
}
.courses-page .course-details {
gap: 3px;
margin-bottom: 8px;
flex-wrap: wrap;
}
.courses-page .course-details span {
padding: 1px 3px;
font-size: 9px;
flex-shrink: 0;
}
.courses-page .course-details span i {
font-size: 10px;
}
.courses-page .learn-free {
font-size: 11px;
margin-bottom: 5px;
}
.courses-page .btn {
padding: 6px 12px;
font-size: 12px;
}
}
@media (max-width: 480px) {
.courses-page .course-card {
min-height: 300px;
margin-bottom: 12px;
}
.courses-page .course-image {
height: 100px;
}
.courses-page .course-content {
padding: 8px;
}
.courses-page .course-title {
font-size: 12px;
margin-bottom: 4px;
}
.courses-page .course-details {
gap: 2px;
margin-bottom: 6px;
flex-wrap: wrap;
}
.courses-page .course-details span {
padding: 1px 2px;
font-size: 8px;
flex-shrink: 0;
}
.courses-page .course-details span i {
font-size: 9px;
}
.courses-page .learn-free {
font-size: 10px;
margin-bottom: 4px;
}
.courses-page .btn {
padding: 5px 10px;
font-size: 11px;
}
}
/* Landscape orientation for mobile devices */
@media (max-width: 767.98px) and (orientation: landscape) {
.courses-page .course-card {
min-height: 280px;
}
.courses-page .course-image {
height: 100px;
}
.courses-page .course-content {
padding: 8px;
}
.courses-page .course-title {
font-size: 12px;
margin-bottom: 4px;
}
.courses-page .course-details {
gap: 3px;
margin-bottom: 6px;
}
.courses-page .course-details span {
padding: 1px 3px;
font-size: 9px;
}
.courses-page .learn-free {
font-size: 10px;
margin-bottom: 4px;
}
.courses-page .btn {
padding: 5px 10px;
font-size: 11px;
}
}
/* Extra small devices */
@media (max-width: 360px) {
.courses-page .course-card {
min-height: 280px;
margin-bottom: 10px;
}
.courses-page .course-image {
height: 80px;
}
.courses-page .course-content {
padding: 6px;
}
.courses-page .course-title {
font-size: 11px;
margin-bottom: 3px;
}
.courses-page .course-details {
gap: 2px;
margin-bottom: 4px;
}
.courses-page .course-details span {
padding: 1px 2px;
font-size: 8px;
}
.courses-page .course-details span i {
font-size: 9px;
}
.courses-page .learn-free {
font-size: 9px;
margin-bottom: 3px;
}
.courses-page .btn {
padding: 4px 8px;
font-size: 10px;
}
}
/* Course Controls Section */
.courses-page .course-controls-section {
background: var(--section-bg);
/* padding: 40px 0; */
margin-top: 79px;
}
.courses-page .course-type-tabs {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.courses-page .tab-btn {
padding: 10px 20px;
border: 2px solid var(--primary-color);
background: transparent;
color: var(--primary-color);
border-radius: 25px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.courses-page .tab-btn:hover,
.courses-page .tab-btn.active {
background: var(--primary-color);
color: white;
}
.courses-page .search-container {
max-width: 300px;
}
.courses-page .search-input {
border: 2px solid var(--border-color);
border-radius: 25px;
/* padding: 10px 20px; */
width: 100%;
transition: border-color 0.3s ease;
}
.courses-page .search-input:focus {
outline: none;
border-color: var(--primary-color);
}
.courses-page .language-filters {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 20px;
}
.courses-page .language-filter-btn {
padding: 8px 16px;
border: 1px solid var(--border-color);
background: white;
border-radius: 20px;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
}
.courses-page .language-filter-btn:hover,
.courses-page .language-filter-btn.active {
border-color: var(--primary-color);
color: var(--primary-color);
}
/* Course Grid Section */
.courses-page .course-grid-section {
padding: 25px 0;
background: white;
}
/* .courses-page .course-grid-section .row {
margin-top: 30px;
} */
/* Hide view toggle buttons on all screen sizes */
.cp-view-toggle {
display: none !important;
}
/* Additional responsive adjustments */
@media (max-width: 575.98px) {
.courses-page .course-controls-section {
padding: 30px 0;
}
.courses-page .course-grid-section {
padding: 40px 0;
}
/* ===== COURSES PAGE COMPACT STYLES - Apply to all course pages ===== */
/* Section padding reduced */
#courses {
padding-top: 2rem !important;
padding-bottom: 2rem !important;
}
/* Filter card compact */
.cp-filter-card {
margin-bottom: 1rem !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}
.cp-filter-card .card-header h5 {
font-size: 1rem !important;
padding: 0.6rem !important;
}
.cp-filter-card .card-body {
padding: 0.75rem !important;
}
.cp-filter-card .mb-3 {
margin-bottom: 0.75rem !important;
}
.cp-filter-card .form-label {
font-size: 0.8rem !important;
margin-bottom: 0.4rem !important;
}
.cp-filter-card .form-control,
.cp-filter-card .form-select {
font-size: 0.85rem !important;
padding: 0.4rem 0.6rem !important;
height: auto !important;
}
.cp-filter-card .btn {
font-size: 0.8rem !important;
padding: 0.4rem 0.8rem !important;
}
.cp-filter-card .gap-2 {
gap: 0.5rem !important;
}
.cp-filter-card .form-check {
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
margin-bottom: 0 !important;
}
.cp-filter-card .form-check-input {
margin-top: 0 !important;
margin-right: 0 !important;
flex-shrink: 0 !important;
width: 16px !important;
height: 16px !important;
}
.cp-filter-card .form-check-label {
font-size: 0.85rem !important;
margin-bottom: 0 !important;
cursor: pointer !important;
}
/* Results header compact */
.cp-results-header {
margin-bottom: 1rem !important;
flex-direction: column;
align-items: flex-start !important;
gap: 0.75rem;
}
.cp-results-header h2 {
font-size: 1.25rem !important;
margin-bottom: 0.25rem !important;
}
.cp-results-header p {
font-size: 0.8rem !important;
margin-bottom: 0 !important;
}
.cp-view-toggle {
align-self: flex-start;
}
.cp-view-toggle .btn {
font-size: 0.75rem !important;
padding: 0.35rem 0.5rem !important;
min-width: 36px;
}
/* Course cards ultra compact */
.cp-course-card {
margin-bottom: 0.75rem !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.08) !important;
}
.cp-course-card .card-img-top {
height: 120px !important;
}
.cp-course-card .card-body {
padding: 0.6rem !important;
}
.cp-course-card .card-title {
font-size: 0.9rem !important;
line-height: 1.2 !important;
margin-bottom: 0.4rem !important;
height: 2.16em !important;
}
.cp-course-card .card-text {
font-size: 0.75rem !important;
margin-bottom: 0.5rem !important;
-webkit-line-clamp: 2 !important;
height: 2.4em !important;
}
.cp-course-card .badge {
font-size: 0.65rem !important;
padding: 0.25rem 0.45rem !important;
}
.cp-course-card .btn {
font-size: 0.7rem !important;
padding: 0.3rem 0.45rem !important;
}
.cp-course-card .small {
font-size: 0.7rem !important;
}
.cp-course-card .d-grid {
margin-top: 0.5rem !important;
}
.cp-course-card .d-grid.gap-2 {
gap: 0.4rem !important;
}
.cp-course-card .mb-3 {
margin-bottom: 0.5rem !important;
}
/* Icons smaller */
.cp-icon-small {
font-size: 0.8rem !important;
}
.cp-icon-medium {
font-size: 1rem !important;
}
/* Hero section compact */
.hero-section {
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important;
margin-top: 60px !important;
}
.cp-hero-title {
font-size: 1.35rem !important;
margin-bottom: 0.75rem !important;
}
.cp-hero-subtitle {
font-size: 0.9rem !important;
margin-bottom: 0.75rem !important;
}
.cp-hero-buttons .btn {
font-size: 0.8rem !important;
padding: 0.4rem 0.75rem !important;
}
.cp-hero-buttons .btn-lg {
font-size: 0.8rem !important;
padding: 0.4rem 0.75rem !important;
}
/* Mobile-specific course card improvements */
.courses-page .course-card {
margin-bottom: 20px;
padding: 0 10px;
}
.courses-page .course-card-inner {
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.courses-page .course-image {
height: 180px;
border-radius: 16px 16px 0 0;
}
.courses-page .course-content {
padding: 20px;
}
.courses-page .course-title {
font-size: 18px;
margin-bottom: 15px;
line-height: 1.4;
text-align: center;
}
.courses-page .course-details {
/* flex-direction: column; */
gap: 8px;
margin-bottom: 20px;
align-items: center;
}
.courses-page .course-details span {
padding: 6px 12px;
font-size: 13px;
border-radius: 20px;
background: #f8f9fa;
border: 1px solid #e9ecef;
min-width: 120px;
justify-content: center;
}
.courses-page .course-action {
text-align: center;
}
.courses-page .learn-free {
font-size: 15px;
margin-bottom: 15px;
font-weight: 700;
}
.courses-page .btn {
padding: 12px 24px;
font-size: 16px;
font-weight: 600;
border-radius: 25px;
min-height: 48px;
}
/* Course controls mobile improvements */
.courses-page .course-controls-section {
padding: 20px 0;
margin-top: 70px;
}
.courses-page .course-type-tabs {
justify-content: center;
gap: 8px;
margin-bottom: 20px;
}
.courses-page .tab-btn {
padding: 8px 16px;
font-size: 14px;
border-radius: 20px;
min-width: 100px;
}
.courses-page .search-container {
max-width: 100%;
margin: 0 auto;
}
.courses-page .search-input {
padding: 12px 20px;
font-size: 16px;
border-radius: 25px;
border: 2px solid var(--border-color);
}
/* Language filters mobile improvements */
.courses-page .language-filters-section {
padding: 20px 0;
background: white;
overflow: hidden;
}
.courses-page .filter-label {
text-align: center;
font-size: 16px;
font-weight: 600;
margin-bottom: 15px;
color: var(--text-primary);
}
.courses-page .language-filters {
justify-content: flex-start;
gap: 10px;
padding: 0 15px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
flex-wrap: nowrap;
align-items: center;
scroll-behavior: smooth;
position: relative;
}
.courses-page .language-filters::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
.courses-page .language-filter-btn {
padding: 8px 16px;
font-size: 13px;
border-radius: 20px;
border: 1px solid #e0e0e0;
background: white;
min-width: 70px;
text-align: center;
white-space: nowrap;
color: #495057;
font-weight: 500;
flex-shrink: 0;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.courses-page .language-filter-btn.active {
background: #d4edda;
color: #28a745;
border-color: #28a745;
font-weight: 600;
}
.courses-page .filter-nav-btn {
width: 36px;
height: 36px;
background: #f8f9fa;
border: 1px solid #e0e0e0;
border-radius: 50%;
flex-shrink: 0;
position: relative;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.courses-page .filter-nav-btn i {
font-size: 12px;
color: #6c757d;
}
.courses-page .filter-nav-btn:hover {
background: #e9ecef;
border-color: #adb5bd;
color: #495057;
}
.courses-page .filter-nav-btn:active {
transform: scale(0.95);
}
/* Course grid mobile improvements */
.courses-page .course-grid-section {
padding: 30px 0;
background: #f8f9fa;
}
.courses-page .course-grid-section .container {
padding: 0 15px;
}
.courses-page .course-grid-section .row {
margin: 0;
}
.courses-page .course-grid-section .col-sm-6 {
padding: 0 5px;
}
}
/* Extra small devices */
@media (max-width: 480px) {
.courses-page .course-card {
padding: 0 5px;
}
.courses-page .course-content {
padding: 15px 7px;
}
.courses-page .course-title {
font-size: 16px;
margin-bottom: 12px;
}
.courses-page .course-details span {
padding: 5px 10px;
font-size: 12px;
min-width: 100px;
}
.courses-page .course-type-tabs {
gap: 6px;
}
.courses-page .tab-btn {
padding: 6px 12px;
font-size: 12px;
min-width: 90px;
}
.courses-page .language-filter-btn {
padding: 6px 12px;
font-size: 12px;
min-width: 70px;
}
.courses-page .filter-nav-btn {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.courses-page .filter-nav-btn i {
font-size: 11px;
}
.courses-page .language-filters {
gap: 8px;
padding: 0 10px;
}
.courses-page .filter-nav-btn:hover {
background: #e9ecef;
border-color: #adb5bd;
}
.courses-page .search-input {
padding: 10px 33px;
font-size: 15px;
}
}
/* Landscape mobile orientation */
@media (max-width: 767.98px) and (orientation: landscape) {
.courses-page .course-controls-section {
margin-top: 60px;
padding: 15px 0;
}
.courses-page .course-type-tabs {
margin-bottom: 15px;
}
.courses-page .language-filters-section {
padding: 15px 0;
}
.courses-page .course-grid-section {
padding: 20px 0;
}
}
/* Additional mobile improvements for better visual hierarchy */
@media (max-width: 767.98px) {
.courses-page .course-card-inner {
position: relative;
overflow: hidden;
}
.courses-page .course-badge {
top: 10px;
left: 10px;
padding: 6px 14px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.courses-page .course-details {
/* background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); */
/* border-radius: 12px; */
/* padding: 15px; */
margin: 0 10px 15px 10px;
justify-content: center;
/* box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05); */
}
.courses-page .course-details span {
background: white;
border: 1px solid #e9ecef;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
transition: all 0.2s ease;
}
.courses-page .course-details span:hover {
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.courses-page .course-action {
/* background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); */
/* border-radius: 12px; */
/* padding: 20px; */
margin: 0 10px;
/* box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05); */
}
.courses-page .learn-free {
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
color: white;
padding: 8px 16px;
border-radius: 20px;
display: inline-block;
font-size: 14px;
font-weight: 600;
margin-bottom: 15px;
box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}
.courses-page .btn {
/* background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%); */
border: none;
box-shadow: 0 4px 15px rgba(0, 188, 212, 0.3);
transition: all 0.3s ease;
}
.courses-page .btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 188, 212, 0.4);
}
/* Improved course controls layout */
.courses-page .course-controls-section {
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
border-bottom: 1px solid #e9ecef;
}
.courses-page .course-type-tabs {
background: white;
padding: 5px;
border-radius: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
margin: 0 15px 20px 15px;
}
.courses-page .tab-btn {
background: #f8f9fa;
border: 1px solid #e9ecef;
color: var(--text-secondary);
transition: all 0.3s ease;
}
.courses-page .tab-btn.active {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
color: white;
border-color: var(--primary-color);
box-shadow: 0 2px 8px rgba(0, 188, 212, 0.3);
}
.courses-page .search-container {
/* background: white;
padding: 15px;
border-radius: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); */
margin: 0 15px;
}
.courses-page .search-input {
background: #f8f9fa;
border: 1px solid #e9ecef;
transition: all 0.3s ease;
}
.courses-page .search-input:focus {
background: white;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.1);
}
/* Improved language filters */
.courses-page .language-filters-section {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border-bottom: 1px solid #e9ecef;
}
.courses-page .filter-label {
background: white;
padding: 10px 20px;
border-radius: 20px;
display: inline-block;
margin: 0 auto 20px auto;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.courses-page .language-filters {
background: white;
padding: 15px;
border-radius: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
margin: 0 15px;
}
.courses-page .language-filter-btn {
transition: all 0.3s ease;
}
.courses-page .language-filter-btn:hover {
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.courses-page .language-filter-btn.active {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
color: white;
border-color: var(--primary-color);
box-shadow: 0 2px 8px rgba(0, 188, 212, 0.3);
}
/* Improved course grid */
.courses-page .course-grid-section {
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}
.courses-page .course-card {
transition: all 0.3s ease;
}
.courses-page .course-card:hover {
transform: translateY(-3px);
}
.courses-page .course-card-inner {
transition: all 0.3s ease;
width: -webkit-fill-available;
}
.courses-page .course-card:hover .course-card-inner {
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
}
/* Homepage Popular Courses Section - Responsive Design */
.homepage-popular-courses-section {
background: linear-gradient(135deg, #f8faff 0%, #ffffff 100%);
padding: 60px 0;
}
.homepage-popular-courses-title {
font-size: 2.5rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 40px;
text-align: center;
}
.homepage-popular-courses-grid {
justify-content: center;
align-items: stretch;
}
.homepage-popular-course-card {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
height: 100%;
min-height: 120px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.homepage-popular-course-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(116, 185, 255, 0.2);
border-color: #74b9ff;
}
.homepage-popular-course-content {
text-align: center;
padding: 20px 15px;
width: 100%;
}
.homepage-popular-course-title {
font-size: 1.1rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 8px;
line-height: 1.3;
word-wrap: break-word;
}
.homepage-popular-course-count {
font-size: 0.9rem;
color: #6c757d;
font-weight: 500;
margin: 0;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Extra Large Screens (1400px and up) */
@media (min-width: 1400px) {
.homepage-popular-courses-title {
font-size: 2.8rem;
}
.homepage-popular-course-card {
min-height: 140px;
}
.homepage-popular-course-content {
padding: 25px 20px;
}
.homepage-popular-course-title {
font-size: 1.2rem;
}
.homepage-popular-course-count {
font-size: 1rem;
}
}
/* Large Screens (1200px to 1399px) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
.homepage-popular-course-card {
min-height: 130px;
}
.homepage-popular-course-content {
padding: 22px 18px;
}
.homepage-popular-course-title {
font-size: 1.15rem;
}
}
/* Medium Screens (992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
.homepage-popular-courses-title {
font-size: 2.2rem;
}
.homepage-popular-course-card {
min-height: 125px;
}
.homepage-popular-course-content {
padding: 20px 16px;
}
.homepage-popular-course-title {
font-size: 1.1rem;
}
.homepage-popular-course-count {
font-size: 0.85rem;
}
}
/* Small Screens (768px to 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
.homepage-popular-courses-title {
font-size: 2rem;
margin-bottom: 30px;
}
.homepage-popular-course-card {
min-height: 110px;
}
.homepage-popular-course-content {
padding: 18px 14px;
}
.homepage-popular-course-title {
font-size: 1rem;
margin-bottom: 6px;
}
.homepage-popular-course-count {
font-size: 0.8rem;
}
}
/* Extra Small Screens (576px to 767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
.homepage-popular-courses-section {
padding: 40px 0;
}
.homepage-popular-courses-title {
font-size: 1.8rem;
margin-bottom: 25px;
}
.homepage-popular-course-card {
min-height: 100px;
margin-bottom: 15px;
}
.homepage-popular-course-content {
padding: 16px 12px;
}
.homepage-popular-course-title {
font-size: 0.95rem;
margin-bottom: 5px;
}
.homepage-popular-course-count {
font-size: 0.75rem;
}
}
/* Mobile Screens (up to 575px) */
@media (max-width: 575.98px) {
.homepage-popular-courses-section {
padding: 30px 0;
}
.homepage-popular-courses-title {
font-size: 1.6rem;
margin-bottom: 20px;
}
.homepage-popular-course-card {
min-height: 90px;
margin-bottom: 12px;
}
.homepage-popular-course-content {
padding: 14px 10px;
}
.homepage-popular-course-title {
font-size: 0.9rem;
margin-bottom: 4px;
line-height: 1.2;
}
.homepage-popular-course-count {
font-size: 0.7rem;
letter-spacing: 0.3px;
}
.homepage-popular-courses-grid {
margin: 0 -5px;
}
.homepage-popular-courses-grid .col-6 {
padding-left: 5px;
padding-right: 5px;
}
}
/* Very Small Mobile Screens (up to 375px) */
@media (max-width: 375px) {
.homepage-popular-courses-title {
font-size: 1.4rem;
}
.homepage-popular-course-card {
min-height: 80px;
}
.homepage-popular-course-content {
padding: 12px 8px;
}
.homepage-popular-course-title {
font-size: 0.85rem;
}
.homepage-popular-course-count {
font-size: 0.65rem;
}
}
/* Landscape Mobile Orientation */
@media (max-width: 767.98px) and (orientation: landscape) {
.homepage-popular-courses-section {
padding: 25px 0;
}
.homepage-popular-course-card {
min-height: 85px;
}
.homepage-popular-course-content {
padding: 12px 10px;
}
}
/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.homepage-popular-course-card {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.homepage-popular-course-card:hover {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}
}
/* Reduced Motion for Accessibility */
@media (prefers-reduced-motion: reduce) {
.homepage-popular-course-card {
transition: none;
}
.homepage-popular-course-card:hover {
transform: none;
}
}
/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
/* .homepage-popular-courses-section {
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
} */
.homepage-popular-course-card {
background: #ffffff;
border-color: rgba(255, 255, 255, 0.1);
}
.homepage-popular-course-title {
color: #201f1f;
}
.homepage-popular-course-count {
color: #b0b0b0;
}
}
/* Center Learn More buttons in Major Legal Frameworks section for mobile */
@media (max-width: 767.98px) {
#legal-frameworks .related-post-card .post-content {
text-align: center;
}
#legal-frameworks .related-post-card .btn {
display: block;
margin: 0 auto;
width: fit-content;
background: linear-gradient(45deg, #74b9ff, #4ecdc4);
border: none;
color: #ffffff;
box-shadow: 0 4px 15px rgba(116, 185, 255, 0.3);
transition: all 0.3s ease;
}
#legal-frameworks .related-post-card .btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(116, 185, 255, 0.4);
color: #ffffff;
}
#legal-frameworks .related-post-card .post-meta {
justify-content: center;
text-align: center;
}
}
@media (max-width: 575.98px) {
#legal-frameworks .related-post-card .post-content {
padding: 15px;
}
#legal-frameworks .related-post-card .btn {
padding: 8px 20px;
font-size: 14px;
}
}
/* ===== READER REVIEWS SECTION STYLES ===== */
.reader-reviews-section {
background: linear-gradient(135deg, #f8faff 0%, #ffffff 100%);
padding: 80px 0;
}
.reader-reviews-main-title {
font-size: 3rem;
font-weight: 700;
color: #5a6c7d;
margin-bottom: 20px;
text-align: center;
}
.reader-reviews-subtitle {
font-size: 1.2rem;
color: #8a9ba8;
text-align: center;
margin-bottom: 0;
font-weight: 400;
}
.reader-reviews-grid {
justify-content: center;
align-items: stretch;
}
.reader-review-card {
background: #ffffff;
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
padding: 30px;
height: 100%;
transition: all 0.3s ease;
border: 1px solid rgba(0, 0, 0, 0.03);
position: relative;
overflow: hidden;
}
.reader-review-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #74b9ff, #4ecdc4, #74b9ff);
border-radius: 16px 16px 0 0;
}
.reader-review-card:hover {
transform: translateY(-8px);
box-shadow: 0 16px 48px rgba(116, 185, 255, 0.15);
border-color: #74b9ff;
}
.reader-review-header {
display: flex;
align-items: center;
margin-bottom: 20px;
gap: 15px;
}
.reader-review-avatar {
flex-shrink: 0;
}
.reader-avatar-img {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #f1f3f4;
transition: all 0.3s ease;
}
.reader-review-card:hover .reader-avatar-img {
border-color: #74b9ff;
transform: scale(1.05);
}
.reader-review-info {
flex: 1;
}
.reader-review-name {
font-size: 1.1rem;
font-weight: 600;
color: #5a6c7d;
margin: 0 0 5px 0;
line-height: 1.3;
}
.reader-review-title {
font-size: 0.9rem;
color: #8a9ba8;
margin: 0 0 8px 0;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.reader-review-rating {
display: flex;
gap: 2px;
}
.reader-review-rating i {
color: #ffd93d;
font-size: 14px;
}
.reader-review-content {
margin-bottom: 20px;
}
.reader-review-text {
font-size: 1rem;
color: #6c7b7f;
line-height: 1.6;
margin: 0;
font-style: italic;
position: relative;
}
.reader-review-text::before {
content: '"';
font-size: 2rem;
color: #74b9ff;
position: absolute;
top: -10px;
left: -15px;
font-family: serif;
opacity: 0.5;
}
.reader-review-footer {
text-align: right;
}
.reader-review-date {
font-size: 0.8rem;
color: #4ecdc4;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
background: rgba(78, 205, 196, 0.1);
padding: 4px 12px;
border-radius: 20px;
}
/* Review Stats */
.reader-reviews-stats {
margin-top: 60px;
}
.review-stat-item {
text-align: center;
padding: 20px;
background: rgba(255, 255, 255, 0.9);
border-radius: 12px;
border: 1px solid rgba(0, 0, 0, 0.03);
transition: all 0.3s ease;
}
.review-stat-item:hover {
transform: translateY(-5px);
background: #ffffff;
box-shadow: 0 8px 24px rgba(116, 185, 255, 0.12);
}
.review-stat-number {
font-size: 2.5rem;
font-weight: 700;
color: #74b9ff;
margin: 0 0 10px 0;
line-height: 1;
}
.review-stat-label {
font-size: 0.9rem;
color: #8a9ba8;
margin: 0;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Responsive Design */
@media (max-width: 1199.98px) {
.reader-reviews-main-title {
font-size: 2.5rem;
}
.reader-review-card {
padding: 25px;
}
.review-stat-number {
font-size: 2rem;
}
}
@media (max-width: 991.98px) {
.reader-reviews-section {
padding: 60px 0;
}
.reader-reviews-main-title {
font-size: 2.2rem;
}
.reader-reviews-subtitle {
font-size: 1.1rem;
}
.reader-review-card {
padding: 20px;
margin-bottom: 20px;
}
.reader-review-header {
margin-bottom: 15px;
}
.reader-avatar-img {
width: 50px;
height: 50px;
}
}
@media (max-width: 767.98px) {
.reader-reviews-main-title {
font-size: 1.8rem;
margin-bottom: 15px;
}
.reader-reviews-subtitle {
font-size: 1rem;
}
.reader-reviews-section {
padding: 40px 0;
}
.reader-review-card {
padding: 18px;
}
.reader-review-name {
font-size: 1rem;
}
.reader-review-title {
font-size: 0.8rem;
}
.reader-review-text {
font-size: 0.9rem;
}
.review-stat-item {
padding: 15px;
margin-bottom: 15px;
}
.review-stat-number {
font-size: 1.8rem;
}
.review-stat-label {
font-size: 0.8rem;
}
}
@media (max-width: 575.98px) {
.reader-reviews-main-title {
font-size: 1.6rem;
}
.reader-reviews-subtitle {
font-size: 0.9rem;
}
.reader-review-card {
padding: 15px;
}
.reader-review-header {
flex-direction: column;
text-align: center;
gap: 10px;
}
.reader-avatar-img {
width: 45px;
height: 45px;
}
.reader-review-name {
font-size: 0.95rem;
}
.reader-review-title {
font-size: 0.75rem;
}
.reader-review-text {
font-size: 0.85rem;
text-align: center;
}
.reader-review-footer {
text-align: center;
}
.review-stat-item {
padding: 12px;
}
.review-stat-number {
font-size: 1.5rem;
}
.review-stat-label {
font-size: 0.75rem;
}
}
@media (max-width: 480px) {
.reader-reviews-section {
padding: 30px 0;
}
.reader-reviews-main-title {
font-size: 1.4rem;
}
.reader-reviews-subtitle {
font-size: 0.85rem;
}
.reader-review-card {
padding: 12px;
}
.reader-avatar-img {
width: 40px;
height: 40px;
}
.review-stat-item {
padding: 10px;
}
.review-stat-number {
font-size: 1.3rem;
}
.review-stat-label {
font-size: 0.7rem;
}
}
/* Landscape Mobile */
@media (max-width: 767.98px) and (orientation: landscape) {
.reader-reviews-section {
padding: 30px 0;
}
.reader-review-card {
padding: 15px;
}
.reader-review-header {
margin-bottom: 10px;
}
}
/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.reader-avatar-img {
border-width: 2px;
}
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
.reader-review-card,
.reader-review-card:hover,
.reader-avatar-img,
.review-stat-item,
.review-stat-item:hover {
transition: none;
transform: none;
}
}
/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
.reader-reviews-section {
/* background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); */
}
.reader-review-card {
/* background: #2d2d2d; */
border-color: rgba(255, 255, 255, 0.1);
}
.reader-reviews-main-title {
/* color: #ffffff; */
}
.reader-reviews-subtitle {
color: #b0b0b0;
}
.reader-review-name {
/* color: #ffffff; */
}
.reader-review-title {
color: #b0b0b0;
}
.reader-review-text {
/* color: #d0d0d0; */
}
.review-stat-item {
background: rgba(45, 45, 45, 0.8);
border-color: rgba(255, 255, 255, 0.1);
}
.review-stat-item:hover {
background: #2d2d2d;
}
.review-stat-label {
color: #b0b0b0;
}
}
/* ===== LANDING HERO SECTION STYLES ===== */
.landing-hero-section {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
background-image: url('../images/lawyers-reviewing-contract-docum.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
max-width: 100vw;
}
.landing-hero-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.landing-hero-particles {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 80%, rgba(116, 185, 255, 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(116, 185, 255, 0.08) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(116, 185, 255, 0.05) 0%, transparent 50%);
animation: landing-hero-particles-float 20s ease-in-out infinite;
}
.landing-hero-gradient-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(44, 62, 80, 0.85) 0%, rgba(52, 73, 94, 0.8) 50%, rgba(44, 62, 80, 0.85) 100%);
}
.landing-hero-content {
position: relative;
z-index: 2;
min-height: 100vh;
padding: 120px 0 80px;
}
.landing-hero-text-column {
animation: landing-hero-slide-in-left 1s ease-out 0.3s both;
}
/* Centered layout adjustments */
.landing-hero-text-column.text-center {
max-width: 800px;
margin: 0 auto;
overflow: visible;
scroll-behavior: smooth;
transition: all 0.3s ease;
}
/* Removed scrollbar hiding since we're not using horizontal scroll */
/* Smooth scroll behavior for the title container */
.landing-hero-text-column.text-center {
/* Removed scroll-snap for better text visibility */
}
.landing-hero-text-column.text-center .landing-hero-action-buttons {
justify-content: center;
}
.landing-hero-text-column.text-center .landing-hero-features {
justify-content: center;
}
.landing-hero-text-content {
color: #ffffff;
}
.landing-hero-badge {
display: inline-flex;
align-items: center;
background: rgba(116, 185, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(116, 185, 255, 0.3);
border-radius: 50px;
padding: 8px 20px;
margin-bottom: 30px;
animation: landing-hero-fade-in-up 1s ease-out 0.5s both, landing-hero-badge-pulse 3s ease-in-out infinite 2s;
position: relative;
overflow: hidden;
}
.landing-hero-badge::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(116, 185, 255, 0.2), transparent);
animation: landing-hero-shine 3s ease-in-out infinite 2s;
}
.landing-hero-badge-icon {
color: #74b9ff;
margin-right: 10px;
font-size: 16px;
animation: landing-hero-icon-rotate 4s ease-in-out infinite 1s;
}
.landing-hero-badge-text {
font-size: 14px;
font-weight: 500;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.landing-hero-main-title {
font-size: 3.5rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 25px;
color: #ffffff !important;
animation: landing-hero-fade-in-up 1s ease-out 0.7s both, landing-hero-title-glow 4s ease-in-out infinite 2s;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
max-width: 100%;
}
.landing-hero-highlight-text {
background: linear-gradient(45deg, #74b9ff, #4ecdc4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
animation: landing-hero-highlight-pulse 3s ease-in-out infinite 2.5s;
}
.landing-hero-highlight-text::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(45deg, #74b9ff, #4ecdc4);
border-radius: 2px;
animation: landing-hero-underline-expand 1s ease-out 1.2s both, landing-hero-underline-glow 3s ease-in-out infinite 2s;
}
.landing-hero-description {
font-size: 1.2rem;
line-height: 1.7;
color: #ecf0f1;
margin-bottom: 35px;
animation: landing-hero-fade-in-up 1s ease-out 0.9s both;
}
.landing-hero-action-buttons {
display: flex;
gap: 20px;
margin-bottom: 40px;
animation: landing-hero-fade-in-up 1s ease-out 1.1s both;
}
.landing-hero-primary-btn,
.landing-hero-secondary-btn {
position: relative;
display: inline-flex;
align-items: center;
padding: 15px 30px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 16px;
transition: all 0.3s ease;
overflow: hidden;
border: none;
cursor: pointer;
animation: landing-hero-button-bounce 0.6s ease-out 1.3s both;
}
.landing-hero-primary-btn {
background: linear-gradient(45deg, #74b9ff, #4ecdc4);
color: #ffffff;
box-shadow: 0 8px 25px rgba(116, 185, 255, 0.3);
}
.landing-hero-primary-btn:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 12px 35px rgba(116, 185, 255, 0.4);
color: #ffffff;
animation: landing-hero-button-hover 0.3s ease-out;
}
.landing-hero-secondary-btn {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.landing-hero-secondary-btn:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-3px) scale(1.05);
color: #ffffff;
animation: landing-hero-button-hover 0.3s ease-out;
}
.landing-hero-btn-icon {
margin-right: 10px;
font-size: 18px;
transition: transform 0.3s ease;
}
.landing-hero-primary-btn:hover .landing-hero-btn-icon,
.landing-hero-secondary-btn:hover .landing-hero-btn-icon {
transform: scale(1.2) rotate(5deg);
}
.landing-hero-btn-ripple {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.landing-hero-primary-btn:active .landing-hero-btn-ripple,
.landing-hero-secondary-btn:active .landing-hero-btn-ripple {
width: 300px;
height: 300px;
}
.landing-hero-features {
display: flex;
gap: 25px;
animation: landing-hero-fade-in-up 1s ease-out 1.3s both;
}
.landing-hero-feature-item {
display: flex;
align-items: center;
gap: 8px;
animation: landing-hero-feature-fade-in 0.5s ease-out both;
animation-delay: calc(1.4s + var(--feature-index, 0) * 0.1s);
}
.landing-hero-feature-item:nth-child(1) { --feature-index: 0; }
.landing-hero-feature-item:nth-child(2) { --feature-index: 1; }
.landing-hero-feature-item:nth-child(3) { --feature-index: 2; }
.landing-hero-feature-icon {
color: #74b9ff;
font-size: 18px;
animation: landing-hero-feature-icon-bounce 2s ease-in-out infinite;
animation-delay: calc(1.5s + var(--feature-index, 0) * 0.2s);
}
.landing-hero-feature-text {
font-size: 14px;
color: #ecf0f1;
font-weight: 500;
}
/* Scroll Indicator - Enhanced */
.landing-hero-scroll-indicator {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
color: #ffffff;
animation: landing-hero-fade-in 1s ease-out 1.5s both, landing-hero-scroll-indicator-float 3s ease-in-out infinite 2s;
z-index: 2;
cursor: pointer;
transition: all 0.3s ease;
}
.landing-hero-scroll-indicator:hover {
transform: translateX(-50%) scale(1.1);
color: #74b9ff;
}
.landing-hero-scroll-arrow {
width: 2px;
height: 30px;
background: currentColor;
border-radius: 1px;
position: relative;
margin-bottom: 10px;
animation: landing-hero-scroll-bounce 2s ease-in-out infinite, landing-hero-scroll-arrow-glow 2s ease-in-out infinite;
}
.landing-hero-scroll-arrow::after {
content: '';
position: absolute;
bottom: 0;
left: -3px;
width: 8px;
height: 8px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
animation: landing-hero-scroll-arrow-pulse 2s ease-in-out infinite;
}
.landing-hero-scroll-text {
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
color: currentColor;
animation: landing-hero-scroll-text-fade 2s ease-in-out infinite;
}
/* ===== NEW ENHANCED ANIMATIONS ===== */
@keyframes landing-hero-badge-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.02); }
}
@keyframes landing-hero-shine {
0% { left: -100%; }
50% { left: 100%; }
100% { left: 100%; }
}
@keyframes landing-hero-icon-rotate {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-5deg); }
75% { transform: rotate(5deg); }
}
@keyframes landing-hero-title-glow {
0%, 100% { text-shadow: 0 0 5px rgba(116, 185, 255, 0.3); }
50% { text-shadow: 0 0 20px rgba(116, 185, 255, 0.6); }
}
@keyframes landing-hero-highlight-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.8; }
}
@keyframes landing-hero-underline-glow {
0%, 100% { box-shadow: 0 0 5px rgba(116, 185, 255, 0.5); }
50% { box-shadow: 0 0 15px rgba(116, 185, 255, 0.8); }
}
@keyframes landing-hero-button-bounce {
0% { transform: scale(0.8); opacity: 0; }
50% { transform: scale(1.1); }
100% { transform: scale(1); opacity: 1; }
}
@keyframes landing-hero-button-hover {
0% { transform: translateY(-3px) scale(1.05); }
50% { transform: translateY(-5px) scale(1.08); }
100% { transform: translateY(-3px) scale(1.05); }
}
@keyframes landing-hero-feature-fade-in {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes landing-hero-feature-icon-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
@keyframes landing-hero-scroll-indicator-float {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-5px); }
}
@keyframes landing-hero-scroll-arrow-glow {
0%, 100% { box-shadow: 0 0 5px currentColor; }
50% { box-shadow: 0 0 15px currentColor; }
}
@keyframes landing-hero-scroll-arrow-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
@keyframes landing-hero-scroll-text-fade {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
/* ===== EXISTING ANIMATIONS ===== */
@keyframes landing-hero-particles-float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(180deg); }
}
@keyframes landing-hero-slide-in-left {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes landing-hero-slide-in-right {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes landing-hero-fade-in-up {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes landing-hero-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes landing-hero-underline-expand {
from { width: 0; }
to { width: 100%; }
}
@keyframes landing-hero-float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-15px); }
}
@keyframes landing-hero-scroll-bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-10px); }
60% { transform: translateY(-5px); }
}
@keyframes landing-hero-scroll-bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-10px); }
60% { transform: translateY(-5px); }
}
/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1199.98px) {
.landing-hero-main-title {
font-size: 3rem;
line-height: 1.1;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
max-width: 100%;
}
}
@media (max-width: 991.98px) {
.landing-hero-content {
padding: 100px 0 60px;
text-align: center;
}
.landing-hero-main-title {
font-size: 2.2rem;
line-height: 1.15;
padding: 0 20px;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
max-width: 100%;
}
.landing-hero-description {
font-size: 1.1rem;
}
.landing-hero-action-buttons {
justify-content: center;
flex-wrap: wrap;
}
.landing-hero-features {
justify-content: center;
flex-wrap: wrap;
}
}
@media (max-width: 767.98px) {
.landing-hero-section {
min-height: auto;
padding: 80px 0 60px;
}
.landing-hero-content {
padding: 80px 0 40px;
}
.landing-hero-main-title {
font-size: 1.8rem;
margin-bottom: 20px;
line-height: 1.2;
padding: 0 15px;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
max-width: 100%;
}
.landing-hero-description {
font-size: 1rem;
margin-bottom: 25px;
}
.landing-hero-action-buttons {
flex-direction: column;
align-items: center;
gap: 15px;
}
.landing-hero-primary-btn,
.landing-hero-secondary-btn {
width: 100%;
max-width: 280px;
justify-content: center;
}
.landing-hero-features {
gap: 20px;
justify-content: center;
}
/* Centered layout mobile adjustments */
.landing-hero-text-column.text-center {
max-width: none;
padding: 0 20px;
overflow: visible;
}
.landing-hero-badge {
padding: 6px 16px;
margin-bottom: 20px;
}
.landing-hero-badge-text {
font-size: 12px;
}
}
@media (max-width: 575.98px) {
.landing-hero-section {
padding: 60px 0 40px;
}
.landing-hero-content {
padding: 0px 0 30px;
}
.landing-hero-main-title {
font-size: 1.6rem;
line-height: 1.25;
padding: 0 10px;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
max-width: 100%;
}
.landing-hero-description {
font-size: 0.95rem;
}
/* Centered layout small mobile adjustments */
.landing-hero-text-column.text-center {
padding: 0 15px;
overflow: visible;
}
.landing-hero-scroll-indicator {
bottom: 20px;
}
.landing-hero-scroll-text {
font-size: 11px;
}
}
@media (max-width: 480px) {
.landing-hero-main-title {
font-size: 1.4rem;
line-height: 1.3;
padding: 0 8px;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
max-width: 100%;
}
.landing-hero-description {
font-size: 0.9rem;
}
.landing-hero-features {
flex-direction: column;
gap: 15px;
}
}
@media (max-width: 360px) {
.landing-hero-main-title {
font-size: 1.2rem;
line-height: 1.35;
padding: 0 5px;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
max-width: 100%;
}
.landing-hero-description {
font-size: 0.85rem;
}
}
@media (max-width: 320px) {
.landing-hero-main-title {
font-size: 1.1rem;
line-height: 1.4;
padding: 0 3px;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
max-width: 100%;
}
.landing-hero-description {
font-size: 0.8rem;
}
.landing-hero-text-column.text-center {
padding: 0 10px;
overflow: visible;
}
}
@media (max-width: 280px) {
.landing-hero-main-title {
font-size: 1rem;
line-height: 1.45;
padding: 0 2px;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
max-width: 100%;
}
.landing-hero-description {
font-size: 0.75rem;
}
.landing-hero-text-column.text-center {
padding: 0 8px;
overflow: visible;
}
}
/* Landscape Mobile */
@media (max-width: 767.98px) and (orientation: landscape) {
.landing-hero-section {
min-height: auto;
padding: 60px 0 40px;
}
.landing-hero-content {
padding: 60px 0 30px;
}
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
.landing-hero-particles,
.landing-hero-scroll-arrow {
animation: none;
}
.landing-hero-text-column,
.landing-hero-badge,
.landing-hero-main-title,
.landing-hero-description,
.landing-hero-action-buttons,
.landing-hero-features,
.landing-hero-scroll-indicator {
animation: none;
opacity: 1;
transform: none;
}
}
/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
/* .landing-hero-section {
background: linear-gradient(135deg, #e8f4ff 0%, #d4e9ff 50%, #b8d9ff 100%);
} */
/* .landing-hero-gradient-overlay {
background: linear-gradient(135deg, rgba(232, 244, 255, 0.95) 0%, rgba(212, 233, 255, 0.95) 50%, rgba(184, 217, 255, 0.95) 100%);
} */
.landing-hero-text-content {
color: #1a252f;
}
/* .landing-hero-badge-text {
color: #1a252f;
} */
.landing-hero-main-title {
color: #1a252f;
}
.landing-hero-description {
color: #ecf0f1;
}
.landing-hero-feature-text {
color: #ecf0f1;
}
/* .landing-hero-secondary-btn {
color: #1a252f;
} */
.landing-hero-secondary-btn:hover {
color: #1a252f;
}
}
/* Enhanced Scroll Indicator Effects */
.landing-hero-scroll-indicator::before {
content: '';
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
/* width: 40px;
height: 40px; */
border: 2px solid currentColor;
border-radius: 50%;
opacity: 0.3;
animation: landing-hero-scroll-circle-pulse 3s ease-in-out infinite;
}
/* .landing-hero-scroll-indicator::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 20px;
background: currentColor;
border-radius: 50%;
opacity: 0.6;
animation: landing-hero-scroll-dot-bounce 2s ease-in-out infinite;
} */
/* Hero Section Enhanced States */
.landing-hero-section.hero-in-view .landing-hero-text-column {
animation-play-state: running;
}
.landing-hero-section.hero-in-view .landing-hero-badge {
animation-play-state: running;
}
.landing-hero-section.hero-in-view .landing-hero-main-title {
animation-play-state: running;
}
.landing-hero-section.hero-in-view .landing-hero-description {
animation-play-state: running;
}
.landing-hero-section.hero-in-view .landing-hero-action-buttons {
animation-play-state: running;
}
.landing-hero-section.hero-in-view .landing-hero-features {
animation-play-state: running;
}
.landing-hero-section.hero-in-view .landing-hero-scroll-indicator {
animation-play-state: running;
}
/* Enhanced Button States */
.landing-hero-primary-btn:focus,
.landing-hero-secondary-btn:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(116, 185, 255, 0.3);
}
.landing-hero-primary-btn:active,
.landing-hero-secondary-btn:active {
transform: translateY(-1px) scale(0.98);
}
/* Enhanced Feature Icons */
.landing-hero-feature-icon {
transition: all 0.3s ease;
}
.landing-hero-feature-item:hover .landing-hero-feature-icon {
transform: scale(1.2) rotate(5deg);
color: #4ecdc4;
}
/* Enhanced Badge Effects */
.landing-hero-badge:hover {
transform: scale(1.05);
box-shadow: 0 5px 20px rgba(116, 185, 255, 0.3);
}
.landing-hero-badge:hover .landing-hero-badge-icon {
animation: landing-hero-icon-spin 0.6s ease-in-out;
}
/* Enhanced Title Effects */
.landing-hero-main-title:hover .landing-hero-highlight-text {
animation: landing-hero-highlight-bounce 0.6s ease-in-out;
}
/* Enhanced Scroll Indicator Hover Effects */
.landing-hero-scroll-indicator:hover .landing-hero-scroll-arrow {
animation: landing-hero-scroll-arrow-fast-bounce 0.8s ease-in-out infinite;
}
.landing-hero-scroll-indicator:hover .landing-hero-scroll-text {
animation: landing-hero-scroll-text-glow 0.8s ease-in-out infinite;
}
/* ===== ADDITIONAL ENHANCED ANIMATIONS ===== */
@keyframes landing-hero-scroll-circle-pulse {
0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.3; }
50% { transform: translateX(-50%) scale(1.2); opacity: 0.6; }
}
@keyframes landing-hero-scroll-dot-bounce {
0%, 100% { transform: translateX(-50%) scale(1); }
50% { transform: translateX(-50%) scale(1.3); }
}
@keyframes landing-hero-icon-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes landing-hero-highlight-bounce {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes landing-hero-scroll-arrow-fast-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@keyframes landing-hero-scroll-text-glow {
0%, 100% { text-shadow: 0 0 5px currentColor; }
50% { text-shadow: 0 0 15px currentColor; }
}
/* ===== COURSE FILTERING ANIMATIONS ===== */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Course card filtering transitions */
.course-card {
transition: all 0.3s ease-in-out;
}
.course-card[style*="display: none"] {
opacity: 0;
transform: scale(0.95);
}
.course-card[style*="display: block"] {
opacity: 1;
transform: scale(1);
}
/* ===== ENHANCED COURSE CARD STYLING ===== */
.course-card-inner {
background: white;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
overflow: hidden;
transition: all 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
}
.course-card-inner:hover {
transform: translateY(-8px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}
.course-image {
position: relative;
height: 200px;
overflow: hidden;
}
.course-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.course-card-inner:hover .course-image img {
transform: scale(1.05);
}
.course-badge {
position: absolute;
top: 12px;
/* right: 12px; */
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.course-badge.free {
background: #28a745;
color: white;
}
.course-content {
padding: 20px;
flex: 1;
display: flex;
flex-direction: column;
}
.course-title {
font-size: 18px;
font-weight: 700;
color: #2c3e50;
margin-bottom: 12px;
line-height: 1.3;
min-height: 48px;
}
.course-description {
font-size: 14px;
color: #6c757d;
line-height: 1.5;
margin-bottom: 16px;
flex: 1;
min-height: 60px;
}
.course-tags {
display: flex;
gap: 8px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.tag {
padding: 4px 12px;
border-radius: 20px;
font-size: 9px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
background: #f8f9fa;
color: #495057;
border: 1px solid #e9ecef;
}
.tag-criminal { background: #fff3cd; color: #856404; border-color: #ffeaa7; }
.tag-civil { background: #d1ecf1; color: #0c5460; border-color: #bee5eb; }
.tag-family { background: #f8d7da; color: #721c24; border-color: #f5c6cb; }
.tag-property { background: #d4edda; color: #155724; border-color: #c3e6cb; }
.tag-contract { background: #e2e3e5; color: #383d41; border-color: #d6d8db; }
.tag-constitutional { background: #cce5ff; color: #004085; border-color: #b3d7ff; }
.tag-tax { background: #fff2cc; color: #806520; border-color: #ffe066; }
.tag-financial { background: #d1ecf1; color: #0c5460; border-color: #bee5eb; }
.tag-securities { background: #e2e3e5; color: #383d41; border-color: #d6d8db; }
.tag-banking { background: #d4edda; color: #155724; border-color: #c3e6cb; }
.tag-beginner { background: #d4edda; color: #155724; border-color: #c3e6cb; }
.tag-intermediate { background: #fff3cd; color: #856404; border-color: #ffeaa7; }
.tag-advanced { background: #f8d7da; color: #721c24; border-color: #f5c6cb; }
.course-action-buttons {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.course-action-buttons .btn {
flex: 1;
min-width: 80px;
font-size: 10px;
padding: 2px 4px;
border-radius: 6px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.3s ease;
}
.course-action-buttons .btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Button color overrides for course cards */
.course-action-buttons .btn-danger {
background: #dc3545;
border-color: #dc3545;
color: white;
}
.course-action-buttons .btn-danger:hover {
background: #c82333;
border-color: #bd2130;
color: white;
}
/* Responsive adjustments for course cards */
@media (max-width: 1200px) {
.course-title {
font-size: 16px;
min-height: 44px;
}
.course-description {
font-size: 13px;
min-height: 56px;
}
.course-action-buttons .btn {
font-size: 11px;
padding: 6px 10px;
}
}
@media (max-width: 992px) {
.course-content {
padding: 16px;
}
.course-title {
font-size: 15px;
min-height: 40px;
}
.course-description {
font-size: 12px;
min-height: 52px;
}
.course-tags {
margin-bottom: 16px;
}
.tag {
font-size: 10px;
padding: 3px 10px;
}
}
@media (max-width: 768px) {
.course-card-inner {
margin-bottom: 20px;
}
.course-content {
padding: 14px;
}
.course-title {
font-size: 16px;
min-height: auto;
margin-bottom: 10px;
}
.course-description {
font-size: 13px;
min-height: auto;
margin-bottom: 14px;
}
.course-action-buttons {
gap: 6px;
}
.course-action-buttons .btn {
flex: 1;
font-size: 11px;
padding: 8px 8px;
min-width: 70px;
}
}
@media (max-width: 576px) {
.course-content {
padding: 12px;
}
.course-title {
font-size: 15px;
}
.course-description {
font-size: 12px;
}
.course-tags {
gap: 6px;
margin-bottom: 14px;
}
.tag {
font-size: 9px;
padding: 2px 8px;
}
.course-action-buttons {
/* flex-direction: column; */
gap: 8px;
}
.course-action-buttons .btn {
width: 100%;
min-width: auto;
}
}
@media (max-width: 480px) {
.course-image {
height: 180px;
}
.course-content {
padding: 10px;
}
.course-title {
font-size: 14px;
}
.course-description {
font-size: 13px;
}
}
.download-pdf{
border: 1px solid #10b981 !important;
}
/* ===== COURSE GRID IMPROVEMENTS ===== */
.course-grid-section .row {
margin: 0;
}
.course-grid-section .col-lg-3,
.course-grid-section .col-md-4,
.course-grid-section .col-sm-6 {
padding: 0 12px;
margin-bottom: 24px;
}
/* Ensure consistent card heights */
.course-card {
height: 100%;
margin-bottom: 0;
}
/* Add some breathing room between sections */
.course-controls-section + .legal-acts-filters-section {
margin-top: 0;
}
.legal-acts-filters-section + .course-grid-section {
margin-top: 0;
}
/* ===== RESOURCES PAGE STYLES ===== */
.resources-main {
background: var(--light-bg);
min-height: 100vh;
}
/* Resources Filters Sidebar */
.resources-filters-sidebar {
background: white;
border-radius: var(--border-radius-lg);
padding: 1.5rem;
box-shadow: var(--shadow-md);
border: 1px solid var(--border-color);
height: fit-content;
/* Mobile default styles */
position: relative;
width: 100%;
z-index: 1;
overflow-y: visible;
transition: none;
transform: none;
}
/* Mobile filter sidebar styles */
@media (max-width: 991px) {
.resources-filters-sidebar {
position: fixed;
top: 0;
left: -100%; /* Hidden off-screen to the left on mobile */
width: 320px;
height: 100vh;
z-index: 1001;
overflow-y: auto;
transition: left 0.3s ease;
border-radius: 0;
margin: 0;
transform: none;
box-shadow: var(--shadow-xl);
}
.resources-filters-sidebar.active {
left: 0; /* Slide in from left on mobile */
}
}
/* Desktop sidebar active state */
.resources-filters-sidebar.desktop-active {
right: 0; /* Slide in from right */
transform: translateX(0);
}
.resources-filters-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
padding-bottom: 1rem;
padding-right: 3rem; /* Add space for close button */
border-bottom: 2px solid var(--primary-color);
position: relative; /* Ensure proper positioning context */
min-height: 60px; /* Ensure minimum height for proper layout */
}
.resources-filters-title {
color: var(--text-primary);
font-weight: 600;
font-size: 1.5rem;
margin: 0;
}
.resources-clear-all-link {
color: var(--primary-color);
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
transition: var(--transition);
padding: 0.5rem 1rem;
border-radius: var(--border-radius);
border: 2px solid transparent;
cursor: pointer;
display: inline-block;
z-index: 1; /* Ensure it's above other elements */
position: relative; /* Create stacking context */
background: rgba(255, 255, 255, 0.95); /* More opaque background for better visibility */
margin-right: 2rem; /* Ensure space from close button */
white-space: nowrap; /* Prevent text wrapping */
flex-shrink: 0; /* Prevent shrinking in flexbox */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add shadow for better visibility */
border: 1px solid var(--primary-color); /* Add border for better visibility */
}
.resources-clear-all-link:hover {
color: var(--primary-dark);
background-color: rgba(0, 188, 212, 0.1);
border-color: var(--primary-color);
transform: translateY(-1px);
}
.resources-clear-all-link:active {
transform: translateY(0) scale(0.98);
}
.resources-clear-all-link.clearing {
background-color: var(--success-color);
color: white;
border-color: var(--success-color);
}
/* Resources Filter Groups */
.resources-filter-group {
margin-bottom: 1.5rem;
}
.resources-filter-group-title {
color: var(--text-primary);
font-weight: 600;
font-size: 1rem;
margin-bottom: 0.75rem;
}
/* Responsive adjustments for filter groups */
@media (max-width: 767px) {
.resources-filter-group {
margin-bottom: 1.25rem;
}
.resources-filter-group-title {
font-size: 0.95rem;
margin-bottom: 0.6rem;
}
}
@media (max-width: 575px) {
.resources-filter-group {
margin-bottom: 1rem;
}
.resources-filter-group-title {
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
}
/* Resources Filter Buttons */
.resources-filter-buttons {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 0.5rem;
align-items: flex-start;
justify-content: flex-start;
row-gap: 0.4rem;
}
.resources-filter-btn {
background: white;
border: 2px solid var(--border-color);
color: var(--text-secondary);
padding: 0.5rem 0.75rem;
border-radius: var(--border-radius);
font-weight: 500;
font-size: 0.85rem;
transition: var(--transition);
cursor: pointer;
text-align: center;
white-space: nowrap;
min-width: fit-content;
flex: 0 0 auto;
height: 32px;
line-height: 1.2;
display: flex;
align-items: center;
justify-content: center;
}
.resources-filter-btn:hover {
border-color: var(--primary-color);
color: var(--primary-color);
}
.resources-filter-btn-active {
background: var(--primary-color);
border-color: var(--primary-color);
color: white;
}
.resources-filter-btn-active:hover {
background: var(--primary-dark);
color: white;
}
/* Responsive adjustments for filter buttons */
@media (max-width: 1200px) {
.resources-filter-buttons {
gap: 0.4rem;
}
.resources-filter-btn {
padding: 0.45rem 0.7rem;
font-size: 0.8rem;
height: 30px;
}
}
@media (max-width: 991px) {
.resources-filter-buttons {
gap: 0.35rem;
}
.resources-filter-btn {
padding: 0.4rem 0.65rem;
font-size: 0.78rem;
height: 28px;
}
}
@media (max-width: 767px) {
.resources-filter-buttons {
gap: 0.3rem;
}
.resources-filter-btn {
padding: 0.35rem 0.6rem;
font-size: 0.75rem;
min-width: 60px;
height: 26px;
}
}
@media (max-width: 575px) {
.resources-filter-buttons {
gap: 0.25rem;
justify-content: center;
}
.resources-filter-btn {
padding: 0.3rem 0.5rem;
font-size: 0.7rem;
min-width: 50px;
max-width: 80px;
height: 24px;
}
}
@media (max-width: 480px) {
.resources-filter-buttons {
flex-direction: column;
align-items: stretch;
gap: 0.4rem;
}
.resources-filter-btn {
width: 100%;
max-width: none;
text-align: center;
padding: 0.4rem 0.6rem;
font-size: 0.75rem;
height: 28px;
}
}
@media (max-width: 360px) {
.resources-filter-buttons {
gap: 0.3rem;
}
.resources-filter-btn {
padding: 0.35rem 0.5rem;
font-size: 0.7rem;
height: 26px;
}
.resources-filter-group-title {
font-size: 0.85rem;
margin-bottom: 0.4rem;
}
}
/* Resources States Grid */
.resources-states-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
.resources-states-column {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
/* Resources Checkbox Styles */
.resources-state-checkbox,
.resources-topic-checkbox,
.resources-common-exams-checkbox {
display: flex;
align-items: center;
cursor: pointer;
font-size: 0.9rem;
color: var(--text-secondary);
transition: var(--transition);
}
.resources-state-checkbox:hover,
.resources-topic-checkbox:hover,
.resources-common-exams-checkbox:hover {
color: var(--primary-color);
}
.resources-state-checkbox input,
.resources-topic-checkbox input,
.resources-common-exams-checkbox input {
display: none;
}
.resources-checkmark {
width: 18px;
height: 18px;
border: 2px solid var(--border-color);
border-radius: 3px;
margin-right: 0.75rem;
position: relative;
transition: var(--transition);
}
.resources-state-checkbox input:checked ~ .resources-checkmark,
.resources-topic-checkbox input:checked ~ .resources-checkmark,
.resources-common-exams-checkbox input:checked ~ .resources-checkmark {
background: var(--primary-color);
border-color: var(--primary-color);
}
.resources-checkmark:after {
content: '';
position: absolute;
display: none;
left: 5px;
top: 2px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.resources-state-checkbox input:checked ~ .resources-checkmark:after,
.resources-topic-checkbox input:checked ~ .resources-checkmark:after,
.resources-common-exams-checkbox input:checked ~ .resources-checkmark:after {
display: block;
}
/* Resources Topics Section */
.resources-topics-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.resources-law-focused-label {
background: var(--primary-color);
color: white;
padding: 0.25rem 0.5rem;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 500;
}
.resources-search-topics {
margin-bottom: 1rem;
}
.resources-search-topics input {
border: 2px solid var(--border-color);
border-radius: var(--border-radius);
padding: 0.5rem 0.75rem;
font-size: 0.9rem;
}
.resources-search-topics input:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.2rem rgba(0, 188, 212, 0.25);
}
.resources-topics-list {
max-height: 200px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
/* Resources Apply Filters Button */
.resources-apply-filters-btn {
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
color: white;
border: none;
padding: 1rem 2rem;
border-radius: var(--border-radius);
font-weight: 600;
font-size: 1rem;
width: 100%;
transition: var(--transition);
cursor: pointer;
margin-top: 1rem;
}
.resources-apply-filters-btn:hover {
background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* Resources Content */
.resources-content {
padding: 0 1rem;
}
.resources-header {
display: flex;
/* justify-content: space-between; */
align-items: center;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 2px solid var(--primary-color);
}
.resources-title {
color: var(--text-primary);
font-weight: 600;
font-size: 2rem;
margin: 0;
}
.resources-count {
color: var(--text-muted);
font-size: 1rem;
padding-top: 6px;
margin-left: 11px;
font-weight: 500;
}
/* Resources Grid */
.resources-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 1.5rem;
}
.resource-card {
background: white;
border-radius: var(--border-radius-lg);
padding: 1.5rem;
box-shadow: var(--shadow-md);
border: 1px solid var(--border-color);
transition: var(--transition);
height: fit-content;
}
.resource-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.resource-title {
color: var(--text-primary);
font-weight: 600;
font-size: 1.1rem;
margin-bottom: 0.75rem;
line-height: 1.4;
}
.resource-description {
color: var(--text-secondary);
font-size: 0.9rem;
margin-bottom: 1rem;
line-height: 1.5;
}
.resource-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1rem;
}
.resource-tag {
background: var(--border-color);
color: var(--text-secondary);
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 500;
}
.resource-type {
display: inline-block;
background: var(--primary-color);
color: white;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 500;
margin-bottom: 1rem;
}
.resource-type.optional {
background: var(--warning-color);
}
.resource-open-btn {
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
color: white;
border: none;
padding: 0.75rem 2rem;
border-radius: var(--border-radius);
font-weight: 600;
font-size: 0.9rem;
width: 100%;
transition: var(--transition);
cursor: pointer;
}
.resource-open-btn:hover {
background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
/* Responsive Design */
@media (max-width: 1200px) {
.resources-grid {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1rem;
}
}
@media (max-width: 992px) {
.resources-filters-sidebar {
position: static;
margin-bottom: 2rem;
}
.resources-content {
padding: 0;
}
.resources-grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
}
@media (max-width: 768px) {
.resources-filters-sidebar {
padding: 1rem;
}
.resources-filters-title {
font-size: 1.25rem;
}
.resources-filter-group-title {
font-size: 1rem;
}
.resources-title {
font-size: 1.5rem;
}
.resources-header {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.resources-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.resource-card {
padding: 1rem;
}
.resources-states-grid {
grid-template-columns: 1fr;
}
.resources-filter-buttons {
flex-direction: row;
flex-wrap: wrap;
}
.resources-filter-btn {
width: auto;
min-width: 80px;
}
}
@media (max-width: 576px) {
.resources-main {
margin-top: 70px;
}
.resources-filters-sidebar {
margin: 0 -0.5rem 1rem -0.5rem;
border-radius: 0;
}
.resources-content {
padding: 0 0.5rem;
}
.resource-card {
margin: 0 -0.5rem;
border-radius: 0;
}
.resources-apply-filters-btn {
padding: 0.75rem 1.5rem;
font-size: 0.9rem;
}
}
/* ===== MOBILE FILTER STYLES ===== */
.mobile-filter-toggle {
position: fixed;
top: 90px;
left: 20px;
z-index: 1000;
display: none;
}
.mobile-filter-btn {
border-radius: 25px;
padding: 0.75rem 1.5rem;
box-shadow: var(--shadow-lg);
font-weight: 600;
position: relative;
transition: var(--transition);
}
.mobile-filter-btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-xl);
}
/* ===== DESKTOP FILTER STYLES ===== */
.desktop-filter-toggle {
position: fixed;
top: 90px;
right: 20px;
z-index: 1000;
top: auto;
display: none; /* Hidden by default, shown via media query */
}
.desktop-filter-btn {
border-radius: 25px;
padding: 0.75rem 1.5rem;
box-shadow: var(--shadow-lg);
font-weight: 600;
position: relative;
transition: var(--transition);
}
.desktop-filter-btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-xl);
}
.desktop-filter-close {
background: none;
border: none;
color: var(--text-muted);
font-size: 1.25rem;
/* padding: 0.5rem; */
cursor: pointer;
transition: var(--transition);
position: absolute;
top: 0.5rem;
right: 0.5rem;
}
.desktop-filter-close:hover {
color: var(--danger-color);
transform: scale(1.1);
}
.filter-count {
position: absolute;
top: -8px;
right: -8px;
background: var(--danger-color);
color: white;
border-radius: 50%;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 600;
min-width: 20px;
}
.mobile-filter-close {
background: none;
border: none;
color: var(--text-muted);
font-size: 1.25rem;
/* padding: 0.5rem; */
cursor: pointer;
transition: var(--transition);
position: absolute;
top: 0.5rem;
right: 0.5rem;
}
.mobile-filter-close:hover {
color: var(--danger-color);
transform: scale(1.1);
}
/* Mobile filter sidebar overlay */
.mobile-filter-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
opacity: 0;
visibility: hidden;
transition: var(--transition);
}
.mobile-filter-overlay.active {
opacity: 1;
visibility: visible;
}
/* Desktop filter sidebar overlay */
.desktop-filter-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
opacity: 0;
visibility: hidden;
transition: var(--transition);
}
.desktop-filter-overlay.active {
opacity: 1;
visibility: visible;
}
/* ===== RESOURCES SECTION STYLES ===== */
.resources-section {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
position: relative;
}
.resources-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
pointer-events: none;
}
.resource-card {
background: var(--light-color);
border-radius: var(--border-radius-lg);
padding: 2rem;
height: 100%;
box-shadow: var(--shadow-md);
transition: var(--transition);
border: 1px solid var(--border-color);
position: relative;
overflow: hidden;
}
.resource-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
transform: scaleX(0);
transition: var(--transition);
}
.resource-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
border-color: var(--primary-light);
}
.resource-card:hover::before {
transform: scaleX(1);
}
.resource-card-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
transition: var(--transition);
}
.resource-card:hover .resource-card-icon {
transform: scale(1.1) rotate(5deg);
}
.resource-card-icon i {
font-size: 2rem;
color: var(--light-color);
}
.resource-card-content {
text-align: center;
}
.resource-card-title {
font-size: 1.5rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 1rem;
line-height: 1.3;
}
.resource-card-description {
color: var(--text-secondary);
margin-bottom: 1.5rem;
line-height: 1.6;
font-size: 0.95rem;
}
.resource-card-features {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.resource-feature {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--text-muted);
font-size: 0.9rem;
font-weight: 500;
}
.resource-feature i {
color: var(--success-color);
font-size: 0.8rem;
}
.resource-card-btn {
width: 100%;
padding: 0.75rem 1.5rem;
font-weight: 600;
border-radius: var(--border-radius);
transition: var(--transition);
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 0.9rem;
}
.resource-card-btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
/* Responsive adjustments for resource cards */
@media (max-width: 991px) {
.resource-card {
padding: 1.5rem;
}
.resource-card-icon {
width: 70px;
height: 70px;
}
.resource-card-icon i {
font-size: 1.75rem;
}
}
/* Desktop filter sidebar styles */
@media (min-width: 992px) {
.desktop-filter-toggle {
display: block;
text-align: end;
}
.resources-filters-sidebar {
position: fixed;
top: 0;
right: -100%; /* Hidden off-screen to the right */
width: 400px;
height: 100vh;
background: white;
z-index: 1001;
overflow-y: auto;
transition: right 0.3s ease;
box-shadow: var(--shadow-xl);
border-radius: 0;
margin: 0;
padding: 1.5rem;
transform: translateX(0);
will-change: right;
backface-visibility: hidden;
}
.resources-filters-sidebar.desktop-active {
right: 0; /* Slide in from right */
transform: translateX(0);
z-index: 9999;
}
.resources-filters-header {
position: relative;
padding-right: 3rem;
margin-bottom: 1.5rem;
border-bottom: 1px solid var(--border-color);
padding-bottom: 1rem;
}
.resources-filters-title {
font-size: 1.25rem;
margin-bottom: 0.5rem;
}
.resources-clear-all-link {
font-size: 0.85rem;
}
.resources-filter-group {
margin-bottom: 1.25rem;
}
.resources-filter-group-title {
font-size: 0.95rem;
margin-bottom: 0.6rem;
}
.resources-filter-btn {
padding: 0.4rem 0.7rem;
font-size: 0.8rem;
height: 28px;
}
.resources-states-grid {
grid-template-columns: 1fr;
gap: 0.4rem;
}
.resources-state-checkbox,
.resources-topic-checkbox {
font-size: 0.85rem;
padding: 0.5rem 0;
}
.resources-apply-filters-btn {
position: sticky;
bottom: 1rem;
margin-top: 2rem;
width: 100%;
padding: 1rem;
font-size: 1rem;
font-weight: 600;
}
}
/* Mobile filter sidebar responsive styles */
@media (max-width: 991px) {
.mobile-filter-toggle {
display: block;
}
.resources-filters-sidebar {
position: fixed;
top: 0;
left: -100%;
width: 320px;
height: 100vh;
background: white;
z-index: 1001;
overflow-y: auto;
transition: left 0.3s ease;
box-shadow: var(--shadow-xl);
border-radius: 0;
margin: 0;
padding: 1rem;
transform: translateX(0);
}
.resources-filters-sidebar.active {
left: 0;
transform: translateX(0);
z-index: 9999;
}
/* Ensure smooth sliding animation */
.resources-filters-sidebar {
will-change: left;
backface-visibility: hidden;
}
.resources-filters-header {
position: relative;
padding-right: 3rem;
margin-bottom: 1.5rem;
border-bottom: 1px solid var(--border-color);
padding-bottom: 1rem;
}
.resources-filters-title {
font-size: 1.25rem;
margin-bottom: 0.5rem;
}
.resources-clear-all-link {
font-size: 0.85rem;
}
.resources-filter-group {
margin-bottom: 1.25rem;
}
.resources-filter-group-title {
font-size: 0.95rem;
margin-bottom: 0.6rem;
}
.resources-filter-btn {
padding: 0.4rem 0.7rem;
font-size: 0.8rem;
height: 28px;
}
.resources-states-grid {
grid-template-columns: 1fr;
gap: 0.4rem;
}
.resources-state-checkbox,
.resources-topic-checkbox {
font-size: 0.85rem;
padding: 0.5rem 0;
}
.resources-apply-filters-btn {
position: sticky;
bottom: 1rem;
margin-top: 2rem;
width: 100%;
padding: 1rem;
font-size: 1rem;
font-weight: 600;
}
/* Adjust main content area for mobile */
.resources-main .col-lg-9 {
margin-left: 0;
width: 100%;
}
.resources-content {
padding: 0 1rem;
}
.resources-header {
margin-bottom: 1.5rem;
}
.resources-title {
font-size: 1.5rem;
}
}
@media (max-width: 767px) {
.resource-card {
padding: 1.25rem;
margin-bottom: 1rem;
}
.resource-card-icon {
width: 60px;
height: 60px;
margin-bottom: 1rem;
}
.resource-card-icon i {
font-size: 1.5rem;
}
.resource-card-title {
font-size: 1.25rem;
}
.resource-card-description {
font-size: 0.9rem;
}
.resource-card-features {
margin-bottom: 1rem;
}
.resource-feature {
font-size: 0.85rem;
}
/* Mobile filter adjustments for small screens */
.resources-filters-sidebar {
width: 100%;
left: -100%;
}
.mobile-filter-toggle {
top: 80px;
left: -2px;
text-align-last: end;
}
.mobile-filter-btn {
padding: 0.6rem 1.25rem;
font-size: 0.9rem;
}
/* Improve mobile filter button visibility */
.mobile-filter-btn {
background: var(--primary-color);
border: 2px solid var(--primary-color);
color: white;
font-weight: 600;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.mobile-filter-btn:hover {
background: var(--primary-dark);
border-color: var(--primary-dark);
color: white;
}
}
@media (max-width: 575px) {
.resources-section {
padding: 2rem 0;
}
.resource-card {
padding: 1rem;
margin: 0 0.5rem 1rem 0.5rem;
}
.resource-card-icon {
width: 50px;
height: 50px;
}
.resource-card-icon i {
font-size: 1.25rem;
}
.resource-card-title {
font-size: 1.125rem;
}
.resource-card-btn {
padding: 0.625rem 1.25rem;
font-size: 0.85rem;
}
}
/* ===== ABOUT PAGE SPECIFIC STYLES ===== */
/* About Header Section */
.about-header-section {
background: linear-gradient(135deg, #e0f7fa 0%, #ffffff 100%);
padding: 4rem 0 2rem;
}
.about-main-title {
font-size: 3.5rem;
font-weight: 700;
color: var(--secondary-color);
margin-bottom: 1rem;
}
.about-breadcrumb {
font-size: 1.1rem;
color: var(--text-muted);
}
/* About Learning Center Section */
.about-learning-center-section {
padding: 5rem 0;
background: #ffffff;
}
.about-image-container {
position: relative;
}
.about-main-image {
position: relative;
border-radius: 1rem;
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.about-play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
background: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2rem;
cursor: pointer;
transition: var(--transition);
box-shadow: var(--shadow-lg);
}
.about-play-button:hover {
background: var(--primary-dark);
transform: translate(-50%, -50%) scale(1.1);
}
.about-graduation-cap {
position: absolute;
bottom: -20px;
left: 20px;
font-size: 3rem;
color: var(--text-muted);
opacity: 0.3;
}
.about-dotted-pattern {
position: absolute;
top: 20px;
left: -20px;
width: 100px;
height: 100px;
background-image: radial-gradient(circle, var(--text-muted) 1px, transparent 1px);
background-size: 10px 10px;
opacity: 0.2;
}
.about-content-right {
padding-left: 2rem;
}
.about-section-title {
font-size: 2.5rem;
font-weight: 700;
color: var(--secondary-color);
margin-bottom: 1.5rem;
}
.about-description {
font-size: 1.1rem;
color: var(--text-secondary);
margin-bottom: 2rem;
line-height: 1.8;
}
.about-knowledge-box {
background: linear-gradient(135deg, #e0f7fa 0%, #f3e5f5 100%);
padding: 2rem;
border-radius: 1rem;
margin-bottom: 2rem;
display: flex;
align-items: center;
gap: 1.5rem;
}
.about-knowledge-icon {
font-size: 2.5rem;
color: var(--primary-color);
}
.about-knowledge-content h4 {
font-size: 1.5rem;
font-weight: 600;
color: var(--secondary-color);
margin-bottom: 0.5rem;
}
.about-knowledge-content p {
color: var(--text-secondary);
margin-bottom: 0;
}
.about-features-list {
margin-bottom: 2rem;
}
.about-feature-item {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.about-check-icon {
color: var(--success-color);
font-size: 1.2rem;
}
.about-feature-item span {
font-size: 1.1rem;
color: var(--text-secondary);
font-weight: 500;
}
.about-cta-buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.about-learn-more-btn {
background: var(--primary-color);
color: white;
padding: 0.75rem 2rem;
border: none;
border-radius: 0.5rem;
font-weight: 600;
transition: var(--transition);
}
.about-learn-more-btn:hover {
background: var(--primary-dark);
color: white;
transform: translateY(-2px);
}
.about-contact-btn {
background: var(--secondary-color);
color: white;
padding: 0.75rem 2rem;
border: none;
border-radius: 0.5rem;
font-weight: 600;
transition: var(--transition);
}
.about-contact-btn:hover {
background: var(--accent-color);
color: white;
transform: translateY(-2px);
}
/* About Advantages Section */
.about-advantages-section {
margin: 0;
}
.about-program-advantages {
background: var(--secondary-color);
color: white;
padding: 4rem 3rem;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.about-education-label {
background: rgba(255, 255, 255, 0.2);
color: white;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
font-size: 0.9rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
display: inline-block;
margin-bottom: 1.5rem;
}
.about-advantages-title {
font-size: 2.5rem;
font-weight: 700;
color: white;
margin-bottom: 3rem;
}
.about-stats-container {
display: flex;
flex-direction: column;
gap: 2rem;
}
.about-stat-item {
display: flex;
align-items: center;
gap: 1.5rem;
}
.about-stat-icon {
width: 60px;
height: 60px;
background: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: white;
}
.about-stat-content h4 {
font-size: 1rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 0.5rem;
}
.about-stat-number {
font-size: 2.5rem;
font-weight: 700;
color: white;
}
.about-stat-divider {
height: 2px;
background: rgba(255, 255, 255, 0.2);
margin: 1rem 0;
}
.about-institute-promotion {
background: var(--primary-color);
color: white;
padding: 4rem 3rem;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.about-institute-title {
font-size: 2.5rem;
font-weight: 700;
color: white;
margin-bottom: 2rem;
line-height: 1.3;
}
.about-explore-btn {
background: white;
color: var(--primary-color);
padding: 1rem 2.5rem;
border: none;
border-radius: 0.5rem;
font-weight: 600;
font-size: 1.1rem;
transition: var(--transition);
}
.about-explore-btn:hover {
background: #f8f9fa;
color: var(--primary-dark);
transform: translateY(-2px);
}
/* About Awards Section */
.about-awards-section {
padding: 5rem 0;
background: var(--section-bg);
}
.about-section-subtitle {
font-size: 1.2rem;
color: var(--text-muted);
margin-bottom: 3rem;
}
.about-award-card {
background: white;
padding: 2.5rem 2rem;
border-radius: 1rem;
text-align: center;
box-shadow: var(--shadow-md);
transition: var(--transition);
height: 100%;
position: relative;
}
.about-award-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.about-award-icon {
font-size: 3rem;
color: var(--primary-color);
margin-bottom: 1.5rem;
}
.about-award-card h4 {
font-size: 1.3rem;
font-weight: 600;
color: var(--secondary-color);
margin-bottom: 1rem;
}
.about-award-card p {
color: var(--text-secondary);
margin-bottom: 1.5rem;
line-height: 1.6;
}
.about-award-year {
position: absolute;
top: 1rem;
right: 1rem;
background: var(--primary-color);
color: white;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.9rem;
font-weight: 600;
}
/* About Founding Team Section */
.about-founding-team-section {
padding: 5rem 0;
background: white;
}
.about-founder-card {
background: white;
padding: 2.5rem 2rem;
border-radius: 1rem;
text-align: center;
box-shadow: var(--shadow-md);
transition: var(--transition);
height: 100%;
border: 1px solid var(--border-color);
}
.about-founder-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-color: var(--primary-color);
}
.about-founder-image {
margin-bottom: 1.5rem;
}
.about-founder-image img {
width: 120px;
height: 120px;
object-fit: cover;
border: 4px solid var(--primary-color);
}
.about-founder-card h3 {
font-size: 1.5rem;
font-weight: 600;
color: var(--secondary-color);
margin-bottom: 0.5rem;
}
.about-founder-role {
color: var(--primary-color);
font-weight: 600;
margin-bottom: 1rem;
}
.about-founder-bio {
color: var(--text-secondary);
margin-bottom: 1.5rem;
line-height: 1.6;
}
.about-founder-achievements {
margin-bottom: 1.5rem;
}
.about-achievement-tag {
display: inline-block;
background: var(--light-bg);
color: var(--text-secondary);
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.8rem;
margin: 0.25rem;
border: 1px solid var(--border-color);
}
.about-founder-social {
display: flex;
justify-content: center;
gap: 1rem;
}
.about-social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: var(--light-bg);
color: var(--text-secondary);
border-radius: 50%;
transition: var(--transition);
text-decoration: none;
}
.about-social-link:hover {
background: var(--primary-color);
color: white;
transform: translateY(-2px);
}
/* Responsive Design */
@media (max-width: 991.98px) {
.about-content-right {
padding-left: 0;
margin-top: 3rem;
}
.about-program-advantages,
.about-institute-promotion {
padding: 3rem 2rem;
}
.about-advantages-title,
.about-institute-title {
font-size: 2rem;
}
.about-main-title {
font-size: 2.5rem;
}
}
@media (max-width: 767.98px) {
.about-header-section {
padding: 3rem 0 1.5rem;
}
.about-main-title {
font-size: 2rem;
}
.about-section-title {
font-size: 2rem;
}
.about-learning-center-section {
padding: 3rem 0;
}
.about-advantages-section {
margin: 0;
}
.about-program-advantages,
.about-institute-promotion {
padding: 2rem 1.5rem;
}
.about-advantages-title,
.about-institute-title {
font-size: 1.8rem;
}
.about-cta-buttons {
flex-direction: column;
}
.about-cta-buttons .btn {
width: 100%;
text-align: center;
}
.about-awards-section,
.about-founding-team-section {
padding: 3rem 0;
}
.about-award-card,
.about-founder-card {
padding: 2rem 1.5rem;
}
}
@media (max-width: 575.98px) {
.about-main-title {
font-size: 1.8rem;
}
.about-section-title {
font-size: 1.6rem;
}
.about-advantages-title,
.about-institute-title {
font-size: 1.5rem;
}
.about-knowledge-box {
flex-direction: column;
text-align: center;
gap: 1rem;
}
.about-stat-item {
flex-direction: column;
text-align: center;
gap: 1rem;
}
.about-stat-divider {
width: 50%;
margin: 1rem auto;
}
}
/* ===== TEAM MEMBER CARDS ===== */
.team-member-card {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
animation: teamCardFadeIn 0.8s ease-out forwards;
opacity: 0;
transform: translateY(30px);
}
.team-member-card:nth-child(1) {
animation-delay: 0.1s;
}
.team-member-card:nth-child(2) {
animation-delay: 0.3s;
}
.team-member-card:nth-child(3) {
animation-delay: 0.5s;
}
.team-member-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), #6c63ff, var(--primary-color));
transform: scaleX(0);
transition: transform 0.4s ease;
}
.team-member-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
border-color: rgba(108, 99, 255, 0.3);
}
.team-member-card:hover::before {
transform: scaleX(1);
}
.team-card-body {
position: relative;
z-index: 2;
}
.team-avatar-wrapper {
position: relative;
display: inline-block;
}
.team-avatar {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-color), #6c63ff);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
position: relative;
transition: all 0.3s ease;
}
.team-avatar[style*="background-image"] {
background: linear-gradient(135deg, var(--primary-color), #6c63ff);
}
.team-avatar[style*="background-image"] i {
display: none;
}
.team-avatar i {
font-size: 2rem;
color: white;
transition: all 0.3s ease;
}
.team-member-card:hover .team-avatar {
transform: scale(1.1);
box-shadow: 0 12px 35px rgba(108, 99, 255, 0.4);
}
.team-member-card:hover .team-avatar i {
transform: rotateY(360deg);
}
.team-status-badge {
position: absolute;
bottom: 5px;
right: 5px;
width: 20px;
height: 20px;
background: #28a745;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 3px solid white;
animation: pulse 2s infinite;
}
.team-status-badge i {
font-size: 0.5rem;
color: white;
}
.team-member-name {
font-size: 1.25rem;
font-weight: 700;
color: var(--dark);
margin-bottom: 0.5rem;
transition: color 0.3s ease;
}
.team-member-card:hover .team-member-name {
color: var(--primary-color);
}
.team-member-role {
display: inline-block;
background: linear-gradient(135deg, #e3f2fd, #bbdefb);
color: #1976d2;
padding: 0.5rem 1rem;
border-radius: 25px;
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 1rem;
transition: all 0.3s ease;
}
.team-member-card:hover .team-member-role {
background: linear-gradient(135deg, var(--primary-color), #6c63ff);
color: white;
transform: scale(1.05);
}
.team-member-bio {
color: #6c757d;
font-size: 0.9rem;
line-height: 1.6;
margin-bottom: 1.5rem;
transition: color 0.3s ease;
}
.team-member-card:hover .team-member-bio {
color: #495057;
}
.team-expertise {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
margin-bottom: 1.5rem;
}
.expertise-tag {
background: rgba(108, 99, 255, 0.1);
color: var(--primary-color);
padding: 0.25rem 0.75rem;
border-radius: 15px;
font-size: 0.75rem;
font-weight: 500;
border: 1px solid rgba(108, 99, 255, 0.2);
transition: all 0.3s ease;
}
.expertise-tag:hover {
background: var(--primary-color);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(108, 99, 255, 0.3);
}
.team-social-links {
display: flex;
justify-content: center;
gap: 1rem;
margin-top: 1rem;
}
.social-link {
width: 40px;
height: 40px;
background: #f8f9fa;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #6c757d;
text-decoration: none;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.social-link:hover {
background: var(--primary-color);
color: white;
transform: translateY(-3px) scale(1.1);
box-shadow: 0 6px 20px rgba(108, 99, 255, 0.3);
border-color: var(--primary-color);
}
/* Team Card Animations */
@keyframes teamCardFadeIn {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
}
}
/* Responsive Design for Team Cards */
@media (max-width: 991.98px) {
.team-member-card {
margin-bottom: 2rem;
}
.team-avatar {
width: 70px;
height: 70px;
}
.team-avatar i {
font-size: 1.75rem;
}
.team-member-name {
font-size: 1.1rem;
}
}
@media (max-width: 767.98px) {
.team-member-card {
margin-bottom: 1.5rem;
}
.team-avatar {
width: 60px;
height: 60px;
}
.team-avatar i {
font-size: 1.5rem;
}
.team-member-name {
font-size: 1rem;
}
.team-member-role {
font-size: 0.8rem;
padding: 0.4rem 0.8rem;
}
.team-member-bio {
font-size: 0.85rem;
}
.expertise-tag {
font-size: 0.7rem;
padding: 0.2rem 0.6rem;
}
.social-link {
width: 35px;
height: 35px;
}
}
@media (max-width: 575.98px) {
.team-member-card {
margin-bottom: 1rem;
}
.team-avatar {
width: 55px;
height: 55px;
}
.team-avatar i {
font-size: 1.25rem;
}
.team-expertise {
gap: 0.3rem;
}
.expertise-tag {
font-size: 0.65rem;
padding: 0.15rem 0.5rem;
}
.team-social-links {
gap: 0.75rem;
}
.social-link {
width: 32px;
height: 32px;
}
}
/* ===== DARK THEME CONTACT CARDS ===== */
.vidhik-dark-card {
background: #1a1a1a;
padding: 2rem;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-lg);
transition: var(--transition);
height: 100%;
border: 1px solid #333;
position: relative;
overflow: hidden;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.vidhik-dark-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
border-color: var(--primary-color);
}
.vidhik-gradient-line {
position: absolute;
left: 0;
top: 10px;
bottom: 10px;
width: 4px;
background: linear-gradient(to bottom, #4dd0e1, #9c27b0);
border-radius: 2px;
}
.vidhik-card-inner {
padding-left: 1.5rem;
padding-top: 14px;
}
.vidhik-card-heading {
color: #4dd0e1;
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.75rem;
}
.vidhik-card-text {
color: #b0b0b0;
margin-bottom: 1rem;
font-size: 0.9rem;
}
.vidhik-card-button {
color: #0598ab;
text-decoration: none;
font-weight: 500;
transition: var(--transition);
}
.vidhik-card-button:hover {
color: #26c6da;
text-decoration: underline;
}
.vidhik-card-address {
color: #4dd0e1;
font-style: normal;
font-weight: 500;
margin: 0;
font-size: 0.9rem;
line-height: 1.5;
}
/* ===== VIDHIK FORM MAIN SECTION ===== */
.vidhik-form-main-section {
background: white;
position: relative;
}
.vidhik-form-container {
background: white;
padding: 3rem;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-lg);
border: 1px solid var(--border-color);
position: relative;
}
.vidhik-form-main-title {
color: var(--text-primary);
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
}
.vidhik-form-main-subtitle {
color: var(--text-secondary);
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto;
}
.vidhik-form-main {
position: relative;
}
.vidhik-form-label-main {
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.75rem;
display: block;
font-size: 0.95rem;
}
.vidhik-form-input-main,
.vidhik-form-select-main {
width: 100%;
padding: 1rem 1.25rem;
border: 2px solid var(--border-color);
border-radius: var(--border-radius-lg);
font-size: 1rem;
transition: all 0.3s ease;
background: white;
color: var(--text-primary);
font-family: inherit;
}
.vidhik-form-input-main:focus,
.vidhik-form-select-main:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.1);
transform: translateY(-2px);
}
.vidhik-form-input-main::placeholder {
color: var(--text-muted);
}
.vidhik-form-select-main {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.75rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
padding-right: 3rem;
}
.vidhik-form-select-main option {
background: white;
color: var(--text-primary);
padding: 0.5rem;
}
.vidhik-form-error-main {
display: none;
color: var(--danger-color);
font-size: 0.875rem;
margin-top: 0.5rem;
}
.was-validated .vidhik-form-input-main:invalid ~ .vidhik-form-error-main,
.was-validated .vidhik-form-select-main:invalid ~ .vidhik-form-error-main,
.was-validated .vidhik-form-checkbox-main:invalid ~ .vidhik-form-error-main {
display: block;
}
.was-validated .vidhik-form-input-main:invalid,
.was-validated .vidhik-form-select-main:invalid {
border-color: var(--danger-color);
}
.vidhik-form-check-main {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.vidhik-form-checkbox-main {
margin-top: 0.25rem;
width: 1.25rem;
height: 1.25rem;
border: 2px solid var(--border-color);
border-radius: 4px;
transition: all 0.3s ease;
cursor: pointer;
}
.vidhik-form-checkbox-main:checked {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
.vidhik-form-check-label-main {
color: var(--text-secondary);
font-size: 0.95rem;
line-height: 1.5;
margin: 0;
cursor: pointer;
}
.vidhik-form-link-main {
color: var(--primary-color);
text-decoration: none;
font-weight: 500;
}
.vidhik-form-link-main:hover {
text-decoration: underline;
}
.vidhik-form-submit-btn-main {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 1rem 2rem;
border: none;
border-radius: var(--border-radius-lg);
font-weight: 600;
text-decoration: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
position: relative;
overflow: hidden;
font-size: 1rem;
line-height: 1.5;
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
color: white;
box-shadow: var(--shadow-md);
min-width: 200px;
}
.vidhik-form-submit-btn-main:hover {
background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
color: white;
}
.vidhik-form-submit-btn-main:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.3);
}
/* Responsive adjustments for form */
@media (max-width: 767.98px) {
.vidhik-form-container {
padding: 2rem;
}
.vidhik-form-main-title {
font-size: 2rem;
}
.vidhik-form-main-subtitle {
font-size: 1rem;
}
.vidhik-form-submit-btn-main {
min-width: 180px;
padding: 0.875rem 1.5rem;
}
}
@media (max-width: 575.98px) {
.vidhik-form-container {
padding: 1.5rem;
}
.vidhik-form-main-title {
font-size: 1.75rem;
}
.vidhik-form-input-main,
.vidhik-form-select-main {
padding: 0.875rem 1rem;
font-size: 0.95rem;
}
.vidhik-form-submit-btn-main {
min-width: 160px;
padding: 0.75rem 1.25rem;
font-size: 0.95rem;
}
}
/* ===== PROVISION CARDS STYLES ===== */
.provision-card {
background: white;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
padding: 2rem;
height: 100%;
border: 1px solid var(--border-color);
transition: var(--transition);
}
.provision-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.provision-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.provision-header i {
font-size: 2rem;
flex-shrink: 0;
}
.provision-header h3 {
margin: 0;
font-size: 1.5rem;
font-weight: 600;
color: var(--text-primary);
}
.provision-card ul {
list-style: none;
padding: 0;
margin: 0;
}
.provision-card li {
padding: 0.5rem 0;
border-bottom: 1px solid var(--border-color);
position: relative;
padding-left: 1.5rem;
}
.provision-card li:before {
content: "•";
color: var(--primary-color);
font-weight: bold;
position: absolute;
left: 0;
}
.provision-card li:last-child {
border-bottom: none;
}
/* Responsive adjustments for provision cards */
@media (max-width: 767.98px) {
.provision-header {
flex-direction: column;
text-align: center;
gap: 0.75rem;
}
.provision-header h3 {
font-size: 1.25rem;
}
.provision-card {
padding: 1.5rem;
}
}
/* ===== SECTION CARDS STYLES ===== */
.section-card {
/* background: white; */
/* border-radius: var(--border-radius-lg); */
box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
padding: 1.5rem;
height: 100%;
/* border: 1px solid var(--border-color); */
transition: var(--transition);
}
.section-card:hover {
transform: translateY(-2px);
box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 8px;
}
.section-card h4 {
color: var(--text-primary);
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1rem;
}
.section-card p {
color: var(--text-secondary);
margin: 0;
line-height: 1.6;
}
/* ========================================
OFFERINGS SECTION STYLES
======================================== */
.offerings-section {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
position: relative;
overflow: hidden;
}
.offerings-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.offering-card {
background: white;
border-radius: 15px;
padding: 20px;
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
transition: all 0.3s ease;
height: 100%;
position: relative;
overflow: hidden;
border: 1px solid rgba(0,0,0,0.05);
}
.offering-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #007bff, #28a745);
opacity: 0;
transition: opacity 0.3s ease;
}
.offering-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 25px 50px rgba(0,0,0,0.15);
}
.offering-card:hover::before {
opacity: 1;
}
.free-content-card:hover {
box-shadow: 0 25px 50px rgba(40, 167, 69, 0.15);
}
.paid-content-card:hover {
box-shadow: 0 25px 50px rgba(0, 123, 255, 0.15);
}
.offering-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.offering-icon {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: white;
position: relative;
overflow: hidden;
}
.offering-icon::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.2), transparent);
transform: rotate(45deg);
transition: all 0.6s ease;
opacity: 0;
}
.offering-card:hover .offering-icon::before {
opacity: 1;
animation: shine 0.8s ease-in-out;
}
@keyframes shine {
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
.free-content-card .offering-icon {
background: linear-gradient(135deg, #28a745, #20c997);
box-shadow: 0 8px 25px rgba(40, 167, 69, 0.3);
}
.paid-content-card .offering-icon {
background: linear-gradient(135deg, #007bff, #6610f2);
box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);
}
.offering-badge {
padding: 6px 12px;
border-radius: 15px;
font-weight: 600;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
overflow: hidden;
}
.offering-badge::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: left 0.5s ease;
}
.offering-card:hover .offering-badge::before {
left: 100%;
}
.free-badge {
background: linear-gradient(135deg, #d4edda, #c3e6cb);
color: #155724;
border: 2px solid #c3e6cb;
}
.paid-badge {
background: linear-gradient(135deg, #cce5ff, #b3d7ff);
color: #004085;
border: 2px solid #b3d7ff;
}
.offering-title {
font-size: 20px;
font-weight: 700;
margin-bottom: 10px;
color: #2c3e50;
line-height: 1.2;
}
.offering-description {
color: #6c757d;
margin-bottom: 20px;
line-height: 1.6;
font-size: 14px;
}
.offering-features {
margin-bottom: 20px;
}
.feature-item {
display: flex;
align-items: center;
margin-bottom: 8px;
padding: 4px 0;
transition: all 0.3s ease;
}
.feature-item i {
color: #28a745;
margin-right: 10px;
font-size: 14px;
width: 16px;
text-align: center;
}
.feature-item span {
color: #495057;
font-weight: 500;
font-size: 13px;
}
.offering-stats {
display: flex;
gap: 20px;
margin-bottom: 20px;
padding: 15px;
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
border-radius: 10px;
border: 1px solid rgba(0,0,0,0.05);
}
.stat-item {
text-align: center;
flex: 1;
position: relative;
}
.stat-item::after {
content: '';
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 30px;
background: linear-gradient(to bottom, transparent, #dee2e6, transparent);
}
.stat-item:last-child::after {
display: none;
}
.stat-item h4 {
font-size: 24px;
font-weight: 700;
color: #007bff;
margin-bottom: 5px;
line-height: 1;
}
.stat-item p {
color: #6c757d;
margin: 0;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.offering-btn {
width: 100%;
padding: 10px 20px;
font-weight: 600;
border-radius: 8px;
transition: all 0.3s ease;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.5px;
position: relative;
overflow: hidden;
}
.offering-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s ease;
}
.offering-btn:hover::before {
left: 100%;
}
.offering-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.comparison-table {
background: white;
border-radius: 15px;
padding: 25px;
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
border: 1px solid rgba(0,0,0,0.05);
position: relative;
overflow: hidden;
}
.comparison-table::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #28a745, #007bff);
}
.comparison-table h3 {
font-size: 18px;
font-weight: 600;
color: #2c3e50;
margin-bottom: 20px;
}
.comparison-table table {
margin: 0;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.comparison-table th {
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
font-weight: 600;
border: none;
padding: 12px 10px;
color: #495057;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.comparison-table td {
padding: 12px 10px;
border-color: #e9ecef;
font-size: 13px;
vertical-align: middle;
}
.comparison-table tbody tr {
transition: all 0.3s ease;
}
.comparison-table tbody tr:hover {
background: linear-gradient(135deg, #f8f9fa, #ffffff);
transform: scale(1.01);
}
.comparison-table tbody tr:nth-child(even) {
background: rgba(248, 249, 250, 0.5);
}
/* ========================================
RESPONSIVE DESIGN FOR OFFERINGS
======================================== */
/* Large screens (1200px and up) */
@media (min-width: 1200px) {
.offering-card {
padding: 40px;
}
.offering-title {
font-size: 32px;
}
.offering-stats {
gap: 50px;
}
.stat-item h4 {
font-size: 36px;
}
}
/* Medium screens (768px to 1199px) */
@media (max-width: 1199px) and (min-width: 768px) {
.offering-card {
padding: 30px;
}
.offering-title {
font-size: 26px;
}
.offering-stats {
gap: 30px;
}
.stat-item h4 {
font-size: 28px;
}
}
/* Small screens (576px to 767px) */
@media (max-width: 767px) {
.offerings-section {
padding: 40px 0;
}
.offering-card {
padding: 25px;
margin-bottom: 20px;
}
.offering-card-header {
flex-direction: column;
text-align: center;
gap: 15px;
}
.offering-icon {
width: 60px;
height: 60px;
font-size: 24px;
}
.offering-title {
font-size: 24px;
}
.offering-description {
font-size: 15px;
}
.offering-stats {
flex-direction: column;
gap: 20px;
padding: 20px;
}
.stat-item::after {
display: none;
}
.stat-item h4 {
font-size: 28px;
}
.comparison-table {
padding: 25px;
}
.comparison-table h3 {
font-size: 20px;
}
.comparison-table th,
.comparison-table td {
padding: 12px 8px;
font-size: 14px;
}
}
/* Extra small screens (below 576px) */
@media (max-width: 575px) {
.offerings-section {
padding: 30px 0;
}
.offering-card {
padding: 20px;
border-radius: 15px;
}
.offering-icon {
width: 50px;
height: 50px;
font-size: 20px;
}
.offering-title {
font-size: 22px;
}
.offering-description {
font-size: 14px;
}
.offering-features .feature-item {
margin-bottom: 10px;
}
.offering-features .feature-item i {
font-size: 16px;
margin-right: 12px;
}
.offering-features .feature-item span {
font-size: 14px;
}
.offering-stats {
padding: 15px;
gap: 15px;
}
.stat-item h4 {
font-size: 24px;
}
.stat-item p {
font-size: 12px;
}
.offering-btn {
padding: 12px 20px;
font-size: 14px;
}
.comparison-table {
padding: 20px;
}
.comparison-table h3 {
font-size: 18px;
margin-bottom: 20px;
}
.comparison-table th,
.comparison-table td {
padding: 10px 6px;
font-size: 13px;
}
.comparison-table th {
font-size: 12px;
}
}
/* Ultra small screens (below 400px) */
@media (max-width: 399px) {
.offering-card {
padding: 15px;
}
.offering-title {
font-size: 20px;
}
.offering-description {
font-size: 13px;
}
.offering-stats {
padding: 12px;
}
.stat-item h4 {
font-size: 22px;
}
.comparison-table {
padding: 15px;
}
.comparison-table th,
.comparison-table td {
padding: 8px 4px;
font-size: 12px;
}
}
/* ===== GLOBAL MOBILE RESPONSIVE FONT SIZES - Apply to all screens below 575px ===== */
@media (max-width: 575.98px) {
/* Base font reduction */
body {
font-size: 0.875rem !important;
}
/* Heading sizes reduced */
h1 { font-size: 1.5rem !important; line-height: 1.3; }
h2 { font-size: 1.25rem !important; line-height: 1.3; }
h3 { font-size: 1.1rem !important; line-height: 1.3; }
h4 { font-size: 1rem !important; }
h5 { font-size: 0.95rem !important; }
h6 { font-size: 0.9rem !important; }
/* Paragraphs */
p { font-size: 0.875rem; }
/* Buttons */
.btn { font-size: 0.8rem !important; padding: 0.45rem 0.9rem !important; }
.btn-sm { font-size: 0.75rem !important; padding: 0.35rem 0.7rem !important; }
.btn-lg { font-size: 0.85rem !important; padding: 0.5rem 1rem !important; }
/* Cards */
.card-title { font-size: 1rem !important; }
.card-text { font-size: 0.85rem; }
/* Badges */
.badge { font-size: 0.7rem !important; padding: 0.25rem 0.5rem !important; }
/* Forms */
.form-label { font-size: 0.85rem !important; }
.form-control, .form-select { font-size: 0.85rem !important; padding: 0.4rem 0.6rem !important; }
/* Navbar */
.navbar-nav .nav-link { font-size: 0.85rem !important; padding: 0.5rem 0.75rem; }
.dropdown-item { font-size: 0.75rem !important; }
}