/* ==========================================================================
   1. CSS VARIABLES (PLACE YOUR COLOR PALETTE HERE!)
   ========================================================================== */

:root {
    /* DEFAULT VIBRANT COLOMBIA PALETTE - Swap these out! */
    --primary-color: #D9184B;    /* Magenta */
    --secondary-color: #18C5D9;  /* Cyan */
    --accent-color: #F2A922;     /* Yellow/Mustard */
    --dark-bg: #0f141e;          /* Very dark blue/black */
    --light-bg: #f9f9f9;         /* Off-white */
    --text-dark: #222222;        
    --text-light: #ffffff;

    /* Global settings */
    --font-main: 'Poppins', sans-serif;
    --transition-smooth: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Custom easing for natural feel */
}

/* ==========================================================================
   2. RESET & BASE STYLES
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Ensures padding doesn't affect width */
}

html {
    scroll-behavior: smooth; /* Native smooth scrolling for anchor links */
}

body {
    font-family: var(--font-main);
    background-color: var(--light-bg);
    color: var(--text-dark);
    overflow-x: hidden; /* Prevents horizontal scroll on animations */
}

/* ==========================================================================
   3. NAVIGATION BAR
   ========================================================================== */

.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 1.2rem 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    background: transparent;
    backdrop-filter: blur(6px);

    z-index: 1000;
}

.logo img {
    height: 40px;
}

.logo {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-light);
}

.logo span {
    color: var(--secondary-color); /* The dot in the logo */
}

.nav-links a {
    color: var(--text-light);
    text-decoration: none;
    margin-left: 2rem;
    font-weight: 600;
    transition: var(--transition-smooth);
}

.nav-links a:hover {
    color: var(--accent-color);
}

/* Hamburger Menu (Hidden on Desktop) */

.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
}

.menu-toggle span {
    width: 30px;
    height: 3px;
    background-color: var(--text-light);
    transition: var(--transition-smooth);
}

/* ==========================================================================
   4. HERO SECTION
   ========================================================================== */

.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    padding: 0 5%;
    background-color: var(--dark-bg);
    position: relative;
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: 2; /* Keeps text above background shapes */
    max-width: 800px;
}

.hero h1 {
    color: var(--text-light);
    /* clamp() creates fluid typography: min-size, preferred-size, max-size */
    font-size: clamp(3rem, 6vw, 5rem); 
    line-height: 1.1;
    margin-bottom: 1rem;
}

.hero p {
    color: #ccc;
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

/* Call to Action Button */
.cta-button {
    display: inline-block;
    padding: 1rem 2.5rem;
    background-color: var(--primary-color);
    color: var(--text-light);
    text-decoration: none;
    font-weight: 600;
    border-radius: 50px;
    transition: var(--transition-smooth);
    box-shadow: 0 10px 20px rgba(217, 24, 75, 0.3);
}

.cta-button:hover {
    transform: translateY(-3px); /* Lifts button up */
    background-color: var(--accent-color);
    box-shadow: 0 15px 25px rgba(242, 169, 34, 0.4);
}

/* Decorative background circle */

.hero-bg-shape {
    position: absolute;
    right: -10%;
    top: 20%;
    width: 600px;
    height: 600px;
    background: linear-gradient(45deg, var(--secondary-color), var(--primary-color));
    border-radius: 50%;
    filter: blur(80px); /* Creates a soft glowing orb effect */
    opacity: 0.5;
    z-index: 1;
    animation: float 6s ease-in-out infinite; /* Floating animation */
}

/* HERO VIDEO BACKGROUND */

.hero {
    position: relative;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Video */

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
}

/* Dark overlay */

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        rgba(0,0,0,0.5),
        rgba(0,0,0,0.6)
    );
    z-index: 1;
}

/* Logo on hero */

.hero-logo {
    position: absolute;
    top: 25px;
    left: 5%;
    z-index: 3;
}

.hero-logo img {
    height: 55px;
}

/* Hero text */

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.hero h1 {
    font-size: clamp(3rem,6vw,5rem);
    color: white;
    font-weight: 800;
}

.hero p {
    font-size: 1.4rem;
    margin-top: 15px;
    color: #eee;
}

/* CTA */

.cta-button {
    margin-top: 30px;
    display: inline-block;
}

/* ==========================================================================
   5. DESTINATIONS (CSS GRID)
   ========================================================================== */

.destinations {
    padding: 6rem 5%;
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 3rem;
    text-align: center;
    color: var(--dark-bg);
}

.grid-container {
    display: grid;
    /* Auto-fit creates a responsive grid without media queries! */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.gallery img {
    width: 200px;
    height: auto;
}
.gallery-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive columns */
  gap: 20px; /* Adjust the gap between images */
  padding: 20px;
}

.gallery-item {
  display: block; /* Make the link fill the space */
  position: relative; /* For potential overlay effects */
  overflow: hidden; /*  Prevent image overflow */
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block; /* Remove extra space below image */
  transition: transform 0.3s ease; /* Smooth zoom effect */
}

