/* static/css/custom.css */
/* Sticky Wrapper - Positions the toggle button */
.sticky-wrapper {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 1040; /* Just below Bootstrap modals (1050+) but above most content */
}

/* Sticky Button - The visible toggle */
.fb-sticky {
    writing-mode: vertical-rl;
    transform: rotate(270deg); /* Correct text orientation */
    background-color: #3b5998; /* Facebook blue */
    color: white;
    padding: 15px 10px;
    cursor: pointer;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
    font-weight: bold;
    font-size: 14px;
    white-space: nowrap; /* Prevents text wrapping within the button */
}

.fb-sticky:hover {
    background-color: #2d4373; /* Darker blue on hover */
}

/* The icon inside the button (if using Font Awesome) */
.fb-sticky i.fab {
    margin-bottom: 8px; /* Space between icon and text */
    font-size: 18px;
    display: block; /* Ensure it's on its own line */
    text-align: center;
}


/* Facebook Feed Panel - Hidden by default, slides in */
.fb-feed {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%; /* Full width on small screens */
    max-width: 400px; /* Limit width on larger screens */
    height: 100vh;
    background-color: #fff;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
    z-index: 1050; /* High z-index to overlay content */
    overflow-y: auto; /* Allow scrolling if content is tall */
    transform: translateX(100%); /* Start hidden off-screen to the right */
    transition: transform 0.3s ease-in-out;
    padding: 15px; /* Add some padding inside the panel */
    box-sizing: border-box; /* Include padding in width/height */
}

/* Show the feed when active */
.fb-feed.active {
    transform: translateX(0); /* Slide in */
}

/* Close Button - Positioned inside the panel */
.close-btn {
    position: absolute;
    top: 15px;
    left: 15px; /* Position on the left inside the panel */
    font-size: 30px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    z-index: 1051; /* Above the iframe */
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 1; /* Center the 'x' vertically */
    background-color: #f8f9fa; /* Light background */
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex; /* Use flexbox for perfect centering */
    align-items: center;
    justify-content: center;
}

.close-btn:hover {
    color: #000;
    background-color: #e9ecef; /* Slightly darker on hover */
}

/* Style the Facebook Plugin container */
.fb-page-container {
    margin-top: 50px; /* Space for the close button */
    width: 100% !important; /* Ensure it takes the width of the parent */
    max-width: 100% !important; /* Prevent overflow */
}

.fb-page-container > span {
    width: 100% !important; /* Target the iframe container span */
    max-width: 100% !important;
}

/* Ensure iframe responsiveness */
.fb-page-container iframe {
    width: 100% !important;
    max-width: 100% !important;
}


/* Responsive Adjustments */
@media (max-width: 576px) {
    .fb-feed {
        max-width: 100%; /* Full width on very small screens */
        width: 100%;
    }
    .sticky-wrapper {
        top: 70%; /* Adjust position if needed on small screens */
    }
}

/* --- End Sticky Facebook Feed Styles --- */
/* --- Force navbar to be white, static, and dark-text all the time --- */
.ftco-navbar-light {
  background: #fff !important;
  position: static !important; /* Or relative */
  top: auto !important;
  color: #000 !important;
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.ftco-navbar-light .navbar-brand,
.ftco-navbar-light .navbar-nav > .nav-item > .nav-link {
  color: #000 !important;
}

.ftco-navbar-light .navbar-nav > .nav-item > .nav-link:hover {
  color: #000 !important; /* Adjust shade if needed */
}

.ftco-navbar-light .navbar-nav > .nav-item.active > a {
  color: #f86f2d !important;
}

.ftco-navbar-light .navbar-toggler {
  border-color: #000 !important;
  color: #000 !important;
}

.ftco-navbar-light .navbar-toggler-icon {
  filter: invert(0%) !important;
}

/* --- Override scrolled state to prevent conflicts --- */
.ftco-navbar-light.scrolled,
.ftco-navbar-light.navbar-scrolled { /* Cover potential class names */
  position: static !important;
  top: auto !important;
  background: #fff !important;
  color: #000 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  margin-top: 0 !important;
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1) !important;
}

