@font-face {
font-family: "Young Serif";
src: url("../fonts/YoungSerif-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "Plus Jakarta Sans";
src: url("../fonts/PlusJakartaSans.ttf") format("truetype");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}

html,
body {
overflow-x: clip;
}

html {
scroll-padding-top: 80px;
}

:root {
--primary: #0A2540;
--accent: #FF6B6B;
--sand: #F4F1DE;
--white: #FFFFFF;
--text: #333333;
--text-light: #666666;
--glass-bg: rgba(255, 255, 255, 0.15);
--glass-border: rgba(255, 255, 255, 0.3);
--shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
--radius: 16px;
--transition: all 0.3s ease;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Plus Jakarta Sans', sans-serif;
color: var(--text);
background: var(--sand);
display: flex;
flex-direction: column;
min-height: 100vh;
line-height: 1.6;
}

h1, h2, h3, h4 {
font-family: 'Young Serif', serif;
color: var(--primary);
line-height: 1.2;
}

a {
text-decoration: none;
color: inherit;
}

img {
max-width: 100%;
height: auto;
display: block;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

header {
background: var(--white);
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
position: relative;
z-index: 1000;
}

@media (min-width: 993px) {
header {
position: sticky;
top: 0;
}
}

.header-flex {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}

.container.header-flex {
padding: 12px 12px;
}

.logo a {
display: flex;
align-items: center;
gap: 8px;
font-family: 'Young Serif', serif;
font-size: 1.65rem;
color: var(--primary);
}

.logo img {
border-radius: 8px;
}

.main-nav ul {
display: flex;
list-style: none;
gap: 14px;
}

.main-nav a {
font-weight: 500;
transition: var(--transition);
position: relative;
}

.main-nav a:hover {
color: var(--accent);
}

.nav-cta {
background: var(--primary);
color: var(--white) !important;
padding: 6px 12px;
border-radius: 20px;
white-space: nowrap;
}

.nav-cta:hover {
background: var(--accent);
}

.header-notice {
font-size: 0.75rem;
color: var(--text-light);
background: var(--sand);
padding: 3px 8px;
border-radius: 12px;
white-space: nowrap;
}

main {
flex: 1 0 auto;
}

section {
padding: 80px 0;
}

.section-title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 50px;
position: relative;
}

.section-title::after {
content: '';
display: block;
width: 60px;
height: 4px;
background: var(--accent);
margin: 15px auto 0;
border-radius: 2px;
}

.badge {
display: inline-block;
background: var(--accent);
color: var(--white);
padding: 6px 16px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 15px;
}

.btn-primary {
display: inline-block;
background: var(--primary);
color: var(--white);
padding: 14px 32px;
border-radius: 30px;
font-weight: 600;
border: none;
cursor: pointer;
transition: var(--transition);
font-size: 1rem;
}

.btn-primary:hover {
background: var(--accent);
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(255, 107, 107, 0.3);
}

.glass {
background: var(--glass-bg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--glass-border);
border-radius: var(--radius);
box-shadow: var(--shadow);
}

.hero {
position: relative;
height: 90vh;
min-height: 600px;
display: flex;
align-items: center;
overflow: hidden;
padding: 0;
isolation: isolate;
z-index: 0;
}

.hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}

.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(10, 37, 64, 0.8) 0%, rgba(10, 37, 64, 0.3) 100%);
z-index: 1;
}

.hero-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
width: 100%;
position: relative;
z-index: 2;
}

.hero-text h1 {
font-size: 4rem;
color: var(--white);
margin-bottom: 20px;
}

.hero-text p {
font-size: 1.2rem;
color: rgba(255,255,255,0.9);
margin-bottom: 30px;
max-width: 500px;
}

.hero-card {
padding: 40px;
color: var(--white);
}

.hero-card h3 {
color: var(--white);
font-size: 1.8rem;
margin-bottom: 25px;
}

.form-group {
margin-bottom: 20px;
}

.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
font-size: 0.9rem;
}

.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 12px 16px;
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.3);
background: rgba(255,255,255,0.1);
color: var(--white);
font-family: inherit;
font-size: 1rem;
transition: var(--transition);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
color: rgba(255,255,255,0.6);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--accent);
background: rgba(255,255,255,0.2);
}

.form-group select option {
color: var(--text);
}

.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}

.about-text h2 {
font-size: 2.2rem;
margin-bottom: 20px;
}

