/* --- Root Variables: Your Enhanced Design System (Keep this as is) --- */
:root {
    /* Colors (Inspired by Naukri's professional yet inviting palette) */
    --primary-color: #0073e6; /* A clean, deep blue for primary actions & branding */
    --secondary-color: #6c757d; /* Standard gray for secondary text */
    --dark-bg-color: #1a1a1a; /* Very dark for specific elements like footer, but less prominent */
    --light-bg-color: #f8f9fa; /* Very light, almost white background for content areas */
    --text-color-dark: #212529; /* Deep charcoal for main body text (strong contrast) */
    --text-color-light: #495057; /* Slightly softer text for general use */
    --text-color-muted: #868e96; /* Lighter gray for helper text, small details */
    --accent-color: #00a58a; /* A vibrant green for success/action, like Naukri's green */
    --white-color: #ffffff;
    --border-color-light: #e9ecef; /* Subtle light gray border */
    --border-color-medium: #dee2e6; /* Slightly darker border for elements */
    --border-color-dark: rgba(0, 0, 0, 0.1); /* Darker border for internal elements */

    /* Shadows (Soft and subtle for elevation) */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.1); /* More pronounced for cards/modals */
    --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.12);
    --shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.05);

    /* Typography (Clean, modern sans-serifs) */
    --font-family-base: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* Prioritize Inter if loaded, fallback to system fonts */
    --font-size-base: 0.8rem; /* Adjusted: ~12.8px - Slightly smaller for a more compact feel */
    --font-size-sm: 0.75rem; /* Adjusted: ~12px */
    --font-size-md: 0.875rem; /* Adjusted: ~14px */
    --font-size-lg: 1rem; /* Adjusted: ~16px - Used to be xl, now base */
    --font-size-xl: 1.125rem; /* Adjusted: ~18px - Used to be 2xl, now xl */
    --font-size-2xl: 1.25rem; /* Adjusted: ~20px - Used to be 3xl, now 2xl */
    --font-size-3xl: 1.5rem; /* Adjusted: ~24px - New largest heading size */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Spacing (Consistent vertical and horizontal rhythm) */
    --spacing-xs: 0.25rem; /* 4px */
    --spacing-sm: 0.5rem; /* 8px */
    --spacing-md: 0.75rem; /* Adjusted: 12px */
    --spacing-lg: 1.25rem; /* Adjusted: 20px */
    --spacing-xl: 1.75rem; /* Adjusted: 28px */
    --spacing-2xl: 2.5rem; /* Adjusted: 40px */

    /* Border Radius (Subtle rounding for modern look) */
    --border-radius-xs: 0.25rem; /* 4px */
    --border-radius-sm: 0.375rem; /* 6px */
    --border-radius-md: 0.5rem; /* 8px */
    --border-radius-lg: 0.75rem; /* 12px */
    --border-radius-pill: 50px;

    /* Transitions (Smooth and quick feedback) */
    --transition-fast: all 0.15s ease-out;
    --transition-base: all 0.3s ease-out;
    --transition-slow: all 0.5s ease-out;
}

/* --- Global Base Styles (Keep this as is) --- */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base); /* Uses updated base font size */
    background: var(--light-bg-color);
    color: var(--text-color-light);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-color-dark);
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}
/* Adjust specific heading sizes to use new variables or fixed values */
h1 { font-size: var(--font-size-3xl); } /* Uses new 3xl */
h2 { font-size: var(--font-size-2xl); } /* Uses new 2xl */
h3 { font-size: var(--font-size-xl); }  /* Uses new xl */
h4 { font-size: var(--font-size-lg); }  /* Uses new lg */
h5 { font-size: var(--font-size-md); }  /* Uses new md */
h6 { font-size: var(--font-size-base); } /* Uses new base */


p {
    margin-bottom: var(--spacing-md);
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition-fast);
}

a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

/* --- Topbar (Keep this as is) --- */
.topbar {
    background: var(--white-color);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border-color-light);
    font-size: var(--font-size-sm);
    color: var(--text-color-muted);
    padding: var(--spacing-sm) 0;
    box-shadow: var(--shadow-xs);
}

.topbar a {
    color: var(--text-color-light);
    transition: var(--transition-fast);
}

.topbar a:hover {
    color: var(--primary-color);
    text-decoration: none;
}

/* --- Navbar (Keep this as is) --- */
.navbar {
    background-color: var(--white-color);
    box-shadow: var(--shadow-sm);
    transition: background-color var(--transition-base), box-shadow var(--transition-base);
    padding: var(--spacing-sm) 0;
}

.navbar-brand {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-3xl);
    color: var(--primary-color) !important;
    letter-spacing: -0.5px;
    transition: var(--transition-fast);
    line-height: 1;
}

.navbar-brand:hover {
    opacity: 0.9;
}

.navbar-toggler {
    border: none;
    padding: var(--spacing-xs);
    transition: var(--transition-fast);
    color: var(--text-color-dark);
}

.navbar-toggler:focus {
    box-shadow: none;
}

.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='%23212529' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar .nav-item {
    margin: 0 var(--spacing-xs);
}

.navbar .nav-link {
    color: var(--text-color-light);
    position: relative;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-md); /* Adjusted to medium */
    font-weight: var(--font-weight-medium);
    border-radius: var(--border-radius-sm);
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.navbar .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 3px;
    background-color: var(--primary-color);
    border-radius: 2px;
    transition: width 0.3s ease-out;
}

.navbar .nav-link:hover {
    color: var(--primary-color);
    background-color: rgba(0, 115, 230, 0.05);
}

.navbar .nav-link:hover::after {
    width: 80%;
}

.navbar .nav-link.active {
    color: var(--primary-color);
    font-weight: var(--font-weight-semibold);
    background-color: rgba(0, 115, 230, 0.08);
}

.navbar .nav-link.active::after {
    width: 85%;
}

