* {
  margin: 0; /* It's usually better to explicitly set margin: 0; */
  padding: 0;
  box-sizing: border-box; /* Include this for consistent box model */
}
a {
  text-decoration: none;
}
body {
  font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
}

/* --- Topper Section --- */
.topper {
  position: relative; /* Crucial for positioning .topper-img */
  display: flex; /* Use flexbox for layout */
  justify-content: space-between; /* Pushes H1 and links to ends */
  align-items: center; /* Vertically centers content */
  padding-top: 0.5em;
  padding-left: 3em; /* Adjust padding for horizontal spacing */
  padding-right: 6em; /* Adjust padding for horizontal spacing */
  /* If you want the image to appear within the line of the title and button,
     you'll need a different approach than absolute positioning here.
     If you want it to float over, then this is correct. */
}

.myname {
  font-size: 3em;
  color: #333; /* Ensure color is set */
}
#logo {
  width: 18em;
  height: auto;
  /* border-style: solid; */
}

.topper-img {
  position: absolute;
  top: 50%; /* Adjust these values based on where you want the image */
  left: 50%; /* These values will center the top-left corner of the image */
  transform: translate(
    -100%,
    -50%
  ); /* This perfectly centers the image
  width: 500px; /* Your desired width */
  height: 500px; /* Your desired height */
  object-fit: contain; /* Ensures the image scales properly within its dimensions */
  z-index: 1; /* Adjust z-index as needed to control layering */
  /* The large transform(-1230%, -50%) you had will push it far off screen.
     -50%, -50% is for centering. You'll need to manually adjust `top`, `left`,
     or use `margin` with flexbox if you want it next to the H1. */
}

.links {
  display: flex; /* Use flex for the links as well */
  gap: 1ch;
  justify-content: flex-end;
  z-index: 2; /* Ensure links are above the image if they overlap */
}
.img_section {
  text-align: center;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.button {
  border-radius: 22px;
  margin: 5px; /* This margin adds space around the button */
  background-color: #2d7aff;
  border: none;
  color: white;
  padding: 12px 15px; /* Slightly more padding for better clickability */
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer; /* Indicate it's clickable */
}
#the-demo-button {
  color: white;
  font-size: 1.3em;
  padding: 12px 45px;
  margin-top: 4em;
  margin-left: 3em;
  align-self: center;
}
#founder-button {
  background-color: black;
  color: white;
  padding: 12px 45px;
}
#contact-us {
  background-color: black;
}
#founder {
  background-color: #eaf2ff;
}
#founder-text {
  color: black;
}

/* --- Header Section --- */
.header {
  display: flex;
  flex: 1 2 100%;
  justify-content: space-between;

  /* min-height: 30em; */
}

.header-l {
  display: inline;
  width: 35%;
  margin-left: 8em;
  margin-right: 2em;
  margin-top: 4rem;
  /* border-style: solid; */
}
#blue {
  margin-top: 1.1em;
  font-size: 2rem;
  color: #2d7aff;
}
.header-r {
  border-radius: 8% 0% 0% 8%;
  background-image: url("b_background_3.png");
  padding-left: 1.2rem;
  width: 65%;
  height: 100vh; /* Fill the entire viewport height */

  flex-grow: 1;
  background-size: cover; /* Ensures the image fills the container */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  background-position: bottom right; /* Centers the image within the container */
  /* If you want it in the bottom left, change to: background-position: bottom left; */
}

.header-l h1 {
  margin-top: 3rem;
  font-size: 3.5em;
}
.header-l h2 {
  font-size: 1.5em; /* This seems very large for a sub-heading */
  color: #333;
}
.header-l h3 {
  margin: 0;
  font-size: 1.6em;
  color: #333;
}
.project h3 {
  color: #554d4e;
}

/* --- Slider Section --- */
.slider {
  flex-wrap: wrap;
  margin-right: 1em;
  margin-top: 14ch;
}

