@import "zerif.css";
@import "menu.css";
@import "vars.css";
@import "fonts.css";
@import "lenis.css";

:root {
    --white-1: rgba(255, 255, 255, 1);
    --white-2: rgba(255, 255, 255, 0.05);
    --white-3: rgba(245, 245, 245, 1);
    --grey-1: #939393;
    --grey-2: #ccc;
    --grey-3: #7E7E7E;
    --grey-4: #808080;
    --green-1: rgba(75, 147, 21, 1);
    --green-2: rgba(52, 210, 147, 1);
    --green-3: rgba(52, 210, 147, 0.8);
    --green-4: rgba(20, 161, 104, 1);
    --green-5: rgba(0, 115, 69, 1);
    --salmon-1: rgba(252, 96, 65, 1);
    --salmon-2: rgba(216, 71, 42, 1);
    --red-1: rgba(233, 102, 86, 1);
    --red-2: rgba(219, 90, 74, 1);
    --red-3: rgba(191, 57, 40, 1);
    --yellow-1: rgba(247, 203, 0, 1);
    --yellow-2: rgba(247, 203, 0, 0.9);
    --yellow-3: rgba(167, 137, 0, 1);
    --blue-1: rgba(58, 176, 226, 1);
    --blue-2: rgba(209, 237, 251, 1);
    --blue-3: rgba(59, 92, 108, 1);
    --black-1: #000;
    --black-2: #404040;
    --black-3: #302404;
    --brown-1: #412a22
}



:root:has(.sticky-top) [*] {
    scroll-margin-top: unset
}

:root:has(.sticky-top) [#focus

]
{
    scroll-margin-top: 10rem
}
html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    --scroll-behavior: smooth !important;
    scroll-behavior: smooth !important;
    -webkit-scroll-behavior: smooth !important
}

body {
    color: gray;
    font-family: "Roboto", Helvetica, sans-serif !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 25px;
    text-align: center;
    scroll-behavior: smooth !important;
    position: relative;

    .header.container-header.full-width.position-sticky.sticky-top {
        position: fixed !important;
        width: 100vw
    }
}

#preloader {
    position: absolute;
    content: '';
    inset: 0;
    width: 100vw;
    height: 100vh;
    display: grid;
    place-content: center;
    background: var(--white-1);
    z-index: 99999999999999999999999999999;

    .status {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200px;
        height: 200px;
        margin: -100px 0 0 -100px;
        background-image: url(/images/elements/loading.gif);
        background-repeat: no-repeat;
        background-position: center;
        animation: spinnerFade 1.5s forwards
    }
}

#ascrail2000-hr {
    display: none !important
}

.loaderFade {
    animation: loaderFade 0.5s linear forwards
}

@keyframes loaderFade {
    from {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

@keyframes spinnerFade {
    0% {
        opacity: 0
    }
    10% {
        opacity: 1
    }
    80% {
        opacity: 1
    }
    90% {
        opacity: 0
    }
    100% {
        opacity: 0
    }
}

.section-header {
    padding-bottom: 75px
}

.white-text {
    color: var(--white-1) !important
}

.blue-text {
    color: var(--blue-4)
}

.greyText {
    color: var(--grey-3) !important
}

blockquote {
    margin: 0 1.5em
}

blockquote {
    margin: 24px 40px;
    font-size: 18px;
    font-weight: 300;
    font-style: italic;
    line-height: 26px
}

address {
    margin: 0 0 1.5em
}

pre {
    overflow: auto;
    max-width: 100%;
    margin-bottom: 1.6em;
    padding: 1.6em;
    background: #eee;
    font-family: "Courier 10 Pitch", Courier, monospace;
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 1.6
}

code, kbd, tt, var {
    font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace
}

.container {
    max-width: 1170px
}

.red-btn, .green-btn, .blue-btn, .yellow-btn {
    color: #fff !important;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out
}

.red-btn {
    background: var(--salmon-1) none repeat scroll 0% 0%;

    &:hover, &:active {
        background: var(--salmon-2)
    }
}

.yellow-btn {
    background: var(--yellow-1) none repeat scroll 0% 0%;

    &:hover, &:active {
        background: var(--yellow-3)
    }
}

.paypal-btn {
    background: var(--green-1) none repeat scroll 0% 0%;

    &:hover, &:active {
        background: var(--green-6)
    }
}

body.custom-background {
    background-color: #085400 !important;
    background-image: url(/images/hero/homeHero.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;

    .site-grid {
        background-color: #fff0;
        padding-bottom: 0 !important
    }
}

body:has(.hero) {
    .site-grid {
        padding-top: 0
    }
}

.custom-button {
    display: inline-block !important;
    margin: 10px;
    padding: 13px 35px 13px 35px;
    border: none;
    border-radius: 4px;
    text-align: center;
    text-transform: uppercase;
    font-size: 14px
}

.fullWidth {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-top: 0;
    margin-bottom: 0;
    max-width: 100vw;
    width: 100vw
}

.hero {
    height: 62vh;
    margin-top: 76px;
    overflow: hidden;

    #heroGrid {
        display: grid;
        grid-template-columns:1rem 1fr 1rem;
        grid-template-rows:20% 60% 20%;
        position: relative;
        z-index: 0;

        #heroImg {
            grid-area: 1 / 1 / 4 / 4;
            position: relative;
            z-index: 1;
            height: 65vh;

            li {
                height: calc(100% + 3rem);
                margin-top: -10px
            }

            &:after {
                position: absolute;
                content: "";
                inset: 0;
                z-index: 2;
                background: rgb(0 0 0 / .5);
                -webkit-box-shadow: 0 5px 11px 0 rgb(50 50 50 / .08);
                box-shadow: 0 5px 11px 0 rgb(50 50 50 / .08)
            }

            img {
                display: block;
                height: 65vh;
                object-fit: cover;
                width: 100%;

                & title {
                    display: none
                }
            }
        }

        #heroContent {
            grid-area: 2 / 2 / 3 / 3;
            position: relative;
            z-index: 3;
            display: grid;
            place-content: center
        }
    }
}

