*{
    font-family: 'Open Sans', sans-serif;
}

.nunito{
    font-family: 'Nunito', sans-serif;
}

.font-small{
    font-size: .875rem;
}

.bg-blue{
    background-color:#0c99eb;
}

.ex-blue{
    color:#0c99eb;
}

.ex-primary-color{
    color: #064081;
}

.ex-secondary-color {
 color: #444;   
}

.ex-grey-bg{
    background-color: #f6f9ff;
}

.ex-btn-normal{
    color: #fff;
    background: #0c99eb;
    padding: .4rem .8rem;
}

.ex-btn-glow{
    line-height: 0;
    padding: 1rem 2.5rem;
    border-radius: 4px;
    transition: 0.2s;
    color: #fff;
    background: #0c99eb;
    box-shadow: 0px 5px 30px rgba(12, 153, 235, .33);
}


.navbar{
    transition: all .3s ease;
}

.navbar .nav-link {
    color: #015e89 !important;
    font-size: 1rem;
    font-weight: 600;
    font-family: 'Nunito', sans-serif;
}

.navbar .nav-active{
    background: #dbecfe;
    border-radius: 4px;
}

.navbar a:hover{
    background-color: rgba(230, 240, 252,.5) !important;
    border-radius: 4px;
    color: #0c99eb;
}

.navbar.bg-white {
    box-shadow: 0px 2px 20px rgb(1 41 112 / 10%);
}

.navbar .dropdown-item{
    font-weight: 600;
    font-size: 1rem;
    font-family: 'Nunito', sans-serif;
    color: #015e89 !important;
}

.hero-section {
    height: 100vh;
    min-height: 500px;
    background-image: url('../img/hero-bg.png');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }

 .hero-section .btn:hover{
    padding: 1rem 4rem;
    color: white;
}

.hero-section-center{
    align-items: center;
}

@media screen and (max-width:1200px){
    .hero-section-center{
        margin-top: 5rem;
    }
}

.box{
    box-shadow: 0px 0 5px rgb(1 41 112 / 8%);
    text-align: center;
    transition: 0.3s;
    height: 100%;
}

.box img{
    transition: all ease .3s;
}

.box img:hover{
    transform: scale(.85,.85);

}

.metric-box{
    width: 100%;
    background: #fff;
    box-shadow: 0px 0 30px rgb(1 41 112 / 8%);
}

.metric-box i {
    font-size: 2.5rem;
    line-height: 1.25;
    color: #0c99eb;
}

.tech-box{
    box-shadow: 0px 0 20px rgb(1 41 112 / 8%);
    transition: ease 0.3s;
    margin-right: 10px;
    background-color: white;
}

.tech-box:hover i {
    background: #0c99eb;
    color: #fff;
}

.tech-box i {
    line-height: 0;
    background: #ecf3ff;
    padding: 4px;
    margin-right: 10px;
    font-size: 1.25rem;
    border-radius: 3px;
    transition: 0.3s;
}

.services-box{
    box-shadow: 0px 0 30px rgb(1 41 112 / 8%);
    padding: 3.25rem 2.5rem;
    text-align: center;
    transition: ease 0.3s;
    border-radius: 5px;
    border-bottom: 3px solid #0c99eb;
    cursor:default;
    color: #444;
}

.services-box .icon {
    font-size: 1.8rem;
    padding: 1.5rem;
    border-radius: 4px;
    position: relative;
    display: inline-block;
    line-height: 0;
    transition: 0.3s;
    color: #0c99eb;
    background: #dbecfe;
}

.services-box .read-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    padding: 8px 20px;
    color: #0c99eb;
    text-decoration: none;
    transition: .3s ease;
    cursor: pointer;
}

.services-box:hover{
    background-color: #0c99eb;
    color: white;
}

.services-box:hover .icon{
    background: #fff;
}

.services-box:hover .read-more{
    color: white;
}

.services-box .read-more:hover{
    background-color: rgba(255,255,255,.2);
    border-radius:4px;
}

.services-box .products-link{
    text-decoration: none;
    color:#444;
}

.services-box:hover .products-link{
    color: white;
}

