.vert .carousel-item-next.carousel-item-left,
.vert .carousel-item-prev.carousel-item-right {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.vert .carousel-item-next,
.vert .active.carousel-item-right {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100% 0);
}

.vert .carousel-item-prev,
.vert .active.carousel-item-left {
-webkit-transform: translate3d(0,-100%, 0);
        transform: translate3d(0,-100%, 0);
}
@media only screen and (max-width:  1100px) {
            .vert{
                margin-top: 110px;
                align-content: center;
           
            }
            #firstcarousel{
                height: 150px;
                width: 100%;
            }
                #firstcarousel div img{
                    height: 150px;
                    width:100%;
                 }
}
@media only screen and (min-width:  1100px){
    #firstcarousel{
        height: 500px;
        width: auto !important;

    }
    #firstcarousel div img{
        height: 500px;
        width:100%;

    }
}

/* Quick Actions */


#quick{
    height: 120px;
}
#action_row{
    text-align: center;
   /* padding-top: 10px;*/
    height: 150px;
   /* display: flex;
    flex-direction: row-reverse;*/
}
#action_row h4{
    font-family: 'Tajawal', sans-serif;
    color: #fff;
    font-size: 20px;
}
#action_row p{
    font-family: 'Tajawal', sans-serif;
    color: #fff;
    font-size: 12px;
}
.action-text h4, h6{
    color: white;
}
.quick-col{
    transition: transform 0.5s;
}
.quick-col:hover{
    transform: scale(1.2);
    background-color: white;
    box-shadow: 4px 4px 8px 8px rgba(255, 255, 255, 0.2), 0 6px 20px 10px rgba(255, 255, 255, 0.3);
}
.quick-col:hover img{
    background-color: #003559;
    width: 100%;
    height: auto;
}

.quick-col:hover h4{
    background: #5543ca;
    background: -moz-linear-gradient(left,#f4524d  0%,#5543ca 100%) !important;
    background: -webkit-linear-gradient(left,#f4524d  0%,#5543ca 100%) !important;
    background: linear-gradient(to right,#f4524d  0%,#5543ca  100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
.quick-col:hover p{
    background: #5543ca;
    background: -moz-linear-gradient(left,#f4524d  0%,#5543ca 100%) !important;
    background: -webkit-linear-gradient(left,#f4524d  0%,#5543ca 100%) !important;
    background: linear-gradient(to right,#f4524d  0%,#5543ca  100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
#action_row div img{
    width: 25%;
}
#action_row .quick-lg img{
    width: 50%;
    margin-right: 70px;
}
#action_row .quick-lg div .col{
    margin-top: 35px;
}
#action_row .quick-lg div h4{
    font-size: 25px;
}
#action_row .quick-lg div p{
    font-size: 15px;
}
@media only screen and (max-width:  850px){
    #quick{
        height: 580px;
    }
    #action_row .quick-col{
        width: auto;
        margin: 0 auto;
        margin-bottom: 50px;
        margin-top: 20px;

    }
    #action_row div img{
        width: 50%;
    }
    #action_row .quick-med img{
        width: 40%
    }
    #action_row .quick-lg img{
        width: 60%;
        margin-right: 25px;
    }
    #action_row .quick-lg div .col{
        margin-top: 20px;
    }
    #action_row .quick-lg div h4{
        font-size: 20px;
    }
    #action_row .quick-lg div p{
        font-size: 15px;
    }
}
@media only screen and (max-width:  900px) and (orientation: landscape){
    #quick{
        height: 700px;
    }
    #action_row div img{
        width: 20%;
    }
    #action_row .quick-lg img{
        width: 55%;
    }
    #action_row .quick-med img{
        width: 20%
    }
}

