/*------------------------------------------------------------------
# [Color codes]

    --primary-color:#3f396d;
    --secondary-color:#07003b;
    --accent:#fca61f;
    --text-color: #7d7789;
    --off-white-color: #f0f4ff;
    --light-purple-color:#6f34fe;
    --white-color:#fff;
    --light-grey-color:#f2f2ff;
# */
/*------------------------------------------------------------------
[Typography]

Body copy:     'Josefin Sans', sans-serif;

-------------------------------------------------------------------*/




@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;600;700&family=Lato&display=swap');
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html{
    scroll-behavior: smooth;
}
body{
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 400;
    background-color: #f0f4ff;
}
/*------------------------------------------------------------------
[Table of contents]

1. h1
2. h2
3. h4
4. h6
5. p
6. contact btn
7. generic

-------------------------------------------------------------------*/
:root {
    --primary-color:#3f396d;
    --secondary-color:#07003b;
    --accent:#fca61f;
    --text-color: #7d7789;
    --off-white-color: #f0f4ff;
    --light-purple-color:#6f34fe;
    --white-color:#fff;
    --light-grey-color:#f2f2ff;
  }
h1{
    font-size: 85px;
    line-height: 88px;
}
h2{
    font-size: 52px;
    line-height: 54px;
}
h4{
    font-size: 26px;
    line-height: 28px;
}
h6{
    font-size: 22px;
    line-height: 24px;
    color: var(--light-purple-color);
}
p{
    font-size: 22px;
    line-height: 33px;
}
section{
    padding-top: 85px;
    padding-bottom: 85px;
    padding-left: 290px;
    padding-right: 290px;
}
.landing-con .landing-logo{
background-color: #fff;
width: auto;
display: inline-block;
border-radius: 100px;
padding: 35px 38px 45px 38px;
margin-bottom: 24px;
}
.landing-con h2{
    font-size: 38px;
    font-weight: 700;
    color: #100a42;
    margin-bottom: 36px;
    
}
.landing-con h2 span{
    font-size: 38px;
    font-weight: 700;
    color: #7130fa;
    margin-bottom: 6px;
}
.landing-con .landing-light img,
.landing-con .landing-dark img{
border: 10px solid #fff;
border-radius: 20px;
height: 460px;
transition: all .3s ease-in-out;
}

.landing-con .landing-light img:hover,
.landing-con .landing-dark img:hover {
    transform: translateY(-10px);
}
.landing-con h4{
    font-size: 22px;
    color: #07003b;
    font-weight: 400;
}

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

 .landing-con .landing-light img,
.landing-con .landing-dark img{

    height: auto;
}
}

.landing-con::before {
    content: "";
    width: 127px;
    height: 404px;
    position: absolute;
    top: 107px;
    left: 0;
     background: url(../image/circle-bg-left-img.png) no-repeat top left; 
}

.landing-con:after {
    content: "";
    width: 127px;
    height: 404px;
    position: absolute;
    bottom: 48px;
    right: 0;
    background: url(../image/circle-bg-img.png) no-repeat top right; 
    z-index: -1;

}

.landing-con .half-circle-left-img{
    content: "";
    width: 52px;
    height: 59px;
    position: absolute;
    top: 67px;
    left: 32px;
    animation: mover 1s infinite alternate;
    -webkit-animation: mover 1s infinite alternate;
}

.landing-con .half-circle-right-img{
    content: "";
    width: 52px;
    height: 59px;
    position: absolute;
    bottom: 400px;
    right: 50px;
    animation: mover 1s infinite alternate;
    -webkit-animation: mover 1s infinite alternate;

}

.landing-con .triangle-icon-img {
    content: "";
    width: 35px;
    height: 38px;
    position: absolute;
    top: 260px;
    right: 490px;
    -webkit-animation: mover 1s infinite alternate;
    animation: mover 1s infinite alternate;
}


.landing-con .corn-left-icon{
    content: "";
    width: 35px;
    height: 38px;
    position: absolute;
    bottom: 440px;
    left: 110px;
    animation: mover 1s infinite alternate;
    -webkit-animation: mover 1s infinite alternate;

}


  @keyframes firstPercentage {
      0% {
          transform: rotate(0deg);
      }
      100% {
          transform: rotate(135deg);
      }
  }

  @keyframes secondPercentage {
      0% {
          transform: rotate(0deg);
      }
      100% {
          transform: rotate(170deg);
      }
  }

  @keyframes thirdPercentage {
      0% {
          transform: rotate(0deg);
      }
      100% {
          transform: rotate(150deg);
      }
  }
  @keyframes fourPercentage {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(140deg);
    }
}

  @keyframes fadeIn {
      0% {
          opacity: 0;
      }
      100% {
          opacity: 1;
      }
  }

@-webkit-keyframes spineer {
    from {
    box-shadow: 0 0 0 0 rgba(255, 161, 34, .99)
    }
    to {
    box-shadow: 0 0 0 45px rgba(255, 161, 34, .01)
    }
    }    
    
    @keyframes spineer {
    from {
    box-shadow: 0 0 0 0 rgba(255, 161, 34, .99)
    }
    to {
    box-shadow: 0 0 0 45px rgba(255, 161, 34, .01)
    }
    }

@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-20px); }
}
@-webkit-keyframes left-mover{
    0% { transform: translatex(0); }
    100% { transform: translatex(10px); }
}
@-webkit-keyframes right-mover{
    0% { transform: translatex(0); }
    100% { transform: translatex(-10px); }
}

  @keyframes typing {
    40%, 60%{
      left: calc(100% + 30px);
    }
    100%{
      left: 0;
    }
  }