/* Homepage scene styles (also used by group-companies.html), split out of
   style.css so the inner pages don't download them. Loaded after style.css. */
.panel {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: calc(2.78 * var(--u));
  position: relative;
  margin-bottom: calc(5.56 * var(--u));
}



.scene3 {
  min-height: min(calc(57 * var(--u)), 100vh);
  position: relative;
  margin-bottom: 0px;
  z-index: 10;
}

.scene2 {
  margin-top: calc(3.47 * var(--u));
  /* Reduced space to move scene2 up */
}

.scene4 {
  margin-bottom: 0px;
  /* Add space between scene4 and scene5 */
  padding-top: 0px;
  /* Add space at top */
  margin-top: 0px;
  /* Remove top margin for spacing after scene3 */
  height: min(calc(62.5 * var(--u)), 100vh);
}

.scroll-text {
  position: absolute;
  bottom: calc(1.74 * var(--u));
  /* pushes it below the circles */
  left: 50%;
  transform: translateX(-50%);
  font-size: calc(1.11 * var(--u));
  letter-spacing: 1px;
  pointer-events: none;
  color: var(--color-grey-text);
  opacity: 1;
  transition: opacity 0.3s ease-out;
}

.circle {
  position: relative;
  width: calc(3.12 * var(--u));
  height: calc(3.12 * var(--u));
  top: calc(3 * var(--u));
}

/* BACK CIRCLE — FULL */
.circle-back {
  width: calc(3.12 * var(--u));
  height: calc(3.12 * var(--u));
  border-radius: 50%;
  background: url('./assets/circle.webp');
  background-size: 110% 110%;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 7;
  border: none;
  outline: none;
}

/* FRONT CIRCLE — HALF */
.circle-front {
  width: calc(3.12 * var(--u));
  height: calc(3.12 * var(--u));
  border-radius: 50%;
  background: url('./assets/circle.webp');
  background-size: 110% 110%;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}

.final-text {
  position: absolute;
  top: 55%;
  left: 50%;
  width: 40%;
  max-width: calc(19.44 * var(--u));
  height: calc(12.5 * var(--u));
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: white;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: calc(1.39 * var(--u));
  line-height: 1.5;
  text-align: left;
  white-space: pre-wrap;
  z-index: 10;
  opacity: 1;
}

.final-text .line {
  /* display: flex;            word-by-word animation needs flex for inline spans */
  /* justify-content: center; horizontally center words in line */
  /* margin: 2px 0; */
  /* white-space: nowrap; */
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  /* ensure lines take full width for consistent alignment */
}

.final-text .line.indent {
  padding-left: calc(3.47 * var(--u));
}

.final-text .line span {
  display: inline-block;
}

/* Typewriter animation styling */
.typewriter span {
  border-right: 2px solid white;
  animation: blink 0.7s infinite;
}

@keyframes blink {

  0%,
  50% {
    border-color: white;
  }

  51%,
  100% {
    border-color: transparent;
  }
}



.circle-left {
  z-index: 12;
  opacity: 0;
  mix-blend-mode: multiply;
}

.circle-right {
  z-index: 12;
  opacity: 0;
  mix-blend-mode: multiply;
}

.circle-center {
  z-index: 8;
  opacity: 0;
}

/* Hero text in center */
.hero-text {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, 0);
  color: white;
  font-size: var(--font-hero);
  text-align: left;
  opacity: 0;
  z-index: 10;
  color: var(--color-red);
  font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
  font-weight: 700;
  letter-spacing: -0.045em;
}

.hero-text span {
  display: block;
  white-space: nowrap;
  color: var(--color-blue2);
  font-size: var(--font-hero);
  padding-left: calc(var(--spacing-unit) * 9);
  padding-right: calc(var(--spacing-unit) * 0.5);
  opacity: 0;
  font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
  font-weight: 700;
  margin-top: calc(var(--spacing-unit) * -1);
  letter-spacing: -0.045em;
  z-index: 10;
}

/* Hero text in center - 2 */
.hero-text-scene2 {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, 0);
  color: white;
  font-size: var(--font-hero);
  text-align: left;
  opacity: 0;
  z-index: 10;
  color: var(--color-red);
  font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
  font-weight: 700;
  letter-spacing: -0.045em;
}

.hero-text-scene2 span {
  display: block;
  white-space: nowrap;
  color: var(--color-blue2);
  font-size: var(--font-hero);
  margin-left: calc(var(--spacing-unit) * 15);
  padding-right: 0;
  opacity: 0;
  font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
  font-weight: 700;
  margin-top: calc(var(--spacing-unit) * -1);
  letter-spacing: -0.05em;
  z-index: 10;
}

/* Center circle back image */
.circle-back-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  top: 0;
  left: 0;
  background-image: url('./assets/image01.webp');
  /* replace with actual */
  background-size: inherit;
  /* background-position: center top; */
  background-position: center;
  opacity: 0;
  z-index: 7;
  /* filter: brightness(0.9); */
}

/* Red circle overlay with multiply blend mode */
.red-circle-overlay {
  position: fixed;
  top: calc(50% + calc(3 * var(--u)));
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--circle-size);
  height: var(--circle-size);
  background-color: #E63946;
  border-radius: 50%;
  opacity: 0;
  mix-blend-mode: multiply;
  z-index: -1;
  pointer-events: none;
}

.circle-back-scene2-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  top: 0;
  left: 0;
  background-image: url('./assets/image02.webp');
  /* replace with actual */
  background-size: inherit;
  background-position: center;
  opacity: 1;
  /* mix-blend-mode: multiply; */
}

.circle-back.top {
  opacity: 0.9;
  z-index: 3;
  mix-blend-mode: multiply;
}


.circle-back.back {
  opacity: 1;
  z-index: 2;
  /* mix-blend-mode: multiply; */
}