@media only screen and (min-width:  1100px) {
    .vert{
        margin-top: 100px;
    }
    #outer_row{
        display: flex;
        }
       /*  #first{
            order: 2;
        }
        #second{
            order: 0;
        }
        #third{
            order: 3;
        }
        #fourth{
            order: 1;
        }*/
        .quick-col:nth-of-type(1){
            order:4;
        }
           .quick-col:nth-of-type(2){
            order:3;
        }
           .quick-col:nth-of-type(3){
            order:2;
        }
           .quick-col:nth-of-type(4){
            order:1;
        }
}
#quick{
    background-color:  #0F945A;
}
.inner-row{
    transition: transform 0.5s;
}
.inner-row:hover{
    transform: translateX(-10px);
    background-color: white;
    box-shadow: 4px 4px 8px 8px rgba(255, 255, 255, 0.2), 0 6px 20px 10px rgba(255, 255, 255, 0.3);
}
.inner-row:hover .action-text .action{
    color: #003559;
}
.action-text{
    text-align: right;
    margin-top: 5%;

}
.action-text h4{
    font-family: 'Tajawal', sans-serif;
    font-size: 15px;
}
.action-text h6{
    font-family: 'Cairo', sans-serif;
    font-size: 10px;
}
.action-text h4, h6{
    color: white;
}

.inner-row:hover img{
    background-color: #003559;
    width: 100%;
    height: auto;
}




/* Quick brief, mission and vision */

#mission-outer-row .carousel-item{
    text-align: right;
    padding-right: 50px;
}
#mission-outer-row .carousel-item h4{
    font-family: 'Tajawal', sans-serif;
    margin-top: 50px;
    margin-bottom: 40px;
    color: #1D3A99;
}
#mission-outer-row .carousel-item p{
    font-family: 'Cairo', sans-serif;
    text-align: right;
}

/* Services */
#service_header{
    font-family: 'Cairo', sans-serif;
    text-align: center;
    color: #1D3A99;
    font-size: 55px;
}
#service_row{
    text-align: center;
    padding-top: 15px;
    margin: 50px 0;
}
#service_row img{
    margin-bottom: 25px;
    width: auto;
    transition: transform 0.5s;

}
#service_row h4{
    font-family: 'Tajawal', sans-serif;
    color: #F42D18;
    font-size: 20px;
}
#service_row img:hover{
    transform: scale(1.2);
    cursor: pointer;
}
.servicecol:nth-of-type(1){
            order:4;
        }
.servicecol:nth-of-type(2){
            order:3;
        }
.servicecol:nth-of-type(3){
            order:2;
        }
.servicecol:nth-of-type(4){
            order:1;
        }        
@media only screen and (max-width:  950px){
    #service_row div{
        width: 100%;
        margin: 50px 0;
    }
    .servicecol:nth-of-type(1){
            order:1;
        }
.servicecol:nth-of-type(2){
            order:2;
        }
.servicecol:nth-of-type(3){
            order:4;
        }
.servicecol:nth-of-type(4){
            order:3;
        } 

}
/* #service-one{
    width: 350px;
    height: 350px;
    border-bottom: 5px solid #5C0D04;
    border-left: 2px solid #5C0D04;
    border-right: 2px solid #5C0D04;
    border-radius: 50%;
    margin-top: 20px;
    display: inline-block;
}
#service-one h3{
    color: #35426E;
    margin: -10px 0 35px 50px;
    width: 70%;
    text-align: center;
}
#service-one div{
    text-align: center;
}
#service-two{
    width: 350px;
    height: 350px;
    border-bottom: 5px solid #5C0D04;
    border-left: 2px solid #5C0D04;
    border-right: 2px solid #5C0D04;
    border-radius: 50%;
    margin-top: 20px;
    display: inline-block;
    margin-left: 35%
}
#service-two h3{
    color: #35426E;
    margin: -10px 0 35px 50px;
    width: 70%;
    text-align: center;
}
#service-two div{
    text-align: center;
}

#service-three{
    width: 350px;
    height: 350px;
    border-bottom: 5px solid #5C0D04;
    border-left: 2px solid #5C0D04;
    border-right: 2px solid #5C0D04;
    border-radius: 50%;
    margin-top: -170px;
    display: block;
    margin-left: 33%;
}
#service-three h3{
    color: #35426E;
    margin: -10px 0 35px 50px;
    width: 70%;
    text-align: center;
}
#service-three img{
    margin-left: 27%;
}
#service-four{
    width: 350px;
    height: 350px;
    border-bottom: 5px solid #5C0D04;
    border-left: 2px solid #5C0D04;
    border-right: 2px solid #5C0D04;
    border-radius: 50%;
    margin-top: -140px;
    display: inline-block;
}
#service-four h3{
    color: #35426E;
    margin: -10px 0 35px 50px;
    width: 70%;
    text-align: center;
}
#service-four img{
    margin-left: 27%;
}
#service-five{
    width: 350px;
    height: 350px;
    border-bottom: 5px solid #5C0D04;
    border-left: 2px solid #5C0D04;
    border-right: 2px solid #5C0D04;
    border-radius: 50%;
    margin-top: -160px;
    display: inline-block;
    margin-left: 35%;
    transform: translateY(-70px);
}
#service-five h3{
    color: #35426E;
    margin: -10px 0 35px 50px;
    width: 70%;
    text-align: center;
}
#service-five img{
    margin-left: 27%;
} */

