body{
    background: #decdb8 ;
}

.header {
    background-color: #2f2f2f; /* Color de fondo más profundo */
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 10px 20px;
    position: sticky; /* Encabezado fijo */
    top: 0;
    z-index: 10;

}
a{
    text-decoration: none;
}

.header img{
    width: 100px;
    height: 100px; /* Ajustar tamaño del logotipo */
    margin-right: 20px;
}

.header button{
    width: 130px;
    height: 75px;
    background: #f8f9fa;
    color: #42393b;
    text-align: center;
    border-radius: 8px;
}
.header a{
    color: #2f2f2f;

}

.header button:hover{
    transform: scale(1.1);
    background: #7b8487;
    transition: transform 0.3s ease
}


.Card{
    display: inline-block;
    width: 500px;
    padding: 1rem;
    margin: 1rem;
    background-color: #2f2f22;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    color: aliceblue;
}
[class  *= "col-"]{
    float: left;
    /* border: 1px solid black; */
    padding: 20px;
    display: inline;
}

.col-12{
    width: 100%;

}
.col-11{
    width: 91.66666667%;
}
.col-10{
    width: 83.33333333%;
}
.col-9{
    width: 75%;
}

.col-8{
    width: 66.6666667%;

}
.col-7{
    width: 58.33333333%;
}

.col-6{
    width: 50%;
}

.col-5{
    width: 41.6666667%;
}
.col-4{
    width: 33.33333333%;
}
.col-3{
    width: 25%;
}
.col-2{
    width: 16.66666667%;
}
.col-1{
    width: 8.33%;
}

.main{
    display: flex;
    justify-content: space-around;
}
 .item{
    width: auto;
    height: 500px;
    padding: 1rem;
}

 .item2{
    width: auto;

    height: 500px
 }
  img{
    width: 500px;
    padding: 1rem;
    margin: 1rem;;
    border-radius: 8px;
    height:570px;


 }

 .conte{
    background: #2f2f22;
    color: white;
    font-size: 1.2rem;
    font-family: Arial, Helvetica, sans-serif;
    height: 200px;
    width: 100%;
    border-radius: 8px;

 }
 .cont2{
    height: 650px;
    width: 100%;
    background-color: aliceblue;
 }