@media only screen and (max-device-width: 768px){
    @import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap");
    @import '@fortawesome/fontawesome-free/css/all.min.css';

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

    /* || VARIABLES */

    :root {
        /* COLORS */
        --DARK-COLOR: #474747;
        --LIGHT-COLOR: #fffffb;
    }


    /* || GENERAL STYLES */

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


    /* ss below */
    html, body {
        height: 100%;
        margin: 0; /* Remove default margin */
      }

    
    /* ss below  */
    .full-height {
        height: var(--vh, 100vh);
        background-color: lightgray; /* Optional: just to visualize the div */
    }


    .request-caraddition-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;
        padding: 10px;
        
    }

    .request-caraddition-modal {
        height: 500px;
        width: 500px;
        background-color: white;
        border-radius: 12px;
        border: 2px solid grey;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        padding: 20px;
        align-items: center;
    }

    .request-caraddition-flexbox {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        height: 35vh;
    }

    .left-request-caraddition-flexbox {
        width: 45%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

    .right-request-caraddition-flexbox {
        width: 65%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

    .request-caraddition-label {
        font-size: 0.9rem; font-weight: 500; color: #474747;
    }

    .request-caraddition-textbox {
        border: none;
        outline: none;
        padding: 12px 20px;
        background-color: whitesmoke;
        border-radius: 12px;
        width: 100%;
    }
    .requestCarAddition-submit-button {
        width: 100%;
        height: 50px;
        background-color: #00161f;
        color: white;
        font-family: 'Montserrat';
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

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

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



    h1,
    h2,
    h3,
    p {
        color: var(--DARK-COLOR);
        padding-bottom: 10px;
        font-size: 0.8rem;
        font-weight: bold;
    }

    h4 {
        color: var(--DARK-COLOR);
        padding-bottom: 5px;
        font-size: 0.65rem;
        font-weight: bold;
    }

    h1 {
        font-weight: bolder;
    }

    h2 {
        font-weight: normal;
    }

    p {
        font-weight: light;
    }

    input {
        font-family: "Montserrat";
    }

    .disable-dbl-tap-zoom {
        touch-action: manipulation;
    }

    .input-line-style {
        border: none;
        outline: none;
        width: 100%;
        background-color: whitesmoke;
        border-radius: 8px;
        padding: 12px 5px 12px 20px;
        font-size: 0.8rem;
    }

    .input-line-style::placeholder{
        text-transform: none;
    }

    nav {
        display: none;
        padding: 0% 6%;
        animation: showMenu ease 0.5s forwards;
    }

    main {
        display: block;
    }

    .nav-bar-class {
        overflow: auto;
        height: 100%;
    }


    element.style {
        margin-left: 0px;
        /* set to 0 if your not using a list-style-type */
        padding-left: 20px;
    }

    nav ul li {
        list-style-type: none;
        height: 3.5rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        /* border-bottom: 0.5px solid var(--DARK-COLOR); */
        flex-wrap: nowrap;
        width: auto;
        border-radius: 10px;
    }

    

    .menu-list-item {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        flex-grow: 1;
        height: 3.5rem;
        text-decoration: none;
        color: var(--DARK-COLOR);
        padding-left: 20px;
        font-size: 0.9rem;
        border-radius: 10px;
        cursor: pointer;
        gap: 10px;
    }

    .search-text-close-button {
        margin-right: 10px;
        position: absolute;
        background-color: transparent;
        border: none;
        height: 30px;
        width: 20px;
        display: flex;
        justify-content: center;
        align-items: center;

    }


    /* ||  HEADER STYLES -- FOR MOBILE SCREENS*/

    header {
        display: block;
        overflow: hidden;
        /* height: calc(100vh - 50px); */
        height: auto;
        background-color: white;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 100;
    }

    .header-title-line {
        padding: 10px 20px;
        display: grid;
        grid-template-columns: 15% 85%;
        width: 100%;
        opacity: 1;
        background-color: var(-LIGHT-COLOR);
        justify-content: space-between;
        align-items: center;
        align-content: center;
        position: sticky;
        z-index: 1;
    }

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

    .header-logo-image {
        background-size: contain;
        width: 180px;
        height: 50px;
        opacity: .9;
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
    }

    

    .no-matching-items {
        display: none;
        padding: 20px 10px 0px 30px;
        font-size: 0.9rem;
        position: absolute;
        margin-top: 100px;
    }

    .menu-button {

        background-color: transparent;
        border: none;
        height: 48px;
        width: 48px;
        display: flex;
        justify-content: center;
        align-items: center;


    }



    :is(.menu-icon, .menu-icon-top, .menu-icon-bottom) {
        width: 30px;
        height: 3px;
        border-radius: 5px;
        background-color: var(--DARK-COLOR);
        position: absolute;
        transition: all 0.2s ease-in-out;
        content: "";
    }

    .menu-icon-top {
        /* transform: translate(0px, -8px); */
        transform: translate(0px, -8px);
    }

    .menu-icon-bottom {
        transform: translate(0px, 8px);
    }

    .menu-button {
        transition: all 0.2s ease-in-out;
    }

    .menu-list-icon-div {
        height: auto;
        width: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .menu-list-icon {
        background-position: contain;
    }


    /* @keyframes decrementMonth {
        0% {
            transform: translateX(0px);
        }

        100% {
            transform: translateX(1000px);
        }

    } */


    @keyframes slideMark {
        from {
            margin-left: var(--m, 0%);
        }

        to {
            margin-left: var(0%);
        }
    }


    @keyframes openDialPad {
        0% {
            transform: translateY(1000px);
        }

        100% {
            transform: translateY(0px);
        }
    }


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

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

    }

    @keyframes showMenu {


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

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

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

    @keyframes openHomePage {
        0% {
            opacity: transparent;
        }
        80% {
            opacity: 50%;
        }
        100% {
            opacity: 100%;
        }
    }



    /* ||  HEADER STYLES -- FOR LARGER SCREENS */
    @media screen and (min-width: 481px) {

        body {}

        header {}

    }



    /* || MAIN SECTION FOR MOBILE SCREENS */

    /* || MAIN BODY  */

    .source-code {
        font-size: 1.8rem;
        font-weight: 700;
        text-align: center;
        color: #474747;
        padding: 5px 0px 1px 0px;
    }

    .source-city {
        font-size: 0.75rem;
        font-weight: 500;
        text-align: center;
        color: #474747;
        padding-bottom: 5px;
    }

    .source-text {
        border: 1px solid transparent;
        outline: none;
        font-size: 0.8rem;
        font-weight: 500;
        border-radius: 12px;
        padding: 5px 10px;
        background-color: whitesmoke;
        overflow: hidden;
        text-wrap: nowrap;
        min-width: 45%;
    }


    .source-destination-flex {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }


    .share-travel-date-input {
        background-color: transparent;
        outline: none;
        border: none;
        font-size: 0.8rem;
        font-weight: 400;
        width: 100%;
    }

    .share-travel-date-input::placeholder {
        color: lightgray;
        font-weight: 400;
    }

    .share-travel-date-box  {
        padding: 12px 20px;
        background-color: whitesmoke;
        border-radius: 12px;
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 20px;
    }

    .share-travel-date-box1  {
        padding: 12px;
        background-color: whitesmoke;
        border-radius: 12px;
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 20px;
    }

    .source-div {
        padding: 20px 0px 0px 0px;
        
    }

    .hidden-menu-item {
        opacity: 0%;
        animation: appear 0.5s ease forwards;
    }

    


    .destination-div,
    .pick-div,
    .drop-div {
        padding: 5px 0px 0px 0px;
    }

    

    .pick-time-div {
        padding: 20px 0px 0px 0px;
    }


    .date-picker-div {
        padding: 5px 0px 0px 0px;
    }

    .phone-div {
        padding: 20px 0px 0px 0px;
        
    }

    .passenger-count-div {
        padding: 20px 0px 0px 0px;
        
    }

    .search-button-div {
        padding: 20px 0px 0px 0px;
        
    }


    .home-page {
        display: block;
        padding: 50px 12% 20px 12%;

    }

    .home-page-heading-text {
        font-family: Montserrat;
        font-weight: 600;
        font-size: 1.5rem;
        color: #474747;
    }

    .home-page-subheading {
        font-weight: 500;
        font-size: 0.75rem;  
    }

    .home-page-label {
        font-weight: 500;
        font-size: 0.75rem;  
    }

    @keyframes delay1 {
        from {
            margin-top: 100vh;
        }

        to {
            margin-left: 0 px;
        }
    }

    @keyframes appear {
        from {
            opacity: 0%;
        }

        to {
            opacity: 100%;
        }
    }


    @keyframes disappear {
        from {
            opacity: 100%;
        }

        to {
            opacity: 0%;
        }
    }


    .home-page-heading-div1 {
        padding: 40px 0px 0px 0;
        

    }

    .home-page-heading-div2 {
        padding: 5px 0px 10px 0px;
    
    }


    /*  || SEARCH LIST FOR CITY */

    .search-city-page {
        display: none;
        opacity: 0;
        width: 100%;
        z-index: 1;
        animation: openSearchPage 0.5s ease forwards;
        position: sticky;
        top: 0;

        /* ss below */
        height: var(--vh, 100vh);
        background-color: lightgray; /* Optional: just to visualize the div */
    }

    .points-page {
        display: none;
        opacity: 0;
        width: 100%;
        z-index: 1;
        animation: openSearchPage 0.5s ease forwards;
        position: sticky;
        top: 0;
        
        /* ss below */
        height: var(--vh, 100vh);
        background-color: lightgray; /* Optional: just to visualize the div */
    }


    .search-bar-wrapper {
        background-color: #262626;
        padding: 20px 20px 10px 0px;
        width: 100%;
        height: 100px;
        position: fixed;
        top: 0;
    }
    

    ::-webkit-scrollbar {
        appearance: none;
        width: 0px;
        height: 0px;
    }
    

    .cancel-ticket-label {
        font-size: 0.8rem;
        color: #474747;
        font-weight: 500;
        padding-bottom: 10px;
    }

    .cancel-ticket-textbox {
        width: 100%;
        border: none;
        outline: none;
        border-radius: 8px;
        padding: 12px 20px;
        margin-bottom: 25px;
        font-size: 0.8rem;
        background-color: whitesmoke;
    }

    .circular-loader {
        display: none;
        border: 2px solid #f3f3f3; /* Light grey */
        border-top: 2px solid darkslategray; /* Blue */
        border-radius: 50%;
        width: 20px;
        height: 20px;
        animation: spin 2s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    .city-list-ul {
        list-style-type: none;
        background-color: white;
        overflow-y: scroll;
        position: absolute;
        top: 100px;
        width: 100%;
        padding-bottom: 100px;
        z-index: -1;
        height: calc(100% - 100px);
    }

    .city-list-li {
        background-color: white;
        margin-bottom: 1px;
    }

    .search-city-textbox {
        border: 1px solid darkslategrey;
        outline: none;
        font-size: 0.9rem;
        border-radius: 8px;
        padding: 10px 20px;
        width: 100%;

    }

    .search-city-bar {
        display: flex;
        align-items: center;
        position: relative;
        justify-content: flex-end;
        width: 100%;
    }



    .search-bar-line {
        display: flex;
        padding: 10px 0px;

    }

    .search-city-back-button {
        background-color: transparent;
        border: none;
        margin-left: 20px;
        margin-right: 10px;
        filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(5deg) brightness(102%) contrast(102%);

    }


    /* || CALENDAR  */

    .calendar-header {
        display: flex;
        padding: 0px 10px 20px 10px;
        align-items: center;
        justify-content: space-between;
        
    }

    .full-width {
        width: 100%;
        justify-content: center;

    }

    .calendar-page {
        display: none;
        height: 100%;
        text-align: center;
        padding: 50px 15px 40px 15px;
        animation: openSearchPage 0.5s ease ;
        flex-direction: column;
        justify-content: center;
        background-color: lightblue;
        height: 100vh;
        position: fixed;
        top: 0;
        width: 100%;
    }

    .calendar-page-heading {
        font-size: 1.2rem;
        justify-content: center;
        font-weight: 500;
        color: #474747;
        padding-bottom: 0px;
    }

    .calender-header {
        display: flex;
        justify-content: space-between;
    }

    .calendar-grid {
        height: 65vh;
        background-color: lightblue;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        padding: 0 10px;
    }

    .calendar-grid-heading-day {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        justify-items: center;
        padding: 0px 0px;
        font-size: 1rem;
        height: 20%;
    }

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


    


    .box {
        width: 8vw;
        height: 8vw;
        border-radius: 8px;
        background-color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        font-size: 0.7rem;
        border: none;
        outline: none;
        box-shadow: 1px 1px 1px #d0d0d0;
    }

    .day-box {
        background-color: darkslategrey;
        color: #fffffb;
    }

    .highlight {
        background-color: orange;
        color: #fffffb;
    }

    .top-line {
        padding: 50px 0 30px 0;
    }
    .date-evenout {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        height: 80%;
        animation: appearslowBox 1s ease;
    }

    .calender-heading {
        padding-top: 10px;
        align-items: center;
        font-size: 1.6rem;
        font-weight: 600;
        color: #474747;
    }

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

    }

    .last-line {
        display: block;
    }

    .selected {
        border: 2px solid #474747;
        border-radius: 10px;
        background-color: orange;
        color: whitesmoke;
        font-weight: bolder;
    }


    .date-picker-back-button {
        border: none;
        outline: none;
        background-color: transparent;
        position: absolute;
    }


    .phone-dialer-page-wrapper {
        height: 100vh;
        width: 100%;
        background-color: #8888886c;
        display: none;
        position: fixed;
        bottom: 0px;
        z-index: 2;
    }


    .phone-dialer-page {
        position: fixed;
        bottom: 0px;
        width: 100%;
        background-color: rgb(45, 45, 45);
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        padding: 1rem;
        animation: openDialPad ease 0.5s;
    }

    .dial-number-box {
        display: flex;
        text-align: center;
        background-color: whitesmoke;
        height: 40px;
        width: 80%;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
    }

    .dial-number-box:hover {
        background-color: lightslategray;
    }

    .dial-number-line {
        width: 100%;
        display: flex;
        gap: 10%;
        align-items: center;
        padding-bottom: 10px;
        justify-content: space-evenly;
    }

    .numpad-font {
        font-size: 1rem;
        padding: 0;
        font-weight: 600;
        font-family: 'Montserrat';
        color: #474747;
    }


    .dial-number-text-div {
        padding-bottom: 1rem;

    }

    .dial-number-text {
        width: 100%;
        height: 60px;
        border: none;
        outline: none;
        border-radius: 10px;
        font-size: 2.5rem;
        text-align: end;
        padding-right: 20px;
    }

    .passengers-home-page {
        display: flex;
        width: 50%;
        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); */
    }

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

    }

    .passenger-count-label {
        padding: 5px 0px;
    }

    .passengers-button-left {

        width: 50px;
        background-color: whitesmoke;
        border: none;
        outline: none;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
        color: black;
        font-size: 1.2rem;

    }

    .passengers-button-right {

        width: 50px;
        background-color: whitesmoke;
        border: none;
        outline: none;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        border-top-left-radius: 2px;
        border-bottom-left-radius: 2px;
        color: black;
        font-size: 1rem;

    }

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


    /* FIND YOUR RIDE Button*/


    .search-button {
        border: none;
        outline: none;
        margin-top: 50px;
        width: 100%;
        background-color: black;
        color: white;
        font-size: 1.2rem;
        font-weight: 500;
        border-radius: 12px;
        padding: 12px;
        font-family: 'Montserrat';
    }


    /* FOOTER MENU */

    .unselected {
        filter: brightness(0) saturate(100%) invert(75%) sepia(8%) saturate(0%) hue-rotate(143deg) brightness(92%) contrast(94%);
    }

    .selected-item {
        filter: brightness(0) saturate(100%) invert(11%) sepia(1%) saturate(2452%) hue-rotate(320deg) brightness(99%) contrast(85%);
    }

    .share-black-buttons {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        padding-top: 5px;
    }

    .share-black-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: white;
        outline: none;
        border: none;
        color: gray;
    }

    .share-black-sliding-marker-bar {
        position: relative;
        display: flex;
        animation: slideMark ease 1s forwards;
        transition: all ease 1s;
    }

    .share-black-sliding-marker {
        margin-left: 0%;
        height: 3px;
        border-radius: 10px;
        width: 20%;
        background-color: black;
    }

    .share-black-selection {
        position: fixed;
        bottom: 0;
        justify-content: center;
        background-color: white;
        align-items: start;
        width: 100%;
    }


    .menu-button-text-selected {
        color: #292929;
        font-family: 'Montserrat';
        font-size: 0.7rem;
        font-weight: 500;
    }

    .menu-button-text-unselected {
        font-size: 0.7rem;
        color: #969696;
        font-family: 'Montserrat';
        font-weight: 500;
    }

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


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

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

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

    .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-line9 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 0;
    }

    .loc-code-box {
        padding: 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.7rem;
        color: #474747;
        padding: 0px 0px 3px 0px;
        font-weight: 500;
    }  

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

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

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

    .large-heading-text-right {
        font-size: 0.8rem;
        color: #474747;
        padding: 0px 0px 0px 5px;
        font-weight: 700;
    }

    .main-car-list-view {
        margin-top: 90px ;
    }

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

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


    .car-list-view-card {
        border-radius: 10px;
        padding: 20px;
        box-shadow: 1px 1px 5px 0px grey;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .car-list-view-black-card {
        border-radius: 10px;
        padding: 20px;
        box-shadow: 1px 1px 5px 0px grey;
        margin: 10px;
    }

    .car-list-line1 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 0px 30px 0px;
        gap: 10px;
    }

    .car-list-line11 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 0px 15px 0px;
        gap: 10px;
    }

    .source-dest-heading-text {
        font-size: 0.9rem;
        color: #474747;
        font-weight: 600;
        padding-bottom: 5px;
    }

    .source-dest-heading-text-right {
        font-size: 0.9rem;
        color: #474747;
        font-weight: 600;
        padding-bottom: 5px;
        text-align: right;
    }

    .small-text {
        font-size: 0.6rem;
        color: #474747;
        font-weight: 500;
        padding-bottom: 0px;
    }

    .small-text-right {
        font-size: 0.6rem;
        color: #474747;
        font-weight: 500;
        text-align: right;
        padding-bottom: 0px;
    }

    .top-margin-200 {
        margin-top: 190px;
    }

    .car-list-view-flex-card {
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: space-between;
        background-color: #474747;
        padding: 10px 20px 10px 20px;
        box-shadow: 0px 0px 2px 0px whitesmoke;
        position: fixed;
        top: 0;
        z-index: 1;
        /* margin-top: 20px;
        margin-bottom: 20px; */
    }

    .car-list-wrapper {
        padding: 0 20px 170px 20px;
    }

    .tell-us-button {
        outline: none;
        border: none;
        border-radius: 8px;
        background-color: rosybrown;
        width: 100px;
        height: 30px;
        color: white;
        font-family: 'Montserrat';
        font-weight: 500;
        box-shadow: 1px 1px 0px grey;
    }



    /* SEAT SELECTION  */

    .seat-selection-header {
        text-align: center;
    }

    .seat-selection-image-container {

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

    .seat-selection-page {
        height: 100vh;
    }

    .seat-image {
        z-index: 1;
        height: 17vw;
        width: 17vw;
    }

    .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%);
    }

    .flex-container {
        display: flex;
        padding: 10px 0px 5px 0px;
        align-items: center;
    }
    .seat-wrapper {
        position: relative;
    }

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

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

    .seat-container {
        position: absolute;
        padding-top: 163px;
        margin-left: -6px;
    }

    .seat-legends {
        padding: 0px 0px 0px 10px;
        font-size: 0.8rem;
        font-weight: 400;
    }

    .seat-selection-legends {
        display: flex;
        justify-content: space-between;
        padding: 10px 30px;
    }

    .seat-selected-button {
        width: 100%;
        background-color: darkslategray;
        color: white;
        font-size: 1rem;
        font-weight: 500;
        border-radius: 12px;
        padding: 15px;
        border: none;
        font-family: 'Montserrat';
    }

    .seat-selected-button-container {
        padding: 20px 30px 170px 30px;
    }

    .passenger-details-page {
        padding: 10px 0px 170px 0px;
    }


    .passenger-details-line {
        padding: 20px 0px ;
    }


    .passenger-details-text {
        font-size: 0.9rem;
        font-weight: 500;
    }

    .summary-view-card {
        width: 100%;
        border-radius: 10px;
        padding: 10px 20px 10px 20px;
        box-shadow: 1px 1px 5px 0px grey;
        /* margin-top: 20px;
        margin-bottom: 20px; */
        /* position: fixed; */
        /* top: 10px; */
        background-color: white;
        z-index: 1;
    }

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

    .summary-line2 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 8px;
    }

    .summary-line3 {
        display: flex;
        justify-content: space-between;
        align-items: center;

    }

    .passenger-details-card {
        margin-top: 50px;
        display: block;
    }

    .passenger-details-card-main {
        padding: 0px 10px;
        display: block;
    }

    .summary-view-card2 {
        border-radius: 10px;
        padding: 10px 20px 10px 20px;
        box-shadow: 1px 1px 5px 0px grey;
        margin-top: 20px;
        margin-bottom: 20px;
        background-color: white;
        overflow: hidden;
        transition: all 1s ease forwards;
    }

    .passenger-suggested-button {
        border-radius: 10px;
        border: none;
        outline: none;
        background-color: darkred;
        color: white;
        padding: 2px 5px;
        font-size: .6rem;
        box-shadow: 1px 1px 5px 0px grey;
    }

    .passenger-details-textbox {
        width: 100%;
        border: none;
        border-radius: 8px;
        padding: 12px 20px;
        margin-bottom: 15px;
        font-size: 0.8rem;
        background-color: whitesmoke;
    }

    .passenger-details-line2 {
        padding: 10px 0px;
    }

    .passenger-details-line3 {
        padding: 10px 0px 10px 10px;
        display: flex;
        justify-content: space-between;
    }

    .passenger-details-textbox:focus {
        outline: none;
    }

    .checkbox {
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .zero-padding {
        padding: 0;
    }

    .padding-bottom {
        padding: 0px 0px 20px 0px;
    }

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

    .padding-bottom2 {
        padding: 0px 0px 150px 0px;
    }

    .padding-top {
        padding: 20px 0px 0px 0px;
    }

    .padding-top-bottom {
        padding: 20px 0px 20px 0px;
    }

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

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

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

    .padding-top-15 {
        padding: 15px 0px 0px 0px;
    }


    .check-box-card {
        border-radius: 10px;
        padding: 10px 20px 20px 20px;
        box-shadow: 1px 1px 5px 0px grey;
        /* margin-top: 20px;
        margin-bottom: 20px; */
        background-color: white;
    }

    .fare-highlighter {
        background-color: darkolivegreen;
        align-items: center;
        padding: 10px;
        border-radius: 8px;

    }

    .text-white {
        color: white;
    }

    .policy-links,
    .policy-links:visited {
        color: blue;
        text-decoration: none;
    }

    .policy-links:active {
        color: red;
        text-decoration: none;
    }


    .selected-main {
        display: none;
        opacity: transparent;
        animation: openHomePage 1s ease-in-out forwards; 
    }


    .fixed-text {
        border: none;
        outline: none;
        font-size: 0.8rem;
        font-weight: 500;
        border-radius: 12px;
        padding: 12px 20px;
        width: 100%;
        margin-bottom: 10px;
        background-color: #474747;
        color: white;
    
    }

    .contact-us-card {
        position: relative;
        border: none;
        border-radius: 12px;
        background-color: whitesmoke;
        padding: 10px 20px;
    }

    

    .contact-card-textbox {
        width: 100%;
        border: none;
        outline: none;
        border-radius: 8px;
        padding: 12px 20px;
        margin-bottom: 15px;
        font-size: 0.8rem;
        background-color: white;
        font-family: 'Montserrat';
    }

    .contact-card-textbox::placeholder {
        font-family: 'Montserrat';
    }

    .contact-card-textbox-flex {
        display: flex;
        gap: 10px;
        align-items: center;
        width: 100%;
        border: none;
        border-radius: 8px;
        padding: 0px 20px;
        margin-bottom: 15px;
        font-size: 0.8rem;
        background-color: white;
    }





    /* The Modal (background) */
    .modal {
        display: none;
        /* Hidden by default */
        position: fixed;
        /* Stay in place */
        z-index: 1;
        /* Sit on top */
        padding-top: 100px;
        /* Location of the box */
        left: 0;
        top: 0;
        width: 100%;
        /* Full width */
        height: 100%;
        /* Full height */
        overflow: auto;
        /* Enable scroll if needed */
        background-color: rgb(0, 0, 0);
        /* Fallback color */
        background-color: rgba(0, 0, 0, 0.4);
        /* Black w/ opacity */
    }

    /* Modal Content */
    .modal-content {
        background-color: #fefefe;
        margin: auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
        position: relative;
    }

    .modal-header {
        display: flex;
        justify-content: center;
        padding-bottom: 50px;
    }


    .small-text-right1 {
        font-size: 0.6rem;
        font-weight: 400;
        color: black;
        text-align: right;
    }



    /* The Close Button */
    .close {
        color: #161616;
        position: absolute;
        top: 10px;
        right: 30px;
        font-size: 28px;
        font-weight: bold;
    }

    .hour-min-flex {
        display: flex;
    }

    .hour-min-picker {
        width: 50px;
        height: 150px;
        overflow: auto;
        background-color: aquamarine;
    }

    .ticker-box {
        width: 50px;
        height: 50px;
        background-color: #888;
        border: 1px solid white;
        display: flex;
        justify-content: center;
        align-items: center;
        color: rgb(90, 189, 117);
    }

    .time-picker {
        display: flex;
        width: 100%;
        justify-content: center;
        text-align: center;
    }


    input[type="time"] {
        position: relative;
        width: 100%;
        padding-left: 40px;
    }

    input[type="time"]::-webkit-calendar-picker-indicator {
        display: flex;
        /* top: -5px; */
        left: 0px; 

        height: 50%;
        width: 20%;
        position: absolute;
        
    }

    .shimmer-main {
        padding: 30px;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .shimmer-box {
        height: 100px;
        width: 100%;
        background-color: gray;
        border-radius: 4px;
        background: linear-gradient(-45deg, #eee 40%, #fafafa 50%, #eee 60%);
        background-size: 300%;
        background-position-x: 100%;
        animation: shimmer 1s infinite linear;
    }

    .shimmer-box1 {
        display: flex;
        justify-content: right;
        height: 30px;
        width: 70%;
        background-color: gray;
        border-radius: 4px;
        background: linear-gradient(-45deg, #eee 40%, #fafafa 50%, #eee 60%);
        background-size: 300%;
        background-position-x: 100%;
        animation: shimmer 1s infinite linear;
    }

    .shimmer-box-long {
        display: flex;
        justify-content: right;
        height: 30px;
        width: 100%;
        background-color: gray;
        border-radius: 4px;
        background: linear-gradient(-45deg, #eee 40%, #fafafa 50%, #eee 60%);
        background-size: 300%;
        background-position-x: 100%;
        animation: shimmer 1s infinite linear;
    }

    .shimmer-box-long1 {
        display: flex;
        justify-content: right;
        height: 10px;
        width: 100%;
        background-color: gray;
        border-radius: 4px;
        background: linear-gradient(-45deg, #eee 40%, #fafafa 50%, #eee 60%);
        background-size: 300%;
        background-position-x: 100%;
        animation: shimmer 1s infinite linear;
    }

    .shimmer-box-long2 {
        display: flex;
        justify-content: right;
        height: 50px;
        width: 100%;
        background-color: gray;
        border-radius: 4px;
        background: linear-gradient(-45deg, #eee 40%, #fafafa 50%, #eee 60%);
        background-size: 300%;
        background-position-x: 100%;
        animation: shimmer 1s infinite linear;
    }

    .shimmer-grid {
        display: grid;
        grid-template-columns: 48% 48%;
        width: 100%;
        background-color: var(-LIGHT-COLOR);
        justify-content: space-between;
        align-items: center;
        align-content: center;
        position: sticky;
        z-index: 1;
    }

    @keyframes shimmer {
        to {
        background-position-x: 0%
        }
    }

    .shimmer-circle {
        height: 45px;
        width: 45px;
        border-radius: 50%;
        background-color: gray;
        background: linear-gradient(-45deg, #eee 40%, #fafafa 50%, #eee 60%);
        background-size: 300%;
        background-position-x: 100%;
        animation: shimmer 1s infinite linear;
    }


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

    .main-success-page {
        padding: 30px 20px;
    }

    h5 {
        font-size: 0.9rem;
    }

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

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

    .summary-contact-details {
        display: flex;
        flex-direction: column;
        align-items: end;
    }

    .fa-phone:before, .fa-circle-arrow-right:before {
        font-size: 0.7rem;
        display: flex;
        align-items: center;
    }

    .fa-sort-down {
        padding-bottom: 7px;
    }


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

    .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;
    }
    .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;
    }

    .summary-line4 {
        width: 100%;
        border-radius: 5px;
        display: flex;
        justify-content: left;
        align-items: center;
        padding: 5px 0px 5px 15px;
        color: #484848;
        font-weight: 400;
    }

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

    .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;
    }

    .phone-input-division {
        display: flex;
        gap: 5px;
        align-items: center;
        width: 100%;
        border-radius: 8px;
        border: none;
        padding: 0px 5px 0px 10px;
        background-color: whitesmoke;
    }

    .phone-text {   
        border: none;
        outline: none;
        font-size: .8rem;
        font-weight: 500;
        padding: 12px;
        width: 100%;
        background-color: whitesmoke;
    }

    .country-code {
        
        padding: 0px;
        display: flex;
        gap: 5px;
        align-items: center;
        /* justify-content: space-around; */
    }

    .country-code-page {
        display: none;
    }

    .country-code-text {
        font-size: 0.8rem;
        padding: 0 5px 0 0;
        font-weight: 500;
        height: 18px;
        display: flex;
        align-items: center;
    }

    .digit-wrapper {
        display: flex;
        position: absolute;
        right: 40px;
        flex-wrap: nowrap;
        width: 30%;
        justify-content: right;
        padding-right: 5px;
        color: transparent;
        font-weight: 400;
        font-size: 0.6rem;
    }

    .country-code-class {
        display: flex;
        align-items: center;
        font-size: 0.8rem;
        font-weight: 400;
    }

    .cancel-ticket-banner {
        width: 100%;
        padding: 40px 10px 10px 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.2rem;
        font-weight: 600;
        color: #262626;
    }

    .cancel-ticket-card {
        padding: 0 20px;
    }

    .cancel-ticket-line {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0px;
        font-size: 1rem;
        font-weight: 500;
    }

    .cancel-ticket-button {
        width: 100%;
        padding: 10px;
        background-color: darkslategray;
        color: white;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.9rem;
        
    }

    .otp-wrapper-box {
        width: 100%;
        height: 31px;
    }

    .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';
    }

    .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%;

        
        
    }

    .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;
    }

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

    .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;
    }

    .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);
        font-family: 'Montserrat';
    }

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


    .flex-container11 {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        gap: 10px;
    }

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

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

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

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

    .summary-view-card3 {
        border-radius: 10px;
        padding: 10px 20px 10px 20px;
        box-shadow: 1px 1px 5px 0px grey;
        background-color: white;
        overflow: hidden;
        animation: appearslowBox 1s ease forwards;
    }

    @keyframes expandBox {
        0% {
            height: 10%;
        }

        100% {
            height: 100%;
        }
    }

    @keyframes collapseBox {
        0% {
            height: 570px;
        }

        100% {
            height: 75px;
        }
    }


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

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

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

        100% {
            opacity: 100%;
        }
    }

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


        10% {
            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;
        }
    }

    .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';
    }

    .influencer-column {
        font-size: 3rem;
    }

    .time-picker-flex {
        display: flex;
        gap: 30px;
        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;
    }

    .time-picker-black {
        padding: 0px 30px;
        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);
    }


    .time-picker-wrapper {
        height: 100vh;
        width: 100%;
        background-color: #8888886c;
        display: none;
        position: fixed;
        bottom: 0px;
        justify-content: center;
        align-items: center;
    }
    



