:root {
  /* purple dark colors */
  --purple-dark-1: #372a4b;
  --purple-dark-2: #3e2e52;
  --purple-dark-3: #432f58;

  /* purple light colors */
  --purple-light-1: #a270fd;
  --purple-light-2: #da80fb;
  --purple-light-3: #e6a0ff;

  /* blue dark colors */
  --blue-dark-1: #2b1c88;
  --blue-dark-2: #4530c6;
  --blue-dark-3: #356af2;

  /* blue light colors */
  --blue-light-1: #7398f7;
  --blue-light-2: #8fadfc;
  --blue-light-3: #aec5ff;

  /* green dark colors */
  --green-dark-1: #1b727a;
  --green-dark-2: #2aadb9;
  --green-dark-3: #37eafa;

  /* green light colors */
  --green-light-1: #75ccfb;
  --green-light-2: #99d7f9;
  --green-light-3: #bee8ff;
}

.roboto-thin {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.roboto-thin-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.roboto-light-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.roboto-regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.roboto-medium-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.roboto-bold-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.roboto-black-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: italic;
}

.handwrite-regular {
  font-family: "Zeyada", cursive;
  font-weight: 400;
  font-style: normal;
}
.handwrite-bold {
  font-family: "Zeyada", cursive;
  font-weight: bold;
  font-style: normal;
}

.playwrite-100 {
  font-family: "Playwrite US Trad", cursive;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}
.playwrite-200 {
  font-family: "Playwrite US Trad", cursive;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}
.playwrite-300 {
  font-family: "Playwrite US Trad", cursive;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}
