/* Mobile View: max-width 480px */
@media only screen and (max-width: 500px) {

  html,
  body {
    scroll-snap-type: none;
    /* disable snapping on mobile */
    overflow-y: auto;
    /* allow free vertical scroll */
  }

  .section {
    min-height: 100vh;
    /* at least one screen tall */
    overflow: visible;
    /* allow content to expand beyond */
  }


  .snap-section {
    scroll-snap-align: none;
    /* remove snap alignment */
    scroll-snap-stop: normal;
    /* default behavior */
    min-height: auto;
    /* let sections size naturally */
  }


  #unmuteBtn {
  position: absolute;
  left: clamp(10px, 2vw, 50px);   /* min 10px, scales with viewport, max 50px */

  /* Responsive bottom position */
  bottom: clamp(10px, 2vh, 50px);
  width: clamp(10px, 6vw, 80px); /* min 40px, scales with viewport, max 80px */
  height: auto;
  cursor: pointer;
}


  #home {
    padding-top: 4rem; /* adjust the value as needed */
  }
  /* Video Container */
  .video-container {
    position: relative;
    width: 100%;
    height: auto;   /* don’t force full viewport height */
    overflow: hidden;
  }

  .video-container video {
    width: 100%;
    height: auto;   /* keep aspect ratio */
    display: block; /* remove gaps */
    object-fit: cover;
  }

  /* Remove bottom white space on mobile */
  .bottom-space {
    display: none;
  }

  .permanent-logo {
    top: 0%;
    /* move it further down */
    width: clamp(120px, 35vw, 400px);
    /* optional: scale bigger */
  }

  /* Hamburger menu for mobile */
  .hamburger-menu {
    top: clamp(10px, 2vw, 25px);
    left: clamp(10px, 2vw, 25px);
    width: clamp(25px, 10vw, 35px);
    height: clamp(18px, 8vw, 25px);
  }

  .hamburger-menu .bar {
    height: clamp(3px, 1vw, 4px);
  }

  /* Dropdown menu for mobile */
  .dropdown-menu {
    top: clamp(40px, 5vh, 60px);
    left: clamp(10px, 1vw, 20px);
    width: clamp(140px, 70%, 180px);
    border-radius: clamp(6px, 3vw, 12px);
    padding: clamp(0.25rem, 2vw, 0.75rem) 0;
  }

  .dropdown-menu a {
    font-size: clamp(0.8rem, 4vw, 5rem);
    padding: clamp(6px, 2vw, 12px) clamp(8px, 4vw, 16px);
    margin: clamp(2px, 1vw, 4px) clamp(2px, 1vw, 8px);
    border-radius: clamp(3px, 1vw, 6px);
  }

  .dropdown-menu a:hover {
    transform: translateX(clamp(1px, 2vw, 3px));
  }

  /* Drag Button */
  #dragBtn {
    padding: clamp(6px, 10px, 14px) clamp(18px, 25px, 32px);
    font-size: clamp(12px, 14px, 16px);
  }

  /* Exit Button */
  #exitBtn {
    padding: clamp(4px, 6px, 10px) clamp(12px, 18px, 24px);
    font-size: clamp(10px, 12px, 14px);
  }

  .gold-frame-pic-mobile {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    top: 8%; /* push image down */
  }

  
  /* More inspiration section */
  .more-inspiration-section {
    padding: 0 clamp(2vw, 3vw, 4vw);
    height: auto;
  }
  

  .inspiration-text-section { /* remove snap-section fixed height */
    padding: 20px 5%;         /* small top padding */
  }

  /* Heading */
  .inspiration-text-section h1 {
    position: relative !important; /* remove absolute */
    top: auto !important;          /* cancel previous top clamp */
    left: auto !important;
    transform: none !important;
    text-align: center;
    width: 90%;
    font-size: clamp(1rem, 5vw, 3rem);
    line-height: 1.3;
    margin: 0 auto 10px auto;      /* move closer to top */
  }

  /* Image */
  .inspiration-text-section img {
    display: block;
    width: 90%;
    height: auto;
    margin: 35px auto 35px auto;    /* spacing above/below */
  }

  /* Paragraphs */
 /* Paragraphs */
