App.css

/* write your css here */
@tailwind base;
@tailwind components;
@tailwind utilities;


* {
  margin: 0;
  padding: 0;
}

html,
body {
  overflow-x: hidden;
  overflow-y: auto;
}


.codeblock1 {
  width: 372.95px;
  height: 257.05px;
  border-radius: 100%;
  left: calc(50% - 372.95px / 2 - 76.53px);
  top: calc(50% - 257.05px / 2 - 47.47px);
  background: linear-gradient(123.77deg,
      #8a2be2 -6.46%,
      #ffa500 59.04%,
      #f8f8ff 124.53%);
  opacity: 0.2;
  filter: blur(34px);
  transform: matrix(1, 0, -0.03, 1, 0, 0);
}

.codeblock2 {
  position: absolute;
  width: 372.95px;
  height: 257.05px;
  left: calc(50% - 372.95px / 2 - 76.53px);
  top: calc(50% - 257.05px / 2 - 47.47px);
  border-radius: 100%;
  background: linear-gradient(118.19deg,
      #1fa2ff -3.62%,
      #12d8fa 50.44%,
      #a6ffcb 104.51%);
  opacity: 0.2;
  filter: blur(34px);
  transform: matrix(1, 0, -0.03, 1, 0, 0);
}

.code-border {
  border: 2px solid;
  border-image-slice: 1;
  border-width: 2px;
  border-image-source: linear-gradient(to right bottom, #ffffff38, #ffffff00);
  background: linear-gradient(111.93deg,
      rgba(14, 26, 45, 0.24) -1.4%,
      rgba(17, 30, 50, 0.38) 104.96%);
  /* backdrop-filter: blur(26px); */
}

.homepage_bg {
  background: url('../src/assets/Images/bghome.svg');
}

.foundingStory {
  background: var(--Gradient-04, linear-gradient(118deg, #833AB4 -2.4%, #FD1D1D 52.25%, #FCB045 106.89%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ourMission {
  background: var(--Gradient-05, linear-gradient(118deg, #1FA2FF -3.62%, #12D8FA 50.44%, #A6FFCB 104.51%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ourVision {
  background: var(--Gradient-08, linear-gradient(118deg, #E65C00 -6.05%, #F9D423 106.11%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.foundingStoryBlob {
  border-radius: 372.949px;
  opacity: 0.2;
  background: var(--Gradient-09, linear-gradient(118deg, #EC008C -0.91%, #FC6767 104.91%));
  filter: blur(34px);
  width: 372.949px;
  height: 257.054px;
}

.aboutUsBlob {
  border-radius: 357.43px;
  opacity: 0.74;
  background: var(--Gradient-08, linear-gradient(118deg, #E65C00 -6.05%, #F9D423 106.11%));
  filter: blur(34px);
  width: 357.43px;
  height: 36.875px;
}

.input {
  appearance: none;
  width: 100%;
  background-color: #585D69;
  box-shadow: inset 0px -1px 0px rgba(255, 255, 255, 0.18);
  padding: 10px;
  color: #F1F2FF;
  border-radius: 0.5rem;
}


.lable-style {
  @apply text-[14px] text-richblack-5;
}

.form-style {
  @apply rounded-lg bg-richblack-700 p-3 text-[16px] leading-[24px] text-richblack-5 shadow-[0_1px_0_0] shadow-white/50 placeholder:text-richblack-400 focus:outline-none;
}

.form-error-span {
  @apply -mt-1 text-[12px] text-yellow-100;
}

.icon-btn {
  @apply flex items-center gap-2 text-yellow-50 text-base font-[500] border border-yellow-50 rounded-md px-4 py-2;
}



/* 
  input[type='file'] {
    display: flex;
    flex-direction:  flex-col;
    color: rgba(0, 0, 0, 0);
  } */

.spinner {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 9px solid #f1f2ff;
  animation: spinner-bulqg1 0.8s infinite linear alternate,
    spinner-oaa3wk 1.6s infinite linear;
}


@keyframes spinner-bulqg1 {
  0% {
    clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
  }

  12.5% {
    clip-path: polygon(50% 50%,
        0 0,
        50% 0%,
        100% 0%,
        100% 0%,
        100% 0%,
        100% 0%);
  }

  25% {
    clip-path: polygon(50% 50%,
        0 0,
        50% 0%,
        100% 0%,
        100% 100%,
        100% 100%,
        100% 100%);
  }

  50% {
    clip-path: polygon(50% 50%,
        0 0,
        50% 0%,
        100% 0%,
        100% 100%,
        50% 100%,
        0% 100%);
  }

  62.5% {
    clip-path: polygon(50% 50%,
        100% 0,
        100% 0%,
        100% 0%,
        100% 100%,
        50% 100%,
        0% 100%);
  }

  75% {
    clip-path: polygon(50% 50%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        50% 100%,
        0% 100%);
  }

  100% {
    clip-path: polygon(50% 50%,
        50% 100%,
        50% 100%,
        50% 100%,
        50% 100%,
        50% 100%,
        0% 100%);
  }
}

@keyframes spinner-oaa3wk {
  0% {
    transform: scaleY(1) rotate(0deg);
  }

  49.99% {
    transform: scaleY(1) rotate(135deg);
  }

  50% {
    transform: scaleY(-1) rotate(0deg);
  }

  100% {
    transform: scaleY(-1) rotate(-135deg);
  }
}