/* ------------------------------------------ */


/*         General & Basic Styles
 * ------------------------------------------ */

body,
html {
    height: 100%;
    scroll-behavior: smooth;
    overflow-x: clip;
}

body {
    font-family: "Alhadari-Bold";
    font-family: "NotoKufiArabic-Regular";
    background-color: #fff !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

li {
    padding: 0;
    margin: 0;
}

p {
    margin: 0;
    padding: 0;
}

.col-md-2 {
    margin: 0 !important;
    padding: 0 !important;
    width: 19.900%;
}

a {
    text-decoration: none !important;
    outline: none;
}

a:hover,
a:active,
a:focus {
    outline: 0;
}

.container-fluid {
    margin-top: 10px;
    margin-left: 7px;
}

.center-block {
    float: none;
}

.background-cover {
    background-size: cover !important;
}

input,
textarea,
button,
select {
    outline: none;
}

input[type="number"] {
    -moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.Owl {
    direction: rtl;
}

@font-face {
    font-family: "NotoKufiArabic-Regular";
    src: url(../webfonts/NotoKufiArabic-Regular.ttf);
}

@font-face {
    font-family: "NotoKufiArabic-Bold";
    src: url(../webfonts/NotoKufiArabic-Bold.ttf);
}

@font-face {
    font-family: "Alhadari-Bold";
    src: url(../webfonts/Alhadari-Bold.ttf);
}

* {
    font-family: "Alhadari-Bold";
    font-family: "NotoKufiArabic-Regular";
    font-family: "NotoKufiArabic-Bold";
}

@-webkit-keyframes mymove {
    50% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes mymove {
    50% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes scroll {
    100% {
        background-position: 0px -3000px;
    }
}

@keyframes scroll {
    100% {
        background-position: 0px -3000px;
    }
}

@media (prefers-reduced-motion) {
    .Services {
        -webkit-animation: scroll 200s linear infinite;
        animation: scroll 200s linear infinite;
    }
}

body {
    margin: 0;
    line-height: 1.4;
    background: #E1E1E1;
}


/**************************************************
 *******************  Drop Down **********************
  ***************************************************/

.dropdown {
    position: relative;
    display: inline-block;
    height: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.dropdown .dropdown-content {
    display: none;
    position: absolute;
    min-width: 160px;
    -webkit-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    top: 50px;
    right: -57px;
    border-radius: 0 0 20px 20px;
    font-size: 31px;
    color: #fff;
    list-style: none;
}

.dropdown .dropdown-content li {
    position: relative;
    border-bottom: 1px solid #ffffff8f;
    width: 100%;
}

.dropdown .dropdown-content li a {
    color: #fff;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    z-index: 999;
    position: relative;
    font-size: 12px;
}

.dropdown .dropdown-content li:hover {
    background-color: #005BBB;
    border-radius: 0;
}

.dropdown .dropdown-content::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: #005bbb;
    opacity: 0.502;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    z-index: -1;
}

.dropdown-content li:hover:last-child {
    border-radius: 0 0 20px 20px;
}

.dropdown-content li:last-child {
    border: none;
}

.dropdown:hover .dropdown-content {
    display: block;
}


/**************************************************
 *******************  Menu Mob **********************
  ***************************************************/

.window {
    display: none;
}

.window .menuMop {
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    height: 50px;
    width: 100%;
    background: #005bbba6;
    overflow: hidden;
    -webkit-transition: all 0.5s ease-out, background 1s ease-out;
    transition: all 0.5s ease-out, background 1s ease-out;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
    z-index: 99;
}

.window .menuMop .burger-container {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 50px;
    cursor: pointer;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.window .menuMop .burger-container #burger {
    position: absolute;
    top: 10px;
    right: 16px;
}

.window .menuMop .burger-container #burger i {
    font-size: 30px;
    color: #fff;
}

.window .menuMop .burger-container #burger .bar {
    width: 100%;
    height: 1px;
    display: block;
    position: relative;
    background: #FFF;
    -webkit-transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

.window .menuMop .burger-container #burger .bar.topBar {
    -webkit-transform: translateY(0px) rotate(0deg);
    transform: translateY(0px) rotate(0deg);
}

.window .menuMop .burger-container #burger .bar.btmBar {
    -webkit-transform: translateY(6px) rotate(0deg);
    transform: translateY(6px) rotate(0deg);
}

.window .menuMop .icon {
    display: inline-block;
    position: absolute;
    height: 100%;
    line-height: 50px;
    width: 50px;
    height: 50px;
    text-align: center;
    color: #FFF;
    font-size: 22px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.window .menuMop.icon-bag {
    right: 0;
    top: 0;
    left: auto;
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    transition: -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    -webkit-transition-delay: 0.65s;
    transition-delay: 0.65s;
}

.window .menuMop ul.menu {
    position: relative;
    display: block;
    padding: 0px 48px 0;
    list-style: none;
    text-align: center;
}

.window .menuMop ul.menu li.menu-item {
    border-bottom: 1px solid #FFF;
    margin-top: 5px;
    -webkit-transform: scale(1.15) translateY(-30px);
    transform: scale(1.15) translateY(-30px);
    opacity: 0;
    -webkit-transition: opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    transition: opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    -webkit-transition-delay: 0.49s;
    transition-delay: 0.49s;
    -webkit-transition-delay: 0.42s;
    transition-delay: 0.42s;
    -webkit-transition-delay: 0.35s;
    transition-delay: 0.35s;
    -webkit-transition-delay: 0.28s;
    transition-delay: 0.28s;
    -webkit-transition-delay: 0.21s;
    transition-delay: 0.21s;
    -webkit-transition-delay: 0.14s;
    transition-delay: 0.14s;
    -webkit-transition-delay: 0.07s;
    transition-delay: 0.07s;
}

.window .menuMop ul.menu a {
    display: block;
    position: relative;
    color: #FFF;
    font-family: "NotoKufiArabic-Regular";
    font-weight: 100;
    text-decoration: none;
    font-size: 22px;
    line-height: 2.35;
    font-weight: 200;
    width: 100%;
}

.window .menuMop.menu-opened {
    height: 100%;
    background-color: #026DDD;
    -webkit-transition: all 0.3s ease-in, background 0.5s ease-in;
    transition: all 0.3s ease-in, background 0.5s ease-in;
    -webkit-transition-delay: 0.25s;
    transition-delay: 0.25s;
}

.menuMop.menu-opened ul.menu img,
.menuMop ul.menu img {
    width: 100px;
    padding-bottom: 20px;
}

.window .menuMop .burger-container #burger .bar {
    -webkit-transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.window .menuMop .burger-container.topBar {
    -webkit-transform: translateY(4px) rotate(45deg);
    transform: translateY(4px) rotate(45deg);
}

.window .menuMop .burger-container.btmBar {
    -webkit-transform: translateY(3px) rotate(-45deg);
    transform: translateY(3px) rotate(-45deg);
}

.window .menuMop ul.menu {
    -webkit-transition-delay: 0.27s;
    transition-delay: 0.27s;
    -webkit-transition-delay: 0.34s;
    transition-delay: 0.34s;
    -webkit-transition-delay: 0.41s;
    transition-delay: 0.41s;
    -webkit-transition-delay: 0.48s;
    transition-delay: 0.48s;
    -webkit-transition-delay: 0.55s;
    transition-delay: 0.55s;
    -webkit-transition-delay: 0.62s;
    transition-delay: 0.62s;
    -webkit-transition-delay: 0.69s;
    transition-delay: 0.69s;
}

.window .menuMop ul.menu li.menu-item {
    -webkit-transform: scale(1) translateY(0px);
    transform: scale(1) translateY(0px);
    opacity: 1;
}

.window .menuMop .icon.icon-bag {
    -webkit-transform: translateX(75px);
    transform: translateX(75px);
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

.window .content {
    font-family: 'Ek Mukta', sans-serif;
    padding: 67px 4% 0;
    text-align: justify;
    overflow: scroll;
    max-height: 100%;
}

.window .content::-webkit-scrollbar {
    display: none;
}

.window .content h2 {
    margin-bottom: 0px;
    letter-spacing: 1px;
}

.window .content img {
    width: 95%;
    position: relative;
    display: block;
    margin: 75px auto 75px;
}

.window .content:nth-of-type(2) {
    margin: 75px auto;
}

.window .menu .dropDown {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.window .menu .dropDown .custom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.window .menu .dropDown i {
    position: absolute;
    left: 15px;
    color: #fff;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.window .menu .dropDown i.rotate {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
}

.window .menu .dropDown .dropDown1 {
    display: none;
}

.window .menu .dropDown .dropDown1 {
    position: relative;
    width: 100%;
    height: 100%;
    margin-top: 34px;
}

.window .menu .dropDown .dropDown1 .menu-item {
    margin-top: 30px;
    -webkit-transform: scale(1.15) translateY(-30px);
    transform: scale(1.15) translateY(-30px);
    -webkit-transition: opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    transition: opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    -webkit-transition-delay: 0.49s;
    transition-delay: 0.49s;
    -webkit-transition-delay: 0.42s;
    transition-delay: 0.42s;
    -webkit-transition-delay: 0.35s;
    transition-delay: 0.35s;
    -webkit-transition-delay: 0.28s;
    transition-delay: 0.28s;
    -webkit-transition-delay: 0.21s;
    transition-delay: 0.21s;
    -webkit-transition-delay: 0.14s;
    transition-delay: 0.14s;
    -webkit-transition-delay: 0.07s;
    transition-delay: 0.07s;
}

.window .menu .dropDown .dropDown1 .menu-item li a {
    font-size: 15px;
}


/**************************************************
 *******************  TopSlider  **********************
  ***************************************************/

.Slider {
    position: relative;
    z-index: 1;
}

.Slider .bgSlider .item .imgBg {
    position: absolute;
    right: 0;
    top: 0;
    min-height: 100%;
    width: 100%;
    height: 100%;
    z-index: -2;
    max-width: none;
    background-color: rgba(28, 95, 181, 0.2);
}

.Slider .bgSlider .item .sliderDetails {
    position: absolute;
    text-align: center;
    height: 997px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.Slider .bgSlider .item .sliderDetails .details {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 150px;
    margin-top: 95px;
}

.Slider .bgSlider .item .sliderDetails .details .mask {
    width: 100% !important;
    max-width: 481px !important;
    position: relative;
}

.Slider .bgSlider .item .sliderDetails .details .Title {
    font-size: 45px;
    color: #005BBB;
    position: absolute;
    top: 40%;
}

.Slider .bgSlider .item .sliderDetails .details .Title::before {
    content: "";
    position: absolute;
    background-color: #FFD500;
    width: 200px;
    height: 70px;
    z-index: -1;
    right: -6px;
    top: -5px;
}

.Slider .bgSlider .item .sliderDetails .details .Title span {
    color: #fff;
}

.Slider .bgSlider .item .sliderDetails .More {
    margin-top: 70px;
}

.Slider .bgSlider .item .sliderDetails .More a {
    display: inline-block;
    width: 100px;
    height: 40px;
    line-height: 39px;
    color: #fff;
    border: 2px solid #FFD500;
    text-align: center;
    border-radius: 10px;
    margin-left: 30px;
    font-size: 16px;
    -webkit-transition: all 700ms;
    transition: all 700ms;
}

.Slider .bgSlider .item .sliderDetails .More a:hover {
    background-color: #FFD500;
    -webkit-transition: all 700ms;
    transition: all 700ms;
}

.Slider .bgSlider .item .sliderDetails .desc {
    color: #fff;
    font-size: 18px;
    line-height: 45px;
}

.Slider .bgSlider .item .sliderDetails .desc span {
    color: #005BBB;
}

.Slider .bgSlider .item::before {
    content: "";
    background-color: rgba(28, 95, 181, 0.2);
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.Slider .owl-next,
.Slider .owl-prev {
    position: absolute;
    top: 115%;
    display: block;
}

.Slider .owl-next {
    left: 40%;
}

.Slider .owl-prev {
    right: 40%;
}


/**************************************************
 *   ****************** Top Bar**********************
 *   **************************************************/

.bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    position: absolute;
    top: 0;
    z-index: 3;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    width: 100%;
    height: auto;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: end;
    color: #FFF;
}

.bar::before {
    content: "";
    background-color: #005bbb;
    opacity: 0.502;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
}

.bar ul {
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-box-pack: right;
    -ms-flex-pack: right;
    justify-content: right;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.bar ul li {
    padding-left: 20px;
}

.bar ul li a {
    color: #fff;
    font-size: 16px;
}

.bar i {
    font-size: 20px;
}

.bar .social-media {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px 0;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-family: "Alhadari-Bold";
}

.bar .social-media .connect-us {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    font-size: 15px;
    z-index: 1;
}

.bar .social-media .connect-us .email a,
.bar .social-media .connect-us .phone a {
    color: #FFF;
    font-family: "Alhadari-Bold";
}

.bar .social-media .connect-us .email i,
.bar .social-media .connect-us .phone i {
    padding-right: 10px;
}

.bar .social-media .connect-us .email {
    margin-right: 20px;
}

.bar .social-media ul .dropdown {
    position: relative;
    display: inline-block;
    height: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.bar .social-media ul .dropdown .dropdown-content {
    display: none;
    position: absolute;
    -webkit-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    top: 46px;
    right: -25px;
    min-width: auto;
    border-radius: 0 0 20px 20px;
    font-size: 31px;
    color: #fff;
    list-style: none;
    text-align: center;
}

.bar .social-media ul .dropdown .dropdown-content li {
    position: relative;
    border-bottom: 1px solid #ffffff8f;
    width: 100%;
    padding: 0;
}

.bar .social-media ul .dropdown .dropdown-content li a {
    color: #fff;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    z-index: 999;
    position: relative;
    font-size: 12px;
}

.bar .social-media ul .dropdown .dropdown-content li:hover {
    background-color: #005BBB;
    border-radius: 0;
}

.bar .social-media ul .dropdown .dropdown-content::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: #005bbb;
    opacity: 0.502;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    z-index: -1;
}

.bar .social-media ul .dropdown .dropdown-content li:hover:last-child {
    border-radius: 0 0 20px 20px;
}

.bar .social-media ul .dropdown .dropdown-content li:last-child {
    border: none;
}

.bar .social-media ul .dropdown:hover .dropdown-content {
    display: block;
}


/**************************************************
 *   ******************* Header **********************
 *   **************************************************/

.header {
    position: absolute;
    top: 100px;
    z-index: 2;
    text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
}

.header::before {
    content: "";
    position: absolute;
    bottom: -15px;
    background-color: #ffffff4f;
    width: 100%;
    height: 1px;
    right: 0;
}

.header .openMenu {
    display: none;
}

.header .nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
}

.header .nav ul {
    width: 400px;
    height: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0 30px;
    position: relative;
    z-index: 1;
}

.header .nav ul::before {
    content: "";
    position: absolute;
    background-color: #005bbb;
    opacity: 0.502;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    border: 1px solid transparent;
    border-radius: 50px;
}

.header .nav ul li a {
    color: #FFF;
}

.header .nav .logo-center {
    margin: 0 100px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.header .nav .logo-center img {
    width: 150px;
}


/**************************************************
 *******************  Scroll Down / Dots  **********************
  ***************************************************/

.stage {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 55px;
}

.stage .scroll-down {
    z-index: 999;
    position: absolute;
    margin-right: auto;
    left: 50%;
    transform: translateX(-50%);
    background-image: url(../images/scroll-down.png);
    background-repeat: no-repeat;
    bottom: 70px;
    -ms-flex-item-align: end;
    align-self: flex-end;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    height: 72px;
    margin: 0 auto 0 auto;
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    width: 24px;
    cursor: pointer;
}

.stage .bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

@-webkit-keyframes bounce {
    50% {
        -webkit-transform: translateY(-50%, -20px);
        transform: translate(-50%, -20px);
    }
}

@keyframes bounce {
    50% {
        -webkit-transform: translateY(-50%, -20px);
        transform: translate(-50%, -20px);
    }
}

.owl-theme .owl-dots {
    position: absolute;
    bottom: 4px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-bottom: 15px;
}

.owl-theme .owl-dots .owl-dot span {
    width: 16px;
    height: 16px;
    margin: 5px 7px;
    background: #ffff;
    display: block;
    -webkit-backface-visibility: visible;
    -webkit-transition: opacity .2s ease;
    transition: opacity .2s ease;
    border-radius: 30px;
}

.owl-theme .owl-dots .active span {
    background: #FFD500;
}


/**************************************************
 *   ******************* Services **********************
 *   **************************************************/

.TopSection {
    background-image: url(../images/bgServ.png);
    background-size: cover;
    padding-top: 60px;
    padding-bottom: 85px;
    background-repeat: repeat;
    -webkit-animation: scroll 100s linear infinite;
    animation: scroll 100s linear infinite;
}

.TopSection .card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
}

.TopSection .card::before {
    content: "";
    position: absolute;
    background-color: #FFD500;
    width: 50%;
    height: 3px;
    bottom: 0;
    right: 25%;
}

.TopSection .card h3 {
    font-size: 25px;
    font-family: "NotoKufiArabic-Bold";
    text-align: center;
    color: #005BBB;
    padding-bottom: 50px;
}

.TopSection .card h3 span {
    color: #FFD500;
}

.TopSection .card p {
    text-align: center;
    color: #005BBB;
    font-size: 18px;
    font-family: "NotoKufiArabic-Regular";
    padding-bottom: 50px;
    line-height: 1.8;
}

.TopSection .Services {
    padding-top: 50px;
    -webkit-animation: scroll 100s linear infinite;
    animation: scroll 100s linear infinite;
}

.TopSection .Services .mask {
    background-image: url('/images/mask.png');
    width: 179px;
    height: 200px;
    position: relative;
}

.TopSection .Services .mask .services-img {
    position: absolute;
    top: 40%;
    background-color: #005BBB;
    width: fit-content;
    padding: 20px;
    border-radius: 50%;
    transform: translate(-50%, -40%);
    border: 8px solid #FFD500;
    left: 50%;
}

.TopSection .Services .mask .services-img img {
    width: 50px;
    height: 50px;
}

.TopSection .Services .mask .services-title {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-58%);
    font-size: 20px;
}

.TopSection .Services .mask .services-img img:hover {
    -webkit-animation: mymove 9s infinite;
    animation: mymove 9s infinite;
}

.Services .owl-stage {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

.title-container {
    width: 100%;
    text-align: center;
    margin-bottom: 95px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.title-container .Title {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    font-size: 36px;
    color: #005BBB;
    text-align: center;
    position: relative;
    display: initial;
}

.title-container .Title::before {
    width: 100%;
    height: 5px;
    content: "";
    background-color: #FFD500;
    position: absolute;
    bottom: -17px;
    right: 0;
}

.title-container .Title::after {
    content: "";
    width: 5px;
    height: 5px;
    -webkit-transform: skew(20deg);
    transform: skew(-20deg);
    background: white;
    position: absolute;
    bottom: -17px;
    left: 40%;
}

.title-container .custom {
    color: #fff;
}

.title-container .custom::after {
    content: "";
    width: 10px;
    height: 6px;
    -webkit-transform: skew(20deg);
    transform: skew(-20deg);
    background: #75A4D3;
    position: absolute;
    bottom: -17px;
    left: 40%;
}


/**************************************************
 *   ******************* Our Goals **********************
 *   **************************************************/

.Goals .OurGoals {
    position: relative;
}

.Goals .OurGoals .bg {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: -1;
    overflow: hidden;
}

.Goals .OurGoals .bg img {
    background-size: cover;
    min-width: 100%;
}

.Goals .OurGoals .top {
    position: absolute;
    top: 20%;
    right: 32%;
}

.Goals .OurGoals .top .logo {
    position: relative;
}

.Goals .OurGoals .top .logo img {
    padding-right: 45px;
    max-width: 600px;
    width: 100%;
}

.Goals .OurGoals .top .top-right {
    position: absolute;
    top: -26px;
    right: -148px;
    width: 200px;
    height: 53px;
    color: #005BBB;
    border: 1px solid transparent;
    background-color: #fff;
    border-radius: 30px;
}

.Goals .OurGoals .top .top-right:hover {
    border: 1px solid #005BBB;
    z-index: 1;
}

.Goals .OurGoals .top .top-right:hover .comment,
.Goals .OurGoals .top .top-left:hover .comment,
.Goals .OurGoals .top .down-right:hover .comment,
.Goals .OurGoals .top .down-left:hover .comment {
    opacity: 1;
    position: absolute;
    background-color: #fff;
    background-size: cover;
    width: 270px;
    height: auto;
    border-radius: 15px;
    margin-top: 20px;
    right: -35px;
    -webkit-transition: all 700ms;
    transition: all 700ms;
}

.Goals .OurGoals .top .top-right .comment::before,
.Goals .OurGoals .top .top-left .comment::before,
.Goals .OurGoals .top .down-left .comment::before,
.Goals .OurGoals .top .down-right .comment::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #fff;
    top: -15px;
    right: 50%;
    transform: translate(50%);
}

.Goals .OurGoals .top .top-right .comment,
.Goals .OurGoals .top .top-left .comment,
.Goals .OurGoals .top .down-left .comment,
.Goals .OurGoals .top .down-right .comment {
    opacity: 0;
}

.Goals .OurGoals .top .top-right .comment p,
.Goals .OurGoals .top .top-left .comment p,
.Goals .OurGoals .top .down-right .comment p,
.Goals .OurGoals .top .down-left .comment p {
    color: #000;
    font-size: 12px;
    font-family: "NotoKufiArabic-Bold";
    line-height: 2.3;
    padding: 20px;
}

.Goals .OurGoals .top .top-right span {
    border: 2px dashed #005BBB;
    width: 187px;
    height: 43px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 30px;
    margin-top: 4px;
    margin-right: 5px;
    font-size: 18px;
    font-family: "NotoKufiArabic-Bold";
    -webkit-transition: all 700ms;
    transition: all 700ms;
}

.Goals .OurGoals .top .top-right span:hover {
    background-color: #005BBB;
    color: #fff;
    -webkit-transition: all 700ms;
    transition: all 700ms;
}

.Goals .OurGoals .top .down-right {
    position: absolute;
    width: 220px;
    height: 53px;
    color: #005BBB;
    border: 1px solid transparent;
    background-color: #fff;
    border-radius: 30px;
    right: -174px;
    bottom: -25px;
    font-size: 18px;
}

.Goals .OurGoals .top .down-right:hover {
    border: 1px solid #005BBB;
    z-index: 1;
}

.Goals .OurGoals .top .down-right:hover .comment {
    opacity: 1;
    position: absolute;
    background-color: #fff;
    background-size: cover;
    width: 270px;
    height: auto;
    border-radius: 15px;
    margin-top: 20px;
    right: -35px;
    -webkit-transition: all 700ms;
    transition: all 700ms;
}


/* 
.Goals .OurGoals .top .down-right .comment {
    opacity: 0;
}

.Goals .OurGoals .top .down-right .comment p {
    color: #000;
    font-size: 12px;
    font-family: "NotoKufiArabic-Bold";
    position: absolute;
    top: 30px;
    right: 11px;
    line-height: 2.3;
} */

.Goals .OurGoals .top .down-right span {
    border: 2px dashed #005BBB;
    /* width: 205px; */
    height: 41px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 30px;
    margin-right: 7px;
    margin-top: 5px;
    font-size: 18px;
    font-family: "NotoKufiArabic-Bold";
    -webkit-transition: all 700ms;
    transition: all 700ms;
}

.Goals .OurGoals .top .down-right span:hover {
    background-color: #005BBB;
    color: #fff;
    -webkit-transition: all 700ms;
    transition: all 700ms;
}

.Goals .OurGoals .top .top-left {
    position: absolute;
    top: -25px;
    left: -180px;
    width: 200px;
    height: 53px;
    color: #005BBB;
    border: 1px solid transparent;
    background-color: #fff;
    border-radius: 30px;
}

.Goals .OurGoals .top .top-left:hover {
    border: 1px solid #005BBB;
    z-index: 1;
}


/* 
.Goals .OurGoals .top .top-left:hover .comment {
    opacity: 1;
    position: absolute;
    background-color: #fff;
    background-size: cover;
    width: 270px;
    height: auto;
    border-radius: 15px;
    margin-top: 20px;
    right: -35px;
    -webkit-transition: all 700ms;
    transition: all 700ms;
}

.Goals .OurGoals .top .down-right .comment .Goals .OurGoals .top .top-left .comment {
    opacity: 0;
}

.Goals .OurGoals .top .top-left .comment p {
    color: #000;
    font-size: 12px;
    font-family: "NotoKufiArabic-Bold";
    position: absolute;
    top: 30px;
    right: 11px;
    line-height: 2.3;
} */

.Goals .OurGoals .top .top-left span {
    border: 2px dashed #005BBB;
    width: 187px;
    height: 43px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 30px;
    margin-top: 4px;
    margin-right: 5px;
    font-size: 18px;
    font-family: "NotoKufiArabic-Bold";
    -webkit-transition: all 700ms;
    transition: all 700ms;
}

.Goals .OurGoals .top .top-left span:hover {
    background-color: #005BBB;
    color: #fff;
    -webkit-transition: all 700ms;
    transition: all 700ms;
}

.Goals .OurGoals .top .down-left {
    position: absolute;
    bottom: -25px;
    left: -180px;
    width: 200px;
    height: 53px;
    color: #005BBB;
    border: 1px solid transparent;
    background-color: #fff;
    border-radius: 30px;
}

.Goals .OurGoals .top .down-left:hover {
    border: 1px solid #005BBB;
    z-index: 1;
}


/* 
.Goals .OurGoals .top .down-left:hover .comment {
    opacity: 1;
    position: relative;
    background-color: #fff;
    background-size: cover;
    width: 270px;
    height: auto;
    border-radius: 15px;
    margin-top: 20px;
    right: -35px;
    -webkit-transition: all 700ms;
    transition: all 700ms;
}

.Goals .OurGoals .top .down-left .comment {
    opacity: 0;
}

.Goals .OurGoals .top .down-left:hover .comment {
    opacity: 1;
    position: relative;
    background-color: #fff;
    background-size: cover;
    width: 270px;
    height: auto;
    border-radius: 15px;
    margin-top: 20px;
    right: -35px;
    -webkit-transition: all 700ms;
    transition: all 700ms;
}

.Goals .OurGoals .top .down-left .comment p {
    color: #000;
    font-size: 12px;
    font-family: "NotoKufiArabic-Bold";
    position: absolute;
    top: 30px;
    right: 11px;
    line-height: 2.3;
} */

.Goals .OurGoals .top .down-left span {
    border: 2px dashed #005BBB;
    width: 187px;
    height: 43px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 30px;
    margin-top: 4px;
    margin-right: 5px;
    font-size: 18px;
    font-family: "NotoKufiArabic-Bold";
    -webkit-transition: all 700ms;
    transition: all 700ms;
}

.Goals .OurGoals .top .down-left span:hover {
    background-color: #005BBB;
    color: #fff;
    -webkit-transition: all 700ms;
    transition: all 700ms;
}


/**************************************************
 *   ******************* Partner **********************
 *   **************************************************/

.Partner {
    background-image: url(../images/Partner.png);
    background-size: auto;
    background-repeat: no-repeat;
    height: 721px;
    width: 100%;
    background-position: bottom;
    padding-top: 45px;
}

.Partner .PartnerSlider {
    margin-top: 45px;
}

.Partner .PartnerSlider .Item {
    position: relative;
    max-width: 435px;
    width: 100%;
}

.Partner .PartnerSlider .Item::before {
    content: "";
    position: absolute;
    display: block;
    background-color: #4084cc;
    opacity: 0.7;
    width: 100%;
    height: 93%;
    z-index: -1;
    border-radius: 23px;
}

.Partner .PartnerSlider .Item .mask {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 10px;
}

.Partner .PartnerSlider .Item .mask i {
    font-size: 35px;
    color: #FFF;
    -webkit-transition: 2.5s;
    transition: 2.5s;
}

.Partner .PartnerSlider .Item .mask .fa-quote-left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: left;
    -ms-flex-pack: left;
    justify-content: left;
}

.Partner .PartnerSlider .Item .mask p {
    padding: 20px 0;
    color: #FFF;
    font-family: "NotoKufiArabic-Bold";
    font-size: 12px;
    text-align: center;
    line-height: 2.5;
}

.Partner .PartnerSlider .Item .mask .logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 70px;
}

.Partner .PartnerSlider .Item .mask .logo img {
    width: auto;
    height: 100%;
    max-width: 120px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    padding-top: 20px;
}

.Partner .PartnerSlider .Item .mask .logo::before {
    content: "";
    position: absolute;
    background-color: #ffff;
    border-radius: 50%;
    width: 135px;
    height: 135px;
    display: block;
    z-index: -1;
}


/**************************************************
 *   ******************* footer **********************
 *   **************************************************/

.footer {
    background-image: url(../images/footer.png);
    background-size: cover;
    position: relative;
    width: 100%;
    height: auto;
    padding-top: 50px;
}

.footer::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    background-color: #005bbb;
    opacity: 0.502;
    width: 100%;
    height: 100%;
}

.footer .contentUs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    color: #fff;
    padding-bottom: 90px;
}

.footer .contentUs .mob a,
.footer .contentUs .Email a {
    font-family: "Alhadari-Bold";
}

.footer .contentUs .mob,
.footer .contentUs .Email,
.footer .contentUs .map {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
}

.footer .contentUs .mob .phone,
.footer .contentUs .mob .email,
.footer .contentUs .mob .place,
.footer .contentUs .Email .phone,
.footer .contentUs .Email .email,
.footer .contentUs .Email .place,
.footer .contentUs .map .phone,
.footer .contentUs .map .email,
.footer .contentUs .map .place {
    position: relative;
    width: 300px;
    background-color: #f0d70d70;
    height: 90px;
    border-radius: 42px;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: end;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #fff;
    padding-left: 10px;
    font-family: "Alhadari-Bold";
}

.footer .contentUs .mob .phone a,
.footer .contentUs .mob .email a,
.footer .contentUs .mob .place a,
.footer .contentUs .Email .phone a,
.footer .contentUs .Email .email a,
.footer .contentUs .Email .place a,
.footer .contentUs .map .phone a,
.footer .contentUs .map .email a,
.footer .contentUs .map .place a {
    color: #fff;
}

.footer .contentUs .mob .place,
.footer .contentUs .Email .place,
.footer .contentUs .map .place {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-right: 57px;
    justify-content: center;
}

.footer .contentUs .mob .place p,
.footer .contentUs .Email .place p,
.footer .contentUs .map .place p {
    font-size: 12px;
    margin-right: 50px;
    line-height: 1.8;
}

.footer .contentUs .mob .logo,
.footer .contentUs .Email .logo,
.footer .contentUs .map .logo {
    background-color: #FFD5008F;
    width: 90px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    height: 90px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 50%;
}

.footer .down-footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #005BBB;
    background-size: cover;
    width: 100%;
    height: auto;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-item-align: center;
    align-self: center;
    -ms-flex-line-pack: center;
    align-content: center;
    padding-top: 40px;
}

