/* Add custom CSS styles below */ 



/

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

body{
font-family:-apple-system,BlinkMacSystemFont,"IBM Plex Sans Arabic","Cairo",sans-serif;
}


.main-menu a,
.mobile-menu a{
font-family:"IBM Plex Sans Arabic",sans-serif;
font-weight:500;
font-size:15px;
letter-spacing:.3px;
transition:all .3s ease;
}



.main-menu{
display:flex;
justify-content:center;
align-items:center;
gap:35px;
}

.main-menu li a{
color:#222;
padding:10px 5px;
position:relative;
}



.main-menu li a::after{
content:"";
position:absolute;
bottom:-6px;
right:0;
width:0%;
height:2px;
background:#8b0000;
transition:.3s;
}

/* hover */

.main-menu li a:hover{
color:#8b0000;
font-weight:600;
}

.main-menu li a:hover::after{
width:100%;
}



.mobile-menu{
background:#fff;
}

.mobile-menu ul li{
border-bottom:1px solid #f1f1f1;
}

.mobile-menu ul li a{
padding:14px 18px;
font-size:16px;
transition:all .25s ease;
}



.mobile-menu ul li a:hover{
background:#8b0000;
color:#fff !important;
padding-right:25px;
}



#mobile-menu .main-menu{
padding-top:10px;
}