/*64px max*/
/*48px max*/
/*24px max*/
/*20px max*/
/*16px max*/
.hero {
  padding-top: 80px;
  position: relative;
  background-color: #081935;
  z-index: 2;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
  min-height: calc(100vh - 100px);
}
@media (max-width: 39.9375em) {
  .hero {
    padding-top: 40px;
  }
}

.hero__background-image {
  position: absolute;
  left: 50%;
  width: 96%;
  transform: translate(-50%, -15%);
  z-index: -1;
  pointer-events: none;
}
@media (max-width: 39.9375em) {
  .hero__background-image {
    top: 7%;
    max-width: unset;
    width: 717px;
  }
}

.hero__heading {
  font-family: "Space Grotesk", Arial, Helvetica, sans-serif;
  font-size: clamp(2.625rem, 0.7372881356rem + 3.7288135593vw, 4rem);
  color: #FFF48B;
  letter-spacing: -4px;
  margin-bottom: 40px;
}

.hero__sub_heading {
  max-width: 800px;
  text-align: center;
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: clamp(0.8rem, 0.3601694915rem + 1.0169491525vw, 1rem);
  font-weight: 300;
  color: #FFF48B;
  letter-spacing: normal;
  margin: 0 auto 50px;
}

.hero__sub_heading_cta {
  margin-bottom: 20px;
}
@media (min-width: 64em) {
  .hero__sub_heading_cta {
    margin-bottom: 30px;
  }
}

/*for 1024px up*/
@media (min-width: 64em) {
  .hero__heading {
    margin-bottom: 45px;
    margin-top: 20px;
  }
  .hero__sub_heading {
    margin: 0 auto 70px;
  }
}
.span-bold {
  font-weight: 400;
}

.why-choose-us {
  margin: 20px auto;
  background-color: #ffffff;
}
@media (max-width: 39.9375em) {
  .why-choose-us {
    margin: 20px auto;
  }
}

.why-choose-us__content {
  flex: 1;
  padding-bottom: 30px;
}

.why-choose-us__heading {
  font-size: clamp(1.875rem, 0.3305084746rem + 3.0508474576vw, 3rem);
  font-weight: 700;
  color: #333;
  margin-bottom: 45px;
  padding-top: 45px;
  font-family: "Space Grotesk", Arial, Helvetica, sans-serif;
}
@media (max-width: 39.9375em) {
  .why-choose-us__heading {
    margin-bottom: 25px;
  }
}

.why-choose-us__heading-icon {
  margin-left: 10px;
  font-size: 0.8em; /* Adjust size of the icon */
  color: #666;
}

.why-choose-us__item {
  margin-bottom: 20px;
}
@media (min-width: 64em) {
  .why-choose-us__item {
    margin-bottom: 35px;
  }
}

.why-choose-us__item-title {
  font-size: clamp(1.125rem, 0.6101694915rem + 1.0169491525vw, 1.5rem);
  font-weight: 700;
  font-family: "Space Grotesk", Arial, Helvetica, sans-serif;
  color: #333;
}

.why-choose-us__item-description {
  font-size: clamp(0.8rem, 0.3601694915rem + 1.0169491525vw, 1rem);
  line-height: 1.3;
  color: #555;
  margin: 0;
  padding-top: 8px;
}

.why-choose-us__image-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (min-width: 768px) {
  .why-choose-us__image-wrapper {
    justify-content: end;
  }
}

.why-choose-us__image {
  width: 437px;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  display: block; /* Remove extra space below image */
}

/* Responsive adjustments for larger screens (e.g., tablets and desktops) */
@media (min-width: 768px) {
  .why-choose-us {
    display: flex;
    flex-direction: row; /* Layout side-by-side for larger screens */
    justify-content: space-between;
    gap: 10vw;
  }
}
.what-makes-us-different {
  margin: 0 auto;
  background-color: #081935;
  padding-top: 70px;
  padding-bottom: 50px;
}
@media (min-width: 64em) {
  .what-makes-us-different {
    padding-top: 70px;
    padding-bottom: 50px;
  }
}

