.trip-card {
     max-width: 640px;
     margin: 2rem auto;
     border-radius: 1rem;
     box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
 }

 .map-img {
     width: 100%;
     max-width: 640px;
     aspect-ratio: 16 / 6;
     object-fit: cover;
     border-radius: 16px;
 }

 .step-icons {
     text-align: center;
     padding: 1rem 0;
     font-weight: bold;
     font-size: 1.2rem;
 }

 .step-icons span {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 35px;
     height: 35px;
     border-radius: 50%;
     margin: 0 8px;
     font-size: 1rem;
     font-weight: bold;
     color: white;
 }

 .step-icons span::before {
     content: "✔";
 }

 .step-icons span.completed {
     background-color: black;
 }

 .step-icons span.active {
     background-color: black;
 }

 .step-icons span.inactive {
     background-color: #ccc;
 }

 .vendor-card {
     border-radius: 0.75rem;
     text-align: center;
     padding: 1rem;
     transition: 0.3s;
     cursor: pointer;
 }

 .total-section {
     border-top: 1px solid #ddd;
     padding-top: 1rem;
     margin-top: 1rem;
 }

 .btn-next {
     width: 100%;
     border-radius: 50px;
     margin-top: 1rem;
 }

 .fsize {
     font-size: 14px;
 }

 .form-step {
     display: none;
 }

 .form-step.active {
     display: block;
 }

 .extras-title {
     font-weight: bold;
     font-size: 2.5rem;
     line-height: 1.2;
 }

 @media (min-width: 768px) {
     .extras-title {
         font-size: 3rem;
     }
 }

 .extras-subtitle {
     font-size: 20px;
 }

 .info-box {
     background: #f1f1f1;
     border-radius: 16px;
     padding: 10px 15px;
     display: flex;
     align-items: center;
     font-size: 16px;
 }

 .extras-btn {
     width: 100%;
     max-width: 314px;
     height: 59px;
     border: 1px solid #ccc;
     border-radius: 16px;
     font-size: 18px;
     font-weight: 500;
     background: #fff;
     transition: 0.3s;
 }

 /* .extras-btn:hover,
 .extras-btn.active {
     border-color: #000;
     background-color: #f8f9fa;
 } */

 .divider {
     width: 100%;
     max-width: 618px;
     margin: 1rem auto;
     border-top: 1px solid #ccc;
 }

 .total-text {
     font-size: 20px;
     font-weight: bold;
 }

 .total-price {
     font-size: 35px;
     font-weight: bold;
 }

 .total-price small {
     font-size: 14px;
 }

 .gst-text {
     color: gray;
     font-size: 14px;
     margin-top: -5px;
 }

 .pic {
     background: #F9F9F9;
     border-radius: 16px;
     padding: 20px;
 }

 .pic1 {
     background: #F9F9F9;
     border-radius: 16px;
     padding: 20px;
 }

 .form-padding {
     padding: 2rem;
 }

 .nav-buttons {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .back-btn {
     cursor: pointer;
     font-weight: bold;
 }

 .summary-toggle {
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
 }

 .summary-content {
     display: none;
 }

 .summary-content.show {
     display: block;
 }

 .logo-container {
     display: flex;
     align-items: center;
 }

 .logo-text {
     color: white;
     margin-left: 10px;
     font-weight: 500;
 }

 .custom-wrapper {
     padding: 1rem;
 }

 .card {
     margin-bottom: 20px;
 }

 .btn-save {
     font-size: 0.9rem;
     color: #007bff;
 }

 .custom-checkbox {
     width: 16px;
     height: 16px;
     accent-color: black;
     box-shadow: none !important;
     outline: none;
     border: none;
 }

 .custom-checkbox {
     border: 1px solid black;
 }

 .custom-checkbox:checked {
     background-color: black;
     border-color: black;
 }

 .stat-box {
     width: 63px;
     height: 34px;
     padding: 0;
 }

 .timeline-container {
     position: relative;
     padding-left: 20px;
 }

 .timeline-line {
     position: absolute;
     left: 10px;
     top: 20px;
     bottom: 20px;
     width: 1px;
     background-color: #ccc;
     z-index: 1;
 }

 .timeline-dot {
     position: absolute;
     left: 6px;
     width: 10px;
     height: 10px;
     background-color: #6c757d;
     border-radius: 50%;
     z-index: 2;
 }

 .timeline-dot.start {
     top: 4px;
 }

 .timeline-dot.end {
     bottom: 4px;
 }

 .timeline-content {
     margin-left: 20px;
     margin-bottom: 20px;
 }

 .custom-input {
     padding: 12px;
     border-radius: 14px;
 }

 .custom-input:focus {
     border: 1px solid black !important;
     /* add blue border on focus */
     outline: none;
     /* remove outline */
     box-shadow: none !important;
     /* prevent Bootstrap glow */
 }

 .custom-arrow {
     color: white;
     /* arrow ka color red */
     font-size: 20px;
     margin-top: 10px !important;
     /* arrow ka size */
     transition: transform 0.3s;
     /* hover effect ke liye smooth transition */
 }

 .custom-button {
     padding: 12px;
     border-radius: 14px;
 }

 @media (max-width: 768px) {
     .trip-container {
         padding: 32px 16px;
         border-radius: 24px;
     }

     .trip-title {
         font-size: 36px;
         line-height: 44px;
     }

     .vendor-vehicle-container {
         flex-direction: column;
         gap: 16px;
     }

     .vendor-card,
     .vehicle-card {
         width: 100%;
     }
 }

 .vendor-card,
 .vehicle-card {
     background: #F9F9F9;
     border-radius: 16px;
     padding: 24px;
     text-align: center;
     flex: 1;
     min-width: 0;
 }

 .rider-card {
     background: white;
     border-radius: 24px;
     padding: 24px;
     flex: 1;
     min-width: 0;

     /* Shadow */
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
 }

 .rider-card-mobile {
     background: white;
     border-radius: 24px;
     padding: 10px 4px 10px 4px;
     flex: 1;
     min-width: 0;

     /* Shadow */
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
 }

 .flight {
     border: 1px solid #BFBFBF;
     border-radius: 16px;
     padding: 12px;
     margin-top: 10px;
 }

 .card-title {
     color: #767676;
     font-size: 16px;
     font-weight: 500;
 }

 .vendor-logo {
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .vendor-name,
 .vehicle-name {
     font-size: 16px;
     font-weight: 500;
     margin-bottom: 16px;
 }

 .stats-container {
     display: flex;
     gap: 8px;
     justify-content: center;
 }

 .stat-badge {
     background: white;
     border-radius: 6px;
     border: 1px solid #CCCCCC;
     padding: 3px 5px;
     display: flex;
     align-items: center;
     gap: 4px;
 }

 .fair-badge {
     background: #AED3FF;
 }

 .fair-badge-1 {
     color: #1577B0;
 }



 /* Fixed and animated navbar */
 .navbar {
     position: fixed;
     top: 0;
     width: 100%;
     z-index: 999;
     transition: top 0.3s ease;
 }

 .navbar {
     box-shadow: none;
     background-color: inherit;
 }

 .language-dropdown {
     background-color: inherit !important;
 }

 .navbar-brand {
     display: inline-block;
 }

 .logo-scrolled {
     display: none;
 }

 /* When scrolled */
 .navbar.scrolled .logo-default {
     display: none;
 }

 .navbar.scrolled .logo-scrolled {
     display: inline-block;
 }

 /* Default navbar (transparent) */
 .navbar {
     box-shadow: none;
     background-color: transparent;
     transition: background-color 0.3s ease, top 0.3s ease;
 }

 /* When scrolled */
 .navbar.scrolled {
     background-color: white;
     /* or #1976D2 */
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
 }

 .nav-itemss {
     background-color: #EEEEEE80;
     padding: 5px 24px 5px 24px;
     border-radius: 26px;
 }

 @media (max-width: 600px) {
     .nav-itemss {
         background-color: #EEEEEE;
     }

     .why-choose-us .container {
         padding: 32px 16px 32px 16px;
     }

     .earn-more .container {
         padding-top: 32px;
         padding-right: 8px;
         padding-bottom: 32px;
         padding-left: 8px;

     }

     .account-container {
         padding-top: 32px;
         padding-right: 8px;
         padding-bottom: 32px;
         padding-left: 8px;
     }

     .account-sub-container {
         padding-top: 48px;
         padding-right: 32px;
         padding-bottom: 40px;
         padding-left: 32px;
     }

     .footer-tagline {
         font-size: 24px;
     }

     .footer-bottom-line {
         font-size: 14px;
     }
 }

 .img {
     width: 100%;
     height: auto;
 }

 .extra-btn {
     border: 2px solid #BFBFBF;
     border-radius: 16px;
     height: 57px;
 }

 .extra-btn:hover {
     border: 2px solid black;
 }

 .suitcase-select {
     border: 1px solid #BFBFBF;
     height: 60px;
     width: 100%;
     border-radius: 16px;
     font-size: 16px;
     padding: 0 8px;
     outline: none;
 }

 .suitcase-select:focus {
     border-color: #BFBFBF;
     box-shadow: none;
 }

 .btn-group {
     border: 1px solid black;
     border-radius: 16px;
 }

 .add {
     background-color: #F5F5F5;
     border: none;
     border-radius: 100px;
     width: 56px;
     height: 56px;
     margin: 10px;
 }

 .suitcase-select {
     border: 1px solid #BFBFBF;
     height: 60px;
     width: 100%;
     padding: 0 40px 0 10px;
     /* right padding for arrow space */
     font-size: 16px;

     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;

     background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
     background-repeat: no-repeat;
     background-position: right 15px center;
     /* 👈 yahan margin control hota hai */
     background-size: 18px;
 }

 .custom-input {
     width: 100%;
     height: 50px;
     border: 1px solid #BFBFBF;
     border-radius: 8px;
     padding: 0 12px;
     font-size: 16px;
     outline: none;
 }

 .custom-input:focus {
     border-color: #000;
     box-shadow: none;
 }

 .booking-sec-bg {
     background-color: black;
     padding: 5px 24px 5px 24px;
     border-radius: 0px 0px 20px 20px;
 }

 .hero-section {
     background: url("{{ asset('assets/images/hero-skybackground.jpeg') }}");
     background-repeat: no-repeat;
     background-position: bottom;
     background-size: cover;
     padding-top: 80px;
     padding-bottom: 48px;
     padding-left: 32px;
     padding-right: 32px;
     background: linear-gradient(180deg, #ffdbac 0%, #FFFFFF 100%);
 }