:root{
  --ink:#27233d;
  --ink-2:#37314f;
  --teal:#2CB0BF;
--teal-dark:#2498A5;
  --yellow:#f8b31f;
  --paper:#f7f8fa;
  --muted:#6e7180;
  --line:#e7e9ee;
  --white:#fff;
  --shadow:0 24px 70px rgba(39,35,61,.14);
  --radius:24px;
  --radius-sm:16px;
  --container:min(1180px, calc(100% - 40px));
  --font:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-ar:Tahoma, Arial, sans-serif;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:#fff;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

body.rtl{
  font-family:var(--font-ar);
}

img{
  max-width:100%;
  display:block;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
textarea,
select{
  font:inherit;
}

.container{
  width:var(--container);
  margin-inline:auto;
}

.skip-link{
  position:fixed;
  left:12px;
  top:-80px;
  background:#fff;
  padding:10px 14px;
  z-index:9999;
  border-radius:8px;
}

.skip-link:focus{
  top:12px;
}


/* TOP BAR */

.topbar{
  background:var(--ink);
  color:#ddd9ea;
  font-size:.78rem;
}

.topbar-inner{
  height:36px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.topbar-links{
  display:flex;
  gap:18px;
}

.topbar a:hover{
  color:#fff;
}


/* HEADER */

.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(231,233,238,.8);
}

.nav-wrap{
  height:80px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand img{
  width:190px;
  height:auto;
}

.main-nav{
  display:flex;
  align-items:center;
  gap:25px;
  font-size:.94rem;
  font-weight:650;
}

.main-nav>a:not(.btn){
  position:relative;
  padding:28px 0;
}

.main-nav>a:not(.btn):after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:20px;
  height:2px;
  background:var(--teal);
  transform:scaleX(0);
  transform-origin:center;
  transition:.25s;
}

.main-nav>a.active:after,
.main-nav>a:not(.btn):hover:after{
  transform:scaleX(1);
}

.lang-switch{
  color:var(--teal-dark)!important;
  font-weight:800;
}

.nav-toggle{
  display:none;
  background:none;
  border:0;
  padding:8px;
}

.nav-toggle span{
  display:block;
  width:24px;
  height:2px;
  background:var(--ink);
  margin:5px 0;
  transition:.2s;
}


/* BUTTONS */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid transparent;
  border-radius:999px;
  padding:12px 20px;
  font-weight:800;
  line-height:1.2;
  transition:
    transform .2s,
    box-shadow .2s,
    background .2s,
    border-color .2s;
  cursor:pointer;
}

.btn:hover{
  transform:translateY(-2px);
}

.btn-primary{
  background:linear-gradient(
    100deg,
    var(--teal) 0%,
    #42c7c7 58%,
    var(--yellow) 130%
  );
  color:#10272c;
  box-shadow:0 12px 30px rgba(34,184,199,.23);
}

.btn-primary:hover{
  box-shadow:0 16px 38px rgba(34,184,199,.32);
}

.btn-outline{
  border-color:#cfd3dc;
  background:#fff;
  color:var(--ink);
}

.btn-outline:hover{
  border-color:var(--teal);
  color:var(--teal-dark);
}

.btn-ghost{
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.05);
  color:#fff;
}

.btn-light-outline{
  border-color:rgba(255,255,255,.45);
  color:#fff;
}

.btn-ghost-light{
  border-color:rgba(255,255,255,.25);
  color:#fff;
  background:rgba(255,255,255,.05);
}

.btn-lg{
  padding:15px 25px;
}

.btn-small{
  padding:9px 15px;
  font-size:.85rem;
}

.btn.full{
  width:100%;
}


/* COMMON */

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--teal-dark);
  font-size:.78rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  font-weight:900;
}

.rtl .eyebrow{
  letter-spacing:0;
}

.eyebrow:before{
  content:"";
  width:28px;
  height:2px;
  background:linear-gradient(90deg,var(--teal),var(--yellow));
}

.section{
  padding:100px 0;
}

.section-heading h2,
.section-top h2{
  font-size:clamp(2rem,4vw,3.5rem);
  line-height:1.08;
  letter-spacing:-.035em;
  margin:14px 0;
}

.rtl .section-heading h2,
.rtl .section-top h2{
  letter-spacing:0;
}

.section-heading.center{
  text-align:center;
  max-width:760px;
  margin:0 auto 50px;
}

.section-heading.center .eyebrow{
  justify-content:center;
}

.section-heading p{
  color:var(--muted);
}

.section-top{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:35px;
  margin-bottom:42px;
}

.section-top>div{
  max-width:760px;
}


/* HERO */

.hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(
    135deg,
    #242037 0%,
    #342e4a 62%,
    #263a4c 100%
  );
  color:#fff;
  min-height:690px;
  display:flex;
  align-items:center;
}

.hero:after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:110px;
  background:linear-gradient(
    to top,
    rgba(8,13,24,.28),
    transparent
  );
  pointer-events:none;
}

.hero-grid{
  display:grid;
  grid-template-columns:1.03fr .97fr;
  gap:70px;
  align-items:center;
  padding:80px 0;
  position:relative;
  z-index:2;
}

.hero .eyebrow{
  color:#7de2e9;
}


/* HERO TITLE */

.hero-copy h1{
  font-size:clamp(2.55rem,3.7vw,3.45rem);
  line-height:1.12;
  letter-spacing:-.03em;
  margin:18px 0 25px;
  max-width:none;
  font-weight:400;
  white-space:nowrap;
}

.hero-title-normal{
  font-weight:400;
}

.hero-title-bold,
.hero-copy h1 strong{
  font-weight:800;
}


/* ARABIC HERO TITLE */

