/* Physical layout corrections for the Arabic RTL interface. */
/* Keep the reference's physical composition independent of document direction:
   Dubai artwork on the left, content panel on the right. */
.hero{
  direction:ltr;
  grid-template-columns:40% 60%;
  grid-template-areas:"visual panel";
}
.hero-visual{grid-area:visual;order:initial!important}
.hero-panel{grid-area:panel;order:initial!important;direction:rtl}
[dir=ltr] .hero-panel{direction:ltr}

/* Keep the header controls in the same physical places in both languages.
   Only the Arabic link group and its text flow right-to-left. */
.hero .navbar{direction:ltr}
.hero .nav-links{margin-left:auto!important;margin-right:0!important}
[dir=rtl] .hero .nav-links{direction:rtl}
[dir=ltr] .hero .nav-links{direction:ltr}

@media(max-width:1280px){
  .hero .nav-links{right:0!important;left:auto!important}
}

.about-contact-wrap{direction:ltr}
[dir=rtl] .about-copy,[dir=rtl] .contact-form-wrap,[dir=rtl] .contact-details{direction:rtl}
.contact-area{direction:ltr}
.contact-details{border-right:0;border-left:1px solid #dfcfc3;padding:10px 0 0 25px}

/* Card artwork stays left and Arabic copy stays right, matching the reference. */
[dir=rtl] .sector-card{direction:ltr}
[dir=rtl] .sector-photo{inset:0 57% 0 0}
[dir=rtl] .sector-photo:after{background:linear-gradient(90deg,rgba(255,255,255,0),#fffaf4 100%)}
[dir=rtl] .sector-icon{left:29%;right:auto;transform:translate(-50%,-50%)}
[dir=rtl] .sector-content{grid-column:2;direction:rtl}

/* Avoid image distortion and long-content overflow. */
.sector-card,.hero-panel,.contact-area,.about-copy{min-width:0}
.sector-content h3,.sector-content p,.contact-details a{overflow-wrap:anywhere}
.contact-form input,.contact-form textarea{min-width:0}
.hero h1{overflow-wrap:break-word}
.sector-card{color:inherit;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease}
.sector-card:hover{transform:translateY(-5px);box-shadow:0 18px 42px rgba(32,53,52,.17)}
.sector-more{display:inline-flex;gap:7px;align-items:center;margin-top:5px;color:#b86f50;font-size:11px}
.sector-more i{font-style:normal;transition:transform .2s ease}
.sector-card:hover .sector-more i{transform:translateX(-4px)}

@media(max-width:1200px) and (min-width:861px){
  .about-contact-wrap{grid-template-columns:23% 37% 40%}
  .contact-area{grid-template-columns:1fr}
  .contact-details{display:block;border-left:0;border-top:1px solid #dfcfc3;margin-top:16px;padding:15px 0 0}
  .contact-details p{margin-bottom:10px}
}

@media(max-width:860px){
  .hero{display:block;direction:ltr}
  .hero-panel{direction:rtl}
  [dir=ltr] .hero-panel{direction:ltr}
  .about-contact-wrap{direction:ltr}
  .about-copy,.contact-area{direction:rtl}
  .contact-details{border:0;padding:22px 0 0}
  [dir=rtl] .sector-photo{inset:0 56% 0 0}
  [dir=rtl] .sector-content{grid-column:2}
}

@media(max-width:560px){
  .hero{min-height:720px}
  .hero-panel{min-height:720px}
  .hero-copy{padding-top:200px}
  .hero h1{font-size:34px;letter-spacing:-1px}
  .hero-copy>p{font-size:14px;line-height:1.85}
  .sector-card{height:178px}
  [dir=rtl] .sector-photo{inset:0 60% 0 0}
  [dir=rtl] .sector-icon{left:30%;right:auto}
  [dir=rtl] .sector-content{grid-column:2}
  footer{padding-inline:18px}
}