/* ========== Googan Certified Translation Office ========== */
:root{
  --primary:#ed1b2f;
  --primary-dark:#bd1021;
  --ink:#0b0f17;
  --ink-2:#141a24;
  --text:#2b3240;
  --muted:#697181;
  --soft:#f5f6f8;
  --line:#e6e8ec;
  --white:#fff;
  --gold:#c9a75d;
  --shadow:0 18px 55px rgba(9,15,25,.10);
  --radius:18px;
  --container:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Tajawal",Arial,sans-serif;color:var(--text);background:var(--white);line-height:1.75;overflow-x:hidden}
body.nav-open{overflow:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
.container{width:min(var(--container),calc(100% - 40px));margin-inline:auto}
.skip-link{position:fixed;top:-100px;right:20px;background:var(--primary);color:#fff;padding:10px 18px;z-index:9999;border-radius:8px}.skip-link:focus{top:15px}
.topbar{background:var(--ink);color:#dfe3ea;font-size:13px}
.topbar__inner{min-height:38px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.topbar__contact,.topbar__social{display:flex;align-items:center;gap:18px}.topbar a:hover{color:#fff}.topbar i{color:var(--primary);margin-left:7px}
.topbar__social a{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.06)}.topbar__social i{margin:0;color:#fff}
.navbar{background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1500;backdrop-filter:blur(14px);box-shadow:0 8px 24px rgba(9,15,25,.06)}
.navbar__inner{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;min-width:260px}.brand img{width:58px;height:58px;object-fit:contain}.brand span{display:flex;flex-direction:column;line-height:1.35}.brand strong{font-size:14px;color:var(--ink)}.brand small{font-size:10px;color:var(--muted);direction:ltr;text-align:right}
.nav-panel{display:flex;align-items:center;justify-content:flex-end;gap:24px;flex:1}.nav-links{list-style:none;padding:0;margin:0;display:flex;align-items:center;gap:4px}.nav-links a{padding:29px 10px 25px;font-size:14px;font-weight:700;position:relative;white-space:nowrap}.nav-links a:after{content:"";position:absolute;bottom:18px;right:10px;left:10px;height:2px;background:var(--primary);transform:scaleX(0);transition:.3s}.nav-links a:hover,.nav-links a.active{color:var(--primary)}.nav-links a:hover:after,.nav-links a.active:after{transform:scaleX(1)}
.nav-actions{display:flex;align-items:center;gap:8px}.icon-btn{border:1px solid var(--line);background:#fff;height:40px;min-width:40px;border-radius:10px;color:var(--ink);display:flex;align-items:center;justify-content:center;gap:6px}.language-btn span{font-size:11px;font-weight:800}
.nav-toggle{display:none;border:0;background:none;padding:8px}.nav-toggle span{display:block;width:26px;height:2px;background:var(--ink);margin:5px;border-radius:2px}
.btn{border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:11px;padding:13px 22px;font-weight:800;transition:.25s}.btn:hover{transform:translateY(-2px)}
.btn--primary{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;box-shadow:0 12px 28px rgba(237,27,47,.22)}.btn--ghost{border-color:rgba(255,255,255,.35);color:#fff;background:rgba(255,255,255,.04)}.btn--outline{border-color:var(--primary);color:var(--primary);background:#fff}.btn--sm{padding:10px 15px;font-size:13px}
.hero{min-height:720px;padding:105px 0 0;background:var(--ink) url("../assets/images/hero-bg.svg") center/cover no-repeat;color:#fff;position:relative;overflow:hidden}.hero:after{content:"";position:absolute;inset:auto 0 0;height:140px;background:linear-gradient(transparent,rgba(0,0,0,.24))}
.hero__content{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:70px;position:relative;z-index:2}.hero__copy{max-width:670px}.eyebrow,.section-kicker{display:inline-flex;align-items:center;gap:8px;color:var(--primary);font-size:14px;font-weight:800;letter-spacing:.2px}.hero h1{font-size:clamp(42px,5vw,72px);line-height:1.25;margin:17px 0 20px;font-weight:900}.hero h1 em{font-style:normal;color:var(--primary)}.hero p{font-size:19px;color:#cdd3dc;max-width:650px;margin:0}.hero__actions{display:flex;gap:13px;margin-top:32px}.hero__trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:28px;color:#cdd3dc;font-size:14px}.hero__trust i{color:var(--primary);margin-left:6px}
.hero__visual{min-height:440px;position:relative;display:grid;place-items:center}.visual-card--main{width:250px;height:250px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.16);box-shadow:0 35px 80px rgba(0,0,0,.4);backdrop-filter:blur(15px);position:relative;z-index:3}.visual-card__icon{width:74px;height:74px;border-radius:20px;background:var(--primary);display:grid;place-items:center;font-size:33px;margin-bottom:14px;box-shadow:0 16px 30px rgba(237,27,47,.3)}.visual-card strong{font-size:24px}.visual-card span{font-size:13px;color:#cbd1da}.orbit{position:absolute;border:1px solid rgba(237,27,47,.38);border-radius:50%;animation:spin 18s linear infinite}.orbit:after{content:"";position:absolute;width:10px;height:10px;background:var(--primary);border-radius:50%;top:17px;left:50%}.orbit--one{width:340px;height:340px}.orbit--two{width:430px;height:430px;border-color:rgba(255,255,255,.1);animation-direction:reverse;animation-duration:28s}.floating-badge{position:absolute;z-index:4;background:rgba(11,15,23,.85);border:1px solid rgba(255,255,255,.13);padding:10px 14px;border-radius:12px;font-size:13px;box-shadow:0 14px 35px rgba(0,0,0,.3);backdrop-filter:blur(10px)}.floating-badge i{color:var(--primary);margin-left:7px}.floating-badge--one{top:50px;right:5px}.floating-badge--two{left:-5px;top:190px}.floating-badge--three{bottom:45px;right:35px}
@keyframes spin{to{transform:rotate(360deg)}}
.stats-card{position:relative;z-index:5;margin-top:85px;transform:translateY(50%);display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));background:linear-gradient(120deg,#121821,#0b0f17);border:1px solid rgba(255,255,255,.09);box-shadow:var(--shadow);border-radius:16px;overflow:hidden}.stats-card article{padding:24px 18px;text-align:center;border-left:1px solid rgba(255,255,255,.09)}.stats-card article:last-child{border:0}.stats-card strong{display:block;color:#fff;font-size:25px}.stats-card span{color:#9da6b3;font-size:12px}
.section{padding:105px 0}.section--muted{background:var(--soft)}.section-heading{text-align:center;max-width:720px;margin:0 auto 48px}.section-heading h2,.section-copy h2{font-size:clamp(29px,3vw,43px);line-height:1.35;color:var(--ink);margin:7px 0 13px}.section-heading p,.section-copy p{color:var(--muted);margin:0}.section-heading--light h2,.section-heading--light p{color:#fff}.section-heading--right{text-align:right;margin:0 0 30px}
.split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:70px}.split--reverse .section-copy{order:2}.about{padding-top:145px}.about__media{min-height:440px;border-radius:28px;background:linear-gradient(145deg,#f1f2f5,#fff);position:relative;display:grid;place-items:center;overflow:hidden;box-shadow:var(--shadow)}.about__media:before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(237,27,47,.08);top:-130px;left:-90px}.office-card{width:72%;padding:45px 30px;background:#fff;border-radius:22px;box-shadow:0 20px 60px rgba(10,16,25,.12);display:flex;align-items:center;gap:18px;position:relative;z-index:2}.office-card img{width:92px}.office-card div{display:flex;flex-direction:column}.office-card strong{font-size:25px;color:var(--ink)}.office-card span{color:var(--muted)}.experience-badge{position:absolute;bottom:24px;left:24px;background:var(--ink);color:#fff;border-radius:16px;padding:15px 22px;text-align:center}.experience-badge strong{display:block;color:var(--primary);font-size:26px}.experience-badge span{font-size:12px}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:28px 0}.feature-grid article{display:flex;align-items:center;gap:12px;padding:15px;border:1px solid var(--line);border-radius:13px;background:#fff}.feature-grid i{width:42px;height:42px;border-radius:11px;background:rgba(237,27,47,.08);color:var(--primary);display:grid;place-items:center}.feature-grid div{display:flex;flex-direction:column}.feature-grid strong{color:var(--ink);font-size:14px}.feature-grid span{color:var(--muted);font-size:12px}.text-link{font-weight:800;color:var(--primary)}.text-link i{margin-right:8px}
.services-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.service-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 20px;transition:.3s;position:relative;overflow:hidden}.service-card:before{content:"";position:absolute;right:0;top:0;width:4px;height:0;background:var(--primary);transition:.3s}.service-card:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:transparent}.service-card:hover:before{height:100%}.service-card>i{font-size:27px;color:var(--primary);margin-bottom:17px}.service-card h3{font-size:17px;color:var(--ink);margin:0 0 8px}.service-card p{font-size:13px;color:var(--muted);margin:0 0 15px}.service-card a{font-size:12px;color:var(--primary);font-weight:800}
.accreditation,.process{padding:80px 0;background:linear-gradient(135deg,#111722,#080b10);color:#fff}.logo-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.logo-strip div{min-height:115px;background:#fff;color:var(--ink);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}.logo-strip i{font-size:30px;color:#0f7b55}.logo-strip span{font-weight:800;font-size:14px}
.why-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}.why-grid article{text-align:center;padding:28px 15px;border-left:1px solid var(--line)}.why-grid article:last-child{border:0}.why-grid i{font-size:28px;color:var(--primary)}.why-grid h3{color:var(--ink);font-size:16px;margin:13px 0 7px}.why-grid p{color:var(--muted);font-size:13px;margin:0}
.process-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;position:relative}.process-grid:before{content:"";position:absolute;top:30px;right:8%;left:8%;height:1px;background:rgba(255,255,255,.18)}.process-grid article{text-align:center;position:relative;z-index:2}.process-grid article>span{width:58px;height:58px;border-radius:50%;background:#fff;color:var(--primary);font-weight:900;display:grid;place-items:center;margin:0 auto 16px;border:7px solid #202631}.process-grid i{color:var(--primary);font-size:25px}.process-grid h3{font-size:16px;margin:9px 0 3px}.process-grid p{font-size:12px;color:#aeb5c0;margin:0}
.check-list{list-style:none;padding:0;margin:26px 0}.check-list li{padding:10px 0;border-bottom:1px solid var(--line)}.check-list i{width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;background:rgba(237,27,47,.09);color:var(--primary);font-size:12px;margin-left:10px}.quality-panel{min-height:430px;border-radius:26px;background:linear-gradient(135deg,var(--ink),#1a2230);display:grid;place-items:center;position:relative;overflow:hidden}.quality-panel:before{content:"";position:absolute;width:330px;height:330px;border:1px solid rgba(255,255,255,.08);border-radius:50%}.quality-panel__ring{width:220px;height:220px;border-radius:50%;border:18px solid rgba(255,255,255,.08);border-top-color:var(--primary);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;position:relative;z-index:2}.quality-panel__ring span{font-size:45px;font-weight:900}.quality-panel__ring small{color:#b8c0cc}.quality-panel__logo{position:absolute;bottom:22px;left:22px;background:#fff;border-radius:12px;padding:8px}.quality-panel__logo img{width:45px}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}.pricing-grid article{background:#fff;border:1px solid var(--line);padding:34px;border-radius:18px;box-shadow:0 8px 30px rgba(10,16,25,.05)}.pricing-grid article.featured{background:var(--ink);color:#fff;transform:translateY(-10px);border-top:4px solid var(--primary)}.plan-label{display:inline-block;background:rgba(237,27,47,.09);color:var(--primary);padding:5px 11px;border-radius:30px;font-size:12px;font-weight:800}.pricing-grid h3{font-size:24px;margin:14px 0 8px;color:var(--ink)}.pricing-grid .featured h3{color:#fff}.pricing-grid p{color:var(--muted);font-size:14px}.pricing-grid .featured p{color:#aeb5c0}.pricing-grid ul{list-style:none;padding:0;margin:25px 0}.pricing-grid li{padding:7px 0}.pricing-grid li:before{content:"✓";color:var(--primary);font-weight:900;margin-left:8px}.pricing-grid .btn{width:100%}
.metrics{padding:60px 0}.metrics-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.metrics-grid article{border:1px solid var(--line);border-radius:14px;padding:22px;text-align:center}.metrics-grid i{font-size:24px;color:var(--primary)}.metrics-grid strong{display:block;font-size:27px;color:var(--ink);margin-top:6px}.metrics-grid span{font-size:12px;color:var(--muted)}
.two-columns{display:grid;grid-template-columns:1fr 1fr;gap:60px}.accordion-item{border-bottom:1px solid var(--line)}.accordion-item button{width:100%;border:0;background:transparent;padding:16px 0;display:flex;justify-content:space-between;align-items:center;text-align:right;color:var(--ink);font-weight:800}.accordion-item button i{color:var(--primary);transition:.25s}.accordion-content{display:grid;grid-template-rows:0fr;transition:.3s}.accordion-content p{overflow:hidden;margin:0;color:var(--muted);font-size:14px}.accordion-item.open .accordion-content{grid-template-rows:1fr}.accordion-item.open .accordion-content p{padding:0 0 16px}.accordion-item.open button i{transform:rotate(45deg)}
.testimonial-card{background:#fff;border:1px solid var(--line);padding:24px;border-radius:16px;margin-bottom:14px}.stars{color:#f5a623;letter-spacing:3px}.testimonial-card blockquote{margin:10px 0 18px;color:var(--text)}.person{display:flex;align-items:center;gap:10px}.person>span{width:42px;height:42px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center}.person div{display:flex;flex-direction:column}.person small{color:var(--muted)}
.portfolio-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.portfolio-grid article{min-height:210px;border-radius:18px;padding:30px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;background:linear-gradient(160deg,#252e3d,#0c1018);position:relative;overflow:hidden}.portfolio-grid article:after{content:"";position:absolute;width:130px;height:130px;border-radius:50%;background:rgba(237,27,47,.18);top:-50px;left:-35px}.portfolio-grid i{font-size:32px;color:var(--primary);margin-bottom:auto}.portfolio-grid h3{margin:0}.portfolio-grid span{color:#bfc6d0;font-size:13px}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.blog-grid article{background:#fff;border-radius:17px;overflow:hidden;border:1px solid var(--line)}.blog-cover{height:190px;display:grid;place-items:center;background:linear-gradient(145deg,#161d28,#090c12);font-size:52px;color:var(--primary)}.blog-body{padding:22px}.blog-body>span{font-size:12px;color:var(--primary);font-weight:800}.blog-body h3{color:var(--ink);font-size:18px}.blog-body a{color:var(--primary);font-size:13px;font-weight:800}
.partners{padding:80px 0}.partners-row{display:grid;grid-template-columns:repeat(5,1fr);gap:15px}.partners-row div{height:90px;border:1px solid var(--line);border-radius:14px;display:grid;place-items:center;color:#7a8290;font-weight:800;background:#fff}
.quote-section{padding:90px 0;background:linear-gradient(135deg,#101620,#080b10);color:#fff}.quote-box{display:grid;grid-template-columns:.75fr 1.25fr;gap:65px;align-items:start}.quote-box h2{font-size:40px;line-height:1.35;margin:8px 0}.quote-box p{color:#abb3bf}.quote-form{display:grid;grid-template-columns:1fr 1fr;gap:15px;background:#fff;padding:28px;border-radius:20px}.field{display:flex;flex-direction:column;gap:7px}.field--full{grid-column:1/-1}.field label{color:var(--ink);font-size:13px;font-weight:800}.field input,.field textarea,.field select{width:100%;border:1px solid var(--line);background:#fafbfc;border-radius:10px;padding:12px 14px;outline:0;color:var(--ink)}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(237,27,47,.08)}.upload{min-height:75px;border:1px dashed #c9ced6;border-radius:12px;display:flex;align-items:center!important;justify-content:center;gap:10px;color:var(--muted)!important;cursor:pointer}.upload input{display:none}.form-status{color:#16875d;margin:0}
.footer{background:#06080c;color:#c4cad3;padding:75px 0 0}.footer-grid{display:grid;grid-template-columns:1.5fr .8fr .8fr 1fr;gap:45px}.brand--footer{min-width:0}.brand--footer strong{color:#fff}.footer-about p{font-size:14px}.footer-contact{display:flex;flex-direction:column;gap:8px;font-size:13px}.footer-contact i{color:var(--primary);width:20px}.footer h3{color:#fff;font-size:16px;margin-top:0}.footer ul{list-style:none;padding:0;margin:0}.footer li{margin:8px 0}.footer li a{font-size:13px;color:#aeb5bf}.footer li a:hover{color:#fff}.newsletter{display:flex;background:#111722;border:1px solid #252c38;border-radius:10px;overflow:hidden}.newsletter input{flex:1;min-width:0;border:0;background:transparent;color:#fff;padding:12px;outline:0}.newsletter button{width:48px;border:0;background:var(--primary);color:#fff}.vision-logo{width:130px;margin-top:22px;filter:brightness(0) invert(1);opacity:.9}.footer-bottom{border-top:1px solid #202631;margin-top:50px;min-height:70px;display:flex;align-items:center;justify-content:space-between;font-size:12px}.socials{display:flex;gap:8px}.socials a{width:34px;height:34px;border:1px solid #2a303b;border-radius:50%;display:grid;place-items:center}
.whatsapp,.to-top{position:fixed;z-index:900;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;border:0;box-shadow:0 12px 30px rgba(0,0,0,.25)}.whatsapp{left:24px;bottom:24px;background:#25d366;font-size:27px}.to-top{right:24px;bottom:24px;background:var(--primary);opacity:0;visibility:hidden;transform:translateY(20px);transition:.25s}.to-top.show{opacity:1;visibility:visible;transform:none}
.search-modal{position:fixed;inset:0;background:rgba(5,8,12,.94);z-index:2000;display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;transition:.25s}.search-modal.open{opacity:1;visibility:visible}.search-modal form{display:flex;width:min(700px,100%);border-bottom:2px solid #fff}.search-modal input{flex:1;background:none;border:0;color:#fff;font-size:30px;padding:16px;outline:0}.search-modal form button,.search-close{border:0;background:none;color:#fff;font-size:24px}.search-close{position:absolute;top:30px;left:30px}
@media(max-width:1120px){
 .brand{min-width:auto}.brand span{display:none}.nav-links a{padding-inline:7px;font-size:13px}.services-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
 .topbar__contact span{display:none}.navbar__inner{min-height:72px}.nav-toggle{display:block}.nav-panel{position:fixed;top:72px;right:0;left:0;height:calc(100vh - 72px);background:#fff;display:block;padding:25px;transform:translateX(100%);transition:.3s;overflow:auto}.nav-open .nav-panel{transform:none}.nav-links{display:block}.nav-links a{display:block;padding:14px 5px;border-bottom:1px solid var(--line)}.nav-links a:after{display:none}.nav-actions{margin-top:20px}.hero{padding-top:75px}.hero__content{grid-template-columns:1fr;text-align:center}.hero__copy{margin:auto}.hero__actions,.hero__trust{justify-content:center}.hero__visual{display:none}.stats-card{grid-template-columns:repeat(2,1fr);transform:translateY(25%)}.stats-card article:nth-child(5){grid-column:1/-1}.split,.two-columns,.quote-box{grid-template-columns:1fr}.services-grid{grid-template-columns:repeat(2,1fr)}.logo-strip,.why-grid,.process-grid,.metrics-grid,.partners-row{grid-template-columns:repeat(2,1fr)}.process-grid:before{display:none}.pricing-grid,.blog-grid{grid-template-columns:1fr}.pricing-grid article.featured{transform:none}.portfolio-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}.quote-box h2{font-size:33px}
}
@media(max-width:600px){
 .container{width:min(100% - 24px,var(--container))}.topbar__contact a:nth-child(2){display:none}.topbar__social{gap:6px}.brand img{width:50px;height:50px}.hero{min-height:auto;padding-bottom:55px}.hero h1{font-size:38px}.hero p{font-size:16px}.hero__actions{flex-direction:column}.hero__actions .btn{width:100%}.stats-card{position:static;transform:none;margin-top:45px;grid-template-columns:1fr 1fr}.section{padding:75px 0}.about{padding-top:75px}.about__media{min-height:330px}.office-card{width:88%;padding:30px 20px}.office-card img{width:65px}.office-card strong{font-size:19px}.feature-grid,.services-grid,.logo-strip,.why-grid,.process-grid,.metrics-grid,.portfolio-grid,.partners-row{grid-template-columns:1fr}.why-grid article{border-left:0;border-bottom:1px solid var(--line)}.quote-form{grid-template-columns:1fr;padding:19px}.field--full{grid-column:auto}.footer-grid{grid-template-columns:1fr}.footer-bottom{align-items:flex-start;gap:15px;flex-direction:column;padding:20px 0}.whatsapp{left:14px;bottom:14px}.to-top{right:14px;bottom:14px}
}


/* ===== Professional navbar interactions ===== */
.nav-item--dropdown{position:relative}
.nav-dropdown-toggle{
  position:relative;
  display:flex;
  align-items:center;
  gap:7px;
  border:0;
  background:transparent;
  color:var(--text);
  padding:29px 10px 25px;
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
}
.nav-dropdown-toggle::after{
  content:"";
  position:absolute;
  right:10px;
  left:10px;
  bottom:18px;
  height:2px;
  background:var(--primary);
  transform:scaleX(0);
  transition:transform .28s ease;
}
.nav-dropdown-toggle i{
  font-size:10px;
  transition:transform .28s ease,color .28s ease;
}
.nav-item--dropdown:hover .nav-dropdown-toggle,
.nav-item--dropdown:focus-within .nav-dropdown-toggle{
  color:var(--primary);
}
.nav-item--dropdown:hover .nav-dropdown-toggle::after,
.nav-item--dropdown:focus-within .nav-dropdown-toggle::after{
  transform:scaleX(1);
}
.nav-item--dropdown:hover .nav-dropdown-toggle i,
.nav-item--dropdown:focus-within .nav-dropdown-toggle i,
.nav-item--dropdown.is-open .nav-dropdown-toggle i{
  transform:rotate(180deg);
  color:var(--primary);
}

.services-dropdown{
  position:absolute;
  top:calc(100% + 14px);
  right:50%;
  width:min(760px,90vw);
  padding:20px;
  background:rgba(255,255,255,.98);
  border:1px solid rgba(11,15,23,.08);
  border-radius:20px;
  box-shadow:0 28px 70px rgba(8,12,18,.18);
  opacity:0;
  visibility:hidden;
  transform:translate(50%,14px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s ease;
  backdrop-filter:blur(18px);
  z-index:1600;
}
.services-dropdown::before{
  content:"";
  position:absolute;
  top:-8px;
  right:50%;
  width:16px;
  height:16px;
  background:#fff;
  border-top:1px solid rgba(11,15,23,.08);
  border-right:1px solid rgba(11,15,23,.08);
  transform:translateX(50%) rotate(-45deg);
}
.nav-item--dropdown:hover .services-dropdown,
.nav-item--dropdown:focus-within .services-dropdown,
.nav-item--dropdown.is-open .services-dropdown{
  opacity:1;
  visibility:visible;
  transform:translate(50%,0);
}
.services-dropdown__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:2px 4px 16px;
  margin-bottom:14px;
  border-bottom:1px solid var(--line);
}
.services-dropdown__header>div{display:flex;flex-direction:column}
.services-dropdown__header strong{font-size:20px;color:var(--ink)}
.services-dropdown__header a{
  color:var(--primary);
  font-size:13px;
  font-weight:800;
  display:flex;
  align-items:center;
  gap:7px;
}
.services-dropdown__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
.dropdown-service{
  display:flex;
  align-items:center;
  gap:13px;
  min-height:74px;
  padding:12px;
  border:1px solid transparent;
  border-radius:14px;
  background:#fff;
  transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease;
}
.dropdown-service>i{
  flex:0 0 44px;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(237,27,47,.08);
  color:var(--primary);
  font-size:18px;
  transition:transform .22s ease,background .22s ease,color .22s ease;
}
.dropdown-service span{display:flex;flex-direction:column;line-height:1.45}
.dropdown-service strong{font-size:14px;color:var(--ink)}
.dropdown-service small{font-size:11px;color:var(--muted)}
.dropdown-service:hover{
  transform:translateY(-3px);
  border-color:rgba(237,27,47,.14);
  background:#fffafa;
  box-shadow:0 12px 26px rgba(9,15,25,.08);
}
.dropdown-service:hover>i{
  transform:scale(1.08) rotate(-4deg);
  background:var(--primary);
  color:#fff;
}

/* زر اللغة */
.language-btn--interactive{
  position:relative;
  overflow:hidden;
  transition:transform .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease,background .25s ease;
}
.language-btn--interactive::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  transform:scale(0);
  border-radius:inherit;
  transition:transform .28s ease;
  z-index:0;
}
.language-btn--interactive span,
.language-btn--interactive i{
  position:relative;
  z-index:1;
  transition:transform .25s ease,color .25s ease;
}
.language-btn--interactive:hover,
.language-btn--interactive:focus-visible{
  color:#fff;
  border-color:var(--primary);
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(237,27,47,.23);
}
.language-btn--interactive:hover::before,
.language-btn--interactive:focus-visible::before{
  transform:scale(1);
}
.language-btn--interactive:hover i{
  transform:rotate(18deg) scale(1.12);
}
.language-btn--interactive:hover span{
  transform:translateX(-2px);
}

/* تأثيرات أيقونات السوشيال في الشريط العلوي */
.topbar__social a{
  position:relative;
  overflow:hidden;
  transition:transform .25s ease,background .25s ease,box-shadow .25s ease;
}
.topbar__social a::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:var(--primary);
  transform:scale(0);
  transition:transform .25s ease;
}
.topbar__social a i{
  position:relative;
  z-index:1;
  transition:transform .25s ease;
}
.topbar__social a:hover,
.topbar__social a:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(237,27,47,.28);
}
.topbar__social a:hover::before,
.topbar__social a:focus-visible::before{
  transform:scale(1);
}
.topbar__social a:hover i,
.topbar__social a:focus-visible i{
  transform:scale(1.12) rotate(-7deg);
}

/* دعم الجوال */
@media(max-width:900px){
  .nav-item--dropdown{position:static}
  .nav-dropdown-toggle{
    width:100%;
    justify-content:space-between;
    padding:14px 5px;
    border-bottom:1px solid var(--line);
    text-align:right;
  }
  .nav-dropdown-toggle::after{display:none}
  .services-dropdown{
    position:static;
    width:100%;
    max-height:0;
    padding:0 10px;
    border:0;
    border-radius:0;
    box-shadow:none;
    opacity:1;
    visibility:visible;
    transform:none;
    overflow:hidden;
    transition:max-height .35s ease,padding .35s ease;
    background:#fafbfc;
  }
  .services-dropdown::before{display:none}
  .nav-item--dropdown.is-open .services-dropdown{
    max-height:900px;
    padding:15px 10px;
    transform:none;
  }
  .services-dropdown__header{
    align-items:flex-start;
    flex-direction:column;
  }
  .services-dropdown__grid{grid-template-columns:1fr}
}


/* ===== Hero slider updated to match the supplied Saudi design ===== */
.hero{
  min-height:590px;
  padding:72px 0 0;
  color:#fff;
  position:relative;
  overflow:visible;
  background:
    linear-gradient(90deg,
      rgba(6,9,14,.05) 0%,
      rgba(6,9,14,.20) 38%,
      rgba(6,9,14,.88) 61%,
      #070a0f 100%),
    url("../assets/images/hero-riyadh-saudi.jpg") left center / 63% 100% no-repeat,
    #070a0f;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(3,6,10,.08),rgba(3,6,10,.12)),
    radial-gradient(circle at 72% 40%,rgba(237,27,47,.08),transparent 34%);
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:52%;
  height:auto;
  background:linear-gradient(90deg,transparent,#070a0f 82%);
  pointer-events:none;
}
.hero__content{
  min-height:430px;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:54px;
  position:relative;
  z-index:2;
}
.hero__copy{
  grid-column:2;
  max-width:560px;
  margin-right:auto;
  padding-bottom:18px;
}
.hero__visual{
  grid-column:1;
  min-height:400px;
  display:block;
  pointer-events:none;
}
.hero__visual>*{display:none}
.hero .eyebrow{
  font-size:14px;
  color:var(--primary);
  margin-bottom:9px;
}
.hero h1{
  font-size:clamp(39px,4.1vw,61px);
  line-height:1.28;
  margin:8px 0 18px;
  font-weight:900;
  letter-spacing:-1px;
}
.hero h1 em{color:var(--primary)}
.hero p{
  max-width:560px;
  font-size:16px;
  line-height:1.9;
  color:#e0e4ea;
}
.hero__actions{
  display:flex;
  gap:14px;
  margin-top:27px;
}
.hero__actions .btn{
  min-width:155px;
  padding:12px 20px;
}
.hero__trust{display:none}
.stats-card{
  position:relative;
  z-index:8;
  width:min(1100px,calc(100% - 70px));
  margin-top:0;
  transform:translateY(50%);
  display:grid;
  grid-template-columns:repeat(5,1fr);
  color:#fff;
  background:linear-gradient(115deg,rgba(24,30,39,.98),rgba(9,13,19,.98));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 46px rgba(0,0,0,.28);
  border-radius:11px;
  overflow:hidden;
}
.stats-card article{
  min-height:80px;
  padding:14px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
  border-left:1px solid rgba(255,255,255,.09);
}
.stats-card article:last-child{border-left:0}
.stats-card strong{
  display:block;
  color:#fff;
  font-size:22px;
  line-height:1.2;
}
.stats-card span{
  color:#c0c6cf;
  font-size:11px;
  margin-top:4px;
}
.about{padding-top:145px}

@media(max-width:900px){
  .hero{
    min-height:auto;
    padding:70px 0 42px;
    background:
      linear-gradient(180deg,rgba(5,8,13,.38),#070a0f 72%),
      url("../assets/images/hero-riyadh-saudi.jpg") center top / cover no-repeat;
  }
  .hero::after{width:100%;background:linear-gradient(180deg,rgba(7,10,15,.08),#070a0f 85%)}
  .hero__content{
    min-height:500px;
    display:flex;
    align-items:flex-end;
    text-align:center;
  }
  .hero__copy{
    max-width:680px;
    margin:auto;
    padding:215px 0 0;
  }
  .hero__visual{display:none}
  .hero__actions{justify-content:center}
  .stats-card{
    width:min(720px,calc(100% - 30px));
    grid-template-columns:repeat(2,1fr);
    transform:translateY(34%);
  }
  .stats-card article:nth-child(5){grid-column:1/-1}
}
@media(max-width:600px){
  .hero{padding-top:34px}
  .hero__copy{padding-top:205px}
  .hero h1{font-size:35px}
  .hero p{font-size:14px}
  .hero__actions{flex-direction:column}
  .hero__actions .btn{width:100%}
  .stats-card{
    position:relative;
    width:calc(100% - 20px);
    margin-top:18px;
    transform:translateY(28%);
  }
  .stats-card article{min-height:72px;padding:11px 8px}
  .stats-card strong{font-size:19px}
  .about{padding-top:125px}
}


/* ===== إصلاح موضع السلايدر على الشاشات الكبيرة ===== */
@media (min-width: 901px){
  .hero{
    min-height:560px;
    padding:0;
    overflow:visible;
    background:
      linear-gradient(90deg,
        rgba(5,8,13,.10) 0%,
        rgba(5,8,13,.20) 35%,
        rgba(5,8,13,.72) 62%,
        rgba(5,8,13,.97) 100%),
      url("../assets/images/hero-riyadh-saudi.jpg") center center / cover no-repeat;
  }

  .hero::before{
    background:
      linear-gradient(180deg,rgba(4,7,11,.08),rgba(4,7,11,.18)),
      radial-gradient(circle at 77% 38%,rgba(237,27,47,.09),transparent 34%);
  }

  .hero::after{
    right:0;
    left:auto;
    top:0;
    bottom:0;
    width:57%;
    height:auto;
    background:linear-gradient(90deg,transparent 0%,rgba(7,10,15,.72) 48%,#070a0f 100%);
  }

  .hero__content{
    min-height:500px;
    display:block;
    position:relative;
  }

  .hero__copy{
    position:absolute;
    top:50%;
    right:0;
    width:48%;
    max-width:570px;
    margin:0;
    padding:0 0 22px;
    transform:translateY(-50%);
    text-align:right;
    z-index:4;
  }

  .hero__visual{
    display:none;
  }

  .hero .eyebrow{
    justify-content:flex-start;
    font-size:14px;
  }

  .hero h1{
    max-width:540px;
    font-size:clamp(38px,3.45vw,54px);
    line-height:1.34;
    margin:10px 0 17px;
    letter-spacing:-.5px;
  }

  .hero p{
    max-width:545px;
    font-size:15px;
    line-height:1.95;
  }

  .hero__actions{
    justify-content:flex-start;
  }

  .stats-card{
    margin-top:-2px;
    transform:translateY(50%);
  }
}

/* تحسين إضافي للشاشات العريضة جدًا */
@media (min-width:1500px){
  .hero__copy{
    right:25px;
    max-width:610px;
  }
  .hero h1{
    font-size:57px;
  }
}


/* ===== Hero & Navbar micro-interactions ===== */

/* Search button */
.search-btn--interactive{
  position:relative;
  overflow:hidden;
  transition:transform .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.search-btn--interactive::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  transform:scale(0);
  transition:transform .28s ease;
}
.search-btn--interactive i{
  position:relative;
  z-index:1;
  transition:transform .28s ease,color .28s ease;
}
.search-btn--interactive:hover,
.search-btn--interactive:focus-visible{
  color:#fff;
  border-color:var(--primary);
  transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(237,27,47,.24);
}
.search-btn--interactive:hover::before,
.search-btn--interactive:focus-visible::before{
  transform:scale(1);
}
.search-btn--interactive:hover i,
.search-btn--interactive:focus-visible i{
  transform:rotate(-15deg) scale(1.13);
}

/* Eyebrow entrance + pulsing icon */
.hero-eyebrow{
  opacity:0;
  transform:translateY(-12px);
  animation:heroEyebrowIn .7s ease .15s forwards;
}
.hero-eyebrow i{
  position:relative;
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:var(--primary);
  box-shadow:0 0 0 0 rgba(237,27,47,.48);
  animation:certificatePulse 1.9s ease-out infinite;
}
.hero-eyebrow i::after{
  content:"";
  position:absolute;
  inset:-4px;
  border:1px solid rgba(237,27,47,.5);
  border-radius:50%;
  animation:certificateRing 1.9s ease-out infinite;
}
@keyframes heroEyebrowIn{
  to{opacity:1;transform:translateY(0)}
}
@keyframes certificatePulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(237,27,47,.42)}
  50%{transform:scale(1.08);box-shadow:0 0 0 10px rgba(237,27,47,0)}
}
@keyframes certificateRing{
  0%{transform:scale(.82);opacity:.8}
  75%,100%{transform:scale(1.55);opacity:0}
}

/* Smaller and cleaner hero headline */
@media (min-width: 901px){
  .hero h1{
    max-width:510px;
    font-size:clamp(36px,3.05vw,49px);
    line-height:1.38;
    margin-top:12px;
    margin-bottom:15px;
  }
}

/* RTL typing effect */
.hero-typing{
  min-height:64px;
  position:relative;
}
.hero-typing.typing-active::after{
  content:"";
  display:inline-block;
  width:2px;
  height:1.15em;
  margin-right:4px;
  vertical-align:-2px;
  background:var(--primary);
  animation:typingCaret .75s steps(1) infinite;
}
.hero-typing.typing-done::after{display:none}
@keyframes typingCaret{
  0%,48%{opacity:1}
  49%,100%{opacity:0}
}


/* Quote button pulse - Premium */
.hero-quote-btn{
    position:relative;
    overflow:visible;
    isolation:isolate;
    animation:heroButtonPulse 2s infinite;
    box-shadow:
        0 0 0 rgba(237,27,47,.45),
        0 12px 30px rgba(237,27,47,.35);
    transition:.35s;
}
.hero-quote-btn::before{
    content:"";
    position:absolute;
    inset:-8px;
    border-radius:18px;
    border:2px solid rgba(237,27,47,.55);
    animation:ripple1 2s infinite;
}
.hero-quote-btn::after{
    content:"";
    position:absolute;
    inset:-8px;
    border-radius:18px;
    border:2px solid rgba(237,27,47,.35);
    animation:ripple2 2s infinite .35s;
}
@keyframes heroButtonPulse{
    0%,100%{
        transform:scale(1);
        box-shadow:0 0 0 rgba(237,27,47,.45),0 12px 28px rgba(237,27,47,.35);
    }
    50%{
        transform:scale(1.035);
        box-shadow:0 0 42px rgba(237,27,47,.75),0 18px 48px rgba(237,27,47,.55);
    }
}
@keyframes ripple1{
    from{transform:scale(1);opacity:.85}
    to{transform:scale(1.45);opacity:0}
}
@keyframes ripple2{
    from{transform:scale(1);opacity:.55}
    to{transform:scale(1.8);opacity:0}
}
.hero-quote-btn:hover{
    animation-play-state:paused;
    transform:translateY(-5px) scale(1.05);
    box-shadow:0 0 48px rgba(237,27,47,.85),0 22px 56px rgba(237,27,47,.6);
}
.hero-quote-btn:hover::before,
.hero-quote-btn:hover::after{
    animation-play-state:paused;
}
.hero-quote-btn:hover i{
    animation:quoteArrow .6s ease infinite alternate;
}

/* Contact button hover */
.hero-contact-btn{
  position:relative;
  overflow:hidden;
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease,color .28s ease;
}
.hero-contact-btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  transform:translateX(105%);
  transition:transform .34s ease;
  z-index:-1;
}
.hero-contact-btn i{
  font-size:12px;
  opacity:.75;
  transition:transform .28s ease;
}
.hero-contact-btn:hover,
.hero-contact-btn:focus-visible{
  border-color:var(--primary);
  transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(237,27,47,.24);
}
.hero-contact-btn:hover::before,
.hero-contact-btn:focus-visible::before{
  transform:translateX(0);
}
.hero-contact-btn:hover i,
.hero-contact-btn:focus-visible i{
  transform:translateX(-6px);
}

/* Statistics hover cards */
.stats-card article{
  position:relative;
  overflow:hidden;
  cursor:default;
  transition:transform .3s ease,background .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.stats-card article::before{
  content:"";
  position:absolute;
  right:18%;
  left:18%;
  bottom:0;
  height:3px;
  border-radius:4px 4px 0 0;
  background:var(--primary);
  transform:scaleX(0);
  transition:transform .3s ease;
}
.stats-card article::after{
  content:"";
  position:absolute;
  width:90px;
  height:90px;
  top:-65px;
  left:-45px;
  border-radius:50%;
  background:rgba(237,27,47,.13);
  transform:scale(.5);
  opacity:0;
  transition:transform .35s ease,opacity .35s ease;
}
.stats-card article:hover{
  transform:translateY(-7px);
  background:linear-gradient(150deg,rgba(237,27,47,.14),rgba(255,255,255,.025));
  box-shadow:0 18px 35px rgba(0,0,0,.25),inset 0 0 0 1px rgba(237,27,47,.28);
  z-index:2;
}
.stats-card article:hover::before{transform:scaleX(1)}
.stats-card article:hover::after{transform:scale(1);opacity:1}
.stats-card article strong{
  position:relative;
  z-index:1;
  transition:color .3s ease,transform .3s ease,text-shadow .3s ease;
}
.stats-card article span{
  position:relative;
  z-index:1;
  transition:color .3s ease,transform .3s ease;
}
.stats-card article:hover strong{
  color:var(--primary);
  transform:translateY(-2px) scale(1.08);
  text-shadow:0 0 20px rgba(237,27,47,.25);
}
.stats-card article:hover span{
  color:#fff;
  transform:translateY(1px);
}

/* Respect reduced motion */
@media(prefers-reduced-motion:reduce){
  .hero-eyebrow,
  .hero-eyebrow i,
  .hero-eyebrow i::after,
  .hero-quote-btn,
  .hero-quote-btn::after,
  .hero-typing.typing-active::after{
    animation:none!important;
  }
  .hero-eyebrow{opacity:1;transform:none}
}


/* ===== Dynamic multi-slide hero ===== */
.hero{
  min-height:560px;
  padding:0;
  background:#070a0f;
  position:relative;
  overflow:visible;
}
.hero-slider{
  position:relative;
  min-height:560px;
  overflow:hidden;
  background:#070a0f;
}
.hero-slide{
  position:absolute;
  inset:0;
  min-height:560px;
  opacity:0;
  visibility:hidden;
  transform:scale(1);
  transition:opacity .8s ease,visibility .8s ease;
  background-image:
    linear-gradient(90deg,rgba(5,8,13,.10) 0%,rgba(5,8,13,.20) 35%,rgba(5,8,13,.72) 62%,rgba(5,8,13,.97) 100%),
    var(--slide-image);
  background-position:var(--slide-position,center center);
  background-size:cover;
  background-repeat:no-repeat;
}
.hero-slide.is-active{
  opacity:1;
  visibility:visible;
  transform:scale(1);
  z-index:2;
}
.hero-slide__overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(4,7,11,.06),rgba(4,7,11,.20)),
    radial-gradient(circle at 78% 38%,rgba(237,27,47,.09),transparent 34%);
  pointer-events:none;
}
.hero-slide .hero__content{
  min-height:500px;
  display:block;
  position:relative;
  z-index:3;
}
.hero-slide .hero__copy{
  position:absolute;
  top:50%;
  right:0;
  width:48%;
  max-width:570px;
  margin:0;
  padding:0 0 22px;
  transform:translateY(-50%);
  text-align:right;
}
.hero-slide:not(.is-active) .hero__copy>*{
  opacity:0;
  transform:translateY(18px);
}
.hero-slide.is-active .hero__copy>*{
  animation:slideContentIn .65s ease forwards;
}
.hero-slide.is-active .hero__copy>*:nth-child(2){animation-delay:.12s}
.hero-slide.is-active .hero__copy>*:nth-child(3){animation-delay:.22s}
.hero-slide.is-active .hero__copy>*:nth-child(4){animation-delay:.32s}
@keyframes slideContentIn{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}
.hero-slider__pagination{
  position:absolute;
  z-index:12;
  right:50%;
  bottom:72px;
  transform:translateX(50%);
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 13px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:rgba(7,10,15,.52);
  backdrop-filter:blur(12px);
}
.hero-slider__dot{
  position:relative;
  width:10px;
  height:10px;
  border:0;
  padding:0;
  border-radius:999px;
  background:rgba(255,255,255,.45);
  transition:width .3s ease,background .3s ease,transform .3s ease;
}
.hero-slider__dot:hover{
  transform:scale(1.25);
  background:#fff;
}
.hero-slider__dot.is-active{
  width:34px;
  background:var(--primary);
}
.hero-slider__dot.is-active::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:rgba(255,255,255,.28);
  transform-origin:right center;
  animation:sliderProgress var(--slider-duration,6500ms) linear forwards;
}
@keyframes sliderProgress{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
.hero-slider__arrow{
  position:absolute;
  z-index:12;
  top:50%;
  width:46px;
  height:46px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  background:rgba(7,10,15,.40);
  backdrop-filter:blur(10px);
  opacity:0;
  transform:translateY(-50%);
  transition:opacity .25s ease,transform .25s ease,background .25s ease,border-color .25s ease;
}
.hero-slider:hover .hero-slider__arrow{opacity:1}
.hero-slider__arrow:hover{
  background:var(--primary);
  border-color:var(--primary);
}
.hero-slider__arrow--prev{right:24px}
.hero-slider__arrow--next{left:24px}
.stats-card{
  margin-top:-2px;
  transform:translateY(-50%);
  z-index:20;
}

@media(max-width:900px){
  .hero,.hero-slider,.hero-slide{min-height:650px}
  .hero-slide{
    background-image:
      linear-gradient(180deg,rgba(5,8,13,.30),#070a0f 76%),
      var(--slide-image);
    background-position:center top;
  }
  .hero-slide .hero__content{
    min-height:610px;
    display:flex;
    align-items:flex-end;
  }
  .hero-slide .hero__copy{
    position:static;
    width:100%;
    max-width:680px;
    margin:auto;
    padding:235px 0 80px;
    transform:none;
    text-align:center;
  }
  .hero-slide .eyebrow{justify-content:center}
  .hero-slide .hero__actions{justify-content:center}
  .hero-slider__pagination{bottom:34px}
  .hero-slider__arrow{display:none}
  .stats-card{transform:translateY(-28%)}
}
@media(max-width:600px){
  .hero,.hero-slider,.hero-slide{min-height:690px}
  .hero-slide .hero__copy{padding:225px 0 85px}
  .hero-slide h1{font-size:34px}
  .hero-slider__pagination{bottom:28px}
  .stats-card{transform:translateY(-20%)}
}


/* كتابة وصف كل شريحة من اليمين إلى اليسار */
.hero-slide .hero-typing{
  direction:rtl;
  unicode-bidi:plaintext;
  text-align:right;
  min-height:64px;
}
.hero-slide .hero-typing.typing-active::after{
  content:"";
  display:inline-block;
  width:2px;
  height:1.15em;
  margin-right:5px;
  vertical-align:-2px;
  background:var(--primary);
  box-shadow:0 0 9px rgba(237,27,47,.7);
  animation:typingCaret .72s steps(1) infinite;
}
.hero-slide .hero-typing.typing-done::after{
  display:none;
}
@media(max-width:900px){
  .hero-slide .hero-typing{
    text-align:center;
    min-height:78px;
  }
}


/* توحيد نبض أيقونات العناوين وزر CTA في جميع شرائح السلايدر */
.hero-slide .hero-eyebrow i{
  flex:0 0 29px;
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  box-shadow:0 0 0 0 rgba(237,27,47,.52),0 8px 20px rgba(237,27,47,.22);
  animation:certificatePulse 1.75s ease-out infinite;
}
.hero-slide .hero-eyebrow i::after{
  content:"";
  position:absolute;
  inset:-5px;
  border:1.5px solid rgba(237,27,47,.55);
  border-radius:50%;
  animation:certificateRing 1.75s ease-out infinite;
}
.hero-slide .hero-quote-btn{
  overflow:visible;
}
.hero-slide.is-active .hero-quote-btn{
  animation:heroButtonPulse 2s infinite;
}
.hero-slide:not(.is-active) .hero-quote-btn,
.hero-slide:not(.is-active) .hero-quote-btn::before,
.hero-slide:not(.is-active) .hero-quote-btn::after{
  animation-play-state:paused;
}


/* ===== Premium About section ===== */
.about__media--premium{
  min-height:500px;
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:30px;
  background:
    linear-gradient(180deg,rgba(6,9,14,.06),rgba(6,9,14,.62)),
    url("../assets/images/about-translation-bg.svg") center/cover no-repeat;
  box-shadow:
    0 34px 80px rgba(8,13,22,.18),
    inset 0 0 0 1px rgba(255,255,255,.10);
  isolation:isolate;
  transition:transform .45s ease,box-shadow .45s ease;
}
.about__media--premium:hover{
  transform:translateY(-8px);
  box-shadow:
    0 42px 95px rgba(8,13,22,.26),
    0 0 0 1px rgba(237,27,47,.16);
}
.about__media--premium::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.13) 50%,transparent 65%);
  transform:translateX(85%) rotate(8deg);
  transition:transform .9s ease;
  z-index:2;
  pointer-events:none;
}
.about__media--premium:hover::before{
  transform:translateX(-85%) rotate(8deg);
}
.about-media__overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(7,10,15,.02),rgba(7,10,15,.56)),
    radial-gradient(circle at 18% 20%,rgba(237,27,47,.18),transparent 40%);
  z-index:1;
}
.about-media__brand{
  position:absolute;
  right:34px;
  bottom:34px;
  z-index:4;
  display:flex;
  align-items:center;
  gap:14px;
  max-width:340px;
  padding:18px 22px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  color:#fff;
  background:rgba(7,10,15,.62);
  backdrop-filter:blur(14px);
  box-shadow:0 18px 40px rgba(0,0,0,.26);
  transition:transform .3s ease,background .3s ease,border-color .3s ease;
}
.about__media--premium:hover .about-media__brand{
  transform:translateY(-5px);
  background:rgba(7,10,15,.78);
  border-color:rgba(237,27,47,.36);
}
.about-media__logo{
  width:68px;
  height:68px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:#fff;
  padding:8px;
  box-shadow:0 12px 26px rgba(0,0,0,.18);
}
.about-media__logo img{width:100%;height:100%;object-fit:contain}
.about-media__brand>div:last-child{display:flex;flex-direction:column;line-height:1.45}
.about-media__brand strong{font-size:24px}
.about-media__brand span{font-size:14px;color:#d6dbe3}
.experience-badge--premium{
  position:absolute;
  top:28px;
  left:28px;
  z-index:5;
  width:132px;
  height:132px;
  border-radius:24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:linear-gradient(145deg,var(--primary),var(--primary-dark));
  box-shadow:
    0 22px 42px rgba(237,27,47,.30),
    0 0 0 8px rgba(237,27,47,.10);
  animation:aboutExperienceFloat 3.2s ease-in-out infinite;
}
.experience-badge--premium::after{
  content:"";
  position:absolute;
  inset:-8px;
  border:1px solid rgba(237,27,47,.36);
  border-radius:28px;
  animation:aboutExperienceRing 2.3s ease-out infinite;
}
.experience-badge__number{
  font-size:38px;
  line-height:1;
  font-weight:900;
}
.experience-badge__label{
  margin-top:8px;
  font-size:13px;
  font-weight:700;
}
@keyframes aboutExperienceFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}
@keyframes aboutExperienceRing{
  0%{transform:scale(.96);opacity:.8}
  100%{transform:scale(1.16);opacity:0}
}
.about-media__floating{
  position:absolute;
  z-index:4;
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 14px;
  border-radius:12px;
  color:#fff;
  font-size:12px;
  font-weight:700;
  background:rgba(7,10,15,.66);
  border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(12px);
  box-shadow:0 14px 32px rgba(0,0,0,.22);
  transition:transform .3s ease,border-color .3s ease;
}
.about-media__floating i{color:var(--primary)}
.about-media__floating--one{right:34px;top:40px}
.about-media__floating--two{left:32px;bottom:45px}
.about__media--premium:hover .about-media__floating{
  transform:translateY(-4px);
  border-color:rgba(237,27,47,.30);
}

/* About CTA */
.btn--about{
  position:relative;
  margin-top:10px;
  overflow:hidden;
  color:#fff;
  background:linear-gradient(135deg,var(--ink),#202938);
  box-shadow:0 14px 30px rgba(10,16,25,.16);
  isolation:isolate;
}
.btn--about::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  transform:translateX(105%);
  transition:transform .35s ease;
  z-index:-1;
}
.btn--about::after{
  content:"";
  position:absolute;
  width:90px;
  height:90px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  top:-45px;
  left:-40px;
  transform:scale(0);
  transition:transform .4s ease;
}
.btn--about span,
.btn--about i{position:relative;z-index:2}
.btn--about i{transition:transform .3s ease}
.btn--about:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 42px rgba(237,27,47,.24);
}
.btn--about:hover::before{transform:translateX(0)}
.btn--about:hover::after{transform:scale(2.2)}
.btn--about:hover i{transform:translateX(-7px)}

@media(max-width:900px){
  .about__media--premium{min-height:430px}
}
@media(max-width:600px){
  .about__media--premium{min-height:420px;border-radius:22px}
  .experience-badge--premium{
    width:108px;
    height:108px;
    top:18px;
    left:18px;
  }
  .experience-badge__number{font-size:31px}
  .about-media__brand{
    right:18px;
    left:18px;
    bottom:18px;
    max-width:none;
  }
  .about-media__brand strong{font-size:20px}
  .about-media__floating--one{right:18px;top:142px}
  .about-media__floating--two{display:none}
}


/* ===== About feature cards hover ===== */
.about-features .feature-card,
.about__features .feature-card,
.feature-card{
    position:relative;
    overflow:hidden;
    transition:
      transform .35s ease,
      box-shadow .35s ease,
      border-color .35s ease,
      background .35s ease;
}

.about-features .feature-card::before,
.about__features .feature-card::before,
.feature-card::before{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:0;
    height:100%;
    background:linear-gradient(135deg,rgba(237,27,47,.06),rgba(237,27,47,.14));
    transition:width .45s ease;
    z-index:0;
}

.feature-card > *{
    position:relative;
    z-index:2;
}

.feature-card:hover{
    transform:translateY(-10px);
    border-color:rgba(237,27,47,.28);
    box-shadow:
      0 24px 45px rgba(15,23,42,.12),
      0 0 0 1px rgba(237,27,47,.14);
}

.feature-card:hover::before{
    width:100%;
}

.feature-card .feature-icon,
.feature-card .icon{
    transition:all .35s ease;
}

.feature-card:hover .feature-icon,
.feature-card:hover .icon{
    background:linear-gradient(135deg,#ed1b2f,#b40f21)!important;
    color:#fff!important;
    transform:rotate(-10deg) scale(1.15);
    box-shadow:0 12px 25px rgba(237,27,47,.35);
}

.feature-card h3,
.feature-card strong{
    transition:.35s ease;
}

.feature-card p,
.feature-card small{
    transition:.35s ease;
}

.feature-card:hover h3,
.feature-card:hover strong{
    color:#ed1b2f;
    transform:translateX(-4px);
}

.feature-card:hover p,
.feature-card:hover small{
    color:#444;
}

.feature-card::after{
    content:"";
    position:absolute;
    bottom:0;
    right:0;
    width:0;
    height:3px;
    background:#ed1b2f;
    transition:width .35s ease;
}

.feature-card:hover::after{
    width:100%;
}


/* ===== FIX: hover effects for the actual About feature-grid cards ===== */
.feature-grid article{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  cursor:default;
  transition:
    transform .32s ease,
    box-shadow .32s ease,
    border-color .32s ease,
    background .32s ease;
}

.feature-grid article::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(237,27,47,.04),rgba(237,27,47,.13));
  transform:translateX(105%);
  transition:transform .4s ease;
  z-index:-1;
}

.feature-grid article::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:0;
  height:3px;
  border-radius:3px 0 0 0;
  background:linear-gradient(90deg,var(--primary),var(--primary-dark));
  transition:width .35s ease;
}

.feature-grid article:hover,
.feature-grid article:focus-within{
  transform:translateY(-8px);
  border-color:rgba(237,27,47,.30);
  background:#fff;
  box-shadow:
    0 18px 36px rgba(9,15,25,.13),
    0 0 0 1px rgba(237,27,47,.08);
}

.feature-grid article:hover::before,
.feature-grid article:focus-within::before{
  transform:translateX(0);
}

.feature-grid article:hover::after,
.feature-grid article:focus-within::after{
  width:100%;
}

.feature-grid article > i{
  transition:
    transform .32s ease,
    background .32s ease,
    color .32s ease,
    box-shadow .32s ease;
}

.feature-grid article:hover > i,
.feature-grid article:focus-within > i{
  transform:rotate(-9deg) scale(1.14);
  color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  box-shadow:0 12px 24px rgba(237,27,47,.28);
}

.feature-grid article strong{
  transition:color .32s ease,transform .32s ease;
}

.feature-grid article span{
  transition:color .32s ease,transform .32s ease;
}

.feature-grid article:hover strong,
.feature-grid article:focus-within strong{
  color:var(--primary);
  transform:translateX(-4px);
}

.feature-grid article:hover span,
.feature-grid article:focus-within span{
  color:#4f5663;
  transform:translateX(-2px);
}


/* البطاقات معلومات فقط وليست روابط */
.feature-grid article,
.feature-grid article:hover{
    cursor: default !important;
}


/* جعل بطاقة الخدمة بالكامل قابلة للنقر */
.service-card--clickable{
  cursor:pointer;
}
.service-card--clickable a{
  pointer-events:none;
}
.service-card--clickable:focus-visible{
  outline:3px solid rgba(237,27,47,.24);
  outline-offset:4px;
  border-color:var(--primary);
}


/* ===== زر استعراض جميع الخدمات ===== */
.services-more{
  display:flex;
  justify-content:center;
  margin-top:46px;
}

.services-more__btn{
  position:relative;
  isolation:isolate;
  width:min(560px,100%);
  min-height:92px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:18px;
  padding:15px 18px;
  overflow:hidden;
  border:1px solid rgba(237,27,47,.18);
  border-radius:20px;
  color:var(--ink);
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(120deg,rgba(237,27,47,.22),rgba(11,15,23,.08),rgba(237,27,47,.32)) border-box;
  box-shadow:
    0 18px 42px rgba(9,15,25,.09),
    inset 0 1px 0 rgba(255,255,255,.9);
  cursor:pointer;
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    color .35s ease,
    border-color .35s ease;
}

.services-more__btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(135deg,var(--ink),#1c2533);
  transform:translateX(105%);
  transition:transform .5s cubic-bezier(.22,.8,.22,1);
}

.services-more__btn::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:150px;
  height:150px;
  top:-70px;
  left:-65px;
  border-radius:50%;
  background:rgba(237,27,47,.18);
  transform:scale(.15);
  opacity:0;
  transition:transform .55s ease,opacity .4s ease;
}

.services-more__icon{
  position:relative;
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:16px;
  color:#fff;
  font-size:22px;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  box-shadow:0 14px 28px rgba(237,27,47,.27);
  transition:transform .35s ease,box-shadow .35s ease;
}

.services-more__icon::after{
  content:"";
  position:absolute;
  inset:-6px;
  border:1px solid rgba(237,27,47,.34);
  border-radius:20px;
  opacity:0;
  transform:scale(.85);
  transition:opacity .35s ease,transform .35s ease;
}

.services-more__content{
  display:flex;
  flex-direction:column;
  text-align:right;
  line-height:1.45;
}

.services-more__content strong{
  font-size:18px;
  color:var(--ink);
  transition:color .35s ease,transform .35s ease;
}

.services-more__content small{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
  transition:color .35s ease,transform .35s ease;
}

.services-more__arrow{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--primary);
  background:rgba(237,27,47,.08);
  transition:
    transform .35s ease,
    color .35s ease,
    background .35s ease,
    box-shadow .35s ease;
}

.services-more__btn:hover,
.services-more__btn:focus-visible{
  color:#fff;
  transform:translateY(-7px);
  box-shadow:
    0 26px 58px rgba(9,15,25,.18),
    0 0 0 1px rgba(237,27,47,.14);
}

.services-more__btn:hover::before,
.services-more__btn:focus-visible::before{
  transform:translateX(0);
}

.services-more__btn:hover::after,
.services-more__btn:focus-visible::after{
  transform:scale(1.6);
  opacity:1;
}

.services-more__btn:hover .services-more__icon,
.services-more__btn:focus-visible .services-more__icon{
  transform:rotate(-8deg) scale(1.08);
  box-shadow:0 18px 35px rgba(237,27,47,.40);
}

.services-more__btn:hover .services-more__icon::after,
.services-more__btn:focus-visible .services-more__icon::after{
  opacity:1;
  transform:scale(1.08);
}

.services-more__btn:hover .services-more__content strong,
.services-more__btn:focus-visible .services-more__content strong{
  color:#fff;
  transform:translateX(-4px);
}

.services-more__btn:hover .services-more__content small,
.services-more__btn:focus-visible .services-more__content small{
  color:#cdd3dc;
  transform:translateX(-2px);
}

.services-more__btn:hover .services-more__arrow,
.services-more__btn:focus-visible .services-more__arrow{
  color:#fff;
  background:var(--primary);
  transform:translateX(-8px);
  box-shadow:0 10px 24px rgba(237,27,47,.28);
}

.services-more__btn:focus-visible{
  outline:3px solid rgba(237,27,47,.22);
  outline-offset:5px;
}

@media(max-width:600px){
  .services-more{
    margin-top:32px;
  }

  .services-more__btn{
    min-height:82px;
    grid-template-columns:auto 1fr;
    gap:13px;
    padding:13px;
  }

  .services-more__icon{
    width:52px;
    height:52px;
  }

  .services-more__content strong{
    font-size:16px;
  }

  .services-more__content small{
    font-size:11px;
  }

  .services-more__arrow{
    display:none;
  }
}


/* ===== Accreditation slider ===== */
.accreditation-slider{
  position:relative;
  padding:0 58px 34px;
}
.accreditation-slider__viewport{
  overflow:hidden;
  border-radius:18px;
}
.accreditation-slider__track{
  display:flex;
  grid-template-columns:none;
  gap:16px;
  transition:transform .65s cubic-bezier(.22,.8,.22,1);
  will-change:transform;
}
.accreditation-slider__track .accreditation-card{
  flex:0 0 calc((100% - 48px) / 4);
  min-height:138px;
  position:relative;
  overflow:hidden;
  cursor:default;
  transition:
    transform .32s ease,
    box-shadow .32s ease,
    border-color .32s ease;
}
.accreditation-slider__track .accreditation-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(145deg,rgba(237,27,47,.03),rgba(237,27,47,.12));
  transform:translateY(100%);
  transition:transform .38s ease;
}
.accreditation-slider__track .accreditation-card:hover{
  transform:translateY(-7px);
  box-shadow:0 22px 42px rgba(0,0,0,.22);
}
.accreditation-slider__track .accreditation-card:hover::before{
  transform:translateY(0);
}
.accreditation-slider__track .accreditation-card i,
.accreditation-slider__track .accreditation-card span{
  position:relative;
  z-index:1;
}
.accreditation-slider__track .accreditation-card i{
  transition:transform .3s ease,color .3s ease;
}
.accreditation-slider__track .accreditation-card:hover i{
  transform:scale(1.14) rotate(-7deg);
  color:var(--primary);
}

.accreditation-slider__arrow{
  position:absolute;
  top:50%;
  z-index:5;
  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  background:rgba(255,255,255,.07);
  transform:translateY(-70%);
  backdrop-filter:blur(10px);
  transition:
    transform .25s ease,
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}
.accreditation-slider__arrow--prev{right:0}
.accreditation-slider__arrow--next{left:0}
.accreditation-slider__arrow:hover,
.accreditation-slider__arrow:focus-visible{
  background:var(--primary);
  border-color:var(--primary);
  transform:translateY(-70%) scale(1.08);
  box-shadow:0 12px 28px rgba(237,27,47,.30);
}
.accreditation-slider__arrow:disabled{
  opacity:.35;
  cursor:not-allowed;
}

.accreditation-slider__dots{
  position:absolute;
  right:50%;
  bottom:0;
  transform:translateX(50%);
  display:flex;
  align-items:center;
  gap:8px;
}
.accreditation-slider__dot{
  width:8px;
  height:8px;
  border:0;
  padding:0;
  border-radius:999px;
  background:rgba(255,255,255,.32);
  transition:width .3s ease,background .3s ease,transform .3s ease;
}
.accreditation-slider__dot:hover{
  transform:scale(1.25);
  background:#fff;
}
.accreditation-slider__dot.is-active{
  width:30px;
  background:var(--primary);
}

@media(max-width:900px){
  .accreditation-slider__track .accreditation-card{
    flex-basis:calc((100% - 16px) / 2);
  }
}
@media(max-width:600px){
  .accreditation-slider{
    padding-inline:44px;
  }
  .accreditation-slider__track .accreditation-card{
    flex-basis:100%;
  }
  .accreditation-slider__arrow{
    width:36px;
    height:36px;
  }
}


/* ===== تأثيرات قسم لماذا جوجان ===== */
.why-grid article{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  cursor:default;
  border-radius:16px;
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease,
    background .35s ease;
}

.why-grid article::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(145deg,rgba(237,27,47,.04),rgba(237,27,47,.13));
  transform:translateY(105%);
  transition:transform .42s cubic-bezier(.22,.8,.22,1);
}

.why-grid article::after{
  content:"";
  position:absolute;
  right:18%;
  left:18%;
  bottom:0;
  height:3px;
  border-radius:4px 4px 0 0;
  background:linear-gradient(90deg,var(--primary),var(--primary-dark));
  transform:scaleX(0);
  transition:transform .35s ease;
}

.why-grid article:hover,
.why-grid article:focus-within{
  transform:translateY(-10px);
  background:#fff;
  box-shadow:
    0 22px 46px rgba(9,15,25,.13),
    0 0 0 1px rgba(237,27,47,.10);
  z-index:2;
}

.why-grid article:hover::before,
.why-grid article:focus-within::before{
  transform:translateY(0);
}

.why-grid article:hover::after,
.why-grid article:focus-within::after{
  transform:scaleX(1);
}

.why-grid article i{
  position:relative;
  width:58px;
  height:58px;
  margin-inline:auto;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:rgba(237,27,47,.08);
  transition:
    transform .35s ease,
    color .35s ease,
    background .35s ease,
    box-shadow .35s ease;
}

.why-grid article i::after{
  content:"";
  position:absolute;
  inset:-6px;
  border:1px solid rgba(237,27,47,.28);
  border-radius:20px;
  opacity:0;
  transform:scale(.82);
  transition:opacity .35s ease,transform .35s ease;
}

.why-grid article:hover i,
.why-grid article:focus-within i{
  color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  transform:translateY(-4px) rotate(-7deg) scale(1.08);
  box-shadow:0 15px 30px rgba(237,27,47,.28);
}

.why-grid article:hover i::after,
.why-grid article:focus-within i::after{
  opacity:1;
  transform:scale(1.08);
}

.why-grid article h3{
  transition:color .35s ease,transform .35s ease;
}

.why-grid article p{
  transition:color .35s ease,transform .35s ease;
}

.why-grid article:hover h3,
.why-grid article:focus-within h3{
  color:var(--primary);
  transform:translateY(-2px);
}

.why-grid article:hover p,
.why-grid article:focus-within p{
  color:#414957;
  transform:translateY(-1px);
}

@media(max-width:900px){
  .why-grid article:hover,
  .why-grid article:focus-within{
    transform:translateY(-6px);
  }
}


/* ===== تأثيرات احترافية لقسم خطوات الترجمة ===== */
.process-grid article{
  position:relative;
  overflow:visible;
  cursor:default;
  padding:22px 14px 18px;
  border-radius:18px;
  transition:
    transform .35s ease,
    background .35s ease,
    box-shadow .35s ease;
}

.process-grid article::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:18px;
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(237,27,47,.10));
  opacity:0;
  transform:scale(.94);
  transition:opacity .35s ease,transform .35s ease;
}

.process-grid article::after{
  content:"";
  position:absolute;
  right:22%;
  left:22%;
  bottom:0;
  height:3px;
  border-radius:4px;
  background:linear-gradient(90deg,var(--primary),#ff6675);
  transform:scaleX(0);
  transition:transform .35s ease;
}

.process-grid article:hover{
  transform:translateY(-10px);
  box-shadow:0 22px 46px rgba(0,0,0,.28);
}

.process-grid article:hover::before{
  opacity:1;
  transform:scale(1);
}

.process-grid article:hover::after{
  transform:scaleX(1);
}

.process-grid article > span{
  position:relative;
  transition:
    transform .35s ease,
    color .35s ease,
    background .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}

.process-grid article > span::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:1px solid rgba(237,27,47,.42);
  opacity:0;
  transform:scale(.8);
  transition:opacity .35s ease,transform .35s ease;
}

.process-grid article:hover > span{
  color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  border-color:rgba(237,27,47,.35);
  transform:translateY(-5px) scale(1.08);
  box-shadow:0 15px 30px rgba(237,27,47,.30);
}

.process-grid article:hover > span::after{
  opacity:1;
  transform:scale(1.12);
}

.process-grid article i{
  transition:
    transform .35s ease,
    color .35s ease,
    text-shadow .35s ease;
}

.process-grid article:hover i{
  color:#fff;
  transform:translateY(-3px) scale(1.16) rotate(-6deg);
  text-shadow:0 0 18px rgba(237,27,47,.55);
}

.process-grid article h3{
  transition:color .35s ease,transform .35s ease;
}

.process-grid article p{
  transition:color .35s ease,transform .35s ease;
}

.process-grid article:hover h3{
  color:var(--primary);
  transform:translateY(-2px);
}

.process-grid article:hover p{
  color:#fff;
  transform:translateY(-1px);
}

/* إضاءة خط الربط عند المرور على القسم */
.process-grid:hover::before{
  background:linear-gradient(90deg,
    rgba(255,255,255,.08),
    rgba(237,27,47,.55),
    rgba(255,255,255,.08));
}

@media(max-width:900px){
  .process-grid article{
    background:rgba(255,255,255,.025);
  }

  .process-grid article:hover{
    transform:translateY(-6px);
  }
}


/* ===== Premium standards image ===== */
.quality-panel--image{
  min-height:500px;
  display:block;
  position:relative;
  overflow:hidden;
  border-radius:28px;
  background:#0b111c;
  box-shadow:
    0 32px 78px rgba(9,15,25,.22),
    inset 0 0 0 1px rgba(255,255,255,.08);
  isolation:isolate;
  transition:transform .45s ease,box-shadow .45s ease;
}
.quality-panel--image::before{
  display:none;
}
.quality-panel--image:hover{
  transform:translateY(-8px);
  box-shadow:
    0 42px 92px rgba(9,15,25,.30),
    0 0 0 1px rgba(237,27,47,.17);
}
.quality-panel__image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1.1s cubic-bezier(.22,.8,.22,1),filter .45s ease;
}
.quality-panel--image:hover .quality-panel__image{
  transform:scale(1.055);
  filter:saturate(1.08) contrast(1.04);
}
.quality-panel__shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,transparent 42%,rgba(5,8,14,.78)),
    linear-gradient(90deg,rgba(237,27,47,.08),transparent 42%);
  z-index:1;
}
.quality-panel__badge{
  position:absolute;
  right:26px;
  bottom:26px;
  z-index:3;
  display:flex;
  align-items:center;
  gap:13px;
  max-width:350px;
  padding:15px 18px;
  color:#fff;
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  background:rgba(7,11,18,.68);
  backdrop-filter:blur(14px);
  box-shadow:0 16px 38px rgba(0,0,0,.28);
  transition:transform .35s ease,border-color .35s ease,background .35s ease;
}
.quality-panel__badge i{
  flex:0 0 48px;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  box-shadow:0 12px 28px rgba(237,27,47,.30);
}
.quality-panel__badge div{
  display:flex;
  flex-direction:column;
  line-height:1.45;
}
.quality-panel__badge strong{font-size:16px}
.quality-panel__badge span{font-size:12px;color:#cbd2dc}
.quality-panel--image:hover .quality-panel__badge{
  transform:translateY(-5px);
  border-color:rgba(237,27,47,.34);
  background:rgba(7,11,18,.82);
}
.quality-panel__logo--premium{
  z-index:3;
  bottom:auto;
  left:24px;
  top:24px;
  padding:9px;
  border-radius:14px;
  box-shadow:0 14px 32px rgba(0,0,0,.26);
  transition:transform .35s ease,box-shadow .35s ease;
}
.quality-panel__logo--premium img{width:52px}
.quality-panel--image:hover .quality-panel__logo--premium{
  transform:rotate(-5deg) scale(1.06);
  box-shadow:0 18px 38px rgba(0,0,0,.32);
}

/* Hover effects for each standard */
.check-list li{
  position:relative;
  overflow:hidden;
  cursor:default;
  padding:14px 12px;
  border-radius:12px;
  border-bottom:1px solid var(--line);
  transition:
    transform .32s ease,
    color .32s ease,
    background .32s ease,
    border-color .32s ease,
    box-shadow .32s ease;
}
.check-list li::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(135deg,rgba(237,27,47,.04),rgba(237,27,47,.12));
  transform:translateX(105%);
  transition:transform .4s ease;
}
.check-list li::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:0;
  height:3px;
  background:linear-gradient(90deg,var(--primary),var(--primary-dark));
  transition:width .35s ease;
}
.check-list li:hover{
  transform:translateX(-8px);
  color:var(--ink);
  background:#fff;
  border-color:rgba(237,27,47,.20);
  box-shadow:0 14px 30px rgba(9,15,25,.09);
}
.check-list li:hover::before{
  transform:translateX(0);
}
.check-list li:hover::after{
  width:100%;
}
.check-list li i{
  transition:
    transform .32s ease,
    color .32s ease,
    background .32s ease,
    box-shadow .32s ease;
}
.check-list li:hover i{
  color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  transform:rotate(-8deg) scale(1.12);
  box-shadow:0 10px 22px rgba(237,27,47,.27);
}

@media(max-width:900px){
  .quality-panel--image{min-height:440px}
}
@media(max-width:600px){
  .quality-panel--image{min-height:380px;border-radius:22px}
  .quality-panel__badge{
    right:16px;
    left:16px;
    bottom:16px;
    max-width:none;
  }
  .quality-panel__logo--premium{
    left:16px;
    top:16px;
  }
  .check-list li:hover{
    transform:translateX(-4px);
  }
}


/* ===== تأثيرات Hover احترافية لكروت الأسعار ===== */
.pricing-grid article{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:
    transform .38s ease,
    box-shadow .38s ease,
    border-color .38s ease,
    background .38s ease;
}

.pricing-grid article::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(145deg,rgba(237,27,47,.04),rgba(237,27,47,.13));
  transform:translateY(105%);
  transition:transform .45s cubic-bezier(.22,.8,.22,1);
}

.pricing-grid article::after{
  content:"";
  position:absolute;
  right:16%;
  left:16%;
  bottom:0;
  height:4px;
  border-radius:5px 5px 0 0;
  background:linear-gradient(90deg,var(--primary),var(--primary-dark));
  transform:scaleX(0);
  transition:transform .35s ease;
}

.pricing-grid article:hover,
.pricing-grid article:focus-within{
  transform:translateY(-12px);
  border-color:rgba(237,27,47,.25);
  box-shadow:
    0 28px 60px rgba(9,15,25,.16),
    0 0 0 1px rgba(237,27,47,.10);
}

.pricing-grid article:hover::before,
.pricing-grid article:focus-within::before{
  transform:translateY(0);
}

.pricing-grid article:hover::after,
.pricing-grid article:focus-within::after{
  transform:scaleX(1);
}

/* الكارت المميز */
.pricing-grid article.featured{
  overflow:visible;
}

.pricing-grid article.featured::before{
  border-radius:inherit;
  background:
    radial-gradient(circle at 50% 0,rgba(237,27,47,.20),transparent 42%),
    linear-gradient(145deg,rgba(237,27,47,.08),rgba(255,255,255,.02));
}

.pricing-grid article.featured:hover,
.pricing-grid article.featured:focus-within{
  transform:translateY(-18px) scale(1.015);
  box-shadow:
    0 34px 74px rgba(0,0,0,.28),
    0 0 42px rgba(237,27,47,.18),
    0 0 0 1px rgba(237,27,47,.28);
}

/* شارة الباقة */
.pricing-grid .plan-label{
  transition:
    transform .32s ease,
    background .32s ease,
    color .32s ease,
    box-shadow .32s ease;
}

.pricing-grid article:hover .plan-label,
.pricing-grid article:focus-within .plan-label{
  transform:translateY(-3px) scale(1.05);
  color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  box-shadow:0 10px 24px rgba(237,27,47,.25);
}

/* العنوان والوصف */
.pricing-grid h3{
  transition:color .32s ease,transform .32s ease;
}

.pricing-grid p{
  transition:color .32s ease,transform .32s ease;
}

.pricing-grid article:hover h3,
.pricing-grid article:focus-within h3{
  color:var(--primary);
  transform:translateY(-2px);
}

.pricing-grid article.featured:hover h3,
.pricing-grid article.featured:focus-within h3{
  color:#fff;
  text-shadow:0 0 18px rgba(237,27,47,.28);
}

.pricing-grid article:hover p,
.pricing-grid article:focus-within p{
  transform:translateY(-1px);
}

/* عناصر القائمة */
.pricing-grid li{
  position:relative;
  transition:transform .28s ease,color .28s ease;
}

.pricing-grid article:hover li,
.pricing-grid article:focus-within li{
  transform:translateX(-4px);
}

.pricing-grid li::before{
  display:inline-block;
  transition:transform .28s ease,text-shadow .28s ease;
}

.pricing-grid article:hover li::before,
.pricing-grid article:focus-within li::before{
  transform:scale(1.18) rotate(-7deg);
  text-shadow:0 0 12px rgba(237,27,47,.35);
}

/* زر كل باقة */
.pricing-grid article .btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:
    transform .32s ease,
    box-shadow .32s ease,
    color .32s ease,
    border-color .32s ease;
}

.pricing-grid article .btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  transform:translateX(105%);
  transition:transform .35s ease;
}

.pricing-grid article:hover .btn,
.pricing-grid article:focus-within .btn{
  transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(237,27,47,.22);
}

.pricing-grid article:hover .btn::before,
.pricing-grid article:focus-within .btn::before{
  transform:translateX(0);
}

.pricing-grid article:hover .btn--outline,
.pricing-grid article:focus-within .btn--outline{
  color:#fff;
  border-color:var(--primary);
}

.pricing-grid article.featured:hover .btn,
.pricing-grid article.featured:focus-within .btn{
  transform:translateY(-4px) scale(1.02);
  box-shadow:0 18px 40px rgba(237,27,47,.35);
}

@media(max-width:900px){
  .pricing-grid article:hover,
  .pricing-grid article:focus-within{
    transform:translateY(-8px);
  }

  .pricing-grid article.featured:hover,
  .pricing-grid article.featured:focus-within{
    transform:translateY(-10px);
  }
}


/* ===== FIX: منع خلفية كارت الأكثر طلبًا من النزول خارج الكارت ===== */
.pricing-grid article.featured{
  position:relative;
  overflow:hidden !important;
  border-radius:18px;
}

.pricing-grid article.featured::before,
.pricing-grid article.featured::after{
  border-radius:inherit;
}

.pricing-grid article.featured:hover,
.pricing-grid article.featured:focus-within{
  transform:translateY(-18px) scale(1.015);
}

/* ضمان بقاء كل طبقات التأثير داخل حدود الكارت */
.pricing-grid article.featured > *{
  position:relative;
  z-index:2;
}


/* ===== Achievement metrics hover effects ===== */
.metrics-grid .metric-card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  cursor:default;
  transition:
    transform .38s ease,
    box-shadow .38s ease,
    border-color .38s ease,
    background .38s ease;
}

.metrics-grid .metric-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(145deg,rgba(237,27,47,.03),rgba(237,27,47,.13));
  transform:translateY(105%);
  transition:transform .45s cubic-bezier(.22,.8,.22,1);
}

.metrics-grid .metric-card::after{
  content:"";
  position:absolute;
  top:0;
  right:16%;
  left:16%;
  height:4px;
  border-radius:0 0 5px 5px;
  background:linear-gradient(90deg,var(--primary),var(--primary-dark));
  transform:scaleX(0);
  transition:transform .35s ease;
}

.metrics-grid .metric-card:hover{
  transform:translateY(-10px) scale(1.025);
  border-color:rgba(237,27,47,.24);
  background:#fff;
  box-shadow:
    0 24px 50px rgba(9,15,25,.14),
    0 0 0 1px rgba(237,27,47,.08);
}

.metrics-grid .metric-card:hover::before{
  transform:translateY(0);
}

.metrics-grid .metric-card:hover::after{
  transform:scaleX(1);
}

.metrics-grid .metric-card i{
  transition:
    transform .35s ease,
    color .35s ease,
    text-shadow .35s ease;
}

.metrics-grid .metric-card:hover i{
  color:var(--primary-dark);
  transform:translateY(-4px) rotate(-8deg) scale(1.16);
  text-shadow:0 0 18px rgba(237,27,47,.28);
}

.metrics-grid .metric-card strong{
  transition:
    transform .35s ease,
    color .35s ease,
    text-shadow .35s ease;
}

.metrics-grid .metric-card:hover strong{
  color:var(--primary);
  transform:translateY(-2px) scale(1.08);
  text-shadow:0 0 18px rgba(237,27,47,.18);
}

.metrics-grid .metric-card span{
  transition:color .35s ease,transform .35s ease;
}

.metrics-grid .metric-card:hover span{
  color:#444b58;
  transform:translateY(-1px);
}

/* Shine effect */
.metrics-grid .metric-card .metric-shine{
  display:none;
}

.metrics-grid .metric-card:hover{
  background-image:
    linear-gradient(120deg,transparent 0%,rgba(255,255,255,.7) 48%,transparent 58%),
    linear-gradient(145deg,rgba(237,27,47,.03),rgba(237,27,47,.10));
  background-size:220% 100%,100% 100%;
  animation:metricShine .9s ease forwards;
}

@keyframes metricShine{
  from{background-position:130% 0,0 0}
  to{background-position:-50% 0,0 0}
}

@media(max-width:900px){
  .metrics-grid .metric-card:hover{
    transform:translateY(-7px) scale(1.015);
  }
}


/* ===== Testimonials slider ===== */
.testimonials-slider{
  position:relative;
}
.testimonials-slider__viewport{
  overflow:hidden;
  border-radius:18px;
}
.testimonials-slider__track{
  display:flex;
  gap:0;
  transition:transform .65s cubic-bezier(.22,.8,.22,1);
  will-change:transform;
}
.testimonial-slide{
  flex:0 0 100%;
  min-width:100%;
  margin:0;
  min-height:255px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
  overflow:hidden;
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.testimonial-slide::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(145deg,rgba(237,27,47,.03),rgba(237,27,47,.10));
  transform:translateY(100%);
  transition:transform .4s ease;
}
.testimonial-slide:hover{
  transform:translateY(-5px);
  border-color:rgba(237,27,47,.22);
  box-shadow:0 20px 42px rgba(9,15,25,.12);
}
.testimonial-slide:hover::before{
  transform:translateY(0);
}
.testimonial-slide > *{
  position:relative;
  z-index:1;
}
.testimonial-slide .stars{
  transition:transform .3s ease,text-shadow .3s ease;
}
.testimonial-slide:hover .stars{
  transform:scale(1.04);
  text-shadow:0 0 15px rgba(245,166,35,.28);
}
.testimonial-slide .person>span{
  transition:transform .3s ease,background .3s ease,box-shadow .3s ease;
}
.testimonial-slide:hover .person>span{
  transform:rotate(-7deg) scale(1.08);
  background:var(--primary);
  box-shadow:0 12px 25px rgba(237,27,47,.25);
}

.testimonials-slider__controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:18px;
}
.testimonials-slider__arrow{
  width:40px;
  height:40px;
  border:1px solid var(--line);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--ink);
  background:#fff;
  transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.testimonials-slider__arrow:hover,
.testimonials-slider__arrow:focus-visible{
  color:#fff;
  background:var(--primary);
  border-color:var(--primary);
  transform:scale(1.08);
  box-shadow:0 10px 24px rgba(237,27,47,.24);
}
.testimonials-slider__dots{
  display:flex;
  align-items:center;
  gap:7px;
}
.testimonials-slider__dot{
  width:8px;
  height:8px;
  border:0;
  padding:0;
  border-radius:999px;
  background:#cfd4dc;
  transition:width .3s ease,background .3s ease,transform .3s ease;
}
.testimonials-slider__dot:hover{
  transform:scale(1.25);
  background:#9da5b1;
}
.testimonials-slider__dot.is-active{
  width:28px;
  background:var(--primary);
}

/* FAQ hover polish */
.accordion-item{
  position:relative;
  overflow:hidden;
  border-radius:10px;
  transition:background .3s ease,box-shadow .3s ease,transform .3s ease;
}
.accordion-item:hover{
  background:rgba(237,27,47,.035);
  transform:translateX(-3px);
}
.accordion-item.open{
  background:rgba(237,27,47,.04);
  box-shadow:inset 3px 0 0 var(--primary);
}


/* ===== FAQ + stacked Google reviews layout ===== */
.faq-testimonials .two-columns{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:56px;
  align-items:start;
}

.testimonials-slider--stacked .testimonials-slider__viewport{
  overflow:hidden;
  border-radius:18px;
}

.testimonials-slider--stacked .testimonials-slider__track{
  display:flex;
  gap:0;
  transition:transform .65s cubic-bezier(.22,.8,.22,1);
  will-change:transform;
}

.testimonials-page{
  flex:0 0 100%;
  min-width:100%;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.testimonial-card--google{
  min-height:0;
  margin:0;
  padding:20px 22px;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 8px 24px rgba(9,15,25,.04);
  transition:
    transform .32s ease,
    box-shadow .32s ease,
    border-color .32s ease;
}

.testimonial-card--google:hover{
  transform:translateY(-5px);
  border-color:rgba(237,27,47,.22);
  box-shadow:0 18px 38px rgba(9,15,25,.10);
}

.testimonial-card__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:10px;
}

.google-review-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:#f6f8fb;
  color:#4a5565;
  font-size:11px;
  font-weight:700;
}

.google-review-badge i{
  color:#4285f4;
  font-size:17px;
  transition:transform .3s ease;
}

.testimonial-card--google:hover .google-review-badge i{
  transform:rotate(-8deg) scale(1.12);
}

.testimonial-card--google blockquote{
  margin:8px 0 14px;
  font-size:14px;
  line-height:1.85;
  color:#4c5564;
}

.testimonial-card--google .person{
  justify-content:flex-start;
}

.testimonial-card--google .person>span{
  width:38px;
  height:38px;
  font-size:13px;
}

.testimonials-slider--stacked .testimonials-slider__controls{
  margin-top:20px;
}

/* إبقاء الأسئلة الشائعة ظاهرة بالكامل وبمسافات مضبوطة */
.faq-testimonials .accordion{
  max-height:none;
}

.faq-testimonials .accordion-item button{
  padding:14px 12px;
}

.faq-testimonials .accordion-item{
  border-radius:10px;
}

@media(max-width:1000px){
  .faq-testimonials .two-columns{
    grid-template-columns:1fr;
    gap:48px;
  }
}

@media(max-width:600px){
  .testimonial-card--google{
    padding:17px;
  }

  .testimonial-card__top{
    align-items:flex-start;
    flex-direction:column;
    gap:7px;
  }
}


/* ===== تأثيرات Hover احترافية لكروت القطاعات ===== */
.portfolio-grid article{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  cursor:default;
  transition:
    transform .38s ease,
    box-shadow .38s ease,
    border-color .38s ease,
    background .38s ease;
}

.portfolio-grid article::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(circle at 18% 15%,rgba(237,27,47,.22),transparent 34%),
    linear-gradient(145deg,rgba(237,27,47,.04),rgba(237,27,47,.14));
  transform:translateY(100%);
  transition:transform .5s cubic-bezier(.22,.8,.22,1);
}

.portfolio-grid article::after{
  content:"";
  position:absolute;
  right:18%;
  left:18%;
  bottom:0;
  height:4px;
  border-radius:4px 4px 0 0;
  background:linear-gradient(90deg,var(--primary),var(--primary-dark));
  transform:scaleX(0);
  transition:transform .35s ease;
}

.portfolio-grid article:hover,
.portfolio-grid article:focus-within{
  transform:translateY(-12px) scale(1.02);
  box-shadow:
    0 28px 60px rgba(9,15,25,.20),
    0 0 0 1px rgba(237,27,47,.16);
}

.portfolio-grid article:hover::before,
.portfolio-grid article:focus-within::before{
  transform:translateY(0);
}

.portfolio-grid article:hover::after,
.portfolio-grid article:focus-within::after{
  transform:scaleX(1);
}

.portfolio-grid article i{
  position:relative;
  z-index:2;
  transition:
    transform .35s ease,
    color .35s ease,
    text-shadow .35s ease;
}

.portfolio-grid article:hover i,
.portfolio-grid article:focus-within i{
  color:#fff;
  transform:translateY(-5px) rotate(-8deg) scale(1.16);
  text-shadow:0 0 18px rgba(237,27,47,.42);
}

.portfolio-grid article h3{
  position:relative;
  z-index:2;
  transition:color .35s ease,transform .35s ease;
}

.portfolio-grid article span{
  position:relative;
  z-index:2;
  transition:color .35s ease,transform .35s ease;
}

.portfolio-grid article:hover h3,
.portfolio-grid article:focus-within h3{
  color:var(--primary);
  transform:translateY(-3px);
}

.portfolio-grid article:hover span,
.portfolio-grid article:focus-within span{
  color:#fff;
  transform:translateY(-1px);
}

/* لمعان يمر فوق الكارت */
.portfolio-grid article .portfolio-shine{
  display:none;
}

.portfolio-grid article:hover{
  background-image:
    linear-gradient(120deg,transparent 0%,rgba(255,255,255,.10) 48%,transparent 58%),
    linear-gradient(160deg,#252e3d,#0c1018);
  background-size:220% 100%,100% 100%;
  animation:portfolioShine .9s ease forwards;
}

@keyframes portfolioShine{
  from{background-position:130% 0,0 0}
  to{background-position:-50% 0,0 0}
}

@media(max-width:900px){
  .portfolio-grid article:hover,
  .portfolio-grid article:focus-within{
    transform:translateY(-8px) scale(1.01);
  }
}


/* ===== تكبير رقم سنوات الخبرة ===== */
.experience-badge--premium .experience-badge__number{
  font-size:58px;
  line-height:.95;
  font-weight:900;
  letter-spacing:-2px;
  text-shadow:0 8px 24px rgba(0,0,0,.20);
}
.experience-badge--premium .experience-badge__label{
  margin-top:12px;
  font-size:16px;
  font-weight:800;
}
@media(max-width:600px){
  .experience-badge--premium .experience-badge__number{
    font-size:44px;
  }
  .experience-badge--premium .experience-badge__label{
    font-size:13px;
  }
}


/* ===== صور وتأثيرات كروت المدونة ===== */
.blog-grid .blog-card{
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition:
    transform .38s ease,
    box-shadow .38s ease,
    border-color .38s ease;
}

.blog-grid .blog-card::after{
  content:"";
  position:absolute;
  right:18%;
  left:18%;
  bottom:0;
  height:4px;
  border-radius:4px 4px 0 0;
  background:linear-gradient(90deg,var(--primary),var(--primary-dark));
  transform:scaleX(0);
  transition:transform .35s ease;
}

.blog-grid .blog-card:hover,
.blog-grid .blog-card:focus-visible{
  transform:translateY(-10px);
  border-color:rgba(237,27,47,.24);
  box-shadow:
    0 28px 60px rgba(9,15,25,.16),
    0 0 0 1px rgba(237,27,47,.08);
}

.blog-grid .blog-card:hover::after,
.blog-grid .blog-card:focus-visible::after{
  transform:scaleX(1);
}

.blog-cover{
  position:relative;
  overflow:hidden;
  height:230px;
  display:block;
  background:#0b1018;
}

.blog-cover::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(7,10,15,.45));
  opacity:.7;
  transition:opacity .35s ease,background .35s ease;
}

.blog-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:
    transform .8s cubic-bezier(.22,.8,.22,1),
    filter .4s ease;
}

.blog-card:hover .blog-cover img,
.blog-card:focus-visible .blog-cover img{
  transform:scale(1.08);
  filter:saturate(1.08) contrast(1.04);
}

.blog-card:hover .blog-cover::after,
.blog-card:focus-visible .blog-cover::after{
  opacity:1;
  background:
    linear-gradient(180deg,rgba(237,27,47,.04),rgba(7,10,15,.54)),
    linear-gradient(120deg,transparent,rgba(237,27,47,.13));
}

.blog-body{
  position:relative;
  z-index:2;
  transition:transform .35s ease;
}

.blog-card:hover .blog-body,
.blog-card:focus-visible .blog-body{
  transform:translateY(-2px);
}

.blog-body h3{
  transition:color .35s ease,transform .35s ease;
}

.blog-card:hover .blog-body h3,
.blog-card:focus-visible .blog-body h3{
  color:var(--primary);
  transform:translateY(-2px);
}

.blog-body a{
  display:inline-flex;
  align-items:center;
  gap:7px;
}

.blog-body a i{
  transition:transform .3s ease;
}

.blog-card:hover .blog-body a i,
.blog-card:focus-visible .blog-body a i{
  transform:translateX(-6px);
}

.blog-card:focus-visible{
  outline:3px solid rgba(237,27,47,.20);
  outline-offset:5px;
}

@media(max-width:600px){
  .blog-cover{
    height:205px;
  }
}


/* ===== Partners image slider ===== */
.partners-slider{
  position:relative;
  padding:0 58px 36px;
}
.partners-slider__viewport{
  overflow:hidden;
  border-radius:20px;
}
.partners-slider__track{
  display:flex;
  gap:18px;
  transition:transform .65s cubic-bezier(.22,.8,.22,1);
  will-change:transform;
}
.partner-card{
  flex:0 0 calc((100% - 54px) / 4);
  min-height:210px;
  position:relative;
  overflow:hidden;
  border-radius:18px;
  background:#0b1018;
  box-shadow:0 14px 34px rgba(9,15,25,.10);
  cursor:default;
  transition:transform .38s ease,box-shadow .38s ease,border-color .38s ease;
}
.partner-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .8s cubic-bezier(.22,.8,.22,1),filter .4s ease;
}
.partner-card__overlay{
  position:absolute;
  inset:auto 0 0;
  padding:26px 20px 18px;
  color:#fff;
  background:linear-gradient(180deg,transparent,rgba(5,8,13,.92));
  display:flex;
  flex-direction:column;
  transform:translateY(12px);
  transition:transform .35s ease,background .35s ease;
}
.partner-card__overlay strong{
  font-size:17px;
}
.partner-card__overlay span{
  margin-top:3px;
  color:#cbd2dc;
  font-size:12px;
}
.partner-card::after{
  content:"";
  position:absolute;
  right:16%;
  left:16%;
  bottom:0;
  height:4px;
  border-radius:4px 4px 0 0;
  background:linear-gradient(90deg,var(--primary),var(--primary-dark));
  transform:scaleX(0);
  transition:transform .35s ease;
}
.partner-card:hover{
  transform:translateY(-10px) scale(1.02);
  box-shadow:0 28px 58px rgba(9,15,25,.20),0 0 0 1px rgba(237,27,47,.14);
}
.partner-card:hover img{
  transform:scale(1.08);
  filter:saturate(1.08) contrast(1.04);
}
.partner-card:hover .partner-card__overlay{
  transform:translateY(0);
  background:linear-gradient(180deg,rgba(237,27,47,.03),rgba(5,8,13,.95));
}
.partner-card:hover::after{
  transform:scaleX(1);
}
.partners-slider__arrow{
  position:absolute;
  top:50%;
  z-index:5;
  width:44px;
  height:44px;
  border:1px solid var(--line);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--ink);
  background:#fff;
  transform:translateY(-70%);
  transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.partners-slider__arrow--prev{right:0}
.partners-slider__arrow--next{left:0}
.partners-slider__arrow:hover,
.partners-slider__arrow:focus-visible{
  color:#fff;
  background:var(--primary);
  border-color:var(--primary);
  transform:translateY(-70%) scale(1.08);
  box-shadow:0 12px 26px rgba(237,27,47,.26);
}
.partners-slider__dots{
  position:absolute;
  right:50%;
  bottom:0;
  transform:translateX(50%);
  display:flex;
  gap:8px;
}
.partners-slider__dot{
  width:8px;
  height:8px;
  border:0;
  padding:0;
  border-radius:999px;
  background:#cfd4dc;
  transition:width .3s ease,background .3s ease,transform .3s ease;
}
.partners-slider__dot.is-active{
  width:28px;
  background:var(--primary);
}
.partners-slider__dot:hover{
  transform:scale(1.2);
  background:#9ea6b3;
}
@media(max-width:1000px){
  .partner-card{flex-basis:calc((100% - 18px)/2)}
}
@media(max-width:600px){
  .partners-slider{padding-inline:44px}
  .partner-card{flex-basis:100%;min-height:220px}
  .partners-slider__arrow{width:36px;height:36px}
}


/* ===== ضبط موضع النص أسفل أيقونة كروت القطاعات ===== */
.portfolio-grid article{
  justify-content:flex-start;
  padding:34px 30px 28px;
}

.portfolio-grid article i{
  margin-bottom:22px;
}

.portfolio-grid article h3{
  margin-top:0;
  margin-bottom:7px;
}

.portfolio-grid article span{
  margin-top:0;
}

@media(max-width:900px){
  .portfolio-grid article{
    padding:30px 24px 26px;
  }

  .portfolio-grid article i{
    margin-bottom:18px;
  }
}


/* ===== أزرار قسم من نحن ===== */
.about-buttons{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:12px;
  flex-wrap:wrap;
}

.about-buttons .btn{
  min-height:56px;
}

.btn--profile{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  min-width:175px;
  color:var(--primary);
  background:#fff;
  border:1.5px solid var(--primary);
  box-shadow:0 12px 28px rgba(9,15,25,.08);
  transition:
    transform .32s ease,
    color .32s ease,
    border-color .32s ease,
    box-shadow .32s ease;
}

.btn--profile::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  transform:translateX(105%);
  transition:transform .38s cubic-bezier(.22,.8,.22,1);
}

.btn--profile::after{
  content:"";
  position:absolute;
  width:85px;
  height:85px;
  top:-48px;
  left:-42px;
  border-radius:50%;
  background:rgba(255,255,255,.14);
  transform:scale(0);
  transition:transform .42s ease;
}

.btn--profile i{
  position:relative;
  z-index:2;
  transition:transform .3s ease;
}

.btn--profile span{
  position:relative;
  z-index:2;
}

.btn--profile i:first-child{
  font-size:20px;
}

.btn--profile i:last-child{
  font-size:11px;
  opacity:.72;
}

.btn--profile:hover,
.btn--profile:focus-visible{
  color:#fff;
  border-color:var(--primary);
  transform:translateY(-5px);
  box-shadow:0 20px 42px rgba(237,27,47,.25);
}

.btn--profile:hover::before,
.btn--profile:focus-visible::before{
  transform:translateX(0);
}

.btn--profile:hover::after,
.btn--profile:focus-visible::after{
  transform:scale(2.2);
}

.btn--profile:hover i:first-child,
.btn--profile:focus-visible i:first-child{
  transform:rotate(-8deg) scale(1.12);
}

.btn--profile:hover i:last-child,
.btn--profile:focus-visible i:last-child{
  transform:translate(-3px,-3px);
}

.btn--profile:focus-visible{
  outline:3px solid rgba(237,27,47,.20);
  outline-offset:4px;
}

@media(max-width:600px){
  .about-buttons{
    align-items:stretch;
    flex-direction:column;
  }

  .about-buttons .btn{
    width:100%;
  }
}


/* ===== FIX: توحيد مستوى وحجم زري من نحن ===== */
.about-buttons{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start;
  gap:16px;
  margin-top:28px;
  flex-wrap:nowrap;
}

.about-buttons .btn,
.about-buttons .btn--about,
.about-buttons .btn--profile{
  width:auto;
  min-width:220px;
  height:70px !important;
  min-height:70px !important;
  margin:0 !important;
  padding:0 26px !important;
  align-self:center !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px;
  line-height:1 !important;
  box-sizing:border-box;
  position:relative;
  top:0 !important;
  bottom:auto !important;
  vertical-align:middle;
}

.about-buttons .btn--profile{
  transform:translateY(0);
}

.about-buttons .btn--about:hover{
  transform:translateY(-4px);
}

.about-buttons .btn--profile:hover,
.about-buttons .btn--profile:focus-visible{
  transform:translateY(-4px);
}

@media(max-width:600px){
  .about-buttons{
    align-items:stretch !important;
    flex-direction:column;
    flex-wrap:nowrap;
  }

  .about-buttons .btn,
  .about-buttons .btn--about,
  .about-buttons .btn--profile{
    width:100%;
    min-width:0;
    height:62px !important;
    min-height:62px !important;
  }
}


/* ===== Footer premium interactions ===== */
.footer{
  position:relative;
  overflow:hidden;
}

.footer::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 88% 18%,rgba(237,27,47,.08),transparent 28%),
    radial-gradient(circle at 12% 82%,rgba(237,27,47,.05),transparent 24%);
}

/* عناوين أعمدة الفوتر */
.footer h3{
  position:relative;
  display:inline-block;
  padding-bottom:10px;
}

.footer h3::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:34px;
  height:2px;
  border-radius:4px;
  background:var(--primary);
  transition:width .35s ease;
}

.footer > .container > div:hover h3::after,
.footer-grid > div:hover h3::after{
  width:100%;
}

/* روابط الفوتر */
.footer li a{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:
    color .28s ease,
    transform .28s ease;
}

.footer li a::before{
  content:"";
  width:0;
  height:2px;
  border-radius:4px;
  background:var(--primary);
  transition:width .28s ease;
}

.footer li a:hover,
.footer li a:focus-visible{
  color:#fff;
  transform:translateX(-6px);
}

.footer li a:hover::before,
.footer li a:focus-visible::before{
  width:14px;
}

/* بيانات التواصل */
.footer-contact a,
.footer-contact span{
  position:relative;
  width:fit-content;
  padding:7px 10px;
  border-radius:10px;
  transition:
    transform .28s ease,
    background .28s ease,
    color .28s ease;
}

.footer-contact a:hover,
.footer-contact span:hover{
  color:#fff;
  background:rgba(255,255,255,.045);
  transform:translateX(-5px);
}

.footer-contact i{
  transition:transform .28s ease,text-shadow .28s ease;
}

.footer-contact a:hover i,
.footer-contact span:hover i{
  transform:scale(1.15) rotate(-6deg);
  text-shadow:0 0 14px rgba(237,27,47,.45);
}

/* نموذج النشرة البريدية */
.newsletter{
  position:relative;
  overflow:hidden;
  transition:
    transform .32s ease,
    border-color .32s ease,
    box-shadow .32s ease,
    background .32s ease;
}

.newsletter::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.08),transparent);
  transform:translateX(110%);
  transition:transform .7s ease;
  pointer-events:none;
}

.newsletter:focus-within,
.newsletter:hover{
  transform:translateY(-4px);
  border-color:rgba(237,27,47,.55);
  box-shadow:
    0 16px 34px rgba(0,0,0,.28),
    0 0 0 3px rgba(237,27,47,.08);
  background:#151c28;
}

.newsletter:hover::before,
.newsletter:focus-within::before{
  transform:translateX(-110%);
}

.newsletter input{
  transition:color .28s ease,background .28s ease;
}

.newsletter input::placeholder{
  transition:color .28s ease;
}

.newsletter:focus-within input::placeholder{
  color:#d9dee6;
}

.newsletter button{
  position:relative;
  overflow:hidden;
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    background .28s ease;
}

.newsletter button::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,#ff4254,var(--primary-dark));
  transform:scale(0);
  transition:transform .28s ease;
}

.newsletter button i{
  position:relative;
  z-index:1;
  transition:transform .28s ease;
}

.newsletter button:hover,
.newsletter button:focus-visible{
  transform:scale(1.08);
  box-shadow:0 10px 24px rgba(237,27,47,.32);
}

.newsletter button:hover::before,
.newsletter button:focus-visible::before{
  transform:scale(1);
}

.newsletter button:hover i,
.newsletter button:focus-visible i{
  transform:translateX(-5px);
}

/* شعار رؤية 2030 */
.vision-logo{
  transition:
    transform .4s ease,
    opacity .4s ease,
    filter .4s ease;
}

.vision-logo:hover{
  transform:translateY(-5px) scale(1.035);
  opacity:1;
  filter:brightness(0) invert(1) drop-shadow(0 12px 24px rgba(255,255,255,.10));
}

/* السوشيال ميديا */
.footer .socials a{
  position:relative;
  overflow:hidden;
  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease,
    color .3s ease;
}

.footer .socials a::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  transform:scale(0);
  transition:transform .3s ease;
}

.footer .socials a i{
  position:relative;
  z-index:1;
  transition:transform .3s ease;
}

.footer .socials a:hover,
.footer .socials a:focus-visible{
  color:#fff;
  border-color:var(--primary);
  transform:translateY(-6px) scale(1.06);
  box-shadow:0 14px 28px rgba(237,27,47,.28);
}

.footer .socials a:hover::before,
.footer .socials a:focus-visible::before{
  transform:scale(1);
}

.footer .socials a:hover i,
.footer .socials a:focus-visible i{
  transform:rotate(-8deg) scale(1.12);
}

/* الشعار والنبذة */
.brand--footer{
  transition:transform .3s ease;
}

.brand--footer:hover{
  transform:translateX(-5px);
}

.brand--footer img{
  transition:transform .35s ease,filter .35s ease;
}

.brand--footer:hover img{
  transform:rotate(-5deg) scale(1.06);
  filter:drop-shadow(0 10px 18px rgba(237,27,47,.22));
}

/* الخط السفلي وحقوق النشر */
.footer-bottom{
  position:relative;
}

.footer-bottom::before{
  content:"";
  position:absolute;
  top:-1px;
  right:0;
  width:0;
  height:1px;
  background:linear-gradient(90deg,var(--primary),transparent);
  transition:width .8s ease;
}

.footer-bottom:hover::before{
  width:100%;
}

@media(max-width:600px){
  .footer li a:hover,
  .footer li a:focus-visible,
  .footer-contact a:hover,
  .footer-contact span:hover{
    transform:translateX(-3px);
  }
}


/* ===== وسائل التواصل العائمة + زر العودة للأعلى ===== */
.floating-contact{
  position:fixed;
  left:24px;
  bottom:24px;
  z-index:1100;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

.floating-contact__item{
  --contact-color:#ed1b2f;
  position:relative;
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  overflow:visible;
  border-radius:50%;
  color:#fff;
  font-size:24px;
  background:var(--contact-color);
  border:1px solid rgba(255,255,255,.30);
  box-shadow:
    0 14px 30px rgba(0,0,0,.22),
    0 0 0 0 color-mix(in srgb,var(--contact-color) 45%,transparent);
  transition:
    transform .30s ease,
    box-shadow .30s ease,
    filter .30s ease;
  animation:floatingContactPulse 2.2s ease-out infinite;
}

.floating-contact__item::before,
.floating-contact__item::after{
  content:"";
  position:absolute;
  inset:-8px;
  z-index:-1;
  border-radius:50%;
  border:1px solid color-mix(in srgb,var(--contact-color) 48%,transparent);
  opacity:0;
  animation:floatingContactRing 2.2s ease-out infinite;
}

.floating-contact__item::after{
  inset:-16px;
  animation-delay:.55s;
}

.floating-contact__item--location{
  --contact-color:#ff4c5c;
  animation-delay:0s;
}

.floating-contact__item--phone{
  --contact-color:#2388ed;
  animation-delay:.35s;
}

.floating-contact__item--whatsapp{
  --contact-color:#25d366;
  animation-delay:.7s;
}

.floating-contact__item i{
  position:relative;
  z-index:2;
  transition:transform .30s ease;
}

.floating-contact__item:hover,
.floating-contact__item:focus-visible{
  transform:translateY(-5px) scale(1.08);
  filter:saturate(1.12);
  box-shadow:
    0 20px 38px rgba(0,0,0,.28),
    0 0 28px color-mix(in srgb,var(--contact-color) 55%,transparent);
  animation-play-state:paused;
}

.floating-contact__item:hover::before,
.floating-contact__item:hover::after,
.floating-contact__item:focus-visible::before,
.floating-contact__item:focus-visible::after{
  animation-play-state:paused;
}

.floating-contact__item:hover i,
.floating-contact__item:focus-visible i{
  transform:rotate(-8deg) scale(1.14);
}

.floating-contact__tooltip{
  position:absolute;
  left:calc(100% + 12px);
  top:50%;
  padding:7px 11px;
  border-radius:9px;
  color:#fff;
  background:rgba(8,12,18,.92);
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  transform:translate(-8px,-50%);
  box-shadow:0 10px 25px rgba(0,0,0,.22);
  transition:
    opacity .25s ease,
    visibility .25s ease,
    transform .25s ease;
  pointer-events:none;
}

.floating-contact__tooltip::before{
  content:"";
  position:absolute;
  right:100%;
  top:50%;
  border:6px solid transparent;
  border-left-color:rgba(8,12,18,.92);
  transform:translateY(-50%);
}

.floating-contact__item:hover .floating-contact__tooltip,
.floating-contact__item:focus-visible .floating-contact__tooltip{
  opacity:1;
  visibility:visible;
  transform:translate(0,-50%);
}

@keyframes floatingContactPulse{
  0%,100%{
    box-shadow:
      0 14px 30px rgba(0,0,0,.22),
      0 0 0 0 color-mix(in srgb,var(--contact-color) 40%,transparent);
  }
  55%{
    box-shadow:
      0 16px 34px rgba(0,0,0,.24),
      0 0 0 12px transparent;
  }
}

@keyframes floatingContactRing{
  0%{
    opacity:.60;
    transform:scale(.82);
  }
  75%,100%{
    opacity:0;
    transform:scale(1.30);
  }
}

/* زر العودة إلى الأعلى */
.to-top--premium{
  right:24px;
  bottom:24px;
  width:58px;
  height:58px;
  overflow:visible;
  font-size:20px;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 14px 32px rgba(237,27,47,.30);
}

.to-top--premium::before{
  content:"";
  position:absolute;
  inset:-7px;
  z-index:-1;
  border-radius:50%;
  border:1px solid rgba(237,27,47,.40);
  opacity:0;
  transform:scale(.82);
  transition:opacity .30s ease,transform .30s ease;
}

.to-top--premium i{
  transition:transform .30s ease;
}

.to-top--premium:hover,
.to-top--premium:focus-visible{
  transform:translateY(-6px) scale(1.08);
  background:linear-gradient(135deg,#ff4052,#a70d1c);
  box-shadow:
    0 20px 42px rgba(237,27,47,.42),
    0 0 28px rgba(237,27,47,.30);
}

.to-top--premium:hover::before,
.to-top--premium:focus-visible::before{
  opacity:1;
  transform:scale(1.18);
}

.to-top--premium:hover i,
.to-top--premium:focus-visible i{
  transform:translateY(-5px);
}

.to-top--premium:active{
  transform:translateY(-2px) scale(.98);
}

@media(max-width:600px){
  .floating-contact{
    left:14px;
    bottom:14px;
    gap:11px;
  }

  .floating-contact__item,
  .to-top--premium{
    width:50px;
    height:50px;
    font-size:21px;
  }

  .to-top--premium{
    right:14px;
    bottom:14px;
  }

  .floating-contact__tooltip{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .floating-contact__item,
  .floating-contact__item::before,
  .floating-contact__item::after{
    animation:none !important;
  }
}


/* ===== FIX: توحيد مستوى عنصر خدماتنا مع باقي عناصر الناف بار ===== */
.nav-links > li{
  display:flex;
  align-items:center;
  height:82px;
}

.nav-links > li > a,
.nav-dropdown-toggle{
  min-height:82px;
  height:82px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:0 !important;
  padding-bottom:0 !important;
  line-height:1 !important;
  margin:0 !important;
  top:0 !important;
}

.nav-dropdown-toggle{
  position:relative;
  gap:7px;
  transform:translateY(0) !important;
}

.nav-dropdown-toggle span{
  display:inline-flex;
  align-items:center;
  line-height:1;
}

.nav-dropdown-toggle i{
  position:relative;
  top:1px;
  margin:0;
  line-height:1;
}

.nav-links > li > a::after,
.nav-dropdown-toggle::after{
  bottom:18px;
}

@media(max-width:900px){
  .nav-links > li{
    display:block;
    height:auto;
  }

  .nav-links > li > a,
  .nav-dropdown-toggle{
    min-height:auto;
    height:auto;
    justify-content:space-between;
    padding:14px 5px !important;
  }

  .nav-dropdown-toggle i{
    top:0;
  }
}


/* ===== FIX: منع شفافية قائمة خدماتنا المنسدلة ===== */
.services-dropdown{
  background:#ffffff !important;
  opacity:0;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:
    0 28px 70px rgba(8,12,18,.22),
    0 0 0 1px rgba(11,15,23,.06) !important;
}

.nav-item--dropdown:hover .services-dropdown,
.nav-item--dropdown:focus-within .services-dropdown,
.nav-item--dropdown.is-open .services-dropdown{
  opacity:1 !important;
}

.services-dropdown::before{
  background:#ffffff !important;
}

.services-dropdown__header,
.services-dropdown__grid,
.dropdown-service{
  position:relative;
  z-index:2;
}

.dropdown-service{
  background:#ffffff !important;
}

.dropdown-service:hover{
  background:#fff7f8 !important;
}

/* طبقة بيضاء كاملة خلف محتوى القائمة لضمان عدم ظهور ما وراءها */
.services-dropdown::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  background:#ffffff;
  pointer-events:none;
}

/* الجوال */
@media(max-width:900px){
  .services-dropdown{
    background:#ffffff !important;
  }
}


/* ===== حقل رفع الملفات المتقدم ===== */
.upload--advanced{
  min-height:142px;
  padding:20px 24px;
  border:1.5px dashed #cbd1da;
  border-radius:16px;
  display:flex;
  align-items:center !important;
  justify-content:flex-start;
  gap:18px;
  color:var(--muted) !important;
  background:#fbfcfd;
  cursor:pointer;
  transition:
    transform .32s ease,
    border-color .32s ease,
    background .32s ease,
    box-shadow .32s ease;
}

.upload--advanced:hover,
.upload--advanced:focus-within{
  transform:translateY(-4px);
  border-color:var(--primary);
  background:#fff8f9;
  box-shadow:
    0 18px 38px rgba(9,15,25,.09),
    0 0 0 4px rgba(237,27,47,.06);
}

.upload__icon{
  flex:0 0 64px;
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border-radius:17px;
  color:#fff;
  font-size:25px;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  box-shadow:0 14px 28px rgba(237,27,47,.24);
  transition:transform .32s ease,box-shadow .32s ease;
}

.upload--advanced:hover .upload__icon{
  transform:translateY(-3px) rotate(-6deg) scale(1.06);
  box-shadow:0 18px 36px rgba(237,27,47,.34);
}

.upload__content{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  text-align:right;
}

.upload__content strong{
  color:var(--ink);
  font-size:16px;
}

.upload__content > span{
  color:var(--muted);
  font-size:13px;
}

.upload__content small{
  color:#8b93a0;
  font-size:11px;
}

.upload__formats{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  margin:5px 0 2px;
}

.upload__format{
  min-width:46px;
  padding:5px 9px;
  border-radius:8px;
  text-align:center;
  font-size:10px;
  font-weight:900;
  letter-spacing:.3px;
  border:1px solid transparent;
  transition:transform .25s ease,box-shadow .25s ease;
}

.upload__format--pdf{
  color:#c91528;
  background:#fff0f2;
  border-color:#ffd2d8;
}

.upload__format--word{
  color:#1f5fbf;
  background:#eef5ff;
  border-color:#cfe0fb;
}

.upload__format--excel{
  color:#16824f;
  background:#eefaf4;
  border-color:#cdebdc;
}

.upload--advanced:hover .upload__format{
  transform:translateY(-2px);
}

.upload--advanced input{
  display:none;
}

@media(max-width:600px){
  .upload--advanced{
    min-height:150px;
    padding:17px;
    align-items:flex-start !important;
  }

  .upload__icon{
    flex-basis:54px;
    width:54px;
    height:54px;
    font-size:22px;
  }

  .upload__content strong{
    font-size:15px;
  }

  .upload__formats{
    gap:5px;
  }

  .upload__format{
    min-width:42px;
    padding:4px 7px;
  }
}


/* ===== تصغير كروت قائمة خدماتنا وإظهار الخدمات كاملة ===== */
@media (min-width: 901px){
  .services-dropdown{
    width:min(1040px,94vw) !important;
    max-height:calc(100vh - 125px);
    padding:18px 20px 20px !important;
    overflow-y:auto;
    overscroll-behavior:contain;
  }

  .services-dropdown__header{
    padding:0 4px 12px !important;
    margin-bottom:12px !important;
  }

  .services-dropdown__header strong{
    font-size:22px;
  }

  .services-dropdown__grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  .dropdown-service{
    min-height:116px !important;
    padding:14px 10px !important;
    gap:8px !important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    border-color:rgba(11,15,23,.08);
    border-radius:14px;
  }

  .dropdown-service>i{
    flex:0 0 48px !important;
    width:48px !important;
    height:48px !important;
    font-size:20px !important;
    border-radius:13px !important;
  }

  .dropdown-service span{
    align-items:center;
    line-height:1.35 !important;
  }

  .dropdown-service strong{
    font-size:14px !important;
    white-space:nowrap;
  }

  .dropdown-service small{
    font-size:10px !important;
    line-height:1.45;
  }

  .dropdown-service:hover{
    transform:translateY(-4px) !important;
  }
}

@media (min-width: 901px) and (max-width: 1180px){
  .services-dropdown{
    width:min(900px,94vw) !important;
  }

  .services-dropdown__grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }

  .dropdown-service{
    min-height:108px !important;
    padding:12px 8px !important;
  }

  .dropdown-service strong{
    font-size:13px !important;
  }

  .dropdown-service small{
    font-size:9.5px !important;
  }
}


/* ===== FIX: إلغاء الخط الأحمر الممتد داخل كروت قائمة الخدمات ===== */
.services-dropdown .dropdown-service::after,
.services-dropdown .dropdown-service:hover::after,
.services-dropdown .dropdown-service:focus-visible::after,
.services-dropdown .dropdown-service:focus-within::after{
  content:none !important;
  display:none !important;
  width:0 !important;
  height:0 !important;
  background:none !important;
  transform:none !important;
}

/* الحفاظ على تأثير Hover بدون خط */
.services-dropdown .dropdown-service:hover,
.services-dropdown .dropdown-service:focus-visible,
.services-dropdown .dropdown-service:focus-within{
  border-color:rgba(237,27,47,.28) !important;
  box-shadow:
    0 14px 30px rgba(9,15,25,.10),
    0 0 0 1px rgba(237,27,47,.07) !important;
}

/* منع أي خط سفلي قادم من روابط داخل الكارت */
.services-dropdown .dropdown-service::before{
  border-bottom:0 !important;
}

.services-dropdown .dropdown-service span::after,
.services-dropdown .dropdown-service strong::after,
.services-dropdown .dropdown-service small::after{
  content:none !important;
  display:none !important;
}


/* ===== ضبط المسافات الرأسية بين أقسام الصفحة ===== */

/* رفع قسم خدماتنا وتقليل الفراغ قبله وبعده */
#services,
.services-section{
  padding-top:72px !important;
  padding-bottom:78px !important;
}

#services .section-head,
.services-section .section-head{
  margin-bottom:42px !important;
}

#services .service-grid,
.services-section .service-grid{
  margin-top:0 !important;
}

/* تقليل الفراغ بين قسم الأسئلة/الآراء وقسم أعمالنا */
#portfolio,
.portfolio-section{
  padding-top:74px !important;
  padding-bottom:82px !important;
}

#portfolio .section-head,
.portfolio-section .section-head{
  margin-bottom:42px !important;
}

/* ضبط الحاوية السابقة لأعمالنا حتى لا تترك فراغاً كبيراً */
.faq-testimonials{
  padding-bottom:72px !important;
}

.faq-testimonials + #portfolio,
.faq-testimonials + .portfolio-section{
  margin-top:0 !important;
}

/* توحيد المسافات العامة للعناوين */
.section-head{
  margin-bottom:44px;
}

.section-head .eyebrow{
  margin-bottom:12px;
}

.section-head h2{
  margin-top:0;
  margin-bottom:14px;
}

.section-head p{
  margin-top:0;
}

/* منع الهوامش الزائدة غير المقصودة بين الأقسام */
main > section{
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/* نسخة متوازنة للشاشات المتوسطة */
@media(max-width:1000px){
  #services,
  .services-section,
  #portfolio,
  .portfolio-section{
    padding-top:62px !important;
    padding-bottom:68px !important;
  }

  .faq-testimonials{
    padding-bottom:62px !important;
  }

  .section-head{
    margin-bottom:36px !important;
  }
}

/* نسخة متوازنة للجوال */
@media(max-width:600px){
  #services,
  .services-section,
  #portfolio,
  .portfolio-section{
    padding-top:52px !important;
    padding-bottom:56px !important;
  }

  .faq-testimonials{
    padding-bottom:52px !important;
  }

  .section-head{
    margin-bottom:30px !important;
  }
}

/* ===== الخطوة الأولى: إخفاء شريط السوشيال ميديا على الموبايل فقط ===== */
@media (max-width: 767px){
  .topbar{
    display: none !important;
  }
}

/* ===== الموبايل - الخطوة الثانية: رفع محتوى السلايدر وترتيب الأزرار وتحسين زر القائمة ===== */
@media (max-width: 600px){
  /* رفع محتوى السلايدر قليلًا مع الحفاظ على ظهوره بالكامل */
  .hero-slide .hero__content{
    min-height:690px;
    align-items:flex-end;
  }

  .hero-slide .hero__copy{
    padding:165px 0 132px !important;
  }

  /* الأزرار تحت بعضها وبعرض واضح ومريح */
  .hero-slide .hero__actions{
    display:flex;
    flex-direction:column !important;
    align-items:stretch;
    gap:12px;
    width:100%;
    margin-top:24px;
  }

  .hero-slide .hero__actions .btn{
    width:100% !important;
    min-height:58px;
    justify-content:center;
    margin:0;
  }

  /* إبقاء نقاط السلايدر بعيدًا عن الأزرار */
  .hero-slider__pagination{
    bottom:22px !important;
  }

  /* زر قائمة حديث داخل مربع أنيق */
  .nav-toggle{
    position:relative;
    display:flex !important;
    width:48px;
    height:48px;
    padding:0;
    margin:0;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:6px;
    border:1px solid #e5e8ee;
    border-radius:14px;
    background:#fff;
    box-shadow:0 7px 20px rgba(11,15,23,.08);
    cursor:pointer;
    transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background .25s ease;
    z-index:1002;
  }

  .nav-toggle:hover,
  .nav-toggle:focus-visible{
    border-color:rgba(237,27,47,.35);
    box-shadow:0 9px 24px rgba(11,15,23,.12);
    outline:none;
  }

  .nav-toggle span{
    display:block;
    width:23px;
    height:2px;
    margin:0 !important;
    border-radius:999px;
    background:#111722;
    transform-origin:center;
    transition:transform .3s ease,opacity .2s ease,width .3s ease,background .3s ease;
  }

  .nav-toggle span:nth-child(2){
    width:17px;
    align-self:flex-start;
    margin-right:12px !important;
  }

  /* تتحول الأيقونة إلى X عند فتح القائمة */
  .nav-open .nav-toggle{
    background:#111722;
    border-color:#111722;
    transform:rotate(180deg);
  }

  .nav-open .nav-toggle span{
    position:absolute;
    width:23px;
    margin:0 !important;
    background:#fff;
  }

  .nav-open .nav-toggle span:nth-child(1){transform:rotate(45deg)}
  .nav-open .nav-toggle span:nth-child(2){opacity:0;transform:scaleX(0)}
  .nav-open .nav-toggle span:nth-child(3){transform:rotate(-45deg)}
}


/* ===== الموبايل - الخطوة الثالثة المصححة: إجراءات مستقلة دون تغيير سطح المكتب ===== */
.mobile-nav-actions{display:none}

@media (max-width:600px){
  .container.navbar__inner{
    width:calc(100% - 16px);
    min-height:76px;
    display:grid;
    grid-template-columns:46px minmax(0,1fr) 48px;
    grid-template-areas:"toggle actions brand";
    align-items:center;
    gap:7px;
    direction:ltr;
  }

  .brand{
    grid-area:brand;
    direction:rtl;
    justify-self:end;
    min-width:0;
  }

  .brand img{width:46px;height:46px}

  .nav-toggle{
    grid-area:toggle;
    justify-self:start;
    width:44px;
    height:44px;
    border-radius:12px;
  }

  .mobile-nav-actions{
    grid-area:actions;
    display:flex;
    direction:rtl;
    align-items:center;
    justify-content:center;
    gap:5px;
    min-width:0;
  }

  .mobile-nav-actions .btn--sm{
    min-height:42px;
    padding:8px 10px;
    border-radius:11px;
    font-size:11px;
    line-height:1.15;
    white-space:nowrap;
    flex:0 1 auto;
  }

  .mobile-nav-actions .icon-btn{
    width:42px;
    min-width:42px;
    height:42px;
    padding:0;
    border-radius:11px;
    flex:none;
  }

  .mobile-nav-actions .language-btn{
    width:55px;
    min-width:55px;
    gap:4px;
  }

  .mobile-nav-actions .language-btn span{font-size:10px}
  .mobile-nav-actions .icon-btn i{font-size:16px}

  .nav-panel{
    top:76px;
    height:calc(100vh - 76px);
  }

  /* إجراءات النسخة المكتبية تظل داخل القائمة الجانبية فقط على الموبايل */
  .nav-panel .nav-actions{display:none !important}
}

@media (max-width:390px){
  .container.navbar__inner{
    grid-template-columns:42px minmax(0,1fr) 43px;
    gap:4px;
  }
  .brand img{width:42px;height:42px}
  .nav-toggle{width:40px;height:40px}
  .mobile-nav-actions{gap:4px}
  .mobile-nav-actions .btn--sm{min-height:39px;padding:7px 7px;font-size:10px}
  .mobile-nav-actions .icon-btn{width:39px;min-width:39px;height:39px}
  .mobile-nav-actions .language-btn{width:49px;min-width:49px}
}

/* ===== ضبط نهائي للهيدر على الموبايل فقط ===== */
@media (max-width: 767px){
  .navbar,
  .navbar.is-sticky{
    height:auto !important;
  }

  .container.navbar__inner{
    width:100% !important;
    max-width:none !important;
    min-height:82px !important;
    padding:10px 12px !important;
    margin:0 !important;
    display:grid !important;
    grid-template-columns:44px minmax(0,1fr) 48px !important;
    grid-template-areas:"toggle actions brand" !important;
    align-items:center !important;
    column-gap:7px !important;
    direction:ltr !important;
  }

  .navbar__inner > .brand{
    grid-area:brand !important;
    justify-self:end !important;
    width:48px !important;
    min-width:48px !important;
    margin:0 !important;
  }

  .navbar__inner > .brand img{
    display:block !important;
    width:48px !important;
    height:58px !important;
    object-fit:contain !important;
  }

  .navbar__inner > .brand span{
    display:none !important;
  }

  .navbar__inner > .nav-toggle{
    grid-area:toggle !important;
    position:relative !important;
    inset:auto !important;
    justify-self:start !important;
    width:44px !important;
    height:44px !important;
    margin:0 !important;
  }

  .navbar__inner > .mobile-nav-actions{
    grid-area:actions !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    flex-direction:row !important;
    gap:6px !important;
    min-width:0 !important;
    width:100% !important;
    direction:rtl !important;
    margin:0 !important;
  }

  .mobile-nav-actions .btn--sm{
    flex:0 1 126px !important;
    width:auto !important;
    max-width:126px !important;
    min-width:0 !important;
    min-height:44px !important;
    padding:8px 11px !important;
    border-radius:12px !important;
    font-size:12px !important;
    white-space:nowrap !important;
  }

  .mobile-nav-actions .icon-btn{
    flex:0 0 44px !important;
    width:44px !important;
    min-width:44px !important;
    height:44px !important;
    padding:0 !important;
    border-radius:12px !important;
  }

  .mobile-nav-actions .language-btn{
    flex-basis:58px !important;
    width:58px !important;
    min-width:58px !important;
  }

  .nav-panel{
    top:82px !important;
    height:calc(100vh - 82px) !important;
  }
}

@media (max-width: 420px){
  .container.navbar__inner{
    grid-template-columns:40px minmax(0,1fr) 43px !important;
    padding-inline:8px !important;
    column-gap:4px !important;
  }

  .navbar__inner > .nav-toggle{
    width:40px !important;
    height:40px !important;
  }

  .navbar__inner > .brand,
  .navbar__inner > .brand img{
    width:43px !important;
    min-width:43px !important;
  }

  .mobile-nav-actions{
    gap:4px !important;
  }

  .mobile-nav-actions .btn--sm{
    flex-basis:105px !important;
    max-width:105px !important;
    min-height:40px !important;
    padding-inline:7px !important;
    font-size:10.5px !important;
  }

  .mobile-nav-actions .icon-btn{
    flex-basis:40px !important;
    width:40px !important;
    min-width:40px !important;
    height:40px !important;
  }

  .mobile-nav-actions .language-btn{
    flex-basis:51px !important;
    width:51px !important;
    min-width:51px !important;
  }
}


/* === Mobile navbar step 7: precise fixed order and menu proportions === */
@media (max-width: 767px) {
  .container.navbar__inner{
    width:100% !important;
    max-width:none !important;
    min-height:88px !important;
    padding:10px 14px !important;
    margin:0 !important;
    display:grid !important;
    grid-template-columns:58px minmax(0,1fr) 54px !important;
    grid-template-areas:"toggle actions brand" !important;
    align-items:center !important;
    column-gap:9px !important;
    direction:ltr !important;
  }

  .navbar__inner > .nav-toggle{
    grid-area:toggle !important;
    justify-self:start !important;
    width:58px !important;
    min-width:58px !important;
    height:54px !important;
    padding:0 !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-direction:column !important;
    gap:6px !important;
    border-radius:14px !important;
  }

  .navbar__inner > .nav-toggle span{
    position:static !important;
    display:block !important;
    width:28px !important;
    height:2.5px !important;
    margin:0 !important;
    align-self:center !important;
    transform:none !important;
    border-radius:999px !important;
  }

  .navbar__inner > .nav-toggle span:nth-child(2){
    width:22px !important;
    margin:0 !important;
    align-self:center !important;
  }

  .navbar__inner > .mobile-nav-actions{
    grid-area:actions !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    flex-direction:row !important;
    direction:ltr !important;
    gap:7px !important;
    min-width:0 !important;
    width:100% !important;
    margin:0 !important;
  }

  /* Exact order: quote, language, search */
  .mobile-nav-actions > .btn--sm{
    order:1 !important;
    flex:0 1 150px !important;
    max-width:150px !important;
    min-width:118px !important;
    min-height:54px !important;
    padding:10px 15px !important;
    border-radius:14px !important;
    font-size:13px !important;
    white-space:nowrap !important;
  }

  .mobile-nav-actions > .language-btn{
    order:2 !important;
    flex:0 0 72px !important;
    width:72px !important;
    min-width:72px !important;
    height:54px !important;
    border-radius:14px !important;
  }

  .mobile-nav-actions > .search-open{
    order:3 !important;
    flex:0 0 54px !important;
    width:54px !important;
    min-width:54px !important;
    height:54px !important;
    border-radius:14px !important;
  }

  .navbar__inner > .brand{
    grid-area:brand !important;
    justify-self:end !important;
    width:54px !important;
    min-width:54px !important;
    margin:0 !important;
  }

  .navbar__inner > .brand img{
    width:54px !important;
    height:64px !important;
    object-fit:contain !important;
  }

  .navbar__inner > .brand span{
    display:none !important;
  }

  .nav-panel{
    top:88px !important;
    height:calc(100vh - 88px) !important;
  }

  /* Preserve the X animation when the menu opens */
  .nav-open .navbar__inner > .nav-toggle span{
    position:absolute !important;
    width:26px !important;
  }
  .nav-open .navbar__inner > .nav-toggle span:nth-child(1){
    transform:rotate(45deg) !important;
  }
  .nav-open .navbar__inner > .nav-toggle span:nth-child(2){
    opacity:0 !important;
    transform:scaleX(0) !important;
  }
  .nav-open .navbar__inner > .nav-toggle span:nth-child(3){
    transform:rotate(-45deg) !important;
  }
}

@media (max-width: 430px) {
  .container.navbar__inner{
    grid-template-columns:54px minmax(0,1fr) 48px !important;
    padding-inline:9px !important;
    column-gap:5px !important;
  }

  .navbar__inner > .nav-toggle{
    width:54px !important;
    min-width:54px !important;
    height:50px !important;
  }

  .mobile-nav-actions{
    gap:5px !important;
  }

  .mobile-nav-actions > .btn--sm{
    flex-basis:126px !important;
    max-width:126px !important;
    min-width:105px !important;
    min-height:50px !important;
    padding-inline:10px !important;
    font-size:11px !important;
  }

  .mobile-nav-actions > .language-btn{
    flex-basis:62px !important;
    width:62px !important;
    min-width:62px !important;
    height:50px !important;
  }

  .mobile-nav-actions > .search-open{
    flex-basis:50px !important;
    width:50px !important;
    min-width:50px !important;
    height:50px !important;
  }

  .navbar__inner > .brand,
  .navbar__inner > .brand img{
    width:48px !important;
    min-width:48px !important;
  }
}


/* === Mobile step8: reduce top gap in services drawer === */
@media (max-width:767px){
  .nav-panel .services-section,
  .mobile-menu .services-section,
  .offcanvas .services-section,
  .mega-menu-mobile,
  .mobile-services{
    margin-top:12px !important;
    padding-top:8px !important;
  }
  .nav-panel .services-section h2,
  .nav-panel .services-section h3,
  .mobile-menu .services-section h2,
  .mobile-menu .services-section h3{
    margin-top:0 !important;
  }
  .nav-panel,
  .mobile-menu,
  .offcanvas-body{
    padding-top:12px !important;
  }
}

/* === Mobile step9: services drawer starts directly below navbar === */
@media (max-width: 767px){
  .nav-item--dropdown.is-open .services-dropdown{
    position:fixed !important;
    top:88px !important;
    right:0 !important;
    left:0 !important;
    bottom:0 !important;
    width:100% !important;
    max-width:none !important;
    max-height:none !important;
    height:calc(100vh - 88px) !important;
    margin:0 !important;
    padding:22px 28px 32px !important;
    border:0 !important;
    border-radius:0 !important;
    overflow-y:auto !important;
    transform:none !important;
    background:#fff !important;
    box-shadow:none !important;
    z-index:1700 !important;
  }

  .nav-item--dropdown.is-open .services-dropdown__header{
    margin:0 0 18px !important;
    padding:0 0 16px !important;
  }

  .nav-item--dropdown.is-open .services-dropdown__grid{
    margin:0 !important;
    padding:0 !important;
  }
}

@media (max-width: 430px){
  .nav-item--dropdown.is-open .services-dropdown{
    top:88px !important;
    height:calc(100vh - 88px) !important;
    padding:18px 22px 28px !important;
  }
}


/* === Mobile step 10: hero buttons side by side + slider dots below === */
@media (max-width: 767px) {
  /* Put the two hero CTA buttons beside each other */
  .hero__actions,
  .hero-actions,
  .slide-actions,
  .hero-content .actions,
  .hero .actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: stretch !important;
    margin-top: 24px !important;
  }

  .hero__actions > *,
  .hero-actions > *,
  .slide-actions > *,
  .hero-content .actions > *,
  .hero .actions > * {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .hero__actions .btn,
  .hero-actions .btn,
  .slide-actions .btn,
  .hero-content .actions .btn,
  .hero .actions .btn {
    min-height: 58px !important;
    padding: 12px 8px !important;
    font-size: 15px !important;
    white-space: nowrap !important;
    border-radius: 13px !important;
    justify-content: center !important;
  }

  /* Keep the three slider indicators centered under the buttons */
  .hero-dots,
  .slider-dots,
  .swiper-pagination,
  .hero__pagination,
  .carousel-indicators {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    min-height: 24px !important;
    margin: 14px auto 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    z-index: 6 !important;
  }

  .hero-dots button,
  .slider-dots button,
  .swiper-pagination-bullet,
  .hero__pagination button,
  .carousel-indicators button {
    display: block !important;
    flex: 0 0 auto !important;
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 999px !important;
    opacity: .65 !important;
  }

  .hero-dots button.active,
  .slider-dots button.active,
  .swiper-pagination-bullet-active,
  .hero__pagination button.active,
  .carousel-indicators button.active {
    width: 36px !important;
    opacity: 1 !important;
  }
}

@media (max-width: 390px) {
  .hero__actions,
  .hero-actions,
  .slide-actions,
  .hero-content .actions,
  .hero .actions {
    gap: 7px !important;
  }

  .hero__actions .btn,
  .hero-actions .btn,
  .slide-actions .btn,
  .hero-content .actions .btn,
  .hero .actions .btn {
    min-height: 54px !important;
    padding-inline: 5px !important;
    font-size: 13px !important;
  }
}


/* === Mobile step 11: raise hero content, narrow CTA buttons, force dots visible === */
@media (max-width: 767px) {
  .hero__content,
  .hero-content,
  .slide-content,
  .hero-slide__content,
  .hero .content {
    transform: translateY(-42px) !important;
  }

  .hero__actions,
  .hero-actions,
  .slide-actions,
  .hero-content .actions,
  .hero .actions {
    width: 88% !important;
    max-width: 520px !important;
    margin: 20px auto 0 !important;
    gap: 10px !important;
  }

  .hero__actions .btn,
  .hero-actions .btn,
  .slide-actions .btn,
  .hero-content .actions .btn,
  .hero .actions .btn {
    min-height: 54px !important;
    padding: 10px 8px !important;
    font-size: 14px !important;
  }

  .hero-dots,
  .slider-dots,
  .swiper-pagination,
  .hero__pagination,
  .carousel-indicators {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    min-height: 22px !important;
    margin: 14px auto 0 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    z-index: 20 !important;
  }

  .hero-dots button,
  .slider-dots button,
  .swiper-pagination-bullet,
  .hero__pagination button,
  .carousel-indicators button {
    display: block !important;
    visibility: visible !important;
    opacity: .65 !important;
    width: 11px !important;
    height: 11px !important;
    min-width: 11px !important;
    flex: 0 0 11px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 999px !important;
  }

  .hero-dots button.active,
  .slider-dots button.active,
  .swiper-pagination-bullet-active,
  .hero__pagination button.active,
  .carousel-indicators button.active {
    width: 34px !important;
    flex-basis: 34px !important;
    opacity: 1 !important;
  }
}

@media (max-width: 430px) {
  .hero__content,
  .hero-content,
  .slide-content,
  .hero-slide__content,
  .hero .content {
    transform: translateY(-34px) !important;
  }

  .hero__actions,
  .hero-actions,
  .slide-actions,
  .hero-content .actions,
  .hero .actions {
    width: 92% !important;
    gap: 7px !important;
  }

  .hero__actions .btn,
  .hero-actions .btn,
  .slide-actions .btn,
  .hero-content .actions .btn,
  .hero .actions .btn {
    min-height: 50px !important;
    font-size: 12px !important;
    padding-inline: 5px !important;
  }
}


/* === Mobile step 12: pagination directly below hero buttons === */
@media (max-width: 767px) {
  .hero-slide.is-active .hero__copy > .hero-slider__pagination {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: max-content !important;
    min-width: 96px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 14px auto 0 !important;
    padding: 7px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 20 !important;
    border-radius: 999px !important;
  }

  .hero-slide.is-active .hero__copy > .hero-slider__pagination .hero-slider__dot {
    display: block !important;
    position: static !important;
    width: 11px !important;
    min-width: 11px !important;
    height: 11px !important;
    flex: 0 0 11px !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: visible !important;
    opacity: .72 !important;
    border-radius: 999px !important;
  }

  .hero-slide.is-active .hero__copy > .hero-slider__pagination .hero-slider__dot.is-active {
    width: 34px !important;
    min-width: 34px !important;
    flex-basis: 34px !important;
    opacity: 1 !important;
  }

  /* Prevent the old absolute pagination position on mobile */
  .hero-slider > .hero-slider__pagination {
    display: none !important;
  }
}


/* === Mobile step 13: dots lower + stats section higher === */
@media (max-width: 767px) {
  /* Increase the distance between buttons and slider dots */
  .hero-slide.is-active .hero__copy > .hero-slider__pagination {
    margin-top: 26px !important;
  }

  /* Pull the statistics card upward to remove the large empty gap */
  .hero-slider + .stats-card,
  .hero > .stats-card,
  .stats-card {
    margin-top: -105px !important;
    transform: none !important;
    position: relative !important;
    z-index: 20 !important;
  }
}

@media (max-width: 430px) {
  .hero-slide.is-active .hero__copy > .hero-slider__pagination {
    margin-top: 24px !important;
  }

  .hero-slider + .stats-card,
  .hero > .stats-card,
  .stats-card {
    margin-top: -95px !important;
  }
}


/* === Mobile step 14: hide about visual card only === */
@media (max-width: 767px) {
  #about .about__media,
  #about .about__media--premium {
    display: none !important;
  }

  #about .split {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  #about .section-copy {
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* === Mobile step 15: sixth stats card + reduce gap before about === */
.hero-stat--mobile-extra {
  display: none;
}

@media (max-width: 767px) {
  /* Show the sixth card on mobile only */
  .hero-stat--mobile-extra {
    display: flex !important;
  }

  /* Keep all six cards in a balanced 2-column grid */
  .hero-stats,
  .hero__stats,
  .stats-card,
  .hero-stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .hero-stat,
  .hero__stat,
  .stats-card__item {
    min-width: 0 !important;
  }

  /* Raise the About section and remove the excessive white gap */
  #about,
  .about-section,
  section.about {
    margin-top: -54px !important;
    padding-top: 54px !important;
  }
}

@media (max-width: 430px) {
  #about,
  .about-section,
  section.about {
    margin-top: -66px !important;
    padding-top: 44px !important;
  }
}


/* === Mobile step 16: lower About slightly + style quick support card === */
@media (max-width: 767px) {
  /* Lower the About section slightly compared with step 15 */
  #about,
  .about-section,
  section.about {
    margin-top: -22px !important;
    padding-top: 68px !important;
  }

  /* Mobile-only sixth card */
  .hero-stat--mobile-extra {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 5px !important;
  }

  .hero-stat--mobile-extra i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    margin-bottom: 3px !important;
    border-radius: 12px !important;
    color: #ef233c !important;
    background: rgba(239, 35, 60, 0.12) !important;
    font-size: 18px !important;
  }

  .hero-stat--mobile-extra strong {
    display: block !important;
  }

  .hero-stat--mobile-extra span {
    display: block !important;
  }
}

@media (max-width: 430px) {
  #about,
  .about-section,
  section.about {
    margin-top: -28px !important;
    padding-top: 62px !important;
  }
}


/* === Mobile step 17: sixth property correctly inside stats card === */
.stats-card__mobile-extra {
  display: none;
}

@media (max-width: 767px) {
  .stats-card {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(112px, auto) !important;
  }

  .stats-card > article {
    min-width: 0 !important;
    min-height: 112px !important;
    padding: 18px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .stats-card__mobile-extra {
    display: flex !important;
  }

  .stats-card__mobile-extra i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    margin-bottom: 7px !important;
    border-radius: 10px !important;
    color: #ef233c !important;
    background: rgba(239, 35, 60, 0.12) !important;
    font-size: 16px !important;
  }

  .stats-card__mobile-extra strong {
    margin-bottom: 4px !important;
  }

  .stats-card__mobile-extra span {
    line-height: 1.55 !important;
  }
}


/* === Mobile step 18: exact 6-cell statistics grid === */
@media (max-width: 767px) {
  .stats-card {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, minmax(110px, auto)) !important;
    grid-auto-flow: row !important;
    grid-auto-rows: unset !important;
    align-items: stretch !important;
    padding: 0 !important;
  }

  /* Cancel the old rule that made item 5 span the full width */
  .stats-card > article,
  .stats-card > article:nth-child(5),
  .stats-card > article:nth-child(6) {
    grid-column: auto !important;
    grid-row: auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 110px !important;
    margin: 0 !important;
    padding: 15px 8px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 0 !important;
  }

  /* Balanced internal separators for the 2 × 3 layout */
  .stats-card > article {
    border-left: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.09) !important;
  }

  .stats-card > article:nth-child(odd) {
    border-left: 1px solid rgba(255,255,255,.09) !important;
  }

  .stats-card > article:nth-child(5),
  .stats-card > article:nth-child(6) {
    border-bottom: 0 !important;
  }

  .stats-card > article strong {
    font-size: 21px !important;
    line-height: 1.25 !important;
    margin: 0 0 6px !important;
  }

  .stats-card > article span {
    font-size: 12px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
  }

  .stats-card__mobile-extra {
    display: flex !important;
  }

  .stats-card__mobile-extra i {
    width: 32px !important;
    height: 32px !important;
    margin: 0 0 7px !important;
    flex: 0 0 32px !important;
  }
}


/* === Desktop step 19: show all six properties in one row === */
@media (min-width: 768px) {
  .stats-card {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-template-rows: 1fr !important;
    grid-auto-flow: column !important;
    align-items: stretch !important;
    padding: 0 !important;
  }

  .stats-card > article,
  .stats-card > article:nth-child(5),
  .stats-card > article:nth-child(6) {
    display: flex !important;
    grid-column: auto !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 118px !important;
    margin: 0 !important;
    padding: 18px 10px !important;
    box-sizing: border-box !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border-bottom: 0 !important;
    border-left: 1px solid rgba(255,255,255,.09) !important;
  }

  .stats-card > article:first-child {
    border-left: 0 !important;
  }

  .stats-card__mobile-extra {
    display: flex !important;
  }

  .stats-card > article strong {
    font-size: clamp(18px, 1.35vw, 24px) !important;
    line-height: 1.25 !important;
    margin: 0 0 6px !important;
    white-space: nowrap !important;
  }

  .stats-card > article span {
    font-size: clamp(11px, .8vw, 14px) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
  }

  .stats-card__mobile-extra i {
    display: inline-flex !important;
    width: 30px !important;
    height: 30px !important;
    margin-bottom: 7px !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 30px !important;
  }
}


/* === Desktop step20: lower stats block below slider dots === */
@media (min-width:992px){
  .stats-card,
  .hero-stats,
  .hero__stats{
    margin-top:38px !important;
    position:relative !important;
  }
}


/* === Desktop step 21: floating statistics bar at the end of the hero === */
@media (min-width: 992px) {
  .hero {
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  .stats-card {
    width: min(1120px, calc(100% - 96px)) !important;
    min-height: 118px !important;
    margin: 24px auto -58px !important;
    transform: none !important;
    position: relative !important;
    z-index: 30 !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-template-rows: 1fr !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 12px !important;
    background:
      linear-gradient(135deg, rgba(24,31,41,.98), rgba(13,18,25,.98)) !important;
    box-shadow:
      0 20px 45px rgba(0,0,0,.28),
      0 4px 12px rgba(0,0,0,.18) !important;
  }

  .stats-card > article,
  .stats-card > article:nth-child(5),
  .stats-card > article:nth-child(6) {
    grid-column: auto !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    min-height: 118px !important;
    padding: 18px 12px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border: 0 !important;
    border-left: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .stats-card > article:first-child {
    border-left: 0 !important;
  }

  .stats-card__mobile-extra {
    display: flex !important;
  }

  .stats-card__icon,
  .stats-card__mobile-extra i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 0 7px !important;
    flex: 0 0 34px !important;
    color: #f3f5f8 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 22px !important;
    opacity: .95 !important;
  }

  .stats-card > article strong {
    margin: 0 0 4px !important;
    color: #fff !important;
    font-size: clamp(18px, 1.25vw, 23px) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  .stats-card > article span {
    margin: 0 !important;
    color: #aeb6c2 !important;
    font-size: clamp(10px, .72vw, 12px) !important;
    line-height: 1.5 !important;
    white-space: normal !important;
  }

  /* Leave enough room for the floating bar before the following section */
  #about {
    padding-top: 130px !important;
  }
}

/* Keep the existing mobile design unchanged */
@media (max-width: 991px) {
  .stats-card__icon {
    display: none !important;
  }
}


/* === Desktop step 22: stats bar overlaps hero/white section boundary === */
@media (min-width: 992px) {
  /* Keep the original card only for mobile */
  .hero > .stats-card:not(.stats-card--desktop) {
    display: none !important;
  }

  .hero {
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }

  .stats-card--desktop {
    width: min(1120px, calc(100% - 96px)) !important;
    min-height: 118px !important;
    margin: -59px auto 0 !important;
    transform: none !important;
    position: relative !important;
    z-index: 40 !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-template-rows: 1fr !important;
  }

  /* Bring the next section close to the floating bar */
  #about {
    padding-top: 104px !important;
  }
}

@media (max-width: 991px) {
  .stats-card--desktop {
    display: none !important;
  }
}


/* === Desktop step23: hover effect for stats === */
@media (min-width:992px){
.stats-card>article strong,
.stats-card>article i,
.stats-card__icon{
 transition:color .3s ease, transform .3s ease;
}
.stats-card>article:hover strong{
 color:#E31E24 !important;
}
.stats-card>article:hover i,
.stats-card>article:hover .stats-card__icon{
 color:#E31E24 !important;
 transform:translateY(-3px);
}
}


/* === Mobile step24: fix stats icons clipping === */
@media (max-width:767px){
  .stats-card{
    overflow:visible!important;
  }
  .stats-card>article{
    min-height:135px!important;
    padding:20px 10px 16px!important;
    overflow:visible!important;
  }
  .stats-card>article i,
  .stats-card__icon,
  .stats-card__mobile-extra i{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:40px!important;
    height:40px!important;
    margin:0 auto 10px!important;
    font-size:22px!important;
    line-height:1!important;
    overflow:visible!important;
    flex-shrink:0!important;
  }
}


/* Mobile step25 support icon gold */
@media (max-width:767px){
.stats-card__mobile-extra i{
 color:#FFC107!important;
 background:rgba(255,193,7,.15)!important;
 box-shadow:0 0 18px rgba(255,193,7,.45)!important;
 border-radius:12px!important;
 animation:supportPulse 2s infinite;
}
@keyframes supportPulse{
0%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,193,7,.55)}
70%{transform:scale(1.08);box-shadow:0 0 0 12px rgba(255,193,7,0)}
100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,193,7,0)}
}
}


/* === Mobile step 26: show footer office name beside logo === */
@media (max-width: 767px) {
  .footer-brand,
  .footer__brand,
  .footer-logo-wrap,
  .footer-logo,
  .footer .brand {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-direction: row !important;
    gap: 10px !important;
    text-align: right !important;
    direction: rtl !important;
    width: 100% !important;
  }

  .footer-brand img,
  .footer__brand img,
  .footer-logo-wrap img,
  .footer-logo img,
  .footer .brand img {
    flex: 0 0 auto !important;
    width: 58px !important;
    max-width: 58px !important;
    height: auto !important;
    margin: 0 !important;
  }

  .footer-brand .brand-text,
  .footer__brand .brand-text,
  .footer-logo-wrap .brand-text,
  .footer-logo .brand-text,
  .footer .brand span,
  .footer .brand-text,
  .footer-brand__text,
  .footer-logo__text {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    max-width: calc(100% - 70px) !important;
    margin: 0 !important;
  }

  .footer-brand .brand-text strong,
  .footer__brand .brand-text strong,
  .footer-logo-wrap .brand-text strong,
  .footer-logo .brand-text strong,
  .footer .brand strong,
  .footer-brand__text strong,
  .footer-logo__text strong {
    display: block !important;
    color: #fff !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
    font-weight: 800 !important;
    white-space: normal !important;
  }

  .footer-brand .brand-text small,
  .footer__brand .brand-text small,
  .footer-logo-wrap .brand-text small,
  .footer-logo .brand-text small,
  .footer .brand small,
  .footer-brand__text small,
  .footer-logo__text small {
    display: block !important;
    color: rgba(255,255,255,.62) !important;
    font-size: 10px !important;
    line-height: 1.5 !important;
    white-space: normal !important;
  }
}


/* =========================================================
   Professional About Page
   ========================================================= */
.about-page {
  margin: 0;
  color: #101622;
  background: #fff;
  font-family: "Cairo", sans-serif;
}
.about-page *, .about-page *::before, .about-page *::after { box-sizing: border-box; }
.about-page a { text-decoration: none; }
.about-page .container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.about-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid #e9edf2;
  backdrop-filter: blur(14px);
}
.about-header__inner {
  min-height: 88px; display: flex; align-items: center; gap: 28px;
}
.about-brand { display: inline-flex; align-items: center; gap: 12px; color: #111827; }
.about-brand img { width: 58px; height: 64px; object-fit: contain; }
.about-brand span { display: flex; flex-direction: column; }
.about-brand strong { font-size: 15px; line-height: 1.4; }
.about-brand small { color: #8a93a3; font-size: 10px; direction: ltr; }
.about-nav { display: flex; align-items: center; gap: 26px; margin-inline: auto; }
.about-nav a { color: #242b36; font-size: 14px; font-weight: 700; position: relative; }
.about-nav a::after { content:""; position:absolute; right:0; bottom:-12px; width:0; height:2px; background:#e71932; transition:.25s; }
.about-nav a:hover, .about-nav a.is-active { color:#e71932; }
.about-nav a:hover::after, .about-nav a.is-active::after { width:100%; }
.about-header__actions { display:flex; align-items:center; gap:8px; direction:ltr; }
.about-icon-btn { min-width:48px; height:48px; padding:0 13px; border:1px solid #dfe4ea; border-radius:13px; background:#fff; color:#0d1420; display:inline-flex; align-items:center; justify-content:center; gap:6px; font:inherit; cursor:pointer; }
.about-quote-btn, .about-primary-btn { min-height:50px; padding:0 24px; border-radius:13px; background:#e71932; color:#fff; display:inline-flex; align-items:center; justify-content:center; gap:12px; font-weight:800; box-shadow:0 14px 30px rgba(231,25,50,.23); }
.about-menu-btn { display:none; width:52px; height:52px; border:1px solid #dfe4ea; border-radius:14px; background:#fff; }
.about-menu-btn span { display:block; width:26px; height:3px; margin:5px auto; border-radius:10px; background:#111827; transition:.25s; }

.about-hero { min-height: 720px; position:relative; overflow:hidden; display:flex; align-items:center; color:#fff; background:
linear-gradient(90deg, rgba(3,8,15,.98) 0%, rgba(9,11,19,.92) 48%, rgba(33,5,13,.84) 100%),
radial-gradient(circle at 78% 30%, rgba(231,25,50,.28), transparent 31%),
#070b12; }
.about-hero::before { content:""; position:absolute; inset:0; opacity:.23; background-image:linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:54px 54px; }
.about-hero__glow { position:absolute; width:500px; height:500px; border-radius:50%; background:rgba(231,25,50,.15); filter:blur(110px); left:-160px; top:110px; }
.about-hero__grid { position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:80px; padding-block:90px; }
.about-eyebrow { display:inline-flex; align-items:center; gap:9px; color:#ff3049; font-weight:800; margin-bottom:22px; }
.about-hero h1 { margin:0; max-width:700px; font-size:clamp(46px,5vw,76px); line-height:1.2; letter-spacing:-2px; }
.about-hero h1 em { display:block; color:#ff1e38; font-style:normal; }
.about-hero__content > p { max-width:690px; margin:26px 0 0; color:#c9ced8; font-size:18px; line-height:2; }
.about-hero__actions { display:flex; gap:12px; margin-top:34px; }
.about-secondary-btn { min-height:50px; padding:0 23px; border:1px solid rgba(255,255,255,.28); border-radius:13px; color:#fff; display:inline-flex; align-items:center; justify-content:center; gap:11px; font-weight:800; background:rgba(255,255,255,.04); }
.about-trust-row { display:flex; flex-wrap:wrap; gap:24px; margin-top:34px; color:#aeb6c2; font-size:13px; }
.about-trust-row span { display:flex; align-items:center; gap:8px; }
.about-trust-row i { color:#ff3049; }
.about-hero__visual { display:flex; justify-content:center; }
.about-visual-card { width:min(430px,100%); padding:30px; border:1px solid rgba(255,255,255,.14); border-radius:30px; background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.025)); box-shadow:0 40px 90px rgba(0,0,0,.42); backdrop-filter:blur(20px); transform:rotate(-2deg); }
.about-visual-card__top { display:flex; align-items:center; gap:18px; padding-bottom:25px; border-bottom:1px solid rgba(255,255,255,.12); font-weight:800; font-size:20px; line-height:1.6; }
.about-visual-card__top img { width:88px; height:100px; object-fit:contain; padding:12px; border-radius:20px; background:#fff; }
.about-visual-stats { display:grid; grid-template-columns:repeat(3,1fr); padding:30px 0; }
.about-visual-stats article { text-align:center; border-left:1px solid rgba(255,255,255,.1); }
.about-visual-stats article:last-child { border-left:0; }
.about-visual-stats strong { display:block; font-size:30px; color:#fff; }
.about-visual-stats span { color:#aab2bf; font-size:12px; }
.about-visual-seal { min-height:58px; border-radius:15px; background:#e71932; display:flex; align-items:center; justify-content:center; gap:10px; font-weight:800; }

.section-pad { padding:105px 0; }
.about-section-heading span { color:#e71932; font-weight:800; }
.about-section-heading h2 { margin:10px 0 0; font-size:clamp(32px,3.5vw,50px); line-height:1.35; }
.about-section-heading p { max-width:700px; margin:18px auto 0; color:#687181; line-height:1.9; }
.about-section-heading.centered { text-align:center; }
.about-story__grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:start; }
.about-story__copy { border-right:3px solid #e71932; padding-right:30px; }
.about-story__copy p { margin:0 0 18px; color:#596272; font-size:17px; line-height:2; }

.about-values { background:#f5f7fa; }
.about-values__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:50px; }
.about-values__grid article { padding:32px 26px; border:1px solid #e5e9ef; border-radius:20px; background:#fff; transition:.25s; }
.about-values__grid article:hover { transform:translateY(-7px); box-shadow:0 20px 44px rgba(18,26,40,.1); border-color:rgba(231,25,50,.32); }
.about-values__grid i { width:54px; height:54px; border-radius:16px; display:flex; align-items:center; justify-content:center; color:#e71932; background:rgba(231,25,50,.09); font-size:22px; }
.about-values__grid h3 { margin:22px 0 8px; font-size:22px; }
.about-values__grid p { margin:0; color:#707989; line-height:1.8; }

.about-certificates { color:#fff; background:linear-gradient(135deg,#090d14,#131923 65%,#230812); }
.about-section-heading.light p { color:#aeb6c2; }
.certificate-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; }
.certificate-card { min-height:300px; padding:32px; border:1px solid rgba(255,255,255,.1); border-radius:22px; background:rgba(255,255,255,.045); transition:.28s; }
.certificate-card:hover { transform:translateY(-8px); border-color:rgba(255,48,73,.55); background:rgba(255,255,255,.07); }
.certificate-card__icon { width:62px; height:62px; border-radius:18px; display:flex; align-items:center; justify-content:center; color:#ff3049; background:rgba(231,25,50,.13); font-size:26px; }
.certificate-card h3 { margin:24px 0 10px; font-size:22px; }
.certificate-card p { min-height:58px; color:#adb5c1; line-height:1.8; }
.certificate-card button { border:0; background:transparent; color:#ff3049; font:inherit; font-weight:800; cursor:pointer; }
.certificate-note { margin:24px 0 0; color:#8f99a7; font-size:13px; text-align:center; }

.about-languages__grid { display:grid; grid-template-columns:1fr .8fr; gap:80px; align-items:center; }
.language-tags { display:flex; flex-wrap:wrap; gap:10px; margin:32px 0; }
.language-tags span { padding:10px 17px; border:1px solid #e1e6ec; border-radius:999px; background:#fff; color:#394252; font-weight:700; box-shadow:0 6px 18px rgba(20,29,44,.04); }
.about-primary-btn.compact { min-height:48px; box-shadow:none; }
.language-orbit { width:420px; max-width:100%; aspect-ratio:1; margin:auto; position:relative; border:1px dashed #d7dce4; border-radius:50%; background:radial-gradient(circle,rgba(231,25,50,.08),transparent 58%); animation:orbitSpin 26s linear infinite; }
.language-orbit::after { content:""; position:absolute; inset:62px; border:1px solid #e6e9ee; border-radius:50%; }
.language-orbit__center { position:absolute; inset:50%; width:142px; height:142px; transform:translate(-50%,-50%); border-radius:50%; background:#101620; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:2; animation:orbitSpinReverse 26s linear infinite; box-shadow:0 20px 40px rgba(16,22,32,.2); }
.language-orbit__center strong { font-size:38px; color:#ff3049; }
.language-orbit__center span { font-size:13px; }
.orbit-tag { position:absolute; width:55px; height:55px; border-radius:17px; display:flex; align-items:center; justify-content:center; background:#fff; color:#131a25; font-weight:900; box-shadow:0 14px 28px rgba(17,25,38,.12); animation:orbitSpinReverse 26s linear infinite; }
.orbit-tag--1{top:3%;right:43%}.orbit-tag--2{top:21%;right:4%}.orbit-tag--3{bottom:21%;right:4%}.orbit-tag--4{bottom:3%;right:43%}.orbit-tag--5{bottom:21%;left:4%}.orbit-tag--6{top:21%;left:4%}
@keyframes orbitSpin { to{transform:rotate(360deg)} }
@keyframes orbitSpinReverse { to{transform:translate(-50%,-50%) rotate(-360deg)} }
.orbit-tag { animation-name:orbitTagReverse; }
@keyframes orbitTagReverse { to{transform:rotate(-360deg)} }

.about-profile { background:#f5f7fa; }
.about-profile__card { padding:44px; border-radius:26px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:26px; color:#fff; background:linear-gradient(120deg,#101620,#171e29 66%,#4a0712); box-shadow:0 26px 55px rgba(12,18,28,.2); }
.about-profile__icon { width:76px; height:76px; border-radius:20px; display:flex; align-items:center; justify-content:center; color:#fff; background:#e71932; font-size:32px; }
.about-profile__card span { color:#ff6275; font-weight:800; }
.about-profile__card h2 { margin:7px 0 8px; font-size:30px; }
.about-profile__card p { margin:0; color:#b3bbc7; }
.about-profile__download { min-height:55px; padding:0 24px; border-radius:14px; display:flex; align-items:center; gap:12px; color:#fff; background:#e71932; font-weight:800; }

.about-cta { padding:76px 0; color:#fff; background:#e71932; }
.about-cta__inner { display:flex; align-items:center; justify-content:space-between; gap:30px; }
.about-cta span { color:rgba(255,255,255,.76); font-weight:700; }
.about-cta h2 { margin:8px 0 0; font-size:34px; }
.about-cta a { min-height:56px; padding:0 27px; border-radius:15px; display:flex; align-items:center; gap:12px; color:#111827; background:#fff; font-weight:900; }
.about-footer { padding:34px 0; color:#fff; background:#090d14; }
.about-footer__inner { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.about-footer .about-brand { color:#fff; }
.about-footer p { color:#8f98a7; font-size:13px; }

@media (max-width: 991px) {
  .about-header__inner { min-height:78px; }
  .about-nav { display:none; position:absolute; top:78px; right:20px; left:20px; padding:18px; flex-direction:column; align-items:stretch; gap:0; background:#fff; border:1px solid #e4e8ee; border-radius:18px; box-shadow:0 24px 50px rgba(10,16,25,.16); }
  .about-nav.is-open { display:flex; }
  .about-nav a { padding:13px 8px; border-bottom:1px solid #edf0f4; }
  .about-nav a:last-child { border:0; }
  .about-nav a::after { display:none; }
  .about-menu-btn { display:block; order:-1; }
  .about-header__actions .about-quote-btn { display:none; }
  .about-hero__grid, .about-story__grid, .about-languages__grid { grid-template-columns:1fr; }
  .about-hero__visual { order:-1; }
  .about-visual-card { max-width:470px; }
  .about-values__grid { grid-template-columns:repeat(2,1fr); }
  .certificate-grid { grid-template-columns:1fr; }
}

@media (max-width: 767px) {
  .about-page .container { width:min(100% - 28px, 620px); }
  .about-header__inner { gap:8px; }
  .about-brand img { width:50px; height:58px; }
  .about-brand span { display:none; }
  .about-header__actions { margin-inline-start:auto; }
  .about-icon-btn { min-width:44px; height:46px; padding:0 10px; }
  .about-menu-btn { width:48px; height:48px; flex:0 0 48px; }
  .about-hero { min-height:auto; }
  .about-hero__grid { padding-block:58px 70px; gap:44px; }
  .about-hero__visual { display:none; }
  .about-hero h1 { font-size:42px; letter-spacing:-1px; }
  .about-hero__content > p { font-size:15px; }
  .about-hero__actions { display:grid; grid-template-columns:1fr 1fr; }
  .about-primary-btn, .about-secondary-btn { padding:0 10px; font-size:13px; }
  .about-trust-row { gap:12px; }
  .section-pad { padding:72px 0; }
  .about-section-heading h2 { font-size:34px; }
  .about-story__copy { padding-right:20px; }
  .about-values__grid { grid-template-columns:1fr; }
  .about-values__grid article { padding:26px 22px; }
  .certificate-card { min-height:auto; }
  .language-orbit { width:320px; }
  .about-profile__card { grid-template-columns:1fr; padding:28px 22px; text-align:center; justify-items:center; }
  .about-profile__card h2 { font-size:25px; }
  .about-cta__inner { flex-direction:column; align-items:flex-start; }
  .about-cta h2 { font-size:29px; }
  .about-footer__inner { flex-direction:column; text-align:center; }
  .about-footer .about-brand span { display:flex; }
}


/* =========================================================
   About page step 29 — unified project header/footer + navy hero
   ========================================================= */
.about-page .about-header,
.about-page .about-footer {
  display: none !important;
}

.about-page-hero {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  display: flex;
  align-items: center;
  color: #fff;
  background:
    linear-gradient(110deg, #081a38 0%, #0d2e5e 58%, #12598f 100%);
}

.about-page-hero__grid {
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image:
    linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px);
  background-size: 60px 60px;
}

.about-page-hero__glow {
  position: absolute;
  width: 460px;
  height: 460px;
  top: -150px;
  left: -60px;
  border-radius: 50%;
  background: rgba(34, 175, 255, .2);
  filter: blur(80px);
}

.about-page-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-block: 90px;
}

.about-page-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #eef6ff;
  font-weight: 800;
  backdrop-filter: blur(10px);
}

.about-page-hero__badge i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #20c176;
  box-shadow: 0 0 0 6px rgba(32,193,118,.1);
}

.about-page-hero h1 {
  margin: 34px 0 18px;
  font-size: clamp(52px, 6vw, 82px);
  line-height: 1.1;
  font-weight: 900;
}

.about-page-hero p {
  max-width: 850px;
  margin: 0 auto;
  color: #d1deee;
  font-size: 20px;
  line-height: 1.9;
}

.about-breadcrumb {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
  font-weight: 700;
}

.about-breadcrumb a {
  color: #b9cae0;
}

.about-breadcrumb span {
  color: #fff;
}

.about-breadcrumb i {
  color: #7fb4e9;
  font-size: 12px;
}

.about-vmg {
  background: #fff;
}

.about-vmg__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 50px;
}

.about-vmg__card {
  position: relative;
  min-height: 360px;
  padding: 34px 30px;
  overflow: hidden;
  border: 1px solid #e3e8ef;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(19, 32, 52, .08);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.about-vmg__card::after {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  left: -50px;
  bottom: -55px;
  border-radius: 50%;
  background: rgba(231,25,50,.06);
}

.about-vmg__card:hover {
  transform: translateY(-8px);
  border-color: rgba(231,25,50,.28);
  box-shadow: 0 28px 55px rgba(19, 32, 52, .13);
}

.about-vmg__card.is-featured {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(145deg, #0b1523, #161f2c 68%, #3d0811);
}

.about-vmg__icon {
  width: 62px;
  height: 62px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  color: #e71932;
  background: rgba(231,25,50,.1);
  font-size: 26px;
}

.about-vmg__card.is-featured .about-vmg__icon {
  color: #fff;
  background: #e71932;
}

.about-vmg__card > span {
  color: #e71932;
  font-weight: 900;
}

.about-vmg__card h3 {
  margin: 10px 0 15px;
  font-size: 25px;
  line-height: 1.45;
}

.about-vmg__card p,
.about-vmg__card li {
  color: #687282;
  line-height: 1.9;
}

.about-vmg__card.is-featured p {
  color: #b8c0cc;
}

.about-vmg__card ul {
  margin: 12px 0 0;
  padding-right: 22px;
}

.about-vmg__card li::marker {
  color: #e71932;
}

@media (max-width: 991px) {
  .about-vmg__grid {
    grid-template-columns: 1fr;
  }
  .about-vmg__card {
    min-height: auto;
  }
}

@media (max-width: 767px) {
  .about-page-hero {
    min-height: 390px;
  }
  .about-page-hero__content {
    padding-block: 65px;
  }
  .about-page-hero h1 {
    font-size: 48px;
  }
  .about-page-hero p {
    font-size: 15px;
  }
  .about-page-hero__badge {
    font-size: 12px;
  }
}


/* === About page step 30: compact black hero + icon badge + split subtitle === */
.about-page-hero {
  min-height: 340px !important;
  background:
    radial-gradient(circle at 75% 15%, rgba(231,25,50,.14), transparent 28%),
    linear-gradient(115deg, #030507 0%, #090b10 58%, #15060b 100%) !important;
}

.about-page-hero__grid {
  opacity: .08 !important;
  background-size: 52px 52px !important;
}

.about-page-hero__glow {
  width: 320px !important;
  height: 320px !important;
  top: -150px !important;
  left: -90px !important;
  background: rgba(231,25,50,.16) !important;
  filter: blur(95px) !important;
}

.about-page-hero__content {
  padding-block: 52px 46px !important;
}

.about-page-hero__badge--icon {
  width: 54px !important;
  height: 54px !important;
  padding: 0 !important;
  justify-content: center !important;
  border-radius: 16px !important;
  border-color: rgba(255,255,255,.16) !important;
  background: rgba(231,25,50,.12) !important;
  color: #ff2c43 !important;
  font-size: 23px !important;
  box-shadow: 0 10px 28px rgba(231,25,50,.14) !important;
}

.about-page-hero__badge--icon::before,
.about-page-hero__badge--icon > i:first-child:not(.fa-certificate) {
  display: none !important;
}

.about-page-hero h1 {
  margin: 20px 0 14px !important;
  font-size: clamp(44px, 4.5vw, 64px) !important;
}

.about-page-hero__lead {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  max-width: 920px !important;
  margin-inline: auto !important;
  font-size: 18px !important;
  line-height: 1.8 !important;
}

.about-page-hero__lead span {
  display: block !important;
}

.about-breadcrumb {
  margin-top: 20px !important;
}

@media (max-width: 767px) {
  .about-page-hero {
    min-height: 300px !important;
  }

  .about-page-hero__content {
    padding-block: 42px 38px !important;
  }

  .about-page-hero__badge--icon {
    width: 48px !important;
    height: 48px !important;
    font-size: 20px !important;
  }

  .about-page-hero h1 {
    margin-top: 16px !important;
    font-size: 42px !important;
  }

  .about-page-hero__lead {
    gap: 4px !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
  }

  .about-breadcrumb {
    margin-top: 16px !important;
  }
}


/* === About page step 32: prevent mobile horizontal overflow === */
@media (max-width: 767px) {
  html,
  body.about-page {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body.about-page main,
  body.about-page section,
  body.about-page footer,
  body.about-page .container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: clip !important;
  }

  body.about-page .container {
    padding-right: 16px !important;
    padding-left: 16px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  /* Keep the project navbar within the phone viewport */
  body.about-page .navbar,
  body.about-page .navbar__inner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  body.about-page .navbar__inner {
    padding-inline: 9px !important;
  }

  body.about-page .mobile-nav-actions {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* About content grids must collapse cleanly */
  .about-story__grid,
  .about-vmg__grid,
  .about-values__grid,
  .certificate-grid,
  .about-languages__grid,
  .about-profile__card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 24px !important;
  }

  .about-story__grid > *,
  .about-vmg__grid > *,
  .about-values__grid > *,
  .certificate-grid > *,
  .about-languages__grid > *,
  .about-profile__card > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .about-story__copy {
    border-right: 0 !important;
    border-top: 3px solid #e71932 !important;
    padding: 22px 0 0 !important;
  }

  .about-story__copy p,
  .about-section-heading p,
  .about-vmg__card p,
  .about-vmg__card li,
  .certificate-card p {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  .about-section-heading,
  .about-story__copy {
    text-align: right !important;
  }

  .about-vmg__card,
  .about-values__grid article,
  .certificate-card {
    padding: 25px 20px !important;
    overflow: hidden !important;
  }

  /* Prevent decorative language orbit from widening the page */
  .language-orbit {
    width: min(300px, 86vw) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  /* Any large visual/decorative objects stay clipped inside their section */
  .about-page-hero,
  .about-vmg,
  .about-languages,
  .about-certificates,
  .about-profile {
    overflow: hidden !important;
  }

  img,
  svg,
  video,
  canvas {
    max-width: 100% !important;
  }
}


/* =========================================================
   About page step 33 — awards video gallery
   ========================================================= */
.about-awards {
  color: #fff;
  background:
    radial-gradient(circle at 15% 15%, rgba(231,25,50,.13), transparent 26%),
    linear-gradient(135deg, #070b12, #111824 70%, #240910);
}

.awards-video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 48px;
}

.award-video-card {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 24px;
  background: rgba(255,255,255,.045);
  box-shadow: 0 24px 50px rgba(0,0,0,.18);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.award-video-card:hover {
  transform: translateY(-7px);
  border-color: rgba(255,49,73,.46);
  box-shadow: 0 30px 60px rgba(0,0,0,.28);
}

.award-video-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #090d14;
}

.award-video-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(3,6,10,.68), transparent 60%);
  pointer-events: none;
}

.award-video-card__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .72;
}

.award-video-card__play {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 68px;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: #e71932;
  box-shadow: 0 0 0 13px rgba(231,25,50,.16), 0 16px 30px rgba(0,0,0,.28);
  font-size: 22px;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}

.award-video-card:hover .award-video-card__play {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 0 0 18px rgba(231,25,50,.12), 0 20px 36px rgba(0,0,0,.34);
}

.award-video-card__year {
  position: absolute;
  z-index: 3;
  right: 18px;
  bottom: 16px;
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: #fff;
  background: rgba(5,9,15,.66);
  font-weight: 800;
  backdrop-filter: blur(8px);
}

.award-video-card__body {
  padding: 25px 26px 28px;
}

.award-video-card__body > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ff4056;
  font-size: 13px;
  font-weight: 800;
}

.award-video-card__body h3 {
  margin: 10px 0 9px;
  color: #fff;
  font-size: 23px;
  line-height: 1.5;
}

.award-video-card__body p {
  margin: 0;
  color: #aeb7c4;
  line-height: 1.85;
}

.award-video-modal {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.award-video-modal.is-open {
  display: flex;
}

.award-video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(8px);
}

.award-video-modal__dialog {
  position: relative;
  z-index: 2;
  width: min(980px, 94vw);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 20px;
  background: #05070a;
  box-shadow: 0 35px 90px rgba(0,0,0,.55);
}

.award-video-modal__player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.award-video-modal__close {
  position: absolute;
  z-index: 4;
  top: 14px;
  left: 14px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(0,0,0,.62);
  font-size: 18px;
  cursor: pointer;
}

@media (max-width: 767px) {
  .awards-video-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 34px;
  }

  .award-video-card {
    border-radius: 18px;
  }

  .award-video-card__play {
    width: 58px;
    height: 58px;
    font-size: 19px;
  }

  .award-video-card__body {
    padding: 21px 18px 23px;
  }

  .award-video-card__body h3 {
    font-size: 20px;
  }

  .award-video-modal {
    padding: 12px;
  }

  .award-video-modal__dialog {
    width: 100%;
    border-radius: 15px;
  }
}


/* =========================================================
   About page step 34 — certificate image slider + zoom
   ========================================================= */
.certificate-slider {
  position: relative;
  margin-top: 48px;
  padding: 0 58px 42px;
}

.certificate-slider__viewport {
  overflow: hidden;
}

.certificate-slider__track {
  display: flex;
  gap: 22px;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

.certificate-slide {
  flex: 0 0 calc((100% - 44px) / 3);
  min-width: 0;
  padding: 16px 16px 22px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px;
  background: rgba(255,255,255,.045);
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
}

.certificate-slide:hover {
  transform: translateY(-7px);
  border-color: rgba(255,48,73,.46);
  background: rgba(255,255,255,.065);
}

.certificate-slide__image {
  position: relative;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 15px;
  background: #fff;
  cursor: zoom-in;
}

.certificate-slide__image img {
  display: block;
  width: 100%;
  aspect-ratio: 1.41;
  object-fit: cover;
  transition: transform .35s ease, filter .35s ease;
}

.certificate-slide__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(4,8,14,.1);
  opacity: 0;
  transition: opacity .3s ease;
}

.certificate-slide__image span {
  position: absolute;
  z-index: 2;
  right: 50%;
  bottom: 14px;
  transform: translateX(50%) translateY(10px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  color: #fff;
  background: rgba(6,10,17,.78);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
  backdrop-filter: blur(8px);
}

.certificate-slide__image:hover img {
  transform: scale(1.04);
  filter: brightness(.82);
}

.certificate-slide__image:hover::after,
.certificate-slide__image:hover span {
  opacity: 1;
}

.certificate-slide__image:hover span {
  transform: translateX(50%) translateY(0);
}

.certificate-slide h3 {
  margin: 18px 0 7px;
  color: #fff;
  font-size: 20px;
}

.certificate-slide p {
  margin: 0;
  color: #aeb6c2;
  line-height: 1.75;
}

.certificate-slider__nav {
  position: absolute;
  top: 39%;
  z-index: 4;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.07);
  cursor: pointer;
  transition: background .25s ease, transform .25s ease, opacity .25s ease;
}

.certificate-slider__nav:hover {
  background: #e71932;
  transform: scale(1.06);
}

.certificate-slider__nav:disabled {
  opacity: .28;
  cursor: default;
  transform: none;
}

.certificate-slider__nav--prev {
  right: 0;
}

.certificate-slider__nav--next {
  left: 0;
}

.certificate-slider__dots {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.certificate-slider__dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
  cursor: pointer;
  transition: width .25s ease, background .25s ease;
}

.certificate-slider__dots button.is-active {
  width: 32px;
  background: #e71932;
}

.certificate-lightbox {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.certificate-lightbox.is-open {
  display: flex;
}

.certificate-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.86);
  backdrop-filter: blur(9px);
}

.certificate-lightbox__dialog {
  position: relative;
  z-index: 2;
  width: min(1100px, 94vw);
  max-height: 92vh;
  padding: 54px 72px 28px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 22px;
  background: #080b10;
  box-shadow: 0 35px 95px rgba(0,0,0,.58);
}

.certificate-lightbox figure {
  margin: 0;
  text-align: center;
}

.certificate-lightbox__image {
  display: block;
  width: 100%;
  max-height: 75vh;
  object-fit: contain;
  border-radius: 10px;
  background: #fff;
}

.certificate-lightbox__title {
  margin-top: 14px;
  color: #fff;
  font-weight: 800;
}

.certificate-lightbox__close {
  position: absolute;
  z-index: 4;
  top: 12px;
  left: 12px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.1);
  cursor: pointer;
}

.certificate-lightbox__nav {
  position: absolute;
  z-index: 4;
  top: 50%;
  width: 48px;
  height: 48px;
  transform: translateY(-50%);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.08);
  cursor: pointer;
}

.certificate-lightbox__nav:hover,
.certificate-lightbox__close:hover {
  background: #e71932;
}

.certificate-lightbox__nav--prev {
  right: 12px;
}

.certificate-lightbox__nav--next {
  left: 12px;
}

@media (max-width: 1100px) {
  .certificate-slide {
    flex-basis: calc((100% - 22px) / 2);
  }
}

@media (max-width: 767px) {
  .certificate-slider {
    margin-top: 34px;
    padding: 0 0 40px;
  }

  .certificate-slide {
    flex-basis: 100%;
  }

  .certificate-slider__nav {
    top: auto;
    bottom: -3px;
    width: 40px;
    height: 40px;
  }

  .certificate-slider__nav--prev {
    right: 16px;
  }

  .certificate-slider__nav--next {
    left: 16px;
  }

  .certificate-slide__image span {
    opacity: 1;
    transform: translateX(50%) translateY(0);
  }

  .certificate-lightbox {
    padding: 10px;
  }

  .certificate-lightbox__dialog {
    width: 100%;
    padding: 52px 12px 18px;
    border-radius: 16px;
  }

  .certificate-lightbox__nav {
    width: 40px;
    height: 40px;
  }

  .certificate-lightbox__nav--prev {
    right: 6px;
  }

  .certificate-lightbox__nav--next {
    left: 6px;
  }
}


/* =========================================================
   Home step 35 — partner cards use placeholder images
   ========================================================= */
.partner-card__image {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  z-index: 0;
}

.partner-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,9,15,.88) 0%, rgba(5,9,15,.15) 58%, rgba(5,9,15,.02) 100%);
}

.partner-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease, filter .45s ease;
}

.client-card,
.partner-card,
.sector-card {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
}

.client-card > *:not(.partner-card__image),
.partner-card > *:not(.partner-card__image),
.sector-card > *:not(.partner-card__image) {
  position: relative;
  z-index: 2;
}

.client-card:hover .partner-card__image img,
.partner-card:hover .partner-card__image img,
.sector-card:hover .partner-card__image img {
  transform: scale(1.06);
  filter: brightness(.9);
}

/* Hide the old large sector icons after adding image backgrounds */
.client-card > .client-card__icon,
.partner-card > .partner-card__icon,
.sector-card > .sector-card__icon {
  display: none !important;
}

@media (max-width: 767px) {
  .partner-card__image img {
    object-position: center;
  }
}


/* === Home step 36: restore missing separator between first two desktop stats === */
@media (min-width: 992px) {
  .stats-card--desktop > article:first-child,
  .stats-card > article:first-child {
    border-left: 1px solid rgba(255,255,255,.09) !important;
  }

  .stats-card--desktop > article:last-child,
  .stats-card > article:last-child {
    border-left: 0 !important;
  }
}


/* === Step 37: unify desktop navbar dimensions across Home and About === */
@media (min-width: 992px) {
  body.about-page .navbar {
    min-height: 104px !important;
    height: auto !important;
    padding: 0 !important;
  }

  body.about-page .navbar .container,
  body.about-page .navbar__inner {
    min-height: 104px !important;
    height: 104px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  body.about-page .navbar .brand,
  body.about-page .navbar__inner > .brand {
    min-height: 84px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

body.about-page .navbar .brand img,
body.about-page .navbar__inner > .brand img {
    width: 58px !important;
    height: 58px !important;
    max-width: 58px !important;
    max-height: 58px !important;
    object-fit: contain !important;
}
  body.about-page .navbar .brand span,
  body.about-page .navbar__inner > .brand span {
    display: flex !important;
  }

  body.about-page .navbar .nav-panel,
  body.about-page .navbar__inner .nav-panel {
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
  }

  body.about-page .navbar .nav-links,
  body.about-page .navbar__inner .nav-links {
    height: 100% !important;
    align-items: center !important;
  }

body.about-page .navbar .nav-links > li:not(.mobile-only-ask-googan),
body.about-page .navbar__inner .nav-links > li:not(.mobile-only-ask-googan) {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
}

  body.about-page .navbar .nav-links a,
  body.about-page .navbar__inner .nav-links a {
    display: inline-flex !important;
    align-items: center !important;
  }

  body.about-page .navbar .nav-actions,
  body.about-page .navbar__inner .nav-actions {
    min-height: 104px !important;
    display: flex !important;
    align-items: center !important;
  }
}


/* =========================================================
   Step 38 — Professional quote request page
   ========================================================= */
.quote-page {
  background: #f5f7fa;
  color: #111827;
  font-family: "Cairo", sans-serif;
}
.quote-page *, .quote-page *::before, .quote-page *::after { box-sizing: border-box; }
.quote-page a { text-decoration: none; }
.quote-page .container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }

.quote-hero {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  display: flex;
  align-items: center;
  color: #fff;
  background:
    radial-gradient(circle at 78% 14%, rgba(231,25,50,.18), transparent 28%),
    linear-gradient(115deg,#030507 0%,#090c12 58%,#1c060c 100%);
}
.quote-hero__pattern {
  position: absolute; inset: 0; opacity: .08;
  background-image:
    linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);
  background-size: 54px 54px;
}
.quote-hero__glow {
  position: absolute; width: 360px; height: 360px; left: -90px; top: -130px;
  border-radius: 50%; background: rgba(231,25,50,.18); filter: blur(90px);
}
.quote-hero__content { position: relative; z-index: 2; text-align: center; padding-block: 58px; }
.quote-hero__icon {
  width: 58px; height: 58px; margin: 0 auto; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  color: #ff2d45; background: rgba(231,25,50,.13);
  border: 1px solid rgba(255,255,255,.14); font-size: 24px;
}
.quote-hero h1 { margin: 20px 0 12px; font-size: clamp(46px,5vw,68px); line-height: 1.15; }
.quote-hero p { max-width: 780px; margin: 0 auto; color: #c8d0dc; font-size: 17px; line-height: 1.9; }
.quote-breadcrumb { margin-top: 22px; display: flex; justify-content: center; align-items: center; gap: 13px; font-weight: 700; }
.quote-breadcrumb a { color: #b7c0ce; }
.quote-breadcrumb span { color: #fff; }
.quote-breadcrumb i { color: #ef233c; font-size: 11px; }

.quote-main { padding: 90px 0; }
.quote-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 28px; align-items: start; }
.quote-sidebar {
  position: sticky; top: 130px; padding: 34px 30px; border-radius: 25px;
  color: #fff; background: linear-gradient(150deg,#0b111b,#151d29 70%,#3a0711);
  box-shadow: 0 28px 60px rgba(16,24,38,.18);
}
.quote-sidebar__eyebrow { color: #ff4056; font-weight: 800; }
.quote-sidebar h2 { margin: 10px 0 12px; font-size: 30px; line-height: 1.45; }
.quote-sidebar > p { margin: 0; color: #b6bfcb; line-height: 1.9; }
.quote-benefits { margin-top: 30px; display: grid; gap: 14px; }
.quote-benefits article {
  display: grid; grid-template-columns: 48px 1fr; align-items: start; gap: 13px;
  padding: 15px; border: 1px solid rgba(255,255,255,.09); border-radius: 16px;
  background: rgba(255,255,255,.035);
}
.quote-benefits i {
  width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  color: #ff3049; background: rgba(231,25,50,.12); font-size: 19px;
}
.quote-benefits strong { display: block; margin-bottom: 3px; }
.quote-benefits span { display: block; color: #9fa8b6; font-size: 12px; line-height: 1.7; }
.quote-contact-card { margin-top: 24px; padding: 19px; border-radius: 17px; background: rgba(255,255,255,.07); text-align: center; }
.quote-contact-card > span { display: block; color: #b5bec9; font-size: 13px; }
.quote-contact-card a {
  min-height: 48px; margin-top: 12px; border-radius: 13px; display: flex; align-items: center; justify-content: center; gap: 10px;
  color: #fff; background: #1ec96b; font-weight: 800;
}

.quote-form-card {
  padding: 36px; border: 1px solid #e2e7ee; border-radius: 25px; background: #fff;
  box-shadow: 0 25px 60px rgba(22,34,51,.1);
}
.quote-form-card__head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 25px; border-bottom: 1px solid #e9edf2; }
.quote-form-card__head span { color: #e71932; font-weight: 800; }
.quote-form-card__head h2 { margin: 5px 0 0; font-size: 31px; }
.quote-progress { display: flex; gap: 7px; }
.quote-progress span { width: 10px; height: 10px; border-radius: 999px; background: #d8dde4; }
.quote-progress span.is-active { width: 34px; background: #e71932; }

.quote-form__section { padding: 30px 0; border-bottom: 1px solid #edf0f4; }
.quote-form__section:last-of-type { border-bottom: 0; }
.quote-form__section-title { display: flex; align-items: center; gap: 15px; margin-bottom: 22px; }
.quote-form__section-title > span {
  width: 48px; height: 48px; flex: 0 0 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: #e71932; background: rgba(231,25,50,.09); font-weight: 900;
}
.quote-form__section-title h3 { margin: 0; font-size: 22px; }
.quote-form__section-title p { margin: 3px 0 0; color: #7a8492; font-size: 13px; }
.quote-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.quote-field { display: block; min-width: 0; }
.quote-field--full { margin-top: 18px; }
.quote-field > span { display: block; margin-bottom: 8px; color: #242c38; font-size: 13px; font-weight: 800; }
.quote-field b { color: #e71932; }
.quote-input {
  min-height: 54px; padding: 0 15px; border: 1px solid #dfe5ec; border-radius: 14px;
  display: flex; align-items: center; gap: 11px; background: #fbfcfd;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.quote-input:focus-within { border-color: rgba(231,25,50,.5); box-shadow: 0 0 0 4px rgba(231,25,50,.08); background: #fff; }
.quote-input i { color: #9aa3af; }
.quote-input input, .quote-input select, .quote-input textarea {
  width: 100%; min-width: 0; border: 0; outline: 0; color: #111827; background: transparent; font: inherit;
}
.quote-input select { appearance: none; cursor: pointer; }
.quote-textarea { align-items: flex-start; padding-top: 15px; }
.quote-textarea textarea { resize: vertical; min-height: 120px; }

.quote-upload {
  min-height: 180px; margin-top: 18px; padding: 28px; border: 2px dashed #d7dde5; border-radius: 19px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: #fafbfd; cursor: pointer; transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.quote-upload:hover { border-color: #e71932; background: rgba(231,25,50,.025); transform: translateY(-2px); }
.quote-upload__icon {
  width: 58px; height: 58px; margin-bottom: 12px; border-radius: 17px; display: flex; align-items: center; justify-content: center;
  color: #e71932; background: rgba(231,25,50,.09); font-size: 24px;
}
.quote-upload strong { font-size: 17px; }
.quote-upload small { margin-top: 6px; color: #8c96a4; }
.quote-upload em { margin-top: 12px; color: #e71932; font-size: 12px; font-style: normal; font-weight: 700; }

.quote-form__footer { padding-top: 26px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.quote-consent { display: flex; align-items: center; gap: 9px; color: #66707f; font-size: 12px; }
.quote-consent input { accent-color: #e71932; }
.quote-submit {
  min-height: 56px; padding: 0 25px; border: 0; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  color: #fff; background: #e71932; font: inherit; font-weight: 900; cursor: pointer;
  box-shadow: 0 15px 32px rgba(231,25,50,.22);
}

.quote-steps { padding: 90px 0; background: #fff; }
.quote-steps__grid { margin-top: 45px; display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.quote-steps__grid article {
  position: relative; padding: 29px 24px; border: 1px solid #e3e8ef; border-radius: 20px; background: #fff;
  box-shadow: 0 15px 38px rgba(19,31,48,.06);
}
.quote-steps__grid article > span { position: absolute; left: 18px; top: 16px; color: #d4dae2; font-size: 25px; font-weight: 900; }
.quote-steps__grid i {
  width: 52px; height: 52px; border-radius: 15px; display: flex; align-items: center; justify-content: center;
  color: #e71932; background: rgba(231,25,50,.09); font-size: 21px;
}
.quote-steps__grid h3 { margin: 19px 0 8px; font-size: 20px; }
.quote-steps__grid p { margin: 0; color: #747e8c; line-height: 1.8; font-size: 13px; }

@media (max-width: 991px) {
  .quote-layout { grid-template-columns: 1fr; }
  .quote-sidebar { position: static; }
  .quote-steps__grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 767px) {
  .quote-page .container { width: min(100% - 28px,620px); }
  .quote-hero { min-height: 300px; }
  .quote-hero__content { padding-block: 44px; }
  .quote-hero h1 { font-size: 42px; }
  .quote-hero p { font-size: 14px; }
  .quote-main { padding: 60px 0; }
  .quote-sidebar, .quote-form-card { padding: 25px 19px; border-radius: 20px; }
  .quote-sidebar h2 { font-size: 25px; }
  .quote-form-card__head { align-items: flex-start; }
  .quote-form-card__head h2 { font-size: 25px; }
  .quote-fields { grid-template-columns: 1fr; }
  .quote-form__footer { flex-direction: column; align-items: stretch; }
  .quote-submit { width: 100%; }
  .quote-steps__grid { grid-template-columns: 1fr; }
}


/* =========================================================
   Step 39 — repair quote page layout conflicts
   ========================================================= */

/* The homepage already has a .quote-form grid.
   Reset it only inside the standalone quote page. */
.quote-page .quote-form {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.quote-page .quote-layout {
  grid-template-columns: minmax(0, 760px) minmax(310px, 390px) !important;
  justify-content: center !important;
  gap: 30px !important;
}

.quote-page .quote-form-card {
  width: 100% !important;
  min-width: 0 !important;
}

.quote-page .quote-sidebar {
  width: 100% !important;
  min-width: 0 !important;
}

.quote-page .quote-form__section {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
}

.quote-page .quote-fields {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px !important;
  width: 100% !important;
}

.quote-page .quote-field,
.quote-page .quote-input,
.quote-page .quote-upload,
.quote-page .quote-field--full {
  width: 100% !important;
  min-width: 0 !important;
}

.quote-page .quote-field--full {
  grid-column: 1 / -1 !important;
}

.quote-page .quote-input {
  min-height: 58px !important;
}

.quote-page .quote-input input,
.quote-page .quote-input select {
  min-height: 56px !important;
}

.quote-page .quote-textarea {
  min-height: 150px !important;
}

.quote-page .quote-textarea textarea {
  min-height: 125px !important;
}

.quote-page .quote-upload {
  margin-top: 22px !important;
}

.quote-page .quote-form__footer {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 24px !important;
}

.quote-page .quote-submit {
  min-width: 235px !important;
  white-space: nowrap !important;
}

.quote-page .quote-steps__grid {
  align-items: stretch !important;
}

.quote-page .quote-steps__grid article {
  height: 100% !important;
}

/* Prevent generic homepage mobile quote rules from affecting desktop. */
@media (min-width: 992px) {
  .quote-page .quote-form {
    display: block !important;
    padding: 0 !important;
  }
}

@media (max-width: 991px) {
  .quote-page .quote-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 760px !important;
    margin-inline: auto !important;
  }

  .quote-page .quote-sidebar {
    position: static !important;
    order: 2 !important;
  }

  .quote-page .quote-form-card {
    order: 1 !important;
  }
}

@media (max-width: 767px) {
  .quote-page .quote-fields {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  .quote-page .quote-field--full {
    grid-column: auto !important;
  }

  .quote-page .quote-form__footer {
    grid-template-columns: 1fr !important;
  }

  .quote-page .quote-submit {
    width: 100% !important;
    min-width: 0 !important;
  }

  .quote-page .quote-form-card__head {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .quote-page .quote-progress {
    align-self: flex-start !important;
  }
}


/* =========================================================
   Step 40 — final quote page desktop column order and sizing
   ========================================================= */
@media (min-width: 992px) {
  .quote-page .quote-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 760px) minmax(320px, 390px) !important;
    direction: ltr !important;
    align-items: start !important;
    justify-content: center !important;
    gap: 30px !important;
  }

  .quote-page .quote-form-card {
    grid-column: 1 !important;
    direction: rtl !important;
    width: 100% !important;
    max-width: 760px !important;
  }

  .quote-page .quote-sidebar {
    grid-column: 2 !important;
    direction: rtl !important;
    width: 100% !important;
    max-width: 390px !important;
  }

  .quote-page .quote-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .quote-page .quote-form__footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 22px !important;
  }

  .quote-page .quote-consent {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .quote-page .quote-consent span {
    display: block !important;
    line-height: 1.7 !important;
    white-space: normal !important;
  }

  .quote-page .quote-submit {
    flex: 0 0 auto !important;
    min-width: 230px !important;
  }
}

/* Remove inherited narrow widths from homepage quote styles */
.quote-page .quote-form-card,
.quote-page .quote-form,
.quote-page .quote-form__section,
.quote-page .quote-fields,
.quote-page .quote-field,
.quote-page .quote-input,
.quote-page .quote-upload {
  max-width: none !important;
}

.quote-page .quote-form-card {
  padding: 38px 40px !important;
}

.quote-page .quote-fields {
  column-gap: 20px !important;
  row-gap: 18px !important;
}

.quote-page .quote-upload {
  min-height: 190px !important;
}

@media (max-width: 991px) {
  .quote-page .quote-layout {
    direction: rtl !important;
  }

  .quote-page .quote-form-card,
  .quote-page .quote-sidebar {
    max-width: 100% !important;
  }
}

@media (max-width: 767px) {
  .quote-page .quote-form-card {
    padding: 24px 18px !important;
  }

  .quote-page .quote-form__footer {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   Step 41 — stable quote layout using flexbox
   ========================================================= */
@media (min-width: 992px) {
  .quote-page .quote-main .quote-layout {
    display: flex !important;
    flex-direction: row !important;
    direction: ltr !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 30px !important;
    width: min(1180px, calc(100% - 40px)) !important;
    max-width: 1180px !important;
    margin-inline: auto !important;
  }

  .quote-page .quote-form-card {
    order: 1 !important;
    flex: 1 1 760px !important;
    width: auto !important;
    max-width: 760px !important;
    min-width: 0 !important;
    direction: rtl !important;
  }

  .quote-page .quote-sidebar {
    order: 2 !important;
    flex: 0 0 360px !important;
    width: 360px !important;
    max-width: 360px !important;
    min-width: 360px !important;
    direction: rtl !important;
    position: sticky !important;
    top: 125px !important;
  }

  .quote-page .quote-form-card,
  .quote-page .quote-sidebar {
    margin: 0 !important;
    align-self: flex-start !important;
  }
}

/* Guarantee the form keeps full usable width */
.quote-page .quote-form-card {
  box-sizing: border-box !important;
}

.quote-page .quote-form,
.quote-page .quote-form__section,
.quote-page .quote-fields {
  width: 100% !important;
}

.quote-page .quote-fields {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media (max-width: 991px) {
  .quote-page .quote-main .quote-layout {
    display: flex !important;
    flex-direction: column !important;
    direction: rtl !important;
    gap: 24px !important;
  }

  .quote-page .quote-form-card,
  .quote-page .quote-sidebar {
    order: unset !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    position: static !important;
  }

  .quote-page .quote-form-card {
    order: 1 !important;
  }

  .quote-page .quote-sidebar {
    order: 2 !important;
  }
}

@media (max-width: 767px) {
  .quote-page .quote-fields {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   Step 42 — professional quote-page dropdowns
   ========================================================= */
.quote-page .quote-select {
  position: relative !important;
  padding-left: 44px !important;
  overflow: visible !important;
}

.quote-page .quote-select::after {
  content: "\f078";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #6f7885;
  font-family: "Font Awesome 6 Free";
  font-size: 12px;
  font-weight: 900;
  pointer-events: none;
  transition: transform .2s ease, color .2s ease;
}

.quote-page .quote-select:focus-within::after {
  color: #e71932;
  transform: translateY(-50%) rotate(180deg);
}

.quote-page .quote-select select {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 0 0 30px !important;
  margin: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  color: #1b2430 !important;
  background: transparent !important;
  font-family: "Cairo", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  direction: rtl !important;
  text-align: right !important;
  cursor: pointer !important;
}

.quote-page .quote-select select:invalid,
.quote-page .quote-select select option[value=""] {
  color: #8a94a2 !important;
}

.quote-page .quote-select select option {
  min-height: 42px !important;
  padding: 10px 14px !important;
  color: #111827 !important;
  background: #ffffff !important;
  font-family: "Cairo", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.8 !important;
  direction: rtl !important;
}

.quote-page .quote-select select option:checked {
  color: #ffffff !important;
  background: #e71932 !important;
}

.quote-page .quote-select select:focus {
  color: #111827 !important;
}

/* Prevent global option/select styles from enlarging dropdown text */
.quote-page select,
.quote-page select option,
.quote-page .quote-input select,
.quote-page .quote-input select option {
  font-size: 14px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: normal !important;
}

@media (max-width: 767px) {
  .quote-page .quote-select select,
  .quote-page .quote-select select option {
    font-size: 13px !important;
  }
}


/* =========================================================
   Step 43 — fully custom quote-page dropdowns
   ========================================================= */
.quote-page .quote-select {
  position: relative !important;
  overflow: visible !important;
}

.quote-page .quote-select::after {
  display: none !important;
}

.quote-page .custom-select__native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.quote-page .custom-select {
  position: relative;
  width: 100%;
  min-width: 0;
  direction: rtl;
}

.quote-page .custom-select__trigger {
  width: 100%;
  min-height: 56px;
  padding: 0 2px 0 30px;
  border: 0;
  outline: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #1b2430;
  background: transparent;
  font-family: "Cairo", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-align: right;
  cursor: pointer;
}

.quote-page .custom-select__trigger i {
  color: #7a8390;
  font-size: 12px;
  transition: transform .25s ease, color .25s ease;
}

.quote-page .custom-select.is-open .custom-select__trigger i {
  color: #e71932;
  transform: rotate(180deg);
}

.quote-page .custom-select__menu {
  position: absolute;
  z-index: 200;
  top: calc(100% + 8px);
  right: -16px;
  left: -16px;
  max-height: 290px;
  padding: 8px;
  overflow-y: auto;
  border: 1px solid #dfe4eb;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-7px);
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}

.quote-page .custom-select.is-open .custom-select__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.quote-page .custom-select__option {
  width: 100%;
  min-height: 44px;
  padding: 10px 13px;
  border: 0;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #222b38;
  background: transparent;
  font-family: "Cairo", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
  text-align: right;
  direction: rtl;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, padding .18s ease;
}

.quote-page .custom-select__option:hover {
  color: #e71932;
  background: rgba(231, 25, 50, .07);
  padding-right: 17px;
}

.quote-page .custom-select__option.is-selected {
  color: #fff;
  background: #e71932;
  font-weight: 800;
}

.quote-page .custom-select__menu::-webkit-scrollbar {
  width: 7px;
}

.quote-page .custom-select__menu::-webkit-scrollbar-track {
  background: #f1f3f6;
  border-radius: 20px;
}

.quote-page .custom-select__menu::-webkit-scrollbar-thumb {
  background: #c5ccd5;
  border-radius: 20px;
}

.quote-page .custom-select__menu::-webkit-scrollbar-thumb:hover {
  background: #e71932;
}

@media (max-width: 767px) {
  .quote-page .custom-select__menu {
    right: -12px;
    left: -12px;
    max-height: 250px;
  }

  .quote-page .custom-select__trigger,
  .quote-page .custom-select__option {
    font-size: 13px;
  }
}


/* =========================================================
   Step 44 — dropdown arrow spacing + animated progress dots
   ========================================================= */

/* Move custom dropdown arrow slightly farther to the left */
.quote-page .custom-select__trigger {
  padding-left: 42px !important;
}

.quote-page .custom-select__trigger i {
  position: absolute !important;
  left: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
}

.quote-page .custom-select {
  position: relative !important;
}

.quote-page .custom-select.is-open .custom-select__trigger i {
  transform: translateY(-50%) rotate(180deg) !important;
}

/* Animated three-dot loading indicator */
.quote-page .quote-progress {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  direction: ltr !important;
}

.quote-page .quote-progress span {
  width: 11px !important;
  height: 11px !important;
  min-width: 11px !important;
  border-radius: 999px !important;
  background: #d7dde5 !important;
  opacity: .75 !important;
  animation: quoteProgressPulse 1.5s infinite ease-in-out !important;
}

.quote-page .quote-progress span:nth-child(1) {
  animation-delay: 0s !important;
}

.quote-page .quote-progress span:nth-child(2) {
  animation-delay: .25s !important;
}

.quote-page .quote-progress span:nth-child(3) {
  animation-delay: .5s !important;
}

.quote-page .quote-progress span.is-active {
  width: 11px !important;
  background: #d7dde5 !important;
}

@keyframes quoteProgressPulse {
  0%, 70%, 100% {
    width: 11px;
    background: #d7dde5;
    opacity: .7;
    transform: scale(1);
  }

  35% {
    width: 34px;
    background: #e71932;
    opacity: 1;
    transform: scale(1.02);
  }
}

@media (max-width: 767px) {
  .quote-page .custom-select__trigger {
    padding-left: 38px !important;
  }

  .quote-page .custom-select__trigger i {
    left: 6px !important;
  }
}


/* =========================================================
   Step 45 — move custom dropdown arrows farther left
   ========================================================= */
.quote-page .custom-select__trigger {
  position: relative !important;
  padding-left: 60px !important;
  padding-right: 18px !important;
}

.quote-page .custom-select__trigger i {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  right: auto !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
}

.quote-page .custom-select.is-open .custom-select__trigger i {
  transform: translateY(-50%) rotate(180deg) !important;
}

@media (max-width: 767px) {
  .quote-page .custom-select__trigger {
    padding-left: 54px !important;
    padding-right: 16px !important;
  }

  .quote-page .custom-select__trigger i {
    left: 10px !important;
  }
}


/* =========================================================
   Step 46 — quote page premium motion effects
   ========================================================= */

/* Hero icon pulse */
.quote-page .quote-hero__icon {
  position: relative !important;
  isolation: isolate !important;
  animation: quoteHeroIconPulse 2.1s ease-in-out infinite !important;
}

.quote-page .quote-hero__icon::before,
.quote-page .quote-hero__icon::after {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  z-index: -1 !important;
  border-radius: inherit !important;
  border: 1px solid rgba(231, 25, 50, .42) !important;
  opacity: 0 !important;
  animation: quoteHeroRing 2.1s ease-out infinite !important;
}

.quote-page .quote-hero__icon::after {
  animation-delay: .7s !important;
}

@keyframes quoteHeroIconPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 10px 28px rgba(231,25,50,.12);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 14px 38px rgba(231,25,50,.30);
  }
}

@keyframes quoteHeroRing {
  0% {
    transform: scale(1);
    opacity: .55;
  }
  75%, 100% {
    transform: scale(1.75);
    opacity: 0;
  }
}

/* "Before you start" sidebar animated premium card */
.quote-page .quote-sidebar {
  position: sticky !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.02), rgba(255,255,255,0)) padding-box,
    linear-gradient(145deg, #09111d 0%, #141d2a 64%, #420a15 100%) border-box !important;
  background-size: 180% 180% !important;
  animation: quoteSidebarGradient 8s ease infinite, quoteSidebarFloat 4.5s ease-in-out infinite !important;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease !important;
}

.quote-page .quote-sidebar::before {
  content: "" !important;
  position: absolute !important;
  inset: -45% -20% auto !important;
  height: 70% !important;
  z-index: -1 !important;
  background: radial-gradient(circle, rgba(231,25,50,.22), transparent 68%) !important;
  filter: blur(20px) !important;
  animation: quoteSidebarGlow 6s ease-in-out infinite alternate !important;
}

.quote-page .quote-sidebar::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  border-radius: inherit !important;
  padding: 1px !important;
  background: linear-gradient(120deg, transparent 12%, rgba(255,51,77,.58), transparent 42%, rgba(255,255,255,.12), transparent 78%) !important;
  background-size: 220% 100% !important;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  animation: quoteSidebarBorder 5.5s linear infinite !important;
  pointer-events: none !important;
}

.quote-page .quote-sidebar:hover {
  transform: translateY(-8px) scale(1.012) !important;
  box-shadow: 0 32px 70px rgba(20,29,43,.28), 0 0 34px rgba(231,25,50,.17) !important;
}

@keyframes quoteSidebarGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes quoteSidebarFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}

@keyframes quoteSidebarGlow {
  from { transform: translateX(-10%) scale(.95); opacity: .55; }
  to { transform: translateX(15%) scale(1.12); opacity: 1; }
}

@keyframes quoteSidebarBorder {
  to { background-position: 220% 0; }
}

/* Benefit cards inside sidebar */
.quote-page .quote-benefits article {
  transition: transform .28s ease, border-color .28s ease, background .28s ease, box-shadow .28s ease !important;
}

.quote-page .quote-benefits article:hover {
  transform: translateX(-5px) !important;
  border-color: rgba(255,55,80,.34) !important;
  background: rgba(255,255,255,.065) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.14) !important;
}

.quote-page .quote-benefits article i {
  transition: transform .28s ease, color .28s ease, background .28s ease, box-shadow .28s ease !important;
}

.quote-page .quote-benefits article:hover i {
  transform: scale(1.08) rotate(-7deg) !important;
  color: #fff !important;
  background: #e71932 !important;
  box-shadow: 0 0 0 7px rgba(231,25,50,.10) !important;
}

/* WhatsApp shine */
.quote-page .quote-contact-card a {
  position: relative !important;
  overflow: hidden !important;
  animation: quoteWhatsappPulse 3s ease-in-out infinite !important;
}

.quote-page .quote-contact-card a::after {
  content: "" !important;
  position: absolute !important;
  top: -40% !important;
  left: -25% !important;
  width: 22% !important;
  height: 180% !important;
  transform: rotate(18deg) !important;
  background: rgba(255,255,255,.36) !important;
  filter: blur(3px) !important;
  animation: quoteWhatsappShine 3.8s ease-in-out infinite !important;
}

@keyframes quoteWhatsappPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(30,201,107,.22); }
  50% { box-shadow: 0 0 0 10px rgba(30,201,107,0); }
}

@keyframes quoteWhatsappShine {
  0%, 28% { left: -28%; opacity: 0; }
  38% { opacity: 1; }
  60%, 100% { left: 118%; opacity: 0; }
}

/* How-we-work cards premium hover */
.quote-page .quote-steps__grid article {
  overflow: hidden !important;
  isolation: isolate !important;
  transition:
    transform .34s cubic-bezier(.2,.8,.2,1),
    box-shadow .34s ease,
    border-color .34s ease,
    background .34s ease !important;
}

.quote-page .quote-steps__grid article::before {
  content: "" !important;
  position: absolute !important;
  right: 24px !important;
  left: 24px !important;
  bottom: 0 !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: #e71932 !important;
  transform: scaleX(0) !important;
  transform-origin: center !important;
  transition: transform .34s ease !important;
}

.quote-page .quote-steps__grid article::after {
  content: "" !important;
  position: absolute !important;
  width: 120px !important;
  height: 120px !important;
  left: -55px !important;
  bottom: -60px !important;
  z-index: -1 !important;
  border-radius: 50% !important;
  background: rgba(231,25,50,.06) !important;
  transform: scale(.7) !important;
  transition: transform .38s ease, opacity .38s ease !important;
}

.quote-page .quote-steps__grid article:hover {
  transform: translateY(-12px) scale(1.025) !important;
  border-color: rgba(231,25,50,.28) !important;
  background: linear-gradient(145deg, #fff 0%, #fff8fa 100%) !important;
  box-shadow: 0 24px 48px rgba(18,29,46,.13), 0 0 28px rgba(231,25,50,.08) !important;
}

.quote-page .quote-steps__grid article:hover::before {
  transform: scaleX(1) !important;
}

.quote-page .quote-steps__grid article:hover::after {
  transform: scale(1.25) !important;
}

.quote-page .quote-steps__grid article > span {
  transition: color .28s ease, transform .28s ease !important;
}

.quote-page .quote-steps__grid article:hover > span {
  color: #e71932 !important;
  transform: translateY(-3px) !important;
}

.quote-page .quote-steps__grid article i {
  transition:
    transform .34s cubic-bezier(.2,.8,.2,1),
    color .28s ease,
    background .28s ease,
    box-shadow .28s ease !important;
}

.quote-page .quote-steps__grid article:hover i {
  transform: scale(1.12) rotate(-10deg) !important;
  color: #fff !important;
  background: #e71932 !important;
  box-shadow: 0 0 0 9px rgba(231,25,50,.10) !important;
}

.quote-page .quote-steps__grid article h3 {
  transition: color .28s ease !important;
}

.quote-page .quote-steps__grid article:hover h3 {
  color: #e71932 !important;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .quote-page .quote-hero__icon,
  .quote-page .quote-hero__icon::before,
  .quote-page .quote-hero__icon::after,
  .quote-page .quote-sidebar,
  .quote-page .quote-sidebar::before,
  .quote-page .quote-sidebar::after,
  .quote-page .quote-contact-card a,
  .quote-page .quote-contact-card a::after {
    animation: none !important;
  }
}

@media (max-width: 991px) {
  .quote-page .quote-sidebar {
    position: static !important;
    animation: quoteSidebarGradient 8s ease infinite !important;
  }
}


/* =========================================================
   Step 47 — WhatsApp hover, submit hover, continuous loading dots
   ========================================================= */

/* WhatsApp button hover */
.quote-page .quote-contact-card a {
  transition:
    transform .28s ease,
    background .28s ease,
    box-shadow .28s ease,
    color .28s ease !important;
}

.quote-page .quote-contact-card a:hover {
  transform: translateY(-3px) scale(1.018) !important;
  background: #16a85a !important;
  color: #fff !important;
  box-shadow:
    0 16px 30px rgba(22,168,90,.28),
    0 0 0 8px rgba(30,201,107,.10) !important;
}

.quote-page .quote-contact-card a:hover i {
  transform: scale(1.14) rotate(-8deg) !important;
}

.quote-page .quote-contact-card a i {
  transition: transform .28s ease !important;
}

/* Submit button without arrow + premium hover */
.quote-page .quote-submit {
  position: relative !important;
  overflow: hidden !important;
  justify-content: center !important;
  transition:
    transform .28s ease,
    background .28s ease,
    box-shadow .28s ease,
    color .28s ease !important;
}

.quote-page .quote-submit i {
  display: none !important;
}

.quote-page .quote-submit::before {
  content: "" !important;
  position: absolute !important;
  top: -45% !important;
  left: -28% !important;
  width: 24% !important;
  height: 190% !important;
  transform: rotate(18deg) !important;
  background: rgba(255,255,255,.34) !important;
  filter: blur(3px) !important;
  opacity: 0 !important;
}

.quote-page .quote-submit:hover {
  transform: translateY(-3px) scale(1.015) !important;
  background: #b90f27 !important;
  color: #fff !important;
  box-shadow:
    0 18px 34px rgba(185,15,39,.28),
    0 0 0 8px rgba(231,25,50,.09) !important;
}

.quote-page .quote-submit:hover::before {
  opacity: 1 !important;
  animation: quoteSubmitShine .8s ease forwards !important;
}

@keyframes quoteSubmitShine {
  from { left: -28%; }
  to { left: 118%; }
}

/* Continuous three-dot loading animation */
.quote-page .quote-progress {
  min-width: 72px !important;
  justify-content: flex-start !important;
}

.quote-page .quote-progress span,
.quote-page .quote-progress span.is-active {
  width: 11px !important;
  height: 11px !important;
  min-width: 11px !important;
  border-radius: 999px !important;
  background: #d8dee6 !important;
  opacity: .7 !important;
  animation: quoteRequestLoading 1.65s infinite ease-in-out !important;
  transform-origin: center !important;
}

.quote-page .quote-progress span:nth-child(1) {
  animation-delay: 0s !important;
}

.quote-page .quote-progress span:nth-child(2) {
  animation-delay: .28s !important;
}

.quote-page .quote-progress span:nth-child(3) {
  animation-delay: .56s !important;
}

@keyframes quoteRequestLoading {
  0%, 72%, 100% {
    width: 11px;
    background: #d8dee6;
    opacity: .65;
    transform: scale(1);
    box-shadow: none;
  }

  36% {
    width: 34px;
    background: #e71932;
    opacity: 1;
    transform: scale(1.03);
    box-shadow: 0 0 0 6px rgba(231,25,50,.08);
  }
}


/* =========================================================
   Step 48 — brand-red animated loading dots
   ========================================================= */
.quote-page .quote-progress {
  min-width: 76px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  direction: ltr !important;
}

.quote-page .quote-progress span,
.quote-page .quote-progress span.is-active {
  width: 11px !important;
  height: 11px !important;
  min-width: 11px !important;
  border-radius: 999px !important;
  background: #e6e9ee !important;
  opacity: .78 !important;
  transform: scale(1) !important;
  box-shadow: none !important;
  animation: quoteBrandDots 1.2s infinite ease-in-out !important;
}

.quote-page .quote-progress span:nth-child(1) {
  animation-delay: 0s !important;
}

.quote-page .quote-progress span:nth-child(2) {
  animation-delay: .2s !important;
}

.quote-page .quote-progress span:nth-child(3) {
  animation-delay: .4s !important;
}

@keyframes quoteBrandDots {
  0%, 66%, 100% {
    width: 11px;
    background: #e6e9ee;
    opacity: .72;
    transform: scale(1);
    box-shadow: none;
  }

  33% {
    width: 14px;
    background: #e71932;
    opacity: 1;
    transform: scale(1.16);
    box-shadow:
      0 0 0 6px rgba(231,25,50,.10),
      0 0 16px rgba(231,25,50,.34);
  }
}


/* =========================================================
   Step 49 — JavaScript-driven red loading dots
   ========================================================= */
.quote-page .quote-progress {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-width: 78px !important;
  gap: 9px !important;
  direction: ltr !important;
}

.quote-page .quote-progress span,
.quote-page .quote-progress span.is-active {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  border-radius: 999px !important;
  background: #e4e8ee !important;
  opacity: .82 !important;
  transform: scale(1) !important;
  box-shadow: none !important;
  animation: none !important;
  transition:
    width .24s ease,
    min-width .24s ease,
    transform .24s ease,
    background .24s ease,
    opacity .24s ease,
    box-shadow .24s ease !important;
}

.quote-page .quote-progress span.is-loading-active {
  width: 32px !important;
  min-width: 32px !important;
  background: #e71932 !important;
  opacity: 1 !important;
  transform: scale(1.05) !important;
  box-shadow:
    0 0 0 6px rgba(231,25,50,.10),
    0 0 18px rgba(231,25,50,.38) !important;
}


/* =========================================================
   Step 50 — quote page mobile layout repair
   ========================================================= */
@media (max-width: 767px) {
  html,
  body.quote-page {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body.quote-page main,
  body.quote-page section,
  body.quote-page footer {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .quote-page .container {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    padding-inline: 14px !important;
  }

  .quote-page .quote-hero {
    width: 100% !important;
    min-height: 330px !important;
    margin: 0 !important;
  }

  .quote-page .quote-hero__content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 48px 18px 44px !important;
  }

  .quote-page .quote-hero h1 {
    font-size: clamp(38px, 11vw, 52px) !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }

  .quote-page .quote-hero p {
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 1.9 !important;
  }

  .quote-page .quote-main {
    padding: 46px 0 58px !important;
  }

  .quote-page .quote-main .quote-layout {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 22px !important;
  }

  .quote-page .quote-form-card,
  .quote-page .quote-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
  }

  .quote-page .quote-form-card {
    padding: 24px 18px 26px !important;
    overflow: hidden !important;
  }

  .quote-page .quote-form-card__head {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
    padding-bottom: 20px !important;
  }

  .quote-page .quote-form-card__head > div:first-child {
    min-width: 0 !important;
  }

  .quote-page .quote-form-card__head h2 {
    margin-top: 4px !important;
    font-size: clamp(27px, 8vw, 36px) !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }

  .quote-page .quote-progress {
    min-width: 72px !important;
    max-width: 72px !important;
    justify-content: flex-end !important;
    align-self: center !important;
    margin: 0 !important;
  }

  .quote-page .quote-form,
  .quote-page .quote-form__section,
  .quote-page .quote-fields,
  .quote-page .quote-field,
  .quote-page .quote-input,
  .quote-page .quote-upload,
  .quote-page .quote-form__footer {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .quote-page .quote-form__section {
    padding: 24px 0 !important;
  }

  .quote-page .quote-form__section-title {
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .quote-page .quote-form__section-title > span {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
  }

  .quote-page .quote-form__section-title h3 {
    font-size: 20px !important;
  }

  .quote-page .quote-fields {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 15px !important;
  }

  .quote-page .quote-input {
    min-height: 56px !important;
    padding-inline: 13px !important;
  }

  .quote-page .quote-upload {
    min-height: 165px !important;
    padding: 22px 15px !important;
  }

  .quote-page .quote-form__footer {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    align-items: stretch !important;
  }

  .quote-page .quote-consent {
    width: 100% !important;
    align-items: flex-start !important;
    line-height: 1.8 !important;
  }

  .quote-page .quote-submit {
    width: 100% !important;
    min-width: 0 !important;
  }

  .quote-page .quote-sidebar {
    padding: 26px 18px !important;
    overflow: hidden !important;
  }

  .quote-page .quote-steps {
    padding: 62px 0 !important;
  }

  .quote-page .quote-steps__grid {
    width: 100% !important;
    grid-template-columns: 1fr !important;
  }

  .quote-page .quote-steps__grid article {
    width: 100% !important;
    min-width: 0 !important;
  }
}


/* =========================================================
   Step 51 — hard-lock quote page to mobile viewport
   ========================================================= */
@media (max-width: 767px) {
  html {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overscroll-behavior-x: none !important;
  }

  body.quote-page {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overscroll-behavior-x: none !important;
  }

  body.quote-page *,
  body.quote-page *::before,
  body.quote-page *::after {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.quote-page main,
  body.quote-page .quote-main,
  body.quote-page .quote-layout,
  body.quote-page .quote-form-card,
  body.quote-page .quote-form,
  body.quote-page .quote-form__section,
  body.quote-page .quote-fields,
  body.quote-page .quote-field,
  body.quote-page .quote-input,
  body.quote-page .quote-upload,
  body.quote-page .quote-sidebar,
  body.quote-page .quote-steps,
  body.quote-page .quote-steps__grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    transform: none !important;
    translate: none !important;
  }

  body.quote-page .quote-main .quote-layout {
    display: block !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  body.quote-page .quote-form-card,
  body.quote-page .quote-sidebar {
    position: relative !important;
    right: auto !important;
    left: auto !important;
  }

  body.quote-page .quote-form-card {
    overflow: hidden !important;
  }

  body.quote-page .quote-form-card__head,
  body.quote-page .quote-form__section-title,
  body.quote-page .quote-form__footer {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.quote-page .quote-input {
    overflow: hidden !important;
  }

  body.quote-page .quote-input input,
  body.quote-page .quote-input select,
  body.quote-page .quote-input textarea,
  body.quote-page .custom-select,
  body.quote-page .custom-select__trigger {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Keep custom dropdown menu inside the field instead of widening viewport */
  body.quote-page .custom-select__menu {
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: translateY(-7px) !important;
  }

  body.quote-page .custom-select.is-open .custom-select__menu {
    transform: translateY(0) !important;
  }

  /* Disable hover/floating transforms on touch screens */
  body.quote-page .quote-sidebar,
  body.quote-page .quote-sidebar:hover,
  body.quote-page .quote-benefits article:hover,
  body.quote-page .quote-steps__grid article:hover,
  body.quote-page .quote-contact-card a:hover,
  body.quote-page .quote-submit:hover {
    transform: none !important;
    translate: none !important;
  }

  body.quote-page .quote-sidebar {
    animation: quoteSidebarGradient 8s ease infinite !important;
  }

  /* Decorative pseudo-elements must never exceed the card */
  body.quote-page .quote-sidebar::before,
  body.quote-page .quote-sidebar::after,
  body.quote-page .quote-steps__grid article::after {
    max-width: none !important;
    pointer-events: none !important;
  }

  body.quote-page img,
  body.quote-page svg,
  body.quote-page video,
  body.quote-page canvas {
    max-width: 100% !important;
    height: auto !important;
  }
}


/* =========================================================
   Step 52 — final professional mobile quote layout + working dropdowns
   ========================================================= */
@media (max-width: 767px) {
  html,
  body.quote-page {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
    overscroll-behavior-x: none !important;
  }

  body.quote-page .quote-main {
    padding: 42px 0 56px !important;
  }

  /* Correct mobile order: form first, sidebar second */
  body.quote-page .quote-main .quote-layout {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    direction: rtl !important;
    overflow: visible !important;
  }

  body.quote-page .quote-form-card {
    order: 1 !important;
  }

  body.quote-page .quote-sidebar {
    order: 2 !important;
  }

  body.quote-page .quote-form-card,
  body.quote-page .quote-sidebar {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
    translate: none !important;
  }

  /*
   * The custom menu is absolutely positioned.
   * It must not be clipped by the form card or field wrappers.
   */
  body.quote-page .quote-form-card,
  body.quote-page .quote-form,
  body.quote-page .quote-form__section,
  body.quote-page .quote-fields,
  body.quote-page .quote-field,
  body.quote-page .quote-input,
  body.quote-page .quote-select,
  body.quote-page .custom-select {
    overflow: visible !important;
  }

  body.quote-page .quote-form-card {
    padding: 24px 18px 28px !important;
    border-radius: 20px !important;
  }

  body.quote-page .quote-fields {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  body.quote-page .quote-input {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Keep the custom dropdown fully inside the phone width */
  body.quote-page .custom-select {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    z-index: 20 !important;
  }

  body.quote-page .custom-select.is-open {
    z-index: 300 !important;
  }

  body.quote-page .custom-select__trigger {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 56px !important;
    padding-right: 12px !important;
    padding-left: 48px !important;
  }

  body.quote-page .custom-select__trigger i {
    left: 12px !important;
    right: auto !important;
  }

  body.quote-page .custom-select__menu {
    position: absolute !important;
    z-index: 500 !important;
    top: calc(100% + 7px) !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 250px !important;
    margin: 0 !important;
    padding: 7px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-radius: 13px !important;
    background: #fff !important;
    box-shadow: 0 18px 42px rgba(15,23,42,.2) !important;
    transform: translateY(-6px) !important;
  }

  body.quote-page .custom-select.is-open .custom-select__menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  body.quote-page .custom-select:not(.is-open) .custom-select__menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.quote-page .custom-select__option {
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    text-align: right !important;
  }

  /* Ensure an opened dropdown appears above the following fields */
  body.quote-page .quote-field:has(.custom-select.is-open) {
    position: relative !important;
    z-index: 400 !important;
  }

  /* No animated floating movement on touch devices */
  body.quote-page .quote-sidebar,
  body.quote-page .quote-sidebar:hover {
    position: relative !important;
    top: auto !important;
    transform: none !important;
    translate: none !important;
    animation: quoteSidebarGradient 8s ease infinite !important;
  }

  body.quote-page .quote-form-card__head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
  }

  body.quote-page .quote-progress {
    min-width: 72px !important;
    max-width: 72px !important;
    justify-content: flex-end !important;
  }
}

/* Fallback for browsers without :has() support */
@supports not selector(:has(*)) {
  @media (max-width: 767px) {
    body.quote-page .quote-field {
      position: relative !important;
    }

    body.quote-page .quote-field:nth-child(1) {
      z-index: 30 !important;
    }

    body.quote-page .quote-field:nth-child(2) {
      z-index: 29 !important;
    }

    body.quote-page .quote-field:nth-child(3) {
      z-index: 28 !important;
    }
  }
}


/* =========================================================
   Step 54 — one shared navbar across all public pages
   ========================================================= */
@media (min-width: 992px) {
  body .navbar,
  body.about-page .navbar,
  body.quote-page .navbar {
    min-height: 104px !important;
    height: auto !important;
    padding: 0 !important;
  }

  body .navbar .container,
  body .navbar__inner,
  body.about-page .navbar .container,
  body.about-page .navbar__inner,
  body.quote-page .navbar .container,
  body.quote-page .navbar__inner {
    min-height: 104px !important;
    height: 104px !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}


/* =========================================================
   Step 55 — About page premium icon, language and button effects
   ========================================================= */

/* About hero icon pulse */
.about-page .about-page-hero__badge--icon {
  position: relative !important;
  isolation: isolate !important;
  animation: aboutHeroIconPulse 2.15s ease-in-out infinite !important;
}

.about-page .about-page-hero__badge--icon::before,
.about-page .about-page-hero__badge--icon::after {
  content: "" !important;
  position: absolute !important;
  inset: -2px !important;
  z-index: -1 !important;
  border-radius: inherit !important;
  border: 1px solid rgba(231,25,50,.45) !important;
  opacity: 0 !important;
  animation: aboutHeroIconRing 2.15s ease-out infinite !important;
}

.about-page .about-page-hero__badge--icon::after {
  animation-delay: .72s !important;
}

@keyframes aboutHeroIconPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 10px 28px rgba(231,25,50,.14);
  }
  50% {
    transform: scale(1.09);
    box-shadow: 0 14px 38px rgba(231,25,50,.34);
  }
}

@keyframes aboutHeroIconRing {
  0% {
    transform: scale(1);
    opacity: .55;
  }
  78%, 100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

/* Language pills hover */
.about-page .language-tags span {
  position: relative !important;
  overflow: hidden !important;
  transition:
    transform .3s ease,
    color .3s ease,
    border-color .3s ease,
    background .3s ease,
    box-shadow .3s ease !important;
}

.about-page .language-tags span::after {
  content: "" !important;
  position: absolute !important;
  top: -40% !important;
  left: -30% !important;
  width: 24% !important;
  height: 180% !important;
  transform: rotate(18deg) !important;
  background: rgba(255,255,255,.55) !important;
  filter: blur(3px) !important;
  opacity: 0 !important;
}

.about-page .language-tags span:hover {
  transform: translateY(-6px) scale(1.025) !important;
  color: #e71932 !important;
  border-color: rgba(231,25,50,.45) !important;
  background: #fff !important;
  box-shadow:
    0 16px 30px rgba(22,32,48,.10),
    0 0 0 5px rgba(231,25,50,.06) !important;
}

.about-page .language-tags span:hover::after {
  opacity: 1 !important;
  animation: aboutLanguageShine .8s ease forwards !important;
}

@keyframes aboutLanguageShine {
  from { left: -30%; }
  to { left: 120%; }
}

/* Shared premium button hover on About page */
.about-page .about-primary-btn,
.about-page .about-profile__download,
.about-page .about-cta a,
.about-page .about-secondary-btn {
  position: relative !important;
  overflow: hidden !important;
  transition:
    transform .28s ease,
    color .28s ease,
    background .28s ease,
    border-color .28s ease,
    box-shadow .28s ease !important;
}

.about-page .about-primary-btn::before,
.about-page .about-profile__download::before,
.about-page .about-cta a::before,
.about-page .about-secondary-btn::before {
  content: "" !important;
  position: absolute !important;
  top: -45% !important;
  left: -28% !important;
  width: 24% !important;
  height: 190% !important;
  transform: rotate(18deg) !important;
  background: rgba(255,255,255,.34) !important;
  filter: blur(3px) !important;
  opacity: 0 !important;
}

.about-page .about-primary-btn:hover,
.about-page .about-profile__download:hover {
  transform: translateY(-4px) scale(1.018) !important;
  background: #b90f27 !important;
  color: #fff !important;
  box-shadow:
    0 18px 34px rgba(185,15,39,.26),
    0 0 0 8px rgba(231,25,50,.08) !important;
}

.about-page .about-secondary-btn:hover {
  transform: translateY(-4px) scale(1.018) !important;
  border-color: rgba(231,25,50,.55) !important;
  background: rgba(231,25,50,.14) !important;
  color: #fff !important;
  box-shadow: 0 16px 30px rgba(0,0,0,.20) !important;
}

.about-page .about-cta a:hover {
  transform: translateY(-4px) scale(1.018) !important;
  color: #e71932 !important;
  background: #fff !important;
  box-shadow: 0 16px 30px rgba(0,0,0,.18) !important;
}

.about-page .about-primary-btn:hover::before,
.about-page .about-profile__download:hover::before,
.about-page .about-cta a:hover::before,
.about-page .about-secondary-btn:hover::before {
  opacity: 1 !important;
  animation: aboutButtonShine .8s ease forwards !important;
}

@keyframes aboutButtonShine {
  from { left: -28%; }
  to { left: 118%; }
}

/* Move arrow/download icons slightly on hover */
.about-page .about-primary-btn i,
.about-page .about-profile__download i,
.about-page .about-cta a i,
.about-page .about-secondary-btn i {
  transition: transform .28s ease !important;
}

.about-page .about-primary-btn:hover i,
.about-page .about-cta a:hover i {
  transform: translateX(-5px) !important;
}

.about-page .about-profile__download:hover i {
  transform: translateY(3px) scale(1.08) !important;
}

.about-page .about-secondary-btn:hover i {
  transform: translateY(2px) scale(1.08) !important;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .about-page .about-page-hero__badge--icon,
  .about-page .about-page-hero__badge--icon::before,
  .about-page .about-page-hero__badge--icon::after {
    animation: none !important;
  }
}

@media (max-width: 767px) {
  .about-page .language-tags span:hover,
  .about-page .about-primary-btn:hover,
  .about-page .about-profile__download:hover,
  .about-page .about-cta a:hover,
  .about-page .about-secondary-btn:hover {
    transform: none !important;
  }
}


/* =========================================================
   Step 3 — align all quote dropdown arrows to the left
   ========================================================= */
.quote-page .custom-select {
  position: relative !important;
  width: 100% !important;
}

.quote-page .custom-select__trigger {
  position: relative !important;
  width: 100% !important;
  padding-right: 14px !important;
  padding-left: 58px !important;
}

.quote-page .custom-select__trigger > i,
.quote-page .custom-select__trigger .fa-chevron-down {
  position: absolute !important;
  top: 50% !important;
  left: 22px !important;
  right: auto !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
}

.quote-page .custom-select.is-open .custom-select__trigger > i,
.quote-page .custom-select.is-open .custom-select__trigger .fa-chevron-down {
  transform: translateY(-50%) rotate(180deg) !important;
}

/* Native select fallback */
.quote-page .quote-select select {
  padding-right: 14px !important;
  padding-left: 58px !important;
  background-position: left 22px center !important;
}

/* Apply same spacing to every dropdown field */
.quote-page .quote-field .quote-select,
.quote-page .quote-field .custom-select {
  width: 100% !important;
}

@media (max-width: 767px) {
  .quote-page .custom-select__trigger {
    padding-left: 52px !important;
  }

  .quote-page .custom-select__trigger > i,
  .quote-page .custom-select__trigger .fa-chevron-down {
    left: 18px !important;
  }

  .quote-page .quote-select select {
    padding-left: 52px !important;
    background-position: left 18px center !important;
  }
}


/* =========================================================
   Step 5 — keep the all-services arrow inside the mobile card
   ========================================================= */
@media (max-width: 600px) {
  .services-more {
    width: 100% !important;
    margin-top: 32px !important;
  }

  .services-more__btn {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) 48px !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 102px !important;
    padding: 14px 16px !important;
    overflow: hidden !important;
    border-radius: 20px !important;
  }

  .services-more__icon {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    margin: 0 !important;
  }

  .services-more__content {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
    text-align: right !important;
  }

  .services-more__content strong,
  .services-more__content small {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .services-more__arrow {
    grid-column: 3 !important;
    grid-row: 1 !important;
    position: static !important;
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    margin: 0 !important;
    place-items: center !important;
    border-radius: 50% !important;
    color: #e71932 !important;
    background: rgba(231,25,50,.09) !important;
    transform: none !important;
    box-shadow: none !important;
    z-index: 2 !important;
  }

  .services-more__arrow i {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 17px !important;
    line-height: 1 !important;
  }

  .services-more__btn:hover .services-more__arrow,
  .services-more__btn:focus-visible .services-more__arrow {
    color: #fff !important;
    background: #e71932 !important;
    transform: translateX(-3px) !important;
  }
}


/* =========================================================
   Step 6 — remove compact quote section from homepage
   ========================================================= */
.home-quote,
.quick-quote,
.quote-section,
.request-quote-section,
#quote {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================
   Step 8 — red CTA hover + sectors slider
   ========================================================= */
.home-page .about-cta a,
body:not(.about-page) .about-cta a {
  position: relative;
  overflow: hidden;
  transition: transform .28s ease, background .28s ease, color .28s ease, box-shadow .28s ease;
}
.home-page .about-cta a::before,
body:not(.about-page) .about-cta a::before {
  content: "";
  position: absolute;
  top: -45%;
  left: -28%;
  width: 24%;
  height: 190%;
  transform: rotate(18deg);
  background: rgba(255,255,255,.38);
  filter: blur(3px);
  opacity: 0;
}
.home-page .about-cta a:hover,
body:not(.about-page) .about-cta a:hover {
  transform: translateY(-4px) scale(1.018);
  color: #fff !important;
  background: #b90f27 !important;
  box-shadow: 0 18px 34px rgba(185,15,39,.28), 0 0 0 8px rgba(255,255,255,.10);
}
.home-page .about-cta a:hover::before,
body:not(.about-page) .about-cta a:hover::before {
  opacity: 1;
  animation: sectorsCtaShine .8s ease forwards;
}
.home-page .about-cta a i,
body:not(.about-page) .about-cta a i {
  transition: transform .28s ease;
}
.home-page .about-cta a:hover i,
body:not(.about-page) .about-cta a:hover i {
  transform: translateX(-5px);
}
@keyframes sectorsCtaShine {
  from { left: -28%; }
  to { left: 118%; }
}

.sectors-slider-section {
  overflow: hidden;
  background: #fff;
}
.sectors-slider {
  position: relative;
  margin-top: 46px;
  padding: 0 58px 42px;
}
.sectors-slider__viewport {
  overflow: hidden;
}
.sectors-slider__track {
  display: flex;
  gap: 22px;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.sectors-slider__card {
  position: relative;
  flex: 0 0 calc((100% - 66px) / 4);
  min-width: 0;
  overflow: hidden;
  border-radius: 24px;
  background: #101722;
  box-shadow: 0 18px 42px rgba(20,31,48,.12);
  transition: transform .32s ease, box-shadow .32s ease;
}
.sectors-slider__card:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 55px rgba(20,31,48,.20), 0 0 0 1px rgba(231,25,50,.18);
}
.sectors-slider__image {
  position: relative;
  aspect-ratio: 1.35;
  overflow: hidden;
}
.sectors-slider__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,9,15,.72), transparent 58%);
}
.sectors-slider__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .45s ease, filter .45s ease;
}
.sectors-slider__card:hover img {
  transform: scale(1.07);
  filter: brightness(.9);
}
.sectors-slider__content {
  position: absolute;
  z-index: 2;
  right: 0;
  left: 0;
  bottom: 0;
  padding: 22px;
  color: #fff;
}
.sectors-slider__content h3 {
  margin: 0 0 5px;
  font-size: 22px;
}
.sectors-slider__content p {
  margin: 0;
  color: #c3cbd6;
  font-size: 13px;
}
.sectors-slider__nav {
  position: absolute;
  z-index: 5;
  top: 43%;
  width: 46px;
  height: 46px;
  border: 1px solid #e1e6ed;
  border-radius: 50%;
  color: #111827;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(20,31,48,.10);
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
.sectors-slider__nav:hover {
  transform: scale(1.08);
  color: #fff;
  background: #e71932;
}
.sectors-slider__nav:disabled {
  opacity: .3;
  cursor: default;
  transform: none;
}
.sectors-slider__nav--prev { right: 0; }
.sectors-slider__nav--next { left: 0; }
.sectors-slider__dots {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.sectors-slider__dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #d5dbe3;
  cursor: pointer;
  transition: width .25s ease, background .25s ease;
}
.sectors-slider__dots button.is-active {
  width: 34px;
  background: #e71932;
}

@media (max-width: 1024px) {
  .sectors-slider__card {
    flex-basis: calc((100% - 22px) / 2);
  }
}
@media (max-width: 640px) {
  .sectors-slider {
    margin-top: 34px;
    padding: 0 0 45px;
  }
  .sectors-slider__card {
    flex-basis: 100%;
  }
  .sectors-slider__nav {
    top: auto;
    bottom: -2px;
    width: 40px;
    height: 40px;
  }
  .sectors-slider__nav--prev { right: 16px; }
  .sectors-slider__nav--next { left: 16px; }
}


/* =========================================================
   Step 9 — sectors slider with icons instead of images
   ========================================================= */
.sectors-slider__card--icon {
  position: relative;
  min-height: 260px;
  padding: 38px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 24px;
  background: linear-gradient(145deg, #1c2635 0%, #111824 100%);
  overflow: hidden;
}

.sectors-slider__card--icon::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  top: -85px;
  right: -55px;
  border-radius: 50%;
  background: rgba(231,25,50,.11);
  transition: transform .35s ease, opacity .35s ease;
}

.sectors-slider__card--icon::after {
  content: "";
  position: absolute;
  right: 28px;
  left: 28px;
  bottom: 0;
  height: 3px;
  border-radius: 999px;
  background: #e71932;
  transform: scaleX(0);
  transition: transform .35s ease;
}

.sectors-slider__card--icon:hover::before {
  transform: scale(1.18);
  opacity: .9;
}

.sectors-slider__card--icon:hover::after {
  transform: scaleX(1);
}

.sectors-slider__icon {
  position: relative;
  z-index: 2;
  width: 68px;
  height: 68px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  color: #e71932;
  background: rgba(231,25,50,.10);
  font-size: 31px;
  transition:
    transform .32s ease,
    color .32s ease,
    background .32s ease,
    box-shadow .32s ease;
}

.sectors-slider__card--icon:hover .sectors-slider__icon {
  transform: translateY(-6px) scale(1.08) rotate(-6deg);
  color: #fff;
  background: #e71932;
  box-shadow: 0 0 0 9px rgba(231,25,50,.10);
}

.sectors-slider__card--icon .sectors-slider__content {
  position: relative;
  z-index: 2;
  right: auto;
  left: auto;
  bottom: auto;
  padding: 0;
  color: #fff;
}

.sectors-slider__card--icon .sectors-slider__content h3 {
  margin: 0 0 10px;
  font-size: 23px;
  transition: color .3s ease;
}

.sectors-slider__card--icon .sectors-slider__content p {
  margin: 0;
  color: #c3cbd6;
  font-size: 14px;
  line-height: 1.8;
}

.sectors-slider__card--icon:hover .sectors-slider__content h3 {
  color: #e71932;
}

/* Disable image styles for icon cards */
.sectors-slider__card--icon .sectors-slider__image {
  display: none !important;
}

@media (max-width: 640px) {
  .sectors-slider__card--icon {
    min-height: 235px;
    padding: 32px 22px;
  }

  .sectors-slider__icon {
    width: 62px;
    height: 62px;
    font-size: 28px;
  }

  .sectors-slider__card--icon .sectors-slider__content h3 {
    font-size: 21px;
  }
}

/* =========================================================
   Step 56 — Match About navbar exactly with Home navbar
   ========================================================= */
body.about-page .site-header,
body.about-page .navbar {
  font-family: "Tajawal", Arial, sans-serif !important;
}

body.about-page .site-header .container,
body.about-page .navbar .container,
body.about-page .navbar__inner {
  width: min(var(--container), calc(100% - 40px)) !important;
  margin-inline: auto !important;
}

@media (max-width: 767px) {
  body.about-page .site-header .container,
  body.about-page .navbar .container,
  body.about-page .navbar__inner {
    width: min(100% - 24px, var(--container)) !important;
  }
}

/* ===== Services Page ===== */
.services-page{overflow:hidden}.services-hero{position:relative;background:linear-gradient(135deg,#090e16 0%,#111824 58%,#25101a 100%);color:#fff;padding:96px 0 82px;isolation:isolate}.services-hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:54px 54px;z-index:-2}.services-hero__glow{position:absolute;border-radius:50%;filter:blur(4px);z-index:-1}.services-hero__glow--one{width:430px;height:430px;background:radial-gradient(circle,rgba(231,25,50,.22),transparent 68%);top:-170px;right:-70px}.services-hero__glow--two{width:350px;height:350px;background:radial-gradient(circle,rgba(231,25,50,.13),transparent 68%);bottom:-170px;left:8%}.services-hero__inner{display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:70px}.services-breadcrumb{display:flex;align-items:center;gap:9px;color:#aeb5c1;font-size:14px;margin-bottom:28px}.services-breadcrumb a{color:#fff}.services-breadcrumb i{font-size:9px;color:#e71932}.services-page-kicker{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border:1px solid rgba(231,25,50,.35);background:rgba(231,25,50,.09);border-radius:999px;color:#ff8795;font-weight:700;margin-bottom:20px}.services-hero h1{font-size:clamp(42px,5vw,72px);line-height:1.15;margin:0 0 22px;letter-spacing:-1.8px}.services-hero h1 em{font-style:normal;color:#e71932}.services-hero__content>p{font-size:18px;line-height:2;color:#c3c9d2;max-width:680px}.services-hero__actions{display:flex;align-items:center;gap:24px;margin-top:32px}.services-hero__contact{display:flex;align-items:center;gap:12px;color:#fff}.services-hero__contact>span{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13)}.services-hero__contact div{display:flex;flex-direction:column;gap:3px}.services-hero__contact small{color:#aeb5c1}.services-hero__trust{display:flex;margin-top:42px;padding-top:28px;border-top:1px solid rgba(255,255,255,.1)}.services-hero__trust div{display:flex;flex-direction:column;padding:0 25px;border-left:1px solid rgba(255,255,255,.1)}.services-hero__trust div:first-child{padding-right:0}.services-hero__trust div:last-child{border:0}.services-hero__trust strong{font-size:25px;color:#fff}.services-hero__trust span{font-size:13px;color:#9ea6b2}.services-hero__visual{height:510px;position:relative;display:grid;place-items:center}.services-orbit{position:absolute;border:1px dashed rgba(255,255,255,.14);border-radius:50%;animation:servicesSpin 24s linear infinite}.services-orbit--outer{width:440px;height:440px}.services-orbit--inner{width:300px;height:300px;animation-direction:reverse;animation-duration:18s}.services-hero__center{width:205px;height:205px;border-radius:50%;display:grid;place-items:center;text-align:center;background:linear-gradient(145deg,#e71932,#a90e22);box-shadow:0 30px 80px rgba(231,25,50,.32),inset 0 1px rgba(255,255,255,.25);position:relative}.services-hero__center:after{content:"";position:absolute;inset:-12px;border:1px solid rgba(231,25,50,.45);border-radius:50%}.services-hero__center i{font-size:54px}.services-hero__center span{font-size:21px;font-weight:800;line-height:1.25;margin-top:-30px}.services-float{position:absolute;display:flex;align-items:center;gap:10px;background:#fff;color:#111824;padding:13px 17px;border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.3);font-weight:800;animation:servicesFloat 4s ease-in-out infinite}.services-float i{color:#e71932}.services-float--1{top:48px;right:45px}.services-float--2{top:135px;left:6px;animation-delay:.8s}.services-float--3{bottom:70px;right:8px;animation-delay:1.5s}.services-float--4{bottom:20px;left:58px;animation-delay:2.2s}@keyframes servicesSpin{to{transform:rotate(360deg)}}@keyframes servicesFloat{50%{transform:translateY(-10px)}}.services-index-bar{background:#fff;border-bottom:1px solid #e8ebef;box-shadow:0 8px 24px rgba(17,24,36,.04);position:relative;z-index:2}.services-index-bar__inner{min-height:74px;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}.services-index-bar__inner>span{font-weight:800;color:#111824}.services-index-bar a{padding:9px 15px;border-radius:10px;color:#5f6875;font-weight:700;transition:.25s}.services-index-bar a:hover{color:#e71932;background:#fff2f4}.services-heading{max-width:730px;margin-inline:auto}.services-catalog{background:#f7f8fa}.services-catalog__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.service-detail-card{background:#fff;border:1px solid #e8ebef;border-radius:22px;padding:28px;position:relative;overflow:hidden;transition:.35s}.service-detail-card:before{content:"";position:absolute;top:0;right:0;width:0;height:4px;background:#e71932;transition:.35s}.service-detail-card:hover{transform:translateY(-8px);box-shadow:0 22px 55px rgba(17,24,36,.1);border-color:rgba(231,25,50,.2)}.service-detail-card:hover:before{width:100%}.service-detail-card__top{display:flex;justify-content:space-between;align-items:flex-start}.service-detail-card__number{font-size:13px;font-weight:900;color:#c8cdd4;letter-spacing:2px}.service-detail-card__icon{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:#fff0f2;color:#e71932;font-size:25px;transition:.35s}.service-detail-card:hover .service-detail-card__icon{background:#e71932;color:#fff;transform:rotate(-5deg) scale(1.04)}.service-detail-card h3{font-size:22px;margin:24px 0 10px;color:#111824}.service-detail-card>p{color:#707987;line-height:1.85;min-height:66px}.service-detail-card ul{display:grid;gap:9px;margin:20px 0 24px;padding:18px 0;border-top:1px solid #edf0f3;border-bottom:1px solid #edf0f3}.service-detail-card li{display:flex;gap:9px;align-items:center;color:#4e5865;font-size:14px}.service-detail-card li i{font-size:11px;color:#e71932}.service-detail-card>a{display:flex;align-items:center;justify-content:space-between;color:#111824;font-weight:800}.service-detail-card>a i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#f4f6f8;transition:.25s}.service-detail-card>a:hover{color:#e71932}.service-detail-card>a:hover i{background:#e71932;color:#fff;transform:translateX(-4px)}.services-special{background:#111824;color:#fff}.services-special__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:75px;align-items:center}.services-special__intro h2{font-size:45px;margin:12px 0 18px}.services-special__intro p{color:#b7bec9;line-height:1.95;margin-bottom:28px}.services-special__list{display:grid;gap:14px}.services-special__list article{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:22px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);border-radius:18px;transition:.3s}.services-special__list article:hover{background:rgba(231,25,50,.1);border-color:rgba(231,25,50,.35);transform:translateX(-7px)}.services-special__list article>span{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:#e71932;font-size:20px}.services-special__list h3{margin:0 0 5px;font-size:19px}.services-special__list p{margin:0;color:#aeb6c2}.services-special__list b{font-size:28px;color:rgba(255,255,255,.12)}.services-process{background:#fff}.services-process__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative}.services-process__grid:before{content:"";position:absolute;top:44px;right:12%;left:12%;border-top:1px dashed #d7dbe0}.services-process__grid article{text-align:center;position:relative;background:#fff;padding:0 18px}.services-process__grid article>span{position:absolute;top:-8px;right:calc(50% + 28px);font-size:11px;font-weight:900;color:#e71932;background:#fff;padding:3px}.services-process__grid i{position:relative;width:88px;height:88px;border-radius:24px;display:grid;place-items:center;margin:0 auto 24px;background:#fff1f3;color:#e71932;font-size:28px;border:8px solid #fff;box-shadow:0 10px 30px rgba(17,24,36,.08)}.services-process__grid h3{font-size:20px;margin-bottom:8px}.services-process__grid p{color:#747d89;line-height:1.8}.services-confidence{background:#f5f7fa}.services-confidence__inner{display:grid;grid-template-columns:1.25fr .75fr;gap:50px;align-items:center}.services-confidence__content h2{font-size:43px;margin:12px 0 18px}.services-confidence__content>p{color:#6f7885;line-height:1.9;max-width:720px}.services-confidence__points{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}.services-confidence__points>div{display:flex;align-items:center;gap:13px;background:#fff;padding:18px;border-radius:16px;border:1px solid #e8ebef}.services-confidence__points i{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:#fff0f2;color:#e71932}.services-confidence__points span{display:flex;flex-direction:column}.services-confidence__points small{color:#7d8591;margin-top:3px}.services-confidence__panel{background:linear-gradient(145deg,#111824,#25111a);color:#fff;padding:38px;border-radius:26px;box-shadow:0 25px 60px rgba(17,24,36,.18);position:relative;overflow:hidden}.services-confidence__panel:after{content:"";position:absolute;width:190px;height:190px;border-radius:50%;background:rgba(231,25,50,.17);left:-70px;bottom:-80px}.services-confidence__panel>span{color:#ff8d9a;font-weight:800}.services-confidence__panel h3{font-size:29px;line-height:1.45;margin:13px 0}.services-confidence__panel p{color:#b6bdc7;line-height:1.8}.services-confidence__panel>a{display:flex;justify-content:space-between;align-items:center;padding:15px 18px;background:#e71932;color:#fff;border-radius:12px;font-weight:800;margin:24px 0 15px;position:relative;z-index:1}.services-confidence__panel>a:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(231,25,50,.3)}.services-confidence__panel>small{color:#aeb5bf;display:flex;gap:7px;align-items:center}
@media(max-width:1100px){.services-hero__inner{grid-template-columns:1fr;gap:25px}.services-hero__visual{height:420px}.services-catalog__grid{grid-template-columns:repeat(2,1fr)}.services-special__grid,.services-confidence__inner{grid-template-columns:1fr}.services-process__grid{grid-template-columns:repeat(2,1fr);gap:35px}.services-process__grid:before{display:none}}
@media(max-width:700px){.services-hero{padding:58px 0}.services-hero h1{font-size:39px}.services-hero__content>p{font-size:16px}.services-hero__actions{align-items:stretch;flex-direction:column}.services-hero__contact{justify-content:center}.services-hero__trust{justify-content:space-between}.services-hero__trust div{padding:0 10px;text-align:center}.services-hero__visual{height:330px;transform:scale(.8);margin:-20px -50px}.services-catalog__grid{grid-template-columns:1fr}.services-special__grid{gap:35px}.services-special__intro h2,.services-confidence__content h2{font-size:34px}.services-special__list article{grid-template-columns:auto 1fr}.services-special__list b{display:none}.services-process__grid{grid-template-columns:1fr}.services-confidence__points{grid-template-columns:1fr}.services-confidence__panel{padding:28px}.services-index-bar__inner>span{width:100%;text-align:center;margin-top:12px}.services-index-bar__inner{padding-bottom:12px;gap:5px}.services-index-bar a{font-size:13px;padding:7px 9px}}
@media(prefers-reduced-motion:reduce){.services-orbit,.services-float{animation:none}}

/* ===== Service details page ===== */
.service-view-page{background:#fff}.service-view-hero{position:relative;overflow:hidden;padding:92px 0 82px;background:linear-gradient(135deg,#0b1019 0%,#111824 54%,#260c14 100%);color:#fff}.service-view-hero__pattern{position:absolute;inset:0;opacity:.12;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(to left,#000,transparent 85%)}.service-view-hero:after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:rgba(231,25,50,.16);filter:blur(70px);left:-180px;top:-180px}.service-view-hero__inner{position:relative;z-index:2;display:grid;grid-template-columns:1.12fr .88fr;gap:80px;align-items:center}.service-view-hero__content h1{font-size:clamp(44px,5vw,72px);line-height:1.1;margin:20px 0 18px;font-weight:900}.service-view-hero__content>p{font-size:19px;line-height:1.95;color:#cfd5df;max-width:720px}.service-view-hero .services-breadcrumb{color:#aab3c1}.service-view-hero .services-breadcrumb a{color:#fff}.service-view-hero__actions{display:flex;gap:14px;align-items:center;margin:30px 0}.service-view-btn--ghost{border:1px solid rgba(255,255,255,.22);color:#fff;background:rgba(255,255,255,.05)}.service-view-btn--ghost:hover{background:#fff;color:#111824;transform:translateY(-3px)}.service-view-hero__badges{display:flex;gap:22px;flex-wrap:wrap;color:#d7dce5;font-size:14px}.service-view-hero__badges i{color:#ef233c;margin-left:7px}.service-view-hero__visual{position:relative;min-height:430px;display:grid;place-items:center}.service-view-hero__card{position:relative;width:310px;height:330px;border-radius:38px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.17);box-shadow:0 35px 80px rgba(0,0,0,.35);backdrop-filter:blur(12px)}.service-view-hero__ring{position:absolute;inset:28px;border:1px dashed rgba(255,255,255,.2);border-radius:30px;animation:spin 18s linear infinite}.service-view-hero__card>i{font-size:86px;color:#ef233c;margin-bottom:25px;filter:drop-shadow(0 12px 28px rgba(231,25,50,.35))}.service-view-hero__card strong{font-size:28px}.service-view-hero__card small{color:#bac2cf;margin-top:8px}.service-view-mini{position:absolute;display:flex;align-items:center;gap:10px;padding:13px 17px;border-radius:15px;background:#fff;color:#111824;font-weight:700;box-shadow:0 18px 45px rgba(0,0,0,.22)}.service-view-mini i{width:31px;height:31px;border-radius:10px;display:grid;place-items:center;background:#ffe9ec;color:#e71932}.service-view-mini--1{right:0;top:65px}.service-view-mini--2{left:0;bottom:55px}.service-view-strip{position:relative;z-index:3;margin-top:-1px;background:#fff;border-bottom:1px solid #edf0f4}.service-view-strip__grid{display:grid;grid-template-columns:repeat(4,1fr);padding:27px 0}.service-view-strip__grid div{text-align:center;border-left:1px solid #e7eaf0}.service-view-strip__grid div:last-child{border:0}.service-view-strip strong{display:block;font-size:25px;color:#e71932}.service-view-strip span{color:#6d7480;font-size:14px}.service-view-layout{display:grid;grid-template-columns:minmax(0,1fr) 355px;gap:55px;align-items:start}.service-view-content h2{font-size:42px;line-height:1.35;margin:13px 0 18px}.service-view-content>p{font-size:18px;line-height:2;color:#67707d}.service-view-features{display:grid;grid-template-columns:1fr 1fr;gap:17px;margin:34px 0}.service-view-features>div{display:flex;gap:15px;align-items:center;padding:20px;border:1px solid #e8ebf0;border-radius:18px;transition:.3s}.service-view-features>div:hover{transform:translateY(-5px);border-color:rgba(231,25,50,.35);box-shadow:0 16px 34px rgba(17,24,36,.08)}.service-view-features i{width:48px;height:48px;flex:0 0 48px;border-radius:14px;display:grid;place-items:center;background:#fff0f2;color:#e71932;font-size:20px}.service-view-features strong,.service-view-features small{display:block}.service-view-features small{color:#78808c;margin-top:5px}.service-view-docs{padding:28px;border-radius:22px;background:#f7f8fa}.service-view-docs h3{margin:0 0 18px;font-size:22px}.service-view-docs>div{display:grid;grid-template-columns:1fr 1fr;gap:14px}.service-view-docs span{font-weight:600}.service-view-docs i{color:#e71932;margin-left:8px}.service-view-sidebar{position:sticky;top:125px;display:grid;gap:18px}.service-view-quote{padding:32px;border-radius:26px;background:#111824;color:#fff;box-shadow:0 24px 55px rgba(17,24,36,.18)}.service-view-quote>span{color:#ef233c;font-weight:800}.service-view-quote h3{font-size:30px;margin:10px 0}.service-view-quote p{color:#bdc4cf;line-height:1.8}.service-view-quote>a{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;margin:24px 0 15px;border-radius:13px;background:#e71932;color:#fff;font-weight:800}.service-view-quote>a:hover{transform:translateY(-3px);box-shadow:0 12px 25px rgba(231,25,50,.3)}.service-view-quote small{color:#aeb6c2}.service-view-quote small i{color:#ef233c}.service-view-help{display:flex;gap:15px;align-items:center;padding:20px;border:1px solid #e5e8ed;border-radius:20px;background:#fff}.service-view-help>i{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:#fff0f2;color:#e71932;font-size:21px}.service-view-help small,.service-view-help strong,.service-view-help a{display:block}.service-view-help small{color:#737b87}.service-view-help a{margin-top:5px;color:#e71932;font-weight:800}.service-view-process{background:#f6f7f9}.service-view-process__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.service-view-process article{position:relative;padding:30px 24px;border-radius:22px;background:#fff;border:1px solid #e9ecf0;transition:.3s}.service-view-process article:hover{transform:translateY(-7px);box-shadow:0 20px 40px rgba(17,24,36,.09);border-color:rgba(231,25,50,.3)}.service-view-process article b{position:absolute;left:20px;top:18px;color:#dfe3e9;font-size:34px}.service-view-process article i{width:58px;height:58px;border-radius:17px;display:grid;place-items:center;background:#111824;color:#fff;font-size:23px;margin-bottom:22px}.service-view-process article:hover i{background:#e71932}.service-view-process h3{font-size:21px}.service-view-process p{color:#747c88;line-height:1.75}.service-view-why__inner{display:grid;grid-template-columns:1fr 360px;gap:70px;align-items:center}.service-view-why h2{font-size:43px;margin:13px 0}.service-view-why p{font-size:18px;line-height:1.9;color:#68717e}.service-view-why ul{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}.service-view-why li{font-weight:700}.service-view-why li i{color:#e71932;margin-left:8px}.service-view-why__badge{min-height:300px;border-radius:32px;background:linear-gradient(145deg,#111824,#291019);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;box-shadow:0 30px 60px rgba(17,24,36,.2)}.service-view-why__badge i{font-size:78px;color:#ef233c;margin-bottom:20px}.service-view-why__badge strong{font-size:30px}.service-view-why__badge span{color:#bfc6d1;margin-top:8px}.service-view-faq{background:#f7f8fa}.service-view-faq__list{max-width:900px;margin:auto;display:grid;gap:13px}.service-view-faq details{background:#fff;border:1px solid #e6e9ee;border-radius:18px;padding:0 24px}.service-view-faq summary{cursor:pointer;list-style:none;padding:21px 0;font-size:18px;font-weight:800;display:flex;justify-content:space-between}.service-view-faq summary::-webkit-details-marker{display:none}.service-view-faq summary i{color:#e71932;transition:.3s}.service-view-faq details[open] summary i{transform:rotate(45deg)}.service-view-faq details p{margin:0;padding:0 0 22px;color:#6c7480;line-height:1.85;border-top:1px solid #edf0f3;padding-top:17px}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:991px){.service-view-hero__inner,.service-view-layout,.service-view-why__inner{grid-template-columns:1fr}.service-view-hero__visual{min-height:380px}.service-view-sidebar{position:static}.service-view-process__grid{grid-template-columns:1fr 1fr}.service-view-strip__grid{grid-template-columns:1fr 1fr;row-gap:22px}.service-view-strip__grid div:nth-child(2){border-left:0}.service-view-why__badge{min-height:260px}}
@media(max-width:640px){.service-view-hero{padding:62px 0}.service-view-hero__content h1{font-size:39px}.service-view-hero__content>p{font-size:16px}.service-view-hero__actions{align-items:stretch;flex-direction:column}.service-view-hero__badges{gap:12px;flex-direction:column}.service-view-hero__visual{min-height:330px}.service-view-hero__card{width:245px;height:270px}.service-view-hero__card>i{font-size:62px}.service-view-mini{font-size:12px;padding:10px}.service-view-mini--1{right:-5px}.service-view-mini--2{left:-5px}.service-view-content h2,.service-view-why h2{font-size:31px}.service-view-features,.service-view-docs>div,.service-view-process__grid,.service-view-why ul{grid-template-columns:1fr}.service-view-strip__grid{padding:22px 0}.service-view-strip strong{font-size:21px}.service-view-strip span{font-size:12px}.service-view-overview{padding-top:65px}}

/* ===== Works pages ===== */
.works-page{overflow:hidden}.works-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#0b1019,#111824 58%,#2a0d16);color:#fff;padding:94px 0 82px}.works-hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:56px 56px}.works-hero__glow{position:absolute;width:520px;height:520px;border-radius:50%;background:rgba(231,25,50,.18);filter:blur(70px);left:-180px;top:-210px}.works-hero__inner{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:70px;align-items:center}.works-hero h1{font-size:clamp(45px,5vw,72px);line-height:1.15;margin:18px 0}.works-hero h1 em{font-style:normal;color:#e71932}.works-hero p{font-size:18px;line-height:2;color:#c5ccd7}.works-hero__visual{min-height:430px;display:grid;place-items:center;position:relative}.works-showcase{width:300px;height:320px;border-radius:36px;background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.16);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 35px 75px rgba(0,0,0,.3)}.works-showcase i{font-size:78px;color:#e71932;margin-bottom:24px}.works-showcase strong{font-size:25px}.works-showcase span{color:#b8c0cc;margin-top:8px}.works-chip{position:absolute;padding:13px 17px;border-radius:14px;background:#fff;color:#111824;font-weight:800;box-shadow:0 18px 40px rgba(0,0,0,.22)}.works-chip i{color:#e71932;margin-left:7px}.works-chip--1{right:0;top:65px}.works-chip--2{left:0;top:145px}.works-chip--3{right:15px;bottom:50px}.works-stats{background:#fff;border-bottom:1px solid #e9ecf0}.works-stats__grid{display:grid;grid-template-columns:repeat(4,1fr);padding:28px 0}.works-stats__grid div{text-align:center;border-left:1px solid #e5e9ee}.works-stats__grid div:last-child{border:0}.works-stats strong{display:block;color:#e71932;font-size:27px}.works-stats span{color:#6d7581}.works-catalog{background:#f7f8fa}.works-filter{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:35px 0}.works-filter button{border:1px solid #e1e5ea;background:#fff;color:#56606d;padding:10px 20px;border-radius:999px;font-weight:800;cursor:pointer;transition:.25s}.works-filter button:hover,.works-filter button.active{background:#e71932;color:#fff;border-color:#e71932}.works-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.work-card{background:#fff;border:1px solid #e6e9ee;border-radius:24px;overflow:hidden;transition:.35s}.work-card:hover{transform:translateY(-8px);box-shadow:0 24px 55px rgba(17,24,36,.11);border-color:rgba(231,25,50,.25)}.work-card__visual{height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;position:relative;overflow:hidden}.work-card__visual:after{content:"";position:absolute;width:180px;height:180px;border:1px solid rgba(255,255,255,.15);border-radius:50%}.work-card__visual i{font-size:66px;z-index:1}.work-card__visual span{z-index:1;font-weight:800;margin-top:15px}.work-card__visual--legal{background:linear-gradient(145deg,#111824,#401320)}.work-card__visual--medical{background:linear-gradient(145deg,#142030,#731626)}.work-card__visual--business{background:linear-gradient(145deg,#111824,#26364b)}.work-card__visual--technical{background:linear-gradient(145deg,#111824,#152e3d)}.work-card__visual--finance{background:linear-gradient(145deg,#111824,#453014)}.work-card__visual--industrial{background:linear-gradient(145deg,#111824,#34373c)}.work-card__body{padding:25px}.work-card__tag{color:#e71932;font-weight:800;font-size:13px}.work-card h3{font-size:21px;margin:10px 0}.work-card p{color:#717a86;line-height:1.8;min-height:65px}.work-card a{display:flex;justify-content:space-between;align-items:center;font-weight:800;color:#111824;border-top:1px solid #edf0f3;padding-top:18px}.work-card a:hover{color:#e71932}.works-method{background:#fff}.works-method__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.works-method__grid article{position:relative;padding:30px 24px;border:1px solid #e7eaf0;border-radius:22px;background:#fff;transition:.3s}.works-method__grid article:hover{transform:translateY(-7px);box-shadow:0 18px 40px rgba(17,24,36,.09)}.works-method__grid b{position:absolute;left:20px;top:18px;font-size:33px;color:#e3e6eb}.works-method__grid i{width:58px;height:58px;border-radius:17px;display:grid;place-items:center;background:#111824;color:#fff;font-size:22px}.works-method__grid article:hover i{background:#e71932}.works-method__grid p{color:#707987;line-height:1.75}.work-view-page{background:#fff}.work-view-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#0b1019,#111824 58%,#2a0d16);color:#fff;padding:92px 0 82px}.work-view-hero__pattern{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:54px 54px}.work-view-hero__inner{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:75px;align-items:center}.work-view-hero h1{font-size:clamp(42px,5vw,68px);line-height:1.15;margin:18px 0}.work-view-hero p{font-size:18px;line-height:2;color:#c9d0da}.work-view-hero__visual{display:grid;place-items:center}.work-view-icon{width:310px;height:320px;border-radius:36px;background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.16);display:flex;flex-direction:column;align-items:center;justify-content:center}.work-view-icon i{font-size:82px;color:#e71932;margin-bottom:25px}.work-view-icon strong{font-size:27px}.work-view-icon span{color:#b8c0cc;margin-top:8px}.work-view-strip{border-bottom:1px solid #e8ebef}.work-view-strip__grid{display:grid;grid-template-columns:repeat(4,1fr);padding:27px 0}.work-view-strip__grid div{text-align:center;border-left:1px solid #e5e8ed}.work-view-strip__grid div:last-child{border:0}.work-view-strip strong{display:block;color:#e71932;font-size:25px}.work-view-strip span{color:#717986}.work-view-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:55px;align-items:start}.work-view-content h2{font-size:40px;margin:13px 0 18px}.work-view-content>p{font-size:18px;line-height:2;color:#68717d}.work-view-highlight{display:flex;gap:18px;padding:25px;margin:30px 0;border-radius:20px;background:#f7f8fa;border-right:4px solid #e71932}.work-view-highlight>i{width:54px;height:54px;flex:0 0 54px;border-radius:16px;display:grid;place-items:center;background:#111824;color:#fff;font-size:22px}.work-view-highlight p{margin:7px 0 0;color:#707986;line-height:1.75}.work-view-scope{display:grid;grid-template-columns:1fr 1fr;gap:14px}.work-view-scope span{padding:15px;border:1px solid #e6e9ee;border-radius:14px;font-weight:700}.work-view-scope i{color:#e71932;margin-left:8px}.work-view-sidebar{position:sticky;top:125px}.work-view-result{padding:31px;border-radius:25px;background:#111824;color:#fff}.work-view-result>span{color:#ef233c;font-weight:800}.work-view-result h3{font-size:29px}.work-view-result p{color:#bdc5d0;line-height:1.8}.work-view-result ul{display:grid;gap:12px;margin:22px 0}.work-view-result li i{color:#e71932;margin-left:8px}.work-view-result a{display:flex;justify-content:space-between;background:#e71932;color:#fff;padding:15px 17px;border-radius:13px;font-weight:800}.work-view-process{background:#f7f8fa}
@media(max-width:991px){.works-hero__inner,.work-view-hero__inner,.work-view-layout{grid-template-columns:1fr}.works-grid{grid-template-columns:1fr 1fr}.works-method__grid{grid-template-columns:1fr 1fr}.work-view-sidebar{position:static}}
@media(max-width:640px){.works-hero,.work-view-hero{padding:62px 0}.works-hero__visual{min-height:340px}.works-showcase,.work-view-icon{width:245px;height:270px}.works-stats__grid,.work-view-strip__grid{grid-template-columns:1fr 1fr;row-gap:20px}.works-grid,.works-method__grid,.work-view-scope{grid-template-columns:1fr}.work-card__visual{height:190px}.works-chip{font-size:12px;padding:10px}.work-view-content h2{font-size:31px}}

/* Blog & Article */
.blog-hero{padding:72px 0;background:linear-gradient(135deg,#0f1622 0%,#17101a 62%,#5d1020 140%);color:#fff;overflow:hidden}.blog-hero__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center}.blog-hero__content h1{font-size:clamp(2.35rem,4vw,4.6rem);line-height:1.15;margin:16px 0}.blog-hero__content h1 span{color:#ef233c}.blog-hero__content p{color:#cbd1dc;font-size:1.12rem;line-height:1.9;max-width:620px}.blog-search{display:flex;max-width:520px;margin-top:30px;background:#fff;border-radius:16px;padding:6px;box-shadow:0 18px 45px rgba(0,0,0,.24)}.blog-search input{border:0;outline:0;flex:1;padding:0 18px;font-family:inherit;font-size:1rem;background:transparent}.blog-search button{width:52px;height:52px;border:0;border-radius:12px;background:#e71932;color:#fff}.featured-post{position:relative;display:block;min-height:460px;border-radius:28px;overflow:hidden;box-shadow:0 24px 65px rgba(0,0,0,.34)}.featured-post img{width:100%;height:100%;position:absolute;object-fit:cover;background:#fff}.featured-post:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,12,20,.95),rgba(7,12,20,.05) 70%)}.featured-post__overlay{position:absolute;z-index:2;inset:auto 34px 32px}.featured-post__overlay>span,.article-category{display:inline-flex;background:#e71932;color:#fff;border-radius:50px;padding:8px 14px;font-weight:700;font-size:.86rem}.featured-post__overlay h2{font-size:1.8rem;line-height:1.45;margin:14px 0}.featured-post__overlay div{display:flex;gap:20px;color:#d3d7df}.section-pad{padding:90px 0}.blog-toolbar{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:38px}.blog-toolbar h2{font-size:clamp(1.8rem,3vw,3rem);margin:8px 0 0}.blog-filters{display:flex;gap:8px;flex-wrap:wrap}.blog-filters button{border:1px solid #dfe4eb;background:#fff;border-radius:50px;padding:10px 18px;font-family:inherit;font-weight:700;cursor:pointer;transition:.25s}.blog-filters button:hover,.blog-filters button.active{background:#111824;color:#fff;border-color:#111824}.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.blog-card{border:1px solid #e8ecf1;border-radius:22px;background:#fff;overflow:hidden;box-shadow:0 10px 32px rgba(17,24,36,.06);transition:.3s}.blog-card:hover{transform:translateY(-8px);box-shadow:0 20px 45px rgba(17,24,36,.12);border-color:rgba(231,25,50,.25)}.blog-card__image{height:235px;display:block;position:relative;overflow:hidden;background:#f6f8fb}.blog-card__image img{width:100%;height:100%;object-fit:cover;transition:.5s}.blog-card:hover .blog-card__image img{transform:scale(1.05)}.blog-card__image>span{position:absolute;right:16px;top:16px;background:#fff;color:#e71932;padding:7px 12px;border-radius:30px;font-weight:800;font-size:.82rem;box-shadow:0 8px 20px rgba(0,0,0,.1)}.blog-card__body{padding:24px}.post-meta{display:flex;gap:15px;color:#7d8795;font-size:.84rem}.post-meta i{color:#e71932}.blog-card h3{font-size:1.25rem;line-height:1.65;margin:14px 0 8px}.blog-card h3 a{color:#111824}.blog-card p{color:#687383;line-height:1.8}.read-more{display:inline-flex;gap:9px;align-items:center;color:#e71932;font-weight:800;margin-top:12px}.no-posts{text-align:center;padding:50px;font-size:1.1rem}.newsletter-band{padding:0 0 90px}.newsletter-band__inner{background:#e71932;border-radius:28px;padding:48px 55px;color:#fff;display:flex;justify-content:space-between;gap:40px;align-items:center}.newsletter-band h2{font-size:2.2rem;margin:5px 0}.newsletter-band p{opacity:.85}.newsletter-band form{display:flex;gap:10px;width:min(100%,480px)}.newsletter-band input{flex:1;border:0;border-radius:12px;padding:0 18px;font-family:inherit}
.article-hero{padding:68px 0 76px;background:linear-gradient(135deg,#0e1520,#15111a 65%,#56101d);color:#fff;text-align:center}.breadcrumbs{display:flex;justify-content:center;align-items:center;gap:10px;color:#b7bfcb;font-size:.9rem;margin-bottom:28px}.breadcrumbs a{color:#d7dce4}.breadcrumbs i{font-size:.7rem;color:#e71932}.article-hero h1{font-size:clamp(2.25rem,4.8vw,4.7rem);line-height:1.3;max-width:1100px;margin:18px auto}.article-hero>div>p{font-size:1.15rem;color:#c8ced8;max-width:800px;margin:auto;line-height:1.9}.article-meta{margin-top:24px;display:flex;justify-content:center;gap:25px;flex-wrap:wrap;color:#d8dce4}.article-meta i{color:#ef233c;margin-left:6px}.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:44px;align-items:start;padding-top:70px;padding-bottom:80px}.article-content{min-width:0}.article-cover{margin:0 0 22px}.article-cover img{width:100%;max-height:580px;object-fit:cover;border-radius:26px;background:#f5f7fa;box-shadow:0 15px 45px rgba(17,24,36,.1)}.article-cover figcaption{text-align:center;color:#858e9b;font-size:.85rem;margin-top:10px}.article-share{display:flex;align-items:center;gap:9px;border-bottom:1px solid #e7ebf0;padding:0 0 22px;margin-bottom:35px}.article-share>span{font-weight:800;margin-left:8px}.article-share a,.article-share button{width:39px;height:39px;border-radius:50%;border:1px solid #dde3ea;background:#fff;display:grid;place-items:center;color:#111824;cursor:pointer}.article-share a:hover,.article-share button:hover{background:#e71932;color:#fff;border-color:#e71932}.article-body{font-size:1.08rem;line-height:2.05;color:#303a48}.article-body .lead{font-size:1.28rem;font-weight:500;color:#111824;border-right:4px solid #e71932;padding-right:20px}.article-body h2{font-size:1.85rem;color:#111824;margin:42px 0 14px;scroll-margin-top:120px}.article-body p{margin:0 0 20px}.article-note{display:flex;gap:16px;background:#fff2f4;border:1px solid #ffd7dd;border-radius:16px;padding:20px 22px;margin:28px 0}.article-note i{color:#e71932;font-size:1.3rem;margin-top:5px}.article-note p{margin:2px 0 0}.article-checklist{list-style:none;padding:0}.article-checklist li{position:relative;padding-right:30px;margin:9px 0}.article-checklist li:before{content:"✓";position:absolute;right:0;color:#e71932;font-weight:900}.article-steps{counter-reset:step;list-style:none;padding:0}.article-steps li{position:relative;padding:18px 66px 18px 18px;background:#f7f9fb;border-radius:14px;margin:12px 0}.article-steps li:before{counter-increment:step;content:counter(step);position:absolute;right:16px;top:14px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#e71932;color:#fff;font-weight:900}.article-body blockquote{margin:32px 0;padding:26px 30px;background:#111824;color:#fff;border-radius:18px;font-size:1.2rem;font-weight:700}.article-faq details{border:1px solid #e2e6ec;border-radius:13px;margin:10px 0;padding:16px 18px}.article-faq summary{font-weight:800;cursor:pointer}.article-faq details p{margin:12px 0 0;color:#5e6978}.article-cta{background:#e71932;color:#fff;border-radius:22px;padding:30px;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:45px}.article-cta h3{font-size:1.5rem;margin:5px 0}.article-author{display:flex;gap:18px;align-items:center;border-top:1px solid #e2e7ed;margin-top:38px;padding-top:28px}.article-author img{width:70px;height:70px;object-fit:contain;border:1px solid #eee;border-radius:15px}.article-author h3{margin:2px 0}.article-author p{color:#697585;margin:4px 0}.article-sidebar{position:sticky;top:115px}.sidebar-card{border:1px solid #e4e8ee;border-radius:18px;padding:24px;background:#fff;margin-bottom:20px;box-shadow:0 10px 30px rgba(17,24,36,.05)}.sidebar-card h3{margin:0 0 14px;font-size:1.2rem}.sidebar-card p{color:#687383;line-height:1.8}.toc a{display:block;padding:10px 0;border-bottom:1px dashed #e3e7ec;color:#3e4856}.toc a:last-child{border:0}.toc a:hover{color:#e71932;padding-right:5px}.btn--block{width:100%;justify-content:center}.sidebar-whatsapp{display:flex;gap:8px;justify-content:center;margin-top:12px;color:#159b54;font-weight:800}.related-mini a{display:flex;gap:12px;align-items:center;margin-top:14px;color:#111824;font-weight:700;line-height:1.5}.related-mini img{width:58px;height:52px;object-fit:cover;border-radius:9px;background:#f4f6f8}.related-section{background:#f5f7fa}.section-heading{text-align:center;margin-bottom:35px}.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.related-grid>a{background:#fff;border-radius:18px;overflow:hidden;padding-bottom:20px;box-shadow:0 10px 28px rgba(17,24,36,.06)}.related-grid img{width:100%;height:210px;object-fit:cover;background:#fff}.related-grid span,.related-grid h3{display:block;margin:14px 20px 0}.related-grid span{color:#e71932;font-weight:800;font-size:.85rem}.related-grid h3{font-size:1.15rem;line-height:1.6;color:#111824}
@media(max-width:1100px){.blog-hero__grid{grid-template-columns:1fr}.featured-post{min-height:420px}.blog-grid{grid-template-columns:repeat(2,1fr)}.article-layout{grid-template-columns:1fr}.article-sidebar{position:static;display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.article-sidebar .sidebar-card{margin:0}.related-mini{grid-column:1/-1}}
@media(max-width:700px){.blog-hero{padding:48px 0}.featured-post{min-height:390px}.featured-post__overlay{inset:auto 20px 20px}.featured-post__overlay h2{font-size:1.35rem}.blog-toolbar{align-items:start;flex-direction:column}.blog-grid,.related-grid{grid-template-columns:1fr}.newsletter-band__inner,.newsletter-band form,.article-cta{flex-direction:column;align-items:stretch}.newsletter-band__inner{padding:32px 24px}.newsletter-band input{min-height:52px}.article-layout{padding-top:40px}.article-sidebar{display:block}.article-sidebar .sidebar-card{margin-bottom:16px}.article-hero{padding:45px 0}.article-meta{gap:12px;font-size:.85rem}.article-body{font-size:1rem}.article-body h2{font-size:1.5rem}.article-share{flex-wrap:wrap}.article-author{align-items:flex-start}.blog-card__image{height:215px}}

/* Clients page */
.clients-hero{background:linear-gradient(135deg,#0c121d 0%,#111824 58%,#4b0e1a 150%);color:#fff;padding:82px 0;overflow:hidden}.clients-hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}.clients-hero__content h1{font-size:clamp(2.7rem,5vw,5.3rem);line-height:1.08;margin:16px 0 22px}.clients-hero__content h1 span{display:block;color:#ef233c}.clients-hero__content p{font-size:1.12rem;line-height:2;color:#c9d0dc;max-width:700px}.clients-hero__actions{display:flex;gap:14px;margin-top:30px}.clients-hero .btn--light{background:#fff;color:#111824}.clients-trust{display:flex;gap:34px;margin-top:36px;border-top:1px solid rgba(255,255,255,.12);padding-top:24px}.clients-trust span{color:#bcc5d2}.clients-trust strong{display:block;font-size:1.45rem;color:#fff}.clients-hero__visual{min-height:460px;position:relative}.hero-logo-cloud{position:absolute;inset:0}.cloud-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:150px;height:150px;background:#fff;border-radius:38px;display:grid;place-items:center;box-shadow:0 25px 70px rgba(0,0,0,.35);z-index:3}.cloud-center img{max-width:105px}.cloud-card{position:absolute;background:rgba(255,255,255,.96);color:#111824;padding:16px 20px;border-radius:16px;display:flex;gap:11px;align-items:center;font-weight:800;box-shadow:0 18px 45px rgba(0,0,0,.25);animation:clientFloat 5s ease-in-out infinite}.cloud-card i{color:#e71932;font-size:1.25rem}.cloud-card--1{right:3%;top:14%}.cloud-card--2{left:2%;top:21%;animation-delay:-1s}.cloud-card--3{right:2%;bottom:15%;animation-delay:-2s}.cloud-card--4{left:4%;bottom:18%;animation-delay:-3s}.orbit{position:absolute;border:1px solid rgba(231,25,50,.28);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}.orbit--one{width:350px;height:350px}.orbit--two{width:470px;height:470px;border-color:rgba(255,255,255,.1)}@keyframes clientFloat{50%{transform:translateY(-10px)}}
.clients-strip{margin-top:-30px;position:relative;z-index:4}.logo-marquee{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid #e9edf2;border-radius:24px;box-shadow:0 20px 55px rgba(17,24,36,.1);overflow:hidden}.client-logo{height:155px;display:flex;align-items:center;justify-content:center;padding:25px;border-left:1px solid #edf0f4;transition:.3s}.client-logo:last-child{border-left:0}.client-logo:hover{background:#f8fafc;transform:translateY(-4px)}.client-logo img{max-width:100%;max-height:100px;object-fit:contain}.client-logo--dark{background:#0b0b0b}.client-sector-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:45px}.client-sector-card{padding:34px;border:1px solid #e7ebf1;border-radius:24px;background:#fff;box-shadow:0 12px 35px rgba(17,24,36,.05);transition:.3s;position:relative;overflow:hidden}.client-sector-card:before{content:"";position:absolute;right:0;top:0;width:5px;height:0;background:#e71932;transition:.35s}.client-sector-card:hover{transform:translateY(-8px);box-shadow:0 22px 50px rgba(17,24,36,.12);border-color:rgba(231,25,50,.25)}.client-sector-card:hover:before{height:100%}.client-sector-card__icon{width:74px;height:74px;border-radius:18px;background:#f5f7fa;display:grid;place-items:center;margin-bottom:22px}.client-sector-card__icon img{width:52px;height:52px}.client-sector-card h3{font-size:1.35rem;margin-bottom:10px}.client-sector-card p{color:#6d7785;line-height:1.85}.client-sector-card>span{display:inline-block;margin-top:18px;color:#e71932;font-weight:800;font-size:.9rem}.client-story-section{padding:90px 0;background:#f5f7fa}.client-story{display:grid;grid-template-columns:.9fr 1.1fr;gap:55px;align-items:center}.client-story__visual{background:#111824;color:#fff;border-radius:28px;padding:48px;min-height:380px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}.client-story__visual:after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:#e71932;opacity:.13;left:-70px;bottom:-80px}.story-badge{width:66px;height:66px;border-radius:18px;background:#e71932;display:grid;place-items:center;font-size:1.5rem}.client-story__visual h3{font-size:2.15rem;margin:24px 0 15px}.client-story__visual p{color:#c7cfdb;line-height:1.9}.client-story__steps{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.client-story__steps>div{background:#fff;border-radius:20px;padding:25px;border:1px solid #e5e9ef}.client-story__steps span{color:#e71932;font-weight:900;font-size:1.2rem}.client-story__steps h4{font-size:1.15rem;margin:10px 0 7px}.client-story__steps p{color:#737d8b;line-height:1.7}.client-quotes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:42px}.client-quotes-grid blockquote{margin:0;padding:32px;border-radius:22px;background:#fff;border:1px solid #e7ebf0;box-shadow:0 12px 35px rgba(17,24,36,.06)}.client-quotes-grid blockquote p{font-size:1.05rem;line-height:1.9;color:#343d49}.quote-stars{color:#ffb300;letter-spacing:3px;margin-bottom:18px}.client-quotes-grid footer{margin-top:22px;padding-top:18px;border-top:1px solid #edf0f4;display:flex;flex-direction:column}.client-quotes-grid footer span{color:#7b8592;font-size:.9rem;margin-top:3px}.clients-cta{padding:0 0 90px}.clients-cta__inner{background:#e71932;color:#fff;border-radius:28px;padding:54px 58px;display:flex;justify-content:space-between;gap:35px;align-items:center}.clients-cta__inner h2{font-size:2.3rem;margin:7px 0}.clients-cta__inner p{opacity:.88}.clients-cta__actions{display:flex;gap:12px;align-items:center}.clients-whatsapp{background:#18b966;color:#fff;padding:15px 22px;border-radius:12px;font-weight:800;white-space:nowrap}.clients-whatsapp i{font-size:1.2rem;margin-left:6px}
@media(max-width:1000px){.clients-hero__grid,.client-story{grid-template-columns:1fr}.clients-hero__visual{min-height:400px}.client-sector-grid,.client-quotes-grid{grid-template-columns:repeat(2,1fr)}.logo-marquee{grid-template-columns:repeat(2,1fr)}.clients-cta__inner{align-items:flex-start;flex-direction:column}}@media(max-width:650px){.clients-hero{padding:55px 0}.clients-hero__visual{min-height:330px}.cloud-center{width:115px;height:115px}.cloud-center img{max-width:80px}.orbit--one{width:250px;height:250px}.orbit--two{width:330px;height:330px}.cloud-card{padding:11px 13px;font-size:.78rem}.clients-trust{gap:16px;flex-wrap:wrap}.clients-hero__actions,.clients-cta__actions{flex-direction:column;align-items:stretch}.logo-marquee,.client-sector-grid,.client-story__steps,.client-quotes-grid{grid-template-columns:1fr}.client-logo{border-left:0;border-bottom:1px solid #edf0f4}.client-story__visual{padding:32px}.clients-cta__inner{padding:36px 25px}.clients-cta__inner h2{font-size:1.8rem}}

/* ================= Contact page ================= */
.contact-page{background:#fff;color:#111824}.contact-hero{position:relative;overflow:hidden;padding:92px 0 82px;background:radial-gradient(circle at 12% 25%,rgba(231,25,50,.18),transparent 28%),linear-gradient(135deg,#0b1019,#151d2b 60%,#26111a)}.contact-hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:42px 42px}.contact-hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:70px}.contact-hero__content{color:#fff}.contact-hero h1{font-size:clamp(42px,5vw,72px);line-height:1.15;margin:16px 0 22px;font-weight:900}.contact-hero h1 span{color:#ff344d}.contact-hero p{font-size:19px;line-height:2;color:#cbd2de;max-width:720px}.contact-hero__actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}.contact-hero__trust{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:38px}.contact-hero__trust span{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;padding:15px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.05);backdrop-filter:blur(8px)}.contact-hero__trust i{grid-row:1/3;color:#ff344d;font-size:22px}.contact-hero__trust strong{font-size:14px}.contact-hero__trust small{color:#aeb7c5}.contact-hero__visual{height:440px;position:relative;display:grid;place-items:center}.contact-center-icon{width:150px;height:150px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#f51b38,#ad0f25);box-shadow:0 0 0 22px rgba(231,25,50,.08),0 30px 80px rgba(231,25,50,.35);font-size:58px;color:#fff;z-index:3}.contact-orbit{position:absolute;border:1px solid rgba(255,255,255,.12);border-radius:50%}.contact-orbit--1{width:300px;height:300px}.contact-orbit--2{width:410px;height:410px;border-style:dashed;animation:contact-spin 22s linear infinite}@keyframes contact-spin{to{transform:rotate(360deg)}}.contact-float{position:absolute;display:flex;align-items:center;gap:10px;padding:13px 18px;background:#fff;border-radius:14px;box-shadow:0 20px 40px rgba(0,0,0,.22);font-weight:800;color:#111824}.contact-float i{color:#e71932;font-size:20px}.contact-float--1{top:42px;right:20px}.contact-float--2{bottom:58px;right:4px}.contact-float--3{top:170px;left:0}.contact-channels{margin-top:-34px;position:relative;z-index:4}.contact-channels__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.contact-channel{background:#fff;border:1px solid #e8ebf0;border-radius:20px;padding:25px;text-decoration:none;color:#111824;box-shadow:0 18px 45px rgba(17,24,36,.08);transition:.35s}.contact-channel:hover{transform:translateY(-7px);border-color:rgba(231,25,50,.35);box-shadow:0 25px 55px rgba(17,24,36,.12)}.contact-channel__icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#fff1f3;color:#e71932;font-size:20px;margin-bottom:18px}.contact-channel small,.contact-channel em{display:block;color:#7b8492;font-style:normal}.contact-channel strong{display:block;font-size:17px;margin:6px 0}.contact-channel em{font-size:13px;line-height:1.7}.contact-main{padding:105px 0}.contact-main__grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.75fr);gap:34px;align-items:start}.contact-form-card,.contact-side-card{border:1px solid #e8ebf0;border-radius:26px;background:#fff;box-shadow:0 18px 55px rgba(17,24,36,.07)}.contact-form-card{padding:42px}.contact-section-head h2{font-size:clamp(31px,4vw,48px);margin:10px 0 12px}.contact-section-head p{color:#707987;line-height:1.9}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}.contact-form label>span{display:block;font-weight:800;margin-bottom:9px}.form-full{grid-column:1/-1}.field-wrap{position:relative}.field-wrap>i{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:#e71932;z-index:2}.field-wrap input,.field-wrap select,.field-wrap textarea{width:100%;border:1px solid #dfe4ea;background:#f8fafc;border-radius:13px;padding:15px 46px 15px 15px;font:inherit;outline:none;transition:.25s}.field-wrap textarea{resize:vertical;min-height:145px}.field-wrap--textarea>i{top:22px}.field-wrap input:focus,.field-wrap select:focus,.field-wrap textarea:focus{border-color:#e71932;background:#fff;box-shadow:0 0 0 4px rgba(231,25,50,.08)}.upload-field{position:relative;border:2px dashed #d9dee6;border-radius:16px;padding:28px;text-align:center;cursor:pointer;background:#fafbfd;transition:.25s}.upload-field:hover{border-color:#e71932;background:#fff7f8}.upload-field input{position:absolute;inset:0;opacity:0;cursor:pointer}.upload-field div i{display:block;font-size:34px;color:#e71932;margin-bottom:9px}.upload-field div strong,.upload-field div small{display:block}.upload-field div small{color:#87909d;margin-top:5px}.privacy-check{display:flex!important;gap:10px;align-items:flex-start;margin:20px 0;color:#66707e;line-height:1.7}.privacy-check input{accent-color:#e71932;margin-top:6px}.contact-submit{min-width:200px}.contact-side{display:grid;gap:22px;position:sticky;top:24px}.contact-side-card{padding:28px}.contact-side-card--dark{background:#111824;color:#fff;border-color:#111824}.contact-side-card h3{font-size:24px;margin:8px 0 18px}.working-hours{list-style:none;padding:0;margin:0 0 22px}.working-hours li{display:flex;justify-content:space-between;gap:15px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1)}.working-hours strong{font-size:13px;color:#d9e0ea}.side-whatsapp{display:flex;align-items:center;gap:12px;background:#20bf63;color:#fff;padding:15px;border-radius:15px;text-decoration:none}.side-whatsapp>i:first-child{font-size:26px}.side-whatsapp span{flex:1}.side-whatsapp small{display:block;color:#eafff1;margin-top:3px}.contact-tips{list-style:none;padding:0;margin:0}.contact-tips li{padding:10px 0;display:flex;gap:10px;color:#596372}.contact-tips i{color:#e71932}.contact-side-card--note{display:flex;gap:15px;background:#fff5f6}.contact-side-card--note>i{width:46px;height:46px;flex:0 0 46px;display:grid;place-items:center;border-radius:13px;background:#e71932;color:#fff}.contact-side-card--note p{color:#6f7885;line-height:1.8;margin:7px 0 0}.contact-map-section{padding:100px 0;background:#f5f7fa}.contact-section-head--center{text-align:center;max-width:760px;margin:0 auto 38px}.contact-map-card{overflow:hidden;border-radius:26px;background:#fff;box-shadow:0 22px 65px rgba(17,24,36,.1)}.contact-map-card iframe{display:block;width:100%;height:430px;border:0;filter:grayscale(.2)}.map-info{display:flex;align-items:center;gap:17px;padding:24px 28px}.map-info>span{width:54px;height:54px;display:grid;place-items:center;border-radius:15px;background:#fff0f2;color:#e71932;font-size:22px}.map-info div{flex:1}.map-info small,.map-info strong{display:block}.map-info p{margin:5px 0 0;color:#747e8a}.map-info>a{color:#e71932;font-weight:800;text-decoration:none}.contact-faq-section{padding:100px 0}.contact-faq__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}.contact-faq-list details{border-bottom:1px solid #e1e5eb;padding:0}.contact-faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:19px;font-weight:800;padding:22px 0}.contact-faq-list summary::-webkit-details-marker{display:none}.contact-faq-list summary i{color:#e71932;transition:.25s}.contact-faq-list details[open] summary i{transform:rotate(45deg)}.contact-faq-list details p{color:#697381;line-height:1.9;margin:0 0 22px}.contact-cta{background:#e71932;padding:55px 0;color:#fff}.contact-cta__inner{display:flex;align-items:center;justify-content:space-between;gap:30px}.contact-cta h2{font-size:clamp(28px,4vw,46px);margin:8px 0}.contact-cta p{margin:0;color:#ffe4e8}.contact-cta__inner>div:last-child{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.contact-cta__phone{color:#fff;text-decoration:none;font-weight:800;display:flex;gap:9px;align-items:center}
@media(max-width:1100px){.contact-hero__grid,.contact-main__grid,.contact-faq__grid{grid-template-columns:1fr}.contact-hero__visual{height:360px}.contact-channels__grid{grid-template-columns:repeat(2,1fr)}.contact-side{position:static;grid-template-columns:repeat(2,1fr)}.contact-side-card--note{grid-column:1/-1}}@media(max-width:700px){.contact-hero{padding:65px 0 75px}.contact-hero__trust,.contact-channels__grid,.form-grid,.contact-side{grid-template-columns:1fr}.contact-hero__visual{height:300px}.contact-orbit--2{width:290px;height:290px}.contact-orbit--1{width:220px;height:220px}.contact-center-icon{width:115px;height:115px;font-size:42px}.contact-float{font-size:12px;padding:10px 12px}.contact-float--1{right:0}.contact-float--3{left:0}.contact-form-card{padding:24px}.contact-main,.contact-map-section,.contact-faq-section{padding:70px 0}.map-info,.contact-cta__inner{align-items:flex-start;flex-direction:column}.contact-map-card iframe{height:330px}.form-full{grid-column:auto}.contact-hero__actions .btn{width:100%;justify-content:center}}


/* Step 27: unified professional About hero slider */
.about-page .about-hero,
.about-page .about-hero .hero-slider,
.about-page .about-hero .hero-slide {
  min-height: 500px;
}
.about-page .about-hero .hero-slide::before {
  background-position: var(--slide-position, center);
}
.about-page .about-hero .hero-slide__overlay {
  background: linear-gradient(90deg, rgba(17,24,36,.93) 0%, rgba(17,24,36,.78) 46%, rgba(37,8,18,.72) 100%);
}
.about-page .about-hero__content {
  min-height: 500px;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.about-page .about-hero__copy {
  max-width: 900px;
  margin-inline: auto;
  align-items: center;
}
.about-page .about-hero__copy h1,
.about-page .about-hero__copy h2 {
  color: #fff;
  font-size: clamp(2.8rem, 5vw, 5rem);
  line-height: 1.15;
  margin: 22px 0 14px;
}
.about-page .about-hero__lead {
  max-width: 800px;
  color: rgba(255,255,255,.82);
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
  line-height: 1.9;
  margin: 0 auto;
}
.about-page .about-hero .about-breadcrumb {
  margin-top: 28px;
  justify-content: center;
  color: #fff;
}
.about-page .about-hero .about-breadcrumb a,
.about-page .about-hero .about-breadcrumb span { color: #fff; }
.about-page .about-hero .about-breadcrumb i { color: #8fc8ff; }
.about-page .about-hero .hero__actions { justify-content: center; margin-top: 28px; }
.about-page .about-hero .hero-slider__pagination { bottom: 26px; }
@media (max-width: 768px) {
  .about-page .about-hero,
  .about-page .about-hero .hero-slider,
  .about-page .about-hero .hero-slide,
  .about-page .about-hero__content { min-height: 560px; }
  .about-page .about-hero__copy h1,
  .about-page .about-hero__copy h2 { font-size: 2.65rem; }
  .about-page .about-hero__lead { font-size: 1rem; line-height: 1.8; }
  .about-page .about-hero .hero__actions { flex-direction: column; width: 100%; }
  .about-page .about-hero .hero__actions .btn { width: 100%; justify-content: center; }
}


/* Step 28: fix About slider visibility and align it with the main hero */
.about-page .about-hero {
  min-height: 560px;
  background: #070a0f;
}
.about-page .about-hero .hero-slider,
.about-page .about-hero .hero-slide {
  min-height: 560px;
}
.about-page .about-hero .hero-slide {
  background-image:
    linear-gradient(90deg,rgba(5,8,13,.18) 0%,rgba(5,8,13,.32) 38%,rgba(5,8,13,.78) 68%,rgba(5,8,13,.97) 100%),
    var(--slide-image);
  background-position: var(--slide-position, center center);
  background-size: cover;
  background-repeat: no-repeat;
}
.about-page .about-hero .hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}
.about-page .about-hero__content {
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  z-index: 3;
}
.about-page .about-hero__copy {
  position: static;
  width: 52%;
  max-width: 650px;
  margin: 0;
  padding: 30px 0 55px;
  transform: none;
  text-align: right;
}
.about-page .about-hero__copy > * {
  position: relative;
  z-index: 1;
}
.about-page .about-hero__copy h1,
.about-page .about-hero__copy h2 {
  margin: 20px 0 14px;
  color: #fff;
  font-size: clamp(3rem, 5vw, 5rem);
  line-height: 1.15;
}
.about-page .about-hero__lead {
  margin: 0;
  max-width: 640px;
  color: rgba(255,255,255,.84);
  font-size: clamp(1.05rem,1.55vw,1.32rem);
  line-height: 1.9;
}
.about-page .about-hero .about-breadcrumb,
.about-page .about-hero .hero__actions {
  justify-content: flex-start;
}
@media (max-width: 900px) {
  .about-page .about-hero__content {
    justify-content: center;
  }
  .about-page .about-hero__copy {
    width: 100%;
    max-width: 760px;
    padding-inline: 18px;
    text-align: center;
  }
  .about-page .about-hero .about-breadcrumb,
  .about-page .about-hero .hero__actions {
    justify-content: center;
  }
}
@media (max-width: 768px) {
  .about-page .about-hero,
  .about-page .about-hero .hero-slider,
  .about-page .about-hero .hero-slide,
  .about-page .about-hero__content {
    min-height: 620px;
  }
  .about-page .about-hero__copy {
    padding: 55px 18px 85px;
  }
}

/* Step 29: isolated, robust About hero slider */
.about-pro-hero{position:relative;height:560px;min-height:560px;overflow:hidden;background:#070a0f;color:#fff}
.about-pro-slide{position:absolute;inset:0;opacity:0;visibility:hidden;z-index:0;background-size:cover;background-position:center;background-repeat:no-repeat;transition:opacity .75s ease,visibility .75s ease;isolation:isolate}
.about-pro-slide::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,8,13,.18),rgba(5,8,13,.38) 42%,rgba(5,8,13,.92) 78%,#070a0f);z-index:-1}
.about-pro-slide.is-active{opacity:1;visibility:visible;z-index:2}
.about-pro-overlay{position:absolute;inset:0;background:radial-gradient(circle at 78% 38%,rgba(231,25,50,.17),transparent 34%),linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.14));pointer-events:none}
.about-pro-inner{height:100%;min-height:560px;display:flex;align-items:center;justify-content:flex-start;position:relative;z-index:2}
.about-pro-copy{width:min(650px,52%);text-align:right;padding:40px 0 72px}
.about-pro-copy>*{opacity:0;transform:translateY(18px)}
.about-pro-slide.is-active .about-pro-copy>*{animation:aboutProIn .65s ease forwards}
.about-pro-slide.is-active .about-pro-copy>*:nth-child(2){animation-delay:.1s}.about-pro-slide.is-active .about-pro-copy>*:nth-child(3){animation-delay:.2s}.about-pro-slide.is-active .about-pro-copy>*:nth-child(4){animation-delay:.3s}
@keyframes aboutProIn{to{opacity:1;transform:none}}
.about-pro-eyebrow{display:inline-flex;align-items:center;gap:10px;padding:10px 15px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(231,25,50,.12);font-weight:800;color:#fff}
.about-pro-eyebrow i{color:#ff233d}
.about-pro-copy h1,.about-pro-copy h2{font-size:clamp(3rem,5vw,5rem);line-height:1.15;margin:22px 0 16px;color:#fff}
.about-pro-copy p{font-size:clamp(1.05rem,1.55vw,1.32rem);line-height:1.9;color:rgba(255,255,255,.84);margin:0;max-width:640px}
.about-pro-actions,.about-pro-breadcrumb{display:flex;align-items:center;gap:14px;margin-top:28px;flex-wrap:wrap}
.about-pro-breadcrumb a,.about-pro-breadcrumb span{color:#fff;font-weight:700}.about-pro-breadcrumb i{color:#8fc8ff}
.about-pro-arrow{position:absolute;top:50%;z-index:8;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(7,10,15,.55);color:#fff;display:grid;place-items:center;transform:translateY(-50%);opacity:.78;transition:.25s}
.about-pro-arrow:hover{background:#e71932;border-color:#e71932;opacity:1}.about-pro-arrow--prev{right:24px}.about-pro-arrow--next{left:24px}
.about-pro-dots{position:absolute;z-index:8;bottom:28px;right:50%;transform:translateX(50%);display:flex;gap:9px;padding:9px 12px;border-radius:999px;background:rgba(7,10,15,.58);border:1px solid rgba(255,255,255,.12)}
.about-pro-dots button{width:9px;height:9px;padding:0;border:0;border-radius:99px;background:rgba(255,255,255,.5);transition:.3s}.about-pro-dots button.is-active{width:34px;background:#e71932}
@media(max-width:900px){.about-pro-hero{height:620px;min-height:620px}.about-pro-inner{min-height:620px;justify-content:center}.about-pro-copy{width:100%;max-width:760px;text-align:center;padding:70px 20px 90px}.about-pro-copy p{margin-inline:auto}.about-pro-actions,.about-pro-breadcrumb{justify-content:center}.about-pro-arrow{display:none}}
@media(max-width:600px){.about-pro-copy h1,.about-pro-copy h2{font-size:2.55rem}.about-pro-actions{flex-direction:column}.about-pro-actions .btn{width:100%;justify-content:center}}

/* Step 32: center the process connector through the numbered circles */
@media (min-width: 901px){
  .process-grid::before{
    top:36px;
    transform:translateY(-50%);
  }
}

/* === Step 33: mobile-only fixed navbar across the entire project === */
@media (max-width: 767px){
  html{
    scroll-padding-top:88px;
  }

  body{
    padding-top:88px !important;
  }

  /* Keep the compact mobile navigation visible at all times. */
  .navbar,
  .navbar.is-sticky{
    display:block !important;
    position:fixed !important;
    inset:0 0 auto 0 !important;
    width:100% !important;
    z-index:10000 !important;
    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;
    background:rgba(255,255,255,.98) !important;
    border-bottom:1px solid var(--line) !important;
    box-shadow:0 8px 24px rgba(9,15,25,.12) !important;
    backdrop-filter:blur(14px) !important;
    -webkit-backdrop-filter:blur(14px) !important;
  }

  /* The desktop top strip remains outside the mobile viewport. */
  .site-header{
    display:none !important;
  }

  .container.navbar__inner{
    min-height:88px !important;
  }

  .nav-panel{
    position:fixed !important;
    top:88px !important;
    right:0 !important;
    left:0 !important;
    height:calc(100dvh - 88px) !important;
    max-height:calc(100dvh - 88px) !important;
    z-index:9999 !important;
    overscroll-behavior:contain;
  }

  /* Anchored sections are not hidden behind the fixed navigation. */
  main,
  section[id],
  [id]{
    scroll-margin-top:96px;
  }
}

@media (max-width: 430px){
  html{scroll-padding-top:88px}
  body{padding-top:88px !important}
}

/* Step 35: prominent "all services" CTA inside desktop mega menu */
@media (min-width: 992px){
  .services-dropdown__header{
    align-items:stretch;
    gap:18px;
    padding:0 0 16px;
  }
  .services-dropdown__intro{
    min-width:190px;
    justify-content:center;
    padding-inline:4px;
  }
  .services-dropdown__cta{
    position:relative;
    flex:1;
    min-height:86px;
    padding:13px 15px;
    display:grid !important;
    grid-template-columns:56px 1fr 36px;
    align-items:center;
    gap:13px !important;
    color:var(--ink) !important;
    background:linear-gradient(135deg,#fff 0%,#fff8f9 100%);
    border:1px solid rgba(231,25,50,.34);
    border-radius:18px;
    box-shadow:0 12px 30px rgba(17,24,36,.08);
    overflow:hidden;
    transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease,background .28s ease;
  }
  .services-dropdown__cta::before{
    content:"";
    position:absolute;
    inset-inline-end:-38px;
    top:-48px;
    width:120px;
    height:120px;
    border-radius:50%;
    background:rgba(231,25,50,.07);
    transition:transform .35s ease,background .35s ease;
  }
  .services-dropdown__cta-icon{
    width:56px;
    height:56px;
    border-radius:16px;
    display:grid;
    place-items:center;
    background:var(--primary);
    color:#fff;
    font-size:23px;
    box-shadow:0 10px 22px rgba(231,25,50,.25);
    transition:transform .3s ease,box-shadow .3s ease;
    position:relative;
    z-index:1;
  }
  .services-dropdown__cta-content{
    display:flex;
    flex-direction:column;
    gap:5px;
    position:relative;
    z-index:1;
  }
  .services-dropdown__cta-content strong{
    font-size:16px !important;
    line-height:1.35;
    color:var(--ink) !important;
  }
  .services-dropdown__cta-content small{
    font-size:11.5px;
    line-height:1.6;
    color:var(--muted);
    font-weight:500;
  }
  .services-dropdown__cta-arrow{
    width:36px;
    height:36px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#fff;
    color:var(--primary);
    border:1px solid rgba(231,25,50,.2);
    box-shadow:0 7px 18px rgba(17,24,36,.08);
    transition:transform .3s ease,background .3s ease,color .3s ease;
    position:relative;
    z-index:1;
  }
  .services-dropdown__cta:hover,
  .services-dropdown__cta:focus-visible{
    transform:translateY(-3px);
    border-color:var(--primary);
    background:#fff;
    box-shadow:0 18px 38px rgba(231,25,50,.16),0 0 0 3px rgba(231,25,50,.06);
  }
  .services-dropdown__cta:hover::before,
  .services-dropdown__cta:focus-visible::before{
    transform:scale(1.18);
    background:rgba(231,25,50,.1);
  }
  .services-dropdown__cta:hover .services-dropdown__cta-icon,
  .services-dropdown__cta:focus-visible .services-dropdown__cta-icon{
    transform:translateY(-2px) rotate(-4deg);
    box-shadow:0 14px 28px rgba(231,25,50,.34);
  }
  .services-dropdown__cta:hover .services-dropdown__cta-arrow,
  .services-dropdown__cta:focus-visible .services-dropdown__cta-arrow{
    transform:translateX(-5px);
    background:var(--primary);
    color:#fff;
  }
}

@media (max-width: 991.98px){
  .services-dropdown__cta{
    display:flex !important;
    align-items:center;
    gap:10px !important;
  }
  .services-dropdown__cta-icon,
  .services-dropdown__cta-arrow{display:none;}
  .services-dropdown__cta-content{display:flex;flex-direction:column;}
  .services-dropdown__cta-content small{display:none;}
}


/* ===== Step 38: topbar contact icon before text ===== */
.topbar__contact > a,
.topbar__contact > span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  direction:ltr;
  white-space:nowrap;
}
.topbar__contact > a i,
.topbar__contact > span i{
  order:0;
  margin:0 !important;
  flex:0 0 auto;
}
.topbar__contact > a span,
.topbar__contact > span{
  order:1;
}


/* STEP54: Refined global Ask Googan pre-footer CTA */
.ask-googan-strip{
  position:relative;
  overflow:hidden;
  padding:82px 0;
  color:#fff;
  background:#ef1732;
  border-top:1px solid rgba(255,255,255,.18);
}
.ask-googan-strip::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 25%,rgba(255,255,255,.08),transparent 27%),
    linear-gradient(115deg,rgba(143,0,18,.08),transparent 46%);
}
.ask-googan-strip__inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:72px;
}
.ask-googan-strip__content{
  max-width:1020px;
  margin-inline-start:auto;
  text-align:right;
}
.ask-googan-strip__eyebrow{
  display:block;
  margin-bottom:24px;
  color:#ffd5db;
  font-size:20px;
  line-height:1;
  font-weight:800;
}
.ask-googan-strip h2{
  margin:0;
  color:#fff;
  font-size:clamp(34px,3.15vw,58px);
  font-weight:900;
  line-height:1.45;
  letter-spacing:0;
  text-wrap:balance;
}
.ask-googan-strip__button{
  min-width:205px;
  min-height:74px;
  padding:18px 30px;
  border:2px solid #fff;
  border-radius:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#111824;
  background:#fff;
  font-size:20px;
  font-weight:900;
  line-height:1.35;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 14px 34px rgba(111,0,14,.18);
  transition:transform .3s ease,box-shadow .3s ease,background-color .3s ease,color .3s ease;
}
.ask-googan-strip__button:hover,
.ask-googan-strip__button:focus-visible{
  transform:translateY(-5px);
  color:#e71932;
  background:#fff;
  box-shadow:0 22px 44px rgba(111,0,14,.3),0 0 0 8px rgba(255,255,255,.12);
  outline:none;
}
@media(max-width:991px){
  .ask-googan-strip{padding:66px 0}
  .ask-googan-strip__inner{grid-template-columns:1fr;gap:34px;text-align:center}
  .ask-googan-strip__content{margin-inline:auto;text-align:center}
  .ask-googan-strip__eyebrow{margin-bottom:18px;font-size:18px}
  .ask-googan-strip h2{font-size:clamp(30px,6vw,44px);line-height:1.5}
  .ask-googan-strip__button{justify-self:center;min-width:210px;min-height:66px}
}
@media(max-width:575px){
  .ask-googan-strip{padding:52px 0}
  .ask-googan-strip__inner{gap:28px;padding-inline:22px}
  .ask-googan-strip__eyebrow{font-size:16px}
  .ask-googan-strip h2{font-size:28px;line-height:1.55}
  .ask-googan-strip h2 br{display:none}
  .ask-googan-strip__button{width:100%;max-width:280px;min-height:60px;border-radius:16px;font-size:18px}
}
@media(prefers-reduced-motion:reduce){
  .ask-googan-strip__button{transition:none}
}

/* Step 55: Contact page CTA — restore and refine visible actions */
.contact-page .contact-cta{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:72px 0;
  background:linear-gradient(115deg,#d90f29 0%,#e71932 48%,#f01c38 100%);
}
.contact-page .contact-cta::before,
.contact-page .contact-cta::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  z-index:-1;
}
.contact-page .contact-cta::before{
  width:340px;
  height:340px;
  right:-145px;
  top:-190px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 0 0 45px rgba(255,255,255,.035),0 0 0 90px rgba(255,255,255,.025);
}
.contact-page .contact-cta::after{
  width:290px;
  height:290px;
  left:-130px;
  bottom:-210px;
  background:rgba(17,24,36,.11);
}
.contact-page .contact-cta__inner{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(360px,.65fr);
  align-items:center;
  gap:64px;
}
.contact-page .contact-cta__content{
  max-width:900px;
}
.contact-page .contact-cta__eyebrow{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  margin-bottom:10px;
  color:#ffe2e6;
  font-size:17px;
  font-weight:800;
}
.contact-page .contact-cta h2{
  max-width:900px;
  margin:0 0 16px;
  color:#fff;
  font-size:clamp(35px,4vw,58px);
  line-height:1.28;
  font-weight:900;
  text-wrap:balance;
}
.contact-page .contact-cta p{
  max-width:760px;
  margin:0;
  color:#ffe7ea;
  font-size:18px;
  line-height:1.9;
}
.contact-page .contact-cta__actions{
  display:grid;
  gap:14px;
  width:100%;
  max-width:390px;
  justify-self:start;
}
.contact-page .contact-cta__quote,
.contact-page .contact-cta__phone{
  box-sizing:border-box;
  width:100%;
  min-height:68px;
  border-radius:17px;
  text-decoration:none;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease,background .3s ease,color .3s ease;
}
.contact-page .contact-cta__quote{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:17px 26px;
  border:1px solid #fff;
  background:#fff;
  color:#111824;
  font-size:18px;
  font-weight:900;
  box-shadow:0 16px 36px rgba(72,3,15,.18);
}
.contact-page .contact-cta__quote:hover,
.contact-page .contact-cta__quote:focus-visible{
  transform:translateY(-4px);
  background:#111824;
  border-color:#111824;
  color:#fff;
  box-shadow:0 22px 45px rgba(17,24,36,.28);
}
.contact-page .contact-cta__phone{
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.32);
  background:rgba(255,255,255,.1);
  color:#fff;
  backdrop-filter:blur(10px);
}
.contact-page .contact-cta__phone:hover,
.contact-page .contact-cta__phone:focus-visible{
  transform:translateY(-4px);
  background:rgba(17,24,36,.18);
  border-color:rgba(255,255,255,.75);
  box-shadow:0 20px 42px rgba(72,3,15,.18);
}
.contact-page .contact-cta__phone-icon{
  position:relative;
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  flex:0 0 48px;
  border-radius:50%;
  background:#fff;
  color:#e71932;
  box-shadow:0 0 0 0 rgba(255,255,255,.45);
  animation:contactCtaPhonePulse 2.6s ease-out infinite;
}
.contact-page .contact-cta__phone-copy{
  display:flex;
  flex-direction:column;
  gap:3px;
  text-align:right;
}
.contact-page .contact-cta__phone-copy small{
  color:#ffe2e6;
  font-size:13px;
  font-weight:700;
}
.contact-page .contact-cta__phone-copy strong{
  color:#fff;
  font-size:17px;
  font-weight:900;
  letter-spacing:.15px;
}
@keyframes contactCtaPhonePulse{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.42)}
  70%{box-shadow:0 0 0 14px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}
@media(max-width:980px){
  .contact-page .contact-cta__inner{
    grid-template-columns:1fr;
    gap:34px;
  }
  .contact-page .contact-cta__actions{
    max-width:520px;
    justify-self:stretch;
  }
}
@media(max-width:600px){
  .contact-page .contact-cta{padding:54px 0}
  .contact-page .contact-cta__inner{gap:28px;text-align:center}
  .contact-page .contact-cta__eyebrow{justify-content:center}
  .contact-page .contact-cta h2{font-size:34px;line-height:1.35}
  .contact-page .contact-cta p{font-size:16px}
  .contact-page .contact-cta__actions{max-width:none}
  .contact-page .contact-cta__phone{justify-content:center}
  .contact-page .contact-cta__phone-copy{text-align:right}
}
@media(prefers-reduced-motion:reduce){
  .contact-page .contact-cta__phone-icon{animation:none}
  .contact-page .contact-cta__quote,
  .contact-page .contact-cta__phone{transition:none}
}


/* Mobile-only Ask Googan menu item */
.mobile-only-ask-googan{display:none;}
@media (max-width: 991px){
  .nav-links .mobile-only-ask-googan{display:block;}
}

/* Ensure Ask Googan appears in the mobile menu only */
@media (min-width: 992px){
  .nav-links > li.mobile-only-ask-googan{
    display:none !important;
  }
}
@media (max-width: 991px){
  .nav-links > li.mobile-only-ask-googan{
    display:list-item !important;
  }
}


/* STEP68 GLOBAL DESKTOP NAVBAR AND FOOTER CONTACT */
@media (min-width:992px){
  .global-topbar-phones{display:inline-flex;align-items:center;gap:10px;direction:ltr;white-space:nowrap}
  .global-topbar-phones i{order:0;color:var(--primary);margin-inline-end:2px}
  .global-topbar-phones a{display:inline-flex;align-items:center;color:inherit;direction:ltr;unicode-bidi:isolate;transition:color .25s ease,transform .25s ease}
  .global-topbar-phones a+a{padding-left:10px;border-left:1px solid rgba(255,255,255,.22)}
  .global-topbar-phones a:hover,.topbar-location-link:hover{color:#fff;transform:translateY(-1px)}
  .topbar-location-link{display:inline-flex;align-items:center;gap:8px;color:inherit;transition:color .25s ease,transform .25s ease}
  .footer-contact.home-footer-contact{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
  .footer-contact.home-footer-contact a{display:flex;align-items:center;gap:10px;width:fit-content;color:inherit;transition:color .25s ease,transform .25s ease}
  .footer-contact.home-footer-contact a:hover{color:var(--primary);transform:translateX(-3px)}
  .footer-contact.home-footer-contact a span[dir="ltr"]{direction:ltr;unicode-bidi:isolate}
}

/* === Mobile step97: interactive feedback for main navigation items === */
@media (max-width: 767px){
  .nav-panel .nav-links > li{
    position:relative;
    overflow:hidden;
    border-radius:10px;
    transition:background-color .22s ease, transform .22s ease, box-shadow .22s ease;
  }

  .nav-panel .nav-links > li > a,
  .nav-panel .nav-links > li > .nav-dropdown-toggle{
    position:relative;
    z-index:1;
    border-bottom:1px solid var(--line);
    transition:color .22s ease, padding-right .22s ease, background-color .22s ease;
  }

  .nav-panel .nav-links > li::before{
    content:"";
    position:absolute;
    top:7px;
    bottom:7px;
    right:0;
    width:3px;
    border-radius:999px;
    background:var(--primary);
    transform:scaleY(0);
    opacity:0;
    transition:transform .22s ease, opacity .22s ease;
  }

  .nav-panel .nav-links > li:hover,
  .nav-panel .nav-links > li:focus-within,
  .nav-panel .nav-links > li:active{
    background:rgba(239, 24, 55, .075);
    transform:translateX(-3px);
    box-shadow:0 7px 18px rgba(239, 24, 55, .07);
  }

  .nav-panel .nav-links > li:hover::before,
  .nav-panel .nav-links > li:focus-within::before,
  .nav-panel .nav-links > li:active::before{
    transform:scaleY(1);
    opacity:1;
  }

  .nav-panel .nav-links > li:hover > a,
  .nav-panel .nav-links > li:focus-within > a,
  .nav-panel .nav-links > li:active > a,
  .nav-panel .nav-links > li:hover > .nav-dropdown-toggle,
  .nav-panel .nav-links > li:focus-within > .nav-dropdown-toggle,
  .nav-panel .nav-links > li:active > .nav-dropdown-toggle{
    color:var(--primary) !important;
    padding-right:13px !important;
  }

  .nav-panel .nav-dropdown-toggle i{
    transition:transform .25s ease, color .22s ease;
  }
  .nav-panel .nav-item--dropdown:hover > .nav-dropdown-toggle i,
  .nav-panel .nav-item--dropdown:focus-within > .nav-dropdown-toggle i,
  .nav-panel .nav-item--dropdown.is-open > .nav-dropdown-toggle i{
    color:var(--primary);
    transform:translateY(1px) rotate(180deg);
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce){
  .nav-panel .nav-links > li,
  .nav-panel .nav-links > li > a,
  .nav-panel .nav-links > li > .nav-dropdown-toggle,
  .nav-panel .nav-links > li::before,
  .nav-panel .nav-dropdown-toggle i{
    transition:none !important;
  }
}

/* === STEP98: fix mobile services submenu after interactive menu effects === */
@media (max-width: 767px){
  /* The services item must not clip its expanded submenu. */
  .nav-panel .nav-links > li.nav-item--dropdown,
  .nav-panel .nav-links > li.nav-item--dropdown.is-open{
    overflow:visible !important;
    transform:none !important;
  }

  /* Restore the services menu as an inline mobile accordion. */
  .nav-panel .nav-item--dropdown .services-dropdown,
  .nav-panel .nav-item--dropdown.is-open .services-dropdown{
    position:static !important;
    inset:auto !important;
    top:auto !important;
    right:auto !important;
    left:auto !important;
    bottom:auto !important;
    width:100% !important;
    height:auto !important;
    max-width:none !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 0 14px 14px !important;
    box-shadow:none !important;
    background:#fffafb !important;
    transform:none !important;
    z-index:auto !important;
    overflow:hidden !important;
    opacity:1 !important;
    visibility:visible !important;
    transition:max-height .35s ease,padding .35s ease,opacity .25s ease !important;
  }

  .nav-panel .nav-item--dropdown .services-dropdown{
    max-height:0 !important;
    padding:0 10px !important;
  }

  .nav-panel .nav-item--dropdown.is-open .services-dropdown{
    max-height:1200px !important;
    padding:14px 10px 18px !important;
    overflow-y:auto !important;
  }

  .nav-panel .nav-item--dropdown.is-open .services-dropdown__header{
    margin:0 0 12px !important;
    padding:0 0 12px !important;
  }

  .nav-panel .nav-item--dropdown.is-open .services-dropdown__grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  .nav-panel .nav-item--dropdown.is-open .dropdown-service{
    min-height:64px !important;
    padding:10px !important;
    border:1px solid rgba(237,27,47,.08) !important;
    border-radius:12px !important;
  }
}

/* Step 99 — About certificate lightbox mobile controls */
@media (max-width: 767px) {
  .certificate-lightbox__dialog {
    padding: 64px 16px 22px;
    overflow: visible;
  }

  .certificate-lightbox__close {
    top: 14px;
    left: 14px;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.16);
    background: #202630;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    font-size: 21px;
    line-height: 1;
  }

  .certificate-lightbox__close i,
  .certificate-lightbox__nav i {
    display: block;
    line-height: 1;
  }

  .certificate-lightbox__nav {
    top: 50%;
    bottom: auto;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    border: 2px solid rgba(255,255,255,.9);
    background: rgba(14,20,29,.92);
    color: #fff;
    box-shadow: 0 8px 26px rgba(0,0,0,.5), 0 0 0 5px rgba(231,25,50,.14);
    font-size: 18px;
    opacity: 1;
  }

  .certificate-lightbox__nav--prev { right: -7px; }
  .certificate-lightbox__nav--next { left: -7px; }

  .certificate-lightbox__nav:active,
  .certificate-lightbox__close:active {
    transform: translateY(-50%) scale(.92);
    background: #e71932;
  }

  .certificate-lightbox__close:active { transform: scale(.92); }
}



/* ===== Mobile search overlay fix ===== */
.search-is-open{
  overflow:hidden !important;
}

.search-modal{
  align-content:center;
  justify-items:center;
}

.search-modal form{
  position:relative;
  z-index:2;
}

.search-close{
  width:54px;
  height:54px;
  border-radius:50%;
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:5;
  background:#e71932 !important;
  color:#fff !important;
  box-shadow:0 12px 30px rgba(231,25,50,.35);
  transition:transform .25s ease, background-color .25s ease, box-shadow .25s ease;
}

.search-close:hover,
.search-close:focus-visible{
  transform:rotate(90deg) scale(1.06);
  background:#c81029 !important;
  box-shadow:0 16px 36px rgba(231,25,50,.45);
  outline:none;
}

.search-close i{
  font-size:27px;
  line-height:1;
}

.search-results{
  width:min(700px,100%);
  max-height:320px;
  overflow:auto;
  margin-top:22px;
  display:grid;
  gap:10px;
  position:relative;
  z-index:2;
}

.search-results__hint,
.search-results__empty{
  margin:0;
  padding:16px 18px;
  border-radius:14px;
  background:rgba(255,255,255,.08);
  color:#d6dbe3;
  text-align:right;
  line-height:1.7;
}

.search-result-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:15px 18px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-weight:800;
  transition:transform .25s ease, background-color .25s ease, border-color .25s ease;
}

.search-result-card:hover,
.search-result-card:focus-visible{
  transform:translateY(-3px);
  background:rgba(231,25,50,.2);
  border-color:#e71932;
  outline:none;
}

.search-result-card i{
  color:#ff5368;
}

@media (max-width:900px){
  .search-modal{
    padding:100px 18px 30px;
    place-items:start center;
    overflow-y:auto;
  }

  .search-modal form{
    width:100%;
    margin-top:105px;
    border-bottom:2px solid rgba(255,255,255,.85);
  }

  .search-modal input{
    min-width:0;
    font-size:22px;
    padding:14px 10px;
    text-align:right;
  }

  .search-modal form button{
    width:50px;
    flex:0 0 50px;
    display:grid;
    place-items:center;
  }

  .search-close{
    position:fixed !important;
    top:118px !important;
    left:20px !important;
    width:50px;
    height:50px;
  }

  .search-results{
    width:100%;
    max-height:none;
    padding-bottom:40px;
  }
}


/* Step 101: mobile search usability */
@media (max-width:900px){
  .search-modal{padding-top:118px!important;}
  .search-close{
    top:118px!important;
    left:20px!important;
    width:48px!important;
    height:48px!important;
    border:2px solid rgba(255,255,255,.22)!important;
  }
  .search-modal form{margin-top:78px!important;}
  .search-results__empty,.search-results__hint{font-size:16px!important;}
  .search-result-card{min-height:58px;font-size:17px;}
}






/* ===== Pricing page corrections: mobile badge/table + desktop scroll ===== */

/* Never lock page scroll on pricing page */
html,
body{
  overflow-y:auto;
}

@media (min-width: 992px){
  body{
    overflow:auto !important;
    height:auto !important;
    min-height:100% !important;
  }

  .pricing-hero,
  .pricing-page,
  main{
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
  }
}

@media (max-width: 767px){

  /* Remove any accidental clipping around pricing cards */
  .pricing-grid,
  .pricing-cards,
  .packages-grid,
  .price-grid,
  .pricing-plans{
    overflow:visible !important;
  }

  .pricing-card,
  .price-card,
  .package-card,
  .pricing-plan{
    position:relative !important;
    overflow:visible !important;
  }

  /* Only the actual "most popular" badge */
  .most-popular-badge,
  .popular-badge,
  .pricing-popular-badge,
  .package-badge,
  .pricing-card .badge,
  .price-card .badge{
    position:absolute !important;
    top:12px !important;
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    min-width:142px !important;
    max-width:calc(100% - 32px) !important;
    height:auto !important;
    padding:11px 20px !important;
    margin:0 !important;
    white-space:nowrap !important;
    border-radius:999px !important;
    z-index:5 !important;
    overflow:visible !important;
    line-height:1.2 !important;
    box-shadow:0 12px 24px rgba(231,25,50,.2) !important;
  }

  /* Give the featured card safe space for its badge */
  .pricing-card:has(.most-popular-badge),
  .pricing-card:has(.popular-badge),
  .pricing-card:has(.badge),
  .price-card:has(.most-popular-badge),
  .price-card:has(.popular-badge),
  .price-card:has(.badge),
  .package-card:has(.most-popular-badge),
  .package-card:has(.popular-badge),
  .package-card:has(.badge){
    padding-top:76px !important;
    margin-top:24px !important;
  }

  /* Do not cover quote/upload buttons or card content */
  .pricing-card::before,
  .pricing-card::after,
  .price-card::before,
  .price-card::after,
  .package-card::before,
  .package-card::after{
    pointer-events:none;
  }

  /* Comparison table: keep all columns reachable */
  .pricing-comparison,
  .comparison-section,
  .comparison-table-wrap,
  .pricing-table-wrap,
  .table-responsive{
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    -webkit-overflow-scrolling:touch;
  }

  .pricing-comparison table,
  .comparison-section table,
  .comparison-table-wrap table,
  .pricing-table-wrap table,
  .table-responsive table{
    min-width:760px !important;
    width:760px !important;
    table-layout:fixed !important;
  }

  .pricing-comparison th,
  .pricing-comparison td,
  .comparison-section th,
  .comparison-section td,
  .comparison-table-wrap th,
  .comparison-table-wrap td,
  .pricing-table-wrap th,
  .pricing-table-wrap td,
  .table-responsive th,
  .table-responsive td{
    padding:18px 14px !important;
    white-space:normal !important;
    text-align:center !important;
    vertical-align:middle !important;
  }

  .pricing-comparison a[href*="wa.me"],
  .comparison-section a[href*="wa.me"],
  .comparison-table-wrap a[href*="wa.me"],
  .pricing-table-wrap a[href*="wa.me"],
  .table-responsive a[href*="wa.me"]{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    min-width:124px !important;
    padding:11px 16px !important;
    border-radius:999px !important;
    background:#25D366 !important;
    color:#fff !important;
    font-weight:800 !important;
    white-space:nowrap !important;
    text-decoration:none !important;
    box-shadow:0 10px 22px rgba(37,211,102,.22) !important;
  }
}



/* ===== Global navbar search & quote clickability fix ===== */

.navbar a[href="quote.html"],
.navbar .search-open,
.navbar .search-toggle,
.navbar .navbar__search{
  position:relative;
  z-index:55;
  pointer-events:auto !important;
  cursor:pointer !important;
}

.search-modal{
  position:fixed !important;
  inset:0 !important;
  z-index:99999 !important;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease;
}

.search-modal.open{
  pointer-events:auto !important;
  opacity:1 !important;
  visibility:visible !important;
  display:grid !important;
}

@media (min-width: 901px){
  .search-modal{
    place-items:center !important;
    padding:50px !important;
  }

  .search-modal > *{
    width:min(760px, 100%) !important;
  }

  .search-close{
    position:fixed !important;
    top:34px !important;
    left:34px !important;
  }

  .search-results{
    width:min(700px, 100%) !important;
  }
}



/* ===== Desktop search close button correction ===== */
@media (min-width: 901px){
  .search-modal{
    place-items:center !important;
    padding:50px !important;
  }

  .search-modal form{
    width:min(760px, 100%) !important;
  }

  .search-modal .search-results{
    width:min(700px, 100%) !important;
  }

  .search-modal .search-close{
    position:fixed !important;
    top:34px !important;
    left:34px !important;
    right:auto !important;
    bottom:auto !important;
    width:56px !important;
    min-width:56px !important;
    max-width:56px !important;
    height:56px !important;
    min-height:56px !important;
    max-height:56px !important;
    padding:0 !important;
    margin:0 !important;
    border-radius:50% !important;
    display:grid !important;
    place-items:center !important;
    background:#e71932 !important;
    color:#fff !important;
    border:2px solid rgba(255,255,255,.18) !important;
    box-shadow:0 14px 34px rgba(231,25,50,.36) !important;
    z-index:100002 !important;
    flex:none !important;
    transform:none !important;
  }

  .search-modal .search-close:hover,
  .search-modal .search-close:focus-visible{
    transform:rotate(90deg) scale(1.06) !important;
    background:#c81029 !important;
    outline:none !important;
  }

  .search-modal .search-close i{
    font-size:27px !important;
    line-height:1 !important;
  }
}



/* ===== Step 109 mobile polish batch ===== */
@media (max-width: 900px){

  /* 1. Clients: quote link must look and behave as a button */
  .clients-mobile-quote-btn,
  .clients-cta a[href="quote.html"],
  .clients-hero a[href="quote.html"]{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:56px !important;
    padding:14px 24px !important;
    border-radius:14px !important;
    background:#e71932 !important;
    color:#fff !important;
    font-weight:800 !important;
    text-decoration:none !important;
    box-shadow:0 12px 28px rgba(231,25,50,.25) !important;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease !important;
  }
  .clients-mobile-quote-btn:active,
  .clients-cta a[href="quote.html"]:active,
  .clients-hero a[href="quote.html"]:active{
    transform:scale(.97) !important;
  }

  /* 2. Pricing: stop pricing block from overlapping "كيف نحدد السعر؟" */
  .pricing-plans,
  .pricing-packages,
  .pricing-grid,
  .pricing-cards{
    margin-bottom:40px !important;
    overflow:visible !important;
  }
  .pricing-how,
  .pricing-factors,
  .pricing-how-section,
  .pricing-factors-section{
    position:relative !important;
    z-index:1 !important;
    clear:both !important;
    padding-top:36px !important;
    margin-top:0 !important;
  }
  .pricing-how-title{
    display:inline !important;
    position:relative !important;
    z-index:2 !important;
  }

  /* 3. Pricing comparison: compact, swipeable and WhatsApp visible */
  .pricing-comparison,
  .comparison-section,
  .comparison-table-wrap,
  .pricing-table-wrap,
  .table-responsive{
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    -webkit-overflow-scrolling:touch !important;
    padding-bottom:12px !important;
  }
  .pricing-comparison table,
  .comparison-section table,
  .comparison-table-wrap table,
  .pricing-table-wrap table,
  .table-responsive table{
    width:720px !important;
    min-width:720px !important;
    table-layout:fixed !important;
  }
  .pricing-comparison th,
  .pricing-comparison td,
  .comparison-section th,
  .comparison-section td,
  .comparison-table-wrap th,
  .comparison-table-wrap td,
  .pricing-table-wrap th,
  .pricing-table-wrap td,
  .table-responsive th,
  .table-responsive td{
    padding:16px 10px !important;
    font-size:14px !important;
    text-align:center !important;
    vertical-align:middle !important;
  }
  .pricing-comparison a[href*="wa.me"],
  .comparison-section a[href*="wa.me"],
  .comparison-table-wrap a[href*="wa.me"],
  .pricing-table-wrap a[href*="wa.me"],
  .table-responsive a[href*="wa.me"]{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    min-width:112px !important;
    padding:10px 14px !important;
    border-radius:999px !important;
    background:#25D366 !important;
    color:#fff !important;
    font-weight:800 !important;
    text-decoration:none !important;
    box-shadow:0 8px 20px rgba(37,211,102,.22) !important;
    white-space:nowrap !important;
  }

  /* 4. Work details: hide only hero artwork on mobile */
  .work-details-hero__visual,
  .work-detail-hero__visual,
  .work-hero__visual,
  .work-details .hero-visual{
    display:none !important;
  }
  .work-details-hero__inner,
  .work-detail-hero__inner{
    grid-template-columns:1fr !important;
    gap:0 !important;
  }

  /* Similar project block */
  .similar-project,
  .work-similar,
  .similar-work,
  .work-details-cta{
    margin:28px 16px !important;
    padding:30px 22px !important;
    border-radius:22px !important;
    background:linear-gradient(135deg,#fff 0%,#fff5f6 100%) !important;
    border:1px solid #f1d7dc !important;
    box-shadow:0 16px 36px rgba(17,24,39,.08) !important;
    text-align:center !important;
  }
  .similar-project a,
  .work-similar a,
  .similar-work a,
  .work-details-cta a{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:52px !important;
    padding:13px 24px !important;
    border-radius:13px !important;
    background:#e71932 !important;
    color:#fff !important;
    font-weight:800 !important;
    text-decoration:none !important;
    box-shadow:0 10px 24px rgba(231,25,50,.22) !important;
  }

  /* 5. Blog pagination */
  .blog-mobile-pagination,
  .pagination,
  .blog-pagination,
  .pager{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    width:100% !important;
    padding:20px 12px !important;
    margin:10px auto 28px !important;
  }
  .blog-mobile-pagination a,
  .blog-mobile-pagination button,
  .pagination a,
  .pagination button,
  .blog-pagination a,
  .blog-pagination button,
  .pager a,
  .pager button{
    min-width:44px !important;
    height:44px !important;
    padding:0 12px !important;
    border-radius:10px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:15px !important;
    white-space:nowrap !important;
  }

  /* 6. Contact phone card: align like email card */
  .contact-phone-card,
  .contact-cards a[href^="tel:"],
  .contact-info a[href^="tel:"]{
    text-align:right !important;
    direction:rtl !important;
  }
  .contact-phone-card *,
  .contact-cards a[href^="tel:"] *,
  .contact-info a[href^="tel:"] *{
    text-align:right !important;
  }
  .contact-phone-card .number,
  .contact-phone-card strong,
  .contact-cards a[href^="tel:"] strong,
  .contact-info a[href^="tel:"] strong{
    display:block !important;
    margin-top:10px !important;
    direction:ltr !important;
    text-align:right !important;
  }
}






/* ===== Step 112 desktop fixed topbar + navbar ===== */
@media (min-width: 901px){
  :root{
    --desktop-topbar-height: 46px;
    --desktop-navbar-height: 104px;
    --desktop-header-stack: calc(var(--desktop-topbar-height) + var(--desktop-navbar-height));
  }

  .topbar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    height:var(--desktop-topbar-height) !important;
    z-index:10000 !important;
    transform:none !important;
  }

  .topbar__inner{
    height:100% !important;
  }

  .navbar{
    position:fixed !important;
    top:var(--desktop-topbar-height) !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    min-height:var(--desktop-navbar-height) !important;
    z-index:9999 !important;
    transform:none !important;
    background:#fff !important;
  }

  .navbar__inner{
    min-height:var(--desktop-navbar-height) !important;
  }

  /* Reserve the exact fixed-header space so page content starts below it */
  body{
    padding-top:var(--desktop-header-stack) !important;
  }

  /* Keep interaction working */
  .topbar,
  .topbar *,
  .navbar,
  .navbar *{
    pointer-events:auto;
  }

  .navbar a[href="quote.html"],
  .navbar .search-open,
  .navbar .search-toggle,
  .navbar .navbar__search{
    position:relative !important;
    z-index:2 !important;
    pointer-events:auto !important;
    cursor:pointer !important;
  }

  /* Search overlay must remain above fixed header */
  .search-modal{
    z-index:20000 !important;
  }
}



/* ===== Step 113 Tablet / iPad responsive pass ===== */
/* Treat tablets and iPads like the mobile experience while keeping large desktop unchanged */
@media (min-width: 701px) and (max-width: 1180px){

  /* Header / navigation */
  .topbar{
    display:none !important;
  }

  body{
    padding-top:0 !important;
  }

  .navbar{
    position:sticky !important;
    top:0 !important;
    min-height:auto !important;
    z-index:9990 !important;
    background:#fff !important;
  }

  .navbar__inner{
    min-height:92px !important;
    padding:12px 20px !important;
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
  }

  .navbar__links,
  .navbar__menu,
  .desktop-nav{
    display:none !important;
  }

  .nav-toggle,
  .navbar__toggle,
  .mobile-menu-toggle{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 58px !important;
    width:58px !important;
    height:58px !important;
    border-radius:14px !important;
  }

  .navbar .brand{
    margin-inline-start:auto !important;
  }

  .navbar .brand img{
    max-height:64px !important;
    width:auto !important;
  }

  .navbar .btn--primary,
  .navbar a[href="quote.html"]{
    min-height:54px !important;
    padding:12px 22px !important;
    font-size:15px !important;
  }

  .navbar .search-open,
  .navbar .search-toggle,
  .navbar .navbar__search,
  .navbar .lang-switch{
    width:54px !important;
    height:54px !important;
    min-width:54px !important;
  }

  /* Mobile drawer on tablet */
  .mobile-menu,
  .mobile-nav,
  .navbar-mobile,
  .offcanvas-menu{
    width:min(520px, 100vw) !important;
    max-width:100% !important;
  }

  /* General sections */
  .container{
    width:min(100% - 36px, 980px) !important;
  }

  section,
  .section-padding{
    scroll-margin-top:100px !important;
  }

  /* Hero layouts become single-column */
  .hero__inner,
  .services-hero__inner,
  .pricing-hero__inner,
  .works-hero__inner,
  .clients-hero__inner,
  .contact-hero__inner,
  .service-view-hero__inner,
  .work-view-hero__inner,
  .knowledge-hero__inner,
  .about-internal-grid{
    grid-template-columns:1fr !important;
    gap:24px !important;
  }

  .hero__content,
  .services-hero__content,
  .pricing-hero__content,
  .works-hero__content,
  .clients-hero__content,
  .contact-hero__content,
  .service-view-hero__content,
  .work-view-hero__content,
  .knowledge-hero__content,
  .about-internal-copy{
    max-width:780px !important;
    width:100% !important;
    margin-inline:auto !important;
  }

  /* The recent mobile-only visual removals should apply to tablets too */
  .about-internal-visual,
  .services-hero__visual,
  .service-view-hero__visual,
  .pricing-hero__visual,
  .works-hero__visual,
  .clients-hero__visual,
  .contact-hero__visual,
  .work-view-hero__visual{
    display:none !important;
  }

  /* Typography scale */
  h1,
  .hero h1,
  .services-hero h1,
  .pricing-hero h1,
  .works-hero h1,
  .clients-hero h1,
  .contact-hero h1{
    font-size:clamp(38px, 6vw, 58px) !important;
    line-height:1.2 !important;
  }

  h2{
    font-size:clamp(30px, 4.6vw, 44px) !important;
  }

  /* Cards/grids */
  .services-grid,
  .pricing-grid,
  .works-grid,
  .clients-grid,
  .blog-grid,
  .articles-grid,
  .knowledge-grid,
  .contact-channels__grid,
  .footer-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:20px !important;
  }

  /* Pricing comparison behaves like the corrected mobile version */
  .pricing-table-wrap{
    overflow:visible !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .pricing-table{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
  }

  .pricing-table thead{
    display:none !important;
  }

  .pricing-table tbody{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:16px !important;
  }

  .pricing-table tbody tr{
    display:grid !important;
    grid-template-columns:1fr !important;
    background:#fff !important;
    border:1px solid #e5e9ef !important;
    border-radius:18px !important;
    overflow:hidden !important;
  }

  .pricing-table tbody td{
    display:flex !important;
    justify-content:space-between !important;
    gap:12px !important;
    padding:14px 16px !important;
    border-bottom:1px solid #edf0f4 !important;
  }

  /* Blog pagination */
  .blog-pagination{
    justify-content:center !important;
    flex-wrap:wrap !important;
    gap:8px !important;
  }

  /* Contact cards */
  .contact-channel{
    text-align:right !important;
  }

  /* CTA blocks */
  .cta-section__inner,
  .clients-cta__inner,
  .ask-googan-strip__inner{
    grid-template-columns:1fr !important;
    text-align:center !important;
    gap:22px !important;
  }

  /* Footer becomes compact but not one-column */
  .footer-grid{
    align-items:start !important;
  }
}

/* Portrait iPad / smaller tablets: one-column cards, very close to mobile */
@media (min-width: 701px) and (max-width: 900px){
  .services-grid,
  .pricing-grid,
  .works-grid,
  .clients-grid,
  .blog-grid,
  .articles-grid,
  .knowledge-grid,
  .contact-channels__grid,
  .pricing-table tbody,
  .footer-grid{
    grid-template-columns:1fr !important;
  }

  .navbar__inner{
    padding:10px 14px !important;
    gap:9px !important;
  }

  .navbar .btn--primary,
  .navbar a[href="quote.html"]{
    padding-inline:16px !important;
  }
}



/* ===== Step 114 iPad / tablet navbar exact mobile-style fix ===== */
@media (min-width: 701px) and (max-width: 1180px){

  .topbar{
    display:none !important;
  }

  body{
    padding-top:0 !important;
  }

  .navbar,
  .navbar.is-sticky{
    position:sticky !important;
    top:0 !important;
    left:auto !important;
    right:auto !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    background:#fff !important;
    z-index:9990 !important;
    box-shadow:0 8px 24px rgba(9,15,25,.06) !important;
  }

  .container.navbar__inner{
    width:100% !important;
    max-width:none !important;
    min-height:88px !important;
    margin:0 !important;
    padding:10px 18px !important;
    display:grid !important;
    grid-template-columns:58px minmax(0,1fr) 68px !important;
    grid-template-areas:"toggle actions brand" !important;
    align-items:center !important;
    column-gap:12px !important;
    direction:ltr !important;
  }

  /* Logo */
  .navbar__inner > .brand{
    grid-area:brand !important;
    justify-self:end !important;
    align-self:center !important;
    width:68px !important;
    min-width:68px !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    direction:rtl !important;
  }

  .navbar__inner > .brand img{
    display:block !important;
    width:62px !important;
    height:68px !important;
    max-height:68px !important;
    object-fit:contain !important;
  }

  .navbar__inner > .brand span{
    display:none !important;
  }

  /* Hamburger */
  .navbar__inner > .nav-toggle{
    grid-area:toggle !important;
    position:relative !important;
    inset:auto !important;
    justify-self:start !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    width:58px !important;
    height:58px !important;
    margin:0 !important;
    padding:0 !important;
    border:1px solid #e1e5eb !important;
    border-radius:14px !important;
    background:#fff !important;
  }

  .navbar__inner > .nav-toggle span{
    display:block !important;
    width:28px !important;
    height:3px !important;
    margin:3px 0 !important;
    border-radius:999px !important;
    background:#111824 !important;
    transform-origin:center !important;
  }

  /* Quote + language + search */
  .navbar__inner > .mobile-nav-actions{
    grid-area:actions !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    flex-direction:row !important;
    gap:9px !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    direction:rtl !important;
  }

  .mobile-nav-actions .btn--sm,
  .mobile-nav-actions a[href="quote.html"]{
    display:inline-flex !important;
    flex:0 1 180px !important;
    width:auto !important;
    max-width:180px !important;
    min-width:140px !important;
    min-height:54px !important;
    align-items:center !important;
    justify-content:center !important;
    padding:10px 18px !important;
    border-radius:13px !important;
    font-size:14px !important;
    font-weight:900 !important;
    white-space:nowrap !important;
  }

  .mobile-nav-actions .icon-btn{
    display:inline-flex !important;
    flex:0 0 54px !important;
    width:54px !important;
    min-width:54px !important;
    height:54px !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
    border-radius:13px !important;
    background:#fff !important;
    border:1px solid #e1e5eb !important;
  }

  .mobile-nav-actions .language-btn{
    flex-basis:68px !important;
    width:68px !important;
    min-width:68px !important;
    gap:5px !important;
  }

  .mobile-nav-actions .language-btn span{
    font-size:11px !important;
  }

  .mobile-nav-actions .icon-btn i{
    font-size:18px !important;
  }

  /* Turn desktop nav panel into the same off-canvas/mobile panel on tablets */
  .navbar__inner > .nav-panel{
    position:fixed !important;
    top:88px !important;
    right:0 !important;
    left:0 !important;
    width:100% !important;
    height:calc(100vh - 88px) !important;
    display:block !important;
    padding:24px 28px 40px !important;
    background:#fff !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    transform:translateX(100%) !important;
    transition:transform .3s ease !important;
    z-index:9989 !important;
  }

  .nav-open .navbar__inner > .nav-panel{
    transform:translateX(0) !important;
  }

  .nav-panel .nav-links{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  .nav-panel .nav-links > li{
    width:100% !important;
  }

  .nav-panel .nav-links > li > a,
  .nav-panel .nav-dropdown-toggle{
    display:flex !important;
    width:100% !important;
    min-height:56px !important;
    align-items:center !important;
    justify-content:space-between !important;
    padding:14px 8px !important;
    border-bottom:1px solid #e7eaf0 !important;
    font-size:16px !important;
    color:#111824 !important;
  }

  .nav-panel .nav-links a::after,
  .nav-panel .nav-dropdown-toggle::after{
    display:none !important;
  }

  .nav-panel .nav-actions{
    display:none !important;
  }

  /* Services dropdown becomes an accordion inside tablet drawer */
  .nav-panel .nav-item--dropdown{
    position:relative !important;
  }

  .nav-panel .services-dropdown{
    position:static !important;
    width:100% !important;
    max-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    opacity:1 !important;
    visibility:visible !important;
    overflow:hidden !important;
    transform:none !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    background:#fafbfc !important;
    transition:max-height .3s ease,padding .3s ease !important;
  }

  .nav-panel .nav-item--dropdown.is-open .services-dropdown{
    max-height:1200px !important;
    padding:14px !important;
  }

  .nav-panel .services-dropdown::before,
  .nav-panel .services-dropdown__header{
    display:none !important;
  }

  .nav-panel .services-dropdown__grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  .nav-panel .dropdown-service{
    min-height:68px !important;
  }
}

/* Portrait / narrower iPads */
@media (min-width: 701px) and (max-width: 820px){
  .container.navbar__inner{
    grid-template-columns:54px minmax(0,1fr) 62px !important;
    padding-inline:12px !important;
    column-gap:8px !important;
  }

  .navbar__inner > .brand{
    width:62px !important;
    min-width:62px !important;
  }

  .navbar__inner > .brand img{
    width:56px !important;
    height:64px !important;
  }

  .navbar__inner > .nav-toggle{
    width:54px !important;
    height:54px !important;
  }

  .mobile-nav-actions{
    gap:6px !important;
  }

  .mobile-nav-actions .btn--sm,
  .mobile-nav-actions a[href="quote.html"]{
    flex-basis:150px !important;
    min-width:125px !important;
    max-width:150px !important;
    min-height:50px !important;
    padding-inline:12px !important;
    font-size:13px !important;
  }

  .mobile-nav-actions .icon-btn{
    flex-basis:50px !important;
    width:50px !important;
    min-width:50px !important;
    height:50px !important;
  }

  .mobile-nav-actions .language-btn{
    flex-basis:62px !important;
    width:62px !important;
    min-width:62px !important;
  }

  .nav-panel .services-dropdown__grid{
    grid-template-columns:1fr !important;
  }
}



/* ===== Step 115 iPad services menu visibility + accordion fix ===== */
@media (min-width: 701px) and (max-width: 1180px){
  .nav-panel .nav-links > li{
    display:block !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
  }

  .nav-panel .nav-links > li.nav-item--dropdown{
    display:block !important;
    position:relative !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
  }

  .nav-panel .nav-dropdown-toggle{
    display:flex !important;
    position:relative !important;
    width:100% !important;
    height:56px !important;
    min-height:56px !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    padding:14px 8px !important;
    margin:0 !important;
    border:0 !important;
    border-bottom:1px solid #e7eaf0 !important;
    border-radius:0 !important;
    background:transparent !important;
    color:#111824 !important;
    opacity:1 !important;
    visibility:visible !important;
    font-family:inherit !important;
    font-size:16px !important;
    font-weight:800 !important;
    line-height:1.2 !important;
    text-align:right !important;
    cursor:pointer !important;
    transform:none !important;
    box-shadow:none !important;
  }

  .nav-panel .nav-dropdown-toggle span{
    display:inline-flex !important;
    align-items:center !important;
    color:#111824 !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  .nav-panel .nav-dropdown-toggle i{
    display:inline-block !important;
    color:#111824 !important;
    font-size:14px !important;
    opacity:1 !important;
    visibility:visible !important;
    transition:transform .25s ease,color .25s ease !important;
  }

  .nav-panel .nav-item--dropdown.is-open > .nav-dropdown-toggle{
    color:#e71932 !important;
    background:#fff3f5 !important;
  }

  .nav-panel .nav-item--dropdown.is-open > .nav-dropdown-toggle span,
  .nav-panel .nav-item--dropdown.is-open > .nav-dropdown-toggle i{
    color:#e71932 !important;
  }

  .nav-panel .nav-item--dropdown.is-open > .nav-dropdown-toggle i{
    transform:rotate(180deg) !important;
  }

  .nav-panel .nav-item--dropdown .services-dropdown{
    display:block !important;
    position:static !important;
    inset:auto !important;
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    max-height:0 !important;
    margin:0 !important;
    padding:0 10px !important;
    border:0 !important;
    border-radius:0 0 14px 14px !important;
    background:#fffafb !important;
    box-shadow:none !important;
    opacity:1 !important;
    visibility:visible !important;
    overflow:hidden !important;
    transform:none !important;
    transition:max-height .35s ease,padding .35s ease !important;
  }

  .nav-panel .nav-item--dropdown.is-open .services-dropdown{
    max-height:1400px !important;
    padding:14px 10px 18px !important;
    overflow-y:auto !important;
  }

  .nav-panel .services-dropdown__header{
    display:none !important;
  }

  .nav-panel .services-dropdown__grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:9px !important;
  }

  .nav-panel .dropdown-service{
    display:flex !important;
    min-height:66px !important;
    align-items:center !important;
    gap:10px !important;
    padding:10px 12px !important;
    border:1px solid rgba(231,25,50,.09) !important;
    border-radius:12px !important;
    background:#fff !important;
    color:#111824 !important;
  }
}

@media (min-width: 701px) and (max-width: 820px){
  .nav-panel .services-dropdown__grid{
    grid-template-columns:1fr !important;
  }
}



/* ===== Step 116 iPad services parent label visibility ===== */
@media (min-width: 701px) and (max-width: 1180px){

  .nav-panel .nav-item--dropdown{
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:56px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  .nav-panel .nav-item--dropdown > .nav-dropdown-toggle,
  .nav-panel .nav-item--dropdown > a,
  .nav-panel .nav-dropdown-toggle{
    display:flex !important;
    width:100% !important;
    min-height:56px !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    padding:14px 8px !important;
    margin:0 !important;
    border-bottom:1px solid #e7eaf0 !important;
    background:#fff !important;
    color:#111824 !important;
    font-size:16px !important;
    font-weight:800 !important;
    line-height:1.4 !important;
    text-align:right !important;
    visibility:visible !important;
    opacity:1 !important;
    overflow:visible !important;
    position:relative !important;
    z-index:3 !important;
  }

  .nav-panel .nav-item--dropdown > .nav-dropdown-toggle span,
  .nav-panel .nav-item--dropdown > a span{
    display:inline !important;
    visibility:visible !important;
    opacity:1 !important;
    color:#111824 !important;
  }

  .nav-panel .nav-item--dropdown > .nav-dropdown-toggle::before{
    content:"خدماتنا" !important;
    display:inline-block !important;
    color:#111824 !important;
    font-size:16px !important;
    font-weight:800 !important;
    order:1 !important;
  }

  .nav-panel .nav-item--dropdown > .nav-dropdown-toggle > *:not(i):not(svg){
    display:none !important;
  }

  .nav-panel .nav-item--dropdown > .nav-dropdown-toggle i,
  .nav-panel .nav-item--dropdown > .nav-dropdown-toggle svg{
    display:block !important;
    margin-inline-start:auto !important;
    order:2 !important;
    transition:transform .25s ease !important;
  }

  .nav-panel .nav-item--dropdown.is-open > .nav-dropdown-toggle i,
  .nav-panel .nav-item--dropdown.is-open > .nav-dropdown-toggle svg{
    transform:rotate(180deg) !important;
  }

  .nav-panel .nav-item--dropdown > .services-dropdown{
    margin-top:0 !important;
  }
}



/* ===== Step 117 mobile/tablet services dropdown cleanup ===== */
@media (max-width: 1180px){
  /* Hide only the promotional header inside Services dropdown.
     Keep the services parent row and every service card visible. */
  .nav-panel .services-dropdown__header,
  .services-dropdown .services-dropdown__header{
    display:none !important;
  }

  .nav-panel .services-dropdown{
    padding-top:14px !important;
  }

  .nav-panel .services-dropdown__grid{
    margin-top:0 !important;
  }
}
html[dir="ltr"] .hero__copy{
    margin-left: 0;
    margin-right: auto;
    text-align: left;
}

html[dir="ltr"] .hero__actions{
    justify-content: flex-start;
}
html[dir="ltr"] .hero-slide .hero__copy{
    left:0;
    right:auto;
    margin:0;
    text-align:left;
}

html[dir="ltr"] .hero-slide{
    background-image:
      linear-gradient(270deg,rgba(5,8,13,.10) 0%,rgba(5,8,13,.20) 35%,rgba(5,8,13,.72) 62%,rgba(5,8,13,.97) 100%),
      var(--slide-image);
}


html[dir="ltr"] .hero-slide .hero-typing{
    direction:ltr;
    text-align:left;
}

html[dir="ltr"] .hero-slide .eyebrow{
    justify-content:flex-start;
}

html[dir="ltr"] .hero-slide .hero__actions{
    justify-content:flex-start;
}
.about-media__image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    border-radius:inherit;
    z-index:0;
}

.about-media__overlay{
    position:absolute;
    inset:0;
    z-index:1;
}

/* =========================================
   Home About - Floating Certified Badge Fix
========================================= */

.about-media__floating--two{
    position: absolute;
    left: 32px;
    bottom: 42px;
    z-index: 5;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: auto;
    min-width: max-content;
    max-width: none;

    padding: 14px 20px;

    background: rgba(10, 15, 24, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;

    color: #ffffff;
    white-space: nowrap;
    overflow: visible;
}

.about-media__floating--two i{
    flex: 0 0 auto;
    color: #ed1b2f;
    font-size: 16px;
}

.about-media__floating--two span{
    display: block;
    width: auto;
    max-width: none;

    color: #ffffff;
    font-weight: 700;

    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}
.testimonials-slider__controls{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    margin-top:24px;
}

.testimonials-slider__arrow{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:52px;
    height:52px;
    border:1px solid #e5e7eb;
    border-radius:50%;
    background:#fff;
    color:#111827;
    cursor:pointer;
}

.testimonials-slider__dots{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}
/* Fix hero slider arrows positions */

html[dir="rtl"] .hero-slider__arrow--prev{
    right:24px !important;
    left:auto !important;
}

html[dir="rtl"] .hero-slider__arrow--next{
    left:24px !important;
    right:auto !important;
}

html[dir="ltr"] .hero-slider__arrow--prev{
    left:24px !important;
    right:auto !important;
}

html[dir="ltr"] .hero-slider__arrow--next{
    right:24px !important;
    left:auto !important;
}


/* ===== Dynamic services menu: keep every service isolated and stable ===== */
.services-dropdown__grid > .dropdown-service--dynamic{
  min-width:0 !important;
  overflow:hidden !important;
}
.services-dropdown__grid > .dropdown-service--dynamic > i{
  flex:0 0 44px !important;
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  min-height:44px !important;
  overflow:hidden !important;
}
.services-dropdown__grid > .dropdown-service--dynamic > i svg{
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
  max-width:22px !important;
  max-height:22px !important;
  display:block !important;
}
.services-dropdown__grid > .dropdown-service--dynamic > span{
  min-width:0 !important;
  flex:1 1 auto !important;
  overflow:hidden !important;
}
.services-dropdown__grid > .dropdown-service--dynamic strong,
.services-dropdown__grid > .dropdown-service--dynamic small{
  display:block !important;
  max-width:100% !important;
  overflow:hidden !important;
  overflow-wrap:anywhere !important;
}
.services-dropdown__grid > .dropdown-service--dynamic small{
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  line-clamp:2 !important;
}

/* Center work details visual card title only */
.work-view-icon strong{
    display:block;
    width:100%;
    text-align:center;
}