* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

.header-box {
    background-image: url('landscape.jpg');
    background-size: cover;      /* Scales the image to fill the box */
    background-position: center; /* Keeps the middle of the image visible */
    height: 400px;
    display: flex;
    align-items: center;         /* Centers text vertically */
    justify-content: center;     /* Centers text horizontally */
}

.sa-flag-text {
  /* 1. Use a thick, heavy font so the flag is visible */
    font-family: 'Arial Black', sans-serif;
    
    font-size: 120px;
    font-weight: 900;
    text-align: center;
    margin: 50px 0;
    line-height: 0.8; /* Adjust line height to bring "BSA" and "Tours" closer together */

    /* 2. Set the South African Flag as the background */
    background-image: url('old-flag.jpg');
    background-size: 100% 100%; /* Scale the flag to fit the text */
    background-position: center;

    /* 3. The magic "Cut Out" properties */
    -webkit-background-clip: text; /* For Safari/Chrome */
    background-clip: text;         /* Standard property */
    color: transparent;            /* Hides the default black text */
    -webkit-text-stroke: 2px black; /* Optional: Adds a black outline to make the text pop */
    
    /* 4. Optional: Add a subtle shadow so it's readable on white backgrounds */
    filter: drop-shadow(4px 4px 2px rgba(0,0,0,0.2));
}

header {
  background: #2c3e50;
  color: white;
  padding: 1rem 0;
  text-align: center;
}

.logo-link {
    text-decoration: none; /* Removes the default link underline */
    cursor: pointer;       /* Ensures the mouse turns into a clicking hand */
}

.top-nav {
  background: #34495e;
  padding: 1rem;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 100;
}
.top-nav a {
  color: white;
  text-decoration: none;
  margin: 0 1rem;
  font-weight: bold;
  cursor: pointer;
}
.top-nav a:hover {
  color: #3498db;
}

section {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}
section.active {
  display: block;
}

.welcome-section {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 60px;
  padding: 30px 20px 30px;
}
.welcome-section h2 {
  color: #2c3e50;
  font-size: 1.5rem;
  font-style: italic;
}

.our-services-section {
  background: #ecf0f1;
  margin-top: 80px;
  padding: 30px 20px 30px;
}
.our-services-section h2 {
  color: #2c3e50;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 2rem;
}
.our-services-section p {
  color: #7f8c8d;
  font-size: 1.2rem;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  
}

.page-section {
  max-width: 1200px;
  align-items: center;
  margin: 0 auto;
  padding: 80px 20px 50px;
}
.page-section h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 2.5rem;
    color: #2c3e50;
}

.about

/* =========================================
   GALLERY PAGE & LINK STYLES
   ========================================= */

/* The Clickable Heading on Home Page */
.section-link {
    text-decoration: none;
    text-align: center;
    display: block; /* Allows us to center everything nicely */
    margin-bottom: 2rem;
    transition: transform 0.3s ease;
}

.section-link h2 {
    color: #2c3e50;
    margin-bottom: 5px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.section-link .subtitle {
    color: #888;
    font-size: 0.9rem;
    font-style: italic;
}

.section-link:hover {
    transform: scale(1.05); /* Heading grows slightly when hovered */
}

.section-link:hover h2 {
    color: #3498db; /* Turns blue when hovered */
}

.homepage-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Forces exactly 3 columns */
    gap: 15px;
    margin-top: 20px;
}

.homepage-gallery .gallery-item img {
    width: 100%;
    height: 250px; /* Made taller to match the new wider layout */
    object-fit: cover;
}

/* --- MOBILE SAFETY FALLBACK --- */
/* If the screen is phone-sized (under 768px wide), stack them into 2 columns */
@media (max-width: 768px) {
    .homepage-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* On very small phones (under 480px), stack them in a single column */
@media (max-width: 480px) {
    .homepage-gallery {
        grid-template-columns: 1fr;
    }
}

/* The Gallery Page Banner */
.gallery-hero {
    /* Replace this URL with a nice wide landscape photo for the gallery header! */
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4));
    background-size: cover;
    background-position: center;
}

/* The Full Gallery Page Layout */
.full-gallery-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
}

.full-gallery {
    display: grid;
    /* This makes the grid responsive. It will fit as many 300px images as possible on a row */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
    gap: 20px;
}

/* Upgrading the Image Hover Effect */
.gallery-item {
    overflow: hidden; /* Crucial for the zoom effect! Prevents the image from spilling out of the box */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.gallery-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease; /* Prepares the image for a smooth animation */
}

.gallery-item:hover img {
    transform: scale(1.1); /* Zooms the photo in by 10% when hovered! */
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
.gallery-item {
  background: #ecf0f1;
  padding: 1rem;
  text-align: center;
  border-radius: 5px;
}
.gallery-item img {
  width: 100%;
  height: 200px;
  background: #bdc3c7;
  border-radius: 5px;
}

/* The dark overlay background */
.lightbox {
    display: none; /* Hidden until clicked! */
    position: fixed;
    z-index: 1000; /* Makes sure it sits on top of your navigation bar */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* The dark grey/black area */
    align-items: center;
    justify-content: center;
}

/* The class we add with JavaScript to show it */
.lightbox.active {
    display: flex;
}

/* The zoomed-in image */
.lightbox-img {
    max-width: 90%;
    max-height: 90vh; /* Prevents it from stretching taller than the screen */
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

/* The 'X' Close Button */
.close-btn {
    position: absolute;
    top: 20px;
    right: 40px;
    color: white;
    font-size: 50px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
}

.close-btn:hover {
    color: #e74c3c; /* Turns red when hovered */
}

/* The Next/Prev Arrows */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* Perfectly centers them vertically */
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    font-size: 30px;
    padding: 15px 20px;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.3s;
}

.nav-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.prev-btn { left: 20px; }
.next-btn { right: 20px; }

.tours {
    display: grid;
    grid-template-columns: 1fr; /* Stacks them vertically by default */
    grid-auto-rows: 1fr; /* Makes all cards the same height */
    justify-items: center;  /* Centers them vertically */
    gap: 2rem;              /* Space between the stacked cards */
    width: 100%;
}

.tour-card-link {
    text-decoration: none; /* Removes the default blue link underline */
    width: 100%;
    max-width: 800px; /* Prevents the card from stretching too wide on giant screens */
    height: 100%; /* Makes the link take up the full height of the card */  
    display: block; /* Makes the link behave like a block element, allowing width and height to work */
}

.tour-card {
    border: 5px solid #bdc3c7;
    padding: 2rem;
    border-radius: 5px;
    background: #f8f9fa;
    color: #333;
    
    /* THE MAGIC: Tells the browser to smoothly animate any changes over 0.3 seconds */
    transition: transform 0.3s ease, box-shadow 0.3s ease; 

    height: 100%; /* Ensures the card takes up the full height of the link */ 
    flex-direction: column; /* Stacks the content vertically */
    justify-content: center; /* Centers the content vertically */
}

.tour-card:hover {
    transform: translateY(-8px); 
    box-shadow: 0 15px 25px rgba(0,0,0,0.15); 
    border-color: #3498db; 
}

.tour-card-CapePeninsula {
    background-image: linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0.85)), url('Cape_of_Good_Hope.jpg');
    background-size: cover;
    background-position: center;
    border: 5px solid #3B3B3B;
    border-radius: 15px;
}
.tour-card-CapeWinelands {
    background-image: linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0.85)), url('winelands.jpg');
    background-size: cover;
    background-position: center;
    border: 5px solid #3B3B3B;
    border-radius: 15px;
}
.tour-card-Safari {
    background-image: linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0.85)), url('safari.jpg');
    background-size: cover;
    background-position: center;
    border: 5px solid #3B3B3B;
    border-radius: 15px;
}
.tour-card-Shark {
    background-image: linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0.85)), url('shark-cage.jpg');
    background-size: cover;
    background-position: center;
    border: 5px solid #3B3B3B;
    border-radius: 15px;
}
.tour-card-Whale {
    background-image: linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0.85)), url('whale.jpg');
    background-size: cover;
    background-position: center;
    border: 5px solid #3B3B3B;
    border-radius: 15px;
}
.tour-card-GardenRoute {
    background-image: linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0.85)), url('garden-route.jpg');
    background-size: cover;
    background-position: center;
    border: 5px solid #3B3B3B;
    border-radius: 15px;
}

.tour-card h3 {
    color: #2c3e50;
    margin-bottom: 0.8rem;
    font-size: 1.8rem;
}

.tour-card p {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

/* =========================================
   CONTACT INFO TEXT
   ========================================= */
.contact-info {
    display: flex;
    justify-content: center; /* Centers the row on the page */
    align-items: center;
    gap: 40px;               /* The space between the phone and email */
    font-size: 1.2rem;
    color: #333;
    flex-wrap: wrap;         /* Safety feature: Stacks them if viewed on a tiny mobile screen! */
}

.contact-info p {
    margin: 0; /* Removes default paragraph spacing so they align perfectly */
}

/* Styles the phone and email links */
.contact-info a {
    color: #2c3e50;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-info a:hover {
    color: #3498db; 
    text-decoration: underline;
}


/* =========================================
  TOUR DETAIL PAGE STYLES
   ========================================= */

/* The Top Banner Image */
.tour-hero {
    height: 40vh; /* Takes up half the screen height */
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 50px;
}

.peninsula-hero {
    /* Using a dark overlay so the white text is readable */
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('Cape_of_Good_Hope.jpg');
    background-size: cover;
    background-position: center;
}

.winelands-hero {
    /* Using a dark overlay so the white text is readable */
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('winelands.jpg');
    background-size: cover;
    background-position: center;
}

.safari-hero {
    /* Using a dark overlay so the white text is readable */
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('safari.jpg');
    background-size: cover;
    background-position: center;
}

.shark-hero {
    /* Using a dark overlay so the white text is readable */
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('shark-cage.jpg');
    background-size: cover;
    background-position: center;
}

.tour-hero h1 {
    color: white;
    font-size: 4rem;
    font-family: 'Arial Black', sans-serif;
    letter-spacing: 2px;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
}

/* The Main Content Wrapper */
.tour-detail-container {
    max-width: 900px;
    margin: 0 auto; /* Centers the content */
    padding: 50px 20px;
}

.tour-overview h2 {
    color: #2c3e50;
    margin-bottom: 20px;
    text-align: center;
}

.tour-overview p {
    font-size: 1.1rem;
    margin-bottom: 15px;
    line-height: 1.8;
}

/* The Side-by-Side Information Grid */
.tour-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin: 40px 0;
}

.info-box {
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.inclusions {
    background-color: #e8f5e9; /* Very soft green */
    border-top: 4px solid #4CAF50;
}

.exclusions {
    background-color: #ffebee; /* Very soft red */
    border-top: 4px solid #f44336;
}

.info-box h3 {
    margin-bottom: 15px;
    color: #333;
}

.info-box ul {
    list-style-type: square;
    padding-left: 20px;
}

.info-box li {
    margin-bottom: 10px;
}

/* Terms and Conditions Box */
.tour-terms {
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    padding: 30px;
    border-radius: 8px;
    margin-bottom: 60px;
}

.tour-terms h3 {
    margin-bottom: 15px;
    color: #555;
    font-size: 1.2rem;
}

.tour-terms ul {
    padding-left: 20px;
}

.tour-terms li {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 10px;
}

/* Booking Section Setup */
.booking-section {
    background-color: #ecf0f1;
    padding: 40px;
    border-radius: 8px;
    text-align: center;
}

.booking-section p {
    margin-bottom: 30px;
}

/* ========================================= */


/* =========================================
  THANK YOU PAGE STYLES
   ========================================= */
.thank-you-container {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ecf0f1; /* Soft gray background */
    padding: 20px;
}

.thank-you-box {
    background: white;
    padding: 50px 40px;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    text-align: center;
    max-width: 500px;
    border-top: 5px solid #2ecc71; /* A nice green success bar at the top */
}

.success-icon {
    font-size: 50px;
    margin-bottom: 20px;
}

.thank-you-box h1 {
    color: #2c3e50;
    margin-bottom: 15px;
}

.thank-you-box p {
    color: #555;
    margin-bottom: 20px;
    line-height: 1.6;
}

.redirect-text {
    font-size: 0.9rem;
    color: #888;
    font-style: italic;
    margin-bottom: 30px !important;
}

.return-btn {
    display: inline-block;
    background: #3498db;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background 0.3s ease;
}

.return-btn:hover {
    background: #2980b9;
}

/* ========================================= */

.contact-form {
  max-width: 600px;
  margin: 0 auto;
  }
.form-group {
  margin-bottom: 1rem;
}
.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #bdc3c7;
  border-radius: 5px;
  font-family: Arial, sans-serif;
}
button {
  background: #3498db;
  color: white;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  }
button:hover {
  background: #2980b9;
}