.ftco-navbar-light.scrolled .navbar-brand,
.ftco-navbar-light.scrolled .navbar-nav .nav-link,
.ftco-navbar-light.navbar-scrolled .navbar-brand,
.ftco-navbar-light.navbar-scrolled .navbar-nav .nav-link {
  color: #000 !important;
}

.ftco-navbar-light.scrolled .navbar-toggler,
.ftco-navbar-light.navbar-scrolled .navbar-toggler {
  border-color: #000 !important;
  color: #000 !important;
}

.ftco-navbar-light.scrolled .navbar-toggler-icon,
.ftco-navbar-light.navbar-scrolled .navbar-toggler-icon {
  filter: invert(0%) !important;
}
/* static/css/custom.css */
/* --- ADD THIS TO THE END OF YOUR custom.css FILE --- */

/* Ensure navbar is always fixed at the top */
.ftco-navbar-light {
    /* Force it to be fixed */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    /* Ensure it's visible and styled as you want */
    background: #fff !important; /* White background */
    color: #000 !important; /* Dark text */
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1) !important; /* Shadow */
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important; /* Override any transform hiding it */
    margin-top: 0 !important; /* Override negative margins used for hiding */
    /* Ensure it's above other content */
    z-index: 1030 !important; /* Bootstrap's default for fixed navbar, adjust if needed */
    /* Ensure it takes full width */
    width: 100% !important;
}

/* --- CRUCIAL: Override the 'sleep' state which hides the navbar --- */
/* The Welfare JS adds/removes 'awake' and 'sleep' classes. 'sleep' hides it. */
.ftco-navbar-light.sleep,
.ftco-navbar-light.scrolled.sleep {
    /* When JS adds 'sleep', force it to stay visible and in place */
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important; /* Most important - override translateY */
    margin-top: 0px !important; /* Override the hiding margin */
    top: 0 !important;
    position: fixed !important; /* Re-assert fixed position */
}

/* --- CRUCIAL: Override the 'scrolled' state styles if they conflict --- */
.ftco-navbar-light.scrolled {
    /* Ensure scrolled state also keeps it fixed and visible */
    position: fixed !important;
    top: 0 !important;
    background: #fff !important;
    color: #000 !important;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    margin-top: 0 !important; /* This is key - override the -130px */
    /* Ensure transition doesn't interfere with forced styles */
    transition: none !important; /* Or ensure your styles take precedence */
}

/* --- Ensure navbar content (links, brand, toggler) styles are consistent --- */
.ftco-navbar-light .navbar-brand,
.ftco-navbar-light .navbar-nav .nav-link,
.ftco-navbar-light.scrolled .navbar-brand,
.ftco-navbar-light.scrolled .navbar-nav .nav-link,
.ftco-navbar-light.sleep .navbar-brand,
.ftco-navbar-light.sleep .navbar-nav .nav-link {
    color: #000 !important; /* Ensure dark text */
}

.ftco-navbar-light .navbar-toggler,
.ftco-navbar-light.scrolled .navbar-toggler,
.ftco-navbar-light.sleep .navbar-toggler {
    border-color: #000 !important; /* Dark border for toggler */
    color: #000 !important;
}

.ftco-navbar-light .navbar-toggler-icon,
.ftco-navbar-light.scrolled .navbar-toggler-icon,
.ftco-navbar-light.sleep .navbar-toggler-icon {
    filter: invert(0%) !important; /* Ensure dark icon */
}
/* public_html/css/custom.css */
/* --- Experimental Custom Dropdown Styles (focus-within) --- */

/* Base Dropdown Container */
.custom-dropdown-exp {
    position: relative; /* Crucial for absolute positioning of menu */
}

/* Toggle Link Styling */
.custom-dropdown-exp .custom-dropdown-toggle-exp {
    display: block;
    padding: 0.5rem 1rem;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}
