/* Main CSS for SnackSmart */

/* Variables */
:root {
    --primary: #FF6801;
    --secondary: #7F56D9;
    --white: #fff;
    --black: #000;
    --light-gray: #F7F8FA;
    --section-header-color: #3D365B;
    --text-gray-color: #594E84;
    --gradient: linear-gradient(113deg, #936DE7 5.27%, #7650CA 28.6%, #57389D 87.13%);
    /* animate */
    --animate-delay: 0.5s;
}
/* End Variables */

/* Global */
html {
    scroll-padding-top: 100px;
    overscroll-behavior: none;
    scroll-behavior: smooth;
}

body {
    font-family: Nunito;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0;
}

main {
    overflow: hidden;
}

.container-max {
    max-width: 1350px;
}

.separator {
    background: url(../images/separator.svg) no-repeat;
    height: 5px;
}

.separator-center {
    background-position-x: center;
}

.action-underline {
    border-bottom: 4px solid var(--primary);
    border-radius: 2px;
}

.section-bottom-margin {
    margin-bottom: 150px !important;
}

a {
    text-decoration: none;
}

/* Header */
.header-wrapper {
    position: relative;
    height: 1050px;
    background: url(../images/header-bg-lg.svg) no-repeat bottom center;
    background-size: cover;
}

.navbar .nav-link {
    color: var(--white);
    font-size: 14px;
    font-weight: 700;
    line-height: 14px;
    text-transform: uppercase;
    border-bottom: 2px solid transparent;
}

.navbar-nav .nav-link.show {
    color: var(--white);
}

.navbar-nav .nav-link:hover {
    border-bottom: 2px solid var(--primary);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
}

.navbar-collapse .flag-separator {
    border-right: 2px solid var(--text-gray-color) !important;
}

.navbar-collapse.show, .collapsing {
    background-color: white;
    border-radius: 8px;
    padding: 14px;
}

.navbar-collapse.show .navbar-nav .nav-link,
.navbar-collapse.collapsing .navbar-nav .nav-link {
    color: var(--section-header-color);
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 1.26px;
}

.collapsing {
    opacity: 0;
    transition-duration: 0.01s;
    transition-delay: 0s;
}

header .content .heading {
    font-size: 48px;
    font-weight: bold;
    line-height: 72px;
    letter-spacing: 0;
    color: var(--white);
}

header .content .sub-heading {
    font-size: 24px;
    font-weight: 400;
    line-height: 140%;
    color: var(--light-gray);
}

.header-max-width {
    max-width: 1024px;
    margin: 0 auto;
}

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

.header-video {
    width: 1015px;
    height: 545px;
    border-radius: 20px;
    border: 7px solid rgba(200, 200, 200, 0.40);
    /* border: 7px solid rgba(255, 255, 255, 0.40); */
    position: relative;
    z-index: 1;
}

.header-video iframe {
    width: 1000px;
    height: 530px;
    border-radius: 14px;
}
/* End Header */

/* Lottie Animations */
#canvas-desktop-left {
    position: relative;
    height: 802px;
    width: 332px;
    top: -350px;
    left: -250px;
}

#canvas-mobile-left {
    position: relative;
    height: 300px;
    width: 110px;
    top: -40px;
    left: -20px;
    z-index: -10;
}

#canvas-desktop-right {
    position: relative;
    float: right;
    height: 265px;
    width: 226px;
    top: 10px;
    right: 100px;
    z-index: -10;
}

#canvas-mobile-right {
    position: absolute;
    float: right;
    height: 436px;
    width: 110px;
    top: -135px;
    right: 0;
    z-index: -10;
}
/* End Lottie Animations */

/* Section Download App */
.section#download-app img {
    width: 378px;
    height: 220px;
    border-radius: 20px;
}

.section#download-app button {
    border-radius: 4px;
    border: 1px solid var(--primary);
    background: var(--light-gray);
    font-family: Roboto;
    line-height: 160%;
    font-size: 18px;
    color: var(--text-gray-color);
    max-width: fit-content;
}