.slides {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* --- Side-by-side Images (.slide-images) --- */
.slide-images {
  display: flex;
  gap: 1.7rem; /* Adjust this for spacing between images */
  justify-content: center;
  align-items: flex-end;
}

.app-screenshot {
  width: 16rem; /* Or use % of parent */
  height: auto;
  object-fit: contain; /* or 'cover' if you'd rather crop */
}

.slides::-webkit-scrollbar {
  display: none;
}

.slide {
  display: flex;
  width: 100%;
  scroll-snap-align: start;
}

#profile-slide {
  width: 100%;
  height: auto;
  display: block;
}
#emails {
  display: flex; /* Make it a flex container */
  flex-direction: row; /* VERY IMPORTANT: Arranges children horizontally */

  background-color: white;
  border-radius: 20px;

  /* Use gap for consistent horizontal spacing between items */
  gap: 2rem; /* Adjust this value as needed to control space between each <h4> */

  /* Align items vertically within the row (if they have different heights) */
  align-items: center; /* Vertically centers the text within the row */

  /* Optional: How to distribute the items if there's extra horizontal space */ /* Centers the whole group of <h4> horizontally within #emails */
  /* Or: justify-content: space-around; */ /* Distributes space around items */
  /* Or: justify-content: space-between; */ /* Pushes first and last to edges, spaces others */
  margin-left: 8em;
  margin-right: 2em; /* Keep your existing margin */
  padding: 1em 1.5em; /* Add some padding inside the container */
  flex-wrap: wrap; /* Allows items to wrap to the next line on smaller screens if space runs out */
}
#emails h4 {
  /* You can set font styles, color, etc. here */
  white-space: nowrap; /* Prevents text from breaking onto multiple lines */
  font-size: 1em; /* Adjust font size as needed */
  color: #333;
}
#try-the-beta {
  margin-top: 1.5rem;
  padding: 12px 20px;
  border-radius: 18px;
}
/* --- Media Queries for Responsiveness --- */
/* For very large screens (e.g., 1440px and above) */
@media (min-width: 1700px) {
  .app-screenshot {
    width: 18rem; /* Make images larger on very big screens (e.g., 400px wide) */
    /* If you want 3-4 images per row on large screens, you'd adjust .img_section's width here as well */
  }
  #try-the-beta {
    margin-top: 4rem;
    padding: 12px 45px;
    justify-self: center;
    align-self: center;
  }
  .slide-images {
    gap: 2rem; /* Adjust this for spacing between images */
  }
  /* You might want to adjust font sizes or other margins for larger screens here */
  .header-l {
    width: 35%;
    margin-left: 10rem;
    margin-right: 5rem;
    align-items: center;
    justify-content: center;
    /* border-style: solid; */
  }
  .header-l h1 {
    margin-top: 10rem;
    font-size: 3.5rem; /* Larger main heading */
  }
  .header-l h2 {
    font-size: 2rem; /* Larger subheading */
  }
  #blue {
    font-size: 2rem;

    font-weight: bold;
  }
  .header-r h1 {
    font-size: 3.5rem; /* Larger heading on right side */
  }
  .header-r h2 {
    font-size: 2.2rem;
  }
}

/* --- Media Queries for Responsiveness --- */

/* For screens between 769px and 1024px (e.g., Tablets in landscape or smaller laptops) */
@media (max-width: 1024px) {
  body {
    padding-left: 5%;
    padding-right: 5%;
  }

  .topper {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1em;
    padding-left: 2em; /* Adjust padding for smaller screens */
    padding-right: 2em;
  }
  .myname {
    font-size: 2.5em;
    width: 100%;
    text-align: center;
  }
  #logo {
    width: 10em;
  }
  .links {
    width: 100%;
    justify-content: center;
  }
  .button {
    font-size: 1em;
    padding: 10px 12px;
  }

  .header {
    flex-direction: column; /* Stack header sections vertically */
    flex: none; /* Remove flex grow/shrink for columnar layout */
  }

  .header-l,
  .header-r {
    width: 100%; /* Both sections take full width when stacked */
    margin-left: 0;
    padding-left: 2em; /* Consistent internal padding */
    padding-right: 2em;
    height: auto; /* Allow height to adjust to content */
  }

  .header-l {
    padding-top: 2em;
    padding-bottom: 2em;
    text-align: center;
  }

  .header-l h1 {
    font-size: 3em;
    margin-top: 1.5em; /* Adjust margin for stacking */
  }
  .header-l h2 {
    font-size: 1.5em;
  }
  #blue {
    font-size: 2em;
    margin-top: 1em;
  }

  .header-r {
    border-radius: 0; /* Remove specific border-radius */
    padding-top: 3em;
    padding-bottom: 3em;
    background-position: center bottom;
    height: auto; /* Ensure it adjusts height for content */
  }

  .slider {
    margin-top: 0; /* Adjust margin as it's now centered in header-r */
    margin-right: 0;
    width: 100%;
    max-width: 600px; /* Constrain max width for slider content */
  }

  .slide-images {
    gap: 1em;
  }

  .img_section {
    width: calc(50% - 0.5em); /* Two images per row, considering gap */
    max-width: 250px; /* Control max size of individual images */
    padding: 10px; /* Reduce padding for smaller items */
  }

  .img_section h2 {
    font-size: 1.2em; /* Smaller font for titles */
    margin-bottom: 0.3em;
  }

  .app-screenshot {
    width: 100%; /* Image fills its smaller container */
    max-width: 200px; /* Keep max-width for image itself */
  }
}

