@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');
:root{--navy:#102f46;--blue:#1d5875;--teal:#2d8990;--gold:#c5a56a;--ink:#243746;--muted:#71808a;--soft:#f3f6f7;--white:#fff;--line:#e4eaed}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:'Cairo',Tahoma,sans-serif;color:var(--ink);line-height:1.8;background:#fff}a{text-decoration:none;color:inherit}.container{width:min(1160px,calc(100% - 40px));margin:auto}
.topbar{background:var(--navy);color:#dce8ed;font-size:12px}.topbar-inner{display:flex;justify-content:space-between;padding:7px 0}.topbar a{color:#fff}
.header-main{min-height:92px;display:flex;align-items:center;justify-content:space-between;gap:25px}.brand{display:flex;align-items:center;gap:13px;color:var(--navy)}.brand strong{display:block;font-size:20px}.brand small{display:block;color:var(--muted);font-size:12px}.logo-placeholder{width:58px;height:58px;border:1px dashed #9aabb4;border-radius:50%;display:grid;place-content:center;text-align:center;font-size:10px;color:var(--blue);line-height:1.3}.main-nav{display:flex;gap:22px;align-items:center;font-size:13px;font-weight:700}.main-nav a:hover,.text-link{color:var(--teal)}.menu-toggle{display:none;background:none;border:0;font-size:25px;color:var(--navy)}
.hero{min-height:470px;position:relative;display:flex;align-items:center;color:#fff;background:linear-gradient(110deg,rgba(11,39,58,.95),rgba(20,76,94,.82)),url('../images/hero.jpg') center/cover}.hero-overlay{position:absolute;inset:0;background:radial-gradient(circle at 15% 25%,rgba(197,165,106,.2),transparent 30%)}.hero-content{position:relative;padding:75px 0}.eyebrow{font-size:12px;font-weight:800;letter-spacing:.3px;color:var(--teal)}.hero .eyebrow{color:#e1c99d}.hero h1{font-size:clamp(34px,5vw,58px);line-height:1.35;margin:12px 0}.hero h1 em{font-style:normal;color:#e0c28c}.hero p{max-width:620px;color:#e2eaed;font-size:17px}.hero-actions{display:flex;gap:12px;margin-top:28px}.btn{display:inline-flex;padding:11px 23px;border-radius:4px;font-weight:700;font-size:13px}.btn-light{background:#fff;color:var(--navy)}.btn-outline{border:1px solid #d5e1e5;color:#fff}.btn-primary{background:var(--blue);color:#fff}
.quick-section{position:relative;margin-top:-35px;z-index:2}.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;box-shadow:0 12px 35px #17384a14;border:1px solid var(--line)}.quick-card{padding:22px 18px;display:flex;align-items:center;gap:13px;border-left:1px solid var(--line)}.quick-card:last-child{border:0}.quick-card strong,.quick-card small{display:block}.quick-card strong{font-size:14px;color:var(--navy)}.quick-card small{font-size:11px;color:var(--muted)}.quick-card>b{margin-right:auto;color:var(--gold)}.quick-icon{font-size:25px;color:var(--teal)}
.section{padding:75px 0}.soft-section{background:var(--soft)}.section-heading{text-align:center;margin-bottom:32px}.section-heading h2,.split-section h2,.service-row h2{font-size:30px;color:var(--navy);margin:5px 0 8px}.section-heading p,.split-section p,.service-row p{color:var(--muted);font-size:14px;margin:0}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.stat{background:#fff;border:1px solid var(--line);padding:25px;text-align:center}.stat strong{display:block;font-size:32px;color:var(--teal)}.stat span{font-size:13px;color:var(--muted)}
.heading-row{display:flex;justify-content:space-between;align-items:end;text-align:right}.heading-row h2{margin-bottom:0}.text-link{font-size:13px;font-weight:700}.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.news-card{border:1px solid var(--line);background:#fff;transition:.2s}.news-card:hover{transform:translateY(-4px);box-shadow:0 12px 25px #102f4610}.news-image{height:155px;background:linear-gradient(135deg,#dbe7e9,#a9c2c5);display:flex;align-items:end;padding:15px}.news-image span{background:#fff;padding:4px 12px;font-size:11px;color:var(--blue)}.news-body{padding:18px}.news-body small{color:var(--teal);font-size:11px}.news-body h3{font-size:17px;color:var(--navy);margin:7px 0}.news-body p{font-size:13px;color:var(--muted)}.news-body>a{font-size:12px;color:var(--teal);font-weight:700}
.department-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.department-card{background:#fff;border:1px solid var(--line);padding:23px;display:flex;flex-direction:column;gap:5px}.department-card>span{color:var(--gold);font-size:23px}.department-card strong{color:var(--navy)}.department-card small{font-size:11px;color:var(--muted)}
.split-section{display:grid;grid-template-columns:1.1fr .9fr;gap:55px;align-items:center}.split-section .btn{margin-top:22px}.about-panel{min-height:260px;background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;padding:35px;display:flex;flex-direction:column;justify-content:center;align-items:center}.about-mark{font-size:70px;font-weight:800;color:#ffffff25;line-height:1}.about-panel strong{font-size:20px}.about-panel span{font-size:12px;color:#d5e2e8}
.service-row{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}.service-list{background:#fff;border:1px solid var(--line)}.service-list a{display:flex;justify-content:space-between;padding:13px 18px;border-bottom:1px solid var(--line);font-size:13px;font-weight:700}.service-list a:last-child{border:0}.service-list b{color:var(--teal)}.document-placeholder{padding:28px;text-align:center;border:1px dashed #b8c8ce;color:var(--muted);background:#fafcfc}
footer{background:var(--navy);color:#e5eef1}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:35px;padding:45px 0}.footer-grid h2{margin:0 0 5px}.footer-grid p,.footer-grid span,.footer-grid a{display:block;color:#bdcdd3;font-size:12px}.footer-grid strong{display:block;margin-bottom:12px}.copyright{text-align:center;border-top:1px solid #ffffff20;padding:13px;font-size:11px;color:#bdcdd3}
@media(max-width:900px){.main-nav{gap:11px;font-size:11px}.quick-grid{grid-template-columns:repeat(2,1fr)}.quick-card:nth-child(2){border-left:0}.quick-card:nth-child(-n+2){border-bottom:1px solid var(--line)}.department-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.container{width:min(100% - 28px,1160px)}.header-main{min-height:75px}.menu-toggle{display:block}.main-nav{display:none;position:absolute;top:120px;right:0;left:0;background:#fff;padding:15px 22px;z-index:5;box-shadow:0 10px 20px #0001;flex-direction:column;align-items:stretch}.main-nav.open{display:flex}.hero{min-height:420px}.hero-content{padding:55px 0}.hero p{font-size:14px}.quick-grid{grid-template-columns:1fr}.quick-card{border-left:0;border-bottom:1px solid var(--line)}.quick-card:last-child{border-bottom:0}.section{padding:55px 0}.stats-grid{grid-template-columns:repeat(2,1fr)}.news-grid,.department-grid,.split-section,.service-row,.footer-grid{grid-template-columns:1fr}.heading-row{align-items:start;gap:10px;flex-direction:column}.split-section,.service-row{gap:25px}.footer-grid{gap:20px}}
/* كلية التربية بالأرقام */

.stats-section {
    background: #f0f5f3;
    position: relative;
    overflow: hidden;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 35px;
}

.stats-card {
    background: #fff;
    border: 1px solid #e5ece8;
    border-radius: 17px;
    padding: 28px 22px;
    position: relative;
    overflow: hidden;
    transition: .25s;
}

.stats-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 35px rgba(18,42,58,.09);
    border-color: #b7d8ce;
}

.stats-card:after {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    border: 1px solid #e7efeb;
    border-radius: 50%;
    left: -35px;
    bottom: -50px;
}

.stats-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #e8f6f2;
    color: #087f78;
    font-size: 23px;
    margin-bottom: 20px;
}

.stats-number {
    display: block;
    color: #10233d;
    font-size: 36px;
    font-weight: 800;
    line-height: 1.4;
    direction: ltr;
    text-align: right;
}

.stats-card h3 {
    font-size: 14px;
    color: #324659;
    margin: 7px 0 4px;
}

.stats-card p {
    color: #87949b;
    font-size: 11px;
    margin: 0;
}

.stats-footer {
    text-align: center;
    color: #71818a;
    font-size: 12px;
    margin-top: 25px;
}

@media(max-width: 900px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width: 480px) {
    .stats-grid {
        gap: 10px;
    }

    .stats-card {
        padding: 20px 14px;
    }

    .stats-number {
        font-size: 29px;
    }
}