/* ГОЛОВНА/BODY */

html, body {
  overflow-x: hidden;
}

.allpage {
	background-color: #16161d;
	color: #fff;
	font-family: Nunito;
}




/* NAV */

.customlogo {
	font-weight: 700;
}


.mynavbar .aglavbutton {
	color: #fff;
	text-decoration: none;
}

.mynavbar a {
	color: #59596e;
}

/* Кнопки/<a>/інше */



.litebtn {
	transition: 0.2s;
    background: none;     
    border: none;         
    padding: 0;           
    margin: 0;                      
    cursor: pointer;
    color: #59596e;
    text-decoration: none;
}

.litebtn:hover {
	transition: 0.2s;
    background: none;     
    border: none;         
    padding: 0;           
    margin: 0;                      
    cursor: pointer;
    color: #7c7b9d;
    text-decoration: none;
}


.custom-form {
  display: flex;
  gap: 12px;
}

/* Спливаюче вікно */
.popup {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: #222;
  color: #fff;
  padding: 14px 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease;
  z-index: 1000;
}

.popup.show {
  opacity: 1;
  transform: translateY(0);
}




.myinput {
  background-color: #16161d;
  border: 2px solid #2b2b2b;    /* темно-сірий бордер */
  color: #fff;                  /* білий текст */
  border-radius: 12px;          /* скруглені кути */
  padding: 12px 16px;
  font-size: 16px;
  outline: none;
  height: 50px;
}

a .logotextbtn {
	transition: 0.5s;
}

a .logotextbtn:hover {
	transition: 0.5s;
	transform: scale(1.08);
}

a {
	transition: 0.2s;
}

a:hover {
	transition: 0.2s;
	color: #7c7b9d;
	text-decoration: none;
}


.mynavlink {
    position: relative;
    color: #7c7b9d;
    text-decoration: none;
}

.mynavlink::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: #fff;
    transition: width 0.3s;
}


.mybtn {
	background-color: #716ee7;  /* основний колір */
    color: #ffffff;             /* колір тексту */
    padding: 10px 20px;         /* вертикальні і горизонтальні відступи */
    border: 1px;               /* без рамки */
    border-radius: 10px;           /* різкі кути */
    font-size: 16px;            /* розмір тексту */
    font-weight: 600;           /* трохи жирніше */
    cursor: pointer;            /* курсор при наведенні */
    transition: background-color 0.3s, transform 0.2s; /* плавна анімація */
}


.mybtn:hover {
    background-color: #5b54d1;  /* трохи темніший при наведенні */
}

/* FOOTER */

/* ANIMATION */

.floating-bg {
  position: relative;
  min-height: 400px;
  overflow: hidden; /* щоб картинка не вилазила */
}

.floating-bg::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 400px; /* ширина картинки */
  height: 400px; /* висота картинки */
  background: url('assets/images/island.png') no-repeat;
  animation: floatY 6s ease-in-out infinite alternate;
  pointer-events: none; /* щоб не заважала клікам */
}

/* Анімація вгору-вниз */
@keyframes floatY {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(40px); /* наскільки опускається вниз */
  }
}

.section-with-bg {
  position: relative;
  min-height: 400px;
}

/* Білий прямокутник */
.section-with-bg::before {
  content: "";
  position: absolute;
  right: -1000px;   /* щоб вилазив за межі контейнера */
  top: 80px;
  width: 1400px;
  height: 600px;
  background: #1d1d2a;
  z-index: -1;    /* відправляємо за картинку */
  box-shadow: 0 0 20px rgba(0,0,0,0.1); /* легка тінь, щоб виглядало як елемент дизайну */
  border-radius: 90px;
}

.section-with-bg-left {
  position: relative;
  min-height: 400px;
}

.section-with-bg-left::before {
  content: "";
  position: absolute;
  right: -20px;   /* щоб вилазив за межі контейнера */
  top: 45px;
  width: 1400px;
  height: 400px;
  background: #1d1d2a;
  z-index: -1;    /* відправляємо за картинку */
  box-shadow: 0 0 20px rgba(0,0,0,0.1); /* легка тінь, щоб виглядало як елемент дизайну */
  border-radius: 90px;
}

.section-with-bg-for-skin {
  position: relative;
  min-height: 400px;
}

.section-with-for-skin::before {
  content: "";
  position: absolute;
  right: -20px;   /* щоб вилазив за межі контейнера */
  top: 45px;
  width: 1400px;
  height: 400px;
  background: #1d1d2a;
  z-index: -1;    /* відправляємо за картинку */
  box-shadow: 0 0 20px rgba(0,0,0,0.1); /* легка тінь, щоб виглядало як елемент дизайну */
  border-radius: 90px;
}

/* Pop-up */
.popup {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: #222;
  color: #fff;
  padding: 14px 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease;
  z-index: 2000;
}

.popup.show {
  opacity: 1;
  transform: translateY(0);
}

.popup {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: #222;
  color: #fff;
  padding: 14px 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease;
  z-index: 2000;
}

.popup.show {
  opacity: 1;
  transform: translateY(0);
}

            .profile-card {
              background: #1d1d2a;
              border-radius: 15px;
              padding: 25px;
              box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            }
            .skin-box {
              background: #1d1d2a;
              color: white;
              border-radius: 15px;
              padding: 20px;
            }
            .skin-box button {
              background: white;
              color: #4f46e5;
              border: none;
            }
            .locked-box {
              background: #1d1d2a;
              border-radius: 15px;
              text-align: center;
              padding: 40px;
            }
            .locked-icon {
              font-size: 60px;
              color: #4f46e5;
              margin-bottom: 20px;
            }

            .nav-link {
                position: relative;
                color: #59596e;
                text-decoration: none;
                transition: 0.3s;
            }

            .nav-link:hover {
                content: '';
                height: 2px;
                color: #7c7b9d;
                transition: 0.3s;
            }

            a {
              text-decoration: none;
            }

            a:hover {
              color: #333;
            }

            .skin-box {
              background: #6366f1;
              border-radius: 15px;
              padding: 20px;
              color: white;
            }

            .skin-preview-wrapper {
              background: rgba(255,255,255,0.15); /* трохи світліший фон */
              border-radius: 10px;
              display: inline-flex;
              justify-content: center;
              align-items: center;
              padding: 10px;
              margin-bottom: 15px;
            }