﻿
/*#AT    Style Sheet  */


/*#region name */

/*#endregion */

/*#region  Regural */
.nopadding {
    padding: 2px !important;
    margin: 0 !important;
    outline: 2px solid #333;
    background: #333;
}

@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 700;
    src: local('Cairo Bold'), local('Cairo-Bold'), url(https://fonts.gstatic.com/s/cairo/v6/SLXLc1nY6Hkvalqaa46L59A.woff) format('woff');
}

.AsmWeb {
    color: #79133e !important;
}

    .AsmWeb:hover {
        /*color: #656262 !important;*/
        color: #f2Fe84b !important;
    }

.asmTw {
    color: #79133e !important;
}

    .asmTw:hover {
        color: #1da1f2 !important;
    }

.asm {
    color: #79133e !important;
}

    .asm:hover {
        color: #c60a0a !important;
    }

.asmfa {
    color: #79133e !important;
}

    .asmfa:hover {
        color: #3b5998 !important;
    }

.asmInst {
    color: #79133e !important;
}

    .asmInst:hover {
        color: #833ab4 !important;
    }

.asmbtn {
    background-color: white !important;
}

    .asmbtn:hover {
        background-color: cornflowerblue !important;
        border-radius: 185px;
    }

.SMBar {
    position: absolute;
    right: 80% !important;
    /*background-color: #B39759;*/
    top: 70% !important;
}

.SMBarLoc {
    /*left: 1rem !important;*/
    border-bottom: solid 1px #79133eA3 !important;
    /*background-color: #79133e1F !important;*/
    border-radius: 44px;
    padding-top: 0.3rem;
}

.txt16p:hover {
    font-size: 1.2rem !important;
    font-weight: 200;
}

.row {
    margin-left: 0px !important;
    margin-right: 0px !important;
}


    li .fa:hover {
        font-size: 23px !important;
        /*color: #B39759 !important;*/
        color: #79133e !important;
        /*border-right-style: solid;
                border-left-style: solid;*/
    }



.w-100resp {
    width: 60%;
    height: 580px;
}

.fnt09 {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
}

.btnLang {
    padding-right: 22%;
}

.langbtn {
    position: absolute;
    top: 28.5% !important;
    right: 90%;
    z-index: 100;
    padding-top: 3% !important;
}

.fntColorKAFD {
    color: #B39759 !important;
}

.SMIcons {
    position: absolute;
    top: 5.5%;
    right: 87%;
    z-index: 100;
}

.fntlangEn {
    font-size: 22px;
    font-weight: 200;
    color: #000;
    font-family: 'Times New Roman' !important;
    /*letter-spacing: 13px;*/
    /*margin: 2px 2px 2px 2px !important;*/
    padding: 2px 2px 0px 2px !important;
    width: 40px !important;
}

    .fntlangEn:hover {
        font-size: 23px;
        color: #B39759;
    }

.fntJoin {
    font-size: 18px;
    font-weight: 200;
    color: #79133e;
    /*letter-spacing: 13px;*/
    /*margin: 2px 2px 2px 2px !important;*/
    padding: 2px 2px 0px 2px !important;
    width: 100px !important;
}

    .fntJoin:hover {
        font-size: 18px;
        color: #79133e;
    }

.logoimg {
    width: 220px !important;
}

.p-2 {
    padding: 2px;
}

.MPTopHeader {
    /*height: 150px !important;*/
    /*background-color: #B39759 !important;*/
    /*background-color: #79133e !important;*/
    border-bottom-style: solid;
    border-bottom-color: #B39759;
}

.dirrtl {
    direction: rtl !important;
    float: right !important;
    font-family: 'Cairo' !important;
}

.top-right {
    position: absolute;
    top: 44%;
    right: 8%;
}

.pr-34 {
    padding-right: 13%;
}

.pt-27 {
    padding-top: 14vh;
}

.txt16p {
    font-size: 18px !important;
    font-family: 'Cairo' !important;
    color: #B39759 !important;
}

.ProgBtnBack {
    background-color: cornflowerblue;
}
/*'    projects logo effect   '*/
.imgL:hover {
    /*animation: shake 0.5s;
  animation-iteration-count: infinite;*/
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}
/*.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}*/
/*'   END  projects logo effect   '*/
.bkclrbyg {
    background-color: #ecedd21 !important;
}

