body{margin:0;font-family:Arial,sans-serif;background:#f4f4f4;padding-top:110px}




.hero{
    position:relative;
    overflow:hidden;

    height:clamp(280px, 45vw, 500px);

    display:flex;
    align-items:center;
    justify-content:center;
}

.hero picture{
    position:absolute;
    inset:0;
}

.hero-image{
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;
}
.hero-content{

    position:relative;
    z-index:2;

    max-width:900px;

    text-align:center;

    padding:40px;

    color:white;
}
.hero::before{

    content:"";

    position:absolute;
    inset:0;

    background:rgba(0,0,0,.35);

    z-index:1;
}

h1{
    align-items:center;
    margin-bottom:10px;
    text-decoration:none;
    padding:6px 10px;
  margin-top: inherit;
}

h2{
    align-items:center;
    margin-bottom:10px;
    text-decoration:none;
    padding:6px 10px;
}

.hero h1{

   color:#fff;

   font-size:3.2rem;

   margin-bottom:20px;

}
.hero p{


   color:#fff;

   font-size:1.2rem;

   line-height:1.8;

   margin-bottom:20px;
   

}

.hero input{width:400px;max-width:90%;padding:12px;margin-top:20px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;padding:30px}
.stat{background:white;padding:20px;border-radius:10px;text-align:center}
.stat span{display:block;font-size:36px;font-weight:bold}
.cards,.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:15px;padding:20px}
.card{background:white;border-radius:10px;padding:20px}
.gallery{
  display:grid;
  grid-template-columns:
      repeat(auto-fill,minmax(280px,1fr));
  gap:20px;
}


.header 



#projects{
   display:grid;
   grid-template-columns:
      repeat(auto-fill,minmax(320px,1fr));
   gap:20px;
   padding:20px;
}

.cover-link,
.cover-link:visited{
    color:inherit;
    text-decoration:none;
}

.cover-link:hover{
    color:inherit;
    text-decoration:none;
}
.card{
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.cover{
       background-size:cover;
    background-position:center;
    width:100%;
    aspect-ratio:16/9;

    object-fit:cover;
    object-position:center;

    display:block;

    transition:
        filter .25s ease,
        transform .25s ease;
}

.cover-link:hover .cover{

    filter: brightness(.8);


}







.content{
   padding:15px;
}

.btn{
   display:inline-block;
   margin-top:10px;
   padding:10px 14px;
   background:#03467d;
   color:white;
   text-decoration:none;
   border-radius:6px;
}
.section-title{
   margin:30px 20px 10px;
}

.photos-grid{
   display:grid;
   grid-template-columns:
      repeat(auto-fill,minmax(280px,1fr));

   gap:20px;
   padding:20px;
}

.photos-grid img{
   width:100%;
   height:220px;
   object-fit:cover;
   display:block;
}

#categories{
   display:grid;
   grid-template-columns:
      repeat(auto-fill,minmax(320px,1fr));
   gap:20px;
   padding:20px;
}

#categoriesGrid, #projectsGrid{
   display:grid;
   grid-template-columns:
      repeat(auto-fill,minmax(320px,1fr));
   gap:20px;
   padding:20px;
}

.footer{
    margin-top:40px;
    padding:30px 20px;
    background:#03467d;
    color:#fff;
}

.footer-content{
    max-width:1400px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:20px;
}

.footer-links{
    display:flex;
    gap:30px;
    flex-wrap:wrap;
}

.footer-links a{
    display:flex;
    align-items:center;
    justify-content:center;

    color:#42a1ef;
    text-decoration:none;
}

.footer-links .icon{
    width:22px;
    height:22px;

    fill:currentColor;

    transition:
        transform .3s ease,
        color .3s ease,
        fill .3s ease;
}

.footer-links a:hover{
    color:#f97316;
}

.footer-links a:hover .icon{
    transform:translateY(-3px) scale(1.15);
}

.page{
   padding:40px 20px;
}



.lead{
   font-size:20px;
   color:#444;
}

.about-stats{
   display:grid;
   grid-template-columns:
      repeat(auto-fit,minmax(200px,1fr));
   gap:20px;
   margin:30px 0;
}

.stat{
   background:#fff;
   border-radius:12px;
   padding:20px;
   text-align:center;
   box-shadow:0 2px 8px rgba(0,0,0,.1);
}

.news-list{
   display:flex;
   flex-direction:column;
   gap:15px;
   padding:20px;
}

.news-item{
   background:#fff;
   padding:20px;
   border-radius:12px;
   box-shadow:0 2px 8px rgba(0,0,0,.08);
}

.news-date{
   color:#666;
   font-size:14px;
   margin-bottom:10px;
}

.breadcrumbs{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:8px;

    margin:12px 0 24px;

    font-size:.95rem;

    color:#666;

        margin-bottom:10px;
    text-decoration:none;
    padding:6px 10px;

}

.breadcrumbs a{

    color:#0b5cad;

    text-decoration:none;

}

.breadcrumbs a:hover{

    text-decoration:underline;

}

.breadcrumbs span:last-child{

    color:#222;

    font-weight:600;

}

.back-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-bottom:10px;

    color:#0b5cad;

    text-decoration:none;

    padding:6px 10px;

}

.news-item h3{
   margin:0 0 10px;
}
.update-bar{

   display:flex;

   flex-wrap:wrap;

   align-items:center;

   gap:20px;

   padding:14px 20px;

   background:var(--card);

   border-radius:10px;

   border:1px solid var(--border);

   font-size:.95rem;

}

.update-bar strong{

   color:var(--accent);

}
.intro{

   margin:70px 0;

}

.intro-box{

   max-width:900px;

   margin:auto;

   text-align:center;

}

.intro-box h2{

   margin-bottom:25px;

}

.intro-box p{

   margin-bottom:18px;

   line-height:1.8;

   color:var(--text-light);

}

.intro-box .btn{

   margin-top:20px;

}

@media (max-width:768px){

   .header{

      flex-direction:column;

      align-items:center;

      padding:15px;

   }

   

}


.gallery-sentinel{

   width:100%;
   height:1px;

}
@media(max-width:768px){

.hero{

   height:60vh;

}

.hero h1{

   font-size:2.2rem;

}

.hero p{

   font-size:1rem;

}

.hero-buttons{

   flex-direction:column;

}

}


.page-header{

    background:#03467d;
    color:#fff;
    padding:60px 20px;

}

.page-header h1{

    margin-bottom:15px;

}

.content-page{

    padding:50px 20px;

}

.policy{

    max-width:900px;
    margin:auto;
    line-height:1.8;

}

.policy h2{

    margin-top:40px;
    color:#03467d;

}

.policy p{

    margin:15px 0;

}

.cookie-banner{

    position:fixed;

    left:20px;
    right:20px;
    bottom:20px;

    max-width:700px;

    margin:auto;

    background:#fff;

    border-radius:12px;

    padding:25px;

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

    z-index:99999;

}

.cookie-content{

    line-height:1.7;

}

.cookie-content h3{

    margin-bottom:15px;

}

.cookie-buttons{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

    margin-top:20px;

}