@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,100&family=Roboto:ital,wght@0,500;0,700;1,300;1,400;1,500&display=swap');


*{ 
margin: 0; 
padding: 0; 
box-sizing: border-box ;  
font-family: 'Poppins', sans-serif;
font-family: 'Roboto', sans-serif; 
font-size: 14px; 
font-weight: 500px;

}


.banner-wrap{  
background-image: url(./assets/banner.avif);
height: 100vh; 
width: 100vw; 
background-repeat: no-repeat; 
background-position: center; 
background-size: cover; 
 } 

nav{ 
 display: flex; 
 justify-content: space-between;
height: 56px;  
align-items: center; 
padding: 0px 32px; 
}
.nav-item{ 
    padding: 5px 15px; 
    cursor: pointer; 
    
} 

.nav-item:hover{ 

    background-color:lightgray; 
    border-top-left-radius:9999px ; 
    border-top-right-radius: 9999px; 
    border-bottom-left-radius:9999px ; 
    border-bottom-right-radius: 9999px ;
}

  

.logo{ 
height: 24px; 
width: 120px;  
cursor: pointer; 
 
}  
.logo:hover{ 
    background-color: lightgray;
}
main{ 
    text-align: center;  
    height:calc(100vh - 56px) ;  
    display: flex; 
    flex-direction: column; 
    justify-content: space-between;
}

.title-section{ 
   margin-top: calc(155px- 56px);  

}
.actions{ 
    margin-bottom: 100px;
} 

h1{ 
    font-size: 40px; 
    font-weight: 500;
}

p{ 
    font-weight: 400px; 
    font-size: 14px; 
    padding: 6px 24px 16px 24px;
}

.actions{ 
margin-bottom: 100px;
} 
button {  
cursor: pointer; 
border-top-left-radius:9999px ; 
border-top-right-radius: 9999px;  
border-bottom-left-radius:9999px ; 
border-bottom-right-radius: 9999px ;
margin: 0; 
margin-right: 15px;
height: 49px;
padding: 0;
border: none; 
background: none; 
background-color: gray;
width: 264px; 
padding: 7px 27px  

 } 
 .btn-dark{ 
background-color: #191d21; 
color: white;
 } 
 .btn-light{ 
background-color: #e4e4e2; 
color: #191d21;
 }