:root {
    --heading-padding: 2.5rem 1.5rem 2.5rem 3.5rem;
    --sidebar-padding: 2.5rem 1.5rem;
    --sidebar-item-padding: .25em;
    --products-section-top-margin: 1.5rem;
    --phone-text-width: calc(240px * var(--body-font-size-mult));
    --phone-horizontal-width-value: 274;
    --phone-horizontal-width: 274px;
    --phone-vertical-width: 142px;
    --phone-carousel-text: .75em;
    --content-heading-text: 1.93em;
    --content-header-text: 2em;
    --header-text-width: 80%;
    --content-main-text: 1em;
    --quote-size: 2.5em;
    --main-quote-img-size: 60px;
    --quote-text: .875em;
    --small-text: .8em;
    --nav-menu-text: .875em;
    --rights-reserved-text: .8em;

    /* BS color overwrites */
    --bs-body-color: #000;
    --bs-link-color-rgb: 0, 130, 255; /* same as --lm-blue but in r,g,b format */
}

body {
    overflow-x: hidden;
}

.full-screen {
    min-height: calc(100vh);
    min-height: calc(100dvh);
}
.w-90 {
    width: 90%;
}

.lh-md {
    line-height: 1.33;
}

.max-width-450 {
    max-width: calc(450px * var(--body-font-size-mult));
}

.bg-cover-center, .bg-contain-center {
    background-position: center;
    background-repeat: no-repeat;
}
.bg-cover-center {
    background-size: cover;
}
.bg-contain-center {
    background-size: contain;
}

#phone-rotate-warning {
    display: none;
}

/******** HEADER ********/

.sidebar-padding {
    padding: var(--sidebar-padding);
}
.sidebar-text > a {
    padding: var(--sidebar-item-padding);
    margin: 0 calc(-1 * var(--sidebar-item-padding));
}
.sidebar-width {
    width: 100%;
    max-width: 170px;
}

/******** MAIN PAGE CAROUSEL *********/

.phone-wrapper {
    width: calc(var(--phone-text-width) + var(--phone-horizontal-width));
    height: calc(var(--phone-horizontal-width) / 2);
}
.phone-wrapper .phone-image-wrapper {
    position: relative;
    cursor: pointer;
    transition: transform .3s ease;
}
.phone-wrapper li img {
    filter: drop-shadow(5px 10px 10px rgba(0, 0, 0, .4));
}
.phone-wrapper li:is(:nth-child(1), :nth-child(2)) img {
    width: var(--phone-horizontal-width);
}
.phone-wrapper li:is(:nth-child(3), :nth-child(4)) img {
    width: var(--phone-vertical-width);
}

.phone-wrapper .carousel-text {
    height: calc(1.5 * 3 * var(--phone-carousel-text)); /* 3 rows of text */
    font-size: var(--phone-carousel-text);
    min-width: var(--phone-text-width);
}
.phone-wrapper .carousel-zoom-text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: calc(var(--phone-horizontal-width) * .85);
    font-size: .4em;
    margin-top: .5em;
    text-align: center;
}
.phone-wrapper li:is(:nth-child(3), :nth-child(4)) .carousel-zoom-text {
    width: calc(var(--phone-vertical-width) * .96);
}
.phone-wrapper .carousel-zoom-text br {
    display: none;
}
.phone-wrapper .carousel-text, .btn-phone-prev, .btn-phone-next {
    margin-bottom: 3.2rem; /* make it depend from --phone-vertical-width */
}
.phone-wrapper :is(.carousel-text, .carousel-zoom-text) {
    transition: opacity .1s ease;
}
.phone-wrapper :is(.carousel-text, .carousel-zoom-text).vis {
    transition-delay: .1s;
    transition-duration: .2s;
}
.phone-wrapper :is(.carousel-text, .carousel-zoom-text).vis { opacity: 1; }
.phone-wrapper :is(.carousel-text, .carousel-zoom-text).hid { opacity: 0; }

