.general {
  height: 100%;
  display: flex;
  align-items: center;
}

/* === Intro Animation Styles === */
.intro-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--background-color);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.intro-overlay.is-active {
  opacity: 1;
}

/* Stars Container */
.intro-stars-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/* Individual Stars */
.intro-star {
  position: absolute;
}

.intro-star svg {
  width: 120px;
  height: 120px;
  display: block;
}

/* Logo */
.intro-logo {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 846px;
}

.intro-logo svg {
  width: 100%;
  height: auto;
}

/* === Smooth Keyframe Animations === */

/* Logo Animation: fade in, scale 0.8->1->1.2->1.4, fade out */
@keyframes logoAnimation {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }

  14% {
    opacity: 0;
    transform: scale(0.8);
  }

  26% {
    opacity: 1;
    transform: scale(1);
  }

  43% {
    opacity: 1;
    transform: scale(1.1);
  }

  57% {
    opacity: 1;
    transform: scale(1.2);
  }

  71% {
    opacity: 1;
    transform: scale(1.3);
  }

  86% {
    opacity: 1;
    transform: scale(1.4);
  }

  100% {
    opacity: 0;
    transform: scale(1.4);
  }
}

/* Star 1: top 0%->0%, right 10%->5%, scale 0.6 */
@keyframes star1Animation {
  0% {
    opacity: 0;
    top: 0%;
    right: 10%;
    transform: scale(0.6);
  }

  14% {
    opacity: 0;
    top: 0%;
    right: 10%;
    transform: scale(0.6);
  }

  26% {
    opacity: 1;
    top: 0%;
    right: 10%;
    transform: scale(0.6);
  }

  43% {
    opacity: 1;
    top: 0%;
    right: 7.5%;
    transform: scale(0.6);
  }

  57% {
    opacity: 1;
    top: 0%;
    right: 5%;
    transform: scale(0.6);
  }

  71% {
    opacity: 1;
    top: 0%;
    right: 5%;
    transform: scale(0.6);
  }

  86% {
    opacity: 1;
    top: 0%;
    right: 5%;
    transform: scale(0.6);
  }

  100% {
    opacity: 0;
    top: 0%;
    right: 5%;
    transform: scale(0.6);
  }
}

/* Star 2: top 9%->23%, right 18%->1% */
@keyframes star2Animation {
  0% {
    opacity: 0;
    top: 9%;
    right: 18%;
    transform: scale(1);
  }

  14% {
    opacity: 0;
    top: 9%;
    right: 18%;
    transform: scale(1);
  }

  26% {
    opacity: 1;
    top: 9%;
    right: 18%;
    transform: scale(1);
  }

  43% {
    opacity: 1;
    top: 13%;
    right: 12%;
    transform: scale(1);
  }

  57% {
    opacity: 1;
    top: 18%;
    right: 6%;
    transform: scale(1);
  }

  71% {
    opacity: 1;
    top: 23%;
    right: 1%;
    transform: scale(1);
  }

  86% {
    opacity: 1;
    top: 23%;
    right: 1%;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    top: 23%;
    right: 1%;
    transform: scale(1);
  }
}

/* Star 3: top 25%->10%, right 8%->12%, scale 2.5 */
@keyframes star3Animation {
  0% {
    opacity: 0;
    top: 25%;
    right: 8%;
    transform: scale(2.5);
  }

  14% {
    opacity: 0;
    top: 25%;
    right: 8%;
    transform: scale(2.5);
  }

  26% {
    opacity: 1;
    top: 25%;
    right: 8%;
    transform: scale(2.5);
  }

  43% {
    opacity: 1;
    top: 20%;
    right: 9%;
    transform: scale(2.5);
  }

  57% {
    opacity: 1;
    top: 15%;
    right: 10%;
    transform: scale(2.5);
  }

  71% {
    opacity: 1;
    top: 10%;
    right: 12%;
    transform: scale(2.5);
  }

  86% {
    opacity: 1;
    top: 10%;
    right: 12%;
    transform: scale(2.5);
  }

  100% {
    opacity: 0;
    top: 10%;
    right: 12%;
    transform: scale(2.5);
  }
}

/* Star 4: bottom 33%->25%, left 12%->4%, scale 0.6 */
@keyframes star4Animation {
  0% {
    opacity: 0;
    bottom: 33%;
    left: 12%;
    transform: scale(0.6);
  }

  14% {
    opacity: 0;
    bottom: 33%;
    left: 12%;
    transform: scale(0.6);
  }

  26% {
    opacity: 1;
    bottom: 33%;
    left: 12%;
    transform: scale(0.6);
  }

  43% {
    opacity: 1;
    bottom: 30%;
    left: 10%;
    transform: scale(0.6);
  }

  57% {
    opacity: 1;
    bottom: 27%;
    left: 7%;
    transform: scale(0.6);
  }

  71% {
    opacity: 1;
    bottom: 25%;
    left: 4%;
    transform: scale(0.6);
  }

  86% {
    opacity: 1;
    bottom: 25%;
    left: 4%;
    transform: scale(0.6);
  }

  100% {
    opacity: 0;
    bottom: 25%;
    left: 4%;
    transform: scale(0.6);
  }
}

