@import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Asap&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Numans&display=swap");


/* var */
:root{
    --p1 : rgb(239, 247, 255);
    --p2 : rgb(248, 220, 129);
    --p3 : rgb(162, 208, 193);
    --p4 : rgb(33, 65, 81);
}

/* ! scroll bar */
body::-webkit-scrollbar-track {
  border-radius: 1px;
  background-color: var(--p1);
}

body::-webkit-scrollbar {
  width: 4px;
  background-color: var(--p1);
}

body::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: var(--p4);
}

/* * main css */
.nunito {
  font-family: "Nunito", sans-serif !important;
}

.asap {
  font-family: "Asap", sans-serif !important;
}

.numans {
  font-family: "Numans", sans-serif !important;
}

* {
  font-family: "Numans", sans-serif;
}

a {
  font-family: "Asap", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Nunito", sans-serif;
}

.navmobile {
  transform: scale(0);
  transition: all;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.68, 0.01, 0.18, 1.42);
}

.navopen {
  transform: scale(1) !important;
}

.line1 {
  transform: translate(25px, -10px) rotate(45deg);
}
.line2 {
  transform: translate(-17px, 57px) rotate(-45deg) scaleX(1.25);
}
.line3 {
  transform: scale(0);
}

/* ! slider js */
.hero-full{
  height: 100vh !important;
  width: 100vw !important;
}

.hero-half{
  height: 20rem !important;
  width: 100vw !important;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 30px !important;
  color: rgb(248, 220, 129);
}

.imgw{
    width: 100% !important;
    min-width: 100% !important;
    height: auto !important;
}
.imgh{
    height: 100% !important;
    min-height: 100% !important;
    width: auto !important;
}

/* ! scroll out js */
.img-scroll{
  background-color: lightgray;
  will-change: transform;
  opacity: 1;
  opacity: calc(var(--visible-y) * var(--visible-y));
  transform: scale(calc(0.5 + calc(var(--visible-y) * 0.5)));
}

.data-scroll{
  transition: all 1s;
  transition-timing-function: ease-in-out;
}