Html – Image Counter moving when I write more text in the paragraph<p>, but is fine when there is short text

document.addEventListener("DOMContentLoaded", function () {
  const hamburger = document.querySelector(".hamburger");
  const navLinks = document.querySelector(".nav__links");

  hamburger.addEventListener("click", () => {
    navLinks.classList.toggle("active");
  });

  // Close the menu when a link is clicked (optional)
  const navItems = document.querySelectorAll(".nav__links li a");
  navItems.forEach((item) => {
    item.addEventListener("click", () => {
      navLinks.classList.remove("active");
    });
  });
});

document.addEventListener("DOMContentLoaded", function () {
  const carousels = document.querySelectorAll(".carousel");

  carousels.forEach((carousel) => {
    const slides = carousel.querySelectorAll(".carousel-slide");
    const prevButton = carousel.querySelector(".prev");
    const nextButton = carousel.querySelector(".next");
    const dots = carousel.querySelectorAll(".dot");
    let currentIndex = 0;

    function showSlide(index) {
      slides.forEach((slide, i) => {
        slide.style.display = i === index ? "block" : "none";
      });
      carousel.querySelector(".carousel-counter").textContent = `${
        index + 1
      } / ${slides.length}`;
      dots.forEach((dot, i) => {
        dot.classList.toggle("active", i === index);
      });
    }

    showSlide(currentIndex);

    nextButton.addEventListener("click", () => {
      currentIndex = (currentIndex + 1) % slides.length;
      showSlide(currentIndex);
    });

    prevButton.addEventListener("click", () => {
      currentIndex = (currentIndex - 1 + slides.length) % slides.length;
      showSlide(currentIndex);
    });

    dots.forEach((dot, index) => {
      dot.addEventListener("click", () => {
        currentIndex = index;
        showSlide(currentIndex);
      });
    });
  });
});

function showSlide(index) {
  slides.forEach((slide, i) => {
    slide.style.display = i === index ? "block" : "none";
  });
  updateCounter(index);
  adjustCounterPosition(index);
}

function adjustCounterPosition(index) {
  const currentSlide = slides[index];
  const img = currentSlide.querySelector("img");
  const counter = currentSlide.querySelector(".carousel-counter");
  if (img && counter) {
    function positionCounter() {
      const slideRect = currentSlide.getBoundingClientRect();
      const imgRect = img.getBoundingClientRect();
      const top = imgRect.top - slideRect.top + 10;
      const left = imgRect.left - slideRect.left + 10;
      counter.style.top = `${top}px`;
      counter.style.left = `${left}px`;
    }
    if (img.complete) {
      positionCounter();
    } else {
      img.onload = positionCounter;
    }
  }
}

// Event listeners for navigation
nextButton.addEventListener("click", () => {
  currentIndex = (currentIndex + 1) % slides.length;
  showSlide(currentIndex);
});

prevButton.addEventListener("click", () => {
  currentIndex = (currentIndex - 1 + slides.length) % slides.length;
  showSlide(currentIndex);
});

dots.forEach((dot, index) => {
  dot.addEventListener("click", () => {
    currentIndex = index;
    showSlide(currentIndex);
  });
});

// Initialize the counter position on page load
window.addEventListener("load", () => {
  showSlide(currentIndex);
});

document.addEventListener("DOMContentLoaded", function () {
  const images = document.querySelectorAll(".carousel-slide img");

  images.forEach((img) => {
    img.onload = function () {
      const width = img.naturalWidth;
      const height = img.naturalHeight;
      const aspectRatio = width / height;

      if (aspectRatio > 1) {
        img.classList.add("horizontal"); // Horizontal image (3:2)
      } else {
        img.classList.add("vertical"); // Vertical image (2:3)
      }
    };

    // Trigger onload in case the image is already loaded
    if (img.complete) {
      img.onload();
    }
  });
});