.navbar .search-form {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color-medium);
    border-radius: var(--border-radius-pill);
    background-color: var(--white-color);
    transition: var(--transition-base);
    padding: 0 var(--spacing-sm);
    box-shadow: var(--shadow-xs);
    flex-grow: 1;
    max-width: 300px;
}

.navbar .search-form:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(0, 115, 230, 0.25);
    max-width: 350px;
}

.navbar .form-control {
    border: none;
    background: transparent;
    color: var(--text-color-dark);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-base); /* Uses updated base font size */
    flex-grow: 1;
}

.navbar .form-control::placeholder {
    color: var(--text-color-muted);
}

.navbar .form-control:focus {
    outline: none;
    box-shadow: none;
}

.navbar .btn-search {
    background: transparent;
    border: none;
    color: var(--primary-color);
    padding: var(--spacing-xs) var(--spacing-sm);
    transition: var(--transition-fast);
    font-size: var(--font-size-lg); /* Adjusted to new lg */
}

.navbar .dropdown-menu {
    background-color: var(--white-color);
    border: 1px solid var(--border-color-medium);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-sm) 0;
    animation: fadeIn 0.3s ease-out;
}

.navbar .dropdown-item {
    color: var(--text-color-dark);
    font-size: var(--font-size-base); /* Uses updated base font size */
    padding: var(--spacing-sm) var(--spacing-md);
    transition: var(--transition-fast);
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background-color: var(--light-bg-color);
    color: var(--primary-color);
}

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


/* --- Cards (Post/Category Cards - UPDATED) --- */
.post-card {
    transition: var(--transition-base);
    border: 1px solid var(--border-color-light); /* Subtle border */
    background: var(--white-color); /* Clean white background */
    border-radius: var(--border-radius-lg); /* Rounded corners */
    overflow: hidden;
    box-shadow: var(--shadow-sm); /* Soft initial shadow */
}

.post-card:hover {
    transform: translateY(-5px); /* Lift on hover */
    box-shadow: var(--shadow-md); /* More pronounced shadow on hover */
    border-color: var(--primary-color); /* Highlight border on hover */
}


.post-card .card-title {
    font-size: var(--font-size-lg); /* Uses updated lg */
    font-weight: var(--font-weight-bold);
    color: var(--text-color-dark); /* Ensure dark text for titles */
}

.post-card .card-text {
    font-size: var(--font-size-base); /* Uses updated base font size */
    color: var(--text-color-light); /* Softer text for descriptions/counts */
    margin-bottom: var(--spacing-md);
}

/* ---------------------------- no strach links ------------------------------------- */
.post-card {
    position: relative;
}

.post-card .no-stretch {
    position: relative;
    z-index: 2;
}

/* --- Sidebar (Keep this as is) --- */
.sidebar-box {
    background: var(--white-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
    border: 1px solid var(--border-color-light);
}

.sidebar-box:hover {
    box-shadow: var(--shadow-md);
}

.sidebar-box h5 {
    color: var(--text-color-dark);
    margin-bottom: var(--spacing-lg);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-lg); /* Uses updated lg */
}

/* List links in sidebar */
.sidebar-box a {
    display: block;
    text-decoration: none;
    color: var(--text-color-light);
    padding: var(--spacing-xs) 0;
    transition: var(--transition-fast);
    font-size: var(--font-size-base); /* Uses updated base font size */
}

.sidebar-box a:hover {
    color: var(--primary-color);
    padding-left: var(--spacing-sm);
}

/* --- Badges (Categories/Tags) (Keep this as is) --- */
.badge-custom {
    background-color: var(--border-color-light);
    color: var(--text-color-light);
    font-size: var(--font-size-sm); /* Uses updated sm */
    border-radius: var(--border-radius-md);
    padding: 5px 10px;
    margin: 3px;
    transition: var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-medium);
    border: 1px solid transparent;
}

.badge-custom:hover {
    background-color: var(--accent-color);
    color: var(--white-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-xs);
    border-color: var(--accent-color);
}

/* --- Author Card (Keep this as is) --- */
.author-card {
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius-lg);
    transition: var(--transition-base);
    background-color: var(--white-color);
    padding: var(--spacing-lg);
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.author-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.author-meta {
    font-size: var(--font-size-sm); /* Uses updated sm */
    color: var(--text-color-muted);
    margin-bottom: var(--spacing-md);
}

.btn-view-posts {
    border-radius: var(--border-radius-pill);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-sm); /* Uses updated sm */
    font-weight: var(--font-weight-semibold);
    transition: var(--transition-fast);
    background-color: var(--primary-color);
    color: var(--white-color);
    border: 1px solid var(--primary-color);
}

.btn-view-posts:hover {
    background-color: darken(var(--primary-color), 10%); /* Note: darken is SASS/LESS, will not work directly in CSS. Replace with a literal color or CSS variable. */
    border-color: darken(var(--primary-color), 10%); /* Same here */
    transform: translateY(-2px);
    box-shadow: var(--shadow-xs);
}

.svg-avatar {
    width: 80px;
    height: 80px;
    display: block;
    margin: 0 auto var(--spacing-md);
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--accent-color);
    box-shadow: 0 0 0 4px rgba(0, 165, 138, 0.2);
}

/* --- Social Share Buttons (Desktop Sidebar) (Keep this as is) --- */
.social-sidebar {
    left: var(--spacing-lg);
    top: 50%;
    transform: translateY(-50%);
    z-index: 1050;
    display: flex;
    flex-direction: column;
}

.social-sidebar a {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
    font-size: var(--font-size-lg); /* Uses updated lg */
    border-radius: 50%;
    margin-bottom: var(--spacing-sm);
    background-color: var(--white-color);
    color: var(--text-color-light);
    border: 1px solid var(--border-color-light);
    box-shadow: var(--shadow-xs);
}

.social-sidebar a:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow: var(--shadow-sm);
    color: var(--white-color);
}

