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

/* Global Styles */
body {
    font-family: 'Lato', sans-serif;
    margin: 0;
    padding: 0;
    background: #ecf0f1; /* Light grey for a clean, modern background */
    color: #333; /* Default text color */
    font-size: clamp(1rem, 0.8rem + 0.5vw, 1.125rem); /* Fluid font size: 16px to 18px */
    scroll-behavior: smooth; /* Enable smooth scrolling for all anchor links */
    line-height: 1.6; /* Improved readability */
}

.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
    padding: 15px;
}

ul {
    margin: 0;
    padding: 0;
}

/* Header */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Ensure it's on top of all other content */
    background: #2c3e50; /* Solid background from the start */
    transition: padding 0.4s ease, box-shadow 0.4s ease; /* Remove background transition */
}


.top-bar {
    background: #233140; /* Slightly darker shade for the top bar */
    color: #bdc3c7;
    padding: 8px 0;
    font-size: 14px;
}

.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar-info span {
    margin-right: 20px;
}

.top-bar-info i {
    color: #e8491d;
    margin-right: 5px;
}

.main-header {
    padding: 15px 0; /* Adjusted padding for a sleeker look */
    transition: padding 0.4s ease;
}

h1, h2, h3, h4, h5, h6 {
    color: #2c3e50; /* Consistent heading color */
    line-height: 1.2; /* Tighter line height for headings */
}

header.scrolled {
    box-shadow: 0 2px 10px rgba(0,0,0,0.2); /* Standard shadow for scrolled header */
}

header a {
    text-decoration: none;
}

/* Accessibility: Clear focus states for keyboard navigation */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid #e8491d;
    outline-offset: 2px;
}

header .container {
    display: flex;
    justify-content: space-between; /* Pushes logo to left, nav to right */
    align-items: center;
}

header #branding a {
    text-decoration: none; /* Centralize text-decoration for logo link */
}


/* --- Modern & Professional Navigation Styling --- */
header .main-nav a {
    color: #fff;
    text-transform: uppercase;
    font-size: clamp(0.875rem, 0.7rem + 0.3vw, 0.9375rem); /* Fluid nav font size: 14px to 15px */
    font-weight: 700;
    padding: 8px 16px; /* Refined padding for a cleaner look */
    text-align: center;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.05); /* Very subtle background */
    border: 1px solid transparent; /* Start with a transparent border */
    transition: background-color 0.3s ease, border-color 0.3s ease;
    will-change: background-color, border-color, transform; /* Performance hint */
}

header .main-nav a:hover,
header .current a {
    background-color: #e8491d; /* Accent color on hover/active */
    border-color: #e8491d; /* Add border color to match */
}

/* Use Flexbox for modern, robust alignment */
header .main-nav {
    padding: 0;
    margin: 0;
    display: flex;
    gap: 15px; /* Adjust space between the new buttons */
    list-style: none;
}

/* Logo Styling */
.logo-holder {
    width: 200px; /* Increased width to accommodate internal padding */
    height: 60px; /* Adjusted height for the new design */
    padding: 10px 20px; /* Add padding to create space around the logo */
    box-sizing: border-box; /* Ensures padding is included in the total width/height */
    border-radius: 50px; /* Creates the beautiful "pill" shape */
    background-color: rgba(0, 0, 0, 0.2); /* Darker fill for better contrast with the red */
    border: 1px solid #e8491d; /* The "fire red" lining */
    box-shadow: 0 0 8px rgba(232, 73, 29, 0.5), inset 0 1px 2px rgba(0,0,0,0.4); /* Red glow for embossed effect + inner depth */
    transition: height 0.4s ease, background-color 0.3s ease;
    /* Golden Embossed Text Styling */
    color: #d4af37; /* Golden color for text */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Embossed shadow */
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    line-height: 1.2;
    will-change: height, background-color, box-shadow; /* Performance hint */
}

.logo-holder:hover {
    background-color: rgba(255, 255, 255, 0.2); /* Light up slightly on hover */
}


