/********** Template CSS **********/
:root {
    --primary: #182750;
    --secondary: #15ace1;
    --light: #f4f7fe;
    --dark: #14183e;
}

/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-out, visibility 0s linear 0.5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity 0.5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}

.container-hero {
    background: url(../img/bg-hero.png) center center no-repeat;
    background-size: cover;
    height: 100vh;
    padding-top: 5vh;
    padding-bottom: 5vh;
}

.bg-primary {
    background-color: #000023 !important;
}

h2 {
    color: #0f62fe;
    opacity: 0.7;
}

.hero-header {
    background-image: url(../img/hero-img.png);
    background-repeat: no-repeat;
    background-size: contain;
    height: 100%;
    background-position: right;
}
@media (min-width: 1200px) {
    .display-4 {
        font-size: 3.71rem;
    }
}
@media screen and (max-width: 40rem) {
    .hero-header {
        background-position: center;
    }
}