/* Reset and Base Styles */
* {margin: 0;padding: 0;box-sizing: border-box;}
body {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;background-color: #FFF7ED;color: #111827;line-height: 1.6;overflow-x: hidden;}
img {max-width: 100%;height: auto;display: block;}
a {text-decoration: none;color: inherit;}

button {font-family: inherit;cursor: pointer;border: none;outline: none;}
.container {max-width: 1280px;margin: 0 auto;padding: 0 1.5rem;}
.container-cta {max-width: 1024px;margin: 0 auto;padding: 0 1.5rem;}/* Navigation */
.navbar {position: fixed;top: 0;left: 0;right: 0;z-index: 1000;background-color: #111827;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);}
.nav-container {max-width: 1280px;margin: 0 auto;padding: 0 1.5rem;}
.nav-content {display: flex;align-items: center;justify-content: space-between;height: 80px;}
.nav-logo {display: flex;align-items: center;gap: 0.75rem;}
.logo-img {height: 48px;width: 48px;border-radius: 4px;}
.logo-text {font-size: 1.5rem;font-weight: 800;color: white;}
.nav-menu {display: flex;align-items: center;gap: 2rem;}
.nav-link {font-weight: 600;color: white;transition: color 0.3s;}
.nav-link:hover {color: #F97316;}
.btn-primary {padding: 0.625rem 1.5rem;border-radius: 9999px;background-color: #F97316;color: white;font-weight: 700;transition: all 0.3s;}
.btn-primary:hover {box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4);transform: translateY(-2px);}
.mobile-menu-btn {display: none;padding: 0.5rem;background: transparent;color: #F97316;font-size: 1.5rem;}
.close-icon {display: none;}
.mobile-menu-btn.active .menu-icon {display: none;}
.mobile-menu-btn.active .close-icon {display: block;}
.mobile-menu {display: none;background-color: #111827;border-top: 1px solid rgba(255, 255, 255, 0.1);}
.mobile-menu.active {display: block;}
.mobile-menu-content {padding: 1rem 1.5rem;}
.mobile-nav-link {display: block;padding: 0.75rem 0;font-weight: 600;color: white;transition: color 0.3s;}
.mobile-nav-link:hover {color: #F97316;}
.mobile-btn {width: 100%;margin-top: 1rem;}
.m-logo{display: none;}
.nav-menu{margin:auto; height:77px;}
img.logo-img-desk {max-width: 150px;position: relative;top: 34px;}
/* Hero Section */
.hero-section {margin-top: 80px;height: 650px;position: relative;overflow: hidden;}
.hero-slider-container {position: relative;width: 100%;height: 100%;}
.hero-bg-slider {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.hero-slide {position: relative;width: 100%;height: 650px;}
.hero-slide img {width: 100%;height: 100%;object-fit: cover;}
.hero-overlay {position: absolute;inset: 0;background: linear-gradient(135deg, rgb(12 12 12 / 48%) 0%, rgb(195 190 190 / 51%) 50%, rgb(209 213 213 / 15%) 100%);}
.hero-content {position: absolute;inset: 0;display: flex;align-items: center;justify-content: space-between;padding: 0 2rem;max-width: 1280px;margin: 0 auto;gap: 2rem;}
.hero-text {flex: 1;max-width: 50%;}
.hero-title {font-size: clamp(2.5rem, 6vw, 4rem);font-weight: 600;color: white;line-height: 1.1;text-shadow: 2px 4px 12px rgba(0, 0, 0, 0.4);margin-bottom: 1rem;}
.hero-subtitle {font-size: clamp(1rem, 2vw, 1.25rem);color: white;opacity: 0.95;text-shadow: 1px 2px 8px rgba(0, 0, 0, 0.3);margin-bottom: 2rem;}
.btn-hero {padding: 1rem 2rem;border-radius: 9999px;background-color: #FACC15;color: #111827;font-weight: 800;font-size: 1.125rem;transition: all 0.3s;}
.btn-hero:hover {box-shadow: 0 8px 24px rgba(250, 204, 21, 0.4);transform: translateY(-2px);}
.hero-cards-wrapper {flex-direction: column;gap: 1.5rem;width:600px;margin-top: 320px;}
.hero-cards-slider {width: 100%;}
.hero-card {position: relative; margin:5px; height: 100px;border-radius: 1rem;overflow: hidden;cursor: pointer;transition: transform 0.3s;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);}
.hero-card:hover {transform: translateX(-8px);}
.hero-card img {width: 100%;height: 100%;object-fit: cover;}
.hero-card-overlay {position: absolute;inset: 0;background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, transparent 100%);}
.hero-card-content {position: absolute;inset: 0;display: flex;flex-direction: column;justify-content: center;padding: 1.5rem;color: white;z-index: 1;}
.hero-card-title {font-size: 0.9375rem;font-weight: 600;margin-bottom: 0.25rem;}
.hero-card-location {font-size: 0.75rem;opacity: 0.9;}
.hero-progress {display: flex;align-items: center;justify-content: space-between;width: 100%;}
.progress-current,.progress-total {font-size: 1.5rem;font-weight: 800;color: white;text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);}
.progress-total {opacity: 0.5;}
.progress-bars {flex: 1;display: flex;gap: 0.5rem;margin: 0 1rem;}
.progress-bar {flex: 1;height: 4px;background-color: rgba(255, 255, 255, 0.3);border-radius: 9999px;transition: background-color 0.3s;}
.progress-bar.active {background-color: #FACC15;}/* Sections */
.section-destinations,.section-features {padding: 5rem 1rem;background-color: white;}
.section-trending,.section-videos,.section-popular {padding: 5rem 0;}
.section-trending,.section-popular{background-color: #FFF7ED;}
.section-videos{background-color: #fff;}
.section-header {margin-bottom: 3rem;}
.section-header-center {text-align: center;margin-bottom:2rem;}
.badge {display: inline-block;margin-bottom: 0.75rem;padding: 0.5rem 1rem;border-radius: 9999px;background-color: rgba(249, 115, 22, 0.1);color: #F97316;font-weight: 600;font-size: 0.875rem;}
.section-title {font-size: clamp(2rem, 5vw, 3rem);font-weight: 600;color: #111827;margin-bottom:1rem;}
.section-subtitle {font-size: 1.125rem;color: #6B7280;margin-top: 1rem;}
.text-accent {color: #F97316;}
.filter-buttons {display: flex;flex-wrap: wrap;gap: 0.75rem;}
.filter-btn {display: flex;align-items: center;gap: 0.5rem;padding: 0.625rem 1.5rem;border-radius: 9999px;font-weight: 600;transition: all 0.3s;font-size: 0.9375rem;}
.filter-btn.active {background-color: #111827;color: white;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);}
.filter-btn:not(.active) {background-color: white;color: #374151;border: 1px solid #E5E7EB;}
.filter-btn:not(.active):hover {background-color: #F3F4F6;}/* Destinations Grid */
.destinations-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 1.5rem;}
.destination-card {position: relative;border-radius: 1rem;overflow: hidden;background-color: white;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);cursor: pointer;transition: all 0.3s;}
.destination-card:hover {transform: translateY(-8px);box-shadow: 0 12px 28px rgba(250, 204, 21, 0.3);}
.destination-image {position: relative;height: 280px;overflow: hidden;}
.destination-image img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.5s;}
.destination-card:hover .destination-image img {transform: scale(1.1);}
.destination-overlay {position: absolute;inset: 0;background: linear-gradient(to bottom, transparent 0%, rgba(249, 115, 22, 0.7) 60%, rgba(220, 38, 38, 0.9) 100%);opacity: 0.8;transition: opacity 0.3s;}
.destination-card:hover .destination-overlay {opacity: 0.9;}
.destination-badge {position: absolute;top: 1rem;left: 1rem;padding: 0.375rem 0.75rem;border-radius: 0.375rem;font-weight: 800;font-size: 0.75rem;z-index: 1;}
.destination-badge.new {background-color: #FACC15;color: #111827;}
.destination-duration {position: absolute;top: 1rem;right: 1rem;padding: 0.375rem 0.75rem;border-radius: 9999px;background-color: rgba(249, 115, 22, 0.95);color: white;font-weight: 700;font-size: 0.875rem;z-index: 1;}
.destination-content {position: absolute;bottom: 0;left: 0;right: 0;padding: 1.5rem;color: white;}
.destination-title {font-size: 1.125rem;font-weight: 600;margin-bottom: 0.5rem;}
.destination-location {display: flex;align-items: center;gap: 0.375rem;font-size: 0.875rem;margin-bottom: 0.75rem;opacity: 0.95;}
.destination-footer {display: flex;align-items: center;justify-content: space-between;}
.destination-rating {display: flex;align-items: center;gap: 0.25rem;font-size: 0.875rem;}
.destination-price {font-weight: 800;font-size: 1.125rem;}/* Trending Trips Section */
.trending-slider-wrapper {position: relative;margin: 0 -0.5rem;}
.trending-slider {margin: 0 -0.5rem;}
.trending-slider .slick-slide {padding:0.5rem; margin:10px;}
.trending-slider .slick-slide img{border-radius:10px;}
.slider-arrow {position: absolute;top:-33px;transform: translateY(-50%);width: 48px;height: 48px;border-radius: 50%;background-color: #F97316;color: white;display: flex;align-items: center;justify-content: center;z-index: 10;transition: all 0.3s;cursor: pointer;border: none;}
.slider-arrow:hover {background-color: #DC2626;box-shadow: 0 8px 24px rgba(249, 115, 22, 0.4);transform: translateY(-50%) scale(1.1);}
.slider-arrow-left {left: auto;right: 75px;}
.slider-arrow-right {right:20px ;}
.trending-card {background-color: white;border-radius: 1rem;overflow: hidden;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);transition: all 0.3s;}
.trending-card:hover {box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);}
.trending-image {position: relative;height: 240px;overflow: hidden;}
.trending-image img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.5s;}
.trending-card:hover .trending-image img {transform: scale(1.1);}
.trending-overlay {position: absolute;inset: 0;background: linear-gradient(to bottom, transparent 0%, rgba(17, 24, 39, 0.9) 100%);opacity: 0.5;transition: opacity 0.3s;}
.trending-card:hover .trending-overlay {opacity: 0.7;}
.trending-badge {position: absolute;top: 1rem;left: 1rem;padding: 0.375rem 0.75rem;border-radius: 0.375rem;font-weight: 800;font-size: 0.75rem;z-index: 1;}
.trending-badge.new {background-color: #FACC15;color: #111827;}
.trending-badge.hot {background-color: #DC2626;color: white;}
.trending-duration {position: absolute;top: 1rem;right: 1rem;padding: 0.375rem 0.75rem;border-radius: 9999px;background-color: rgba(249, 115, 22, 0.95);color: white;font-weight: 700;font-size: 0.875rem;z-index: 1;}
.trending-image-content {position: absolute;bottom: 0;left: 0;right: 0;padding: 1.25rem;color: white;z-index: 1;}
.trending-image-title {font-size: 1.125rem;font-weight: 800;margin-bottom: 0.25rem;line-height: 1.3;}
.trending-location {display: flex;align-items: center;gap: 0.375rem;font-size: 0.875rem;opacity: 0.95;}
.trending-content {padding: 1.25rem;}
.trending-info {display: flex;align-items: center;justify-content: space-between;margin-bottom: 1rem;}
.trending-days {display: flex;align-items: center;gap: 0.5rem;color: #6B7280;font-size: 0.875rem;font-weight: 600;}
.trending-days svg {color: #F97316;}
.trending-rating {display: flex;align-items: center;gap: 0.25rem;font-weight: 700;color: #111827;}
.trending-footer {display: flex;align-items: center;justify-content: space-between;}
.trending-price-section .price-label {font-size: 0.75rem;color: #6B7280;}
.trending-price {font-size: 1.25rem;font-weight: 800;color: #F97316;}
.btn-book {padding: 0.5rem 1rem;border-radius: 0.5rem;background-color: #F97316;color: white;font-weight: 700;font-size: 0.875rem;transition: all 0.3s;}
.btn-book:hover {background-color: #DC2626;box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);}/* Videos Grid */
.videos-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 1.5rem;}
.video-card {border-radius: 1rem;overflow: hidden;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);cursor: pointer;transition: all 0.3s;}
.video-card:hover {transform: translateY(-8px);box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);}
.video-image {position: relative;height: 280px;overflow: hidden;}
.video-image img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.5s;}
.video-card:hover .video-image img {transform: scale(1.1);}
.video-overlay {position: absolute;inset: 0;background-color: rgba(0, 0, 0, 0.3);transition: background-color 0.3s;}
.video-card:hover .video-overlay {background-color: rgba(0, 0, 0, 0.4);}
.video-play-btn {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 64px;height: 64px;border-radius: 50%;background-color: rgba(249, 115, 22, 0.9);display: flex;align-items: center;justify-content: center;transition: all 0.3s;z-index: 1;}
.video-play-btn svg {margin-left: 4px;}
.video-card:hover .video-play-btn {transform: translate(-50%, -50%) scale(1.1);}
.video-label {position: absolute;bottom: 1rem;left: 1rem;padding: 0.375rem 0.75rem;border-radius: 0.5rem;background-color: rgba(255, 255, 255, 0.9);color: #111827;font-weight: 700;font-size: 0.875rem;z-index: 1;}
.video-label-top {position: absolute;top: 1rem;left: 50%;transform: translateX(-50%);color: white;font-weight: 800;font-size: 1.125rem;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);text-align: center;z-index: 1;}
.video-label-top-small {position: absolute;top: 1rem;left: 1rem;right: 1rem;color: white;font-weight: 700;font-size: 0.875rem;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);text-align: center;z-index: 1;}
.video-sound-icon {position: absolute;bottom: 1rem;right: 1rem;width: 32px;height: 32px;border-radius: 50%;background-color: rgba(0, 0, 0, 0.5);display: flex;align-items: center;justify-content: center;z-index: 1;}/* Popular Trips Section */
.popular-scroll-wrapper {overflow-x: auto;-ms-overflow-style: none;scrollbar-width: none;margin: 0 -1.5rem;padding: 0 1.5rem;}
.popular-scroll-wrapper::-webkit-scrollbar {display: none;}
.popular-scroll-container {display: flex;gap: 1rem;padding-bottom: 1rem;}
.popular-card {flex: 0 0 280px;background-color: white;border-radius: 1rem;overflow: hidden;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);transition: all 0.3s;}
.popular-card:hover {transform: translateY(-8px);box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);}
.popular-image {position: relative;height: 240px;overflow: hidden;}
.popular-image img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.5s;}
.popular-card:hover .popular-image img {transform: scale(1.1);}
.popular-overlay {position: absolute;inset: 0;background-color: rgba(0, 0, 0, 0.4);}
.popular-destination-text {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;color: white;z-index: 1;}
.popular-destination-text h3 {font-size: 2.5rem;font-weight: 800;color: #FACC15;text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);margin-bottom: 0.5rem;}
.popular-destination-text p {font-size: 0.875rem;text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);}
.popular-badge {position: absolute;bottom: 1rem;left: 1rem;padding: 0.375rem 0.75rem;border-radius: 0.375rem;background-color: #FACC15;color: #111827;font-weight: 800;font-size: 0.75rem;z-index: 1;}
.popular-content {padding: 1rem;}
.popular-title {font-size: 1.125rem;font-weight: 800;color: #111827;margin-bottom: 0.75rem;line-height: 1.3;}
.popular-location,.popular-date {display: flex;align-items: flex-start;gap: 0.5rem;font-size: 0.875rem;color: #6B7280;margin-bottom: 0.75rem;}
.popular-location svg,.popular-date svg {flex-shrink: 0;margin-top: 2px;color: #F97316;}
.popular-footer {padding-top: 0.75rem;border-top: 1px solid #E5E7EB;}
.popular-price-section .price-label {font-size: 0.75rem;color: #6B7280;margin-bottom: 0.25rem;}
.popular-price {font-size: 1.25rem;font-weight: 800;color: #F97316;}/* Features Section */
.features-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 2rem;}
.feature-card {text-align: center;padding: 2rem;border-radius: 1rem;background-color: #FFF7ED;border: 2px solid transparent;transition: all 0.3s;}
.feature-card:hover {border-color: #FACC15;box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);transform: translateY(-8px);}
.feature-icon {display: inline-flex;align-items: center;justify-content: center;width: 64px;height: 64px;border-radius: 50%;background-color: #F97316;color: white;margin-bottom: 1.5rem;}
.feature-title {font-size: 1.25rem;font-weight: 600;color: #111827;margin-bottom: 0.75rem;}
.feature-description {color: #6B7280;line-height: 1.6;}/* CTA Section */
.section-cta {padding: 6rem 1rem;background: linear-gradient(135deg, #F97316 0%, #DC2626 50%, #0F766E 100%);position: relative;overflow: hidden;}
.cta-title {font-size: clamp(2rem, 5vw, 3.5rem);font-weight: 600;color: white;text-align: center;margin-bottom: 1.5rem;line-height: 1.2;}
.cta-subtitle {font-size: 1.25rem;color: white;opacity: 0.95;text-align: center;margin-bottom: 2.5rem;}
.cta-buttons {display: flex;flex-wrap: wrap;align-items: center;justify-content: center;gap: 1rem;}
.btn-cta-primary,.btn-cta-secondary {padding: 1rem 2.5rem;border-radius: 9999px;font-weight: 800;font-size: 1.125rem;transition: all 0.3s;}
.btn-cta-primary {background-color: #FACC15;color: #111827;}
.btn-cta-primary:hover {box-shadow: 0 8px 24px rgba(250, 204, 21, 0.4);transform: scale(1.05);}
.btn-cta-secondary {background-color: white;color: #F97316;}
.btn-cta-secondary:hover {box-shadow: 0 8px 24px rgba(255, 255, 255, 0.3);transform: scale(1.05);}/* Footer */
.footer {padding: 4rem 1rem;background-color: #111827;color: #9CA3AF;}
.footer-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 3rem;margin-bottom: 3rem;}
.footer-logo {display: flex;align-items: center;gap: 0.75rem;margin-bottom: 1rem;}
.footer-logo-text {font-size: 1.25rem;font-weight: 800;color: #F97316;}
.footer-description {line-height: 1.6;}
.footer-title {font-size: 1.125rem;font-weight: 600;color: white;margin-bottom: 1rem;}
.footer-links,.footer-contact {list-style: none;}
.footer-links li,.footer-contact li {margin-bottom: 0.5rem;}
.footer-links a {transition: color 0.3s;}
.footer-links a:hover {color: #F97316;}
.footer-bottom {display: flex;align-items: center;justify-content: space-between;padding-top: 2rem;border-top: 1px solid rgba(156, 163, 175, 0.2);}
.footer-social {display: flex;gap: 1.5rem;}
.footer-social a {transition: color 0.3s;}
.footer-social a:hover {color: #F97316;}
/* Responsive Design - Mobile */

@media (max-width:991px) {
.nav-menu {display: none;}
.mobile-menu-btn {display: block;}
.logo-text {font-size: 1.125rem;}
.hero-content {flex-direction: column;justify-content: flex-start;align-items: center;text-align: center;padding: 2rem 1rem;gap: 2rem;}
.hero-text {max-width: 100%;}
.hero-cards-wrapper {display:block; margin-top: 0;}
.destinations-grid {grid-template-columns: 1fr;}
.slider-arrow {width: 40px;height: 40px;}
.videos-grid {grid-template-columns: 1fr;}
.features-grid {grid-template-columns: 1fr;}
.footer-grid {grid-template-columns: 1fr;gap: 2rem;}
.footer-bottom {flex-direction: column;text-align: center;gap: 1rem;}
.section-title {font-size: 2rem;}
.hero-section {height: auto;min-height: 100vh;}
.m-logo{display:block;}
.nav-menu{margin:0; height:auto;}
img.logo-img-desk{display:none;}
}

/* Responsive Design - Tablet */

@media (min-width:991px) and (max-width:1199px) {
.hero-content{position: relative;flex-direction: column; text-align:center;padding-top: 50px; padding-bottom:50px;}
.hero-cards-wrapper{margin-top:0;}
.hero-section{height:auto;}
}

@media (min-width: 769px) and (max-width: 1024px) {
.hero-text {max-width: 60%;}
.destinations-grid {grid-template-columns: repeat(2, 1fr);}
.videos-grid {grid-template-columns: repeat(2, 1fr);}
.features-grid {grid-template-columns: repeat(2, 1fr);}
.footer-grid {grid-template-columns: repeat(2, 1fr);}
}

/* Responsive Design - Desktop */
@media (min-width: 1025px) {
.logo-text {display: block;}
.hero-cards-wrapper {display: flex;}
}

/* Slick Slider Customization */
.slick-slide {outline: none;}
.slick-slide > div {margin: 0;}
.slick-dots {bottom: 20px;}
.slick-dots li button:before {font-size: 12px;color: #FACC15;}
.slick-dots li.slick-active button:before {color: #FACC15;opacity: 1;}
/* Smooth Scrolling */
html {scroll-behavior: smooth;}  

@media (max-width: 768px) {
/* Hero Section - Mobile */
.hero-slide {height: 100vh;}
.hero-slide img {object-position: center center;}
.hero-text {max-width: 100%;margin-top: 20vh;}
.hero-title {font-size: 2rem;line-height: 1.2;}
.hero-subtitle {font-size: 1rem;}
/* Show small slider on mobile - positioned at bottom */
.hero-cards-wrapper {display: flex !important;width: 100%;max-width:100%;margin-top: auto;margin-bottom: 2rem;}
.hero-card {height: 80px;}
.hero-card-title {font-size: 0.875rem;}
.hero-card-location {font-size: 0.6875rem;}
.hero-progress {margin-bottom: 1rem;}
.progress-current,.progress-total {font-size: 1.25rem;}
.destinations-grid {grid-template-columns: 1fr;}
}