/* Journey text styling */
.journey-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Gontserrat-Medium', sans-serif;
  font-weight: 500;
  font-size: var(--font-small);
  line-height: 1.2;
  text-align: left;
  color: white;
  opacity: 0;
  z-index: 10;
  pointer-events: none;
  max-width: clamp(calc(20.83 * var(--u)), calc(50 * var(--u)), calc(41.67 * var(--u)));
  padding: 0 clamp(calc(3.47 * var(--u)), calc(10 * var(--u)), calc(6.94 * var(--u)));
  letter-spacing: -0.05em;
}

/* Scene2 scrolling text */
.scene2-scroll-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 5;
  pointer-events: none;
}

.founding-text {
  font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
  font-weight: 700;
  font-size: calc(1.2 * var(--u));
  color: white;
  opacity: 0;
  margin-bottom: calc(2.43 * var(--u));
  line-height: 1;
  margin-left: calc(7 * var(--u));
  text-align: left;
  max-width: calc(35 * var(--u));
  margin-top: calc(2.43 * var(--u));
}

.growth-text {
  font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
  font-weight: 500;
  font-size: var(--font-small);
  line-height: 1.2;
  text-align: left;
  color: white;
  opacity: 0;
  z-index: 7;
  pointer-events: none;
  max-width: calc(35 * var(--u));
  margin-left: calc(7 * var(--u));
  letter-spacing: -0.05em;
}

/* Scene 3 - Red circle and DA-3 image */
.scene3-circle-container {
  position: absolute;
  top: calc(4.86 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  width: calc(22.22 * var(--u));
  height: calc(22.22 * var(--u));
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 20;
}

.scene3-red-circle {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  border-radius: 50%;
  background-image: url('./assets/circle.webp');
  background-size: 110% 110%;
  background-position: center;
  position: absolute;
  top: calc(19.36 * var(--u));
  left: calc(50% - calc(8 * var(--u)));
  z-index: 60;
  opacity: 0.9;
  border: none;
  outline: none;
  mix-blend-mode: normal;
}

.scene3-image {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  border-radius: 50%;
  background-image: url('./assets/image03.webp');
  background-size: cover;
  background-position: center;
  position: absolute;
  top: calc(18.36 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  overflow: hidden;
  opacity: 1;
}

.scene3-group-text {
  position: absolute;
  left: 20%;
  color: #ec1c24;
  font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
  font-weight: 700;
  font-size: calc(4.4 * var(--u));
  opacity: 0;
  z-index: 60;
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: -0.05em;
}

.scene3-ventures-text {
  position: absolute;
  left: 44%;
  color: var(--color-blue2);
  font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
  font-weight: 700;
  font-size: calc(4.4 * var(--u));
  opacity: 0;
  z-index: 60;
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: -0.05em;
}

.scene3-red-circle-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  text-align: center;
  color: #fff;
  font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
  font-weight: 400;
  font-size: calc(0.85 * var(--u));
  line-height: 1.5;
  opacity: 0;
  z-index: 61;
  pointer-events: none;
  letter-spacing: -0.05em;
}

/* Grey Circles Section */
.grey-circles-section {
  height: 0px;
  background: #e5e6e7;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding-bottom: calc(1.39 * var(--u));
  padding-top: 0px;
  margin-bottom: calc(-11 * var(--u));
  margin-top: calc(-4 * var(--u));
  overflow: visible;
  z-index: 55;
}

.grey-circles-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 0;
  width: 100%;
  z-index: 10;
  position: absolute;
  top: calc(2 * var(--u));
  left: 0;
  right: 0;
}

.grey-circle {
  width: calc(12.5 * var(--u));
  height: calc(12.5 * var(--u));
  border-radius: 50%;
  background-image: url('./assets/CircleGrey.webp');
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  cursor: pointer;
  transition: transform 0.3s ease, opacity 0.3s ease;
  flex-shrink: 0;
}

.grey-circle:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

.circle-logo {
  width: calc(5.56 * var(--u));
  height: auto;
  object-fit: contain;
}

.grey-circle:first-child .circle-logo {
  width: calc(9.03 * var(--u));
}

.grey-circle:nth-child(2) .circle-logo {
  width: calc(4.86 * var(--u));
}

.grey-circle:nth-child(4) .circle-logo {
  width: calc(6.94 * var(--u));
}

.grey-circle:nth-child(5) .circle-logo {
  width: calc(10 * var(--u));
}

/* Scene 4 - Two small circles animating apart */
.scene4-circles-container {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100 * var(--u));
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  z-index: 15;
}

.scene4-image-circle {
  width: calc(32.5 * var(--u));
  height: calc(32.5 * var(--u));
  border-radius: 50%;
  background-image: url('./assets/image04.webp');
  background-size: 110% 110%;
  background-position: center;
  position: absolute;
  top: calc(19.95 * var(--u));
  /* left: calc(50% + calc(11.88 * var(--u))); */
  right: 5%;
  transform: translate(-50%, -50%);
  z-index: 5;
  opacity: 1;
}

.scene4-red-circle {
  width: calc(32.5 * var(--u));
  height: calc(32.5 * var(--u));
  border-radius: 50%;
  background-image: url('./assets/circle.webp');
  background-size: 110% 110%;
  background-position: center;
  position: absolute;
  /* left: calc(50% + calc(11.88 * var(--u))); */
  right: 5%;
  transform: translate(-50%, -50%);
  top: calc(19.95 * var(--u));
  z-index: 10;
  opacity: 0.9;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  outline: none;
  mix-blend-mode: normal;
}

