/* Home page sections, media, preloader, projects preview, and contact */

.MainTitle {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Full height to center it vertically */
  text-align: center; /* Center text horizontally */
}

.MainTitleBack {
  position: absolute;
  z-index: 1; /* Place it behind the front title */
  font-size: 10rem; /* 175px / 16px */
  color: var(--white); /* Adjust text color */
  transform: translateX(-50%); /* Offset by half the element's width to center it */
  font-weight: 900;
  width: 100%;
  margin-bottom: 28.125rem; /* 450px / 16px */
}

.MainTitleFront {
  font-size: 4.6rem; /* 80px / 16px */
  color: var(--white); /* Adjust text color */
  z-index: 2; /* Ensure it's on top of the back title */
  font-weight: 900;
  line-height: 1.4;
  width: 100%;
}

@media (max-width: 1700px) {
  .MainTitleBack {
    font-size: 9.375rem; /* 150px / 16px */
  }
  .MainTitleFront {
    font-size: 4.375rem; /* 70px / 16px */
  }
}

@media (max-width: 1500px) {
  .MainTitleBack {
    font-size: 8.125rem; /* 130px / 16px */
  }
  .MainTitleFront {
    font-size: 3.75rem; /* 60px / 16px */
  }
}

@media (max-width: 1300px) {
  .MainTitleBack {
    font-size: 6.875rem; /* 110px / 16px */
  }
  .MainTitleFront {
    font-size: 3.125rem; /* 50px / 16px */
  }
}

@media (max-width: 1000px) {
  .MainTitleBack {
    top: 50%; /* Position the element vertically at the center */
    margin-top: -10.3125rem; /* -165px / 16px */
    font-size: 4.375rem; /* 70px / 16px */
  }
  .MainTitleFront {
    font-size: 1.875rem; /* 30px / 16px */
  }
}

@media (max-width: 700px) {
  .MainTitleBack {
    top: 50%; /* Position the element vertically at the center */
    margin-top: -9.375rem; /* -150px / 16px */
    font-size: 3.5rem; /* 50px / 16px */
  }
  .MainTitleFront {
    font-size: 1.6rem; /* 23px / 16px */
  }
  #container3D {
    top: -8.4375rem !important; /* -135px / 16px */
  }
  #cursor {
    display: none !important;
  }
  .cursor-circle {
    display: none !important;
  }
}

@media (max-width: 500px) {
  .MainTitleBack {
    top: 50%; /* Position the element vertically at the center */
    margin-top: -8.75rem; /* -140px / 16px */
    font-size: 11vw; /* Based on viewport width, no rem conversion needed */
  }
  .MainTitleFront {
    font-size: 5vw; /* Based on viewport width, no rem conversion needed */
  }
}

.landingPage {
  position: fixed; /* Fix the landing page in place */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4; /* Ensure it's on top of other content */
  pointer-events: none;

}

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 13vh;
  z-index: 998;
  pointer-events: none; /* Let clicks pass through to nav-bg */
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  box-sizing: border-box;
}

.nav-bg {
  position: absolute;
  top: 2vh;
  left: 50%;
  transform: translateX(-50%);
  width: 97%;
  height: 4.5vh;
  min-height: 52px;
  z-index: -5;
  pointer-events: auto; /* Re-enable clicks on the pill */

  /* Frosted glass effect */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  /* Pill shape */
  border-radius: 9999px;

}
/* Ensure content sits above nav-bg */
.main-h2,
#theme-toggle,
.container {
  z-index: 1;
  pointer-events: auto;
}

#scroll-bar {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 0; /* Start with zero height */
  background-color: var(--white);
  transform: translate(-50%, -50%); /* Center both horizontally and vertically */
  z-index: 10; /* Ensure it's above most content */
  pointer-events: none;

}

/* .content {
  height: 150vh;
  pointer-events: none;
} */

.hover-this {
  transition: all 0.3s ease;
}

.magnet-item {
  display: block;
  transition: 250ms linear;
}

#main-section{
  position: absolute;
  top: 100vh;
  max-width: 100vw;
  justify-content: center;
}

#new-section {
  position: relative;  /* or relative depending on your needs */
  left: 0;
  width: 100vw;
  min-height: 100vh;  /* Minimum height is 100% of the viewport */
  color: var(--black);
  display: flex;
  z-index: 11; /* Lower value than #new-section-2 */
  transition: top 0.8s ease-in-out;
}

