/* Header Styles */
header {color: white; text-align: center; padding:150px 20px; position: relative; overflow: hidden;}
.header-content {max-width:920px; margin: 0 auto; position: relative; z-index: 2;}
h1 {font-size: 3.5rem;margin-bottom: 20px;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);}
.tagline {font-size: 1.5rem; margin-bottom: 30px; font-weight: 300;}
.cta-button{display:inline-block;background-color:var(--secondary);color:white;padding:15px 40px;border-radius:50px;text-decoration:none;font-weight:bold;font-size:1.2rem;transition:all .3s ease;box-shadow:0 4px 15px rgba(0,0,0,.2);}
.cta-button:hover {background-color: var(--accent); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);}
/* Section Styles */
section {padding: 80px 0;}
.section-title {
text-align: center;
margin-bottom: 50px;
color: var(--primary);
position: relative;
}

.section-title:after {
content: '';
display: block;
width: 100px;
height: 4px;
background: var(--secondary);
margin: 15px auto;
border-radius: 2px;
}

.intro-text {
font-size: 1.2rem;
margin-bottom: 30px;
text-align: center;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}

/* Itinerary Styles */
.itinerary-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 40px;
}

.itinerary-card {
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}

.itinerary-card:hover {
transform: translateY(-10px);
}

.card-header {
background: var(--primary);
color: white;
padding: 20px;
text-align: center;
}

.card-body {
padding: 20px;
}

.day-card {
background-color: white;
border-radius: 10px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
border-left: 5px solid var(--primary);
}

.day-title {
color: var(--primary);
margin-bottom: 20px;
display: flex;
align-items: center;
}

.day-title i {
margin-right: 10px;
font-size: 1.5rem;
}


.day-number {
font-size: 1.8rem;
font-weight: bold;
margin-bottom: 10px;
color: var(--secondary);
}

/* Itinerary Section */
.itinerary-section {
padding: 80px 0;
background-color: var(--light);
}

.itinerary-tabs {
display: flex;
flex-wrap: wrap;
margin-bottom: 30px;
border-bottom: 1px solid #ddd;
}

.tab {
padding: 15px 30px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s;
border-bottom: 3px solid transparent;
}

.tab.active {
color: var(--primary);
border-bottom: 3px solid var(--secondary);
}

.tab:hover:not(.active) {
color: var(--secondary);
}

.itinerary-content {
display: none;
}

.itinerary-content.active {
display: block;
}


.highlight-item {
display: flex;
align-items: center;
margin-bottom: 30px;
}

.highlight-icon {
background: var(--accent);
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20px;
flex-shrink: 0;
}

/* Inclusions/Exclusions */
.inclusion-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 40px;
}