.cancel-page-flex {
    display: flex;
    justify-content: center;
    font-weight: 600;
    font-size: 20px;
    color: #484848;
}

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

.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-heading {
    font-size: 1.2rem;
    font-weight: 500;
    text-align: justify;
    padding: 20px 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;
}

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

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

/* WIZZBLACK */


.homepage-black-label {
    font-weight: 500;
    font-size: 0.75rem;
    color: #474747;
}

.homepage-black-input-flex {
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 12px 20px;
    background-color: whitesmoke;
    border-radius: 12px;
    margin-bottom: 10px;
    gap: 10px
}

.carlist-black-static-card {
    width: 100%;
        border-radius: 12px;
        padding: 20px 20px 10px 20px;
        box-shadow: 1px 1px 5px 0px grey;
        background-color: white;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        height: 170px;
}


.primary-passenger-details-card {
        display: block;
        padding: 0 10px 170px 10px;
}

.passenger-details-black-main {

}

/* ABOUT THE COMPANY */

.absolute-heading {
    position: absolute;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 400;
    color: white;
    padding: 50px 0px 0px 0px;
}

.img-wrapper2 {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    overflow: hidden;
}

.img-overlay-wrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.company-para-heading12 {
    font-size: 1.5rem;
    font-weight: 600;
    text-align: left;
    color: #474747;
    padding: 20px 0px 20px 0px;
}

