/* Existing CSS (keep all your current styles) */
.image-desc-side{
  display: flex;
  flex-wrap: wrap;
  align-items: start;
}
.image-desc-side .top-title{
  width: 100%;
  text-align: center;
}

@media (min-width: 768px) { 
  .image-desc-side .col-md-6{
    width: 50%;
  }
  
  .image-desc-side .col-md-3{
    width: 25%;
  }
  
  .image-desc-side .col-md-9{
    width: 75%;
  }
 }

.image-desc-side .content{
  display: flex; 
  padding: 0.1em;
}

.image-desc-side .content.text-col{
  display: flex;
  flex-wrap: wrap;
  padding-top: 28px;
  padding-bottom: 28px;
}

.image-desc-side .content.text-col .title.h1{
  text-align: center;
  width: 100%;
}

/* ====== ADD ROUNDED CORNERS TO IMAGES HERE ====== */
.image-desc-side img {
    border-radius: 50% !important; /* Perfect circle */
    max-width: 100%;
    height: auto;
}
.image-desc-side .content.text-col {
  display: flex;
  flex-wrap: wrap;
  padding-top: 14px;
  padding-bottom: 14px;
}

.image-desc-side .content.image-col {
  justify-content: center;
  padding: 0.25em;
}

.image-desc-side .description {
  font-size: 16px;
  margin-top: 0;
}

.image-desc-side .description p {
  margin: 6px 0 6px;
}

.image-desc-side .content.background-brown {
  background-color: #d3c9b5;
  margin-bottom: 0;
}

/* Keep existing styles below */
.image-desc-side .description{
  font-size: 16px;
}

.image-desc-side .description p{
  margin: 12px 0 12px;
}

.image-desc-side .description h3{
  margin-top: 24px;
  font-size: 18px;
}

.image-desc-side .description ul li::before{
  content: "";
  border: 3px solid #27231d;
  border-radius: 50%;
  width: 5px;
  height: 5px;
}

.image-desc-side .content.background-brown{
  background-color: #d3c9b5;
}
.image-desc-side .content.image-col.background-brown{
  padding: 0;
}

.image-desc-side .content.image-col.background-brown img{
  width: 100%;
}