@import url(../css/all.min.css);

@import url(../css/bootstrap.css);

@import url(../css/owl.carousel.min.css);

@import url(../css/owl.theme.default.min.css);

@import url(../css/animate.css);

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&family=Montserrat:wght@300;400;500;600;700;800&display=swap');





*,

*:before,

*:after {

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

}



* {

    margin: 0px;

    padding: 0px;

    border: none;

    outline: none;

}



:root {

    --main-color: #FDC913;

    --sub-color: #28323C;

    --sec-padding: 80px 0;

}



body {

    font-family: 'Montserrat', 'Cairo', sans-serif;

    background-color: #fff;

    font-size: 16px;

    font-weight: 400;

}



ul {

    padding: 0;

    margin: 0;

    list-style: none;

}



h1,

h2,

h3,

h4,

h5,

h6 {

    font-family: 'Montserrat', 'Cairo', sans-serif;

    font-weight: 700;

    font-style: normal;

    margin: 0;

}



p {

    margin: 0;

}



html,

button,

input,

select,

textarea {

    color: #222;

}



::-moz-selection {

    background: #b3d4fc;

    text-shadow: none;

}



input::-webkit-outer-spin-button,

input::-webkit-inner-spin-button {

    -webkit-appearance: none;

    margin: 0;

}



img {

    vertical-align: middle;



}



fieldset {

    border: 0;

    margin: 0;

    padding: 0;

}



textarea {

    resize: vertical;

}





a,

button {

    -webkit-transition: all 0.4s ease;

    -moz-transition: all 0.4s ease;

    -ms-transition: all 0.4s ease;

    -o-transition: all 0.4s ease;

    transition: all 0.4s ease;

}



p {

    margin: 0;

}



a {

    cursor: pointer !important;

    text-decoration: none !important;

}



a:hover,

a:active,

a:focus,

a:visited {

    text-decoration: none !important;

}



input,

textarea,

a,

button {

    outline: none !important;

    text-decoration: none;

}



img {

    max-width: 100%;

}



.main-wrapper {

    position: relative;

    min-height: 100%;

    overflow: hidden;

    padding-top: 75px;

}







.menu-toggle .main-wrapper {

    -webkit-transition: -webkit-transform .0s ease;

    transition: -webkit-transform .0s ease;

    transition: transform .0s ease;

    transition: transform .0s ease,

        -webkit-transform .0s ease;

}







.hamburger, .is-closed {

    width: 35px;

    height: 35px;

    position: absolute;

    z-index: 9;

    left: 15px;

    top: 0;

    -webkit-transition: background-color .2s linear;

    -ms-transition: background-color .2s linear;

    transition: background-color .2s linear;

    margin-right: 0px;

    background-color: transparent;

}



.hamburger span, .is-closed span {

    width: 20px;

    height: 2px;

    border-radius: 0px;

    background-color: #fff;

    display: block;

    margin-bottom: 4px;

    -webkit-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    -ms-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

.is-closed span:nth-child(1) {

    transform: rotate(45deg)

}



.is-closed span:nth-child(2) {

    display: none;

}



.is-closed span:nth-child(3) {

    transform: rotate(135deg);

    margin-top: -5px;

}



.opt-mobail {

    display: none;

}



.opt-mobail .lang-site {

    position: absolute;

    right: 15px;

    top: 25px;

    display: none

}

.opt-mobail .lang-site a {

    color: var(--main-color);

    font-weight: 500;

}





/* Style Header */



#header {

    width: 100%;

    padding: 20px 0 10px;

    position: absolute;

    top: 0;

    left: 0;

    background: #fff;

    z-index: 9;

}



#header .container {

    display: flex;

    align-items: center;

    justify-content: space-between;

    position: relative;

    z-index: 9;
}



.logo-site a {

    display: inline-block;

}



.logo-site img {

    max-width: 180px;

}



.main_menu {

    display: flex;

    align-items: center;

}



.main_menu > li {

    margin-right: 25px;

}



.main_menu > li:last-child {
    margin-right: 0;
    /* margin-left: 100px; */
    margin-left: 0px;
}


.main_menu > li > a {

    display: block;

    color: #9B9B9B;

    font-size: 15px;

    text-transform: uppercase;

    font-weight: 400;

    position: relative;

    padding: 10px;

}



.main_menu > li.active a {

    color: var(--main-color);

    font-weight: 700;

}



.main_menu > li .btn-site {

    margin: 0

}





#header.fixed-header {

    position: fixed;

    width: 100%;

    top: 0;

    left: 0;

    box-shadow: 0 1px 7px rgb(0 0 0 / 16%);

    z-index: 33;

}



