.flip-container {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    overflow: hidden;
	height: 90vh
	
  }

  .box {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    flex: 1;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transition: flex 0.5s ease;
    color: white;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .box-content {
    width: 100%;
    margin: auto;
    padding: 50% 10%;
    text-align: center;
    position: relative;
    z-index: 1;
  }

  .box::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 0;
    transition: background 0.3s ease;
  }

  .box img {
    width: 10%;
    height: 100%;
    object-fit: contain;
    margin-bottom: 15px;
    transition: transform 0.5s ease;
  }

  .box:hover img,
  .box.active img {
    transform: scale(1);
  }

  .title h2{
    font-weight: bold;
    font-size: 18pt;
    margin-bottom: 10px;
	  font-family: 'Butler';
	  text-transform: uppercase
  }

.subtitle{
    font-size: 12pt;
    margin-bottom: 10px;
font-family: 'Helvetica';
  }

  .description {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.5s ease;
    font-size: 1rem;
    color: #eee;
	  font-family: 'Helvetica';
	  font-weight: 100;
	  line-height: 1.2;
		      padding-top: 2%;
  }

  .box:hover .description,
  .box.active .description {
    max-height: 200px;
    opacity: 1;
	  margin-top: -10%
  }

 .box:hover .subtitle,
  .box.active .subtitle {
    max-height: 200px;
    opacity: 0;
  }

.box:hover .box-content,
  .box.active .box-content  {
    padding-top:18%
	  
  }

.box:hover .graphic{
    opacity: 0;
  }

.graphic-change{
	opacity: 0
}

.box:hover .graphic-change{
	opacity:1
}


/* On hover, change the background image */
.box:nth-child(1):hover {
    background-image: url('../images/flip/image-one-hover.png');
	transition: background-image 0.5s ease; /* Add smooth transition */
}
.box:nth-child(2):hover {
    background-image: url('../images/flip/image-two-hover.png');
	transition: background-image 0.5s ease; /* Add smooth transition */
}
.box:nth-child(3):hover {
    background-image: url('../images/flip/image-three-hover.png');
	transition: background-image 0.5s ease; /* Add smooth transition */
}
.box:nth-child(4):hover {
    background-image: url('../images/flip/image-four-hover.png');
	transition: background-image 0.5s ease; /* Add smooth transition */
}

  /* Backgrounds */
  .box:nth-child(1) {
    background-image: url('../images/flip/image-one.png');
  }
  .box:nth-child(2) {
    background-image: url('../images/flip/image-two.png');
  }
  .box:nth-child(3) {
    background-image: url('../images/flip/image-three.png');
  }
  .box:nth-child(4) {
    background-image: url('../images/flip/image-four.png');
  }

  /* Desktop: expand on hover */
  @media (min-width: 769px) {
    .flip-container:hover .box {
      flex: 0.5;
    }

    .flip-container:hover .box:hover {
      flex: 1;
    }
  }

  /* Mobile: stack and expand on click */
  @media (max-width: 768px) {
    .flip-container {
      flex-direction: column;
    }

    .box {
      width: 100%;
    }

    .box:not(.active) .description {
      max-height: 0;
      opacity: 0;
    }

    
  }