/* ==========================================
   LOM CONSULTANCY SOLUTIONS - CUSTOM STYLES
   ========================================== */

/*
   TABLE OF CONTENTS:
   1. CSS Variables and Root Styles
   2. Global Animations and Utilities  
   3. Global Component Styles
   4. Course Details Page Styles
   5. Course Page Styles (Moved from Blade file)
   6. About Page Styles
   7. Contact Page Styles
   8. Related Courses Section Styles
   9. Interactive Effects and Animations
   
   UPDATES:
   - Consolidated all course page CSS from course-page.blade.php
   - Removed duplicate CSS variable definitions
   - Added comprehensive styles for filters, stats, and course cards
   - Improved responsive design and mobile compatibility
   - Enhanced visual effects and animations
   - Organized styles by component and functionality
*/

/* ==========================================
   CSS VARIABLES AND ROOT STYLES
   ========================================== */

/* Custom CSS for Enhanced Home Page - LOM Logo Color Scheme */

/* Color Variables based on LOM Logo */
:root {
    --lom-primary: #3bb991;      /* Main logo green */
    --lom-accent: #a2cc4b;       /* Accent green */
    --lom-light: #6ec072;        /* Light green */
    --lom-medium: #48ba92;       /* Medium green */
    --lom-dark: #79933b;         /* Dark green */
    --lom-secondary: #a3ca4b;    /* Secondary green */
    --lom-gradient: linear-gradient(135deg, #3bb991 0%, #a2cc4b 100%);
    --lom-gradient-alt: linear-gradient(135deg, #48ba92 0%, #79933b 100%);
    --lom-gradient-light: linear-gradient(135deg, #6ec072 0%, #a3ca4b 100%);
    
    /* Additional variables for course page */
    --primary-green: #3bb991;
    --light-green: rgba(59, 185, 145, 0.1);
    --accent-green: #a2cc4b;
    --lom-dark-text: #2c3e50;
    --lom-light-text: #95a5a6;
    --lom-medium-text: #7f8c8d;
}

/* Navbar scroll effect */
.navbar.scrolled {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Hero Section Enhancements */
.hero-section {
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--lom-gradient);
    z-index: 1;
}

.hero-section .container {
    position: relative;
    z-index: 2;
}

/* ==========================================
   GLOBAL COMPONENT STYLES
   ========================================== */

/* Category Card Enhancements */
.category-card {
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.category-card:hover {
    transform: translateY(-5px);
    background: var(--lom-gradient);
    color: white;
}

.category-card:hover .category-icon {
    color: white;
    transform: scale(1.1);
}

.category-icon {
    transition: all 0.3s ease;
    color: var(--lom-primary);
}

/* Why Choose Us Section */
.feature-card {
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.feature-icon {
    transition: all 0.3s ease;
}

.feature-card:hover .feature-icon {
    transform: scale(1.1) rotate(5deg);
}

/* Testimonials Section */
.testimonial-card {
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.star-rating {
    color: #ffc107;
}

/* CTA Section */
.cta-section {
    background: var(--lom-gradient);
}

.cta-btn {
    transition: all 0.3s ease;
}

.cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(59, 185, 145, 0.3);
}

/* ==========================================
   GLOBAL ANIMATIONS AND UTILITIES
   ========================================== */

/* Loading Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease forwards;
}

/* Pulse Animation for Statistics */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.pulse-animation {
    animation: pulse 2s infinite;
}

/* Section Spacing */
.section-spacing {
    padding: 80px 0;
}

.section-spacing-sm {
    padding: 60px 0;
}

/* Gradient Button */
.btn-gradient {
    background: var(--lom-gradient);
    border: none;
    color: white;
    transition: all 0.3s ease;
}

.btn-gradient:hover {
    background: var(--lom-gradient-alt);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(59, 185, 145, 0.3);
    color: white;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--lom-gradient);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--lom-gradient-alt);
}

/* Responsive Improvements */
@media (max-width: 768px) {
    .hero-section {
        min-height: 70vh;
    }
    
    .hero-section .display-3 {
        font-size: 2.5rem;
    }
    
    .section-spacing {
        padding: 60px 0;
    }
    
    .section-spacing-sm {
        padding: 40px 0;
    }
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Text gradient utilities */
.text-gradient,
.text-gradient-primary {
    background: var(--lom-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
}

.text-gradient-secondary {
    background: var(--gradient-secondary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
}

.text-gradient.text-success {
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Floating Action Button */
.floating-action-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
}

.fab-main {
    width: 60px;
    height: 60px;
    border: none;
    transition: all 0.3s ease;
    transform: rotate(0deg);
}

.fab-main:hover {
    transform: scale(1.1) rotate(90deg);
    background: var(--lom-gradient) !important;
}

.fab-main.active {
    transform: rotate(135deg);
    background: var(--lom-dark) !important;
}

.fab-options {
    position: absolute;
    bottom: 70px;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.fab-options.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.fab-option {
    width: 50px;
    height: 50px;
    border: none;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    transform: scale(0);
}

.fab-options.show .fab-option {
    transform: scale(1);
}

.fab-options.show .fab-option:nth-child(1) {
    transition-delay: 0.1s;
}

.fab-options.show .fab-option:nth-child(2) {
    transition-delay: 0.2s;
}

.fab-options.show .fab-option:nth-child(3) {
    transition-delay: 0.3s;
}

.fab-option:hover {
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .floating-action-btn {
        bottom: 20px;
        right: 20px;
    }
    
    .fab-main {
        width: 50px;
        height: 50px;
    }
    
    .fab-option {
        width: 40px;
        height: 40px;
    }
}

/* Course Details Page Enhancements */

/* Header Section */
.header-2 .mask.bg-gradient-faded-secondary {
    background: var(--lom-gradient) !important;
}

/* Navigation Tabs */
.nav-tabs .nav-link {
    border: none;
    color: #6c757d;
    font-weight: 500;
    padding: 0.8rem 1.5rem;
    transition: all 0.3s ease;
    border-radius: 0.5rem 0.5rem 0 0 !important;
}

.nav-tabs .nav-link.active {
    background-color: var(--lom-primary) !important;
    color: white !important;
    border-color: var(--lom-primary) !important;
    box-shadow: 0 2px 10px rgba(59, 185, 145, 0.3);
}

.nav-tabs .nav-link:hover:not(.active) {
    background-color: rgba(59, 185, 145, 0.1);
    color: var(--lom-primary);
    border-color: transparent;
}

/* Overview Section */
.learning-objectives .fas.fa-check-circle {
    color: var(--lom-primary) !important;
    font-size: 1rem;
}

.requirements .fas.fa-info-circle {
    color: var(--lom-accent) !important;
    font-size: 1rem;
}

/* Course Content Stats */
.course-content-stats {
    background: var(--lom-gradient) !important;
    color: white;
    border-radius: 1rem;
    padding: 2rem 1rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 0.5rem 1rem rgba(59, 185, 145, 0.2);
}

/* Accordion Styling */
.accordion-button {
    background-color: #f8f9fa;
    border: none;
    box-shadow: none;
    padding: 1rem 1.25rem;
    border-radius: 0.75rem !important;
    transition: all 0.3s ease;
}

.accordion-button:not(.collapsed) {
    background: var(--lom-gradient-light) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(59, 185, 145, 0.2);
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(59, 185, 145, 0.25);
    border-color: transparent;
}

.accordion-button .badge.bg-primary {
    background-color: var(--lom-primary) !important;
}

.accordion-button .badge.bg-secondary {
    background-color: var(--lom-medium) !important;
}

.accordion-button .text-primary {
    color: var(--lom-primary) !important;
}

.accordion-item {
    border: 1px solid rgba(59, 185, 145, 0.1);
    border-radius: 0.75rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.accordion-item:hover {
    box-shadow: 0 4px 15px rgba(59, 185, 145, 0.15);
    transform: translateY(-2px);
}

/* Lesson Items */
.lesson-item {
    transition: all 0.3s ease;
    border: 1px solid transparent;
    border-radius: 0.5rem;
}

.lesson-item:hover {
    background-color: rgba(59, 185, 145, 0.05) !important;
    border-color: var(--lom-primary);
    box-shadow: 0 2px 8px rgba(59, 185, 145, 0.1);
    transform: translateX(8px);
}

.lesson-item .badge.bg-success {
    background-color: var(--lom-accent) !important;
}

.lesson-item .badge.bg-primary {
    background-color: var(--lom-primary) !important;
}

.lesson-item .text-danger {
    color: var(--lom-primary) !important;
}

.lesson-item .text-success {
    color: var(--lom-accent) !important;
}

/* Sidebar Enhancements */
.card.sticky-top {
    border: 1px solid rgba(59, 185, 145, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-radius: 1rem;
    overflow: hidden;
}

.card.sticky-top .btn-primary {
    background: var(--lom-gradient);
    border: none;
    padding: 0.8rem 2rem;
    font-weight: 600;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.card.sticky-top .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(59, 185, 145, 0.3);
}

.list-group-item {
    border-color: rgba(59, 185, 145, 0.1);
    transition: all 0.3s ease;
}

.list-group-item:hover {
    background-color: rgba(59, 185, 145, 0.05);
}

.list-group-item i {
    color: var(--lom-primary);
}

/* Course Includes Section */
.card-body ul.list-unstyled li i {
    color: var(--lom-accent) !important;
    width: 20px;
    text-align: center;
}

/* Breadcrumb Styling */
.breadcrumb-item a {
    color: var(--lom-primary) !important;
    text-decoration: none;
    transition: all 0.3s ease;
}

.breadcrumb-item a:hover {
    color: var(--lom-dark) !important;
}

/* Price Display */
.card-body h3 {
    color: var(--lom-primary);
    font-weight: 700;
}

/* Alert Styling */
.alert-info {
    background: linear-gradient(135deg, rgba(59, 185, 145, 0.1) 0%, rgba(162, 204, 75, 0.1) 100%);
    border: 1px solid rgba(59, 185, 145, 0.2);
    color: var(--lom-dark);
}

.alert-info .fas {
    color: var(--lom-primary);
}

/* Tab Content Animation */
.tab-pane {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Instructor Section */
.instructor-avatar {
    border: 3px solid var(--lom-primary);
    transition: all 0.3s ease;
}

.instructor-avatar:hover {
    box-shadow: 0 4px 15px rgba(59, 185, 145, 0.3);
    transform: scale(1.05);
}

/* Empty State Styling */
.text-center .fa-book-open,
.text-center .fa-info-circle {
    color: var(--lom-light) !important;
}

/* Video Preview Enhancement */
.ratio iframe {
    border-radius: 0.75rem;
}

/* Course Image Enhancement */
.img-fluid.rounded {
    border-radius: 1rem !important;
    transition: all 0.3s ease;
}

.img-fluid.rounded:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Contact Page Specific Enhancements */

/* Contact Info Card Icons */
.contact-icon-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.contact-icon-wrapper:hover {
    background: rgba(162, 204, 75, 0.2);
    transform: scale(1.1);
}

.contact-icon-wrapper .contact-icon {
    color: var(--lom-accent) !important;
}

/* Form Enhancements */
.contact-form .form-control {
    border: 2px solid #e9ecef;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
}

.contact-form .form-control:focus {
    border-color: var(--lom-primary);
    box-shadow: 0 0 0 0.2rem rgba(59, 185, 145, 0.25);
    background-color: rgba(59, 185, 145, 0.02);
}

.contact-form textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

/* Radio Button Styling */
.form-check-input[type="radio"]:checked {
    background-color: var(--lom-primary);
    border-color: var(--lom-primary);
}

.form-check-input[type="radio"]:focus {
    box-shadow: 0 0 0 0.25rem rgba(59, 185, 145, 0.25);
}

/* Social Media Buttons */
.social-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.1);
}

.social-btn:hover {
    background: rgba(162, 204, 75, 0.2);
    transform: translateY(-3px);
}

/* Contact Card Animation */
.contact-card {
    border-radius: 1rem;
    overflow: hidden;
}

.contact-card:hover {
    box-shadow: 0 15px 35px rgba(59, 185, 145, 0.1);
}

/* Form Labels */
.form-label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--lom-dark);
}

/* Contact Information Styling */
.contact-info-card {
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
}

/* Enhanced Animations - Using global fadeInUp animation */
.contact-form {
    animation: fadeInUp 0.8s ease-out 0.3s both;
}

/* Input Group Select Styling */
.input-group-text {
    background-color: rgba(59, 185, 145, 0.1);
    border-color: var(--lom-primary);
    color: var(--lom-primary);
    font-weight: 500;
}

/* Contact Button Animation */
.contact-btn {
    position: relative;
    overflow: hidden;
}

.contact-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;
}

.contact-btn:hover::before {
    left: 100%;
}

/* Terms Link Hover */
.contact-form a {
    transition: all 0.3s ease;
}

.contact-form a:hover {
    color: var(--lom-dark) !important;
    text-decoration: underline !important;
}

/* Map Section Enhancements */

/* Map Container Styling */
.map-container {
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.map-container:hover {
    box-shadow: 0 15px 40px rgba(59, 185, 145, 0.15);
    transform: translateY(-2px);
}

.map-container iframe {
    border-radius: 1rem;
    filter: grayscale(20%) contrast(1.1) brightness(1.05);
    transition: all 0.5s ease;
}

.map-container:hover iframe {
    filter: grayscale(0%) contrast(1.2) brightness(1.1);
}

/* Map Overlay Card */
.map-overlay-card {
    backdrop-filter: blur(15px);
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.map-overlay-card:hover {
    backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Office Hours Section */
.office-hours-item {
    padding: 2rem 1.5rem;
    border-radius: 1rem;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.office-hours-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--lom-gradient-light);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.office-hours-item:hover::before {
    opacity: 0.05;
}

.office-hours-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(59, 185, 145, 0.15);
}

.office-hours-item i {
    transition: all 0.4s ease;
}

.office-hours-item:hover i {
    transform: scale(1.15) rotate(5deg);
    color: var(--lom-primary) !important;
}

/* Map Section Background */
.map-section {
    background: linear-gradient(135deg, rgba(59, 185, 145, 0.02) 0%, rgba(162, 204, 75, 0.02) 100%);
}

/* Directions Button Enhancement */
.map-overlay-card .contact-btn {
    background: var(--lom-gradient) !important;
    border: none;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
}

.map-overlay-card .contact-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 185, 145, 0.3);
}

/* Office Hours Alert Enhancement */
.office-hours-alert {
    background: linear-gradient(135deg, rgba(59, 185, 145, 0.08) 0%, rgba(162, 204, 75, 0.08) 100%);
    border: 1px solid rgba(59, 185, 145, 0.15);
    border-radius: 1rem;
    padding: 1rem 1.5rem;
}

/* Responsive Map Adjustments */
@media (max-width: 768px) {
    .map-container .position-absolute {
        position: relative !important;
        margin: 1rem !important;
        top: auto !important;
        left: auto !important;
    }
    
    .map-container iframe {
        height: 300px;
    }
    
    .office-hours-item {
        padding: 1.5rem 1rem;
        margin-bottom: 1rem;
    }
    
    .map-overlay-card {
        max-width: 100% !important;
    }
}

@media (max-width: 576px) {
    .map-container iframe {
        height: 250px;
    }
    
    .office-hours-item {
        text-align: center;
    }
}

/* Loading Animation for Map */
.map-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.map-loading::after {
    content: '';
    width: 40px;
    height: 40px;
    border: 4px solid rgba(59, 185, 145, 0.1);
    border-left: 4px solid var(--lom-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* About Page Specific Enhancements */

/* About Section Styling */
.about-section {
    background: linear-gradient(135deg, rgba(59, 185, 145, 0.02) 0%, rgba(162, 204, 75, 0.02) 100%);
}

.about-image-overlay {
    background: var(--lom-gradient);
    opacity: 0.15;
    transition: opacity 0.3s ease;
}

.about-section:hover .about-image-overlay {
    opacity: 0.25;
}

.about-icon {
    background: var(--lom-gradient) !important;
    color: white !important;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.about-icon:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 8px 25px rgba(59, 185, 145, 0.3);
}

/* Text Gradient Enhancement - Using unified text-gradient system */

/* Services Navigation */
.nav-pills .nav-link {
    color: var(--lom-dark);
    transition: all 0.3s ease;
    border-radius: 0.75rem;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    margin: 0 0.25rem;
    position: relative;
    overflow: hidden;
}

.nav-pills .nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--lom-gradient-light);
    transition: left 0.5s ease;
    z-index: -1;
}

.nav-pills .nav-link:hover::before {
    left: 0;
}

.nav-pills .nav-link.active {
    background: var(--lom-gradient) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(59, 185, 145, 0.3);
    transform: translateY(-2px);
}

.nav-pills .nav-link:hover:not(.active) {
    background: rgba(59, 185, 145, 0.1);
    color: var(--lom-primary);
    transform: translateY(-1px);
}

/* Service Icons */
.service-icon {
    color: var(--lom-accent);
    transition: all 0.3s ease;
}

.nav-pills .nav-link.active .service-icon {
    color: white !important;
}

.nav-pills .nav-link:hover .service-icon {
    transform: scale(1.1);
}

/* Services Card */
.services-card {
    border: 1px solid rgba(59, 185, 145, 0.1);
    transition: all 0.3s ease;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

.services-card:hover {
    box-shadow: 0 15px 35px rgba(59, 185, 145, 0.15);
    transform: translateY(-5px);
    border-color: rgba(59, 185, 145, 0.2);
}

/* Tab Content Styling */
.tab-content .card-header h5 {
    color: var(--lom-primary);
    font-weight: 600;
    position: relative;
    padding-bottom: 0.5rem;
}

.tab-content .card-header h5::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--lom-gradient);
    border-radius: 2px;
}

/* Check Icons in Tab Content */
.fa-circle-check {
    color: var(--lom-primary) !important;
    font-size: 1rem !important;
}

.tab-pane .mb-3:hover .fa-circle-check,
.tab-pane .mb-4:hover .fa-circle-check {
    transform: scale(1.2);
    color: var(--lom-accent) !important;
}

/* About Text Enhancements */
.about-text h3 {
    color: var(--lom-dark);
    font-weight: 700;
    position: relative;
}

.about-text h3::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 60px;
    height: 4px;
    background: var(--lom-gradient);
    border-radius: 2px;
}

.about-text .lead {
    color: var(--lom-dark);
    font-weight: 500;
}

/* Image Enhancements */
.about-image {
    border-radius: 1rem;
    transition: all 0.5s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.about-image:hover {
    transform: scale(1.02) rotate(1deg);
    box-shadow: 0 20px 40px rgba(59, 185, 145, 0.2);
}

/* Audit Service Cards */
.audit-service-card {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.audit-service-card::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;
}

.audit-service-card:hover::before {
    left: 100%;
}

.audit-service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Alert Enhancements */
.alert {
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    border: none;
    position: relative;
    overflow: hidden;
}

.alert::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--lom-gradient);
}

/* Tab Animation */
.tab-pane {
    animation: fadeInUp 0.5s ease;
}

/* Tab Animation - Using global fadeInUp animation */
.tab-pane {
    animation: fadeInUp 0.5s ease;
}

/* Feature List Styling */
.about-text .d-flex {
    padding: 0.5rem 0;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.about-text .d-flex:hover {
    background: rgba(59, 185, 145, 0.05);
    padding-left: 1rem;
    transform: translateX(5px);
}

/* Responsive Enhancements */
@media (max-width: 768px) {
    .about-image {
        margin-top: 2rem !important;
        margin-left: 0 !important;
    }
    
    .nav-pills .nav-link {
        padding: 0.5rem 1rem;
        margin: 0.25rem 0;
        text-align: center;
    }
    
    .about-text h3::after {
        width: 40px;
        height: 3px;
    }
    
    .audit-service-card {
        margin-bottom: 1rem;
    }
}

/* Loading Animation for Service Cards */
.service-loading {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

.service-loading.loaded {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================
   COURSE DETAILS PAGE STYLES
   ========================================== */

.accordion-button.collapsed .when-expanded,
.accordion-button:not(.collapsed) .when-collapsed {
    display: none;
}

/* Course Description Enhancements */
.learning-objectives li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f8f9fa;
}

.learning-objectives li:last-child {
    border-bottom: none;
}

.learning-objectives .fas {
    font-size: 1rem;
    color: var(--lom-primary);
}

.requirements .fas.fa-info-circle {
    color: var(--lom-accent) !important;
    font-size: 1rem;
}

/* Curriculum Enhancements */
.chapter-number .badge {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.75rem;
}

.lesson-number .badge {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
}

.lesson-item {
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.lesson-item:hover {
    background-color: #fff !important;
    border-color: #dee2e6;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transform: translateX(5px);
}

.lesson-title {
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.85rem;
}

/* Course Content Stats (moved to avoid duplication) */
.course-content-stats {
    background: var(--lom-gradient);
    color: white;
    border-radius: 1rem;
    padding: 2rem 1rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 0.5rem 1rem rgba(59, 185, 145, 0.2);
}

.lesson-meta .badge {
    font-size: 0.6rem;
}

.course-description {
    line-height: 1.6;
}

.course-description p {
    margin-bottom: 1rem;
}

.fa-chevron-down {
    transition: transform 0.3s ease;
}

.badge.bg-light {
    border: 1px solid #dee2e6;
}

.stat-item h4 {
    font-weight: 700;
    font-size: 1.75rem;
}

.stat-item small {
    font-size: 0.85rem;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-item i {
    opacity: 0.8;
}

/* Enhanced Button Hover Effects - General buttons without specific classes */
.btn:hover:not(.btn-primary):not(.contact-btn):not(.course-btn):not(.explore-more-btn) {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(59, 185, 145, 0.3);
}

/* Card Enhancements */
.card {
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Recently Updated Badge */
.recently-updated {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    font-size: 0.7rem;
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-weight: 600;
    animation: glow 2s infinite alternate;
}

@keyframes glow {
    from {
        box-shadow: 0 0 5px rgba(40, 167, 69, 0.3);
    }
    to {
        box-shadow: 0 0 15px rgba(40, 167, 69, 0.6);
    }
}

/* Enhanced loading states */
.course-loading {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

.course-loading.loaded {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================
   COURSE PAGE STYLES
   ========================================== */

/* Enhanced Filter Card Styles */
.filter-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: none !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: sticky;
    top: 20px;
    overflow: hidden;
    max-width: 100%;
}

.filter-card .card-body,
.filter-card > div {
    padding: 1rem;
    overflow: hidden;
}

.filter-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.filter-header-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--accent-green) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    color: white;
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(59, 185, 145, 0.3);
}

.course-search-title {
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--accent-green) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    font-size: 1.1rem;
}

/* Filter Section Styles */
.filter-section {
    border-bottom: 1px solid rgba(59, 185, 145, 0.1);
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.filter-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}

.filter-section h5 {
    color: var(--primary-green);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    padding: 0.375rem 0.5rem;
    background: linear-gradient(135deg, rgba(59, 185, 145, 0.05) 0%, rgba(162, 204, 75, 0.05) 100%);
    border-radius: 0.375rem;
    border-left: 2px solid var(--primary-green);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.form-check {
    margin-bottom: 0.5rem;
    padding: 0.25rem 0.375rem;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: flex-start;
    word-wrap: break-word;
    overflow: hidden;
}

.form-check:hover {
    background: var(--light-green);
    transform: translateX(2px);
}

.form-check-input {
    margin-top: 0.25rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.form-check-label {
    font-weight: 500;
    color: var(--lom-dark-text);
    cursor: pointer;
    font-size: 0.9rem;
    flex: 1;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.4;
}

.form-check-label .badge {
    font-size: 0.7rem;
    padding: 0.125rem 0.25rem;
}

.form-check-input:checked {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
}

.form-check-input:focus {
    border-color: var(--primary-green);
    box-shadow: 0 0 0 0.25rem rgba(59, 185, 145, 0.25);
}

/* Price Slider Styles */
.price-slider-container {
    position: relative;
    margin: 0.75rem 0;
}

.form-range {
    background: transparent;
    height: 4px;
}

.form-range::-webkit-slider-track {
    background: linear-gradient(135deg, rgba(59, 185, 145, 0.2) 0%, rgba(162, 204, 75, 0.2) 100%);
    height: 4px;
    border-radius: 2px;
}

.form-range::-webkit-slider-thumb {
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--accent-green) 100%);
    height: 16px;
    width: 16px;
    border-radius: 50%;
    border: none;
    box-shadow: 0 2px 8px rgba(59, 185, 145, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
}

.form-range::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 3px 12px rgba(59, 185, 145, 0.6);
}

.price-tooltip {
    position: absolute;
    top: -40px;
    background: var(--primary-green);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    transform: translateX(-50%);
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
}

.price-tooltip.show {
    opacity: 1;
    transform: translateX(-50%) translateY(-5px);
}

.price-tooltip:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--primary-green) transparent transparent transparent;
}

/* Star Rating Styles */
.star-rating {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.star-rating i {
    color: #ffc107;
    font-size: 0.7rem;
    margin-right: 1px;
}

.form-check-label .d-flex {
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
}

.form-check-label .d-flex span:last-child {
    margin-left: auto;
    white-space: nowrap;
}

/* Filter Loading Styles */
.filter-loading {
    display: none;
    text-align: center;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(59, 185, 145, 0.05) 0%, rgba(162, 204, 75, 0.05) 100%);
    border-radius: 0.75rem;
    border: 1px solid rgba(59, 185, 145, 0.2);
    margin-top: 1rem;
}

.filter-loading.show {
    display: block;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Enhanced Stats Banner */
.enhanced-stats-banner {
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--accent-green) 100%);
    border-radius: 1rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
    color: white;
    box-shadow: 0 8px 25px rgba(59, 185, 145, 0.25);
}

.stats-bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.1;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(255,255,255,0.2) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.2) 0%, transparent 50%);
}

