.appwox-logo{
    max-width: 125px;
    margin-left: 1em;
}
.nav-link.custom{
    color:black;
}

.btn-proposal{
    background-color: orangered;
    color: white;
    margin-top: -1em;
    margin-bottom: -1em;
    border-radius: 0;
}
.btn-proposal:hover{
    background-color: orangered;
    color: white;
}

.appwox-header{
    position: sticky;
    top: 34px;
    background-color: white;
    margin-bottom: 0 !important;
    z-index: 999999;
}

.appwox-contact-bar{
    position: sticky;
    top: 0;
    background-color: #efefef;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
    text-align: right;
    z-index: 999999;
}

.appwox-contact{
    text-decoration: none;
    color: black;
    margin-left: 0.5em;
}

.appwox-contact:hover{
    color: black;
}

.appwox-country-img{
 max-width: 24px;
}

.appwox-brand-logo{
    margin-top: 1em;
    width:100%;
}

.appwox-bg{
    background-color:#efefef;
}

.appwox-card-icon > img{
    max-width: 50px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.appwox-cards{
    margin-top: 2em;
    padding-top: 3em;
    padding-bottom: 3em;
    background-color: white;
}

.appwox-card-text{
    margin-top: 1em;
    text-align: center;
}

.appwox-services{
    display: block;
    background-color:white;
    border-radius: 75px;
    padding-top: 2em;
    padding-bottom:2em;
    height:140px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.appwox-service > img{
    max-width: 60px;
    margin-left: auto;
    margin-right: auto;
    display:block;
}

.appwox-service > i{
    font-size: 45px;
    display: block;
    text-align: center;
}

.appwox-service.active{
    color:orange;
}
.appwox-service:hover{
    color:orange;
    cursor:pointer;
}

.appwox-brand{
    background-color: white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: block;
    padding-top: 0.50em;
    float:left;
    margin-left: 2em;
    color:black;
}
.appwox-brand:first-of-type{
    margin-left: 0;
}

.appwox-brand > i{
    font-size: 30px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    text-align: center;
}

.appwox-image-box{
    background-color: white;
    padding: 2em;
    border-radius: 5px;
}
.appwox-app-dev{
    display:none;
}
.appwox-app-dev.active{
    display:block;
}

.tech{
    font-size: 14px;
    text-align: center;
    padding-top: 5px;
}
.tech:hover{
    cursor:pointer;
}
.tech.active{
    color:orange;
}

.tech-image{
    width: 100%;
    border-radius: 5px;
}
.tech-image-box{
    width:100%;
    background-color: white;
    border: 1px solid #2c2b2b;
    border-radius: 5px;
}

.tech-images{
    display:none;
}.tech-images.active{
    display:block;
}

 .appwox-hr{
     border:2px solid orangered;
 }

 .appwox-card-image{
     border-radius: 50%;
     width: 150px !important;
     display: block;
     margin-left: auto;
     margin-right: auto;
     margin-top: 3em;
 }

.appwox-card{
    height: 500px!important;
}

.appwox-card-hover{
    display:none;
}

.appwox-card:hover > .appwox-card-hover{
    position: absolute;
    top: 0;
    display:unset;
}
.appwox-card-hover.active{
    position: absolute;
    top: 0;
    display:unset;
}

 .black-screen{
     background-color: rgba(0,0,0,0.5);
     width: 100%;
     height: 290px;
 }

 .appwox-card-detail{
     background:orange;
     height:210px;
     color:white;
 }

 .appwox-card-explore-button{
     color: white;
     border: 1px solid white;
     display: block;
     margin-left: auto;
     margin-right: auto;
 }

 .app-1-bg{
     background-color: orange;
     color:white;
 }
.app-2-bg{
     background-color: red;
    color:white;
 }
.app-3-bg{
     background-color: purple;
    color:white;
 }
.appwox-project{
    display:none;
}
.appwox-project.active{
    display:block;
}

.appwox-consultation-button{
    background-color:orange;
    color:white;
}

.appwox-contact-form{
    padding:4em;
    background-color: white;
    border:1px solid black;
}

.appwox-purposal-button{
    background-color: orangered;
    color: white;
    border-radius: 0;
}


.btn-quotes{
    top: calc(50% - 33px);
    right: -70px;
    position: fixed;
    background-color: orange;
    color: white;
    writing-mode: tb-rl;
    transform: rotate(
            270deg);
    border-radius: 15px;
    padding-left:20px;
    padding-right: 20px;
}
.btn-chat{
    background-color: #2c2b2b;
    color: white;
    writing-mode: tb-rl;
    transform: rotate(
            270deg);
    top: calc(50% - -99px);
    right: -54px;
    position: fixed;
    border-radius: 15px;
    padding-left: 20px;
    padding-right: 20px
}
.btn-quotes:hover{
    color:white;
}

.btn-chat:hover{
    color:white;
}



.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-x: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}
.mobile-menu-open{
    display: none;
}
.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}
.nav-link.custom2{
    color:white;
    text-align: left;
    padding-left: 15px;
}

.quick-contact{
    width: 300px;
    position: fixed;
    top: 20%;
    background: white;
    padding: 1em;
    /* left: calc(50% - 150px); */
    z-index: 99999;
    border-radius: 25px;
    right: -300px;
    padding-top: 2em;
    transition: right 1s;
}

.quick-contact.active{
    right: 0;
    transition: right 1s;
}

.quick-chat{
    width: 300px;
    position: fixed;
    top: 20%;
    background: white;
    padding: 1em;
    /* left: calc(50% - 150px); */
    z-index: 99999;
    border-radius: 25px;
    right: -300px;
    padding-top: 2em;
    transition: right 1s;
}

.quick-chat.active{
    right: 0;
    transition: right 1s;
}
.messages{
    border-radius: 25px;
    border:1px solid black;
    padding: 2em;
    margin-bottom:1em;
    height: 200px;
    overflow-x: auto;
}
.message-user{
    color: red;
}

.chart,.chart-2,.chart-3,.chart-4,.chart-5{
    position: relative;
    text-align: center;
    display: block;
}

.chart-hr{
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    margin-bottom: 25px;
    width: 100%;
    max-width: 120px;
    border-top: 1px solid #90e0eb;
}

/* Chart */
.aligncenter{
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.aligncenter>i{
    font-size: 40px;
    margin:0 auto;
    color: #6798bd;
}
.aligncenter-2{
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.aligncenter-2>i{
    font-size: 40px;
    margin:0 auto;
    color: #cea96c;
}
.aligncenter-3{
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.aligncenter-3>i{
    font-size: 40px;
    margin:0 auto;
    color: #b7c289;
}
.aligncenter-4{
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.aligncenter-4>i{
    font-size: 40px;
    margin:0 auto;
    color: #c06d3f;
}
.aligncenter-5{
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.aligncenter-5>i{
    font-size: 40px;
    margin:0 auto;
    color: #000000;
}


/* Chart */


@media screen and (max-width: 991px) {
    .mobile-menu-open{display: block;font-size:30px;cursor:pointer;right: 40px;position:absolute}
    .nav-pills{display:none;}
    .btn-proposal{display:none;}
    .overlay a {font-size: 20px}
    .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
}