/* Style Home Slide */



.section_home {

    position: relative;

    background: #F8F8F8;

    padding: 50px 0;

    z-index: 1;

}



.section_home .item {

    position: relative;

    display: flex;

    align-items: end;

    min-height: calc(100vh - 75px);

    width: 100%;

    background-size: cover !important;

    background-position: center !important;

    padding-bottom: 80px;

}

.section_home .row {

    align-items: center;

}

.home_txt {

    position: relative;

}



.home_txt h1 {

    color: #000;

    margin-bottom: 10px;

    font-size: 65px;

    text-transform: uppercase

}

.home_txt span {

    color: var(--main-color);

    font-size: 26px;

    display: block;

    margin-bottom: 10px;

    text-transform: uppercase

}

.home_txt p {

    color: #000;

    font-size: 13px;

    line-height: 1.5;

    margin-bottom: 45px;

}

.home_txt strong {

    color: #000;

    text-transform: uppercase;

    display: block;

    margin-bottom: 10px;

    font-weight: 500;

}

.home_txt ul li {

    display: inline-block;

}

.home_txt li img {

    width: 160px;

    height: 65px;

}

.thumb-home {

    text-align: end;

}

.thumb-home img {

    max-width: 430px;

    margin: auto;

}

#slide-home .owl-nav {

    display: block !important;

}

#slide-home .owl-nav > button {

    border: 1px solid #414141;

    color: var(--main-color);

    width: 35px;

    height: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 5px;

    position: absolute;

    right: -40px;

    top: 50%;

    transform: translateY(-50%);

}



#slide-home .owl-nav > button.owl-prev {

    right: auto;

    left: -60px

}







/* Style Stac Site */



.sec_head {

    position: relative;

    width: 70%;

    text-align: center;

    margin: 0 auto 40px

}



.sec_head h2 {

    color: #000;

    font-size: 28px;

    margin-bottom: 5px;

    position: relative;

    text-transform: uppercase

}

.sec_head h2 strong {

    color: var(--main-color);

}

.sec_head p {

    font-size: 13px;

    color: #000;

    font-weight: 400;

}



.btn-site {

    height: 40px;

    font-size: 15px;

    padding: 12px 25px;

    display: flex;

    align-items: center;

    margin: 30px auto 0;

    border-radius: 6px;

    justify-content: center;

    background: var(--main-color);

    width: max-content;

    position: relative;

    overflow: hidden;

}



.btn-site:before {

    background: #202020;

    position: absolute;

    content: "";

    top: 0;

    height: 100%;

    left: -10px;

    width: 0%;

    transform: skew(-10deg);

    transition-duration: .6s;

    z-index: 0;

}



.btn-site:hover:before {

    position: absolute;

    content: "";

    top: 0;

    left: -10px;

    width: 120%;

    z-index: 0

}



.btn-site span {

    color: #000;

    position: relative;

    font-weight: 700;

    text-transform: uppercase;

}

.btn-site:hover span {

    color: var(--main-color);

}



/* Style Feature */



.section_features {

    position: relative;

    padding: 60px 0 160px;

}

.section_features .sec_head {

    margin-bottom: 110px;

}

.con-feature {

    display: flex;

    background: #F8F8F8;

    border-radius: 15px;

    padding: 0 30px;

}

.col-feat {

    width: 35%;   

    padding: 40px 40px 80px;

    position: relative;

}

.col-feat:nth-child(2) {

    width: 30%;

}



.dt-feat {

    margin-bottom: 40px;

}

.dt-feat:last-child {

    margin-bottom: 0;

}

.dt-feat figure {

    background: var(--main-color);

    width: 50px;

    height: 50px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

}

.dt-feat figure img {

    width: 25px;

}

.txt-feat h5 {

    color: #000;

    margin-bottom: 10px;

    font-size: 16px;

    text-transform: uppercase;

}

.txt-feat p {

    color: #000;

    font-size: 14px;

}

.thumb-feat {

    position: absolute;

    top: -60px;

}

.thumb-feat img {

    max-width: 250px;

}



/* Style Introductaion Video */



.section_introduction_video {

    position: relative;

    background: url(../images/bg.svg);

    background-size: cover;

    padding: 70px 0;

}

.section_introduction_video:before {

    content: "";

    background: #F8F8F8;

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

    z-index: -1;

}

.txt-introduction {

    padding-right: 20px;

}

.txt-introduction h2 {

    color: #000;

    text-transform: uppercase;

    margin-bottom: 10px;

    font-size: 30px;

}