header.scrolled .logo-holder,
.admin-header .logo-holder {
    height: 55px; /* Consistent smaller height for scrolled and admin states */
    line-height: 35px; /* Adjust line-height for vertical centering */
}
/* Showcase */
#showcase {
    padding-top: 150px; /* Push content down to account for the TOTAL fixed header's initial height */
    min-height: 400px;
    background: url('img/showcase-large.jpg') no-repeat center center/cover;
    background-attachment: fixed; /* Parallax-like effect */
    text-align: center;
    color: #fff;
    position: relative; /* Needed for pseudo-element positioning */
    z-index: 1; /* Ensure content is above the overlay */
}

#showcase::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent dark overlay */
    z-index: -1; /* Place behind the content */
}

#showcase h1 {
    margin-top: clamp(60px, 10vw, 100px); /* Fluid margin-top */
    font-size: clamp(2.5rem, 1.5rem + 3vw, 3.4375rem); /* Fluid font size: 40px to 55px */
    margin-bottom: 10px;
}

#showcase p {
    font-size: clamp(1.125rem, 0.9rem + 1vw, 1.25rem); /* Fluid font size: 18px to 20px */
}

/* --- Premium Hero (Showcase) Styling --- */
.showcase-actions {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.button-primary {
    background-color: #e8491d;
    color: #fff;
    padding: clamp(10px, 2vw, 15px) clamp(20px, 4vw, 30px); /* Fluid padding */
    font-size: clamp(1rem, 0.8rem + 0.5vw, 1.125rem); /* Fluid font size */
    font-weight: 700;
    border-radius: 5px; /* Consistent button styling */
    will-change: background-color, transform; /* Performance hint */
}

.button-primary:hover {
    background-color: #d73a0a;
    transform: translateY(-2px);
}

.button-secondary {
    background-color: transparent;
    color: #fff;
    border: 2px solid #fff; /* Consistent border */
    padding: clamp(8px, 1.8vw, 13px) clamp(18px, 3.8vw, 28px); /* Fluid padding */
    font-size: clamp(1rem, 0.8rem + 0.5vw, 1.125rem); /* Fluid font size */
    font-weight: 700;
    border-radius: 5px; /* Consistent button styling */
}
/* Boxes */
#boxes {
    margin-top: 20px;
    /* Use Flexbox for a robust responsive layout */
    display: flex;
    justify-content: center;
    gap: 20px; /* Creates space between the boxes */
    flex-wrap: wrap; /* Allows boxes to wrap onto the next line on smaller screens */
}

#boxes .box {
    flex-basis: 30%; /* Each box will take up roughly 30% of the container width */
    text-align: center;
    padding: 20px; /* Add padding inside the box for better spacing */
    will-change: transform, opacity; /* Performance hint for fade-in */
}

#boxes .box img {
    max-width: 100%; /* Make image responsive within its box */
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 15px; /* Add space below the image */
}

.box-icon {
    font-size: 60px;
    color: #e8491d; /* Use highlight color */
    margin-bottom: 15px;
}

/* Front Page Gallery Section */
.section-title, .page-title {
    text-align: center;
    font-size: clamp(1.8rem, 1.2rem + 2vw, 2.5rem); /* Fluid font size: 28px to 40px */
    margin-bottom: 30px;
    color: #2c3e50;
}

/* Gallery Grid */
#front-page-gallery {
    padding: 40px 0;
    background: #fff; /* A clean white background to make images stand out */
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 parallel columns */
    gap: 15px;
}

.gallery-image-holder {
    overflow: hidden; /* Hides the part of the image that zooms out */
    border-radius: 5px;
    position: relative;
    will-change: transform; /* Performance hint for hover effect */
}

.gallery-image-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the holder without distortion */
    display: block;
    transition: transform 0.4s ease;
}

.gallery-image-holder:hover img {
    transform: scale(1.1); /* Premium zoom effect on hover */
}


/* Responsive Images, Videos, and Embeds */
img,
video,
iframe,
picture, /* Add picture element for responsive images */
object {
    max-width: 100%;
    height: auto;
    display: block; /* Removes extra space below the element */
}

/* Sidebar */
#sidebar {
    float: right;
    width: 30%;
    margin-top: 10px;
}

