@import '/node_modules/reset-css/sass/_reset.scss';
@import './variables.scss';
@import './fonts.scss';
@import './mixin.scss';
@import './global.scss';
@import './menu.scss';
@import 'swiper/css';
@import 'swiper/css/navigation';
@import 'swiper/css/pagination';

.mainSection{
    position: relative;
    display: block;
    width: 100%;
    height: 70.12444444444444VW;
    .mainImg{
        position: absolute;
        top:0;
        left: 0;
        @include heightMatch;
        picture{
            @include heightMatch;
            img{
                @include objectFit(cover, center center)
            }
        }
    }
    .gradient{
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 8;
        width: 100%;
        height: 24.444444444444443VW;
        img{
            @include objectFit(cover, center bottom)
        }
    }
    .fistic{
        position: absolute;
        z-index: 9;
        bottom: -3.766vw;
        right: -8.16vw;
        width: 16.4941338854VW;
        height: 16.4941338854VW;
        transform: rotate(85deg);
        img{
            @include objectFit(cover, center bottom)
        }
    }
    .hlContainer{
        padding-top: 57.40277777777778VW;
        width: 42.01388888888889VW;
        margin: 0 auto;
        .hlH1{
            position: relative;
            z-index: 9;
            padding-top: 2.7777777777777777VW;
            width:38.88888888888889VW;
            height: 16.38888888888889VW;
            margin: 0 auto 1.8234vw auto;
            figure{
                @include heightMatch;
                picture{
                    @include heightMatch;
                    img{
                        @include objectFit(cover, center center)
                    }
                }
            }
        }
        p{
            margin-bottom: 1.1234vw;
            text-align: center;
            font-weight: 300;
            font-style: normal;
            &:last-of-type{
                margin-bottom: 0;
            }
        }
    }
}


.productsSection{
    padding-bottom: 11.2423vw;
}

.carposProductsHolder{
    position: relative;
}
.carposProducts{
    position: relative;
}

.productElement{
    position: relative;
    width: 90%;
    margin: 0 auto;
    .productPackshot{
        position: relative;
        width: 100%;
        height: 21.73913043478261VW;
        margin-bottom: 1.2234vw;
        .productShape{
            position: absolute;
            z-index: 1;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            right: 0;
            width: 76%;
            height: 76%;
            svg{
                @include objectFit(contain, center center)
            }
        }
        picture{
            position: relative;
            z-index: 2;
            display: block;
            width: 6.281573498964804VW;
            height: 100%;
            margin: 0 auto;
            img{
                @include objectFit(contain, center center)
            }
        }
    }
    .productContent{
        text-align: center;
        h3{
            color: $colorHeadline;
            font-size: $fontSize36;
            line-height: $fontSize36;
            width: 58%;
            margin: 0 auto 1.2234vw auto;
            font-weight: bold;
        }
        p{
            font-weight: 300;
            color: $colorBase;
            width: 90%;
            margin: 0 auto;
        }
    }
}
.prodPrev, .prodNext, .recipePrev, .recipeNext{
    position: absolute;
    z-index: 9;
    top: 33%;
    width: 4.278812974465148VW;
    cursor: pointer;
    height: auto;
    margin-top: auto;
    color: inherit;
    background: transparent;
    svg, img{
        display: block;
        width: 100%;
    }
    &::after{
        display: none;
    }
}
.prodPrev{
    left: -4.676vw;
}
.prodNext{
    right: -4.676vw;
}
.recipePrev{
    left: 2.0234vw;
}
.recipeNext{
    right: 2.0234vw;
}

