:root {
  --c-cream: #F6F1E8;
  --c-white: #FFFFFF;
  --c-dark: #1F2430;
  --c-muted: #3B4252;
  --c-line: #E7E1D7;

  --c-primary: #D86A3A;
  --c-primary-hover: #B44B2C;
  --c-blue: #0E2A4A;
  --c-accent: #E0A43A;

  --radius: 14px;
}

/* RESET */
*{margin:0;padding:0;box-sizing:border-box}

/* BASE */
body{
  font-family:'Inter';
  color:var(--c-dark);
  background:var(--c-cream);
  line-height:1.5;
}

h1,h2,h3{
  font-family:'Manrope';
  font-weight:800;
}

a {
  color: var(--c-accent);
}

img {
  max-width: 100%;
  height: 100%;
}

.container{
  width:100%;
  max-width:1200px;
  margin:auto;
  padding:42px 16px;
}

/* HERO */
.hero{
  position:relative;
  height:90vh;
  color:#fff;
}

.hero img{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: left;
}

.hero .logo-header {
  max-width: 57%;
  position: relative;
}

.hero__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0.2),rgba(14,42,74,0.8));
}

.hero__content{
  position:relative;
  z-index:2;
  padding:32px 16px;
}

.hero__kicker{
  color:#66B7E6;
}

.hero__meta{
  display:inline-block;
  margin:30px 0;
  padding:9px 25px;
  border-radius:999px;
  background:rgba(255,255,255,0.2);
  font-size: larger;
}
.notice-btn {
  font-size: small;
}

/* BANNER */
section.info-banner {
  padding: 20px 20px;
  background:var(--c-blue);
  color:#fff;
}
.info-banner .banner-content {
  font-size: small;
}

/* BUTTONS */
.btn{
  padding:12px 20px;
  border-radius:var(--radius);
  display:inline-block;
  text-decoration:none;
  font-weight:500;
  min-width: 60vw;
  min-height: 45px;
  margin-bottom: 16px;
  text-align: center;
}

.btn--primary{
  background:var(--c-primary);
  color:#fff;
}

.btn--primary:hover{
  background:var(--c-primary-hover);
}

.btn--secondary{
  border:1px solid #fff;
  color:#fff;
}

/* GRIDS */
.grid-2{
  display:grid;
  gap:24px;
}

.grid-3{
  display:grid;
  gap:16px;
}

/* SECTION */
section{
  padding:64px 0;
}

.section-kicker{
  color:var(--c-primary);
  margin-bottom:8px;
}

/* CARDS */
.card{
  background:#fff;
  padding:16px;
  border-radius:var(--radius);
  margin-top:16px;
}
.courses img {
  max-width: 100%;
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card a {
  text-decoration: none;
  color:var(--c-dark);
}

/* BADGES */
.badge{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
}

.badge--blue{
  background:#2C76B7;
  color:#fff;
}

.badge--yellow{
  background:#E0A43A;
}

/* YOUTH */
.youth{
  background:var(--c-blue);
  color:#fff;
}

/* MAP */
.map img{
  width:100%;
  border-radius:var(--radius);
  margin-top:24px;
}

/* VOLUNTEER */
.volunteer{
  background:var(--c-primary);
  color:#fff;
  text-align:center;
}

/* SPONSORS */
.sponsors{
  background:var(--c-blue);
  color:#fff;
  padding:32px 0;
  text-align:center;
}
.sponsors .logo-partenaire {
  max-width: 60%;
  max-height: 130px;
  filter: grayscale(100%);
  background-blend-mode: multiply;
}

/* FOOTER */
.footer{
  background:var(--c-blue);
  color:#fff;
  padding:32px 0;
  text-align:center;
}

/* RESPONSIVE */
@media(min-width:768px){
  .grid-2{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:repeat(3,1fr)}

  .hero__content{
    padding:80px 24px;
  }

  h1{
    font-size:56px;
  }

  h2{
    font-size:32px;
  }

  .btn{
    min-width: 225px;
  }

  .hero .logo-header {
    width: 300px;

  }

  .sponsors .logo-partenaire {
    max-width: 150px;
    max-height: 82px;
    height: auto;
  }
}