.inclusion-card {
background: white;
border-radius: 10px;
padding: 30px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.inclusion-card h3 {
color: var(--primary);
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid var(--light);
}

.inclusion-list {
list-style-type: none;
}

.inclusion-list li {
margin-bottom: 10px;
padding-left: 25px;
position: relative;
}

.inclusion-list li:before {
content: '✓';
position: absolute;
left: 0;
color: var(--secondary);
font-weight: bold;
}

.exclusion-list li:before {
content: '✗';
color: #e74c3c;
}

/* FAQ Section */
.faq-container {
max-width: 800px;
margin: 0 auto;
}

.faq-item {
margin-bottom: 20px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.faq-question {
background: var(--primary);
color: white;
padding: 20px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}

.faq-answer {
background: white;
padding: 0 20px;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-answer.active {
padding: 20px;
max-height: 500px;
}

/* Detailed Itinerary */
.detailed-itinerary {
background-color: var(--light);
padding: 40px;
border-radius: 10px;
margin-top: 40px;
}

.itinerary-day {
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.itinerary-day:last-child {
border-bottom: none;
}

.day-title {
display: flex;
align-items: center;
margin-bottom: 15px;
}

.day-marker {
background: var(--secondary);
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
font-weight: bold;
}


/* Route Map Section */
.route-map {
text-align: center;
padding: 60px 0;
background: linear-gradient(to right, var(--primary), var(--dark));
color: white;
border-radius: 10px;
}

.route-map h2 {
margin-bottom: 20px;
font-size: 2.5rem;
}

.route-map p {
font-size: 1.2rem;
max-width: 600px;
margin: 0 auto 30px;
}



.intro-text {
font-size: 1.2rem;
margin-bottom: 30px;
text-align: center;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}

/* Overview Section */
.overview-container {
background: white;
border-radius: 10px;
padding: 40px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
margin-top: 30px;
}

/* Stats Section */
.stats-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
margin-top: 40px;
}

.stat-card {
background: white;
border-radius: 10px;
padding: 30px;
text-align: center;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}

.stat-card:hover {
transform: translateY(-10px);
}

.stat-number {
font-size: 3rem;
font-weight: bold;
color: var(--secondary);
margin-bottom: 10px;
}

.stat-label {
font-size: 1.2rem;
color: var(--primary);
}

/* Features Grid */
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-top: 40px;
}

.feature-card {
background: white;
border-radius: 10px;
padding: 30px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
text-align: center;
border-top: 5px solid var(--spiti);
}

.feature-icon {
font-size: 2.5rem;
color: var(--spiti);
margin-bottom: 20px;
}


/* Mountain Passes Section */
.passes-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 40px;
}

.pass-card {
background: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
text-align: center;
border-left: 5px solid var(--secondary);
}

/* Pricing Banner */
.pricing-banner {
background: linear-gradient(to right, var(--primary), var(--dark));
color: white;
padding: 30px 0;
text-align: center;
margin-top: -5px;
}

.price-container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 40px;
}

.price-main {
font-size: 2.5rem;
font-weight: bold;
}

.price-features {
display: flex;
gap: 30px;
}

.price-feature {
display: flex;
align-items: center;
gap: 10px;
}

/* Highlights Section */
.highlights-container {
background: linear-gradient(to right, var(--primary), var(--dark));
color: white;
padding: 60px 0;
border-radius: 10px;
margin-top: 40px;
}

.highlights-container.bg-none {background: none;}



/* Booking Features */
.booking-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
margin-top: 40px;
}

.booking-feature {
text-align: center;
padding: 20px;
}

.booking-icon {
font-size: 2.5rem;
color: var(--secondary);
margin-bottom: 15px;
}

/* Certificate Section */
.certificate-section {
text-align: center;
padding: 60px 0;
background: linear-gradient(to right, var(--primary), var(--dark));
color: white;
border-radius: 10px;
}

.certificate-section h2 {
margin-bottom: 20px;
font-size: 2.5rem;
}

.certificate-section p {
font-size: 1.2rem;
max-width: 600px;
margin: 0 auto 30px;
}

.route-highlight {
background: rgba(0, 0, 0, 0.6);
padding: 20px;
border-radius: 10px;
margin: 30px 0;
font-size: 1.1rem;
line-height: 1.8;
}




/* Preparation Section */
.preparation-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 40px;
}

.prep-card {
background: white;
border-radius: 10px;
padding: 25px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
text-align: center;
border-left: 5px solid var(--secondary);
}


/* Risk Section */
.risk-section {
background: #fff3cd;
border: 1px solid #ffeaa7;
border-radius: 10px;
padding: 30px;
margin-top: 40px;
}

/* Overview Section */
.overview-container {
background: white;
border-radius: 10px;
padding: 40px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
margin-top: 30px;
}

/* Epic Journey Stats */
.journey-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
margin-top: 40px;
}

.journey-stat {
background: white;
border-radius: 10px;
padding: 30px;
text-align: center;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
border-top: 5px solid var(--kashmir);
}

.journey-stat:hover {
transform: translateY(-10px);
}