.floating-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.shape {
    position: absolute;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    animation: float 8s ease-in-out infinite;
}

.shape-1 { width: 50px; height: 50px; top: 15%; left: 15%; animation-delay: 0s; }
.shape-2 { width: 35px; height: 35px; top: 70%; left: 75%; animation-delay: 2s; }
.shape-3 { width: 25px; height: 25px; top: 35%; left: 80%; animation-delay: 4s; }
.shape-4 { width: 60px; height: 60px; top: 75%; left: 25%; animation-delay: 1s; }

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(180deg); }
}

.stats-content {
    position: relative;
    z-index: 2;
}

.stats-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.stats-subtitle {
    font-size: 0.85rem;
    opacity: 0.9;
    margin-bottom: 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.stat-item {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    border-radius: 0.75rem;
    padding: 0.75rem 0.5rem;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.stat-item:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px) scale(1.01);
}

.stat-icon {
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
    opacity: 0.9;
}

.stat-number {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.125rem;
}

.stat-label {
    font-size: 0.7rem;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.stats-progress-section {
    margin-top: 1rem;
}

.progress-item {
    margin-bottom: 0.75rem;
}

.progress-header {
    display: flex;
    justify-content: between;
    align-items: center;
    margin-bottom: 0.375rem;
}

.progress-label {
    font-size: 0.8rem;
    font-weight: 600;
}

.progress-value {
    font-size: 0.8rem;
    font-weight: 700;
}

.progress-bar-custom {
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 100%);
    border-radius: 3px;
    width: 0;
    transition: width 1s ease;
}

