@font-face {
  font-family: 'Figra';
  font-style: normal;
  src:url('./assets/fonts/Figra.ttf') format('truetype');
}

@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 400; /* Explicitly define Regular as 400 */
  src: url('./assets/fonts/AlbertSans/AlbertSans-Regular.otf') format('opentype');
}

@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 500; /* Explicitly define Medium as 500 */
  src: url('./assets/fonts/AlbertSans/AlbertSans-Medium.otf') format('opentype');
}

@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 600; /* Add SemiBold for font-weight: 600 */
  src: url('./assets/fonts/AlbertSans/AlbertSans-SemiBold.otf') format('opentype');
}

@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 900; /* Black for font-weight: 900 */
  src: url('./assets/fonts/AlbertSans/AlbertSans-Black.otf') format('opentype');
}

* {
  margin: 0;
  padding: 0;
  /*outline: 1px solid red;*/
}

:root {
  /*default colors*/
  --primary-background-color: #FFFFFF;
  --primary-text-color: #000000;

  /*dark background light text for footer and download buttons*/
  --secondary-text-color: #FFFFFF;
  --secondary-background-color: #002922;

  --highlight-button-color: #CBDAF5;

  --font-size-base: 16px;
  --padding: 1rem;
  --header-height: 100px;
  --footer-height: 100px;

  --page-margin: 160px;
  --maring-top-bottom: 96px;
}


@media (max-width: 1512px) {
  :root {
    --page-margin: 80px; /* Smaller margins on small screens */
  }
}

@media (max-width: 1024px) {
  :root {
    --page-margin: 40px; /* Even smaller margins for mobile */
  }
}

@media (max-width: 390px) {
  :root {
    --page-margin: 16px; /* Even smaller margins for mobile */
    --maring-top-bottom: 64px;
  }
}

p.h1Style {
  font-size: 64px;
}

p.h2Style {
  font-size: 32px;
}

p.h3Style {
  font-size: 24px;
}

.bodyStyle {
  font-size: 18px;
}

.cta {
  font-size : 16px;
}

@media (max-width: 1024px) {
  p.h1Style {
    font-size: 48px;
  }
  p.h2Style {
    font-size: 24px;
  }
  p.h3Style {
    font-size: 18px;
  }
  .bodyStyle {
    font-size: 16px;
  }
  .cta {
    font-size : 16px;
  }
}

@media (max-width: 390px) {
  p.h1Style {
    font-size: 40px;
  }
  p.h2Style {
    font-size: 18px;
  }
  p.h3Style {
    font-size: 16px;
  }
  .bodyStyle {
    font-size: 16px;
  }
}

a {
  text-decoration: none;
}

a.page-nav-link-mobile:visited{
  color: purple !important; /* Replace with your desired color */
}

a.page-nav-link-header:visited {
  color: var(--primary-text-color) !important;
}

a.footer-link:visited {
  color: #9FBEEA !important; /* Replace with your desired color */
}

a.page-nav-link:visited {
  color: #9FBEEA !important; /* Replace with your desired color */
}

a.email-link {
  color: var(--secondary-text-color); /* Match general 'a' style */
  text-decoration: none; /* Match general 'a' style */
}

/* Ensure visited state for email link */
.email-link:visited {
  color: #9FBEEA !important; /* Match a:visited */
}

ul {
  list-style: disc;
  margin: 0;
  padding: 0;
  gap: 16px
}

li {
  display: list-item;
}

body {
  min-height: 100vh;
  font-family: 'Albert Sans', sans-serif;
  font-size: var(--font-size-base);
}

.join-the-waitlist-header {
  font-family: 'Albert Sans', sans-serif;
  font-weight: 600;
  font-size: 16px;
  padding: 8px 24px;
  background: var(--secondary-background-color);
  color: var(--secondary-text-color);
  /* prevent weird shadowy artifact on safari */
  overflow: hidden;
  border:none;

  height: 48px;
  border-radius: 16px;
}

.join-the-waitlist {
  flex: 0 0 auto;
  height: 48px;
  font-family: 'Albert Sans', sans-serif;
  font-weight: 600;
  border-radius: 16px;
  padding: 8px 16px;
  background: var(--secondary-background-color);
  color: var(--secondary-text-color);
  /* prevent weird shadowy artifact on safari */
  overflow: hidden;
  border:none;
}

.join-size-top {
  width: 197px;
  align-self: flex-start;
}

.join-size-others{
  width: 197px;
}

@media (max-width: 768px) {
  .join-size-top {
    align-self: center;
  }
}

