html[dir="rtl"] .faculty-layout{
grid-template-areas: "sidebar content";
grid-template-columns:320px 1fr;
}
.faculty-hero{
padding:60px 20px;
background:#f7f9fc;
}
.faculty-hero__container{
max-width:1200px;
margin:auto;
display:flex;
gap:40px;
align-items:center;
}
.faculty-hero__photo img{
width:260px;
height:260px;
object-fit:cover;
border-radius:50%;
border:6px solid #fff;
box-shadow:0 15px 35px rgba(0,0,0,.12);
}
.faculty-hero__content h1{
font-size:42px;
margin-bottom:10px;
}
.faculty-rank{
display:inline-flex;
align-items:center;
gap:8px;
padding:10px 18px;
background:#edf8f2;
color:#006838;
border-radius:50px;
font-weight:700;
font-size:15px;
margin:auto;
}
.faculty-position{
font-size:20px;
margin-bottom:25px;
}
.faculty-item{
margin-bottom:10px;
font-size:18px;
}
.faculty-cv a{
display:inline-block;
margin-top:25px;
background:#00883e;
color:#fff;
padding:12px 22px;
border-radius:8px;
text-decoration:none;
}
@media(max-width:768px){
.faculty-hero__container{
flex-direction:column;
text-align:center;
}
.faculty-hero__photo img{
width:200px;
height:200px;
}
.faculty-hero__content h1{
font-size:30px;
}
}
.faculty-hero{
margin-top:40px;
margin-bottom:40px;
}
.faculty-hero .btn{
border-radius:50px;
}
.faculty-hero h1{
font-weight:700;
}
/* ===========================
Faculty Cover
=========================== */
.faculty-cover{
width: 100%;
height: 350px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 20px 20px 0 0;
}
.faculty-hero .card{
margin-top: -120px;
position: relative;
z-index: 10;
}
/* ===================================
Hero Layout
=================================== */
.faculty-cover{
position: relative;
width: 100%;
height: 350px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.faculty-hero .card{
margin-top: -90px;
border-radius: 18px;
overflow: visible;
}
.faculty-hero .col-lg-4{
background: transparent !important;
}
.faculty-hero .img-fluid.rounded-circle{
width:220px !important;
height:220px !important;
object-fit:cover;
border:6px solid #fff;
box-shadow:0 12px 35px rgba(0,0,0,.15);
margin-top:-130px;
background:#fff;
}
.faculty-hero h1{
font-size:38px;
font-weight:700;
}
.faculty-rank{
color:#00883e;
font-weight:700;
}
.faculty-item{
margin-bottom:10px;
}
.faculty-overview h2{
font-size:30px;
font-weight:700;
color:#00883e;
}
.faculty-overview-content{
font-size:18px;
line-height:2;
}
/* ==========================
Faculty Tabs
========================== */
.faculty-tabs .nav-link{
border-radius: 50px;
padding: 12px 22px;
font-weight: 600;
color: #00883e;
background: #fff;
border: 1px solid #dfe8e3;
transition: all .25s ease;
}
.faculty-tabs .nav-link.active{
background: #00883e;
color: #fff;
border-color: #00883e;
}
.faculty-tabs .nav-link:hover{
background: #00883e;
color: #fff;
}
/* ===== Faculty Tabs ===== */
.faculty-tabs{
margin:40px auto;
}
.faculty-tabs-container{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:12px;
}
.faculty-tab{
background:#ffffff;
border:2px solid #00883e;
color:#00883e;
padding:12px 22px;
border-radius:40px;
cursor:pointer;
font-size:16px;
font-weight:600;
transition:.3s;
}
.faculty-tab:hover{
background:#00883e;
color:#fff;
}
.faculty-tab.active{
background:#00883e;
color:#fff;
}
.faculty-tab.active .tab-count {
color: #00883e;
background: #ffffff;
}
/* ===== Content ===== */
.faculty-tab-content{
max-width:1200px;
margin:40px auto;
padding:0 20px;
}
.faculty-card{
background:#fff;
padding:30px;
border-radius:15px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.faculty-card h2{
margin-bottom:25px;
color:#00883e;
}
.faculty-table{
width:100%;
border-collapse:collapse;
}
.faculty-table tr{
border-bottom:1px solid #eee;
}
.faculty-table th{
width:220px;
padding:18px;
background:#f8f8f8;
text-align:right;
}
.faculty-table td{
padding:18px;
}
.faculty-info-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
}
.faculty-info-grid div{
background:#f8f9fa;
padding:20px;
border-radius:12px;
}
.faculty-section{
max-width:1200px;
margin:40px auto;
padding:0 20px;
}
.qualification-item{
border-right:4px solid #00883e;
padding:20px;
margin-bottom:20px;
background:#fafafa;
border-radius:10px;
}
.qualification-item h4{
margin-bottom:10px;
color:#00883e;
}
.qualification-item{
background:#fff;
border-right:5px solid #00883e;
border-radius:12px;
padding:25px;
margin-bottom:25px;
box-shadow:0 4px 15px rgba(0,0,0,.05);
}
.qualification-item h3{
color:#00883e;
margin-bottom:15px;
}
.qualification-item p{
margin-bottom:10px;
line-height:1.8;
}
.qualification-description{
margin-top:15px;
padding-top:15px;
border-top:1px solid #eee;
}
/* ===== Timeline ===== */
.faculty-timeline{
position:relative;
margin-top:30px;
}
.faculty-timeline::before{
content:"";
position:absolute;
right:90px;
top:0;
bottom:0;
width:3px;
background:#00883e;
}
.timeline-item{
display:flex;
gap:30px;
position:relative;
margin-bottom:35px;
}
.timeline-year{
width:90px;
min-width:90px;
height:90px;
border-radius:50%;
background:#00883e;
color:#fff;
display:flex;
justify-content:center;
align-items:center;
font-weight:bold;
font-size:18px;
z-index:2;
}
.timeline-content{
flex:1;
background:#fff;
padding:25px;
border-radius:15px;
box-shadow:0 5px 20px rgba(0,0,0,.08);
}
@media(max-width:768px){
.faculty-timeline::before{
display:none;
}
.timeline-item{
flex-direction:column;
}
.timeline-year{
width:70px;
height:70px;
}
}
.publication-list{
display:flex;
flex-direction:column;
gap:25px;
}
.publication-card{
background:#fff;
border-radius:15px;
padding:25px;
box-shadow:0 5px 20px rgba(0,0,0,.08);
}
.publication-card h3{
margin-bottom:10px;
}
.publication-en{
color:#666;
margin-bottom:15px;
/*font-style:italic;*/
}
.publication-meta{
display:flex;
flex-wrap:wrap;
gap:20px;
margin-bottom:20px;
}
.publication-abstract{
margin-bottom:20px;
line-height:1.8;
}
.publication-buttons{
display:flex;
flex-wrap:wrap;
gap:10px;
}
/* ===== Books ===== */
.books-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(380px,1fr));
gap:30px;
}
.book-card{
display:flex;
gap:20px;
background:#fff;
padding:20px;
border-radius:15px;
box-shadow:0 5px 20px rgba(0,0,0,.08);
}
.book-cover img{
width:140px;
height:190px;
object-fit:cover;
border-radius:10px;
}
.book-content{
flex:1;
}
.book-title-en{
color:#666;
/*font-style:italic;*/
margin-bottom:15px;
}
.book-content p{
margin-bottom:8px;
}
.book-buttons{
margin-top:20px;
display:flex;
flex-wrap:wrap;
gap:10px;
}
.book-abstract{
margin-top:15px;
line-height:1.8;
}
/*==========================
Faculty Tabs
==========================*/
.faculty-tabs-wrapper{
margin:40px 0;
position:sticky;
top:20px;
z-index:100;
}
.faculty-tabs{
display:flex;
flex-wrap:wrap;
gap:12px;
justify-content:center;
background:#fff;
padding:15px;
border-radius:15px;
box-shadow:0 8px 25px rgba(0,0,0,.08);
}
.faculty-tab{
background:#f3f5f7;
border:none;
padding:12px 24px;
border-radius:50px;
cursor:pointer;
font-size:16px;
transition:.3s;
}
.faculty-tab:hover{
transform:translateY(-2px);
}
.faculty-tab.active{
background:#00883e;
color:#fff;
}
/*============ Tabs v2 ============*/
.faculty-tabs{
display:flex;
justify-content:center;
gap:12px;
flex-wrap:wrap;
}
.faculty-tab{
display:flex;
align-items:center;
gap:8px;
padding:12px 22px;
border:none;
border-radius:50px;
background:#f5f7fa;
cursor:pointer;
transition:.35s;
font-weight:600;
}
.faculty-tab:hover{
transform:translateY(-3px);
box-shadow:0 10px 25px rgba(0,0,0,.12);
}
.faculty-tab.active{
background:#00883e;
color:#fff;
}
.tab-icon{
font-size:20px;
}
.tab-count {
color: #00883e;
padding: 3px 9px;
border-radius: 30px;
font-size: 13px;
font-weight: bold;
}
.faculty-tab:not(.active) .tab-count {
background: #e8ecef;
color: #00883e;
}
/*==============================
Tabs Animation
==============================*/
.hidden-section{
display:none;
opacity:0;
}
.active-section{
display:block;
animation:facultyFade .35s ease;
}
@keyframes facultyFade{
from{
opacity:0;
transform:translateY(12px);
}
to{
opacity:1;
transform:translateY(0);
}
}
/*========== Faculty Statistics ==========*/
.faculty-stats{
margin:-45px auto 40px;
position:relative;
z-index:20;
}
.faculty-stats-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(145px,1fr));
gap:14px;
}
.faculty-stat-card{
background:linear-gradient(135deg,#ffffff,#f7f9fc);
border-radius:16px;
padding:14px;
text-align:center;
box-shadow:0 12px 35px rgba(0,0,0,.08);
border-top:4px solid #00883e;
transition:.35s;
position:relative;
overflow:hidden;
}
.faculty-stat-card:hover{
transform:translateY(-8px);
box-shadow:0 20px 45px rgba(0,0,0,.12);
}
.faculty-stat-icon{
width:48px;
height:48px;
margin:0 auto 10px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#eef8f2;
color:#00883e;
font-size:21px;
transition:.35s;
}
.faculty-stat-number{
font-size:24px;
font-weight:700;
color:#00883e;
line-height:1;
margin:6px 0;
}
.faculty-stat-title{
margin-top:8px;
font-weight:600;
}
.faculty-stat-card:hover .faculty-stat-icon{
transform:scale(1.15) rotate(8deg);
}
.faculty-stat-card:hover .faculty-stat-icon{
background:#00883e;
color:#fff;
transform:rotate(10deg) scale(1.1);
}
/*=========================================
= Academic Timeline
=========================================*/
.faculty-timeline{
position:relative;
padding-right:45px;
margin-top:30px;
}
.faculty-timeline::before{
content:"";
position:absolute;
right:18px;
top:0;
bottom:0;
width:3px;
background:#d8e8dd;
border-radius:20px;
}
.timeline-item{
position:relative;
margin-bottom:35px;
background:#fff;
border-radius:16px;
padding:25px 25px 25px 30px;
box-shadow:0 8px 25px rgba(0,0,0,.06);
transition:.35s;
}
.timeline-item:hover{
transform:translateY(-4px);
box-shadow:0 18px 35px rgba(0,0,0,.10);
}
.timeline-item::before{
content:"";
position:absolute;
right:-38px;
top:32px;
width:18px;
height:18px;
background:#00883e;
border:4px solid #fff;
border-radius:50%;
box-shadow:0 0 0 4px #d8e8dd;
}
.timeline-year{
display:inline-block;
background:#00883e;
color:#fff;
padding:6px 14px;
border-radius:50px;
font-weight:700;
margin-bottom:15px;
font-size:15px;
}
.timeline-content h3{
margin-bottom:12px;
font-size:22px;
font-weight:700;
}
.timeline-content p{
margin-bottom:8px;
line-height:1.8;
}
.qualification-description{
margin-top:18px;
padding-top:15px;
border-top:1px solid #ececec;
color:#555;
}
@media(max-width:768px){
.faculty-timeline{
padding-right:25px;
}
.faculty-timeline::before{
right:10px;
}
.timeline-item::before{
right:-29px;
}
}
/*==========================
Faculty Layout
==========================*/
.faculty-layout{
max-width:1400px;
margin:40px auto;
padding:0 20px 50px;
display:grid;
grid-template-columns:1fr 320px;
grid-template-areas: "content sidebar";
gap:30px;
align-items:start;
}
.faculty-content{
grid-area: content;
min-width:0;
}
.faculty-sidebar{
grid-area: sidebar;
position:sticky;
top:100px;
align-self:start;
}
.faculty-content{
min-width:0;
}
.faculty-sidebar{
position:sticky;
top:100px;
align-self:start;
}
.faculty-sidebar-card{
background:#fff;
border-radius:20px;
padding:25px;
text-align:center;
box-shadow:0 12px 30px rgba(0,0,0,.08);
}
.faculty-sidebar-photo{
width:170px;
height:170px;
object-fit:cover;
border-radius:18px;
border:5px solid #fff;
box-shadow:0 12px 30px rgba(0,0,0,.15);
display:block;
margin:0 auto 18px;
}
.faculty-sidebar-card h3{
margin-bottom:10px;
font-size:24px;
}
.faculty-sidebar-card p{
margin-bottom:15px;
}
@media (max-width:991px){
.faculty-layout{
grid-template-columns:1fr;
}
.faculty-sidebar{
position:static;
order:-1;
}
}
/*=====================================
Sidebar Cards
=====================================*/
.faculty-sidebar{
display:flex;
flex-direction:column;
gap:24px;
}
.faculty-sidebar-card{
background:#fff;
border-radius:20px;
padding:28px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
border:1px solid #eef1f4;
transition:.3s;
}
.faculty-sidebar-card:hover{
transform:translateY(-4px);
box-shadow:0 18px 40px rgba(0,0,0,.12);
}
.faculty-social-links{
display:flex;
flex-direction:column;
gap:12px;
margin-top:15px;
}
.faculty-social-links a{
display:flex;
align-items:center;
gap:12px;
padding:12px 15px;
border-radius:12px;
background:#f7f9fc;
text-decoration:none;
color:#333;
transition:.3s;
font-weight:500;
}
.faculty-social-links a:hover{
background:#00883e;
color:#fff;
transform:translateX(-5px);
}
.faculty-social-links i{
font-size:20px;
width:24px;
text-align:center;
}
.faculty-download-cv{
display:flex;
justify-content:center;
align-items:center;
gap:12px;
background:#00883e;
color:#fff;
text-decoration:none;
padding:18px;
border-radius:14px;
font-weight:600;
font-size:17px;
transition:.3s;
}
.faculty-download-cv:hover{
background:#006b30;
color:#fff;
transform:translateY(-3px);
box-shadow:0 10px 25px rgba(0,136,62,.25);
}
.faculty-download-cv i{
font-size:28px;
}
/* ===========================
Hero Photo
=========================== */
.faculty-profile-image{
display:flex;
justify-content:center;
align-items:center;
height:100%;
padding:25px;
}
.faculty-photo{
width:260px;
height:260px;
object-fit:cover;
border-radius:20px;
border:6px solid #fff;
box-shadow:0 20px 50px rgba(0,0,0,.15);
}
.faculty-photo:hover{
transform:translateY(-6px);
}
/*====================================
Hero Content
=====================================*/
.faculty-hero-content{
padding:55px 45px;
}
.faculty-title{
font-size:42px;
font-weight:700;
line-height:1.3;
margin-bottom:12px;
}
.faculty-rank-badge{
display:inline-flex;
align-items:center;
gap:8px;
padding:12px 22px;
border-radius:40px;
font-size:16px;
font-weight:700;
background:#edf8f2;
color:#006838;
}
.faculty-position{
font-size:18px;
color:#555;
margin-bottom:30px;
}
/*==============================
Faculty Meta
==============================*/
.faculty-meta{
margin:28px 0;
display:flex;
flex-direction:column;
gap:14px;
}
.faculty-meta-item{
display:flex;
align-items:center;
gap:14px;
font-size:17px;
color:#333;
}
.faculty-meta-item i{
width:22px;
font-size:20px;
color:#006838;
text-align:center;
}
.faculty-meta-item a{
color:#333;
text-decoration:none;
transition:.3s;
}
.faculty-meta-item a:hover{
color:#006838;
}
/* ===========================
Hero Card
=========================== */
.faculty-hero-card{
background:#fff;
border-radius:24px;
padding:40px 50px;
box-shadow:0 18px 45px rgba(0,0,0,.08);
overflow:hidden;
}
/* ===========================
Social Icons
=========================== */
.faculty-social{
display:flex;
gap:14px;
margin:30px 0;
}
.social-circle{
width:52px;
height:52px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:#fff;
border:1px solid #ddd;
text-decoration:none;
font-weight:700;
color:#006838;
font-size:18px;
transition:.3s;
box-shadow:0 5px 15px rgba(0,0,0,.06);
}
.social-circle:hover{
background:#006838;
color:#fff;
transform:translateY(-4px);
}
.faculty-hero-wrapper{
padding: 10px 0 10px;
}
/*==============================
Sidebar Titles
==============================*/
.sidebar-title{
display:flex;
align-items:center;
gap:10px;
margin:0 0 22px;
padding-bottom:14px;
border-bottom:1px solid #edf0f2;
font-size:18px;
font-weight:700;
color:#1f2937;
}
.sidebar-title i{
color:#00883e;
font-size:22px;
}
/*==============================
Sidebar Items
==============================*/
.sidebar-item{
display:flex;
align-items:flex-start;
gap:14px;
padding:14px 0;
border-bottom:1px solid #f3f4f6;
font-size:15px;
line-height:1.8;
}
.sidebar-item:last-child{
border-bottom:none;
padding-bottom:0;
}
.sidebar-item i{
width:22px;
margin-top:3px;
font-size:18px;
color:#00883e;
flex-shrink:0;
}
.sidebar-item span,
.sidebar-item a{
color:#374151;
text-decoration:none;
word-break:break-word;
transition:.3s;
}
.sidebar-item a:hover{
color:#00883e;
}
.profile-card{
text-align:center;
}
.profile-card .faculty-rank{
margin-top:12px;
display:inline-flex;
}
/* =====================================
Faculty Website - Typography
===================================== */
body,
.faculty-layout,
.faculty-hero,
.faculty-sidebar,
.faculty-content {
font-family: 'Cairo', sans-serif;
font-size: 14px;
line-height: 1.8;
}
/* العناوين */
.faculty-hero h1,
.faculty-title {
font-size: 32px;
font-weight: 700;
line-height: 1.4;
}
.faculty-sidebar-card h3 {
font-size: 20px;
font-weight: 700;
}
.faculty-sidebar-card h5,
.sidebar-title {
font-size: 16px;
font-weight: 700;
}
/* النصوص */
.faculty-position {
font-size: 15px;
}
.faculty-meta-item {
font-size: 14px;
}
.faculty-sidebar-card p {
font-size: 14px;
}
/* Tabs */
.faculty-tab {
font-size: 14px;
}
/* محتوى الأقسام */
.faculty-overview-content,
.faculty-section,
.faculty-card {
font-size: 14px;
}
/* الجداول */
.faculty-table {
font-size: 14px;
}
/* الأزرار */
.faculty-download-cv {
font-size: 14px;
}
/* =====================================
SIDEBAR - FINAL TYPOGRAPHY & STYLE
===================================== */
.faculty-sidebar {
width: 100%;
}
.faculty-sidebar-card {
background: #fff;
border: 1px solid #e8ecef;
border-radius: 16px;
padding: 22px;
margin-bottom: 20px;
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.06);
}
/* بطاقة العضو */
.profile-card {
text-align: center;
}
.profile-card .faculty-sidebar-photo {
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 16px;
display: block;
margin: 0 auto 16px;
border: 4px solid #fff;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}
.profile-card .faculty-name {
font-size: 20px;
font-weight: 700;
line-height: 1.5;
margin: 0 0 10px;
color: #222;
}
.profile-card .faculty-rank {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 14px;
border-radius: 30px;
background: #edf8f2;
color: #006838;
font-size: 13px;
font-weight: 600;
}
/* عناوين البطاقات */
.sidebar-title {
display: flex;
align-items: center;
gap: 9px;
margin: 0 0 16px;
padding-bottom: 12px;
border-bottom: 1px solid #edf0f2;
color: #222;
font-size: 16px;
font-weight: 700;
}
.sidebar-title i {
color: #00883e;
font-size: 19px;
}
/* عناصر البيانات */
.sidebar-item {
display: flex;
align-items: flex-start;
gap: 11px;
padding: 11px 0;
border-bottom: 1px solid #f1f3f5;
font-size: 13px;
line-height: 1.8;
}
.sidebar-item:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.sidebar-item i {
width: 20px;
min-width: 20px;
margin-top: 3px;
color: #00883e;
font-size: 16px;
text-align: center;
}
.sidebar-item span,
.sidebar-item a {
color: #4b5563;
text-decoration: none;
word-break: break-word;
}
.sidebar-item a:hover {
color: #00883e;
}
/* الروابط الأكاديمية */
.faculty-social-links {
display: flex;
flex-direction: column;
gap: 8px;
}
.faculty-social-links a {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 11px;
border-radius: 9px;
color: #4b5563;
background: #f8faf9;
text-decoration: none;
font-size: 13px;
transition: all .25s ease;
}
.faculty-social-links a i {
width: 20px;
text-align: center;
color: #00883e;
font-size: 16px;
}
.faculty-social-links a:hover {
background: #edf8f2;
color: #006838;
transform: translateX(-3px);
}
/* زر تحميل السيرة */
.faculty-download-cv {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
width: 100%;
padding: 12px 16px;
border-radius: 10px;
background: #00883e;
color: #fff !important;
text-decoration: none;
font-size: 14px;
font-weight: 600;
transition: all .25s ease;
}
.faculty-download-cv:hover {
background: #006b32;
color: #fff !important;
transform: translateY(-2px);
}
.faculty-download-cv i {
font-size: 17px;
}
/* =====================================
Sidebar Section Header
===================================== */
.sidebar-title {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 14px;
padding-bottom: 12px;
border-bottom: 1px solid #edf0f2;
font-size: 15px;
font-weight: 700;
color: #222;
}
.sidebar-title i {
color: #00883e;
font-size: 17px;
}
/* =====================================
Faculty Statistics - Typography
===================================== */
.faculty-stat-card,
.faculty-stat-card * {
font-family: 'Cairo', sans-serif;
}
.faculty-stat-number {
font-family: 'Cairo', sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.2;
margin: 10px 0 6px;
}
.faculty-stat-title {
font-family: 'Cairo', sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 1.6;
margin-top: 5px;
}
.faculty-stat-icon {
font-size: 28px;
}
/* =====================================
Faculty Tabs - Typography
===================================== */
.faculty-tab,
.faculty-tab * {
font-family: 'Cairo', sans-serif;
}
.faculty-tab {
font-size: 13px;
font-weight: 600;
}
.tab-icon {
font-size: 17px;
}
.tab-count {
font-size: 11px;
}
/* =====================================
Academic Qualifications - Typography
===================================== */
.faculty-timeline,
.faculty-timeline * {
font-family: 'Cairo', sans-serif;
}
.faculty-timeline .timeline-year {
font-size: 13px;
font-weight: 700;
}
.faculty-timeline .timeline-content h3 {
font-size: 18px;
font-weight: 700;
line-height: 1.6;
}
.faculty-timeline .timeline-content p {
font-size: 13px;
line-height: 1.9;
margin-bottom: 7px;
}
.faculty-timeline .qualification-description {
font-size: 13px;
line-height: 1.9;
}
/* عنوان القسم */
.faculty-content h2 {
font-family: 'Cairo', sans-serif;
font-size: 28px;
font-weight: 700;
line-height: 1.5;
}
/* =====================================
Faculty Name - Hero & Sidebar
===================================== */
/* اسم الأستاذ في الـ Hero */
.faculty-hero h1 {
font-family: 'Cairo', sans-serif !important;
font-size: 32px !important;
font-weight: 700;
line-height: 1.5;
margin-bottom: 8px;
}
/* اسم الأستاذ في الـ Sidebar */
.faculty-sidebar-card .faculty-name {
font-family: 'Cairo', sans-serif !important;
font-size: 18px !important;
font-weight: 700;
line-height: 1.6;
margin-bottom: 8px;
}
/* =====================================
HERO - COMPACT HEIGHT
===================================== */
.faculty-hero {
padding: 10px 20px !important;
margin-top: 10px !important;
margin-bottom: 15px !important;
}
.faculty-hero > .py-5 {
padding: 10px 0 !important;
}
.faculty-hero .card {
margin-top: 0 !important;
margin-bottom: 0 !important;
min-height: 0 !important;
height: auto !important;
}
.faculty-hero .row {
min-height: 0 !important;
height: auto !important;
}
.faculty-hero .col-lg-4 {
padding: 15px !important;
}
.faculty-hero .col-lg-8 > .p-5 {
padding: 15px 25px !important;
}
/* صورة الأستاذ */
.faculty-hero .img-fluid.rounded-circle {
width: 170px !important;
height: 170px !important;
margin-top: 0 !important;
border-width: 5px !important;
}
/* اسم الأستاذ */
.faculty-hero h1 {
font-size: 30px !important;
line-height: 1.4 !important;
margin-top: 0 !important;
margin-bottom: 6px !important;
}
/* الرتبة */
.faculty-hero .text-success {
margin-top: 0 !important;
margin-bottom: 8px !important;
}
/* المسمى الوظيفي */
.faculty-hero .lead {
font-size: 14px !important;
line-height: 1.6 !important;
margin-bottom: 10px !important;
}
/* بيانات الكلية والقسم والبريد والهاتف */
.faculty-hero .row p {
font-size: 13px !important;
line-height: 1.6 !important;
margin-bottom: 6px !important;
}
/* الروابط */
.faculty-hero .mt-4 {
margin-top: 12px !important;
}
/* الأزرار */
.faculty-hero .btn {
font-size: 12px !important;
padding: 7px 13px !important;
}
/* =========================================
COMPACT FACULTY HERO
========================================= */
.faculty-hero {
margin: 0 !important;
padding: 0 !important;
}
.faculty-hero-wrapper {
padding: 8px 0 !important;
}
.faculty-hero-card {
padding: 18px 28px !important;
margin: 0 auto !important;
min-height: 0 !important;
}
.faculty-profile-image {
padding: 0 !important;
margin: 0 !important;
}
.faculty-photo {
width: 180px !important;
height: 180px !important;
object-fit: cover !important;
}
.faculty-hero-content {
padding: 5px 20px !important;
}
.faculty-title {
font-size: 30px !important;
margin: 0 0 6px !important;
line-height: 1.3 !important;
}
.faculty-rank-badge {
margin: 4px 0 8px !important;
}
.faculty-position {
margin: 4px 0 10px !important;
font-size: 14px !important;
}
.faculty-meta {
gap: 6px !important;
}
.faculty-meta-item {
margin: 3px 0 !important;
font-size: 13px !important;
}
.faculty-social {
margin-top: 10px !important;
gap: 8px !important;
}
.social-circle {
width: 46px !important;
height: 46px !important;
}
.faculty-hero .btn-success {
margin-top: 10px !important;
padding: 7px 15px !important;
font-size: 13px !important;
}
/* Fix spacing between Hero and Stats */
.faculty-stats {
position: relative;
z-index: 2;
margin-top: 35px !important;
}
/* =========================================
SMALL FACULTY STATS
========================================= */
.faculty-stat-card {
height: auto !important;
min-height: 125px !important;
padding: 10px 10px 14px !important;
border-radius: 18px !important;
margin: 0 !important;
overflow: visible !important;
box-sizing: border-box !important;
}
.faculty-stat-card i {
font-size: 22px !important;
}
.faculty-stat-card .stat-number {
font-size: 26px !important;
line-height: 1.1 !important;
margin: 5px 0 3px !important;
}
.faculty-stat-card .stat-label {
font-size: 12px !important;
line-height: 1.3 !important;
margin: 0 !important;
}
.faculty-stat-card i {
font-size: 24px !important;
}
.faculty-stat-card .stat-number {
font-size: 28px !important;
line-height: 1 !important;
margin: 6px 0 3px !important;
}
.faculty-stat-card .stat-label {
font-size: 13px !important;
line-height: 1.3 !important;
}
/* تقليل المسافة بين مربعات الإحصائيات */
.faculty-stats {
gap: 14px !important;
}
/* =========================================
HERO - FINAL SPACING
========================================= */
/* تكبير صورة العضو */
.faculty-photo {
width: 300px !important;
height: 350px !important;
object-fit: cover !important;
}
/* تقليل المسافات داخل محتوى الـHero */
.faculty-hero-content {
padding: 5px 20px !important;
}
/* اسم العضو */
.faculty-title {
margin: 0 0 5px !important;
line-height: 1.3 !important;
}
/* الرتبة الأكاديمية */
.faculty-rank-badge {
margin: 3px 0 6px !important;
}
/* المسمى الوظيفي */
.faculty-position {
margin: 3px 0 7px !important;
}
/* بيانات الكلية والقسم والبريد والهاتف */
.faculty-meta {
gap: 3px !important;
margin: 0 !important;
}
.faculty-meta-item {
margin: 1px 0 !important;
line-height: 1.4 !important;
}
/* الروابط الأكاديمية */
.faculty-social {
margin-top: 8px !important;
gap: 7px !important;
}
/* زر السيرة الذاتية */
.faculty-hero .btn-success {
margin-top: 3px !important;
}
/* =========================================
Faculty Sidebar - Cairo Font
========================================= */
.faculty-sidebar {
font-family: 'Cairo', sans-serif;
}
.faculty-sidebar .sidebar-title {
font-family: 'Cairo', sans-serif;
font-size: 16px;
font-weight: 700;
}
.faculty-sidebar .sidebar-item {
font-family: 'Cairo', sans-serif;
font-size: 14px;
font-weight: 400;
}
.faculty-sidebar .sidebar-item span,
.faculty-sidebar .sidebar-item a {
font-family: 'Cairo', sans-serif;
font-size: 14px;
font-weight: 400;
}
.faculty-sidebar .faculty-social-links a {
font-family: 'Cairo', sans-serif;
font-size: 13px;
}
.faculty-sidebar .faculty-name {
font-family: 'Cairo', sans-serif;
font-size: 18px;
font-weight: 700;
}
.faculty-sidebar .faculty-rank {
font-family: 'Cairo', sans-serif;
font-size: 13px;
}
/* حركة صورة العضو عند مرور الماوس */
.faculty-profile-image {
overflow: hidden;
border-radius: 18px;
}
.faculty-photo {
transition: transform 0.8s ease;
will-change: transform;
}
.faculty-profile-image:hover .faculty-photo {
transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.faculty-stat-number,
.faculty-stat-card:hover .faculty-stat-number {
color: #008f4c !important;
}
/* =========================================
FACULTY STATISTICS - EXTRA COMPACT
========================================= */
.faculty-stats {
margin-top: 25px !important;
margin-bottom: 30px !important;
}
.faculty-stats-grid {
grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)) !important;
gap: 10px !important;
}
/* كارت الإحصائية */
.faculty-stat-card {
min-height: 105px !important;
height: 105px !important;
padding: 8px 8px 10px !important;
border-radius: 14px !important;
border-top-width: 3px !important;
}
/* الأيقونة */
.faculty-stat-icon {
width: 38px !important;
height: 38px !important;
margin: 0 auto 5px !important;
font-size: 18px !important;
}
/* الرقم */
.faculty-stat-number {
font-size: 23px !important;
line-height: 1 !important;
margin: 3px 0 !important;
}
/* عنوان الإحصائية */
.faculty-stat-title {
font-size: 11px !important;
line-height: 1.3 !important;
margin-top: 3px !important;
}
/* حركة الكارت */
.faculty-stat-card:hover {
transform: translateY(-4px);
}
/* حركة الأيقونة */
.faculty-stat-card:hover .faculty-stat-icon {
transform: rotate(8deg) scale(1.08);
}
/* =========================================
MOBILE - EXTRA COMPACT
========================================= */
@media (max-width: 768px) {
.faculty-stats-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px !important;
}
.faculty-stat-card {
min-height: 100px !important;
height: 100px !important;
padding: 7px !important;
}
.faculty-stat-icon {
width: 34px !important;
height: 34px !important;
font-size: 16px !important;
}
.faculty-stat-number {
font-size: 21px !important;
}
.faculty-stat-title {
font-size: 10px !important;
}
}
/* =========================================
FACULTY STATISTICS - NARROWER CARDS
========================================= */
.faculty-stats-grid {
grid-template-columns: repeat(auto-fit, minmax(105px, 125px)) !important;
justify-content: center !important;
gap: 10px !important;
}
.faculty-stat-card {
width: 125px !important;
min-width: 125px !important;
max-width: 125px !important;
}
/* =========================================================
HIGHER EDUCATION - DATES INLINE
========================================================= */
.higher-education-dates {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 25px;
width: 100%;
}
.higher-education-date-item {
display: inline-flex;
align-items: center;
gap: 7px;
white-space: nowrap;
}
.higher-education-date-item i {
color: #00883e;
font-size: 15px;
}
.higher-education-date-item .higher-education-meta-label {
margin: 0;
}
.higher-education-date-item strong {
color: #333;
font-size: 13px;
font-weight: 600;
}
/* =========================================================
HIGHER EDUCATION COMMITTEES
========================================================= */
.higher-education-list {
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
}
/* =========================================
Committee Card
========================================= */
.higher-education-card {
width: 100%;
box-sizing: border-box;
background: #fff;
border: 1px solid #edf0f2;
border-right: 4px solid #00883e;
border-radius: 14px;
padding: 22px;
box-shadow: 0 6px 20px rgba(0,0,0,.06);
transition:
transform .3s ease,
box-shadow .3s ease,
border-color .3s ease;
}
.higher-education-card:hover {
transform: translateY(-3px);
box-shadow: 0 14px 32px rgba(0,0,0,.10);
border-right-color: #006b32;
}
/* =========================================
Committee Name
========================================= */
.higher-education-title {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 18px;
padding-bottom: 14px;
border-bottom: 1px solid #edf0f2;
color: #00883e;
font-size: 19px;
font-weight: 700;
line-height: 1.7;
}
.higher-education-title i {
font-size: 18px;
min-width: 20px;
}
/* =========================================
Meta Information
========================================= */
.higher-education-meta {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
width: 100%;
}
/* =========================================
Meta Item
========================================= */
.higher-education-meta-item {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: #f8faf9;
border-radius: 9px;
min-width: 0;
}
.higher-education-meta-item > i {
width: 20px;
min-width: 20px;
text-align: center;
color: #00883e;
font-size: 15px;
}
/* =========================================
Label + Value
========================================= */
.higher-education-meta-item > div {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.higher-education-meta-label {
color: #777;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
.higher-education-meta-item strong {
color: #333;
font-size: 13px;
font-weight: 600;
line-height: 1.7;
}
/* =========================================
Dates - Same Row
========================================= */
.higher-education-dates {
display: flex;
align-items: center;
gap: 25px;
width: 100%;
padding: 10px 12px;
box-sizing: border-box;
background: #f8faf9;
border-radius: 9px;
}
.higher-education-date-item {
display: inline-flex;
align-items: center;
gap: 7px;
white-space: nowrap;
}
.higher-education-date-item i {
color: #00883e;
font-size: 15px;
}
.higher-education-date-item .higher-education-meta-label {
margin: 0;
}
.higher-education-date-item strong {
color: #333;
font-size: 13px;
font-weight: 600;
}
/* =========================================
Current Status
========================================= */
.higher-education-current {
display: inline-flex;
align-items: center;
gap: 6px;
width: fit-content;
padding: 5px 10px;
border-radius: 30px;
background: #edf8f2;
color: #00883e !important;
font-size: 12px !important;
font-weight: 600;
}
/* =========================================
Description
========================================= */
.higher-education-description {
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid #edf0f2;
color: #4b5563;
font-size: 13px;
line-height: 1.9;
}
/* =========================================
Attachment
========================================= */
.higher-education-attachment {
margin-top: 15px;
}
.higher-education-attachment a {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 13px;
border-radius: 8px;
background: #edf8f2;
color: #00883e;
font-size: 12px;
font-weight: 600;
text-decoration: none;
transition: .25s;
}
.higher-education-attachment a:hover {
background: #00883e;
color: #fff;
}
/* =========================================
Mobile
========================================= */
@media (max-width: 768px) {
.higher-education-card {
padding: 18px;
}
.higher-education-title {
font-size: 17px;
}
.higher-education-dates {
flex-wrap: wrap;
gap: 8px 20px;
}
}
/* =========================================================
HIGHER EDUCATION - POSITION & ORGANIZATION INLINE
========================================================= */
.higher-education-meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
width: 100%;
}
.higher-education-meta-item {
width: 100%;
box-sizing: border-box;
}
/* التواريخ تمتد على السطر بالكامل */
.higher-education-dates {
grid-column: 1 / -1;
}
/* الحالة تمتد على السطر بالكامل */
.higher-education-meta > .higher-education-meta-item:last-child {
grid-column: 1 / -1;
}
/* =========================================
Mobile
========================================= */
@media (max-width: 768px) {
.higher-education-meta {
grid-template-columns: 1fr;
}
.higher-education-dates {
grid-column: auto;
}
.higher-education-meta > .higher-education-meta-item:last-child {
grid-column: auto;
}
}
/* =========================================================
GLOBAL CAIRO FONT
FACULTY MEMBER PAGE
========================================================= */
.faculty-layout,
.faculty-layout *,
.faculty-hero,
.faculty-hero *,
.faculty-sidebar,
.faculty-sidebar *,
.faculty-tabs-wrapper,
.faculty-tabs-wrapper *,
.faculty-section,
.faculty-section *,
.faculty-stats,
.faculty-stats *,
.faculty-card,
.faculty-card *,
.faculty-tab,
.faculty-tab * {
font-family: 'Cairo', sans-serif !important;
}
/* =========================================================
ADMINISTRATIVE EXPERIENCE
Same Style as Higher Education Committees
========================================================= */
.administrative-exper-list {
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
}
/* =========================================
Administrative Card
========================================= */
.administrative-exper-card {
width: 100%;
box-sizing: border-box;
background: #fff;
border: 1px solid #edf0f2;
border-right: 4px solid #00883e;
border-radius: 14px;
padding: 22px;
box-shadow: 0 6px 20px rgba(0,0,0,.06);
transition:
transform .3s ease,
box-shadow .3s ease,
border-color .3s ease;
}
.administrative-exper-card:hover {
transform: translateY(-3px);
box-shadow: 0 14px 32px rgba(0,0,0,.10);
border-right-color: #006b32;
}
/* =========================================
Position / Title
========================================= */
.administrative-exper-title {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 18px;
padding-bottom: 14px;
border-bottom: 1px solid #edf0f2;
color: #00883e;
font-size: 19px;
font-weight: 700;
line-height: 1.7;
}
.administrative-exper-title i {
font-size: 18px;
min-width: 20px;
}
/* =========================================
Meta Information
========================================= */
.administrative-exper-meta {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
}
/* =========================================
Organization
========================================= */
.administrative-exper-meta-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 12px;
box-sizing: border-box;
background: #f8faf9;
border-radius: 9px;
}
.administrative-exper-meta-item > i {
width: 20px;
min-width: 20px;
text-align: center;
color: #00883e;
font-size: 15px;
}
.administrative-exper-meta-item > div {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.administrative-exper-meta-item strong {
color: #777;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
.administrative-exper-meta-item span {
color: #333;
font-size: 13px;
font-weight: 600;
line-height: 1.7;
}
/* =========================================
Dates - Same Row
========================================= */
.administrative-exper-dates {
display: flex;
align-items: center;
gap: 25px;
width: 100%;
padding: 10px 12px;
box-sizing: border-box;
background: #f8faf9;
border-radius: 9px;
}
.administrative-exper-date {
display: inline-flex;
align-items: center;
gap: 7px;
white-space: nowrap;
}
.administrative-exper-date i {
color: #00883e;
font-size: 15px;
}
.administrative-exper-date strong {
color: #777;
font-size: 12px;
font-weight: 700;
}
.administrative-exper-date span {
color: #333;
font-size: 13px;
font-weight: 600;
}
/* =========================================
Mobile
========================================= */
@media (max-width: 768px) {
.administrative-exper-card {
padding: 18px;
}
.administrative-exper-title {
font-size: 17px;
}
.administrative-exper-dates {
flex-wrap: wrap;
gap: 8px 20px;
}
}
/* =========================================================
RESEARCH SUPERVISION
Separate Card for Each Research
========================================================= */
.research-supervision-list {
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
}
/* =========================================
Research Card
========================================= */
.research-supervision-card {
width: 100%;
box-sizing: border-box;
background: #fff;
border: 1px solid #edf0f2;
border-right: 4px solid #00883e;
border-radius: 14px;
padding: 22px;
box-shadow: 0 6px 20px rgba(0,0,0,.06);
transition:
transform .3s ease,
box-shadow .3s ease,
border-color .3s ease;
}
.research-supervision-card:hover {
transform: translateY(-3px);
box-shadow: 0 14px 32px rgba(0,0,0,.10);
border-right-color: #006b32;
}
/* =========================================
Research Title
========================================= */
.research-thesis-title {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0 0 18px;
padding-bottom: 14px;
border-bottom: 1px solid #edf0f2;
color: #00883e;
font-size: 19px;
font-weight: 700;
line-height: 1.7;
}
.research-thesis-title i {
min-width: 20px;
margin-top: 5px;
font-size: 18px;
}
/* =========================================
Research Information
========================================= */
.research-supervision-meta {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
width: 100%;
}
/* =========================================
Meta Item
========================================= */
.research-meta-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: #f8faf9;
border-radius: 9px;
min-width: 0;
}
.research-meta-item > i {
width: 20px;
min-width: 20px;
text-align: center;
color: #00883e;
font-size: 15px;
}
/* =========================================
Label + Value
========================================= */
.research-meta-item > div {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
flex-wrap: wrap;
}
.research-meta-label {
color: #777;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
.research-meta-item strong {
color: #333;
font-size: 13px;
font-weight: 600;
line-height: 1.7;
}
/* =========================================
Mobile
========================================= */
@media (max-width: 768px) {
.research-supervision-card {
padding: 18px;
}
.research-thesis-title {
font-size: 17px;
}
.research-supervision-meta {
grid-template-columns: 1fr;
}
}
/* =========================================================
MEMBERSHIP
Separate Card for Each Membership
========================================================= */
.membership-list {
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
}
/* =========================================
Membership Card
========================================= */
.membership-card {
width: 100%;
box-sizing: border-box;
background: #fff;
border: 1px solid #edf0f2;
border-right: 4px solid #00883e;
border-radius: 14px;
padding: 22px;
box-shadow: 0 6px 20px rgba(0,0,0,.06);
transition:
transform .3s ease,
box-shadow .3s ease,
border-color .3s ease;
}
.membership-card:hover {
transform: translateY(-3px);
box-shadow: 0 14px 32px rgba(0,0,0,.10);
border-right-color: #006b32;
}
/* =========================================
Membership Title
========================================= */
.membership-title {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 18px;
padding-bottom: 14px;
border-bottom: 1px solid #edf0f2;
color: #00883e;
font-size: 19px;
font-weight: 700;
line-height: 1.7;
}
.membership-title i {
min-width: 20px;
font-size: 18px;
}
.membership-label {
color: #777;
font-size: 13px;
font-weight: 700;
}
.membership-title strong {
color: #00883e;
font-size: 18px;
font-weight: 700;
}
/* =========================================
Membership Meta
========================================= */
.membership-meta {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
width: 100%;
}
.membership-meta-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: #f8faf9;
border-radius: 9px;
min-width: 0;
}
.membership-meta-item > i {
width: 20px;
min-width: 20px;
text-align: center;
color: #00883e;
font-size: 15px;
}
.membership-meta-item > div {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
flex-wrap: wrap;
}
.membership-meta-label {
color: #777;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
.membership-meta-item span {
color: #333;
font-size: 13px;
font-weight: 600;
}
/* =========================================
Membership URL
========================================= */
.membership-meta-item a {
color: #00883e;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: .25s;
}
.membership-meta-item a:hover {
color: #006b32;
text-decoration: underline;
}
/* =========================================
Mobile
========================================= */
@media (max-width: 768px) {
.membership-card {
padding: 18px;
}
.membership-title {
font-size: 17px;
flex-wrap: wrap;
}
.membership-title strong {
font-size: 16px;
}
.membership-meta {
grid-template-columns: 1fr;
}
}
/* =========================================================
ACADEMIC QUALIFICATIONS
========================================================= */
.academic-qualifications-list {
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
}
/* =========================================
Qualification Card
========================================= */
.academic-qualification-card {
width: 100%;
box-sizing: border-box;
background: #fff;
border: 1px solid #edf0f2;
border-right: 4px solid #00883e;
border-radius: 14px;
padding: 22px;
box-shadow: 0 6px 20px rgba(0,0,0,.06);
transition:
transform .3s ease,
box-shadow .3s ease;
}
.academic-qualification-card:hover {
transform: translateY(-3px);
box-shadow: 0 14px 32px rgba(0,0,0,.10);
}
/* =========================================
Graduation Year
========================================= */
.academic-qualification-year {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 13px;
margin-bottom: 15px;
background: #edf8f2;
color: #00883e;
border-radius: 30px;
font-size: 12px;
font-weight: 700;
}
.academic-qualification-year i {
font-size: 14px;
}
/* =========================================
Qualification Title
========================================= */
.academic-qualification-title {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 20px;
padding-bottom: 15px;
border-bottom: 1px solid #edf0f2;
color: #00883e;
font-family: 'Cairo', sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 1.7;
}
.academic-qualification-title i {
font-size: 19px;
min-width: 20px;
}
/* =========================================
Meta Grid
========================================= */
.academic-qualification-meta {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
/* =========================================
Meta Item
========================================= */
.academic-qualification-item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 11px 13px;
background: #f8faf9;
border-radius: 9px;
font-family: 'Cairo', sans-serif;
}
.academic-qualification-item > i {
width: 20px;
min-width: 20px;
margin-top: 4px;
text-align: center;
color: #00883e;
font-size: 15px;
}
.academic-qualification-item > div {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
line-height: 1.7;
}
.academic-qualification-item strong {
color: #555;
font-size: 12px;
font-weight: 700;
}
.academic-qualification-item span {
color: #333;
font-size: 13px;
font-weight: 500;
}
/* =========================================
Description
========================================= */
.academic-qualification-description {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid #edf0f2;
font-family: 'Cairo', sans-serif;
}
.academic-qualification-description-title {
display: flex;
align-items: center;
gap: 7px;
margin-bottom: 8px;
color: #00883e;
font-size: 13px;
}
.academic-qualification-description-title i {
font-size: 15px;
}
.academic-qualification-description-content {
color: #555;
font-size: 13px;
line-height: 1.9;
}
.academic-qualification-description-content p {
margin: 0 0 8px;
}
/* =========================================
Mobile
========================================= */
@media (max-width: 768px) {
.academic-qualification-card {
padding: 18px;
}
.academic-qualification-title {
font-size: 17px;
}
.academic-qualification-meta {
grid-template-columns: 1fr;
}
}
/* =========================================================
Higher Education - Organization & Position Same Row
========================================================= */
.higher-education-meta-row {
display: flex;
align-items: stretch;
gap: 12px;
width: 100%;
margin-bottom: 12px;
}
.higher-education-meta-row .higher-education-meta-item {
flex: 1;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: #f8faf9;
border-radius: 9px;
box-sizing: border-box;
}
.higher-education-meta-row .higher-education-meta-item > i {
width: 20px;
min-width: 20px;
text-align: center;
color: #00883e;
font-size: 15px;
}
.higher-education-meta-row .higher-education-meta-item > div {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.higher-education-meta-row .higher-education-meta-item strong {
color: #777;
font-size: 12px;
font-weight: 700;
}
.higher-education-meta-row .higher-education-meta-item span {
color: #333;
font-size: 13px;
font-weight: 600;
}
/* Mobile */
@media (max-width: 768px) {
.higher-education-meta-row {
flex-direction: column;
gap: 10px;
}
}
/* =========================================================
FACULTY SKILLS
========================================================= */
.faculty-skills-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
margin-top: 25px;
}
/* =========================================================
SKILL CARD
========================================================= */
.faculty-skill-item {
position: relative;
display: flex;
gap: 20px;
padding: 26px;
background: #ffffff;
border: 1px solid #e8edf0;
border-radius: 18px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
transition:
transform 0.3s ease,
box-shadow 0.3s ease,
border-color 0.3s ease;
overflow: hidden;
}
/* الخط الجانبي */
.faculty-skill-item::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 4px;
height: 100%;
background: #00883e;
transform: scaleY(0);
transform-origin: center;
transition: transform 0.3s ease;
}
/* Hover */
.faculty-skill-item:hover {
transform: translateY(-5px);
border-color: rgba(0, 136, 62, 0.25);
box-shadow: 0 14px 35px rgba(0, 0, 0, 0.09);
}
.faculty-skill-item:hover::before {
transform: scaleY(1);
}
/* =========================================================
ICON
========================================================= */
.faculty-skill-item-icon {
flex: 0 0 62px;
width: 62px;
height: 62px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 136, 62, 0.09);
color: #00883e;
border-radius: 16px;
font-size: 25px;
transition:
background 0.3s ease,
color 0.3s ease,
transform 0.3s ease;
}
.faculty-skill-item:hover
.faculty-skill-item-icon {
background: #00883e;
color: #ffffff;
transform: rotate(-4deg) scale(1.05);
}
/* =========================================================
CONTENT
========================================================= */
.faculty-skill-item-content {
flex: 1;
min-width: 0;
}
/* =========================================================
TITLE
========================================================= */
.faculty-skill-item-content h3 {
margin: 0 0 10px;
font-size: 21px;
font-weight: 700;
line-height: 1.5;
color: #1f2933;
}
/* =========================================================
CATEGORY
========================================================= */
.faculty-skill-meta {
margin-bottom: 12px;
}
.faculty-skill-meta span {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 11px;
background: #f2f8f5;
color: #00883e;
border-radius: 30px;
font-size: 13px;
font-weight: 600;
}
.faculty-skill-meta i {
font-size: 12px;
}
/* =========================================================
PROFICIENCY
========================================================= */
.faculty-skill-proficiency {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
margin-bottom: 14px;
font-size: 14px;
color: #68737d;
}
.faculty-skill-proficiency > i {
color: #00883e;
}
.faculty-skill-proficiency strong {
color: #374151;
}
.faculty-skill-proficiency span {
color: #00883e;
font-weight: 700;
}
/* =========================================================
DESCRIPTION
========================================================= */
.faculty-skill-description {
padding-top: 14px;
border-top: 1px solid #edf0f2;
color: #66717b;
font-size: 14px;
line-height: 1.9;
}
.faculty-skill-description p {
margin: 0 0 8px;
}
.faculty-skill-description p:last-child {
margin-bottom: 0;
}
/* =========================================================
CERTIFICATE
========================================================= */
.faculty-skill-certificate {
margin-top: 18px;
}
.faculty-skill-certificate a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 15px;
background: #00883e;
color: #ffffff;
border-radius: 9px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition:
background 0.25s ease,
transform 0.25s ease,
box-shadow 0.25s ease;
}
.faculty-skill-certificate a:hover {
background: #006f32;
color: #ffffff;
transform: translateY(-2px);
box-shadow:
0 6px 15px rgba(0, 136, 62, 0.22);
}
.faculty-skill-certificate a i:last-child {
font-size: 11px;
opacity: 0.8;
}
/* =========================================================
EMPTY STATE
========================================================= */
.faculty-empty-section {
padding: 45px 25px;
margin-top: 20px;
text-align: center;
background: #f8faf9;
border: 1px dashed #d7e3dc;
border-radius: 16px;
color: #7a858d;
}
.faculty-empty-section i {
display: block;
margin-bottom: 12px;
font-size: 38px;
color: #00883e;
}
.faculty-empty-section p {
margin: 0;
font-size: 15px;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 900px) {
.faculty-skills-list {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
.faculty-skill-item {
gap: 15px;
padding: 20px;
}
.faculty-skill-item-icon {
flex-basis: 52px;
width: 52px;
height: 52px;
font-size: 21px;
border-radius: 13px;
}
.faculty-skill-item-content h3 {
font-size: 18px;
}
}
/* =========================================================
SKILL PROFICIENCY PROGRESS BAR
========================================================= */
.faculty-skill-proficiency {
margin: 16px 0 18px;
}
/* Header */
.faculty-skill-proficiency-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
margin-bottom: 9px;
font-size: 13px;
}
.faculty-skill-proficiency-header span {
display: flex;
align-items: center;
gap: 7px;
color: #68737d;
}
.faculty-skill-proficiency-header span i {
color: #00883e;
}
.faculty-skill-proficiency-header strong {
color: #00883e;
font-weight: 700;
}
/* Progress Track */
.faculty-skill-progress {
position: relative;
width: 100%;
height: 9px;
background: #e9efec;
border-radius: 20px;
overflow: hidden;
}
/* Progress Bar */
.faculty-skill-progress-bar {
display: block;
height: 100%;
background: #00883e;
border-radius: 20px;
transform-origin: right center;
animation: facultySkillProgress 1s ease-out;
}
/* Animation */
@keyframes facultySkillProgress {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
/* Percentage */
.faculty-skill-progress-value {
margin-top: 6px;
text-align: left;
direction: ltr;
font-size: 11px;
color: #89939b;
font-weight: 600;
}
/*```css id="c9m1ra"*/
/* =========================================================
FACULTY SAVE SUCCESS MESSAGE
========================================================= */
.faculty-save-success {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 25px;
padding: 16px 20px;
background: #f0faf5;
border: 1px solid #c8ead8;
border-radius: 12px;
color: #08783d;
font-size: 14px;
font-weight: 600;
animation: facultySuccessFade .4s ease;
}
.faculty-save-success i {
font-size: 20px;
}
@keyframes facultySuccessFade {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* =========================================================
FACULTY BASIC INFO DASHBOARD
Professional Form Design
========================================================= */
.faculty-basic-info-page {
background: #f6f8fa;
min-height: 100vh;
padding: 45px 20px 70px;
font-family: 'Cairo', sans-serif;
}
.faculty-basic-info-container {
width: 100%;
max-width: 1180px;
margin: 0 auto;
}
/* =========================================================
PAGE HEADER
========================================================= */
.faculty-basic-info-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
margin-bottom: 28px;
}
.faculty-basic-info-header h1 {
display: flex;
align-items: center;
gap: 12px;
margin: 16px 0 6px;
color: #1f2933;
font-size: 30px;
font-weight: 700;
line-height: 1.5;
}
.faculty-basic-info-header h1 i {
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #eaf7f0;
color: #00883e;
border-radius: 14px;
font-size: 21px;
}
.faculty-basic-info-header p {
margin: 0;
color: #7a858d;
font-size: 14px;
}
/* =========================================================
BACK LINK
========================================================= */
.faculty-back-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: #00883e;
text-decoration: none;
font-size: 13px;
font-weight: 600;
transition: all .25s ease;
}
.faculty-back-link:hover {
color: #006b32;
transform: translateX(4px);
}
.faculty-back-link i {
font-size: 13px;
}
/* =========================================================
FORM
========================================================= */
.faculty-basic-info-form {
display: flex;
flex-direction: column;
gap: 24px;
}
/* =========================================================
FORM SECTION
========================================================= */
.faculty-form-section {
position: relative;
background: #ffffff;
border: 1px solid #e8edf0;
border-radius: 20px;
padding: 28px 30px;
box-shadow: 0 8px 28px rgba(0, 0, 0, .055);
transition:
box-shadow .3s ease,
transform .3s ease;
}
.faculty-form-section:hover {
box-shadow: 0 14px 35px rgba(0, 0, 0, .075);
}
/* =========================================================
SECTION HEADER
========================================================= */
.faculty-form-section-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 27px;
padding-bottom: 18px;
border-bottom: 1px solid #edf0f2;
}
.faculty-form-section-icon {
width: 48px;
height: 48px;
min-width: 48px;
display: flex;
align-items: center;
justify-content: center;
background: #edf8f2;
color: #00883e;
border-radius: 14px;
font-size: 20px;
transition: all .3s ease;
}
.faculty-form-section:hover .faculty-form-section-icon {
background: #00883e;
color: #ffffff;
transform: scale(1.05);
}
.faculty-form-section-header h2 {
margin: 0 0 3px;
color: #1f2933;
font-size: 19px;
font-weight: 700;
line-height: 1.6;
}
.faculty-form-section-header p {
margin: 0;
color: #8a949c;
font-size: 12px;
line-height: 1.7;
}
/* =========================================================
FORM GRID
========================================================= */
.faculty-form-grid {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 20px;
}
.faculty-full-width {
grid-column: 1 / -1;
}
/* =========================================================
FORM FIELD
========================================================= */
.faculty-form-field {
min-width: 0;
}
.faculty-form-field label,
.faculty-file-field label {
display: block;
margin-bottom: 8px;
color: #374151;
font-size: 13px;
font-weight: 700;
}
.faculty-form-field label::after {
content: "";
}
/* =========================================================
INPUTS
========================================================= */
.faculty-form-field input,
.faculty-form-field select,
.faculty-form-field textarea {
width: 100%;
box-sizing: border-box;
padding: 12px 14px;
border: 1px solid #dfe5e8;
border-radius: 11px;
background: #ffffff;
color: #374151;
font-family: 'Cairo', sans-serif;
font-size: 13px;
outline: none;
transition:
border-color .25s ease,
box-shadow .25s ease,
background .25s ease;
}
.faculty-form-field input,
.faculty-form-field select {
min-height: 46px;
}
.faculty-form-field textarea {
min-height: 170px;
resize: vertical;
line-height: 1.9;
}
/* Focus */
.faculty-form-field input:focus,
.faculty-form-field select:focus,
.faculty-form-field textarea:focus {
border-color: #00883e;
box-shadow:
0 0 0 3px rgba(0, 136, 62, .09);
background: #fcfffd;
}
/* Placeholder */
.faculty-form-field input::placeholder,
.faculty-form-field textarea::placeholder {
color: #a5adb3;
}
/* =========================================================
SELECT
========================================================= */
.faculty-form-field select {
cursor: pointer;
appearance: auto;
}
/* =========================================================
READONLY FIELD
========================================================= */
.faculty-readonly-field {
background: #f5f7f8 !important;
color: #6b7280 !important;
cursor: not-allowed;
border-color: #e5e9ec !important;
}
.faculty-form-field small,
.faculty-file-field small {
display: block;
margin-top: 7px;
color: #929ba2;
font-size: 11px;
line-height: 1.7;
}
/* =========================================================
FILE AREA
========================================================= */
.faculty-file-grid {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 22px;
}
.faculty-file-field {
padding: 20px;
background: #f9fbfa;
border: 1px dashed #cfded5;
border-radius: 15px;
transition: all .3s ease;
}
.faculty-file-field:hover {
background: #f5faf7;
border-color: #00883e;
}
/* File input */
.faculty-file-field input[type="file"] {
width: 100%;
box-sizing: border-box;
padding: 10px;
border: 1px solid #dfe6e1;
border-radius: 10px;
background: #ffffff;
font-family: 'Cairo', sans-serif;
font-size: 12px;
cursor: pointer;
}
.faculty-file-field input[type="file"]:focus {
outline: none;
border-color: #00883e;
}
/* =========================================================
CURRENT PHOTO
========================================================= */
.faculty-current-photo {
width: 120px;
height: 120px;
margin-bottom: 15px;
border-radius: 16px;
overflow: hidden;
border: 4px solid #ffffff;
box-shadow: 0 8px 22px rgba(0, 0, 0, .10);
background: #f1f4f2;
}
.faculty-current-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* =========================================================
FORM ACTIONS
========================================================= */
.faculty-form-actions {
display: flex;
justify-content: flex-start;
padding-top: 5px;
}
.faculty-save-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-width: 190px;
padding: 13px 25px;
border: none;
border-radius: 12px;
background: #00883e;
color: #ffffff;
font-family: 'Cairo', sans-serif;
font-size: 14px;
font-weight: 700;
cursor: pointer;
box-shadow:
0 8px 20px rgba(0, 136, 62, .18);
transition:
background .25s ease,
transform .25s ease,
box-shadow .25s ease;
}
.faculty-save-button:hover {
background: #006f32;
color: #ffffff;
transform: translateY(-3px);
box-shadow:
0 13px 28px rgba(0, 136, 62, .24);
}
.faculty-save-button:active {
transform: translateY(-1px);
}
.faculty-save-button i {
font-size: 15px;
}
/* =========================================================
SUCCESS MESSAGE
========================================================= */
.faculty-basic-info-page .faculty-save-success {
margin-bottom: 24px;
border-radius: 13px;
}
/* =========================================================
RESPONSIVE - TABLET
========================================================= */
@media (max-width: 900px) {
.faculty-basic-info-page {
padding: 35px 16px 55px;
}
.faculty-form-section {
padding: 24px;
}
.faculty-form-grid {
grid-template-columns: 1fr;
}
.faculty-full-width {
grid-column: auto;
}
.faculty-file-grid {
grid-template-columns: 1fr;
}
}
/* =========================================================
RESPONSIVE - MOBILE
========================================================= */
@media (max-width: 600px) {
.faculty-basic-info-page {
padding: 25px 12px 45px;
}
.faculty-basic-info-header {
margin-bottom: 22px;
}
.faculty-basic-info-header h1 {
font-size: 24px;
}
.faculty-basic-info-header h1 i {
width: 42px;
height: 42px;
font-size: 18px;
border-radius: 12px;
}
.faculty-form-section {
padding: 20px 16px;
border-radius: 16px;
}
.faculty-form-section-header {
gap: 11px;
margin-bottom: 22px;
padding-bottom: 15px;
}
.faculty-form-section-icon {
width: 42px;
height: 42px;
min-width: 42px;
border-radius: 12px;
font-size: 17px;
}
.faculty-form-section-header h2 {
font-size: 17px;
}
.faculty-form-section-header p {
font-size: 11px;
}
.faculty-form-grid {
gap: 16px;
}
.faculty-form-field input,
.faculty-form-field select {
min-height: 44px;
}
.faculty-save-button {
width: 100%;
}
.faculty-form-actions {
width: 100%;
}
.faculty-current-photo {
width: 105px;
height: 105px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.faculty-form-section,
.faculty-form-section-icon,
.faculty-save-button,
.faculty-file-field,
.faculty-back-link {
transition: none;
}
}
/* =========================================
Academic Links - Unavailable
========================================= */
.faculty-social-links .faculty-social-link-unavailable {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
width: 100%;
min-height: 46px;
padding: 10px 14px;
border-radius: 9px;
background: #f7f9f8;
color: #59636e;
text-decoration: none;
box-sizing: border-box;
font-size: 14px;
font-weight: 400;
cursor: default;
}
/* الأيقونة */
.faculty-social-links .faculty-social-link-unavailable i {
flex-shrink: 0;
font-size: 18px;
width: 22px;
text-align: center;
}
/* النص */
.faculty-social-links .faculty-social-link-unavailable small {
display: inline;
margin: 0;
padding: 0;
font-size: 12px;
color: #7a858f;
font-weight: 400;
}
/* منع أي تأثير Hover */
.faculty-social-links .faculty-social-link-unavailable:hover {
background: #f7f9f8;
color: #59636e;
text-decoration: none;
transform: none;
}