/* Active Filters Card */
.active-filters-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 1px solid rgba(59, 185, 145, 0.2) !important;
    border-radius: 1rem !important;
}

.filter-icon-green {
    color: var(--primary-green);
}

.filter-text-green {
    color: var(--primary-green);
    font-weight: 700;
}

.filter-remove {
    text-decoration: none;
    transition: all 0.3s ease;
}

.filter-remove:hover {
    transform: scale(1.2);
}

.clear-all-filters {
    transition: all 0.3s ease;
}

.clear-all-filters:hover {
    background: #dc3545 !important;
    transform: scale(1.05);
}

/* Course Card Enhancements */
.course-card {
    border-radius: 1rem !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    background: #ffffff;
    border: none !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.course-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(59, 185, 145, 0.15);
}

.course-card .card-header {
    border: none;
    background: transparent;
}

.course-image {
    transition: all 0.4s ease;
    height: 200px;
    object-fit: cover;
    width: 100%;
}

.course-card:hover .course-image {
    transform: scale(1.05);
}

.course-level-badge {
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--accent-green) 100%);
    color: white;
    font-weight: 600;
    border-radius: 1rem;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.course-category-badge {
    background: linear-gradient(135deg, rgba(59, 185, 145, 0.1) 0%, rgba(162, 204, 75, 0.1) 100%);
    color: var(--primary-green);
    border: 1px solid rgba(59, 185, 145, 0.2);
    font-weight: 600;
}

