/*!
 * Package Of app v1.0.0
 * Copyright DanCodev Authors (https://www.dmcom.id/)
 */
body{background-color:#fbfbfb;color:#292929;font-size:15px;font-optical-sizing:auto}
footer{background-color:#292929;color:#fff;line-height:1.5}
footer .widget .wid-title .tt{color:#fff}
footer .sub-footer{background-color:#222;display:flex;flex-direction:column;align-items:center;justify-content:center;height:80px}
footer .copyright{display:flex;align-items:center;justify-content:space-between;color:#7E8991;font-size:12px}
footer .social-link a.icon{
  display: inline-block;
  color: #fff;
  width: 38px;
  height: 38px;
  font-size: 14px;
  line-height: 37px;
  text-align: center;
  border-radius: 100%;
  border: 1px solid #7E8991;
}
footer .social-link a.icon:not(:last-child){
  margin-right: 5px;
}
footer .widnav li a{
  display: block;
  color: #f7b90f;
}
footer .widnav li a i{
  display: inline-block;
  min-width: 18px;
  font-size: 16px;
  margin-right: 5px;
  vertical-align: middle;
}
footer .widnav.social-link li a i{
  font-size: 14px;
}
footer .widnav li:not(:last-child) a{
  margin-bottom: 5px;
}
button,.btn{
  padding: 8px 20px;
  font-size: 14px;
  color: #292929;
  background-color: #f7b90f;
}
button.trans,.btn.trans{
  background: transparent!important;
  color: #3c4858;
  border: 1px solid #D7DCE0;
}
button.red,.btn.red{
  color: #fff;
  background-color: #E03C31;
  border-color: #E03C31;
}
button.trans.red,.btn.trans.red{
  color: #E03C31;
  border-color: #D7DCE0;
}
header#header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1003;
  background-color: #FFFFFF;
  box-shadow: 0 5px 22px -3px rgb(0 0 0 / 10%);
}
header#header.home{
  box-shadow: none;
}
header #headWrapper{
  position: relative;
  display: flex;
  width: 100%;
  height: 65px;
  padding: 8px 0;
  align-items: center;
  flex-direction: row;
}
header #navBrand{
  flex: none;
  max-width: 230px;
  max-height: 55px;
}
header nav#navbar{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header nav#navbar .social-link{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 1.5rem;
}
header nav#navbar .social-link > a:not(:last-child){
  margin-right: 13px;
}
header nav > ul#menu{
  display: flex;
  align-items: center;
  margin-left: auto;
}
header nav > ul:not(.dropdown-menu) > li:not(:first-child){
  margin-left: 1rem;
}
header nav > ul:not(.dropdown-menu) > li#joinAgent{
  margin-left: 1.8rem;
}
header nav > ul:not(.dropdown-menu) > li > a{
  font-size: 14px;
  font-weight: 600;
}
header nav > ul:not(.dropdown-menu) > li > a.dropdown{
  position: relative;
  padding-right: 18px;
}
header nav > ul:not(.dropdown-menu) > li > a.dropdown::before{
  content: "\F282";
  font-family: bootstrap-icons;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 10px;
  transition: all 0.3s;
}
header nav > ul:not(.dropdown-menu) > li > a.dropdown.sh::before{
  transform: rotate(-180deg);
}
header nav > ul:not(.dropdown-menu) > li > a.avatar{
  overflow: hidden;
  display: block;
  padding: 0;
  width: 38px;
  height: 38px;
  border: 1px dashed #f0f0f0;
}
header nav > ul:not(.dropdown-menu) > li > a.avatar::before{
  content: none;
}
header nav > ul#menu li > a{
  display: block;
}
header nav > ul#menu .barrier{
  height: 15px;
  margin-left: 15px;
  margin-right: 2px;
  border-left: 1px solid #e0e0e0;
}
header nav ul.dropdown-menu{
  background: #FFFFFF;
  visibility: hidden;
  position: absolute;
  top: 100%;
  right: 0;
  opacity: 0;
  padding: 0.8rem 1.3rem;
  min-width: 10rem;
  margin-top: 17px;
  border-radius: 0.2rem;
  box-shadow: 0 0.8rem 1.5rem rgb(31 45 61 / 25%);
  transform: translate3d(0,30px,0);
  transition: .25s;
}
header nav ul.dropdown-menu.sh{
  visibility:visible;
  opacity:1;
  transform:translateZ(0)
}
header#header.home{
  position: absolute;
  background-color: transparent;
}
header.home .social-link > a,
header.home nav > ul:not(.dropdown-menu) > li > a{
  color: #fff;
  text-transform: uppercase;
}
.mobile-nav{
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55px;
  background-color: #F7B90F;
  z-index: 1003;
}
.mobile-nav .navbar{
  display: flex;
  align-items: center;
}
.mobile-nav .navbar li{
  flex: 1;
  text-align: center;
}
.mobile-nav .navbar li .logo{
  display: block;
  margin-left: .5rem;
  padding: 1rem 0;
  max-height: 55px;
  min-height: 54px;
}
.mobile-nav .navbar li #chatsMe{
  position: absolute;
  color: #fff;
  top: -42px;
  left: 50%;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  background: #292929;
  transform: translateX(-50%);
  border: 2px solid #fff;
}
.mobile-nav .navbar li #mobileMenu{
  background: transparent;
  padding: .35rem 1rem;
  font-size: 12px;
  font-weight: 600;
  border-radius: .3rem;
  box-shadow: none !important;
  border: 1px solid #dda50a;
}
.mobile-nav .navbar li #mobileMenu:hover{
  background: #292929;
  color: #fff;
}
#mainwrap{
  overflow:hidden;
}
#pagewrap{
  margin-top: 65px;
}
.hex-bg{
  position: absolute;
  top: 0;
  left: 50px;
  width: 450px;
  height: 250px;
  background: url(../img/hex.png) no-repeat bottom right;
}
.hex{
  position: absolute;
  width: 43px;
  height: 24.83px;
  margin: 12.41px 0;
  background-color: #fff;
  transform: rotate(30deg);
}
.hex:before,.hex:after{
  content: "";
  position: absolute;
  left: 0;
  width: 0;
  border-left: 21.5px solid transparent;
  border-right: 22px solid transparent;
}
.hex:before{
  bottom: 100%;
  border-bottom: 13px solid #fff;
}
.hex:after{
  top: 100%;
  width: 0;
  border-top: 13px solid #fff;
}
.hex1{
  left: 12px;
  top: 43px;
}
.hex2{
  top: 111px;
  left: 129px;
}
.hex3{
  top: 134px;
  left: 12px;
}
.main-title{
  font-size: 32px;
  font-weight: 300;
  line-height: 1.3;
}
.sec-title .tt{
  position: relative;
  padding-bottom: 22px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.sec-title .tt::before{
  content: '';
  background: #F7B90F;
  position: absolute;
  left: 0;
  width: 30px;
  height: 2px;
  bottom: 10px;
}
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-nav .owl-prev{
  width: 36px;
  height: 36px;
  border-radius: 18px;
  box-shadow: 0px 8px 12px rgba(29, 31, 32, 0.2), 0px 0px 4px rgba(29, 31, 32, 0.12);
}
#pageHeader{
  position: relative;
  margin-top: 65px;
  height: calc(100vh - 65px);
  z-index: 3;
}
#pageHeader .hm-body{
  display: flex;
  position: absolute;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: #979797;
}
#pageHeader.listing .container{
  padding: 0;
  max-width: 100%;
}
#pageHeader.listing .owl-carousel .item{
  display: block;
  padding-bottom: 50%;
}
#pageHeader.home{
  height: calc(100vh - 259px);
  margin-top: 0;
}
#pageHeader.home #particles-js {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}
#pageHeader.home .hm-content{
  width: 100%;
}
#pageHeader #txtTyped{
  font-size: 50px;
  line-height: 55px;
}
#pageHeader #typedCursor{
  opacity: 1;
  -webkit-animation: dcovblink .7s infinite;
  animation: dcovblink .7s infinite;
}
@keyframes dcovblink{0%{opacity:1}50%{opacity:0}100%{opacity:1}}
@-webkit-keyframes dcovblink{0%{opacity:1}50%{opacity:0}100%{opacity:1}}

