body {
        background: white;
      }      
      .spacer {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        text-align: center;
      }

      .gsap-container {
        height: 400vh;
        position: relative;
      }

      .box-container {
        position: fixed;
        top: 210%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 1400px;
      }

      .box {
        width: 100%;
        height: 1400px;
        background: linear-gradient(45deg, #667eea, #764ba2);
        border-radius: 15px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px -3px;
        transition: box-shadow 0.3s ease;
      }

      .box-text {
        color: white;
        font-weight: bold;
        font-size: 0.9rem;
        text-align: center;
        opacity: 0;
        transform: scale(0);
        z-index: 2;
      }

      .box-text-center {
        color: black;
        font-weight: bold;
        font-size: 12rem;
        text-align: center;
        z-index: 2;
      }

      .box-text-left {
        color: black;
        font-weight: bold;        
        text-align: center;
        z-index: 2;
		font-size: 4rem;
      }

      /* Initially hide all boxes except center */
      .box-bottom,
      .box-left,
      .box-right {
        opacity: 0;
        scale: 0;
      }

      /* Color variations for each box */
      .box-center {
        background: radial-gradient(circle, white 0%, #ffd2bb 100%);
        perspective: 1000px;
        box-shadow: 0 0 60px 10px rgba(246, 102, 31, 0.5);
        border: solid 1px #f6661f42;
      }

      /* Logo flip container */
      .flip-container {
        width: 100%;
        height: 100%;
        position: relative;
        transform-style: preserve-3d;
        transition: transform 0.6s;
      }

      .flip-front,
      .flip-back {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      }

      .flip-back {
        transform: rotateY(180deg);
      }

      .logo-placeholder {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        font-weight: bold;
      }
      .box-bottom {
        background: #ffd7c266;
        border: solid 1px #f6661f;
        border-radius: 2rem;
        padding: 0.5rem;
        width: 800px;
        top: calc(50% + 500px);
        left: calc(50% - 410px);
        transform: translate(-50%, -50%);
      }
      .box-left {
        background: #ffd7c266;
        border: solid 1px #f6661f;
        border-radius: 2rem;
        padding: 0.5rem;
        width: 800px;
        top: 50%;
        left: calc(50% - 1500px);
        transform: translate(-50%, -50%);
      }
      .box-right {
        background: #ffd7c266;
        border: solid 1px #f6661f;
        border-radius: 2rem;
        padding: 0.5rem;
        width: 800px;
        top: 50%;
        left: calc(50% + 710px);
        transform: translate(-50%, -50%);
      }

      .margin-top-titles {
        margin-bottom: 200px;
      }

      .flex-col {
        flex-direction: column;
      }
      .flex {
        display: flex;
      }
      .circle {
        border-radius: 50%;
        width: 1800px;
        height: 1800px;
      }
      .orange-text {
        color: #f6661f;
      }
      .box-text-center-heading {       
        font-weight: 600;
      }
      .box-text-left-heading {        
        text-align: center;
        font-size: 7rem;
      }
      .rectangle {
        width: 800px;
        padding: 2rem;
        max-height: 120rem;
      }
      .align-items-center {
        align-items: center;
      }
      .justify-content-between {
        justify-content: space-between;
      }
      .w-4 {
        width: 4rem;
      }

      .icon-placeholder {
        width: 4rem;
        height: 4rem;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
      }
      .hero-button {
        background-color: #023264;
		  color: white;
    font-family: "Urbanist", Sans-serif;
    font-weight: 500;
    border-radius: 8px 8px 8px 8px;
		  padding: 10px 20px;
      }
      .flex-col {
        flex-direction: column;
      }
      .align-items-start {
        align-items: flex-start;
      }
      .hero-button-card {
        background: #011c38;
    background-color: #023264;
		  color: white;
    font-family: "Urbanist", Sans-serif;
    font-weight: 500;
    border-radius: 20px;
		  padding: 10px 20px;
		  font-size: 5rem;
    align-self: center;
      }

      .orbit-text {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        background: #fef7f2;
        padding: 2rem;
        border-radius: 2rem;
        box-shadow: 0px 0px 20px 10px #ffbd8e;
        opacity: 0;
        font-size: 5rem;
        white-space: nowrap;
      }
      .p-absolute {
        position: absolute;
        z-index: -10;
      }
      .arrow-image-1 {
        left: 85%;
        top: 6%;
      }
      .arrow-image-2 {
        left: 5%;
        top: 8%;
      }
      .arrow-image-3 {
        left: 15%;
        top: 5%;
      }
      .arrow-image-4 {
        left: 35%;
        top: 3%;
      }
      .arrow-image-5 {
        left: 65%;
        top: 4%;
      }
      .arrow-image-6 {
        left: 85%;
        top: 90%;
      }
      .arrow-image-7 {
        left: 5%;
        top: 95%;
      }
      .arrow-image-8 {
        left: 15%;
        top: 97%;
      }
      .arrow-image-9 {
        left: 35%;
        top: 92%;
      }
      .arrow-image-10 {
        left: 65%;
        top: 93%;
      }
      .o-0 {
        opacity: 0;
      }

      /* stars */
      .stars {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        overflow: hidden;
      }

      .star {
        position: absolute;
        width: 30px;
        height: 30px;
        background: #ffd3b3;
        clip-path: polygon(
          50% 0%,
          60% 40%,
          100% 50%,
          60% 60%,
          50% 100%,
          40% 60%,
          0% 50%,
          40% 40%
        );
        animation: twinkle 3s ease-in-out infinite;
        box-shadow: 0 0 8px 2px rgba(255, 211, 179, 0.5);
        z-index: -11;
      }

      .star:nth-child(odd) {
        animation-delay: 1s;
      }

      .star:nth-child(3n) {
        animation-delay: 2s;
      }

      .star:nth-child(4n) {
        animation-delay: 0.5s;
      }

      .star:nth-child(5n) {
        animation-delay: 1.5s;
      }

      /* Different star sizes */
      .star-small {
        width: 5px;
        height: 5px;
        opacity: 0.6;
        z-index: -11;
      }

      .star-medium {
        width: 10px;
        height: 10px;
        opacity: 0.4;
        z-index: -11;
      }

      .star-large {
        width: 15px;
        height: 15px;
        opacity: 0.3;
        z-index: -11;
      }

      @keyframes twinkle {
        0%,
        100% {
          opacity: 0.3;
          transform: scale(1);
        }
        50% {
          opacity: 1;
          transform: scale(1.2);
        }
      }
.flip-back > h2 {
	    font-size: 20rem;
    line-height: 1;
}

.gsap-container {
  display: none; /* Hide by default */
}

@media (min-width: 1024px) and (max-width: 1728px) {
  .gsap-container {
    display: block; /* Or flex/grid depending on your layout */
  }
}

.mobile-container {
  display: none; /* Hide by default */
}

.mobile-image {
	display: none;
	min-width: 300px;
}

@media (max-width: 1023px), (min-width: 1729px) {
  .mobile-container {
    display: flex; /* Or flex/grid, as needed */
	align-items: center;
    justify-content: center;
  }
  .margin-top-titles {
	display: flex; /* Or flex/grid, as needed */
	align-items: center;
    justify-content: center;
	flex-flow: column;
	  margin: unset;
  }
	.margin-top-titles > h1 {
		text-align: center;
	}
	.margin-top-titles > p {
		text-align: center;
	}
	.mobile-image {
		display: block;
	}
}
@media (max-width: 768px) {
  .hero-button {
    padding: 8px 16px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 480px) {
  .hero-button {
    padding: 6px 12px !important;
    font-size: 13px !important;
  }
}