.inspiration-text-section p,
.inspiration-text-section .inspiration-p2 {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: 180%;           /* double the container width */
  margin-left: -40%;      /* shift left by half the extra width */
  margin-right: -50%;     /* optional: balance right side */
  margin-top: 15px;   /* space above */
  margin-bottom: 5px; /* space below */
  text-align: center;
  font-size: clamp(1rem, 4vw, 1.5rem);
  line-height: 1.6;
}


  .mobile-only-section {
    display: flex;
    height: 100vh;
    /* full viewport height */
    justify-content: center;
    /* center content horizontally */
    align-items: center;
    /* center content vertically */
    flex-direction: column;
    background-color: #a4abac;
    /* optional styling */
    text-align: center;
    padding: 1rem;
  }

  .mobile-only-section h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }

  .mobile-only-section p {
    font-size: 1rem;
    width: 80%;
    line-height: 1.5;
    margin: 0 auto;
  }

  .more-inspiration-wrapper {
    flex-direction: column;
    gap: clamp(1px, 1vw, 40px);
    /* smaller min gap on mobile */
    transform: translateX(0);
  }

  .more-inspiration-wrapper img {
    width: clamp(100px, 90vw, 800px);
    /* smaller max width for small screens */
    height: auto;
    /* maintain aspect ratio */
    display: block;
    margin: 0 auto;
    /* center image */
  }

  .more-inspiration-text {
    display: none;
  }

  .more-inspiration-text-mobile {
    display: flex;
    justify-content: center;  /* center horizontally */
    align-items: center;      /* center vertically */
    flex-direction: column;   /* stack heading, paragraph, etc. vertically */
    height: 100vh;            /* full viewport height */
    text-align: center;       /* optional: center text */
    padding: 1rem;            /* optional padding */
    margin-top: -7rem;
  }
  

  /* Paragraph always 50% of text container */
.more-inspiration-text-mobile p {
  width: 80%;
  font-size: clamp(0.8rem, 4.3vw, 12.5rem);
  line-height: 1.8rem;
  font-weight: 300;
  color: #000;
  margin: 0;
  padding: clamp(1rem, 5vw, 4rem) 0; /* responsive top & bottom padding */
  box-sizing: border-box;
}


/* h2 styling: grows proportionally */
.more-inspiration-text-mobile h2 {
  font-family: 'inspiration', serif;
  text-transform: uppercase;
  font-weight: 400;
  color: #bfc8ca;
  margin: 0;
  letter-spacing: clamp(0.1rem, 0.8vw, 2rem);
  font-size: clamp(0.4rem, 15vw, 18rem);
  padding-bottom: 5%;
}