.new-section-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4vw; /* Increased gap between text and image */
  max-width: 1400px;
  margin: 0 auto;
  padding: 5%;
}

.text-content {
  flex: 1 1 280px;
  padding: 0rem; /* Added padding to text for better readability */
  transition: transform 0.5s ease 0.3s; /* Smooth fade-in and slide-in */
}

.text-content h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  opacity: 0;
}

.text-content p {
  font-size: 1.125rem;
  line-height: 1.8; /* Improved line height for better readability */
  margin-bottom: 1rem;
  opacity: 0;
}

.image-content {
  flex: 1 1 100px;
  text-align: center;
  transition: transform 0.7s ease 0.2s; /* Smooth fade-in and slide-in with delay */
}

.image-content img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin-top: 1rem; 
  object-fit: cover; /* Ensure the image covers its container */
  opacity: 0;
}

/* Media Queries for Smaller Screens */
@media (max-width: 1024px) {
  .new-section-content {
    flex-direction: column;
    margin-top: 13vh;
    gap: 0;
    left: 5%;
  }

  .text-content h2 {
    font-size: 2rem; /* Smaller heading font size */
  }

  .text-content p {
    font-size: 1rem; /* Smaller text for readability */
  }

  .image-content {
    text-align: center;
    transform: translateY(0); /* Reset sliding effect */
  }

  .image-content img {
    margin-top: 1.5rem;
  }

  .social-media-icons {
    display: flex;
    gap: 1rem; /* Reduced gap between social media icons */
    margin-top: 1rem;
  }

  .social-icon i {
    font-size: 1.5rem; /* Smaller icon size */
  }
}

@media (max-width: 480px) {
  .text-content h2 {
    font-size: 1.5rem; /* Even smaller font for very small screens */
  }

  .text-content p {
    font-size: 0.9rem; /* Further reduced font size */
  }

  .social-media-icons {
    gap: 0.5rem !important; /* More reduced gap on very small screens */
  }

  .social-icon i {
    font-size: 1.5rem; /* Further reduced icon size */
  }
}

/* Social Media Icons */
.social-media-icons {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  margin-left: -10px;
}

.social-icon {
  font-size: 2rem; /* Adjust size */
  color: var(--black) !important; /* Default color */
  text-decoration: none;
}

.social-icon i {
  margin: 0 10px;
}

/* Style for the container that holds the divider */
.divider-container {
  width: 100%; /* Adjust to your desired container width */ 
  margin: 0 auto; /* Center the progress bar */
}

/* Style for the thin line (divider) */
.divider {
  height: 1px;
  background-color: var(--black); /* Light gray color */
  width: 0%; /* Start with no width */
}

.new-section-2-content {
  display: flex;
  flex-direction: row;
  align-items: center; /* Vertically center the items */
  justify-content: center; /* Horizontally center the items */
  max-width: 1500px;
  margin: 0 auto;
  max-height: 100vh; /* Make sure the section takes up the full height of the viewport */
  position: relative; /* Needed for the absolute positioning of the circle */
  padding: 5%;
}

.text-content-2 {
  display: flex;
  width: 100%;
  justify-content: space-between; /* Ensure the two items are spaced evenly */
  position: relative; /* Ensures child elements like the circle can be positioned correctly */
  flex-wrap: wrap;
}

.heading {
  font-size: 7rem; /* Very large text */
  font-weight: 900;
  width: 55%; /* 50% of the container width */
  line-height: 1.1;
  position: relative;
  z-index: 2; /* Bring the heading in front of the circle */
  mix-blend-mode: difference; /* Create the color effect */
  word-break: break-word;
  opacity: 0;
  top: 50px;
}

.heading span {
  display: block; /* Each word ("Check out" and "my projects") on its own line */
}

#new-section-2 {
  position: relative;
  left: 0;
  width: 100vw;
  height: 100vh;
  color: var(--white);
  display: flex;
  z-index: 12; 
  background-color: var(--black);
}

.subheading {
  font-size: 2.7rem;
  width: 45%;
  line-height: 1.3;
  padding-top: 2.7%;
  margin-top: 50px;
  /* Remove the old opacity/transform from here */
}

