//Main Colors
$dark: #5B4622;
$green: #AAAC24;
$orange: #F5A800;

//Custom Fonts
@font-face {
    font-family: 'Brix Slab';
    src: url('https://project.clcdatahub.com/american-natural/fonts/brixslab-regular.woff2') format('woff2'), 
         url('https://project.clcdatahub.com/american-natural/fonts/brixslab-regular.woff') format('woff');
         font-weight: normal;
}

@font-face {
    font-family: 'Brix Slab';
    src: url('https://project.clcdatahub.com/american-natural/fonts/brixslab-bold.woff2') format('woff2'), 
         url('https://project.clcdatahub.com/american-natural/fonts/brixslab-bold.woff') format('woff');
         font-weight: bold;
}

@font-face {
    font-family: 'Knockout';
    src: url('https://project.clcdatahub.com/american-natural/fonts/knockout-regular.woff2') format('woff2'), 
         url('https://project.clcdatahub.com/american-natural/fonts/knockout-regular.woff') format('woff');
         font-weight: normal;
}

@font-face {
    font-family: 'Knockout';
    src: url('https://project.clcdatahub.com/american-natural/fonts/knockout-bold.woff2') format('woff2'), 
         url('https://project.clcdatahub.com/american-natural/fonts/knockout-bold.woff') format('woff');
         font-weight: bold;
}

