:root {
    --primary-color: #6fa9d3;
    --secondary-color: ##6fa9d3;
  }

  .contact-area .contact-area-inner .contact li {
    color: #dedede;
}

/* per instagram per fare il crop in home page delle immagini importate da instagram */
.instagram-square-crop {
    width: 307px;            /* Fixed width for perfect square */
    height: 307px;           /* Fixed height for perfect square */
    object-fit: cover;       /* Ensures the image covers the area while maintaining aspect ratio */
    object-position: center;    /* Aligns the top of the image to avoid cutting off important content */
}

.instagram-card {
    width: 307px;            /* Ensure the card is the same size as the image */
}

/*Fine instagram*/

  .swiper-slide {
    position: relative;
  }
  
  .slider-inner {
    position: relative;
  }
  
  .slider-inner img,
  .slider-inner video {
    width: 100%;
    height: auto;
    display: block;
  }
  
  .slider-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.25); /* Overlay nero */
    z-index: 1; /* Sotto al testo ma sopra l'immagine/video */
  }
  
  .swiper-content {
    position: relative;
    z-index: 2; /* Testo sopra l'overlay */
    color: white; /* Colore del testo */
  }
  

body {
    background-color: black !important;
}

.pb-7 {
    padding-bottom: 5rem;;
}

/* Cambia il colore del testo e dello sfondo del pulsante dell'accordion */
.accordion-button {
    background-color: #4b4b4b; /* Sfondo scuro per abbinarsi a uno sfondo nero */
    color: white; /* Testo bianco per visibilità */
    border: none; /* Rimuovi bordi per un look più pulito */
}

/* Cambia il colore del testo e lo sfondo dell'accordion quando è aperto */
.accordion-button:not(.collapsed) {
    background-color: #555; /* Sfondo leggermente più chiaro quando aperto */
    color: white;
}

/* Cambia il colore del testo nella body dell'accordion */
.accordion-body {
    background-color: #343434; /* Sfondo scuro per la body */
    color: white; /* Testo bianco per visibilità */
}

/* Cambia il colore del bordo */
.accordion-item {
    border: 1px solid #444; /* Bordo scuro per abbinarsi allo sfondo */
}

.sistemititle span{
    color: var(--primary-color);
}
.sistemi {
    border-color: var(--secondary-color) !important;
    border: 1px solid;
    margin: auto;
    width: 100%;
    border-radius: 40px;

}
.sistemi span {
    color: var(--secondary-color);

}

.feedback {
    border-color: var(--primary-color) !important;
    border: 2px solid;
    margin: auto;
    width: 100%;
    border-radius: 40px;

}

.feedback span {
    color: var(--primary-color) !important;
    font-weight: bold;
}

.feedbacktitle span {
    color: var(--primary-color) !important;
}

.orange {
    color: var(--primary-color);
}
.language-switcher {
    display: flex;
    font-size: 12px;
}

.language-switcher a {
    margin-right: 10px;
    text-decoration: none;
    /* color: #333; */
}

.border-radius-3 {
    border-radius: 0.8rem !important;
}

.border-radius-3 img{
    border-radius: 0.8rem !important;
}

.text-primary {
    color: var(--primary-color) !important;
}

.ms-main {
    background-color: #333 !important;
}

.contact-area .contact-area-inner .contact-form .form-group input {
    color: white !important;
}

.contact-area .contact-area-inner .contact-form .form-group textarea {
    color: white !important;
}
.chartContainer {
    position: relative;
    margin: auto;
    height: 50vh;
    width: 50vh;
    /* display: block; */
}

.canvas-container #hero-lightpass {
    width: 100%;
    /* height: 50vh; */
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
}

/* .canvas-container2 #particles {
    position: relative;
    width: 100%;
    justify-content: center;
    align-items: center;
} */

/* \ */

.canvas-features #features {
    position: relative;
    width: 50%;
    /* height: 50vh; */
    /* display: flex; */
    justify-content: center;
    align-items: center;
}

.canvas-image {
    display: block;
    position: relative;
    width: 100%;
    /* height: 50vh; */
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
}

.mydiv {
    position: absolute;
    top: 50%;
    /* Centra il testo verticalmente rispetto al bordo superiore */
    left: 50%;
    /* Centra il testo orizzontalmente rispetto al bordo sinistro */
    transform: translate(-50%, -50%);
    /* Centra il testo sia verticalmente che orizzontalmente */
    font-size: 48px;
    /* Imposta la dimensione del carattere desiderata */
    color: rgba(255, 255, 255, 0.723);
    /* Colore del testo */
    padding: 10px;
    /* Spazio interno per migliorare la leggibilità */
}

.text-justify {
    text-align: justify;
}

.myblock {
    height: 100vh;
    width: 100%;
}

#eqtooltext {
    text-align: center;
    position: absolute;
    color: #000;
    /* top: 50%; */
    top: 50%;
    /* Centra il testo verticalmente rispetto al bordo superiore */
    left: 50%;
    /* Centra il testo orizzontalmente rispetto al bordo sinistro */
    transform: translate(-50%, -50%);
    /* transform: translateX(-50%); */
    /* Centra il testo sia verticalmente che orizzontalmente */
    padding: 10px;
    /* Spazio interno per migliorare la leggibilità */
}


