html {
  font-size: 100%; /* Uses browser default, usually 16px */
}
body {
  font-size: 1rem; /* Equals ~16px, but scalable */
  line-height: 1.5; /* Improves readability */
}
 
        /* Class to grey out and disable links */
        .greyed-out {
            color: grey !important; /* Override any existing colors */
            opacity: 0.5; /* Make it look faded */
            text-decoration: none; /* Remove underline */
            pointer-events: none; /* Prevent clicks and hover effects */
            cursor: not-allowed; /* Show forbidden cursor */
        }
 
/* Hide dropdown by default on mobile */
@media (max-width: 767px) {  /* Adjust breakpoint to match Elementor's (often 767px or 1024px) */
  .twbb-nav-menu--dropdown {
    display: none;
    position: absolute;  /* Key for dropdown positioning */
    top: 100%;  /* Below the toggle */
    left: 0;
    width: 100%;  /* Full width for mobile */
    z-index: 999;  /* Ensure it's on top */
    background-color: white;  /* Add if invisible due to no bg */
  }
  
  
}

/* Icon toggling based on aria-expanded (already in your HTML) */
.twbb-menu-toggle[aria-expanded="true"] .twbb-menu-toggle__icon--open {
  display: none !important;
}

.twbb-menu-toggle[aria-expanded="false"] .twbb-menu-toggle__icon--open {
  display: inline-block;
}


.twbb-menu-toggle[aria-expanded="false"] .twbb-menu-toggle__icon--close {
  display: none !important;
}

.twbb-menu-toggle[aria-expanded="true"] .twbb-menu-toggle__icon--close {
  display: inline-block !important;
}

/* Ensure icons stack in the same spot (prevents visual overlap) */
.twbb-menu-toggle {
  position: relative;
}


/* Force eicons font and content (from Elementor source) */
.twbb-menu-toggle__icon--open::before,
.twbb-menu-toggle__icon--close::before {
  font-family: 'eicons' !important;
}
.twbb-menu-toggle__icon--open::before {
  content: '\e816' !important; /* eicon-menu-bar code */
}
.twbb-menu-toggle__icon--close::before {
  content: '\e87f' !important; /* eicon-close code */
}


@media (max-width: 767px) {  /* Adjust breakpoint if your mobile is different */
  .elementor-section {  /* Targets Elementor sections, like your header */
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  .twbb-menu-toggle, nav.twbb-nav-menu--dropdown {  /* If specific to your menu */
    margin-top: 0 !important;
  }
  body, html {  /* Global reset if browser bar is causing it */
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}
@media (max-width: 768px) {
  body {
    font-size: 1.1rem !important; /* ~17.6px on a 16px base */
  }
  p, li, span { /* Target other text elements if needed */
    font-size: 1rem;
  }
}