.playwrite-400 {
  font-family: "Playwrite US Trad", cursive;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

body {
  margin: 0px;
  padding: 0px;

  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.hero {
  width: 100%;
  height: 1780px;
  transition: filter 4s;
  padding-bottom: 120px;
}

.hero-image {
  width: 100%;
  height: 100%;

  background-image: linear-gradient(
      135deg,
      rgba(5, 3, 25, 0.97) 30%,
      rgba(89, 32, 100, 0.97) 65%,
      rgba(30, 27, 73, 0.97) 85%,
      rgba(23, 6, 39, 0.97) 95% /* ,rgba(5, 3, 25, 0.97) 100% */
    ),
    url("/assets/img/hero-img-2.jpg");

  background-position: top left;
  background-repeat: no-repeat;
  background-size: 140%;
  transition: all 0.3s;

  -webkit-animation: heroBackgroundAnimation 7.8s ease-in forwards;
  -moz-animation: heroBackgroundAnimation 7.8s ease-in forwards;
  -o-animation: heroBackgroundAnimation 7.8s ease-in forwards;
  animation: heroBackgroundAnimation 7.8s ease-in forwards;

  border-bottom-left-radius: 192px;
  border-bottom-right-radius: 192px;
  outline: 64px double rgba(255, 255, 255, 0.05);
}

@-webkit-keyframes heroBackgroundAnimation {
  0% {
    background-size: 200%;
  }
  100% {
    background-size: 140%;
    background-position: 80%;
  }
}
@-moz-keyframes heroBackgroundAnimation {
  0% {
    background-size: 200%;
  }
  100% {
    background-size: 140%;
    background-position: 80%;
  }
}
@-o-keyframes heroBackgroundAnimation {
  0% {
    background-size: 200%;
  }
  100% {
    background-size: 140%;
    background-position: 80%;
  }
}
@keyframes heroBackgroundAnimation {
  0% {
    background-size: 200%;
  }
  100% {
    background-size: 140%;
    background-position: 80%;
  }
}

.grey-scale {
  filter: grayscale(1);
}

.text-shadow {
  text-shadow: 2px 2px 0px rgb(29, 29, 29);
}

.bg-lens {
  width: 100%;
  height: 550px;
  /* background-color:rgba(255,255,255,.3); */

  background: linear-gradient(
    135deg,
    rgba(128, 64, 187, 0.6) 10%,
    rgba(144, 146, 241, 0.6) 45%,
    rgba(228, 151, 238, 0.6) 90%
  );
  border-radius: 32px;
  outline: 8px double rgba(157, 124, 161, 0.6);
  outline-offset: 8px;
  box-shadow: inset 0px 0px 48px 0px rgba(237, 193, 243, 0.6);

  position: relative;
}

.bg-lens.transparent {
  background: transparent;
}

.bg-lens-animated {
  border-radius: 32px;
  outline: 16px double rgba(251, 219, 255, 0.1);
  outline-offset: 4px;
  box-shadow: inset 0px 0px 48px 0px rgba(237, 193, 243, 0.6);

  background: linear-gradient(
    136deg,
    rgba(128, 64, 187, 0.6),
    rgba(144, 146, 241, 0.6),
    rgba(228, 151, 238, 0.6)
  );
  background-size: 350% 350%;

  -webkit-animation: lensBackgroundAnimation 12s ease infinite;
  -moz-animation: lensBackgroundAnimation 12s ease infinite;
  -o-animation: lensBackgroundAnimation 12s ease infinite;
  animation: lensBackgroundAnimation 12s ease infinite;

  transition: outline 0.5s;

  position: relative;
}

@-webkit-keyframes lensBackgroundAnimation {
  0% {
    background-position: 46% 0%;
    outline: 16px double rgba(251, 219, 255, 0.1);
  }
  50% {
    background-position: 55% 100%;
    outline: 16px double rgba(251, 219, 255, 0.2);
  }
  100% {
    background-position: 46% 0%;
    outline: 16px double rgba(251, 219, 255, 0.1);
  }
}
@-moz-keyframes lensBackgroundAnimation {
  0% {
    background-position: 46% 0%;
    outline: 16px double rgba(251, 219, 255, 0.1);
  }
  50% {
    background-position: 55% 100%;
    outline: 16px double rgba(251, 219, 255, 0.2);
  }
  100% {
    background-position: 46% 0%;
    outline: 16px double rgba(251, 219, 255, 0.1);
  }
}
@-o-keyframes lensBackgroundAnimation {
  0% {
    background-position: 46% 0%;
    outline: 16px double rgba(251, 219, 255, 0.1);
  }
  50% {
    background-position: 55% 100%;
    outline: 16px double rgba(251, 219, 255, 0.2);
  }
  100% {
    background-position: 46% 0%;
    outline: 16px double rgba(251, 219, 255, 0.1);
  }
}
@keyframes lensBackgroundAnimation {
  0% {
    background-position: 46% 0%;
    outline: 16px double rgba(251, 219, 255, 0.1);
  }
  50% {
    background-position: 55% 100%;
    outline: 16px double rgba(251, 219, 255, 0.2);
  }
  100% {
    background-position: 46% 0%;
    outline: 16px double rgba(251, 219, 255, 0.1);
  }
}

.gradient-text-1 {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    120deg,
    #5f4cca 10%,
    #a68bf7 60%,
    #a051d0 75%
  );
  line-height: 88px;
}

.gradient-text-2 {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    120deg,
    #a051d0 5%,
    #5f4cca 30%,
    #a68bf7 40%
  );
}

.headline {
  color: rgb(201, 201, 201);

  font-size: 32px;
  margin-bottom: 16px;
  opacity: 0.8;
  text-transform: lowercase;
}

.light-dot {
  width: 5px;
  height: 5px;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0px 0px 20px 0px white;
  position: absolute;
  transition: box-shadow cubic-bezier(0, 0.2, 1, 1) 0.2s;
}
.light-dot.effect {
  box-shadow: 0px 0px 20px 15px white;
}

.light-dot.effect + .left-eye-black {
  background-color: white;
}
.light-dot.effect + .left-eye-black + .right-eye-black {
  background-color: white;
}

