.card {
            /* Add shadows to create the "card" effect */
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            transition: 0.3s;
        }

        /* On mouse-over, add a deeper shadow */
        .card:hover {
            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
        }

        /* Add some padding inside the card container */
        .container {
            padding: 2px 16px;
        }

/* -------- Hero styles -------- */
#hero-section {
      position: relative;
      overflow: hidden;
      height: 400px;
      transition: height 1s ease-in-out, opacity 1s ease-in-out;
    }
    #hero-section.hidden {
      height: 0;
      opacity: 0;
    }
    #hero-section img {
      width: 100%;
      height: 400px;
      object-fit: cover;
    }
    #hero-caption {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      color: white;
      text-align: center;
      text-shadow: 0 2px 6px rgba(0,0,0,0.7);
    }
    /* -------- End Hero style -------- */