/* =================================================================================
   JOSLYN CENTER STYLE GUIDE IMPLEMENTATION
   
   HEADER RESPONSIVE FIXES:
   - Fixed header button overlap issues when window is resized
   - On desktop screens (1201px-1400px), contact info wraps to second line
   - Header buttons (Programs & Activities, Wellness Center, Entertainment) stay on top
   - Phone, Address, and Social media move to second line when space is tight
   - Prevents button wrapping on 1280x1024 and similar resolutions
   - Ensures proper spacing and no overlap at all desktop sizes
   ================================================================================= */
   
   /* WYSIWYG-friendly team member styles - Frontend Display */
.team-container .team-member h3 {
    color: #006B5A;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 5px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align: center; /* Move inline style to CSS */
}

/* Ensure all team member elements are centered by default */
.team-container .team-member {
    background: white;
    border-radius: 8px;
    padding: 20px;
    text-align: center; /* This centers all content including titles, emails, phones */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border-top: 4px solid #00A896;
}

/* Make images easily editable in WYSIWYG */
.cyber-wysiwyg-editor img[data-cyber-editable-image] {
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.cyber-wysiwyg-editor img[data-cyber-editable-image]:hover {
    opacity: 0.8;
    box-shadow: 0 0 0 2px #3498db;
}

/* WYSIWYG Editor Styling - Makes content look correct inside the editor */
.cyber-wysiwyg-editor .team-container {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
    line-height: 1.6 !important;
    color: #333 !important;
    background-color: #ffffff !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

.cyber-wysiwyg-editor .team-container .container {
    margin: 0 auto !important;
}

/* Hero Section in WYSIWYG */
.cyber-wysiwyg-editor .team-container .hero {
    background-color: #139ba6 !important;
    padding: 0px 20px !important;
    text-align: center !important;
    position: relative !important;
    background-image: linear-gradient(135deg, #139ba6 0%, #00957d 100%) !important;
}

.cyber-wysiwyg-editor .team-container .hero::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #00A896, transparent) !important;
}

.cyber-wysiwyg-editor .team-container .hero h1 {
    color: white !important;
    font-size: 3.5rem !important;
    font-weight: 300 !important;
    margin-bottom: 0 !important;
    letter-spacing: 8px !important;
    text-transform: uppercase !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

/* Team Section in WYSIWYG */
.cyber-wysiwyg-editor .team-container .team-section {
    padding: 0px 20px !important;
    background-color: #f5f5f5 !important;
}

.cyber-wysiwyg-editor .team-container .team-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 40px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.cyber-wysiwyg-editor .team-container .team-member {
    background: white !important;
    border-radius: 8px !important;
    padding: 20px !important;
    text-align: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
    border-top: 4px solid #00A896 !important;
}

.cyber-wysiwyg-editor .team-container .team-member:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

.cyber-wysiwyg-editor .team-container .team-member img {
    width: 180px !important;
    height: 225px !important;
    border-radius: 12px !important;
    object-fit: cover !important;
    margin-bottom: 20px !important;
    border: 3px solid #f8f9fa !important;
    cursor: pointer !important;
}

.cyber-wysiwyg-editor .team-container .team-member h3 {
    color: #006B5A !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    margin-bottom: 5px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    text-align: center !important;
}

.cyber-wysiwyg-editor .team-container .team-member .title {
    color: #00A896 !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
    line-height: 1.4 !important;
}

.cyber-wysiwyg-editor .team-container .team-member .email {
    color: #666 !important;
    font-size: 0.9rem !important;
    margin-bottom: 5px !important;
}

.cyber-wysiwyg-editor .team-container .team-member .phone {
    color: #666 !important;
    font-size: 0.9rem !important;
}

/* Mission & Vision Section in WYSIWYG */
.cyber-wysiwyg-editor .team-container .mission-section {
    background-color: #139ba6 !important;
    padding: 60px 20px !important;
    color: white !important;
    text-align: center !important;
}

.cyber-wysiwyg-editor .team-container .mission-content {
    max-width: 800px !important;
    margin: 0 auto !important;
}

.cyber-wysiwyg-editor .team-container .mission-section h2 {
    color: white !important;
    font-size: 1.5rem !important;
    margin-bottom: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

.cyber-wysiwyg-editor .team-container .mission-section p {
    font-size: 1.1rem !important;
    line-height: 1.8 !important;
    margin-bottom: 40px !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Footer Section in WYSIWYG */
.cyber-wysiwyg-editor .team-container .footer {
    background-color: #006B5A !important;
    padding: 60px 20px 40px !important;
    color: white !important;
}

.cyber-wysiwyg-editor .team-container .footer-content {
    max-width: 1200px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 40px !important;
}

.cyber-wysiwyg-editor .team-container .footer-section h3 {
    color: #00A896 !important;
    font-size: 1.25rem !important;
    margin-bottom: 20px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

.cyber-wysiwyg-editor .team-container .footer-section p,
.cyber-wysiwyg-editor .team-container .footer-section a {
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: none !important;
    line-height: 1.8 !important;
    margin-bottom: 10px !important;
    display: block !important;
}

.cyber-wysiwyg-editor .team-container .footer-section a:hover {
    color: #00A896 !important;
    text-decoration: underline !important;
}

.cyber-wysiwyg-editor .team-container .footer-bottom {
    text-align: center !important;
    margin-top: 40px !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 0.9rem !important;
}

.cyber-wysiwyg-editor .team-container .cac-logo {
    width: 120px !important;
    height: auto !important;
    margin-bottom: 15px !important;
}

/* Responsive Design for WYSIWYG */
@media (max-width: 768px) {
    .cyber-wysiwyg-editor .team-container .hero {
        padding: 60px 20px !important;
    }

    .cyber-wysiwyg-editor .team-container .hero h1 {
        font-size: 2.5rem !important;
        letter-spacing: 4px !important;
    }

    .cyber-wysiwyg-editor .team-container .team-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .cyber-wysiwyg-editor .team-container .team-member {
        padding: 25px !important;
    }

    .cyber-wysiwyg-editor .team-container .mission-section {
        padding: 40px 20px !important;
    }
}

@media (max-width: 480px) {
    .cyber-wysiwyg-editor .team-container .hero h1 {
        font-size: 2rem !important;
        letter-spacing: 2px !important;
    }

    .cyber-wysiwyg-editor .team-container .team-member img {
        width: 100px !important;
        height: 125px !important;
    }
}

/* Make sure the editor background doesn't interfere */
.cyber-wysiwyg-editor {
    background-color: transparent !important;
}

/* Ensure proper spacing in the editor */
.cyber-wysiwyg-editor .team-container > .container {
    width: 100% !important;
    max-width: none !important;
}

/* Sponsor Section Styles - Working with resizable class */
.sponsors-container {
  text-align: center;
}

.sponsor-tier {
  margin-bottom: 60px;
}

.sponsor-tier h3 {
  color: #00CED1;
  margin-bottom: 30px;
}

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px;
  justify-items: center;
  margin-bottom: 40px;
}

.sponsor-link {
  display: block;
  transition: transform 0.2s ease;
}

.sponsor-link:hover {
  transform: scale(1.05);
}

/* Target ALL resizable images in the sponsor grid, regardless of attributes */
.sponsor-grid .resizable,
.sponsor-grid img.resizable,
.sponsor-grid img[data-resizable-initialized],
.sponsor-grid img[data-cyber-editable-image] {
  max-width: 280px !important;
  max-height: 140px !important;
  width: auto !important;
  height: auto !important;
  padding: 10px !important;
  object-fit: contain;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: block;
  margin: 0 auto;
}

/* Handle images that get placed outside of links */
.sponsor-grid > img {
  max-width: 280px !important;
  max-height: 140px !important;
  width: auto !important;
  height: auto !important;
  padding: 10px !important;
  object-fit: contain;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: block;
  margin: 0 auto;
}

/* Override any inline styles that might conflict */
.sponsor-grid img[style*="max-width"],
.sponsor-grid img[style*="max-height"],
.sponsor-grid img[style*="width"],
.sponsor-grid img[style*="height"] {
  max-width: 280px !important;
  max-height: 140px !important;
  width: auto !important;
  height: auto !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .sponsor-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
  }

  .sponsor-grid .resizable,
  .sponsor-grid img.resizable,
  .sponsor-grid img[data-resizable-initialized],
  .sponsor-grid img[data-cyber-editable-image],
  .sponsor-grid > img {
    max-width: 240px !important;
    max-height: 120px !important;
  }
}

/* Catch-all for any image in the sponsor grid */
.sponsor-grid img {
  max-width: 280px !important;
  max-height: 140px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}



.board-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.board-list li {
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #333;
    display: flex;
    align-items: center;
}

.board-list li::before {
    content: '';
    width: 8px;
    height: 8px;
    background-color: #18c6d4;
    border-radius: 50%;
    margin-right: 15px;
    flex-shrink: 0;
}

/* Board List Styling - for WYSIWYG editor display */
.cyber-wysiwyg-editor .board-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cyber-wysiwyg-editor .board-list li {
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #333;
    display: flex;
    align-items: center;
}

.cyber-wysiwyg-editor .board-list li::before {
    content: '';
    width: 8px;
    height: 8px;
    background-color: #18c6d4;
    border-radius: 50%;
    margin-right: 15px;
    flex-shrink: 0;
}

/* Header contact info layout */
.header-contact-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-left: 15px; /* 25px spacing from logo */
    align-items: flex-start; /* Left align the contact items */
    justify-content: center; /* Vertically center with logo */
    position: relative;
}

/* Desktop layout for contact info and social media - All desktop sizes */
@media (min-width: 1201px) {
    .header-contact-info {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 20px !important;
        flex-wrap: wrap !important;
        
    }
    
    .social-media-icons {
        order: 2;
        margin-left: 15px !important;
    }
}

/* Fix for 1280x1024 and similar resolutions - prioritize main buttons */
@media (min-width: 1201px) and (max-width: 1400px) {
    .header-contact-info {
        flex-wrap: wrap !important;
        max-width: calc(100% - 450px) !important; /* More space for buttons */
        align-items: flex-start !important;
    }
    
    /* Make contact items more flexible */
    .header-contact-info .contact-item {
        flex-shrink: 1 !important;
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* When space is tight, move ALL contact info to second line */
    .header-contact-info .contact-item:nth-child(1),
    .header-contact-info .contact-item:nth-child(2) {
        flex-basis: 100% !important;
        order: 3 !important;
        margin-top: 5px !important;
    }
    
    /* Phone and address on same wrapped line */
    .header-contact-info .contact-item:nth-child(1) {
        margin-right: 15px !important;
        margin-top: 5px !important;
    }
    
    /* Social media also moves to second line */
    .social-media-icons {
        order: 4 !important;
        margin-left: 0 !important;
        margin-top: 5px !important;
        flex-basis: 100% !important;
        justify-content: flex-start !important;
    }
}

/* Desktop: Logo and contact info in a row - All desktop sizes */
@media (min-width: 1025px) {
    .navbar-section.logo {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important; /* Allow for wrapping */
        width: 100%;
        padding-right: 400px !important; /* Ensure space for header buttons */
        box-sizing: border-box !important;
        min-height: 60px !important; /* Allow space for wrapped content */
    }
}

/* Adjust spacing for medium desktop screens */
@media (min-width: 1201px) and (max-width: 1400px) {
    .navbar-section.logo {
        padding-right: 450px !important; /* More space for tighter button layout */
    }
}

/* Handle very small desktop windows - ensure no overlap */
@media (min-width: 1201px) and (max-width: 1300px) {
    .header-contact-info {
        max-width: calc(100% - 500px) !important; /* Even more space for buttons */
    }
    
    /* Hide social media icons on very cramped screens */
    .social-media-icons {
        display: none !important;
    }
    
    /* Reduce logo size slightly if needed */
    .navbar-brand img {
        max-height: 45px !important;
    }
    
    /* Make contact text smaller */
    .header-contact-info .contact-item {
        font-size: 13px !important;
    }
    
    .header-contact-info .contact-item i {
        font-size: 13px !important;
    }
    
    /* Ensure logo stays at top when content wraps */
    .navbar-brand {
        align-self: flex-start !important;
        margin-top: 0 !important;
    }
}

.header-contact-info .contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--dark);
    margin: 0; /* Remove any default margins */
}

.header-contact-info .contact-item i {
    font-size: 14px;
    color: var(--primary);
    width: 16px; /* Fixed width for icon alignment */
    text-align: center;
}

.header-contact-info .contact-item a {
    font-weight: 600;
    color: var(--dark);
    text-decoration: none;
    transition: color 0.3s ease;
}

.header-contact-info .contact-item a:hover {
    color: var(--primary);
}

/* Social media icons styling */
.social-media-icons {
    display: flex;
    gap: 15px;
    margin-left: 20px;
    align-items: center;
}
.fa-search {
color: white;    
}
.fa-brands, .fab {
    color: white;
    font-weight: 400;
}
.social-media-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: var(--primary);
    color: white;
    border-radius: 50%;
    text-decoration: none;
    font-size: 16px;
    transition: all 0.3s ease;
}

.social-media-icons a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.social-media-icons a[href*="instagram"]:hover {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.social-media-icons a[href*="facebook"]:hover {
    background-color: #1877f2;
}

@media (max-width: 1200px) {
    .social-media-icons {
        display: none !important;
    }
}

/* =================================================================================
   HEADER SEARCH BAR STYLES
   ================================================================================= */

/* Base search container styles */
.header-search-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure mobile search is positioned properly in header */
#header .mobile-tablet-search {
    position: relative;
    width: 100%;
}

.header-search-container form {
    display: flex;
    align-items: center;
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 25px;
    padding: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
}

.header-search-container form:focus-within {
    border-color: #00A896;
    box-shadow: 0 2px 12px rgba(0, 168, 150, 0.2);
}

.header-search-container input[type="text"] {
    border: none;
    background: transparent;
    padding: 8px 15px;
    font-size: 14px;
    color: #333;
    outline: none;
    min-width: 200px;
    font-family: inherit;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}

.header-search-container input[type="text"]::placeholder {
    color: #999;
    font-style: italic;
}

.header-search-container button {
    background: #00A896;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
    font-size: 14px;
    margin: 0;
    padding: 0;
    min-height: auto;
}

.header-search-container button:hover {
    background: #008074;
    transform: scale(1.05);
}

.header-search-container button:focus {
    outline: 2px solid #00A896;
    outline-offset: 2px;
    background: #008074;
}

.header-search-container input[type="text"]:focus {
    outline: none;
    /* Focus is handled by the form container */
}

/* Desktop search positioning */
.desktop-search {
    margin-left: auto;
    margin-right: 20px;
}

/* Mobile search base styles */
.mobile-tablet-search {
    padding: 15px 0;
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid #e9ecef;
    display: none; /* Hidden by default, shown in responsive breakpoints */
    width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Desktop responsive adjustments - All desktop sizes */
@media (min-width: 1201px) {
    .header-contact-info {
        flex-shrink: 1;
        min-width: 0;
    }
    
    .mobile-tablet-search {
        display: none !important;
    }
}

/* Large desktop specific adjustments */
@media (min-width: 1401px) {
    .navbar-section.logo {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 20px;
    }
    
    .desktop-search {
        display: flex;
        margin-left: auto;
        flex-shrink: 0;
    }
    
    .desktop-search input[type="text"] {
        min-width: 180px;
    }
}

/* Large desktop - more space for search */
@media (min-width: 1400px) {
    .desktop-search input[type="text"] {
        min-width: 220px;
    }
}

/* Tablet layout */
@media (max-width: 1200px) and (min-width: 769px) {
    .desktop-search {
        display: none !important;
    }
    
    .mobile-tablet-search {
        display: block !important;
        padding: 18px 0;
        background: rgba(255, 255, 255, 0.95);
        border-bottom: 1px solid #e9ecef;
        position: relative;
        z-index: 100;
    }
    
    .mobile-tablet-search form {
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
    }
    
    .mobile-tablet-search input[type="text"] {
        flex: 1;
        min-width: auto;
        font-size: 14px;
    }
}

/* Mobile layout */
@media (max-width: 768px) {
    .desktop-search {
        display: none !important;
    }
    
    .mobile-tablet-search {
        display: block !important;
        padding: 15px 0;
        background: rgba(255, 255, 255, 0.95);
        border-bottom: 1px solid #e9ecef;
        position: relative;
        z-index: 100;
    }
    
    .mobile-tablet-search form {
        width: 100%;
        border-radius: 20px;
        padding: 3px;
        max-width: 300px;
        margin: 0 auto;
    }
    
    .mobile-tablet-search input[type="text"] {
        flex: 1;
        min-width: auto;
        padding: 6px 12px;
        font-size: 13px;
    }
    
    .mobile-tablet-search button {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
}

/* Extra small mobile */
@media (max-width: 480px) {
    .mobile-tablet-search {
        padding: 12px 0;
    }
    
    .mobile-tablet-search form {
        max-width: 280px;
    }
    
    .mobile-tablet-search input[type="text"] {
        padding: 5px 10px;
        font-size: 12px;
    }
    
    .mobile-tablet-search button {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }
}

/* Fallback rule - ensure search appears on all non-desktop devices */
@media (max-width: 1200px) {
    .desktop-search {
        display: none !important;
    }
    
    .mobile-tablet-search {
        display: block !important;
    }
}



/* Mobile layout adjustments */
@media (max-width: 1200px) {
    .social-media-icons {
        margin-left: 0 !important;
        gap: 18px !important;
        margin-top: 10px !important;
        width: 100% !important;
        justify-content: center !important;
    }
    
    .social-media-icons a {
        width: 28px !important;
        height: 28px !important;
        font-size: 14px !important;
    }
}


/* Typography System */
.joslyn-font-system {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* Font Sizes */
.joslyn-hero-title {
    font-size: 3.5rem;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 8px;
    text-transform: uppercase;
}

.joslyn-section-header {
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.5px;
    color: #006B5A;
    margin-bottom: 15px;
}

.joslyn-subsection-header {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.5px;
    color: #006B5A;
    margin: 30px 0 20px 0;
}

.joslyn-card-header {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.3px;
    color: #006B5A;
}

.joslyn-body-text {
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.9;
    letter-spacing: 0.3px;
    color: #333;
    margin-bottom: 20px;
}

.joslyn-intro-text {
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 2.2;
    letter-spacing: 0.3px;
    color: #333;
    margin-bottom: 25px;
}

.joslyn-small-text {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.9;
    letter-spacing: 0.3px;
    color: #666;
}

.joslyn-hero-subtitle {
    font-weight: 300;
    letter-spacing: 2px;
    color: #555;
}

/* Color Classes */
.joslyn-text-primary { color: #006B5A; }
.joslyn-text-secondary { color: #555; }
.joslyn-text-light { color: #666; }
.joslyn-text-body { color: #333; }
.joslyn-bg-light { background-color: #f8f9fa; }
.joslyn-bg-accent { background-color: #f0f8f7; }
.joslyn-bg-white { background-color: #ffffff; }
.joslyn-border-light { border-color: #e9ecef; }

/* Link Styles */
.joslyn-link {
    color: #00A896;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: color 0.3s ease;
}

.joslyn-link:hover {
    color: #008074;
    text-decoration: underline;
}

/* Button Styles */
.joslyn-button {
    background-color: #00A896;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;
    display: inline-block;
    letter-spacing: 0.3px;
}

.joslyn-button:hover {
    background-color: #008074;
}

/* Card Styles */
.joslyn-card {
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
    background: white;
}

.joslyn-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* Image Styles */
.joslyn-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Highlight Box */
.joslyn-highlight-box {
    background-color: #f0f8f7;
    padding: 20px 25px;
    border-radius: 6px;
    border-left: 4px solid #00A896;
    margin: 20px 0;
}

/* Layout Classes */
.joslyn-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.joslyn-section {
    padding: 80px 20px;
    margin-bottom: 80px;
}

.joslyn-hero-section {
    padding: 100px 20px;
}

.joslyn-content-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    align-items: center;
}

.joslyn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.joslyn-grid-large {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

/* Flex Column Classes */
.joslyn-flex-col {
    flex: 1;
    min-width: 300px;
}

.joslyn-flex-col-small {
    flex: 1;
    min-width: 280px;
}

/* List Styles */
.joslyn-list {
    margin: 25px 0;
    padding-left: 25px;
    list-style-type: disc;
}

.joslyn-list li {
    margin-bottom: 12px;
    font-size: 1.125rem;
    line-height: 1.9;
    letter-spacing: 0.3px;
}

/* Hero Gradient Background */
.joslyn-hero-gradient {
    background: linear-gradient(135deg, #139ba6 0%, #00957d 100%);
    color: white;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    
     .social-media-icons {
        display: none !important;
    }
    .joslyn-hero-title {
        font-size: 2.5rem;
        letter-spacing: 4px;
    }
    
    .joslyn-section-header {
        font-size: 1.8rem;
    }
    
    .joslyn-subsection-header {
        font-size: 1.6rem;
    }
    
    .joslyn-body-text,
    .joslyn-intro-text {
        font-size: 1rem;
    }
    
    .joslyn-section {
        padding: 60px 20px;
    }
    
    .joslyn-hero-section {
        padding: 80px 20px;
    }
    
    .joslyn-content-flex {
        gap: 40px;
    }
}

@media (max-width: 480px) {
    .joslyn-hero-title {
        font-size: 2rem;
        letter-spacing: 2px;
    }
    
    .joslyn-section-header {
        font-size: 1.5rem;
    }
    
    .joslyn-subsection-header {
        font-size: 1.4rem;
    }
    
    .joslyn-grid,
    .joslyn-grid-large {
        grid-template-columns: 1fr;
    }
    
    .joslyn-card {
        padding: 20px;
    }
}

/* =================================================================================
   GLOBAL DEFAULTS - BASE HTML ELEMENT STYLING
   ================================================================================= */

/* Global Font Family and Base Styles */
body, html, p, span, div, h1, h2, h3, h4, h5, h6, a, li, ul, ol, button, input, textarea {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* Base Body Styles */
body {
    font-size: 1.125rem;
    line-height: 1.9;
    color: #333;
    letter-spacing: 0.3px;
    font-weight: 400;
}

/* Heading Defaults */
h1 {
    font-size: 3.5rem;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 8px;
    color: #006B5A;
    margin: 0 0 30px 0;
    text-transform: uppercase;
}

h2 {
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.5px;
    color: #006B5A;
    margin: 40px 0 15px 0;
}

h3 {
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.5px;
    color: #006B5A;
    margin: 35px 0 15px 0;
}

h4 {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.5px;
    color: #006B5A;
    margin: 30px 0 20px 0;
}

h5 {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.3px;
    color: #006B5A;
    margin: 25px 0 15px 0;
}

h6 {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.3px;
    color: #006B5A;
    margin: 20px 0 10px 0;
}

/* Paragraph Defaults */
p {
    font-size: 1.125rem;
    line-height: 1.9;
    color: #333;
    margin-bottom: 20px;
    letter-spacing: 0.3px;
    font-weight: 400;
}

/* Link Defaults */
a {
    color: #00A896;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: color 0.3s ease;
}

a:hover {
    color: #008074;
    text-decoration: underline;
}

a:focus {
    outline: 2px solid #00A896;
    outline-offset: 2px;
}

/* List Defaults */
ul, ol {
    margin: 25px 0;
    padding-left: 25px;
}

ul {
    list-style-type: disc;
}

li {
    margin-bottom: 12px;
    font-size: 1.125rem;
    line-height: 1.9;
    letter-spacing: 0.3px;
}

/* Button Defaults */
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    background-color: #00A896;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
    letter-spacing: 0.3px;
    min-height: 44px;
    font-family: inherit;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
    background-color: #008074;
}

button:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="reset"]:focus {
    outline: 2px solid #00A896;
    outline-offset: 2px;
}

/* Image Defaults */
img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    max-width: 100%;
}

/* Form Element Defaults */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
    font-family: inherit;
    font-size: 1rem;
    padding: 12px 15px;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    background-color: white;
    color: #333;
    letter-spacing: 0.3px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    min-height: 44px;
    box-sizing: border-box;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    border-color: #00A896;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 168, 150, 0.2);
}

/* Table Defaults */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 1rem;
}

th, td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #e9ecef;
    letter-spacing: 0.3px;
}

th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #006B5A;
}

/* Blockquote Defaults */
blockquote {
    background-color: #f0f8f7;
    padding: 20px 25px;
    border-radius: 6px;
    border-left: 4px solid #00A896;
    margin: 25px 0;
    font-style: italic;
    color: #555;
}

/* Code Defaults */
code {
    background-color: #f8f9fa;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.9em;
    color: #006B5A;
}

pre {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 25px 0;
    border: 1px solid #e9ecef;
}

pre code {
    background: none;
    padding: 0;
    color: #333;
}

/* HR Defaults */
hr {
    border: none;
    height: 1px;
    background-color: #e9ecef;
    margin: 40px 0;
}

/* Small Text Defaults */
small {
    font-size: 1rem;
    color: #666;
    letter-spacing: 0.3px;
}

/* Strong/Bold Defaults */
strong, b {
    font-weight: 600;
    color: #006B5A;
}

/* Em/Italic Defaults */
em, i {
    font-style: italic;
    color: #555;
}

/* Container Elements */
section {
    
}

article {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

section.section {
    position: relative !important;
    padding-right: 0rem !important;
    padding-left: 0rem !important;
}
main {
    
    margin: 0 auto;
    padding: 0 0px;
}

/* Responsive Typography Adjustments */
@media (max-width: 768px) {
    body {
        font-size: 1rem;
    }
    
    h1 {
        font-size: 2.5rem;
        letter-spacing: 4px;
    }
    
    h2, h3 {
        font-size: 1.8rem;
    }
    
    h4 {
        font-size: 1.6rem;
    }
    
    h5 {
        font-size: 1.2rem;
    }
    
    h6 {
        font-size: 1.1rem;
    }
    
    p, li {
        font-size: 1rem;
    }
    
    section {
        padding: 3px 0px;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 2rem;
        letter-spacing: 2px;
    }
    
    h2, h3 {
        font-size: 1.5rem;
    }
    
    h4 {
        font-size: 1.4rem;
    }
    
    section {
        padding: 0px 0px;
    }
}

/* Additional Utility Classes for Style Guide */

/* Text Alignment */
.joslyn-text-center { text-align: center; }
.joslyn-text-left { text-align: left; }
.joslyn-text-right { text-align: right; }

/* Margin Utilities */
.joslyn-margin-bottom-small { margin-bottom: 10px; }
.joslyn-margin-bottom { margin-bottom: 20px; }
.joslyn-margin-bottom-large { margin-bottom: 25px; }
.joslyn-margin-top { margin-top: 30px; }
.joslyn-margin-section { margin: 80px 0; }

/* Section Background Utilities */
.joslyn-section-bg-light {
    background-color: #f8f9fa;
    margin-left: -20px;
    margin-right: -20px;
    padding: 80px 20px;
}

/* Touch Target Accessibility (minimum 44x44px) */
.joslyn-button,
.joslyn-link {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.joslyn-link {
    padding: 11px 0; /* Ensure minimum touch target */
}

/* Focus States for Accessibility */
.joslyn-button:focus,
.joslyn-link:focus {
    outline: 2px solid #00A896;
    outline-offset: 2px;
}

/* Grantor Logo Grid Specific Styles */
.joslyn-grantor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
    align-items: center;
    justify-items: center;
    max-width: 1000px;
    margin: 0 auto;
}

.joslyn-grantor-card {
    background-color: white;
    padding: 25px;
    border-radius: 8px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    text-align: center;
}

.joslyn-grantor-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.joslyn-grantor-link {
    text-decoration: none;
    color: #006B5A;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* Content Section Full-Width Background */
.joslyn-full-width-bg {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 80px calc(50vw - 50%);
}

/* Hero Section Specific */
.joslyn-hero-content {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

/* List Link Styling */
.joslyn-list li a {
    color: #00A896;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.joslyn-list li a:hover {
    color: #008074;
    text-decoration: underline;
}

/* Content Wrapper for Clean HTML */
.joslyn-content-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #333;
}

.joslyn-content-wrapper h2 {
    color: #006B5A;
    font-size: 2.25rem;
    font-weight: 600;
    margin: 0 0 15px 0;
    letter-spacing: 0.5px;
    line-height: 1.6;
}

.joslyn-content-wrapper h3 {
    color: #006B5A;
    font-size: 2.25rem;
    font-weight: 600;
    margin: 0 0 15px 0;
    letter-spacing: 0.5px;
    line-height: 1.6;
}

.joslyn-content-wrapper h4 {
    color: #006B5A;
    font-weight: 600;
    margin: 30px 0 20px 0;
    font-size: 2rem;
    letter-spacing: 0.5px;
    line-height: 1.6;
}

.joslyn-content-wrapper p {
    font-size: 1.125rem;
    line-height: 1.9;
    color: #333;
    margin-bottom: 20px;
    letter-spacing: 0.3px;
}

.joslyn-content-wrapper a {
    color: #00A896;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.joslyn-content-wrapper a:hover {
    color: #008074;
    text-decoration: underline;
}

.joslyn-content-wrapper ul {
    margin: 25px 0;
    padding-left: 25px;
    list-style-type: disc;
}

.joslyn-content-wrapper li {
    margin-bottom: 12px;
    font-size: 1.125rem;
    line-height: 1.9;
    letter-spacing: 0.3px;
}

.joslyn-content-wrapper img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* =================================================================================
   EXISTING CUSTOM STYLES (PRESERVED)
   ================================================================================= */

/* Desktop header layout - Keep horizontal for large screens */
@media (min-width: 1401px) {
    #header .navbar {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0px 0 !important;
        gap: 0 !important;
    }
    
    .navbar-section.logo {
        flex-direction: row !important;
        align-items: center !important;
        width: auto !important;
        margin-bottom: 0 !important;
    }
    
    /* Keep buttons on same line for large screens */
    #header {
        height: 4rem !important;
    }
}

/* Medium desktop - create two-row layout to prevent overlap */
@media (min-width: 1201px) and (max-width: 1400px) {
    #header {
        height: auto !important; /* Allow header to expand */
        background: white !important;
    }
    
    #header .navbar {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 0 !important;
        gap: 0 !important;
    }
    
    /* First row - logo and contact info */
    .navbar-section.logo {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
        margin-bottom: 0 !important;
        padding: 10px 0 !important;
        background: white !important;
    }
    
    /* Second row - menu buttons and search */
    .top-header-buttons {
        position: static !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        background: white !important;
        padding: 8px 0 12px 0 !important;
        border-top: 1px solid #f0f0f0 !important;
        margin: 0 !important;
        transform: none !important;
        right: auto !important;
        top: auto !important;
        z-index: 1 !important;
        gap: 15px !important;
    }
    
    /* Ensure search bar appears inline with buttons */
    .top-header-buttons .desktop-search {
        order: -1; /* Put search first */
        margin: 0 !important;
    }
    
    /* Ensure consistent header container background */
    #header section.container {
        background: white !important;
    }
    
    /* Remove any conflicting positioning */
    .top-header-buttons .desktop-search {
        position: static !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
    }
    
    /* Hamburger menu button in medium desktop */
    .button_container#toggle {
        position: static !important;
        margin: 0 !important;
        transform: none !important;
    }
}

/* Mobile header stacked layout - Tablet & Mobile */
@media (max-width: 1200px) {
    #header .navbar-section.logo {
        margin-top: 0px !important;
    margin-left: 0px !important;
    }
    .button_container#toggle {
        margin-left: 15px !important;
      margin-top: 0px !important;
    }
    /* Make navbar wrap and stack */
    #header .navbar {
        flex-direction: column !important;
        padding: 10px 0 !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    
    /* Stack layout: 1. Logo, 2. Contact info (phone + address), 3. Menu button */
    .navbar-section.logo {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        margin-bottom: 10px !important;
    }
    
    /* Logo centered */
    .navbar-section.logo .navbar-brand {
        display: flex !important;
        justify-content: center !important;
        margin-bottom: 10px !important;
    }
    
    /* Contact info on same line, centered */
    .navbar-section.logo .header-contact-info {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 20px !important;
        
        flex-wrap: wrap !important;
    }
    
    /* Ensure contact items display inline */
    .header-contact-info .contact-item {
        font-size: 12px !important;
        white-space: nowrap !important;
    }
    
    /* Menu button centered below - KEY FIX */
    .top-header-buttons {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 !important;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
        background: white !important;
        padding: 12px 0 !important;
    }
}

/* Mobile-specific hiding of DONATE, MEMBERSHIP and NEWSLETTER buttons */
@media (max-width: 1024px) {
    .top-header-buttons a.header-button.membership-btn,
    .top-header-buttons a.header-button.donate-btn,
    .top-header-buttons a.header-button.newsletter-btn {
        display: none !important;
    }
}

/* Tablet-specific layout for search bar at 1024px resolution */
@media (max-width: 1024px) and (min-width: 769px) {
    .top-header-buttons {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        position: static !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        padding: 10px 0 !important;
        background: transparent !important;
    }
    
    /* Hide desktop search on tablets - use mobile-tablet-search instead */
    .top-header-buttons .desktop-search {
        display: none !important;
    }
    
    .top-header-buttons .button_container#toggle {
        order: 1; /* Hamburger menu comes after search */
    }
}