.social-sidebar a.facebook-icon:hover { background-color: #3b5998; border-color: #3b5998; }
.social-sidebar a.twitter-icon:hover { background-color: #00acee; border-color: #00acee; }
.social-sidebar a.linkedin-icon:hover { background-color: #0e76a8; border-color: #0e76a8; }
.social-sidebar a.whatsapp-icon:hover { background-color: #25d366; border-color: #25d366; }


/* --- Mobile Bottom Bar (Keep this as is) --- */
#mobileShareBar {
    display: none;
    background-color: var(--white-color);
    border-top: 1px solid var(--border-color-light);
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.08);
    padding: var(--spacing-sm) var(--spacing-md);
    z-index: 1050;
    justify-content: space-around;
    align-items: center;
}

#mobileShareBar a {
    width: 38px;
    height: 38px;
    font-size: var(--font-size-md); /* Uses updated md */
    transition: var(--transition-fast);
    border-radius: 50%;
    border: 1px solid var(--border-color-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color-light);
    background-color: var(--light-bg-color);
}

#mobileShareBar a:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xs);
    color: var(--white-color);
}

#mobileShareBar a.facebook-icon:hover { background-color: #3b5998; }
#mobileShareBar a.twitter-icon:hover { background-color: #00acee; }
#mobileShareBar a.linkedin-icon:hover { background-color: #0e76a8; }
#mobileShareBar a.whatsapp-icon:hover { background-color: #25d366; }


/* --- Footer (Keep this as is) --- */
footer {
    background-color: var(--white-color);
    color: var(--text-color-light);
    padding: var(--spacing-2xl) 0 var(--spacing-xl);
    border-top: 1px solid var(--border-color-light);
    font-size: var(--font-size-base); /* Uses updated base font size */
    box-shadow: var(--shadow-xs);
}

footer .text-warning {
    color: var(--accent-color) !important;
}

footer h5, footer h6 {
    color: var(--text-color-dark);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-md); /* Uses updated md */
}

footer p.small {
    font-size: var(--font-size-sm); /* Uses updated sm */
    color: var(--text-color-muted);
}

footer a.footer-link {
    color: var(--text-color-muted);
    text-decoration: none;
    transition: var(--transition-fast);
    padding: var(--spacing-xs) 0;
    display: block;
}

footer a.footer-link:hover {
    color: var(--primary-color);
    padding-left: var(--spacing-sm);
}

footer .social-icon {
    font-size: var(--font-size-xl); /* Uses updated xl */
    margin-right: var(--spacing-md);
    color: var(--text-color-light);
    transition: var(--transition-fast);
}

footer .social-icon:hover {
    color: var(--primary-color);
    transform: translateY(-3px);
}

footer .border-secondary {
    border-color: var(--border-color-medium) !important;
}

footer .text-center.small {
    font-size: var(--font-size-sm); /* Uses updated sm */
    color: var(--text-color-muted);
    margin-top: var(--spacing-md);
}

/* --- Back to Top Button (Keep this as is) --- */
#backToTop {
    background-color: var(--primary-color);
    color: var(--white-color);
    border: none;
    width: 40px;
    height: 40px;
    font-size: var(--font-size-xl); /* Uses updated xl */
    line-height: 1;
    border-radius: 50%;
    box-shadow: var(--shadow-md);
    transition: var(--transition-base);
    bottom: var(--spacing-xl);
    right: var(--spacing-xl);
    z-index: 999;
}

#backToTop:hover {
    background-color: var(--primary-color); /* Same issue, replace for production */
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    scroll-behavior: smooth;
}


/* --- Media Queries (Responsiveness) (Keep this as is) --- */
@media (max-width: 767.98px) {
    .social-sidebar {
        display: none !important;
    }

    #mobileShareBar {
        padding: var(--spacing-sm);
    }

    .topbar {
        font-size: var(--font-size-sm); /* Uses updated sm */
        padding: var(--spacing-xs) 0;
    }

    .topbar div {
        text-align: center;
        width: 100%;
        margin-bottom: var(--spacing-xs);
    }

    .navbar-brand {
        font-size: var(--font-size-2xl); /* Uses updated 2xl */
    }

    .navbar-collapse {
        background-color: var(--white-color);
        padding: var(--spacing-md);
        margin-top: var(--spacing-sm);
        border-radius: var(--border-radius-md);
        box-shadow: var(--shadow-md);
        border: 1px solid var(--border-color-light);
    }

    .navbar-nav .nav-item {
        margin: 0;
        margin-bottom: var(--spacing-sm);
    }

    .navbar .search-form {
        width: 100%;
        margin-top: var(--spacing-md);
        max-width: 100%;
    }

    .navbar .search-form:focus-within {
        max-width: 100%;
    }

    .navbar .form-control {
        width: 100%;
    }

    main.container {
        margin-top: var(--spacing-xl) !important;
        margin-bottom: var(--spacing-xl) !important;
    }

    .post-card img {
        height: 180px;
    }

    .post-card .card-body {
        padding: var(--spacing-md);
    }

    .post-card .card-title {
        font-size: var(--font-size-lg); /* Uses updated lg */
    }

    footer {
        padding: var(--spacing-xl) 0 var(--spacing-lg);
    }
}

@media (min-width: 992px) {
    .navbar .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* --- Hero Section Styling --- */
.hero-section {
    /* background-color: var(--white-color); */
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--spacing-xl) auto;
    padding-top: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl);
    position: relative;
    overflow: hidden;
    /* box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color-light); */
}

.hero-section .overlay {
    display: none;
}

.hero-section .hero-content {
    background: none;
    backdrop-filter: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    border: none;
}

.hero-section h1 {
    color: var(--text-color-dark) !important;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-3xl); /* Uses updated 3xl */
    margin-bottom: var(--spacing-sm);
}

.hero-section h1 .text-accent {
    color: var(--accent-color) !important;
}

.hero-section .lead,
.hero-section .fs-5 {
    color: var(--text-color-light) !important;
    font-weight: var(--font-weight-normal);
}