/* Route Visualization */
.route-visual {
background: linear-gradient(45deg, var(--dark), var(--dark));
color: white;
padding: 60px 0;
border-radius: 10px;
text-align: center;
margin-top: 40px;
}

.route-points {
display: flex;
justify-content: space-between;
align-items: center;
margin: 40px 0;
flex-wrap: wrap;
}

.route-point {
text-align: center;
flex: 1;
min-width: 100px;
}

.route-arrow {
font-size: 2rem;
color: var(--accent);
}

/* Mountain Passes Section */
.passes-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 40px;
}

.pass-card {
background: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
text-align: center;
border-left: 5px solid var(--kashmir);
}

/* Features Grid */
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-top: 40px;
}

.feature-card {
background: white;
border-radius: 10px;
padding: 30px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
text-align: center;
border-top: 5px solid var(--spiti);
}

.feature-icon {
font-size: 2.5rem;
color: var(--spiti);
margin-bottom: 20px;
}


/* Reasons Section */
.reasons-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 40px;
}

.reason-card {
background: white;
border-radius: 10px;
padding: 30px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
border-top: 5px solid var(--spiti);
}

.reason-number {
font-size: 2.5rem;
font-weight: bold;
color: var(--spiti);
margin-bottom: 15px;
}

/* World Records Section */
.records-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 40px;
}

.record-card {
background: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
text-align: center;
border-left: 5px solid var(--spiti);
}

/* Booking Section */
.booking-section {
padding: 80px 0;
background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80');
background-size: cover;
color: white;
text-align: center;
}

.booking-content {
max-width: 800px;
margin: 0 auto;
}

.booking-content h2 {
font-size: 2.5rem;
margin-bottom: 20px;
}

.booking-content p {
font-size: 1.2rem;
margin-bottom: 30px;
}

.tagline {
font-size: 1.5rem;
font-weight: 300;
margin-bottom: 30px;
}

.package-info {
background-color: rgba(255, 255, 255, 0.2);
padding: 20px;
border-radius: 10px;
backdrop-filter: blur(5px);
display: inline-block;
margin-bottom: 30px;
}

.package-info span {
display: inline-block;
margin: 0 15px;
font-size: 1.1rem;
}


.attraction-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 20px;
}

.attraction-card {
background-color: var(--light);
border-radius: 8px;
padding: 20px;
transition: transform 0.3s ease;
}

.attraction-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.attraction-card h4 {
color: var(--primary);
margin-bottom: 10px;
}

/* Inclusions Section */
.inclusions-section {
padding: 80px 0;
background-color: white;
}

.inclusions-container {
display: flex;
flex-wrap: wrap;
gap: 40px;
}

.inclusions-column {
flex: 1;
min-width: 300px;
}

.inclusions-list, .exclusions-list {
list-style: none;
}

.inclusions-list li, .exclusions-list li {
margin-bottom: 15px;
padding-left: 30px;
position: relative;
}

.inclusions-list li:before {
content: '✓';
position: absolute;
left: 0;
color: #27ae60;
font-weight: bold;
}

.exclusions-list li:before {
content: '✗';
position: absolute;
left: 0;
color: #e74c3c;
font-weight: bold;
}

.inclusions-column h3 {
margin-bottom: 25px;
color: var(--primary);
position: relative;
padding-bottom: 10px;
}

.inclusions-column h3:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 50px;
height: 3px;
background-color: var(--secondary);
}


/* Map Section */
.map-section {
padding: 80px 0;
background-color: white;
}

.map-container {
position: relative;
height: 500px;
background: linear-gradient(rgba(26, 82, 118, 0.1), rgba(26, 82, 118, 0.1)), url('https://images.unsplash.com/photo-1559827260-dc66d52bef19?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80');
background-size: cover;
border-radius: 10px;
overflow: hidden;
}

.map-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
text-align: center;
padding: 30px;
}

.map-overlay h3 {
font-size: 2rem;
margin-bottom: 20px;
}

.route-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
width: 100%;
max-width: 800px;
}

