/*district css*/

#about .theme_title , #menu .theme_title{
    width: 80%;
}
.sidebar_logo{
    width: 50px;
}
.alert-success{
    z-index: 1;
    background: #f0f0f0;
    font-size: 14px;
    padding: 20px 40px;
    width: 100%;
    border-left: 8px solid green;
    border-radius: 4px;
}
.alert-error{
    z-index: 1;
    background: #f0f0f0;
    font-size: 14px;
    padding: 20px 40px;
    width: 100%;
    border-left: 8px solid yellow;
    border-radius: 4px;
}
img.logo{
    width: 44px;
}
.mainapp_bg{
    background: #F9F6F0;
    padding: 60px;
}
#carouselExampleIndicators{
    margin-left: -20px !important;
    margin-right: -20px !important;
}
#btn {
       background: transparent;
    color: #CC8F1C;
    text-align: left;
    display: block;
    text-transform: uppercase;
    font-size: 16px;  cursor: pointer;text-decoration: underline;
}
.table tbody+tbody {
    border-top: 0px solid #dee2e6;
}



/*#more {display: none;}*/
.ban_img{
   margin-left: 20%; 
   width: auto !important;
}
.app_info{
padding-top: 15%;
    padding-left: 40px;
}
.app_page .app_info {
    padding-left: 0px;
    width: 85%;
}
.app_info a.view_detail{
      color: #CC8F1C;
    text-decoration: underline;
    margin-top: 20px !important;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 40px;
}
.bg_app{
    background: #252525; padding: 60px;
    padding-bottom: 0px;
}
.table td {
    border-top: 0px solid #dee2e6;
    font-size: 16px;    padding: 5px;
    font-weight: 700;
    text-align: right;

}
td.menu_name{
    font-size: 20px;
    font-weight: 400;
    text-align: left;

}
.accordion a:hover{
text-decoration: none;
color: #222;
}
.card-header {
    padding: 25px 0px;
    padding-bottom: 10px;
    margin-bottom: 0;
    background-color: transparent;
    border-bottom: 1px solid #222;
}
.card-title {
    font-size: 22px;
    color: #222;
font-family: 'AvenirLTStd-Light', sans-serif;    font-weight: 700;
    line-height: 120%;
    text-transform: uppercase;
}
.card-body {
    padding-left: 0;    padding-right: 0px;
}
.card-title span{
    font-size: 15px;
    color: #CC8F1C;    text-transform: capitalize;
}
    .accordion .card-header:after {
    font-family: 'FontAwesome';  
    /*content: "\f068";*/

     content: url(../img/minus.svg);
    float: right; 
}
.accordion .card-header.collapsed:after {
    /* symbol for "collapsed" panels */
    /*content: "\f067";*/
       content: url(../img/pkus.svg);
}
.modal_data a{
    padding: 14px 40px !important;
    background: #000;
    color: #fff !important;
    text-transform: uppercase;
    margin-top: 35px;
    display: inline-block;
    text-decoration: none;
}
.modal_data h3{
    margin-bottom: 25px;
}
.modal_data h5{
margin-top: 30px;
font-weight: bold;
}
.modal_data .fa {
    color: #222;
    font-size: 21px;
    padding-right: 2px;
}
.modal-header {

    border-bottom: 0px solid #dee2e6 !important;
    }
    .modal-dialog {
    max-width: 80% !important;
    }
.modal_data{
    padding: 40px 60px;
}
.modal-body  img{
    height: 100%;
}
.modal-body {
    padding: 0rem !important;
}
.modal-header {
    border-bottom: 0px solid #dee2e6 !important;
    position: absolute;
    right: 0;
    z-index: 999;
    }
    .modal-header .close {
    padding: 8px;
    margin: -2rem -2rem -1rem auto;
    background: red;
    color: #fff;
    opacity: 10;
    height: auto;
    border-radius: 50%;
    }
    .close {
    font-size: 18px !important;
    line-height: 0.8 !important;

    opacity: 1;
    }
