:root {
    --br: 0.5em;
    --border: 1px solid #ccc;
    --bk: #1877f2;
    --spot: #3288ff;}
body,input {
    font-family: 'Services',sans-serif;
}
html {
    overflow-x: hidden;
}
body { direction: rtl;overflow-x: hidden;}

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

top-header {display: block;background: #112540;padding: 10px;color: #fff;position: relative;z-index: 9;}

introduction {font-size: 14px;background: var(--bk);display: block;padding: 80px 0 160px 0;position: relative;overflow: hidden;}

.social {margin-top: 15px;width: 47px;text-align: center;padding: 5px;font-size: 21px;border-radius: var(--br);margin-left: 15px;color: #fff;}
.facebook {
    background: #104fa1;}
.twitter {
    background:#1DA1F2
}
.telegram {
    background: #1657ab;}
.instagram {
    background:#E4405F
}
.whatsapp-share {
    background:#2ac92a
}
a.phone,a.whatsapp {position: fixed;width: 55px;height: 55px;display: flex;align-items: center;left: 10px;bottom: 10px;background: #3288ff;color: #fff;justify-content: center;z-index: 999;font-size: 27px;border-radius: var(--br);}

a.whatsapp {bottom: 70px;background: #2ac92a;}

header {background: var(--bk);position: sticky;z-index: 99;color: #fff;top: 0;height: 70px;}
.bars {
    position:absolute;
    left:10px;
    top:10px;
    font-size: 54px;}
logo {height: 80px;position: relative;z-index: 9;display: flex;justify-content: center;align-items: center;}

header-title {display: block;font-size: 14px;}

.header-box {margin-left: 15px;color: #ffffff;position: relative;z-index: 6;padding: 8px;flex: 1;background: #ffffff1a;border-radius: var(--br);}

.header-box i {font-size: 30px;margin-left: 15px;}

header-content {font-size: 12px;display: block;color: #fff;}

.header-box:nth-child(2) {flex: 2;}

bottom-header {display: block;background: var(--bk);position: relative;z-index: 9;color: #fff;}
.menu li {
    position:relative
}
.menu li a {display: flex;justify-content: center;align-items: center;height: 70px;padding: 0 15px;}
.sub-menu {
    position:absolute
;list-style: none;background: #fff;width: 200px;border-radius: var(--br);visibility: hidden;opacity: 0;transition: opacity .3s ease;}
.sub-menu li a {
    
height: 38px;border-bottom: 1px solid #ddd;color: #000;justify-content: start;font-size: 14px;}
li:hover .sub-menu {
    opacity:1;
    visibility:visible
}
header:before {background: var(--spot);transform: translateX(76%) skewX(-30deg);}

logo img {width: auto;height: 100%;}

logo a {height: 75px;}

intorduction {position: relative;display: block;padding: 80px 10px;background: var(--bk);}

.bg-title {color: #ffffff;position: relative;z-index: 6;font-size: 31px;}

.content {font-size: 16px;position: relative;z-index: 6;color: #ededed;margin-bottom: 40px;}

intorduction img {position: relative;z-index: 6;}
.custom-shape-divider-bottom-1648764529 {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-bottom-1648764529 svg {
    position: relative;
    display: block;
    width: calc(105% + 1.3px);
    height: 228px;
    transform: rotateY(180deg);
}

.custom-shape-divider-bottom-1648764529 .shape-fill {
    fill: white;
}
.dk-color {
    color: var(--bk);
}

service--box {padding: 20px;border-radius: var(--br);text-align: center;background: #fff;margin-left: 10px;margin-bottom: 10px;height: 280px;border: 1px solid #f4ecec;transition: .3s box-shadow ease;}
service--box:hover {
    box-shadow: 0 0 32px #00000026;}
.block-title {color: #000000;font-size: 15px;margin-bottom: 20px;}

.block-content {font-size: 15px;color: #6e6a6a;margin-bottom: 25px;}

service--box >div >i {font-size: 29px;width: 70px;height: 70px;background: #eaf3ff;border-radius: 50%;color: #1877f2;display: inline-flex!important;justify-content: center;align-items: center;margin-bottom: 5px;}

.block-link i {width: 20px;height: 20px;color: #fff;display: flex;align-items: center;background: #1877f2;justify-content: center;border-radius: 50%;margin-left: 10px;font-size: 11px;}


.row {margin-top: 50px;}



services {display: block;padding-bottom: 80px;}
.pd-r-20{
    padding-right: 20px;
}

questions {display: block;padding: 80px 10px;position: relative;background: #f7fafe;}

questions--panel {padding-left: 20px;display: block;color: #ddd;position: relative;z-index: 6;}

question--box {display: block;position: relative;padding: 30px 20px;cursor: pointer;border: 1px solid #efefef;margin-top: 5px;background: #fff;border-radius: var(--br);}

question {display: block;color: #000000;font-size: 18px;font-weight: bold;}

answer {font-size: 15px;margin-top: 15px;display: none;color: #000;}


number {position: absolute;width: 50px;height: 50px;background: #ffeb3b;display: flex;justify-content: center;align-items: center;font-size: 30px;border-radius: 50%;right: -80px;color: #000;}

question i {margin-left: 5px;}

question--box.open answer {display: block;}

question--box:first-of-type {margin-top: 50px;}

footer {position: relative;padding: 80px 10px;background: var(--bk);border-top: 5px solid #e8e8e8;}

footer--box {display: block;padding: 15px;}
footer--box  .close {
    display:none;
}
footer.before:before {
    background: #ffeb3b;right: 49%;transform: skewX(30deg);
}

footer.after:after{
    background: #f7fafe;right: 50vw;transform: skewX(30deg);
}

ul.footer-menu li a {display: block;color: #fff;font-size: 15px;}

footer--box.footer--posts {position: relative;z-index: 6;}

a.footer-link {display: block;font-size: 14px;border-bottom: 1px solid #cbcbcb;padding: 5px 0;}

footer-bottom {display: block;padding:   10px;background: #ffeb3b;position: relative;margin-top: -51px;}

blog {position: relative;display: block;padding: 80px 10px;}

a.block {width: 267px;height: 270px;margin: 5px;text-align: center;position: relative;overflow: hidden;border-radius: 10px;}

a.block img {display: block;height: 100%;object-fit: cover;transition: .3s transform ease;}

a.block h3.block-title {position: absolute;bottom: 0;right: 0;left: 0;text-align: center;color: #fff;z-index: 6;padding: 10px;margin: 0;}
a.block:before {
    background:linear-gradient(transparent,#000)
;}
a.block:hover img {
    transform:scale(1.1)
}

.thumbnail img {position: relative;z-index: 9;border-radius: 20px;margin-right: 20px;height: 490px;}

.breadcrumb {align-items: center;color: #cfdbeb;}
.breadcrumb >* {
    margin-left:5px
}

.post-content {padding: revert;margin: revert;}
.post-content * {
    max-width: 100%;
    height:auto
}
.post-content h1,.post-content h2,.post-content h3 {color: var(--bk);}
.post-content p  {
    margin:15px 0 0 0
}
.post-content ul {
    margin-right:20px
}


textarea.add-comment {
    background: #f3f4f5;
    width: 100%;
    border-radius: 20px;
    font-size: 17px;
    padding: 13px;
    height: 46px;
}

textarea.add-comment::-webkit-scrollbar-thumb,
textarea.add-comment::-webkit-scrollbar{
    background:none
}

li.comment img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    margin-left: 10px;
}

li.comment {
  position: relative;
  padding-bottom: 20px;
  margin-bottom: 10px;
}
li.comment span {
    display:block;
    padding: 5px 10px;
    background: #f3f4f5;
    border-radius:20px;
    margin-bottom:5px;
}

comment-time {
    color: #afb2bd;
    position: absolute;
    bottom: 0px;
    font-size: 13px;
    right: 30px;
}

h3#reply-title {
    padding: 10px 0;
    font-size: 26px;
}

textarea#comment {
    width: 100%;
    background: #ffff;
    padding: 15px;
    border-radius: 5px;
    font-size: 17px;
    height: 87px;
    border: 1px solid #eee;
}

p.comment-form-comment label {
    color: #f94949;
    font-size: 20px;
    display: none;
    margin: 10px 0;
}

input#submit,button#post {
    margin: 5px auto 15px;
    background: #042038;
    padding: 9px;
    color: #fff;
    border-radius: 5px;
    font-size: 15px;
    cursor: pointer;
}

div#respond {
    background: #f9f9f9;
    border-radius: 5px;
    color: black;
    padding: 25px;
    margin-top: 20px;
border-radius: var(--br);border: 1px solid #ccc;}

.comments-list {
 position: relative;
}

.comment--box{
   background: #fff;
   margin: 20px 0;
   border-radius: 5px;
   color: black;
   border: 1px solid #ddd;
   padding: 25px;
}
.comment--box img {
    width:80px;
    height:80px;
    border-radius:50%;
    margin-left:20px
}
.comment-box-content h3 {
    color:#4f4f4f;
    font-size: 16px;}
.comment-box-content time {
    font-size: 12px;
    color:#afaeae
}

.comment-content {
    font-size: 15px;
    margin: 15px 0;
}

p.logged-in-as {
    display: none;
}


.tags a {
    
    padding: 5px 10px;
    margin: 3px;
    background: #ffffff2b;color: #fff;
    border-radius: var(--br);
    display: inline-block;
}


.post-info {color: #fff;font-size: 16px;margin-top: 10px;}
.post-info >* {
    margin-left:10px
}

.tags {margin-top: 15px;}

prices {display: block;padding: 80px 10px;background: #0d458c;}

.plan {
    padding: 10px;
    text-align: center;
    padding-top: 40px;
    position: relative;
    background: #0000006b;
    overflow: hidden;
    border: 1px solid #00000014;
    border-radius: var(--br);
    box-shadow: 0px 0px 7px #00000024;
    padding-bottom: 50px;
    transition: .3s all;
    margin: 10px;cursor: pointer;

}

.benfits li {
    border-bottom: 1px solid #ffffff12;
    padding: 5px 0;
    color: #eeeeee;
    text-align: right;
    font-size: 17px;
}

.benfits li i {
    margin-left: 10px;
    background: #ffeb3b;
    padding: 5px;
    color: #000000;
    border-radius: 10px;
}

span.price {font-size: 55px;
    color: #ffeb3b;
    margin-bottom: 15px;
    line-height: 50px;}

h3.price-title {margin-bottom: 20px;font-size: 23px;color: #ffffff;}

a.plan-link {display: inline-block;margin-top: 35px;background: var(--bk);font-size: 19px;padding: 7px 14px;border-radius: var(--br);color: #fff;}

price {font-size: 50px;color: #ffeb3b;}

.pice-options li {background: #f7f7f7;padding: 15px;margin-bottom: 5px;border-radius: var(--br);}
.pice-options li i {
    margin-left:5px
}

.load-more {margin-top: 20px;padding: 15px;background: var(--bk);color: #fff;border-radius: var(--br);cursor: pointer;}

.menu-item-has-children > a:after {content: '\f078';font-family: 'font awesome 5 pro';margin-right: 10px;font-size: 11px;}
div#ez-toc-container {background: #f8fafd;padding: 30px;margin-bottom: 20px;border-radius: var(--br);border: 1px solid #00000014;}

p.ez-toc-title {display: block;margin-bottom: 30px;text-align: center;font-size: 32px;color: #1877f2;}

ul.ez-toc-list li {background: #fff;padding: 5px 10px;list-style: none;border-radius: 5px;font-size: 14px;width: calc(50% - 10px);margin: 5px;border: 1px solid #e5e8ec;}

ul.ez-toc-list {display: flex;flex-wrap: wrap;}
ul.ez-toc-list li a {
    display:block
}
@media(max-width:1023px){
    .menu {
    position:fixed
    ;width: 200px;height: 100vh;
        right: 0;display: block;background: #09111c;z-index: 999;
        text-align: right;
    transition: transform .4s ease;transform: translateX(120%);}
.sub-menu {
    position:static;
    visibility:visible;
    opacity:1;
    border-radius:0
;background: #000;display: none;}
    .menu.open {
        transform:translateX(0)
    }
.menu li a {
    
height: 50px;justify-content: flex-start;}
.menu li a:after {
    position:absolute;
    left:10px
}
.sub-menu li a {
    color:#fff
;border-bottom: 0;}
.close {
    text-align:center
;padding: 6px;color: #fff;}
}

@media (max-width:991px) {
    
ul.ez-toc-list li  {
    width:100%;
}
    footer.after:after,
    footer.before:before {
        display:none
    }
    a.footer-link {
        color:#fff
    }
    questions--panel {
        padding-left:0
    }
    .thumbnail img {
        margin:10px 0
    }
}
@media (max-width:778px) {
    .header-box {
        min-width:100%;
        margin:5px 0 0 0
    }
    a.block {
        width:calc(50% - 10px)
    }
}
@media (max-width:490px) {
    a.block {
        
    width: calc(100% - 10px);}
}

table {
    background: #f9f9f9;
    width: 100%;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 10px;
}

table tr td {
    border: 1px solid #0000002e;
    padding: 9px;
    background: #fff;
}