.left-eye {
  top: 134px;
  left: 113px;
}
.right-eye {
  top: 135px;
  left: 160px;
}

.left-eye-black {
  width: 8px;
  height: 8px;
  background-color: rgb(37, 37, 37);
  border-radius: 50%;
  position: absolute;
  top: 134px;
  transition: box-shadow cubic-bezier(0, 1, 1, 1) 1s;
  left: 113px;
}
.right-eye-black {
  width: 8px;
  height: 8px;
  background-color: rgb(37, 37, 37);
  border-radius: 50%;
  position: absolute;
  top: 134px;
  transition: box-shadow cubic-bezier(0, 1, 1, 1) 1s;
  left: 159px;
}

.playground {
  display: flex;
  width: 100%;
  height: auto;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.intro {
  width: 700px;
  height: auto;
  padding-top: 240px;
}
.logo-area {
  height: auto;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.logo {
  width: 280px;
  border-radius: 50%;
  user-select: none;
}
.brand-name {
  color: white;
  font-size: 80px;
  margin-left: 16px;
  text-shadow: 2px 2px 0px rgb(71, 71, 71);
}

.intro-text {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  margin-top: 24px;
}

#catch-word {
  font-size: 64px;
  color: white;
}

.branding {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-top: 80px;
}

.branding-title {
  color: white;
  font-size: 96px;
  margin-top: 64px;
}

.color-palette {
  width: 950px;
  height: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding-left: 64px;
  padding-right: 64px;
}

.brand-color {
  width: 96px;
  height: 96px;
  margin-top: 24px;
  margin-right: 24px;
  border-radius: 8px;
}

.brand-color:hover {
  cursor: pointer;
  opacity: 0.85;
}

.text-white {
  color: white;
}

.page-section {
  width: 100%;
  height: auto;
  padding-top: 64px;
  padding-bottom: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.pt-64 {
  padding-top: 64;
}
.pt-128 {
  padding-top: 128px;
}

.dark {
  background: var(--purple-dark-1);
}

.page-section-title {
  font-size: 64px;
}

.sententences {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-top: 48px;
}

.legend-text {
  font-size: 40px;
  color: white;
  width: 960px;
}
.legend-text.left {
  text-align: left;
}

.catch-word-sententence .legend-text {
  margin-bottom: 64px;
}

.legend-text .in-style-text {
  margin-left: 12px;
  margin-right: 12px;
}

.legend-text .in-style-text.green:nth-child(1) {
  color: var(--green-dark-2);
}
.legend-text .in-style-text.green:nth-child(2) {
  color: var(--green-dark-2);
}
.legend-text .in-style-text.green:nth-child(3) {
  color: var(--green-dark-2);
}
.legend-text .in-style-text.green:nth-child(4) {
  color: var(--green-dark-2);
}

.legend-text .in-style-text.blue:nth-child(1) {
  color: var(--blue-light-1);
}
.legend-text .in-style-text:nth-child(2) {
  color: var(--blue-light-1);
}
.legend-text .in-style-text:nth-child(3) {
  color: var(--blue-light-1);
}
.legend-text .in-style-text:nth-child(4) {
  color: var(--blue-light-1);
}

.legend-text .in-style-text.pink:nth-child(1) {
  color: var(--purple-light-3);
}
.legend-text .in-style-text.pink:nth-child(2) {
  color: var(--purple-light-3);
}
.legend-text .in-style-text.pink:nth-child(3) {
  color: var(--purple-light-3);
}
.legend-text .in-style-text.pink:nth-child(4) {
  color: var(--purple-light-3);
}

.legend-text .in-style-text.blue2:nth-child(1) {
  color: var(--blue-dark-2);
}
.legend-text .in-style-text.blue2:nth-child(2) {
  color: var(--blue-dark-2);
}
.legend-text .in-style-text.blue2:nth-child(3) {
  color: var(--blue-dark-2);
}
.legend-text .in-style-text.blue2:nth-child(4) {
  color: var(--blue-dark-3);
}

.page-section.circle-color-palette {
  height: 300px;
  width: 100%;
  padding-top: 32px;
  padding-bottom: 32px;
}

/* circle palette begin */

.palette {
  width: 300px;
  height: 300px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.palette .palette_item_wrapper {
  transition: transform 0.4s;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: translateX(100px);
  transition-delay: 0.4s;
  margin-left: -18px;
}
.palette.palette__opened .palette_item_wrapper {
  transform: translateX(0);
  transition-delay: 0s;
}
.palette.palette__opened .palette_color {
  transition-delay: 0.2s;
}
.palette.palette__opened .palette_color:nth-child(1) {
  transform: rotate(0deg);
}
.palette.palette__opened .palette_color:nth-child(2) {
  transform: rotate(36deg);
}
.palette.palette__opened .palette_color:nth-child(3) {
  transform: rotate(72deg);
}
.palette.palette__opened .palette_color:nth-child(4) {
  transform: rotate(108deg);
}
.palette.palette__opened .palette_color:nth-child(5) {
  transform: rotate(144deg);
}
.palette.palette__opened .palette_color:nth-child(6) {
  transform: rotate(180deg);
}
.palette.palette__opened .palette_color:nth-child(7) {
  transform: rotate(216deg);
}
.palette.palette__opened .palette_color:nth-child(8) {
  transform: rotate(252deg);
}
.palette.palette__opened .palette_color:nth-child(9) {
  transform: rotate(288deg);
}
.palette.palette__opened .palette_color:nth-child(10) {
  transform: rotate(324deg);
}
.palette .palette_color,
.palette .palette_color__main {
  position: absolute;
  border-radius: 50%;
  cursor: pointer;
  border-style: solid;
  border-color: #4a3964;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.palette .palette_color {
  border-color: #ebdff8;
  border-width: 1px;
  transition: all 0.5s;
}

.palette_color.active {
  outline: 6px solid #ebdff8;
  outline-offset: 2px;
  border-color: transparent;
}

.palette .palette_color__main {
  background-color: #432f58;
  width: 160px;
  height: 160px;
  transition: background 0.3s;
  border-width: 6px;
  left: -16px;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.palette .palette_color {
  width: 50px;
  height: 50px;
  display: block;
  transform-origin: 296% 50%;
  transition: transform 0.5s;
  border-width: 3px;
  transition-delay: 0s;
  left: 12px;
  top: 0;
  bottom: 0;
  margin: auto;
}

/* circle palette end */

/* color wheel begin */

#colorWheel {
  height: 100%;
  width: 120px;
  margin: 0 auto;
  position: relative;
  -webkit-transform-origin: 80px 160px;
  -moz-transform-origin: 80px 160px;
  -ms-transform-origin: 80px 160px;
  -o-transform-origin: 80px 160px;
  transform-origin: 80px 160px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
}
#colorWheel span {
  position: absolute;
  -webkit-transform-origin: 50% 50%;
  border-style: solid;
  border-width: 240px 65px;
  box-sizing: border-box;
  transition: all ease 0.5s;

  /* -webkit-transform: rotate(0deg) !important;
  -moz-transform: rotate(0deg)!important;
  -ms-transform: rotate(0deg)!important;
  -o-transform: rotate(0deg)!important;
  transform: rotate(0deg)!important;*/
}

#colorWheel span.color01 {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  border-color: #d1bc15 transparent transparent transparent;
}

#colorWheel span.color02 {
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  transform: rotate(30deg);
  border-color: #d5981e transparent transparent transparent;
  border-width: 280px 80px;
  top: -80px;
  left: 8px;
}

