@import url("https://fonts.googleapis.com/css2?family=Playball&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Anton&display=swap");

h1,
h2,
h3,
h4 {
  font-family: "Anton", sans-serif;
  letter-spacing: 2px;
}

p,
ul {
  font-family: "Rubik", sans-serif;
}

.sec_1 {
  background: url("./assets/pre-sec1.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}
.btn-1{
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.28) 100%), linear-gradient(99deg, #01d8fd 13.85%, #fc65f8 49.52%, #ffba00 87.9%);
    backdrop-filter: blur(8.252427101135254px);
    transition: all 0.3s ease-in-out;
}
.btn-1:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 8px 20px rgba(252, 101, 248, 0.4), 0 0 15px rgba(1, 216, 253, 0.4);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), linear-gradient(99deg, #ffba00 13.85%, #fc65f8 49.52%, #01d8fd 87.9%);
}

.sec_3 {
  background: url("./assets/pre-sec3.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  background-color: black;
}

.vid-bg {
  border-radius: 20.478px;
  background: var(
    --Linear,
    linear-gradient(
      99deg,
      rgba(1, 216, 253, 0.3) 13.85%,
      rgba(252, 101, 248, 0.3) 49.52%,
      rgba(255, 186, 0, 0.3) 87.9%
    )
  );
  backdrop-filter: blur(13.201147079467773px);
}

.jump {
  transition: transform 0.3s ease-in-out;
  transform: translateZ(0); /* ensures smooth rendering */
}

.jump:hover {
  transform: translateY(-8px);
}

.text-grad1 {
  background: linear-gradient(
    99deg,
    #01d8fd 13.85%,
    #fc65f8 49.52%,
    #ffba00 87.9%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.work {
  border-radius: 30px;
  background: linear-gradient(
      48deg,
      rgba(215, 247, 90, 0) 76.34%,
      rgba(215, 247, 90, 0.2) 100%
    ),
    linear-gradient(
      206deg,
      rgba(252, 101, 248, 0) 69.66%,
      rgba(252, 101, 248, 0.3) 99.19%
    ),
    rgba(255, 255, 255, 0.15);
}

.sec_13 {
  background: url("./assets/sec13.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}