.rtl .hero-copy h1{
  font-size:clamp(2.05rem,3vw,2.7rem);
  line-height:1.35;
  letter-spacing:0;
  font-weight:400;
  white-space:nowrap;
}

.rtl .hero-title-normal{
  font-weight:400;
}

.rtl .hero-title-bold,
.rtl .hero-copy h1 strong{
  font-weight:800;
}


.hero-copy>p{
  font-size:1.2rem;
  color:#d6d4df;
  max-width:650px;
  line-height:1.7;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:32px;
}

.hero-trust{
  display:flex;
  gap:28px;
  margin-top:46px;
  padding-top:28px;
  border-top:1px solid rgba(255,255,255,.12);
}

.hero-trust div{
  display:flex;
  flex-direction:column;
}

.hero-trust strong{
  font-size:1.12rem;
}

.hero-trust span{
  font-size:.78rem;
  color:#a9a6b5;
}


/* HERO VISUAL */

.hero-visual{
  position:relative;
  min-height:560px;
}

.visual-card{
  border-radius:28px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 30px 90px rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,.12);
}

.visual-card img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.main-card{
  position:absolute;
  right:8%;
  top:2%;
  width:68%;
  height:510px;
  transform:rotate(2deg);
}

.rtl .main-card{
  right:auto;
  left:8%;
  transform:rotate(-2deg);
}

.visual-caption{
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(35,31,52,.82);
  backdrop-filter:blur(14px);
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:800;
}

.floating-card{
  position:absolute;
  width:39%;
  height:230px;
  border:8px solid rgba(255,255,255,.06);
}

.card-a{
  left:0;
  top:48px;
  transform:rotate(-7deg);
}

.rtl .card-a{
  left:auto;
  right:0;
  transform:rotate(7deg);
}

.card-b{
  left:5%;
  bottom:18px;
  transform:rotate(5deg);
}

.rtl .card-b{
  left:auto;
  right:5%;
  transform:rotate(-5deg);
}

.badge-orbit{
  position:absolute;
  right:0;
  bottom:38px;
  background:var(--yellow);
  color:#2e2944;
  font-size:.77rem;
  font-weight:900;
  padding:12px 18px;
  border-radius:999px;
  box-shadow:0 12px 25px rgba(248,179,31,.2);
}

.rtl .badge-orbit{
  right:auto;
  left:0;
}

.hero-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(20px);
  opacity:.22;
}

.hero-glow-one{
  width:440px;
  height:440px;
  background:var(--teal);
  right:-160px;
  top:-100px;
}

.hero-glow-two{
  width:320px;
  height:320px;
  background:var(--yellow);
  left:-150px;
  bottom:-140px;
}


/* TRUST STRIP */

.trust-strip{
  background:#fff;
  border-bottom:1px solid var(--line);
}

.trust-strip-inner{
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  overflow-x:auto;
  font-size:.83rem;
  font-weight:850;
  color:#77788a;
  white-space:nowrap;
}

.trust-strip-inner span:before{
  content:"•";
  color:var(--teal);
  margin-inline-end:14px;
}


/* INTRO */

.split-grid{
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:80px;
  align-items:start;
}

.intro-copy p{
  font-size:1.15rem;
  color:#616475;
  margin-top:5px;
  line-height:1.85;
}

.text-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:20px;
  font-weight:850;
  color:var(--teal-dark);
}

.text-link span{
  transition:transform .2s;
}

.text-link:hover span{
  transform:translateX(4px);
}

.rtl .text-link:hover span{
  transform:translateX(-4px);
}


/* SERVICES */

.services-section{
  background:var(--paper);
}

.service-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.service-card{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:30px;
  min-height:300px;
  overflow:hidden;
  transition:
    transform .25s,
    box-shadow .25s,
    border-color .25s;
}

.service-card:hover{
  transform:translateY(-7px);
  box-shadow:var(--shadow);
  border-color:rgba(34,184,199,.45);
}

.service-card:after{
  content:"";
  position:absolute;
  width:120px;
  height:120px;
  border-radius:50%;
  background:rgba(34,184,199,.08);
  right:-50px;
  bottom:-50px;
}

.rtl .service-card:after{
  right:auto;
  left:-50px;
}

.service-icon{
  width:48px;
  height:48px;
  border-radius:15px;
  background:linear-gradient(
    135deg,
    rgba(34,184,199,.15),
    rgba(248,179,31,.16)
  );
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--teal-dark);
}

.service-icon svg{
  width:23px;
  height:23px;
  fill:currentColor;
}

.service-index{
  position:absolute;
  right:28px;
  top:28px;
  font-size:.75rem;
  color:#a5a7b2;
  font-weight:900;
}

.rtl .service-index{
  right:auto;
  left:28px;
}

.service-card h3{
  font-size:1.35rem;
  margin:35px 0 10px;
}

.service-card p{
  color:var(--muted);
  font-size:.94rem;
}

.service-arrow{
  position:absolute;
  bottom:26px;
  left:30px;
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
}

.rtl .service-arrow{
  left:auto;
  right:30px;
}


/* WORK */

.work-section{
  background:var(--ink);
  color:#fff;
}

.section-top.light .eyebrow{
  color:#72dce4;
}

.section-top.light h2{
  color:#fff;
}

.portfolio-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  grid-auto-rows:310px;
  gap:18px;
}

.portfolio-card{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  background:#111;
}

.portfolio-card:nth-child(3),
.portfolio-card:nth-child(4){
  grid-column:span 1;
}

.portfolio-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s;
}

.portfolio-card:hover img{
  transform:scale(1.05);
}

.portfolio-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:28px;
  background:linear-gradient(
    to top,
    rgba(25,22,38,.9),
    rgba(25,22,38,0) 68%
  );
}

.portfolio-overlay span{
  font-size:.78rem;
  color:#84e3e7;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.12em;
}