#sidebar .dark {
    padding: 20px;
    background: #2c3e50; /* Consistent dark blue */
    color: #fff;
    margin-top: 10px;
}

/* Main-col */
#main-col {
    padding-top: 150px; /* Push content down on sub-pages */
    float: left;
    width: 65%;
}

/* Footer */
footer, #main-footer {
    padding: 20px;
    margin-top: 20px;
    color: #bdc3c7; /* Softer white for better readability */
    background-color: #2c3e50; /* Consistent dark blue for footer */
    padding: 0; /* Remove default padding */
}

.footer-main {
    padding: 40px 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.footer-main .logo-holder {
    height: 50px;
    margin-bottom: 15px;
    line-height: 30px; /* Perfect vertical centering (50px height - 2*10px padding) */
    font-size: 16px; /* Slightly smaller font for the footer */
}

.footer-col h4 {
    color: #fff;
    margin-bottom: 15px;
    font-size: 18px;
}

.footer-col p, .footer-col li {
    font-size: 15px;
    line-height: 1.8;
    color: #bdc3c7; /* Ensure footer text color is consistent */
}

.footer-col .footer-logo {
    max-height: 50px;
    margin-bottom: 15px;
}

.footer-quick-links {
    list-style: none;
}

.footer-quick-links li a {
    color: #bdc3c7;
    text-decoration: none;
    will-change: color, padding-left; /* Performance hint */
    transition: color 0.3s ease, padding-left 0.3s ease;
}

/* --- Premium Admin & Gallery Pages --- */
.admin-login-container {
    max-width: 450px;
    margin: 40px auto;
}

.main-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
}

.admin-item-list li {
    list-style: none;
}

.footer-quick-links li a:hover {
    color: #e8491d;
    padding-left: 5px;
}

.footer-social-links {
    margin: 15px 0;
    padding: 0;
    list-style: none;
}
.footer-social-links li {
    display: inline-block;
    margin: 0 10px;
}

.footer-social-links a {
    color: #fff;
    font-size: 20px; /* Slightly smaller icons for the sub-footer */
    text-shadow: 0 1px 3px rgba(0,0,0,0.5); /* Adds shadow to the icon itself for an embossed look */
    transition: color 0.3s ease, text-shadow 0.3s ease;
    will-change: color, text-shadow; /* Performance hint */
}

.footer-social-links a:hover {
    color: #e8491d;
    text-shadow: 0 0 8px rgba(232, 73, 29, 0.7); /* Adds a red glow on hover */
}

.footer-sub-bar {
    background-color: #233140; /* Slightly darker shade for separation */
    padding: 15px 0;
    font-size: 14px;
}

.sub-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}





/* Contact Form */

/* About Page - Director Profile */
.director-profile {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 40px;
    background: #fff;
    padding: 30px;
    border-radius: 5px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.1);
}

.director-image {
    flex-basis: 35%;
    border-radius: 5px;
    overflow: hidden;
}

.director-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


label {
    display: block;
}

input, textarea {
    width: 90%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-top: 5px;
    transition: border-color 0.3s ease;
    will-change: border-color; /* Performance hint */
}

input:focus, textarea:focus {
    border-color: #e8491d;
    outline: none;
}

/* Card Layout for Schemes/Certificates */
.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.card {
    background: #fff;
    padding: 25px;
    border-radius: 5px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
    will-change: transform, box-shadow; /* Performance hint */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.card h3 {
    margin-top: 0;
}

.card-icon {
    font-size: 40px;
    color: #e8491d;
    margin-bottom: 15px;
}


/* Social Media Page */
.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 20px;
}

.social-icon {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: 5px;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Adds a soft shadow for depth */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform, box-shadow; /* Performance hint */
}

.social-icon:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Enhances shadow on hover */
}

.social-icon i {
    margin-right: 10px;
    font-size: 24px;
}

