/*-----------------
1. Google font
------------------*/

@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700,800");

/*-------------------
2. Theme Default CSS
--------------------*/

* {
  outline: none;
}

a {
  text-decoration: none;
  outline: none;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
  color: #333333;
}

input:focus,
button:focus,
a:focus,
a:hover {
  text-decoration: none;
  outline: none;
  color: #ffffff;
}

img {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 15px;
  font-weight: 400;
  line-height: 1.4em;
}

h1 {
  font-size: 3.75rem;
}

h2 {
  font-size: 3.125rem;
}

h3 {
  font-size: 2rem;
}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1.3rem;
}

cfont-choose-title {
  font-size: calc(18px + (36 - 18) * ((100vw - 992px) / (1280 - 992)));
}

html {
  margin: 0;
  /* Avoid overflow-x:hidden here — with height:100% it forces body to become
     the scroll container, which breaks window scroll / nav scroll-spy. */
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100%;
  overflow-x: clip;
}

body {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 32px;
  color: #ffffff;
}

/* Remove Chrome Input Field's Unwanted Yellow Background Color */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

/*-- 3. Button-Style --*/

.bttn-white {
  position: relative;
  background: #ffffff;

  overflow: hidden;
  z-index: 1;
  margin-right: 10px;
  border: none;
}

.bttn-white img {
  height: 20px;
  margin-right: 5px;
  margin-top: -5px;
  display: inline-block;
}

.bttn-white:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(224, 131, 65);
  z-index: -1;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  opacity: 1;
}

.bttn-yellow:before {
  background-color: rgb(254, 213, 66);
}

.bttn-white:active,
.bttn-white:hover {
  background: #ffffff;
  color: rgb(224, 131, 65);
}

.bttn-yellow:active,
.bttn-yellow:hover {
  background: #ffffff;
  color: rgb(239, 206, 91);
}

.bttn-white:active:before,
.bttn-white:hover:before {
  color: #ffffff;
  opacity: 0;
}

.bttn-white {
  padding: 12px 30px;
  background-color: #ffffff;
  display: inline-block;
  /* color: #01A2AE; */
  color: #ffffff;
  text-transform: uppercase;
  border-radius: 50px;
  letter-spacing: 1.5px;
  font-weight: 700;
  font-size: 14px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  border: none;
}

.bttn-white .lnr {
  margin-right: 10px;
}

/*-- Helper-Classes --*/
.overlay {
  position: relative;
  z-index: 1;
}

.overlay:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#482cbf', endColorstr='#6ac6f0', GradientType=1);
  opacity: 0.8;
  /* IE6-9 fallback on horizontal gradient */
  z-index: -2;
}

.hide {
  display: none;
}

.dark-color {
  color: #434345;
}

.blue-color {
  color: #5e88fc;
}

.white-color {
  color: #ffffff !important;
}

.gray-bg {
  background-color: #f5f6ff;
}

/* Makehapp Color Code */
.mh-blue {
  color: #024656;
}

.mh-light-blue {
  color: #01a2ae;
}

.mh-white {
  color: #f8f7f5;
}

.mh-snow {
  color: rgb(255, 250, 250);
}

.mh-yellow {
  color: #fdd65d;
}

.mh-orange {
  color: #f6a800;
}

.mh-pink {
  color: rgb(239, 91, 94);
}

.mh-lemon-yellow {
  color: rgb(239, 206, 91);
}

.mh-navy {
  color: rgb(57, 82, 104);
}

.mh-bg-white {
  color: rgb(124, 127, 130);
}

.mh-bg-blue {
  color: rgb(0, 76, 129);
}

.mh-txt-black {
  color: #37474f;
}

.mh-txt-light-orange {
  color: rgb(246, 168, 0);
}

.mh-txt-dark-orange {
  color: rgb(239, 128, 20);
}

.mh-txt-dark-orange {
  color: rgb(209, 99, 0);
}

.mh-btn-orange {
  color: rgb(224, 131, 65);
}

.mh-btn-yellow {
  color: rgb(228, 164, 23);
}

.mh-btn-coffee {
  color: rgb(86, 67, 59);
}
/* Makehapp Color Code END */

/* Icon */
.lnr {
  display: inline-block;
  fill: currentColor;
}

.lnr-envelope {
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.2em;
}
.lnr-phone-handset {
  width: 1em;
  height: 1em;
  vertical-align: -0.2em;
}
/* Icon End */

