:root {
    --header-bg-color: #1F553A;
    --main-bg-color: #05140E;
    --footer-bg-color: #1F553A;
    --main-text-color: #FFFFFF;
    --link-text-color: #C9924D;
    --button-text-color: #FFFFFF;
    --button-bg-color: #C9924D;
    --button-second-bg-color: #C9924D;
}

html, body, div, span, object, iframe, figure, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, em, img, small, strike, strong, sub, sup, tt, b, u, i, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, main, canvas, embed, footer, header, nav, section, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    text-size-adjust: none;
}

html, body {
    margin: 0;
    padding: 0;
}

html {
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    font-family: Aleo, sans-serif;
    line-height: 1.6;
    color: var(--main-text-color);
}

button {
    font-family: Aleo, sans-serif;
    cursor: pointer;
    border: none !important;
}

a {
    color: var(--link-text-color);
    transition: all 0.3s ease;
}

a:hover {
    text-decoration: none;
    color: var(--link-text-color);
}

h1, h2, h3, h4 {
    color: var(--main-text-color);
}

h1 {
    font-size: 45px;
    font-weight: 900;
    line-height: 45px;
    margin-bottom: 30px;
    text-align: center;
}
@media screen and (max-width: 992px) {
    h1 {
        font-size: 30px;
        line-height: 42px;
    }
}

h2 {
    font-size: 36px;
    font-weight: 700;
    line-height: 54px;
    margin-bottom: 30px;
}
@media screen and (max-width: 992px) {
    h2 {
        font-size: 30px;
        line-height: 44px;
    }
}

h3 {
    font-size: 30px;
    font-weight: 700;
    line-height: 44px;
    margin-bottom: 30px;
}
@media screen and (max-width: 992px) {
    h3 {
        font-size: 24px;
        line-height: 32px;
    }
}

p {
    font-size: 16px;
    letter-spacing: normal;
    font-weight: 400;
    margin-bottom: 10px;
    line-height: 24px;
}
@media screen and (max-width: 992px) {
    p {
        font-size: 14px;
        line-height: 29px;
    }
}

strong {
    font-weight: 600;
}
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    white-space: nowrap;
    display: block;
    overflow-x: auto;
    max-width: 100%;
    border-radius: 10px;
    margin-bottom: 20px;
}

table p {
    margin: 0;
}

tbody {
    width: calc(100% - 2px);
    display: table;
}

th {
    background: var(--footer-bg-color);
}

th, td {
    border: 1px solid var(--main-text-color);
    padding: 8px;
    box-sizing: border-box;
}

th:first-child {
    border-top-left-radius: 10px;
}

th:last-child {
    border-top-right-radius: 10px;
}

tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

tr:first-child td:first-child {
    border-top-left-radius: 10px;
}

tr:first-child td:last-child {
    border-top-right-radius: 10px;
}

table::-webkit-scrollbar {
    height: 8px;
}

table::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

table::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}

footer, header, nav, section, main {
    display: block;
    position: relative;
}

main {
    flex: 1 0 auto;
    background-color: var(--main-bg-color);
}

section {
    padding: 20px 0;
}

@media screen and (max-width: 768px) {
    section {
        padding: 20px 0;
    }
}

.climatesmartcocoa_guide_container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (max-width: 1200px) {
    .climatesmartcocoa_guide_container {
        max-width: 100%;
        padding: 0 15px;
    }
}

img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}


.climatesmartcocoa_guide_row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.climatesmartcocoa_guide_col:first-child {
    width: 820px;

}
.climatesmartcocoa_guide_col:last-child {
    flex: 0 0 330px;
}
@media (max-width: 1030px) {
    .climatesmartcocoa_guide_row {
        flex-wrap: wrap;
        justify-content: center;
    }
    .climatesmartcocoa_guide_col:first-child, .climatesmartcocoa_guide_col:last-child {
        width: 100%;
        flex: auto;
    }
}

.climatesmartcocoa_guide_jc_end {
    justify-content: end !important;
}

.climatesmartcocoa_guide_jc_center {
    justify-content: center;
}

.climatesmartcocoa_guide_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    line-height: inherit;
    height: auto;
    min-width: 126px;
    padding: 12px 24px;
    border-radius: 18px;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.climatesmartcocoa_guide_btn:hover {
    transform: scale(1.1);
}
.climatesmartcocoa_guide_btn__wrapper {
    display: flex;
    justify-content: center;
    gap: 20px;
}

