:root{--navy:#0D1F3D;--gold:#E5A910;--grey:#545454;--pale:#f3f7fa;--text:#17243a}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--text);font:16px Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}a{color:inherit;text-decoration:none}.top{background:var(--navy);color:#fff;padding:8px 5%;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px}header{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid #e0e5eb;box-shadow:0 2px 12px #0d1f3d12}.nav{max-width:1400px;margin:auto;min-height:76px;padding:9px 5%;display:flex;align-items:center;justify-content:space-between;gap:22px}.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto;min-height:58px}.brand img{width:58px;height:58px;object-fit:contain;flex:0 0 58px}.brand-text{display:flex;flex-direction:column;justify-content:center;line-height:1}.brand-text b{font:700 24px Georgia,serif;color:var(--navy);letter-spacing:.02em}.brand-text small{font-size:10px;color:var(--gold);letter-spacing:.42em;font-weight:bold;margin-top:6px}.links{display:flex;align-items:center;gap:clamp(10px,1.35vw,20px);font-size:13px;font-weight:700}.links>a,.drop>button{position:relative;border:0;background:none;padding:15px 0;white-space:nowrap;font:inherit;color:var(--navy);cursor:pointer;transition:color .2s}.links>a:after,.drop>button:after{content:"";position:absolute;bottom:5px;left:0;width:100%;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s ease-out}.links>a:hover,.links>a.active,.drop>button:hover,.drop.open>button{color:var(--gold)}.links>a:hover:after,.links>a.active:after,.drop:hover>button:after,.drop.open>button:after,.drop:focus-within>button:after{transform:scaleX(1)}.drop{position:relative}.drop-menu{display:none;position:absolute;top:100%;left:-12px;min-width:235px;background:#fff;padding:8px;border-top:3px solid var(--gold);box-shadow:0 12px 24px #0d1f3d25}.drop:hover .drop-menu,.drop:focus-within .drop-menu,.drop.open .drop-menu{display:block}.drop-menu a{display:block;padding:10px 11px;font-size:13px}.drop-menu a:hover{background:#f1f4f7;color:var(--gold)}.quote{background:var(--gold)!important;padding:13px!important;border-radius:3px;color:var(--navy)!important}.quote:after{display:none}.menu{display:none;background:white;border:1px solid #ddd;border-radius:4px;padding:6px 10px;font-size:20px}
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:470px;display:flex;align-items:center;color:#fff;background:var(--navy)}.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden}.hero-media img,.hero-media video{width:100%;height:100%;display:block;object-fit:cover;object-position:center right;transform-origin:center right;animation:heroKenBurns 22s ease-in-out 1 both;will-change:transform}.hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(13,31,61,.94) 0%,rgba(13,31,61,.70) 48%,rgba(13,31,61,.22) 100%);pointer-events:none}.hero-inner{position:relative;z-index:2;max-width:1400px;width:100%;margin:auto;padding:48px 5% 62px}@keyframes heroKenBurns{0%{transform:scale(1) translate3d(0,0,0)}100%{transform:scale(1.15) translate3d(-1.8%,0,0)}}.eyebrow{color:var(--gold);font-size:12px;font-weight:bold;text-transform:uppercase;letter-spacing:.04em}h1,h2{font-family:Georgia,'Times New Roman',serif}h1{font-size:clamp(36px,4.5vw,60px);line-height:1.03;margin:13px 0;max-width:620px}h1 em{font-style:normal;color:var(--gold)}.hero p{max-width:570px;line-height:1.7;font-size:16px;color:#e7edf3}.btn{display:inline-block;padding:13px 18px;margin:8px 8px 0 0;border:1px solid var(--gold);border-radius:3px;background:var(--gold);color:var(--navy);font-size:11px;font-weight:bold;text-transform:uppercase;transition:background .2s,color .2s,transform .2s}.btn:hover,.btn:focus-visible{background:var(--navy);color:white;transform:translateY(-2px)}.btn.outline{background:transparent;border-color:white;color:white}.btn.outline:hover{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.benefits{display:grid;grid-template-columns:repeat(5,1fr);background:#f5f8fa}.benefit{display:flex;align-items:center;justify-content:center;gap:9px;padding:17px 7px;border-right:1px solid #d3dce5;font-size:11px;font-weight:bold;color:var(--navy)}section{scroll-margin-top:85px}.section{padding:54px 5%}.about{display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:center}h2{font-size:clamp(26px,3vw,37px);line-height:1.12;margin:9px 0}.about p,.head p,.tech p{font-size:13px;line-height:1.65;color:#5c6674}.about-art{min-height:270px;display:grid;place-items:center;border-left:12px solid var(--gold);background:linear-gradient(120deg,#dfe4e9,#737e8b)}.about-art svg{width:88%;max-width:560px}
.carousel-section{background:var(--pale)}.head{text-align:center;max-width:850px;margin:0 auto 22px}.head .eyebrow:before,.head .eyebrow:after{content:"";display:inline-block;width:30px;height:2px;background:var(--gold);vertical-align:middle;margin:0 12px}.marquee{overflow:hidden;padding:6px 0 12px}.marquee-track{display:flex;align-items:flex-start;gap:clamp(12px,2.1vw,27px);width:max-content;animation:marquee 48s linear infinite}.marquee:hover .marquee-track{animation-play-state:paused}.orbit-card{flex:0 0 clamp(104px,11vw,136px);width:clamp(104px,11vw,136px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;min-height:155px;font-size:11px;color:var(--navy)}.orbit-image{width:clamp(84px,9vw,112px);height:clamp(84px,9vw,112px);border:2px solid var(--gold);border-radius:50%;overflow:hidden;background:#fff;display:grid;place-items:center;padding:5px;transition:background .22s,transform .22s,border-color .22s}.orbit-image img{width:100%;height:100%;object-fit:contain;background:#fff}.orbit-card strong{font-size:11px;line-height:1.35;font-weight:700;max-width:130px}.orbit-card small{font-size:10px;color:#657184;font-weight:normal}.material-card .orbit-image{font:700 24px Georgia;color:var(--navy);display:flex!important;align-items:center!important;justify-content:center!important;text-align:center;line-height:1!important;padding:0!important;box-sizing:border-box}.orbit-card:hover .orbit-image,.orbit-card:focus-visible .orbit-image,.material-card:hover .orbit-image{background:#fff;transform:none;border-color:var(--gold)}.orbit-card:hover,.orbit-card:focus,.orbit-card:focus-visible{outline:none;box-shadow:none}.orbit-card .orbit-image{background:#fff}#industries .orbit-image{padding:0}#industries .orbit-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;background:transparent;border-radius:50%}.material-card:hover .orbit-image,.material-card:focus-visible .orbit-image{background:var(--navy);color:#fff}.material-card:hover strong,.material-card:focus-visible strong,.material-card:hover small,.material-card:focus-visible small{color:#fff}.orbit-card:hover strong,.orbit-card:focus-visible strong{color:var(--gold)}.center{text-align:center;margin-top:9px}.center .btn{background:#fff;color:var(--navy)}.center .btn:hover{background:var(--navy);color:#fff}
.tech{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center;background:#f8fafc}.tools{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:18px}.tool{background:#fff;border:1px solid #e0e6ed;border-radius:4px;padding:15px 5px;text-align:center;font-size:10px;font-weight:bold;color:var(--navy);transition:background .2s,color .2s}.tool:hover{background:var(--navy);color:#fff}.tech-art{min-height:260px;display:grid;place-items:center;background:linear-gradient(135deg,#d9e0e7,#596575)}.tech-art svg{width:85%;height:auto}
footer{background:var(--navy);color:#fff;padding:34px 5% 15px}.foot-grid{max-width:1400px;margin:auto;display:grid;grid-template-columns:1.3fr 1fr 1fr 1.15fr;gap:26px}.foot-brand{display:flex;align-items:center;gap:12px;margin-bottom:12px}.foot-brand img{width:58px;height:58px;object-fit:contain;flex:0 0 58px}.foot-brand b{font:700 24px Georgia;display:block;line-height:1;color:white}.foot-brand small{display:block;color:var(--gold);letter-spacing:.42em;font-size:10px;margin-top:6px;font-weight:bold}footer p{font-size:13px;line-height:1.7;color:#d3dce8}footer h3{font-size:16px;margin:4px 0 14px;padding-bottom:12px;position:relative}footer h3:after{content:"";position:absolute;bottom:0;left:0;width:40px;height:2px;background:var(--gold)}.foot-links{list-style:none;padding:0;margin:0}.foot-links li{margin:7px 0}.foot-links a{font-size:13px;color:#d9e1eb;display:inline-flex;gap:7px;align-items:center;transition:color .2s,transform .25s ease-out}.foot-links a:before{content:"»";color:var(--gold);transition:color .2s}.foot-links a:hover,.foot-links a:focus-visible{color:var(--gold);transform:translateX(6px)}.socials{display:flex;gap:10px;align-items:center}.socials a{width:40px;height:40px;border:1.5px solid #ffffff80;border-radius:4px;display:grid;place-items:center;background:transparent;color:#fff;transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease;box-shadow:inset 0 0 0 1px #ffffff12}.socials svg{width:20px;height:20px;display:block;fill:currentColor}.socials .instagram svg{fill:none;stroke:currentColor;stroke-width:2}.socials .instagram .dot{fill:currentColor;stroke:none}.socials .linkedin,.socials .instagram,.socials .facebook,.socials .youtube{color:#fff}.socials a:hover,.socials a:focus-visible{background:#fff;border-color:#fff;transform:translateY(-2px);outline:2px solid var(--gold);outline-offset:2px}.socials .linkedin:hover,.socials .linkedin:focus-visible{color:#0A66C2}.socials .instagram:hover,.socials .instagram:focus-visible{color:#E4405F}.socials .facebook:hover,.socials .facebook:focus-visible{color:#1877F2}.socials .youtube:hover,.socials .youtube:focus-visible{color:#FF0000}.bottom{max-width:1400px;margin:22px auto 0;padding-top:14px;border-top:1px solid #ffffff35;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:#c9d3df;font-size:12px}
@keyframes marquee{to{transform:translateX(-50%)}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important;transition:none!important}}
@media(max-width:1050px){.links{gap:9px;font-size:12px}.brand img{width:52px;height:52px;flex-basis:52px}.brand-text b{font-size:22px}.foot-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:790px){.menu{display:block}.links{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;padding:12px 5%;align-items:stretch;flex-direction:column;box-shadow:0 10px 18px #0d1f3d22}.links.open{display:flex}.links>a,.drop>button{text-align:left;width:100%}.drop-menu{position:static;box-shadow:none;border:0;border-left:2px solid var(--gold);margin-left:8px}.about,.tech{grid-template-columns:1fr}.benefits{grid-template-columns:repeat(2,1fr)}.tools{grid-template-columns:repeat(3,1fr)}}@media(max-width:520px){.top{justify-content:center}.hero{min-height:440px}.hero-inner{padding:42px 6%}.benefit{justify-content:flex-start;padding:12px 8px}.tools{grid-template-columns:repeat(2,1fr)}.foot-grid{grid-template-columns:1fr 1fr;gap:20px 14px}.foot-grid>div:first-child{grid-column:1/-1}.bottom{flex-direction:column}}
/* Corrected image fit: preserve existing circular frames and avoid cropping. */
#industries .orbit-image {
padding: 4px;
overflow: hidden;
background: #fff;
}
#industries .orbit-image img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
border-radius: 50%;
background: #fff;
transform: none;
}
#industries .orbit-card:hover .orbit-image img,
#industries .orbit-card:focus-visible .orbit-image img {
transform: none;
}
/* Keep product photos and their original circular presentation unchanged. */
#products .orbit-card .orbit-image {
background: #fff !important;
overflow: hidden;
border: 2px solid var(--gold);
}
#products .orbit-card .orbit-image img {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
background: #fff;
transform: none;
}
#products .orbit-card:hover .orbit-image img {
transform: scale(1.025);
}
/* Keep the supplied About Us photo correctly sized. */
.about-art {
overflow: hidden;
min-height: 300px;
border-left: 12px solid var(--gold);
background: #e9edf1;
}
.about-art img {
display: block;
width: 100%;
height: 100%;
min-height: 300px;
max-height: 440px;
object-fit: cover;
object-position: center;
}
/* Floating contact icons: original brand colours, clean circular buttons. */
.quick-actions {
position: fixed;
left: 18px;
bottom: 22px;
z-index: 60;
display: flex;
flex-direction: column;
gap: 10px;
}
.quick-action {
position: relative;
width: 50px;
height: 50px;
display: grid;
place-items: center;
border: 1px solid #ffffff;
border-radius: 50%;
background: #fff;
box-shadow: 0 5px 18px #0d1f3d35;
transition: transform .2s ease, box-shadow .2s ease;
}
.quick-action svg {
width: 25px;
height: 25px;
display: block;
}
.quick-action.whatsapp svg { fill: #25D366; }
.quick-action.email svg { fill: #EA4335; }
.quick-action.google svg { width: 27px; height: 27px; }
.quick-action:hover,
.quick-action:focus-visible {
transform: translateY(-2px);
box-shadow: 0 8px 22px #0d1f3d45;
outline: 2px solid var(--gold);
outline-offset: 2px;
}
.quick-action::after {
content: attr(data-label);
position: absolute;
left: calc(100% + 10px);
top: 50%;
transform: translateY(-50%);
padding: 7px 10px;
border-radius: 5px;
background: var(--navy);
color: #fff;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .18s ease, visibility .18s ease;
}
.quick-action:hover::after,
.quick-action:focus-visible::after {
opacity: 1;
visibility: visible;
}
/* Back to top stays gold and remains visible above the footer. */
.back-top {
position: fixed;
right: 18px;
bottom: 22px;
z-index: 59;
width: 46px;
height: 46px;
display: grid;
place-items: center;
border: 1px solid #ffffff80;
border-radius: 50%;
background: var(--gold);
color: var(--navy);
box-shadow: 0 5px 18px #0d1f3d30;
font-size: 23px;
font-weight: 700;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.back-top.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-top:hover,
.back-top:focus-visible {
background: var(--navy);
color: var(--gold);
outline: 2px solid var(--gold);
outline-offset: 2px;
}
@media (max-width: 520px) {
.quick-actions { left: 12px; bottom: 14px; gap: 8px; }.quick-action{width:46px;height:46px}
.quick-action { width: 44px; height: 44px; }
.quick-action svg { width: 21px; height: 21px; }
.back-top { right: 12px; bottom: 14px; width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
.quick-action, .quick-action::after, .back-top { transition: none; }
}
/* Use the user's supplied technical products image in the right-hand panel. */
.tech-art {
min-height: 260px;
overflow: hidden;
display: block;
background: #e9edf1;
}
.tech-art img {
display: block;
width: 100%;
height: 100%;
min-height: 260px;
max-height: 440px;
object-fit: cover;
object-position: center;
}
@media (max-width: 790px) {
.tech-art img { max-height: 360px; }
}
/* Final industry image fit: preserve existing circles, borders, labels and layout. */
#industries .orbit-image {
padding: 0 !important;
overflow: hidden;
border-radius: 50%;
isolation: isolate;
}
#industries .orbit-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
border-radius: 50%;
background: transparent;
}
/* Final visual corrections */
h1,h2,h3,h4{color:var(--navy);text-rendering:optimizeLegibility}
p,li{font-size:inherit}
button,a{font-family:inherit}
footer{font-size:14px}
footer h3{color:#fff}
@media(max-width:790px){
.nav{min-height:68px;padding:8px 5%}
.brand img{width:50px;height:50px;flex-basis:50px}
.brand-text b{font-size:21px}
.brand-text small{font-size:9px}
.links{font-size:14px}
}
@media(max-width:520px){
.brand{gap:9px}
.brand img{width:46px;height:46px;flex-basis:46px}
.brand-text b{font-size:19px}
.brand-text small{font-size:8px}
.top{font-size:11px}
}
/* =============================
Nemrex Industries — navigation refinement
Visual-only refinement: existing page content/images preserved.
============================= */
:root{
--navy:#0D1F3D;
--gold:#E5A910;
--navy-2:#10284d;
--border:#e7ebf0;
--muted:#687386;
}
html{scroll-padding-top:88px}
body{
font-family:"Segoe UI",Inter,Arial,Helvetica,sans-serif;
color:var(--text);
}
/* The contact strip above the navigation is intentionally removed. */
.top{display:none!important}
header{
position:sticky;
top:0;
z-index:1000;
background:rgba(255,255,255,.98);
border-bottom:1px solid var(--border);
box-shadow:0 4px 18px rgba(13,31,61,.07);
backdrop-filter:saturate(120%) blur(8px);
}
.nav{
width:min(1500px,100%);
min-height:84px;
margin:0 auto;
padding:8px 4.2%;
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
align-items:center;
gap:28px;
}
.brand{
min-height:68px;
gap:12px;
align-items:center;
}
.brand img{
width:60px;
height:60px;
flex:0 0 60px;
object-fit:contain;
}
.brand-text{
justify-content:center;
line-height:1;
}
.brand-text b{
font-family:Georgia,"Times New Roman",serif;
font-size:25px;
line-height:1;
font-weight:700;
letter-spacing:.035em;
color:var(--navy);
}
.brand-text small{
margin-top:7px;
font-family:"Segoe UI",Inter,Arial,sans-serif;
font-size:9px;
line-height:1;
letter-spacing:.48em;
color:var(--gold);
font-weight:700;
}
.links{
min-width:0;
justify-content:flex-end;
align-items:center;
gap:clamp(12px,1.25vw,22px);
font-family:"Segoe UI",Inter,Arial,Helvetica,sans-serif;
font-size:13px;
line-height:1;
font-weight:700;
letter-spacing:.015em;
}
.links>a,.drop>button{
display:inline-flex;
align-items:center;
justify-content:center;
height:46px;
padding:0;
color:var(--navy);
font:inherit;
letter-spacing:inherit;
border:0;
background:transparent;
}
.links>a:after,.drop>button:after{
bottom:3px;
height:2px;
border-radius:2px;
}
.links>a:hover,.links>a.active,.drop>button:hover,.drop.open>button{
color:var(--gold);
}
.nav-chevron{
width:7px;
height:7px;
margin-left:7px;
margin-top:-3px;
border-right:1.6px solid currentColor;
border-bottom:1.6px solid currentColor;
transform:rotate(45deg);
transition:transform .2s ease;
}
.drop.open .nav-chevron{transform:rotate(225deg);margin-top:4px}
.drop-menu{
top:calc(100% + 1px);
left:50%;
transform:translateX(-50%);
min-width:250px;
padding:7px;
border:1px solid var(--border);
border-top:3px solid var(--gold);
border-radius:0 0 6px 6px;
box-shadow:0 16px 34px rgba(13,31,61,.13);
}
.drop-menu a{
padding:11px 12px;
border-radius:3px;
font-size:13px;
font-weight:600;
line-height:1.25;
color:var(--navy);
}
.drop-menu a:hover,.drop-menu a:focus-visible{
background:#f6f8fa;
color:var(--gold);
}
.quote{
display:inline-flex!important;
align-items:center;
justify-content:center;
min-width:164px;
height:50px;
padding:0 20px!important;
border-radius:4px;
background:var(--gold)!important;
color:var(--navy)!important;
font-size:13px!important;
font-weight:800!important;
letter-spacing:.025em;
box-shadow:0 5px 12px rgba(229,169,16,.14);
transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.quote:hover{
background:#efb51d!important;
transform:translateY(-1px);
box-shadow:0 8px 18px rgba(229,169,16,.20);
}
.quote:after{display:none!important}
.menu{
width:44px;
height:44px;
padding:0;
border:1px solid var(--border);
border-radius:5px;
color:var(--navy);
font-size:22px;
line-height:1;
}
.menu:hover{border-color:var(--gold);color:var(--gold)}
/* Footer social icons: one consistent visual system instead of four unrelated colors. */
.socials{
display:flex;
align-items:center;
gap:9px;
margin-top:10px;
}
.socials a.social-link{
width:39px;
height:39px;
display:grid;
place-items:center;
border:1px solid rgba(255,255,255,.28);
border-radius:4px;
background:rgba(255,255,255,.035);
color:#fff;
transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
.socials a.social-link svg{
width:18px;
height:18px;
display:block;
}
.socials .instagram svg{fill:none;stroke:currentColor;stroke-width:2}
.socials .instagram .dot{fill:currentColor;stroke:none}
.socials .linkedin,.socials .instagram,.socials .facebook,.socials .youtube{color:#fff}
.socials a.social-link:hover,.socials a.social-link:focus-visible{
background:var(--gold);
border-color:var(--gold);
color:var(--navy);
transform:translateY(-2px);
outline:none;
}
footer{
font-family:"Segoe UI",Inter,Arial,Helvetica,sans-serif;
}
footer h3{
font-size:14px;
letter-spacing:.02em;
}
footer p,footer li,footer a{line-height:1.7}
@media(max-width:1180px){
.nav{gap:18px;padding-left:3.2%;padding-right:3.2%}
.links{gap:11px;font-size:12px}
.brand img{width:54px;height:54px;flex-basis:54px}
.brand-text b{font-size:22px}
.brand-text small{font-size:8px}
.quote{min-width:145px;padding:0 15px!important}
}
@media(max-width:1100px){
.nav{
min-height:74px;
grid-template-columns:auto 1fr auto;
padding:7px 5%;
}
.brand img{width:52px;height:52px;flex-basis:52px}
.brand-text b{font-size:21px}
.menu{display:grid;place-items:center;justify-self:end}
.links{
display:none;
position:absolute;
top:100%;
left:0;
right:0;
padding:10px 5% 14px;
background:#fff;
border-top:1px solid var(--border);
box-shadow:0 14px 25px rgba(13,31,61,.12);
align-items:stretch;
flex-direction:column;
gap:0;
}
.links.open{display:flex}
.links>a,.drop>button{
width:100%;
min-height:46px;
justify-content:flex-start;
text-align:left;
}
.links>a:after,.drop>button:after{bottom:0}
.drop-menu{
position:static;
transform:none;
min-width:0;
margin:0 0 5px 8px;
padding:3px 0 3px 12px;
border:0;
border-left:2px solid var(--gold);
border-radius:0;
box-shadow:none;
}
.drop-menu a{padding:9px 10px}
.quote{width:100%;margin-top:8px}
}
@media(max-width:520px){
.nav{padding:7px 4.5%}
.brand{gap:9px}
.brand img{width:46px;height:46px;flex-basis:46px}
.brand-text b{font-size:19px}
.brand-text small{font-size:7px;letter-spacing:.42em}
.socials a.social-link{width:37px;height:37px}
}
/* =====================================================
Corrections: larger readable text, 3 technical tiles,
footer social icons in original brand colours
===================================================== */
body{font-size:16px}
.eyebrow{font-size:14px;letter-spacing:.06em}
.hero p{font-size:18px;max-width:600px}
.btn{font-size:14px;padding:15px 24px}
.benefit{font-size:14px;padding:20px 10px;line-height:1.45}
.about p,.head p,.tech p{font-size:16px;line-height:1.75}.tech .technical-seo-copy{max-width:760px;margin:12px 0 0;color:#5c6674;font-size:16px;line-height:1.8}
.head{max-width:900px}
/* Product / industry / material carousels */
.orbit-card{flex:0 0 clamp(124px,12vw,164px);width:clamp(124px,12vw,164px);min-height:185px;gap:10px;font-size:14px}
.orbit-image{width:clamp(98px,10vw,128px);height:clamp(98px,10vw,128px)}
.orbit-card strong{font-size:14px;line-height:1.35;max-width:160px}
.orbit-card small{font-size:13px}
.material-card .orbit-image{font-size:28px}
/* Technical section: 3 sub pages only */
.tools{grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px 14px;font-size:15px;line-height:1.4}
.tool-ico{font-size:30px;line-height:1;color:var(--gold)}
/* Navigation */
.links{font-size:15px}
.drop-menu{min-width:290px}
.drop-menu a{font-size:15px;padding:12px 14px}
.quote{font-size:14px!important}
@media(max-width:1359px){.links{font-size:14px}}
@media(max-width:1180px){.links{font-size:13px}}
@media(max-width:1100px){.links{font-size:16px}.drop-menu a{font-size:15px}}
/* Footer */
footer p{font-size:15px}
footer p b{font-size:14px;letter-spacing:.06em}
footer h3{font-size:18px}
.foot-links li{margin:9px 0}
.foot-links a{font-size:15px}
.bottom{font-size:14px}
.quick-action::after{font-size:14px}
/* Footer social icons: white tile + original logo colours (no colour change on hover) */
.socials{gap:12px;margin-top:14px}
.socials a.social-link{width:46px;height:46px;border-radius:8px;border:1px solid #fff;background:#fff;box-shadow:0 3px 10px rgba(0,0,0,.28)}
.socials a.social-link svg{width:26px;height:26px}
.socials a.social-link.linkedin svg{fill:#0A66C2}
.socials a.social-link.facebook svg{fill:#1877F2}
.socials a.social-link.youtube svg{fill:#FF0000}
.socials a.social-link.instagram svg{fill:none;stroke:url(#ig-grad);stroke-width:2}
.socials a.social-link.instagram svg .dot{fill:#D62976;stroke:none}
.socials a.social-link:hover,.socials a.social-link:focus-visible{background:#fff;border-color:#fff;transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,.38)}
.socials a.social-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(max-width:520px){
.tools{grid-template-columns:1fr}
.orbit-card strong{font-size:13.5px}
.socials a.social-link{width:44px;height:44px}
}
/* =====================================================
Logo lockup: properly sized emblem, and INDUSTRIES
spread to exactly the same width as NEMREX
===================================================== */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lockup{display:inline-flex;flex-direction:column;align-items:stretch;justify-content:center;line-height:1}
.lockup b{display:block;font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:28px;line-height:1;letter-spacing:.07em;margin-right:-.07em;white-space:nowrap}
.lockup small{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-family:"Segoe UI",Inter,Arial,sans-serif;font-weight:700;font-size:13px;line-height:1;letter-spacing:0;color:var(--gold)}
header .lockup b{color:var(--navy)}
footer .lockup b{color:#fff}
/* The emblem file is wide (about 3:2). Size it by height so it is no longer shrunk into a square box. */
header .brand{gap:14px}
header .brand img{width:auto;height:70px;max-width:none;flex:0 0 auto;object-fit:contain}
footer .foot-brand{gap:14px}
footer .foot-brand img{width:auto;height:70px;max-width:none;flex:0 0 auto;object-fit:contain}
@media(max-width:1180px){header .brand img{height:64px}header .lockup b{font-size:26px}header .lockup small{font-size:12px}}
@media(max-width:1100px){header .brand img{height:60px}}
@media(max-width:520px){
header .brand{gap:9px}
header .brand img{height:50px}
header .lockup b{font-size:21px}
header .lockup small{font-size:10px;margin-top:6px}
footer .foot-brand img{height:60px}
footer .lockup b{font-size:24px}
}
/* =====================================================
Floating contact buttons: solid brand-colour buttons,
clearly visible over any section while scrolling
===================================================== */
.quick-actions{left:20px;bottom:24px;gap:14px}
.quick-actions .quick-action{width:54px;height:54px;border:0;box-shadow:0 6px 16px rgba(13,31,61,.32)}
.quick-actions .quick-action svg{width:28px;height:28px}
.quick-actions .quick-action.whatsapp{background:#25D366}
.quick-actions .quick-action.whatsapp svg{fill:#fff}
.quick-actions .quick-action.email{background:#EA4335}
.quick-actions .quick-action.email svg{fill:#fff}
.quick-actions .quick-action.google{background:#fff;border:1px solid #dadce0}
.quick-actions .quick-action.google svg{width:28px;height:28px}
.quick-actions .quick-action:hover,.quick-actions .quick-action:focus-visible{transform:translateY(-3px);box-shadow:0 10px 22px rgba(13,31,61,.42);outline:2px solid var(--gold);outline-offset:3px}
@media(max-width:520px){
.quick-actions{left:12px;bottom:14px;gap:10px}
.quick-actions .quick-action{width:46px;height:46px}
.quick-actions .quick-action svg,.quick-actions .quick-action.google svg{width:24px;height:24px}
}
/* =====================================================
FINAL CORRECTIONS
===================================================== */
/* 1) Hero heading: white + gold so it reads on the dark photo overlay */
.hero h1{color:#fff;text-shadow:0 2px 18px rgba(4,12,28,.45)}
.hero h1 em{color:var(--gold)}
.hero .eyebrow{text-shadow:0 1px 10px rgba(4,12,28,.5)}
/* 2) Buttons */
.btn{display:inline-flex;align-items:center;gap:10px}
.btn .arr{display:inline-block;transition:transform .2s ease}
.btn:hover .arr,.btn:focus-visible .arr{transform:translateX(4px)}
/* 3) Products dropdown: categories first, "View All Products" last */
.drop-menu a.view-all{
margin-top:6px;padding:13px 14px;
border-top:1px solid var(--border);border-radius:0 0 3px 3px;
background:#fff8e3;color:var(--navy);font-weight:800;
display:flex;justify-content:space-between;align-items:center;
}
.drop-menu a.view-all:hover,.drop-menu a.view-all:focus-visible{background:var(--navy);color:#fff}
/* 4) Navbar icons: e-catalogue + weight calculator */
.nav-sep{width:1px;height:26px;background:var(--border);flex:0 0 1px}
.links>a.nav-icon{
position:relative;width:42px;height:42px;padding:0;
border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--navy);
transition:background .2s,border-color .2s,color .2s,transform .2s;
}
.links>a.nav-icon:after{display:none}
.nav-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nav-icon-label{display:none}
.links>a.nav-icon:hover,.links>a.nav-icon:focus-visible{background:var(--navy);border-color:var(--navy);color:var(--gold);transform:translateY(-2px);outline:none}
.links>a.nav-icon:before{
content:attr(data-tip);position:absolute;top:calc(100% + 8px);left:50%;
transform:translateX(-50%);padding:6px 10px;border-radius:5px;
background:var(--navy);color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em;
white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;
transition:opacity .15s ease;z-index:5;
}
.links>a.nav-icon:hover:before,.links>a.nav-icon:focus-visible:before{opacity:1;visibility:visible}
/* 5) Benefits strip */
.benefit svg{width:26px;height:26px;flex:0 0 26px;fill:none;stroke:var(--gold);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.benefit span{text-align:left}
/* 6) Mobile / tablet menu */
@media(max-width:1100px){
.nav-sep{display:none}
.links>a.nav-icon{width:100%;height:auto;min-height:46px;padding:0;border:0;border-radius:0;background:transparent;justify-content:flex-start;gap:12px}
.links>a.nav-icon:hover,.links>a.nav-icon:focus-visible{background:transparent;color:var(--gold);transform:none}
.links>a.nav-icon:before{display:none}
.nav-icon-label{display:inline}
.links>a.quote{justify-content:center}
}
@media(max-width:790px){.benefit{justify-content:flex-start}}
/* Keep the logo and the first menu item clearly apart on mid-size desktops */
@media(min-width:1101px) and (max-width:1560px){
.nav{gap:34px}
.links{font-size:13.5px;gap:15px}
.quote{min-width:150px;padding:0 16px!important}
}
@media(min-width:1101px) and (max-width:1250px){
.links{font-size:12.5px;gap:11px}
header .brand img{height:58px}
header .lockup b{font-size:24px}
header .lockup small{font-size:11px}
}
/* Quote enquiry section */
.quote-section{background:#f5f7fa;padding:76px 6%;}
.quote-layout{max-width:1250px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.quote-copy h2{font-family:'Yeseva One',Georgia,serif;color:var(--navy,#0D1F3D);font-size:clamp(30px,3.2vw,46px);line-height:1.2;margin:12px 0 18px;}
.quote-copy p{max-width:520px;color:#545454;line-height:1.8;font-size:16px;}
.quote-note{margin-top:25px;color:#0D1F3D;font-weight:600;}
.quote-note span{color:#E5A910;margin-right:8px;}
.quote-form{background:#fff;padding:30px;border-radius:12px;box-shadow:0 14px 45px #0d1f3d12;display:grid;gap:16px;}
.quote-form label{display:grid;gap:7px;font-size:13px;font-weight:700;color:#0D1F3D;}
.quote-form input,.quote-form textarea{width:100%;border:1px solid #d9dee6;border-radius:6px;padding:13px 14px;font:14px 'Canva Sans',Arial,sans-serif;color:#242a33;background:#fff;}
.quote-form textarea{resize:vertical;min-height:110px;}
.quote-form input:focus,.quote-form textarea:focus{outline:2px solid #E5A91055;border-color:#E5A910;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.quote-form button{justify-self:start;border:0;cursor:pointer;}
.contact-links li span{font-size:13px;color:#d9e1eb;line-height:1.6;}
@media(max-width:760px){.quote-layout{grid-template-columns:1fr;gap:28px}.quote-section{padding:54px 5%}.quote-form{padding:22px}.form-row{grid-template-columns:1fr}}
/* Quote section alignment refinement: balanced equal-height panels */
.quote-section{padding:58px 5%;background:#f5f7fa;}
.quote-layout{max-width:1500px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:stretch;}
.quote-copy,.quote-form{box-sizing:border-box;min-width:0;min-height:470px;height:100%;}
.quote-copy{background:#fff;border-radius:12px;padding:42px 44px;display:flex;flex-direction:column;justify-content:center;box-shadow:0 14px 45px #0d1f3d0d;}
.quote-copy h2{font-size:clamp(30px,2.8vw,42px);line-height:1.22;margin:12px 0 18px;max-width:540px;}
.quote-copy p{max-width:560px;font-size:16px;line-height:1.75;margin:0;}
.quote-note{margin-top:24px;line-height:1.6;}
.quote-form{padding:34px 38px;border-radius:12px;display:flex;flex-direction:column;justify-content:center;gap:14px;}
.quote-form label{gap:6px;}
.quote-form input{height:46px;box-sizing:border-box;}
.quote-form textarea{min-height:118px;height:118px;box-sizing:border-box;resize:vertical;}
.quote-form button{margin-top:2px;}
@media(max-width:900px){.quote-layout{gap:24px}.quote-copy{padding:32px}.quote-form{padding:28px}}
@media(max-width:760px){.quote-section{padding:44px 5%}.quote-layout{grid-template-columns:1fr;gap:20px}.quote-copy,.quote-form{min-height:0;height:auto}.quote-copy{padding:28px 24px}.quote-form{padding:24px}.form-row{grid-template-columns:1fr}.quote-form textarea{height:130px}}
/* Final sizing and footer polish */
.links{font-size:14px;gap:clamp(11px,1.45vw,21px)}
.drop-menu a{font-size:14px}
.quote-section{padding:36px 5%}
.quote-copy,.quote-form{min-height:390px}
.quote-copy{padding:32px 38px}
.quote-form{padding:28px 32px;gap:12px}
.quote-form textarea{min-height:88px;height:88px}
.quote-copy h2{font-size:clamp(28px,2.5vw,38px);margin:9px 0 13px}
.quote-copy p{line-height:1.65}
.quote-note{margin-top:17px}
.foot-grid>div:first-child h3{color:var(--gold)}
.socials a{background:#fff;border-color:#fff;color:#0D1F3D;box-shadow:none}
.socials .linkedin svg{fill:#0A66C2}
.socials .facebook svg{fill:#1877F2}
.socials .youtube svg{fill:#FF0000}
.socials .instagram svg{stroke:#D62976;fill:none}
.socials .instagram .dot{fill:#D62976}
.contact-links a:before{display:none!important;content:none!important}
.contact-links li{margin:12px 0}
.contact-links a{display:flex;align-items:center;gap:12px;color:#d9e1eb;font-size:13px}
.contact-links svg{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.contact-links .address{display:flex;align-items:flex-start;gap:12px;color:#d9e1eb;font-size:13px;line-height:1.65}
.contact-links .contact-icon{display:inline-flex;flex:0 0 20px;margin-top:2px}
.contact-links .address>span:last-child{display:block;max-width:230px}
@media(max-width:760px){.quote-section{padding:30px 5%}.quote-copy,.quote-form{min-height:0}.quote-copy{padding:26px 24px}.quote-form{padding:24px}.quote-form textarea{height:100px;min-height:100px}.links{font-size:14px}}
/* Final layout refinements: prevent brand/nav overlap on wide screens. */
@media (min-width:1281px){
.nav{width:min(1700px,100%);grid-template-columns:255px minmax(0,1fr);gap:22px;padding-left:3%;padding-right:3%;}
.brand{width:255px;min-width:255px;gap:10px;overflow:visible;}
.brand img{width:58px;height:58px;flex:0 0 58px;}
.brand .lockup{display:flex;flex-direction:column;min-width:0;white-space:nowrap;}
.brand .lockup b{font-size:24px;letter-spacing:.025em;}
.brand .lockup small{letter-spacing:.37em;font-size:9px;}
.links{justify-content:flex-end;gap:clamp(9px,.85vw,16px);font-size:clamp(12px,.72vw,14px);}
.links>a,.drop>button{white-space:nowrap;}
}
/* Keep all footer column titles in Nemrex gold. */
footer h3, .foot-grid h3{color:var(--gold)!important;}
/* Pipe dimension/weight chart symbol: clear pipe cross-section with measurement ticks. */
.tool-ico.pipe-dim-icon{display:inline-flex;align-items:center;justify-content:center;}
.tool-ico.pipe-dim-icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
/* Final navbar spacing refinement */
.nav{gap:14px;padding-left:3.2%;padding-right:3.2%}.links{gap:clamp(8px,.85vw,14px);font-size:14px}.links>a,.drop>button{font-size:inherit}.brand{gap:10px}.brand img{width:58px;flex-basis:58px}.brand-text b{font-size:24px}
@media(max-width:1250px){.nav{gap:10px;padding-left:2%;padding-right:2%}.links{gap:8px;font-size:12px}}
@media(max-width:1050px){.nav{flex-wrap:wrap;justify-content:center}.links{flex-wrap:wrap;justify-content:center}}
/* Final navbar/brand refinements */
.nav{max-width:1660px;padding:9px 4%;gap:24px}
.brand{gap:14px;min-height:72px}
.brand img{width:76px;height:76px;flex:0 0 76px}
.brand-text b{font-size:30px;letter-spacing:.035em;line-height:1;color:var(--navy)}
.brand-text small{font-size:12px;letter-spacing:.48em;margin-top:7px;color:var(--gold);font-weight:700}
.links{gap:clamp(11px,1.1vw,21px);font-size:14px}
@media(max-width:1100px){.nav{padding:9px 3%;gap:14px}.brand img{width:64px;height:64px;flex-basis:64px}.brand-text b{font-size:26px}.brand-text small{font-size:10px}.links{gap:11px;font-size:12px}}
@media(max-width:760px){.brand img{width:54px;height:54px;flex-basis:54px}.brand-text b{font-size:23px}.brand-text small{font-size:9px}}
/* Final homepage refinements: consistent Nemrex wordmark and industry gallery */
.brand .lockup,
.foot-brand .lockup {
display: inline-flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
line-height: 1;
}
.brand .lockup b,
.foot-brand .lockup b {
display: block;
font-family: "Yeseva One", Georgia, "Times New Roman", serif;
font-size: 30px;
font-weight: 400;
line-height: 1;
letter-spacing: .025em;
white-space: nowrap;
margin: 0;
}
.brand .lockup small,
.foot-brand .lockup small {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 7px;
font-family: "Segoe UI", Arial, sans-serif;
font-size: 12px;
font-weight: 700;
line-height: 1;
letter-spacing: 0;
white-space: nowrap;
}
header .brand .lockup b { color: var(--navy); }
header .brand .lockup small { color: var(--gold); }
footer .foot-brand .lockup b { color: #fff; }
footer .foot-brand .lockup small { color: var(--gold); }
footer .foot-brand { align-items: center; }
@media (max-width: 1180px) {
header .brand .lockup b { font-size: 27px; }
header .brand .lockup small { font-size: 11px; }
}
@media (max-width: 520px) {
header .brand .lockup b { font-size: 22px; }
header .brand .lockup small { font-size: 9px; margin-top: 6px; }
footer .foot-brand .lockup b { font-size: 23px; }
footer .foot-brand .lockup small { font-size: 10px; }
}
/* Keep industry photographs legible inside the circular gallery frames. */
#industries .orbit-card {
flex: 0 0 clamp(142px, 12vw, 170px);
width: clamp(142px, 12vw, 170px);
min-height: 195px;
gap: 11px;
}
#industries .orbit-image {
width: clamp(104px, 9.5vw, 128px);
height: clamp(104px, 9.5vw, 128px);
padding: 0;
border: 2px solid var(--gold);
border-radius: 50%;
overflow: hidden;
background: #fff;
}
#industries .orbit-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 50%;
}
#industries .orbit-card strong {
max-width: 165px;
font-size: 13px;
line-height: 1.35;
text-align: center;
color: var(--navy);
}
@media (max-width: 520px) {
#industries .orbit-card {
flex-basis: 132px;
width: 132px;
min-height: 175px;
}
#industries .orbit-image {
width: 104px;
height: 104px;
}
#industries .orbit-card strong { font-size: 12px; }
}
/* Final wordmark alignment: keep the INDUSTRIES baseline evenly spaced beneath NEMREX in both header and footer. */
header .brand .lockup,
footer .foot-brand .lockup {
align-items: stretch;
flex: 0 0 auto;
}
header .brand .lockup b,
footer .foot-brand .lockup b {
display: block;
width: max-content;
white-space: nowrap;
}
header .brand .lockup small,
footer .foot-brand .lockup small {
display: flex;
width: 100%;
min-width: 100%;
justify-content: space-between;
align-items: center;
white-space: nowrap;
letter-spacing: 0;
line-height: 1;
}
header .brand .lockup small span,
footer .foot-brand .lockup small span {
display: inline-block;
flex: 0 0 auto;
}
footer .foot-brand { align-items: center; }
@media (max-width: 520px) {
footer .foot-brand { gap: 10px; }
footer .foot-brand .lockup b { font-size: 22px; }
footer .foot-brand .lockup small { font-size: 9px; margin-top: 6px; }
}
/* Footer quick-action spacing fix: keep the floating contact buttons clear of nearby footer text. */
.quick-actions {
left: 10px;
gap: 14px;
}
.quick-actions .quick-action {
width: 48px;
height: 48px;
}
.quick-actions .quick-action svg,
.quick-actions .quick-action.google svg {
width: 25px;
height: 25px;
}
@media (max-width: 520px) {
.quick-actions {
left: 8px;
bottom: 14px;
gap: 12px;
}
.quick-actions .quick-action {
width: 44px;
height: 44px;
}
.quick-actions .quick-action svg,
.quick-actions .quick-action.google svg {
width: 23px;
height: 23px;
}
}
/* Final responsive typography: desktop, tablet and mobile */
h1 {
font-size: clamp(30px, 4vw, 56px);
line-height: 1.08;
overflow-wrap: anywhere;
}
h2 {
font-size: clamp(23px, 2.5vw, 32px);
line-height: 1.18;
overflow-wrap: anywhere;
}
.eyebrow {
font-size: clamp(12px, 1.15vw, 15px);
line-height: 1.35;
letter-spacing: .055em;
}
.product-card h3,
.product-item h3,
.product-box h3 {
font-size: clamp(16px, 1.35vw, 20px);
line-height: 1.3;
overflow-wrap: anywhere;
}
@media (max-width: 768px) {
h1 {
font-size: clamp(28px, 6vw, 38px);
line-height: 1.12;
}
h2 {
font-size: clamp(22px, 4.6vw, 28px);
line-height: 1.2;
}
.eyebrow {
font-size: 12px;
letter-spacing: .045em;
}
.product-card h3,
.product-item h3,
.product-box h3 {
font-size: 17px;
line-height: 1.3;
}
}
@media (max-width: 480px) {
h1 {
font-size: clamp(26px, 7vw, 32px);
}
h2 {
font-size: clamp(21px, 5.4vw, 25px);
}
.eyebrow {
font-size: 11px;
letter-spacing: .035em;
}
}
#quote{scroll-margin-top:110px}
.quote-status{display:none;margin-top:4px;padding:10px 12px;border-radius:6px;font-size:14px;line-height:1.45}
.quote-status.success{display:block;background:#edf8f0;color:#176b2c;border:1px solid #b9dfc1}
.quote-status.error{display:block;background:#fff2f2;color:#9b2020;border:1px solid #e5b5b5}
.quote-status.sending{display:block;background:#f5f7fa;color:#0D1F3D;border:1px solid #d9dee6}
/* =========================================================
NEMREX — Mobile footer + interactive hover refinements
========================================================= */
/* Footer: keep the four main blocks in one clean row on desktop. */
footer .foot-grid{
align-items:start;
}
/* Mobile/tablet footer: one section after another:
Company → Quick Links → Products → Contact Us */
@media (max-width: 760px){
footer{
padding:32px 20px 14px;
}
footer .foot-grid{
grid-template-columns:1fr !important;
gap:28px !important;
width:100%;
}
footer .foot-grid > div{
grid-column:auto !important;
width:100%;
}
footer .foot-brand{
justify-content:flex-start;
}
footer .foot-grid > div:first-child{
grid-column:auto !important;
}
footer .foot-links{
margin:0;
}
footer .foot-links li{
margin:9px 0;
}
footer .foot-links a{
font-size:14px;
}
footer h3{
font-size:18px;
margin-bottom:14px;
}
footer p{
font-size:14px;
}
/* Copyright should be centered on mobile. */
footer .bottom{
width:100%;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
gap:8px;
margin-top:24px;
padding-top:15px;
}
footer .bottom span,
footer .bottom a{
text-align:center;
}
}
/* Extra-small phones */
@media (max-width: 430px){
footer{
padding-left:18px;
padding-right:18px;
}
footer .foot-grid{
gap:25px !important;
}
}
/* ---------------------------------------------------------
Make hover/focus feedback clearly visible on desktop.
This is intentionally subtle and keeps Nemrex branding.
--------------------------------------------------------- */
/* Marquee itself pauses when the pointer is over it. */
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track{
animation-play-state:paused;
}
/* Product / material / industry circular cards. */
.marquee .orbit-card{
border-radius:12px;
padding:6px 4px 8px;
transition:
transform .22s ease,
background-color .22s ease,
box-shadow .22s ease;
}
.marquee .orbit-card:hover,
.marquee .orbit-card:focus-visible{
transform:translateY(-5px);
background:#ffffff;
box-shadow:0 8px 22px rgba(13,31,61,.12);
outline:none;
}
.marquee .orbit-card:hover .orbit-image,
.marquee .orbit-card:focus-visible .orbit-image{
transform:scale(1.045);
border-color:var(--gold) !important;
box-shadow:0 0 0 3px rgba(229,169,16,.14);
}
.marquee .orbit-card:hover strong,
.marquee .orbit-card:focus-visible strong{
color:var(--gold) !important;
}
.marquee .orbit-card:hover small,
.marquee .orbit-card:focus-visible small{
color:var(--navy) !important;
}
/* Material cards that use the same circular component. */
.material-card{
transition:transform .22s ease, box-shadow .22s ease, background-color .22s ease;
border-radius:12px;
}
.material-card:hover,
.material-card:focus-visible{
transform:translateY(-5px);
box-shadow:0 8px 22px rgba(13,31,61,.12);
outline:none;
}
.material-card:hover .orbit-image,
.material-card:focus-visible .orbit-image{
transform:scale(1.045);
border-color:var(--gold) !important;
}
/* Normal clickable boxes/tools/buttons should also visibly react. */
.tool,
.btn,
.quote,
.socials a,
.nav-icon{
transition:
transform .2s ease,
background-color .2s ease,
color .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}
.tool:hover,
.tool:focus-visible,
.btn:hover,
.btn:focus-visible,
.quote:hover,
.quote:focus-visible{
transform:translateY(-2px);
}
.tool:hover,
.tool:focus-visible{
background:var(--navy);
color:#fff;
border-color:var(--gold);
box-shadow:0 7px 18px rgba(13,31,61,.14);
}
.socials a:hover,
.socials a:focus-visible{
transform:translateY(-3px);
box-shadow:0 7px 16px rgba(13,31,61,.18);
}
/* Don't show hover transforms for keyboard focus as an ugly outline. */
.marquee .orbit-card:focus-visible,
.material-card:focus-visible,
.tool:focus-visible,
.btn:focus-visible,
.quote:focus-visible,
.socials a:focus-visible{
outline:2px solid var(--gold);
outline-offset:3px;
}
/* On touch devices there is no true mouse hover.
Keep the layout stable instead of forcing hover effects. */
@media (hover:none){
.marquee .orbit-card:hover,
.marquee .orbit-card:focus-visible,
.material-card:hover,
.material-card:focus-visible,
.tool:hover,
.tool:focus-visible,
.btn:hover,
.btn:focus-visible,
.quote:hover,
.quote:focus-visible,
.socials a:hover,
.socials a:focus-visible{
transform:none;
}
}
/* Quote section is not hidden under the sticky header. */
#quote{
scroll-margin-top:110px;
}
/* =========================================================
NEMREX — Responsive + Touch Interaction System
Desktop hover is enhanced only when a real hover device exists.
Touch devices use .is-touch-active / :active states instead.
========================================================= */
/* Prevent browser tap-zoom/layout jumps on controls while preserving normal page zoom. */
a, button, input, textarea, select, [role="button"], .orbit-card, .tool {
-webkit-tap-highlight-color: transparent;
}
a, button, [role="button"], .orbit-card, .tool {
touch-action: manipulation;
}
button, a {
-webkit-user-select: none;
user-select: none;
}
/* Keyboard accessibility remains available. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.orbit-card:focus-visible,
.tool:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
}
/* ---------------- DESKTOP / REAL HOVER ---------------- */
@media (hover: hover) and (pointer: fine) {
.links > a:hover,
.drop > button:hover {
color: var(--gold);
}
.drop:hover .drop-menu {
display: block;
}
.drop-menu a:hover {
background: #f1f4f7;
color: var(--gold);
}
.btn:hover,
.quote:hover {
background: var(--navy);
color: #fff;
transform: translateY(-2px);
}
.btn.outline:hover {
background: var(--gold);
border-color: var(--gold);
color: var(--navy);
}
.btn:hover .arr {
transform: translateX(4px);
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track {
animation-play-state: paused;
}
.marquee .orbit-card:hover,
.material-card:hover {
transform: translateY(-5px);
background: #fff;
box-shadow: 0 8px 22px rgba(13,31,61,.12);
}
.marquee .orbit-card:hover .orbit-image,
.material-card:hover .orbit-image {
transform: scale(1.045);
border-color: var(--gold) !important;
box-shadow: 0 0 0 3px rgba(229,169,16,.14);
}
.marquee .orbit-card:hover strong,
.material-card:hover strong {
color: var(--gold) !important;
}
.tool:hover {
background: var(--navy);
color: #fff;
border-color: var(--gold);
transform: translateY(-2px);
box-shadow: 0 7px 18px rgba(13,31,61,.14);
}
.socials a:hover,
.quick-action:hover {
transform: translateY(-3px);
box-shadow: 0 8px 18px rgba(13,31,61,.18);
}
.hero-arrow:hover {
background: var(--gold);
color: var(--navy);
}
.links > a.nav-icon:hover {
background: var(--navy);
color: var(--gold);
transform: translateY(-2px);
}
}
/* ---------------- TOUCH / COARSE POINTER ---------------- */
@media (hover: none), (pointer: coarse) {
/* Neutralize sticky browser-emulated :hover so it cannot leave a
desktop hover style stuck after a tap. */
.links > a:hover,
.drop > button:hover,
.drop-menu a:hover,
.btn:hover,
.btn.outline:hover,
.quote:hover,
.tool:hover,
.socials a:hover,
.quick-action:hover,
.hero-arrow:hover,
.links > a.nav-icon:hover,
.marquee .orbit-card:hover,
.material-card:hover,
.marquee .orbit-card:hover .orbit-image,
.material-card:hover .orbit-image,
.marquee .orbit-card:hover strong,
.material-card:hover strong {
color: inherit;
background-color: inherit;
border-color: inherit;
box-shadow: none;
transform: none;
}
.btn:hover .arr {
transform: none;
}
.drop:hover .drop-menu {
display: none;
}
/* JS adds this class for a short, visible tap state. */
.is-touch-active {
transform: translateY(-2px) scale(.985) !important;
transition: transform .12s ease, background-color .12s ease,
color .12s ease, box-shadow .12s ease !important;
}
.is-touch-active.btn,
.is-touch-active.quote {
background: var(--navy) !important;
color: #fff !important;
box-shadow: 0 6px 16px rgba(13,31,61,.16) !important;
}
.is-touch-active.btn.outline {
background: var(--gold) !important;
border-color: var(--gold) !important;
color: var(--navy) !important;
}
.is-touch-active .arr {
transform: translateX(3px) !important;
}
.is-touch-active.orbit-card,
.is-touch-active.material-card {
transform: translateY(-4px) !important;
background: #fff !important;
box-shadow: 0 7px 18px rgba(13,31,61,.12) !important;
}
.is-touch-active.orbit-card .orbit-image,
.is-touch-active.material-card .orbit-image {
transform: scale(1.035) !important;
border-color: var(--gold) !important;
box-shadow: 0 0 0 3px rgba(229,169,16,.12) !important;
}
.is-touch-active.orbit-card strong,
.is-touch-active.material-card strong {
color: var(--gold) !important;
}
.is-touch-active.tool {
background: var(--navy) !important;
color: #fff !important;
border-color: var(--gold) !important;
box-shadow: 0 6px 16px rgba(13,31,61,.14) !important;
}
.is-touch-active.social-link,
.is-touch-active.quick-action {
transform: translateY(-3px) scale(.98) !important;
box-shadow: 0 8px 18px rgba(13,31,61,.18) !important;
}
/* Touching a marquee temporarily pauses it. */
.marquee.is-touching .marquee-track {
animation-play-state: paused !important;
}
}
/* ---------------- MOBILE / TABLET LAYOUT ---------------- */
@media (max-width: 900px) {
.section {
padding-left: 5%;
padding-right: 5%;
}
.about,
.tech,
.quote-layout {
grid-template-columns: 1fr;
}
.about-art {
min-height: 260px;
}
.tools {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.quote-copy,
.quote-form {
min-height: auto;
}
}
@media (max-width: 760px) {
html {
scroll-padding-top: 90px;
}
body {
overflow-x: hidden;
}
header {
z-index: 100;
}
.nav {
width: 100%;
min-height: 66px;
padding: 8px 4%;
gap: 10px;
}
.brand {
min-width: 0;
flex: 1 1 auto;
}
.brand img,
header .brand img {
width: 52px;
height: 52px;
flex-basis: 52px;
}
.brand-text,
.lockup {
min-width: 0;
}
.brand-text b,
.lockup b {
font-size: clamp(20px, 6vw, 25px);
}
.brand-text small,
.lockup small {
font-size: 8px;
}
.menu {
display: block !important;
flex: 0 0 auto;
min-width: 44px;
min-height: 44px;
padding: 8px 10px;
}
.links {
top: 100%;
left: 0;
right: 0;
width: 100%;
max-height: calc(100vh - 66px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 10px 5% 16px;
}
.links > a,
.drop > button {
min-height: 46px;
display: flex;
align-items: center;
width: 100%;
padding: 12px 4px;
}
.drop-menu {
position: static;
width: 100%;
min-width: 0;
margin: 2px 0 5px 8px;
border-top: 0;
border-left: 2px solid var(--gold);
box-shadow: none;
}
.drop-menu a {
min-height: 44px;
display: flex;
align-items: center;
padding: 11px 12px;
}
.hero {
min-height: 470px;
}
.hero-inner {
width: 100%;
padding: 48px 6% 62px;
}
.hero-controls {
bottom: 15px;
}
.benefits {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tools {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.quote-section {
padding: 34px 5%;
}
.quote-copy,
.quote-form {
width: 100%;
padding: 26px 22px;
}
.quote-form input,
.quote-form textarea,
.quote-form select {
font-size: 16px !important; /* prevents iOS/Chrome mobile input zoom */
}
/* Footer becomes one vertical section at a time. */
footer .foot-grid {
grid-template-columns: 1fr !important;
gap: 30px !important;
}
footer .foot-grid > div {
grid-column: auto !important;
width: 100%;
}
footer .bottom {
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
gap: 8px;
}
footer .bottom > * {
text-align: center !important;
}
.quick-actions {
left: 12px;
bottom: 14px;
}
.quick-action {
width: 46px;
height: 46px;
}
/* Don't show desktop tooltip labels on touch screens. */
.quick-action::after {
display: none !important;
}
}
@media (max-width: 520px) {
.section {
padding-top: 42px;
padding-bottom: 42px;
}
.hero {
min-height: 455px;
}
.hero-inner {
padding: 42px 6% 62px;
}
.hero-inner .btn {
width: 100%;
justify-content: center;
margin-right: 0;
margin-bottom: 10px;
}
.benefits {
grid-template-columns: 1fr;
}
.benefit {
justify-content: flex-start;
}
.tools {
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.orbit-card {
flex-basis: 124px;
width: 124px;
}
.orbit-image {
width: 96px;
height: 96px;
}
.quote-copy h2 {
font-size: clamp(27px, 8vw, 34px);
}
.form-row {
grid-template-columns: 1fr !important;
}
footer {
padding-left: 18px;
padding-right: 18px;
}
}
@media (max-width: 380px) {
.brand img,
header .brand img {
width: 46px;
height: 46px;
flex-basis: 46px;
}
.brand-text b,
.lockup b {
font-size: 20px;
}
.brand-text small,
.lockup small {
font-size: 7px;
}
.tools {
grid-template-columns: 1fr;
}
.quick-actions {
left: 8px;
}
}
/* Respect users who request reduced motion. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
}
/* =========================================================
NEMREX — FINAL MOBILE / TOUCH FIX
Fixes:
1. True hover only on mouse/trackpad.
2. Visible tap feedback on touch devices.
3. Correct header logo proportions (original logo is 275x185).
4. Correct .lockup targeting used by the actual HTML.
5. Stable mobile navigation and dropdown alignment.
6. Consistent spacing / overflow at small widths.
========================================================= */
html {
overflow-x: hidden;
-webkit-text-size-adjust: 100%;
}
body {
overflow-x: hidden;
}
header {
position: sticky;
top: 0;
z-index: 1000;
}
.nav {
width: 100%;
max-width: 1660px;
min-height: 76px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 8px 4%;
}
.brand {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
min-height: 72px;
flex: 0 1 auto;
}
/* IMPORTANT: the supplied logo is 275x185 (wide), so do NOT force it
into a 76x76 square. Height controls the visual size while width
stays proportional. */
header .brand img {
width: auto !important;
height: 76px !important;
max-width: none !important;
flex: 0 0 auto !important;
object-fit: contain;
display: block;
}
header .brand .lockup {
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
line-height: 1;
white-space: nowrap;
}
header .brand .lockup b {
font-family: "Yeseva One", Georgia, "Times New Roman", serif;
font-size: 30px;
font-weight: 400;
line-height: 1;
letter-spacing: .025em;
color: var(--navy);
}
header .brand .lockup small {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin-top: 7px;
font-family: "Canva Sans", "Segoe UI", Arial, sans-serif;
font-size: 12px;
font-weight: 700;
line-height: 1;
letter-spacing: 0;
color: var(--gold);
}
.menu {
display: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
padding: 0;
margin: 0;
border: 1px solid #d9dee6;
border-radius: 6px;
background: #fff;
color: var(--navy);
font-size: 0;
line-height: 1;
cursor: pointer;
touch-action: manipulation;
}
.menu::before {
content: "☰";
font-size: 25px;
line-height: 1;
}
/* Base interaction transitions — hover is NOT defined here. */
.btn,
.quote,
.tool,
.socials a,
.quick-action,
.nav-icon,
.orbit-card,
.material-card,
.hero-arrow {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
transition:
transform .18s ease,
background-color .18s ease,
color .18s ease,
border-color .18s ease,
box-shadow .18s ease;
}
/* REAL mouse/trackpad hover only. */
@media (hover: hover) and (pointer: fine) {
.btn:hover,
.quote:hover {
background: var(--navy);
color: #fff;
transform: translateY(-2px);
}
.btn.outline:hover {
background: var(--gold);
border-color: var(--gold);
color: var(--navy);
}
.tool:hover {
background: var(--navy);
color: #fff;
border-color: var(--gold);
transform: translateY(-2px);
box-shadow: 0 7px 18px rgba(13,31,61,.14);
}
.marquee .orbit-card:hover,
.material-card:hover {
transform: translateY(-5px);
background: #fff;
box-shadow: 0 8px 22px rgba(13,31,61,.12);
}
.marquee .orbit-card:hover .orbit-image,
.material-card:hover .orbit-image {
transform: scale(1.045);
border-color: var(--gold) !important;
box-shadow: 0 0 0 3px rgba(229,169,16,.14);
}
.marquee .orbit-card:hover strong,
.material-card:hover strong {
color: var(--gold) !important;
}
.socials a:hover,
.quick-action:hover {
transform: translateY(-3px);
box-shadow: 0 8px 18px rgba(13,31,61,.18);
}
.hero-arrow:hover {
background: var(--gold);
color: var(--navy);
}
}
/* TOUCH DEVICES — no fake/sticky :hover. */
@media (hover: none), (pointer: coarse) {
.links > a:hover,
.drop > button:hover,
.drop-menu a:hover,
.btn:hover,
.btn.outline:hover,
.quote:hover,
.tool:hover,
.socials a:hover,
.quick-action:hover,
.hero-arrow:hover,
.nav-icon:hover,
.marquee .orbit-card:hover,
.material-card:hover,
.marquee .orbit-card:hover .orbit-image,
.material-card:hover .orbit-image,
.marquee .orbit-card:hover strong,
.material-card:hover strong {
transform: none !important;
}
/* Visible tap state is controlled by JS. */
.touch-pressed.btn,
.touch-pressed.quote {
background: var(--navy) !important;
color: #fff !important;
transform: translateY(-2px) scale(.985) !important;
box-shadow: 0 7px 18px rgba(13,31,61,.18) !important;
}
.touch-pressed.btn.outline {
background: var(--gold) !important;
border-color: var(--gold) !important;
color: var(--navy) !important;
}
.touch-pressed.tool {
background: var(--navy) !important;
color: #fff !important;
border-color: var(--gold) !important;
transform: translateY(-2px) !important;
box-shadow: 0 7px 18px rgba(13,31,61,.14) !important;
}
.touch-pressed.orbit-card,
.touch-pressed.material-card {
background: #fff !important;
transform: translateY(-4px) !important;
box-shadow: 0 7px 18px rgba(13,31,61,.12) !important;
}
.touch-pressed.orbit-card .orbit-image,
.touch-pressed.material-card .orbit-image {
transform: scale(1.035) !important;
border-color: var(--gold) !important;
box-shadow: 0 0 0 3px rgba(229,169,16,.12) !important;
}
.touch-pressed.orbit-card strong,
.touch-pressed.material-card strong {
color: var(--gold) !important;
}
.touch-pressed.social-link,
.touch-pressed.quick-action,
.touch-pressed.hero-arrow,
.touch-pressed.nav-icon {
transform: translateY(-2px) scale(.98) !important;
box-shadow: 0 7px 18px rgba(13,31,61,.18) !important;
}
.touch-paused .marquee-track {
animation-play-state: paused !important;
}
}
/* Tablet/mobile navigation. */
@media (max-width: 1100px) {
.nav {
min-height: 74px;
padding: 7px 4%;
gap: 12px;
}
header .brand img {
height: 64px !important;
}
header .brand .lockup b {
font-size: 26px;
}
header .brand .lockup small {
font-size: 10px;
}
.menu {
display: inline-flex !important;
flex: 0 0 44px;
margin-left: auto;
}
.links {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
width: 100%;
max-height: calc(100vh - 74px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 10px 5% 16px;
margin: 0;
background: #fff;
border-top: 1px solid #e1e6ec;
box-shadow: 0 14px 28px rgba(13,31,61,.14);
align-items: stretch;
flex-direction: column;
gap: 0;
}
.links.open {
display: flex;
}
.links > a,
.drop > button {
width: 100%;
min-height: 48px;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 13px 4px;
font-size: 15px;
text-align: left;
}
.links > a::after,
.drop > button::after {
bottom: 2px;
}
.drop-menu {
position: static !important;
width: 100%;
min-width: 0;
margin: 2px 0 6px 8px;
padding: 3px 0 3px 12px;
border: 0 !important;
border-left: 2px solid var(--gold) !important;
border-radius: 0;
box-shadow: none !important;
}
.drop-menu a {
min-height: 44px;
display: flex;
align-items: center;
padding: 11px 12px;
font-size: 14px;
}
.links > .nav-sep {
display: none;
}
.links > .nav-icon {
width: 100%;
min-height: 48px;
height: auto;
padding: 13px 4px;
border: 0;
border-radius: 0;
background: transparent;
justify-content: flex-start;
gap: 12px;
}
.nav-icon-label {
display: inline;
}
.links > .quote {
justify-content: center;
width: 100%;
margin-top: 8px;
}
}
/* Mobile content alignment. */
@media (max-width: 900px) {
.section {
width: 100%;
padding-left: 5%;
padding-right: 5%;
}
.about,
.tech,
.quote-layout {
grid-template-columns: 1fr !important;
}
.about-art {
min-height: 260px;
}
.benefits {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tools {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.quote-copy,
.quote-form {
min-width: 0;
width: 100%;
}
.form-row {
grid-template-columns: 1fr 1fr;
}
}
/* Small phones. */
@media (max-width: 760px) {
html {
scroll-padding-top: 88px;
}
.nav {
min-height: 68px;
padding: 7px 4%;
gap: 9px;
}
header .brand {
gap: 10px;
min-height: 58px;
max-width: calc(100% - 54px);
}
header .brand img {
height: 58px !important;
}
header .brand .lockup {
min-width: 0;
max-width: calc(100vw - 132px);
}
header .brand .lockup b {
font-size: clamp(21px, 7vw, 25px);
overflow: hidden;
text-overflow: clip;
}
header .brand .lockup small {
font-size: clamp(8px, 2.5vw, 10px);
margin-top: 6px;
}
.links {
max-height: calc(100vh - 68px);
}
.hero {
min-height: 455px;
}
.hero-inner {
width: 100%;
padding: 42px 6% 62px;
}
.hero-inner .btn {
width: 100%;
justify-content: center;
margin-right: 0;
margin-bottom: 10px;
}
.benefits {
grid-template-columns: 1fr 1fr;
}
.benefit {
min-width: 0;
justify-content: flex-start;
padding: 15px 10px;
font-size: 13px;
}
.tools {
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.orbit-card {
flex-basis: 124px;
width: 124px;
}
.orbit-image {
width: 96px;
height: 96px;
}
.quote-section {
padding: 34px 5%;
}
.quote-copy,
.quote-form {
min-height: 0;
padding: 24px 20px;
}
.quote-form input,
.quote-form textarea,
.quote-form select {
font-size: 16px !important;
}
.form-row {
grid-template-columns: 1fr !important;
}
footer .foot-grid {
grid-template-columns: 1fr !important;
gap: 28px !important;
}
footer .foot-grid > div {
grid-column: auto !important;
width: 100%;
}
footer .bottom {
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: 8px;
}
.quick-actions {
left: 12px;
bottom: 14px;
}
.quick-action {
width: 46px;
height: 46px;
}
.quick-action::after {
display: none !important;
}
}
/* Very small phones — keep the complete wordmark visible. */
@media (max-width: 420px) {
header .brand img {
height: 52px !important;
}
header .brand {
gap: 8px;
}
header .brand .lockup b {
font-size: 21px;
letter-spacing: .02em;
}
header .brand .lockup small {
font-size: 8px;
}
.menu {
width: 42px;
height: 42px;
min-width: 42px;
flex-basis: 42px;
}
.benefits {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
.touch-pressed,
.btn,
.tool,
.orbit-card,
.material-card,
.socials a,
.quick-action {
transition: none !important;
}
}
/* =========================================================
NEMREX — FINAL MOBILE LAYOUT + FLOATING ACTIONS
========================================================= */
/* Benefits: keep the five points compact and balanced on phones. */
@media (max-width: 760px) {
.benefits {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
width: 100%;
overflow: hidden;
}
.benefit {
min-height: 76px;
padding: 12px 14px !important;
justify-content: flex-start !important;
align-items: center;
gap: 10px;
border-right: 1px solid #d3dce5;
border-bottom: 1px solid #d3dce5;
font-size: 13px !important;
line-height: 1.35;
}
.benefit:nth-child(2n) {
border-right: 0;
}
.benefit:last-child {
grid-column: 1 / -1;
border-right: 0;
justify-content: center !important;
}
.benefit svg {
width: 23px;
height: 23px;
flex: 0 0 23px;
}
}
/* Very narrow phones: retain two columns but reduce spacing slightly. */
@media (max-width: 380px) {
.benefit {
min-height: 72px;
padding: 10px 9px !important;
gap: 8px;
font-size: 12.5px !important;
}
.benefit svg {
width: 21px;
height: 21px;
flex-basis: 21px;
}
}
/* ---------------------------------------------------------
Floating contact controls — original circular style
WhatsApp + Email + Google Review = right-middle stack.
Back-to-top remains separate at bottom-right.
--------------------------------------------------------- */
.quick-actions {
position: fixed !important;
left: auto !important;
right: 14px !important;
top: 50% !important;
bottom: auto !important;
transform: translateY(-50%) !important;
z-index: 1200 !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
.quick-actions .quick-action {
width: 46px !important;
height: 46px !important;
min-width: 46px !important;
min-height: 46px !important;
margin: 0 !important;
border-radius: 50% !important;
display: grid !important;
place-items: center !important;
background: #fff !important;
border: 1px solid #fff !important;
box-shadow: 0 6px 16px rgba(13,31,61,.24) !important;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.quick-actions .quick-action svg {
width: 23px !important;
height: 23px !important;
}
.quick-actions .quick-action.whatsapp { background: #25D366 !important; }
.quick-actions .quick-action.whatsapp svg { fill: #fff !important; }
.quick-actions .quick-action.email { background: #EA4335 !important; }
.quick-actions .quick-action.email svg { fill: #fff !important; }
.quick-actions .quick-action.google { background: #fff !important; }
@media (hover: hover) and (pointer: fine) {
.quick-actions .quick-action:hover {
transform: translateY(-2px) scale(1.04) !important;
box-shadow: 0 9px 20px rgba(13,31,61,.30) !important;
outline: 2px solid var(--gold);
outline-offset: 2px;
}
}
@media (hover: none), (pointer: coarse) {
.quick-actions .quick-action:active,
.quick-actions .quick-action.is-touch-active {
transform: scale(.96) !important;
box-shadow: 0 5px 12px rgba(13,31,61,.28) !important;
}
}
/* Keep the floating controls away from the edge on small phones. */
@media (max-width: 520px) {
.quick-actions {
right: 10px !important;
gap: 9px !important;
}
.quick-actions .quick-action {
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
}
.quick-actions .quick-action svg {
width: 22px !important;
height: 22px !important;
}
}
/* Don't let the fixed controls create horizontal overflow. */
html, body {
max-width: 100%;
overflow-x: hidden;
}
/* =========================================================
FINAL MOBILE ADJUSTMENTS
1. Four benefit boxes only (2 x 2)
2. Comfortable side spacing on phones
3. Contact icons sit lower than center, above Back-to-Top
4. Footer Back-to-Top text removed; floating arrow remains
========================================================= */
@media (max-width: 760px) {
.benefits {
width: calc(100% - 28px) !important;
max-width: 720px !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
border: 1px solid #d3dce5 !important;
border-radius: 0 !important;
overflow: hidden !important;
}
.benefit {
min-height: 78px !important;
padding: 12px 14px !important;
justify-content: flex-start !important;
align-items: center !important;
gap: 10px !important;
border: 0 !important;
border-right: 1px solid #d3dce5 !important;
border-bottom: 1px solid #d3dce5 !important;
font-size: 13px !important;
line-height: 1.35 !important;
}
.benefit:nth-child(2n) {
border-right: 0 !important;
}
.benefit:nth-child(n+3) {
border-bottom: 0 !important;
}
.benefit svg {
width: 22px !important;
height: 22px !important;
flex: 0 0 22px !important;
}
/* Three circular contact buttons: lower than the viewport center,
but still clearly above the separate Back-to-Top button. */
.quick-actions {
top: 64vh !important;
right: 10px !important;
left: auto !important;
bottom: auto !important;
transform: translate3d(0, -50%, 0) !important;
gap: 9px !important;
z-index: 1200 !important;
}
.quick-actions .quick-action {
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
}
/* The floating arrow is the only Back-to-Top control on mobile. */
footer .bottom > a[href="/"] {
display: none !important;
}
}
@media (max-width: 380px) {
.benefits {
width: calc(100% - 20px) !important;
}
.benefit {
min-height: 72px !important;
padding: 10px 10px !important;
gap: 8px !important;
font-size: 12.5px !important;
}
.benefit svg {
width: 21px !important;
height: 21px !important;
flex-basis: 21px !important;
}
.quick-actions {
right: 8px !important;
top: 63vh !important;
}
}
/* FINAL MOBILE FLOATING CONTROLS
WhatsApp + Email + Google Review sit directly above Back-to-Top.
The gap is intentionally small so the controls feel like one footer-side group. */
@media (max-width: 760px) {
.quick-actions {
top: auto !important;
bottom: 64px !important;
right: 10px !important;
left: auto !important;
transform: none !important;
gap: 8px !important;
z-index: 1200 !important;
}
.quick-actions .quick-action {
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
}
.back-top {
right: 10px !important;
bottom: 14px !important;
width: 42px !important;
height: 42px !important;
z-index: 1201 !important;
}
}
@media (max-width: 380px) {
.quick-actions {
right: 8px !important;
bottom: 62px !important;
gap: 7px !important;
}
.quick-actions .quick-action {
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
min-height: 42px !important;
}
.back-top {
right: 8px !important;
bottom: 12px !important;
width: 40px !important;
height: 40px !important;
}
}
/* NEMREX V7 — clean spacing for the 4 benefit cards on desktop + mobile */
.benefits {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 8px !important;
padding: 8px 10px !important;
background: #fff !important;
}
.benefit {
min-width: 0;
min-height: 78px;
border: 1px solid #d3dce5 !important;
background: #f5f8fa;
border-radius: 2px;
}
@media (max-width: 900px) {
.benefits {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
width: calc(100% - 28px) !important;
margin-left: auto !important;
margin-right: auto !important;
gap: 8px !important;
padding: 8px !important;
}
.benefit {
min-height: 78px !important;
border: 1px solid #d3dce5 !important;
border-radius: 2px;
}
/* Keep all four cards in a true 2 x 2 grid. */
.benefit:last-child {
grid-column: auto !important;
justify-content: flex-start !important;
}
}
@media (max-width: 380px) {
.benefits {
width: calc(100% - 20px) !important;
gap: 7px !important;
padding: 7px !important;
}
.benefit {
min-height: 72px !important;
}
}
/* Keep the floating arrow clear of the bottom edge and leave a visible gap
between the three contact buttons and the arrow. */
@media (max-width: 760px) {
.quick-actions {
bottom: 72px !important;
gap: 8px !important;
}
.back-top {
bottom: 18px !important;
}
}
@media (max-width: 380px) {
.quick-actions {
bottom: 70px !important;
}
.back-top {
bottom: 16px !important;
}
}
/* =========================================================
FINAL FLOATING CONTACT POSITION
Match the completed About Us page:
WhatsApp / Email / Google Review = RIGHT SIDE, LOWER AREA
Back-to-Top = directly below the contact group.
========================================================= */
.quick-actions{
position:fixed !important;
right:16px !important;
left:auto !important;
bottom:86px !important;
top:auto !important;
z-index:1000 !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
gap:9px !important;
}
.quick-actions .quick-action{
width:48px !important;
height:48px !important;
min-width:48px !important;
min-height:48px !important;
border-radius:50% !important;
display:grid !important;
place-items:center !important;
box-shadow:0 5px 14px rgba(13,31,61,.28) !important;
}
.quick-actions .quick-action svg{
width:25px !important;
height:25px !important;
}
.quick-actions .quick-action::after{
left:auto !important;
right:calc(100% + 10px) !important;
}
/* Desktop/tablet: touch/focus feedback remains available without
changing the fixed right-side position. */
@media (hover:hover) and (pointer:fine){
.quick-actions .quick-action:hover{
transform:translateY(-2px) scale(1.03) !important;
box-shadow:0 9px 20px rgba(13,31,61,.32) !important;
outline:2px solid var(--gold) !important;
outline-offset:2px !important;
}
}
@media (hover:none), (pointer:coarse){
.quick-actions .quick-action:active,
.quick-actions .quick-action.is-touch-active{
transform:scale(.96) !important;
box-shadow:0 5px 12px rgba(13,31,61,.28) !important;
outline:2px solid var(--gold) !important;
outline-offset:2px !important;
}
}
/* Back-to-top directly underneath the three contact buttons. */
.back-top{
position:fixed !important;
right:16px !important;
left:auto !important;
bottom:20px !important;
width:48px !important;
height:48px !important;
min-width:48px !important;
min-height:48px !important;
z-index:1001 !important;
}
/* Mobile: keep the same right-side vertical group, with smaller
controls and a small intentional gap above Back-to-Top. */
@media (max-width:760px){
.quick-actions{
right:12px !important;
left:auto !important;
bottom:72px !important;
top:auto !important;
gap:8px !important;
}
.quick-actions .quick-action{
width:46px !important;
height:46px !important;
min-width:46px !important;
min-height:46px !important;
}
.quick-actions .quick-action svg{
width:24px !important;
height:24px !important;
}
.quick-actions .quick-action::after{
display:none !important;
}
.back-top{
right:12px !important;
bottom:18px !important;
width:46px !important;
height:46px !important;
min-width:46px !important;
min-height:46px !important;
}
}
@media (max-width:380px){
.quick-actions{
right:8px !important;
bottom:70px !important;
gap:7px !important;
}
.quick-actions .quick-action{
width:42px !important;
height:42px !important;
min-width:42px !important;
min-height:42px !important;
}
.quick-actions .quick-action svg{
width:22px !important;
height:22px !important;
}
.back-top{
right:8px !important;
bottom:16px !important;
width:40px !important;
height:40px !important;
min-width:40px !important;
min-height:40px !important;
}
}
/* FINAL FLOATING CONTROL GROUP — WhatsApp / Email / Google / Back to Top */
.quick-actions{
position:fixed !important;
right:16px !important;
left:auto !important;
top:auto !important;
bottom:20px !important;
transform:none !important;
width:auto !important;
height:auto !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:flex-end !important;
gap:8px !important;
z-index:1200 !important;
}
.quick-actions .quick-action,
.quick-actions .back-top{
position:static !important;
flex:0 0 48px !important;
width:48px !important;
height:48px !important;
min-width:48px !important;
min-height:48px !important;
max-width:48px !important;
max-height:48px !important;
margin:0 !important;
padding:0 !important;
transform:none !important;
box-sizing:border-box !important;
}
/* Keep Back-to-Top out of the layout until it becomes visible. */
.quick-actions .back-top{
display:none !important;
opacity:0 !important;
visibility:hidden !important;
}
.quick-actions .back-top.show{
display:grid !important;
opacity:1 !important;
visibility:visible !important;
}
.quick-actions .quick-action{
display:grid !important;
place-items:center !important;
}
.quick-actions .quick-action svg{
width:22px !important;
height:22px !important;
max-width:22px !important;
max-height:22px !important;
}
.quick-actions .back-top{
border-radius:50% !important;
font-size:22px !important;
line-height:1 !important;
cursor:pointer !important;
}
/* Fine-pointer hover only; touch devices use active/focus feedback. */
@media (hover:hover) and (pointer:fine){
.quick-actions .quick-action:hover,
.quick-actions .back-top:hover{
transform:translateY(-2px) !important;
}
}
@media (hover:none), (pointer:coarse){
.quick-actions .quick-action:active,
.quick-actions .quick-action:focus-visible,
.quick-actions .back-top:active,
.quick-actions .back-top:focus-visible{
transform:scale(.94) !important;
}
}
@media (max-width:760px){
.quick-actions{
right:12px !important;
bottom:18px !important;
gap:8px !important;
}
.quick-actions .quick-action,
.quick-actions .back-top{
flex-basis:46px !important;
width:46px !important;
height:46px !important;
min-width:46px !important;
min-height:46px !important;
max-width:46px !important;
max-height:46px !important;
}
}
@media (max-width:380px){
.quick-actions{
right:8px !important;
bottom:16px !important;
gap:7px !important;
}
.quick-actions .quick-action,
.quick-actions .back-top{
flex-basis:42px !important;
width:42px !important;
height:42px !important;
min-width:42px !important;
min-height:42px !important;
max-width:42px !important;
max-height:42px !important;
}
.quick-actions .quick-action svg{
width:20px !important;
height:20px !important;
}
}
@media (prefers-reduced-motion:reduce){
.quick-actions .quick-action,
.quick-actions .back-top{
transition:none !important;
}
}
/* =========================================================
NEMREX HOME PAGE — FINAL VISUAL / RESPONSIVE ALIGNMENT
Matched to the finished About Us page supplied by the user.
This layer intentionally overrides older conflicting rules.
========================================================= */
.home-page{
--navy:#0D1F3D;
--gold:#E5A910;
--grey:#545454;
--soft:#f3f7fa;
overflow-x:hidden;
}
.home-page, .home-page *{box-sizing:border-box}
.home-page body{overflow-x:hidden}
.home-page header .nav{
width:100%;max-width:1400px;margin:0 auto;min-height:78px;
display:flex;align-items:center;justify-content:space-between;gap:14px;
padding:7px 3.2%!important;
}
.home-page header .brand{
gap:14px!important;min-height:72px;flex:0 0 auto;overflow:visible;
}
.home-page header .brand img{
width:auto!important;height:70px!important;max-width:none!important;
flex:0 0 auto!important;object-fit:contain!important;
}
.home-page header .brand .lockup{
display:flex!important;flex-direction:column!important;min-width:0;
white-space:nowrap;justify-content:center;
}
.home-page header .brand .lockup b{
font-family:"Yeseva One",Georgia,"Times New Roman",serif!important;
font-size:30px!important;font-weight:400!important;line-height:1!important;
letter-spacing:.025em!important;color:#0D1F3D!important;white-space:nowrap!important;
}
.home-page header .brand .lockup small{
display:flex!important;justify-content:space-between!important;align-items:center!important;
margin-top:7px!important;color:#E5A910!important;
font-family:"Canva Sans","Open Sans",Arial,sans-serif!important;
font-size:11px!important;line-height:1!important;letter-spacing:.40em!important;font-weight:700!important;
}
.home-page header .links{
flex:1 1 auto;min-width:0;justify-content:flex-end;align-items:center;
gap:clamp(9px,1.05vw,18px);font-size:13px;
}
.home-page header .links>a,.home-page header .links>.drop>button{
min-height:44px;display:inline-flex;align-items:center;
}
.home-page header .menu{
display:none;flex:0 0 44px;width:44px;height:44px;min-width:44px;
padding:0;align-items:center;justify-content:center;border:1px solid #d8dee7;
border-radius:5px;background:#fff;color:#0D1F3D;font-size:21px;line-height:1;cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
.home-page h1,.home-page h2,.home-page h3,.home-page h4{
font-family:"Yeseva One",Georgia,"Times New Roman",serif;
}
.home-page p,.home-page li,.home-page label,.home-page input,.home-page textarea,
.home-page select,.home-page button,.home-page .btn,.home-page .links{
font-family:"Canva Sans","Open Sans",Arial,Helvetica,sans-serif;
}
.home-page p{font-size:15.5px;line-height:1.7}
.home-page h1{line-height:1.08;overflow-wrap:anywhere}
.home-page h2{line-height:1.15;overflow-wrap:anywhere}
/* Hero: keep the existing supplied artwork, but use the same clean type rhythm. */
.home-page .hero h1{font-family:"Yeseva One",Georgia,serif;color:#fff!important;text-shadow:0 2px 18px rgba(4,12,28,.45)}
.home-page .hero h1 em{color:#E5A910!important}
.home-page .hero .eyebrow{font-family:"Canva Sans","Open Sans",Arial,sans-serif;text-shadow:0 1px 10px rgba(4,12,28,.5)}
.home-page .hero p{font-family:"Canva Sans","Open Sans",Arial,sans-serif}
.home-page .btn{min-height:48px}
/* Floating controls: all four are ONE visual group. */
.home-page .quick-actions{
position:fixed!important;right:16px!important;left:auto!important;
bottom:18px!important;top:auto!important;z-index:1200!important;
display:flex!important;flex-direction:column!important;align-items:center!important;
gap:8px!important;width:auto!important;height:auto!important;
transform:none!important;
}
.home-page .quick-actions .quick-action,
.home-page .quick-actions .back-top{
position:static!important;flex:0 0 48px!important;width:48px!important;height:48px!important;
min-width:48px!important;min-height:48px!important;max-width:48px!important;max-height:48px!important;
margin:0!important;padding:0!important;border-radius:50%!important;box-sizing:border-box!important;
}
.home-page .quick-actions .quick-action{
display:grid!important;place-items:center!important;border:0!important;
box-shadow:0 5px 14px rgba(13,31,61,.28)!important;
}
.home-page .quick-actions .quick-action svg{width:25px!important;height:25px!important;max-width:25px!important;max-height:25px!important}
.home-page .quick-actions .quick-action.whatsapp{background:#25D366!important}
.home-page .quick-actions .quick-action.email{background:#EA4335!important}
.home-page .quick-actions .quick-action.google{background:#fff!important;border:1px solid #dadce0!important}
.home-page .quick-actions .back-top{
display:none!important;background:#E5A910!important;color:#0D1F3D!important;border:0!important;
box-shadow:0 5px 14px rgba(13,31,61,.28)!important;
font-family:Arial,sans-serif!important;font-size:21px!important;font-weight:500!important;
line-height:1!important;place-items:center;
}
.home-page .quick-actions .back-top.show{display:grid!important;opacity:1!important;visibility:visible!important}
/* Footer matches the finished About Us footer proportions. */
.home-page footer p,.home-page footer .foot-grid>div:first-child>p{color:#fff!important;opacity:1!important}
.home-page footer .foot-brand{gap:14px!important;align-items:center!important}
.home-page footer .foot-brand img{width:auto!important;height:70px!important;max-width:none!important;flex:0 0 auto!important;object-fit:contain!important}
.home-page footer .foot-brand .lockup b{
font-family:"Yeseva One",Georgia,serif!important;font-size:30px!important;font-weight:400!important;
line-height:1!important;color:#fff!important;white-space:nowrap!important;
}
.home-page footer .foot-brand .lockup small{
display:flex!important;width:100%!important;min-width:100%!important;justify-content:space-between!important;
align-items:center!important;white-space:nowrap!important;letter-spacing:0!important;line-height:1!important;
font-family:"Canva Sans","Open Sans",Arial,sans-serif!important;color:#E5A910!important;
}
/* Mobile: same menu behavior and footer stacking as About Us. */
@media (max-width:1100px){
.home-page header .brand img{height:64px!important}
.home-page header .brand .lockup b{font-size:27px!important}
.home-page header .brand .lockup small{font-size:10px!important}
.home-page footer .foot-brand img{height:64px!important}
}
@media (max-width:790px){
.home-page header .nav{min-height:76px!important;padding:6px 4.5%!important}
.home-page header .brand{gap:12px!important;min-height:64px!important}
.home-page header .brand img{width:auto!important;height:62px!important;flex-basis:auto!important}
.home-page header .brand .lockup b{font-size:25px!important}
.home-page header .brand .lockup small{font-size:9px!important;letter-spacing:.38em!important}
.home-page header .menu{display:flex!important;width:46px!important;height:46px!important;min-width:46px!important}
.home-page header .links{
display:none!important;position:absolute!important;top:100%!important;left:0!important;right:0!important;width:100%!important;
max-height:calc(100vh - 76px);overflow-y:auto;padding:10px 4.5% 16px!important;background:#fff!important;
border-top:1px solid #e0e5eb!important;box-shadow:0 14px 28px rgba(13,31,61,.16)!important;
flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:0!important;
}
.home-page header .links.open{display:flex!important}
.home-page header .links>a,.home-page header .links>.drop>button{
width:100%!important;min-height:48px!important;padding:0 4px!important;display:flex!important;
align-items:center!important;justify-content:flex-start!important;text-align:left!important;font-size:14px!important;
}
.home-page header .links>a:after,.home-page header .links>.drop>button:after{bottom:0!important}
.home-page header .drop-menu{
display:none!important;position:static!important;width:auto!important;min-width:0!important;margin:0 0 5px 8px!important;
padding:4px 0 4px 12px!important;border:0!important;border-left:2px solid #E5A910!important;box-shadow:none!important;
}
.home-page header .drop.open>.drop-menu{display:block!important}
.home-page header .drop-menu a{min-height:42px;padding:9px 10px!important;font-size:13px!important;display:flex;align-items:center}
.home-page header .links>a.nav-icon{width:100%!important;height:auto!important;min-height:48px!important;border:0!important;border-radius:0!important;background:transparent!important;display:flex!important;justify-content:flex-start!important;gap:12px!important}
.home-page header .links>.quote{justify-content:center!important;margin-top:8px!important;width:100%!important}
.home-page .hero{min-height:500px!important}
.home-page .hero .hero-content{width:92%!important;max-width:none!important}
.home-page .hero h1{font-size:clamp(34px,9vw,48px)!important}
.home-page .hero p{font-size:15px!important;line-height:1.62!important}
.home-page .hero .hero-actions{display:flex!important;flex-direction:column!important;gap:12px!important;width:100%!important}
.home-page .hero .hero-actions .btn{width:100%!important;justify-content:center!important}
.home-page .quick-actions{right:12px!important;bottom:18px!important;gap:8px!important}
.home-page .quick-actions .quick-action,.home-page .quick-actions .back-top{
flex-basis:46px!important;width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;
max-width:46px!important;max-height:46px!important;
}
.home-page .quick-actions .quick-action svg{width:24px!important;height:24px!important}
.home-page footer{padding:32px 20px 14px!important}
.home-page footer .foot-grid{display:grid!important;grid-template-columns:1fr!important;gap:28px!important;width:100%!important}
.home-page footer .foot-grid>div{grid-column:auto!important;width:100%!important}
.home-page footer h3{font-size:18px!important;margin-bottom:14px!important}
.home-page footer .foot-links li{margin:9px 0!important}
.home-page footer .foot-links a{font-size:14px!important}
.home-page footer p{font-size:14px!important}
.home-page footer .bottom{
width:100%!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;
gap:8px!important;margin-top:24px!important;padding-top:15px!important;
}
}
@media (max-width:520px){
.home-page header .nav{min-height:72px!important;padding:5px 4.5%!important}
.home-page header .brand{gap:10px!important}
.home-page header .brand img{height:58px!important}
.home-page header .brand .lockup b{font-size:23px!important}
.home-page header .brand .lockup small{font-size:8px!important;margin-top:6px!important}
.home-page header .menu{width:44px!important;height:44px!important;min-width:44px!important}
.home-page .quick-actions{right:10px!important;bottom:16px!important;gap:7px!important}
.home-page .quick-actions .quick-action,.home-page .quick-actions .back-top{
flex-basis:44px!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;
max-width:44px!important;max-height:44px!important;
}
.home-page .quick-actions .quick-action svg{width:23px!important;height:23px!important}
.home-page footer .foot-brand{gap:10px!important}
.home-page footer .foot-brand img{height:60px!important}
.home-page footer .foot-brand .lockup b{font-size:22px!important}
.home-page footer .foot-brand .lockup small{font-size:9px!important;margin-top:6px!important}
.home-page .hero{min-height:510px!important}
.home-page .hero h1{font-size:clamp(31px,8.6vw,40px)!important}
.home-page .hero .hero-content{padding:46px 0 56px!important}
.home-page .benefits{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.home-page .benefit{min-width:0!important}
}
@media (max-width:380px){
.home-page header .brand .lockup b{font-size:21px!important}
.home-page header .brand img{height:54px!important}
.home-page .quick-actions{right:8px!important;bottom:14px!important;gap:6px!important}
.home-page .quick-actions .quick-action,.home-page .quick-actions .back-top{
flex-basis:42px!important;width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;
max-width:42px!important;max-height:42px!important;
}
.home-page .quick-actions .quick-action svg{width:22px!important;height:22px!important}
}
/* Touch devices get visible pressed feedback; hover remains desktop-only. */
@media (hover:hover) and (pointer:fine){
.home-page .quick-actions .quick-action:hover,
.home-page .quick-actions .back-top:hover{transform:translateY(-2px)!important;box-shadow:0 9px 20px rgba(13,31,61,.34)!important}
.home-page .btn:hover .arr{transform:translateX(4px)}
}
@media (hover:none),(pointer:coarse){
.home-page .links a:active,.home-page .links button:active,.home-page .btn:active,
.home-page .quick-action:active,.home-page .back-top:active,.home-page .menu:active{transform:translateY(1px)!important}
.home-page .drop-menu a:active{background:#f1f4f7!important;color:#E5A910!important}
}
@media (prefers-reduced-motion:reduce){
.home-page *,.home-page *::before,.home-page *::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}
/* =========================================================
FINAL HOME FLOATING CONTROLS — EXACTLY MATCH ABOUT US
The 3 contact icons sit higher on the right side.
Back-to-top stays separately at the bottom, just like About Us.
========================================================= */
.home-page .quick-actions{
position:fixed!important;
right:16px!important;
left:auto!important;
top:auto!important;
bottom:86px!important;
transform:none!important;
width:auto!important;
height:auto!important;
margin:0!important;
padding:0!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
gap:9px!important;
z-index:1200!important;
}
.home-page .quick-actions .quick-action{
position:static!important;
flex:0 0 48px!important;
width:48px!important;
height:48px!important;
min-width:48px!important;
min-height:48px!important;
max-width:48px!important;
max-height:48px!important;
border-radius:50%!important;
display:grid!important;
place-items:center!important;
}
.home-page .quick-actions .quick-action svg{
width:25px!important;
height:25px!important;
}
/* Back-to-top is deliberately NOT part of the 3-icon stack.
It remains at the bottom-right exactly like the About page. */
.home-page .quick-actions .back-top{
position:fixed!important;
right:16px!important;
left:auto!important;
top:auto!important;
bottom:20px!important;
width:48px!important;
height:48px!important;
min-width:48px!important;
min-height:48px!important;
max-width:48px!important;
max-height:48px!important;
flex:none!important;
margin:0!important;
z-index:1201!important;
border-radius:50%!important;
background:#E5A910!important;
color:#0D1F3D!important;
border:0!important;
box-shadow:0 5px 14px rgba(13,31,61,.28)!important;
}
@media (max-width:760px){
.home-page .quick-actions{
right:12px!important;
bottom:82px!important;
gap:8px!important;
}
.home-page .quick-actions .quick-action{
flex-basis:46px!important;
width:46px!important;
height:46px!important;
min-width:46px!important;
min-height:46px!important;
max-width:46px!important;
max-height:46px!important;
}
.home-page .quick-actions .quick-action svg{
width:24px!important;
height:24px!important;
}
.home-page .quick-actions .back-top{
right:12px!important;
bottom:18px!important;
width:46px!important;
height:46px!important;
min-width:46px!important;
min-height:46px!important;
max-width:46px!important;
max-height:46px!important;
}
}
@media (max-width:520px){
.home-page .quick-actions{
right:12px!important;
bottom:82px!important;
gap:8px!important;
}
.home-page .quick-actions .quick-action{
flex-basis:46px!important;
width:46px!important;
height:46px!important;
min-width:46px!important;
min-height:46px!important;
max-width:46px!important;
max-height:46px!important;
}
.home-page .quick-actions .back-top{
right:12px!important;
bottom:18px!important;
width:46px!important;
height:46px!important;
min-width:46px!important;
min-height:46px!important;
max-width:46px!important;
max-height:46px!important;
}
}
@media (max-width:380px){
.home-page .quick-actions{
right:10px!important;
bottom:80px!important;
gap:7px!important;
}
.home-page .quick-actions .quick-action{
flex-basis:44px!important;
width:44px!important;
height:44px!important;
min-width:44px!important;
min-height:44px!important;
max-width:44px!important;
max-height:44px!important;
}
.home-page .quick-actions .quick-action svg{
width:23px!important;
height:23px!important;
}
.home-page .quick-actions .back-top{
right:10px!important;
bottom:16px!important;
width:44px!important;
height:44px!important;
min-width:44px!important;
min-height:44px!important;
max-width:44px!important;
max-height:44px!important;
}
}
/* Keep the touch behaviour from the existing page. */
@media (hover:none),(pointer:coarse){
.home-page .quick-actions .quick-action:active,
.home-page .quick-actions .back-top:active{
transform:translateY(1px)!important;
}
}
.mobile-nav-overlay{display:none}
.drawer-head{display:none}
@media (max-width:790px){
html,body{max-width:100%;overflow-x:hidden}
body.mobile-menu-open{overflow:hidden;touch-action:none}
.home-page header{z-index:1300!important}
.home-page .mobile-nav-overlay{display:block;position:fixed;inset:0;background:rgba(5,14,29,.68);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility .22s ease;z-index:1301}
.home-page .mobile-nav-overlay.show{opacity:1;visibility:visible;pointer-events:auto}
.home-page header .links,.home-page header .links.open{position:fixed!important;top:0!important;left:0!important;right:auto!important;bottom:0!important;width:min(310px,84vw)!important;max-width:310px!important;height:100dvh!important;max-height:100dvh!important;margin:0!important;padding:0 14px 24px!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:0!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:#fff!important;border:0!important;box-shadow:10px 0 30px rgba(0,0,0,.18)!important;z-index:1303!important;transform:translateX(-105%);visibility:hidden;pointer-events:none;transition:transform .24s cubic-bezier(.22,.61,.36,1),visibility 0s linear .24s}
.home-page header .links.open{transform:translateX(0);visibility:visible;pointer-events:auto;transition:transform .24s cubic-bezier(.22,.61,.36,1),visibility 0s linear 0s}
.home-page header .links .drawer-head{display:block!important;flex:0 0 72px;margin:0 -14px 8px;border-bottom:1px solid #e6e9ee;background:#fff}
.home-page header .drawer-close{width:100%;height:72px;padding:0 20px;display:flex;align-items:center;gap:14px;border:0;background:#fff;color:var(--navy);cursor:pointer;text-align:left;font:600 15px/1 "Canva Sans","Open Sans",Arial,sans-serif;-webkit-tap-highlight-color:transparent}
.home-page header .drawer-close span{width:22px;height:22px;display:grid;place-items:center;font:300 28px/20px Arial,sans-serif;color:#7a7f86}
.home-page header .drawer-close strong{font-weight:600}
.home-page header.mobile-menu-open .menu{opacity:0!important;pointer-events:none!important}
.home-page header .links>a,.home-page header .links>.drop>button{width:100%!important;min-height:46px!important;height:auto!important;margin:0!important;padding:0 6px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;text-align:left!important;border:0!important;border-bottom:1px solid #e6e9ee!important;background:#fff!important;color:var(--navy)!important;font:700 14px/1.2 "Canva Sans","Open Sans",Arial,sans-serif!important;letter-spacing:.01em;white-space:normal!important;flex:none!important}
.home-page header .links>a:first-of-type{color:var(--gold)!important}
.home-page header .links>a:after,.home-page header .links>.drop>button:after{display:none!important}
.home-page header .links>.drop{width:100%!important;margin:0!important;padding:0!important;position:static!important;flex:none!important}
.home-page header .links>.drop>button{position:relative!important}
.home-page header .links>.drop>button .nav-chevron{margin-left:8px!important;margin-top:-3px!important;flex:0 0 7px!important}
.home-page header .links>.drop.open>button .nav-chevron{margin-top:3px!important}
.home-page header .drop-menu,.home-page header .drop.open>.drop-menu{position:static!important;left:auto!important;right:auto!important;top:auto!important;transform:none!important;width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important;padding:3px 0 5px 12px!important;display:none!important;overflow:hidden!important;border:0!important;border-left:2px solid var(--gold)!important;border-radius:0!important;background:#fff!important;box-shadow:none!important}
.home-page header .drop.open>.drop-menu{display:block!important}
.home-page header .drop-menu a{width:100%!important;min-height:40px!important;height:auto!important;margin:0!important;padding:9px 10px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;border:0!important;border-radius:0!important;background:#fff!important;color:var(--navy)!important;font:600 13px/1.3 "Canva Sans","Open Sans",Arial,sans-serif!important;white-space:normal!important;overflow-wrap:anywhere}
.home-page header .drop-menu a:hover,.home-page header .drop-menu a:focus-visible,.home-page header .drop-menu a:active{background:#f7f9fb!important;color:var(--gold)!important}
.home-page header .drop-menu a.view-all{margin-top:2px!important;background:#fff8e7!important;color:var(--navy)!important;font-weight:800!important}
.home-page header .drop-menu a.view-all span{margin-left:auto}
.home-page header .links>a.nav-icon{width:100%!important;min-height:50px!important;height:auto!important;margin:0!important;padding:0 6px!important;gap:12px!important;border:0!important;border-bottom:1px solid #e6e9ee!important;border-radius:0!important;background:#fff!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;color:var(--navy)!important}
.home-page header .links>a.nav-icon svg{width:20px!important;height:20px!important;flex:0 0 20px!important}
.home-page header .links>a.nav-icon .nav-icon-label{display:inline!important;font:700 14px/1.2 "Canva Sans","Open Sans",Arial,sans-serif!important}
.home-page header .links>.nav-sep{display:none!important}
.home-page header .links>.quote{width:100%!important;min-height:48px!important;height:48px!important;margin:14px 0 0!important;padding:0 12px!important;display:flex!important;align-items:center!important;justify-content:center!important;border:0!important;border-radius:4px!important;background:var(--gold)!important;color:var(--navy)!important;font:800 14px/1 "Canva Sans","Open Sans",Arial,sans-serif!important}
body.mobile-menu-open .home-page .quick-actions,body.mobile-menu-open .quick-actions{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
}
@media (max-width:380px){.home-page header .links{width:86vw!important}.home-page header .links .drawer-head,.home-page header .drawer-close{height:66px;flex-basis:66px}.home-page header .links>a,.home-page header .links>.drop>button{min-height:44px!important;font-size:13px!important}.home-page header .drop-menu a{font-size:12.5px!important;min-height:38px!important}}
@media (prefers-reduced-motion:reduce){.home-page .mobile-nav-overlay,.home-page header .links{transition:none!important}}
/* ==========================================================
NEMREX MOBILE NAVIGATION — FINAL OVERRIDE
Desktop navigation is intentionally untouched.
Mobile: fixed left drawer + dark overlay + accordions.
========================================================== */
@media (max-width: 790px){
html, body{
width:100%;
max-width:100%;
overflow-x:hidden;
}
body.mobile-menu-open{
overflow:hidden !important;
overscroll-behavior:none;
}
/* Keep the header above page content, while the drawer/overlay
are separate children inside the same stacking context. */
.home-page header{
position:sticky !important;
top:0 !important;
z-index:2000 !important;
}
/* Hamburger button: always visible when the drawer is closed. */
.home-page header .menu{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:46px !important;
height:46px !important;
min-width:46px !important;
min-height:46px !important;
margin-left:auto !important;
padding:0 !important;
border:1px solid #dce2e9 !important;
border-radius:5px !important;
background:#fff !important;
color:var(--navy) !important;
font:400 0/1 Arial,sans-serif !important;
position:relative !important;
z-index:2004 !important;
cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
.home-page header .menu::before,
.home-page header .menu::after{
content:"";
position:absolute;
left:11px;
right:11px;
height:2px;
background:var(--navy);
box-shadow:0 7px 0 var(--navy), 0 14px 0 var(--navy);
}
.home-page header .menu::before{top:11px}
.home-page header .menu::after{display:none}
/* The old drawer button/icon must not compete with the new one. */
.home-page header.mobile-menu-open .menu{
opacity:0 !important;
visibility:hidden !important;
pointer-events:none !important;
}
/* Dark area outside the drawer. */
.home-page .mobile-nav-overlay{
display:block !important;
position:fixed !important;
inset:0 !important;
width:100vw !important;
height:100dvh !important;
margin:0 !important;
padding:0 !important;
background:rgba(20,20,20,.78) !important;
opacity:0 !important;
visibility:hidden !important;
pointer-events:none !important;
z-index:2001 !important;
transition:opacity .22s ease,visibility .22s ease !important;
}
.home-page .mobile-nav-overlay.show{
opacity:1 !important;
visibility:visible !important;
pointer-events:auto !important;
}
/* The actual menu drawer. It is fixed to the left so the page
underneath never gets pushed sideways. */
.home-page header .links,
.home-page header .links.open{
position:fixed !important;
top:0 !important;
left:0 !important;
right:auto !important;
bottom:0 !important;
width:min(320px,82vw) !important;
max-width:320px !important;
height:100dvh !important;
max-height:100dvh !important;
margin:0 !important;
padding:0 14px 24px !important;
display:flex !important;
flex-direction:column !important;
align-items:stretch !important;
justify-content:flex-start !important;
gap:0 !important;
overflow-x:hidden !important;
overflow-y:auto !important;
overscroll-behavior:contain !important;
-webkit-overflow-scrolling:touch !important;
background:#fff !important;
border:0 !important;
box-shadow:10px 0 30px rgba(0,0,0,.20) !important;
z-index:2003 !important;
transform:translateX(-105%) !important;
visibility:hidden !important;
pointer-events:none !important;
transition:transform .24s cubic-bezier(.22,.61,.36,1),visibility 0s linear .24s !important;
}
.home-page header .links.open{
transform:translateX(0) !important;
visibility:visible !important;
pointer-events:auto !important;
transition:transform .24s cubic-bezier(.22,.61,.36,1),visibility 0s linear 0s !important;
}
/* Drawer header — matches the clean reference style. */
.home-page header .links .drawer-head{
display:block !important;
flex:0 0 72px !important;
height:72px !important;
margin:0 -14px 8px !important;
padding:0 !important;
border-bottom:1px solid #e6e9ee !important;
background:#fff !important;
}
.home-page header .drawer-close{
width:100% !important;
height:72px !important;
margin:0 !important;
padding:0 20px !important;
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:14px !important;
border:0 !important;
background:#fff !important;
color:var(--navy) !important;
cursor:pointer !important;
text-align:left !important;
font:600 15px/1 "Canva Sans","Open Sans",Arial,sans-serif !important;
-webkit-tap-highlight-color:transparent;
}
.home-page header .drawer-close span{
width:20px !important;
height:24px !important;
display:grid !important;
place-items:center !important;
color:#777d85 !important;
font:300 28px/20px Arial,sans-serif !important;
}
.home-page header .drawer-close strong{font-weight:600 !important}
/* Main mobile links. */
.home-page header .links > a,
.home-page header .links > .drop > button{
width:100% !important;
min-height:46px !important;
height:auto !important;
margin:0 !important;
padding:0 10px !important;
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
text-align:left !important;
border:0 !important;
border-bottom:1px solid #e7eaee !important;
border-radius:0 !important;
background:#fff !important;
color:var(--navy) !important;
font:600 14px/1.25 "Canva Sans","Open Sans",Arial,sans-serif !important;
letter-spacing:.01em !important;
white-space:normal !important;
flex:none !important;
cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
.home-page header .links > a:first-of-type{
color:var(--gold) !important;
}
.home-page header .links > a:after,
.home-page header .links > .drop > button:after{
display:none !important;
}
/* Each dropdown occupies its own full-width row. */
.home-page header .links > .drop{
width:100% !important;
margin:0 !important;
padding:0 !important;
position:static !important;
flex:none !important;
}
.home-page header .links > .drop > button{
position:relative !important;
}
/* Chevron / plus indicator. */
.home-page header .links > .drop > button .nav-chevron{
width:8px !important;
height:8px !important;
margin-left:8px !important;
margin-top:-4px !important;
border-right:1.7px solid currentColor !important;
border-bottom:1.7px solid currentColor !important;
transform:rotate(45deg) !important;
transition:transform .18s ease !important;
flex:0 0 8px !important;
}
.home-page header .links > .drop.open > button .nav-chevron{
transform:rotate(225deg) !important;
margin-top:4px !important;
}
/* Submenus: hidden until their parent is tapped. */
.home-page header .drop-menu,
.home-page header .drop.open > .drop-menu{
position:static !important;
left:auto !important;
right:auto !important;
top:auto !important;
transform:none !important;
width:100% !important;
min-width:0 !important;
max-width:100% !important;
margin:0 !important;
padding:4px 0 5px 12px !important;
display:none !important;
overflow:hidden !important;
border:0 !important;
border-left:2px solid var(--gold) !important;
border-radius:0 !important;
background:#fff !important;
box-shadow:none !important;
}
.home-page header .drop.open > .drop-menu{
display:block !important;
}
.home-page header .drop-menu a{
width:100% !important;
min-height:40px !important;
height:auto !important;
margin:0 !important;
padding:9px 10px !important;
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
border:0 !important;
color:var(--navy) !important;
background:#fff !important;
font:600 13px/1.3 "Canva Sans","Open Sans",Arial,sans-serif !important;
white-space:normal !important;
}
.home-page header .drop-menu a.view-all{
margin-top:4px !important;
min-height:42px !important;
background:#fff8e5 !important;
font-weight:800 !important;
}
.home-page header .drop-menu a.view-all span{margin-left:auto !important}
/* Icons and quote button inside the drawer. */
.home-page header .links > .nav-sep{display:none !important}
.home-page header .links > a.nav-icon{
width:100% !important;
min-height:50px !important;
height:auto !important;
margin:0 !important;
padding:0 10px !important;
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:12px !important;
border:0 !important;
border-bottom:1px solid #e7eaee !important;
border-radius:0 !important;
background:#fff !important;
color:var(--navy) !important;
font:700 14px/1.2 "Canva Sans","Open Sans",Arial,sans-serif !important;
}
.home-page header .links > a.nav-icon svg{
width:20px !important;
height:20px !important;
flex:0 0 20px !important;
}
.home-page header .links > a.nav-icon .nav-icon-label{
display:inline !important;
font:700 14px/1.2 "Canva Sans","Open Sans",Arial,sans-serif !important;
}
.home-page header .links > a.quote{
width:100% !important;
min-height:48px !important;
height:48px !important;
margin:14px 0 0 !important;
padding:0 12px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border:0 !important;
border-radius:4px !important;
background:var(--gold) !important;
color:var(--navy) !important;
font:800 14px/1 "Canva Sans","Open Sans",Arial,sans-serif !important;
}
/* Hide floating contact buttons while the drawer is open. */
body.mobile-menu-open .quick-actions{
opacity:0 !important;
visibility:hidden !important;
pointer-events:none !important;
}
}
@media (max-width:380px){
.home-page header .links{width:84vw !important}
.home-page header .links .drawer-head,
.home-page header .drawer-close{height:66px !important;flex-basis:66px !important}
.home-page header .links > a,
.home-page header .links > .drop > button{min-height:44px !important;font-size:13px !important}
.home-page header .drop-menu a{font-size:12.5px !important;min-height:38px !important}
}
@media (prefers-reduced-motion:reduce){
.home-page .mobile-nav-overlay,
.home-page header .links,
.home-page header .nav-chevron{transition:none !important}
}
/* ==========================================================
NEMREX MOBILE NAVIGATION V14 — CLEAN DRAWER
Fixes: right-side page bleed, stacking, drawer scrolling,
accordion behaviour and access to Contact / utilities.
========================================================== */
@media (max-width:790px){
html,body{width:100%;max-width:100%;overflow-x:hidden!important}
/* The entire header becomes the top stacking layer. This is the
important fix for the unwanted content visible on the right. */
.home-page header{
position:relative!important;
z-index:2147483000!important;
}
.home-page header .menu{
position:relative!important;
z-index:2147483003!important;
}
/* Dark, clean backdrop: no page content can show through visually. */
.home-page .mobile-nav-overlay{
display:block!important;
position:fixed!important;
inset:0!important;
width:100vw!important;
height:100dvh!important;
background:rgba(24,24,24,.86)!important;
opacity:0!important;
visibility:hidden!important;
pointer-events:none!important;
z-index:2147483001!important;
transition:opacity .2s ease,visibility .2s ease!important;
}
.home-page .mobile-nav-overlay.show{
opacity:1!important;
visibility:visible!important;
pointer-events:auto!important;
}
/* Drawer: wide enough to feel like a real mobile navigation,
but still leaves the dark backdrop visible on the right. */
.home-page header .links,
.home-page header .links.open{
position:fixed!important;
top:0!important;
left:0!important;
right:auto!important;
bottom:0!important;
width:min(318px,88vw)!important;
max-width:318px!important;
height:100dvh!important;
max-height:100dvh!important;
margin:0!important;
padding:0 14px 22px!important;
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
justify-content:flex-start!important;
gap:0!important;
overflow-x:hidden!important;
overflow-y:auto!important;
overscroll-behavior:contain!important;
-webkit-overflow-scrolling:touch!important;
background:#fff!important;
box-shadow:10px 0 28px rgba(0,0,0,.18)!important;
border:0!important;
border-radius:0!important;
z-index:2147483002!important;
transform:translateX(-105%)!important;
visibility:hidden!important;
pointer-events:none!important;
transition:transform .22s ease,visibility 0s linear .22s!important;
}
.home-page header .links.open{
transform:translateX(0)!important;
visibility:visible!important;
pointer-events:auto!important;
transition:transform .22s ease,visibility 0s linear 0s!important;
}
/* Drawer heading */
.home-page header .links .drawer-head{
display:block!important;
position:sticky!important;
top:0!important;
z-index:5!important;
flex:0 0 66px!important;
height:66px!important;
margin:0 -14px 8px!important;
background:#fff!important;
border-bottom:1px solid #e7e9ed!important;
}
.home-page header .drawer-close{
width:100%!important;
height:66px!important;
padding:0 20px!important;
display:flex!important;
align-items:center!important;
gap:14px!important;
border:0!important;
background:#fff!important;
color:var(--navy)!important;
text-align:left!important;
font:700 15px/1 "Canva Sans","Open Sans",Arial,sans-serif!important;
}
.home-page header .drawer-close span{
width:20px!important;height:20px!important;
display:grid!important;place-items:center!important;
color:#7a7f86!important;
font:300 27px/20px Arial,sans-serif!important;
}
/* Main navigation rows */
.home-page header .links>a,
.home-page header .links>.drop>button{
width:100%!important;
min-height:44px!important;
height:auto!important;
margin:0!important;
padding:0 10px!important;
display:flex!important;
align-items:center!important;
justify-content:flex-start!important;
text-align:left!important;
border:0!important;
border-bottom:1px solid #e7e9ed!important;
background:#fff!important;
color:var(--navy)!important;
font:700 14px/1.2 "Canva Sans","Open Sans",Arial,sans-serif!important;
letter-spacing:.01em!important;
white-space:normal!important;
flex:none!important;
}
.home-page header .links>a:first-of-type{color:var(--gold)!important}
.home-page header .links>a:after,
.home-page header .links>.drop>button:after{display:none!important}
.home-page header .links>.drop{
width:100%!important;
margin:0!important;
padding:0!important;
position:static!important;
flex:none!important;
}
.home-page header .links>.drop>button{position:relative!important}
.home-page header .links>.drop>button .nav-chevron{
margin-left:8px!important;
flex:0 0 7px!important;
}
/* Accordion panels */
.home-page header .drop-menu,
.home-page header .drop.open>.drop-menu{
position:static!important;
width:100%!important;
min-width:0!important;
max-width:none!important;
margin:0!important;
padding:2px 0 5px 12px!important;
display:none!important;
overflow:visible!important;
border:0!important;
border-left:2px solid var(--gold)!important;
border-radius:0!important;
background:#fff!important;
box-shadow:none!important;
transform:none!important;
}
.home-page header .links>.drop.open>.drop-menu{display:block!important}
.home-page header .drop-menu a{
width:100%!important;
min-height:38px!important;
height:auto!important;
margin:0!important;
padding:8px 10px!important;
display:flex!important;
align-items:center!important;
justify-content:flex-start!important;
border:0!important;
background:#fff!important;
color:var(--navy)!important;
font:600 13px/1.25 "Canva Sans","Open Sans",Arial,sans-serif!important;
white-space:normal!important;
overflow-wrap:anywhere!important;
}
.home-page header .drop-menu a.view-all{
min-height:42px!important;
margin-top:2px!important;
background:#fff8e7!important;
color:var(--navy)!important;
font-weight:800!important;
}
.home-page header .drop-menu a.view-all span{margin-left:auto!important}
/* Utility links */
.home-page header .links>.nav-sep{display:none!important}
.home-page header .links>a.nav-icon{
width:100%!important;
min-height:50px!important;
height:50px!important;
margin:0!important;
padding:0 10px!important;
gap:12px!important;
border:0!important;
border-bottom:1px solid #e7e9ed!important;
background:#fff!important;
display:flex!important;
align-items:center!important;
justify-content:flex-start!important;
color:var(--navy)!important;
}
.home-page header .links>a.nav-icon svg{width:19px!important;height:19px!important;flex:0 0 19px!important}
.home-page header .links>a.nav-icon .nav-icon-label{display:inline!important;font:700 14px/1.2 "Canva Sans","Open Sans",Arial,sans-serif!important}
.home-page header .links>.quote{
width:100%!important;
min-height:48px!important;
height:48px!important;
margin:14px 0 0!important;
padding:0 12px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
border:0!important;
border-radius:4px!important;
background:var(--gold)!important;
color:var(--navy)!important;
font:800 14px/1 "Canva Sans","Open Sans",Arial,sans-serif!important;
}
/* Floating buttons must never sit over the drawer. */
body.mobile-menu-open .quick-actions,
body.mobile-menu-open .quick-action{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
}
@media (max-width:380px){
.home-page header .links{width:88vw!important}
.home-page header .links>a,
.home-page header .links>.drop>button{min-height:43px!important;font-size:13px!important}
.home-page header .drop-menu a{min-height:37px!important;font-size:12.5px!important}
}
@media (max-width:790px){
/* When the mobile drawer is open, hide every page layer outside the header.
The drawer + overlay remain visible because they live inside the header. */
body.mobile-menu-open > *:not(header){
visibility:hidden!important;
pointer-events:none!important;
}
body.mobile-menu-open{
overflow:hidden!important;
touch-action:none!important;
}
body.mobile-menu-open header{
visibility:visible!important;
pointer-events:auto!important;
}
body.mobile-menu-open header .links,
body.mobile-menu-open header .mobile-nav-overlay{
visibility:visible!important;
}
/* Keep the drawer as the only bright surface; nothing from the page
can bleed through at its right edge. */
body.mobile-menu-open header .links{
background:#fff!important;
}
body.mobile-menu-open header .mobile-nav-overlay{
background:rgba(24,24,24,.88)!important;
}
/* The drawer must be independently scrollable so Contact Us,
E-Catalogue, Weight Calculator and Quote remain reachable even
when Products is expanded. */
body.mobile-menu-open header .links{
overflow-y:auto!important;
overscroll-behavior:contain!important;
-webkit-overflow-scrolling:touch!important;
}
}
/* =========================================================
NEMREX FINAL HOME PAGE FIX
Mobile navigation + quote CTA
========================================================= */
#quote{scroll-margin-top:90px;}
@media (max-width:790px){
html{scroll-behavior:smooth;}
/* The drawer is the only white surface. The page behind it is blocked. */
body.mobile-menu-open{
overflow:hidden!important;
overscroll-behavior:none!important;
touch-action:none!important;
}
body.mobile-menu-open > *:not(header){
visibility:hidden!important;
pointer-events:none!important;
}
body.mobile-menu-open header{
visibility:visible!important;
pointer-events:auto!important;
position:relative!important;
z-index:1400!important;
}
body.mobile-menu-open header .mobile-nav-overlay{
display:block!important;
position:fixed!important;
inset:0!important;
z-index:1401!important;
background:rgba(22,22,22,.88)!important;
opacity:1!important;
visibility:visible!important;
pointer-events:auto!important;
}
body.mobile-menu-open header .links,
body.mobile-menu-open header .links.open{
position:fixed!important;
z-index:1402!important;
top:0!important;
left:0!important;
right:auto!important;
bottom:0!important;
width:min(316px,88vw)!important;
max-width:316px!important;
height:100dvh!important;
max-height:100dvh!important;
margin:0!important;
padding:0 14px 28px!important;
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
justify-content:flex-start!important;
gap:0!important;
overflow-x:hidden!important;
overflow-y:auto!important;
overscroll-behavior:contain!important;
-webkit-overflow-scrolling:touch!important;
background:#fff!important;
box-shadow:10px 0 32px rgba(0,0,0,.20)!important;
transform:translateX(0)!important;
visibility:visible!important;
pointer-events:auto!important;
}
/* Keep the drawer header fixed-looking at the top while its contents scroll. */
body.mobile-menu-open header .drawer-head{
position:sticky!important;
top:0!important;
z-index:5!important;
flex:0 0 64px!important;
background:#fff!important;
}
body.mobile-menu-open header .drawer-close{
width:100%!important;
height:64px!important;
padding:0 8px!important;
display:flex!important;
align-items:center!important;
gap:14px!important;
border:0!important;
border-bottom:1px solid #e7e9ed!important;
background:#fff!important;
color:var(--navy)!important;
text-align:left!important;
font:700 15px/1 "Canva Sans","Open Sans",Arial,sans-serif!important;
cursor:pointer!important;
}
body.mobile-menu-open header .drawer-close span{
width:22px!important;
height:22px!important;
display:grid!important;
place-items:center!important;
color:#7b8189!important;
font:300 27px/20px Arial,sans-serif!important;
}
body.mobile-menu-open header .links>a,
body.mobile-menu-open header .links>.drop>button{
width:100%!important;
min-height:44px!important;
height:auto!important;
margin:0!important;
padding:0 10px!important;
display:flex!important;
align-items:center!important;
justify-content:flex-start!important;
text-align:left!important;
border:0!important;
border-bottom:1px solid #e7e9ed!important;
background:#fff!important;
color:var(--navy)!important;
font:700 14px/1.2 "Canva Sans","Open Sans",Arial,sans-serif!important;
letter-spacing:.01em!important;
white-space:normal!important;
flex:none!important;
}
body.mobile-menu-open header .links>a:first-of-type{color:var(--gold)!important;}
body.mobile-menu-open header .links>a:after,
body.mobile-menu-open header .links>.drop>button:after{display:none!important;}
body.mobile-menu-open header .links>.drop{
width:100%!important;
margin:0!important;
padding:0!important;
position:static!important;
flex:none!important;
}
body.mobile-menu-open header .links>.drop>button{position:relative!important;}
body.mobile-menu-open header .nav-chevron{
margin-left:8px!important;
flex:0 0 7px!important;
}
body.mobile-menu-open header .drop-menu,
body.mobile-menu-open header .drop.open>.drop-menu{
position:static!important;
left:auto!important;
right:auto!important;
top:auto!important;
transform:none!important;
width:100%!important;
min-width:0!important;
max-width:100%!important;
margin:0!important;
padding:3px 0 5px 13px!important;
display:none!important;
overflow:hidden!important;
border:0!important;
border-left:2px solid var(--gold)!important;
border-radius:0!important;
background:#fff!important;
box-shadow:none!important;
}
body.mobile-menu-open header .drop.open>.drop-menu{display:block!important;}
body.mobile-menu-open header .drop-menu a{
width:100%!important;
min-height:40px!important;
height:auto!important;
margin:0!important;
padding:9px 10px!important;
display:flex!important;
align-items:center!important;
justify-content:flex-start!important;
border:0!important;
border-radius:0!important;
background:#fff!important;
color:var(--navy)!important;
font:600 13px/1.3 "Canva Sans","Open Sans",Arial,sans-serif!important;
white-space:normal!important;
overflow-wrap:anywhere!important;
}
body.mobile-menu-open header .drop-menu a.view-all{
margin-top:2px!important;
background:#fff8e7!important;
color:var(--navy)!important;
font-weight:800!important;
}
body.mobile-menu-open header .drop-menu a.view-all span{margin-left:auto!important;}
body.mobile-menu-open header .links>a.nav-icon{
width:100%!important;
min-height:50px!important;
height:auto!important;
margin:0!important;
padding:0 10px!important;
gap:12px!important;
border:0!important;
border-bottom:1px solid #e7e9ed!important;
border-radius:0!important;
background:#fff!important;
display:flex!important;
align-items:center!important;
justify-content:flex-start!important;
color:var(--navy)!important;
}
body.mobile-menu-open header .links>a.nav-icon svg{
width:20px!important;
height:20px!important;
flex:0 0 20px!important;
}
body.mobile-menu-open header .links>a.nav-icon .nav-icon-label{
display:inline!important;
font:700 14px/1.2 "Canva Sans","Open Sans",Arial,sans-serif!important;
}
body.mobile-menu-open header .links>.nav-sep{display:none!important;}
body.mobile-menu-open header .links>a.quote{
width:100%!important;
min-height:48px!important;
height:48px!important;
margin:14px 0 0!important;
padding:0 12px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
border:0!important;
border-radius:4px!important;
background:var(--gold)!important;
color:var(--navy)!important;
font:800 14px/1 "Canva Sans","Open Sans",Arial,sans-serif!important;
flex:none!important;
}
/* Quote form remains a normal, reachable section after navigation closes. */
#quote{
scroll-margin-top:78px!important;
}
}
@media (max-width:380px){
body.mobile-menu-open header .links,
body.mobile-menu-open header .links.open{width:88vw!important;}
body.mobile-menu-open header .links>a,
body.mobile-menu-open header .links>.drop>button{font-size:13px!important;}
body.mobile-menu-open header .drop-menu a{font-size:12.5px!important;}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto!important;}
}
@media (max-width:790px){
/* Lock the PAGE, not the drawer. */
body.mobile-menu-open{
overflow:hidden !important;
overscroll-behavior:none !important;
}
/* The drawer must accept vertical touch scrolling. */
body.mobile-menu-open header .links,
body.mobile-menu-open header .links.open{
touch-action:pan-y !important;
-webkit-overflow-scrolling:touch !important;
overflow-y:auto !important;
overflow-x:hidden !important;
scrollbar-width:thin !important;
scrollbar-color:#c5c9cf #f7f7f7 !important;
}
body.mobile-menu-open header .links::-webkit-scrollbar{
width:6px !important;
}
body.mobile-menu-open header .links::-webkit-scrollbar-track{
background:#f7f7f7 !important;
}
body.mobile-menu-open header .links::-webkit-scrollbar-thumb{
background:#c5c9cf !important;
border-radius:10px !important;
}
/* Keep the drawer above the overlay and make the overlay completely opaque
to the page content. */
body.mobile-menu-open header{
position:relative !important;
z-index:1400 !important;
}
body.mobile-menu-open header .mobile-nav-overlay{
position:fixed !important;
inset:0 !important;
z-index:1401 !important;
background:rgba(35,35,35,.90) !important;
pointer-events:auto !important;
}
body.mobile-menu-open header .links{
z-index:1402 !important;
background:#fff !important;
}
/* The submenu itself must not create a second scroll container. */
body.mobile-menu-open header .drop-menu{
overflow:visible !important;
touch-action:auto !important;
}
/* Keep every top-level item after an open submenu in normal document flow. */
body.mobile-menu-open header .links > .drop,
body.mobile-menu-open header .links > a{
flex-shrink:0 !important;
}
/* Clear separation after Products and Technical submenus. */
body.mobile-menu-open header .drop.open + a{
border-top:0 !important;
}
/* Make Contact Us and the utility links impossible to accidentally collapse. */
body.mobile-menu-open header .links > a.nav-icon,
body.mobile-menu-open header .links > a.quote{
position:relative !important;
z-index:2 !important;
flex-shrink:0 !important;
}
}
/* On very small phones, keep the menu usable without making text tiny. */
@media (max-width:380px){
body.mobile-menu-open header .links{
width:88vw !important;
max-width:316px !important;
}
}
/* =========================================================
NEMREX — PRODUCT / MATERIAL / INDUSTRY CARD REFINEMENT
Gives the circular image proper breathing room inside the
white card on mobile. Applies consistently to all 3
horizontal carousel sections.
========================================================= */
@media (max-width: 790px) {
/* Keep the carousel area comfortable on narrow screens. */
.carousel-section .marquee {
padding: 10px 6px 22px !important;
overflow-x: hidden !important;
overflow-y: visible !important;
}
.carousel-section .marquee-track {
gap: 16px !important;
align-items: flex-start !important;
}
/* The complete card becomes a real card instead of the
circle sitting directly on the section background. */
.carousel-section .orbit-card {
flex: 0 0 205px !important;
width: 205px !important;
min-height: 232px !important;
box-sizing: border-box !important;
padding: 16px 14px 18px !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px !important;
background: #fff !important;
border: 0 !important;
border-radius: 15px !important;
box-shadow: 0 10px 26px rgba(13,31,61,.10) !important;
text-decoration: none !important;
overflow: hidden !important;
}
/* The circle no longer touches the card's top edge. */
.carousel-section .orbit-card .orbit-image {
flex: 0 0 168px !important;
width: 168px !important;
height: 168px !important;
min-width: 168px !important;
min-height: 168px !important;
max-width: 168px !important;
max-height: 168px !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 5px !important;
border: 2px solid var(--gold) !important;
border-radius: 50% !important;
background: #fff !important;
overflow: hidden !important;
display: grid !important;
place-items: center !important;
}
.carousel-section .orbit-card .orbit-image img {
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: contain !important;
border-radius: 50% !important;
}
/* Industry photos should fill their circles. */
#industries .orbit-card .orbit-image {
padding: 0 !important;
}
#industries .orbit-card .orbit-image img {
object-fit: cover !important;
object-position: center !important;
border-radius: 50% !important;
}
/* Material initials remain centered inside the circle. */
#materials .orbit-card .orbit-image {
font-size: 31px !important;
line-height: 1 !important;
font-weight: 700 !important;
}
.carousel-section .orbit-card strong {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
font-size: 17px !important;
line-height: 1.25 !important;
font-weight: 700 !important;
text-align: center !important;
color: var(--gold) !important;
overflow-wrap: anywhere !important;
}
.carousel-section .orbit-card small {
display: block !important;
width: 100% !important;
margin: -2px 0 0 !important;
font-size: 12px !important;
line-height: 1.3 !important;
text-align: center !important;
color: #687386 !important;
}
/* Do not let the old hover/focus rules change the card layout. */
.carousel-section .orbit-card:hover,
.carousel-section .orbit-card:focus,
.carousel-section .orbit-card:focus-visible,
.carousel-section .orbit-card:active {
transform: none !important;
outline: none !important;
}
.carousel-section .orbit-card:hover .orbit-image,
.carousel-section .orbit-card:focus-visible .orbit-image,
.carousel-section .orbit-card:active .orbit-image {
transform: none !important;
}
/* Slightly more breathing room between heading and cards. */
.carousel-section .head {
margin-bottom: 16px !important;
}
}
/* Small phones: keep the card comfortably inside the viewport. */
@media (max-width: 380px) {
.carousel-section .orbit-card {
flex-basis: 194px !important;
width: 194px !important;
min-height: 222px !important;
padding: 15px 12px 17px !important;
}
.carousel-section .orbit-card .orbit-image {
flex-basis: 158px !important;
width: 158px !important;
height: 158px !important;
min-width: 158px !important;
min-height: 158px !important;
max-width: 158px !important;
max-height: 158px !important;
}
.carousel-section .orbit-card strong {
font-size: 16px !important;
}
}
/* ==========================================================
NEMREX — FINAL MOBILE NAV + CAROUSEL FIXES
1) Removes the visible drawer scrollbar/thumb.
2) Keeps the gold submenu guide line identical for Products,
Material/Industries/Technical dropdowns.
3) Gives mobile Product / Material / Industry cards equal,
deliberate spacing on all four outer sides.
========================================================== */
@media (max-width:790px){
/* ---------- MOBILE DRAWER ---------- */
/* The orange/gold pill seen on the right of the Products drawer
is the scroll thumb. The drawer remains swipe-scrollable, but
the scrollbar itself is intentionally invisible. */
body.mobile-menu-open header .links,
body.mobile-menu-open header .links.open{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
body.mobile-menu-open header .links::-webkit-scrollbar{
width:0 !important;
height:0 !important;
display:none !important;
background:transparent !important;
}
/* Every opened navigation dropdown gets the same gold guide line.
This prevents Products from looking different from Technical. */
.home-page header .links > .drop.open > .drop-menu{
border-left:2px solid var(--gold) !important;
}
/* ---------- MOBILE CAROUSEL CARDS ---------- */
.carousel-section .marquee{
padding:10px 6px 22px !important;
overflow-x:hidden !important;
overflow-y:visible !important;
}
.carousel-section .marquee-track{
align-items:flex-start !important;
}
.carousel-section .orbit-card{
flex:0 0 205px !important;
width:205px !important;
height:256px !important;
min-height:256px !important;
max-height:256px !important;
/* Equal outer spacing: 16px top/right/bottom/left. */
padding:16px !important;
margin:0 !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:flex-start !important;
gap:0 !important;
box-sizing:border-box !important;
background:#fff !important;
border:0 !important;
border-radius:15px !important;
box-shadow:0 10px 26px rgba(13,31,61,.10) !important;
overflow:hidden !important;
}
.carousel-section .orbit-card .orbit-image{
flex:0 0 168px !important;
width:168px !important;
height:168px !important;
min-width:168px !important;
min-height:168px !important;
max-width:168px !important;
max-height:168px !important;
margin:0 auto 14px !important;
padding:5px !important;
box-sizing:border-box !important;
border:2px solid var(--gold) !important;
border-radius:50% !important;
background:#fff !important;
overflow:hidden !important;
display:grid !important;
place-items:center !important;
}
.carousel-section .orbit-card .orbit-image img{
width:100% !important;
height:100% !important;
max-width:none !important;
max-height:none !important;
object-fit:contain !important;
border-radius:50% !important;
}
#industries .orbit-card .orbit-image{
padding:0 !important;
}
#industries .orbit-card .orbit-image img{
object-fit:cover !important;
object-position:center !important;
border-radius:50% !important;
}
#materials .orbit-card .orbit-image{
font-size:31px !important;
line-height:1 !important;
font-weight:700 !important;
}
/* Fixed label area keeps the lower spacing visually consistent,
especially for two-line names such as Structural Sections &
Profiles. */
.carousel-section .orbit-card strong{
flex:0 0 42px !important;
width:100% !important;
max-width:100% !important;
min-height:42px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:flex-start !important;
justify-content:center !important;
font-size:17px !important;
line-height:1.25 !important;
font-weight:700 !important;
text-align:center !important;
color:var(--gold) !important;
overflow-wrap:anywhere !important;
}
.carousel-section .orbit-card small{
display:block !important;
width:100% !important;
min-height:0 !important;
margin:0 !important;
padding:0 !important;
font-size:12px !important;
line-height:1.3 !important;
text-align:center !important;
color:#687386 !important;
}
/* Touching a card must not distort the card dimensions. */
.carousel-section .orbit-card:hover,
.carousel-section .orbit-card:focus,
.carousel-section .orbit-card:focus-visible,
.carousel-section .orbit-card:active,
.carousel-section .orbit-card.is-touch-active,
.carousel-section .orbit-card.touch-pressed{
transform:none !important;
outline:none !important;
}
.carousel-section .orbit-card:hover .orbit-image,
.carousel-section .orbit-card:focus-visible .orbit-image,
.carousel-section .orbit-card:active .orbit-image,
.carousel-section .orbit-card.is-touch-active .orbit-image,
.carousel-section .orbit-card.touch-pressed .orbit-image{
transform:none !important;
}
}
/* Keep a deliberate gap between the circle and its text on non-mobile layouts too. */
@media (min-width:791px){
.carousel-section .orbit-card{
gap:12px !important;
}
}
/* Small phones: scale the same balanced proportions down together. */
@media (max-width:380px){
.carousel-section .orbit-card{
flex-basis:194px !important;
width:194px !important;
height:240px !important;
min-height:240px !important;
max-height:240px !important;
padding:15px !important;
}
.carousel-section .orbit-card .orbit-image{
flex-basis:158px !important;
width:158px !important;
height:158px !important;
min-width:158px !important;
min-height:158px !important;
max-width:158px !important;
max-height:158px !important;
margin-bottom:12px !important;
}
.carousel-section .orbit-card strong{
flex-basis:40px !important;
min-height:40px !important;
font-size:16px !important;
}
}
/* ==========================================================
NEMREX — MOBILE NAVIGATION V21 FINAL
- No visible scrollbar/thumb on the drawer.
- Drawer itself is vertically swipe-scrollable.
- Products and Technical use identical accordion structure.
- Contact, E-Catalogue, Weight Calculator and Quote remain
normal items in the same drawer flow.
- Desktop/tablet navigation outside 790px is not changed.
========================================================== */
@media (max-width:790px){
html, body, .home-page{
max-width:100%!important;
overflow-x:hidden!important;
}
/* Do NOT disable touch gestures on the whole body. The old
touch-action:none rule prevented the drawer from being swiped. */
body.mobile-menu-open{
overflow:hidden!important;
touch-action:auto!important;
overscroll-behavior:none!important;
}
/* Keep the page behind the drawer inert, but never hide the drawer. */
body.mobile-menu-open > *:not(header){
visibility:hidden!important;
pointer-events:none!important;
}
body.mobile-menu-open > header{
visibility:visible!important;
pointer-events:auto!important;
position:relative!important;
z-index:2147483000!important;
}
/* Dark backdrop */
.home-page .mobile-nav-overlay,
body.mobile-menu-open header .mobile-nav-overlay{
position:fixed!important;
inset:0!important;
width:100vw!important;
height:100dvh!important;
background:rgba(24,24,24,.88)!important;
z-index:2147483001!important;
}
.home-page .mobile-nav-overlay.show{
opacity:1!important;
visibility:visible!important;
pointer-events:auto!important;
}
/* One real drawer. It owns the scroll. */
.home-page header .links,
.home-page header .links.open,
body.mobile-menu-open header .links,
body.mobile-menu-open header .links.open{
position:fixed!important;
top:0!important;
left:0!important;
right:auto!important;
bottom:0!important;
width:min(318px, calc(100vw - 24px))!important;
max-width:318px!important;
height:100dvh!important;
max-height:100dvh!important;
margin:0!important;
padding:0 14px 24px!important;
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
justify-content:flex-start!important;
gap:0!important;
background:#fff!important;
border:0!important;
border-radius:0!important;
box-shadow:10px 0 32px rgba(0,0,0,.20)!important;
overflow-x:hidden!important;
overflow-y:auto!important;
overscroll-behavior:contain!important;
-webkit-overflow-scrolling:touch!important;
touch-action:pan-y!important;
scrollbar-width:none!important;
-ms-overflow-style:none!important;
z-index:2147483002!important;
}
.home-page header .links::-webkit-scrollbar,
body.mobile-menu-open header .links::-webkit-scrollbar{
width:0!important;
height:0!important;
display:none!important;
background:transparent!important;
}
/* Closed/open state */
.home-page header .links{
transform:translateX(-105%)!important;
visibility:hidden!important;
pointer-events:none!important;
}
.home-page header .links.open{
transform:translateX(0)!important;
visibility:visible!important;
pointer-events:auto!important;
}
/* Drawer header */
.home-page header .links .drawer-head{
position:sticky!important;
top:0!important;
z-index:10!important;
flex:0 0 66px!important;
height:66px!important;
margin:0 -14px 8px!important;
background:#fff!important;
border-bottom:1px solid #e7e9ed!important;
}
.home-page header .drawer-close{
width:100%!important;
height:66px!important;
padding:0 14px!important;
display:flex!important;
align-items:center!important;
gap:14px!important;
border:0!important;
background:#fff!important;
color:var(--navy)!important;
font:600 15px/1 "Canva Sans","Open Sans",Arial,sans-serif!important;
text-align:left!important;
}
.home-page header .drawer-close span{
width:20px!important;
height:20px!important;
display:grid!important;
place-items:center!important;
color:#7a7f86!important;
font:300 28px/20px Arial,sans-serif!important;
}
/* Every top-level item has exactly the same row treatment. */
.home-page header .links > a,
.home-page header .links > .drop > button{
width:100%!important;
min-height:46px!important;
height:auto!important;
margin:0!important;
padding:0 10px!important;
display:flex!important;
align-items:center!important;
justify-content:flex-start!important;
flex:none!important;
border:0!important;
border-bottom:1px solid #e7eaee!important;
border-radius:0!important;
background:#fff!important;
color:var(--navy)!important;
font:600 14px/1.25 "Canva Sans","Open Sans",Arial,sans-serif!important;
text-align:left!important;
white-space:normal!important;
cursor:pointer!important;
-webkit-tap-highlight-color:transparent!important;
}
.home-page header .links > a:first-of-type{
color:var(--gold)!important;
}
.home-page header .links > a:after,
.home-page header .links > .drop > button:after{
display:none!important;
}
/* Dropdown wrapper must remain in normal document flow. */
.home-page header .links > .drop{
width:100%!important;
margin:0!important;
padding:0!important;
position:static!important;
flex:none!important;
}
.home-page header .links > .drop > button{
position:relative!important;
}
/* Chevron */
.home-page header .links > .drop > button .nav-chevron{
width:8px!important;
height:8px!important;
margin-left:8px!important;
margin-top:-4px!important;
border-right:1.7px solid currentColor!important;
border-bottom:1.7px solid currentColor!important;
transform:rotate(45deg)!important;
transition:transform .18s ease!important;
flex:0 0 8px!important;
}
.home-page header .links > .drop.open > button .nav-chevron{
transform:rotate(225deg)!important;
margin-top:4px!important;
}
/* Both Products and Technical use the exact same submenu rules. */
.home-page header .drop-menu,
.home-page header .drop.open > .drop-menu{
position:static!important;
left:auto!important;
right:auto!important;
top:auto!important;
transform:none!important;
width:100%!important;
min-width:0!important;
max-width:100%!important;
margin:0!important;
padding:4px 0 5px 12px!important;
display:none!important;
overflow:visible!important;
border:0!important;
border-left:2px solid var(--gold)!important;
border-radius:0!important;
background:#fff!important;
box-shadow:none!important;
touch-action:auto!important;
}
.home-page header .drop.open > .drop-menu{
display:block!important;
}
.home-page header .drop-menu a{
width:100%!important;
min-height:40px!important;
height:auto!important;
margin:0!important;
padding:9px 10px!important;
display:flex!important;
align-items:center!important;
justify-content:flex-start!important;
border:0!important;
background:#fff!important;
color:var(--navy)!important;
font:600 13px/1.3 "Canva Sans","Open Sans",Arial,sans-serif!important;
white-space:normal!important;
overflow-wrap:anywhere!important;
cursor:pointer!important;
}
.home-page header .drop-menu a.view-all{
min-height:42px!important;
margin-top:2px!important;
background:#fff8e7!important;
color:var(--navy)!important;
font-weight:800!important;
}
.home-page header .drop-menu a.view-all span{
margin-left:auto!important;
}
/* Contact + utility links are ordinary rows after Technical. */
.home-page header .links > a.nav-icon{
width:100%!important;
min-height:50px!important;
height:50px!important;
padding:0 10px!important;
gap:12px!important;
display:flex!important;
align-items:center!important;
justify-content:flex-start!important;
flex:none!important;
border:0!important;
border-bottom:1px solid #e7eaee!important;
background:#fff!important;
color:var(--navy)!important;
}
.home-page header .links > a.nav-icon svg{
width:20px!important;height:20px!important;flex:0 0 20px!important;
}
.home-page header .links > a.nav-icon .nav-icon-label{
display:inline!important;
font:700 14px/1.2 "Canva Sans","Open Sans",Arial,sans-serif!important;
}
.home-page header .links > .nav-sep{display:none!important}
.home-page header .links > a.quote{
width:100%!important;
min-height:48px!important;
height:48px!important;
margin:14px 0 0!important;
padding:0 12px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
flex:none!important;
border:0!important;
border-radius:4px!important;
background:var(--gold)!important;
color:var(--navy)!important;
font:800 14px/1 "Canva Sans","Open Sans",Arial,sans-serif!important;
}
/* Never allow floating contact buttons to overlap the drawer. */
body.mobile-menu-open .quick-actions{
opacity:0!important;
visibility:hidden!important;
pointer-events:none!important;
}
}
@media (max-width:380px){
.home-page header .links,
.home-page header .links.open,
body.mobile-menu-open header .links,
body.mobile-menu-open header .links.open{
width:min(316px, calc(100vw - 18px))!important;
max-width:316px!important;
}
.home-page header .links > a,
.home-page header .links > .drop > button{
min-height:44px!important;
font-size:13px!important;
}
.home-page header .drop-menu a{
min-height:38px!important;
font-size:12.5px!important;
}
}
/* ================================================================
NEMREX V23 — RESPONSIVE PRODUCT / MATERIAL / INDUSTRY CARDS
Purpose:
- Give every circular icon the same breathing room above it.
- Keep the icon/text relationship balanced.
- Keep card height/content responsive instead of clipping it.
- Use one consistent card geometry for Products, Materials,
and Industries on phones, tablets and desktop.
================================================================ */
.card-balance-section .marquee-track{
align-items:flex-start !important;
}
/* Desktop / web ------------------------------------------------ */
@media (min-width:791px){
.card-balance-section .orbit-card{
box-sizing:border-box !important;
padding:14px 8px 16px !important;
margin:0 !important;
gap:12px !important;
align-items:center !important;
justify-content:flex-start !important;
text-align:center !important;
min-height:calc(clamp(84px,9vw,112px) + 82px) !important;
}
.card-balance-section .orbit-image{
margin:0 auto !important;
}
.card-balance-section .orbit-card strong{
margin:0 !important;
padding:0 !important;
text-align:center !important;
line-height:1.3 !important;
}
.card-balance-section .orbit-card small{
margin:0 !important;
padding:0 !important;
text-align:center !important;
line-height:1.3 !important;
}
}
/* Tablet ------------------------------------------------------- */
@media (min-width:791px) and (max-width:1100px){
.card-balance-section .orbit-card{
padding:16px 8px 18px !important;
gap:11px !important;
}
}
/* Mobile ------------------------------------------------------- */
@media (max-width:790px){
.card-balance-section .marquee{
padding:14px 6px 24px !important;
overflow-x:hidden !important;
overflow-y:visible !important;
}
.card-balance-section .marquee-track{
gap:16px !important;
align-items:flex-start !important;
}
/*
Do not use a fixed/max height here. Materials contain both a
title and a grade line, while Products/Industries can have
one- or two-line titles. Auto height prevents clipping and
keeps the same visual top/bottom breathing room.
*/
.card-balance-section .orbit-card{
flex:0 0 205px !important;
width:205px !important;
height:auto !important;
min-height:280px !important;
max-height:none !important;
box-sizing:border-box !important;
padding:20px 16px 20px !important;
margin:0 !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:flex-start !important;
gap:0 !important;
background:#fff !important;
border:0 !important;
border-radius:15px !important;
box-shadow:0 10px 26px rgba(13,31,61,.10) !important;
overflow:visible !important;
}
/* Identical top breathing room for all three sections. */
.card-balance-section .orbit-card .orbit-image{
flex:0 0 168px !important;
width:168px !important;
height:168px !important;
min-width:168px !important;
min-height:168px !important;
max-width:168px !important;
max-height:168px !important;
box-sizing:border-box !important;
margin:0 auto 14px !important;
padding:5px !important;
border:2px solid var(--gold) !important;
border-radius:50% !important;
background:#fff !important;
overflow:hidden !important;
display:grid !important;
place-items:center !important;
}
.card-balance-section .orbit-card .orbit-image img{
width:100% !important;
height:100% !important;
max-width:none !important;
max-height:none !important;
object-fit:contain !important;
object-position:center !important;
border-radius:50% !important;
}
/* Industry photos keep their circular photo treatment. */
#industries.card-balance-section .orbit-card .orbit-image{
padding:0 !important;
}
#industries.card-balance-section .orbit-card .orbit-image img{
object-fit:cover !important;
object-position:center !important;
}
/* Material initials remain optically centered. */
#materials.card-balance-section .orbit-card .orbit-image{
font-size:31px !important;
line-height:1 !important;
font-weight:700 !important;
}
/* Text begins at one controlled distance below every circle. */
.card-balance-section .orbit-card strong{
flex:0 0 42px !important;
width:100% !important;
max-width:100% !important;
min-height:42px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:flex-start !important;
justify-content:center !important;
font-size:17px !important;
line-height:1.25 !important;
font-weight:700 !important;
text-align:center !important;
color:var(--gold) !important;
overflow-wrap:anywhere !important;
}
.card-balance-section .orbit-card small{
width:100% !important;
margin:0 !important;
padding:0 !important;
min-height:16px !important;
font-size:12px !important;
line-height:1.3 !important;
text-align:center !important;
color:#687386 !important;
}
/* Never let touch/focus feedback change the card geometry. */
.card-balance-section .orbit-card:hover,
.card-balance-section .orbit-card:focus,
.card-balance-section .orbit-card:focus-visible,
.card-balance-section .orbit-card:active,
.card-balance-section .orbit-card.is-touch-active,
.card-balance-section .orbit-card.touch-pressed{
transform:none !important;
outline:none !important;
}
.card-balance-section .orbit-card:hover .orbit-image,
.card-balance-section .orbit-card:focus-visible .orbit-image,
.card-balance-section .orbit-card:active .orbit-image,
.card-balance-section .orbit-card.is-touch-active .orbit-image,
.card-balance-section .orbit-card.touch-pressed .orbit-image{
transform:none !important;
}
}
/* Small phones ------------------------------------------------- */
@media (max-width:380px){
.card-balance-section .marquee{
padding:12px 5px 22px !important;
}
.card-balance-section .orbit-card{
flex-basis:194px !important;
width:194px !important;
min-height:262px !important;
padding:18px 15px 18px !important;
}
.card-balance-section .orbit-card .orbit-image{
flex-basis:158px !important;
width:158px !important;
height:158px !important;
min-width:158px !important;
min-height:158px !important;
max-width:158px !important;
max-height:158px !important;
margin-bottom:12px !important;
}
.card-balance-section .orbit-card strong{
flex-basis:40px !important;
min-height:40px !important;
font-size:16px !important;
}
.card-balance-section .orbit-card small{
font-size:12px !important;
}
}
/* Extra-small phones: scale the complete card, not just the icon. */
@media (max-width:340px){
.card-balance-section .orbit-card{
flex-basis:186px !important;
width:186px !important;
min-height:252px !important;
padding:17px 13px !important;
}
.card-balance-section .orbit-card .orbit-image{
flex-basis:148px !important;
width:148px !important;
height:148px !important;
min-width:148px !important;
min-height:148px !important;
max-width:148px !important;
max-height:148px !important;
}
}
/* ================================================================
NEMREX V24 — COMPACT + BALANCED CARD SPACING
Product / Material / Industry cards
- less internal vertical padding
- enough top breathing room for the circle
- controlled icon-to-text gap
- compact, responsive card height
================================================================ */
.card-balance-section .orbit-card {
box-sizing: border-box !important;
}
/* Web / desktop */
@media (min-width: 791px) {
.card-balance-section .orbit-card {
padding: 10px 8px 12px !important;
gap: 9px !important;
min-height: 0 !important;
}
.card-balance-section .orbit-card .orbit-image {
margin-top: 0 !important;
margin-bottom: 3px !important;
}
.card-balance-section .orbit-card strong {
margin: 0 !important;
padding: 0 !important;
line-height: 1.25 !important;
}
.card-balance-section .orbit-card small {
margin: 0 !important;
padding: 0 !important;
line-height: 1.25 !important;
}
}
/* Tablet */
@media (min-width: 791px) and (max-width: 1100px) {
.card-balance-section .orbit-card {
padding: 11px 8px 13px !important;
gap: 9px !important;
}
}
/* Mobile */
@media (max-width: 790px) {
.card-balance-section .marquee {
padding: 10px 6px 20px !important;
}
.card-balance-section .orbit-card {
width: 205px !important;
flex-basis: 205px !important;
min-height: 250px !important;
height: auto !important;
padding: 12px 14px 14px !important;
margin: 0 !important;
gap: 0 !important;
}
/* The circle gets a small, deliberate top buffer — not a large empty area. */
.card-balance-section .orbit-card .orbit-image {
margin: 0 auto 11px !important;
}
/* Keep the title immediately below the circle without touching it. */
.card-balance-section .orbit-card strong {
flex: 0 0 42px !important;
min-height: 42px !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.25 !important;
}
.card-balance-section .orbit-card small {
min-height: 16px !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.25 !important;
}
}
/* Small phones */
@media (max-width: 380px) {
.card-balance-section .orbit-card {
width: 194px !important;
flex-basis: 194px !important;
min-height: 236px !important;
padding: 11px 13px 13px !important;
}
.card-balance-section .orbit-card .orbit-image {
margin-bottom: 10px !important;
}
}
/* Extra-small phones */
@media (max-width: 340px) {
.card-balance-section .orbit-card {
width: 186px !important;
flex-basis: 186px !important;
min-height: 226px !important;
padding: 10px 12px 12px !important;
}
.card-balance-section .orbit-card .orbit-image {
margin-bottom: 9px !important;
}
}
/* ==========================================================
NEMREX — FINAL MOBILE NAVIGATION FIX
Mobile-only override. Desktop navigation is untouched.
========================================================== */
@media (max-width:790px){
html,body{
width:100%!important;
max-width:100%!important;
overflow-x:hidden!important;
}
/* Do not block touch scrolling on the page itself. The drawer
receives vertical gestures through its own scroll container. */
body.mobile-menu-open{
overflow:hidden!important;
touch-action:auto!important;
overscroll-behavior:none!important;
}
.home-page header .links,
.home-page header .links.open{
min-height:0!important;
height:100dvh!important;
max-height:100dvh!important;
overflow-x:hidden!important;
overflow-y:auto!important;
touch-action:pan-y!important;
-webkit-overflow-scrolling:touch!important;
overscroll-behavior:contain!important;
overflow-anchor:none!important;
scrollbar-width:none!important;
-ms-overflow-style:none!important;
}
/* Remove the old visible scrollbar. This is the orange/gold strip
that was being mistaken for part of the Products menu. */
.home-page header .links::-webkit-scrollbar{
width:0!important;
height:0!important;
display:none!important;
}
.home-page header .links::-webkit-scrollbar-track,
.home-page header .links::-webkit-scrollbar-thumb{
background:transparent!important;
width:0!important;
}
/* Every top-level item keeps its own height when a submenu expands. */
.home-page header .links > .drop,
.home-page header .links > a{
flex:0 0 auto!important;
flex-shrink:0!important;
min-width:0!important;
box-sizing:border-box!important;
}
.home-page header .links > .drop > button{
flex:0 0 46px!important;
min-height:46px!important;
height:46px!important;
box-sizing:border-box!important;
}
/* The expanded submenu participates in normal document flow.
Nothing below Products is positioned underneath it. */
.home-page header .links > .drop.open > .drop-menu{
position:static!important;
display:block!important;
width:100%!important;
height:auto!important;
max-height:none!important;
flex:none!important;
box-sizing:border-box!important;
overflow:visible!important;
visibility:visible!important;
opacity:1!important;
transform:none!important;
}
.home-page header .links > .drop:not(.open) > .drop-menu{
display:none!important;
}
.home-page header .drop-menu a{
flex:0 0 auto!important;
min-width:0!important;
box-sizing:border-box!important;
}
/* Do not let a long Products list cover the following menu items. */
.home-page header .links > .drop.open + a,
.home-page header .links > .drop.open ~ .drop,
.home-page header .links > .drop.open ~ a{
position:relative!important;
z-index:2!important;
visibility:visible!important;
}
/* Keep the drawer itself above the overlay. */
.home-page header .links.open{
z-index:2003!important;
background:#fff!important;
}
.home-page .mobile-nav-overlay{
z-index:2001!important;
}
/* Prevent the gold submenu border from becoming a full-height/floating
element on narrow screens. It belongs only to the submenu. */
.home-page header .drop.open > .drop-menu{
border-left:2px solid var(--gold)!important;
border-top:0!important;
border-right:0!important;
border-bottom:0!important;
}
/* The quote CTA remains in normal flow after all menu content. */
.home-page header .links > a.quote{
position:relative!important;
flex:0 0 48px!important;
min-height:48px!important;
height:48px!important;
margin-top:14px!important;
margin-bottom:0!important;
}
}
/* Final mobile-only navigation cleanup. Desktop rules are intentionally untouched. */
@media (max-width:790px){
html,body{max-width:100%;overflow-x:hidden!important;}
body.mobile-menu-open{overflow:hidden!important;overscroll-behavior:none!important;}
/* The drawer is the only scrolling surface while open. Hide every native scrollbar. */
body.mobile-menu-open header .links,
body.mobile-menu-open header .links.open{
height:100dvh!important;
max-height:100dvh!important;
overflow-y:auto!important;
overflow-x:hidden!important;
-webkit-overflow-scrolling:touch!important;
touch-action:pan-y!important;
scrollbar-width:none!important;
-ms-overflow-style:none!important;
box-sizing:border-box!important;
}
body.mobile-menu-open header .links::-webkit-scrollbar,
body.mobile-menu-open header .links::-webkit-scrollbar-track,
body.mobile-menu-open header .links::-webkit-scrollbar-thumb{
width:0!important;height:0!important;display:none!important;background:transparent!important;
}
/* Never use a gold vertical border as a mobile drawer edge. */
body.mobile-menu-open header .drop > .drop-menu,
body.mobile-menu-open header .drop.open > .drop-menu{
border:0!important;
border-left:0!important;
}
/* Every menu row remains in normal flow. */
body.mobile-menu-open header .links > .drop,
body.mobile-menu-open header .links > a,
body.mobile-menu-open header .links > .nav-sep{
flex:0 0 auto!important;
flex-shrink:0!important;
position:relative!important;
visibility:visible!important;
opacity:1!important;
}
body.mobile-menu-open header .links > .drop > button{
width:100%!important;
min-height:46px!important;
height:46px!important;
flex:none!important;
box-sizing:border-box!important;
}
/* Closed submenu = zero layout space. Open submenu = normal document flow. */
body.mobile-menu-open header .links > .drop:not(.open) > .drop-menu{
display:none!important;
}
body.mobile-menu-open header .links > .drop.open > .drop-menu{
display:block!important;
position:static!important;
width:100%!important;
height:auto!important;
max-height:none!important;
margin:0!important;
padding:4px 0 6px 12px!important;
overflow:visible!important;
transform:none!important;
visibility:visible!important;
opacity:1!important;
box-sizing:border-box!important;
background:#fff!important;
box-shadow:none!important;
}
body.mobile-menu-open header .drop-menu a{
display:flex!important;
width:100%!important;
min-height:38px!important;
height:auto!important;
flex:0 0 auto!important;
box-sizing:border-box!important;
align-items:center!important;
padding:8px 10px!important;
}
/* Keep the utility rows and quote below Technical in the same flow. */
body.mobile-menu-open header .links > a.nav-icon,
body.mobile-menu-open header .links > a.quote{
flex-shrink:0!important;
visibility:visible!important;
}
body.mobile-menu-open header .links > a.quote{
margin-top:14px!important;
margin-bottom:0!important;
}
}
@media (max-width:380px){
body.mobile-menu-open header .links{width:88vw!important;max-width:316px!important;}
}
/* ================================================================
NEMREX V27 — MOBILE NAV STRUCTURAL FLOW FIX
The mobile drawer uses normal block flow instead of flex flow.
This prevents a long Products submenu from moving later siblings
(Technical, Contact Us, E-Catalogue, Weight Calculator, Quote)
horizontally or outside the drawer.
Desktop navigation is not changed.
================================================================ */
@media (max-width:790px){
/* Drawer itself scrolls; its children do NOT become horizontal flex items. */
body.mobile-menu-open header .links,
body.mobile-menu-open header .links.open{
display:block!important;
flex-direction:initial!important;
align-items:initial!important;
justify-content:initial!important;
gap:0!important;
width:min(316px,88vw)!important;
max-width:316px!important;
height:100dvh!important;
max-height:100dvh!important;
overflow-x:hidden!important;
overflow-y:auto!important;
padding:0 14px 28px!important;
box-sizing:border-box!important;
white-space:normal!important;
}
/* Reset layout-positioning properties on every top-level item. */
body.mobile-menu-open header .links > .drop,
body.mobile-menu-open header .links > a,
body.mobile-menu-open header .links > .nav-sep{
display:block!important;
position:static!important;
float:none!important;
clear:both!important;
inset:auto!important;
left:auto!important;
right:auto!important;
top:auto!important;
bottom:auto!important;
transform:none!important;
translate:none!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
margin-left:0!important;
margin-right:0!important;
box-sizing:border-box!important;
visibility:visible!important;
opacity:1!important;
}
/* The two dropdown wrappers are ordinary full-width blocks. */
body.mobile-menu-open header .links > .drop{
height:auto!important;
overflow:visible!important;
padding:0!important;
}
body.mobile-menu-open header .links > .drop > button{
display:flex!important;
position:static!important;
float:none!important;
clear:both!important;
width:100%!important;
min-width:0!important;
max-width:100%!important;
min-height:46px!important;
height:46px!important;
margin:0!important;
padding:0 10px!important;
box-sizing:border-box!important;
transform:none!important;
translate:none!important;
}
/* Closed menus occupy zero space. */
body.mobile-menu-open header .links > .drop:not(.open) > .drop-menu{
display:none!important;
}
/* Open menus are INSIDE the Products/Technical wrapper, never beside it. */
body.mobile-menu-open header .links > .drop.open > .drop-menu{
display:block!important;
position:static!important;
float:none!important;
clear:both!important;
inset:auto!important;
left:auto!important;
right:auto!important;
top:auto!important;
bottom:auto!important;
transform:none!important;
translate:none!important;
width:100%!important;
min-width:0!important;
max-width:100%!important;
height:auto!important;
max-height:none!important;
margin:0!important;
padding:4px 0 6px 12px!important;
box-sizing:border-box!important;
overflow:visible!important;
visibility:visible!important;
opacity:1!important;
border:0!important;
background:#fff!important;
box-shadow:none!important;
}
body.mobile-menu-open header .links > .drop.open > .drop-menu > a{
display:flex!important;
position:static!important;
float:none!important;
clear:both!important;
width:100%!important;
min-width:0!important;
max-width:100%!important;
min-height:38px!important;
height:auto!important;
margin:0!important;
padding:8px 10px!important;
box-sizing:border-box!important;
transform:none!important;
translate:none!important;
white-space:normal!important;
}
/* Utility links and Quote are forced back into the same vertical flow. */
body.mobile-menu-open header .links > a.nav-icon,
body.mobile-menu-open header .links > a.quote{
display:flex!important;
position:static!important;
float:none!important;
clear:both!important;
inset:auto!important;
transform:none!important;
translate:none!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
margin-left:0!important;
margin-right:0!important;
box-sizing:border-box!important;
flex:none!important;
}
body.mobile-menu-open header .links > a.nav-icon{
min-height:50px!important;
height:50px!important;
margin-top:0!important;
margin-bottom:0!important;
padding:0 10px!important;
align-items:center!important;
justify-content:flex-start!important;
}
body.mobile-menu-open header .links > a.quote{
min-height:48px!important;
height:48px!important;
margin:14px 0 0!important;
padding:0 12px!important;
align-items:center!important;
justify-content:center!important;
}
/* Sticky drawer header stays full width without affecting menu flow. */
body.mobile-menu-open header .links > .drawer-head{
display:block!important;
position:sticky!important;
top:0!important;
z-index:20!important;
width:auto!important;
max-width:none!important;
margin:0 -14px 8px!important;
clear:both!important;
float:none!important;
}
/* Do not let desktop hover rules open/position dropdowns on touch. */
body.mobile-menu-open header .links > .drop:hover > .drop-menu,
body.mobile-menu-open header .links > .drop:focus-within > .drop-menu{
position:static!important;
left:auto!important;
right:auto!important;
transform:none!important;
}
}
@media (max-width:380px){
body.mobile-menu-open header .links,
body.mobile-menu-open header .links.open{
width:88vw!important;
max-width:316px!important;
}
}
/* ================================================================
NEMREX V28 — MOBILE NAV SPACING + DROPDOWN GROUPING
Mobile-only refinement of the already-correct V27 structure.
- Consistent top-level row height/padding
- No artificial separator block between Contact and utilities
- Dropdown children grouped with a left gold rule
- Drawer shrink-wraps to its content, while remaining scrollable
================================================================ */
@media (max-width:790px){
/* Let the drawer end with its actual content instead of filling the
remaining viewport with unexplained white space. It still scrolls
when an expanded menu becomes taller than the viewport. */
body.mobile-menu-open header .links,
body.mobile-menu-open header .links.open{
height:auto!important;
min-height:0!important;
max-height:100dvh!important;
overflow-x:hidden!important;
overflow-y:auto!important;
padding:0 14px 14px!important;
box-sizing:border-box!important;
}
/* One consistent rhythm for every top-level menu row. */
body.mobile-menu-open header .links > a:not(.nav-icon):not(.quote),
body.mobile-menu-open header .links > .drop > button{
width:100%!important;
min-height:46px!important;
height:46px!important;
margin:0!important;
padding:0 10px!important;
box-sizing:border-box!important;
display:flex!important;
align-items:center!important;
justify-content:flex-start!important;
border-bottom:1px solid #e9edf2!important;
}
/* Keep the parent/dropdown relationship visually consistent. */
body.mobile-menu-open header .links > .drop{
margin:0!important;
padding:0!important;
border:0!important;
width:100%!important;
}
/* The dropdown itself stays in normal flow and gets ONE left rule.
This is deliberately on the dropdown container, not on the drawer,
so it can never push the following top-level items sideways. */
body.mobile-menu-open header .links > .drop.open > .drop-menu{
display:block!important;
position:static!important;
width:calc(100% - 10px)!important;
min-width:0!important;
max-width:none!important;
height:auto!important;
max-height:none!important;
margin:0 0 0 10px!important;
padding:5px 0 7px 12px!important;
border:0!important;
border-left:2px solid #E5A910!important;
box-sizing:border-box!important;
background:#fff!important;
box-shadow:none!important;
overflow:visible!important;
}
/* Submenu links use the same vertical rhythm, with no extra outer gaps. */
body.mobile-menu-open header .links > .drop.open > .drop-menu > a{
width:100%!important;
min-height:38px!important;
height:auto!important;
margin:0!important;
padding:8px 10px!important;
box-sizing:border-box!important;
display:flex!important;
align-items:center!important;
border:0!important;
}
/* View All Products remains part of the same grouped dropdown. */
body.mobile-menu-open header .links > .drop.open > .drop-menu > a.view-all{
min-height:42px!important;
margin-top:3px!important;
padding:8px 10px!important;
}
/* Technical gets exactly the same treatment as Products. */
body.mobile-menu-open header .links > .drop.open > button{
border-bottom:1px solid #e9edf2!important;
}
/* Remove the desktop/mobile separator element completely on mobile.
The old separator rendered as a blank grey block in the screenshot. */
body.mobile-menu-open header .links > .nav-sep{
display:none!important;
width:0!important;
height:0!important;
margin:0!important;
padding:0!important;
border:0!important;
}
/* Utility rows follow the same rhythm and do not introduce random gaps. */
body.mobile-menu-open header .links > a.nav-icon{
min-height:50px!important;
height:50px!important;
margin:0!important;
padding:0 10px!important;
border-bottom:1px solid #e9edf2!important;
box-sizing:border-box!important;
}
/* Quote is the final element, with only a deliberate small top gap. */
body.mobile-menu-open header .links > a.quote{
min-height:48px!important;
height:48px!important;
margin:14px 0 0!important;
padding:0 12px!important;
box-sizing:border-box!important;
}
/* Keep the drawer header from adding an inconsistent bottom margin. */
body.mobile-menu-open header .links > .drawer-head{
margin:0 -14px 0!important;
}
}
/* NEMREX V29 — final mobile drawer render fix. Reasserts a single,
predictable flex column so no legacy rule can collapse the menu rows. */
@media (max-width:790px){
html,body{max-width:100%!important;overflow-x:hidden!important;}
body.mobile-menu-open header .links,
body.mobile-menu-open header .links.open,
.home-page header .links.open{
position:fixed!important;
top:0!important; left:0!important; right:auto!important; bottom:0!important;
width:min(318px,88vw)!important; max-width:318px!important;
height:100dvh!important; max-height:100dvh!important;
margin:0!important; padding:0 14px 14px!important;
display:flex!important; flex-direction:column!important; flex-wrap:nowrap!important;
align-items:stretch!important; align-content:stretch!important; justify-content:flex-start!important;
gap:0!important;
box-sizing:border-box!important;
overflow-x:hidden!important; overflow-y:auto!important;
background:#fff!important;
visibility:visible!important; opacity:1!important; pointer-events:auto!important;
transform:none!important;
z-index:2147483002!important;
}
/* Header row is part of the drawer flow, not an overlay over the links. */
body.mobile-menu-open header .links > .drawer-head{
display:block!important; position:sticky!important; top:0!important;
flex:0 0 64px!important; width:auto!important; height:64px!important;
margin:0 -14px 0!important; padding:0!important;
z-index:20!important; background:#fff!important;
box-sizing:border-box!important;
}
body.mobile-menu-open header .links > .drawer-head .drawer-close{
display:flex!important; width:100%!important; height:64px!important;
min-height:64px!important; margin:0!important; padding:0 14px!important;
align-items:center!important; justify-content:flex-start!important;
box-sizing:border-box!important;
}
/* Every top-level navigation item gets a real flex row. */
body.mobile-menu-open header .links > a,
body.mobile-menu-open header .links > .drop{
position:static!important; float:none!important; clear:none!important;
inset:auto!important; transform:none!important; translate:none!important;
width:100%!important; max-width:100%!important; min-width:0!important;
margin:0!important; padding:0!important;
display:block!important; flex:0 0 auto!important;
flex-shrink:0!important; visibility:visible!important; opacity:1!important;
box-sizing:border-box!important;
}
body.mobile-menu-open header .links > a:not(.nav-icon):not(.quote),
body.mobile-menu-open header .links > .drop > button{
display:flex!important; flex:0 0 46px!important;
width:100%!important; height:46px!important; min-height:46px!important;
margin:0!important; padding:0 10px!important;
align-items:center!important; justify-content:flex-start!important;
box-sizing:border-box!important;
border:0!important; border-bottom:1px solid #e9edf2!important;
background:#fff!important; color:#0D1F3D!important;
}
/* Closed dropdowns occupy no space; open dropdowns stay inside parent. */
body.mobile-menu-open header .links > .drop:not(.open) > .drop-menu{
display:none!important;
}
body.mobile-menu-open header .links > .drop.open > .drop-menu{
display:block!important; position:static!important; float:none!important;
width:calc(100% - 10px)!important; min-width:0!important; max-width:none!important;
height:auto!important; max-height:none!important;
margin:0 0 0 10px!important; padding:5px 0 7px 12px!important;
box-sizing:border-box!important; overflow:visible!important;
border:0!important; border-left:2px solid #E5A910!important;
background:#fff!important; box-shadow:none!important;
transform:none!important; visibility:visible!important; opacity:1!important;
}
body.mobile-menu-open header .links > .drop.open > .drop-menu > a{
display:flex!important; position:static!important; float:none!important;
width:100%!important; min-height:38px!important; height:auto!important;
margin:0!important; padding:8px 10px!important;
box-sizing:border-box!important; align-items:center!important;
border:0!important; background:#fff!important; color:#0D1F3D!important;
}
body.mobile-menu-open header .links > .drop.open > .drop-menu > a.view-all{
min-height:42px!important; margin-top:3px!important;
background:#fff8e5!important; font-weight:800!important;
}
/* Material, Industries, Contact and utility links cannot be positioned sideways. */
body.mobile-menu-open header .links > a{
left:auto!important; right:auto!important; top:auto!important; bottom:auto!important;
}
body.mobile-menu-open header .links > a.nav-icon{
display:flex!important; flex:0 0 50px!important;
width:100%!important; height:50px!important; min-height:50px!important;
margin:0!important; padding:0 10px!important;
align-items:center!important; justify-content:flex-start!important;
border:0!important; border-bottom:1px solid #e9edf2!important;
background:#fff!important; box-sizing:border-box!important;
}
body.mobile-menu-open header .links > .nav-sep{
display:none!important; flex:none!important; width:0!important; height:0!important;
margin:0!important; padding:0!important; border:0!important;
}
body.mobile-menu-open header .links > a.quote{
display:flex!important; flex:0 0 48px!important;
width:100%!important; height:48px!important; min-height:48px!important;
margin:14px 0 0!important; padding:0 12px!important;
align-items:center!important; justify-content:center!important;
box-sizing:border-box!important;
}
body.mobile-menu-open header .links::-webkit-scrollbar{
width:0!important; height:0!important; display:none!important;
}
body.mobile-menu-open header .links{
scrollbar-width:none!important; -ms-overflow-style:none!important;
touch-action:pan-y!important; -webkit-overflow-scrolling:touch!important;
}
}
@media (max-width:380px){
body.mobile-menu-open header .links,
body.mobile-menu-open header .links.open{width:88vw!important;max-width:316px!important;}
}
/* NEMREX V30 — stop flex-column wrapping. This is the key fix for the
lower navigation items moving to the right after Products expands. */
@media (max-width:790px){
body.mobile-menu-open header .links,
body.mobile-menu-open header .links.open,
.home-page header .links.open{
display:flex!important;
flex-direction:column!important;
flex-wrap:nowrap!important;
align-items:stretch!important;
align-content:stretch!important;
justify-content:flex-start!important;
overflow-x:hidden!important;
overflow-y:auto!important;
}
/* Every direct child stays in the same single vertical flex column. */
body.mobile-menu-open header .links > .drawer-head,
body.mobile-menu-open header .links > .drop,
body.mobile-menu-open header .links > a,
body.mobile-menu-open header .links > .nav-sep{
flex-shrink:0!important;
float:none!important;
clear:none!important;
}
/* Never allow later siblings to become a second flex column. */
body.mobile-menu-open header .links > .drop.open ~ .drop,
body.mobile-menu-open header .links > .drop.open ~ a{
position:static!important;
left:auto!important; right:auto!important;
transform:none!important; translate:none!important;
margin-left:0!important; margin-right:0!important;
visibility:visible!important; opacity:1!important;
}
}
/* ==========================================================
NEMREX V31 — TOUCH COLOR FIX FOR PRODUCT / MATERIAL / INDUSTRY CARDS
Desktop: existing hover behavior remains unchanged.
Touch: cards stay Navy by default and turn Gold only while tapped.
========================================================== */
@media (hover: none), (pointer: coarse) {
/* Never let a browser-emulated hover leave card text Gold on touch. */
.card-balance-section .orbit-card strong,
.carousel-section .orbit-card strong {
color: var(--navy) !important;
}
/* Material initials also remain Navy until the card is actually touched. */
.card-balance-section .material-card .orbit-image,
.carousel-section .material-card .orbit-image {
background: #fff !important;
color: var(--navy) !important;
}
/* Keep the card visually neutral when the browser emulates :hover. */
.card-balance-section .orbit-card:hover,
.carousel-section .orbit-card:hover,
.card-balance-section .material-card:hover,
.carousel-section .material-card:hover {
background: transparent !important;
box-shadow: none !important;
transform: none !important;
}
.card-balance-section .orbit-card:hover .orbit-image,
.carousel-section .orbit-card:hover .orbit-image,
.card-balance-section .material-card:hover .orbit-image,
.carousel-section .material-card:hover .orbit-image {
background: #fff !important;
color: var(--navy) !important;
transform: none !important;
}
/* The actual touch state: Navy -> Gold, briefly, only for the card being tapped. */
.card-balance-section .orbit-card.touch-pressed strong,
.carousel-section .orbit-card.touch-pressed strong,
.card-balance-section .orbit-card.is-touch-active strong,
.carousel-section .orbit-card.is-touch-active strong {
color: var(--gold) !important;
}
.card-balance-section .material-card.touch-pressed .orbit-image,
.carousel-section .material-card.touch-pressed .orbit-image,
.card-balance-section .material-card.is-touch-active .orbit-image,
.carousel-section .material-card.is-touch-active .orbit-image {
background: #fff !important;
color: var(--navy) !important;
}
.card-balance-section .orbit-card.touch-pressed .orbit-image,
.carousel-section .orbit-card.touch-pressed .orbit-image,
.card-balance-section .orbit-card.is-touch-active .orbit-image,
.carousel-section .orbit-card.is-touch-active .orbit-image {
border-color: var(--gold) !important;
}
}
/* ==========================================================
NEMREX V32 — MOBILE NAV TOUCH FEEDBACK
Normal: Navy. While a mobile item is being touched: Gold.
Desktop hover styling is intentionally untouched.
========================================================== */
@media (hover:none), (pointer:coarse){
/* Keep the normal mobile navigation state Navy. */
body.mobile-menu-open header .links > a,
body.mobile-menu-open header .links > .drop > button,
body.mobile-menu-open header .drop-menu > a,
body.mobile-menu-open header .nav-icon{
color:var(--navy)!important;
}
/* Direct top-level links: Navy -> Gold while touched. */
body.mobile-menu-open header .links > a.touch-pressed,
body.mobile-menu-open header .links > .drop > button.touch-pressed,
body.mobile-menu-open header .drop-menu > a.touch-pressed,
body.mobile-menu-open header .nav-icon.touch-pressed{
color:var(--gold)!important;
}
/* Recreate the gold underline feedback for top-level links. */
body.mobile-menu-open header .links > a.touch-pressed::after,
body.mobile-menu-open header .links > .drop > button.touch-pressed::after{
transform:scaleX(1)!important;
}
/* Dropdown items get a subtle background plus Gold text while touched. */
body.mobile-menu-open header .drop-menu > a.touch-pressed{
background:#f7f9fb!important;
color:var(--gold)!important;
}
/* View All Products keeps its special background, but its text still
gets touch feedback. */
body.mobile-menu-open header .drop-menu > a.view-all.touch-pressed{
background:#fff8e7!important;
color:var(--gold)!important;
}
/* The quote button remains a Gold button; its label does not need to
become Gold because that would reduce contrast. */
body.mobile-menu-open header .links > a.quote.touch-pressed{
color:var(--navy)!important;
}
}
/* =========================================================
NEMREX — Footer V33
Company identity + 7/7 balanced link columns + Contact/Follow Us
========================================================= */
footer .footer-company{min-width:0}
footer .footer-tagline{
margin:14px 0 9px!important;
color:#fff!important;
font-family:"Canva Sans","Open Sans",Arial,sans-serif!important;
font-size:15px!important;
font-style:italic!important;
font-weight:400!important;
line-height:1.45!important;
}
footer .footer-description{
margin:0!important;
max-width:390px;
color:#d9e1eb!important;
font-family:"Canva Sans","Open Sans",Arial,sans-serif!important;
font-size:15px!important;
font-weight:400!important;
line-height:1.65!important;
letter-spacing:0!important;
}
footer .footer-follow{margin-top:20px}
footer .footer-follow h4{
margin:4px 0 14px!important;
padding-bottom:12px!important;
position:relative!important;
color:var(--gold)!important;
font-family:"Canva Sans","Open Sans",Arial,sans-serif!important;
font-size:18px!important;
font-weight:700!important;
line-height:1.25!important;
letter-spacing:.02em!important;
text-transform:none!important;
}
footer .footer-follow h4:after{
content:"";
position:absolute;
bottom:0;
left:0;
width:40px;
height:2px;
background:var(--gold);
}
footer .footer-follow .socials{
display:flex;
align-items:center;
gap:10px;
margin-top:0!important;
}
footer .footer-follow .socials a{
width:40px!important;
height:40px!important;
min-width:40px!important;
min-height:40px!important;
border:1.5px solid var(--gold)!important;
border-radius:50%!important;
display:grid!important;
place-items:center!important;
background:#fff!important;
color:#fff!important;
box-shadow:none!important;
transform:none!important;
outline:none!important;
-webkit-tap-highlight-color:transparent;
transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease!important;
}
footer .footer-follow .socials a svg{
width:21px!important;
height:21px!important;
display:block!important;
color:inherit!important;
fill:currentColor!important;
}
footer .footer-follow .socials .instagram svg{
fill:none!important;
stroke:currentColor!important;
stroke-width:2!important;
}
footer .footer-follow .socials .instagram .dot{
fill:currentColor!important;
stroke:none!important;
}
/* Original platform colours on the white circle */
footer .footer-follow .socials .linkedin{color:#0A66C2!important}
footer .footer-follow .socials .instagram{color:#E4405F!important}
footer .footer-follow .socials .youtube{color:#FF0000!important}
footer .footer-follow .socials .facebook{color:#1877F2!important}
/* Touch, hover and keyboard focus: gold-filled circle with white original icon */
footer .footer-follow .socials a:hover,
footer .footer-follow .socials a:active,
footer .footer-follow .socials a:focus-visible,
footer .footer-follow .socials a.touch-active{
background:var(--gold)!important;
border-color:var(--gold)!important;
color:#fff!important;
transform:translateY(-2px)!important;
box-shadow:0 5px 12px rgba(0,0,0,.20)!important;
}
footer .footer-follow .socials a:focus-visible{
outline:2px solid #fff!important;
outline-offset:3px!important;
}
@media(max-width:520px){
footer .footer-follow .socials{gap:10px}
footer .footer-follow .socials a{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important}
footer .footer-follow .socials a svg{width:21px!important;height:21px!important}
}
/* Remove the automatic decorative line that appeared when hovering navigation text. */
.links > a::after,
.drop > button::after,
.links > a:hover::after,
.links > a.active::after,
.drop:hover > button::after,
.drop.open > button::after,
.drop:focus-within > button::after,
body.mobile-menu-open header .links > a.touch-pressed::after,
body.mobile-menu-open header .links > .drop > button.touch-pressed::after {
display: none !important;
content: none !important;
transform: none !important;
}
/* Keep navigation text color changes, but do not create an underline. */
.links > a:hover,
.drop > button:hover,
.links > a.active,
.drop.open > button {
text-decoration: none !important;
}
/*
NEMREX TYPOGRAPHY — MATCHED TO SUPPLIED PROFILE LOGO
Display / headings: Yeseva One
Body / navigation / UI: Canva Sans -> Open Sans -> Arial fallback
Important: the supplied logo is an image, so its original wordmark remains
unchanged. These rules make the live HTML text visually match it.
*/
:root{
--font-display:"Yeseva One",Georgia,"Times New Roman",serif;
--font-body:"Canva Sans","Open Sans",Arial,Helvetica,sans-serif;
}
body,
button,
input,
select,
textarea,
.top,
.links,
.btn,
.eyebrow,
.benefit,
.tool,
.orbit-card,
.orbit-card strong,
.orbit-card small,
.drop-menu a,
.quote,
footer,
footer p,
footer a,
.foot-links a,
.bottom,
.lockup small,
.brand-text small{
font-family:var(--font-body)!important;
}
h1,h2,h3,h4,
.brand-text b,
.lockup b,
.foot-brand b,
.home-page h1,
.home-page h2,
.home-page h3,
.home-page h4,
.home-page header .brand .lockup b,
.home-page footer .foot-brand .lockup b{
font-family:var(--font-display)!important;
font-weight:400;
}
h1,h2,h3,h4{
letter-spacing:0;
}
body{
line-height:1.6;
}
.home-page p,
.home-page li,
.home-page label,
.home-page input,
.home-page textarea,
.home-page select,
.home-page button,
.home-page .btn,
.home-page .links{
font-family:var(--font-body)!important;
}
.home-page p{
font-size:15.5px;
line-height:1.7;
}
.home-page .hero h1{
font-family:var(--font-display)!important;
}
.home-page .hero .eyebrow,
.home-page .hero p{
font-family:var(--font-body)!important;
}
.home-page header .brand .lockup b{
font-family:var(--font-display)!important;
font-weight:400!important;
}
.home-page header .brand .lockup small,
.home-page footer .foot-brand .lockup small{
font-family:var(--font-body)!important;
font-weight:700!important;
}
@media (max-width:790px){
.home-page .hero h1,
.home-page h1,
.home-page h2,
.home-page h3,
.home-page h4{
font-family:var(--font-display)!important;
}
}
/*
NEMREX FOOTER TEXT COLOR — FINAL
The company description under the logo uses exactly the same light-grey
text colour as the Quick Links / Products / Contact link text.
*/
footer .footer-description,
footer .footer-company .footer-description,
footer .foot-brand + .footer-description {
color:#d9e1eb !important;
opacity:1 !important;
}
/* Keep the footer tagline intentionally white; only the descriptive paragraph
is matched to the link text colour. */
footer .footer-tagline {
color:#ffffff !important;
}
/* Keep all normal footer link text on the same light-grey tone. */
footer .foot-links a,
footer .footer-links a {
color:#d9e1eb !important;
}
/* Gold remains reserved for headings, arrows and interaction states. */
footer .foot-links a:hover,
footer .foot-links a:focus-visible,
footer .footer-links a:hover,
footer .footer-links a:focus-visible {
color:var(--gold) !important;
}
/* FINAL FOOTER HEADING TYPOGRAPHY
All footer section headings use the same Yeseva One style.
Normal footer content remains Canva Sans / Open Sans. */
footer h3,
footer .footer-follow h4,
footer .footer-company h3,
footer .foot-links + h3 {
font-family:"Yeseva One",Georgia,"Times New Roman",serif!important;
font-weight:400!important;
font-style:normal!important;
letter-spacing:0!important;
}
footer .footer-tagline,
footer .footer-description,
footer .foot-links a,
footer .contact-links a,
footer .bottom,
footer .footer-follow .socials a {
font-family:"Canva Sans","Open Sans",Arial,Helvetica,sans-serif!important;
}
/* Preserve the approved footer description and its matched light-grey tone. */
footer .footer-description {
color:#d9e1eb!important;
font-size:15px!important;
font-weight:400!important;
line-height:1.65!important;
}
/* Keep all footer headings in the approved Nemrex gold. */
footer h3,
footer .footer-follow h4 {
color:var(--gold)!important;
}
/* Final brand lockup: keep NEMREX and INDUSTRIES visibly paired on mobile and footer. */
.brand .lockup,
.foot-brand .lockup{
width:max-content !important;
min-width:0 !important;
flex:0 0 auto !important;
overflow:visible !important;
}
.brand .lockup b,
.foot-brand .lockup b{
display:block !important;
white-space:nowrap !important;
overflow:visible !important;
line-height:1 !important;
}
.brand .lockup small,
.foot-brand .lockup small{
width:100% !important;
display:flex !important;
justify-content:space-between !important;
align-items:center !important;
gap:0 !important;
margin-top:7px !important;
padding:0 !important;
font-family:"Canva Sans","Segoe UI",Arial,sans-serif !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1 !important;
letter-spacing:0 !important;
color:var(--gold) !important;
white-space:nowrap !important;
}
.brand .lockup small span,
.foot-brand .lockup small span{
display:block !important;
flex:0 0 auto !important;
}
@media(max-width:790px){
header .brand{gap:10px !important; align-items:center !important;}
header .brand img{height:50px !important; width:auto !important; max-width:68px !important;}
header .brand .lockup b{font-size:22px !important; letter-spacing:.025em !important;}
header .brand .lockup small{font-size:9px !important; margin-top:6px !important;}
}
@media(max-width:520px){
header .brand img{height:48px !important; max-width:64px !important;}
header .brand .lockup b{font-size:20px !important;}
header .brand .lockup small{font-size:8px !important; margin-top:6px !important;}
footer .foot-brand .lockup b{font-size:24px !important;}
footer .foot-brand .lockup small{font-size:9px !important;}
}
/* NEMREX — single hero image with subtle cinematic motion */
.hero { min-height:470px; }
.hero-inner { max-width:1400px; padding:48px 5% 62px; }
.hero-media img { object-fit:cover; object-position:center right; }
@media (max-width:790px) { .hero { min-height:455px; } .hero-inner { padding:48px 5% 62px; } }
@media (max-width:520px) { .hero { min-height:455px; } .hero-inner { padding:42px 6% 62px; } .hero-inner .btn { width:100%; justify-content:center; margin-right:0; margin-bottom:10px; } }
@media (prefers-reduced-motion:reduce) { .hero-media img,.hero-media video { animation:none !important; transform:none !important; } }
/* FINAL MOBILE HERO POLISH — floating contact controls intentionally unchanged. */
@media (max-width: 790px){
.home-page .hero{
min-height:455px !important;
align-items:center !important;
}
.home-page .hero-media img,
.home-page .hero-media video{
object-position:62% center !important;
}
.home-page .hero-inner{
padding:30px 6% 34px !important;
}
.home-page .hero .eyebrow{
font-size:11px !important;
line-height:1.3 !important;
letter-spacing:.035em !important;
}
.home-page .hero h1{
font-size:clamp(30px,8.2vw,38px) !important;
line-height:1.04 !important;
margin:10px 0 12px !important;
max-width:100% !important;
}
.home-page .hero p{
font-size:14px !important;
line-height:1.52 !important;
max-width:100% !important;
margin:0 !important;
}
.home-page .hero .hero-actions{
margin-top:12px !important;
gap:9px !important;
}
.home-page .hero .hero-actions .btn{
min-height:46px !important;
padding:11px 16px !important;
margin:0 !important;
}
}
@media (max-width:520px){
.home-page .hero{
min-height:455px !important;
}
.home-page .hero-inner{
padding:28px 6% 32px !important;
}
.home-page .hero .eyebrow{
font-size:10.5px !important;
}
.home-page .hero h1{
font-size:clamp(29px,8.4vw,36px) !important;
line-height:1.03 !important;
margin:9px 0 11px !important;
}
.home-page .hero p{
font-size:14px !important;
line-height:1.5 !important;
}
.home-page .hero .hero-actions{
margin-top:11px !important;
gap:9px !important;
}
}
@media (max-width:380px){
.home-page .hero-inner{
padding-left:5.5% !important;
padding-right:5.5% !important;
}
.home-page .hero h1{
font-size:29px !important;
}
.home-page .hero p{
font-size:13.5px !important;
}
}
/* FINAL CLEAN MOTION HERO — short, premium copy; floating controls untouched. */
.home-page .hero {
min-height: 470px !important;
}
.home-page .hero-inner {
max-width: 1400px !important;
padding: 48px 5% 62px !important;
}
.home-page .hero h1 {
max-width: 720px !important;
margin: 13px 0 15px !important;
}
.home-page .hero p {
max-width: 570px !important;
margin: 0 !important;
font-size: 16px !important;
line-height: 1.65 !important;
}
.home-page .hero-media img {
object-fit: cover !important;
object-position: center right !important;
transform-origin: center right !important;
animation: heroKenBurns 22s ease-in-out 1 both !important;
}
@media (max-width: 790px) {
.home-page .hero {
min-height: 455px !important;
}
.home-page .hero-media img {
object-position: 62% center !important;
}
.home-page .hero-inner {
padding: 34px 6% 34px !important;
}
.home-page .hero .eyebrow {
font-size: 11px !important;
line-height: 1.3 !important;
letter-spacing: .035em !important;
}
.home-page .hero h1 {
max-width: 100% !important;
font-size: clamp(30px, 8.2vw, 38px) !important;
line-height: 1.05 !important;
margin: 9px 0 12px !important;
}
.home-page .hero p {
max-width: 100% !important;
font-size: 14px !important;
line-height: 1.5 !important;
}
.home-page .hero > .hero-inner > .btn {
width: 100% !important;
justify-content: center !important;
margin: 11px 0 0 !important;
}
}
@media (max-width: 520px) {
.home-page .hero {
min-height: 455px !important;
}
.home-page .hero-inner {
padding: 28px 6% 30px !important;
}
.home-page .hero .eyebrow {
font-size: 10.5px !important;
}
.home-page .hero h1 {
font-size: clamp(29px, 8.4vw, 36px) !important;
line-height: 1.04 !important;
margin: 8px 0 10px !important;
}
.home-page .hero p {
font-size: 14px !important;
line-height: 1.48 !important;
}
}
@media (max-width: 380px) {
.home-page .hero h1 {
font-size: 29px !important;
}
.home-page .hero p {
font-size: 13.5px !important;
}
}
@media (prefers-reduced-motion: reduce) {
.home-page .hero-media img {
animation: none !important;
transform: none !important;
}
}
/* ==========================================================
NEMREX PRODUCT CATEGORY — COILS, SHEETS & PLATES
Visual system follows the supplied Home page.
========================================================== */
.product-page{
background:#fff;
color:var(--text);
}
.product-container{
width:100%;
max-width:1250px;
margin:0 auto;
}
.product-page .eyebrow{
color:var(--gold);
font-size:12px;
font-weight:bold;
text-transform:uppercase;
letter-spacing:.04em;
}
/* HERO — deliberately same 470px rhythm as Home */
.product-hero{
position:relative;
isolation:isolate;
overflow:hidden;
min-height:470px;
display:flex;
align-items:center;
color:#fff;
background:var(--navy);
}
.product-hero-media{
position:absolute;
inset:0;
z-index:0;
overflow:hidden;
}
.product-hero-media img{
width:100%;
height:100%;
display:block;
object-fit:cover;
object-position:center right;
transform-origin:center right;
transform:none;
animation:none;
}
.product-hero-scrim{
position:absolute;
inset:0;
z-index:1;
background:linear-gradient(90deg,rgba(13,31,61,.94) 0%,rgba(13,31,61,.70) 48%,rgba(13,31,61,.22) 100%);
pointer-events:none;
}
.product-hero-inner{
position:relative;
z-index:2;
max-width:1400px;
width:100%;
margin:auto;
padding:48px 5% 62px;
}
.product-hero h1{
max-width:650px;
color:#fff;
font-family:Georgia,'Times New Roman',serif;
font-size:clamp(36px,4.5vw,60px);
line-height:1.03;
margin:13px 0;
}
.product-hero h1 em{
font-style:normal;
color:var(--gold);
}
.product-hero p{
max-width:570px;
margin:0;
color:#e7edf3;
line-height:1.7;
font-size:16px;
}
.hero-actions{
margin-top:7px;
}
.product-hero .btn{
padding:13px 18px;
margin:8px 8px 0 0;
border:1px solid var(--gold);
border-radius:3px;
background:var(--gold);
color:var(--navy);
font-size:11px;
font-weight:bold;
text-transform:uppercase;
transition:background .2s,color .2s,transform .2s;
}
.product-hero .btn:hover,
.product-hero .btn:focus-visible{
background:var(--navy);
color:#fff;
transform:translateY(-2px);
}
.product-hero .btn.outline{
background:transparent;
border-color:#fff;
color:#fff;
}
.product-hero .btn.outline:hover{
background:var(--gold);
border-color:var(--gold);
color:var(--navy);
}
@keyframes productHeroKenBurns{
0%{transform:scale(1) translate3d(0,0,0)}
100%{transform:scale(1.10) translate3d(-1.2%,0,0)}
}
/* SECTION RHYTHM */
.product-page .section{
padding:62px 5%;
}
.product-intro{
background:#fff;
}
.intro-grid{
display:grid;
grid-template-columns:.85fr 1.15fr;
gap:65px;
align-items:start;
}
.product-page h2{
color:var(--navy);
font-family:Georgia,'Times New Roman',serif;
font-size:clamp(26px,3vw,37px);
line-height:1.12;
margin:9px 0;
}
.intro-copy p{
margin:0 0 17px;
color:#5c6674;
font-size:15.5px;
line-height:1.7;
}
.intro-copy strong{
color:#545454;
}
/* RANGE */
.product-range-section{
background:#f5f8fa;
border-top:1px solid #e1e7ed;
border-bottom:1px solid #e1e7ed;
}
.product-heading{
max-width:900px;
margin-bottom:34px;
}
.product-heading p{
max-width:850px;
margin:0;
color:#5c6674;
font-size:15.5px;
line-height:1.7;
}
.product-grid{
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
gap:14px;
}
.product-card{
position:relative;
min-height:235px;
padding:25px 20px 22px;
background:#fff;
border:1px solid #d3dce5;
border-top:2px solid var(--gold);
transition:border-color .2s,box-shadow .2s,transform .2s;
}
.product-card-number{
position:absolute;
top:16px;
right:17px;
color:#a5adb7;
font-size:11px;
font-weight:bold;
letter-spacing:.05em;
}
.product-card-icon{
width:50px;
height:50px;
display:grid;
place-items:center;
border:1.5px solid var(--gold);
border-radius:50%;
color:var(--gold);
font-size:22px;
line-height:1;
transition:background .2s,color .2s,transform .2s;
}
/* Product card icon + title row */
.product-card-heading{
display:flex;
align-items:center;
gap:14px;
width:100%;
}
.product-card .product-card-heading h3{
margin:0;
flex:1;
min-width:0;
}
.product-card h3{
margin:17px 0 9px;
color:var(--navy);
font-family:Georgia,'Times New Roman',serif;
font-size:21px;
line-height:1.22;
}
.product-card p{
margin:0;
color:#5c6674;
font-size:14px;
line-height:1.65;
}
.product-card:hover,
.product-card:focus-within{
border-color:var(--gold);
box-shadow:0 10px 24px rgba(13,31,61,.10);
transform:translateY(-3px);
}
.product-card:hover .product-card-icon,
.product-card:focus-within .product-card-icon{
background:var(--gold);
color:var(--navy);
transform:translateY(-1px);
}
.product-card:hover h3,
.product-card:focus-within h3{
color:var(--gold);
}
/* TECHNICAL TABLE */
.technical-product-section{
background:#fff;
}
.technical-table-wrap{
overflow-x:auto;
border:1px solid #d8e0e8;
}
.technical-table{
width:100%;
min-width:760px;
border-collapse:collapse;
background:#fff;
}
.technical-table th,
.technical-table td{
padding:17px 19px;
border-bottom:1px solid #e1e6eb;
vertical-align:top;
text-align:left;
font-family:Arial,Helvetica,sans-serif;
font-size:14px;
line-height:1.65;
}
.technical-table thead th{
background:var(--navy);
color:#fff;
font-size:12px;
letter-spacing:.04em;
font-weight:bold;
}
.technical-table tbody th{
width:22%;
color:var(--navy);
font-weight:bold;
background:#f7f9fb;
}
.technical-table tbody td{
color:#545454;
}
.technical-table tbody tr:last-child th,
.technical-table tbody tr:last-child td{
border-bottom:0;
}
.technical-note{
margin-top:18px;
padding:12px 0 12px 16px;
border-left:2px solid var(--gold);
color:var(--navy);
font-size:14px;
line-height:1.65;
}
/* APPLICATIONS */
.applications-section{
background:#f5f8fa;
border-top:1px solid #e1e7ed;
}
.applications-heading{
margin-bottom:22px;
}
.application-grid{
display:grid;
grid-template-columns:repeat(9,minmax(0,1fr));
gap:16px;
}
.application-card{
min-width:0;
min-height:194px;
padding:24px 12px 20px;
background:#fff;
border:1px solid #d3dce5;
border-top:1px solid #d3dce5;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
transition:border-color .2s,box-shadow .2s,transform .2s;
}
.application-icon{
width:48px;
height:48px;
flex:0 0 48px;
display:grid;
place-items:center;
border:1.5px solid var(--gold);
border-radius:50%;
color:var(--navy);
font-size:21px;
margin-bottom:20px;
}
.application-card h3{
margin:0;
color:var(--navy);
font-family:Arial,Helvetica,sans-serif;
font-size:15px;
font-weight:bold;
line-height:1.35;
}
.application-card:hover,
.application-card:focus-within{
border-color:var(--gold);
box-shadow:0 10px 22px rgba(13,31,61,.09);
transform:translateY(-3px);
}
.application-card:hover .application-icon,
.application-card:focus-within .application-icon{
background:var(--gold);
}
/* QUOTE */
.product-quote-section{
background:#fff;
}
.product-quote{
display:grid;
grid-template-columns:1fr auto;
gap:50px;
align-items:center;
}
.product-quote p{
max-width:760px;
margin:0;
color:#5c6674;
font-size:15.5px;
line-height:1.7;
}
.product-quote .btn{
display:inline-block;
padding:14px 21px;
border:1px solid var(--gold);
border-radius:3px;
background:var(--gold);
color:var(--navy);
font-size:11px;
font-weight:bold;
text-transform:uppercase;
transition:background .2s,color .2s,transform .2s;
}
.product-quote .btn:hover,
.product-quote .btn:focus-visible{
background:var(--navy);
color:#fff;
transform:translateY(-2px);
}
/* RESPONSIVE */
@media (max-width:1100px){
.product-grid{
grid-template-columns:repeat(3,minmax(0,1fr));
}
.application-grid{
grid-template-columns:repeat(3,minmax(0,1fr));
}
.application-card{
min-height:175px;
padding:22px 12px;
}
.intro-grid{
gap:35px;
}
}
@media (max-width:790px){
.product-hero{
min-height:455px;
}
.product-hero-media img{
object-position:58% center;
}
.product-hero-scrim{
background:linear-gradient(90deg,rgba(13,31,61,.94) 0%,rgba(13,31,61,.76) 58%,rgba(13,31,61,.40) 100%);
}
.product-hero-inner{
padding:40px 6% 45px;
}
.product-hero h1{
font-size:clamp(36px,8.8vw,48px);
line-height:1.05;
}
.product-hero p{
font-size:15px;
max-width:620px;
}
.product-page .section{
padding:46px 5%;
}
.intro-grid{
grid-template-columns:1fr;
gap:18px;
}
.product-heading{
margin-bottom:27px;
}
.product-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}
.product-card{
min-height:220px;
padding:21px 17px;
}
.product-card h3{
font-size:19px;
}
.product-card p{
font-size:14px;
}
.application-grid{
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
}
.application-card{
min-height:165px;
}
.product-quote{
grid-template-columns:1fr;
gap:24px;
}
.product-quote .btn{
width:100%;
text-align:center;
}
}
@media (max-width:520px){
.product-hero{
min-height:455px;
}
.product-hero-inner{
padding:32px 6% 35px;
}
.product-hero .eyebrow{
font-size:11px;
}
.product-hero h1{
font-size:35px;
}
.product-hero p{
font-size:14px;
line-height:1.6;
}
.product-page .section{
padding:42px 5%;
}
.product-page h2{
font-size:27px;
}
.intro-copy p,
.product-heading p,
.product-quote p{
font-size:15px;
}
.product-grid{
grid-template-columns:1fr;
}
.product-card{
min-height:0;
}
.application-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}
.application-card{
min-height:150px;
padding:20px 10px;
}
.application-icon{
width:44px;
height:44px;
flex-basis:44px;
margin-bottom:15px;
}
.application-card h3{
font-size:14px;
}
}
@media (hover:none),(pointer:coarse){
.product-card:hover,
.application-card:hover,
.product-hero .btn:hover,
.product-quote .btn:hover{
transform:none;
}
}
@media (prefers-reduced-motion:reduce){
.product-hero-media img{
animation:none;
}
.product-card,
.application-card,
.product-hero .btn,
.product-quote .btn{
transition:none;
}
}
/* ==========================================================
NEMREX PRODUCT PAGE V2 — MOBILE TECHNICAL TABLE
Desktop/tablet layout remains unchanged.
On mobile, each row becomes a readable stacked block:
PARAMETER
Detail
This removes horizontal swiping completely.
========================================================== */
@media (max-width: 790px){
/* Never allow the technical table to force page-wide horizontal scrolling. */
.technical-table-wrap,
.tech-table-wrap,
.technical-table,
.tech-table{
max-width:100%;
width:100%;
overflow:visible!important;
}
/* Support common table class names used in the generated product page. */
.technical-table,
.tech-table{
display:block!important;
border:0!important;
}
.technical-table thead,
.tech-table thead{
display:none!important;
}
.technical-table tbody,
.tech-table tbody{
display:block!important;
width:100%!important;
}
.technical-table tr,
.tech-table tr{
display:grid!important;
grid-template-columns:1fr!important;
width:100%!important;
margin:0 0 10px!important;
padding:0!important;
border:1px solid #d9dee6!important;
background:#fff!important;
box-sizing:border-box!important;
}
.technical-table td,
.tech-table td{
display:block!important;
width:100%!important;
min-width:0!important;
box-sizing:border-box!important;
white-space:normal!important;
overflow-wrap:anywhere!important;
word-break:normal!important;
padding:12px 15px!important;
border:0!important;
font-size:14px!important;
line-height:1.6!important;
}
/* First cell = parameter label */
.technical-table td:first-child,
.tech-table td:first-child{
padding:10px 15px!important;
background:#f5f7fa!important;
color:#0D1F3D!important;
border-bottom:1px solid #e2e6eb!important;
font-family:"Canva Sans","Open Sans",Arial,sans-serif!important;
font-size:13px!important;
line-height:1.4!important;
font-weight:800!important;
text-transform:uppercase;
letter-spacing:.03em;
}
/* Second cell = actual specification/details */
.technical-table td:nth-child(2),
.tech-table td:nth-child(2){
min-height:52px;
display:flex!important;
align-items:center!important;
color:#545454!important;
font-family:"Canva Sans","Open Sans",Arial,sans-serif!important;
font-size:14.5px!important;
line-height:1.65!important;
font-weight:400!important;
}
}
@media (max-width:430px){
.technical-table tr,
.tech-table tr{
margin-bottom:9px!important;
}
.technical-table td,
.tech-table td{
padding:11px 13px!important;
font-size:13.5px!important;
line-height:1.6!important;
}
.technical-table td:first-child,
.tech-table td:first-child{
padding:9px 13px!important;
font-size:12px!important;
}
.technical-table td:nth-child(2),
.tech-table td:nth-child(2){
min-height:50px;
font-size:13.5px!important;
}
}
@media (max-width:790px){
html, body{
max-width:100%;
overflow-x:hidden!important;
}
}
/* ==========================================================
NEMREX PRODUCT HERO CTA — FINAL TYPOGRAPHY MATCH
Matches the reference CTA styling:
Canva Sans / Open Sans, 14px, bold, 15px 24px padding.
Both buttons use the same visual text scale.
========================================================== */
.product-hero .hero-actions{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:0;
margin-top:7px;
}
.product-hero .hero-actions .btn{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
min-height:54px!important;
box-sizing:border-box!important;
padding:15px 24px!important;
margin:8px 8px 0 0!important;
font-family:"Canva Sans","Open Sans",Arial,Helvetica,sans-serif!important;
font-size:14px!important;
line-height:1.25!important;
font-weight:700!important;
letter-spacing:0!important;
text-transform:uppercase!important;
white-space:nowrap!important;
border-radius:3px!important;
}
.product-hero .hero-actions .btn.outline{
color:#fff!important;
background:transparent!important;
border:1px solid #fff!important;
}
.product-hero .hero-actions .btn.outline:hover,
.product-hero .hero-actions .btn.outline:focus-visible{
color:#0D1F3D!important;
background:#E5A910!important;
border-color:#E5A910!important;
}
/* Keep the gold CTA identical in text scale and height. */
.product-hero .hero-actions .btn:not(.outline){
color:#0D1F3D!important;
background:#E5A910!important;
border:1px solid #E5A910!important;
}
/* Mobile: same 14px typography, but allow buttons to fit cleanly. */
@media (max-width:790px){
.product-hero .hero-actions{
width:100%;
gap:9px;
}
.product-hero .hero-actions .btn{
min-height:52px!important;
padding:14px 18px!important;
margin:0!important;
font-size:14px!important;
}
}
@media (max-width:430px){
.product-hero .hero-actions{
display:grid!important;
grid-template-columns:1fr!important;
width:100%!important;
}
.product-hero .hero-actions .btn{
width:100%!important;
min-height:50px!important;
padding:13px 16px!important;
}
}
/* ==========================================================
NEMREX HERO CTA — TOUCH / TAP STATE
On touch devices, tapping the outline CTA should visibly
switch to the same gold treatment as its active/hover state.
========================================================== */
@media (hover: none), (pointer: coarse) {
.product-hero .hero-actions .btn.outline:active,
.product-hero .hero-actions .btn.outline:focus,
.product-hero .hero-actions .btn.outline:focus-visible,
.product-hero .hero-actions .btn.outline.is-touched {
background:#E5A910!important;
border-color:#E5A910!important;
color:#0D1F3D!important;
box-shadow:0 6px 16px rgba(13,31,61,.18)!important;
}
.product-hero .hero-actions .btn.outline:active span,
.product-hero .hero-actions .btn.outline:focus span,
.product-hero .hero-actions .btn.outline:focus-visible span,
.product-hero .hero-actions .btn.outline.is-touched span {
color:#0D1F3D!important;
}
}
/* Desktop mouse hover remains the same. */
.product-hero .hero-actions .btn.outline:hover {
background:#E5A910!important;
border-color:#E5A910!important;
color:#0D1F3D!important;
}
/* Clear the temporary touch class after navigation begins. */
/* =========================================================
NEMREX — FINAL HERO CTA STATES
Gold CTA -> Navy + Gold outline when hovered/touched
Outline CTA -> Gold + Navy text when hovered/touched
Works for mouse, touch and keyboard focus.
========================================================= */
.product-hero .hero-actions .btn:not(.outline){
background:#E5A910 !important;
border:1px solid #E5A910 !important;
color:#0D1F3D !important;
}
/* Mouse / trackpad */
@media (hover:hover) and (pointer:fine){
.product-hero .hero-actions .btn:not(.outline):hover,
.product-hero .hero-actions .btn:not(.outline):focus-visible{
background:#0D1F3D !important;
border-color:#E5A910 !important;
color:#FFFFFF !important;
transform:translateY(-2px);
box-shadow:0 6px 16px rgba(13,31,61,.18) !important;
}
.product-hero .hero-actions .btn.outline:hover,
.product-hero .hero-actions .btn.outline:focus-visible{
background:#E5A910 !important;
border-color:#E5A910 !important;
color:#0D1F3D !important;
transform:translateY(-2px);
box-shadow:0 6px 16px rgba(13,31,61,.18) !important;
}
}
/* Touch / pen devices: use a temporary class so the visual state
remains visible long enough to be noticed before navigation. */
@media (hover:none), (pointer:coarse){
.product-hero .hero-actions .btn:not(.outline).is-touched,
.product-hero .hero-actions .btn:not(.outline):active,
.product-hero .hero-actions .btn:not(.outline):focus,
.product-hero .hero-actions .btn:not(.outline):focus-visible{
background:#0D1F3D !important;
border-color:#E5A910 !important;
color:#FFFFFF !important;
box-shadow:0 6px 16px rgba(13,31,61,.18) !important;
}
.product-hero .hero-actions .btn.outline.is-touched,
.product-hero .hero-actions .btn.outline:active,
.product-hero .hero-actions .btn.outline:focus,
.product-hero .hero-actions .btn.outline:focus-visible{
background:#E5A910 !important;
border-color:#E5A910 !important;
color:#0D1F3D !important;
box-shadow:0 6px 16px rgba(13,31,61,.18) !important;
}
.product-hero .hero-actions .btn.is-touched{
transform:translateY(1px);
}
}
.product-hero .hero-actions .btn span{
color:inherit !important;
transition:transform .2s ease;
}
.product-hero .hero-actions .btn:hover span,
.product-hero .hero-actions .btn:focus-visible span,
.product-hero .hero-actions .btn.is-touched span{
transform:translateX(4px);
}
/* =========================================================
NEMREX PRODUCT PAGE — CONTENT FLOW / UI-UX UPDATE
Hero remains unchanged. The introduction now follows the
hero as a clean full-width editorial content section rather
than a split left/right layout.
========================================================= */
.product-intro{
background:#fff;
}
.product-intro .intro-content{
max-width:100%;
}
.product-intro .intro-content > .eyebrow{
margin-bottom:9px;
}
.product-intro .intro-content h2{
max-width:920px;
margin:0 0 24px;
}
.product-intro .intro-copy{
max-width:1180px;
}
.product-intro .intro-copy p{
margin:0 0 17px;
color:#5c6674;
font-size:15.5px;
line-height:1.78;
}
.product-intro .intro-copy p:last-child{
margin-bottom:0;
}
/* Give the following product-range section a clear visual break. */
.product-range-section{
padding-top:68px;
padding-bottom:70px;
}
.product-range-section .product-heading{
margin-bottom:32px;
}
/* Keep technical information visually separate from the product cards. */
.technical-product-section{
padding-top:68px;
padding-bottom:68px;
}
@media (max-width:790px){
.product-intro .intro-content h2{
max-width:none;
margin-bottom:18px;
}
.product-intro .intro-copy{
max-width:none;
}
.product-intro .intro-copy p{
font-size:15px;
line-height:1.7;
margin-bottom:15px;
}
.product-range-section,
.technical-product-section{
padding-top:48px;
padding-bottom:48px;
}
}
/* =========================================================
NEMREX PRODUCT PAGE — BALANCED HORIZONTAL RHYTHM
Keeps the hero and all following sections on the same
comfortable 5% left/right content line.
========================================================= */
.product-page .product-container,
.product-page .product-hero-inner {
width: 100%;
max-width: none;
margin-left: 0;
margin-right: 0;
box-sizing: border-box;
}
.product-page .product-hero-inner {
padding-left: 5%;
padding-right: 5%;
}
.product-page .section {
padding-left: 5%;
padding-right: 5%;
}
@media (max-width: 790px) {
.product-page .section,
.product-page .product-hero-inner {
padding-left: 5%;
padding-right: 5%;
}
}
/* Prevent nested content blocks from introducing a second
horizontal width/margin system. */
.product-page .product-heading,
.product-page .intro-grid,
.product-page .product-grid,
.product-page .technical-wrap,
.product-page .application-grid,
.product-page .product-quote {
box-sizing: border-box;
}
/* =========================================================
NEMREX PRODUCT PAGE — INTRODUCTION WIDTH REFINEMENT
Uses the same page gutter as the other sections while
allowing the editorial paragraphs to breathe naturally.
========================================================= */
.product-page .product-intro .intro-copy {
width: 100%;
max-width: none;
margin: 0;
}
.product-page .product-intro .intro-copy p {
max-width: none;
margin-left: 0;
margin-right: 0;
}
.product-page .product-intro .intro-content h2 {
max-width: 1000px;
}
/* Keep the introduction readable on very wide screens:
slightly narrower line length, but centered within the
same page alignment rather than creating a right-side gap. */
@media (min-width: 1500px) {
.product-page .product-intro .intro-copy {
max-width: 1450px;
}
}
@media (max-width: 790px) {
.product-page .product-intro .intro-copy {
width: 100%;
max-width: none;
}
.product-page .product-intro .intro-content h2 {
max-width: none;
}
}
/* =========================================================
NEMREX PRODUCT PAGE — MOBILE TECHNICAL TABLE FINAL FIX
The first cell in the source table is a | , not a | .
On mobile, each parameter and its value are therefore
deliberately stacked vertically so no content is clipped.
========================================================= */
@media (max-width: 790px) {
.product-page .technical-table-wrap {
width: 100%;
max-width: 100%;
overflow: visible !important;
box-sizing: border-box;
}
.product-page .technical-table {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
display: block !important;
border: 0 !important;
table-layout: fixed !important;
}
.product-page .technical-table thead {
display: none !important;
}
.product-page .technical-table tbody {
display: block !important;
width: 100% !important;
}
.product-page .technical-table tr {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 10px !important;
padding: 0 !important;
border: 1px solid #d9dee6 !important;
background: #fff !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
/* Parameter label — the actual markup uses TH */
.product-page .technical-table tbody th {
display: block !important;
width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
padding: 11px 14px !important;
margin: 0 !important;
background: #f5f7fa !important;
color: #0D1F3D !important;
border: 0 !important;
border-bottom: 1px solid #e2e6eb !important;
font-family: "Canva Sans","Open Sans",Arial,sans-serif !important;
font-size: 12px !important;
line-height: 1.4 !important;
font-weight: 800 !important;
text-transform: uppercase;
letter-spacing: .03em;
text-align: left !important;
}
/* Specification/value */
.product-page .technical-table tbody td {
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
padding: 12px 14px !important;
margin: 0 !important;
background: #fff !important;
color: #545454 !important;
border: 0 !important;
font-family: "Canva Sans","Open Sans",Arial,sans-serif !important;
font-size: 13.5px !important;
line-height: 1.65 !important;
font-weight: 400 !important;
text-align: left !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
word-break: break-word !important;
hyphens: auto;
}
}
@media (max-width: 430px) {
.product-page .technical-table tr {
margin-bottom: 9px !important;
}
.product-page .technical-table tbody th {
padding: 9px 13px !important;
font-size: 12px !important;
}
.product-page .technical-table tbody td {
padding: 11px 13px !important;
font-size: 13.5px !important;
line-height: 1.6 !important;
}
}
html,body{max-width:100%!important;overflow-x:hidden!important}body{margin:0!important}body>header,body>footer,body .quick-actions,body #backTop,body .back-top,body #mobileNavOverlay{display:none!important}body>main,body>section{max-width:100%}img,video,iframe{max-width:100%}
html,body{max-width:100%!important;overflow-x:hidden!important;overflow-anchor:none!important;scroll-behavior:auto!important}body{height:auto!important;min-height:0!important}img,video,iframe{max-width:100%} .carousel-section,.gallery-section,.gallery,.carousel{max-height:none}
.hero-actions{display:flex!important;visibility:visible!important;opacity:1!important;align-items:center!important;flex-wrap:wrap!important;gap:12px!important}.hero-actions>.btn{display:inline-flex!important;visibility:visible!important;opacity:1!important}
.product-hero{height:470px!important;min-height:470px!important;max-height:470px!important}
@media(max-width:1100px){.product-hero{height:410px!important;min-height:410px!important;max-height:410px!important}}
@media(max-width:520px){.product-hero{height:400px!important;min-height:400px!important;max-height:400px!important}}
/* Home gets the larger hero; all secondary-page heroes share a consistent baseline. */
body.home-page:not(.about-page):not(.industries-page):not(.technical-page-body) .hero,
body.home-page:not(.about-page):not(.industries-page):not(.technical-page-body) .home-hero {
min-height: 520px !important;
}
body.about-page .about-hero,
body.about-page .hero,
body.contact-page .contact-hero,
body.product-category-page .product-hero,
body.industries-page .industries-hero,
body.industries-page .industry-hero,
body.industries-page .hero,
body.technical-page-body .technical-hero,
body.technical-page-body .hero,
body.materials-page .materials-hero,
body.material-page .material-hero,
body.material-page .materials-hero,
body.home-page.about-page .materials-hero {
min-height: 390px !important;
height: auto !important;
}
@media (max-width: 790px) {
body.home-page:not(.about-page):not(.industries-page):not(.technical-page-body) .hero,
body.home-page:not(.about-page):not(.industries-page):not(.technical-page-body) .home-hero {
min-height: 455px !important;
}
body.about-page .about-hero,
body.about-page .hero,
body.contact-page .contact-hero,
body.product-category-page .product-hero,
body.industries-page .industries-hero,
body.industries-page .industry-hero,
body.industries-page .hero,
body.technical-page-body .technical-hero,
body.technical-page-body .hero,
body.materials-page .materials-hero,
body.material-page .material-hero,
body.material-page .materials-hero,
body.home-page.about-page .materials-hero {
min-height: 340px !important;
height: auto !important;
}
}
|