@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');
@import url('http://fonts.cdnfonts.com/css/ocr-a-std');
/*.carousel-item {*/
/*  transition: transform 2.6s ease-in-out;*/
/*}*/

/*.carousel-fade .active.carousel-item-start,*/
/*.carousel-fade .active.carousel-item-end {*/
/*  transition: opacity 0s 1.6s;*/
/*}*/

#mobile div.image {
    position: relative;
}

#mobile .inner-image {
    z-index: -1;
    position: absolute;
    top: 50px;
    margin-left: 10px;
}

*,html {
    padding: 0;
    font-family: 'Roboto', sans-serif;
    line-height: 1.8rem;
    z-index: 1;
    letter-spacing: .4px;
    scroll-behavior: smooth;
}

body{
    overflow-x: hidden;
    margin-top: 5rem !important;
}

.container{
    overflow: hidden;
}

/*all elements*/
.container a{
    text-decoration: none;
}

.home{
    min-height: 640px;
}

.home .container{
    margin-top: 3rem;
}

.section1, .section2, .features, .mobile, .about, #bus-tracking {
    min-height: 555px ;
    /*max-height: 846px;*/
}

h2{
    color: #003E59;
    font-weight: 400 !important;
    font-size: 3.5rem !important;
}

section p{
    line-height: 1.5rem;
}



.form-control::placeholder{
    color: #b3b3b3 !important;
}

form span.mandatory{
    color: red;
    font-weight: bolder;
} 

/*disable scroll for number input*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

/*navbar*/
.navbar {
    /*max-height: 50%;*/
    font-weight: 400;
    transition: all 1s ease;
    text-transform: uppercase;
    padding: 0 !important;
}

.navbar-brand span, .footer-brand span{
    font-family: 'OCR A Std', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: bold;
    top: .2rem;
    position: relative;
}

.navbar a.navbar-brand {
    font-size: 2rem;
    color: #003d58;
    transition: all 1s ease;
}

.deg{
    color: #22b14c;
}

.sw{
    color: #FF7F27;
}

.navbar img{
    transition: all .9s ease;
}

.navbar .navbar-nav .nav-item{
    padding: 0 1rem;
}

.navbar .navbar-nav .nav-item a{
    color: #2e577e;
}

.navbar .navbar-nav .nav-item a:hover{
    color: #ff7f27;
}

.scrolled{
    /*max-height: 50% !important;*/
    padding: 0rem 0.1rem 0rem 0.1rem;
}

.scrolled-img{
    height: 45px;
}

.navbar-brand-scroll {
    font-size: 1.5rem ;
}

.navbar button{
    transition: all .9s ease;
}

.navbar-toggler.collapsed{
    transform: rotate(0deg);
}

.navbar-toggler{
    transform: rotate(-90deg);
}

/*home*/
#home {
    /*background: rgb(244,247,250);*/
    background: linear-gradient(to bottom,#FBFBFB,#F9F9F9);
    color: grey;
    /*background: linear-gradient(to bottom,#085e83,#4f8da2);*/
    /*color: white;*/
    margin-top: 3rem;
}

#home h1{
    color: #FF7F27;
    font-weight: 400;
    font-size: 3.5rem;
}

#home p{
    text-align: justify;
}

.home .btn{
    border: none;
    color: white;
    background-color: #ff6800 ;
    padding: 10px 25px;
    transition: transform 1s;
    font-weight: 500;
    text-transform: capitalize;
    letter-spacing: 1px;
}

.home .btn:hover{
    color: white;
    background-color:  #df5b00 ;
}

.home .btn i{
    padding-left: 1rem;
}

.home .home-img{
    /*margin-top: 2rem;*/
    border-radius: 15px;
}

.home .row > *{
    padding: 0 2rem;
}

/*carousel*/
.home .carousel .arrow i{
    color: grey;
    font-weight: bolder;
    font-size: 2rem;
    padding: .5rem .8rem;
}

.home .carousel .arrow i:hover{
    /*border: 1px solid grey;*/
    /*border-radius: 50%;*/
    text-shadow: 1px 1px 2px grey, 0 0 25px white, 0 0 5px white;
}

.home .carousel .arrow:hover{
    text-shadow: 1px 1px 2px grey, 0 0 25px white, 0 0 5px white;
}

