* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

  text-decoration: none;
  list-style: none;
  color: white;
}

@font-face {
  font-family: "Quicksand";
  font-style: normal;
  src: url("../fonts/Quicksand-VariableFont_wght.ttf");
}

html {
  scroll-behavior: smooth;
  background-color: #040612;
}

body {
  background-color: #040612;
  background-image: url("../images/digitalbooth/dark\ bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  font-family: "Quicksand";
}

/* main */
.main {
  width: 100%;
  height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
}

/* main 1 */
.main-1 {
  width: 78%;
  height: 45vw;
  margin: auto;
  background-image: url("../images/digitalbooth/bg\ main.svg");
  background-size: 80vw;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

/* main h1 */

.main-1-h1 {
  font-size: 1.47vw;
  position: absolute;
  top: 14vw;
  left: 18.3vw;
  text-align: center;
  font-weight: 500;
}

.main-1-h1 > span {
  font-size: 1vw;
  font-weight: 300;
}

/* main h2 */

.main-1-h2 {
  font-size: 5.5vw;
  position: absolute;
  top: 3vw;
  left: 24vw;
  font-weight: 800;
  text-shadow: 0.1vw 0.1vw 0.2vw rgba(255, 255, 255, 0.575);
}

/* main-1-menu */
.main-1-menu {
  display: flex;
  flex-direction: column;
  width: fit-content;
  position: absolute;
  left: 2vw;
  top: 6vw;
}

.menu-item:not(:last-child) {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 0.5vw;
  padding: 1.4vw 0;
  border-bottom: 0.1vw solid white;
  cursor: pointer;
  position: relative;
}

.menu-item:last-child {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 0.5vw;
  padding: 1.4vw 0;
  cursor: pointer;
}

.menu-item:hover img {
  transform: scale(1.2);
  transition: 0.2s;
}

.menu-item:hover > h1 {
  transform: scale(1.1);
  transition: 0.1s;
}

.menu-item > h1 {
  white-space: nowrap;
  font-size: 1vw;
  text-align: center;
  font-weight: 400;
}

.menu-item > img {
  width: 2.5vw;
}

.main-1-item-3-tooltip {
  position: absolute;
  top: -1vw;
  height: 3vw;
  padding: 1vw;
  padding-top: 1.5vw;
  width: 9vw;
  display: flex;
  gap: 0.3vw;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background-image: url("../images/digitalbooth/item3Tooltip.svg");
  background-size: 9vw;
  background-position: center top;
  background-repeat: no-repeat;

  opacity: 0;
  visibility: hidden;
  transform: scale(0);
  animation: showContent 2s forwards;
}

@keyframes showContent {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: scale(0);
  }
  25% {
    opacity: 0;
    visibility: hidden;
    transform: scale(0);
  }
  50% {
    opacity: 0;
    visibility: hidden;
    transform: scale(0);
  }
  75% {
    opacity: 0;
    visibility: hidden;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
  }
}

.main-1-item-3-tooltip > h1 {
  font-size: 0.68vw;
  font-weight: 500;
}
.main-1-item-3-tooltip > img {
  width: 1vw;
  animation: blink 1s infinite 2s;
}

@keyframes blink {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(0.8);
  }
}

/* main-1-logos */
.main-1-logos {
  height: 8%;
  width: 65vw;
  position: absolute;
  bottom: 0.7vw;
  left: 12vw;
  overflow: hidden;
}

.logos-track {
  display: flex;
  align-items: center;
  gap: 5vw;
  width: max-content;
  animation: scroll 20s linear infinite;
}