@media (max-width: 390px) {
  .join-size-top {
    width: 90%;
    align-self: center;
  }

  .join-size-others{
    width: 260px;
  }
}
.header::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background-image: url('./assets/PNG/images/gradient_rectangle.png');
  background-size: cover; /* Ensures image covers entire element */
  background-position: center; /* Centers the image */
  background-repeat: no-repeat;
  opacity: 0.4; /* 40% opacity for the background image only */
  z-index: -1; /* Places the background behind the content */
}

.header
{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  height: var(--header-height);
  background-color: var(--primary-background-color);
  position: fixed;
  top: 0;
  left: 0;
  box-sizing: border-box;
  align-items:  center;
  z-index: 1000; /* ensure it stays on top */
}

.header-download{
  margin-right: 100px;
}

.mobile-header::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background-image: url('./assets/PNG/images/gradient_rectangle.png');
  background-size: cover; /* Ensures image covers entire element */
  background-position: center; /* Centers the image */
  background-repeat: no-repeat;
  opacity: 0.4; /* 40% opacity for the background image only */
  z-index: -1; /* Places the background behind the content */
}

.mobile-header
{
  display: none;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  height: var(--header-height);
  background-color: var(--primary-background-color);
  position: fixed;
  top: 0;
  left: 0;
  box-sizing: border-box;
  align-items:  center;
  z-index: 1000; /* ensure it stays on top */
}

.mobile-menu-button {
  display: none;
  font-size: 32px;
  cursor: pointer;
  user-select: none;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1100;
  margin-right: 16px;
}

/* Mobile dropdown menu (hidden by default) */
.mobile-dropdown {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 60px;
  right: 0;
  bottom: 0;          /* stretches box to the bottom */
  background-color: #FFFFFF;
  border-radius: 16px;
  width: 200px;
  overflow: auto;   /* ensures any contents are clipped and not shown. */
  transition: transform 0.3s ease;
  transform: translateX(100%);  /* start off-screen to the right */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

/* When open */
.mobile-dropdown.open {
  transform: translateX(0);  /* slide in to visible */
  max-height: 100%;
}

/* Responsive rules */
@media (max-width: 886px) {
  .header {
    display: none;
  }

  .mobile-header {
    display: flex;
  }

  .mobile-menu-button {
    display: block;
  }

}

.page-nav-link-mobile {
  display: flex;
  margin-top: 20px;
  margin-bottom: 20px;
  justify-content: flex-end;
  text-align: right;
  padding-right: 20px;       /* Optional spacing from the edge */
  flex: none;
  color: #002922;
}

.page-nav-links {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  max-width: 800px;
  margin: 0 40px;
  flex: 1;
  color: var(--primary-text-color);
}

.page-nav-link-header{
  color: var(--primary-text-color);
  font-weight: 400;
  margin: 0 10px;
}

.page-nav-link{
  color: var(--primary-text-color);
  font-weight: 400;
  margin: 0 10px;
}

.content{
  display:flex;
  flex-direction: column;

  align-items: center;


  overflow-y: auto; /*hide unhide the scrollbar*/
  padding-top: var(--header-height);
  min-height: calc(100vh - var(--header-height)); /* Ensure content fills viewport */
}

#explanation {
  display: flex;
  flex: auto;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  width: calc(100% - calc(var(--page-margin) * 2));
  max-width: 1800px; /* Cap the width */
  /* Center horizontally */
  margin: var(--maring-top-bottom) auto;
  gap: 40px;
  padding: 0;
  flex-wrap: nowrap;
}

@media (max-width: 768px) {
  #explanation {
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;

    justify-content: center;
    text-align: center;
  }
}


#explanation-section{
  display:flex;
  flex-direction: column;
  gap: 20px;
  position:relative;
  top: -30px;
}


@media (max-width: 390px) {
  #explanation-section {
    align-items: flex-start;
  }
}

.explanation-images {
  display: grid;
  grid-template-areas: "stack";
  width: 100%;
  max-width: 477px; /* max width for the teaser */
  justify-items: center;
  aspect-ratio: 477 / 361; /* keeps height proportional */
}

.explanation-images img {
  grid-area: stack;
  width: 100%;
  height: 100%;
  object-fit: contain; /* maintains proportions */
}

.explanation-images img:first-child {
  z-index: 2;
}

.explanation-images img:last-child {
  z-index: 1;
  /* scales with container but never exceeds 322px */
  width: clamp(0%, 67.5%, 322px); /* 322 / 477 = 67.5% */
  height: auto;
}


