body {
    direction: rtl;
    margin: 0;
    font-family: 'Changa', sans-serif;    
    padding: 0;
    font-size: 16px
}

p,span,li,a,button,link,ul .form-group {
    padding: 0;
    margin: 0;    
}

h1,h2,h3,h4,h5,h6 {
    padding: 0;
    margin: 0;
    text-transform: uppercase    
}

.header {
    background-color: #e01212;
    padding: 10px;
}
.header .icon-social a {
    color: #fff;
    text-decoration: none;
    display: inline-block;
    margin-right: 10px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #0062cc;
    padding: 6px;
    text-align: center;
    box-shadow: 0 4px 4px #25252561;
    transition: all 0.3s ease-in-out
}
.header .icon-social a:hover {
    background-color: #fff !important;
    color: #3D3D3D
}
.header .icon-social a:nth-of-type(1) {
    background-color: #FD5D60
}
.header .icon-social a:nth-of-type(2) {
    background-color: #1DA1F2
}
.header .icon-social a:nth-of-type(3) {
    background-color: #375297
}
.navbar .navbar-nav .nav-item {margin-left: 30px}
.navbar .navbar-nav .nav-link {
    font-weight: bold;
    color: #e01212;
    font-size: 19px;
}
.navbar .navbar-nav { margin-top: 18px;}

/* Start Slider */
.slider, .carousel-inner {
    height: 76.5vh;;
}
.slider .carousel-control-prev span {
    color: #e01212;
    font-size: 42px;
}
.slider .carousel-control-next span {
    color: #e01212;
    font-size: 42px;
}

/* End Slider */

/* Start Welcome */
.welcome {
    background-image: url('../img/bg.jpg');
    background-size: cover;
    text-align: right;
    height: 105px
}
.welcome .intro {
    display: inline-block;
    background-color: #e01212;
    padding: 10px;
    color: #fff;
    text-align: right;
    font-weight: bold;
    width: 40%;
    height: 105px
}
.welcome .intro h3 {
    font-size: 35px;
    padding: 5px 0;
    font-weight: bold;
}
.welcome .intro p {
    font-size: 23px;
}
/* End Welcome */

/* Start Services */
.services {
    padding: 50px;
    background-image: url(../img/slide02.png);
    background-size: cover;
    background-color: #ffffff61;
    background-blend-mode: overlay;
}
.services .box {
    background-color: #4e4e4e;
    padding: 20px;
    border: 1px solid #3c3c3c;
    height: 100%;
    color: #fff
}
.services .col-lg-6 {margin-bottom: 10px}
.services .box h3 {
    display: inline-block;
    background-color: #636363;
    padding: 10px;
    border-radius: 4px;
    font-size: 19px;
    width: 35%;
    font-weight: bold;
    color: #fff;
    padding: 17px;
    margin-bottom: 10px;
    box-shadow: 0 6px 10px #3e3e3e;
}
.services .box .btn {
    background-color: #3c3b3bf5;
    margin: 10px 0;
    color: #FFF;
    padding: 11px 40px;
    box-shadow: 0 7px 7px #2f2f2f;
    border-radius: 100px;
    width: 42%;
    text-decoration: none;
    border: 2px solid #4c4b4b;
    transition: all 0.3s ease-in-out
}
.services .box .btn:hover {
    background-color: #fff;
    color: #1d1d1d;
    border: 2px solid #fff;    
}
/* End Services */

/* Start Advantage */
.advantage-top {
    background-color: #e01212;
    padding: 20px;
    color: #fff;
    font-weight: bold
}

.advantage {
    background-color: #ececec;
}

.advantage .first-list  {
    margin-right: 35%;
}

.advantage ul li {
    font-weight: bold;
    margin-bottom: 6px;
}
.advantage .second-list {
    margin-right: 12%;
}
.advantage a {
    display: table;
    background-color: #222;
    margin-right: auto;
    color: #fff;
    text-align: left !important;
    padding: 6px 48px;
}
.footer-1 {
    padding: 30px
}
.footer-1 .col-lg-4 img {
    margin-bottom: 10px
}
.footer-1 .col-lg-8 img {
    display: inline-block;
    margin-top: 5%;
}

