@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');


:root{
--Dark-Blue-Email: hsl(217, 28%, 15%);
--Dark-Blue-Main: hsl(218, 28%, 13%);
--Dark-Blue-Footer: hsl(216, 53%, 9%);
--Dark-Blue-Testimonials: hsl(219, 30%, 18%);
--Cyan: hsl(176, 68%, 64%);
--Blue: hsl(198, 60%, 50%);
--Light-Red: hsl(0, 100%, 63%);
--White: hsl(0, 0%, 100%);
}

*, *::before, *::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: "Open Sans", sans-serif;
    font-size: 0.875em;
    color: var(--White);
    background: var(--Dark-Blue-Main);
    

}

main{
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    background: var(--Dark-Blue-Main);
}

section{
    text-align: center;
    padding: 1.8em 0;
}

li{
    list-style-type: none;
}

a{
    text-decoration: none;
    color: var(--White);
}

h1, h3{
    font-family: "Raleway", sans-serif;
    font-weight:  700;
}

h1{
    font-size: 2.5rem;
}

p{
    line-height: 1.5;
}

img{
    max-width: 100%;
}
nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px;
    margin: 0 auto;
   
}

nav .menu{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
    font-family: "Raleway", sans-serif;
    

}

.header-logo{
    width: 100px;
}

.cta{
    background: var(--Blue);
    font-family: "Raleway", sans-serif;
    font-weight: 400;
    color: var(--White);
    border-radius: 50px;
    cursor: pointer;
    padding: 10px 50px;
    border: none;
}


.hero h1{
    margin-top: 20px;
}

.hero p{
    padding: 20px 0;
    max-width: 440px;
    margin: 0 auto;
    
}

.features{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 100px;
    margin-top: 50px;
    padding: 0 200px;

   
}

.features .card{
    max-width: 400px;
    width: 100%;
    margin: auto;
    padding: 0 20px;

}



.features .card h3{
    margin: 10px 0;
}

.productive{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
    margin-top: 50px;
    text-align: start;
    padding: 0 100px;
}

.productive p{
    max-width: 500px;
    padding-top: 20px;
}

.link a{
    padding-bottom: 3px;
    border-bottom: 2px solid var(--Cyan);
    
}

.testimonials{
    text-align: start;
    padding: 120px ;
    position: relative;
    

}

.testimonials-cards{
    display: flex;
    gap: 50px;
    margin-top: 50px;
    text-align: start;
    position: absolute;
    top: 105px;
    right: 120px;
    left: 130px;
    
  

}


.founder-content{
    background: var(--Dark-Blue-Testimonials);
    padding: 40px 30px 30px;
    border-radius: 5px;
    box-shadow: 10px 4px 6px rgba(36, 46, 46, 0.5);
   
}

.founder-profile{
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.founder-content img{
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 50%;
}

.founder-content .small{
    font-size: 0.4em;
}

.early-access{
    background: var(--Dark-Blue-Email);
    margin: 200px auto -100px;
    max-width: 800px;
    position: relative;
    padding: 30px 90px;
    
   

}

.early-access p{
    margin: 20px 0;
}

form{
    display: flex;
    gap: 30px;
}

input[type="email"]{
    padding: 20px 20px;
    width: 400px;
    height: 30px;
    border-radius: 50px;
}

.cta-early{
    padding: 10px 20px;
}

footer{
    background: var(--Dark-Blue-Footer);
    display: flex;
    flex-direction: column;
    padding: 150px 100px 50px;
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    
    
    
}

.footer-logo{
    width: 100px
}

.footer-content{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    
}

.footer-location{
    display: flex;
    gap: 20px;
    
}

.footer-location img{
    width: 15px;
    height: 25px;
}

.footer-location p{
    max-width: 300px;
}

.footer-contact{
    display: flex;
    gap: 20px;
}

.footer-contact img{
    width: 20px;
    height: 20px;

}

.footer-item li, .footer-item p{
    padding-bottom: 20px;

}

.icons{
    display: flex;
    gap: 20px;
    filter: invert(100%);

}

.icons img{
    width: 25px;
    height: 25px;
   
}

.attribution {
    font-size: 11px;
    text-align: center;
  }
  .attribution a {
    color: hsl(228, 45%, 44%);
  }

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

    h3{
        font-size: 1.8rem;
    }

    p{
        font-size: 1.4rem;
    }

    .none{
        display: none;
    }
    .features{
        grid-template-columns: 1fr;
        padding: 0 10px;
        
    }

    .features .card{
        padding: 0 10px;
        max-width: 500px;
        width: 100%;
    
       
    }

    .productive{
        flex-direction: column;
        padding: 20px
    }

    .testimonials-cards{
        flex-direction: column;
    }

    .early-access{
        margin: 1000px auto -100px;
        max-width: 700px;
        padding: 30px 50px;

    }

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

    input[type="email"]{
        padding: 40px 40px;
        width: 100%;
        height: 30px;
        border-radius: 50px;
    }

    .cta-early{
        width: 100%;
        padding: 40px 40px;
    }

    .footer-content{
        flex-direction: column;
        gap: 50px;
    }

    .footer-item a{
        font-size: 1.4em;
    }

    .icons{
        margin: 50px auto;
    }

    .attribution a{
        font-size: 1.2em;
        color: var(--Cyan)
    }
 }

 @media  screen and (min-width: 300px) and (max-width: 600px) {

    h1{
        font-size: 1.8em;
    }

    h3{
        font-size: 1.4em;
    }

    p{
        font-size: 1.2em;
    }

    nav{
        padding: 30px;
    }

    nav .menu{
        gap: 10px;
    }

    .testimonials{
        padding: 50px;
    }

    .testimonials-cards{
        right: 50px;
        left: 50px;
        top: 30px
    }

    .founder-content{
        padding: 20px 12px; 
    }

    .early-access{
        margin: 750px auto -100px;
        max-width: 350px;
        padding: 30px 20px;
    }

    input[type="email"]{
        padding: 20px 20px;
        width: 100%;
        height: 30px;
        border-radius: 50px;
    }

    .cta-early{
        width: 100%;
        padding: 15px 20px;
    }

    footer{
        padding: 150px 20px 30px;
    }
    
 }