.hero-section .hero-search-bar {
    border: 1px solid var(--border-color-medium);
    border-radius: var(--border-radius-pill);
    background-color: var(--white-color);
    transition: var(--transition-base);
    box-shadow: var(--shadow-sm);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-section .hero-search-bar:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(0, 115, 230, 0.25);
}

.hero-section .hero-search-bar .form-control {
    border: none;
    background: transparent;
    color: var(--text-color-dark);
    font-size: var(--font-size-base); /* Uses updated base font size */
}

.hero-section .hero-search-bar .form-control::placeholder {
    color: var(--text-color-muted);
}

.hero-section .hero-search-bar .form-control:focus {
    outline: none;
    box-shadow: none;
}

.hero-section .hero-search-bar .btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color);
    font-weight: var(--font-weight-semibold);
    /* padding: var(--spacing-xs) var(--spacing-lg); */
    border-top-right-radius: var(--border-radius-pill);
    border-bottom-right-radius: var(--border-radius-pill);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    transition: var(--transition-fast);
}

.hero-section .hero-search-bar .btn-primary:hover {
    background-color: lighten(var(--primary-color), 10%); /* Same issue, replace for production */
    border-color: lighten(var(--primary-color), 10%); /* Same issue, replace for production */
    transform: translateY(-2px);
    color: var(--white-color);
}

@media (max-width: 767.98px) {
    .hero-section {
        margin: var(--spacing-md) auto;
        padding-top: var(--spacing-lg);
        padding-bottom: var(--spacing-lg);
        border-radius: var(--border-radius-md);
    }
    .hero-section .hero-content {
        padding: 0;
        border-radius: 0;
    }
    .hero-section h1 {
        font-size: var(--font-size-2xl); /* Uses updated 2xl */
    }
    .hero-section .lead,
    .hero-section .fs-5 {
        font-size: var(--font-size-base); /* Uses updated base font size */
    }
    .hero-section .hero-search-bar .btn-primary {
        padding: var(--spacing-xs) var(--spacing-md);
    }
}


/* --- Chips (New Section for Category Chips) --- */
.category-chip {
    display: inline-block; /* Allows chips to sit next to each other */
    padding: var(--spacing-sm) var(--spacing-md); /* Vertical and horizontal padding */
    border: 1px solid var(--border-color-medium); /* Subtle border */
    border-radius: var(--border-radius-pill); /* Highly rounded corners for chip shape */
    background-color: var(--white-color); /* White background */
    box-shadow: var(--shadow-xs); /* Very subtle initial shadow */
    transition: var(--transition-fast); /* Smooth transitions for hover effects */
    color: var(--text-color-dark); /* Default text color */
    white-space: nowrap; /* Prevent text from wrapping */
    vertical-align: middle; /* Align chips vertically */
    margin-right: var(--spacing-sm); /* Spacing between chips */
}

.category-chip:hover {
    transform: translateY(-2px); /* Slight lift on hover */
    box-shadow: var(--shadow-sm); /* More pronounced shadow on hover */
    border-color: var(--primary-color); /* Highlight border on hover */
    color: var(--primary-color); /* Change text color on hover */
    text-decoration: none; /* Ensure no underline on hover */
}

.category-chip .chip-content {
    display: flex;
    align-items: center;
    justify-content: center; /* Center items for consistent layout */
    line-height: 1; /* Compact line height */
}

.category-chip .chip-logo {
    width: 24px; /* Icon size */
    height: 24px;
    /* object-fit: contain; Ensure image fits without cropping */
    border-radius: 50%; /* Make image round if it's square */
    flex-shrink: 0; /* Prevent logo from shrinking */
    background-color: var(--light-bg-color); /* Light background for the icon circle */
    padding: 3px; /* Padding inside the circle */
}

.category-chip .chip-icon {
    font-size: 1.1rem; /* Adjust icon size */
    color: var(--accent-color); /* Use accent color for icons */
    line-height: 1;
    flex-shrink: 0;
    width: 24px; /* Maintain consistent space for icon */
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(0, 165, 138, 0.1); /* Very light background for icons */
}

.category-chip .chip-label {
    font-size: var(--font-size-base); /* Uses updated base font size */
    font-weight: var(--font-weight-medium);
    margin-right: var(--spacing-xs); /* Space before the arrow */
    color: inherit; /* Inherit color from parent (.category-chip) */
}

.category-chip .chip-arrow {
    font-size: 0.8rem; /* Uses updated base font size */
    color: var(--text-color-muted); /* Muted color for the arrow */
    transition: var(--transition-fast);
    line-height: 1;
}

.category-chip:hover .chip-arrow {
    color: var(--primary-color); /* Arrow color changes on hover */
}

/* Ensure categories section uses flexbox for horizontal wrapping of chips */
.category-chips-row {
    display: flex;
    flex-wrap: wrap; /* Allow chips to wrap to the next line */
    justify-content: center; /* Center the chips if there are not enough to fill the row */
    gap: var(--spacing-sm); /* Space between chips in the row and columns */
}


/* --- Cards (Post/Category Cards - UPDATED) --- */
.post-card {
    transition: var(--transition-base);
    border: 1px solid var(--border-color-light); /* Subtle border */
    background: var(--white-color); /* Clean white background */
    border-radius: var(--border-radius-lg); /* Rounded corners */
    height: 100px;

    overflow: hidden;
    box-shadow: var(--shadow-sm); /* Soft initial shadow */
    display: flex; /* Make it a flex container */
    flex-direction: column; /* Stack content vertically */
    height: 100%; /* Ensure cards in a row have equal height */
}

.post-card:hover {
    transform: translateY(-5px); /* Lift on hover */
    box-shadow: var(--shadow-md); /* More pronounced shadow on hover */
    border-color: var(--primary-color); /* Highlight border on hover */
}

.post-card img {
    width: 100%; /* Ensure image fills its container */
    height: 150px; /* Consistent height for card images */
    object-fit: cover; /* Cover the area, crop if necessary */
    border-top-left-radius: var(--border-radius-lg);
    border-top-right-radius: var(--border-radius-lg);
}

