:root {
    --pcol: #D71616;
    --scol: #F0F0F0;
    --wht: #ffffff;
    --sfont: #828282;
  }
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: poppins;
}
body{
    background-color: #F3F3F3;
}
header{
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    background-color: var(--wht);
}
.header-wrapper{
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--wht);
    padding: 10px 15px;
}
.header-menu-lists{
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    padding: 0;
}
.header-menu-lists li {
    margin-right: 35px;
}
.header-menu-lists li a{
    color: var(--pcol);
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
}
.header-rhs{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.header-login-btn{
    background-color: var(--pcol);
    color: var(--wht);
    padding: 12px 25px;
    font-size: 15px;
    text-decoration: none;
    border-radius: 10px;
    display: flex;
}
.logo{
    width: 110px;
}
.mob-sidebar-icon, .mob-header-login-icon{
    display: none;
}
@media only screen and (max-width: 768px){
    .header-menu-items{
        display: none;
    }
    .header-login-btn{
        display: none;
    }
    .mob-sidebar-icon, .mob-header-login-icon{
        display: flex;
        cursor: pointer;
    }
    .mob-sidebar-icon img{
        width: 25px;
    }
    .mob-header-login-icon{
        margin-right: 15px;
    }
    .mob-header-login-icon img{
        width: 25px;
    }
}
.mob-side-menus{
    list-style: none;
    padding: 0;
    margin-left: 15px;
}
.mob-side-menus li{
    margin-bottom: 10px;
}
.mob-side-menus li a{
    color: var(--pcol);
    font-weight: 500;
}
.hm-banner-wrapper{
    max-width: 1400px;
    margin: 0 auto;
}
.hm-banner-contents{
    background-image: url(../bus_images/bus.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 400px;
    border-radius: 10px;
    margin-top: 15px;
    position: relative;
}
.hm-banner-titles{
    position: absolute;
    top: 40%;
    left: 5%; 
}
.hm-banner-contents h1{
  color: var(--wht);
  font-weight: 600;
  font-size: 30px; 
  text-transform: capitalize;   
}
.hm-banner-contents h6{
    color: var(--wht);
  font-weight: 400;
  font-size: 15px;
  line-height: 24px; 
  width: 80%;
}
@media only screen and (max-width: 768px){
    .hm-banner-titles{
        top: 30%;
    }
    .hm-banner-contents h6{
      width: 100%;
    }
}
.home-search-wrapper{
    max-width: 1400px;
    margin: 0 auto;
    z-index: 2;
    position: relative;
}
.home-search-inside-container{
    width: 90%;
    border-radius: 10px;
    background-color: var(--wht);
    margin: -100px auto 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 30px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.input-container label{
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 10px;
}
@media only screen and (max-width: 992px){
    .home-search-inside-container{
        display: block;
    }
}
.input-container{
    margin-right: 10px;
    width: 100%;
}
.input-box{
    position: relative;
}
.input-container img{
    position: absolute;
    top: 12px;
    left: 10px;
    width: 25px;
}
.input-container input{
    background-color: var(--scol);
    border: none;
    padding: 12px;
    width: 100%;
    border-radius: 8px;
    color: #555454;
    outline: none;
    text-indent: 35px;
}
.input-interchangebtn{
    margin-right: 10px;
    margin-bottom: 8px;
}
.input-interchangebtn button{
    border: none;
    background: none;
    outline: none;
}
@media only screen and (max-width: 992px){
    .input-interchangebtn{
        margin-top: 10px;
        margin-bottom: 0;
       text-align: center;
    }
    .input-interchangebtn img{
        transform: rotate(90deg);
    }
}
.input-container select{
    background-color: var(--scol);
    border: none;
    padding: 13px;
    width: 100%;
    border-radius: 8px;
    color: #555454;
    outline: none;
    text-indent: 35px;
    cursor: pointer;
    font-size: 15px;
}
.search-btn button{
    background-color: var(--pcol);
    color: var(--wht);
    border: none;
    border-radius: 8px;
    padding: 13px;
    width: 200px;
}
@media only screen and (max-width: 1200px){
    .search-btn button{
        width: 100px;
    }
}
@media only screen and (max-width: 992px){
    .time-label{
        margin-top: 10px;
    } 
    .search-btn{
        margin-top: 15px;
    }
    .search-btn button{
        width: 100%;
    }
}
.listing-main-wrapper{
    max-width: 1400px;
    margin: 30px auto;
    padding: 0 15px;
}
.header-route{
    font-size: 17px;
    font-weight: 500;
}
.header-lisitng-arrow{
    margin: 0 15px;
}
.header-listing-sp{
    margin: 0 15px;
    font-weight: 500;
    font-size: 18px;
}
.header-time{
    color: #696969;
    font-size: 14px;
}
.header-buses-found{
    font-size: 17px;
    font-weight: 500;
}
.lisiting-page-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
@media only screen and (max-width: 992px){
    .lisiting-page-header{
        flex-direction: column;
        align-items: flex-start;
    }
    .header-buses-found{
        margin-top: 10px;
        color: var(--pcol);
    }
}
.listing-titles-wrapper{
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 15px;
}
.listing-head-wrapper{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    background-color: var(--wht);
    padding: 10px 15px;
}
.title-operator-name{
    font-size: 15px;
    color: var(--sfont);
    width: 20%;
}
.title-departure{
    font-size: 14px;
    color: #AC5151;
    width: 16.6666%;
    text-align: center;
}
.title-duration{
    font-size: 14px;
    color: var(--sfont);
    width: 16.6666%;
    text-align: center;
}
.title-arrival{
    font-size: 14px;
    color: #AC5151;
    width: 16.6666%;
    text-align: center;
}
.arrow-spacing{
    width: 5%;
}
.title-routes{
    font-size: 15px;
    color: var(--sfont);
    width: 20%;
    text-align: right;
}
@media only screen and (max-width: 992px){
    .listing-titles-wrapper{
        display: none;
    }
}
.listing-cards-wrapper{
    max-width: 1400px;
    margin: 30px auto;
    padding: 0 15px;
}

@media only screen and (max-width: 992px){
    .listing-cards-wrapper{
        display: none;
    }
}
.listing-card{
    background-color: var(--wht);
    padding: 20px 15px;
    border-radius: 10px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin-top: 20px;
}
.card-operator-details{
    width: 20%;
}
.c-operator-name{
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
}
.c-bus-seats-nos{
    color: var(--sfont);
    font-size: 14px;
}
.card-departure{
    width: 16.6666%;
    text-align: center;
}
.c-departure-time{
    font-size: 16px;
    font-weight: 500;
}
.c-departure-location{
    font-size: 14px;
    color: var(--sfont);
    text-transform: capitalize;
}
.card-arrow{
    width: 5%;
    text-align: center;
}
.card-duration{
    width: 16.6666%;
    text-align: center;
    font-size: 14px;
    color: var(--sfont);
}
.card-arrival{
    width: 16.6666%;
    text-align: center;
}
.c-arrival-time{
    font-size: 16px;
    font-weight: 500;
}
.c-arrival-location{
    font-size: 14px;
    color: var(--sfont);
    text-transform: capitalize;
}
.card-view-btn{
    width: 20%;
    text-align: right;
}
.card-view-btn button{
    background-color: var(--pcol);
    color: var(--wht);
    font-size: 15px;
    padding: 5px 35px;
    border-radius: 8px;
    border: none;
    outline: none;
}
.listing-card .collapse{
    margin-bottom: 20px;
}
.card-body{
    border-bottom: none !important;
    border-right: none !important;
    border-left: none !important;
    border-radius: 10px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.collapse-body{
    display: flex;
    justify-content: space-between;
}
.bordingpoints-wrapper{
    width: 50%;
}
.droppingpoints-wrapper{
    width: 50%;
}
.title-boardingpnt{
    font-size: 15px;
    font-weight: 500;
}
.boarding-points-list{
    margin-top: 15px;
    padding: 0; 
    list-style: none;
    column-count: 2;
}
@media only screen and (max-width: 992px){
    .boarding-points-list{
        column-count: unset;
    }
    .collapse-body{
        display: block;
    }
    .bordingpoints-wrapper{
        width: 100%;
    }
    .droppingpoints-wrapper{
        width: 100%;
    }
    .title-boardingpnt{
        color: var(--pcol);
    }
}
.boarding-points-list li{
    display: flex;
    margin-bottom: 5px;
}
.boardingpnt-time{
    margin-right: 25px;
    font-size: 14px;
    font-weight: 500;
    width: 70px;
}
.boardingpnt-loc{
    font-size: 14px;
    color: var(--sfont);
}
.card-listing-mob-view-container{
    display: none;
    padding: 0 15px;
}
@media only screen and (max-width: 992px){
    .card-listing-mob-view-container{
        display: block;
    }
}
.card-listing-mob-view{
    background-color: var(--wht);
    padding: 20px 15px;
    border-radius: 10px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    width: 100%;
    margin-top: 20px;
}
.c-list-mob-operator-name{
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
}
.c-list-mob-seats-nos{
    color: var(--sfont);
    font-size: 14px;
}
.c-list-mob-timings{
    margin-top: 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.c-list-mob-depature{
    font-size: 16px;
    font-weight: 500;
}
.c-list-mob-time-sp{
    margin: 0 10px;
}
.c-list-mob-total-time{
    font-size: 12px;
    border: 1px solid var(--sfont);
    color: var(--sfont);
    padding: 3px 8px;
    border-radius: 5px;
}
.mob-arrow{
    margin: 0 20px;
}
.c-list-mob-more-btn{
    border-top: 1px solid #9c9c9c6c;
    margin-top: 15px;
}
/* @media only screen and (max-width: 568px){
    .c-list-mob-more-btn{
        text-align: right;
    }
} */

.c-list-mob-more-btn button{
    background-color: var(--pcol);
    color: var(--wht);
    font-size: 15px;
    padding: 5px 35px;
    border-radius: 8px;
    border: none;
    outline: none;
    margin-top: 15px;
}