* {
  font-family: 'Benton', sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}

/* Regular */
@font-face {
    font-family: "Benton";
    src: url("fonts/Benton Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
}

/* Bold */
@font-face {
    font-family: "Benton";
    src: url("fonts/Benton Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
}

body {
    background-color: #fcfcfc;
}
.green {
    color: #15BE77 !important;
}
.logo h1 {
    font-size: 34px;
    font-weight: 700;
}
.nav-item {
    font-size: 20px;
}
.navbar-text {
    font-size: 20px;
    font-weight: normal;
}
.navbar-text button img {
    width: 22px;
    height: 22px;
    margin: 0 5px;
}
.navbar-text button.login {
    width: 145px;
    height: 60px;
    color: #fff;
    font-size: 20px;
    border-radius: 100px;
    background-color: #15BE77;
}
.login.btn-check:checked+.btn, .login.btn.active, .login.btn.show, .login.btn:first-child:active, :not(.login.btn-check)+.login.btn:active {
    color: #fff;
    border: #15BE77;
    background-color: #15BE77;
}
.nav-link  {
    color: #272727;
    font-size: 1.5rem;
}
.nav-link:hover  {
    color: #15BE77;
}

#welcome h2 {
    font-size: 62px;
    color: #000;
    font-weight: 600;
    line-height: 1.5em;
}
#welcome h6 {
    font-size: 32px;
    color: #3B3B3B;
    line-height: 1.5em;
}
#welcome img {
    width: 530px;
   /*height: 530px;*/
}
#welcome p {
    color: #6C6C6C;
}
#welcome .more-btn {
    border: none;
    width: 250px;
    height: 80px;
    color: #fff;
    font-size: 26px;
    border-radius: 100px;
    background: #15BE77;
}
#welcome .more-btn:hover {
    box-shadow: -2px 22px 38px 0px rgba(142, 255, 154, 0.5);
}
#welcome .more-btn img {
    width: 24px;
    height: 21px;
}

#features .box {
    background: #ffffff;
    border-radius: 40px;
    box-shadow: 2px 9px 42px 0px rgba(0, 0, 0, 0.08);
}
#features img {
    width: 116px;
    height: 116px;
}
#welcome h1, #features h2, #howit h2, #pricing h2, #services h2, #download h2 {
    font-size: 60px;
    font-weight: 600;
}
#features h4, #howit h4, #download h4 {
    color: #15BE77;
    font-size: 38px;
    font-weight: 500;
}
#features p, #howit p, #pricing p, #services p {
    color: #6C6C6C;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: 0.3em;
}
#features .box h5 {
    font-size: 28px;
}

#howit h3 {
    font-size: 52px;
    font-weight: 600;
}
#howit h4 {
    font-size: 42px;
    color: #000;
    color: rgba(0, 0, 0, 0.7);
}
#pricing .plan {
    border: 2px solid #ccc;
    border-radius: 40px;
    box-shadow: 2px 9px 42px 0px rgba(0, 0, 0, 0.08);
}
#pricing .plan:hover {
    cursor: pointer;
    border: 2px solid #15BE77;
    border-radius: 40px;
    box-shadow: 2px 9px 42px 0px rgba(0, 0, 0, 0.08);
}
#pricing .plan h2 {
    font-size: 50px;
    color: #000;
}
#pricing .plan h4 {
    color: #000;
    font-size: 30px;
    font-weight: 600;
}
#pricing .plan h5 {
    color: #ccc;
    font-size: 24px;
    font-weight: 600;
}
#pricing .plan li button {
    border: none;
    border-radius: 20px;
    background: #000;
    color: #fff;
    font-weight: 600;
    font-size: 20px;
}
#pricing .plan button {
    font-size: 26px;
    font-weight: 500;
    border: none;
    border-radius: 24px;
    background: #15BE77;
    color: #fff;
    font-weight: normal;
}
#pricing .plan img {
    width: 29px;
    height: 29px;
}
#pricing .plan ul li {
    font-size: 32px;
    font-weight: 400;
}

#services h5 {
    font-size: 26px;
    font-weight: 500;
    color: #555;
}
#services .explore {
    border: none;
    width: 215px;
    height: 80px;
    color: #fff;
    font-size: 22px;
    border-radius: 100px;
    background: #15BE77;
}
#services .explore:hover {
    box-shadow: -2px 22px 38px 0px rgba(142, 255, 154, 0.5);
}
#services .stories {
    border-radius: 40px;
    box-shadow: 2px 9px 42px 0px rgba(0, 0, 0, 0.08);
}
#services .stories img {
    /*width: 64px;*/
    height: 64px;
}
#services .stories h4 {
    color: #000;
    font-weight: 600;
    font-size: 24px;
}
#services .stories h6 {
    color: #777;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2em;
}

#download {
    position: relative;
    background: #15BE77;
    overflow: hidden;
}
#download h2 {
   font-size: 62px;
   font-weight: 600;
}
#download p {
    color: #ffffff;
    font-size: 20px;
    font-weight: 500;
}
#download button {
    height: 60px;
    box-shadow: 0px 20px 40px 0px rgba(21, 190, 119, 0.29), 0px 5px 10px 0px rgba(21, 190, 119, 0.26);
    border: none;
}
.img-mobiles {
    position: absolute;
    bottom: -44%;
    left: 7%;
    height: 600px;
    object-fit: cover;
    overflow: hidden;
}

