@import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Oswald&display=swap");

/* || RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* border: 0.25px dotted blue; */
}

/* || VARIABLES */

:root {
    /* COLORS */
    --DARK-COLOR: #00161f;
    --LIGHT-COLOR: whitesmoke;

    --scroll: 0;
}


/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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


/* || GENERAL STYLES */

body {
    /* font: 1rem -apple-system, BlinkMacSystemFont, sans-serif; */
    font-family: Montserrat;
    min-height: 100vh;
    background-color: white;
    color: var(--DARK-COLOR);
    position: relative;
    width: 100vw;
}

.search-city-textbox {
    margin-top: 11px;
    /* margin-bottom: 26px; */
    border: 0.5px solid rgba(47, 79, 79, 0.067);
    border-radius: 8px;
    /* padding: 11px 10px; */
    width: 100%;
    display: none;
    animation: appearslowBox 1s ease-in-out forwards;
}

.search-date-textbox {
    margin-top: 11px;
    margin-bottom: 26px;
    border: 0.5px solid rgba(47, 79, 79, 0.067);
    border-radius: 8px;
    /* padding: 11px 10px; */
    width: 100%;
    display: none;
    animation: appearslowBox 1s ease-in-out forwards;
}

.search-points-textbox {
    border: 0.5px solid rgba(47, 79, 79, 0.067);
    border-radius: 8px;
    /* padding: 11px 10px; */
    width: 100%;
    display: none;
    animation: appearslowBox 1s ease-in-out forwards;
}

.search-bar-line {
    padding: 11px 15px;
    display: flex;
    justify-content: start;
    gap: 10px;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;

}

.sub-menu {
    display: none;
    width: 250px;
    overflow: visible;
    position: absolute;
    padding:  5px 0px 0px 0px;
    border: none;
    border-radius: 8px;
    animation: showMenu ease 0.5s forwards;
    z-index: 100;
    box-shadow: 0px 5px 5px rgba(128, 128, 128, 0.651);
}

.sub-menu-date {
    display: none;
    width: 200px;
    overflow: visible;
    position: absolute;
    padding: 5px 0px;
    border: none;
    animation: showMenu ease 0.5s forwards;
    z-index: 100;
}

.sub-menu-date-black {
    transform: translateY(-27px);
    display: none;
    width: 200px;
    overflow: visible;
    position: absolute;
    padding: 5px 0px;
    border: none;
    animation: showMenu ease 0.5s forwards;
    z-index: 100;
}

.from-city-input {
    width: 163px;
    border: none;
    outline: none;
    font-size: 0.8rem;
    font-weight: 400;
    font-family: "Montserrat";
    background-color: transparent;

}

.calendar-input {
    border: none;
    outline: none;
    font-size: 0.8rem;
    font-weight: 400;
    font-family: "Montserrat";
    background-color: transparent;
}

.calendar-input:hover {
    cursor: default;
}

.from-city-input::placeholder {
    color: lightgray;
}

.body-class {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-x: hidden;
}

.body-circle {
    display: flex;
    height: 150vh;
    width: 80vw;
    border-radius: 50%;
    background-color: mediumorchid;
    position: absolute;
    right: -400px;
    top: -400px;
    opacity: 5%;
    z-index: -100;
    
    animation: moveDown, moveUpDown;
    animation-duration: 2s, 2s;
    animation-delay: 0s, 2s;
    animation-direction: forwards, both;
    animation-iteration-count: 1, infinite;

}

.hero-sub-section1 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 1s ease;
    padding: 0px 5% 0% 5%;
}

.first-line-heading {
    letter-spacing: 10px;
    font-size: 1.2rem;
    font-weight: 500;
    color: darkslategray;
}

.second-line-heading {
    font-size: 4rem;
    letter-spacing: 2px;
    font-family: "Quicksand";
    color: lightseagreen;
}

.hero-heading-div {
    width: 60%;
    overflow-x: hidden;
    transition: all 1s ease;
    
}


.hero-section {
    display: flex;
    width: 100vw;
    /* transform: translateX(90vw); */
}

.hero-wrapper {
    width: 100vw;
    animation: slowScroll 1s ease 0.5s forwards;
}

.hero-carousal-1 {
    /* height: 90vh; */
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    /* border: 1px solid red; */
}

.long-width-container {
    background-color: pink;
    height: 100px;
    width: 200vw;
    display: flex;
    flex-wrap: nowrap;
    overflow: auto;
}


.car-image-hero {
    width: 50%;
    overflow-x: hidden;
    /* animation: moveDownCar, moveUpDown;
    animation-duration: 2s, 2s;
    animation-delay: 1s, 3s;
    animation-direction: forwards, both;
    animation-iteration-count: 1, infinite; */
    transition: all 1s ease;
}

.booking-form-div {
    padding: 2px 0px 10px 0px;
    display: flex;
    align-items: start;
    overflow-x: hidden;
    overflow-y:hidden;
    height: 222px;
    /* min-height: max-content; */


    
}

.booking-form-wrapper {
    

    
    /* min-height: 170px; */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 5vw;
}

/* .booking-form-div::-webkit-scrollbar {
    -webkit-appearance: none;
    background-color: transparent;
    width: 0px;
}

.booking-form-div::-webkit-scrollbar-thumb {
    border-radius: 0px;
    background-color: transparent;
    -webkit-box-shadow: 0 0 0px transparent;
} */

.booking-form {
    /* min-height: 167px; */
    width: max(90vw, 1250px);
    
    background-color: #9797971a;
    border-radius: 15px;
    box-shadow: 0px 1px 2px rgb(134, 134, 134);
    padding: 20px 20px;
    border: 3px solid rgba(201, 201, 201, 0.486);
    
}


.booking-form-seperator {
    
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 20px;
    padding-left: 10px;
}



.booking-form-seperator-element {
    height: 1px;
    width: 200px;
    background-color: #e7e7e7;
    opacity: 1;
}


.booking-form-flex-container {
    /* min-height: 127px; */
    width: max(90vw, 1250px); 
    /* gap: 10px; */
    grid-template-columns: 15fr 1fr 15fr 1fr 12fr 1fr 12fr 1fr 12fr;
    border-radius: 15px;
    display: grid;
    justify-content: space-between;
    align-items: center;
}

.booking-form-columns {}

.main-column {
    height: 127px;
    /* position: relative; */
    width: 250px;
    justify-content: space-around;
    align-items: center;
}

.main-column-date {
    height: 127px;
    /* position: relative; */
    width: 200px;
    justify-content: space-around;
    align-items: center;
}

.points-column-div {
    position: relative;
    height: 100%;
    width: 200px;
    justify-content: space-around;
    align-items: center;
}