.card, .card-body {
    font-family: inherit;
    color: inherit;
    padding: 0;
    margin: 0;
    border-radius: 0;
    border: none;
    border-color: #fff0;
    width: 100%;
    max-width: 100%
}

.shapesBg1 {
    background: url(/images/elements/geometry2.png)
}

.modulesWrap:has(.fullWidth) {
    display: block;
    margin: 0
}

.container-top-b > .modulesWrap > .moduletable {
    padding-block: 100px
}

.container-top-b {
    .rowFlex {
        & > span {
            max-width: 260px
        }
    }
}

.modulesWrap:has(.pt0) .pt0 {
    padding-top: 0
}

.modulesWrap:has(.pb0) .pb0 {
    padding-bottom: 0
}

.rowFlex {
    display: flex;
    gap: 2rem;
    justify-content: center;
    width: 100%
}

.moduletable:has(.aboutUs) {
    color: var(--white-1);
    background: var(--blue-2) none repeat scroll 0% 0%
}

.noContent {
    .container-component {
        display: none
    }
}

.footer {
    color: #fff;
    background: var(--blue-3) none repeat scroll 0% 0%;
    margin-top: 0;

    .grid-child {
        justify-content: space-between;
        align-items: center;
        padding: 0 .5em
    }
}

.site-grid {
    background: var(--white-3);
    padding-top: 180px;
    padding-bottom: 30px
}

main {
    border: 1px solid #dbdbdb;
    padding: 15px;
    border-radius: 3px;
    background: var(--white-1)
}

.aboutUs .zerif-rtl-big-title {
    margin-top: -15px;
    font-size: 60px;
    font-weight: 100;
    line-height: normal;
    text-align: right;
    color: var(--blue-4)
}

.footer-widget {
    width: 100%;

    ul {
        list-style: none;
        display: flex;
        justify-content: center;
        flex-flow: row wrap;
        gap: 2rem;
        margin-block: 4rem;

        li {
            a {
                font-size: 1.5rem;
                width: fit-content;
                display: block;
                text-underline-offset: 7px;
                text-decoration-thickness: 1px
            }
        }
    }
}

.searchModule.promiseSearch {
    .mod-finder__search {
        display: flex;
        justify-content: center;
        align-items: center;

        .js-finder-search-query {
            height: 49px;
            margin: 0;
            padding-inline: 1rem
        }

        .btn.btn-primary {
            height: 49px;
            background-color: var(--red-1);
            border-color: var(--red-1);

            &:hover, &:active {
                background-color: var(--red-2);
                border-color: var(--red-2)
            }
        }
    }
}

.container.aboutUs {
    padding-bottom: 4rem
}

