.sitetitle {
 color: #66638F;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
overflow: hidden;
font-size: 32px;
position: relative;
}

/* النص يبدأ مخفيًا ثم ينزلق من اليسار */
.sitetitle .title-text {
opacity: 0;
animation: slideInText 0.8s ease-out forwards;
animation-delay: 0.3s;
}
@keyframes slideInText {
from {
 transform: translateX(-100%);
 opacity: 0;
}
to {
 transform: translateX(0);
 opacity: 1;
}
}

/* الصورة تبدأ مخفية ثم تنزلق من اليمين */
.sitetitle .title-img {
width: 50px;
height: auto;
opacity: 0;
animation: slideInImg 0.8s ease-out forwards;
animation-delay: 0.1s;
}
@keyframes slideInImg {
from {
 transform: translateX(150%);
 opacity: 0;
}
to {
 transform: translateX(0);
 opacity: 1;
}
}

@media (max-width: 768px) {
.sitetitle { font-size: 28px; }
}
.board-card {
background-color: #fff;
color: #66638F;
border-radius: 10px;
padding: 20px;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, opacity 0.6s ease-out, transform 0.6s ease-out;
opacity: 0;
transform: translateY(20px);
}
.board-card:hover {
transform: translateY(-5px);
}
.board-card.in-view {
opacity: 1;
transform: translateY(0);
}
.board-card img {
border-radius: 50%;
width: 80px;
height: 80px;
object-fit: cover;
margin-bottom: 15px;
border: 3px solid #ddd;
}
.board-card h5 {
font-size: 1.1rem;
margin: 10px 0 5px;
font-weight: bold;
color: #66638F;
}
.board-card p {
color: #66638F;
font-size: 0.9rem;
margin: 0;
}
.container {
margin-top: 40px;
}