.card-service{
  overflow: hidden;
  position: relative;
  padding: 25px 30px 25px 90px;
  transition: all .3s ease-in-out;
}
.card-service:before{
  content: '';
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 45px;
  width: 1px;
  height: 40px;
  background: #eee;
  transition: all .3s ease-in-out;
}
.card-service .icon{
  background: #F7B90F;
  text-align: center;
  position: absolute;
  left: 20px;
  top: 25px;
  width: 50px;
  height: 50px;
  font-size: 16px;
  line-height: 50px;
  border-radius: 100%;
  box-shadow: 0 10px 5px rgb(0 0 0 / 8%);
  transition: all .3s ease-in-out;
  z-index: 1;
}
.card-service .tt{
  font-weight: 600;
}
.card-service .st{
  color: #5e646a;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 0;
}
.card-service:hover{
  box-shadow: 0 19px 20px rgb(58 87 135 / 8%);
}
.card-service:hover::before{
  height: 75%;
}
.card-service:hover .icon{
  background: #333;
  color: #F7B90F;
  box-shadow: 0 0 0 rgb(0 0 0 / 8%);
}
.card-pricing{
  padding: 2rem;
  color: #677788;
  height: 100%;
}
.card-pricing .price .curency{
  line-height: 1;
  margin-right: 5px;
}
.card-pricing .price .numb{
  line-height: 1.25;
  color: #1e2022;
}
.card-pricing .price .info{
  align-self: flex-end;
  line-height: 25px;
  margin-left: 3px;
}
.card-pricing .price .info sup{
  font-size: 11px;
}
.card-pricing .tt{
  color: #1e2022;
  line-height: 1.2;
}
.card-pricing .st{
  font-size: 13px;
  line-height: 1.5;
}
.card-pricing .feature{
  max-width: 75%;
  margin: auto;
}
.card-pricing .feature li{
  display: flex;
  align-items: baseline;
  font-size: 15px;
}
.card-pricing .feature li:not(:last-child){
  margin-bottom: 5px;
}
.card-pricing .feature i{
  color: #00B512;
  display: inline-block;
  min-height: 20px;
  margin-right: 8px;
  line-height: 1;
}
.card-pricing .link{
  color: #005DEA;
  font-size: 10px;
  font-weight: 700;
  margin-left: 3px;
}
.card-pricing.featured{
  background-color: #f7b90f;
  color: #26282b;
}
.card-pricing.featured .feature i{
  color: #3d7d44;
}
#navAccordion{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 -15px;
}
#navAccordion li{
  flex:0 0 25%;
  max-width:25%;
  padding: 0 15px;
}
#navAccordion li a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid #E8EBED;
}
.text-more .body{
  overflow: hidden;
  height: 100px;
  margin-bottom: 5px;
  transition: 0.25s;
}
.box.acordion .head .title{
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
  transition: all .3s;
}
.box.acordion .head .title::before{
  opacity: 0;
  transition: .3s ease-in-out;
}
.box.acordion .head button{
  background-color: #f3f6ff;
  width: 32px;
  height: 32px;
  padding: 0.3rem;
  border-radius: 100%;
  transition: all .3s;
}
.box.acordion.active .head .title{
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eaeaea;
}
.box.acordion.active .head .title::before{
  opacity: 1;
}
.box.acordion.active .head button{
  transform: rotate(-180deg);
}
.box.acordion .body{
  overflow: hidden;
  display: none;
}
.widget .wid-title .tt{
  position: relative;
  font-size: 14px;
  color: #333f48;
  font-weight: 600;
  padding-bottom: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.widget .wid-title .tt::before,
.widget .wid-title .tt::after{
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: #e0e0e0;
}
.widget .wid-title .tt::before{
  width: 40px;
  height: 4px;
  background-color: #F7B90F;
}
.widget .wid-title .tt::after{
  background-color: rgba(255,255,255,0.1);
}

@media (min-width: 320px) and (max-width: 480px) {
  .container,.container-lg{
    width: 95%;
    max-width: 95%;
  }
  .row.no-gutters{
    margin: 0;
  }
  header#header{
    background: #FFFFFF!important;
    position: fixed!important;
    left: -100%;
    width: 75%;
    bottom: 0;
    transition: left 0.25s ease-in-out;
    box-shadow: 0 5px 22px -3px rgb(0 0 0 / 10%) !important;
  }
  header#header.home{
    background: #3c4747!important;
  }
  header#header.sh{
    left: 0;
  }
  header #headWrapper{
    flex-direction: column;
    align-items: flex-start;
  }
  header nav#navbar{
    width: 100%;
    margin-top: 2rem;
  }
  header #navBrand{
    max-width: 100%;
    margin-top: .5rem;
  }
  header nav#navbar .social-link{
    margin-left: 0;
  }
  header nav#navbar,
  header nav > ul#menu{
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
  header nav > ul#menu{
    width: 100%;
    margin-top: 1rem;
  }
  header nav > ul#menu li > a{
    color: #1D1F20;
  }
  header nav > ul#menu li{
    display: flex;
    width: 100%;
    margin-left: 0;
    flex-direction: column;
  }
  header nav > ul:not(.dropdown-menu) > li{
    margin-bottom: 5px;
    line-height: 28px;
  }
  header nav ul.dropdown-menu{
    position: relative;
    overflow: hidden;
    height: 0;
    top: auto;
    margin-top: 0;
    padding-top: 0;
    padding-left: 1.2rem;
    padding-right: 0;
    padding-bottom: 0;
    min-width: 100%;
    transform: none!important;
    box-shadow: none;
    transition: all 0.25s;
  }
  header nav ul.dropdown-menu.sh{
    height: 80px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  header nav > ul:not(.dropdown-menu) > li#joinAgent{
    text-align: center;
    margin-top: 0.5rem;
    margin-left: 0;
    padding-top: 1rem;
    margin-bottom: 0;
    border-top: 1px solid #E8EBED;
  }
  header nav > ul:not(.dropdown-menu) > li#joinAgent a{
    color: #fff;
  }
  .pt-50{
    padding-top: 2rem;
  }
  #pageHeader.home{
    height: calc(100vh - 320px);
  }
  #pageHeader.home .hm-content{
    width: 100%;
  }
  #pageHeader #txtTyped{
    font-size: 28px;
    line-height: 35px;
  }
  .mobile-nav{
    display: block;
  }
  #pagewrap{
    margin-top: 0;
  }
  .main-title,
  .card-pricing .feature{
    max-width: 100% !important;
  }
  .main-title h1,
  .sec-title .tt,
  .block-title .tt{
    font-size: 20px;
  }
  .block-title.d-flex{
    flex-direction: column;
    text-align: center;
  }
  .block-title.d-flex .btn.ml-auto{
    margin-top: 1rem;
    margin-left: 0!important;
  }
  #navAccordion li{
    -ms-flex: 0 0 50%;
    flex: 50%;
    max-width: 50%;
  }
  #navAccordion{
    margin: 0 -8px;
  }
  #navAccordion li{
    padding: 0 8px;
  }
  footer{
    padding-bottom: 3.5rem;
  }
  footer [class*=col]{
    margin-bottom: 30px;
  }
  footer [class*=col]:last-child{
    margin-bottom: 0;
  }
}

@media (min-width:576px){
  .container{max-width:576px}
}
@media (min-width:768px){
  .container{max-width:768px}
}
@media (min-width:992px){
  .container{max-width:992px}
}
@media (min-width:1200px){
  .container{max-width:1200px}
}
@media (min-width:1400px){
  .container{max-width:1400px}
}
@media (min-width:1536px){
  .container{max-width:1536px}
}