.company-para12 {
    text-align: justify;
    padding: 0px 0px 20px 0px;
    font-weight: 400;
    font-size: 0.8rem;
}

.logo-box-curved {
    border-radius: 20px;
    width: 300px;
    height: 200px;
    object-fit: contain;
}

.company-logo-flexbox22 {

        display: flex;
        justify-content: start;
        gap: 30px;
        overflow-x: visible;
        padding-bottom: 100px;
}

.company-logo-flexbox22::-webkit-scrollbar {
    display: none;
}
  
/* Hide scrollbar for IE, Edge and Firefox */
.company-logo-flexbox22 {
-ms-overflow-style: none;  /* IE and Edge */
scrollbar-width: none;  /* Firefox */
}

/* @keyframes autoScrollX {
    0% { transform: translate(0px, 0px); }
    50% { transform: translate(-100%, 0px); }
    100% { transform: translate(0px, 0px); }
} */

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

.journey-year {
    font-weight: 600;
    font-size: 1.5rem;
    color: #474747;
    width: 40%;
    display: flex;
    justify-content: end;
}

.journey-year-left {
    font-weight: 600;
    font-size: 1.5rem;
    color: #474747;
    width: 40%;
    display: flex;
    justify-content: start;
}

.journey-checkpoint {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: rgb(34, 34, 34);
}

