/* ===================
1. Google fonts
====================== */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700;800;900&family=Roboto:wght@100;300;400;500;700;900&display=swap');
.custom-col-width {
width: 23% !important; /* Use !important to override Bootstrap's column width */
flex: 0 0 23% !important; /* Also override flex properties if Bootstrap uses them */
max-width: 23% !important;
}
/* Comprehensive RTL Support for All Languages */
body [style*="direction: rtl"],
body.language-ar,
body.language-fa,
body.language-ku {
direction: rtl;
text-align: right;
}
/* Header RTL Fixes */
body[style*="direction: rtl"] .header-top,
body.language-ar .header-top,
body.language-fa .header-top,
body.language-ku .header-top {
direction: rtl;
}
body[style*="direction: rtl"] .header-top-left,
body.language-ar .header-top-left,
body.language-fa .header-top-left,
body.language-ku .header-top-left {
direction: rtl;
text-align: right;
}
body[style*="direction: rtl"] .header-top-right,
body.language-ar .header-top-right,
body.language-fa .header-top-right,
body.language-ku .header-top-right {
direction: rtl;
flex-direction: row-reverse;
}
body[style*="direction: rtl"] .top-social,
body.language-ar .top-social,
body.language-fa .top-social,
body.language-ku .top-social {
direction: rtl;
}
body[style*="direction: rtl"] .top-contact-info,
body.language-ar .top-contact-info,
body.language-fa .top-contact-info,
body.language-ku .top-contact-info {
direction: rtl;
text-align: right;
}
body[style*="direction: rtl"] .top-contact-info ul,
body.language-ar .top-contact-info ul,
body.language-fa .top-contact-info ul,
body.language-ku .top-contact-info ul {
direction: rtl;
padding-right: 0;
}
/* Navigation RTL Fixes */
body[style*="direction: rtl"] .navbar-nav,
body.language-ar .navbar-nav,
body.language-fa .navbar-nav,
body.language-ku .navbar-nav {
flex-direction: row;
direction: rtl;
}
body[style*="direction: rtl"] .nav-item,
body.language-ar .nav-item,
body.language-fa .nav-item,
body.language-ku .nav-item {
direction: rtl;
}
body[style*="direction: rtl"] .dropdown-menu,
body.language-ar .dropdown-menu,
body.language-fa .dropdown-menu,
body.language-ku .dropdown-menu {
left: auto !important;
right: 0 !important;
text-align: right;
direction: rtl;
}
/* Hero Section RTL Fixes */
body[style*="direction: rtl"] .hero-section,
body.language-ar .hero-section,
body.language-fa .hero-section,
body.language-ku .hero-section {
direction: rtl;
}
body[style*="direction: rtl"] .hero-content,
body.language-ar .hero-content,
body.language-fa .hero-content,
body.language-ku .hero-content {
direction: rtl;
text-align: right;
}
body[style*="direction: rtl"] .hero-content-wrapper,
body.language-ar .hero-content-wrapper,
body.language-fa .hero-content-wrapper,
body.language-ku .hero-content-wrapper {
direction: rtl;
}
/* Search Area RTL Fixes */
body[style*="direction: rtl"] .search-area,
body.language-ar .search-area,
body.language-fa .search-area,
body.language-ku .search-area {
direction: rtl;
}
body[style*="direction: rtl"] .search-nav,
body.language-ar .search-nav,
body.language-fa .search-nav,
body.language-ku .search-nav {
direction: rtl;
}
body[style*="direction: rtl"] .search-nav ul,
body.language-ar .search-nav ul,
body.language-fa .search-nav ul,
body.language-ku .search-nav ul {
direction: rtl;
padding-right: 0;
}
body[style*="direction: rtl"] .search-form,
body.language-ar .search-form,
body.language-fa .search-form,
body.language-ku .search-form {
direction: rtl;
}
body[style*="direction: rtl"] .form-group-icon i,
body.language-ar .form-group-icon i,
body.language-fa .form-group-icon i,
body.language-ku .form-group-icon i {
left: auto !important;
right: 15px !important;
}
body[style*="direction: rtl"] .form-group-icon input,
body.language-ar .form-group-icon input,
body.language-fa .form-group-icon input,
body.language-ku .form-group-icon input {
padding-left: 15px !important;
padding-right: 45px !important;
text-align: right;
}
body[style*="direction: rtl"] -swap,
body.language-ar .search-form-swap,
body.language-fa .search-form-swap,
body.language-ku .search-form-swap {
left: auto !important;
right: -5px !important;
margin-top: -19px;
transform: translateX(50%) !important;
}
/* Slider and Carousel RTL Fixes */
body[style*="direction: rtl"] .hero-slider,
body.language-ar .hero-slider,
body.language-fa .hero-slider,
body.language-ku .hero-slider {
direction: ltr; /* Keep slider direction LTR for proper animation */
}
body[style*="direction: rtl"] .owl-carousel,
body.language-ar .owl-carousel,
body.language-fa .owl-carousel,
body.language-ku .owl-carousel {
direction: ltr; /* Keep carousel direction LTR */
}
body[style*="direction: rtl"] .partner-slider,
body.language-ar .partner-slider,
body.language-fa .partner-slider,
body.language-ku .partner-slider {
direction: ltr;
}
body[style*="direction: rtl"] .hotel-slider,
body.language-ar .hotel-slider,
body.language-fa .hotel-slider,
body.language-ku .hotel-slider {
direction: ltr;
}
body[style*="direction: rtl"] .car-slider,
body.language-ar .car-slider,
body.language-fa .car-slider,
body.language-ku .car-slider {
direction: ltr;
}
/* Content Sections RTL Fixes */
body[style*="direction: rtl"] .feature-area,
body.language-ar .feature-area,
body.language-fa .feature-area,
body.language-ku .feature-area {
direction: rtl;
}
body[style*="direction: rtl"] .feature-item,
body.language-ar .feature-item,
body.language-fa .feature-item,
body.language-ku .feature-item {
direction: rtl;
text-align: right;
}
body[style*="direction: rtl"] .flight-area,
body.language-ar .flight-area,
body.language-fa .flight-area,
body.language-ku .flight-area {
direction: rtl;
}
body[style*="direction: rtl"] .site-heading,
body.language-ar .site-heading,
body.language-fa .site-heading,
body.language-ku .site-heading {
direction: rtl;
text-align: right;
}
body[style*="direction: rtl"] .flight-item,
body.language-ar .flight-item,
body.language-fa .flight-item,
body.language-ku .flight-item {
direction: rtl;
text-align: right;
}
body[style*="direction: rtl"] .hotel-area,
body.language-ar .hotel-area,
body.language-fa .hotel-area,
body.language-ku .hotel-area {
direction: rtl;
}
body[style*="direction: rtl"] .hotel-item,
body.language-ar .hotel-item,
body.language-fa .hotel-item,
body.language-ku .hotel-item {
direction: rtl;
text-align: right;
}
body[style*="direction: rtl"] .tour-area,
body.language-ar .tour-area,
body.language-fa .tour-area,
body.language-ku .tour-area {
direction: rtl;
}
body[style*="direction: rtl"] .tour-item,
body.language-ar .tour-item,
body.language-fa .tour-item,
body.language-ku .tour-item {
direction: rtl;
text-align: right;
}
body[style*="direction: rtl"] .car-area,
body.language-ar .car-area,
body.language-fa .car-area,
body.language-ku .car-area {
direction: rtl;
}
body[style*="direction: rtl"] .car-item,
body.language-ar .car-item,
body.language-fa .car-item,
body.language-ku .car-item {
direction: rtl;
text-align: right;
}
/* Testimonial RTL Fixes */
body[style*="direction: rtl"] .testimonial-area,
body.language-ar .testimonial-area,
body.language-fa .testimonial-area,
body.language-ku .testimonial-area {
direction: rtl;
}
body[style*="direction: rtl"] .testimonial-content,
body.language-ar .testimonial-content,
body.language-fa .testimonial-content,
body.language-ku .testimonial-content {
flex-direction: row-reverse;
direction: rtl;
}
body[style*="direction: rtl"] .testimonial-author-img,
body.language-ar .testimonial-author-img,
body.language-fa .testimonial-author-img,
body.language-ku .testimonial-author-img {
margin-right: 0 !important;
margin-left: 15px !important;
}
body[style*="direction: rtl"] .testimonial-author-info,
body.language-ar .testimonial-author-info,
body.language-fa .testimonial-author-info,
body.language-ku .testimonial-author-info {
direction: rtl;
text-align: right;
}
body[style*="direction: rtl"] .testimonial-quote,
body.language-ar .testimonial-quote,
body.language-fa .testimonial-quote,
body.language-ku .testimonial-quote {
direction: rtl;
text-align: right;
}
body[style*="direction: rtl"] .testimonial-quote-icon,
body.language-ar .testimonial-quote-icon,
body.language-fa .testimonial-quote-icon,
body.language-ku .testimonial-quote-icon {
right: auto !important;
left: 0 !important;
}
/* Footer RTL Fixes */
body[style*="direction: rtl"] .footer-area,
body.language-ar .footer-area,
body.language-fa .footer-area,
body.language-ku .footer-area {
direction: rtl;
}
body[style*="direction: rtl"] .footer-widget,
body.language-ar .footer-widget,
body.language-fa .footer-widget,
body.language-ku .footer-widget {
direction: rtl;
}
body[style*="direction: rtl"] .footer-widget-box,
body.language-ar .footer-widget-box,
body.language-fa .footer-widget-box,
body.language-ku .footer-widget-box {
direction: rtl;
text-align: right;
}
body[style*="direction: rtl"] .footer-list i,
body.language-ar .footer-list i,
body.language-fa .footer-list i,
body.language-ku .footer-list i {
margin-right: 0 !important;
margin-left: 8px !important;
transform: rotate(180deg);
}
body[style*="direction: rtl"] .footer-contact,
body.language-ar .footer-contact,
body.language-fa .footer-contact,
body.language-ku .footer-contact {
direction: rtl;
text-align: right;
}
body[style*="direction: rtl"] .footer-newsletter,
body.language-ar .footer-newsletter,
body.language-fa .footer-newsletter,
body.language-ku .footer-newsletter {
direction: rtl;
text-align: right;
}
body[style*="direction: rtl"] .copyright,
body.language-ar .copyright,
body.language-fa .copyright,
body.language-ku .copyright {
direction: rtl;
}
body[style*="direction: rtl"] .footer-social,
body.language-ar .footer-social,
body.language-fa .footer-social,
body.language-ku .footer-social {
direction: rtl;
}
/* Download Section RTL Fixes */
body[style*="direction: rtl"] .download-area,
body.language-ar .download-area,
body.language-fa .download-area,
body.language-ku .download-area {
direction: rtl;
}
body[style*="direction: rtl"] .download-content,
body.language-ar .download-content,
body.language-fa .download-content,
body.language-ku .download-content {
direction: rtl;
text-align: right;
}
body[style*="direction: rtl"] .download-feature li,
body.language-ar .download-feature li,
body.language-fa .download-feature li,
body.language-ku .download-feature li {
direction: rtl;
text-align: right;
}
/* FAQ Section RTL Fixes */
body[style*="direction: rtl"] .faq-section,
body.language-ar .faq-section,
body.language-fa .faq-section,
body.language-ku .faq-section {
direction: rtl;
}
body[style*="direction: rtl"] .faq-item,
body.language-ar .faq-item,
body.language-fa .faq-item,
body.language-ku .faq-item {
direction: rtl;
text-align: right;
}
/* Button and Icon RTL Fixes */
body[style*="direction: rtl"] .theme-btn i,
body.language-ar .theme-btn i,
body.language-fa .theme-btn i,
body.language-ku .theme-btn i {
margin-left: 0 !important;
margin-right: 8px !important;
}
body[style*="direction: rtl"] .flight-text-btn i,
body.language-ar .flight-text-btn i,
body.language-fa .flight-text-btn i,
body.language-ku .flight-text-btn i {
margin-left: 0 !important;
margin-right: 5px !important;
transform: rotate(180deg);
}
body[style*="direction: rtl"] .hotel-text-btn i,
body.language-ar .hotel-text-btn i,
body.language-fa .hotel-text-btn i,
body.language-ku .hotel-text-btn i {
margin-left: 0 !important;
margin-right: 5px !important;
transform: rotate(180deg);
}
body[style*="direction: rtl"] .car-text-btn i,
body.language-ar .car-text-btn i,
body.language-fa .car-text-btn i,
body.language-ku .car-text-btn i {
margin-left: 0 !important;
margin-right: 5px !important;
transform: rotate(180deg);
}
/* Grid and Layout RTL Fixes */
body[style*="direction: rtl"] .row,
body.language-ar .row,
body.language-fa .row,
body.language-ku .row {
direction: rtl;
padding-right: 15px;
}
body[style*="direction: rtl"] .col-lg-1,
body[style*="direction: rtl"] .col-lg-2,
body[style*="direction: rtl"] .col-lg-3,
body[style*="direction: rtl"] .col-lg-4,
body[style*="direction: rtl"] .col-lg-5,
body[style*="direction: rtl"] .col-lg-6,
body[style*="direction: rtl"] .col-lg-7,
body[style*="direction: rtl"] .col-lg-8,
body[style*="direction: rtl"] .col-lg-9,
body[style*="direction: rtl"] .col-lg-10,
body[style*="direction: rtl"] .col-lg-11,
body[style*="direction: rtl"] .col-lg-12,
body.language-ar .col-lg-1,
body.language-ar .col-lg-2,
body.language-ar .col-lg-3,
body.language-ar .col-lg-4,
body.language-ar .col-lg-5,
body.language-ar .col-lg-6,
body.language-ar .col-lg-7,
body.language-ar .col-lg-8,
body.language-ar .col-lg-9,
body.language-ar .col-lg-10,
body.language-ar .col-lg-11,
body.language-ar .col-lg-12,
body.language-fa .col-lg-1,
body.language-fa .col-lg-2,
body.language-fa .col-lg-3,
body.language-fa .col-lg-4,
body.language-fa .col-lg-5,
body.language-fa .col-lg-6,
body.language-fa .col-lg-7,
body.language-fa .col-lg-8,
body.language-fa .col-lg-9,
body.language-fa .col-lg-10,
body.language-fa .col-lg-11,
body.language-fa .col-lg-12,
body.language-ku .col-lg-1,
body.language-ku .col-lg-2,
body.language-ku .col-lg-3,
body.language-ku .col-lg-4,
body.language-ku .col-lg-5,
body.language-ku .col-lg-6,
body.language-ku .col-lg-7,
body.language-ku .col-lg-8,
body.language-ku .col-lg-9,
body.language-ku .col-lg-10,
body.language-ku .col-lg-11,
body.language-ku .col-lg-12 {
float: right !important;
}
/* Ensure all containers have proper RTL */
body[style*="direction: rtl"] .container,
body.language-ar .container,
body.language-fa .container,
body.language-ku .container {
direction: rtl;
}
/* Fix for Bootstrap grid in RTL */
body[style*="direction: rtl"] .row [class*="col-"],
body.language-ar .row [class*="col-"],
body.language-fa .row [class*="col-"],
body.language-ku .row [class*="col-"] {
float: right;
}
/* Important: Reset carousel containers to LTR to prevent layout breaks */
body[style*="direction: rtl"] .owl-stage-outer,
body.language-ar .owl-stage-outer,
body.language-fa .owl-stage-outer,
body.language-ku .owl-stage-outer {
direction: ltr;
}
body[style*="direction: rtl"] .owl-stage,
body.language-ar .owl-stage,
body.language-fa .owl-stage,
body.language-ku .owl-stage {
direction: ltr;
}
body[style*="direction: rtl"] .owl-item,
body.language-ar .owl-item,
body.language-fa .owl-item,
body.language-ku .owl-item {
direction: ltr;
}
/* Language & Currency Dropdown Styles */
.dropdown-container {
position: relative;
display: inline-block;
margin-right: 120px;
margin-left: 120px;
}
.dropdown-btn {
background: #ffffff00;
border: 1px solid #dddddd00;
border-radius: 4px;
padding: 6px 12px;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
font-size: 15px;
color: #ffffff;
transition: all 0.3s ease;
height: 25px;
min-width: 100px;
}
.dropdown-btn:hover {
background: #f5f5f500;
border-color: #bbbbbb00;
}
/* Desktop container - 4 languages in one row */
.dropdown-content {
display: none;
position: absolute;
top: 100%;
left: -150px;
background: white;
width: 550px;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
z-index: 1000;
padding: 20px;
}
.dropdown-container.active .dropdown-content {
display: block;
}
.language-section {
margin-bottom: 20px;
padding-bottom: 15px;
}
.section-title {
font-size: 16px;
font-weight: 600;
margin-bottom: 15px;
color: #0a2c5e;
}
/* Desktop: 4 languages in one row */
.language-options-horizontal {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4 equal columns for 4 languages */
gap: 10px;
}
.language-option {
display: flex;
flex-direction: column; /* Stack flag and text vertically */
align-items: center;
justify-content: center;
padding: 10px 8px;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
border: 1px solid #e2e8f0;
text-align: center;
min-height: 75px;
}
.language-option:hover {
background: #f8fafc;
border-color: #cbd5e0;
}
.language-option.active {
background: #e1f0ff;
border-color: #4da8ff;
}
.language-option .flag {
width: 22px;
height: 16px;
border-radius: 3px;
margin-bottom: 6px;
}
.language-info {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.language-name {
font-size: 13px;
font-weight: 500;
color: #2d3748;
line-height: 1.2;
}
.language-code {
font-size: 11px;
color: #718096;
font-weight: 600;
background: #f7fafc;
padding: 2px 6px;
border-radius: 3px;
display: inline-block;
}
/* Currency Grid - 3 boxes in one row */
.currency-grid-six-columns {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 columns */
gap: 8px;
max-height: 180px;
overflow-y: auto;
padding: 4px;
}
.currency-item {
display: flex;
flex-direction: column; /* Stack flag and text vertically */
align-items: center;
justify-content: center;
padding: 10px 8px;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
border: 1px solid #e2e8f0;
min-height: 65px;
width: 100%;
}
.currency-item:hover {
background: #f8fafc;
border-color: #cbd5e0;
}
.currency-item.selected {
background: #e1f0ff;
border-color: #4da8ff;
}
.currency-flag {
width: 18px;
height: 14px;
border-radius: 2px;
margin-bottom: 6px;
}
.currency-info {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.currency-code {
font-size: 13px;
font-weight: 600;
color: #2d3748;
}
.currency-name {
font-size: 11px;
color: #718096;
text-align: center;
line-height: 1.2;
}
/* Dropdown Footer */
.dropdown-footer {
padding: 15px;
background: #f8fafc;
border-top: 1px solid #e2e8f0;
}
.selection-status {
font-size: 13px;
color: #718096;
margin-bottom: 12px;
text-align: center;
}
.selection-status span {
font-weight: 600;
color: #2d3748;
}
.apply-btn {
width: 100%;
background: #0a2c5e;
color: white;
border: none;
padding: 12px;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: 0.3s ease;
font-size: 14px;
}
.apply-btn:hover {
background: #083a7c;
}
/* RTL Support */
.language-ar .dropdown-content,
.language-fa .dropdown-content {
right: auto;
left: 0;
}
/* Scrollbar Styling */
.currency-grid-six-columns::-webkit-scrollbar {
width: 4px;
}
.currency-grid-six-columns::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 2px;
}
.currency-grid-six-columns::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 2px;
}
.currency-grid-six-columns::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
/* =========================================
MOBILE RESPONSIVE STYLES
========================================= */
/* Tablet and Mobile */
@media (max-width: 991px) {
.header-top-right .dropdown-container {
position: relative !important;
width: 100% !important;
display: flex !important;
justify-content: center !important;
margin: 0 auto !important;
left: 0 !important;
right: 0 !important;
margin-right: 0 !important;
}
.dropdown-btn {
min-width: 80px;
}
.dropdown-content {
position: fixed !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
width: 90vw !important;
max-width: 340px !important;
max-height: 70vh !important;
overflow-y: auto !important;
z-index: 10000 !important;
background: white !important;
border-radius: 12px !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
padding: 15px !important;
}
.dropdown-container.active .dropdown-content {
display: block !important;
}
}
/* Mobile devices (768px and below) */
@media (max-width: 768px) {
.dropdown-content {
width: 95vw !important;
max-width: 320px !important;
}
/* CORRECTED: 2 language boxes side by side in each row for mobile */
.language-options-horizontal {
grid-template-columns: repeat(2, 2fr) !important; /* 2 columns side by side */
gap: 8px !important;
}
/* With 4 languages and 2 columns, we'll get:
Row 1: [English] [Arabic]
Row 2: [Kurdish] [Persian] */
.language-option {
padding: 8px 6px !important;
min-height: 65px !important;
}
.language-option .flag {
width: 20px !important;
height: 15px !important;
}
.language-name {
font-size: 12px !important;
}
.language-code {
font-size: 10px !important;
}
/* Currency grid - keep 3 columns */
.currency-grid-six-columns {
grid-template-columns: repeat(3, 1fr) !important;
gap: 6px !important;
max-height: 160px !important;
}
.currency-item {
padding: 8px 6px !important;
min-height: 60px !important;
}
.currency-flag {
width: 16px !important;
height: 12px !important;
}
.currency-code {
font-size: 12px !important;
}
.currency-name {
font-size: 10px !important;
}
.section-title {
font-size: 18px !important;
margin-bottom: 12px !important;
}
}
/* Small mobile devices (480px and below) */
@media (max-width: 480px) {
.dropdown-content {
width: 98vw !important;
max-width: 300px !important;
padding: 12px !important;
}
/* Keep 2 language boxes side by side */
.language-options-horizontal {
grid-template-columns: repeat(2, 2fr) !important;
gap: 6px !important;
}
.language-option {
padding: 7px 5px !important;
min-height: 60px !important;
}
/* Currency grid - keep 3 columns */
.currency-grid-six-columns {
grid-template-columns: repeat(3, 1fr) !important;
gap: 5px !important;
max-height: 140px !important;
}
.currency-item {
padding: 7px 5px !important;
min-height: 55px !important;
}
.header-top-right {
flex-direction: column !important;
align-items: center !important;
gap: 8px !important;
}
.dropdown-container {
margin-right: 0 !important;
}
}
/* Extra small mobile devices (360px and below) */
@media (max-width: 360px) {
.dropdown-content {
max-width: 280px !important;
}
.language-option {
padding: 6px 4px !important;
min-height: 55px !important;
}
.language-name {
font-size: 11px !important;
}
.currency-item {
padding: 6px 4px !important;
min-height: 50px !important;
}
.currency-code {
font-size: 11px !important;
}
.currency-name {
font-size: 9px !important;
}
}
/* =========================================
ENSURE LANGUAGE DROPDOWN IS ALWAYS CLICKABLE
========================================= */
#language-currency-display,
#language-currency-display *,
.dropdown-container,
.dropdown-container * {
pointer-events: auto !important;
touch-action: auto !important;
user-select: auto !important;
-webkit-user-select: auto !important;
-moz-user-select: auto !important;
-ms-user-select: auto !important;
}
.allow-keyboard,
.allow-keyboard * {
readonly: false !important;
-webkit-readonly: none !important;
pointer-events: auto !important;
touch-action: auto !important;
}
#language-currency-display {
cursor: pointer !important;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
}
#language-currency-display:hover {
opacity: 0.9 !important;
transform: translateY(-1px) !important;
}
.dropdown-content,
.dropdown-content * {
pointer-events: auto !important;
touch-action: auto !important;
user-select: text !important;
}
.language-option,
.currency-item {
cursor: pointer !important;
-webkit-tap-highlight-color: rgba(10, 44, 94, 0.1) !important;
}
.language-option:hover,
.currency-item:hover {
background-color: #f0f7ff !important;
}
#apply-selections {
cursor: pointer !important;
pointer-events: auto !important;
touch-action: auto !important;
}
#apply-selections:hover {
background-color: #083a7c !important;
transform: translateY(-1px) !important;
}
@media (max-width: 768px) {
#language-currency-display {
min-height: 20px !important;
height: 25px !important;
min-width: 34px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.dropdown-content {
-webkit-overflow-scrolling: touch !important;
overscroll-behavior: contain !important;
}
}
*:not(.date-picker):not(input.date-picker) {
pointer-events: auto !important;
}
/* Remove duplicate CSS rules - keeping only the optimized versions */
/* D
/* RTL support for Arabic and Persian - ONLY when these languages are active */
/* COMPREHENSIVE RTL SUPPORT FIX */
body.rtl {
direction: rtl !important;
text-align: right !important;
}
/* Force RTL on all elements when body has rtl class */
body.rtl * {
direction: rtl !important;
text-align: right !important;
}
/* Header RTL Fix */
body.rtl .header-top {
direction: rtl !important;
}
body.rtl .header-top-left,
body.rtl .header-top-right {
direction: rtl !important;
text-align: right !important;
}
body.rtl .header-top-right {
flex-direction: row !important;
}
body.rtl .top-social,
body.rtl .top-contact-info {
direction: rtl !important;
}
body.rtl .top-contact-info ul {
direction: rtl !important;
padding-right: 0 !important;
}
/* Navigation RTL Fix */
body.rtl .main-navigation {
direction: rtl !important;
}
body.rtl .navbar-nav {
flex-direction: row-reverse !important;
direction: rtl !important;
}
body.rtl .nav-item {
direction: rtl !important;
}
body.rtl .dropdown-menu {
left: auto !important;
right: 0 !important;
text-align: right !important;
direction: rtl !important;
}
/* Hero Section RTL Fix */
body.rtl .hero-section {
direction: rtl !important;
}
body.rtl .hero-content {
direction: rtl !important;
text-align: right !important;
}
body.rtl .hero-content-wrapper {
direction: rtl !important;
text-align: right !important;
}
/* Search Area RTL Fix */
body.rtl .search-area {
direction: rtl !important;
}
body.rtl .search-nav ul {
direction: rtl !important;
padding-right: 0 !important;
}
body.rtl .search-form {
direction: rtl !important;
}
body.rtl .form-group-icon i {
left: auto !important;
right: 15px !important;
}
body.rtl .form-group-icon input {
padding-left: 15px !important;
padding-right: 45px !important;
text-align: right !important;
}
body.rtl .search-form-swap {
left: auto !important;
right: -5px !important;
margin-top: -18px;
transform: translateX(50%) !important;
}
/* Keep sliders LTR for proper functionality for testimonials */
body.rtl .hero-slider,
body.rtl .partner-slider,
body.rtl .hotel-slider,
body.rtl .car-slider,
body.rtl .testimonial-slider,
body.rtl .owl-carousel,
body.rtl .owl-stage-outer,
body.rtl .owl-stage,
body.rtl .owl-item {
direction: ltr !important;
text-align: center !important;
}
/* But ensure slider content is RTL */
body.rtl .hero-slider .hero-content,
body.rtl .partner-slider .partner-card,
body.rtl .hotel-slider .hotel-item,
body.rtl .car-slider .car-item,
body.rtl .testimonial-slider .testimonial-single {
direction: rtl !important;
text-align: right !important;
}
/* Content Sections RTL */
body.rtl .feature-area,
body.rtl .flight-area,
body.rtl .hotel-area,
body.rtl .tour-area,
body.rtl .car-area,
body.rtl .testimonial-area,
body.rtl .download-area,
body.rtl .blog-area,
body.rtl .faq-section {
direction: rtl !important;
}
body.rtl .site-heading {
direction: rtl !important;
text-align: right !important;
}
body.rtl .feature-item,
body.rtl .flight-item,
body.rtl .hotel-item,
body.rtl .tour-item,
body.rtl .car-item,
body.rtl .testimonial-single,
body.rtl .blog-item,
body.rtl .faq-item {
direction: rtl !important;
text-align: right !important;
}
/* Testimonial Content RTL */
body.rtl .testimonial-content {
flex-direction: row-reverse !important;
direction: rtl !important;
}
body.rtl .testimonial-author-img {
margin-right: 0 !important;
margin-left: 15px !important;
}
body.rtl .testimonial-author-info {
direction: rtl !important;
text-align: right !important;
}
body.rtl .testimonial-quote {
direction: rtl !important;
text-align: right !important;
}
/* Footer RTL */
body.rtl .footer-area {
direction: rtl !important;
}
body.rtl .footer-widget,
body.rtl .footer-widget-box {
direction: rtl !important;
text-align: right !important;
}
body.rtl .footer-list i {
margin-right: 0 !important;
margin-left: 8px !important;
transform: rotate(180deg) !important;
}
body.rtl .footer-contact,
body.rtl .footer-newsletter {
direction: rtl !important;
text-align: right !important;
}
body.rtl .copyright {
direction: rtl !important;
}
/* Button and Icon RTL */
body.rtl .theme-btn i,
body.rtl .flight-text-btn i,
body.rtl .hotel-text-btn i,
body.rtl .car-text-btn i,
body.rtl .tour-text-btn i {
margin-left: 0 !important;
margin-right: 8px !important;
transform: rotate(180deg) !important;
}
/* Grid System RTL Fix - CRITICAL */
body.rtl .container {
direction: rtl !important;
margin-right: 0px;
}
body.rtl .row {
direction: rtl !important;
margin-right: -15px !important;
margin-left: -15px !important;
}
body.rtl [class*="col-"] {
float: right !important;
padding-right: 15px !important;
padding-left: 15px !important;
}
/* Specific column fixes */
body.rtl .col-lg-1, body.rtl .col-lg-2, body.rtl .col-lg-3,
body.rtl .col-lg-4, body.rtl .col-lg-5, body.rtl .col-lg-6,
body.rtl .col-lg-7, body.rtl .col-lg-8, body.rtl .col-lg-9,
body.rtl .col-lg-10, body.rtl .col-lg-11, body.rtl .col-lg-12 {
float: right !important;
}
/* Download Section RTL */
body.rtl .download-content {
direction: rtl !important;
text-align: right !important;
}
body.rtl .download-feature li {
direction: rtl !important;
text-align: right !important;
}
/* FAQ Section RTL */
body.rtl .faq-section {
direction: rtl !important;
}
body.rtl .faq-item {
direction: rtl !important;
text-align: right !important;
}
/* Emergency Override - Force RTL on everything */
body.rtl div,
body.rtl section,
body.rtl article,
body.rtl aside,
body.rtl details,
body.rtl figcaption,
body.rtl figure,
body.rtl footer,
body.rtl header,
body.rtl hgroup,
body.rtl main,
body.rtl menu,
body.rtl nav,
body.rtl summary {
direction: rtl !important;
text-align: right !important;
}
/* FAQ SECTION RTL FIX */
body.rtl .faq-section {
direction: rtl !important;
}
body.rtl .faq-header {
direction: rtl !important;
text-align: right !important;
}
body.rtl .faq-grid {
direction: rtl !important;
}
body.rtl .faq-item {
direction: rtl !important;
text-align: right !important;
}
body.rtl .faq-question {
direction: rtl !important;
text-align: right !important;
padding: 20px 60px 20px 20px !important;
}
body.rtl .faq-question h3 {
direction: rtl !important;
text-align: right !important;
padding-right: 0 !important;
padding-left: 20px !important;
}
body.rtl .faq-icon {
left: 20px !important;
right: auto !important;
}
body.rtl .faq-answer {
direction: rtl !important;
text-align: right !important;
padding: 0 20px 20px 20px !important;
}
body.rtl .faq-content {
direction: rtl !important;
text-align: right !important;
}
body.rtl .faq-content p {
direction: rtl !important;
text-align: right !important;
}
body.rtl .read-more-btn {
direction: rtl !important;
text-align: right !important;
margin-right: 0 !important;
margin-left: auto !important;
}
/* =========================================
FAQ SECTION CSS (Clean Version)
========================================= */
.faq-section {
padding: 60px 0;
background: #f9f9f9;
}
/* Ensure the answer area is ALWAYS visible (for the 2-line teaser) */
.faq-answer {
display: block !important;
padding-top: 10px;
}
.faq-content {
position: relative;
overflow: hidden;
transition: max-height 0.5s ease-in-out;
}
/* 2 Lines visible (Adjust 80px if your font is large) */
.faq-content.collapsed {
max-height: 85px !important;
}
/* Full text visible */
.faq-content.expanded {
max-height: 2000px !important;
}
.phone-btn-faq {
display: inline-flex;
align-items: center;
justify-content: left;
gap: 40px;
background: #edfaff;
color: #2b2f3b;
border: 1px solid #4fcbfc;
font-size: 22px;
font-weight: 700;
padding: 2px 14px;
border-radius: 40px;
text-decoration: none;
width: 100%;
box-sizing: border-box;
}
.faq-header {
text-align: center;
margin-bottom: 40px;
}
/* --- INDIVIDUAL FAQ ITEM --- */
.faq-item {
background: #fff;
border-radius: 8px;
margin-bottom: 15px;
padding: 20px 25px;
border: 1px solid #eee;
transition: all 0.3s ease;
}
/* --- HEADER AREA (Question + Icon) --- */
.faq-question-header {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer; /* Makes it look clickable */
margin-bottom: 10px;
}
.faq-question-header h3 {
font-size: 18px;
color: #0a2c5e;
font-weight: 700;
margin: 0;
padding-right: 15px;
}
/* The Blue Circle Icon */
.faq-icon {
width: 50px;
height: 50px;
background-color: #0a2c5e; /* Blue Background */
border-radius: 50%; /* Circle Shape */
display: flex;
align-items: center;
justify-content: center;
color: #fff; /* White Arrow */
font-size: 20px;
transition: transform 0.3s ease; /* Smooth rotation */
flex-shrink: 0; /* Prevents shrinking on mobile */
}
/* Rotate icon when active */
.faq-item.active .faq-icon {
transform: rotate(180deg);
background-color: #007bff; /* Optional: Lighter blue when open */
}
/* --- THE CONTENT AREA --- */
.faq-content {
position: relative;
overflow: hidden;
padding-top: 10px;
transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); /* Smoother expansion */
}
.text-wrapper p {
color: #666;
line-height: 1.6;
margin-bottom: 15px;
font-size: 15px;
}
/* Ensure the answer box is hidden unless the item is active */
.faq-answer {
display: none;
padding-top: 15px;
}
.faq-item.active .faq-answer {
display: block;
}
/* Base style for content */
.faq-content {
position: relative;
overflow: hidden;
transition: max-height 0.5s ease !important; /* Temporarily disable transitions to test if it works first */
}
/* Styled Blue Button */
.read-more-btn {
display: inline-block !important;
background: #0a2c5e !important;
color: white !important;
padding: 6px 15px !important;
border-radius: 4px;
border: none;
cursor: pointer;
font-size: 13px;
margin-top: 10px;
position: relative;
z-index: 10;
}
.faq-icon { transition: transform 0.3s; }
.faq-item.active .faq-icon { transform: rotate(180deg); }
/* --- FINAL FIX: LANGUAGE ICON & HEADER POSITION --- */
/* 1. Ensure the Button Design matches English exactly in all languages */
.dropdown-btn {
display: flex !important;
align-items: center !important;
gap: 8px !important; /* Space between flag and text */
height: 32px !important; /* Fixed Height */
padding: 0 10px !important;
border: 1px solid rgba(255,255,255,0.2) !important;
border-radius: 4px !important;
background: transparent !important;
min-width: 110px !important; /* Enforce width */
}
#header-flag-img {
width: 20px !important;
height: 15px !important;
object-fit: cover !important;
border-radius: 2px !important;
margin: 0 !important; /* Remove specific margins, rely on gap */
}
/* 2. Header Positioning Logic (LTR vs RTL) */
/* LTR (English) - Default */
.header-top {
display: flex;
justify-content: space-between;
}
/* RTL (Arabic/Kurdish/Farsi) - Mirror Everything */
body.rtl .header-top,
html[dir="rtl"] .header-top {
flex-direction: row-reverse !important; /* Swaps Left and Right sections */
}
/* Ensure content inside right section flips correctly */
body.rtl .header-top-right,
html[dir="rtl"] .header-top-right {
flex-direction: row !important; /* Keep internal items aligned properly */
justify-content: flex-end !important; /* Ensure they stick to the 'Start' */
}
/* Fix the specific Language Button internal alignment in RTL */
body.rtl .dropdown-btn,
html[dir="rtl"] .dropdown-btn {
flex-direction: row !important; /* Keep Flag-Text order or use row-reverse to swap */
}
/* --- LANGUAGE ICON & HEADER POSITION FIX END --- */
/* Date Picker Popup Styles */
.date-picker-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 9999;
align-items: center;
justify-content: center;
}
.date-picker-container {
width: 900px;
max-width: 95vw;
height: 650px;
max-height: 90vh;
background-color: white;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 46, 109, 0.2);
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
animation: slideUpScale 0.227s cubic-bezier(0.000, 0.0, 0.0, 0.0) forwards;
transform: translateY(90px) scale(1);
}
/* Ensure date picker overlay has proper z-index */
.date-picker-overlay {
z-index: 99999 !important;
}
/* Make sure date inputs are clickable */
.form-group-icon input.date-picker {
cursor: pointer !important;
background-color: white !important;
}
/* Apply button styles */
.footer .apply-btn {
cursor: pointer;
transition: all 0.3s ease;
}
.footer .apply-btn:hover {
background-color: #083a7c !important;
transform: translateY(-2px);
}
.date-picker-header {
padding: 10px 30px;
background-color: #0a2c5e;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 15px;
}
.date-picker-header h1 {
font-size: 24px;
font-weight: 600;
font-family: 'Barlow', sans-serif;
color:white;
}
.trip-selector {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.trip-option {
padding: 8px 16px;
background-color: rgba(255, 255, 255, 0.15);
border-radius: 20px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
font-family: 'Barlow', sans-serif;
}
.trip-option.active {
background-color: #4da8ff;
font-weight: 600;
}
.date-picker-content {
display: flex;
flex-direction: column;
padding: 25px 30px;
flex-grow: 1;
overflow: auto;
}
.selected-dates {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
position: relative;
gap: 15px;
}
.date-info {
flex: 1;
padding: 15px 15px 0px 15px;
background-color: #f0f4f8;
border-radius: 8px;
min-width: 0;
}
.date-info.return-disabled {
background-color: #e8ecef;
color: #a0aec0;
}
.date-info.return-disabled h3,
.date-info.return-disabled .date-value {
color: #a0aec0;
}
.date-info h3 {
font-size: 16px;
color: #0a2c5e;
margin-bottom: 8px;
font-family: 'Barlow', sans-serif;
}
.date-value {
font-size: 18px;
font-weight: 600;
color: #0a2c5e;
font-family: 'Barlow', sans-serif;
}
.clear-btn {
position: absolute;
left: 50%;
top: -10%;
transform: translate(-50%, -50%);
background-color: #eef6ff;
color: #0a2c5e;
border: none;
padding: 5px 20px;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
z-index: 10;
white-space: nowrap;
font-family: 'Barlow', sans-serif;
border-color:1px solid rgb(203, 221, 253);
}
.clear-btn:hover {
background-color: #e1e8f0;
}
.calendar-container {
display: flex;
gap: 30px;
}
@media (max-width: 768px) {
.calendar-container {
flex-direction: column;
}
.date-value {
font-size: 16px;
font-weight: 600;
color: #0a2c5e;
font-family: 'Barlow', sans-serif;
}
}
.calendar {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.month-year {
font-size: 18px;
font-weight: 600;
color: #0a2c5e;
text-align: center;
font-family: 'Barlow', sans-serif;
}
.nav-btn {
background: rgb(251, 253, 255);
border: none;
font-size: 22px;
color: #0a2c5e;
cursor: pointer;
padding: 8px 12px;
border-radius: 4px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.nav-btn:hover {
background-color: #e8f4ff;
}
.weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
margin-bottom: 10px;
}
.weekday {
font-weight: 600;
color: #0a2c5e;
padding: 8px 0;
font-size: 18px;
font-family: 'Barlow', sans-serif;
}
.days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2.5px;
flex-grow: 1;
}
.day {
height: 45px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
background-color: #f8fafc;
font-family: 'Barlow', sans-serif;
}
@media (min-width: 992px) {
.day {
height: 45px;
font-size: 18px;
}
.weekday {
font-weight: 600;
color: #0a2c5e;
padding: 8px 0;
font-size: 16px;
font-family: 'Barlow', sans-serif;
}
.month-year {
font-size: 16px;
font-weight: 600;
color: #0a2c5e;
text-align: center;
font-family: 'Barlow', sans-serif;
}
}
.day:hover {
background-color: #e1e8f0;
}
.day.other-month {
color: #a0aec0;
background-color: #f8fafc;
}
.day.selected {
background-color: #4da8ff;
color: white;
font-weight: 600;
}
.day.in-range {
background-color: #e1f0ff;
}
.day.disabled {
color: #ccc;
cursor: not-allowed;
background-color: #f5f5f5;
}
.day.disabled:hover {
background-color: #f5f5f5;
}
.time-selection {
margin-top: 20px;
padding: 20px;
background: #f8f9fa;
border-radius: 8px;
}
.time-selection h3 {
margin-bottom: 15px;
color: #0a2c5e;
font-family: 'Barlow', sans-serif;
}
.time-options {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.time-option {
flex: 1;
min-width: 150px;
}
.time-option label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #0a2c5e;
}
.time-option select {
width: 100%;
padding: 10px;
border: 1px solid #ced4da;
border-radius: 4px;
background-color: white;
}
.footer {
padding: 15px 30px;
background-color: #f0f4f8;
display: flex;
justify-content: flex-end;
}
.apply-btn {
background-color: #0a2c5e;
color: white;
border: none;
padding: 12px 30px;
border-radius: 6px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
font-family: 'Barlow', sans-serif;
}
.apply-btn:hover {
background-color: #083a7c;
}
.search-area {
position: relative;
}
.form-group-icon input.date-picker {
cursor: pointer;
}
.additional-flight-options {
margin-top: 0px;
padding: 10px;
background: #f8f9fa;
border-radius: 8px;
border: 1px solid #e9ecef;
margin-left: -13px;
width: 100%;
}
.flight-options-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.direct-flights-option {
display: flex;
align-items: center;
gap: 8px;
}
.direct-flights-option input[type="checkbox"] {
width: none;
height: none;
cursor: pointer;
}
.direct-flights-option label {
margin: 0;
font-weight: 500;
color: #626262;
cursor: pointer;
font-family: 'Barlow', sans-serif;
}
.refundable-flights-option label {
margin: 0;
font-weight: 500;
color: #626262;
cursor: pointer;
font-family: 'Barlow', sans-serif;
}
.refundable-flights-option input[type="checkbox"] {
width: inherit;
height: inherit;
cursor: pointer;
}
.refundable-flights-option {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 15px;
background: #f8f9fa;
border-radius: 8px;
margin-right: 20px;
}
.flexible-flights-option {
display: flex;
align-items: center;
gap: 10px;
}
.flexible-flights-option label {
margin: 0;
font-weight: 500;
color: #626262;
font-family: 'Barlow', sans-serif;
font-size: 16px;
}
.flexible-flights-option select {
padding: 8px 12px;
border: 1px solid #ced4da;
border-radius: 4px;
background-color: white;
font-family: 'Barlow', sans-serif;
color: #626262;
font-size: 16px;
}
.passenger-confirm-btn {
background-color: #0a2c5e;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
font-family: 'Barlow', sans-serif;
margin-top: 10px;
width: 100%;
}
.passenger-confirm-btn:hover {
background-color: #083a7c;
}
/* Google Review Styles */
.google-review-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 2px solid #f0f4f8;
}
.book-now-btn-review {
background-color: #052f6d;
color: #fff;
padding: 1px 20px;
border-radius: 6px;
text-decoration: none;
font-size: 20px;
font-weight: 700;
transition: background-color 0.3s ease;
border: none;
cursor: pointer;
flex-shrink: 0;
}
.book-now-btn-review-1 {
background-color: #056d2d;
color: #fff;
padding: 1px 20px;
border-radius: 6px;
text-decoration: none;
font-size: 20px;
font-weight: 700;
transition: background-color 0.3s ease;
border: none;
cursor: pointer;
flex-shrink: 0;
}
.google-logo {
display: flex;
align-items: center;
gap: 10px;
}
.google-logo svg {
width: 80px;
height: 26px;
}
.google-text {
font-size: 18px;
font-weight: 600;
color: #4285F4;
font-family: 'Google Sans', Arial, sans-serif;
}
.google-rating {
display: flex;
align-items: center;
gap: 10px;
}
.stars {
font-size:24px;
display: flex;
gap: 2px;
}
.star {
color: #FFB400;
font-size: 24px;
}
.rating-text {
font-size: 24px;
font-weight: 600;
color: #0a2c5e;
}
.live-google-review {
background: #f8fafc;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
border-left: 4px solid #4285F4;
}
.review-text {
font-size: 16px;
line-height: 1.6;
color: #2d3748;
margin-bottom: 15px;
}
.review-author {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.review-author strong {
color: #0a2c5e;
font-size: 16px;
}
.review-date {
color: #718096;
font-size: 14px;
}
.review-source {
display: flex;
align-items: center;
gap: 8px;
}
.source-badge {
background: #34A853;
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
}
.source-company {
color: #718096;
font-size: 14px;
}
.google-review-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin-top: 20px;
}
.stat-item {
text-align: center;
padding: 0px;
background: #f7f9fc;
border-radius: 8px;
border: 1px solid #e2e8f0;
}
.stat-stars {
display: flex;
justify-content: center;
gap: 1px;
margin-bottom: 5px;
height:30px;
}
.stat-stars .star {
font-size: 20px;
}
.stat-label {
font-size: 12px;
color: #718096;
font-weight: 500;
}
/* Smooth Opening Animations */
@keyframes fadeInOverlay {
from {
background: rgba(0, 0, 0, 0);
backdrop-filter: blur(0px);
}
to {
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
}
}
@keyframes slideUpScale {
0% {
transform: translateY(50px) scale(0.9);
opacity: 0;
}
70% {
transform: translateY(-10px) scale(1.02);
opacity: 1;
}
100% {
transform: translateY(0) scale(1);
opacity: 1;
}
}
/* Optional: Add closing animation */
.date-picker-overlay.closing {
animation: fadeOutOverlay 0.4s ease-in forwards;
}
.date-picker-container.closing {
animation: slideDownScale 0.5s ease-in forwards;
}
@keyframes fadeOutOverlay {
from {
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
}
to {
background: rgba(0, 0, 0, 0);
backdrop-filter: blur(0px);
}
}
@keyframes slideDownScale {
0% {
transform: translateY(0) scale(1);
opacity: 1;
}
100% {
transform: translateY(50px) scale(0.9);
opacity: 0;
}
}
/* Responsive Design */
@media (max-width: 768px) {
.google-review-header {
flex-direction: column;
gap: 15px;
text-align: center;
}
.google-review-stats {
grid-template-columns: 1fr;
}
.review-author,
.review-source {
flex-direction: column;
align-items: flex-start;
gap: 5px;
}
}
/* Animation for stars */
.star {
animation: starGlow 2s ease-in-out infinite alternate;
}
.star:nth-child(2) { animation-delay: 0.2s; }
.star:nth-child(3) { animation-delay: 0.4s; }
.star:nth-child(4) { animation-delay: 0.6s; }
.star:nth-child(5) { animation-delay: 0.8s; }
@keyframes starGlow {
from { opacity: 0.7; transform: scale(1); }
to { opacity: 1; transform: scale(1.1); }
}
/* NEW STYLES FOR SEARCH BUTTON POSITIONING */
.passenger-search-container {
display: flex;
align-items: flex-end;
gap: 10px;
height: 100%;
position: relative;
top: -11px;
}
.passenger-search-container .passenger-box {
flex: 1;
margin-bottom: 0;
}
.passenger-search-container .search-btn {
flex: 0 0 auto;
margin: 0;
align-self: stretch;
}
.passenger-search-container .theme-btn {
height: 90px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 600;
padding: 0 8px;
white-space: nowrap;
}
@media (max-width: 992px) {
.passenger-search-container {
flex-direction: column;
}
.passenger-search-container .theme-btn {
height: 50px;
width: 100%;
margin-top: 0px;
}
}
/* Popup Styles */
body {
font-family: Arial, sans-serif;
background: #f3f4f6;
}
#popup-overlay {
display: none;
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.6);
align-items: center;
justify-content: center;
z-index: 9999;
}
/* Owl Carousel Customization for Partner Cards */
.partner-card {
position: relative;
margin: 10px;
transition: all 0.3s ease;
}
.partner-card-inner {
position: relative;
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
border: 1px solid #e8f4ff;
transition: all 0.3s ease;
overflow: hidden;
}
.partner-card:hover .partner-card-inner {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 46, 109, 0.2);
}
/* Ribbon Styles */
.partner-ribbon {
position: absolute;
top: 15px;
right: -30px;
padding: 6px 35px;
color: white;
font-size: 12px;
font-weight: 700;
min-width:130px;
text-transform: uppercase;
letter-spacing: 0.5px;
transform: rotate(45deg);
z-index: 2;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.partner-ribbon-discount {
background: linear-gradient(45deg, #FF6B6B, #FF8E8E);
display:active;
}
.partner-ribbon-popular {
background: linear-gradient(45deg, #4ECDC4, #6FFFE0);
display:active;
}
.partner-ribbon-featured {
background: linear-gradient(45deg, #45B7D1, #7CE0FE);
display:active;
}
.partner-ribbon-new {
background: linear-gradient(45deg, #96CEB4, #BAF2D8);
}
/* Price Tag Styles */
.partner-price-tag {
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #0a2c5e, #4da8ff);
color: white;
padding: 0px 16px;
border-radius: 25px;
font-weight: 700;
font-size: 18px;
box-shadow: 0 4px 15px rgba(10, 44, 94, 0.3) none;
z-index: 2;
min-width: 160px;
text-align: center;
transition: all 0.3s ease;
}
.partner-price-tag::before {
content: '';
position: absolute;
top: -7px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #365a7a;
}
.partner-card:hover .partner-price-tag {
background: linear-gradient(135deg, #4da8ff, #0a2c5e) none;
transform: translateX(-50%) scale(1.05) none;
}
.partner-price {
font-family: 'Barlow', sans-serif;
font-weight: 700;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
/* Partner Images */
.partner-card img {
width: 100%;
height: 80px;
object-fit: contain;
margin-bottom: 30px;
transition: all 0.3s ease;
filter: grayscale(0.3);
opacity: 0.8;
}
.partner-card:hover img {
filter: grayscale(0);
opacity: 1;
transform: scale(1.5);
}
/* Responsive Design */
@media (max-width: 768px) {
.partner-ribbon {
font-size: 10px;
padding: 4px 25px;
right: -25px;
}
.date-picker-header h1 {
font-size: 20px;
font-weight: 600;
font-family: 'Barlow', sans-serif;
color:white;
}
.partner-price-tag {
font-size: 12px;
padding: 6px 12px;
min-width: 100px;
}
.partner-card img {
height: 60px;
margin-bottom: 25px;
}
}
/* Animation for Ribbons */
@keyframes ribbonPulse {
0% { transform: rotate(45deg) scale(1); }
50% { transform: rotate(45deg) scale(1.05); }
100% { transform: rotate(45deg) scale(1); }
}
.partner-ribbon {
animation: ribbonPulse 2s ease-in-out infinite;
}
.partner-ribbon-discount {
animation-delay: 0.2s;
}
.partner-ribbon-popular {
animation-delay: 0.4s;
}
.partner-ribbon-featured {
animation-delay: 0.6s;
}
.partner-ribbon-new {
animation-delay: 0.8s;
}
.popup {
width: 500px;
height: 600px;
background: #fff;
border-radius: 10px;
box-shadow: 0 6px 18px rgba(0,0,0,0.15);
padding: 30px;
position: relative;
top: 0%;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 8px;
border-bottom: 2px solid rgb(0, 89, 255);
}
.close-btn {
position: absolute;
top: 10px;
right: 12px;
font-size: 30px;
font-weight: bold;
color: #555;
cursor: pointer;
background: none;
border: none;
}
.close-btn:hover { color: #66aeff; }
.brand-logo {
display: block;
width: 200px;
height: 100px;
margin: 0 auto;
object-fit: contain;
}
.popup-header {
display: flex;
align-items: center;
gap: 12px;
padding: 4px 4px 0 4px;
}
.popup-header img.agent {
width: 80px;
height: 80px;
border-style: solid;
border-color: #e5efff;
border-radius: 50%;
object-fit: cover;
flex: 0 0 70px;
}
.popup-header-content h1 {
font-size: 30px;
margin: 0;
color: #1f2937;
line-height: 1;
}
@media (max-width: 767px) {
.popup-header-content h1 {
font-size: 20px;
margin: 0;
color: #1f2937;
line-height: 1;
}
}
.popup-header-content p {
font-size: 20px;
margin: 2px 0 0 0;
color: #374151;
line-height: 1;
padding-top: 10px;
}
.popup-body {
flex: 1 1 auto;
overflow-y: auto;
padding-right: 6px;
}
.features {
list-style: none;
padding-top: 20px;
margin: 10px 0 0 0;
font-size: 18px;
color: #283350;
}
.features li {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 8px;
}
.features .check {
width: 20px;
height: 20px;
margin-left: 15px;
border-radius: 50%;
background: #005de7;
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
flex-shrink: 0;
margin-top: 2px;
}
.popup-footer {
flex: 0 0 auto;
padding-top: 6px;
}
.phone-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 20px;
background: #edfaff;
color: #2b2f3b;
border: 1px solid #4fcbfc;
font-size: 28px;
font-weight: 700;
padding: 10px 14px;
border-radius: 40px;
text-decoration: none;
width: 100%;
box-sizing: border-box;
}
.phone-btn .icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: #005de7;
color: #fff;
border-radius: 50%;
font-size: 30px;
}
.phone-btn:hover {
background: #6fd9fa;
text-decoration: none;
}
/* Google Review Styles */
.google-review-section {
background: white;
border-radius: 12px;
padding: 25px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1)none;
margin-bottom: 10px;
border: 1px solid #e8f4ff none;
}
.google-review-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0px;
padding-bottom: 15px;
border-bottom: none;
}
.google-logo {
display: flex;
align-items: center;
gap: 10px;
}
.google-logo svg {
width: 100px;
height: 40px;
}
.google-text {
font-size: 18px;
font-weight: 600;
color: #4285F4;
font-family: 'Google Sans', Arial, sans-serif;
}
.google-rating {
display: flex;
align-items: center;
gap: 10px;
}
.stars {
font-size:24px;
display: flex;
gap: 2px;
}
.live-google-review {
background: #f8fafc;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
border-left: 4px solid #4285F4;
}
.review-text {
font-size: 16px;
line-height: 1.6;
color: #2d3748;
margin-bottom: 15px;
}
.review-author {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.review-author strong {
color: #0a2c5e;
font-size: 16px;
}
.review-date {
color: #718096;
font-size: 14px;
}
.review-source {
display: flex;
align-items: center;
gap: 8px;
}
.source-badge {
background: #34A853;
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
}
.source-company {
color: #718096;
font-size: 14px;
}
.google-review-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin-top: 20px;
}
.stat-item {
text-align: center;
padding: 0px;
background: #f7f9fc;
border-radius: 8px;
border: 1px solid #e2e8f0;
}
.stat-number {
font-size: 24px;
font-weight: 700;
color: #0a2c5e;
margin-bottom: 10px;
height:30px;
}
.stat-stars {
display: flex;
justify-content: center;
gap: 1px;
margin-bottom: 5px;
}
.stat-stars .star {
font-size: 24px;
}
.stat-label {
font-size: 14px;
color: #718096;
font-weight: 500;
}
/* Add this to your CSS */
.form-group-icon input.date-picker {
cursor: pointer !important;
}
/* For all clickable inputs in your search forms */
.search-form input[type="text"] {
cursor: pointer;
}
/* Specifically for date inputs */
input.date-picker,
input.journey-date,
input.return-date {
cursor: pointer !important;
}
/* Testimonial Slider Styles */
.testimonial-slider {
position: relative;
}
.testimonial-single {
background: white;
border-radius: 12px;
padding: 30px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
margin: 10px;
border: 1px solid #e8f4ff;
}
.testimonial-content {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.testimonial-author-img {
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
margin-right: 15px;
}
.testimonial-author-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.testimonial-author-info h4 {
margin: 0;
color: #0a2c5e;
font-size: 18px;
}
.testimonial-author-info p {
margin: 5px 0 0 0;
color: #718096;
font-size: 14px;
}
.testimonial-quote {
position: relative;
margin-bottom: 20px;
}
.testimonial-quote p {
font-size: 16px;
line-height: 1.6;
color: #2d3748;
margin: 0;
}
.testimonial-quote-icon {
position: absolute;
top: -10px;
right: 0;
width: 60px;
height: 60px;
}
.testimonial-rate {
color: #FFB400;
font-size: 16px;
}
/* Responsive Design */
@media (max-width: 768px) {
.google-review-header {
flex-direction: column;
gap: 15px;
text-align: center;
}
.google-review-stats {
grid-template-columns: 1fr;
}
.review-author,
.review-source {
flex-direction: column;
align-items: flex-start;
gap: 5px;
}
.testimonial-content {
flex-direction: column;
text-align: center;
}
.testimonial-author-img {
margin-right: 0;
margin-bottom: 10px;
}
}
/* Animation for stars */
.star {
animation: starGlow 2s ease-in-out infinite alternate;
}
.star:nth-child(2) { animation-delay: 0.2s; }
.star:nth-child(3) { animation-delay: 0.4s; }
.star:nth-child(4) { animation-delay: 0.6s; }
.star:nth-child(5) { animation-delay: 0.8s; }
@keyframes starGlow {
from { opacity: 0.7; transform: scale(1); }
to { opacity: 1; transform: scale(1.1); }
}
@media (max-width:600px){
.popup { width: 90%; height: auto; }
}
/* Auto-save clear styles */
.form-group-icon input.auto-save-clear {
background-color: #fff !important;
}
.form-group-icon input.auto-save-clear:focus {
background-color: #fff !important;
}
/* Updated styles for location icons and date picker icons */
.form-group-icon {
position: relative;
display: flex;
align-items: center;
padding-left: 5px;
}
.form-group-icon i {
position: absolute;
left: 15px;
z-index: 2;
color: #0a2c5e;
}
.form-group-icon input {
padding-left: 40px !important;
height:45px;
outline-offset: -2px #4da8ff !important;
}
.form-group-icon input.auto-save-clear {
cursor: text !important;
}
.form-group-icon input.auto-save-clear {
background-color: #fff !important;
}
/* Ensure date picker icons are visible and properly positioned */
.search-form-date .form-group-icon i {
left: 15px;
}
/* Remove clear buttons from inputs */
.form-group-icon .clear-button {
display: none !important;
}
/* Time picker integration in car search */
.time-picker-integrated {
margin-top: 10px;
}
.time-picker-integrated select {
width: 100%;
padding: 8px 12px;
border: 1px solid #ced4da;
border-radius: 4px;
background-color: white;
}
/* Car search layout adjustments */
.car-search-wrapper .row {
align-items: flex-end;
}
.car-search-wrapper .col-lg-2 {
margin-bottom: 0;
}
.car-search-wrapper .search-btn {
margin-top: 0;
align-self: flex-end;
}
/* Enhanced dropdown styling */
.flexible-flights-option select {
border: none !important;
border-radius: 8px !important;
box-shadow: none 0 4px 15px rgba(0, 46, 109, 0.15) !important;
padding: 12px 40px !important;
background: white !important;
font-family: 'Barlow', sans-serif !important;
color: #626262 !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
appearance: none !important;
background-image: url("data:image/svg+xml;charset=US-ASCII,") !important;
background-repeat: no-repeat !important;
background-position: right 15px center !important;
background-size: 12px !important;
outline: none !important;
min-width: 180px;
}
.Cabin-Class-option select {
border: none !important;
border-radius: 8px !important;
box-shadow: none 0 4px 15px rgba(0, 46, 109, 0.15) !important;
padding: 12px 40px !important;
background: white !important;
font-family: 'Barlow', sans-serif !important;
font-size: 16px;
font-weight:500;
color: #626262 !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
appearance: none !important;
background-image: url("data:image/svg+xml;charset=US-ASCII,") !important;
background-repeat: no-repeat !important;
background-position: right 15px center !important;
background-size: 12px !important;
outline: none !important;
min-width: 180px;
}
.flexible-flights-option select:hover {
box-shadow: 0 6px 20px rgba(0, 46, 109, 0.2) !important;
}
.flexible-flights-option select:focus {
box-shadow: 0 6px 20px rgba(0, 46, 109, 0.25) !important;
}
.direct-flights-option {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 15px;
background: #f8f9fa;
border-radius: 8px;
margin-right: 20px;
}
.airport-suggestions {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
border-radius: 8px;
max-height: 200px;
overflow-y: auto;
z-index: 1000;
display: none;
box-shadow: 0 4px 15px rgba(0, 46, 109, 0.15);
border: none;
}
.airport-suggestions div {
padding: 12px 15px;
cursor: pointer;
border-bottom: 1px solid #f0f4f8;
font-family: 'Barlow', sans-serif;
color: #0a2c5e;
transition: background-color 0.3s ease;
}
.airport-suggestions div:hover {
background-color: #f0f4f8 !important;
}
/* Improved input clearing functionality */
.form-group-icon input.auto-save-clear {
cursor: text !important;
}
.form-group-icon input.auto-save-clear:focus {
outline: 2px solid #4da8ff !important;
outline-offset: -2px !important;
}
/* Equal Height Container */
.equal-height-container {
display: flex;
align-items: stretch;
}
.equal-height-container > [class*="col-"] {
display: flex;
flex-direction: column;
}
/* Download Image Container */
.download-img-container {
background: none linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) none;
border-radius: 20px;
padding: 40px 30px;
box-shadow: none 0 10px 30px rgba(0, 46, 109, 0.1);
border: none 1px solid #e2e8f0;
display: flex;
align-items: center;
justify-content: center;
height: 80%;
margin: 0 10px;
}
.download-img {
text-align: center;
width: 100%;
}
.download-img img {
max-width: 100%;
height: auto;
border-radius: 15px;
box-shadow: none;
transition: all 0.3s ease none;
}
.download-img img:hover {
transform: translateY(-5px) none;
box-shadow: 0 20px 45px rgba(0, 0, 0, 0);
}
/* Download Content Container */
.download-content-container {
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
border-radius: 20px;
padding: 40px 35px;
box-shadow: 0 10px 30px rgba(0, 46, 109, 0.1);
border: 1px solid #e2e8f0;
height: 80%;
margin: 0 10px;
display: flex;
align-items: center;
}
.download-content {
width: 100%;
}
.download-content .site-heading {
text-align: left;
}
.site-title-tagline {
display: inline-block;
background: linear-gradient(135deg, #4da8ff, #0a2c5e);
color: white;
padding: 6px 40px;
border-radius: 20px;
font-size: 18px;
font-weight: 600;
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.site-title-tagline-download {
display: inline-block;
background: linear-gradient(135deg, #4da8ff, #0a2c5e);
color: white;
padding: 6px 16px;
border-radius: 20px;
font-size: 24px;
font-weight: 600;
margin-bottom: 50px;
text-transform: uppercase;
letter-spacing: 0.5px;
text-align: center;
}
.download-content .site-title {
font-size: 22px;
line-height: 1.3;
margin-bottom: 20px;
color: #0a2c5e;
font-weight: 700;
font-family: 'Barlow', sans-serif;
}
.download-content p {
font-size: 15px;
line-height: 1.6;
color: #64748b;
margin-bottom: 25px;
}
.download-feature {
list-style: none;
padding: 0;
margin-bottom: 30px;
}
.download-feature li {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
color: #475569;
font-weight: 500;
font-size: 15px;
}
.download-feature li i {
color: #4da8ff;
font-size: 14px;
background: #e1f0ff;
width: 22px;
height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.download-link {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.download-link a {
transition: all 0.3s ease;
border-radius: 12px;
overflow: hidden;
box-shadow: none;
flex: 1;
min-width: 140px;
max-width: 160px;
}
.download-link a:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.download-link img {
width: 100%;
height: auto;
border-radius: 12px;
}
/* QR Code Container */
.qr-code-container {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
border-radius: 20px;
padding: 15px 30px;
box-shadow: 0 10px 30px rgba(0, 46, 109, 0.1);
border: 1px solid #e2e8f0;
display: flex;
align-items: center;
justify-content: center;
height: 80%;
margin: 0 10px;
}
.qr-code-box {
position: relative; /* Essential for the scan line to stay inside */
width: 170px; /* Match your design width */
height: 170px; /* Match your design height */
margin: 0 auto;
background: #fff;
padding: 10px; /* Adds a white border around the QR */
border-radius: 10px;
overflow: hidden; /* Keeps the scan line from going outside the box */
display: flex;
align-items: center;
justify-content: center;
}
.actual-qr-image {
width: 100%;
height: 100%;
object-fit: contain; /* Ensures the QR code stays a perfect square */
display: block;
}
/* Ensure the scan line moves OVER the image */
.qr-scan-line {
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: #007da1; /* Or your theme color */
box-shadow: 0 0 8px #007da1;
z-index: 5;
animation: scanAnimation 3s infinite linear;
}
@keyframes scanAnimation {
0% { top: 0; }
50% { top: 100%; }
100% { top: 0; }
}
.qr-code-card {
background: white;
border-radius: 16px;
padding: 30px 25px;
box-shadow: 0 8px 25px rgba(0, 46, 109, 0.15) none;
border: 1px solid #e2e8f0 none;
text-align: center;
position: relative;
overflow: hidden;
width: 100%;
max-width: 360px;
height: 100%;
}
.qr-code-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #4da8ff, #0a2c5e, #4da8ff);
background-size: 200% 100%;
animation: gradientShift 3s ease infinite;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.qr-code-header {
margin-bottom: 5px;
}
.qr-code-header h4 {
color: #0a2c5e;
font-size: 20px;
font-weight: 700;
margin-bottom: 5px;
font-family: 'Barlow', sans-serif;
}
.qr-code-header p {
color: #64748b;
font-size: 14px;
margin: 0;
font-weight: 500;
}
.qr-code-box {
position: relative;
background: #f8fafc;
padding: 10px;
border-radius: 16px;
box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.05);
border: 2px solid #e2e8f0;
margin-bottom: 10px;
overflow: hidden;
}
.qr-code-placeholder {
width: 200px;
height: 200px;
background: white;
border-radius: 12px;
position: relative;
border: 1px solid #e2e8f0;
margin: 0 auto;
}
.qr-code-design {
width: 100%;
height: 100%;
background:
radial-gradient(circle at 50% 50%, #f1f5f9 0%, #ffffff 100%);
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.qr-corner {
position: absolute;
width: 35px;
height: 35px;
border: 4px solid #0a2c5e;
}
.qr-corner-tl {
top: 15px;
left: 15px;
border-right: none;
border-bottom: none;
}
.qr-corner-tr {
top: 15px;
right: 15px;
border-left: none;
border-bottom: none;
}
.qr-corner-bl {
bottom: 15px;
left: 15px;
border-right: none;
border-top: none;
}
.qr-pattern {
width: 120px;
height: 120px;
background:
linear-gradient(45deg, #0a2c5e 25%, transparent 25%),
linear-gradient(-45deg, #0a2c5e 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #0a2c5e 75%),
linear-gradient(-45deg, transparent 75%, #0a2c5e 75%);
background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
opacity: 0.7;
}
.qr-text {
position: absolute;
bottom: 10px;
left: 0;
right: 0;
text-align: center;
font-size: 12px;
color: #64748b;
font-weight: 600;
}
.qr-scan-line {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #4da8ff, transparent);
animation: scan 2s ease-in-out infinite;
}
@keyframes scan {
0% {
transform: translateY(0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translateY(200px);
opacity: 0;
}
}
.qr-code-footer {
display: flex;
flex-direction: column;
gap: 15px;
}
.qr-instruction {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
color: #64748b;
font-weight: 600;
font-size: 14px;
background: #f8fafc;
padding: 2px 15px;
border-radius: 10px;
border: 1px solid #e2e8f0;
}
.qr-instruction i {
color: #4da8ff;
font-size: 16px;
}
.qr-platforms {
display: flex;
justify-content: center;
gap: 12px;
}
.qr-platform-badge {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
}
.qr-platform-badge.android {
background: linear-gradient(135deg, #3DDC84, #2BB673);
}
.qr-platform-badge.ios {
background: linear-gradient(135deg, #000000, #333333);
}
.qr-platform-badge:hover {
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
/* Responsive Design */
@media (max-width: 1199px) {
.download-content .site-title {
font-size: 24px;
}
@media (max-width: 991px) {
.phone-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 100px;
background: #edfaff;
color: #2b2f3b;
border: 1px solid #4fcbfc;
font-size: 20px;
font-weight: 700;
padding: 10px 14px;
border-radius: 40px;
text-decoration: none;
width: 100%;
box-sizing: border-box;
}
}
.download-img-container,
.download-content-container,
.qr-code-container {
padding: 35px 25px;
}
}
@media (max-width: 991px) {
.equal-height-container {
flex-direction: column;
gap: 30px;
}
.equal-height-container > [class*="col-"] {
margin: 0;
}
.download-img-container,
.download-content-container,
.qr-code-container {
margin: 0;
padding: 40px 30px;
}
.download-content {
text-align: center;
}
.download-link {
justify-content: center;
}
.qr-code-card {
max-width: 100%;
}
}
@media (max-width: 768px) {
.download-content .site-title {
font-size: 22px;
}
.download-img-container,
.download-content-container,
.qr-code-container {
padding: 30px 20px;
}
.qr-code-placeholder {
width: 2000px;
height: 2000px;
}
.download-link a {
min-width: 130px;
max-width: 140px;
}
}
@media (max-width: 576px) {
.download-content .site-title {
font-size: 20px;
}
.download-link {
flex-direction: column;
align-items: center;
}
.download-link a {
max-width: 200px;
width: 100%;
}
.qr-code-card {
padding: 25px 20px;
}
.qr-code-box {
padding: 15px;
}
}
@media (max-width: 991px) {
.phone-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 20px;
background: #edfaff;
color: #2b2f3b;
border: 1px solid #4fcbfc;
font-size: 20px;
font-weight: 700;
padding: 10px 14px;
border-radius: 40px;
text-decoration: none;
width: 100%;
box-sizing: border-box;
}
}
/* Animation Effects */
.download-img-container,
.download-content-container,
.qr-code-container {
transform: translateY(-5px);
box-shadow: none;
transition: all 0.3s;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) none;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Hover Effects */
.download-img-container:hover,
.download-content-container:hover,
.qr-code-container:hover {
transform: translateY(-5px) none;
box-shadow: 0 15px 40px rgba(0, 46, 109, 0.2) none;
transition: all 0.3s ease none;
}
.translation-loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.95);
display: none;
justify-content: center;
align-items: center;
z-index: 9999;
flex-direction: column;
backdrop-filter: blur(5px);
}
.translation-loading {
text-align: center;
background: white;
padding: 40px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
border: 2px solid #0a2c5e;
}
.loading-spinner {
width: 50px;
height: 50px;
border: 4px solid #f3f3f3;
border-top: 4px solid #0a2c5e;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 20px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.translation-loading span {
color: #0a2c5e;
font-weight: 600;
font-size: 16px;
}
.translation-notification {
position: fixed;
top: 20px;
right: 20px;
background: linear-gradient(135deg, #4CAF50, #45a049);
color: white;
padding: 15px 25px;
border-radius: 8px;
z-index: 10000;
font-weight: bold;
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
font-size: 14px;
animation: slideIn 0.5s ease-out;
}
@keyframes slideIn {
from { transform: translateX(100px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.no-translate {
translate: none !important;
}
/* RTL support enhancements */
body[style*="direction: rtl"] .header-top-right {
flex-direction: row-reverse;
}
body[style*="direction: rtl"] .navbar-nav {
flex-direction: row;
padding-left: 100px;
padding-right: 100px;
}
/* === Dual banner start here) === */
.custom-container-1540 {
max-width: 1540px;
margin: 0 auto;
padding: 0 15px;
width: 100%;
}
.dual-banner-wrapper {
display: flex;
justify-content: space-between;
gap: 30px;
align-items: stretch;
width: 100%;
}
/* === 2. LEFT BANNER STYLES (UNCHANGED) === */
.signup-banner-container {
display: flex !important;
flex: 1;
height: 240px !important;
background: #fff;
border: 1px solid #86e7ff;
border-radius: 12px;
overflow: hidden !important;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}
.banner-image-container {
max-width: 400px !important;
width: 100% !important;
height: 100% !important;
position: relative;
overflow: hidden;
}
.banner-image-container img { width: 100%; height: 100%; object-fit: cover; }
.banner-content-container { flex: 1; padding: 20px; display: flex; flex-direction: column; justify-content: center; }
.banner-content-container h1 { font-size: 20px; color: #1a3a8f; margin-bottom: 8px; line-height: 1.2; font-weight: 800; }
.banner-content-container h2 { font-size: 17px; color: #444; margin-bottom: 15px; font-weight: 500; }
.highlight { color: #1a3a8f; font-weight: bold; }
.banner-form { display: flex; height: 48px; margin-bottom: 10px; }
.banner-form input { flex: 1; padding: 5px; border: 1px solid #ccc; border-radius: 8px 0 0 8px; }
.banner-form button { background: #004c9c; color: #fff; border: none; padding: 0 5px; border-radius: 0 8px 8px 0; font-weight: 600; cursor: pointer; }
.banner-small { font-size: 12px; color: #666; }
/* === 3. RIGHT BANNER STYLES (NEW - CONTACT CARD) === */
.contact-banner-container {
display: flex;
flex: 1; /* Equal width to left banner */
height: 240px; /* Equal height to left banner */
background: #fff; /* White background for readability */
border: 1px solid #86e7ff; /* Dark Blue Border */
border-radius: 12px;
overflow: hidden;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}
/* Image Side (Left) */
.contact-image-side {
width: 35%; /* Same width proportion as left banner */
height: 100%;
position: relative; /* Necessary for the overlay to position correctly */
overflow: hidden;
}
.contact-image-side img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Content Side (Right) */
.contact-content-side {
flex: 1;
padding: 15px 20px;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Typography */
.contact-content-side h1 {
font-size: 20px;
color: #0a2c5e; /* Brand Blue */
font-weight: 800;
margin-bottom: 4px;
line-height: 1.2;
}
.contact-subtitle {
font-size: 14px;
color: #cc7400; /* Accent Color */
font-weight: 700;
margin-bottom: 10px;
text-transform: uppercase;
}
/* The Feature List */
.contact-features {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 4px; /* Space between items */
}
.contact-features li {
font-size: 17px; /* Small font to fit all items */
color: #444;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
line-height: 1.3;
}
.contact-features li i {
color: #00b894; /* Green Checkmark */
font-size: 17px;
}
/* Terms Link */
.contact-terms {
margin-top: 8px;
font-size: 14px;
text-align: right;
}
.contact-terms a {
color: #535353;
text-decoration: underline;
}
.contact-terms a:hover {
color: #0a2c5e;
}
/* 1. Ensure the section is contained */
/* Mobile Responsive */
@media (max-width: 991px) {
.dual-banner-wrapper { flex-direction: column; height: auto; }
.signup-banner-container, .contact-banner-container {
width: 100%;
height: 240px !important;
height: 240px;
}
}
/* 1. Shake the icon inside the blue circle */
.contact-banner-container .phone-icon-circle i {
display: inline-block;
animation: contact-phone-vibrate 2s infinite ease-in-out;
transform-origin: center;
}
/* 2. Add a pulsing glow effect to the blue circle itself */
.contact-banner-container .phone-icon-circle {
position: relative;
animation: contact-circle-pulse 2s infinite;
z-index: 1;
}
/* --- ANIMATION KEYFRAMES --- */
/* The Ringing/Vibration Effect */
@keyframes contact-phone-vibrate {
0% { transform: rotate(0); }
5% { transform: rotate(-15deg); }
10% { transform: rotate(15deg); }
15% { transform: rotate(-15deg); }
20% { transform: rotate(15deg); }
25% { transform: rotate(-15deg); }
30% { transform: rotate(0); }
100% { transform: rotate(0); }
}
/* The Outer Glowing Pulse Effect */
@keyframes contact-circle-pulse {
0% {
box-shadow: 0 0 0 0 rgba(0, 93, 255, 0.7);
}
70% {
box-shadow: 0 0 0 15px rgba(0, 93, 255, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(0, 93, 255, 0);
}
}
/* Optional: Make it vibrate faster when the user hovers over it */
.contact-banner-container .phone-wrapper:hover .phone-icon-circle i {
animation-duration: 0.5s;
}
/* =========================================
NEW STYLES FOR NUMBER & ICON OVERLAY
========================================= */
.image-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5); /* Dark overlay for contrast */
/* This pushes the .phone-wrapper to the BOTTOM */
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
z-index: 2;
padding-bottom: 20px; /* Space from the bottom edge */
}
/* This puts the Icon and Number in ONE line (Row) */
.phone-wrapper {
display: flex;
align-items: center; /* Vertically centers them */
justify-content: center;
gap: 12px; /* Space between Icon and Number */
}
.phone-icon-circle {
background-color: #1e88e575;
color: #fff;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
/* Removed margins because we use 'gap' in the wrapper now */
}
/* Rotates the icon inside the circle */
.phone-icon-circle i.rotated {
transform: rotate(90deg); /* Rotates 90 degrees to the right */
}
.phone-icon-circle i {
transform: rotate(90deg);
}
.overlay-number {
font-size: 26px;
font-weight: 700;
color: #fff;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
line-height: 1;
}
/* =========================================
NEW STYLES FOR NUMBER & ICON OVERLAY END
========================================= */
/* =========================================
NEW FLIGHT OPTIONS BAR CSS
========================================= */
/* Container */
.flight-options-bar {
display: flex;
align-items: center;
gap: 10px; /* Space between the two dropdowns */
margin-bottom: 20px;
padding-left: 5px;
position: relative;
z-index: 100; /* Ensure dropdowns sit on top */
width:50%;
}
/* The Trigger Buttons (Text Only style) */
.option-trigger {
background: transparent;
border: none;
font-size: 16px;
font-weight: 500;
color: #4f5050; /* Brand Blue */
display: flex;
align-items: center;
gap: 8px;
padding: 5px 0;
cursor: pointer;
}
.option-trigger i {
font-size: 16px;
color: #4f5050;
transition: transform 0.3s;
}
/* Rotate arrow when open */
.dropdown.show .option-trigger i {
transform: rotate(180deg);
}
/* Dropdown Menu Styling */
.custom-dropdown .dropdown-menu {
border-radius: 12px;
border: 1px solid #eee;
box-shadow: 0 5px 25px rgba(0,0,0,0.15);
padding: 10px;
margin-top: 10px !important;
min-width: 180px;
}
/* Trip Type Items */
.custom-dropdown .dropdown-item {
padding: 8px 15px;
font-size: 14px;
font-weight: 500;
border-radius: 6px;
color: #333;
transition: all 0.2s;
}
.custom-dropdown .dropdown-item:hover,
.custom-dropdown .dropdown-item.active {
background-color: #f0f7ff; /* Light Blue Hover */
color: #4f5050;
font-weight: 600;
}
/* More Options Menu Specifics */
.more-options-menu {
min-width: 260px !important;
padding: 0px !important;
}
.more-options-menu .form-check-input {
cursor: pointer;
border-color: #ccc;
}
.more-options-menu .form-check-input:checked {
background-color: #0a2c5e;
border-color: #0a2c5e;
}
.more-options-menu .form-check-label {
cursor: pointer;
font-size: 14px;
color: #555;
font-weight: 500;
}
.option-trigger {
font-size: 14px;
background: #f4f7fa; /* Grey Pill on Mobile */
padding: 8px 15px;
border-radius: 8px;
}
/* Hides the default Bootstrap arrow so only the custom one shows */
.option-trigger::after {
display: none !important;
}
/* =========================================
UPDATED FLIGHT OPTIONS CSS
========================================= */
/* 1. Widen the Dropdown to fit side-by-side */
.more-options-menu {
min-width: 450px !important; /* Increased width */
padding: 20px !important;
overflow: visible !important; /* FIX: Allows Cabin Class dropdown to show fully */
}
/* 2. Create the 2-Column Grid */
.flight-options-grid {
display: flex;
align-items: flex-start;
}
.options-column {
flex: 1; /* Each column takes 50% width */
}
/* 3. Style Checkboxes */
.more-options-menu .form-check {
margin-bottom: 0px !important;
}
.more-options-menu .form-check-label {
cursor: pointer;
font-size: 14px;
color: #333;
white-space: nowrap;
}
.more-options-menu .form-check-input {
cursor: pointer;
border-color: #bbb;
}
.more-options-menu .form-check-input:checked {
background-color: #0a2c5e;
border-color: #0a2c5e;
}
/* 4. Style Cabin Class Select */
.cabin-select-group .form-select {
font-size: 14px;
border-radius: 6px;
border-color: #ced4da;
padding: 8px 30px 8px 10px;
cursor: pointer;
background-color: #fff;
/* Ensure standard appearance to avoid clipping */
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 16px 12px;
}
.form-select {
--bs-form-select-bg-img: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e);
display: block;
width: 400px;
padding: .375rem 2.25rem .375rem .75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: var(--bs-body-color);
-webkit-appearance: none;
-moz-appearance: none;
margin-left: -33px;
appearance: none;
background-color: var(--bs-body-bg);
background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
background-repeat: no-repeat;
background-position: right .75rem center;
background-size: 16px 12px;
border: var(--bs-border-width) solid var(--bs-border-color);
border-radius: var(--bs-border-radius);
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.cabin-select-group .form-select:focus {
border-color: #0a2c5e;
box-shadow: 0 0 0 0.2rem rgba(10, 44, 94, 0.15);
}
/* 5. Mobile Responsive Fix */
@media (max-width: 768px) {
.more-options-menu {
min-width: 290px !important;
}
.flight-options-grid {
flex-direction: column;
gap: 15px;
}
.options-column {
width: 100%;
border-right: none !important;
padding-right: 0 !important;
padding-left: 0 !important;
}
}
/* Fix for Flight + Hotel Passenger Box Width */
#pills-3 .passenger-box {
width: 300px !important;
min-width: 300px !important;
flex: none !important;
}
/* ==================================================
FIX FOR FLIGHT + HOTEL PASSENGER & SEARCH BUTTON
================================================== */
/* 1. Reset the Container to keep elements inside the column */
#pills-3 .passenger-search-container {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 8px; /* Space between input and button */
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
position: relative;
left:-12px;
}
/* 2. Fix the Passenger Box (Input) */
#pills-3 .passenger-box {
flex: 1; /* Grow to fill available space */
min-width: 0; /* Prevent flexbox overflow */
margin: 0 !important; /* Remove negative margins causing overlap */
border: 1px solid rgb(205, 233, 255);
}
/* 3. Fix the Input Field inside to ensure it fits */
#pills-3 .passenger-box .form-group-icon {
width: 100% !important;
padding-right:0px;
padding-left:0px;
background: white;
border-radius: 12px;
height: 45px;
}
/* 4. Fix the Search Button (Stop it from floating/overlapping) */
#pills-3 .search-btn {
flex: 0 0 auto; /* Don't shrink or grow */
width: auto !important;
margin: 0 !important;
position: static !important; /* Stop absolute positioning */
transform: none !important;
}
/* 5. Style the button itself to match height */
#pills-3 .search-btn .theme-btn {
position: static !important; /* Stop absolute positioning */
transform: none !important;
height: 90px !important; /* Match input height */
padding: 0 8px !important;
display: flex;
align-items: center;
justify-content: center;
margin: 0 !important;
border: none;
}
/* Highlight the box when the dropdown is OPEN (.show) */
.passenger-box.show .input-box-style,
.passenger-box.show .form-group-icon {
border-color: #0a2c5e !important; /* Blue Border */
box-shadow: 0 0 0 1px #0a2c5e !important; /* Sharp Outline */
background-color: #fff !important; /* White Background */
transition: all 0.3s ease;
}
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
width: 100%;
padding-right: calc(var(--bs-gutter-x) * .5);
padding-left: calc(var(--bs-gutter-x) * .5);
margin-right: auto !important;
margin-left: auto !important;
}
/* Custom Flex Layout for Flight Options dropdown */
.flight-options-flex {
display: flex;
gap: 10px;
width: 100%;
}
.flight-options-header {
display: flex;
justify-content: start;
margin-bottom: 20px;
width: 100%;
gap: 120px;
}
.flight-options-column {
flex: 1;
display: flex;
flex-direction: column;
}
.flight-options-title {
font-size: 15px;
font-weight: bold;
color: #494949;
margin: 0;
text-align: center;
}
.flight-options-left {
padding-right: 20px;
border-right: 1px solid #e0e0e0;
}
.flight-options-right {
padding-left: 20px;
}
.checkbox-group {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 20px;
flex-grow: 1;
}
/* FIX: Consistent checkbox sizing */
.checkbox-item {
display: flex;
align-items: center;
gap: 8px;
}
.checkbox-item input[type="checkbox"] {
cursor: pointer;
margin: 0;
width: 16px;
height: 16px;
flex-shrink: 0;
}
.checkbox-item label {
cursor: pointer;
font-size: 14px;
color: #333;
margin: 0;
line-height: 1.4;
}
.clear-btn-1 {
background: transparent;
border: 1px solid #a71423;
color: #a71423;
padding: 8px 16px;
border-radius: 4px;
font-size: 15px;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
margin-top: auto; /* This pushes button to bottom */
}
.clear-btn-1:hover {
background: #dc3545;
color: white;
}
.done-section {
margin-top: 20px;
padding-top: 15px;
border-top: 1px solid #e0e0e0;
text-align: right;
}
.done-btn {
background: #0a2c5e;
color: white;
border: none;
padding: 6px 20px;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
transition: background 0.3s ease;
}
.done-btn:hover {
background: #083a7c;
}
/* Ensure dropdown container has proper styling */
.more-options-menu {
position: absolute;
background: white;
border-radius: 8px;
box-shadow: 0 5px 25px rgba(0,0,0,0.15);
z-index: 1000;
min-width: 450px;
}
/* Selected Options Display */
.selected-options-container {
background: #f8f9fa;
border-radius: 8px;
padding: 12px 15px;
margin-bottom: 15px;
border: 1px solid #e9ecef;
}
.selected-options-title {
font-size: 14px;
font-weight: 600;
color: #495057;
margin-bottom: 8px;
}
.selected-options-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.option-tag {
background: #0a2c5e;
color: white;
padding: 4px 10px;
border-radius: 15px;
font-size: 12px;
font-weight: 500;
display: flex;
align-items: center;
gap: 5px;
}
.option-tag .remove-btn {
background: none;
border: none;
color: white;
cursor: pointer;
font-size: 14px;
padding: 0;
margin-left: 3px;
}
.option-tag .remove-btn:hover {
color: #ff6b6b;
}
.no-options {
font-size: 13px;
color: #6c757d;
font-style: italic;
}
/* Style for when options are selected */
.option-trigger.active-selection {
color: #0a2c5e;
font-weight: 700;
background-color: #e1f0ff;
padding: 8px 15px;
border-radius: 20px;
border: 1px solid #0a2c5e;
}
/* Custom Flex Layout for Flight Options dropdown end */
/* =========================================
FIX FLIGHT MORE OPTIONS DROPDOWN LAYOUT
========================================= */
/* Main dropdown container */
.more-options-menu {
min-width: 600px !important;
padding: 20px !important;
}
/* Side by side layout */
.flight-options-flex {
display: flex !important;
gap: 10px !important;
width: 100% !important;
}
/* Each column */
.flight-options-column-left {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
padding-right: 20px !important;
border-right: 1px solid #e2e8f0 !important;
}
.flight-options-column-left {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
padding-right: 20px !important;
border-right: 1px solid #e2e8f0 !important;
}
/* Left column - Flight Options */
.flight-options-left {
padding-right: 20px !important;
border-right: 1px solid #e2e8f0 !important;
}
/* Right column - Cabin Class */
.flight-options-right {
padding-left: 20px !important;
}
/* Headers layout */
.flight-options-header {
display: flex !important;
justify-content: space-between !important;
margin-bottom: 20px !important;
width: 100% !important;
}
.flight-options-title {
font-size: 16px !important;
font-weight: 700 !important;
color: #0a2c5e !important;
margin: 0 !important;
}
/* Checkbox groups */
.checkbox-group {
display: flex !important;
flex-direction: column !important;
gap: 15px !important;
margin-bottom: 20px !important;
flex-grow: 1 !important;
margin-top: 20px;
}
.checkbox-item {
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.checkbox-item input[type="checkbox"] {
width: 18px !important;
height: 18px !important;
cursor: pointer !important;
}
.checkbox-item label {
cursor: pointer !important;
font-size: 14px !important;
color: #333 !important;
margin: 0 !important;
}
/* Clear buttons */
.clear-btn-1 {
background: transparent !important;
border: 1px solid #dc3545 !important;
color: #dc3545 !important;
padding: 8px 16px !important;
border-radius: 6px !important;
font-size: 14px !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
width: 100% !important;
margin-top: auto !important;
}
.clear-btn-1:hover {
background: #dc3545 !important;
color: white !important;
}
/* Done button */
.done-section {
margin-top: 20px !important;
padding-top: 15px !important;
border-top: 1px solid #e2e8f0 !important;
text-align: right !important;
}
/* Mobile responsive */
@media (max-width: 768px) {
.more-options-menu {
min-width: 300px !important;
}
.flight-options-flex {
flex-direction: column !important;
gap: 20px !important;
}
.flight-options-left {
padding-right: 0 !important;
border-right: none !important;
padding-bottom: 20px !important;
border-bottom: 1px solid #e2e8f0 !important;
}
.flight-options-right {
padding-left: 0 !important;
}
}
/* =========================================
MOBILE RESPONSIVE FIXES
(Paste this at the bottom of your