/* Globale */

html,body {margin: 0px; padding: 0px; height: 100%; width: 100%;}

/* preloder */
#loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url('../img/Preloader.gif') no-repeat #ffffff;
  background-position: center;
}

/* bootstrap overright */
.navbar-dark .navbar-nav .nav-link {color: #fff;}
.navbar-dark .navbar-nav .active>.nav-link,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .show>.nav-link {
  color: #3E4452;
}

/* Toggle overright*/
.navbar-toggler {
  border: none;
  background: transparent !important;
}
.navbar-toggler:focus {
  outline: none;
  background: transparent !important;
}

/* custume slick slider */
.grab {cursor: -webkit-grab; cursor: grab; cursor: -ms-grab; }
.grabbing {cursor: -webkit-grabbing; cursor: grabbing; cursor: -ms-grabbing;}
.jumbotron, #features, #screenshort,#download {padding: 120px 0px;}

/* btn Grow Shadow */

.btn, * {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.btn:hover, .btn:focus, .btn:active {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

/* ///////////////////// End Global //////////////// */

/* custome navbar setting */
.navbar-brand img {width: auto; height: 34px;}
.navbar {padding: 1.2rem 1rem; transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in;}
.navbar-expand-md .navbar-nav .nav-link {padding-right: 1rem; padding-left: 1rem; }
.scrolled-nav {
  padding: 0.5rem 1rem;
  -webkit-box-shadow: 0px 9px 12px -4px rgba(0, 0, 0, 0.21);
  -moz-box-shadow: 0px 9px 12px -4px rgba(0, 0, 0, 0.21);
  box-shadow: 0px 9px 12px -4px rgba(0, 0, 0, 0.21);
}

/* custome Toggle */
.navbar-toggler .icon-bar {
  background-color: #fff;
  transform: rotate(0deg) translate(0px, 0px);
  transition: ease all .2s;
}

.navbar-toggler .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
}

.navbar-toggler .icon-bar+.icon-bar {margin-top: 4px;}

/* x animation */
.navbar-toggler.x:not(.collapsed) .icon-bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 4px);
  transition: ease all .2s;
}

.navbar-toggler.x:not(.collapsed) .icon-bar:nth-child(2) {
  opacity: 0;
  transition: ease all .2s;
}

.navbar-toggler.x:not(.collapsed) .icon-bar:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -4px);
  transition: ease all .2s;
}

/* screen slider */
.slick-dots {bottom: -36px;}

.slick-dots li button::before {
  content: ' ';
  width: 10px;
  height: 10px;
  border: 1px solid rgb(255, 255, 255) !important;
  background-color: hsla(0, 93%, 52%, 0);
  border-radius: 15px;
}

.slick-dots .slick-active button::before {
  background-color: #ED1848;
  border: 1px solid #ED1848 !important;
}

/* // responsive // */
@media (max-width: 991.98px) {
 
  #features .media p {  font-size: 12px;}
  #features {text-align: center;}
  #features div img {margin-bottom: 12px;}
}

@media (max-width: 767.98px) {

  .navbar-brand img {width: auto;height: 24px;}
  nav.navbar {
    padding: 0.5rem 1rem;
    -webkit-box-shadow: 0px 9px 12px -4px rgba(0, 0, 0, 0.21);
    -moz-box-shadow: 0px 9px 12px -4px rgba(0, 0, 0, 0.21);
    box-shadow: 0px 9px 12px -4px rgba(0, 0, 0, 0.21);
  }

  nav.navbar .nav-link {font-size: 12px; padding: 8px 4px;}

  .navbar-dark .navbar-nav .nav-link:hover,
  .navbar-dark .navbar-nav .nav-link.show,
  .navbar-dark .navbar-nav .show>.nav-link { background-color: #3E4452; color: #fff;}

  .jumbotron {text-align: center;}
  .jumbotron h1 {font-size: 20px;}
  .jumbotron div img {padding-top: 20px;}
  .jumbotron p {padding-top: 0px !important;}

  p {font-size: 12px;}
  .btn-group-lg>.btn, .btn-lg { font-size: 14px;}

  h2 {font-size: 20px;}
  #download {padding: 40px 0px;}
  #download a {margin: 10px 0px;}
}

@media (max-width: 575.98px) {

  .jumbotron h1 {font-size: 16px;}
  p { font-size: 11px;}
  .btn-group-lg>.btn,  .btn-lg { font-size: 12px;}
}