@font-face {
    /* font-family: 'Graphik';
    src: url('fonts/Graphik\ Arabic-Regular.ttf'); */

}
*{
    /* font-family: "Graphik", sans-serif;
    font-weight:normal; */
    font-family: "IBM Plex Sans Arabic", sans-serif;
    /* font-weight: 100; */
    font-style: normal;
    }
    body{
        overflow: auto;
        background-color:#F7F7F6;
        scroll-behavior: smooth;       ;
    }
    body::-webkit-scrollbar {
        width: 8px; /* Adjust the width of the scrollbar */
      }

      body::-webkit-scrollbar-track {
        background: #f1f1f1; /* Background color of the scrollbar track */
        border-radius: 10px; /* Rounded corners for the track */
      }
      body::-webkit-scrollbar-thumb {
        background: #888; /* Color of the scrollbar thumb */
        border-radius: 10px; /* Rounded corners for the thumb */
      }
    a{
        text-decoration: none;
    }
    div a{
        color: black;
    }
nav{
    height: 100px;
    width: 100%;
}
nav ul{
    padding: 0;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

nav ul li{
list-style: none;
padding: 0 80px;
display: flex;
align-items: center;
}

nav ul li span{
    font-size: 24px;
    font-weight: 700;
     font-family: "IBM Plex Sans Arabic"
}
nav ul li img{
    height: 80px;
    max-width:100%;
}


nav ul li:nth-child(1){
    /* padding-right: 20%; */
}

nav img{
    float: left;
    padding: 5px;
}

#wrap{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.parts{
    height: auto;
    width: 50%;
    flex-grow: 1;
}
.parts img{
    max-width: 80%;
    height: auto;
    object-fit: cover;
}

.text{
    padding: 0% 0%  0% 30%;
    font-weight: 600;
    font-size: 20px;

}
.span-text{
    font-weight: 700;
    font-size: 20px;
    padding: 20px;
}
.name{
    font-size: 25px;
    color: red;
    font-weight: bolder;
}

.align{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

#p{
    text-align: end;
    text-wrap: wrap;
    margin: 10px 20%;
}
.flex{
    display: flex;
    flex-direction: row-reverse;
    /* justify-content: space-around; */
    /* justify-content: space-evenly; */
    padding: 10px 15%;
}
.btn{
    height: auto !important;
    /* max-width: 20% !important; */
    float: left;
    /* margin: 10px 10px 10px 10px ; */
}
.break{
    height: 80px;
}
.paranter{
    padding: 10% 20px 20px 20px;
}

.flex-image{
    display: flex;
    width: 100%;
}
.content{
    padding:  0px 10%;
}
/* .buttons{
    display: flex;
} */

@media (min-width: 328px) and (max-width: 768px) and (orientation: portrait) {

    #wrap {
        flex-direction:column-reverse;
        justify-content: space-around;
    }
    #par{
        display: none;
    }
    .break{
        display: none;
    }
    .parts{
        width: 100%;
        text-align: -webkit-center;
    }
    .text{
        padding: 0% 0%  0% 0%;
        font-weight: 700;
        font-size: 20px;

    }
    #wiz{
        width: 100% !important;
        margin: 5% 0 !important;
    }
    .rig img{
        width: 100%;
    }
    #p{
        text-align: end;
        text-wrap: wrap;
        margin: 10%;
    }
    .btn{
        margin: 10%;
    }
    .flex-image{
        display: flex;
        width: 100%;
        flex-direction: column;
    }
    .paranter_invate img
     {
        width: 100%;
    }

    .parts img {
        margin-left:0 !important;
    }
    nav ul li{
        padding: 5px !important;
        display: flex;
        align-items: center;
        }

        nav ul li span{
            font-size: 16px !important;
            font-weight: 700 !important;
             font-family: "IBM Plex Sans Arabic"
        }
        nav ul li img{
            height: 60px !important;
            max-width:100% !important;
        }


        nav ul li:nth-child(1){
            padding-right: 0 !important;
        }

        #wrap {
            flex-direction:column-reverse;
            justify-content:space-evenly;
        }

}