.about-text p {
font-size: 1.05rem;
color: var(--text-light);
}

.blob-shape {
border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
transition: var(--transition);
}

.blob-shape:hover {
border-radius: 60% 40% 40% 60% / 40% 70% 30% 60%;
}

.trips-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}

.trip-card {
background: var(--white);
border-radius: var(--radius);
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
transition: var(--transition);
display: flex;
flex-direction: column;
}

.trip-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.trip-img-wrap {
position: relative;
height: 250px;
overflow: hidden;
clip-path: polygon(0 0, 100% 0, 100% 85%, 90% 100%, 0 100%);
}

.trip-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}

.trip-card:hover .trip-img-wrap img {
transform: scale(1.1);
}

.trip-badge {
position: absolute;
top: 20px;
right: 20px;
background: var(--accent);
color: var(--white);
padding: 6px 12px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
}

.trip-info {
padding: 25px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.trip-info h3 {
font-size: 1.4rem;
margin-bottom: 15px;
}

.trip-price {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary);
font-family: 'Young Serif', serif;
}

.trip-price span {
font-size: 0.9rem;
color: var(--text-light);
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 400;
}

.regions-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}

.region-card {
position: relative;
height: 300px;
border-radius: 30px;
overflow: hidden;
cursor: pointer;
transition: var(--transition);
}

.region-card:nth-child(even) {
border-radius: 50% 50% 30px 30px;
}

.region-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}

.region-card:hover img {
transform: scale(1.1);
}

.region-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 30px;
background: linear-gradient(to top, rgba(10,37,64,0.9), transparent);
color: var(--white);
}

.region-overlay h3 {
color: var(--white);
font-size: 1.5rem;
}

.why-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}

.why-card {
background: var(--white);
padding: 40px 30px;
border-radius: var(--radius);
text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
transition: var(--transition);
position: relative;
overflow: hidden;
}

.why-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(90deg, var(--primary), var(--accent));
}

.why-card:hover {
transform: translateY(-5px);
}

.why-icon {
width: 70px;
height: 70px;
background: var(--sand);
color: var(--accent);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
margin: 0 auto 20px;
}

.why-card h3 {
font-size: 1.3rem;
margin-bottom: 15px;
}

.faq-custom-section {
background: var(--primary);
color: var(--white);
}

.faq-custom-section .section-title,
.faq-custom-section h2 {
color: var(--white);
}

.faq-header {
text-align: center;
max-width: 800px;
margin: 0 auto 50px;
}

.faq-header p {
font-size: 1.1rem;
opacity: 0.8;
margin-top: 15px;
}

.faq-accordion {
max-width: 800px;
margin: 0 auto;
}

.faq-item {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 12px;
margin-bottom: 15px;
overflow: hidden;
}

.faq-question {
width: 100%;
padding: 20px 25px;
background: none;
border: none;
color: var(--white);
font-size: 1.1rem;
font-weight: 600;
text-align: left;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-family: inherit;
}

.faq-question i {
transition: var(--transition);
}

.faq-item.active .faq-question i {
transform: rotate(45deg);
}

.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}

.faq-answer p {
padding: 0 25px 20px;
opacity: 0.8;
line-height: 1.7;
}

.faq-item.active .faq-answer {
max-height: 200px;
}

.resources-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
}

.resource-card {
background: var(--white);
padding: 30px;
border-radius: var(--radius);
text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
transition: var(--transition);
border: 2px solid transparent;
}

.resource-card:hover {
border-color: var(--accent);
transform: translateY(-5px);
}

.resource-card i {
font-size: 2.5rem;
color: var(--accent);
margin-bottom: 20px;
}

.resource-card h3 {
font-size: 1.2rem;
margin-bottom: 10px;
}

.blogs-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}

.blog-card {
background: var(--white);
border-radius: var(--radius);
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
transition: var(--transition);
}

.blog-card:hover {
transform: translateY(-5px);
}

.blog-card img {
height: 220px;
width: 100%;
object-fit: cover;
}

.blog-content {
padding: 25px;
}

.blog-date {
font-size: 0.85rem;
color: var(--accent);
font-weight: 600;
}

.blog-content h3 {
font-size: 1.3rem;
margin: 10px 0;
}

.blog-link {
display: inline-block;
margin-top: 15px;
color: var(--primary);
font-weight: 600;
transition: var(--transition);
}