.portfolio-overlay h3{
  font-size:1.55rem;
  margin:6px 0 2px;
}

.portfolio-overlay p{
  margin:0;
  color:#d3d1dc;
  font-size:.9rem;
  max-width:520px;
}


/* PROCESS */

.process-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.process-step{
  border-top:3px solid var(--teal);
  background:#fff;
  padding:30px 18px 22px;
}

.process-step b{
  color:var(--yellow);
  font-size:.8rem;
}

.process-step h3{
  font-size:1.25rem;
  margin:18px 0 6px;
}

.process-step p{
  color:var(--muted);
  font-size:.9rem;
}


/* CLIENTS */

.clients-section{
  background:#f7f8fa;
}

.client-wall{
  background:#fff;
  padding:20px;
  border-radius:22px;
  border:1px solid var(--line);
  box-shadow:0 18px 60px rgba(39,35,61,.08);
}

.client-wall img{
  width:100%;
  max-height:480px;
  object-fit:cover;
  object-position:center 60%;
  border-radius:14px;
}


/* CTA */

.cta-band{
  background:linear-gradient(
    100deg,
    #2c2743,
    #36304f 65%,
    #224c54
  );
  color:#fff;
  padding:80px 0;
}

.cta-band-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:40px;
}

.cta-band h2{
  font-size:clamp(2rem,3.6vw,3.6rem);
  line-height:1.05;
  margin:14px 0;
  max-width:780px;
}

.cta-band .eyebrow{
  color:#75e0e6;
}

.cta-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}


/* PAGE HERO */

.page-hero{
  padding:90px 0;
  background:linear-gradient(
    180deg,
    #f6f8f9,
    #fff
  );
}

.page-hero.compact{
  padding:80px 0;
}

.page-hero-grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:80px;
  align-items:center;
}

.page-hero h1{
  font-size:clamp(3rem,5vw,5.5rem);
  line-height:.98;
  letter-spacing:-.045em;
  margin:18px 0;
}

.rtl .page-hero h1{
  letter-spacing:0;
}

.page-hero p{
  font-size:1.08rem;
  color:var(--muted);
  max-width:760px;
}

.page-hero-art{
  border-radius:26px;
  overflow:hidden;
  box-shadow:var(--shadow);
  transform:rotate(2deg);
}

.rtl .page-hero-art{
  transform:rotate(-2deg);
}

.dark-page-hero{
  background:var(--ink);
  color:#fff;
}

.dark-page-hero p{
  color:#d6d3df;
}

.dark-page-hero .eyebrow{
  color:#75e0e6;
}


/* ABOUT */

.two-card-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}

.statement-card{
  border-radius:24px;
  padding:44px;
  background:#f4f7f8;
  border:1px solid var(--line);
  min-height:350px;
}

.statement-card.dark{
  background:var(--ink);
  color:#fff;
}

.statement-card>span{
  display:block;
  color:var(--teal);
  font-weight:900;
}

.statement-card h2{
  font-size:2.2rem;
  margin:40px 0 15px;
}

.statement-card p{
  color:#666a79;
  font-size:1.02rem;
}

.statement-card.dark p{
  color:#d2cfdb;
}

.values-section{
  background:#fafafa;
}

.values-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

.value-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:30px;
  min-height:170px;
}

.value-card b{
  color:var(--teal);
  font-size:.8rem;
}

.value-card h3{
  font-size:1.45rem;
  margin-top:45px;
}

.profile-download{
  padding-top:0;
}

.profile-download-inner{
  border:1px solid var(--line);
  border-radius:24px;
  padding:32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.profile-download-inner h2{
  margin:10px 0 0;
}


/* SERVICES LIST */

.service-list-grid{
  display:grid;
  gap:28px;
}

.service-feature{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  min-height:410px;
  border:1px solid var(--line);
  border-radius:26px;
  overflow:hidden;
  background:#fff;
}

.service-feature:nth-child(even){
  grid-template-columns:1.1fr .9fr;
}

.service-feature:nth-child(even) .service-feature-image{
  order:2;
}

.service-feature-image{
  min-height:400px;
  background:#eceff1;
}

.service-feature-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.service-feature-copy{
  padding:50px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
}

.service-number{
  position:absolute;
  right:34px;
  top:28px;
  color:#b0b1ba;
  font-weight:900;
  font-size:.8rem;
}

.rtl .service-number{
  right:auto;
  left:34px;
}

.service-feature-copy h2{
  font-size:2.2rem;
  line-height:1.05;
  margin:25px 0 14px;
}

.service-feature-copy p{
  color:var(--muted);
}

.service-actions{
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:18px;
}


/* SERVICE DETAIL */

.service-detail-hero{
  padding:90px 0;
  background:linear-gradient(
    150deg,
    #f7f9fa,
    #fff
  );
}

.service-detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
}

.service-detail-grid h1{
  font-size:clamp(3rem,5vw,5rem);
  line-height:.98;
  margin:20px 0;
  letter-spacing:-.04em;
}

.rtl .service-detail-grid h1{
  letter-spacing:0;
}

.service-detail-grid p{
  color:var(--muted);
  font-size:1.08rem;
}

.service-detail-image{
  height:520px;
  border-radius:28px;
  overflow:hidden;
  box-shadow:var(--shadow);
}

.service-detail-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.brief-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.brief-grid>div{
  background:#f7f8fa;
  border-radius:18px;
  padding:28px;
}

.brief-grid b{
  color:var(--yellow);
}

.brief-grid h3{
  margin:30px 0 8px;
}

.brief-grid p{
  color:var(--muted);
  font-size:.9rem;
}


/* PORTFOLIO */

.portfolio-page-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

.portfolio-page-card{
  border:1px solid var(--line);
  border-radius:24px;
  overflow:hidden;
  background:#fff;
}

.portfolio-page-image{
  height:360px;
  overflow:hidden;
}

.portfolio-page-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s;
}

.portfolio-page-card:hover img{
  transform:scale(1.04);
}

.portfolio-page-copy{
  padding:28px;
}

.portfolio-page-copy>span{
  color:var(--teal-dark);
  font-weight:800;
  font-size:.8rem;
  text-transform:uppercase;
}

.portfolio-page-copy h2{
  margin:8px 0;
}

.portfolio-page-copy p{
  color:var(--muted);
}


/* FORMS */

.quote-page{
  padding:90px 0;
  background:linear-gradient(
    135deg,
    #f7f9fa,
    #fff
  );
}

.quote-grid{
  display:grid;
  grid-template-columns:.76fr 1.24fr;
  gap:70px;
  align-items:start;
}

.quote-copy{
  position:sticky;
  top:130px;
}

.quote-copy h1{
  font-size:clamp(3rem,5vw,5rem);
  line-height:.98;
  margin:18px 0;
}

.quote-copy>p{
  color:var(--muted);
  font-size:1.08rem;
}

.quote-side-card{
  margin-top:40px;
  background:var(--ink);
  color:#fff;
  border-radius:20px;
  padding:28px;
}

.quote-side-card h3{
  margin-top:0;
}

.quote-side-card p{
  color:#d4d2dc;
}

.form-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:26px;
  padding:34px;
  box-shadow:0 22px 65px rgba(39,35,61,.08);
}

.form-row{
  display:grid;
  gap:18px;
}

.form-row.two{
  grid-template-columns:1fr 1fr;
}

.form-card label{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-weight:750;
  font-size:.9rem;
  margin-bottom:18px;
}

.form-card input,
.form-card textarea,
.form-card select{
  width:100%;
  border:1px solid #dcdfe6;
  border-radius:12px;
  padding:13px 14px;
  background:#fbfcfd;
  color:var(--ink);
  outline:0;
  transition:.2s;
}

.form-card input:focus,
.form-card textarea:focus,
.form-card select:focus{
  border-color:var(--teal);
  box-shadow:0 0 0 4px rgba(34,184,199,.1);
  background:#fff;
}

.form-card textarea{
  resize:vertical;
}

.form-card small{
  font-weight:500;
  color:#9294a0;
}

.flash-wrap{
  position:relative;
  z-index:1100;
}

.flash{
  margin:16px 0;
  padding:13px 16px;
  border-radius:12px;
  font-weight:750;
}

.flash.success{
  background:#e9f9f3;
  color:#146348;
  border:1px solid #c8eadc;
}

.flash.error{
  background:#fff0f0;
  color:#8a2e2e;
  border:1px solid #f1cece;
}


/* CONTACT */

.contact-grid{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:50px;
}

.contact-details{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  align-content:start;
}

.contact-card,
.qr-card{
  border:1px solid var(--line);
  border-radius:20px;
  padding:24px;
  background:#fff;
  min-height:150px;
}

.contact-card span{
  display:block;
  color:var(--teal-dark);
  font-size:.78rem;
  text-transform:uppercase;
  font-weight:850;
  margin-bottom:14px;
}

.contact-card a{
  display:block;
  font-size:1.08rem;
  font-weight:800;
  margin:5px 0;
}

.contact-card p{
  margin:0;
  color:var(--muted);
}

.qr-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.qr-card img{
  width:110px;
}

.qr-card p{
  margin:8px 0 0;
  font-weight:800;
}


/* FOOTER */

.site-footer{
  background:#201d31;
  color:#d5d2dd;
  padding:75px 0 25px;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.5fr .7fr 1fr 1.2fr;
  gap:45px;
}

.footer-grid>div{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.footer-logo{
  width:190px;
  background:#fff;
  padding:9px 12px;
  border-radius:12px;
  margin-bottom:17px;
}

.footer-grid p{
  color:#aaa7b5;
}

.footer-grid h3{
  color:#fff;
  margin-top:0;
}

.footer-grid a,
.footer-grid span{
  margin:5px 0;
}

.footer-grid a:hover{
  color:#77e0e6;
}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  margin-top:55px;
  padding-top:22px;
  display:flex;
  justify-content:space-between;
  gap:25px;
  font-size:.82rem;
  color:#918e9c;
}

.social-row{
  display:flex!important;
  flex-direction:row!important;
  gap:14px;
}

.whatsapp-fab{
  position:fixed;
  right:22px;
  bottom:24px;
  width:54px;
  height:54px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#25d366;
  color:#073a1b;
  font-weight:900;
  box-shadow:0 12px 30px rgba(0,0,0,.2);
  z-index:920;
}

.rtl .whatsapp-fab{
  right:auto;
  left:22px;
}

.mobile-actions{
  display:none;
}


/* REVEAL */

.reveal{
  opacity:1;
  transform:none;
}

.js .reveal{
  opacity:0;
  transform:translateY(18px);
  transition:
    opacity .6s ease,
    transform .6s ease;
}

.js .reveal.visible{
  opacity:1;
  transform:none;
}


/* TABLET LARGE */

@media (max-width:1050px){

  .main-nav{
    gap:16px;
  }

  .main-nav a{
    font-size:.88rem;
  }

  .nav-cta{
    padding:10px 15px;
  }

  .hero-grid{
    grid-template-columns:1fr 1fr;
    gap:30px;
  }

  .hero-copy h1{
    font-size:clamp(2.3rem,3.7vw,3rem);
  }

  .rtl .hero-copy h1{
    font-size:clamp(1.95rem,3.1vw,2.55rem);
  }

  .hero-visual{
    min-height:510px;
  }

  .service-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .process-grid,
  .brief-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .footer-grid{
    grid-template-columns:1.3fr 1fr 1fr;
  }

  .footer-cta{
    grid-column:1/-1;
  }

}


