@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@1,400;1,500&display=swap');

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

html, body {
  overflow-x: hidden;
}


@font-face {
  font-family: 'Gontserrat-Medium';
  src: url('./assets/fonts/Gontserrat-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}

:root {
  /* Color constants */
  --color-red: #e31d36;
  --color-blue: #3F5881;
  --color-blue2: #315e87;

  --base-scale: 1;
  --spacing-unit: 1.39vw;
  --font-base: 1.25vw;
  --font-hero: 4.5vw;
  --font-hero-scene2: 5vw;
  --font-small: 0.8vw;
  --circle-size: 37.5vw;
  --circle-size-scene2: 28.8vw;
}

body {
  font-family: Montserrat, sans-serif;
  background: #e5e6e7;
  color: white;
}

/* Sticky Menu Bar */
.fixed-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: #e5e6e7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.69vw;
  z-index: 1000;
  opacity: 1;
  pointer-events: auto;
  transition: background 0.3s ease-out;
  padding: 0.69vw 0px 0.69vw 0px;
}

.fixed-nav.visible {
  background: #e5e6e7;
  pointer-events: auto;
}

.fixed-nav-logo {
  height: 3.82vw;
  width: auto;
  object-fit: contain;
}

.fixed-nav-menu {
  height: 1.39vw;
  width: auto;
  object-fit: contain;
  cursor: pointer;
}

@media (max-width: 768px) {
  .fixed-nav-menu {
    display: none;
  }
}

/* Expanded Menu */
.expanded-menu {
  position: fixed;
  top: 0.69vw;
  left: 0;
  right: 0;
  width: 100%;
  background: #e5e6e7;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4.17vw 4.17vw 0px 4.17vw;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-150%);
  transition: all 0.3s ease-out;
  gap: 2.78vw;
  min-height: 6.94vw;
  /* background-color: #2d5d86; */
}

.expanded-menu.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.menu-close {
  flex: 0 0 3.47vw;
  font-size: 2.22vw;
  color: #77797b;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  user-select: none;
}

.menu-close:hover {
  color: var(--color-red);
  transform: scale(1.1);
}

.menu-center {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.74vw;
}

.menu-item {
  font-family: Montserrat, sans-serif;
  font-size: 0.97vw;
  font-weight: 500;
  color: #77797b;
  text-decoration: none;
  transition: color 0.3s ease;
  letter-spacing: -0.02em;
}

.menu-item:hover,
.menu-item.active {
  color: var(--color-red);
}

.menu-social {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.35vw;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.social-icon img {
  height: 1.67vw;
  width: auto;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.social-icon:hover img {
  transform: scale(1.1);
}

.panel {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2.78vw;
  position: relative;
  margin-bottom: 5.56vw;
}



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

.scene2 {
  margin-top: 3.47vw;
  /* 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(62.5vw, 100vh);
}

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

.circle {
  position: relative;
  width: 3.12vw;
  height: 3.12vw;
  top: 3vw;
}

/* BACK CIRCLE — FULL */
.circle-back {
  width: 3.12vw;
  height: 3.12vw;
  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: 3.12vw;
  height: 3.12vw;
  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: 19.44vw;
  height: 12.5vw;
  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: 1.39vw;
  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: 3.47vw;
}

.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', 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', 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', 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', 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% + 3vw);
  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(20.83vw, 50vw, 41.67vw);
  padding: 0 clamp(3.47vw, 10vw, 6.94vw);
  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', sans-serif;
  font-weight: 700;
  font-size: 1.2vw;
  color: white;
  opacity: 0;
  margin-bottom: 2.43vw;
  line-height: 1;
  margin-left: 7vw;
  text-align: left;
  max-width: 35vw;
  margin-top: 2.43vw;
}

.growth-text {
  font-family: 'Montserrat', 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: 35vw;
  margin-left: 7vw;
  letter-spacing: -0.05em;
}

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

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

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

.scene3-group-text {
  position: absolute;
  left: 20%;
  color: #ec1c24;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 4.4vw;
  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', sans-serif;
  font-weight: 700;
  font-size: 4.4vw;
  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', sans-serif;
  font-weight: 400;
  font-size: 0.85vw;
  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: 1.39vw;
  padding-top: 0px;
  margin-bottom: -11vw;
  margin-top: -4vw;
  overflow: visible;
  z-index: 55;
}

.bg-circles {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  overflow: visible;
}

.bg-circle {
  position: absolute;
  border-radius: 50%;
  opacity: 1;
  z-index: -1;
}

.bg-circle.grey {
  background-color: #a8a8a8;
}

.bg-circle.circle-asset {
  background-image: url('./assets/circle.webp');
  background-size: 110% 110%;
  background-position: center;
}

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

.grey-circle {
  width: 12.5vw;
  height: 12.5vw;
  border-radius: 50%;
  background-image: url('./assets/CircleGrey.png');
  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: 5.56vw;
  height: auto;
  object-fit: contain;
}

.grey-circle:first-child .circle-logo {
  width: 9.03vw;
}

.grey-circle:nth-child(2) .circle-logo {
  width: 4.86vw;
}

.grey-circle:nth-child(4) .circle-logo {
  width: 6.94vw;
}

.grey-circle:nth-child(5) .circle-logo {
  width: 6.94vw;
}

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

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

.scene4-red-circle {
  width: 32.5vw;
  height: 32.5vw;
  border-radius: 50%;
  background-image: url('./assets/circle.webp');
  background-size: 110% 110%;
  background-position: center;
  position: absolute;
  /* left: calc(50% + 11.88vw); */
  right: 5%;
  transform: translate(-50%, -50%);
  top: 19.95vw;
  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: 10.69vw;
  height: 10.69vw;
  border-radius: 50%;
  background-image: url('./assets/CircleGrey.png');
  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: 7vw;
  object-fit: contain;
  opacity: 1;
  position: relative;
  top: -1.65vw;
}

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

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

.scene4-red-desc {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: clamp(9px, 0.8vw, 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: 1.67vw;
  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% + 6.58vw);
  top: 3.47vw;
  width: 26.6vw;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 3.3vw;
  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', sans-serif;
  font-weight: 700;
  font-size: 3.63vw;
  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', sans-serif;
  font-weight: 700;
  font-size: 3.63vw;
  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% + 10vw);
  top: 3%;
  width: 32vw;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 3.3vw;
  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: 5.61vw;
  height: 5.61vw;
  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: 4.95vw;
  height: 4.95vw;
  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: 6.60vw;
  height: 6.60vw;
  object-fit: contain;
  opacity: 0;
}

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

.scene8,
.scene9 {
  height: 55.56vw;
}

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

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

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

.scene8-red-circle {
  width: 32.5vw;
  height: 32.5vw;
  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: 19.95vw;
  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: 10.69vw;
  height: 10.69vw;
  border-radius: 50%;
  background-image: url('./assets/CircleGrey.png');
  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: 9vw;
  object-fit: contain;
  opacity: 1;
  position: relative;
  top: -1vw;
}

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

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

.scene8-red-desc {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: clamp(9px, 0.8vw, 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% + 6.58vw);
  top: 3.47vw;
  width: 26.6vw;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 3.3vw;
  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: 5.61vw;
  height: 5.61vw;
  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: 4.95vw;
  height: 4.95vw;
  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: 6.60vw;
  height: 6.60vw;
  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: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  z-index: 15;
  pointer-events: none;
}

.scene5-red-circle {
  width: 32.5vw;
  height: 32.5vw;
  border-radius: 50%;
  background-image: url('./assets/circle.webp');
  background-size: 110% 110%;
  background-position: center;
  position: absolute;
  left: calc(50% - 29vw);
  transform: translate(0, -50%);
  top: 19.95vw;
  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: 10.69vw;
  height: 10.69vw;
  border-radius: 50%;
  background-image: url('./assets/CircleGrey.png');
  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: 3.85vw;
  height: 3.85vw;
  object-fit: contain;
  opacity: 1;
  position: relative;
  top: -1.65vw;
}

.scene5-image-circle {
  width: 32.5vw;
  height: 32.5vw;
  border-radius: 50%;
  background-image: url('./assets/image005.png');
  background-size: 100% 100%;
  background-position: center;
  position: absolute;
  top: 19.95vw;
  left: calc(50% - 29vw);
  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', sans-serif;
  pointer-events: auto;
  margin-top: -2.97vw;
  z-index: 10;
}

.scene5-subcompany-bg {
  position: absolute;
  bottom: 4.82vw;
  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: 5.61vw;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.32vw;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
}

.scene5-logo {
  height: 4.95vw;
  width: auto;
  object-fit: contain;
  pointer-events: auto;
  cursor: pointer;
}

.scene5-logo-separator {
  height: 5.28vw;
  width: auto;
  object-fit: contain;
}

.scene5-right-arrows {
  position: absolute;
  bottom: 2.97vw;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7.92vw;
  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: 0.66vw;
  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: 0.66vw;
  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: 23.09vw;
}

.scene5-convention-arrows {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.64vw;
  position: relative;
  z-index: 20;
}

.scene5-ssilp-arrows {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.64vw;
  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: 1.98vw;
}

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

.scene5-arrow-btn img {
  height: 0.53vw;
  width: auto;
  object-fit: contain;
}

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

.scene5-desc {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: clamp(9px, 0.8vw, 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: 4.95vw;
  height: 4.95vw;
  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: -6.59vw;
  left: calc(80% - 6.94vw);
  width: 11.88vw;
  height: 11.88vw;
  border-radius: 50%;
  border: 2px solid #9c9fa1;
  background: transparent;
  z-index: 5;
  pointer-events: none;
}

.scene5-descending-red-circle {
  position: fixed;
  top: -32vw;
  right: 5%;
  left: auto;
  width: 4.95vw;
  height: 4.95vw;
  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: 11.22vw;
  /* right: -300px; */
  width: 4.95vw;
  height: 4.95vw;
  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: 5vw;
  height: 5vw;
  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: 5vw;
  height: 5vw;
  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: 28vw;
}

.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: 28vw;
}

.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: 100vw;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  z-index: 15;
  pointer-events: none;
}

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

