@import url("./util2.css");

:root {
  --primary-color: #ffe600;
  --secondary-color: #fff;
}

body {
  background-image: url("../img/new-home-background-2.png");
  background-size: cover;
  background-position: center;
}

.main {
  padding-bottom: 50px;
}

.p-40 {
  padding: 40px;
}

.fs-18 {
  font-size: 18px;
}

.fs-32 {
  font-size: 32px;
}

.fs-64 {
  font-size: 64px;
}

.line-h-43 {
  line-height: 43px;
}

.mt-25 {
  margin-top: 25px;
}

.mr-40 {
  margin-right: 40px;
}

.px-38 {
  padding-right: 38px;
  padding-left: 38px;
}

.color-primary {
  color: var(--primary-color);
}

.color-secondary {
  color: var(--secondary-color);
}

.color-dark-blue {
  color: #003478;
}

.bg-primary {
  background-color: var(--primary-color);
}

.max-w-1193 {
  max-width: 1193px;
}

.hero-img-cont {
  position: absolute;
  top: clamp(110px, 17%, 160px);
  left: 0;
  right: 0;
  max-width: 848px;
  width: calc(100% - 106px);
  margin: auto;
  z-index: -1;
}

.hero-img {
  position: absolute;
  width: 100%;
  object-fit: contain;
}

.texts {
  margin-top: clamp(281px, 50%, 610px);
}

.btn-learn-more {
  width: 262px;
  height: 53px;
  line-height: 53px;
  font-size: 18px;
  font-family: "bold";
  color: #003478;
  background-color: var(--primary-color);
  border-radius: 100px;
  margin-right: 40px;
}

@media (max-width: 1000px) or (max-height: 1088px) {
  .fs-16-m {
    font-size: 16px;
  }

  .fs-28-m {
    font-size: 28px;
  }

  .line-h-22-m {
    line-height: 22px;
  }

  .line-h-32-m {
    line-height: 32px;
  }
}

@media screen and (max-width: 450px) {
  .p-20-s {
    padding: 20px;
  }

  .fs-14-s {
    font-size: 14px;
  }

  .flex-col-s {
    flex-direction: column;
  }

  .hero-img-cont {
    top: clamp(110px, 12%, 160px);
  }

  .btn-learn-more {
    width: 200px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    margin-right: 0px;
    margin-bottom: 40px;
  }
}

@media screen and (max-width: 410px) {
  .px-20-xs {
    padding-right: 20px;
    padding-left: 20px;
  }
}