/*=============================
	1. Mobile Menu
===============================*/

/* @media only screen and (max-width: 768px) { */
@media only screen and (max-width: 1024px) {
    /* Ensure the hamburger icon is visible */
    .mobile-nav-toggler {
      display: block !important;
      position: relative;
      z-index: 10000; /* High z-index to ensure it's on top */
    }
  
    /* Mobile menu is hidden by default; shown when body has the class */
     .mobile-menu {
      display: none;
    } 
    body.mobile-menu-visible .mobile-menu {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 9999; /* Covers underlying elements, including the client meeting banner */
    }
    
    /* Hide the desktop theme toggle on mobile */
    .main-header .dropdown-container {
      display: none;
    }
    
    /* Hide the client meeting sign-up banner when the mobile menu is open */
    body.mobile-menu-visible #secondaryBanner {
      display: none;
    }
    
    /* Optional: existing mobile menu scaling (if desired) */
    .mobile-menu .menu-box {
      transform: scale(0.9) !important;
      transform-origin: top right !important;
      transition: transform 0.3s ease !important;
    }
    .mobile-menu .navigation li {
      margin: 10px 0 !important;
    }
    .mobile-menu .close-btn {
      top: 20px !important;
      right: 20px !important;
    }  
  
    /*=============================
      2. Mobile Menu- Color Adjustments
    ===============================*/
    /* Light */
    html[theme="light"] 
      .mobile-menu .menu-box {
        background-color: #ffffff !important;
        color: #222 !important;
    } 

    html[theme="light"] 
      .mobile-menu .menu-box a {
        color: #222 !important;
    }
      
    html[theme="light"] 
      .mobile-menu .menu-box li {
        color: #222 !important;
    }

    html[theme="light"] 
      .mobile-menu .menu-box i {
        color: #222 !important;
    }

    html[theme="light"] 
      .mobile-menu .menu-box .contact-info {
        color: #222 !important;
    }

    html[theme="light"] .mobile-menu .menu-box .social-links a {
      color: #222 !important;
    } 
    
    /* Dark*/

    html[theme="dark"] .mobile-menu .menu-box {
      background-color: #141416 !important;
      color: #fff !important;
    } 

    html[theme="dark"] 
      .mobile-menu .menu-box a {
        color: #fff !important;
    }

    html[theme="dark"] 
      .mobile-menu .menu-box li {
        color: #fff !important;
    }

    html[theme="dark"] 
      .mobile-menu .menu-box i {
        color: #fff !important;
    }

    html[theme="dark"] 
      .mobile-menu .menu-box .contact-info {
        color: #fff !important;
    }
    
    html[theme="dark"] 
      .mobile-menu .menu-box .social-links a {
      color: #fff !important;
    }
  } 

  /*=============================
	2. Mobile Pages
===============================*/

/* @media only screen and (max-width: 768px) { */
@media only screen and (max-width: 1024px) {
    /* Option 1: Scale the entire page */
    body {
      transform: scale(0.9);
      transform-origin: top center;
    }
  }

  /*=============================
	3. Mobile Banner
===============================*/

@media only screen and (max-width: 1024px) {
/* @media only screen and (max-width: 768px) { */
  .banner-one .big-title h2 {
    text-align: center !important;
    font-size: 30px !important; /* further reduce size if needed */
    white-space: normal !important;  /* ensure text can wrap */
    word-wrap: break-word;
  }
}

  /*=============================
 4. Mobile Image hidden
===============================*/

@media only screen and (max-width: 1024px) {
/* @media only screen and (max-width: 768px) { */
  .about-two__img {
    display: none;
  }
}