.scene6-red-circle {
  width: 32.5vw;
  height: 32.5vw;
  border-radius: 50%;
  background-image: url('./assets/circle.webp');
  background-size: 110% 110%;
  background-position: center;
  position: absolute;
  top: 19.95vw;
  /* left: calc(50% + 11.88vw); */
  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', sans-serif;
  pointer-events: none;
  top: 6.59vw;
  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, 1vw, 20px);
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.66vw;
  letter-spacing: -0.05em;
}

.scene6-red-desc {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: clamp(9px, 0.8vw, 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: 10.69vw;
  height: 10.69vw;
  border-radius: 50%;
  background-image: url('./assets/CircleGrey.png');
  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: 5vw;
  height: 5vw;
  object-fit: contain;
  opacity: 1;
  position: relative;
  top: -1.5vw;
}

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

.scene6-subcompany-bg {
  position: absolute;
  bottom: 4.82vw;
  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: 5.61vw;
  left: 50%;
  transform: translateX(-50%);
  width: 30.4vw;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.32vw;
  z-index: 6;
  opacity: 0;
}

.scene6-logo {
  height: 5.28vw;
  width: auto;
  object-fit: contain;
}

.scene6-logo-separator {
  height: 3.96vw;
  width: auto;
  object-fit: contain;
}

.scene6-logo-chhatralaya {
  height: 1.39vw !important;
}


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

.scene6-arrow-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.69vw;
  width: 2.78vw;
  height: 2.78vw;
  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: 1.67vw;
  height: 1.67vw;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: auto;
  margin-top: 0.56vw;
}

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