#colorWheel span.color03 {
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  transform: rotate(60deg);
  border-color: #cc762d transparent transparent transparent;
}

#colorWheel span.color04 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  border-color: #ce4b53 transparent transparent transparent;
}

#colorWheel span.color05 {
  -webkit-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  -o-transform: rotate(120deg);
  transform: rotate(120deg);
  border-color: #bc326e transparent transparent transparent;
  border-width: 280px 80px;
  top: -18px;
  left: 24px;
}

#colorWheel span.color06 {
  -webkit-transform: rotate(150deg);
  -moz-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  -o-transform: rotate(150deg);
  transform: rotate(150deg);
  border-color: #914786 transparent transparent transparent;
}

#colorWheel span.color07 {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  border-color: #395796 transparent transparent transparent;
}

#colorWheel span.color08 {
  -webkit-transform: rotate(210deg);
  -moz-transform: rotate(210deg);
  -ms-transform: rotate(210deg);
  -o-transform: rotate(210deg);
  transform: rotate(210deg);
  border-color: #0382b7 transparent transparent transparent;
}

#colorWheel span.color09 {
  -webkit-transform: rotate(240deg);
  -moz-transform: rotate(240deg);
  -ms-transform: rotate(240deg);
  -o-transform: rotate(240deg);
  transform: rotate(240deg);
  border-color: #0790b6 transparent transparent transparent;
  border-width: 280px 80px;
  top: -15px;
  left: -56px;
}

