:root {
    --dark: #222c11;
    --fsize: 14px;
    --color2: #658237;
    --color: #9cb83d;
    --light: #f8ffe0;
    --ffamily:
    "Changa", sans-serif;
    --tr: .4s ease-in-out;
}

body {font-weight: bold;background: #fff;}

.rtl body {
    direction: rtl
}

html {
    overflow-x: hidden;
}

img {
    position: relative;
    z-index: 1;
}

svg {
    fill: inherit
}

begroup {
    display: block;
    max-width: 100vw;
}

img:after {
    content: "topsignaltech";
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    text-align: center;
    background-color: #f3f3f3;
    color: #000;
    justify-content: center;
    font-size: 15px;
    font-weight: bold;
    position: absolute;
    top: 0;
    right: 0;
}

body, button, input, input::placeholder,select {
    font-family: var(--ffamily);
    color: inherit;
}
.h-100 {
    height:100%
}
.flex-column {
    display: flex;
    flex-direction: column
}

container {
    max-width: 1330px;
    padding: 0 15px;
}

ul.sub-menu {
    list-style: none;
    position: absolute;
    right: 0;
    background: #ffff;
    top: 100%;
    width: 300px;
    opacity: 0;
    visibility: hidden;
    transition: var(--tr);
    transform: translateY(20px);
    box-shadow: 0 0 15px #0000002b;
    border-radius: 7px;
}

ul.sub-menu li a {
    flex: 1;
}

nav {
}

nav container {
    height: 60px;
    padding: 0;
    position: relative;
}

.main-menu > li {
    display: flex;
    align-items: center;
    padding: 0 15px;
    transition: var(--tr);
    position: relative;
}

.main-menu > li.menu-item-has-children:after {
    content: url(https://benayat.ae/wp-content/themes/BeGroup/assets/images/arrow.svg);
    margin-inline-start: 5px;transform: scale(.7);
}

nav .main-menu > li:hover {
    color: var(--color);
}

.main-menu li:hover > .sub-menu {
    visibility: visible;
    opacity: 1;
    transform: translate(0);
}



scrolltop {
    position: fixed;
    width: 40px;
    height: 40px;
    z-index: 9999;
    right: 10px;
    bottom: 10px;
    background: var(--color);
    fill: #fff;
    border-radius: 4px;
    font-size: 22px;
    cursor: pointer;
}

.main-menu > li ul li {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    color: #000;
    position: relative;
    transition: var(--tr);
}

ul.sub-menu ul.sub-menu {
    top: 0;
    right: 100%;
}

.main-menu > li ul li:hover {
    background: #f9f9f9;
}

.main-menu > li ul li:last-child {
    border: 0;
}

.main-menu > li ul li:before {
    content: '';
    position: absolute;
    width: 4px;
    top: 0;
    height: 100%;
    background: var(--color);
    right: -1px;
    transition: var(--tr);
    opacity: 0;
}

.main-menu > li ul li:hover:before {
    opacity: 1
}


.social-links a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: 5px;
    border-radius: 50%;
    background: var(--color2);
    fill:#fff;
    transition:var(--tr)
}


a.facebook:hover {
    background: #1877F2;
}

a.twitter:hover {
    background: #1DA1F2;
}

a.instagram:hover {
    background: #E4405F;
}

a.youtube:hover {
    background: #CD201F;
}

a.pinterest:hover {
    background: #BD081C;
}

a.telegram:hover{
    background: #0088cc;
}
header {
    padding: 5px 0;
    position: sticky;
    z-index: 999;
    top: 0;
    background: var(--light);
}

a.whatsapp-f,.phone-f {
    position: fixed;
    width: 55px;
    height: 55px;
    left: 10px;
    z-index: 999;
    fill: #fff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

a.phone-f {
    background: var(--color2);
    bottom: 70px;
}

a.whatsapp-f {
    bottom: 10px;
    background: var(--color);
}

a.whatsapp-f svg, .phone-f svg {
    height: 26px;
}

article.footer-bottom {text-align: left;}

article.footer-bottom a {
    color: var(--color);
}

.footer-box img {
    width: auto;
}
 
footer {
    background:url(../images/footer.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    padding-top: 100px;
    padding-bottom: 20px;
    margin-top: 100px;
}

.footer-box li {
    list-style: none;
    margin: 0 10px;
}

.footer-box p {
    margin: 30px 0 0 0;
}

.footer-box ul {
    display: flex;
    justify-content: center;
    padding: 50px 0;
    border-top: 1px solid #00000021;
    margin: 50px 0 0 0;
}

article.intro {
    padding: 70px 0 70px;
    text-align: center;
    background: var(--light);
    position: relative;
}

.particles-effect {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.3;
    z-index: 4;
}

.shape {
    position: absolute;
    overflow: hidden;
    z-index: 2;
    bottom: -253px;
    left: -1px;
    right: -1px;
}
.shape img {
    min-width: 1440px;
    max-width:initial;
    width:100%;
}


.intro-box {
    max-width: 680px;
    position: relative;
    z-index: 9;
}

h1.intro-title {
    font-size: 44px;
    color: var(--color2);
    line-height: 1.4;
}

p.intro-content {
    margin: 20px 0;
    font-size: 20px;
}

.intro-box a {
    background: var(--color);
    padding: 13px 39px;
    color: #fff;
    display: inline-flex;
    align-items: center;
    border-radius: 34px;
    fill: #fff;
    font-size: 21px;
    transition: var(--tr);
}
.intro-box a:hover {
    background:var(--dark)
}
.intro-box a i {
    margin-inline-end: 5px;
}

service-box img {
    width: 200px;
} 

.service-box img {
    border-radius: 50px 100px;
}
.service-box:nth-child(even) .service-image-holder {
     margin-inline-start: 50px;
     margin-inline-end: 0;
}
.ser-box-content {flex: 1.3;}

.service-box {
    padding: 30px 0;
    border-bottom: 1px solid #eee;
}

h2.ser-title {
    color: var(--color);
    font-size: 40px;
    margin-bottom: 15px;
}

.service-box:nth-child(even) {
    flex-direction: row-reverse;
}

.service-image-holder {
    flex: 1;
    margin-inline-end: 50px;
    position: relative;
}

p.ser-content {
    font-size: 18px;
}

.service-image-holder:after {
    position: absolute;
    content: '';
    border-radius: 50px 100px;
    border: 4px dashed var(--color);
    right: -10px;
    top: -10px;
    left: 40px;
    bottom: -10px;
}

article.features {
    background: var(--dark);
    padding: 30px 0 30px;
    color: #fff;
    margin-bottom: 50px;
    position: relative;
}

h2.feature-title {color: var(--color);font-size: 44px;}

p.feature-content {
    font-size: 18px;
    margin-bottom: 30px;
}

ul.list li i {
    fill: #fff;
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color);
    border-radius: 50%;
    margin-inline-end: 15px;
}

ul.list li {
    margin-bottom: 10px;
}

article.features:after {
    content: '';
    position: absolute;
    width: 50%;
    right: 0;
    bottom: 0;
    height: 30px;
    background: #fff;
}

article.clients container {
    padding: 50px;
    background: var(--light);
    border-radius: 20px;
    border: 1px solid #0000001a;
}

.item-dtl img {
    width: 60px;
    background: #fff;
    border-radius: 7px;
    border: 1px solid #ddd;
    margin-inline-end: 15px;
}

.client-slider {
    margin-top: 50px;
    overflow: hidden;
}

.rates {
    fill: orange;
}

h2.client-title {
    font-size: 44px;
}

p.client-content {
    font-size: 18px;
}

p.client-think {
    font-size: 19px;
    margin: 30px;
    position: relative;
}

p.client-think:before {
    content: '"';
    position: absolute;
    font-size: 52px;
    top: -10px;
    right: -39px;
    color: var(--color2);
}
p.client-think:after {
    content: '"';
    position: absolute;
    font-size: 52px;
    bottom: -10px;
    left: -20px;
    color: var(--color2);
}

span.job {
    color: var(--color);
    display: block;
    margin-bottom: 5px;
}
.item {
    margin:0 10px
}
.owl-dots {
    display: flex;
    margin-top: 20px;
}

button.owl-dot {
    width: 15px;
    height: 10px;
    border-radius: 10px;
    background: var(--color);
    margin-inline-end: 5px;
    cursor: pointer;
}
button.owl-dot.active {
    background:var(--dark)
}

.parteners-slider {
    margin: 50px 0;
    position: relative;
}

.item-partener {
    width: 200px;
    display: flex;
    align-items: center;
    height: 130px;
    justify-content: center;
    margin-inline-end: 20px;
    border: 1px solid #eee;
}

.owl-stage-outer {
    overflow: hidden;
}

.parteners-slider .owl-next,.parteners-slider .owl-prev {
    position: absolute;
    top: 49px;
    fill: var(--color);
    cursor: pointer;
}
.parteners-slider .owl-next {
    left: -60px;
}

.parteners-slider .owl-prev {
    right: -60px;
}

article.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    z-index: 999999;
    width: 100%;
    transition: var(--tr);
    background: #131719d1;
    transform: translateX(100%);
}



.mobile-menu li a {
    display: block;
    padding: 6px 0;
    border-bottom: 1px solid #d9d9d9;
}

.mobile-menu ul {
    background: #fff;
    width: 240px;
    transition: var(--tr);
    transition-delay: .2s;
    height: 100%;
    padding: 10px;
    transform: translateX(100%);
}



.mobile-menu.open,.mobile-menu.open ul {
    transform: translateX(0%);
}
.footer-box {
    max-width: 1330px;
    padding: 5px;
    margin: auto;
    background: var(--light);
    border: 1px solid #eee;
}
footer .footer-box {
    border:0;
    padding:0
} 
.footer-box  iframe {
    width:100%;
    display:block
}

@media(max-width:1023px) {
    .service-box {
        padding:20px 0
    }
}

@media(max-width:767px) {
    .shape {
        bottom: -130px;
    }
    .service-image-holder {
        margin:0 0 30px 0
    }
    .social-links {
        margin-bottom:20px;
        justify-content:center
    }
    article.clients container {
        padding:15px
    }
    h2.ser-title,h2.feature-title,h1.intro-title {
        font-size:26px
    }
    p.ser-content,p.intro-content {
        font-size:16px
    }
    article.features {
        padding:100px 0 20px
    }
}




/*peter css */

/*///////////////////////////////////*/

a.phone-f {
    background: var(--color2);
    bottom: 70px;
    right: 10px;
}


a.whatsapp-f {
    background: var(--color);
    bottom: 70px;
    left:10px;
}

body{
    overflow-x: hidden;
}


article.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    z-index: 999999;
    width: 100%;
    transition: var(--tr);
    background: #131719d1;
    transform: translateX(100%);
    max-width: 100% !important;
    overflow-x: hidden;
}

article.footer-bottom {
    text-align: center;
}


@media only screen and (max-width: 600px) {
.service-box {
    padding: 20px !important;
}

footer {
    margin-top: 0px;
    background: #F8FFE0;
}

.item-partener {
    width: auto;
}
}

.bars.hide-pc {
    display: none;
}

/*.footer-box ul {*/
/*    display: none;*/
/*}*/

.icon-check{
        fill: #fff;
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color);
    border-radius: 50%;
    margin-inline-end: 15px;
}


article.footer-bottom {
    text-align: center;
    margin-top: 35px;
}





footer {
    background: #F8FFE0 !important;
}