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

body{

font-family:'Poppins',sans-serif;
background:#f5f7fa;
color:#333;

}

header{

display:flex;
justify-content:space-between;
align-items:center;
background:#0c2d48;
padding:20px 80px;

position:sticky;
top:0;

}

.logo h1{

color:#fff;
font-size:36px;

}

.logo p{

color:#d8d8d8;

}

nav ul{

display:flex;
list-style:none;

}

nav ul li{

margin-left:30px;

}

nav a{

text-decoration:none;
color:white;
font-weight:600;

transition:.4s;

}

nav a:hover{

color:#FFD700;

}

.banner{

height:650px;

background:url("https://images.unsplash.com/photo-1554224154-22dec7ec8818?w=1600") center/cover;

display:flex;

justify-content:center;
align-items:center;

}

.banner-texto{

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

padding:50px;

text-align:center;

border-radius:10px;

color:white;

}

.banner h2{

font-size:48px;

margin-bottom:20px;

}

.banner p{

font-size:20px;

margin-bottom:35px;

}

.boton{

background:#FFD700;

padding:15px 30px;

color:black;

font-weight:bold;

border-radius:5px;

text-decoration:none;

}

.boton:hover{

background:white;

}

section{

padding:80px;

}

section h2{

text-align:center;

margin-bottom:50px;

font-size:38px;

color:#0c2d48;

}

.contenedor-servicios{

display:flex;

justify-content:space-around;

gap:25px;

flex-wrap:wrap;

}

.tarjeta{

background:white;

width:340px;

border-radius:10px;

overflow:hidden;

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

transition:.4s;

}

.tarjeta:hover{

transform:translateY(-10px);

}

.tarjeta img{

width:100%;

height:220px;

object-fit:cover;

}

.tarjeta h3{

padding:20px;

color:#0c2d48;

}

.tarjeta p{

padding:0 20px 30px;

}

.capacitacion{

background:#0c2d48;

color:white;

padding:50px;

border-radius:10px;

}

.capacitacion ul{

margin-top:20px;

margin-left:20px;

line-height:2;

}

.galeria{

display:grid;

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

gap:20px;

}

.galeria img{

width:100%;

height:250px;

object-fit:cover;

border-radius:10px;

transition:.5s;

}

.galeria img:hover{

transform:scale(1.05);

}

.contacto{

text-align:center;

font-size:20px;

line-height:2;

}

footer{

background:#0c2d48;

color:white;

text-align:center;

padding:30px;

}

@media(max-width:900px){

header{

flex-direction:column;

}

nav ul{

margin-top:20px;

flex-direction:column;

text-align:center;

}

nav li{

margin:10px;

}

.banner h2{

font-size:35px;

}

}