#header {
 height: 4rem !important;   
}
/* Reset container width constraints in header */
#header .container, 
#header .header-container,
#header section.container,
#header .grid-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* Fix navbar layout */
#header .navbar {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    min-height: 80px !important; /* Ensure consistent header height */
    position: relative !important;
}

/* Set logo to fixed width */
#header .navbar-section.logo {
    flex: 0 0 auto !important;
    margin-right: 1rem !important;
}

/* Ensure logo appears at right size */
#header .logo img,
#header .logo svg {
    width: auto;
    height: auto;
    max-height: 55px !important;
    display: block !important;
}

/* Hide the original horizontal menu */
#header .navbar-section.desktop-menu {
    display: none !important;
}

/* Joslyn menu container styling */
.joslyn-menu-container {
    padding: 20px;
}

.joslyn-menu-container .container {
    max-width: 1000px;
    margin: 0 auto;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
}

.joslyn-menu-container .header {
    background-color: white;
    padding: 20px;
    border-bottom: 1px solid #e0e0e0;
}

.joslyn-menu-container .header img.logo {
    max-width: 320px;
    height: auto;
}

/* Modern Desktop Navigation Styling */
.nav-container {
    background: linear-gradient(135deg, #009DAD 0%, #007D8A 100%);
    color: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 157, 173, 0.2);
    backdrop-filter: blur(10px);
}