/* *********************************************************************************** */


/* Clients */

#Clients{
    height: 450px;
    width: 100%;
}
#Clients h1{
    font-weight: 400px;
    font-size: 55px;
    color:#2F323A;
    padding-bottom: 25px;
    padding-top: 50px;
    text-align: center;
    margin-bottom: 3%;
    font-family: 'Cairo', sans-serif;
    color: #1D3A99;

}
@media only screen and (max-width:  800px) {
    #Clients{
        height: 400px;
    }
    #Clients h1{
        width: 150px;
        /* margin-left: 27%; */
        margin: auto ;
        margin-bottom: -10%;
    }
    #Clients .img-area{
        width: 100px;
    }
 }
@media only screen and (max-width:  750px ) and (orientation: landscape) {
    #Clients h1{
        width: 100%;
        /* margin-left: 15%; */
        text-align: center;
    }
}
#Clients .single-box{
    position: relative;
    margin-bottom: 35px;
    background-color: white;
    border-radius: 5%;
    transition: background-color 1s, transform 2s;

}
#Clients .single-box:hover{
    background-color: #FD5231;
    transform: translateY(-10px);
}
#Clients .img-area{
    border-radius: 50%;
    text-align: center;
}
#Clients .img-area .svg{
    width: auto;
}
#Clients .carousel-indicators{
    left: 0;
    top: auto;
    bottom: -70px;

}
#Clients .carousel-indicators li{
    background-color:#F42D18;
    width: 10px;
    height: 10px;
    border-radius: 100%;
}
/* Why us */
#whyus h1{
    font-family: 'Cairo', sans-serif;
    font-size: 55px;
    color: #1D3A99;
    text-align: center;
    margin: 150px 0;
    
}
#whyus #whyus_row{
    text-align: center;
    margin-bottom: 50px;
}
#whyus #whyus_row div{
    line-height: 50px;
}
#whyus #whyus_row img{
    margin-bottom: 30px;
    transition: transform 0.5s;
}
#whyus #whyus_row img:hover{
    cursor: pointer;
    transform: scale(1.5);
}
#whyus #whyus_row h3{
    font-family: 'Tajawal', sans-serif;
    font-size: 30px;
    color:#F42D18;
}
#whyus #whyus_row p{
    font-family: 'Cairo', sans-serif;
    font-size: 15px;
    color:#2F323A;
    word-spacing: 5px;
}

