@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400&display=swap");
* {
  font-family: Poppins, Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  text-decoration: none;
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 60px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes downarrow {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(0.4em);
    opacity: 0;
  }
}
/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #34A2B8 rgb(217, 217, 217);
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: rgb(217, 217, 217);
}

*::-webkit-scrollbar-thumb {
  background-color: #34A2B8;
  border-radius: 10px;
}

.fadeInUp {
  opacity: 1;
  animation-name: fadeInUp;
  -webkit-animation-name: fadeInUp;
  animation-duration: 1s;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: both;
}

.maincontainer {
  width: 100%;
}

.container {
  margin: 0 auto;
  width: 80%;
}

@media screen and (max-width: 480px) {
  .container {
    margin: 0 auto;
    width: 95%;
  }
}
.navbar-brand img {
  height: 30px;
}

body {
  background: #fff;
  display: flex;
  flex-direction: column;
  margin: 0;
}
body .navbar {
  width: 100%;
  display: flex;
  background: #fff;
  justify-content: center;
  position: sticky;
  top: 0;
  z-index: 5;
  overflow: hidden;
  box-shadow: 1px 6px 7px -6px rgba(0, 0, 0, 0.41);
  -webkit-box-shadow: 1px 6px 7px -6px rgba(0, 0, 0, 0.41);
  -moz-box-shadow: 1px 6px 7px -6px rgba(0, 0, 0, 0.41);
}
body .navbar img {
  display: flex;
  height: 30px;
  padding: 15px;
  transition: 0.2s;
  float: left;
}
body .navbar img:hover {
  transform: scale(1.05);
  transition: 0.2s;
}
body .navbar #nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 45%;
}
body .navbar #nav-links a {
  display: flex;
  margin-right: 20px;
  color: #353535;
  font-size: 1rem;
  transition: 0.1s;
}
body .navbar #nav-links a:hover {
  color: rgb(32, 180, 180);
  transition: 0.1s;
  margin-bottom: 5px;
}
body #home {
  padding-top: 80px;
  padding-bottom: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
