:root{
  --blue:#0787f7;
  --purple:#7424d7;
  --dark:#061a3a;
  --white:#ffffff;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#061a3a;
  color:white;
  font-family:Arial,Tahoma,sans-serif;
}
body[dir="rtl"]{font-family:Tahoma,Arial,sans-serif}

/* HOME PAGE keeps the approved full design image */
.home-frame{
  position:relative;
  max-width:1600px;
  margin:0 auto;
  background:#061a3a;
}
.home-frame img{
  width:100%;
  height:auto;
  display:block;
}

/* SAME APPROVED HOME HEADER ON ALL INNER PAGES */
.same-header{
  position:relative;
  max-width:1600px;
  margin:0 auto;
  background:#061a3a;
}
.same-header img{
  width:100%;
  height:auto;
  display:block;
}

/* Clickable navigation on the image header */
.hotspot{
  position:absolute;
  display:block;
  z-index:10;
  background:transparent;
  border-radius:10px;
}
.hotspot::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:0;
  height:3px;
  transform:translateX(-50%);
  border-radius:99px;
  background:linear-gradient(90deg,var(--blue),var(--purple));
  box-shadow:0 0 12px rgba(7,135,247,.8);
  transition:width .22s ease;
}
.hotspot:hover::after{width:70%}

/* Header coordinates based on approved HOME image */
.nav-home{left:3.7%;top:79%;width:4.2%;height:17%}
.nav-about{left:9.6%;top:79%;width:7.4%;height:17%}
.nav-products{left:17.8%;top:79%;width:8%;height:17%}
.nav-brands{left:27.9%;top:79%;width:6.3%;height:17%}
.nav-services{left:35.4%;top:79%;width:9.2%;height:17%}
.nav-contact{left:52.5%;top:79%;width:8.9%;height:17%}

/* HOME image hotspots */
.home-frame .nav-home{top:16.2%;height:3.6%}
.home-frame .nav-about{top:16.2%;height:3.6%}
.home-frame .nav-products{top:16.2%;height:3.6%}
.home-frame .nav-brands{top:16.2%;height:3.6%}
.home-frame .nav-services{top:16.2%;height:3.6%}
.home-frame .nav-contact{top:16.2%;height:3.6%}
.button-products{left:5.5%;top:51.9%;width:12.2%;height:4.3%}
.button-contact{left:19.2%;top:51.9%;width:12.1%;height:4.3%}
.home-whatsapp{right:3.1%;bottom:7.2%;width:5.3%;height:8.2%;border-radius:50%;animation:waPulse 1.8s ease-in-out infinite}
.home-facebook{left:71.8%;top:91.4%;width:18.5%;height:3.3%}

/* Page content below identical header */
.page-hero{
  max-width:1600px;
  margin:0 auto;
  min-height:330px;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(3,16,44,.98),rgba(5,25,61,.92)),
    radial-gradient(circle at 78% 52%,rgba(245,145,34,.72) 0 7%,transparent 18%);
}
.page-hero::before{
  content:"";
  position:absolute;
  right:10%;
  top:6%;
  width:300px;
  height:300px;
  background:
    linear-gradient(90deg,transparent 46%,rgba(255,165,40,.9) 47% 50%,transparent 51%),
    linear-gradient(61deg,transparent 46%,rgba(255,165,40,.75) 47% 49%,transparent 50%),
    linear-gradient(118deg,transparent 46%,rgba(255,165,40,.75) 47% 49%,transparent 50%);
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.65));
}
.page-hero-inner{
  position:relative;
  z-index:2;
  max-width:1350px;
  margin:auto;
  padding:62px 40px;
}
.page-hero h1{
  margin:0 0 16px;
  font-size:54px;
  line-height:1.1;
  text-transform:uppercase;
}
.page-hero p{
  max-width:820px;
  font-size:19px;
  line-height:1.65;
}