.txt-introduction h2 span {

    color: var(--main-color);

    display: block;

    font-size: 45px;

}

.txt-introduction p {

    color: #000;

    font-size: 14px;

    margin-bottom: 15px;

}

.txt-introduction li {

    display: inline-block;

    margin-right: 7px;

}

.txt-introduction li a {

    background: #fff;

    width: 35px;

    height: 35px;

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #A2A2A2;

}



.thumb-introduction {

    position: relative;

}

.thumb-introduction:after {

    content: "";

    background: var(--main-color);

    width: 100%;

    height: 100%;

    border-radius: 15px;

    position: absolute;

    top: 10px;

    right: 10px;

    z-index: -1

}

.thumb-introduction:before {

    content: "";

    background: rgb(0 0 0 / 40%);

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

    border-radius: 15px;

}

.thumb-introduction img {

    border-radius: 15px;

}

.btn-video {

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

    color: #fff;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 50px;

    height: 50px;

    border-radius: 50%;

    -webkit-backdrop-filter: saturate(180%) blur(20px);

    backdrop-filter: saturate(180%) blur(20px);

    background-color: rgba(255,255,255,0.50);

    border: 5px solid #BDC5C7;

    transition: .3s;

}

.btn-video:hover {

    color: #fff;

}



/* Style Pricing */



.section_simple_pricing {

    position: relative;

    padding: 70px 0;

}

.section_simple_pricing .sec_head {

    text-align: start;

    margin: 0 0 40px;

    width: 50%;

}

.item-pricing {

    position: relative;

    background: #F8F8F8;

    border-radius: 15px;

    padding: 30px;

}

.head-pricing {

    text-align: center;

    margin-bottom: 20px;

}

.head-pricing h4 {

    text-transform: uppercase;

    color: #000000;

    font-size: 20px;

}

.head-pricing strong {

    color: var(--main-color);

    font-size: 25px;

}

.head-pricing strong span {

    color: #818B90;

    font-size: 18px;

    font-weight: 400;

}

.item-pricing li {

    color: #000000;

    display: flex;

    align-items: center;

    margin-bottom: 5px;

}

.item-pricing li span {

    margin-right: 12px;

    font-size: 18px;

}

.available {

    color: var(--main-color)

}

.not-available {

    color: #818B90

}

.cont-reg .btn-site:before {

    background: #fff;

}



#slider-pricing .owl-nav {

    display: block !important;

}

#slider-pricing .owl-nav > button {

    border: 1px solid #414141;

    color: var(--main-color);

    width: 35px;

    height: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 5px;

    position: absolute;

    right: 0;

    top: -70px;

}



#slider-pricing .owl-nav > button.owl-prev {

    right: 45px

}



#slider-pricing .owl-stage-outer {

    width: 120%

}

#slider-pricing .owl-stage {

    padding-left: 0 !important

}



/* Style About */



.section_about {

    position: relative;

    padding: 50px 0;

}

.section_about .row {

    align-items: center;

}

.thumb-about {

    position: relative;

    text-align: center;

}

.thumb-about:before {

    content: "";

    background: var(--main-color);

    width: 400px;

    height: 400px;

    border-radius: 50%;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    z-index: -1

}

.thumb-about img {

    max-width: 300px;

}

.cont-about .sec_head {

    text-align: start;

    width: 100%;

    margin: 0 0 20px;

}

.lst-feat-about {

    display: flex;

    flex-wrap: wrap;

}

.item-feat-about {

    width: 46%;

    margin-right: 40px;

    margin-bottom: 40px;

    background: #F8F8F8;

    padding: 10px;

    border-radius: 10px;

    display: flex;

    align-items: center;

}

.item-feat-about:nth-child(even) {

    margin-right: 0;

}

.item-feat-about:last-child,

.item-feat-about:nth-last-child(-n + 2) {

    margin-bottom: 0

}

.item-feat-about figure {

    width: 70px;

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #EFEFEF;

    border-radius: 10px;
    margin-bottom: 0;

}

.item-feat-about figure img {

    width: 30px;

}

.txt-about {

    width: calc(100% - 70px);

    padding-left: 10px;

}

.txt-about h5 {

    color: #000;

    font-size: 25px

}

.txt-about p {

    color: #000;

}



/* Style How Work */



.section_hwo_work {

    padding: 50px 0;

    position: relative;

}

.cont-how-work {

    background: #F8F8F8;

    padding: 60px;

    border-radius: 15px;

}

.cont-how-work .sec_head {

    margin-bottom: 100px;

}

.lst-how-work {

    position: relative;

}

