/* Reset defaults */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: white;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure the body takes up at least the full viewport height */
  }
  
  main {
    flex: 1; /* Allow the main content to take up the remaining space */
    position: relative; /* Enable positioning context */
    display: flex;
    flex-direction: column;
  }
  
  /* Header */
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em;
    background-color: #222;
    color: white;
  }
  
  nav ul {
    list-style: none;
    display: flex;
  }
  
  nav li {
    margin: 0 1em;
  }
  
  nav a {
    color: white;
    text-decoration: none;
  }
  
  nav a:hover {
    color: #ddd;
  }
  
  /* Hero Section */
  .hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    height: 90vh;
    /* Remove clip-path as it can cause scrolling issues */
  }
  
  .hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
    /* Fix for jumping: add will-change property */
    will-change: transform;
    /* Add a transform to use hardware acceleration */
    transform: translateZ(0);
  }
  
  .hero-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
    z-index: 1;
    display: none;
  }

  .hero-text-below-header {
    text-align: center;
    padding: 1em 0;
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    color: white;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
    z-index: 1; /* Reduce from 2 to 1 */
  }
  
  .hero-text-below-header h1 {
    font-size: 2.5em; /* Adjust the size as needed */
    margin-bottom: 0.25em;
  }
  
  .hero-text-below-header p {
    font-size: 1.2em; /* Adjust the size as needed */
  }
  
  /* Add media queries for taller screens */
  @media screen and (min-height: 668px) {
    .hero {
      height: 70vh;
    }
    
    .hero img {
      object-position: center 28%;
    }
  }
  
  @media screen and (min-height: 800px) {
    .hero {
      height: 60vh;
    }
  }
  
  /* Intro Section */
  .intro {
    padding: 2em;
    text-align: center;
    position: relative;
    margin-top: -10vh; /* Reduced overlap since we're cropping the image */
    background-color: white; /* Add background to cover the overlapped image */
    border-radius: 20px 20px 0 0; /* Optional: rounds the top corners */
    box-shadow: 0 -5px 20px rgba(0,0,0,0.1); /* Optional: adds subtle shadow */
    z-index: 2; /* Ensure it stays above the hero section */
    min-height: 100vh; /* Make it at least full viewport height */
    padding-bottom: 100px; /* Add padding at bottom to account for footer */
  }
  
  .preview {
    display: flex;
    justify-content: center;
    gap: clamp(1rem, 3vw, 4rem);
    margin: clamp(1rem, 2vw, 2rem) auto;
    max-width: min(1400px, 90vw);
  }
  
  .category {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .category-content {
    position: relative;
    width: 100%;
    max-width: min(400px, 30vw); /* Larger max-width that scales with viewport */
    aspect-ratio: 4 / 3;
    overflow: hidden;
    margin: auto;
    padding-top: 0;
  }

  .category-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    display: block; /* Ensures the image fills the container and hover works properly */
  }

  .category-content:hover img {
    transform: scale(1.05);
  }

  .category-content::before {
    content: "See More";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    pointer-events: none; /* Keep this to ensure clicks pass through to the link */
    z-index: 1; /* Make sure it's above the image */
  }

  .category-content:hover::before {
    opacity: 1;
  }

  .category .btn {
    margin-top: 1rem;
  }
  
  .btn {
    display: inline-block;
    padding: clamp(0.5em, 1vw, 1em) clamp(1em, 2vw, 2em);
    background-color: #555;
    color: white;
    text-decoration: none;
    margin-top: 0.5em;
    font-size: clamp(0.9rem, 1.2vw, 1.1rem);
  }
  
  .btn:hover {
    background-color: #777;
  }
  
  /* About */
  .about {
    padding: 2em;
    text-align: center;
  }
  
  .profile-pic {
    width: 200px;
    height: auto;
    border-radius: 50%;
    margin: 1em 0;
  }
  
  /* Gallery */
  .gallery {
    padding: 2em;
  }
  
  .filters {
    margin-bottom: 1em;
    text-align: center;
  }
  
  .filters button {
    padding: 0.5em 1em;
    margin: 0 0.5em;
    border: none;
    background-color: #eee;
    cursor: pointer;
  }
  
  .filters button:hover {
    background-color: #ccc;
  }
  
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1em;
  }
  
  .grid img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  
  /* Contact */
  .contact {
    padding: 4em 2em;
    background-image: url("images/landscape/IMG_5702.jpg");
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }

  .contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 0;
  }

  .contact p {
    color: white;
  }
  
  .contact h1 {
    color: white;
  }
  
  form {
    width: 100%; /* Make the form fill the .contact-form container */
    display: flex;
    flex-direction: column;
    gap: 1em;
  }
  
  label {
    font-weight: bold;
  }
  
  input, textarea {
    padding: 0.5em;
    border: 1px solid #ccc;
    width: 100%;
  }
  
  button {
    padding: 0.5em;
    background-color: #555;
    color: white;
    border: none;
    cursor: pointer;
  }
  
  button:hover {
    background-color: #777;
  }
  
  /* Contact Form Styling */
  .contact-form {
    width: 80%;
    max-width: 600px;
    margin-top: 50px;
    margin-left: 20px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.8);
  }

  .contact-form h1, .contact-form p {
    color: black;
    text-align: center; /* Center the text */
  }

  .contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.3); /* Opaque white */
    backdrop-filter: blur(5px); /* Optional blur effect */
    z-index: 0;
  }

  .contact > * {
    position: relative;
    z-index: 1;
  }

  .form_wrapper {
    position: relative;
    z-index: 1;
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    color: #FFFFFF;
    backdrop-filter: blur(5px);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  }
  
  .form_heading {
    text-align: center;
    padding: 2em 2em 1.5em;
  }
  
  .form_heading h1 {
    font-size: 2.2em;
    margin-bottom: 0.5em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }
  
  .form_heading p {
    font-size: 1.1em;
    opacity: 0.9;
  }
  
  .form_body {
    background-color: rgba(255,255,255,0.9);
    border-radius: 0 0 15px 15px;
    padding: 2em;
  }
  
  .form_row {
    margin-bottom: 1.5em;
  }

  .form_row:last-child {
    margin-bottom: 0;
  }
  
  .form_row input,
  .form_row textarea {
    width: 100%;
    padding: 1em;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1em;
    transition: all 0.3s ease;
  }
  
  .form_row input:focus,
  .form_row textarea:focus {
    outline: none;
    border-color: #555;
    box-shadow: 0 0 0 2px rgba(85, 85, 85, 0.2);
  }
  
  .form_row textarea {
    min-height: 150px;
    resize: vertical;
  }

  .submit-button {
    width: 100%;
    padding: 1em;
    background-color: #555;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 0.5em;
  }
  
  .submit-button:hover {
    background-color: #333;
  }

  /* Target the form elements container (you might need to adjust the selector if your form is structured differently) */
  .contact > div > form { /* Assuming your form is within a div inside .contact */
    max-width: 500px; /* Adjust this value to control the form's width */
    margin: 0 auto; /* Center the form itself if needed, and add some margin */
  }
  
  /* Footer */
  footer {
    text-align: center;
    padding: 0;
    background-color: #222;
    color: white;
    margin-top: 0; /* Remove auto margin */
    background-color: #333; /* Example background color */
    color: white;
    text-align: center;
    padding: 10px;
    position: relative;
    z-index: 3; /* Ensure footer stays on top */
  }
  
  .social-links a {
    color: white;
    margin: 0 0.5em;
  }
  
  /* Responsive Design */
  @media (max-width: 768px) {
    header {
      flex-direction: column;
    }
  
    nav ul {
      flex-direction: column;
      text-align: center;
    }
  
    nav li {
      margin: 0.5em 0;
    }
  
    .preview {
      flex-direction: column;
      align-items: center;
    }
  
    .grid {
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    /* Fix for mobile jumping */
    .hero {
      height: 60vh;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 0;
    }
    
    .intro {
      margin-top: 60vh; /* Reduce from 60vh to remove dead space */
      position: relative;
      z-index: 1;
      background-color: white;
      border-radius: 15px 15px 0 0; /* Optional: slightly reduced radius */
      padding-top: 1.5em; /* Reduced padding */
    }
    
    .hero-text-below-header {
      top: 60px;
      padding: 0.5em 0; /* Reduced padding */
    }
    
    main {
      padding-top: 0;
      position: relative;
      z-index: 1;
    }

    /* Fixed mobile menu updates */
    .mobile-menu {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
    }
    
    body {
      padding-top: 50px;
    }
    
    .hero-text-below-header {
      top: 60px;
    }

    .contact {
      padding: 3em 1.5em;
    }
    
    .form_wrapper {
      max-width: 100%;
    }
    
    .form_heading {
      padding: 1.5em 1.5em 1em;
    }
    
    .form_heading h1 {
      font-size: 1.8em;
    }
    
    .form_body {
      padding: 1.5em;
    }
    
    .form_row {
      margin-bottom: 1.2em;
    }
    
    .form_row input,
    .form_row textarea {
      padding: 0.8em;
    }
    
    .form_row textarea {
      min-height: 120px;
    }
  }

@media (max-width: 768px) {
  /* Fix for mobile jumping and momentum scrolling */
  .mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2000;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
    background-color: #333;
  }

  .hero {
    position: fixed;
    top: 50px;
    left: 0;
    width: 100%;
    height: 55vh;
    z-index: 0;
  }

  .hero-text-below-header {
    position: absolute; /* Keep as absolute */
    top: 10px; /* Adjust position relative to hero */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 1;
    padding: 0.5em 0;
    color: white;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
    pointer-events: none; /* Prevent text from intercepting clicks */
  }

  .intro {
    margin-top: calc(55vh + 50px);
    position: relative;
    z-index: 2;
    background-color: white;
    border-radius: 15px 15px 0 0;
    padding-top: 1em;
  }

  /* Remove any duplicate hero-text-below-header rules */
  /* Ensure mobile nav stays on top */
  .mobile-nav {
    position: fixed;
    top: 50px;
    left: 0;
    width: 100%;
    z-index: 1900;
  }
}