.social-icon.whatsapp { background-color: #25D366; }
.social-icon.facebook { background-color: #1877F2; }
.social-icon.youtube { background-color: #FF0000; }
.social-icon.linkedin { background-color: #0A66C2; }

#sidebar .button {
    display: block;
    margin-bottom: 10px;
    text-align: center;
}

.button {
    display: inline-block;
    background: #e8491d;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    will-change: background-color, transform; /* Performance hint */
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* --- Search Overlay Styles --- */
#search-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(44, 62, 80, 0.95); /* Dark, semi-transparent background */
    z-index: 2000; /* Ensure it's on top of everything */
    justify-content: center;
    align-items: center;
}

.search-overlay-close {
    position: absolute;
    top: 30px;
    right: 45px;
    font-size: 50px;
    color: #fff;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.search-overlay-close:hover {
    transform: scale(1.2);
}

.search-form-overlay {
    width: 80%;
    max-width: 600px;
}

.search-field-overlay {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid #fff;
    color: #fff;
    font-size: clamp(1.5rem, 1rem + 3vw, 2.5rem); /* Fluid font size */
    padding: 15px 0;
    text-align: center;
}

.search-field-overlay:focus {
    outline: none;
    border-bottom-color: #e8491d;
}
/* Menu Toggle (Hamburger) */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    position: absolute;
    top: 35px;
    right: 20px;
}

.menu-toggle span {
    height: 3px;
    width: 25px;
    background: #fff;
    margin-bottom: 5px;
    border-radius: 5px;
}

/* Aspect Ratio Box for Responsive Videos (e.g., YouTube embeds) */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio (9 / 16 = 0.5625) */
    height: 0;
    overflow: hidden;
    margin-bottom: 20px;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* Media Queries */

/* Mobile Styles */
@media(max-width: 768px) {
    .container {
        width: 100%;
        padding: 0 20px;
    }

    header {
        padding-bottom: 20px;
        padding-top: 15px;
    }

    .top-bar {
        display: none; /* Hide top bar on mobile for a cleaner look */
    }

    #showcase, #main-col {
        padding-top: clamp(80px, 15vw, 90px); /* Fluid padding-top for mobile */
    }
    
    header nav {
        float: none;
        text-align: center;
    }

    .main-nav {
        display: none;
        flex-direction: column;
        width: 100%;
    }

    .main-nav.show {
        display: flex;
    }

    header #branding,
    #sidebar,
    #main-col {
        float: none;
        text-align: center;
    }
    
    .logo-holder {
        width: 150px; /* Adjusted width for mobile */
        height: 50px; /* Adjusted height for mobile */
        line-height: 30px; /* Adjusted for 50px height - 2*10px padding */
    }

    #showcase h1 {
        font-size: 30px;
        margin-top: 40px;
    }

    .showcase-actions {
        flex-direction: column; /* Stack buttons vertically on mobile */
        gap: 15px;
    }

    #showcase::before {
        background: rgba(0, 0, 0, 0.6); /* Slightly darker overlay on mobile for better contrast */
    }

    #sidebar {
        margin-top: 20px;
    }

    input, textarea {
        width: 98%;
    }

    .menu-toggle {
        display: flex;
    }

    #trust-bar .container {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 2x2 grid on mobile */
        gap: 30px;
    }

    .testimonial-card {
        padding: 25px;
    }

    .section-title {
        font-size: 24px;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on smaller tablets/large phones */
    }

    .director-profile {
        flex-direction: column; /* Stack image on top of text */
        padding: 20px;
    }

    .contact-layout {
        display: flex;
        flex-direction: column;
    }

    .sub-bar-content {
        flex-direction: column;
        gap: 10px;
    }




    #backToTopBtn { bottom: 10px; right: 10px; padding: 10px; font-size: 14px; }
}

/* Back to Top Button */
#backToTopBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed position on the page */
    bottom: 20px; /* Distance from the bottom */
    right: 30px; /* Distance from the right */
    z-index: 99; /* Place on top of other elements */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #2c3e50; /* Match the new primary color */
    color: white; /* White text */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transition for hover */
    will-change: background-color, transform; /* Performance hint */
}

#backToTopBtn:hover {
    background-color: #e8491d; /* Use highlight color on hover for visibility */
    transform: scale(1.1);
}

/* --- Premium Scroll Animations --- */
.fade-in-section {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Tablet Styles */
@media(min-width: 769px) and (max-width: 991px) {
    .container {
        width: 90%;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
    }

}

/* =================================================================
   Dark Mode Toggle Styles (for Admin Pages)
   ================================================================= */
.dark-mode-toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 24px;
    margin-right: 15px; /* Space between toggle and logout button */
}

