body {
   font-family: "Outfit", sans-serif;
   scroll-behavior: smooth;
   background-color: #EEF2F5;
 }
.umrah-detail .umrah-detail-heading h4 {
   color: #0F0F0F;
   font-size: clamp(18px, 2vw, 24px);
 }

 .umarh-top-detail-services {
   color: #18546E;
   font-size: clamp(14px, 2vw, 16px);
   gap: calc(15px + 1vw);

 }

 .umrah-gallary .gallery-main-img {
   aspect-ratio: 17/7;
   object-fit: cover;
   height: 100%;
   min-height: 220px;
   max-height: 340px;
 }

 .umrah-gallary .gallery-side-img {
   aspect-ratio: 16/7;
   object-fit: cover;
   width: 100%;
   min-height: 105px;
   max-height: 165px;
 }

 .umrah-gallary .gallery-badge {
   position: absolute;
   bottom: 12px;
   right: 16px;
   background: rgba(0, 0, 0, 0.75);
   color: white;
   padding: 6px 14px;
   border-radius: 6px;
   font-size: 15px;
   cursor: pointer;
   z-index: 2;
   display: flex;
   align-items: center;
 }



 /* Mobile Gallery Carousel Styles */
 .umrah-mobile-gallary {
   display: none;
 }

 .umrah-mobile-gallary .mobile-carousel-img {
   aspect-ratio: 16/9;
   object-fit: cover;
   width: 100%;
   height: 250px;
 }

 .umrah-mobile-gallary .carousel-indicators [data-bs-target] {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   margin: 0 4px;
   background-color: var(--surface-overlay-50);
   border: none;
 }

 .umrah-mobile-gallary .carousel-indicators .active {
   background-color: var(--secondary-bg-colors);
 }

 .umrah-mobile-gallary .carousel-control-prev,
 .carousel-control-prev {
   width: 40px;
   height: 40px;
   background: var(--primary-colors-low-opacity);
   border-radius: 50%;
   top: 50%;
   left: 3%;
   transform: translateY(-50%);
 }

 .umrah-mobile-gallary .carousel-control-next,
 .carousel-control-next {
   width: 40px;
   height: 40px;
   background: var(--primary-colors-low-opacity);
   border-radius: 50%;
   top: 48%;
   right: 1%;
   transform: translateX(-50%);
 }

 /* Desktop Gallery (default) */
 .umrah-desktop-gallery {
   display: flex;
 }

 /* Responsive breakpoints */
 @media (max-width: 991.98px) {
   .umrah-desktop-gallery {
     display: none;
   }

   .umrah-mobile-gallary {
     display: block;
   }

   .gallery-main-img {
     min-height: 200px;
     max-height: 280px;
   }
 }

 @media (max-width: 767.98px) {
   .umrah-mobile-gallary .mobile-carousel-img {
     height: 220px;
   }

   /* .umrah-mobile-gallary .carousel-control-prev,
    .carousel-control-next {
        width: 35px;
        height: 35px;
    } */

   .umrah-mobile-gallary .carousel-control-prev {
     left: 10px;
     width: 35px;
     height: 35px;
   }

   .umrah-mobile-gallary .carousel-control-next {
     right: -9px;
     width: 35px;
     height: 35px;
     top: 42%;
   }
 }

 @media (max-width: 575.98px) {
   .umrah-mobile-gallary .mobile-carousel-img {
     height: 200px;
   }

   .umrah-mobile-gallary .gallery-badge {
     bottom: 8px;
     right: 12px;
     padding: 4px 10px;
     font-size: 13px;
   }

   .umarh-top-detail-services {

     gap: calc(5px + 1vw);

   }

 }

 .umrah-detail-custom .umrah-option-price {
   position: relative;
   background-color: #EFFAFF;
   border-radius: 10px;
   overflow: hidden;
   min-height: 60px;

 }

 .umrah-detail-custom .umrah-option-price::before {
   content: "";
   position: absolute;
   left: 0;
   top: 8px;
   bottom: 8px;
   width: 2px;
   background-color: #18546E;
   border-radius: 2px;
 }

 .umrah-detail-custom .umrah-option-price h6 {
   color: #18546E;
 }

 .umrah-detail-custom .umrah-option-price h5 {
   font-size: clamp(14px, 2vw, 18px);
 }

 .umrah-detail-custom .umrah-option-services {
   position: relative;
   background-color: #EFFAFF;
   border-radius: 10px 10px 0px 0px;
   overflow: hidden;
   min-height: 60px;
 }

 .umrah-detail-custom .umrah-flight-detail,
 .umrah-detail-custom .umrah-hotel-detail {
   border-radius: 0px 0px 10px 10px;
 }

 .umrah-detail-custom .umrah-option-services::before {
   content: "";
   position: absolute;
   left: 0;
   top: 8px;
   bottom: 8px;
   width: 2px;
   background-color: #18546E;
   border-radius: 5px;
 }

 .umrah-detail-custom .flight-card-custom {
   border: 1px solid #EFEFEF;
   border-radius: 10px;
 }

 .umrah-option-services h5 {
   font-size: clamp(16px, 2vw, 18px);
 }

 .umrah-detail-custom .flight-card-custom .flight-time {
   font-size: clamp(16px, 2vw, 18px);
 }



 .umrah-detail-custom .flight-card-custom .flight-line {
   position: relative;
   height: 2px;
   background-color: #ccc;
   width: 120px;
   margin: 8px 0;
 }

 .umrah-detail-custom .flight-card-custom .flight-dot {
   position: absolute;
   left: 50%;
   top: -4px;
   width: 8px;
   height: 8px;
   background-color: #18546E;
   border-radius: 50%;
   transform: translateX(-50%);
 }

 .umrah-detail-custom .flight-card-custom .flight-plane {
   position: absolute;
   right: -12px;
   top: -8px;
   color: #ccc;
   font-size: 16px;
 }

 .umrah-hotel-detail .hotel-card {
   border: 1px solid #EFEFEF;
   border-radius: 10px;
   gap: 20px;

 }

 .umrah-hotel-detail .hotel-info h5 {
   color: #18546E;
   font-size: clamp(16px, 2vw, 18px);
 }

 .umrah-hotel-detail .hotel-img img {
   width: 140px;
   height: 90px;
   object-fit: cover;
   border-radius: 8px;
 }

 .umrah-hotel-detail .hotel-info .rating-star {
   color: #ff5100;
   font-size: 12px;
 }

 .umrah-hotel-detail h5 {
   font-size: clamp(16px, 2vw, 18px);
 }

 .umrah-detail-custom .umrah-transport-detail {
   border-radius: 0px 0px 10px 10px;
 }

 .umrah-detail-custom .umrah-transport-detail .transport-card-custom {
   border: 1px solid #EFEFEF;
   border-radius: 10px;
 }

 .umrah-detail-custom .umrah-transport-detail .transport-card-custom h5 {
   color: #18546E;
   font-size: clamp(16px, 2vw, 18px);
 }

 .umrah-detail-custom .umrah-overview-detail {
   border-radius: 0px 0px 10px 10px;
 }

 .accordion-item {
   border: none;
   border-radius: 10px;
   margin-bottom: 10px;
 }

 .accordion-button {
   background-color: #EFFAFF;
   border-radius: 10px;
   overflow: hidden;
   min-height: 60px;
   font-size: clamp(16px, 2vw, 18px);


 }

 .accordion-button::before {
   content: "";
   position: absolute;
   left: 0;
   top: 8px;
   bottom: 8px;
   width: 2px;
   background-color: #18546E;
   border-radius: 5px;
 }

 .accordion-button:not(.collapsed) {
   background-color:  #EFFAFF;
   color: #000;
 }

 .accordion-button:focus {
   box-shadow: none;
 }

 .accordion-body {
   background-color: #fff;
   padding: 15px 20px;
   border-radius: 0 0 10px 10px;
 }

 .accordion-icon {
   margin-right: 8px;
   font-size: 16px;
 }










 .umrah-list-options .accordion-item button {
   border-left: 2px solid var(--secondary-colors);
 }

 .umrah-list-options h4 {
   color: var(--primary-text-color);
   font-size: var(--font-size-heading);
 }

 .umrah-booking-detail-card {
   border-radius: 15px;
   border: 1px solid var(--all-border);
   position: sticky;
   top: 9%;
 }

 .umrah-booking-detail-card .text-comments {
   height: 120px;
 }

 .umrah-booking-detail-card .umrah-booking-detail-btn {
   background-color: #18546E;
 }

 /* Hide Bootstrap's default arrow */
 .accordion-button::after {
   display: none !important;
 }

 /* Style for custom icons */
 .umrah-list-options .accordion-icon {
   font-size: 1.5rem;
   display: none;
   font-weight: bold;
   width: 1.5em;
   text-align: center;
   margin-right: 0;
   margin-left: auto;
   position: absolute;
   right: 1.5rem;
   top: 50%;
   transform: translateY(-50%);
   background: transparent;
   pointer-events: none;
 }

 .umrah-list-options .accordion-button {
   position: relative;
 }

 /* Show + when collapsed, - when expanded */
 .umrah-list-options .accordion-button.collapsed .accordion-icon.collapsed {
   display: inline-block;
 }

 .umrah-list-options .accordion-button:not(.collapsed) .accordion-icon.expanded {
   display: inline-block;
 }