@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

:root {
    --bg-primary: #FFFFFF;
    --bg-secondary: #101E47;
    --bg-tertiary: #000000;
    --text-primary: #0B293D;
    --text-secondary: #007A80;
    --text-tertiary: #fff;
}

body,
html {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 20px;
    background: var(--bg-primary);
    color: var(--text-primary);
}

h1,
h2,
h3,
h4,
h5,
h6,
.btn {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
}

.top-bar {
    background-color: var(--bg-tertiary);
}

@media (min-width: 992px) {
    .hero {
        background-image: url(../img/Visual_Desktop_CLEAN.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: left center;
    }
}

@media (min-width:768px) and (max-width: 991px) {
    .hero {
        background-image: url(../img/Visual_Tablet_CLEAN.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: right center;
    }
}

@media (max-width: 767px) {
    .hero {
        background-image: url(../img/Visual_Mobile_CLEAN.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top center;
        min-height: 350px;
    }
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
    color: var(--text-secondary);
    border-left: 3px solid var(--text-secondary);
    font-weight: 700;
}

.nav-link {
    color: var(--text-primary);
    padding: 0;
    font-size: 18px;
}

.sfondo-sx {
    position: relative;
    display: inline-block;
}

.sfondo-sx::before {
    content: " ";
    position: absolute;
    inset: -50px 0px;
    background: var(--text-primary);
    transform: translate(-50px, 0px);
}

.sfondo-sx img {
    display: block;
    background: white;
    position: relative;
}

.sfondo-dx {
    position: relative;
    display: inline-block;
}

.sfondo-dx::before {
    content: " ";
    position: absolute;
    inset: -50px 0px;
    background: var(--text-primary);
    transform: translate(50px, 0px);
}

.sfondo-dx img {
    display: block;
    background: white;
    position: relative;
}

.sfondo-top-bot {
    position: relative;
    display: inline-block;
}

.sfondo-top-bot::before {
    content: " ";
    position: absolute;
    inset: -50px 0px;
    background: var(--text-secondary);
    transform: translate(0px, 0px);
}

.sfondo-top-bot img {
    display: block;
    background: white;
    position: relative;
}

.home h1,
.video-page h1 {
    font-weight: 700;
    line-height: 100%;
}

.home h2,
.video-page h2, .campagna h2 {
    font-size: calc(1.325rem + 0.25vw);
    font-weight: 400;
    padding-bottom: 23px;
}

.campagna h1 {
    font-size: 2.3em;
}

h3 {
    font-weight: 700;
}

.btn {
    border: 3px solid;
    border-radius: 0;
    font-weight: 500;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--text-secondary);
    --bs-btn-border-color: var(--text-secondary);
    --bs-btn-hover-color: var(--text-secondary);
    ;
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: var(--text-secondary);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--text-secondary);
    --bs-btn-active-border-color: var(--text-secondary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: grey;
    --bs-btn-disabled-border-color: grey;
}

img.border-bottom {
    border-bottom: 50px solid var(--text-secondary) !important;
}

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--text-primary);
    --bs-btn-border-color: var(--text-primary);
    --bs-btn-hover-color: var(--text-primary);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: var(--text-primary);
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--text-primary);
    --bs-btn-active-border-color: var(--text-primary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;
}



.home .video-storie p {
    font-size: 18px;
    min-height: 135px;
}

.video-page .video-storie p {
    font-size: 18px;
    min-height: 81px;
}

@media (min-width: 768px) and (max-width: 1200px) {
    .home .video-storie p {
        min-height: 162px;
    }

    .video-page .video-storie p {
        min-height: 108px;
    }
}

.verde {
    color: var(--text-secondary);
}

.bibliografia {
    font-size: 14px;
}

.bibliografia li::marker {
    font-weight: 700;
}

.footer,
.footer a {
    background-color: var(--bg-secondary);
    color: white;
    font-size: 16px;
}

/*.fascia {
    background: linear-gradient(90deg, #002A3E 0%, #007B82 100%);
    color: white;
} */

.video-section {
  position: relative;
  color: white;
}

.fascia {
    position: absolute;
  top: 40%;
  left: 50%;
  width: 100%;
  height: 190px;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, #002A3E 0%, #007B82 100%);
  z-index: 0;
}

.video-page .border-top {
    border-top: 50px solid var(--text-secondary) !important;
}

.video-page .sfondo-top-bot::before {
    content: " ";
    position: absolute;
    inset: -50px 50px;
    background: var(--text-secondary);
    transform: translate(0px, 0px);
}

.blu .sfondo-top-bot::before {
    background: var(--text-primary);
}

.noVideoEmbed {
    position: relative; display: block; max-width: 100%;
    background-color: #000;
    padding: 20px;
    aspect-ratio: 16 / 9;
}

.titoletto {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1.5rem;
    line-height: 1.5rem;
    margin-bottom: 20px;
}