.style-deals-global-wrapper { background-color: #fff; }.style-master-package-canvas { background: #ffffff !important; border-radius: 24px !important; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.06) !important; position: relative; }.style-top-accent-bar { height: 6px; width: 100%; background: linear-gradient(90deg, #007bff 0%, #0d9488 100%); } /* Original Fonts Configurations With Better Weights */ .style-luxury-title { font-size: 24px; font-weight: 800 !important; color: #0f172a !important; letter-spacing: -0.5px; } .style-header-divider-clean { border-bottom: 1px dashed #e2e8f0; } /* High CTR Rich Discount Badge Pill */ .style-neon-discount-pill { background-color:#1b953a; color: #ffffff; font-size: 12px; padding: 8px 18px; border-radius: 50px; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15); } .style-bolt-flash { color: #f59e0b; animation: flashBolt 1.5s infinite; } @keyframes flashBolt { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* —————————— INDIVIDUAL HOTELS CARDS —————————— */ .style-nextgen-hotel-card { background-color: #ffffff !important; border: 1px solid #f1f5f9 !important; border-radius: 16px !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01) !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } /* Luxury Zoom effect on container hover */ .style-img-zoom-container { width: 100%; height: 145px; overflow: hidden; border-radius: 16px 16px 0 0; } .style-img-core { object-fit: cover; transition: transform 0.4s ease; } /* Interactive Card Zoom Mechanic */ .style-nextgen-hotel-card:hover { transform: translateY(-6px); box-shadow: 0 15px 30px rgba(0, 123, 255, 0.08) !important; border-color: rgba(0, 123, 255, 0.25) !important; } .style-nextgen-hotel-card:hover .style-img-core { transform: scale(1.05); } /* Premium Frosted Floating Glass Ribbon Tag */ .style-glass-luxury-ribbon { top: 12px; left: 12px; font-size: 10px; font-weight: 700; color: #0f172a; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 4px 10px; border-radius: 6px; z-index: 5; border: 1px solid rgba(255, 255, 255, 0.4); } /* Hotel Rating Mini Capsule */ .style-luxury-rating { background-color: #f1f5f9; color: #0f172a; font-size: 11px; font-weight: 800; padding: 3px 7px; border-radius: 6px; white-space: nowrap; } .style-luxury-rating i { color: #f59e0b; } /* Typography inside individual cards */ .style-hotel-title-text { font-size: 14.5px; line-height: 1.35; color: #0f172a; } .text-truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Clean Flat Features Styling */ .style-feature-line { font-size: 12px; color: #475569; display: flex; align-items: center; } .style-dot-green { width: 5px; height: 5px; background-color: #10b981; border-radius: 50%; margin-right: 8px; display: inline-block; } /* Card Footer Layout Matrix */ .style-card-footer-top-border { border-top: 1px dashed #e2e8f0; } .tracking-micro { font-size: 8.5px; letter-spacing: 0.5px; color: #94a3b8; } .style-card-price-text { font-size: 22px; font-weight: 800; color: #0f172a; line-height: 1; margin-top: 2px; } .style-dollar-sign { font-size: 14px; font-weight: 700; margin-right: 1px; } /* Smooth Floating Action Arrow Trigger Button */ .style-action-arrow-circle { width: 32px; height: 32px; border-radius: 50%; background-color: #f1f5f9; color: #0f172a; display: flex; align-items: center; justify-content: center; font-size: 12px; transition: all 0.2s ease; } .style-nextgen-hotel-card:hover .style-action-arrow-circle { background-color: #007bff; color: #ffffff; transform: scale(1.05); } /* —————————— MOBILE & TABLET SLIDER BREAKPOINTS ENGINE —————————— */ @media (max-width: 991px) { .overflow-auto { scrollbar-width: none; } .overflow-auto::-webkit-scrollbar { display: none; } .no-gutters-mobile { padding-right: 0 !important; padding-left: 0 !important; } .custom-deal-col { padding-right: 12px !important; padding-left: 0 !important; flex: 0 0 82% !important; max-width: 82% !important; } @media (min-width: 768px) { .custom-deal-col { flex: 0 0 42% !important; max-width: 42% !important; } } } @media (min-width: 992px) { .match-desktop-grid { display: flex; flex-wrap: wrap !important; } .custom-deal-col { flex: 0 0 25% !important; max-width: 25% !important; padding: 0 8px; } } .style-ap-deals-global-wrapper { background-color: #fff; } /* —————————— MASTER ENCLOSURE BOX —————————— */ .style-ap-master-package-canvas { background: #ffffff !important; border-radius: 24px !important; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.06) !important; position: relative; } .style-ap-top-accent-bar { height: 6px; width: 100%; background: linear-gradient(90deg, #007bff 0%, #0d9488 100%); } .style-ap-luxury-title { font-size: 24px; font-weight: 800 !important; color: #0f172a !important; letter-spacing: -0.5px; } .style-ap-header-divider-clean { border-bottom: 1px dashed #e2e8f0; } .style-ap-neon-discount-pill { background-color: #1b953a; color: #ffffff; font-size: 12px; padding: 8px 18px; border-radius: 50px; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15); } .style-ap-bolt-flash { color: #f59e0b; animation: apFlashBolt 1.5s infinite; } @keyframes apFlashBolt { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* —————————— TRACK & HORIZONTAL SCROLL HANDLING —————————— */ .style-ap-airport-horizontal-scroll { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; } /* —————————— STRICT 3.5 DESKTOP PEEK CALCULATION —————————— */ /* Desktop Large Viewports (lg): Exactly 3 full cards visible, 4th card split half */ @media (min-width: 992px) { .style-ap-airport-horizontal-scroll::-webkit-scrollbar { height: 6px; } .style-ap-airport-horizontal-scroll::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; } .style-ap-airport-horizontal-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } .custom-ap-deal-col { flex: 0 0 28.5% !important; max-width: 28.5% !important; margin-right: 2% !important; } } /* Tablet Layout Viewports (md) */ @media (min-width: 768px) and (max-width: 991.98px) { .custom-ap-deal-col { flex: 0 0 42% !important; max-width: 42% !important; margin-right: 3% !important; } } /* Mobile Slider Viewports (xs): 1 full card visible, 2nd card peeking layout */ @media (max-width: 767.98px) { .style-ap-airport-horizontal-scroll { scrollbar-width: none; } .style-ap-airport-horizontal-scroll::-webkit-scrollbar { display: none; } .custom-ap-deal-col { flex: 0 0 82% !important; max-width: 82% !important; margin-right: 4% !important; } } /* —————————— INDIVIDUAL AIRPORT CARDS —————————— */ .style-ap-nextgen-card { background-color: #ffffff !important; border: 1px solid #f1f5f9 !important; border-radius: 16px !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01) !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .style-ap-img-zoom-container { width: 100%; height: 145px; overflow: hidden; border-radius: 16px 16px 0 0; } .style-ap-img-core { object-fit: cover; transition: transform 0.4s ease; } .style-ap-nextgen-card:hover { transform: translateY(-6px); box-shadow: 0 15px 30px rgba(0, 123, 255, 0.08) !important; border-color: rgba(0, 123, 255, 0.25) !important; } .style-ap-nextgen-card:hover .style-ap-img-core { transform: scale(1.05); } .style-ap-glass-luxury-ribbon { top: 12px; left: 12px; font-size: 10px; font-weight: 700; color: #0f172a; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 4px 10px; border-radius: 6px; z-index: 5; border: 1px solid rgba(255, 255, 255, 0.4); } .style-ap-luxury-rating { background-color: #f1f5f9; color: #0f172a; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 6px; white-space: nowrap; border: 1px solid #e2e8f0; } .style-ap-title-text { font-size: 14.5px; line-height: 1.35; color: #0f172a; } .text-truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .style-ap-card-footer-top-border { border-top: 1px dashed #e2e8f0; } .tracking-micro { font-size: 8.5px; letter-spacing: 0.5px; color: #94a3b8; } .style-ap-card-price-text { font-size: 22px; font-weight: 800; color: #0f172a; line-height: 1; margin-top: 2px; } .style-ap-deals-count-label { font-size: 12px; font-weight: 500; color: #64748b; } .style-ap-action-explore-pill { padding: 6px 14px; border-radius: 30px; background-color: #f1f5f9; color: #0f172a; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; } .style-ap-nextgen-card:hover .style-ap-action-explore-pill { background-color: #007bff; color: #ffffff; } .psf-premium-clean-section { padding: 20px 0; background: #ffffff; color: #334155; } /* Top Header Area */ .deal-header-wrapper { text-align: left; margin-bottom: 50px; } .deal-badge { background: rgba(0, 123, 255, 0.05); color: #007bff; padding: 6px 16px; border-radius: 50px; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; display: inline-block; margin-bottom: 18px; } .deal-main-title { color: #0f172a !important; font-size: 26px; letter-spacing: -0.5px; line-height: 1.2; } .deal-description { font-size: 15.5px; color: #64748b; line-height: 1.7; margin: 0; } /* Borderless Soft Shadow Trust Bar */ .premium-trust-bar { background: #ffffff; border-radius: 20px; padding: 24px 20px; box-shadow: 0 10px 40px rgba(15, 23, 42, 0.04), 0 2px 10px rgba(15, 23, 42, 0.02); margin-bottom: 50px; border: none !important; } .trust-item { font-size: 14px; font-weight: 600; color: #1e293b; display: flex; align-items: center; justify-content: center; } .trust-item i { color: #10b981; font-size: 14px; margin-right: 12px; background: rgba(16, 185, 129, 0.06); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; } /* ========================================================= NEW: BENTO GRID PREMIUM CARDS DESIGN ========================================================= */ .bento-deal-card { background: #f8fafc; border: none !important; border-radius: 24px; padding: 35px 28px; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); height: 100%; text-align: left; /* Bento layouts look best left-aligned */ box-shadow: 0 4px 12px rgba(15, 23, 42, 0.01); position: relative; overflow: hidden; } .bento-deal-card:hover { transform: translateY(-5px); background: #ffffff; box-shadow: 0 20px 40px rgba(15, 23, 42, 0.06); } /* Fancy Minimal Bento Icons */ .bento-icon-box { width: 54px; height: 54px; background: #ffffff; color: #007bff; display: flex; align-items: center; justify-content: center; border-radius: 16px; margin-bottom: 24px; font-size: 20px; box-shadow: 0 4px 10px rgba(15, 23, 42, 0.03); transition: all 0.35s ease; } .bento-deal-card:hover .bento-icon-box { background: #007bff; color: #ffffff; box-shadow: 0 8px 20px rgba(0, 123, 255, 0.25); transform: scale(1.05); } .card-heading { font-size: 18px; font-weight: 600; color: #0f172a; margin-bottom: 10px; letter-spacing: -0.3px; } .card-brief-text { font-size: 14px; color: #64748b; line-height: 1.5; margin-bottom: 0; white-space: normal; } /* Value Perks Section */ .extra-deal-perks { margin-top: 40px; padding-top: 30px; border-top: 1px dashed #e2e8f0; text-align: left; } .perk-pill { display: inline-flex; align-items: center; font-size: 13.5px; font-weight: 500; color: #64748b; margin-right: 35px; margin-top: 10px; margin-bottom: 10px; } .perk-pill i { color: #007bff; margin-right: 8px; font-size: 14px; } /* ========================================================= RESPONSIVE RULES (MOBILE & SMALL SCREENS) ========================================================= */ @media (max-width: 767px) { .deal-main-title { font-size: 28px; } .trust-item { justify-content: flex-start !important; margin-bottom: 15px; } .row > div:last-child .trust-item { margin-bottom: 0; } .bento-deal-card { padding: 30px 24px; } .perk-pill { display: flex; margin-right: 0; margin-top: 12px; margin-bottom: 12px; } } @media (max-width: 991px) { .trust-item { justify-content: flex-start; margin-bottom: 15px; } } .psf-elite-hub-section { padding: 0px 0 50px; background: #ffffff; color: #334155; } /* Top Header Framework */ .hub-tag { background: linear-gradient(135deg, rgba(0, 123, 255, 0.08) 0%, rgba(0, 123, 255, 0.02) 100%); color: #007bff; padding: 8px 20px; border-radius: 100px; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; display: inline-block; margin-bottom: 24px; } .hub-title { color: #0f172a !important; font-size: 26px; letter-spacing: -0.5px; line-height: 1.15; margin-bottom: 12px; } .hub-tagline { font-size: 20px; font-weight: 700; color: #007bff; margin-bottom: 20px; } /* Perfect 3-Line Description */ .hub-desc { font-size: 16px; font-weight: 400; color: #64748b; line-height: 1.7; margin-bottom: 55px; } /* ========================================================= 6-POINT BALANCED FLOATING HUB GRID ========================================================= */ .features-hub-row { margin-bottom: 70px; } .hub-card { display: flex; align-items: flex-start; padding: 24px; background: #ffffff; border-radius: 24px; height: 100%; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 4px 20px rgba(15, 23, 42, 0.02); position: relative; z-index: 1; } /* Subtle modern structural tinted backgrounds */ .bg-tint-1 { background: rgba(2, 132, 199, 0.03); } .bg-tint-2 { background: rgba(16, 185, 129, 0.03); } .bg-tint-3 { background: rgba(245, 158, 11, 0.03); } .bg-tint-4 { background: rgba(239, 68, 68, 0.03); } .bg-tint-5 { background: rgba(99, 102, 241, 0.03); } .bg-tint-6 { background: rgba(20, 184, 166, 0.03); } .hub-card:hover { transform: translateY(-5px); background: #ffffff; box-shadow: 0 20px 40px rgba(15, 23, 42, 0.06); } .hub-icon-wrapper { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 18px; margin-right: 18px; flex-shrink: 0; background: #ffffff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); transition: all 0.3s ease; } .hub-card:hover .hub-icon-wrapper { transform: scale(1.05); } .hub-card-body h5 { font-weight: 700; color: #0f172a !important; font-size: 17px; margin-bottom: 6px; } /* Ultra-short text spacing */ .hub-card-body p { font-size: 14px; font-weight: 400; color: #64748b; line-height: 1.4; margin-bottom: 0; } /* ========================================================= ASYMMETRIC DYNAMIC GALLERY COMPONENT (BOTTOM) ========================================================= */ .gallery-hub-container { display: flex; gap: 24px; margin-top: 20px; } .gallery-hub-card { position: relative; border-radius: 28px; overflow: hidden; box-shadow: 0 15px 45px rgba(15, 23, 42, 0.04); height: 340px; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .hub-wide { flex: 2.2; } .hub-standard { flex: 1.4; } .hub-narrow { flex: 1.1; } .gallery-hub-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .gallery-hub-card:hover { transform: scale(1.02) translateY(-4px); box-shadow: 0 35px 70px rgba(15, 23, 42, 0.09); } .gallery-hub-card:hover img { transform: scale(1.05); } .hub-inline-badge { position: absolute; top: 24px; left: 24px; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #ffffff; padding: 6px 16px; border-radius: 100px; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; border: 1px solid rgba(255, 255, 255, 0.15); } /* Responsive Adapters */ @media (max-width: 991px) { .hub-title { font-size: 34px; } .gallery-hub-container { flex-direction: column; gap: 16px; } .gallery-hub-card { height: 240px; flex: none !important; width: 100%; } } @media (max-width: 767px) { .hub-title { font-size: 28px; } .hub-tagline { font-size: 19px; } .psf-elite-hub-section { padding: 60px 0; } } /* Your Exact Section Typography Layout */ .h6-section-title { color: #0f172a; font-size: 26px; letter-spacing: -0.3px; } .h6-section-desc { font-size: 14px; color: #64748b; } /* FAQ Box Inner Text Architecture */ .faq-question-title { font-size: 17px; font-weight: 700; color: #0f172a; line-height: 1.4; } .faq-answer-desc { font-size: 14px; color: #475569; line-height: 1.6; } /* —————————— PROMO BANNER —————————— */ .style-promo-banner { background: linear-gradient(135deg, #1e3a8a 0%, #0d9488 100%); } .z-index-10 { z-index: 10; } .tracking-wide { letter-spacing: 1px; } /* —————————— SOFT FAQ BOXES —————————— */ .style-faq-box { background-color: #ffffff; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .style-faq-box:hover { border-color: #cbd5e1 !important; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(15, 23, 42, 0.02) !important; } /* Desktop grid height stabilizer */ @media (min-width: 768px) { .match-desktop-grid { display: flex; flex-wrap: wrap; } }