.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;
                /* margin-left: 20px;
                width: 110%; */
            }
}
@media only screen and (min-width:  1100px){
    #firstcarousel{
        height: 500px;
    }
    #firstcarousel div img{
        height: 500px;
    }
}

/* Quick Actions */
@media only screen and (min-width:  1100px) {
    .vert{
        margin-top: 100px;
    }
    #outer_row{
        display: flex;
        }
        #col-first{
            order: 2;
        }
        #col-second{
            order: 1;
        }
        #col-third{
            order: 0;
        }

}
#quick{
    background-color:  #acbcf2;
}
.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 .col-8 .action{
    color: #003559;
}
.col-8{
    text-align: right;
    margin-top: 5%;

}
.col-8 h4{
    font-family: 'Tajawal', sans-serif;
    font-size: 20px;
}
.col-8 h6{
    font-family: 'Cairo', sans-serif;
    font-size: 10px;
}
.col-8 h4, h6{
    color: white;
}
.inner-row:hover img{
    background-color: #003559;
}




/* 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;
} */

#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%;
}

@media only screen and (max-width:  650px){
    #service-one{
        display: block;
        width: 300px;
        height: 300px;
        margin-top: 20px;
        margin-left: 15px;
    }
    #service-one div img{
        width: 80%;
    }
    #service-one h3{
        font-size: 25px;
        margin: -10px 0 35px 40px;
    }

    #service-two{
        display: block;
        width: 300px;
        height: 300px;
        margin-top: 20px;
        margin-left: 15px;
    }
    #service-two div img{
        width: 80%;
    }
    #service-two h3{
        font-size: 25px;
        margin: -10px 0 35px 40px;
    }

    #service-three{
        display: block;
        width: 300px;
        height: 300px;
        margin-top: 20px;
        margin-left: 15px;
    }
    #service-three img{
        width: 40%;
        margin-top: -15px;
        transform: translateX(10px);
    }
    #service-three h3{
        font-size: 25px;
        margin: -10px 0 35px 40px;
    }
    #service-four{
        display: block;
        width: 310px;
        height: 310px;
        margin-top: 20px;
        margin-left: 15px;
        margin-bottom: 50px;
    }
    #service-four  img{
        width: 40%;
        margin-top: -5px;
        transform: translateX(10px);
    }
    #service-four h3{
        font-size: 25px;
        margin: -10px 0 35px 40px;
    }
    #service-five{
        display: block;
        width: 310px;
        height: 310px;
        margin-top: 20px;
        margin-left: 15px;
    }
    #service-five img{
        width: 40%;
        margin-top: -5px;
        transform: translateX(10px);
    }
    #service-five h3{
        font-size: 25px;
        margin: -10px 0 35px 40px;
    }
}

@media only screen and (min-width:  650px) and (max-width: 900px){
    #service-one{
        display: block;
        width: 300px;
        height: 300px;
        margin-top: 20px;
        margin-left: 25%;
    }
    #service-one div img{
        width: 80%;
    }
    #service-one h3{
        font-size: 25px;
        margin: -10px 0 35px 40px;
    }

    #service-two{
        display: block;
        width: 300px;
        height: 300px;
        margin-top: 20px;
        margin-left: 25%;
    }
    #service-two div img{
        width: 80%;
    }
    #service-two h3{
        font-size: 25px;
        margin: -10px 0 35px 40px;
    }

    #service-three{
        display: block;
        width: 300px;
        height: 300px;
        margin-top: 20px;
        margin-left: 25%;
    }
    #service-three img{
        width: 40%;
        margin-top: -15px;
        transform: translateX(10px);
    }
    #service-three h3{
        font-size: 25px;
        margin: -10px 0 35px 40px;
    }
    #service-four{
        display: block;
        width: 310px;
        height: 310px;
        margin-top: 20px;
        margin-left: 25%;
        margin-bottom: 50px;
    }
    #service-four  img{
        width: 40%;
        margin-top: -5px;
        transform: translateX(10px);
    }
    #service-four h3{
        font-size: 25px;
        margin: -10px 0 35px 40px;
    }
    #service-five{
        display: block;
        width: 310px;
        height: 310px;
        margin-top: 20px;
        margin-left: 25%;
    }
    #service-five img{
        width: 40%;
        margin-top: -5px;
        transform: translateX(10px);
    }
    #service-five h3{
        font-size: 25px;
        margin: -10px 0 35px 40px;
    }

}
@media only screen and (min-width:  901px) and (max-width: 1025px){
    #service-one{
        display: inline-block;
        width: 300px;
        height: 300px;
        margin-top: 20px;
        margin-left: 50px;
    }
    #service-one div img{
        width: 80%;
    }
    #service-one h3{
        font-size: 25px;
        margin: -10px 0 35px 40px;
    }

    #service-two{
        display: inline-block;
        width: 300px;
        height: 300px;
        margin-top: 20px;
        margin-left: 150px;
    }
    #service-two div img{
        width: 80%;
    }
    #service-two h3{
        font-size: 25px;
        margin: -10px 0 35px 40px;
    }

    #service-three{
        display: block;
        width: 300px;
        height: 300px;
        margin-top: -70px;
        margin-left: 30%;
    }
    #service-three img{
        width: 40%;
        margin-top: -15px;
        transform: translateX(10px);
    }
    #service-three h3{
        font-size: 25px;
        margin: -10px 0 35px 40px;
    }
    #service-four{
        display: inline-block;
        width: 300px;
        height: 300px;
        margin-top: -100px;
        margin-left: 50px;
    }
    #service-four  img{
        width: 40%;
        margin-top: -5px;
        transform: translateX(10px);
    }
    #service-four h3{
        font-size: 25px;
        margin: -10px 0 35px 40px;
    }
    #service-five{
        display: inline-block;
        width: 300px;
        height: 300px;
        margin-top: -150px;
        margin-left: 150px;
        transform: translateY(-55px);

    }
    #service-five img{
        width: 40%;
        margin-top: -5px;
        transform: translateX(10px);
    }
    #service-five h3{
        font-size: 25px;
        margin: -10px 0 35px 40px;
    }
}


/* 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: 300px;
    }
    #Clients h1{
        width: 150px;
        /* margin-left: 27%; */
        margin: auto ;
    }
    #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-bottom: 50px;
    
}
#whyus #whyus_row{
    text-align: center;
}
#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: left;
    margin: 25px 0;
    color: #1D3A99;
}
.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;
    }
  }
  @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;
  }