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

html {
    font-size: 62.5%;
}

body {
    font-family: 'Open Sans', sans-serif;
    width: 100%;
    background-color: hsl(217, 28%, 15%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    background: hsl(216, 53%, 7%);
    color: hsl(0, 0%, 100%);
    padding:0 10rem;
}

/* Styles for general headings font-family */

.h {
    font-family: 'Raleway', sans-serif;
}

header {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 2.5rem 0;
    font-family: 'Raleway', sans-serif;
}

header .brand-logo img {
    width: 10rem;
}

header .nav-links  {
    display: flex;
    align-items: center;
}

header .nav-links .nav-link {
    list-style: none;
    margin: 0 1rem;
    font-size: 1.4rem;
}

header .nav-links .nav-link a {
    text-decoration: none;
    color:hsl(0, 0%, 100%);
    opacity: .7;
    transition: .4s;
}

header .nav-links .nav-link a:hover {
    opacity: 1;
}

main {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-bottom: 6rem;
    width: 100%;
    max-width: 600px;
}

main .main-illustration {
    width: 100%;
    height: 58vh;
    min-height: 200px;
}

main .main-illustration img {
    width: 100%;
    height: 100%;
}


main h1 {
    margin: 2rem 0;
    width: 100%;
    max-width: 500px;
    font-size: 3.5rem;
    text-align: center;
}

main p {
    width: 100%;
    max-width: 350px;
    font-size: 1.4rem;
    text-align: center;
    opacity: .7;
}

main button {
    margin: 20px 0;
    padding: 1.4rem 8rem;
    border-radius: 5rem;
    background: linear-gradient(90deg, hsl(176, 68%, 64%) 0%, hsl(198, 60%, 50%) 70%);
    color:hsl(0, 0%, 100%);
    font-weight: 300;
    font-size: 1.4rem;
    cursor: pointer;
    transition: all .7s;
    border: none;
}

main button:hover {
    background: linear-gradient(90deg, hsl(177, 67%, 65%) 0%, hsl(177, 67%, 70%) 70%);
}

.services {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 80rem;
    align-items: center;
    gap: 4rem;
    margin-bottom: 6rem;
}

.service {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-basis: 38rem;
    text-align: center;
}

.service img {
    width: 10rem;
    margin-bottom: 2rem; 
}

.service h3 {
    margin: 1.2rem 0;
    font-size: 1.6rem;
}

.service p {
    font-size: 1.3rem;
    opacity: .7;
    width: 80%;
}

.stay-productive {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5rem;
    margin: 5rem 0;
    width: 100%;
    max-width: 120rem;
}

.stay-productive .illustration {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.stay-productive .illustration img {
    width: 100%;
}

.stay-productive .content h1 {
    margin: 1.5rem 0;
    width: 70%;
    font-size: 3.2rem;
    line-height: 3.8rem;
} 

.stay-productive .content p {
    opacity: .7;
    width: 110% ;
    margin: 1.5rem 0;
    font-size: 1.4rem;
}

.stay-productive .content a {
    text-decoration: none;
    color: hsl(176, 68%, 64%);
    border-bottom: 1px solid hsl(176, 68%, 64%);
    display: flex;
    align-items: center;
    font-size: 1.4rem;
    text-align: left;
    width:fit-content;
    padding-bottom: 2px;
    transition: all .5s;
}


.stay-productive .content a:hover {
    color:hsl(0, 0%, 100%);
    border-bottom: 1px solid hsl(0, 0%, 100%);
}

.stay-productive .content a img {
    margin-left: .5rem;
}

.testimonials {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-image: url('./images/bg-quotes.png');
    background-repeat: no-repeat;
    background-position: top 0, left 0;
    background-size: 4rem 4rem;
    padding: 3.4rem 0;
}

.testimonials .testimonial-card {
    flex-basis: 35rem;
    flex-grow: 1;
    flex-shrink: 1;
    max-width: 40rem;
    margin:0 4rem 4rem 0;
    border-radius: 4px;
    padding: 2.5rem 1.8rem;
    background-color: hsl(219, 30%, 18%);
}

.testimonials .testimonial-card>p {
    opacity: .7;
    font-size: 1.4rem;
    margin-bottom: 3rem;
    width: 100%;
}

.testimonials .testimonial-card .profile {
    display: flex; align-items: center;
}

.testimonials .testimonial-card .profile img{
    border-radius: 50%;
    width: 3.5rem;
}

.testimonials .testimonial-card .profile div {
    display: flex;
    flex-direction: column;
    margin-left: .8rem;
    opacity: .7;
    font-size: 1.1rem;
}

.testimonials .testimonial-card .profile div small{
    opacity: .5;
    font-size: .9rem;
}

.early-access {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    background-color: hsl(217, 28%, 15%);
    padding: 4rem;
    border-radius: 5px;transform: translateY(50%);
}

.early-access h1 {
    font-size: 2.4rem;
}

.early-access p {
    opacity: .7;
    margin-top: 2rem;
    width: 80%;
    font-size: 1.4rem;
}

.early-access form {
    width: 80%;
    margin-top: 3rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.early-access .input-field {
    width: 60%;
}

.early-access .input-field input {
    width: 100%;
    outline: none;
    padding: 1.4rem 3rem;
    border-radius: 5rem;
    background: hsl(0, 0%, 85%);
    font-weight: 300;
    font-size: 1.4rem;
    cursor: pointer;
    transition: all .7s;
    border: none;
}

.early-access .input-field small {
    font-size: .9rem;
    color: hsl(0, 100%, 63%);
    margin-top: .5rem;
    margin-left: 2.5rem;
    display: block;
    text-align: left;
}

.early-access form button {
    padding: 1.4rem 5rem;
    border-radius: 5rem;
    background: linear-gradient(90deg, hsl(176, 68%, 64%) 0%, hsl(198, 60%, 50%) 70%);
    color:hsl(0, 0%, 100%);
    font-weight: 300;
    font-size: 1.4rem;
    cursor: pointer;
    transition: all .7s;
    border: none;
}

.early-access form button:hover {
    background: linear-gradient(90deg, hsl(177, 67%, 65%) 0%, hsl(177, 67%, 70%) 70%);
}

footer {
    background-color: hsl(216, 53%, 9%);
    width: 100%;
    color: hsl(0, 0%, 100%);
    padding: 19rem 10rem 4rem 10rem; 
    display: flex;
    flex-direction: column;
}

.footer-header img {
    width: 15rem;
    margin-bottom: 3rem;
}

.footer-body {
    display: flex;
    flex-wrap: wrap;
    gap: 8rem;
}

.footer-body .footer-body-content {
    flex: 1;
    font-size: 1.4rem;
}

.footer-body .footer-body-content:nth-child(1) {
    display: flex;
    justify-content: start;
    align-items: flex-start;
    flex: 3;
}

.footer-body .footer-body-content img {
    width: 1.2rem;
    margin-right: 1.2rem;
}

.footer-body .footer-body-content ul {
    padding: 0;
}

.footer-body .footer-body-content ul li {
    list-style: none;
    margin: 1rem 0;
    opacity: .7;
    transition: .5s;
    cursor: pointer;
}

.footer-body .footer-body-content ul li:hover {
    opacity: 1;
}

.footer-body .footer-body-content:nth-child(2) {
    flex: 2 ;
}


.footer-body .footer-body-content:nth-child(2) p {
    margin: .7rem 0; 
}

.footer-body .footer-body-content:last-child {
    flex: 2;

}


.footer-body .footer-body-content:last-child a {
    text-decoration: none;
    border-radius: 50%;
    padding: 5px 8px;
    margin: 0 .6rem;
    border: 1px solid hsl(0, 0%, 100%);
    color:hsl(0, 0%, 100%);
    transition: all .4s ease;
}

.footer-body .footer-body-content:last-child a:hover {
    border: 1px solid hsl(177, 67%, 65%);
    color:hsl(177, 67%, 65%)
}

.attribution { font-size: 11px; text-align: center; background-color: hsl(216, 53%, 9%); width: 100%; color: #fff; padding: 2rem;}
.attribution a { color: hsl(228, 45%, 44%); }

@media screen and (max-width: 768px) {
    .container {
        padding: 0 4rem;
        background: hsl(216, 53%, 7%);
    }

    main .main-illustration {
        height: 43rem;
    }

    main h1 {
        font-size: 2.8rem;
    }

    .services {
        justify-content: center;
    }
    .stay-productive {
        flex-direction: column;
        height: auto;
        margin: 7rem 0;
    }

    .stay-productive .illustration {
        width: 100%;
    }

    .stay-productive .content>p {
        width: 90%;
    } 

    footer {
        padding: 28rem 4rem 4rem 4rem; 
    }
    .footer-body {
        flex-direction: column;
        gap: 2rem;
    }

    .footer-body .footer-body-content:nth-child(3),
    .footer-body .footer-body-content:nth-child(4) {
        margin-top: 3.6rem;
    }
    
    .footer-body .footer-body-content:nth-child(5) {
        margin-top: 5rem;
        margin-bottom: 1.5rem;
        text-align: center;
    }
}

@media screen and (max-width: 998px) {
    .footer-body{
        gap: 3rem;
    }
}

@media screen and (max-width: 870px) {
    .footer-body{
        gap: 2rem;
    }

    .early-access form {
        flex-direction: column;
        align-items: center;
    }

    .early-access .input-field {
        width: 100%;
        margin-bottom: 1.4rem;
    }
}


@media screen and (max-width: 375px) {
    .container {
        padding: 0 2.5rem;
    }
    
    header .brand-logo img {
        width: 5rem;
    }

    header .nav-links .nav-link {
        margin: 0 .7rem;
    }

    main .main-illustration {
        height: 25vh;
        margin: 3rem 0;
    }

    .service {
        flex-basis: 100%;
    }

    .service img{
        width: 7rem;
    }
    .stay-productive .content>p {
        width: 100%;
    } 

    .early-access p {
        width: 100%;
    }
    .early-access form button, .early-access .input-field input {
        padding: 1rem 1.5rem;
        font-size: .7rem;
        width: 100%;
    }

    .stay-productive .content h1 {
        width: 100%;
    }
    .attribution { font-size: 8px; text-align: center; background-color: hsl(216, 53%, 9%); width: 100%; color: #fff; padding: 2rem;}
}