.logos-track img {
  width: 6.2vw;
  height: 100%;
  object-fit: contain;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* main-1-spica */
.spica-stand {
  width: 13vw;
  position: absolute;
  bottom: 6vw;
  left: 15vw;
  cursor: pointer;
  transform: scale(1);
}

.spica-stand:hover {
  transform: scale(1.01) translate(0%, -2%);
}

.spica-stand-mobile {
  width: 12vw;
  position: absolute;
  bottom: 6vw;
  left: 14vw;
  cursor: pointer;
  display: none;
}

/* main-1-Bgm */
.Bgm-stand {
  width: 13vw;
  position: absolute;
  bottom: 6vw;
  left: 43vw;
  cursor: pointer;
  transform: scale(1);
}

.Bgm-stand:hover {
  transform: scale(1.01) translate(0%, -2%);
}

.Bgm-stand-mobile {
  width: 12vw;
  position: absolute;
  bottom: 6vw;
  left: 44vw;
  cursor: pointer;
  display: none;
}

/* main-1-video */
.main-1-video {
  width: 17vw;
  height: 15vw;
  background-image: url("../images/digitalbooth/videoBg.png");
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 20vw;
  left: 27vw;
  padding: 0 0.5vw;
  padding-top: 1vw;
  border-radius: 1vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.9vw;
  cursor: pointer;
}

.main-1-video:hover {
  top: 19.7vw;
}

#video {
  width: 100%;
  height: fit-content;
  border-radius: 1vw;
}

.main-1-video {
  font-size: 0.5vw;
}

.main-video-dot {
  position: absolute;
  left: 34.5vw;
  top: 30vw;
  display: none;
}

/* main-1-body */
.main-1-body {
  width: 16vw;
  height: 30vw;
  background-image: url("../images/digitalbooth/body.svg");
  background-size: 11.5vw;
  background-repeat: no-repeat;
  position: absolute;
  right: 0.7vw;
  top: 12vw;
}

.main-body-mobile {
  display: none;
}