.btn-phone-prev { background-image: url(/images/global/vector-left.png); }
.btn-phone-next { background-image: url(/images/global/vector-right.png); }

.btn-phone-prev,
.btn-phone-next {
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-color: #9D9D9D1A;
    border: none;
    border-radius: 10px;
    background-position-x: center;
    background-position-y: center;
    transition: transform .2s ease, background-color .2s ease;
    transform-origin: center;
}

.btn-phone-next:hover,
.btn-phone-prev:hover {
    transform: scale(1.2);
    background-color: #9D9D9D26;
}

#bg-carousel {
    background-color: #606060;
}
#bg-carousel .carousel-item {
    transition-duration: 1s;
}
#bg-carousel .carousel-item > div::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.25);
    opacity: 0;
    transition: opacity .2s ease-in-out;
}
#bg-carousel .carousel-item > div.shaded::before {
    opacity: 1;
}

.carousel-fade-out-then-in :is(.carousel-item.active, .carousel-item-next, .carousel-item-prev) {
    transition-duration: .25s;
    transition-timing-function: linear;
}
.carousel-fade-out-then-in :is(.carousel-item-next, .carousel-item-prev) {
    transition-delay: .75s;
}

.products-section {
    margin-top: var(--products-section-top-margin);
}

/******** MAIN PAGE CONTENT ********/

.header-text {
    width: var(--header-text-width);
}
.vertical-text-wrapper {
    background-image: url('/images/global/paragraph-bg.webp');
    background-size: cover;
    background-repeat: no-repeat;
}
.vertical-text {
    transform: rotate(-90deg);
    transform-origin: left;
    width: 0;
    padding-right: 1.5em;
}
.content-header-text {
    font-size: var(--content-header-text);
}
.content-heading-text {
    font-size: var(--content-heading-text);
    line-height: 1.33;
}
.content-main-text {
    font-size: var(--content-main-text);
}

/******** MAIN PAGE QUOTE ********/

.main-page {
    margin-top: 5rem !important;
}

.main-quote-wrapper {
    padding: 4rem 3.5rem 6rem 3.5rem;
}
.main-quote .author-img {
    width: var(--main-quote-img-size);
    height: var(--main-quote-img-size);
    filter: grayscale(1);
}
.main-quote .quote {
    background-color: #ACACAC;
    margin: 0;
}
.main-quote .quote.quote-left {
    mask: url('/images/quote_left.svg') no-repeat center/cover;
}
.main-quote .quote.quote-right {
    mask: url('/images/quote_right.svg') no-repeat center/cover;
}
.quote-text {
    font-size: var(--quote-text);
}
.small-text {
    font-size: var(--small-text);
}

/******** FOOTER *******/

.nav-menu-text {
    margin-left: var(--nav-menu-left-margin);
}
.rights-reserved-text {
    font-size: var(--rights-reserved-text);
}

/******** MEDIA ********/

@media only screen and (max-height: 625px) {
    :root {
        --body-font-size-mult: 1;
    }
}

@media only screen and (min-width: 992px) {
    .col-lg-7-and-half {
        max-width: 1500px;
        flex-shrink: 0;
    }
}

@media only screen and (max-width: 991.98px) and (orientation: landscape) {
    #phone-rotate-warning {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
        inset: 0;
        background-color: #111;
        color: white;
        text-align: center;
        z-index: 99999;
    }
}