@media screen and (max-width: 768px) {
    .climatesmartcocoa_guide_btn__wrapper {
        gap: 20px;
    }
}
.climatesmartcocoa_guide_btn_primary {
    color: var(--button-text-color);
    background-color: var(--button-bg-color);
}

.climatesmartcocoa_guide_btn_primary:hover {
    color: var(--button-text-color);
    background-color: var(--button-bg-color);
}

.climatesmartcocoa_guide_btn_secondary {
    color: var(--button-text-color);
    background-color: var(--button-second-bg-color);
}

.climatesmartcocoa_guide_btn_secondary:hover {
    color: var(--button-text-color);
    background-color: var(--button-second-bg-color);
}

.climatesmartcocoa_guide_btn_pulse {
    animation: pulse 1.5s infinite;
}

.climatesmartcocoa_guide_btn_uppercase {
    text-transform: uppercase;
}
.climatesmartcocoa_guide_header {
    background-color: var(--header-bg-color);
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

.climatesmartcocoa_guide_header ul, .climatesmartcocoa_guide_header ol, .climatesmartcocoa_guide_header li,
.climatesmartcocoa_guide_footer ul, .climatesmartcocoa_guide_footer ol, .climatesmartcocoa_guide_footer li {
    margin: 0;
    padding: 0;
    border: 0;
    list-style-type: none;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    text-size-adjust: none;
}
.climatesmartcocoa_guide_header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.climatesmartcocoa_guide_header__inner_primary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: auto;
}

.climatesmartcocoa_guide_header__inner_second {
    display: flex;
    align-items: center;
    gap: 10px;
}

.climatesmartcocoa_guide_header__row {
    flex-direction: row;
    height: 80px;
}

.climatesmartcocoa_guide_header__inner_second .climatesmartcocoa_guide_header__row {
    flex-direction: row;
    gap: 10px;
    height: auto;
}

.climatesmartcocoa_guide_header__col {
    flex-direction: column;
}

.climatesmartcocoa_guide_header__inner_second.climatesmartcocoa_guide_header__col {
    flex-direction: row;
    padding: 10px 0;
}

.climatesmartcocoa_guide_header__logo {
    display: flex;
    max-height: 50px;
    height: 100%;
}

.climatesmartcocoa_guide_header__logo a {
    text-decoration: none;
    display: flex;
}
.climatesmartcocoa_guide_header__logo img {
    object-fit: contain;
    border-radius: initial;
    max-width: 132px;
}

.climatesmartcocoa_guide_header__nav {
    display: flex;
}
.climatesmartcocoa_guide_header__nav ul {
    display: flex;
    gap: 10px;
    align-items: center;
    list-style-type: none;
    flex-direction: column;
    text-align: center;
    width: 100%;
    height: auto;
    padding: 20px 0;
}

.climatesmartcocoa_guide_header__nav ul li {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 10px 0;
}

.climatesmartcocoa_guide_header__nav ul li a {
    color: var(--link-text-color);
    text-decoration: none;
    padding: 10px;
}

.climatesmartcocoa_guide_header__nav ul li a:hover {
    opacity: .2;
}

.climatesmartcocoa_guide_section img  {
    max-width: 1015px;
    display: block;
    margin: auto;
}

.climatesmartcocoa_guide_section__main .climatesmartcocoa_guide_container > :not(:last-child) {
    margin-bottom: 30px;
}

.climatesmartcocoa_guide_btn__wrapper_main {
    max-width: 300px;
    width: 100%;
    margin: auto;
}

.climatesmartcocoa_guide_btn__wrapper_main .climatesmartcocoa_guide_btn_primary {
    padding: 20px 70px;
    border-radius: 30px;
}

.climatesmartcocoa_guide_logo_burger_wrapper {
    display: flex;
    align-items: center;
    gap: 30px;
}

#climatesmartcocoa_guide_nav_menu {
    position: absolute;
    display: flex;
    top: 80px;
    left: 0;
    width: 25%;
    height: calc(100vh - 120px);
    padding: 20px 25px;
    background-color: var(--header-bg-color);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.climatesmartcocoa_guide_header .climatesmartcocoa_guide_btn {
    padding: 6px 12px;
}