.HMwrds {
    /*background-color: whitesmoke;
    border-radius: 321px;
    box-shadow: whitesmoke 10px 0px 89px 76px;*/
    /*box-shadow: #f7e4506e 16px 0px 16px 8px;*/
    border-radius: 250px;
    border-style: solid;
    border-color: #B39759;
}

.about {
    background-color: #79133e !important;
}

.txtBld {
    font-weight: 600;
}

.logoK {
    /*background-color:rgb(217, 217, 217);*/
    /*background-color: lightgrey;
    border-radius: 1px;
    box-shadow: 10px 0px 81px 66px lightgrey;*/
    /*background-color: whitesmoke;
    border-radius: 1px;
    box-shadow: whitesmoke 10px 0px 89px 76px;*/
    /*background-color: white;
    box-shadow: white 11px 0px 99px 88px;*/
    /*box-shadow: #fff 10px 10px 95px 111px;*/
    /*background-color: #fff;
      box-shadow: #fff 1px 1px 100px 120px;*/
}
/*#endregion */

/*#region Media */
@media (min-width: 1201px) and (max-width: 2200px) {
    .logoK {
        /*background-color:rgb(217, 217, 217);*/
        /*background-color: lightgrey;
    border-radius: 1px;
    box-shadow: 10px 0px 81px 66px lightgrey;*/
        /*background-color: whitesmoke;
    border-radius: 1px;
    box-shadow: whitesmoke 10px 0px 89px 76px;*/
        /*background-color: white;
    box-shadow: white 11px 0px 99px 88px;*/
        /*background-color: #fff;
        box-shadow: #fff 10px 10px 95px 111px;*/
    }

    .w-100resp {
        width: 60%;
    }

    .btnLang {
        padding-right: 1%;
    }


    .vis {
        /*background-color: !important;
    border-radius: 11px;
    /*border-top: solid;
    border-bottom: thin !important;*/
        /* box-shadow: 6px 20px 120px 22px lightgrey;
    padding: 6px;*/
        background-color: whitesmoke;
        box-shadow: whitesmoke 22px 22px 88px 122px;
        padding: 6px;
    }
}

@media (min-width: 961px) and (max-width: 1200px) {
    .logoK {
        /*background-color:rgb(217, 217, 217);*/
        /*background-color: lightgrey;
    border-radius: 1px;
    box-shadow: 10px 0px 81px 66px lightgrey;*/
        /*background-color: whitesmoke;
    border-radius: 1px;
    box-shadow: whitesmoke 10px 0px 89px 76px;*/
        /*background-color: white;
    box-shadow: white 11px 0px 99px 88px;*/
        /*background-color: #fff;
        box-shadow: #fff 10px 10px 95px 111px;*/
    }

    .btnLang {
        padding-right: 7%;
    }

    .vis {
        /*background-color: !important;
    border-radius: 11px;
    /*border-top: solid;
    border-bottom: thin !important;*/
        /* box-shadow: 6px 20px 120px 22px lightgrey;
    padding: 6px;*/
        background-color: whitesmoke;
        box-shadow: whitesmoke 22px 22px 88px 122px;
        padding: 6px;
    }
}

@media (min-width:250px)(max-width:990) {
    .SMIcons {
        position: absolute;
        top: 55.5%;
        right: 87%;
        z-index: 100;
    }
}

@media (max-width: 960px) {
    .txtcenterSM {
        text-align: center !important;
        line-height: 2rem !important;
    }

    .SMBar {
        position: absolute;
        right: 80% !important;
        /*background-color: #B39759;*/
        top: 36% !important;
        color: #B39759 !important;
    }


    .w-100resp {
        width: 100%;
        height: 480px;
    }

    .btnLang {
        padding-right: 0%;
    }

    .fntlang {
        font-size: 18px;
        font-weight: 600;
        color: #B39759;
        font-family: 'Adobe نسخ' !important;
        /*letter-spacing: 13px;*/
        /*margin: 2px 2px 2px 2px !important;*/
        padding: 2px 2px 2px 2px !important;
        width: 30px !important;
    }

    .langbtn {
        position: absolute;
        padding-top: 2% !important;
        right: 91%;
        z-index: 100;
    }

    .logok {
        /*box-shadow: white 30px 0px 99px 88px;*/
        /*background-color: transparent !important;
        box-shadow: transparent 0px 0px 1px 1px !important;*/
    }

    .vis {
        font-size: 1.2rem !important;
        text-align: center !important;
        background-color: transparent !important;
        box-shadow: transparent !important;
        padding: 45px 2px 2px 2px;
    }

    .slider-img {
        min-height: 225px !important;
    }

    .pt-27 {
        padding-top: 1%;
    }

    .logoimg {
        width: 190px !important;
    }
}
/*#endregion */