.bigger-column {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.booking-form-columns:hover {
    cursor: pointer;
}

.booking-form-columns1 {
    width: 250px;
}

.booking-form-columns3 {
    width: 200px;
}

.booking-form-columns4 {
    width: 200px;
    height: 115px;
}

.booking-form-columns2 {
    width: 150px;
    display: flex;
    justify-content: center;
}

.booking-form-columns1:hover {
    cursor: default;
}

.booking-form-column-separator {
    height: 80px;
    width: 1px;
    background-color: #bcbcbc;
    opacity: 50%;
    border-radius: 20%;
}

.form-elements-heading {
    padding: 10px;
    text-align: center;
}

.form-elements-text {
    padding: 10px;
    text-align: center;
    font-weight: 600;
    color: #474747;
    font-size: 1.4rem;
    text-wrap: nowrap;
}

.form-elements-text-date {
    padding: 10px;
    text-align: center;
    font-weight: 600;
    color: #474747;
    font-size: 1.4rem;
}

.form-pickdrop-elements-text {
    padding-top: 3px;
    height: 39px;
    width: 250px;
    text-align: center;
    font-size: 0.8rem;
    color: blue;
    animation: glow 2.5s infinite;

    /* top: 50%; */
}

.form-pickdrop-elements-text:hover {
    cursor: pointer;
}


.pick-column {
    width: 100%;
    display: flex;
    justify-content: center;
}

.flex-container-left {
 width: 100%;
 display: flex;
 justify-content: start;
 gap: 50px;
 align-items: end;
 padding: 0 5%;
}

.fa-solid, .fas {
    font-weight: 900;
    font-size: 0.5rem;
}

.selector-box {
    margin-left: 36px;
    height: 3px;
    width: 160px;
    border-radius: 10%;
    background-color: darkcyan;
    position: absolute;
    transition: all 1s ease;
    z-index: -1;
}

.service-button {
    width: 200px;
    font-weight: 600;
    font-size: 1rem;
    color: grey;
    /* background-color: #90f1ef; */
    height: 30px;
    display: flex;
    align-items: center;
    padding-left: 20px;
}

.service-button:hover {
    cursor: pointer;
}

.passengers-home-page {
    display: flex;
    width: 100%;
    justify-content: space-between;
    border-radius: 12px;
    padding: 0x;
    /* box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
}

.passengers-button-left {

    width: 40px;
    height: 25px;
    background-color: darkslategray;
    border: none;
    outline: none;
    border-radius: 5px;
    color: white;
    font-size: 1.2rem;
    box-shadow: 0px 1px 2px grey;
}

.passengers-button-left:active {
    box-shadow: 0 2px gray;
    transform: translateY(1px);
}

.passengers-button-left:hover,
.passengers-button-right:hover {
    cursor: pointer;
}

.passengers-button-right:active {
    box-shadow: 0 2px gray;
    transform: translateY(1px);
}

.passengers-button-right {

    width: 40px;
    height: 25px;
    background-color: darkslategray;
    border: none;
    outline: none;
    border-radius: 5px;
    color: white;
    font-size: 1.2rem;
    box-shadow: 0px 1px 2px grey;
}

.passenger-count {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    font-size: 1rem;

}

.animate {
    animation: slowGlowText1 0.5s ease-out forwards;
}

.passenger-count-wrapper {
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
}


.booking-form-search-button {
    height: 8vh;
    width: 10vw;
    background-color: rgba(186, 85, 211, 0.858);
    border-radius: 8px;
    box-shadow: 0px 1px 2px grey;
    display: flex;
    justify-content: center;
    align-items: center;
}

.booking-form-search-button:active {
    box-shadow: 0 2px rgba(238, 182, 237, 0.611);
    transform: translateY(1px);
}

.booking-form-search-button:hover {
    cursor: pointer;
}

.white-text {
    color: white;
}

.hybrid {
    margin: 0;
    /* position: absolute; */
    width: auto;
    float: left;
}




.dummy-container {
    height: 600px;
    margin: 0;
    display: grid;
    grid-template-rows: 500px 100px;
    grid-template-columns: 1fr 30px 30px 30px 30px 30px 1fr;
    align-items: center;
    justify-items: center;
}


span {
    /* color: rgba(32, 178, 171, 0.571);
    font-size: 2.5rem; */
    font-size: 3rem;
    letter-spacing: 2px;
    color: whitesmoke;
}


/* // This is for inserting a cursor */

.hybrid span::after {
    align-self: center;
    content: '|';
    transition: .5s;
    animation: blink 1s infinite;
}


@keyframes bigSmallText {

    0%, 100% {
        font-size: 1rem;
        font-weight: 600;
    }

    50% {
        font-size: 1.5rem;
        font-weight: 600;
    }
    
}


/* // This is for the cursor blinking effect   */
@keyframes blink {

    0%,
    50%,
    100% {
        opacity: 1
    }

    25%,
    75% {
        opacity: 0
    }
}


@keyframes glow {

    0%,
    50%,
    100% {
        opacity: 1
    }

    25%,
    75% {
        opacity: 0.5
    }
}












h1 {
    font-size: 2rem;
    font-weight: 500;
}

h4 {
    font-size: 1rem;
    font-weight: 500;
    color: rgb(60, 60, 60);
}

h5 {
    font-weight: 200;
    font-size: 0.9rem;
}

h6 {
    font-weight: 100;
}

h10 {
    font-size: 4rem;
    font-family: -apple-system, BlinkMacSystemFont;
    font-weight: 700;
}



/* HEADER  */

.header-desktop-class {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.812);
    padding: 1vh 5vw;
    display: flex;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0px 2px 20px rgba(202, 202, 202, 0.31);
}

.cancel-ticket-header-desktop-class {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.812);
    padding: 1vh 5vw;
    display: flex;
    justify-content: space-between;
    z-index: 100;
    box-shadow: 0px 2px 20px rgba(202, 202, 202, 0.31);
}

.car-list-header-desktop-class {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.812);
    padding: 1vh 5vw;
    display: flex;
    justify-content: space-between;
    z-index: 100;
    box-shadow: 0px 2px 20px rgba(202, 202, 202, 0.996);
}

.header-logo-image {
    height: 5vh;
}

.search-bar {
    width: 100%;
    background-color: transparent;
    outline: none;
    border: none;
    padding-left: 10px;
    font-size: 0.8rem;
    font-family: Montserrat;
}

.search-bar-div {
    background-color: rgb(243, 243, 243);
    opacity: 60%;
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 2px 10px;
    border-radius: 8px;
    width: max(20%, 125px);
    height: 4.5vh;
}

.menu-buttons-div {
    display: flex;
    justify-content: space-around;
    align-items: start;
    gap: 10px;
    padding-top: 5px;
}

.menu-button-item {
    /* padding: 5px 5px; */
    opacity: 80%;
}

.padding-left-right-bottom {
    padding: 0 10px 0px 10px;
}

.menu-button-item:hover {
    cursor: pointer;
    animation: slowGlowText 0.25s ease-in-out forwards;
}

.download-app-button-div {
    width: max(10%, 125px);
    background-color: darkslategray;
    border-radius: 8px;
    height: 4.5vh;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bolder;
    box-shadow: 0px 1px 2px grey;
}


.download-app-button-div:hover {
    cursor: pointer;
}


.sub-menu-list {
    padding: 20px 0px;
    display: none;
    border: none;
    position: absolute;
    display: flex;
    align-items: end;
    animation: showMenu ease 0.5s forwards;
    z-index: 30;


}

.sub-menu-wrapper,
.sub-menu-wrapper-city-list {
    padding: 0px 10px;
    border: 1px solid rgba(211, 211, 211, 0.659);
    background-color: rgb(255, 255, 255);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    box-shadow: 0px 5px 20px rgba(202, 202, 202, 0.31);
}

.sub-menu-wrapper-city-list {
    height: 200px;
    overflow-y: scroll;
}

.search-text-close-button {
    /* margin-right: 10px; */
    
    background-color: white;
    border: none;
    height: 10px;
    width: 10px;
    display: none;
    justify-content: center;
    align-items: center;

}

.search-text-close-button:hover {
    cursor: pointer;
}

