@media only screen and (max-width: 1680px) {
    html {
        font-size: 15px;
    }
}

@media only screen and (max-width: 1450px) {
    html {
        font-size: 15px;
    }

    .home-banner-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 5rem;
        width: 70%;
        margin: 0 auto;
        padding: 5rem 0;
        align-items: center;
    }

    .form-justify-space-iconsflex-2,
    .form-justify-space-iconsflex-1 {
        /* top: 1rem; */
    }

    .home-banner-grid {
        width: 75%;
    }

    .three-column-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: var(--small-gap-size);
    }

    .home-form-wrpper {
        width: 100%;
    }
}

@media only screen and (max-width: 1366px) {
    html {
        font-size: 13px;
    }

    .my-rides-main-wrapper-grid {
        display: grid;
        gap: var(--medium-gap-size);
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas: 'rideSform rideSlist rideSlist';
    }

    .main-container {
        width: 85%;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 1152px) {
    html {
        font-size: 12px;
    }
}

@media only screen and (max-width: 1024px) {
    html {
        font-size: 11px;
    }

    .form-justify-space-iconsflex-2,
    .form-justify-space-iconsflex-1 {
        /* top: 1.4rem; */
    }

    .overview-flex-wrapper>div:nth-child(1),
    .overview-flex-wrapper>div:nth-child(2) {
        width: 100%;
        flex-basis: 100%;
    }
}

@media only screen and (max-width: 991px) {
    html {
        font-size: 12px;
    }

    .button-style-primary:hover {
        border: 1px solid var(--primary-color);
        background-color: var(--primary-color);
        transition: var(--common-transition);
    }

    .button-style-primary:hover span,
    .button-style-primary:hover p {
        color: var(--white-color);
        transition: var(--common-transition);
    }

    .button-style-secondary:hover {
        border: 1px solid var(--secondary-color);
        background-color: var(--secondary-color);
        transition: var(--common-transition);
    }

    .button-style-secondary:hover span,
    .button-style-secondary:hover p {
        color: var(--white-color);
        transition: var(--common-transition);
    }

    .button-style-white:hover {
        border: 1px solid var(--white-color);
        background-color: transparent;
        transition: var(--common-transition);
    }

    .button-style-white:hover span,
    .button-style-white:hover p {
        color: var(--primary-color);
        transition: var(--common-transition);
    }


    .form-justify-space-iconsflex-2,
    .form-justify-space-iconsflex-1 {
        /* top: 1.2rem; */
    }

    .main-container {
        width: 95%;
        margin: 0 auto;
    }

    .home-banner-grid {
        /* display: grid;
        grid-template-columns: repeat(1, 1fr); */
        display: flex;
        flex-direction: column-reverse;
        gap: 4rem;
        width: 95%;
        margin: 0 auto;
        padding: 5rem 0;
        align-items: flex-start;
    }
    .home-banner-grid>div:nth-child(1) {
        width: 100%;
        flex-basis: 100%;
    }

    .visible-tab-mobile {
        display: block !important;
    }

    .hide-tab-mobile {
        display: none !important;
    }

    .header-links-ul.web_navigation {
        display: none;
    }


    .header-links-ul.mobie_navigation.active li {
        width: 100%;
    }

    .header-links-ul ul li a,
    .header-links-ul ul li p {
        font-size: 1.2rem;
        font-family: var(--semibold-font-family);
    }

    .header-links-ul.mobie_navigation ul li a {
        justify-content: space-between;
    }

    .header-links-ul.mobie_navigation .nav_dropdown_list {
        display: none;
        background-color: #F3F3F3;
        position: relative;
        top: unset;
        left: unset;
        width: 100%;
    }

    .header-links-ul.mobie_navigation .nav_dropdown_list.active {
        display: block;
    }

    .header-links-ul.mobie_navigation ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .header-links-ul.mobie_navigation .mobile_header_btn {
        margin-top: 5rem;
        padding: 1rem;
    }

    .header-links-ul.mobie_navigation .mobile_header_btn button {
        width: 100%;
    }

    .header-wrapper {
        padding: 0.5rem 0;
        background-color: var(--white-color);
    }

    .nav-toggle {
        cursor: pointer;
        /* display: block; */
        height: 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .bar.top {
        margin-top: 0 !important;
        margin-bottom: 8px;
    }

    .bar {
        display: block;
        height: 1px;
        width: 40px;
        transition: all 0.6s ease;
        background-color: var(--primary-color);
    }

    .nav-toggle.active .bar.top {
        transition: all 0.6s ease;
        transform: translateY(10px) rotateZ(45deg);
    }

    .nav-toggle.active .bar.bottom {
        margin-bottom: 8px !important;
        transition: all 0.6s ease;
        transform: translateY(0) rotateZ(-45deg);
    }

    .quote-book-banner-grid {
        display: flex;
        flex-direction: column;
        gap: var(--medium-gap-size);
        align-items: start;
        padding-top: 3rem;
        padding-bottom: 4rem;
    }

    .quote-book-card-form {
        width: 100%;
        padding: 1rem;
        flex-basis: 100%;
    }

    .quote-book-banner-grid>div:nth-child(2) {
        width: 100%;
        flex-basis: 100%;
    }

    .journey-detail-card-grid {
        gap: 1rem;
        row-gap: 1.5rem;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        margin-bottom: 1.5rem;
    }

    .thank-you-logo {
        width: 16rem;
    }

    .cars-list-card {
        padding: 1rem;
        padding-right: 1rem;
        display: flex;
        cursor: pointer;
        flex-direction: column;
        align-items: start;
        gap: var(--small-gap-size);
        /* border: 3px solid transparent; */
        border: 3px solid #f0f0f0;
        border-radius: 0.5rem;
    }

    .cars-list-card>div:nth-child(1) {
        width: calc(100% - 70% - 0.75rem);
        padding-left: 0;
        flex-basis: calc(100% - 70% - 0.75rem);
    }

    .cars-list-card>div:nth-child(2) {
        width: 100%;
        padding: 0;
        flex-basis: 100%;
        align-items: start;
        flex-direction: column;
        padding: 0 0.5rem;
    }

    .cars-list-content-flex>div:nth-child(2) {
        align-self: flex-end;
    }

    .cars-list-content-flex>div:nth-child(2),
    .cars-list-content-flex>div:nth-child(1) {
        width: 100%;
        flex-basis: 100%;
    }

    .booking-confirmation-img img {
        transform: scale(2.5) translate(-35px, -10px);
    }

    .selection-popup-card-wrapper.selection-popup-card-wrapper-active {
        display: flex;
    }

    .booking-confirmation-form-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: var(--medium-gap-size);
        padding: 4rem 0 4rem 0;
    }

    .form-justify-space-iconsflex-2,
    .form-justify-space-iconsflex-1 {
        /* z-index: 99999999999; */
        z-index: 100;
    }

    .selection-popup-card-wrapper {
        width: 100vw;
        height: 90lvh;
        border-radius: 0rem;
        overflow-y: scroll;
        border-top-left-radius: 1.5rem;
        border-top-right-radius: 1.5rem;
        background-color: var(--white-color);
        padding: 1.5rem;
        top: unset;
        left: 50%;
        transform: translateX(-50%);
        position: fixed;
        z-index: 9999999999;
        display: none;
        flex-direction: column;
        gap: var(--small-gap-size);
        bottom: 0;
        padding-top: 4rem;
        padding-bottom: 5rem;
    }

    .return-journey-click0btn {
        margin-top: 0;
    }

    .my-rides-main-wrapper-grid {
        display: flex;
        gap: var(--medium-gap-size);
        grid-template-columns: unset;
        grid-template-areas: unset;
        flex-direction: column;
    }


    .corfu-faqs-wrapper .faqs-type-sticky {
        display: none;
        background-color: #fff;
    }

    .corfu-faqs-wrapper .faqs-type-mobile-fixed .faqs-type-sticky {
        display: flex;
        width: fit-content;
        position: unset;
        top: unset;
        border-radius: 0.5rem;
    }

    .corfu-faqs-wrapper .faq-container-list {
        width: 100%;
    }

    .corfu-faqs-wrapper .float_btn_for_type {
        position: fixed;
        bottom: 6.5rem;
        right: 1.5rem;
        width: 60px;
        aspect-ratio: 1;
        border-radius: 50%;
        background-color: #000;
        padding: 1rem;
    }

    .corfu-faqs-wrapper .faqs-question {
        padding: 1rem 0;
    }

    .corfu-faqs-wrapper .faqs-answer {
        padding: 1.5rem 0;
    }

    .corfu-faqs-wrapper .faqs-question p {
        font-size: 1.15rem;
    }

    .corfu-faqs-wrapper .faqs-answer p {
        font-size: 1.1rem;
    }

    .corfu-services-wrapper .services_card {
        width: calc(50% - 1rem);
        flex-basis: calc(50% - 1rem);
    }

    .corfu-services-wrapper .corfu-services-section-2 {
        flex-direction: column;
    }

    .corfu-services-wrapper .corfu-services-section-2>div {
        width: 100%;
        flex-basis: 100%;
    }

    .corfu-services-wrapper .corfu-services-section-3-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .corfu-services-wrapper .corfu-services-section-4-card {
        gap: 1.8rem;
        align-items: flex-start;
        padding: 1rem 0;
        flex-direction: column;
    }

    .corfu-services-wrapper .corfu-services-section-4-card>div {
        width: 100%;
        flex-basis: 100%;
    }

    .corfu-services-wrapper .corfu-services-section-4 .corfu-services-section-4-card:nth-child(even) .section-4-card-img,
    .corfu-services-section-4 .corfu-services-section-4-card:nth-child(odd) .section-4-card-text {
        order: unset;
    }

    .corfu-services-wrapper .routes_grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .corfu-services-wrapper .services_card_title {
        font-size: 1.25rem;
    }

    .corfu-services-wrapper .services_card_sub_title {
        font-size: 1.1rem;
    }

    .corfu-services-wrapper .card_detail_link {
        font-size: 1rem;
    }

    .corfu-services-wrapper .card_detail_link:hover {
        background: rgb(255, 255, 255);
    }

    .corfu-services-wrapper .corfu-services-section-3-grid-card {
        margin-bottom: 1rem;
    }

    .three-form-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .corfu-contact-wrapper {
        width: 100%;
        gap: 1.5rem !important;
        flex-direction: column;
    }

    .corfu-contact-wrapper>div {
        width: 100%;
        flex-basis: 100%;
    }

    .corfu-contact-wrapper>div:nth-child(1) {
        order: 2;
    }

    .corfu-contact-wrapper>div:nth-child(1) {
        order: 1;
    }
}

@media only screen and (max-width: 767px) {
    html {
        font-size: 13px;
    }

    .section-title h1,
    .section-title h1 span,
    .section-title h2,
    .section-title h2 span {
        font-size: 2rem;
    }

    .main-container {
        width: 90% !important;
        margin: 0 auto;
    }

    .booking-list-card-listpage {
        padding: 1.5rem;
        border: 1px solid #DEDEDE;
        border-radius: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: var(--small-gap-size);
        align-items: start;
    }

    .select2-container .select2-selection--single,
    .form-control-corfu {
        padding: 0.85rem 1rem 0.85rem 3rem;
        cursor: pointer;
        color: var(--primary-color);
        /* height: 64px; */
    }

    .date-and-time-flex {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: var(--small-gap-size);
    }

    .location-select-dropdown {
        height: 22vh;
    }

    .location-select-dropdown ul li {
        padding: 0.75rem 1.25rem;
    }



    /* .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #444;
        line-height: 28px;
        margin-top: 6px;
        padding-left: 0;
    } */

    .form-justify-space-iconsflex-1 {
        left: 0.75rem;
    }

    .form-justify-space-iconsflex-2,
    .form-justify-space-iconsflex-1 {
        /* top: 1.3rem; */
    }

    .home-banner-grid {
        gap: 3rem;
        width: 90%;
        padding: 3rem 0 2rem 0;
    }

    .select2-container {
        /* z-index: 9999999999; */
    }

    /* ---------------------------------------- */
    .booking-confirmation-img img {
        transform: scale(2.5) translate(-20px, 0px);
    }

    .corfu-services-wrapper .services_card {
        width: 100%;
        flex-basis: 100%;
    }

    .corfu-services-wrapper .routes_grid {
        gap: 0.7rem;
        grid-template-columns: repeat(1, 1fr);
    }
}


@media only screen and (max-width: 600px) {}

@media only screen and (max-width: 325px) {}