/* Styling starts here */

:root {

    --blog-box-bg: #fff;
    --blog-date-color: #737865;
    --blog-description-color: #2C2F24;

}

#blog-header {
    background-color: var(--primary-bg-color);
}


/* ------------------Blog section styling------------------ */

.blogs-section {
    background-color: var(--primary-bg-color);
    padding: 40px 0px;
    margin: 0px auto;
}

.blogs-content {
    max-width: var(--common-max-width);
    margin: 12px auto;
}

.blogs-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 32px 24px;
}

.blog-link-box {
    text-decoration: none;
    display: flex;
    justify-content: center;
}

.b-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 310px;
    height: 350px;
    background-color: var(--blog-box-bg);
    border-radius: 12px;
    box-shadow: 2px 2px 4px var(--box-shadow);
}

.b-box-img {
    border-radius: 12px 12px 0 0;
    width: 100%;
    height: 100%;
}

.b-box-data {
    padding: 25px 20px;
}

.b-date-para {
    font-size: 14px;
    color: var(--blog-date-color);
    margin-bottom: 12px;
}

.b-description {
    font-size: 19px;
    color: var(--blog-description-color);
    font-weight: 500;
}



/* Responsive code for all devices */

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

@media only screen and (max-width:580px) {

    :root {
        font-size: 15px;
    }

    .blogs-section {
        padding: 50px 0px;
    }

    .blogs-content {
        max-width: 95vw;
    }

    .blogs-header {
        max-width: 95vw;
    }

    #blogs-heading {
        font-size: 4rem;
    }

    .blogs-para {
        max-width: 95%;
    }

    .b-box {
        width: 90%;
        max-width: 290px;
    }

    .b-box-img {
        width: 100%;
        height: auto;
        display: block;
    }

}

/* ------------------ Tablets and Laptops responsiveness ------------------- */

@media only screen and (min-width: 581px) and (max-width:1300px) {


    :root {
        font-size: 16px;
    }


    .blogs-header {
        max-width: 80vw;
    }

    #blogs-heading {
        font-size: 4.5rem;
    }

    .blogs-para {
        max-width: 80%;
    }

}

/*------------------- Big Screen and 4K TV devices responsiveness --------------------------*/

@media only screen and (min-width: 2000px) {

    :root {
        font-size: 18px;
    }

    .blogs-content {
        max-width: 70vw;
    }

}