.footer .down-footer .desc {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 18px;
    padding-bottom: 30px;
}

.footer .down-footer .desc span {
    font-family: "Alhadari-Bold";
}

.footer .down-footer .social-media {
    width: 200px;
    padding-bottom: 10px;
}

.footer .down-footer .social-media ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.footer .down-footer .social-media ul i {
    color: #fff;
    font-size: 20px;
}

.footer .down-footer .desc,
.footer .down-footer .social-media {
    color: #fff;
    z-index: 1;
}


/**************************************************
 *   ******************* Hosting **********************
 *   **************************************************/

.Slider .container {
    z-index: 99999;
    display: flex;
    flex-direction: column;
}

.Slider .sliderHost,
.Slider .slidercontact,
.Slider .sliderweb,
.Slider .sliderProject {
    position: absolute;
    text-align: center;
    height: 1052px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.Slider .sliderHost .detailsHost,
.Slider .sliderHost .detailsContact,
.Slider .sliderHost .detailsweb,
.Slider .sliderHost .detailsProject,
.Slider .slidercontact .detailsHost,
.Slider .slidercontact .detailsContact,
.Slider .slidercontact .detailsweb,
.Slider .slidercontact .detailsProject,
.Slider .sliderweb .detailsHost,
.Slider .sliderweb .detailsContact,
.Slider .sliderweb .detailsweb,
.Slider .sliderweb .detailsProject,
.Slider .sliderProject .detailsHost,
.Slider .sliderProject .detailsContact,
.Slider .sliderProject .detailsweb,
.Slider .sliderProject .detailsProject {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 10px;
}

.Slider .sliderHost .detailsHost img,
.Slider .sliderHost .detailsContact img,
.Slider .sliderHost .detailsweb img,
.Slider .sliderHost .detailsProject img,
.Slider .slidercontact .detailsHost img,
.Slider .slidercontact .detailsContact img,
.Slider .slidercontact .detailsweb img,
.Slider .slidercontact .detailsProject img,
.Slider .sliderweb .detailsHost img,
.Slider .sliderweb .detailsContact img,
.Slider .sliderweb .detailsweb img,
.Slider .sliderweb .detailsProject img,
.Slider .sliderProject .detailsHost img,
.Slider .sliderProject .detailsContact img,
.Slider .sliderProject .detailsweb img,
.Slider .sliderProject .detailsProject img {
    width: auto;
    height: auto;
    padding-bottom: 15px;
}

.Slider .sliderHost .detailsHost .Title,
.Slider .sliderHost .detailsContact .Title,
.Slider .sliderHost .detailsweb .Title,
.Slider .sliderHost .detailsProject .Title,
.Slider .slidercontact .detailsHost .Title,
.Slider .slidercontact .detailsContact .Title,
.Slider .slidercontact .detailsweb .Title,
.Slider .slidercontact .detailsProject .Title,
.Slider .sliderweb .detailsHost .Title,
.Slider .sliderweb .detailsContact .Title,
.Slider .sliderweb .detailsweb .Title,
.Slider .sliderweb .detailsProject .Title,
.Slider .sliderProject .detailsHost .Title,
.Slider .sliderProject .detailsContact .Title,
.Slider .sliderProject .detailsweb .Title,
.Slider .sliderProject .detailsProject .Title {
    font-size: 20px;
    color: #fff;
    background: #FFD5008C;
    padding: 24px;
    margin-bottom: 33px;
}

.Slider .sliderHost .hostDesc,
.Slider .sliderHost .ContactDesc,
.Slider .slidercontact .hostDesc,
.Slider .slidercontact .ContactDesc,
.Slider .sliderweb .hostDesc,
.Slider .sliderweb .ContactDesc,
.Slider .sliderProject .hostDesc,
.Slider .sliderProject .ContactDesc {
    text-align: center;
}

.Slider .sliderHost .hostDesc p,
.Slider .sliderHost .ContactDesc p,
.Slider .slidercontact .hostDesc p,
.Slider .slidercontact .ContactDesc p,
.Slider .sliderweb .hostDesc p,
.Slider .sliderweb .ContactDesc p,
.Slider .sliderProject .hostDesc p,
.Slider .sliderProject .ContactDesc p {
    color: #fff;
    font-size: 18px;
    line-height: 41.2px;
}

.Slider .sliderHost .hostDesc p span,
.Slider .sliderHost .ContactDesc p span,
.Slider .slidercontact .hostDesc p span,
.Slider .slidercontact .ContactDesc p span,
.Slider .sliderweb .hostDesc p span,
.Slider .sliderweb .ContactDesc p span,
.Slider .sliderProject .hostDesc p span,
.Slider .sliderProject .ContactDesc p span {
    display: block;
    color: #fff;
    padding-bottom: 30px;
}

.Slider .sliderHost::before,
.Slider .slidercontact::before,
.Slider .sliderweb::before,
.Slider .sliderProject::before {
    content: "";
    background-color: rgba(28, 95, 181, 0.2);
    height: 1108px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}


/**************************************************
 *   ******************* Plan **********************
 *   **************************************************/

.SliderPlan {
    display: none;
}

.plan,
.SliderPlan {
    width: 100%;
    height: auto;
    padding: 100px;
    background-image: url(../images/bgServ.png);
    background-repeat: repeat;
    -webkit-animation: scroll 100s linear infinite;
    animation: scroll 100s linear infinite;
}

.plan .item,
.SliderPlan .item {
    width: 100%;
    height: auto;
    -webkit-box-shadow: 0px 1px 14px 7px rgba(0, 0, 0, 0.16);
    box-shadow: 0px 1px 14px 7px rgba(0, 0, 0, 0.16);
    background-color: #fff;
    border-radius: 15px;
    margin-left: 30px;
    margin-bottom: 50px;
}

.plan .item:hover .Title,
.SliderPlan .item:hover .Title {
    background-color: #fff;
    border: 2px solid #005BBB;
    -webkit-transition: all 0.007s;
    transition: all 0.007s;
}

.plan .item:hover .Title h3,
.plan .item:hover .Title p,
.SliderPlan .item:hover .Title h3,
.SliderPlan .item:hover .Title p {
    color: #005BBB;
}

.plan .item:hover .price,
.SliderPlan .item:hover .price {
    background-color: #005BBB;
    color: #fff;
    -webkit-transition: all 700ms;
    transition: all 700ms;
}

.plan .item:hover .buy,
.SliderPlan .item:hover .buy {
    background-color: #fff;
    color: #005BBB;
    border: 1px solid #005BBB;
    -webkit-transition: all 700ms;
    transition: all 700ms;
}

.plan .item .Title,
.SliderPlan .item .Title {
    background-color: #005BBB;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 50px 70px 70px;
    position: relative;
    border-radius: 15px;
}

.plan .item .Title h3,
.plan .item .Title p,
.SliderPlan .item .Title h3,
.SliderPlan .item .Title p {
    color: #fff;
    font-family: "NotoKufiArabic-Regular";
}

.plan .item .Title h3,
.SliderPlan .item .Title h3 {
    font-size: 24px;
    padding-top: 10px;
    padding-bottom: 12px;
}

.plan .item .Title p,
.SliderPlan .item .Title p {
    font-size: 20px;
}

.plan .item .price,
.SliderPlan .item .price {
    position: absolute;
    width: 300px;
    height: 180px;
    color: #005BBB;
    right: 50%;
    transform: translatex(50%);
    background-color: #fff;
    top: 155px;
    text-align: center;
    border-radius: 10px;
    -webkit-box-shadow: 0px 1px 14px 7px rgba(0, 0, 0, 0.16);
    box-shadow: 0px 1px 14px 7px rgba(0, 0, 0, 0.16);
}

.plan .item .price span,
.SliderPlan .item .price span {
    font-size: 85px;
}

.plan .item .price p,
.SliderPlan .item .price p {
    font-size: 25px;
    font-family: "NotoKufiArabic-Regular";
}

.plan .item .size,
.SliderPlan .item .size {
    padding: 190px 30px 0 30px;
}

.plan .item .size .desc,
.SliderPlan .item .size .desc {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: relative;
    color: #005BBB;
    padding: 20px 0;
}

.plan .item .size .desc::before,
.SliderPlan .item .size .desc::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 1px;
    background-color: #005BBB;
}

