
.section {
  padding: 35px 0px;
}

.about-page{
  gap: 0px;
}

.about-container {
  display: flex;
  max-width: 1215px;
  margin: 0 auto;
  flex-direction: row; 
}

.image-container {
  width: 598px;
  height: 350px;
  /* width: 50%; */
  border-radius: 8px;
  margin: 20px 10px;
  overflow: hidden;
  position: relative;
  justify-content: center;
  display: flex;

}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* cover the container, cropping if needed */
  display: block;
}

p{
  color: #F9F9FBCC;
}

.content {
  width: 50%;
  margin: 0px 15px;
}

h1 {
  font-size: 32px;
  margin-bottom: 20px;
  margin-top: 0px;
}

.content p {
  line-height: 1.5;
  /* color: #d1d0d2; */
}

.valuables-container{
  width: 100%;
  /* height: 487px; */
}

.valuables {
  display: flex;
  flex-wrap: wrap;
  column-gap: 20px;
  row-gap: 30px;
  justify-content: center;
}

.valuable {
  
  width: 391px;
  background: #231F20;
  border-radius: 8px;
  height: 199px;
  
  flex-direction: row;
  gap: 20px;
}

.valuable-image {
  width: 64px;
  height: 64px;
}

.valuable-text {
  margin: 24px;
}


.valuable-header {
  display: flex;
  margin: 45px 0px 20px 40px;
}

.valuable-description {
  color: #F9F9FBCC;
  margin: 0px 60px 0px 40px;
}

/* .ending-container{
  padding: 0px 40px
} */

.ending-container p{
  line-height: 1.5;
  margin-bottom: 15px;
  /* color: #d1d0d2; */
}

.warranty-container p{
  line-height: 1.5;
  margin-bottom: 15px;
  /* color: #d1d0d2; */
}

.dotted-paragraph {
  position: relative;
  
  padding-left: 20px;
}

.dotted-paragraph::before {
  content: '•'; /* Unicode for the bullet point */
  position: absolute;
  left: 0;
  color: #fff;
}


@media screen and (max-width: 1275px) {
  
  .valuables-container {
    width: 100%;
    max-width: 830px;
    margin: auto;
    height: 100%;
  }

  .ending-container {
    width: 100%;
    max-width: 830px;
    margin: auto;
  }

  .warranty-container{
    width: 100%;
    max-width: 830px;
    margin: auto;
  }
  .about-container {
    flex-direction: column;
    align-items: center; 
  }

 .content {
    width: 830px; 
  }

  .content p {
    font-size: 14px;
  }

  .valuable {
    width: 48%; 
  }

  .valuable-description {
    margin: 0px 40px; 
  }

  .content {
    order: 2; 
}

  .image-container {
      order: 1; 
  }
}

@media screen and (max-width: 850px) {

  .section{
    padding: 0px 40px;
  }

  .about-container {
    flex-direction: column; 
    padding: 20px;
  }

   .content {
    width: 100%; 
  }

  .image-container {
    width: 361px;
    height: 222px; 
  }

  .image-container img {
    width: 100%; 
  }

  h1 {
    font-size: 20px;
  }

  .valuables {
    flex-direction: column; 
    align-items: center;
    margin: 0px 20px;
  }

  .valuable {
    width: 90%; 
  }

  .content {
    order: 2; 
}

  .image-container {
      order: 1; 
  }

  .ending-container {
    width: 85%;
    padding: 0px;
  }

  .warranty-container{
    width: 85%;
    padding: 0px;
  }
}


@media screen and (max-width: 500px) {
  .section {
    padding: 0px; 
  }

  .image-container  {
    width: 286px;
    height: 182px;
  }

  h1 {
    font-size: 20px; 
  }

  .valuable {
    width: 100%; 
    height: auto; 
  }

  .valuable-description {
    margin: 5px 40px 40px 40px; 
    
  }

  .content {
    order: 2; 
}

  .image-container {
      order: 1; 
  }

}