.char {
  /* Create a background: top 50% is grey, bottom 50% is white */
  background: linear-gradient(to top, var(--white) 50%, rgba(255, 255, 255, 0.2) 50%);
  background-size: 100% 200%; /* Make background twice as tall */
  background-position: top; /* Start by showing the top (grey) part */

  /* Clip the background to the shape of the text */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;

  display: inline-block; /* Required for the background positioning to work perfectly */
}

.circle {
  position: absolute;
  width: 500px; /* Circle size (adjust as needed) */
  height: 500px; /* Ensure it's a circle by making width and height equal */
  background-color: var(--white); /* Adjust color if needed */
  border-radius: 50%; /* Makes it a circle */
  top: 50%; /* Vertically center */
  left: -3vw; /* Adjust left position for overlap */
  transform: translateY(-50%); /* Center the circle vertically */
  z-index: 1; /* Place behind the heading */
  opacity: 0; /* Start as invisible */
  transform: translateY(-50%) scale(0); /* Start small */
}

@media screen and (max-width: 1600px) {
  .circle {
    display: none;
  }

  .new-section-2-content {
    flex-direction: column; /* Stack content vertically */
  }

  .text-content-2 {
    justify-content: center; /* Center content horizontally */
    text-align: center; /* Center align text */
  }

  .heading {
    width: 100%; /* Take up the full width */
    font-size: 5rem; /* Scale down font size */
  }

  .subheading {
    width: 60%; /* Take up the full width */
    padding-top: 7%; /* Adjust spacing as needed */
    font-size: 2.2rem; /* Scale down font size */
  }
}

@media screen and (max-width: 1200px) {
  .heading {
    font-size: 4rem; /* Further scale down font size */
  }

  .subheading {
    font-size: 2rem; /* Further scale down font size */
    width: 80%;
  }
}

@media screen and (max-width: 992px) {
  .heading {
    font-size: 3.5rem; /* Even smaller font size */
  }

  .subheading {
    font-size: 1.8rem; /* Even smaller font size */
  }
}