.plan .item .size .desc p,
.SliderPlan .item .size .desc p {
    font-family: "NotoKufiArabic-Regular";
    font-size: 14px;
}

.plan .item .buyNow,
.SliderPlan .item .buyNow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-top: 66px;
    padding-bottom: 25px;
}

.plan .item .buyNow a,
.SliderPlan .item .buyNow a {
    color: #fff;
    font-size: 18px;
    font-family: "NotoKufiArabic-Regular";
    width: 155px;
    height: 60px;
    border-radius: 10px;
    background-color: #005BBB;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
}

.SliderPlan .item {
    margin-right: 30px;
}


/**************************************************
 *   ******************* contactCard **********************
 *   **************************************************/

.contactCard {
    background-image: url(../images/bgServ.png);
    width: 100%;
    background-repeat: repeat;
    -webkit-animation: scroll 100s linear infinite;
    animation: scroll 100s linear infinite;
    padding-top: 115px;
}

.contactCard .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 115px;
}

.contactCard .container .card {
    background-image: url(../images/contactUs.png);
    background-size: contain;
    width: 1315px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.contactCard .container .card .information {
    width: 500px;
    position: relative;
    z-index: 9;
    padding: 25px;
}

.contactCard .container .card .information .Title {
    color: #fff;
}

.contactCard .container .card .information .Title h2 {
    font-size: 32px;
    padding-bottom: 25px;
}

.contactCard .container .card .information .Title p {
    font-size: 14px;
}

.contactCard .container .card .information .contentUs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-top: 45px;
}

