```css
/* =========================================================
   WORLDISON INTERNATIONAL
   SINGLE BLOG PAGE
   single-blog.css
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {
    --single-blog-primary: #0b7a4b;
    --single-blog-primary-dark: #075c39;
    --single-blog-accent: #d7a928;

    --single-blog-dark: #10231c;
    --single-blog-text: #34443d;
    --single-blog-muted: #718078;

    --single-blog-light: #f6f8f7;
    --single-blog-border: #e4e9e6;
    --single-blog-white: #ffffff;

    --single-blog-radius: 18px;
    --single-blog-shadow: 0 18px 50px rgba(16, 35, 28, 0.08);

    --single-blog-container: 1180px;
}


/* =========================================================
   GLOBAL CONTAINER
========================================================= */

.single-blog-container {
    width: min(
        calc(100% - 40px),
        var(--single-blog-container)
    );

    margin-inline: auto;
}


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

.single-blog-hero {
    position: relative;

    min-height: 470px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            135deg,
            #0b2e20,
            #0d6140
        );

    overflow: hidden;
}


/* Decorative background */

.single-blog-hero::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -180px;
    top: -180px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.12);
}

.single-blog-hero::after {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    left: -180px;
    bottom: -180px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.08);
}


.single-blog-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5, 35, 23, .75),
            rgba(5, 35, 23, .25)
        );
}


.single-blog-hero-content {
    position: relative;
    z-index: 2;

    max-width: 900px;

    padding: 100px 0 80px;
}


.single-blog-eyebrow {
    display: inline-block;

    margin-bottom: 20px;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 3px;
    text-transform: uppercase;

    color: var(--single-blog-accent);
}


.single-blog-category {
    display: inline-flex;

    align-items: center;

    margin-left: 15px;
    margin-bottom: 20px;

    padding: 7px 14px;

    border: 1px solid rgba(255,255,255,.2);
    border-radius: 50px;

    color: rgba(255,255,255,.9);

    font-size: 12px;
    font-weight: 600;
}


.single-blog-hero h1 {
    max-width: 900px;

    margin: 0 0 28px;

    color: #ffffff;

    font-size: clamp(
        38px,
        5vw,
        68px
    );

    line-height: 1.08;

    letter-spacing: -1.5px;
}


.single-blog-hero-content > p {
    max-width: 650px;

    color: rgba(255,255,255,.8);

    font-size: 17px;
    line-height: 1.8;
}


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

.single-blog-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 24px;

    color: rgba(255,255,255,.78);

    font-size: 14px;
}


.single-blog-meta span {
    display: inline-flex;

    align-items: center;

    gap: 8px;
}


.single-blog-meta svg {
    width: 16px;
    height: 16px;
}


/* =========================================================
   ARTICLE SECTION
========================================================= */

.single-blog-section {
    padding: 90px 0 110px;

    background: var(--single-blog-light);
}


.single-blog-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        310px;

    gap: 60px;

    align-items: start;
}


.single-blog-main {
    min-width: 0;
}


/* =========================================================
   ARTICLE CARD
========================================================= */

.single-blog-article {
    background: var(--single-blog-white);

    border-radius: var(--single-blog-radius);

    overflow: hidden;

    box-shadow: var(--single-blog-shadow);
}


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

.single-blog-featured-image {
    width: 100%;

    aspect-ratio: 16 / 8;

    overflow: hidden;

    background: #e9eeeb;
}


.single-blog-featured-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .5s ease;
}


.single-blog-featured-image:hover img {
    transform: scale(1.02);
}


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

.single-blog-content {
    padding: 55px 60px;

    color: var(--single-blog-text);

    font-size: 17px;
    line-height: 1.9;
}


.single-blog-content > *:first-child {
    margin-top: 0;
}


.single-blog-content > *:last-child {
    margin-bottom: 0;
}


.single-blog-content h2 {
    margin-top: 45px;
    margin-bottom: 18px;

    color: var(--single-blog-dark);

    font-size: 30px;
    line-height: 1.25;
}


.single-blog-content h3 {
    margin-top: 35px;
    margin-bottom: 15px;

    color: var(--single-blog-dark);

    font-size: 24px;
}


.single-blog-content p {
    margin-bottom: 22px;
}


.single-blog-content a {
    color: var(--single-blog-primary);

    font-weight: 600;
}


.single-blog-content ul,
.single-blog-content ol {
    margin: 25px 0;
    padding-left: 25px;
}


.single-blog-content li {
    margin-bottom: 10px;
}


.single-blog-content blockquote {
    margin: 35px 0;

    padding: 25px 30px;

    border-left: 4px solid var(--single-blog-primary);

    background: var(--single-blog-light);

    color: var(--single-blog-dark);

    font-size: 20px;
    font-weight: 600;

    line-height: 1.6;
}


.single-blog-content img {
    max-width: 100%;
    height: auto;

    border-radius: 12px;

    margin: 25px 0;
}


.single-blog-content table {
    width: 100%;

    margin: 30px 0;

    border-collapse: collapse;
}


.single-blog-content th,
.single-blog-content td {
    padding: 12px 15px;

    border: 1px solid var(--single-blog-border);

    text-align: left;
}


/* =========================================================
   ARTICLE FOOTER
========================================================= */

.single-blog-footer {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding: 28px 60px;

    border-top: 1px solid var(--single-blog-border);
}


.single-blog-footer-category {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.single-blog-footer-category span,
.single-blog-share-inline > span {
    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1.5px;

    color: var(--single-blog-muted);
}


.single-blog-footer-category strong {
    color: var(--single-blog-dark);

    font-size: 14px;
}


.single-blog-share-inline {
    display: flex;

    align-items: center;

    gap: 15px;
}


.single-blog-share-inline > div {
    display: flex;

    gap: 8px;
}


.single-blog-share-inline a {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--single-blog-light);

    color: var(--single-blog-dark);

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}


.single-blog-share-inline a:hover {
    background: var(--single-blog-primary);

    color: #ffffff;

    transform: translateY(-2px);
}


.single-blog-share-inline svg {
    width: 16px;
    height: 16px;
}


/* =========================================================
   SIDEBAR
========================================================= */

.single-blog-sidebar {
    position: sticky;

    top: 110px;

    display: flex;

    flex-direction: column;

    gap: 20px;
}


.single-blog-sidebar-card {
    padding: 30px;

    background: #ffffff;

    border: 1px solid var(--single-blog-border);

    border-radius: var(--single-blog-radius);

    box-shadow:
        0 10px 35px rgba(16,35,28,.05);
}


.single-blog-sidebar-label {
    display: block;

    margin-bottom: 12px;

    color: var(--single-blog-primary);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.single-blog-sidebar-card h3 {
    margin: 0 0 12px;

    color: var(--single-blog-dark);

    font-size: 22px;

    line-height: 1.3;
}


.single-blog-sidebar-card p {
    margin-bottom: 20px;

    color: var(--single-blog-muted);

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   SOCIAL LIST
========================================================= */

.single-blog-social-list {
    display: flex;

    flex-direction: column;

    gap: 8px;
}


.single-blog-social-list a {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 11px 12px;

    border-radius: 10px;

    color: var(--single-blog-dark);

    font-size: 14px;
    font-weight: 600;

    transition: background .2s ease;
}


.single-blog-social-list a:hover {
    background: var(--single-blog-light);

    color: var(--single-blog-primary);
}


.single-blog-social-list svg {
    width: 17px;
    height: 17px;
}


/* =========================================================
   ABOUT CARD
========================================================= */

.single-blog-about-card {
    background:
        linear-gradient(
            145deg,
            #0b7a4b,
            #075c39
        );

    border: none;
}


.single-blog-about-card .single-blog-sidebar-label {
    color: var(--single-blog-accent);
}


.single-blog-about-card h3 {
    color: #ffffff;
}


.single-blog-about-card p {
    color: rgba(255,255,255,.78);
}


.single-blog-about-card a {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #ffffff;

    font-size: 14px;

    font-weight: 700;
}


.single-blog-about-card a:hover {
    color: var(--single-blog-accent);
}


.single-blog-about-card svg {
    width: 16px;
    height: 16px;
}


/* =========================================================
   BACK TO BLOG
========================================================= */

.single-blog-sidebar-back {
    padding: 5px;
}


.single-blog-sidebar-back a {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--single-blog-primary);

    font-size: 14px;

    font-weight: 700;
}


.single-blog-sidebar-back svg {
    width: 16px;
    height: 16px;
}


/* =========================================================
   COMMENTS
========================================================= */

.single-blog-comments {
    margin-top: 70px;
}


.single-blog-section-heading {
    margin-bottom: 35px;
}


.single-blog-section-heading > span {
    display: block;

    margin-bottom: 8px;

    color: var(--single-blog-primary);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.single-blog-section-heading h2 {
    margin: 0 0 8px;

    color: var(--single-blog-dark);

    font-size: 34px;

    line-height: 1.2;
}


.single-blog-section-heading p {
    margin: 0;

    color: var(--single-blog-muted);

    font-size: 15px;
}


/* =========================================================
   COMMENT LIST
========================================================= */

.single-blog-comment-list {
    display: flex;

    flex-direction: column;

    gap: 15px;
}


.single-blog-comment {
    display: flex;

    gap: 18px;

    padding: 25px;

    background: #ffffff;

    border: 1px solid var(--single-blog-border);

    border-radius: 14px;
}


.single-blog-comment-avatar {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--single-blog-primary);

    color: #ffffff;

    font-size: 16px;

    font-weight: 800;
}


.single-blog-comment-body {
    flex: 1;
}


.single-blog-comment-header {
    margin-bottom: 10px;
}


.single-blog-comment-header h3 {
    margin: 0 0 3px;

    color: var(--single-blog-dark);

    font-size: 16px;
}


.single-blog-comment-header span {
    color: var(--single-blog-muted);

    font-size: 12px;
}


.single-blog-comment-body p {
    margin: 0;

    color: var(--single-blog-text);

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   EMPTY COMMENTS
========================================================= */

.single-blog-empty-comments {
    padding: 50px 30px;

    text-align: center;

    background: #ffffff;

    border: 1px dashed var(--single-blog-border);

    border-radius: 14px;
}


.single-blog-empty-icon {
    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    margin: 0 auto 15px;

    border-radius: 50%;

    background: var(--single-blog-light);

    color: var(--single-blog-primary);
}


.single-blog-empty-icon svg {
    width: 23px;
}


.single-blog-empty-comments h3 {
    margin-bottom: 7px;

    color: var(--single-blog-dark);

    font-size: 18px;
}


.single-blog-empty-comments p {
    margin: 0;

    color: var(--single-blog-muted);

    font-size: 14px;
}


/* =========================================================
   COMMENT FORM
========================================================= */

.single-blog-comment-form {
    margin-top: 60px;

    padding: 40px;

    background: #ffffff;

    border: 1px solid var(--single-blog-border);

    border-radius: var(--single-blog-radius);
}


.single-blog-comment-form .single-blog-section-heading {
    margin-bottom: 28px;
}


.single-blog-form-grid {
    display: grid;

    grid-template-columns: 1fr;

    gap: 18px;
}


.single-blog-form-group {
    margin-bottom: 20px;
}


.single-blog-form-group label {
    display: block;

    margin-bottom: 8px;

    color: var(--single-blog-dark);

    font-size: 13px;

    font-weight: 700;
}


.single-blog-form-group input,
.single-blog-form-group textarea {
    width: 100%;

    display: block;

    padding: 14px 16px;

    border: 1px solid var(--single-blog-border);

    border-radius: 10px;

    outline: none;

    background: #ffffff;

    color: var(--single-blog-dark);

    font-family: inherit;

    font-size: 14px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.single-blog-form-group textarea {
    min-height: 150px;

    resize: vertical;
}


.single-blog-form-group input:focus,
.single-blog-form-group textarea:focus {
    border-color: var(--single-blog-primary);

    box-shadow:
        0 0 0 3px rgba(11,122,75,.1);
}


.single-blog-submit,
.single-blog-btn {
    display: inline-flex;

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

    gap: 9px;

    padding: 13px 22px;

    border-radius: 8px;

    font-size: 13px;

    font-weight: 700;

    text-decoration: none;

    cursor: pointer;

    transition:
        transform .2s ease,
        background .2s ease,
        color .2s ease;
}


.single-blog-submit {
    border: none;

    background: var(--single-blog-primary);

    color: #ffffff;
}


.single-blog-submit:hover {
    background: var(--single-blog-primary-dark);

    transform: translateY(-2px);
}


.single-blog-submit svg {
    width: 16px;
}


/* =========================================================
   CTA
========================================================= */

.single-blog-cta {
    position: relative;

    overflow: hidden;

    padding: 90px 0;

    background:
        linear-gradient(
            135deg,
            #0b2e20,
            #0b7a4b
        );
}


.single-blog-cta-overlay {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(215,169,40,.15),
            transparent 30%
        );
}


.single-blog-cta-content {
    position: relative;

    z-index: 2;

    max-width: 720px;
}


.single-blog-cta-content > span {
    display: block;

    margin-bottom: 12px;

    color: var(--single-blog-accent);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;
}


.single-blog-cta-content h2 {
    margin: 0 0 18px;

    color: #ffffff;

    font-size: clamp(32px, 4vw, 48px);

    line-height: 1.15;
}


.single-blog-cta-content p {
    max-width: 620px;

    margin-bottom: 30px;

    color: rgba(255,255,255,.78);

    line-height: 1.8;
}


.single-blog-cta-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}


.single-blog-btn-primary {
    background: var(--single-blog-accent);

    color: #142016;
}


.single-blog-btn-primary:hover {
    transform: translateY(-2px);

    background: #e5bd45;

    color: #142016;
}


.single-blog-btn-outline {
    border: 1px solid rgba(255,255,255,.35);

    color: #ffffff;

    background: transparent;
}


.single-blog-btn-outline:hover {
    background: #ffffff;

    color: var(--single-blog-primary);
}


.single-blog-btn svg {
    width: 16px;
}


/* =========================================================
   NOT FOUND
========================================================= */

.single-blog-not-found {
    padding: 120px 0;

    background: var(--single-blog-light);
}


.single-blog-not-found-content {
    max-width: 600px;

    margin: 0 auto;

    text-align: center;
}


.single-blog-not-found-icon {
    width: 75px;
    height: 75px;

    display: grid;
    place-items: center;

    margin: 0 auto 25px;

    border-radius: 50%;

    background: #ffffff;

    color: var(--single-blog-primary);

    box-shadow: var(--single-blog-shadow);
}


.single-blog-not-found-icon svg {
    width: 30px;
    height: 30px;
}


.single-blog-not-found-content > span {
    color: var(--single-blog-primary);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;
}


.single-blog-not-found-content h2 {
    margin: 10px 0;

    color: var(--single-blog-dark);

    font-size: 42px;
}


.single-blog-not-found-content p {
    margin-bottom: 30px;

    color: var(--single-blog-muted);

    line-height: 1.7;
}


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

@media (max-width: 991px) {

    .single-blog-layout {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .single-blog-sidebar {
        position: static;

        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .single-blog-sidebar-back {
        grid-column: 1 / -1;
    }


    .single-blog-hero {
        min-height: 420px;
    }

}


@media (max-width: 767px) {

    .single-blog-container {
        width: min(
            calc(100% - 30px),
            var(--single-blog-container)
        );
    }


    .single-blog-hero-content {
        padding: 80px 0 65px;
    }


    .single-blog-eyebrow {
        display: block;

        margin-bottom: 10px;
    }


    .single-blog-category {
        margin-left: 0;
    }


    .single-blog-hero h1 {
        font-size: 38px;

        letter-spacing: -1px;
    }


    .single-blog-meta {
        flex-direction: column;

        gap: 10px;
    }


    .single-blog-section {
        padding: 55px 0 70px;
    }


    .single-blog-content {
        padding: 35px 25px;

        font-size: 16px;

        line-height: 1.8;
    }


    .single-blog-content h2 {
        font-size: 27px;
    }


    .single-blog-content h3 {
        font-size: 22px;
    }


    .single-blog-footer {
        flex-direction: column;

        align-items: flex-start;

        padding: 25px;
    }


    .single-blog-sidebar {
        display: flex;
    }


    .single-blog-comment-form {
        padding: 25px;
    }


    .single-blog-comment {
        padding: 20px;

        gap: 12px;
    }


    .single-blog-comment-avatar {
        width: 40px;
        height: 40px;

        flex-basis: 40px;

        font-size: 14px;
    }


    .single-blog-section-heading h2 {
        font-size: 28px;
    }


    .single-blog-cta {
        padding: 65px 0;
    }


    .single-blog-cta-actions {
        flex-direction: column;

        align-items: stretch;
    }


    .single-blog-btn {
        width: 100%;
    }


    .single-blog-not-found {
        padding: 80px 0;
    }


    .single-blog-not-found-content h2 {
        font-size: 34px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .single-blog-hero h1 {
        font-size: 32px;
    }


    .single-blog-featured-image {
        aspect-ratio: 4 / 3;
    }


    .single-blog-content {
        padding: 30px 20px;
    }


    .single-blog-comment-form {
        padding: 20px;
    }


    .single-blog-sidebar-card {
        padding: 25px;
    }

}
/* =========================================================
PRIVACY POLICY
Extends the Single Blog Design System
========================================================= */

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

.privacy-hero {
min-height: 520px;
}

/* =========================================================
MAIN ARTICLE
========================================================= */

.privacy-article {
overflow: hidden;
}

.privacy-content {
padding: 0;
}

/* =========================================================
INTRODUCTION
========================================================= */

.privacy-introduction {
padding-bottom: 55px;
margin-bottom: 55px;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.privacy-label {
display: inline-block;
margin-bottom: 15px;

```
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
```

}

.privacy-introduction h2 {
margin: 0 0 22px;

```
font-size: clamp(30px, 4vw, 46px);
line-height: 1.15;
```

}

.privacy-lead {
font-size: 19px !important;
line-height: 1.8 !important;
}

/* =========================================================
POLICY SECTIONS
========================================================= */

.privacy-section-block {
display: grid;
grid-template-columns: 70px minmax(0, 1fr);
gap: 25px;

```
padding: 0 0 55px;
margin-bottom: 55px;

