@import url('https://fonts.googleapis.com/css2?family=Hind:wght@500;700&display=swap');
*, ::before, ::after {
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Hind', sans-serif;
  }

.offcanva {
    right: -331px;
}
.offcanva.active {
    right: 0px;
}
@keyframes menu {
    from {
      transform: translateX(100%);
      width: 80%;
    }
  
    to {
      transform: translateY(0%);
      width: 80%;
    }
  }
  
  .animate-menu {
    -webkit-animation: menu 0.4s forwards;
            animation: menu 0.4s forwards;
  }
  @keyframes menu-sm {
    from {
      transform: translateX(100%);
      width: 50%;
    }

    to {
      transform: translateY(0%);
      width: 50%;
    }
  }
@media (min-width:640px) {
  .sm\:animate-menu-sm {
    -webkit-animation: menu-sm 0.4s forwards;
            animation: menu-sm 0.4s forwards;
  }
}
.transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }