
.picswithtext {
  top: 200px; /* adjust as needed */
  left: 1%;        /* stick to the right */
  text-align: center;
  width: max-content; /* shrink-wrap content */
  z-index: 1000;      /* keeps it above other content if needed */
  position: absolute;
}
.picswithtext:hover {
  transform: scale(1.1);
}
.computergif:hover {
  transform: scale(1.1);
}
.goback:hover {
  transform: scale(-1.3);
}
.picswithtext img{
  height: auto;
  width: 300px;
}
/* the caption of the imags properties*/
.picswithtext p {
-webkit-text-stroke: 2px black;
  font-size: 30px;
  color: red;
text-align: center;
position: absolute;
  top: 90%;
  left: 55%;
  transform: translate(-50%, -50%);
  margin: 0;
}

.computergif {
  top: 500px; /* adjust as needed */
  right: 1%;        /* stick to the right */
  text-align: center;
  width: max-content; /* shrink-wrap content */
  z-index: 1000;      /* keeps it above other content if needed */
  position: absolute;
}

.computergif img{
  height: auto;
  width: 300px;
}
/* the caption of the imags properties*/
.computergif p {
-webkit-text-stroke: 2px black;
  font-size: 30px;
  color: red;
text-align: center;
position: absolute;
  top: 90%;
  left: 55%;
  transform: translate(-50%, -50%);
  margin: 0;
}

 /* backbuttonnnn */
.goback {
  top: 10px; /* adjust as needed */
  left: 10px;        /* stick to the right */
  z-index: 1000;      /* keeps it above other content if needed */
  position: absolute;
 transform: scaleX(-1);
    
}
.goback img {
width: 100px;
height: auto;
    
}

/* This is pretty much going to be the mobile version of everything*/
@media (max-width: 768px) {
  .top-banner {
    width: 400px;
    height: auto;
  }

.cupoflatte img {
    width: 300px;
    height: 60px!important;
  }
    
.row1 {
display: flex;
  flex-direction: column;
  align-items: center; /* Optional: centers images horizontally */
  gap: 5px!important;  
    }

   
.row2 {
display: flex;
  flex-direction: column;
  align-items: center; /* Optional: centers images horizontally */
  gap: 1px!important;  
    }


    
    
}