.what-makes-us-different__heading {
  color: #FFF48B; /* Yellow color for the heading */
  margin-bottom: 40px;
  text-align: center;
}
@media (min-width: 64em) {
  .what-makes-us-different__heading {
    margin-bottom: 50px;
  }
}

.what-makes-us-different__cards {
  display: flex;
  flex-direction: column; /* Stack vertically by default for mobile */
  gap: 40px; /* Space between cards */
  justify-content: center;
  align-items: center;
}

.what-makes-us-different__card {
  max-height: 405px;
  background-color: #BFECE5; /* Light green card background */
  color: #0f1c3f; /* Dark text for cards */
  border-radius: 40px;
  padding: 30px;
  width: 100%;
  max-width: 380px;
  min-width: 300px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align text to the left within the card */
  text-align: left;
  position: relative; /* For plus icon positioning */
}

.what-makes-us-different__card--expanded .what-makes-us-different__card-icon-desc {
  display: block;
}

.what-makes-us-different__card-title {
  font-size: clamp(1.125rem, 0.6101694915rem + 1.0169491525vw, 1.5rem);
  font-weight: 700;
  margin-bottom: 20px;
  max-width: 250px;
}

.what-makes-us-different__card-icon--ctr {
  padding-top: 70px;
}
@media (max-width: 39.9375em) {
  .what-makes-us-different__card-icon--ctr {
    padding-top: 30px; /* Remove padding on larger screens */
  }
}

.what-makes-us-different__card-icon-desc {
  font-size: clamp(0.8rem, 0.3601694915rem + 1.0169491525vw, 1rem);
  line-height: 1.6;
  color: #040E1E;
  display: none; /* Initially hidden */
  transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out; /* Smooth transition for slide */
}

.what-makes-us-different__card-icon-wrapper {
  background-color: #003F48; /* Darker blue circle for icon */
  border-radius: 50%;
  width: 172px;
  height: 172px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.what-makes-us-different__card-icon-wrapper.hidden {
  display: none; /* Hide the icon when not expanded */
}

.what-makes-us-different__card-icon {
  /* Using SVG for the icons for simplicity and scalability */
  width: 50px;
  height: 50px;
  fill: #d1f7e0; /* Light green color for the SVG icon */
}

.what-makes-us-different__card-plus-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 1.8em;
  font-weight: 700;
  color: #0f1c3f;
  cursor: pointer;
  transition: all 0.3s ease; /* Smooth rotation for the plus/minus */
}

/* Responsive adjustments for larger screens */
@media (min-width: 768px) {
  .what-makes-us-different__cards {
    flex-direction: row; /* Layout cards horizontally */
    flex-wrap: wrap; /* Allow cards to wrap to the next line */
    justify-content: center;
    gap: 40px; /* More space between cards on larger screens */
  }
  .what-makes-us-different__card {
    flex: 1; /* Allow cards to grow and shrink */
    min-width: 280px; /* Ensure cards don't get too small */
    justify-content: space-between;
  }
}
@media (min-width: 1024px) {
  .what-makes-us-different__card {
    max-width: 385px; /* Maintain consistent max-width for cards */
  }
}
.our-process {
  padding: 30px 0;
  text-align: left; /* Align text to the left */
  background-color: #081935;
}
@media (min-width: 64em) {
  .our-process {
    padding-top: 30px;
    padding-bottom: 50px;
  }
}

.our-process__heading {
  font-family: "Space Grotesk", Arial, Helvetica, sans-serif;
  color: #FFF48B; /* Yellow color for the heading */
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Align heading to the left */
}

.our-process__heading-icon {
  margin-left: 10px;
  font-size: 0.8em;
  color: #FFF48B;
}

.our-process__steps {
  display: flex;
  flex-direction: column; /* Always stack vertically */
  gap: 10px; /* No gap between steps, use padding for separation */
}

.our-process__step {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Separator line */
  padding: 20px 0;
  overflow: hidden; /* Hide overflow for smooth slide transition */
  transition: background-color 0.3s ease; /* Smooth transition for hover/active state */
}

.our-process__step:last-child {
  border-bottom: none; /* No border for the last item */
}

