@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

@layer components
{
    .center-by-flex{
        @apply flex justify-center items-center;
    }
    .x-container{
        @apply px-3 md:px-0 w-auto md:w-11/12 lg:w-4/5 mx-auto ;
    }

}


html{
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
    @screen md { scroll-padding-top: 40px; }
}

body, #app {
    font-family: "Quicksand", sans-serif;
    scroll-behavior: smooth;
}

.center-absolute {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.left_bottom-absolute{
    position: absolute;
    bottom: 0%;
    left: 0%;
}
.direction-rtl
{
    .left_bottom-absolute{
        left: auto; right: 0%;
    }
}





.left_bottom-absolute-responsive
{
    position: absolute;

    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    @screen md {
        inset: auto auto 0% 0%;
        transform: none;
        text-align: start;
    }
}

.direction-rtl
{
    .left_bottom-absolute-responsive{
        @screen md { inset: auto 5% 7% auto;  }
    }
}

.inset-0{ inset: 0 ; }


#nav-top
{
    background: transparent linear-gradient(0deg, #00000000 0%, #000000 100%) 0% 0% no-repeat padding-box;
}


.img_in_swiper{
    width: 100%;
}

/* =*=*=*=*=*=*=*=*= About Page =*=*=*=*=*=*=*=*= */
.value_cart{
    background: transparent linear-gradient(180deg, #023160 0%, #03080D 100%) 0% 0% no-repeat padding-box;
    &:hover{
        background:  #8995A1;
    }
    @apply p-8 md:pb-20 rounded-xl  transition-all duration-500 ease-out
    text-white font-light;
}




/* =*=*=*=*=*=*=*=*= Services Page =*=*=*=*=*=*=*=*= */

#news_content
{
    h1{  @apply text-gray-400  text-2xl my-2; }
    h2{  @apply text-gray-400  text-xl my-2; }
    h3{  @apply text-gray-400  text-lg my-2; }
    a{ color: blue!important; }
}



@keyframes go_up_and_down {
   from{ transform: translateY(-10px)  }
   to{ transform: translateY(10px)  }
}
.go_up_and_down
{
    transition: 0.5s;
    animation: go_up_and_down 1s infinite;
}

input:user-valid, textarea:user-valid, select:user-valid{
    border-color: darkgreen;
}
input:user-invalid, textarea:user-invalid select:user-invalid{
    border-color: darkred;
}