.section{
  max-width:1350px;
  margin:0 auto;
  padding:55px 40px;
}
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.card,.panel{
  background:white;
  color:#07183e;
  border-radius:18px;
  padding:28px;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.card h3,.panel h3{margin-top:0;color:#062b70}
.card p,.card li,.panel p,.panel li{color:#5c6c88;line-height:1.65}
.card a,.btn{
  display:inline-flex;
  margin-top:12px;
  padding:12px 18px;
  border-radius:8px;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  color:white;
  text-decoration:none;
  font-weight:900;
  border:0;
}

.product-detail{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.visual{
  min-height:360px;
  border-radius:18px;
  background:
    radial-gradient(circle at 35% 30%,rgba(7,135,247,.45),transparent 32%),
    radial-gradient(circle at 72% 72%,rgba(116,36,215,.52),transparent 32%),
    linear-gradient(145deg,#071f4b,#04142f);
  position:relative;
  overflow:hidden;
}
.visual::after{
  content:"";
  position:absolute;
  inset:40px;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.45));
}
.tricone::after{
  background:
    radial-gradient(circle at 50% 34%,#842bdc 0 15%,transparent 16%),
    radial-gradient(circle at 34% 47%,#541099 0 10%,transparent 11%),
    radial-gradient(circle at 66% 47%,#541099 0 10%,transparent 11%),
    radial-gradient(circle at 50% 61%,#b788ff 0 12%,transparent 13%),
    linear-gradient(180deg,transparent 0 72%,#242424 73% 85%,transparent 86%);
}
.hammer::after{background:repeating-linear-gradient(90deg,transparent 0 45px,#111 46px 70px,#777 71px 78px,#111 79px 96px,transparent 97px 135px)}
.bit::after{
  background:
    radial-gradient(circle at 50% 24%,#7a25d6 0 16%,transparent 17%),
    repeating-linear-gradient(90deg,transparent 0 36px,#151515 37px 60px,#666 61px 66px,#151515 67px 92px,transparent 93px 120px);
}
.pump::after{background:repeating-linear-gradient(90deg,transparent 0 46px,#c9d3dc 47px 83px,#096dce 84px 103px,transparent 104px 140px)}
.tube::after{
  background:
    repeating-radial-gradient(circle at 35% 45%,#e6e6e6 0 14px,#06152b 15px 29px,#0b8cff 30px 36px,transparent 37px 82px),
    linear-gradient(90deg,#111,#333);
}

.socials{
  position:fixed;
  right:26px;
  bottom:26px;
  z-index:80;
  display:grid;
  gap:12px;
}
.socials a{
  width:62px;
  height:62px;
  border-radius:50%;
  overflow:hidden;
  display:block;
  box-shadow:0 10px 28px rgba(0,0,0,.38);
}
.socials img{width:100%;height:100%;object-fit:cover}
.socials .wa{animation:waPulse 1.8s infinite}
.socials .fb{animation:fbFloat 2.4s infinite}
footer{
  max-width:1600px;
  margin:0 auto;
  background:linear-gradient(90deg,#641bd2,#0787f7);
  text-align:center;
  padding:22px;
}
body[dir="rtl"] .page-hero-inner,
body[dir="rtl"] .panel,
body[dir="rtl"] .card{text-align:right}
body[dir="rtl"] .socials{right:auto;left:26px}

@keyframes waPulse{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}
  70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}
@keyframes fbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

@media(max-width:900px){
  .home-frame,.same-header{overflow-x:auto}
  .home-frame img,.same-header img{width:1600px;max-width:none}
  .hotspot{display:none}
  .grid,.product-detail{grid-template-columns:1fr}
  .page-hero h1{font-size:36px}
}


/* Brand logo page update */
.brand-card-logo {
  background: #ffffff;
  color: #07183e;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 260px;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}

.brand-card-logo:hover {
  transform: translateY(-5px);
  box-shadow: 0 28px 70px rgba(0,0,0,.42);
}

.brand-logo-box {
  width: 100%;
  height: 115px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #f5f8ff;
  border: 1px solid #e1e8f5;
  margin-bottom: 18px;
  padding: 14px;
}

.brand-logo-box img {
  max-width: 100%;
  max-height: 85px;
  object-fit: contain;
}

.brand-card-logo h3 {
  margin: 0 0 8px;
  color: #062b70;
  font-size: 22px;
}

.brand-card-logo p {
  color: #5c6c88;
  line-height: 1.5;
  margin: 0 0 12px;
}

.brand-card-logo a {
  display: inline-flex;
  padding: 11px 18px;
  border-radius: 8px;
  background: linear-gradient(135deg,var(--blue),var(--purple));
  color: white;
  text-decoration: none;
  font-weight: 900;
}


/* Final amendments: remove Gallery and refine brand logos */
.brand-card-logo {
  min-height: 245px;
  justify-content: center;
}

.brand-logo-box {
  height: 135px;
}

.brand-logo-box img {
  max-width: 92%;
  max-height: 105px;
}

.brand-card-logo.great-logo .brand-logo-box img {
  max-width: 100%;
  max-height: 118px;
  transform: scale(1.18);
}

.brand-card-logo.lilin-logo .brand-logo-box img {
  max-width: 100%;
  max-height: 95px;
}

.brand-card-logo .brand-button,
.brand-card-logo a.brand-button {
  display: none !important;
}

.brand-card-logo h3 {
  margin-top: 10px;
}


/* Professional Gallery removal: updated navigation coordinates */
.nav-home{left:5.3%;top:79%;width:4.1%;height:17%}
.nav-about{left:11.2%;top:79%;width:7.4%;height:17%}
.nav-products{left:18.9%;top:79%;width:7.7%;height:17%}
.nav-brands{left:28.7%;top:79%;width:6.6%;height:17%}
.nav-services{left:36.8%;top:79%;width:10.5%;height:17%}
.nav-contact{left:51.2%;top:79%;width:9.2%;height:17%}

.home-frame .nav-home{top:16.2%;height:3.6%}
.home-frame .nav-about{top:16.2%;height:3.6%}
.home-frame .nav-products{top:16.2%;height:3.6%}
.home-frame .nav-brands{top:16.2%;height:3.6%}
.home-frame .nav-services{top:16.2%;height:3.6%}
.home-frame .nav-contact{top:16.2%;height:3.6%}


/* Header resized and navigation professionally aligned */
.same-header {
  max-width: 1600px;
  line-height: 0;
}

.same-header img {
  display: block;
  width: 100%;
  height: auto;
}

.nav-home{left:5.4%;top:68.5%;width:3.6%;height:23%}
.nav-about{left:11.3%;top:68.5%;width:6.8%;height:23%}
.nav-products{left:18.7%;top:68.5%;width:7.5%;height:23%}
.nav-brands{left:28.4%;top:68.5%;width:5.8%;height:23%}
.nav-services{left:36.4%;top:68.5%;width:9.2%;height:23%}
.nav-contact{left:51.1%;top:68.5%;width:8.2%;height:23%}

/* Full HOME image coordinates */
.home-frame .nav-home{left:5.4%;top:16.2%;width:3.6%;height:3.6%}
.home-frame .nav-about{left:11.3%;top:16.2%;width:6.8%;height:3.6%}
.home-frame .nav-products{left:18.7%;top:16.2%;width:7.5%;height:3.6%}
.home-frame .nav-brands{left:28.4%;top:16.2%;width:5.8%;height:3.6%}
.home-frame .nav-services{left:36.4%;top:16.2%;width:9.2%;height:3.6%}
.home-frame .nav-contact{left:51.1%;top:16.2%;width:8.2%;height:3.6%}

.hotspot::after {
  bottom: 2px;
}


/* Product detail enrichment */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 14px;
  background: #ffffff;
  color: #07183e;
}

.spec-table th {
  background: linear-gradient(135deg, #0787f7, #7424d7);
  color: #ffffff;
  text-align: left;
  padding: 14px;
  font-size: 14px;
}

.spec-table td {
  padding: 13px 14px;
  border-bottom: 1px solid #e5ecf7;
  color: #4d5f7a;
  font-weight: 700;
}

.spec-table tr:last-child td {
  border-bottom: 0;
}

.product-detail-wide {
  max-width: 1350px;
  margin: 0 auto;
  padding: 55px 40px;
}

.brand-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 22px;
}

.brand-product-card {
  background: #ffffff;
  color: #07183e;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
  min-height: 240px;
}

.brand-product-card img {
  max-width: 100%;
  height: 75px;
  object-fit: contain;
  display: block;
  margin-bottom: 14px;
}

.brand-product-card h3 {
  margin: 0 0 8px;
  color: #062b70;
}

.brand-product-card p,
.brand-product-card li {
  color: #5c6c88;
  line-height: 1.55;
  font-size: 14px;
}

.catalogue-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 22px;
}

.catalogue-card {
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
  color: #07183e;
}

.catalogue-card img {
  width: 100%;
  height: 270px;
  object-fit: cover;
  object-position: top center;
  display: block;
  background: white;
}

.catalogue-card div {
  padding: 14px 16px;
  font-weight: 900;
  color: #062b70;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0;
}

.badge {
  padding: 9px 13px;
  border-radius: 999px;
  background: #eef5ff;
  color: #075a9b;
  font-weight: 900;
  font-size: 13px;
  border: 1px solid #dce8fb;
}

.dark-panel {
  background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 22px;
  padding: 30px;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
}

.dark-panel h2,
.dark-panel h3 {
  color: #2aa9ff;
  margin-top: 0;
}

.dark-panel p,
.dark-panel li {
  color: #e9f3ff;
  line-height: 1.75;
}

.product-family-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.product-family-nav a {
  background: linear-gradient(135deg, #0787f7, #7424d7);
  color: white;
  text-decoration: none;
  font-weight: 900;
  border-radius: 9px;
  padding: 12px 18px;
}

@media(max-width: 1000px) {
  .brand-product-grid,
  .catalogue-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width: 640px) {
  .brand-product-grid,
  .catalogue-gallery {
    grid-template-columns: 1fr;
  }
}


/* Web-data product pages */
.brand-section-block {
  max-width: 1350px;
  margin: 0 auto;
  padding: 35px 40px;
}

.brand-detail {
  background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 24px;
  padding: 30px;
  box-shadow: 0 22px 60px rgba(0,0,0,.24);
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
  align-items: start;
}

.brand-detail-logo {
  background: #ffffff;
  border-radius: 18px;
  padding: 22px;
  min-height: 185px;
  display: grid;
  place-items: center;
}

.brand-detail-logo img {
  max-width: 100%;
  max-height: 140px;
  object-fit: contain;
}

.brand-detail h2 {
  margin: 0 0 8px;
  color: #2aa9ff;
  font-size: 34px;
}

.brand-detail p,
.brand-detail li {
  color: #e9f3ff;
  line-height: 1.75;
}

.brand-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 22px;
}

.brand-mini-card {
  background: #ffffff;
  color: #07183e;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 18px 45px rgba(0,0,0,.25);
}

.brand-mini-card h3 {
  margin: 0 0 8px;
  color: #062b70;
  font-size: 18px;
}

.brand-mini-card p {
  color: #5c6c88;
  line-height: 1.55;
  font-size: 14px;
}

.product-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 22px;
}

.product-photo {
  background: white;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
  color: #07183e;
}

.product-photo img {
  width: 100%;
  height: 260px;
  object-fit: contain;
  background: #f7f9fe;
  display: block;
}

.product-photo div {
  padding: 14px 16px;
  font-weight: 900;
  color: #062b70;
}

.dual-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 20px;
}

.source-note {
  color: #bcd9ff !important;
  font-size: 13px;
  margin-top: 12px;
}

@media(max-width: 1000px) {
  .brand-detail {
    grid-template-columns: 1fr;
  }
  .brand-mini-grid,
  .product-photo-grid,
  .dual-table {
    grid-template-columns: 1fr;
  }
}


/* Restored previous approved image-header */
.pro-header,
.pro-nav,
.pro-header-inner,
.pro-nav-inner {
  display: none !important;
}

.same-header {
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  background: #061a3a;
  line-height: 0;
}

.same-header img {
  width: 100%;
  height: auto;
  display: block;
}

.home-frame {
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  background: #061a3a;
}

.home-frame img.home {
  width: 100%;
  height: auto;
  display: block;
}

/* restored aligned nav coordinates */
.nav-home{left:5.4%;top:68.5%;width:3.6%;height:23%}
.nav-about{left:11.3%;top:68.5%;width:6.8%;height:23%}
.nav-products{left:18.7%;top:68.5%;width:7.5%;height:23%}
.nav-brands{left:28.4%;top:68.5%;width:5.8%;height:23%}
.nav-services{left:36.4%;top:68.5%;width:9.2%;height:23%}
.nav-contact{left:51.1%;top:68.5%;width:8.2%;height:23%}

.home-frame .nav-home{left:5.4%;top:16.2%;width:3.6%;height:3.6%}
.home-frame .nav-about{left:11.3%;top:16.2%;width:6.8%;height:3.6%}
.home-frame .nav-products{left:18.7%;top:16.2%;width:7.5%;height:3.6%}
.home-frame .nav-brands{left:28.4%;top:16.2%;width:5.8%;height:3.6%}
.home-frame .nav-services{left:36.4%;top:16.2%;width:9.2%;height:3.6%}
.home-frame .nav-contact{left:51.1%;top:16.2%;width:8.2%;height:3.6%}

.home-frame .button-products{left:5.5%;top:51.9%;width:12.2%;height:4.3%}
.home-frame .button-contact{left:19.2%;top:51.9%;width:12.1%;height:4.3%}
.home-frame .home-whatsapp{right:3.1%;bottom:7.2%;width:5.3%;height:8.2%;border-radius:50%}
.home-frame .home-facebook{left:71.8%;top:91.4%;width:18.5%;height:3.3%}

img[src*="great-logo.png"] {
  object-fit: contain !important;
}


/* JAY / SAMUDRA product page professional sections */
.supplier-hero-card {
  max-width: 1350px;
  margin: 0 auto;
  padding: 40px;
}

.supplier-box {
  background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 24px 70px rgba(0,0,0,.25);
}

.supplier-box h2,
.supplier-box h3 {
  color: #2aa9ff;
  margin-top: 0;
}

.supplier-box p,
.supplier-box li {
  color: #e9f3ff;
  line-height: 1.75;
}

.product-model-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 24px;
}

.model-card {
  background: #ffffff;
  color: #07183e;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 20px 50px rgba(0,0,0,.32);
  min-height: 250px;
  position: relative;
  overflow: hidden;
}

.model-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 82% 18%, rgba(7,135,247,.12), transparent 32%);
  pointer-events: none;
}

.model-card h3 {
  margin: 0 0 8px;
  color: #062b70;
  position: relative;
}

.model-card p,
.model-card li {
  color: #5c6c88;
  line-height: 1.55;
  font-size: 14px;
  position: relative;
}

.model-visual {
  height: 90px;
  border-radius: 14px;
  margin-bottom: 16px;
  background: #eef5ff;
  position: relative;
  overflow: hidden;
}

.model-visual.hammer-pic::after {
  content: "";
  position: absolute;
  inset: 20px 10px;
  background: repeating-linear-gradient(90deg, transparent 0 28px, #111 29px 48px, #777 49px 54px, #111 55px 75px, transparent 76px 105px);
  filter: drop-shadow(0 10px 12px rgba(0,0,0,.35));
}

.model-visual.bit-pic::after {
  content: "";
  position: absolute;
  inset: 12px 10px;
  background:
    radial-gradient(circle at 50% 24%, #7424d7 0 13%, transparent 14%),
    radial-gradient(circle at 38% 32%, #111 0 7%, transparent 8%),
    radial-gradient(circle at 62% 32%, #111 0 7%, transparent 8%),
    repeating-linear-gradient(90deg, transparent 0 28px, #151515 29px 50px, #666 51px 56px, #151515 57px 78px, transparent 79px 105px);
  filter: drop-shadow(0 10px 12px rgba(0,0,0,.35));
}

.model-visual.pump-pic::after {
  content: "";
  position: absolute;
  inset: 12px 10px;
  background: repeating-linear-gradient(90deg, transparent 0 35px, #c9d3dc 36px 66px, #096dce 67px 84px, transparent 85px 115px);
  filter: drop-shadow(0 10px 12px rgba(0,0,0,.35));
}

.logo-source-row {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 18px;
}

.logo-source-row img {
  background: white;
  border-radius: 12px;
  padding: 10px;
  max-width: 160px;
  max-height: 82px;
  object-fit: contain;
}

.source-link {
  color: #9bd7ff !important;
  font-size: 13px;
}

@media(max-width: 1100px) {
  .product-model-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width: 640px) {
  .product-model-grid {
    grid-template-columns: 1fr;
  }
}


/* Real extracted JAY product images */
.real-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 24px;
}

.real-product-card {
  background: #ffffff;
  color: #07183e;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 22px 55px rgba(0,0,0,.32);
  display: flex;
  flex-direction: column;
}

.real-product-card .img-wrap {
  height: 270px;
  background: #f8fbff;
  display: grid;
  place-items: center;
  padding: 14px;
  border-bottom: 1px solid #e4ecf7;
}

.real-product-card .img-wrap img {
  max-width: 100%;
  max-height: 245px;
  object-fit: contain;
  display: block;
}

.real-product-card .content {
  padding: 18px;
}

.real-product-card h3 {
  color: #062b70;
  margin: 0 0 8px;
  font-size: 18px;
}

.real-product-card p {
  color: #5c6c88;
  line-height: 1.5;
  margin: 6px 0;
  font-size: 14px;
}

.real-banner {
  max-width: 1350px;
  margin: 0 auto;
  padding: 35px 40px 0;
}

.real-banner img {
  width: 100%;
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
  display: block;
  background: #fff;
}

.compact-spec-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
  font-size: 13px;
}

.compact-spec-table td {
  border-bottom: 1px solid #e6edf7;
  padding: 7px 0;
  color: #5c6c88;
}

.compact-spec-table td:first-child {
  font-weight: 900;
  color: #062b70;
}

@media(max-width: 1100px) {
  .real-product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width: 640px) {
  .real-product-grid {
    grid-template-columns: 1fr;
  }
}


/* GREAT tricone official website section */
.great-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 22px;
}

.great-gallery-card {
  background: #ffffff;
  color: #07183e;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
}

.great-gallery-card .great-img {
  height: 300px;
  display: grid;
  place-items: center;
  background: #f8fbff;
  padding: 14px;
}

.great-gallery-card img {
  max-width: 100%;
  max-height: 272px;
  object-fit: contain;
}

.great-gallery-card .great-info {
  padding: 16px 18px;
}

.great-gallery-card h3 {
  color: #062b70;
  margin: 0 0 8px;
  font-size: 18px;
}

.great-gallery-card p {
  color: #5c6c88;
  line-height: 1.55;
  font-size: 14px;
}

.great-logo-local {
  max-width: 100%;
  max-height: 95px;
  object-fit: contain;
}

.great-application-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.great-application-grid span {
  background: #eef5ff;
  color: #075a9b;
  border: 1px solid #dce8fb;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 900;
  text-align: center;
  font-size: 13px;
}

@media(max-width: 1000px) {
  .great-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .great-application-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width: 640px) {
  .great-gallery-grid,
  .great-application-grid {
    grid-template-columns: 1fr;
  }
}


/* Professional Contact Page */
.contact-icon-grid {
  max-width: 1350px;
  margin: 0 auto;
  padding: 55px 40px 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.contact-icon-card {
  background: #ffffff;
  color: #07183e;
  border-radius: 22px;
  padding: 30px 22px;
  text-align: center;
  box-shadow: 0 22px 60px rgba(0,0,0,.28);
  min-height: 245px;
}

.contact-icon-circle {
  width: 86px;
  height: 86px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #f7f9fe;
  box-shadow: 0 14px 38px rgba(0,0,0,.12);
  color: #d30b18;
  font-size: 38px;
}

.contact-icon-card h3 {
  margin: 0 0 18px;
  color: #cfd3dc;
  font-size: 20px;
}

.contact-icon-card p,
.contact-icon-card a {
  color: #07183e;
  line-height: 1.65;
  text-decoration: none;
  font-size: 16px;
}

.contact-icon-card strong {
  color: #07183e;
}

.contact-page-main {
  max-width: 1350px;
  margin: 0 auto;
  padding: 35px 40px 70px;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 30px;
}

.contact-map-card,
.contact-form-card {
  background: #ffffff;
  color: #07183e;
  border-radius: 22px;
  padding: 28px;
  box-shadow: 0 22px 60px rgba(0,0,0,.28);
}

.contact-map-placeholder {
  min-height: 360px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(7,135,247,.14), rgba(116,36,215,.14)),
    repeating-linear-gradient(45deg, #eef4ff 0 14px, #ffffff 15px 28px);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 30px;
  color: #062b70;
  font-weight: 900;
  line-height: 1.6;
}

.contact-form-card h2 {
  margin: 0 0 18px;
  color: #d30b18;
  font-size: 34px;
}

.contact-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.contact-form-grid input,
.contact-form-grid textarea {
  width: 100%;
  border: 1px solid #c9ced8;
  padding: 16px;
  font: inherit;
  border-radius: 0;
}

.contact-form-grid textarea {
  grid-column: 1 / -1;
  min-height: 145px;
}

.contact-form-grid button {
  grid-column: 1 / -1;
  justify-self: start;
  border: 0;
  padding: 14px 26px;
  border-radius: 8px;
  color: #ffffff;
  font-weight: 900;
  background: linear-gradient(135deg, #0787f7, #7424d7);
}

.facebook-page-box {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  font-weight: 900;
}

.facebook-page-box img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

@media(max-width: 1100px) {
  .contact-icon-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .contact-page-main {
    grid-template-columns: 1fr;
  }
}

@media(max-width: 640px) {
  .contact-icon-grid,
  .contact-form-grid {
    grid-template-columns: 1fr;
  }
}


/* Final Contact Page Color & Typography Refinement */
.contact-icon-card {
  border: 1px solid rgba(7, 135, 247, .12);
  box-shadow: 0 22px 60px rgba(7, 24, 62, .18);
}

.contact-icon-circle {
  background: linear-gradient(135deg, #0787f7, #7424d7) !important;
  color: #ffffff !important;
  box-shadow: 0 16px 42px rgba(7, 135, 247, .25);
  font-size: 34px;
}

.contact-icon-card h3 {
  color: #062b70 !important;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: .2px;
}

.contact-icon-card p,
.contact-icon-card a {
  color: #1b2a4a !important;
  font-size: 16px;
  font-weight: 600;
}

.contact-map-card,
.contact-form-card {
  border: 1px solid rgba(7, 135, 247, .12);
  box-shadow: 0 22px 60px rgba(7, 24, 62, .18);
}

.contact-form-card h2 {
  color: #062b70 !important;
  font-size: 32px;
  font-weight: 900;
}

.contact-form-card h2::after {
  content: "";
  display: block;
  width: 82px;
  height: 4px;
  border-radius: 99px;
  margin-top: 12px;
  background: linear-gradient(90deg, #0787f7, #7424d7);
}

.contact-form-grid input,
.contact-form-grid textarea {
  border: 1px solid #d5deee !important;
  border-radius: 12px !important;
  color: #07183e;
  font-size: 15px;
  font-weight: 600;
  background: #fbfdff;
}

.contact-form-grid input::placeholder,
.contact-form-grid textarea::placeholder {
  color: #7a879c;
  font-weight: 500;
}

.contact-map-placeholder {
  background:
    radial-gradient(circle at 20% 20%, rgba(7,135,247,.18), transparent 28%),
    radial-gradient(circle at 82% 70%, rgba(116,36,215,.18), transparent 30%),
    linear-gradient(135deg, #f5f9ff, #ffffff) !important;
  color: #062b70 !important;
  border: 1px solid #dce8fb;
  font-size: 16px;
}

.facebook-page-box {
  color: #062b70 !important;
  font-size: 15px !important;
}

.contact-form-grid button {
  background: linear-gradient(135deg, #0787f7, #7424d7) !important;
  font-size: 15px;
  letter-spacing: .2px;
}


/* Home page clickable animated sections: View Products + Read More */
.animated-click {
  transition: transform .22s ease, filter .22s ease;
  cursor: pointer;
}

.animated-click::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(7,135,247,.22), rgba(116,36,215,.22));
  opacity: 0;
  transform: scale(.96);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
}

.animated-click::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 0;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, #0787f7, #7424d7);
  box-shadow: 0 0 16px rgba(7,135,247,.8);
  transition: width .24s ease;
}

.animated-click:hover {
  transform: translateY(-2px) scale(1.025);
}

.animated-click:hover::before {
  opacity: 1;
  transform: scale(1);
}

.animated-click:hover::after {
  width: 72%;
}

.animated-click:active {
  transform: scale(.97);
}

/* Pulse attention only for main CTA */
.view-products-hotspot {
  animation: homeCtaPulse 2.2s ease-in-out infinite;
}

.view-products-hotspot:hover {
  animation: none;
}

/* Read More hotspot: About box lower homepage */
.read-more-hotspot {
  left: 7.95%;
  top: 78.6%;
  width: 8.1%;
  height: 3.7%;
  border-radius: 8px;
}

/* Keep existing product button position but make animation cleaner */
.home-frame .button-products {
  border-radius: 8px;
}

.home-frame .button-contact {
  border-radius: 8px;
}

@keyframes homeCtaPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(7,135,247,.38);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(7,135,247,0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(7,135,247,0);
  }
}


/* PROFESSIONAL HOME CTA OVERLAYS - visible, selected, animated */
.home-frame {
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  background: #061a3a;
}

.home-cta-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 25;
}

.home-overlay-btn {
  position: absolute;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 9px;
  text-decoration: none;
  font-weight: 900;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .4px;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  isolation: isolate;
  overflow: hidden;
}

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

.home-overlay-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0787f7, #7424d7);
  z-index: 0;
}

.home-overlay-btn::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.45), transparent 70%);
  transform: translateX(-130%) rotate(12deg);
  transition: transform .65s ease;
  z-index: 1;
}

.home-overlay-btn:hover {
  transform: translateY(-4px) scale(1.035);
  box-shadow: 0 18px 36px rgba(7,135,247,.45), 0 0 0 4px rgba(255,255,255,.16);
  filter: brightness(1.05);
}

.home-overlay-btn:hover::after {
  transform: translateX(130%) rotate(12deg);
}

.home-overlay-btn:active {
  transform: scale(.96);
}

.home-overlay-btn.primary {
  color: #ffffff;
  box-shadow: 0 0 0 0 rgba(7,135,247,.55);
  animation: selectedPulseBlue 2s ease-in-out infinite;
}

.home-overlay-btn.outline {
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.82);
  background: rgba(0,0,0,.20);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}

.home-overlay-btn.outline::before {
  background: linear-gradient(135deg, rgba(7,135,247,.62), rgba(116,36,215,.62));
}

.home-overlay-btn.small {
  color: #ffffff;
  min-height: 38px;
  padding: 0 18px;
  font-size: 12px;
  box-shadow: 0 12px 28px rgba(116,36,215,.34);
}

.home-overlay-btn.small::before {
  background: linear-gradient(135deg, #0787f7, #7424d7);
}

/* Coordinates calibrated for the approved HOME image */
.view-products-btn {
  left: 5.55%;
  top: 51.55%;
  width: 12.4%;
  height: 4.85%;
}

.contact-btn {
  left: 19.15%;
  top: 51.55%;
  width: 12.2%;
  height: 4.85%;
}

/* Read More button in About SARL OPTREND lower-left section */
.read-more-btn {
  left: 5.85%;
  top: 79.65%;
  width: 9.6%;
  height: 3.95%;
}

@keyframes selectedPulseBlue {
  0% {
    box-shadow: 0 0 0 0 rgba(7,135,247,.55), 0 14px 32px rgba(7,135,247,.34);
  }
  70% {
    box-shadow: 0 0 0 13px rgba(7,135,247,0), 0 14px 32px rgba(7,135,247,.34);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(7,135,247,0), 0 14px 32px rgba(7,135,247,.34);
  }
}

/* Disable previous invisible button glow conflicts */
.button-products,
.button-contact,
.read-more-hotspot {
  display: none !important;
}

/* Mobile: hide overlays because the image becomes horizontally scrollable */
@media(max-width: 900px) {
  .home-cta-overlay {
    display: none;
  }
}


/* CLEAN FIX: Home buttons use existing design, no visible overlay mess */
.home-cta-overlay,
.home-overlay-btn,
.view-products-btn,
.contact-btn,
.read-more-btn {
  display: none !important;
}

/* Exact clickable zones placed over the already-designed buttons */
.home-frame .button-products.clean-click-zone {
  left: 5.45% !important;
  top: 51.65% !important;
  width: 12.45% !important;
  height: 4.65% !important;
  display: block !important;
  border-radius: 8px;
}

.home-frame .button-contact.clean-click-zone {
  left: 19.05% !important;
  top: 51.65% !important;
  width: 12.35% !important;
  height: 4.65% !important;
  display: block !important;
  border-radius: 8px;
}

/* Read More button zone in ABOUT SARL OPTREND panel */
.home-frame .read-more-clean.clean-click-zone {
  left: 6.05% !important;
  top: 79.45% !important;
  width: 8.3% !important;
  height: 3.6% !important;
  display: block !important;
  border-radius: 7px;
}

/* clean professional hover: outline + soft shine, transparent otherwise */
.clean-click-zone {
  background: transparent !important;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, outline-color .2s ease;
  outline: 0 solid transparent;
}

.clean-click-zone::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 2px solid transparent;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.clean-click-zone::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 4px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, #0787f7, #7424d7);
  box-shadow: 0 0 12px rgba(7,135,247,.7);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s ease;
  pointer-events: none;
}

.clean-click-zone:hover {
  transform: translateY(-1px);
}

.clean-click-zone:hover::before {
  opacity: 1;
  border-color: rgba(255,255,255,.75);
  box-shadow: 0 0 18px rgba(7,135,247,.42), 0 0 28px rgba(116,36,215,.25);
}

.clean-click-zone:hover::after {
  transform: scaleX(1);
}

.clean-click-zone:active {
  transform: scale(.985);
}

/* subtle pulse only around View Products, not a big visible block */
.home-frame .button-products.clean-click-zone::before {
  animation: cleanCtaPulse 2.5s ease-in-out infinite;
}

.home-frame .button-products.clean-click-zone:hover::before {
  animation: none;
}

@keyframes cleanCtaPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(7,135,247,.0);
    border-color: transparent;
    opacity: 0;
  }
  45% {
    box-shadow: 0 0 18px rgba(7,135,247,.30);
    border-color: rgba(255,255,255,.35);
    opacity: 1;
  }
  100% {
    box-shadow: 0 0 0 0 rgba(7,135,247,0);
    border-color: transparent;
    opacity: 0;
  }
}

/* Preserve nav/social hotspots, but don't let older rules override clean zones */
.hotspot.clean-click-zone {
  z-index: 40;
}

/* Hide clean zones on mobile because the image is horizontally scrollable */
@media(max-width: 900px) {
  .home-frame .button-products.clean-click-zone,
  .home-frame .button-contact.clean-click-zone,
  .home-frame .read-more-clean.clean-click-zone {
    display: none !important;
  }
}


/* FINAL PROFESSIONAL HOME BUTTON FOCUS - calibrated on actual 1536x1024 design */
.home-cta-overlay,
.home-overlay-btn,
.animated-click,
.clean-click-zone,
.button-products,
.button-contact,
.read-more-hotspot,
.read-more-clean {
  display: none !important;
}

.home-frame {
  position: relative !important;
}

.home-focus-zone {
  position: absolute;
  z-index: 80;
  display: block !important;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  outline: none;
  transition: transform .18s ease;
}

/* exact button positions from the real image */
.main-products-focus {
  left: 5.86%;
  top: 50.58%;
  width: 12.25%;
  height: 3.82%;
}

.product-tricone-focus {
  left: 17.85%;
  top: 70.50%;
  width: 7.62%;
  height: 2.44%;
}

.product-hammer-focus {
  left: 38.48%;
  top: 70.50%;
  width: 7.62%;
  height: 2.44%;
}

.product-pump-focus {
  left: 62.50%;
  top: 70.50%;
  width: 7.55%;
  height: 2.44%;
}

.product-tubing-focus {
  left: 84.62%;
  top: 70.50%;
  width: 7.62%;
  height: 2.44%;
}

.read-more-focus {
  left: 5.80%;
  top: 90.43%;
  width: 8.20%;
  height: 2.95%;
}

/* focus animation: appears only on hover/focus, no misplaced blocks */
.home-focus-zone::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,.88);
  box-shadow:
    0 0 0 1px rgba(7,135,247,.45),
    0 0 18px rgba(7,135,247,.75),
    0 0 28px rgba(116,36,215,.45);
  opacity: 0;
  transform: scale(.96);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}

.home-focus-zone::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 4px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0787f7, #7424d7);
  box-shadow: 0 0 12px rgba(7,135,247,.75);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s ease;
  pointer-events: none;
}

.home-focus-zone:hover,
.home-focus-zone:focus-visible {
  transform: translateY(-1px);
}

.home-focus-zone:hover::before,
.home-focus-zone:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

.home-focus-zone:hover::after,
.home-focus-zone:focus-visible::after {
  transform: scaleX(1);
}

.home-focus-zone:active {
  transform: scale(.98);
}

/* soft attention only for main OUR PRODUCTS button */
.main-products-focus::before {
  animation: refinedFocusPulse 2.6s ease-in-out infinite;
}

.main-products-focus:hover::before,
.main-products-focus:focus-visible::before {
  animation: none;
}

@keyframes refinedFocusPulse {
  0%, 100% {
    opacity: 0;
    transform: scale(.96);
  }
  45% {
    opacity: .65;
    transform: scale(1);
  }
}

/* mobile: image scrolls, so avoid misplaced overlays */
@media(max-width: 900px) {
  .home-focus-zone {
    display: none !important;
  }
}


/* FINAL FIX: clean animation for BOTH main home buttons */
.focus-debug-zone,
.contact-us-focus,
.contact-button-focus,
.focus-products,
.focus-contact,
.button-products,
.button-contact {
  display: none !important;
}

/* Restore Our Products to the previously correct calibration */
.home-frame .main-products-focus {
  left: 5.86% !important;
  top: 50.58% !important;
  width: 12.25% !important;
  height: 3.82% !important;
  display: block !important;
  border-radius: 8px !important;
  z-index: 80 !important;
}

/* Contact Us calibrated beside Our Products, same height and animation */
.home-frame .main-contact-focus {
  position: absolute !important;
  left: 19.10% !important;
  top: 50.58% !important;
  width: 12.25% !important;
  height: 3.82% !important;
  display: block !important;
  border-radius: 8px !important;
  z-index: 81 !important;
  background: transparent !important;
  cursor: pointer;
  transition: transform .18s ease;
}

/* Same professional focus system for both buttons */
.home-frame .main-products-focus::before,
.home-frame .main-contact-focus::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,.88);
  box-shadow:
    0 0 0 1px rgba(7,135,247,.45),
    0 0 18px rgba(7,135,247,.75),
    0 0 28px rgba(116,36,215,.45);
  opacity: 0;
  transform: scale(.96);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}

.home-frame .main-products-focus::after,
.home-frame .main-contact-focus::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 4px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0787f7, #7424d7);
  box-shadow: 0 0 12px rgba(7,135,247,.75);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s ease;
  pointer-events: none;
}

.home-frame .main-products-focus:hover,
.home-frame .main-products-focus:focus-visible,
.home-frame .main-contact-focus:hover,
.home-frame .main-contact-focus:focus-visible {
  transform: translateY(-1px);
}

.home-frame .main-products-focus:hover::before,
.home-frame .main-products-focus:focus-visible::before,
.home-frame .main-contact-focus:hover::before,
.home-frame .main-contact-focus:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

.home-frame .main-products-focus:hover::after,
.home-frame .main-products-focus:focus-visible::after,
.home-frame .main-contact-focus:hover::after,
.home-frame .main-contact-focus:focus-visible::after {
  transform: scaleX(1);
}

.home-frame .main-products-focus:active,
.home-frame .main-contact-focus:active {
  transform: scale(.98);
}

/* soft pulse only for Our Products, same as before */
.home-frame .main-products-focus::before {
  animation: refinedFocusPulse 2.6s ease-in-out infinite;
}

.home-frame .main-products-focus:hover::before,
.home-frame .main-products-focus:focus-visible::before {
  animation: none;
}

@media(max-width: 900px) {
  .home-frame .main-products-focus,
  .home-frame .main-contact-focus {
    display: none !important;
  }
}


/* FINAL CONTACT US BUTTON CALIBRATION ONLY */
/* Actual button bounds on 1536x1024 image: x=301 y=518 w=191 h=40 */
.home-frame .main-contact-focus {
  left: 19.60% !important;
  top: 50.59% !important;
  width: 12.45% !important;
  height: 3.92% !important;
  border-radius: 8px !important;
}

/* keep animation exactly within Contact Us button shape */
.home-frame .main-contact-focus::before {
  inset: -2px !important;
  border-radius: 9px !important;
}

.home-frame .main-contact-focus::after {
  left: 16% !important;
  right: 16% !important;
  bottom: 4px !important;
}


/* PROFESSIONAL HEADER CONTACT OVERLAY - code layer, no image patching */
.home-frame,
.same-header {
  position: relative;
}

/* This bar intentionally covers the old import line with a clean corporate contact strip */
.header-contact-overlay {
  position: absolute;
  left: 23.4%;
  top: 11.25%;
  width: 43.2%;
  min-height: 28px;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 6px 16px;
  border-radius: 999px;
  color: #ffffff;
  font-family: Arial, Tahoma, sans-serif;
  font-size: 13.5px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .15px;
  white-space: nowrap;
  background:
    linear-gradient(135deg, rgba(7,135,247,.96), rgba(116,36,215,.88));
  border: 1px solid rgba(255,255,255,.34);
  box-shadow:
    0 8px 22px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.24);
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
}