.navbar-light .navbar-nav .custom-dropdown-exp .custom-dropdown-toggle-exp:hover,
.navbar-light .navbar-nav .custom-dropdown-exp .custom-dropdown-toggle-exp:focus {
    color: white;
}
.navbar-light .navbar-nav .custom-dropdown-exp.show .custom-dropdown-toggle-exp, /* For JS if needed */
.navbar-light .navbar-nav .custom-dropdown-exp.active .custom-dropdown-toggle-exp {
    color: white;
}

/* Dropdown Menu */
.custom-dropdown-menu-exp {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: block; /* Initially block, visibility controlled by opacity/transform */
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);

    /* Hidden state */
    opacity: 0;
    visibility: hidden; /* Use visibility in addition to opacity for better accessibility */
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

/* Show Menu using :focus-within */
.custom-dropdown-exp:focus-within .custom-dropdown-menu-exp,
.custom-dropdown-exp:hover .custom-dropdown-menu-exp { /* Hover for desktop convenience */
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Dropdown Items */
.custom-dropdown-menu-exp .dropdown-item {
    display: block;
    width: 100%;
    padding: 0.25rem 1.5rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    text-decoration: none;
}
.custom-dropdown-menu-exp .dropdown-item:hover,
.custom-dropdown-menu-exp .dropdown-item:focus {
    color: #16181b;
    text-decoration: none;
    background-color: #f8f9fa;
}

/* Arrow Styling */
.custom-dropdown-arrow-exp {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.5em;
    vertical-align: middle;
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
    transition: transform 0.2s ease;
}
.custom-dropdown-exp:focus-within .custom-dropdown-arrow-exp,
.custom-dropdown-exp:hover .custom-dropdown-arrow-exp {
    transform: rotate(180deg);
}

/* Responsive Adjustments for Mobile */
@media (max-width: 991.98px) {
    .custom-dropdown-menu-exp {
        position: static;
        float: none;
        width: 100%; /* Full width on mobile */
        margin-top: 0;
        background-color: transparent;
        border: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
        display: none; /* Initially hidden on mobile */
        padding: 0; /* Adjust padding */
    }

    /* Show menu items when navbar is expanded AND parent has focus/hover */
    .navbar-collapse.show .custom-dropdown-exp:focus-within .custom-dropdown-menu-exp,
    .navbar-collapse.show .custom-dropdown-exp:hover .custom-dropdown-menu-exp {
        display: block; /* Show on focus/hover within expanded navbar */
    }

    /* Adjust item styling for mobile nav */
    .custom-dropdown-menu-exp .dropdown-item {
        padding: 0.5rem 1rem;
        color: rgba(255, 255, 255, 0.5);
        border-radius: 0;
    }
    .custom-dropdown-menu-exp .dropdown-item:hover,
    .custom-dropdown-menu-exp .dropdown-item:focus {
        color: white;
        background-color: rgba(255, 255, 255, 0.1);
    }

    /* (Removed empty ruleset for .custom-dropdown-arrow-exp) */
    .custom-dropdown-exp:focus-within .custom-dropdown-arrow-exp,
    .custom-dropdown-exp:hover .custom-dropdown-arrow-exp {
        transform: none; /* Disable rotation on mobile */
    }
}
/* --- End Experimental Custom Dropdown Styles --- */
/* public_html/css/custom.css */
/* --- Experimental Custom Dropdown Styles (focus-within) - Slightly Adjusted --- */
/* ... (previous CSS rules) ... */

/* Show Menu using :focus-within (for keyboard) AND when .show class is added (by JS) */
/* This ensures JS toggle and keyboard accessibility work */
.custom-dropdown-exp:focus-within .custom-dropdown-menu-exp,
.custom-dropdown-exp:hover .custom-dropdown-menu-exp, /* Hover for desktop convenience */
.custom-dropdown-exp .custom-dropdown-menu-exp.show { /* Show class added by JS */
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Similarly for the arrow */
.custom-dropdown-exp:focus-within .custom-dropdown-arrow-exp,
.custom-dropdown-exp:hover .custom-dropdown-arrow-exp,
.custom-dropdown-exp.show .custom-dropdown-arrow-exp { /* Show class added by JS */
    transform: rotate(180deg);
}

/* ... (rest of CSS rules) ... */
/* --- End Experimental Custom Dropdown Styles --- */
/* public_html/css/custom.css */

/* --- Bantwana Brand Colors --- */
:root {
  --bantwana-green: #4CAF50; /* A standard green, adjust hex if needed */
  --bantwana-orange: #FF9800; /* A standard orange, adjust hex if needed */
  --bantwana-green-dark: #388E3C; /* Darker shade for hover/buttons */
  --bantwana-orange-dark: #F57C00; /* Darker shade for hover */
  --bantwana-white: #FFFFFF;
  --bantwana-light-bg: #f8f9fa; /* Light background for sections/cards */
}

/* --- Donate Page Specific Styles --- */

/* 1. Hero Section */
.donate-hero {
  position: relative;
  /* background-image is set inline in the HTML */
  background-size: cover;
  background-position: center;
  color: var(--bantwana-white);
  padding: 80px 0; /* Adjust padding */
  margin-bottom: 40px; /* Space below hero */
}
.donate-hero .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4); /* Dark overlay for text readability */
  z-index: 1;
}
.donate-hero .container {
  position: relative;
  z-index: 2;
}
.donate-hero h1 {
  font-weight: 700;
  margin-bottom: 15px;
}
.donate-hero p {
  font-size: 1.2rem;
  opacity: 0.9;
}
.donate-hero .breadcrumbs a,
.donate-hero .breadcrumbs span {
  color: rgba(255, 255, 255, 0.85);
}
.donate-hero .breadcrumbs a:hover {
  color: var(--bantwana-white);
  text-decoration: underline;
}

