/* Caricamento Font Neulis Neue Medium */

@font-face {

    font-family: 'Neulis Neue';

    src: url('../fonts/Neulis_Neue_Regular.woff2') format('woff2'),

         url('../fonts/Neulis_Neue_Regular.woff') format('woff');

    font-weight: 500;

    font-style: normal;

}



html {

    /* Sostituisci 80px con l'altezza effettiva della tua navbar */

    scroll-padding-top: 80px; 

    scroll-behavior: smooth;

}

.size-7{

    font-size: 7px;

}

body {

    font-family: 'Neulis Neue', sans-serif;

    background-color: #fff;

    color: #000;

    -webkit-font-smoothing: antialiased;

}



a{

    text-decoration: none;

    color:#000;

}

p{

    margin:0 !important;

}

.bg-black {

    background-color: #000 !important;

}



/* Header & Typography */

.section-hero {

   min-height: 40vh; 

    display: flex;

    align-items: center; /* Centra verticalmente */

    justify-content: center; /* Centra orizzontalmente */

    padding-top: 80px;

   

}

.section-about {

   min-height: 70vh;  

    /* padding-top: 20px; */

   

}

.section-image{

 max-height: 500px;

  overflow: hidden;

  

}

.section-image1{

 max-height: 700px;

  overflow: hidden;

  

}

#social-link {

    display: flex;

    align-items: center; /* Centra verticalmente */

    justify-content: center; /* Centra orizzontalmente */

}



.centerHW {

    display: flex;

    align-items: center; /* Centra verticalmente */

    justify-content: center; /* Centra orizzontalmente */

}



#social-link h2 {

    display: block;

    width: 100%;

    margin-bottom: 20px; /* Spazio tra titolo e icone */

}



.margin-bottom-40{

     margin-bottom: 90px;

}





.center-block {

    margin-left: auto;

    margin-right: auto;

    display: block;

}



.about-text {

  max-width: 360px;      /* larghezza leggibile, non full width */

  margin-left: auto;

  margin-right: auto;    /* centra il blocco */

  text-align: justify; 

  padding: 20px 35px;  

}



/* #testimonial,#social{ */

    /* margin-top:40px; */

/* } */



.logo-hero {

    /* Regola la larghezza a tuo piacimento */

    width: 45%;

    max-width: 250px; /* Imposta la grandezza massima del logo */

    height: auto;

    display: block;

    margin: 0 auto;

}



.logo-social {

    /* Regola la larghezza a tuo piacimento */

  

    max-width: 50px; /* Imposta la grandezza massima del logo */

    margin: 0 auto;

}

.main-title {

    font-size: 8rem;

    font-weight: 800;

    line-height: 0.8;

    margin-bottom: 0;

    letter-spacing: -3px;

}



.sub-title {

    font-size: 2.5rem;

    font-weight: 400;

    margin-top: -10px;

    letter-spacing: 2px;

}



.info-text p {

    font-size: 0.95rem;

    letter-spacing: 0.5px;

    font-weight: 500;

    opacity: 0.9;

}



.final-claim {

    font-size: 1.4rem;

    font-weight: 600;

    margin-top: 10px;

}



/* Image */

.grayscale {

    filter: grayscale(100%);

    display: block;

}



/* Navbar */

.navbar-brand {

    font-size: 1.5rem;

    letter-spacing: 1px;

}



.navbar-toggler, .navbar-toggler-icon {

    color: white !important;

}

.nav-link {

    font-size: 0.75rem;

    letter-spacing: 2px;

    /* margin-left: 15px; */

    color : white !important;

    font-size: 14px;

}

.nav-link:hover {

    color:rgba(255, 255, 255, 0.75)!important;

}

.btn-social:hover{

	color:rgba(255, 255, 255, 0.75)!important;

}

/* Responsive DESKTOP */