.section#download-app .heading {
    color: var(--section-header-color);
    font-size: 32px;
    font-weight: bold;
    line-height: 100%;
    letter-spacing: 0;
}

.section#download-app .details {
    color: var(--text-gray-color);
    font-family: Roboto;
    font-size: 16px;
    font-weight: 400;
    line-height: 160%;
    margin-top: -110px;
}
/* End Section Download App */

/* Section Preorder */
.section#preorder {
    background-color: var(--light-gray);
}

.section#preorder img {
    width: 240px;
    border-radius: 18px;
}

.section#preorder .heading {
    color: var(--section-header-color);
    font-size: 32px;
    font-weight: bold;
    line-height: 150%;
    letter-spacing: 0;
}

.section#preorder .details {
    color: var(--text-gray-color);
    font-family: Roboto;
    font-size: 16px;
    font-weight: 400;
    line-height: 160%;
}
/* End Section Preorder */

/* Section Who we are */
.section#who-we-are .heading {
    color: var(--section-header-color);
    font-size: 32px;
    font-weight: bold;
    line-height: 100%;
    letter-spacing: 0;
}

.section#who-we-are .details {
    color: var(--text-gray-color);
    font-family: Roboto;
    font-size: 16px;
    font-weight: 400;
    line-height: 160%;
    letter-spacing: -0.16px;
}
/* End Section Who we are */

/* Section What we do */
.section#what-we-do {
    background: var(--gradient);
}

.section#what-we-do .heading {
    color: var(--white);
    font-size: 32px;
    font-weight: bold;
    line-height: 100%;
    letter-spacing: 0;
}

.section#what-we-do .details {
    color: var(--white);
    font-family: Roboto;
    font-size: 16px;
    font-weight: 400;
    line-height: 160%;
    letter-spacing: -0.16px;
}
/* End Section What we do */

/* Section How it works */
.section#how-it-works .heading {
    color: var(--section-header-color);
    font-size: 32px;
    font-weight: bold;
    line-height: 100%;
    letter-spacing: 0;
}

.section#how-it-works .card {
    border: 0;
    border-radius: 18px;
    border-bottom: 3px solid var(--primary);
    background: var(--light-gray);
    min-height: 350px !important;
}

.section#how-it-works .card svg {
    margin-bottom: 20px;
}

.section#how-it-works .card .card-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 120%;
}

.section#how-it-works .card .card-text {
    font-family: Roboto;
    font-size: 16px;
    font-weight: 400;
    line-height: 160%;
}
/* End Section How it works */

/* Section Stay in touch */
.section#stay-in-touch {
    border-radius: 24px;
    border: 8px solid var(--light-gray);
    background: var(--white);
}

.section#stay-in-touch .badge {
    background-color: var(--secondary);
    font-family: Inter;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

.section#stay-in-touch .heading {
    color: var(--section-header-color);
    font-size: 32px;
    font-weight: bold;
    line-height: 100%;
    letter-spacing: 0;
}

.section#stay-in-touch .details {
    color: var(--text-gray-color);
    font-family: Roboto;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
}

.section#stay-in-touch .subscribe-form {
    border-radius: 17px;
    border: 3px solid var(--light-gray);
}

.section#stay-in-touch .subscribe-form input {
    border-radius: 8px;
    border: 1px solid rgba(71, 70, 94, 0.30);
    background: var(--light-gray);
    color: #453C6B;
    font-family: Roboto;
    font-size: 16px;
    font-weight: 400;
    line-height: 160%;
    height: 60px !important;
}

.section#stay-in-touch .subscribe-form button {
    border: 0;
    border-radius: 8px;
    background: var(--primary);
    width: 140px;
    height: 60px !important;
}
/* End Section Stay in touch */

/* Section FAQs */
.section#faqs .heading {
    color: var(--section-header-color);
    font-size: 32px;
    font-weight: bold;
    line-height: 100%;
    letter-spacing: 0;
}