.contactCard .container .card .information .mob,
.contactCard .container .card .information .Email,
.contactCard .container .card .information .map {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-bottom: 30px;
}

.contactCard .container .card .information .mob img,
.contactCard .container .card .information .Email img,
.contactCard .container .card .information .map img {
    width: 35px;
    height: 35px;
}

.contactCard .container .card .information .mob a,
.contactCard .container .card .information .Email a,
.contactCard .container .card .information .map a {
    color: #fff;
    font-family: "Alhadari-Bold";
}

.contactCard .container .card .information .mob p,
.contactCard .container .card .information .Email p,
.contactCard .container .card .information .map p {
    color: #fff;
}

.contactCard .container .card .information .mob .phone,
.contactCard .container .card .information .mob .email,
.contactCard .container .card .information .mob .place,
.contactCard .container .card .information .Email .phone,
.contactCard .container .card .information .Email .email,
.contactCard .container .card .information .Email .place,
.contactCard .container .card .information .map .phone,
.contactCard .container .card .information .map .email,
.contactCard .container .card .information .map .place {
    margin-right: 20px;
    color: #fff;
}

.contactCard .container .card .social-media {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.contactCard .container .card .social-media ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.contactCard .container .card .social-media ul a {
    color: #fff;
    font-size: 35px;
}

.contactCard .container .card::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0;
    background-color: rgba(17, 97, 198, 0.32);
    border-radius: 15px;
}

