:root {
    --bs-body-bg: #121212;
    --bs-body-color: #eee;
    --bs-font-sans-serif: "sans-serif","Arial","Helvetica";
    --bs-primary: #52796F;
    --bs-secondary: #36514a;
    --bs-link-color: #52796F;
    --bs-link-hover-color: #36514a;
}

.navbar {
    --bs-navbar-color: rgb(238, 238, 238);
    --bs-navbar-hover-color: #fff;
}

.btn-custom-primary {
    color: #eee;
    background-color: #52796F;
}

.btn-custom-primary:hover {
    color: #eee;
    background-color: #36514a;
}

.container {
    max-width: 960px !important;
 }


.carousel-caption {
    background-color: rgba(238, 238, 238, 0.3);
    right: 30%;
    left: 30%;
    padding-bottom: 0px;
}

.carousel-caption h5, .carousel-caption p{
    font-weight: bold;
}


.overlay-logo {
    position: absolute;
    top: 5px;
    right: 5px;
}

@media (max-width: 767.98px) {
    .overlay-logo {
        max-width: 75px;
        height: auto;
    }

    .carousel-caption h5{
        font-size: 12px !important;
        
    }

    .carousel-caption p{
        font-size: 10px !important;
        
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        /* Increase the size of the icons */
        width: 60px;
        height: 60px;
        background-size: 60px 60px;        
    }

    .overlay-logo {
        max-width: 100px;
        height: auto;
    }
}

@media (min-width: 992px) {
/* Large screens and up */
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        /* Increase the size of the icons */
        width: 80px;
        height: 80px;
        background-size: 80px 80px;        
    }
    .overlay-logo {
        max-width: 150px;
        height: auto;
    }
}