/* ===================== */
/* SECTION CONTAINER */
/* ===================== */

.third-section {
  position: relative;
  width: 100%;
  overflow: visible;
}

/* ===================== */
/* TITLE */
/* ===================== */

.thirdtitle {
  top: -150px;
  position: relative;
  z-index: 10;
  text-align: center;
  margin: -100px auto 0;
}

.thirdtitle h2 {
  font-size: 50px;
  margin-bottom: 10px;
  color: #fff;
  font-family: "Times New Roman", Times, serif;
}

.thirdtitle h1 {
  font-size: 45px;
  font-weight: bold;
  margin-bottom: 30px;
  color: #fff;
  font-family: 'Poppins', sans-serif;
}

/* ===================== */
/* CAROUSEL WRAPPER */
/* ===================== */

.third-wrapper {
  position: relative;
  top: -120px;
  isolation: isolate;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;              /* ✅ CENTERED */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  z-index: 5;
}

.third-carousel {
  position: relative;
  width: 100%;
  height: 520px;
}

/* ===================== */
/* STACK & CARDS */
/* ===================== */

.third-stack {
  position: relative;
  top: -20px;
  width: 100%;
  height: 100%;
}

.third-card {
  position: absolute;
  top: 40%;
  left: 50%;
  transform-origin: bottom center;
  transition: transform 0.6s ease;
}

.third-card img {
  display: block;
  max-width: 620px;
  max-height: 720px;
  width: 100%;
  height: auto;
}

/* CENTER — elevated */
.third-active {
  transform: translate(-50%, -45%) rotate(0deg) scale(1);
  z-index: 7;
}

/* INNER SIDES — slightly lower */
.third-left1 {
  transform: translate(-85%, -45%) rotate(-22deg) scale(0.96);
  z-index: 5;
}

.third-right1 {
  transform: translate(-15%, -45%) rotate(22deg) scale(0.96);
  z-index: 5;
}

/* OUTER SIDES — lowest */
.third-left2 {
  transform: translate(-130%, -35%) rotate(-40deg) scale(0.88);
  z-index: 4;
}

.third-right2 {
  transform: translate(30%, -35%) rotate(40deg) scale(0.88);
  z-index: 4;
}




/* ===================== */
/* NAV */
/* ===================== */

.third-nav {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  z-index: 20;
}

.third-prev { left: -500px; }
.third-next { right: -500px; }

/* ===================== */
/* CAPTION & DOTS */
/* ===================== */

.third-caption {
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  color: #fff;
  margin-top: -50px;
}

.third-indicators {
  display: flex;
  gap: 10px;
  margin-bottom: 50px;

}

.third-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}

.third-dot.third-active-dot {
  background: #fff;
  transform: scale(1.3);
}

/* ===================== */
/* SHAPE & BUTTON */
/* ===================== */

.shape {
  position: absolute;
  top: -56%;
  left: 0;
  width: 100%;
  object-fit: cover;
  z-index: 2;
}

.Circularbutton {
  position: absolute;
  top: 98%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(90px, 20vw, 250px);
  animation: rotateClockwise 4s linear infinite;
  z-index: 3;
}

@keyframes rotateClockwise {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ===================== */
/* MOBILE */
/* ===================== */

@media (max-width: 425px) {
  .third-section{
    transform: translateY(-35px);
  }
  .third-stack {
    position: relative;
    top: 120px;
    width: 100%;
    height: 100%;
  }
  .third-carousel { 
   height: 420px;
   position: relative;
   top: -210px;     /* 👈 moves it UP */
   margin-top: 0; /* reset push-down */
  }
  .third-card img {
   max-width: 80px;
   max-height: 220px;
  }
  .third-prev { left: 8px; }
  .third-next { right: 8px; }
  .third-caption {
    font-size: 14px;
    position: relative;
    top: -420px;     /* 👈 moves it UP */
    margin-top: 0; /* reset push-down */
  }
  .third-indicators {
    position: relative;
    top: -430px;     /* 👈 moves it UP */
    margin-top: 0; /* reset push-down */
  }
  .third-dot {
  width: 5px;
  height: 5px;
}
  .thirdtitle h2 {
    font-size: 15px;
    position: relative;
    top: -60px;     /* 👈 moves it UP */
    margin-top: 0; /* reset push-down */
  }
  .thirdtitle h1 {
    font-size: 12px;
    position: relative;
    top: -70px;     /* 👈 moves it UP */
    margin-top: 0; /* reset push-down */
  }
  .shape { 
    top: -20%; 
    left: -5%;
    width: 110%;
  }
  .Circularbutton {
  position: absolute;
  top: 24%;
  margin-top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(50px, 14vw, 200px); /* 👈 smaller */
  animation: rotateClockwise 4s linear infinite;
  z-index: 2;
}
}

@media (max-width: 375px) {
  .third-carousel { height: 380px; }
  .third-card img { max-width: 220px; max-height: 300px; }
}

@media (max-width: 320px) {
  .third-carousel { height: 340px; }
  .third-card img { max-width: 200px; max-height: 260px; }
}


/* ============================= */
@media (min-width: 375px) and (max-width: 428px) {
  .third-section {
    transform: translateY(-35px);
  }

  .thirdtitle {
    margin: -80px auto 0;
  }

  .thirdtitle h2 {
   font-size: 14px;
   position: relative;
   top: -55px;
   margin-top: 0;
  }

  .thirdtitle h1 {
    font-size: 11px;
    position: relative;
    top: -100px;
 
  }

  .third-carousel {
    height: 400px;
    position: relative;
    top: -210px;
    margin-top: 0;
  }

  .third-card img {
    max-width: 80px;
    max-height: 210px;
  }

  .third-nav {
    margin-top: 135px;
    width: 38px;
    height: 38px;
    font-size: 16px;
  }

  .third-prev {
    left: 6px;
  }

  .third-next {
    right: 6px;
  }

  .third-caption {
    font-size: 13px;
    position: relative;
    top: -280px;
    margin-top: 0;
  }

  .third-indicators {
    position: relative;
    top: -290px;
    margin-top: 0;
    gap: 8px;
    margin-bottom: 40px;
  }

  .third-dot {
    width: 4px;
    height: 4px;
  }

  .shape {
    top: -20%;
    left: -5%;
    width: 110%;
  }

  .Circularbutton {
    position: absolute;
    margin-top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(50px, 14vw, 200px);
    animation: rotateClockwise 4s linear infinite;
    z-index: 2;
  }
}

/* iPhone 12 Pro Max, 13 Pro Max, 14 Plus (428px) */
@media (min-width: 426px) and (max-width: 428px) {
  .third-carousel {
    height: 420px;
  }

  .third-card img {
    max-width: 80px;
    max-height: 220px;
  }

  .thirdtitle h2 {
    font-size: 15px;
  }

  .thirdtitle h1 {
    font-size: 12px;
  }

  .third-caption {
    font-size: 14px;
  }
}