/*
/*
/*  custom.css
/*
/*  If not using Gulp and Sass, add your custom CSS below then include it
/*  in your page by adding a reference to assets/css/custom.css in the head of each page.
/*
*/


button {
outline: none !important;
}

/* ------------FONTS -------------*/
h1 {
  font-size: 2.3rem !important;
  line-height: 1.2 !important;
}

.sect-hdr{
   font-family: 'Overpass', sans-serif;
   font-weight: 200;
   font-size: 50pt;
}

.contact-info{
  font-size: 14pt;
}

@media (max-width: 576px){
  h2{
    font-size:40pt !important;
  }
}



/* ------------margin -------------*/

.mgt-1{
  margin-top:45px;
}

.mgt-2{
  margin-top:25px;
}

/* ------------NAVIGATION -------------*/


.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.8);
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: rgba(255, 255, 255, 0.6);
}

.icon{
   height:36px;
}

.navbar-collapse{
  overflow-y: hidden !important;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* ------------Buttons -------------*/
.btn-private-1{
  background-color: #FC8A10;
  color:#fff;
  border: none;
  padding:.875rem 5rem;
  border-radius: 5rem;
}

.btn-private-2{
  background: none !important;
  color:#fff;
  border: solid thin #fff;
}

.btn-private-2:hover{
   background-color: #fff !important;
   color:rgba(81,107,255,1) 67%;
}

.btn-private-3{
  background-color:#526CFF;
  color:#fff;
  border: solid thin #fff;
  padding:.875rem 5rem;
  border-radius: 5rem;
}

@media (max-width: 576px){
    .btn-private-3{
      padding:.875rem 3rem !important;
    }
}


.btn-light{
  border-color: #dee2e6;
  background: #fff;
}

.btn-light:hover{
  border-color: #1B1F3B;
  background: #1B1F3B;
  color:#fff;
}

/* ------------BACKGROUNDS -------------*/

.bg-primary{
  background: rgb(81,107,255) !important;
  background: linear-gradient(115deg, rgba(81,107,255,1) 0%, rgba(81,107,255,1) 67%, rgba(72,161,252,1) 100%) !important;
}

.bg-pm{
  padding:75px 100px;
}

@media (max-width: 576px){
  .bg-pm{
    padding:50px 45px;
  }

}


.bg-pm-1{
  background-color: #F0F6FA;
}

.bg-pm-2{
  background-color:#FAFCFD;
}

@media (max-width: 992px) {

  .bg-pm-1{
    background-color:#FAFCFD;
    border-bottom: solid thin #ccc;
  }

  .bg-pm-2{
    border-bottom: solid thin #ccc;
  }

  /*removed border top from last square so border stays thin */
  .square-4-first{
    border-top: solid thin #ccc !important;
  }

  .square-4-last{
    border-top:none;
  }

}
/* ------------CAROUSEL -------------*/
.carousel-how{
  text-align: center;
}

.carousel-how img{

  max-width:90%;
}


/* ------------FULL WIDTH -------------*/
.pm-full{
  padding: 0;
}

.use-icon{
  max-width:300px !important;
}

.implementation-box-outer{
  padding:10px;
}
.implementation-box-inner{
  padding:25px;
  background-color: #fff;
  -webkit-box-shadow: 5px 5px 9px 6px rgba(0,0,0,0.35);
  box-shadow: 5px 5px 9px 6px rgba(0,0,0,0.05);
}

.imp-box{
  min-height: 260px !important;
}

@media (max-width: 576px){
  .imp-box{
    min-height: 160px !important;
  }
}

.vd-logo{
  max-width:250px;
}

.card-title{
  text-align: center;
  font-size: 11pt;
  margin-bottom:5px;
}

.card-text{
  text-align: center;
  color: #555;
  font-size:9pt;
}



.widget-contact-form{
  background-color: white;
  padding:45px 45px;
  border-radius: 5px;
}

.social-icons ul{
  list-style-type: none; /* Remove bullets */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margins */
}

.social-icons li{
  float:left;
  margin-right:5px;
}

@media (max-width: 576px){
  .footer-left{
    padding-left:50px;
  }
}

@media (max-width: 576px){
  .use_c{
      padding-left:20px !important;
      padding-right:20px !important;
  }

  section{
    padding-left:15px !important;
    padding-right:15px !important;
  }

}

.modal-body img{
  max-width:200px;
}

@media (max-width: 576px){
  .modal-body img{
    max-width:150px;
  }
}
/*-----MODAL ----*/

.white-form{
  border: solid thin #eee;

}

.pm-btn-4{
  background-color: #FC8A10 !important;
  color:#fff !important;
  border: none;
}

.pm-btn-4:hover{
  background-color: #000 !important;
}

.modal-header{
  border-bottom: solid 1px #fff;
}


@media (max-width: 576px){
  #implementation .sect-hdr{
    font-size: 30pt !important;
  }
}