.hero {
    background-image: url(../assets/images/retail/project3.png);
    background-position: bottom;
  
  }
.hero::after {
  content: "TrailPoint Outdoors"; 
}
.app-div{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

iframe{
  width: 100%;
}
.application {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  margin-bottom: 7rem;

}
.apps-slider {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.apps-info{
  display: flex;
  gap: 2rem;
  flex-direction: column;
  justify-content: space-between;
}
.retail-shop{
  margin: auto;
  width: 100%;
}
.retail-shop img{
  margin: auto;
}
.work-items {
  width: 600px;
  height: 500px;
  background-size: cover;
  background-position: center;
  display: none;
  
}
.work-items.active {
  display: block;
}
.breadcrumbs {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  justify-content: center;
}
.breadcrumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #f4f4f4;
  cursor: pointer;
}
.two-app{
  flex-direction: row-reverse;
}
.breadcrumb.active {
  background-color: #e6a8ff;
}
#brand-1{
  background-image: url(../assets/images/retail/rotatingScreen4.gif);
}
#brand-2{
  background-image: url(../assets/images/retail/rotatingScreen1.png);
}
#brand-3{
  background-image: url(../assets/images/retail/rotatingScreen3.png);
}
#brand-4{
  background-image: url(../assets/images/retail/rotatingScreen2.png);
}
#brand-5{
  background-image: url(../assets/images/retail/dualScreen1.gif);
}
#brand-6{
  background-image: url(../assets/images/retail/dual-screen2.png);
}
#brand-7{
  background-image: url(../assets/images/retail/dual-screen3.png);
}
#brand-8{
  background-image: url(../assets/images/retail/dual-screen4.png);
}
#brand-9{
  background-image: url(../assets/images/retail/marketingScreen1.gif);
}
#brand-10{
  background-image: url(../assets/images/retail/marketingScreen2.gif);
}



#brand-1::after, #brand-2::after, #brand-3::after, #brand-4::after,  
#brand-5::after, #brand-6::after, #brand-7::after, #brand-8::after,  
#brand-9::after, #brand-10::after  {
  position: absolute;
  bottom: 10px;
  left: 25%;
  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, 
#brand-5:hover::after, #brand-6:hover::after, #brand-7:hover::after, #brand-8:hover::after,
#brand-9:hover::after, #brand-10:hover::after {
  opacity: 1;
}
#brand-1::after {
  content: "360 Product Showcase App"; 

}
#brand-2::after {
  content: "Screen Saver";

}

#brand-3::after {
  content: "Stop Point Feature"; 

}

#brand-4::after {
  content: "Product Highlight";

}
.deliverable-images{
  flex-direction: column;
  gap: 2rem;
}

.gallery-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
  background: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(29, 0, 41, 1) 100%); 
}

.gallery {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
}

.gallery-track {
  display: flex;
  gap: 16px;
  animation: scrollGallery 15s linear infinite;
}

.gallery img {
  width: auto;
  height: 300px;
  scroll-snap-align: center;
  transition: transform 0.5s ease-in-out;}

.gallery img:hover {
  transform: scale(1.05);
}
#gallery-prevBtn, #gallery-nextBtn{
  z-index: 1;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  position: absolute;
  bottom: 1rem;
}
#gallery-prevBtn{
    left: 1rem;
}
#gallery-nextBtn{
    right: 1rem;
}
.marketing-content > div:first-of-type
{
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.tp-ads{
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.apparel-tags{
  width: 100%;
  position: relative;
}
#tags{
  width: 20%;
  position: absolute;
  top: -3rem;
  left: 2rem;
  filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.25));
}
.tp-ads  {

  width: 100%;
}

.ads-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
}
.ads-wrapper video{
  max-height: 800px;
  width: 100%;
  height: 100%;
}
.youtube-vids{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 2rem;
  flex-wrap: nowrap;
}
.youtube-vids iframe{
  width: 100%;
  
}
@media (max-width: 599px) {
  .hero {
    background-position: left bottom;

}
  .deliverable-images{
    display: flex;
    flex-direction: column;
    gap: 1rem;
      
  }
  .deliverable-images img{
    width: 100%;
  }

  iframe{
    width:100%;
    height: 400px
  }
  .work-items {
    width: 300px;
    height: 300px;
  }
  .app-div{
    flex-direction: column;
    gap: 2rem;
  }
  .youtube-vids{
    grid-template-columns: 1fr ;
  }
  .ads-wrapper{
    flex-direction: column;
  }
}
  
@media screen and (min-width: 600px) and (max-width: 768px) {

  .work-items {

      height: 350px;

  }
  iframe{
    width:100%;
    height: 300px
  }
  .app-div{
    flex-direction: column;
    gap: 2rem;
  }
  .youtube-vids{
    grid-template-columns: 1fr 1fr;
  }
  
}

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

      height: 550px;

  } 

  iframe{
      width:100%;
      height: 500px
  }
  .app-div{
    flex-direction: column;
    gap: 2rem;
  }
  .youtube-vids{
    grid-template-columns: 1fr 1fr;
  }
}