@import "tailwindcss";

:root {
  --text-color: #273c8d;
  --bg-color: #fdf5ee;
}

* {
  transition: 0.5s;
}


body {
  overflow-x: hidden;
  font-family: var(--font-dm-sans), sans-serif;
  /* font-family: var(--font-barlow-condensed), sans-serif; */
}
a,button{
  cursor: pointer;
}
/* button */
.btn{
  background: linear-gradient(#4881D0, #273c8d);
  color: var(--bg-color);
  padding: 0.65rem 1.5rem;
  border-radius: 54px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 400ms ease;
  border: 1px solid rgb(232, 230, 230);
}
.btn:hover {
  background: linear-gradient(#273c8d, #4881D0);
  color: var(--bg-color);
}
.bg-dradient{
  background: linear-gradient(#4881D0, #273c8d);
}
.container {
  width: 100%;
  padding-right: var(--bs-gutter-x, 0.75rem);
  padding-left: var(--bs-gutter-x, 0.75rem);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 790px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}

h1 {
  font-size: 36px;
}

h2 {
  font-size: 30px;
}

h3 {
  font-size: 22px;
}

h4 {
  font-size: 18px;
}

h5 {
  font-size: 16px;
}

h6 {
  font-size: 15px;
}

.sroll-nav {
  animation: smoothScroll 1s forwards;
}

@keyframes smoothScroll {
  0% {
    transform: translateY(-90px);
  }

  100% {
    transform: translateY(0px);
  }
}

.jump {
    -webkit-animation: jumpAni 7s linear infinite;
    animation: jumpAni 7s linear infinite
}

@-webkit-keyframes jumpAni {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    40% {
        -webkit-transform: translateY(-60px);
        transform: translateY(-60px)
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes jumpAni {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    40% {
        -webkit-transform: translateY(-60px);
        transform: translateY(-60px)
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

.jump-reverse {
    -webkit-animation: jumpReverseAni 7s linear infinite;
    animation: jumpReverseAni 7s linear infinite
}

@-webkit-keyframes jumpReverseAni {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px)
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes jumpReverseAni {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -webkit-transform: translateY(60px);
        transform: translateY(60px)
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}