@import url("https://fonts.googleapis.com/css2?family=Mrs+Saint+Delafield&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

/* Define Custom Font */
@font-face {
  font-family: "MyCustomFont";
  src: url("../Fonts/FuturaCyrillicMedium.ttf") format("truetype");

  font-weight: normal;
  font-style: normal;
}

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

body {
  background-color: black; /* Set background for the body only */
}

li,
a,
button {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #edf0f1;
  text-decoration: none;
}

/* Use Custom Font in Specific Sections */
p {
  font-family: "MyCustomFont", sans-serif; /* Apply custom font to headers */
  text-transform: uppercase;
}

h3 {
  font-family: "Robnoto", sans-serif;
  text-transform: uppercase;
}

/* Hamburger Menu Styles */
.hamburger {
  display: none; /* Hide by default on desktop */
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 25px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 10;
}

.hamburger-line {
  width: 100%;
  height: 3px;
  background: white;
  transition: all 0.3s ease;
}

/* Mobile Navigation Styles */
@media (max-width: 768px) {
  .hamburger {
    display: flex; /* Show hamburger on mobile */
  }

  .nav__links {
    position: fixed;
    top: 0;
    right: -100%; /* Hide nav off-screen by default */
    height: 100vh;
    width: 70%; /* Adjust width as needed */
    background: rgba(0, 0, 0, 0.9);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: right 0.3s ease-in-out;
    z-index: 5;
  }

  .nav__links ul {
    flex-direction: column;
    align-items: center;
  }

  .nav__links li {
    margin: 15px 0;
  }

  .nav__links.active {
    right: 0; /* Slide nav into view */
  }

  .cta {
    display: none; /* Hide CTA button on mobile for simplicity */
  }
}

/* header section for the home page */

#home-page header {
  display: flex;
  align-items: center; /* Vertically align all elements */
  justify-content: space-between; /* Space between logo, nav, and CTA */
  padding: 30px 10%; /* Adjust padding for spacing */
  background: transparent;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
}

header {
  display: flex;
  width: 100%; /* Ensure header spans full width */
  top: 0;
  z-index: 2;
  background: transparent; /* Fully transparent background */
  align-items: center;
  padding: 30px 10%;
}

.logo-container {
  flex-shrink: 0; /* Prevents resizing */
}

.logo-link {
  display: flex;
  align-items: center;
}

.logo-link img:hover {
  transform: scale(1.05); /* Slight zoom-in effect on hover */
}

.logo {
  height: 76px;
  object-fit: contain;
  cursor: pointer;
}

nav {
  flex-grow: 1; /* Allows nav to take up available space */
  display: flex;
  justify-content: flex-end; /* Aligns links in the center */
}

.nav__links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__links li {
  display: inline-block;
  padding: 0px 20px;
}

.nav__links li a {
  color: white; /* White text for visibility over the video */
  transition: all 0.3s ease 0s;
}

.nav__links li a:hover {
  color: #0088a9;
}

.nav__links li a.active {
  text-decoration: underline; /* Keeps underline on active link */
  color: white; /* Keeps the color for the active link */
}

.cta button {
  margin-left: 20px;
  padding: 10px 20px;
  background-color: #0088a9;
  border: none;
  border-radius: 50px;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.cta button:hover {
  background-color: rgba(0, 136, 169, 0.8);
}

/* Photo grid */
.image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 40px;
  background-color: black;
}

.image-item {
  text-align: center;
  color: white;
}

.image-item img {
  max-width: 100%; /* Prevents the image from exceeding its container's width */
  height: auto;
  aspect-ratio: 3 / 2; /* Maintain aspect ratio */
  object-fit: cover;
  border-radius: 10px;
  max-height: 400px; /* Adjust this value to control the height of the images */
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
  margin-bottom: 15px;
}

.image-item h3 {
  font-size: 1.2em;
  margin: 10px 0;
}

.image-item p {
  font-size: 0.9em;
  color: #ccc;
}

/* Carousel Styles */
.carousel {
  position: relative; /* Make this container the reference for absolutely positioned elements */
  width: 100%;
  margin: 0 auto;
}

.carousel-container {
  position: relative; /* Ensure the container is the reference for absolute positioning */
  overflow: hidden; /* Prevent overflow of slides or elements */
}

.carousel-slides {
  display: flex;
  transition: transform 0.5s ease;
  height:600px;
  /*height:fit-content;*/
}