/* Modern Tree Structure */
.nav-container .tree {
    list-style: none;
    padding: 0;
    margin: 1rem;
}

.nav-container .tree li {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1.2rem;
    background: transparent;
    border-bottom: none;
    position: relative;
    border-radius: 8px;
    margin-bottom: 4px;
    overflow: hidden;
}

.nav-container .tree li:last-child {
    border-bottom: none;
}

/* Modern Menu Links */
.nav-container .tree li a {
    display: flex;
    align-items: center;
    margin-left: 1.2rem;
    font-size: 16px;
    font-weight: 500;
    color: white;
    text-decoration: none;
    padding: 16px 20px;
    padding-left: calc(20px + 1.2rem);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px;
    position: relative;
    border-left: 4px solid transparent;
}

/* Hover Effects */
.nav-container .tree li a:hover,
.nav-container .tree li a:focus {
    color: white !important;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.12);
    border-left-color: rgba(255, 255, 255, 0.8);
    transform: translateX(6px);
}

/* Active State - Only for directly active pages, not parents with active children */
.nav-container .tree li.active {
    background: transparent;
    font-weight: 500;
    border-radius: 8px;
    margin: 0 0 4px 0;
}

.nav-container .tree li.active > a,
.nav-container .tree li a.active {
    background: rgba(255, 255, 255, 0.18);
    border-left-color: #FFF;
    color: #ffffff !important;
    font-weight: 600;
    transform: translateX(6px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Parent expander should not be highlighted just because it has active children */
.nav-container .tree li > a.parent-expander {
    background: transparent;
    border-left-color: transparent;
    font-weight: 500;
    transform: none;
    box-shadow: none;
}

/* Modern Side Tab Toggler Design */
.nav-container .tree .toggler {
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1));
    border-radius: 0 8px 8px 0;
    font-size: 18px;
    font-weight: 900;
    transition: all 0.3s ease;
    color: white;
    float: none;
    padding: 0;
    border-left: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: inset 2px 0 4px rgba(0, 0, 0, 0.1);
}