/* h3 styling: grows proportionally */
.more-inspiration-text-mobile h3 {
  font-family: 'inspiration', serif;
  font-weight: 400;
  margin: 0;
  letter-spacing: clamp(0.1rem, 0.8vw, 2rem);
  font-size: clamp(0.4rem, 15vw, 18rem);
  text-transform: uppercase;
  color: #bfc8ca;
  padding-top: 5%;
}

  #penrith {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #f8f8f8;
  }

  #penrith img {
    position: absolute;
    /* change to absolute for precise dragging */
    top: 0;
    left: 0;
    cursor: grab;
    user-select: none;
    touch-action: none;
    /* allow full control */
    height: 100%;
    width: auto;
  }

  .penrith-image-section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow-y: auto;   /* allow vertical scroll always */
    overflow-x: hidden; /* prevent horizontal scroll from page */
  }
  
  .penrith-image {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: 100%;
    user-select: none;
    cursor: default;
    touch-action: pan-y; /* allow vertical scroll always */
  }

  .centered-image-mobile {
    width: 90%;      /* make it fill the container */
    max-width: none;  /* remove any upper size limits */
    height: auto;     /* keep correct aspect ratio */
  }
  
  
  
  /* Drag button in the center (circular, grey theme) */
  .drag-button {
    font-family: 'inspiration';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(60px, 20vw, 120px);
    height: clamp(60px, 20vw, 120px);
    font-size: clamp(0.8rem, 4.3vw, 1.2rem);
    z-index: 10;
    cursor: pointer;

    /* Grey theme */
    background: rgba(100, 100, 100, 0.8);
    /* medium grey with transparency */
    color: #f0f0f0;
    /* light grey text */
    font-weight: 600;
    font-family: 'inspiration';
    border: none;
    border-radius: 50%;
    /* circular */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.3s ease;
  }

  .drag-button:hover {
    background: rgba(120, 120, 120, 0.9);
    transform: translate(-50%, -50%) scale(1.05);
  }

  /* Exit button top-right (grey theme) */
  .exit-button {
    font-family: 'inspiration';
    position: absolute;
    top: clamp(10px, 10vw, 120px);
    right: clamp(10px, 1vw, 120px);
    padding: clamp(0.5rem, 1vw, 10rem);
    font-size: clamp(0.7rem, 4.3vw, 1.2rem);
    z-index: 10;
    display: none;
    /* initially hidden */
    cursor: pointer;

    background: rgba(100, 100, 100, 0.8);
    color: #f0f0f0;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    font-weight: 500;
    transition: all 0.3s ease;
  }

  .exit-button:hover {
    background: rgba(120, 120, 120, 0.9);
    transform: scale(1.05);
  }


  #penrith-text h1 {
    font-size: clamp(1.5rem, 6vw, 12.5rem);
    position: absolute;
    /* needed to use top/bottom/left/right */
    left: 50%;
    /* center horizontally */
    bottom: clamp(20vh, 73vh, 140vh);
    transform: translateX(-50%);
    /* adjust for horizontal center */
    line-height: 1.8;
    width: 80%;
    text-align: center;
    /* center text within the container */
  }


  .penrith-description {
    font-family: 'inspiration', serif;
    position: absolute;
    top: clamp(10px, 32vh, 2000px);
    left: 50%;
    transform: translateX(-50%);
    width: clamp(30px, 70%, 3000px);
    font-size: clamp(0.8rem, 4.3vw, 12.5rem);
  line-height: 1.8rem;
    text-align: center;
    font-weight: 300;
    margin: 0;
    color: #ffffff;
  }

  /* Paragraph description */
  .penrith-description2 {
    font-family: 'inspiration', serif;
    position: absolute;
    top: clamp(10px, 50vh, 2000px);
    left: 50%;
    transform: translateX(-50%);
    width: clamp(30px, 70%, 3000px);
    font-size: clamp(0.8rem, 4.3vw, 12.5rem);
  line-height: 1.8rem;
    text-align: center;
    font-weight: 300;
    margin: 0;
    color: #ffffff;
  }

  /* Image below description2 */
  .numberlabelpic-mobile {
    display: block;
    margin-top: clamp(200px, 120vw, 850px); /* scales between 200px and 450px */
    position: relative;
    left: clamp(10px, 10vw, 140px);          /* scales from 10px to 40px */
    width: clamp(60%, 80%, 90%);           /* scales between 60% and 90% of container */
    height: auto;                           /* maintain aspect ratio */
  }
  


  .more-penrith-section {
    display: flex;
    flex-direction: column;
    min-height: auto;
  }

  .penrith-half {
    width: 100%;
  }

  /* Use flex-grow to make left taller than right */
  .penrith-half.left {
    flex: 3;
    /* takes 2 parts */
  }

  .penrith-half.left img,
  .penrith-half.right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* fill container nicely */
  }

  .penrith-half.right {
    position: relative;
    /* needed for absolutely positioned text inside */
    flex: 1;
    /* keeps it shorter than left */
  }

  .penrith-half.right .text-content {
    position: absolute;
    /* center vertically and horizontally */
    width: clamp(80%, 70%, 95%);
    font-size: clamp(1rem, 4.3vw, 1.5rem);
    text-align: center;
    /* center text lines */
  }

  .gallery-image-section {
    position: relative;
    width: 100%;
    height: 100vh;
    /* full viewport height */
    overflow: hidden;
  }

  .gallery-image-section .full-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 73% center;
    /* 100% = fully right, 50% = center, 80% = slightly left of full right */
  }

  .gallery-text-section {
    min-height: 120vh; /* 120% of viewport height */
  }
  
  

  .gallery-text-content {
    padding-bottom: clamp(1rem, 20vw, 13.5rem);
  }

  .gallery-title {
    font-family: 'rising', cursive;
    font-size: clamp(1.2rem, 6vw, 5rem);
    letter-spacing: 0.1rem;
    word-spacing: 0.2rem;
    font-weight: 300;
    margin-bottom: 6rem;
    width: clamp(10px, 70%, 780px);
    text-align: center;
    position: relative;
    top: 7%;
    /* center the title */
    color: #000;
    line-height: 1.8;
  }

  .gallery-text-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

  }

  /* Break the left column into its children */
  .gallery-text-left {
    display: contents;
  }

  /* Now we can order everything */
  .gallery-text-block-two {
    order: 1;
    margin-top: 0rem;
    margin-bottom: 1rem;
    width: clamp(80px, 75%, 780px);
    font-size: clamp(0.8rem, 4.3vw, 12.5rem);
  line-height: 1.8rem;
    text-align: center;
  }

  .gallery-text-right {
    order: 2;
    margin: 1rem 0;
    width: 90%;
  }

  .gallery-text-block-three {
    order: 3;
    margin: 2rem 0 0 0;
    font-size: clamp(0.8rem, 3.3vw, 12.5rem);
    letter-spacing: clamp(0.05rem, 0.5vw, 1.28rem);
    word-spacing: clamp(0.1rem, 0.4vw, 1.5rem);
  }

  /* carousel */
  /* Make carousel track vertical for better centering */
  /* Mobile carousel */
