@font-face {
  font-family: "CoreSansD35";
  src: url("../fonts/CoreSansD35Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CoreSansD45";
  src: url("../fonts/CoreSansD45Medium.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CoreSansD55";
  src: url("../fonts/CoreSansD55Bold.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
    --yew: #1C391A;
    --gooseberry: #B7AE39;
    --gooseberry-light: #EFF5D4;
    --gooseberry-dark: #DAD7A2;
    --buckthorn: #C07500;
    --dogRose: #DF9DA4;
    --rosehip: #62202E;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'CoreSansD35', system-ui, sans-serif;
}

input,
textarea,
button,
select,
label,
a {
    -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

h1,
h2,
h3,
h4,
h5,
strong {
    font-family: 'CoreSansD45', system-ui, sans-serif;
    letter-spacing: -2%;
    font-weight: 500;
    line-height: 100%;
}

h4 {
    font-size: 1.8rem;
    color: var(--yew);
}
@media (min-width: 480px) {
    h4 {
        font-size: 3.5rem;
    }
}

/* font sizes */
.display-xl { /* display on design */
    font-size: 60px;
}
@media (min-width: 768px) {
   .display-xl {
       font-size: 100px;
    }
}
.display-l { /* h1 on design */
    font-size: 32px;
    line-height: 110%;
}
@media (min-width: 768px) {
   .display-l {
       font-size: 56px;
    }
}
.display-m { /* h2 on design */
    font-size: 24px;
    line-height: 120%;
}
@media (min-width: 768px) {
   .display-m {
       font-size: 48px;
    }
}
.display-s { /* h3 on design */
    font-size: 20px;
}
@media (min-width: 768px) {
    .display-s {
        font-size: 32px;
    }
}
.display-xs { /* h4 on design */
    font-size: 18px;
}
@media (min-width: 768px) {
    .display-xs {
        font-size: 24px;
    }
}
.display-xxs { /* h5 on design */
    font-size: 14px;
}
@media (min-width: 768px) {
    .display-xxs {
        font-size: 16px;
    }
}
.display-xxxs { /* h7 on design */
    font-size: 12px;
}
@media (min-width: 768px) {
    .display-xxxs {
        font-size: 14px;
    }
}
p {
    font-weight: 300;
    font-size: 18px;
    line-height: 140%;
}
@media (min-width: 768px) {
    p {
        font-size: 24px;
    }
}

/* font colours */
.font-yew {
    color: var(--yew);
}
.font-gooseberry {
    color: var(--gooseberry);
}
.font-gooseberry-light {
    color: var(--gooseberry-light);
}
.font-buckthorn {
    color: var(--buckthorn);
}
.font-dogRose {
    color: var(--dogRose);
}
.font-rosehip {
    color: var(--rosehip);
}
.font-white {
    color: #ffffff;
}

.grid-1-2 {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 1024px) {
    .grid-1-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.grid-1-3 {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 480px) {
    .grid-1-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .grid-1-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.grid-1-4 {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 768px) {
    .grid-1-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .grid-1-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.cta {
    font-family: 'CoreSansD45', system-ui, sans-serif;
    letter-spacing: 0;
    background-color: var(--buckthorn);
    border: none;
    border-radius: 100px;
    color: #ffffff;
    cursor: pointer;
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 400;
    text-decoration: none;
    padding: 12px 24px;
    user-select: none;
    -webkit-transition: 300ms -webkit-filter ease-out;
    -moz-transition: 300ms -moz-filter ease-out;
    -moz-transition: 300ms filter ease-out;
    -ms-transition: 300ms -ms-filter ease-out;
    -o-transition: 300ms -o-filter ease-out;
    transition: 300ms filter ease-out, 300ms -webkit-filter ease-out;
}
@media (min-width: 480px) {
    .cta {
        font-size: 16px;
    }
}

.cta:hover {
    filter: contrast(140%);
}

.cta-secondary {
    background-color: var(--yew);
}
.cta-tertiary {
    background-color: var(--gooseberry-light);
    border: 1px solid var(--yew);
    color: var(--yew);
}

/* Header background colours per page */
#p-1 {
    .header-wrapper, #section-1 {
        background: var(--yew);
    }
}
#p-2 {
    .header-wrapper, #section-1 {
        background: var(--gooseberry);
    }
}
#p-3 {
    .header-wrapper, #section-1 {
        background: var(--rosehip);
    }
}
#p-4 {
    .header-wrapper, #section-1 {
        background: var(--buckthorn);
    }
}
#p-5 {
    .header-wrapper, #section-1 {
        background: var(--yew);
    }
}
#p-6 {
    .header-wrapper, #section-1 {
        background: var(--buckthorn);
    }
}
#p-knowledge-index {
    .header-wrapper, #section-1 {
        background: var(--gooseberry);
    }
}
#p-knowledge-post {
    .header-wrapper, #section-1 {
        background: var(--gooseberry);
    }
}
#p-404 {
    .header-wrapper {
        background: var(--yew);
    }
}
/* Header */
header {

    position: sticky;
    top: 0;
    left: 0;
    z-index: 99;

    padding: 12px 0 14px;
    user-select: none;

    .header-logo {
        display: block;
        max-width: 80px;
    }
    @media (min-width: 768px) {
        .header-logo {
            display: block;
            max-width: none;
        }
    }

    .header-inner {
        background-color: var(--gooseberry-light);
        border-radius: 8px;
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: space-between;
        padding: 8px;
    }
    @media (min-width: 768px) {
        .header-inner {
            border-radius: 12px;
            padding: 12px 16px 12px 30px;
        }
    }

    .mobile-nav-trigger {
        align-items: center;
        display: flex;
        padding: 2px 6px;

        position: relative;
        width: 50px;
        height: 34px;

        img {
            position: absolute;
            top: 0;
            right: 0;
        }

        .mobile-nav-icon-open {
            opacity: 1;
            -webkit-transition: opacity 0.4s;
            -moz-transition: opacity 0.4s;
            -ms-transition: opacity 0.4s;
            -o-transition: opacity 0.4s;
            transition: opacity 0.4s;
        }

        .mobile-nav-icon-close {
            opacity: 0;
            -webkit-transition: opacity 0.4s;
            -moz-transition: opacity 0.4s;
            -ms-transition: opacity 0.4s;
            -o-transition: opacity 0.4s;
            transition: opacity 0.4s;
        }

        &.is-open {
            .mobile-nav-icon-open {
                opacity: 0;
            }

            .mobile-nav-icon-close {
                opacity: 1;
            }
        }
    }
    @media (min-width: 1000px) {
         .mobile-nav-trigger {
             display: none;
         }
    }

    .nav-links {
        display: none;

        ul {
            list-style: none;

            a {
                border-bottom: 1px solid var(--gooseberry-light);
                color: var(--yew);
                font-family: 'CoreSansD45', system-ui, sans-serif;
                font-size: 16px;
                letter-spacing: -2%;
                padding: 5px 0;
                text-decoration: none;
                -webkit-transition: border 0.4s;
                -moz-transition: border 0.4s;
                -ms-transition: border 0.4s;
                -o-transition: border 0.4s;
                transition: border 0.4s;
            }
            a:hover {
                border-bottom: 1px solid var(--yew);
            }
        }
        @media (min-width: 768px) {
            ul {
                display: flex;
                column-gap: 24px;
            }

        }
    }
    @media (min-width: 1000px) {
        .nav-links {
            align-items: center;
            display: flex;
            gap: 40px;
        }
    }

    .login-links {
        display: flex;
        gap: 12px;
    }

    .mobile-nav {
        height: 0;
        overflow: scroll;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-transition: height 0.35s ease;
        -moz-transition: height 0.35s ease;
        -ms-transition: height 0.35s ease;
        -o-transition: height 0.35s ease;
        transition: height 0.35s ease;

        .mobile-nav-inner {
            padding: 20px 0;
            
            ul {
                list-style: none;
                margin-bottom: 50px;

                 li + li {
                    border-top: 1px solid hsla(0, 0%, 100%, 0.2);
                }

                a {
                    border-radius: 12px;
                    color: var(--gooseberry-light);
                    display: block;
                    padding: 18px 0;
                    font-size: 24px;
                    text-decoration: none;
                }
                a:hover {
                    background: hsla(0, 0%, 100%, 0.1);
                }
            }

            .login-links {
                a {
                    text-align: center;
                    width: 100%;
                }
            }

        }
    }
    @media (max-width: 1000px) {
        .mobile-nav.is-open {
            height: 100vh;
        }
    }

    .subnav {
        height: 0;
        overflow: hidden;        
        -webkit-transition: height 0.35s ease;
        -moz-transition: height 0.35s ease;
        -ms-transition: height 0.35s ease;
        -o-transition: height 0.35s ease;
        transition: height 0.35s ease;

        .subnav-inner {
            display: flex;
            gap: 20px;
            padding: 40px 0;
            border-bottom: 1px solid hsla(0, 0%, 100%, 0.4);

            .subnav-image {
                border-radius: 12px;
                display: none;
                max-height: 220px;
               
            }
            @media (min-width: 1200px) {
                .subnav-image {
                    display: block;
                }
            }
            
            ul {
                list-style: none;
            }
            ul + ul {
                margin-left: 40px;
            }             

            a {
                border-radius: 12px;
                color: #ffffff;
                display: flex;
                gap: 12px;
                padding: 12px;
                text-decoration: none;

                .subnav-title {
                    font-size: 18px;
                    margin-bottom: 4px;
                }

                .subnav-subtitle {
                    font-size: 14px;
                }
            }
            a:hover {
                background: hsla(0, 0%, 100%, 0.1);
            }
        }

    }
    @media (min-width: 1000px) {
        .subnav.is-open {
            height: 300px; 
        }
    }

    .disabled-link {
        opacity: 0.6;
        pointer-events: none;
        cursor: default;
    }
}
@media (min-width: 480px) {
    header {
         padding: 24px 0;
    }
}