.post-card .card-body {
    padding: var(--spacing-sm); /* Ample padding inside the card */
    flex-grow: 1; /* Allow card body to grow and fill available space */
    /* display: flex; */
    flex-direction: column;
}

.post-card .card-title {
    font-size: var(--font-size-lg); /* Uses updated lg */
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-sm);
    line-height: 1.4;
    color: var(--text-color-dark); /* Ensure dark text for titles */
    display: -webkit-box; /* For multiline ellipsis */
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.post-card .card-text {
    font-size: var(--font-size-base); /* Uses updated base font size */
    color: var(--text-color-light); /* Softer text for descriptions/counts */
    margin-bottom: var(--spacing-md);
    display: -webkit-box; /* For multiline ellipsis */
    -webkit-line-clamp: 3; /* Limit to 3 lines for description */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1; /* Allow text to take up space */
}

.post-card .stretched-link {
    z-index: 1; /* Ensure the link is clickable over content */
}

/* ---------------------------- no strach links ------------------------------------- */
.post-card .no-stretch {
    position: relative;
    z-index: 2; /* Ensure 'Read More' button is clickable */
}

/* --- Category Chip (UPDATED) --- */
.category-chip {
    display: inline-flex;
    align-items: center;
    background-color: var(--white-color);
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius-pill); /* More rounded shape */
    padding: var(--spacing-xs) var(--spacing-md); /* Adjusted padding */
    transition: var(--transition-fast);
    box-shadow: var(--shadow-xs);
    color: var(--text-color-dark); /* Inherit color from text-color-dark */
    text-decoration: none; /* Remove underline */
}

.category-chip:hover {
    background-color: var(--light-bg-color);
    border-color: var(--primary-color);
    color: var(--primary-color); /* Change text color on hover */
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px); /* Slight lift on hover */
}

.category-chip .chip-logo {
    width: 28px; /* Slightly larger logo */
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: var(--spacing-sm); /* More space from label */
    border: 1px solid var(--border-color-medium);
}

.category-chip .chip-icon {
    font-size: 1rem; /* Adjust icon size */
    color: var(--accent-color); /* Use accent color for icons */
    line-height: 1;
    flex-shrink: 0;
    width: 28px; /* Consistent space for icon */
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(0, 165, 138, 0.1); /* Very light background for icons */
    margin-right: var(--spacing-sm);
}

.category-chip .chip-label {
    font-size: var(--font-size-base); /* Uses updated base font size */
    font-weight: var(--font-weight-medium);
    margin-right: var(--spacing-sm); /* Space before the arrow */
    color: inherit; /* Inherit color from parent (.category-chip) */
}

.category-chip .chip-arrow {
    font-size: var(--font-size-sm); /* Uses updated sm */
    color: var(--text-color-muted); /* Muted color for the arrow */
    transition: var(--transition-fast);
    line-height: 1;
}

.category-chip:hover .chip-arrow {
    color: var(--primary-color); /* Primary color for arrow on hover */
}

/* --- Tag Card (NEW STYLES) --- */
/* This assumes tag_card.php might benefit from a more card-like structure if wrapped in a div with this class */
.tag-card {
    background: var(--white-color);
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius-md); /* Slightly less rounded than post cards */
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-sm); /* Spacing between tag cards */
    box-shadow: var(--shadow-xs);
    transition: var(--transition-fast);
    display: flex; /* Use flexbox for internal layout */
    align-items: center; /* Vertically align items */
    min-height: 70px; /* Minimum height for consistency */
}

.tag-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    border-color: var(--primary-color);
}

.tag-card .tag-icon-svg {
    flex-shrink: 0; /* Prevent SVG from shrinking */
    margin-right: var(--spacing-md);
    border-radius: var(--border-radius-xs); /* Slightly rounded corners for the color square */
}

.tag-card .tag-content {
    flex-grow: 1; /* Allow content to take available space */
}

.tag-card .tag-name {
    font-size: var(--font-size-lg); /* Uses updated lg */
    font-weight: var(--font-weight-semibold);
    color: var(--text-color-dark);
    margin-bottom: var(--spacing-xs);
    display: block; /* Make the link a block to ensure margin works */
}

.tag-card .tag-name a {
    color: inherit; /* Inherit color from parent for consistency */
    text-decoration: none;
}

.tag-card .tag-name a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.tag-card .tag-description {
    font-size: var(--font-size-sm); /* Uses updated sm */
    color: var(--text-color-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit description to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0; /* Remove default paragraph margin */
}

/* --- Author Card (UPDATED) --- */
.author-card {
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius-lg);
    transition: var(--transition-base);
    background-color: var(--white-color);
    padding: var(--spacing-lg);
    text-align: center;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensure cards in a row have equal height */
}

.author-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.author-card .svg-avatar {
    width: 80px; /* Larger avatar size */
    height: 80px;
    margin: 0 auto var(--spacing-md); /* Center and add margin below */
    border-radius: 50%;
    overflow: hidden; /* Ensure content stays within circle */
    border: 3px solid var(--primary-color); /* Add a subtle border */
    box-shadow: var(--shadow-xs);
}

.author-card .svg-avatar text {
    font-size: 36px; /* Adjust font size for larger avatar */
}

.author-card .author-name {
    font-size: var(--font-size-2xl); /* Uses updated 2xl */
    font-weight: var(--font-weight-bold);
    color: var(--text-color-dark);
    margin-bottom: var(--spacing-xs);
}

.author-card .author-meta {
    font-size: var(--font-size-base); /* Uses updated base font size */
    color: var(--text-color-muted);
    margin-bottom: var(--spacing-lg); /* More space before button */
    flex-grow: 1; /* Allow meta to take up space */
}

.author-card .btn-view-posts {
    border-radius: var(--border-radius-pill);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-base); /* Uses updated base font size */
    font-weight: var(--font-weight-semibold);
    background-color: var(--primary-color);
    color: var(--white-color);
    border: 1px solid var(--primary-color);
    transition: var(--transition-fast);
}