.section#faqs .details {
    color: var(--text-gray-color);
    font-family: Nunito;
    font-size: 16px;
    font-weight: 400;
    line-height: 25.6px;
}

.accordion-button {
    font-size: 18px;
    font-weight: 700;
    line-height: 21.6px;
    color: var(--section-header-color);
    padding-left: 0;
    padding-right: 0;
}

.accordion-button:not(.collapsed) {
    background-color: white !important;
    border: none !important;
    color: var(--section-header-color);
}

.accordion-body {
    padding: 10px 0;
}

.accordion-button:focus {
    box-shadow: none;
}
/* End Section FAQs */

/* Section Our team */
.section#our-team {
    background-image: url(../images/section-bg.svg);
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 625px;
}

.section#our-team .heading {
    color: var(--white);
    font-size: 32px;
    font-weight: bold;
    line-height: 100%;
    letter-spacing: 0;
}

.section#our-team .card {
    border-radius: 16px;
    min-height: 301px !important;
    border: 6px solid rgba(120, 80, 200, 0.80);
    background: var(--white);
    max-height: 301px !important;
    /* max-width: 326px !important; */
}

.section#our-team .card .card-body {
    border-radius: 10px;
}

.section#our-team .card .link {
    background-color: rgba(33, 32, 83, 0.40);
    position: absolute;
    bottom: 20px;
    width: 88%;
    font-size: 20px;
    font-weight: 500;
    line-height: 29.904px;
    color: var(--white);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.60);
    background: rgba(33, 32, 83, 0.40);
    backdrop-filter: blur(11px);
}

.section#our-team .card a {
    text-decoration: none;
}
/* End Section Our team */

/* Section Footer */
.section#footer {
    position: relative;
    background: var(--light-gray);
    height: 400px;
}

.section#footer .footer-wrapper {
    background: url(../images/footer-bg-lg.svg) no-repeat bottom left;
    height: 390px;
}

.section#footer .links a {
    color: var(--text-gray-color);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    /* text-transform: capitalize; */
}

.section#footer .inquires {
    border: 4px solid var(--primary);
    margin-top: -90px !important;
}

.section#footer .inquires .card-text {
    color: var(--section-header-color);
    font-family: Inter;
    font-size: 18px;
    font-weight: 600;
    line-height: 30px;
}

.section#footer .inquires .secondary {
    color: var(--secondary);
}

.section#footer .inquires .secondary a {
    color: var(--secondary);
}

.section#footer .inquires .disclaimer {
    color: var(--text-gray-color);
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.section#footer .copy {
    color: var(--text-gray-color);
    font-family: Roboto;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}
/* End Section Footer */

/* End Main CSS for SnackSmart */