#userForm {
    font-family: 'Roboto', sans-serif;
    color: #333;
    font-size: 1rem;

    .uk-grid {
        align-items: flex-end
    }

    .uk-form-label, .rsform-type-freetext {
        text-align: left !important;
        margin-bottom: 10px
    }

    .rsform-type-textbox {
        margin-top: 0px !important
    }

    input, textarea {
        color: gray;
        padding-inline: 1rem
    }

    input[type="radio"], input[type="checkbox"] {
        padding: 0
    }

    .rsform-type-radiogroup {
        min-height: 75px;

        label {
            margin-right: 10px;

            input {
                margin-right: 5px
            }
        }

        .rsfp-fieldset {
            text-align: left
        }
    }

    .rsform-type-calendar {
        text-align: left
    }

    .rsform-type-checkboxgroup {
        text-align: left
    }

    .uk-button {
        font-family: 'Roboto', sans-serif
    }

    .uk-button-primary {
        background: var(--blue-4);

        &:hover, &:active {
            background: var(--green-1)
        }
    }
}

.rowFlex:has(.feedback-box) {
    flex-flow: row nowrap;
    padding-inline: 2rem;
    column-gap: 0rem;

    .zerif_grid_col_3 {
        background: var(--white);
        padding: 25px;
        border-radius: 4px
    }

    .feedback-box {
        background: var(--white) !important;

        .client-name {
            color: #404040;

        }
    }
}

#callnowbutton.cnb-single {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    box-shadow: 0 3px 6px rgb(0 0 0 / .3);
    background-position: center;
    background-size: 35px 35px;
    background-repeat: no-repeat;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTI3LjAxMzU1LDIzLjQ4ODU5bC0xLjc1MywxLjc1MzA1YTUuMDAxLDUuMDAxLDAsMCwxLTUuMTk5MjgsMS4xODI0M2MtMS45NzE5My0uNjkzNzItNC44NzMzNS0yLjM2NDM4LTguNDM4NDgtNS45Mjk1UzYuMzg3LDE0LjAyOCw1LjY5MzMsMTIuMDU2MTVBNS4wMDA3OCw1LjAwMDc4LDAsMCwxLDYuODc1NzMsNi44NTY4N0w4LjYyODc4LDUuMTAzNzZhMSwxLDAsMCwxLDEuNDE0MzEuMDAwMTJsMi44MjgsMi44Mjg4QTEsMSwwLDAsMSwxMi44NzEsOS4zNDY4TDExLjA2NDcsMTEuMTUzYTEuMDAzOCwxLjAwMzgsMCwwLDAtLjA4MjEsMS4zMjE3MSw0MC43NDI3OCw0MC43NDI3OCwwLDAsMCw0LjA3NjI0LDQuNTgzNzQsNDAuNzQxNDMsNDAuNzQxNDMsMCwwLDAsNC41ODM3NCw0LjA3NjIzLDEuMDAzNzksMS4wMDM3OSwwLDAsMCwxLjMyMTcxLS4wODIwOWwxLjgwNjIyLTEuODA2MjdhMSwxLDAsMCwxLDEuNDE0MTItLjAwMDEybDIuODI4OCwyLjgyOEExLjAwMDA3LDEuMDAwMDcsMCwwLDEsMjcuMDEzNTUsMjMuNDg4NTlaIiBmaWxsPSIjZmZmZmZmIi8+PC9zdmc+);
    background-color: #090;

    span {
        visibility: hidden
    }
}

#callnowbutton {
    display: none
}

.sidebar-right {
    &.card {
        background: #fff0
    }

    .mod-finder {
        position: relative;
        text-align: left;

        label {
            visibility: hidden;
            width: 0;
            height: 0;
            position: absolute
        }

        .mod-finder__search {
            background: #fff;
            border: 1px solid rgb(0 0 0 / .1);
            border-radius: 0;
            color: #555;
            transition: all 0.2s;

            &:has(input:focus) {
                border: 1px solid rgb(0 0 0 / .3);

                input {
                    color: #555
                }
            }

            button {
                font-size: 0;
                height: 47px;
                width: 47px;
                background: #fff0;
                background: url(/images/search_icon.png) no-repeat center center;
                border: none;
                margin: 0
            }

            input {
                border: none !important;
                padding: 12px 0% 12px 6%;
                color: #555;
                font-size: 14px;
                font-family: 'Roboto', sans-serif
            }

            .awesomplete {
                width: 100%
            }
        }
    }
}

.headerRed {
    .page-header {
        h1 {
            position: relative;
            margin-top: 0;
            padding-top: 0;
            font-size: 20px;
            color: #404040;
            font-size: 20px;
            line-height: 22px;

            &::after {
                position: absolute;
                z-index: 1;
                bottom: -9px;
                left: 0;
                width: 10%;
                height: 2px;
                margin: auto;
                background: #e96656;
                content: ""
            }
        }
    }
}