.carousel-slide {
  position: relative; /* Ensure the slide is the reference for absolute positioning */
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-wrapper {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.image-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
  max-height: 400px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
  z-index: 0;
}

/* Horizontal images (3:2 aspect ratio) */
.carousel-slide img.horizontal {
  aspect-ratio: 3 / 2; /* Force 3:2 aspect ratio */
  object-fit: cover; /* Crop to fit */
  width: 100%; /* Ensure the image fills the container width */
  height: auto; /* Maintain aspect ratio */
  border-radius: 10px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
}

/* Vertical images (2:3 aspect ratio) */
.carousel-slide img.vertical {
  aspect-ratio: 2 / 3; /* Force 2:3 aspect ratio */
  object-fit: contain; /* Maintain aspect ratio without cropping */
  width: 100%; /* Ensure the image fills the container width */
  height: auto; /* Maintain aspect ratio */
  border-radius: 10px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
}

.carousel-slide img {
  max-width: 100%;
  height: auto;
  object-fit: contain; /*to maintain aspect ratio */
  border-radius: 10px;
  max-height: 400px;
  margin-bottom: 15px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
}

/* Counter */
.carousel-counter {
  position: absolute;
  top: 10px; /* Move the counter to the top */
  left: 10px; /* Move the counter to the left */
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 14px;
  z-index: 1;
}

/* Navigation Buttons */
.carousel-btn {
  position: absolute;
  top: 30%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
  font-size: 24px;
}

.carousel-btn.prev {
  left: 10px;
}

.carousel-btn.next {
  right: 10px;
}

.carousel-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* Dots */
.carousel-dots {
  position: absolute;
  /*bottom: 70px;*/ /* Adjust the dots at the bottom */
  top:60%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  margin: 10px 0;
  z-index: 1;
}

.dot {
  height: 10px;
  width: 10px;
  margin: 0 5px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s;
}

.dot.active {
  background: rgba(255, 255, 255, 1);
}

/* footer section  */

footer {
  font-family: "Roboto", sans-serif;
  color: #edf0f1;
  text-align: center;
  padding: 20px;
}

footer .social-icons {
  margin-top: 10px;
}

footer .social-icons a {
  color: #edf0f1;
  margin: 0 10px;
  text-decoration: none;
  font-size: 20px;
  transition: color 0.3s ease;
}

footer .social-icons a:hover {
  color: #00bcd4; /* Change to preferred hover color */
}

/* Existing CSS remains the same until the media queries */

/* Responsive adjustments */
@media (max-width: 768px) {
  header {
    flex-direction: column;
    padding: 20px;
  }

  .nav__links {
    flex-direction: column;
    align-items: center;
  }

  .nav__links li {
    padding: 10px 0;
  }

  .cta button {
    margin: 20px 0 0;
  }

  .image-grid {
    grid-template-columns: 1fr; /* Stack the grid items vertically on smaller screens */
  }

  .carousel-btn {
    padding: 8px;
    font-size: 18px;
  }

  .carousel-dots {
    bottom: 70px;
  }

  footer {
    padding: 15px;
  }
}

@media (max-width: 480px) {
  .logo {
    height: 60px;
  }

  .carousel-counter {
    font-size: 12px;
  }

  .carousel-btn {
    padding: 5px;
    font-size: 16px;
  }

  .dot {
    height: 8px;
    width: 8px;
  }
}

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="Photos.css" />
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
      rel="stylesheet"
    />
    <title>Lenzfler Studio</title>
  </head>
  <body>
    <!-- header section -->
    <header id="home-page">
      <div class="logo-container">
        <a href="/Index.html" class="logo-link">
          <img class="logo" src="/Logo/LOGO WITH TEXT-01.png" alt="logo" />
        </a>
      </div>
      <nav>
        <ul class="nav__links">
          <li><a href="/Index.html">HOME</a></li>
          <li><a href="/FILMS.html">FILMS</a></li>
          <li><a href="/PHOTO.html">PHOTO</a></li>
        </ul>
      </nav>
      <a class="cta" href="/CONTACT.html"><button>CONTACT</button></a>
    </header>

    <!-- Image grid section -->
    <section class="image-grid">
      <!-- Carousel 1 -->
      <div class="image-item">
        <div class="carousel">
          <div class="carousel-container">
            <div class="image-wrapper">
              <div class="carousel-counter">1 / 4</div>
              <div class="carousel-slides">
                <div class="carousel-slide active">
                  <img
                    src="https://i.ibb.co/vqJTXST/DSF2908-Enhanced-NR-copy.webp"
                    alt="Franklin and Celeste"
                  />
                  <h3>Franklin and Celeste</h3>
                  <p>you can change carousel-slides class height for more string length and dot class to change dots div top</p>
                </div>
                <div class="carousel-slide">
                  <img
                    src="https://i.ibb.co/2WFmPrS/DSF2691-Enhanced-NR-copy.webp"
                    alt="Franklin and Celeste"
                  />
                  <h3>Franklin and Celeste</h3>
                  <p>Two souls united, a love story begins ✨</p>
                </div>
                <div class="carousel-slide">
                  <img
                    src="https://i.ibb.co/wLvRXJS/DSF2784-Enhanced-NR-copy.webp"
                    alt="Franklin and Celeste"
                  />
                  <h3>Franklin and Celeste</h3>
                  <p>A union of hearts, a story captured ✨</p>
                </div>
                <div class="carousel-slide">
                  <img
                    src="https://i.ibb.co/LSCdcTg/DSF2930-Enhanced-NR-copy.webp"
                    alt="Franklin and Celeste"
                  />
                  <h3>Franklin and Celeste</h3>
                  <p>Friends dance in joy, celebrating with laughter ✨</p>
                </div>
              </div>
            </div>
            <button class="carousel-btn prev">❮</button>
            <button class="carousel-btn next">❯</button>
            <div class="carousel-dots">
              <span class="dot active"></span>
              <span class="dot"></span>
              <span class="dot"></span>
              <span class="dot"></span>
            </div>
          </div>
        </div>
      </div>

      <!-- Carousel 2 -->
      <div class="image-item">
        <div class="carousel">
          <div class="carousel-container">
            <div class="image-wrapper">
              <div class="carousel-counter">1 / 4</div>
              <div class="carousel-slides">
                <div class="carousel-slide active">
                  <img
                    src="https://i.ibb.co/MP25TzB/Chris-and-Anna-1-copy.webp"
                    alt="Beautiful skies with some sushine"
                  />
                  <h3>Chris and Anna</h3>
                  <p>Forever starts here 💍</p>
                </div>
                <div class="carousel-slide">
                  <img
                    src="https://i.ibb.co/JR0SjM1/Chris-and-Anna-2-copy.webp"
                    alt="Beautiful skies with some sushine"
                  />
                  <h3>Chris and Anna</h3>
                  <p>Two hearts, one promise ❤️</p>
                </div>
                <div class="carousel-slide">
                  <img
                    src="https://i.ibb.co/CtG7B4z/Chris-and-Anna-3-copy.webp"
                    alt="Beautiful skies with some sushine"
                  />
                  <h3>Chris and Anna</h3>
                  <p>Brothers, united for the big day 🤵‍♂️</p>
                </div>
                <div class="carousel-slide">
                  <img
                    src="https://i.ibb.co/vqcxBG0/Chris-and-Anna-4-copy.webp"
                    alt="Beautiful skies with some sushine"
                    class="vertical"
                  />
                  <h3>Chris and Anna</h3>
                  <p>long textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong text</p>
                </div>
              </div>
            </div>
            <button class="carousel-btn prev">❮</button>
            <button class="carousel-btn next">❯</button>
            <div class="carousel-dots">
              <span class="dot active"></span>
              <span class="dot"></span>
              <span class="dot"></span>
              <span class="dot"></span>
            </div>
          </div>
        </div>
      </div>

      <!-- Add more carousels like the ones above for future events -->
    </section>

    <!-- footer section -->
    <footer>
      <p>© 2025 LENZFLER STUDIO. All rights reserved.</p>
      <div class="social-icons">
        <a
          href="https://www.facebook.com/profile.php?id=61559602636970"
          target="_blank"
          aria-label="Facebook"
        >
          <i class="fab fa-facebook-f"></i>
        </a>
        <a
          href="https://www.tiktok.com/@lenzflerstudio"
          target="_blank"
          aria-label="TikTok"
        >
          <i class="fab fa-tiktok"></i>
        </a>
        <a
          href="https://www.instagram.com/lenzflerstudio/"
          target="_blank"
          aria-label="Instagram"
        >
          <i class="fab fa-instagram"></i>
        </a>
      </div>
    </footer>

    <script src="Photos.js"></script>
  </body>
</html>