.contactCard .container .card::after {
    content: "";
    position: absolute;
    width: 477px;
    height: 100%;
    right: 0;
    top: 0;
    background-color: rgba(17, 97, 198, 0.7);
    border-radius: 15px;
}

.contactCard .container .card .login {
    padding: 25px;
}

.contactCard .container .card .login form .Title {
    padding-bottom: 15px;
}

.Title h2 {
    font-size: 32px;
    color: #fff !important;
    padding-bottom: 25px;
}

.contactCard .container .card .login form .Title p {
    color: #000;
    font-size: 16px;
}

.contactCard .container .card .login form .col-sm-6 {
    padding-bottom: 45px;
}

.contactCard .container .card .login form input {
    border: 2px solid #005BBB;
    width: 100%;
    border-radius: 10px;
    color: #005BBB;
    padding: 10px;
}

.contactCard .container .card .login form .form-control {
    display: block;
    max-width: 100%;
    width: 100%;
    height: 200px !important;
    padding: 6px 12px;
    font-size: 14px;
    color: #005BBB !important;
    opacity: 1;
    background-color: #FFF;
    border: 2px solid #005bbb;
    border-radius: 0;
    font-family: "NotoKufiArabic-Bold";
    resize: inherit;
    border-radius: 10px;
    padding: 15px;
}

