/* Ensure full-screen background */
/* html, body {
  margin: 0;
  padding: 0;
  height: 100%; 
  background: linear-gradient(to bottom right, #cce3ff, #e0c3fc); 
  font-family: 'Manrope', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; 
} */

html, body, #root {
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
   background: linear-gradient(to bottom right, #cce3ff, #e0c3fc); 
}




/* Center wrapper */
.app-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Prevent content overflow */
}

/* Mobile container */
.mobile-container {
  width: 100% !important;
  
  height: 90vh; /* Make it take full height */
  
  border-radius: 24px;
 
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Prevent scroll */
  padding: 0;
}

/* Ensure #root fills the mobile-container */
#root {
  flex: 1; /* Makes it grow to fill available space */
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100dvh;
  overflow: hidden; /* Prevent overflow inside root */
}

/* Ensure images and other media inside root are correctly sized */



/* Media Query for small screen sizes (mobile) */
@media (max-width: 767px) {
  /* Ensure 100% scaling on mobile */
  html, body {
    zoom: 100%; /* Set zoom to 100% for mobile */
  }

  .mobile-container {
    width: 100% !important;
    height: 100vh !important; /* Full height on mobile */
  }

  #root {
    height: 100vh !important; /* Full height inside #root */
  }
}

/* Media Query for smaller screen sizes (small PC or tablet) */
@media (max-width: 1024px) and (min-width: 768px) {
  /* Apply zoom for small screens */
  html, body {
    zoom: 75%; /* Zoom in to 75% for small screens */
  }

  .mobile-container {
    width: 100% !important;
    height: 100dvh !important; /* Full height */
  }

  #root {
    height: 100dvh !important; /* Full height inside #root */
  }
}