.nav-container .tree .toggler:hover {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2));
    border-left-color: rgba(255, 255, 255, 0.6);
    box-shadow: inset 2px 0 6px rgba(0, 0, 0, 0.15);
}

.nav-container .tree .toggler:before {
    display: inline-block;
    margin-right: 0;
}

.nav-container .tree li.tree-empty > .toggler {
    opacity: 0;
    cursor: default;
}

.nav-container .tree li.tree-empty > .toggler:before {
    content: "";
}

.nav-container .tree li.tree-closed > .toggler:before {
    content: "+";
    font-size: 20px;
    font-weight: 900;
}

.nav-container .tree li.tree-opened > .toggler:before {
    content: "−";
    font-size: 20px;
    font-weight: 900;
}

/* Modern Nested Styling */
.nav-container .tree ul {
    margin: 0;
    background: transparent;
    border-left: none;
    padding-left: 0;
    margin-top: 4px;
}

.nav-container .tree ul li {
    border-bottom: none;
    margin-bottom: 2px;
}

.nav-container .tree ul li a {
    font-size: 14px;
    padding: 12px 20px;
    padding-left: calc(40px + 1.2rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
}

.nav-container .tree ul li a:before {
    content: '';
    position: absolute;
    left: calc(32px + 1.2rem);
    top: 50%;
    width: 8px;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%);
}

