/* 
   Basiya Group - Mobile Performance & Layout Optimization
   Fixes horizontal scroll, typography scaling, and UI overlaps only on mobile devices.
*/

/* Only apply layout changes on screens smaller than 1025px */
@media (max-width: 1024px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100vw !important;
    position: relative;
    margin: 0;
    padding: 0;
  }

  /* Ensure all containers stay within viewport */
  .elementor-container, 
  .elementor-section, 
  .e-con, 
  .e-con-inner,
  .elementor-column,
  .elementor-widget-wrap {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Deeper mobile optimizations for screens smaller than 768px */
@media (max-width: 767px) {
  /* Specific fix for Grid layouts (common in Elementor cards) */
  .e-grid {
    grid-template-columns: 1fr !important; /* Force single column on mobile */
    gap: 20px !important;
  }

  h1.elementor-heading-title, 
  h2.elementor-heading-title {
    font-size: clamp(24px, 8vw, 36px) !important;
    line-height: 1.2 !important;
    text-align: center !important;
    padding: 0 15px !important;
  }
  
  h4.elementor-heading-title {
    font-size: 18px !important;
    line-height: 1.4 !important;
    text-align: center !important;
  }

  /* Hero background adjustment */
  .elementor-41 .elementor-element.elementor-element-7ee5e2d {
    padding-top: 120px !important;
    padding-bottom: 50px !important;
    min-height: auto !important;
  }

  /* Mobile Navigation Menu Fixes */
  .spaciaz-mobile-nav {
    width: 85% !important;
    max-width: 320px !important;
    right: -320px; /* Ensure it starts off-screen */
  }
  
  .spaciaz-mobile-nav.active {
    right: 0 !important;
    box-shadow: -5px 0 15px rgba(0,0,0,0.2) !important;
  }

  /* Fix floating buttons overlapping UI */
  .floating-buttons {
    bottom: 20px !important;
    right: 20px !important;
    z-index: 9999 !important;
  }
  
  .whatsapp-btn, .scrollup {
    width: 50px !important;
    height: 50px !important;
    margin-top: 10px !important;
  }
  
  .whatsapp-btn i, .scrollup i {
    font-size: 28px !important;
  }

  /* Fix Logo scaling in header */
  .hfe-site-logo img {
    max-width: 150px !important;
    height: auto !important;
  }

  /* Spacing cleanup for cards and sections */
  .elementor-widget-container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* Make email text much larger and more prominent globally */
.__cf_email__, 
.__cf_email__ *,
[data-cfemail], 
[data-cfemail] *,
a[href^="mailto:"],
a[href^="mailto:"] * {
  font-size: 24px !important; /* Extremely large for prominence */
  font-weight: 700 !important;
  text-decoration: none !important;
  color: inherit !important;
  display: inline-block !important;
}

/* Hide horizontal scrollbar specifically on some browsers on mobile only */
@media (max-width: 1024px) {
  body::-webkit-scrollbar {
    display: none;
  }
  body {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
}