/* =====================================================
   Griffin Federal Republic
   Ministry of Foreign Affairs
   Homepage Style
===================================================== */


/* =========================
   PAGE BACKGROUND
========================= */

body{

margin:0;

font-family:
"Noto Sans SC",
"Segoe UI",
Arial,
sans-serif;


color:#1c2a3a;


background-image:

linear-gradient(
180deg,
rgba(245,249,255,0.92),
rgba(235,243,255,0.92)
),

url("https://images.unsplash.com/photo-1526778548025-fa2f459cd5c1");


background-size:cover;

background-position:center;

background-attachment:fixed;

}



/* =========================
   HERO
========================= */


.hero{


text-align:center;


padding:

100px 20px 50px;


animation:

fadeIn .8s ease;


}



@keyframes fadeIn{

from{

opacity:0;

transform:translateY(15px);

}


to{

opacity:1;

transform:translateY(0);

}


}




.hero h1{


font-size:32px;


letter-spacing:2px;


color:#0f2d4a;


margin-bottom:12px;


}



.hero p{


max-width:820px;


margin:auto;


font-size:14px;


line-height:1.9;


color:#40566b;


}





/* =========================
   COUNTRY PROFILE
========================= */


.country-info{


max-width:1050px;


margin:

20px auto 40px;


background:white;


border-radius:10px;


padding:22px;


border:

1px solid rgba(0,0,0,.06);


box-shadow:

0 8px 22px rgba(0,0,0,.05);


}




.country-info h2{


font-size:16px;


color:#1d3557;


margin-bottom:10px;


}



.country-info p{


font-size:13px;


line-height:1.8;


color:#516b82;


}




/* BUTTON */


.more-btn{


display:inline-block;


margin-top:12px;


padding:

8px 18px;


font-size:13px;


color:#0a66c2;


background:white;


border:

1px solid rgba(10,102,194,.25);


border-radius:6px;


text-decoration:none;


transition:.25s;


}



.more-btn:hover{


background:#0a66c2;


color:white;


transform:translateY(-2px);


}




/* =========================
   SECTION
========================= */


.section{


padding:

40px 46px;


}



.section-title{


font-size:15px;


font-weight:600;


color:#1d3557;


border-left:

4px solid #4a90e2;


padding-left:10px;


margin-bottom:20px;


}





/* =========================
   ARTICLE CARD
========================= */


.grid{


display:grid;


grid-template-columns:

repeat(
auto-fit,
minmax(240px,1fr)
);


gap:16px;


}



.card{


display:block;


text-decoration:none;


color:inherit;


background:white;


padding:18px;


border-radius:10px;


border:

1px solid rgba(0,0,0,.06);



box-shadow:

0 4px 14px rgba(0,0,0,.04);



transition:.25s;


}




.card:hover{


transform:

translateY(-5px);



border-color:#4a90e2;



box-shadow:

0 12px 28px rgba(0,0,0,.12);


}




.card h3{


font-size:14px;


color:#1d3557;


margin-bottom:8px;


}



.card p{


font-size:13px;


line-height:1.7;


color:#516b82;


}





/* =========================
   FOOTER
========================= */


footer{


text-align:center;


padding:30px;


font-size:12px;


color:#6b7f93;


background:#f8fbff;


border-top:

1px solid rgba(0,0,0,.06);


}