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

html{
    font-size: 62.5%;
    font-family: 'Roboto',sans-serif;
}
:root{
    --primary: #3E4794;

}

nav{
    display:flex;
    justify-content:space-between;
    align-items: center;
    flex-direction: row;
    font-size: 2.5rem;
    padding: 3rem;
    z-index: 2;
    color: var(--primary);

}

.signin-btn{
    z-index: 2;
    padding: 1.5rem 3.5rem;
    background-color: #3E4794;
    border: none;
    border-radius: 2rem;
    margin-right: 15rem;
    color: #fff;
    background: rgb(150,92,242);
    background: linear-gradient(90deg, rgba(150,92,242,1) 32%, rgba(255,138,220,1) 100%);
}

.nav-items{
    display:flex;
    justify-content:center;
    align-items: center;
    gap: 4rem;
    z-index: 2;


}
.signin-btn,.learn-more-btn:hover{
    cursor: pointer;
    
}

.nav-item:hover{
  
   cursor: pointer;
   text-decoration: underline;
   text-underline-offset: 10px;

} 


/* ////////////////////////////////

     
        HERO SECTION


//////////////////////////////
*/

.intro-section{
    display:flex;
    justify-content:space-around;
    align-items: center;
    width: 100%;
    height: 70vh;
    

    /* position: relative; */
}

.left-section{
    display:flex;
    justify-content:first baseline;
  align-items: baseline;
    flex-direction: column;
    /* text-align: start; */
    gap: 5rem;
    width: 40%;
    position: absolute;
    left: 0;
    top: 35%;
    padding: 3rem;


}

.left-section h1{
    font-size: 8rem;
  
    color: var(--primary);
}
.left-section h4{
    font-size: 2rem;
    font-weight: 100;
    width: 90%;
    line-height: 1.9;
    color: #758283;

}

.learn-more-btn{
    padding:2.5rem 6rem;
    border: none;
    background-color:black;
    border-radius: 4rem;
    color:#fff;
    font-size: 2rem;
 
}

.imgs-div{
background-image: url('../images/backcover.svg');
position: absolute;
background-size: cover;
top: 0;
right: 0;
width: 62%;

}

.main-img{
    width: 100%;
    margin-top: 8rem;
 
}

.vector-img

{
    position: absolute;
    bottom: 17%;
 
}

.vector-dot{
    position: absolute;
    
    bottom: 23%;
    left: 10%;
}