body,
html {
  --bannerPurple: #bebefb;
  --backgroundLightYellow: #f2f9d7;
  --backgroundSecondYellow: #efefbb;
  --backgroundLightGrey: #d4d3dd;
  --darkGreyColor: #7b7b7b;
  --backgroundVividGreen: #8edee3;
  --backgroundLightToTransparentWhite: rgba(255, 255, 255, 0.3);
  --whiteColor: #fff;
  --backgroundRotateDegree: 150deg;
  --circleBorderRadius: 50%;

  margin: 0;
  padding: 0;
  overflow-x: hidden;
  /* font-family: Arial, sans-serif; */
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  background: var(--whiteColor);
  color: var(--whiteColor);
  position: relative;
}

body::-webkit-scrollbar,
html::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

.main-page-banner {
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 10;
  text-align: center;
  background-color: var(--bannerPurple);
  padding: 10px;
}
.go-back-to-top {
  color: var(--bannerPurple);
  position: fixed;
  top: 50px;
  right: 20px;
  cursor: pointer;
  z-index: 1000;
}
.go-back-to-top:hover {
  color: #b3b3f5;
}

.scroll-down-icon-container {
  z-index: 1000;
  position: fixed;
  bottom: 20px;
  right: 20px;
  cursor: pointer;
  width: 40px;
  height: 50px;
}

.scroll-down-icon {
  width: 80%;
  height: auto;
  animation: down 1.5s ease-in-out infinite;
}

.scroll-down-shadow {
  position: fixed;
  right: 36px;
  background-color: rgba(0, 0, 0, 0.05);
  width: 15px;
  height: 5px;
  border-radius: 10%;
  filter: blur(1px);
  animation: downShadow 1.5s ease-in-out infinite;
}

.scroll-down-icon-container:hover .scroll-down-icon,
.scroll-down-icon-container:hover .scroll-down-shadow {
  animation-play-state: paused;
}

@keyframes down {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes downShadow {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.6);
  }
}

.heart-animation-fade-out-effect {
  opacity: 0;
  transition: opacity 1s ease-out, visibility 1s ease-out;
  visibility: hidden;
}

.panel {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
}

.one {
  /* background: var(--backgroundSecondYellow);
  background: -webkit-linear-gradient(to top, #ebeaf4, var(--backgroundSecondYellow));
  background: linear-gradient(to top, var(--backgroundSecondYellow), #ebeaf4); */
  position: relative;
}

.two {
  /* background: var(--backgroundSecondYellow); */
  align-items: flex-start;
  position: relative;
}

.three {
  /* background: var(--whiteColor) 100%;
  background: linear-gradient(var(--backgroundRotateDegree),
    var(--whiteColor) 0%
    #ebeaf4 100%,

  ); */
  position: relative;
}

.four {
  background: linear-gradient(50deg, var(--backgroundLightYellow) 0%, var(--whiteColor) 100%);
  position: relative;
  overflow: hidden;
}

.five {
  /* background: #003973;
  background: -webkit-linear-gradient(to top, #f3f3e2 20%, #003973);
  background: linear-gradient(to top, #f3f3e2 20%, #003973); */
  position: relative;
}

.line {
  display: inline-block;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: var(--whiteColor);
}

/* PANEL ONE */
.panel1-ball-animaltion-hugest-container {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: linear-gradient(var(--backgroundRotateDegree), #d299c2, var(--backgroundLightYellow));
  overflow: hidden;
  margin: auto;
  position: absolute;
}

.panel1-ball-animaltion-container {
  height: 500px;
  width: 500px;
  position: relative;
  margin-right: 15%;
}

.panel1-ball-animaltion-bubble {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    circle at 75% 30%,
    var(--whiteColor) 5px,
    #ff21c0 8% #5b5b5b 60%,
    #ff21c0 100%
  );
  border-radius: var(--circleBorderRadius);
  box-shadow: inset 0 0 20px var(--whiteColor), inset 10px 0 46px #eaf5fc,
    inset 80px 0 60px #efcde6, inset -20px -60px 100px #f9f6de,
    inset 0 50px 140px #f9f6de, 0 0 90px var(--whiteColor);
  animation: bubble 4s ease-in-out infinite;
}

