/* cairo-regular - latin-ext_latin_arabic */
@font-face {
    font-family: 'Cairo-4';
    font-style: normal;
    font-weight: 400;
    src: url('../font/cairo-v20-latin-ext_latin_arabic-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../font/cairo-v20-latin-ext_latin_arabic-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../font/cairo-v20-latin-ext_latin_arabic-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../font/cairo-v20-latin-ext_latin_arabic-regular.woff') format('woff'), /* Modern Browsers */
         url('../font/cairo-v20-latin-ext_latin_arabic-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../font/cairo-v20-latin-ext_latin_arabic-regular.svg#Cairo') format('svg'); /* Legacy iOS */
  }
  /* cairo-800 - latin-ext_latin_arabic */
  @font-face {
    font-family: 'Cairo-7';
    font-style: normal;
    font-weight: 800;
    src: url('../font/cairo-v20-latin-ext_latin_arabic-700.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../font/cairo-v20-latin-ext_latin_arabic-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../font/cairo-v20-latin-ext_latin_arabic-700.woff2') format('woff2'), /* Super Modern Browsers */
         url('../font/cairo-v20-latin-ext_latin_arabic-700.woff') format('woff'), /* Modern Browsers */
         url('../font/cairo-v20-latin-ext_latin_arabic-700.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../font/cairo-v20-latin-ext_latin_arabic-700.svg#Cairo') format('svg'); /* Legacy iOS */
  }
   *{            font-family: 'Cairo-4'!important;
        }
  /*
@font-face {
            font-family: Cairo-Regular ;
            src: url("../Cairo/Cairo-Regular.ttf");
        }
        
        @font-face {
            font-family: Cairo-Light ;
            src: url("../Cairo/Cairo-Light.ttf");
        }
        
        @font-face {
            font-family: Cairo-Bold ;
            src: url("../Cairo/Cairo-Bold.ttf");
        }
        */
    
        
       
        *:hover,
        *:focus {

            outline: none;
        }
        
        
      .text-justify{
            text-align: center;
        }
        a {
            color: #31a1ad;
           
        }
        
        a:hover,
        a:focus,
        a:active {
            outline: none;
            text-decoration: none;
            color: #107561;
        }
        
        .loader {
            z-index: 9999;
            background: rgb(247, 247, 247);
            content: " ";
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
        
        .loader .load {
            border: 5px solid #eee;
            border-radius: 50%;
            border-top: 5px solid #31a1ad;
            width: 70px;
            height: 70px;
            -webkit-animation: spin 2s linear infinite;
            /* Safari */
            animation: spin 2s linear infinite;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
        /* Safari */
        
        @-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
            }
        }
        
        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
        
        html,
        body {
            direction: rtl;
            color: #555;

            line-height: 2;
        
            font-family: 'Cairo-4'!important;
        }
        
        .h1,
        .h2,
        .h3,
        .h4,
        .h5,
        .h6,h1,h2,h3,h4,h5,h6 {
            font-weight: 100;
            font-family: 'Cairo-4'!important;
        }
        
        .mar {
            margin: 10px;
        }
        
        .pad {
            padding-top: 10px;
        }
        
        b {
            font-family: 'Cairo-7';
        }
        
        .text-shadow-1 {
            text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
        }
        
        .video {
            border: 0px solid rgba(0, 0, 0, 0.1);
            -webkit-border-radius: 3px;
            border-radius: 3px;
            height: 100%;
            width: 100%;
        }
        
        .btn {
            -webkit-border-radius: 3px;
            border-radius: 3px;
        }
        
        .btn-white {
            background: #fff;
            border: none;
            color: #444;
        }
        
        .border-right-dark {
            border-right: 5px solid #706e6f;
            padding: 0 20px;
        }
        
        .btn-primary {
            color: #fff;
            background: #1abc9c;
            border: none;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            /*-webkit-box-shadow: 0 2px 10px rgba(0, 189, 164, 0.5);
    box-shadow: 0 2px 10px rgba(0, 189, 164, 0.5);*/
        }
      
      
      
      .overlay-hader  {
        position: absolute;
z-index: 2;
background-color: rgb(15 4 76 / 20%);
width: 100%;
height: 100%;
left: 0;
top: 0;}
        
        .content-hader{
            z-index:9;
        }
        
        
        
        .btn-primary:hover,
        .btn-primary:active,
        .btn-primary:focus,
        .btn-primary:not(:disabled):not(.disabled):active:focus,
        .btn-primary:not(:disabled):not(.disabled).active:focus,
        .show>.btn-primary.dropdown-toggle:focus {
            background-color: #706e6f;
            border-color: none;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        
        .dropdown-menu {
            -webkit-border-radius: 0 0 3px 3px;
            border-radius: 0 0 3px 3px;
            border: none;
            -webkit-box-shadow: 1px 2px 15px rgba(0, 0, 0, 0.15);
            box-shadow: 1px 2px 15px rgba(0, 0, 0, 0.15);
        }
        
        .color-primary {
            color: #31a1ad;
        }
        
        .color-primary-light {
            color: #9DCDB5;
        }
        
        .color-gray-light-f7 {
            color: #f7f7f7;
        }
        
        .color-gray-light {
            color: #666;
        }
        
        .color-gray {
            color: #444;
        }
        
        .color-brown {
            color: #bd7344;
        }
        
        .btn_down {
            position: absolute;
            bottom: 25px;
            margin: 0 auto;
            left: 50%;
            right: 50%;
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 1.8);
            -webkit-border-radius: 20px;
            border-radius: 20px;
            z-index: 999;
            color: rgba(255, 255, 255, 1.8);
            cursor: pointer;
            -webkit-animation: down 2s linear infinite;
            animation: down 2s linear infinite;
        }
        
        .btn_up {
            opacity: 0;
            padding: 2px 15px;
            position: fixed;
            bottom: 25px;
            left: 20px;
            background: #706e6f;
            border: none;
            -webkit-border-radius: 100%;
            border-radius: 100%;
            z-index: 999;
            color: #FFF;
            font-size: 20px;
            -webkit-box-shadow: 0 1px 2px 3px rgba(0, 0, 0, 0.05);
            box-shadow: 0 1px 2px 3px rgba(0, 0, 0, 0.05);
            -webkit-transition: all 0.4s;
            -moz-transition: all 0.4s;
            -o-transition: all 0.4s;
            transition: all 0.4s;
            cursor: pointer;
        }
        
        .btn_up:hover {
            background:  #31a1ad;
        }
        
        @-webkit-keyframes down {
            0% {
                padding: 0px 10px 20px 10px;
            }
            50% {
                padding: 10px 10px 10px 10px;
            }
            100% {
                padding: 20px 10px 0px 10px;
            }
        }
        
        @keyframes down {
            0% {
                padding: 0px 10px 30px 10px;
            }
            50% {
                padding: 10px 10px 10px 10px;
            }
            100% {
                padding: 20px 10px 0px 10px;
            }
        }
        
        .btn-slide {
            border: 2px solid #FFF;
            background: transparent;
            color: #FFF;
            -webkit-border-radius: 3px;
            border-radius: 3px;
        }
        
        .btn-slide:hover,
        .btn-slide:focus,
        .btn-slide:active {
            -webkit-transition: all 0.5s;
            -moz-transition: all 0.5s;
            -o-transition: all 0.5s;
            transition: all 0.5s;
            background: #1abc9c;
            border: 2px solid #1abc9c;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        
        .contact_form .form-control {
            border: 0;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            background: #f7f7f7;
            font-size: medium;
            color: #9DCDB5;
            -webkit-transition: all 0.4s;
            -moz-transition: all 0.4s;
            -o-transition: all 0.4s;
            transition: all 0.4s;
        }
        
        .contact_form .form-control::placeholder {
            color: #9DCDB5;
        }
        
        .contact_form .btn-primary {
            background: #1abc9c;
            color: #FFF;
            border: none;
            -webkit-border-radius: 3px;
            border-radius: 3px;
        }
        
        .contact_form .form-control:hover,
        .contact_form .form-control:focus {
            background: #D0E7DB;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        
        .contact_form .btn-primary:hover,
        .contact_form .btn-primary:focus {
            background: #009985;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        /* owl-carousel main */
        
        .main_slide .item {
            position: relative;
            overflow: hidden;
            height: 95vh;
            width: 100%;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
            background-attachment: fixed;
            background-size: 100% 100%;
            background-position: center center;
            background-repeat: no-repeat;
            direction: rtl;
        }
        
        .main_slide .item>div>div {
            position: absolute;
            top: 35%;
            width: 800px;
           
            color: rgba(255, 255, 255, 1);
            font-size: large;
        }
        .en{
            left: 10%;
        }
        
        .language{
            text-align: center;
            align-items: center;
            left: 1%;
        }
        @media screen and (max-width: 600px) {
            .main_slide .item>div {
                width: 100%;
                background: rgba(0, 0, 0, 0.3);
            }
        }
        
        .main_slide .item>div h2 {
            color: #FFFFFF;
            font-weight: 900;
        }
        
        .two .item {
            padding: 0px 0 30px 0;
        }
        
        .two .item img {
            -webkit-border-radius: 3px;
            -o-border-radius: 3px;
            -ms-border-radius: 3px;
            border-radius: 3px;
        }
        
        .two .item h5 {
            padding: 15px 0;
            color: #444;
        }
        
        .two .item p {
            color: #888;
        }
        
        .main_slide .owl-nav .next {
            padding: 40px 20px;
            background: rgba(255, 255, 255, 1);
            border: none;
            color: #444;
            border-radius: 3px 0 0 3px;
            cursor: pointer;
        }
        
        .main_slide .owl-nav .prev {
            padding: 40px 20px;
            background: rgba(255, 255, 255, 1);
            border: none;
            color: #444;
            border-radius: 0 3px 3px 0;
            cursor: pointer;
        }
        
        .main_slide .owl-nav .owl-prev {
            position: absolute;
            margin: auto 0;
            top: 50%;
            left: 0;
            background: #FFFFFF;
            z-index: 999;
            padding: 20px;
            -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        }
        
        .main_slide .owl-nav .owl-next {
            position: absolute;
            margin: auto 0;
            padding: 20px;
            right: 0;
            background: #FFFFFF;
            z-index: 999;
            top: 50%;
            -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        }
        
        .slide_managers .slide_manager_item {
            position: relative;
            margin-top: 5px;
            background: #FFFFFF;
            -webkit-border-radius: 3px;
            border-radius: 3px;
        }
        
        .slide_managers .slide_manager_item img {
            height: 70px;
            width: 70px;
            -webkit-border-radius: 100%;
            border-radius: 100%;
            position: absolute;
            bottom: -35px;
            left: 20px;
            display: block;
            margin: 0 auto;
            border: 5px solid #ffffff;
            -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.02);
            box-shadow: 0 3px 3px rgba(0, 0, 0, 0.02);
        }
        
        .slide_managers .slide_manager_item .slide_manager_comment {
            padding: 30px 20px;
            line-height: 2;
            -webkit-transition: all 0.4s;
            -moz-transition: all 0.4s;
            -o-transition: all 0.4s;
            transition: all 0.4s;
        }
        
        .slide_managers .slide_manager_item .slide_manager_info {
            background: transparent;
            /*padding:50px 20px 20px 20px;*/
            margin-bottom: 45px;
        }
        
        .slide_managers .slide_manager_item:hover .slide_manager_comment,
        .slide_managers .slide_manager_item:focus .slide_manager_comment {
            -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .two-nav {
            background: red;
        }
        /**************************/
        
        .logo {
            padding: 0 20px;
        }
        
        footer {
            background: #343D3A url(../image/bg/islamic-pattern-vector-png-300x200.png);
            color: #FFF;
            padding-top: 50px;
        }
        
        footer .footer-content {
            padding: 30px 0;
        }
        
        footer .footer-content a {
            -webkit-transition: all 0.2s;
            -moz-transition: all 0.2s;
            -o-transition: all 0.2s;
            transition: all 0.2s;
            color: rgba(255, 255, 255, 0.7);
        }
        
        footer .footer-content a:hover,
        footer .footer-content a:focus,
        footer .footer-content a:active {
            color: rgba(255, 255, 255, 1);
        }
        
        footer .footer-panel p {
            padding: 0;
            margin: 0;
        }
        
        footer .footer-panel .badge {
            background-color:  #31a1ad;
        }
        
        footer .footer-content ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        footer .footer-social-media ul li {
            display: inline-block;
        }
        
        footer .footer-social-media ul li a {
            display: block;
            padding: 10px 20px;
            border: 2px solid rgba(255, 255, 255, 0.2);
            margin: 1px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            -ms-border-radius: 3px;
            -o-border-radius: 3px;
            border-radius: 3px;
        }
        
        .slide_gallary .item div {
            overflow: hidden;
            height: 220px;
        }
        
        .slide_gallary .item div img {
            height: 100%;
            opacity: 0.7;
            width: 100%;
            display: block;
            -webkit-transition: all 0.6s;
            -moz-transition: all 0.6s;
            -o-transition: all 0.6s;
            transition: all 0.6s;
        }
        
        .slide_gallary .item img:hover,
        .slide_gallary .item img:focus {
            opacity: 1;
            transform: scale(1.5);
        }
        
        footer .footer-panel {
            background: rgba(0, 0, 0, 0.2);
            padding: 20px 0;
            overflow: hidden;
        }
        
        .border-right-green {
            position: relative;
            padding-right: 20px;
        }
        
        .border-right-green::before {
            content: " ";
            border-right: 5px solid #1abc9c;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0px;
        }
        
        .border-left-brown {
            position: relative;
            padding-left: 20px;
        }
        
        .border-left-brown::before {
            content: " ";
            border-left: 5px solid #bd7344;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0px;
        }
        
        .panel-light {
            padding: 50px 0;
        }
        
        .panel-orange {
            padding: 80px 0;
            background: #F1E3DA;
        }
        
        .panel-green {
            padding: 40px 0;
        }
        /*
.panel-green .gn-title *,
.panel-green .gn-title .h1 {
    color: #000
}*/
        
        .panel-green .gn-title:before {
            content: " ";
            height: 1px;
            background: transparent;
            bottom: 1px;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 30%;
            position: absolute;
        }
        
        .panel-green .gn-title:after {
            content: " ";
            height: 3px;
            background: transparent;
            bottom: 0px;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 10%;
            position: absolute;
        }
        
        .post-journal {}
        
        .post-body {
            padding: 10px;
        }
        
        .post-title {
            border-radius: 3px;
            background: #FFF;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.06);
            position: relative;
            z-index: 1;
        }
        
        .post-title::before {
            content: " ";
            padding: 20px;
            background: #FFF;
            transform: rotate(45deg);
            position: absolute;
            bottom: -10px;
            left: 20px;
            z-index: -1;
            border-radius: 3px;
        }
        
        .post-author {
            margin-top: 10px;
        }
        
        .panel-dark {
            padding: 80px 0;
            background: #f8f8f8;
            /* border-radius: 20px 20px;*/
        }
        
        .panel-dark-title {
            box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.08) inset, 0 2px 4px rgba(0, 0, 0, 0.08) inset;
            padding: 10px 0;
            background: #f7f7f7 url(../image/bg/p1.png) center right repeat;
        }
        
        .college-stu-service {
            background: #f7f7f7;
            padding: 30px;
            margin: 10px;
            -webkit-border-radius: 3px;
            /*border-radius: 40px 5px;*/
        }
        
        .dean-word img {
            width: 200px;
            height: 200px;
            box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
            /*border-radius: 100%;*/
            border: 4px solid #FFF;
            margin: 15px;
        }
        
        .dean-word2 img {
            width: 300px;
            height: 300px;
            box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
            border-radius: 100%;
            border: 4px solid #FFF;
        }
        
        .circled {
            border-radius: 100%;
        }
        
        .shadow-circled {
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
        }
        
        .panel_1 {
            padding: 100px 0;
            background: #444;
        }
        
        .panel_1 h3 {
            color: #ccc;
        }
        
        .panel_1 {
            color: #fcfcfc;
        }
        
        .panel_2 {
            padding: 100px 0 100px 0;
            background: #f7f7f7;
        }
        
        .panel_2 .line_1 {
            background: #E0E0E0;
            margin: 25px;
            height: 1px;
            position: relative;
        }
        
        .panel_2 .line_1 div {
            position: relative;
            width: 50%;
            top: -1px;
            margin: auto;
            padding: 2px;
            background: #31a1ad;
        }
        
        .panel_3 {
            height: 100vh;
        }
        
        .panel_5 {
            padding: 50px 0;
            background: #f7f7f7;
        }
        
        .panel_6 {
            padding: 100px 0;
        }
        
        .panel_7 {
            padding: 100px 0;
            background: #f7f7f7;
        }
        
        .panel_8 {
            padding: 50px 0;
        }
        
        .panel_9 {
            padding: 50px 0;
            background: #f7f7f7;
        }
        
        .panel_10 {
            padding: 100px 0;
        }
        
        .panel_11 {
            padding: 50px;
            background: #f7f7f7;
        }
        
        .panel_12 {
            padding: 100px 0;
            background: #f7f7f7;
        }
        
        .panel_13 {
            background: url(../image/oiu_image/3/DSC_0016.JPG) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            min-height: 300px;
            /*
    padding: 100px 0;
    background: #000 url(../image/oiu_image/DSC_0002.JPG) no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
    position: relative;*/
        }
        
        .panel_13_color {
            background-color: rgba(2, 0, 26, 0.473);
            min-height: 300px;
            padding: 100px 0;
        }
        /*
.panel_13::before {
    background: url(../image/bg/bg_overlay_1.png) fixed;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: "";
}*/
        
        .panel_14 {
            padding: 100px 0;
        }
        
        .panel_15 {
            padding: 50px 0;
            display: none;
        }
        
        .panel_16 {
            background: url(../image/oiu_image/3/DSC_0010.JPG) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            min-height: 300px;
            /*
    position: relative;
    padding: 100px 0;
    background: rgb(0, 0, 0) url(../image/oiu_image/DSC_0010.JPG) no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
    position: relative;*/
        }
        /*
.panel_16::before {
    background: url(../image/bg/bg_overlay_1.png) fixed;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: "";
}*/
        
        .panel_17 {
            padding: 100px 0;
        }
        
        .panel_18 {
            padding: 50px 0;
            background: #f7f7f7;
        }
        
        .panel_19 {
            background: url(../image/oiu_image/3/library.jpg) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            min-height: 300px;
        }
        /*
.panel_19::before {
    background: url(../image/bg/bg_overlay_1.png) fixed;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: "";
}*/
        
        .panel_20 {
            padding: 50px 0;
            background: #f7f7f7;
        }
        
        .map {
            height: 50vh;
            width: 100vm;
        }
        
        .decor1 {
            height: 300px;
            background: #FFF url(../image/decor1.png) center bottom no-repeat;
            display: none;
        }
        
        .decor1-end {
            height: 300px;
            background: #FFF url(../image/decor1-end.png) center top no-repeat;
            display: none;
        }
        
        .decor2 {
            height: 1px;
            background: #f7f7f7;
        }
        
        .decor3 {
            height: 3px;
            background: #f7f7f7;
            width: 30%;
            margin: 10px 0;
        }
        
        .decor4 {
            height: 1px;
            background: rgba(255, 255, 255, 0.1);
            width: 100%;
            margin: 20px 0;
        }
        
        .decor5 {
            height: 1px;
            width: 100%;
            margin: 10px 0;
        }
        
        .decor6 {
            height: 3px;
            background: #1abc9c;
            width: 20%;
            margin: 0 auto;
        }
        
        .decor7 {
            position: relative;
            height: 1px;
            bottom: 1px;
            left: 0;
            right: 0;
            margin: 10px auto;
            width: 40%;
        }
        
        .decor7:after {
            content: " ";
            height: 3px;
            background: #FFF;
            bottom: 0px;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 30%;
            position: absolute;
        }
        /************ Genral class *********/
        
        .hr {
            background: #FFF;
            color: #1abc9c;
            border: 2px solid #1abc9c;
            border-radius: 100%;
        }
        
        .gn-title {
            padding: 50px 0 20px 0;
            margin-bottom: 50px;
            text-align: center;
            position: relative;
        }
        
        .gn-title:before {
            content: " ";
            height: 1px;
            background: rgba(0, 0, 0, 0.1);
            bottom: 1px;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 30%;
            position: absolute;
        }
        
        .gn-title:after {
            content: " ";
            height: 3px;
            background: #BD7344;
            bottom: 0px;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 10%;
            position: absolute;
        }
        
        .gn-title-inv {
            padding: 50px 0 20px 0;
            margin-top: 50px;
            text-align: center;
            position: relative;
        }
        
        .gn-title-inv:before {
            content: " ";
            height: 1px;
            background: rgba(0, 0, 0, 0.1);
            top: 1px;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 30%;
            position: absolute;
        }
        
        .gn-title-inv:after {
            content: " ";
            height: 3px;
            background: #BD7344;
            top: 0px;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 10%;
            position: absolute;
        }
        
        .gn-title .h1 {
            padding: 5px 0;
            color: #444;
        }
        
        .gn-title p {
            padding: 5px 0;
            color: #666;
        }
        
        .count {
            color: #666;
        }
        
        .count>h5 {
            font-weight: normal;
            color: #ADADAD;
        }
        
        .count-bg-dark {
            color: #FFFFFF;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
        }
        
        .journal .row {
            margin-bottom: 20px;
        }
        
        .thumb-journal {
            position: relative;
        }
        
        .thumb-journal .thumb-journal-text {
            padding: 10px;
            color: #FFFFFF;
            position: absolute;
            height: auto;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.5);
            background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
            background: -webkit-gradient( top, bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 1)));
            background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
            background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
            background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
        }
        
        .thumb-journal .thumb-journal-text a {
            color: #FFFFFF;
        }
        
        .tbumb_science {
            direction: rtl;
            color: #444;
        }
        
        .tbumb_science .row {
            margin-bottom: 20px;
            padding: 10px;
            background: #FFF;
            border-left: 5px solid #f7f7f7;
        }
        
        .tbumb_science small {
            color: #1abc9c;
        }
        
        .tbumb_science .thumb_science_content {
            position: relative;
        }
        
        .tbumb_science .row .thumb_science_date {
            position: absolute;
            top: 0;
            right: 0;
            padding: 5px 15px;
            background: #1abc9c;
            color: #FFFFFF;
            text-align: center;
            -webkit-border-radius: 0 0 0 5px;
            -moz-border-radius: 0 0 0 5px;
            border-radius: 0 0 0 20px;
        }
        
        .tbumb_science .row .thumb_science_date * {
            margin: 0;
            padding: 0;
        }
        
        .thumb-paper .row {
            margin-bottom: 20px;
        }
        
        .thumb-paper .paper {
            background: #FFFFFF;
            padding: 20px;
            -webkit-border-radius: 3px;
            border-radius: 3px;
        }
        
        .managers {
            position: relative;
        }
        
        .managers .manager {
            display: inline-block;
            position: relative;
            margin: 50px;
        }
        
        .managers .manager .manager-img {
            height: 60px;
            width: 60px;
            border-radius: 100%;
            overflow: hidden;
            -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            opacity: 0.6;
            -webkit-transition: all 0.4s;
            -o-transition: all 0.4s;
            -moz-transition: all 0.4s;
            transition: all 0.4s;
        }
        
        .managers .manager .manager-info {
            position: absolute;
            background: #FFFFFF;
            padding: 10px;
            top: -100px;
            width: 200px;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.09);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.09);
            z-index: 10;
            -webkit-transition: all 0.4s;
            -o-transition: all 0.4s;
            -moz-transition: all 0.4s;
            opacity: 0;
            display: none;
        }
        
        .managers .manager .manager-img:hover~.manager-info {
            display: block;
            opacity: 1;
        }
        
        .managers .manager:nth-child(even) {
            bottom: -50px;
        }
        
        .managers .manager:nth-child(1) .manager-img {
            height: 80px;
            width: 80px;
            opacity: 0.6;
        }
        
        .managers .manager:nth-child(2n) .manager-img {
            height: 60px;
            width: 60px;
            opacity: 0.5;
        }
        
        .managers .manager:nth-child(3n) .manager-img {
            height: 40px;
            width: 40px;
            opacity: 0.4;
        }
        
        .managers .manager:nth-child(4n) .manager-img {
            height: 50px;
            width: 50px;
            opacity: 0.3;
        }
        
        .managers .manager .manager-img:hover {
            opacity: 1;
        }
        
        .together {
            color: #FFFFFF;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
        }
        
        .together h1 {
            font-weight: 900;
        }
        
        .reg {
            position: relative;
        }
        
        .reg:after {
            content: " ";
            position: absolute;
            top: 20px;
            height: 1px;
            background: #1abc9c;
            left: 0;
            right: 0;
            z-index: -1;
        }
        
        .reg .reg-step {
            min-width: 55px;
            display: inline-block;
            color: #31a1ad;
            background: #FFF;
            border: 2px solid #bebebe;
            -webkit-border-radius: 3px;
            border-radius: 3px;
        }
        
        @media screen and (max-width: 600px) {
            .reg:after {
                display: none;
            }
        }
        /**********************************/
        /************ Time Line **********/
        
        .time-line {}
        
        .time-line .time-line {
            width: 4px;
            margin: 0 auto 0 auto;
            height: 100%;
            background: #C2E0D1;
            position: relative;
        }
        
        .time-line .time-line .time-point {
            position: absolute;
            left: -8px;
            background:  #31a1ad;
            padding: 10px;
            -webkit-border-radius: 10px;
            -o-border-radius: 10px;
            -ms-border-radius: 10px;
            border-radius: 10px;
        }
        /********************************/
        /****** Navrbar *****************/
        
        .megamenu-li {
            position: static;
        }
        
        .megamenu {
            position: absolute;
            width: 100%;
            padding-right: 15px;
            padding-left: 15px;
            margin-right: auto;
            margin-left: auto;
            left: 0;
            right: 0;
        }
        
        @media (min-width: 576px) {
            .megamenu {
                max-width: 540px;
            }
        }
        
        @media (min-width: 768px) {
            .megamenu {
                max-width: 720px;
            }
        }
        
        @media (min-width: 992px) {
            .megamenu {
                max-width: 960px;
            }
        }
        
        @media (min-width: 1200px) {
            .megamenu {
                max-width: 1140px;
            }
        }
        
        .navbar {
            padding: 0rem 1rem;
        }
        
        .nav-warp {
            -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
            /*
            -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
            */
        }
        
        .main-navbar {
            background: rgba(0, 0, 0, 0.5);
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
        }
        
        .main-navbar .navbar-brand {
            font-weight: normal;
        }
        
        .main-navbar .navbar-nav .nav-link {
            color: #FAFAFA;
        }
        
        .main-navbar-white {
           background: #FFF url(../image/bg/islamic-pattern-vector-png-300x200.png) right;            text-shadow: none;
        }
        
        .main-navbar-white .navbar-brand {
            color: #666;
        }
        
        .main-navbar-white .navbar-nav .nav-link {
            color: #707070;
            padding-top: 25px;
            padding-bottom: 25px;
            -webkit-transition: all 0.4s;
            -moz-transition: all 0.4s;
            -o-transition: all 0.4s;
            transition: all 0.4s;
        }
        
        .main-navbar-white .navbar-nav .nav-link:hover,
        .main-navbar-white .navbar-nav .nav-link:focus {
            color: #31a1ad;
            box-shadow: 0 3px 0 #31a1ad;
        }
        
        .main-top {
            background: #062b50 url(../image/bg/islamic-pattern-vector-png-300x200.png);
            /*#5C7585;/*#5C7585*/
            border-bottom: 0px solid #706e6f;
            padding-top: 0;
            padding-bottom: 0;
        }
        
        .main-top .navbar-nav .nav-item {
            border-right: 0px solid #706e6f;
        }
        
        .main-top .navbar-nav .nav-item:last-child {
            border-left: 0px solid #706e6f;
        }
        
        .main-top .navbar-nav .nav-link {
            padding-top: 5px;
            padding-bottom: 5px;
            margin-top: 0;
            margin-bottom: 0;
            color: rgba(255, 255, 255, 1.6);
            line-height: normal;
            font-size: small;
            -webkit-transition: all 0.4s;
            -moz-transition: all 0.4s;
            -o-transition: all 0.4s;
            transition: all 0.4s;
        }
        
        .main-top .navbar-nav .nav-link:hover,
        .main-top .navbar-nav .nav-link:focus {
            color: #1abc9c;
        }
        
        .nav-staff {
            background: transparent;
            color: #FFF;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        
        .nav-staff .main-top,
        .nav-staff .main-navbar {
            background: rgba(0, 0, 0, 0.1);
        }
        
        .nav-staff .main-navbar-white .navbar-nav .nav-link {
            color: #fff;
        }
        /***************** Staff **********************************/
        
        .staff-head {
           /* background: #f7f7f7 url(/frontend/web/image/1.jpg) no-repeat center center fixed;*/
           background: #f7f7f7 url(https://student.oiu.edu.sd/images/3.jpg) no-repeat center center fixed;

            
            background-size: cover;
           /* position: relative;*/
           position: relative;
            z-index: 2;
            color: #fff;
            overflow: hidden;
        }
       .overlay{
            position: absolute;
z-index: 1;
background-color: rgb(27 10 46 / 53%);
width: 100%;
height: 100%;
left: 0;
top: 0;
        }
        .content{
            z-index: 9;
position: relative;

        }
        
        .staff-head .avatar {
            -webkit-border-radius: 100px 3px 100px 3px;
            border-radius: 3px;
            width: 250px;
            box-shadow: 2px 2px 15px #fff;
            height: 250px;
        }
        
        .staff-head:after {
            position: absolute;
            content: ' ';
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
           /* afilter: blur(2px);
            background: rgba(0,0,0,0.5)
            url(../image/bg/pattern.png);*/
            z-index: -1;
            opacity: 0.8;
        }
        
        .staff-haed * {
            background: transparent;
        }
        
        .staff-tab .nav-link {
            color: #fff;
            background: #706e6f;
            margin: auto 10px;
            -webkit-border-radius: 30px;
            border-radius: 30px;
            -webkit-transition: all 0.4s;
            -moz-transition: all 0.4s;
            -o-transition: all 0.4s;
            transition: all 0.4s;
        }
        
        .staff-tab .nav-link:hover,
        .staff-tab .nav-link:focus,
        .staff-tab .nav-link:active {
            color: #fff;
            border-color: transparent;
            background: #706e6f;
        }
        
        .staff-tab .nav-link.active {
            border-color: transparent;
            color: #fff;
            background: #1abc9c;
        }
        
        .staff-tab.nav-tabs {
            border-bottom: none;
        }
        /*********************** End Staff ****************************/
        
        .third-navbar-white {
            background: #FFF;
            text-shadow: none;
            border-bottom: 1px solid #eee;
        }
        
        .third-navbar-white .navbar-brand {
            color: #666;
        }
        
        .third-navbar-white .navbar-nav .nav-link {
            color: #666;
            padding-top: 25px;
            padding-bottom: 25px;
            -webkit-transition: all 0.4s;
            -moz-transition: all 0.4s;
            -o-transition: all 0.4s;
            transition: all 0.4s;
        }
        
        .third-navbar-white .navbar-nav .nav-link:hover,
        .third-navbar-white .navbar-nav .nav-link:focus {
            color: #1abc9c;
            box-shadow: 0 3px 0 #1abc9c;
        }
        /********************************/
        
        .top-content {
            padding: 20px;
            background: #f7f7f7;
            -webkit-border-radius: 3px;
            border-radius: 3px;
        }
        
        .top-heading {
            color: #ffffff;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            margin: 0;
            padding: 10px;
            margin-bottom: 10px;
        }
        
        .top-heading-green {
            background: #1abc9c;
        }
        
        .top-heading-brown {
            background: #bd7344;
        }
        
        .top-image {
            border: 4px solid #ffffff;
            /*-webkit-box-shadow: 0 0 7px rgba(0,0,0,0.1);
    box-shadow: 0 0 7px rgba(0,0,0,0.1);*/
            height: 70px;
            width: 70px;
        }
        
        .statistic .row {
            border-bottom: 1px solid #e5e5e5;
            padding-bottom: 10px;
            margin-bottom: 10px;
        }
        
        .statistic .row:last-child {
            border-bottom: 0px solid #e5e5e5;
            padding-bottom: 0px;
            margin-bottom: 0px;
        }
        
        .books-works {
            background: #f7f7f7;
        }
        
        .books-works img {
            height: 250px;
            width: auto;
        }
        
        .books-works .books-works-content {
            padding: 0px 15px 1px 15px;
        }
        
        .exp {
            background: #f7f7f7;
            padding: 10px;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            margin-bottom: 30px;
            -webkit-transition: all 0.4s;
            -moz-transition: all 0.4s;
            -o-transition: all 0.4s;
            transition: all 0.4s;
        }
        
        .exp .exp-date {
            background: #706e6f;
            padding: 1px;
            width: 100%;
            display: block;
            margin-top: 20px;
            position: relative;
        }
        
        .exp .exp-date::before {
            content: ' ';
            background: #706e6f;
            padding: 5px;
            -webkit-border-radius: 100%;
            border-radius: 100%;
            position: absolute;
            left: 0;
            top: -4px;
        }
        
        .exp .exp-date::after {
            content: ' ';
            background: #706e6f;
            padding: 5px;
            border-radius: 100%;
            position: absolute;
            right: 0;
            top: -4px;
        }
        
        .exp:hover,
        .exp:focus,
        .exp:active {
            box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.06);
            cursor: default;
        }
        
        .sci-qualifi {
            background: #FFFFFF;
            padding: 20px;
            margin-bottom: 50px;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
            position: relative;
        }
        
        .sci-qualifi .icon {
            left: 20px;
            top: -40px;
            position: absolute;
            background: #1abc9c;
            width: 3px;
            height: 200px;
        }
        
        .sci-qualifi .icon-photo {
            padding: 10px 15px;
            background: #1abc9c;
            position: absolute;
            left: -2px;
            top: -60px;
            color: #fff;
            transform: rotate(45deg);
        }
        
        .sci-qualifi .icon-photo i {
            transform: rotate(-45deg);
        }
        
        .sci-qualifi .icon-circle {
            padding: 5px;
            background: transparent;
            border: 2px solid #1abc9c;
            position: absolute;
            left: 15px;
            top: 158px;
            -webkit-border-radius: 100%;
            border-radius: 100%;
        }
        /*  Result */
        
        .result-content {
            background: #ffffff;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        
        .result-padding {
            padding: 20px;
        }
        
        .result-max-height {
            height: 100%;
        }
        
        .color-bg-dark {
            background: #f7f7f7;
        }
        
        .result-content .result-badge {
            padding: 5px 15px;
            margin: 0 20px;
            background: #f7f7f7;
            -webkit-border-radius: 100%;
            border-radius: 100%;
            -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.03) inset;
            box-shadow: 0 2px 3px rgba(0, 0, 0, 0.03) inset;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
        }
        
        .result-content .result-badge-bg {
            position: relative;
            background: #fff;
            display: block;
            z-index: 1;
        }
        
        .result-content .result-badge-bg::before {
            position: absolute;
            top: 50%;
            bottom: 50%;
            left: 0;
            right: 40%;
            border-bottom: 2px dotted #e5e5e5;
            content: ' ';
            z-index: -1;
        }
        
        .result-content .result-badge-bg::after {
            position: absolute;
            content: ' ';
            padding: 6px;
            border-left: 2px dotted transparent;
            border-bottom: 2.9px dotted #e5e5e5;
            left: 0;
            top: 8px;
            margin: auto;
            transform: rotate(45deg);
        }
        
        .result-content .result-badge-bg span {
            background: #ffffff;
            z-index: 1;
        }
        
        .result-content .result-badge-bg.active::before,
        .result-content .result-badge.active {
            background-image: linear-gradient(to bottom, #00DBBE, #00bda4);
            color: #FFF;
            box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05);
        }
        
        .result-content .form-control {
            background: #f7f7f7;
            border: 1px solid #eee;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            -webkit-box-shadow: none;
            box-shadow: none;
            font-size: small;
        }
        
        .result-content .form-control:hover,
        .result-content .form-control:active,
        .result-content .form-control:focus {
            background: rgba(0, 189, 164, 0.1);
            border: 1px solid rgba(0, 189, 164, 0.5);
            color: rgba(0, 189, 164, 1);
        }
        
        .result-content .result-footer {
            background: #fcfcfc;
            border-top: 1px solid #eee;
        }
        
        .result-content .result-header {
            background: #fff;
            border-bottom: 4px solid #eee;
        }
        
        .result-content label {
            padding: 3px;
            border-radius: 100%;
            border: 2px solid #00bda4;
            margin-left: 10px;
        }
        
        .result-content label div {
            padding: 6px;
            -webkit-border-radius: 100%;
            border-radius: 100%;
            background: #fff;
            -webkit-transition: all 0.4s;
            -moz-transition: all 0.4s;
            -o-transition: all 0.4s;
            transition: all 0.4s;
        }
        
        .result-content input[type=radio] {
            display: none;
        }
        
        .result-content input[type="radio"]:checked+label div {
            background: #00bda4;
        }
        
        .result-content .form-group {
            display: flex;
            align-items: center;
            /* align */
        }
        
        .table-time {}
        
        .table-time .content {
            padding: 20px;
        }
        
        .box-shadow {
            -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
            -webkit-border-radius: 3px;
            border-radius: 3px;
        }
        
        .table-time table tr:nth-child(odd) td {
            background: #f7f7f7;
        }
        /****************** Azza **********************/
        
        .hovereffect {
            position: relative;
            text-align: center;
            cursor: default;
        }
        
        .hovereffect .overlay {
            position: absolute;
            overflow: hidden;
            opacity: 0;
            filter: alpha(opacity=0);
            width: 90%;
            height: 70%;
            left: 10%;
            top: 30%;
            border-radius: 100%;
            border: 0px solid #FFF;
            -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
            transition: opacity 0.35s, transform 0.35s;
            -webkit-transform: translate3d(50%, 50%, 0);
            transform: translate3d(50%, 50%, 0);
        }
        
        .hovereffect:hover .overlay {
            background-color: rgba(0, 0, 0, 0.3);
        }
        
        .hovereffect img {
            display: block;
            position: relative;
            -webkit-transition: all 0.35s;
            transition: all 0.35s;
            height: 371px;
        }
        
        .hovereffect:hover img {
            filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1.4" /><feFuncG type="linear" slope="1.4" /><feFuncB type="linear" slope="1.4" /></feComponentTransfer></filter></svg>#filter');
            filter: brightness(1.4);
            -webkit-filter: brightness(1.4);
        }
        
        .hovereffect h2 {
            text-transform: uppercase;
            text-align: center;
            position: relative;
            font-size: 17px;
            padding: 10px;
            background-color: transparent;
            color: #FFF;
            padding: 1em 0;
            opacity: 0;
            filter: alpha(opacity=0);
            -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
            transition: opacity 0.35s, transform 0.35s;
            -webkit-transform: translate3d(-150%, -400%, 0);
            transform: translate3d(-150%, -400%, 0);
        }
        
        .hovereffect a,
        .hovereffect p {
            color: #FFF;
            padding: 1em 0;
            opacity: 0;
            filter: alpha(opacity=0);
            -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
            transition: opacity 0.35s, transform 0.35s;
            -webkit-transform: translate3d(-150%, -400%, 0);
            transform: translate3d(-150%, -400%, 0);
        }
        
        .hovereffect:hover a,
        .hovereffect:hover p,
        .hovereffect:hover h2,
        .hovereffect:hover .overlay {
            opacity: 1;
            filter: alpha(opacity=100);
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
        
        .hovereffect1 {
            filter: alpha(opacity=60);
            opacity: 0.6;
            float: left;
            overflow: hidden;
            position: relative;
            text-align: center;
            cursor: default;
            -webkit-transition: all 0.4s;
            -moz-transition: all 0.4s;
            -o-transition: all 0.4s;
            transition: all 0.4s;
        }
        
        .hovereffect1 .overlay1 {
            position: absolute;
            overflow: hidden;
            width: 80%;
            height: 80%;
            left: 10%;
            top: 10%;
            border-bottom: 1px solid #FFF;
            border-top: 1px solid #FFF;
            -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
            transition: opacity 0.35s, transform 0.35s;
            -webkit-transform: scale(0, 1);
            -ms-transform: scale(0, 1);
            transform: scale(0, 1);
        }
        
        .hovereffect1:hover,
        .hovereffect1:hover .overlay1 {
            filter: alpha(opacity=100);
            opacity: 1;
            -webkit-transform: scale(1);
            -ms-transform: scale(1);
            transform: scale(1);
        }
        
        .hovereffect img {
            display: block;
            position: relative;
            -webkit-transition: all 0.35s;
            transition: all 0.35s;
        }
        
        .hovereffect:hover img {
            filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.6" /><feFuncG type="linear" slope="0.6" /><feFuncB type="linear" slope="0.6" /></feComponentTransfer></filter></svg>#filter');
            filter: brightness(0.6);
            -webkit-filter: brightness(0.6);
        }
        
        .hovereffect h2 {
            text-transform: uppercase;
            text-align: center;
            position: relative;
            font-size: 17px;
            background-color: transparent;
            color: #FFF;
            padding: 6em 0;
            opacity: 0;
            filter: alpha(opacity=0);
            -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
            transition: opacity 0.35s, transform 0.35s;
            -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
        }
        
        .hovereffect a,
        .hovereffect p {
            color: #FFF;
            padding: 1em 0;
            opacity: 0;
            filter: alpha(opacity=0);
            -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
            transition: opacity 0.35s, transform 0.35s;
            -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
        }
        
        .hovereffect:hover a,
        .hovereffect:hover p,
        .hovereffect:hover h2 {
            opacity: 1;
            filter: alpha(opacity=100);
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
        /****************** end Azza **********************/
        /****************** new **************************/
        
        .radio_content {
            display: none;
            position: fixed;
            right: 0;
            bottom: 0;
            content: " ";
            padding: 20px;
            z-index: 9;
        }
        
        .radio_content::after {
            position: fixed;
            bottom: 0;
            right: 0;
            z-index: 10;
            content: " ";
            background: transparent;
            animation: a 0.4s linear both;
            ;
            box-shadow: 0 0 100px rgba(0, 0, 0, 0.39);
        }
        
        @keyframes a {
            0% {
                left: 100%;
                top: 100%;
                background: rgba(0, 0, 0, 0.6);
            }
            50% {
                background: rgba(0, 0, 0, 0.2);
            }
            100% {
                left: 0%;
                top: 0%;
                background: rgba(0, 0, 0, 0);
            }
        }
        
        .border-white {
            border: 5px solid #ffffff;
        }
        
        .managers .managers-box img {
            filter: alpha(opacity=60);
            opacity: 0.6;
            max-height: 200px;
            max-width: 200px;
            -webkit-transition: all 0.4s;
            -moz-transition: all 0.4s;
            -o-transition: all 0.4s;
            transition: all 0.4s;
        }
        
        .managers .managers-box:hover img,
        .managers .managers-box:active img {
            filter: alpha(opacity=100);
            opacity: 1;
        }
        
        .user-card-full {
            overflow: hidden;
        }
        
        .card {
            border-radius: 5px;
            -webkit-box-shadow: 0 1px 20px 0 rgba(69, 90, 100, .08);
            box-shadow: 0 1px 20px 0 rgba(69, 90, 100, .08);
            border: none;
            margin-bottom: 30px;
            position: relative;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-direction: column;
            flex-direction: column;
            min-width: 0;
            word-wrap: break-word;
            background-color: #fff;
            background-clip: border-box;
            border: 0px solid rgba(0, 0, 0, .125);
            border-radius: .25rem;
        }
        
        .card-block {
            padding: 1.25rem;
        }
        
        .b-b-default {
            border-bottom: 1px solid #e0e0e0;
        }
        
        .m-b-20 {
            margin-bottom: 20px;
        }
        
        .p-b-5 {
            padding-bottom: 5px !important;
        }
        
        .user-card-full .user-profile {
            border-radius: 0 5px 5px 0;
        }
        
        .bg-c-lite-green {
            background: -webkit-gradient(linear, left top, right top, from(#1EDCB6), to(#1abc9c));
            background: linear-gradient(to right, #1EDCB6, #1abc9c);
        }
        
        .user-profile {
            padding: 20px 0;
        }
        
        .list-unstyled {
            padding-left: 0;
            list-style: none;
        }
        
        .user-card-full .social-link li {
            display: inline-block;
        }
        
        .user-card-full .social-link li a {
            font-size: 20px;
            margin: 0 10px 0 0;
            -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
        }
        
        .panel_depr img {
            width: 100%;
            height: 145px;
            margin: 10px
        }
        
        .panel_depr {
            margin: 10px;
        }
        
        .direc {
            direction: ltr;
        }
        /*
@media screen and (max-width: 768px) {
    .nav-warp .ml-auto {
        display: none;
        float: left;
    }

}*/
        
        @media (max-width: 996px) {
            .main-top {
                display: none;
            }
        }
        /**************************************************/
        
        .mini_nav {
            padding: 30px;
        }
        
        @media (min-width: 996px) {
            .mini_nav {
                display: none;
            }
        }
        /****************** map**********************/
        /****************** end new **********************/
        /*  =========================  Header  =========================   */
        
        .jo_header .navbar-brand span {
            color: #08526d !important;
            padding-right: 20px;
        }
        
        .jo_header nav li a {
            color: #08526d;
        }
        
        .slid_img {
            height: 340px;
            margin-top: 88px;
            background-image: url(../image/sl1.jpeg);
        }
        
        .slid_img .overlay {
            position: relative;
            height: 340px;
            width: 100%;
            left: 0;
            top: 0;
            background-color: rgba(0, 0, 0, .3);
            z-index: 1;
        }
        /*  ========================= End Header  =========================   */
        /*  =========================  About Jobs  =========================   */
        
        .about_job .container {
            padding: 80px;
        }
        
        .about_job .container h1 {
            font-weight: bold;
        }
        /*  =========================  End About Jobs  =========================  */
        /*  =========================  Jobs  =========================  */
        
        .jobs .row {
            margin: 0px;
        }
        
        .jobs .cols {
            color: #B2B2B2;
            text-align: right;
            padding: 40px;
            border: 1px solid #B2B2B2;
            margin: 30px;
        }
        
        .jobs .cols h1 {
            font-size: 75px;
        }
        
        .jobs .cols:hover {
            border: 1px solid #000;
        }
        
        .jobs .cols:hover h1 {
            color: #000;
        }
        
        .jobs .cols span {
            font-size: 17px;
            color: #000;
        }
        
        .jobs .cols p {
            font-size: 15px;
        }
        /*  =========================  End Jobs  =========================  */
        /*  =========================  Start Jobs Desc  =========================  */
        
        .jobs_desc .nam {
            margin: 40px;
        }
        
        .jobs_desc .nam p {
            padding-right: 30px;
            font-size: 20px;
        }
        
        .jobs_desc div {
            margin-bottom: 40px;
            font-size: 18px;
        }
        /*  =========================  End Jobs Desc  =========================  */
        /*  =========================  Start Jobs Forms  =========================  */
        
        .jobs_form {
            margin: 50px 0px;
        }
        
        .jobs_form h2 {
            margin-bottom: 30px;
        }
        
        .jobs_form .form-control {
            padding: 20px;
            margin: 2px;
            font-size: 18px;
        }
        /*  =========================  Start Jobs Forms  =========================  */
        /*  =========================  Start sitemapp  =========================  */
        
        .card-body-map {
            width: 100%;
        }
        
        /*  =========================  Start sitemapp  =========================  */
        
        .help-block {
            font-family: "normal";
            outline: none;
            color: red;
        }
        
        
        
        
                /*  =========================  event  =========================  */
.event-img{
        height: 100% !important;
object-fit: cover;
}



                /*  =========================  reg-url  =========================  */



@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.reg-url{
    font-family: 'Cairo', sans-serif;
}
.reg-url .wellcom{
    width: 100%;
    height: 450px;
  /*  background-image: url("../images/5.jpg");*/
     background: url(../image/reg-url.jpg) no-repeat center center fixed;

    background-size: cover;
    z-index: 1;
    color: #fff;
   
}
.reg-url .color{
    width: 100%;
    height: 450px;
    z-index: 3;
    background-color:rgb(35 36 37 / 68%);
    position: relative;}
.reg-url .wellcom .content{
    padding:20px 0;

    border-right: 2px solid rgb(255, 255, 255);
   margin: 2%;
    position: absolute;
    top: 40%;
    transform: translate(50%, -50%);
    border-left: 3px solid rgb(255, 255, 255);
    right: 50%;
    width: 95%;
    transition: 0.5s ease;
}
.reg-url .wellcom .content h2{
    padding: 20px;

}

.reg-url .wellcom .content:hover{
        box-shadow: 2px 2px 20px #fff;
       

    }
    
        @media (max-width: 576px) {
         .reg-url .wellcom .content {
                   right: 47%;
            }
        }


                /*  ========================= translation =========================  */
                .goog-te-gadget img {
                
                    display: none;
                  }
             
                  .goog-te-gadget-simple {
                    font-size: inherit;
                    font-family: inherit;
                    border: none !important;
                    
                  }
                  .goog-te-gadget-simple .goog-te-menu-value span{
                    color: #062b50;
                    margin: 2px;
                    border: none;
                  }
                 
             /*******************************************************




#google_translate_element {
    position: fixed;
    right: 2%;
    top: 30% !important;
    z-index: 999;
  }


.goog-te-gadget {
  font-family: Roboto, "Open Sans", sans-serif !important;
  text-transform: uppercase;
}

.goog-te-gadget-simple {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  padding: 8px !important;
  border-radius: 4px !important;
  font-size: 1rem !important;
  line-height: 2rem !important;
  display: inline-block;
  cursor: pointer;
  zoom: 1;
}

.goog-te-menu2 {
  max-width: 100%;
}

.goog-te-menu-value {
  color: #fff !important;
}
.goog-te-menu-value:before {
    font-family: 'Font Awesome 5 Free';
    display: inline-block;
    font-weight: 900;
    content: "\f1ab";
    color: #062b50;
  margin-right: 16px;
  font-size: 2rem;
  vertical-align: -10px;
  margin: 5px;
}

.goog-te-menu-value span:nth-child(5) {
  display: none;
}
/*
.goog-te-menu-value span:nth-child(3):after {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: "\f063";

    font-size: 1.5rem;
    vertical-align: -6px;
  }
.goog-te-gadget-icon {
  background-image: url(https://placehold.it/32) !important;
  background-position: 0px 0px;
  height: 32px !important;
  width: 32px !important;
  margin-right: 8px !important;
  display: none;
}

.goog-te-banner-frame.skiptranslate {
  display: none !important;
}*/


/* ================================== *\
    Mediaqueries
\* ================================== *//*
@media (max-width: 667px) {
  #google_translate_element {
    bottom: calc(100% - 50% - 53px);
    left: 16px !important;
    width: 100% !important;
  }
  #google_translate_element goog-te-gadget {
    width: 100% !important;
  }
  #google_translate_element .skiptranslate {
    width: 100% !important;
  }
  #google_translate_element .goog-te-gadget-simple {
    width: calc(100% - 32px) !important;
    text-align: center;
  }
}
******************************************/

.skills{
    font-weight: bold;
}
/*************************************************/
.card-service{
transition: 0.5s;
}


.card-service:hover{
    border-right: 3px  solid #0dcaf0 !important;
border-left: 3px solid #0dcaf0 !important;
    transform: scale(1.1);
    color:red;
}