/* Extra small devices (phones, portrait) */
@media (max-width: 575px) { }

/* Small devices (phones, landscape) */
@media (max-width: 767px) { 
    .wrap { padding: 0 20px; } 
    h1 {font-size:40px!important; line-height:44px!important;margin-bottom:24px!important;}
    h2 {font-size:32px!important; line-height:38px!important;margin-bottom:20px!important;}
    h3 {font-size:28px!important; line-height:34px!important;margin-bottom:16px!important;}
    h4 {font-size:24px!important; line-height:30px!important;margin-bottom:12px!important;}
    h5 {font-size:20px!important; line-height:26px!important;margin-bottom:12px!important;}
    h6 {font-size:18px!important; line-height:24px!important;margin-bottom:12px!important;}

    .page-subtitle{font-size:18px!important; line-height:24px!important;}
    p{font-size:16px!important; line-height:24px!important;}

    .fp_form .page-title, .fp_form .page-subtitle{padding-left:0px!important;}
    .fp_form .page-subtitle{font-size:18px; line-height:24px;}
    .req-actions{display:flex!important; flex-direction:column!important; align-items: center!important;}
    .order-form-layout{padding-left:0!important; padding-right:0!important;}
    .feedback-hero .wrap,
    .order-form-layout .hero .wrap,
    .feedback-page .page-wrap{
        padding:0 20px!important;
    }
    .order-form-layout .page-wrap{padding:0 12px!important;}
    .feedback-page .form-card {padding:10px!important}
    .section-head h2{overflow-wrap: anywhere;}

    .hero .inner{padding: 0 20px!important}
    .ribbon2{
      position: absolute;
      top: -36px!important;
      right: 52px!important;
      width:48px; height:48px;
    }
    .ribbon2 img{width:120px!important; height:120px!important;}
    .booking-card {        
        padding: 1.75rem 10px!important;
    }
    .hero-section-ride .ridewrap{--bs-gutter-x:0!important}
    .logo-placeholder{width:125px!important; height: 93px!important;}
    

    .chartered_page,
    .heroCard{padding-left:20px!important; padding-right:20px!important}
    .showCompanyPageHero .container,
    .chartered_page .container,
    .heroCard .container{padding:0!important;} 
    .carouselRandOperator-card{margin:20px 0}
    .showCompanyPageHero{padding-top:20px!important;}
    .offers-table{overflow:scroll!important;}
    .auth-main{margin:0!important;padding:10px;}

    .message-input{width:100%}
    .send-button {padding:8px 32px!important}
    .send-button .bi{margin-right:0px!important;}
    .clarification-header .clarification-header1{flex-direction: column;}
    .clarification-header .page-subtitle{margin-bottom:0px!important;}

    .chat-area{padding:20px 10px!important;}
    .reply-area{display:flex; flex-direction: column; padding: 16px 10px 14px!important;}
    .reply-area .btn-send{align-self:flex-end!important} 
    .replyInputBtn{flex-direction:column}

    #toggleOrderClarificationDetail{align-self:flex-end!important}
    .clarificationTop{flex-direction:column}
    .alphanav{position:static!important;}
    .search{gap:0!important;padding-left:10px!important;}
    .companyReviewRP{flex-direction:column}

    .trip-driver__contact{align-items:flex-start!important; flex-direction:column}
    .offer-card-price{margin:10px 0;}

    
}

/* Medium devices (tablets) */
@media (max-width: 991px) { 

    /* HR-like line for second-to-last nav item only on mobile */
    .navbar-nav .nav-divider {
        border-top: 1px solid #e0e0e0;
        padding-top: 15px;
        margin-top: 15px;
    }
    .navbar .col-auto{padding:0}
    .navbar-nav .nav-link {
        padding: 15px 20px;
    }
}

/* Large devices (small laptops/desktops) */
@media (max-width: 1199px) { }

/* Extra large devices */
@media (max-width: 1399px) { }