@import url("constants.css");

body {
  min-height: 100vh; /* Ensures body takes at least the full viewport height */
  padding-bottom: 32px;
}

nav {
  display: flex; /* Makes nav a flex container */
  justify-content: center; /* Centers content horizontally */
  align-items: center; /* Aligns content vertically */
  padding: 48px 0 0 0; /* Adds 48px padding around the nav */
}

.page-container {
  display: flex; /* Makes body a flex container */
  flex-direction: column; /* Sets the flex direction to column */
  gap: var(--spacing-800); /* Applies the predefined spacing value */
  margin: 0; /* Removes default body margin */
  padding: 0; /* Ensures no padding interference */
  width: 375px; /* Sets the width to 375px */
  background-color: #ffffff; /* Sets the background color to white */
  margin: 0 auto; /* Centers the body horizontally */
}
nav img {
  width: 118px; /* Sets the logo width */
  height: 28px; /* Sets the logo height */
  object-fit: contain; /* Ensures the image maintains aspect ratio */
}

.hero {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.mobile-hero-image-container {
  width: 375px; /* Container width */
  height: 160px; /* Fixed height */
  overflow: hidden; /* Clips any overflowing part of the image */
  position: relative; /* Ensures positioning for child elements */
}

.mobile {
  width: 433px; /* Full image width */
  height: 160px; /* Full image height */
  object-fit: cover; /* Ensures image is clipped and scaled */
  position: absolute; /* Enables precise positioning */
  left: 50%;
  transform: translateX(-50%);
}

.hero-image-left {
  display: none;
}

.hero-image-right {
  display: none;
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-300);
  padding: 0px 32px;
}
.hero-content p {
  color: var(--color-slate-600, #87879d);
  text-align: center;
  font-feature-settings: "liga" off, "clig" off;

  /* tablet/text-preset-4 */
  font-family: "Red Hat Display";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 24px */
  align-self: stretch;
}
.hero-content h1 {
  color: var(--color-slate-900, #28283d);
  text-align: center;
  font-feature-settings: "liga" off, "clig" off;

  /* mobile/text-preset-1 */
  font-family: "Red Hat Display";
  font-size: 40px;
  font-style: normal;
  font-weight: 900;
  line-height: 110%; /* 44px */
  align-self: stretch;
}
.button-group {
  padding: 0px var(--spacing-700);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-200);
}

.download-btn {
  display: inline-flex;
  padding: var(--spacing-200, 16px) var(--spacing-500, 40px);
  align-items: flex-start;
  gap: var(--spacing-100, 8px);
  border-radius: 29px;
  background: var(--color-cyan-600, #4d96a9);

  color: var(--color-white, #fafafa);
  font-feature-settings: "liga" off, "clig" off;

  /* desktop/text-preset-5 */
  font-family: "Red Hat Display";
  font-size: 16px;
  font-style: normal;
  font-weight: 900;
  line-height: 150%; /* 24px */
}

.download-btn span {
  display: inline-flex;
  color: var(--color-cyan-300, #8fe3f9);
  font-feature-settings: "liga" off, "clig" off;

  /* desktop/text-preset-5 */
  font-family: "Red Hat Display";
  font-size: 16px;
  font-style: normal;
  font-weight: 900;
  line-height: 150%; /* 24px */
}

.download-btn:hover {
  background: #71c0d4;
}

.btn {
  cursor: pointer; /* Adds pointer cursor */
  transition: background 0.3s ease; /* Smooth hover animation */
}
.info-btn {
  width: 161px;
  display: inline-flex;
  padding: var(--spacing-200, 16px) var(--spacing-500, 40px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-100, 8px);
  border-radius: 29px;
  background: var(--color-purple-600, #855fb1);

  color: var(--color-white, #fafafa);
  font-feature-settings: "liga" off, "clig" off;

  /* desktop/text-preset-5 */
  font-family: "Red Hat Display";
  font-size: 16px;
  font-style: normal;
  font-weight: 900;
  line-height: 150%; /* 24px */
}
.info-btn:hover {
  background: #b18bdd;
}

.step-indicator {
  text-align: center; /* Centers inline or inline-block elements */
}

.step-image {
  display: inline-block; /* Ensures image behaves as inline content */
}
main {
  display: flex;
  padding: 0px 32px;
  flex-direction: column;
  gap: var(--spacing-800, 64px);
}
.features-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-800);
}
.features-gallery {
  display: grid; /* Turns the container into a grid */
  grid-template-columns: repeat(2, 1fr); /* Creates 2 equal columns */
  gap: 16px; /* Adds spacing between grid items */
}

.inner-smarter-meetings {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-200);
}

.features-gallery img {
  width: 100%; /* Makes images take full width of their container */
  height: auto; /* Maintains aspect ratio */
  border-radius: 12px; /* Rounds the corners of images */
  object-fit: cover; /* Ensures images maintain a consistent aspect ratio */
}

header h2 {
  color: var(--color-cyan-600, #4d96a9);
  text-align: center;
  font-feature-settings: "liga" off, "clig" off;

  /* mobile/text-preset-3 */
  font-family: "Red Hat Display";
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  line-height: 110%; /* 13.2px */
  letter-spacing: 4px;
  text-transform: uppercase;
}
header h3 {
  color: var(--color-slate-900, #28283d);
  text-align: center;
  font-feature-settings: "liga" off, "clig" off;

  /* mobile/text-preset-2 */
  font-family: "Red Hat Display";
  font-size: 32px;
  font-style: normal;
  font-weight: 900;
  line-height: 110%; /* 35.2px */
}

header p {
  color: var(--color-slate-600, #87879d);
  text-align: center;
  font-feature-settings: "liga" off, "clig" off;

  /* tablet/text-preset-4 */
  font-family: "Red Hat Display";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 24px */
}
.smarter-meetings {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-400, 32px);
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 32px;
  text-align: center;
  background: url("./assets/mobile/image-footer.jpg") lightgray 50% / cover
    no-repeat;
  /* Background Image */
  height: 374px;
  gap: var(--spacing-300);
}

.overlay {
  position: absolute;
  width: 375px;
  height: 374px;
  background-color: var(--cyan-600);
  z-index: 1;
  opacity: 0.8;
}
.footer-content h2,
.footer-content p,
.footer-content .btn {
  position: relative; /* Place these elements above the overlay */
  z-index: 2; /* Ensures they are on top of the overlay */
}

.footer-content h2 {
  color: var(--color-white, #fafafa);
  text-align: center;
  font-feature-settings: "liga" off, "clig" off;

  /* mobile/text-preset-2 */
  font-family: "Red Hat Display";
  font-size: 32px;
  font-style: normal;
  font-weight: 900;
  line-height: 110%; /* 35.2px */
  align-self: stretch;
}

.footer-content p {
  align-self: stretch;
  color: var(--color-white, #fafafa);
  text-align: center;
  font-feature-settings: "liga" off, "clig" off;

  /* tablet/text-preset-4 */
  font-family: "Red Hat Display";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 24px */
  padding: 0px 4px;
}

.footer-content .download-btn {
  background: var(--color-purple-600, #855fb1);
}

.footer-content .download-btn span {
  color: var(--color-purple-300, #d9b8ff);
}

.footer-content .download-btn:hover {
  background: #b18bdd;
}

footer {
  position: relative; /* Establish relative context for children */
}

.step-indicator-footer {
  position: relative; /* Keeps the step indicator in flow */
  top: 28px; /* Moves it up by 28px */
  display: flex;
  justify-content: center; /* Centers horizontally */
  z-index: 2; /* Places it above the overlay */
}

.step-image {
  width: 56px; /* Adjust size as per design */
  height: auto; /* Maintain aspect ratio */
}
@media (min-width: 600px) and (max-width: 1024px) {
  .page-container {
    width: 768px; /* Sets the width to 375px */
  }
  .hero {
    gap: var(--spacing-700);
  }
  .mobile-hero-image-container {
    width: 768px; /* Container width */
    height: 303px; /* Fixed height */
    position: relative; /* Establish positioning context */
    overflow: hidden; /* Clip the overflowing image */
    margin: 0 auto; /* Center the container */
  }

  .mobile {
    width: 820px; /* Ensure the image is large enough to fill and clip */
    height: 303px; /* Match the container height */
    object-fit: cover; /* Clip and scale the image */
    position: absolute;
    left: 50%; /* Move starting point to center */
    transform: translateX(-50%); /* Center the image */
  }

  .hero-content {
    padding: 0px 160px;
  }

  .hero-content h1 {
    color: var(--color-slate-900, #28283d);
    text-align: center;
    font-feature-settings: "liga" off, "clig" off;

    /* tablet/text-preset-1 */
    font-family: "Red Hat Display";
    font-size: 48px;
    font-style: normal;
    font-weight: 900;
    line-height: 110%; /* 52.8px */
  }
  .button-group {
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: 0px;
  }
  .features-gallery {
    display: flex; /* Turns the container into a grid */
    gap: 24px; /* Adds spacing between grid items */
  }
  .features-gallery img {
    width: 152px;
    height: 160px;
  }
  .smarter-meetings {
    padding: 0px 100px;
  }

  .footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 132px;
    text-align: center;
    background: url("./assets/tablet/image-footer.jpg") lightgray 50% / cover
      no-repeat;
    /* Background Image */
    height: 320px;
    gap: var(--spacing-300);
  }
  .footer-content p {
    padding: 0px 4px;
  }

  .overlay {
    position: absolute;
    width: 768px;
    height: 320px;
    background-color: var(--cyan-600);
    z-index: 1;
    opacity: 0.8;
  }
}

@media (min-width: 1025px) {
  nav {
    padding-top: var(--spacing-1000);
  }
  .page-container {
    width: 1440px; /* Sets the width to 375px */
  }

  .mobile {
    display: none;
    width: 0px; /* Full image width */
    height: 0px; /* Full image height */
  }
  .mobile-hero-image-container {
    width: 0px; /* Container width */
    height: 0px; /* Fixed height */
  }
  .hero-desktop-layout {
    width: 100%;
    height: 360px;
    display: flex;
    justify-content: space-between; /* Space between left and right images */
    align-items: start;
    position: relative;
    overflow: hidden;
    gap: 32px;
  }
  .hero-image-left,
  .hero-image-right {
    display: inline;
    width: 394px; /* Image width */
    height: 303px; /* Fixed height */
    object-fit: cover; /* Maintain aspect ratio and crop */
    top: 0;
  }
  .hero-image-left {
    position: absolute;
    left: -26px;
  }
  .hero-image-right {
    position: absolute;
    right: -26px;
  }
  .hero-content {
    padding: 23px 0px;
    width: 480px;
    height: 360px;
    gap: var(--spacing-400);
  }
  .button-group {
    padding: 0px 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 0px 38px;
  }
  .hero-content h1 {
    color: var(--color-slate-900, #28283d);
    text-align: center;
    font-feature-settings: "liga" off, "clig" off;

    /* desktop/text-preset-1 */
    font-family: "Red Hat Display";
    font-size: 64px;
    font-style: normal;
    font-weight: 900;
    line-height: 110%; /* 70.4px */
    padding: 0px;
  }
  .hero-content p {
    color: var(--color-slate-600, #87879d);
    text-align: center;
    font-feature-settings: "liga" off, "clig" off;

    /* desktop/text-preset-4 */
    font-family: "Red Hat Display";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 27px */
    padding: 0px 24px;
  }
  .page-container {
    gap: var(--spacing-700);
  }
  .features-gallery {
    display: flex; /* Turns the container into a grid */
    justify-content: center;
    gap: 32px; /* Adds spacing between grid items */
  }
  .features-gallery img {
    width: 256px;
    height: 256px;
  }
  header h2 {
    font-size: 16px;
  }
  header h3 {
    font-size: 40px;
    padding: 0px 32px;
  }
  .smarter-meetings {
    padding: 0px 428px;
  }
  header p {
    font-size: 18px;
  }
  .inner-smarter-meetings br {
    display: none;
  }

  .footer-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 140px 160px;
    text-align: center;
    background: url("./assets/desktop/image-footer.jpg") lightgray 50% / cover
      no-repeat;
    /* Background Image */
    height: 312px;
    gap: var(--spacing-400);
  }
  .footer-content p {
    padding: 0px 4px;
  }

  .overlay {
    position: absolute;
    width: 100%;
    height: 312px;
    background-color: var(--cyan-600);
    z-index: 1;
    opacity: 0.8;
  }

  .footer-content h2 {
    flex: 1 0 0;
    color: var(--color-white, #fafafa);
    font-feature-settings: "liga" off, "clig" off;

    /* desktop/text-preset-2 */
    font-family: "Red Hat Display";
    font-size: 40px;
    font-style: normal;
    font-weight: 900;
    line-height: 110%; /* 44px */
    text-align: left;
  }

  .footer-content p {
    width: 355px;
    color: var(--color-white, #fafafa);
    font-feature-settings: "liga" off, "clig" off;

    /* desktop/text-preset-4 */
    font-family: "Red Hat Display";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 27px */
    text-align: left;

  }
  .footer-btn-div {
    display: flex;
    align-self: start;
    justify-content: end;
    width: 256px;
  }
}