/* === General Style ===  */

*, html, body {
    font-family: 'Cairo', sans-serif;
}

:root {
    --maxRed: #d83333;
    --maxLight: #ffdbdb;
    --maxDark: #752525
}

ul {
    padding: 0;
}

a:hover {
    text-decoration: none;
}
.maxHr{
    background: linear-gradient(to right, var(--maxRed), var(--maxDark));
    border-radius: 20px;
    height: 3px;
}

.row {
    margin: 0;
}

.btn-main {
    background-color: var(--maxRed);
    color: white;
    border-radius: 20px
}

.h-line {
    background-color: var(--maxRed)
}

.btn-main:hover {
    box-shadow: 3px 3px 10px var(--maxDark);
    transition: all 0.5s
}

.f08 {
    font-size: 0.8em
}

.f12 {
    font-size: 1.2em
}
.f2{
    font-size: 2em
}

/* === header style  ===  */

/* navbar  */
#mainNav{
    transition: all 1;
    z-index: 999;
}
#mainNav.scroll{
    top: 0 !important;
    transition: top 1s;
    /* transition: opacity 1s; */
    opacity: 1 !important;
    border-bottom: 1px solid var(--maxLight)
}
nav.navbar {
    /* position: fixed; */
    z-index: 2;
    width: 100%;
    background: rgba(255, 255, 255, 0.9);
}

nav.navbar ul li a {
    color: var(--maxRed) !important
}

.navbar-brand {
    /* border-right: 1px solid var(--maxRed); */
    max-width: 180px;
}

.collapse.navbar-collapse ul {
    flex-direction: row;
    justify-content: space-between;
    width: 90%;
}
.collapse.show ul{
    flex-direction: column;

}
li.nav-item hr {
    width: 0;
    transition: all 1s;
    height: 3px;
    margin: 0;
}

.nav-item.active hr, li.nav-item:hover hr {
    width: 100%;
    border-radius: 20px;
    background-color: var(--maxRed);
    transition: all 1s;
}

li.nav-item:hover {
    opacity: 1;
    transition: all 0.5s;
}

.nav-item.active {
    font-weight: bold;
    opacity: 1;
}

.nav-item {
    opacity: 0.8;
}

/* === slider Style ===  */

.carousel-indicators {
    left: unset !important;
    margin-right: 5%;
    flex-direction: column;
    height: 100%;
    bottom: 0;
}

.carousel-indicators li {
    height: 30px;
    width: 3px;
    margin: 5px 0;
    cursor: pointer;
}

/* .carousel-inner{
    max-height: 600px;
    position: relative;
} */

/* .carousel-item, .carousel-item .row, .carousel-item .row div  {
    max-height: 600px;
    height: 100% !important ;
} */

