/* roboto font  */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

body{
    box-sizing: content-box;
    display: flex;
    flex-direction: column;
    scroll-behavior: smooth;
}

:root{
    --dark_bg:#1F2937;
    --hero_text_size:48px;
    --hero_text_color:#F9FAF8;
    --hero_text_weight:900;
    --hero_logo_text_size:24px;
    --header_link_text_size:18px;
    --header_link_text_color:#E5E7EB;
    --btn_color:#3882F6;
    --info_header_text_size:36px;
    --info_header_text_weight:900;
    --quote_bg_color:#E5E7EB;
    --quote_text_size:36px;
    --quote_text_color:#1F2937;
    --quote_text_weight:300;
}
.header{
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 32px;
    background: var(--dark_bg);
}

.logo{
    font-family: "Roboto", sans-serif;
    font-size: var(--hero_logo_text_size);
    color: var(--hero_text_color);
    font-weight: var(--hero_text_weight);
}
ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    margin: 0;
    gap: 32px;
}

li,a{
    list-style: none;
    text-decoration: none;
    color: var(--header_link_text_color);
    font-family: "Roboto", sans-serif;
    font-size: var(--header_link_text_size);
    
}
.hero{
    background: var(--dark_bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32px;
}

.hook{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    padding: 32px;
}

.hero_header{
    font-size: var(--hero_text_size);
    color: var(--hero_text_color);
    font-family:"Roboto" , sans-serif;
    
}

.hero_subtext{
    font-family: "Roboto", sans-serif;
    color: var(--header_link_text_color);
    font-size: var(--header_link_text_size);
}
.sign_up{
    padding: 16px;
    background:var(--btn_color);
    height: auto;
    width: 100px;
    border-radius:8px;
    text-align: center;
    color: var(--header_link_text_color);
    font-family: "Roboto" , sans-serif;
    font-size: 16px;
}

.img_placeholder{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50vh;
    width: 60vw;
    text-align: center;
    color: #FFFF;
    margin: 32px;
    background:#8a8a8a;
    font-size: var(--header_link_text_size);
    font-family: "Roboto" , sans-serif;
}

.info h1{
    text-align: center;
    font-family: "Roboto" , sans-serif;
    font-size: var(--info_header_text_size);
    color: var(--dark_bg);
    font-weight: var(--info_header_text_weight);
}

.info{
    display: flex;
    flex-direction: column;
    align-items: center;
   
}

.info_cards{
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 16px;
    font-family: "Roboto" , sans-serif;
    text-align: center;
   
}
.info_cards .image{
    height: 150px;
    width: 150px;
    border: 5px solid var(--btn_color);
    border-radius: 10px;
}
.card{
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
    height: 250px;
    width: 250px;
}

.quote{
    background: var(--quote_bg_color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 32px 0px 32px 0px;
}
.main-quote{
    display: flex;
    align-items: center;
    justify-content: center;   
    flex-direction: column;
    width: 60vw;
    height: 60vh;
    
}
.main-quote h1{
    font-family: "Roboto" , sans-serif;
    text-align: left;
    color: var(--quote_text_color);
    font-weight: var(--quote_text_weight);
    font-style: italic;
    font-size: var(--quote_text_size);
}
.credit{
    margin-left:auto ;
    font-family: "Roboto" , sans-serif;
    font-weight: 900;
}

.cta{
    height: auto;
    width: calc(80%);
    background: var(--btn_color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 48px;
    margin: 0 auto 32px;
    gap: 16px;
    border-radius:16px ;
}
.cta_text{
    font-family: "Roboto" , sans-serif;
    color: var(--header_link_text_color);
    
}
.cta_text h1{
    font-size: 32px;
}
.cta_text p{
    font-size: 16px;
}

.cta_btn{
    height: auto;
    width: calc(15%);
    border: 5px solid var(--quote_bg_color);
    text-align: center;
    padding: 8px;
    border-radius: 8px;
    font-family: "Roboto" , sans-serif;
    font-weight: 900;
    color: var(--header_link_text_color);
    font-size: 24px;
}

.footer{
    background: var(--dark_bg);
    padding: 16px;
    text-align: center;
    font-family: "Roboto" , sans-serif;
    color: var(--header_link_text_color);
    font-size: var(--header_link_text_size);
}