@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Unica+One&display=swap");
html,
body {
  height: 100%;
  font-family: "Roboto", sans-serif;
}
.font-two {
  font-family: "Unica One", cursive;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Unica One", cursive;
}
.scale-in-center {
  -webkit-animation: scale-in-center 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    both;
  animation: scale-in-center 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.tracking-in-expand {
  -webkit-animation: tracking-in-expand 2s cubic-bezier(0.215, 0.61, 0.355, 1)
    both;
  animation: tracking-in-expand 2s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}
.tracking-in-expand-quick {
  -webkit-animation: tracking-in-expand 1s cubic-bezier(0.215, 0.61, 0.355, 1)
    both;
  animation: tracking-in-expand 1s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}
.font-100 {
  font-size: 50px;
}
.pulsate-bck {
	-webkit-animation: pulsate-bck 1.5s ease-in-out infinite both;
	        animation: pulsate-bck 1.5s ease-in-out infinite both;
}
/* ----------------------------------------------
 * Generated by Animista on 2021-7-29 14:41:57
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation pulsate-bck
 * ----------------------------------------
 */
 @-webkit-keyframes pulsate-bck {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes pulsate-bck {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}


/* ----------------------------------------------
 * Generated by Animista on 2021-7-28 12:55:49
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-in-center
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

/* ----------------------------------------------
 * Generated by Animista on 2021-7-28 12:6:22
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation tracking-in-expand
 * ----------------------------------------
 */
@-webkit-keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

.bg {
  animation: slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-30deg, #212529 50%, #1b1d1f 50%);
  bottom: 0;
  left: -50%;
  opacity: 0.5;
  position: fixed;
  right: -50%;
  top: 0;
  z-index: -1;
}
.bg2 {
  animation-direction: alternate-reverse;
  animation-duration: 4s;
}

.bg3 {
  animation-duration: 5s;
}
.clip {
  width: 320px;
  height: 320px;
  clip-path: polygon(13% 16%, 80% 0%, 100% 100%, 7% 93%);
}
.clip-div {
  clip-path: polygon(0 0, 100% 0, 100% 98%, 21% 83%);
}
.bg-yel {
  background-color: #fed000 !important;
}
hr {
  border-top: 3px solid #fed000;
  opacity: 1;
}
.card {
  border: 1px solid transparent;
}
.border {
  border: 1px solid #fed000 !important;
}
.border-d {
  border: 1px solid #212529 !important;
}
.border-an {
  border: 2px solid transparent;
  animation: animate 3s linear infinite;
}
.border-out-bl {
  outline: 2px solid #212529;
  outline-offset: -5px;
}
.avatar {
  position: absolute;
  top: 3px;
  left: 3px;
  vertical-align: middle;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  padding: 20px;
  object-fit: contain;
}
.footertit{
  font-family: "Unica One", cursive;
  font-size: 35px;
}
.social-footer {
  color: #fffcff;
  font-size: 45px;
  text-decoration: none;
}
.social-footer:hover {
  color: #fed000;
}
.devby{
  color: #000 !important;
}
@keyframes animate {
  0% {
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
  10% {
    border-top-color: #fed000;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
  30% {
    border-top-color: #fed000;
    border-right-color: #fed000;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
  40% {
    border-top-color: #fed000;
    border-right-color: #fed000;
    border-bottom-color: #fed000;
    border-left-color: transparent;
  }
  50% {
    border-top-color: #fed000;
    border-right-color: #fed000;
    border-bottom-color: #fed000;
    border-left-color: #fed000;
  }
  60% {
    border-top-color: transparent;
    border-right-color: #fed000;
    border-bottom-color: #fed000;
    border-left-color: #fed000;
  }
  70% {
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: #fed000;
    border-left-color: #fed000;
  }
  80% {
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: #fed000;
  }
  90% {
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
  100% {
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
}
.border-out {
  outline: 1px solid #fed000;
  outline-offset: -5px;
}
.border-top {
  border-top: 1px solid #fed000 !important;
}
.btn-primary {
  color: #212529;
  background-color: #fed000;
  border-color: #fed000;
}
.btn-primary:hover {
  color: #212529;
  background-color: #fff;
  border-color: #fed000;
}
.btn-dark {
  color: #fff;
  background-color: #212529;
  border-color: #212529;
}
.btn-dark:hover {
  color: #212529;
  background-color: #fff;
  border-color: #212529;
}
@keyframes slide {
  0% {
    transform: translateX(-15%);
  }
  100% {
    transform: translateX(25%);
  }
}

.bg-hero {
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='216' height='216' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23e6e6e6' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%23fed000'%3E%3Ccircle cx='769' cy='229' r='5'/%3E%3Ccircle cx='539' cy='269' r='5'/%3E%3Ccircle cx='603' cy='493' r='5'/%3E%3Ccircle cx='731' cy='737' r='5'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='309' cy='538' r='5'/%3E%3Ccircle cx='295' cy='764' r='5'/%3E%3Ccircle cx='40' cy='599' r='5'/%3E%3Ccircle cx='102' cy='382' r='5'/%3E%3Ccircle cx='127' cy='80' r='5'/%3E%3Ccircle cx='370' cy='105' r='5'/%3E%3Ccircle cx='578' cy='42' r='5'/%3E%3Ccircle cx='237' cy='261' r='5'/%3E%3Ccircle cx='390' cy='382' r='5'/%3E%3C/g%3E%3C/svg%3E");
  /* background-image: url("../img/Inn.svg"); */
  background-repeat: repeat;
  background-position: center center;
  background-size: auto;
}
.blob {
  position: absolute;
  top: 10%;
  right: 2%;
  fill: #fed000;
  width: 20vmax;
  z-index: -1;
  animation: move 50s linear infinite;
  /* transform-origin: 10% 10%; */
}
.blob-two {
  position: absolute;
  bottom: 4%;
  left: 1%;
  fill: #fed000;
  width: 30vmax;
  z-index: -1;
  animation: move 50s alternate-reverse linear;
  /* transform-origin: 10% 10%; */
}
@keyframes move {
  0% {
    transform: scale(1) translate(0vw, 0px);
  }
  20% {
    transform: scale(0.9, 1) rotate(90deg);
  }
  40% {
    transform: scale(1.1, 1) rotate(180deg);
  }
  60% {
    transform: scale(1.3) rotate(270deg);
  }
  80% {
    transform: scale(1.3) rotate(180deg);
  }
  100% {
    transform: scale(1);
  }
}