:root {
  --base: #181e26;
  --primary: #4882f7;
  --secondary: #9072ed;
  --tertiary: #3dcaea;
  --danger: #ff8f43;
  --warning: #9072ed;
  --success: #44aa61;
  --gray: #6b7280;
  --dark: #181e26;
  --white: #fff;
  --h1_color: #333;
  --h2_color: #333;
  --h3_color: #333;
  --h4_color: #333;
  --h5_color: #333;
  --h6_color: #181e26;
  --base-50: #9fa5ad;
  --base-100: #90969e;
  --base-200: #727880;
  --base-300: #545a62;
  --base-400: #363c44;
  --base-500: #181e26;
  --base-600: #000008;
  --base-700: #000;
  --base-800: #000;
  --base-900: #000;
  --primary-50: #cfffff;
  --primary-100: #c0faff;
  --primary-200: #a2dcff;
  --primary-300: #84beff;
  --primary-400: #66a0ff;
  --primary-500: #4882f7;
  --primary-600: #2a64d9;
  --primary-700: #0c46bb;
  --primary-800: #00289d;
  --primary-900: #000a7f;
  --secondary-50: #fff9ff;
  --secondary-100: #ffeaff;
  --secondary-200: #eaccff;
  --secondary-300: #ccaeff;
  --secondary-400: #ae90ff;
  --secondary-500: #9072ed;
  --secondary-600: #7254cf;
  --secondary-700: #5436b1;
  --secondary-800: #361893;
  --secondary-900: #180075;
  --tertiary-50: #c4ffff;
  --tertiary-100: #b5ffff;
  --tertiary-200: #97ffff;
  --tertiary-300: #79ffff;
  --tertiary-400: #5be8ff;
  --tertiary-500: #3dcaea;
  --tertiary-600: #1faccc;
  --tertiary-700: #018eae;
  --tertiary-800: #007090;
  --tertiary-900: #005272;
  --success-50: #cbffe8;
  --success-100: #bcffd9;
  --success-200: #9effbb;
  --success-300: #80e69d;
  --success-400: #62c87f;
  --success-500: #44aa61;
  --success-600: #268c43;
  --success-700: #086e25;
  --success-800: #005007;
  --success-900: #003200;
  --warning-50: #fff9ff;
  --warning-100: #ffeaff;
  --warning-200: #eaccff;
  --warning-300: #ccaeff;
  --warning-400: #ae90ff;
  --warning-500: #9072ed;
  --warning-600: #7254cf;
  --warning-700: #5436b1;
  --warning-800: #361893;
  --warning-900: #180075;
  --danger-50: #ffffca;
  --danger-100: #ffb;
  --danger-200: #ffe99d;
  --danger-300: #ffcb7f;
  --danger-400: #ffad61;
  --danger-500: #ff8f43;
  --danger-600: #e17125;
  --danger-700: #c35307;
  --danger-800: #a53500;
  --danger-900: #871700;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --dark-50: #9fa5ad;
  --dark-100: #90969e;
  --dark-200: #727880;
  --dark-300: #545a62;
  --dark-400: #363c44;
  --dark-500: #181e26;
  --dark-600: #000008;
  --dark-700: #000;
  --dark-800: #000;
  --dark-900: #000;
  --white-50: #fff;
  --white-100: #fff;
  --white-200: #fff;
  --white-300: #fff;
  --white-400: #fff;
  --white-500: #fff;
  --white-600: #fff;
  --white-700: #fff;
  --white-800: #fff;
  --white-900: #fff;
}

.landing-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

* {
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
}

