/* @media(max-width:1200px) {
    .header-section .top-bar .buttons button {
        padding: 12px 40px;
        margin: 0px 7px;
    }
} */

@media(max-width:1024px) {
    .value-card-section {
        flex-wrap: wrap;
        justify-content: center;
        padding: 40px 0px;
    }

    .value-card-transport {
        margin: 15px;
    }

    .value-card-local {
        margin: 15px;
    }

    .heading h3::after {
        left: 34.5%;
    }

    .about-left img {
        width: 510px;
    }

    .about-rightcontent {
        margin-left: 0px;
    }

    .about-content-inner {
        margin: 0px 30px;
    }

    .about-right {
        padding-left: 3rem;
    }


    .top-bar div#navbarNav {
        display: none;
    }

    .top-bar .buttons a {
        display: block !important;
    }

    .top-bar .buttons button {
        display: none;
    }
    .event-sub-btn{
        display: block !important; 
    }

    .offcanvas-buttons{
        display: flex;
        gap: 10px;
    }

    .offcanvas-buttons button {
        display: block !important;
        border-radius: 10px;
        padding: 12px 50px;
        border: none;
        margin: 10px;
    }

    .offcanvas-buttons .login {
        background-color: var(--theme-color);
        color: var(--white);
        font-size: 20px;
    }

    .offcanvas-buttons .singup {
        background-color: var(--second-theme-color);
        color: #504E4E;
        font-size: 20px;
    }

    .offcanvas-title svg path{
        fill: #000;
    }

    .submit-button
    {
        margin-top: 10px;
    }

    .navar-section .side-bar .side-bar-btn .event-btn
    {
        width: 210px;
        height: 46px;
        padding: 8px;
        color: #000;
        font-size: 19px;
    }
}


@media(max-width: 992px) {
    .heading h3::after {
        left: 28.5%;
    }

    .about-left {
        justify-content: center;
    }

    .popular-content-outer{
        top: 250px;
    }

    .popular-inner:hover .popular-content{
        top: 200px;
    }

    .popular-inner1 img{
        width: 100%;
        max-height: 400px;
    }

    .popular-inner3 img{
        width: 100%;
        max-height: 400px;
    }

    .california-location{
        gap: 15px;
    }

    .popular-inner1:hover .popular-content1{
        top: 250px;
    }

    .popular-inner3:hover .popular-content3{
        top:280px;
    }
    

    .event-details button{
        margin: 10px 0px;
        font-size: 20px;
        
    }

    .content select{
        width: 226px;
    }

    .content input{
        width: fit-content;
    }

    .content{
        width: fit-content;
    }
}

@media(max-width: 820px) {

    .about-content {
        background-image: none;
    }

    .about-left img {
        width: 100%;
    }

    .about-right {
        padding: 0rem;
    }
}

@media(max-width: 768px) {
    .about-header h3 {
        margin: 0px 10px;
    }

    .about-header h3::after {
        left: 18.8%;
    }

    .popular-content-outer {
        top: 150px;
    }

    .popular-content-outer1{
        top: 300px;
    }

    .popular-content-outer3{
        top: 283px;
    }

    .popular-inner:hover .popular-content{
        top: 80px;
    }
}

@media (max-width:576px) {
    .banner-content .caption p {
        display: none;
    }

    .contact-content .col-md-4{
        padding: 10px !important;
    }

    .location-info .col-md-6{
        padding: 10px !important;
        
    }

    .location-info .col-lg-6{
        padding: 10px !important;
    }

    .about-header h3::after {
        left: 0%;
    }
    .luxury_rides .heading h3::after{
        left: 0%;
    }

    .right-content ul li{
        font-size: 16px;
    }

    .luxury_rides .right-content ul li span{
        font-size: 16px;
    }

    .popular-inner1:hover .popular-content1 {
        top: 190px;
    }

    .popular-inner:hover .popular-content{
        top: 80px;
    }

    .popular-inner3:hover .popular-content3 {
        top: 200px;
    }

    .california-location-inner{
        font-size: 16px;
    }

    .popular-inner{
        min-height: 200px;
    }



}

@media (max-width:1440px){

    .booking-section{
        padding: 30px 50px !important;
    }
}

@media (max-width:500px) {
    .popular-content-outer {
        top: 120px;
    }

    .popular-content-outer1 {
        top: 190px;
    }

    .popular-content-outer3 {
        top: 180px;
    }
}

@media (max-width:500px) {
    .popular-content-outer {
        top: 120px;
    }

    .popular-content-outer1 {
        top: 170px;
    }

    .popular-content-outer3 {
        top: 170px;
    }

    .icons{
        position: absolute;
        right: 75px;
    }

    .banner-content .content{
        margin: 0px;
    }

    .cstm-width{
        width: 100% !important;

    }

    .footer .phone{
        justify-content: center;
    }

    .footer .col-lg-3.col-md-3.col-sm-6{
        padding: 20px 0px !important;
    }

    .footer ul li{
        text-align:  center;
    }

    .footer h4, h5{
        text-align: center;
    }

    .footer .col-lg-3.col-md-3.col-sm-12{
        padding: 20px 0px !important;
    }

    .navbar{
        align-items: center !important;

    }

    .navbar a img{
        max-width: 100px;
    }
}

/*============================ internal pages responsive css =====================================*/