.header-contact-overlay .contact-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.header-contact-overlay .contact-icon {
  font-size: 15px;
  color: #ffffff;
  line-height: 1;
}

.header-contact-overlay .contact-separator {
  width: 1px;
  height: 15px;
  background: rgba(255,255,255,.58);
  flex: 0 0 auto;
}

/* Inner-page header is a crop, so same original y position equals larger percentage */
.same-header .header-contact-overlay {
  top: 57.0%;
  left: 23.4%;
  width: 43.2%;
}

/* Keep overlay above image but below nav hotspots if overlapping */
.header-contact-overlay {
  pointer-events: none;
}

/* Responsive: hide overlay when the image becomes horizontally scrollable */
@media(max-width: 900px) {
  .header-contact-overlay {
    display: none;
  }
}


/* PREMIUM GLOBAL GLOW SYSTEM - SARL OPTREND blue/purple */
:root {
  --optrend-blue: #0787f7;
  --optrend-purple: #7424d7;
  --optrend-green: #25d366;
}

/* Header phone/email contact bar glow */
.header-contact-overlay {
  animation: optContactPulse 3s ease-in-out infinite;
  overflow: hidden;
}

.header-contact-overlay::after {
  content: "";
  position: absolute;
  inset: -80% -30%;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.38), transparent 65%);
  transform: translateX(-120%) rotate(12deg);
  transition: transform .75s ease;
  pointer-events: none;
}