.course-title {
    font-weight: 700;
    line-height: 1.4;
}

.course-title a {
    color: var(--lom-dark-text);
    text-decoration: none;
    transition: all 0.3s ease;
}

.course-title a:hover {
    color: var(--primary-green);
}

/* Enhanced Course Title Link with Animated Underline */
.course-title-link {
    color: var(--lom-dark-text) !important;
    text-decoration: none !important;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    font-weight: 700;
}

.course-title-link:after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(135deg, var(--lom-primary), var(--lom-accent));
    transition: width 0.3s ease;
    border-radius: 1px;
}

.course-title-link:hover:after {
    width: 100%;
}

.course-title-link:hover {
    color: var(--lom-primary) !important;
    transform: translateY(-1px);
}

/* Ensure the course card hover doesn't interfere with title link hover */
.course-card:hover .course-title-link {
    color: var(--lom-dark-text) !important;
}

.course-card:hover .course-title-link:hover {
    color: var(--lom-primary) !important;
}

.course-description {
    color: #6c757d;
    line-height: 1.6;
}

.instructor-avatar {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--accent-green) 100%);
    color: white;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 4px 15px rgba(59, 185, 145, 0.3);
    transition: all 0.3s ease;
}

.instructor-name {
    color: var(--lom-dark-text);
    font-weight: 600;
}