/* Mobile Menu Styles */
.mobile-menu {
  display: none; /* Hidden by default on larger screens */
  position: relative; /* Add this */
  z-index: 1000; /* Add high z-index to ensure it's above everything */
}

@media (max-width: 768px) {
  .mobile-menu {
    display: block;
    background-color: #333;
    color: white;
    padding: 10px;
    text-align: center;
    position: absolute; /* Change to absolute */
    top: 0; /* Add this */
    left: 0; /* Add this */
    width: 100%; /* Add this */
    z-index: 1000; /* Keep high z-index */
  }

  .menu-toggle {
    background: none;
    border: none;
    color: white;
    font-size: 1.5em;
    cursor: pointer;
    padding: 5px;
  }

  .mobile-nav {
    display: none; /* Initially hidden */
    background-color: #222;
    padding: 10px;
    position: absolute; /* Add this */
    width: 100%; /* Add this */
    left: 0; /* Add this */
    top: 100%; /* Add this to position right below the toggle button */
    z-index: 1000; /* Add this */
  }

  .mobile-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .mobile-nav li {
    margin-bottom: 10px;
  }

  .mobile-nav a {
    color: white;
    text-decoration: none;
  }

  .mobile-nav.open {
    display: block; /* Show when the 'open' class is added */
  }
}