/* 2. Section Headings */
.ftco-section .heading-section h2 {
  color: #333; /* Dark text for headings */
  position: relative;
  padding-bottom: 15px;
  margin-bottom: 25px;
}
.ftco-section .heading-section h2:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px; /* Underline width */
  height: 3px; /* Underline thickness */
  background-color: var(--bantwana-green); /* Use green for heading underline */
}

/* 3. Sidebar Boxes */
.sidebar-box {
  background-color: var(--bantwana-light-bg);
  border-radius: 8px; /* Slightly rounded corners */
  padding: 25px;
  margin-bottom: 30px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Subtle shadow */
  border-left: 4px solid var(--bantwana-green); /* Green accent border */
}
.sidebar-box h3.heading-2 {
  color: #333;
  margin-top: 0;
  font-size: 1.5rem;
  font-weight: 600;
}

/* 4. List Group Items (Ways to Give) */
.list-group-item {
  border: 1px solid #e9ecef;
  border-radius: 6px !important; /* Force rounded corners */
  margin-bottom: 8px;
  transition: all 0.2s ease-in-out;
  background-color: var(--bantwana-white);
}
.list-group-item:hover {
  background-color: #e9f7ef; /* Light green hover */
  border-color: #c8e6c9;
  transform: translateY(-2px); /* Slight lift on hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}
.list-group-item i {
  color: var(--bantwana-green); /* Green icons */
  width: 24px; /* Consistent icon width */
  text-align: center;
}

/* 5. Buttons */
/* Primary Button (e.g., Donate Now) */
.btn-primary {
  background-color: var(--bantwana-green);
  border-color: var(--bantwana-green);
  color: var(--bantwana-white);
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 4px;
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--bantwana-green-dark) !important;
  border-color: var(--bantwana-green-dark) !important;
  color: var(--bantwana-white) !important;
  transform: translateY(-2px); /* Lift effect */
  box-shadow: 0 4px 10px rgba(76, 175, 80, 0.3) !important; /* Green shadow */
}
.btn-primary:focus,
.btn-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25) !important; /* Focus ring */
}