.header-contact-overlay:hover {
  box-shadow:
    0 0 0 3px rgba(255,255,255,.18),
    0 0 26px rgba(7,135,247,.75),
    0 0 42px rgba(116,36,215,.48),
    inset 0 1px 0 rgba(255,255,255,.30);
}

.header-contact-overlay:hover::after {
  transform: translateX(120%) rotate(12deg);
}

/* Main Home button glow: Our Products + Contact Us */
.home-frame .main-products-focus::before,
.home-frame .main-contact-focus::before {
  box-shadow:
    0 0 0 1px rgba(7,135,247,.45),
    0 0 18px rgba(7,135,247,.75),
    0 0 28px rgba(116,36,215,.45) !important;
}

.home-frame .main-products-focus::before {
  animation: refinedFocusPulse 2.6s ease-in-out infinite;
}

.home-frame .main-contact-focus::before {
  animation: refinedFocusPulseSoft 3.2s ease-in-out infinite;
}

.home-frame .main-products-focus:hover::before,
.home-frame .main-products-focus:focus-visible::before,
.home-frame .main-contact-focus:hover::before,
.home-frame .main-contact-focus:focus-visible::before {
  animation: none !important;
}

/* Product strip buttons and Read More focus areas */
.home-frame .product-tricone-focus::before,
.home-frame .product-hammer-focus::before,
.home-frame .product-pump-focus::before,
.home-frame .product-tubing-focus::before,
.home-frame .read-more-focus::before {
  box-shadow:
    0 0 0 1px rgba(7,135,247,.38),
    0 0 14px rgba(7,135,247,.58),
    0 0 24px rgba(116,36,215,.38);
}