.scene4-grey-circle {
  width: calc(10.69 * var(--u));
  height: calc(10.69 * var(--u));
  border-radius: 50%;
  background-image: url('./assets/CircleGrey.webp');
  background-size: cover;
  background-position: center;
  position: absolute;
  left: 62.5%;
  top: 30%;
  transform: translate(-50%, -50%);
  z-index: 9;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.scene4-grey-logo {
  width: calc(7 * var(--u));
  object-fit: contain;
  opacity: 1;
  position: relative;
  top: calc(-1.65 * var(--u));
}

.scene4-red-text {
  position: absolute;
  width: 80%;
  text-align: center;
  opacity: 0;
  top: 50%;
  left: 50%;
  font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
  pointer-events: auto;
}

.scene4-red-heading {
  font-size: clamp(10px, calc(1 * var(--u)), 20px);
  font-weight: 700;
  color: #fff;
  margin-bottom: calc(0.66 * var(--u));
  letter-spacing: -0.05em;
}

.scene4-red-desc {
  font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
  font-weight: 500;
  font-size: clamp(9px, calc(0.8 * var(--u)), 18px);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
}

.scene4-read-more,
.scene5-main-read-more,
.scene7-main-read-more {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  opacity: 0.9;
  pointer-events: auto;
}

.read-more-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  opacity: 0.9;
  pointer-events: auto;
}

