html,
body {
    overflow-x: hidden;
 background-color: white;
}

/*BASIC*/

h1,
h2,
h3 {
    font-family: 'Playfair Display', serif;
}

h4,
h5,
p {
    font-family: 'Poppins', sans-serif;
}

a:hover.arrow-link{
text-decoration: none;
}


/* dimensioni font */

.f-12 {
    font-size: 12px !important;
}

.f-14 {
    font-size: 14px !important;
}

.f-16 {
    font-size: 16px !important;
}

.f-18 {
    font-size: 18px !important;
}

.f-21 {
    font-size: 21px !important;
}

.f-24 {
    font-size: 24px !important;
}

.f-28 {
    font-size: 28px !important;
}

.f-32 {
    font-size: 32px !important;
}

.f-36 {
    font-size: 36px !important;
}

.f-42 {
    font-size: 42px !important;
}

.f-48 {
    font-size: 48px !important;
}

.f-52 {
    font-size: 52px !important;
}

.f-60 {
    font-size: 60px !important;
}

.f-72 {
    font-size: 72px !important;
}


/*HEADER*/

.bg-image {
    background: linear-gradient(to bottom, #000000bf, transparent), url(https://cdn.ideeperviaggiare.it/media/2023/04/foto-sposi-bouquette-1366x911-473005.jpg) center center;
    background-size: cover;
    width: 100%;
    height: 1000px;
}

.navbar-brand {
    width: 20%;
    height: auto;
}

.form-style {
    border: 2px solid white;


}




/*BUTTONS*/

.btn-white-round {
    background-color: white;
    border-radius: 30px;
}

.btn-white-round:hover {
    background-color: rgba(255, 255, 255, 0);
    border: 1px solid white;
    color: white;
}

.bg-review {
    background-color: #EEEBDD;

}


.image-review {
    height: 700px;
    object-fit: cover;
}

.img-couple {
    border-radius: 100px !important;
}

.virgolette {
    color: black;
    width: 4%;
}

.cit-class {
    line-height: 0.5;
}


/*SLIDER*/

.carousel-item {
    transition-duration: 1s;
    

}

.carousel-caption {
    padding-top: 0;
    color: black;
}

.carousel-indicators li {
    background-color: black !important;
}

.carousel-control-next-icon {
    color: black !important;

}



.image-slider1, .image-slider2, .image-slider3 {
    width: 100%;
    height: 350px;
}


.btn-white {
    border: 2px solid white;
    background: transparent;
    color: white;
    border-radius: 0px;
}

.btn-white:hover {
    background-color: rgba(255, 255, 255, 0.958);
    color: black;
}

.stelle {
    color: #Ffd700;
    
}

.bg-review .carousel-caption{

        top: 20px;
}




/* NEWSLETTER */

.newsletter-section {
    height: 350px;
    background: linear-gradient(to top, #00000086, transparent), url(https://cdn.ideeperviaggiare.it/media/2023/04/sposi-una-piattaforma-1920x1080-473601.jpg) center center;
    background-repeat: no-repeat;
    object-fit: cover !important;

}

.position-absolute {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* FOOTER */

.bg-footer {
    background-color: #EEEBDD;

}

hr {
    border-top: 2px solid rgb(0, 0, 0);
    width: 60%;

}
.height-img{
  width: 100%;
  height: 500px;
  object-fit: cover;
}

@media (max-width: 576px) {
 .navbar-brand {
width:60%;
height: auto;
 }

    .bg-image {
        height: 1250px;
    }

    .f-30-mobile {
        font-size: 30px !important;
    }

    .f-14-mobile {
        font-size: 14px !important;
    }

    
    .f-12-mobile {
        font-size: 14px !important;
    }

    .image-review {
        height: 300px;
        
    }

    .position-relative {
        position: inherit;
    }
/* 
    .detail-box.position-absolute {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);    
        position: inherit !important; 
    } */

    .image-flex-reverse {
        display: flex;
        flex-direction: column-reverse;
    }


    .image-slider1, .image-slider2, .image-slider3 {
        width: 100%;
        height: 550px;
    }
    .bg-review .carousel-caption{
        top: 50px;
        left: 5%;
        right: 5%;
    }

.height-img{
    width: 100%;
    height: 300px;
    object-fit: cover;
}


  

 

    
}

@media (min-width:576px) and (max-width:992px) {
 .navbar-brand {
width:40%;
height: auto;
 }
    
    .bg-image {
        height: 1570px;
    }

    .oscura-freccia {
        display: none !important;
    }

    .oscura-br {
        display: block !important;

    }


    .image-slider1, .image-slider2, .image-slider3 {
        width: 100%;
        height: 430px;
    }

    .bg-review .carousel-caption{
        top: 50px;
        left: 5%;
        right: 5%;
    }

    .frecce-md {
        display: none;
    }

    
    .image-flex-reverse {
        display: flex;
        flex-direction: column-reverse;
    }

    




}