@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

body{
    font-family: 'Manrope', sans-serif;
}

.main-nav{

     &:hover{
        a{
            opacity: 0.4;
        }
    }

    a{
        position: relative;
        z-index: 1;
        transition: all 0.3s ease-out;
        display: block;

        &:before{
            content: "";
            background: black;
            position: absolute;
            z-index: -1;
            transition: all 0.3s ease-out;
            width: 0;
            bottom:0;
            left: 0;
            height: 2px; 
        }

        &:hover{
            
            opacity: 1;

            &:before{
                width: 100%;
            }
        }
    }

   
}

.hover-cta{
    position: relative;

    &:before{
        content: "";
        position: absolute;
        width: 0;
        height: 2px;
        background: black;
        transition: all 0.3s ease-out;
        bottom: 0;
        left: 0;
    }

    &:hover:before{
        width: calc(100% - 38px); 
    }
}

.preloader-image{
    clip-path:inset(40%);
}

.project-images{
    &:hover{
        img{
            opacity: 0.5;
        }
    }
    img:hover{
        opacity: 1;
    }
}

.project-categories{
    a{
        position: relative;
         transition: all 0.3s ease-out;
        z-index: 1;

        &:before{
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 0;
            transition: all 0.3s ease-out;
            background: black;
            z-index: -1;
        }

        &:hover{
            color: white;
            padding-inline: 1rem;

            &:before{
                height: 100%;
            }
        }
    }
}

@media(width < 620px){
    .hover-cta{
        &:before{
            display: none;
        }
    }
}