.blog-link:hover {
color: var(--accent);
}

.blog-link i {
margin-left: 5px;
transition: var(--transition);
}

.blog-link:hover i {
transform: translateX(5px);
}

.portal-section {
background: linear-gradient(135deg, var(--sand) 0%, #e8e4c8 100%);
}

.portal-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
background: var(--white);
padding: 60px;
border-radius: 40px;
box-shadow: 0 20px 60px rgba(0,0,0,0.05);
}

.portal-text h2 {
font-size: 2.5rem;
margin-bottom: 20px;
}

.portal-text p {
font-size: 1.1rem;
color: var(--text-light);
margin-bottom: 30px;
}

.portal-img img {
border-radius: 20px;
clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
}

.contact-info h2 {
font-size: 2.2rem;
margin-bottom: 20px;
}

.contact-info > p {
color: var(--text-light);
margin-bottom: 30px;
font-size: 1.05rem;
}

.contact-details {
display: flex;
flex-direction: column;
gap: 25px;
}

.contact-item {
display: flex;
gap: 20px;
align-items: flex-start;
}

.contact-item i {
width: 50px;
height: 50px;
background: var(--primary);
color: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
flex-shrink: 0;
}

.contact-item h4 {
font-size: 1.1rem;
margin-bottom: 5px;
}

.contact-form-wrap {
padding: 40px;
background: var(--white);
border: 1px solid rgba(10,37,64,0.1);
}

.contact-form-wrap h3 {
font-size: 1.8rem;
margin-bottom: 25px;
}

.contact-form-wrap .form-group label {
color: var(--text);
}

.contact-form-wrap .form-group input,
.contact-form-wrap .form-group textarea {
background: var(--sand);
color: var(--text);
border: 1px solid transparent;
}

.contact-form-wrap .form-group input:focus,
.contact-form-wrap .form-group textarea:focus {
border-color: var(--accent);
background: var(--white);
}

.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}

footer {
background: var(--primary);
color: rgba(255,255,255,0.8);
margin-top: auto;
}

.footer-flex {
display: grid;
grid-template-columns: 2fr 1fr 1fr 2fr;
gap: 40px;
padding: 60px 0 40px;
}

.footer-col .logo a {
color: var(--white);
margin-bottom: 20px;
}

.footer-desc {
margin-top: 20px;
font-size: 0.95rem;
line-height: 1.7;
}

.footer-col h4 {
color: var(--white);
font-size: 1.2rem;
margin-bottom: 20px;
}

.footer-col ul {
list-style: none;
}

.footer-col ul li {
margin-bottom: 12px;
}

.footer-col ul li a {
transition: var(--transition);
font-size: 0.95rem;
}

.footer-col ul li a:hover {
color: var(--accent);
}

.footer-contact li {
font-size: 0.95rem;
line-height: 1.6;
}

.footer-disclaimer {
font-size: 0.85rem;
line-height: 1.7;
opacity: 0.7;
}

.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.1);
padding: 20px 0;
text-align: center;
font-size: 0.9rem;
}

.legal-content {
max-width: 800px;
margin: 0 auto;
padding: 60px 20px;
word-break: break-word;
}

.legal-content h1 {
font-size: 2.5rem;
margin-bottom: 30px;
text-align: center;
}

.legal-content h2 {
font-size: 1.8rem;
margin: 40px 0 20px;
}

.legal-content h3 {
font-size: 1.4rem;
margin: 30px 0 15px;
}

.legal-content p {
margin-bottom: 20px;
line-height: 1.8;
color: var(--text-light);
}

.legal-content ul {
margin: 20px 0;
padding-left: 20px;
}

.legal-content ul li {
margin-bottom: 10px;
line-height: 1.7;
color: var(--text-light);
}

.legal-content .last-updated {
text-align: center;
font-style: italic;
color: var(--text-light);
margin-bottom: 30px;
}

.thanks-content {
flex: 1 0 auto;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 60px 20px;
}

.thanks-box {
background: var(--white);
padding: 60px;
border-radius: 30px;
box-shadow: 0 20px 60px rgba(0,0,0,0.1);
max-width: 600px;
}

.thanks-box img {
width: 80px;
height: 80px;
margin: 0 auto 20px;
border-radius: 50%;
}

.thanks-box h1 {
font-size: 2.5rem;
margin-bottom: 20px;
}