@media screen and (max-width: 600px) {
  .heading {
    font-size: 3.5rem; /* Even smaller font size */
  }

  .subheading {
    font-size: 1.8rem; /* Even smaller font size */
    width: 90%;
  }
}
    @media screen and (max-width: 400px) {
      .heading {
        font-size: 3rem; /* Even smaller font size */
      }

      .subheading {
        font-size: 1.2rem; /* Even smaller font size */
        width: 90%;
      }
    }

      @media screen and (max-width: 350px) {
        .heading {
          font-size: 2.5rem; /* Even smaller font size */
        }

        .subheading {
          font-size: 1.2rem; /* Even smaller font size */
          width: 100%;
        }
      }

      #new-section-3 {
        position: relative;
        left: 0;
        width: 100%;
        height: 100vh;
        color: var(--black);
        display: flex;
        z-index: 13;
        overflow-x: hidden;
        background-color: var(--white);
        justify-content: flex-start; /* Ensures the content aligns to the left */
    }

    .new-section-3-content {
        display: flex;
        flex-direction: row;
        position: absolute;
        top: 50%;
        left: 0; /* Align content to the left */
        transform: translateY(-50%); /* Keep it vertically centered */
        user-select: none;
    }

    .image-track {
        display: flex;
        gap: 4vmin;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(0%, -50%);
        user-select: none;
        margin-right: 5vw
    }

    .image-track > .image {
        width: 75vmin;
        height: 56vmin;
        object-fit: cover;
        object-position: 100% center;
    }

    /* Fullscreen styling */
    .image:-webkit-full-screen {
      object-fit: contain;
      background: black;
  }

    .image:fullscreen {
      object-fit: contain;
      background: black;
  }

    /* Animated image viewer created by site.js. These styles must live in the
       homepage bundle; projects.css is not loaded on this page. */
    .fullscreen-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.92);
      opacity: 0;
      pointer-events: none;
      will-change: opacity;
      transform: translateZ(0);
      z-index: 10000;
    }

    .fullscreen-img {
      position: fixed;
      display: block;
      max-width: none;
      max-height: none;
      margin: 0;
      border-radius: 0;
      /* The box morphs from the cropped card ratio to the image's natural
         ratio. Cover keeps the first frame identical and reveals the image
         smoothly as the box grows. */
      object-fit: cover;
      object-position: center;
      pointer-events: none;
      user-select: none;
      contain: layout paint style;
      backface-visibility: hidden;
      will-change: transform, width, height;
      z-index: 10001;
    }

    .text-container {
        margin-right: 80vw;
        text-align: left;
        margin-left: 20vw;
        width: 35vw;
    }

    h2 {
        font-size: 3rem;
        margin-bottom: 2vmin;
    }

    .subtext{
      font-size: 1.5rem;
    }

    @media screen and (max-width: 1920px) {
      h2 {
        font-size: 2.5rem;
    }
    .subtext{
      font-size: 1.5rem;
    }
    }
    @media screen and (max-width: 1000px) {
    .text-container {
      margin-right: 80vw;
      text-align: left;
      margin-left: 5vw;
      width: 50vw;
  }
    }
    @media screen and (max-width: 650px) {
      h2 {
        font-size: 2rem;
    }
    .subtext{
      font-size: 1.3rem;
    }
      .text-container {
        margin-right: 90vw;
        text-align: left;
        margin-left: 5vw;
        width: 70vw;
    }
      }
      @media screen and (max-width: 400px) {
        h2 {
          font-size: 1.8rem;
      }
      .subtext{
        font-size: 1.1rem;
      }
        .text-container {
          margin-right: 100vw;
          text-align: left;
          margin-left: 5vw;
          width: 75vw;
      }
        }

        #new-section-4 {
          position: relative;
          left: 0;
          width: 100%;
          height: 100vh;
          color: var(--white);
          display: flex;
          z-index: 13;
          overflow-x: hidden;
          background-color: var(--black);
          justify-content: flex-start; /* Ensures the content aligns to the left */
      }

      .new-section-4-content {
          display: flex;
          flex-direction: row;
          position: absolute;
          top: 50%;
          left: 0; /* Align content to the left */
          transform: translateY(-50%); /* Keep it vertically centered */
          user-select: none;
      }

      #new-section-5 {
        position: relative;
        left: 0;
        width: 100%;
        height: 100vh;
        color: var(--black);
        display: flex;
        z-index: 13;
        overflow-x: hidden;
        background-color: var(--white);
        justify-content: flex-start; /* Ensures the content aligns to the left */
    }

    .new-section-5-content {
        display: flex;
        flex-direction: row;
        position: absolute;
        top: 50%;
        left: 0; /* Align content to the left */
        transform: translateY(-50%); /* Keep it vertically centered */
        user-select: none;
    }

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--black);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  clip-path: circle(150% at 50% 50%);  /* ← Full screen circle mask */
  will-change: clip-path;               /* Performance optimization */
}

html.returning-visit #preloader {
  display: none;
}

.spinner {
  width: 48px;
  height: 48px;
  border: 5px solid var(--white);
  border-top-color: transparent;
  border-radius: 50%;

  /* Use rotate instead of transform for better performance */
  animation: spin-rotate 1s linear infinite;

  transform: translateZ(0); /* Still promote to GPU layer */
}

@keyframes spin-rotate {
  to { rotate: 360deg; }
}

    /* other projects section */
    #new-section-otherProjects {
      position: relative;
      width: 100vw;
      height: 100vh;
      background: var(--black);
      display: flex;
      justify-content: center;
      align-items: center;
      color: var(--white);
      overflow: hidden;
      z-index: 997;
      text-align: center;
    }

    .new-section-otherProjects-content {
      max-width: 1500px;
      width: 100%;
      padding: 5%;
    }

.text-content-otherProjects {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* 1. Main container keeps layout & sizing */
.heading-other {
  font-size: 6.5rem;
  font-weight: 900;
  line-height: 1.1;
  width: 55%;
}

/* 2. New class for individual lines */
.text-line {
  /* Outline & Color */
  -webkit-text-stroke: 2px var(--white);
  color: transparent; 

  background: linear-gradient(to right, var(--white) 50%, transparent 50%);
  background-size: 200% 100%;
  background-position: 100% 0;

  -webkit-background-clip: text;
  background-clip: text;

  /* THE FIX FOR CHOPPED LETTERS */
  display: inline-block; 
  padding-bottom: 0.15em; /* Gives the background extra room at the bottom */
  margin-bottom: -0.15em; /* Pulls the next line back up so your line-height isn't ruined */
}

/* Circle Button */
.circle-btn {
  position: relative;
  overflow: hidden; /* Crucial for clipping the fill inside the circle */
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: transparent; 
  color: var(--white);
  border: 3px solid var(--white);
  font-size: 1.8rem;
  font-weight: 800;
  cursor: pointer;
  transform: scale(1);
  /* Removed background/color transitions; GSAP handles the fill now */
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 0 0 rgba(255,255,255,.2);
  animation: pulse 2.8s infinite;
}

/* Keep text above the background fill */
.btn-text {
  position: relative;
  z-index: 2;
  transition: color 0.3s ease;
}

/* The element that will animate the fill */
.btn-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px; /* Small starting size */
  height: 10px;
  border-radius: 50%;
  background: var(--white);
  z-index: 1;
  pointer-events: none; /* Prevents interference with mouse events */
  transform: translate(-50%, -50%) scale(0); /* Centers it and hides it initially */
}

