:root{
  --accent-dark: 199, 89, 195;
  --accent-normal: 255, 111, 249;
  --accent-light: 253, 159, 250;
  --accent-extra-light: 255, 191, 254;
  --accent-super-light: 255, 240, 255;
  --accent-dark-gradient: radial-gradient( 97.06% 130.36% at 97.06% 96.67%, #FF795B 0%, rgba(255, 121, 91, 0.85) 11.56%, rgba(77, 33, 183, 0) 100% ), radial-gradient( 31.68% 50% at 80.93% 100%, rgba(255, 111, 249, 0.2) 0%, rgba(255, 111, 249, 0) 100% ), radial-gradient( 51.08% 50% at 63.71% 100%, rgba(255, 152, 213, 0.74) 0%, #FF6FF9 0.01%, rgba(77, 33, 183, 0) 100% ), rgb(53, 21, 133);
  --accent-normal-gradient: radial-gradient( 97.06% 130.36% at 97.06% 96.67%, #FF795B 0%, rgba(255, 121, 91, 0.85) 11.56%, rgba(77, 33, 183, 0) 100% ), radial-gradient( 31.68% 50% at 80.93% 100%, rgba(255, 111, 249, 0.2) 0%, rgba(255, 111, 249, 0) 100% ), radial-gradient( 51.08% 50% at 63.71% 100%, rgba(255, 152, 213, 0.74) 0%, #FF6FF9 0.01%, rgba(77, 33, 183, 0) 100% ), rgb(77, 33, 183);
}
.font-sans{ font-family: Poppins, Amiri, sans-serif; }
/* Target only when lang="ar" is present on the html or a parent tag */
:lang(ar) .text-xs {
    font-size: 0.800rem !important; /* Standard text-sm */
    line-height: 1.1rem !important;
}

:lang(ar) .text-sm {
    font-size: 0.900rem !important; /* Standard text-base (md) */
    line-height: 1.3rem !important;
}
.rtl-flip{}
:lang(ar) .rtl-flip {
    transform: rotate(180deg);
}
:lang(ar) .rtl-flip {
    transform: rotate(180deg);
}
:lang(ar) #mobilePrevMonth, :lang(ar) #mobileNextMonth, :lang(ar) #closeMobileCalendar{transform: rotate(180deg);}
:lang(ar) #mobileSelectedDates svg.w-6, :lang(ar) #closeMobileGuest svg{transform: rotate(180deg);}
:lang(ar) .lg\:text-left, :lang(ar) .text-left{ text-align: right; }
:lang(ar) .lg\:text-right, :lang(ar) .text-right{ text-align: left; }
:lang(ar) .content-parent-div h3::before{ left:auto; right:0; }
:lang(ar) .rtlLanInfo{ display: none !important;}
:lang(ar) .rounded-md.mr-2, :lang(ar) .rounded-md.mr-3{margin-right: auto;margin-left: calc(var(--spacing) * 2);}
:lang(ar) .ml-4{    margin-left:auto; margin-right: calc(var(--spacing) * 4);}
:lang(ar) .panelBlst.left-4{right: auto;left: calc(var(--spacing) * 4);}

:lang(ar) .text-base, 
:lang(ar) .text-md { /* text-md isn't standard Tailwind, usually text-base */
    font-size: 1.125rem !important; /* Standard text-lg */
    line-height: 1.75rem !important;
}
:lang(ar) .mobSrchBtns{right: auto; left:3px}
:lang(ar) .text-lg {
    font-size: 1.25rem !important; /* Standard text-xl */
    line-height: 1.75rem !important;
}
:lang(ar) .right-2 {
  left: calc(var(--spacing) * 2) ;
  right: auto;
}
:lang(ar) .right-3 {
  left: calc(var(--spacing) * 3) ;
  right: auto;
}
:lang(ar) .right-3\.5{
  left: calc(var(--spacing) * 3.5) ;
  right: auto;
}
:lang(ar) .right-4 {
  left: calc(var(--spacing) * 4) ;
  right: auto;
}
:lang(ar) .left-2 {
  right: calc(var(--spacing) * 2) ;
  left: auto;
}
:lang(ar) .left-3 {
  right: calc(var(--spacing) * 3) ;
  left: auto;
}
:lang(ar) .left-3\.5{
  right: calc(var(--spacing) * 3.5) ;
  left: auto;
}
:lang(ar) .left-4 {
  right: calc(var(--spacing) * 4) ;
  left: auto;
}
:lang(ar) .border-r {
    border-right: none;
    border-left: 1px solid #f1f1f1;
}
:lang(ar) .border-l {
    border-left: none;
    border-right: 1px solid #f1f1f1;
}

:lang(ar) .\[\&_li\]\:pl-6 {
    & li {
        padding-left : 0px;
        padding-right: calc(var(--spacing) * 6);
    }
}
:lang(ar) .\[\&_ul_li\:before\]\:left-0 {
    & ul li:before {
        left: auto;
        right: calc(var(--spacing) * 0);
    }
}
:lang(ar) .content-parent-div ul li::before{
 left: auto;
 right: 0;
}
:lang(ar) .content-parent-div ul li::after{
 left: auto;
 right: -4px;
}
:lang(ar) .\[\&_ul\]\:border-l-4 {
    & ul {
        border-left-style: none;
        border-left-width: 0px;
        border-right-style: var(--tw-border-style);
        border-right-width: 4px;
    }
}

:lang(ar) .lg\:rounded-r-2xl{
 @media (width >= 64rem) {
  border-top-left-radius: var(--radius-2xl);
  border-bottom-left-radius: var(--radius-2xl);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
 }
}

:lang(ar) .lg\:rounded-l-2xl{
    @media (width >= 64rem) {
     border-top-right-radius: var(--radius-2xl);
     border-bottom-right-radius: var(--radius-2xl);
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
  }

/* Custom animations */
 @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
 }
@keyframes fadeInAuth {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideUpAuth {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes slideDownAuth {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(20px) scale(0.95); }
}
.animate-fadeIn-auth {
    animation: fadeInAuth 0.3s ease-out forwards;
}
.animate-slideUp-auth {
    animation: slideUpAuth 0.3s ease-out forwards;
}
.animate-slideDown-auth {
    animation: slideDownAuth 0.2s ease-out forwards;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}
.float-animation {
  animation: float 3s ease-in-out infinite;
}

@keyframes pulse-badge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
.animate-pulse-badge {
    animation: pulse-badge 2s infinite;
}
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.secret-deal-shimmer {
    background: linear-gradient(90deg, #1a1a1a 0%, #333 50%, #1a1a1a 100%);
    background-size: 200% 100%;
    animation: shimmer 3s infinite;
}
.slide-in-right { transform: translateX(100%); }
.slide-in-right.active { transform: translateX(0); }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.slide-panel {transform: translateX(100%);transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);}
.slide-panel.open {transform: translateX(0);}
.overlay {opacity: 0;visibility: hidden;transition: opacity 0.3s ease, visibility 0.3s ease;}
.overlay.open {opacity: 1;visibility: visible;}
.cyanbtn-bg{background: linear-gradient(135deg, #06b6d4, #0891b2);}
.ctabgColor{background: linear-gradient(135deg, #1c0356 0%, #06b6d4 100%) !important;}
.mobSrchColor{background: linear-gradient(135deg, #33069b 0%, #580c4b 100%) !important}
.mobSrchBgColor{background: linear-gradient(135deg, #141519 0%, #03183c 35%, #18013f 70%, #022a3f 100%) !important;}
.logoTxtColor{color: #fff; /*background-image: -webkit-linear-gradient(0deg, rgb(134 74 210) 0%, rgb(76 203 210) 47%, rgb(93 109 229) 100%);
    background-clip: text;-webkit-text-fill-color: transparent;*/ }
.brCremActive{color: #53b4d6;}

.via-purple-900\/50 {
    --tw-gradient-to: rgb(88 28 135 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(88 28 135 / 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to);
  }
  .via-gray-950 {
      --tw-gradient-to: rgb(3 7 18 / 0) var(--tw-gradient-to-position);
      --tw-gradient-stops: var(--tw-gradient-from), #030712 var(--tw-gradient-via-position), var(--tw-gradient-to);
  }
  .via-blue-500 {
      --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
      --tw-gradient-stops: var(--tw-gradient-from), #3b82f6 var(--tw-gradient-via-position), var(--tw-gradient-to);
  }
  .to-fuchsia-500 {
      --tw-gradient-to: #d946ef;
  }
  .to-fuchsia-600{
   --tw-gradient-to: #3c0244;
  }
  .font-black {
      font-weight: 800;
  }
  .amenity-card {
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
  }
  .amenity-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(34, 211, 238, 0.2);
  }
  .chevron-icon.rotated {
    transform: rotate(180deg);
  }
  .chevron-icon {
    transition: transform 0.3s ease;
    display: inline-block;
  }
  .navbgcolor{ background-color: #07070e; }
  .content-parent-div ul li::after {
  content: '';
  position: absolute;
  left: 0px;
  top: 6px;
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  background-color: rgb(243 233 255);
}
.content-parent-div ul li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 10px;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: rgb(14 117 166);
  z-index: 9;
}
.content-parent-div h3 {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e2939;
}
.content-parent-div h3::before {
  content: '';
  position: absolute;
  left: 0;
  width: 4px;
  height: 22px;
  border-radius: 9999px; 
  background: linear-gradient(to bottom, #9333ea, #06b6d4); 
}
.title-border-bg{background: linear-gradient(to bottom, #9333ea, #06b6d4);}
/* ===== Hotel images loading css ===*/
.skeletonHimg { background: #eee;background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);border-radius: 5px;background-size: 200% 100%;animation: shimmerHimg 1.5s linear infinite; }
@keyframes shimmerHimg { to {background-position-x: -200%;} }
/* Maintain Aspect Ratio for Hotel Images */
.img-containerHimg { position: relative; width: 100%; padding-top: 56.25%; overflow: hidden; height: 100%}
.img-containerHimg img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;transition: opacity 0.3s ease-in-out;}
.img-loadingHimg {opacity: 0;}
/* ===== Hotel images loading css ===*/

.bg-slider-curvebg{ position: absolute;left: 0;right: 0;top: 95%;height: 50px;border-bottom-left-radius: 95% 100%;border-bottom-right-radius: 95% 100%;
    background: linear-gradient(rgb(82 35 115) 28.84%, rgb(58 55 129) 102.45%); z-index: 1}
.sliderborder-top{border-top:4px solid #0092b8;}
.bg-custom-sliderbanner { background: linear-gradient(rgb(13 33 55) 28.84%, rgb(10 18 71) 102.45%); }     
.bg-accent-normal-gradient{background: var(--accent-normal-gradient, RGB(var(--accent-normal)));}
.bg-custom-topnavbar{background: linear-gradient(rgb(19 54 104) 28.84%, rgb(38 100 126) 102.45%);}
.bestPrcgBar{background: rgb(71 188 229 / 12%);}
.bredcremBarLine{height: 1.5px;background: linear-gradient(90deg, transparent, #026778, transparent);margin: 10px 0 0 0;}
.bredcremBarLine2{height: 2px;background: linear-gradient(90deg, transparent, #115c78, transparent);margin: 10px 0;margin-top: 18px;margin-bottom: 18px;}
.mtbBar{margin-top: 18px !important;margin-bottom: 18px !important;}
/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-hide::-webkit-scrollbar {display: none;}
/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Smooth scroll container */
.scroll-container {
  scroll-behavior: smooth;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Optional: Add padding for better UX */
.scroll-snap-x {
  scroll-snap-type: x mandatory;
}

.scroll-snap-start {
  scroll-snap-align: start;
}

.tab-content-citypage {
    display: none;
    animation: fadeIn 0.3s ease-in;
 }

 .tab-content-citypage.activetab {
    display: block;
 }
section.alterBgSec:nth-of-type(odd) {background-color: #f3f4f6;}
section.alterBgSec:nth-of-type(even) {background-color: #ffffff;}

.mobileHero {color: var(--color-white);background-color: #0f1424;position: relative;overflow: clip;}
.hero__glow-a {
    pointer-events: none;
    top: calc(var(--spacing) * -24);
    right: calc(var(--spacing) * -16);
    width: calc(var(--spacing) * 64);
    height: calc(var(--spacing) * 64);
    --tw-blur: blur(var(--blur-3xl));
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
    background-color: oklab(57.891% -.0718049 -.0889833 / .35);
    border-radius: 3.40282e38px;
    position: absolute;
}
.hero__glow-b {
    pointer-events: none;
    bottom: calc(var(--spacing) * -28);
    left: calc(var(--spacing) * -16);
    width: calc(var(--spacing) * 64);
    height: calc(var(--spacing) * 64);
    --tw-blur: blur(var(--blur-3xl));
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
    background-color: oklab(52.2487% .0457043 -.25081 / .35);
    border-radius: 3.40282e38px;
    position: absolute;
}
.text-teal400{color: oklch(77.7% .152 181.912);}

 /* Custom scrollbar */
    .custom-scrollbar::-webkit-scrollbar { width: 6px;height:6px;}
    .custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; }
    .custom-scrollbar::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #a1a1a1; }
    
    /* Smooth transitions */
    .slide-in-right { transform: translateX(100%); }
    .slide-in-right.active { transform: translateX(0); }
    /* Line clamp */
    .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .slide-panel {
            transform: translateX(100%);
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .slide-panel.open {
            transform: translateX(0);
        }
        .overlay {
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        .overlay.open {
            opacity: 1;
            visibility: visible;
        }

#selectRoomsMobileBtn{z-index:10}
.ratebutton-fixed{position: fixed;top: 0;left: 0;right: 0;z-index: 10;background: #fff;padding: 10px 20px;border-bottom: 3px solid #0e748b;display:block;}
.pasengerPopdesktop{right: -8.5rem;}
/*
#topLoadingBar{position: fixed;top: 0;left: 0;height:5px;width: 0;z-index: 9999;background: linear-gradient( 90deg, #4f46e5, #22c55e, #06b6d4); 
    transition: width 0.4s ease, opacity 0.3s ease;opacity: 0;}
#topLoadingBar.active {opacity: 1;width: 70%;}
#topLoadingBar.complete {width: 100% !important;opacity: 0;}
#topLoadingBar.active {box-shadow: 0 0 10px rgba(13, 148, 136, 0.5);}
*/
body {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}
body.page-exit{
    opacity: 0.7;
    pointer-events: none;
}

#topLoadingBar{position: fixed;top: 0;z-index: 999;width: 100%;}
.tracking-bar{position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient( 90deg, #4f46e5, #22c55e, #06b6d4);z-index: 9999}
.bar{content:"";display:inline;position:absolute;width:0;height:100%;left:50%;text-align:center}
.bar:nth-child(1){background-color:#da4733;animation:loadingTopBar 3s linear infinite}
.bar:nth-child(2){background-color:#3b78e7;animation:loadingTopBar 3s linear 1s infinite}
.bar:nth-child(3){background-color:#fdba2c;animation:loadingTopBar 3s linear 2s infinite}
@keyframes loadingTopBar{from{left:50%;width:0;z-index:100}33.3333%{left:0;width:100%;z-index:10}to{left:0;width:100%}}

.titlecolorstyle{    color: #ffffff;
    /*background-image: -webkit-linear-gradient(0deg, rgb(135 152 235) 0%, rgb(19 206 215) 47%, rgb(82 154 233) 100%);*/
    background-image: -webkit-linear-gradient(0deg, rgb(62 77 253) 0%, rgb(19 206 215) 47%, rgb(87 82 233) 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;}

#hotelsSearchInput{white-space: nowrap;text-overflow: ellipsis;max-width: 85%;}
input#hotelsSearchInput:hover{text-overflow: clip;overflow: visible;cursor: text;}
#rentcarPickupInput, #rentcarDropoffInput{white-space: nowrap;text-overflow: ellipsis;max-width: 76%;}
input#rentcarPickupInput:hover, input#rentcarDropoffInput:hover{text-overflow: clip;overflow: visible;cursor: text;}
#flightFromSearchInput, #flightToSearchInput{white-space: nowrap;text-overflow: ellipsis;max-width: 78%;}
input#flightFromSearchInput:hover, input#flightToSearchInput:hover{text-overflow: clip;overflow: visible;cursor: text;}
.selectedLng{border: 2px solid #0d2696; background: #eff6ff;}
.selectedLng .lng-checkmark {width: 20px;height: 20px;color: #2563eb;}
.roomGroupBox.lowestPrice {background-color: color-mix(in oklab, var(--color-purple-50) 60%, transparent);}
.lowestPrice .txtDArea{position:absolute;top:0;right:0;background:#6509bd;font-size:11px;color:#fff;line-height:15px;padding:3px 5px;font-weight:600;}
.fltBtnBgc{background: linear-gradient(135deg, #e0f2fe 0%, #f0e7ff 100%);color: #0369a1;}
.fltBtnActBgc{background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 100%);color: #ffffff;}
.mobCanderBar{display:none;}

@layer utilities {
 .backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, )
  }
  .bg-gray-100\/95 {
    background-color: #f3f4f6f2
  }
 @supports (color:color-mix(in lab, red, red)) {
    .bg-gray-100\/95 {
      background-color: color-mix(in oklab, var(--color-gray-100) 95%, transparent)
    }
  }
  .text-\[\#0c85b1\] {
    color: #0c85b1;
  }
  .bg-linear-to-r {
    --tw-gradient-position: to right
  }
  @supports (background-image:linear-gradient(in lab, red, red)) {
    .bg-linear-to-r {
      --tw-gradient-position: to right in oklab
    }
  }
  .bg-linear-to-r {
    background-image: linear-gradient(var(--tw-gradient-stops))
  }
  .from-\[\#0c85b1\] {
    --tw-gradient-from: #0c85b1;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))
  }
  .to-\[\#134c89\] {
    --tw-gradient-to: #134c89;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))
  }
}

@media (min-width: 576px) {
 .navbgcolor{ background-color: #07070e;}
}

/* Medium Devices / Tablets */
@media (min-width: 768px) {
 .navbgcolor{ background-color: #07070e;}
}

/* Large Devices / Laptops */
@media (min-width: 992px) {

}

@media (max-width: 1080px) {
    .mobCanderBar{display: block;}
    .bg-custom-sliderbanner.lg\:min-h-\[28rem\] {min-height: 16rem;}
}

@media only screen 
  and (min-width: 820px) 
  and (max-width: 1180px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
  .mobCanderBar{display: block;}
  .bg-custom-sliderbanner.lg\:min-h-\[28rem\] {min-height: 16rem;}
}

@media only screen 
  and (min-width: 834px) 
  and (max-width: 1210px) 
  and (-webkit-min-device-pixel-ratio: 1.5)  {
  .mobCanderBar{display: block;}
  .bg-custom-sliderbanner.lg\:min-h-\[28rem\] {min-height: 16rem;}
}

/* iPad Pro specific styles */
@media only screen 
  and (min-width: 1024px) 
  and (max-width: 1366px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
  #subscribeEmail{max-width: 170px}
}