.body{
    font-family: "Poppins", sans-serif!important;
    background-color: #fff;
    color: #393939;
}
.fs-7 {
    font-size: 0.8rem;
}
.nav-link{
    color:#393939;
    font-weight: bold;
}
.nav-link:hover{
    color:#e50056;
    font-weight: bold;
}
.nav-link:active{
    color:#e50056;
    font-weight: bold;
}
.nav-link.show{
    color:#e50056!important;
    font-weight: bold;
}
.dropdown-item{
    color:#e50056!important;
    font-weight: bold;
    text-transform: uppercase;
}

.dropdown-item:hover{
    background-color:#e50056!important;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff!important;
}
.dropdown-menu{
    border: none;
    text-align: center;
}
.navbar-collapse{
    background-color: white;
  text-align: center;
}
.navbar-toggler{
    border: solid 2px;
    border-color:  #e50056;
}
.collapse02{
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
}

/* .bg-vermouth {
    background-image: url('../images/bg-vermouth.png');
    background-size: contain;
    background-position: center;
    background-repeat: repeat-x;
}
 */
 .navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-image: url('../images/linee-hamburger.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
 }

.txt-footer{
    font-family: "Poppins", sans-serif;
    margin-top: auto;
}
.bg-footer{
    background-color: #e50056;
    color: #fff;
}
html, body {
    height: 100%;
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: "Poppins", sans-serif!important;
}



main {
    flex: 1;
  }

footer {
    margin-top: auto; 
    background-color: #e50056; 
    color: white;
    text-align: center;
}
.txt-pink{
    color: #e50056;
}
.txt-link{
    text-decoration: none;
    color: #fff;
    font-family: "Poppins", sans-serif;
}
.txt-link02{
    text-decoration: none;
    font-family: "Poppins", sans-serif;
    color: #393939;
}
.txt-link02:hover{
    text-decoration: none;
    font-family: "Poppins", sans-serif;
    color: #e50056;
}

.img-bollo{
    width: 80px;
    float: left;
    top: -40px;
    position: relative;
}


 .video-intro {
    width: 100vw;
    height: 750px;
    overflow: hidden;
    position: relative;
  }
  
  video {
    width: 100%;
    height: 750px;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  } 



  .btn-fuxia {
    background-color: #e50056;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
}
.btn-fuxia:hover{
    background-color: #333333;
    color: #fff;
}

.btn-green{
    background-color: #a7bcbb;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
}
.btn-green:hover{
    background-color: #fff;
    color: #a7bcbb;
}


.btn-green02{
    background-color: #c1c0ad;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
}
.btn-green02:hover{
    background-color: #fff;
    color: #c1c0ad;
}

.btn-yellow{
    background-color: #ecb424;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
}
.btn-yellow:hover{
    background-color: #fff;
    color: #ecb424;
}

.btn-azzurro{
    background-color: #407580;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
}
.btn-azzurro:hover{
    background-color: #fff;
    color:  #407580;
}

.bg-markio {
    background-image: url('../images/bg-markio.png');
        background-size: cover;
        background-position: center 650px;
        background-repeat: no-repeat;
}

.vertical-line {
    width: 3px;  /* Spessore della linea */
    height: 120px; /* Altezza fissa iniziale */
    background-color: #e91e63; /* Colore rosa */
    position: absolute;
    transform: translateY(-50%); /* Centra la linea verticalmente */
  }

  .btn-lightazur {
    background-color: #81b2b3;
     color: white;
    font-weight: bold;
    text-transform: uppercase;
  }
  .btn-lightazur:hover {
    background-color: #fff;
    color: #81b2b3;
  }
  .btn-pink{
    background-color: #e9c9c6;
     color: white;
    font-weight: bold;
    text-transform: uppercase;
  }
  .btn-pink:hover {
    background-color: #fff;
    color: #e9c9c6;
  }
  
  
  .animate__animated.delayed {
    animation-delay: 0.4s; /* Aggiungi un ritardo (puoi regolare questo valore come preferisci) */
  }
  .rounded-20{
    border-radius: 50px;
  }
 