/* Hover animations */
.circle-btn:hover {
  transform: scale(1.12);
  outline: none; /* Prevents double border visually */
}

.circle-btn:hover .btn-text {
  color: var(--black); /* Change text color when white background fills in */
}

/* Slight floating/pulse animation */
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,.15); }
  70% { box-shadow: 0 0 0 22px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* Responsive */
@media (max-width: 900px) {
  .text-content-otherProjects {
    flex-direction: column;
    text-align: center;
    gap: 100px;
  }
  .heading-other {
    width: 100%;
    font-size: 4rem;
  }
  .circle-btn {
    width: 160px;
    height: 160px;
    font-size: 1.4rem;
  }
}

/* CONTACT SECTION — Light Version */
#contact-section {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  background: var(--white);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--black);
  padding-top: 6rem;
  padding-bottom: 2rem;
  z-index: 12;
}

.form-group input,
.form-group textarea,
.contact-btn {
  box-sizing: border-box;
}

.contact-content {
  width: 100%;
  max-width: 900px;
  text-align: center;
  margin-right: 10%;
  margin-left: 10%;
}

#contact-section h2 {
  font-size: 4rem;
  font-weight: 900;
  margin-bottom: 20px;
  color: var(--black);
}

.contact-subtext {
  font-size: 1.35rem;
  max-width: 600px;
  margin: 0 auto 3rem;
  opacity: 0.85;
  color: var(--black);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

/* Input wrapper for SVG border animation */
.input-wrapper {
  position: relative;
  width: 100%;
  /* Add padding to prevent stroke cutoff */
  padding: 1px;
  margin: -1px;
}

.input-wrapper input,
.input-wrapper textarea {
  width: 100%;
  padding: 1.1rem 1.4rem;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--black);
  font-size: 1.1rem;
  position: relative;
  z-index: 2;
  outline: none;
  transition: background .3s;
}

/* SVG border overlay */
.border-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible; /* Allow stroke to be fully visible */
}

.border-svg rect {
  stroke-dasharray: 2000; /* Large enough for any size */
  stroke-dashoffset: 2000;
  transition: stroke 0.3s ease;
}

.input-wrapper textarea {
  height: 160px;
  resize: none;
}

/* Focus state */
.input-wrapper input:focus,
.input-wrapper textarea:focus {
  background: #00000010;
}

.input-wrapper input:focus ~ .border-svg rect,
.input-wrapper textarea:focus ~ .border-svg rect {
  stroke: #00000099;
}

/* Error state */
input.error ~ .border-svg rect,
textarea.error ~ .border-svg rect {
  stroke: var(--black);
}

.contact-btn {
  align-self: center;
  width: 100%;
  background: var(--black);
  color: var(--white);
  padding: 1.2rem 2rem;
  border-radius: 50px;
  border: none;
  font-size: 1.3rem;
  font-weight: 800;
  cursor: none;
  transition: 0.35s ease;
}

.contact-btn:hover {
  background: transparent;
  outline: 3px solid var(--black);
  color: var(--black);
}

/* MOBILE */
@media (max-width: 600px) {
  #contact-section h2 {
    font-size: 2.8rem;
  }
  .contact-subtext {
    font-size: 1.15rem;
  }
}

.form-group {
  text-align: left;
}

/* ERROR MESSAGES — Responsive */
.error-message {
  display: block;
  text-align: left;
  font-size: clamp(0.75rem, 2.8vw, 0.9rem);
  font-weight: 600;
  margin-top: 4px;
  padding-left: 4px;
  color: var(--black);
  opacity: 0.75;
  transform: translateY(-3px);
  opacity: 0;
  transition: 0.25s ease;
}

