@font-face {
    font-family: "Kayak Sans Bold";
    src: url('../../fonts/landing_page/Kayak Sans Bold.otf')
}

.body, .body_ar {
    margin: 0;
    height: 1000px;
    background: white;
    background-size: 90%;
    animation-duration: 1.5s;
    animation-fill-mode: both;
    animation-direction: alternate;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    overflow-x: hidden;
    color: #4d4d4d;
}

.body {
    background-image: url(../../img/landing_page/chickenCropped.png);
    background-repeat: no-repeat;
    background-position-x: 1000%;
    background-position-y: 1000%; 
    animation-name: backgroundAnimation;
}

.body_ar {
    background-image: url(../../img/landing_page/chickenCroppedRotated.png);
    background-repeat: no-repeat;
    background-position-x: -1000%;
    background-position-y: 300%;
    animation-name: backgroundAnimationAr;
}

.header {
    padding-left: 5%;
}

.header_ar {
    padding-right: 5%;
}

.language_container, .language_container_ar {
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
}

.language_container {
    padding-right: 45px;
}

.language_container_ar {
    justify-content: flex-start;
    padding-left: 45px;
}

.language_container a, .language_container_ar a {
    margin-right: 10px;
    box-shadow: 3px 2px 10px -5px #151515;
    border-radius: 50%;
    display: inline-block;
    outline: none;
}

.ar, .fr, .en {
    width: 35px;
    height: 35px;
    background-repeat: no-repeat;
}

.ar {
    background-image: url('/static/img/landing_page/ar.svg');
}

.fr {
    background-image: url('/static/img/landing_page/fr.svg'); 
}

.en {
    background-image: url('/static/img/landing_page/en.svg');
}

.flag {
    width: 30px;
}

.brand_name h1, .brand_name_ar h1 {
    margin: 0;
    padding: 45px;
    display: flex;
    padding-top: 15px;
}

.brand_name_ar h1 {
    flex-direction: row-reverse;
}

.logo_container h1 a, .logo_container_ar h1 a {
    text-decoration: none;
    color: #fbd841;
    display: flex;
    align-items: center;
    font-family: 'Kayak Sans Bold';
    font-size: 60px;
    outline: none;
}

.logo_container_ar h1 a {
    flex-direction: row-reverse;
}

.logo {
    width: 75px;
    border-radius: 55%;
}

.logo_name {
    margin-left: 10px;
}

.logo_name_ar {
    margin-right: 10px;
}

.header_description_container, .header_description_container_ar {
    display: flex;
}

.header_description_container_ar {
    flex-direction: row-reverse;
}

.header_description, .header_description_ar {
    font-size: 35px;
    max-width: 400px;
    font-family: 'Kayak Sans Bold';
    margin-bottom: 60px;
}

.header_description {
    padding-left: 45px;
}

.header_description_ar {
    padding-right: 45px;
    text-align: right;
}

.download_button_container_ar {
    display: flex;
    flex-direction: row-reverse;
}

.download_button, .download_button_ar {
    background: #ee3a38;/*#5fb709;*/
    border: none;
    cursor: pointer;
    outline: none;
    color: white;
    font-size: 20px;
    font-family: 'Kayak Sans Bold';
    padding: 15px;
    border-radius: 5px;
    box-shadow: -4px 4px 19px -9px black;
}

.download_button {
    margin-left: 45px;
}

.download_button_ar {
    margin-right: 45px;
}

#food_discover_section {
    height: 400px;
    margin-top: 41%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #3c3c3c;
    color: white;
    transition-duration: 0.5s;
    transition-timing-function: ease-in;
}

.slideOutLeft {
    transform: skew(0deg, 5deg) translate(-100%, 0px);
}

.slideOutRight {
    transform: skew(0deg, -5deg) translate(100%, 0px);
}

.slideIn {
    transform: skew(0deg, 5deg) translate(0px, 0px);
}

.slideInRight {
    transform: skew(0deg, -5deg) translate(0px, 0px);
}

.image_container {
    width: 400px;
    height: 300px;
    overflow: hidden;
    border-top-left-radius: 60%;
    border-bottom-right-radius: 60%;
    border-bottom-left-radius: 65%;
    border-top-right-radius: 125%;
    /* box-shadow: -15px 20px 40px 20px #8e8a8a; */
    box-shadow: -15px 20px 40px 20px #1d1d1d;
    position: relative;
    animation-name: bubbleAnimation;
    animation-duration: 1.5s;
    animation-fill-mode: both;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    border: 10px solid #3c3c3c;
}