.point {
  width: 1vw;
  position: absolute;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.point:hover {
  transform: scale(1.2);
}

.main-1-body-1 {
  left: 4.8vw;
  top: 0.3vw;
}
.main-1-body-2 {
  left: 8.5vw;
  top: 8.2vw;
}
.main-1-body-3 {
  left: 4.7vw;
  top: 10vw;
}
.main-1-body-4 {
  left: 8.5vw;
  top: 12.5vw;
}
.main-1-body-5 {
  left: 1vw;
  top: 12.5vw;
}
.main-1-body-6 {
  left: 1.5vw;
  top: 15vw;
}
.main-1-body-7 {
  left: 7.3vw;
  top: 20.8vw;
}
.main-1-body-8 {
  left: 4.8vw;
  top: 25.5vw;
}

/* main 2 */
.main-2 {
  position: absolute;
}

/* Main Modal */
.modal {
  display: none;
  position: fixed;
  z-index: 99;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
  animation: 0.5s ease;
}

.modal-content-body,
.modal-content {
  position: relative;
  background-image: url("../images/digitalbooth/bg\ modal.png");
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 0.6vw;
  color: white;
  max-width: fit-content;
  width: 100%;
  animation: fadeInModal 0.3s ease;
}

@keyframes fadeInModal {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-close {
  position: absolute;
  right: 0.5vw;
  top: 0.5vw;
  z-index: 99;
  float: right;
  padding: 0.3vw;
  border-radius: 50%;
  font-size: 1vw;
  cursor: pointer;
}

.modal-close:hover {
  color: red;
}

/* modal content */

/* body contetnt */
.content-main-1-body {
  display: flex;
  gap: 1vw;
  flex-wrap: wrap;
  height: fit-content;
  max-width: 41vw;
  padding: 2vw 4vw;
}

.body-item {
  width: 16vw;
  /* height: 41vh; */
  height: fit-content;
  background-image: url("../images/digitalbooth/bg\ items.png");
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 1vw;
  display: flex;
  flex-direction: column;
  padding: 1vw;
  gap: 1vw;
  position: relative;
}

.body-item > img {
  width: 100%;
  height: 85px;
}
.body-item > h1 {
  white-space: nowrap;
  font-size: 1.1vw;
  padding-bottom: 1vw;
  border-bottom: 0.1vw solid rgba(255, 255, 255, 0.637);
}
.body-item > ul > li {
  font-size: 0.8vw;
  margin-bottom: 0.1vw;
}

.body-tags {
  position: absolute;
  top: 0.8vw;
  right: 0.8vw;
  display: flex;
  flex-direction: column;
  gap: 0.5vw;
  align-items: end;
}

.body-tags > h1 {
  background-color: #acaaaa91;
  color: black;
  font-size: 0.8vw;
  padding: 0.3vw 0.6vw;
  border-radius: 2vw;
  font-weight: 500;
}

/* Two stand BGM & Spica */
.content-main-1-spica,
.content-main-1-Bgm {
  width: 65vw;
  background-image: url("../images/digitalbooth/stands\ bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  justify-content: space-around;
  display: flex;

  padding: 2vw 0 2vw 2vw;
}

.content-main-1-spica-right,
.content-main-1-Bgm-right {
  width: 20vw;
  display: grid;
  place-items: center;
  justify-content: left;
}

.content-main-1-spica-right > h1,
.content-main-1-Bgm-right > h1 {
  white-space: nowrap;
  font-size: 1.2vw;
  font-weight: 600;
  margin-bottom: 1vw;
  width: 90%;
}

.content-main-1-spica-right > h1 {
  margin-left: 3vw;
}

.content-main-1-spica-right > img,
.content-main-1-Bgm-right > img {
  margin-right: 1vw;
  width: 100%;
}
.content-main-1-spica-right > a,
.content-main-1-Bgm-right > a {
  white-space: nowrap;
  font-size: 1.2vw;
  padding: 0.8vw 3vw;
  border: 0.2vw solid #bd6df2;
  border-radius: 0.5vw;
  color: #bd6df2;
  font-weight: 700;
  cursor: pointer;
  margin-top: 5vw;
}

.content-main-1-spica-left,
.content-main-1-Bgm-left {
  width: 44vw;
  display: flex;
  flex-direction: column;
  gap: 2vw;
}

.content-main-1-spica-left > h1,
.content-main-1-Bgm-left > h1 {
  font-size: 1.8vw;
  white-space: nowrap;
}
.content-main-1-spica-left > h2,
.content-main-1-Bgm-left > h2 {
  width: 85%;
  font-size: 1.3vw;
  font-weight: 400;
  color: #8879b3;
}
.content-main-1-spica-left > p,
.content-main-1-Bgm-left > p {
  width: 90%;
  font-size: 1vw;
  line-height: 1.5;
}
.content-main-1-spica-left > ul,
.content-main-1-Bgm-left > ul {
  display: flex;
  flex-direction: column;
  gap: 1vw;
}
.content-main-1-spica-left > ul > li,
.content-main-1-Bgm-left > ul > li {
  display: flex;
  align-items: center;
  gap: 0.5vw;
}

.content-main-1-spica-left > ul > li > i,
.content-main-1-Bgm-left > ul > li > i {
  color: #bd6df2;
  font-size: 1.8vw;
}

.content-main-1-spica-left > ul > li > h1,
.content-main-1-Bgm-left > ul > li > h1 {
  font-weight: 300;
  font-size: 1vw;
  background-color: #c1c1c11a;
  padding: 0.5vw;
  border-radius: 0.3vw;
}

/* content our products */
.content-main-1-item-1 {
  display: flex;
  flex-direction: column;
  width: fit-content;
  padding: 2.5vw;
}

.content-main-1-item-1 > h1 {
  font-size: 1.5vw;
  font-weight: 600;
  margin-bottom: 3vw;
}

.content-main-1-item-1-bottom {
  display: flex;
  gap: 2vw;
  padding: 0 2vw;
}

.item-1-bottom-sections {
  background-image: url("../images/digitalbooth/bg\ items.png");
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 1vw;
  padding: 1vw;
  position: relative;
}

.item-1-bottom-sections > img {
  width: 19vw;
  margin-bottom: 1vw;
}

.item-1-bottom-sections > span {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  padding-bottom: 0.7vw;
  margin-bottom: 0.7vw;
  border-bottom: 0.1vw solid rgba(255, 255, 255, 0.637);
}
.item-1-bottom-sections > span > img {
  width: 1.7vw;
}
.item-1-bottom-sections > span > h1 {
  font-size: 1.2vw;
}

.item-1-bottom-sections > p {
  font-size: 0.9vw;
}

.item-1-bottom-sections-tags {
  position: absolute;
  top: 1vw;
  right: 1vw;
  display: flex;
  flex-direction: column;
  gap: 0.5vw;
  align-items: end;
}

.item-1-bottom-sections-tags > h1 {
  background-color: #acaaaa91;
  color: black;
  font-size: 0.8vw;
  padding: 0.3vw 0.6vw;
  border-radius: 2vw;
  font-weight: 500;
}

/* contetnt case studies */
.content-main-1-item-2 {
  display: flex;
  flex-direction: column;
  width: fit-content;
  padding: 2.5vw;
}

.content-main-1-item-2 > h1 {
  font-size: 1.5vw;
  font-weight: 600;
  margin-bottom: 3vw;
}

.content-main-1-item-2-bottom {
  display: flex;
  flex-wrap: wrap;
  width: 49vw;
  height: 27vw;
  gap: 2vw;
  padding: 0 2vw;

  overflow-y: scroll;
  scrollbar-width: none;
  padding-right: unset;
  margin-right: 1vw;
}

.item-2-bottom-sections {
  background-image: url("../images/digitalbooth/bg\ items.png");
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 1vw;
  padding: 1vw;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7vw;
}

.item-2-bottom-sections > img {
  width: 20vw;
  margin-bottom: 1vw;
}

.item-2-bottom-sections > h1 {
  width: 20vw;
  font-size: 1.2vw;
  padding-bottom: 0.7vw;
  border-bottom: 0.1vw solid rgba(255, 255, 255, 0.637);
}

.item-2-bottom-detail {
  width: 20vw;
  display: flex;
  gap: 0.5vw;
}

.item-2-bottom-detail > i {
  color: #8879b3;
  font-size: 0.9vw;
  margin-top: 0.3vw;
}

.item-2-bottom-detail {
  position: relative;
  max-width: 100%;
}

.item-2-bottom-detail > h2 {
  font-size: 1vw;
  font-weight: 400;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.3s ease;
}

.item-2-bottom-detail > h2 > span {
  color: #8879b3;
}

.item-2-bottom-detail:hover > h2 {
  white-space: normal;
  overflow: visible;
  -webkit-line-clamp: unset;
  color: #fff;
}

/* Book a Meeting */

/* texts */
.content-main-1-item-3-texts {
  width: 65vw;
  padding: 3vw;
  display: flex;
  flex-direction: column;
  align-items: start;
}

.content-main-1-item-3-texts > h1 {
  font-size: 1.66vw;
  font-weight: 600;
  margin-bottom: 1.833vw;
}

.c-text-1 > h1 {
  font-size: 1.1vw;
  font-weight: 500;
  color: #8879b3;
  margin-bottom: 1.625vw;
}

.c-text-1 > p {
  font-size: 1.1vw;
  font-weight: 400;
  margin-bottom: 2.927vw;
}

.c-text-2 > span {
  display: flex;
  align-items: center;
  gap: 0.3vw;
  margin-bottom: 1.417vw;
}
.c-text-2 > span > i {
  color: #8879b3;
  font-size: 1.2vw;
}

.c-text-2 > span > h1 {
  color: #8879b3;
  font-size: 1.1vw;
  font-weight: 500;
}

.c-text-2 > p {
  font-size: 1.1vw;
  margin-bottom: 6.125vw;
  font-weight: 400;
}

#bookMeetingBtn {
  border: 0.2vw solid #bd6df2;
  color: #bd6df2;
  font-size: 1vw;
  font-weight: 600;
  background-color: transparent;
  outline: unset;
  border-radius: 0.26vw;
  padding: 0.5vw 2.5vw;
  cursor: pointer;
}

.c-text-3 {
  display: flex;
  gap: 0.3vw;
  margin-top: 0.833vw;
}

.c-text-3 > h1 {
  font-size: 1.1vw;
  font-weight: 400;
}
.c-text-3 > h2 {
  font-size: 1.1vw;
  color: #bd6df2;
  text-decoration: underline;
  font-weight: 400;
  cursor: pointer;
}

/* inputs */
.content-main-1-item-3 {
  width: 65vw;
  background-image: url("../images/digitalbooth/stands\ bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  justify-content: space-around;
  display: flex;
  padding: 3vw;
  padding-right: unset;
  border-radius: 1vw;
}

.item-3-left {
  width: 67%;
  display: flex;
  flex-direction: column;
}

.item-3-left > h1 {
  font-size: 1.5vw;
  font-weight: 600;
  margin-bottom: 2vw;
}
.item-3-left > p {
  font-size: 0.9vw;
  font-weight: 400;
  margin-bottom: 2vw;
  width: 35vw;
}

.item-3-left-form > .item-5-input-1,
.item-3-left-form > .item-5-input-3 {
  height: 4vw;
  width: 37vw;
  display: grid;
  background-size: 37vw;
  background-repeat: no-repeat;
  background-color: transparent;
  margin-bottom: 1vw;
}

.item-3-left-form > .item-5-input-1 > input,
.item-3-left-form > .item-5-input-3 > input {
  background-color: transparent;
  outline: unset;
  border: unset;
  padding-left: 0.5vw;
  text-align: left;
  font-size: 1vw;
  padding-right: 0.5vw;
  height: 2.3vw;
  margin-top: 1.3vw;
  border-radius: 0px 0px 0.5vw 0.5vw;
  font-size: 1.1vw;
}

.item-3-left-form > .item-5-input-1 {
  background-image: url("../images/digitalbooth/input\ 11.svg");
}
.item-3-left-form > .item-5-input-3 {
  background-image: url("../images/digitalbooth/input\ 22.svg");
}
.item-3-left-form > .item-5-input-5 {
  background-image: url("../images/digitalbooth/input\ 33.svg");
  height: 11.2vw;
  background-size: 37vw;
  padding-top: 1.5vw;
  font-size: 1.1vw;
}

.item-3-right {
  width: 33%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.item-3-right > h1 {
  font-size: 1.3vw;
}

#digitalboothBookMeetingMain-form {
  width: 100%;
  display: flex;
}

/* datepicker */
.datepicker-section {
  width: 100%;
  max-width: 26.042vw;
  border-radius: 0.625vw;
  overflow: hidden;
  margin: auto;
  margin-top: 1.563vw;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.042vw;
  color: white;
  padding-left: unset;
}

.header h1 {
  font-size: 1.5rem;
  font-weight: 500;
  font-size: 0.9vw;
  margin-left: 0.2vw;
}

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  font-weight: 500;
  margin-bottom: 0.521vw;
}

.weekdays div {
  padding: 0.625vw 0;
  text-align: center;
  color: white;
  font-size: 0.9vw;
}

.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.208vw;
  padding: 0.521vw;
  margin-bottom: 0.781vw;
}

.days div {
  height: 2.604vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.417vw;
  cursor: pointer;
  transition: all 0.2s;
  color: white;
  font-size: 1vw;
}

.days div:hover:not(.empty, .selected, .disabled) {
  background: #1a222d;
}

.empty {
  background: transparent;
  cursor: default;
}

.selected {
  background: #4a6fa5;
  color: white;
  font-weight: 500;
  transform: scale(1.05);
}

.disabled {
  opacity: 0.3;
  cursor: no-drop;
}

.days .today {
  background: #ffeb3b;
  color: black;
  font-weight: 500;
}

.save-btn {
  width: 97%;
  padding: 0.573vw 3.021vw;
  background-color: transparent;
  color: #c084fc;
  border: 0.156vw solid #c084fc;
  outline: unset;
  font-size: 1.042vw;
  border-radius: 0.26vw;
  cursor: pointer;
  transition: 0.3s;
  font-weight: 600;
}

.save-btn:hover {
  opacity: 0.8;
}

.selected-date {
  padding: 0.625vw 0;
  color: red;
  margin-top: 0.5vw;
  font-weight: 900;
  font-size: 0.9vw;
}

.selected-date-2 {
  padding: 0.625vw 0;
  color: white;
  margin-top: 0.5vw;
  font-weight: 900;
  font-size: 0.9vw;
}

/* tnx */
#successMessage-DBM {
  width: 30vw;
  text-align: center;
  padding: 3vw;
}

