body{
font-family:'Montserrat',sans-serif;
margin:0;
background:linear-gradient(135deg,#f4f6fb,#e9eef7);
color:#222;
}

/* NAVIGATION */

.topnav{

display:flex;
justify-content:center;
gap:30px;

padding:18px;

backdrop-filter:blur(12px);
background:rgba(255,255,255,0.55);

border-bottom:1px solid rgba(255,255,255,0.35);
}

.topnav a{

text-decoration:none;
color:#333;
font-weight:600;

padding:8px 14px;

border-radius:14px;

transition:all .25s ease;

}

.topnav a:hover{

background:rgba(255,255,255,0.6);

transform:translateY(-2px);

}

/* HEADER */

header{

text-align:center;

padding:80px 40px;

max-width:900px;

margin:60px auto;

position:relative;

}

header h1{

font-size:44px;

margin-bottom:12px;

}

header p{

font-size:18px;

line-height:1.6;

color:#555;

}

/* SUBTLE HEADER MAP BACKGROUND */

header::before{

content:"";

position:absolute;

top:-20px;
left:-40px;
right:-40px;
bottom:-20px;

background-image:url("../images/mediterranean_map_alt.svg");

background-repeat:no-repeat;
background-position:center;
background-size:150%;

opacity:0.18;

z-index:-1;

/* soften edges so it blends */

mask-image:
linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);

-webkit-mask-image:
linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);;
  
}

/* MAIN CONTENT */

main{

max-width:1100px;

margin:auto;

padding:40px 20px;

}

main h2{

text-align:center;

margin-bottom:40px;

}

/* CARD GRID */

.card-container{

display:grid;

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

gap:28px;

}

/* CARDS */

.card{

padding:28px;

border-radius:22px;

backdrop-filter:blur(12px);

background:rgba(255,255,255,0.55);

border:1px solid rgba(255,255,255,0.4);

box-shadow:0 10px 25px rgba(0,0,0,0.08);

transition:all .25s ease;

}

.card:hover{

transform:translateY(-6px) scale(1.02);

box-shadow:0 20px 40px rgba(0,0,0,0.12);

}

.card h3{

margin-top:0;

}

/* CARD IMAGES */

.card img{

width:100%;
height:180px;
object-fit:cover;

margin-top:12px;

border-radius:12px;

}

/* TIMELINE SECTION */

.timeline{

padding:100px 20px;
text-align:center;

}

.timeline h2{

font-size:36px;
margin-bottom:70px;
font-weight:700;
letter-spacing:.5px;

}

/* vertical center line */

.timeline-container{

position:relative;
max-width:1000px;
margin:auto;

}

.timeline-container::before{

content:"";
position:absolute;

left:50%;
top:0;

width:2px;
height:100%;

background:linear-gradient(
to bottom,
rgba(0,0,0,0.05),
rgba(0,0,0,0.12),
rgba(0,0,0,0.05)
);

transform:translateX(-50%);

}

/* timeline item */

.timeline-item{

position:relative;
width:50%;
padding:25px 45px;
box-sizing:border-box;

}

.timeline-item:nth-child(odd){

left:0;
text-align:right;

}

.timeline-item:nth-child(even){

left:50%;

}

/* timeline dot */

.timeline-dot{

position:absolute;

top:50%;
transform:translateY(-50%);

right:-11px;

width:18px;
height:18px;

background:white;
border:3px solid #c9a227;

border-radius:50%;

box-shadow:0 0 0 4px rgba(255,255,255,0.6);

z-index:2;

}

.timeline-item:nth-child(even) .timeline-dot{

left:-11px;
right:auto;

}

/* clickable link wrapper */

.timeline-link{

text-decoration:none;
color:inherit;
display:block;

}

/* timeline card */

.timeline-card{

background:rgba(255,255,255,0.7);

backdrop-filter:blur(12px);

padding:24px;

border-radius:18px;

box-shadow:0 8px 22px rgba(0,0,0,0.08);

transition:all .28s ease;

position:relative;

text-align:center;

}

/* card hover */

.timeline-card:hover{

transform:translateY(-6px);
box-shadow:0 16px 36px rgba(0,0,0,0.12);

}

/* timeline card title */

.timeline-card h3{

margin-top:0;
margin-bottom:10px;
font-size:20px;

}

/* timeline card text */

.timeline-card p{

margin:0;
line-height:1.5;
color:#444;

}

/* timeline image */

.timeline-img{

width:100%;
border-radius:12px;
margin-bottom:14px;

box-shadow:0 6px 14px rgba(0,0,0,0.08);

}

/* MOBILE VERSION */

@media (max-width: 800px){

.timeline-container::before{

left:22px;

}

.timeline-item{

width:100%;
padding-left:60px;
padding-right:25px;
margin-bottom:40px;

}

.timeline-item:nth-child(odd),
.timeline-item:nth-child(even){

left:0;
text-align:left;

}

.timeline-dot{

left:14px;
right:auto;

}

}

/* GUIDES GRID */

.guides-section{

padding:80px 20px;

}

.guides-grid{

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

max-width:1000px;
margin:auto;

}

/* CARD (matches homepage style) */

.era-card{

text-decoration:none;
color:#222;

background:rgba(255,255,255,0.65);
backdrop-filter:blur(12px);

border-radius:18px;
padding:20px;

box-shadow:0 8px 22px rgba(0,0,0,0.08);

transition:all .28s ease;

display:flex;
flex-direction:column;
align-items:center;
text-align:center;

}

/* HOVER (same feel as homepage) */

.era-card:hover{

transform:translateY(-6px);
box-shadow:0 16px 36px rgba(0,0,0,0.12);

}

/* IMAGE */

.era-card img{

width:100%;
height:200px;           /* 🔑 fixed height */
object-fit:cover;       /* crops nicely instead of stretching */

border-radius:12px;
margin-bottom:12px;

box-shadow:0 6px 14px rgba(0,0,0,0.08);

}

/* TITLE */

.era-card h3{

margin:0;
font-size:20px;
font-weight:600;

}

/* FOOTER */

footer{

text-align:center;

padding:30px;

margin-top:70px;

backdrop-filter:blur(10px);

background:rgba(255,255,255,0.55);

border-top:1px solid rgba(255,255,255,0.35);

}

/* ABOUT */

.content {
  max-width: 800px;
  margin: 60px auto 120px; /* adds extra space at the bottom */
  text-align: center;
  line-height: 1.6;
}

/* Footer formatting fix */

html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}