.climatesmartcocoa_guide_header__inner_block {
    margin-top: auto;
    text-align: center;
    color: var(--main-text-color);
}

#climatesmartcocoa_guide_nav_menu.climatesmartcocoa_guide_active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease;
}

.climatesmartcocoa_guide_burger_wrapper, #climatesmartcocoa_guide_header_btn {
    flex: 0 0 200px;
    display: flex;
}

.climatesmartcocoa_guide_burger_wrapper {
    order: -1;
}

.climatesmartcocoa_guide_header__logo {
    flex: 1;
    text-align: center;
    justify-content: center;
}

.climatesmartcocoa_guide_burger_menu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 42px;
    height: 30px;
    cursor: pointer;
    order: -1;
    transition: opacity 0.3s ease;
}

.climatesmartcocoa_guide_burger_menu:hover {
    opacity: .2;
}

.climatesmartcocoa_guide_burger_menu span {
    display: block;
    width: 100%;
    height: 4px;
    background-color: var(--main-text-color);
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
}

.climatesmartcocoa_guide_burger_menu span:nth-child(1) {
    width: 80%;
}
.climatesmartcocoa_guide_burger_menu span:nth-child(3) {
    width: 60%;
}

.climatesmartcocoa_guide_burger_menu.climatesmartcocoa_guide_active {
    height: 22px;
}

.climatesmartcocoa_guide_burger_menu.climatesmartcocoa_guide_active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
    width: 100%;
}

.climatesmartcocoa_guide_burger_menu.climatesmartcocoa_guide_active span:nth-child(2) {
    opacity: 0;
}

.climatesmartcocoa_guide_burger_menu.climatesmartcocoa_guide_active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
    width: 100%;
}

.climatesmartcocoa_guide_section__content h1:first-of-type,
.climatesmartcocoa_guide_section__content h2:first-of-type,
.climatesmartcocoa_guide_section__content h3:first-of-type,
.climatesmartcocoa_guide_section__content h4:first-of-type {
    margin-top: 0;
    margin-bottom: 30px;
}

.climatesmartcocoa_guide_section__content h1:not(:first-of-type),
.climatesmartcocoa_guide_section__content h2:not(:first-of-type),
.climatesmartcocoa_guide_section__content h3:not(:first-of-type),
.climatesmartcocoa_guide_section__content h4:not(:first-of-type) {
    margin: 30px 0;
}

.climatesmartcocoa_guide_section__content .climatesmartcocoa_guide_update_post {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
}

.climatesmartcocoa_guide_section__content .climatesmartcocoa_guide_update_post p {
    width: 100%;
    max-width: 580px;
    margin: 0;
    padding: 20px;
    border-radius: 10px;
    background-color: var(--header-bg-color);
}

footer {
    flex-shrink: 0;
    background-color: var(--footer-bg-color);
    color: var(--main-text-color);
}

.climatesmartcocoa_guide_footer__wrapper {
    display: flex;
    flex-direction: column;
    justify-self: center;
    max-width: 820px;
    width: 100%;
    padding: 20px 0;
    gap: 17px;
}

.climatesmartcocoa_guide_footer__row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}
.climatesmartcocoa_guide_footer__col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.climatesmartcocoa_guide_footer__col:first-child {
    flex: 2;
}

.climatesmartcocoa_guide_footer__col:last-child {
    flex: 1;
}

.climatesmartcocoa_guide_footer__logo {
    max-width: 132px;
}
.climatesmartcocoa_guide_footer__logo img {
    border-radius: 0;
}

.climatesmartcocoa_guide_footer__nav__list li {
    flex: 0 0 calc(50% - 20px);
}

.climatesmartcocoa_guide_footer__nav__list li:nth-child(odd) {
    flex: auto;
    text-align: start;
}

.climatesmartcocoa_guide_footer__nav, .climatesmartcocoa_guide_footer__icons, .climatesmartcocoa_guide_footer__inner {
    display: flex;
    justify-content: center;
}

.climatesmartcocoa_guide_footer__icons__link img {
    border-radius: initial;
}

.climatesmartcocoa_guide_footer__nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 40px;
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    justify-content: center;
}