.recipesSection{
    position: relative;
    padding-bottom: 8.2423vw;
    background: #fefefd;
    .recipesCopy{
       width: 21.394064872325742VW;
       position: absolute;
       z-index: 3;
       top: -5.676vw;
       left: 10.324vw; 
       img{
        display: block;
        width: 100%;
       }
    }
}
.recipesHolder{
    position: relative;
    &::after{
        content: '';
        position: absolute;
        top: 7.234vw;
        right: -7.766vw;
        width: 22.324vw;
        height: 37.234vw;
        background: url('../../public/img/almonds.png');
        background-repeat: no-repeat;
        background-position: center right;
        background-size: contain;
    }
}
.recipeElement{
    display: flex;
    align-items: center;
    gap: 8.557625948930296VW;
    .recipeLeft, .recipeRight{
        position: relative;
        flex: 1;
    }
    .recipeImage{
        position: relative;
        display: block;
        width: 100%;
        height: 41.02760524499655VW;
        overflow: hidden;
        border-bottom-right-radius:20px;
        picture{
            @include heightMatch;
            img{
                @include objectFit(cover, center center)
            }
        }
        .recipeGradient{
            position: absolute;
            z-index: 2;
            top: 0;
            left: 0;
            width: 100%;
            height: auto;
            img{
                display: block;
                width: 100%;
            }
        }
    }
    .recipeContent{
        position: relative;
        padding-top: 2.324vw;
        width: 75%;
        margin-right: auto;
        h2{
            font-size: $fontSize44;
            line-height: $lineHeight48;
            color: $colorHeadline;
            font-weight: bold;
            margin-bottom: 1.6234vw;
        }
        h3{
            font-size: $fontSize32;
            line-height: $lineHeight32;
            color: $colorHeadline;
            font-weight: bold;
            margin-top: 1.6234vw;
            margin-bottom: 1.0234vw;
        }
        h2{
            &:first-of-type{
                margin-bottom: 0.2234vw;
            }
        }
        h4{
            font-size: $fontSizeBase;
            line-height: $lineHeightBase;
        }
        p{
            font-weight: 300;
            margin-bottom: 0.8234vw;
        }
        ul{
            width: 100%;
            li{
                position: relative;
                padding-left: 1.03234vw;
                &::after{
                    content:url('../../public/img/dot.svg');
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 0.6281573498964804VW;
                    height: 0.6281573498964804VW;
                    background-repeat: no-repeat;
                    background-position: center center;
                    background-size: contain;
                }
            }
        }
        
    }
    .grid-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Adjust the number of columns as needed */
        gap: 20px; /* Adjust the gap size between grid items */
    }
}