.container-tnx {
  width: 100%;
  display: flex;
  gap: 2vw;
  flex-direction: column;
  align-items: center;
}

.container-tnx > span {
  display: flex;
  gap: 0.5vw;
}
.container-tnx > span > i,
.container-tnx > span > h1 {
  font-size: 2.042vw;
  color: #8879b3;
}

.container-tnx > h2 {
  font-size: 1.29vw;
}
.container-tnx > p {
  font-size: 1vw;
}

.close-tnx {
  position: relative;
  border: 0.3vw solid #bd6df2;
  color: #bd6df2;
  font-size: 1.2vw;
  font-weight: 600;
  background-color: transparent;
  outline: unset;
  border-radius: 0.26vw;
  padding: 0.5vw 5vw;
  cursor: pointer;
}

.close-tnx:hover {
  color: #bd6df2;
  opacity: 0.8;
}

/* error */
#errorMessage-DBM {
  width: 30vw;
  text-align: center;
  padding: 3vw;
}

#errorMessage-DBM > div > h1 {
  font-size: 2.302vw;
  margin-bottom: 1.781vw;
}
#errorMessage-DBM > div > h2 {
  font-size: 1.4vw;
  margin-bottom: 1.781vw;
}
#errorMessage-DBM > div > h3 {
  font-size: 1.2vw;
}