.scene6-small-red-circle-1,
.scene6-small-red-circle-2,
.scene6-small-red-circle-3 {
  width: 4.28vw;
  height: 4.28vw;
  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: 4.95vw;
  height: 4.95vw;
  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: -32vw;
  left: calc(50% + 18.75vw);
  width: 16.49vw;
  height: 16.49vw;
  border-radius: 50%;
  border: 2px solid #9c9fa1;
  background: transparent;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
}

.scene6-small-red-circle-right {
  width: 4.95vw;
  height: 4.95vw;
  border-radius: 50%;
  background-image: url('./assets/circle.webp');
  background-size: 100% 100%;
  background-position: center;
  position: absolute;
  left: 87.5vw;
  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: 100vw;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  z-index: 15;
  pointer-events: none;
}

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

.scene7-grey-circle {
  width: 10.69vw;
  height: 10.69vw;
  border-radius: 50%;
  background-image: url('./assets/CircleGrey.png');
  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: 4.46vw;
  height: 4.46vw;
  object-fit: contain;
  position: relative;
  top: -1.65vw;
}

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

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

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

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

.scene7-logo {
  height: 5.28vw;
  width: auto;
  object-fit: contain;
}

.scene7-logo-separator {
  height: 3.96vw;
  width: auto;
  object-fit: contain;
}

.scene7-right-arrows {
  position: absolute;
  bottom: 2.97vw;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7.92vw;
  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: 0.66vw;
  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: 0.69vw;
  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: 23.09vw;
}

.scene7-convention-arrows {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.64vw;
  position: relative;
  z-index: 20;
}

.scene7-ssilp-arrows {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.64vw;
  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: 1.98vw;
}

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

.scene7-arrow-btn img {
  height: 0.53vw;
  width: auto;
  object-fit: contain;
}

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

