.hero {
  background-image: url(../assets/images/foe/project1.png);

}
/* Tooltip Styling */
.hero::after {
  content: "Mobile Application"; /* Manually set the alt text */
}
.work-items{
  position: relative;
}
#brand-1{
  background-image: url(../assets/images/foe/foe-brand.jpg);
}
#brand-2{
  background-image: url(../assets/images/foe/ceviche-brand.jpg);
}
#brand-3{
  background-image: url(../assets/images/foe/fiveVine-brand.jpg);
}
#brand-4{
  background-image: url(../assets/images/foe/hAndS-brand.jpg);
}

/* Tooltip Styling */
#brand-1::after, #brand-2::after, #brand-3::after, #brand-4::after  {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background:  #e6a8ff;
  color: #3f125b;  
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

#brand-1:hover::after, #brand-2:hover::after, #brand-3:hover::after, #brand-4:hover::after {
  opacity: 1;
}
#brand-1::after {
  content: "Family Of Eateries Logo"; /* Manually set the alt text */

}
#brand-2::after {
  content: "Ceviche Logo"; /* Manually set the alt text */

}

#brand-3::after {
  content: "Five Vines Logo"; /* Manually set the alt text */

}

#brand-4::after {
  content: "Heart and Stone Bistro Logo"; /* Manually set the alt text */

}
.brandCard {
  flex-direction: column;
  align-items: flex-start;

}
.brand-color > div:first-of-type{
  display: flex;
  flex-direction: row;
  justify-content: left;
}
.brand-color, .brand-font{
  flex-direction: column;
  align-items: flex-start;
}
.colors{
  width: 1.5rem;
  height: 1.5rem;
}
.prototype{
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.prototype {
  width: 100%;
  display: flex;
  justify-content: center;
}
  

@media (max-width: 599px) {
  .figma-embed {
    height: 250px;
  }

  .deliverable-images{
    display: flex;
    flex-direction: column;
    gap: 1rem;
      
  }
  .deliverable-images img{
    width: 100%;
  }
  .deliverable ul {
    font-size: 1.2rem;
    grid-template-columns: 1fr;
    gap: 10px; 

  }
  .work-items {

    height: 300px;

  }
  .brandCard {
    flex-direction: row;

  }
}

@media screen and (min-width: 600px) and (max-width: 768px) {

  .work-items {

      height: 350px;

  }
  
}

@media screen and (min-width: 769px) and (max-width:1024px){
  .work-items {

      height: 550px;

  } 

}