/* Navigation bar variables */
:root {
    --li_element_padding_top: 1.5rem;
    --header-banner_content_padding_top: calc(60px + var(--li_element_padding_top)*2);
}
/* FONTS */
@font-face {
    font-family: TypeNextCondensedProBold;
    font-display: swap;
    src: url('/fonts/TypeNextCondensedPro/BMWTypeNextCondensedProTT-Bold.woff2') format("woff2");
    font-weight: bold;
    font-style: bold;
}

@font-face {
    font-family: TypeNextCondensedProLight;
    font-display: swap;
    src: url('/fonts/TypeNextCondensedPro/BMWTypeNextCondensedProTT-Light.woff2') format("woff2");
}

@font-face {
    font-family: TypeNextProRegular;
    font-display: swap;
    src: url('/fonts/TypeNext/BMWTypeNext-Regular.woff2') format("woff2");
}

@font-face {
    font-family: TypeNextProBold;
    font-display: swap;
    src: url('/fonts/TypeNext/BMWTypeNext-Bold.woff2') format("woff2");
}
/* General font class */
.--font_typeNext_Bold {
    font-family: TypeNextCondensedProBold;
}

.--font_typeNext_Light {
    font-family: TypeNextCondensedProLight;
}

.--font_typeNextPro_Regular {
    font-family: TypeNextProRegular;
}

.--font_typeNextPro_Bold {
    font-family: TypeNextProBold;
}

.--text-color_grey {
    color: rgba(0, 0, 0, 0.45) !important;
}
/* Style remover */
.unstyle {
    all: unset;
}

main {
    overflow: hidden;
}
/* Background colors setting */
.--cream_color {
    background-color: #E7E7E7;
}
/* Navigation menu config */
nav {
    position: fixed;
    top: 0;
    z-index: 50;
    width: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.44) 52.81%, rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0.26) 100%);
}

.navigation-container {
    padding: 0 2.5rem;
}

.navigation-elements-wrapper {
    display: flex;
    justify-content: space-between;
    justify-items: center;
    border-bottom: 1px solid #fff;
    height: 84px;
}

    .navigation-elements-wrapper ul {
        list-style: none;
        display: flex;
        align-items: center;
        padding: 0;
        margin: 0;
    }

        .navigation-elements-wrapper ul > li {
            padding: var(--li_element_padding_top) 1.5rem;
            height: 100%;
            width: 170px;
            display: flex;
            align-items: center;
            word-wrap: break-word;
        }

#rightSideList > li {
    width: 240px;
}

.navigation-elements-wrapper ul > li:hover {
    border-bottom: solid 4.5px #1C69D4;
    transition: all 100ms;
}

    .navigation-elements-wrapper ul > li:hover > a {
        color: #ffff;
    }

.logo-list-item-header:hover {
    border-bottom: none !important;
}

    .logo-list-item-header:hover a img {
        transform: scale(1.125);
        transition: all 300ms;
    }

.navigation-elements-wrapper ul > li > a {
    width: 100%;
    text-decoration: none;
    color: #fff;
}

.navigation-elements-wrapper ul .logo-list-item-header img {
    margin: 1rem;
    width: 6vh;
    height: 6vh;
}

.sublist-menu {
    position: absolute;
    z-index: 10;
    top: 100%;
    padding: 1.5rem;
    background-color: #fff;
    display: none;
}

.navigation-elements-wrapper ul > li:hover > .sublist-menu {
    display: block;
}

    .navigation-elements-wrapper ul > li:hover > .sublist-menu > a {
        font-size: 15px;
        color: #000;
        text-decoration: none;
    }

    .navigation-elements-wrapper ul > li:hover > .sublist-menu:hover {
        transition: all 150ms;
        border-bottom: 5px solid #1C69D4;
    }

.icon-header-item a {
    text-align: center;
}

.logo-list-item-header a {
    text-align: center;
}

/* Mobile Button */
.hamburguer-menu {
    padding: 0rem 1rem !important;
}

.hamburger-menu-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid #FFFFFF;
    padding: 0.5rem 0rem;
}


#logo_mobile_btn {
    background: transparent !important;
    border: none;
    width: 3rem;
}

    #logo_mobile_btn img {
        width: 48px;
        height: auto;
    }

