@font-face {
  font-family: "Mundial-Regular";
  src: url("https://db.onlinewebfonts.com/t/782f2c02e556ab4fef462a7d4c859fa9.eot");
  src:
    url("https://db.onlinewebfonts.com/t/782f2c02e556ab4fef462a7d4c859fa9.eot?#iefix")
      format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/782f2c02e556ab4fef462a7d4c859fa9.woff2")
      format("woff2"),
    url("https://db.onlinewebfonts.com/t/782f2c02e556ab4fef462a7d4c859fa9.woff")
      format("woff"),
    url("https://db.onlinewebfonts.com/t/782f2c02e556ab4fef462a7d4c859fa9.ttf")
      format("truetype"),
    url("https://db.onlinewebfonts.com/t/782f2c02e556ab4fef462a7d4c859fa9.svg#Mundial-Regular")
      format("svg");
}

/* ------------------------------------------------------------ GLOBAL ----------------------------------------------------------- */
body {
  object-fit: cover;
  margin: 0;
  padding: 0;
}

main {
  object-fit: cover;
  position: relative;
  overflow: hidden;
}

/* -------------------------------------------------------------- HOME ------------------------------------------------------------ */

/*---------- TEXT && BUTTON ----------*/
#home .home-main-text-button-container {
  top: 25%;
  margin-left: 8%;
}

#home .home-main-text-button-container .home-main-text img {
  height: auto;
  width: 40vw;
}

#home .home-main-text-button-container .home-main-btn {
  margin-top: 3vh;
}

#home .home-main-text-button-container .home-main-btn img {
  height: auto;
  width: 10vw;
}

/*---------- SOCIAL MEDIA ----------*/
/* -- YOUTUBE --*/
#home #youtube-float {
  top: 71%;
  left: 58.5%;
}

#home #youtube-float img {
  width: 2.5vw;
}

/* -- TELEGRAM --*/
#home #telegram-float {
  top: 68%;
  left: 49%;
}

#home #telegram-float img {
  width: 3.5vw;
}

/* -- FACEBOOK --*/
#home #facebook-float {
  top: 81%;
  left: 42%;
}

#home #facebook-float img {
  width: 6.5vw;
}

/* -- INSTAGRAM --*/
#home #instagram-float {
  top: 86%;
  left: 54%;
}

#home #instagram-float img {
  width: 10vw;
}

/*-- GOOGLE --*/
#home #google-float {
  top: 86%;
  left: 72%;
}

#home #google-float img {
  width: 12vw;
}

/*---------- FEATURE LABELS ----------*/
#home .feature-labels {
  height: 100vh;
  width: 45vw;
  top: 0;
  left: 55vw;
}

#home .feature-labels .feature-label {
  gap: 1vw;
  z-index: 10;
  position: absolute;
}

#home .feature-labels #feature1 {
  top: 19vh;
  left: 13vw;
}

#home .feature-labels #feature2 {
  top: 37.5vh;
  left: 23.5vw;
}

#home .feature-labels #feature3 {
  top: 67vh;
  left: 13.5vw;
}

#home .feature-labels .feature-label .feature-dot {
  background: linear-gradient(135deg, #ff00ff, #ff66ff);
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(255, 0, 255, 0.8);
  height: 0.9vw;
  width: 0.9vw;
}

#home .feature-labels .feature-label .feature-text {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(0.65vw);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 2.5vw;
  display: flex;
  align-items: center;
  padding: 2vh 1.5vw;
}

#home .feature-labels .feature-label .feature-text span {
  font-family: "Mundial-Regular";
  font-size: 1.25vw;
  font-weight: 500;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  letter-spacing: 0.05vw;
}

/* -------------------------------------------------------------- ABOUT ----------------------------------------------------------- */

/*---------- TITLE 1 && CONTENT && BUTTON ----------*/
#about .about-container {
  top: 9%;
  flex-direction: column;
  gap: 8vh;
}

#about .about-container .about-title1 img {
  width: 50vw;
}

#about .about-container .about-content img {
  width: 55vw;
}

#about .about-container .about-button img {
  width: 25vw;
}

/*---------- FLOATING ICONS ----------*/
/* -- COMET --*/
#about #comet-float {
  top: 11%;
}

#about #comet-float img {
  width: 25vw;
}

/* -- PETAL 1 --*/
#about #petal1-float {
  top: 7%;
  left: 79%;
}

#about #petal1-float img {
  width: 10vw;
}

/* -- INSTAGRAM --*/
#about #instagram-float {
  top: 25%;
  left: 1%;
}

#about #instagram-float img {
  width: 10vw;
}

/*-- GOOGLE --*/
#about #google-float {
  top: 26%;
  left: 84%;
}

#about #google-float img {
  width: 13vw;
}

/* -- PETAL 2 --*/
#about #petal2-float {
  top: 40%;
  left: 6%;
}

#about #petal2-float img {
  width: 10vw;
}

/*-- SATURN --*/
#about #saturn-float {
  top: 38.5%;
  left: 73.5%;
}

#about #saturn-float img {
  width: 20vw;
}

/*------------- MOUSE CLICK --------------*/

#about #mouse-click {
  top: 50%;
  left: 48.25%;
}

#about #mouse-click img {
  width: 3.5vw;
}

/*---------- TITLE 2 && SLIDER ----------*/
#about .title-slider-container {
  top: 59%;
  flex-direction: column;
  gap: 5vh;
}

#about .title-slider-container .about-title2 img {
  width: 50vw;
}

#about .title-slider-container .slider-wrapper {
  width: 100%;
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 20%,
    black 80%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 20%,
    black 80%,
    transparent 100%
  );
}

#about .title-slider-container .slider-wrapper img {
  height: 17vh;
}

