html,
body {
    max-width: 72rem;
    margin-left: auto;
    margin-right: auto;
}

body {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    line-height: 1.7;
    color: #fff;
    background-color: black;
    text-align: center;
}

header.primary {
    color: #fff;
    text-transform: uppercase;
    margin: 3rem 2rem;
}

header.primary h1 {
    font-size: 2.4rem;
}

.cards {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    row-gap: 3rem;
    column-gap: 3rem;
}

.card {
    flex-basis: auto;
    width: 100%;
    min-width: 20rem;
    max-width: 30rem;
    min-height: 34rem;
    flex-shrink: 1;
    -webkit-box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15);
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15);
}

.card .front,
.card .back {
    border-radius: 3px;
    overflow: hidden;
}

/* Wider text area for Know Your Trainer (back of card) */
.card .back .trainer-bio p {
  width: 16.8rem;  /* 20% wider than default 14rem */
  margin-left: auto;
  margin-right: auto;
  text-align: center; /* keep centred */
}

.card header {
    height: 10rem;
    padding: 2rem 2rem;
    padding-top: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.card header .fas,
.card header .fab {
    font-size: 3rem;
}

.card header h2 {
    margin: 0px;
    padding: 1rem 0rem;
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1.0;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    width: 90%;
}

.card p {
    padding: 1rem 1rem;
    border-top: 1px solid #eee;
    width: 14rem;
    margin: 0px;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.9rem;
}

.contact-us {
    margin: 3rem 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.button {
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.8rem 2rem;
    display: inline-block;
    border-radius: 0.5rem;
    font-size: 1.2rem;
    border: none;
    cursor: pointer;
}

.button,
.raise-on-hover {
    position: relative;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

.button:hover,
.raise-on-hover:hover {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
    -webkit-box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
}

.button:hover::after,
.raise-on-hover:hover::after {
    -webkit-transform: scaleX(1.4) scaleY(1.6);
    transform: scaleX(1.4) scaleY(1.6);
    opacity: 0;
}

.button:active,
.button:focus,
.raise-on-hover:active,
.raise-on-hover:focus {
    outline: none;
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
    -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);

}

.call-to-action {
    padding: 2rem 2rem;
}

.button-cta {
    background-color: #fff;
    color: #777;
}

.button-cta::after {
    background-color: #fff;
}

.button-special {
    background: -webkit-gradient(linear, left top, right top, from(#fc466b), to(#3f5efb));
    background: linear-gradient(to right, #fc466b, #3f5efb);
    color: #fff;
}

.button-special::after {
    background-color: #55c57a;
}

label.pincode {
    font-size: 1.2em;
    font-weight: bold;
}

input.pincode {
    color: white;
    background-color: black;
    border: 2px solid white;
    border-radius: 6px;
    font-size: 2em;
    text-align: center;
    letter-spacing: 0.5em;
    font-weight: 100;
}

form {
    font-family: "Lato", sans-serif;
}

form.failure input {
    border-color: red;
}

form.success input {
    border-color: lime;
}

form.loading input {
    border-color: blue;
}

form.failure input {
    animation: shake-error;
    animation-duration: 120ms;
    animation-iteration-count: 3;
}

@keyframes shake-error {
    from, 50%, to {
        transform: translate(0px, 0px);
    }

    25% {
        transform: translate(-10px, 0px);
    }

    75% {
        transform: translate(10px, 0px);
    }
}

.block {
    display: block;
    width: 100%;
    margin-top: 0.2ex;
    margin-bottom: 0.2ex;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-col-spaced {
    row-gap: 4px;
}



.card.card-purple {
    background: linear-gradient(-45deg, #f403d1, #64b5f6);
}

.card.card-green {
    background: linear-gradient(-45deg, #24ff72, #9a4eff);

}

.card.card-orange {
    background: linear-gradient(-45deg, #f321d7, #ffec61);
}

.card .back header {
    display: none;
}

/*
Change from a column of items to rows of items when
the width of the screen is sufficiently large.
*/
@media only screen and (min-width: 1000px) {

    .cards {
        flex-direction: row;
        align-items: stretch;
    }

    .card {
        width: 22em;
    }

}

/*
Change from a single-sided card to a double-sided card
when the device has a "fine" pointer type (e.g., mouse).
*/
@media only screen and (pointer: fine) {

    .card {
        position: relative;
    }

    .card .front,
    .card .back {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: transform 500ms ease-in-out;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    /* Display the header on the back of the card */
    .card .back header {
        display: flex;
    }

    /* Initialize the front card's rotation */
    .card .front {
        transform: rotateY(0deg);
    }

    /* Rotate the rear card away from the screen */
    .card .back {
        transform: rotateY(180deg);
    }

    /* When hovering, rotate the front card away from the screen */
    .card:hover .front {
        transform: rotateY(-180deg);
    }

    /* Focus-triggered flips disabled to prevent auto-flip from autofill/password managers. Hover still flips. */
    /* .card:focus-within .front { transform: rotateY(-180deg); }
       .card:focus-within .back  { transform: rotateY(0deg); } */


    /* When hovering, rotate the rear card toward the screen */
    .card:hover .back {
        transform: rotateY(0deg);
    }


    /*
    When using a double-sided card, remove the bg colour from
    the outer card element, and put it on each side instead.
    */
    .card.card-purple,
    .card.card-green,
    .card.card-orange {
        background: none;
    }

    .card.card-purple .front {
        background: linear-gradient(-45deg, #f403d1, #64b5f6);
    }

    .card.card-purple .back {
        background: linear-gradient(-45deg, #64b5f6, #f403d1);
    }

    .card.card-green .front {
        background: linear-gradient(-45deg, #24ff72, #9a4eff);
    }

    .card.card-green .back {
        background: linear-gradient(-45deg, #9a4eff, #24ff72);
    }

    .card.card-orange .front {
        background: linear-gradient(-45deg, #f321d7, #ffec61);
    }

    .card.card-orange .back {
        background: linear-gradient(-45deg, #ffec61, #f321d7);
    }

}


    /* Booking Popup Stuff */

/* Upcoming Events Section */
.upcoming-events {
    background: rgb(0, 0, 0); /* Set a solid black background */
    color: #fff; /* White text */
    padding: 0px; /* Add padding for better spacing */
    margin-top: 3rem; /* Match the card spacing */
    border-radius: 10px; /* Adjust the border radius to match the cards */
    overflow: hidden; /* Ensure the rounded corners are visible */
}

/* Event Card Style */
.event-card {
    padding: 0;
    background: #111;
    border: 1px solid #666;
    border-radius: 8px;
    margin-bottom: 3rem;
}

.event-card h3 {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.event-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 10%; /* Add left padding */
    height: 100%; /* Make sure the container takes full height */
    box-sizing: border-box; /* Include padding in height */
    position: relative; /* Set relative positioning */
    margin-bottom: 20px;
}

/* Dates and Times Section */
.event-details .dates-times {
    margin-bottom: 10px;
    text-align: left; /* Add text-align property */
}

/* Other text within event-details */
.event-details {
    text-align: left; /* Add text-align property */
    margin-bottom: 10px;
}


/* Book Now Button */
.event-details .book-now-button {
    position: absolute;
    bottom: 9%;
    right: 5%;
    text-decoration: none; /* Remove underline */
    color: #fff; /* White text */
    background: linear-gradient(-45deg, #ffed6191, #f321d7); /* Gradient background */
    padding: 0.8rem 2rem;
    border-radius: 0.5rem;
    font-size: 1.2rem;
    border: none;
    cursor: pointer;
}

.event-details .book-now-button::after {
    background-color: #55c57a; /* Match the pseudo-element background */
}

/* Popup Style */
.popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #ccc;
    background-color: rgb(0, 0, 0);
    padding: 20px;
    z-index: 1;
    color: #fff; /* White text */
    border-radius: 8px; /* Adjust border radius */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Add a subtle shadow */
}

.popup-content {
    min-width: 400px;
    max-width: 600px;
    margin: 0 auto;
}

.close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    color: #fff; /* White text */
}

/* Form Submission Style Inside Popup */
.popup form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 10%;
    padding-right: 10%;
    margin-top: 20px; /* Adjust margin for better spacing */
}

.popup label {
    margin-bottom: 10px;
}

.popup input,
.popup textarea {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #666;
    border-radius: 8px;
    margin-bottom: 10px;
    box-sizing: border-box;
    font-family: "Lato", sans-serif; /* Set font family */
}

/* Submit Button Inside Popup */
.popup button {
    text-decoration: none;
    color: #fff; /* White text */
    background: linear-gradient(-45deg, #ffed6191, #f321d7); /* Gradient background */
    padding: 0.8rem 2rem;
    border-radius: 0.5rem;
    font-size: 1.2rem;
    border: none;
    cursor: pointer;
    display: block;
    margin: 0 auto; /* Center the button */
    margin-top: 1rem;
}

.popup button::after {
    background-color: #55c57a; /* Match the pseudo-element background */
}

/* Add this to your existing CSS */
#loading-spinner {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 20px;
    display: none;
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Add loading class to form when it's loading */
.popup.loading form {
    opacity: 0.5;
    pointer-events: none;
}

/* Add the keyframe animation for the spinner */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


.smaller-text {
    font-size: 0.75em; /* Adjust the percentage as needed */
    color: #808080; /* 50% grey color */
    padding-top: 10px;
    margin: 0 auto; /* Center align the text */
    text-align: center; /* Add this if you want to center-align the content within the text */
}


/* Shorter cards specifically for /cloud.html */

.cloud-cards .card {
    min-height: 20.4rem; /* ~20% bigger than 17rem */
}

/* Nudge cloud card fronts up a bit */
.cloud-cards .card .front header {
    height: 6.5rem;      /* tighten header to pull content up */
    padding-top: 0.25rem;
    padding-bottom: 16px; /* tighten bottom gap */
}

.cloud-cards .card .front p {
    padding-top: 0.5rem;  /* was 1rem via .card p */
    margin-top: 0.25rem;  /* add a tiny positive margin for rhythm */
}

/* Tighten the first paragraph under the heading on cloud cards */
.cloud-cards .card .front p:first-of-type {
    padding-top: 0.25rem;  /* reduce gap above the divider */
    margin-top: 0;         /* no extra margin above */
}

/* Reduce space between heading and first line for cloud cards */
.cloud-cards .card .front header h2 {
    padding-bottom: 0.5rem; /* was 1rem */
}