.our-process__step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer; /* Indicate clickable area */
  padding-right: 10px; /* Space for the plus button */
  font-family: "Space Grotesk", Arial, Helvetica, sans-serif;
}

.our-process__step-title {
  font-size: clamp(1.125rem, 0.6101694915rem + 1.0169491525vw, 1.5rem);
  font-weight: 400; /* Regular weight for the title */
  color: #ffffff;
  flex-grow: 1; /* Allow title to take available space */
}
@media (min-width: 64em) {
  .our-process__step-title {
    font-weight: 400;
  }
}

.our-process__step-number {
  font-size: 1.3em;
  font-weight: 700;
  color: #FFF48B; /* Yellow for numbers */
  margin-right: 20px;
  min-width: 35px; /* Ensure number takes consistent space */
}

.our-process__toggle-button {
  background: none;
  border: none;
  color: #FFF48B; /* Yellow for the plus/minus icon */
  font-size: 2em;
  cursor: pointer;
  padding: 0 10px;
  line-height: 1; /* Align vertically */
  transition: transform 0.3s ease; /* Smooth rotation for the plus/minus */
  outline: none; /* Remove outline on focus */
}

.our-process__toggle-button--active {
  transform: rotate(45deg); /* Rotate for minus sign (if using a plus icon that rotates) */
}

.our-process__step-description {
  font-size: clamp(0.8rem, 0.3601694915rem + 1.0169491525vw, 1rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  max-height: 0; /* Initially hidden */
  transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out; /* Smooth transition for slide */
  padding: 0 0 0 55px; /* Indent description below number */
  position: relative;
  top: 15px;
  max-width: 800px;
}
@media (max-width: 39.9375em) {
  .our-process__step-description {
    font-size: clamp(0.875rem, 0.3601694915rem + 1.0169491525vw, 1.25rem);
  }
}

/* State for expanded description */
.our-process__step--expanded .our-process__step-description {
  max-height: 100%;
  /* line-height: 1.1; */
  padding-bottom: 15px;
}

/* Hover effect for clickable header */
.our-process__step-header:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 5px;
}

.plug-into-hive {
  padding: 50px 0px;
  background-color: #FFF48B;
}
@media (min-width: 64em) {
  .plug-into-hive {
    padding: 50px 0px;
  }
}

.plug-into-hive__heading {
  font-family: "Space Grotesk", Arial, Helvetica, sans-serif;
  color: #1a202c; /* Dark text color */
  margin-bottom: 25px;
}

.plug-into-hive__description {
  font-size: clamp(0.8rem, 0.3601694915rem + 1.0169491525vw, 1rem);
  line-height: 1.5;
  color: #4a5568; /* Slightly lighter text for description */
  margin-bottom: 40px;
  max-width: 1100px; /* Limit width for readability */
  margin-left: auto;
  margin-right: auto;
}

.plug-into-hive__description strong {
  font-weight: 700;
}

.plug-into-hive__button {
  display: inline-block; /* Allows padding and margin, but respects text alignment */
  background-color: #081935; /* Dark button background */
  color: #ffffff; /* White text on button */
  padding: 15px 30px;
  border-radius: 25px;
  text-decoration: none; /* Remove underline for links */
  font-weight: 700;
  font-size: 1.1em;
  font-family: "Space Grotesk", Arial, Helvetica, sans-serif;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  margin-bottom: 20px;
  cursor: pointer;
}
@media (max-width: 39.9375em) {
  .plug-into-hive__button {
    font-size: 0.8em;
  }
}

.plug-into-hive__button:hover {
  background-color: #2d3748; /* Slightly lighter on hover */
  transform: translateY(-2px); /* Slight lift effect */
}

/* Responsive adjustments for larger screens */
@media (min-width: 768px) {
  .plug-into-hive {
    text-align: left; /* Align content to left on larger screens */
  }
  .plug-into-hive__description {
    text-align: left; /* Align description to left */
    margin-left: 0; /* Remove auto margin for left alignment */
    margin-right: auto;
  }
}

/*# sourceMappingURL=home.css.map */