.carousel-control-next, .carousel-control-prev {
    align-items: unset !important;
    margin-top: 20rem;
}

#home-mobile{
    height: 450px;
}

/*promote*/
#promote {
    background: #003E59;;
}

#promote .row > *{
    margin-top: unset !important;
}

#promote .card{
    border-radius: 15px;
}

#promote .card .icon i{
    margin-top: 1rem;
    font-size: 2rem;
    transition: all .9s ease;
}

#promote .card:hover .icon i{
    transform: rotate(360deg);
}

#features i{
    margin-top: 1rem;
}

/*section1*/
.section1 .container, .section2 .container{
    text-align: justify;
}

.section1 .img-pers{
    /*perspective: 1500px;*/
    /*transform-style: preserve-3d;*/
}

.section1 img{
    /*transform:  rotateY(30deg) rotateX(10deg);*/
    z-index: 1;
}

.section1 p,.section2 p{
    font-size: 1.1rem;
}

ul li{
    font-size: 1.1rem ;
    color: #003E59;
}

.check-icon{
    color: #79d6ff;
    font-size: 1.2rem;
}

.imgbox {
  position:relative;
}

.imgbox::after {
  content:'';
  position: absolute;
  z-index:-1;
  bottom:-24px;
  left:-24px;
  width:100%;
  height:100%;
  background: rgba(8, 94, 131,.1);
  border-radius: 5px;
}

.imgbox2 {
  position:relative;
}

.imgbox2::after {
  content:'';
  position: absolute;
  z-index:-1;
  bottom:-24px;
  right:-24px;
  width:100%;
  height:100%;
  background: rgba(8, 94, 131,.1);
  border-radius: 5px;
}


/*mobile app*/
.mobile{
    background: #ff7f27;
}

.mobile img{
    background: transparent;
}


.mobile .card{
    width: 280px;
    border-radius: 20px;
    border: none;
    margin: .5rem auto;
    font-size: .9rem;
    position: relative;
    text-transform: uppercase;
    padding-top: 5px;
}

.mobile .card .icon{
    position: absolute;
    margin-left: .7rem;
    font-size: 1.7rem;
    color: orange;
}

/*features*/
#features{
    background:  #fff ;
}

#features .card{
    border: 0px solid #fff;
    background: #f6f6f6;
    color: #000;
    max-height: 90%;
    font-size: .8rem;
}

#features .card-title{
    letter-spacing: 0px !important;
}

#features .card:hover{
    background: #e9e9e9;
}

#features i{
    font-size: 2rem;
}

/*contact*/
#contact{
    border: none;
}

.contact{
    background-color: #003E59;
}

.contact .container{
    max-width: 700px;
}

.contact .btn{
    color: #003E59;
    border-radius: 5px;
}
.contact .btn:hover{
    background: #FF7F27;
    color: white !important;
    border: 1px solid orange !important;
}

/*contact-form*/
.contact-form{
    background: #fff;
}

#contact-form-section, #section2{
    background: #eefaff;
}

.contact-form{
   
}

#contact-form-section h3{
    color: #003E59;    
    padding-bottom: 1rem;
}

.contact-form label{
    font-size: .75rem;
    margin: 0;
    padding: 0;
}

.contact-form input, .contact-form textarea{
    /*border-top: 3px solid #085E83;*/
    margin: 0 0 1rem 0;
    font-size: .8rem;
}

.contact-form .btn{
    background: white;
    border: 1px solid #003E59;
    color: #003E59;
}

.contact-form .btn:hover{
    background: #003E59;
    color: white;
}

#CAPTCHA_IMG2{
    margin-top: -.75rem;
}

/* contact us page*/
#contact-page-section{
    padding-top: .5rem ;
}
#contact-page-section h3, #current_page_content h3{
    color: #FF7F27;    
    padding-bottom: 1rem;
    text-transform: uppercase;
    text-align: center !important;
}

.contact-page-form .form-label{
    font-size: .8rem;
    margin: 0;
    padding: 0;
}

.contact-page-form input, .contact-page-form textarea{
    /*border-top: 3px solid #FF7F27;*/
    margin: 0 0 1rem 0;
    font-size: .8rem;
}

.contact-page-form .btn{
    background: #FF7F27;
    color: white;
}

.contact-page-form .btn:hover{
    background: #E35D00;
    color: white;
}

