/* =========================
   GLOBAL
========================= */


* {

box-sizing:border-box;

}


body {

font-family: Arial, Helvetica, sans-serif;

margin:0;

background:#fafafa;

color:#222;

line-height:1.7;

}



a {

color:#1f2a44;

text-decoration:none;

font-weight:bold;

}



a:hover {

color:#b08d57;

}



h1,
h2,
h3 {

color:#1f2a44;

}




/* =========================
   HEADER
========================= */


header {

background:#1f2a44;

color:white;

padding:20px;

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

}



.logo {

font-size:26px;

font-weight:bold;

color:white;

}



nav a {

color:white;

margin:10px;

}



nav a:hover {

color:#d4af37;

}





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


.hero {

background-size:cover;

background-position:center;

background-repeat:no-repeat;


background-image:

linear-gradient(

rgba(0,0,0,0.55),

rgba(0,0,0,0.55)

),

url('/assets/images/history-bg.jpg');


animation: historySlide 18s infinite;


color:white;

padding:120px 20px;

text-align:center;

border-radius:15px;

margin:30px auto;

max-width:1100px;


}


/* Automatic background change */

@keyframes historySlide {


0% {


background-image:

linear-gradient(

rgba(0,0,0,0.55),

rgba(0,0,0,0.55)

),

url('/assets/images/history-bg.jpg');


}



33% {


background-image:

linear-gradient(

rgba(0,0,0,0.55),

rgba(0,0,0,0.55)

),

url('/assets/images/history-bg2.jpg');


}



66% {


background-image:

linear-gradient(

rgba(0,0,0,0.55),

rgba(0,0,0,0.55)

),

url('/assets/images/history-bg3.jpg');


}



100% {


background-image:

linear-gradient(

rgba(0,0,0,0.55),

rgba(0,0,0,0.55)

),

url('/assets/images/history-bg.jpg');


}


}



.hero h1 {

font-size:50px;

color:white;

margin-bottom:20px;

}



.hero p {

font-size:22px;

color:white;

}





/* =========================
   SECTIONS
========================= */


section {


max-width:1100px;

margin:40px auto;

padding:20px;


}





/* =========================
   CARDS
========================= */


.card {


background:white;

padding:25px;

border-radius:15px;

box-shadow:

0 5px 20px rgba(0,0,0,0.08);


margin-bottom:25px;


}



.card img {


max-width:100%;

height:auto;

border-radius:10px;


}



.card h3 {


margin-top:15px;


}






/* =========================
   FEATURED STORY
========================= */


.featured {


background:white;

padding:35px;

border-radius:15px;


box-shadow:

0 5px 20px rgba(0,0,0,0.08);


}





.featured img {


max-width:100%;

border-radius:15px;


}







/* =========================
   SIDEBAR
========================= */


.sidebar {


background:#f1f1f1;

padding:25px;

border-radius:15px;

margin-top:40px;


}



.popular-item img {


display:block;

margin-bottom:10px;


}







/* =========================
   FORMS
========================= */


input,
textarea,
select {


width:100%;

max-width:600px;

padding:14px;

border-radius:8px;

border:1px solid #ccc;

font-size:16px;


}



button {


background:#1f2a44;

color:white;

border:none;

padding:12px 30px;

border-radius:8px;

cursor:pointer;

font-size:16px;


}



button:hover {


background:#b08d57;


}





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


footer {


background:#1f2a44;

color:white;

padding:40px 20px;

text-align:center;

margin-top:60px;


}



footer h2 {


color:white;


}



footer a {


color:white;

margin:10px;


}



footer a:hover {


color:#d4af37;


}






/* =========================
   ADMIN / TABLES
========================= */


table {


width:100%;

border-collapse:collapse;

background:white;


}



table th {


background:#1f2a44;

color:white;

padding:12px;


}



table td {


padding:12px;

border:1px solid #ddd;


}






/* =========================
   MOBILE
========================= */


@media(max-width:768px){



header {


flex-direction:column;

text-align:center;


}



nav a {


display:block;

margin:12px;


}



.hero h1 {


font-size:34px;


}



.hero {


padding:70px 15px;


}



section {


padding:15px;


}



}