/* =====================================================
   Griffin Federal Republic
   President Office Page
   ===================================================== */



   /* ========== 首页 Header（总统府主视觉） ========== */

header h1{
color:white;
}
header{
height:420px;

/* 与 article 风格统一 */
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;

color:white;
position:relative;
padding:0 20px;
}

/* 标题 */

header h1{
font-size:55px;
letter-spacing:6px;

/* 紧凑化  */
margin:18px 20px 10px;

text-shadow:0 5px 25px rgba(0,0,0,.5);
}

/* 副标题 */

header p{
font-size:20px;
margin:6px 0;
text-shadow:0 3px 15px rgba(0,0,0,.5);
}

/* ========== hero badge ========== */

.hero-badge{
padding:12px 35px;
border-radius:40px;

background:rgba(255,255,255,.15);
border:1px solid rgba(255,255,255,.35);

backdrop-filter:blur(15px);
}

/* ========== 社交区域 ========== */

.social{
margin-top:35px;
}


.president-page{

max-width:1100px;

margin:auto;

padding:40px 20px;

}



/* 卡片 */


.president-card{

background:rgba(255,255,255,.92);

backdrop-filter:blur(20px);


border-radius:25px;


padding:40px;


margin-bottom:30px;


box-shadow:
0 20px 60px rgba(0,0,0,.25);


animation:fadeUp .6s ease;

}



@keyframes fadeUp{

from{

opacity:0;

transform:translateY(30px);

}


to{

opacity:1;

transform:translateY(0);

}

}



/* 标题 */

/* ========== 页面标题 ========== */

.section-title{

font-size:28px;

color:#1e3a8a;

margin-bottom:25px;

text-shadow:none;

}




/* 总统区域 */


.president-content{

display:flex;

gap:35px;

align-items:center;

}



.portrait img{

width:220px;

height:220px;

object-fit:cover;


border-radius:20px;


box-shadow:
0 15px 40px rgba(0,0,0,.25);

}



.text h2{

font-size:32px;

color:#1e3a8a;

margin-bottom:5px;

}



.subtitle{

color:#273c75;

font-size:18px;

}



.president-card p{

font-size:16px;

line-height:1.9;

color:#2f3640;

}





/* 职责卡片 */


.service-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));


gap:20px;

}



.service-grid div{

background:
rgba(39,60,117,.08);


padding:20px;


border-radius:18px;


transition:.3s;

}



.service-grid div:hover{

transform:translateY(-8px);

}



.service-grid h3{

color:#273c75;

margin-bottom:10px;

}






@media(max-width:700px){


.president-content{

flex-direction:column;

text-align:center;

}


}