*,
body {
    margin: 0
}

:root {
    --dark-grey-color: #373E48;
    --dark-green-color: #0B807A;
    --green-color: #009F99;
    --header-height: 176.69px;
    --footer-height: 213px;
    --logo-height: 83px;
    --menu-top-margin: 55px;
    --menu-top-spacing: calc(var(--logo-height) + var(--menu-top-margin));
    --mobile-side-menu-logo-height: 55px;
    --mobile-menu-width: 460px
}

@media screen and (max-width:1280px) {
    :root {
        --header-height: 135.28px;
        --footer-height: 213px
    }
}

@media screen and (max-width:1080px) {
    :root {
        --header-height: 135.28px;
        --footer-height: 397px
    }
}

body {
    font-family: sans-serif
}

* {
    box-sizing: border-box;
    padding: 0
}

.click {
    float: right;
    background-color: var(--green-color);
    color: #fff;
    padding: 5px 15px;
    border: 0;
    cursor: pointer;
    position: relative;
    z-index: 1
}

.header-menu-links ul {
    list-style: none;
    display: flex;
    grid-gap: 0 15px
}

.header-menu-links ul li a {
    color: #373e48;
    text-decoration: none
}

header #block-cart {
    display: none
}

body>.dialog-off-canvas-main-canvas {
    display: inline;
    width: 100%
}

header {
    width: 100%;
    padding-block: 30px 30px;
    box-shadow: 0 5px 45px 10px rgba(0, 0, 0, .5);
    background-color: var(--wp-white);
    position: sticky;
    top: 0;
    z-index: 9;
    transition: .3s
}

header #block-webpro-sitelogowebpro img {
    max-width: 200px;
    transition: .3s
}

header .desktop-menu {
    margin-top: 30px;
    transition: .3s
}

header .desktop-menu ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    grid-gap: 15px 30px
}

header .desktop-menu ul li {
    font-size: 16px;
    line-height: 19px;
    letter-spacing: .3px
}

header .desktop-menu ul li a {
    text-decoration: none;
    color: rgb(var(--wp-grey));
    position: relative
}

header .desktop-menu ul li a::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--main-highlight-color);
    position: absolute;
    bottom: -5px;
    opacity: 0;
    transition: .3s
}

header .desktop-menu ul li a:hover::after {
    opacity: 1
}

header #block-googlereviewswidget .isXSqH {
    padding: 0;
    transition: .3s
}

@media screen and (min-width:1281px) {
    header.sticky:not(.no-sticky) {
        padding-block: 25px 25px
    }

    header.sticky:not(.no-sticky) #block-webpro-sitelogowebpro img {
        max-width: 150px
    }

    header.sticky:not(.no-sticky) #block-googlereviewswidget .isXSqH {
        height: 49px;
        transform: scale(.8)
    }

    header.sticky:not(.no-sticky) .desktop-menu {
        margin-top: 20px
    }
}

.desktop-sidebar-menu :where(.level1, .level2, .level3) {
    padding-block: 47px;
    padding-inline: 95px 40px;
    position: relative;
    max-width: 490px;
    width: 33.33%;
    box-shadow: 7px 0 23.3222px rgba(0, 0, 0, .28);
    background-color: var(--dark-grey-color);
    overflow-y: auto
}

.desktop-sidebar-menu :where(.level2, .level3) {
    padding-right: 70px
}

.desktop-sidebar-menu .level2,
.desktop-sidebar-menu .level3 {
    background-color: var(--dark-green-color)
}

.desktop-sidebar-menu :where(.level1, .level2, .level3) ul {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 25px 0;
    list-style: none;
    padding: 0
}

.desktop-sidebar-menu :where(.level1, .level2, .level3) ul li {
    width: 100%
}

.desktop-sidebar-menu :where(.level1, .level2, .level3) ul li.expanded.active>a {
    pointer-events: none
}