#colorWheel span.color10 {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
  border-color: #189189 transparent transparent transparent;
}
#colorWheel span.color11 {
  -webkit-transform: rotate(300deg);
  -moz-transform: rotate(300deg);
  -ms-transform: rotate(300deg);
  -o-transform: rotate(300deg);
  transform: rotate(300deg);
  border-color: #009e64 transparent transparent transparent;
}
#colorWheel span.color12 {
  -webkit-transform: rotate(330deg);
  -moz-transform: rotate(330deg);
  -ms-transform: rotate(330deg);
  -o-transform: rotate(330deg);
  transform: rotate(330deg);
  border-color: #92af41 transparent transparent transparent;
}

#colorWheel:before {
  content: "";
  width: 300px;
  height: 300px;
  overflow: hidden;
  position: absolute;
  top: -30px;
  left: -130px;
  border-radius: 100%;
  /* border: 30px solid #ffffff; */
  z-index: 100;
}

#colorWheel:after {
  content: "";
  width: 200px;
  height: 200px;
  overflow: hidden;
  position: absolute;
  top: 136px;
  left: -24px;
  border-radius: 100%;
  background: #37294a;
}

/* color wheel end */

.color02 .color-text {
  position: absolute;
  top: -207;
  left: -57px;
  width: max-content;
  rotate: 272deg;
  font-size: 24px;
  color: white;
}

.color05 .color-text {
  position: absolute;
  top: -196px;
  left: -45px;
  width: max-content;
  rotate: 271deg;
  font-size: 24px;
  color: white;
}

.text-center{
  text-align: center;
}

.color09 .color-text {
  position: absolute;
  top: -198px;
  left: -53px;
  width: max-content;
  rotate: 90deg;
  font-size: 24px;
  color: white;
}

.color-wheel-section {
  height: 600px;
}

.social-media-area {
  width: 100%;
  height: 600px;
  margin-top: 80px;
  padding-left: 120px;
  padding-right: 120px;
  padding-top: 16px;
  position: relative;
}

.social-icon {
  color: white;
  font-size: 48px;
  opacity: 0.85;
  margin-right: 16px;
  position: absolute;
  transition: all 0.5s;
}