.nav-container .tree ul li:hover {
    background: transparent;
}

.nav-container .tree ul li a:hover {
    background: rgba(255, 255, 255, 0.08);
    border-left-color: rgba(255, 255, 255, 0.6);
    transform: translateX(4px);
}

.nav-container .tree ul li.active > a {
    background: rgba(255, 255, 255, 0.15);
    border-left-color: #FFF;
    font-weight: 500;
    color: #FFF;
    transform: translateX(4px);
}

@media (max-width: 768px) {
    .nav-item {
        padding: 16px 20px;
        font-size: 16px;
    }
    
    /* Hide desktop menu on mobile */
    #header .navbar-section.desktop-menu {
        display: none !important;
    }
}

/* Make hamburger menu appear on all screen sizes */
.mobile-menu {
    display: block !important;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
}

.mobile-container {
    z-index: 999;
}

/* Modern Slide Menu Design */
.overlay {
    background: linear-gradient(135deg, #009DAD 0%, #007D8A 100%) !important;
    z-index: 100;
    width: 380px !important;
    right: -380px !important;
    left: auto !important;
    position: fixed !important;
    height: 100% !important;
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: -2px 0 20px rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(10px) !important;
}

.overlay.open {
    opacity: 1 !important;
    right: 0 !important;
    top: 80px;
}

/* Modern Menu Container */
.overlay-menu {
    padding-top: 170px !important;
    height: calc(100% - 80px) !important;
    overflow-y: auto !important;
    padding: 20px 0 !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent !important;
}

.overlay-menu::-webkit-scrollbar {
    width: 6px !important;
}

.overlay-menu::-webkit-scrollbar-track {
    background: transparent !important;
}

.overlay-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3) !important;
    border-radius: 3px !important;
}