border-bottom: 1px solid rgba(0, 0, 0, 0.08);
```

}

.privacy-section-block:last-child {
margin-bottom: 0;
border-bottom: 0;
}

.privacy-number {
display: flex;
align-items: flex-start;
justify-content: center;

```
font-size: 14px;
font-weight: 800;
letter-spacing: 1px;

padding-top: 7px;
```

}

.privacy-section-block h2 {
margin: 0 0 20px;

```
font-size: 28px;
line-height: 1.25;
```

}

.privacy-section-block p {
margin-bottom: 18px;
}

.privacy-section-block ul {
margin: 20px 0 0;
padding-left: 22px;
}

.privacy-section-block li {
margin-bottom: 14px;
line-height: 1.8;
}

.privacy-section-block li:last-child {
margin-bottom: 0;
}

/* =========================================================
CONTACT INFORMATION
========================================================= */

.privacy-contact-block {
padding-bottom: 10px;
}

.privacy-contact-details {
display: flex;
flex-direction: column;
gap: 15px;

```
margin-top: 25px;
padding: 25px;

border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 4px;
```

}

.privacy-contact-details div {
line-height: 1.7;
}

.privacy-contact-details a {
text-decoration: none;
}

.privacy-contact-details a:hover {
text-decoration: underline;
}

/* =========================================================
SIDEBAR PRIVACY STATUS
========================================================= */

.privacy-sidebar-status {
display: flex;
align-items: center;
gap: 10px;

```
margin-top: 25px;
padding-top: 20px;