.second-row-mobile-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.icon-mobile-btns {
    background: transparent;
    border: none;
    width: fit-content;
    height: fit-content;
}

#icon-menu-popup,
#icon-menu-popup-close {
    color: #FFFFFF;
}

.letther {
    font-size: 1.25rem;
}

.letter_pf {
    font-size: 1rem;
}

.header-banner_content-wrapper_single {
    width: 100%;
    padding: 1rem;
}

    .header-banner_content-wrapper_single h3,
    .header-banner_content-wrapper_single h5 {
        letter-spacing: 0.1em;
        margin-left: 2rem;
    }


@media (min-width:1526px) {
    .navigation-container {
        padding: 0 4.5rem;
    }

    .header-banner_content {
        padding: 2.5rem 4.5rem !important;
    }

    .navigation-elements-wrapper ul > li > a {
        font-size: 18px;
    }

    .navigation-elements-wrapper ul > li {
        width: 160px;
    }

    #rightSideList > li {
        width: 226px;
    }

    .logo-list-item-header {
        width: fit-content !important;
    }

    .icon-header-item {
        width: fit-content !important;
    }

    .header-banner_content-wrapper_single h3,
    .header-banner_content-wrapper_single h5 {
        margin-left: 4rem !important;
    }
}



@media (max-width:1525px) {
    .navigation-elements-wrapper ul > li > a {
        font-size: 15px;
    }

    .navigation-elements-wrapper ul > li {
        width: 160px;
    }

    #rightSideList > li {
        width: 226px;
    }
}

@media (max-width:1450px) {
    .navigation-elements-wrapper ul > li > a {
        font-size: 16px;
    }

    .navigation-elements-wrapper ul > li {
        padding: var(--li_element_padding_top) 1rem;
        width: 141px;
    }

    #rightSideList > li {
        width: 3rem;
    }
}

@media (max-width:1200px) {
    .navigation-elements-wrapper ul > li > a {
        font-size: 11px;
    }

    .navigation-elements-wrapper ul > li {
        width: 114px;
    }

    #rightSideList > li {
        width: 114px;
    }
}

@media (min-width: 1920px) {

    /* CSS */
    .header-banner_content {
        padding: 2.5rem 4.5rem !important;
    }
}

@media (min-width: 1281px) and (max-width: 1919px) {

    /* CSS */
    #rightSideList > li {
        width: 70px;
    }
}

@media (min-width: 1025px) and (max-width: 1280px) {

    /* CSS */
    #rightSideList > li {
        width: 44px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {

    /* CSS */
    #rightSideList > li {
        width: 44px;
    }
}


/* Hamburguer menu design and logic */

@media (max-width:992px) {
    .is-cta-active {
        display: none !important;
    }

    .is-nav-active {
        background-color: #fff !important;
    }

    .navigation-container {
        display: none;
    }

    .hamburguer-menu-content {
        display: none;
    }

    .is-active-content {
        display: block !important;
    }

    .is-hambox-active {
        filter: invert(0) !important;
    }

    .is-active-content > ul {
        margin-top: 0.5rem;
        height: 100vh;
        list-style: none;
        padding: 0;
        text-align: center;
    }

        .is-active-content > ul > li {
            padding: 1.5rem 0;
            border-bottom: 1px solid #00000026;
        }

            .is-active-content > ul > li > a {
                color: #1C69D4;
                text-decoration: none;
                font-size: 20px;
            }

    .is-footer-active {
        display: none !important;
    }
}

@media (min-width:993px) {
    .hamburguer-menu {
        display: none;
    }
}

/* Banner config */
.header-banner_img {
    overflow: hidden;
}

    .header-banner_img img {
        object-fit: cover;
        width: 100%;
        height: 630px;
    }

@media (max-width:768px) {
    .header-banner_img img {
        height: 50vh;
    }
}

@media (max-width:576px) {
    .header-banner_img img {
        height: 55vh;
    }
}

.header-banner_content {
    background-color: rgba(0, 0, 0, 0.3);
    color: #fff;
    position: absolute;
    z-index: 5;
    top: 0;
    width: 100%;
    height: 636px;
    display: flex;
    justify-content: left;
    align-items: center;
    word-wrap: break-word;
    padding: 2.5rem;
}