.social-media-text-area {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.page-section-secondary-title {
  font-size: 72px;
}


.icon-area i:nth-child(1) {
  top: -24px;
  left: 120px;
  display: flex;
  flex-direction: row;
  margin-bottom: 80px;
  -webkit-animation: waveAnimation1 2.5s ease-in infinite;
  -moz-animation: waveAnimation1 2.5s ease-in infinite;
  -o-animation: waveAnimation1 2.5s ease-in infinite;
  animation: waveAnimation1 2.5s ease-in infinite;
}

.icon-area i:nth-child(2) {
  top: 72px;
  left: 300px;
  -webkit-animation: waveAnimation2 3s ease-in infinite;
  -moz-animation: waveAnimation2 3s ease-in infinite;
  -o-animation: waveAnimation2 3s ease-in infinite;
  animation: waveAnimation2 3s ease-in infinite;
}

.icon-area i:nth-child(3) {
  top: 56px;
  left: 400px;
  -webkit-animation: waveAnimation3 2s ease-in infinite;
  -moz-animation: waveAnimation3 2s ease-in infinite;
  -o-animation: waveAnimation3 2s ease-in infinite;
  animation: waveAnimation3 2s ease-in infinite;
}

.icon-area i:nth-child(4) {
  top: 240px;
  left: 180px;
  -webkit-animation: waveAnimation4 3.5s ease-in infinite;
  -moz-animation: waveAnimation4 3.5s ease-in infinite;
  -o-animation: waveAnimation4 3.5s ease-in infinite;
  animation: waveAnimation4 3.5s ease-in infinite;
}

.icon-area i:nth-child(5) {
  top: 370px;
  left: 280px;
  -webkit-animation: waveAnimation5 2.2s ease-in infinite;
  -moz-animation: waveAnimation5 2.2s ease-in infinite;
  -o-animation: waveAnimation5 2.2s ease-in infinite;
  animation: waveAnimation5 2.2s ease-in infinite;
}

.icon-area i:nth-child(6) {
  top: 370px;
  right: 280px;
  -webkit-animation: waveAnimation5 2.3s ease-in infinite;
  -moz-animation: waveAnimation5 2.3s ease-in infinite;
  -o-animation: waveAnimation5 2.3s ease-in infinite;
  animation: waveAnimation5 2.3s ease-in infinite;
}

.icon-area i:nth-child(7) {
  top: 240px;
  right: 180px;
  -webkit-animation: waveAnimation4 3.1s ease-in infinite;
  -moz-animation: waveAnimation4 3.1 ease-in infinite;
  -o-animation: waveAnimation4 3.1 ease-in infinite;
  animation: waveAnimation4 3.1 ease-in infinite;
}

.icon-area i:nth-child(8) {
  top: -56px;
  right: 440px;
  -webkit-animation: waveAnimation3 2s ease-in infinite;
  -moz-animation: waveAnimation3 2s ease-in infinite;
  -o-animation: waveAnimation3 2s ease-in infinite;
  animation: waveAnimation3 2s ease-in infinite;
}

.icon-area i:nth-child(9) {
  top: 48px;
  right: 120px;
  -webkit-animation: waveAnimation2 3s ease-in infinite;
  -moz-animation: waveAnimation9 3s ease-in infinite;
  -o-animation: waveAnimation2 2.5s ease-in infinite;
  animation: waveAnimation2 3s ease-in infinite;
}

.icon-area i:nth-child(10) {
  top: 72px;
  right: 300px;
  -webkit-animation: waveAnimation1 2.5s ease-in infinite;
  -moz-animation: waveAnimation1 2.5s ease-in infinite;
  -o-animation: waveAnimation1 2.5s ease-in infinite;
  animation: waveAnimation1 2.5s ease-in infinite;
}

@-webkit-keyframes waveAnimation1 {
  0% {
    top: 48px;
  }
  66% {
    top: 56px;
  }
  100% {
    top: 48px;
  }
}
@-moz-keyframes waveAnimation1 {
  0% {
    top: 48px;
  }
  66% {
    top: 56px;
  }
  100% {
    top: 48px;
  }
}
@-o-keyframes waveAnimation1 {
  0% {
    top: 48px;
  }
  66% {
    top: 56px;
  }
  100% {
    top: 48px;
  }
}
@keyframes waveAnimation1 {
  0% {
    top: 48px;
  }
  66% {
    top: 56px;
  }
  100% {
    top: 48px;
  }
}

@-webkit-keyframes waveAnimation2 {
  0% {
    top: 72px;
  }
  66% {
    top: 86px;
  }
  100% {
    top: 72px;
  }
}
@-moz-keyframes waveAnimation2 {
  0% {
    top: 72px;
  }
  66% {
    top: 86px;
  }
  100% {
    top: 72px;
  }
}
@-o-keyframes waveAnimation2 {
  0% {
    top: 72px;
  }
  66% {
    top: 86px;
  }
  100% {
    top: 72px;
  }
}
@keyframes waveAnimation2 {
  0% {
    top: 72px;
  }
  66% {
    top: 86px;
  }
  100% {
    top: 72px;
  }
}

@-webkit-keyframes waveAnimation3 {
  0% {
    top: -56px;
  }
  66% {
    top: -48px;
  }
  100% {
    top: -56px;
  }
}
@-moz-keyframes waveAnimation3 {
  0% {
    top: 56px;
  }
  66% {
    top: 48px;
  }
  100% {
    top: 56px;
  }
}
@-o-keyframes waveAnimation3 {
  0% {
    top: -56px;
  }
  66% {
    top: -48px;
  }
  100% {
    top: -56px;
  }
}
@keyframes waveAnimation3 {
  0% {
    top: -56px;
  }
  66% {
    top: -48px;
  }
  100% {
    top: -56px;
  }
}

@-webkit-keyframes waveAnimation4 {
  0% {
    top: 240px;
  }
  66% {
    top: 224px;
  }
  100% {
    top: 240px;
  }
}
@-moz-keyframes waveAnimation4 {
  0% {
    top: 240px;
  }
  66% {
    top: 224px;
  }
  100% {
    top: 240px;
  }
}
@-o-keyframes waveAnimation4 {
  0% {
    top: 240px;
  }
  66% {
    top: 224px;
  }
  100% {
    top: 240px;
  }
}
@keyframes waveAnimation4 {
  0% {
    top: 240px;
  }
  66% {
    top: 224px;
  }
  100% {
    top: 240px;
  }
}

@-webkit-keyframes waveAnimation5 {
  0% {
    top: 370px;
  }
  66% {
    top: 378px;
  }
  100% {
    top: 370px;
  }
}
@-moz-keyframes waveAnimation5 {
  0% {
    top: 370px;
  }
  66% {
    top: 378px;
  }
  100% {
    top: 370px;
  }
}
@-o-keyframes waveAnimation5 {
  0% {
    top: 370px;
  }
  66% {
    top: 378px;
  }
  100% {
    top: 370px;
  }
}
@keyframes waveAnimation5 {
  0% {
    top: 370px;
  }
  66% {
    top: 378px;
  }
  100% {
    top: 370px;
  }
}

.social-icon.active {
  opacity: 1;
}

.social-icon.active::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  background-color: white;
  opacity: 0.15;
  z-index: 1;
  top: -56px;
  left: -56px;
  border-radius: 50%;
}