border-top: 1px solid rgba(0, 0, 0, 0.08);

font-size: 13px;
font-weight: 600;
```

}

.privacy-sidebar-status svg {
width: 20px;
height: 20px;
}

/* =========================================================
CTA
========================================================= */

.privacy-cta {
margin-top: 0;
}

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

@media (max-width: 991px) {

```
.privacy-hero {
    min-height: 460px;
}

.privacy-section-block {
    grid-template-columns: 55px minmax(0, 1fr);
    gap: 20px;
}
```

}

@media (max-width: 767px) {

```
.privacy-hero {
    min-height: 420px;
}

.privacy-introduction {
    padding-bottom: 40px;
    margin-bottom: 40px;
}

.privacy-lead {
    font-size: 17px !important;
}

.privacy-section-block {
    display: block;

    padding-bottom: 40px;
    margin-bottom: 40px;
}

.privacy-number {
    justify-content: flex-start;

    margin-bottom: 12px;

    font-size: 13px;
}

.privacy-section-block h2 {
    font-size: 24px;
}

.privacy-section-block li {
    line-height: 1.7;
}

.privacy-contact-details {
    padding: 20px;
}
```

}

@media (max-width: 480px) {

```
.privacy-hero {
    min-height: 390px;
}

.privacy-section-block h2 {
    font-size: 22px;
}

.privacy-contact-details {
    font-size: 14px;
}
```

}