/*base style*/
* {
    margin: 0;
    padding: 0;
}

nav {
    /* height: 10vh; */
    background-color: rgb(29, 179, 164);
}

main {
    /* background-color: #349ADA; */
    margin: 0 auto;
}

header footer section {
    margin: 0 auto;
}

.maxw {
    max-width: 1440px;
    margin: 0 auto;
}

.parallax-start {
    background-image: url('../img/boat2/8.svg');
    background-size: cover;
    /* height: 100vh;
    width: 100vw; */
    overflow: hidden;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.header-cover-headline {
    /* opacity: 65%; */
    color: rgb(8, 108, 125);
}

.header-cover-text {
    /* opacity: 65%; */
    font-size: calc(1.3rem + 1vw);   
    font-weight: 350; 
    line-height: 1.4;
    width: 50vw;
    /* color: rgb(6, 28, 93); */
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-style: oblique;
}

.button-book {
    width: 10vw;
    font-size: x-large;
}

#boatGallery {
    max-width: 100%;
    max-height: 80vh;

}

.boat-showcase-img img {
    width: 300px;
    max-height: 250px;
    /* height: 35vh; */
}

.carousel-inner {
    max-height: 80vh;
    overflow: hidden;
    text-align: center;
    align-content: center;
}

.carousel-item {
    /* position: relative; */
}

.carousel-inner img {
    object-fit: cover;
    object-position: center;
    height: 80vh;
}

@media screen and (max-width: 600px) {

    .header-cover-text {
        opacity: 65%;
        width: unset;
        color: black;
        background-color: aliceblue;
    }

    .button-book {

        width: 50vw;
        font-size: x-large;
    }

    .carousel-inner {
        max-height: 70vh;
        overflow: hidden;
        text-align: center;
    }

    .carousel-inner img {
        /* object-fit: scale-down; */
        height: 60vh;
    }
}

/* Example: Increase the size */
/* Alternatively, you can adjust the size of the container */
/* .carousel-control-next {
      width: 60px;
      height: 60px;
    } */
.carousel-control-next,
.carousel-control-prev

/*, .carousel-indicators */
    {
    /* filter: invert(100%); */
}

.carousel-control-next-icon,
.carousel-control-prev-icon

/*, .carousel-indicators */
    {
    width: 12vh;
    height: 12vh;
}


/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */
@media only screen and (max-device-width: 1366px) {
    .parallax {
        background-attachment: scroll;
    }

    .carousel-inner {
        max-height: 50vh;
    }
}