/* Premium Travel Agency CSS */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-color: #77DD77;
--secondary-color: #A0826D;
--accent-color: #77DD77;
--tertiary-color: #A0826D;
--earth-tone: #D2B48C;
--forest-green: #77DD77;
--warm-ochre: #A0826D;
--sky-blue: #87CEEB;
--burnt-sienna: #BC8F8F;
--olive-green: #77DD77;
--dark-color: #1e293b;
--light-color: #FFF8DC;
--gradient-primary: linear-gradient(135deg, #77DD77 0%, #9AE69A 50%, #A0826D 100%);
--gradient-secondary: linear-gradient(135deg, #A0826D 0%, #C4A582 50%, #77DD77 100%);
--gradient-accent: linear-gradient(135deg, #77DD77 0%, #9AE69A 50%, #BFFFBF 100%);
--gradient-earth: linear-gradient(135deg, #A0826D 0%, #D2B48C 50%, #C4A582 100%);
--gradient-sky: linear-gradient(135deg, #77DD77 0%, #A0826D 50%, #9AE69A 100%);
--shadow-light: 0 4px 20px rgba(119, 221, 119, 0.2);
--shadow-medium: 0 8px 30px rgba(160, 130, 109, 0.25);
--shadow-heavy: 0 15px 50px rgba(119, 221, 119, 0.3);
--shadow-3d: 0 20px 60px rgba(119, 221, 119, 0.4), 0 10px 30px rgba(160, 130, 109, 0.3);
--border-radius: 20px;
--transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
--transition-bounce: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
body {
font-family: 'Poppins', sans-serif;
line-height: 1.6;
color: var(--dark-color);
overflow-x: hidden;
scroll-behavior: smooth;
background: linear-gradient(135deg, #fefefe 0%, #f8fafc 30%, #e2e8f0 100%);
font-size: 16.5px;
}
/* ===== CRYSTAL CLEAR IMAGES - NO BLUR ===== */
/* ===== CRYSTAL CLEAR IMAGES - NO BLUR ===== */
/* Removed pixelated rendering to fix photo quality */
/* For package cards, galleries, and thumbnails */
.package-card img,
.gallery-image img,
.trek-card img,
.destination-card img,
.blog-card img,
img[src*="/uploads/"] {
/* Removed pixelated rendering to fix photo quality */
object-fit: cover;
/* Removed potential blur-causing GPU properties */
}
/* Admin thumbnails */
.gallery-thumbnail,
td img,
.preview-img {
image-rendering: auto; /* Keep thumbnails smooth */
max-width: 100%;
height: auto;
}
/* ===== END IMAGE QUALITY FIX ===== */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 20%, rgba(236, 72, 153, 0.08) 0%, transparent 60%),
radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.06) 0%, transparent 60%),
radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.04) 0%, transparent 70%);
pointer-events: none;
z-index: -2;
}
body::after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
url('data:image/svg+xml,'),
url('data:image/svg+xml,');
background-size: 600px 600px, 400px 400px;
background-position: -100px -100px, 200px 150px;
animation: globalPatternFloat 35s ease-in-out infinite;
pointer-events: none;
z-index: -1;
}
@keyframes globalPatternFloat {
0%, 100% {
transform: translateX(0) translateY(0) rotate(0deg);
opacity: 0.8;
}
50% {
transform: translateX(-40px) translateY(-25px) rotate(180deg);
opacity: 1;
}
}
@keyframes bodyGlow {
0%, 100% { opacity: 0.8; }
50% { opacity: 1; }
}
@keyframes bodyFloat {
0%, 100% {
transform: scale(1) rotate(0deg);
filter: hue-rotate(0deg);
}
50% {
transform: scale(1.1) rotate(5deg);
filter: hue-rotate(20deg);
}
}
/* Loading Screen */
#loading-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #77DD77, #9AE69A, #A0826D);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
.loading-content {
text-align: center;
color: white;
}
.plane-loader {
font-size: 3rem;
margin-bottom: 2rem;
animation: fly 2s ease-in-out infinite;
}
.loading-content h3 {
font-size: 1.5rem;
margin-bottom: 2rem;
font-weight: 300;
}
.loading-bar {
width: 200px;
height: 4px;
background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
overflow: hidden;
margin: 0 auto;
}
.loading-progress {
height: 100%;
background: #A0826D;
border-radius: 2px;
animation: loading 2s ease-in-out infinite;
}
@keyframes fly {
0% {
transform: translateX(-100px) translateY(20px) rotate(-15deg);
opacity: 0;
}
50% {
transform: translateX(0) translateY(0) rotate(0deg);
opacity: 1;
}
100% {
transform: translateX(100px) translateY(-20px) rotate(15deg);
opacity: 0;
}
}
@keyframes loading {
0% { width: 0%; }
50% { width: 70%; }
100% { width: 100%; }
}
/* Navigation - Main Header */
.navbar,
.main-header {
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(20px);
padding: 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 1000;
transition: var(--transition);
min-height: 100px;
max-height: 100px;
display: flex;
align-items: center;
transform: translateY(0);
overflow: visible;
}
.navbar.hidden-header,
.main-header.hidden-header {
transform: translateY(-100%);
opacity: 0;
visibility: hidden;
}
.navbar.scrolled,
.main-header.scrolled {
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.navbar .container,
.main-header .container {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0 15px;
margin: 0 auto;
}
/* Desktop Layout: Logo Left, Name Center, Menu Right */
@media (min-width: 992px) {
.navbar .container {
display: flex;
align-items: center;
justify-content: space-between;
}
.desktop-logo {
flex: 0 0 auto;
margin: 0;
padding: 0;
}
.brand-name-center {
flex: 1;
text-align: center;
position: static;
transform: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.mobile-logo {
display: none !important;
}
.navbar-collapse {
flex: 0 0 auto;
margin: 0;
}
}
/* Mobile Layout: Toggle Left, Name Center, Logo Right */
@media (max-width: 991px) {
.navbar .container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 15px;
height: 90px;
overflow: visible;
}
.brand-logo-mobile {
height: 140px;
max-height: 140px;
margin: -25px 0 -50px 0;
transform: scale(1.3);
}
.brand-text {
font-size: 2rem;
transform: scale(1.1);
transform-origin: left center;
}
.navbar-toggler {
margin-top: -5px;
}
.brand-logo-mobile {
height: 140px;
max-height: 140px;
margin: -25px 0 -20px 0;
transform: scale(1.3);
}
.desktop-logo {
display: none;
}
.navbar-collapse {
order: 4;
width: 100%;
transition: all 0.3s ease-in-out !important;
background: rgba(255, 255, 255, 0.98);
position: absolute;
top: 100%;
left: 0;
right: 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 15px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
}
.navbar-collapse.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
}
.brand-container {
display: flex;
align-items: center;
gap: 10px;
padding: 0;
margin: 0;
}
.navbar-brand {
margin: 0;
padding: 0;
display: flex;
align-items: center;
}
.brand-logo {
height: 140px;
width: auto;
max-height: 140px;
object-fit: contain;
transition: transform 0.3s ease;
padding: 0;
margin: -20px 0;
transform: scale(1.2);
}
.brand-logo-mobile {
height: 140px;
width: auto;
max-height: 140px;
object-fit: contain;
transition: transform 0.3s ease;
padding: 0;
margin: -25px 0 -20px 0;
transform: scale(1.3);
}
.brand-logo:hover {
transform: scale(1.05);
}
.brand-icon {
font-size: 1.5rem;
animation: rotate 3s linear infinite;
transform: translateY(-8px);
}
.brand-text {
font-size: 1.5rem;
font-weight: 700;
color: #2d8a2d;
margin: 0;
padding: 0;
line-height: 1;
text-align: center;
display: block;
width: 100%;
transform: scale(1.2);
transform-origin: left center;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.navbar-toggler {
border: none;
padding: 8px;
width: 45px;
height: 45px;
position: relative;
background: transparent;
z-index: 1100;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
}
.navbar-toggler:focus {
box-shadow: none;
outline: none;
}
.navbar-toggler span {
display: block;
width: 28px;
height: 4px;
background: #2d8a2d;
margin: 3px 0;
transition: all 0.3s ease;
border-radius: 2px;
transform-origin: center;
}
/* Shorter top and bottom lines */
.navbar-toggler span:nth-child(1),
.navbar-toggler span:nth-child(3) {
width: 20px;
height: 4px;
}
/* Middle line stays full width and thicker */
.navbar-toggler span:nth-child(2) {
width: 28px;
height: 4px;
}
/* Transform hamburger to X when menu is open */
.navbar-toggler[aria-expanded="true"] span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
width: 28px;
}
.navbar-toggler[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
transform: translateX(-10px);
}
.navbar-toggler[aria-expanded="true"] span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
width: 28px;
}
.nav-link {
color: #333 !important;
margin: 0 6px;
font-weight: 600;
position: relative;
transition: var(--transition);
overflow: hidden;
font-size: 0.9rem;
padding: 0.5rem 0.75rem !important;
line-height: 1.2;
}
.nav-link:hover {
color: #2d8a2d !important;
transform: translateY(-2px);
}
/* Back to Blog Button */
.back-to-blog-btn {
margin-top: 20px;
margin-bottom: 20px;
padding: 10px 20px;
border-radius: 25px;
font-weight: 600;
transition: all 0.3s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
z-index: 1001;
position: relative;
}
.back-to-blog-btn:hover {
background-color: var(--primary-color);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(119, 221, 119, 0.3);
}
/* Enhanced Mobile Navigation Fixes */
@media (max-width: 991px) {
/* Ensure navbar elements are clickable */
.navbar {
position: relative !important;
}
.navbar-toggler {
position: relative !important;
z-index: 1102 !important;
pointer-events: auto !important;
cursor: pointer !important;
}
.navbar-brand {
position: relative !important;
z-index: 1100 !important;
pointer-events: auto !important;
cursor: pointer !important;
}
.brand-name-center {
position: relative !important;
z-index: 1100 !important;
pointer-events: auto !important;
}
.mobile-logo {
position: relative !important;
z-index: 1100 !important;
pointer-events: auto !important;
}
/* Fix mobile menu dropdown */
.navbar-collapse {
position: relative !important;
z-index: 1099 !important;
}
.navbar-collapse.show {
position: absolute !important;
top: 100% !important;
left: 0 !important;
right: 0 !important;
background: rgba(255, 255, 255, 0.98) !important;
backdrop-filter: blur(20px) !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
z-index: 1098 !important;
pointer-events: auto !important;
}
/* Ensure all nav links are clickable */
.navbar-nav {
pointer-events: auto !important;
}
.nav-item {
pointer-events: auto !important;
}
.nav-link {
pointer-events: auto !important;
cursor: pointer !important;
z-index: 1099 !important;
position: relative !important;
}
.dropdown-menu {
position: absolute !important;
z-index: 1100 !important;
pointer-events: auto !important;
}
.dropdown-item {
pointer-events: auto !important;
cursor: pointer !important;
}
/* Fix overlay issues */
body {
position: relative !important;
}
.navbar-collapse.show ~ * {
position: relative !important;
z-index: 1 !important;
}
}
.navbar .dropdown-menu {
background: white;
border: none;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
border-radius: 8px;
padding: 0.35rem 0;
margin-top: 0.25rem;
}
.navbar .dropdown-item {
color: #333;
padding: 0.5rem 1.5rem;
transition: all 0.3s;
font-weight: 500;
}
.navbar .dropdown-item:hover {
background: var(--primary-color);
color: white;
}
/* Hero Section */
.hero {
min-height: 100vh;
background: linear-gradient(180deg, #0a1628 0%, #1a3a5c 25%, #2d6187 50%, #4a90b5 75%, #87ceeb 100%);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
position: relative;
overflow: hidden;
}
/* ===== HERO SLIDESHOW ===== */
.hero-slideshow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.hero-slideshow .slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 2s ease-in-out;
z-index: 0;
}
.hero-slideshow .slide.active {
opacity: 1;
z-index: 0;
}
/* Overlay to darken slideshow for better text readability */
.hero-slideshow::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
z-index: 1;
}
/* ===== END HERO SLIDESHOW ===== */
/* ===== HERO LANDSCAPE - Realistic Mountains & Forest ===== */
.hero-landscape {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden;
pointer-events: none;
}
/* ===== HERO LANDSCAPE - Realistic Mountains & Forest ===== */
.hero-landscape {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
}
/* Realistic Sky with dawn/dusk colors - HIDDEN to show slideshow */
.hero-sky {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
display: none;
}
/* Sun glow - dynamic position based on time */
.hero-sun {
position: absolute;
width: 80px;
height: 80px;
background: radial-gradient(circle,
rgba(255, 250, 220, 1) 0%,
rgba(255, 220, 150, 0.8) 25%,
rgba(255, 180, 100, 0.4) 50%,
rgba(255, 150, 80, 0.2) 70%,
transparent 100%);
border-radius: 50%;
filter: blur(2px);
z-index: 10;
transition: all 1s ease-out;
/* Default position - will be overridden by JS */
top: 12%;
right: 18%;
opacity: 1;
}
.hero-sun::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
background: radial-gradient(circle,
rgba(255, 255, 240, 1) 0%,
rgba(255, 230, 150, 0.9) 50%,
transparent 100%);
border-radius: 50%;
animation: sunCorePulse 4s ease-in-out infinite;
}
@keyframes sunCorePulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.9; }
}
/* Sun rays */
.hero-sun::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
background: conic-gradient(
from 0deg,
transparent 0deg,
rgba(255, 200, 100, 0.3) 10deg,
transparent 20deg,
transparent 30deg,
rgba(255, 200, 100, 0.3) 40deg,
transparent 50deg,
transparent 60deg,
rgba(255, 200, 100, 0.3) 70deg,
transparent 80deg,
transparent 90deg,
rgba(255, 200, 100, 0.3) 100deg,
transparent 110deg,
transparent 120deg,
rgba(255, 200, 100, 0.3) 130deg,
transparent 140deg,
transparent 150deg,
rgba(255, 200, 100, 0.3) 160deg,
transparent 170deg,
transparent 180deg,
rgba(255, 200, 100, 0.3) 190deg,
transparent 200deg,
transparent 210deg,
rgba(255, 200, 100, 0.3) 220deg,
transparent 230deg,
transparent 240deg,
rgba(255, 200, 100, 0.3) 250deg,
transparent 260deg,
transparent 270deg,
rgba(255, 200, 100, 0.3) 280deg,
transparent 290deg,
transparent 300deg,
rgba(255, 200, 100, 0.3) 310deg,
transparent 320deg,
transparent 330deg,
rgba(255, 200, 100, 0.3) 340deg,
transparent 350deg,
transparent 360deg
);
border-radius: 50%;
animation: sunRaysRotate 30s linear infinite;
}
@keyframes sunRaysRotate {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* Moon styling */
.hero-moon {
position: absolute;
width: 70px;
height: 70px;
background: radial-gradient(circle at 35% 35%,
#f5f5f0 0%,
#e8e8e0 30%,
#d0d0c8 60%,
#c0c0b8 100%);
border-radius: 50%;
z-index: 10;
transition: all 1s ease-out;
box-shadow:
0 0 20px rgba(255, 255, 240, 0.5),
0 0 40px rgba(255, 255, 220, 0.3),
0 0 60px rgba(200, 200, 180, 0.2),
inset -8px -5px 15px rgba(0, 0, 0, 0.1);
/* Default hidden */
opacity: 0;
top: 15%;
right: 20%;
}
/* Moon glow */
.hero-moon::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background: radial-gradient(circle,
rgba(255, 255, 240, 0.3) 0%,
rgba(200, 200, 180, 0.15) 40%,
transparent 70%);
border-radius: 50%;
animation: moonGlow 5s ease-in-out infinite;
}
@keyframes moonGlow {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}
/* Moon craters */
.moon-crater {
position: absolute;
background: radial-gradient(circle,
rgba(180, 180, 170, 0.6) 0%,
rgba(160, 160, 150, 0.4) 50%,
transparent 100%);
border-radius: 50%;
}
.crater-1 {
width: 12px;
height: 12px;
top: 20%;
left: 25%;
}
.crater-2 {
width: 8px;
height: 8px;
top: 50%;
left: 55%;
}
.crater-3 {
width: 15px;
height: 15px;
top: 60%;
left: 20%;
}
/* Stars container */
.hero-stars {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 60%;
z-index: 0;
opacity: 0;
transition: opacity 1s ease-out;
pointer-events: none;
}
.star {
position: absolute;
width: 3px;
height: 3px;
background: white;
border-radius: 50%;
animation: starTwinkle 2s ease-in-out infinite;
box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
}
.star:nth-child(1) { top: 10%; left: 15%; animation-delay: 0s; }
.star:nth-child(2) { top: 20%; left: 35%; animation-delay: 0.3s; width: 2px; height: 2px; }
.star:nth-child(3) { top: 8%; left: 55%; animation-delay: 0.7s; }
.star:nth-child(4) { top: 25%; left: 75%; animation-delay: 1s; width: 4px; height: 4px; }
.star:nth-child(5) { top: 15%; left: 90%; animation-delay: 0.5s; }
.star:nth-child(6) { top: 30%; left: 10%; animation-delay: 1.2s; width: 2px; height: 2px; }
.star:nth-child(7) { top: 5%; left: 45%; animation-delay: 0.8s; }
.star:nth-child(8) { top: 35%; left: 60%; animation-delay: 1.5s; width: 2px; height: 2px; }
.star:nth-child(9) { top: 12%; left: 80%; animation-delay: 0.2s; }
.star:nth-child(10) { top: 28%; left: 25%; animation-delay: 1.8s; width: 4px; height: 4px; }
.star:nth-child(11) { top: 18%; left: 5%; animation-delay: 0.4s; }
.star:nth-child(12) { top: 22%; left: 50%; animation-delay: 1.1s; width: 2px; height: 2px; }
.star:nth-child(13) { top: 8%; left: 70%; animation-delay: 0.6s; }
.star:nth-child(14) { top: 32%; left: 85%; animation-delay: 1.4s; }
.star:nth-child(15) { top: 15%; left: 30%; animation-delay: 0.9s; width: 3px; height: 3px; }
@keyframes starTwinkle {
0%, 100% { opacity: 0.4; transform: scale(1); }
50% { opacity: 1; transform: scale(1.3); }
}
/* Time-based sky color classes - applied via JavaScript */
.hero-sky.sky-dawn {
background: linear-gradient(180deg,
#1a1a2e 0%,
#2d3a4a 10%,
#4a5568 20%,
#7c6f8a 35%,
#c9a0a0 50%,
#e8b4a0 65%,
#f5d0a9 80%,
#ffecd2 100%) !important;
animation: none !important;
}
.hero-sky.sky-morning {
background: linear-gradient(180deg,
#1e3a5f 0%,
#2d5a7b 15%,
#4a8ab5 35%,
#7ec8e3 55%,
#a8e0f0 75%,
#d4f1f9 100%) !important;
animation: none !important;
}
.hero-sky.sky-noon {
background: linear-gradient(180deg,
#0d4f8c 0%,
#1a6bb5 20%,
#2d8ad4 40%,
#4da6e8 60%,
#87ceeb 80%,
#b0e2ff 100%) !important;
animation: none !important;
}
.hero-sky.sky-afternoon {
background: linear-gradient(180deg,
#1a5276 0%,
#2874a6 20%,
#3498db 40%,
#5dade2 60%,
#85c1e9 80%,
#aed6f1 100%) !important;
animation: none !important;
}
.hero-sky.sky-evening {
background: linear-gradient(180deg,
#1a1a2e 0%,
#2d2d44 15%,
#4a3f55 30%,
#8b5a5a 45%,
#c97b63 60%,
#e8a87c 75%,
#f5c89a 90%,
#ffd9b3 100%) !important;
animation: none !important;
}
.hero-sky.sky-dusk {
background: linear-gradient(180deg,
#0d0d1a 0%,
#1a1a2e 15%,
#2d2d44 30%,
#4a3f55 45%,
#6b4f5a 60%,
#8b5f5f 75%,
#a06f6f 90%,
#b58080 100%) !important;
animation: none !important;
}
.hero-sky.sky-night {
background: linear-gradient(180deg,
#000510 0%,
#0a0f1a 20%,
#0f1525 40%,
#141a2e 60%,
#1a2038 80%,
#1f2642 100%) !important;
animation: none !important;
}
/* Mountains container - MUCH TALLER */
.hero-mountains {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 92%;
z-index: 2;
}
/* Back mountain - distant blue peak - VERY TALL */
.mountain-back {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom,
transparent 0%,
#5a9abe 8%,
#6aaacc 15%,
#7abadc 25%,
#8acaec 40%,
#9ad5f5 60%,
#aae0ff 100%);
clip-path: polygon(
0% 100%, 0% 30%, 10% 25%, 20% 15%, 30% 20%, 40% 10%, 50% 5%,
60% 8%, 70% 12%, 80% 18%, 90% 22%, 100% 28%, 100% 100%
);
opacity: 0.8;
}
/* Front mountain - prominent blue peak - VERY TALL */
.mountain-front {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 88%;
background: linear-gradient(to bottom,
transparent 0%,
#2d5068 5%,
#3d6888 12%,
#4d7898 20%,
#5d88a8 35%,
#6d98b8 55%,
#7da8c8 75%,
#8db8d8 100%);
clip-path: polygon(
0% 100%, 0% 28%, 8% 23%, 15% 15%, 22% 18%, 28% 12%, 35% 8%,
42% 10%, 48% 5%, 55% 3%, 62% 5%, 68% 3%, 75% 8%, 82% 5%,
88% 10%, 95% 8%, 100% 12%, 100% 100%
);
}
/* Hide unused mountains */
.mountain-far,
.mountain-mid {
display: none;
}
@keyframes mountainBreath {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-5px) scale(1.005); }
}
/* Mountain clouds that drift around peaks */
.mountain-clouds {
position: absolute;
bottom: 75%;
left: 0;
width: 100%;
height: 25%;
z-index: 3;
pointer-events: none;
overflow: hidden;
}
.mtn-cloud {
position: absolute;
background: linear-gradient(180deg,
rgba(255, 255, 255, 0.95) 0%,
rgba(248, 250, 252, 0.9) 30%,
rgba(235, 242, 248, 0.8) 60%,
rgba(220, 232, 242, 0.5) 100%);
border-radius: 100px;
filter: blur(4px);
box-shadow: inset 0 -8px 15px rgba(180, 200, 220, 0.25);
}
.mtn-cloud::before,
.mtn-cloud::after {
content: '';
position: absolute;
background: inherit;
border-radius: 50%;
}
.mtn-cloud-1 {
width: 200px;
height: 55px;
top: 15%;
left: -18%;
}
.mtn-cloud-1::before { width: 80px; height: 70px; top: -30px; left: 35px; }
.mtn-cloud-1::after { width: 100px; height: 85px; top: -40px; right: 30px; }
.mtn-cloud-2 {
width: 160px;
height: 48px;
top: 35%;
left: -15%;
opacity: 0.85;
}
.mtn-cloud-2::before { width: 65px; height: 58px; top: -25px; left: 28px; }
.mtn-cloud-2::after { width: 80px; height: 70px; top: -32px; right: 22px; }
.mtn-cloud-3 {
width: 220px;
height: 60px;
top: 8%;
left: -20%;
opacity: 0.9;
}
.mtn-cloud-3::before { width: 90px; height: 78px; top: -35px; left: 40px; }
.mtn-cloud-3::after { width: 110px; height: 95px; top: -45px; right: 35px; }
.mtn-cloud-4 {
width: 140px;
height: 42px;
top: 50%;
left: -12%;
opacity: 0.75;
}
.mtn-cloud-4::before { width: 55px; height: 50px; top: -20px; left: 22px; }
.mtn-cloud-4::after { width: 70px; height: 60px; top: -28px; right: 18px; }
.mtn-cloud-5 {
width: 180px;
height: 52px;
top: 25%;
left: -16%;
opacity: 0.8;
}
.mtn-cloud-5::before { width: 72px; height: 65px; top: -28px; left: 32px; }
.mtn-cloud-5::after { width: 90px; height: 78px; top: -36px; right: 26px; }
/* Forest layer with grass GIFs - INCREASED HEIGHT */
.hero-forest {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 25%;
z-index: 4;
background: transparent;
overflow: hidden;
}
/* Grass GIF layers - MORE TO FILL ENTIRE WIDTH WITHOUT GAPS */
.grass-layer {
position: absolute;
bottom: 0;
height: 100%;
width: auto;
z-index: 0;
}
.grass-1 { left: 0%; }
.grass-2 { left: 10%; }
.grass-3 { left: 20%; }
.grass-4 { left: 30%; }
.grass-5 { left: 40%; }
.grass-6 { left: 50%; }
.grass-7 { left: 60%; }
.grass-8 { left: 70%; }
.grass-9 { left: 80%; }
.grass-10 { left: 90%; }
/* Forest tree GIFs - TALLER */
.forest-tree {
position: absolute;
bottom: 0;
height: 120%;
width: auto;
filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.3));
z-index: 1;
}
/* Position trees across the forest - 30 TREES TOTAL */
.tree-1 {
left: 0%;
height: 115%;
opacity: 0.9;
}
.tree-2 {
left: 3.5%;
height: 130%;
z-index: 2;
}
.tree-3 {
left: 7%;
height: 105%;
opacity: 0.85;
}
.tree-4 {
left: 10.5%;
height: 125%;
z-index: 2;
}
.tree-5 {
left: 14%;
height: 110%;
opacity: 0.9;
}
.tree-6 {
left: 17.5%;
height: 135%;
z-index: 2;
}
.tree-7 {
left: 21%;
height: 115%;
opacity: 0.88;
}
.tree-8 {
left: 24.5%;
height: 120%;
z-index: 2;
}
.tree-9 {
left: 28%;
height: 108%;
opacity: 0.85;
}
.tree-10 {
left: 31.5%;
height: 125%;
z-index: 2;
}
.tree-11 {
left: 35%;
height: 118%;
opacity: 0.9;
}
.tree-12 {
left: 38.5%;
height: 128%;
z-index: 2;
}
.tree-13 {
left: 42%;
height: 112%;
opacity: 0.87;
}
.tree-14 {
left: 45.5%;
height: 122%;
z-index: 2;
}
.tree-15 {
left: 49%;
height: 115%;
opacity: 0.9;
}
.tree-16 {
left: 52.5%;
height: 132%;
z-index: 2;
}
.tree-17 {
left: 56%;
height: 110%;
opacity: 0.86;
}
.tree-18 {
left: 59.5%;
height: 126%;
z-index: 2;
}
.tree-19 {
left: 63%;
height: 114%;
opacity: 0.88;
}
.tree-20 {
left: 66.5%;
height: 130%;
z-index: 2;
}
.tree-21 {
left: 70%;
height: 116%;
opacity: 0.89;
}
.tree-22 {
left: 73.5%;
height: 124%;
z-index: 2;
}
.tree-23 {
left: 77%;
height: 111%;
opacity: 0.86;
}
.tree-24 {
left: 80.5%;
height: 127%;
z-index: 2;
}
.tree-25 {
left: 84%;
height: 113%;
opacity: 0.88;
}
.tree-26 {
left: 87.5%;
height: 129%;
z-index: 2;
}
.tree-27 {
left: 91%;
height: 117%;
opacity: 0.87;
}
.tree-28 {
left: 94.5%;
height: 123%;
z-index: 2;
}
.tree-29 {
left: 98%;
height: 119%;
opacity: 0.9;
}
.tree-30 {
left: 101.5%;
height: 131%;
z-index: 2;
}
/* Hide forest layers */
.forest-back,
.forest-mid,
.forest-front {
display: none;
}
/* Hide ground vegetation */
.ground-layer {
display: none;
}
/* Hiking person animation - TREKKING ON MOUNTAIN */
.hiking-person {
position: absolute;
bottom: 45%;
left: -100px;
width: 70px;
height: auto;
z-index: 3;
animation: hikerWalkMountain 40s linear infinite;
filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.4));
}
@keyframes hikerWalkMountain {
0% {
left: -100px;
bottom: 45%;
transform: scaleX(1);
}
10% {
left: 10%;
bottom: 50%;
transform: scaleX(1);
}
20% {
left: 20%;
bottom: 58%;
transform: scaleX(1);
}
30% {
left: 30%;
bottom: 65%;
transform: scaleX(1);
}
40% {
left: 40%;
bottom: 72%;
transform: scaleX(1);
}
50% {
left: 50%;
bottom: 78%;
transform: scaleX(1);
}
51% {
left: 50%;
bottom: 78%;
transform: scaleX(-1);
}
60% {
left: 40%;
bottom: 72%;
transform: scaleX(-1);
}
70% {
left: 30%;
bottom: 65%;
transform: scaleX(-1);
}
80% {
left: 20%;
bottom: 58%;
transform: scaleX(-1);
}
90% {
left: 10%;
bottom: 50%;
transform: scaleX(-1);
}
100% {
left: -100px;
bottom: 45%;
transform: scaleX(-1);
}
}
/* Mist/fog effects */
.hero-mist {
position: absolute;
bottom: 22%;
left: 0;
width: 200%;
height: 15%;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.08) 15%,
rgba(255, 255, 255, 0.15) 30%,
rgba(255, 255, 255, 0.08) 45%,
transparent 60%,
rgba(255, 255, 255, 0.1) 75%,
rgba(255, 255, 255, 0.18) 90%,
transparent 100%);
z-index: 5;
pointer-events: none;
filter: blur(8px);
}
.hero-mist-2 {
bottom: 28%;
height: 12%;
opacity: 0.7;
}
/* ===== END HERO LANDSCAPE ===== */
/* Remove hero background animation */
.hero::after {
display: none;
}
.hero-bg-animation {
display: none;
}
.floating-elements {
display: none;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 1200px;
padding: 2rem;
animation: heroFadeIn 1.5s ease-out;
}
@keyframes heroFadeIn {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero-title {
font-size: clamp(2.5rem, 6vw, 4.5rem);
font-weight: 800;
margin-bottom: 1.5rem;
line-height: 1.2;
color: #22c55e;
}
.title-line {
display: block;
animation: slideInLeft 1s ease-out;
}
.title-line:nth-child(2) {
animation-delay: 0.3s;
}
.gradient-text {
background: linear-gradient(45deg, var(--secondary-color), #ff6b6b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-100px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.hero-subtitle {
font-size: 1.3rem;
margin-bottom: 3rem;
font-weight: 300;
opacity: 0.9;
animation: fadeInUp 1s ease-out 0.6s both;
}
.hero-stats {
display: flex;
justify-content: center;
gap: 3rem;
margin-bottom: 3rem;
animation: fadeInUp 1s ease-out 0.9s both;
}
.stat-item {
text-align: center;
position: relative;
padding: 20px;
border-radius: 15px;
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(5px);
transition: var(--transition-bounce);
transform-style: preserve-3d;
}
.stat-item:hover {
transform: translateY(-10px) rotateX(10deg) scale(1.1);
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 20px 40px rgba(45, 80, 22, 0.3);
}
.stat-number {
display: block;
font-size: 2.5rem;
font-weight: 700;
background: linear-gradient(135deg, var(--secondary-color), #d2691e, var(--accent-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: shimmer 3s ease-in-out infinite;
background-size: 200% 200%;
}
@keyframes shimmer {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
.stat-label {
font-size: 0.9rem;
opacity: 0.8;
text-transform: uppercase;
letter-spacing: 1px;
}
.hero-buttons {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
animation: fadeInUp 1s ease-out 1.2s both;
}
.btn-premium {
padding: 20px 45px;
font-size: 1.1rem;
border-radius: 50px;
border: none;
cursor: pointer;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.5px;
position: relative;
overflow: hidden;
transition: var(--transition-bounce);
display: flex;
align-items: center;
gap: 12px;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.15),
0 4px 16px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
transform-style: preserve-3d;
}
.btn-premium:hover {
transform: translateY(-5px) scale(1.05) rotateX(5deg);
box-shadow:
0 20px 60px rgba(45, 80, 22, 0.4),
0 10px 30px rgba(139, 69, 19, 0.3),
inset 0 2px 10px rgba(255, 255, 255, 0.4);
}
.btn-premium:active {
transform: translateY(-2px) scale(1.02);
}
.btn-premium::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, transparent 70%);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.btn-premium:hover::after {
width: 300px;
height: 300px;
}
.btn-primary-premium {
background: linear-gradient(45deg, var(--secondary-color), #ff6b6b);
color: white;
}
.btn-primary-premium:hover {
transform: translateY(-5px) scale(1.05);
box-shadow:
0 15px 50px rgba(245, 158, 11, 0.4),
0 8px 32px rgba(0, 0, 0, 0.2),
inset 0 2px 0 rgba(255, 255, 255, 0.5);
}
.btn-outline-premium {
background: transparent;
color: white;
border: 2px solid white;
}
.btn-outline-premium:hover {
background: white;
color: var(--primary-color);
transform: translateY(-3px);
}
.scroll-indicator {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
animation: bounce 2s infinite;
}
.scroll-arrow {
font-size: 1.5rem;
color: white;
opacity: 0.7;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
40% { transform: translateX(-50%) translateY(-10px); }
60% { transform: translateX(-50%) translateY(-5px); }
}
/* Section Styles */
.section-header {
text-align: center;
margin-bottom: 4rem;
}
.section-tag {
display: inline-block;
background: var(--primary-color);
color: white;
padding: 10px 25px;
border-radius: 30px;
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 1.5rem;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.section-tag:hover {
transform: translateY(-5px) scale(1.05) rotateX(10deg);
box-shadow:
0 15px 40px rgba(45, 80, 22, 0.5),
0 5px 20px rgba(139, 69, 19, 0.3),
inset 0 2px 0 rgba(255, 255, 255, 0.5);
}
.section-title {
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 700;
color: var(--dark-color);
margin-bottom: 1rem;
position: relative;
visibility: visible;
opacity: 1;
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
border-radius: 2px;
}
.section-subtitle {
color: #64748b;
font-size: 1.2rem;
font-weight: 300;
max-width: 600px;
margin: 0 auto;
}
/* Services Section */
.services {
padding: 100px 0;
background: transparent;
position: relative;
color: #0f172a;
}
.services .section-title,
.services .section-subtitle {
color: #0f172a;
}
.services .service-card {
background: var(--secondary-color);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.services .service-card h3,
.services .service-card p {
color: white;
}
.services::before {
display: none;
}
@keyframes servicesLuxury {
0%, 100% { transform: translateX(0) translateY(0) scale(1); }
50% { transform: translateX(-30px) translateY(-20px) scale(1.05); }
}
@keyframes backgroundMove {
0%, 100% { transform: translateX(0) translateY(0); }
50% { transform: translateX(-20px) translateY(-10px); }
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
position: relative;
z-index: 1;
}
.service-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: var(--border-radius);
padding: 40px 30px;
text-align: center;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.12),
0 2px 16px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
transition: var(--transition-bounce);
border: 1px solid rgba(255, 255, 255, 0.2);
position: relative;
overflow: hidden;
transform-style: preserve-3d;
perspective: 1000px;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
opacity: 0;
transition: var(--transition);
z-index: -1;
}
.service-card:hover::before {
opacity: 0.08;
}
.service-card:hover {
transform: translateY(-30px) rotateX(5deg) rotateY(5deg) scale(1.08);
box-shadow:
0 30px 80px rgba(45, 80, 22, 0.4),
0 15px 40px rgba(0, 0, 0, 0.2),
0 5px 15px rgba(139, 69, 19, 0.3),
inset 0 2px 0 rgba(255, 255, 255, 0.9);
border: 1px solid rgba(74, 124, 89, 0.5);
}
.service-icon {
width: 90px;
height: 90px;
margin: 0 auto 25px;
background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.2rem;
color: white;
box-shadow: var(--shadow-medium);
transition: var(--transition-bounce);
position: relative;
transform-style: preserve-3d;
z-index: 2;
}
.service-icon::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent);
transform: translateZ(10px);
transition: var(--transition);
}
.service-icon::after {
content: '';
position: absolute;
width: 120%;
height: 120%;
border-radius: 50%;
background: radial-gradient(circle, rgba(74, 124, 89, 0.2) 0%, transparent 70%);
animation: iconPulse 2s ease-in-out infinite;
z-index: -1;
}
@keyframes iconPulse {
0%, 100% {
transform: scale(1);
opacity: 0.5;
}
50% {
transform: scale(1.3);
opacity: 0;
}
}
.service-card:hover .service-icon {
transform: scale(1.2) rotate(360deg) translateZ(30px);
box-shadow:
0 20px 40px rgba(45, 80, 22, 0.5),
0 10px 20px rgba(139, 69, 19, 0.3),
inset 0 2px 10px rgba(255, 255, 255, 0.3);
}
.service-card h3 {
font-size: 1.6rem;
margin-bottom: 15px;
color: #0f172a;
font-weight: 700;
}
.service-card p {
color: #0f172a;
line-height: 1.8;
margin-bottom: 20px;
font-weight: 500;
}
.service-features {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
}
.feature-tag {
background: var(--primary-color);
color: #ffffff;
padding: 5px 12px;
border-radius: 15px;
font-size: 0.8rem;
font-weight: 600;
}
/* Destinations Section - FULL BACKGROUND: tp1.jpeg */
.destinations {
padding: 100px 0;
background: url('tp1.jpeg') no-repeat center center;
background-size: cover;
background-attachment: fixed;
position: relative;
overflow: hidden;
}
/* Overlay for better text readability - VERY LIGHT */
.destinations::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.1);
z-index: 1;
}
.destinations .container {
position: relative;
z-index: 2;
}
/* Destinations Filter Buttons */
box-shadow:
0 0 60px rgba(255, 200, 50, 0.8),
0 0 100px rgba(255, 150, 0, 0.5),
0 0 150px rgba(255, 100, 0, 0.3);
z-index: 2;
transition: top 1s ease, right 1s ease, opacity 1s ease;
}
.dest-sun::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(255, 255, 200, 0.8) 0%, transparent 70%);
border-radius: 50%;
animation: destSunPulse 4s ease-in-out infinite;
}
.dest-sun::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
background: radial-gradient(circle, rgba(255, 220, 100, 0.4) 0%, transparent 70%);
border-radius: 50%;
animation: destSunGlow 6s ease-in-out infinite;
}
@keyframes destSunPulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}
@keyframes destSunGlow {
0%, 100% { transform: translate(-50%, -50%) scale(1); }
50% { transform: translate(-50%, -50%) scale(1.2); }
}
/* Destinations Moon */
.dest-moon {
position: absolute;
width: 60px;
height: 60px;
background: radial-gradient(circle at 35% 35%,
#f5f5f0 0%,
#e8e8e0 30%,
#d0d0c8 60%,
#b8b8b0 100%);
border-radius: 50%;
box-shadow:
0 0 40px rgba(200, 200, 180, 0.6),
0 0 80px rgba(180, 180, 160, 0.4),
inset -8px -8px 20px rgba(100, 100, 90, 0.3);
z-index: 2;
display: none;
transition: top 1s ease, right 1s ease, opacity 1s ease;
}
.dest-moon::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90px;
height: 90px;
background: radial-gradient(circle, rgba(200, 200, 180, 0.3) 0%, transparent 70%);
border-radius: 50%;
animation: destMoonGlow 8s ease-in-out infinite;
}
@keyframes destMoonGlow {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
50% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.9; }
}
/* Destinations Stars */
.dest-stars {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
transition: opacity 2s ease;
}
.dest-stars .star {
position: absolute;
width: 3px;
height: 3px;
background: #ffffff;
border-radius: 50%;
box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
animation: starTwinkle 2s ease-in-out infinite;
}
.dest-stars .star:nth-child(1) { top: 8%; left: 12%; animation-delay: 0s; }
.dest-stars .star:nth-child(2) { top: 15%; left: 35%; animation-delay: 0.3s; }
.dest-stars .star:nth-child(3) { top: 5%; left: 55%; animation-delay: 0.6s; }
.dest-stars .star:nth-child(4) { top: 20%; left: 75%; animation-delay: 0.9s; }
.dest-stars .star:nth-child(5) { top: 10%; left: 88%; animation-delay: 1.2s; }
.dest-stars .star:nth-child(6) { top: 25%; left: 22%; animation-delay: 0.4s; }
.dest-stars .star:nth-child(7) { top: 12%; left: 45%; animation-delay: 0.7s; }
.dest-stars .star:nth-child(8) { top: 18%; left: 65%; animation-delay: 1s; }
.dest-stars .star:nth-child(9) { top: 6%; left: 80%; animation-delay: 0.2s; }
.dest-stars .star:nth-child(10) { top: 22%; left: 8%; animation-delay: 0.5s; }
/* Atmospheric haze - REMOVED */
@keyframes sunGlow {
0%, 100% {
transform: scale(1);
opacity: 0.8;
}
50% {
transform: scale(1.15);
opacity: 1;
}
}
/* Realistic Cloud Styling */
.cloud {
position: absolute;
background: linear-gradient(180deg,
#ffffff 0%,
#f8f8f8 40%,
#e8e8e8 70%,
#d8d8d8 100%);
width: 250px;
height: 80px;
border-radius: 100px;
opacity: 0.95;
filter: blur(1px);
box-shadow:
inset 0 -15px 30px rgba(0, 0, 0, 0.05),
0 5px 15px rgba(0, 0, 0, 0.08),
0 15px 35px rgba(100, 150, 200, 0.15);
will-change: transform, left;
}
.cloud::before {
content: '';
position: absolute;
background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
width: 120px;
height: 100px;
top: -50px;
left: 25px;
border-radius: 50%;
box-shadow: inset 0 -10px 20px rgba(0, 0, 0, 0.03);
}
.cloud::after {
content: '';
position: absolute;
background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
width: 150px;
height: 130px;
top: -70px;
right: 30px;
border-radius: 50%;
box-shadow: inset 0 -10px 25px rgba(0, 0, 0, 0.04);
}
/* Individual cloud positions and animations */
.cloud-1 {
top: 5%;
left: -25%;
width: 320px;
height: 90px;
animation: cloudDrift1 80s linear infinite;
opacity: 0.95;
}
.cloud-2 {
top: 18%;
left: -25%;
width: 200px;
height: 65px;
animation: cloudDrift2 65s linear infinite;
animation-delay: -15s;
opacity: 0.85;
}
.cloud-3 {
top: 8%;
left: -25%;
width: 180px;
height: 55px;
animation: cloudDrift3 55s linear infinite;
animation-delay: -30s;
opacity: 0.75;
}
.cloud-4 {
top: 2%;
left: -25%;
width: 350px;
height: 100px;
animation: cloudDrift4 95s linear infinite;
animation-delay: -10s;
opacity: 0.9;
}
.cloud-5 {
top: 25%;
left: -25%;
width: 160px;
height: 50px;
animation: cloudDrift5 50s linear infinite;
animation-delay: -40s;
opacity: 0.7;
}
.cloud-6 {
top: 12%;
left: -25%;
width: 220px;
height: 70px;
animation: cloudDrift6 70s linear infinite;
animation-delay: -5s;
opacity: 0.8;
}
.cloud-7 {
top: 30%;
left: -25%;
width: 280px;
height: 85px;
animation: cloudDrift7 75s linear infinite;
animation-delay: -25s;
opacity: 0.65;
}
.cloud-8 {
top: 15%;
left: -25%;
width: 140px;
height: 45px;
animation: cloudDrift8 45s linear infinite;
animation-delay: -50s;
opacity: 0.6;
}
/* Realistic cloud drift animations with subtle vertical movement */
@keyframes cloudDrift1 {
0% { left: -25%; transform: translateY(0); }
25% { transform: translateY(-8px); }
50% { transform: translateY(5px); }
75% { transform: translateY(-5px); }
100% { left: 110%; transform: translateY(0); }
}
@keyframes cloudDrift2 {
0% { left: -20%; transform: translateY(0) scale(1); }
33% { transform: translateY(-12px) scale(1.02); }
66% { transform: translateY(8px) scale(0.98); }
100% { left: 115%; transform: translateY(0) scale(1); }
}
@keyframes cloudDrift3 {
0% { left: -18%; transform: translateY(0); }
50% { transform: translateY(-6px); }
100% { left: 112%; transform: translateY(0); }
}
@keyframes cloudDrift4 {
0% { left: -30%; transform: translateY(0) scale(1); }
20% { transform: translateY(-10px) scale(1.01); }
40% { transform: translateY(6px) scale(0.99); }
60% { transform: translateY(-8px) scale(1.02); }
80% { transform: translateY(4px) scale(1); }
100% { left: 108%; transform: translateY(0) scale(1); }
}
@keyframes cloudDrift5 {
0% { left: -15%; transform: translateY(0); }
50% { transform: translateY(-15px); }
100% { left: 118%; transform: translateY(0); }
}
@keyframes cloudDrift6 {
0% { left: -22%; transform: translateY(0) rotate(0deg); }
25% { transform: translateY(-7px) rotate(0.5deg); }
75% { transform: translateY(5px) rotate(-0.5deg); }
100% { left: 112%; transform: translateY(0) rotate(0deg); }
}
@keyframes cloudDrift7 {
0% { left: -28%; transform: translateY(0); }
33% { transform: translateY(-10px); }
66% { transform: translateY(7px); }
100% { left: 110%; transform: translateY(0); }
}
@keyframes cloudDrift8 {
0% { left: -12%; transform: translateY(0) scale(1); }
50% { transform: translateY(-18px) scale(1.05); }
100% { left: 120%; transform: translateY(0) scale(1); }
}
/* Realistic sky color shift animation */
@keyframes realisticSkyShift {
0%, 100% {
background: linear-gradient(180deg,
#1e90ff 0%,
#4da6ff 15%,
#87CEEB 35%,
#a8d8ea 55%,
#c5e6f7 75%,
#e8f4fc 90%,
transparent 100%);
}
50% {
background: linear-gradient(180deg,
#2a9df4 0%,
#5cb3ff 15%,
#8fd4f0 35%,
#b5e0f0 55%,
#d0ecf8 75%,
#f0f8ff 90%,
transparent 100%);
}
}
/* Destinations Ocean Animation - Realistic Ocean Waves */
.destinations-ocean {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 350px;
z-index: 1;
overflow: hidden;
pointer-events: none;
background: linear-gradient(to bottom,
transparent 0%,
rgba(0, 80, 150, 0.1) 10%,
rgba(0, 100, 180, 0.25) 30%,
rgba(0, 120, 200, 0.4) 50%,
rgba(0, 90, 160, 0.6) 70%,
rgba(0, 60, 120, 0.8) 100%);
}
/* Ocean surface shimmer effect */
.destinations-ocean::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 100%;
background:
repeating-linear-gradient(
90deg,
transparent 0px,
rgba(255, 255, 255, 0.03) 2px,
transparent 4px
),
repeating-linear-gradient(
0deg,
transparent 0px,
rgba(255, 255, 255, 0.02) 3px,
transparent 6px
);
pointer-events: none;
}
/* Deep water reflection */
.destinations-ocean::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 60%;
background: linear-gradient(to top,
rgba(0, 40, 80, 0.5) 0%,
rgba(0, 60, 100, 0.3) 40%,
transparent 100%);
pointer-events: none;
}
.wave {
position: absolute;
bottom: 0;
left: 0;
width: 200%;
height: 120px;
background-repeat: repeat-x;
will-change: transform;
}
/* Front wave - most visible, foam-topped */
.wave-1 {
opacity: 1;
z-index: 1004;
height: 90px;
bottom: 40px;
background: url('data:image/svg+xml,') repeat-x;
background-size: 600px 90px;
filter: drop-shadow(0 -3px 6px rgba(0, 100, 150, 0.3));
}
/* Second wave layer */
.wave-2 {
opacity: 0.85;
z-index: 1003;
bottom: 25px;
height: 110px;
background: url('data:image/svg+xml,') repeat-x;
background-size: 700px 110px;
}
/* Third wave layer - deeper */
.wave-3 {
opacity: 0.7;
z-index: 1002;
bottom: 10px;
height: 130px;
background: url('data:image/svg+xml,') repeat-x;
background-size: 800px 130px;
}
/* Back wave - most distant */
.wave-4 {
opacity: 0.5;
z-index: 1001;
bottom: 0;
height: 150px;
background: url('data:image/svg+xml,') repeat-x;
background-size: 900px 150px;
}
/* Realistic wave motion animations */
/* Pirate Ship Animation */
.pirate-ship {
position: absolute;
bottom: 35px;
left: -280px;
width: 280px;
height: auto;
max-height: 160px;
z-index: 1005;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}
/* Flying Airplane Animation */
.flying-airplane {
position: absolute;
width: 220px;
height: auto;
max-height: 120px;
z-index: 6;
filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.2));
}
/* Airplane 1 - Right to Left then Left to Right cycle */
.flying-airplane-1 {
top: 50px;
}
/* Airplane 2 - Left to Right then Right to Left */
.flying-airplane-2 {
top: 80px;
}
/* Airplane 3 - Diagonal alternating both directions */
.flying-airplane-3 {
top: 20px;
}
@keyframes destinationsElegant {
0%, 100% { transform: translateX(0) translateY(0) rotate(0deg); opacity: 0.8; }
50% { transform: translateX(-40px) translateY(-25px) rotate(180deg); opacity: 1; }
}
@keyframes floatPattern {
0% { background-position: 0 0, 60px 60px; }
100% { background-position: 120px 120px, 180px 180px; }
}
.destinations-filter {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 3rem;
flex-wrap: wrap;
position: relative;
z-index: 10;
}
.filter-btn {
padding: 12px 25px;
border: 2px solid var(--primary-color);
background: white;
color: var(--primary-color);
border-radius: 25px;
cursor: pointer;
transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
font-weight: 500;
user-select: none;
-webkit-tap-highlight-color: transparent;
position: relative;
z-index: 10;
touch-action: manipulation;
-webkit-touch-callout: none;
outline: none;
}
.filter-btn.active,
.filter-btn:hover {
background: var(--primary-color);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(45, 80, 22, 0.3);
}
.filter-btn:active {
transform: translateY(0);
transition: transform 0.1s ease;
}
.filter-btn:focus {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
.destinations-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
}
.destination-card {
background: var(--secondary-color);
color: white;
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(25px);
border-radius: var(--border-radius);
overflow: hidden;
box-shadow:
0 10px 40px rgba(0, 0, 0, 0.1),
0 4px 20px rgba(0, 0, 0, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
transition: all 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 0.3);
position: relative;
transform-style: preserve-3d;
}
.destination-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(45, 80, 22, 0.08) 0%, rgba(139, 69, 19, 0.08) 100%);
opacity: 0;
transition: var(--transition);
z-index: 1;
}
.destination-card:hover::before {
opacity: 1;
}
.destination-card:hover {
transform: translateY(-20px) rotateX(10deg) scale(1.05);
box-shadow:
0 35px 90px rgba(45, 80, 22, 0.35),
0 15px 50px rgba(139, 69, 19, 0.25),
0 5px 20px rgba(0, 0, 0, 0.2),
inset 0 2px 0 rgba(255, 255, 255, 0.9);
}
.destination-image {
position: relative;
height: 250px;
overflow: hidden;
}
.destination-image img {
display: block;
}
.destination-badge {
position: absolute;
top: 15px;
right: 15px;
background: var(--secondary-color);
color: white;
padding: 6px 14px;
border-radius: 15px;
font-size: 0.85rem;
font-weight: 700;
z-index: 10;
opacity: 1;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.placeholder-img {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
font-weight: 700;
transition: var(--transition);
position: relative;
overflow: hidden;
}
.destination-card:hover .placeholder-img {
transform: scale(1.15) rotate(3deg);
}
.gradient-bg-1 { background: linear-gradient(135deg, #2d5016 0%, #4a7c59 100%); }
.gradient-bg-2 { background: linear-gradient(135deg, #8b4513 0%, #d2691e 100%); }
.gradient-bg-3 { background: linear-gradient(135deg, #4a7c59 0%, #66bb6a 100%); }
.gradient-bg-4 { background: linear-gradient(135deg, #2d5016 0%, #8b4513 100%); }
.gradient-bg-5 { background: linear-gradient(135deg, #d2691e 0%, #4a7c59 100%); }
.gradient-bg-6 { background: linear-gradient(135deg, #66bb6a 0%, #2d5016 100%); }
.destination-content {
padding: 25px;
}
.destination-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.destination-header h3 {
font-size: 1.5rem;
font-weight: 600;
color: var(--dark-color);
}
.destination-rating {
display: flex;
align-items: center;
gap: 5px;
color: var(--secondary-color);
font-weight: 600;
}
.destination-content p {
color: #64748b;
margin-bottom: 15px;
}
.destination-price {
display: flex;
justify-content: space-between;
align-items: center;
}
.price {
font-size: 1.3rem;
font-weight: 700;
color: var(--primary-color);
}
.duration {
color: #64748b;
font-weight: 500;
}
.destination-card .destination-header h3,
.destination-card .destination-rating,
.destination-card .destination-rating span,
.destination-card .destination-content p,
.destination-card .price,
.destination-card .duration {
color: white;
}
/* Testimonials Section */
.testimonials {
padding: 100px 0;
background: linear-gradient(135deg, #D2B48C, #C4A484);
color: white;
position: relative;
overflow: hidden;
}
.testimonials::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
url('data:image/svg+xml,'),
url('data:image/svg+xml,');
background-size: 500px 500px, 300px 300px;
background-position: -100px -100px, 200px 150px;
animation: testimonialLuxury 45s ease-in-out infinite;
}
@keyframes testimonialLuxury {
0%, 100% { transform: translateX(0) translateY(0) rotate(0deg) scale(1); }
25% { transform: translateX(-30px) translateY(-20px) rotate(90deg) scale(1.05); }
50% { transform: translateX(0) translateY(-40px) rotate(180deg) scale(0.95); }
75% { transform: translateX(30px) translateY(-20px) rotate(270deg) scale(1.05); }
}
@keyframes testimonialPattern {
0% { transform: translateX(0) translateY(0) rotate(0deg); }
100% { transform: translateX(-100px) translateY(-60px) rotate(180deg); }
}
.testimonials-carousel {
position: relative;
max-width: 800px;
margin: 0 auto;
height: 400px;
}
.testimonial-card {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
border-radius: var(--border-radius);
padding: 40px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.2);
opacity: 0;
transform: translateX(100px);
transition: var(--transition);
}
.testimonial-card.active {
opacity: 1;
transform: translateX(0);
}
.quote-icon {
font-size: 3rem;
color: var(--secondary-color);
margin-bottom: 20px;
}
.testimonial-text {
font-size: 1.2rem;
font-style: italic;
line-height: 1.8;
margin-bottom: 30px;
}
.testimonial-author {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin-bottom: 20px;
}
.author-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
background: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: var(--primary-color);
font-weight: 700;
}
.author-info h4 {
font-size: 1.2rem;
margin-bottom: 5px;
}
.author-info span {
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
}
.rating {
color: #FF8C00;
font-size: 1.2rem;
}
.carousel-controls {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin-top: 3rem;
}
.carousel-btn {
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.1);
color: white;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
user-select: none;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
pointer-events: all;
z-index: 10;
}
.carousel-btn:hover {
background: rgba(255, 255, 255, 0.3);
border-color: white;
transform: scale(1.1);
}
.carousel-btn:active {
transform: scale(0.95);
background: rgba(255, 255, 255, 0.4);
}
.carousel-dots {
display: flex;
gap: 10px;
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
cursor: pointer;
transition: var(--transition);
}
.dot.active {
background: var(--secondary-color);
}
/* Contact Section */
.contact {
padding: 100px 0;
background: transparent;
position: relative;
overflow: hidden;
}
.contact::before {
display: none;
}
@keyframes contactPremium {
0%, 100% { transform: translateX(0) translateY(0) rotate(0deg); opacity: 0.8; }
33% { transform: translateX(-25px) translateY(-15px) rotate(120deg); opacity: 1; }
66% { transform: translateX(25px) translateY(15px) rotate(240deg); opacity: 0.9; }
}
@keyframes contactPattern {
0% { transform: translateX(0) translateY(0) rotate(0deg); }
100% { transform: translateX(-50px) translateY(-30px) rotate(360deg); }
}
.contact-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: start;
}
.contact-form {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(25px);
padding: 50px;
border-radius: var(--border-radius);
box-shadow:
0 15px 60px rgba(0, 0, 0, 0.1),
0 6px 30px rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
border: 1px solid rgba(255, 255, 255, 0.3);
position: relative;
}
.contact-form::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.02) 0%, rgba(16, 185, 129, 0.02) 100%);
border-radius: var(--border-radius);
pointer-events: none;
}
.form-group {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 20px;
}
.input-group {
position: relative;
}
.input-group.full-width {
grid-column: 1 / -1;
}
.form-input {
width: 100%;
padding: 15px 50px 15px 20px;
border: 2px solid #e2e8f0;
border-radius: 12px;
font-size: 1rem;
transition: var(--transition);
background: white;
}
.form-input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.input-icon {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
color: #94a3b8;
transition: var(--transition);
}
.form-input:focus + .input-icon {
color: var(--primary-color);
}
.submit-btn {
width: 100%;
margin-top: 20px;
}
.contact-info {
position: sticky;
top: 100px;
}
.contact-card {
background: linear-gradient(135deg, var(--primary-color), #1e40af);
color: white;
padding: 40px;
border-radius: var(--border-radius);
box-shadow: var(--shadow-medium);
}
.contact-card h3 {
font-size: 1.8rem;
margin-bottom: 30px;
text-align: center;
}
.contact-items {
margin-bottom: 30px;
}
.contact-item {
display: flex;
align-items: center;
margin-bottom: 25px;
padding: 15px;
background: rgba(255, 255, 255, 0.1);
border-radius: 12px;
transition: var(--transition);
}
.contact-item:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateX(5px);
}
.contact-icon {
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20px;
font-size: 1.2rem;
flex-shrink: 0;
}
.contact-details h5 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 5px;
}
.contact-details p,
.contact-details a {
word-break: break-word;
overflow-wrap: break-word;
}
.contact-details p {
opacity: 0.9;
font-size: 0.95rem;
}
.social-links {
display: flex;
justify-content: center;
gap: 15px;
}
.social-link {
width: 45px;
height: 45px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
transition: var(--transition);
position: relative;
z-index: 2;
pointer-events: auto;
}
.social-link:hover {
background: var(--secondary-color);
transform: translateY(-3px);
color: white;
}
/* Footer */
.footer {
background: linear-gradient(135deg, #0a67c4, #27eaf0ea);
color: white;
padding: 60px 0 20px;
position: relative;
overflow: hidden;
}
.footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
url('data:image/svg+xml,'),
url('data:image/svg+xml,');
background-size: 800px 800px, 150px 150px;
background-position: -200px -200px, 100px 75px;
animation: footerElite 50s ease-in-out infinite;
pointer-events: none;
z-index: 0;
}
@keyframes footerElite {
0%, 100% { transform: translateX(0) translateY(0) rotate(0deg) scale(1); opacity: 0.7; }
20% { transform: translateX(-20px) translateY(-10px) rotate(72deg) scale(1.02); opacity: 0.9; }
40% { transform: translateX(0) translateY(-20px) rotate(144deg) scale(0.98); opacity: 0.8; }
60% { transform: translateX(20px) translateY(-10px) rotate(216deg) scale(1.02); opacity: 0.9; }
80% { transform: translateX(0) translateY(10px) rotate(288deg) scale(0.98); opacity: 0.8; }
}
@keyframes footerPattern {
0% { opacity: 0.5; transform: translateX(0); }
50% { opacity: 0.3; transform: translateX(-25px); }
100% { opacity: 0.5; transform: translateX(-50px); }
}
.footer-content {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr;
gap: 40px;
margin-bottom: 40px;
position: relative;
z-index: 1;
}
.footer-brand h4 {
font-size: 1.8rem;
margin-bottom: 20px;
color: white;
}
.footer-brand p {
color: white;
line-height: 1.8;
margin-bottom: 20px;
}
.footer-section h4 {
font-size: 1.3rem;
margin-bottom: 20px;
color: white;
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 12px;
}
.footer-links a {
color: white;
text-decoration: none;
transition: var(--transition);
cursor: pointer;
pointer-events: auto;
position: relative;
z-index: 2;
}
.footer-links a:hover {
color: var(--secondary-color);
padding-left: 5px;
}
.newsletter-form {
display: flex;
margin-top: 15px;
}
.newsletter-form input {
flex: 1;
padding: 12px 15px;
border: none;
border-radius: 25px 0 0 25px;
background: rgba(255, 255, 255, 0.1);
color: white;
}
.newsletter-form input::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.newsletter-form button {
padding: 12px 20px;
border: none;
border-radius: 0 25px 25px 0;
background: var(--secondary-color);
color: white;
cursor: pointer;
transition: var(--transition);
}
.newsletter-form button:hover {
background: #d97706;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 20px;
text-align: center;
color: white;
position: relative;
z-index: 1;
}
.footer-bottom i {
color: var(--secondary-color);
}
/* Scroll to Top Button */
.scroll-top-btn {
position: fixed;
bottom: 30px;
right: 30px;
width: 55px;
height: 55px;
background: var(--secondary-color);
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
font-size: 1.3rem;
box-shadow: var(--shadow-medium);
opacity: 0;
visibility: hidden;
transition: var(--transition);
z-index: 1000;
}
.scroll-top-btn.visible {
opacity: 1;
visibility: visible;
}
.scroll-top-btn:hover {
background: #d97706;
transform: translateY(-5px);
box-shadow: var(--shadow-heavy);
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Blogs Section */
.blogs {
padding: 100px 0;
background:
linear-gradient(135deg, #f8fffe 0%, #e8f8f5 50%, #f0fdf4 100%),
radial-gradient(ellipse at top right, rgba(119, 221, 119, 0.15) 0%, transparent 50%),
radial-gradient(ellipse at bottom left, rgba(160, 130, 109, 0.08) 0%, transparent 50%);
position: relative;
overflow: hidden;
min-height: 100vh;
}
.blogs::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
url('data:image/svg+xml,'),
url('data:image/svg+xml,');
background-size: 400px 400px, 250px 250px;
background-position: 0 0, 200px 120px;
animation: blogsModern 50s ease-in-out infinite;
}
@keyframes blogsModern {
0%, 100% { transform: translateX(0) translateY(0) scale(1) rotate(0deg); }
33% { transform: translateX(-20px) translateY(-15px) scale(1.02) rotate(120deg); }
66% { transform: translateX(20px) translateY(15px) scale(0.98) rotate(240deg); }
}
@keyframes blogBackground {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.8; transform: scale(1.05); }
}
.blogs-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
}
.blog-card {
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(30px);
border-radius: var(--border-radius);
overflow: hidden;
box-shadow:
0 12px 48px rgba(0, 0, 0, 0.08),
0 4px 24px rgba(0, 0, 0, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
transition: var(--transition);
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 0.25);
position: relative;
}
.blog-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(99, 102, 241, 0.03) 0%,
rgba(236, 72, 153, 0.03) 50%,
rgba(16, 185, 129, 0.03) 100%);
opacity: 0;
transition: var(--transition);
pointer-events: none;
}
.blog-card:hover::after {
opacity: 1;
}
.blog-card:hover {
transform: translateY(-18px) scale(1.02);
box-shadow:
0 30px 90px rgba(99, 102, 241, 0.2),
0 12px 48px rgba(0, 0, 0, 0.12),
inset 0 2px 0 rgba(255, 255, 255, 0.9);
border: 1px solid rgba(99, 102, 241, 0.3);
}
.blog-image {
position: relative;
height: 200px;
overflow: hidden;
}
.blog-category {
position: absolute;
top: 15px;
left: 15px;
background: var(--primary-color);
color: white;
padding: 6px 14px;
border-radius: 15px;
font-size: 0.85rem;
font-weight: 700;
z-index: 10;
opacity: 1;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.blog-date {
position: absolute;
top: 15px;
right: 15px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
padding: 10px;
border-radius: 10px;
text-align: center;
z-index: 10;
opacity: 1;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.blog-date .day {
display: block;
font-size: 1.2rem;
font-weight: 700;
color: var(--primary-color);
line-height: 1;
}
.blog-date .month {
display: block;
font-size: 0.8rem;
color: #64748b;
text-transform: uppercase;
}
.blog-overlay-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 1.5rem;
font-weight: 700;
text-align: center;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
padding: 0 20px;
line-height: 1.2;
opacity: 0.9;
transition: var(--transition);
z-index: 5;
}
.blog-card:hover .blog-overlay-title {
opacity: 1;
}
.blog-content {
padding: 25px;
}
.blog-content h3 {
font-size: 1.6rem;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 15px;
line-height: 1.3;
transition: color 0.3s ease;
}
.blog-card:hover .blog-content h3 {
color: var(--secondary-color);
}
.blog-content p {
color: #64748b;
line-height: 1.6;
margin-bottom: 20px;
}
.blog-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.9rem;
color: #94a3b8;
}
.blog-meta .author,
.blog-meta .read-time {
display: flex;
align-items: center;
gap: 5px;
}
/* Responsive Design */
/* ========== RESPONSIVE DESIGN - MOBILE & SYSTEM ADAPTIVE ========== */
/* Large Devices (Desktops, 1200px and up) */
@media (max-width: 1400px) {
.container {
max-width: 1140px;
padding: 0 30px;
}
.hero-content h1 {
font-size: 3rem;
}
.services-grid,
.destinations-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
}
}
/* Medium-Large Devices (Tablets landscape, 992px - 1199px) */
@media (max-width: 1200px) {
.container {
max-width: 960px;
padding: 0 25px;
}
.hero-content h1 {
font-size: 2.5rem;
}
.hero-content p {
font-size: 1.1rem;
}
.contact-container {
grid-template-columns: 1fr;
gap: 30px;
}
.footer-content {
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.services-grid,
.destinations-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
nav {
padding: 0.8rem 0;
}
.nav-links {
gap: 1.2rem;
}
.stat-card {
padding: 1.8rem 1rem;
}
}
/* Medium Devices (Tablets portrait, 768px - 991px) */
@media (max-width: 992px) {
.container {
max-width: 720px;
padding: 0 20px;
}
.hero-content h1 {
font-size: 2.2rem;
margin-bottom: 1rem;
}
.hero-content p {
font-size: 1rem;
margin-bottom: 1.5rem;
}
nav .container {
flex-direction: column;
gap: 1rem;
}
.logo {
font-size: 1.3rem;
}
.nav-links {
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
.nav-links a {
font-size: 0.9rem;
padding: 0.4rem 0.8rem;
}
.services-grid,
.destinations-grid {
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
.testimonial-card {
padding: 25px;
}
section {
padding: 40px 0;
}
.floating-icon {
width: 70px;
height: 70px;
}
}
/* Small-Medium Devices (Large phones landscape, 576px - 767px) */
@media (max-width: 768px) {
/* Global mobile overflow fix */
body {
overflow-x: hidden;
width: 100%;
max-width: 100vw;
}
* {
max-width: 100%;
box-sizing: border-box;
}
section {
width: 100%;
max-width: 100vw;
overflow-x: hidden;
}
.container {
max-width: 540px;
padding: 0 20px;
}
/* Mobile Navigation Fixes */
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
.navbar .container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 0;
}
.navbar-brand {
order: 2;
margin: 0 auto;
}
.brand-text {
font-size: 1.6rem;
line-height: 1;
margin: 0;
text-align: center;
}
/* Responsive logo sizes for tablets */
.brand-logo {
height: 180px;
width: 180px;
min-width: 180px;
}
.brand-logo-mobile {
height: 150px;
width: 150px;
min-width: 150px;
}
.navbar-toggler {
order: 1;
margin-right: auto;
position: relative;
z-index: 1002;
}
.navbar-collapse {
position: fixed;
top: 0;
left: -100%;
width: 280px;
height: 100vh;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(20px);
transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1001;
overflow-y: auto;
padding: 80px 0 20px 0;
box-shadow: 2px 0 20px rgba(0, 0, 0, 0.3);
}
.navbar-collapse.show {
left: 0;
}
.navbar-collapse.collapsing {
left: -100%;
transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
height: 100vh !important;
}
.navbar-nav {
display: flex;
flex-direction: column;
gap: 0;
width: 100%;
padding: 0;
}
.nav-item {
width: 100%;
opacity: 0;
transform: translateX(-50px);
animation: slideInNav 0.25s ease forwards;
}
.navbar-collapse.show .nav-item:nth-child(1) { animation-delay: 0.05s; }
.navbar-collapse.show .nav-item:nth-child(2) { animation-delay: 0.08s; }
.navbar-collapse.show .nav-item:nth-child(3) { animation-delay: 0.11s; }
.navbar-collapse.show .nav-item:nth-child(4) { animation-delay: 0.14s; }
.navbar-collapse.show .nav-item:nth-child(5) { animation-delay: 0.17s; }
.navbar-collapse.show .nav-item:nth-child(6) { animation-delay: 0.20s; }
.navbar-collapse.show .nav-item:nth-child(7) { animation-delay: 0.23s; }
@keyframes slideInNav {
to {
opacity: 1;
transform: translateX(0);
}
}
.nav-link {
color: var(--dark-color) !important;
padding: 15px 30px !important;
margin: 0;
display: block;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
font-weight: 500;
transition: all 0.3s ease;
}
.nav-link:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateX(10px);
}
.dropdown-menu {
position: static !important;
transform: none !important;
background: rgba(255, 255, 255, 0.2);
border: none;
box-shadow: none;
padding: 0;
}
.dropdown-item {
color: var(--dark-color) !important;
padding: 12px 40px;
}
/* Overlay for mobile menu */
.navbar-collapse.show::before {
content: '';
position: fixed;
top: 0;
left: 280px;
width: calc(100vw - 280px);
height: 100vh;
background: rgba(0, 0, 0, 0.5);
z-index: -1;
}
/* Fix toggler to work as close button */
.navbar-toggler.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.navbar-toggler.active span:nth-child(2) {
opacity: 0;
}
.navbar-toggler.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
}
.hero {
min-height: 70vh;
padding: 0 0 60px;
margin-top: 0;
}
.hero-content h1 {
font-size: 1.8rem;
line-height: 1.3;
}
.hero-content p {
font-size: 0.95rem;
margin-bottom: 1.5rem;
}
.hero-stats {
flex-direction: column;
gap: 1.5rem;
padding: 0;
}
.stat-card {
width: 100%;
max-width: 350px;
margin: 0 auto;
padding: 1.5rem 1rem;
}
.hero-buttons {
flex-direction: column;
align-items: center;
gap: 1rem;
width: 100%;
}
.hero-buttons .btn {
width: 100%;
max-width: 300px;
justify-content: center;
}
.services-grid,
.destinations-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.blogs-grid {
grid-template-columns: 1fr;
gap: 20px;
justify-items: center;
}
.blog-card {
width: 100%;
max-width: 450px;
margin: 0 auto;
}
.service-card,
.destination-card {
padding: 25px;
}
.service-card i,
.destination-card i {
font-size: 2.5rem;
}
.service-card h3,
.destination-card h3 {
font-size: 1.3rem;
}
.section-header h2 {
font-size: 2rem;
}
.section-header p {
font-size: 1rem;
}
section {
padding: 35px 0;
}
.form-group {
grid-template-columns: 1fr;
gap: 15px;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
font-size: 0.95rem;
padding: 12px 15px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.contact-container {
width: 100%;
max-width: 100%;
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
}
.contact-form-wrapper,
.contact-form,
.contact-info {
width: 100%;
max-width: 450px;
padding: 20px;
box-sizing: border-box;
margin: 0 auto;
}
.contact-card {
width: 100%;
max-width: 450px;
box-sizing: border-box;
margin: 0 auto;
}
.footer-content {
grid-template-columns: 1fr;
gap: 30px;
text-align: center;
}
.footer-section h3 {
font-size: 1.1rem;
}
.social-links {
justify-content: center;
}
.destinations-filter {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.destinations-filter button {
width: 100%;
justify-content: center;
padding: 14px 20px;
font-size: 0.95rem;
}
.filter-btn {
transition: background 0.2s ease, color 0.2s ease;
transform: none !important;
}
.filter-btn.active,
.filter-btn:hover {
transform: none !important;
}
.testimonial-card {
padding: 20px;
}
.testimonial-text {
font-size: 0.95rem;
}
.floating-icon {
width: 60px;
height: 60px;
font-size: 1.8rem;
}
/* Disable heavy 3D effects on tablets for performance */
.service-card:hover,
.destination-card:hover {
transform: translateY(-10px) scale(1.02);
}
.hover-lift-3d:hover {
transform: translateY(-10px) scale(1.02);
}
/* Reduce animation complexity on mobile */
body::after {
animation: globalPatternFloat 60s ease-in-out infinite;
}
/* ===== SLOWER ANIMATIONS FOR MOBILE - Travel Packages Section ===== */
/* Hide some clouds on mobile - show only 4 clouds */
.cloud-3,
.cloud-5,
.cloud-6,
.cloud-8 {
display: none !important;
}
/* ===== HERO LANDSCAPE MOBILE OPTIMIZATIONS ===== */
.hero-sky {
animation: skyColorShift 60s ease-in-out infinite !important;
}
.hero-sun {
width: 60px !important;
height: 60px !important;
}
.hero-sun::after {
width: 90px !important;
height: 90px !important;
}
.hero-moon {
width: 55px !important;
height: 55px !important;
}
.star {
width: 2px !important;
height: 2px !important;
}
/* Simplify mountains for mobile - REPLACE WITH HILL.PNG */
.hero-mountains {
display: none !important;
}
/* Add hill.png as background for mobile */
.hero-landscape::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: url('hill.png') no-repeat center bottom;
background-size: cover;
z-index: 2;
}
/* Show mountain clouds on mobile - AT THE TOP */
.mountain-clouds {
display: block !important;
bottom: 75% !important;
height: 25% !important;
}
/* Show fewer clouds on mobile - FASTER */
.mtn-cloud-2,
.mtn-cloud-4 {
display: none !important;
}
.mtn-cloud-1 {
animation: cloudDriftPeak 120s linear infinite !important;
width: 150px !important;
height: 45px !important;
}
.mtn-cloud-3 {
animation: cloudDriftPeak 140s linear infinite !important;
animation-delay: -70s !important;
width: 170px !important;
height: 50px !important;
}
.mtn-cloud-5 {
animation: cloudDriftPeak 110s linear infinite !important;
animation-delay: -80s !important;
width: 140px !important;
height: 42px !important;
}
/* Show only 20 trees on mobile - hide last 10 */
.tree-1, .tree-2, .tree-3, .tree-4, .tree-5,
.tree-6, .tree-7, .tree-8, .tree-9, .tree-10,
.tree-11, .tree-12, .tree-13, .tree-14, .tree-15,
.tree-16, .tree-17, .tree-18, .tree-19, .tree-20 {
display: block !important;
}
.tree-21, .tree-22, .tree-23, .tree-24, .tree-25,
.tree-26, .tree-27, .tree-28, .tree-29, .tree-30 {
display: none !important;
}
.mtn-cloud-2,
.mtn-cloud-4 {
display: none !important;
}
.mtn-cloud-1 {
animation: cloudDriftPeak 80s linear infinite !important;
width: 150px !important;
height: 45px !important;
}
.mtn-cloud-3 {
animation: cloudDriftPeak 90s linear infinite !important;
animation-delay: -45s !important;
width: 170px !important;
height: 50px !important;
}
.mtn-cloud-5 {
animation: cloudDriftPeak 70s linear infinite !important;
animation-delay: -60s !important;
width: 140px !important;
height: 42px !important;
}
/* Green ground for mobile - INCREASED HEIGHT */
.hero-forest {
height: 20% !important;
}
/* Grass GIFs for mobile */
.grass-layer {
height: 100% !important;
}
/* Adjust tree sizes and positions for mobile - FULLY LEFT SIDE */
.forest-tree {
height: 110% !important;
}
.tree-2, .tree-4, .tree-6, .tree-8, .tree-10,
.tree-12, .tree-14, .tree-16, .tree-18, .tree-20 {
height: 120% !important;
}
/* Reposition 20 trees to FULLY LEFT SIDE on mobile */
.tree-1 { left: -5% !important; }
.tree-2 { left: 0% !important; }
.tree-3 { left: 5% !important; }
.tree-4 { left: 10% !important; }
.tree-5 { left: 15% !important; }
.tree-6 { left: 20% !important; }
.tree-7 { left: 25% !important; }
.tree-8 { left: 30% !important; }
.tree-9 { left: 35% !important; }
.tree-10 { left: 40% !important; }
.tree-11 { left: 45% !important; }
.tree-12 { left: 50% !important; }
.tree-13 { left: 55% !important; }
.tree-14 { left: 60% !important; }
.tree-15 { left: 65% !important; }
.tree-16 { left: 70% !important; }
.tree-17 { left: 75% !important; }
.tree-18 { left: 80% !important; }
.tree-19 { left: 85% !important; }
.tree-20 { left: 90% !important; }
/* Hide some trees on tablet for better performance */
.tree-3,
.tree-7 {
display: none !important;
}
.hero-mist {
animation: mistFloat 120s linear infinite !important;
opacity: 0.6 !important;
}
.hero-mist-2 {
animation: mistFloat 90s linear infinite reverse !important;
opacity: 0.5 !important;
}
/* Smaller hiker for mobile - ON MOUNTAIN */
.hiking-person {
width: 50px !important;
bottom: 40% !important;
animation: hikerWalkMountain 70s linear infinite !important;
}
/* Slower sky animation - REMOVED */
/* Slower cloud animations - 3x slower for mobile (only 4 clouds visible) */
.cloud-1 {
animation: cloudDrift1 240s linear infinite !important;
animation-delay: 0s !important;
}
.cloud-2 {
animation: cloudDrift2 195s linear infinite !important;
animation-delay: -45s !important;
}
.cloud-4 {
animation: cloudDrift4 285s linear infinite !important;
animation-delay: -30s !important;
}
.cloud-7 {
animation: cloudDrift7 225s linear infinite !important;
animation-delay: -75s !important;
}
/* Slower ocean wave animations - 3x slower */
.wave-1 {
animation: waveMotion1 24s ease-in-out infinite !important;
}
.wave-2 {
animation: waveMotion2 30s ease-in-out infinite !important;
animation-delay: -6s !important;
}
.wave-3 {
animation: waveMotion3 36s ease-in-out infinite !important;
animation-delay: -12s !important;
}
.wave-4 {
animation: waveMotion4 45s ease-in-out infinite !important;
animation-delay: -18s !important;
}
/* Slower ocean shimmer */
.destinations-ocean::before {
animation: oceanShimmer 12s linear infinite !important;
}
/* Slower pirate ship animation - 3x slower */
.pirate-ship {
animation: sailPirateShip 66s linear infinite !important;
width: 180px !important;
max-height: 100px !important;
}
/* Slower airplane animations - 3x slower */
.flying-airplane {
width: 140px !important;
max-height: 80px !important;
}
.flying-airplane-1 {
animation: flyAirplaneAlternate 168s linear infinite !important;
}
.flying-airplane-2 {
animation: flyAirplaneAlternate2 180s linear infinite !important;
animation-delay: 24s !important;
}
.flying-airplane-3 {
animation: flyAirplaneDiagonalAlternate 192s linear infinite !important;
animation-delay: 48s !important;
}
}
/* Small Devices (Phones landscape, 481px - 575px) */
@media (max-width: 576px) {
.container {
padding: 0 15px;
}
/* Responsive logo sizes for small phones */
.brand-logo {
height: 65px;
width: 65px;
min-width: 65px;
}
.brand-logo-mobile {
height: 60px;
width: 60px;
min-width: 60px;
}
.hero {
min-height: 65vh;
padding: 70px 0 50px;
}
/* Mobile-optimized slideshow */
.hero-slideshow .slide {
background-size: cover;
background-position: center;
}
/* Adjust overlay for mobile */
.hero-slideshow::after {
background: rgba(0, 0, 0, 0.4);
}
/* Destinations background for mobile */
.destinations {
background-attachment: scroll !important;
}
.destinations::before {
background: rgba(0, 0, 0, 0.2) !important;
}
.hero-content h1 {
font-size: 1.6rem;
}
.hero-content p {
font-size: 0.9rem;
}
.btn {
padding: 0.7rem 1.5rem;
font-size: 0.9rem;
}
.stat-card {
padding: 1.2rem 0.8rem;
}
.stat-number {
font-size: 2rem;
}
.stat-label {
font-size: 0.85rem;
}
.section-header h2 {
font-size: 1.8rem;
}
.section-header p {
font-size: 0.9rem;
}
section {
padding: 30px 0;
}
.service-card,
.destination-card {
padding: 20px;
}
.service-card i,
.destination-card i {
font-size: 2.2rem;
}
.blogs-grid {
grid-template-columns: 1fr;
justify-items: center;
}
.blog-card {
width: 100%;
max-width: 400px;
margin: 0 auto;
}
.contact-container {
display: flex;
flex-direction: column;
align-items: center;
}
.contact-form-wrapper,
.contact-form,
.contact-info {
max-width: 400px;
margin: 0 auto;
}
.contact-card {
max-width: 400px;
margin: 0 auto;
}
.floating-icon {
width: 50px;
height: 50px;
font-size: 1.5rem;
}
/* ===== EVEN SLOWER ANIMATIONS FOR SMALL PHONES ===== */
/* Hide more clouds on small phones - show only 3 clouds */
.cloud-2,
.cloud-3,
.cloud-5,
.cloud-6,
.cloud-8 {
display: none !important;
}
/* ===== HERO LANDSCAPE - EXTRA SLOW FOR SMALL PHONES ===== */
.hero-sky {
animation: skyColorShift 90s ease-in-out infinite !important;
}
.hero-sun {
width: 50px !important;
height: 50px !important;
}
.hero-sun::after {
width: 75px !important;
height: 75px !important;
}
.hero-moon {
width: 45px !important;
height: 45px !important;
}
.star {
width: 2px !important;
height: 2px !important;
}
.moon-crater {
transform: scale(0.7);
}
/* Further simplify mountains for small phones - REPLACE WITH HILL.PNG */
.hero-mountains {
display: none !important;
}
/* Add hill.png as background for small phones */
.hero-landscape::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: url('hill.png') no-repeat center bottom;
background-size: cover;
z-index: 2;
}
/* Show mountain clouds on small phones - AT THE TOP */
.mountain-clouds {
display: block !important;
bottom: 75% !important;
height: 22% !important;
}
/* Only 2 clouds on small phones - FASTER */
.mtn-cloud-2,
.mtn-cloud-4,
.mtn-cloud-5 {
display: none !important;
}
.mtn-cloud-1 {
animation: cloudDriftPeak 160s linear infinite !important;
width: 120px !important;
height: 38px !important;
}
.mtn-cloud-3 {
animation: cloudDriftPeak 190s linear infinite !important;
animation-delay: -95s !important;
width: 140px !important;
height: 42px !important;
}
/* Show only 20 trees on small phones - hide last 10 */
.tree-1, .tree-2, .tree-3, .tree-4, .tree-5,
.tree-6, .tree-7, .tree-8, .tree-9, .tree-10,
.tree-11, .tree-12, .tree-13, .tree-14, .tree-15,
.tree-16, .tree-17, .tree-18, .tree-19, .tree-20 {
display: block !important;
}
.tree-21, .tree-22, .tree-23, .tree-24, .tree-25,
.tree-26, .tree-27, .tree-28, .tree-29, .tree-30 {
display: none !important;
}
.mtn-cloud-2,
.mtn-cloud-4,
.mtn-cloud-5 {
display: none !important;
}
.mtn-cloud-1 {
animation: cloudDriftPeak 60s linear infinite !important;
width: 120px !important;
height: 38px !important;
}
.mtn-cloud-3 {
animation: cloudDriftPeak 70s linear infinite !important;
animation-delay: -35s !important;
width: 140px !important;
height: 42px !important;
}
/* Green ground for small phones - INCREASED HEIGHT */
.hero-forest {
height: 16% !important;
}
/* Grass GIFs for small phones */
.grass-layer {
height: 100% !important;
}
/* Adjust tree sizes and positions for small phones - FULLY LEFT SIDE */
.forest-tree {
height: 100% !important;
}
.tree-2, .tree-4, .tree-6, .tree-8, .tree-10,
.tree-12, .tree-14, .tree-16, .tree-18, .tree-20 {
height: 110% !important;
}
/* Reposition 20 trees to FULLY LEFT SIDE on small phones */
.tree-1 { left: -8% !important; }
.tree-2 { left: -2% !important; }
.tree-3 { left: 4% !important; }
.tree-4 { left: 10% !important; }
.tree-5 { left: 16% !important; }
.tree-6 { left: 22% !important; }
.tree-7 { left: 28% !important; }
.tree-8 { left: 34% !important; }
.tree-9 { left: 40% !important; }
.tree-10 { left: 46% !important; }
.tree-11 { left: 52% !important; }
.tree-12 { left: 58% !important; }
.tree-13 { left: 64% !important; }
.tree-14 { left: 70% !important; }
.tree-15 { left: 76% !important; }
.tree-16 { left: 82% !important; }
.tree-17 { left: 88% !important; }
.tree-18 { left: 94% !important; }
.tree-19 { left: 100% !important; }
.tree-20 { left: 106% !important; }
.hero-mist {
animation: mistFloat 160s linear infinite !important;
opacity: 0.5 !important;
}
.hero-mist-2 {
animation: mistFloat 120s linear infinite reverse !important;
opacity: 0.4 !important;
}
/* Even smaller hiker for small phones - ON MOUNTAIN */
.hiking-person {
width: 40px !important;
bottom: 38% !important;
animation: hikerWalkMountain 100s linear infinite !important;
}
/* Slower cloud animations for small phones - 4x slower than desktop */
.cloud-1 {
animation: cloudDrift1 320s linear infinite !important;
animation-delay: 0s !important;
}
.cloud-4 {
animation: cloudDrift4 380s linear infinite !important;
animation-delay: -40s !important;
}
.cloud-7 {
animation: cloudDrift7 300s linear infinite !important;
animation-delay: -100s !important;
}
/* Slower wave animations for small phones - 4x slower */
.wave-1 {
animation: waveMotion1 32s ease-in-out infinite !important;
}
.wave-2 {
animation: waveMotion2 40s ease-in-out infinite !important;
animation-delay: -8s !important;
}
.wave-3 {
animation: waveMotion3 48s ease-in-out infinite !important;
animation-delay: -16s !important;
}
.wave-4 {
animation: waveMotion4 60s ease-in-out infinite !important;
animation-delay: -24s !important;
}
/* Slower pirate ship - 4x slower */
.pirate-ship {
animation: sailPirateShip 88s linear infinite !important;
width: 150px !important;
max-height: 85px !important;
}
/* Slower airplanes - 4x slower */
.flying-airplane {
width: 120px !important;
max-height: 70px !important;
}
.flying-airplane-1 {
animation: flyAirplaneAlternate 224s linear infinite !important;
}
.flying-airplane-2 {
animation: flyAirplaneAlternate2 240s linear infinite !important;
animation-delay: 32s !important;
}
.flying-airplane-3 {
animation: flyAirplaneDiagonalAlternate 256s linear infinite !important;
animation-delay: 64s !important;
}
}
/* Extra Small Devices (Phones portrait, up to 480px) */
@media (max-width: 480px) {
.container {
padding: 0 15px;
}
/* Responsive logo sizes for extra small phones */
.brand-logo {
height: 500px;
width: 500px;
min-width: 500px;
}
.brand-logo-mobile {
height: 95px;
width:95px;
min-width: 130px;
}
.hero {
min-height: 60vh;
padding: 60px 0 40px;
}
.hero-content {
padding: 0 10px;
}
.hero-content h1 {
font-size: 1.4rem;
margin-bottom: 0.8rem;
}
.hero-content p {
font-size: 0.85rem;
margin-bottom: 1.2rem;
}
.hero-stats {
gap: 1rem;
}
.stat-card {
padding: 1rem 0.8rem;
}
.stat-number {
font-size: 1.8rem;
}
.stat-label {
font-size: 0.8rem;
}
.logo {
font-size: 1.1rem;
}
.logo img {
height: 30px;
}
.nav-links a {
font-size: 0.85rem;
padding: 0.5rem 1rem;
}
.section-header {
margin-bottom: 2rem;
}
.section-header h2 {
font-size: 1.5rem;
margin-bottom: 0.8rem;
}
.section-header p {
font-size: 0.85rem;
}
.services,
.destinations,
.testimonials,
.contact {
padding: 40px 0;
}
.services-grid,
.destinations-grid {
gap: 15px;
}
.blogs-grid {
gap: 15px;
justify-items: center;
}
.blog-card {
width: 100%;
max-width: 350px;
margin: 0 auto;
}
.contact-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.contact-form-wrapper,
.contact-form,
.contact-info {
max-width: 350px;
margin: 0 auto;
}
.contact-card {
max-width: 350px;
margin: 0 auto;
}
.service-card,
.destination-card,
.contact-form {
padding: 20px 15px;
}
.service-card h3,
.destination-card h3 {
font-size: 1.1rem;
}
.service-card p,
.destination-card p {
font-size: 0.85rem;
}
.service-card i,
.destination-card i {
font-size: 2rem;
margin-bottom: 0.8rem;
}
.btn {
padding: 0.6rem 1.2rem;
font-size: 0.85rem;
}
.contact-form h3 {
font-size: 1.3rem;
margin-bottom: 1rem;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
font-size: 0.9rem;
padding: 10px 12px;
}
.testimonial-card {
padding: 18px;
}
.testimonial-text {
font-size: 0.85rem;
}
.testimonial-author h4 {
font-size: 0.95rem;
}
.testimonial-author p {
font-size: 0.8rem;
}
.footer-section {
margin-bottom: 25px;
}
.footer-section h3 {
font-size: 1rem;
margin-bottom: 1rem;
}
.footer-section p,
.footer-section a {
font-size: 0.85rem;
}
.floating-icon {
display: none; /* Hide floating icons on small screens for cleaner UI */
}
/* Disable heavy animations on mobile for performance */
* {
animation-duration: 0.5s !important;
}
.service-card:hover,
.destination-card:hover,
.testimonial-card:hover {
transform: translateY(-5px);
}
/* Simplify 3D effects */
.hover-lift-3d:hover {
transform: translateY(-5px);
}
}
/* Very Small Devices (320px - 375px) */
@media (max-width: 375px) {
.hero-content h1 {
font-size: 1.3rem;
}
.section-header h2 {
font-size: 1.4rem;
}
.btn {
padding: 0.5rem 1rem;
font-size: 0.8rem;
}
.stat-number {
font-size: 1.6rem;
}
.stat-label {
font-size: 0.75rem;
}
.blogs-grid {
justify-items: center;
}
.blog-card {
width: 100%;
max-width: 320px;
margin: 0 auto;
}
.contact-container {
display: flex;
flex-direction: column;
align-items: center;
}
.contact-form-wrapper,
.contact-form,
.contact-info {
max-width: 320px;
margin: 0 auto;
}
.contact-card {
max-width: 320px;
margin: 0 auto;
}
}
/* Landscape Orientation Optimization */
@media (max-height: 500px) and (orientation: landscape) {
.hero {
min-height: 100vh;
padding: 40px 0 30px;
}
.hero-content h1 {
font-size: 1.5rem;
}
.hero-stats {
flex-direction: row;
justify-content: center;
margin-top: 1rem;
}
.stat-card {
padding: 0.8rem;
}
section {
padding: 25px 0;
}
}
/* System Preferences - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.floating-icon {
animation: none;
}
.service-card:hover,
.destination-card:hover,
.testimonial-card:hover {
transform: none;
}
}
/* System Preferences - Dark Mode Support */
@media (prefers-color-scheme: dark) {
:root {
--text-color: #f1f5f9;
--dark-text: #e2e8f0;
--light-bg: #1e293b;
}
body {
background-color: #0f172a;
color: var(--text-color);
}
.service-card,
.destination-card,
.testimonial-card,
.contact-form {
background: rgba(30, 41, 59, 0.8);
border-color: rgba(255, 255, 255, 0.1);
}
nav {
background: rgba(15, 23, 42, 0.95);
}
footer {
background: #0f172a;
}
}
/* Blog Post Page Styles */
.blog-post-section {
background: #f8f9fa;
min-height: 100vh;
}
.blog-featured-image {
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
.blog-post-content {
background: white;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
line-height: 1.7;
color: #2d3748;
}
.blog-post-content h1,
.blog-post-content h2,
.blog-post-content h3 {
color: #2d3748;
margin-top: 1.5rem;
margin-bottom: 1rem;
}
.blog-post-content p {
margin-bottom: 1rem;
}
/* Print Styles */
@media print {
nav,
.hero-buttons,
.floating-icon,
.contact-form,
footer {
display: none !important;
}
body {
background: white;
color: black;
}
.hero,
section {
page-break-inside: avoid;
padding: 20px 0;
}
.service-card,
.destination-card {
border: 1px solid #000;
page-break-inside: avoid;
}
}
/* High Contrast Mode */
@media (prefers-contrast: high) {
:root {
--primary-color: #1a4d0a;
--secondary-color: #6b3410;
--text-color: #000000;
}
.btn {
border: 2px solid currentColor;
}
.service-card,
.destination-card,
.testimonial-card {
border: 2px solid var(--primary-color);
}
}
/* Chatbot Styles */
#chatbot-container {
position: fixed;
bottom: 100px;
right: 30px;
z-index: 1000;
}
#chatbot-button {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
cursor: pointer;
box-shadow: var(--shadow-medium);
transition: var(--transition);
animation: pulse 2s infinite;
}
#chatbot-button:hover {
transform: scale(1.1);
box-shadow: var(--shadow-heavy);
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); }
100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}
#chatbot-window {
position: absolute;
bottom: 80px;
right: 0;
width: 350px;
height: 500px;
background: white;
border-radius: var(--border-radius);
box-shadow: var(--shadow-heavy);
display: none;
flex-direction: column;
overflow: hidden;
animation: slideInUp 0.3s ease;
}
#chatbot-window.active {
display: flex;
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.chatbot-header {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
padding: 15px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.chatbot-header h4 {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
}
#chatbot-close {
background: none;
border: none;
color: white;
font-size: 1.2rem;
cursor: pointer;
padding: 5px;
border-radius: 50%;
transition: var(--transition);
}
#chatbot-close:hover {
background: rgba(255, 255, 255, 0.2);
}
.chatbot-messages {
flex: 1;
padding: 20px;
overflow-y: auto;
background: #f8fafc;
}
.bot-message {
margin-bottom: 15px;
display: flex;
justify-content: flex-start;
}
.user-message {
margin-bottom: 15px;
display: flex;
justify-content: flex-end;
}
.message-content {
max-width: 80%;
padding: 12px 16px;
border-radius: 18px;
font-size: 0.9rem;
line-height: 1.4;
}
.bot-message .message-content {
background: white;
color: var(--dark-color);
border-bottom-left-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.user-message .message-content {
background: var(--primary-color);
color: white;
border-bottom-right-radius: 4px;
}
.chatbot-questions {
padding: 15px;
border-top: 1px solid #e2e8f0;
background: white;
max-height: 200px;
overflow-y: auto;
}
.question-btn {
display: block;
width: 100%;
padding: 10px 15px;
margin-bottom: 8px;
background: #f1f5f9;
border: 1px solid #e2e8f0;
border-radius: 20px;
color: var(--dark-color);
font-size: 0.85rem;
cursor: pointer;
transition: var(--transition);
text-align: left;
}
.question-btn:hover {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
.question-btn:last-child {
margin-bottom: 0;
}
@media (max-width: 768px) {
#chatbot-container {
right: 20px;
bottom: 80px;
}
#chatbot-window {
width: 300px;
height: 450px;
}
#chatbot-button {
width: 50px;
height: 50px;
font-size: 1.3rem;
}
}
/* ========== PREMIUM 3D ENHANCEMENTS ========== */
/* Floating Particles Background */
@keyframes floatParticles {
0%, 100% {
transform: translateY(0) translateX(0) scale(1);
opacity: 0.3;
}
25% {
transform: translateY(-50px) translateX(30px) scale(1.2);
opacity: 0.6;
}
50% {
transform: translateY(-80px) translateX(-20px) scale(0.8);
opacity: 0.4;
}
75% {
transform: translateY(-40px) translateX(40px) scale(1.1);
opacity: 0.5;
}
}
/* Premium Glassmorphism Effect */
.glass-effect {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
/* 3D Card Flip Effect */
@keyframes cardFlip {
0% { transform: perspective(1000px) rotateY(0deg); }
100% { transform: perspective(1000px) rotateY(360deg); }
}
/* Parallax Scroll Effect Enhancement */
@keyframes parallaxFloat {
0%, 100% {
transform: translateY(0) translateZ(0);
}
50% {
transform: translateY(-30px) translateZ(20px);
}
}
/* Premium Glow Effect */
@keyframes premiumGlow {
0%, 100% {
box-shadow:
0 0 20px rgba(45, 80, 22, 0.3),
0 0 40px rgba(139, 69, 19, 0.2),
0 0 60px rgba(74, 124, 89, 0.1);
}
50% {
box-shadow:
0 0 30px rgba(45, 80, 22, 0.5),
0 0 60px rgba(139, 69, 19, 0.4),
0 0 90px rgba(74, 124, 89, 0.3);
}
}
/* Magnetic Button Effect */
.btn-magnetic {
transition: var(--transition-bounce);
}
.btn-magnetic:hover {
animation: magneticPulse 0.6s ease-in-out;
}
@keyframes magneticPulse {
0%, 100% {
transform: scale(1);
}
25% {
transform: scale(1.1) rotate(2deg);
}
50% {
transform: scale(1.15) rotate(-2deg);
}
75% {
transform: scale(1.1) rotate(1deg);
}
}
/* Ripple Effect */
.ripple-effect {
position: relative;
overflow: hidden;
}
.ripple-effect::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
transform: translate(-50%, -50%);
animation: ripple 1.5s infinite;
}
@keyframes ripple {
0% {
width: 0;
height: 0;
opacity: 1;
}
100% {
width: 300px;
height: 300px;
opacity: 0;
}
}
/* Text Gradient Animation */
.animated-gradient-text {
background: linear-gradient(
90deg,
var(--primary-color),
var(--secondary-color),
var(--accent-color),
var(--primary-color)
);
background-size: 300% 300%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradientFlow 4s ease infinite;
}
@keyframes gradientFlow {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
/* 3D Hover Lift */
.hover-lift-3d {
transition: var(--transition-bounce);
transform-style: preserve-3d;
}
.hover-lift-3d:hover {
transform:
translateY(-20px)
translateZ(30px)
rotateX(10deg)
scale(1.05);
box-shadow:
0 40px 80px rgba(45, 80, 22, 0.4),
0 20px 40px rgba(139, 69, 19, 0.3),
0 10px 20px rgba(0, 0, 0, 0.2);
}
/* Spotlight Effect */
@keyframes spotlight {
0% {
background-position: -200% center;
}
100% {
background-position: 200% center;
}
}
.spotlight-effect {
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.3) 50%,
transparent 100%
);
background-size: 200% 100%;
animation: spotlight 3s linear infinite;
}
/* Depth Layers */
.depth-layer-1 { transform: translateZ(10px); }
.depth-layer-2 { transform: translateZ(20px); }
.depth-layer-3 { transform: translateZ(30px); }
.depth-layer-4 { transform: translateZ(40px); }
/* Premium Shadow Variations */
.shadow-premium-sm {
box-shadow:
0 5px 15px rgba(45, 80, 22, 0.2),
0 2px 8px rgba(0, 0, 0, 0.1);
}
.shadow-premium-md {
box-shadow:
0 15px 35px rgba(45, 80, 22, 0.3),
0 5px 15px rgba(139, 69, 19, 0.2);
}
.shadow-premium-lg {
box-shadow:
0 30px 60px rgba(45, 80, 22, 0.4),
0 15px 30px rgba(139, 69, 19, 0.3),
0 5px 15px rgba(0, 0, 0, 0.2);
}
/* ============================================
Package Inquiry Modal - Form Label Fix
============================================ */
#packageInquiryModal .form-label {
display: block !important;
margin-bottom: 8px !important;
font-weight: 600 !important;
color: #1e293b !important;
font-size: 14px !important;
opacity: 1 !important;
visibility: visible !important;
}
#packageInquiryModal .form-control {
display: block !important;
width: 100% !important;
padding: 12px !important;
font-size: 15px !important;
border: 2px solid #e2e8f0 !important;
border-radius: 10px !important;
background-color: #ffffff !important;
color: #1e293b !important;
transition: all 0.3s ease !important;
}
#packageInquiryModal .form-control:focus {
border-color: #77DD77 !important;
box-shadow: 0 0 0 0.2rem rgba(119, 221, 119, 0.25) !important;
outline: none !important;
}
#packageInquiryModal .form-control::placeholder {
color: #94a3b8 !important;
opacity: 1 !important;
}
#packageInquiryModal .text-muted {
display: block !important;
color: #64748b !important;
font-size: 12px !important;
margin-top: 4px !important;
opacity: 1 !important;
visibility: visible !important;
}
#packageInquiryModal .mb-3 {
margin-bottom: 1.5rem !important;
}
#packageInquiryModal label {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Ensure textarea is visible */
#packageInquiryModal textarea.form-control {
min-height: 90px !important;
resize: vertical !important;
}
/* Select dropdown styling */
#packageInquiryModal select.form-control {
appearance: auto !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231e293b' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
padding-right: 36px !important;
}
/* Ensure hamburger spans are visible */
.navbar-toggler span {
display: block !important;
visibility: visible !important;
}