.landing-header {
  width: 100%;
  height: 89px;
  background-color: var(--white);
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing-header-left-section{
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.header-title{
  z-index: 100;
  margin-left: 20px;
  height: 89px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.landing-header-left-section:hover .header-line {
  background-color: rgb(59 130 246);
  animation: line 0.4s ease-in-out forwards;
  height: 2px;
}
.header-text{
  font-size: 20px;
  font-weight: 500;
  color: var(--h1_color);
}

@keyframes line {
  0% {
      width: 0%;
  }
  25% {
      width: 25%;
  }
  50% {
      width: 50%;
  }
  75% {
      width: 75%;
  }
  100% {
      width: 100%;
  }
}


.landing-header img {
  margin: auto auto auto 20px;
  width: 50px;
  height: 50px;
  color: var(--h1_color);
}

.landing-header-right-section {
  margin: auto 20px auto auto;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 5%;
}

.landing-header-right-section svg {
  font-size: 35px;
  color: var(--h6_color);
}

.landing-header-search-icon {
  margin-right: 10px;
}

.landing-hero {
  width: 100%;
  height: 100%;
  background-color: var(--white);
  display: flex;
}

.hero-left {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hero-left p {
  width: 83%;
  margin-top: -10%;
  font-size: 14px;
  color: var(--gray-500)
}

.left-button{
  cursor: pointer;
  user-select: none;
  display: inline-block;
  font-weight: normal;
  text-align: center;
  text-decoration: none;
  background: rgb(72,130,247);
  border-radius: 6px;
  border-width: 0px;
  color: rgb(255,255,255);
  height: auto;
  transition: all .4s ease;
  padding: 6px 18px;
  text-shadow: none;
  width: auto;
  font-size: 24px;
  line-height: 1.5em;
  margin-top: 30px;
}

.hero-right {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-title{
  font-size: 40px;
  font-weight: 500;
  color: black;
  width: 80%;
  word-spacing: 2px;
  margin-top: -25%;
}

#typewriter{
  font-size: 40px;
  font-weight: 500;
  color: var(--gray-500);
  width: 80%;
  /* height: 30%; */
  margin-bottom: 15%;
}

.hero-right-video{
  width: 90%;
  height: auto;
  margin-right: 20px;
  position: relative;
  top: -10%;
}



.features-container {
  display: flex;
  height: max-content;
  width: 100%;
  flex-direction: column;
  align-items: center;
  background-color: var(--primary);
}

.features-header {
  text-align: center;
  margin: 50px 0px 50px 0px;
}

.features-title {
  font-size: 36px;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 10px;
  color: white;
}

.features-subtitle {
  font-size: 18px;
  color: var(--white-300);
}

.features-grid {
  display: grid;
  grid-template: "1fr 1fr 1fr";
  gap: 45px;
    margin-bottom: 50px;
}

.features-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.features-grid-item-icon {
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 50%;
  margin-bottom: 20px;
}

.features-grid-item-icon i {
  margin: auto;
  fill: #666;
  scale: 2;
  color: var(--primary);
}

.features-grid-item-title {
  font-size: 24px;
  font-weight: bold;
  margin: 10px 0px;
    color: white;
}

.features-grid-item-text {
  font-size: 16px;
  color: white;
    margin: 20px 20px;
  }
  
  .cta-container {
    height: max-content;
  }
  
  .cta-content {
    height: 75vh;
    width: 100%;
    background-color: var(--success-100);
    display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .cta-divider {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    fill: var(--success-100);
}
.cta-left {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 5%;
}

.cta-right {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}


.cta-right-video {
  width: 90%;
  height: auto;
  margin-right: 20px;
  position: relative;
}

.cta-title{
  font-size: 32px;
  font-weight: 500;
  color: black;
  width: 80%;
  word-spacing: 2px;
}

.cta-text{
  font-size: 18px;
  font-weight: 500;
  color: var(--gray-500);
  width: 80%;
  word-spacing: 1px;
  margin-top: 20px;
}
/* "how" section */
.how-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--white);
}

.how-header {
  text-align: center;
  margin: 50px 0;
}

.how-title {
  font-size: 36px;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 10px;
  color: var(--h1_color);
}

.how-subtitle {
  font-size: 18px;
  color: var(--gray-500);
}

.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 45px;
  margin-bottom: 50px;
}

.how-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.how-grid-item-icon {
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 50%;
  margin-bottom: 20px;
}

.how-grid-item-icon i {
  margin: auto;
  fill: #666;
  scale: 2;
  color: var(--h6_color);
}

.how-grid-item-title {
  font-size: 24px;
  font-weight: bold;
  margin: 10px 0;
  color: var(--h1_color);
}

.how-grid-item-text {
  font-size: 16px;
  color: var(--gray-500);
  margin: 20px 20px;
}

.get-in-touch-container {
  width: 100%;
  height: 100vh;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.get-in-touch-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.get-in-touch-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.form-group {
  margin-bottom: 20px;
  width: 100%;
  height: 50%;
}

input,
textarea {
  width: 100%;
  font-size: 16px;
  padding: 10px;
  font-family: 'Roboto', sans-serif;
  border: 1px solid #ccc;
  border-radius: 4px;
  min-height: 15px;
}

select {
  width: 110%;
  font-size: 16px;
  padding: 10px;
  font-family: 'Roboto', sans-serif;
  border: 1px solid #ccc;
  border-radius: 4px;
  min-height: 15px;
}

#company-roles:focus {
  outline: none;
  border-color: #007bff;
}

input:focus {
  outline: none;
  border-color: #007bff;
}

textarea {
  height: 120px;
}

textarea:focus {
  outline: none;
  border-color: #007bff;
}

button[type='submit'] {
  display: inline-block;
  padding: 10px 20px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: 110%;
}

button[type='submit']:hover {
  background-color: #0056b3;
}