* {
  margin: 0;
  padding: 0;
}

body {
  color: white;
  font-family: "Inter", sans-serif;
  font-size: var(--f-sm);
  background: #181b1b;
}

a {
  color: white;
  text-decoration: none;
  font-size: var(--f-sm);
  font-weight: 500;
}
ul,
ol {
  list-style: none;
}
button {
  border: none;
  cursor: pointer;
  background: transparent;
}

.border-grad {
  position: relative;
}
.border-grad::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 0.6px;
  border-radius: var(--border, 100vw);
  background: linear-gradient(
    90deg,
    #ffffff6b,
    transparent 30%,
    transparent 70%,
    #ffffff6b
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.btn-grad {
  background: linear-gradient(90deg, #7f543e, #ffdeca, #7f543e);
}

h2 {
  width: fit-content;
  margin: 0 auto;
  text-align: center;
  font-size: var(--f-5xl);
  font-weight: 500;
  background: linear-gradient(90deg, #b5b5b5, white, #999);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.html {
  position: fixed;
  scroll-behavior: smooth;
  animation: fixed 0s 9s forwards;
}

::-webkit-scrollbar {
  width: 0; /* або height: 8px; для горизонтального скролу */
}

@keyframes fixed {
  from {
    position: fixed;
  }
  to {
    position: relative;
  }
}

/* --------- */
/* Ф О Р М А */
/* --------- */
.form-wrapper {
  position: fixed;
  z-index: 1000;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  display: none;
}

.form-bg {
  position: absolute;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  background: #050505da;
}

.form {
  position: absolute;
  top: 50vh;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 35vw;
  box-sizing: border-box;
  padding: 4vw 3vw 0vw 3vw;
  background: #131313;
  border-radius: 0.83vw;
  --border: 0.83vw;
}

.form-close {
  position: absolute;
  top: 2vw;
  right: 2vw;
  color: #b5b5b5;
  font-size: 1vw;
  font-weight: 600;
}

.form-title {
  margin: 0 auto;
  font-size: 1.8vw;
  text-align: left;
  display: block;
}

.form-inputs {
  margin: 2.67vw auto;
  gap: 1.58vw;
  flex-direction: column;
  display: flex;
}

.form p {
  font-size: 0.9vw;
}

.form input,
.form textarea {
  width: 100%;
  margin-top: 0.4vw;
  font-size: 1vw;
  padding: 0.5vw 1vw;
  box-sizing: border-box;
  outline: none !important;
  color: #fff;
  background: #505050;
  border: none;
  border-radius: 0.5vw;
}

.form-btn {
  width: 100% !important;
  border-radius: 0.5vw !important;
  --border: 0.5vw;
  justify-content: center !important;
}

.inpt-error {
  border: 1px solid red !important
}

.iti__country-list {
  background: #181b1b !important;
}

@media (max-width: 1001px) {
  .form {
    width: 70vw;
    padding: 7vw 4vw 2vw 4vw;
    border-radius: 4vw;
    --border: 4vw;
  }
  .form-close {
    font-size: 3vw;
    top: 3vw;
    right: 4vw;
  }
  .form-title {
    font-size: 4.5vw;
    text-align: center;
  }
  .form-inputs {
    margin: 3vw 0;
    gap: 2vw;
  }
  .form-inputs p,
  .form-inputs input,
  .form-inputs textarea {
    font-size: 2.5vw;
  }
  .form-inputs input,
  .form-inputs textarea {
    margin-top: 1vw;
    border-radius: 1.5vw;
    padding: 1.5vw 3vw;
  }
  .form-btn {
    padding: 5vw !important;
    font-size: 4vw !important;
    border-radius: 1.5vw !important;
    --border: 1.5vw;
  }
}

@media (max-width: 431px) {
  .form {
    width: 90vw;
  }
  .form-close {
    font-size: 4vw;
    top: 3vw;
    right: 4vw;
  }
  .form-title {
    font-size: 5.5vw;
  }
  .form-inputs p,
  .form-inputs input,
  .form-inputs textarea {
    font-size: 4vw;
  }
  .form-btn {
    font-size: 6vw !important;
    border-radius: 1.5vw !important;
    --border: 1.5vw;
  }
}


.custom-select-wrapper {
  position: absolute;
  top: 2vw;
  right: 1vw;
  z-index: 20;
  padding: 0 0.5vw;
}

@media (max-width: 480px) {
  .custom-select-wrapper {
    top: 13vw;
    right: 6vw;
    width: 6vw;
    padding: 0 1vw;
  }
}

.custom-select {
  background: none;
  cursor: pointer;
  user-select: none;
}

.custom-options {
  position: absolute;
  top: 100%;
  right: 0;
  background: rgba(13, 13, 13, 0.815);
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 8px 8px;
  z-index: 10;
  height: 0;
  width: 0;
  transition: all 0.3s;
  overflow: hidden;
  display: grid;
}

@media (max-width: 480px) {
  .custom-options a {
    margin: 2vw 1vw;
  }
}
.custom-options a {
  margin: 0.5vw auto;
  color: white;
  text-decoration: none;
  display: block;
}

@media (max-width: 480px) {
  .custom-options.open {
    height: 150%;
  }
  .custom-select,
  .custom-option {
    font-size: 4vw;
  }
}

.custom-options.open {
  width: 100%;
  height: 850%;
}