.more-gallery-section-mobile {
  display: none; /* hidden by default */
}

@media screen and (max-width: 768px) {
  /* Hide desktop carousel on mobile */
  .more-gallery-section {
      display: none;
  }

  /* Show mobile carousel on mobile */
  .more-gallery-section-mobile {
      display: block;
  }
}

/* Mobile carousel container */
.carousel-container-mobile {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Track for mobile carousel */
.carousel-track-mobile {
  display: flex;
  transition: transform 0.5s ease-in-out;
  gap: 1rem; /* spacing between slides */
  align-items: center;
}

/* Images for mobile carousel */
.carousel-image-mobile {
  max-width: 70%;   /* slightly bigger for mobile */
  max-height: 60vh; /* keep vertical space */
  margin: 0 auto;   /* center horizontally */
  flex-shrink: 0;
  object-fit: contain;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: transform 0.3s ease;
}

.carousel-image-mobile.current {
  transform: scale(1.3);
  display: block;
  margin-left: auto;
  margin-right: auto; /* ensures the current image is centered */
}

/* Carousel buttons mobile - smaller */
.carousel-button-mobile {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem; /* smaller buttons */
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  cursor: pointer;
  z-index: 20;
  padding: 0.3rem 0.6rem; /* smaller padding */
  user-select: none;
  color: #333;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s ease;
}

.carousel-button-mobile:hover {
  background-color: rgba(255, 255, 255, 1);
}

.carousel-button-mobile.left {
  left: 1%;
}

.carousel-button-mobile.right {
  right: 1%;
}


  .virtualtour-section {
    padding-top: 6rem;      /* space above title */
  padding-bottom: 6rem;   /* space below images */
  min-height: 130vh;  
    display: flex;
    justify-content: center; /* horizontal centering */
    align-items: center;     /* vertical centering */
    height: 100vh;
    text-align: center;      /* optional: center text inside */
  }
  
  .vr-img-1 {
    content: url('images/Penrith-VR\ 2\ Bdrm\ \(M\)\ 19\ Sept.jpg'); /* mobile version */
  }
  .vr-img-2 {
    content: url('images/Penrith-VR\ 3\ Bdrm\ \(M\)\ 19\ Sept.jpg');
  }
  .vr-img-3 {
    content: url('images/Penrith-VR\ 4\ Bdrm\ \(M\)\ 19\ Sept.jpg');
  }
  
  /* virtual tour section */
  .virtualtour-title {
    font-family: 'rising', cursive;
    font-size: clamp(0.1rem, 6vw, 3rem);
    margin: 1rem auto 2.7rem auto; /* top 1rem, bottom 2.7rem, horizontal auto */
    color: #000;
    width: 60%;
    text-align: center; /* center the text inside the container */
}


  .virtualtour-img {
    width: 110%;
    height: auto;
    margin-bottom: 0.5rem;
    margin-top: 2rem;
    /* gap between image and label */
  }

  .virtualtour-images {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    /* space between each image */
    flex-wrap: wrap;
    /* responsive wrap on small screens */
  }

  .virtualtour-label {
    font-family: 'inspiration', serif;
    /* or your preferred font */
    font-size: clamp(0.1rem, 3.3vw, 2rem);
    letter-spacing: 0.1rem;
    font-weight: 500;
    color: #000;
  }


  .location-slide1 {
    position: relative;
    width: 100%;
    min-height: 100vh;
    /* full viewport height */
    padding: 2rem;
  }

  /* Location Slide 1 - Heading 1 */
  .location-slide1 h1 {
    position: absolute;
    top: 55%;
    left: 40%;
    /* horizontally centered */
    transform: translateX(-50%);
    /* adjust for exact center */
    font-size: clamp(1.5rem, 10vw, 6.5rem);
    line-height: 1.3;
    text-align: center;
    letter-spacing: clamp(1rem, 8.5vw, 4rem);

  }

  /* Location Slide 1 - Heading 2 */
  .location-slide1 h2 {
    position: absolute;
    top: 65%;
    /* responsive vertical position */
    left: 55%;
    /* horizontally centered */
    transform: translateX(-50%);
    font-size: clamp(1.2rem, 10vw, 6.5rem);
    line-height: 1.3;
    text-align: center;
    letter-spacing: clamp(1rem, 8.5vw, 4rem);

  }

  /* Location Slide 1 - Paragraph */
  .location-slide1 p {
    position: absolute;
    top: clamp(15%, 25vh, 50%);
    /* responsive vertical position */
    left: 50%;
    /* horizontally centered */
    transform: translateX(-50%);
    font-size: clamp(0.8rem, 4.3vw, 12.5rem);
  line-height: 1.8rem;
    text-align: center;
    width: clamp(60%, 80%, 80%);
    /* optional, limits text width */
  }


  .location-slide5 {
    min-height: 130vh; 
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding: clamp(0.5rem, 1rem, 2rem);
  }

  /* timeless journey section */
  /* Stack everything vertically */
  .side-image {
    display: none;
  }

  .location-row {
    flex-direction: column; /* ensure vertical stacking */
    height: auto;           /* let content define height */
    gap: 1rem;
  }

  .location-bottom-image-mobile {
    display: block; /* ensure mobile bottom image shows */
  }

  .location-bottom-image-desktop {
    display: none; /* hide desktop bottom image */
  }
  .location-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* horizontal centering */
    justify-content: center;
    /* vertical centering */
    gap: 1rem;
    height: 100vh;
    /* take full viewport height for vertical centering */
    width: 100%;
  }

  .location-text {
    display: flex;
    flex-direction: column; /* stack vertically */
    align-items: center;    /* center horizontally */
    justify-content: flex-start; /* move up */
    max-width: 90%;
    margin: 0 auto;         /* center the block */
    position: relative;     /* normal flow */
    right: 0;               /* remove right offset */
    text-align: center;
    gap: clamp(10px, 2vw, 20px); /* spacing between h1, h2, etc. */
  }

  .location-text h1,
  .location-text h2 {
    position: static;       /* remove any absolute offsets */
    margin: 0;              /* remove previous margins if needed */
    font-size: clamp(1.2rem, 6vw, 5rem);
  }

  .location-bottom-image-mobile {
    width: 90%;             /* adjust width */
    display: block;         /* stack below text */
    margin: 0 auto;         /* center image */
    position: relative;     /* normal flow */
    justify-content: center; /* ignored, can remove */
  }

  .bottom-image-mobile {
    width: 90%;
    max-width: 600px;
    display: block;
    margin: 0;
    /* remove default margins */
    position: relative;
    /* enable moving */
    bottom: 35%;
    /* move image up */
    left: 0%;
    /* move image to the right */
  }

  .location5-top-left,
  .location5-top-right-text,
  .location5-bottom-right {
    margin: clamp(0.5rem, 1rem, 2rem) auto;
    text-align: center;
  }

  .side-image,
  .bottom-image,
  .location5-top-left img,
  .location5-bottom-right img,
  .location-slide6-overlay {
    width: clamp(80%, 90%, 95%);
    height: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  /* map */

  .map-top-space {
    display: none;
  }

  .map-scroll-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    /* full viewport height */
    overflow: hidden;
    cursor: grab;
  }

  .draggable-map {
    position: absolute;
    /* center horizontally */
    height: 100%;
    /* fills the wrapper’s full height */
    width: auto;
    /* maintain aspect ratio */
    transform: translateX(-10%);
    /* horizontal center */
    user-select: none;
    -webkit-user-drag: none;
    z-index: 1;
  }


  .location-slide4-container {
    position: relative;
    height: 100vh;
    /* full viewport height */
    width: 100%;
    text-align: center;
  }

  .location-slide4-container h1 {
    position: absolute;
    top: 41.5%;
    /* lower on screen */
    left: 49%;
    transform: translateX(-50%);
    font-family: 'inspiration', serif;
    font-size: clamp(1rem, 5vw, 10rem);
    color: #000000;
    line-height: 1.8;
    letter-spacing: clamp(0.2rem, 2vw, 1rem);
    font-weight: 100;
    width: 50%;
    margin: 0;
  }

  .location-slide4-container h2 {
    position: absolute;
    bottom: 41.5%;
    /* higher on screen */
    left: 51%;
    transform: translateX(-50%);
    font-family: 'inspiration', serif;
    font-size: clamp(1rem, 5vw, 10rem);
    color: #000000;
    line-height: 1.8;
    letter-spacing: clamp(0.2rem, 2vw, 1rem);
    font-weight: 100;
    width: 60%;
    margin: 0;
  }
