body {
  font-family: 'Poppins', sans-serif;
  padding: 0px;
  margin: 0px;
  overflow-x: hidden;
  user-select: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

:root {
  --first-color: #6488E6;
  --secondary-color: #3264EA;
  --third-color: #AFC1EF;
  --background-color: #F6F3EC;
  --gray1: #333333;
}

/* background */
.bg-first-custom {
  background-color: var(--first-color);
}

.bg-secondary-custom {
  background-color: var(--secondary-color);
}

.bg-third-custom {
  background-color: var(--third-color);
}

.bg-background-custom {
  background-color: var(--background-color);
}

/* text */
.text-first-custom {
  color: var(--first-color);
}

.text-secondary-custom {
  color: var(--secondary-color);
}

.text-third-custom {
  color: var(--third-color);
}

.text-background-custom {
  color: var(--background-color);
}

.text-gray1 {
  color: var(--gray1);
}

.text-1 {
  font-size: 3.25vh !important;
}

.text-2 {
  font-size: 3vh !important;
}

.text-3 {
  font-size: 2.75vh !important;
}

.text-4 {
  font-size: 2.5vh !important;
}

.text-5 {
  font-size: 2.25vh !important;
}

.text-6 {
  font-size: 1.75vh !important;
}

.button_custom {
  background-color: white;
  color: black;
  border-radius: 20px;
  width: 60vw;
}

.button_custom2 {
  background-color: var(--first-color);
  color: white;
  border-radius: 20px;
  width: 60vw;
}

.button_custom2:active {
  background-color: var(--secondary-color);
  color: white;
}

.button_custom:active {
  background-color: var(--secondary-color);
  color: white;
}

.pallino-active {
  opacity: 100% !important;
}

.pallino_navbar {
  width: 20px;
  height: 20px;
  margin-bottom: 20px;
  cursor: pointer;
  opacity: 50%;
}

.navbar-mobile {
  transform: translateX(-20px)scale(0.8);
  display: none;
}

.menu_desktop {
  display: none !important;
}

.menu_desktop_top {
  display: none !important;
}

/* background */
.hero {
  background-image: url("assets/sito_MOBILE-02.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* header */
.logo_bugsy_header {
  height: 15vh;
}

.card_container {
  padding-left: 10vw !important;
  padding-right: 10vw !important;
  margin-top: -50px !important;
  margin-bottom: 50px !important;
}

.viola_container {
  padding-left: 8vw !important;
  padding-right: 8vw !important;
  padding-bottom: 50px !important;
  padding-top: 50px !important;
}

.team_container {
  padding-left: 8vw !important;
  padding-right: 8vw !important;
  padding-bottom: 50px !important;
  padding-top: 150px !important;
  margin-top: -150px;
}

.test_container {
  padding-left: 8vw !important;
  padding-right: 8vw !important;
  padding-bottom: 50px !important;
  padding-top: 50px !important;
  height: 100vh;
}

.pulsanti_download {
  width: 40%;
  /* z-index: 2; */
  cursor: pointer;
  margin: -30px 5px !important;
}

.pulsanti_download_test {
  width: 40%;
  /* z-index: 2; */
  cursor: pointer;
  margin: -30px 5px !important;
}

.pulsanti_app {
  width: 5%;
  z-index: 2;
  cursor: pointer;
  margin-right: 70px !important;
}

.app_hover {
  width: 350%;
  z-index: 2;
  cursor: pointer;
  margin: -30px 10px !important;
}

.pulsanti_download_bianco {
  width: 50%;
  z-index: 2;
  cursor: pointer;
  margin-top: -10%!important;
  margin-bottom: -15%!important;
}

.transparent {
  background-color: rgb(0, 0, 0, 0) !important;
}

.img-come-funziona {
  width: 90%;
  margin-top: 50px !important;
  margin-left: -50px;
}

.no_mobile {
  display: none !important;
}

/* background */
.sleep_background {
  background-image: url("assets/grafico_sonno.png");
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  padding-left: 8vw !important;
  padding-right: 8vw !important;
}

.sfondo_1 {
  background-image: url("assets/Background_light.png");
  background-repeat: no-repeat;
  width: 110vw;
  transform: translate(-50%, 0);
  margin-left: 50%;
  background-size: cover;
}

.sfondo_2 {
  background-image: url("assets/background_dark.png");
  background-repeat: no-repeat;
  width: 100vw;
  width: 110vw;
  transform: translate(-50%, 0);
  margin-left: 50%;
  background-size: cover;
}

.menu_open {
  top: 0px;
  position: fixed;
  z-index: 4;
}

.menu_open_content {
  width: 105vw;
  height: 105vh;
  background-color: rgba(100, 136, 230, 0.8);
  margin: 0px !important;
}

.fixed {
  position: fixed;
  z-index: 5;
}

.menu_mobile {
  position: fixed;
  width: 100px;
  height: 100px;
  background-image: url("assets/menu.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  opacity: 1;
  z-index: 5;
  transform: translate(0, 50%);
  right: 30px;
  border-color: rgba(255, 255, 255, 0) !important;
}

.menu_mobile:focus {
  border: 0px solid red !important;
  box-shadow: 0 0 0 0 !important;
}

.border_card {
  border-radius: 10px;
}

.background_vector_01 {
  background-image: url("assets/Vector_video_01.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

.background_vector_02 {
  background-image: url("assets/Vector_video_02.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  border
}

.sfondo_bolla {
  background-image: url("assets/Vector_video_02.png");
  background-repeat: no-repeat;
  background-position: 150px -50px;
  background-size: contain;
  border
}

/* ---------------------  DESKTOP  -------------------------------------------- */
@media only screen and (min-width: 1024px) {
  .hero {
    background-image: url("assets/hero_03b.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .border_card {
    border-radius: 20px;
  }

  .menu_desktop {
    display: flex !important;
    background-color: #AFC1EF;
    transition: 0.3;
    color: white;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.15);
  }

  .menu_desktop_top {
    display: flex !important;
    background-color: rgba(255, 255, 255, 0);
    transition: 0.3;
    color: var(--secondary-color) !important;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0);
    cursor: pointer;
    text-decoration: none;
  }

  .header_display_text {
    cursor: pointer;
    color: white;
    text-decoration: none;
  }

  .color_white {}

  .header_display_text:hover {
    cursor: pointer;
    color: var(--secondary-color);
    transition: 0.3s;
  }

  .header_display_button:hover {
    cursor: pointer;
    background-color: var(--secondary-color);
    color: white !important;
    transition: 0.3s;
    border: 2px solid var(--secondary-color) !important;
  }

  .menu_mobile {
    display: none;
  }

  .text-1 {
    font-size: 2.5vw !important;
    /* color: red; */
  }

  .text-2 {
    font-size: 2.25vw !important;
    /* color: red; */
  }

  .text-3 {
    font-size: 2vw !important;
    /* color: red; */
  }

  .text-4 {
    font-size: 1.75vw !important;
    /* color: red; */
  }

  .text-5 {
    font-size: 1.5vw !important;
    /* color: red; */
  }

  .text-6 {
    font-size: 1.25vw !important;
    /* color: red; */
  }

  .button_custom {
    width: 30vw;
  }

  .button_custom:hover {
    background-color: var(--secondary-color);
    color: white;
  }

  .button_custom2 {
    width: 30vw;
  }

  .button_custom2:hover {
    background-color: var(--secondary-color);
    color: white;
  }

  /* desktop */
  .navbar-mobile {
    transform: translateX(0px)scale(1);
    display: block;
  }

  /* header */
  .logo_bugsy_header {
    height: 10vw;
  }

  .card_container {
    padding-left: 15vw !important;
    padding-right: 15vw !important;
    margin-top: -150px !important;
  }

  .viola_container {
    padding-left: 10vw !important;
    padding-right: 10vw !important;
    padding-bottom: 50px !important;
    padding-top: 50px !important;
    /* height:100vh; */
  }

  .test_container {
    padding-left: 10vw !important;
    padding-right: 10vw !important;
    padding-bottom: 50px !important;
    padding-top: 50px !important;
    height: 100vh;
  }

  .team_container {
    padding-left: 10vw !important;
    padding-right: 10vw !important;
    margin-top: -150px;
    /* height:100vh; */
  }

  .pulsanti_download {
    width: 25%;
    cursor: pointer;
  }

  .pulsanti_download_test {
    width: 25%;
    cursor: pointer;
  }

  .pulsanti_app {
    width: 3%;
    z-index: 2;
    cursor: pointer;
    /* margin-left:50px!important; */
    margin-right: 100px!important;
  }

  .pulsanti_download_bianco {
    width: 25%;
    cursor: pointer;
  }

  .pulsanti_download:hover {
    background-image: url("assets/Vector_video_01.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 70%;
    transition: 0.3s;
  }

  .pulsanti_download_bianco:hover {
    background-image: url("assets/Vector.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 70%;
    transition: 0.3s;
  }


    .pulsanti_download_test:hover {
      background-image: url("assets/Vector.png");
      background-position: center;
      background-repeat: no-repeat;
      background-size: 70%;
      transition: 0.3s;
    }

  .app_hover:hover {
    background-image: url("assets/Vector_video_01.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90%;
    transition: 0.3s;
  }


  .img-come-funziona {
    width: 90%;
    margin-top: 0px !important;
    margin-left: -20px;
  }

  .no_desktop {
    display: none !important;
  }

  .no_mobile {
    display: block !important;
  }

  .margin_bottom_high {
    margin-bottom: 130px;
  }
}