.climatesmartcocoa_guide_footer__nav__link {
    text-decoration: none;
    color: var(--link-text-color);
    font-size: 14px;
}
.climatesmartcocoa_guide_footer__nav__link:hover {
    color: var(--link-text-color);
    opacity: .2;
}

.climatesmartcocoa_guide_footer__icons {
    justify-content: flex-start;
    max-width: 330px;
    height: fit-content;
    gap: 24px 14px;
    flex-wrap: wrap;
}

.climatesmartcocoa_guide_footer__inner p {
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4em;
}

.climatesmartcocoa_guide_breadcrumbs {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 1em 0;
    font-size: 0.95em;
    gap: 0.5em;
}

.climatesmartcocoa_guide_breadcrumbs li {
    display: flex;
    align-items: center;
}

.climatesmartcocoa_guide_breadcrumbs li a {
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.climatesmartcocoa_guide_breadcrumbs li::after {
    content: "›";
    margin: 0 0.5em;
}

.climatesmartcocoa_guide_breadcrumbs li:last-child::after {
    content: "";
    margin: 0;
}

.climatesmartcocoa_guide_content__row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 30px;
}

.climatesmartcocoa_guide_content__col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1 1;
}

.climatesmartcocoa_guide_content__col.climatesmartcocoa_guide_content__col__img {
    max-width: 550px;
}

.climatesmartcocoa_guide_btn__wrapper_left {
    margin: inherit;
    justify-content: flex-start;
}

.climatesmartcocoa_guide_content__inner {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    max-width: 100%;
}

.climatesmartcocoa_guide_content__inner_bg {
    position: absolute;
    border-radius: 10px;
    inset: 0;
    z-index: 0;
}

.climatesmartcocoa_guide_content__inner_bg img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.climatesmartcocoa_guide_content__inner_overlay {
    position: absolute;
    inset: 0;
    background: rgb(from var(--header-bg-color) r g b / 0.9);
    z-index: 1;
}

.climatesmartcocoa_guide_content__inner_block {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    max-width: 600px;
    position: relative;
    z-index: 2;
    padding: 88px 40px;
}

.climatesmartcocoa_guide_content__inner_block p {
    margin-bottom: 30px;
}

.climatesmartcocoa_guide_content__inner:has(p:nth-of-type(2)) .climatesmartcocoa_guide_content__inner_bg img {
    transform: scale(1.2);
}

.climatesmartcocoa_guide_content__inner:has(p:nth-of-type(3)) .climatesmartcocoa_guide_content__inner_bg img {
    transform: scale(1.4);
}

.climatesmartcocoa_guide_welcome_bonus {
    display: flex;
    position: fixed;
    bottom: 30px;
    left: 40px;
    padding: 20px;
    width: 550px;
    height: 70px;
    border-radius: 6px;
    z-index: 10;
    box-shadow: 0px 4px 20px 0px #00000080;
    background: var(--header-bg-color);
    transition: opacity 0.3s ease;
}

.climatesmartcocoa_guide_welcome_bonus.climatesmartcocoa_guide_hidden {
    opacity: 0;
    pointer-events: none;
}

.climatesmartcocoa_guide_welcome_bonus__wrapper {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 35px;
}

.climatesmartcocoa_guide_welcome_bonus__img {
    width: 70px;
    height: 70px;
}

.climatesmartcocoa_guide_welcome_bonus__img img {
    height: 100%;
    object-fit: contain;
}

.climatesmartcocoa_guide_welcome_bonus__bonus {
    max-width: 185px;
    width: 100%;
}

.climatesmartcocoa_guide_welcome_bonus__bonus p {
    text-align: center;
    margin: 0;
    font-weight: 500;
    font-size: 15px;
    line-height: 100%;
    vertical-align: middle;

}

.climatesmartcocoa_guide_btn_bonus {
    display: flex;
    flex-direction: row;
    gap: 5px;
    padding: 12px 28px;
    border-radius: 20px;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 var(--button-bg-color);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 15px 8px var(--button-bg-color);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 var(--button-bg-color);
    }
}

.climatesmartcocoa_guide_shake {
    display: inline-block;
    animation: shake 0.6s;
    animation-timing-function: ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-3px); }
    30% { transform: translateX(3px); }
    45% { transform: translateX(-3px); }
    60% { transform: translateX(3px); }
    75% { transform: translateX(-3px); }
    90% { transform: translateX(3px); }
}