.route-step {
background-color: rgba(255, 255, 255, 0.2);
padding: 15px;
border-radius: 8px;
backdrop-filter: blur(5px);
}

.route-step .step-number {
display: inline-block;
width: 30px;
height: 30px;
background-color: var(--secondary);
border-radius: 50%;
text-align: center;
line-height: 30px;
margin-right: 10px;
font-weight: bold;
}

/* Highlights Section */
.highlights-section {
padding: 80px 0;
background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5)), url('../img/leh-ladakh/Nubra-Valley.png');
background-size: cover;
background-attachment: fixed;
color: white;
}

.highlights-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}

.highlight-card {
background-color: rgba(255, 255, 255, 0.1);
padding: 30px;
border-radius: 10px;
backdrop-filter: blur(5px);
transition: transform 0.3s ease;
}

.highlight-card:hover {
transform: translateY(-10px);
background-color: rgba(255, 255, 255, 0.15);
}

.highlight-card h3 {
margin-bottom: 20px;
display: flex;
align-items: center;
}

.highlight-card h3 i {
margin-right: 10px;
font-size: 1.5rem;
}

.highlight-kargil {
border-top: 4px solid var(--kargil);
}

.highlight-nubra {
border-top: 4px solid var(--nubra);
}

.highlight-pangong {
border-top: 4px solid var(--pangong);
}

.highlight-turtuk {
border-top: 4px solid var(--turtuk);
}

/* Overview Section */
.overview-section {
padding: 80px 0;
background-color: white;
}

.section-title {
text-align: center;
margin-bottom: 60px;
color: var(--primary);
position: relative;
}

.section-title:after {
content: '';
display: block;
width: 80px;
height: 4px;
background-color: var(--primary);
margin: 15px auto;
}

.overview-content {
display: flex;
flex-wrap: wrap;
gap: 40px;
align-items: center;
}

.overview-text {
flex: 1;
min-width: 300px;
}

.overview-image {
flex: 1;
min-width: 300px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.overview-image img {
width: 100%;
height: auto;
display: block;
transition: transform 0.5s ease;
}

.overview-image:hover img {
transform: scale(1.05);
}

.highlight-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-top: 30px;
}

.feature {
text-align: center;
padding: 20px;
border-radius: 8px;
background-color: var(--light);
transition: transform 0.3s ease;
}

.feature:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.feature i {
font-size: 2.5rem;
color: var(--primary);
margin-bottom: 15px;
}

.feature-kargil i {
color: var(--kargil);
}

.feature-nubra i {
color: var(--nubra);
}

.feature-pangong i {
color: var(--pangong);
}

.feature-turtuk i {
color: var(--turtuk);
}

/* Pangong Highlight Section */
.pangong-section {
padding: 100px 0;
background:#000;
background-size: cover;
background-attachment: fixed;
color: white;
text-align: center;
}

.pangong-content {
max-width: 800px;
margin: 0 auto;
}

.pangong-content h2 {
font-size: 2.5rem;
margin-bottom: 20px;
}

.pangong-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
margin: 30px 0;
}

.pangong-stat {
background-color: rgba(255, 255, 255, 0.2);
padding: 20px;
border-radius: 8px;
backdrop-filter: blur(5px);
}

.stat-value {
font-size: 2rem;
font-weight: 700;
margin-bottom: 5px;
}


/* Responsive Styles */
@media (max-width: 768px) {
h1 {font-size: 2.5rem;}
.tagline {font-size: 1.2rem;}
section {padding: 60px 0;}
.highlight-item {flex-direction: column;text-align: center;}
.highlight-icon {margin-right: 0;margin-bottom: 15px;}
header {padding:80px 20px;}
.header-content {padding-top: 32px;}
}

@media (max-width: 480px) {
h1 {font-size: 2rem;}
.cta-button {padding: 12px 30px;font-size: 1rem;}
.section-title {font-size: 1.8rem;}
header {padding:80px 20px;}
}