html,
body {
    overflow-x: hidden;
    /* Prevent scroll on narrow devices */
    background-color: #f5f6fa;
    font-family: 'Oxygen', sans-serif;
}

body {
    padding-top: 130px;
}

.navbar {
    background: linear-gradient(180deg, rgba(245, 246, 250, 1) 0%, rgba(249, 249, 252, 1) 62%, rgba(245, 246, 250, 0) 100%);
}

@media (max-width: 11991.98px) {
    .offcanvas-collapse {
        position: fixed;
        top: 0px;
        /*135px*/
        /* Height of navbar */
        bottom: 0;
        left: -100%;
        width: 50%;
        /*100%*/
        opacity: 0.94;
        padding-right: 1rem;
        padding-left: 1rem;
        overflow-y: auto;
        visibility: hidden;
        background-color: #f5f6fa;
        transition: transform .3s ease-in-out, visibility .3s ease-in-out;
    }
    .offcanvas-collapse li {
        text-align: left;
    }
    .offcanvas-collapse.open {
        visibility: visible;
        transform: translateX(200%);
        /*translateX(100%);*/
    }
}

.nav-scroller .nav {
    color: rgba(255, 255, 255, .75);
}

.nav-scroller .nav-link {
    padding-top: .75rem;
    padding-bottom: .75rem;
    font-size: .875rem;
    color: #6c757d;
}

.nav-scroller .nav-link:hover {
    color: #007bff;
}

.nav-scroller .active {
    font-weight: 500;
    color: #343a40;
}

.bg-template {
    background-color: #b5c2e2;
    font-family: 'Oxygen', sans-serif;
    border-radius: 15px !important;
    letter-spacing: 0.75rem;
}

a.navbar-brand img {
    max-height: 120px;
    max-width: 290px;
}

button.navbar-toggler {
    top: 2.5rem;
    left: 1rem;
    display: block !important;
}

.search-input {
    font-size: 1.2rem;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    padding-left: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3Csvg fill='%23000000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' width='50px' height='50px'%3E%3Cpath d='M 21 3 C 11.6 3 4 10.6 4 20 C 4 29.4 11.6 37 21 37 C 24.354553 37 27.47104 36.01984 30.103516 34.347656 L 42.378906 46.621094 L 46.621094 42.378906 L 34.523438 30.279297 C 36.695733 27.423994 38 23.870646 38 20 C 38 10.6 30.4 3 21 3 z M 21 7 C 28.2 7 34 12.8 34 20 C 34 27.2 28.2 33 21 33 C 13.8 33 8 27.2 8 20 C 8 12.8 13.8 7 21 7 z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.search-input::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #b5c2e2;
    opacity: 1;
    /* Firefox */
    font-style: italic;
}

.search-input:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #b5c2e2;
    font-style: italic;
}

.search-input::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #b5c2e2;
    font-style: italic;
}

.search-input-parent {
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}

.shadow {
    box-shadow: 0px 0px 30px #cecece !important;
}

.feature-icon {
    width: 4rem;
    height: 4rem;
    border-radius: .75rem;
}

.icon-link>.bi {
    margin-top: .125rem;
    margin-left: .125rem;
    fill: currentcolor;
    transition: transform .25s ease-in-out;
}

.icon-link:hover>.bi {
    transform: translate(.25rem);
}

.icon-square {
    width: 3rem;
    height: 3rem;
    border-radius: .75rem;
}

.text-shadow-1 {
    text-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25);
}

.text-shadow-2 {
    text-shadow: 0 .25rem .5rem rgba(0, 0, 0, .25);
}

.text-shadow-3 {
    text-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25);
}

.card-cover {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.feature-icon-small {
    width: 3rem;
    height: 3rem;
}