#footer h2 {
    font-size: 30px;
}
#footer h3 {
    font-size: 26px;
    font-weight: 600;
}
#footer ul li, #footer ul li a {
    font-weight: 400;
    font-size: 24px;
    color: #555;
}
#footer h6 a {
    font-weight: 400;
    font-size: 24px;
    color: #555;
}
#footer p {
    font-size: 24px;
    font-weight: 500;
}

#social .list-group-item {
    background: #edffef;
    border-radius: 100px;
    border: none;
    width: 58px;
    height: 57px;
    margin-right: 25px;
    text-align: center;
}
#social .list-group-item svg {
    position: relative;
    top: 3px;
    height: 24px;
}
#social .list-group-item:hover {
    background: #15BE77;
}
#social .list-group-item:hover svg, #social .list-group-item:hover svg path {
    fill: #fff;
}
#social span {
    color: #555555;
    font-weight: 400;
    font-size: 22px;
}

 .form-container {
      background: #fff;
      border-radius: 12px;
      padding: 2rem;
      margin: 3rem auto;
      max-width: 950px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

    .profile-upload {
      border: 1px solid #dee2e6;
      border-radius: 8px;
      padding: 2rem;
      text-align: center;
      cursor: pointer;
      transition: border 0.2s;
    }
    .profile-upload:hover {
      border-color: #198754;
    }
    .profile-upload i {
      font-size: 2rem;
      color: #6c757d;
    }

    .stepper-nav .nav-link {
        color: #6c757d;
        font-weight: 500;
        padding: 1rem;
        border-radius: 0.5rem;
        transition: all 0.2s ease;
        text-align: left;
        font-size: 1rem;
    }
    .stepper-nav .nav-link.active {
        color: #fff;
        background-color: #15be77;
    }

    .stepper-nav .nav-link:hover {
        color: #fff;
        background-color: #5ecfa0;
    }
    .stepper-nav .nav-link i {
        width: 24px; /* Aligns the text nicely */
    }
    .custom-file-upload {
        border: 2px dashed #ced4da;
        border-radius: 0.5rem;
        padding: 2rem;
        text-align: center;
        cursor: pointer;
        transition: border-color 0.2s ease;
    }
    .custom-file-upload:hover {
        border-color: #0d6efd;
    }
    .custom-file-upload .upload-icon {
        font-size: 2.5rem;
        color: #0d6efd;
    }

    .error{
        color: red;
    }

/*responsive media*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
    #book .mobile-app {
        height: 420px;
    }
    #book img, #features img {
        height: auto;
    }
    #welcome h1, #book h2, #carpooling h2, #drivewithus h2, #ridewithus h2, #download h2 {
        font-size: 36px;
    }
    #book h4, #carpooling h4, #drivewithus h4, #ridewithus h4, #download h4 {
        font-size: 24px;
    }
}
@media only screen and (max-width: 767px) {
    #howit img {
        width: 350px;
    }
    #download p {
        font-size: 18px;
    }
    #welcome h1, #features h2, #aboutus h2, #drivewithus h2, #ridewithus h2, #contact h2, #download h2 {
        font-size: 38px;
    }
    #book h4, #features h4, #carpooling h4, #drivewithus h4, #ridewithus h4, #download h4 {
        font-size: 28px;
    }
}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
    .w-sm-100 {
        width: 100% !important;
    }

    .w-sm-75 {
        width: 75% !important;
    }

    .w-sm-50 {
        width: 50% !important;
    }

    .w-sm-25 {
        width: 25% !important;
    }

    .h-sm-100 {
        height: 100% !important;
    }

    .h-sm-75 {
        height: 75% !important;
    }

    .h-sm-50 {
        height: 50% !important;
    }

    .h-sm-25 {
        height: 25% !important;
    }
}


/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
    .w-md-100 {
        width: 100% !important;
    }

    .w-md-75 {
        width: 75% !important;
    }

    .w-md-50 {
        width: 50% !important;
    }

    .w-md-25 {
        width: 25% !important;
    }

    .h-md-100 {
        height: 100% !important;
    }

    .h-md-75 {
        height: 75% !important;
    }

    .h-md-50 {
        height: 50% !important;
    }

    .h-md-25 {
        height: 25% !important;
    }
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    .w-lg-100 {
        width: 100% !important;
    }

    .w-lg-75 {
        width: 75% !important;
    }

    .w-lg-50 {
        width: 50% !important;
    }

    .w-lg-25 {
        width: 25% !important;
    }

    .h-lg-100 {
        height: 100% !important;
    }

    .h-lg-75 {
        height: 75% !important;
    }

    .h-lg-50 {
        height: 50% !important;
    }

    .h-lg-25 {
        height: 25% !important;
    }
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    .w-xl-100 {
        width: 100% !important;
    }

    .w-xl-75 {
        width: 75% !important;
    }

    .w-xl-50 {
        width: 50% !important;
    }

    .w-xl-25 {
        width: 25% !important;
    }

    .h-xl-100 {
        height: 100% !important;
    }

    .h-xl-75 {
        height: 75% !important;
    }

    .h-xl-50 {
        height: 50% !important;
    }

    .h-xl-25 {
        height: 25% !important;
    }
}