@charset "utf-8";
/* FONT */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

/* VARIABILI */
:root {
    --primary: #071d49;
}

body,
html {
    font-family: 'IBM Plex Sans', 'Roboto', sans-serif;
    color: black;
    background-color: white;
}

h2 {
    font-style: italic;
}

.storia-page p:not(.offcanvas .card p),
.section p {
    font-size: 20px;
    line-height: 1.5em;
}

.home h1 {
  font-size: 2.5em;
  line-height: 1em;
  font-weight: 700;
}



@media (min-width: 1200px) {

    .storia-page h2 {
        font-size: 2.5em;
        padding-bottom: 48px;
    }

    .storia-page h1 {
        font-size: 3.5em;
    }
}



.hero {
    background-color: var(--primary);
}

.home .hero {
    background-image: url(../img/hero-home.png), url(../img/ombra-loghi-home.png);
    background-repeat: no-repeat, no-repeat;
    /*background-position: center center, top center;
    background-attachment: fixed;*/
    background-size: cover, cover;
    min-height: calc(100dvh - 66px);
}

@media (max-width: 992px) {
    .home .hero {
        min-height: calc(100dvh - 451px);
        background-position: center;
    }
}

.home .section {
    background-image: url(../img/Bagno-MockUP-min.png);
    background-repeat: no-repeat;
    background-position: bottom -20px left -128px;
    background-size: contain;
}

@media (max-width: 1400px) {
    .home .section {
        background-position: bottom -20px left -245px;
    }
}

@media (max-width: 1200px) {
    .home .section {
        background-position: bottom -20px left -245px;
    }
}

@media (max-width: 992px) {
    .home .section {
        background-position: bottom -18px left -222px;
    }
}


@media (max-width: 768px) {
    .home .section {
        background-image: none;
    }
}

/*.loghi-home {
    background-image: url(../img/ombra-loghi-home.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}*/

.footer {
    background-color: var(--primary);
    color: white;
}


.home .footer:not(.offcanvas-body .footer) {
    margin-top: -230px;
}


.footer a {
    color: white;
}

.storia-page .hero {
    background-image: url(../img/hero-home.png), url(../img/ombra-loghi-home.png);
    background-repeat: no-repeat, no-repeat;
    background-position: top center, bottom center;
    background-size: cover, cover;
    padding-top: 200px;
    padding-bottom: 200px;
    color: white;
}

@media (max-width: 768px) {
    .storia-page .hero {
        padding-top: 150px;
    }

    .player {
        margin-top: -100px;

    }
}

.home .player {
    margin-top: -100px;
}

.player {
    margin-top: -200px;

}

.player img {
    aspect-ratio: 16/9;
    object-fit: cover;
    object-position: center;
}

.bg-dark,
.offcanvas {
    --bs-bg-opacity: 1;
    background-color: var(--primary) !important;
    color: white !important;
}

.card-img-overlay {
    top: auto;
}

.offcanvas-title a {
    color: white;
    text-decoration: none;
    font-size: 1.25rem;
}


.offcanvas-title a:hover {
    text-decoration: underline;
}

.offcanvas-body {
    margin: 0 auto;
}

.storie a {
    text-decoration: none !important;
}

a:hover .card {
    text-decoration: underline;
    color: white;
}

.text-bg-dark {
    color: #fff !important;
    background-color: var(--primary) !important;
}

.storie .card-img-top {
    border-radius: 0;
    aspect-ratio: 20 / 9;
    object-fit: cover;
}

.storie .card {
    border-radius: 15px;
    border: none;
}

.storie .card {
    border: 1px solid white;
    border-radius: 0;
    --bs-card-inner-border-radius: 0 !important;
    --bs-card-border-radius: 0 !important;
}

.btn-close-white {
    opacity: 1;
}

.navbar-toggler {
    border: none !important;
    color: white;
    padding: 5px 15px;
    font-size: 34px;
}

/*.offcanvas {
    overflow-y: scroll;
}*/

.card-title {
    font-weight: 700;
    font-size: 1.25em;
}

.videoContainer .noVideoEmbed {
    border: 1px solid var(--primary);
    background-color: #fff;
    padding: 24px;
    border-radius: 15px;
    text-align: center;
}