.animatedgradient {
    font-size: 8vw;
    /* Imposta la dimensione del testo a tua scelta */
    background: -webkit-linear-gradient(135deg, #666, #666, #666, #666, #eee, #666, #666, #666);
    background-size: 200% auto;
    background-clip: text;
    /* text-fill-color: transparent; */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 4s linear infinite;
    white-space: nowrap;
}

@keyframes shine {
    to {
        background-position: -200% center;
    }
}


#particlestext {
    /* position: absolute; */
    /* bottom: 10%; */
    /* Centra il testo verticalmente rispetto al bordo superiore */
    /* left: 50%; */
    /* Centra il testo orizzontalmente rispetto al bordo sinistro */
    /* transform: translate(-50%, -50%); */
    /* transform: translateX(-50%); */
    /* Centra il testo sia verticalmente che orizzontalmente */
    /* padding: 10px; */
    /* Spazio interno per migliorare la leggibilità */

}

#featurestext {
    position: absolute;
    /* top: 50%; */
    bottom: 10%;
    /* Centra il testo verticalmente rispetto al bordo superiore */
    left: 50%;
    /* Centra il testo orizzontalmente rispetto al bordo sinistro */
    /* transform: translate(-50%, -50%); */
    transform: translateX(-50%);
    /* Centra il testo sia verticalmente che orizzontalmente */
    padding: 10px;
    /* Spazio interno per migliorare la leggibilità */
}

.image-container-colours {
    position: relative;
    /* border-radius: 25%; */
}

#colouryellow,
#colourred {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
}

.colour-animation {
    color: rgb(20, 233, 20);
    animation: colorAnimation 3s linear infinite alternate;
}

@keyframes colorAnimation {
    0% {
        color: rgb(20, 233, 20);
    }

    50% {
        color: yellow;
    }

    100% {
        color: red;
    }
}

.rounded-5 {
    border-radius: 30px;
}

body[data-theme=dark] .portfolio-feed {
    background-color: #333 !important;
}

body[data-theme=dark] .ms-footer {
    background-color: #222;
}

.main-title {
    font-family: "Manrope", Sans-serif;
    font-size: 60px;
    font-weight: 900;
    line-height: 64px;
    margin-bottom: 20px;
}

.ptext {
    font-size: 1.5em;
    line-height: 1.6em;
}

.myslidertitle {
    font-size: 6em;
    color: white;
}

.myslidertitle a {
    color: white;
}

.ubasvg {
    max-width:280px;
}

.index-two .ms-main .swiper-container-h .swiper-wrapper .swiper-slide .slider-inner .swiper-content p.disc {
    font-size: 26px;;
}

.br-3 {
    border-radius: 8px;
}
.ubahome {
    max-width:300px;
}
h2 {
    font-weight: bold;
}

.index-two .main-header .main-header__layout::before {
    background: #000;
}

#preorderbutton {
    position: fixed;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
}
.full-width-container {
    width: 100%; /* Larghezza del container a tutta la larghezza dello schermo */
    overflow: hidden;
  }

  .wide-item {
    width: 100%; /* Larghezza al 100% del contenitore */
    height: auto; /* Altezza automatica per mantenere le proporzioni dell'immagine */
    position: relative;
    left: 50%;
    transform: translateX(-50%); /* Centra l'immagine orizzontalmente */
  }

  .wide-item-m {
    width: 100%; /* Larghezza al 100% del contenitore */
    height: auto; /* Altezza automatica per mantenere le proporzioni dell'immagine */
    position: relative;
    left: 50%;
    transform: translateX(-50%); /* Centra l'immagine orizzontalmente */
  }

  /* .canvas-container2 #particles {
    width: 100%; 
    height: auto;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
} */

.sib-input input {
    color: black !important;
}


@media screen and (max-width: 767px){
    #radarCanvas {
        font-size: 8px; /* Imposta la dimensione del font desiderata */
    }

    .animatedgradient {
        font-size: 11vw;
    }

    .wide-item {
        width: 200%;
    }

    .wide-item-m {
        width: 170% !important;
        max-width: 200%;
    }

    /* .canvas-container2 #particles {
        width: 200%;
    } */


.ms-footer .container .footer-title h1 .btn-footer {
    display: block;
    width: 210px;
    text-align: center;
    margin: 10px auto 0 auto;
}
.myslidertitle {
    font-size: 3em;
}

.ubahome {
    max-width:180px;
}
.text-center-mobile {
    text-align: center !important;
  }

}

model-viewer {
    width: 600px;
    height: 600px;
  }

/* html, body {
    overflow-x: hidden;
  }
  body {
    position: relative;
  } */

  .ubaimage-animation {
    position: relative;
    overflow: hidden;
}

.image-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out; /* Smooth transition effect */
}

/* Keyframes for fading animation */
@keyframes fade {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

/* Apply animation to the images */
.ubaimage-animation .image-container img:nth-child(1) {
    animation: fade 6s infinite; /* Adjust duration here for the first image */
}

.ubaimage-animation .image-container img:nth-child(2) {
    animation: fade 6s infinite; /* Adjust duration here for the second image */
    animation-delay: 3s; /* Delay the animation start for the second image */
}