.thanks-box p {
font-size: 1.1rem;
color: var(--text-light);
line-height: 1.8;
}

.tour-hero {
height: 50vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
color: var(--white);
text-align: center;
isolation: isolate;
z-index: 0;
overflow: hidden;
}

.tour-hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}

.tour-hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(10,37,64,0.6);
z-index: 1;
}

.tour-hero h1,
.tour-hero .container {
position: relative;
z-index: 2;
}

.tour-hero h1 {
color: var(--white);
font-size: 3rem;
}

.tour-details {
padding: 80px 0;
}

.tour-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
margin-bottom: 60px;
}

.tour-grid img {
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.tour-grid h2 {
font-size: 2rem;
margin-bottom: 20px;
}

.tour-grid p {
color: var(--text-light);
line-height: 1.8;
margin-bottom: 15px;
}

.tour-faq {
background: var(--sand);
padding: 80px 0;
}

@media (max-width: 992px) {
body {
overflow-x: visible;
}

.hero-content,
.about-grid,
.portal-content,
.contact-grid,
.tour-grid {
grid-template-columns: 1fr;
}

.hero-text h1 {
font-size: 2.5rem;
}

.trips-grid,
.regions-grid,
.why-grid,
.resources-grid,
.blogs-grid {
grid-template-columns: repeat(2, 1fr);
}

.footer-flex {
grid-template-columns: 1fr 1fr;
}

.header-flex {
flex-wrap: wrap;
}

.header-notice {
white-space: normal;
}

.main-nav {
display: none;
}

main {
padding-top: 56px;
}

main > .hero:first-child {
margin-top: -124px;
padding-top: 88px;
}

main > .tour-page-hero:first-child {
margin-top: -56px;
padding-top: 56px;
}

.hero {
height: auto;
min-height: 90vh;
overflow: visible;
align-items: flex-start;
padding-bottom: 48px;
}

.hero-content {
padding-bottom: 24px;
}
}

@media (max-width: 576px) {
.trips-grid,
.regions-grid,
.why-grid,
.resources-grid,
.blogs-grid,
.footer-flex {
grid-template-columns: 1fr;
}

.form-row {
grid-template-columns: 1fr;
}

.portal-content {
padding: 30px;
}

.section-title {
font-size: 2rem;
}
}

.tour-page-hero {
  height: 60vh;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
  z-index: 0;
}
.tour-page-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.tour-page-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(10, 37, 64, 0.85) 0%, rgba(10, 37, 64, 0.4) 100%);
  z-index: 1;
}
.tour-page-hero .container {
  position: relative;
  z-index: 2;
}
.tour-page-hero h1 {
  font-size: 3.5rem;
  color: var(--white);
  margin-bottom: 15px;
}
.tour-page-hero p {
  font-size: 1.2rem;
  opacity: 0.9;
}
.tour-overview {
  padding: 80px 0;
}
.tour-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.tour-overview-img {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  position: relative;
}
.tour-overview-img img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
}
.tour-overview-text h2 {
  font-size: 2.2rem;
  margin-bottom: 20px;
}
.tour-overview-text p {
  color: var(--text-light);
  line-height: 1.8;
  margin-bottom: 15px;
}
.tour-stats {
  display: flex;
  gap: 30px;
  margin: 30px 0;
}
.tour-stat {
  text-align: center;
}
.tour-stat-value {
  font-family: 'Young Serif', serif;
  font-size: 2rem;
  color: var(--accent);
  display: block;
}
.tour-stat-label {
  font-size: 0.9rem;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.tour-itinerary {
  background: var(--sand);
  padding: 80px 0;
}
.itinerary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 40px;
}
.itinerary-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  transition: var(--transition);
}
.itinerary-card:hover {
  transform: translateY(-5px);
}
.itinerary-card-img {
  height: 200px;
  overflow: hidden;
}
.itinerary-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
}
.itinerary-card:hover .itinerary-card-img img {
  transform: scale(1.05);
}
.itinerary-card-content {
  padding: 25px;
}
.itinerary-card-content h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
}
.itinerary-card-content p {
  color: var(--text-light);
  font-size: 0.95rem;
  line-height: 1.6;
}
.tour-cta-section {
  padding: 80px 0;
  background: linear-gradient(135deg, var(--primary) 0%, #163a60 100%);
  color: var(--white);
  text-align: center;
}
.tour-cta-section h2 {
  color: var(--white);
  font-size: 2.5rem;
  margin-bottom: 20px;
}
.tour-cta-section p {
  font-size: 1.1rem;
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto 30px;
}
.tour-cta-form {
  max-width: 600px;
  margin: 0 auto;
  padding: 40px;
  color: var(--white);
}
.tour-cta-form label {
  color: var(--white);
}
.tour-cta-form input {
  background: rgba(255,255,255,0.1);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.3);
}
.tour-cta-form input::placeholder {
  color: rgba(255,255,255,0.6);
}
.tour-cta-form .btn-primary {
  width: 100%;
  margin-top: 10px;
}
@media (max-width: 992px) {
  .tour-overview-grid {
    grid-template-columns: 1fr;
  }
  .itinerary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .tour-page-hero h1 {
    font-size: 2.5rem;
  }
}
@media (max-width: 576px) {
  .itinerary-grid {
    grid-template-columns: 1fr;
  }
  .tour-stats {
    flex-direction: column;
    gap: 15px;
  }
}