.header-banner_content_single {
    color: #fff;
    position: absolute;
    z-index: 5;
    top: 0;
    width: 100%;
    height: 630px;
    display: flex;
    justify-content: center;
    align-items: center;
    word-wrap: break-word;
    background-color: rgba(0, 0, 0, 0.3);
}

.header-banner_content-wrapper h3 {
    font-size: 1.5rem;
}

@media(max-width:768px) {
    .header-banner_content-wrapper h2 {
        font-size: 22px;
    }

    .header-banner_content-wrapper h3 {
        font-size: 16px;
    }

    .banner-btn {
        font-size: 14px;
    }
}

@media(max-width:376px) {
    .header-banner_content-wrapper h2 {
        font-size: 18px;
    }

    .header-banner_content-wrapper h3 {
        font-size: 12px;
    }

    .banner-btn {
        font-size: 10px;
    }
}

@media(max-width:281px) {
    .header-banner_content-wrapper h2 {
        font-size: 16px;
    }

    .header-banner_content-wrapper h3 {
        font-size: 10px;
    }

    .banner-btn {
        font-size: 8px;
    }
}

@media (max-width:768px) {
    .header-banner_content {
        height: 50vh;
    }

    .header-banner_content_single {
        height: 50vh;
        align-items: flex-end;
    }

    .header-banner_content-wrapper_single h3, h5 {
        margin-left: 2.5rem;
    }
}

@media (max-width:576px) {
    .header-banner_content {
        height: 55vh;
    }

    .header-banner_content_single {
        height: 54vh;
    }

    .header-banner_content-wrapper_single h3,
    .header-banner_content-wrapper_single h5 {
        margin-left: 0.5rem;
    }
}

.banner-btn {
    background-color: #1C69D4;
    border: none;
    text-decoration: none;
    padding: 1.2rem;
    color: #fff;
    line-height: 1;
    font-family: 'TypeNextProRegular';
    display: flex;
    border-radius: 4px;
    width: fit-content;
}

.offer-image-wrapper {
    padding: 0;
    overflow: hidden;
}

    .offer-image-wrapper img {
        object-fit: cover;
        width: 100%;
    }

.offer-text-container {
    padding: 0;
}

.offer-text-wrapper {
    padding: 1.5rem;
}
/*Footer block config*/
footer {
    overflow: hidden;
}

.media-sitemap-container {
    background-color: #E6E6E6;
}

.social-media-block {
    border-bottom: 2px solid #000;
}

    .social-media-block h3 {
        text-align: right;
    }

.social-media-icon-wrapper {
    display: flex;
    justify-content: flex-end;
}

@media (max-width:767px) {
    .social-media-block h3 {
        text-align: center;
    }

    .social-media-icon-wrapper {
        justify-content: center;
    }
}

.social-media-icon-wrapper a > img {
    padding-bottom: 1rem;
    width: 100%;
    aspect-ratio: 3/2;
    object-fit: contain;
    mix-blend-mode: color-burn;
}

.social-media-icon-wrapper a:hover img {
    transition: all 500ms;
    transform: scale(1.5);
}

.footer-sitemap-elements p {
    margin: 1.5rem 0 0 0;
}

    .footer-sitemap-elements p > a {
        color: #000;
        text-decoration: none;
    }

.legal-disclosure {
    padding: 2.5rem 0;
    gap: 150px;
}

.legal-disclosure-links {
    gap: 75px;
}

    .legal-disclosure-links a {
        text-decoration: none;
    }

@media (max-width:1200px) {
    .legal-disclosure {
        gap: 80px;
    }

    .legal-disclosure-links {
        gap: 40px;
    }
}

@media (max-width:992px) {
    .legal-disclosure {
        gap: 20px;
    }

    .legal-disclosure-links {
        gap: 10px;
    }
}

@media (max-width:768px) {
    .legal-disclosure {
        text-align: center;
        flex-direction: column;
    }

    .legal-disclosure-links {
        justify-content: center;
        width: 100%;
        gap: 20px;
    }
}
/* CTA Buttons */
.cta-wrapper {
    /* border: 2.5px solid #000; */
    text-align: center;
    width: 56%;
    height: 42%;
    /* background-color: #E6E6E6; */
}

    .cta-wrapper a {
        padding: 1.5rem 0.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        color: #000;
        text-decoration: none;
        border: 1.5px solid #000;
        border-radius: 4px;
    }