.climatesmartcocoa_guide_shake {
    animation: shake 0.6s ease-in-out;
}

.climatesmartcocoa_guide_error_page {
    align-content: center;
}
.climatesmartcocoa_guide_error_page__wrapper {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.climatesmartcocoa_guide_error_page .climatesmartcocoa_guide_error_page__wrapper h1, .climatesmartcocoa_guide_error_page .climatesmartcocoa_guide_error_page__wrapper p {
    margin-bottom: 0;
}

@media screen and (max-width: 1280px) {
    #climatesmartcocoa_guide_nav_menu {
        width: 245px;
    }
}

@media screen and (max-width: 992px) {
    .climatesmartcocoa_guide_content__wrapper {
        flex-direction: column;
    }

    .climatesmartcocoa_guide_content__col.climatesmartcocoa_guide_content__col__img {
        max-width: 100%;
    }
}
@media screen and (max-width: 768px) {
    .climatesmartcocoa_guide_burger_wrapper, #climatesmartcocoa_guide_header_btn {
        flex: none;
    }

    .climatesmartcocoa_guide_header__logo {
        flex: none;
    }


    .climatesmartcocoa_guide_welcome_bonus {
        left: 15px;
        bottom: 10px;
        width: 184px;
        height: 222px;
        padding: 20px;
    }

    .climatesmartcocoa_guide_welcome_bonus__wrapper {
        flex-direction: column;
        gap: 20px;
    }

    .climatesmartcocoa_guide_footer__row {
        flex-direction: column;
        gap: 20px;
    }

    .climatesmartcocoa_guide_footer__row {
        justify-content: center;
    }

    .climatesmartcocoa_guide_footer__nav__list {
        text-align: center;
        gap: 10px 40px;
    }

    .climatesmartcocoa_guide_footer__icons {
        justify-content: center;
        gap: 10px 20px;
    }

    .climatesmartcocoa_guide_breadcrumbs {
        font-size: 0.75em;
    }

}

@media screen and (max-width: 600px) {
    #climatesmartcocoa_guide_nav_menu {
        width: 100%;
        top: 120px;
        padding: 0;
    }

    .climatesmartcocoa_guide_header__row {
        flex-direction: column;
        height: 100px;
        padding: 10px 0;
        gap: 0;
    }

    .climatesmartcocoa_guide_logo_burger_wrapper {
        width: 100%;
        justify-content: space-between;
    }

    .climatesmartcocoa_guide_burger_menu {
        order: 1;
        align-items: self-end;
        width: 30px;
        height: 22px;
    }

    .climatesmartcocoa_guide_burger_menu_center {
        position: absolute;
        right: 15px;
        top: 22px;
    }

    .climatesmartcocoa_guide_header__inner_block {
        padding: 20px 25px;
    }

    .climatesmartcocoa_guide_content__inner_block {
        padding: 12px 10px;
    }

    .climatesmartcocoa_guide_content__inner_block p {
        margin-bottom: 15px;
    }

    .climatesmartcocoa_guide_content__inner_block h1 {
        margin-bottom: 10px;
    }

    .climatesmartcocoa_guide_content__inner_block .climatesmartcocoa_guide_btn__wrapper_main .climatesmartcocoa_guide_btn_primary {
        padding: 12px 28px;
    }

    .climatesmartcocoa_guide_content__inner, .climatesmartcocoa_guide_content__inner_bg, .climatesmartcocoa_guide_content__inner_bg img {
        border-radius: 5px;
    }
}

/* Random Images Block */
.climatesmartcocoa_guide_showcase__wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 30px 0;
    justify-content: space-between;
}

.climatesmartcocoa_guide_showcase__block {
    display: flex;
    flex-direction: column;
    width: 215px;
    background-color: var(--header-bg-color);
    border-radius: 10px;
}

.climatesmartcocoa_guide_showcase__image {
    position: relative;
    display: block;
    overflow: hidden;
    width: 215px;
    height: 150px;
}

.climatesmartcocoa_guide_showcase__image img {
    max-width: 100%;
    display: initial;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
}