.contactCard .container .card .login form .send {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: end;
}

.contactCard .container .card .login form .send button {
    border: 0;
    width: 130px;
    height: 50px;
    background-color: #005BBB;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 10px;
    font-size: 18px;
    margin-left: 23px;
    margin-top: 18px;
}

textarea::-webkit-input-placeholder,
input::-webkit-input-placeholder {
    color: #005BBB !important;
    opacity: 0.5 !important;
}

textarea:-ms-input-placeholder,
input:-ms-input-placeholder {
    color: #005BBB !important;
    opacity: 0.5 !important;
}

textarea::-ms-input-placeholder,
input::-ms-input-placeholder {
    color: #005BBB !important;
    opacity: 0.5 !important;
}

textarea::placeholder,
input::placeholder {
    color: #005BBB !important;
    opacity: 0.5 !important;
}


/**************************************************
 *   ******************* Website Services **********************
 *   **************************************************/

.mainServers {
    padding-top: 100px;
    padding-bottom: 100px;
    background-image: url(../images/bgServ.png);
    background-size: cover;
    background-repeat: repeat;
    -webkit-animation: scroll 100s linear infinite;
    animation: scroll 100s linear infinite;
}

.mainServers .mask {
    height: 300px;
    margin-bottom: 40px;
}

.mainServers .mask .item1 {
    -webkit-transition: all 700ms;
    transition: all 700ms;
}