.contact-us i {
    font-size: 2.5rem;
    color: #0c99eb;
}

.c-height{
    min-height: 140px !important;
}


.footer-section {
    background: white url(../img/footer-bg.png) no-repeat right top;
    background-size: contain;
    border-top: 1px solid #e1ecff;
    border-bottom: 1px solid #e1ecff;
}

.social-links{
    display: flex;
    align-items: center;
}

.social-links a{
    font-size: 20px;
    display: inline-block;
    color: rgba(1, 41, 112, 0.5);
    line-height: 0;
    margin-right: 1rem;
    transition: 0.3s;
}

.social-links a:hover{
    opacity: 80%;

}

.social-links img:hover{
    opacity: 80%;
}

.footer-links ul{
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: .9rem;
}

.footer-links li{
    padding: .3rem;
}

.footer-links a{
    text-decoration: none;
    font-family: 'Nunito', sans-serif;
    color: #013289;
}

.footer-links a:hover{
    color: #0c99eb;
}

.footer-links ul i {
    padding-right: 2px;
    color: #d0d4fc;
    font-size: 12px;
    line-height: 0;
}

.sidepanel{
    display: none;
    height: 100vh;
    width: 25vw;
    position: fixed;
    top: 0;
    right:0;
    background-color: white;
    z-index:9999;
    box-shadow: -8px 0px 16px rgba(21, 27, 77, 0.1);
}

.sidepanel .button-section{
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    padding: 10px;
    background-color: white;
}

.sidepanel .button-section button{
    width: 20vw;
}

.sidepanel-scroll{
    height: calc(100vh - 60px);
    overflow-y: scroll;
}


@media screen and (max-width:1199px) {
    .sidepanel{
        width: 100vw;;
    }
    .sidepanel .button-section button{
        width: 80vw;
    }
    #main-buttons{
        margin-top: 1rem;
    }
}

.progress{
    height: .8rem;
}

.progress .progress-bar{
    background-color: #0c99eb;
}

.testimonial-img{
    width: 90px;
    border-radius: 50%;
    border: 4px solid #fff;
    margin: 0 auto;
}

.bi-star-fill{
    color: #ffc107;
    margin: 0 2px;
}

.whatsapp-button{
    position: fixed;
    bottom: 10px;
    left: 10px;
}

.career-border-blue{
    border-left: 5px solid #0c99eb !important;
}

.career-btn{
    line-height: 0;
    padding: 1rem 2.5rem;
    border-radius: 4px;
    transition: 0.2s;
    color: #fff;
    background: #0c99eb;
    box-shadow: 0px 5px 20px rgb(12 153 235 / 23%);
}

.career-btn:hover{
    color: white;
    padding: 1rem 4rem;
}

.career-border-blue ul{
    list-style: none;
    font-size: .925rem;
}

.career-border-blue ul li::before{
    content: "\2022";  
  color: #ddd; 
  font-weight: bold; 
  display: inline-block; 
  width: 1em; 
  margin-left: -1em
}

.career-border-blue .btn-outline-career{
    color: #0c99eb;
    font-weight: 600;
    transition: all .2s ease;
}

.career-border-blue .btn-outline-career:hover{
    color: #fff;
    background-color: #0c99eb;
}

#apply{
    background-color: #f6f9ff;
}

#upload-section{
    width: 36vw;
    margin: auto;
    box-shadow: 0px 0 20px rgb(1 41 112 / 8%);
    transition: ease 0.3s;
    background-color: white;
}

#upload-section .form-control{
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #d8e0e7;
    font-size: .875rem;
    padding: .75rem 0;
}

#upload-section .form-control::placeholder{
    color: #c6cdd3;
}


#upload-section .form-control:focus{
    border: none;
    border-radius: 0;
    border-bottom: 2px solid #0c99eb !important;
    box-shadow: none;
}

#upload-section .upload-label{
    font-size: .8rem;
    font-weight: 600;
    color: #444;
    margin-bottom: .4rem;
}

#upload-section .progress{
    height: .4rem;
}

@media screen and (max-width:1200px) {
    #upload-section{
    width: 100%;
    }
    
}