/* Hide desktop images on mobile */
  .desktop-only {
    display: none;
  }

  .mobile-only {
    display: flex;
    flex-direction: column;
    align-items: center;       /* center images horizontally */
    justify-content: center;   /* optional: center vertically */
    gap: clamp(1rem, 8vw, 4rem); /* spacing between images */
    width: 100%;
    margin: 0 auto;
    padding: 0;
  }

  #location5-mobile {
    min-height: 140vh; /* or whatever height you want */
    display: flex;
    flex-direction: column; /* stack content vertically */
    justify-content: center; /* vertical centering */
    align-items: center;     /* horizontal centering */
    padding: 2rem 1rem;     /* optional spacing */
    box-sizing: border-box;
    text-align: center;      /* center text inside */
    padding-top: 15vh; 
  }
  

  
  .location5-images-row-mobile {
    display: flex;
    flex-direction: column; /* stack images vertically */
    align-items: center;
    gap: 1.5rem;           /* spacing between images */
    box-sizing: border-box;
    gap: 1rem;           /* space between images */
}

  .location5-images-row-mobile img {
    width: clamp(150px, 80%, 400px); /* responsive width */
    height: auto;
    display: block;
    margin: 0 auto; /* center horizontally */
    margin-bottom: 2rem;
  }

  /* Text adjustments for mobile */
  .location5-main-text-mobile {
    width: 70% !important;       /* shrink text box */
    max-width: 70% !important;
    font-size: clamp(0.8rem, 4vw, 1.2rem);
    line-height: 1.6rem;
    text-align: center;
    margin: 1rem auto;           /* center horizontally with spacing */
    padding-bottom: clamp(0.5rem, 50vw, 20rem);
    color: #ffffff;
  }

  /* bird */
  /* Hide desktop background */
  .location-slide6-background {
    display: none;
  }
  /* Show mobile background */
  .location-slide6-background-mobile {
    width: 100vw;        /* fill full screen width */
        height: 100vh;       /* fill full screen height */
        object-fit: cover;   /* crop and scale to cover area */
        object-position: center; /* center the image */
        display: block;  
  }

  /* Hide overlay on mobile */
  .location-slide6-overlay {
    display: none;
  }
