:root{
--Light-Grayish-Blue: hsl(240, 75%, 98%);
--Light-Gray: hsl(0, 0%, 75%);
--Bright-Blue: hsl(224, 93%, 58%);
--Moderate-Cyan: hsl(170, 45%, 43%);
--Very-Dark-Blue: hsl(243, 87%, 12%);
--desaturated-Blue: hsl(238, 22%, 44%);

--font-1: 'Open Sans', sans-serif;
--font-2: 'Raleway', sans-serif;

--padding-container:90px 0;
}

*{
    margin: 0;
    box-sizing: border-box;
}

body{
    font-family: var(--font-1);
}

.container{
    width: 90%;
    max-width: 1200px;
    overflow: hidden;
    margin: 0 auto;
    padding: var(--padding-container);
}

.nav{
    display: flex;
    align-items: center;
    gap: 1.1em;
    --padding-container:40px 0;
}

.nav__logo{
    width: 110px;
}

.nav__img{
    width: 90%;
    display: block;
}

.nav__link:first-of-type{
    margin-left: auto;
}

.nav__link{
    text-decoration: none;
    color: var(--desaturated-Blue);
    font-family: var(--font-2);
}

.hero{
    position: relative;
    --padding-container:90px 0 170px;
}

.hero::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100px;
    background-image: url('../images/bg-curve-mobile.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    left: 0;
    bottom: 0;
}

.hero__img{
    width: 100%;
    display: block;
    max-width: 400px;
    margin: 0 auto;
}

.hero__info{
    text-align: center;
    color: var(--Very-Dark-Blue);
}

.hero__title{
    font-size: 1.7rem;
    font-family: var(--font-2);
    margin-top: 1.8em;
}

.hero__paragraph{
    line-height: 1.5;
    margin: 1.5em 0;
}

.hero__input{
    height: 45px;
    border-radius: 6px;
    width: 100%;
    font: inherit;
    border: 1px solid var(--Very-Dark-Blue);
    padding: 0 20px;
    font-family: var(--font-2);
}

.hero__input--cta{
    background-color: var(--Bright-Blue);
    color: #fff;
    border: none;
    font-weight: 700;
    margin-top: 1.2em;
    cursor: pointer;
}

.hero__input--cta:hover{
    opacity: 0.7; 
}

/*productive*/

.productive{
    background-color: var(--Light-Grayish-Blue);
    --padding-container: 30px 0 90px;
}

.productive__img{
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    display: block;
}

.productive__main{
    margin-top: 6em;
}

.productive__title{
    font-size: 1.1rem;
    text-align: center;
    color: var(--Very-Dark-Blue);
    font-family: var(--font-2);
}

.productive__paragraph{
    color: var(--desaturated-Blue);
    line-height: 1.5em;
    margin-top: 1.5em;
    margin-bottom: 1.2em;
}

.productive__paragraph:last-of-type{
    margin: 0;
}

.productive__cta{
    display: block;
    width: max-content;
    margin: 2em auto 3em;
    text-decoration: none;

    color: var(--Moderate-Cyan);
    border-bottom: 2px solid;
    padding-bottom: 4px;
}

.productive__cta:hover{
    opacity: 0.5;
}

.productive__arrow{
    vertical-align: middle;
}

.productive__testimony{
    width: 95%;
    max-width: 350px;
    margin: 0 auto;
    background-color: #fff;
    padding: 2em 1.5em;
    border-radius: 1em;
    box-shadow: 0 0 10px -5px rgb(0, 0, 0,.5);
}

.productive__quote{
    width: 25px;
}

.productive__review{
    margin: .5em 0 1.5em;
    color: var(--Very-Dark-Blue);
    line-height: 1.5;
}

.productive__card{
    display: flex;
    align-items: center;
}

.productive__person{
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
    margin-right: 1em;
}

.newsletter{
    background-color: var(--desaturated-Blue);
    color: #fff;
    text-align: center;
}

.newsletter__title{
    font-family: var(--font-2);
}

.newsletter_paragraph{
    line-height: 1.5;
    margin-top: 1.2em;
}

.newsletter__form{
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.newsletter__input{
    padding: 1em .5em;
    font: inherit;
    font-family: var(--font-2);
    border-radius: 3px;
    border: none;
    box-shadow: 0 0 4px rgb(0, 0, 0, .3);
}

.newsletter__submit{
    color: #fff;
    background-color: var(--Bright-Blue);
    padding: 1em .5em;
    font: inherit;
    font-family: var(--font-2);
    border-radius: 3px;
    border: none;
    cursor: pointer;
}

.newsletter__submit:hover{
    opacity: 0.7;
}
.footer{
    background-color: var(--Very-Dark-Blue);
    color: #fff;
}

.footer__container{
    display: flex;
    flex-direction: column;
    gap: 3em;
}

.footer__logo{
    display: block;
}

.footer__icon{
    vertical-align: middle;
    margin-right: .5em;
}

.footer__info{
    font-size: 1.2rem;
}

.footer__nav{
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.footer__link{
    text-decoration: none;
    color: #fff;
    font-family: var(--font-2);
}

.footer__link:hover{
    color: var(--Bright-Blue);
}

.footer__social{
    display: flex;
    width: max-content;
    margin: 0 auto;
    gap: 1.5em;
}

.footer__media{
    border: 1px solid #fff;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    text-decoration: none;
    display: flex;
}

.footer__img{
    width: 20px;
    height: 20px;
    margin: auto;
}

@media (min-width:768px){
    .hero{
        --padding-container:90px 0 200px;
    }
    
    .hero::before{
        background-image: url('../images/bg-curve-desktop.svg');
    }

    .hero__main{
        display: flex;
        align-items: center;
        gap: 1.5em;
    }
    
    .hero__img{
        max-width: none;
    }
    
    .hero__info{
        order: -1;
        text-align: left;
    }
    
    .hero__title{
        font-size: 2.3rem;
        margin-top: 0;
    }
    
    .hero__contact{
        display: flex;
        gap: 1em;
    }
    
    .hero__input{
        min-width: 160px;
        flex-grow: 1;
    }
    
    .hero__input--cta{
        margin-top: 0;
        flex-grow: 0;
        width: 160px;
    }

    /*productive*/

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

    .productive__picture{
        width: 45%;
        order: 1;
    }

    .productive__img{
        max-width: none;
    }
    
    .productive__main{
        margin-top: 0;
        width: 52%;
    }
    
    .productive__title{
        font-size: 2.1rem;
        text-align: left;
    }
    
    .productive__cta{
        margin: 2em 0 3em;
    }
    
    .productive__testimony{
        max-width: 420px;
        margin: 2px;     
    }

    /*newsletter*/
    .newsletter__container{
        display: flex;
        justify-content: space-between;
        text-align: left;
    }

    .newsletter__texts{
        width: 48%;
        max-width: 450px;
    }
    
    .mewletter__title{
        font-size: 1.7rem;
    }
    
    .newsletter__form{
        width: 45%;
        margin: 0;
        max-width: 500px;
        flex-wrap: wrap;
    }
    
    .newsletter__input{
        width: 100%;
    }
    
    .newsletter__submit{
        width: max-content;
        padding: 1em 2em;
    }
    
    .footer__container{
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-between;
    }

    .footer__picture{
        width: 100%;
    }
    
    .footer__contact{
        width: 25%;
        display: flex;
        flex-direction: column;
        gap: 1em;
    }

    .footer__social{
        margin: 0;
    }
    
}