.carousel-item .row .imageSide {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* animation floatine === */

@keyframes float {
    0% {
        /* box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); */
        transform: translatey(0px);
    }
    50% {
        /* box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2); */
        transform: translatey(-20px);
    }
    100% {
        /* box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); */
        transform: translatey(0px);
    }
}

.carousel-item .row .imgCouble img:last-child {
    width: 80%;
    transform: translatey(0px);
    animation: float 6s ease-in-out infinite;
}

#carouselExampleIndicators .carousel-inner {
    background-image: url(../images/bk.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.imgCouble {
    position: relative;
}

.imgCouble img:first-child {
    position: absolute;
    width: 30%;
    z-index: 2;
    left: 20%;
    top: 10%;
    transform: translatey(0px);
    animation: float 4s ease-in-out infinite;
}

 .redTitle {
    color: var(--maxRed);
    font-weight: bold
}

.slider-span {
    line-height: 2em;
    position: relative;
}

.slider-text-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.blur {
    position: absolute;
    height: 100%;
    width: 100%;
    background: linear-gradient( transparent, #f8f8f8);
}

/* === about us ===  */

.about-us-black, footer {
    background: linear-gradient(45deg, rgb(41, 41, 41), rgb(20, 20, 20));
    color: white;
}

.about-title {
    position: relative;
}

.about-title h3, .about-title span {
    margin-left: 20px;
    margin-bottom: 5px;
}

.about-title span {
    font-size: 0.8em;
}

.about-title .h-line {
    width: 10px;
    position: absolute;
}

.about-text b {
    color: var(--maxRed)
}

/* === animated circles === */

.circle {
    width: 100px;
    margin: 6px 6px 20px;
    display: inline-block;
    position: relative;
    text-align: center;
    line-height: 1.2;
}

.circle canvas {
    vertical-align: top;
}

.circle strong {
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    text-align: center;
    line-height: 40px;
    font-size: 30px;
}

.orange strong, .orange h5 {
    color: #f7941d;
    font-weight: bold
}

.terq strong, .terq h5 {
    color: #00e4e4;
}

.circle strong i {
    font-style: normal;
    font-size: 0.6em;
    font-weight: normal;
}

.circle span {
    display: block;
    color: #aaa;
    margin-top: 12px;
}

/* === about us white part === */

.about-us-white {
    position: relative;
}

.about-us-white .container {
    background: rgba(255, 255, 255, 0.5);
    z-index: 3;
    position: relative;
}

.red1, .red2, .red3 {
    position: absolute;
}

.red1 {
    right: 0;
    top: 3em;
    animation: float 3s ease-in-out infinite;
}

.red2 {
    left: 3em;
    bottom: 1em;
    animation: float 4s ease-in-out infinite;
}

.red3 {
    left: -3em;
    top: -1em;
    animation: float 3s ease-in-out infinite;
}

/* === clients section === */

.MultiCarousel {
    float: left;
    overflow: hidden;
    padding: 15px;
    width: 100%;
    position: relative;
}

.MultiCarousel {
    Height: 189px;
}

.MultiCarousel .MultiCarousel-inner {
    transition: 1s ease all;
    float: left;
}

.MultiCarousel .MultiCarousel-inner .item {
    float: left;
}

.MultiCarousel .MultiCarousel-inner .item>div {
    text-align: center;
    padding: 10px;
    margin: 10px;
}

.MultiCarousel .leftLst, .MultiCarousel .rightLst {
    position: absolute;
    border-radius: 50%;
    top: calc(50% - 20px);
}

.MultiCarousel .leftLst {
    left: 0;
}

.MultiCarousel .rightLst {
    right: 0;
}

.MultiCarousel .leftLst.over, .MultiCarousel .rightLst.over {
    pointer-events: none;
    opacity: 0.7;
}

.btn-transparent {
    background: transparent;
}
.fas{
    cursor: pointer;
}
/* === our focus === */
.circle-image{
    background: linear-gradient(var(--maxRed), var(--maxDark));
    border-radius: 50%;
    width:120px;
    height: 120px;
    margin: auto;
    text-align: center;
}
.circle-image img{
    margin-top: 25px;
}
.focus-item{
    position: relative;
    height: 350px;
    overflow: hidden;
    transition: all 0.5s
}
 
.focus-item{
    height: 100%;
    transition: all 0.5s
    
}
.focus-background{
    position: absolute;
    height: 90%;
    width: 100%
    ;border: 1px solid var(--maxRed);
    border-radius: 40px;
    bottom: 0;
    z-index: -1;
    background: white
}
.our-focus{
    position: relative;
}
.our-focus .red1{
    right: -7em;
    top: 5em;
    z-index: -2;
}
.our-focus .red2{
    left: -6em;
    top: 10em;
    z-index: -2;
}
/* === our projects ===  */

.our-projects .our-projects-header{
    background: linear-gradient(to right, var(--maxRed), var(--maxDark));
}
.our-projects .nav li a{
    color: white;
}
.our-projects .nav-item{
    opacity: 1 !important;
}
.our-projects .nav-link.active{
    background: rgb(233, 233, 233);
    color: var(--maxRed);
    font-weight: bold;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    opacity: 1;
}
.tab-pane{
    background: rgb(233, 233, 233);

}
.tab-content ul li::before{
    content: "\2022";
  color: var(--maxRed);
  font-weight: bold;
  display: inline-block; 
  width: 1em;
  height: 1em;
  margin-left: -1em;
}

.carousel-control-prev  {
    left: -8%
}
.carousel-control-next  {
    right: -8%
}

 /* === vector map ===  */
.grey{
    background: #eeeeee
}
.VectorMap{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}
/* === footer === */
footer .maxHr{
    height: 10px;
}
.vert{
    display: flex;
    flex-direction: row;
}
.vert a{
    font-size: 2.5em;
    color: white
}
.vert li:first-child {
    border-right: 1px solid white;
}
.map{
    border-radius: 40px;
    overflow: hidden;
}

/* === RIGHTS ==== */
.Rights{
    height: auto !important;
    border-radius: 0;
}
.Rights .container{
    display: flex;
    justify-content: space-between;
}
.Rights .container span:last-child{
    cursor: pointer;
}
.MN img{
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
  transition: all 0.5s
}
.MN a:hover img, .MN a:hover{
    -webkit-filter: grayscale(0);
    transition: all 0.5s ;
    filter: grayscale(0);
    box-shadow: none;

}
.MN a{
    box-shadow: 3px 3px 15px #cecece
}