.social-icon:hover:not(.active)::after {
  cursor: pointer;
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  background-color: white;
  opacity: 0.05;
  z-index: 1;
  top: -56px;
  left: -56px;
  border-radius: 50%;
}

#social-media-content {
  margin-top: 24px;
  padding-bottom:32px;
}

.social-text {
  font-size: 32px;
}


.social-title {
  opacity: 0;
  transition: opacity 0.55s;
  height: 0;
}

.social-text {
  opacity: 0;
  transition: opacity 0.55s;
  height: 0;
  display: none;
}

.social-title.active {
  opacity: 1;
  height: auto;
}
.social-text.active {
  opacity: 1;
  height: 400px;
  display: unset;
}

.icon-area .bi-facebook {
  color: rgb(49, 80, 218);
}

.icon-area .bi-instagram {
  color: transparent;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background-clip: text;
  -webkit-background-clip: text;
}

.icon-area .bi-twitter {
  color: rgb(61, 150, 233);
}

.icon-area .bi-google {
  color: rgb(235, 51, 51);
}

.icon-area .bi-youtube {
  color: rgb(175, 22, 22);
}

.icon-area .fa-reddit {
  color: rgb(209, 124, 27);
}

.icon-area .fa-snapchat {
  color: rgb(229, 241, 53);
}