.footer-2 {
    background-color: #e01212;
    padding: 20px;
    color: #fff;
}
.footer-2 .btn {
    background-color: #ffffff;
    padding: 10px 40px;
    color: #000000;
    font-weight: bold;
    border-radius: 4px;
    box-shadow: 0 7px 10px #271a1a5c;
    transition: all 0.3s ease-in-out
}
.footer-2 .btn:hover {
    background-color: #191818;
    color: #fff
}
.footer-2 h3 {
    font-weight: bold;
    font-size: 25px;
    margin: auto 0;
}
.footer {
    background-color: #333333;
}
.footer ul li {
    color: #fff;
    font-size: 35px;
    font-weight: bold;
    margin-bottom: 10px
}
.end-footer {
    background-color: #1d1d1d;
    margin: 0;
    padding: 20px;
    overflow: hidden;
    color: #fff;
}
.end-footer p a {color: #fff;text-decoration: none;transition: all 0.3s ease-in-out}
.end-footer p a:hover {color: #e01212}

.contact .form .form-control {
    margin-bottom: 20px;
    border-radius: 0;
    border: 1px solid #b3b1b1;
    padding: 10px 20px;
    font-size: 13px;
    border-radius: 4px;
}
.contact .form .text-area {resize: none}
.contact .form .btn {
    display: block;
    background-color: transparent;
    width: 36%;
    color: #888787;
    border: 1px solid #b3b1b1;
    text-transform: uppercase;
    padding: 10px;
    transition: all 0.3s ease-in-out
}
.contact .form .btn:hover {
    background-color: #191818;
    color: #fff
}
.services-page {
    background-color: #272727db;
    background-image: url('../img/slide01.jpg')
}
.services-page h1 {
    background-color: #e01212;
    display: inline-block;
    color: #fff;
    padding: 10px 40px;
    position: relative;
}
.services-page h1::after {
    content: '';
    position: absolute;
    bottom: -17px;
    left: 69px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 20px 0 20px;
    border-color: #e01212 transparent transparent transparent;
}
.advantage-details h1 {
    background-color: #e01212;
    display: inline-block;
    color: #fff;
    padding: 10px 40px;
    position: relative;
}
.advantage-details h1::after {
    content: '';
    position: absolute;
    bottom: -17px;
    left: 69px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 20px 0 20px;
    border-color: #e01212 transparent transparent transparent;
}
.advantage-details ul li {
    font-size: 20px;
    color: #222;
}
.services-page p {
    font-size: 23px;
    line-height: 1.7;
    margin: 25px 0;
    color: #fff;
    padding: 10px;
    font-weight: bold;
}
.services-page h2 {
    background-color: #e01212;
    padding: 10px;
    display: inline-block;
    color: #fff;
}
.services-page ul li {
    font-size: 19px;
    line-height: 1.5;
    color: #000000;
    font-weight: bold;
    background-color: #fff;
    margin: 10px 0;
    padding: 10px;
    display: inline-block;
}
.about-page {
    background-image: url(../img/about-bg.png);
    background-size: cover;
    height: auto;
    background-position: bottom;
    background-color: #191818;
    background-blend-mode: luminosity;
}
.about-page h1 {
    background-color: #e01212;
    display: inline-block;
    color: #fff;
    padding: 10px 40px;
    position: relative;
}
.about-page h1::after {
    content: '';
    position: absolute;
    bottom: -17px;
    left: 69px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 20px 0 20px;
    border-color: #e01212 transparent transparent transparent;
}
.about-page p {
    font-size: 23px;
    font-weight: bold;
    margin: 38px 0 0 0;
    line-height: 1.7;
}
.about-page h2 {
    margin-top: 38px;
    font-weight: bold;
    background-color: #616161;
    padding: 10px;
    display: inline-block;
    color: #fff;
}
.consultation h1 {
    background-color: #e01212;
    display: inline-block;
    color: #fff;
    padding: 10px 40px;
    position: relative;
}
.consultation h1::after {
    content: '';
    position: absolute;
    bottom: -17px;
    left: 69px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 20px 0 20px;
    border-color: #e01212 transparent transparent transparent;
}
.consultation .form-consulting {margin-top: 15%}
.consultation .form-consulting label {
    font-size: 22px;
    padding: 10px 0;
    color: #0a3c5f;
    font-weight: bold;
}
.consultation .form-consulting .form-control {
    margin-bottom: 10px;
    background-color: #eaeaea;
    padding: 10px;
    font-size: 14px
}
.consultation .form-consulting .btn {
    background-color: #353535;
    color: #ffffff;
    border: 1px solid #4a4a4a;
    padding: 10px 30px;
    border-radius: 100px;
    width: 100%;
    box-shadow: 0 3px 3px #15151561;
    transition: all 0.3s ease-in-out;
    border-color: #CCC
}
.consultation .form-consulting .btn:hover {
    background-color: #fff;
    color: #191818
}
@media only screen and (min-width:300px) and (max-width:800px) {
    .navbar {direction: ltr}
    .navbar .navbar-nav {
        text-align: right;
        margin: 0;
    }
    .fa-home {display: none}
    .slider, .carousel-inner {height: auto}
    .welcome .intro h3 {font-size: 13px}
    .welcome .intro p { font-size: 14px;}
    .welcome .intro {width: 60%}
    .services {padding: 10px 0;}
    .advantage-top h3 {font-size: 13px}
    .advantage .first-list {margin: 0}
    .advantage {padding: 10px 0 !important;}
    .advantage .second-list {margin: 0}
    .advantage .col-lg-2 {text-align:right !important}
    .footer-2 h3 {font-size: 13px}
    .footer-2 {padding: 10px 0;}
    .footer-2 .btn {font-size: 12px}
    .footer-1 {padding: 10px 0 }
    .footer-1 img {margin-bottom: 10px}
    .footer { padding: 10px 0 !important;}
    .footer ul {padding: 0}
    .footer ul li {font-size: 18px}
    .end-footer p {font-size: 12px}
    .values  {height:50vh;padding: 10px 0 !important}
    .values  p {font-size: 14px}
    .values  h1 {margin-top: 15%}
    .about-page p {font-size: 16px}
    .about-page h2 {font-size: 21px}
    .services-page p {font-size: 14px}
    .services-page h2 {font-size: 15px}
    .services-page ul li {font-size: 14px}
    .consultation {padding: 10px 0 !important}
    .consultation img { margin-top: 10%;}
    .contact {padding: 10px 0 !important}
    .contact .form .btn {margin-bottom: 10px}
    
}
@media screen and (max-width:1024px) {
    .slider, .carousel-inner {height: auto}   
    .values  {height:70vh}    
    .values  h1 {margin-top: 15%}  
    .about-page {height: 70vh}  
    .about-page h1 {margin-top: 10%}
}


.department .form-search .form-group {position: relative}
.department .form-search .form-group .btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 20%;
    height: 100%;
    background-color: #e01212;
    color: #fff;
}
.department .form-group {padding: 0;margin: 0}
.department .form-group .form-control {
    padding: 15px 20px;
}

.owl-carousel  .owl-prev, .owl-next {
    position: absolute;
    right: -5%;
    top: 37%;
    background-color: #ffffff !important;
    width: 35px;
    height: 40px;
    color: #949494 !important;
    font-size: 24px !important;
    box-shadow: 0 5px 9px #e6e6e6;
}

.owl-carousel .owl-next {
    right: auto;
    left: -4%;
}

.department ul li {
    background-color: #084d98;
    text-align: center;
    padding: 20px;
    border-radius: 6px;
}

.department ul li a {
    color: #fff;
    text-decoration: none
}
.department .table a {
    display: block;
    text-decoration: none
}
.department .table span {display: inline-block}
.department .table a {
    color: #256ab5;
    font-size: 16px;
}
.department span a {
    color: #6c757d !important;
    margin: 20px 0;
}
.department .table {
    border-spacing: 20px;        
}
.department .table .time {
    margin: auto 0;
    color: #9c9c9c;
}
.department .table tr {
    border: 1px solid #f3f3f3;
    background-color: #ffffff;
    box-shadow: 0 10px 10px #f3f3f3;
}
.department .table td {
    border:none
}
.department .col-lg-12 .btn {
    background-color: #e01212;
    color: #fff;
    width: 100%;
    padding: 16px;
    box-shadow: 0 7px 0px #ad1010;
    transition: all 0.2s ease-in-out
}
.department .col-lg-12 .btn:active {
    transform: translateY(2px);
    box-shadow: 0 3px 0px #ad1010;
    
}
.department .hidden {
    display: none
}
.department-details p {
    line-height: 1.9;
    padding: 10px 0
}
.department-details h3 {
    background-color: #0062cc;
    padding: 13px;
    color: #fff;
    font-size: 19px;
}
@media only screen and (min-width:200px) and (max-width:780px) {
    .department {
        padding: 20px 0 !important
    }
    .department .form-search .form-group .btn {width: auto}
    .department .table .time {font-size: 11px}
    .department .table a {font-size: 12px}
    .department-details h3 {font-size: 14px;text-align: center}
}