/* TABLET */

@media (max-width:850px){

  :root{
    --container:min(100% - 28px, 760px);
  }

  .topbar{
    display:none;
  }

  .nav-wrap{
    height:72px;
  }

  .brand img{
    width:164px;
  }

  .nav-toggle{
    display:block;
    z-index:1002;
  }

  .main-nav{
    position:fixed;
    inset:72px 0 auto;
    background:#fff;
    border-bottom:1px solid var(--line);
    padding:22px 20px 28px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:3px;
    box-shadow:0 20px 50px rgba(39,35,61,.15);
  }

  .main-nav.open{
    display:flex;
  }

  .main-nav>a:not(.btn){
    padding:12px 8px;
  }

  .main-nav>a:not(.btn):after{
    bottom:5px;
  }

  .nav-cta{
    margin-top:10px;
  }

  .hero{
    min-height:auto;
  }

  .hero-grid{
    grid-template-columns:1fr;
    padding:70px 0 50px;
  }

  .hero-copy h1{
    font-size:clamp(2.35rem,7vw,3.1rem);
    line-height:1.15;
    white-space:normal;
  }

  .rtl .hero-copy h1{
    font-size:clamp(2rem,6vw,2.6rem);
    line-height:1.4;
    white-space:normal;
  }

  .hero-visual{
    min-height:530px;
    max-width:600px;
    width:100%;
    margin:auto;
  }

  .main-card{
    height:470px;
  }

  .section{
    padding:75px 0;
  }

  .split-grid,
  .page-hero-grid,
  .service-detail-grid,
  .quote-grid,
  .contact-grid{
    grid-template-columns:1fr;
    gap:40px;
  }

  .page-hero-art{
    max-width:620px;
  }

  .quote-copy{
    position:static;
  }

  .service-feature,
  .service-feature:nth-child(even){
    grid-template-columns:1fr;
  }

  .service-feature:nth-child(even) .service-feature-image{
    order:0;
  }

  .service-feature-image{
    min-height:330px;
  }

  .portfolio-page-grid{
    grid-template-columns:1fr;
  }

  .footer-grid{
    grid-template-columns:1fr 1fr;
  }

  .cta-band-inner{
    align-items:flex-start;
    flex-direction:column;
  }

  .cta-actions{
    justify-content:flex-start;
  }

}


/* MOBILE */

@media (max-width:600px){

  body{
    padding-bottom:58px;
  }

  .hero-grid{
    padding-top:55px;
  }

  .hero-copy h1{
    font-size:2.25rem;
    line-height:1.17;
    white-space:normal;
  }

  .rtl .hero-copy h1{
    font-size:1.85rem;
    line-height:1.45;
    white-space:normal;
  }

  .hero-copy>p{
    font-size:1.04rem;
  }

  .hero-trust{
    gap:14px;
    justify-content:space-between;
  }

  .hero-trust strong{
    font-size:.95rem;
  }

  .hero-trust span{
    font-size:.69rem;
  }

  .hero-visual{
    min-height:420px;
  }

  .main-card{
    width:78%;
    height:365px;
    right:2%;
  }

  .rtl .main-card{
    right:auto;
    left:2%;
  }

  .floating-card{
    height:160px;
    width:43%;
  }

  .card-a{
    top:35px;
  }

  .card-b{
    bottom:12px;
  }

  .badge-orbit{
    font-size:.65rem;
    padding:8px 11px;
  }

  .trust-strip-inner{
    justify-content:flex-start;
    gap:30px;
  }

  .section-top{
    align-items:flex-start;
    flex-direction:column;
  }

  .service-grid{
    grid-template-columns:1fr;
  }

  .portfolio-grid{
    grid-template-columns:1fr;
    grid-auto-rows:300px;
  }

  .portfolio-card:nth-child(3),
  .portfolio-card:nth-child(4){
    grid-column:auto;
  }

  .process-grid,
  .brief-grid,
  .values-grid,
  .two-card-grid{
    grid-template-columns:1fr;
  }

  .section-heading h2,
  .section-top h2{
    font-size:2.3rem;
  }

  .page-hero{
    padding:65px 0;
  }

  .page-hero h1{
    font-size:3.1rem;
  }

  .service-feature-copy{
    padding:34px 24px;
  }

  .service-feature-copy h2{
    font-size:1.9rem;
  }

  .service-actions{
    align-items:flex-start;
    flex-direction:column;
  }

  .service-detail-image{
    height:350px;
  }

  .form-card{
    padding:24px 18px;
  }

  .form-row.two{
    grid-template-columns:1fr;
  }

  .contact-details{
    grid-template-columns:1fr;
  }

  .footer-grid{
    grid-template-columns:1fr;
  }

  .footer-bottom{
    flex-direction:column;
  }

  .whatsapp-fab{
    display:none;
  }

  .mobile-actions{
    position:fixed;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    left:0;
    right:0;
    bottom:0;
    z-index:1200;
    height:58px;
    background:#fff;
    border-top:1px solid var(--line);
    box-shadow:0 -10px 30px rgba(39,35,61,.09);
  }

  .mobile-actions a{
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:850;
    font-size:.86rem;
    border-right:1px solid var(--line);
  }

  .rtl .mobile-actions a{
    border-right:0;
    border-left:1px solid var(--line);
  }

  .mobile-actions a:nth-child(2){
    background:#25d366;
    color:#0b3d20;
  }

  .mobile-actions a:nth-child(3){
    background:var(--ink);
    color:#fff;
  }

  .profile-download-inner{
    align-items:flex-start;
    flex-direction:column;
  }

}


/* LIVE CLIENTS */

.live-client-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:14px;
}