.author-card .btn-view-posts:hover {
    background-color: var(--white-color);
    color: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

/* This section needs to be removed as the general h1-h5 rules above handle it
h1, h2, h3, h4, h5 {
    font-size: var(--font-size-lg);
}
*/
/* --- Hero Section (UPDATED) --- */
.hero-content .lead {
    font-size: var(--font-size-lg); /* Uses updated lg */
}

/* --- General Headings (UPDATED) --- */
.display-5 {
    font-size: var(--font-size-3xl) !important; /* Uses updated 3xl */
}

.fs-5 {
    font-size: var(--font-size-lg) !important; /* Uses updated lg */
}

/* --- Category Chip (UPDATED) --- */
.category-chip .chip-label {
    font-size: var(--font-size-base); /* Adjusted to new base font size */
}

.category-chip .chip-arrow {
    font-size: var(--font-size-sm); /* Adjusted to new smaller arrow size */
}

/* --- Cards (Post/Category Cards - UPDATED) --- */
.post-card .card-title {
    font-size: var(--font-size-lg); /* Adjusted to new smaller card title size */
}

.post-card .card-text {
    font-size: var(--font-size-base); /* Adjusted to new base font size */
}

/* --- Tag Card (UPDATED) --- */
.tag-card .tag-name {
    font-size: var(--font-size-lg); /* Adjusted to new smaller tag name size */
}

.tag-card .tag-description {
    font-size: var(--font-size-sm); /* Adjusted to new smaller tag description size */
}

/* --- Author Card (UPDATED) --- */
.author-card .author-name {
    font-size: var(--font-size-2xl); /* Adjusted to new smaller author name size */
}

.author-card .author-meta {
    font-size: var(--font-size-base); /* Adjusted to new base font size */
}

/* Ensure these are adjusted if you had any specific sizes for badge-custom previously */
.badge-custom {
    font-size: var(--font-size-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
}

/* Read More button in post card */
.btn-sm {
    font-size: var(--font-size-base);
    padding: var(--spacing-sm) var(--spacing-lg);
}

.form-control , .form-select{
    font-size: var(--font-size-md); /* Uses updated md */
}





/*----------------------------------------------------------------------
  Base Styles for Modern UI Elements
  Purpose: To provide a consistent, modern, and beautiful look
           across various pages, especially detail pages.
  Framework Used: Bootstrap 5 (variables are leveraged)
----------------------------------------------------------------------*/

/* General Card Styling */
.card-modern {
    background-color: var(--bs-white);
    border: none;
    border-radius: var(--border-radius-lg); /* Uses your custom variable */
    box-shadow: var(--shadow-sm); /* Uses your custom variable for softer shadow */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Hover effect for clickable cards */
.card-modern.clickable-card:hover {
    transform: translateY(-3px); /* Lifts card a bit less */
    box-shadow: var(--shadow-md); /* Uses your custom variable for less pronounced shadow */
}

/* Section Heading Underline */
.section-heading {
    position: relative;
    padding-bottom: var(--spacing-xs); /* Uses your custom variable */
    margin-bottom: var(--spacing-lg); /* Uses your custom variable */
    font-weight: var(--font-weight-bold); /* Uses your custom variable */
    color: var(--text-color-dark); /* Uses your custom variable */
    font-size: var(--font-size-xl); /* Adjusted: uses your custom xl */
}

.section-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px; /* Slightly smaller underline */
    height: 4px; /* Thinner underline */
    background-color: var(--primary-color); /* Uses your custom variable */
    border-radius: 3px;
}

/* Animated Buttons */
.btn-animated {
    transition: var(--transition-fast); /* Uses your custom variable for faster transition */
    border-radius: var(--border-radius-pill); /* Uses your custom variable */
    padding: var(--spacing-sm) var(--spacing-lg); /* Uses your custom variables for reduced padding */
    font-weight: var(--font-weight-semibold); /* Uses your custom variable */
    font-size: var(--font-size-base); /* Adjusted: uses your custom base */
    letter-spacing: 0.2px; /* Reduced letter spacing */
    text-transform: capitalize;
}

.btn-animated:hover {
    transform: translateY(-2px); /* Less noticeable lift */
    box-shadow: var(--shadow-sm); /* Uses your custom variable for smaller shadow on hover */
}

/* Course Header Section (Image and Info) */
.course-main-info .course-image-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--light-bg-color); /* Uses your custom variable */
    border-radius: var(--border-radius-lg); /* Uses your custom variable */
    height: 250px; /* Reduced height */
    overflow: hidden;
    position: relative;
}

.course-main-info img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.course-main-info .placeholder-icon {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem; /* Smaller icon */
    color: var(--text-color-muted); /* Uses your custom variable */
}

/* Course Title and Meta Info */
.course-main-info h1 {
    font-size: var(--font-size-2xl); /* Adjusted: uses your custom 2xl */
    line-height: 1.2;
    margin-bottom: var(--spacing-xs); /* Uses your custom variable */
    color: var(--text-color-dark); /* Uses your custom variable */
}

.course-main-info .course-meta-info span {
    display: flex;
    align-items: center;
    font-size: var(--font-size-sm); /* Adjusted: uses your custom sm */
    color: var(--text-color-light); /* Uses your custom variable */
}

.course-main-info .course-meta-info i {
    font-size: 1em; /* Smaller icon in meta */
    margin-right: 0.4rem; /* Reduced margin */
}

/* Course Description */
.course-description-section .lead {
    font-size: var(--font-size-lg); /* Adjusted: uses your custom lg */
    line-height: 1.7;
    color: var(--text-color-light); /* Uses your custom variable */
}