@media (min-width: 768px) {

    .main-title { font-size: 5rem; }

    .sub-title { font-size: 1.8rem; }

    .info-text p { font-size: 0.85rem; }

	.about-text { 

        max-width: 720px; 

        width: 100%; /* Ensures it fills the space available */

       

    }

	.btn-responsive {

            padding: .5rem 1rem;

            font-size: 1.25rem;

            line-height: 1.5;

            border-radius: 0; /* Mantiene l'effetto rounded-0 */

        }

    .ts20{

        font-size:25px !important;

    }

    #Menu{

        margin: 40px 0px;

    }

    .section-hero {

   min-height: 65vh; 

    }

}



/* SLIDER*/

/* Carousel heading */

.heading {

  display: block;

  text-align: center;

}



/* Container for the entire carousel */

.multi-carousel-container {

    cursor: grab;

    margin: 0 auto;

    width: 100%;

    /* height: 60vh;  */

    overflow: hidden;

    position: relative;

    display: flex;

    align-items: center;

    background-color: #000; /* Aggiunge sfondo nero per i bordi delle foto "contained" */

}



/* Cursor styles for dragging */

.multi-carousel-container.dragging,

#multiCarousel.dragging {

  cursor: grabbing;

}



/* Wrapper for all slides */

.multi-carousel-inner {

  display: flex;

  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}



/* Individual slide */

.multi-carousel-item,

.clone {

  box-sizing: border-box;

  flex: 0 0 33.333333%;

  padding: 0 0px;

  position: relative; /* Essential for item-number positioning */

}



/* Control buttons */

.multi-carousel-control-prev,

.multi-carousel-control-next {

  align-items: center;

  background-color: rgba(0, 0, 0, 0.5);

  border: none;

  border-radius: 50%;

  color: white;

  cursor: pointer;

  display: flex;

  height: 40px;

  justify-content: center;

  position: absolute;

  text-decoration: none;

  top: 50%;

  transform: translateY(-50%);

  transition: background-color 0.3s ease;

  width: 40px;

  z-index: 10;

}



.multi-carousel-control-prev:hover,

.multi-carousel-control-next:hover {

  background-color: rgba(0, 0, 0, 0.7);

}



.multi-carousel-control-prev {

  left: 10px;

}



.multi-carousel-control-next {

  right: 10px;

}



/* Image container with dynamic height */

.img-container {

    width: 100%;

    /* Questo trucco crea un contenitore con rapporto 4:5 (5/4 = 1.25 -> 125%) */

    aspect-ratio: 4 / 5; 

    overflow: hidden;

    position: relative;

}



/* Image styling */

.img-container img,

#carouselInner img {

 height: 100%;

    width: 100%;

    object-fit: cover; /* Ora puoi usare cover perché il contenitore è già 4:5 */

    display: block;

}



.img-container:hover img {

  transform: translateZ(0) scale(1.02);

}



/* Item number styling - guaranteed visibility */

.item-number {

  align-items: center;

  background-color: rgba(255, 255, 255, 0.75);

  border-radius: 50%;

  display: inline-flex;

  font-size: 120%;

  font-weight: bold;

  height: 35px;

  justify-content: center;

  left: 1rem;

  position: absolute;

  top: 1rem;

  width: 35px;

  z-index: 2; /* Higher than default but below controls */

  /* Isolation prevents z-index context issues */

  isolation: isolate;

}



/* Carousel cursor styling */

#multiCarousel {

  cursor: grab;

  touch-action: pan-y;

}



/* Disable text selection during drag */

#multiCarousel.dragging {

  user-select: none;

  -webkit-user-select: none;

}



/* Responsive adjustments for screens smaller than 720px (45em) */

@media (max-width: 45em) {

  .multi-carousel-item,

  .clone {

    flex: 0 0 100%;

  }

}



/* LINGUA */

.lang-switch {

    color: rgba(255, 255, 255, 0.6); /* Grigio chiaro per la lingua non selezionata */

    text-decoration: none;

    transition: color 0.3s ease;

}



/* Colore quando la lingua è attiva o selezionata */

.lang-switch.active-lang {

    color: #ffffff !important; /* Bianco acceso */

    font-weight: bold;

}



/* Effetto hover */

.lang-switch:hover {

    color: #ffffff;

}