*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{direction:rtl;background:#f4f7f6;color:#222;font-family:Tahoma,Arial,sans-serif;line-height:1.9}
a{text-decoration:none;color:inherit}
img{max-width:100%}
.container{max-width:1280px;margin:auto;padding:0 20px}

.topbar{background:#063d34;color:#fff;font-size:11px}
.topbar-inner{max-width:1280px;margin:auto;padding:7px 20px;display:flex;align-items:center;justify-content:space-between}

.header{background:#fff;position:sticky;top:0;z-index:9999;border-bottom:1px solid #e4ebe8;box-shadow:0 3px 18px rgba(0,0,0,.05)}
.header-inner{max-width:1280px;min-height:82px;margin:auto;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:25px;position:relative}
.logo-area{display:flex;align-items:center;gap:12px;min-width:235px}
.logo{width:58px;height:58px;object-fit:contain}
.logo-title{color:#063d34;font-size:18px;font-weight:bold}
.logo-subtitle{color:#888;font-size:10px}

.nav{flex:1;display:flex;align-items:center;justify-content:center;gap:3px}
.nav a{display:flex;align-items:center;justify-content:center;padding:9px 12px;border-radius:8px;color:#333;font-size:12px;font-weight:bold;white-space:nowrap;transition:.25s}
.nav a:hover{background:#e7f4f0;color:#087d65}
.nav .special{background:#087d65;color:#fff}
.nav .special:hover{background:#eab000;color:#222}

.mobile-menu-btn{display:none;width:46px;height:46px;border:0;border-radius:12px;background:#087d65;cursor:pointer;padding:9px;position:relative;z-index:10001}
.mobile-menu-btn span{display:block;width:25px;height:3px;margin:5px auto;border-radius:5px;background:#fff;transition:transform .3s ease,opacity .25s ease}
.mobile-menu-btn.active span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.mobile-menu-btn.active span:nth-child(2){opacity:0}
.mobile-menu-btn.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.hero-area{margin-top:22px;display:grid;grid-template-columns:minmax(0,2.2fr) minmax(270px,.8fr);gap:18px}
.slider{height:390px;position:relative;overflow:hidden;border-radius:22px;background:#063d34;box-shadow:0 12px 35px rgba(0,0,0,.11)}
.slides{position:relative;width:100%;height:100%}
.slide{position:absolute;inset:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s ease}
.slide.active{opacity:1;visibility:visible}
.slide-image{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.slide-image img{width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;display:block}
.slide::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,.25) 60%,rgba(0,0,0,.05))}
.slide-caption{position:absolute;right:35px;left:35px;bottom:35px;z-index:5;color:#fff}
.slide-caption span{display:inline-block;background:#eab000;color:#222;padding:4px 13px;border-radius:20px;font-size:10px;font-weight:bold;margin-bottom:7px}
.slide-caption h2{font-size:23px;line-height:1.8;max-width:800px;margin-bottom:3px}
.slide-caption p{font-size:10px;opacity:.9}
.slide-caption a{color:#fff;font-size:10px;border-bottom:1px solid #eab000}

.slider-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:20;width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.93);color:#063d34;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px}
.slider-btn:hover{background:#eab000}
.slider-prev{right:18px}.slider-next{left:18px}
.slider-dots{position:absolute;bottom:13px;left:50%;transform:translateX(-50%);z-index:20;display:flex;gap:6px}
.slider-dot{width:8px;height:8px;border:0;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer}
.slider-dot.active{width:24px;background:#eab000;border-radius:10px}

.mayor-box{background:#fff;border-radius:22px;overflow:hidden;border:1px solid #e4ebe8;box-shadow:0 12px 35px rgba(0,0,0,.07);min-height:390px;display:flex;flex-direction:column}
.mayor-image{height:285px;background:#e6ecea;overflow:hidden}
.mayor-image img{width:100%;height:100%;object-fit:cover;object-position:center top}
.mayor-info{flex:1;padding:15px 20px;text-align:center;display:flex;flex-direction:column;justify-content:center}
.mayor-info small{color:#087d65;font-size:10px}.mayor-info h2{color:#063d34;font-size:18px}.mayor-info p{color:#888;font-size:10px}

.section{margin-top:45px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:18px}
.section-title h2{color:#063d34;font-size:22px}.section-title p{color:#888;font-size:10px}.more{color:#087d65;font-size:10px;font-weight:bold}

.quick-access{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.quick-card{background:#fff;border:1px solid #e4ebe8;border-radius:15px;padding:17px 9px;text-align:center;transition:.25s}
.quick-card:hover{transform:translateY(-4px);box-shadow:0 10px 25px rgba(0,0,0,.07)}
.quick-icon{width:48px;height:48px;margin:0 auto 8px;background:#e7f4f0;color:#087d65;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:21px}
.quick-card h3{color:#333;font-size:12px}.quick-card p{color:#999;font-size:9px}

.services{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.service{background:#fff;border:1px solid #e4ebe8;border-radius:16px;padding:18px;display:flex;align-items:center;gap:14px;transition:.25s}
.service:hover{transform:translateY(-3px);box-shadow:0 10px 25px rgba(0,0,0,.06)}
.service-icon{width:50px;height:50px;min-width:50px;background:#e8f5f1;color:#087d65;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:21px}
.service h3{color:#063d34;font-size:13px}.service p{color:#999;font-size:9px}

.latest-news-wrapper{width:100%;overflow:hidden}
.latest-news{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.latest-news-card{background:#fff;border:1px solid #e4ebe8;border-radius:17px;overflow:hidden;min-height:150px;display:flex;transition:.25s}
.latest-news-card:hover{transform:translateY(-4px);box-shadow:0 10px 25px rgba(0,0,0,.07)}
.latest-news-image{width:190px;min-width:190px;height:150px;background:#e5ece9;overflow:hidden}
.latest-news-image img{width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;display:block}
.latest-news-content{padding:15px;flex:1;display:flex;flex-direction:column;justify-content:center}
.latest-news-date{color:#087d65;font-size:9px}.latest-news-content h3{color:#063d34;font-size:13px;line-height:1.8;margin-bottom:7px}.latest-read{color:#087d65;font-size:10px;font-weight:bold}

.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}
.project{height:220px;border-radius:18px;overflow:hidden;position:relative;background:#ddd}
.project img{width:100%;height:100%;object-fit:cover}
.project::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 25%,rgba(0,0,0,.85))}
.project-content{position:absolute;right:18px;left:18px;bottom:17px;z-index:3;color:#fff}.project-content h3{font-size:17px}.project-content p{font-size:10px;opacity:.85}

.statistics{background:#063d34;color:#fff;border-radius:22px;padding:32px;display:grid;grid-template-columns:repeat(4,1fr);gap:15px;text-align:center}
.stat strong{display:block;color:#eab000;font-size:29px}.stat span{color:#c6d6d2;font-size:10px}

.citizen{background:linear-gradient(135deg,#087d65,#06483d);color:#fff;border-radius:22px;padding:30px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.citizen h2{font-size:21px;margin-bottom:5px}.citizen p{color:#d9e9e5;font-size:11px}.citizen-button{background:#eab000;color:#222;padding:10px 22px;border-radius:8px;font-size:10px;font-weight:bold;white-space:nowrap}

.news-detail{margin-top:30px;margin-bottom:45px;background:#fff;border:1px solid #e1e9e6;border-radius:24px;overflow:hidden;box-shadow:0 12px 35px rgba(0,0,0,.07)}
.news-detail-header{padding:30px 35px 20px;border-bottom:1px solid #edf2f0}
.news-detail-category{display:inline-block;background:#e7f4f0;color:#087d65;padding:5px 14px;border-radius:20px;font-size:10px;font-weight:bold;margin-bottom:12px}
.news-detail-title{color:#063d34;font-size:27px;line-height:1.9;margin-bottom:10px}.news-detail-meta{color:#888;font-size:10px}
.news-detail-body{padding:30px 35px 40px;color:#333;font-size:14px;line-height:2.4}
.news-detail-body img{width:auto!important;max-width:100%!important;height:auto!important;display:block!important;margin:25px auto!important;border-radius:14px}
.news-detail-body p{margin-bottom:15px}.news-detail-body a{color:#087d65}
.news-detail-footer{padding:20px 35px 30px;border-top:1px solid #edf2f0;display:flex;align-items:center;justify-content:space-between;gap:15px}
.back-home{display:inline-flex;align-items:center;justify-content:center;background:#087d65;color:#fff;padding:11px 22px;border-radius:9px;font-size:11px;font-weight:bold;transition:.25s}
.back-home:hover{background:#eab000;color:#222}.back-archive{color:#087d65;font-size:10px;font-weight:bold}

.footer{margin-top:55px;background:#052f29;color:#fff}.footer-inner{max-width:1280px;margin:auto;padding:45px 20px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:35px}
.footer h3{font-size:15px;margin-bottom:13px}.footer p,.footer a{color:#b9cbc7;font-size:10px}.footer a{display:block;margin-bottom:7px}.footer a:hover{color:#eab000}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:15px;text-align:center;color:#a8bbb7;font-size:9px}

@media(max-width:1050px){.quick-access{grid-template-columns:repeat(3,1fr)}.services{grid-template-columns:repeat(2,1fr)}}
@media(max-width:750px){
.header{position:relative}.header-inner{min-height:70px;padding:10px 14px}.logo-area{min-width:0;gap:9px}.logo{width:48px;height:48px}.logo-title{font-size:15px}.logo-subtitle{font-size:9px}
.mobile-menu-btn{display:block;flex-shrink:0}
.nav{position:absolute;top:100%;right:10px;left:10px;width:auto;display:flex;flex-direction:column;align-items:stretch;gap:5px;padding:10px;background:#fff;border:1px solid #e2ebe8;border-radius:16px;box-shadow:0 15px 35px rgba(0,0,0,.15);opacity:0;visibility:hidden;transform:translateY(-10px) scale(.98);transition:.25s;z-index:10000}
.nav.mobile-open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.nav a{width:100%;min-height:46px;justify-content:flex-start;padding:10px 15px;background:#f5f8f7;border:1px solid #e6eeeb;border-radius:10px;color:#16483f;font-size:12px;white-space:normal}
.nav .special{background:#087d65;color:#fff}
.hero-area{grid-template-columns:1fr;margin-top:12px}.slider{height:320px}.slide-caption{right:22px;left:22px;bottom:27px}.slide-caption h2{font-size:18px}
.mayor-box{min-height:auto}.mayor-image{height:300px}
#quick,#services,#projects{overflow:hidden}
#quick .quick-access,#services .services,#projects .projects{display:flex;flex-wrap:nowrap;width:100%;overflow-x:auto;overflow-y:hidden;gap:12px;padding-bottom:9px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#quick .quick-access::-webkit-scrollbar,#services .services::-webkit-scrollbar,#projects .projects::-webkit-scrollbar{display:none}
#quick .quick-card{flex:0 0 175px;width:175px;min-height:135px}.service{flex:0 0 285px;width:285px;min-height:125px}.project{flex:0 0 285px;width:285px;height:210px}
.latest-news-wrapper{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding-bottom:8px}.latest-news-wrapper::-webkit-scrollbar{display:none}
.latest-news{display:flex;flex-wrap:nowrap;gap:12px;width:max-content}.latest-news-card{flex:0 0 285px;width:285px;min-height:245px;display:block}.latest-news-image{width:100%;min-width:100%;height:145px}.latest-news-content{padding:13px}
.statistics{grid-template-columns:repeat(2,1fr);padding:25px 12px}.citizen{flex-direction:column;align-items:flex-start}
.news-detail{margin-top:15px;border-radius:17px}.news-detail-header{padding:22px 18px 17px}.news-detail-title{font-size:20px}.news-detail-body{padding:22px 18px 30px;font-size:12px}.news-detail-footer{padding:18px;flex-direction:column;align-items:stretch}
.back-home{width:100%}.back-archive{text-align:center}.footer-inner{grid-template-columns:1fr}
}
@media(max-width:400px){.logo-title{font-size:14px}.slider{height:300px}.slide-caption h2{font-size:16px}.mobile-menu-btn{width:43px;height:43px}}