/* Given below is Google Fonts CDN link */
@font-face {
   font-family: 'Google Sans';
   src: url('fonts/GoogleSansRegular.eot');
   src: url('fonts/GoogleSansRegular.eot') format('embedded-opentype'), url('fonts/GoogleSansRegular.woff2') format('woff2'), url('fonts/GoogleSansRegular.woff') format('woff'), url('fonts/GoogleSansRegular.ttf') format('truetype'), url('fonts/GoogleSansRegular.svg#GoogleSansRegular') format('svg');
   font-weight: normal;
 }
 
 @font-face {
   font-family: 'Google Sans';
   src: url('fonts/GoogleSansItalic.eot');
   src: url('fonts/GoogleSansItalic.eot') format('embedded-opentype'), url('fonts/GoogleSansItalic.woff2') format('woff2'), url('fonts/GoogleSansItalic.woff') format('woff'), url('fonts/GoogleSansItalic.ttf') format('truetype'), url('fonts/GoogleSansItalic.svg#GoogleSansItalic') format('svg');
   font-weight: normal;
   font-style: italic;
 }
 
 @font-face {
   font-family: 'Google Sans';
   src: url('fonts/GoogleSansMedium.eot');
   src: url('fonts/GoogleSansMedium.eot') format('embedded-opentype'), url('fonts/GoogleSansMedium.woff2') format('woff2'), url('fonts/GoogleSansMedium.woff') format('woff'), url('fonts/GoogleSansMedium.ttf') format('truetype'), url('fonts/GoogleSansMedium.svg#GoogleSansMedium') format('svg');
   font-weight: 500;
 }
 
 @font-face {
   font-family: 'Google Sans';
   src: url('fonts/GoogleSansBold.eot');
   src: url('fonts/GoogleSansBold.eot') format('embedded-opentype'), url('fonts/GoogleSansBold.woff2') format('woff2'), url('fonts/GoogleSansBold.woff') format('woff'), url('fonts/GoogleSansBold.ttf') format('truetype'), url('fonts/GoogleSansBold.svg#GoogleSansBold') format('svg');
   font-weight: bold;
 }
@import url('https:/fonts.googleapis.com/css2?family=Google Sans:wght@400;600;900&display=swap');
*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Google Sans', sans-serif;
}
body{
   overflow: hidden;
}
.container{
   width: 100%;
   min-height: 100vh;
   background-color: #f3f5f8;
}
nav{
   display: flex;
   width: 100%;
   justify-content: space-around;
   height: 80px;
   line-height: 80px;
   z-index: 111;
}
.logo{
   display: flex;
   font-size: 40px;
   font-weight: 800;
   color: #3d535f;
   letter-spacing: 3px;
   cursor: pointer;
   text-transform: uppercase;
}
b{
   font-size: 70px;
   color: #0165eb;
}
.navItems{
   display: flex;
}
.navItems li{
   list-style: none;
   margin: 0 15px;
}
.navItems li a{
   font-size: 25px;
   color: #3d535f;
   letter-spacing: 3px;
   text-decoration: none;
   text-transform: capitalize;
}
.navItems li:hover a,
.links a:hover{
   color: #0165eb;
}
.links a{
   font-size: 30px;
   color: #3d535f;
   margin: 25px 10px;
}
.wrapper{
   display: flex;
   width: 100%;
   height: calc(100vh - 80px);
   justify-content: center;
   align-items: center;
   padding: 0 10%;
   overflow: hidden;
}
.wrapper::before{
   position: absolute;
   content: '';
   height: 600px;
   width: 600px;
   border-radius: 50%;
   left: -12%;
   top: 40%;
   background: linear-gradient(45deg,#0165eb,#00bcf9);
   animation: object1 6s linear infinite;
}
.wrapper::after{
   position: absolute;
   content: '';
   height: 200px;
   width: 200px;
   border-radius: 50%;
   left: 35%;
   top: 12%;
   background: linear-gradient(45deg,#0165eb,#00bcf9);
   animation: object2 6s linear infinite;
}
@keyframes  object1{
   50%{
      left: -13%;
      top: 41%;
   }
}
@keyframes  object2{
   50%{
      left: 35%;
      top: 10%;
   }
}
.cols{
   width: 50%;
}
.cols0{
   width: 60%;
   z-index: 5;
}
.topline{
   display: block;
   position: relative;
   font-size: 35px;
   letter-spacing: 5px;
   color: #3d535f;
}
.topline::after{
   position: absolute;
   content: '';
   height: 4px;
   width: 45px;
   bottom: 10px;
   background-color: #0165eb;
}
h1{
   display: block;
   font-size: 7em;
   font-weight: 900;
   color: #3d535f;
}
.multiText{
   color: #0165eb;
   text-transform: capitalize;
}
p{
   display: block;
   width: 90%;
   font-size: 1.2em;
   color: #3d535f;
}
.btns{
   width: 100%;
   position: relative;
   left: 150px;
}
button{
   outline: none;
   border: none;
   cursor: pointer;
   font-size: 25px;
   font-weight: 400;
   color: #fff;
   background-color: #3d535f;
   padding: 8px 14px;
   margin: 40px 5px;
   letter-spacing: 2px;
   text-transform: capitalize;
   box-shadow: 0 15px 10px rgba(0,0,0,0.4);
}
button:hover{
   background-color: #0165eb;
}
.imgbox{
   position: relative;
   width: 100%;
   height: 100%;
}
.imgbox img{
   position: relative;
   height: 100%;
   width: calc(130% - 80px);
   top: -100px;
   right: 50px;
   /* transform: rotateY(180deg); */
   animation: animateUser 4s linear infinite;
}
@keyframes animateUser{
   50%{
      right: 30px;
      top: -90px;
   }
}
.imgbox #splash{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%) rotate(-35deg);
   width: 160%;
   filter: saturate(200%);
   animation: animate 4s linear infinite;
}
@keyframes animate{
   50%{
      top: 49%;
      left: 51%;
      width: 155%;
   }
}