/* ===== Blog Section ===== */
.blog-section {
    padding: var(--section-bg-py) 0;
}

.blog-section .sectionHeadwrap {
    text-align: center;
    margin-bottom: var(--section-wraper-py);
}

/* ===== Shared: category pill ===== */
.blog-cat {
    font-family: var(--font-primary);
font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
       background: #F4F0FF;
    color: #685ADB;
    border-radius: var(--radius-full);
    padding: 5px 12px;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
    height: 22px;
}

/* ===== Shared: read time ===== */
.blog-time {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-primary);
    font-size: 13px;
    color: #5F6C72;
    white-space: nowrap;
}

/* ===== Shared: card meta row ===== */
.blog-card-meta {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
        margin-bottom: 15px;
}
.blog-bottom-grid .blog-card-meta{
justify-content: space-between;
}
/* ===== Shared: read more link ===== */
.blog-read-more {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 400;
    color: var(--color-primary);
    transition: gap 0.2s ease;
    margin-top: 17px;
}

.blog-read-more::after {
    content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8H13M13 8L9 4M13 8L9 12' stroke='%23685ADB' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    display: flex;
    align-items: center;
    position: relative;
    top: 2px;
}

/* ===== Top Row Layout ===== */
.blog-top-row {
    display: flex;
/* flex-wrap: wrap; */
    gap: 24px;
    align-items: stretch;
    margin-bottom: 24px;
}

/* ===== Featured Card ===== */
.blog-featured {
    background: #685ADB;
    border-radius: 30px;
    padding: 43px 45px 62px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 397px;
    position: relative;
    overflow: hidden;
            max-width: 589px;
    width: 100%;
}
.blog-featured .blog-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
 
}
.blog-featured::after {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 247px;
    height: 247px;
    border-radius: 50%;
    background: #6254D0;
    pointer-events: none;
    z-index: 0;
}

.blog-featured > * {
    position: relative;
    z-index: 1;
}

.blog-featured:hover {
    transform: translateY(-4px);
      box-shadow: 0 5px 20px rgba(104, 90, 219, 0.35);
}

.blog-featured .blog-cat {
    background:    #FBFFFF;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #685ADB;
    text-transform: capitalize;
    font-family: Lato;
font-weight: 400;
font-style: Regular;
font-size: 14px;
leading-trim: NONE;
line-height: 170%;
letter-spacing: 0%;
display: flex;
justify-content: center;
align-items: center;
height: 36px;
padding: 0 13px;
}

.blog-featured .blog-time {
    color: #fff;
    font-size: 14px;
    font-weight: 400;
}

.blog-featured h3 {
        font-family: var(--font-primary);
    font-size: 24px;
    font-weight: 900;
    color: #fff;
    line-height: 170%;
    margin: 41px 0 0;
    flex: 1;
    max-width: 499px;
}

.blog-featured .blog-read-more {
    color: #fff;
    margin-top: auto;
    padding-top: 28px;
    font-size: 15px;
    font-weight: 500;
   
}

.blog-featured .blog-read-more::after {
    content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8H13M13 8L9 4M13 8L9 12' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.blog-featured:hover .blog-read-more {
    gap: 10px;
}

/* ===== Side Cards Column ===== */
.blog-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 47.5%;
        max-width: 47.5%;
    width: 100%;
}

.blog-side-card {
    display: flex;
    align-items: stretch;
    gap: 14px;
    background: #fff;
      border: 1px solid #E7DFFF;
    border-radius: 20px;
       padding: 26px 31px 25px;
    text-decoration: none;
    flex: 1;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.blog-side-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 8px 24px rgba(104, 90, 219, 0.1);
    transform: translateY(-2px);
}

