:root{
    --orange : #FFAA23;
    --red : #FE6150;
    --blue : #124E70;
    --light-blue : #1BC0C6;
    --gray : #DFE0E5;
    --white : #fff;
    --main-font: 'El Messiri', sans-serif;
    --main-font2: 'Tajawal', sans-serif;
}
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: #f6f6f6;
}
/*Overwrite Navbar*/
.pages-item-link{
    text-decoration: none;
    color: var(--blue) !important;
}
.pages-item-link:hover{
    color: var(--blue) !important;
}
.header-finance{
    color: var(--blue) !important;
}
.header-finance:hover{
    color: var(--orange) !important;
}
/****************/
.about{
    margin: 25vh auto 20vh;
    direction: rtl;
    font-family: testfont2;
}
.who{
    margin: 5vh auto;
    text-align: center;
}
.who-title{
    color: var(--blue);
    font-size: 10vh;
    font-family: testfont;
}
.who-title .syartna{
    color: var(--orange);
}
.who-desc{
    margin: 5vh auto 15vh;
    width: 50%;
    text-align: justify;
    font-size : 3vh;
}
@media only screen and (max-width : 850px ){
    .about{
        margin: 15vh auto 5vh;
    }
    .who{
        margin: auto;
        text-align: center;
    }
    .who-title{
        color: var(--blue);
        font-size: 5vh;
        font-weight: bold;
    }
    .who-title .syartna{
        color: var(--orange);
    }
    .who-desc{
        width: 95%;
        margin: auto;
    }
}
@media only screen and (min-width : 1400px ){
    .who-desc{
        width: 55%;
        text-align: justify;
    }    
    
}
/* ************************************************** */
.how{
    margin: 10vh auto 20vh;
    font-family: testfont2;
}
.how-title{
    color: var(--light-blue);
    font-size: 6vh;
    font-family: testfont;
    text-align: center;
    margin: auto auto 10vh;
}
.how-row{
    margin: 10vh auto ;
    text-align: center;
    width: 70%;
    display: flex;
}
.how-col{
    margin:  5vh auto;
    position: relative;
    height: 250px;
    width: 45vh ;
    border-radius: 20px;
}
.how-first,
.how-third{
    background-color: #A1D7DB ;
}
.how-second,
.how-fourth{
    background-color: #FFCE82 ;
}
.how-img{
    width: 150px;
    position: absolute;
    top: -30%;
    left: 50%;
    transform: translateX(-50%);
}
.how-desc{
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    font-size: 3vh;
    color : var(--blue);
}
    .how-fourth .how-img{
        width: 200px;
    }
@media only screen and (max-width : 850px ){
    .how{
        margin: 5vh auto 0;
    }
    .how-title{
        font-size: 5vh;
        margin: auto auto 5vh;
    }
    .how-row{
        width: 90%;
        margin:  auto auto;
    }
    .how-desc{
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        font-size: 2vh;
    }
}
@media only screen and (min-width : 850px ){
    .how-row-second{
        flex-direction: row-reverse;
    }
    .how-col{
        margin: 3vh auto;
    }
    .how-first::after{
        content: "\2190";
        position: absolute;
        left: -26%;
        top: 50%;
        transform: translateY(-50%);
        font-size: 5vh;
        color: var(--blue);
        font-weight: bold;
    }
    .how-second::after{
        content: "\2193";
        position: absolute;
        left: 50%;
        bottom: -20%;
        transform: translateX(-50%);
        font-size: 5vh;
        color: var(--blue);
        font-weight: bold;
    }
    .how-third::after{
        content: "\2192";
        position: absolute;
        right: -26%;
        top: 50%;
        transform: translateY(-50%);
        font-size: 5vh;
        color: var(--blue);
        font-weight: bold;
    }
}
@media only screen and (min-width : 1400px ){
    .how-desc{
        font-size: 2.5vh;
    }
    .how-row{
        margin: 10vh auto  0;
    }
    .how-col{
        margin : 5vh auto;
    }
    .how-first::after{
        left: -30%;
        transform: translateY(-50%);
    }
    .how-second::after{
        bottom : -30%;
    } 
    .how-third::after{
        right: -30%;
        transform: translateY(-50%);
    }
}
@media only screen and (min-width : 1400px )
and (-webkit-min-device-pixel-ratio: 1){
    .how-row{
        margin: 10vh auto  0;
        width : 60%;
    }
    .how-col{
        margin : 5vh auto 0;
        width: 35vh ;
        height: 275px;
    }
    .how-img{
        width: 165px;
    }
    .how-second .how-img{
         width: 185px;
    }
    .how-fourth .how-img{
        width: 225px;
    }    
    .how-first::after{
        left: -27.5%;
        transform: translateY(-50%);
    }
    .how-second::after{
        left: 50%;
        bottom : -27.5%;
        transform: translateX(-50%);
    }    
    .how-third::after{
        right: -27.5%;
        transform: translateY(-50%);
    }
}
@media only screen and (min-width : 1600px ){
    .how-first::after{
        left: -25%;
        transform: translateY(-50%);
    }
    .how-third::after{
        right: -25%;
        transform: translateY(-50%);
    }
}