.home-frame .product-tricone-focus:hover::before,
.home-frame .product-hammer-focus:hover::before,
.home-frame .product-pump-focus:hover::before,
.home-frame .product-tubing-focus:hover::before,
.home-frame .read-more-focus:hover::before {
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* Regular coded buttons throughout pages */
.btn,
.card a,
.product-family-nav a,
.contact-form-grid button,
.brand-card-logo,
.real-product-card,
.model-card {
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.btn:hover,
.card a:hover,
.product-family-nav a:hover,
.contact-form-grid button:hover {
  transform: translateY(-3px);
  box-shadow:
    0 14px 34px rgba(7,135,247,.35),
    0 0 28px rgba(116,36,215,.28);
  filter: brightness(1.05);
}

.brand-card-logo:hover,
.real-product-card:hover,
.model-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 26px 70px rgba(0,0,0,.36),
    0 0 22px rgba(7,135,247,.22),
    0 0 32px rgba(116,36,215,.18);
}

/* Floating WhatsApp and Facebook premium pulse */
.socials .wa {
  animation: optWhatsAppPulse 2.2s ease-in-out infinite !important;
}

.socials .fb {
  animation: optFacebookPulse 2.6s ease-in-out infinite !important;
}

.socials .wa:hover,
.socials .fb:hover {
  transform: scale(1.08);
}

.socials .wa:hover {
  box-shadow:
    0 0 0 5px rgba(37,211,102,.25),
    0 0 28px rgba(37,211,102,.85),
    0 12px 30px rgba(0,0,0,.35);
}

.socials .fb:hover {
  box-shadow:
    0 0 0 5px rgba(7,135,247,.22),
    0 0 28px rgba(7,135,247,.80),
    0 12px 30px rgba(0,0,0,.35);
}

/* Contact page icon cards glow */
.contact-icon-card {
  transition: transform .22s ease, box-shadow .22s ease;
}

.contact-icon-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 26px 70px rgba(7,24,62,.24),
    0 0 24px rgba(7,135,247,.22),
    0 0 32px rgba(116,36,215,.18);
}

.contact-icon-circle {
  animation: optIconPulse 3.4s ease-in-out infinite;
}

/* Keyframes */
@keyframes optContactPulse {
  0%, 100% {
    box-shadow:
      0 8px 22px rgba(0,0,0,.20),
      0 0 0 0 rgba(7,135,247,0),
      inset 0 1px 0 rgba(255,255,255,.24);
  }
  50% {
    box-shadow:
      0 8px 22px rgba(0,0,0,.20),
      0 0 22px rgba(7,135,247,.42),
      0 0 34px rgba(116,36,215,.28),
      inset 0 1px 0 rgba(255,255,255,.24);
  }
}

@keyframes refinedFocusPulseSoft {
  0%, 100% {
    opacity: 0;
    transform: scale(.96);
  }
  48% {
    opacity: .52;
    transform: scale(1);
  }
}

@keyframes optWhatsAppPulse {
  0% {
    box-shadow:
      0 10px 28px rgba(0,0,0,.38),
      0 0 0 0 rgba(37,211,102,.45);
  }
  70% {
    box-shadow:
      0 10px 28px rgba(0,0,0,.38),
      0 0 0 16px rgba(37,211,102,0);
  }
  100% {
    box-shadow:
      0 10px 28px rgba(0,0,0,.38),
      0 0 0 0 rgba(37,211,102,0);
  }
}

@keyframes optFacebookPulse {
  0% {
    box-shadow:
      0 10px 28px rgba(0,0,0,.38),
      0 0 0 0 rgba(7,135,247,.38);
  }
  70% {
    box-shadow:
      0 10px 28px rgba(0,0,0,.38),
      0 0 0 15px rgba(7,135,247,0);
  }
  100% {
    box-shadow:
      0 10px 28px rgba(0,0,0,.38),
      0 0 0 0 rgba(7,135,247,0);
  }
}

@keyframes optIconPulse {
  0%, 100% {
    box-shadow:
      0 16px 42px rgba(7,135,247,.25),
      0 0 0 0 rgba(7,135,247,0);
  }
  55% {
    box-shadow:
      0 16px 42px rgba(7,135,247,.25),
      0 0 0 10px rgba(7,135,247,.12);
  }
}


/* Professional About Us Page */
.about-intro {
  max-width: 1350px;
  margin: 0 auto;
  padding: 60px 40px 30px;
}

.about-intro-card {
  background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 26px;
  padding: 38px;
  box-shadow: 0 24px 70px rgba(0,0,0,.25);
}

.about-intro-card h2,
.about-section-title {
  color: #2aa9ff;
  margin-top: 0;
}

.about-intro-card p {
  color: #e9f3ff;
  line-height: 1.8;
  font-size: 17px;
}

.about-highlight-grid {
  max-width: 1350px;
  margin: 0 auto;
  padding: 25px 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.about-highlight {
  background: #ffffff;
  color: #07183e;
  border-radius: 22px;
  padding: 28px;
  box-shadow: 0 22px 60px rgba(0,0,0,.28);
  transition: transform .22s ease, box-shadow .22s ease;
}

.about-highlight:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 70px rgba(0,0,0,.32), 0 0 24px rgba(7,135,247,.22);
}

.about-highlight .icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #0787f7, #7424d7);
  color: #fff;
  font-size: 25px;
  margin-bottom: 18px;
  box-shadow: 0 14px 35px rgba(7,135,247,.25);
}

.about-highlight h3 {
  color: #062b70;
  margin: 0 0 10px;
}

.about-highlight p,
.about-highlight li {
  color: #5c6c88;
  line-height: 1.6;
}

.about-supply-section {
  max-width: 1350px;
  margin: 0 auto;
  padding: 40px;
}

.about-supply-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.about-supply-card {
  background: #ffffff;
  color: #07183e;
  border-radius: 22px;
  padding: 24px;
  box-shadow: 0 22px 60px rgba(0,0,0,.28);
  min-height: 270px;
}

.about-supply-card h3 {
  color: #062b70;
  margin-top: 0;
}

.about-supply-card ul {
  padding-left: 18px;
}

.about-supply-card li {
  color: #5c6c88;
  line-height: 1.65;
  margin-bottom: 6px;
}

.about-brand-row {
  max-width: 1350px;
  margin: 0 auto;
  padding: 30px 40px;
}

.about-brand-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.about-brand-box {
  background: #ffffff;
  border-radius: 18px;
  min-height: 125px;
  display: grid;
  place-items: center;
  padding: 16px;
  box-shadow: 0 18px 45px rgba(0,0,0,.25);
  text-align: center;
  font-weight: 900;
  color: #062b70;
}

.about-brand-box img {
  max-width: 100%;
  max-height: 72px;
  object-fit: contain;
}

.about-mission-vision {
  max-width: 1350px;
  margin: 0 auto;
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.about-dark-card {
  background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 24px 70px rgba(0,0,0,.25);
}

.about-dark-card h3 {
  color: #2aa9ff;
  margin-top: 0;
}

.about-dark-card p {
  color: #e9f3ff;
  line-height: 1.75;
}

.about-cta {
  max-width: 1350px;
  margin: 20px auto 70px;
  padding: 0 40px;
}

.about-cta-inner {
  border-radius: 26px;
  padding: 36px;
  background: linear-gradient(135deg, #0787f7, #7424d7);
  box-shadow: 0 26px 80px rgba(7,135,247,.30);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
}

.about-cta-inner h2 {
  margin: 0 0 10px;
}

.about-cta-inner p {
  margin: 0;
  line-height: 1.65;
}

.about-cta-inner a {
  flex: 0 0 auto;
  color: #ffffff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 10px;
  padding: 14px 22px;
  font-weight: 900;
  box-shadow: 0 14px 35px rgba(0,0,0,.18);
}

@media(max-width: 1100px) {
  .about-highlight-grid,
  .about-supply-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .about-brand-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .about-mission-vision {
    grid-template-columns: 1fr;
  }
  .about-cta-inner {
    flex-direction: column;
    text-align: center;
  }
}

@media(max-width: 650px) {
  .about-highlight-grid,
  .about-supply-grid,
  .about-brand-grid {
    grid-template-columns: 1fr;
  }
}


/* About page header identical to Home page */
.about-intro {
  padding-top: 46px !important;
}

.about-intro-card {
  position: relative;
  overflow: hidden;
}

.about-intro-card::before {
  content: "ABOUT SARL OPTREND";
  display: block;
  color: #8fd3ff;
  font-weight: 900;
  letter-spacing: .12em;
  font-size: 13px;
  margin-bottom: 12px;
}


/* =========================
   FINAL HOSTING + ANIMATION UPGRADE
   ========================= */
.site-loader{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  background:radial-gradient(circle at center, rgba(7,135,247,.18), transparent 34%), #061a3a;
  transition:opacity .45s ease, visibility .45s ease;
}
.site-loader span{
  width:54px;
  height:54px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.22);
  border-top-color:#0787f7;
  border-right-color:#7424d7;
  animation:loaderSpin .8s linear infinite;
  box-shadow:0 0 35px rgba(7,135,247,.35);
}
body.is-loaded .site-loader{opacity:0;visibility:hidden;pointer-events:none}
body{opacity:1;transition:opacity .22s ease}
body.page-leaving{opacity:.92}

.hotspot,
.home-focus-zone,
.about-cta-inner a,
.card,
.panel,
.real-product-card,
.model-card,
.brand-mini-card,
.contact-icon-card,
.contact-form-card{
  will-change:transform, box-shadow;
}

.home-focus-zone,
.about-cta-inner a,
.source-link,
.socials a,
.wa,
.fb{
  transition:transform .22s ease, filter .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.home-focus-zone:hover,
.about-cta-inner a:hover,
.source-link:hover,
.socials a:hover,
.wa:hover,
.fb:hover{
  transform:translateY(-2px) scale(1.02);
  filter:brightness(1.1);
}
.home-focus-zone:focus-visible,
.hotspot:focus-visible,
.about-cta-inner a:focus-visible,
.source-link:focus-visible,
.socials a:focus-visible{
  outline:3px solid rgba(7,135,247,.95);
  outline-offset:4px;
}

.card:hover,
.panel:hover,
.about-highlight:hover,
.about-supply-card:hover,
.about-dark-card:hover,
.about-brand-box:hover,
.real-product-card:hover,
.model-card:hover,
.supplier-box:hover,
.brand-mini-card:hover,
.brand-detail:hover,
.contact-icon-card:hover,
.contact-form-card:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 75px rgba(7,135,247,.18), 0 0 0 1px rgba(255,255,255,.08) inset;
}

.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

.page-hero::after{
  content:"";
  position:absolute;
  inset:-35%;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.08) 48%, transparent 60%);
  transform:translateX(-45%);
  animation:heroShine 7s ease-in-out infinite;
  pointer-events:none;
}

.header-contact-overlay,
.home-whatsapp{
  backface-visibility:hidden;
}
.header-contact-overlay{
  animation:softGlow 3.5s ease-in-out infinite;
}

@keyframes loaderSpin{to{transform:rotate(360deg)}}
@keyframes heroShine{0%,60%,100%{transform:translateX(-45%)}80%{transform:translateX(45%)}}
@keyframes softGlow{0%,100%{box-shadow:0 0 20px rgba(7,135,247,.28)}50%{box-shadow:0 0 34px rgba(116,36,215,.42)}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
  .reveal{opacity:1!important;transform:none!important}
  .site-loader{display:none!important}
}


/* Professional functional bilingual Arabic/English switch
   Positioned inside the header in the exact right-side dashboard area.
   The old bitmap buttons have been removed from the header artwork. */