.sub-menu-wrapper-city-list::-webkit-scrollbar {
    -webkit-appearance: none;
    background-color: white;
    width: 8px;
}

.sub-menu-wrapper-city-list::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

.sub-menu-item-nomatch {
    padding: 10px 0px;
    opacity: 60%;
    font-size: 0.75rem;
    display: none;
}

.sub-menu-item {
    padding: 10px 0px;
    opacity: 60%;
    font-size: 0.75rem;
}

.sub-menu-item:hover {
    cursor: pointer;
    animation: slowGlowText 1s ease-out 0.25s forwards;
}


.padding-bottom-footer {
    height: 150px;
    width: 100%;
}

/* BODY */

.main-body-class {
    position: relative;
    overflow-x: hidden;
    height: 100vh;
    scroll-snap-type:y mandatory;
    overflow-y: scroll;
}

.our-services-body-class {
    position: relative;
}

.car-list-body-class {
    position: relative;
    animation: appearslowBox 2s ease forwards;
}

section {
    height: 93vh;
    scroll-snap-align: start;
}

.section-services {
    height: 82vh;
}

section {
    display: flex;
    align-items: centre;
    justify-content: center;
}


/* FOOTER */

.footer-desktop-class {
    height: fit-content;
    width: 100%;
    background-color: black;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 50px 50px 10px 50px ;
    scroll-snap-stop: always;
    scroll-snap-align: end;
}

.footer-inside-div {
    width: 100%;
    height: 100%;
    display: flex;
    gap: 60px;
    flex-direction: column;
    justify-content: space-between;
}

.footer-desktop-subclass {
    display: flex;
    justify-content: space-between;
    align-items: start;

}

.footer-items {
    color: white;
    font-size: 1.1rem;
}

.footer-subitems {
    color: white;
    font-size: 0.7rem;
}

.footer-subitems2 {
    color: white;
    font-size: 0.7rem;
}

.footer-text {
    color: white;
}

.footer-text-line {
    display: flex;
    align-items: center;
    justify-content: end;
    color: white;
}

.container-right-bottom-aligned {
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: space-between;
    height: 100%;
}

.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.flex-container1 {
    display: flex;
    gap: 20px;
    justify-content: start;
    align-items: start;
    width: 100%;
    padding-bottom: 10px;
}

.flex-container90 {
    display: flex;
    gap: 20px;
    justify-content: start;
    width: 100%;
    padding-bottom: 10px;
    align-items: start;
}


.container-full-height {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.left-padding-container {
    padding: 10px 20px 10px 20px;
}

.padding-bottom-10 {
    height: 10px;
}

.animate-onhover:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
    animation: appearslow 0.4s ease-in-out forwards;
    cursor: pointer;
}


.footer-items-column-right {
    display: flex;
    flex-direction: column;
    align-items: end;
}

.footer-items-column-middle {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fa-facebook:before,
.fa-square-instagram:before,
.fa-square-x-twitter:before,
.fa-linkedin:before {
    color: white;
    font-size: 4vh;
    background-color: transparent;
}

.fa-linkedin:before {
    content: "\f08c" !important;
}


.fa-brands:hover {
    cursor: pointer;
    border-radius: 50%;
    animation: slowGlow 0.5s ease-in-out forwards;
}


.flex-container-center {
    display: flex;
    justify-content: center;
    gap: 18px;
    width: 20%;

}

.flex-container-top {
    display: flex;
    justify-content: center;
    align-items: top;
    color: white;
    font-size: 0.6rem;
}


@keyframes moveDown {
    0% {
        transform: translate(0px, -1000px);
    }

    100% {
        transform: translate(0px, -10px);
    }
}

@keyframes moveDownCar {
    0% {
        transform: translate(0px, -1000px);
        opacity: 0%;
    }

    50% {
        transform: translate(0px, -500px);
        opacity: 0%;
    }

    80% {
        transform: translate(0px, 0px);
        opacity: 20%;
    }

    100% {
        transform: translate(0px, -10px);
        opacity: 100%;
    }
}

@keyframes moveUpDown {
    0% {
        transform: translate(0px, -5px);
    }

    50% {
        transform: translate(0px, 5px);
    }

    100% {
        transform: translate(0px, -5px);
    }
}



@keyframes slowGlow {
    0% {
        box-shadow: 0 0 0px #474747;
    }

    100% {
        box-shadow: 0 0 20px #474747;
    }
}





@keyframes appearslow {
    0% {
        text-decoration-color: transparent;
    }

    100% {
        text-decoration-color: rgb(232, 232, 232);
    }
}

@keyframes appearslowBox {
    0% {
        opacity: 0%;
    }

    100% {
        opacity: 100%;
    }
}

@keyframes disappearslowBox {
    0% {
        opacity: 100%;
    }

    100% {
        opacity: 0%;
    }
}



@keyframes slowGlowText {
    0% {
        opacity: 60%;
    }

    100% {
        opacity: 100%;
    }
}


@-webkit-keyframes slowGlowText1 {
    0% {
        text-shadow: 0 0 0px grey;
    }

    95% {
        text-shadow: 0px 0px 30px rgb(27, 27, 27);
    }


    100% {
        text-shadow: 0 0 0px grey;
    }
}



@keyframes showMenu {


    0% {
        opacity: 0%;
        transform: scale(1, 0);
        transform-origin: -100% 0%;
    }

    /* 80% {
        transform: scale(1, 1.2);
        transform-origin: 0% 0%;
    } */

    80% {
        opacity: 10%;
    }

    100% {
        opacity: 100%;
        transformY: scale(1, 1);
        transform-origin: -100% 0%;
    }
}






.datepicker-container {
    position: relative;
    display: inline-block;
    font-family: Arial, sans-serif;
    margin-top: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.datepicker-input {
    padding: 8px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    outline: none;
    position: relative;
    z-index: 1;
    background-color: transparent;
    outline: none;
    border-color: transparent;
    margin-left: 25px;
}

.calendar-container {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1;
    display: none;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2);
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    font-weight: bold;
    color: black;

}

.calendar-header button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    outline: none;
}

.calendar-day {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding: 8px;
    font-weight: bold;
    font-size: small;
    text-align: center;
    color: #8B9898;
}

.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.calendar-date {
    padding: 8px;
    cursor: pointer;
    text-align: center;
    font-family: monospace;
    border-radius: 7px;
}

.calendar-date:hover {
    background-color: #add8e6ad;
}

.current-date {
    background-color: #ff664b;
    color: #fff;
    padding: 8px;
}

.disabled-date {
    color: #ccc;
    pointer-events: none;
}

/* .datepicker-container::after {
    content: '\1F4C5';
    font-size: 20px;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
  }*/

.datepicker-container::before {
    content: '\1F4C5';
    font-size: 20px;
    position: absolute;
    top: 3px;
}

.button-next-prev-month {
    color: blue;
}



/* calendar */

