/*==================================================
BLOGS PAGE
==================================================*/

.blog-page{

    /*padding:20px 0 20px;*/

    background:#fff;

}

.blog-header{

    text-align:center;

    margin-bottom:40px;

}

.blog-header h1{

    font-size:42px;

    color:#0F172A;

    font-weight:700;

    margin-bottom:12px;

}

.blog-header p{

    color:#64748B;

    font-size:18px;

}

/*==========================================
BLOG SEARCH
==========================================*/

.blog-search{
    max-width:900px;
    margin:40px auto;
}

.blog-search form{
    display:flex;
    align-items:center;
    overflow:hidden;
    border:1px solid #dbe5f2;
    border-radius:60px;
    background:#fff;
}

.blog-search input{

    flex:1;

    border:none;

    outline:none;

    padding:20px 28px;

    font-size:16px;

    background:none;
}

.blog-search button{

    border:none;

    background:#8496c8;

    color:#fff;

    padding:18px 34px;

    cursor:pointer;

    font-weight:600;

    transition:.3s;
}

.blog-search button:hover{

    background:#163cb7;

}
/*==================================================
INDUSTRY FILTERS
==================================================*/

.industry-filter{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:50px;

}

.industry-filter a{

    text-decoration:none;

    color:#475569;

    border:1px solid #D6E2F1;

    padding:10px 18px;

    border-radius:50px;

    font-size:14px;

    transition:.3s;

}

.industry-filter a:hover,

.industry-filter .active{

    background:#2563EB;

    color:#fff;

    border-color:#2563EB;

}

/*==================================================
LAYOUT
==================================================*/

.blog-layout{

    display:grid;

    grid-template-columns:2.8fr 1fr;

    gap:55px;

    align-items:start;

}

/*==================================================
BLOG LIST
==================================================*/

.blog-list{

    display:flex;

    flex-direction:column;

    gap:35px;

}

/*==================================================
BLOG ITEM
==================================================*/

.blog-item{

    padding-bottom:35px;

    border-bottom:1px solid #E7EDF6;

}

.blog-item a{

    display:flex;

    gap:28px;

    text-decoration:none;

    color:inherit;

}

.blog-item img{

    width:320px;

    height:190px;

    object-fit:cover;

    border-radius:14px;

    flex-shrink:0;

}

.blog-content{

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.blog-industry{

    display:inline-block;

    margin-bottom:12px;

    color:#2563EB;

    font-size:13px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:1px;

}

.blog-content h2{

    font-size:26px;

    line-height:1.3;

    color:#0F172A;

    margin-bottom:16px;

}

.blog-content p{

    font-size:17px;

    line-height:1.8;

    color:#64748B;

    margin-bottom:20px;

}

.read-more{

    color:#2563EB;

    font-weight:600;

    font-size:15px;

}

/*==================================================
SIDEBAR
==================================================*/

.blog-sidebar{
    position: sticky;
    top: 120px;

    display: flex;
    flex-direction: column;
    gap: 25px;

    width: 100%;
    box-sizing: border-box;
}

.sidebar-banner{

    background:#F8FBFF;

    border:1px solid #E6EEF9;

    border-radius:18px;

    padding:28px;

    margin-bottom:25px;

}

.sidebar-banner h3{

    font-size:22px;

    color:#0F172A;

    margin-bottom:12px;

}

.sidebar-banner p{

    color:#64748B;

    line-height:1.7;

    margin-bottom:18px;

}

.sidebar-banner a{

    text-decoration:none;

    color:#2563EB;

    font-weight:600;

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:992px){

    .blog-layout{

        grid-template-columns:1fr;

    }

    .blog-sidebar{

        position:static;

    }

}

@media(max-width:768px){

    .blog-item a{

        flex-direction:column;

    }

    .blog-item img{

        width:100%;

        height:230px;

    }

    .blog-content h2{

        font-size:24px;

    }

}
/*==========================================
  CUSTOM REPORT CARD
==========================================*/

.custom-report-card{

    margin-top:0;
    padding:32px;
    background:#f8fafc;
    border:1px solid #e8edf5;
    border-radius:18px;
    box-shadow:0 12px 30px rgba(15,23,42,.06);

}

.custom-label{

    display:inline-block;
    margin-bottom:18px;

    font-size:11px;
    font-weight:700;
    letter-spacing:1px;
    color:#2158ff;

    text-transform:uppercase;

}

.custom-report-card h3{

    font-size:32px;
    line-height:1.2;
    color:#0f172a;

    margin-bottom:18px;

}

.custom-report-card p{

    font-size:16px;
    line-height:1.8;
    color:#667085;

    margin-bottom:28px;

}

.btn-contact{

    display:flex;
    justify-content:space-between;
    align-items:center;

    width:100%;

    padding:16px 22px;

    background:#2158ff;
    color:#fff;

    border-radius:12px;

    text-decoration:none;

    font-weight:600;

    transition:.3s ease;

}

.btn-contact span{

    font-size:20px;

}

.btn-contact:hover{

    background:#1848d8;
    transform:translateY(-2px);

}
.blog-sidebar > a{
    display: block;
    width: 100%;
}

.blog-sidebar > a img{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
}