@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Langar&display=swap');

/* preflight */
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
body,
p,
pre {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

img,
video {
  max-width: 100%;
  height: auto;
}

*,
::before,
::after {
  border-width: 0;
  border-style: solid;
  border-color: theme('borderColor.DEFAULT', currentColor);
}

/* copyright */
.copyright {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1rem;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 599px) {
  .copyright {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
  }
}

/* letters */
/* h  */
.h {
  background-image: url(./images/letters/h.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  width: 57.75px;
  height: 72px;
  cursor: grab;
}
.h_t {
  background-image: url(./images/letters_dot/h.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  width: 57.75px;
  height: 72px;
}
.h_t.h-place--droppable {
  background-image: url(./images/letters/h.svg);
  opacity: 50%;
}
.h_bg_none {
  background-image: none;
}

.h1 {
  width: 61.75px;
  height: 76px;
}

.lottie_h {
  width: 300px;
  height: 300px;
  position: absolute;
  margin-top: -110px;
  margin-left: -120px;
}
@media (max-width: 599px) {
  .h,
  .h_t {
    width: 38.5px;
    height: 48px;
  }
  .h1 {
    width: 40.5px;
    height: 50px;
  }
  .lottie_h {
    margin-top: -120px;
    margin-left: -130px;
  }
}
/* @media (max-width: 799px) {
  .h,
  .h_t {
    width: 38.5px;
  }
  .h1 {
    width: 40.5px;
  }
  .lottie_h {
    margin-top: -70px;
    margin-left: -130px;
  }
} */

.h.hide_t {
  background: none;
}
.h.drag {
  cursor: grabbing;
}

/* o1  */
.o1 {
  background-image: url(./images/letters/o.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  width: 51.75px;
  height: 48px;
  cursor: grab;
}
.o1_t {
  background-image: url(./images/letters_dot/o.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  width: 51.75px;
  height: 48px;
}
.o1_t.o1-place--droppable {
  background-image: url(./images/letters/o.svg);
  opacity: 50%;
}
.o1_bg_none {
  background-image: none;
}

.o11 {
  width: 54.75px;
  height: 52px;
}

.lottie_o1 {
  width: 300px;
  height: 300px;
  position: absolute;
  margin-top: -125px;
  margin-left: -125px;
  z-index: 0;
}
/* @media (max-width: 799px) {
  .o1,
  .o1_t {
    width: 51.75px;
  }
  .o11 {
    width: 54.75px;
  }
  .lottie_o1 {
    margin-top: -75px;
    margin-left: -125px;
  }
} */
@media (max-width: 599px) {
  .o1,
  .o1_t {
    width: 34.5px;
    height: 32px;
  }
  .o11 {
    width: 36.5px;
    height: 34px;
  }
  .lottie_o1 {
    margin-top: -135px;
    margin-left: -135px;
  }
}

.o1.hide_t {
  background: none;
}
.o1.drag {
  cursor: grabbing;
}

/* o2  */
.o2 {
  background-image: url(./images/letters/o.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  width: 51.75px;
  height: 48px;
  cursor: grab;
}
.o2_t {
  background-image: url(./images/letters_dot/o.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  width: 51.75px;
  height: 48px;
}
.o2_t.o2-place--droppable {
  background-image: url(./images/letters/o.svg);
  opacity: 50%;
}
.o2_bg_none {
  background-image: none;
}

.o21 {
  width: 54.75px;
  height: 52px;
}
.lottie_o2 {
  width: 300px;
  height: 300px;
  position: absolute;
  margin-top: -125px;
  margin-left: -125px;
  z-index: 0;
}
/* @media (max-width: 799px) {
  .o2,
  .o2_t {
    width: 51.75px;
  }
  .o21 {
    width: 54.75px;
  }
  .lottie_o2 {
    margin-top: -75px;
    margin-left: -125px;
  }
} */
@media (max-width: 599px) {
  .o2,
  .o2_t {
    width: 34.5px;
    height: 32px;
  }
  .o21 {
    width: 36.5px;
    height: 34px;
  }
  .lottie_o2 {
    margin-top: -135px;
    margin-left: -135px;
  }
}
.o2.hide_t {
  background: none;
}
.o2.drag {
  cursor: grabbing;
}

/* o3  */
.o3 {
  background-image: url(./images/letters/o.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  width: 51.75px;
  height: 48px;
  cursor: grab;
}
.o3_t {
  background-image: url(./images/letters_dot/o.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  width: 51.75px;
  height: 48px;
}
.o3_t.o3-place--droppable {
  background-image: url(./images/letters/o.svg);
  opacity: 50%;
}
.o3_bg_none {
  background-image: none;
}

.o31 {
  width: 54.75px;
  height: 52px;
}
.lottie_o3 {
  width: 300px;
  height: 300px;
  position: absolute;
  margin-top: -125px;
  margin-left: -125px;
  z-index: 0;
}
/* @media (max-width: 799px) {
  .o3,
  .o3_t {
    width: 51.75px;
  }
  .o31 {
    width: 54.75px;
  }
  .lottie_o3 {
    margin-top: -75px;
    margin-left: -125px;
  }
} */
@media (max-width: 599px) {
  .o3,
  .o3_t {
    width: 34.5px;
    height: 32px;
  }
  .o31 {
    width: 36.5px;
    height: 34px;
  }
  .lottie_o3 {
    margin-top: -135px;
    margin-left: -135px;
  }
}
.o3.hide_t {
  background: none;
}
.o3.drag {
  cursor: grabbing;
}

/* m  */
.m {
  background-image: url(./images/letters/m.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  width: 88px;
  height: 47px;
  cursor: grab;
}
.m_t {
  background-image: url(./images/letters_dot/m.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  width: 88px;
  height: 47px;
}
.m_t.m-place--droppable {
  background-image: url(./images/letters/m.svg);
  opacity: 50%;
}
.m_bg_none {
  background-image: none;
}

.m1 {
  width: 91px;
  height: 51px;
}
.lottie_m {
  width: 300px;
  height: 300px;
  position: absolute;
  margin-top: -125px;
  margin-left: -105px;
  z-index: 0;
}
/* @media (max-width: 799px) {
  .m,
  .m_t {
    width: 88px;
  }
  .m1 {
    width: 91px;
  }
  .lottie_m {
    margin-top: -75px;
    margin-left: -105px;
  }
} */
@media (max-width: 599px) {
  .m,
  .m_t {
    width: 58.666px;
    height: 32px;
  }
  .m1 {
    width: 60.666px;
    height: 34px;
  }
  .lottie_m {
    margin-top: -130px;
    margin-left: -120px;
  }
}
.m.hide_t {
  background: none;
}
.m.drag {
  cursor: grabbing;
}

/* a  */
.a {
  background-image: url(./images/letters/a.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  width: 51px;
  height: 48px;
  cursor: grab;
}
.a_t {
  background-image: url(./images/letters_dot/a.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  width: 51px;
  height: 48px;
}
.a_t.a-place--droppable {
  background-image: url(./images/letters/a.svg);
  opacity: 50%;
}
.a_bg_none {
  background-image: none;
}

.a1 {
  width: 54px;
  height: 52px;
}

.lottie_a {
  width: 300px;
  height: 300px;
  position: absolute;
  margin-top: -125px;
  margin-left: -130px;
  z-index: 0;
}
/* @media (max-width: 799px) {
  .a,
  .a_t {
    width: 51px;
  }
  .a1 {
    width: 54px;
  }
  .lottie_a {
    margin-top: -75px;
    margin-left: -130px;
  }
} */
@media (max-width: 599px) {
  .a,
  .a_t {
    width: 34px;
    height: 32px;
  }
  .a1 {
    width: 36px;
    height: 34px;
  }
  .lottie_a {
    margin-top: -130px;
    margin-left: -135px;
  }
}
.a.hide_t {
  background: none;
}
.a.drag {
  cursor: grabbing;
}

/* n  */
.n {
  background-image: url(./images/letters/n.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  width: 57.75px;
  height: 47px;
  cursor: grab;
}
.n_t {
  background-image: url(./images/letters_dot/n.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  width: 57.75px;
  height: 47px;
}
.n_t.n-place--droppable {
  background-image: url(./images/letters/n.svg);
  opacity: 50%;
}
.n_bg_none {
  background-image: none;
}

.n1 {
  width: 60.75px;
  height: 51px;
}
.lottie_n {
  width: 300px;
  height: 300px;
  position: absolute;
  margin-top: -125px;
  margin-left: -120px;
  z-index: 0;
}
/* @media (max-width: 799px) {
  .n,
  .n_t {
    width: 57.75px;
  }
  .n1 {
    width: 60.75px;
  }
  .lottie_n {
    margin-top: -70px;
    margin-left: -120px;
  }
} */
@media (max-width: 599px) {
  .n,
  .n_t {
    width: 38.5px;
    height: 32px;
  }
  .n1 {
    width: 40.5px;
    height: 34px;
  }
  .lottie_n {
    margin-top: -130px;
    margin-left: -130px;
  }
}
.n.hide_t {
  background: none;
}
.n.drag {
  cursor: grabbing;
}

/* s  */
.s {
  background-image: url(./images/letters/s.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  width: 41.75px;
  height: 48px;
  cursor: grab;
}
.s_t {
  background-image: url(./images/letters_dot/s.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  width: 41.75px;
  height: 48px;
}
.s_t.s-place--droppable {
  background-image: url(./images/letters/s.svg);
  opacity: 50%;
}
.s_bg_none {
  background-image: none;
}

.s1 {
  width: 44.75px;
  height: 52px;
}
.lottie_s {
  width: 300px;
  height: 300px;
  position: absolute;
  margin-top: -125px;
  margin-left: -130px;
  z-index: 0;
}
/* @media (max-width: 799px) {
  .s,
  .s_t {
    width: 41.75px;
  }
  .s1 {
    width: 44.75px;
  }
  .lottie_s {
    margin-top: -75px;
    margin-left: -130px;
  }
} */
@media (max-width: 599px) {
  .s,
  .s_t {
    width: 27.833px;
    height: 32px;
  }
  .s1 {
    width: 29.833px;
    height: 34px;
  }
  .lottie_s {
    margin-top: -135px;
    margin-left: -135px;
  }
}
.s.hide_t {
  background: none;
}
.s.drag {
  cursor: grabbing;
}

/* c  */
.c {
  background-image: url(./images/letters/c.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  width: 45.5px;
  height: 48px;
  cursor: grab;
}
.c_t {
  background-image: url(./images/letters_dot/c.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  width: 45.5px;
  height: 48px;
}
.c_t.c-place--droppable {
  background-image: url(./images/letters/c.svg);
  opacity: 50%;
}
.c_bg_none {
  background-image: none;
}

.c1 {
  width: 48.5px;
  height: 52px;
}
.lottie_c {
  width: 300px;
  height: 300px;
  position: absolute;
  margin-top: -125px;
  margin-left: -125px;
  z-index: 0;
}
/* @media (max-width: 799px) {
  .c,
  .c_t {
    width: 45.5px;
  }
  .c1 {
    width: 48.5px;
  }
  .lottie_c {
    margin-top: -75px;
    margin-left: -125px;
  }
} */
@media (max-width: 599px) {
  .c,
  .c_t {
    width: 30.333px;
    height: 32px;
  }
  .c1 {
    width: 32.333px;
    height: 34px;
  }
  .lottie_c {
    margin-top: -135px;
    margin-left: -135px;
  }
}
.c.hide_t {
  background: none;
}
.c.drag {
  cursor: grabbing;
}

/* dot  */
.dot {
  background-image: url(./images/letters/dot.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  width: 19.75px;
  height: 21px;
  cursor: grab;
}
.dot_t {
  background-image: url(./images/letters_dot/dot.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  width: 19.75px;
  height: 21px;
}
.dot_t.dot-place--droppable {
  background-image: url(./images/letters/dot.svg);
  opacity: 50%;
}
.dot_bg_none {
  background-image: none;
}

.dot1 {
  width: 22.75px;
  height: 25px;
}
.lottie_dot {
  width: 300px;
  height: 300px;
  position: absolute;
  margin-top: -140px;
  margin-left: -140px;
  z-index: 0;
}
/* @media (max-width: 799px) {
  .dot,
  .dot_t {
    width: 19.75px;
  }
  .dot1 {
    width: 22.75px;
  }
  .lottie_dot {
    margin-top: -60px;
    margin-left: -140px;
  }
} */
@media (max-width: 599px) {
  .dot,
  .dot_t {
    width: 13.166px;
    height: 14px;
  }
  .dot1 {
    width: 15.166px;
    height: 16px;
  }
  .lottie_dot {
    margin-top: -142px;
    margin-left: -142px;
  }
}
.dot.hide_t {
  background: none;
}
.dot.drag {
  cursor: grabbing;
}

/* profile */
.lottie_style {
  width: 300px;
  height: 300px;
  position: absolute;
  margin-top: -115px;
}
/* @media (max-width: 799px) {
  .lottie_style {
    margin-top: -115px;
  }
} */

/* skm */
.skm {
  background-image: url('./images/profiles/suvarnesh.jpg');
  width: 50px;
  height: 50px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 100%;
  cursor: grab;
  z-index: 2;
}
.skm--place {
  background-image: url('./images/profiles/gray.png');
  width: 50px;
  height: 50px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 100%;
  z-index: 1;
}
.skm1 {
  width: 65px;
  height: 65px;
}

/* @media (max-width: 599px) {
  .skm,
  .skm--place {
    width: 40px;
    height: 40px;
  }
  .skm1 {
    width: 55px;
    height: 55px;
  }
} */
/* @media (max-width: 799px) {
  .skm,
  .skm--place {
    width: 60px;
    height: 60px;
  }
  .skm1 {
    width: 75px;
    height: 75px;
  }
} */
.skm.hide_t {
  background: none;
}
.item1.drag {
  cursor: grabbing;
}

/* ank */
.ank {
  background-image: url('./images/profiles/anagha.jpg');
  width: 50px;
  height: 50px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 100%;
  cursor: grab;
  z-index: 2;
}
.ank--place {
  background-color: #f0f0f0;
  width: 50px;
  height: 50px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 100%;
  z-index: 1;
}
.ank1 {
  width: 65px;
  height: 65px;
}
/* @media (max-width: 599px) {
  .ank,
  .ank--place {
    width: 40px;
    height: 40px;
  }
  .ank1 {
    width: 55px;
    height: 55px;
  }
} */
/* @media (max-width: 799px) {
  .ank,
  .ank--place {
    width: 60px;
    height: 60px;
  }
  .ank1 {
    width: 75px;
    height: 75px;
  }
} */
.ank.hide_t {
  background: none;
}
.ank.drag {
  cursor: grabbing;
}

/* jobz */
.jobz {
  background-image: url('./images/profiles/jobin.jpg');
  width: 50px;
  height: 50px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 100%;
  cursor: grab;
  z-index: 2;
}
.jobz--place {
  background-color: #f0f0f0;
  width: 50px;
  height: 50px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 100%;
  z-index: 1;
}
.jobz1 {
  width: 65px;
  height: 65px;
}
/* @media (max-width: 599px) {
  .jobz,
  .jobz--place {
    width: 40px;
    height: 40px;
  }
  .jobz1 {
    width: 55px;
    height: 55px;
  }
} */
/* @media (max-width: 799px) {
  .jobz,
  .jobz--place {
    width: 60px;
    height: 60px;
  }
  .jobz1 {
    width: 90px;
    height: 90px;
  }
} */
.jobz.hide_t {
  background: none;
}
.jobz.drag {
  cursor: grabbing;
}

/* ab */
.ab {
  background-image: url('./images/profiles/abid.jpg');
  width: 50px;
  height: 50px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 100%;
  cursor: grab;
  z-index: 2;
}
.ab--place {
  background-color: #f0f0f0;
  width: 50px;
  height: 50px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 100%;
  z-index: 1;
}
.ab1 {
  width: 65px;
  height: 65px;
}
/* @media (max-width: 599px) {
  .ab,
  .ab--place {
    width: 40px;
    height: 40px;
  }
  .ab1 {
    width: 55px;
    height: 55px;
  }
} */
/* @media (max-width: 799px) {
  .ab,
  .ab--place {
    width: 60px;
    height: 60px;
  }
  .ab1 {
    width: 90px;
    height: 90px;
  }
} */
.ab.hide_t {
  background: none;
}
.ab.drag {
  cursor: grabbing;
}

/* ad */
.ad {
  background-image: url('./images/profiles/adil.jpg');
  width: 50px;
  height: 50px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 100%;
  cursor: grab;
  z-index: 2;
}
.ad--place {
  background-color: #f0f0f0;
  width: 50px;
  height: 50px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 100%;
  z-index: 1;
}
.ad1 {
  width: 65px;
  height: 65px;
}
/* @media (max-width: 599px) {
  .ad,
  .ad--place {
    width: 40px;
    height: 40px;
  }
  .ad1 {
    width: 55px;
    height: 55px;
  }
} */
/* @media (max-width: 799px) {
  .ad,
  .ad--place {
    width: 60px;
    height: 60px;
  }
  .ad1 {
    width: 90px;
    height: 90px;
  }
} */

.ad.hide_t {
  background: none;
}
.ad.drag {
  cursor: grabbing;
}

/* laz */
.laz {
  background-image: url('./images/profiles/lazim.jpg');
  width: 50px;
  height: 50px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 100%;
  cursor: grab;
  z-index: 2;
}
.laz--place {
  background-color: #f0f0f0;
  width: 50px;
  height: 50px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 100%;
  z-index: 1;
}
.laz1 {
  width: 65px;
  height: 65px;
}
/* @media (max-width: 599px) {
  .laz,
  .laz--place {
    width: 40px;
    height: 40px;
  }
  .laz1 {
    width: 55px;
    height: 55px;
  }
} */
/* @media (max-width: 799px) {
  .laz,
  .laz--place {
    width: 60px;
    height: 60px;
  }
  .laz1 {
    width: 90px;
    height: 90px;
  }
} */
.laz.hide_t {
  background: none;
}
.laz.drag {
  cursor: grabbing;
}

/* jess */
.jess {
  background-image: url('./images/profiles/jesswin.jpg');
  width: 50px;
  height: 50px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 100%;
  cursor: grab;
  z-index: 2;
}
.jess--place {
  background-color: #f0f0f0;
  width: 50px;
  height: 50px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 100%;
  z-index: 1;
}
.jess1 {
  width: 65px;
  height: 65px;
}

/* @media (max-width: 599px) {
  .jess,
  .jess--place {
    width: 40px;
    height: 40px;
  }
  .jess1 {
    width: 55px;
    height: 55px;
  }
} */
/* @media (max-width: 799px) {
  .jess,
  .jess--place {
    width: 60px;
    height: 60px;
  }
  .jess1 {
    width: 90px;
    height: 90px;
  }
} */

.jess.hide_t {
  background: none;
}
.jess.drag {
  cursor: grabbing;
}

.sec1 {
  bottom: 55px;
}
.sec2 {
  bottom: 70px;
}
.sec3 {
  bottom: 40px;
}
.sec4 {
  bottom: 90px;
}
.sec5 {
  bottom: 30px;
}
.sec6 {
  bottom: 0px;
}
.sec7 {
  bottom: 0px;
}
.sec8 {
  bottom: 100px;
}
.sec9 {
  bottom: 0px;
}
.sec10 {
  bottom: 140px;
}

@media (min-width: 799px) and (min-height: 759px) {
  .sec1 {
    bottom: 55px;
  }
  .sec2 {
    bottom: 70px;
  }
  .sec3 {
    bottom: 40px;
  }
  .sec4 {
    bottom: 90px;
  }
  .sec5 {
    bottom: 30px;
  }
  .sec6 {
    bottom: 0px;
  }
  .sec7 {
    bottom: 0px;
  }
  .sec8 {
    bottom: 100px;
  }
  .sec9 {
    bottom: 0px;
  }
  .sec10 {
    bottom: 140px;
  }
  .pos1 {
    left: -120px;
  }
  .pos2 {
    left: -155px;
  }
  .pos3 {
    left: -20px;
  }
  .pos4 {
    left: 20px;
  }
  .pos5 {
    left: 120px;
  }
  .pos6 {
    left: -70px;
  }
  .pos7 {
    left: 70px;
  }
}
@media (min-width: 1079px) and (min-height: 829px) {
  .sec1 {
    bottom: 55px;
  }
  .sec2 {
    bottom: 70px;
  }
  .sec3 {
    bottom: 40px;
  }
  .sec4 {
    bottom: 90px;
  }
  .sec5 {
    bottom: 30px;
  }
  .sec6 {
    bottom: 0px;
  }
  .sec7 {
    bottom: 0px;
  }
  .sec8 {
    bottom: 100px;
  }
  .sec9 {
    bottom: 0px;
  }
  .sec10 {
    bottom: 130px;
  }
}

.place-dropzone {
  background-image: url('./images/profiles/gray_dot.png');
  width: 50px;
  height: 50px;
}

.collide-dropzone {
  background-image: url('./images/profiles/gray_warning.png');
  width: 50px;
  height: 50px;
}

.half {
  height: 50vh;
}

.qtr {
  height: 70vh;
}

.tab {
  height: 80vh;
}

.full {
  height: 100vh;
}
.item_animated1 {
  animation: drop 0.5s cubic-bezier(0, 0, 0.35, 1) forwards;
}
.item_animated2 {
  animation: drop 1s cubic-bezier(0, 0, 0.35, 1) forwards;
}
.item_animated3 {
  animation: drop 1.5s cubic-bezier(0, 0, 0.35, 1) forwards;
}
.item_animated4 {
  animation: drop 2s cubic-bezier(0, 0, 0.35, 1) forwards;
}
.item_animated5 {
  animation: drop 2.5s cubic-bezier(0, 0, 0.35, 1) forwards;
}
.item_animated6 {
  animation: drop 3s cubic-bezier(0, 0, 0.35, 1) forwards;
}
.item_animated7 {
  animation: drop 3.5s cubic-bezier(0, 0, 0.35, 1) forwards;
}
.item_animated8 {
  animation: drop 4s cubic-bezier(0, 0, 0.35, 1) forwards;
}
.item_animated9 {
  animation: drop 4.5s cubic-bezier(0, 0, 0.35, 1) forwards;
}
.item_animated10 {
  animation: drop 5s cubic-bezier(0, 0, 0.35, 1) forwards;
}

@keyframes drop {
  0% {
    transform: translateY(-100px);
    animation-timing-function: ease-in;
  }
  40% {
    transform: translateY(-30px);
    animation-timing-function: ease-in;
  }
  65% {
    transform: translateY(-20px);
    animation-timing-function: ease-in;
  }
  82% {
    transform: translateY(-10px);
    animation-timing-function: ease-in;
  }
  92% {
    transform: translateY(-5px);
    animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87%,
  97%,
  100% {
    transform: translateY(0px);
    animation-timing-function: ease-out;
  }
}

.shake_anime {
  -webkit-animation-name: shake;
  -webkit-animation-duration: 0.8s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
  -webkit-transform-origin: 50% 100%;
}

@-webkit-keyframes shake {
  0% {
    -webkit-transform: translate(2px, 1px) rotate(0deg);
  }
  10% {
    -webkit-transform: translate(-1px, -2px) rotate(-2deg);
  }
  20% {
    -webkit-transform: translate(-3px, 0px) rotate(3deg);
  }
  30% {
    -webkit-transform: translate(0px, 2px) rotate(0deg);
  }
  40% {
    -webkit-transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    -webkit-transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    -webkit-transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    -webkit-transform: translate(2px, 1px) rotate(-2deg);
  }
  80% {
    -webkit-transform: translate(-1px, -1px) rotate(4deg);
  }
  90% {
    -webkit-transform: translate(2px, 2px) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(1px, -2px) rotate(-1deg);
  }
}

.lottie_hide {
  display: none;
}

.lottie_vis {
  display: grid;
}

/* tailwind css update */

.twhome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}

.twupper {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 40%;
  width: 100%;
  background-color: #d1ff69;
  align-items: center;
  overflow: hidden;
  padding-top: 40px;
}
@media (min-width: 640px) {
  .twupper {
    height: 50%;
  }
}

.twuppertop {
  display: flex;
  position: absolute;
  align-items: end;
}

.twupperbottom {
  display: flex;
  position: absolute;
  left: 50%;
  bottom: 16px;
}
@media (min-width: 800px) {
  .twupperbottom {
    bottom: 24px;
  }
}

.twsection1 {
  position: absolute;
  left: -100px;
}
@media (min-width: 600px) {
  .twsection1 {
    left: -120px;
  }
}
.twpot1 {
  z-index: 50;
}

.twsection2 {
  position: absolute;
  left: -155px;
}
@media (min-width: 600px) {
  .twsection2 {
    left: -175px;
  }
}
.twpot2 {
  z-index: 50;
}

.twsection3 {
  position: absolute;
  left: 0px;
}
@media (min-width: 600px) {
  .twsection3 {
    left: -20px;
  }
}
.twpot3 {
  z-index: 50;
}

.twsection4 {
  position: absolute;
  left: 45px;
}
@media (min-width: 600px) {
  .twsection4 {
    left: 25px;
  }
}
.twpot4 {
  z-index: 50;
}

.twsection5 {
  position: absolute;
  left: 120px;
}
@media (min-width: 600px) {
  .twsection5 {
    left: 100px;
  }
}
.twpot5 {
  z-index: 50;
}

.twsection6 {
  position: absolute;
  left: -50px;
}
@media (min-width: 600px) {
  .twsection6 {
    left: -70px;
  }
}
.twpot6 {
  z-index: 50;
}

.twsection7 {
  position: absolute;
  left: -150px;
}
@media (min-width: 600px) {
  .twsection7 {
    left: -170px;
  }
}
.twpot7 {
  z-index: 50;
}

.twsection8 {
  position: absolute;
  left: -50px;
}
@media (min-width: 600px) {
  .twsection8 {
    left: -70px;
  }
}
.twpot8 {
  z-index: 50;
}

.twsection9 {
  position: absolute;
  left: 50px;
}
@media (min-width: 600px) {
  .twsection9 {
    left: 30px;
  }
}
.twpot9 {
  z-index: 50;
}

.twsection10 {
  position: absolute;
  left: 80px;
}
@media (min-width: 600px) {
  .twsection10 {
    left: 0px;
  }
}
.twpot10 {
  z-index: 50;
}

.twlower {
  height: 50%;
  z-index: 40;
  position: relative;
}

.tw-lower-button-div {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -16px;
  cursor: pointer;
}
@media (min-width: 800px) {
  .tw-lower-button-div {
    margin-top: -24px;
  }
}

.tw-lower-button {
  display: flex;
  font-family: 'DM Sans', sans-serif;
  flex-wrap: wrap;
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1rem;
  color: black;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  background-color: white;
  border-radius: 21px;
  border-width: 1px;
  border-color: #f0f0f0;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.12em;
}
@media (min-width: 800px) {
  .tw-lower-button {
    font-size: 1rem;
    line-height: 1.5rem;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.tw-lower-button-span {
  font-weight: 500;
  text-decoration-line: underline;
}

.tw-lower-div1 {
  background-color: white;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 1.25rem;
}
@media (min-width: 800px) {
  .tw-lower-div1 {
    padding-left: 120px;
    padding-right: 120px;
  }
}

.tw-lower-div2 {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-width: 1px;
  border-color: #0000001a;
  border-radius: 0.25rem;
}

.tw-block1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 0.25rem;
}
@media (min-width: 800px) {
  .tw-block1 {
    row-gap: 0.75rem;
  }
}

.tw-block1-txt {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.5rem;
  color: black;
}

.tw-block2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 0.25rem;
}
@media (min-width: 800px) {
  .tw-block2 {
    row-gap: 0.75rem;
  }
}

.tw-block2-txt {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.5rem;
  color: black;
}

.tw-block3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 0.25rem;
}
@media (min-width: 800px) {
  .tw-block3 {
    row-gap: 0.75rem;
  }
}

.tw-block3-txt {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.5rem;
  color: black;
}

.tw-block4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 0.25rem;
}
@media (min-width: 800px) {
  .tw-block4 {
    row-gap: 0.75rem;
  }
}

.tw-block4-txt {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.5rem;
  color: black;
}

.tw-block5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 0.25rem;
}
@media (min-width: 800px) {
  .tw-block5 {
    row-gap: 0.75rem;
  }
}

.tw-block5-txt {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.5rem;
  color: black;
}

.tw-block6 {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 0.25rem;
}
@media (min-width: 800px) {
  .tw-block6 {
    row-gap: 0.75rem;
  }
}

.tw-block6-txt {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.5rem;
  color: black;
}

.tw-block7 {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 0.25rem;
}
@media (min-width: 800px) {
  .tw-block7 {
    row-gap: 0.75rem;
  }
}

.tw-block7-txt {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.5rem;
  color: black;
}

.tw-drop-div {
  position: absolute;
  left: 50%;
  margin-top: 2.5rem;
}

.tw-drop1 {
  position: absolute;
  left: -120px;
}

.tw-drop2 {
  position: absolute;
  left: -155px;
}

.tw-drop3 {
  position: absolute;
  left: -20px;
}
.tw-drop4 {
  position: absolute;
  left: 20px;
}
.tw-drop5 {
  position: absolute;
  left: 120px;
}
.tw-drop6 {
  position: absolute;
  left: -70px;
}
.tw-drop7 {
  position: absolute;
  left: 70px;
}

/* about */
.tw-about-div {
  padding-top: 3.5rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: white;
  z-index: 50;
}
@media (min-width: 768px) {
  .tw-about-div {
    padding-top: 60px;
    padding-left: 13rem;
    padding-right: 13rem;
  }
}

.tw-about-div-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tw-about-div-ctn {
  color: black;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  row-gap: 3.5rem;
  padding-top: 2.5rem;
}
@media (min-width: 768px) {
  .tw-about-div-ctn {
    row-gap: 5rem;
    padding-top: 5rem;
  }
}

.tw-about-div-ctn-h3 {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 2rem;
}
@media (min-width: 768px) {
  .tw-about-div-ctn-h3 {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}

.tw-about-div-ctn-p1 {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.75rem;
}
@media (min-width: 768px) {
  .tw-about-div-ctn-p1 {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

.tw-about-div-ctn-p2 {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tw-about-div-ctn-p2-a {
  text-decoration-line: underline;
}

.birthday-div {
  background-color: transparent;
  filter: blur(8px);
  -webkit-filter: blur(8px);
}

#birthday-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  filter: blur(0px);
  -webkit-filter: blur(0px);
  background-size: cover;
  border-radius: 50%;
  z-index: 200;
  display: none;
}

#birthday-image-img {
  border-radius: 50%;
}

#birthday-heading {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  line-height: 2.5rem;
  font-weight: 900;
  text-align: center;
  font-family: 'Langar', cursive;
  z-index: 200;
  display: none;
}
@media (min-width: 768px) {
  #birthday-heading {
    font-size: 3rem;
    line-height: 3.5rem;
  }
}

.marquee-animation {
  font-family: 'DM Sans', sans-serif;
  animation: marqueeAnimation 60s linear 0s infinite running;
}

@keyframes marqueeAnimation {
  100% {
    transform: translateX(-3312.27px);
  }
}