@import url('https://fonts.googleapis.com/css2?family=Karla:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
:root {
    --header-height: 3rem;

    /*========== Colors ==========*/
    /* Change favorite color */
    --hue-color:205; /*Purple 250 - Green 142 - Blue 230 - Pink 340*/

    /* HSL color mode */
    
    --container-color: #fff;

    /*========== Font and typography ==========*/
    --body-font:'karla';
    --body-color: #000;

}

/* Font size for large devices */
@media screen and (min-width: 968px) {
    :root {
        --big-font-size:3rem ;
        --h1-font-size: 2.24rem;
        --h2-font-size: 1.5rem;
        --h3-font-size: 1.24rem;
        --normal-font-size: 1rem;
        --small-font-size: .125rem;
        --smaller-font-size:.81rem ;
    }
}

/*========== Variables Dark theme ==========*/


/*========== Button Dark/Light ==========*/


/*==================== BASE ====================*/
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html{
    scroll-behavior: smooth;
}
body{
   font-family: var(--body-font);
    font-size: var( --normal-font-size);
    background-color:var(--container-color) ;
    color:var(--body-color);
    position: relative;
}

    h1,h2,h3,h4{
        color:  ##013289 !important;
        font-weight:var(--font-medium) ;
    }
    h3{
      font-family:"Nanum Pen Script", "cursive";
    }
 
/*==================== REUSABLE CSS CLASSES ====================*/
.triangle{
    position: absolute;
    left: 2px;
    -webkit-animation: rotation 18s linear infinite;
    animation: rotation 18s linear infinite;
}
.circle{
    width: 383px;
    position: absolute;
    right: 120px;
    /* bottom: 147px; */
    /* -webkit-animation: rotation 18s linear infinite; */
    animation: rotation 18s linear infinite;
}
.desktop{
    position: absolute;
    width: 773px;
    margin-top: -82px;
    right: 2px;
}
/* main text */
button{
  background: #4154f1 !important;
  border: 1px solid #fff;
}
button:hover{
  background:#fff !important;
  color: #4154f1 !important;
  transition: all .3s ease-in-out 0s;
}
p{
  color: ##5575bd;;
  font-size: 2rem;
  font-weight: 400;
  width: 100%;
  position: relative;
}
p span{
  color:#4154f1;
}
.cloud-img1{
    width:400px;
    position: absolute;
    left: 20px;
    -webkit-animation: nudge 5s linear infinite;
    animation: nudge 5s linear infinite;
}
.smallerText{
  font-family: "Nanum Pen Script", "cursive";
  color: #b3b3b3;
}


.section_title{
    font-size: var(--h1-font-size);
}
.section_subtitle{
    font-size: var(--h2-font-size);
}
/*==================== LAYOUT ====================*/
a{
    text-decoration: none;
    color:  #4154f1;
}
li{
    font-size: var(--h3-font-size);
    color:  #4154f1;
    
}
/*==================== NAV ====================*/


/* show menu */

.navbar{
    height: 78px;
    background-color: #fff !important;
    /* Add the blur effect */
}
/* Active link */






.vertical-center{
    min-height: 100vh;
    display: flex;
    align-items: center;
}
/*==================== BUTTONS ====================*/
.home-social-icons{
    font-size: var(--h1-font-size);
    color:  ##4154f1;
}



  .planePath {
    stroke:#3212e1;
    stroke-width: .1%;
    stroke-width: .5%;
    stroke-dasharray: 1% 2%;
    stroke-linecap: round;
    fill: none;
  }
  
  .fil1 {
    fill: #D9DADA;
  }
  
  .fil2 {
    fill: #C5C6C6;
  }
  
  .fil4 {
    fill: #9D9E9E;
  }
  
  .fil3 {
    fill: #AEAFB0;
  }


.card{
  background: #f6f9ff;
}
a:hover{
  color:#000;
}
/* animation */
.arrow{
 
  animation: translateright 1.5s ease-in-out infinite;
}
.element {
  display: inline-block;
  background-color: #054984;
  height: 100px;
  width: 100px;
  font-size: 1px;
  opacity: 0.2;
  padding: 1px;
  color: white;
  margin-right: 5px;
  margin-left: 5px;
  animation: roll 5s infinite;
  transform: rotate(
30deg);
  opacity: 0.3;
}

@keyframes roll {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
h1 {
    font-size: 3em;
    margin-bottom: 0.2em;
    color: ##4154f1 !important;
  }
  
  h2 {
    font-size: 2em;
  }
  
  .main {
    /* display: flex; */
    /* flex-direction: column; */
    flex-wrap: wrap;
    position: relative;
  }
  
  .dotted-circle {
    position: absolute;
    right: 265px;
    opacity: 0.3;
    -webkit-animation: rotation 38s linear infinite;
            animation: rotation 38s linear infinite;
  }
  /* footer */
 footer{
  width: 100%;
  height:auto;
  margin: 0 auto;
  bottom: 0px;
  padding: 15px;
  text-align: center;
  color: white;
  font-size: 1.6rem;
 }
 .footer-img{
   width:100%;
 }
  @-webkit-keyframes draw {
    from {
      stroke-dashoffset: 1000;
    }
    to {
      stroke-dashoffset: 0;
    }
  }
  
  @keyframes draw {
    from {
      stroke-dashoffset: 1000;
    }
    to {
      stroke-dashoffset: 0;
    }
  }
 
  
  @keyframes rotation {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  @-webkit-keyframes gradient-fade {
    from {
      transform: translate(10%, -10%) rotate(0deg);
    }
    to {
      transform: translate(50%, -50%) rotate(360deg);
    }
  }
  @keyframes gradient-fade {
    from {
      transform: translate(10%, -10%) rotate(0deg);
    }
    to {
      transform: translate(50%, -50%) rotate(360deg);
    }
  }
  @-webkit-keyframes gradient-fade-alt {
    from {
      transform: translate(-20%, 20%) rotate(0deg);
    }
    to {
      transform: translate(-60%, 60%) rotate(360deg);
    }
  }
  @keyframes gradient-fade-alt {
    from {
      transform: translate(-20%, 20%) rotate(0deg);
    }
    to {
      transform: translate(-60%, 60%) rotate(360deg);
    }
  }

/* blog */


  /*==================== MEDIA QUERIES ====================*/
/* For small devices */
@media only screen and (max-width: 600px) {
    body {
      .svg{
          display:none !important;
      }
    }
    .avtar{
      margin-top:30px;
      width:200px;
      margin-left:70px;
    }   
    .footer-img{
      width:30% !important;
    }
    p{
      font-size:15px;
    }
  }
  @media only screen and (min-width: 768px) {
    .svg{
        display:none !important;
    }
    .footer-img{
      width:30% !important;
    }
  }
/* For medium devices */


/* For small devices */
@media only screen and (min-width: 600px) {
  .footer-img{
    width:30% !important;
  }
}