.container h1{
    font-size:3rem;

}
.value{
    font-size:20px;
    word-spacing: 3px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.process{
    color: rgb(163, 152, 0);
    font-size:1.5rem;
}
.content{
    margin-top: 15px;
    color:black;
}
ol ::marker{
    font-size:1.7rem;
    color:black;
    border: 3px solid black;
}

.details{
    padding-left: 20px;
    font-size:1.3rem;
    letter-spacing:2px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.headings{
    font-size: 1.5rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
li{
    padding:10px 0px;
}

.gallery{
    margin-top:3%;
    margin-bottom:3%;
}

.gallery hr{
    border: 8px solid #8F4343;
}

.galleryContainer{
    margin-top:3%;
    margin-bottom:3%;
    display:flex;
    flex-wrap: wrap;
    gap:15px;
    justify-content: center;
}

.img{
    box-shadow: 1px 4px 8px 0 rgba(0.2, 0.3, 0.3, 0.3);
    width: clamp(250px, 30vw, 300px);
    height: 250px;
    background-color: #dadce2;
    border-radius: 15px;    
}
.img img{
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 15px;
}


.cards{
    margin-top: 2%;
    height: fit-content;
    background-color:rgb(212, 107, 125);
}

.cardContent{
    padding:20px;
    display:flex;

}

.card {
    flex-wrap: wrap;
    display: flex;
    flex-direction: column;
    align-items: left;
    gap: 2%;
    box-shadow: 1px 4px 8px 0 rgba(0.2, 0.3, 0.3, 0.3);
    width: clamp(250px, 30vw, 300px);
    height: 350px;
    background-color: #dadce2;
    border-radius: 15px;    
}
.card:hover{
    background-color: whitesmoke;
    color: black;
}
.card-content{
    padding: 10px 20px;
    text-align: left;
}

.card-middle{
    margin-top:20px;
}
.card-content li{
    padding-left:5px;
    font-size:20px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-transform: uppercase;
}

@media screen and (max-width: 900px){
    .container h1{
        font-size:1.3rem;
    }
    .cardContent{
        align-self: center;
        flex-direction:column;
    }
}