@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,300&family=Nunito+Sans:ital,wght@0,300;0,400;1,300&family=Sofia&family=Sora&family=Zen+Kaku+Gothic+Antique&display=swap');

:root{
    --dark: #0b1629;
    --body: #7c7e82;
    --box-shadow: 0 8px 22px #403f3c;
}
body{
    font-family: Sora, "sans-serif";
    line-height: 1.7;
    color: var(--body);
}
h1,h2,h3,h4,h5,h6,
.display-4{
    color:var(--dark);
    font-weight: 500;

}
img{
    width:100%;
}

.col-img{
    background-image: url("images/my\ image.jpg");
    background-position: center;
    background-size: cover;
    min-height: 500px;
    
}
.project{
    position: relative;
    overflow: hidden;
}
.project .overlay{
    position:absolute;
    top: 0;
    left:0;
    width:100%;
    height:100%;
    background-color: rgb(26, 21, 21, 0.8);
    padding:30px;
      display:flex;
    align-items: flex-end;
    transition:all 0.4s ease;
    opacity:0;
}
.project img{
    transition: all 0.4s ease;

}
.project:hover .overlay{
    opacity:1;
}
.project:hover img{
    transform: scale(1.1);
}
.text-white{
    text-decoration: none;
}