.panel1-ball-animaltion-shadow {
  background-color: rgba(0, 0, 0, 0.15);
  width: 380px;
  height: 35px;
  border-radius:var(--circleBorderRadius);
  position: absolute;
  right: 12%;
  bottom: -100px;
  filter: blur(1px);
  animation: shadow 4s ease-in-out infinite;
}

@keyframes bubble {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-80px);
  }
}

@keyframes shadow {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.5);
  }
}

.panel1-hugest-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  gap: 20px;
  z-index: 1;
}

.panel1-left-content-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.panel1-left-content-image-container {
  position: relative;
  width: 350px;
  height: 450px;
  border-radius: 50%/20% 1%;
  overflow: hidden;
  background: var(--backgroundSecondYellow); /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to top,
    var(--backgroundLightGrey),
    var(--backgroundSecondYellow)
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to top,
    var(--backgroundLightGrey),
    var(--backgroundSecondYellow)
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.panel1-left-content-image-container img {
  width: 100%;
  height: auto;
  overflow: visible;
  z-index: 2;
}

.panel1-right-content-container {
  display: flex;
  flex-direction: column;
  width: 58%;
}

.panel1-right-content-container h1 {
  font-size: 4rem;
}

.heart-animation {
  width: 100%;
  height: 100px;
}

/* PANEL TWO */
.panel2-background-hugest-container {
  background: linear-gradient(var(--backgroundRotateDegree), #e2c8cd 5%, var(--backgroundLightYellow) 50%, var(--whiteColor) 100%);
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  overflow: hidden;
}

.panel2-background-inner-yellow-circle {
  position: absolute;
  bottom: 30%;
  right: 20%;
  width: 300px;
  height: 300px;
  border-radius: var(--circleBorderRadius);
  background: radial-gradient(circle, #ffe66a 0%, var(--whiteColor) 100%);
  filter: blur(100px);
  z-index: 1;
}

.panel2-background-inner-green-cicle {
  position: absolute;
  width: 700px;
  height: 700px;
  border-radius: var(--circleBorderRadius);
  background-color: var(--backgroundVividGreen);
  filter: blur(120px);
  bottom: -40%;
  left: -2%;
}

.panel2-content-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 90%;
  height: 100vh;
  position: relative;
  z-index: 2;
}

.panel2-title {
  font-size: 4rem;
  font-weight: bold;
  margin-bottom: 20px;
  color: #ff93b3;
}

.panel2-title span {
  margin-bottom: 30px;
}

.panel2-inner-content-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  color: #767676;
  margin-bottom: 5%;
}

.panel2-download-button {
  position: relative;
  padding: 20px 60px;
  background-color: var(--whiteColor);
  border-radius: 50px;
  color: #ff93b3;
  font-size: 1.5em;
  text-align: center;
  text-decoration: none;
  transition: 0.5s;
  overflow: hidden;
  z-index: 200;
  cursor: pointer;
}

.panel2-download-button span {
  position: relative;
  z-index: 1;
  letter-spacing: 0.2em;
  top: -13px;
}

.panel2-download-button:hover {
  color: var(--clr);
  text-shadow: 0 0 15px var(--clr), 0 0 40px var(--clr);
}

.panel2-download-button::before {
  content: "";
  position: absolute;
  top: var(--y);
  left: var(--x);
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background: radial-gradient(var(--clr), transparent, transparent);
  opacity: 0;
  transition: 0.5s, top 0s, left 0s;
}

.panel2-download-button:hover::before {
  opacity: 1;
}

.panel2-download-button::after {
  content: "";
  /* background-color: rgba(45, 45, 45, 0.8); */
  background-color: var(--whiteColor);
  position: absolute;
  inset: 2px;
  border-radius: 48px;
}
.panel2-jump-resume {
  display: none;
}
.panel2-resume {
  width: 60%;
  height: 800px;
  margin-top: 30px;
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* PANEL THREE */
.panel3-background-hugest-container {
  background: linear-gradient(130deg, var(--backgroundVividGreen) -5%, var(--backgroundLightYellow) 5%, var(--whiteColor) 100%);
  background-color: var(--whiteColor);
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  overflow: hidden;
}

.panel3-background-inner-red-circle {
  position: absolute;
  bottom: 18%;
  right: 20%;
  width: 500px;
  height: 500px;
  border-radius: var(--circleBorderRadius);
  background: radial-gradient(circle, #ffa36a 0%, var(--whiteColor) 100%);
  filter: blur(120px);
}

.panel3-background-inner-green-cicle {
  position: absolute;
  width: 700px;
  height: 400px;
  border-radius: var(--circleBorderRadius);
  background-color: var(--backgroundVividGreen);
  filter: blur(120px);
  top: -10%;
  left: 0%;
}

.panel3-left-content-container {
  width: 50%;
  color: black;
  z-index: 2;
}

.panel3-right-content-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 40%;
  height: 90%;
  margin-left: 5%;
}

.panel3-left-single-area {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.panel3-left-single-area h4 {
  margin: 15px 15px 15px 0px;
}

.panel3-left-content-container ul li {
  text-align: -webkit-auto;
  letter-spacing: 1.2px;
}

.panel3-title {
  font-size: 4rem;
  font-weight: bold;
  margin-bottom: 20px;
  font-family: "Cinzel", serif;
  color: #f89e65;
  z-index: 5;
}

.panel3-right-rolling-content-list {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 8px;
  padding: 15px 0;
}

.panel3-right-inner {
  width: fit-content;
  display: flex;
  gap: 1rem;
  animation: loop 15s linear infinite;
  animation-play-state: running; /* Ensure default state is running */
}

.panel3-right-inner.reverse-loop {
  animation: reverse-loop 15s linear infinite;
  animation-play-state: running; /* Ensure default state is running */
}

.panel3-tag {
  font-family: "Cinzel", serif;
  display: flex;
  align-items: center;
  gap: 0 0.2rem;
  color: var(--whiteColor);
  width: fit-content;
  height: auto;
  border-radius: 0.4rem;
  font-size: 0.9rem;
  background-color: #7cb8c0;
  padding: 0.2rem 1rem;
  box-shadow: 0 0.1rem 0.2rem #00000033, 0 0.1rem 0.5rem #0000004d;
  cursor: pointer;
}

.panel3-tag:hover {
  background-color: #005c6ec3;
  mix-blend-mode: multiply;
  color: var(--whiteColor);
  font-size: 1.2rem;
  animation: jelly 0.5s;
}

@keyframes jelly {
  0%,
  100% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(0.9, 1.1);
  }
  50% {
    transform: scale(1.1, 0.9);
  }
  75% {
    transform: scale(0.95, 1.05);
  }
}

.panel3-tag span {
  font-size: 1.2rem;
  color: aquamarine;
  text-align: center;
}

.panel3-right-fade {
  position: absolute;
  background: linear-gradient(90deg, transparent, transparent);
  inset: 0;
  pointer-events: none;
}

@keyframes loop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes reverse-loop {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

/* PANEL FOUR */

.panel4-background-hugest-container {
  background: radial-gradient(var(--backgroundRotateDegree), var(--backgroundLightYellow) 0%, var(--whiteColor) 100%);
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.panel4-background-inner-blue-circle {
  position: absolute;
  top: 20%;
  left: 15%;
  width: 600px;
  height: 500px;
  border-radius: var(--circleBorderRadius);
  background: radial-gradient(circle, #91eae4 0%, var(--whiteColor) 100%);
  filter: blur(100px);
  z-index: 1;
}

.panel4-background-inner-purple-cicle {
  position: absolute;
  width: 900px;
  height: 700px;
  border-radius: var(--circleBorderRadius);
  background-color: var(--bannerPurple);
  filter: blur(200px);
  bottom: -2%;
  right: 0%;
}

/* .panel4-background-inner-blur-layer {
  position: absolute;
  width: 70%;
  height: 60%;
  border-radius: 16px;
  background: var(--backgroundLightToTransparentWhite);
  border: 1px solid var(--whiteColor);
  filter: blur(2px);
  z-index: 1;
} */

.panel4-vertical-title {
  position: fixed;
  left: 3%;
  top: 0;
  z-index: 100;
  padding: 10px;
  font-size: 4em;
  color: var(--darkGreyColor);
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3),
    -2px -2px 5px var(--backgroundLightToTransparentWhite);
  /* writing-mode: vertical-rl;
  text-orientation: upright; */
  font-family: "Cinzel", serif;
  font-optical-sizing: auto;
  font-weight: 600;
}

.panel4-content-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  /* width: 50%; */
  margin-left: 50px;
  gap: 30px;
  z-index: 5;
  position: absolute;
  width: 90%;
  height: 80%;
  border-radius: 16px;
  background: var(--backgroundLightToTransparentWhite);
  border: 5px solid var(--whiteColor);
  /* filter: blur(2px); */
  justify-content: center;
}

.panel4-content-single-container {
  border: 1px solid #333;
  border-radius: 10px;
  padding: 20px;
  background: var(--whiteColor);
  color: black;
}

/* screen width for iPad */
@media (min-width: 500px) and (max-width: 1200px) {
  .main-page-banner {
    display: none;
  }
  .go-back-to-top {
    top: 20px;
  }
  .panel2-jump-resume {
    display: block;
    margin-top: 20px;
  }
  .panel2-resume {
    width: 90%;
  }
  .panel3-title {
    font-size: 3rem;
  }
  .panel4-description > ul > li {
    line-height: 1.5;
  }
}

/* screen width for phone */
@media (max-width: 500px) {
  .main-page-banner {
    display: none;
  }
  .panel1-right-content-container h1 {
    font-size: 2.5rem;
  }
  .go-back-to-top {
    top: 20px;
  }
  .scroll-down-icon-container {
    bottom: 30px;
  }
  .panel1-ball-animaltion-container {
    height: 400px;
    width: 400px;
    margin-right: 4%;
  }
  .panel1-ball-animaltion-shadow {
    width: 270px;
    height: 30px;
    right: 16%;
  }
  .panel1-left-content-container {
    display: none;
  }
  .panel1-right-content-container {
    width: 90%;
  }
  .panel2-title {
    font-size: 1.5rem;
    margin: 10px 0;
  }
  .panel2-inner-content-container p {
    font-size: 14px;
    letter-spacing: 1.2px;
    margin: 5px 0 8px 0;
  }
  .panel2-download-button {
    padding: 15px 60px;
    font-size: unset;
  }
  .panel2-jump-resume {
    display: block;
    margin: 10px 0;
  }
  .panel2-resume {
    width: 90%;
    overflow: auto;
    margin-top: 15px;
  }
  .panel3-left-content-container {
    position: absolute;
    width: 98%;
    top: 17%;
    height: 90%;
  }
  .panel3-right-content-container {
    width: 100%;
    height: 90%;
    margin-left: unset;
  }
  .panel3-title {
    font-size: 1.5rem;
    width: 100%;
    position: absolute;
  }
  .line.line-2 {
    width: 90%;
    height: 10px;
  }
  .panel3-right-rolling-content-list {
    display: none;
  }
  .panel3-left-single-area h4 {
    margin: 5px 5px 5px 0px;
  }
  .panel3-left-content-container h4 {
    margin: 5px 5px 5px 0px;
    font-size: 0.85rem;
  }
  .panel3-left-single-area,
  .panel3-left-content-container ul li {
    font-size: 0.85rem;
  }
  .panel4-vertical-title {
    font-size: 2em;
  }
  .panel4-inner-container {
    flex-direction: column;
    width: 90%;
    gap: 5px;
  }
  .panel4-content-container {
    width: 90%;
    margin: 0;
    transform: translate(0px, 8%);
  }
  .panel4-description h2 {
    font-size: 1.2rem;
  }
  .panel4-description h4 {
    font-size: 1rem;
  }
  .panel4-description > ul > li {
    font-size: 12px;
  }
}