.live-client-logo{
  height:115px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}

.live-client-logo img{
  max-width:100%;
  max-height:72px;
  object-fit:contain;
}

.live-client-logo span{
  text-align:center;
  font-weight:800;
  color:#666b77;
}

@media(max-width:850px){

  .live-client-grid{
    grid-template-columns:repeat(3,1fr);
  }

}

@media(max-width:600px){

  .live-client-grid{
    grid-template-columns:repeat(2,1fr);
  }

}
/* =========================================================
   FRONT LINE HERO TITLE - FINAL
========================================================= */

/* English desktop */
.hero-copy .hero-main-title{
    display:block !important;
    width:100% !important;
    max-width:none !important;

    margin:18px 0 25px !important;

    font-family:var(--font) !important;
    font-size:48px !important;
    line-height:1.15 !important;
    letter-spacing:-0.03em !important;

    font-weight:400 !important;
    white-space:nowrap !important;
}

.hero-copy .hero-main-title .hero-title-normal{
    font-weight:400 !important;
}

.hero-copy .hero-main-title .hero-title-bold{
    font-weight:800 !important;
}


/* Arabic desktop */
.rtl .hero-copy .hero-main-title{
    font-family:var(--font-ar) !important;
    font-size:38px !important;
    line-height:1.45 !important;
    letter-spacing:0 !important;
    font-weight:400 !important;
    white-space:nowrap !important;
}

.rtl .hero-copy .hero-main-title .hero-title-normal{
    font-weight:400 !important;
}

.rtl .hero-copy .hero-main-title .hero-title-bold{
    font-weight:800 !important;
}


/* Tablet */
@media (max-width:850px){

    .hero-copy .hero-main-title{
        font-size:40px !important;
        line-height:1.2 !important;
        white-space:normal !important;
    }

    .rtl .hero-copy .hero-main-title{
        font-size:32px !important;
        line-height:1.5 !important;
        white-space:normal !important;
    }
}


/* Mobile */
@media (max-width:600px){

    .hero-copy .hero-main-title{
        font-size:32px !important;
        line-height:1.22 !important;
        white-space:normal !important;
    }

    .rtl .hero-copy .hero-main-title{
        font-size:27px !important;
        line-height:1.55 !important;
        white-space:normal !important;
    }
}
/* =========================================================
   FULL WIDTH HEADER / REMOVE LARGE SIDE SPACE
========================================================= */

