@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root{

    --btn-color: #fdfdfd;/* button color*/
    --btn-bg: #4f55c1;/* button bg color*/

    --primary-text-color: #4f55c1;
    --header-link-hover: #6c72e8;
    --input-hover-bd-color: #4f55c1;
}


html {
    scroll-behavior: smooth;
    font-family: "Roboto", sans-serif;
}

.primary-text-color{
    color: var(--primary-text-color);
}

.gradient-text{
    background: rgb(233,92,255);
    background: linear-gradient(93deg, rgba(233,92,255,1) 12%, rgba(210,125,255,1) 49%, rgba(159,121,255,1) 93%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-section{
    background-image: url("../assets/images/background/dots.svg");
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover;
}

.hero-bg-gradient{
    background: linear-gradient(180deg, rgba(24,27,32,0.9) 30%, rgba(0,0,0,0.258140756302521) 65%);
}

.opacity-0{
    opacity: 0 !important;
}

.opacity-100{
    opacity: 100 !important;
}