.journey-flexbox {
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: center;
}

.vertical-line {
    height: 80px;
    width: 8px;
    border-radius: 12px;
    background-color: #474747;
}

.journey-milestone {
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items: center;
    height: 50px;
}

.journey-description {
    font-weight: 400;
    font-size: 0.8rem;
    color: #101010;
    width: 40%;
    display: flex;
    justify-content: start;
    text-align: left;
    line-height: 15px;
}

.journey-description-right {
    font-weight: 400;
    font-size: 0.8rem;
    color: #101010;
    width: 40%;
    display: flex;
    justify-content: start;
    text-align: right;
    line-height: 15px;
}

/* ENROL YOUR CAR PARTNER WITH US*/
.partner-card {
    width: 100%;
    background-color: white;    
    padding: 20px 30px 40px 30px;
    display: none;
    border: none;
    outline: none;
}

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



.partner-label {
    width: 50%;
    font-size: 0.8rem;
    font-weight: 400;
    color: #474747;
}

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


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

.partner-text-input {
    width: 100%;
    border-radius: 12px;
    border: none;
    outline: none;
    font-size: 0.8rem;
    font-weight: 400;
    background-color: whitesmoke;
    padding: 12px 20px;
    font-family: 'Montserrat';
}

.partner-mobile-heading {
    margin-top: 70px;
    font-size: 1.5rem;
    font-weight: 600;
    color: #474747;
}

