body {
  font-family: "Bakbak One", serif;
  min-height: 100vh;
}

p {
  font-family: "Poppins", serif;
}

.bg-gradient {
  background-image: linear-gradient(180deg, #d8e4ea, #edf2f900) !important;
  z-index: -1;
  min-height: 100vh;
}

.hero-section {
  padding: 100px 0;
}

.hero-text h1 {
  font-size: 3.2rem;
}

.feature-text .title {
  font-size: 3.4rem;
}

.featur-icon svg {
  width: 100%;
  max-width: 35px;
}

.featur-icon {
  width: 50px;
  height: 50px;
}

@media screen and (max-width:1200px) {
  .hero-text h1 {
    font-size: 2.4rem;
  }
}

@media screen and (max-width:1200px) {
  .feature-text .title {
    font-size: 2.7rem;
  }
}

@media screen and (max-width:1200px) {
  .hero-section {
    padding: 100px 0 70px;
  }
}

@media screen and (max-width:578px) {
  .hero-section {
    padding: 80px 0 40px;
  }
}

@media screen and (max-width:578px) {
  .container {
    max-width: 95%;
  }
}

@media screen and (max-width:578px) {
  .hero-text h1 {
    font-size: 2rem;
  }
}

@media screen and (max-width:578px) {
  .feature-text .title {
    font-size: 2rem;
  }
}

@media screen and (max-width:390px) {
  .hero-section {
    padding: 80px 0 30px;
  }
}

@media screen and (max-width:390px) {
  .hero-text h1 {
    font-size: 1.8rem;
  }
}

.navbar {
  z-index: 1050;
}