body {
  font-family: "Roboto";
  font-size: 62.5%;
  margin:0;
}
.container {
  display: grid;
  grid-template-rows: 1fr 7fr;
  margin : 0 16px;
}

nav {
  display: flex;
  justify-content: space-between;
  padding-left:2%;
 
}

 .nav-items {
  display: flex;
  flex-basis: 50%;
  justify-content: flex-end;
  column-gap: 50px; 
  font-size: 1rem;
}
.nav-items:first-child {
  color:tomato;
}
.active-item {
  color:tomato;
}
.logo {
  width:80px;  
}
.intro-section{
  display: grid;
  grid-template-columns: 1fr 3fr;
  
  padding-left:2%;
}





.main-div {
  background-image: url("../images/backcover.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top right;  
}
.btn {
  background-color: #FF3CAC;
  background-image: linear-gradient(92deg,#c552ee  0%, #be9dda 50%,  #f792cb 100%);  
  font-family: "Roboto";
  border:none;
  border-radius : 16px; 
  color:white;  
}
.signin-btn {
  font-size:1rem;
  /* margin:20px 64px 0 0 ;  */
  margin : 8px 8px 0;
  padding : 8px; 
  width:7rem;
  /* height:12px; */
}
.learn-more-btn {
  font-size:1rem;
  padding : 8px 24px;
  margin-top:8px;

}
.left-section {
  margin-top:4rem;
}
.left-section h1 {
  font-size: 4rem;
  color : #3c2a72;
  font-weight:bold;
}

.left-section h4 {
  color : #afabab;
  line-height: 1.5;
  font-weight:bold;
  font-size:1rem;
}
.imgs-div {
  position:relative;
 
}
.vector-img{
  position :absolute;
  bottom:20%;
  left:5%;
}
.vector-dot {
  position: absolute;
  bottom:32%;
  left:15%;
}
.intro-img {
  width:84%;
}


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

  .intro-section{
    display: flex;    
    padding-left:2%;
  }
  nav {
    padding:16px;
  }
  .nav-items{
    display: flex;   
    justify-content: space-evenly;
    column-gap: 24px; 
    font-size: 0.7rem;
  }
  .left-section h1 {
    font-size:2rem;
  }
  .left-section h4 {
     font-size:0.8rem;
     width:80%;
  }
 
  .vector-img{
    width:20%;
    bottom:10%;
    left:-15%;
  }
  .vector-dot {
    bottom:32%;
    left:-5%;
  }
  
}

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

  .intro-section{
    display: flex;    
    padding-left:2%;
  }
  nav {
    padding:16px;
  }
  .nav-items{
    display: flex;   
    justify-content: space-evenly;
    column-gap: 24px; 
    font-size: 0.8rem;
  }
  .left-section h1 {
    font-size:2.2rem;
  }
  .left-section h4 {
     font-size:1rem;
     width:80%;
  }
 .intro-img {
  width:70%;
 }
  .vector-img{
    width:17%;
    bottom:10%;
    left:-15%;
  }
  .vector-dot {
    bottom:32%;
    left:-5%;
  }

}

@media screen and (max-width:500px) {
  .nav-items{   
    column-gap: 16px; 
    font-size: 0.5rem;
  }
  .left-section{
    margin-top:1rem;
  }
  .left-section h4 {
    font-size:0.8rem;
    width:100%;
    color:#000;
 }
 .intro-section {
  flex-direction: column;
  row-gap: 16px;
  margin:8px;
 }



.signin-btn {
  font-size:0.6rem;
  /* margin:20px 64px 0 0 ;  */
  margin : 4px 4px 0;
  padding : 4px; 
  width:4rem;
  /* height:12px; */
}
nav {
  padding: 16px 8px;
}
.imgs-div {
  margin:40px;
}
}

@media screen and (max-width:400px) {
  .main-div {
    background-image: none;
    
  }

}