@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face{
    font-family: "NB-International-Pro-Bold";
    src: local("NB-International-Pro-Bold"), url("./assets/NB-International-Pro-Bold.ttf") format("opentype");
    font-weight: normal;
}

body{
    background-color: #FAF8F3;
    color: #0E0E0E;
    font-family: "Epilogue", sans-serif;
}
.img-container{
    display: none;
}
.home-text{
    font-family: "NB-International-Pro-Bold";
}
.btn, .btn-about{
    position: relative;
    text-decoration: none;
}
.btn::after{
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    border-radius: 5px;
    height: 1px;
    bottom: 0;
    left: 0;
    background: currentcolor;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}
.btn:hover::after, .btn-about:hover::after{
    transform: scaleX(1);
    transform-origin: bottom left;
}
/*==========*/
.btn-about::before{
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(1);
    border-radius: 5px;
    height: 4px;
    bottom: 0;
    left: 0;
    background: currentcolor;
    transform-origin: bottom right;
}
.btn-about:hover::before{
    transform: scaleX(0);
}
.btn-about::after{
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    border-radius: 5px;
    height: 4px;
    bottom: 0;
    left: 0;
    background: currentcolor;
    transform-origin: bottom right;
    transition: transform 0.5s ease-out;
}
/*==========*/
.btn-1{
    background: linear-gradient(to right, #0E0E0E 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all .5s ease-out;
}
.btn-1:hover{
    background-position: left bottom;
}
.text{
    transition: all .6s ease-out;
}
.text:hover{
    color: #FF5F38;  
}
/*===== gradient =====*/
/*.gradient-bg{
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle, #FF5F38, #FAF8F3, #FAF8F3);
}
.gradients-container{
    filter: blur(40px) ;
    width: 100%;
    height: 100%;
}
.gradient1{
    position: absolute;
    background: radial-gradient(circle, rgba(18, 101, 255, 0.808) 0, rgba(18, 113, 255, 0) 50%) no-repeat;
    mix-blend-mode: normal;
    width: 80%;
    height: 80%;
    top: calc(50% - 80% / 2);
    left: calc(50% - 80% / 2);
    transform-origin: center center;
    animation: moveVertical 30s ease infinite;
    opacity: 1;
}
.gradient2{
    position: relative;
    background: radial-gradient(circle at center, rgba(52, 81, 247, 0.884) 0, rgba(221, 74, 255, 0) 50%) no-repeat;
    mix-blend-mode: hard-light;
    width: 80%;
    height: 80%;
    top: calc(50% - 80% / 2);
    right: calc(50% - 90% / 2);
    transform-origin: calc(50% - 400px);
    animation: moveVertical 20s reverse infinite;
    opacity: 1;
}
.gradient3{
    position: relative;
    background: radial-gradient(circle at left, rgba(115, 39, 236, 0.603) 0, rgba(100, 220, 255, 0) 50%) no-repeat;
    mix-blend-mode: normal;
    width: 80%;
    height: 80%;
    transform-origin: calc(50% + 500px);
    animation: moveHorizontal 40s linear infinite;
    opacity: 1;
}
.gradient4 {
    position: relative;
    background: radial-gradient(circle at top, rgba(233, 118, 10, 0.938) 0, rgba(200, 50, 50, 0) 50%) no-repeat;
    mix-blend-mode: hard-light;
    width: 80%;
    height: 80%;
    top: calc(50% - 60% / 2);
    left: calc(50% - 80% / 2);
    transform-origin: calc(50% - 100px);
    animation: moveHorizontal 40s ease infinite;
    opacity: 0.7;
}
.gradient5 {
    position: relative;
    background: radial-gradient(circle at bottom, rgba(29, 112, 236, 0.8) 0, rgba(180, 180, 50, 0) 50%) no-repeat;
    mix-blend-mode: hard-light;
    width: calc(80% * 2);
    height: calc(80% * 2);
    left: calc(50% - 50%);
    transform-origin: calc(50% - 800px) calc(50% + 100px);
    animation: moveVertical 20s ease infinite;
    opacity: 1;
}
 
@keyframes moveVertical {
    0% {
      transform: translateY(10%);
    }
    50% {
      transform: translateY(20%);
    }
    100% {
      transform: translateY(10%);
    }
}
  
@keyframes moveHorizontal {
    0% {
      transform: translateX(-50%) translateY(10%);
    }
    50% {
      transform: translateX(20%) translateY(20%);
    }
    100% {
      transform: translateX(50%) translateY(10%);
    }
}*/
/*==========*/



/*========== Responsive ==========*/
@media (min-width: 1000px){
    .video-container{
        display: block;
    }
}