.flip-container {
    perspective: 1000px;
}

.flip-container:hover .flipper,
.flip-container.hover .flipper {
    transform: rotateY(180deg);
}

.flip-container,
.front,
.back {
    width: 350px;
    height: 350px;
    margin-right: 20px; /* Add spacing */
}

.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}

.front,
.back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

.front {
    z-index: 2;
}

.back {
    transform: rotateY(180deg);
}

@font-face {
    font-family: countryside;
    src: url("Countryside.ttf")
}

h1.text-center {
    color: purple;
    font-weight: bold;
    font-size: larger;
    font-family: 'countryside', sans-serif;
}

.service-title {
    color: purple;
    font-weight: bold;
    font-size: larger;
    font-family: 'countryside', sans-serif;
}

.wavy-border {
    border: 3px solid #24bcf8; /* Solid border color */
    padding: 1em; /* Add padding for space around the text */
    border-radius: 10px; /* Optional: Round the corners of the border */
    position: relative; /* Position relative for pseudo-element */
}

.wavy-border::before {
    content: '';
    position: absolute;
    top: -5px; /* Adjust the top position to create the wave effect */
    left: -5px; /* Adjust the left position to create the wave effect */
    right: -5px; /* Adjust the right position to create the wave effect */
    bottom: -5px; /* Adjust the bottom position to create the wave effect */
    border: 2px solid #24bcf8; /* Solid border color */
    border-radius: 10px; /* Optional: Round the corners of the border */
    border-image: url('img/paw-bottom-left.png') 10 10 round; /* Adjust the link to your wavy border image */
}