.food_section_img {
    width: 100%;
    position: relative;
    top: -35px;
}

.food_description, .food_description_ar {
    width: 40%;
    margin-left: 10%;
    font-size: 25px;
    font-family: 'Kayak Sans Bold';
}

.food_description h1 {
    text-shadow: 5px 5px 10px #040404;
}

.food_description_ar h1 {
    text-shadow: 5px 5px 10px #040404;
    direction: rtl;
}

/* Grocery fruits vegetables section */

#grocery_discover_section {
    /* height: 400px;
    margin-top: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row-reverse; */
    height: 400px;
    margin-top: 9%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row-reverse;
    background: #fbfbfb;
    transition-duration: 0.5s;
    transition-timing-function: ease-in;
}

.grocery_image_container {
    width: 400px;
    height: 300px;
    overflow: hidden;
    border-top-left-radius: 125%;
    border-bottom-right-radius: 65%;
    border-bottom-left-radius: 60%;
    border-top-right-radius: 60%;
    box-shadow: -15px 20px 40px 20px #8e8a8a;
    position: relative;
    animation-name: groceryBubbleAnimation;
    animation-duration: 1.5s;
    animation-fill-mode: both;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    border: 10px solid #fbfbfb;
}

.grocery_section_img {
    width: 100%;
}

.grocery_description, .grocery_description_ar {
    width: 40%;
    margin-right: 10%;
    font-size: 25px;
    font-family: 'Kayak Sans Bold';
}

.grocery_description h1 {
    text-shadow: 5px 5px 10px #c1c1c1;
}

.grocery_description_ar h1 {
    text-shadow: 5px 5px 10px #c1c1c1;
    direction: rtl;
}

/* offers section */
#offers_discover_section {
    height: 400px;
    margin-top: 9%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffba52;
    color: white;
    transition-duration: 0.5s;
    transition-timing-function: ease-in;
}

.offers_image_container {
    width: 400px;
    height: 300px;
    overflow: hidden;
    border-top-left-radius: 60%;
    border-bottom-right-radius: 60%;
    border-bottom-left-radius: 65%;
    border-top-right-radius: 125%;
    box-shadow: -15px 20px 40px 20px #b77609;
    position: relative;
    animation-name: groceryBubbleAnimation;
    animation-duration: 1.5s;
    animation-fill-mode: both;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    border: 10px solid #f7b951;
}

.offers_section_img {
    width: 100%;
    height: 100%;
}

.offers_description, .offers_description_ar {
    width: 40%;
    margin-left: 10%;
    font-size: 25px;
    font-family: 'Kayak Sans Bold';
}

.offers_description h1 {
    text-shadow: 5px 5px 10px #3e3e3e;
}

.offers_description_ar h1 {
    text-shadow: 5px 5px 10px #3e3e3e;
    direction: rtl;
}

/* app */
.app_section {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20%;
    background: #fbfbfb;
    z-index: 1;
    position: relative;
    height: 400px;
}

.app_image_container {
    position: relative;
}