@media (max-width:992px) {
    .cta-wrapper a {
        flex-direction: column;
    }
}

/* .cta-wrapper:hover {
    transition: all 250ms;
    border: 2.5px solid #1C69D4;
    cursor: pointer;
} */

.cta-wrapper:hover a {
    color: #000;
    transition: all 250ms;
    border: 2.5px solid #000;
    cursor: pointer;
}

    .cta-wrapper:hover a img {
        filter: invert(100);
    }

.cta-wrapper img {
    width: 9.5vh;
    height: 9.3vh;
    margin-bottom: 2rem;
}

@media (max-width:576px) {
    footer {
        position: relative;
        margin-bottom: 5rem;
    }
    /* 
    #fixedCTAMobileButtons {
        z-index: 15;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        background-color: #E7E7E7;
        border-top: 2px solid #000;
    } */

    /* .cta-wrapper {
        border: none;
        text-align: center;
        background-color: #E7E7E7;
    } */

    .cta-wrapper > a {
        min-height: 49px;
        padding: 0rem;
        font-size: 14px;
    }

        .cta-wrapper > a > h4 {
            font-size: 14px;
        }

    /* .cta-wrapper:hover {
            transition: all 250ms;
            transform: scale(1.125);
            background-color: #E7E7E7;
            border: none;
            cursor: pointer;
            color: #000;
        } */

    .cta-wrapper:hover a {
        color: #000;
    }

    #leftCTA {
        border-right: 2px solid #000;
    }
}


/*Styles from loading*/
#loader-wrapper {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 15000;
    overflow: hidden;
    background-color: #ffffff;
    height: 100%;
    display: none;
}

    #loader-wrapper.show {
        display: block;
    }

.loader-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.so-desc ol li {
    list-style: initial !important;
}


@media (min-width: 1025px) and (max-width: 1280px) {

    /* CSS */
    .logo-navbar-left {
        width: 8vh !important;
        height: 8vh !important;
    }
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {

    /* CSS */
    #logo-mobile {
        position: absolute;
        right: 0;
        padding: 0.5rem;
        height: 100%;
    }

        #logo-mobile img {
            height: 100%;
        }

    .is-nav-active #logo-mobile {
        display: none;
    }

    .post-mobile-column {
        flex-direction: column-reverse;
    }

    .post-mobile-column-reverse {
        flex-direction: column;
    }
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {

    /* CSS */
    #logo-mobile {
        position: absolute;
        right: 0;
        padding: 0.5rem;
        height: 100%;
    }

        #logo-mobile img {
            height: 100%;
        }

    .is-nav-active #logo-mobile {
        display: none;
    }

    .post-mobile-column {
        flex-direction: column-reverse;
    }

    .post-mobile-column-reverse {
        flex-direction: column;
    }
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {

    /* CSS */
    #logo-mobile {
        position: absolute;
        right: 0;
        padding: 0.5rem;
        height: 100%;
    }

        #logo-mobile img {
            height: 100%;
        }

    .is-nav-active #logo-mobile {
        display: none;
    }

    .post-mobile-column {
        flex-direction: column-reverse;
    }

    .post-mobile-column-reverse {
        flex-direction: column;
    }

    .btn-section1 {
        margin-bottom: 3rem;
    }
}

.banner-btn:hover {
    background: #0653B6;
    transition: all 0.2s ease;
    color: white;
}

.customParagraph {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.no-scroll {
    max-height: 100vh;
    overflow: hidden;
}

.container-footer-title-one,
.container-footer-title-two,
.container-footer-title-three {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}


.arrow-footer {
    display: none;
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {

    /* CSS */
    .arrow-footer {
        display: inline-block;
    }

    .container-footer-category-one,
    .container-footer-category-two,
    .container-footer-category-three {
        display: none;
    }
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {

    /* CSS */
    .arrow-footer {
        display: inline-block;
    }

    .container-footer-category-one,
    .container-footer-category-two,
    .container-footer-category-three {
        display: none;
    }
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {

    /* CSS */
    .arrow-footer {
        display: inline-block;
    }

    .container-footer-category-one,
    .container-footer-category-two,
    .container-footer-category-three {
        display: none;
    }
}