/*-- MainMenu-Area --*/
.mainmenu-area {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 9999;
  padding: 1rem 1rem 1rem 0;
  background: transparent;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.mainmenu-area:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgb(246, 168, 0);
  background: -webkit-linear-gradient(
    45deg,
    rgba(246, 168, 0, 1) 0%,
    rgba(241, 90, 53, 1) 100%
  );
  background: -o-linear-gradient(
    45deg,
    rgba(246, 168, 0, 1) 0%,
    rgba(241, 90, 53, 1) 100%
  );
  background: linear-gradient(
    45deg,
    rgba(246, 168, 0, 1) 0%,
    rgba(241, 90, 53, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6a800', endColorstr='#f15a35', GradientType=1);
  z-index: -1;
  opacity: 0;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.mainmenu-area.affix {
  position: fixed;
  top: 0;
  width: 100vw;
}

.mainmenu-area.affix:before {
  opacity: 1;
}

.mainmenu-area ul.mainmenu {
  text-align: right;
  float: none;
  display: block;
}

.mainmenu-area ul.mainmenu li {
  float: none;
  display: inline-block;
  text-align: center;
}

.mainmenu-area ul {
  font-size: 1rem;
  letter-spacing: 0.1rem;
}

.mainmenu-area ul.nav.navbar-nav li a {
  color: #ffffff;
  padding: 0.625rem 0.125rem;
  text-transform: capitalize;
  background: transparent;
  font-weight: 525;
  border-bottom: 2px solid transparent;
  margin: 0 0.9375rem;
}

.mainmenu-area ul.nav.navbar-nav li a:hover,
.mainmenu-area ul.nav.navbar-nav li.active a {
  border-bottom-color: #ffffff;
}

.mainmenu-area .navbar-brand {
  height: auto;
  padding: 0 15px;
}

.mainmenu-area .navbar-brand img {
  height: 40px;
}

/*-- 7. Home-Area --*/
.home-area {
  width: 100%;
  height: 100vh;
  min-height: 620px;
  background: url("/images/header-bg.jpg") no-repeat scroll center bottom /
    cover;
  padding-top: 26vh;
  color: white;
  color: rgb(49, 50, 52);
  margin: 0;
}

.home-area .mobile-image {
  margin-right: 0;
  margin-left: 0;
  margin-bottom: -158px;
}

/* .home-area-half {
  width: 50%;
  height: 100%;
} */

.home-content {
  position: absolute;
  bottom: 0;
  text-align: center;
  width: 100%;
}

.about-service-area {
  background-color: rgb(0, 76, 129);
}

/*-- 7.5. About-Area --*/
.about-area {
  width: 100%;
  min-height: 120px;
  /* background-color: rgb(0, 76, 129); */
  padding-top: 5vh;
  padding-bottom: 5vh;
  margin: 0;
  line-height: 2.4rem;
  text-align: center;
}

.about-area .about-title {
  font-size: 1.3rem;
}

.about-area .about-content {
  font-size: 1.6rem;
  color: #c3d1d8;
}

.img-about img {
  max-width: 10%;
}

/*-- Service-Area --*/
.service-area {
  color: #ffffff;
  /* background-color: rgb(0, 76, 129); */
  padding-top: 5vh;
  padding-bottom: 10vh;
}

.service-area img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 25%;
}

.service-area .service-title {
  text-align: center;
  font-size: 1.75rem;
  font-weight: 500;
}

.service-area p {
  color: #c3d1d8;
  text-align: center;
  font-size: 1.4rem;
  line-height: 1.7em;
}

.service-area .service-img {
  padding-bottom: 0.5vh;
}

.service-area .mobile-image {
  margin-bottom: -142px;
}

.service-area .service-box {
  position: relative;
  padding-bottom: 8.5vh;
}

.service-area .service-box h4 {
  margin-bottom: 10px;
}

/* Showcase Area */
.showcase-area {
  background-color: rgb(236, 241, 231);
}

.showcase-area .showcase-title {
  font-size: 2.6em;
  text-align: right;
  color: rgb(57, 82, 104);
}

.showcase-padding {
  padding-top: 5vh;
  padding-bottom: 8vh;
}

.showcase-box:hover > .showcase-img,
.showcase-box:active > .showcase-img {
  opacity: 0.3;
  cursor: pointer;
}
.showcase-box:hover > .showcase-middle,
.showcase-box:active > .showcase-middle {
  opacity: 0.7;
  cursor: pointer;
}
.showcase-box:hover > .showcase-text,
.showcase-box:active > .showcase-text {
  opacity: 1;
  cursor: pointer;
}

.showcase-img {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: 0.5s ease;
  backface-visibility: hidden;
}

.showcase-middle {
  transition: 0.5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  background-color: rgb(246, 168, 0);
  border: 0.5rem solid rgb(239, 128, 20);
}

.showcase-text {
  transition: 0.5s ease;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  color: white;
  font-size: 2em;
}

/*-- 18. Footer-Area --*/
.footer-bottom {
  padding: 20px 0;
  background-color: rgb(239, 128, 20);
  border-top: 1px solid rgb(246, 168, 0);
  font-size: 1.2rem;
}

.footer-bottom .footer-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: right;
}

.footer-bottom .footer-menu ul li {
  display: inline-block;
}

.footer-bottom .footer-menu ul li a {
  padding: 10px;
  color: #ffffff;
}

.footer-bottom .footer-menu ul li a:hover {
  color: rgb(246, 168, 0);
}

.footer-bottom .footer-copyright {
  color: #ffffff;
  text-align: left;
}

/*-- 19. ScrollUp-Button --*/
#scrollUp {
  right: 0;
  bottom: 0;
  height: 60px;
  width: 60px;
  text-align: center;
  line-height: 60px;
  font-size: 30px;
  color: rgb(246, 168, 0);
}

