/* Also, check your main content wrapper, which often has a background */
.main-content-wrapper { /* Replace with the actual class/ID of your main content wrapper */
    background-color: transparent; /* Make your main content area transparent too */
}

/* Or for a section like .about-content */
.about-content {
    background-color: transparent !important; /* Use !important if needed to override Bootstrap or other styles */
    /* Or specifically remove the existing background-color */
    /* background-color: var(--light); <--- REMOVE OR COMMENT OUT THIS LINE IN your about.css */
}


/* --- Hero Section Specifics --- */
.about-hero {
    /* Example background for about hero - replace with your specific image */
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../images/about_hero_bg.jpg') center center no-repeat;
    background-size: cover;
    min-height: 400px; /* Adjust height as needed */
    position: relative;
    padding-top: 150px; /* Adjust based on navbar height */
}

.about-page-heading {
    font-family: var(--font-saira); /* Use your defined font variable */
    color: var(--primary) !important; /* Example: make heading primary color */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
}

/* --- Main Content Area --- */
.about-content {
    background-color: var(--light); /* Use your light background variable for the section */
}

/* --- Sticky Sidebar --- */
/* Basic sticky behavior - adjust top value as needed based on your header height */
.sticky-sidebar {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    /* Calculate top based on your specific navbar heights and potential top bar.
       If your navbar is 40px (top-bar) + 60px (navbar) = 100px, then top: 120px gives some buffer.
       Using var(--z-index-navbar-shrinked) / 10 + 100px is an interesting approach,
       but usually, a more direct pixel value based on your fixed header's actual height works best.
       Let's stick to a reliable pixel value first. */
    top: 120px; /* Adjust this value (e.g., 40px top-bar + 60px navbar + 20px buffer) */
    z-index: var(--z-index-content); /* Ensure it stays above main content but below navbar */
    max-height: calc(100vh - 140px); /* Adjust to prevent content from going off screen, 140px is top offset + bottom buffer */
    overflow-y: auto; /* Adds scrollbar if content is too long */
    background-color: #fff; /* Ensure sidebar background is white like dispensary */
    border-radius: 10px;
    box-shadow: 0 5px 20px var(--shadow-medium); /* Consistent shadow */
}

.about-sidebar-img {
    border: 1px solid var(--border-color-light);
    padding: 3px;
    border-radius: 8px; /* Added for consistency */
    box-shadow: 0 2px 5px var(--shadow-light); /* Added for consistency */
}

/* Sidebar List Group Items */
.sticky-sidebar .list-group-item {
    font-size: 1.05rem; /* Slightly larger than standard text, smaller than headings */
    font-weight: 500;
    color: var(--text-color);
    transition: all 0.2s ease;
    border-left: 3px solid transparent; /* For active indicator */
    background-color: transparent; /* Ensure default is transparent for list group flush */
    padding-left: 15px; /* Default padding */
}

.sticky-sidebar .list-group-item:hover {
    color: var(--primary);
    background-color: var(--secondary); /* Highlight background on hover */
    border-left-color: var(--primary); /* Left border highlight */
}

.sticky-sidebar .list-group-item.active {
    color: var(--primary);
    background-color: var(--secondary); /* Active background */
    font-weight: 600; /* Bolder for active state */
    border-left-color: var(--primary); /* Active left border */
}


/* --- Main Content Card --- */
.main-content-card {
    border: none; /* No border for the main card */
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 5px 20px var(--shadow-medium); /* Consistent shadow */
}

.main-content-card p,
.main-content-card small.text-muted {
    text-align: justify;
    /* Optional: Add hyphenation for better justification, though browser support varies */
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

.section-title {
    font-family: var(--font-saira); /* Use your defined font variable */
    font-weight: 700;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--secondary);
    color: var(--primary); /* Ensure consistent color */
    font-size: 2.2rem; /* Adjusted for larger headings */
}

.section-title i {
    color: var(--text-muted); /* Slightly muted icon color */
    font-size: 1.1em; /* Ensure icon size matches title */
}

/* --- Image Styling within Content --- */
.about-image { /* Generic class for images within sections */
    max-width: 100%;
    height: auto;
    border-radius: 8px; /* Consistent with other elements */
    box-shadow: 0 4px 10px var(--shadow-medium);
}

/* Gallery-specific images (if using Lightbox) */
.about-gallery-img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 10px var(--shadow-medium);
    transition: transform 0.3s ease; /* Add a subtle hover effect */
}

.about-gallery-img:hover {
    transform: scale(1.03); /* Slightly enlarge on hover */
}


/* --- List Group in Activities/Services --- */
.list-group-item {
    border-color: var(--border-color-light); /* Light border for list items */
    color: var(--text-color);
    font-weight: 500;
    background-color: #fff; /* Explicitly white background for items */
}

.list-group-item i {
    font-size: 1.2em; /* Slightly larger icons for list items */
}

/* --- Responsive adjustments --- */
@media (max-width: 991.98px) {
    .about-hero {
        min-height: 300px;
        padding-top: 100px; /* Adjust for smaller screens */
    }
    .about-page-heading {
        font-size: 2.5rem;
    }
    .sticky-sidebar {
        position: static; /* Disable sticky on mobile */
        top: auto;
        max-height: none; /* Remove max-height constraint */
        overflow-y: visible; /* Remove scrollbar */
        margin-bottom: 30px; /* Add some space below sidebar on small screens */
    }
    .main-content-card {
        padding: 20px !important; /* Reduce padding on small screens */
    }
    .section-title {
        font-size: 1.8rem; /* Smaller section titles on mobile */
    }
}

/* General utility classes if needed, based on your base.html and Bootstrap */
.text-primary { color: var(--primary) !important; }
.text-secondary { color: var(--secondary) !important; }
.text-light { color: var(--light) !important; }
.text-dark { color: var(--dark) !important; }
.text-muted { color: var(--text-muted) !important; }
.bg-light-subtle { background-color: var(--light) !important; } /* Ensure this maps to your --light variable */