body {
  font-family: "Livvic", sans-serif;
}

/* BANNER BUBBLE START */
.bubblerelative {
  position: relative;
  overflow: hidden;
}

/* bubble layer */
.bubble-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* bubbles */
.bubble {
  position: absolute;
  bottom: -120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  animation: bubbleUp linear forwards;
  will-change: transform, opacity;
}

@keyframes bubbleUp {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    transform: translateY(-160vh);
    opacity: 0;
  }
}

/* BANNER BUBBLE END */

/* CPLIT CHAR START */
.text-side-heading {
  display: flex;
  flex-direction: column; 
  align-items: flex-start;
  line-height: 0.95;

  /* HARD STOP word breaking */
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}
.text-side-heading .split-word {
  display: flex;
  flex-wrap: nowrap;
  width: fit-content;
    margin-bottom: 10px;
}
.text-side-heading .split-char {
  display: inline-block;
  margin: 0;
  padding: 0;
}
.text-side-heading .split-char {
	display: inline-block;
	opacity: 0;
	transform: translateY(80px) rotate(-25deg);
	transform-origin: center bottom;
	color:#1F2933;
}

/* paragraph */
.text-side-body {
	opacity: 0;
	transform: translateY(30px) ;
}
/* CPLIT CHAR END */

/* STICKY FULLSCREEN WORDS START */
#scrollSection {
	/* background: #c9f3f6; */
	position: relative;
	height: 400vh; 
	background: linear-gradient(to bottom, #EAF8FF 0%, #FFFFFF 80%);
  
}
.cloud-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.cloud {
  position: absolute;
  background: url("cloud.png") center / contain no-repeat;
  opacity: 0.85;
  filter: blur(0.4px);
  will-change: transform;
  z-index:2;
}
.section{ height:400vh; }
.sticky{
	height:100vh;
	overflow:hidden;
	position:sticky;
	text-align: center;
	top:0;
}
.word{
	color:#c86a16;
	font-size:140px;
	font-weight:900;
	left:50%;
	position:absolute;
	pointer-events:none;
	top:0;
	transform:translate(-50%, 100vh);
	white-space:nowrap;
	will-change:transform;
	z-index:4;
}
.word strong {
	display: block;
}
.word small {
    display: block;
	font-size: 47px;
	line-height: normal;
}
.center-image{
	height:420px;
	left:50%;
	position:absolute;
	pointer-events:none;
	top:50%;
	transform:translate(-50%, -50%);
	width:420px;
	z-index:3;
}
.center-image canvas{
	display:block;
	height:100%;
	width:100%;
}
/* STICKY FULLSCREEN WORDS END*/



/* FLAVORS SLIDER START */
.carousel { transition: background-color 0.6s ease; }
#flavorImage {
    display: inline-block;
    float: none;
    height: 100%;
    text-align: center;
    width: auto;
}
.carimgdv {
    float: none;
	text-align: center;
    z-index: 99999;
}
.perspective {
	perspective: 1200px;
}
.image-3d {
	height: 100%;
	perspective: 1200px;
	transform-style: preserve-3d;
	transition: transform 0.8s ease-in-out;
	width: 100%;
}
.image-3d img {
	backface-visibility: hidden;
	height: 100%;
	object-fit: contain;
	width: 100%;
}
model-viewer {
	background: transparent;
	height: 100%;
	width: 100%;
	--poster-color: transparent;
}
.wavy-circles-outer {
	animation: rotateCircleout 20s linear infinite;
	transform-origin: 50% 50%;
}
@keyframes rotateCircleout {
	from {
		transform: rotate(360deg);
	}
	to {
		transform: rotate(0deg);
	}
}
.wavy-circles-inner {
	animation: rotateCircle 20s linear infinite;
	transform-origin: 50% 50%;
}
@keyframes rotateCircle {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
.wavy-circles-inner,
.wavy-circles-outer {
	opacity: 0.5;
}
/* FLAVORS SLIDER END */


/* THERE PARAGRAPHS WITH ONE IMAGE START */
.alternating-section { margin:60px 0;}
#forthrboneimg .font-bold{
	color:#FF8A00;
}
#forthrboneimg p{
	color:#1F2933;
}
.alternating-text-container {
	position: relative;
	transition: background-color 0.5s ease;
}
.floating-image {
	inset: 0;
	position: absolute;
	pointer-events: none;
	z-index: 20;
}
.floating-image img {
	left: 0;
	position: absolute;
	top: 0;
	transform: translate(-50%, -50%);
	will-change: transform;
}
.image-anchor { position: relative; }
/* THERE PARAGRAPHS WITH ONE IMAGE END */