/* Clean Navigation Container */
.overlay-menu .nav-container {
margin-top: 0 !important;
    padding-top: 60px !important; /* leave space under the X */
    background: linear-gradient(135deg, #009DAD 0%, #007D8A 100%) !important;
}

.overlay-menu .nav-container .tree {
    margin: 0 !important;
    padding: 0 !important;
}

/* Modern Menu Items */
.overlay-menu .nav-container .tree li {
    border-bottom: none !important;
    background: transparent !important;
    margin: 0 !important;
    position: relative !important;
}

/* Clean Menu Links */
.overlay-menu .nav-container .tree li a {
    display: flex !important;
    align-items: center !important;       /* vertical centering */
    justify-content: flex-start !important; /* horizontal left-align */
    text-align: left !important;
    padding: 16px 50px 16px 24px !important;
    width: 100% !important;               /* ensures full clickable area */
    white-space: normal !important;       /* allows wrapping */
}


/* Hover Effects */
.overlay-menu .nav-container .tree li a:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-left-color: rgba(255, 255, 255, 0.8) !important;
    transform: translateX(8px) !important;
}

/* Active State - Only for directly active pages, not parents with active children */
.overlay-menu .nav-container .tree li.active > a,
.overlay-menu .nav-container .tree li a.active {
    background: rgba(255, 255, 255, 0.2) !important;
    border-left-color: #FFF !important;
    font-weight: 600 !important;
    transform: translateX(8px) !important;
}

/* Parent expander should not be highlighted just because it has active children */
.overlay-menu .nav-container .tree li > a.parent-expander {
    background: transparent !important;
    border-left-color: transparent !important;
    font-weight: 500 !important;
    transform: none !important;
}

/* Modern Side Tab Toggler Design for Overlay */
.overlay-menu .nav-container .tree .toggler {
    color: white !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 40px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1)) !important;
    border-radius: 0 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    float: none !important;
    padding: 0 !important;
    z-index: 10 !important;
    pointer-events: auto !important;
    border-left: 2px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: inset 2px 0 4px rgba(0, 0, 0, 0.1) !important;
}

.overlay-menu .nav-container .tree .toggler:hover {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2)) !important;
    border-left-color: rgba(255, 255, 255, 0.6) !important;
    box-shadow: inset 2px 0 6px rgba(0, 0, 0, 0.15) !important;
}

/* Ensure togglers are always on top and clickable */
.overlay-menu .nav-container .tree .toggler {
    z-index: 15 !important;
    pointer-events: auto !important;
}

/* Prevent link text from overlapping toggler area */
.overlay-menu .nav-container .tree li a {
    padding-right: 50px !important;
    box-sizing: border-box !important;
}

/* Ensure parent menu items are clickable */
.overlay-menu .nav-container .tree li {
    pointer-events: auto !important;
}

.overlay-menu .nav-container .tree li a {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 5 !important;
}

/* Toggler Icons */
.overlay-menu .nav-container .tree li.tree-closed > .toggler:before {
    content: "+" !important;
    font-size: 18px !important;
    font-weight: 900 !important;
}

.overlay-menu .nav-container .tree li.tree-opened > .toggler:before {
    content: "−" !important;
    font-size: 18px !important;
    font-weight: 900 !important;
}

.overlay-menu .nav-container .tree li.tree-empty > .toggler {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* Modern Nested Menu Styling */
.overlay-menu .nav-container .tree ul {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-left: none !important;
    overflow: hidden !important;
}

/* Nested Menu Items */
.overlay-menu .nav-container .tree ul li {
    position: relative !important;
    background: transparent !important;
}

/* Nested side tab togglers should also be clickable */
.overlay-menu .nav-container .tree ul li .toggler {
    color: white !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 35px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08)) !important;
    border-radius: 0 !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    z-index: 10 !important;
    pointer-events: auto !important;
    border-left: 2px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: inset 2px 0 3px rgba(0, 0, 0, 0.08) !important;
}

.overlay-menu .nav-container .tree ul li .toggler:hover {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15)) !important;
    border-left-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: inset 2px 0 5px rgba(0, 0, 0, 0.12) !important;
}

.overlay-menu .nav-container .tree ul li a {
    padding: 12px 45px 12px 48px !important;
    position: relative !important;
}

/* Add subtle connector line for nested items */
.overlay-menu .nav-container .tree ul li a:before {
    content: '' !important;
    position: absolute !important;
    left: 32px !important;
    top: 50% !important;
    width: 8px !important;
    height: 1px !important;
    background: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-50%) !important;
}

/* Nested item hover */
.overlay-menu .nav-container .tree ul li a:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-left-color: rgba(255, 255, 255, 0.6) !important;
    transform: translateX(6px) !important;
}

/* Active nested items */
.overlay-menu .nav-container .tree ul li.active > a,
.overlay-menu .nav-container .tree ul li a.active {
    background: rgba(255, 255, 255, 0.15) !important;
    border-left-color: #FFF !important;
    font-weight: 500 !important;
    color: #FFF !important;
    transform: translateX(6px) !important;
}

/* Third level nesting (if needed) */
.overlay-menu .nav-container .tree ul ul li a {
    padding: 12px 60px 12px 64px !important;
    font-size: 13px !important;
}