.scene7-desc {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: clamp(9px, 0.8vw, 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: 4.95vw;
  height: 4.95vw;
  border-radius: 50%;
  background-image: url('./assets/circle.webp');
  background-size: 100% 100%;
  background-position: center;
}

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

.scene7-top-left-circle {
  position: absolute;
  top: 11.22vw;
  width: 4.95vw;
  height: 4.95vw;
  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: 5.21vw;
  height: 5.21vw;
  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: 6.94vw;
  height: 6.94vw;
  background: url('./assets/logo-LITTLEWINGS.png') no-repeat center;
  background-size: contain;
  z-index: 10;
  opacity: 1;
}

.scene7-new-text.show-convention {
  display: block;
  text-align: right;
  width: 28vw;
}

.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: 28vw;
}

.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.png');
}

.pre-footer-top-btn {
  display: flex;
  justify-content: flex-end;
  padding: 0 4.17vw;
  background: #e5e6e7;
  position: relative;
  z-index: 1000;
  margin-top: -5vw;
}

.scroll-to-top-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  pointer-events: auto;
}

.scroll-to-top-btn img {
  width: 3.47vw;
  height: auto;
  display: block;
}

/* Footer Section */
.about-page .footer,
.career-page .footer,
.contact-page .footer,
.gc-page .footer,
.gallery-page .footer {
  margin-top: 4vw;
}

.footer {
  background-color: #e5e6e7;
  padding: 0px 2.78vw 5vw;
  color: white;
  font-family: 'Montserrat', sans-serif;
}

.footer-container {
  max-width: 97.22vw;
  margin: 0 auto;
  display: flex;
  gap: 2.08vw;
  align-items: flex-start;
  padding-left: 2.78vw;
  padding-right: 2.78vw;
  justify-content: center;
}

.footer-columns-wrapper {
  display: flex;
  flex-direction: column;
  max-width: 69.44vw;
}

.footer-titles-row {
  display: flex;
  justify-content: flex-start;
  gap: 2.08vw;
  width: 100%;
}

.footer-content-row {
  display: flex;
  justify-content: flex-start;
  gap: 2.08vw;
  width: 100%;
}

.footer-column {
  flex: 0 0 auto;
  min-width: 12.50vw;
}

.footer-content-row .footer-column {
  width: 12.50vw;
}

.footer-logo {
  flex: 0 0 auto;
  width: 10.42vw;
  margin-right: 1.39vw;
}

.footer-logo-img {
  width: 8.33vw;
  height: auto;
}

.footer-title {
  color: var(--color-red);
  font-size: 1.11vw;
  font-weight: 700;
  margin-bottom: 0.69vw;
  letter-spacing: -0.05em;
}

.footer-full-line {
  width: 100%;
  height: auto;
  margin: 1.39vw 0;
  display: block;
}

.footer-content {
  margin-top: 0;
}

.footer-contact p {
  font-size: 0.90vw;
  line-height: 1.3;
  color: #636466;
  margin-bottom: 1px;
}

.contact-group {
  display: flex;
  align-items: flex-start;
  gap: 0.69vw;
  margin-bottom: 0.69vw;
}

.contact-icon {
  font-size: 1.25vw;
  line-height: 1.8;
  flex-shrink: 0;
}

.contact-icon-img {
  width: 1.39vw;
  height: 1.39vw;
  flex-shrink: 0;
  margin-top: 2px;
}

.contact-text {
  flex: 1;
}

.footer-contact .footer-spacing {
  margin-top: 1.04vw;
  margin-bottom: 0.69vw;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 0.4vw;
}

.footer-links a {
  color: #636466;
  text-decoration: none;
  font-size: 0.90vw;
  transition: color 0.3s;
}

.footer-links a:hover {
  color: var(--color-red);
}

.gf-newsletter {
  display: flex;
  flex-direction: column;
  gap: 1vw;
  width: 150%;
  max-width: 41.67vw;
}

.gf-email-wrap {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 4px;
  padding: 0.4vw 0.6vw;
}

.gf-email-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: #333;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9vw;
}

.gf-email-input::placeholder {
  color: #888;
}

.gf-email-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-red);
  display: flex;
  align-items: center;
  padding: 0;
  transition: opacity 0.2s;
}

.gf-email-btn:hover {
  opacity: 0.7;
}

.gf-checkbox-wrap {
  display: flex;
  align-items: flex-start;
  gap: 0.6vw;
  font-size: 0.83vw;
  color: #636466;
  line-height: 1.5;
}

.gf-checkbox {
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
}

/* height: 100%;
  object-fit: contain;
  pointer-events: none;
} */