﻿.flipCard {
    -webkit-perspective: 800;
    -ms-perspective: 800;
    -moz-perspective: 800;
    -o-perspective: 800;
    width: 400px;
    height: 200px;
    position: relative;
    margin: 50px auto;
}

.flipCard-container {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping when screen size is smaller */
    justify-content: center; /* Center cards in the row */
    gap: 20px; /* Add space between cards */
    padding: 20px;
    margin-top: 50px;
}

    .flipCard .card.flipped {
        transform: rotatey(-180deg);
        -ms-transform: rotatey(-180deg); /* IE 9 */
        -moz-transform: rotatey(-180deg); /* Firefox */
        -webkit-transform: rotatey(-180deg); /* Safari and Chrome */
        -o-transform: rotatey(-180deg); /* Opera */
    }

    .flipCard .card {
        width: 100%;
        height: 100%;
        -webkit-transform-style: preserve-3d;
        -webkit-transition: 0.5s;
        -moz-transform-style: preserve-3d;
        -moz-transition: 0.5s;
        -ms-transform-style: preserve-3d;
        -ms-transition: 0.5s;
        -o-transform-style: preserve-3d;
        -o-transition: 0.5s;
        transform-style: preserve-3d;
        transition: 0.5s;
    }

        .flipCard .card .side {
            display: flex; /* Enable Flexbox */
            flex-direction: column; /* Stack children vertically */
            justify-content: center; /* Center content vertically */
            align-items: center; /* Center content horizontally */
            text-align: center; /* Center align text */
            width: 100%;
            height: 100%;
            padding: 10px;
            cursor: pointer;
            position: absolute;
            box-sizing: border-box;
            z-index: 2;
            backface-visibility: hidden; /* W3C */
            -webkit-backface-visibility: hidden; /* Safari & Chrome */
            -moz-backface-visibility: hidden; /* Firefox */
            -ms-backface-visibility: hidden; /* Internet Explorer */
            -o-backface-visibility: hidden; /* Opera */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
            overflow: hidden;
        }

        .flipCard .card .back {
            background: white;
            color: black;
            transform: rotatey(-180deg);
            -ms-transform: rotatey(-180deg); /* IE 9 */
            -moz-transform: rotatey(-180deg); /* Firefox */
            -webkit-transform: rotatey(-180deg); /* Safari and Chrome */
            -o-transform: rotatey(-180deg); /* Opera */
        }

        .flipCard .card .front {
            font-family: Arial;
            font-size: 1em;
            text-align: center;
            background-color: #3398d6;
            border: 3px solid white;
            color: white;
        }

.LogoImg {
    width: 140px;
}

.LogoImgLg {
    height: 50px;
}

.flipCard .card .back {
    font-family: Arial;
    background-color: #87c3e8;
    border: 3px solid white;
    text-align: center;
    color: black;
    padding-top: 4px;
    font-size: 2em;
    overflow: hidden; /* Hide scrollbars */
}

.ClickMe {
    position: absolute;
    bottom: 20px;
    right: 10px;
}

.address {
    font-size: 18px;
}

.hours {
    font-size: 15px;
}

.wrap {
    width: 100%;
    height: 100%;
    margin-top: 50px;
    top: 85px;
    left: 0;
    display: flex;
    justify-content: center;
    overflow: auto;
    
}

    .wrap h1 {
        font-family: 'Oswald', sans-serif;
        font-weight: 900;
        font-size: clamp(1.5rem, 5vw, 4rem); /* Min 1.5rem, adjusts with viewport, Max 4rem */
        background: #2e3192;
        background: linear-gradient(270deg, #2e3192, #1bffff, #d4145a, #fbb03b, #009245, #fcee21, #662d8c, #ed1e79);
        background-size: 1600% 1600%;
        -webkit-animation: GradientAnim 120s ease infinite;
        animation: GradientAnim 120s ease infinite;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-align: center; /* Center align text */
    }


@-webkit-keyframes GradientAnim {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@keyframes GradientAnim {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
} 