:root {

    --scc-green: #0e3813;
    --scc-grey: #595959;
    
    --body-background: #ffffff;
    --product-footer-background: #f8f9fb;
    --sustainability-background: rgba(14, 56, 19, 0.91);

    --header-height: 4.6rem;

    --heading-font: 1.6rem;
    --content-font: 1rem;
    --product-font: 0.85rem;
    --icon-height: 1.6rem;

    --navigation-font: 0.9rem;

    --max-content-width: 60rem;

}

::-moz-selection {

    color:#ffffff;
    background: rgba(14, 56, 19, 0.91);
}

::selection {

    color: #ffffff;
    background: rgba(14, 56, 19, 0.91);
}

html {

    font-size: 16px;
}

a {

    text-decoration: none;
}

@font-face {
  font-family: 'inter';
  src: url('cdn/fonts/inter-18pt-light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'inter';
  src: url('cdn/fonts/inter-18pt-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'inter';
  src: url('cdn/fonts/inter-18pt-bold.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'montserrat';
  src: url('cdn/fonts/montserrat-bold.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

body {

    margin: 0;

    font-family: 'inter', sans-serif;
    font-size: 1rem;
    
    background-color: var(--body-background);
}

.header {

    width: 100%;
    height: var(--header-height);

    position: fixed;
    z-index: 100;

    background-color: var(--body-background);

    overflow: hidden;
}

.header-area {

    position: relative;
}

.header-logo {

    position: absolute;
    z-index: 110;

    top: 1rem;
    left: 0rem;

    height: calc(var(--header-height) - 2rem);
    width: 30%;
    min-width: 18rem;
    
    background-image: url('cdn/images/scc-ingredients-logo.svg');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center left;

}

.header-navigation {

    position: absolute;
    z-index: 120;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: right;

    right: 0rem;
}

.header-navigation-item {

    padding-left: var(--navigation-font);
    padding-right: var(--navigation-font);

    height: var(--header-height);
    line-height: var(--header-height);

    font-size: var(--navigation-font);

    color: var(--scc-grey);
}

.header-navigation-item:hover {

    color: var(--scc-green);
}

.content {

    position: relative;
    z-index: 50;
}

.content-section {

    padding-top: var(--header-height);
    padding-bottom: var(--header-height);
}

.content-area, .header-area {

    width: 93%;
    margin: 0 auto;

    max-width: var(--max-content-width);
}

.content-heading {

    font-family: 'montserrat', sans-serif;
    font-weight: 500;

    font-size: var(--heading-font);
    color: var(--scc-green);

    margin-bottom: calc(var(--heading-font) - 0.3rem);
}

.content-body {

    font-weight: 300;

    font-size: var(--content-font);
}

.about-banner {

    width: 93%;
    margin: calc(2 * var(--heading-font)) auto var(--heading-font) auto;

    max-width: var(--max-content-width);

    background-image: url('cdn/images/about-banner.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    height: 40vh;
    min-height: 20rem;
    max-height: calc(0.45 * var(--max-content-width));
}

.about-content-area > .content-heading, .about-content-area > .content-body {

    width: 87%;
    max-width: calc(0.935 * var(--max-content-width));
}

.product.content-section {

    background-color: var(--product-footer-background);
}

.product-content-area {

    display: flex;

    flex-direction: column;
    align-items: end;
}

.product-side-logo {

    position: absolute;
    align-self: start;

    z-index: 80;

    height: calc(9 * var(--heading-font));
    width: calc(8.5 * var(--heading-font));

    background-image: url('cdn/images/scc-ingredients-bean.svg');
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: 0rem 0rem;

    transform: translateX(calc(0rem - 2 * var(--heading-font))) translateY(-0.5rem);
}

.product-content-area > .content-heading, .product-content-area > .content-body, .product-carousel {

    position: relative;
    z-index: 90;

    width: 85%;
    max-width: calc(0.914 * var(--max-content-width));
}

.product-carousel {

    display: flex;
    flex-direction: row;
    justify-content: left;
    flex-wrap: wrap;

    gap: var(--content-font);

    margin-top: var(--heading-font);
}

.product-carousel-item {

    width: calc(3 * var(--heading-font));

    text-align: center;
    font-size: var(--product-font);

    background-image: url('cdn/images/product-frame.svg');
    background-size: calc(3 * var(--heading-font)) auto;
    background-position: center top;
    background-repeat: no-repeat;
}

.product-carousel-item::before {

    display: block;

    position: relative;
    left: 0.4rem;
    top: 0.4rem;

    content: ' ';

    width: calc(3 * var(--heading-font) - 0.8rem);
    height: calc(3 * var(--heading-font) - 0.8rem);

    border-radius: 30rem;

    margin-bottom: 1.6rem;
    overflow: hidden;

    background-repeat: no-repeat;
}

.product-carousel-item:hover {

    background-image: url('cdn/images/product-frame-hover.svg');

    cursor: pointer;
    color: var(--scc-green);
}

.product-item-butter.product-carousel-item::before {

    background-image: url('cdn/images/cocoa-butter-stock-image.webp');

    background-size: calc(3.1 * var(--heading-font)) auto;
    background-position: -0.45rem center;
}

.product-item-mass.product-carousel-item::before {

    background-image: url('cdn/images/cocoa-mass-stock-image.webp');

    background-size: calc(2.9 * var(--heading-font)) auto;
    background-position: -0.35rem center;
}

.product-item-natural-powder.product-carousel-item::before {

    background-image: url('cdn/images/natural-powder-stock-image.webp');

    background-size: calc(2.9 * var(--heading-font)) auto;
    background-position: -0.45rem center;
}

.product-item-alkalised-powder.product-carousel-item::before {

    background-image: url('cdn/images/alkalised-powder-stock-image.webp');

    background-size: calc(2.9 * var(--heading-font)) auto;
    background-position: -0.45rem center;
}

.product-item-cbr.product-carousel-item::before {

    background-image: url('cdn/images/cbr-stock-image.webp');

    background-size: calc(2.9 * var(--heading-font)) auto;
    background-position: -0.2rem center;
}

.product-item-cbs.product-carousel-item::before {

    background-image: url('cdn/images/cbs-stock-image.webp');

    background-size: calc(2.7 * var(--heading-font)) auto;
    background-position: -0.05rem center;
}

.sustainability.content-section {

    padding-top: 0rem;

    position: relative;
    display: flex;

    background-image: url('cdn/images/sustainability-banner.webp');
    background-position: center center;
    background-size: cover;
}

.sustainability.content-section ::-moz-selection {

    color: rgb(14, 56, 19);
    background:#ffffff;
}

.sustainability.content-section ::selection {

    color: rgb(14, 56, 19);
    background:#ffffff;
}

.sustainability-banner {

    display: flex;
    flex-direction: row;
    justify-content: space-between;

    overflow: hidden;
}

.sustanability-video {

    z-index: 60;
}

.sustainability-video > video {

    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sustainability-content-area {

    padding-top: var(--header-height);
}

.sustainability-banner::before {

    position: absolute;
    left: 0;

    z-index: 60;

    margin-top: calc(0rem - var(--header-height));

    width: 100%;
    height: 100%;

    content: ' ';
    background-color: var(--sustainability-background);
}

.sustainability-content-box {

    position: relative;
    z-index: 80;

    padding-right: calc(0.6 * var(--header-height));
    width: calc(0.58 * var(--max-content-width));

    color: #ffffff;
}

.sustainability-content-box > .content-heading {
    
    color: #ffffff;
}

.sustainability-banner-image {

    position: relative;
    z-index: 70;

    height: 15rem;
    width: 22rem;

    background-image: url('cdn/images/sustainability-banner.webp');
    background-position: center center;
    background-size: cover;
}

.contact.content-section {

    padding-bottom: calc(2 * var(--header-height));
}

.contact-content-area {

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

.contact-content-box {

    position: relative;

    width: calc(55% - 0.6 * var(--header-height));
}

.contact-content-box > .content-body > span {

    display: block;
}

a.socials-email {

    color: var(--scc-grey);
}

a.socials-email:hover {

    color: var(--scc-green);
}

.contact-detail-box {

    position: relative;

    width: 45%;
}

.contact-detail-company {

    margin-top: calc(2 * var(--heading-font));

    font-weight: 500;
    color: var(--scc-green);
}

.contact-detail-address {

    font-weight: 300;
}

.contact-detail-address-line {

    display: block;
}

.contact-detail-socials {

    display: flex;
    flex-direction: row;
    column-gap: calc(0.35 * var(--icon-height));

    margin-top: calc(0.60 * var(--icon-height));
}

.contact-detail-socials-item {

    height: var(--icon-height);
    width: var(--icon-height);

    background-repeat: no-repeat;
    background-size: auto var(--icon-height);
    background-position: 0rem 0rem;
}

.socials-map.contact-detail-socials-item {

    background-image: url('cdn/images/map-address.svg');
}

.socials-map.contact-detail-socials-item:hover {

    background-image: url('cdn/images/map-address-hover.svg');
}

.socials-linkedin.contact-detail-socials-item {

    background-image: url('cdn/images/linkedin.svg');
}

.socials-linkedin.contact-detail-socials-item:hover {

    background-image: url('cdn/images/linkedin-hover.svg');
}

.footer {

    padding-top: calc(0.2 * var(--header-height));
    padding-bottom: calc(0.5 * var(--header-height));

    background-color: var(--product-footer-background);
}

.footer-navigation {

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left;

    width: 93%;
    margin: 0 auto;

    max-width: var(--max-content-width);
}

.footer-navigation-item {

    padding-left: var(--navigation-font);
    padding-right: var(--navigation-font);

    height: var(--header-height);
    line-height: var(--header-height);

    font-size: var(--navigation-font);

    color: var(--scc-grey);
}

.footer-navigation-item:hover {

    color: var(--scc-green);
}

.copyright-notice {

    margin-left: auto;
}

.copyright-notice.footer-navigation-item:hover {

    color: var(--scc-grey);
}


@media (max-aspect-ratio: 9/15) or (max-width: 600px) {
    
    .responsive-hide {

        display: none;
    }

    .content-area, .header-area, .footer-navigation {

        width: calc(100% - 2 * var(--content-font));
        padding-right: var(--content-font);
        padding-left: var(--content-font);
    }

    .header-logo {

        left: var(--content-font);
    }

    .about-content-area > .content-heading, .about-content-area > .content-body {

        width: 100%;
    }

    .about-banner {

        margin-top: 0.3rem;
        width: 100%;
    }

    .product-content-area > .content-heading, .product-content-area > .content-body, .product-carousel {

        width: 100%;
    }

    .sustainability-banner, .contact-content-area, .footer-navigation {

        flex-direction: column;
    }

    .sustainability-content-box {

        width: 100%;
    }

    .sustainability-banner-image {

        margin-top: calc(var(--heading-font) - 0.3rem);
        width: 100%;
    }

    .contact-content-box, .contact-detail-box {

        width: 100%;
    }

    .footer-navigation-item {

        text-align: center;
        margin: 0 auto;
    }
}