/********************************************/
.last{
    /* width: fit-content; */
    padding: 0;
    /* margin: 0; */
    overflow-x: hidden;
    width: 50%;
    font-family: testfont2;
    
}
.last-title{
    color: var(--blue);
    font-size: 7.5vh;
    font-family: testfont;
    /* position: relative; */
    /* margin: 0; */
}
/* .last-title::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 5px;
    right: 0;
    top: 45%;
    background-color: var(--gray);
} */
@media only screen and (min-width : 1400px ){
    
    .last{
     width: 45%;
    }
}
@media only screen and (max-width : 850px ){
    .last-title{
        font-size: 3vh;
        text-align: center;
    }
    .last-title::after{
        display: none;
    }
}

/* **************************************************** */
.whyus{
    text-align: center;
    margin: 0 0 5vh;
    padding: 10vh 0;
    direction: rtl;
    position: relative;
    font-family: testfont2;
}
.why-row{
    width: 80%;
    margin: auto;
}
.why-title-col{
    margin: auto;
    text-align: center;
}
.why-title{
    font-size: 10vh;
    color: var(--orange);
    font-family: testfont;
}
.why-features-col{
    margin: auto;
}
.features-list{
    list-style: none;
    padding: 0;
}
.features-list li{
    display: flex;
    margin: 3vh auto;
    padding: 1.5vh 2vh 0 0;
    border: 1px solid var(--white);
    background-color: var(--light-blue);
    position: relative;
    width: 85%;
    border-radius: 15px 50px 50px 15px;
    transition: all 0.5s;
}
.features-list li:hover{
    transform: scale(1.2);
}
.feature-number {
    font-size: 3.8vh;
    border-radius: 50%;
    color: var(--white);
    width: 6.7vh;
    height: 6.7vh;
    background-color: var(--blue);   
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    padding-top: 0.75vh;
    border : 1px solid var(--white);
}
.feature-text{
    font-size: 3vh;
    margin-right: 6vh;
    text-align: right;
    width: max-content;
    color: var(--white);
}
@media only screen and (max-width : 900px){
    .whyus{
        padding: 5vh 0;
    }
    .why-row{
        width: 100%;
    }
    .why-row-desktop{
        display: none;
    }
    .why-title{
        font-size: 6vh;
    }
    .feature-number {
        font-size: 4vh;
        width: 6.5vh;
        height: 6.5vh;
        padding-top: 0.75vh;
    }
    .feature-text{
        font-size: 1.9vh;
        margin-right: 6vh;
    }
}
@media only screen and (min-width : 1400px){
  /*  .why-title{
    font-size : 13vh;
        
    }*/
    .feature-number {
        font-size: 3vh;
        width: 5.7vh;
        height: 5.7vh;
        padding-top: 0.75vh;
        border : 1px solid var(--white);
    }
    .feature-text{
        font-size: 2.5vh;
        margin-right: 5vh;
    }
}
/*******************************/

@media only screen and (min-width : 1200px){
    .why-row{
        display: none;
    }
    .features-desktop-col{
        margin: auto;
        text-align: center;
    }
    .features-list-desktop{
        list-style: none;
        padding: 0;
    }
    .features-list-desktop li{
        display: flex;
        margin: 3vh auto;
        padding: 1.5vh 2vh 0 0;
        border: 1px solid var(--white);
        background-color: var(--light-blue);
        position: relative;
        width: 95%;
        font-size : 16px;
        border-radius: 15px 50px 50px 15px;
        transition: all 0.5s;
    }
    .features-list-desktop li:hover{
        transform: scale(1.2);
    }
}