#smart-button-container {
    & > div {
        display: flex !important;
        flex-flow: row wrap;
        gap: 1rem;
        align-items: flex-end;

        label {
            min-width: 105px;
            text-align: left;
            line-height: 1
        }
    }

    input {
        height: 47px;
        width: 285px
    }

    input#amount {
        border: 1px solid rgb(0 0 0 / .1);
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: rgb(0 0 0 / .1);
        border-radius: 0;
        color: #555;
        border-bottom: 1px solid rgb(0 0 0 / .2) !important
    }
}

.error_site.custom-background.noContent {
    background-image: none;
    background-color: #f5f5f5 !important;

    .site-grid {
        background-color: #f5f5f5
    }

    .container-component {
        display: inherit
    }
}

.com-finder {
    legend {
        display: inherit;
        position: relative !important;
        color: #404040;
        font-size: 20px;
        line-height: 22px;
        padding-bottom: 6px !important;
        margin-bottom: 1rem !important;
        width: 100% !important;
        text-align: left;

        &.visually-hidden {
            visibility: visible !important;
            height: inherit !important;
            margin: 0
        }

        &::after {
            position: absolute;
            z-index: 1;
            bottom: 0;
            left: 0;
            width: 10%;
            height: 2px;
            margin: auto;
            background: #e96656;
            content: ""
        }
    }

    .form-inline {
        display: flex;
        flex-direction: column;
        gap: 1rem;

        label.me-2 {
            margin-bottom: 10px;
            text-align: left;
            color: #404040;
            position: relative
        }

        .awesomplete {
            flex: 1
        }

        .input-group {
            display: flex;
            align-items: center;

            input, button {
                height: 47px;
                margin: 0
            }

            button.btn.btn-primary {
                background: var(--red-1);
                border-color: var(--red-1);

                &:hover, &:active {
                    background: var(--red-2);
                    border-color: var(--red-2)
                }
            }
        }
    }

    #search-results {
        text-align: left
    }

    .result__title-url {
        display: none
    }

    .result__title-text {
        position: relative;
        color: #404040;
        font-size: 20px;
        line-height: 22px;

        &:hover {
            color: var(--red-2);
            text-decoration: none
        }

        &::after {
            position: absolute;
            z-index: 1;
            bottom: -6px;
            left: 0;
            width: 10%;
            height: 2px;
            margin: auto;
            background: #e96656;
            content: ""
        }
    }

    .result__description {
        display: none
    }

    #search-result-list {
        margin-left: 0
    }
}

@media screen and (max-width: 650px) {
    #callnowbutton:not(.cnb-displaymode), #callnowbutton.cnb-displaymode-mobile-only {
        display: block;
        position: fixed;
        text-decoration: none;
        bottom: 1rem;
        right: 1rem
    }
}

@supports (display:grid) {
    .site-grid {
        grid-gap: 0 1em;
        grid-template-columns:[full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, calc(19.57rem - 2em))) [main-end] minmax(0, 1fr) [full-end];
        grid-template-areas:". banner banner banner banner ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." ". comp comp comp comp ." ". side-r side-r side-r side-r ." ". side-l side-l side-l side-l ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b .";
        display: grid
    }
}

@supports (display:grid) {
    @media (width >= 992px) {
        .site-grid {
            grid-template-areas:". banner banner banner banner ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." ". side-l comp comp side-r ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b ."
        }
    }
}

@media screen and (width < 1201px) {
    .rowFlex {
        flex-flow: row wrap
    }
}

@media (max-width: 992px) {
    .section-header h2 {
        font-size: 35px
    }

    .rowFlex:has(.feedback-box) {
        display: grid;
        padding-inline: 0rem;

        .zerif_grid_col_3 {
            float: none;
            width: calc(100% - 4rem);
            margin-inline: auto
        }
    }

    .site-grid {
        .grid-child {
            max-width: 750px !important
        }
    }
}

@media (max-width: 767px) {
    .intro-text {
        font-size: 41px;
        line-height: 49px
    }
}

@media (max-width: 480px) {
    .intro-text {
        font-size: 32px;
        line-height: 37px
    }
}

@media (max-width: 480px) {
    h2 {
        font-size: 6.5vw !important
    }
}

@media (max-width: 320px) {
    .intro-text {
        font-size: 22px;
        line-height: 30px
    }
}