@font-face {
    font-family: 'Merriweather-SemiBold';
    src: url("Merriweather_Sans/static/MerriweatherSans-SemiBold.ttf");
}
@font-face {
    font-family: 'Merriweather-Bold';
    src: url("Merriweather_Sans/static/MerriweatherSans-Bold.ttf");
}
@font-face {
    font-family: 'Merriweather';
    src: url("Merriweather_Sans/static/MerriweatherSans-Regular.ttf");
}
@font-face {
    font-family: 'Merriweather-Light';
    src: url('Merriweather_Sans/static/MerriweatherSans-Light.ttf');
}
/* RESET / BASE */
html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

#services{
    min-height: 100vh;
    padding: 8em 0em 3em;
    background-color: #F2EFED;
}

#service-container {
    min-height: 100vh;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#service-title {
    color: #253031;
    width: fit-content;
    font-size: 3em;
    font-family: "Merriweather-Bold";
    text-align: start;
    line-height: 100%;
}

#service-title-underline {
    display: flex;
    width: 4.8em;
    height: .19em;
    background-color: #253031;
    border-radius: 3em;
}

#service-info {
    display: flex;
    width: 40em;
    padding: 2em;
    margin: 2em;
    font-size: 1.3em;
    font-family: "Merriweather-Light";
    justify-content: center;
    text-align: center;
    background-color: #F37B18;
    border-radius: .5em;
}
/* Service Cards */
#service-card-container {
    display: flex;
    justify-content: center;
    gap: 5em;
    padding-top: 1em;
    flex-wrap: wrap;
    height: fit-content;
}

.service-cards {
    color: #253031;
    display: inline-block;
    position: relative;
    width: 25em;
    height: 25em;
    flex-shrink: 0;
    perspective: 1000px;
    border-radius: 1em;
    transition: padding 0.5s ease;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.8s ease;
}

.service-cards.flipped .card-inner {
    transform: rotateY(180deg);
}

.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 1em;
    overflow: hidden;
}

.card-front {
    background-color: #F37B18;
    color: #253031;
    box-shadow: .0em .0em .8em .006em #969899;
}

.card-back {
    background-color: #253031;
    color: #EED6D5;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1em;
    box-sizing: border-box;
    box-shadow: .0em .0em .8em .006em #969899;
}

.card-front-title {
    font-size: 1.5em;
    font-family: "Merriweather-Bold";
    text-align: center;
    padding: .7em;
}

.card-back-info {
    font-size: 0.9em;
    font-family: "Merriweather-Light";
    text-align: center;
    line-height: 1.5em;
}

.service-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}