/* -------------------------------------------------------------- SERVICES ----------------------------------------------------------- */

/*---------- TITLE && CONTENT && BUTTON ----------*/
#services .services-container {
  top: 9%;
  flex-direction: column;
  gap: 8vh;
}

#services .services-container .services-title img {
  width: 50vw;
}

#services .services-container .services-content img {
  width: 75vw;
}

#services .services-container .services-button img {
  width: 25vw;
}

/*---------- FLOATING ICONS ----------*/
/* -- DICE 1 --*/
#services #dice1-float {
  top: 18%;
  left: 0.5%;
}

#services #dice1-float img {
  width: 10vw;
}

/* -- DICE 2 --*/
#services #dice2-float {
  top: 20%;
  left: 89%;
}

#services #dice2-float img {
  width: 10vw;
}

/*-- FACEBOOK --*/
#services #facebook-float {
  top: 52%;
  left: -1%;
}

#services #facebook-float img {
  width: 13vw;
}

/* -- CHIP 1 --*/
#services #chip1-float {
  top: 52%;
  left: 89%;
}

#services #chip1-float img {
  width: 10vw;
}

/*-- CHIP 2 --*/
#services #chip2-float {
  top: 82%;
  left: 4%;
}

#services #chip2-float img {
  width: 13vw;
}

/* -- INSTAGRAM --*/
#services #instagram-float {
  top: 78%;
  left: 79%;
}

#services #instagram-float img {
  width: 22.5vw;
}

/* -------------------------------------------------------------- FAQ ----------------------------------------------------------- */

/*---------- CONTAINER ----------*/
#faq .faq-container {
  top: 9%;
  flex-direction: row;
}

/* FLOAT ICONS */
#faq .faq-container .float-icons {
  height: 100vh;
  width: 45%;
  position: relative;
}

#faq .faq-container .float-icons #saturn-float {
  top: 28%;
  left: 4vw;
}

#faq .faq-container .float-icons #saturn-float img {
  width: 40vw;
}

#faq .faq-container .float-icons #star1-float {
  top: 21%;
  left: 27vw;
}

#faq .faq-container .float-icons #star1-float img {
  width: 7vw;
}

#faq .faq-container .float-icons #star2-float {
  top: 19.5%;
  left: 30.5vw;
}

#faq .faq-container .float-icons #star2-float img {
  width: 11vw;
}

#faq .faq-container .float-icons #star3-float {
  top: 63%;
  left: 11vw;
}

#faq .faq-container .float-icons #star3-float img {
  width: 7vw;
}

#faq .faq-container .float-icons #telegram-float {
  top: 33%;
  left: 7vw;
}

#faq .faq-container .float-icons #telegram-float img {
  width: 8vw;
}

#faq .faq-container .float-icons #youtube-float {
  top: 56%;
  left: 31vw;
}

#faq .faq-container .float-icons #youtube-float img {
  width: 8vw;
}

/* TEXT CONTENT */
#faq .faq-container .faq-text {
  width: 55%;
  margin: 15vh 0 0 12vw;
  flex-direction: column;
  gap: 4vh;
}

#faq .faq-container .faq-text .faq-title h1 {
  font-family: "Mundial-Regular", sans-serif;
  font-size: 2.5vw;
  color: #fff;
  margin: 0;
  text-align: left;
}

#faq .faq-container .faq-text .faq-accordion {
  flex-direction: column;
  gap: 0;
}

#faq .faq-container .faq-text .faq-accordion .faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 2vh 0;
}

#faq .faq-container .faq-text .faq-accordion .faq-item .faq-question {
  font-family: "Poppins", sans-serif;
  font-size: 1.15vw;
  font-weight: 400;
  color: #fff;
  cursor: pointer;
}

#faq .faq-container .faq-text .faq-accordion .faq-item .faq-toggle {
  font-size: 2vw;
  font-weight: 300;
  color: #fff;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

#faq .faq-container .faq-text .faq-accordion.faq-item.active .faq-toggle {
  transform: rotate(45deg);
}

#faq .faq-container .faq-text .faq-accordion .faq-item .faq-answer {
  font-family: "Poppins", sans-serif;
  font-size: 0.95vw;
  line-height: 1.8;
  background: rgba(220, 197, 250, 0.15);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  color: rgba(255, 255, 255, 0.7);
  max-height: 0;
  margin-top: 0;
  padding: 0 2vw;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

#faq .faq-container .faq-text .faq-accordion .faq-item.active .faq-answer {
  max-height: 300px;
  margin-top: 1.5vh;
  padding: 1.5vh 2vw;
}

/* -------------------------------------------------------------- CONTACT ------------------------------------------------------------ */

/*---------- TEXT && BUTTON ----------*/
#contact .home-main-text-button-container {
  top: 25%;
  margin-left: 8%;
}

#contact .home-main-text-button-container .home-main-text img {
  width: 50vw;
}

#contact .home-main-text-button-container .home-main-btn {
  margin-top: 3vw;
}

#contact .home-main-text-button-container .home-main-btn img {
  width: 10vw;
}

/*---------- SOCIAL MEDIA ----------*/
/* -- YOUTUBE --*/
#contact #youtube-float {
  top: 56%;
  left: 55%;
}

#contact #youtube-float img {
  width: 8vw;
}

/* -- TELEGRAM --*/
#contact #telegram-float {
  top: 65%;
  left: 48%;
}

#contact #telegram-float img {
  width: 11vw;
}

/* -- FACEBOOK --*/
#contact #facebook-float {
  top: 80%;
  left: 44%;
}

#contact #facebook-float img {
  width: 18vw;
}

/* -- BLUR ICON --*/
#contact #blur-icon-float {
  top: 78%;
  left: 76%;
}

#contact #blur-icon-float img {
  width: 10vw;
}