[data-aos="fade-right"]:not(.aos-animate) {
transform: translate3d(-32px, 0, 0) !important;
}

[data-aos="fade-left"]:not(.aos-animate) {
transform: translate3d(32px, 0, 0) !important;
}

[data-aos="flip-left"]:not(.aos-animate) {
transform: translate3d(0, 24px, 0) !important;
opacity: 0;
}

[data-aos="flip-left"].aos-animate {
transform: translate3d(0, 0, 0) !important;
}

[data-aos="zoom-in"]:not(.aos-animate) {
transform: scale(0.96) !important;
}

@media (max-width: 900px) {
[data-aos="zoom-in"] {
transform: none !important;
}
}

.about-grid > *,
.contact-grid > *,
.tour-overview-grid > *,
.hero-content > * {
min-width: 0;
max-width: 100%;
}

.hero-text h1 {
font-size: clamp(2rem, 5vw, 4rem);
}

.section-title {
font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
max-width: 100%;
}

.hero-card .btn-primary,
.contact-form-wrap .btn-primary,
.tour-cta-form .btn-primary {
width: 100%;
max-width: 100%;
}

@media (max-width: 900px) {
[data-aos] {
transform: none !important;
opacity: 1 !important;
transition: none !important;
}

.hero-content > *,
.about-grid > *,
.contact-grid > *,
.tour-overview-grid > * {
min-width: 0;
max-width: 100%;
}
}

@media (max-width: 640px) {
.container.header-flex {
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 12px 10px 16px;
}

main {
padding-top: 64px;
}

main > .hero:first-child {
margin-top: -114px;
padding-top: 96px;
}

main > .tour-page-hero:first-child {
margin-top: -64px;
padding-top: 64px;
}

.hero {
min-height: auto;
padding-bottom: 56px;
}

.hero-content {
gap: 32px;
padding-bottom: 32px;
}

.legal-content {
padding: 32px 16px 48px;
}

.thanks-content {
padding: 32px 16px 48px;
}

.logo {
width: 100%;
display: flex;
justify-content: center;
}

.logo a {
flex-direction: column;
align-items: center;
justify-content: center;
}

.header-notice {
text-align: center;
width: 100%;
}

.header-notice,
.logo a span,
.footer-col {
word-break: break-all;
}

.logo a span {
min-width: 0;
flex: 1;
}
}

@media (max-width: 480px) {
.container:not(.header-flex) {
padding: 0 14px;
}

.container.header-flex {
padding: 12px 8px 20px;
}

section {
padding: 72px 0;
}

.hero-card,
.contact-form-wrap,
.tour-cta-form,
.thanks-box {
padding: 24px;
}

.hero-text h1 {
font-size: clamp(1.75rem, 8vw, 2.5rem);
}

.section-title {
font-size: clamp(1.5rem, 6vw, 2rem);
}
}

.hero-card input[type="date"] {
  color-scheme: dark;
}

.trip-btn {
  display: inline-block;
  align-self: flex-start;
  margin-top: 20px;
  padding: 12px 24px;
  background: var(--primary);
  color: var(--white);
  border-radius: 25px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: var(--transition);
  text-align: center;
}

.trip-btn:hover {
  background: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(255, 107, 107, 0.3);
}

.trip-btn i {
  margin-left: 8px;
  transition: var(--transition);
}

.trip-btn:hover i {
  transform: translateX(4px);
}