/*#region      Services      */

.w3layouts_header {
    text-align: center;
}

.w3_services_para {
    position: relative;
    text-align: center;
    color: #656262;
    padding-bottom: 1.5em;
    /*letter-spacing: 10px;*/
}

.agile_services_grid img {
    margin: 0 auto;
}

.w3_agile_services_grid {
    text-align: center;

}

.height350 {
    height: 380px !important;
}

.ProjectLogos {
    width: 350px;
}
.rd44{
       border-radius:50% !important;
}
.imgsl {
    height: 100%;
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    background-color: rgba(174,174,174,0.7);
}

fieldset {
    padding: 30px;
    position: relative;
    margin: 2em auto 0;
    border: 2px solid rgba(179, 177, 177, 0.18);
    line-height: 2em;
    color: #111;
    font-size: 12px;
    height: 32vh !important;
    /*letter-spacing: 1px;*/
}

hr {
    background-color: #a49841 !important;
}

.botmBordrDbl {
    border-bottom: double;
    border-bottom-width: medium;
}

.w-85 {
    width: 85% !important;
}

.w3_agile_services_grid legend {
    font-size: 16px;
    color: #212121;
    margin: 0;
    font-weight: 600;
    border-bottom: none;
    /*font-family: 'Lato', sans-serif;*/
    height: 11vh !important;
}

.w3_agile_services_grids:nth-child(3) {
    margin-top: 4em;
}

/*-- circle-effect --*/

.ih-item {
    position: relative;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
}

    .ih-item,
    .ih-item * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

        .ih-item img {
            width: 100%;
            height: 100%;
        }

        .ih-item.circle,
        .ih-item.circle .img {
            position: relative;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -o-border-radius: 50%;
            -ms-border-radius: 50%;
        }

            .ih-item.circle,
            .ih-item.circle .img,
            .ih-item.circle.effect1 .spinner {
                width: 250px;
                height: 250px;
                margin: 0 auto;
            }

                .ih-item.circle .img:before {
                    position: absolute;
                    display: block;
                    content: '';
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                    -webkit-border-radius: 50%;
                    -o-border-radius: 50%;
                    -ms-border-radius: 50%;
                    -moz-border-radius: 50%;
                    box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.3);
                    -webkit-transition: all 0.35s ease-in-out;
                    -moz-transition: all 0.35s ease-in-out;
                    transition: all 0.35s ease-in-out;
                }

                .ih-item.circle .img img {
                    border-radius: 50%;
                    -webkit-border-radius: 50%;
                    -o-border-radius: 50%;
                    -ms-border-radius: 50%;
                    -moz-border-radius: 50%;
                }

                .ih-item.circle.effect1 .spinner {
                    border: 5px solid #aca153;
                    border-right-color: #DFDFDF;
                    border-bottom-color: #DFDFDF;
                    border-radius: 50%;
                    -webkit-border-radius: 50%;
                    -o-border-radius: 50%;
                    -ms-border-radius: 50%;
                    -moz-border-radius: 50%;
                    -webkit-transition: all 0.8s ease-in-out;
                    -moz-transition: all 0.8s ease-in-out;
                    transition: all 0.8s ease-in-out;
                }

                .ih-item.circle.effect1 .img {
                    position: absolute;
                    top: 5px;
                    bottom: 5px;
                    left: 5px;
                    right: 5px;
                    width: auto;
                    height: auto;
                }

                    .ih-item.circle.effect1 .img:before {
                        display: none;
                    }

                .ih-item.circle.effect1:hover .spinner,
                .w3_agile_services_grid:hover .ih-item.circle.effect1 .spinner {
                    -webkit-transform: rotate(180deg);
                    -moz-transform: rotate(180deg);
                    -ms-transform: rotate(180deg);
                    -o-transform: rotate(180deg);
                    transform: rotate(180deg);
                }

/*-- //circle-effect --*/

.services {
    position: relative;
}

.w3l-img-side,
.w3l-img-side2 {
    position: absolute;
    top: 0;
}

.w3l-img-side2 {
    right: 0;
}

/*-- //services --*/
/*#endregion */