/* Sections */
.section-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 14px;
}

@media (min-width: 768px) {
    .section-inner {
        padding: 0 40px;
    }
}

.skip-to-content-link {
    background: #ffffff;
    color: var(--yew);
    height: 40px;
    left: 50%;
    padding: 12px;
    position: absolute;
    transform: translateY(-100%);
    -webkit-transition: transform 0.3s;
    -moz-transition: transform 0.3s;
    -ms-transition: transform 0.3s;
    -o-transition: transform 0.3s;
    transition: transform 0.3s;
    text-decoration: none;
    z-index: 999;
}

.skip-to-content-link:focus {
    transform: translateY(0%);
}

/* START of page 1 */
#p-1 {
    #section-1 {   
        
        .intro-desktop {
            display: none;
            grid-template-columns: 2fr 1fr;
            grid-template-rows: auto auto;
            column-gap: 18px;

            h1 {
                font-size: 24px;
                font-weight: normal;
                margin-bottom: 14px;
                
            }
            h2 {
                font-size: 45px;
                font-weight: 500;
                line-height: 100%;
                letter-spacing: -2px;
                margin-bottom: 24px;
            }
            @media (min-width: 1100px) {
                h2 {
                    font-size: 96px;
                }
            }
    
            p {
                font-size: 1.5rem;
                margin-bottom: 30px;
            }

            .top-left-image {
                grid-column: 1;
                grid-row: 1;
            }
    
            .intro-desktop-text {
                background-color: var(--gooseberry-light);
                border-bottom-left-radius: 12px;
                border-bottom-right-radius: 12px;
                color: var(--yew);
                grid-column: 1;
                grid-row: 2;
                padding: 55px 40px;
            }
    
            .right-image {
                grid-column: 2;
                grid-row: 1 / span 2;

                img {
                    border-radius: 12px;
                }
            }

            img {
                display: block;
                object-fit: fill;
                height: 100%;
                width: 100%;
            }
        }
        @media (min-width: 768px) {
            .intro-desktop {
                display: grid;
            }
        }
    
        .intro-mobile {
            display: block;
            
            .intro-mobile-image {
                margin-bottom: 12px;
            }
    
            h2 {
                font-size: 40px;
                font-weight: 500;
                margin: 4px 0 8px;
            }
    
            p {
                margin-bottom: 20px;
            }
        }
    
        @media (min-width: 768px) {
            .intro-mobile {
                display: none;
            }
        }
    
        .intro-bottom {
            padding: 45px 0;
    
            h3 {
                margin-bottom: 10px;
            }
        }
        @media (min-width: 768px) {
            .intro-bottom {
                display: flex;
                gap: 120px;
                padding: 100px 0 80px;
    
                div {
                    flex: 1;
                }
    
                h3 {
                    font-size: 3.5rem;
                }
    
                p {
                    font-size: 24px;
                    color: #ffffff;
                }
            }
        }
    }
    
    #section-2 {
        color: var(--yew);
        text-align: center;
    
        .section-inner {
            padding-top: 10px;
    
            .text-holder {
                border: solid 2px var(--gooseberry);
                border-bottom: none;
                border-top-right-radius: 12px;
                border-top-left-radius: 12px;
                margin-top: 20px;
                padding: 30px 20px 40px 20px;
    
                h3 {
                    font-size: 2.2rem;
                    margin-bottom: 12px;
                }
    
                .cta {
                    margin: 20px 0 10px;
                }
            }
            @media (min-width: 768px) {
                .text-holder {
                    margin-top: 50px;
                    padding: 60px 20px 10px 20px;
    
                    h3 {
                        font-size: 96px;
                        margin-bottom: 40px;
                    }
    
                    p {
                        font-size: 1.5rem;
    
                    }
    
                    .cta {
                        margin: 30px 0 10px;
                    }
                }
            }
    
            .section-2-bottom-image-mobile {
                display: block;
            }
    
            @media (min-width: 768px) {
                .section-2-bottom-image-mobile {
                    display: none;
                }
            }
    
            .section-2-bottom-image-desktop {
                display: none;
            }
    
            @media (min-width: 768px) {
                .section-2-bottom-image-desktop {
                    display: block;
                }
            }
        }
    }
    
    #section-3 {
        background-color: var(--gooseberry-light);
        padding: 40px 0;
    
        h4 {
            margin-bottom: 40px;
        }
    
        .slide-wrapper {
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            gap: 20px;
            overflow-x: auto;
            overflow-y: hidden;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            -ms-overflow-style: none;
            scroll-padding: 0;
            width: 100%;
        }
    
        @media (min-width: 768px) {
            .slide-wrapper {
                flex-direction: row;
                gap: 0;
            }
        }
    
        .slide {
            border-radius: 12px;
            display: flex;
            flex: 0 0 100%;
            overflow: hidden;
            position: relative;
            scroll-snap-align: start;
            width: 100%;
    
            .slide-content {
                flex: 1;
                padding: 20px;
                position: relative;
    
                .slide-title {
                    font-family: 'CoreSansD45', system-ui, sans-serif;
                    letter-spacing: 0;
                    font-size: 24px;
                    font-weight: 500;
                }
    
                @media (min-width: 480px) {
                    .slide-title {
                        font-size: 48px;
                    }
                }
    
                .slide-subtitle {
                    font-family: 'CoreSansD45', system-ui, sans-serif;
                    letter-spacing: 0;
                    display: inline-block;
                    font-size: 18px;
                    font-weight: 400;
                    margin-bottom: 4px;
                }
    
                .slide-text {
                    padding: 20px 0 30px;
    
                    p {
                        font-size: 16px;
                    }
    
                    @media (min-width: 480px) {
                        p {
                            font-size: 1.125rem;
                        }
                    }
    
                    hr {
                        background: #ffffff;
                        border: none;
                        color: #ffffff;
                        height: 1px;
                        margin: 10px 0;
                    }
                }
                @media (min-width: 768px) {
                    .slide-text {
                        max-width: 544px;
                        padding: 20px 0 45px;
                    }
                }
    
                img {
                    border-radius: 14px;
                    max-width: 544px;
                }
            }
            @media (min-width: 1400px) {
                .slide-content {
                    background-image: url(../images/slide-bg.svg);
                    background-position: top right 12px;
                    background-repeat: no-repeat;
                    background-size: contain;
                    padding: 60px 50px;
                }
            }
    
            .slide-tab {
                 font-family: 'CoreSansD45', system-ui, sans-serif;
                letter-spacing: 0;
                align-items: center;
                background-color: var(--buckthorn);
                border-left: 1px solid #ffffff;
                display: none;
                flex-direction: column;
                font-size: 2rem;
                justify-content: space-between;
                padding: 30px 18px;
    
                .tab-number {
                    color: var(--yew);
                }
    
                .tab-number-active {
                    color: #ffffff;
                }
    
                .tab-name {
                    writing-mode: tb-rl;
                    transform: rotate(-180deg);
                }
            }
    
            @media (min-width: 1024px) {
                .slide-tab {
                    display: flex;
                }
            }
    
            .tab-link {
                cursor: pointer;
            }
    
            .tab-1 {
                background-color: var(--gooseberry);
                color: #ffffff;
    
                .tab-number {
                    color: #ffffff;
                }
            }
    
            .tab-2 {
                background-color: var(--buckthorn);
            }
    
            .tab-3 {
                background-color: var(--dogRose);
                color: var(--yew);
            }
    
            .nav-link {
                align-items: center;
                background-color: #ffffff;
                border: 1px solid #ffffff;
                border-radius: 100%;
                color: var(--yew);
                cursor: pointer;
                display: none;
                font-size: 1.875rem;
                font-weight: 300;
                justify-content: center;
                position: absolute;
                right: 20px;
                bottom: 30px;
                height: 80px;
                width: 80px;
                user-select: none;
                -webkit-transition : border 300ms ease-out, font-size 300ms ease-out;
                -moz-transition : border 300ms ease-out, font-size 300ms ease-out;
                -o-transition : border 300ms ease-out, font-size 300ms ease-out;
                transition : border 300ms ease-out, font-size 300ms ease-out;
            }
    
            @media (min-width: 768px) {
                .nav-link {
                    display: inline-flex;
                }
            }
    
            .nav-link:hover {
                border: 1px solid var(--yew);
                font-size: 2.2rem;
            }
        }
    
        .slide-1 {
            background-color: var(--gooseberry);
            color: #ffffff;
        }
    
        .slide-2 {
            background-color: var(--buckthorn);
            color: #ffffff;
        }
    
        .slide-3 {
            background-color: var(--dogRose);
    
            .slide-content {
                color: var(--rosehip);
            }
    
            .tab-3 {
                color: #ffffff;
    
                .tab-number {
                    color: #ffffff;
                }
            }
    
        }
    }
    
    @media (min-width: 480px) {
        #section-3 {
            background-color: unset;
            padding: 0;
        }
    }
    
    #section-4 {
    
        .benefits-top {
            padding: 40px 0;

            .benefits-nav-wrapper {
                margin-top: 40px;
                display: none;
                gap: 16px;

                .benefits-nav {
                    align-items: center;
                    background-color: var(--gooseberry-light);
                    border: none;
                    border-radius: 100%;
                    padding: 22px;
                    text-align: center;
                    text-decoration: none;
                    display: flex;
                    font-size: 16px;
                    cursor: pointer;
                    -webkit-transition: opacity 0.6s;
                    -moz-transition: opacity 0.6s;
                    -ms-transition: opacity 0.6s;
                    -o-transition: opacity 0.6s;
                    transition: opacity 0.6s;
                }
                .benefits-nav:disabled {
                    opacity: .4;
                }
            } 
            @media (min-width: 1024px) {
                .benefits-nav-wrapper {
                    display: flex;
                }
            }   
        }
        @media (min-width: 1024px) {
            .benefits-top {
                display: flex;
                gap: 120px;
                padding: 120px 0 60px;
    
                h4,
                p {
                    flex: 1;
                }
       
                h4 {
                    margin-bottom: 18px;
                }
    
                p {
                    font-size: 1.813rem;
                }
            }
        }
    
        .benefits-item-wrapper {
            display: flex;
            gap: 20px;
            overflow-x: auto;
            overflow-y: hidden;
            padding: 20px 0;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            -ms-overflow-style: none;
            scroll-padding: 0;
            width: 100%;
            
            .benefits-item {
                background-repeat: no-repeat;
                background-attachment: scroll;
                background-position: top left;
                background-size: contain;
                position: relative;
                scroll-snap-align: start;
                min-width: 265px;
                min-height: 230px;
    
                .benefit-icon {
                    position: absolute;
                    top: 30px;
                    left: 20px;
                    max-width: 48px;
                    max-height: 48px;
                }
                @media (min-width: 768px) {
                    .benefit-icon {
                        top: 60px;
                        left: 40px;
                        max-width: 64px;
                        max-height: 64px;
                    }
                }
    
                .benefits-text {
                    color: var(--yew);
                    position: absolute;
                    bottom: 30px;
                    left: 20px;
                    padding-right: 20px;
    
                    .benefits-title {
                        font-family: 'CoreSansD45', system-ui, sans-serif;
                        letter-spacing: 0;
                        display: inline-block;
                        font-size: 32px;
                        font-weight: 500;
                        margin-bottom: 6px;
                    }
                    @media (min-width: 768px) {
                        .benefits-title {
                            font-size: 56px;
                            margin-bottom: 10px;
                        }
                    }
    
                    p {
                        font-size: 18px;
                    }
                    @media (min-width: 768px) {
                         p {
                            font-size: 24px;
                        }
                    }
                }
                @media (min-width: 768px) {
                    .benefits-text {
                        bottom: 40px;
                        left: 30px;
                    }
                }
            }
             @media (min-width: 768px) {
                 .benefits-item {
                    min-width: 535px;
                    min-height: 440px;
                 }
             }
            .item-style-1 {
                background-image: url(../images/benefit-bg-buckthorn.svg);
            }
            .item-style-2 {
                background-image: url(../images/benefit-bg-dogrose.svg);
            }
            .item-style-3 {
                background-image: url(../images/benefit-bg-gooseberry.svg);
            }
        }
         @media (min-width: 768px) {
            .benefits-item-wrapper {
                padding: 20px 0 80px;
            }
         }
    
         h4 {
            margin-bottom: 18px;
        }
    }
    
    #section-5 {
        background-color: var(--gooseberry-light);
        text-align: center;
        padding: 40px 0 50px 0;
    
        img {
            border-radius: 12px;
        }
    
        h4 {
            font-size: 40px;
            margin: 20px 30px;
        }
    
        p {
            margin: 20px 0 30px;
        }
    
        @media (min-width: 768px) {
            h4 {
                font-size: 96px;
                margin: 60px 10px 50px;
            }
    
            p {
                font-size: 24px;
            }
        }
    }
    
    @media (min-width: 768px) {
        #section-5 {
            padding: 80px 0;
        }
    }
    
    #section-6 {

        .region-top {
            padding: 34px 0 12px;
        }
    
        @media (min-width: 480px) {
            .region-top {
                display: flex;
                gap: 20px;
                padding: 130px 0 80px;
    
                h4,
                p {
                    flex: 1;
                }
    
                p {
                    font-size: 1.5rem;
                }
            }
        }
    
        h4 {
            margin-bottom: 18px;
        }
    
        .region-content {
            margin-bottom: 60px;
    
            .region-list {
                margin: 20px 0 30px;
    
                ul {
                    margin: 0;
                    list-style-type: none;
                    padding: 0;
    
                    li {
                        border-bottom: 1px solid var(--buckthorn);
                        font-size: 20px;
                        padding: 18px 0;
    
                    }
    
                    @media (min-width: 480px) {
                        li {
                            font-size: 32px;
                            padding: 24px 60px 24px 0;
                        }
                    }
    
                    li:last-child {
                        border-bottom: none;
                    }
                }
            }
        }
    
        @media (min-width: 1100px) {
            .region-content {
                display: flex;
                flex: 1;
                gap: 80px;
            }
        }
    
        .region-locations {
            display: flex;
            flex: 1;
            flex-direction: column;
            gap: 22px;
    
        }
    
        .location {
            flex: 1;
    
            .location-image {
                border-radius: 16px;
            }
    
            .location-content {
                background-color: var(--gooseberry);
                color: #ffffff;
                margin-top: -25px;
                padding: 40px 16px 20px;
    
                .location-title {
                    font-family: 'CoreSansD45', system-ui, sans-serif;
                }

                p {
                    font-size: 14px;
                    margin-top: 8px;
                }
                @media (min-width: 480px) {
                    p {
                        font-size: 16px;
                    }
                }
            }
    
        }
    
        @media (min-width: 768px) {
            .region-locations {
                flex-direction: row;
            }
        }
    }
    
    #section-7 {
         background-color: var(--gooseberry-light);

        .farmer-quote-banner {
            align-items: center;
            display: grid;
            gap: 40px;
            padding: 40px 0;

            .farmer-text {
                display: grid;
                gap: 12px;

                span {
                    font-size: 16px;
                }
                @media (min-width: 768px) {
                    span {
                        font-size: 18px;
                    }
                }
            }
            @media (min-width: 768px) {
                .farmer-text {
                    gap: 40px;
                }
            }

            .farmer-image {
                img {
                    border-radius: 14px;
                }
            }
        }
        @media (min-width: 1024px) {
            .farmer-quote-banner {
                gap: 100px;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                padding: 80px 0;
            }
        }
    }
    @media (min-width: 768px) {
         #section-7 {
            background-color: #ffffff;
         }
    }
    
    #section-8 {
        padding: 40px 0;
    
        .quote-holder {
            background-repeat: no-repeat;
            background-attachment: scroll;
            background-position: center right;
            background-size: cover;
            background-image: image-set("../../assets/images/section-8-bg-mobile.jpg" type("image/jpg") 1x,
                    "../../assets/images/section-8-bg-mobile@2x.jpg" type("image/jpg") 2x);
            border-radius: 12px;
            color: #ffffff;
            padding: 60px 15px;
            text-align: center;
    
            .quote {
                font-family: 'CoreSansD45', system-ui, sans-serif;
                letter-spacing: -2%;
                font-weight: 500;
                line-height: 120%;
                margin-bottom: 40px;
            }
        }
    
        @media (min-width: 768px) {
            .quote-holder {
                background-image: image-set("../../assets/images/section-8-bg-desktop.jpg" type("image/jpg") 1x,
                    "../../assets/images/section-8-bg-desktop@2x.jpg" type("image/jpg") 2x);
                padding: 120px 60px;
            }
        }
    }
    
    #section-9 {
        background-color: var(--gooseberry);
        padding: 60px 0;
        
        .section-inner {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        @media (min-width: 768px) {
             .section-inner {
                flex-direction: row;
             }
            }
            
        p {
            margin-bottom: 20px;
        }
        @media (min-width: 768px) {
            p {
                font-size: 1.5rem;
            }
        }
    
        h4 {
            margin-bottom: 20px;
        }
    
    }
}
/* END of page 1 */

