/* Add to your existing CSS */
.section-hero[dir="rtl"] {
    text-align: right;
  }
  
  .section-hero[dir="rtl"] .hero {
    direction: rtl;
  }
  
  .section-hero[dir="rtl"] .hero-text-box {
    padding-right: 0;
    padding-left: 40px; /* Adjust as needed */
  }
  .contents p {
    text-align: right;
  }
  .cards[dir="rtl"] {
    text-align: right;
  }
  
  .wrapperprojects h2{
  font-size: 23px !important;
  font-weight: 600 !important;
  text-align: center;
  margin: 1.5rem 0;
  padding: 0.5rem 0;
  line-height: 1.4;
  display: inline-block;
  width: auto;
  max-width: 90%; 
}
/* edite for media query */
@media (max-width: 600px) {
  .tabs li {
    height: 0 !important;
    padding: 8px;
  }
}
/* Center content on small screens */
@media (max-width: 600px) {
  .box {
    flex-direction: column-reverse; /* text first, then image */
    align-items: center;            /* center both elements horizontally */
    text-align: center;             /* center text */
  }

  .box img {
    width: 250px !important;
    height: 229px !important;
  }

  .box div {
    padding: 0 10px;
  }
}
@media (max-width: 433px) {
  .box img {
    width: 210px !important;
    height: 200px !important;
  }
}
@media only screen and (max-width: 433px) {
  .box img {

display: flex !important;

  }
}