.language-switch{
  position:absolute;
  z-index:30;
  display:flex;
  align-items:center;
  gap:6px;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
  direction:ltr;
}
.home-frame .language-switch{top:16.4%;right:7.25%;transform:translateY(-50%)}
.same-header .language-switch{top:84%;right:7.25%;transform:translateY(-50%)}
.language-switch button{
  min-width:78px;
  height:39px;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.16);
  border-radius:9px;
  padding:0 16px;
  color:#fff;
  background:linear-gradient(135deg,#0787f7,#086ce0);
  font-weight:900;
  font-size:14px;
  letter-spacing:.02em;
  box-shadow:0 10px 24px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .18s ease, filter .18s ease, box-shadow .18s ease, background .18s ease;
}
.language-switch button[data-lang="ar"]{
  min-width:92px;
  background:linear-gradient(135deg,#822bea,#631bd0);
  font-family:Tahoma, Arial, sans-serif;
}
.language-switch button:hover{transform:translateY(-1px);filter:brightness(1.08)}
.language-switch button.active{
  box-shadow:0 0 0 2px rgba(255,255,255,.18), 0 12px 28px rgba(7,135,247,.35);
}
.language-switch button[aria-pressed="false"]{opacity:.86}
html[dir="rtl"] .home-frame .language-switch,
html[dir="rtl"] .same-header .language-switch{left:auto;right:7.25%;direction:ltr}
@media (max-width:760px){
  .home-frame .language-switch{top:16.4%;right:5.6%;transform:translateY(-50%) scale(.86);transform-origin:right center}
  .same-header .language-switch{top:84%;right:5.6%;transform:translateY(-50%) scale(.86);transform-origin:right center}
}

html[dir="rtl"] body{
  font-family:Tahoma, Arial, sans-serif;
  text-align:right;
}
html[dir="rtl"] .grid,
html[dir="rtl"] .about-highlight-grid,
html[dir="rtl"] .about-supply-grid,
html[dir="rtl"] .about-brand-grid,
html[dir="rtl"] .about-mission-vision,
html[dir="rtl"] .contact-grid,
html[dir="rtl"] .brand-grid{direction:rtl}
html[dir="rtl"] .card,
html[dir="rtl"] .panel,
html[dir="rtl"] .about-intro-card,
html[dir="rtl"] .about-highlight,
html[dir="rtl"] .about-supply-card,
html[dir="rtl"] .about-dark-card,
html[dir="rtl"] .contact-form-card,
html[dir="rtl"] .contact-icon-card{text-align:right}
html[dir="rtl"] ul{padding-right:1.2rem;padding-left:0}
html[dir="rtl"] input,
html[dir="rtl"] textarea{text-align:right;direction:rtl}
.arabic-home-copy{
  display:none;
  position:absolute;
  left:7%;
  right:7%;
  bottom:9%;
  z-index:12;
  max-width:680px;
  padding:22px 26px;
  border-radius:24px;
  color:#fff;
  background:linear-gradient(135deg,rgba(4,15,38,.86),rgba(116,36,215,.58));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 24px 70px rgba(0,0,0,.28);
  backdrop-filter:blur(12px);
}
.arabic-home-copy h1{margin:0 0 8px;font-size:clamp(22px,3vw,42px)}
.arabic-home-copy p{margin:0 0 14px;line-height:1.8;font-size:clamp(14px,1.5vw,18px)}
.arabic-home-copy a{display:inline-flex;text-decoration:none;color:#fff;background:linear-gradient(135deg,#0787f7,#7424d7);padding:11px 18px;border-radius:999px;font-weight:800}
html[dir="rtl"] .arabic-home-copy{display:block;direction:rtl;text-align:right}
@media (max-width:700px){
  .arabic-home-copy{left:4%;right:4%;bottom:5%;padding:16px}
}

/* Professional Arabic dashboard/navigation overlay
   This is a clean code layer that translates the bitmap header dashboard without patching the image. */
.dashboard-translation-overlay{
  position:absolute;
  z-index:28;
  display:none;
  align-items:center;
  gap:12px;
  direction:rtl;
  padding:0 5.3%;
  background:linear-gradient(180deg,rgba(5,18,47,.98),rgba(4,14,37,.98));
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(7,135,247,.45);
  box-shadow:0 10px 28px rgba(0,0,0,.18), inset 0 -1px 0 rgba(116,36,215,.35);
}
.home-frame .dashboard-translation-overlay{left:0;right:0;top:13.25%;height:6.25%}
.same-header .dashboard-translation-overlay{left:0;right:0;top:67.5%;height:32.5%}
html[dir="rtl"] .dashboard-translation-overlay{display:flex}
.dashboard-translation-overlay a{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:100%;
  padding:0 16px;
  color:#ffffff;
  text-decoration:none;
  font-family:Tahoma, Arial, sans-serif;
  font-size:clamp(12px,1.05vw,16px);
  font-weight:900;
  letter-spacing:0;
  white-space:nowrap;
  border-radius:10px;
  transition:background .2s ease, transform .2s ease, color .2s ease;
}
.dashboard-translation-overlay a::after{
  content:"";
  position:absolute;
  right:16px;
  left:16px;
  bottom:6px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,#0787f7,#7424d7);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .2s ease;
  box-shadow:0 0 12px rgba(7,135,247,.75);
}
.dashboard-translation-overlay a:hover,
.dashboard-translation-overlay a:focus-visible,
.dashboard-translation-overlay a.active{
  background:rgba(255,255,255,.06);
  color:#cfeeff;
  transform:translateY(-1px);
}
.dashboard-translation-overlay a:hover::after,
.dashboard-translation-overlay a:focus-visible::after,
.dashboard-translation-overlay a.active::after{transform:scaleX(1)}
html[dir="rtl"] .hotspot.nav-home,
html[dir="rtl"] .hotspot.nav-about,
html[dir="rtl"] .hotspot.nav-products,
html[dir="rtl"] .hotspot.nav-brands,
html[dir="rtl"] .hotspot.nav-services,
html[dir="rtl"] .hotspot.nav-contact{display:none}
@media(max-width:900px){
  .dashboard-translation-overlay{padding:0 22px;gap:6px;overflow-x:auto;scrollbar-width:none}
  .dashboard-translation-overlay::-webkit-scrollbar{display:none}
  .dashboard-translation-overlay a{padding:0 12px;font-size:13px;flex:0 0 auto}
}

/* Final professional language switch positioning
   Keeps EN / العربية controls away from translated dashboard navigation. */
.language-switch{
  position:absolute !important;
  z-index:45 !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:4px !important;
  padding:4px !important;
  background:rgba(5,18,47,.74) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:999px !important;
  box-shadow:0 10px 26px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.12) !important;
  backdrop-filter:blur(10px) !important;
  direction:ltr !important;
}
.home-frame .language-switch{
  top:7.6% !important;
  right:5.6% !important;
  left:auto !important;
  transform:none !important;
}
.same-header .language-switch{
  top:30% !important;
  right:5.6% !important;
  left:auto !important;
  transform:none !important;
}
html[dir="rtl"] .home-frame .language-switch{
  left:5.6% !important;
  right:auto !important;
}
html[dir="rtl"] .same-header .language-switch{
  left:5.6% !important;
  right:auto !important;
}
.language-switch button{
  min-width:54px !important;
  height:30px !important;
  border-radius:999px !important;
  padding:0 12px !important;
  font-size:12px !important;
  line-height:30px !important;
  box-shadow:none !important;
}
.language-switch button[data-lang="ar"]{
  min-width:70px !important;
}
html[dir="rtl"] .dashboard-translation-overlay{
  z-index:32 !important;
}
html[dir="rtl"] .home-frame .dashboard-translation-overlay,
html[dir="rtl"] .same-header .dashboard-translation-overlay{
  padding-inline-start:5.3% !important;
  padding-inline-end:5.3% !important;
}
@media (max-width:900px){
  .home-frame .language-switch,
  .same-header .language-switch{
    top:10px !important;
    right:14px !important;
    left:auto !important;
    transform:scale(.92) !important;
    transform-origin:top right !important;
  }
  html[dir="rtl"] .home-frame .language-switch,
  html[dir="rtl"] .same-header .language-switch{
    left:14px !important;
    right:auto !important;
    transform-origin:top left !important;
  }
}

/* FINAL FIX: Language switcher placed in a reserved top strip above the artwork.
   It no longer overlaps the logo, slogan, dashboard menu, or any text/buttons. */
.home-frame,
.same-header{
  margin-top:56px !important;
}
.language-switch{
  position:absolute !important;
  top:-46px !important;
  right:clamp(14px,3vw,42px) !important;
  left:auto !important;
  transform:none !important;
  z-index:80 !important;
  height:38px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  padding:4px !important;
  background:linear-gradient(135deg,rgba(4,16,42,.98),rgba(9,33,82,.96)) !important;
  border:1px solid rgba(255,255,255,.20) !important;
  border-radius:999px !important;
  box-shadow:0 10px 26px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12) !important;
  backdrop-filter:blur(10px) !important;
  direction:ltr !important;
}
html[dir="rtl"] .home-frame .language-switch,
html[dir="rtl"] .same-header .language-switch{
  left:clamp(14px,3vw,42px) !important;
  right:auto !important;
  top:-46px !important;
}
.language-switch button{
  height:30px !important;
  min-width:58px !important;
  line-height:30px !important;
  border-radius:999px !important;
  padding:0 13px !important;
  font-size:12px !important;
  font-weight:900 !important;
  white-space:nowrap !important;
}
.language-switch button[data-lang="ar"]{
  min-width:82px !important;
}
@media (max-width:900px){
  .home-frame,
  .same-header{
    margin-top:54px !important;
  }
  .home-frame .language-switch,
  .same-header .language-switch,
  html[dir="rtl"] .home-frame .language-switch,
  html[dir="rtl"] .same-header .language-switch{
    top:-44px !important;
    right:12px !important;
    left:auto !important;
    transform:none !important;
    transform-origin:center !important;
  }
  html[dir="rtl"] .home-frame .language-switch,
  html[dir="rtl"] .same-header .language-switch{
    left:12px !important;
    right:auto !important;
  }
}

/* FINAL STABLE POSITION: keep language switcher in the exact same place in English and Arabic. */
.home-frame .language-switch,
.same-header .language-switch,
html[dir="rtl"] .home-frame .language-switch,
html[dir="rtl"] .same-header .language-switch{
  top:-46px !important;
  right:clamp(14px,3vw,42px) !important;
  left:auto !important;
  transform:none !important;
  transform-origin:center !important;
  direction:ltr !important;
}
@media (max-width:900px){
  .home-frame .language-switch,
  .same-header .language-switch,
  html[dir="rtl"] .home-frame .language-switch,
  html[dir="rtl"] .same-header .language-switch{
    top:-44px !important;
    right:12px !important;
    left:auto !important;
    transform:none !important;
    transform-origin:center !important;
  }
}


/* ================= FINAL PRODUCTION ENHANCEMENTS =================
   Arabic-first bilingual launch version: stable language switcher,
   2026 footer, modern interactions, responsive and non-overlapping UI. */