/* START of Shared standard intro block */
.standard-intro {
    padding-bottom: 24px;

    .intro {
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: 24px;
        
        .intro-text {
            flex: 1;
            order: 2;
        
            h1 {
                margin-bottom: 14px;
            }

            h2 {
                margin-bottom: 18px;
            }
        }
        @media (min-width: 1024px) {
            .intro-text {
                flex: 1;
                order: 1;
            }
        }
        .intro-image {
            flex: 1;
            width: 100%;
            order: 1;
        }
        @media (min-width: 1024px) {
            .intro-image {
                flex: 1;
                max-width: 650px;
                order: 2;
            }
        }
    }
    @media (min-width: 1024px) {
        .intro {
            flex-direction: row;
            gap: 40px;

        }
    }
}
/* END of Shared intro block */

/* START of page 2 (discover-find) and 3 (discover-offer) */
#p-2, #p-3 {
    #section-2 {
        background: var(--gooseberry-light);
        
        .text-holder {
            padding: 40px 0px;
            display: flex;
            flex-direction: column;
            gap: 24px;
            
            h3 {
                flex: 1;
            }
            p {
                flex: 1;
                font-size: 18px;
            }
            @media (min-width: 480px) {
                p {
                    font-size: 24px;
                }
            }
        }
        @media (min-width: 1024px) {
            .text-holder {
                flex-direction: row;
                gap: 50px;
                padding: 80px 0px;
            }
        }
    }

    #section-3 {
        .section-inner {
            align-items: center;
            display: flex;
            flex-direction: column;
            gap: 24px;
            padding-top: 40px;
            padding-bottom: 24px;

        }
        @media (min-width: 1024px) {
            .section-inner {
                flex-direction: row;
                gap: 50px;
                padding-top: 80px;
                padding-bottom: 80px;
            }
        }
        .image-wrapper {
            flex: 1;
            width: 100%;
        }
        .text-wrapper {
            flex: 1;

            h3 {
                flex: 1;
                margin-bottom: 12px;
            }
            @media (min-width: 480px) {
                h3 {
                    margin-bottom: 24px;
                }
            }
            p {
                flex: 1;
                font-size: 18px;
            }
            @media (min-width: 480px) {
                p {
                    font-size: 24px;
                }
            }
        }
    }
    
    #section-4 {
        h4 {
            margin-bottom: 24px;
        }
        @media (min-width: 768px) {
            h4 {
                margin-bottom: 40px;
            }
        }

        .benefits-item-wrapper {
            display: grid;
            gap: 14px;
            margin-bottom: 40px;
            
            .benefits-item {
                align-items: center;
                background: var(--gooseberry-light);
                border-radius: 10px;
                display: flex;
                gap: 16px;
                padding: 24px 12px;
    
                .benefits-text {
                    p {
                        font-family: 'CoreSansD45', system-ui, sans-serif;   
                        line-height: 120%;
                    }
                }
            }
            @media (min-width: 768px) {
                .benefits-item {
                     padding: 24px 20px;
                }
            }
        }
        @media (min-width: 768px) {
            .benefits-item-wrapper {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 20px;
                margin-bottom: 80px;
            }
        }
        @media (min-width: 1024px) {
            .benefits-item-wrapper {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }
    }

    #section-5 {
        .join-banner-wrapper {
            position: relative;
            min-height: 700px;
            overflow: hidden;

            .join-banner-1 {
                background-color: var(--dogRose);
            }
            .join-banner-2 {
                background-color: var(--gooseberry);
            }
            .join-banner-3 {
                background-color: var(--buckthorn);
            }

            .join-banner {
                align-items: center;
                border-radius: 12px;
                display: grid;
                grid-template-columns: repeat(1, minmax(0, 1fr));
                gap: 20px;
                inset: 0;
                opacity: 0;
                padding: 24px;
                position: absolute;
                transform: translateX(20px);
                visibility: hidden;
                -webkit-transition: opacity 1.2s ease, transform 1.2s ease, visibility 1.2s;
                -moz-transition: opacity 1.2s ease, transform 1.2s ease, visibility 1.2s;
                -ms-transition: opacity 1.2s ease, transform 1.2s ease, visibility 1.2s;
                -o-transition: opacity 1.2s ease, transform 1.2s ease, visibility 1.2s;
                transition: opacity 1.2s ease, transform 1.2s ease, visibility 1.2s;
        
                .text-wrapper {
                    span {
                        font-family: 'CoreSansD45', system-ui, sans-serif;
                    }
    
                    h4 {
                        font-size: 40px;
                        letter-spacing: -2px;
                        margin-top: 12px;
                    }
                    @media (min-width: 1024px) {
                        h4 {
                            font-size: 80px;
                            margin-top: 24px;
                        }
                    }
                    
                    p {
                        font-size: 18px;
                        margin: 24px 0;
                    }
                    @media (min-width: 1024px) {
                        p {
                            font-size: 24px;
                            max-width: 515px;
                            margin: 24px 0 40px 0;
                        }
                    }
                }
    
                .image-wrapper {
                    display: flex;
                    justify-content: flex-end;
    
                    img {
                        display: block;
                        width: 100%;
                    }
                     @media (min-width: 1200px) {
                        img {
                            width: auto;
                        }
                     }
                }
            }
            @media (min-width: 1100px) {
                .join-banner {
                    gap: 24px;
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                    padding: 40px;
                }
            }
            .join-banner.active {
                opacity: 1;
                visibility: visible;
                transform: translateX(0);
                z-index: 2;
            }
        }

        .join-banner-controls {
            align-items: center;
            display: flex;
            gap: 12px;
            justify-content: center;
            margin-top: 24px;

            .join-dot {
                appearance: none;
                background-color: var(--yew);
                border: 0;
                border-radius: 999px;
                cursor: pointer;
                height: 15px;
                padding: 0;
                -webkit-transition: transform 0.3s ease, background-color 0.3s ease;
                -moz-transition: transform 0.3s ease, background-color 0.3s ease;
                -ms-transition: transform 0.3s ease, background-color 0.3s ease;
                -o-transition: transform 0.3s ease, background-color 0.3s ease;
                transition: transform 0.3s ease, background-color 0.3s ease;
                width: 15px;
            }
    
            .join-dot.active {
                background-color: var(--buckthorn);
                transform: scale(1.4);
            }
        }
    }

    #section-6-find {
        .benefits-top {
            padding: 65px 0 20px;
            text-align: center;
            
            h4 {
                margin-bottom: 18px;
            }
            @media (min-width: 768px) {
                h4 {
                     margin-bottom: 38px;
                }
                p {
                    max-width: 680px;
                    margin: 0 auto;
                }
            }
        }
    
        @media (min-width: 768px) {
            .benefits-top {
                padding: 112px 0 40px;
            }
        }
    
        .benefits-item-wrapper {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 20px;
            padding: 20px 0;
            scroll-padding: 0;
            width: 100%;
            
            .benefits-item {
                border: 1.5px solid var(--dogRose);
                border-radius: 12px;
                padding: 24px;
    
                .benefit-icon {
                    height: 32px;
                    width: 32px;
                    margin-bottom: 12px;
                }
                @media (min-width: 768px) {
                    .benefit-icon {
                        height: 44px;
                        width: 44px;
                    }
                }
    
                .benefits-text {    
                    .benefits-title {
                        font-family: 'CoreSansD45', system-ui, sans-serif;
                        line-height: 120%;
                        font-size: 18px;
                    }
                    @media (min-width: 768px) {
                        .benefits-title {
                            font-size: 24px;
                        }
                    }
                }
            }
            .item-style-1 {
                border-color: var(--buckthorn);
            }
            .item-style-2 {
                border-color: var(--dogRose);
            }
            .item-style-3 {
                border-color: var(--gooseberry);
            }
        }
        @media (min-width: 768px) {
            .benefits-item-wrapper {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                padding: 20px 0 40px;
            }
        }
    
        h4 {
            margin-bottom: 18px;
        }

        .benefits-bottom {
             text-align: center;
             padding: 40px 0;

            p {
                margin-bottom: 24px;
            }
            @media (min-width: 768px) {
                p {
                    margin-bottom: 40px;
                }
            }
        }
    }

    #section-6-offer {

        .benefits-wrapper {
            display: grid;
            gap: 10px;
            margin: 64px 0 40px;
        
            .benefits-top {
                text-align: center;
                
                h4 {
                    margin-bottom: 18px;
                }
                @media (min-width: 768px) {
                    h4 {
                         margin-bottom: 38px;
                    }
                }

                p {
                    margin: 24px 0;
                }
            }
            @media (min-width: 768px) {
                .benefits-top {
                    text-align: left;
                    padding-top: 12px;
                }
            }
        
            .benefits-item-wrapper {
                display: grid;
                grid-template-columns: repeat(1, minmax(0, 1fr));
                gap: 20px;
                padding: 20px 0;
                scroll-padding: 0;
                width: 100%;
                
                .benefits-item {
                    border: 1.5px solid var(--dogRose);
                    border-radius: 12px;
                    padding: 12px;
        
                    .benefit-icon {
                        height: 32px;
                        width: 32px;
                        margin-bottom: 10px;
                    }
        
                    .benefits-text {
                        h5 {
                            margin: 5px 0 18px;
                        }
                    }
                }
                @media (min-width: 768px) {
                    .benefits-item {
                        padding: 24px;
                    }
                }
            }
            @media (min-width: 768px) {
                .benefits-item-wrapper {
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                    padding: 20px 0 40px;
                }
            }
        
            h4 {
                margin-bottom: 18px;
            }
        }
        @media (min-width: 768px) {
             .benefits-wrapper {
                grid-template-columns: 1fr 2fr;
                gap: 40px;
                margin: 112px 0;
             }
        }
    }

    #section-7 {
        .section-inner {
            padding: 0;
        }
        @media (min-width: 768px) {
            .section-inner {
                padding: 0 40px;
            }
        }
        .share-banner {
            background-repeat: no-repeat;
            background-position: 0 0;
            background-size: cover;
            background-image: url(../images/discover-find/section-7-mobile.jpg);
            padding: 40px 24px;
        }
        @media (min-width: 768px) {
            .share-banner {
                background-image: url(../images/discover-find/section-7-desktop.jpg);
                padding: 80px 40px;
            }
        }
        
        h4 {
            line-height: 110%;
            margin-bottom: 40px;
        }
        @media (min-width: 768px) {
            h4 {
                margin-bottom: 180px;
            }
        }

        .column-wrapper {
            display: flex;
            flex-direction: column;
            gap: 20px;

            .column {
                background-color: var(--gooseberry-light);
                border-radius: 12px;
                flex: 1;
                padding: 32px 24px;
       
                h5 {
                    padding-bottom: 6px;
                }
                @media (min-width: 768px) {
                    h5 {
                        padding-bottom: 12px;
                    }
                }

                hr {
                    display: block;
                    height: 1px;
                    border: 0;
                    border-top: 1px solid var(--buckthorn);
                    margin: 12px 0;
                    padding: 0;
                }
                @media (min-width: 768px) {
                    hr {
                         margin: 24px 0;
                    }
                }

                ul {
                    font-size: 18px;
                    margin: 20px;

                    li {
                        margin: 4px 0;
                        padding-right: 20px;
                    }
                }
                @media (min-width: 768px) {
                    ul {
                        margin: 24px 0 24px 24px;
                    }

                    p {
                        font-size: 18px;
                    }
                }
                ul.large-spaced-list {
                    li {
                        margin: 12px 0;
                    }
                }
            }
        }
        @media (min-width: 1024px) {
            .column-wrapper {
                flex-direction: row;
            }
        }
    }

    #section-8 {
        .snakeskin-banner {
            display: grid;
            gap: 40px;
            background-repeat: no-repeat;
            background-attachment: scroll;
            background-position: center right;
            background-size: cover;
            background-image: url(../images/discover-find/snakeskin-bg-mobile.png);
            background-color: var(--gooseberry);
            border-radius: 12px;
            margin: 40px 0 20px;
            padding: 32px 24px;

            h4 {
                max-width: 95%;
            }
            @media (min-width: 1024px) {
                h4 {
                    max-width: 810px;
                }
            }
        }
        @media (min-width: 768px) {
            .snakeskin-banner {
                background-image: url(../images/discover-find/snakeskin-bg-desktop.png);
            }
        }
        @media (min-width: 1024px) {
            .snakeskin-banner {
                margin: 80px 0 40px;
                padding: 64px 40px;
            }
        }
    }

    #section-9 {
        .farmer-quote-banner {
            align-items: center;
            display: grid;
            gap: 40px;
            padding: 40px 0;

            .farmer-text {
                display: grid;
                gap: 12px;

                span {
                    font-size: 16px;
                }
                @media (min-width: 768px) {
                    span {
                        font-size: 18px;
                    }
                }
            }
            @media (min-width: 768px) {
                .farmer-text {
                    gap: 40px;
                }
            }
        }
        @media (min-width: 1024px) {
            .farmer-quote-banner {
                gap: 100px;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                padding: 80px 0;
            }
        }
    }

    #section-10 {
        background-color: var(--gooseberry-light);

        .map-section {
            align-items: center;
            display: grid;
            gap: 10px;
            padding-bottom: 40px;

            .map-text {
                display: grid;
                gap: 24px;

                .live-title {
                    font-family: 'CoreSansD45', system-ui, sans-serif;
                    display: block;
                    margin-bottom: 4px;
                }
                @media (min-width: 768px) {
                    .live-title {
                        margin-bottom: 8px;
                    }
                }

                .cta {
                    margin-top: 10px;
                }

                h5 {
                    line-height: 120%;
                }
            }

        }
        @media (min-width: 768px) {
            .map-section {
                padding: 24px 0;
                gap: 80px;
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }


    }

    #section-11 {
        background-color: var(--gooseberry-light);

        .grazing-banner {
            padding: 40px 0;
            
            .grazing-banner-inner {
                background-repeat: no-repeat;
                background-attachment: scroll;
                background-position: center right;
                background-size: cover;
                background-image: image-set("../../assets/images/discover-find/grazing-banner-mobile.jpg" type("image/jpg") 1x,
                        "../../assets/images/discover-find/grazing-banner-mobile@2x.jpg" type("image/jpg") 2x);
                border-radius: 12px;
                padding: 32px 12px;
    
                h4 {
                    max-width: 350px;
                }
                @media (min-width: 768px) {
                    h4 {
                        max-width: 650px;
                    }
                }
    
                .cta {
                    margin-top: 80px;
                }
                @media (min-width: 768px) {
                    .cta {
                        margin-top: 40px;
                    }
                }
            }
            @media (min-width: 1100px) {
                .grazing-banner-inner {
                    background-image: image-set("../../assets/images/discover-find/grazing-banner-desktop.jpg" type("image/jpg") 1x,
                        "../../assets/images/discover-find/grazing-banner-desktop@2x.jpg" type("image/jpg") 2x);
                    padding: 54px 40px;
                }
            }
        }
        @media (min-width: 768px) {
            .grazing-banner {
                padding: 80px 0;
            }
        }

        .potato-banner {
            padding: 40px 0;
            
            .potato-banner-inner {
                background-repeat: no-repeat;
                background-attachment: scroll;
                background-position: center right;
                background-size: cover;
                background-image: image-set("../../assets/images/discover-offer/potato-banner-mobile.jpg" type("image/jpg") 1x,
                        "../../assets/images/discover-offer/potato-banner-mobile@2x.jpg" type("image/jpg") 2x);
                border-radius: 12px;
                padding: 32px 12px;
    
                .cta {
                    margin-top: 80px;
                }
                @media (min-width: 768px) {
                    .cta {
                        margin-top: 40px;
                    }
                }
            }
            @media (min-width: 1100px) {
                .potato-banner-inner {
                    background-image: image-set("../../assets/images/discover-offer/potato-banner-desktop.jpg" type("image/jpg") 1x,
                        "../../assets/images/discover-offer/potato-banner-desktop@2x.jpg" type("image/jpg") 2x);
                    padding: 54px 40px;
                }
            }
        }
        @media (min-width: 768px) {
            .potato-banner {
                padding: 80px 0;
            }
        }
    }
}
/* END of page 2 (discover-find) and 3 (discover-offer) */

