/* =====================================================
   BLOGS HERO
===================================================== */

.blogs-hero{
    position: relative;
    overflow: hidden;

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

    text-align: center;

    min-height: 300px;
    padding: 120px 20px 80px;

    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

/* Decorative circles */

.blogs-hero::before{
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: rgba(255, 214, 79, 0.15);
    top: -350px;
    left: -250px;
}

.blogs-hero::after{
    content: "";
    position: absolute;
    width: 800px;
    height: 800px;
    border-radius: 50%;
    background: rgba(33, 115, 255, 0.08);
    top: -450px;
    right: -250px;
}

.blogs-container{
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
}

.blogs-hero h1{
    margin: 0;

    font-family: "Cormorant Garamond", serif;
    font-size: 72px;
    font-weight: 700;

    color: #000;      /* Pure black */

    letter-spacing: 1px;
}
/* =====================================================
   BLOGS SECTION
===================================================== */

.blogs-section{
     margin-top: 40px;
    padding:20px 20px 100px;
}

.blogs-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:50px;          /* Increased spacing */
    align-items:stretch;
}



/* =====================================================
   BLOG CARD
===================================================== */

.blog-card{

    background:#fff;

    border:1px solid #e3eaf6;

    border-radius:22px;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    height:100%;

    transition:.35s ease;

    box-shadow:0 10px 28px rgba(15,23,42,.06);

}

.blog-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(15,23,42,.12);

}



/* =====================================================
   IMAGE
===================================================== */

.blog-card-image{

    display:block;

    overflow:hidden;

}

.blog-card-image img{

    width:100%;

    height:230px;

    object-fit:cover;

    display:block;

    transition:.4s ease;

}

.blog-card:hover .blog-card-image img{

    transform:scale(1.05);

}



/* =====================================================
   CONTENT
===================================================== */

.blog-card-content{

    padding:28px;

    display:flex;

    flex-direction:column;

    flex:1;
     height:100%;  

}

.blog-card-content h2{

    margin-bottom:16px;

    line-height:1.25;

     

}


.blog-card-content h2 a{

    text-decoration:none;

    font-family:"Cormorant Garamond",serif;

    font-size:34px;

    font-weight:700;

    color:#0A2540;

    transition:.3s;

}

.blog-card-content h2 a:hover{

    color:#1E63E9;

}



/* =====================================================
   META
===================================================== */

.blog-meta{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:18px;

    font-size:15px;

    color:#6B7280;

}





/* =====================================================
   DESCRIPTION
===================================================== */

.blog-card-content p{

    font-size:17px;

    line-height:1.8;

    color:#4B5563;

    margin-bottom:30px;

}



/* =====================================================
   READ MORE
===================================================== */

.read-more{

    margin-top:auto;

    text-decoration:none;

    color:#1E63E9;

    font-weight:700;

    font-size:18px;

    transition:.3s;

}


.read-more:hover{

    color:#FFC83D;

    transform:translateX(5px);

}


/* =====================================================
   Blogs FOOTER
===================================================== */

.site-footer{

    background:#0A3A8A;
    padding:30px 20px;      /* was 28px */
    margin-top:80px;

}

.footer-container{

    max-width:1300px;
    margin:0 auto;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;

}

.footer-right{

    color:#fff;
    font-size:20px;         /* Increase this until it matches */
    font-weight:500;
    line-height:1.8;

}

.footer-right a{

    color:#fff;
    text-decoration:none;
    font-size:20px;         /* Same size as text */
    transition:.3s;

}

.footer-right a:hover{

    color:#FFC83D;

}


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

/* ------------------------------
   Large Tablet
------------------------------ */

@media (max-width:1100px){

    .blogs-hero{
        padding:150px 20px 60px;
    }

    .blogs-hero h1{
        font-size:52px;
    }

    .blogs-grid{
        grid-template-columns:repeat(2,1fr);
        gap:30px;
    }

    .blog-card-image img{
        height:220px;
    }

    .blog-card-content h2 a{
        font-size:30px;
    }

}


/* ------------------------------
   Tablet
------------------------------ */

@media (max-width:768px){

    .blogs-hero{
        padding:130px 18px 50px;
    }

    .blogs-hero h1{
        font-size:42px;
    }

    .blogs-section{
        padding:10px 18px 80px;
    }

    .blogs-grid{
        grid-template-columns:1fr;
        gap:28px;
    }

    .blog-card-image img{
        height:240px;
    }

    .blog-card-content{
        padding:24px;
    }

    .blog-card-content h2 a{
        font-size:28px;
    }

    .blog-meta{
        font-size:14px;
        flex-wrap:wrap;
    }

    .blog-card-content p{
        font-size:16px;
        line-height:1.7;
    }

    .read-more{
        font-size:17px;
    }

}


/* ------------------------------
   Mobile
------------------------------ */

@media (max-width:480px){

    .blogs-hero{
        padding:120px 16px 45px;
    }

    .blogs-hero h1{
        font-size:36px;
    }

    .blogs-section{
        padding:0 16px 70px;
    }

    .blog-card{
        border-radius:18px;
    }

    .blog-card-image img{
        height:210px;
    }

    .blog-card-content{
        padding:20px;
    }

    .blog-card-content h2 a{
        font-size:24px;
        line-height:1.3;
    }

    .blog-card-content p{
        font-size:15px;
    }

    .blog-meta{
        font-size:13px;
        gap:8px;
    }

    .read-more{
        font-size:16px;
    }

}