:root {
  /* Primary Branding Colors */
  --primary-color: #091147; /* Main Branding */
  --primary-light-blue: #4d54f6; /* Lighter Blue */
  --primary-light-purple: #8186f9; /* Even Lighter Towards Purple */

  /* Secondary Skin-ish/Red-Orange Colors */
  --secondary-light-red: #fe9a8a; /* Light Red/Skin-ish Color */
  --secondary-dark-orange: #ff6642; /* Bit Darker Towards Orange */
}

.main-background {
  background: var(--primary-color);
  width: 100vw; /* Ensure it covers the full viewport width */
  margin-left: calc(-50vw + 50%); /* Center the content */
}

.secondary-background {
  background: var(--primary-light-purple);
  width: 100vw; /* Ensure it covers the full viewport width */
  margin-left: calc(-50vw + 50%); /* Center the content */
}

body {
  font-family: "Poppins", sans-serif;
  background: var(--primary-color);
  color: white;
}

.container {
  max-width: 1200px;
  margin: auto;
  padding: 20px;
}

.container-small {
    max-width: 1000px;
}

.header {
  color: var(--primary-color); /* Example of using primary color */
  text-align: center;
}

.subheader {
  color: #cccccc;
  text-align: left;
  margin-top: 20px;
  margin-bottom: 20px;
  max-width: 400px;
  line-height: 1.2;
}

.buttons {
  text-align: left;
  margin: 0;
}

.buttons a {
    margin-left: 0;
}

.button {
  display: inline-block;
  padding: 10px 20px;
  margin: 0 10px;
  border: none;
  border-radius: 5px;
  text-decoration: none;
  color: white;
  font-weight: bold;
}

.app-store {
  background-color: var(
    --primary-light-blue
  ); /* Example of using a primary variant */
}

.web-demo {
  background-color: var(
    --secondary-light-red
  ); /* Example of using a secondary color */
}

.waves {
  position: relative;
  width: 100vw;
  margin-bottom: -100px;
  z-index: 1;
}

.illustration {
  background: url("/dreamgaze-illustration.jpg") no-repeat center center;
  background-size: cover;
  height: 300px;
  border-radius: 15px;
  position: absolute;
  top: -13vh;
  right: 20vw;
  z-index: -1;
}

.wave {
  width: 100%;
  background-size: cover;
}

.wave1 {
  background: var(--primary-color);
  bottom: 75px;
}

.wave2 {
  background: var(--primary-light-blue);
  bottom: 50px;
}

.wave3 {
  background: var(--primary-light-purple);
  bottom: 25px;
}

.wave4 {
  background: var(--secondary-dark-orange);
}

.main {
  position: relative;
  z-index: 2;
}

.poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.poppins-thin-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.poppins-extralight-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.poppins-light-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.poppins-extrabold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.poppins-black-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: italic;
}

h1 {
  font-size: 4em;
  max-width: 50vw;
}

.logo-small {
  width: 130px;
  padding: 1em;
  display: flex;
  align-items: flex-start;
}

.cta {
  padding: 4em;
}

.cta .logo {
  width: 200px;
}

.cta h1 {
  margin-top: 0.3em;
}

/* Row */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.col-small {
  max-width: 300px;
  font-size: 20px;
  line-height: 1.3;
  margin-top: 9em;
}

/* Column */
.col {
  flex: 1; /* Make the column occupy all available space */
  padding-right: 15px; /* Add spacing between columns */
  padding-left: 15px; /* Add spacing between columns */
}

/* Card style for better visualization */
.card {
  background-color: var(--primary-light-blue);
  color: white;
  padding: 20px;
  margin-bottom: 20px; /* Space between cards */
  border-radius: 4px; /* Optional: rounded corners */
}

.app-image {
  width: 100%; /* Make the app image responsive */
  max-width: 800px; /* Maximum size of the app image */
  height: auto; /* Keep the aspect ratio of the image */
  display: block; /* Block-level image for better control */
  margin-left: auto; /* Center the image horizontally */
  margin-right: auto; /* Center the image horizontally */
}

.footer {
    padding: 2em;
}

.footer p {
    line-height: 2em;
}

.footer a {
    color: var(--primary-light-purple)
}

.footer-title {
    font-size: 1.5em;
    margin-bottom: 1em;
}