/* START of page 4 (how-offa-works) */
#p-4 {
    #section-2 {
        background: var(--gooseberry-light);
        
        .text-holder {
            padding: 40px 0px;
            display: grid;
            flex-direction: column;
            gap: 24px;

            .cta {
                margin-top: 24px;
            }
            @media (min-width: 480px) {
                .cta {
                    margin-top: 40px;
                }
            }
        }
        @media (min-width: 1024px) {
            .text-holder {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 40px;
                padding: 80px 0px;
            }
        }
        .list {
            padding-bottom: 40px;
            gap: 20px;

            .list-item {
                align-items: center;
                color: var(--yew);
                display: flex;
                font-family: 'CoreSansD45', system-ui, sans-serif;
                gap: 16px;
                letter-spacing: -2%;
            }

            .list-icon {
                max-width: 32px;
                max-height: 32px;
            }
            @media (min-width: 768px) {
                .list-icon {
                    max-width: none;
                    max-height: none;
                }
            }
        }
        @media (min-width: 768px) {
            .list {
                padding-bottom: 80px;
                row-gap: 40px;
            }
        }
    }

    .app-slides-wrapper {
        .app-slide {
            display: flex;
            gap: 40px;
            flex-direction: column;
            padding: 48px 0;

            .app-image {
                img {
                    display: block;
                    margin: 0 auto;
                }
            }

            .app-text {
                border: 1px solid var(--gooseberry);
                border-radius: 12px;
                padding: 12px;

                .app-slide-number {
                    align-items: center;
                    display: flex;
                    font-family: 'CoreSansD45', system-ui, sans-serif;
                    background-color: var(--buckthorn);
                    border-radius: 100%;
                    height: 32px;
                    justify-content: center;
                     margin-bottom: 16px;
                    width: 32px;

                }
                @media (min-width: 768px) {
                    .app-slide-number {
                        height: 54px;
                        margin-bottom: 24px;
                        width: 54px;
                    }
                }

                h3 {
                    margin-bottom: 12px;
                }
                @media (min-width: 768px) {
                    h3 {
                        margin-bottom: 24px;
                    }
                }

                span {
                    font-family: 'CoreSansD45', system-ui, sans-serif;
                }

                ul {
                    margin: 12px 22px 24px;
                    padding: 0;
                }
                @media (min-width: 1024px) {
                    ul {
                        margin: 24px 22px 30px;
                        min-height: 140px;

                        li {
                            padding: 4px 0;
                        }
                    }
                }

                .column-wrapper {
                    gap: 24px;
                    margin: 24px 0;

                    p {
                        font-size: 16px;
                    }

                    ul {
                        margin: 10px 22px;
                    }
                }
            }
            @media (min-width: 1024px) {
                .app-text {
                    max-width: 600px;
                    padding: 24px;
                }
            }

            .highlight {
                background-color: var(--gooseberry-light);
                border-radius: 12px;
                padding: 12px;
            }
            @media (min-width: 768px) {
                .highlight {
                    padding: 24px;
                }
            }
        }
        @media (min-width: 1024px) {
            .app-slide {
                align-items: flex-start;
                background-color: #ffffff;                
                display: flex;
                flex-direction: row;
                gap: 120px;
                justify-content: center;
                padding: 100px 0;
                position: sticky;
                top: -80px;
            }
        }
    }

    .free-to-join-banner {
        padding: 40px 0;

        .free-to-join-banner-inner {
            background-repeat: no-repeat;
            background-attachment: scroll;
            background-position: center right;
            background-size: cover;
            background-image: image-set("../../assets/images/how-offa-works/free-to-join-banner-mobile.jpg" type("image/jpg") 1x,
                    "../../assets/images/how-offa-works/free-to-join-banner-mobile@2x.jpg" type("image/jpg") 2x);
            border-radius: 12px;
            padding: 32px 12px;

            h5 {
                margin-bottom: 8px;
            }
            @media (min-width: 768px) {
                h5 {
                    margin-bottom: 16px;
                }
            }

            .cta {
                margin-top: 80px;
            }
            @media (min-width: 768px) {
                .cta {
                    margin-top: 40px;
                }
            }
        }
        @media (min-width: 1100px) {
            .free-to-join-banner-inner {
                background-image: image-set("../../assets/images/how-offa-works/free-to-join-banner-desktop.jpg" type("image/jpg") 1x,
                    "../../assets/images/how-offa-works/free-to-join-banner-desktop@2x.jpg" type("image/jpg") 2x);
                padding: 54px 40px;

                p {
                    max-width: 747px;
                }
            }
        }
    }
    @media (min-width: 768px) {
        .free-to-join-banner {
            padding: 80px 0;
        }
    }

    #section-5 {
        background-color: var(--gooseberry-light);
        padding: 40px 0;

        .image-wrapper {
            img {
                border-radius: 12px;
            }
        }

        .row-1 {
            gap: 40px;
            margin-bottom: 40px;

            .text-wrapper {
                display: grid;
                align-items: center;
            
                p {
                    margin: 12px 0 24px;
                }
                @media (min-width: 768px) {
                    p {
                        margin: 24px 0 40px;
                    }
                }
                @media (min-width: 1024px) {
                    p {
                        padding-right: 110px;
                    }
                }

                .cta {
                    margin-top: 14px;
                }
                @media (min-width: 768px) {
                    .cta {
                        margin-top: 36px;
                    }
                }
            }
        }
        @media (min-width: 768px) {
            .row-1 {
                gap: 20px;
                margin-bottom: 60px;
            }
        }
        .row-2 {
            gap: 20px;

            .text-wrapper {
                display: grid;
                align-items: center;
                border: 1px solid var(--yew);
                border-radius: 12px;
                padding: 24px;

                .cta {
                    margin-top: 24px;
                }
                @media (min-width: 768px) {
                    .cta {
                        margin-top: 40px;
                    }
                }
            }
        }
    }
    @media (min-width: 768px) {
        #section-5 {
            padding: 80px 0;

            .row-1 {
                .text-wrapper {
                    order: 1;
                }
    
                .image-wrapper {
                    order: 2;
                }
            }
        }
    }
}
/* END of page 4 (how-offa-works) */