body #home .home-main {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80%;
}
body #home .home-main .left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 49%;
}
body #home .home-main .left h1 {
  font-size: 5rem;
  color: #222;
  text-align: center;
}
body #home .home-main .left #learnmore {
  border: 4px solid #34A2B8;
  border-radius: 12px;
  padding: 20px;
  color: #34A2B8;
  font-size: 1.5rem;
  transition: 0.2s;
  padding: 15px;
}
body #home .home-main .left #learnmore:hover {
  background: #34A2B8;
  color: white;
  transition: 0.2s;
  border: 4px solid #353535;
}
body #home .home-main .right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 49%;
  overflow: hidden;
}
body #home .home-main .right img {
  width: 500px;
  max-width: 80%;
  height: auto;
  animation-delay: 0.9s;
}
body #home a {
  overflow: hidden;
}
body #home a i {
  font-size: 3rem;
  color: #353535;
  margin-top: 50px;
  padding-bottom: 20px;
  animation: downarrow 1.5s;
  animation-iteration-count: infinite;
}
body #features, body #about, body #contact {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 80px;
  padding-bottom: 60px;
}
body #features h1, body #about h1, body #contact h1 {
  text-align: center;
  font-size: 3.5rem;
  color: #353535;
  animation: fadeInUp 0.5s;
  margin-bottom: 30px;
}
body #features .feature-container, body #about .feature-container, body #contact .feature-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
body #features .feature-container .feature, body #about .feature-container .feature, body #contact .feature-container .feature {
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  width: 100%;
}
body #features .feature-container .feature .mr-80, body #about .feature-container .feature .mr-80, body #contact .feature-container .feature .mr-80 {
  margin-right: 80px !important;
}
body #features .feature-container .feature .ml-80, body #about .feature-container .feature .ml-80, body #contact .feature-container .feature .ml-80 {
  margin-left: 80px !important;
}
body #features .feature-container .feature .mt-80, body #about .feature-container .feature .mt-80, body #contact .feature-container .feature .mt-80 {
  padding-top: 80px !important;
}
body #features .feature-container .feature .details, body #about .feature-container .feature .details, body #contact .feature-container .feature .details {
  flex-direction: column;
  margin-right: 20px;
  justify-content: center;
  text-align: center;
  align-items: center;
  width: 50%;
}
body #features .feature-container .feature .details h1, body #about .feature-container .feature .details h1, body #contact .feature-container .feature .details h1 {
  color: #353535 !important;
  font-size: 3rem !important;
}
body #features .feature-container .feature .details img, body #about .feature-container .feature .details img, body #contact .feature-container .feature .details img {
  height: 120px;
  width: 120px;
  border-radius: 50%;
  margin-bottom: 10px;
  border: 4px solid #81C14B;
}
body #features .feature-container .feature .details i, body #about .feature-container .feature .details i, body #contact .feature-container .feature .details i {
  padding: 20px;
  font-size: 4rem;
  text-align: center;
}
body #features .feature-container .feature .details .fa-comments, body #about .feature-container .feature .details .fa-comments, body #contact .feature-container .feature .details .fa-comments {
  color: #81C14B;
}
body #features .feature-container .feature .details .fa-magnifying-glass, body #about .feature-container .feature .details .fa-magnifying-glass, body #contact .feature-container .feature .details .fa-magnifying-glass {
  color: #34A2B8;
}
body #features .feature-container .feature .details .fa-calendar, body #about .feature-container .feature .details .fa-calendar, body #contact .feature-container .feature .details .fa-calendar {
  color: turquoise;
}
body #features .feature-container .feature .details .fa-bell, body #about .feature-container .feature .details .fa-bell, body #contact .feature-container .feature .details .fa-bell {
  color: #35827C;
}
body #features .feature-container .feature .details h1, body #about .feature-container .feature .details h1, body #contact .feature-container .feature .details h1 {
  font-size: 2rem;
  padding-top: 0;
  margin: 0;
  color: #fff;
}
body #features .feature-container .feature .details p, body #about .feature-container .feature .details p, body #contact .feature-container .feature .details p {
  font-size: 1.4rem;
  text-align: left;
  color: #555;
  margin-right: auto;
  margin-left: auto;
}
body #features .feature-container .feature .details .link, body #about .feature-container .feature .details .link, body #contact .feature-container .feature .details .link {
  margin-top: 50px;
}
body #features .feature-container .feature .details .link a, body #about .feature-container .feature .details .link a, body #contact .feature-container .feature .details .link a {
  border: 4px solid #34A2B8;
  border-radius: 12px;
  padding: 20px;
  color: #34A2B8;
  font-size: 1.5rem;
  transition: 0.2s;
  padding: 15px;
}
body #features .feature-container .feature .details .link a:hover, body #about .feature-container .feature .details .link a:hover, body #contact .feature-container .feature .details .link a:hover {
  background: #34A2B8;
  color: white;
  transition: 0.2s;
  border: 4px solid #353535;
}
body #features .feature-container .feature .left, body #about .feature-container .feature .left, body #contact .feature-container .feature .left {
  margin-left: 80px;
}
body #features .feature-container .feature .right, body #about .feature-container .feature .right, body #contact .feature-container .feature .right {
  margin-right: 80px;
}
body #features .feature-container .feature .video-container, body #about .feature-container .feature .video-container, body #contact .feature-container .feature .video-container {
  border-radius: 42px;
  width: 300px;
}
body #features .feature-container .feature .video-container video, body #about .feature-container .feature .video-container video, body #contact .feature-container .feature .video-container video {
  border-radius: 50px;
}
body #features {
  background: #e9e9e9;
}
body #about {
  background: rgb(217, 217, 217);
}
body #about h1, body #about p {
  color: #353535 !important;
}
body #contact {
  display: flex;
  background: #353535;
  padding-bottom: 150px;
}
body #contact h1, body #contact p, body #contact a, body #contact form, body #contact textarea, body #contact input {
  color: #fff !important;
}
body #contact .form-container {
  width: 50%;
  margin-right: auto;
  margin-left: auto;
}
body #contact .form-container form {
  display: flex;
  justify-content: center;
  width: 100%;
}
body #contact .form-container form i {
  font-size: 1.6rem;
}
body #contact .form-container form #form-details {
  display: flex;
  flex-direction: column;
  margin-right: 40px;
}
body #contact .form-container form #form-details .location, body #contact .form-container form #form-details .email, body #contact .form-container form #form-details .phone, body #contact .form-container form #form-details .website, body #contact .form-container form #form-details .warning {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
body #contact .form-container form #form-details .location p, body #contact .form-container form #form-details .location a, body #contact .form-container form #form-details .email p, body #contact .form-container form #form-details .email a, body #contact .form-container form #form-details .phone p, body #contact .form-container form #form-details .phone a, body #contact .form-container form #form-details .website p, body #contact .form-container form #form-details .website a, body #contact .form-container form #form-details .warning p, body #contact .form-container form #form-details .warning a {
  margin: 0 10px;
  color: #444;
}
body #contact .form-container form #form-details .fa-warning {
  color: rgb(255, 0, 55);
  animation: fadeInOut 1.5s;
  animation-iteration-count: infinite;
}
body #contact .form-container form #form-details .website a {
  text-decoration: underline;
  color: turquoise !important;
}
body #contact .form-container form #form-details .warning {
  margin-top: 40px;
}
body #contact .form-container form #form-message {
  display: flex;
  flex-direction: column;
  width: 100%;
}
body #contact .form-container form #form-message input, body #contact .form-container form #form-message textarea {
  display: flex;
  background: transparent;
  outline: none;
  border: 3px solid white;
  border-radius: 10px;
  font-size: 1.2rem;
  padding: 10px;
  color: #353535;
}
body #contact .form-container form #form-message input:focus, body #contact .form-container form #form-message textarea:focus {
  border: 3px solid #34A2B8;
}
body #contact .form-container form #form-message textarea {
  display: flex;
  margin-top: 10px;
  resize: vertical;
  max-height: 350px;
  min-height: 100px;
}
body #contact .form-container form #form-message #submit {
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  width: 100%;
  padding: 10px 0px;
  border-radius: 10px;
  background: #34A2B8;
  transition: 0.1s;
}
body #contact .form-container form #form-message #submit:hover {
  opacity: 0.8;
}