.mainServers .mask .item1 .Title {
    width: 340px;
    height: 280px;
    background-color: #005BBB;
    position: relative;
    z-index: 3;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 22px;
}

.mainServers .mask .item1 .Title::before {
    content: "";
    position: absolute;
    top: 40px;
    left: -15px;
    width: 100px;
    height: 200px;
    background-color: transparent;
    border-bottom-right-radius: 110px;
    border-top-right-radius: 110px;
    border: 20px solid #fff;
    border-left: transparent;
}

.mainServers .mask .item1 .Title h2 {
    font-size: 26px;
    line-height: 1.5;
    color: #fff;
    width: 175px;
    text-align: center;
}

.mainServers .mask .item1 .Title .desc {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    line-height: 2;
    display: none;
}

.mainServers .mask .item1 .Title .desc h2,
.mainServers .item2 .Title .desc h2 {
    font-size: 16px;
    color: #005BBB !important;
    font-family: "NotoKufiArabic-Bold";
    width: fit-content;
    display: block;
    margin-right: 15px;
    text-align: center;
}

.mainServers .mask .item1 .Title .desc p {
    font-size: 12px;
    color: #005BBB;
    font-family: "NotoKufiArabic-Regular";
    width: 200px;
    text-align: justify;
    margin: 30px 30px 10px;
}