@media only screen and (max-width: 991.98px) {
    /* For mobile phones:
        reference page width from design - 375px
        coefs are calculated as ref-width / desired-px: 375px / 24px = 15.63, 16px -> 23.5, 4px -> 93.75, etc.
    */
    :root {
        --footer-height: calc(100vw / 2.69);
        --header-height: calc(100vw / 4.69);
        --heading-padding: calc(100vw / 15.63);
        /* font size */
        --heading-text: calc(100vw / 9.37);
        --sidebar-text: calc(100vw / 18);
        --sidebar-item-padding: calc(100vw / 93.75) calc(100vw / 15.63);
        --products-section-top-margin: calc(100vw / 15.63);
        --sidebar-last-item-indent: calc(100vw / 23.5);
        --nav-menu-text: calc(100vw / 23.5);
        --nav-menu-left-margin: calc(100vw / 15);
        --lm-burger-icon: calc(100vw / 10);
        --main-text: calc(100vw / 19.69);
        --phone-text-width: calc(170px * var(--body-font-size-mult));
        --phone-horizontal-width-scaling: calc(var(--phone-horizontal-width-value) * 100vw / 375);
        --phone-carousel-text: calc(100vw / 27);
        --content-header-text: calc(100vw / 9.46);
        --content-heading-text: calc(100vw / 15.63);
        --header-text-width: 100%;
        --content-main-text: calc(100vw / 23.5);
        --quote-size: calc(100vw / 9.34);
        --quote-text: calc(100vw / 21);
        --main-quote-img-size: calc(100vw / 6.25);
        --small-text: calc(100vw / 23.5);
        --rights-reserved-text: calc(100vw / 27.02);
        --main-page-top-margin: calc(100vw / 6.94);
        --main-quote-margin: calc(100vw / 3.35) calc(100vw / 15.63) calc(100vw / 4.69) calc(100vw / 15.63);
    }

    .border-header-middle {
        border: none;
    }
    .sidebar-text {
        margin: 0;
    }
    .sidebar-text:last-child {
        margin-bottom: var(--sidebar-last-item-indent);
    }

    .bg-mobile-header {
        background-color: black;
        background-image: none;
    }
    .bg-mobile-menu {
        background-color: black;
    }
    button[data-bs-target="#sidebar-collapse"] {
        border: none;
    }

    .phone-wrapper {
        width: 100%;
        min-width: calc(var(--phone-text-width) + var(--phone-vertical-width));
        height: var(--phone-horizontal-width-scaling);
    }
    .phone-wrapper li:is(:nth-child(1), :nth-child(2)) img {
        width: 80%;
        min-width: var(--phone-horizontal-width);
    }
    .phone-wrapper li:is(:nth-child(3), :nth-child(4)) img {
        width: auto;
        height: var(--phone-horizontal-width-scaling);
    }
    .phone-wrapper li:is(:nth-child(1), :nth-child(2)) {
        flex-wrap: wrap-reverse;
    }
    .phone-wrapper li:is(:nth-child(1), :nth-child(2)) .carousel-text {
        text-align: center !important;
        padding-top: .5em;
        padding-right: 0;
    }
    .phone-wrapper li:is(:nth-child(3), :nth-child(4)) br {
        display: none;
    }
    .phone-wrapper .carousel-text {
        margin-bottom: 0;
        padding-right: .5em;
    }

    .content-heading-text {
        font-weight: 600;
    }

    .main-page {
        margin-top: var(--main-page-top-margin) !important;
    }
    .main-quote-wrapper {
        padding: var(--main-quote-margin);
    }
    .main-quote .quote {
        top: -33% !important;
    }
    .quote-text {
        line-height: 1.77;
    }

    .footer-area .border-footer-middle {
        border-image: none;
        border-bottom: var(--border-width) solid white;
    }
    .footer-height .nav-link {
        padding: 0;
    }
    .border-footer-left {
        border-right: var(--border-width) solid white !important;
    }
}

@media only screen and (min-width: 1800px) {
    :root {
        --body-font-size-mult: 1.4;
        --phone-horizontal-width-value: 400;
        --phone-horizontal-width: 400px;
        --phone-vertical-width: 207px;
        --main-quote-img-size: 80px;
    }

    .phone-wrapper .carousel-text, .btn-phone-prev, .btn-phone-next {
        margin-bottom: 5rem; /* make it depend from --phone-vertical-width */
    }
    .phone-wrapper .carousel-zoom-text {
        font-size: .5em;
    }
}