#explanation-header {
  font-family: 'Albert Sans', sans-serif;
  font-weight: 900;
}

@media (max-width: 1480px) {
  #explanation-header {
    width: 400px;
  }
}


@media (max-width: 768px) {
  #explanation-header {
    align-self: center;
  }
}

@media (max-width: 390px) {
  #explanation-header {
    text-align: left;
    width: 250px;
  }
}

#explanation-section h1 {
  font-size: clamp(48px, 7.5vw, 64px); /* 7.5% of of viewport width */
}

#gradient-page-break {
  margin-top: 100px;

  width: 100%;
  height:21px;
  opacity: 0.8;
}

/* the before allows it to apply the background with opacity */
#our-mission::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('./assets/PNG/images/gradient_rectangle.png');
  background-size: cover; /* Ensures image covers entire element */
  background-position: center; /* Centers the image */
  background-repeat: no-repeat;
  opacity: 0.1; /* 40% opacity for the background image only */
  z-index: -1; /* Places the background behind the content */
}

#our-mission {
  display: flex;
  width: 100%;
  height: 100%;
  padding-top: var(--maring-top-bottom);
  padding-bottom: var(--maring-top-bottom);

  flex-direction: column;
  align-items: center;
  position: relative; /* Required to position the pseudo-element */
  background: none; /* Remove the background from the main element */


}

#our-mission-header {
  font-family: 'Figra', sans-serif;
  font-weight: 700;
  justify-content: center;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

#we-care-about-health{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: var(--maring-top-bottom);
  padding-bottom: var(--maring-top-bottom);
  background-color: #CBDAF533;
  width:  100%;
  gap: 20px;
}

#join-offer-box{
  display: flex;
  flex-direction: column;
  align-self: center;
  align-items: center;
  text-align: center;
  width: calc(100% - 32px); /* subtract 16px left + 16px right margin manually */
  max-width: 775px;
  max-height: 229px;
  flex-shrink: 1; /* Allow shrinking when space is constrained */
  box-sizing: border-box;
  gap: 15px;
  border-radius: 20px;
  background-color: white;
  padding: 32px;
  border: 1px solid var(--highlight-button-color);
}

#how-it-works {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: calc(100% - calc(var(--page-margin) * 2));
  margin: 0 var(--page-margin);
  margin-top: var(--maring-top-bottom);
  margin-bottom: var(--maring-top-bottom);
  gap: 40px;
  padding: 0;
}

#how-it-works-header {
  display:  flex;
  flex-direction: column;
  gap: 20px;
  text-align: center;
  align-self: center; /* This centers just this item */
}

#how-it-works-content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 200px;
}

@media (max-width: 1200px) {
  #how-it-works-content {
    gap: 20px; /* Smaller gap */
    flex-direction: column; /* Stack vertically */
    align-items: center;
  }
}

@media (max-width: 480px) {
  #how-it-works-content {
    gap: 20px; /* Smaller gap */
    flex-direction: column; /* Stack vertically */
    align-items: center;
  }
}

#how-it-works-example{
  display:  flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding:var(--padding);
}

.ex_how_it_works
{
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  flex: 0 1 auto;
  width: 100%; /* allow it to fill parent and shrink */
  max-width: 500px;/* still limits size on large screens */
  border-radius: 8px;
  border: 1px solid var(--highlight-button-color);
  background-color: white;
}

.ex_how_it_works:hover {
  background-color: var(--highlight-button-color);
}

.how_it_works_description{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--padding);
}

.how_it_works_icon{
  padding: var(--padding);
  position:relative;
  top: -10px;
}

#highlighted-example
{
  background-color:  var(--highlight-button-color);
}

#our-technology{
  display: flex;
  flex-direction: column;
  padding-top: var(--maring-top-bottom);
  padding-bottom: var(--maring-top-bottom);
  width: 100%;
  align-items: center;
  background-color: #CBDAF533;
  gap: 20px;
}

#our-technology-header{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

#our-technology-description{
  display: flex;
  flex-direction: row;
  align-items:  center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1500px;
  margin-bottom: 60px;
}

.our-technology-card {
  display: flex;
  flex-direction: column;
  background-color: var(--primary-background-color);
  border-radius: 20px;
  border: 1px solid var(--highlight-button-color);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  max-width: 381px;
  max-height: 240px;
  margin: 20px;
  padding: 24px;
  gap: 22px;
}

.our-technology-card_header {
  font-family: 'Albert Sans', sans-serif;
  font-weight: 700;
}

