.hero-blog {
    position: relative;
    background-image: url('../images/bag-art.svg');
    background-image: url('../images/bulk-fibc-bags-image.webp');
    background-position: left top;
    background-size: cover;
    background-repeat:repeat;
}

.hero-blog::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(232, 243, 244, 1);
    background: rgba(0, 0, 0, 0.7);
    background: linear-gradient(0deg, var(--primary-a), var(--primary), var(--primary-a));
    opacity: 0.86;
}


/*Blog List*/
.blogrow {
    position: relative;
    display: grid;
    grid-auto-flow: row;
    row-gap: 30px;
    column-gap: 30px;
    grid-template-columns: minmax(0, 1fr);
}

.sitecol .blogitem {
    box-shadow: 0px 7px 10px 0px rgba(0, 0, 0, 0.1);
    transition: 0.3s ease;
}

.sitecol .blogitem:hover {
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
}

/* Pagination */
.pagination .nav-links { display: flex; flex-wrap: wrap; margin-top: 50px; justify-content: center; row-gap: 10px; }
.pagination .page-numbers {
    display: inline-flex;
    font-size: 18px;
    line-height: 1.2;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 10px;
    margin: 0 4px;
    color: var(--primary);
    border-radius: 100%;
    border-radius: 0;
    background-color: #f5f5f5;
    transition:0.3s all ease-in-out;
}
.pagination .page-numbers:not(span):hover{ color: var(--white); background-color: var(--primary); }
.pagination span.page-numbers { background-color: #f5f5f5; color: var(--body); opacity: 1; }
.pagination span.page-numbers.current { background: var(--primary); color: var(--white); }
.pagination .page-numbers.next, .pagination .page-numbers.prev { font-size: 8px; }
.pagination .page-numbers.prev i { display: inline-block; transform: rotate(90deg) translateY(2px); transform-origin: center center; }
.pagination .page-numbers.next i { display: inline-block; transform: rotate(-90deg) translateY(2px); transform-origin: center center; }


/*Sidebar*/
.sitecol-rt {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.blogside {
    padding: 30px;
    border: solid 1px rgba(33, 135, 149, 0.2);
    border-radius: var(--siteradius16);
    background: linear-gradient(180deg, #FFFFFF 0%, var(--lightp) 100%);
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
}

.blogside-title {
    font-size: 20px;
    line-height: 30px;
    padding-bottom: 12px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--primary);
}

.blogside-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.blogside-list li + li {
    padding-top: 14px;
    border-top: 1px solid rgba(33, 135, 149, 0.129);
}

.blogside-cats a {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

.blogside-list a:hover { color: var(--primary-a); }

.blogside-posts a {
    --imgSize: 80px;
    --thisGap: 15px;
    display: flex;
    align-items: flex-start;
    gap: var(--thisGap);
}

.blogside-posts img {
    --imgHeight: calc(var(--imgSize) - 16px);
    flex: 1 0 var(--imgSize);
    max-width: var(--imgSize);
    height: var(--imgHeight);
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
}

.blogside-posts span {
    flex: 1 0 calc(100% - var(--imgSize) - var(--thisGap));
    max-width: calc(100% - var(--imgSize) - var(--thisGap));
}


/*Search Form*/
.search-form {
    display: flex;
    max-width: 100%;
    margin: 0 auto;
    border: solid 1px rgba(33, 135, 149, 0.2);
    border-radius: 10px;
    background: var(--formfieldbg);
    background: linear-gradient(180deg, #FFFFFF 0%, var(--lightp) 100%);
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.search-form label {
    flex: 1 0 auto;
}

.search-form input[type="search"] {
    width: 100%;
    max-width: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.search-submit {
    font-size: 20px;
    padding: 0 20px 0 0;
    border: 0;
    outline: none;
    background-color: transparent;
}

/*
** Blog Single Page
*/
.page-cats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.page-cats a {
    font-size: 14px;
    line-height: 14px;
    padding: 5px 10px;
    color: var(--white);
    border-radius: var(--siteradius16);
    background: var(--primary);
}

.page-thumb {
    border-radius: var(--siteradius16);
    overflow: hidden;
}

.page-thumb img {
    vertical-align: top;
}

.page-line {
    height: 1px;
    border: 0;
    background-color: var(--gray);
}

.page-cont p span[style="font-weight: 400;"], .page-cont a, .page-cont i, .page-cont span { display: inline; }


.page-cont h2 { --fsize: 32px; font-size: var(--fsize); line-height: calc(var(--fsize) + 8px); margin-bottom: 12px; }
.page-cont h3 { --fsize: 28px; font-size: var(--fsize); line-height: calc(var(--fsize) + 8px); margin-bottom: 12px; }
.page-cont h4 { --fsize: 24px; font-size: var(--fsize); line-height: calc(var(--fsize) + 10px); margin-bottom: 12px; }
.page-cont h5 { --fsize: 20px; font-size: var(--fsize); line-height: calc(var(--fsize) + 10px); margin-bottom: 12px; }
.page-cont h6 { --fsize: 18px; font-size: var(--fsize); line-height: calc(var(--fsize) + 10px); margin-bottom: 12px; }

.page-cont * + :is(h1, h2, h3, h4, h5, h6) { margin-top: 32px; }
.page-cont :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) { margin-top: 24px; }

.postcont p, .postcont ul, .postcont ol, .postcont table, .postcont blockquote { margin-bottom: 20px; }

/*Nav Paging*/
.nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    padding-top: 20px;
}

.nav-links>div {
    flex: 1 0 50%;
    max-width: 50%;
}

.nav-links .nav-subtitle {
    display: block;
    font-size: 14px;
    line-height: 22px;
    color: var(--body);
}

.nav-links .nav-title {
    font-size: 16px;
    line-height: 24px;
}

.nav-next {
    text-align: right;
    margin-left: auto;
}

.nav-links>div+div {
    padding-left: 30px;
}