/* START of page 5 (about-us) */
#p-5 {
    #section-2 {
        background: var(--gooseberry-light);
        
        .text-holder {
            padding: 40px 0px;
            display: grid;
            flex-direction: column;
            gap: 24px;

            .cta {
                margin-top: 24px;
            }
            @media (min-width: 480px) {
                .cta {
                    margin-top: 40px;
                }
            }
        }
        @media (min-width: 1024px) {
            .text-holder {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 12px;
                padding: 80px 0px;
            }
        }
        .list {
            padding-bottom: 40px;
            gap: 20px;

            .list-item {
                background-color: #ffffff;
                border-radius: 12px;
                padding: 24px 12px;
                letter-spacing: -2%;
                line-height: 120%;
            }
             @media (min-width: 768px) {
                .list-item {
                    padding: 24px 16px;
                }
             }

            .list-icon {
                margin-bottom: 8px;
            }
            @media (min-width: 768px) {
                .list-icon {
                    margin-bottom: 16px;
                }
            }
        }
        @media (min-width: 768px) {
            .list {
                gap: 20px;
                padding-bottom: 80px;
            }
        }
    }
    #section-3 {
        .content-wrapper {
            padding: 40px 0;
            gap: 24px;

            .text-wrapper {
                order: 2;

                h3 {
                    margin-bottom: 12px;
                }
                 @media (min-width: 768px) {
                    h3 {
                        margin-bottom: 24px;
                    }
                }
            }
            @media (min-width: 768px) {
                .text-wrapper {
                    order: 1;
                }
            }

            .image-wrapper {
                order: 1;
            }
            @media (min-width: 768px) {
                .image-wrapper {
                    order: 2;
                }
            }
        }
        @media (min-width: 768px) {
            .content-wrapper {
                padding: 120px 0;
                gap: 40px;
            }
        }
    }

    #section-4 {
        .image-wrapper {
            padding: 40px 0;
        }
        @media (min-width: 768px) {
            .image-wrapper {
                padding: 80px 0;
            }
        }

        .content-wrapper {
            row-gap: 24px;
            column-gap: 20px;
            margin-bottom: 40px;

            .cta {
                margin-top: 24px;
            }
            @media (min-width: 1024px) {
                .cta {
                    margin-top: 40px;
                }
            }

            .simple-border {
                align-items: center;
                border: 1px solid var(--yew);
                border-radius: 12px;
                display: grid;
                order: 1;
                padding: 24px;
            }
            @media (min-width: 1024px) {
                .simple-border {
                    order: 0;
                }
            }

            ul {
                margin: 0 22px;
                padding: 0;

                li {
                    padding: 4px 0;
                }
            }
        }
        @media (min-width: 768px) {
            .content-wrapper {
                margin-bottom: 120px;
            }
        }
    }

    #section-5 {

        p{ 
            margin: 12px 0;
        }
        @media (min-width: 768px) {
            p{ 
                margin: 24px 0 60px;
                max-width: 770px;
            }
        }
        .members-wrapper {
            align-items: flex-start;
            border-radius: 12px;
            display: flex;
            gap: 30px;
            overflow-x: auto;
            overflow-y: hidden;
            padding: 10px 0;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            -ms-overflow-style: none;
            scroll-padding: 0;
            width: 100%;
            
            .member {
                background: none;
                border: 0;
                cursor: pointer;
                margin: 0;
                padding: 8px;
                text-align: left;

                position: relative;
                scroll-snap-align: start;

                img {
                    max-width: 270px;
                    display: block;
                }
                @media (min-width: 768px) {
                    img {
                        max-width: 396px;
                    }
                }

                h4 {
                    margin: 24px 0 6px;
                }

                span {
                    font-size: 16px;
                }
                @media (min-width: 768px) {
                     span {
                        font-size: 18px;
                    }
                }

                .job-description {
                    font-size: 16px;
                    margin-bottom: 24px;

                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                            line-clamp: 2; 
                    -webkit-box-orient: vertical;

                }

            }   
        }
        
        .members-nav-wrapper {
            display: flex;
            gap: 16px;
            justify-content: flex-end;
            margin: 10px 0 40px;

            .members-nav {
                align-items: center;
                border: 1px solid var(--yew);
                background-color: #ffffff;
                border-radius: 100%;
                padding: 10px;
                text-align: center;
                text-decoration: none;
                display: flex;
                font-size: 16px;
                cursor: pointer;
                -webkit-transition: opacity 0.6s;
                -moz-transition: opacity 0.6s;
                -ms-transition: opacity 0.6s;
                -o-transition: opacity 0.6s;
                transition: opacity 0.6s;
            }
            .members-nav:disabled {
                opacity: .4;
            }
        }
        @media (min-width: 768px) {
            .members-nav-wrapper {
                margin: 40px 0 80px;
            }
        }

        .member-social-links {
            display: flex;
            gap: 12px;

            a {
                display: inline-block;
            }
        }

        dialog {

            .top-section {
                display: flex;
                gap: 24px;

                img {
                    border-radius: 12px;
                    display: block;
                    max-width: 120px;
                }

                h4 {
                    margin: 0 0 6px;
                }

                span {
                    font-size: 16px;
                }
                @media (min-width: 768px) {
                     span {
                        font-size: 18px;
                    }
                }

                .member-social-links {
                    margin-top: 24px;
                }
            }

            .job-description {
                    margin: 30px 0;
            }
        }

    }

    #section-6 {
        background-color: var(--gooseberry-dark);

        .image-wrapper {
            padding: 40px 0 24px;
            
            img {
                border-radius: 12px;
            }
        }
        @media (min-width: 768px) {
            .image-wrapper {
                padding: 80px 0;
            }
        }

        .text-wrapper {
            gap: 24px;
            padding-bottom: 40px;

            .simple-border {
                align-items: center;
                border: 1px solid var(--yew);
                border-radius: 12px;
                display: grid;
                margin-top: 24px;
                padding: 24px;
            }
            @media (min-width: 768px) {
                .simple-border {
                    margin-top: 80px;
                }
            }

            .cta {
                margin-top: 40px;
            }
        }
        @media (min-width: 768px) {
            .text-wrapper {
                gap: 80px;
                padding-bottom: 80px;
            }
        }

    }

    #section-7 {
        background-color: var(--gooseberry-light);
        
        .content-wrapper {
            padding: 40px 0;
            gap: 20px;

            .image-wrapper {
                img {
                    border-radius: 12px;
                }
            }

            .text-wrapper {
                align-items: center;
                display: grid;
                border: 1px solid var(--yew);
                border-radius: 12px;

                padding: 24px;

                h4 {
                    margin-bottom: 16px;
                }

                .cta {
                    margin-top: 24px;
                }
                @media (min-width: 768px) {
                    .cta {
                        margin-top: 40px;
                    }
                }
            }
        }
        @media (min-width: 768px) {
            .content-wrapper {
                padding: 80px 0;
            }
        }
    }
}
/* END of page 5 (about-us) */

