:root {
  --gradient-1: #d6e6fe;
}

body {
  font-family: "Red Hat Display";
  /* overflow: hidden important; */
  /* overflow-y: hidden; Hide vertical scrollbar */
  /* overflow-x: hidden; Hide horizontal scrollbar */
  /* text-align: center; */
  /* background-color:yellow; */
}
html,
body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  position: relative;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}
.section-1 {
  border-radius: 0px 0px 35px 35px;
  background: linear-gradient(315deg, #d6e6fe 0%, rgba(214, 252, 254, 0) 100%);
  width: 70%;
  height: 105vh;
  margin-left: 0.5%;
}
.section-1-position {
  margin-left: 7.3rem;
  padding-bottom: 10%;
}
.logo {
  padding-top: 10%;
  padding-bottom: 10%;
}
.bmi-header {
  /* Heading XL */
  font-family: Inter, sans-serif;
  font-size: 4rem;
  font-style: normal;
  font-weight: 600;
  line-height: 110%;
  letter-spacing: -3.2px;
  width: 55%;
  height: 30%;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.better-paragragh {
  width: 55%;
  height: 30%;
  font-family: Inter, sans-serif;
  font-size: 100%;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
  color: #5e6e85;
  text-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.calculator-form {
  width: 40vw;
  height: fit-content;
  border-radius: 16px;
  display: flex;
  padding: 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  border-radius: 16px;
  background-color: #fff;
  box-shadow: 16px 32px 56px 0px rgba(143, 174, 207, 0.25);
  position: absolute;
  left: 50%;
  top: 20%;
}
.form {
  width: 100%;
}
.enter-your-details {
  color: #253347;
  font-family: Inter, sans-serif;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: -1.2px;
  margin-bottom: 2rem;
}
.radio-btns {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
  margin-bottom: 32px;
}
.activated-btn {
  border: 10px solid #d8e2e7;
  background-color: #345ff6;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  width: 2rem;
  cursor: pointer;
}
.use-metric{
  /* display: none; */
  display: contents;
}

.use-imperial{
  display: none;
}
.imperial-alignment{
  display: flex;
 
}

.hidden{
  visibility: hidden;
}
.metric-block {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1 0 0;
}
.imperial-block {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1 0 0;
}
.radio-btn {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid #d8e2e7;
  width: 2rem;
  cursor: pointer;
}
.radio-btn:hover,
.weight-input-text:hover,
.height-input-text:hover {
  border-color: #345ff6;
}


.unit-test {
  color: #253347;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 24px */
}
.text-block {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
  margin-bottom: 1rem;
}
.height-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 1 0 0;
}


.height-text {
  color: #5e6e85;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}
.height-input-text {
  display: flex;
  padding: 20px 24px;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
  border-radius: 12px;
  border: 1px solid #d8e2e7;
  background-color: #fff;
}
.height-input-value {
  color: #253347;
  font-family: Inter, sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -1.2px;
  width: 80%;
  opacity: 0.25;
  text-align: left;
  cursor: pointer;
  border-style: none;
 
}
/* For WebKit-based browsers */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* For Mozilla Firefox */
input[type="number"]::-moz-number-spin-box {
  -moz-appearance: textfield;
}
/* Target the placeholder of the input with type "number" */
input[type="number"]::placeholder {
  opacity: 0.25; /* Set the opacity of the placeholder text */
}

/* Ensure the input text remains at full opacity */
input[type="number"] {
  opacity: 1;
}


.unit {
  color: #345ff6;
  font-family: Inter;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -1.2px;
  width: 20%;
}
.weight-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 1 0 0;
}
.weight-text {
  color: #5e6e85;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 21px */
}
.weight-input-text {
  display: flex;
  padding: 20px 24px;
  align-items: flex-start;
  align-self: stretch;
  border-radius: 12px;
  border: 1px solid #d8e2e7;
  gap: 24px;
  background: #fff;
  cursor: pointer;
}
.weight-input-value {
  color: #253347;
  font-family: Inter, sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -1.2px;
  width: 80%;
  max-width: 100%;
  border-style: none;
  opacity: 0.25;
  text-align: left;

}
.result-block {
  padding: 32px;
  border-radius: 16px 999px 999px 16px;
  background: linear-gradient(90deg, #345ff6 0%, #587dff 100%);
  margin: 32px 0;
  /* display: none; */
}
.welcome-paragraph {
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.welcome {
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -1.2px;
}
.result-display-block {
  border-radius: 16px 999px 999px 16px;
  background: linear-gradient(90deg, #345ff6 0%, #587dff 100%);
  width: 100%;
  /* height: 120px; */
  padding: 32px;
  margin-top: 32px;
  display: none;
}
.result-main-block {
  /* float: left; */
  display: flex;
  gap: 32px;
}
.result-paragraph-display {
  color: #fff;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  text-align: left;
}
.weight-range {
  color: #fff;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
}
.your-result-is {
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  text-align: left;
}
.bmi-result-display {
  color: #fff;
  font-family: Inter;
  font-size: 64px;
  font-style: normal;
  font-weight: 600;
  line-height: 110%;
  letter-spacing: -3.2px;
}
.right-arc {
  margin-left: 75%;
  margin-top: 1rem;
}

/*  */

/*  */
/* ADD MORE SELECTORS HERE */
.section-2 {
  display: inline-flex;
  margin: 0 10%;
  margin-top: -10%;
  margin-bottom: 10%;
  justify-content: space-between;
}
.man-image {
  width: 100%;
}
.image-man-eating {
  width: 45%;
  margin-right: 10%;
}

.section-2-block {
  width: 45%;
  margin-top: 10%;
}

.BMI-result {
  color: #253347;
  font-family: Inter, sans-serif;
  font-size: 48px;
  font-style: normal;
  font-weight: 600;
}
.result-paragragh {
  color: #5e6e85;
  font-family: Inter, sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  width: 80%;
  line-height: 150%;
}
.tips {
  display: flex;
  justify-content: space-evenly;
  margin: 0 5%;
  background: linear-gradient(315deg, #d6e6fe 0%, rgba(214, 252, 254, 0) 100%);
  border-radius: 35px;
  height: 50vh;
  align-items: center;
}
.healthy-eating {
  width: 30%;
}
.regular-exercise {
  width: 30%;
}
.adequate-sleep {
  width: 30%;
}
.tips-heading {
  color: #253347;
  font-family: Inter, sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
.tips-paragraph {
  width: 90%;
  color: #5e6e85;
  font-family: Inter, sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
}
.limitations {
  width: 35%;
}
.limitations-header {
  color: #253347;
  font-family: Inter, sans-serif;
  font-size: 48px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: -2.4px;
}
.limitations-paragraph {
  color: #5e6e85;
  font-family: Inter, sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}
.peer-group {
  width: 30%;
  display: flex;
  padding: 32px;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 2rem;
  border-radius: 16px;
  background: #fff;
  box-shadow: 16px 32px 56px 0px rgba(143, 174, 207, 0.25);
}
.peer-header {
  color: #253347;
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -1px;
  margin-left: 1rem;
}
.peer-image {
  margin-right: 1rem;
}
.section-4 {
  margin: 10%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.gender {
  position: absolute;
  left: 60%;
  top: 0;
}
.muscle {
  position: absolute;

  left: 70%;
  top: 37%;
}
.age {
  position: relative;
  left: 35%;
  top: -5%;
}
.race {
  position: absolute;
  left: 50%;
  top: 70%;
}
.pregnancy {
  position: relative;
  left: 16%;
  top: 12px;
}
.left-arc {
  position: absolute;
  left: 10%;
  top: 40%;
}

@media (max-width: 1100px) {
  /* CSS styles for tablets go here */
  body {
    text-align: center;
    /* background-color: blue; */
  }
  .result-block {
    text-align: start;
  }
  .section-1 {
    width: 100%;
    height: 60vh;
  }
  .calculator-form {
    position: static;
    margin: 0 auto;
    margin-top: -20%;
    width: 90vw;
    height: fit-content;
  }
  .section-1-position {
    margin: 0;
    padding: 0;
  }
  .bmi-header {
    margin: 3% auto;
    font-size: 360%;
  }
  .section-1-block {
    align-items: center;
    display: flex;
    flex-flow: column;
    justify-content: center;
    text-align: center;
  }
  .better-paragragh {
    margin: 0 auto;
    width: 90%;
    font-size: 96%;
  }
  .right-arc {
    display: none;
  }
  .section-2 {
    margin: 0;
    margin-top: 10%;
  }
  .man-image {
    width: 100%;
    height: 100%;
  }
  .section-2-block {
    margin-top: 0;
    text-align: start;
  }
  .result-main-block {
    gap: 40%;
  }
  .BMI-result {
    font-size: 190%;
  }
  .result-paragragh {
    width: 90%;
  }
  .tips {
    display: block;
    text-align: start;
    margin: 0;
    border-radius: 0;
    margin-top: 10%;
    padding: 10% 0;
    height: fit-content;
    /* display: flex;
    justify-content: space-evenly;
    margin: 0 5%;
    background: linear-gradient(315deg, #d6e6fe 0%, rgba(214, 252, 254, 0) 100%);
    border-radius: 35px;
    height: 50vh;
    align-items: center; */
  }
  .tips-heading {
    margin-bottom: 0;
  }
  .healthy-eating {
    height: 30%;
    width: initial;
    padding: 0 2rem;
  }
  .regular-exercise {
    height: 30%;
    width: initial;
    padding: 0 2rem;
  }
  .adequate-sleep {
    height: 30%;
    width: initial;
    padding: 0 2rem;
  }
  .tip {
    display: flex; /* Use flexbox for the parent container */
    margin-bottom: 1rem;
    align-items: center; /* Center the items vertically (optional, adjust as needed) */
  }

  .tips-image {
    flex-shrink: 0; /* Prevent the image from shrinking */
    margin-right: 20px; /* Add some space between the image and the content */
  }

  /* Optional: If you want to adjust the alignment of the text content */
  .tips-content {
    display: flex;
    flex-direction: column;
  }
  .section-4 {
    display: block;
    margin: 10% 5%;
  }
  .peer-group {
    position: static;
    width: 95%;
    text-align: start;
  }
  .limitations {
    width: 100%;
  }
  .groups {
    grid-column: 2 / 3;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* row-gap: 1.5rem; */
    margin-top: 10%;
  }
  .left-arc {
    display: none;
  }
  .race {
    margin: 0 50%;
  }
  @media (max-width: 700px) {
    .bmi-header {
      font-size: 2.5rem;
    }
    .better-paragragh {
      font-size: 17px;
    }
    .section-1 {
      height: 100vh;
    }
    .calculator-form {
      margin-top: -70%;
      height: fit-content;
    }
    .mobile-text-block-view{
      display: block;
    }
    .result-display-block {
      border-radius: 16px;
    }
    .result-main-block {
      display: block;
    }
    .section-2 {
      display: block;
    }
    .your-result-is-block {
      text-align: left;
    }
    .man-image {
      width: 100vw;
    }
    .section-2-block {
      width: 90vw;
      margin: 0 5%;
    }
    .result-paragragh {
      width: 90vw;
    }
    .tip {
      display: grid;
      margin-bottom: 3rem;
    }
    .tips {
      height: fit-content;
    }
    .tips-paragraph {
      width: 90vw;
    }
    .limitations-header {
      font-size: 32px;
    }
    .groups {
      display: block;
    }
    .race {
      margin: 0;
    }
  }
}