.lst-how-work:before {

    content: "";

    background: #E7E7E7;

    width: 8px;

    height: 120%;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 0

}

.item-work {

    display: flex;

    align-items: center;

    margin-bottom: 80px;

}

.item-work:nth-child(even) {

    flex-direction: row-reverse;

}

.txt-work,

.thumb-work {

    width: 40%;

}

.thumb-work img {

    border-radius: 12px;

    max-width: 300px;

}

.item-work:nth-child(even) .thumb-work {

    text-align: right

}

.num-work {

    width: 20%;

    position: relative;

}

.item-work:first-child .num-work:before {

    content: "";

    background: #E7E7E7;

    width: 17px;

    height: 17px;

    border-radius: 5px;

    position: absolute;

    top: -130px;

    left: 50%;

    transform: translateX(-50%);

}

.item-work:last-child .num-work:before {

    content: "";

    background: #E7E7E7;

    width: 17px;

    height: 17px;

    border-radius: 5px;

    position: absolute;

    bottom: -130px;

    left: 50%;

    transform: translateX(-50%);

}

.num-work span {

    background: var(--main-color);

    width: 70px;

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #000;

    font-size: 28px;

    font-weight: 700;

    margin: 0 auto;

    border-radius: 8px;

}

.txt-work h5 {

    color: #000;

    text-transform: uppercase;

    font-size: 17px;

    margin-bottom: 10px;

}

.txt-work {

    text-align: right;

    padding-left: 50px;

}

.item-work:nth-child(even) .txt-work {

    text-align: left;

    padding-right: 50px;

    padding-left: unset

}

.txt-work ul {

    margin-bottom: 10px;

}

.txt-work ul li {

    display: inline-block;

    margin-left: 10px;

}

.item-work:nth-child(even) .txt-work ul li {

    margin-right: 10px;

    margin-left: unset

}

.txt-work li a {

    background: #303030;

    width: 35px;

    height: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    border-radius: 10px;

}

.txt-work p {

    color: #000;

    font-size: 14px;

}



/* Style Client */



.section_clients {

    padding: 60px 0;

}

.item-clients {

    padding: 20px;

}

#slider-clients .owl-dots {

    display: block !important;

    text-align: center;

    margin-top: 15px;

}

.owl-dots .owl-dot {

    margin: 0 5px;

}

.owl-dots .owl-dot span {

    display: block;

    width: 15px;

    height: 15px;

    position: relative;

    border-radius: 50%;

    border: 1px solid #818B90;

}

.owl-dots .owl-dot.active span:before {

    content: "";

    background: var(--main-color);

    width: 10px;

    height: 10px;

    border-radius: 50%;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%)

}



/* Style Customer Reviews */



.section_reviews {

    position: relative;

    padding: 60px 0;

}

.item-reviews {

    background: #F8F8F8;

    padding: 40px;

    border-radius: 10px;

    display: flex;

}

.item-reviews figure {

    width: 70px;

    margin-bottom: 0

}

.item-reviews figure img {

    border-radius: 10px;

}

.txt-reviews {

    width: calc(100% - 70px);

    padding-left: 15px;

}

.txt-reviews h5 {

    text-transform: uppercase;

    color: #000;

    font-size: 18px;

}

.txt-reviews p {

    color: #000;

    font-size: 14px;

    line-height: 1.8

}

.lst-reviwes {

    display: flex;

    margin-bottom: 15px

}

.lst-reviwes span {

    font-size: 17px;

    margin-right: 5px;

    color: #929292;

}

.lst-reviwes span.checked {

    color: #FDC913

}

.owl-dots {

    text-align: center;

    margin-top: 30px

}

#slider-reviews .owl-dots {

    display: block !important;

}



/* Style Interface */



.section_interface {

    position: relative;

    padding: 60px 0;

}

#slider-interface .owl-dots {

    display: block;

}

#slider-interface .owl-stage-outer {

    padding: 80px 0;

}

#slider-interface .owl-item .item {

    transform: scale(1);

    -webkit-transition: 0.3s;

    transition: 0.3s;

}

#slider-interface .owl-item.active.center .item {

    transform: scale(1.3);

}

#slider-interface .owl-item.active.center {

    z-index: 9;

}





/* Style Fotter */



footer {

    position: relative;

}



.top-footer {

    padding: 30px 0;

    background: #F8F8F8

}



.logo-ft {

    margin-bottom: 10px;

    display: block;

}

.logo-ft img {

    width: 170px;

}

.cont-ft p {

    color: #000;

    font-size: 14px;

}