input.error + .error-message,
textarea.error + .error-message {
  transform: translateY(0);
  opacity: 0.9;
}

/* SUCCESS POPUP — Fully responsive */
.success-center-message {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  transition: opacity .4s ease, transform .5s ease;
  background: var(--white);
  color: var(--black);
  padding: clamp(14px, 5vw, 26px) clamp(18px, 7vw, 40px);
  border-radius: 12px;
  font-size: clamp(0.95rem, 3.5vw, 1.25rem);
  font-weight: 600;
  text-align: center;
  pointer-events: none;
  width: max-content;
  max-width: 90%;
  z-index: 9999;
  word-wrap: break-word;
}

.success-center-message.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Extra tiny screens */
@media (max-width: 400px) {
  .success-center-message {
    font-size: 1rem;
    padding: 14px 20px;
    border-radius: 10px;
  }
}

.contact-form {
  position: relative;
  transition: transform 0.7s ease, opacity 0.6s ease;
}

.contact-content {
  position: relative;
}

.success-center-message {
  pointer-events: none;
  z-index: 9999;
}

.contact-input::placeholder {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.contact-input.placeholder-visible::placeholder {
  opacity: 1;
}

/* Mobile styles - stack images vertically with square aspect ratio */
@media screen and (max-width: 768px) {
  #new-section-3,
  #new-section-4,
  #new-section-5 {
    height: auto !important;
    min-height: 100vh;
    padding: 80px 0;
    overflow: visible !important;
  }

  .new-section-3-content,
  .new-section-4-content,
  .new-section-5-content {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    flex-direction: column;
    width: 100%;
    padding: 0 5%;
    margin-top: 60px; /* Add top margin to lower entire content */
  }

  .text-container {
    margin: 0 0 40px 0 !important;
    width: 100% !important;
    text-align: center;
  }

  .image-track {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0;
    flex-direction: column; /* Stack vertically */
    gap: 25px; /* Space between stacked images */
    overflow: visible;
    padding-bottom: 0;
    width: 100%;
    display: flex;
    align-items: center; /* Center all items horizontally */
  }

  .image-track > .image {
    width: 100% !important; /* Full width */
    height: 75vw !important; /* Square-ish aspect ratio (4:3) */
    max-width: 500px; /* Limit max width */
    max-height: 375px; /* Limit max height to maintain ratio */
    margin: 0 auto; /* Center images */
    flex-shrink: 1; /* Allow shrinking */
    object-fit: cover; /* Fill the square area */
    object-position: center center; /* Center the image within the frame */
    border-radius: 12px; /* Optional: add some rounding */
    display: block; /* Ensure proper block-level behavior */
  }

  /* Special handling for iframes (YouTube videos) */
  .image-track > .image.last-item {
    aspect-ratio: 16 / 9; /* Maintain video aspect ratio */
    height: 56.25vw !important; /* 16:9 ratio based on width */
    max-height: 280px; /* Limit video height */
    object-fit: contain; /* Show full video without cropping */
    background: #000; /* Black background for video */
  }
}

/* For very small mobile devices */
@media screen and (max-width: 480px) {
  .new-section-3-content,
  .new-section-4-content,
  .new-section-5-content {
    margin-top: 40px; /* Slightly less margin on very small screens */
  }

  .text-container {
    margin-bottom: 30px;
  }

  .text-container h2 {
    font-size: 1.6rem;
  }

  .text-container .subtext {
    font-size: 1rem;
  }

  .image-track {
    gap: 20px;
  }

  .image-track > .image {
    height: 80vw !important; /* Slightly taller on very small screens */
    max-height: 320px;
  }

  .image-track > .image.last-item {
    height: 60vw !important;
    max-height: 240px;
  }
}

/* For medium mobile devices */
@media screen and (min-width: 481px) and (max-width: 768px) {
  .new-section-3-content,
  .new-section-4-content,
  .new-section-5-content {
    margin-top: 80px; /* More margin on tablets */
  }

  .image-track > .image {
    height: 70vw !important; /* Slightly different ratio for tablets */
    max-height: 400px;
  }

  .image-track > .image.last-item {
    height: 52.5vw !important; /* 16:9 ratio */
    max-height: 315px;
  }
}