body {
 
      background-color: #f8f9fa;
    }

    .row {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      margin: 0 -15px; /* Negative margin to balance column padding */
    }

    .col-4 {
      flex: 0 0 33.333%;
      max-width: 33.333%;
      padding: 0 15px; /* Horizontal space between cards */
      box-sizing: border-box;
    }

    .card-container {
      perspective: 1000px;
    }

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

    .card-container:hover .card {
      transform: rotateY(180deg);
    }

    .card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
    padding: 20px;
    text-align: center;
    box-sizing: border-box; /* Prevent padding from affecting size */
    }


    .card-front {
      background-color:#54a1cb;
      color: white;
    }

    .card-back {
      background-color: #ffffff;
      color: #333;
      transform: rotateY(180deg);
    }

    @media (max-width: 768px) {
      .col-4 {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0 10px;
      }
    }