/* Keywords/Tags */
.tag-badge {
    background-color: var(--light-bg-color); /* Uses your custom variable */
    color: var(--primary-color); /* Uses your custom variable */
    border-radius: var(--border-radius-pill); /* Uses your custom variable */
    padding: var(--spacing-xs) var(--spacing-sm); /* Uses your custom variables for reduced padding */
    font-size: var(--font-size-sm); /* Uses your custom variable for smaller font size */
    font-weight: var(--font-weight-medium); /* Uses your custom variable */
    margin-right: var(--spacing-xs); /* Uses your custom variable for reduced margin */
    margin-bottom: var(--spacing-xs); /* Uses your custom variable */
    display: inline-flex;
    align-items: center;
}

/* Subject Cards */
.subject-card-thumbnail {
    height: 150px; /* Reduced height */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--light-bg-color); /* Uses your custom variable */
    border-top-left-radius: var(--border-radius-lg); /* Uses your custom variable */
    border-top-right-radius: var(--border-radius-lg); /* Uses your custom variable */
}

.subject-card-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.subject-card-body {
    padding: var(--spacing-md) var(--spacing-md); /* Uses your custom variables */
}

.subject-card-title {
    font-size: var(--font-size-xl); /* Adjusted: uses your custom xl */
    font-weight: var(--font-weight-bold); /* Uses your custom variable */
    margin-bottom: var(--spacing-xs); /* Uses your custom variable */
    color: var(--text-color-dark); /* Uses your custom variable */
}

.subject-card-text {
    font-size: var(--font-size-sm); /* Adjusted: uses your custom sm */
    max-height: 60px; /* Adjusted max-height to fit better for 3 lines */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    white-space: normal;
    color: var(--text-color-light); /* Uses your custom variable */
}

/* No Subjects Found Alert */
.alert-modern {
    padding: var(--spacing-xl); /* Uses your custom variable for reduced padding */
    border-radius: var(--border-radius-lg); /* Uses your custom variable */
    background-color: rgba(0, 115, 230, 0.1); /* Using primary color with transparency */
    color: var(--primary-color); /* Using primary color */
    border: 1px solid rgba(0, 115, 230, 0.2); /* Using primary color with transparency */
}

.alert-modern .display-4 {
    font-size: var(--font-size-3xl); /* Adjusted: uses your custom 3xl */
    margin-bottom: var(--spacing-md); /* Uses your custom variable for reduced margin */
    color: var(--primary-color); /* Using primary color */
}

.alert-modern .lead {
    font-size: var(--font-size-xl); /* Adjusted: uses your custom xl */
    font-weight: var(--font-weight-medium); /* Uses your custom variable */
}

.alert-modern .text-muted {
    color: var(--text-color-light) !important; /* Uses your custom variable */
}

/* Back to Courses Button */
.btn-back-courses {
    font-size: var(--font-size-lg); /* Adjusted: uses your custom lg */
    padding: var(--spacing-sm) var(--spacing-xl); /* Uses your custom variables for reduced padding */
    font-weight: var(--font-weight-semibold); /* Uses your custom variable */
}

/* Sidebar Styles */
.sidebar-wrapper {
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding-left: var(--spacing-lg); /* Uses your custom variable */
}

.sidebar-heading {
    position: relative;
    padding-bottom: var(--spacing-xs); /* Uses your custom variable */
    margin-bottom: var(--spacing-md); /* Uses your custom variable */
    font-weight: var(--font-weight-bold); /* Uses your custom variable */
    color: var(--text-color-dark); /* Uses your custom variable */
    font-size: var(--font-size-xl); /* Adjusted: uses your custom xl */
}

.sidebar-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px; /* Smaller underline */
    height: 3px; /* Thinner underline */
    background-color: var(--secondary-color); /* Uses your custom variable */
    border-radius: 2px;
}

/* Bulleted list styling for sidebar subjects */
.list-unstyled {
    padding-left: 0;
    list-style: none; /* Removes default list styling */
}

.subject-list-item {
    padding: var(--spacing-xs) 0; /* Uses your custom variable for smaller padding */
    margin-left: 1.2em; /* Added left margin for bullet alignment */
    position: relative; /* For pseudo-element bullet */
    font-size: var(--font-size-base); /* Adjusted: uses your custom base */
}

.subject-list-item::before {
    content: "\2022"; /* Unicode character for bullet */
    position: absolute;
    left: -1.2em; /* Align bullet with margin */
    top: var(--spacing-xs); /* Vertically center bullet, adjust based on line-height */
    font-size: 1em; /* Adjust bullet size relative to parent font-size */
    color: var(--primary-color); /* Uses your custom variable */
}

.subject-list-link {
    display: block;
    color: var(--text-color-light); /* Uses your custom variable */
    text-decoration: none;
    transition: var(--transition-fast); /* Uses your custom variable */
}

.subject-list-link:hover {
    color: var(--primary-color); /* Uses your custom variable */
    transform: translateX(3px); /* Slightly less aggressive hover */
}


/* Responsive adjustments */
@media (max-width: 991.98px) {
    .sidebar-wrapper {
        position: static;
        max-height: none;
        overflow-y: visible;
        padding-left: 0;
        margin-top: var(--spacing-xl); /* Uses your custom variable */
    }

    .course-main-info .course-image-wrapper {
        margin-bottom: var(--spacing-md); /* Uses your custom variable */
        height: 220px; /* Further reduced height on mobile */
    }

    .course-main-info h1 {
        font-size: var(--font-size-xl); /* Adjusted main title size to xl */
    }

    .section-heading {
        font-size: var(--font-size-lg); /* Adjusted section heading size to lg */
        margin-bottom: var(--spacing-md); /* Uses your custom variable */
    }

    .subject-card-thumbnail {
        height: 120px; /* Further reduced height for subject thumbnails on mobile */
    }

    .btn-animated {
        width: 100%; /* Full width buttons on small screens */
    }
}