.desktop-sidebar-menu :where(.level1, .level2, .level3) ul li a {
    font-size: 16px;
    font-weight: 500;
    color: var(--wp-white);
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    opacity: .6
}

.desktop-sidebar-menu :where(.level1, .level2, .level3) ul li.active a,
.desktop-sidebar-menu :where(.level1, .level3) ul li:hover a {
    opacity: 1
}

.desktop-sidebar-menu :where(.level1, .level2, .level3) ul li.expanded a::after {
    content: '\f105';
    font-size: 20px;
    font-weight: 300;
    font-family: "Font Awesome 6 Pro"
}

.desktop-sidebar-menu :where(.level1, .level2, .level3) ul li a span::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--main-highlight-color);
    opacity: 0
}

.desktop-sidebar-menu .level2 ul li:hover a span::after,
.desktop-sidebar-menu .level3 ul li:hover a span::after,
.desktop-sidebar-menu :where(.level2, .level3) ul li a span::after {
    background-color: #fff
}

.desktop-sidebar-menu .level1 ul li:hover a span::after,
.desktop-sidebar-menu .level2 ul li:hover a span::after,
.desktop-sidebar-menu .level3 ul li:hover a span::after,
.desktop-sidebar-menu :where(.level1, .level2, .level3) ul li.active a span::after {
    opacity: 1
}

.desktop-sidebar-menu .level2 ul li:hover a,
.mobile-main-menu .mobile-main-content>ul>li.open,
.mobile-main-menu .mobile-main-content>ul>li>ul>li.open {
    opacity: 1
}

.desktop-sidebar-menu.open-level3 .level2 .desktop-menu-sidebar-close-btn,
html body.open-desktop-menu div.widget-visible,
html body.open-mobile-menu div.widget-visible {
    display: none !important
}

.desktop-sidebar-menu {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    color: #fff;
    display: none;
    z-index: 999999
}

body.open-desktop-menu .desktop-sidebar-menu {
    display: flex
}

.desktop-sidebar-menu>.level1 {
    display: none;
    position: relative;
    left: -110%;
    z-index: 3
}

.desktop-sidebar-menu>:where(.level2, .level3)>div {
    display: none
}

.desktop-sidebar-menu>.level1 li,
.desktop-sidebar-menu>.level2 li,
.desktop-sidebar-menu>.level3 li {
    opacity: 0;
    cursor: pointer
}

.desktop-sidebar-menu>.level2 {
    background-color: var(--main-highlight-color);
    display: none;
    position: relative;
    left: -110%;
    z-index: 2
}

.desktop-sidebar-menu>.level3 {
    left: -110%;
    display: none
}

.desktop-sidebar-menu .desktop-menu-level1-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%
}

.desktop-sidebar-menu .desktop-main-icon img {
    max-height: var(--logo-height);
    object-fit: contain
}

.desktop-sidebar-menu :where(.level1, .level2, .level3) .desktop-menu-items-wrap {
    margin-top: var(--menu-top-margin)
}

.desktop-sidebar-menu :where(.level2, .level3)>div:not(.desktop-menu-sidebar-close-btn) {
    margin-top: var(--menu-top-spacing)
}

.desktop-sidebar-menu .payment-btn {
    margin-top: 40px;
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--wp-white);
    padding: 16px 27px;
    border: 1px solid var(--wp-white);
    transition: .3s;
    opacity: 0
}

.desktop-sidebar-menu .payment-btn:hover {
    background-color: var(--wp-white);
    color: rgb(var(--wp-grey))
}

.desktop-sidebar-menu .desktop-menu-footer {
    padding-top: 30px
}

.desktop-sidebar-menu .desktop-menu-footer .contact-details {
    opacity: 0
}

.desktop-sidebar-menu .desktop-menu-footer .contact-details :where(.phone-details, .email-details) {
    display: flex;
    align-items: center;
    grid-gap: 15px 20px
}

