.dc-home-animation-container {
  background: #ffcc00;
  width: 100vw;
  height: 112vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: absolute;
  left: -15px;
}
@media (max-width: 480px) {
  .dc-home-animation-container {
    left: -10px;
  }
}
.dc-home-animation-container h1 {
  position: relative;
  color: #ffcc00;
  z-index: 2;
  opacity: 0;
  margin: 0 0 0 -85%;
  animation: dcHomeAnimationShowHeading 0.3s ease-in 2.5s forwards;
}
.dc-home-animation-container h1 .dc-home-animation-heading-row-1 {
  animation: dcHomeAnimationMoveHeadingIn1 2s ease-in-out 2.3s forwards;
}
.dc-home-animation-container h1 .dc-home-animation-heading-row-2 {
  animation: dcHomeAnimationMoveHeadingIn2 2s ease-in-out 2.3s forwards;
}
.dc-home-animation-container h1 .dc-home-animation-heading-row-3 {
  animation: dcHomeAnimationMoveHeadingIn3 2s ease-in-out 2.3s forwards;
}
.dc-home-animation-container h1 .dc-home-animation-heading-row-4 {
  animation: dcHomeAnimationMoveHeadingIn4 2s ease-in-out 2.3s forwards;
}
.dc-home-animation-container .custom-logo-container {
  position: relative;
  width: 100%;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1vw;
  height: 46.5px;
}
.dc-home-animation-container .logoD {
  z-index: 1;
  position: relative;
  width: clamp(125px,20vw,21vw);
  height: clamp(125px,20vw,21vw);
  background: #221c36;
  transform: rotate(45deg);
  clip-path: polygon(0 0,100% 0,100% 100%,0% 100%);
  left: 4vw;
  animation: dcHomeAnimationMoveLogoDIn 1.9s ease-in-out forwards, dcHomeAnimationZoomLogo 2s ease-in-out 1.9s forwards;
}
.dc-home-animation-container .logo-d-inner {
  position: relative;
  top: 50%;
  left: 50%;
  height: 66%;
  width: 66%;
  transform: translate(-50%,-50%);
  background-color: #ffcc00;
  animation: shrinkLogoDInner 0.2s ease-in-out forwards 2s;
}
.dc-home-animation-container .letterC {
  position: relative;
  opacity: 0;
  width: clamp(95px,13vw,20vw);
  height: clamp(95px,13vw,20vw);
  border-radius: 50%;
  border: solid clamp(20px,3.2vw,4vw) #221c36;
  background-color: #ffcc00;
  animation: dcHomeAnimationMoveLogoCIn 2s ease-out forwards 0.2s, dcHomeAnimationZoomLogoC .5s ease-in-out 2.1s forwards;
}
.dc-home-animation-container .inner-circle {
  position: absolute;
  width: clamp(91px,14vw,20vw);
  height: clamp(95px,14vw,20vw);
  background: #fc0;
  clip-path: polygon(0% 0%,50% 0,100% 50%,50% 100%,0% 100%);
  transform: rotate(90deg);
  top: 50%;
  left: -5%;
  transform: translate(-50%,-50%);
}
@media screen and (max-width: 1000px) {
  .dc-home-animation-container {
    top: -71px;
  }
}
@media screen and (min-width: 2400px) {
  @keyframes dcHomeAnimationZoomLogo {
    0% {
      right: 45.5%;
      transform: rotate(45deg);
    }
    100% {
      height: 183rem;
      width: 95rem;
      right: -22rem;
      transform: rotate(45deg);
    }
  }
}
@keyframes shrinkLogoDInner {
  0% {
    height: 70%;
    width: 70%;
  }
  100% {
    height: 0%;
    width: 0%;
  }
}
@keyframes dcHomeAnimationMoveLogoCIn {
  0% {
    right: -140%;
    opacity: 1;
  }
  100% {
    right: -0.5%;
    opacity: 1;
  }
}
@keyframes dcHomeAnimationMoveLogoDIn {
  0% {
    transform: translatex(600%) rotate(45deg);
  }
  100% {
    right: 45.4%;
    transform: rotate(45deg);
  }
}
@keyframes dcHomeAnimationZoomLogo {
  0% {
    right: 45.5%;
    transform: rotate(45deg);
  }
  100% {
    height: 183rem;
    width: 72rem;
    right: -22rem;
    transform: rotate(45deg);
  }
}
@keyframes dcHomeAnimationZoomLogoForPhones {
  0% {
    right: 45.5%;
    transform: rotate(45deg);
  }
  100% {
    height: 183rem;
    width: 72rem;
    right: -22rem;
    transform: rotate(45deg);
  }
}
@keyframes dcHomeAnimationZoomLogoC {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes dcHomeAnimationShowHeading {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes dcHomeAnimationMoveHeadingIn1 {
  0% {
    transform: translateX(-140px);
  }
  100% {
    margin-left: 0;
  }
}
@keyframes dcHomeAnimationMoveHeadingIn2 {
  0% {
    margin-left: -100px;
  }
  100% {
    margin-left: 0;
  }
}
@keyframes dcHomeAnimationMoveHeadingIn3 {
  0% {
    margin-left: -150px;
  }
  100% {
    margin-left: 0;
  }
}
@keyframes dcHomeAnimationMoveHeadingIn4 {
  0% {
    margin-left: -200px;
  }
  100% {
    margin-left: 0;
  }
}
@keyframes dcHomeAnimationZoomLogoForPhones {
  0% {
    right: 45.5%;
    transform: rotate(45deg);
  }
  100% {
    height: 183rem;
    width: 100rem;
    right: -22rem;
    transform: rotate(45deg);
  }
}
@media screen and (min-width: 2400px) {
  @keyframes dcHomeAnimationZoomLogo {
    0% {
      right: 45.5%;
      transform: rotate(45deg);
    }
    100% {
      height: 183rem;
      width: 95rem;
      right: -22rem;
      transform: rotate(45deg);
    }
  }
}
@media screen and (max-width: 900px) and (orientation: landscape) {
  h1 {
    font-size: 4rem;
    top: 10%;
  }
}