/* Outline Button (used in FAQ accordion if needed) */
.btn-outline-primary {
  color: var(--bantwana-green);
  border-color: var(--bantwana-green);
}
.btn-outline-primary:hover {
  background-color: var(--bantwana-green);
  border-color: var(--bantwana-green);
}

/* 6. Progress Bars (if used for financial breakdown visuals) */
.progress {
  height: 10px;
  border-radius: 5px;
  background-color: #e9ecef;
  overflow: hidden;
  margin: 10px 0;
}
.progress-bar {
  background-color: var(--bantwana-green); /* Use green for progress */
}

/* 7. Badges (e.g., Popular label) */
.badge-primary {
  background-color: var(--bantwana-orange); /* Use orange for badge */
}
/* Optional: Add a subtle hover effect to badges if they are links
.badge-primary:hover {
    background-color: var(--bantwana-orange-dark);
} */

/* 8. Highlight Box (Financial Stewardship summary) */
.bg-highlight {
  background-color: #e8f5e9 !important; /* Very light green background */
  border: 1px solid #c8e6c9;
  border-radius: 8px;
  padding: 20px;
}

/* 9. Stats/Counters Section Styling */
.ftco-counter .block-18 .text strong {
  color: var(--bantwana-green); /* Highlight numbers in green */
}

/* 10. Clean Form Styling */
.donation-form .form-control {
  border-radius: 4px;
  border: 1px solid #ced4da;
  padding: 10px 15px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.donation-form .form-control:focus {
  border-color: var(--bw-green);
  box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.15);
}
/* Style the toggle buttons for donation amounts */
.btn-group-toggle .btn {
  border: 1px solid #ced4da;
  color: #495057;
  padding: 8px 12px;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}
.btn-group-toggle .btn:hover {
  background-color: #f8f9fa;
}
.btn-group-toggle .btn.active,
.btn-group-toggle .btn:active {
  background-color: var(--bantwana-green) !important;
  border-color: var(--bantwana-green) !important;
  color: white !important;
}
/* --- End Donate Page Specific Styles --- */
/* public_html/css/custom.css */
/* --- Gallery Page Specific Styles (Approach 3: Folder Links) --- */
/* ... (Previous .page-hero styles remain the same) ... */

/* Folder Grid (Main Gallery Page) */
.folder-grid {
    margin-top: 30px;
}
.folder-item {
    display: block;
    margin-bottom: 30px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    height: 200px; /* Fixed height for folder preview */
}
.folder-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    text-decoration: none; /* Remove underline on link hover */
}
.folder-item .folder-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}
.folder-item:hover .folder-img {
    transform: scale(1.05);
}
.folder-item .folder-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 15px;
    text-align: center;
}
.folder-item .folder-overlay h3 {
    margin: 0;
    font-size: 1.2rem;
    color: white;
}
.folder-item .folder-overlay p {
    margin: 5px 0 0;
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Category Gallery Page (e.g., /gallery/children) */
.category-gallery .gallery-item-single {
    margin-bottom: 30px;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: block;
    height: 250px;
}
.category-gallery .gallery-item-single:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}
.category-gallery .gallery-item-single .img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}
.category-gallery .gallery-item-single:hover .img {
    transform: scale(1.05);
}

/* --- End Gallery Page Specific Styles (Approach 3) --- */
/* --- Fix for About Page Background Image --- */
/* Target the specific div by its ID */
#about-page-image {
    /* Ensure the background image is applied (should be from inline style, but let's reinforce) */
    /* background-image: url('../images/event-1.jpg'); */ /* Uncomment and adjust path if inline style fails */
    
    /* Ensure the background image covers the area */
    background-size: cover !important; /* Force cover sizing */
    background-position: center center !important; /* Force centering */
    background-repeat: no-repeat !important; /* Force no repeat */

    /* Crucially, ensure the div has a minimum height */
    /* Adjust the height value as needed */
    min-height: 400px; /* Or try height: 400px; if min-height doesn't work */

    /* Optional: Add a border for debugging to see the div's boundaries */
    /* border: 2px solid red !important; */

    /* Ensure padding/margin doesn't collapse it */
    /* padding: 10px !important; */ /* Uncomment if needed */
}
/* --- End Fix for About Page Background Image --- */
@media (max-width: 991.98px) {
  .navbar-collapse {
    max-height: 80vh; /* Set a maximum height for the mobile menu */
    overflow-y: auto; /* Enable vertical scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS devices */
  }
}
/* Sticky Facebook Feed Styles */
.sticky-wrapper {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9998;
}