/* Desktop */
.site-header .container,
.topbar .container{
    width:calc(100% - 48px) !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

.site-header .nav-wrap{
    width:calc(100% - 48px) !important;
    max-width:none !important;
    margin-inline:auto !important;
}

/* Keep logo and navigation balanced */
.site-header .brand{
    flex-shrink:0;
}

.site-header .main-nav{
    margin-left:auto;
}

.rtl .site-header .main-nav{
    margin-left:0;
    margin-right:auto;
}


/* Tablet */
@media (max-width:850px){

    .site-header .container,
    .topbar .container,
    .site-header .nav-wrap{
        width:calc(100% - 28px) !important;
    }

}


/* Mobile */
@media (max-width:600px){

    .site-header .container,
    .topbar .container,
    .site-header .nav-wrap{
        width:calc(100% - 20px) !important;
    }

}
/* =========================================================
   FRONT LINE - UNIFIED BRAND COLOR
   Main brand color: #2CB0BF
========================================================= */

:root{
    --teal:#2CB0BF;
    --teal-dark:#2498A5;

    /* remove yellow as a secondary accent */
    --yellow:#2CB0BF;
}


/* =========================================================
   PRIMARY BUTTONS
   Get a Quote / Request a Quote / Submit etc.
========================================================= */

.btn-primary{
    background:#2CB0BF !important;
    color:#10272c !important;

    border-color:#2CB0BF !important;

    box-shadow:
        0 12px 30px rgba(44,176,191,.25) !important;
}

.btn-primary:hover{
    background:#2498A5 !important;
    border-color:#2498A5 !important;

    box-shadow:
        0 16px 38px rgba(44,176,191,.32) !important;
}


/* =========================================================
   SECTION LABELS + SMALL LINES
========================================================= */

.eyebrow{
    color:#2CB0BF !important;
}

.eyebrow:before{
    background:#2CB0BF !important;
}


/* Eyebrows inside dark sections */

.hero .eyebrow,
.section-top.light .eyebrow,
.cta-band .eyebrow,
.dark-page-hero .eyebrow{
    color:#2CB0BF !important;
}


/* =========================================================
   NAVIGATION
========================================================= */

.main-nav > a:not(.btn):after{
    background:#2CB0BF !important;
}

.lang-switch{
    color:#2CB0BF !important;
}


/* =========================================================
   TEXT LINKS
========================================================= */

.text-link{
    color:#2CB0BF !important;
}


/* =========================================================
   SERVICE CARDS
========================================================= */

.service-card:hover{
    border-color:rgba(44,176,191,.45) !important;
}

.service-card:after{
    background:rgba(44,176,191,.08) !important;
}

.service-icon{
    background:rgba(44,176,191,.12) !important;
    color:#2CB0BF !important;
}


/* =========================================================
   PORTFOLIO
========================================================= */

.portfolio-overlay span{
    color:#2CB0BF !important;
}

.portfolio-page-copy > span{
    color:#2CB0BF !important;
}


/* =========================================================
   PROCESS
========================================================= */

.process-step{
    border-top-color:#2CB0BF !important;
}

.process-step b,
.brief-grid b{
    color:#2CB0BF !important;
}


/* =========================================================
   HERO DECORATIVE ELEMENTS
========================================================= */

.hero-glow-one,
.hero-glow-two{
    background:#2CB0BF !important;
}

.badge-orbit{
    background:#2CB0BF !important;
    color:#10272c !important;

    box-shadow:
        0 12px 25px rgba(44,176,191,.22) !important;
}


/* =========================================================
   ABOUT / VALUES
========================================================= */

.statement-card > span,
.value-card b{
    color:#2CB0BF !important;
}


/* =========================================================
   CONTACT
========================================================= */

.contact-card span{
    color:#2CB0BF !important;
}


/* =========================================================
   FORM FOCUS
========================================================= */

.form-card input:focus,
.form-card textarea:focus,
.form-card select:focus{
    border-color:#2CB0BF !important;

    box-shadow:
        0 0 0 4px rgba(44,176,191,.10) !important;
}


/* =========================================================
   FOOTER LINKS
========================================================= */

.footer-grid a:hover{
    color:#2CB0BF !important;
}


/* =========================================================
   TRUST STRIP
========================================================= */

.trust-strip-inner span:before{
    color:#2CB0BF !important;
}
/* =========================================================
   CMS RICH TEXT ON PUBLIC WEBSITE
========================================================= */

.rich-copy{
    color:inherit;
    line-height:1.85;
}

.rich-copy p{
    margin:0 0 14px;
}

.rich-copy p:last-child{
    margin-bottom:0;
}

.rich-copy ul,
.rich-copy ol{
    padding-inline-start:28px;
    margin:14px 0;
}

.rich-copy blockquote{
    margin:16px 0;
    padding:10px 18px;

    border-inline-start:
        3px solid #2CB0BF;

    background:
        rgba(44,176,191,.06);
}

.rich-copy a{
    color:#2CB0BF;
    text-decoration:underline;
}

.rich-copy h2{
    font-size:1.7rem;
    line-height:1.25;
    margin:20px 0 10px;
}

.rich-copy h3{
    font-size:1.35rem;
    line-height:1.3;
    margin:18px 0 8px;
}


/* =========================================================
   FRONT LINE HERO IMAGE - FINAL
   Compatible with index.php using --hero-bg
   - One Hero image only
   - No tilt
   - No caption / badge / floating images
   - No crop
   - No stretch
   - Original image proportions preserved
   - Frame always looks full using the same image as blurred background
   - Responsive for desktop, tablet and mobile
========================================================= */


/* ---------------------------------------------------------
   REMOVE OLD HERO DECORATIONS
--------------------------------------------------------- */

.hero .visual-caption,
.hero .badge-orbit,
.hero .floating-card,
.hero .card-a,
.hero .card-b {
    display:none !important;
}


/* ---------------------------------------------------------
   HERO VISUAL WRAPPER
--------------------------------------------------------- */

.hero .hero-visual,
.hero .hero-visual-single {
    position:relative !important;

    width:100% !important;
    height:auto !important;
    min-height:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;
}


/* ---------------------------------------------------------
   MAIN CARD
   Completely overrides the original tilted absolute card
--------------------------------------------------------- */

.hero .main-card,
.hero .clean-main-card,
.hero-visual .main-card,
.hero-visual-single .main-card {
    position:relative !important;

    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    width:100% !important;
    max-width:560px !important;

    height:auto !important;
    min-height:0 !important;

    margin:0 auto !important;

    transform:none !important;
    rotate:0deg !important;

    background:transparent !important;

    border:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;

    overflow:visible !important;
}


/* Arabic should remain straight too */
.rtl .hero .main-card,
.rtl .hero .clean-main-card {
    right:auto !important;
    left:auto !important;

    transform:none !important;
    rotate:0deg !important;
}


/* ---------------------------------------------------------
   UNIVERSAL FRAME
--------------------------------------------------------- */

.hero .hero-frame {
    position:relative !important;

    width:100% !important;

    /* Professional desktop frame shape */
    aspect-ratio:5 / 4 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    padding:9px !important;

    overflow:hidden !important;

    border-radius:30px !important;

    background:#1f1c30 !important;

    border:1px solid rgba(44,176,191,.45) !important;

    box-shadow:
        0 28px 70px rgba(0,0,0,.28),
        0 10px 28px rgba(44,176,191,.10) !important;

    transform:none !important;
    rotate:0deg !important;

    isolation:isolate;
}


/* ---------------------------------------------------------
   SAME IMAGE AS BLURRED BACKGROUND
   This fills the full frame without cropping the real image.
--------------------------------------------------------- */

.hero .hero-frame::before {
    content:"";

    position:absolute;

    inset:-28px;

    z-index:0;

    background-image:var(--hero-bg) !important;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;

    filter:
        blur(30px)
        brightness(.62)
        saturate(1.08);

    transform:scale(1.12);

    opacity:.88;

    pointer-events:none;
}


/* Soft overlay for consistency with the website palette */
.hero .hero-frame::after {
    content:"";

    position:absolute;
    inset:0;

    z-index:1;

    background:
        linear-gradient(
            135deg,
            rgba(36,32,55,.18),
            rgba(44,176,191,.07)
        );

    pointer-events:none;
}


/* ---------------------------------------------------------
   REAL IMAGE
   Full image visible, no crop, no distortion.
--------------------------------------------------------- */

.hero .hero-frame > img {
    position:relative !important;

    z-index:2 !important;

    display:block !important;

    width:100% !important;
    height:100% !important;

    max-width:100% !important;
    max-height:100% !important;

    margin:0 auto !important;
    padding:0 !important;

    object-fit:contain !important;
    object-position:center center !important;

    aspect-ratio:auto !important;

    background:transparent !important;

    border:0 !important;
    border-radius:20px !important;

    box-shadow:
        0 12px 34px rgba(0,0,0,.22) !important;

    transform:none !important;
    rotate:0deg !important;
}


/* ---------------------------------------------------------
   DESKTOP
--------------------------------------------------------- */

@media (min-width:992px) {

    .hero .hero-visual,
    .hero .hero-visual-single {
        min-height:0 !important;
    }

    .hero .main-card,
    .hero .clean-main-card {
        max-width:560px !important;
    }

    .hero .hero-frame {
        aspect-ratio:5 / 4 !important;
    }

}


/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media (max-width:991px) {

    .hero .hero-visual,
    .hero .hero-visual-single {
        width:100% !important;

        min-height:0 !important;

        margin:0 auto !important;
    }

    .hero .main-card,
    .hero .clean-main-card {
        width:100% !important;
        max-width:500px !important;

        height:auto !important;

        margin:0 auto !important;
    }

    .hero .hero-frame {
        aspect-ratio:5 / 4 !important;

        padding:8px !important;

        border-radius:26px !important;
    }

    .hero .hero-frame > img {
        border-radius:18px !important;
    }

}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width:767px) {

    .hero {
        min-height:auto !important;

        padding-top:0 !important;
        padding-bottom:0 !important;
    }

    .hero .hero-grid {
        display:flex !important;
        flex-direction:column !important;

        width:100% !important;

        gap:34px !important;

        padding-top:52px !important;
        padding-bottom:48px !important;
    }

    .hero .hero-copy {
        width:100% !important;
    }

    .hero .hero-visual,
    .hero .hero-visual-single {
        width:100% !important;

        height:auto !important;
        min-height:0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        margin:0 auto !important;
        padding:0 !important;
    }

    .hero .main-card,
    .hero .clean-main-card {
        position:relative !important;

        width:min(90vw, 390px) !important;
        max-width:390px !important;

        height:auto !important;
        min-height:0 !important;

        margin:0 auto !important;

        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;

        transform:none !important;
        rotate:0deg !important;
    }

    /*
       Taller mobile frame gives portrait images a better presentation,
       while the real image still remains uncropped.
    */
    .hero .hero-frame {
        width:100% !important;

        aspect-ratio:4 / 5 !important;

        padding:7px !important;

        border-radius:24px !important;

        border:1px solid rgba(44,176,191,.42) !important;

        box-shadow:
            0 18px 44px rgba(0,0,0,.22),
            0 6px 18px rgba(44,176,191,.08) !important;
    }

    .hero .hero-frame::before {
        inset:-22px;

        filter:
            blur(26px)
            brightness(.62)
            saturate(1.08);

        transform:scale(1.12);
    }

    .hero .hero-frame > img {
        width:100% !important;
        height:100% !important;

        max-width:100% !important;
        max-height:100% !important;

        object-fit:contain !important;
        object-position:center center !important;

        aspect-ratio:auto !important;

        border-radius:17px !important;
    }

    /* Keep the CTA buttons neat on mobile */
    .hero .hero-actions {
        width:100% !important;

        display:grid !important;
        grid-template-columns:1fr 1fr !important;

        gap:10px !important;

        margin-top:24px !important;
    }

    .hero .hero-actions .btn {
        width:100% !important;

        min-height:50px !important;

        padding:11px 8px !important;

        font-size:13px !important;

        white-space:nowrap !important;
    }

}