#contact-page-section iframe{
    margin-top: 5rem;
}

/*current_page*/
#current_page_content{
    text-align: justify;
    background: white;
    font-size: .9rem;
    margin-bottom: 13rem;
}

#current_page_content h4{
    color: #FF7F27;
}

#current_page_content ul li{
    font-size: .9rem;
    color: #727B83;
}

/*footer*/
footer .footer-brand{
    color: #003d58;
}

footer a{
    color: #003d58;
    font-size: .9rem;
    line-height: 1.4rem !important;
}

footer a:hover{
    text-decoration: underline;
    color: #ff7f27;
}

footer h6{
    color: #003d58;
    font-size: .95rem;
}

footer li{
    font-size: .8rem;
    line-height: 1.4rem !important;
    color: unset;
}

footer .footer-ts, .footer-ts a{
    color: #6c757d;;
    font-size: .7rem;
}

footer .footer-ts a:hover{
    cursor: pointer;
    color: black !important;
}

a#abrandimg2{
        right: -800px;
        position: absolute; 
    }

/*Responsive css*/
@media (max-width: 1000px) {

    .navbar{
        /*transition: display none;*/
    }
    
    .navbar .container .navbar-collapse {
        top: 0;
        height: 100vh;
        width: 80vw;
        display: flex;
        text-align: center;
        justify-content: center;
        position: absolute;
        background: white;
        z-index: 200;
        right: 0;
        align-items: start !important;
        padding-top: 6rem;
        /*transition: none !important;*/
        background: #003E59;;
        transition: right .1s !important;
    }
    .navbar .container .navbar-collapse .adjust-nav{
        /*width: 80%;*/
        /*padding-bottom: 10%;*/
        /*border-bottom: 1px solid white;*/
    }
    
    .navbar .navbar-collapse .navbar-nav .nav-item a {
        color: #fff;
        font-size: 1.3rem;
        padding: 1rem;
    }
    
    .navbar .navbar-collapse .navbar-nav .nav-item:hover a {
        color: orange;
    }

    .navbar .collapse:not(.show) {
        display: block !important;
        right: -1200px;
        transition: right .6s !important;
        top: 0;
    }
    
    .navbar .container
    
    body{
        margin-top: 3rem !important;
    }
    
    .container{
        text-align: center;
    }
    
    form .container label{
        float: left;
    }
    
    .display-4{
        padding-top: -4rem !important;
    }
    
    .home{
        min-height: 940px !important;
    }
    
    #home{
        margin-top: -2rem;
    }
    
    #home .home-img{
        margin-top: 2rem;
    }
    
    .home .container div{
        margin-top: -1rem;
    }
    
    #home h1{
        color: #FF7F27;
        font-weight: 400;
        font-size: 2.5rem;
    }
    
    #home-mobile{
    height: 400px;
}

.carousel-control-next, .carousel-control-prev {
    align-items: unset !important;
    margin-top: 40vh;
}
    
    h2{
        font-size: 2.5rem !important;
    }

    .navbar a.navbar-brand {
        font-size: 1rem;
    }
    
    .navbar a.navbar-brand img{
        height: 40px;
    }
    
    #promote .row > *{
        margin-top: 1rem !important;
    }

    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
    
    #section2 svg{
        margin-bottom: -20rem;
    }

    footer .container{
        margin-top: 1rem;
        text-align: left;
    }
    
    .scrolled{
        height: unset !important;
        padding: 0rem !important;
    }
    
    .scrolled-img{
        height: 2rem !important;
        transition: all .9s ease-in;
    }
    
    .navbar ul li{
        font-size: .9rem ;
        /*border-bottom: 1px solid #dbdbdb;*/
        /*text-align: left;*/
    }
    
    /*.navbar .adjust-nav{*/
    /*    right: -500px;*/
    /*    display: flex;*/
    /*    justify-content: center;*/
    /*    align-items: center;*/
    /*}*/
    
    .m-section{
        margin-top: 3rem !important;
    }
    
    a#abrandimg2{
        right: auto;
        bottom: 7rem !important; 
        position: absolute; 
    }
}

@media (max-width: 1200px) and (min-width: 980px) {
        .navbar .navbar-nav .nav-item {
        padding: 0 .1rem !important;
        font-size: 1rem;
    }
}