/* START of page 6 (faq) */
#p-6 {
    .faq-wrapper {
        display: grid;
        gap: 40px;
        padding: 64px 0;

        .faq-group {
            gap: 24px;

            .faq {
                border-top: 1px solid var(--buckthorn);

                .faq-checkbox {
                    display: none;   
                }

                .faq-question {
                    padding: 22px 0;
                    align-items: center;
                    cursor: pointer;
                    display: flex;
                    justify-content: space-between;
                    -webkit-user-select: none;
                    -ms-user-select: none;
                    user-select: none;

                    h4 {
                        line-height: 130%;
                    }
                }
                .faq-icon {
                    -webkit-transition: .3s ease;
                    -moz-transition: .3s ease;
                    -o-transition: .3s ease;
                    transition: .3s ease;
                }

                .faq-checkbox:checked ~ .faq-question .faq-icon {
                    -webkit-transform: rotate(180deg);
                    -moz-transform: rotate(180deg);
                    -o-transform: rotate(180deg);
                    transform: rotate(180deg);
                }

                .faq-answer {
                    height: 0;
                    width:100%!important;
                    opacity: 0;
                    overflow: hidden;
                    position: relative;
                    -webkit-transition: .3s ease;
                    -moz-transition: .3s ease;
                    -o-transition: .3s ease;
                    transition: .3s ease;
                    z-index: -1;

                    p {
                        font-size: 16px;
                    }
                    @media (min-width: 768px) {
                        p {
                            font-size: 18px;
                        }
                    }
                }

                .faq-checkbox:checked ~ .faq-answer{
                    height: auto;
                    opacity: 1;
                    padding-bottom: 22px;   
                }
            }
            .faq:last-child {
                border-bottom: 1px solid var(--buckthorn);
            }
        }
    }
    @media (min-width: 768px) {
        .faq-wrapper {
            gap: 72px;
            padding: 112px 0;
        }
    }

    .connections-banner {
        background-color: var(--gooseberry-light);
        padding: 40px 20px;
        text-align: center;

        .cta {
            margin-top: 32px;
        }
    }
    @media (min-width: 768px) {
        .connections-banner {
             padding: 80px 0;
        }
    }

    .get-in-touch-banner {
        padding: 40px 0;

        .get-in-touch-banner-inner {
            background-repeat: no-repeat;
            background-attachment: scroll;
            background-position: center right;
            background-size: cover;
            background-image: image-set("../../assets/images/faq/get-in-touch-banner-mobile.jpg" type("image/jpg") 1x,
                    "../../assets/images/faq/get-in-touch-banner-mobile@2x.jpg" type("image/jpg") 2x);
            border-radius: 12px;
            padding: 32px 12px;

            h5 {
                margin-bottom: 8px;
            }
            @media (min-width: 768px) {
                h5 {
                    margin-bottom: 16px;
                }
            }

            .cta {
                margin-top: 80px;
            }
            @media (min-width: 768px) {
                .cta {
                    margin-top: 40px;
                }
            }
        }
        @media (min-width: 1100px) {
            .get-in-touch-banner-inner {
                background-image: image-set("../../assets/images/faq/get-in-touch-banner-desktop.jpg" type("image/jpg") 1x,
                    "../../assets/images/faq/get-in-touch-banner-desktop@2x.jpg" type("image/jpg") 2x);
                padding: 54px 40px;

                p {
                    max-width: 650px;
                }
            }
        }
    }
    @media (min-width: 768px) {
        .get-in-touch-banner {
            padding: 80px 0;
        }
    }
}
/* END of page 6 (faq) */

