@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
/*================================================================================
    Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
    Version: 2.0
    Author: PIXINVENT
    Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */
li.nav-item.nav-toggle {
  margin-top: 10px !important;
}

.collapse-toggle-icon {
  margin-right: -0.575rem !important;
}

.brand-logo img {
  width: 40px;
  margin-left: 0 !important;
  box-shadow: 1px 0px 11px -4px #FFF;
}

a {
  color: #B4141E;
  text-decoration: none;
}

.bg-primary {
  --bs-bg-opacity: 1;
  background-color: #B4141E !important;
}

.page-item.active .page-link {
  background-color: #B4141E !important;
}

.dropdown-item:hover, .dropdown-item:focus {
  color: #B4141E;
  background-color: #b4141e38;
}

.main-menu.menu-light {
  background: black;
}
.main-menu.menu-light .navigation {
  background: unset !important;
}

.main-menu.menu-light .navigation li a {
  color: #fff;
}

.main-menu.menu-light .navigation > li.active > a {
  background: linear-gradient(118deg, #B4141E, #b4141ebf);
  box-shadow: 0 0 4px 1px #B4141E;
  color: #FFF !important;
  font-weight: 400;
  border-radius: 4px;
}

.main-menu.menu-light .navigation > li ul .active {
  background: linear-gradient(118deg, #B4141E, #b4141ebf);
  box-shadow: 0 0 4px 1px #B4141E;
  border-radius: 4px;
  z-index: 1;
}

.main-menu.menu-dark .navigation > li ul .active {
  background: linear-gradient(118deg, #B4141E, #b4141ebf);
  box-shadow: 0 0 4px 1px #B4141E;
  border-radius: 4px;
  z-index: 1;
}

.dark-layout .main-menu .collapse-toggle-icon {
  color: #B4141E !important;
}

.btn-primary {
  border-color: #B4141E !important;
  background-color: #B4141E !important;
  color: #fff !important;
}

.btn-primary:hover:not(.disabled):not(:disabled) {
  box-shadow: 0 8px 25px -8px #B4141E;
}

.btn-primary:focus, .btn-primary:active, .btn-primary.active {
  color: #fff;
  background-color: #B4141E !important;
}

.input-group:not(.bootstrap-touchspin):focus-within .form-control, .input-group:not(.bootstrap-touchspin):focus-within .input-group-text {
  border-color: #B4141E;
  box-shadow: none;
}

.form-control:focus {
  border-color: #B4141E;
}

.form-check-input:checked {
  background-color: #B4141E;
  border-color: #B4141E;
}

.auth-wrapper.auth-basic {
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: black;
  flex-direction: column;
}
.auth-wrapper.auth-basic .auth-inner {
  max-width: 400px;
  box-shadow: 0px 1px 38px -5px whitesmoke;
}
.auth-wrapper.auth-basic .auth-inner .brand-text {
  color: #B4141E;
}
.auth-wrapper.auth-basic .SITE-LOGO a.brand-logo img {
  width: 100%;
}

td.action-area {
  display: flex;
  height: 14vh;
  align-items: center;
}

td.action-areas {
  display: flex;
  align-items: center;
}

.feather-plus {
  color: white !important;
}

.me-1 {
  margin-right: 1rem !important;
  background: transparent;
  border: 0;
  color: #B4141E;
}

.me-1:hover {
  color: grey;
}

p {
  margin-bottom: 0;
}

.nav-pills .nav-link.active {
  background-color: #B4141E;
  border-color: #B4141E;
  box-shadow: 0 4px 18px -4px #B4141E;
}

.v-avatar {
  background: whitesmoke;
  box-shadow: 0px 0px 5px 0px #8080808c;
  position: relative;
  width: 45%;
  margin: 10px;
}
.v-avatar .rides-status {
  position: absolute;
  right: 29px;
  top: 22px;
  padding: 4px;
  background: #0080002e;
  color: green;
}

.vehicle-img {
  background: whitesmoke;
  width: 100%;
  height: 250px;
  display: flex;
  align-items: center;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
  box-shadow: 0px 8px 10px 0px #80808047;
  justify-content: center;
}

.content-wrapper .form-group img.img-fluid.rounded {
  width: 200px;
  height: 250px;
  -o-object-fit: cover;
     object-fit: cover;
  max-width: 400px;
}

.info-container .progress {
  margin-top: 15px;
}
.info-container .progress .progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  transition: width 0.6s ease;
}

span.text-strong.textdanger {
  color: red;
}

span.active,
span.Active {
  color: #00cfe8;
  background: #00cfe81a;
  padding: 1px 10px;
  border-radius: 5px;
  border: 1px solid #00cfe8;
}

span.accepted {
  color: #3f059b;
  background: #3f059b0d;
  padding: 1px 10px;
  border-radius: 5px;
  border: 1px solid #3f059b;
}

span.completed {
  color: orange;
  background: #ffa5001f;
  padding: 1px 10px;
  border-radius: 5px;
  border: 1px solid orange;
}

span.cancel {
  color: #B4141E;
  background: #ff000014;
  padding: 1px 10px;
  border-radius: 5px;
  border: 1px solid #B4141E;
}

span.confirmed {
  color: #00cfe8;
  background: #00cfe84a;
  padding: 1px 10px;
  border-radius: 5px;
  border: 1px solid #00cfe8;
}

span.end_trip {
  color: #cc54ea;
  background: #cc54ea52;
  padding: 1px 10px;
  border-radius: 5px;
  border: 1px solid #cc54ea;
}

span.goto_pickup {
  color: #99bd3d;
  background: #2d893e03;
  padding: 1px 10px;
  border-radius: 5px;
  border: 1px solid #99bd3d;
}

span.start_trip {
  color: #2341d9;
  background: #2341d940;
  padding: 1px 10px;
  border-radius: 5px;
  border: 1px solid #2341d9;
}

span.canceled {
  color: #b4141e;
  background: #b4141e26;
  padding: 1px 10px;
  border-radius: 5px;
  border: 1px solid #b4141e;
}

svg.down {
  position: absolute;
  right: 23px;
  bottom: 138px;
}

svg.downloads {
  position: absolute;
  right: 52%;
  bottom: 13%;
}

.card-header {
  padding: 1rem 1.5rem;
}

.card-body {
  padding: 1.5rem 0.4rem;
}

.svg-icon-star.d-flex {
  padding: 2px 0;
}

span.cancel, span.canceled {
  color: #B4141E;
  background: #ff000014;
  padding: 1px 10px;
  border-radius: 5px;
  border: 1px solid #B4141E;
}

span.confirmed {
  color: green;
  background: #90ee9059;
  padding: 1px 10px;
  border-radius: 5px;
  border: 1px solid green;
}

span.end_trip {
  color: green;
  background: #90ee9059;
  padding: 1px 10px;
  border-radius: 5px;
  border: 1px solid green;
}

.single-line {
  white-space: nowrap;
}

svg.downloading {
  position: absolute;
  right: 1%;
  bottom: 242px;
}

svg.downloadingss {
  position: absolute;
  right: 1%;
  bottom: 94px;
}

.card {
  position: relative;
}




.chat-container {
  margin: 0 auto;
  width: 100%;
  background: #444753;
  border-radius: 0;
  display: flex;
}

.people-list {
  width: 260px;
}

.people-list .search {
  padding: 20px;
}

.people-list input {
  border-radius: 3px;
  border: none;
  padding: 14px;
  color: white;
  background: #6a6c75;
  width: 90%;
  font-size: 14px;
}

.people-list .fa-search {
  position: relative;
  left: -25px;
}

.people-list ul {
  padding: 20px;
  height: 100%;
  max-height: 750px;
  overflow-x: visible;
  overflow-y: auto;
}

.people-list ul li {
  padding-bottom: 20px;
}

.people-list img {
  float: left;
}

.people-list .about {
  float: left;
  margin-top: 8px;
}

.people-list .about {
  padding-left: 8px;
}

.people-list .status {
  color: #92959e;
}



.custome-close-button {
  position: absolute;
  right: 13px;
}

.chat .chat-header {
  padding: 20px;
  border-bottom: 2px solid white;
}

.chat .chat-header img {
  float: left;
}

.chat .chat-header .chat-about {
  float: left;
  padding-left: 10px;
  margin-top: 6px;
}

.chat .chat-header .chat-with {
  font-weight: bold;
  font-size: 16px;
}

.chat .chat-header .chat-num-messages {
  color: #92959e;
}

label {
  color: #000000b3;
}

.chat .chat-header .fa-star {
  float: right;
  color: #d8dadf;
  font-size: 20px;
  margin-top: 12px;
}

.chat .chat-history {
  padding: 30px 30px 20px;
  border-bottom: 2px solid white;
  overflow-y: auto;
      scrollbar-width: thin;
    scrollbar-color: #888 white;
  height: 400px;
}

.chat .chat-history .message-data {
  margin-bottom: 15px;
}

.chat .chat-history .message-data-time {
  color: #a8aab1;
  padding-left: 6px;
}

.chat .chat-history .message {
  color: white;
  padding: 2px 20px;
  line-height: 26px;
  font-size: 16px;
  margin-bottom: 10px;
  position: relative;
}

/*.chat .chat-history .message:after {
  bottom: 100%;
  left: 7%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-bottom-color: #86bb71;
  border-width: 10px;
  margin-left: -10px;
}*/

.chat .chat-history .my-message {
  background: #86bb71;
}

.chat .chat-history .other-message {
  background: #94c2ed;
}

.chat .chat-history .other-message:after {
  border-bottom-color: #94c2ed;
  right: 93%;
}



.chat .chat-message textarea {
  width: 100%;
  border: none;
  padding: 0px 10px;
  font: 14px/22px "Lato", Arial, sans-serif;
  margin-bottom: 10px;
  border-radius: 5px;
  resize: none;
}

.chat .chat-message .fa-file-o,
.chat .chat-message .fa-file-image-o {
  font-size: 16px;
  color: gray;
  cursor: pointer;
}

.chat .chat-message button {
  float: right;
  color: #94c2ed;
  font-size: 16px;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  font-weight: bold;
  background: #f2f5f8;
}

.chat .chat-message button:hover {
  color: #75b1e8;
}

.online,
.offline,
.me {
  margin-right: 3px;
  font-size: 10px;
}

.online {
  color: #86bb71;
}

.offline {
  color: #e38968;
}

.me {
  color: #94c2ed;
}

.align-left {
  text-align: left;
}

.align-right {
  text-align: right;
}

.float-right {
  float: right;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.panel {
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 5px;
  margin-bottom: 20px;
  font-family: "Montserrat", Helvetica, Arial, serif;
}

.panel-heading {
  font-family: "Montserrat", Helvetica, Arial, serif;
  background-color: #000000;
  color: #FFFF;
  padding: 15px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  font-weight: bold;
}

.panel-body {
  padding: 15px;
}

.form-group {
  font-family: "Montserrat", Helvetica, Arial, serif;
  margin-bottom: 15px;
  margin: auto;
  padding-top: 1rem;
}

.btn-primary {
  font-family: "Montserrat", Helvetica, Arial, serif;
  background-color: #28a745;
  border-color: #28a745;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.btn-primary:hover {
  background-color: #218838;
}

.text-mute {
  font-family: "Montserrat", Helvetica, Arial, serif;
  color: #5e5873 !important;
}

.alert {
  margin-top: 20px;
  border-radius: 5px;
}

.live-fields, .test-fields {
  font-family: "Montserrat", Helvetica, Arial, serif;
  width: 90%;
 
  margin: auto;
  padding: 1rem 0;
}

@media (max-width: 768px) {
  .container {
    padding: 10px;
  }

  .btn-primary {
    width: 100%;
  }
}
.section1 {
  background-repeat: no-repeat;
  background-attachment: fixed;
  width: 100%;
  height: 974px;
  text-align: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  box-shadow: inset 0 0 0 100vw rgba(0, 0, 0, 0.5);
}

.section1 .sec1-main {
  display: flex;
  justify-content: space-around;
  padding-top: 51px;
}

.section1 .sec1-div1 {
  text-align: left;
  margin-top: 70px !important;
}

.section1 .welcome {
  font-size: 93px;
}

.section1 .neeplace {
  font-size: 86px;
  padding-right: 108px;
}

.section1 .sec1-download-img {
  display: flex;
  justify-content: flex-start;
  margin-top: 50px;
  gap: 22px;
}

.play-store-img {
  width: 100%;
  max-width: 245px;
  background-color: #FFF;
  border-radius: 10px;
}

.app-store-img {
  background-color: #FFF;
  border-radius: 10px;
  width: 100%;
  max-width: 245px;
}

.Splash {
  width: 100%;
  max-width: 365px;
  -o-object-fit: cover;
  object-fit: cover;
}

.section3 {
  background-repeat: no-repeat;
  background-size: cover;
}

.section3 .sec3-main {
  padding: 50px 0px 20px 0px;
}

.section3 .sec3-heading {
  font-size: 65px;
  font-weight: 600;
  margin: 2px 85px 40px;
}

.section3 .title {
  font-size: 20px;
  font-weight: 800;
}

.section3 .card-body {
  padding: 0px !important;
  flex: 0 0 auto !important;
}

.section3 h5.card-title.text-center {
  font-size: 33px;
  color: #FFF;
}

.section3 .sec3-div-button {
  margin: auto;
  text-align: center;
}

.sec3-button {
  color: #FFF !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 20px !important;
  border-radius: 50px !important;
  margin: 18px 0px 26px 0px;
  padding: 11px 18px 11px 18px !important;
}

.section3 .slider {
  max-width: 1153px;
  display: flex;
  margin: auto;
  gap: 20px !important;
}

.section3 .slider .card {
  flex: 1;
  margin: 0 15px;
  background-color: #FFF;
}

.section3 .slider .card .img {
  height: 200px;
  width: 100%;
}

.section3 .slider .card .img img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.section3 .slider .card .content {
  padding: 10px 20px;
}

.section3 .card .content .title {
  font-size: 25px;
  font-weight: 600;
}

.section3 .card .content .sub-title {
  font-size: 20px;
  font-weight: 600;
  color: #b4141e;
  line-height: 20px;
}

.section3 .card .content p {
  text-align: justify;
  margin: 10px 0;
}

.section3 .card .content .btn {
  display: block;
  text-align: left;
  margin: 10px 0;
}

.section3 .card .content .btn button {
  background-color: #b4141e;
  color: #FFF;
  border: none;
  outline: none;
  font-size: 17px;
  padding: 5px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.2s;
}

.section3 .card .content .btn button:hover {
  transform: scale(0.9);
}

.section3 .slider .card .img {
  height: 630px;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.section3 .card {
  background-repeat: no-repeat !important;
  background-size: cover !important;
  width: 100%;
  max-width: 350px;
  text-align: center !important;
  position: relative !important;
  padding: 20px 20px 20px 20px !important;
  border-radius: 26px !important;
  border: solid !important;
}

.section5 {
  background-color: #1d1d1d;
}

.sec5-media i {
  font-size: 30px;
  margin: 12px 10px;
}

i.fa.fa-instagram {
  color: #FFF;
  /* rgba(150,47,191,0.3) */
}

i.fa.fa-twitter {
  color: #FFF;
  /* lightskyblue */
}

i.fa.fa-facebook-f {
  color: #FFF;
  /* blue */
}

.section6 .sec6-main {
  font-size: 15px;
}

.section6 a.a-contact:hover, .section6 .a-email:hover {
  color: #38B16B;
}

section.services {
  background-repeat: no-repeat !important;
  background-size: cover !important;
  width: 100%;
  height: auto;
  background-repeat: no-repeat;
  border-radius: 20% 20% 0 0;
}

.launching_section img.app-display-img {
  width: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  max-width: 300px;
}

.sec5-media a {
  padding: 0 5px;
}

.mobile-login-btn {
  display: none;
}

.login-btn {
  display: none;
}

@media screen and (max-width: 947px) {
  .owl-item {
    text-align: center;
    margin: auto;
    display: flex;
    justify-content: center;
  }

  .sec3-div-button {
    visibility: hidden;
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .container {
    max-width: 100% !important;
  }

  .mobile-login-btn {
    display: none;
  }

  .login-btn {
    display: none;
  }

  .heading {
    font-size: 40px;
  }

  .col-6 {
    flex: 0 0 auto;
    width: 100% !important;
  }

  .section1 {
    height: 1170px !important;
  }

  .sec1-main {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
  }

  .section1 .sec1-div1 {
    margin-top: 6px !important;
  }

  .section1 .logo-div {
    margin: auto;
    text-align: center;
  }

  .section1 .neeplace-logo {
    max-width: 156px;
    width: 100%;
  }

  .app-store-img {
    max-width: 238px !important;
    width: 100%;
  }

  .play-store-img {
    max-width: 238px !important;
    width: 100%;
  }

  .section1 .welcome {
    font-size: 57px;
    text-align: center;
  }

  .section1 .neeplace {
    font-size: 57px;
    text-align: center !important;
    padding-right: 0px !important;
  }

  .section1 .sec1-div2 {
    display: flex;
    justify-content: flex-end;
    margin-top: 35px;
  }

  .Splash, .section2 {
    height: 511px;
    max-width: 249px;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    text-align: center;
    margin: auto;
    /*height: 385px;
    max-width: unset;
    margin: auto;*/
  }

  .sec2-div2 {
    margin-top: 20px;
  }

  .sec2-main {
    display: flex;
    flex-direction: column;
  }

  .section2 .sec2-heading {
    font-size: 29px;
    text-align: center;
  }

  .section2 .sec-2p {
    font-size: 15px;
    text-align: center;
  }

  .sec2-div-button {
    text-align: center;
  }

  .sec1-download-img {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .section3 .sec3-heading {
    font-size: 29px;
  }

  .sec4-download-img {
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  .col-4 {
    flex: 0 0 auto;
    width: 100% !important;
  }

  .sec5-div1.col-4 {
    text-align: center;
    margin-bottom: 20px;
  }

  .section5 .sec5-div2.col-4 {
    text-align: center;
  }

  .section5 .sec5-media {
    display: flex;
    flex-direction: row;
  }

  .section3 .slider .card .img img {
    max-width: 300px;
    margin: auto;
  }

  .section5 .slider .card {
    margin: auto;
  }

  .video-container {
    width: 100%;
  }

  iframe {
    width: 100%;
    max-width: 400px;
    height: 300px;
  }

  section.services.p-3 {
    margin-top: 30px;
    border-radius: 70px 70px 0 0;
  }

  .sec2-div1 .Splash {
    height: 385px;
    max-width: unset;
    margin: auto;
  }

  .launching_section img.app-display-img {
    margin: auto;
    display: block;
  }

  .section-description h1, .section-description p {
    text-align: center !important;
  }

  .section-description button {
    margin: auto;
    display: block;
  }

  .sec4-download-img .app-store {
    padding-right: 0 !important;
    padding-bottom: 10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .video_session .row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .video_session .row .col-md-6:nth-child(2) {
    width: 100%;
  }

  .Splash {
    max-width: 300px;
  }

  .sec5-div1 h5.text-white, .sec5-div2 h5.text-white {
    font-size: 16px;
  }

  .sec5-media i {
    font-size: 20px;
  }

  .section1 .welcome, .section1 .neeplace, .heading, .section3 .sec3-heading {
    font-size: 50px;
  }
}
.Copyright-area {
  background: #000;
}

.services p.text-center, .video_session p.para, .launching_section p {
  color: #000000e0;
  font-size: 16px;
}

.services h1 {
  font-size: 65px;
  font-weight: 600;
  margin: 2px 85px 40px;
}