:root{
    --primary: #17B806 ;
    --secondary: #000000;
    --textColor: #A7A7A7;
    --footerColor: #E9E9E9;
    --primaryText: #FFFFFF;
}

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700,900&display=swap');
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    font-family: 'Montserrat', sans-serif;
    max-width: 100vw;
    font-size: 10px;
    bottom: 0;
    position: relative;
    overflow-x: hidden;
    background-color: white;
}
a {
    text-decoration: none;
}
#myBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: var(--primary);
    color: white;
    cursor: pointer;
    padding: 15px;
    text-align: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50px;
    box-shadow:  20px 20px 60px #d9d9d9, 
    -20px -20px 60px #ffffff;
  }
.logo-logo {
    width: 12rem;
}
.container {
    /* max-width: 30.8rem; */
    margin: 2rem auto;
    padding: 0.5rem auto;
}
header {
    text-align: center;
}
#grozara-logo {
    width: 200px;
}
nav {
    margin: 1.5rem auto;
    max-width: 600px;
}
nav ul {
    margin: .5rem;
    padding: .4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
nav ul li {
    list-style: none;
}
nav ul li a {
    font-size: 1rem;
    font-weight: 600;
    color: black;
    text-decoration: none;
}
.btn-download {
    background-color: var(--primary);
    border-radius: .2rem;
    height: 2rem;
    display: flex;
    align-items: center;
}
.btn-download a {
    padding: .2rem;
    color: var(--primaryText);
}
main {
    display: flex;
    flex-flow: column;
}
.hero {
    text-align: center;
}
.hero h1 {
    color: black;
    padding: .1rem;
    font-size: 1.9rem;
    font-weight: 900;
}
.hero h2 {
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 1rem;
    color: var(--textColor);
}
.hero p {
    font-size: 1rem;
    font-weight: 400;
    max-width: 500px;
    margin: 2rem auto;
    padding: 20px;
    color: var(--textColor);
}
.hero h1::before {
    content: "";
    display: block;
    width: 12rem;
    border: .2rem solid var(--primary);
    background-color: var(--primary);
    margin: 0.5rem auto;
    border-radius: 2rem;
}
.hero h1::after {
    content: "";
    display: block;
    width: 12rem;
    border: .2rem solid var(--primary);
    background-color: var(--primary);
    margin: 0.5rem auto;
    border-radius: 2rem;
}
.appButtons {
    display: flex;
    align-items: center;
    justify-content: center;
}
#apple-download, #android-download {
    width: 141px;
    height: 42px;
    padding: 1px;
}
.partners-container {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}
.partners {
    padding: .2rem;
    width: 20rem;
    height: 4rem;
    border-radius: .5rem;
    background-color: var(--primary);
    text-align: center;
    color: var(--primaryText);
}
.partner-list {
    margin-top: -.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.partner-list li {
    list-style: none;
}
.partner-logo {
    width: 6rem;
}
.partner-logo-woolworths, .partner-logo-game {
    display: none;
}
figure {
    text-align: center;
}
figure img {
    margin: 3rem auto 0;
    width: 20rem;
}
.app-screen-bg {
    display: none;
}
section  {
    margin-bottom: 3rem;
}
section h1 {
    font-size: 2rem;
    color: var(--textColor);
    text-align: center;
}
section h1::after {
    content: "";
    display: block;
    width: 2rem;
    border: .2rem solid var(--primary);
    background-color: var(--primary);
    border-radius: 1rem;
    margin: 0.5rem auto;
}
.features-heading {
    margin-bottom: 2rem;
}
.about-paragraph {
    font-size: 1rem;
    line-height: 1.5rem;
    text-align: center;
    color: var(--textColor);
    width: 20rem;
    margin: auto;
}
.feature {
    display: flex;
    flex-direction: column;
}
.features h2 {
    color: var(--textColor);
    font-size: 1.2rem;
}
.app-feature {
    display: flex;
    justify-content: center;
    position: relative;
    width: 20rem;
    margin: auto;
}
.app-image-bg {
   display: none;
}
.app-image {
    /* width: 15rem; */
    height: 30rem;
    margin-bottom: 2rem;
}
.feature-text {
    display: flex;
    justify-content: center;
    position: relative;
    width: 20rem;
    margin: auto    ;
}
.app-feature-heading,.app-feature-paragraph  {
    color: var(--textColor);
    text-align: center;
}
.app-feature-paragraph {
    width: 18rem;
    line-height: 1.5rem;
    font-size: 1rem;
    margin-bottom: 3rem;
}
.app-feature-paragraph::after {
    content: "";
    display: block;
    width: 1rem;
    border: .2rem solid var(--primary);
    background-color: var(--primary);
    border-radius: 1rem;
    margin: 0.5rem auto;
}
.feature-num {
    position: absolute;
    top: -1.2rem;
    left: 1rem;
    width: 4rem;
    height: 4rem;
}
.feature-num img {
    width: 4rem;
}
.feature-num span {
    font-size: 1.5rem;
    color: var(--primaryText);
    position: absolute;
    top: 1rem;
    left: 2rem;
}
.app-feature-heading {
    margin-bottom: 1rem;
}
.contact-heading {
    margin-bottom: 1rem;
}
.contact {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.contact-form {
    -webkit-appearance: none;
    display: flex;
    flex-direction: column;
    width: 20rem;
    margin-bottom: 2rem;
    border-radius: .5rem;
    padding: 1rem 1rem ;
    font-size: 1.2rem;
    color: var(--primaryText);
    /* background-color: var(--primary); */
    background-color: #0DD773;
}
.contact-form label {
    margin-bottom: .2rem;
}
.contact-form input, textarea {
    -webkit-appearance: none;
    font-family: inherit;
    overflow: visible; 
    padding: .1rem;
    margin-bottom: 1rem;
    border-radius: .5rem;
    border: none;
}
.contact-form input {
    height: 2.5rem;
}
::placeholder {
    font-size: 1rem;
    color: var(--footerColor);   
    padding: .2rem;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    font-size: 1rem;
    color: var(--footerColor);   
    padding: .2rem;
}
::-moz-placeholder { /* Firefox 19+ */
    font-size: 1rem;
    color: var(--footerColor);   
    padding: .2rem;
}
:-ms-input-placeholder { /* IE 10+ */
    font-size: 1rem;
    color: var(--footerColor);   
    padding: .2rem;
}
:-moz-placeholder { /* Firefox 18- */
    font-size: 1rem;
    color: var(--footerColor);   
    padding: .2rem;
}
.contact-form textarea {
    height: 8rem;
}
.submit {
    background-color: black;
    color: white;
    font-size: 1.2rem;
}
.reviews {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.reviews img {
    width: 10rem;
    margin-bottom: 1rem;
}
.reviews p {
    display: flex;
    flex-direction: column;
    width: 15rem;
    color: var(--textColor);
    font-size: 1rem;
    text-align: center;
    line-height: 1.3rem;
}
cite {
    margin-top: .5rem;
    font-style: normal;
    color: darkslategrey;
    position: relative;
}
cite::before {
    content: "";
    position: absolute;
    left: 2.8rem;
    top: .5rem;
    height: .1rem;
    width: 1rem;
    border-radius: 10rem;
    background-color: var(--primary);
    border: .1rem solid var(--primary);
}
.download {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.download-left {
    width: 20rem;
}
.download p {
    display: flex;
    flex-direction: column;
    text-align: center;
    font-size: .8rem;
    font-weight: 400;
    margin-bottom: 1rem;
    color: var(--textColor);
}
.download-right {
    display: none;
}

footer {
    background-color: var(--footerColor);
    padding: 2rem;
}
.footer-logo {
    width: 8rem;
    margin-bottom: .5rem;
}
.footer-paragraph {
    width: 15rem;
    color: var(--textColor);
    font-size: .9rem;
    margin-bottom: 1rem;
}
footer ul li {
    list-style: none;
}
.social-icons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 12rem;
    margin-bottom: 2rem;
}
.social-icon {
    width: 1.4rem;
}
.social-icon-facebook {
    width: .8rem;
}

.copyright {
    display: flex;
    justify-content: center;
}
.copyright a {
    color: var(--textColor);
}

/* Small devices*/
@media screen and (min-width: 900px) {
    .container {
        max-width: 60rem;
        margin: 2rem auto;
        padding: 0.5rem auto;
    }
    header {
        display: flex;
        justify-content: space-between;
        /* flex-flow: wrap; */
        align-items: center;
    }
    nav {
        margin: 0;
        width: 60rem;
    }
    nav ul {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: space-evenly;
    }
    nav ul li {
        list-style: none;
        /* padding: 0.5rem 2rem;   */
    }
    nav ul li a {
        font-size: 1.4rem;
        font-weight: 600;
        text-decoration: none;
    }
    .hero-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }
    .hero-container-right {
        position: absolute;
        right: 5rem;
        top: 0;
    }
    .hero-container-left {
        width: 50rem;
    }
    .device {
        position: relative;
    }
    .app-screen-bg {
        display: block;
        position: absolute;
        top: 1rem;
        right: -12rem;
        z-index: -100;
        width: 40rem;
    }
    figure img {
        margin: 0.5rem auto;
        width: 15rem;
        -webkit-transform:rotate(10deg);
        -moz-transform: rotate(10deg);
        -ms-transform: rotate(10deg);
        -o-transform: rotate(10deg);
        transform: rotate(10deg);
    }
    .hero h1 {
        font-size: 3.5rem;
        font-weight: 900;
        text-align: left;
        margin-top: 5%;
    }
    .hero h2 {
        font-size: 1.6rem;
    }
    .hero h1::before {
        display: none;
    }
    .hero h1::after {
        content: "";
        display: block;
        width: 10rem;
        border: .2rem solid var(--primary);
        margin: 20px 0 20px 0;
    }
    .hero {
        text-align: left;
        margin-bottom: 10rem;
    }
    .appButtons {
        display: flex;
        margin-top: 20px;
        padding: 0px;
        align-items: left;
        justify-content: left;
    }
    #apple-download, #android-download {
        width: 141px;
        height: 42px;
        padding: 1px;
    }
    .partners {
        padding: .3rem;
        width: 50rem;
        height: 6rem;
        border-radius: .5rem;
        background-color: var(--primary);
        text-align: center;
        color: var(--primaryText);
    }
    .partner-logo {
        width: 9rem;
    }
    .partner-list {
        margin-top: -1.4rem;
    }
    .partner-logo-woolworths, .partner-logo-game {
        display: block;
    }
    section  {
        margin-bottom: 5rem;
    }
    section h1 {
        font-size: 3rem;
    }
    .about-paragraph {
        font-size: 2rem;
        line-height: 2rem;
        width: 50rem;
        margin: auto;
    }

    /*--FEATURE--*/

    .feature {
        display: flex;
        flex-direction: row;
    }
    .feature-middle {
        flex-direction: row-reverse;
    }
    .features h2 {
        font-size: 1.6rem;
    }
    .app-feature {
        display: flex;
        justify-content: center;
        position: relative;
        width: 20rem;
        margin: auto;
    }
    .app-image-bg {
        display: block;
        position: absolute;
        top: 8rem;
        left: -6rem;
        width: 30rem;
    }
    .app-image {
        height: 30rem;
        margin-bottom: 2rem;
    }
    .app-feature-paragraph {
        width: 20rem;
        line-height: 1.8rem;
        margin: 0;
    }
    .feature-num {
        position: absolute;
        top: -1.4rem;
        left: -4rem;
        width: 4rem;
        height: 4rem;
    }
    .feature-num img {
        width: 8rem;
    }
    .feature-num span {
        font-size: 3.5rem;
        position: absolute;
        top: 1.4rem;
        left: 3.7rem;
    }
    .feature-text {
        padding: 2rem;
        border-radius: 1rem;
        box-shadow:  20px 20px 60px #d9d9d9, 
                    -20px -20px 60px #ffffff;
        width: 25rem;
        /* margin: auto    ; */
    }
    .app-feature-heading {
        margin-bottom: 1rem;
    }

    /*--CONTACT--*/
    .contact-section {
        width: 50rem;
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
    }
    .reviews {
        position: relative;
        margin-left: 5rem;
    }
    .reviews::before {
        content: "";
        position: absolute;
        left: -4rem;
        top: -3rem;
        height: 15rem;
        width: .4rem;
        border-radius: 1rem;
        background-color: #11CA44;
        border: .1rem solid #11CA44;
    }

    /*--DOWNLOAD--*/
    .contact-section, .contact {
        margin-bottom: 2rem;
    }
    .download {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: start;
    }
    .download-right {
        display: block;
        position: absolute;
        top: -7rem;
        left: -27rem;
        /* z-index: ; */
    }
    .download-right-bg {
        /* display: block; */
        width: 55rem;
    }
    .download-right-app {
        position: absolute;
        left: 35rem;
        top: 8.7rem;
        object-fit: cover;
        object-position: 100% 0;
      
        width: 13rem;
        height: 13rem;
    }
    .download-left {
        margin-left: -20rem;
        z-index: 100;
    }
    .download-left p {
        text-align: left;
        line-height: 1.2rem;
    }
    .donwload-heading {
        text-align: left;
        font-size: 1.8rem;
        line-height: 1.5rem;
    }
    .donwload-heading {
        position: relative;
        margin-bottom: 2rem;
    }
    .donwload-heading::after {
        content: "";
        display: block;
        width: 2rem;
        position: absolute;
        left: 0;
        border: .2rem solid var(--primary);
        background-color: var(--primary);
        border-radius: 1rem;
        margin: 0.5rem auto;
    }
    /*--FOOTER--*/
    footer {
        padding-top: 12rem;
        margin-top: -10rem;
    }
    .footer-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 2rem;
    }
    .footer-right {
        text-align: right;
    }
}
/*
@media screen and (min-width: 1200px) {
    .container {
        max-width: 1200px;
        margin: 2rem auto;
        padding: 0.5rem auto;
    }
    header {
        display: flex;
        justify-content: space-between;
        flex-flow: wrap;
        align-itrems: center;
    }
    nav {
        margin: 0;
    }
    nav ul {
        margin: 0;
        padding: 0;
        display: flex;
    }
    nav ul li {
        list-style: none;
        padding: 0.5rem 2rem;

    }
    nav ul li a {
        font-size: 1.4rem;
        font-weight: 600;
        text-decoration: none;
    }
    main {
        flex-flow: row;
    }
    .hero {
        text-align: left;
    }
    .hero h1 {
        font-size: 4.5rem;
        margin-top: 5%;
    }
    .hero h1::before {
        display: none;
    }
    .hero h1::after {
        content: "";
        display: block;
        width: 200px;
        border: 2px solid #17B806;
        margin: 20px 0 20px 0;
    }
    .hero h2 {
        font-size: 2.5rem;
    }
    .hero p {
        display: none;
    }
    .appButtons {
        display: flex;
        margin-top: 20px;
        padding: 0px;
        align-itrems: left;
        justify-content: left;
    }
    #apple-download, #android-download {
        width: 211px;
        height: 63px;
        padding: 0px;
        margin-right: 10px;
    }
    figure img {
        margin: 0.5rem auto;
        width: 400px;
        -webkit-transform:rotate(10deg);
        -moz-transform: rotate(10deg);
        -ms-transform: rotate(10deg);
        -o-transform: rotate(10deg);
        transform: rotate(10deg);
    }
    footer {
        width: 100%;
        height: 60px;
        //overflow: hidden;
        background-color: #17B806;
    }
    .logos {
        display: flex;
        justify-content: space-around;
        padding: 10px;
    }

@media screen and (min-width: 2000px) {
    .container {
        max-width: 2200px;
        margin: 5rem auto;
        padding: 0.5rem auto;
    }
    header {
        display: flex;
        justify-content: space-between;
        flex-flow: wrap;
        align-itrems: center;
    }
    nav {
        margin: 0;
    }
    nav ul {
        margin: 0;
        padding: 0;
        display: flex;
    }
    nav ul li {
        list-style: none;
        padding: 0.5rem 2rem;

    }
    nav ul li a {
        font-size: 2rem;
        font-weight: 700;
        text-decoration: none;
    }
    main {
        flex-flow: row;
    }
    .hero {
        text-align: left;
    }
    .hero h1 {
        font-size: 7.5rem;
        margin-top: 5%;
    }
    .hero h1::before {
        display: none;
    }
    .hero h1::after {
        content: "";
        display: block;
        width: 200px;
        border: 2px solid #17B806;
        margin: 20px 0 20px 0;
    }
    .hero h2 {
        font-size: 4rem;
        font-weight: 400;
        color: #A7A7A7;
    }
    .hero p {
        display: none;
    }
    .appButtons {
        display: flex;
        margin-top: 50px;
        padding: 0px;
        align-itrems: left;
        justify-content: left;

    }
    #apple-download, #android-download {
        width: 282px;
        height: 84px;
        padding: 1px;
    }
    figure img {
        margin: 0.5rem auto;
        width: 800px;
        -webkit-transform:rotate(10deg);
        -moz-transform: rotate(10deg);
        -ms-transform: rotate(10deg);
        -o-transform: rotate(10deg);
        transform: rotate(10deg);
    }
} */