:root{
  --opt-blue:#061a3a;
  --opt-cyan:#0bd3d3;
  --opt-purple:#7a35ff;
  --opt-gold:#f4c35b;
  --opt-card:rgba(255,255,255,.92);
}
html{scroll-behavior:smooth;}
body{
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
html[dir="rtl"] body{
  font-family:"Tajawal","Cairo",Arial,sans-serif;
}
.site-loader{
  position:fixed;inset:0;z-index:9999;
  display:grid;place-items:center;
  background:radial-gradient(circle at center,#092455 0%,#061a3a 55%,#020817 100%);
  transition:opacity .55s ease,visibility .55s ease;
}
.site-loader span{
  width:48px;height:48px;border-radius:999px;
  border:4px solid rgba(255,255,255,.22);
  border-top-color:var(--opt-cyan);
  animation:optSpin .9s linear infinite;
}
body.is-loaded .site-loader{opacity:0;visibility:hidden;pointer-events:none;}
@keyframes optSpin{to{transform:rotate(360deg)}}

/* Fixed safe top language switcher: same position in Arabic and English */
.home-frame,.same-header{margin-top:58px!important;}
.language-switch,
.home-frame .language-switch,
.same-header .language-switch,
html[dir="rtl"] .home-frame .language-switch,
html[dir="rtl"] .same-header .language-switch{
  position:absolute!important;
  top:-48px!important;
  right:clamp(14px,3vw,42px)!important;
  left:auto!important;
  transform:none!important;
  z-index:120!important;
  height:40px!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  padding:5px!important;
  direction:rtl!important;
  background:linear-gradient(135deg,rgba(5,21,55,.98),rgba(9,39,91,.95))!important;
  border:1px solid rgba(255,255,255,.22)!important;
  border-radius:999px!important;
  box-shadow:0 12px 30px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.14)!important;
  backdrop-filter:blur(12px)!important;
}
.language-switch button{
  height:30px!important;
  min-width:58px!important;
  border:0!important;
  border-radius:999px!important;
  padding:0 14px!important;
  font-size:12px!important;
  font-weight:900!important;
  cursor:pointer!important;
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease,opacity .22s ease!important;
}
.language-switch button[data-lang="ar"]{min-width:86px!important;}
.language-switch button:hover{transform:translateY(-1px)!important;}
.language-switch button.active,
.language-switch button[aria-pressed="true"]{
  background:linear-gradient(135deg,var(--opt-cyan),var(--opt-purple))!important;
  color:#fff!important;
  box-shadow:0 8px 20px rgba(11,211,211,.22)!important;
}
.language-switch button[aria-pressed="false"]{background:rgba(255,255,255,.10)!important;color:#fff!important;opacity:.82!important;}

/* Arabic dashboard overlay sits on navigation only, never on logo/slogan */
html[dir="rtl"] .dashboard-translation-overlay{display:flex!important;direction:rtl!important;}
.dashboard-translation-overlay a{
  transition:background .24s ease,color .24s ease,transform .24s ease,box-shadow .24s ease!important;
}
.dashboard-translation-overlay a:hover,
.dashboard-translation-overlay a.active{
  transform:translateY(-1px)!important;
  box-shadow:0 8px 18px rgba(0,0,0,.10)!important;
}

/* Arabic home overlay makes the bitmap homepage professionally readable in Arabic */
.arabic-home-copy{
  border:1px solid rgba(255,255,255,.20)!important;
  background:linear-gradient(135deg,rgba(2,13,35,.88),rgba(8,35,86,.72))!important;
  box-shadow:0 20px 55px rgba(0,0,0,.26)!important;
  backdrop-filter:blur(10px)!important;
  animation:optFloatIn .8s cubic-bezier(.2,.8,.2,1) both;
}
html[dir="rtl"] .arabic-home-copy{display:block!important;}
html[dir="ltr"] .arabic-home-copy{display:none!important;}
.arabic-home-copy a{transition:transform .22s ease,box-shadow .22s ease!important;}
.arabic-home-copy a:hover{transform:translateY(-2px)!important;box-shadow:0 12px 25px rgba(7,135,247,.24)!important;}
@keyframes optFloatIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}

/* Modern cards/buttons animation */
a,button,.card,.panel,.real-product-card,.model-card,.supplier-box,.brand-mini-card,.brand-detail,.contact-icon-card,.about-highlight{
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,filter .25s ease;
}
.card:hover,.panel:hover,.real-product-card:hover,.model-card:hover,.supplier-box:hover,.brand-mini-card:hover,.brand-detail:hover,.contact-icon-card:hover,.about-highlight:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 45px rgba(6,26,58,.14);
}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.2,1);}
.reveal.is-visible{opacity:1;transform:none;}
.page-leaving{opacity:.88;transition:opacity .18s ease;}
footer{direction:ltr;text-align:center;}
html[dir="rtl"] footer{direction:rtl;}
@media (max-width:900px){
  .home-frame,.same-header{margin-top:56px!important;}
  .language-switch,
  .home-frame .language-switch,
  .same-header .language-switch,
  html[dir="rtl"] .home-frame .language-switch,
  html[dir="rtl"] .same-header .language-switch{
    top:-46px!important;
    right:12px!important;
    left:auto!important;
    height:38px!important;
  }
  .language-switch button{height:28px!important;font-size:11px!important;padding:0 12px!important;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}

/* =========================
   MOBILE RESPONSIVE HOTFIX
   Fixes phone display: no horizontal 1600px scrolling, readable mobile menu,
   clean Arabic/English switch and optimized cards/sections.
   ========================= */
html, body { max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; }
.mobile-nav { display: none; }

@media (max-width: 900px) {
  body { background: #061a3a; }
  .home-frame, .same-header {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 58px !important;
    overflow: visible !important;
  }
  .home-frame img,
  .home-frame img.home,
  .same-header img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  .home-frame .language-switch,
  .same-header .language-switch,
  html[dir="rtl"] .home-frame .language-switch,
  html[dir="rtl"] .same-header .language-switch {
    position: absolute !important;
    top: -49px !important;
    right: 12px !important;
    left: auto !important;
    height: 40px !important;
    transform: none !important;
    z-index: 200 !important;
  }
  .language-switch button {
    min-width: 54px !important;
    height: 30px !important;
    font-size: 12px !important;
    padding: 0 12px !important;
  }
  .language-switch button[data-lang="ar"] { min-width: 82px !important; }

  .mobile-nav {
    display: flex !important;
    gap: 8px;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(5,18,47,.98), rgba(9,33,82,.98));
    border-top: 1px solid rgba(255,255,255,.10);
    border-bottom: 1px solid rgba(11,211,211,.28);
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
    position: relative;
    z-index: 150;
    direction: inherit;
  }
  .mobile-nav::-webkit-scrollbar { display: none; }
  .mobile-nav a {
    flex: 0 0 auto;
    color: #fff;
    text-decoration: none;
    font-weight: 900;
    font-size: 13px;
    padding: 10px 13px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    white-space: nowrap;
  }
  .mobile-nav a.active {
    background: linear-gradient(135deg, #0787f7, #7424d7);
    box-shadow: 0 8px 20px rgba(7,135,247,.25);
  }

  .dashboard-translation-overlay,
  .header-contact-overlay,
  .home-focus-zone,
  .hotspot.nav-home,
  .hotspot.nav-about,
  .hotspot.nav-products,
  .hotspot.nav-brands,
  .hotspot.nav-services,
  .hotspot.nav-contact {
    display: none !important;
  }

  .arabic-home-copy,
  html[dir="rtl"] .arabic-home-copy,
  html[dir="ltr"] .arabic-home-copy {
    display: block !important;
    position: static !important;
    max-width: none !important;
    margin: 14px 12px 20px !important;
    padding: 18px !important;
    border-radius: 18px !important;
    transform: none !important;
  }
  html[dir="ltr"] .arabic-home-copy h1,
  html[dir="ltr"] .arabic-home-copy p,
  html[dir="ltr"] .arabic-home-copy a { display: none !important; }

  .page-hero { min-height: auto !important; }
  .page-hero::before { opacity: .22; width: 190px; height: 190px; right: -30px; top: 10px; }
  .page-hero-inner { padding: 34px 18px !important; }
  .page-hero h1 { font-size: 30px !important; line-height: 1.18 !important; }
  .page-hero p { font-size: 15px !important; line-height: 1.7 !important; }

  .section,
  .product-detail-wide,
  .supplier-hero-card,
  .brand-section-block,
  .real-banner,
  .about-intro,
  .about-highlight-grid,
  .about-supply-section,
  .about-brand-row,
  .about-mission-vision,
  .about-cta,
  .contact-icon-grid,
  .contact-page-main {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .grid,
  .product-detail,
  .brand-product-grid,
  .catalogue-gallery,
  .brand-mini-grid,
  .product-photo-grid,
  .dual-table,
  .product-model-grid,
  .real-product-grid,
  .great-gallery-grid,
  .great-application-grid,
  .contact-icon-grid,
  .contact-page-main,
  .about-highlight-grid,
  .about-supply-grid,
  .about-brand-grid,
  .about-mission-vision {
    grid-template-columns: 1fr !important;
  }
  .card, .panel, .about-intro-card, .about-highlight, .about-supply-card, .about-dark-card,
  .contact-icon-card, .contact-form-card, .contact-map-card, .supplier-box, .brand-detail,
  .brand-mini-card, .model-card, .real-product-card {
    border-radius: 16px !important;
    padding: 20px !important;
  }
  .brand-detail { display: grid !important; grid-template-columns: 1fr !important; }
  .contact-form-grid { grid-template-columns: 1fr !important; }
  .contact-map-placeholder { min-height: 240px !important; }
  .visual { min-height: 240px !important; }
  .catalogue-card img, .product-photo img, .great-gallery-card .great-img, .real-product-card .img-wrap { height: auto !important; min-height: 190px; }
  .socials { right: 14px !important; left: auto !important; bottom: 14px !important; gap: 8px !important; }
  html[dir="rtl"] .socials { left: 14px !important; right: auto !important; }
  .socials a { width: 48px !important; height: 48px !important; }
  footer { padding: 18px 12px !important; font-size: 13px !important; }
}

@media (max-width: 420px) {
  .mobile-nav a { font-size: 12px; padding: 9px 11px; }
  .page-hero h1 { font-size: 26px !important; }
  .language-switch button { font-size: 11px !important; padding: 0 10px !important; }
}

/* =========================
   REAL PHONE LAYOUT FIX v2
   Replaces the desktop screenshot homepage/header with real responsive mobile HTML.
   ========================= */
@media (max-width: 900px) {
  html, body { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; }
  body { background:#061a3a !important; }

  .home-frame,
  .same-header {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 54px 0 0 !important;
    padding: 0 0 18px !important;
    overflow: visible !important;
    background: linear-gradient(180deg,#071f4d 0%,#061a3a 100%) !important;
  }

  /* Hide the full desktop design image on phone. It is not responsive as a navigation/header. */
  .home-frame > img.home,
  .same-header > img,
  .home-frame > img[src*="homepage-design"],
  .same-header > img[src*="approved-home-header"] {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
  }

  .home-frame::before,
  .same-header::before {
    content: "SARL OPTREND";
    display: block;
    width: 100%;
    padding: 18px 16px 12px;
    text-align: center;
    color: #fff;
    font-weight: 950;
    font-size: 23px;
    line-height: 1.2;
    letter-spacing: .5px;
    background:
      radial-gradient(circle at 15% 0%, rgba(11,211,211,.22), transparent 30%),
      radial-gradient(circle at 85% 20%, rgba(122,53,255,.28), transparent 34%),
      linear-gradient(135deg,#061a3a,#092f72);
    border-bottom: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 8px 22px rgba(0,0,0,.25);
  }

  .language-switch,
  .home-frame .language-switch,
  .same-header .language-switch,
  html[dir="rtl"] .home-frame .language-switch,
  html[dir="rtl"] .same-header .language-switch {
    position: fixed !important;
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
    transform: none !important;
    z-index: 9999 !important;
    height: 38px !important;
    max-width: calc(100vw - 16px) !important;
  }

  .mobile-nav {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px !important;
    padding: 10px 10px !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    background: rgba(2,12,32,.96) !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    border-bottom: 1px solid rgba(11,211,211,.28) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,.28) !important;
    position: relative !important;
    z-index: 30 !important;
    white-space: nowrap !important;
  }
  .mobile-nav a {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 900 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    padding: 11px 13px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.09) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
  }
  .mobile-nav a.active {
    background: linear-gradient(135deg,#0787f7,#7424d7) !important;
    box-shadow: 0 8px 18px rgba(7,135,247,.30) !important;
  }

  .hotspot,
  .home-focus-zone,
  .dashboard-translation-overlay,
  .header-contact-overlay {
    display: none !important;
  }

  /* Real readable mobile homepage card */
  .arabic-home-copy,
  html[dir="rtl"] .arabic-home-copy,
  html[dir="ltr"] .arabic-home-copy {
    display: block !important;
    position: static !important;
    width: auto !important;
    max-width: none !important;
    margin: 16px 12px 18px !important;
    padding: 22px 18px !important;
    border-radius: 22px !important;
    text-align: center !important;
    color: #fff !important;
    background:
      radial-gradient(circle at 18% 0%, rgba(11,211,211,.24), transparent 34%),
      radial-gradient(circle at 88% 35%, rgba(122,53,255,.30), transparent 35%),
      linear-gradient(145deg, rgba(7,31,77,.98), rgba(30,13,74,.94)) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.28) !important;
    backdrop-filter: none !important;
    transform: none !important;
  }
  .arabic-home-copy h1 {
    display: block !important;
    margin: 0 0 14px !important;
    font-size: 28px !important;
    line-height: 1.35 !important;
    color: #fff !important;
  }
  .arabic-home-copy p {
    display: block !important;
    margin: 0 0 18px !important;
    font-size: 16px !important;
    line-height: 1.9 !important;
    color: rgba(255,255,255,.92) !important;
  }
  .arabic-home-copy a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 46px !important;
    padding: 0 24px !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 950 !important;
  }

  .section { padding: 28px 14px !important; }
  .grid { gap: 16px !important; }
  .card, .panel { padding: 18px !important; border-radius: 16px !important; }
}

/* =========================================================
   RESPONSIVE FINAL V3 — REAL MOBILE/TABLET LAYOUT
   This section overrides the desktop image-based design on small screens.
   It replaces the fixed desktop artwork with coded responsive blocks.
   ========================================================= */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

@media (max-width: 1024px) {
  body {
    background: #061a3a !important;
  }

  .home-frame,
  .same-header {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 58px 0 0 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: linear-gradient(180deg, #061a3a 0%, #092455 100%) !important;
  }

  /* Kill the desktop artwork on phone/tablet. It is a screenshot-style layout and cannot be responsive. */
  .home-frame > img.home,
  .home-frame > img[src*="homepage-design"],
  .same-header > img,
  .same-header > img[src*="approved-home-header"] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Clean coded mobile brand header */
  .home-frame::before,
  .same-header::before {
    content: "SARL OPTREND";
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 78px;
    padding: 18px 16px;
    color: #fff;
    font-size: clamp(22px, 5vw, 34px);
    font-weight: 950;
    letter-spacing: .5px;
    text-align: center;
    line-height: 1.15;
    background:
      radial-gradient(circle at 12% 5%, rgba(11,211,211,.28), transparent 30%),
      radial-gradient(circle at 86% 20%, rgba(122,53,255,.33), transparent 34%),
      linear-gradient(135deg, #061a3a, #092f72 58%, #24115a);
    border-bottom: 1px solid rgba(255,255,255,.13);
    box-shadow: 0 10px 26px rgba(0,0,0,.30);
  }

  /* Language switch fixed, same place in Arabic and English, never covering content */
  .language-switch,
  .home-frame .language-switch,
  .same-header .language-switch,
  html[dir="rtl"] .home-frame .language-switch,
  html[dir="rtl"] .same-header .language-switch {
    position: fixed !important;
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
    transform: none !important;
    z-index: 99999 !important;
    height: 40px !important;
    max-width: calc(100vw - 16px) !important;
    padding: 5px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    direction: rtl !important;
    background: linear-gradient(135deg, rgba(5,21,55,.98), rgba(9,39,91,.96)) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.32) !important;
    backdrop-filter: blur(8px) !important;
  }
  .language-switch button {
    height: 30px !important;
    min-width: 50px !important;
    padding: 0 11px !important;
    font-size: 12px !important;
    line-height: 30px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }
  .language-switch button[data-lang="ar"] {
    min-width: 78px !important;
  }

  /* Real scrollable mobile nav */
  .mobile-nav {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 11px 10px !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap !important;
    direction: inherit !important;
    background: rgba(2, 12, 32, .97) !important;
    border-bottom: 1px solid rgba(11,211,211,.28) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.30) !important;
    position: relative !important;
    z-index: 50 !important;
  }
  .mobile-nav::-webkit-scrollbar { display: none; }
  .mobile-nav a {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 900 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    padding: 11px 14px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.09) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
  }
  .mobile-nav a.active {
    background: linear-gradient(135deg, #0787f7, #7424d7) !important;
    box-shadow: 0 8px 18px rgba(7,135,247,.30) !important;
  }

  /* Remove all desktop image hotspots/overlays on mobile/tablet */
  .hotspot,
  .home-focus-zone,
  .dashboard-translation-overlay,
  .header-contact-overlay,
  .home-whatsapp,
  .home-facebook,
  .button-products,
  .button-contact {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Home page coded hero card */
  .arabic-home-copy,
  html[dir="rtl"] .arabic-home-copy,
  html[dir="ltr"] .arabic-home-copy {
    display: block !important;
    position: static !important;
    width: auto !important;
    max-width: none !important;
    margin: 16px 14px 24px !important;
    padding: 24px 18px !important;
    border-radius: 22px !important;
    text-align: center !important;
    direction: inherit !important;
    color: #ffffff !important;
    background:
      radial-gradient(circle at 18% 0%, rgba(11,211,211,.24), transparent 34%),
      radial-gradient(circle at 88% 35%, rgba(122,53,255,.30), transparent 35%),
      linear-gradient(145deg, rgba(7,31,77,.98), rgba(30,13,74,.94)) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    box-shadow: 0 16px 38px rgba(0,0,0,.30) !important;
    backdrop-filter: none !important;
    transform: none !important;
  }
  .arabic-home-copy h1,
  .arabic-home-copy p,
  .arabic-home-copy a,
  html[dir="ltr"] .arabic-home-copy h1,
  html[dir="ltr"] .arabic-home-copy p,
  html[dir="ltr"] .arabic-home-copy a {
    display: initial !important;
  }
  .arabic-home-copy h1 {
    display: block !important;
    margin: 0 0 14px !important;
    font-size: clamp(25px, 7vw, 36px) !important;
    line-height: 1.35 !important;
    color: #ffffff !important;
  }
  .arabic-home-copy p {
    display: block !important;
    margin: 0 0 20px !important;
    font-size: 16px !important;
    line-height: 1.9 !important;
    color: rgba(255,255,255,.92) !important;
  }
  .arabic-home-copy a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    padding: 0 24px !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    text-decoration: none !important;
    background: linear-gradient(135deg, #0787f7, #7424d7) !important;
  }

  /* Inner page hero becomes readable */
  .page-hero {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    overflow: hidden !important;
  }
  .page-hero::before {
    width: 180px !important;
    height: 180px !important;
    right: -50px !important;
    top: 10px !important;
    opacity: .24 !important;
  }
  .page-hero-inner {
    padding: 34px 18px !important;
  }
  .page-hero h1 {
    font-size: clamp(27px, 7vw, 42px) !important;
    line-height: 1.18 !important;
    word-break: normal !important;
  }
  .page-hero p {
    font-size: 15px !important;
    line-height: 1.75 !important;
  }

  /* All section/container spacing */
  .section,
  .product-detail-wide,
  .supplier-hero-card,
  .brand-section-block,
  .real-banner,
  .about-intro,
  .about-highlight-grid,
  .about-supply-section,
  .about-brand-row,
  .about-mission-vision,
  .about-cta,
  .contact-icon-grid,
  .contact-page-main {
    width: 100% !important;
    max-width: 100% !important;
    padding: 28px 14px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Single column mobile layout */
  .grid,
  .product-detail,
  .brand-product-grid,
  .catalogue-gallery,
  .brand-mini-grid,
  .product-photo-grid,
  .dual-table,
  .product-model-grid,
  .real-product-grid,
  .great-gallery-grid,
  .great-application-grid,
  .contact-icon-grid,
  .contact-page-main,
  .about-highlight-grid,
  .about-supply-grid,
  .about-brand-grid,
  .about-mission-vision,
  .brand-detail,
  .contact-form-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .card,
  .panel,
  .about-intro-card,
  .about-highlight,
  .about-supply-card,
  .about-dark-card,
  .about-cta-inner,
  .contact-icon-card,
  .contact-form-card,
  .contact-map-card,
  .supplier-box,
  .brand-detail,
  .brand-mini-card,
  .model-card,
  .real-product-card,
  .brand-card-logo,
  .catalogue-card,
  .product-photo,
  .great-gallery-card {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px !important;
    padding: 20px !important;
  }

  .about-cta-inner {
    flex-direction: column !important;
    text-align: center !important;
  }

  .visual,
  .contact-map-placeholder {
    min-height: 230px !important;
  }

  .catalogue-card img,
  .product-photo img,
  .great-gallery-card .great-img,
  .real-product-card .img-wrap {
    height: auto !important;
    min-height: 180px !important;
    max-height: 280px !important;
  }

  .spec-table,
  .compact-spec-table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .socials {
    right: 14px !important;
    left: auto !important;
    bottom: 14px !important;
    gap: 8px !important;
    z-index: 300 !important;
  }
  html[dir="rtl"] .socials {
    left: 14px !important;
    right: auto !important;
  }
  .socials a {
    width: 48px !important;
    height: 48px !important;
  }

  footer {
    width: 100% !important;
    max-width: 100% !important;
    padding: 18px 12px !important;
    font-size: 13px !important;
  }
}

@media (min-width: 701px) and (max-width: 1024px) {
  .home-frame::before,
  .same-header::before {
    min-height: 96px;
    font-size: 34px;
  }
  .mobile-nav {
    justify-content: center !important;
    flex-wrap: wrap !important;
    overflow-x: visible !important;
  }
  .section,
  .product-detail-wide,
  .supplier-hero-card,
  .brand-section-block,
  .real-banner,
  .about-intro,
  .about-highlight-grid,
  .about-supply-section,
  .about-brand-row,
  .about-mission-vision,
  .about-cta,
  .contact-icon-grid,
  .contact-page-main {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
  .grid,
  .brand-mini-grid,
  .product-model-grid,
  .real-product-grid,
  .about-highlight-grid,
  .about-supply-grid,
  .contact-icon-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 420px) {
  .mobile-nav a {
    font-size: 12px !important;
    padding: 10px 12px !important;
  }
  .arabic-home-copy {
    margin: 14px 10px 20px !important;
    padding: 20px 15px !important;
  }
  .arabic-home-copy h1 {
    font-size: 25px !important;
  }
  .arabic-home-copy p {
    font-size: 15px !important;
  }
}