.calendar-header {
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.calendar-month-inc-dec-button {
    background-color: transparent;
    border: none;
    outline: none;
    height: 20px;
    width: 20px;
    font-size: 2rem;

}

.calendar-heading {
    align-items: center;
    font-size: 0.8rem;
    font-weight: 400;

}

.calendar-grid {
    padding-top: 0px;
}

.calendar-grid-heading {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    justify-items: center;
    padding: 2px 5px;
    font-size: 1rem;
}

.top-line {
    padding-bottom: 10px;
}

.box {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background-color: rgb(255, 252, 232);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    font-size: 0.55rem;
    border: none;
    outline: none;
}

.highlight {
    background-color: rgb(41, 41, 41);
    color: #fffffb;
}

.selected {
    border: 1px solid rgb(128, 128, 128);
    border-radius: 8px;
    background-color: orange;
    color: white;
    font-weight: bolder;
}

.hidden {
    display: none;
}




main#carousel {
    grid-row: 1 / 2;
    grid-column: 1 / 8;
    width: 100vw;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transform-style: preserve-3d;
    perspective: 600px;
    --items: 5;
    --middle: 3;
    --position: 1;
    pointer-events: none;
  }
  
  div.item {
    position: absolute;
    width: 70vw;
    height: 50vh;
    background-color: transparent;
    --r: calc(var(--position) - var(--offset));
    --abs: max(calc(var(--r) * -1), var(--r));
    transition: all 0.25s linear;
    transform: rotateY(calc(-10deg * var(--r)))
      translateX(calc(-300px * var(--r)));
    z-index: calc((var(--position) - var(--abs)));
  }
  
  div.item:nth-of-type(1) {
    --offset: 1;
    background-color: transparent;
  }
  div.item:nth-of-type(2) {
    --offset: 2;
    background-color: transparent;
  }
  div.item:nth-of-type(3) {
    --offset: 3;
    background-color: #ff9770;
  }
  div.item:nth-of-type(4) {
    --offset: 4;
    background-color: #ffd670;
  }
  div.item:nth-of-type(5) {
    --offset: 5;
    background-color: #e9ff70;
  }
  
  input:nth-of-type(1) {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }
  input:nth-of-type(1):checked ~ main#carousel {
    --position: 1;
  }
  
  input:nth-of-type(2) {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
  }
  input:nth-of-type(2):checked ~ main#carousel {
    --position: 2;
  }
  
  input:nth-of-type(3) {
    grid-column: 4 /5;
    grid-row: 2 / 3;
  }
  input:nth-of-type(3):checked ~ main#carousel {
    --position: 3;
  }
  
  input:nth-of-type(4) {
    grid-column: 5 / 6;
    grid-row: 2 / 3;
  }
  input:nth-of-type(4):checked ~ main#carousel {
    --position: 4;
  }
  
  input:nth-of-type(5) {
    grid-column: 6 / 7;
    grid-row: 2 / 3;
  }
  input:nth-of-type(5):checked ~ main#carousel {
    --position: 5;
  }


  .window {
    background-color: pink;
    height: 30px;
    width: 16px;
    overflow: hidden;
  }

  
  .window::-webkit-scrollbar {
    -webkit-appearance: none;
    background-color: transparent;
    width: 0px;
}

.window::-webkit-scrollbar-thumb {
    border-radius: 0px;
    background-color: transparent;
    -webkit-box-shadow: 0 0 0px transparent;
}


