.top{
    height: 50vh;
    background-color: #083962;
    display: flex;
    justify-content: space-around;
    margin-top: 15vh;
    
   
    align-items: center;
    
}

.top h3{
    font-size: 3rem ;
    color: aliceblue;
    font-weight: 700;
    
    
}
.left{
    font-family: "Moxntserrat", sans-serif;
    width: 50vw;
    color: aliceblue;
    display: flex;
    flex-direction: column;
    gap: 5vh;
}



.blog-card{
    height: 90vh;
    width: 27vw;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.137);border: 0.1px solid rgba(0, 0, 0, 0.253);
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    border-radius: 10px;
}


.blog-card img{
    height: 40vh;
    width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.blog{
    height: max-content;
    padding: 10vh 0 10vh 0;
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 10vh;
    justify-content: space-around;
    font-family: "Montserrat", sans-serif;
   
    
}

.blog-card .title{
    font-size: 1.1rem;
    padding-bottom: 4vh;
    
    
    font-weight: 700;
    padding: 0 0 0 2vh;
    text-transform: uppercase;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.blog-card p{
    padding: 0 0 0 2vh;
    font-size: 0.8rem;
    color: black;
    font-weight: 400;
}

.blog-card span{
    padding: 0 0 0 2vh;
}

.blog-card h6{
    padding: 0 0 0 2vh;
    font-size: 1rem;
    font-weight: 400;
    color:#424242d0;
}

.blog-card .flex{
    display: flex;
    justify-content: space-between;
    padding: 0 2vh 0 0;
}





/*-------------------blogs---------------------*/

.blog-title{
    font-size: 5vh;
   
    font-weight: 900;
    margin-top: 15vh;
    
    text-align: center;
    text-transform: uppercase;
    
}


.blog-top{
    
 
        display: flex;
        flex-direction: column;
        justify-content: center;
       
        align-items: center;
        color: #092942;
    
    
    
    }
    .gg{
        display: flex;
        justify-content:space-between;
       
        padding: 15vh 5vh 10vh 5vh;
    }
    
    .blog-wrap{
        
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 60vw;
        
      
    }
    .blog-wrap img{
        height: 60vh;
        text-align: center;
    }
    .blog-desc{
        width: 50vw;
    text-align: center;
    
    font-size: 2.2vh;
    
    font-weight: 400;
    font-style: italic;
}



.list-nest{
        display: flex;
        flex-direction: column;
        gap: 6vh;
        padding-left: 10vh;
        padding-top: 10vh;
    }
    


    .last-desc{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50vh;
    }


    .blog-links a{
        display: flex;
        height: 10vh;
        width: 90%;
        justify-content: space-between;
        text-decoration: none;
      color: black;
        align-items: center;
        border-bottom: 0.1px solid rgba(0, 0, 0, 0.205);
      
        

    }
    .blog-links p{
        width: 90%;
        text-overflow: ellipsis;
        text-transform: uppercase;
        overflow: hidden;
        font-size: 2.2vh;
        white-space: nowrap;
    }


    .blog-links a:hover p,svg{
        color: #4d97cf;
    }
    
    .blog-links{
        display: flex;
        flex-direction: column;
        
    }
   .explore-blogs {
    width: 30vw;
    position: sticky;
    top: 20vh;
    padding-left: 5vh;
    padding: 5vh 5vh 0 2vh;
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 5vh;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.589);
    border-radius: 5px;
}