.course-stats-bg {
    background: rgba(248, 249, 250, 0.8);
    border-radius: 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.rating-text {
    color: #ffc107;
}

.course-price {
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--accent-green) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Count Title Styling */
.course-count-title {
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--accent-green) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}

/* Sort Select Styling */
.sort-select {
    border: 2px solid rgba(59, 185, 145, 0.2);
    border-radius: 0.75rem;
    transition: all 0.3s ease;
}

.sort-select:focus {
    border-color: var(--primary-green);
    box-shadow: 0 0 0 0.25rem rgba(59, 185, 145, 0.25);
}

/* No Results Styling */
.no-results-container {
    text-align: center;
    padding: 4rem 2rem;
    background: linear-gradient(135deg, rgba(59, 185, 145, 0.05) 0%, rgba(162, 204, 75, 0.05) 100%);
    border-radius: 1.5rem;
    border: 2px dashed rgba(59, 185, 145, 0.2);
}

.no-results-icon {
    font-size: 4rem;
    color: var(--primary-green);
    opacity: 0.6;
    margin-bottom: 1.5rem;
}

.no-results-title {
    color: var(--lom-dark-text);
    font-weight: 700;
    margin-bottom: 1rem;
}

.no-results-text {
    color: #6c757d;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* Ripple Effect for Stat Items */
@keyframes ripple-effect {
    to {
        transform: scale(2);
        opacity: 0;
    }
}

/* Animation for loading cards */
.course-card {
    animation: slideUp 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; }

@keyframes slideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Enhanced Button Styles */
.btn-primary {
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--accent-green) 100%);
    border: none;
    border-radius: 0.75rem;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(59, 185, 145, 0.4);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--accent-green) 0%, var(--primary-green) 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 185, 145, 0.6);
}