/* Check icon — 55x55 rounded square with gradient bg */
.blog-check-icon {
    width: 55px;
    height: 55px;
    flex-shrink: 0;
    border-radius: 12px;
    background: linear-gradient(112.29deg, #F5F2FA 14.54%, #EFEDF7 97.38%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.blog-check-icon::before {
    content: url("data:image/svg+xml,%3Csvg width='27' height='27' viewBox='0 0 27 27' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.1999 12.1935V13.2055C24.1986 15.5775 23.4305 17.8857 22.0102 19.7855C20.59 21.6854 18.5936 23.0752 16.3189 23.7478C14.0441 24.4203 11.613 24.3396 9.38787 23.5176C7.1628 22.6955 5.26306 21.1762 3.972 19.1863C2.68095 17.1964 2.06772 14.8424 2.2238 12.4754C2.37986 10.1085 3.29688 7.85548 4.83806 6.0523C6.37923 4.24911 8.46202 2.99244 10.7758 2.46968C13.0895 1.94691 15.5103 2.18609 17.6769 3.15151M24.1999 4.39922L13.1999 15.4102L9.89995 12.1102' stroke='%23685ADB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    display: flex;
    align-items: center;
    line-height: 0;
}

.blog-side-card:hover .blog-check-icon {
    background: var(--color-primary);
}

.blog-side-card:hover .blog-check-icon::before {
    content: url("data:image/svg+xml,%3Csvg width='27' height='27' viewBox='0 0 27 27' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.1999 12.1935V13.2055C24.1986 15.5775 23.4305 17.8857 22.0102 19.7855C20.59 21.6854 18.5936 23.0752 16.3189 23.7478C14.0441 24.4203 11.613 24.3396 9.38787 23.5176C7.1628 22.6955 5.26306 21.1762 3.972 19.1863C2.68095 17.1964 2.06772 14.8424 2.2238 12.4754C2.37986 10.1085 3.29688 7.85548 4.83806 6.0523C6.37923 4.24911 8.46202 2.99244 10.7758 2.46968C13.0895 1.94691 15.5103 2.18609 17.6769 3.15151M24.1999 4.39922L13.1999 15.4102L9.89995 12.1102' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.blog-side-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.blog-side-body .blog-read-more {
    margin-top: auto;
}

/* Side card — category badge */
.blog-side-card .blog-cat {
    background: #F4F0FF;
    color: #685ADB;
    font-size: 13px;
    font-weight: 400;
    border: none;
}

/* Side card — read time */
.blog-side-body .blog-time {
    color: #5F6C72;
    font-size: 13px;
}

.blog-side-body h4 {
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 700;
    color: #1F2A2E;
    line-height: 140%;
    margin: 0;
    max-width: 386px;
}

.blog-side-card:hover .blog-read-more {
    gap: 10px;
}

/* ===== Bottom Grid ===== */
.blog-bottom-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.blog-bottom-card {
    background: #fff;
      border: 1px solid #E7DFFF;
    border-radius: 20px;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
        min-height: 240px;
}

.blog-bottom-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 8px 24px rgba(104, 90, 219, 0.1);
    transform: translateY(-2px);
}

.blog-bottom-card h4 {
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 700;
    color: #1F2A2E;
    line-height: 160%;
    margin: 0;
    flex: 1;
}

.blog-bottom-card:hover .blog-read-more {
    gap: 10px;
}

/* ===== CTA ===== */
.blog-cta-wrapper {
    text-align: center;
    margin-top: 40px;
}

/* ===== Responsive ===== */
@media (max-width: 991px) {
    /* Top row: stack featured + side cards */
    .blog-featured {
        max-width: 100%;
    }
    /* Bottom grid: 2 columns */
    .blog-bottom-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .blog-featured {
        padding: 30px 28px 40px;
        min-height: 300px;
    }

    .blog-featured h3 {
        font-size: 20px;
        margin: 28px 0 0;
    }

    .blog-side-card {
        padding: 18px 20px;
        align-items: flex-start;
        gap: 12px;
    }

    .blog-side-body h4 {
        font-size: 15px;
        max-width: 100%;
        margin-bottom: 10px;
    }

    .blog-check-icon {
        width: 46px;
        height: 46px;
        flex-shrink: 0;
        display: none;
    }

    .blog-bottom-card h4 {
        font-size: 16px;
    }
.blog-top-row {
    flex-wrap: wrap;
}
}

@media (max-width: 575px) {

    .blog-bottom-card {
    background: #fff;
    border: 1px solid #E7DFFF;
    border-radius: 20px;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    min-height: 150px;
}
    .blog-featured {
        max-width: 100%;
        min-height: 260px;
        padding: 24px 22px 32px;
    }

    .blog-featured h3 {
        font-size: 18px;
        margin: 20px 0 0;
    }

    .blog-side {
        flex-direction: column;
        flex-wrap: nowrap;
        max-width: 100%;
    }

    .blog-side-card {
        flex: 1 1 100%;
        padding: 16px 18px;
    }

    .blog-bottom-grid {
        grid-template-columns: 1fr;
    }

    .blog-side-body h4 {
        font-size: 14px;
    }

    .blog-bottom-card h4 {
        font-size: 15px;
    }

    .blog-check-icon {
        width: 42px;
        height: 42px;
    }
}