/* ---------------------------------------------------------
   SMALL MOBILE
--------------------------------------------------------- */

@media (max-width:480px) {

    .hero .hero-grid {
        gap:30px !important;

        padding-top:42px !important;
        padding-bottom:42px !important;
    }

    .hero .main-card,
    .hero .clean-main-card {
        width:88vw !important;
        max-width:350px !important;
    }

    .hero .hero-frame {
        aspect-ratio:4 / 5 !important;

        padding:6px !important;

        border-radius:22px !important;
    }

    .hero .hero-frame > img {
        border-radius:15px !important;
    }

}
//* =========================================================
   CMS RICH TEXT - JUSTIFIED TEXT
========================================================= */

/* Paragraphs created from Dashboard Rich Text Editor */
.rich-copy p{
    text-align:justify;
    text-justify:inter-word;
}

/* Div blocks created by browser justify command */
.rich-copy div{
    text-align:justify;
    text-justify:inter-word;
}

/* Keep headings normally aligned */
.rich-copy h2,
.rich-copy h3{
    text-align:inherit;
}

/* RTL Arabic content */
body.rtl .rich-copy p,
body.rtl .rich-copy div{
    text-align:justify;
    text-justify:inter-word;
}

/* Mobile readability */
@media(max-width:800px){

    .rich-copy p,
    .rich-copy div{
        text-align:justify;
        text-justify:inter-word;
    }

}
/* =========================================================
   SERVICE CUSTOM ICON
   Uploaded icons always use the same visual dimensions
   as the existing service icons.
========================================================= */

.service-icon {

    width:56px !important;
    height:56px !important;

    min-width:56px !important;
    min-height:56px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    overflow:hidden !important;

    border-radius:16px !important;

}


/* Uploaded image */

.service-icon .service-custom-icon {

    display:block !important;

    width:32px !important;
    height:32px !important;

    max-width:32px !important;
    max-height:32px !important;

    object-fit:contain !important;
    object-position:center !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;

    transform:none !important;
}


/* Keep SVG icons at the same visual size */

.service-icon svg {

    width:28px !important;
    height:28px !important;

    max-width:28px !important;
    max-height:28px !important;

    flex:0 0 28px !important;

}


/* Dashboard preview */

.admin-icon-preview {

    width:56px;
    height:56px;

    margin-top:10px;

    display:flex;

    align-items:center;
    justify-content:center;

    overflow:hidden;

    border-radius:16px;

    background:#eef8f9;

    border:1px solid rgba(44,176,191,.25);
}


.admin-icon-preview img {

    width:32px;
    height:32px;

    max-width:32px;
    max-height:32px;

    object-fit:contain;

    object-position:center;

    display:block;
}