.num {
    /* border: 1px solid green; */
    height: 30px;
    width: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-rolling-number {
    display: flex;
    justify-content: center;
}

.stats-div {
    height: 93vh;
    width: 100%;
    padding: 20vh 5%;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.stats-div2 {
    width: 100%;
    height: 93vh;
    background-color: #ececec52;
    padding: 10vh 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.stats-div1 {
    text-align: center;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stats-heading {
    font-size: 3rem;
    font-weight: 700;
    color: #474747;
    
}

.back-image-cover {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.overlay-back-image {
    width: 100%;
    height: 100%;
    position: absolute;
    background: linear-gradient(89.8deg, rgb(195, 67, 129) 11%, rgb(90, 43, 186) 83.4%);
    top: 0;
    left: 0;
    z-index: -1;
}

.stats-container {
    display: grid;
    gap: 30px;
    grid-template-columns: 0.8fr 1fr 1fr 1fr;
    max-width: 100vw;
    height: 40vh;
    align-items: center;
  }
  
  .stats-container .stat {
    padding: 24px;
    text-align: center;
    color: #edf2f4;
  }
  
  .stats-container .stat .odometer {
    font-size: 50px;
    font-weight: bold;
    display: inline-block;
  }
  
  .stats-container .stat .type {
    font-size: 1.5rem;
    color: white;
    font-weight: 500;
  }
  
  .odometer.plus {
    position: relative;
  }
  
  .odometer.plus::after {
    content: "+";
    position: absolute;
    top: 0;
    right: -20px;
    font-size: 2rem;
    color: rgb(255, 255, 255);
  }
  
  @media (max-width: 700px) {
    .stats-container {
      grid-template-columns: 1fr;
    }
  }


  .dp-img-div {
    height: 35px;
    width: 35px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(216, 216, 216, 0.638);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .review-container {
    
  }

  .review-container-person {
    display: flex;
    gap: 5%;
    align-items: center;
    
  }

  .reviewer-name {
    font-size: 1rem;
    font-weight: 600;
  }

  .review-content-div {
    padding: 30px 10px 30px 0px;
    text-align: left;
    width: 20vw;
  }

  .review-content {
    font-size: 0.8rem;
    font-weight: 200;
    line-height: 25px;
    color: #474747;
    max-lines: 6;
  }

  .stats-container1 {
    padding: 0 ;
    display: flex;
    gap: 20px;
    align-items: start;
    justify-content: start;
    overflow: auto;
  }

  .normal-span {
    font-size: 0.8rem;
    font-weight: 200;
    line-height: 25px;
    color: #474747;
    letter-spacing: 0;
    display: none;
    opacity: 0%;
  }

  .blue-text {
    font-size: 0.8rem;
    font-weight: 200;
    line-height: 25px;
    color: blue;
    letter-spacing: 0;
  }

  .blue-text:hover {
    cursor: pointer;
  }

  .stats-flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 5% ;
  }

  .stats-flex-container2 {
    display: flex;
    justify-content: space-between;
    align-items: center;

  }

  .fa-chevron-left:before {
    font-size: 2rem; 
  }

  .fa-chevron-right:before {
    font-size: 2rem; 
  }
  
  .carousal-scroll-button {
    height: 50px;
    width: 50px;
  }

  .carousal-scroll-button:hover {
    cursor: pointer;
  }

  .padding-right-30 {
    padding: 0 30px 0 0;
  }

  .padding-left-30 {
    padding: 0 0 0 30px;
  }

  .app-download-text-content {
    width: 50%;
  }

  .our-services-text-content {
    width: 100%;
    display: flex;
    justify-content: start;
    height: 100px;
  }

  .sub-heading-text, .sub-heading-text2 {
    font-size: 1.2rem;
    font-weight: 400;
    color: #474747;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .sub-heading-text{
    justify-content: end;
  }
  
  .sub-heading-text2{
    justify-content: center;
  }

  .sub-heading-text1 {
    font-size: 2rem;
    font-weight: 600;
    color: #474747;
    display: flex;
    align-items: center;
    justify-content: end;
  }

  .sub-heading-text1-left {
    font-size: 2rem;
    font-weight: 600;
    color: #474747;
    display: flex;
    align-items: center;
    justify-content: start;
  }

  .sub-heading-text4 {
    font-size: 1rem;
    font-weight: 400;
    color: #474747;
    display: flex;
    align-items: center;
    justify-content: left;
    line-height: 40px;
    text-align: left;
  }


  .sub-heading-text3 {
    font-size: 1.1rem;
    font-weight: 500;
    color: #474747;
    display: flex;
    align-items: center;
    justify-content: right;
    line-height: 40px;
    text-align: right;
  }

  .sub-heading-text3-left {
    font-size: 1.1rem;
    font-weight: 500;
    color: #474747;
    display: flex;
    align-items: center;
    justify-content: left;
    line-height: 40px;
    text-align: left;
  }

  .sub-heading-text3-left2 {
    font-size: 1.1rem;
    font-weight: 500;
    color: #474747;
    display: flex;
    align-items: center;
    justify-content: left;
    line-height: 40px;
    text-align: left;
    width: 80px;
  }

  .sub-heading-text3-left21 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #474747;
    display: flex;
    align-items: center;
    justify-content: left;
    line-height: 40px;
    text-align: left;
  }

  

  .our-services-heading-text {
    display: flex;
    flex-direction: column;
    font-size: 2.5rem;
    font-weight: 600;
    padding-left: 5%;
    align-items: start;
    justify-content: center;
  }


  .blob{
    position: absolute;
    border-radius: 94% 31% 90% 67% / 67% 97% 56% 34%;
    width: 50vw;
    height: 50vh;
    background: #f09;
    background-image: linear-gradient(45deg, #3023AE 0%, #f09 100%);
    box-shadow: -10vmin 10vmin 0 rgba(255,255,255,0.07);
    z-index: -1;
}

.service-container {
    width: 50%;
}

.services-box {
    height: 300px;
    width: 230px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(216, 216, 216, 0.638);
    display: flex;
    align-items: center;
    justify-content: center;
}

.services-box-main {
    width: 280px;
   text-align: left;
   color: #474747;
   line-height: 25px;
}

.services-box-main:hover {
    cursor: pointer;
}

.services-heading {
    font-size: 1rem;
    font-weight: 600;
}

.services-content {
    font-size: 0.8rem;
    font-weight: 400;
}



.services-box-heading {
    font-size: 1.2rem;
    color: #474747d6;
    font-weight: 600;
}

.services-box-content {
    font-size: 0.8rem;
    color: #474747;
    font-weight: 400;
    line-height: 30px;
    text-align: justify;
}

.stats-flex-container1 {
    display: flex;
    justify-content: space-between;
    align-items: start;
    padding: 40px 5% ;
    gap: 50px;
    overflow: scroll;
  }



  @keyframes photoZoom {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.2);
    }
    
  }

.car-list-line {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 10px;
}

.car-list-line-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.loc-code-box {
    padding: 10px 15px;
    background-color: lightblue;
    font-weight: bolder;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 1px 2px grey;
}
.box-box-pointer-set {
    display: flex;
    width: 50%;
    align-items: center;
    padding: 0px 20px;
}

.box-box-pointer {
    height: 2px;
    width: 100%;
    background-color: darkslategrey;
}

.box-box-circle {
    height: 10px;
    width: 10px;
    background-color: darkslategrey;
    border-radius: 50%;
}

.car-image {
    position: absolute;
    height: 20px;
    width: 30px;
}


.small-heading-text {
    font-size: 0.8rem;
    font-weight: 500;
    color: rgb(45, 45, 45);
    padding: 0px 0px 3px 0px;
}

.small-heading-text11 {
    font-size: 0.8rem;
    font-weight: 400;
    color: rgb(45, 45, 45);
    padding: 0px 0px 3px 0px;
    text-align: center;
}

.small-heading-text-last-line {
    font-size: 0.8rem;
    font-weight: 500;
    color: lightgrey;
    padding: 0px 0px 3px 0px;
    
}

.small-heading-text-last-line:hover {
    cursor: pointer;
}

.small-text {
    font-size: 0.8rem;
    color: black;
    letter-spacing: 0px;
    line-height: 30px;
}

.small-text-right {
    font-size: 0.7rem;
    color: black;
}

.container-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.small-text-right,
.small-heading-text-right {
    text-align: end;
}

.small-heading-text-right {
    font-size: 0.8rem;
    color: #474747;
    padding: 0px 0px 3px 0px;
    font-weight: bolder;
}

.small-heading-text-left {
    font-size: 0.8rem;
    color: #474747;
    padding: 0px 0px 3px 0px;
    font-weight: bolder;
    text-align: left;
}


.large-heading-text-right {
    font-size: 0.9rem;
    color: teal;
    padding: 0px 0px 0px 5px;
    font-weight: bolder;
}

.large-heading-text-right2 {
    font-size: 1.5rem;
    color: #474747;
    padding: 0px 0px 0px 5px;
    font-weight: bolder;
}

.fa-indian-rupee-sign:before, .fa-indian-rupee:before, .fa-inr:before {
    font-size: 1rem;
}

.main-car-list-view {
    padding: 0px 10px;
}

.time-box {
    margin: 0px 5px;
    padding: 5px;
    background-color: teal;
    border-radius: 5px;
    color: white;
    display: flex;
    justify-content: center;
    font-size: 0.7rem;
}

.container-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.car-list-line9 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0;
}


.car-list-line3 {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 10px 0px 20px 0px;
}

.car-list-line2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
}

.car-list-line4 {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 10px 10px;
    background-color: lightblue;
    border-radius: 5px;
    box-shadow: 0px 1px 2px grey;
}

.car-list-view-column2 {
    width: 60%;
}

.car-list-view-column1 {
    width: 22%;
    /* margin-top: 20px;
    margin-bottom: 20px; */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.car-list-view-column3 {
    width: 20%;
    /* margin-top: 20px;
    margin-bottom: 20px; */
    height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.car-list-view-card-flex{
    
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    gap: 30px;
    padding-bottom: 20px;
}  

.car-list-view-card-flex1{
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    gap: 30px;
}   

.car-list-view-card {
    width: 100%;
    border-radius: 10px;
    box-shadow: 1px 1px 5px 0px grey;
    width: 60vw;
    padding: 30px 30px 15px 30px;
}

.button-select-seat {
    height: 40px;
    width: 100px;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.button-select-seat1 {
    height: 40px;
    width: 180px;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.button-select-seat:hover, .button-select-seat1:hover {
    cursor: pointer;
}

.car-card-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0px 20px;
    justify-content: start;
}

.car-list-parameters-div {
    margin-top: 0px;
    display: flex;
    justify-content: space-between;
    padding:  0px;
    position: sticky;
    top: 0px;
    background-color: #f9f9f9;
    z-index: 20;
}

.car-list-parameters-card {
    width: 100%;
    padding: 20px 20px;
    display: flex;
    gap: 40px;
    justify-content: space-evenly;
    /* border-radius: 8px; */
    box-shadow: 0px 1px 2px rgba(156, 158, 160, 0.627);
    border: 0.5px solid rgba(211, 211, 211, 0.305);
    
}

.car-list-parameters-column {
    font-size: 0.8rem;
    font-weight: 500;
    color: #474747;
}

.cancel-ticket-parameters-column {
    width: 100%;
    font-size: 0.8rem;
    font-weight: 500;
    color: #474747;
}

.passenger-details-parameters-column {
    font-size: 0.8rem;
    font-weight: 500;
    color: #474747;
    width: 100%;
}

.car-list-highlighter-box {
    background-color: rgba(211, 211, 211, 0.27);
    border-radius: 5px;
    border: 0.5px solid rgba(211, 211, 211, 0.389);
    padding: 5px 10px;
    display: flex;
    justify-content: end;
}

.car-list-page-wrapper {
    display: flex;
    padding: 50px 30px;
    gap: 30px;
    justify-content: center;
}

.car-list-sidebar-div {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 20vw;
    /* box-shadow: 0px 2px 10px rgba(211, 211, 211, 0.998); */
}

.car-list-sidebar-card {
    border: 0.5px solid rgba(119, 136, 153, 0.577);
    border-radius: 10px;
    background-color: whitesmoke;
    box-shadow: 0px 2px 2px rgba(211, 211, 211, 0.998);
    overflow: hidden;
    width: 250px;
    height: 400px;
    position: relative;
}


.car-list-sidebar-card1 {
    border: 0.5px solid rgba(119, 136, 153, 0.577);
    border-radius: 10px;
    background-color: whitesmoke;
    box-shadow: 0px 2px 2px rgba(211, 211, 211, 0.998);
    overflow: hidden;
    width: 250px;
    height: 300px;
    position: relative;
}

.car-list-sidebar-card-heading-text {
    font-size: 1.1rem;
    font-weight: 500;
    color: #ffffff;
}

.car-list-sidebar-card-content-text {
    font-size: 0.7rem;
    font-weight: 400;
    color: #ffffff;
    line-height: 15px;
}

.car-list-sidebar-card-overlay {
    height: 100%;
    width: 100%;
    background-color: #0e0e0ec5;
    position: absolute;
    top: 0;
    z-index: 1;
    background: linear-gradient( rgba(250, 250, 250, 0), rgba(3, 3, 3, 0.68));
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding: 20px;
}



.car-list-extention-div {
    display: none;
    border-radius: 10px;
    border: 2px solid rgba(100, 100, 100, 0.3);
    width: 100%;
    box-shadow: 0px 2px 3px rgba(211, 211, 211, 0.998);
    padding: 20px 30px;
    animation: showMenu ease 0.5s forwards;
}

.car-list-extention-heading {
    font-size: 0.9rem;
    padding-bottom: 30px;
    font-weight: 500;
    
}

.car-list-extention-flex-line {
    font-size: 0.8rem;
    font-weight: 400;
    padding-bottom: 10px;
}
.car-list-extention-flex {
    display: flex;
    justify-content: space-between;
}
.car-list-extention-column1{
    width: 40%;
}


.car-list-extention-column2{
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: end;
}

.car-list-extention-column3{
    width: 100%;
}


@keyframes photoZoomIn {
    0% {
        transform: scale(1, 1);
    }

    100% {
        transform: scale(1.2, 1.2);
    }
    
}

@keyframes photoZoomOut {
    0% {
        transform: scale(1.2, 1.2);
    }

    100% {
        transform: scale(1, 1);
    }
    
}

.seat-selection-modal-page {
    height: 100vh;
    width: 100vw;
    display: none;
    justify-content: center;
    align-items: center;
    background-color: #00161fc3;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    overflow: hidden;
    
}

.seat-selection-modal {
    height: 500px;
    width: 500px;
    background-color: white;
    border-radius: 10px;
    border: 2px solid grey;
    position: relative;
}

.seat-selection-heading {
    width: 100%;
    padding: 10px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 500;
    color: #474747;

}

.seat-selection-close-modal-btn {
    position: absolute;
    top: 15px;
    right: 30px;
}

.seat-selection-close-modal-btn:hover {
    cursor: pointer;
}

.seat-container {
    position: absolute;
    margin-top: 155px;
    background-color: rgba(255, 255, 255, 0.826);
    border-radius: 10px;
}

.seat-selection-image-container {

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 50%;
}

.flex-container {
    gap: 5px;
    display: flex;
    padding: 5px 0px 5px 0px;
    align-items: center;
}

.flex-container9 {
    gap: 5px;
    display: flex;
    padding: 5px 0px 5px 0px;
    align-items: center;
    justify-content: space-between;
}

.seat-image {
    z-index: 1;
    height: 50px;
    width: 50px;
}

.driver-seat-image {
    z-index: 1;
    height: 50px;
    width: 50px;
}

.seat-image:hover {
    cursor: pointer;
}

.seat-selection-modal-flex {
    display: flex;
}

.seat-selection-legends {
    width: 50%;
    padding: 50px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
} 

.seat-selected {
    filter: invert(75%) sepia(9%) saturate(2661%) hue-rotate(86deg) brightness(93%) contrast(77%);
}

.seat-booked {
    filter: invert(44%) sepia(32%) saturate(4404%) hue-rotate(340deg) brightness(105%) contrast(104%);
}


.seat-legends {
    font-size: 0.9rem;
}

.seat-selected-button {
    width: 100%;
    background-color: darkslategray;
    text-align: center;
    color: white;
    font-size: 1rem;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 16px 20px 0 rgba(0, 0, 0, 0.2);
}

.seat-selected-button:hover {
    cursor: pointer;
}

.seat-wrapper {
    position: relative;
}

.seat-number {
    margin-left: 4px;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
}

.seat-number:hover {
    cursor: pointer;
}

.passenger-details-text-input {
    width: 100%;
    border-radius: 8px;
    border: 1px solid lightgrey;
    outline: none;
    font-size: 0.8rem;
    font-weight: 400;
    font-family: "Montserrat";
    background-color: white;
    padding:  10px;
    margin-bottom: 30px;
    font-family: 'Montserrat';
}

.cancel-ticket-text-input {
    width: 70%;
    border-radius: 8px;
    border: 1px solid lightgrey;
    outline: none;
    font-size: 0.8rem;
    font-weight: 400;
    font-family: "Montserrat";
    background-color: white;
    padding:  10px;
    margin-bottom: 30px;
}



.passenger-details-text-label {
    width: 180px;
    font-size: 0.8rem;
    font-weight: 500;
    height: 37px;
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.cancel-ticket-text-label {
    width: 30%;
    font-size: 0.8rem;
    font-weight: 500;
    height: 37px;
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.passenger-details-text-label2 {
    width: 230px;
    font-size: 0.8rem;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.car-list-parameters-flex {
    display: flex;
    align-items: start;
    width: 100%;
}

.passenger-details-card {
    width: 100%;
    background-color: rgba(245, 245, 245, 0.403);
    border-radius: 20px;
    border: 3px solid rgba(211, 211, 211, 0.415);
    box-shadow: 0px 2px 1px lightgrey;
    padding: 40px 50px;
}

.cancel-ticket-card {
    width: 100%;
    background-color: rgba(245, 245, 245, 0.403);
    border-radius: 20px;
    border: 3px solid rgba(211, 211, 211, 0.415);
    box-shadow: 0px 2px 1px lightgrey;
    padding: 30px 50px;
    display: none;
}

.passenger-details-virtual-card {
    width: 100%;
    padding: 30px 6%;
}

.GST-input-container, .couponID-container {
    padding: 0px 0px 0px 0px;
    display: none;
    transition: all ease 1s ;
    padding-bottom: 10px;
    width: 170px;
}

.input-line-style {
    width: 100%;
    border: none;
    outline: none;
    width: 100%;
    background-color: whitesmoke;
    border-radius: 6px;
    border: 0.5px solid rgba(211, 211, 211, 0.433);
    padding: 10px 10px 10px 20px;
    font-size: 0.8rem;
    font-family: 'Montserrat';
}

.input-line-style::placeholder{
    text-transform: none;
    font-family: 'Montserrat';
}

.passenger-details-super-flex {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.flex-container19 {
    width: 400px;
    display: flex;
    gap: 20px;
    justify-content: start;
    align-items: center;
    width: 280px;
    height: 37px;
    margin-bottom: 10px;
}

.car-list-line2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
}

.fare-highlighter {
    background-color: rgb(35, 43, 79);
    align-items: center;
    padding: 10px;
    border-radius: 8px;


}

.padding-left {
    padding: 0px 0px 0px 10px;
}
.padding-right {
    padding: 0px 10px 0px 0px;
}

.zero-padding {
    padding: 0;
}
.text-white{
    color: white;
}

.passenger-details-flex-col {
    display: flex;
    gap: 30px;
    width: 100%;
    justify-content: center;
    padding: 30px;
}

.passenger-details-column {
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.passenger-details-column1 {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}


.header-logo-image-div {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
}

.logo-image {
    background-size: contain;
    width: 20%;
    height: auto;
    opacity: .9;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    opacity: .8;
}

.summary-highlighter {
    background-color: rgb(230, 255, 235);
    width: 100%;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 40px;
}

.logo-image-div {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
}

.summary-line4 {
    width: 100%;
    border-radius: 5px;
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 5px 0px 5px 60px;
    line-height: 25px;
}


.summary-line40 {
    width: 100%;
    border-radius: 5px;
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 5px 0px 5px 10px;
    line-height: 25px;
}



.summary-flex-container-space-between {
    display: flex;
    align-items: start;
    justify-content: space-between;
} 

.summary-full-width {
    width: 100%;
}

.summary-highlighter-left {
    background-color: rgb(230, 255, 235);
    width: 100%;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 5px 0 5px 50px;
}
.summary-highlighter-right {
    background-color: rgb(230, 255, 235);
    width: 100%;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    display: flex;
    justify-content: right;
    align-items: center;
    padding: 5px 50px 5px 0px;
}

.summary-line5 {
    width: 100%;
    border-radius: 5px;
    display: flex;
    justify-content: right;
    align-items: center;
    padding: 5px 50px 5px 0px;
    text-align: right;
}

.summary-line {
    display: flex;
    justify-content: center;
    align-items: center;
}

.summary-full-width {
    width: 100%;
}

.summary-flex-container-space-between {
    display: flex;
    align-items: start;
    justify-content: space-between;
}   


.summary-instructions-highlighter {
    background-color: rgb(230, 255, 235);
    width: 100%;
    border-radius: 5px;
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 5px;
}



.fa-phone:before {
    content: "\f095";
    font-size: 0.8rem;
}

.success-page-body-padding {
    padding: 50px 10% 100px 10%;
}

.success-heading-center {
    font-size: 1.2rem;
    color: #474747;
    font-weight: 600;
    text-align: center;
}


.cancel-page-flex {
    display: flex;
    justify-content: center;
}

.seat-selected-button1 {
    display: none;
    width: 100%;
    background-color: darkslategray;
    text-align: center;
    color: white;
    font-size: 1rem;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 16px 20px 0 rgba(0, 0, 0, 0.2);
}

.seat-selected-button1:hover {
    cursor: pointer;
}


.loading-dot {
    display: none;
    height: 3px;
    width: 5px;
    border-radius: 2px;
    background-color: white;
    display: inline-block;
    margin: 0 5px;
}

.send-otp-class, .verify-otp-class {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

.verify-otp-class {
    display: none;
}



@keyframes makeBigSmall {
    0%, 100% {
        height: 2px;

    }

    50% {
        height: 20px;
    }
}

.loading-class {
    display: none;
    opacity: 0;
    height: 20px;
    align-items: end;
}

.send-otp-button {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: darkslategray;
    text-align: center;
    color: white;
    font-size: 1rem;
    border-radius: 12px;
    height: 50px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 16px 20px 0 rgba(0, 0, 0, 0.2);

    animation: appearslow 0.5s ease forwards;
}

.send-otp-button:hover {
    cursor: pointer;
}

.enter-otp-class {
    display: none;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.otp-digit {
    border: 1px solid rgba(211, 211, 211, 0.553);
    background-color: white;
    border-radius: 10px;
    font-size: 1rem;
    padding: 5px 10px;
    width: 32px;
    outline: none;
    font-family: 'Montserrat';
}
.otp-wrapper-box {
    width: 100%;
    height: 31px;
}

.button-wrapper {
    width: 100%;
    height: 50px;
}

.otp-text-label {
    width: 180px;
    font-size: 0.8rem;
    font-weight: 500;
    height: 37px;
    display: flex;
    align-items: center;
}

.otp-digit-flex {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.flex-container-cancel {
    display: flex;
    justify-content: start;
    align-items: start;
}

.resend-otp-button {
    display: none;
    color: blue;
    font-size: 0.8rem;
    text-align: end;
}

.resend-otp-button-wrapper {
    
    height: 15px;
}

.resend-otp-button:hover {
    cursor: pointer;
}

.cancel-page-column {
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    /* display: none; */
}

.cancel-page-column1 {
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}


.step-circle {
    width: 30px;
    height: 30px;
    background-color: rgb(147, 147, 147);
    border-radius: 50%;
    border: 10px solid whitesmoke;
    z-index: 10;
}

.center-flex-div {
    width: 100%;
    display: flex;
    gap: 113px;
    justify-content: center;
    align-items: start;
    position: relative;
}

.stepper-column {
    padding-top: 4px;
    min-width: 260px;
    display: flex;
    gap: 10px;
    flex-direction: column;
    align-items: center;
}

.stepper-header {
    font-size: 1.2rem;
    font-weight: 500;
    color: #474747;
}

.stepper-content {
    font-size: 0.9rem;
    font-weight: 400;
    color: #474747;
}

.cancel-page-sticky-div {
    width: 1438px;
    position: sticky;
    top: 0;
    background-color: whitesmoke;
    padding: 30px ;
    box-shadow: 0px 1px 2px lightgrey;
    border: 0.25px solid rgba(211, 211, 211, 0.486);
    z-index: 1;
}

.stepper-line-wrapper {
    height: 100%;
    width: 100%;
    border-radius: 5px;

    position: absolute;
    top: 0;
    left: 0;
    padding: 18px 130px 0 130px;
}

.stepper-line {
    height: 2px;
    width: 100%;
    background-color: rgba(194, 194, 194, 0.602);
    /* padding-top: 38.5px;
    padding-left: 160px;
    padding-right: 160px; */
    
}

.stepper-hightlighter-wrapper {
    height: 100%;
    width: 1378px;
    border-radius: 5px;
    position: absolute;
    top: 0;
    left: 0;
    padding: 9px 118px;
    display: flex;
    justify-content: start;
}

.stepper-hightlighter {
    height: 20px;
    width: 20px;
    background-color: rgb(84, 84, 84);
    /* border: 3px solid rgb(84, 84, 84); */
    border-radius: 50%;
    animation: all 0.5s ease forwards;
    z-index: 10;
}

@keyframes moveRight {
    0% {
        transform : translateX(0px);
    }
    
    100% {
        transform : translateX(373px);
    }
}

@keyframes moveRight1 {
    0% {
        transform : translateX(373px);
    }
    
    100% {
        transform : translateX(746px);
    }
}

@keyframes moveRight2 {
    0% {
        transform : translateX(746px);
    }
    
    100% {
        transform : translateX(1119px);
    }
}


.FAQ-question-div {
    width: 100%;
    padding: 10px 20px;
    background-color: #e0e0e08d;
    border-radius: 8px;
    color: black;
    line-height: 20px;
    font-size: 0.8rem;
    font-weight: 400;
    transition: all 1s ease;
}

.FAQ-question-div:hover {
    cursor: pointer;
}

.summary-line41 {
    width: 100%;
    display: none;
    justify-content: left;
    align-items: center;
    padding: 10px 20px 5px 20px;
    line-height: 25px;
    font-size: 0.75rem;
    transition: all 1s ease forwards;
    animation: showMenu 0.5s ease forwards;
}

.contact-us-column1 {
    width: 45%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.contact-us-column {
    width: 45%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.FAQ-column1 {
    width: 90%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.partner-flex-col {
    display: flex;
    gap: 100px;
    width: 100%;
    justify-content: start;
    padding: 50px;

}

.partner-parameters-column {
    width: 30%;
    font-size: 0.8rem;
    font-weight: 500;
    color: #474747;
    display: flex;
    flex-direction: column;
    justify-content: start;
    padding: 40px 0;
}

.partner-text-label {
    width: 100%;
    font-size: 1rem;
    font-weight: 500;
    height: 37px;
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    padding-left: 50px;
}

.partner-text-label:hover {
    cursor: pointer;
}

.partner-slider {
    position: absolute;
    height: 37px;
    display: flex;
    align-items: center;
    transition: all 0.5s ease;
}

.fa-arrow-alt-circle-right:before, .fa-circle-right:before {
    font-size: 1rem;
}

.partner-card {
    width: 100%;
    background-color: rgba(245, 245, 245, 0.403);
    border-radius: 20px;
    border: 3px solid rgba(211, 211, 211, 0.415);
    box-shadow: 0px 2px 1px lightgrey;
    padding: 40px 50px;
    display: none;
}

.partner-column {
    display: flex;
    width: 60%;
}



.partner-label {
    width: 40%;
}

.partner-parameters-flex {
    display: flex;
    align-items: center;
    width: 100%;
}


.partner-parameters-flex1 {
    display: none;
    align-items: center;
    width: 100%;
    padding-bottom: 30px;
}

.partner-text-input {
    width: 100%;
    border-radius: 8px;
    border: 1px solid lightgrey;
    outline: none;
    font-size: 0.8rem;
    font-weight: 400;
    font-family: "Montserrat";
    background-color: white;
    padding:  10px;
    font-family: 'Montserrat';
}


.team-flex-col {
    display: flex;
    width: 100%;
    justify-content: start;
    padding: 0px 0px;
    align-items: center;

}



.team-parameters-column {
    font-size: 0.8rem;
    font-weight: 500;
    color: #474747;
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding: 0px 0;
    height: 600px;
    z-index: 100;
}

.team-card {
    width: 100%;
    /* background-color: rgb(245, 245, 245); */
    border-radius: 20px;
    border: 2px solid rgba(211, 211, 211, 0.415);
    box-shadow: 0px 2px 1px lightgrey;
    padding: 40px 50px;
    display: none;
}

.team-parameters-flex {
    display: flex;
    align-items: start;
    width: 100%;

}

.team-column {
    float: right;
    width: 55%;
    padding: 50px;
    position: absolute;
    right: 0;
    top: 140px;
}

.driver-parameters-column {
    font-size: 0.8rem;
    font-weight: 500;
    color: #474747;
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding: 0px 0;
    border-radius: 10px;
}

.driver-column {
    float: right;
    width: 55%;
    padding: 50px;
    
}

.company-flex-col {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 0px 0px;
    align-items: start;
    /* background-color: black; */
    padding: 0px 5%;
}


.company-page-flex {
    display: flex;
    justify-content: left;
    color: rgb(0, 0, 0);

}

.company-elements-heading {
    padding: 10px 0;
    text-align: left;
    color: rgb(1, 1, 1);
}

.company-content-text {
    font-size: 0.8rem;
    color: rgb(0, 0, 0);
    font-weight: 400;
    line-height: 30px;
    text-align: justify;
    font-family: 'Montserrat';
    letter-spacing: normal;
}

.company-para {
    text-align: justify;
    padding: 0px 0px 20px 0px;
}

.company-para-heading {
    font-size: 1.2rem;
    font-weight: 500;
    text-align: justify;
    padding: 20px 0px 20px 0px;
}


.company-para-heading1 {
    width: 100%;
    background-color: darkslategray;
    border-radius: 8px;
    font-size: 1.3rem;
    color: white;
    font-weight: 500;
    text-align: justify;
    padding: 10px 20px 10px 20px;
}

.company-column1 {
    width: 60%;
    padding: 50px 50px 50px 0px;
}

.company-img {
    border-radius: 10px;
    transition: all 0.1s ease;

}

.img-wrapper {
    padding-top: 50px;
    height: 100%;
}

.img-wrapper-about {
    position: absolute;
    left: 0;
    padding-top: 50px;
    height: 500px;
    width: 100vw;
    background-image: url("/desktop/icons/3.jpeg");
    background-color: pink;
    background-size: cover;
    background-position: center;
}


.policy-para {
    font-size: 0.9rem;
    text-align: justify;
    padding: 0px 0px 20px 0px;
}

#customers {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }
  
  #customers td, #customers th {
    border: 1px solid #ddd;
    padding: 8px;
    font-family: 'Montserrat';
  }
  
  #customers tr:nth-child(even){background-color: #f2f2f2;}
  
  #customers tr:hover {background-color: #ddd;}
  
  #customers th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: darkslategray;
    color: white;
  }

  .policy-wrapper {
    padding: 50px 5%;
  }

  .influencer-column {
    font-size: 4rem;
    font-weight: 600;
    color: #474747;
}

.influencer-card {
    width: 100%;
    background-color: rgba(245, 245, 245, 0.403);
    border-radius: 20px;
    border: 3px solid rgba(211, 211, 211, 0.415);
    box-shadow: 0px 2px 1px lightgrey;
    padding: 40px 50px;
}

.influencer-heading-column {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.influencer-flex-col {
    display: flex;
    gap: 100px;
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: 50px;

}


.form-elements-text-date-black {
    padding: 10px 0;
    text-align: center;
    font-weight: 600;
    color: #474747;
    font-size: 1.5rem;
    text-wrap: nowrap;
}

.sub-menu-time-black {
    transform: translateY(10px);
    display: none;
    width: 200px;
    overflow: visible;
    position: absolute;
    padding: 5px 0px;
    border: none;
    animation: showMenu ease 0.5s forwards;
    z-index: 100;
}

.time-picker-flex {
    display: flex;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
}

.time-picker-scroll-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 200px;
    overflow: auto;
}

.time-picker-element {
    font-size: 0.8rem;
    background-color: whitesmoke;
    border-radius: 4px;
    text-align: center;
    padding: 10px 15px;
    transition: all 1s ease 0.25s;
}

.time-picker-element:hover {
    cursor: pointer;
    background-color: lightcyan;
}

.time-picker-header {
    font-size: 0.8rem;
    font-weight: 500;
}

.time-picker-scroll-col::-webkit-scrollbar {
    -webkit-appearance: none;
    background-color: white;
    width: 8px;
}

.time-picker-scroll-col::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

.time-picker-button {
    padding: 5px 10px;
    background-color: darkslategrey;
    color: white;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 4px;
    box-shadow: 0px 2px 2px lightgrey;
}

.time-picker-button:hover {
    cursor: pointer;
}

.time-picker-col {
   padding: 10px 0;
}