.preloader {
  background-color: #ffffff;
  bottom: 0;
  height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99999999;
}

.preloader span {
  background: rgb(246, 168, 0);
  background: -webkit-linear-gradient(
    45deg,
    rgba(246, 168, 0, 1) 0%,
    rgba(241, 90, 53, 1) 100%
  );
  background: -o-linear-gradient(
    45deg,
    rgba(246, 168, 0, 1) 0%,
    rgba(241, 90, 53, 1) 100%
  );
  background: linear-gradient(
    45deg,
    rgba(246, 168, 0, 1) 0%,
    rgba(241, 90, 53, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6a800', endColorstr='#f15a35', GradientType=1);
  border-radius: 100%;
  height: 60px;
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: #ffffff;
  font-size: 24px;
  margin: auto;
  -webkit-animation: mymove 1.5s infinite linear;
  animation: mymove 1.5s infinite linear;
}

.preloader img {
  display: block;
  height: 40px;
  width: 35px;
  margin: 0;
}

/* Preloader Animation */
@-webkit-keyframes mymove {
  0 {
    -webkit-box-shadow:
      0 0 0 0 rgba(246, 168, 0, 0.6),
      0 0 0 0 rgba(246, 168, 0, 0.6);
    box-shadow:
      0 0 0 0 rgba(246, 168, 0, 0.6),
      0 0 0 0 rgba(246, 168, 0, 0.6);
  }
  25% {
    -webkit-box-shadow:
      0 0 0 10px rgba(246, 168, 0, 0.6),
      0 0 0 10px rgba(246, 168, 0, 0.6);
    box-shadow:
      0 0 0 10px rgba(246, 168, 0, 0.6),
      0 0 0 10px rgba(246, 168, 0, 0.6);
  }
  50% {
    -webkit-box-shadow:
      0 0 0 10px rgba(246, 168, 0, 0.6),
      0 0 0 20px rgba(246, 168, 0, 0.6);
    box-shadow:
      0 0 0 10px rgba(246, 168, 0, 0.6),
      0 0 0 20px rgba(246, 168, 0, 0.6);
  }
  75% {
    -webkit-box-shadow:
      0 0 0 10px rgba(246, 168, 0, 0.6),
      0 0 0 10px rgba(246, 168, 0, 0.6);
    box-shadow:
      0 0 0 10px rgba(246, 168, 0, 0.6),
      0 0 0 10px rgba(246, 168, 0, 0.6);
  }
  100% {
    -webkit-box-shadow:
      0 0 0 0 rgba(246, 168, 0, 0.6),
      0 0 0 0 rgba(246, 168, 0, 0.6);
    box-shadow:
      0 0 0 0 rgba(246, 168, 0, 0.6),
      0 0 0 0 rgba(246, 168, 0, 0.6);
  }
}
@keyframes mymove {
  0 {
    -webkit-box-shadow:
      0 0 0 0 rgba(246, 168, 0, 0.6),
      0 0 0 0 rgba(246, 168, 0, 0.6);
    box-shadow:
      0 0 0 0 rgba(246, 168, 0, 0.6),
      0 0 0 0 rgba(246, 168, 0, 0.6);
  }
  25% {
    -webkit-box-shadow:
      0 0 0 10px rgba(246, 168, 0, 0.6),
      0 0 0 10px rgba(246, 168, 0, 0.6);
    box-shadow:
      0 0 0 10px rgba(246, 168, 0, 0.6),
      0 0 0 10px rgba(246, 168, 0, 0.6);
  }
  50% {
    -webkit-box-shadow:
      0 0 0 10px rgba(246, 168, 0, 0.6),
      0 0 0 20px rgba(246, 168, 0, 0.6);
    box-shadow:
      0 0 0 10px rgba(246, 168, 0, 0.6),
      0 0 0 20px rgba(246, 168, 0, 0.6);
  }
  75% {
    -webkit-box-shadow:
      0 0 0 10px rgba(246, 168, 0, 0.6),
      0 0 0 10px rgba(246, 168, 0, 0.6);
    box-shadow:
      0 0 0 10px rgba(246, 168, 0, 0.6),
      0 0 0 10px rgba(246, 168, 0, 0.6);
  }
  100% {
    -webkit-box-shadow:
      0 0 0 0 rgba(246, 168, 0, 0.6),
      0 0 0 0 rgba(246, 168, 0, 0.6);
    box-shadow:
      0 0 0 0 rgba(246, 168, 0, 0.6),
      0 0 0 0 rgba(246, 168, 0, 0.6);
  }
}

/*--Choose-Us-Area--*/
.choose_us_area {
  color: #37474f;
  background: url("/images/choose/choose-us-bg.jpg") no-repeat scroll left
    top / cover;
  min-height: 770px;
  position: relative;
  padding-top: 30px;
}

.choose-md-title-1 {
  font-size: 2.5em;
  padding-left: 3vw;
}
.choose-md-title-2 {
  font-size: 2.7em;
  padding-left: 5vw;
}
.choose-md-title-3 {
  font-size: 2.7em;
  padding-left: 7vw;
}

.choose-xs-title {
  margin-left: 1vw;
  margin-right: 1vw;
}

.choose_us_area p {
  color: rgb(57, 82, 104);
}

.choose_image ul li {
  position: absolute;
  left: 32vw;
  top: 0vh;
}

.choose-txt-r {
  padding: 0 5vw 0 5vw;
}

.choose-txt-r h3 {
  line-height: 3rem;
}

.choose-point h3 {
  padding-bottom: 2vh;
}

.choose-btn {
  display: block;
  text-align: center;
}

/*--Contact-Us-Area--*/
.contact-us-area {
  background-image:
    url("/images/contact/contact-spaceman.png"),
    url("/images/contact/contact-bg.jpg");
  background-position:
    right bottom,
    center;
  background-repeat: no-repeat, no-repeat;
  background-size: auto, cover;
}

.contact-section-spacing {
  padding-top: 8vh;
  padding-bottom: 5vh;
}

.contact-l-title {
  font-size: 2rem;
  color: rgb(239, 128, 20);
}

.contact-l-content {
  font-size: 1.5rem;
  color: rgb(255, 255, 255);
}

.contact-r-title {
  font-size: 2rem;
  color: rgb(239, 128, 20);
}

.contact-r-content {
  font-size: 1.5rem;
  color: rgb(255, 255, 255);
}

/* .contact-us-area h3 {
  color: #F8F7F5;
} */

.contact-info .lnr-envelope,
.lnr-phone-handset {
  font-size: 1.9rem;
}

.contact-email,
.contact-phone {
  font-size: 1.2rem;
  color: rgb(255, 255, 255);
}

.contact-spaceman {
  position: absolute;
}

#form-recaptcha {
  margin: 0 auto 1vh auto;
}

#recaptcha-error {
  display: none;
  color: #c80000;
  font-size: 1.2rem;
  font-weight: 500;
}

#form-alert {
  margin: 0 auto;
}
/* IM */
#im_wa img {
  position: fixed;
  bottom: 20px;
  right: 15px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* Other */
.page-alert {
  position: fixed;
  top: 50%;
  left: 0;
  width: 100%;
}

.bttn-txt-loader {
  display: inline-block;
  position: relative;
  top: 0.5rem;
  border: 0.3rem solid #f3f3f3;
  border-radius: 50%;
  border-top: 0.3rem solid #3498db;
  width: 2rem;
  height: 2rem;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.row:before,
.row:after {
  display: inline-block !important;
}