/* Glassmorphism UI - only styling, no forced padding/margins */
.glass-container {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Helper class for section spacing */
.margin {
  margin-top: 50px !important;
  margin-bottom: 50px !important;

}

/* Glass container within Elementor widgets, apply default padding */
.elementor-container .glass-container,
.elementor-widget-container .glass-container {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
  position: relative !important;
}

/* Glass menu container */
.glass-container-menu {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
  z-index: 9999 !important;
  width: clamp(360px, 80vw, 2400px) !important;
  height: auto !important;
  min-height: auto !important;
  margin-top: 25px;
  margin-bottom: 50px;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

/* Outer container with same width as glass-container-menu */
.outer-container {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
  position: relative !important;
  z-index: 1 !important;
  width: clamp(360px, 80vw, 2400px) !important;
  height: auto !important;
  min-height: auto !important;
  margin-top: 25px;
  margin-bottom: 50px;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

/* Responsive breakpoints for glass-container-menu and outer-container */
@media (max-width: 1920px) {
  .glass-container-menu,
  .outer-container {
    width: clamp(360px, 80vw, 1440px) !important;
  }
}

@media (max-width: 1366px) {
  .glass-container-menu,
  .outer-container {
    width: clamp(360px, 80vw, 1140px) !important;
  }
}

@media (max-width: 768px) {
  .glass-container-menu,
  .outer-container {
    width: clamp(360px, 90vw, 768px) !important;
  }
}

@media (max-width: 480px) {
  .glass-container-menu,
  .outer-container {
    width: clamp(200px, 90vw, 430px) !important;
  }
}

@media (max-width: 360px) {
  .glass-container-menu,
  .outer-container {
    width: clamp(200px, 95vw, 330px) !important;
  }
}


/* Buttons */