/* ----------------------------------------------- */
/* SECTION 1 */
/* ----------------------------------------------- */

.sec1 {
    grid-area: "sec1";
    padding: 5vh 5vw;

    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.8)), to(rgba(0, 0, 0, 0.8))), url(../img/hero.jpg);

    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(../img/hero4.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    height: 90vh;

    display: grid;
    grid-template-rows: auto 2fr 1fr;
    grid-gap: 1rem;
}

    .header{
        grid-row: 1 / 2;
        
        display: grid;
        grid-template-columns: auto 1fr 2fr;
        grid-template-rows: auto;
        grid-template-areas: "logo-img" "logo-name" "links";
    }

        .logo-img {
            grid-area: "logo-img";
            grid-column: 1 / 2;
            grid-row: 1 / 1;
        }

        .logo-name {
            grid-area: "logo-name";
            grid-column: 2 / span 2;
            grid-row: 1 / 1;
        }

        .links{
            grid-area: "links";
            grid-column: 3 / 4;
            grid-row: 1 / 1;
        }

    .sec1-text{
        grid-row: 2 / 3;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        
        display: grid;
        grid-template-columns: 70%;
        grid-template-rows: 1fr auto;
        grid-template-areas: "text" "buttons";
        grid-row-gap: 5%;
    }

        .text{
            grid-area: "text";
        }

        .buttons{
            grid-area: "buttons";
        }

 

/* ----------------------------------------------- */
/* ABOUT */
/* ----------------------------------------------- */

.about {
    grid-area: about;
    padding: 5vh 25vw;
   
    background-color: #fff;
    height: 90vh;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-gap: 2rem;
}

    .about-title {
        grid-row: 1 / 1;
    }

    .about-photo-text {
        grid-row: 2 / 2;
    }


/* ----------------------------------------------- */
/* HOW IT WORKS */
/* ----------------------------------------------- */
 
.howitworks{
    grid-area: howitworks;
    padding: 5vh 15vw;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
   
    background-color: #fef7ea;
    height: 90vh;

    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto;
    grid-gap: 2rem;
}

    .howitworks-title {
        grid-column: 1/ span2;
    }

    .howitworks-img {
        grid-column: 1/ 2;
    }

    .howitworks-text {
        grid-column: 2/ 2;
            
        display:grid;
        grid-template-areas: "A1" "B1"
                             "A2" "B2"
                             "A3" "B3";
        grid-template-columns: auto 1fr;
        grid-template-rows: auto;
        grid-gap: 1rem;
    }

        .howitworks-text1{
            grid-area: "A1";
        }

        .howitworks-text2{
            grid-area: "B1";
        }

        .howitworks-text3{
            grid-area: "A2";
        }

        .howitworks-text4{
            grid-area: "B2";
        }

        .howitworks-text5{
            grid-area: "A3";
        }

        .howitworks-text6{
            grid-area: "B3";
        }

    
/* ----------------------------------------------- */
/* SIGN UP */
/* ----------------------------------------------- */
 
.signup {
    grid-area: signup;
    padding: 5vh 12vw;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
   
    background-color: #fff;
    height: 90vh;
    width: 76vw;

    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto 1fr;
    grid-row-gap: 5vh;
}

    .signup-title {
        grid-column: 1 / span 3;
        grid-row: 1 / 1;
    }

    .signup-card{
        grid-row: 2 / 2;
    }



/* ----------------------------------------------- */
/* FOOTER */
/* ----------------------------------------------- */