.menu-ft h5 {

    color: #000;

    margin-bottom: 20px;

    font-size: 17px;

    text-transform: uppercase;

}

.li-ft li {

    margin-bottom: 10px;

}

.li-ft li a {

    color: #000;

    font-size: 14px;

}



.li-ft li a:hover {

    color: var(--main-color);

}



.list-social li {

    display: inline-block;

    margin-right: 10px;

    color: #000

}

.list-social li a {

    background: #fff;

    width: 35px;

    height: 35px;

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #A2A2A2;

}

.list-social li a:hover {

    background: #A2A2A2;

    color: #303030

}

.list-download li {

    margin-bottom: 20px;

}

.list-download li a img {

    max-width: 150px;

}



.bottom-ft {

    padding: 20px 0;

    background: #fff;

}



.copyRight {

    text-align: center;

    color: #000;

    font-size: 14px;

    font-weight: 500;

}





/* Style Head Page */



.hd-page {

    position: relative;

    background-position: center !important;

    background-size: cover !important;

    height: 400px;

}

.hd-page:before {

    content: "";

    background: rgb(0 0 0 / 50%);

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

}



.hd-page .container {

    display: flex;

    align-items: center;

    justify-content: center;

    padding-bottom: 20px;

    height: 100%;

    position: relative;

    z-index: 2;

}

.hd-page h3 {

    color: #fff;

    font-size: 32px;

    margin-bottom: 20px;

    text-align: center;

    text-transform: uppercase;

}

.hd-page ul {

    display: flex;

    align-items: center;

    justify-content: center;

}

.hd-page ul li,

.hd-page ul li a {

    color: #fff;

}

.hd-page ul li {

    position: relative;

    padding-right: 10px;

    margin-right: 10px;

}

.hd-page ul li:before {

    content: "/";

    position: absolute;

    right: -5px;

}

.hd-page ul li:last-child {

    padding-right: 0;

    margin-right: 0;

}

.hd-page ul li:last-child:before {

    display: none

}



/* Style About Page */



.stage-padding {

    position: relative;

    padding: 110px 0;

}

.txt-about-page h2 {

    color: #000;

    text-transform: uppercase;

    margin-bottom: 10px

}

.txt-about-page p {

    color: #000;

    text-align: justify;

    padding-inline-end: 50px;

}

.thumb-about-page {

    text-align: center

}

.thumb-about-page img {

    border-radius: 15px;

}

.thumb-about-page:before {

    content: "";

    border: 3px solid var(--main-color);

    border-radius: 15px;

    width: 100%;

    height: 100%;

    transform: rotate(-6deg);

    position: absolute;

    top: 0;

    left: 0;

    z-index: -1

}



/* Style Contact Us Page */



.form-contact .form-group {

    position: relative;

    margin-bottom: 30px;

}

.item-contact {

    background-color: #F8F8F8;

    padding: 20px 30px 40px;

    border-radius: 15px;

    text-align: center;

}

.item-contact:hover {

    background-color: var(--main-color);

}

.item-contact figure {

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

}

.item-contact figure svg {

    width: 50px;

    height: 50px;

}

.item-contact figure svg path {

    stroke: #000

}

.item-contact:hover figure svg path {

    stroke: #000;

}

.item-contact h4 {

    color: #000;

    font-size: 17px;

    text-transform: uppercase;

    margin-bottom: 20px;

}

.item-contact p {

    color: #000;

    font-size: 14px;

    height: 42px;

}

.item-contact:hover h4,

.item-contact:hover p {

    color: #000000;

}

.form-contact {

    margin-top: 40px;

}

.form-contact .d-flex .form-group {

    width: 33.3334%;

    margin-right: 20px;

}

.form-contact .d-flex .form-group:last-child {

    margin-right: 0;

}

.form-contact .form-control {

    height: 50px;

    padding-left: 40px;

    background: #F8F8F8;

    border-radius: 10px;

    border: 0

}

.form-contact .form-control::placeholder {

    color: #C4C4C4;

}

.form-contact textarea.form-control {

    height: 140px;

    padding-top: 12px

}

.form-contact .btn-site {

    margin: 0

}

.icon {

    background-size: 100% 100% !important;

    display: block;

    width: 17px;

    height: 17px;

    position: absolute;

    top: 15px;

    left: 12px;

}

.icon-user {

    background: url(../images/icon-user.svg)

}

.icon-phone {

    background: url(../images/icon-phone.svg)

}

.icon-mail {

    background: url(../images/icon-mail.svg)

}

.icon-message {

    background: url(../images/icon-message.svg)

}