@media only screen and (max-width: 1200px) {
  * {
    overflow-x: hidden;
    overflow-y: auto;
  }
  video, .video-container {
    display: none;
  }
  .details {
    width: 100% !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  #nav-links {
    display: none !important;
  }
  #learnmore {
    margin-top: 30px;
  }
  .feature {
    margin: 0 !important;
  }
  .feature .details {
    margin-right: 0px !important;
    margin-left: 0px !important;
  }
  .feature .link {
    display: none !important;
  }
  .feature .left, .feature .right {
    margin-right: 0px !important;
    margin-left: 0px !important;
  }
  #home .left {
    margin-top: 40px;
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
  #home .left h1 {
    margin: 0 10px !important;
    text-align: center !important;
    font-size: 3rem !important;
  }
  #home .right {
    display: none !important;
    width: 0%;
  }
  #features i {
    margin-top: 10px !important;
  }
  #contact {
    justify-content: center;
  }
  #contact .form-container {
    width: 95% !important;
  }
  #contact #form-details {
    margin-right: 0px !important;
  }
  #contact form {
    display: flex;
    flex-direction: column;
  }
  #contact form #form-details, #contact form #form-message {
    width: 100% !important;
  }
  #contact form #form-details .warning {
    margin: 20px 0 !important;
  }
}
footer {
  padding: 20px;
  background: #222;
  color: white;
  justify-content: center;
  text-align: center;
}
footer a {
  color: #34A2B8;
}

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

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

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

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

.ml-5 {
  margin-left: 5px;
}

.ml-10 {
  margin-left: 10px;
}

.ml-15 {
  margin-left: 15px;
}

.ml-20 {
  margin-left: 20px;
}

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

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

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

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

.mb-5 {
  margin-bottom: 5px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-15 {
  margin-bottom: 15px;
}

.mb-20 {
  margin-bottom: 20px;
}

.rem-1 {
  font-size: 1rem;
}

.rem-1-5 {
  font-size: 1.5rem;
}

.rem-2 {
  font-size: 2rem;
}

.rem-2-5 {
  font-size: 2.5rem;
}

.rem-3 {
  font-size: 3rem;
}/*# sourceMappingURL=styles.css.map */