//Fonts
@mixin main-font {
    font-family: 'Brix Slab';
    font-style: normal;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@mixin branded-font {
    font-family: 'Knockout';
    font-style: normal;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@function get-desktop-vw($target) {
    $vw-context: (1920 * 0.01) * 1px;
    @return ($target/$vw-context) * 1vw;
}

@function get-mobile-vw($target) {
    $vw-context: (320 * 0.01) * 1px;
    @return ($target/$vw-context) * 1vw;
}

//reset
body, h1, h2, h3, p, span, a, ul, li {
    margin: 0;
    padding: 0;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.no-margin {
    margin: 0!important;
}

.green {
    background-color: $green;
}

.brown {
    background-color: $dark!important;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 96px;
    padding: 0 32px;
    position: relative;

    @media (max-width: 640px) {
        height: get-mobile-vw(48px);
        padding: 0 get-mobile-vw(16px);
    }

    &__menu {

        @media (max-width: 640px) {
            height: get-mobile-vw(32px);
            height: get-mobile-vw(16px);
        }
    }

    &__logo {
        margin-left: 70px;

        @media (max-width: 640px) {
            margin-left: get-mobile-vw(24px);
            height: get-mobile-vw(32px);
        }
    }

    &__button {
        @include branded-font();
        background: $green;
        height: 32px;
        width: 120px;
        text-align: center;
        font-size: 20px;
        line-height: 32px;
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 0.04em;
        color: white;
        border-radius: 8px;
        text-decoration: none;

        @media (max-width: 640px) {
            height: 32px;
            width: get-mobile-vw(60px);
            height: get-mobile-vw(22px);
            line-height: get-mobile-vw(22px);
            border-radius: get-mobile-vw(6px);
            font-size: get-mobile-vw(16px);
        }
    }
}

.hero-image {
    background-color: $dark;
    position: relative;
    width: 100%;
    height: get-desktop-vw(1056px);

    @media (max-width: 640px) {
        height: get-mobile-vw(540px);
    }

    &__picture {
        img {
            width: 100%;
            height: 100%;

            @media (max-width: 640px) {
                height: get-mobile-vw(540px);
            }
        }
    }

    &__title {
        position: absolute;
    }

    &__italian-stallion {
        
        img {
            position: absolute;
            width: get-desktop-vw(1307px);
            height: get-desktop-vw(267px);
            left: get-desktop-vw(356px);
            top: get-desktop-vw(56px);

            @media (max-width: 640px) {
                width: get-mobile-vw(288px);
                height: get-mobile-vw(134px);
                left: get-mobile-vw(16px);
                top: get-mobile-vw(24px);
            }
        }
    }

    &__breakfast-sandwich {
        
        img {
            position: absolute;
            width: get-desktop-vw(1307px);
            height: get-desktop-vw(267px);
            left: get-desktop-vw(356px);
            top: get-desktop-vw(56px);

            @media (max-width: 640px) {
                width: get-mobile-vw(288px);
                height: get-mobile-vw(72px);
                left: get-mobile-vw(16px);
                top: get-mobile-vw(24px);
            }
        }
    }

    &__pricing {
        position: absolute;
        width: get-desktop-vw(339px);
        height: get-desktop-vw(84px);
        left: get-desktop-vw(790px);
        top: get-desktop-vw(376px);

        @media (max-width: 640px) {
            width: get-mobile-vw(172px);
            height: get-mobile-vw(32px);
            left: get-mobile-vw(72px);
            top: get-mobile-vw(176px);
        }
    }

    &__pricing.breakfast-sandwich {
        @media (max-width: 640px) {
            top: get-mobile-vw(112px);
        }
    }

    .buttons-list {
        position: absolute;
        left: get-desktop-vw(776px);
        top: get-desktop-vw(476px);

        &__item {
            @include main-font();
            background: $orange;
            font-size: get-desktop-vw(24px);
            height: get-desktop-vw(64px);
            line-height: get-desktop-vw(64px);
            width: get-desktop-vw(176px);
            border-radius: 0;
            margin-right: get-desktop-vw(16px);

            @media (max-width: 640px) {
                font-size: get-mobile-vw(13px);
                height: get-mobile-vw(40px);
                line-height: get-mobile-vw(40px);
                width: get-mobile-vw(96px);
                margin-right: get-mobile-vw(8px);
            }
        }

        @media (max-width: 640px) {
            left: get-mobile-vw(59px);
            top: get-mobile-vw(224px);
        }
    }

    .buttons-list.breakfast-sandwich {
        @media (max-width: 640px) {
            top: get-mobile-vw(160px);
        }
    }

    &__gonatural-logo {
        position: absolute;
        width: get-desktop-vw(670px);
        left: get-desktop-vw(917px);
        top: get-desktop-vw(216px);

        @media (max-width: 640px) {
            width: get-mobile-vw(294px);
            height: get-mobile-vw(88px);
            left: get-mobile-vw(12px);
            top: get-mobile-vw(64px);
        }
    }

    &__appstore-logo {
        position: absolute;
        width: get-desktop-vw(176px);
        height: get-desktop-vw(56px);
        left: get-desktop-vw(996px);
        top: get-desktop-vw(400px);

        @media (max-width: 640px) {
            width: get-mobile-vw(114px);
            height: get-mobile-vw(36px);
            left: get-mobile-vw(46px);
            top: get-mobile-vw(156px);
        }
    }

    &__googleplay-logo {
        position: absolute;
        width: get-desktop-vw(189px);
        height: get-desktop-vw(56px);
        left: get-desktop-vw(1188px);
        top: get-desktop-vw(400px);

        @media (max-width: 640px) {
            width: get-mobile-vw(121px);
            height: get-mobile-vw(36px);
            left: get-mobile-vw(168px);
            top: get-mobile-vw(156px);
        }
    }

    &__arrow {
        position: absolute;
        width: get-desktop-vw(61px);
        height: get-desktop-vw(96px);
        left: get-desktop-vw(1248px);
        top: get-desktop-vw(640px);

        @media (max-width: 640px) {
            width: get-mobile-vw(26px);
            height: get-mobile-vw(42px);
            left: get-mobile-vw(264px);
            top: get-mobile-vw(320px);
            transform: rotate(160deg) scaleX(-1);
        }
    }

    &__comment {
        position: absolute;
        @include main-font();
        font-size: get-desktop-vw(20px);
        line-height: get-desktop-vw(20px);
        font-style: italic;
        width: get-desktop-vw(160px);
        text-align: center;
        color: $dark;
        left: get-desktop-vw(1101px);
        top: get-desktop-vw(680px);

        @media (max-width: 640px) {
            width: get-mobile-vw(77px);
            font-size: get-mobile-vw(10px);
            line-height: get-mobile-vw(10px);
            left: get-mobile-vw(190px);
            top: get-mobile-vw(320px);
        }
    }
}

.hero-image_big {
    height: get-desktop-vw(1200px);

    @media (max-width: 640px) {
        height: get-mobile-vw(540px);
    }
}

.intro {
    width: 936px;
    margin: 144px auto 0 auto;
    color: $dark;

    @media (max-width: 640px) {
        width: get-mobile-vw(288px);
        margin: get-mobile-vw(64px) get-mobile-vw(16px) get-mobile-vw(64px) get-mobile-vw(16px);
    }

    &__title {
        @include main-font();
        font-size: 60px;
        line-height: 64px;
        font-weight: 700;
        text-align: center;
        letter-spacing: -0.6px;

        @media (max-width: 640px) {
            font-size: get-mobile-vw(22px);
            line-height: get-mobile-vw(24px);

            br {
                display: none;
            }
        }
    }

    &-list {
        @include main-font();
        font-size: 24px;
        line-height: 32px;
        margin: 40px 0 32px 144px;

        @media (max-width: 640px) {
            font-size: get-mobile-vw(13px);
            line-height: get-mobile-vw(16px);
            margin: get-mobile-vw(16px) 0 get-mobile-vw(16px) get-mobile-vw(-21px);
            padding-inline-start: get-mobile-vw(38px);
        }

        &__item {
            padding-left: 16px;

            @media (max-width: 640px) {
                padding-left: get-mobile-vw(12px);
            }
        }
    }

    &__paragraph {
        @include main-font();
        font-size: 24px;
        line-height: 32px;
        width: 578px;
        margin: 0 0 37px 199px;

        @media (max-width: 640px) {
            font-size: get-mobile-vw(13px);
            line-height: get-mobile-vw(16px);
            width: get-mobile-vw(228px);
            margin: 0 0 get-mobile-vw(16px) get-mobile-vw(29px);
        }
        
    }
}

.buttons-list {
    display: flex;
    justify-content: center;
    margin: 0 0 96px 0;

    @media (max-width: 640px) {
        margin: 0 0 get-mobile-vw(48px) 0;
    }
    
    &__item {
        display: flex;
        flex-direction: column;
        width: 192px;
        height: 192px;
        border-radius: 100%;
        justify-content: center;
        align-items: center;
        color: white;
        text-decoration: none;
        text-transform: uppercase;
        @include main-font();
        font-size: 28px;

        @media (max-width: 640px) {
            width: get-mobile-vw(124px);
            height: get-mobile-vw(128px);
            font-size: get-mobile-vw(16px);
        }

        span {
            text-transform: none;
            width: 100%;
            text-align: center;
            font-size: 16px;
            margin: -4px 0 0 0;

            @media (max-width: 640px) {
                font-size: get-mobile-vw(11px);
                margin: get-mobile-vw(-1px) 0 0 0;
            }
        }
    }

    .margin {
        margin-left: -24px;
    }
}

.gallery-list {
    width: 100%;
    margin: 160px 0 144px 0;
    @include branded-font();
    text-transform: uppercase;
    color: white;

    @media (max-width: 640px) {
        margin: get-mobile-vw(64px) 0 get-mobile-vw(64px) 0;
    }

    &__item {
        display: flex;
        height: get-desktop-vw(768px);

        @media (max-width: 640px) {
            flex-direction: column-reverse;
            height: get-mobile-vw(512px);

            &:nth-child(2) {
                flex-direction: column;
            }
        }
    }

    &__picture {
        width: 50%;

        @media (max-width: 640px) {
            width: 100%;
        }

        img {
            width: 100%;
            height: 100%;
        }
    }

    &__description {
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        @media (max-width: 640px) {
            width: 100%;
            height: get-mobile-vw(256px);
        }
    }

    &__title {
     //   font-size: 144px;
        font-size: get-desktop-vw(144px);
     //   line-height: 88px;
        line-height: get-desktop-vw(88px);
        font-weight: 300;

        @media (max-width: 640px) {
            font-size: get-mobile-vw(56px);
            line-height: get-mobile-vw(56px);
            margin-top: get-mobile-vw(-16px);
        }
    }

    &__sub-title {
    //    font-size: 88px;
        font-size: get-desktop-vw(88px);
        font-weight: 300;

        @media (max-width: 640px) {
            font-size: get-mobile-vw(40px);
            line-height: get-mobile-vw(32px);
        }
    }

    &__pricing {
    //    font-size: 96px;
        font-size: get-desktop-vw(96px);
        font-weight: 900;

        @media (max-width: 640px) {
            font-size: get-mobile-vw(48px);
            line-height: get-mobile-vw(48px);
        }
    }

    &__button {
        @include main-font();
        background-color: $orange;
    //    width: 210px;
        width: get-desktop-vw(210px);
    //    height: 64px;
        height: get-desktop-vw(64px);
        line-height: 66px;
        line-height: get-desktop-vw(66px);
    //    font-size: 28px;
        font-size: get-desktop-vw(28px);
        text-align: center;
        color: white;
        text-decoration: none;
    //    margin: 21px 0 0 0;
        margin: get-desktop-vw(21px) 0 0 0;

        @media (max-width: 640px) {
            width: get-mobile-vw(99px);
            height: get-mobile-vw(32px);
            line-height: get-mobile-vw(32px);
            font-size: get-mobile-vw(13px);
            margin: get-mobile-vw(8px) 0 0 0;
        }
    }
}

.go-natural-rewards {
    margin: 144px 0 144px 0;

    @media (max-width: 640px) {
        margin: get-mobile-vw(40px) 0 get-mobile-vw(48px) 0;
    }

    &-logos {
        position: relative;

        &__logo {
            position: absolute;
            width: get-desktop-vw(560px);
            height: get-desktop-vw(196px);
            left: get-desktop-vw(638px);
            top: get-desktop-vw(96px);

            @media (max-width: 640px) {
                width: get-mobile-vw(222px);
                height: get-mobile-vw(77px);
                left: get-mobile-vw(35px);
                top: get-mobile-vw(43px);
            }
        }

        &__appstore-logo {
            position: absolute;
            width: get-desktop-vw(218px);
            height: get-desktop-vw(72px);
            left: get-desktop-vw(732px);
            top: get-desktop-vw(320px);

            @media (max-width: 640px) {
                width: get-mobile-vw(84px);
                height: get-mobile-vw(28px);
                left: get-mobile-vw(73px);
                top: get-mobile-vw(132px);
            }
        }

        &__googleplay-logo {
            position: absolute;
            width: get-desktop-vw(234px);
            height: get-desktop-vw(72px);
            left: get-desktop-vw(963px);
            top: get-desktop-vw(320px);

            @media (max-width: 640px) {
                width: get-mobile-vw(90px);
                height: get-mobile-vw(28px);
                left: get-mobile-vw(164px);
                top: get-mobile-vw(132px);
            }
        }
    }

    picture {
        img {
            width: 100%;
        }
    }
}

.details {
    width: 618px;
    margin: 0 auto 192px auto;

    @media (max-width: 640px) {
        width: get-mobile-vw(288px);
        margin: 0 auto get-mobile-vw(64px) get-mobile-vw(16px);
    }

    &__title {
        font-family: Brix Slab;
        font-size: 32px;
        line-height: 100%;
        font-weight: 700;
        letter-spacing: -0.32px;
        color: $dark;
        margin: 0 0 0 0;

        @media (max-width: 640px) {
            font-size: get-mobile-vw(24px);
            letter-spacing: -0.24px;
        }
    }

    &-list {
        width: calc(618px - 40px);
        margin: 12px 0 39px 40px;

        @media (max-width: 640px) {
            width: get-mobile-vw(243px);
            margin: get-mobile-vw(6px) auto get-mobile-vw(24px) get-mobile-vw(24px);
        }

        &__item {
            font-family: Brix Slab;
            font-size: 24px;
            font-style: normal;
            font-weight: 400;
            line-height: 28px;
            color: $dark;

            @media (max-width: 640px) {
                font-size: get-mobile-vw(13px);
                line-height: get-mobile-vw(16px);
            }

            &::marker {
                color: $green;
                font-size: 0.96em;
            }

            a {
                color: inherit;
                text-decoration-color: $green;
                text-underline-offset: 3px;

                &:hover {
                    color: $green;
                }
            }
        }
    }
}