@media (max-width: 1024px) {
    .navar-section {
        height: 194px;
        background-size: cover;
    }
    .navar-section .navbar .container-fluid .collapse {
        margin-top: 0px;
    }
    .navbar-brand img {
        width: 75px;
    }
    .nav-link-item {
        gap: 10px;
    }
    .active-side-bar{
        /* display: block; */
        margin: 0;
        /* transition: .7s; */
        transition: all 0.5s ease;
    }

    .navar-section .side-bar
    {
        width: 250px;
        height: 430px;
    }

    .navar-section .nav-item .nav-link 
    {
        color: #000 !important;
        font-size: 20px !important;
    }

    .btn-login,
    .btn-submit {
        padding: 10px 16px;
        font-size: 17px;
        margin: auto;
    }
    .btn-signup {
        padding: 11px 15px;
        font-size: 17px;
    }
    .nav-link-item .nav-item .nav-link {
        font-size: 17px;
    }
    .breadcrumb_title h1 {
        font-size: 40px;
    }
    .any-question h2 {
        font-size: 26px;
    }
    .contact-details h2 {
        font-size: 21px;
        margin-bottom: 11px;
    }
    .contact-details p {
        font-size: 14px;
    }
    .contact-icons img {
        width: 26px;
    }
    .contact-details .contact-icons {
        gap: 10px;
        margin-top: 15px;
    }
    .contact-details .contact-icons p {
        font-size: 17px;
    }
    .contact-details {
        padding: 30px;
        height: 100% !important;
    }
    .contact-form {
        padding: 30px;
        height: 100%;
    }
    .contact-seciton {
        margin-bottom: 40px;
    }
    .contact-input label {
        font-size: 15px;
    }
    .logo-img img {
        width: 83px;
    }
    .banner-footer {
        gap: 25px;
    }
    .logo-text h2 {
        font-size: 18px;
    }
    .logo-text p {
        font-size: 16px;
    }
    .logo-text {
        line-height: 35px;
    }
    .social-icons-footer h2,
    .comapany h2,
    .need-help h2 {
        font-size: 24px;
    }
    .footer-help-icon img {
        width: 45px;
    }
    .emergancy h2,
    .emergancy p {
        font-size: 15px;
    }
    .footer-menu ul li {
        font-size: 18px;
        margin-bottom: 13px;
    }
    .footer-help-icon {
        margin-top: 20px !important;
    }
    .contact-input input {
        height: 44px;
    }
    .logo-img img {
        margin-left: 15px;
    }
    .dote-img .bg-about {
        top: 34%;
    }
    .slider-bar-img img {
        width: 380px;
    }
    .history-philosphy-img img {
        margin-top: 26px;
    }
}

@media (max-width: 768px) {
    button.navbar-toggler {
        background-color: #fff;
        margin-top: -27px !important;
    }
    div#navbarSupportedContent {
        background: #fff;
        padding: 16px;
        border-radius: 14px;
    }
    .nav-link-item .nav-item .nav-link {
        color: #000;
    }
    .footer-menu ul li {
        font-size: 15px;
        margin-bottom: 5px;
    }
    .emergancy h2,
    .emergancy p {
        font-size: 13px;
    }
    .social-icons-footer h2,
    .comapany h2,
    .need-help h2 {
        font-size: 20px;
        margin-bottom: 17px;
    }
    .social-img img {
        width: 35px;
    }
    .footer-help-icon img {
        width: 43px;
    }
    .navar-section {
        height: 146px;
    }
    .any-question h2 {
        padding: 30px 0px;
    }
    .contact-form {
        height: auto;
        margin-bottom: 0px;
        margin-top: 20px;
    }
    .nav-link-item {
        gap: 0px;
    }
    .dote-img .bg-about {
        top: 12.5%;
        left: 89% !important;
    }
    .what-we-do {
        margin-top: 30px;
    }
    .progress-item {
        margin-top: 30px;
    }
    .meet-team {
        margin-top: -30px;
    }
    .team-member {
        margin-top: 25px;
    }
    .team-inner {
        margin-top: 20px;
    }
}

@media (max-width: 576px) {
    .contact-us-form {
        margin-top: 20px;
    }
    .navar-section {
        height: 160px;
    }
    .breadcrumb_title h1 {
        font-size: 19px;
    }
    .breadcrumb_title h1 {
        text-underline-offset: 7px;
    }
    .logo-text p {
        font-size: 15px;
        line-height: 17px;
    }
    .logo-text h2 {
        font-size: 16px;
        margin-bottom: 10px;
    }
    .navbar-brand img {
        width: 45px;
    }
    button.navbar-toggler {
        font-size: 8px !important;
        margin-top: -23px;
        padding: 4px 7px;
    }
    .nav-link-item {
        gap: 0px;
    }
    .footer-small {
        margin-top: 20px;
    }
    .help-sec {
        padding: 25px 0px;
    }
    .social-icons-footer h2,
    .comapany h2,
    .need-help h2 {
        font-size: 18px;
        margin-bottom: 8px;
    }
    .dote-img .bg-about {
        display: none;
    }
    .dote-img .about-dote-bg {
        top: 0.5%;
    }
    .about-section {
        padding: 70px 30px;
    }
    .slider-bar-img img {
        width: 330px;
    }
    .history-philosphy h1 {
        font-size: 26px;
    }
    .history-philosphy p {
        margin-top: 20px;
    }
}