/* START of Knowlege index */
#p-knowledge-index {
    #section-1 {
        .blog-index-intro {
            .blog-index-intro-text {
                padding: 0 0 40px;

                .short-heading {
                    margin-top: 16px;
                }
            }
            @media (min-width: 768px) {
                .blog-index-intro-text {
                    padding: 100px 40px 80px;
                }
            }

            .featured-post {
                padding-bottom: 40px;

                .featured-post-link {
                    align-items: center;
                    text-decoration: none;
                    display: flex;
                    flex-direction: column;
                    gap: 24px;
                    
                    .featured-post-link-image {
                        border-radius: 12px;
                        overflow: hidden;
    
                        img {
                            display: block;
                            height: auto;
                            max-width: 100%;
                            user-select: none;
                            width: 100%;
                            -webkit-user-drag: none;
                        }
                    }

                    .featured-post-link-text {
                        padding: 0;

                        .featured-post-link-text-top {
                            align-items: center;
                            display: flex;
                            gap: 16px;

                            .category-label {
                                color: #ffffff;
                                font-family: 'CoreSansD45', system-ui, sans-serif;
                                background-color: var(--yew);
                                border-radius: 8px;
                                padding: 4px 8px;
                            }
                        }

                        .featured-post-link-title {
                            margin: 18px 0 11px;
                        }

                        .featured-post-link-readmore-wrapper {
                            align-items: center;
                            display: flex;
                            gap: 16px;
                            margin-top: 14px;
                            
                            .featured-post-link-readmore {
                                color: var(--yew);
                            }
                        }
                        @media (min-width: 1024px) {
                            .featured-post-link-readmore-wrapper {
                                margin-top: 24px;
                            }
                        }
                        
                    }
                }
                @media (min-width: 1024px) {
                    .featured-post-link {
                        flex-direction: row;
                        gap: 48px;

                        .featured-post-link-image,
                        .featured-post-link-text {
                            flex: 1;
                        }
                    }
                }
                /* .featured-post-link:hover {
                    .featured-post-link-readmore {
                        text-decoration: underline;
                    }
                } */
            }
            @media (min-width: 1024px) {
                .featured-post {
                    padding: 0 40px 100px;
                }
            }
        }
    }

    #section-2 {
        .category-nav-wrapper {
            display: flex;
            gap: 8px;
            margin: 80px 0 40px;
    
             overflow-x: auto;
                overflow-y: hidden;
                scroll-snap-type: x mandatory;
                scroll-behavior: smooth;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                -ms-overflow-style: none;
                scroll-padding: 0;
                width: 100%;
       
            .category-nav {
                background-color: #ffffff;
                border: 1px solid #ffffff;
                border-radius: 200px;
                cursor: pointer;
                padding: 12px 20px;
                white-space:nowrap;
            }
             .category-nav:hover {
                border: 1px solid var(--yew);
             }
            .category-nav.active {
                padding: 12px 28px;
                border: 1px solid var(--buckthorn);
            }
        }

        .post-link-wrapper {
            gap: 32px;
            margin-bottom: 72px;
            
            .post-link {
                background-color: var(--gooseberry-light);
                border-radius: 12px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                text-decoration: none;

                .post-link-image {
                    border-radius: 12px;
                    overflow: hidden;

                    img {
                        display: block;
                        height: auto;
                        max-width: 100%;
                        user-select: none;
                        width: 100%;
                        -webkit-user-drag: none;
                    }

                }

                .post-link-text {
                    padding: 28px 16px 0;

                    .post-link-text-top {
                        align-items: center;
                        display: flex;
                        gap: 16px;

                        .category-label {
                            color: #ffffff;
                            font-family: 'CoreSansD45', system-ui, sans-serif;
                            background-color: var(--gooseberry);
                            border-radius: 8px;
                            padding: 4px 8px;
                        }
                    }

                    .post-link-title {
                        margin: 18px 0 11px;
                    }

                    .post-link-readmore-wrapper {
                        align-items: center;
                        display: flex;
                        gap: 16px;
                        margin-top: 14px;
                        
                        .post-link-readmore {
                            color: var(--buckthorn);
                        }
                    }
                    @media (min-width: 768px) {
                        .post-link-readmore-wrapper {
                            margin-top: 24px;
                        }
                    }
                    
                }
                
                .post-bottom-curve {
                    background-color: #ffffff;

                    img {
                        display: block;
                        height: auto;
                        max-width: 100%;
                        width: 100%;
                        -webkit-user-drag: none;
                        width: 100%;
                    }
                }
            }
            /* .post-link:hover {
                .post-link-readmore {
                    text-decoration: underline;
                }
            } */
        }
        @media (min-width: 768px) {
            .post-link-wrapper {
                row-gap: 64px;
            }
        }
        
        .load-more-button-wrapper {
            align-items: center;
            display: flex;
            justify-content: center;
            margin: 20px auto 92px;
        }
    }

}
/* END of Knowlege index */

