body {
  background-color: #000000;
  color: white;
  font-family: Arial, sans-serif;
  text-align: center;
  margin: 0;
  padding: 0;
}


@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap');

html,
body {
  cursor: url('/img/cursor.webp'), auto;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #000000;
  z-index: 1002 !important;
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  min-height: 50px;
}


.burger-container {
  display: flex;
  gap: 5px;
  cursor: pointer;
  margin-left: 20px;
  margin-top: 5px;
  position: relative;
  z-index: 1003;
}

.burger-menu {
  position: relative;
  top: 9px;
  left: 5px;
  width: 30px;
  height: 22px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.burger-menu div {
  position: absolute;
  left: 0;
  width: 30px;
  height: 4px;
  background-color: white;
  border-radius: 5px;
  transition: all 0.3s ease;
  transform-origin: center;
}


/* Анімація переходу у X */
.burger-menu div:nth-child(1) {
  top: 0;
}

.burger-menu div:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

.burger-menu div:nth-child(3) {
  top: 100%;
  transform: translateY(-100%);
}

.burger-menu.active div:nth-child(1) {
  top: 50%;
  transform: rotate(45deg);
}

.burger-menu.active div:nth-child(2) {
  opacity: 0;
}

.burger-menu.active div:nth-child(3) {
  top: 50%;
  transform: rotate(-45deg);
}


.menu-text {
  padding: 10px;
  color: white;
  font-size: 20px;
  font-weight: bold;
}

.navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: relative;
}

.nav-links {
  display: flex;
  gap: 20px;
  align-items: center;
}

.nav-links li {
  list-style: none;
}

.nav-links a {
  color: white;
  text-decoration: none;
  font-size: 20px;
  padding: 8px 15px;
  border-radius: 5px;
  transition: background-color 0.3s;
  font-weight: bold;
}

.nav-links a:hover {
  background-color: #a442b8;
}

.nav-links a.active {
  background-color: #a442b8;
}

/* Кнопка Discord для navbar */
.discord-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
}

.discord-logo img {
  width: 45px;
  height: 45px;
  transition: transform 0.3s ease;
}

.discord-logo a:hover img {
  transform: scale(1.1);
}

.mobile-nav img {
  width: 35px;
}

.discoed-button {
  background-color: #a442b8;
  border-radius: 5px;
}

