.palm-bg-wrapper {
  position: absolute;
  top: 16.5%; 
  left: 0;
  width: 100%;
  height: 0; 
  z-index: 2; 
  pointer-events: none;
  overflow: visible;
}

/* Base styling for the animated palm wrapper */
.animated-palm {
  position: absolute;
  bottom: 0; 
  transform-origin: bottom center;
  animation: gentle-breeze ease-in-out infinite alternate;
  will-change: transform;
}

.animated-palm img {
  width: 100%;
  height: auto;
  display: block;
}

/* Flip the right side images */
.palm-right { transform: scaleX(-1); }

/* Physics-based sway */
@keyframes gentle-breeze {
  0% { transform: rotate(-2deg); }
  100% { transform: rotate(2deg); }
}

/* --- LEFT SIDE PALMS --- */
.palm-l-tall { left: -1%; width: 36%; animation-duration: 5.2s; z-index: 1; }
.palm-l-med { left: -1%; width: 25%; animation-duration: 4.5s; animation-delay: -1.2s; z-index: 2; bottom: -1%; }
.palm-l-short { left: 12%; width: 18%; animation-duration: 3.8s; animation-delay: -2.5s; z-index: 3; bottom: -2%; }

/* --- RIGHT SIDE PALMS --- */
.palm-r-tall { right: 0%; width: 36%; animation-duration: 4.9s; animation-delay: -0.5s; z-index: 1; }
.palm-r-med { right: 2%; width: 25%; animation-duration: 4.2s; animation-delay: -1.8s; z-index: 2; bottom: -1%; }
.palm-r-short { right: 11%; width: 18%; animation-duration: 3.6s; animation-delay: -0.9s; z-index: 3; bottom: -2%; }


/* --- SHRUBS --- */
.shrub {
  position: absolute;
  bottom: 0; 
  z-index: 5; 
  pointer-events: none;
  transform: translateY(60%);
}

.shrub img {
  width: 100%;
  height: auto;
  display: block;
}

/* Flip the right side shrub for visual balance */
.shrub-right { 
  transform: translateY(60%) scaleX(-1); 
}

.shrub-right img {
  transform: none; 
}

/* Base Shrub Positioning */
.shrub-left { left: -8%; width: 38%; }
.shrub-right { right: -8%; width: 38%; }
/* Base wrapper for the pendants */
.pendant-wrapper {
  position: absolute;
  /* ADJUST THIS: Move this percentage up or down until the top 
     of the rope aligns perfectly with the design in your background */
  top: 17.1%; 
  left: 0;
  width: 100%;
  z-index: 1; 
  pointer-events: none;
}

/* The animated element */
.animated-pendant {
  position: absolute;
  top: 0;
  /* CRITICAL: Swings from the top string, unlike the palms */
  transform-origin: top center;
  animation: pendulum-swing ease-in-out infinite alternate;
  will-change: transform;
}

.animated-pendant img {
  width: 100%;
  height: auto;
  display: block;
}

/* The physics of the swing - keep the degrees low so it looks heavy and realistic */
@keyframes pendulum-swing {
  0% { transform: rotate(-3.5deg); }
  100% { transform: rotate(3.5deg); }
}

/* --- Positioning the Left and Right Pendants --- */

.pendant-left {
  left: 7%; /* Adjust to align perfectly inside the gold border */
  width: 8%;  /* Adjust thickness/scale of the pendant */
  animation-duration: 2.8s;
}

.pendant-right {
  right: 7%; /* Adjust to match the left side */
  width: 8%;
  animation-duration: 3.5s; /* Slightly slower so they desync */
  animation-delay: -1.5s;
}


/* --- SECOND PALM & SHRUB WRAPPER --- */
.palm-bg-wrapper-2 {
  position: absolute;
  /* ADJUST THIS: Set to where the new ground level is further down the page */
  top: 41.4%; 
  left: 0;
  width: 100%;
  height: 0; 
  z-index: 2; 
  pointer-events: none;
  overflow: visible;
}
.palm-bg-wrapper-2 .animated-palm {
  /* You can lower the opacity slightly if you want them to feel further away */
  /* opacity: 0.9; */ 
}

/* --- SECTION 2 LEFT SIDE --- */
.palm-bg-wrapper-2 .palm-l-tall { 
  left: -17%; 
  width: 49%; /* Scaled down from 36% */
  animation-duration: 5.8s; /* Slower sway */
}
.palm-bg-wrapper-2 .palm-l-med { 
  left: -3%; 
  width: 32%; 
  animation-duration: 4.1s; 
  animation-delay: -2.3s; 
margin-bottom: -3%;
}
.palm-bg-wrapper-2 .palm-l-short { 
  left: -11%; 
  width: 27%; 
  animation-duration: 3.4s; 
  animation-delay: -1.1s; 
	margin-bottom: -22%;
	
}

/* --- SECTION 2 RIGHT SIDE --- */
.palm-bg-wrapper-2 .palm-r-tall { 
  right: -15%; 
  width: 49%; 
  animation-duration: 5.5s; 
  animation-delay: -3.2s; 
}
.palm-bg-wrapper-2 .palm-r-med { 
  right: -2%; 
  width: 32%; 
  animation-duration: 4.8s; 
  animation-delay: -0.7s; 
	margin-bottom: -3%;
}
.palm-bg-wrapper-2 .palm-r-short { 
  right: -11%; 
  width: 27%; 
  animation-duration: 3.2s; 
  animation-delay: -2.8s; 
		margin-bottom: -22%;
}

