p{
    font-family:'Noto sans',sans-serif;
    margin:0;
}
div{
    font-family:'Noto sans',sans-serif;
    margin:0;
    padding:0;
}
.projects-heading,.blog_heading{ /*div containing projects-text and horizontal-line*/
    display:flex;
    flex-direction: row;
    color:#4789C0;
    align-items: center;
    margin-left:80px;
    margin-right:80px;
}
.projects-text,.blog_text{
    font-size:36px;
    font-weight:bold;
}
.horizontal-line{ /*Horizontal line styling*/
    border-bottom:1px inset #4789C0;
    flex:1;
    height:0;
}
.project-grid,.blog_grid{ /*Project grid*/
    margin-top:40px;
    display:flex;
    column-gap:50px;
    margin-left:60px;
    align-items: center;
}


#project_arrow_left, #project_arrow_right, #blog_arrow_left, #blog_arrow_right{
    background-color: white;
    border: none;
}

.project-card,.blog_card{ /*Project card*/
    display:flex;
    flex-direction:row;
    position:relative;
    background-image: url("images/image1.webp");
    border-radius:10px;
    overflow: hidden;
    min-width:30%;
    height:300px;
    margin-right: 3vw;
    box-shadow:3px 3px 5px rgba(0,0,0,0.7);
}
.project-img,.blog_img{
    width:100%;
    height:100%;
}
.project-card:hover .project-img,.blog_card:hover .blog_img{
    opacity:0.8;
}
.projects-subheading,.blog_subheading{ 
    position:absolute;
    width:100%;
    top:80%;
    display:flex;
    align-items: center;
    justify-content: center;
    color:white;
    font-size:26px;
    font-weight:bold;
    transition: transform 0.8s ease-in-out;
}
.project-card:hover .projects-subheading,.blog_card:hover .blog_subheading{
    transform: translateY(-600%); 
}
.project-img-hover,.blog-img-hover{
    position:absolute;
    top:0%;
    bottom:0%;
    left:0%;
    right:0%;
    display:flex;
    flex-direction:column;
    opacity:0;
    align-items:center;
    justify-content: center;
    padding:2% 10%;
}
.project-card:hover .project-img-hover,
.blog_card:hover .blog-img-hover{ /*Opacity of project-img-hover goes from 0 to 1 on hover*/
    opacity:1;
}
.blog-description{ /* Project description, opacity is initialized to 0*/
    position:absolute;
    top:28%;
    left:10%;
    right:10%;
    color:white;
    opacity:0;
    transition:opacity 1s;
}
.project-card:hover .project-description,
.blog_card:hover .blog-description{ /*Project description opacity changes on hover*/
    opacity:1;
}
.github-link{
    position:absolute;
    bottom:10%;
    opacity:0;
    transition:opacity 0.8s;
    cursor: pointer;
}
.github-logo{
    width:30px;
}
.project-card:hover .github-link,
.blog_card:hover .github-link{
    opacity:1;
}
.view-all-div{
    margin-top:35px;
    margin-right:100px;
    display:flex;
    justify-content: end;
    margin-bottom:60px;
}
.view-all-button{
    cursor:pointer;
    border:none;
    background-color: white;
    font-size:24px;
    color:#4789C0;
    font-weight:500;
}
#cards_container,#blogs_container{
    display: flex;
    width:80vw;
    justify-content: space-between;
    overflow: hidden;
}

@media screen and (min-width: 320px) and (max-width: 480px){
    .projects-text, .blog_text{
        font-size: 24px;
    }
    .projects-heading, .blog_heading{
        margin-left: 30px;
        margin-right: 30px;
    } 
    .project-card, .blog_card{
        min-width: 100%;
        height: 240px;
    }
    .project-grid, .blog_grid{
        margin-left: 28px;
        margin-right: 28px;
        column-gap: 40px;
    }
    .view-all-div{
        margin-right: 30px;
    }
    .view-all-button{
        font-size: 16px;
    }
}
@media(max-width:700px) /*media query to reduce project grid to 1 column*/
{
    
}