/* digital kit */
.content-main-1-item-4 {
  display: flex;
  flex-direction: column;
  width: fit-content;
  padding: 2.5vw;
}

.content-main-1-item-4 > h1 {
  font-size: 1.5vw;
  font-weight: 600;
  margin-bottom: 2vw;
}

.content-main-1-item-4 > p {
  font-size: 0.9vw;
  font-weight: 400;
  margin-bottom: 2vw;
  width: 47vw;
}

.item-4-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 2vw;
  width: 49vw;
}

.item-4-bottom-items {
  display: flex;
  flex-direction: column;
  gap: 1vw;
  background-color: rgba(128, 128, 128, 0.116);
  padding: 1vw;
  width: 47.9%;
  border-radius: 0.5vw;
}

.item-4-bottom-items > span {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.item-4-bottom-items > span > img {
  width: 1.7vw;
}
.item-4-bottom-items > span > h1 {
  font-size: 1.2vw;
}

.item-4-bottom-items > p {
  font-size: 1vw;
  font-weight: 300;
}

.item-4-bottom-items > span > a {
  font-size: 1vw;
  color: #bd6df2;
  font-weight: 900;
  white-space: nowrap;
}
.item-4-bottom-items > span > a > i {
  color: #bd6df2;
}

.item-4-bottom-items > span > button {
  font-size: 1vw;
  color: #bd6df2;
  background-color: transparent;
  border: unset;
  outline: unset;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.item-4-bottom-items > span > button > i {
  color: #bd6df2;
}

.container-watch-video {
  padding: 2vw;
  padding-bottom: 1.2vw;
}
.watch-video {
  width: 58vw;
  border-radius: 1vw;
}

/* contact us */
.content-main-1-item-5 {
  display: flex;
  flex-direction: column;
  width: fit-content;
  padding: 2.5vw;
  position: relative;
}

.content-main-1-item-5 > h1 {
  font-size: 1.5vw;
  font-weight: 600;
  margin-bottom: 2vw;
}

.content-main-1-item-5 > p {
  font-size: 0.9vw;
  font-weight: 400;
  margin-bottom: 2vw;
  width: 35vw;
}

.item-5-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 2vw;
  row-gap: 1vw;
  width: 37vw;
  margin-right: 7vw;
}

.item-5-input-1,
.item-5-input-2,
.item-5-input-3,
.item-5-input-4 {
  height: 2.8vw;
  width: 17.5vw;
  display: grid;
  background-size: 17.5vw;
  background-repeat: no-repeat;
  background-color: transparent;
}

.item-5-input-1 > input,
.item-5-input-2 > input,
.item-5-input-3 > input {
  background-color: transparent;
  outline: unset;
  border: unset;
  padding-left: 0.5vw;
  text-align: left;
  font-size: 1vw;
  padding-right: 0.5vw;
  height: 1.8vw;
  margin-top: 1vw;
  border-radius: 0px 0px 0.5vw 0.5vw;
}

.item-5-input-1 {
  background-image: url("../images/digitalbooth/input\ 1.svg");
}
.item-5-input-2 {
  background-image: url("../images/digitalbooth/input\ 2.svg");
}
.item-5-input-3 {
  background-image: url("../images/digitalbooth/input\ 3.svg");
}
.item-5-input-4 {
  background-image: url("../images/digitalbooth/input\ 4.svg");
}

.input-container select {
  width: 100%;
  padding: 0.83vw 0.69vw;
  background: none;
  border: 0.06vw solid rgba(255, 255, 255, 0.5);
  border-radius: 0.34vw;
  color: white;
  font-size: 1.04vw;
  outline: none;
  appearance: none;
  background-color: transparent;
  margin-top: 0.34vw;
}

.input-container select {
  background-image: url("data:image/svg+xml,%3Csvg fill='white' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.21 8.27a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.69vw center;
  background-size: 1em;
  padding-top: 1vw;
  border: unset;
  outline: unset;
  font-size: 0.9vw;
}

.input-container select option {
  background-color: #1a1a2e;
  color: white;
  font-size: 0.8vw;
}

.item-5-input-5 {
  height: 5.2vw;
  width: 37vw;
  display: grid;
  background-size: 37vw;
  background-repeat: no-repeat;
  background-color: transparent;
  outline: unset;
  border: unset;
  padding-top: 0.7vw;
  padding-left: 0.5vw;
  text-align: left;
  font-size: 1vw;
  padding-right: 0.5vw;
  background-image: url("../images/digitalbooth/input\ 5.svg");
  margin-top: 1vw;
  scrollbar-width: none;
}

.item-5-submit {
  width: 10vw;
  height: 2.2vw;
  display: grid;
  place-items: center;
  background-color: transparent;
  outline: unset;

  white-space: nowrap;
  font-size: 0.9vw;
  border: 0.2vw solid #bd6df2;
  border-radius: 0.5vw;
  color: #bd6df2;
  font-weight: 700;
  cursor: pointer;
  margin-top: 2vw;
  margin-left: 27vw;
}

.item-5-links {
  position: absolute;
  right: 2.5vw;
  top: 12vw;
  display: flex;
  flex-direction: column;
  gap: 0.5vw;
}

.item-5-links > a {
  background-color: #4b62802a;
  padding: 0.5vw;
  border-radius: 0.4vw;
  border: 0.1vw solid #799dcb;
  display: grid;
  place-items: center;
}

.item-5-links > a > i {
  color: #799dcb;
  font-size: 1.5vw;
}

/*  */
#main-1-item-3-mobile,
#main-1-item-5-mobile,
.pointer-mobile-1,
.pointer-mobile-2,
.pointer-mobile-3 {
  display: none;
}

@media screen and (max-width: 935px) {
  .spica-stand,
  .Bgm-stand {
    display: none;
  }

  .spica-stand-mobile,
  .Bgm-stand-mobile {
    display: unset;
  }

  .main-1-body {
    width: 16vw;
    height: 30vw;
    background-image: url("../images/digitalbooth/sensors\ mobile.png");
    background-size: 11.5vw;
    background-repeat: no-repeat;
    position: absolute;
    right: 0.7vw;
    top: 12vw;
  }

  .modal-content {
    animation: fadeInModal 1s ease;
  }

  @keyframes fadeInModal {
    from {
      opacity: 1;
      transform: translatex(100%);
    }
    to {
      opacity: 1;
      transform: translatex(0);
    }
  }

  .main-video-dot {
    display: block;
  }

  .point,
  .pointer-mobile-1,
  .pointer-mobile-2,
  .pointer-mobile-3 {
    display: block;
    width: 1.8vw;
    height: 1.8vw;
    background-image: url("../images/digitalbooth/Ellipse\ cricle.svg");
    background-size: 1.8vw;
    background-repeat: no-repeat;
    position: absolute;
    display: grid;
    place-items: center;
    animation: scale 1s infinite;
  }

  .main-1-body-1 {
    left: 4.5vw;
    top: 0.3vw;
  }
  .main-1-body-2 {
    left: 8.5vw;
    top: 8.2vw;
  }
  .main-1-body-3 {
    left: 4.7vw;
    top: 10vw;
  }
  .main-1-body-4 {
    left: 8.5vw;
    top: 13vw;
  }
  .main-1-body-5 {
    left: 0vw;
    top: 11.5vw;
  }
  .main-1-body-6 {
    left: 1.5vw;
    top: 15vw;
  }
  .main-1-body-7 {
    left: 7.3vw;
    top: 20.8vw;
  }
  .main-1-body-8 {
    display: none;
  }

  .pointer-mobile-1 {
    left: 19.1vw;
    bottom: 9.3vw;
  }

  .pointer-mobile-2 {
    left: 49.2vw;
    bottom: 9.3vw;
  }

  .pointer-mobile-3 {
    right: 10.5vw;
    bottom: 6.5vw;
  }

  @keyframes scale {
    0% {
      transform: scale(1);
    }
    25% {
      transform: scale(1.1);
    }
  }

  .modal-content {
    max-width: unset;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
  }

  .modal-close {
    font-size: 3.5vw;
  }

  /* Two stand BGM & Spica */
  .content-main-1-spica,
  .content-main-1-Bgm {
    width: 100%;
    height: 100%;
    align-items: center;
    padding: unset;
  }

  .content-main-1-spica-right,
  .content-main-1-Bgm-right {
    width: 32vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2vw;
  }

  .content-main-1-spica-right > h1,
  .content-main-1-Bgm-right > h1 {
    font-size: 1.9vw;
    width: unset;
    font-weight: 600;
  }

  .content-main-1-spica-right > img,
  .content-main-1-Bgm-right > img {
    width: 80%;
  }

  .content-main-1-spica-right > a,
  .content-main-1-Bgm-right > a {
    white-space: nowrap;
    font-size: 1.8vw;
    padding: 0.8vw 3vw;
    border: 0.2vw solid #bd6df2;
    border-radius: 0.5vw;
    color: #bd6df2;
    font-weight: 700;
    cursor: pointer;
    margin-top: unset;
    margin-top: 2vw;
  }

  .content-main-1-spica-left,
  .content-main-1-Bgm-left {
    width: 68vw;
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: center;
    gap: 2vw;
  }

  .content-main-1-spica-left > h1,
  .content-main-1-Bgm-left > h1 {
    width: 80%;
    font-size: 2.4vw;
    white-space: nowrap;
  }

  .content-main-1-spica-left > h2,
  .content-main-1-Bgm-left > h2 {
    width: 80%;
    font-size: 1.8vw;
    font-weight: 400;
    color: #8879b3;
  }
  .content-main-1-spica-left > p,
  .content-main-1-Bgm-left > p {
    width: 80%;
    font-size: 1.5vw;
    line-height: 1.5;
  }

  .content-main-1-spica-left > ul,
  .content-main-1-Bgm-left > ul {
    width: 80%;
    display: flex;
    flex-direction: column;
    gap: 1vw;
  }

  /* body contetnt */
  .content-main-1-body {
    max-width: unset;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 37vw;
    height: 200px;
    overflow: scroll;
    scrollbar-width: none;
    padding: unset;
    margin: 3vw 7vw;
  }

  .body-item {
    width: 18vw;
  }
  .body-item > h1 {
    font-size: 1.1vw;
  }
  .body-item > h1 > span {
    font-size: 0.9vw;
  }

  /* content our products */
  .content-main-1-item-1 {
    width: 60%;
    transform: scale(1.3);
    align-items: center;
  }

  .content-main-1-item-1 > h1 {
    width: 93%;
    margin-bottom: 5vw;
  }
  /* contetnt case studies */
  .content-main-1-item-2 {
    width: 60%;
    align-items: center;
    transform: scale(1.2);
    margin-bottom: unset;
    padding-bottom: unset;
  }

  .content-main-1-item-2 > h1 {
    width: 100%;
  }

  .content-main-1-item-2-bottom {
    gap: 1.8vw;
    height: 28.5vw;
  }

  .item-2-bottom-detail > h2 {
    display: unset;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    overflow: unset;
    text-overflow: unset;
    white-space: unset;
    cursor: unset;
    transition: all 0.3s ease;
  }

  /* digital kit */
  .content-main-1-item-4 {
    width: 60%;
    transform: scale(1.3);
    align-items: center;
  }

  .watch-video {
    width: 73vw;
    border-radius: 1vw;
  }

  #main-1-item-3,
  #main-1-item-5 {
    display: none;
  }

  #main-1-item-3-mobile,
  #main-1-item-5-mobile {
    display: flex;
  }

  .content-main-1-item-4 > h1,
  .content-main-1-item-4 > p {
    width: 95%;
  }

  .content-main-1-item-4 > p {
    margin-bottom: 3vw;
  }

  /* book a meeting */
  .content-main-1-item-3 {
    display: none;
  }
}