.read-more-icon {
  height: calc(1.67 * var(--u));
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

.read-less-img {
  display: none;
}

.read-more-btn.expanded .read-more-img,
.scene4-read-more.expanded .read-more-img,
.scene5-main-read-more.expanded .read-more-img,
.scene7-main-read-more.expanded .read-more-img {
  display: none;
}

.read-more-btn.expanded .read-less-img,
.scene4-read-more.expanded .read-less-img,
.scene5-main-read-more.expanded .read-less-img,
.scene7-main-read-more.expanded .read-less-img {
  display: block;
}

.scene4-new-text {
  position: absolute;
  right: calc(50% + calc(6.58 * var(--u)));
  top: calc(3.47 * var(--u));
  width: calc(26.6 * var(--u));
  font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
  font-weight: 700;
  font-size: calc(3.3 * var(--u));
  line-height: 1;
  letter-spacing: -0.05em;
  z-index: 11;
  pointer-events: none;
  text-align: left;
}

.scene4-text-group {
  opacity: 0;
}

.scene4-new-line {
  margin-bottom: 0;
}

.text-red {
  color: var(--color-red);
}

.text-blue {
  color: var(--color-blue);
}

.scene5-new-text {
  position: absolute;
  left: 38%;
  top: 0;
  font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
  font-weight: 700;
  font-size: calc(3.63 * var(--u));
  line-height: 1.1;
  letter-spacing: -0.05em;
  z-index: 11;
  pointer-events: none;
  text-align: right;
}

.scene5-text-group {
  opacity: 0;
}

.scene5-new-line {
  margin-bottom: 0;
}

.scene7-new-text {
  position: absolute;
  left: 45%;
  top: 5%;
  font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
  font-weight: 700;
  font-size: calc(3.63 * var(--u));
  line-height: 1.1;
  letter-spacing: -0.05em;
  z-index: 11;
  pointer-events: none;
  text-align: right;
}

.scene7-text-group {
  opacity: 0;
}

.scene7-new-line {
  margin-bottom: 0;
}

.scene6-new-text {
  position: absolute;
  right: calc(50% + calc(10 * var(--u)));
  top: 3%;
  width: calc(32 * var(--u));
  font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
  font-weight: 700;
  font-size: calc(3.3 * var(--u));
  line-height: 1;
  letter-spacing: -0.05em;
  z-index: 11;
  pointer-events: none;
  text-align: left;
}

.scene6-text-group {
  opacity: 0;
}

.scene6-new-line {
  margin-bottom: 0;
}

.scene4-small-red-circle {
  width: calc(5.61 * var(--u));
  height: calc(5.61 * var(--u));
  border-radius: 50%;
  background-image: url('./assets/circle.webp');
  background-size: 100% 100%;
  background-position: center;
  position: absolute;
  right: 5%;
  top: 13%;
  z-index: 20;
  opacity: 1;
}

.scene4-small-red-circle-right {
  width: calc(4.95 * var(--u));
  height: calc(4.95 * var(--u));
  border-radius: 50%;
  background-image: url('./assets/circle.webp');
  background-size: 100% 100%;
  background-position: center;
  position: absolute;
  right: -5.5%;
  top: 30%;
  z-index: 20;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.scene4-small-red-circle-logo {
  width: calc(6.60 * var(--u));
  height: calc(6.60 * var(--u));
  object-fit: contain;
  opacity: 0;
}

/* Reduce height and gap for scenes 5-8 */
.scene5,
.scene6,
.scene7 {
  height: min(calc(62.5 * var(--u)), 100vh);
}

.scene8,
.scene9 {
  height: calc(55.56 * var(--u));
}

/* ===== Scene 8 (duplicate of scene4 layout) ===== */
.scene8 {
  margin-bottom: calc(8 * var(--u));
  padding-top: 0px;
  margin-top: 0px;
  height: min(calc(62.5 * var(--u)), 100vh);
}

.scene8-circles-container {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100 * var(--u));
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  z-index: 15;
}

.scene8-image-circle {
  width: calc(32.5 * var(--u));
  height: calc(32.5 * var(--u));
  border-radius: 50%;
  background-image: url('./assets/image0008.webp');
  background-size: 110% 110%;
  background-position: center;
  position: absolute;
  top: calc(19.95 * var(--u));
  right: 5%;
  transform: translate(-50%, -50%);
  z-index: 5;
  opacity: 1;
}

.scene8-red-circle {
  width: calc(32.5 * var(--u));
  height: calc(32.5 * var(--u));
  border-radius: 50%;
  background-image: url('./assets/circle.webp');
  background-size: 110% 110%;
  background-position: center;
  position: absolute;
  right: 5%;
  transform: translate(-50%, -50%);
  top: calc(19.95 * var(--u));
  z-index: 10;
  opacity: 0.9;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  outline: none;
  mix-blend-mode: normal;
}

.scene8-grey-circle {
  width: calc(10.69 * var(--u));
  height: calc(10.69 * var(--u));
  border-radius: 50%;
  background-image: url('./assets/CircleGrey.webp');
  background-size: cover;
  background-position: center;
  position: absolute;
  left: 62.5%;
  top: 30%;
  transform: translate(-50%, -50%);
  z-index: 9;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.scene8-grey-logo {
  width: calc(9 * var(--u));
  object-fit: contain;
  opacity: 1;
  position: relative;
  top: calc(-1 * var(--u));
}

.scene8-red-text {
  position: absolute;
  width: 80%;
  text-align: center;
  opacity: 0;
  top: 50%;
  left: 50%;
  font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
  pointer-events: auto;
}

.scene8-red-heading {
  font-size: clamp(10px, calc(1 * var(--u)), 20px);
  font-weight: 700;
  color: #fff;
  margin-bottom: calc(0.66 * var(--u));
  letter-spacing: -0.05em;
}

.scene8-red-desc {
  font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
  font-weight: 500;
  font-size: clamp(9px, calc(0.8 * var(--u)), 18px);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
}

.scene8-read-more {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  opacity: 0.9;
  pointer-events: auto;
}

.scene8-read-more.expanded .read-more-img {
  display: none;
}

.scene8-read-more.expanded .read-less-img {
  display: block;
}

.scene8-new-text {
  position: absolute;
  right: calc(50% + calc(6.58 * var(--u)));
  top: calc(3.47 * var(--u));
  width: calc(26.6 * var(--u));
  font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
  font-weight: 700;
  font-size: calc(3.3 * var(--u));
  line-height: 1;
  letter-spacing: -0.05em;
  z-index: 11;
  pointer-events: none;
  text-align: left;
}

.scene8-text-group {
  opacity: 0;
}

.scene8-new-line {
  margin-bottom: 0;
}

.scene8-small-red-circle {
  width: calc(5.61 * var(--u));
  height: calc(5.61 * var(--u));
  border-radius: 50%;
  background-image: url('./assets/circle.webp');
  background-size: 100% 100%;
  background-position: center;
  position: absolute;
  right: 5%;
  top: 13%;
  z-index: 20;
  opacity: 1;
}

.scene8-small-red-circle-right {
  width: calc(4.95 * var(--u));
  height: calc(4.95 * var(--u));
  border-radius: 50%;
  background-image: url('./assets/circle.webp');
  background-size: 100% 100%;
  background-position: center;
  position: absolute;
  right: -5.5%;
  top: 30%;
  z-index: 20;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.scene8-small-red-circle-logo {
  width: calc(6.60 * var(--u));
  height: calc(6.60 * var(--u));
  object-fit: contain;
  opacity: 0;
}


.scene5 {
  margin-top: 0;
}

.pin-spacer,
.gsap-pin-spacer {
  pointer-events: none !important;
}


/* Scene 5 - Red circle left, Image right */
.scene5-circles-container {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100 * var(--u));
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  z-index: 15;
  pointer-events: none;
}

.scene5-red-circle {
  width: calc(32.5 * var(--u));
  height: calc(32.5 * var(--u));
  border-radius: 50%;
  background-image: url('./assets/circle.webp');
  background-size: 110% 110%;
  background-position: center;
  position: absolute;
  left: calc(50% - calc(29 * var(--u)));
  transform: translate(0, -50%);
  top: calc(19.95 * var(--u));
  z-index: 10;
  opacity: 0.9;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  outline: none;
  mix-blend-mode: normal;
  pointer-events: auto;
}

.scene5-grey-circle {
  width: calc(10.69 * var(--u));
  height: calc(10.69 * var(--u));
  border-radius: 50%;
  background-image: url('./assets/CircleGrey.webp');
  background-size: cover;
  background-position: center;
  position: absolute;
  left: 37.25%;
  top: 30%;
  transform: translate(-50%, -50%);
  z-index: 9;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.scene5-grey-logo {
  width: calc(3.85 * var(--u));
  height: calc(3.85 * var(--u));
  object-fit: contain;
  opacity: 1;
  position: relative;
  top: calc(-1.65 * var(--u));
}

.scene5-image-circle {
  width: calc(32.5 * var(--u));
  height: calc(32.5 * var(--u));
  border-radius: 50%;
  background-image: url('./assets/image005.webp');
  background-size: 100% 100%;
  background-position: center;
  position: absolute;
  top: calc(19.95 * var(--u));
  left: calc(50% - calc(29 * var(--u)));
  transform: translate(0, -50%);
  z-index: 5;
  opacity: 1;
  pointer-events: none;
}

.scene5-text {
  position: relative;
  width: 80%;
  text-align: center;
  opacity: 0;
  transform: translateY(60px);
  font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
  pointer-events: auto;
  margin-top: calc(-2.97 * var(--u));
  z-index: 10;
}

.scene5-subcompany-bg {
  position: absolute;
  bottom: calc(4.82 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  opacity: 0;
  z-index: 5;
  object-fit: contain;
  pointer-events: none;
}

.scene5-subcompany-logos {
  position: absolute;
  bottom: calc(5.61 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(1.32 * var(--u));
  z-index: 6;
  opacity: 0;
  pointer-events: none;
}

.scene5-logo {
  height: calc(4.95 * var(--u));
  width: auto;
  object-fit: contain;
  pointer-events: auto;
  cursor: pointer;
}

.scene5-logo-separator {
  height: calc(5.28 * var(--u));
  width: auto;
  object-fit: contain;
}

.scene5-right-arrows {
  position: absolute;
  bottom: calc(2.97 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(7.92 * var(--u));
  z-index: 6;
  opacity: 0;
  pointer-events: none;
}

.scene5-convention-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: calc(0.66 * var(--u));
  z-index: 15;
  opacity: 0;
  text-align: center;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.scene5-red-circle.show-convention .scene5-convention-content {
  opacity: 1;
  pointer-events: auto;
}

.scene5-red-circle.show-convention .scene5-convention-arrows,
.scene5-red-circle.show-convention .scene5-convention-arrows button {
  pointer-events: auto;
}

.scene5-ssilp-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: calc(0.66 * var(--u));
  z-index: 15;
  opacity: 0;
  text-align: center;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.scene5-red-circle.show-ssilp .scene5-ssilp-content {
  opacity: 1;
  pointer-events: auto;
}

.scene5-red-circle.show-ssilp .scene5-ssilp-arrows,
.scene5-red-circle.show-ssilp .scene5-ssilp-arrows button {
  pointer-events: auto;
}

.scene5-convention-text {
  width: calc(23.09 * var(--u));
}

.scene5-convention-arrows {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(2.64 * var(--u));
  position: relative;
  z-index: 20;
}

.scene5-ssilp-arrows {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(2.64 * var(--u));
  position: relative;
  z-index: 20;
}

.scene5-arrow-back img {
  transform: scaleX(-1);
}

.scene5-arrow-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
  pointer-events: auto;
}

.scene5-arrow-btn.scene5-arrow-left {
  margin-right: calc(1.98 * var(--u));
}

.scene5-arrow-btn:hover {
  transform: scale(1.1);
}

.scene5-arrow-btn img {
  height: calc(0.53 * var(--u));
  width: auto;
  object-fit: contain;
}

.scene5-heading {
  font-size: clamp(10px, calc(1 * var(--u)), 20px);
  font-weight: 700;
  color: #fff;
  margin-bottom: calc(0.66 * var(--u));
  letter-spacing: -0.05em;
  white-space: normal;
  word-wrap: break-word;
  font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
}

.scene5-desc {
  font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
  font-weight: 500;
  font-size: clamp(9px, calc(0.8 * var(--u)), 18px);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
}

.desc-expanded {
  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
  pointer-events: none;
}

.scene5-small-red-circle {
  width: calc(4.95 * var(--u));
  height: calc(4.95 * var(--u));
  border-radius: 50%;
  background-image: url('./assets/circle.webp');
  background-size: 100% 100%;
  background-position: center;
  z-index: 0;
}

.scene5-grey-outline-circle {
  position: fixed;
  top: calc(-6.59 * var(--u));
  left: calc(80% - calc(6.94 * var(--u)));
  width: calc(11.88 * var(--u));
  height: calc(11.88 * var(--u));
  border-radius: 50%;
  border: 2px solid #9c9fa1;
  background: transparent;
  z-index: 5;
  pointer-events: none;
}

.scene5-descending-red-circle {
  position: fixed;
  top: calc(-32 * var(--u));
  right: 5%;
  left: auto;
  width: calc(4.95 * var(--u));
  height: calc(4.95 * var(--u));
  border-radius: 50%;
  background-image: url('./assets/circle.webp');
  background-size: 100% 100%;
  background-position: center;
  z-index: 8;
  opacity: 0;
  pointer-events: none;
}

.scene5-top-left-circle {
  position: fixed;
  top: calc(11.22 * var(--u));
  /* right: -300px; */
  width: calc(4.95 * var(--u));
  height: calc(4.95 * var(--u));
  border-radius: 50%;
  background-image: url('./assets/circle.webp');
  background-size: 100% 100%;
  background-position: center;
  z-index: 2;
  transition: border-radius 0.3s ease;
}

/* Arrow state classes for Scene 5/6 content swap */
.scene5-red-circle.show-convention .scene5-subcompany-bg,
.scene5-red-circle.show-convention .scene5-subcompany-logos,
.scene5-red-circle.show-convention .scene5-right-arrows {
  display: none !important;
}

.scene5-red-circle.show-convention .scene5-convention-arrows {
  display: flex !important;
  pointer-events: auto;
}

.scene5-red-circle.show-convention .scene5-arrow-forward {
  display: none !important;
}

.scene5-red-circle.show-ssilp .scene5-subcompany-bg,
.scene5-red-circle.show-ssilp .scene5-subcompany-logos,
.scene5-red-circle.show-ssilp .scene5-right-arrows {
  display: none !important;
}

.scene5-red-circle.show-ssilp .scene5-ssilp-arrows {
  display: flex !important;
  pointer-events: auto;
}

.scene5-red-circle.show-ssilp .scene5-ssilp-arrows .scene5-arrow-forward {
  display: none !important;
}

.scene5-red-circle.show-convention .scene5-text {
  display: none;
  opacity: 0;
  pointer-events: none;
}

.scene5-red-circle.show-ssilp .scene5-text {
  display: none;
  opacity: 0;
  pointer-events: none;
}

.scene5-red-circle.show-convention .scene5-heading,
.scene5-red-circle.show-convention .scene5-desc {
  opacity: 1;
}

.scene5-red-circle.show-ssilp .scene5-heading,
.scene5-red-circle.show-ssilp .scene5-desc {
  opacity: 1;
}

.scene5-grey-circle.show-convention .scene5-grey-logo {
  display: none;
  opacity: 0;
}

.scene5-grey-circle.show-ssilp .scene5-grey-logo {
  display: none;
  opacity: 0;
}

.scene5-grey-circle.show-convention::after {
  content: '';
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(5 * var(--u));
  height: calc(5 * var(--u));
  background: url('./assets/Shreeshakti_Convention.png') no-repeat center;
  background-size: contain;
  z-index: 10;
  opacity: 1;
}

.scene5-grey-circle.show-ssilp::after {
  content: '';
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(5 * var(--u));
  height: calc(5 * var(--u));
  background: url('./assets/SHREESHAKTI-logo.png') no-repeat center;
  background-size: contain;
  z-index: 10;
  opacity: 1;
}

.scene5-new-text.show-convention {
  display: block;
  text-align: right;
  width: calc(28 * var(--u));
}

.scene5-new-text.show-convention .scene5-group-1 {
  display: block !important;
  opacity: 1 !important;
}

.scene5-new-text.show-convention .scene5-group-2 {
  display: block !important;
  opacity: 1 !important;
}


.scene5-new-text.show-ssilp {
  width: calc(28 * var(--u));
}

.scene5-new-text.show-ssilp .scene5-group-1 {
  display: block !important;
  opacity: 1 !important;
}

.scene5-new-text.show-ssilp .scene5-group-2 {
  display: block !important;
  opacity: 1 !important;
}

.scene6 {
  isolation: isolate;
}


/* Scene 6 - Image left, Red circle right */
.scene6-circles-container {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100 * var(--u));
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  z-index: 15;
  pointer-events: none;
}

.scene6-image-circle {
  width: calc(32.5 * var(--u));
  height: calc(32.5 * var(--u));
  border-radius: 50%;
  background-image: url('./assets/image06.webp');
  background-size: 110% 110%;
  background-position: center;
  position: absolute;
  top: calc(19.95 * var(--u));
  /* left: calc(50% + calc(11.88 * var(--u))); */
  right: 5%;
  transform: translate(-50%, -50%);
  z-index: 5;
  opacity: 1;
  pointer-events: none;
}

.scene6-red-circle {
  width: calc(32.5 * var(--u));
  height: calc(32.5 * var(--u));
  border-radius: 50%;
  background-image: url('./assets/circle.webp');
  background-size: 110% 110%;
  background-position: center;
  position: absolute;
  top: calc(19.95 * var(--u));
  /* left: calc(50% + calc(11.88 * var(--u))); */
  right: 5%;
  transform: translate(-50%, -50%);
  z-index: 10;
  opacity: 0.9;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  outline: none;
  mix-blend-mode: normal;
  pointer-events: auto;
  overflow: hidden;
}

.scene6-red-text {
  position: absolute;
  width: 80%;
  text-align: center;
  opacity: 0;
  font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
  pointer-events: none;
  top: calc(6.59 * var(--u));
  left: 50%;
  transform: translateX(-50%) translateY(60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.scene6-red-text.showing-nsk {
  top: 50% !important;
  transform: translateX(-50%) translateY(-50%) !important;
}

.scene6-red-heading {
  font-size: clamp(10px, calc(1 * var(--u)), 20px);
  font-weight: 700;
  color: #fff;
  margin-bottom: calc(0.66 * var(--u));
  letter-spacing: -0.05em;
}

.scene6-red-desc {
  font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
  font-weight: 500;
  font-size: clamp(9px, calc(0.8 * var(--u)), 18px);
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
}

.scene6-grey-circle {
  width: calc(10.69 * var(--u));
  height: calc(10.69 * var(--u));
  border-radius: 50%;
  background-image: url('./assets/CircleGrey.webp');
  background-size: cover;
  background-position: center;
  position: absolute;
  left: 62.5%;
  top: 30%;
  transform: translate(-50%, -50%);
  z-index: 9;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.scene6-grey-logo {
  width: calc(5 * var(--u));
  height: calc(5 * var(--u));
  object-fit: contain;
  opacity: 1;
  position: relative;
  top: calc(-1.5 * var(--u));
}

.scene6-text {
  position: relative;
  width: calc(19.79 * var(--u));
  text-align: center;
  opacity: 0;
  transform: translateY(60px);
  font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
  pointer-events: none;
}

.scene6-subcompany-bg {
  position: absolute;
  bottom: calc(4.82 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  opacity: 0;
  z-index: 5;
  object-fit: contain;
  pointer-events: none;
}

.scene6-subcompany-logos {
  position: absolute;
  bottom: calc(5.61 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  width: calc(30.4 * var(--u));
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(1.32 * var(--u));
  z-index: 6;
  opacity: 0;
}

.scene6-logo {
  height: calc(5.28 * var(--u));
  width: auto;
  object-fit: contain;
}

.scene6-logo-separator {
  height: calc(3.96 * var(--u));
  width: auto;
  object-fit: contain;
}

.scene6-logo-chhatralaya {
  height: calc(1.39 * var(--u)) !important;
}


.scene6-right-arrows {
  position: absolute;
  bottom: calc(2 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(5.61 * var(--u));
  z-index: 1000;
  opacity: 0;
  pointer-events: auto;
}

.scene6-arrow-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: calc(0.69 * var(--u));
  width: calc(2.78 * var(--u));
  height: calc(2.78 * var(--u));
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
  pointer-events: auto;
  position: relative;
  z-index: 31;

}

.scene6-arrow-btn:hover {
  transform: scale(1.1);
}

.scene6-arrow-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.scene6-arrow-left img {
  transform: rotate(180deg);
}

.scene6-arrow-back {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0px;
  width: calc(1.67 * var(--u));
  height: calc(1.67 * var(--u));
  display: inline-flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: auto;
  margin-top: calc(0.56 * var(--u));
}

.scene6-small-red-circle {
  width: calc(4.95 * var(--u));
  height: calc(4.95 * var(--u));
  /* border-radius: 50%; */
  background-image: url('./assets/circle.webp');
  background-size: 100% 100%;
  background-position: center;
  position: absolute;
  right: 20%;
  top: calc(-4.95 * var(--u));
  z-index: 20;
  opacity: 1;
}

.scene6-small-red-circle-1,
.scene6-small-red-circle-2,
.scene6-small-red-circle-3 {
  width: calc(4.28 * var(--u));
  height: calc(4.28 * var(--u));
  border-radius: 50%;
  background-image: url('./assets/circle.webp');
  background-size: 100% 100%;
  background-position: center;
  position: absolute;
  top: 30%;
  z-index: 2;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.scene6-small-red-circle-1-logo,
.scene6-small-red-circle-2-logo,
.scene6-small-red-circle-3-logo {
  width: calc(4.95 * var(--u));
  height: calc(4.95 * var(--u));
  object-fit: cover;
  opacity: 0;
  border-radius: 50%;
}


.scene6-small-red-circle-1 {
  left: 62.5%;
}

.scene6-small-red-circle-2 {
  left: 62.5%;
}

.scene6-small-red-circle-3 {
  left: 62.5%;
}


.scene6-grey-outline-circle {
  position: absolute;
  top: calc(-32 * var(--u));
  left: calc(50% + calc(18.75 * var(--u)));
  width: calc(16.49 * var(--u));
  height: calc(16.49 * var(--u));
  border-radius: 50%;
  border: 2px solid #9c9fa1;
  background: transparent;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
}

.scene6-small-red-circle-right {
  width: calc(4.95 * var(--u));
  height: calc(4.95 * var(--u));
  border-radius: 50%;
  background-image: url('./assets/circle.webp');
  background-size: 100% 100%;
  background-position: center;
  position: absolute;
  left: calc(87.5 * var(--u));
  top: 20%;
  z-index: 20;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.scene6-image-circle,
.scene6-red-circle,
.scene6-grey-circle,
.scene6-grey-outline-circle,
.scene6-subcompany-bg,
.scene6-small-red-circle,
.scene6-small-red-circle-1,
.scene6-small-red-circle-2,
.scene6-small-red-circle-3,
.scene6-subcompany-logos {
  pointer-events: none;
}

.scene5-convention-arrows,
.scene5-convention-arrows *,
.scene5-ssilp-arrows,
.scene5-ssilp-arrows *,
.scene5-subcompany-logos .scene5-logo {
  pointer-events: auto;
}

.scene6-right-arrows,
.scene6-right-arrows *,
.scene6-subcompany-logos .scene6-logo {
  pointer-events: auto;
}

/* Scene 7 - Red circle left, Image right (exact duplicate of Scene 5) */
.scene7-circles-container {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100 * var(--u));
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  z-index: 15;
  pointer-events: none;
}

.scene7-red-circle {
  width: calc(32.5 * var(--u));
  height: calc(32.5 * var(--u));
  border-radius: 50%;
  background-image: url('./assets/circle.webp');
  background-size: 110% 110%;
  background-position: center;
  position: absolute;
  left: calc(50% - calc(29 * var(--u)));
  transform: translate(0, -50%);
  top: calc(19.95 * var(--u));
  z-index: 10;
  opacity: 0.9;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
  overflow: hidden;
}

.scene7-grey-circle {
  width: calc(10.69 * var(--u));
  height: calc(10.69 * var(--u));
  border-radius: 50%;
  background-image: url('./assets/CircleGrey.webp');
  background-size: cover;
  background-position: center;
  position: absolute;
  left: 37.25%;
  top: 30%;
  transform: translate(-50%, -50%);
  z-index: 9;
  display: flex;
  justify-content: center;
  align-items: center;
}

.scene7-grey-logo {
  width: calc(4.46 * var(--u));
  height: calc(4.46 * var(--u));
  object-fit: contain;
  position: relative;
  top: calc(-1.65 * var(--u));
}

.scene7-image-circle {
  width: calc(32.5 * var(--u));
  height: calc(32.5 * var(--u));
  border-radius: 50%;
  background-image: url('./assets/image08.webp');
  background-size: 110% 110%;
  background-position: center;
  position: absolute;
  top: calc(19.95 * var(--u));
  left: calc(50% - calc(29 * var(--u)));
  transform: translate(0, -50%);
  z-index: 5;
}

.scene7-text {
  position: relative;
  width: 80%;
  text-align: center;
  opacity: 0;
  transform: translateY(60px);
  font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
  pointer-events: auto;
  margin-top: calc(-2.97 * var(--u));
  z-index: 10;
}

.scene7-subcompany-bg {
  position: absolute;
  bottom: calc(4.82 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  opacity: 0;
  z-index: 5;
  object-fit: contain;
  pointer-events: none;
}

.scene7-subcompany-logos {
  position: absolute;
  bottom: calc(5.61 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  width: calc(30.4 * var(--u));
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(1.32 * var(--u));
  z-index: 6;
  opacity: 0;
  pointer-events: none;
}

.scene7-logo {
  height: calc(5.28 * var(--u));
  width: auto;
  object-fit: contain;
}

.scene7-logo-separator {
  height: calc(3.96 * var(--u));
  width: auto;
  object-fit: contain;
}

.scene7-right-arrows {
  position: absolute;
  bottom: calc(2.97 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(7.92 * var(--u));
  z-index: 6;
  opacity: 0;
  pointer-events: none;
}

.scene7-convention-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: calc(0.66 * var(--u));
  z-index: 6;
  opacity: 0;
  text-align: center;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.scene7-red-circle.show-convention {
  pointer-events: auto;
}

.scene7-red-circle.show-convention .scene7-convention-content {
  opacity: 1;
  pointer-events: auto;
}

.scene7-red-circle.show-convention .scene7-convention-content button,
.scene7-red-circle.show-convention .scene7-convention-content .read-more-btn {
  pointer-events: auto;
  cursor: pointer;
}

.scene7-red-circle.show-convention .scene7-convention-arrows,
.scene7-red-circle.show-convention .scene7-convention-arrows button {
  pointer-events: auto;
}

.scene7-ssilp-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: calc(0.69 * var(--u));
  z-index: 6;
  opacity: 0;
  text-align: center;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.scene7-red-circle.show-ssilp {
  pointer-events: auto;
}

.scene7-red-circle.show-ssilp .scene7-ssilp-content {
  opacity: 1;
  pointer-events: auto;
}

.scene7-red-circle.show-ssilp .scene7-ssilp-content button,
.scene7-red-circle.show-ssilp .scene7-ssilp-content .read-more-btn {
  pointer-events: auto;
  cursor: pointer;
}

.scene7-red-circle.show-ssilp .scene7-ssilp-arrows,
.scene7-red-circle.show-ssilp .scene7-ssilp-arrows button {
  pointer-events: auto;
}

.scene7-convention-text {
  width: calc(23.09 * var(--u));
}

.scene7-convention-arrows {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(2.64 * var(--u));
  position: relative;
  z-index: 20;
}

.scene7-ssilp-arrows {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(2.64 * var(--u));
  position: relative;
  z-index: 20;
}

.scene7-arrow-back img {
  transform: scaleX(-1);
}

.scene7-arrow-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
}

.scene7-arrow-btn.scene7-arrow-left {
  margin-right: calc(1.98 * var(--u));
}

.scene7-arrow-btn:hover {
  transform: scale(1.1);
}

.scene7-arrow-btn img {
  height: calc(0.53 * var(--u));
  width: auto;
  object-fit: contain;
}

.scene7-heading {
  font-size: clamp(10px, calc(1 * var(--u)), 20px);
  font-weight: 700;
  color: #fff;
  margin-bottom: calc(0.66 * var(--u));
  letter-spacing: -0.05em;
  white-space: normal;
  word-wrap: break-word;
  font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
}

.scene7-desc {
  font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
  font-weight: 500;
  font-size: clamp(9px, calc(0.8 * var(--u)), 18px);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
}

.scene7-small-red-circle {
  width: calc(4.95 * var(--u));
  height: calc(4.95 * var(--u));
  border-radius: 50%;
  background-image: url('./assets/circle.webp');
  background-size: 100% 100%;
  background-position: center;
}

.scene7-grey-outline-circle {
  position: absolute;
  top: calc(6.59 * var(--u));
  left: calc(20% - calc(8.58 * var(--u)));
  width: calc(18.15 * var(--u));
  height: calc(18.15 * var(--u));
  border-radius: 50%;
  border: 2px solid #9c9fa1;
  background: transparent;
  z-index: 5;
  pointer-events: none;
}

.scene7-top-left-circle {
  position: absolute;
  top: calc(11.22 * var(--u));
  width: calc(4.95 * var(--u));
  height: calc(4.95 * var(--u));
  border-radius: 50%;
  background-image: url('./assets/circle.webp');
  background-size: 100% 100%;
  background-position: center;
  z-index: 2;
  transition: border-radius 0.3s ease;
}

/* Arrow state classes for Scene 7 content swap */
.scene7-red-circle.show-convention .scene7-subcompany-bg,
.scene7-red-circle.show-convention .scene7-subcompany-logos,
.scene7-red-circle.show-convention .scene7-right-arrows {
  display: none !important;
}

.scene7-red-circle.show-convention .scene7-convention-arrows {
  display: flex !important;
  pointer-events: auto;
}

.scene7-red-circle.show-convention .scene7-arrow-forward {
  display: none !important;
}

.scene7-red-circle.show-ssilp .scene7-subcompany-bg,
.scene7-red-circle.show-ssilp .scene7-subcompany-logos,
.scene7-red-circle.show-ssilp .scene7-right-arrows {
  display: none !important;
}

.scene7-red-circle.show-ssilp .scene7-ssilp-arrows {
  display: flex !important;
  pointer-events: auto;
}

.scene7-red-circle.show-ssilp .scene7-ssilp-arrows .scene7-arrow-forward {
  display: none !important;
}

.scene7-red-circle.show-convention .scene7-text {
  display: none;
  opacity: 0;
  pointer-events: none;
}

.scene7-red-circle.show-ssilp .scene7-text {
  display: none;
  opacity: 0;
  pointer-events: none;
}

.scene7-red-circle.show-convention .scene7-heading,
.scene7-red-circle.show-convention .scene7-desc {
  opacity: 1;
}

.scene7-red-circle.show-ssilp .scene7-heading,
.scene7-red-circle.show-ssilp .scene7-desc {
  opacity: 1;
}

.scene7-grey-circle.show-convention .scene7-grey-logo {
  display: none;
  opacity: 0;
}

.scene7-grey-circle.show-ssilp .scene7-grey-logo {
  display: none;
  opacity: 0;
}

.scene7-grey-circle.show-convention::after {
  content: '';
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(5.21 * var(--u));
  height: calc(5.21 * var(--u));
  background: url('./assets/logo-TOYJOYTALES.png') no-repeat center;
  background-size: contain;
  z-index: 10;
  opacity: 1;
}

.scene7-grey-circle.show-ssilp::after {
  content: '';
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(6.94 * var(--u));
  height: calc(6.94 * var(--u));
  background: url('./assets/logo-LITTLEWINGS.webp') no-repeat center;
  background-size: contain;
  z-index: 10;
  opacity: 1;
}

.scene7-new-text.show-convention {
  display: block;
  text-align: right;
  width: calc(28 * var(--u));
}

.scene7-new-text.show-convention .scene7-group-1 {
  display: block !important;
  opacity: 1 !important;
}

.scene7-new-text.show-convention .scene7-group-2 {
  display: block !important;
  opacity: 1 !important;
}

.scene7-new-text.show-ssilp {
  width: calc(28 * var(--u));
}

.scene7-new-text.show-ssilp .scene7-group-1 {
  display: block !important;
  opacity: 1 !important;
}

.scene7-new-text.show-ssilp .scene7-group-2 {
  display: block !important;
  opacity: 1 !important;
}

/* Scene 6 image */
.scene6 .scene4-image-circle {
  background-image: url('./assets/image06.webp');
}

/* Scene 7 image */
/* .scene7 .scene4-image-circle {
  background-image: url('./assets/image07.webp');
} */

/* Scene 8 image */
.scene8-image-circle {
  background-image: url('./assets/image0008.webp');
}