:root {
    --dark-heading: #1b232e;
    --secondary-dark-grey: #363636;
    --grey: #2d3941;
    --paragraph-text: #465159;
    --breadcrumb: #5d676e;
    --minor-grey: #747c82;
    --dark-grey-2: #444f57;
    --grey-border: #b3bdc0;
    --grey-border-2: #adaeb1;
    --grey-bg: #f1f8f8;
    --white: #fff;
    --pill: #f0f4f7;
    --bg-light-grey: #fafafd;
    --light-grey-border: #d6d6d6;
    --light-grey-3: #eff2fc;
    --level-background: #f8f9fa;
    --discover-border: #dce0e5;
    --light-grey-4: #f3f6f7;
    --light-grey-5: #d2d8de;
    --discover-blue: #008fc3;
    --border-blue: #c5eaff;
    --breadcrumb-blue: #016c94;
    --intro-blue: #1581af;
    --light-blue: #0091c7;
    --pale-blue: #f0f9fb;
    --heading-text: #1e2d40;
    --blue-2: #0389b9;
    --light-blue-2: #def1f7;
    --alison-green: #009b5d;
    --alt-green: #007646;
    --pale-green: #ebf5db;
    --hover-green: #008952
}

.blog-sec {
    background: var(--Alison-Blue-75, #b1e2f1);
    margin: 0 auto !important;
    padding: 48px 0
}

@media (min-width:769px) {
    .blog-sec .inner {
        padding: 0 140px
    }
}

.blog-sec .blog-articles {
    position: relative
}

@media (min-width:769px) {
    .blog-sec .blog-articles:after {
        background: #6e6969;
        background: linear-gradient(90deg, hsla(0, 2%, 42%, 0), #b1e2f1);
        content: "";
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        width: 80px
    }
}

.blog-sec h2 {
    color: #323c41;
    font-size: 32px;
    font-style: normal;
    font-weight: 900;
    line-height: 150%;
    text-align: center
}

.blog-sec a {
    width: 316px
}

.blog-sec a article {
    background: var(--light-grey-4) 0 0 no-repeat padding-box;
    border: 1px solid #dadfe1;
    border-radius: 8px;
    margin: 0 24px 0 0;
    opacity: 1;
    padding: 17px
}

.blog-sec a article>img {
    border-radius: 4px;
    height: 160px;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.blog-sec a article h4 {
    color: var(--grey);
    font-size: 16px;
    font-weight: 700;
    height: 34px;
    letter-spacing: 0;
    margin: 0 0 18px;
    opacity: 1;
    text-align: left
}

.blog-sec a article p.article-category {
    color: #206e90;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    margin: 0;
    opacity: 1;
    padding: 10px 0;
    text-transform: uppercase
}

.blog-sec a article p.article-description {
    color: var(--paragraph-text);
    font: normal normal normal 12px/18px Roboto;
    height: 55px;
    letter-spacing: 0;
    margin: 0 0 10px;
    opacity: 1;
    text-align: left
}

.blog-sec a article p.article-description strong {
    font-weight: 900
}

.blog-sec a article p.date {
    color: var(--breadcrumb);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    margin: 0;
    opacity: 1;
    text-transform: none
}

.blog-sec a:last-child article {
    margin-right: 0
}

@media (max-width:768px) {
    .blog-sec {
        order: 8
    }
    .blog-sec h2 {
        color: #323c41;
        display: block !important;
        font-size: 22px
    }
    .blog-sec a article {
        margin-right: 16px;
        padding: 12px
    }
    .blog-sec a article h4 {
        color: var(--grey);
        font-size: 14px;
        height: 39px;
        margin: 0 0 10px;
        text-align: left
    }
    .blog-sec a article>img {
        height: 112px
    }
    .blog-sec a article p.article-categor {
        padding: 10px 0 5px
    }
    .blog-sec a article p.date {
        font-size: 10px
    }
    .blog-sec a article p.date span {
        margin-right: 5px
    }
    .blog-sec a article p.article-description {
        height: 70px
    }
}

.blog-sec .article-date {
    align-items: center;
    color: #5d676e;
    display: flex;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    gap: 8px;
    line-height: 150%
}

.blog-sec .slick-dots {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 40px
}

.blog-sec .slick-dots li button {
    background: #fff;
    border-radius: 100%;
    height: 16px;
    overflow: hidden;
    padding: 0;
    text-indent: -99px;
    width: 16px
}

.blog-sec .slick-dots li.slick-active button {
    background: #7b858c
}

@media (min-width:769px) {
    .blog-sec .slick-dots li:nth-child(5),
    .blog-sec .slick-dots li:nth-child(6) {
        display: none
    }
}