.desktop-sidebar-menu .desktop-menu-footer .contact-details :where(.phone-details, .email-details) img {
    width: 35px
}

.desktop-sidebar-menu .desktop-menu-footer .contact-details :where(.phone-details, .email-details) a {
    font-size: 21px;
    color: var(--wp-white);
    text-decoration: none;
    font-weight: 300;
    transition: .3s
}

.desktop-sidebar-menu .desktop-menu-footer .contact-details :where(.phone-details, .email-details) a:hover {
    color: var(--main-highlight-color)
}

.desktop-sidebar-menu .desktop-menu-footer .contact-details :where(.phone-details, .email-details) .md {
    display: none
}

.desktop-sidebar-menu .desktop-menu-footer .contact-details .email-details,
.mobile-menu-overlay,
header .mobile-main-menu {
    display: none
}

.desktop-sidebar-menu .desktop-menu-footer .contact-details :where(.phone-details, .email-details) i,
.mobile-main-menu .contact-details :where(.phone-details, .email-details) i {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--main-highlight-color);
    border-radius: 50%;
    font-size: 18px;
    font-weight: 300;
    color: var(--main-highlight-color)
}

.desktop-sidebar-menu .social {
    margin-top: 34px;
    display: flex;
    flex-wrap: wrap;
    grid-gap: 15px 25px
}

.desktop-sidebar-menu .social a {
    display: flex;
    width: 28px;
    height: 28px;
    background-color: var(--wp-white);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    color: rgb(var(--wp-grey));
    transition: .3s;
    opacity: 0
}

.desktop-sidebar-menu .social a:hover,
.mobile-main-menu .social a:hover {
    background-color: var(--main-highlight-color);
    color: var(--wp-white)
}

.menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: -1;
    transition: .3s;
    background-color: rgba(0, 0, 0, .65);
    opacity: 0
}

.desktop-sidebar-menu .desktop-menu-sidebar-close-btn {
    font-size: 40px;
    display: block !important;
    position: absolute;
    top: 30px;
    right: 30px;
    cursor: pointer;
    user-select: none
}
@media screen and (max-width:1600px) {
    header .desktop-menu ul{
        grid-gap: 15px 10px;
    }
    header .desktop-menu ul li{
        font-size: 14px;
    }
}

@media screen and (max-width:1480px) {
    :root {
        --logo-height: 65px;
        --menu-top-margin: 40px
    }

    .desktop-sidebar-menu :where(.level1, .level2, .level3) {
        padding-block: 35px
    }

    .desktop-sidebar-menu :where(.level1, .level2, .level3) ul {
        grid-gap: 20px 0
    }

    .desktop-sidebar-menu .social {
        margin-top: 25px
    }

    .desktop-sidebar-menu .payment-btn {
        margin-top: 30px
    }
}

@media screen and (max-width:1440px) {
    :root {
        --menu-top-margin: 50px
    }

    .desktop-sidebar-menu :where(.level1, .level2, .level3) {
        padding-inline: 50px
    }

    .desktop-sidebar-menu .desktop-menu-footer .contact-details :where(.phone-details, .email-details) a {
        font-size: 18px
    }
}

.mobile-menu-tgl {
    display: none;
    width: 35px;
    background-color: transparent;
    border: 0;
    outline: 0
}

.mobile-menu-tgl span {
    display: block;
    width: 100%;
    height: 4px;
    background-color: var(--super-black);
    border-radius: 4px
}

.mobile-menu-tgl span:nth-child(2) {
    margin-top: 8px
}

header .mobile-main-menu {
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: calc(100vh - 50px);
    max-width: var(--mobile-menu-width);
    padding-block: 40px 35px;
    padding-inline: 40px 30px;
    background-color: rgb(var(--wp-grey));
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: .7s;
    z-index: 99
}

header .mobile-main-menu .mobile-main-icon img {
    max-height: var(--mobile-side-menu-logo-height)
}