.icon-area .fa-spotify {
  color: rgb(17, 148, 87);
}

.icon-area .bi-whatsapp {
  color: rgb(84, 199, 145);
}

.icon-area .bi-telegram {
  color: rgb(34, 128, 190);
}

.cta{
  color:rgb(231, 231, 231);
  font-size: 48px;
  text-decoration: none;
  padding-bottom:96px;
  padding-bottom:96px;
  opacity: .7;
  transition: all .4s ease-in;
}
.cta:hover{
  opacity: 1;
  font-size: 56px;
}



@media screen and (max-width: 992px) {
  .social-text {
    width: 720px;
  }

  .icon-area i:nth-child(4) {
    top: 240px;
    left: 48px;
    -webkit-animation: waveAnimation4 3.5s ease-in infinite;
    -moz-animation: waveAnimation4 3.5s ease-in infinite;
    -o-animation: waveAnimation4 3.5s ease-in infinite;
    animation: waveAnimation4 3.5s ease-in infinite;
  }

  .icon-area i:nth-child(7) {
    top: 240px;
    right: 48px;
    -webkit-animation: waveAnimation4 3.1s ease-in infinite;
    -moz-animation: waveAnimation4 3.1 ease-in infinite;
    -o-animation: waveAnimation4 3.1 ease-in infinite;
    animation: waveAnimation4 3.1 ease-in infinite;
  }

  .icon-area i:nth-child(5) {
    top: 370px;
    left: 16px;
    -webkit-animation: waveAnimation5 2.2s ease-in infinite;
    -moz-animation: waveAnimation5 2.2s ease-in infinite;
    -o-animation: waveAnimation5 2.2s ease-in infinite;
    animation: waveAnimation5 2.2s ease-in infinite;
  }
  
  .icon-area i:nth-child(6) {
    top: 370px;
    right: 24px;
    -webkit-animation: waveAnimation5 2.3s ease-in infinite;
    -moz-animation: waveAnimation5 2.3s ease-in infinite;
    -o-animation: waveAnimation5 2.3s ease-in infinite;
    animation: waveAnimation5 2.3s ease-in infinite;
  }

  .icon-area i:nth-child(2) {
    top: 72px;
    left: 265px;
    -webkit-animation: waveAnimation2 3s ease-in infinite;
    -moz-animation: waveAnimation2 3s ease-in infinite;
    -o-animation: waveAnimation2 3s ease-in infinite;
    animation: waveAnimation2 3s ease-in infinite;
  }
  .icon-area i:nth-child(10) {
    top: 72px;
    right: 265px;
    -webkit-animation: waveAnimation1 2.5s ease-in infinite;
    -moz-animation: waveAnimation1 2.5s ease-in infinite;
    -o-animation: waveAnimation1 2.5s ease-in infinite;
    animation: waveAnimation1 2.5s ease-in infinite;
  }

  .icon-area i:nth-child(3) {
    top: 56px;
    left: 365px;
    -webkit-animation: waveAnimation3 2s ease-in infinite;
    -moz-animation: waveAnimation3 2s ease-in infinite;
    -o-animation: waveAnimation3 2s ease-in infinite;
    animation: waveAnimation3 2s ease-in infinite;
  }
  .icon-area i:nth-child(8) {
    top: -56px;
    right: 365px;
    -webkit-animation: waveAnimation3 2s ease-in infinite;
    -moz-animation: waveAnimation3 2s ease-in infinite;
    -o-animation: waveAnimation3 2s ease-in infinite;
    animation: waveAnimation3 2s ease-in infinite;
  }
  

}