.about_margin{
    margin-top: 100vh;
}
.container-fluid{
    padding-left: 50px;
    padding-right: 50px;
}
.bg_theme{
background: #F9F6F0;
    padding: 60px;
}
.bg_theme h2{
    text-align: center;
    margin-bottom: 30px;
}
.bg_theme h3{
    font-size: 32px;
    padding-top: 20px;padding-bottom: 20px;
}
.bg_theme a{
    color: #CC8F1C;
    text-decoration: underline;
    text-transform: uppercase;
    /* font-size: 16px; */
}
.bg_app h3, .bg_app p{
    color: #fff;
}
.bg_app h3 span{
    color: #CC8F1C;
}
h3{
    color: #222222;
    font-size: 36px;
}
.main_banner h1{
text-align: center;
    margin: auto;
    width: 53%;
    line-height: 130%;
}
.main_banner{
       width: 100%;
       background-color: rgba(0,0,0,0.6);
    float: left;
    position: absolute;
    opacity: 1;
    z-index: -8;
    height: auto;
    margin-bottom: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    overflow: hidden;
    bottom: 0px;
}
.theme_title{
    color: #CC8F1C;
}
.theme_title span{
    color: #000;
}
h2{
    font-size: 48px;
}
h1{
    font-size: 64px;
}
h4{
    font-size: 18px;
    text-transform: uppercase;
    color: #fff;
    line-height: 120%;
    margin-bottom: 20px;    font-weight: 400 !important;
}
.fa{
    color: #fff;
    font-size: 23px;
    padding-right: 25px;
}
 img.appstore {
    margin-left: 10px !important;
    }

.black-layer-home {
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.4);
    /*background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.063) 100%, rgba(0, 0, 0, 0) 100%);*/
    float: left;
    color: white;
}
.banner-padding {
    padding: 35vh 0px 0px 0px;
}

.page_section{
    padding-top: 60px;
    padding-bottom: 60px;
    padding-left: 50px;
    padding-right: 50px;
}
.img-responsive{
    width: 100%;
}

.contact_bg{
       padding: 60px 0px;        text-align: center;
}
.btn-primary{
    background: #222;
    border-radius: 0px;
    padding: 12px 40px 9px;
    margin-top: 20px;
    width: 70%;
    border: 0px !important;
}
.btn-primary:hover , .btn-primary:focus , btn:active{
      background: #222;    border: 0px !important;
          /*box-shadow: 0 0 0 0rem rgb(130 138 145 / 50%) !important;*/

}
input , textarea{
    background: #FFFFFF;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    width: 70%;
    margin-bottom: 20px;
    padding: 10px;
    outline: 0;
}
label {
    display: inline-block;
    width: 70%;
    text-align: left;
    font-weight: 600;
    margin-top: 20px;    text-transform: uppercase;
    letter-spacing: 0.04em;
}
textarea{
    height: 200px;
}

.btn-secondary {
    color: #fff;
    background-color: #944BBB !important;
    border-color: #944BBB !important;
    border-radius: 56px;
    width: 170px;}

.btn-secondary:focus , .btn-secondary:hover{
        background-color: #944BBB !important;
    border-color: #944BBB !important;
        border: 0 !important;

}
.btn-secondary:not(:disabled):not(.disabled):active:focus{
        box-shadow: 0 0 0 0rem rgb(130 138 145 / 50%) !important;
}
.btn{
        padding-top: 9px !important;
            line-height: 30px !important;
}
.dropdown-menu {
    background: #fff !important;
    top: 130% !important;
    
    left: -25px !important;

    border-radius: 8px !important;
    
}
.contactform{
      margin-top: 30px; 
}

.page_info{
    padding: 60px !important;
        width: 90%;
}
.page_info p{

  
}

.page-footer {
    background-color: #222222;
    padding: 60px 0 60px;
   padding-left: 50px;
    padding-right: 50px;
}
.page-footer p{
    color: #7A7976;
    font-size: 16px;line-height: 120%;
    margin-bottom: 30px;
        
}

.w100{
    width: 100%;    
    display: flex;
    align-items: center;
  justify-content: center;
  
}

.w60{
    width: 60%;
    float: left;
}
.w40{
    width: 40%;
    float: left;
}
.w40 img{
    float: right;
    height: 92vh;
    width: auto;
}
.w50{
    width: 50%;
    float: left;
}
.w50 img{
    padding: 50px;
    text-align: center;
    align-items: center;
    margin: auto;
    display: block;
        width: 100%;
}

.w50_info{
        padding: 60px;    width: 90%;
}
.w50_info p{
    
        margin-top: 25px;
}
p{
    line-height: 30px;
    font-size: 18px;
}


.w50-push-6 {
 left: -50%;
    position: relative;

}
.w50-pull-6 {
       right: -50%;
    position: relative;
}
.mainapp_bg p{
margin-top: 20px;
    margin-bottom: 30px;
}
/*end districk css*/

body {
    padding: 0;
    margin: 0;
    background: #fff !important;
  /*font-family: "AvenirLTStd-Light" !important;*/
            font-family: 'AvenirLTStd-Light', sans-serif;

    overflow-x: hidden !important;
        font-size: 18px !important;

}

