.hero {height: 100vh; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--light-color); position: relative; overflow: hidden;margin-top: -70px;} 
.hero::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none;background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4));}
.hero-content {padding: 0 20px; flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; } 
.hero h1 {font-size: 52px; font-weight: 700; margin-bottom: 30px; letter-spacing: 2px;} 
.hero p {font-size: 20px; font-weight: 500; margin-bottom: 40px; letter-spacing: 1px; } 
.search-container {display: flex; width: 100%; max-width: 500px; margin: 0 auto; height: 45px; gap: 15px; } 
.search-container input {flex: 1; background: #fff; border: none; padding: 0 25px; font-size: 18px; outline: none; margin: 0; } 
.search-container input::placeholder {color: #94a3b8; } 
.btn-secondary {background-color: #000; color: #fff; border: none; padding: 12px 20px; font-size: 16px; font-weight: 400; text-transform: uppercase; cursor: pointer; transition: var(--transition); margin: 0; white-space: nowrap; }
.btn-secondary:hover{background-color: #dfb477;color: #fff;}

.hero-trust-bar {display: flex; width: 100%; padding: 30px 0; max-width: 1060px; } 
.hero-trust-bar .trust-item:not(:last-child):after {content: ''; position: absolute; right: 0; height: 80%; top: 10%; border-right: 1px solid #E5E7EB; } 
.trust-item {position: relative; display: flex; width: 100%; flex-direction: column; align-items: center; gap: 5px; }
.trust-item img {height: 44px;}

@media (max-width: 1200px) {
    .hero-trust-bar {padding: 10px 0;}
}

/* Travel Way Section */
.travel-way {padding: 4rem 0; text-align: center; } 
.mw-900 {max-width: 900px; } 
h3, .title {font-size: 38px; margin-bottom: 24px; font-weight: 600; }

/* Featured Journeys Section (Dark) */
.featured-journeys {padding: 4rem 0; text-align: center; } 
.featured-journeys .section-header h2,
.featured-journeys .section-header p {color: #fff; } 
.tabs {display: flex; justify-content: center; gap: 30px; margin-bottom: 50px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } 
.tab-btn {background: none; border: none; padding: 10px 30px; font-size: 16px; font-weight: 400; cursor: pointer; position: relative; transition: var(--transition); color: #fff; } 
.tab-btn.active::after {content: ''; position: absolute; bottom: -1px; width: 30%; height: 2px; font-weight: 500; background-color: var(--primary-color); left: 35%; } 
.journey-slider {position: relative; display: flex; align-items: center; gap: 20px; margin-bottom: 60px; } 
.journey-content {flex: 1; position: relative; overflow: hidden; } .journey-grid {display: none; width: 100%; } 
.journey-grid.active {display: block; animation: fadeIn 0.5s ease; } 
@keyframes fadeIn {
    from {opacity: 0; transform: translateY(20px); } 
    to {opacity: 1; transform: translateY(0); } 
} 
.slider-arrow {background: var(--light-color); color: var(--dark-color); border: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); } 
.journey-footer {display: flex; justify-content: space-between; align-items: center; } 
.price {font-size: 16px; color: #ccc;} 
.price span {color: var(--primary-color); font-size: 18px; font-weight: 700;} 
.btn-outline {padding: 10px 20px; border: 1px solid #fff; color: #fff; text-decoration: none; font-size: 13px; font-weight: 400; letter-spacing: 1px; transition: var(--transition); } 
.center-btn {margin-top: 20px; }

/* Inspired Destinations */
.destinations {padding: 4rem 0;} 
.destination-card {height: 550px; background-size: cover; background-position: center; position: relative; cursor: pointer; overflow: hidden; } 
.card-overlay {padding: 28px 0; } 
.destination-card:hover .card-overlay {background: rgba(0, 0, 0, 0.3); } 
.destination-card h4 {color: #fff; font-size: 24px; font-weight: 700; letter-spacing: 3px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); text-align: center;margin-bottom: 0;}

.travel-style{padding: 4rem 0;}
.style-grid {display: grid; grid-template-columns: 1fr 2fr; gap: 20px; height: 750px; }
.style-card {position: relative; background-size: cover; background-position: center; cursor: pointer; overflow: hidden; height: 100%; }
.style-overlay {position: absolute; bottom: 0; left: 0; width: 100%; padding: 30px; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; transition: var(--transition); }
.style-card:hover .style-overlay {background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.1)); }
.style-overlay h4 {font-size: 24px; font-weight: 500; margin-bottom: 5px;}
.style-group {display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 20px; }
.style-overlay p {font-size: 16px; color: #E5E7EB; }

/* CTA Collection */
.cta-collection {background: none; padding: 4rem 0; color: #fff; position: relative; overflow: hidden;}
.cta-collection::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none;background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5));}
.cta-flex {display: flex; align-items: center; gap: 50px; } 
.cta-images {flex: 1; display: flex; justify-content: center; } 
.brochure-main {max-width: 450px; filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.5)); transform: rotate(-3deg); } 
.cta-text {flex: 1.2; } 
.cta-text h3 {font-size: 34px; margin-bottom: 15px; letter-spacing: 1px;} 
.cta-text p {font-size: 18px; margin-bottom: 30px; color: #F3F4F6;}

/* Hear From Our Travelers Section */
.traveler-hear {padding: 4rem 0 0 0; } 
.hear-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } 
.hear-text h3 {font-size: 34px; margin-bottom: 14px; line-height: 100%; } 
.hear-text p {font-size: 19px; color: #374151; margin-bottom: 30px; }
.hear-video {width: 100%;position: relative;}
.btn-dark-pill {background-color: var(--dark-color); color: var(--light-color); border: none; padding: 12px 30px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: var(--transition); } 
.video-placeholder {height: 400px; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;} 
.video-content {position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.5); color: #fff; padding: 20px; box-sizing: border-box; }
.video-content h5 {font-size: 20px; font-weight: 600; }
.play-btn {width: 60px; height: 60px; background-color: rgba(255, 255, 255, 0.9); border: none; border-radius: 50%; color: var(--primary-color); font-size: 15px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); position: absolute; bottom: -10px; right: 10px; transform: translate(-50%, -50%); z-index: 1; } 
.ta-logo {text-align: left; } 
.play-btn:hover {background-color: var(--light-color); }

.why-us {padding: 4rem 0; text-align: center; }
.features-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.feature-item {padding: 20px; text-align: center; }
.feature-item .feature-icon{margin-bottom: 8px}
.feature-item h4,
.feature-item h5 {font-size: 20px; margin-bottom: 10px; font-weight: 600; }
.feature-item p {font-size: 18px; color: #374151;}

.blog-inspiration-section{padding: 4rem 0;background: var(--bg-gray-color);}

.tour-moments-v3 {padding: 4rem 0;}
.momentsSwiperV3 .swiper-slide {position: relative;width: 45% !important; height: 550px; opacity: 0.5; filter: brightness(0.4) grayscale(50%); transform: scale(0.85); transition: all 0.7s cubic-bezier(0.2, 1, 0.3, 1); }
.momentsSwiperV3 .swiper-slide-prev {transform: scale(0.85) translateX(15%) !important; }
.momentsSwiperV3 .swiper-slide-next {transform: scale(0.85) translateX(-15%) !important; }
.momentsSwiperV3 .swiper-slide-active {opacity: 1; filter: brightness(1) grayscale(0%); transform: scale(1) !important; z-index: 10; }
.momentsSwiperV3 .swiper-slide img {width: 100%; height: 100%; object-fit: cover; }
.momentsSwiperV3 .swiper-slide p {position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.5); color: #fff; padding: 15px 20px; box-sizing: border-box; }
.momentsSwiperV3 .swiper-button-next,
.momentsSwiperV3 .swiper-button-prev {width: 35px; height: 35px; background: #fff; color: #000; border: 1px solid #e2e8f0; border-radius: 0; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); top: 50%; transform: translateY(-50%); }
.momentsSwiperV3 .swiper-button-next {right: 23%; }
.momentsSwiperV3 .swiper-button-prev {left: 23%; }


@media (max-width: 1024px) {
    .travel-way,
    .featured-journeys,
    .destinations,
    .travel-style,
    .cta-collection,
    .tour-moments-v3,
    .blog-inspiration-section,
    .why-us{padding: 3rem 0;}

    .traveler-hear{padding-top: 3rem}

    .hero h1 {font-size: 34px;margin-bottom: 15px}
    .hero p {font-size: 16px;margin-bottom: 30px;}

    .section-header p{font-size: 16px;}

    .destination-card {height: 450px;}

    .style-grid{height: 650px;}

    .brochure-main {max-width: 380px;}

    .hear-grid{grid-template-columns: 1fr;gap: 40px;}

    .features-grid{grid-template-columns: repeat(2, 1fr);gap: 30px;}

    .momentsSwiperV3 .swiper-slide {width: 500px !important; height: 400px; }
    .momentsSwiperV3 .swiper-slide-active {transform: scale(1.02) !important;filter: brightness(1) grayscale(0%);}
}

@media (max-width: 576px) {
    .travel-way,
    .featured-journeys,
    .destinations,
    .travel-style,
    .cta-collection,
    .tour-moments-v3{padding: 2rem 0;}

    .hero{padding-top: 120px;height: auto;min-height: 100vh;}
    .hero h1 {font-size: 30px;}
    .hero p{margin-bottom: 15px;}

    .btn-secondary{padding: 15px 20px;}

    .card-overlay {padding: 20px 0;}
    .destination-card h4{font-size: 21px;}

    .hear-text h3{font-size: 30px;}
    .hear-text p{font-size: 16px;}

    .play-btn{width: 50px; height: 50px; bottom: 0; right: 0;}

    .video-content h5{font-size: 18px;}

    .cta-flex{gap: 30px;flex-wrap: wrap;}
    .brochure-main {max-width: 310px;}
    .cta-text h3 {font-size: 30px;}
    .cta-text p {font-size: 16px;}

    .style-grid{grid-template-columns: 1fr;height: auto;}
    .style-overlay{padding: 20px;}
    .style-group{grid-template-columns: 1fr;}
    .style-card {height: 240px}

    .search-container {flex-direction: column; height: auto; gap: 12px; margin-top: 30px; }
    .search-container input {height: 50px; width: 100%; padding: 0 20px; flex: auto; }

    .hero-trust-bar {flex-direction: column;gap: 20px;}
    .hero-trust-bar .trust-item {padding: 15px 0; flex: 0 0 45%;}
    .hero-trust-bar .trust-item:not(:last-child)::after {content: ""; position: absolute; right: 0; width: 100%; height: 1px; bottom: 0; left: 0; top: unset; border-bottom: 1px solid #E5E7EB; }

    .featured-journeys .tabs{gap: 20px;margin-bottom: 35px;}
    .featured-journeys .tab-btn{padding: 10px 0px;font-size: 15px;}

    .traveler-hear{padding-top: 2rem}

    .features-grid {grid-template-columns: 1fr;gap: 0;}
    .feature-item {padding: 20px 0;}
    .feature-item h4,
    .feature-item h5{font-size: 18px;}
    .feature-item p {font-size: 16px;}

    .momentsSwiperV3 .swiper-slide {height: 220px;width: 95% !important;}
    .momentsSwiperV3 .swiper-slide p{font-size: 13px;}
    .tour-moments-v3 .swiper-button-next {right: 5px;}
    .tour-moments-v3 .swiper-button-prev {left: 5px;}
}

