:root{
    --dark-color: #19283f;
    --green-color: #33d1cc;
    --red-color: #ff3150;
    --yellow-color: #ffc400;
    --section-color: #eff7fa;
    --navlink-text-color:#decefe;
    --navlink-hover-color:#fefdff;
}

body{
    font-family:'Noto Naskh Arabic' 'Cairo', 'Roboto', sans-serif;
    background-color: #f5f5f7;
}



.navbar {
    background-color: var(--dark-color);
    box-shadow: 0 .5rem 1rem #00000026,inset 0 -1px #ffffff26;
}

.navbar .navbar-nav .nav-link {
    color: var(--navlink-text-color);
}
/* لاضافة الخط تحت الكلمة*/
/* ضبط شكل الرابط */
.navbar .navbar-nav .nav-link {
    display: inline-block; /* مهم حتى يكون الخط بعرض الكلمة فقط */
    position: relative;
    padding-bottom: 5px;
}

/* إنشاء الخط */
.navbar .navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    right: 0; /* لأن الموقع عربي RTL */
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: var(--navlink-hover-color);
    transition: width 0.3s ease;
}

/*  عند الصفحة النشطة */
.navbar .navbar-nav .nav-link.active::after {
    width: 100%;
}

/*لتلون الكلمة*/
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus,
.navbar .navbar-nav .nav-link.active { /* <- active هنا */
    color: var(--navlink-hover-color);
}


.navbar .navbar-toggler{
    color: var(--section-color);
    border-color: var(--section-color);
    font-size: 25px;
    box-shadow: none;
}




/*  footer */
.footer-pro {
    background: linear-gradient(135deg, #19283f, #0f1b2d);
    position: relative;
}

/* خط علوي مضيء */
.footer-pro::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: linear-gradient(to right, #00c6ff, #0072ff);
}

/* روابط */
.footer-links a {
    color: white;
    text-decoration: none;
    display: block;
    margin-bottom: 8px;
    transition: 0.3s;
}

.footer-pro i {
    color: #00c6ff;
}

.footer-links a:hover {
    padding-right: 5px;
    color: #00c6ff;
}

/* أيقونات */
.social-icons a {
    color: white;
    font-size: 1.3rem;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    transition: 0.3s ease;
}

.social-icons a:hover {
    background: #00c6ff;
    color: #19283f;
    transform: translateY(-4px);
}

 .one{
    color:var(--yellow-color) ;
}

 .tow{
    color:var(--green-color) ;
}