.mainServers .mask .item1 .Title .desc .more {
    height: 40px;
    padding: 10px;
    margin: auto;
    border-radius: 5px;
    background-color: #005BBB;
    display: -webkit-box;
    display: -ms-flexbox;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.mainServers .mask .item1 .Title .desc .more a {
    font-size: 16px;
    color: #fff;
    font-family: "NotoKufiArabic-Regular";
}

.mainServers .mask .item1 .logo {
    border-radius: 110px;
    width: 300px;
    height: 200px;
    background-color: #fff;
    position: absolute;
    top: 40px;
    left: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 1;
    -webkit-box-shadow: -17px 17px 34px #bebebe;
    box-shadow: -17px 17px 34px #bebebe;
}

.mainServers .mask .item1 .logo img {
    width: 150px;
    height: 130px;
    padding-right: 21px;
    position: absolute;
    left: 63px;
}

.mainServers .item1:hover .Title {
    background-color: #fff;
    -webkit-transition: all 700ms;
    transition: all 700ms;
}

.mainServers .item1:hover .Title h2 {
    display: none;
}

.mainServers .item1:hover .Title::before {
    border-top: 20px solid #005BBB;
    border-bottom: 20px solid #005BBB;
    border-right: 20px solid #005BBB;
}

.mainServers .item1:hover .Title .desc {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: start;
    align-self: flex-start;
    align-items: flex-start;
    padding: 10px;
}

.mainServers .item1:hover .logo {
    background-color: #005BBB;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all 700ms;
    transition: all 700ms;
}

.mainServers .item2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.mainServers .item2 .Title {
    width: 315px;
    height: 280px;
    background-color: #005BBB;
    position: relative;
    z-index: 3;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 22px;
}

.mainServers .item2 .Title::before {
    content: "";
    position: absolute;
    top: 40px;
    right: -20px;
    width: 100px;
    height: 200px;
    background-color: transparent;
    border-bottom-left-radius: 110px;
    border-top-left-radius: 110px;
    border: 20px solid #fff;
    border-right: transparent;
}

.mainServers .item2 .Title h2 {
    font-size: 26px;
    line-height: 1.5;
    color: #fff;
    width: 175px;
    text-align: center;
    padding-right: 28px;
}

.mainServers .item2:hover .Title h2 {
    display: none;
}

.mainServers .item2 .Title .desc {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    line-height: 2;
    display: none;
}

.mainServers .item2 .Title .desc h2 {
    font-size: 16px;
    color: #005BBB;
    font-family: "NotoKufiArabic-Bold";
    width: fit-content;
    display: block;
    margin-right: 30px;
    text-align: center;
}

.mainServers .item2 .Title .desc p {
    font-size: 12px;
    color: #005BBB;
    font-family: "NotoKufiArabic-Regular";
    width: 200px;
    text-align: justify;
    margin: 30px 80px 10px;
}

.mainServers .item2 .Title .desc .more {
    height: 40px;
    padding: 10px;
    margin: auto;
    border-radius: 5px;
    background-color: #005BBB;
    display: -webkit-box;
    display: -ms-flexbox;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.mainServers .item2 .Title .desc .more a {
    font-size: 16px;
    color: #fff;
    font-family: "NotoKufiArabic-Regular";
}

.mainServers .item2 .logo {
    border-radius: 110px;
    width: 300px;
    height: 200px;
    background-color: #fff;
    position: absolute;
    top: 40px;
    right: 35px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 1;
    -webkit-box-shadow: 15px 17px 34px #bebebe;
    box-shadow: 15px 17px 34px #bebebe;
}

.mainServers .item2 .logo img {
    width: 150px;
    height: 130px;
    padding-left: 21px;
    position: absolute;
    right: 63px;
}

.mainServers .item2:hover .Title {
    background-color: #fff;
    -webkit-transition: all 700ms;
    transition: all 700ms;
}

.mainServers .item2:hover .Title::before {
    border-top: 20px solid #005BBB;
    border-bottom: 20px solid #005BBB;
    border-left: 20px solid #005BBB;
}

.mainServers .item2:hover .Title .desc {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: start;
    align-self: flex-start;
    align-items: flex-start;
    padding: 10px;
}

.mainServers .item2:hover .logo {
    background-color: #005BBB;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all 700ms;
    transition: all 700ms;
}


/**************************************************
 *   ******************* FormProject **********************
 *   **************************************************/

.FormProject {
    padding-top: 130px;
    padding-bottom: 100px;
    background-image: url(../images/bgServ.png);
    background-size: cover;
    background-repeat: repeat;
    -webkit-animation: scroll 100s linear infinite;
    animation: scroll 100s linear infinite;
}

.FormProject .Title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.FormProject .Title h2 {
    font-size: 32px;
    color: #005BBB;
    padding-bottom: 30px;
}

.FormProject .Title p {
    font-size: 16px;
    padding-bottom: 40px;
}

.FormProject form .container {
    border-top: 4px solid #005BBB;
    border-bottom: 4px solid #005BBB;
    padding: 50px 30px 50px 20px;
    border-radius: 4%;
    position: relative;
    border-right: 1px solid #005BBB;
    border-left: 1px solid #005BBB;
}

.FormProject form .col-md-4,
.FormProject form .col-md-6 {
    margin-bottom: 30px;
}

.FormProject form .inputStyle {
    width: 100%;
    height: 55px;
    border: 2px solid #6a6666;
    padding: 5px;
    border-radius: 5px;
    color: #000;
}

.FormProject form .selectActivity {
    width: 100%;
    z-index: 9999;
    position: relative;
}

.FormProject form .selectActivity .selectStyle {
    position: relative;
    border: 2px solid #6a6666;
    border-radius: 5px;
}

.FormProject form .selectActivity .selectStyle .value {
    color: #000;
    font-size: 11px;
    line-height: 60px;
    display: block;
    padding: 0 10px;
    cursor: pointer;
    background-color: #fff;
}

.FormProject form .selectActivity .selectStyle .value .icon {
    position: absolute;
    left: 10px;
    top: 22px;
    color: #000;
    font-size: 18px;
    z-index: 1;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.FormProject form .selectActivity .selectStyle .value .icon.rotate {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.FormProject form .selectActivity .selectStyle .value.selected {
    background-color: #fff;
    color: #000;
}

.FormProject form .selectActivity .selectStyle .listSelect {
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    padding: 0;
    background-color: #fff;
    display: none;
    border: 1px solid;
    z-index: 999;
    color: #000;
    -webkit-box-shadow: 0 0 6px 3px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 6px 3px rgba(0, 0, 0, 0.04);
}

.FormProject form .selectActivity .selectStyle .listSelect li {
    cursor: pointer;
}

.FormProject form .selectActivity .selectStyle .listSelect li span {
    height: 60px;
    line-height: 60px;
    padding: 0 20px;
    display: block;
    font-size: 11px;
    font-family: "NotoKufiArabic-Regular";
}

.FormProject form .selectActivity .selectStyle .listSelect li:hover {
    background-color: #005BBB;
    color: #fff;
}

.FormProject form .form-control {
    resize: inherit;
    width: 100%;
    height: 160px;
    border-radius: 5px;
    color: #000;
    border: 2px solid #6a6666;
}

.FormProject form .code {
    width: 100%;
    height: 55px;
    border: 2px solid #000;
    border-radius: 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #000;
}

.FormProject form .code p {
    font-family: "Alhadari-Bold";
    font-size: 14px;
    margin: 0;
}

.FormProject form .singUp {
    width: 100%;
    height: 55px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.FormProject form .singUp button {
    border: 0;
    color: #fff;
    width: 150px;
    background-color: #005BBB;
    border-radius: 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.Clients .ClientsSlider .Item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 10px;
}

.Clients .ClientsSlider .Item .mask {
    border: 1px solid #000;
    width: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.Clients .ClientsSlider .Item .mask i {
    padding: 5px;
}

.Clients .ClientsSlider .Item .mask .logo {
    width: 100px;
    height: 100px;
}

.Clients .ClientsSlider .Item .mask .logo img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.AboutUs {
    text-align: center;
    padding-top: 50px;
    padding-bottom: 50px;
}

.AboutUs h2 {
    font-size: 40px;
    color: #005BBB;
}

.AboutUs p {
    font-size: 16px;
    font-family: "NotoKufiArabic-Regular";
    color: #707070;
    line-height: 2.5;
    text-align: justify;
}

.AboutUs .information {
    padding-top: 30px;
}

.AboutUs .information section .line img {
    width: 80%;
}

.AboutUs .information section .item {
    position: relative;
    padding-bottom: 20px;
}

.AboutUs .information section .item .mask {
    margin-top: 75px;
}

.AboutUs .information section .item .mask .logo {
    width: 130px;
    height: 130px;
    background-color: #fff;
    border: 5px solid #005BBB;
    border-radius: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    top: 0px;
    left: 50%;
    -webkit-transform: translate(-50px, 0);
    transform: translate(-48%, -3px);
}

.AboutUs .information section .item .mask .logo i {
    color: #005BBB;
    font-size: 55px;
}

.AboutUs .information section .item .mask .topSection {
    padding: 50px;
    background-color: #005BBB;
    color: #fff;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}

.AboutUs .information section .item .mask .topSection h4 {
    font-size: 20px;
}

.AboutUs .information section .item .mask .downSection {
    padding: 30px 10px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}

.AboutUs .information section .item .mask .downSection p {
    font-size: 12px !important;
    font-family: "NotoKufiArabic-Regular";
    color: #707070;
    line-height: normal !important;
    text-align: justify;
}

.animated {
    -webkit-animation-duration: 1.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.plan .Type {
    display: flex !important;
    justify-content: center;
    align-items: center;
    padding-bottom: 30px;
}

.plan .Type label {
    padding: 10px;
}

.plan .Type label .checkbox {
    display: none
}

.plan .Type label .switch {
    width: 62px;
    height: 32px;
    background: #E5E5E5;
    z-index: 0;
    margin: 0;
    padding: 0;
    appearance: none;
    border: none;
    cursor: pointer;
    position: relative;
    border-radius: 16px;
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
}

.plan .Type label .switch:before {
    content: ' ';
    position: absolute;
    left: 1px;
    top: 1px;
    width: 60px;
    height: 30px;
    background: #005BBB;
    z-index: 1;
    border-radius: 16px;
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
}

.plan .Type label .switch:after {
    content: ' ';
    height: 29px;
    width: 29px;
    border-radius: 28px;
    z-index: 2;
    background: #FFFFFF;
    position: absolute;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
    top: 1px;
    left: 1px;
    -webkit-box-shadow: 0 2px 5px #999999;
    box-shadow: 0 2px 5px #999999;
}

.plan .Type label .switchOn,
.plan .Type label .switchOn:before {
    background: #005BBB !important;
}

.plan .Type label .switchOn:after {
    left: 31px !important;
}


/*# sourceMappingURL=style.css.map */