header .mobile-main-menu .mobile-button-section .payment-btn {
    margin-top: 15px;
    font-size: 12px;
    background-color: transparent;
    color: var(--wp-white);
    border: 1px solid var(--wp-white);
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    display: inline-block;
    padding: 4px 16px;
    letter-spacing: .25px;
    transition: .3s;
    cursor: pointer
}

header .mobile-main-menu .mobile-button-section .payment-btn:hover {
    background-color: var(--wp-white);
    color: #373e48
}

.mobile-main-menu .mobile-main-content {
    margin-top: 64px;
    margin-bottom: auto
}

.mobile-main-menu .mobile-main-content>ul {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 30px 0
}

.mobile-main-menu .mobile-main-content>ul>li {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    opacity: .6;
    position: relative
}

.mobile-main-menu .mobile-main-content>ul>li.has-child::after {
    content: '\f105';
    font-size: 20px;
    font-weight: 300;
    font-family: "Font Awesome 6 Pro";
    color: var(--wp-white);
    order: 2;
    position: absolute;
    top: 0;
    right: 0
}

.mobile-main-menu .mobile-main-content>ul>li>:where(span, a) {
    font-size: 18px;
    line-height: initial;
    font-weight: 600;
    color: var(--wp-white);
    text-decoration: none;
    order: 1
}

.mobile-main-menu .mobile-main-content>ul ul {
    width: 100%;
    list-style: none;
    display: none;
    flex-wrap: wrap;
    grid-gap: 10px 0
}

.mobile-main-menu .mobile-main-content>ul ul li {
    width: 100%
}

.mobile-main-menu .mobile-main-content>ul ul li :where(span, a) {
    font-size: 13px;
    line-height: initial;
    color: var(--wp-white);
    text-decoration: none
}

.mobile-main-menu .mobile-main-content>ul>li>ul {
    margin-top: 24px;
    order: 3;
    padding-right: 25px
}

.mobile-main-menu .mobile-main-content>ul>li>ul li:not(:last-child) {
    margin-bottom: 23px
}

.mobile-main-menu .mobile-main-content>ul>li>ul>li {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
    opacity: .6
}

.mobile-main-menu .mobile-main-content>ul>li>ul>li.has-child::after {
    content: '\f105';
    font-size: 14px;
    font-weight: 300;
    font-family: "Font Awesome 6 Pro";
    color: var(--wp-white);
    order: 2;
    position: absolute;
    top: 0;
    right: 0
}

.mobile-main-menu .mobile-main-content>ul>li>ul>li>ul {
    padding-left: 40px;
    order: 3;
    margin-block: 15px 0
}

.mobile-main-menu .mobile-main-content>ul>li>ul>li>:where(span, a) {
    order: 1
}

.mobile-main-menu .mobile-main-content>ul>li>ul>li.open>ul>li {
    opacity: .6
}

.mobile-main-menu .mobile-main-content>ul li.has-child.open::after {
    content: '\f107'
}

.mobile-main-menu .mobile-menu-footer {
    margin-top: 13px;
    padding-top: 19px;
    margin-inline: -40px -30px;
    padding-inline: 40px 30px
}

.mobile-main-menu .mobile-menu-footer .contact-details :where(.phone-details, .email-details) {
    display: flex;
    align-items: center;
    grid-gap: 15px 20px
}

.mobile-main-menu .mobile-menu-footer .contact-details :where(.phone-details, .email-details) img {
    width: 35px
}

.mobile-main-menu .mobile-menu-footer .contact-details :where(.phone-details, .email-details) a {
    font-size: 18px;
    color: var(--wp-white);
    text-decoration: none;
    font-weight: 300;
    transition: .3s
}

.mobile-main-menu .mobile-menu-footer .contact-details :where(.phone-details, .email-details) a:hover {
    color: var(--main-highlight-color)
}

.mobile-main-menu .mobile-menu-footer .contact-details :where(.phone-details, .email-details) .md {
    display: none
}