.our-technology-card_sub_header {
  font-family: 'Albert Sans', sans-serif;
  font-weight: 600;
}

.our-technology-card_text {
  font-family: 'Albert Sans', sans-serif;
  font-weight: 400;
}

.description-dark-icon{
  width: 40px;
  height: 40px;
}

#frequently-asked-questions{
  display: flex;
  flex-direction: column;
  width: calc(100% - 64px);
  max-width: 890px;
  padding-top: var(--maring-top-bottom);
  padding-bottom: var(--maring-top-bottom);
}

#frequently-asked-questions-header{
  display: flex;
  justify-content: center;
  text-align: center;
  margin-bottom: 50px;
}

#frequently-asked-questions-dropdowns{
  display:  flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  gap: 16px;
}

.faq-question {
  font-family: 'Albert Sans', sans-serif;
  font-weight: 500;
}

.faq-response {
  display: none;
  font-family: 'Albert Sans', sans-serif;
  font-weight: 400;
  font-size: 20px;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 32px;
  gap: 15px;
  border: 1px solid var(--highlight-button-color);
}

details {
  width: 100%;
  max-width: 1200px;
  background-color: white; /* default background */
  margin-bottom: 1rem;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Drop shadow x, y, blur radius, alpha color */
}

summary {
  cursor: pointer;
  font-weight: normal;
}

.faq-item summary {
  font-family: 'Albert Sans', sans-serif;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: var(--padding);
  list-style: none; /* Remove default arrow in Firefox */
  user-select: none;
}

/* Hide default arrow in Chrome/Safari */
.faq-item summary::-webkit-details-marker {
  display: none;
}

/* use before/after to move the carrot's position */
.faq-item summary::after {
  content: "";
  font-weight: normal;
  margin-left: auto;

  display: inline-block;
  width: 16px;   /* set to your image width */
  height: 16px;  /* set to your image height */
  background: url("assets/PNG/icons/dropdown_arrow.png") no-repeat center center;
  background-size: contain; /* makes it scale nicely */
}

details.faq-item:hover {
  background-color: var(--highlight-button-color);
}

/* Rotate arrow when open */
.faq-item[open] summary::after {
  transform: rotate(180deg);
  transition: transform 0.3s;
}

.faq-item[open] {
  /*background-color: var(--highlight-button-color);*/
  background-color: rgba(203, 218, 245, 0.5); /* Highlight color with opacity */
}

.faq-item[open] + .faq-response {
  display: block;
  width: 100%;
}

/* the before allows it to apply the background with opacity */
#ready-to-transform::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('./assets/PNG/images/gradient_rectangle.png');
  background-size: cover; /* Ensures image covers entire element */
  background-position: center; /* Centers the image */
  background-repeat: no-repeat;
  opacity: 0.4; /* 40% opacity for the background image only */
  z-index: -1; /* Places the background behind the content */
}

#ready-to-transform {
  display: flex;
  font-family: 'Albert Sans', sans-serif;
  width: 100%;
  height: 100%;
  padding-top: var(--maring-top-bottom);
  padding-bottom: var(--maring-top-bottom);
  flex-direction: column;
  align-items: center;
  position: relative; /* Required to position the pseudo-element */
  background: none; /* Remove the background from the main element */
}

#ready-to-transform-header{
  font-family: 'Figra', sans-serif;
  font-weight: 700;
  justify-content: center;
  text-align: center;
  margin-bottom: 20px;
  margin-left: 16px;
  margin-right: 16px;
}

#ready-to-transform-button {
  align-content: center;
  margin-top: 20px;
}

.footer {
  background: var(--secondary-background-color);
  color: var(--secondary-text-color);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  padding: var(--maring-top-bottom) 16px;
  width: 100%;
  /*min-height : var(--footer-height);*/
}

.footer-entry{
  display: flex;
  flex-direction: column;
  max-width: 200px;
  margin: 0 20px;
  gap: 10px;
}

@media (max-width: 600px) {
  .footer {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content:left;
    padding-top: calc(var(--maring-top-bottom) * 0.5);
    padding-bottom: calc(var(--maring-top-bottom) * 0.5);
  }
  .footer-entry{
    margin: 20px 20px;
    width: 100%;
    max-width: 240px;
  }
}

.footer-link{
  color: var(--secondary-text-color)
}

html { scroll-behavior: smooth; }

/* adjust auto scroll to link sections to take into account header */
#how-it-works,
#our-technology,
#explanation,
#frequently-asked-questions,
#ready-to-transform {
  scroll-margin-top: var(--header-height); /* 100px */
}