.overlay-menu .nav-container .tree ul ul li a:before {
    left: 48px !important;
    width: 6px !important;
}

/* Smooth animations for expanding/collapsing */
.overlay-menu .nav-container .tree ul {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Remove old conflicting styles */
.treemenu ul {
    margin: 0 0 0 0 !important;
}

.treemenu li {
    background: transparent !important;
}

/* Hamburger icon */
.mobile-menu .button_container span {
    background: #009DAD !important; /* Match the teal color */
}

.mobile-menu .button_container.active span {
    background: #FFFFFF !important;
}

/* Submenu styling */
.overlay-menu ul.tree ul {
    margin-left: 1rem !important;
    list-style: none !important;
    padding-left: 0 !important;
}

.overlay-menu ul.tree ul li {
    border-bottom: none !important;
}

/* This ensures arrows for expandable menus are visible */
.overlay-menu .tree li {
    position: relative !important;
}

.overlay-menu .tree .toggler {
    color: white !important;
}

/* Modern Mobile Header */
.mobile-logo {
 background: transparent !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    display: block !important;
  
   
}

/* Close Button - Modern Design */


.mobile-menu-close {
    
    font-size: 24px;
    cursor: pointer;
    color: var(--dark);
    background: none;
    border: none;
}



.mobile-menu-close {
    
 position: absolute !important;
    top: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 1001 !important;
    font-size: 28px !important;
    color: white !important;
    background: none !important;
    border: none !important;
}

.mobile-menu-close,
.mobile-menu-close i {
    color: #FFFFFF !important;
}

/* Close button styling for hamburger menu */
.mobile-menu .button_container.active .top,
.mobile-menu .button_container.active .middle,
.mobile-menu .button_container.active .bottom {
    background: white !important;
}

#header .navbar {
    position: relative !important;
}
/* Header buttons positioning for all desktop sizes */
@media (min-width: 1201px) {
    .top-header-buttons {
        
        top: 1.8rem;
        right: 70px !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important; /* Prevent wrapping of main buttons */
        transform: translateY(0%) !important;
        z-index: 2 !important;
        gap: 8px !important; /* Consistent spacing between buttons */
    }
}

/* Specific adjustments for medium desktop screens (1201px - 1400px) */
@media (min-width: 1201px) and (max-width: 1400px) {
    .top-header-buttons {
        right: 60px !important; /* Slightly closer to edge on smaller screens */
        gap: 6px !important; /* Tighter spacing on smaller screens */
    }
    
    /* Reduce button padding on medium desktop to fit better */
    .top-header-buttons .header-button {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }
}

/* Large desktop positioning (1401px+) */
@media (min-width: 1401px) {
    .top-header-buttons {
        right: 70px !important; /* More space from edge on larger screens */
        gap: 10px !important; /* More comfortable spacing */
    }
}

/* Emergency override - prevent button wrapping at all costs */
@media (min-width: 1201px) {
    .top-header-buttons .header-button {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        overflow: hidden !important;
    }
    
    /* If buttons still don't fit, reduce text size further */
    @media (max-width: 1280px) {
        .top-header-buttons .header-button {
            font-size: 12px !important;
            padding: 8px 10px !important;
        }
    }
}

.header-button {
    padding: 9px 15px !important; /* Fixed padding to match menu button */
    margin-left: 12px !important; /* Remove margin - using gap instead */
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
    min-width: 80px !important; /* Ensure consistent width */
    white-space: nowrap !important;
}

/* 🔥 Responsive fix for smaller screens */
@media (max-width: 768px) {
    .header-button {
        padding: 6px 0.8em !important; /* smaller padding */
        font-size: 12px !important; /* smaller text */
        max-width: 150px !important; /* limit width even more */
    }
}



.membership-btn {
    background-color: #009DAD !important;
    color: white !important;
    border: 2px solid #009DAD !important; /* Added border */
}

.donate-btn {
    background-color: #F26522 !important; /* Orange color for donate button */
    color: white !important;
    border: 2px solid #F26522 !important; /* Added border */
}

.newsletter-btn {
    background-color: #009DAD !important;
    color: white !important;
    border: 2px solid #009DAD !important;
}

.header-button:hover {
    opacity: 1 !important; /* Full opacity on hover */
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important; /* Enhanced shadow on hover */
    filter: brightness(1.05) !important; /* Slightly brighter on hover */
}


/* Ensure button container is aligned properly with hamburger */
#header .navbar {
    position: relative !important;
}
/* Style menu button exactly like the other header buttons */

.button_container#toggle {
    height: 36px !important;
    box-sizing: border-box !important;
}
.button_container#toggle {
        margin-left: 15px !important;
      margin-top: 0px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #009DAD !important;
    color: white !important;

    padding: 20px 15px !important; /* Match header-button padding */
    border-radius: 4px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
   
    width: auto !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    border: 2px solid #009DAD !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
    min-width: 80px !important;
}

/* Add MENU text - more specific selector */
.button_container#toggle::after {
    content: "MENU" !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: white !important;
    margin: 0 !important; /* Remove margin to center text properly */
 line-height: 1 !important; /* Add this line */
    
}

/* Remove hamburger lines - we're using text only for the menu button */
.button_container#toggle span {
    display: none !important; /* Hide the hamburger lines */
}

/* Position all button elements in a single container */
.mobile-menu {
    display: block !important;
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    width: auto !important;
    z-index: 100 !important;
}

/* Move buttons to align with menu position - LARGE DESKTOP ONLY */
@media (min-width: 1401px) {
    .top-header-buttons {
        position: fixed !important;
        top: 15px !important; 
        right: 20px !important; /* Adjust spacing from menu button */
        display: flex !important;
        align-items: center !important;
        z-index: 99 !important;
        transform: none !important;
    }
}

/* Add hover effect to menu button */
.button_container#toggle:hover {
    background-color: #00879B !important; /* Slightly darker teal on hover */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important; /* Enhanced shadow on hover */
    transform: translateY(0px) !important;
}

/* Make sure buttons are consistent on all screen sizes */
@media (max-width: 1024px) {
    /* Hide DONATE, MEMBERSHIP and NEWSLETTER buttons on any non-desktop screen */
    .top-header-buttons .header-button.membership-btn,
    .top-header-buttons .header-button.donate-btn,
    .top-header-buttons .header-button.newsletter-btn,
    a.header-button.membership-btn,
    a.header-button.donate-btn,
    a.header-button.newsletter-btn {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        pointer-events: none !important;
    }
    
    /* Adjust the header layout when buttons are hidden - LARGE DESKTOP ONLY */
    @media (min-width: 1401px) {
        .top-header-buttons {
            right: 20px !important; /* Position for just the menu button */
        }
    }
}

@media (max-width: 768px) {
    /* Large Desktop positioning only */
    @media (min-width: 1401px) {
        .top-header-buttons {
            right: 20px !important;
        }
    }
    
    .header-button, .button_container#toggle {
        padding: 7px 15px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 480px) {
    .header-button, .button_container#toggle {
        padding: 6px 10px !important;
        font-size: 12px !important;
        margin-left: 5px !important;
    }
    
    /* Large Desktop positioning only */
    @media (min-width: 1401px) {
        .mobile-menu {
            right: 15px !important;
        }
    }
}

/* Add background overlay when menu is open */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