@media (max-width: 575.98px) {
    .course-main-info h1 {
        font-size: var(--font-size-lg); /* Further reduced main title size to lg */
    }

    .section-heading {
        font-size: var(--font-size-md); /* Further reduced section heading size to md */
    }

    .alert-modern {
        padding: var(--spacing-lg); /* Uses your custom variable */
    }

    .alert-modern .display-4 {
        font-size: var(--font-size-2xl); /* Uses updated 2xl */
    }

    .alert-modern .lead {
        font-size: var(--font-size-md); /* Uses updated md */
    }
}


.card-modern {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border-radius: 0.75rem; /* Slightly rounded corners for a modern feel */
    overflow: hidden; /* Ensure content respects border-radius */
}

.card-modern:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; /* Stronger shadow on hover */
}

.card-img-modern {
    height: 200px;
    object-fit: cover;
    border-top-left-radius: 0.75rem; /* Match card border-radius */
    border-top-right-radius: 0.75rem; /* Match card border-radius */
}

.description-preview {
    /* Existing styles are fine, but ensure max-height is consistent */
    max-height: 70px; /* Keep consistent if needed */
    overflow: hidden;
    text-overflow: ellipsis; /* Add ellipsis for overflow */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Limit to 3 lines */
    -webkit-box-orient: vertical;
    white-space: normal;
}

/* Optional: Adjust card title for better appearance */
.card-modern .card-title {
    font-weight: 600; /* Make titles a bit bolder */
    color: #333; /* Slightly darker color for titles */
}

/* Optional: Adjust text color for better contrast on small text */
.card-modern .card-text.small {
    color: #666 !important;
}

/* Ensure that links inside the card (like the whole card itself) don't have default underlines */
.card-modern.text-decoration-none:hover {
    text-decoration: none;
}

    /* ---- Main Header Styling ---- */
    .main-header {
        background: linear-gradient(45deg, #2a2a72, #009ffd);
        color: white;
        position: relative;
        overflow: hidden;
        min-height: 90vh;
        display: flex;
        align-items: center;
    }

    /* 
           THE FIX:
           Give the container a position and a higher z-index to lift it
           above the .header-wave element.
        */
    .main-header .container {
        position: relative;
        z-index: 2;
    }

    /* ---- Content & Typography Enhancements ---- */
    .header-content {
        animation: fadeInUp 1s ease-out forwards;
    }

    .header-content h1 {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    }

    .highlight-text {
        color: #42e2ff;
    }

    /* ---- Button Enhancements ---- */
    .main-header .btn-primary {
        background-color: #009ffd;
        border-color: #009ffd;
        padding: 12px 28px;
        font-weight: bold;
        transition: all 0.3s ease;
    }

    .main-header .btn-primary:hover {
        background-color: #42e2ff;
        border-color: #42e2ff;
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
    }

    .btn .bi {
        vertical-align: -0.125em;
        transition: transform 0.3s ease;
    }

    .btn:hover .bi {
        transform: scale(1.1);
    }

    /* ---- Image Blob Effect ---- */
    .header-image-container {
        animation: fadeInRight 1s ease-out 0.5s forwards;
        opacity: 0;
    }

    .header-image-blob {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
        width: 500px;
        height: 500px;
        border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
        display: flex;
        justify-content: center;
        align-items: center;
        animation: blobMorph 8s ease-in-out infinite;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }

    /* ---- Styles for the SVG Graphic ---- */
    .header-graphic {
        width: 70%;
        height: 70%;
        transform: rotate(-5deg);
    }

    .graphic-window {
        fill: rgba(255, 255, 255, 0.1);
    }

    .graphic-header,
    .graphic-line-1,
    .graphic-line-2,
    .graphic-line-3 {
        fill: rgba(255, 255, 255, 0.7);
    }

    .graphic-dot {
        fill: #42e2ff;
    }

    .graphic-chart path {
        stroke: #42e2ff;
        stroke-width: 5;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* Animating the graphic elements */
    .graphic-header,
    .graphic-line-1,
    .graphic-line-2,
    .graphic-line-3 {
        transform-origin: left;
        animation: fill-in 1s ease-out forwards;
        opacity: 0;
    }

    .graphic-dot {
        animation: pulse 2s infinite ease-in-out;
    }

    .graphic-chart path {
        stroke-dasharray: 250;
        stroke-dashoffset: 250;
        animation: draw-line 2s ease-out forwards;
        opacity: 0;
    }

    .graphic-header {
        animation-delay: 1.2s;
    }

    .graphic-line-1 {
        animation-delay: 1.5s;
    }

    .graphic-line-2 {
        animation-delay: 1.6s;
    }

    .graphic-line-3 {
        animation-delay: 1.7s;
    }

    .graphic-dot {
        animation-delay: 1s;
    }

    .graphic-chart {
        animation-delay: 2s;
    }

    /* ---- SVG Wave Divider ---- */
    .header-wave {
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 100%;
        z-index: 0;
        /* This stays at the bottom layer */
    }

    /* ---- Keyframe Animations ---- */
    @keyframes blobMorph {
        0% {
            border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
        }

        50% {
            border-radius: 30% 70% 30% 70% / 50% 60% 40% 50%;
        }

        100% {
            border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
        }
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

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

    @keyframes fadeInRight {
        from {
            opacity: 0;
            transform: translateX(50px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes fill-in {
        from {
            transform: scaleX(0);
            opacity: 0;
        }

        to {
            transform: scaleX(1);
            opacity: 1;
        }
    }

    @keyframes draw-line {
        from {
            stroke-dashoffset: 250;
            opacity: 0;
        }

        to {
            stroke-dashoffset: 0;
            opacity: 1;
        }
    }

    @keyframes pulse {

        0%,
        100% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.2);
        }
    }

    /* ---- Responsive Adjustments ---- */
    @media (max-width: 992px) {
        .header-image-blob {
            width: 400px;
            height: 400px;
        }
    }

    @media (max-width: 767px) {
        .main-header {
            min-height: auto;
        }

        .header-image-blob {
            width: 300px;
            height: 300px;
        }

       
    }


/* By me  */

.fw-semibold{
    font-size: small;
}

@media (max-width: 767px) {
    

   
}