/* Star 5: bottom 22%->2%, left 20%->1% */
@keyframes star5Animation {
  0% {
    opacity: 0;
    bottom: 22%;
    left: 20%;
    transform: scale(1);
  }

  14% {
    opacity: 0;
    bottom: 22%;
    left: 20%;
    transform: scale(1);
  }

  26% {
    opacity: 1;
    bottom: 22%;
    left: 20%;
    transform: scale(1);
  }

  43% {
    opacity: 1;
    bottom: 16%;
    left: 14%;
    transform: scale(1);
  }

  57% {
    opacity: 1;
    bottom: 10%;
    left: 8%;
    transform: scale(1);
  }

  71% {
    opacity: 1;
    bottom: 2%;
    left: 1%;
    transform: scale(1);
  }

  86% {
    opacity: 1;
    bottom: 2%;
    left: 1%;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    bottom: 2%;
    left: 1%;
    transform: scale(1);
  }
}

/* Star 6: bottom 10%->14%, left 8%->10%, scale 2.5 */
@keyframes star6Animation {
  0% {
    opacity: 0;
    bottom: 10%;
    left: 8%;
    transform: scale(2.5);
  }

  14% {
    opacity: 0;
    bottom: 10%;
    left: 8%;
    transform: scale(2.5);
  }

  26% {
    opacity: 1;
    bottom: 10%;
    left: 8%;
    transform: scale(2.5);
  }

  43% {
    opacity: 1;
    bottom: 11%;
    left: 8.5%;
    transform: scale(2.5);
  }

  57% {
    opacity: 1;
    bottom: 12%;
    left: 9%;
    transform: scale(2.5);
  }

  71% {
    opacity: 1;
    bottom: 14%;
    left: 10%;
    transform: scale(2.5);
  }

  86% {
    opacity: 1;
    bottom: 14%;
    left: 10%;
    transform: scale(2.5);
  }

  100% {
    opacity: 0;
    bottom: 14%;
    left: 10%;
    transform: scale(2.5);
  }
}

/* Apply animations when active */
.intro-overlay.is-active .intro-logo {
  animation: logoAnimation 2.5s linear forwards;
}

.intro-overlay.is-active .intro-star-1 {
  animation: star1Animation 2.5s linear forwards;
}

.intro-overlay.is-active .intro-star-2 {
  animation: star2Animation 2.5s linear forwards;
}

.intro-overlay.is-active .intro-star-3 {
  animation: star3Animation 2.5s linear forwards;
}

.intro-overlay.is-active .intro-star-4 {
  animation: star4Animation 2.5s linear forwards;
}

.intro-overlay.is-active .intro-star-5 {
  animation: star5Animation 2.5s linear forwards;
}

.intro-overlay.is-active .intro-star-6 {
  animation: star6Animation 2.5s linear forwards;
}



/* === End Intro Animation Styles === */

.general .container {
  width: 100%;
}

.general__menu {
  display: flex;
  justify-content: space-between;
  padding: 40px 0 80px 0;
}

.general__menu--block {
  position: relative;
  width: 30%;
}

.general__item {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 10;
  display: block;
}

.general__menu--card {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  transition: transform .3s linear;
}

.general__item img,
.general__menu--card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.general__menu--block:hover .general__menu--card {
  transform: rotate(7deg) translateX(30px) translateY(-25px);
}


@media screen and (max-width: 1279px) {
  .intro-star svg {
    width: 100px;
    height: 100px;
  }

  /* Logo */
  .intro-logo {
    max-width: 60%;
  }
}


@media screen and (max-width: 1023px) {}


@media screen and (max-width: 959px) {
  .general__menu--block {
    width: 32%;
  }

  .intro-star svg {
    width: 80px;
    height: 80px;
  }

  /* Logo */
  .intro-logo {
    max-width: 60%;
  }
}


@media screen and (max-width: 767px) {
  .intro-star svg {
    width: 70px;
    height: 70px;
  }

  /* Logo */
  .intro-logo {
    max-width: 55%;
  }
}


@media screen and (max-width: 599px) {
  .general {
    align-items: flex-start;
    height: auto;
    padding-bottom: 20px;
  }

  .general__menu {
    padding: 0;
  }

  .general__menu {
    flex-direction: column;
    gap: 10px;
  }

  .general__menu--block:nth-child(2) {
    align-self: flex-end;
  }

  .general__menu--block {
    width: 72%;
  }

  .intro-star svg {
    width: 70px;
    height: 70px;
  }

  /* Logo */
  .intro-logo {
    max-width: 65%;
  }
}


@media screen and (max-width: 474px) {
    .intro-star svg {
    width: 60px;
    height: 60px;
  }

  /* Logo */
  .intro-logo {
    max-width: 65%;
  }
}


@media screen and (max-width: 424px) {}


@media screen and (max-width: 374px) {

      .intro-star svg {
    width: 50px;
    height: 50px;
  }
}