/* Media Queries */
@media (max-width: 575.98px) {
    .header-wrapper {
        position: relative;
        height: 650px;
        background: url(../images/header-bg-sm.svg) no-repeat top center;
        background-size: cover;
    }

    .navbar-collapse {
        position: absolute;
        right: 20px;
        top: 90px;
    }

    .header-video {
        width: 100% !important;
        height: 200px;
        border-radius: 8px;
        border: 3px solid rgba(200, 200, 200, 0.40);
    }

    .header-video iframe {
        width: 100% !important;
        height: 195px;
        border-radius: 8px;
    }

    header .content .heading {
        font-size: 28px;
        font-weight: bold;
        line-height: normal;
    }

    header .content .sub-heading {
        font-size: 16px;
        font-weight: 500;
        line-height: 160%;
    }

    .separator {
        background-position: center;
    }

    .section#download-app .details {
        margin-top: 0;
        color: var(--section-header-color);
        font-size: 16px;
        font-weight: 400;
        line-height: 160%;
        align-self: stretch;
    }

    .section#download-app button {
        font-size: 16px;
        color: var(--section-header-color);
        line-height: 160%;
        display: flex;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .section#download-app .heading {
        font-weight: bold;
        line-height: 100%;
        letter-spacing: 0;
        color: var(--text-gray-color);
        font-size: 24px;
        line-height: normal;
        margin-top: -50px !important;
        text-align: center;
    }

    .section#download-app .separator {
        background-size: 130px;
    }

    .section#download-app img {
        width: 200px;
        height: 120px;
        border-radius: 8px;
        display: flex;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .section-top-margin {
        margin-top: 70px !important;
    }

    .section#preorder .heading {
        letter-spacing: 0;
        color: var(--text-gray-color);
        text-align: center;
        font-size: 24px;
        font-weight: bold;
        line-height: normal;
    }

    .section#preorder .separator {
        background-size: 200px;
    }

    .section#preorder img {
        width: 160px;
        border-radius: 8px;
    }

    .section#preorder {
        border-radius: 0 !important;
    }
    
    .section#who-we-are .section-top-margin {
        margin-top: 40px !important;
    }

    .section#who-we-are .heading {
        letter-spacing: 0;
        color: var(--text-gray-color);
        text-align: center;
        font-size: 24px;
        font-weight: bold;
        line-height: normal;
    }

    .section#who-we-are .separator {
        background-size: 100px;
    }

    .section#who-we-are .details {
        max-width: 100%;
        padding-right: calc(var(--bs-gutter-x)* 1);
        padding-left: calc(var(--bs-gutter-x)* 1);
    }

    .section#what-we-do {
        border-radius: 0 !important;
    }

    .section#what-we-do .heading {
        letter-spacing: 0;
        text-align: center;
        font-size: 24px;
        font-weight: bold;
        line-height: normal;
    }

    .section#what-we-do .separator {
        background-size: 100px;
    }

    .section#how-it-works .heading {
        letter-spacing: 0;
        text-align: center;
        font-size: 24px;
        font-weight: bold;
        line-height: normal;
        color: var(--text-gray-color);
    }

    .section#how-it-works .separator {
        background-size: 100px;
    }

    .section#how-it-works .section-top-margin {
        margin-top: 40px !important;
    }

    .section#how-it-works .card .card-title {
        color: var(--section-header-color);
    }

    .section#how-it-works .card .card-text {
        font-size: 16px;
        font-weight: 400;
        line-height: 160%;
    }

    .section#stay-in-touch {
        border: 0;
    }

    .section#stay-in-touch .section-top-margin {
        margin-top: 50px !important;
    }

    .section#stay-in-touch {
        max-width: 94%;
        padding-right: calc(var(--bs-gutter-x)* 1) !important;
        padding-left: calc(var(--bs-gutter-x)* 1) !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .section#stay-in-touch .badge {
        background-color: var(--secondary);
        display: flex;
        justify-content: center;
        margin-right: 4rem !important;
        margin-left: 4rem !important;
    }

    .section#stay-in-touch .heading {
        color: var(--text-gray-color);
        font-size: 24px;
        font-weight: bold;
        line-height: normal;
        text-align: center;
    }

    .section#stay-in-touch .details {
        color: var(--text-gray-color);
        font-size: 16px;
        line-height: 160%;
    }

    .section#stay-in-touch .subscribe-form {
        border-radius: 0;
        border: 0;
        height: 60px;
    }

    .section#stay-in-touch .subscribe-form .subscribe-mobile svg {
        position: absolute;
        right: 30px;
        margin-top: 5px;
    }

    .section#faqs .section-top-margin {
        margin-top: 40px !important;
    }

    .section#faqs .heading {
        letter-spacing: 0;
        color: var(--text-gray-color);
        text-align: center;
        font-size: 24px;
        font-weight: bold;
        line-height: normal;
    }

    .section#faqs .separator {
        background-size: 100px;
    }

    .section#faqs .details {
        max-width: 100%;
        padding-right: calc(var(--bs-gutter-x)* 1);
        padding-left: calc(var(--bs-gutter-x)* 1);
    }

    .section#our-team {
        border-radius: 0 !important;
        background: var(--gradient);
    }

    .section#our-team .section-top-margin {
        margin-top: 70px !important;
    }

    .section#our-team .heading {
        font-size: 24px;
        line-height: 160%;
        letter-spacing: 0;
        font-weight: bold;
    }

    .section#our-team .separator {
        background-size: 80px;
    }
    
    .section#our-team .tm1 {
        background: url(../images/katarina.jpg) lightgray 0px 0px / 100% 110% no-repeat;
        background-position: top;
        background-size: cover;
    }

    .section#our-team .tm2 {
        background: url(../images/nenad.jpg) lightgray 0px 0px / 100% 110% no-repeat;
        background-position: top;
        background-size: cover;
    }
    
    .section#our-team .tm3 {
        background: url(../images/milos.jpg) lightgray 0px 0px / 100% 110% no-repeat;
        background-position: top;
        background-size: cover;
    }
    
    .section#footer {
        position: relative;
        background: var(--light-gray);
        height: 400px;
    }

    .section#footer .section-top-margin {
        margin-top: 0px !important;
    }

    .section#footer .logo-container {
        border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
        padding-bottom: 40px !important;
    }

    .section#footer .logo {
        display: flex;
        justify-content: center;
        margin-right: 5rem !important;
        margin-left: 5rem !important;
    }

    .section#footer .footer-wrapper {
        background: none;
    }

    .section#footer .inquires {
        margin-top: 50px !important;
    }

    .section#footer .links a {
        color: var(--section-header-color);
        padding: 10px;
    }

    .section#footer .copy {
        text-align: center;
    }
}

