/* global shared properties */
:root {
    /* colors */
    --text: #454555;
    --background: #edeeff;
    --primary: #4962bf;
    --secondary: #9497cd;
    --accent: #cfa616;

    /* fonts */
    --ar-font1 : "Noto Kufi Arabic";
    --en-citation : "arial";
}


ul {
    list-style-type: none;
}

a{
    color: var(--primary);
}
a:hover{
    color: var(--accent);
}

.c-p {
    color: var(--primary);
}

.-img {
    object-fit:fill;
}

.-ar {
    font-family: var(--ar-font1) !important;
    direction: rtl !important;
    text-align: start ;
}
.-hover:hover {
    background-color: var(--accent);
    border: 1px solid var(--accent);
}

.-border-rad {
    border-radius: 5px;
}

.-box-shadow {
    box-shadow: 8px 3px 80px 2px rgba(136,136,136,1);
}

.-label {
    color: var(--primary);
    font-weight: bold;
    text-transform: uppercase;
}

.-hidden {display: none;}

/* ========================================== */
/* timeline code */
div.timeline {
    padding: 0 30px;
    
}

div.tl-items {
position: relative;
padding: 0 20px;
}

/* line */
div.tl-items::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;

width: 3px;
height: 100%;
background-color: var(--secondary);
}

div.tl-card {
width: 100%;
margin-top: 20px;
padding: 10px 30px;
background-color :var(--background);
border-radius: 10px;
}

.tl-card .tl-title {
text-transform: uppercase;
color: var(--primary);
font-weight: normal;
margin-top: 10px;
}
  
.tl-card .tl-title::before {
    content: "";
    width: 25px;
    height: 25px;
    position: absolute;
    left: -11px;
    right: -11px;

    background-color: var(--accent);
    border: 5px solid white;
    z-index: 10;
    border-radius: 50%;
}
  
.tl-card .tl-date {
    font-size : 16px;
    margin: 3px 0;
    font-style: italic;
    font-weight: lighter;
}

.tl-card .tl-detail {
    color: var(--text);
}


/* ========================================== */
/* page index */

body {
    background-color: var(--background);
}


nav.-navbar {
    background-color: var(--primary);
}

button.-btn-lang {
    background-color: var(--primary);
    border: 1px solid var(--background);
}
button.-btn-lang:hover {
    background-color: var(--accent);
    border: 1px solid var(--accent);
}

nav.-navbar li a {
    color: inherit;
}

nav.-navbar li a:hover {
    background-color: var(--accent);
    /* border: 1px solid var(--accent); */
    color: white;
    border-radius: 4px;
}
.-intro-bar {
    color: var(--text);
}

.-header {
    height: 75vh;

}

.-header-p1 {
    background-image: url("../images/img/ab49.jpg");
    background-position: 0 0;
    background-clip: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 8px;
}

.-header-p2 {
    background-position: 0 0;
    background-clip: border-box;
    background-image: url("../images/img/ab50.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 8px;
}

header {
    height: 60vh;
    background-position: 0 0;
    background-clip: border-box;
    background-image: url("../images/hq720.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}
/* background-image: url("../images/img/ab49.jpg"); */

header h1 {
    padding-top: 15vw;
    padding-bottom: 15vw;
}

.-wellcome h3 {
    color: var(--primary);
}

.-wellcome .-sign {
    color: var(--secondary);
}



img.-photo {
    display: block;
    margin: 20px auto;
}

footer {
    background-color: var(--primary);
    color: white;
    font-size: large;
}

/* ========================================================= */
/* background */
.-info {
    background-color: white;
    padding: 2rem ;
}

.-info .-label {
    color: var(--primary);
    font-weight: bold;

}

.-info .-val {
    color: var(--text);
}

.-degree dt {
    color: var(--primary);
    font-weight: bold;
}



/* ======================================== */
/* publication */


.-award .-award-img {
    width: 100%;
    height: 80vh;
    /* overflow: hidden; */
}



/* .-pub  */
ul.-my-list > li {
    font-family: var(--en-citation);
    /* font-weight: bold; */
    font-size: 14px;
    color: var(--text);
    margin-bottom: 10px;
    padding: 5px;
    /* max-width: 50%; */
}

/* .-pub  */
ul.-my-list > li:hover {
    background-color: var(--secondary);
    border-radius: 8px;
    color: black;
    text-shadow: 1px 1px 3px #ffffff;
}

/* .-pub  */
ul.-my-list >  li::before {
    content: "";
    width: 10px;
    height: 10px;
    display: inline-block;
    background-color: var(--accent);
    rotate: 45deg;
    margin-right: 10px;
    margin-left: 10px
}

/* .-pub  */
ul.-my-list2 > li {
    /* font-family: var(--en-citation); */
    /* font-weight: 500; */
    /* font-size: 14px; */
    color: var(--text);
    margin-bottom: 5px;
}

/* .-pub  */
ul.-my-list2 >  li::before {
    content: "";
    width: 7px;
    height: 7px;
    display: inline-block;
    background-color: var(--accent);
    border-radius: 50%;
    /* rotate: 45deg; */
    margin-right: 10px;
    margin-left: 10px;
}

/* .-pub .li-type1 {
    font-family: var(--en-citation);
    font-weight: 500;
    font-size: 14px;
    color: var(--text);
    margin-bottom: 10px;
} */

/* .-pub li.li-type1::before {
    content: "";
    width: 10px;
    height: 10px;
    display: inline-block;
    background-color: var(--accent);
    rotate: 45deg;
    margin-right: 10px;
} */

.-pub a {
    display: inline-block;
    width: 100%;
}
/* ======================================== */

/* ======================================== */
/* test */