*{margin: 0; padding: 0; font-family: 'Rubik', sans-serif; }

header{
    width: 100;
    height: 100vh;
    background-image: linear-gradient(to left, #fff 80%,#c3f5ff 20%);
    
}



.navsection{
    width: 100;
    height: 20vh;
    background-color: yellow;
    display: flex; justify-content: space-around; 
    align-items: center;
    background-image: linear-gradient(to left, #fff 85%,#c3f5ff 20%);   
}

.logo{
    width: 40%;
    color: #fff;
    background-image: linear-gradient(#8d98e3 40%, #854fee 60%);
    padding-left: 100px;
    box-sizing: border-box;

}

.logo{
    text-transform: uppercase;
    font-size: 1.6rem;
    animation: aagepichhe 2s linear infinite;
    animation-direction: alternate;
}
@keyframes aagepichhe{
    from{ padding-left: 40px;}
    to{padding-right: 40px;}
}
 nav{
     width: 60%;
     
     display: flex;
     justify-content: space-around;


}
 nav a{
     text-decoration: none;
     text-transform: uppercase;
     color: #000;
     font-weight: 900;
     font-size: 17px;
     position: relative;

 }
  nav a:first-child{
      color: #4458dc;
  }

  nav a:before{
      content: "";
      position: absolute;
      top: 110%;
      left: 0;
      width: 0;
      height: 2px;
      border-bottom: 2xp solid #4458dc;
      transition: all 0.4s linear;
  }
  nav a:hover::before{
      width: 100%;

  }

  main{
      height: 80vh;
      display: flex;
      justify-content: space-around;
      align-items: center;
  }
  .rightside{
      border-radius: 10% 10% 0% 0% / 10% 29% 10% 13% ;
      background: rgb(212, 212, 98);

  }
.rightside img{
    max-width: 500px;
    height: auto;
}
.leftside{
    color: #000;
    text-transform: uppercase;
}
.leftside h3{
    font-size: 40px;
    margin-bottom: 20px;
    position: relative;
}

.leftside h3:after{
    content: "";
    width: 450;
    height: 3px;
    position: absolute;
    top: 43%;
    left: 24.6%;
    background: #000;
}
.leftsideh1{
    margin-top: 20px;
    font-size: 70px;
    margin-bottom: 25px;
}.leftside h2{
    margin-bottom: 35px;
    font-weight: 100;
    word-spacing: 4px;
}
.leftside .btn1{
  
    color: #fff;
    background-image: linear-gradient(to right,#4458dc 0%,#854fee 100%),radial-gradient(circle at top left,#4458dc,#854fee);
    border: double 2px transparent;
    box-shadow: 0 10px 30px rgba(188, 85, 225, .3);
}
.leftside .btn1 , .btn2{
    text-decoration: none;
    font-weight: 900;
    text-align: center;
    padding: 12px 25px;
    cursor: pointer;
    text-transform: uppercase;
    border-radius: 5px;
    display: inline-block;
    margin-right: 50px;

}

.leftside .btn2{
    border: 2px solid #4458dc;
    color: #222;
    background-color: #fff;
    box-shadow: none;
}
.leftside .btn1:hover{
    border: 2px solid #4458dc;
    box-shadow: none;
    background-image: none;
}