@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap");

/* Apply the font globally */
body {
  font-family: "Poppins", sans-serif !important;
  background-color: #ffffff !important; /* #D4E8D2 with 10% transparency */
  /* Default text color */
}

h1 {
  font-size: 3.6rem !important;
  font-weight: bolder !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2) !important;
  color: #112781 !important;
}

h3 {
  font-size: 2.8rem !important;
  font-weight: 600 !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2) !important;
  color: #112781 !important;
}
h5 {
  font-size: 1.9rem !important;
  font-weight: 400 !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2) !important;
  color: #112781 !important;
}

h4 {
  font-size: 1.8rem !important;
  font-weight: bolder !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2) !important;
  color: #112781 !important;
}

#logo {
  width: 50%;
  /* margin-left: -50px; */
}
p {
  font-size: 2.2rem !important;
  font-weight: 500;
  color: #112781 !important;
}

.box {
  border: 3px solid #b9b9b9;
  /* border-right: 6px solid #b9b9b9;
  border-bottom: 6px solid #b9b9b9; */
  background-color: #fff;
  border-radius: 25px;
  padding: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 0px;
  padding-left: 20px;
  margin-right: 50px;
  cursor: pointer;
}

@media only screen and (min-width: 200px) and (max-width: 575px) {
  #arrow {
    width: 30px;
    margin-left: 0px;
  }
  #first-box {
    width: 100% !important;
  }
  #box-img {
    width: 50% !important;
  }
  #hero-img {
    width: 100% !important;
  }
  button {
    font-size: 1.2rem !important;
    width: 100% !important;
  }

  h1 {
    font-size: 2.2rem !important;
  }
  h3 {
    font-size: 1.5rem !important;
  }
  h5 {
    font-size: 1.5rem !important;
  }
  .box {
    margin-right: 0px !important;
  }
  p {
    font-size: 18px !important;
  }

  h6 {
    font-size: 16px !important;

    padding-top: 40px !important ;
  }
  #mobile-top-img {
    width: 20% !important;
  }
  #arrow-top-img {
    width: 20% !important;
    height: 10% !important;
  }
  #box-img {
    width: 25% !important;
  }
  #box-2nd-img {
    width: 25% !important;
  }
}

@media only screen and (min-width: 1600px) and (max-width: 1800px) {
  h1 {
    font-size: 3rem !important;
  }
  h5 {
    font-size: 1.6rem !important;
  }
  h3 {
    font-size: 2.2rem !important;
  }
  #first-box {
    width: 85% !important;
  }
  #box-img {
    width: 12% !important;

    margin-right: 10px !important;
  }
  #box-img-2 {
    width: 23% !important;
    height: 100% !important;

    margin-right: 10px !important;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1599px) {
  h1 {
    font-size: 2.7rem !important;
  }
  h5 {
    font-size: 1.2rem !important;
  }
  h3 {
    font-size: 1.8rem !important;
  }
  #first-box {
    width: 90% !important;
  }
  #box-img {
    width: 12% !important;

    margin-right: 10px !important;
  }
  #box-img-2 {
    width: 23% !important;
    height: 100% !important;

    margin-right: 10px !important;
  }
  #mobile-top-img {
    width: 80px !important;
  }
  #arrow-top-img {
    width: 75px !important;
    height: 60px !important;
  }
  #box-2nd-img {
    width: 122px !important;
    height: 45px !important;
  }
}