.climatesmartcocoa_guide_showcase__image_overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 10px 10px 0 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.climatesmartcocoa_guide_showcase__image:hover .climatesmartcocoa_guide_showcase__image_overlay {
    opacity: 1;
    visibility: visible;
}

.climatesmartcocoa_guide_showcase__image .climatesmartcocoa_guide_btn__wrapper {
    z-index: 2;
}

.climatesmartcocoa_guide_showcase__desc {
    display: flex;
    flex-direction: column;
    padding: 10px 20px;
}
.climatesmartcocoa_guide_showcase__desc p, .climatesmartcocoa_guide_showcase__desc span {
    margin: 0;
}

.climatesmartcocoa_guide_showcase__desc p {
    font-size: 14px;
}

.climatesmartcocoa_guide_showcase__desc span {
    font-size: 12px;
}

@media screen and (max-width: 1210px) {
    .climatesmartcocoa_guide_showcase__block {
        width: calc(20% - 20px);
    }
    .climatesmartcocoa_guide_showcase__image {
        width: auto;
    }
}

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

    .climatesmartcocoa_guide_showcase__block {
        width: calc(33.333% - 20px);
    }

    .climatesmartcocoa_guide_showcase__image {
        height: 120px;
    }

    .climatesmartcocoa_guide_showcase__desc {
        padding: 10px;
    }

    .climatesmartcocoa_guide_showcase__desc p {
        font-size: 12px;
    }

    .climatesmartcocoa_guide_showcase__desc span {
        font-size: 10px;
    }
}

@media (max-width: 600px) {
    .climatesmartcocoa_guide_showcase__wrapper {
        justify-content: center;
    }
    .climatesmartcocoa_guide_showcase__block {
        width: calc(50% - 20px);
    }
    .climatesmartcocoa_guide_showcase__image {
        width: auto;
        height: 120px;
    }
}

/* TOC Styles */
.climatesmartcocoa_guide_toc {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    padding: 0 20px 0 40px;
    margin: 0;
    display: block;
    column-count: 2;
    column-gap: 40px;
}

.climatesmartcocoa_guide_toc li {
    break-inside: avoid;
    margin-bottom: 10px;
}

.climatesmartcocoa_guide_toc li::marker {
    color: var(--link-text-color);
}

.climatesmartcocoa_guide_toc_wrapper {
    max-width: 580px;
    margin: 20px auto;
    border-radius: 10px;
    background-color: var(--header-bg-color);
}

.climatesmartcocoa_guide_toc_title {
    display: flex;
    align-items: center;
    padding: 20px;
    gap: 10px;
}

.climatesmartcocoa_guide_toc.climatesmartcocoa_guide_is_open {
    margin: inherit;
    margin-top: 0;
    max-height: 2000px !important;
    padding: 0 20px 20px 40px;
}

.climatesmartcocoa_guide_toc_arrow {
    width: 20px;
    height: 21px;
    order: -1;
    display: inline-block;
    background-color: var(--main-text-color);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 21'><path d='M5.55054 7.1665L14.4489 7.1665C14.7429 7.1665 14.9777 7.26655 15.1534 7.46665C15.3291 7.66592 15.417 7.89882 15.417 8.16534C15.417 8.24899 15.4058 8.33632 15.3834 8.42735C15.3619 8.51756 15.3287 8.60407 15.284 8.6869L10.8114 15.8743C10.7076 16.0269 10.5886 16.1417 10.4544 16.2188C10.321 16.295 10.1697 16.3332 10.0003 16.3332C9.83099 16.3332 9.67963 16.295 9.54624 16.2188C9.41285 16.1425 9.29384 16.0277 9.1892 15.8743L4.71665 8.6869C4.67272 8.60407 4.63957 8.51674 4.61721 8.42489C4.59484 8.33304 4.58366 8.24571 4.58366 8.16288C4.58366 7.89554 4.67152 7.66264 4.84724 7.46419C5.02297 7.26573 5.2574 7.1665 5.55054 7.1665Z'/></svg>") no-repeat center/contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    transition: transform 0.3s ease;
}

.climatesmartcocoa_guide_toc_arrow.climatesmartcocoa_guide_rotated {
    transform: rotate(180deg);
    margin-bottom: -4px;
}

@media (max-width: 500px) {
    .climatesmartcocoa_guide_toc {
        column-count: 1;
    }
}