@media (min-width: 575.99px) and (max-width: 767.98px) {
    .header-wrapper {
        position: relative;
        height: 800px;
        background: url(../images/header-bg-md.svg) no-repeat top center;
        background-size: cover;
    }

    .navbar-collapse {
        position: absolute;
        right: 20px;
        top: 90px;
    }

    .header-video {
        width: 100%;
        height: 300px;
        border-radius: 14px;
        border: 3px solid rgba(200, 200, 200, 0.40);
    }

    .header-video iframe {
        width: 100%;
        height: 295px;
        border-radius: 14px;
    }

    header .content .heading {
        font-size: 32px;
        font-weight: bold;
        line-height: normal;
    }

    header .content .sub-heading {
        font-size: 20px;
        font-weight: 500;
        line-height: 160%;
    }

    .separator {
        background-position: center;
    }

    .section#download-app .details {
        margin-top: 0;
        color: var(--section-header-color);
        font-size: 18px;
        font-weight: 400;
        line-height: 160%;
    }

    .section#download-app button {
        font-size: 18px;
        color: var(--section-header-color);
        line-height: 160%;
        display: flex;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .section#download-app .heading {
        font-weight: bold;
        letter-spacing: 0;
        color: var(--section-header-color);
        font-size: 26px;
        line-height: normal;
        margin-top: -50px !important;
        text-align: center;
    }

    .section#download-app .separator {
        background-size: 130px;
    }

    .section#download-app img {
        width: 400px;
        height: 230px;
        border-radius: 8px;
        display: flex;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .section-top-margin {
        margin-top: 70px !important;
    }

    .section#preorder .heading {
        letter-spacing: 0;
        color: var(--section-header-color);
        text-align: center;
        font-size: 26px;
        font-weight: bold;
        line-height: normal;
    }

    .section#preorder .details {
        font-size: 18px;
    }

    .section#preorder .separator {
        background-size: 200px;
    }

    .section#preorder img {
        width: 200px;
        border-radius: 16px;
    }

    .section#preorder {
        border-radius: 0 !important;
    }

    .section#preorder .section-top-margin {
        margin-top: 70px !important;
    }
    
    .section#who-we-are .section-top-margin {
        margin-top: 40px !important;
    }

    .section#who-we-are .separator {
        background-size: 100px;
    }

    .section#who-we-are .heading {
        letter-spacing: 0;
        text-align: center;
        font-size: 26px;
        font-weight: bold;
        line-height: normal;
        color: var(--section-header-color);
    }

    .section#who-we-are .details {
        font-size: 18px;
        max-width: 100%;
        padding-right: calc(var(--bs-gutter-x)* 1);
        padding-left: calc(var(--bs-gutter-x)* 1);
    }

    .section#what-we-do {
        border-radius: 0 !important;
    }

    .section#what-we-do .heading {
        letter-spacing: 0;
        text-align: center;
        font-size: 26px;
        font-weight: bold;
        line-height: normal;
    }

    .section#what-we-do .details {
        font-size: 18px;
        padding-right: calc(var(--bs-gutter-x)* .5);
        padding-left: calc(var(--bs-gutter-x)* .5);
    }

    .section#what-we-do .separator {
        background-size: 100px;
    }

    .section#how-it-works .heading {
        letter-spacing: 0;
        text-align: center;
        font-size: 26px;
        font-weight: bold;
        line-height: normal;
        color: var(--section-header-color);
    }

    .section#how-it-works .separator {
        background-size: 130px;
    }

    .section#how-it-works .section-top-margin {
        margin-top: 40px !important;
    }

    .section#how-it-works .card .card-title {
        color: var(--section-header-color);
        font-size: 24px;
        line-height: 120%;
    }

    .section#how-it-works .card .card-text {
        font-size: 16px;
        font-weight: 400;
        line-height: 160%;
    }

    .section#stay-in-touch {
        border: 0;
    }

    .section#stay-in-touch .section-top-margin {
        margin-top: 50px !important;
    }

    .section#stay-in-touch {
        max-width: 94%;
        padding-right: calc(var(--bs-gutter-x)* 1) !important;
        padding-left: calc(var(--bs-gutter-x)* 1) !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .section#stay-in-touch .badge {
        background-color: var(--secondary);
        display: flex;
        justify-content: center;
        margin-right: 14rem !important;
        margin-left: 14rem !important;
    }

    .section#stay-in-touch .heading {
        font-size: 26px;
        font-weight: bold;
        line-height: normal;
        text-align: center;
        color: var(--section-header-color);
    }

    .section#stay-in-touch .details {
        color: var(--text-gray-color);
        font-size: 18px;
        line-height: 160%;
    }

    .section#stay-in-touch .subscribe-form {
        border-radius: 0;
        border: 0;
        height: 60px;
    }

    .section#stay-in-touch .subscribe-form .subscribe-tablet svg {
        position: absolute;
        right: 30px;
        margin-top: 5px;
    }

    .section#faqs .section-top-margin {
        margin-top: 40px !important;
    }

    .section#faqs .separator {
        background-size: 100px;
    }

    .section#faqs .heading {
        letter-spacing: 0;
        text-align: center;
        font-size: 26px;
        font-weight: bold;
        line-height: normal;
        color: var(--section-header-color);
    }

    .section#faqs .details {
        font-size: 18px;
        max-width: 100%;
        padding-right: calc(var(--bs-gutter-x)* 1);
        padding-left: calc(var(--bs-gutter-x)* 1);
    }

    .section#our-team {
        border-radius: 0 !important;
        background: var(--gradient);
    }

    .section#our-team .section-top-margin {
        margin-top: 70px !important;
    }

    .section#our-team .heading {
        font-size: 26px;
        line-height: normal;
        font-weight: bold;
        letter-spacing: 0;
    }

    .section#our-team .separator {
        background-size: 80px;
    }

    .section#our-team .tm1 {
        background: url(../images/katarina.jpg) lightgray 0px 0px / 100% 100% no-repeat;
        background-position: top;
        background-size: cover;
    }

    .section#our-team .tm2 {
        background: url(../images/nenad.jpg) lightgray 0px 0px / 100% 100% no-repeat;
        background-position: top;
        background-size: cover;
    }
    
    .section#our-team .tm3 {
        background: url(../images/milos.jpg) lightgray 0px 0px / 100% 100% no-repeat;
        background-position: top;
        background-size: cover;
    }
    
    .section#footer {
        position: relative;
        background: var(--light-gray);
        height: 700px !important;
    }

    .section#footer .section-top-margin {
        margin-top: 0px !important;
    }

    .section#footer .logo-container {
        border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
        padding-bottom: 40px !important;
        display: flex;
        justify-content: center;
    }

    .section#footer .logo {
        display: flex;
        justify-content: center;
        margin-right: 5rem !important;
        margin-left: 5rem !important;
    }

    .section#footer .footer-wrapper {
        background: none;
    }

    .section#footer .inquires {
        margin-top: 50px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .section#footer .links a {
        color: var(--section-header-color);
        padding: 10px;
    }

    .section#footer .links {
        text-align: center;
        justify-content: center;
        color: var(--text-gray-color);
    }

    .section#footer .copy {
        text-align: center;
    }
}