.photographers-preview {
  margin: 4em 0;
  text-align: center;
}

.photographers-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(min(400px, 30vw), 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  max-width: min(1200px, 90vw);
  margin: 0 auto;
}

.photographer {
  width: 100%;
  max-width: min(400px, 30vw); /* Match category-content sizing */
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin: auto;
}

.photographer img {
  width: 100%;
  height: 100%; /* Change to 100% to fill the container */
  object-fit: cover;
  transition: transform 0.3s ease; /* Add smooth transition */
}

.photographer img:hover {
  transform: scale(1.05); /* Same scale effect as category images */
}

/* Mobile responsiveness */
@media screen and (max-width: 768px) {
  .photographers-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .photographer {
    max-width: min(320px, 90vw);
  }
  
  .photographer img {
    height: 210px;
  }
}

/* Existing header styles - ensure they are hidden on mobile */
@media (max-width: 768px) {
  header nav {
    display: none;
  }

  .hero img {
    object-position: 22% center;
  }
}

/* Update the mobile menu styles */
@media (max-width: 768px) {
  /* Fix for mobile jumping and momentum scrolling */
  .mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2000; /* Increased z-index */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
    background-color: #333;
  }

  /* Adjust other elements for fixed header */
  body {
    padding-top: 50px;
    -webkit-overflow-scrolling: touch;
  }

  .hero {
    position: fixed;
    top: 50px; /* Adjust to account for mobile menu height */
    left: 0;
    width: 100%;
    height: 55vh; /* Reduced from 60vh to minimize space */
    z-index: 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
  }

  .intro {
    margin-top: 55vh; /* Match the hero height exactly */
    position: relative;
    z-index: 1;
    background-color: white;
    border-radius: 15px 15px 0 0;
    padding-top: 1em; /* Reduced padding */
  }

  .hero-text-below-header {
    position: fixed;
    top: 60px; /* Reduced from 110px */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 1500; /* Increased z-index to appear above hero but below menu */
    padding: 0.5em 0;
    color: white;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
  }

  /* Ensure the mobile nav menu stays on top */
  .mobile-nav {
    position: fixed;
    top: 50px; /* Height of mobile menu */
    left: 0;
    width: 100%;
    z-index: 1900; /* Just below mobile-menu but above everything else */
  }
}