.mobile-main-menu .mobile-menu-footer .contact-details .email-details {
    display: none
}

.mobile-main-menu .social {
    margin-top: 13px;
    display: flex;
    flex-wrap: wrap;
    grid-gap: 15px 20px
}

.mobile-main-menu .social a {
    display: flex;
    width: 24px;
    height: 25px;
    background-color: var(--wp-white);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    color: rgb(var(--wp-grey));
    transition: .3s;
    text-decoration: none
}

.mobile-menu-close-btn {
    position: absolute;
    top: 25px;
    right: 25px;
    font-size: 30px;
    color: var(--wp-white);
    cursor: pointer;
    user-select: none
}

@media screen and (max-width:1280px) {
    .desktop-sidebar-menu {
        display: none !important
    }

    header .desktop-menu {
        display: none
    }

    .desktop-sidebar-menu .desktop-menu-footer .contact-details :where(.phone-details, .email-details) i,
    .mobile-main-menu .contact-details :where(.phone-details, .email-details) i {
        width: 25px;
        height: 25px;
        font-size: 12px
    }

    header,
    header .mobile-main-menu {
        display: flex
    }

    .content-wrap,
    footer,
    header {
        transition: .7s
    }

    .mobile-menu-tgl {
        display: block;
        cursor: pointer;
        user-select: none
    }

    header {
        padding-block: 37px 39px;
        z-index: 99;
        width: 100%;
        justify-content: space-between;
        align-items: flex-start;
        box-shadow: 0 5px 20px 5px rgba(0, 0, 0, .3)
    }

    header .header-container {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin: 0
    }

    header #block-webpro-sitelogowebpro img {
        max-width: 180px
    }

    header.sticky:not(.no-sticky) {
        padding-block: 25px 25px
    }

    header.sticky:not(.no-sticky) #block-webpro-sitelogowebpro img {
        max-width: 110px
    }

    body.open-mobile-menu {
        overflow: hidden;
        position: fixed;
        width: 100%
    }

    body.open-mobile-menu header :where(#block-webpro-sitelogowebpro, .mobile-menu-tgl) {
        opacity: .5
    }

    body.open-mobile-menu .content-wrap,
    body.open-mobile-menu footer,
    body.open-mobile-menu header {
        transform: translateX(var(--mobile-menu-width))
    }

    .mobile-menu-overlay {
        display: none;
        position: fixed;
        inset: 0;
        transition: .3s;
        background-color: rgba(0, 0, 0, .65);
        z-index: 9
    }
}

@media screen and (max-width:767px) {
    :root {
        --header-height: 111.28px;
        --footer-height: 397px;
        --mobile-menu-width: 316px
    }

    header {
        padding-block: 26px 26px
    }

    .mobile-main-menu .mobile-main-content>ul {
        grid-gap: 20px 0
    }

    .mobile-main-menu .mobile-main-content>ul>li>:where(span, a) {
        font-size: 14px
    }

    .mobile-main-menu .mobile-main-content>ul ul li :where(span, a) {
        font-size: 11px;
        width: 100%
    }

    header .mobile-main-menu {
        padding-block: 25px 25px;
        padding-inline: 30px 20px
    }

    .mobile-main-menu .mobile-main-content {
        margin-top: 46px
    }

    .mobile-main-menu .mobile-menu-footer {
        margin-inline: -30px -20px;
        padding-inline: 30px 30px
    }

    .mobile-main-menu .mobile-menu-footer .contact-details :where(.phone-details, .email-details) {
        grid-gap: 15px 12px
    }

    .mobile-main-menu .mobile-menu-footer .contact-details :where(.phone-details, .email-details) img {
        width: 25px
    }

    .mobile-main-menu .mobile-menu-footer .contact-details :where(.phone-details, .email-details) a {
        font-size: 13px
    }

    .mobile-main-menu .social {
        grid-gap: 15px 15px
    }
}