@media (min-width: 767.99px) and (max-width: 991.98px) {
    .navbar-collapse {
        position: absolute;
        right: 20px;
        top: 90px;
    }
    
    .section#download-app img {
        width: 400px;
        height: 230px;
        border-radius: 8px;
        display: flex;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .section#preorder .section-top-margin {
        margin-top: 150px !important;
    }

    .section#our-team .tm1 {
        background: url(../images/katarina.jpg) lightgray 0px 0px / 110% 100% no-repeat;
        background-position: top;
        background-size: cover;
    }

    .section#our-team .tm2 {
        background: url(../images/nenad.jpg) lightgray 0px 0px / 110% 100% no-repeat;
        background-position: top;
        background-size: cover;
    }
    
    .section#our-team .tm3 {
        background: url(../images/milos.jpg) lightgray 0px 0px / 110% 100% no-repeat;
        background-position: top;
        background-size: cover;
    }
}

@media (min-width: 991.99px) and (max-width: 1199.98px) {
    .section#preorder .section-top-margin {
        margin-top: 150px !important;
    }

    .section#our-team .tm1 {
        background: url(../images/katarina.jpg) lightgray 0px 0px / 110% 100% no-repeat;
        background-position: top;
        background-size: cover;
    }

    .section#our-team .tm2 {
        background: url(../images/nenad.jpg) lightgray 0px 0px / 110% 100% no-repeat;
        background-position: top;
        background-size: cover;
    }
    
    .section#our-team .tm3 {
        background: url(../images/milos.jpg) lightgray 0px 0px / 110% 100% no-repeat;
        background-position: top;
        background-size: cover;
    }
}

@media (min-width: 1199.99px) {
    #canvas-desktop-left {
        left: -210px;
    }

    .section#our-team .card {
        max-height: 314px !important;
        max-width: 380px !important;
    }

    .section#our-team .tm1 {
        background: url(../images/katarina.jpg) lightgray 0px 0px / 100% 110% no-repeat;
        background-position: top;
        background-size: cover;
    }

    .section#our-team .tm2 {
        background: url(../images/nenad.jpg) lightgray 0px 0px / 100% 110% no-repeat;
        background-position: top;
        background-size: cover;
    }
    
    .section#our-team .tm3 {
        background: url(../images/milos.jpg) lightgray 0px 0px / 100% 110% no-repeat;
        background-position: top;
        background-size: cover;
    }
}

@media (min-width: 1199.99px) and (max-width: 1399.98px) {
    #canvas-desktop-right {
        position: relative;
        float: right;
        height: 265px;
        width: 226px;
        top: 10px;
        right: 20px;
        z-index: -10;
    }

    #canvas-desktop-left {
        position: relative;
        height: 802px;
        width: 332px;
        top: -350px;
        left: -180px;
    }
}

/* `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {}

/* `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {}

/* `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {}

/* `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {}

/* `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {}