@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {

  --primary: #CF993A;
  --primary-light: #F7D37A;
  --primary-dark: #A87417;

  --bg: #050505;
  --bg2: #0B0B0B;
  --bg3: #121212;

  --white: #ffffff;

  --text: #d8d8d8;

  --border: rgba(207, 153, 58, .16);

  --shadow: rgba(207, 153, 58, .28);

}

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

html {

  scroll-behavior: smooth;

}

body {

  font-family: 'Inter', sans-serif;

  background: #050505;

  color: #fff;

  overflow-x: hidden;

  min-height: 100vh;

  position: relative;

}

body::before {

  content: "";

  position: fixed;

  inset: 0;

  background:

    radial-gradient(circle at top right, rgba(207, 153, 58, .12), transparent 35%),

    radial-gradient(circle at bottom left, rgba(207, 153, 58, .08), transparent 35%),

    linear-gradient(180deg, #040404, #090909, #000);

  z-index: -20;

}

body::after {

  content: "";

  position: fixed;

  inset: 0;

  background-image:

    linear-gradient(rgba(207, 153, 58, .03) 1px, transparent 1px),

    linear-gradient(90deg, rgba(207, 153, 58, .03) 1px, transparent 1px);

  background-size: 60px 60px;

  animation: gridMove 18s linear infinite;

  z-index: -19;

}

@keyframes gridMove {

  from {

    transform: translate(0, 0);

  }

  to {

    transform: translate(60px, 60px);

  }

}

.main_wrapper {

  position: relative;

  min-height: 100vh;

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 50px 20px;

  overflow: hidden;

}

.auth-bg {

  position: fixed;

  inset: 0;

  overflow: hidden;

  pointer-events: none;

  z-index: -10;

}

.bg-shape {

  position: absolute;

  border-radius: 50%;

  filter: blur(120px);

  animation: floatShape 14s ease-in-out infinite;

}

.shape-1 {

  width: 420px;

  height: 420px;

  right: -120px;

  top: -120px;

  background: radial-gradient(circle, rgba(247, 211, 122, .35), transparent);

}

.shape-2 {

  width: 340px;

  height: 340px;

  left: -100px;

  bottom: -100px;

  background: radial-gradient(circle, rgba(207, 153, 58, .22), transparent);

  animation-delay: 3s;

}

.shape-3 {

  width: 240px;

  height: 240px;

  left: 20%;

  top: 38%;

  background: radial-gradient(circle, rgba(255, 226, 150, .16), transparent);

  animation-delay: 5s;

}

@keyframes floatShape {

  0%, 100% {

    transform: translate(0, 0);

  }

  50% {

    transform: translate(35px, -35px);

  }

}

/*==============================================
PREMIUM PARTICLES
==============================================*/

.particles-container {

  position: fixed;

  inset: 0;

  overflow: hidden;

  pointer-events: none;

  z-index: -8;

}

.particle {

  position: absolute;

  width: 4px;

  height: 4px;

  border-radius: 50%;

  background: var(--primary);

  box-shadow:

    0 0 10px var(--primary),

    0 0 20px var(--primary),

    0 0 35px rgba(207, 153, 58, .6);

  opacity: 0;

  animation: particleFloat linear infinite;

}

.particle:nth-child(1) {

  left: 5%;

  animation-duration: 15s;

}

.particle:nth-child(2) {

  left: 14%;

  animation-duration: 12s;

  animation-delay: 2s;

}

.particle:nth-child(3) {

  left: 22%;

  animation-duration: 18s;

}

.particle:nth-child(4) {

  left: 34%;

  animation-duration: 13s;

  animation-delay: 5s;

}

.particle:nth-child(5) {

  left: 48%;

  animation-duration: 17s;

}

.particle:nth-child(6) {

  left: 58%;

  animation-duration: 14s;

  animation-delay: 3s;

}

.particle:nth-child(7) {

  left: 71%;

  animation-duration: 20s;

}

.particle:nth-child(8) {

  left: 82%;

  animation-duration: 15s;

  animation-delay: 4s;

}

.particle:nth-child(9) {

  left: 94%;

  animation-duration: 16s;

}

@keyframes particleFloat {

  0% {

    transform:

      translateY(110vh) scale(0);

    opacity: 0;

  }

  15% {

    opacity: 1;

  }

  85% {

    opacity: 1;

  }

  100% {

    transform:

      translateY(-120px) scale(1.4);

    opacity: 0;

  }

}


/*==============================================
GOLD RINGS
==============================================*/

.gold-ring {

  position: absolute;

  border-radius: 50%;

  border: 1px solid rgba(207, 153, 58, .08);

  animation: ringRotate linear infinite;

}

.gold-ring.one {

  width: 650px;

  height: 650px;

  animation-duration: 20s;

}

.gold-ring.two {

  width: 850px;

  height: 850px;

  animation-duration: 32s;

  animation-direction: reverse;

}

.gold-ring.three {

  width: 1050px;

  height: 1050px;

  animation-duration: 50s;

}

@keyframes ringRotate {

  from {

    transform: rotate(0deg);

  }

  to {

    transform: rotate(360deg);

  }

}


/*==============================================
LIGHT BEAM
==============================================*/

.light-beam {

  position: absolute;

  width: 220px;

  height: 1000px;

  background:

    linear-gradient(180deg,

      transparent,

      rgba(247, 211, 122, .08),

      transparent);

  filter: blur(15px);

  transform: rotate(25deg);

  animation: beamMove 16s linear infinite;

}

.beam-left {

  left: -250px;

}

.beam-right {

  right: -250px;

  animation-delay: 8s;

}

@keyframes beamMove {

  0% {

    transform:

      translateX(0) rotate(25deg);

    opacity: 0;

  }

  20% {

    opacity: 1;

  }

  80% {

    opacity: 1;

  }

  100% {

    transform:

      translateX(1800px) rotate(25deg);

    opacity: 0;

  }

}


/*==============================================
NOISE LAYER
==============================================*/

.noise-layer {

  position: fixed;

  inset: 0;

  pointer-events: none;

  opacity: .03;

  mix-blend-mode: overlay;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");

}


/*==============================================
BOTTOM GLOW
==============================================*/

.bottom-glow {

  position: fixed;

  left: 50%;

  bottom: -260px;

  transform: translateX(-50%);

  width: 900px;

  height: 500px;

  border-radius: 50%;

  background:

    radial-gradient(circle,

      rgba(207, 153, 58, .18),

      transparent 70%);

  filter: blur(90px);

  animation: bottomGlow 8s ease-in-out infinite;

  pointer-events: none;

}

@keyframes bottomGlow {

  0%, 100% {

    transform:

      translateX(-50%) scale(1);

    opacity: .5;

  }

  50% {

    transform:

      translateX(-50%) scale(1.08);

    opacity: 1;

  }

}

/*==============================================
PREMIUM CARD CONTAINER
==============================================*/

.main_container {

  position: relative;

  z-index: 20;

  width: 100%;

  max-width: 460px;

  perspective: 1800px;

}


/*==============================================
FORM CARD
==============================================*/

.form_card {

  position: relative;

  overflow: hidden;

  padding: 45px;

  border-radius: 30px;

  background:

    linear-gradient(180deg,

      rgba(20, 20, 20, .98),

      rgba(8, 8, 8, .98));

  border: 1px solid rgba(207, 153, 58, .18);

  backdrop-filter: blur(30px);

  transform-style: preserve-3d;

  transition: .45s ease;

  box-shadow:

    0 40px 80px rgba(0, 0, 0, .75),

    0 0 40px rgba(207, 153, 58, .08),

    inset 0 1px rgba(255, 255, 255, .05);

}

.form_card:hover {

  transform:

    translateY(-10px) rotateX(3deg);

  border-color: #CF993A;

  box-shadow:

    0 50px 100px rgba(0, 0, 0, .82),

    0 0 70px rgba(207, 153, 58, .22),

    inset 0 1px rgba(255, 255, 255, .08);

}


/*==============================================
TOP SHINE
==============================================*/

/* .form_card::before {

  content: "";

  position: absolute;

  top: 0;

  left: -120%;

  width: 60%;

  height: 100%;

  transform: skewX(-25deg);

  background:

    linear-gradient(90deg,

      transparent,

      rgba(255, 255, 255, .08),

      rgba(255, 255, 255, .18),

      transparent);

  animation: cardShine 7s linear infinite;

}

@keyframes cardShine {

  from {

    left: -140%;

  }

  to {

    left: 170%;

  }

}

.form_card::after {

  content: "";

  position: absolute;

  inset: 0;

  border-radius: 30px;

  padding: 1px;

  background:

    linear-gradient(135deg,

      transparent,

      rgba(207, 153, 58, .65),

      transparent,

      rgba(255, 230, 170, .75),

      transparent);

  -webkit-mask:

    linear-gradient(#fff 0 0) content-box,

    linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;

  mask-composite: exclude;

  animation: borderRotate 8s linear infinite;

  pointer-events: none;

}

@keyframes borderRotate {

  from {

    transform: rotate(0deg);

  }

  to {

    transform: rotate(360deg);

  }

} */


/*==============================================
HEADER
==============================================*/

.form_header {

  position: relative;

  text-align: center;

  margin-bottom: 35px;

  z-index: 5;

}


/*==============================================
LOGO
==============================================*/

.form_logo {

  display: flex;

  justify-content: center;

  align-items: center;

  margin-bottom: 18px;

}

.logo_img {

  height: 90px;

  transition: .45s;

  filter:

    drop-shadow(0 0 20px rgba(207, 153, 58, .30)) drop-shadow(0 0 40px rgba(207, 153, 58, .20));

  animation: logoFloat 5s ease-in-out infinite;

}

.logo_img:hover {

  transform:

    scale(1.05) rotateY(10deg);

}

@keyframes logoFloat {

  0%, 100% {

    transform: translateY(0);

  }

  50% {

    transform: translateY(-12px);

  }

}


/*==============================================
LOGO GLOW
==============================================*/

.form_logo::before {

  content: "";

  position: absolute;

  width: 180px;

  height: 180px;

  border-radius: 50%;

  background:

    radial-gradient(circle,

      rgba(207, 153, 58, .18),

      transparent 70%);

  filter: blur(25px);

  animation: logoGlow 4s ease-in-out infinite;

  z-index: -1;

}

@keyframes logoGlow {

  0%, 100% {

    transform: scale(.9);

    opacity: .5;

  }

  50% {

    transform: scale(1.2);

    opacity: 1;

  }

}

/*==============================================
TITLE
==============================================*/

.form_logo h1 {

  font-size: 34px;

  font-weight: 800;

  line-height: 1.2;

  color: #fff;

  letter-spacing: 1px;

  margin: 0;

}

.form_logo h1 span {

  background: linear-gradient(135deg,
      #FFE39A,
      #CF993A,
      #A87417);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}

.form_title {

  color: #8f8f8f;

  font-size: 15px;

  font-weight: 500;

  margin-top: 12px;

  letter-spacing: .5px;

}

.form_title span {

  color: #CF993A;

  font-weight: 700;

}


/*==============================================
FORM
==============================================*/

.form_inner {

  position: relative;

  z-index: 5;

  margin-top: 30px;

}

.form-floating {

  position: relative;

  margin-bottom: 22px;

}


/*==============================================
INPUT
==============================================*/

.form-floating>.form-control {

  height: 60px;

  border-radius: 16px;

  background:

    linear-gradient(180deg,
      #171717,
      #101010);

  border: 1px solid rgba(207, 153, 58, .14);

  color: #fff;

  font-size: 15px;

  font-weight: 500;

  /* padding-left:55px; */

  transition: .35s;

  box-shadow:

    inset 0 0 0 rgba(207, 153, 58, 0),

    0 10px 25px rgba(0, 0, 0, .18);

}

.form-floating>.form-control:hover {

  border-color: rgba(207, 153, 58, .35);

}

.form-floating>.form-control:focus {

  background: #151515;

  color: #fff;

  border-color: #CF993A;

  box-shadow:

    0 0 0 4px rgba(207, 153, 58, .10),

    0 0 30px rgba(207, 153, 58, .22);

}

.form-floating>.form-control::placeholder {

  color: #fff;

}


/*==============================================
LABEL
==============================================*/

.form-floating>label {

  color: #8d8d8d;

  font-size: 14px;

  font-weight: 500;

  padding-left: 10px;

  transition: .35s;

}

.form-floating>.form-control:focus~label {

  color: #CF993A;

}


/*==============================================
ICON
==============================================*/

.input_icon {

  position: absolute;

  left: 20px;

  top: 50%;

  transform: translateY(-50%);

  color: #707070;

  font-size: 16px;

  transition: .35s;

  z-index: 10;
  display: none !important;

}

.form-floating:hover .input_icon {

  color: #CF993A;

}

.form-floating>.form-control:focus~.input_icon {

  color: #FFE39A;

  transform:

    translateY(-50%) scale(1.08);

}


/*==============================================
SELECT
==============================================*/

.form-floating select.form-control {

  cursor: pointer;

  appearance: none;

}

.form-floating select option {

  background: #121212;

  color: #fff;

}


/*==============================================
PASSWORD ICON
==============================================*/

.password-toggle {

  position: absolute;

  right: 18px;

  top: 50%;

  transform: translateY(-50%);

  color: #777;

  font-size: 17px;

  cursor: pointer;

  transition: .35s;

  z-index: 20;

}

.password-toggle:hover {

  color: #CF993A;

  transform:

    translateY(-50%) scale(1.12);

}

/*==============================================
CHECKBOX
==============================================*/

.form-check {

  display: flex;

  align-items: center;

  margin-top: 10px;

}

.form_check-input {

  width: 19px;

  height: 19px;

  border-radius: 6px;

  border: 1px solid rgba(207, 153, 58, .25);

  background: #121212;

  cursor: pointer;

  transition: .35s;

  box-shadow:

    inset 0 0 0 rgba(207, 153, 58, 0);

}

.form_check-input:hover {

  border-color: #CF993A;

}

.form_check-input:checked {

  background: linear-gradient(135deg,

      #F7D37A,

      #CF993A,

      #A87417);

  border-color: #CF993A;

  box-shadow:

    0 0 15px rgba(207, 153, 58, .35);

}

.form_check-input:focus {

  box-shadow:

    0 0 0 4px rgba(207, 153, 58, .12);

}

.form_check-label {

  margin-left: 10px;

  color: #9d9d9d;

  font-size: 14px;

  cursor: pointer;

  transition: .3s;

}

.form_check-label:hover {

  color: #fff;

}


/*==============================================
FORGOT PASSWORD
==============================================*/

.forgot_link {

  text-decoration: none;

  color: #CF993A;

  font-size: 14px;

  font-weight: 600;

  transition: .35s;

  position: relative;

}

.forgot_link::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: -3px;

  width: 0;

  height: 2px;

  background: #CF993A;

  transition: .35s;

}

.forgot_link:hover {

  color: #FFE39A;

}

.forgot_link:hover::after {

  width: 100%;

}


/*==============================================
BUTTON
==============================================*/

.form_btn {

  position: relative;

  width: 100%;

  height: 58px;

  border: none;

  outline: none;

  overflow: hidden;

  border-radius: 16px;

  cursor: pointer;

  color: #111;

  font-size: 16px;

  font-weight: 800;

  letter-spacing: .6px;

  background: linear-gradient(180deg,

      #FFE39A,

      #CF993A,

      #A87417);

  box-shadow:

    0 20px 35px rgba(207, 153, 58, .28),

    inset 0 1px rgba(255, 255, 255, .45);

  transition: .35s;

}

.form_btn:hover {

  transform:

    translateY(-4px);

  box-shadow:

    0 28px 50px rgba(207, 153, 58, .42);

}

.form_btn:active {

  transform: translateY(0);

}

.form_btn::before {

  content: "";

  position: absolute;

  left: -120%;

  top: 0;

  width: 70%;

  height: 100%;

  background:

    linear-gradient(90deg,

      transparent,

      rgba(255, 255, 255, .45),

      transparent);

  transform: skewX(-25deg);

  animation: buttonShine 3.5s linear infinite;

}

@keyframes buttonShine {

  from {

    left: -120%;

  }

  to {

    left: 180%;

  }

}


/*==============================================
BACK BUTTON
==============================================*/

.btn-back {

  width: 58px;

  min-width: 58px;

  height: 58px;

  display: flex;

  justify-content: center;

  align-items: center;

  border-radius: 16px;

  background: #171717;

  border: 1px solid rgba(207, 153, 58, .15);

  color: #999;

  transition: .35s;

}

.btn-back:hover {

  color: #CF993A;

  border-color: #CF993A;

  background: #1d1d1d;

  box-shadow:

    0 0 25px rgba(207, 153, 58, .18);

}


/*==============================================
FOOTER
==============================================*/

.footer_bottom {

  margin-top: 32px;

  padding-top: 22px;

  border-top: 1px solid rgba(207, 153, 58, .12);

  text-align: center;

}

.footer_bottom p {

  color: #8c8c8c;

  font-size: 14px;

  margin: 0;

}

.footer_bottom a {

  color: #CF993A;

  font-weight: 600;

  text-decoration: none;

  transition: .35s;

}

.footer_bottom a:hover {

  color: #FFE39A;

}


/*==============================================
TEXT EFFECT
==============================================*/

.text-gradient {

  background: linear-gradient(135deg,

      #FFE39A,

      #CF993A);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}

.glow-text {

  text-shadow:

    0 0 20px rgba(207, 153, 58, .35);

}

/*==============================================
RESPONSIVE
==============================================*/

@media (max-width:1200px) {

  .main_container {

    max-width: 450px;

  }

  .form_card {

    padding: 40px;

  }

  .logo_img {

    height: 82px;

  }

}


@media (max-width:991px) {

  .main_wrapper {

    padding: 40px 18px;

  }

  .main_container {

    max-width: 430px;

  }

  .form_card {

    padding: 35px;

    border-radius: 24px;

  }

  .logo_img {

    height: 75px;

  }

  .form_logo h1 {

    font-size: 28px;

  }

  .form_title {

    font-size: 14px;

  }

  .form-floating {

    margin-bottom: 18px;

  }

  .form-floating>.form-control {

    height: 56px;

    font-size: 14px;

    /* padding-left: 50px; */

  }

  .form-floating>label {

    /* padding-left: 50px; */

    font-size: 13px;

  }

  .input_icon {

    left: 18px;

    font-size: 15px;

  }

  .form_btn {

    height: 54px;

    font-size: 15px;

  }

  .btn-back {

    width: 54px;

    height: 54px;

    min-width: 54px;

  }

}


/*==============================================
TABLET
==============================================*/

@media (max-width:768px) {

  .main_wrapper {

    padding: 25px 15px;

    align-items: center;

  }

  .main_container {

    max-width: 100%;

  }

  .form_card {

    padding: 30px 24px;

    border-radius: 22px;

  }

  .logo_img {

    height: 65px;

  }

  .form_logo {

    margin-bottom: 12px;

  }

  .form_logo h1 {

    font-size: 24px;

  }

  .form_title {

    font-size: 13px;

    margin-top: 8px;

  }

  .form_inner {

    margin-top: 18px;

  }

  .form-floating {

    margin-bottom: 16px;

  }

  .form-floating>.form-control {

    height: 54px;

    /* padding-left: 48px; */

    font-size: 14px;

    border-radius: 14px;

  }

  .form-floating>label {

    /* padding-left: 48px; */

    font-size: 13px;

  }

  .input_icon {

    left: 16px;

    font-size: 14px;

  }

  .password-toggle {

    right: 15px;

    font-size: 15px;

  }

  .form_btn {

    height: 52px;

    font-size: 15px;

    border-radius: 14px;

  }

  .btn-back {

    width: 52px;

    height: 52px;

    min-width: 52px;

    border-radius: 14px;

  }

  .footer_bottom {

    margin-top: 24px;

    padding-top: 18px;

  }

  .footer_bottom p {

    font-size: 13px;

  }

}


/*==============================================
MOBILE
==============================================*/

@media (max-width:576px) {

  .main_wrapper {

    padding: 20px 12px;

  }

  .main_container {

    width: 100%;

  }

  .form_card {

    padding: 22px 18px;

    border-radius: 18px;

  }

  .logo_img {

    height: 56px;

  }

  .form_logo {

    margin-bottom: 10px;

  }

  .form_logo h1 {

    font-size: 21px;

  }

  .form_title {

    font-size: 12px;

    line-height: 20px;

  }

  .form-floating {

    margin-bottom: 14px;

  }

  .form-floating>.form-control {

    height: 50px;

    /* padding-left:45px; */

    /* padding-right:42px; */

    font-size: 13px;

    border-radius: 12px;

  }

  .form-floating>label {

    padding-left: 10px;

    font-size: 12px;

  }

  .input_icon {

    left: 15px;

    font-size: 13px;

  }

  .password-toggle {

    right: 14px;

    font-size: 14px;

  }

  .form_btn {

    height: 50px;

    font-size: 14px;

    border-radius: 12px;

  }

  .btn-back {

    width: 50px;

    height: 50px;

    min-width: 50px;

    border-radius: 12px;

  }

  .form_check-label {

    font-size: 12px;

  }

  .forgot_link {

    font-size: 12px;

  }

  .footer_bottom {

    margin-top: 20px;

    padding-top: 16px;

  }

  .footer_bottom p {

    font-size: 12px;

  }

}


/*==============================================
EXTRA SMALL DEVICES
==============================================*/

@media (max-width:380px) {

  .form_card {

    padding: 18px 15px;

  }

  .logo_img {

    height: 50px;

  }

  .form_logo h1 {

    font-size: 19px;

  }

  .form-floating>.form-control {

    height: 48px;

    font-size: 12px;

  }

  .form-floating>label {

    font-size: 11px;

  }

  .form_btn {

    height: 48px;

    font-size: 13px;

  }

}


/*==============================================
SCROLLBAR
==============================================*/

::-webkit-scrollbar {

  width: 8px;

}

::-webkit-scrollbar-track {

  background: #080808;

}

::-webkit-scrollbar-thumb {

  background: linear-gradient(180deg,

      #FFE39A,

      #CF993A,

      #A87417);

  border-radius: 20px;

}

::-webkit-scrollbar-thumb:hover {

  background: #CF993A;

}


/*==============================================
TEXT SELECTION
==============================================*/

::selection {

  background: #CF993A;

  color: #111;

}

::-moz-selection {

  background: #CF993A;

  color: #111;

}

/*==============================================
PREMIUM EXTRA EFFECTS
CONTINUE CSS
==============================================*/


/*=========================
CARD INNER GLOW
=========================*/

.form_card .inner-glow {

  position: absolute;

  inset: 0;

  pointer-events: none;

  border-radius: inherit;

  overflow: hidden;

}

.form_card .inner-glow::before {

  content: "";

  position: absolute;

  left: -30%;

  top: -30%;

  width: 160%;

  height: 160%;

  background:

    radial-gradient(circle,

      rgba(255, 225, 150, .08),

      transparent 60%);

  animation: rotateGlow 18s linear infinite;

}

@keyframes rotateGlow {

  from {

    transform: rotate(0deg);

  }

  to {

    transform: rotate(360deg);

  }

}


/*=========================
TOP BORDER LIGHT
=========================*/

.form_card .top-light {

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 2px;

  background:

    linear-gradient(90deg,

      transparent,

      #FFE39A,

      #CF993A,

      transparent);

  animation: topLight 4s linear infinite;

}

@keyframes topLight {

  0% {

    transform: translateX(-100%);

  }

  100% {

    transform: translateX(100%);

  }

}


/*=========================
BOTTOM BORDER LIGHT
=========================*/

.form_card .bottom-light {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 2px;

  background:

    linear-gradient(90deg,

      transparent,

      #CF993A,

      #FFE39A,

      transparent);

  animation: bottomLight 5s linear infinite reverse;

}

@keyframes bottomLight {

  from {

    transform: translateX(-100%);

  }

  to {

    transform: translateX(100%);

  }

}


/*=========================
INPUT HOVER GLOW
=========================*/

.form-floating {

  transition: .35s;

}

.form-floating:hover {

  transform: translateY(-2px);

}

.form-floating::after {

  content: "";

  position: absolute;

  left: 50%;

  bottom: 0;

  width: 0;

  height: 2px;

  transform: translateX(-50%);

  background:

    linear-gradient(90deg,

      transparent,

      #FFE39A,

      #CF993A,

      transparent);

  transition: .45s;

}

.form-floating:hover::after {

  width: 100%;

}


/*=========================
BUTTON GLOW
=========================*/

.form_btn {

  isolation: isolate;

}

.form_btn::after {

  content: "";

  position: absolute;

  inset: -2px;

  border-radius: inherit;

  background:

    linear-gradient(135deg,

      rgba(255, 225, 150, .35),

      rgba(207, 153, 58, .25),

      transparent);

  z-index: -1;

  filter: blur(18px);

  opacity: 0;

  transition: .4s;

}

.form_btn:hover::after {

  opacity: 1;

}


/*=========================
LOGO ROTATING HALO
=========================*/

.form_logo {

  position: relative;

}

.form_logo::after {

  content: "";

  position: absolute;

  width: 120px;

  height: 120px;

  border-radius: 50%;

  border: 1px dashed rgba(207, 153, 58, .25);

  animation: haloRotate 15s linear infinite;

}

@keyframes haloRotate {

  from {

    transform: rotate(0deg);

  }

  to {

    transform: rotate(360deg);

  }

}


/*=========================
SMALL GOLD STARS
=========================*/

.star {

  position: absolute;

  width: 2px;

  height: 2px;

  background: #fff;

  border-radius: 50%;

  box-shadow:

    0 0 8px #CF993A,

    0 0 15px #FFE39A;

  animation: starBlink 2.8s infinite;

}

@keyframes starBlink {

  0%, 100% {

    opacity: .2;

    transform: scale(1);

  }

  50% {

    opacity: 1;

    transform: scale(2);

  }

}


/*=========================
PREMIUM FADE
=========================*/

.fade-up {

  animation: fadeUp .8s ease both;

}

@keyframes fadeUp {

  from {

    opacity: 0;

    transform:

      translateY(35px);

  }

  to {

    opacity: 1;

    transform:

      translateY(0);

  }

}


/*=========================
CARD SHADOW
=========================*/

.form_card:hover {

  filter:

    drop-shadow(0 30px 80px rgba(0, 0, 0, .45));

}



/*=========================================
CRYPTO ANIMATION
=========================================*/

.crypto-animation {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

.floating-coin {
  position: absolute;
  bottom: -120px;
  width: 60px;
  height: 60px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #CF993A;
  font-size: 26px;

  background: rgba(207, 153, 58, .08);

  border: 1px solid rgba(207, 153, 58, .15);

  backdrop-filter: blur(15px);

  box-shadow:
    0 0 20px rgba(207, 153, 58, .20),
    inset 0 0 15px rgba(255, 255, 255, .05);

  animation: floatingCoin linear infinite;
}

.floating-coin i {
  animation: rotateCoin 6s linear infinite;
}


/* Left */

.coin-1 {
  left: 8%;
  animation-duration: 18s;
}


/* Center */

.coin-2 {
  left: 50%;
  animation-duration: 14s;
  animation-delay: 3s;
}


/* Right */

.coin-3 {
  right: 8%;
  animation-duration: 20s;
  animation-delay: 6s;
}


/*=========================================
BOTTOM TO TOP
=========================================*/

@keyframes floatingCoin {

  0% {

    transform:
      translateY(0) rotate(0deg) scale(.4);

    opacity: 0;

  }

  10% {

    opacity: .4;

  }

  30% {

    opacity: 1;

  }

  70% {

    opacity: 1;

  }

  100% {

    transform:
      translateY(-120vh) rotate(360deg) scale(1);

    opacity: 0;

  }

}


/*=========================================
ICON ROTATE
=========================================*/

@keyframes rotateCoin {

  from {

    transform: rotateY(0deg);

  }

  to {

    transform: rotateY(360deg);

  }

}


/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:768px) {

  .floating-coin {

    width: 46px;
    height: 46px;
    font-size: 20px;

  }

}

@media(max-width:576px) {

  .coin-2 {

    left: 45%;

  }

}

.form-floating.form_phn_main.mb-3 {
  display: flex;
  gap: 8px;
}

input#countryCode1 {
  padding: 12px;
  width: 70px;
}

.form-floating.mb-3.otp-div {
  display: flex;
  align-items: center;
}


.form-floating>.form-control-plaintext:focus, .form-floating>.form-control-plaintext:not(:placeholder-shown), .form-floating>.form-control:focus, .form-floating>.form-control:not(:placeholder-shown) {
    padding-top: 0;
    padding-bottom: 0;
    /* padding-top: 1.625rem; */
    /* padding-bottom: .625rem; */
}