@media (max-width: 768px) {
  /* Make the hero-text-below-header stay with the hero image */
  .hero-text-below-header {
    position: fixed; /* Keep as fixed to stay with the hero */
    top: 75px; /* Position it below the mobile menu */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 1; /* Make sure it's above the hero image but below other elements */
    padding: 0.5em 0;
    color: white;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
    pointer-events: none; /* Prevent text from intercepting clicks */
  }

  /* Keep the hero fixed but adjust its position */
  .hero {
    position: fixed;
    top: 50px; /* Position immediately below the mobile menu */
    left: 0;
    width: 100%;
    height: 55vh;
    z-index: 0;
  }

  /* Ensure the intro section starts after the fixed hero */
  .intro {
    margin-top: calc(55vh + 50px); /* Account for hero height + mobile menu height */
    position: relative;
    z-index: 2; /* Above both hero and hero text */
    background-color: white;
    border-radius: 15px 15px 0 0;
  }
}

@media (max-width: 768px) {
  /* Make the hero section and its text behave as a unit */
  .hero {
    position: relative;
    height: 65vh; /* Increased from 55vh to show more of the hero image */
    margin-top: -65px; /* Reduced from 50px to bring hero image up */
    z-index: 0;
    overflow: visible;
  }

  /* Position the text within the hero section */
  .hero-text-below-header {
    position: absolute;
    top: 45%; /* Move text lower, changed from 20px to percentage-based position */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 10;
    padding: 0.5em 0;
    color: white;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
  }

  /* Fix the mobile menu at the top */
  .mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
  }

  /* Adjust the intro section to flow after the hero */
  .intro {
    margin-top: 0;
    position: relative;
    z-index: 1;
    background-color: white;
    border-radius: 15px 15px 0 0;
  }

  body {
    padding-top: 50px; /* Keep this to account for the fixed mobile menu */
  }
}

/* Update font sizes to be more responsive */
h1 {
  font-size: clamp(2rem, 4vw, 3.5rem);
}

h2 {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
}

h3 {
  font-size: clamp(1.2rem, 2vw, 2rem);
}

p {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
}

/* Update media queries for larger screens */
@media screen and (min-width: 1440px) {
  .category-content,
  .photographer {
    max-width: min(500px, 35vw);
  }

  .photographers-grid {
    grid-template-columns: repeat(2, minmax(min(500px, 35vw), 1fr));
  }

  .intro {
    padding: clamp(2em, 4vw, 4em);
  }
}

/* Update the preview section for mobile */
@media (max-width: 768px) {
  .preview {
    flex-direction: column;
    gap: 2rem;
    width: 90vw;
    margin: 2rem auto;
  }

  .category {
    width: 100%;
    max-width: min(320px, 90vw);
    margin: 0 auto;
  }

  .category-content {
    width: 100%;
    max-width: min(320px, 90vw);
    aspect-ratio: 4 / 3;
    margin: 0 auto;
  }

  /* Make consistent with photographer sections */
  .category-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Update spacing between sections */
  .photographers-preview {
    margin: 2em 0;
  }

  .preview {
    margin-top: 3em;
  }

  /* Make category headings consistent */
  .category h3 {
    margin-bottom: 1em;
    font-size: clamp(1.2rem, 2vw, 2rem);
  }

  /* Adjust button spacing */
  .category .btn {
    margin-top: 1em;
    display: inline-block;
  }

  /* Make all preview sections the same width */
  .photographers-grid,
  .preview,
  .category {
    max-width: min(320px, 90vw);
    margin-left: auto;
    margin-right: auto;
  }
}