/* =======================
   MOBILE ONLY CONTAINERS
======================= */


.mobile-only1 {
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertically center within parent */
  align-items: center;     /* horizontally center */
  gap: 2rem;          
  box-sizing: border-box;
  padding-top: clamp(5rem, 50vw, 30rem); 
  
}

.mobile-only2 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* start content at top */
  align-items: center;         /* horizontally center */
  gap: 0.5rem;                 /* slightly bigger spacing between blocks */
  padding-top: 1rem;           /* extra space at top */
  padding-bottom: 1rem;        /* extra space at bottom */
  box-sizing: border-box;
}

/* =======================
   DEVELOPER GRID SPECIFIC
======================= */
#developer2 {
  background-color: #a1a5a5;
}


#developers-mobile {
  min-height: 250vh;       /* makes the section 2x the viewport height */
  display: flex;
  flex-direction: column;  /* stack all content vertically */
  justify-content: flex-start; /* start from top, or use center to center vertically */
  align-items: center;     /* horizontally center content */
  padding-top: 0vh;        /* optional: move content down a bit */
  padding-bottom: 30vh;    /* optional: extra scroll space at the bottom */
  box-sizing: border-box;
  text-align: center;
}



.developer-grid.mobile-only1 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  margin-top: 3rem; 
}

