:root
{
  --color-primary:   #043962;  --color-secondary: #023761;  --color-accent:    #9B1802;
  --color-light:     #DEE5EA;  --color-white:     #FFFFFF;  --text-dark:       #212121;
  --text-light:      #555555;
}
/* Reset & Base */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif;   background: var(--color-light);   color: var(--text-dark); line-height:1.6; }
a { text-decoration:none; color: inherit; }
img { max-width:100%; display:block; }

/* Container */
.container { width:90%; max-width:1200px; margin:0 auto; }

/* Header */
header { background: #84aaea; color: var(--text-dark); position:sticky; top:0; z-index:100; }
.site-logo { height: 80px; background: #84aaea; width:150px;}
nav { display:flex; gap:1.5rem; }
nav a { font-weight:500; padding:0.5rem; color: #011458; transition:background 0.3s; }
nav a:hover { background:var(--color-secondary); color: var(--color-white); border-radius:4px; }
.header-inner { display:flex; justify-content:space-between; align-items:center; }

/* Hero Section */
.hero { background:url('https://via.placeholder.com/1600x600') center/cover no-repeat; color:var(--color-white); padding:1rem 0; text-align:center; position:relative; }
.hero::after { content:''; position:absolute; background:rgba(0,0,0,0.4); }
.hero-content { position:relative; z-index:1; }
.hero h1 { font-size:2.5rem; margin-bottom:1rem; }
.hero p { font-size:1.1rem; margin-bottom:2rem; color: var(--text-light); }
.btn { display:inline-block; padding:0.75rem 1.5rem; background:var(--color-accent); color:var(--color-white); font-weight:600; border-radius:4px; transition:background 0.3s; }
.btn:hover { background:#7e1401; }

/* Sections */
section { padding:1rem 0; }
.section-title { text-align:center; margin-bottom:2rem; font-size:1.8rem; color:var(--color-primary); }
.grid { display:grid; gap:2rem;padding-bottom: 2rem; }
.grid-3 { grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); }
.grids { display:grid; gap:2rem;padding-bottom: 2rem; }
.grids-3 { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.card { background:#eac43d; border-radius:8px; padding:1.5rem; box-shadow:0 2px 8px rgba(0,0,0,0.4); transition:transform 0.3s;}
.card:hover { transform:translateY(-5px);}

.cards { background:#eac43d; border-radius:8px; padding:1.3rem; box-shadow:0 2px 8px rgba(0,0,0,0.4); transition:transform 0.3s; display: flex;align-items: center; font-size:20px; }
.cards:hover { transform:translateY(-5px);}
.cards img {margin-right: 10px;width:20%}
/* Footer */
footer { background:var(--color-primary); color: var(--color-white); padding:2rem 0; }
.footer-links { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-bottom:1rem; }
.footer-links a { color:var(--color-light); }
.footer-bottom { text-align:center; font-size:0.9rem; }

/* Responsive */
@media(max-width:768px) { .hero h1 { font-size:2rem; } .header-inner { flex-direction:column; gap:1rem; } nav { flex-wrap:wrap; justify-content:center; } }

/* Hero Carousel */
.hero { position: relative; overflow: hidden; }
.slides { display: flex; transition: transform 0.5s ease-in-out; }
.slide { min-width: 100%; position: relative; }
.slide h3 { position: absolute; bottom:20%; left:5%; color: var(--color-white); background: rgba(0,0,0,0.5); padding: 0.5rem 1rem; border-radius:4px; font-size:2rem; }
.controls { position: absolute; top:10px; right:10px; display:flex; gap:10px; }
.controls button { background: rgba(0,0,0,0.5); border:none; color: var(--color-white); padding:0.5rem; border-radius:4px; cursor:pointer; }
.controls button:hover { background: var(--color-accent); }
.slide img { width: 100%; height: 45vh; object-fit: cover; }