.gallery-item:hover img {
  transform: scale(1.1); /* Zoom on hover */
}

/* Optional: Add a lightbox effect (see JavaScript section) */

.card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: var(--transition-smooth);
    cursor: pointer;
}

.card:hover {
    transform: translateY(-10px); /* Card lifts on hover */
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.card-image {
    height: 250px;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}

.card:hover .card-image {
    transform: scale(1.05); /* Image slightly zooms in on hover */
}

.card-content {
    padding: 1.5rem;
}

.card-content h3 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

/* ==========================================================================
   6. CULTURE SECTION (FLEXBOX)
   ========================================================================== */

.culture {
    padding: 6rem 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
    background-color: var(--dark-bg);
    color: var(--text-light);
}

.culture-text {
    flex: 1;
}

.culture-text h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--secondary-color);
}

.culture-text p {
    line-height: 1.8;
    margin-bottom: 2rem;
    color: #ddd;
}

.outline-btn {
    padding: 0.8rem 2rem;
    background: transparent;
    border: 2px solid var(--accent-color);
    color: var(--accent-color);
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.outline-btn:hover {
    background: var(--accent-color);
    color: var(--dark-bg);
}

.culture-visual {
    flex: 1;
    position: relative;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Abstract colored circles representing culture */

.color-circle {
    position: absolute;
    border-radius: 50%;
    mix-blend-mode: screen; /* Blends colors beautifully */
}

.circle-1 { width: 250px; height: 250px; background: var(--primary-color); left: 10%; z-index: 2; }
.circle-2 { width: 200px; height: 200px; background: var(--secondary-color); right: 10%; top: 10%; z-index: 1;}
.circle-3 { width: 150px; height: 150px; background: var(--accent-color); bottom: 10%; right: 30%; z-index: 3;}


/*==================================
TOURS
===================================*/

.tour-search{
position:absolute;
bottom:-40px;
left:50%;
transform:translateX(-50%);
background:white;
padding:20px;
border-radius:10px;
display:flex;
gap:15px;
box-shadow:0 15px 40px rgba(0,0,0,0.15);
z-index:10;
}

.tour-search input,
.tour-search select{
padding:12px;
border:1px solid #ddd;
border-radius:5px;
font-family:var(--font-main);
}

.search-btn{
background:var(--primary-color);
color:white;
border:none;
padding:12px 20px;
border-radius:6px;
font-weight:600;
cursor:pointer;
}


/* ==========================================================================
PACKAGES
 ==========================================================================*/
 
.packages{
padding:6rem 5%;
background:#fff;
}

.packages-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:2rem;
}

.package-card{
background:white;
border-radius:12px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
transition:var(--transition-smooth);
}

.package-card:hover{
transform:translateY(-8px);
}

.package-img{
height:220px;
background-size:cover;
background-position:center;
}

.package-content{
padding:20px;
}

.package-footer{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:15px;
}

.price{
font-weight:800;
font-size:1.4rem;
color:var(--primary-color);
}

.book-btn{
background:var(--secondary-color);
color:white;
padding:8px 16px;
border-radius:20px;
text-decoration:none;
font-weight:600;
}


/* ==========================================================================
   7. FOOTER
   ========================================================================== */

footer {
    text-align: center;
    padding: 2rem;
    background: #080a0f;
    color: #666;
}

.whatsapp-float {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background: #25D366;
    color: white;
    padding: 14px 20px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* ==========================================================================
   8. ANIMATION CLASSES (Triggered by JS IntersectionObserver)
   ========================================================================== */

.animate-on-scroll {
    opacity: 0; /* Hidden by default */
    /* Hardware acceleration for smooth animations */
    will-change: opacity, transform; 
}

/* Animation: Fade Up */

.fade-up {
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Animation: Fade Right */

.fade-right {
    transform: translateX(-40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Animation: Fade Left */

.fade-left {
    transform: translateX(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* The class JS adds when element enters screen */

.is-visible {
    opacity: 1;
    transform: translate(0, 0);
}

/* Staggered delays for sequential animations */

.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }

/* Floating keyframe for hero background */

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-30px); }
    100% { transform: translateY(0px); }
}

/* ==========================================================================
   9. MOBILE RESPONSIVENESS
   ========================================================================== */
   
@media (max-width: 768px) {
    .menu-toggle {
        display: flex; /* Show hamburger */
    }

    .nav-links {
        position: absolute;
        top: 100%;
        left: -100%; /* Hidden off-screen to the left */
        width: 100%;
        background: var(--dark-bg);
        flex-direction: column;
        text-align: center;
        transition: 0.4s ease-in-out;
    }

    .nav-links.active {
        left: 0; /* Slides in menu */
    }

    .nav-links a {
        margin: 1.5rem 0;
        display: block;
    }

    .culture {
        flex-direction: column; /* Stack culture section vertically */
        text-align: center;
    }
}