.developer-grid.mobile-only2 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 3rem; /* extra spacing between blocks */
}

/* =======================
   DEVELOPER TEXT
======================= */
.developer-text {
    font-size: clamp(0.7rem, 3.5vw, 1rem);        /* scales font */
    margin-left: clamp(1px, 5vw, 50px);      /* horizontal shift */
    margin-top: clamp(-50px, -50vw, 30px);        /* vertical shift */
    margin-bottom: clamp(10px, 10vw, 220px);     /* spacing below */
    text-align: left;                           /* keep left-aligned */
    letter-spacing: clamp(0.1rem, 1vw, 0.3rem);
  }

/* =======================
   DEVELOPER BLOCK
======================= */
.developer-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem; /* space between logo and description */
  max-width: 80%;
  text-align: center;
}

/* Logo sizing */
.developer-logo-block img {
  max-width: 180px;
  width: 100%;
  height: auto;
}

/* Developer description */
.developer-description-block p {
  font-size: clamp(0.9rem, 4vw, 1.2rem);
  line-height: 1.8rem;
  text-align: center;
  padding-bottom: 4rem;
}



.enquiry-section.mobile-only3 {
  min-height: 120vh; /* 1.5x the viewport height *
  padding-top: clamp(5rem, 10vw, 15rem);  /* responsive top spacing */
  padding-bottom: clamp(5rem, 10vw, 15rem); /* responsive bottom spacing */
  display: flex;
  flex-direction: column;
  align-items: center; /* center horizontally */
  gap: 2rem;           /* spacing between form and image */
  box-sizing: border-box;
}

.enquiry-form {
    order: 4;
    width: 90%;      /* increase width on mobile */
  max-width: 500px; /* optional: limit max width */
  margin: 0 auto;
    /* adjust smaller if you want narrower form */
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    /* centers the form horizontally */
    margin-top: clamp(1rem, 4.3vw, 2rem);
    gap: clamp(0.5rem, 2vw, 1rem);
    position: relative;
  z-index: 10;
  }

.mobile-only4 {
  background-image: url('images/enquiry.jpeg');
  /* replace with your image path */
background-size: cover;
/* makes image cover the whole section */
background-position: center;
/* centers the image */
background-repeat: no-repeat;
/* prevents tiling */
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
/* optional: overlay a light color for better readability */
position: relative;
}
  



  .enquiry-section2 {
    height: auto;      /* allow section to grow with content */
    min-height: 0;     /* reset any previous min-height */
    padding: 2rem 1rem; /* optional spacing inside section */
    display: block;    /* normal flow */
  }
  
  .enquiry-container {
    height: auto;      /* ensure container also adapts */
  }
  
  .para-container {
    height: auto;      /* adapt to content */
    max-width: 90%;    /* optional, for nice text wrapping */
    margin: 0 auto;    /* center horizontally */
  }
/* Make only the last section adapt to content */
#enquiry6, /* or #enquiry2 in your case */ 
.enquiry-section2 {
  height: auto !important;   /* override any previous height */
  min-height: auto !important;
}