.videoSection{
    position: relative;
    display: block;
    width: 100%;
    min-height: 60.238785VW;
    padding-top: 2.234vw;
    padding-bottom: 8.234vw;
    background: url('../../public/img/video-back.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    &::after{
        content:'';
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(179deg, rgba(253, 239, 227, 0.00) 0%, #EFE6DF 41.69%, #EDE5DE 52.90%, #F1E8E0 63.20%, rgba(253, 239, 227, 0.00) 100%);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center top;
    }
    h2{
        width: 38%;
        margin: 0 auto;
        text-align: center;
        color: $colorHeadline;
        font-size: $fontSize72;
        line-height: $lineHeight76;
        font-weight: bold;
        margin-bottom: 3.234vw;
    }
    .videoHold{
        width: 74.32712215320912VW;
        height: 41.40786749482402VW;
        overflow: hidden;
        border-radius: 20px;
        margin: 0 auto;
        background: gray;
        video{
            cursor: pointer;
            @include objectFit(cover, center center)
        }
    }
}
.footer{
    position: relative;
    padding: 1.834vw 0 ;
    background: $colorLightBlue;
}
.innerFooter{
    position: relative;
    display: flex;
    align-items: center;
    p{
        color: $colorWhite;
        a{
            color: $colorWhite;
            text-decoration: underline;
        }
    }
}
.footerLeft, .footerRight{
    flex: 1;
}
.footerLeft{
    text-align: left;
}
.footerRight{
    text-align: right;
}
.footerLogo{
    position: absolute;
    top: -2.6324vw;
    left: 0;
    right: 0;
    width: 7.5VW;
    height: 5.3472222222VW;
    margin: 0 auto;
    img{
        @include objectFit(contain, center center)
    }
}
.socials{
    display: flex;
    width: 40%;
    margin-left: auto;
    li{
        flex: 1;
        a{
            text-decoration: none;
            display: block;
            background: #ffffff;
            padding: 0.8234vw;
            position: relative;
            width: 3.1055900621118013VW;
            overflow: hidden;
            border-radius: 8px;
            margin-left: auto;
            img{
                @include objectFit(contain, center center)
            }
        }
    }
}
.footerLow{
    padding: 1.2234vw 0 2.234vw 0;
    p{
        color: $colorGrey;
        font-weight: 300;
    }
}


@media screen and (max-width:1680px){
    .recipeElement{
        gap: 4.5576259489VW;
    }
    .recipeElement{
        .recipeContent{
            width: 85%;
        }
        .recipeRight{
            flex: 1.2;
        }
    }
    .recipesHolder{
        position: relative;
        &::after{
            content: '';
            position: absolute;
            top: 12.234vw;
            right: -6.766vw;
            width: 18.324vw;
            height: 30.234vw;
            background: url('../../public/img/almonds.png');
            background-repeat: no-repeat;
            background-position: center right;
            background-size: contain;
        }
    }
    .mainSection{
        .hlContainer{
            width: 51.013889VW;
        }
    }
    .productElement{
        .productContent{
            p{
                width: 100%;
            }
        }
    } 
}


@media screen and (max-width:1290px){
    .heightCompensator {
        height: 25.985507VW;
    }
    .mainSection {
        .hlContainer{
            width: 65.013889VW;
        }
    }
    .recipeElement{
        .recipeRight{
            flex: 1.5;
        }
    }
}

@media screen and (max-width:1090px){
    .recipeElement{
        .recipeRight{
            flex: 1.5;
        }
    }
    .recipeElement {
        .recipeContent{
            width: 87%;
        }
    }
    .recipesSection{
        .recipesCopy{
            top: -1.676vw;
        }
    }
}

@media screen and (max-width:990px){
    .recipeElement{
        flex-direction: column;
    }
    .recipesSection {
        .recipesCopy{
            top: -18.676vw;
            width: 44.394065VW;
            left: 0;
            right: 0;
            margin: 0 auto;
        }
    }
    .productsSection {
        padding-bottom: 22.2423vw;
    }
    .productElement {
        .productPackshot{
            position: relative;
            width: 100%;
            height: 32.73913VW;
            margin-bottom: 3.2234vw;
            picture{
                width: 10.281573VW;
            }
        }
    }
    .recipeElement{
        gap: 0;
        display: block;
        .recipeImage{
            height: 76.027605VW;
        }
    }
    .prodPrev, .prodNext, .recipePrev, .recipeNext{
        width: 9.278813VW;
    }
    .recipeElement .recipeContent {
        width: 100%;
        padding: 8.234vw 4.234vw 5.234vw 4.234vw;
    }
    .prodPrev, .prodNext, .recipePrev, .recipeNext{
        top: 48%;
    }
    .recipeElement .recipeContent h2{
        font-size: 30px;
        line-height: 28px;
    }
    .recipeElement .recipeContent h2:first-of-type {
        margin-bottom: 2.2234vw;
    }
    .recipeElement .recipeContent h4 {
        font-size: 16px;
        line-height: 16px;
    }
    .recipeElement .recipeContent h3 {
        font-size: 22px;
        line-height: 24px;
        margin-top: 32px;
        margin-bottom: 10px;
    }
    .recipeElement .recipeContent p{
        margin-bottom: 14px;
        font-size: 16px;
        line-height: 20px;
    }
    .recipeElement .recipeContent ul li{
        padding-left: 15px;
    }
    .recipeElement .recipeContent ul li::after{
        width: 8px;
        height: 8px;
    }
    .recipesSection {
        position: relative;
        padding-bottom: 1.2423vw;
    }
    .innerFooter{
        display: block;
    }
    .footer{
        padding: 7.834vw 0 2.834vw 0;
    }
    .footerLogo {
        position: absolute;
        top: -6.6324vw;
        left: 0;
        right: 0;
        width: 15.5VW;
        height: 12.347222VW;
        margin: 0 auto;
    }
    .footerLeft, .footerRight{
        text-align: center;
    }
    .socials{
        margin-top: 2.234vw;
        width: 100%;
        display: block;
    }
    .socials li a{
        width: 6.87234vw;
        margin: 0 auto 3.234vw auto;
    }
    .footerLow p{
        text-align: center;
    }
}

@media screen and (max-width:560px){
    .mainSection .hlContainer {
        width: 100%;
        padding: 64.402778VW 15px 0 15px;
    }
    .mainSection .hlContainer .hlH1 {
        width: 59.888889VW;
        height: 25.388889VW;
    }
    .mainSection .mainImg{
        position: relative;
    }
    .mainSection .hlContainer{
        padding: 0 15px 0 15px;
    }
    .mainSection{
        height: auto;
    }
    .heightCompensator {
        height: 9.985507VW;
    }
    .productElement .productContent h3 {
        color: #8D633F;
        font-size: 28px;
        line-height: 28px;
        width: 80%;
        margin: 0 auto 3.2234vw auto;
    }
    .recipesSection .recipesCopy {
        top: -18.676vw;
        width: 59.394065VW;
    }
    .prodPrev, .prodNext, .recipePrev, .recipeNext {
        top: 72.027605VW;
    }
    .videoSection {
        padding-top: 6.234vw;
        padding-bottom: 17.234vw;
    }
    .videoSection h2 {
        width: 85%;
        margin: 0 auto;
        text-align: center;
        color: #8D633F;
        font-size: 24px;
        line-height: 30px;
        font-weight: bold;
        margin-bottom: 5.234vw;
    }
    .videoSection .videoHold {
        width: 91.327122VW;
        height: 50.407867VW;
    }
    .footerLogo {
        position: absolute;
        top: -10.6324vw;
        left: 0;
        right: 0;
        width: 22.5VW;
        height: 16.347222VW;
    }
    .recipeElement .grid-list{
        grid-template-columns:repeat(1, 1fr);
    }
    .productElement .productPackshot{
        height: 42.73913VW;
    }
    .productElement .productPackshot picture {
        width: 14.281573VW;
    }
    .mainSection .hlContainer .hlH1 {
        width: 72.888889VW;
        height: 29.388889VW;
        top: -3.766vw;
    }
}