body.overlay-open::after {
    opacity: 1;
    visibility: visible;
}
/* Right menu items styling to match Membership tab */
a[href="./"],
a[href="./programs"],
a[href="./2025-gala-gallery"],
a[href="./board_files"],
a[href="./event-cards"] {
    background-color: #009DAD !important;
    color: white !important;
    font-weight: 700 !important;
    padding: 10px 20px !important;
    border-radius: 4px !important;
    display: block !important;
    margin-bottom: 10px !important;
    text-decoration: none !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    border: 2px solid #009DAD !important;
}

/* Hover effect for all menu items */
a[href="./"]:hover,
a[href="./membership"]:hover,
a[href="./donate"]:hover,
a[href="./programs"]:hover,
a[href="./2025-gala-gallery"]:hover,
a[href="./board_files"]:hover,
a[href="./event-cards"]:hover {
    background-color: #00879B !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
}
/* Right menu styling to match Membership tab */
.mobile-nav-links a,
a[href="./"],
a[href="./programs"],
a[href="./2025-gala-gallery"],
a[href="./board_files"],
a[href="./event-cards"] {
    
    color: white !important;
    font-weight: 700 !important;
    padding: 10px 20px !important;
    border-radius: 4px !important;
    display: block !important;
    margin-bottom: 10px !important;
    text-decoration: none !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    border: 2px solid #009DAD !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

/* Hover effect for all menu items */
.mobile-nav-links a:hover,
a[href="./"]:hover,
a[href="./membership"]:hover,
a[href="./donate"]:hover,
a[href="./programs"]:hover,
a[href="./2025-gala-gallery"]:hover,
a[href="./board_files"]:hover,
a[href="./event-cards"]:hover {
    background-color: #00879B !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
}

/* Add background color to the menu */
.mobile-menu {
    background-color: #fff !important;
}

/* Add styling for mobile-nav-links class */
.mobile-nav-links {
    padding: 20px !important;
}
/* Direct styling for mobile-nav-link class */
.mobile-nav-link {
    background-color: #009DAD !important;
    color: white !important;
    font-weight: 700 !important;
    padding: 10px 20px !important;
    border-radius: 4px !important;
    display: block !important;
    margin-bottom: 10px !important;
    text-decoration: none !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    border: 2px solid #009DAD !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

.mobile-nav-link:hover {
    background-color: #00879B !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
}
/* This section is now handled by the previous active nested items rule above */

/* Optional: Keep subtle hover still */
.overlay-menu .nav-container .tree ul li a:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    transform: translateX(4px) !important;
    border-left-color: rgba(255, 255, 255, 0.3) !important;
}
.card-grid-item {
    aspect-ratio: 4 / 3;
    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;
    background-color: #f8f8f8;
    display: block;
    position: relative;
    text-decoration: none;
    color: inherit;
}
.card-grid-item .card-title {
    text-align: center;
    font-size: 1.0rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}
.card-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
}

#footer .dropmenu a:hover {
    font-size: 0.8rem;
}

#footer .dropmenu a {
font-size: 0.8rem;
    
}
#body-wrapper .container {
    padding: 0rem 0 0rem;
}

#footer .dropmenu > ul > li:not(:last-child)::after {
    content: "" !important;
}


body.header-fixed.header-animated #header.scrolled .logo img, body.header-fixed.header-animated #header.scrolled .logo svg {
    max-height: 55px;
    height: auto;
    
}

.header-contact-info.scrolled {
    margin-top: 29px;
}

/* Header Contact Info Styles */
.header-contact-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-left: 15px; /* 25px spacing from logo */
    align-items: flex-start; /* Left align the contact items */
    justify-content: center; /* Vertically center with logo */
}

/* Desktop: Logo and contact info in a row */
@media (min-width: 841px) {
    .navbar-section.logo {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
    }
}

.header-contact-info .contact-item {
    display: flex;
    align-items: center;
    gap: 0px;
    font-size: 14px;
    color: #102A43;
    margin: 0; /* Remove any default margins */
}

.header-contact-info .contact-item i {
    font-size: 14px;
    color: #00A896;
    width: 16px; /* Fixed width for icon alignment */
    text-align: center;
}

.header-contact-info .contact-item a {
    color: #102A43;
    text-decoration: none;
    transition: color 0.3s ease;
}

.header-contact-info .contact-item a:hover {
    color: #00A896;
}

/* Mobile layout for header contact info */
@media (max-width: 840px) {
    /* Ensure header has proper background and positioning */
    #header {
        background: #fff !important;
        position: relative !important;
        z-index: 100 !important;
        border-bottom: 1px solid rgba(172, 179, 194, 0.2) !important;
        min-height: auto !important;
        height: auto !important;
        padding-bottom: 15px 0 !important;
    }
    
    /* Ensure header section and container have background */
    #header .section {
        background: #fff !important;
        padding: 0 !important;
    }
    
    #header .container {
        background: #fff !important;
        width: 100% !important;
    }
    
    /* Make navbar wrap and stack */
    #header .navbar {
        flex-direction: column !important;
        padding: 10px 0 !important;
        align-items: stretch !important;
        gap: 10px !important;
        background: #fff !important;
    }
    
    /* Stack layout: 1. Logo, 2. Contact info (phone + address), 3. Menu button */
    .navbar-section.logo {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        margin-bottom: 10px !important;
        background: #fff !important;
        padding: 0px 0 !important;
    }
    
    /* Logo centered */
    .navbar-section.logo .navbar-brand {
        display: flex !important;
        justify-content: center !important;
        margin-bottom: 10px !important;
        background: #fff !important;
        width: 100% !important;
    }
    
    /* Contact info on same line, centered */
    .navbar-section.logo .header-contact-info {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 20px !important;
        margin: 0 !important;
        flex-wrap: nowrap !important;
        background: #fff !important;
        width: 100% !important;
        padding: 5px 0 !important;
    }
    
    /* Ensure contact items display inline */
    .header-contact-info .contact-item {
        font-size: 12px !important;
        white-space: nowrap !important;
    }
    

}

/* =================================================================================
   NESTED MENU PARENT-EXPANDER STYLES
   ================================================================================= */

/* Parent expander link styling */
.parent-expander {
    display: block;
    width: 100%;
    cursor: pointer;
    position: relative;
    padding-right: 40px; /* Make room for the toggler */
}

/* Ensure the toggler is positioned correctly - enhance existing styles */
.nav-container .tree li .toggler,
.tree li .toggler {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 40px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
    z-index: 10 !important;
}

/* Ensure menu items are properly positioned relative for togglers */
.nav-container .tree li,
.tree li {
    position: relative !important;
}

/* Ensure links don't overlap with togglers */
.nav-container .tree li a,
.tree li a {
    padding-right: 45px !important;
    display: block;
    box-sizing: border-box;
}

/* Parent duplicate styling - slightly indented */
.parent-duplicate {
    margin-left: 15px;
    opacity: 0.9;
}

.parent-duplicate a {
    font-style: italic;
    font-size: 0.95em;
}

/* Tree menu adjustments for new structure - enhance existing styles */
.nav-container .tree li.tree-closed > .toggler:before,
.tree li.tree-closed > .toggler:before {
    content: '+' !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    color: white !important;
    transition: transform 0.3s ease !important;
    display: inline-block !important;
}

.nav-container .tree li.tree-opened > .toggler:before,
.tree li.tree-opened > .toggler:before {
    content: '−' !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    color: white !important;
    transform: rotate(0deg) !important;
    display: inline-block !important;
}

.nav-container .tree li.tree-empty > .toggler,
.tree li.tree-empty > .toggler {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* Mobile menu adjustments */
@media (max-width: 768px) {
    .parent-duplicate {
        margin-left: 10px;
    }
    
    .parent-expander {
        padding-right: 35px;
    }
    
    .tree li .toggler {
        width: 35px !important;
    }
}