/* START of Knowlege post */
#p-knowledge-post {
    #section-1 {
        .blog-post-header {
            padding: 40px 0;

            .blog-post-header-text {
                .blog-post-header-text-top {
                    align-items: center;
                    display: flex;
                    gap: 16px;
        
                    .category-label {
                        color: #ffffff;
                        font-family: 'CoreSansD45', system-ui, sans-serif;
                        background-color: var(--yew);
                        border-radius: 8px;
                        padding: 4px 8px;
                    }
        
                }
                
                .post-title {
                    padding: 16px 0 40px;
                }
                @media (min-width: 768px) {
                    .post-title {
                        padding: 16px 0 80px;
                    }
                }

                
            }

            .blog-post-header-image {
                border-radius: 12px;
                overflow: hidden;
                
                img {
                    display: block;
                    height: auto;
                    max-width: 100%;
                    user-select: none;
                    width: 100%;
                    -webkit-user-drag: none;
                }
            }

            .blog-post-header-details {
                display: flex;
                gap: 32px;
                flex-direction: column;
                padding-top: 28px;
                
                .post-stats {
                    display: flex;
                    gap: 48px;
                }

                .post-social-links {
                    display: flex;
                    gap: 12px;

                    a {
                        text-decoration: none;
                    }

                }
            }
            @media (min-width: 768px) {
                .blog-post-header-details {
                    align-items: center;
                    flex-direction: row;
                    justify-content: space-between;
                    padding-top: 40px;

                    p {
                        margin-bottom: 8px;
                    }
                }
            }

        }
        @media (min-width: 768px) {
            .blog-post-header {
                padding: 60px 40px 80px;
            }
        }
    }

    #section-2 {
        .post-body {
            display: block;
            margin: 80px auto 64px;
            max-width: 768px;

            p {
                font-size: 16px;
                margin: 16px 0;
            }
            @media (min-width: 768px) {
                p {
                    font-size: 18px;
                }
            }
            h2 {
                font-size: 24px;
                line-height: 120%;
                margin: 36px 0;
            }
            @media (min-width: 768px) {
                h2 {
                    font-size: 48px;
                }
            }
            h3 {
                font-size: 20px;
                margin: 36px 0;
            }
            @media (min-width: 768px) {
                h3 {
                    font-size: 32px;
                }
            }
            h4 {
                font-size: 18px;
                line-height: 120%;
                margin: 36px 0;
            }
            @media (min-width: 768px) {
                h4 {
                    font-size: 24px;
                }
            }
            .quote {
                border-left: 2px solid var(--buckthorn);
                color: var(--buckthorn);
                font-size: 20px;
                font-style: italic;
                padding-left: 22px;
                margin: 36px 0;
            }
            img {
                display: block;
                height: auto;
                margin: 36px 0;
                max-width: 100%;
                width: 100%;
                -webkit-user-drag: none;
                width: 100%;
            }
            .image-caption {
                font-size: 12px;
                margin-top: -25px;
            }
            @media (min-width: 768px) {
                .image-caption {
                    font-size: 14px;
                }
            }
        }

        .post-footer {
            display: block;
            margin: 80px auto;
            max-width: 768px;
            
            .post-footer-top {
                display: flex;
                gap: 40px;
                flex-direction: column;

                .post-footer-social-links {
                    display: flex;
                    gap: 8px;
                    margin-top: 16px;

                    a {
                        text-decoration: none;
                    }
                }

                .post-footer-tags {
                    display: flex;
                    gap: 8px;

                    button, a {
                        cursor: pointer;
                        color: #ffffff;
                        font-family: 'CoreSansD45', system-ui, sans-serif;
                        background-color: var(--gooseberry);
                        border-radius: 8px;
                        padding: 4px 8px;
                        border: none;

                    }
                }
            }
            @media (min-width: 768px) {
                .post-footer-top {
                    align-items: flex-end;
                    flex-direction: row;
                    justify-content: space-between;
                }
            }

            .post-footer-bottom {
                align-items: center;
                display: flex;
                gap: 24px;
                margin-top: 48px;
                padding-top: 48px;
                border-top: 1px solid var(--gooseberry);

                img {
                    border-radius: 12px;
                    max-width: 64px;
                }
            }
        }
    }
}
/* END of Knowlege post */

/* Dialog */
dialog {
    background-color: var(--gooseberry-light);
    border: none;
    max-width: 640px;
    padding: 24px 14px;
    width: 98%;

    .dialog-close {
        background:none;
        border-radius: 10px;
        border: 1px solid var(--gooseberry-light);
        cursor: pointer;
        position: absolute;
        padding: 8px;
        right: 0px;
        text-align: center;
        text-decoration: none;
        top: 8px;
    }
    @media (min-width: 768px) {
        .dialog-close {
            right: 20px;
            top: 20px;
        }
    }
    .dialog-close:hover {
        border: 1px solid var(--gooseberry-dark);
    }

    p {
        font-size: 16px;
    }
    @media (min-width: 768px) {
        p {
            font-size: 18px;
        }
    }
}
@media (min-width: 768px) {
    dialog {
        border-radius: 18px;
        padding: 40px;
    }
}

dialog[open] {
  position: fixed;
  inset: 0;
  margin: auto;
}

dialog::backdrop {
  background: rgb(0 0 0 / 0.4);
}

/* Footer */
footer {
    background: var(--yew);
    color: var(--gooseberry-light);
    font-size: 0.875rem;
    overflow: hidden;
    padding: 24px 0 0;
    user-select: none;

    a {
        color: var(--gooseberry-light);
        text-decoration: none;
    }
    a:hover {
        text-decoration: underline;
    }

    ul {
        list-style: none;
    }

    .footer-top {
        display: flex;
        flex-direction: column;
        gap: 24px;

        .footer-logo-small {
            margin-bottom: 30px;
        }

        @media (min-width: 480px) {
            .footer-logo-small {
                margin-bottom: 18px;
            }
        }

        .footer-top-links {
            display: flex;
            flex-direction: column;
            gap: 40px;

            li + li {
                margin-top: 10px;
            }
            @media (min-width: 480px) {
                li + li {
                    margin-top: 20px;
                }
            }

            .footer-category {
                font-size: 16px;
            }
            @media (min-width: 480px) {
                .footer-category {
                    font-size: 18px;
                }
            }

            a {
                align-items: center;
                display: flex;
                gap: 12px;
                min-height: 24px;
            }

            a:hover {
                text-decoration: underline;
            }
        }
        @media (min-width: 480px) {
            .footer-top-links {
                display: flex;
                flex-direction: row;
                gap: 80px;
                margin-right: 60px;
            }
        }
       
    }
    @media (min-width: 768px) {
        .footer-top {
            flex-direction: row;
            justify-content: space-between;
        }
    }

    .divider {
        border-color: var(--gooseberry); 
        margin: 24px 0;
    }
    @media (min-width: 768px) {
        .divider {
            margin: 48px 0 32px;
        }
    }

    .footer-bottom {
        .footer-bottom-links-wrapper,
        .footer-bottom-links {
            display: grid;
        }

        .footer-bottom-links-wrapper {
            gap: 30px;
        }
        @media (min-width: 768px) {
            .footer-bottom-links-wrapper,
            .footer-bottom-links {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
        }

        .footer-bottom-links a {
            text-decoration: underline;
            margin: 0 24px 8px 0;
            font-size: 14px;
        }

        .copyright {
            font-size: 14px;
        }
    }

    .footer-logo-large {
        max-width: 100%;
        width: 100%;
        height: auto;
        transform: translateY(35%);
        margin-top: -6%;
    }

}
@media (min-width: 480px) {
    footer {
        padding: 80px 0 0;

    }
}



.animateIn {
    opacity: 0.5;
    animation: slideUpFade 1.2s ease-out forwards;
}

.mobile-only {
    display: block;
}

@media (min-width: 480px) {
    .mobile-only {
        display: none;
    }
}

.tablet-only {
    display: none;
}

@media (min-width: 480px) {
    .tablet-only {
        display: block;
    }
}

@media (min-width: 1024px) {
    .tablet-only {
        display: none;
    }
}

.desktop-only {
    display: none;
}

@media (min-width: 1024px) {
    .desktop-only {
        display: block;
    }
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}