.option-class {
    font-size: 1.2rem;
    height: 50px;

}

.partner-modal-already-car {
    width: 90%;
    height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    background-color: white;
    opacity: 100%;
    border: 2px solid lightgrey;
    border-radius: 12px;
    padding: 20px 20px 40px 20px;
    position: relative;
}

.partner-modal-already-car-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #47474780;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.partner-modal-input-flex {
    display: flex;
    gap: 10px;
    justify-content: start;
    align-items: start;
}

.partner-modal-button-flex {
    width: 100%;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    font-weight: 500;
    color: #474747;
}

.partner-modal-already-car-button {
    height: 35px;
    width: 200px;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: darkslategrey;
    color: white;
    font-size: 1rem;
    font-weight: 400;
    border-radius: 12px;
}

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

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

.teams-icon-wrapper {
    width: 300px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.teams-unit-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: whitesmoke;
    border-radius: 12px;
    border: none;
    padding: 0px 20px ;
}

.teams-unit-wrapper-flex {
    margin-top: 20px;
    gap: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: start;
}

.news-flexbox {
    display: flex;
    align-items: start;
    gap: 50px;
    background-color: whitesmoke;
    border-radius: 12px;
    padding: 20px;
}

.news-flexbox:hover {
    cursor: pointer;
}

.news-heading {
    font-size: 1.1rem;
    line-height: 30px;
    font-weight: 500;
    color: #474747;
    text-align: left;
}

.news-date {
    font-size: .9rem;
    font-weight: 400;
    color: #1e69c5;
    text-align: right;
}

.news-subheading {
    padding-top: 10px;
    font-size: 1em;
    font-weight: 400;
    color: #595959;
    line-height: 20px;
}

.news-link-wrapper {
    padding: 50px 0% 0 0;
}

.load-more-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}

.load-more-button {
    background-color: #474747;
    color: white;
    width: 200px;
    height: 50px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 1px 1px rgb(0, 0, 0);
}

.load-more-button:hover {
    cursor: pointer;
    background-color: black;
}

.news-page-heading {
    text-align: left;
    font-size: 2rem; 
    padding: 0px 5% 0px 5%;
}

.news-page-date {
    color: #1e69c5;
    font-size: 1rem; 
    padding: 10px 5% 30px 5%;
}

.news-page-subheading {
    text-align: left;
    font-size: 1rem; 
    font-weight: 400;
    padding: 20px 5% 10px 5%;
}

.news-page-flex {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    padding: 20px 5% 10px 5%;
}
.news-page-content {
    text-align: justify;
    font-size: 0.9rem; 
    font-weight: 400;
    padding: 0px 5% 0px 5%;
    line-height: 30px;
}

.blogs-list-page-blog {
    width: 100%;
}

.blogs-list-page-heading {
    text-align: left;
    padding: 10px 0px 10px 0px;
    font-size: 1.1rem;
    font-weight: 500;
    color: #474747;
    line-height: 22px;
}

.blog-list-page-flex {
    padding: 50px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 50px;
    justify-content: space-between;
}

.blog-list-page-wrapper {
    width: 100%;
    border-radius: 10px;
    padding: 10px;
    background-color: whitesmoke;
}

.blog-list-page-wrapper :hover {
    cursor: pointer;
}

.blogs-list-page-pic {
    width: 100%;
    border-radius: 10px;
    height: 400px;
}

.image-wrapper {
    padding: 0 5% 0 5%;
    height: 500px;
}





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

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

.sub-heading-text3-left {
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
    background-color: #262626;
    padding: 12px 20px;
    border-radius: 5px;
}

.flex-container9 {
    gap: 5px;
    display: flex;
    padding: 5px 0px 5px 0px;
    align-items: center;
    justify-content: center;
}
.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: 100%;
    height: 4.5vh;
}

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

.FAQ-question-div {
    display: flex;
    gap: 20px;
    justify-content: start;
    align-items: start;
    font-size: 0.9rem;
    font-weight: 600;
    color: #474747;
    padding: 20px 0 30px 0;
}

.summary-line41 {
    width: 100%;
    display: none;
    justify-content: left;
    align-items: center;
    padding: 10px 20px 5px 20px;
    line-height: 25px;
    font-size: 0.75rem;
}


.FAQ-addition-textarea {
    background-color: whitesmoke;
    border: none;
    outline: none;
    width: 100%;
    padding: 20px;
    height: 100px;
    border-radius: 12px;
    font-family: 'Montserrat';
    font-size: 0.8rem;
    font-weight: 400;
}

.carlist-black-static-card-wrapper {
    padding: 10px 10px 0px 10px;
    position: fixed;
    top: 0;
    width: 100%;
    border-radius: 12px;
    background-color: white;
}

.hidden {
    display: none;
}

.summary-view-card-wrapper{
    padding: 10px 10px 0px 10px;
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
}

.japan-page-section {
    padding: 50px 30px;
}

.japan-page-heading {
    font-weight: 600;
    color: #474747;
    font-size: 2rem;
}

.only-japan-card{
    padding: 25px 0px;
}

.only-japan-flex {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 0px;
}

.person-photo {
    border-radius: 50%;
    height: 40px;
    width: 40px;
}

.person-name {
    font-size: 1rem;
    font-weight: 500;
    color: #474747;
}

.japan-itinerary-heading {
    font-size: 1.5rem;
    font-weight: 500;
    padding-top: 30px;
}

.inside-image{
    width: calc(100% - 10px);
    height: 400px;
    object-fit: cover;
    border-radius: 12px;
}

.scrollable-content {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 0px 30px;
}

.ad-main {
    width: 100%;
    height: 100vh;
    background-color: #00161f8f;
    z-index: 1;
    position: absolute;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.main-page-japan-button{
    color: white;
    background-color: purple;
    padding: 15px;
    width: 200px;
    margin-top: 20px;
    border-radius: 12px;
    text-align: center;
}

.main-page-japan-button:hover {
    cursor: pointer;
    outline: 1px solid white;
}

 *::-webkit-media-controls-panel {
    display: none!important;
    -webkit-appearance: none;
  }
  
  /* Old shadow dom for play button */
  
  *::-webkit-media-controls-play-button {
    display: none!important;
    -webkit-appearance: none;
  }
  
  /* New shadow dom for play button */
  
  /* This one works! */
  
  *::-webkit-media-controls-start-playback-button {
    display: none!important;
    -webkit-appearance: none;
  }


  .japan-bottom-scroll-btn{
    font-size: 0.8rem;
    background-color: darkblue;
    color: white;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
    width: 200px;
  }

  .japan-bottom-scroll-btn-wrapper {
    display: flex;
    width: 100%;
    justify-content: center;
    padding-bottom: 50px;
  }
  .abcd-class{
    text-align: center;
    font-size: 0.8rem;
    font-weight: 400;
    padding-bottom: 5px;
}

.price {
    font-size: 1rem;
    font-weight: 600;
    color: red;
    margin-right: 10px;
    position: relative;
    z-index: 1;
}

.price::after {
    content: '';
    position: absolute;

    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: red;
    transform: rotate(-15deg);
    transform-origin: center;
    z-index: -1;
}


.header-desktop-global-top {

}

.menu-options {
    display: flex; padding: 10px 50px 10px 700px; justify-content: space-between; width: 100%;
}

.menu-buttons-div-global {
    display: none;
}

.top-banner-button{
    display: none;
}


.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  /* Create four equal columns that sits next to each other */
  .column {
    flex: 25%;
        max-width: 25%;
        padding: 0 2px;
  }
  
  .column img {
    border-radius: 8px;
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
  }

  .fa-square-x-twitter:before {
    color: black;

}

.fa-instagram-square:before, .fa-square-instagram:before {
    color: black;
}

.fa-linkedin:before {
    color: black;
}

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

.footer-last-text-line {
    font-size: clamp(0.8rem, 3vw, 1rem);font-weight: 400;text-align: center;
}





}


