@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700');
@import url('https://fonts.googleapis.com/css2?family=Encode+Sans+Expanded:wght@100;200;300;400;500;600;700;800;900&family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&family=Ultra&display=swap');

:root {
    --bs-body-font-family: "Encode Sans Expanded", Arial, Helvetica, sans-serif;
    --white-color: #ffff;
    --hot-pink: #f94bf9;
    --brand-accent: #f94bf9;
}

html,
body {
    width: 100%;
    height: 100%;
    font-family: var(--bs-body-font-family);
}

.text-vertical-center {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.text-vertical-center h1 {
    margin: 0;
    padding: 0;
    font-size: 4.5em;
    font-weight: 700;
}

/*Header content*/
.picture-container {
    position: relative;
    width: 100%;
    height: auto;
    display: inline-block;
}

.picture-container:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    background: linear-gradient(0deg, rgba(0, 0, 0, .32), rgba(0, 0, 0, .32));
    content: '';
}

/*Header content ends here*/

.res,
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
    color: var(--white-color);
    background-color: rgba(0, 0, 0, 0.7);
}

.btn-light {
    border-radius: 0;
    color: #333;
    background-color: rgb(255, 255, 255);
}

.btn-light:hover,
.btn-light:focus,
.btn-light:active {
    color: #333;
    background-color: rgba(255, 255, 255, 0.8);
}

/* Color of the links BEFORE scroll */
.navbar-scroll .nav-link,
.navbar-scroll .navbar-toggler .fa-bars {
    color: var(--white-color);
}

/* Color of the links AFTER scroll */
.navbar-scrolled .nav-link,
.navbar-scrolled .navbar-toggler .fa-bars {
    color: var(--hot-pink);
}

/* Color of the navbar AFTER scroll */
.navbar.navbar-scrolled {
    background-color: var(--white-color);
    transition: background 0.5s ease-in-out, padding-bottom 0.5s ease-in-out;
}

/* An optional height of the navbar AFTER scroll */
.navbar.navbar-scroll.navbar-scrolled {
    padding-top: 5px;
    padding-bottom: 5px;
}

.navbar-brand {
    color: var(--brand-accent);;
}

/* Media queries for image sizes */
@media only screen and (max-width: 767px) {
    [data-id='img-1'] .background_mobile-picture__img {
        height: 480px;
        width: 320px
    }
}

@media only screen and (min-width: 768px) {
    [data-id='img-1'] .background_mobile-picture__img {
        height: 1080px;
        width: 1920px
    }
}

.callout {
    display: table;
    width: 100%;
    height: 543px;
    color: var(--white-color);
    background: url(../img/new_callout_5661x2584px.jpg) no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.ml-auto, .mx-auto {
    margin-left: auto !important;
}