@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
   
*,*::before,*::after{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Roboto", sans-serif;
}
header{
    background-color: #1f2937;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding:15px 0;
}

header .logo{
    color:#f9faf8;
    font-size:24px;
    font-weight: bolder;
}

.navigation-bar{
    display: flex;
    gap:25px;
}

.navigation-bar li {
    list-style-type: none;
}

.navigation-bar li a {
    text-decoration: none;
    color:#e5e7eb;
    font-size: 18px;
    font-weight:600;

}

.hero__section{
    background-color: #1f2937;
    color: #e5e7eb;
    padding:70px 0;
}

.hero__content{
    width:65%;
    margin:0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 80px;
}

.hero__content-left{
    max-width:500px;
    display: flex;
    flex-direction: column;
    gap:12px;

}

.hero__text {
   font-weight:900;
   color:#f9faf8;
   font-size:48px;
}

.hero__secondary{
    font-size:18px;
    font-weight:500;
}
.sign-up{
    flex-grow: 0;
    align-self: flex-start;
    background-color: #3882f6;
    border:none;
    padding:.8em 1.3em;
    border-radius:5px;
    color:#e5e7eb;
    font-weight: bold;
}

.sign-up:hover{
    opacity:.5;
    cursor: pointer;
}

.hero__content-right img{
    max-width:100%;
    width:500px;
    border-radius: 10%;
}

.products__section .product__title{
    margin-top:20px;
    text-align: center;
    letter-spacing:1px;
    font-weight: 900;
    font-size: 36px;
    color:#1f2937;
 
}

.product__title::first-letter{
    font-size: 40px;
}

.products{
    margin-top:20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap:40px;
}
.content{
    width: 100px;
    height:100px;
    border:3px solid #3882f6;
    border-radius:5px;
}

.product{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:12px;
}

.goals__section{
    background-color: #e5e7eb;
    padding:50px 0;
    margin-top:12px;
}

.goals__container{
    width:50%;
    margin:0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size:25px;
    font-weight: light;
    
}
.goals__container .goal{
    font-style: italic;

}


.goals__container .author{
    align-self: flex-end  ;
    font-weight: 900;
}



.call_to_action{
    margin-top:12px;
    padding:50px;
    width:60%;
    margin: 0 auto;
}

.call_to_action_container{
    background-color: #3882f6;
    padding:25px;
    border-radius:10px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.left__side .main__text{
    font-weight: bold;
    color:#e5e7eb;
    font-size: 20px;
}

.left__side .secondary__text{
    color:#e5e7eb;
}

.right__side button{
    border:none;
    border:2px solid white;
    background-color: #3882f6;
    color:#e5e7eb;
    padding:.65em;
    border-radius:5px;
    font-weight: bold;
}

footer{
    background-color: #1f2937;
    padding:15px 0;
    display: flex;
    justify-content: center;
    gap:5px;
}
footer p {
    color:#e5e7eb;
    font-weight: 600;
}