.blog-section{
    background: url(../image/common/blog-bg.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    /* min-height: 85vh; */
    padding: 4rem 0;
}
.blog-topic{
    border-radius: 50px;
    border: 0.5px solid #1470FE;
    background: rgba(27, 114, 253, 0.10);
    backdrop-filter: blur(10px);
    padding: 10px;
}
.blog-topics-grid-container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
}
.blog-topic-icon-container{
    background: #FF559A;
    aspect-ratio: 1 / 1;
    padding: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.blog-topic:hover{
    border: 1px solid #FF559A;
    background: rgba(255, 85, 154, 0.20);
    backdrop-filter: blur(10px);
}
.blog-topic:hover .blog-topic-icon-container{
    background: #FFF;
}
.blog-topic:hover .blog-active-icon{
    display: block;
}
.blog-topic:hover .blog-normal-icon{
    display: none;
}
.blog-topic a{
    display: flex;
    gap: 1rem;
    align-items: center;
    
}
.blog-active-icon{
    display: none;
}
.blog-topic h3{
    color: #4D4D4D;
    font-family: poppins;
    font-size: 18px;
    font-weight: 400;
    text-decoration: none;
    margin-bottom: 0;
}
a{
    text-decoration: none;
}
.blog-title{
    color: #1470FE;
    font-family: "Fira Sans";
    font-size: 40px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
.blog-section p{
    color: #4D4D4D;
    font-size: 18px;
    font-family: poppins;
    text-align: justify;
    font-weight: 400;
}
.blog-banner-section .container{
    background: url(../image/banners/blog-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10px;
    padding: 1.5rem ;

}
.blog-banner-section .blog-banner-title{
    color: #FDC800;
    font-family: "Fira Sans";
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
}
.blog-banner-section p{
    color: #FFF;
    font-size: 16px;
    text-align: justify;
    margin-bottom: 5px;
}
/* footer design */
.footer-section{
    /* background: #1470FE; */
    padding: 2rem 0;
}
.footer-links{
    display: flex;
    align-items: center;
    gap: 1rem;
}
.footer-menu{
    color: #fff;
    list-style-type: none;
    display: flex;
    margin-bottom: 0;
    gap: 1rem;
    font-family: poppins;
}
.footer-menu li a{
    color: #fff;
}
.download-links{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2rem;
}
.header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: poppins;
    gap: 1rem;
}
.header-menu-container{
    display: flex;
    align-items: center;
    gap: 1rem;
}
.header-menu{
    display: flex;
    padding-left: 0;
    align-items: center;
    list-style-type: none;
    gap: 1rem;
    margin-bottom: 0;
    font-family: poppins;
    font-weight: 500;


}
.search-bar{
    border-radius: 50px;
    border: 1px solid #9D9E9E;
    background: #DAE5F3;
    padding: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
    
}
.search-bar input{
    background: transparent;
    border: none;
    outline: none;
    max-width: 140px;
}





/* Extra large devices*/
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
   
}
/* Large devices */
@media only screen and (min-width: 992px) and (max-width: 1200px) {
    
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 992px){
    .blog-topics-grid-container {
        grid-template-columns: 1fr 1fr;
    }
    
    
}

/* Small devices */
@media only screen and (min-width: 576px) and (max-width: 768px){
    .blog-topics-grid-container {
        grid-template-columns: 1fr 1fr;
    }
    .download-links{
        margin-top: 1rem;
        justify-content: center;
        gap: 2rem;
    }
    .footer-links{
        justify-content: space-between;
    }
    .header{
        flex-direction: column;
    }
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 576px) {
    .blog-topics-grid-container {
        grid-template-columns: 1fr;
    }
    .download-links{
        margin-top: 1rem;
        justify-content: center;
        gap: 2rem;
    }
    .footer-menu{
        padding-left: 0;
    }
    .footer-links{
        justify-content: space-between;
    }
    .header, .header-menu-container{
        flex-direction: column;
    }
}