h1 , h2 , h3 , h4{
          font-family: 'AvenirLTStd', sans-serif !important;
      /*font-weight: 700;*/
}
@font-face {
  font-family: "AvenirLTStd" !important;
  /*src: url(fonts/AvenirLTStd-Medium.otf) !important;*/
  src: url(fonts/AvenirLTStd-Heavy.otf) !important;
}

@font-face {
  font-family: "AvenirLTStd-Light";
  src: url(fonts/AvenirLTStd-Light.otf) !important;

}

/*menu*/

.download_link{
background: #944BBB;
    border-radius: 56px;
    color: #fff !important;
    padding: 9px 15px 6px !important;

}
.navbar {
    background:#FFFFFF;padding: 0px;
    padding-left: 60px;
    padding-right: 60px;    width: 100%;

}
.nav-link,
.navbar-brand {
    color: #242038;
    cursor: pointer;
}
.nav-link {
  margin-right: 40px !important;
    margin-top: 6px;
    font-size: 18px;
    line-height: 120%;
    color: #fff;
    text-transform: uppercase;
}
.app_page .nav-link {
 
    color: #222;
}

.nav-link:hover {
    color: #fff;
}
.app_page .nav-link:hover {
       color: #222;
    
}
.nav_btn:hover {
    color: #fff;
    background: #CC8F1C;
}
.app_page .nav_btn:hover {
       color: #fff;
    background: #CC8F1C;
}
.navbar-collapse {
    justify-content: flex-end;
}
.navbar{
        padding-top: 25px;
    background: transparent;
}
.app_page .navbar {
    background: #F9F6F0;
}
.nav_btn{
       padding: 14px 40px !important;
    background: #fff;
    color: #222;margin-top: 0px;    line-height: 80%;

}
.app_page .nav_btn {
    background: #222;
    color: #fff !important;    margin-top: 0px;

}
.app_page .container-fluid{
    padding-left: 0px;
    padding-right: 0px;
}
html {
    overflow-x: hidden !important;
}
/*end menu*/


 .desktop{
        display: block;
    }
    .mobile{
        display: none;
    }

    /*for mobile sidebar */

    /*end mobile sidebar*/

@media (min-width: 768px) and (max-width: 991px){

img.appstore {
   margin-left: 0px !important;
}
label , .btn-primary {
    width: 100%;
    }
    input, textarea {
    width: 100%;
    }
    .app_info a.view_detail {
    margin-top: 0px !important;
    margin-bottom: 20px;
    }
    .app_info {
    padding-top: 0%;
    padding-left: 0px;
    }
    .about_margin {
    margin-top: 85vh;
    }
    .nav-link {
    margin-right: 5px !important;
    }
    .main_banner h1 {
    width: 80%;
    }
    .container-fluid {
    padding-left: 0px;
    padding-right: 0px;
    }

    .page-footer {
    padding-left: 20px;
    padding-right: 20px;
    }
    .w50_info {
        width: 100%;
    }
  .w50_info {
    padding: 20px;
    }
    h2 {
    font-size: 38px;
    line-height: 45px;
    }
    .w50 img {
    width: 100%;
    }
    .page_info {
    padding: 45px !important;
    }
    .w40 img {
    height: auto;
    width: 100%;
    }
}
@media (min-width: 992px) and (max-width: 1199px){
    .nav-link {
    margin-right: 28px !important;
    }
   
    img.appstore {
    margin-left: 0px !important;
    }
  .w50_info {
    padding: 30px;
    }
    .w50_info {
        width: 100%;
    }
}

@media (min-width: 320px) and (max-width: 369px){

           .modal-dialog {
    max-width: 100% !important;
}

    img.appstore {
    margin-left: 0px !important;
    margin-top: 10px;
    }
    .logo {
    /*margin-top: -70px !important;*/
    }
    h2 {
     font-size: 32px;
    line-height: 42px;
    }
    .page-footer img , .page_info img , .gradient_bg img{
    margin-bottom: 10px;
    }
    
}

.sidenav , .menu_open{
    display: none;
}
  li.nav_download a{
        padding-left: 0;
    margin-left: -20px;
    float: left;
    margin-top: 20px;
    }
    
    @media (min-width: 580px) and (max-width: 890px){
        
        img.appstore {
    margin-top: 10px;
    }
        
    }