.fb-sticky {
  background-color: #F96D00; /* Orange instead of Facebook blue */
  color: white;
  padding: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px 0 0 10px; /* Adjusted for right-side orientation */
  width: 50px;
  height: 200px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-weight: bold;
  text-align: center;
  transform: rotate(-90deg);
  transition: background-color 0.3s ease;
}

.fb-sticky:hover,
.fb-sticky:focus {
  background-color: #e55f00; /* Darker orange for hover/focus */
}

.fb-feed {
  position: fixed;
  right: 0;
  top: 0;
  height: 100%;
  width: 500px; /* Matches data-width of fb-page */
  background-color: #fff;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
}

.fb-feed.open {
  transform: translateX(0);
}

.close-btn {
  background-color: #F96D00; /* Orange instead of provided blue */
  color: white;
  text-align: center;
  cursor: pointer;
  font-size: 24px;
  padding: 5px 20px;
  font-weight: bold;
  align-self: flex-end;
  z-index: 10000;
  transition: background-color 0.3s ease;
}

.close-btn:hover,
.close-btn:focus {
  background-color: #e55f00; /* Darker orange for hover/focus */
}

.fb-page {
  border: none;
  overflow: hidden;
  flex-grow: 1;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
  .fb-feed {
    width: 100%; /* Full width on mobile */
  }
  .fb-page {
    width: 100% !important;
    height: 600px !important; /* Adjust for mobile */
  }
}

/* Orange highlight for dropdowns and links */
.dropdown-item:focus,
.dropdown-item:active,
.dropdown-item:hover,
a:focus,
a:active,
a:hover {
  background-color: #F96D00 !important;
  color: #fff !important;
}

/* Mobile menu scroll fix */
@media (max-width: 991.98px) {
  .navbar-collapse {
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .navbar-nav .dropdown-menu {
    position: static;
    float: none;
    background: transparent;
    border: none;
  }
}


/* Hero section styling */
.hero-wrap {
    position: relative;
    height: clamp(400px, 65vh, 800px);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Gradient overlay */
.hero-gradient {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.6) 50%,
        rgba(0, 0, 0, 0.4) 100%
    );
    pointer-events: none;
}

/* Ensure content is above the gradient */
.hero-wrap .container {
    position: relative;
    z-index: 2;
}

/* Text styling */
.hero-wrap .breadcrumbs {
    font-size: clamp(0.9rem, 1.8vw, 1.1rem);
    color: #f8f8f8;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.hero-wrap .bread {
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 900;
    color: #ffffff;
    text-shadow: 0 3px 15px rgba(0, 0, 0, 0.7);
}

.hero-wrap p.mb-0 {
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 600;
    color: #f8f8f8;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-wrap {
        height: clamp(350px, 60vh, 600px);
        padding: 1.5rem;
    }
    .hero-wrap .bread {
        font-size: clamp(1.75rem, 4vw, 2.5rem);
    }
    .hero-wrap p.mb-0 {
        font-size: clamp(0.9rem, 1.8vw, 1.1rem);
    }
}

@media (max-width: 480px) {
    .hero-wrap {
        padding: 1rem;
    }
    .hero-wrap .bread {
        font-size: clamp(1.5rem, 3.5vw, 2rem);
    }
    .hero-wrap p.mb-0 {
        font-size: clamp(0.8rem, 1.6vw, 1rem);
    }
}