/* For screens up to 768px (e.g., Tablets in portrait, larger phones) */
@media (max-width: 768px) {
  body {
    padding-left: 0%;
    padding-right: 0%;
  }

  .topper {
    padding-left: 1em;
    padding-right: 1em;
  }

  .myname {
    font-size: 2em;
  }
  #logo {
    width: 12em;
  }
  .button {
    font-size: 0.9em;
    padding: 8px 10px;
  }
  .header {
    margin-top: 0rem;
  }
  .header-l {
    margin-top: 0rem;
    margin-bottom: 0rem;
  }

  .header-l h1 {
    margin-top: 0rem;
    font-size: 2.5em;
  }
  .header-l h2 {
    margin-top: 0rem;
    font-size: 1.3em;
  }
  #blue {
    font-size: 1.8em;
  }
  .header-r {
    margin: 0rem;
  }
  #try-the-beta {
    margin-left: 0rem;
    padding: 6px 10px;
  }
  .links {
    flex-wrap: wrap; /* Ensure buttons wrap */
    justify-content: center;
    gap: 2em;
  }
  .img_section {
    width: calc(50% - 0.5em); /* Still two per row, but smaller */
    max-width: 200px;
  }
  .app-screenshot {
    max-width: 180px;
  }
  .slide-images {
    flex-direction: column; /* Stack images vertically */
    align-items: center;
    gap: 0em;
  }
}

/* For screens up to 480px (e.g., Smaller phones in portrait) */
@media (max-width: 480px) {
  body {
    padding-left: 0%;
    padding-right: 0%;
  }

  #try-the-beta {
    margin-left: 0rem;
    padding: 6px 10px;
  }
  .header {
    margin-top: 0rem;
  }
  .topper {
    flex-direction: column; /* Stack all topper items */
    margin-bottom: 0rem;
    padding-left: 0.5em;
    padding-right: 0.5em;
  }
  #logo {
    width: 10em;
  }
  .links {
    flex-wrap: wrap; /* Ensure buttons wrap */
    justify-content: center;
    gap: 0.5em;
  }
  .button {
    font-size: 0.9em;
    padding: 6px 8px;
    margin: 3px; /* Smaller margin for buttons */
  }

  .slide-images {
    flex-direction: column; /* Stack images vertically */
    align-items: center;
    gap: 0em;
  }
  .header-l {
    margin-top: 0rem;
    margin-bottom: 0rem;
  }
  .header-l h1 {
    margin-top: 0rem;
    font-size: 2em;
  }
  .header-l h2 {
    font-size: 1em;
  }
  .header-l h3 {
    font-size: 1em;
  }
  .header-r {
    margin: 0rem;
    align-items: center;
  }
  #blue {
    font-size: 1.2em;
  }

  .slide-images {
    flex-direction: column; /* Stack images vertically */
    gap: 1.5em;
  }

  .img_section {
    width: 80%; /* Single image per row, taking 80% width */
    max-width: 280px; /* Max width for consistency */
    margin: 0 auto; /* Center individual image sections */
    padding: 10px;
  }
  .app-screenshot {
    width: 100%; /* Image fills its container */
    max-width: 250px; /* Constrain image size */
  }
}