/* Add some styles for the title */
.page-title-1 {
  color: #e84200;
  font-size: 50px;
  text-align:start;
  transform: none;
  font-family:Georgia, 'Times New Roman', Times, serif;
  position:fixed;
  top: 2%;
  left:5%;
  z-index: 10;
  filter: hue-rotate(360deg);
  animation: colorShift 10s infinite linear;
}
.page-title-2 {
  color: #95be1a;
  font-size: 50px;
  text-align:start;
  transform: none;
  font-family:Georgia, 'Times New Roman', Times, serif;
  position:fixed;
  top: 10%;
  left:5%;
  z-index: 10;
  filter: hue-rotate(360deg);
  animation: colorShift 10s infinite linear;
}

.page-title-3 {
  color: #b4347a;
  font-size: 50px;
  text-align:start;
  transform: none;
  font-family:Georgia, 'Times New Roman', Times, serif;
  position:fixed;
  top: 18%;
  left:5%;
  z-index: 10;
  filter: hue-rotate(360deg);
  animation: colorShift 10s infinite linear;
}


@keyframes colorShift {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

body{
  flex-wrap: wrap;
  margin-top: 30px;
  margin: bottom 30px;
  height: 850px;
  width: 1500px;
  
  display: flex;
  justify-content: space-evenly;
  align-items:flex-end;
  background-color: #1e1f31;
  flex-direction: column;
}



.flex-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%
}

.container {
  position: relative;
  margin-right: 200px;
  height: 80px; /* Initial height of the container */
  transition: all 0.8s ease-in-out;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Hide the overflowing content */
  transition: height 0.5s ease-in-out; /* Smooth transition for height */
  align-items: baseline;
  z-index: 1;
}


.container-text {
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  position: absolute;
  top: 0px; /* Fixes text at the top */
  left: 30px;
  transform:none;
  font-size: 16px;
  font-weight:lighter;
  color: rgb(249, 165, 92);
  text-align:left;
  z-index: 2; /* Ensures text stays above flex items */
}


.container-1 .row, .container-2 .row, .container-3 .row, .container-4 .row{
  display: flex;
  background-color: rgb(243, 127, 26);
  transition: filter 5s ease-in-out;
  justify-content:center;
  flex-wrap: wrap;
  margin-bottom: 70px;
  padding: 10px;
  padding-top: 80px;
  border-radius: 20px;
  width: 40vw;
  align-items:center;
  z-index: 1;
}



/* Flex item styles */
.flex-item {
  display: flex;
  flex: 1 0 30%; /* Adjust to take up about 1/3 of the container's width */
  height: 150px;
  transition: flex 0.6s ease-in-out, filter 0.6s ease-in-out;
  border-radius: 20px;
  overflow: hidden;
  margin:5px;
  position: relative;
  background-color: rgb(224, 224, 224);
}


.container:hover{
  
  position: relative;
  filter:brightness(1.2);
  
}

.container.container-1:hover{
  height: 580px; 
   
}

.container.container-2:hover{
  height: 580px; /* Only container-2 stretches */
  margin-top: -70px;
}

.container.container-3:hover{
  height: 420px; /* Only container-2 stretches */
  margin-top: -70px;
}

.container.container-4:hover{
  height: 420px; /* Only container-2 stretches */
  margin-top: -70px;
}


.flex-item:hover {
  flex: 10 0 35%;
  
}

.flex-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1; /* Initially visible */
  filter: blur(30px); /* Apply initial blur */
  transition: opacity 0.5s ease-in-out, filter 0.5s ease-in-out;
  
}


/* Make images appear on hover */
.flex-item:hover::after {
  filter: blur(0px); /* Remove blur on hover */
  
}