:root {--bs-font-sans-serif:  "Comfortaa", sans-serif;  }

.text-youtube   {color: #ff0000 !important;}

.text-instagram {color: #b63d83 !important;}

.text-facebook  {color: #0866ff !important;}

.text-tiktok  {color: #00eae3 !important;}



.bg-primary-custom       {background-color: #233f84 !important;}

.bg-secondary-custom     {background-color: #d52289 !important;}

.text-primary-custom     {color: #233f84 !important;}

.text-secondary-custom   {color: #d52289 !important;}

.border-primary-custom   {border-color: #233f84 !important;}

.border-secondary-custom {border-color: #d52289 !important;}



.bg-youtube   {background-color: #ff0000 !important;}

.bg-instagram {background-color: #b63d83 !important;}

.bg-facebook  { background-color: #0866ff !important;}

.bg-tiktok    {background-color: #00eae3 !important;} 



.bg-gradient-youtube   {background: linear-gradient(to bottom, #ff0000 20%, #ffffff 100%);}

.bg-gradient-instagram {background: linear-gradient(to bottom, #b63d83 20%, #ffffff 100%);}

.bg-gradient-facebook  {background: linear-gradient(to bottom, #0866ff 20%, #ffffff 100%);}

.bg-gradient-tiktok    {background: linear-gradient(to bottom, #00eae3 20%, #ffffff 100%);}





.border-youtube   {border-color: #ff0000 !important;}

.border-instagram {border-color: #b63d83 !important;}

.border-facebook  {border-color: #0866ff !important;}

.border-tiktok    {border-color: #00eae3 !important;}



.filter-invert-white {filter: invert(1);}



.form-control:focus {

    color: #212529;

    border-color: #000000 !important;

    box-shadow: unset  !important;;

    border: solid 2px  !important;;

}

.form-control {

    height: 60px;

}

.bg-social-form{

    width: max-content;

    margin: auto;

    background: #ffffff40;

    padding-top: 20px;

    padding-bottom: 20px;

    border-radius: 8px;

}

.h1-t {

    font-size: 2.5rem;

    line-height: 2.6rem;

}

.h2-t {

    font-size: 2.2rem;

    line-height: 2.4rem;

}



section#come-funziona{

	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);

	background-size: 400% 400%;

	animation: gradient 15s ease infinite;

}



@keyframes gradient {

	0% {

		background-position: 0% 50%;

	}

	50% {

		background-position: 100% 50%;

	}

	100% {

		background-position: 0% 50%;

	}

}







  .wrapperaa {

    height: 100%;

    width: 100%;

    background: linear-gradient(180deg, #04fafd, 5%, #119dff, 50%, #030423);

    position: absolute;

  }



  .wrappera div {

    height: 60px;

    width: 60px;

    border: 2px solid #dfaac9;

    border-radius: 50px;

    position: absolute;

    top: 10%;

    left: 10%;

    animation: 4s linear infinite;

  }

  div .dot {

    height: 10px;

    width: 10px;

    border-radius: 50px;

    background: #dfaac9;

    position: absolute;

    top: 20%;

    right: 20%;

  }

  .wrappera div:nth-child(1) {

    top: 10%;

    left: 30%;

    animation: animate 8s linear infinite;

}

.wrappera div:nth-child(2) {

    top: 50%;

    left: 90%;

    animation: animate 17s linear infinite;

}

.wrappera div:nth-child(3) {

    top: 20%;

    left: 50%;

    animation: animate 19s linear infinite;

}

.wrappera div:nth-child(4) {

    top: 75%;

    left: 10%;

    animation: animate 9s linear infinite;

}

.wrappera div:nth-child(5) {

    top: 40%;

    left: 70%;

    animation: animate 18s linear infinite;

}

.wrappera div:nth-child(6) {

    top: 30%;

    left: 80%;

    animation: animate 9s linear infinite;

}

.wrappera div:nth-child(7) {

    top: 65%;

    left: 40%;

    animation: animate 20s linear infinite;

}

.wrappera div:nth-child(8) {

    top: 80%;

    left: 60%;

    animation: animate 22s linear infinite;

}

.wrappera div:nth-child(9) {

    top: 55%;

    left: 25%;

    animation: animate 8s linear infinite;

}

.wrappera div:nth-child(10) {

    top: 35%;

    left: 85%;

    animation: animate 24s linear infinite;

}

.wrappera div:nth-child(11) {

    top: 90%;

    left: 15%;

    animation: animate 17s linear infinite;

}

.wrappera div:nth-child(12) {

    top: 25%;

    left: 65%;

    animation: animate 6s linear infinite;

}

.wrappera div:nth-child(13) {

    top: 70%;

    left: 50%;

    animation: animate 16s linear infinite;

}

.wrappera div:nth-child(14) {

    top: 45%;

    left: 35%;

    animation: animate 18s linear infinite;

}

.wrappera div:nth-child(15) {

    top: 15%;

    left: 75%;

    animation: animate 21s linear infinite;

}

.wrappera div:nth-child(16) {

    top: 60%;

    left: 5%;

    animation: animate 20s linear infinite;

}

.wrappera div:nth-child(17) {

    top: 5%;

    left: 40%;

    animation: animate 25s linear infinite;

}

.wrappera div:nth-child(18) {

    top: 85%;

    left: 95%;

    animation: animate 19s linear infinite;

}

.wrappera div:nth-child(19) {

    top: 50%;

    left: 10%;

    animation: animate 22s linear infinite;

}

.wrappera div:nth-child(20) {

    top: 30%;

    left: 55%;

    animation: animate 16s linear infinite;

}

.wrappera div:nth-child(21) {

    top: 75%;

    left: 20%;

    animation: animate 24s linear infinite;

}

.wrappera div:nth-child(22) {

    top: 40%;

    left: 90%;

    animation: animate 18s linear infinite;

}



  @keyframes animate {

    0% {

      transform: scale(0) translateY(0) rotate(70deg);

    }

    100% {

      transform: scale(1.3) translateY(-100px) rotate(360deg);

    }

  }

  .navbar-toggler:focus {

    text-decoration: none;

    outline: 0;

    box-shadow: unset;

}

.navbar-toggler {

    border: 0 !important;

}

ul.dropdown-menu.show {

    border: 0;

}

nav.ico i {

    font-size: 1.6rem !important;

    border: solid 1px #d0d0d0;

    padding: 2px;

    color: #0066a3;

}

footer a {

    color: #FFF;

    text-decoration: none;

}