/* Мобільне меню */
.mobile-nav {
  position: fixed;
  top: -100%;
  left: 0;
  width: 100%;
  height: auto;
  background-color: #000000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 999;
  opacity: 0;
  transition: top 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.mobile-nav.active {
  position: fixed;
  top: 0;
  opacity: 1;
  padding-top: 60px;
}

/* Стиль для лінків у мобільному меню */
.mobile-nav-links {
  /* margin-top: 35px; */
  list-style-type: none;
  padding: 0;
  text-align: center;
}

.mobile-nav-links li {
  margin: 20px 0;
}

.mobile-nav-links a {
  color: white;
  text-decoration: none;
  font-size: 24px;
  display: block;
  padding: 10px;
  transition: background-color 0.3s ease;
}

.mobile-nav-links a:hover {
  background-color: #a442b8;
}

/* Кнопка Discord в мобільному меню */
.mobile-nav .discord-logo {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Приховуємо текст "FALATIA" на великих екранах */
@media (min-width: 769px) {
  .menu-text {
    display: none;
  }

  .burger-menu {
    display: none;
  }

  /* Мобільне меню приховується на великих екранах */
  .mobile-nav {
    display: none;
  }

  /* Відображаємо navbar по центру на великих екранах */
  .navbar {
    justify-content: center;
  }

  .nav-links {
    padding: 0px;
    display: flex;
  }

  /* Відображення кнопки Discord на великих екранах */
  .navbar .discord-logo {
    display: flex;
    margin-left: 20px;
  }
}

/* Ховаємо стандартне меню на мобільних пристроях */
@media (max-width: 768px) {
  .nav-links {
    display: none;
  }

  .mobile-nav .discord-logo {
    display: block;
  }

  .navbar .discord-logo {
    display: none;
  }
}



@media (min-width: 768px) {
  .header {
    padding: 0px;
  }
}

/* Вирівнюємо навігацію по центру для великих екранів */
@media (min-width: 1024px) {
  .mobile-nav-links {
    display: none;
  }
}

/* Main-banner */

.main-banner {
  width: 100%;
  height: 60vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: 80px;
}

.main-banner img {
  width: 90%;
  height: 90%;
  object-fit: contain;
}


@media (max-width: 768px) {
  .main-banner {
    height: 50vh;
    margin-top: 50px;
  }

  .main-banner img {
    width: 110%;
    height: 110%;
    object-fit: cover;
  }
}

@media (max-width: 480px) {
  .main-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Загальні налаштування секції */
.features-section {
  padding: 60px 20px;
  text-align: center;
}

.section-title {
  font-size: 28px;
  margin-bottom: 40px;
}

.highlight {
  color: #c457da;
}

/* Сітка карток */
.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
  max-width: 900px;
  margin: 0 auto;
}

@media (max-width: 425px) {
  .features-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (min-width: 640px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.feature-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  height: 300px;
  /* Фіксована висота картки */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s;
  background-color: #181818;
}

.feature-card img {
  position: relative;
  /* додаємо, щоб працювали left/top */
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: all 0.3s ease;
}

/* Зсув зображення вліво */
.img-shift-left {
  left: -70px;
  position: relative;
  transition: left 0.3s ease;
}

/* Зсув зображення вниз */
.img-shift-down {
  top: 30px;
  position: relative;
  transition: top 0.3s ease;
}

/* Адаптив для планшетів і менших екранів */
@media (max-width: 1024px) {
  .img-shift-left {
    left: -70px;
  }

  .img-shift-down {
    top: 25px;
  }
}

@media (max-width: 768px) {
  .img-shift-left {
    top: 10px;
    left: -26px;
  }

  /* .img-shift-down {
    top: 70px;
  } */
}


@media (max-width: 425px) {
  .img-shift-left {
    top: 10px;
    left: -45px;
  }

  /* .img-shift-down {
    top: 70px;
  } */
}


/* Адаптив для мобільних екранів */
@media (max-width: 375px) {
  .img-shift-left {
    top: 10px;
    left: -18px;
  }

  /* .img-shift-down {
    top: 70px;
  } */
}


/* Адаптив для мобільних екранів */
@media (max-width: 320px) {
  .img-shift-left {
    top: 10px;
    left: -20px;
  }

  /* 
  .img-shift-down {
    top: 70px;
  } */
}



.feature-card:hover {
  transform: translateY(-5px);
}


/* Текст поверх картинки з напівпрозорим фоном */
.feature-card p {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 15px;
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  box-sizing: border-box;
  z-index: 1;
}

.feature-card .blue {
  color: #de7df1;
}



.top-left-text {
  position: absolute;
  top: 30px;
  /* трохи нижче від верху */
  left: 15%;
  /* ближче до центру, а не в лівому куті */
  font-size: 28px;
  font-weight: 600;
  color: white;
  z-index: 10;
}

.bottom-right-text {
  position: absolute;
  bottom: 60px;
  /* трохи вище від краю */
  right: 15%;
  /* ближче до центру */
  font-size: 26px;
  font-weight: 600;
  color: white;
  z-index: 10;
}

.blue {
  color: #c457da;
}

.minecraft-section {
  margin-top: 5%;
  position: relative;
  background: #000000;
  padding: 100px 0;
  text-align: center;
  overflow: hidden;
}

.center-image {
  width: 250px;
  position: relative;
  z-index: 2;
}

.bubble {
  position: absolute;
  padding: 10px 20px;
  border-radius: 30px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 1;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
}

.bubble-1 {
  top: 5%;
  left: 45%;
  background-color: rgba(75, 63, 153, 0.3);
  color: #9c8bf1;
}

.bubble-1:hover {
  background-color: rgb(50, 43, 95);
}

.bubble-2 {
  top: 20%;
  right: 29%;
  background-color: rgba(153, 44, 44, 0.3);
  color: #f58080;
}

.bubble-2:hover {
  background-color: rgb(90, 17, 17);
}

.bubble-3 {
  bottom: 25%;
  right: 30.5%;
  background-color: rgba(34, 91, 133, 0.3);
  color: #20b9ff;
}

.bubble-3:hover {
  background-color: rgb(28, 72, 99);
}

.bubble-4 {
  bottom: 25%;
  left: 32%;
  background-color: rgba(107, 76, 161, 0.3);
  color: #8477a8;
}

.bubble-4:hover {
  background-color: rgb(56, 42, 87);
}

.bubble-5 {
  top: 40%;
  left: 20%;
  background-color: rgba(132, 112, 51, 0.3);
  color: #8d7a23;
}

.bubble-5:hover {
  background-color: rgb(80, 69, 31);
}

.bubble-6 {
  top: 40%;
  right: 20%;
  background-color: rgba(134, 95, 63, 0.3);
  color: #9e612f;
}

.bubble-6:hover {
  background-color: rgb(78, 46, 22);
}

.bubble-7 {
  top: 20%;
  left: 32%;
  background-color: rgba(62, 190, 109, 0.3);
  color: #3cff97;
}

.bubble-7:hover {
  background-color: rgb(23, 46, 31);
}

.bubble-8 {
  bottom: 5%;
  left: 45%;
  background-color: rgba(166, 76, 166, 0.3);
  color: #ff00ff;
}

.bubble-8:hover {
  background-color: rgb(80, 29, 80);
}



@media (max-width: 1440px) {
  .minecraft-section {
    display: none;
  }
}


.social-section {
  margin-top: 5%;
  display: flex;
  flex-wrap: wrap;
  /* Дозволяє переходити на новий рядок */
  justify-content: center;
  gap: 20px;
  padding: 60px 5%;
  /* Горизонтальні падінги у % */
  background-color: #000000;
}

/* Гнучкі кнопки: мінімум 170px, максимум — 100% контейнера */
.social-button {
  flex: 1 1 170px;
  /* flex-grow, flex-shrink, flex-basis */
  max-width: 170px;
  height: 130px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Іконка всередині кнопки */
.social-button img {
  width: 40px;
  height: 40px;
}

/* Hover-ефект */
.social-button:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Кольори для кожної кнопки */
.discord {
  background-color: #5865F2;
}

.telegram {
  background-color: #B50059;
}

.youtube {
  background-color: #FF4F4F;
}

.tiktok {
  background-color: #ffffff;
}

.tiktok img {
  filter: invert(0);
}

/* ---------- Адаптив ---------- */

/* Планшети до 768px */
@media (max-width: 768px) {
  .social-section {
    padding: 50px 3%;
    gap: 15px;
  }

  .social-button {
    flex: 1 1 140px;
    max-width: 140px;
    height: 110px;
  }

  .social-button img {
    width: 36px;
    height: 36px;
  }
}

/* Смартфони до 480px */
@media (max-width: 480px) {
  .social-section {
    padding: 40px 2%;
    gap: 10px;
  }

  .social-button {
    flex: 1 1 100%;
    height: 90px;
  }

  .social-button img {
    width: 32px;
    height: 32px;
  }
}



.join-text {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  color: white;
  margin-top: 40px;
}

.join-text .blue {
  color: #c457da;
}

.hero-section,
.hero-background,
.image-container {
  overflow: visible;
}

.hero-section {
  margin-top: 15%;
  background-color: #000000;
  padding: 40px 20px 80px 20px;
  text-align: center;
  position: relative;
  margin-bottom: 10%;
}

.hero-background {
  position: relative;
  display: inline-block;
  width: 100%;
}

.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0px;
  margin-bottom: 20px;
  position: relative;
}

.image-item {
  position: absolute;
  width: 330px;
  height: 330px;
  overflow: hidden;
  z-index: 1;
}

.image-item:nth-child(1) {
  left: 30%;
  z-index: 2;
}

.image-item:nth-child(2) {
  margin-top: 85px;
  left: 42%;
  width: 250px;
  height: 250px;
  z-index: 7;
}

.image-item:nth-child(3) {
  left: 48%;
  z-index: 3;
}

.image-item:nth-child(4) {
  left: 56%;
  z-index: 2;
}

.image-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: filter 0.3s ease;
}

/*  */



.center-btn {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 10;
}


.btn {
  padding: 12px 20px;
  font-size: 16px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  transition: 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

.btn.primary {
  background-color: rgba(229, 47, 235, 0.7);
  color: white;
}

.btn.primary:hover {
  background-color: rgba(129, 26, 133, 0.7);
}


.arrow {
  position: absolute;
  width: 0;
  height: 0;
}

.top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 10px;
}

.profession {
  background: #e53935;
  color: white;
  padding: 4px 8px;
  border-radius: 5px;
  font-size: 14px;
  white-space: nowrap;
}

.nickname {
  color: #020202;
  font-size: 20px;
  white-space: nowrap;
}

.divider {
  width: 100%;
  height: 1px;
  background: #050505;
  margin: 8px 0;
  opacity: 0.4;
}

.description {
  color: #000000;
  font-size: 17px;
}


.arrow {
  position: absolute;
  width: 0;
  height: 0;
}

.arrow-right {
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid white;
  transform: translateY(-50%);
}

.arrow-left {
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid white;
  transform: translateY(-50%);
}

.arrow-up {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid white;
  transform: translateX(-50%);
}

.arrow-down {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid white;
  transform: translateX(-50%);
}


.image-item {
  position: absolute;
  pointer-events: none;
}

.hitbox {
  position: absolute;
  background: transparent;
  pointer-events: auto;
}

.tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #fde9c4;
  color: #000;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  display: none;
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  min-width: 200px;
  text-align: left;
}

.tooltip .header {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.tooltip .role {
  background: #e74c3c;
  color: #fff;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: bold
}

.tooltip .name {
  font-size: 16px;
  font-weight: bold
}

.tooltip .divider {
  height: 1px;
  background: #999;
  margin: 5px 0
}

.tooltip .description {
  font-weight: 600
}

.image-item img {
  pointer-events: none;
}

.tooltip .header {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.tooltip .role {
  background: #e74c3c;
  color: #fff;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: bold
}

.tooltip .name {
  font-size: 16px;
  font-weight: bold
}

.tooltip .divider {
  height: 1px;
  background: #999;
  margin: 5px 0
}

.tooltip .description {
  font-weight: 600
}

.hero-mobile {
  display: none;
}

.hero-section {
  display: block;
}

@media (max-width: 1025px) {
  .hero-section {
    display: none;
  }

  .hero-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    gap: 20px;
  }

  .hero-mobile .btn.primary.center-btn {
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 8px;
    background-color: #6c63ff;
    color: white;
    text-align: center;
    cursor: pointer;
    user-select: none;
  }

  .hero-mobile .btn.primary.center-btn:hover {
    background-color: #574fd6;
  }

  .mobile-image-container img {
    max-width: 700px;
    width: 100%;
    height: auto;
    display: block;
  }
}


@media (min-width: 1026px) {
  .hero-mobile {
    display: none;
  }

  .hero-section {
    display: block;
  }

}