/* Optional: remove snap-section behavior for last section */
#enquiry2.snap-section {
  scroll-snap-align: start;  /* optional */
}
  
  .enquiry-section {
    display: flex;
    justify-content: center;
    /* center horizontally */
    align-items: center;
    /* center vertically */
    height: 100vh;
    /* full viewport height */
  }


  /* Enquiry Container */
  .enquiry-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: clamp(0.2rem, 1vw, 2rem);
    gap: clamp(0.2rem, 1vw, 2rem);
  }




  .enquiry-form h2 {
    font-size: clamp(0.7rem, 4vw, 10.9rem);
    font-family: 'inspiration', serif;
    font-weight: 400;

    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: clamp(0.5rem, 6vw, 10.5rem);
    /* works now */
    word-spacing: 0.3rem;

    text-align: center;
    white-space: normal;
  }


  .enquiry-image {
    order: 3;
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    left: 13%;
    /* moves it toward the right */
    margin-top: clamp(1rem, 25%, 15rem);
  z-index: 0;
  }


  /* Labels */
  .enquiry-form label {
    font-weight: bold;
    font-size: clamp(0.7rem, 4vw, 10.9rem);
    line-height: clamp(0.2rem, 1vw, 1.1rem);
  }

  /* Make input underline longer */
  .enquiry-form input,
  .enquiry-form textarea {
    width: clamp(200px, 90%, 600px);
    /* adjust to make underline longer */
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    /* underline */
    background: transparent;
    padding: clamp(0.2rem, 0.2vw, 0.4rem);
    font-size: clamp(0.8rem, 4.3vw, 1.2rem);
  }


  /* Form button */
  .enquiry-form button {
    margin-top: clamp(0.1rem, 8vw, 12rem);

    width: 100%;
    font-size: clamp(0.8rem, 4.3vw, 1.2rem);
    padding: clamp(0.1rem, 1vw, 1rem);
  }

  /* Form container (for inputs) */
  .enquiry-form form {
    display: flex;
    flex-direction: column;
    gap: clamp(0.1rem, 3vw, 10rem);
  }

  /* Top paragraphs */
  .para-one {
    order: 1;
    width: 100%;
    text-align: center;
    margin-top: clamp(0.01rem, 6vw, 10rem);
    font-size: clamp(0.5rem, 4.3vw, 1.3rem);
    line-height: clamp(1.2, 1.5, 1.6);
  }

  .para-one12 {
    order: 2;
    width: 90%;
    text-align: center;
    color: #785227;
    margin-top: clamp(-1rem, -2vw, 1rem);
    margin-bottom: clamp(0.01rem, 2vw, 10rem);
    font-size: clamp(0.5rem, 4.3vw, 1.3rem);
    line-height: clamp(1.2, 1.5, 1.6);
  }

  .para-one2 {
    order: 3;
    width: 90%;
    text-align: center;
    margin-top: clamp(-1rem, -2.5vw, 1rem);
    margin-bottom: clamp(0.1rem, 10vw, 10rem);
    font-size: clamp(0.5rem, 4.3vw, 1.25rem);
    line-height: clamp(1.2, 1.5, 1.6);
  }

  /* Paragraph container */
  .para-container {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: clamp(0.2rem, 4.3vw, 1.2rem);
  }

  /* Bottom paragraphs */
  .para-two {
    order: 5;
    width: 90%;
    margin-top: clamp(0.3rem, 1vw, 2rem);
    text-align: justify;
    font-size: clamp(0.1rem, 2.3vw, 1rem);
    line-height: clamp(1.2, 1.5vh, 1.6);
    padding: 0 clamp(1rem, 4vw, 2rem);
  }

  .para-three {
    order: 6;
    width: 90%;
    margin-top: clamp(-5.5rem, 1vw, 0.5rem);
    margin-bottom: clamp(0.1rem, 1vw, 20rem);
    text-align: justify;
    font-size: clamp(0.2rem, 1.5vw, 0.95rem);
    line-height: clamp(0.5, 1vh, 1.6);
    padding: 0 clamp(1rem, 4vw, 2rem);
  }

  .enquiry-form {
  position: relative;
  z-index: 10; /* bring form above everything */
}

.enquiry-image {
  z-index: 0; /* ensure image stays behind */
}

.enquiry-form input,
.enquiry-form textarea {
  box-sizing: border-box;
}


}