.btn-outline-secondary {
    border: 2px solid var(--lom-medium-text);
    color: var(--lom-medium-text);
    border-radius: 0.75rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-outline-secondary:hover {
    background: var(--lom-medium-text);
    color: white;
    transform: translateY(-1px);
}

/* Responsive Design for Course Page */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .filter-card {
        position: relative;
        top: 0;
        padding: 0.75rem !important;
        margin-bottom: 1.5rem;
    }

    .filter-card .card-body,
    .filter-card > div {
        padding: 0.75rem;
    }
    
    .course-card {
        margin-bottom: 1rem;
    }
    
    .enhanced-stats-banner {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .stats-title {
        font-size: 1rem;
    }
    
    .stats-subtitle {
        font-size: 0.8rem;
    }

    .stat-item {
        padding: 0.5rem 0.375rem;
    }

    .stat-number {
        font-size: 1rem;
    }

    .stat-label {
        font-size: 0.65rem;
    }

    .form-check {
        padding: 0.2rem 0.25rem;
        margin-bottom: 0.375rem;
    }

    .form-check-label {
        font-size: 0.85rem;
    }

    .star-rating i {
        font-size: 0.65rem;
    }

    .filter-section h5 {
        font-size: 0.85rem;
        padding: 0.25rem 0.375rem;
    }
}

@media (max-width: 576px) {
    .form-check-label .d-flex {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-check-label .d-flex span:last-child {
        margin-left: 0;
        margin-top: 0.25rem;
    }

    .star-rating {
        margin-bottom: 0.25rem;
    }
}

/* ========================================== */