.dark-mode-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #e8491d; /* Accent color when dark mode is on */
}

input:focus + .slider {
    box-shadow: 0 0 1px #e8491d;
}

input:checked + .slider:before {
    -webkit-transform: translateX(16px);
    -ms-transform: translateX(16px);
    transform: translateX(16px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 24px;
}

.slider.round:before {
    border-radius: 50%;
}

/* =================================================================
   Dark Mode Styles (for Admin Pages)
   ================================================================= */
body.dark-mode {
    background-color: #1a1a1a; /* Dark background */
    color: #e0e0e0; /* Light text */
}

body.dark-mode .admin-header {
    background-color: #2c2c2c; /* Darker header background */
    border-bottom-color: #3a3a3a;
}

body.dark-mode .admin-header #branding .logo-img {
    filter: brightness(0.8) invert(1) grayscale(0.5); /* Adjust logo for dark mode */
}

body.dark-mode .admin-header-title {
    color: #e8491d; /* Use accent color in dark mode for consistency */
    border-left-color: #555;
}

body.dark-mode .admin-nav a {
    color: #E0E0E0; /* White Halogen Text */
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3); /* Subtle glow effect */
}

body.dark-mode .admin-nav a:hover {
    background-color: #3a3a3a; /* Darker hover background */
    color: #e8491d; /* Accent color on hover */
}

body.dark-mode .admin-nav .current a {
    background-color: #e8491d;
    color: #ffffff; /* Ensure white text for current item */
    text-shadow: none; /* Remove glow for solid background */
}

body.dark-mode .admin-controls .button-secondary {
    background-color: #444;
    color: #e0e0e0;
    border-color: #555;
}

body.dark-mode .admin-controls .button-secondary:hover {
    background-color: #e8491d;
    border-color: #e8491d;
    color: #fff;
}

body.dark-mode #main {
    background-color: #1a1a1a;
}

body.dark-mode .container {
    color: #e0e0e0;
}

body.dark-mode .card {
    background-color: #2c2c2c;
    box-shadow: 0 2px 15px rgba(0,0,0,0.3);
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 {
    color: #f0f0f0;
}

body.dark-mode input[type="text"],
body.dark-mode input[type="password"],
body.dark-mode textarea {
    background-color: #3a3a3a;
    color: #e0e0e0;
    border-color: #555;
}

body.dark-mode input[type="text"]::placeholder,
body.dark-mode input[type="password"]::placeholder,
body.dark-mode textarea::placeholder {
    color: #bbb;
}

body.dark-mode hr {
    border-color: #444;
}

body.dark-mode footer#main-footer {
    background-color: #2c2c2c;
    color: #bbb;
}

body.dark-mode footer#main-footer p {
    color: #bbb;
}


body.dark-mode .footer-sub-bar {
    background-color: #232323;
}

body.dark-mode .footer-sub-bar .copyright-text a {
    color: #e8491d !important;
}

/* =================================================================
   Admin Header Styles
   ================================================================= */

.admin-header {
    background: #fff;
    border-bottom: 1px solid #e9ecef;
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.admin-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.admin-header #branding {
    display: flex;
    align-items: center;
}

.admin-header-title {
    font-size: 18px;
    font-weight: 700;
    color: #e8491d; /* Use accent color for better visibility */
    margin-left: 15px;
    border-left: 2px solid #e9ecef;
    padding-left: 15px;
}

body.dark-mode .admin-header-title {
    color: #e8491d; /* Use accent color in dark mode for consistency */
    border-left-color: #555;
}

/* Adjust main content padding for admin pages */
.admin-header + #main {
    padding-top: 40px;
}

/* =================================================================
   Print Styles
   ================================================================= */
@media print {
    body {
        background: #fff;
        color: #000;
        font-size: 12pt;
    }

    header, footer, #backToTopBtn, .menu-toggle, .showcase-actions, .button, .social-links, .admin-controls {
        display: none !important;
    }

    #main, #main-col, #sidebar, .container {
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}