* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root{
  --bottom-background-color: rgb(194, 194, 194);
}

.container {
  display: flex;
  flex-direction: column ;

}

.back-button {
  position: absolute;
  margin: 20px;
  padding: 5px 20px;
  font-size: 2rem;
  /* make sure it doesn't show as a link */
  text-decoration: none;
  color: black;
  background-color: var(--bottom-background-color);
}

.top-container {
  display: flex;
  position: relative;
  /* padding: 0 20px; */
}

.top-text-container {
  padding: 0 20px;
  padding-top: 100px;
  /* padding-bottom: 25px; */
  margin-bottom: 50px;
  font-size: 1.5rem;
  font-family: Helvetica;

}

.top-container .Black, .top-container .White {
  flex: 1;
  /* padding: 0 20px; */

}



.Black {
  background-color: black;
  color: white;
}

.Black .Items .top-text-container {
  text-align: end;
}

.bottom-text-container {
  padding: 0 20px;
  color: rgb(147, 220, 220);
  font-family: Helvetica;

  font-size: 2rem;
  /* line-height: 5rem; */
}

.bottom-text-container h2{
  margin-bottom: 50px;
}

.bottom-text-container ul {
  padding:  0 30px;
}


.middle-text img{
  height: 25px;
  width: 25px;


}

.img-wrapper {
  /* display: flex; */
  width: 100%;
}

.img-wrapper img {
  width: 100%;
  height: 500px;
  object-fit: cover;
}

.Gray {
  background-color: var(--bottom-background-color);
  position: relative
}


/* slope of the gray area */
.slope-container {
  position: absolute;
  top: -39px;
  height: 40px;
  width: 100%;
  clip-path: polygon(0% 0%, 50% 88%, 100% 0%, 100% 100%, 0 100%);
  background-color: var(--bottom-background-color)
 
}

.flexBox {
  display: flex;
  padding: 40px 100px;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px; /* Optional: adds spacing between boxes */
  /* max-width: ; */
  /* align-items: center; */
  /* align-content: center; */
}

.flexBoxItem{
  /* text-align: center; */
  width: 500px;
  font-family: Helvetica;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 20px;
  background-color: rgb(199, 199, 199);
}

.middle-text {
  display: flex;
  padding: 5px;
  gap: 2px;
  font-family: Helvetica;
  
}

.middle-text p {
padding: 5px;


}

.outline-btn {
  margin-top: 10px;
  /* align-self: flex-start; Prevents stretching */
  display: inline-flex;


  outline: 1.5px solid black;
  border-radius: 50px;
  padding: 2px 7px;

  /* flex-shrink: inherit; */
}

.button-outline{
  padding-left: 35px ;

}

@media (max-width: 768px) {

  .top-container {
    display: flex;
    flex-direction: column ;
  }

  .top-container .Black, .top-container .White {
   
    padding: 0 20px;
  
  }

  .top-text-container{
    display: flex;

  }
  

  .bottom-text-container {
  font-size: 20px;
  padding: 20px 0;
  
  
  }




}