.app_background_shape {
    width: 100%;
    height: 500px;
    position: absolute;
    background: #3c3c3c;
    z-index: -1;
    border-top-left-radius: 60%;
    border-bottom-right-radius: 60%;
    border-bottom-left-radius: 65%;
    border-top-right-radius: 113%;
    transform: rotate(-45deg);
    bottom: 0;
    box-shadow: -10px 10px 30px -15px black;
    animation-name: appBackgroundBubbleAnimation;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.app_description, .app_description_ar {
    width: 40%;
    margin-left: 10%;
    font-size: 25px;
    font-family: 'Kayak Sans Bold';
}

.app_description_ar {
    direction: rtl;
}

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

.app_download_button_container {
    width: fit-content;
}

.app_download_button_container a {
    background-image: url(../../img/landing_page/downloadButton.svg);
    display: block;
    width: 210px;
    height: 70px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.qr_button {
    display: block;
    width: 200px;
    height: 70px;
    border-radius: 10px;
    border: none;
    box-shadow: 0px 3px 10px -4px black;
    color: white;
    font-family: Kayak Sans Bold;
    font-size: 20px;
    background: #38586b;
    outline: none;
    cursor: pointer;
}

.qr_code_container {
    background: #000000ab;
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    display: none;
    z-index: 100;
}

.qr_code_container_visible {
    display: flex !important;
    align-items: center;
}

.qr_code_img {
    width: 100%;
    height: 75%;
}

footer {
    height: 200px;
    background: #3c3c3c;
    color: white;
    font-family: 'Kayak Sans Bold';
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 5px;
    box-sizing: border-box;
    margin-top: 300px;
}


footer nav a {
    color: white;
    text-decoration: none;
    padding-left: 30px;
    padding-right: 30px;
    outline: none;
}

.social {
    padding: 10px;
}

.social a {
    display: inline-block;
    outline: none;
}

svg {
    width: 25px;
    fill: white;
    height: 25px;
    margin-left: 10px;
    margin-right: 10px;
}

.creator {
    margin: 0px;
    margin-bottom: 10px;
    color: #7d7d7d;
}


@keyframes backgroundAnimation {
    100% {
        background-position-x: 250%;
        background-position-y: -60px;
    }
}

@keyframes backgroundAnimationAr {
    100% {
        background-position-x: -100px;
        background-position-y: -165px;
    }
}

@keyframes bubbleAnimation {

    0% {
        left: 0px;
        top: 0px;
    }

    100% {
        left: 10px;
        top: 10px;
    }

}

@keyframes groceryBubbleAnimation {

    0% {
        left: 0px;
        top: 0px;
    }

    100% {
        left: -10px;
        top: 10px;
    }
    
}

@keyframes appBackgroundBubbleAnimation {
    0% {
        border-top-left-radius: 60%;
        border-bottom-right-radius: 60%;
        border-bottom-left-radius: 65%;
        border-top-right-radius: 113%;
    }

    20% {
        border-top-left-radius: 113%;
        border-bottom-right-radius: 45%;
        border-bottom-left-radius: 90%;
        border-top-right-radius: 60%;
    }

    40% {
        border-top-left-radius: 40%;
        border-bottom-right-radius: 120%;
        border-bottom-left-radius: 290%;
        border-top-right-radius: 160%;
    }

    60% {
        border-top-left-radius: 240%;
        border-bottom-right-radius: 30%;
        border-bottom-left-radius: 100%;
        border-top-right-radius: 60%;
    }

    80% {
        border-top-left-radius: 60%;
        border-bottom-right-radius: 45%;
        border-bottom-left-radius: 90%;
        border-top-right-radius: 100%;
    }

    100% {
        border-top-left-radius: 40%;
        border-bottom-right-radius: 145%;
        border-bottom-left-radius: 90%;
        border-top-right-radius: 160%;
        /* transform: rotate(-45deg) translate(50px, -37px); */
    }

}

@media only screen and (max-width: 1030px) {
    .header {
        padding: 0px;
    }

    .body {
        background-position-x: 1000%;
        background-position-y: -1000%;
    }

    .app_download_qr_container {
        display: none;
    }

}

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

    .body, .body_ar {
        background-image: none;
        height: auto;
    }

    .header, .header_ar {
        padding: 0px;
    }

    .language_container, .language_container_ar {
        justify-content: center;
        padding-right: 0px;
        padding-left: 0px;
    }

    .logo_container, .logo_container_ar {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .brand_name h1, .brand_name_ar h1 {
        padding: 0px;
        padding-top: 15px;
        justify-content: center;
    }

    .brand_name h1 a, .brand_name_ar h1 a {
        justify-content: center;
    }

    .header_description, .header_description_ar {
        padding: 0px;
        text-align: center;
    }

    .download_button, .download_button_ar {
        display: none;
    }

    .app_description, .app_description_ar {
        width: auto;
        margin: 20px;
    }

    .top_body_container, .app_description h1, .app_description_ar h1, .app_background_shape {
        display: none;
    }

    .app_section {
        flex-direction: column-reverse;
        height: auto;
        margin-top: 30px;
    }

    .app_section_img {
        width: 100%;
    }

    footer {
        margin-top: 0px;
    }

}

@media only screen and (max-width: 450px) {
    .logo {
        width: 20%;
    }

    .logo_name {
        font-size: 35px;
    }
}