/* Feedback************************************* */
#feedback_header{
    font-family: "Cairo",sans-serif;
    text-align: center;
    margin: 25px 0;
    color: #1D3A99;
}
#feedback-outer-row{
    margin-left: 15%;
}
.component{
    font-family: "Tajwal",sans-serif;
    width: 750px;
    margin:0 auto;
    padding: 3rem;
  }
  @media only screen and (max-width: 1025px) {
    #feedback_header{
        text-align: center;
    }
    #feedback-outer-row{
        margin-left: -3%;
    }
  }
  @media only screen and (max-width:  750px) {
    .component{
        width: 125%;
        margin-left: -45px;
        /* margin-left: 27%; */
    }
 }
  .component blockquote.quote {
      position: relative; 
      text-align: center;
      padding: 1rem 1.2rem;
      width: 80%;  /* create space for the quotes */
      color: #484748;
      margin: 1rem auto 2rem;
      font-family: "Cairo",sans-serif;

  }
  .component blockquote.AR {
      background:
      linear-gradient(to right, #039be5 4px, transparent 4px) 0 100%,
      linear-gradient(to left, #039be5 4px, transparent 4px) 100% 0,
      linear-gradient(to bottom, #039be5 4px, transparent 4px) 100% 0,
      linear-gradient(to top, #039be5 4px, transparent 4px) 0 100%;
      background-repeat: no-repeat;
      background-size: 20px 20px;
  }
  
  .component blockquote.AR {
      background:
      linear-gradient(to right, #039be5 4px, transparent 4px) 0% 0%,
      linear-gradient(to bottom, #039be5 4px, transparent 4px) 0% 0%,
      linear-gradient(to left, #039be5 4px, transparent 4px) 100% 100%,
      linear-gradient(to top, #039be5 4px, transparent 4px) 100% 100%;
      background-repeat: no-repeat;
      background-size: 20px 20px;
  }
      
  
  /* -- create the quotation marks -- */
  .component blockquote.quote:before,
  .component blockquote.quote:after{
      font-family: FontAwesome;
      position: absolute;
      color: #039be5;
      font-size: 34px;
  }
  
  /* .component blockquote.AR:before{
      content: "\f10d";
      top: -12px;
      margin-right: -20px;
      right: 100%;
  }
  .component blockquote.AR:after{
      content: "\f10e";
      margin-left: -20px;
      left: 100%;  
      top: auto;
      bottom: -20px;
  } */
  .component blockquote.AR:before{
      content: "\f10e";
      margin-right: -20px;
      bottom: -20px;
      right: 100%;
  }
  .component blockquote.AR:after{
      content: "\f10d";
      margin-left: -20px;
      left: 100%;  
      top: -20px;
      bottom: auto;
  }

/* ********************************************** */
#regForm {
    background-color: #ffffff;
    margin: 50px 0;
    font-family: Raleway;
    width: 100%;
    direction: rtl;
  }
  input {
    padding: 10px;
    width: 100%;
    font-size: 17px;
    font-family: Raleway;
    border: 1px solid #aaaaaa;
  }

  .title {
    text-align: right;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 3.2em;
    line-height: 48px;
    padding-bottom: 30px;
    font-size: 40px;
    color: #5543ca;
    font-family: 'Tajawal', sans-serif;
      background: #5543ca;
      background: -moz-linear-gradient(left,#f4524d  0%,#5543ca 100%) !important;
      background: -webkit-linear-gradient(left,#f4524d  0%,#5543ca 100%) !important;
      background: linear-gradient(to right,#f4524d  0%,#5543ca  100%) !important;
      -webkit-background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
      margin-top: -100px;
  }
  .contact-form .form-field {
    position: relative;
    margin: 22px 0;
    text-align: center;
  }
  .contact-form .form-control{
    position: relative;
    margin: auto;
    direction: rtl;
}
option {
  left: 20px;
  bottom: 11px;
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  color: #5543ca;
  cursor: text;
}
select{
  margin-top: 40px;
  color:#000;
  text-shadow:0 1px 0 rgba(0,0,0,0.4);
}
option:not(:checked) { 
  background-color: #FFF;  
}
.contact-form .label {
    position: absolute;
    /* left: 20px; */
    right: 20px;
    bottom: 20px;
    font-size: 18px;
    line-height: 26px;
    font-weight: 400;
    color: #5543ca;
    cursor: text;
    font-family: 'Cairo',sans-serif;
    transition: -webkit-transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
    transition: transform .2s ease-in-out, 
    -webkit-transform .2s ease-in-out;
  }
  .contact-form .labelcheck {
    position: absolute;
    /* left: 20px; */
    right: 20px;
    bottom:40px;
    font-size: 18px;
    line-height: 26px;
    font-weight: 400;
    color: #5543ca;
    cursor: text;
    font-family: 'Cairo',sans-serif;
    transition: -webkit-transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
    transition: transform .2s ease-in-out, 
    -webkit-transform .2s ease-in-out;
  }
  .contact-form .input-text {
    display: block;
    width: 100%;
    height: 36px;
    border-width: 0 0 2px 0;
    border-color: #5543ca;
    font-size: 18px;
    line-height: 26px;
    font-weight: 400;
  }
  .contact-form .input-text:focus {
    outline: none;
  }
  .contact-form .input-text:focus + .label,
  .contact-form .input-text.not-empty + .label {
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
  }
  .contact-form .submit-btn {
    display: inline-block;
    background-color: #000;
     background-image: linear-gradient(125deg,#a72879,#064497);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 16px;
    padding: 8px 16px;
    border: none;
    width:150px;
    cursor: pointer;
    border-radius: 15px;
    margin-right: 10px;
    font-family: 'Cairo', sans-serif;
  }
  @media only screen and (max-width:  900px) {
      .title{
        margin-top: 0px;
      }
  }