@media (max-width: 576px) { 
    .bg-vermouth {
        background-image: url('../images/sfondo-vermouth.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    } 
    .bg-bitter {
        background-image: url('../images/sfondo-bitter.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    } 
    .bg-bombardino {
        background-image: url('../images/sfondo-bombarino.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    } 
    .bg-gianduiotto {
        background-image: url('../images/sfondo-gianduiotto.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    } 
     .bg-amaro {
        background-image: url('../images/sfondo-amaro.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    } 
    .bg-gin{
        background-image: url('../images/sfondo-gin.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    .vertical-line{
        display: none;
    }

    
    .firma{
        width: 50%;
    }
}


@media (max-width: 768px) {
    .vertical-line{
        display: none;
    }

    .video-intro {
        padding-bottom: 56.25%; /* 16:9 aspect ratio */
    }
}



@media (min-width: 576px) { 
    .bg-vermouth {
        background-image: url('../images/sfondo-vermouth-03.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    } 
    .bg-bitter {
        background-image: url('../images/sfondo-bitter-03.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    } 
    .bg-bombardino {
        background-image: url('../images/sfondo-bombardino-03.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    } 
    .bg-gianduiotto {
        background-image: url('../images/sfondo-gianduiotto-03.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    } 
    .bg-amaro {
        background-image: url('../images/sfondo-amaro-03.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
    .bg-gin{
        background-image: url('../images/sfondo-gin-03.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
    .logo{
        height: auto;
    }
    .firma{
        width: 50%;
    }
    
    
 }


@media (min-width: 768px) { 
    .bg-vermouth {
        background-image: url('../images/sfondo-vermouth-02.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    } 
    .bg-bitter {
        background-image: url('../images/sfondo-bitter-02.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    } 
    .bg-bombardino {
        background-image: url('../images/sfondo-bombardino-02.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    } 
    .bg-gianduiotto {
        background-image: url('../images/sfondo-gianduiotto-02.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    } 
    .bg-amaro {
        background-image: url('../images/sfondo-amaro-02.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
    .bg-gin{
        background-image: url('../images/sfondo-gin-02.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
    .logo{
        height: 35px;
    }
    .firma{
        width: 40%;
    }
   
 }


@media (min-width: 992px) { 
    .bg-vermouth {
        background-image: url('../images/sfondo-vermouth-01.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    } 
    .bg-bitter {
        background-image: url('../images/sfondo-bitter-01.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    } 
    .bg-bombardino {
        background-image: url('../images/sfondo-bombardino-01.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    } 
    .bg-gianduiotto {
        background-image: url('../images/sfondo-gianduiotto-01.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    } 
    .bg-amaro {
        background-image: url('../images/sfondo-amaro-01.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
    .bg-gin{
        background-image: url('../images/sfondo-gin-01.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
    .logo{
        height: 35px;
    }
    .firma{
        width: 40%;
    }
 }


@media (min-width: 1200px) { 
    .bg-vermouth {
        background-image: url('../images/sfondo-vermouth.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    } 
    .bg-bitter {
        background-image: url('../images/sfondo-bitter.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    } 

    .bg-bombardino {
        background-image: url('../images/sfondo-bombardino.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    } 
    .bg-gianduiotto {
        background-image: url('../images/sfondo-gianduiotto.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    } 
    .bg-amaro {
        background-image: url('../images/sfondo-amaro.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
    .bg-gin{
        background-image: url('../images/sfondo-gin.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
    .logo{
        height: 35px;
    }
    .firma{
        width: 20%;
    }

 }


@media (min-width: 1400px) { 
    .bg-vermouth {
        background-image: url('../images/sfondo-vermouth.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    } 

    .bg-bitter {
        background-image: url('../images/sfondo-bitter.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    } 

    .bg-bombardino {
        background-image: url('../images/sfondo-bombarino.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    } 
    .bg-gianduiotto {
        background-image: url('../images/sfondo-gianduiotto.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    } 
    .bg-amaro {
        background-image: url('../images/sfondo-amaro.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

    .bg-gin{
        background-image: url('../images/sfondo-gin.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

    .logo{
        height: 35px;
    }
    .firma{
        width: 20%;
    }
   
 }