/*
Theme Name: Illum'in Theme
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.1.0.1719050863
Updated: 2024-06-22 12:07:43

*/

.recent-posts-section {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 150px;
}

.post-wrapper {
    display: flex;
    width: 100%;
    justify-content: center;
align-items: center;


}

.post-wrapper-2 {
    flex-direction: row-reverse;

}


.post-thumbnail {
    width: 65%;
    position: relative;

}
.post-thumbnail:hover .overlay, .post-thumbnail:hover:after {
    opacity: 0;
}
.post-thumbnail:after{
    content: "";
    position: absolute;
    max-width: 750px!important;
    left: 0px;
    width: 100%;
    height: 410px!important;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);
    opacity: 0.6;
    z-index: 1;
    border-radius: 25px!important;
    transition: all 0.2s ease-in;
}
.post-thumbnail .post-link{
 position: absolute;
 height: 100%;
 width:100%;
 z-index: 3;
 left: 0px;
 
}
.post-thumbnail img {
    width: 100%;
    max-width: 750px!important;
    height: 410px!important;
    object-fit:cover ;
    border-radius: 25px!important;

}


.overlay {
    max-width: 750px!important;
    position: absolute;
    z-index: 2;
    bottom: 0px;
    left: 0px;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    padding: 35px;
    transition: all 0.2s ease-out;
    

}

.post-categories {

    padding-right: 10px;
}

.post-category {

    color: #fff;
    font-size:20px ;
    font-family: Lato;
    font-weight: 600;
    padding-right: 10px;

}

.post-info {
    width: 35%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
}

.post-number {
    width: 110px;
    height: 110px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.post-number svg{
    width: 100%;
    height: 100%;
}
.post-number p{
    position: absolute;
    color: #fff;
    font-size: 50px;
    font-family: Lato;
    font-weight: 900;
    margin-block-end: 0px!important;
}

.post-title {
    font-family: Lato;
    font-weight: 900;
    font-size: 40px;
    text-align: center;

}



.post-wrapper-2 .post-thumbnail img,
.post-wrapper-3 .post-thumbnail img {

}

@media (max-width: 750px){
   
    .post-wrapper{
flex-direction: column-reverse;
gap:20px;
}
.post-info{
width: 100%;
padding: 0px;
gap:20px;
}

.post-number{
width:54px;
height:54px;
}
.post-number p{
font-size:20px;
}
.post-title {
    font-size: 20px;
    text-align: center;
}
.post-thumbnail{
    width:100%;
    height:200px;
}
.post-thumbnail a{
    width:100%;
    height:100%;
    z-index:5;
}
.post-thumbnail img{
    width:100%;
    height:200px!important;
}
.post-thumbnail:after{
    height:200px!important;
}

.recent-posts-section{
    gap:20px;
}
.post-thumbnail .overlay{
    display: none;
}
}