/* --- SECTION 2 SHRUBS --- */
/* Scale the bushes down to match the smaller trees */
.palm-bg-wrapper-2 .shrub-left { 
  left: -4%; 
  width: 48%; 
	top: 10%;
}
.palm-bg-wrapper-2 .shrub-right { 
  right: -4%; 
  width: 48%; 
	top: 10%;
}
/* --- SECOND PENDANT WRAPPER --- */
.pendant-wrapper-2 {
  position: absolute;
  top: 46.76%; /* Your exact calculated number */
  left: 0;
  width: 100%;
  z-index: 1; 
  pointer-events: none;
}


.sphinx-bg-wrapper {
  position: absolute;
  top: 80%; 
  left: 0;
  width: 100%;
  height: 0; 

  pointer-events: none;
  overflow: visible;
}
.sphinx {
  position: relative;
  z-index: 5;
}

.sphinx img {
  width: 100%;
  height: auto;
  display: block;
}


/* --- SECTION 3 LEFT SIDE --- */


.sec3cont{
	
}

.sphinx-bg-wrapper .palm-l-tall { 
  left: -10%; 
  width: 49%; /* Scaled down from 36% */
  animation-duration: 5.8s; /* Slower sway */
	margin-bottom: -64%;
z-index: 1;
}
.sphinx-bg-wrapper .palm-l-med { 
  left: -9%; 
  width: 32%; 
  animation-duration: 4.1s; 
  animation-delay: -2.3s; 
margin-bottom: -60%;
}
.sphinx-bg-wrapper .palm-l-short {
    left: -14%;
    width: 23%;
    animation-duration: 3.4s;
    animation-delay: -1.1s;
    margin-bottom: -65%;
}
.sphinx-bg-wrapper .palm-l-short2 {
    left: 12%;
    width: 17%;
    animation-duration: 4.4s;
    animation-delay: -1s;
    margin-bottom: -41%;
}
.sphinx-bg-wrapper .palm-r-tall {
    right: -10%;
    width: 48%;
    animation-duration: 5.5s;
    animation-delay: -3.2s;
    margin-bottom: -64%;
}
.sphinx-bg-wrapper .palm-r-med {
    right: -5%;
    width: 28%;
    animation-duration: 3.2s;
    animation-delay: -2.8s;
    margin-bottom: -56%;
}
.sphinx-bg-wrapper .palm-r-short {
    right: 16%;
    width: 21%;
    animation-duration: 3.2s;
    animation-delay: -2.8s;
    margin-bottom: -47%;
}
.sphinx-bg-wrapper .palm-r-short2 {
    right: -10%;
    width: 23%;
    animation-duration: 3.2s;
    animation-delay: -2.8s;
    margin-bottom: -47%;
}

/* --- Bottom Lotus --- */

.lotus-bg-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    z-index: 2;
    pointer-events: none;
    overflow: visible;
}

/* Base styling for the animated palm wrapper */
.animated-lotus {
  position: absolute;
  bottom: 0; 
  transform-origin: bottom center;
  animation: gentle-breeze ease-in-out infinite alternate;
  will-change: transform;
}

.animated-lotus img {
  width: 100%;
  height: auto;
  display: block;
}

/* Flip the right side images */
.lotus-right { transform: scaleX(-1); }

/* Physics-based sway */
@keyframes gentle-breeze {
  0% { transform: rotate(-2deg); }
  100% { transform: rotate(2deg); }
}
.lleft {
  transform: scalex(-1);
}
/* --- LEFT SIDE lotus --- */
.lotus-bg-wrapper .lotus-l-tall { left: -17%; animation-duration: 5.2s; z-index: 1; width: 40%;}
.lotus-bg-wrapper .lotus-l-med { left: 5%;  animation-duration: 4.5s; animation-delay: -1.2s; z-index: 2;width: 33%;}
.lotus-bg-wrapper .lotus-l-short { left: 10%; animation-duration: 3.8s; animation-delay: -2.5s; z-index: 3; width: 30%;}

/* --- RIGHT SIDE PALMS --- */
.lotus-bg-wrapper .lotus-r-tall { right: -15%; animation-duration: 4.9s; animation-delay: -0.5s; z-index: 1;width: 40%;}
.lotus-bg-wrapper .lotus-r-med { right: 6%;  animation-duration: 4.2s; animation-delay: -1.8s; z-index: 2;width: 33%;}
.lotus-bg-wrapper .lotus-r-short { right: 11%; animation-duration: 3.6s; animation-delay: -0.9s; z-index: 3;width: 30%;}


/* --- Lotus SHRUBS --- */
.lotusshrub {
  position: absolute;
  bottom: 0; 
  z-index: 5; 
  pointer-events: none;
  transform: translateY(1%) scalex(-1);
}

.lotusshrub img {
  width: 100%;
  height: auto;
  display: block;
}

/* Flip the right side shrub for visual balance */
.lotusshrub-right { 
  transform: translateY(0%); 
}

.lotusshrub-right img {
  transform: none; 
}

/* Base Shrub Positioning */
.lotusshrub-left { left: 0%; width: 20%; }
.lotusshrub-right { right: 0%; width: 20%; }