/* GGGGGGG  */

/* DESKTOP VERSION CODE */


/* responsive, form small screens, use 13px font size */

@media only screen and (min-device-width: 768px) {
    @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;
        height: 100%;
        margin: 0;
    }


    .top-banner-button{
        height: 40px; background-color: darkslategrey; border-radius: 8px; padding: 10px; display: flex; align-items: center;
    }


    .menu-options {
        display: flex; padding: 10px 50px 10px 700px; justify-content: space-between; width: 100%;
    }



    .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-columns1:hover {
        cursor: pointer;
    }

    .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;
        overflow-x: visible;
    }

    .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;
        text-wrap: nowrap;
        overflow: visible;

        /* top: 50%; */
    }

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


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

    .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-global {
        width: 100%;
        background-color: #fffffffa;
        box-shadow: 0px 10px 20px lightgrey;
        display: none;
        justify-content: space-between;
        position: sticky;
        top: 0;
        z-index: 100;
        /* box-shadow: 0px 2px 20px rgba(202, 202, 202, 0.31); */
        height: 60px;
    }


    .header-desktop-global-top {
        width: 100%;
        background-color: transparent;
        position: absolute; 
        display: flex;
        justify-content: space-between;
        top: 0;
        z-index: 100;
        /* box-shadow: 0px 2px 20px rgba(202, 202, 202, 0.31); */
        height: 60px;
    }


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

    .scroll {
        width: 40px;
        height: 40px;
        border: 2px solid #ffffff;
        border-radius: 50%;
        position: relative;
        animation: down 1.5s infinite;
        -webkit-animation: down 1.5s infinite;
        &::before {
            content: '';
            position: absolute;
            top: 8px;
            left: 11px;
            width: 12px;
            height: 12px;
            border-left: 2px solid #ffffff;
          border-bottom: 2px solid #ffffff;
            transform: rotate(-45deg);
        }
    }
    
    @keyframes down {
        0% {
            transform: translate(0);
        }
        20% {
            transform: translateY(15px);
        }
        40% {
            transform: translate(0);
        }
    }
    
    @-webkit-keyframes down {
        0% {
            transform: translate(0);
        }
        20% {
            transform: translateY(15px);
        }
        40% {
            transform: translate(0);
        }
    }



    .header-desktop-class {
        width: 100%;
        background-color: #fffffffa;
        padding: 1vh 1vw 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);
        height: 50px;
    }

    .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;
    }

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

    .menu-buttons-div-global {
        display: flex;
        justify-content: space-around;
        align-items: center;
        gap: 10px;
    }

    .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;


    }

    .triangle-container {
        position: relative;
        width: 0;
        height: 0;
        border-left: 5.5px solid transparent; /* Adjust width of left border for triangle size */
        border-right: 5.5px solid transparent; /* Adjust width of right border for triangle size */
        border-bottom: 11px solid rgba(211, 211, 211, 0.659); /* Adjust height of bottom border for triangle size and color */
        /* border: 0px solid black; Border for the triangle */
      }

      /* Add border for the triangle shape */
        .triangle-container::before {
            content: '';
            position: absolute;
            bottom: -12px; /* Adjust position to overlap with the border */
            left: -5px; /* Adjust position to overlap with the border */
            width: 0;
            height: 0;
            border-left: 5px solid transparent; /* Adjust width of left border for triangle size + border width */
            border-right: 5px solid transparent; /* Adjust width of right border for triangle size + border width */
            border-bottom: 10px solid darkslategray; /* Adjust height of bottom border for triangle size and color + border width */
        }


    .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-sec-column {
        display: flex;
        flex-direction: column;
        align-items: end;
    }

    .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-subitems-gt {
        color: rgb(22, 22, 22);
        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: rgb(30, 30, 30);
        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 {
        display: flex;
        justify-content: start;
        gap: 30px;
        overflow-x: visible;
        padding-bottom: 100px;
    }

    .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;
        background-color: transparent;
    }

    .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: 44vh;
        width: 18vw;
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid rgba(216, 216, 216, 0.638);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }

    .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: 1% 5% ;
        gap: 50px;
        overflow-x: 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.7rem;
        color: black;
        letter-spacing: 0px;
        line-height: 30px;
    }

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

    

    .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 {
        font-weight: 500;
        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: 20%;
        /* margin-top: 20px;
        margin-bottom: 20px; */
    }

    .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: 50px;
        width: 100%;
        background-color: #fffffffa;
        z-index: 1000;
    }

    .car-list-parameters-card {
        width: 100%;
        padding: 20px 20px;
        display: flex;
        gap: 40px;
        justify-content: space-evenly;
        /* border-radius: 8px; */
        box-shadow: 0px 1px 20px 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: rgb(211 211 211 / 12%);
        border-radius: 5px;
        
        padding: 5px 10px;
        display: flex;
        justify-content: end;
    }

    .car-list-page-wrapper {
        display: flex;
        padding: 100px 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-card:hover, car-list-sidebar-card1:hover {
        cursor: pointer;
    }


    .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: space-between;
        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;
        font-weight: 400;
        border-radius: 12px;
        padding: 12px;
    }

    .seat-selected-button: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: space-between;
        padding: 5%;
    }

    .passenger-details-column {
        width: 45%;
        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: 40px;
        height: 40px;
        background-color: rgb(255 255 255);
        border-radius: 50%;
        border: 4px solid whitesmoke;
        z-index: 10;
    }

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

    .stepper-column {
        width: 250px;
        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;
        text-align: center;
    }

    .cancel-page-sticky-div {
        width: 1180px;
        background-color: white;
        border-radius: 12px;
        padding: 30px 0px;
    }

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

        position: absolute;
        top: 0;
        left: 0;
        padding: 20px 125px 0 125px;
    }

    .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: 5px 110px;
        display: flex;
        justify-content: start;
    }

    .stepper-hightlighter {
        height: 30px;
        width: 30px;
        background-color: #47474791;
        
        border-radius: 50%;
        animation: all 0.5s ease forwards;
        z-index: 10;
    }

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

    @keyframes moveRight1 {
        0% {
            transform : translateX(310px);
        }
        
        100% {
            transform : translateX(620px);
        }
    }

    @keyframes moveRight2 {
        0% {
            transform : translateX(620px);
        }
        
        100% {
            transform : translateX(930px);
        }
    }


    .FAQ-question-div {
        display: flex;
        gap: 20px;
        justify-content: start;
        align-items: start;
        font-size: 0.9rem;
        font-weight: 600;
        color: #474747;
        padding: 20px 0 30px 0;
    }

    

    .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: 75%;
        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 {
        

        width: 100%;

    }

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

    .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: 2rem;
        font-weight: 500;
        text-align: left;
        padding: 20px 0px 20px 0px;
        line-height: 50px;
    }


    .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;
        height: 500px;
    
    }

    .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;

    }

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


    /* SEAT SELECTION  */

    .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%;
    }

    .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;
    }


    .flexbox-passenger-contact {
        display: flex;
        gap: 10px;
    }

    .country-code {
        position: relative;
        min-width: 130px;
    }
    
    .country-down-arrow {
        position: absolute;
        right: 10px;
        top: 15px;
    }
    
    .sub-menu-country {
        display: none;
        top: 45px;
        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);
    }

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

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

    .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;
    }

    .margin-bottom-20 {
        margin-bottom: 20px;
    }
    
    .FAQ-question-div1 {
        width: 100%;
        padding: 10px 20px;
        background-color: #1673ff8d;
        border-radius: 8px;
        color: rgb(255, 255, 255);
        line-height: 20px;
        font-size: 0.8rem;
        font-weight: 400;
        transition: all 1s ease;
    }
    
    .FAQ-question-div1:hover {
        cursor: pointer;
    }
    
    .FAQ-addition {
        /* display: none; */
        width: 100%;    
        position: relative;
    }
    
    .FAQ-addition-textarea {
        width: 100%;
        max-lines: 20;
        border-radius: 8px;
        border: 1px solid #4848482b;
        padding: 10px;
        height: 150px;
        outline: none;
        resize: none;
        font-family: 'Montserrat';
    }
    
    .FAQ-addition-textarea::placeholder {
        font-family: 'Montserrat';
    }
    
    .submit-button {
        position: absolute;
        right: 15px;
        bottom: 15px;
        width: 80px;
        background-color: darkslategray;
        border-radius: 8px;
        height: 30px;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        font-weight: 400;
        box-shadow: 0px 1px 2px grey;
    }
    
    .submit-button:hover {
        cursor: pointer;
    }
    
    
    .delivery-form-wrapper {
        padding: 0px 50px;
    }
    
    .company-logo-flexbox{
        display: flex;
        justify-content: space-evenly;
    }
    
    .company-logo-box {
        display: flex;
        height: 200px;
        width: 200px;
    }
    
    .journey-line {
        height: 5px;
        background-color: rgb(34, 34, 34);
    }
    
    .journey-line-wrapper {
        position: absolute;
        padding: 0px 6.25%;
        width: 100%;
    }
    
    .journey-checkpoint {
        height: 20px;
        width: 20px;
        border-radius: 50%;
        background-color: rgb(34, 34, 34);
    }
    
    .journey-year {
        font-weight: 600;
        font-size: 1.5rem;
        color: #101010;
    }
    
    .journey-description {
        font-weight: 400;
        font-size: 0.8rem;
        color: #101010;
        text-align: center;
        height: 30px;
        width: 150px;
        overflow: hidden;
    }
    
    .journey-milestone {
        width: 200px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        gap: 20px;
    }
    
    
    .journey-milestone1 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 12.5%;
    }
    
    .journey-flexbox-desktop {
        display: flex;
        justify-content: space-between;
        position: relative;
        align-items: center;
        width: 100%;
    }

    .shimmer-main {
        min-height: 100vh;
        padding: 30px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .shimmer-box {
        height: 100px;
        width: 100%;
        background-color: gray;
        border-radius: 20px;
        background: linear-gradient(-45deg, #eee 40%, #fafafa 50%, #eee 60%);
        background-size: 300%;
        background-position-x: 100%;
        animation: shimmer 1s infinite linear;
    }
    
    .shimmer-box1 {
        display: flex;
        justify-content: right;
        height: 70px;
        width: 84%;
        background-color: gray;
        border-radius: 10px;
        background: linear-gradient(-45deg, #eee 40%, #fafafa 50%, #eee 60%);
        background-size: 300%;
        background-position-x: 100%;
        animation: shimmer 1s infinite linear;
    }
    
    .shimmer-box-long {
        display: flex;
        justify-content: right;
        height: 100px;
        width: 100%;
        background-color: gray;
        border-radius: 4px;
        background: linear-gradient(-45deg, #eee 40%, #fafafa 50%, #eee 60%);
        background-size: 300%;
        background-position-x: 100%;
        animation: shimmer 1s infinite linear;
    }
    
    .shimmer-box-long1 {
        display: flex;
        justify-content: right;
        height: 50px;
        width: 100%;
        background-color: gray;
        border-radius: 10px;
        background: linear-gradient(-45deg, #eee 40%, #fafafa 50%, #eee 60%);
        background-size: 300%;
        background-position-x: 100%;
        animation: shimmer 1s infinite linear;
    }
    
    .shimmer-box-long2 {
        display: flex;
        justify-content: right;
        height: 50px;
        width: 100%;
        background-color: gray;
        border-radius: 12px;
        background: linear-gradient(-45deg, #eee 40%, #fafafa 50%, #eee 60%);
        background-size: 300%;
        background-position-x: 100%;
        animation: shimmer 1s infinite linear;
    }
    
    .shimmer-grid {
        display: grid;
        grid-template-columns: 48% 48%;
        width: 100%;
        background-color: var(-LIGHT-COLOR);
        justify-content: space-between;
        align-items: center;
        align-content: center;
        position: sticky;
        z-index: 1;
    }
    
    @keyframes shimmer {
        to {
           background-position-x: 0%
        }
     }
    
     .shimmer-circle {
        height: 70px;
        width: 70px;
        border-radius: 50%;
        background-color: gray;
        background: linear-gradient(-45deg, #eee 40%, #fafafa 50%, #eee 60%);
        background-size: 300%;
        background-position-x: 100%;
        animation: shimmer 1s infinite linear;
     }
    
     .flex-container-space-between {
        display: flex;
        padding: 10px 0px 5px 0px;
        align-items: center;
        justify-content: space-between;
    }   
    
    .even-column {
        min-height: 90vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        
    }
    
    .shimmer-wrapper {
        min-height: 100vh;
    }

    .swal2-success-line-tip, .swal2-success-line-long {
        font-size: 1rem !important;
    }
    
    .swal2-x-mark-line-right, .swal2-x-mark-line-left {
        font-size: 1rem !important;
    } 

    .circular-loader {
        display: none;
        border: 2px solid #f3f3f3; /* Light grey */
        border-top: 2px solid darkslategray; /* Blue */
        border-radius: 50%;
        width: 20px;
        height: 20px;
        animation: spin 2s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }


    .img-wrapper2 {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 500px;
        
    }

    
    
    .absolute-heading {
        z-index: 1;
        font-size: 3rem;
        color: #474747;
        text-shadow:
        1px 1px 0 #fff,
        -1px 1px 0 #fff,
        -1px -1px 0 #fff,
        1px -1px 0 #fff;
    }
    
    .absolute-subheading {
        position: absolute;
        top: 50%;
        left: 45%;
    
        font-size: 1.5rem;
        font-weight: 400;
        color: #ffffff;
        
    }
    
    .about-company-para {
        font-size: 1.2rem;
        font-weight: 500;
        text-align: justify;
        padding: 100px;
    }

    .logo-box-curved {
        border-radius: 20px;
        width: 300px;
        height: 200px;
        object-fit: contain;
    }

    .company-logo-flexbox22 {
        display: flex;
        justify-content: space-between;
        gap: 30px;
        overflow-x: visible;
        padding-bottom: 100px;
        /* width: 2000px; */
    }

    .company-logo-flexbox22::-webkit-scrollbar {
        display: none;
    }
      
    /* Hide scrollbar for IE, Edge and Firefox */
    .company-logo-flexbox22 {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    }

    @keyframes autoScrollX {
        0% { transform: translate(0px, 0px); }
        50% { transform: translate(-200px, 0px); }
        100% { transform: translate(0px, 0px); }
    }

    

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

    .container-review-stars {
        display: flex;
        flex-direction: column;
        align-items: start;
    }
    .star-collection {
        padding-top: 5px;
        display: flex;
        gap: 2px;
    }
    
    .teams-icon-wrapper {
        width: 300px;
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    .teams-unit-wrapper {
        width: 500px;
        padding: 0 30px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        border: none;
        background-color: transparent;
    }

    .teams-unit-wrapper-flex {
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: start;
    }



    .news-flexbox {
        display: flex;
        align-items: start;
        gap: 50px;
       
    }
    
    .news-flexbox:hover {
        cursor: pointer;
    }
    
    .news-heading {
        font-size: 1.3rem;
        font-weight: 500;
        color: #474747;
    }
    
    .news-date {
        font-size: .9rem;
        font-weight: 400;
        color: #1e69c5;
    }
    
    .news-subheading {
        padding-top: 10px;
        font-size: 1em;
        font-weight: 400;
        color: #595959;
        line-height: 20px;
    }
    
    .news-link-wrapper {
        padding: 50px 10%;
    }
    
    .load-more-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 50px;
    }
    
    .load-more-button {
        background-color: #474747;
        color: white;
        width: 200px;
        height: 50px;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 1px 1px rgb(0, 0, 0);
    }
    
    .load-more-button:hover {
        cursor: pointer;
        background-color: black;
    }
    
    .news-page-heading {
        text-align: left;
        font-size: 2rem; 
        padding: 0px 5% 0px 5%;
    }
    
    .news-page-date {
        color: #1e69c5;
        font-size: 1rem; 
        padding: 10px 5% 30px 5%;
    }
    
    .news-page-subheading {
        text-align: left;
        font-size: 1rem; 
        font-weight: 400;
        padding: 20px 5% 10px 5%;
    }
    
    .news-page-flex {
        display: flex;
        justify-content: space-between;
        gap: 30px;
        padding: 20px 5% 10px 5%;
    }
    .news-page-content {
        text-align: justify;
        font-size: 0.9rem; 
        font-weight: 400;
        padding: 0px 5% 0px 5%;
        line-height: 30px;
    }
    
    .blogs-list-page-blog {
        width: 100%;
    }
    
    .blogs-list-page-heading {
        text-align: left;
        padding: 10px 0px 10px 0px;
        font-size: 1.1rem;
        font-weight: 500;
        color: #474747;
        line-height: 22px;
    }
    
    .blog-list-page-flex {
        padding: 0px 5% 0 5%;
        display: flex;
        justify-content: space-between;
    }
    
    .blog-list-page-wrapper {
        width: 22%;
        margin: 5% 0px;
        border-radius: 10px;
        padding: 10px;
    }
    
    .blog-list-page-wrapper :hover {
        cursor: pointer;
    }
    
    .blogs-list-page-pic {
        width: 100%;
        border-radius: 10px;
        height: 400px;
    }
    
    .image-wrapper {
        padding: 0 5% 0 5%;
        height: 500px;
    }

    .company-para-heading12 {
        font-size: 2.5rem;
        font-weight: 600;
        text-align: left;
        color: #474747;
        padding: 20px 0px 20px 0px;
        line-height: 50px;
    }

    .cancel-page-sticky-wrapper {
        width: 100%;
        padding: 20px 5% 0 5%;
        display: flex;
        justify-content: center;
        position: sticky;
        top: 20px;
        background-color: #fffffff7;
        z-index: 1;
    }

    .from-city-text-black-wrapper {
        overflow: hidden;
    }

    .contact-web-flex-box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 20px;
        background-color: whitesmoke;
        border-radius: 12px;
    }

    .contact-links {
        font-weight: 400;
        font-size: 0.8rem;
        color: blue;
        text-decoration: underline;

    }

    .contact-links:hover {
        cursor: pointer;
    }

    .contact-router-link {
        font-weight: 500;
        font-size: 1.5rem;
        color: blue;
        text-decoration: underline;
        display: contents;
        letter-spacing: 0px;
    }
    
    .contact-router-link:hover {
        cursor: pointer;
    }

    .hover-cursor-pointer:hover {
        cursor: pointer;
        text-decoration: underline;
    }

    .company-para12 {
        text-align: justify;
        padding: 0px 0px 20px 0px;
        font-weight: 400;
        font-size: 0.8rem;
    }

    .influencer-photo-container {
        height: 80vh;
        width: 40%;
        border-radius: 12px;
        position: relative;
        overflow: hidden;
    }

    .blogpage-flexbox {
        display: flex;
        justify-content: space-between;
        gap: 100px;
        align-items: center;
        padding: 50px 0px;
    }

    .adpage-para-desktop{
        text-align: justify;
        padding: 40px 0px 0px 0px;
        font-weight: 400;
        font-size: 1rem;
        line-height: 45px;
    }

    .header-info-wrapper{
        padding: 5px;
        background-color: whitesmoke;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: fit-content;
        width: fit-content;
        animation: outflowglow 1s ease infinite;
    }

    .header-info-wrapper:hover {
        cursor: pointer;
    }

    @keyframes outflowglow {
        0% {
            background-color: lightgrey;
            padding: 5px;
        }

        100% {
            background-color: transparent;
            padding: 15px;
        }
        
    }

.info-wrap-outer{
    width: 50px;
    display: flex;
    justify-content: end;
    align-items: center;
}

.header-info-wrapper1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    padding-right: 55px;
}

.car-list-sidebar-card-heading-text-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.japan-cover-page {
    width: 100%;
    height: calc(100vh);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    opacity: 100%;
    background-color: white;
}

.japan-page-section{
    width: 100%;
    background-color: white;
    padding: 30px 5%;
}

.japan-page-heading {
    font-size: 3rem;
    font-weight: 600;
    padding: 60px 0px;
}

.person-photo{
    height: 40px;
    width: 40px;
    border-radius: 50%;
}

.only-japan-flex {
    display: flex;
    gap: 20px;
    align-items: start;
    padding: 0px 0px 50px 0px;
}

.person-name {
    font-weight: 600;
    color: #474747;
    font-size: 1.1rem;
}


.only-japan-card {
    border-radius: 12px;
    background-color: whitesmoke;
    padding: 20px;
    margin-bottom: 100px;
}

.link-class {
    color: darkblue;
    letter-spacing: normal;
    line-height: 30px; 
    font-size: 2rem; 
    font-weight: 600; 
}

.link-class:hover {
    text-decoration: underline;
    cursor: pointer;
}

.japan-day-marker {
    min-width: 200px;
    font-weight: 600;
    color: #474747;
    font-size: 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.japan-itinerary-heading {
    font-size: 1.2rem;
    font-weight: 500;
    padding-bottom: 5px;
}



.japan-itinerary-flexbox {
    display: flex;
    gap: 40px;
    padding: 0px 0px 0px 0px;
}

.scrollable-container {
    width: 300px; /* Adjust the width as needed */
    overflow-x: scroll; /* Make the container scrollable horizontally */
    white-space: nowrap; /* Prevent content from wrapping */
    height: 500px;
}

.scrollable-content {
    width: 300px; /* Adjust the width as needed */
    
    height: 500px;
    display: flex; /* Make the content flow horizontally */
    gap: 10px;
    justify-content: space-between;
}

.inside-image{
    min-width: 300px;
    height: 400px;
    object-fit: cover;
    border-radius: 12px;
}

.flex-vertical {
    display: flex;
    flex-direction: column;
}

.scrollable-container {
    scroll-behavior: smooth; /* Smooth scrolling */
    transition: scroll-left 0.5s ease-in-out; /* Smooth transition */
}

.scrollable-container::-webkit-scrollbar {
    display: none; /* Hide scrollbar for WebKit browsers */
}
    

.cover-page-background{
    width: 100%;
    height: 100vh;
    object-fit: cover;
    z-index: -1;
    position: absolute;
    opacity: 10%;
}


.japan-sale-image {
    position: absolute;
    top: 0;
    right: 100px;
    height: 300px;
    z-index: -1; 
}


.small-flex-box-japan-enquiry{
    display: flex;
    width: 50%;
    gap: 10px;
}


.big-flex-box-japan-enquiry {
    display: flex;
    width: 100%;
    gap: 20px;
}

.home-page-japan-bg {
    width: 100%;
    object-fit: cover;
    height: 600px;
}


.main-page-japan-text-collection {
    position: absolute;
    padding-top: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.main-page-japan-text {
    font-size: 6rem;
    color: white;
    font-family: 'Oleo Script';
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    -webkit-text-stroke: 2px #474747;
}
.main-page-japan-subtext {
    font-size: 2rem;
    font-family: 'Seaweed Script';
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    -webkit-text-stroke: 2px white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.main-page-japan-button{
    color: white;
    background-color: purple;
    padding: 15px;
    width: 200px;
    margin-top: 20px;
    border-radius: 4px;
    text-align: center;
}

.main-page-japan-button:hover {
    cursor: pointer;
    outline: 1px solid white;
    
}

.ad-main {
    width: 100%;
    height: 100vh;
    background-color: #00161f8f;
    z-index: 1;
    position: absolute;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.x-button{
    font-weight: 600; 
    color: white; 
    border: 2px solid white; 
    height: 20px; 
    width: 21px; 
    display: flex; 
    justify-content: center; 
    border-radius: 50%; 
    align-items: center; 
    position: absolute; 
    top: 15px; 
    right: 20px;
    z-index: 1;
    padding-bottom: 2px;
}

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


.japan-bottom-scroll-btn {
    background-color: white;
    color: black;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 0.9rem;
    font-weight: 600;
}

.japan-bottom-scroll-btn:hover {
    cursor: pointer;
    background-color: purple;
    color: white;
}

.price-container {
    position: relative;
    display: inline-block;
}

.price {
    font-size: 1.5rem;
    font-weight: 600;
    color: red;
    margin-right: 10px;
    position: relative;
    z-index: 1;
}

.price::after {
    content: '';
    position: absolute;

    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: red;
    transform: rotate(-15deg);
    transform-origin: center;
    z-index: -1;
}

.floating-banner {
    position: absolute;
    width: 200px;
    height: 35px;
    background-color: orange;
    top: 50px;
    left: 0px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: start;
    padding-left: 10px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
    justify-content: center;
  }
  
  /* Create four equal columns that sits next to each other */
  .column {
    flex: 25%;
    max-width: 20%;
    padding: 0 4px;
  }
  
  .column img {
    border-radius: 15px;
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
  }
  
  
  .top-banner {
    display: flex; 
    padding: 10px 50px 10px 700px; 
    justify-content: space-between; 
    width: 100%;
  }


  .footer-last-text-line {
    font-size: clamp(0.8rem, 3vw, 1rem);font-weight: 400;text-align: end;
}





}