/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Apr 03 2025 | 17:40:26 */
/*Marcus added .flip-box 20241116*/
.flip-box {
  position: relative;
  width: 100%; /* Full width of the page */
  height: 500px; /* Set the desired height */
  perspective: 1000px; /* Enables 3D effect */
  overflow: hidden; /* Prevents text overflow */
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d; /* Enables 3D transformations */
}

.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg); /* Rotates the inner box on hover */
}

.flip-box-front,
.flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* Hides the back side when flipped */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px; /* Ensure text doesn't touch edges */
  box-sizing: border-box; /* Includes padding in width/height */
  color: #fff;
  font-size: 24px; /* Adjust font size as needed */
  line-height: 1.4; /* Adjust for better readability */
  overflow: hidden; /* Ensure no text overflows the box */
}

.flip-box-back {
  object-fit: cover; /* Scales the content to cover the entire back, maintaining its aspect ratio */
}

/*.flip-box-front {
  background-color: #bedef4; /* Front background color 
}*/

.flip-box-back {
  background-color: #ffffff; /* Back background color */
  transform: rotateY(180deg); /* Flips the back side initially */
}

/* Light background color for flip-box-light */
.flip-box-light .flip-box-front {
    background-color: #bedef4; /* Light color */
}

/* Dark background color for flip-box-dark */
.flip-box-dark .flip-box-front {
    background-color: #92c8ed; /* Dark color */
}

.flip-box-back table {
    width: 100%; /* Ensure table takes full width */
    border-collapse: collapse; /* Ensure borders are clean */
    font-size: 16px; /* Use the same size as the parent container */
}

.flip-box-back th,
.flip-box-back td {
    border: 1px solid #ddd; /* Add borders for visibility */
    padding: 8px; /* Add padding for readability */
    text-align: center; /* Align text properly */
    color: #000; /* Explicitly set text color to black */
    background-color: #fff; /* Explicitly set a white background */
}

.flip-box-back th {
    background-color: #444; /* Match theme for the header */
    color: #fff; /* Ensure header text is visible */
}