*{
        font-family: "Century Gothic", serif;

}

#navbarbackground{


    background-color: #c7c0b0;
}

#griglia {
    padding: 0;
    margin: 0;
}


body {
    background: #eeeae1;
}
.section-padding {
    padding: 100px 0;
}
#navbarbackground{


    background-color: #c7c0b0;
}

.carousel-item {
    height: 100vh;
    min-height: 300px;
}
.carousel-caption {
    bottom: 220px;
    z-index: 2;
}
.carousel-caption h5 {
    font-size: 45px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 25px;
}
.carousel-caption p {
    width: 60%;
    margin: auto;
    font-size: 18px;
    line-height: 1.9;
}
.carousel-inner:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    z-index: 1;
}
.zoom {
    cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAABmJLR0QA/wD/AP+gvaeTAAABRElEQVRIie3Vvy5EQRTH8Q/RbImHUVi5/kQh0ZEsD6DkGXTiGfREQqfagmwsCS3eAYVWSbGzMjvu3OsmFMQvmWRy5szvOyd37hn+isai+Rxm8ZbkvOCgwmMLUyW+V7iE8WhhCXtYwWQ0WjUHbSX5K8FnqSx5F108Yb7GOKf5sL8b/DBaCVxjDcdYbAhoh32bwedDKQT6AXTUANTGaQCcp4tlkBh0+AVQGyc5QAp5DiMGdQwqKjKAwqCCTgJIvWrVxqPPFQ3jC03MqlTgNondyFf4r59Xgbskdu8bv0nuFuVuXaV2sJ3ECoNeVPWflK2PeMU/4xSmk5MeYwO9DKSnvNeNeOXaStyLLjI5Q/WxrqLXlUGaAGLQl5rqj70nE0nSMs4wEwbNn99brIrelBjSx36YT0bx15rTD5/foR7C6Nfs+4V6B2p1Sa5+2199AAAAAElFTkSuQmCC"), pointer;
}

.zoomOpen {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: #d4ccba;
    padding: 25px;
    z-index: 99999;
    zoom: 0.85;
    opacity: 0;
    cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAABmJLR0QA/wD/AP+gvaeTAAAAp0lEQVRIie2VTQqAIBSE52BBP7evbS47QJ6iNgpio8/8oYgGXEg633ukDvBFrQD6Sl698buoA7ADmAoB1meMVaDBO9qEubSfVuJ3dAhzsQMG0h4oBrHrkwEhUAjCCsoGMUgxwGowRgyizffbUsaADR/ChsqB/orqkX/S5HS5an5Pmt/4nLfrVkyUvsIiKJYHftKx5BPzJDlwBFkfeurmCgAXtFTyepFOkXBc+2M5ykQAAAAASUVORK5CYII="), pointer;
}

.zoomOpen > div {
    background-color: #d4ccba;
    background-repeat: no-repeat;
    background-position: center center;
    height: 100%;
    width: 100%;
}

.navbar .getstarted {
    background: #106eea;
    margin-left: 30px;
    border-radius: 4px;
    font-weight: 400;
    color: #fff;
    text-decoration: none;
    padding: .3rem 1rem;
    line-height: 2.3;
}
.navbar-nav a {
    font-size: 25px;

    font-weight: 500;
}
.navbar-light .navbar-brand {
    color: #000;
    font-size: 25px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 2px;
}
.navbar-light .navbar-brand:focus, .navbar-light .navbar-brand:hover {
    color: #000;
}
.navbar-light .navbar-nav .nav-link {
    color: #000;
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
    color: #000;
}
.w-100 {
    height: 100vh;
}
.navbar-toggler {
    padding: 1px 5px;
    font-size: 18px;
    line-height: 0.3;
    background: #fff;
}
.portfolio .card {
    box-shadow: 15px 15px 40px rgba(0, 0, 0, 0.15);
}
.team .card {
    box-shadow: 15px 15px 40px rgba(0, 0, 0, 0.15);
}
.services .card-body i {
    font-size: 50px;
}
.team .card-body i {
    font-size: 20px;
}


#mainCarousel {
    width: 600px;
    margin: 0 auto 1rem auto;

    --carousel-button-color: #170724;


    --carousel-button-svg-width: 20px;
    --carousel-button-svg-height: 20px;
    --carousel-button-svg-stroke-width: 2.5;
}

#mainCarousel .carousel__slide {
    width: 100%;
    padding: 0;
}

#mainCarousel .carousel__button.is-prev {
    left: +1rem;
    color: white;
}

#mainCarousel .carousel__button.is-next {
    right: +1rem;
    color: white;
}

#mainCarousel .carousel__button:focus {
    outline: none;
    box-shadow: 0 0 0 4px #000000;
}

#thumbCarousel .carousel__slide {
    opacity: 0.5;
    padding: 0;
    margin: 0.25rem;
    width: 96px;
    height: 64px;
}

#thumbCarousel .carousel__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

#thumbCarousel .carousel__slide.is-nav-selected {
    opacity: 1;
}

.carousel {
    --carousel-button-color: #170724;
    --carousel-button-bg: #fff;
    --carousel-button-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%),
    0 1px 1px 0 rgb(0 0 0 / 14%), 0 1px 3px 0 rgb(0 0 0 / 12%);

    --carousel-button-svg-width: 20px;
    --carousel-button-svg-height: 20px;
    --carousel-button-svg-stroke-width: 2.5;
}

.carousel .carousel__slide {
    width: 30%;
    padding: 10px;
}

.carousel .carousel__button.is-prev {
    left: +1rem;
}

.carousel .carousel__button.is-next {
    right: +1rem;
}

.carousel .carousel__button:focus {
    outline: none;
    box-shadow: 0 0 0 4px  black;
}

.fancybox__container {
    --fancybox-bg: #eeeae1;
    --fancybox-color: #4B5563;

    --carousel-button-width: 50px;
    --carousel-button-height: 50px;
    --carousel-button-bg: rgba(255, 255, 255, 0.9);

    --carousel-button-svg-stroke-width: 1.8;
    --carousel-button-svg-filter: none;
}

.fancybox__caption {
    padding: 1rem 4rem 0 4rem;
    font-size: 1rem;
    line-height: 1.5rem;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {

    .carousel-caption {
        bottom: 370px;
    }
    .carousel-caption p {
        width: 100%;
    }
    .card {
        margin-bottom: 30px;
    }
    .img-area img {
        width: 100%;
    }
    .carousel-inner {
        position: relative;
        width: 60%;
        height: 60%;
        overflow: hidden;
    }
}
@media only screen and (max-width: 767px) {
    .navbar-nav {
        text-align: center;
    }
    .carousel-caption {
        bottom: 125px;
    }
    .carousel-caption h5 {
        font-size: 17px;
    }
    .carousel-caption a {
        padding: 10px 15px;
        font-size: 15px;
    }
    .carousel-caption p {
        width: 100%;
        line-height: 1.6;
        font-size: 12px;
    }
    .about-text {
        padding-top: 50px;

    }
    .card {
        margin-bottom: 30px;
    }
}