@media (min-width: 320px) and (max-width: 767px){
    
    .ban_img {
    margin-left: 0%;
    width: 100% !important;
    }
    
    #about .theme_title , #menu .theme_title{
    width: 100%;
    }
    
    .card-title {
    font-size: 18px;

    }

    .nav_btn {
    padding: 14px 0px !important;
    background: transparent;
    }
    .nav-link {
    margin-top: 15px;}
  

    .sidenav , .menu_open{
        display: block;
    }
    span.menu_open{
        font-size: 28px;
        cursor: pointer;
        color: #fff;
        float: right;
        right: 20px;
        position: relative;
        margin-top: 20px;
    }
    .app_page   span.menu_open{

        color: #222;
        
    }
    .app_page .header{
 background: #F9F6F0; 
    }.app_page .nav_btn {
    background: transparent;
    color: #222 !important;
}
    .sidenav {
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: #CC8F1C;
      overflow-x: hidden;
      transition: 0.5s;
      padding-top: 20px;
    }

    .sidenav a {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 18px;
      color: #222;
      display: block;
      transition: 0.3s;
    }

    .sidenav a:hover {
      color: #f1f1f1;
    }

    .sidenav .closebtn {
      position: absolute;
      top: 0;
      right: 20px;
      font-size: 36px;
      margin-left: 0px;
    }
    .logo{
        margin-top: -130px;
    }
    .sidenav {
   
    }
    .sidenav .navbar-nav , .sidenav img{
   padding-left: 20px;
    }
    .w50 img {
        padding: 20px;
    }
    .w50_info {
    padding: 20px 20px;
    width: 100%;
    }
    .mainapp_bg {
    padding: 20px;padding-bottom: 60px;
    }
    .app_page .app_info {
    width: 100%;
    }

    .modal-header .close {
    margin: -1.5rem -1rem -1rem auto;
   
        }
        .modal_data {
    padding: 25px 30px;
        }
        .modal-dialog {
            max-width: 80% !important;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
        }

    .page-footer h4{
        display: inline-block;    margin-top: 30px;
    width: 100%;
    }
    .page-footer p {
    margin-bottom: 0px;
    }
    label {
    width: 100%;
     }
     .btn-primary {
    width: 100%;
    }
    .about_margin {
    margin-top: 80vh;
    }
    .bg_theme {
    background: #F9F6F0;
    padding: 60px 0px;
    }
    .bg_app {
    background: #252525;
    padding: 60px 0px;
    padding-bottom: 0;
    }
    .app_info {
    padding-top: 0;
    padding-left: 0px;    margin-bottom: 60px;
    }

    .main_banner h1 {
    width: 100%;
    }
    .main_banner {
    background-size: auto 100%;
    }
    .page_section {
    padding-left: 0px;
    padding-right: 0px;
    }
    .container-fluid {
    padding-left: 20px;
    padding-right: 20px;
    }
   h2 {
     font-size: 36px;
    line-height: 42px;
    }
    h1 {
    font-size: 48px;
    }
    .desktop{
        display: none;
    }
    .mobile{
        display: block;
    }
  img.appstore {
    margin-left: 0px !important;
    }
  .navbar-nav {

    padding-top: 18px;
    }
    .dropdown{
   
    display: none;
    }
.w50-push-6 {
    left: 0%;
    position: relative;
}
.w50-pull-6 {
    right: 0%;
    position: relative;
}
  .navbar-toggler {

    background-color: transparent;
    overflow-x: hidden;
    float: right;
    border: 0px !important;
    }
    .navbar-toggler:focus {

    box-shadow: 0 0 0 0rem;
    }
    .w100 {
    width: 100%;
    display: inline-block;
    }
    .first_sec {
    display: inline-block !important;
    }
    .w50_info {
    padding: 15px;
    }
    .w60 , .w40 , .w50{
    width: 100%;
    }
    .page_info {
    padding: 40px 20px !important;
    width: 100%;
    }
    .w40 img {
    float: right;
    height: auto;
    width: 100%;
    }
    .w50_info {
    padding: 40px 20px;
        width: 100%;

    }
    input, textarea {
    width: 100%;
    }
    .gradient_bg {
    padding: 40px 20px;
        margin-top: -10px;
    }
    .contact_bg {
    padding: 40px 0px;
    }
    .page-footer {
    padding-left: 0px;
    padding-right: 0px;
    }
    .page-footer p {
    float: left !important;
    padding-top: 15px;
    }
    .navbar {

    padding-left: 20px;
    padding-right: 20px;
    }
}


/* scroll effecct  */


.reveal {
  position: relative;
  opacity: 0;
}

.reveal.active {
  opacity: 1;
}
.active.fade-bottom {
  animation: fade-bottom 1s ease-in;
}
.active.fade-left {
  animation: fade-left 1s ease-in;
}
.active.fade-right {
  animation: fade-right 1s ease-in;
}
@keyframes fade-bottom {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-left {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-right {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}