:root{
            --text-primary: #e85d04;
            --text-secondary: #4a4a4a;
            --text-third: #dcdcdc;
        }
         body {
            font-family: 'Lato','Helvetica Neue',Arial,sans-serif;
            text-transform: capitalize;
         }
         .font-cursive{
            font-family: "Tangerine", cursive;
            font-weight: bold;
         }
        .font-cursive-100 {
            font-family: "Caveat", cursive;
        }
        .font-regular{
            font-family: "Audiowide", sans-serif;
        }
        .font-stroke{
            font-family: "Moirai One", system-ui;
        }
        .header{
            position: sticky;
            z-index: 10;
            left:0;
            top:0;
            background-color: #fff;
            border-bottom: 1px solid #eaeaea;
        }
        .icon-preview{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin: auto;
            background: #f7f7f7;
            padding: 10px;
        }

.three { width: auto; }

/* COLUMNS */

.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}

.col:first-of-type {
  margin-left: 0;
}

/* CLEARFIX */

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}


/* ALL */
.nav-tog{
   display: none;
}
.row .three{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #4a4a4a;
  text-align: center;
}

.hamburger .line{
   width: 30px;
  height: 4px;
  background-color: #ecf0f1;
  display: block;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.hamburger:hover{
  cursor: pointer;
}

.is-active #hamburger-6{
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-transition-delay: 0.6s;
  -o-transition-delay: 0.6s;
  transition-delay: 0.6s;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.is-active .line:nth-child(2){
  width: 0px;
}

.is-active .line:nth-child(1),
.is-active .line:nth-child(3){
  -webkit-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.is-active .line:nth-child(1){
  -webkit-transform: translateY(13px);
  -ms-transform: translateY(13px);
  -o-transform: translateY(13px);
  transform: translateY(13px);
}

.is-active .line:nth-child(3){
  -webkit-transform: translateY(-6px) rotate(90deg);
  -ms-transform: translateY(-6px) rotate(90deg);
  -o-transform: translateY(-6px) rotate(90deg);
  transform: translateY(-6px) rotate(90deg);
}

        .login-btn{
            display: block;
            border-radius: 5px;
            color:#fff;
            padding: 5px 20px;
            background: linear-gradient(360deg, #e85d04, #f38b4b)
        }
        .hero{
            height:calc(100vh - 80px);
            background-image:  url("/static/img/wave.svg");
            background-size: 100% auto;
            background-repeat: repeat-x;
            background-position: left bottom;
            background-size:contain;
        }
        @keyframes clouds {
            0%{background-position: 100vw 0;}
            100%{background-position: -100vw 0;}
        }
        .hero::before{
            content: '';
            position: absolute;
            top:calc(100% - 345px);
            left:8%;
            background: url("/static/img/left-robo.jpg");
            width:120px;
            height:150px;
            background-size: contain;
            mix-blend-mode: multiply;
            animation: shake 2s ease-in-out infinite alternate-reverse;
        }
        .hero::after{
            content: '';
            position: absolute;
            top:calc(100% - 345px);
            right:50px;
            background: url("/static/img/right-robo.jpg");
            width:240px;
            height:300px;
            transform: scaleX(-1);
            background-size: contain;
            mix-blend-mode: multiply;
            animation: shake 1s ease-in-out infinite alternate-reverse;
        }
        @keyframes shake {
            0%{
               top:calc(100% - 355px);
            }
            100%{
               top:calc(100% - 345px)
            }
        }
        .bg-primary{
            background: linear-gradient(360deg, #e85d04, #f38b4b);
        }
         .text-secondary{
            color: var(--text-secondary);
         }
         .text-primary,
         .hover-text-primary:hover{
            color: #e85d04;
         }

          .icon,.rate-st{
            filter: grayscale(100);
            opacity: 0.6;
            padding: 15px;
          }
          .icon1{
            display: none;
          }
          .tool-card{
            opacity: .8;
          }
          .tool-card:hover .icon{
            display: none;
          }
          .tool-card:hover .icon1{
            display: block;
            filter: hue-rotate(210deg);
            mix-blend-mode: multiply;
          }

.bubbly-button {
   display: inline-block;
   font-size: 1em;
   padding: 1em 2em;
   -webkit-appearance: none;
   appearance: none;
   background-color: #ff7f30;
   color: #fff;
   border-radius: 4px;
   border: none;
   cursor: pointer;
   position: relative;
   transition: .3s;
   transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
   box-shadow: 0 2px 25px rgba(255, 153, 0, 0.5);
}
.bubbly-button:hover {
   background-color: #ff6e14;
   transition: .3s;
}
.bubbly-button:focus {
	outline: 0;
}
.bubbly-button:before, .bubbly-button:after {
   position: absolute;
   content: '';
   display: block;
   width: 140%;
   height: 100%;
   left: -20%;
   z-index: -1000;
   transition: all ease-in-out 0.5s;
   background-repeat: no-repeat;
   z-index: 1;
}
.bubbly-button:before {
	 display: none;
	 top: -75%;
	 background-image: radial-gradient(circle, #e85d04 20%, transparent 20%), radial-gradient(circle, transparent 20%, #e85d04 20%, transparent 30%), radial-gradient(circle, #e85d04 20%, transparent 20%), radial-gradient(circle, #e85d04 20%, transparent 20%), radial-gradient(circle, transparent 10%, #e85d04 15%, transparent 20%), radial-gradient(circle, #e85d04 20%, transparent 20%), radial-gradient(circle, #e85d04 20%, transparent 20%), radial-gradient(circle, #e85d04 20%, transparent 20%), radial-gradient(circle, #e85d04 20%, transparent 20%);
	 background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
}
 .bubbly-button:after {
	 display: none;
	 bottom: -75%;
	 background-image: radial-gradient(circle, #e85d04 20%, transparent 20%), radial-gradient(circle, #e85d04 20%, transparent 20%), radial-gradient(circle, transparent 10%, #e85d04 15%, transparent 20%), radial-gradient(circle, #e85d04 20%, transparent 20%), radial-gradient(circle, #e85d04 20%, transparent 20%), radial-gradient(circle, #e85d04 20%, transparent 20%), radial-gradient(circle, #e85d04 20%, transparent 20%);
	 background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
}
 .bubbly-button:active {
	 transform: scale(0.9);
	 background-color: #e85d04;
	 box-shadow: 0 2px 25px rgba(255, 174, 0, 0.2);
}
 .bubbly-button:hover::before {
	 display: block;
	 animation: topBubbles ease-in-out 0.75s forwards;
}
 .bubbly-button:hover::after {
	 display: block;
	 animation: bottomBubbles ease-in-out 0.75s forwards;
}
 @keyframes topBubbles {
	 0% {
		 background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
	}
	 50% {
		 background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
	}
	 100% {
		 background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
		 background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
	}
}
 @keyframes bottomBubbles {
	 0% {
		 background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
	}
	 50% {
		 background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
	}
	 100% {
		 background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
		 background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
	}
}

.rates{
   width:80px;
   height:80px;
}
.rate-st,.rate-dy{
   position: absolute;
   top:0;
   left:0;
}
.rate-dy{
   display: none;
   filter: hue-rotate(210deg);
}
.rates:hover .rate-dy{
   display: block;
}

.footer{
   background-color: rgb(242, 242, 242);
   margin-top:100px;
   position: relative;
}
.footer::before{
   content: '';
   position: absolute;
   top: -136px;
   left:0;
   background: url("/static/img/footer-girl.png");
   height: 200px;
   width:200px;
   background-size: contain;
   background-repeat: no-repeat;
   mix-blend-mode: darken;

}
.footer .lamp{
   position: absolute;
   bottom: 0;
   right:0;
   height: 300px;
   width:200px;
}
#glow{
   opacity: 0;
}
.footer:hover #glow{
   opacity: 1;
   animation: glow 2s ease-in;
}
@keyframes glow{
   0%{opacity: 1;}
   5%{opacity: 0;}
   10%{opacity: 1;}
   15%{opacity: 0;}
   20%{opacity: 1;}
   30%{opacity: 0;}
   40%{opacity: 1;}
   100%{opacity: 1;}

}
.input-section{
    background:url("/static/img/form-bg-1.png") center bottom no-repeat;
    background-size:200px 300px;

}
.insform{
    width:350px;
    height:400px;
    margin:auto;
    text-align:center;
}
.insform .ins-bg{
   ;
}
.insform .ins-bg input{
    background:unset;
    width:200px;
}
.ins-bg{
    width:100%;
    padding:30px 0;
     background:url("/static/img/ins-bg.png") center bottom no-repeat
}
.insform button{
    margin:20px auto;
}
.signup{
background:#fff url("/static/img/signup-bg1.png");
background-size:contain;
animation: bg 100s ease-in-out infinite alternate-reverse;
}
@keyframes bg {
    0%{background-position: 100vw 0;}
    100%{background-position: -100vw 0;}
}
.signupfrm{
    background: rgba( 255, 255, 255, 0.85 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 4.5px );
    -webkit-backdrop-filter: blur( 4.5px );
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
}
@media (max-width: 768px) {
   .nav-tog{
      display: block;
   }
   .res-nav{
      display: block !important;
      position: absolute;
      top: 100%;
      left: -200px;
      transition: .3s;
      background-color: #ffff;
      border-right:1px solid #d7d7d7;
   }
   .is-active .res-nav{
      left: 0;
      transition: .3s;
   }
   .res-nav a{
      display: block;
      padding: 10px;
      margin:0 !important;
      border-bottom: 1px solid #d7d7d7;
   }
}