@charset "utf-8";
/* CSS Document */
:root{	--bg:#00008b;
/*--bg:#05080d;--bg:#00008b;--panel: #00008b;--orange:#ff8c2f;--line:#26384d;*/--line:#26384d;--panel:#0f1724;
--text:#eef5ff;--muted:#b6c4d6;
--orange:#ff7a00;--green:#56d364;--yellow:#ffd166;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;background:var(--bg);color:var(--text);
font-family:Arial,Helvetica,sans-serif;line-height:1.5;
}
a{text-decoration:none;color:inherit}

.nav{
position:sticky;top:0;z-index:50;
background:rgba(5,8,13,.94);
border-bottom:1px solid var(--line);
backdrop-filter:blur(10px);
padding:14px 6%;
display:flex;align-items:center;justify-content:space-between;
}

.logo{
font-size:24px;font-weight:950;letter-spacing:-.6px;
}
.logo span{color:var(--orange)}

/* =========================================================
   HEADER
   ========================================================= */
header.top-header {
  background-color: #ffffff;
  color: #2c2e31;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  gap: 12px;
  max-width: 100%;
	
}

.header-left,
.header-middle,
.header-right { min-width: 0; }

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-link {
  display: inline-flex;
  align-items: center;
}

.logo-img {
 /* width: auto;
  object-fit: contain;
  max-width: 100%;
  max-height: 85px;
  height: clamp(52px, 7vw, 85px);centers the logo*/
	max-width: 100% !important;
        height: auto !important;
        width: 500px !important;
        display: block;
        margin: 0 auto;   
}

.header-left2 {
	font-weight: bold;
  color: #0056A6;
  font-size: clamp(1rem, 2.2vw, 2rem);
  white-space: normal;     /* allow wrap to avoid overflow */
  text-align: center;
  line-height: 1.15;
}

.header-middle {
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 240px;
}

.search-form {
  display: flex;
  max-width: 460px;
  width: 100%;
  border: 2px solid #0056A6;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.search-input {
  flex: 1;
  padding: 10px 12px;
  border: none;
  outline: none;
  min-width: 0;
}

.search-button {
  padding: 10px 16px;
  background-color: #0056A6;
  color: #fff;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.header-right {
  display: flex;
  gap: 8px;
  align-items: center;
  white-space: normal;
  flex-wrap: wrap;         /* keep login/cart, never hide */
  justify-content: flex-end;
}

/* Second row container */
.second-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;        /* <-- makes it responsive */
    gap: 10px;              /* spacing when wrapped */
    margin-top: 10px;
}

/* Make the right image responsive */
.header-right img {
    max-width: 100%;
    height: auto;
}

.header-link {
  color: #0056A6;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  line-height: 1.1;
}

.bbutton{
    background-color: #00aeef;
    color: #fff;
    padding: 10px 20px;
    border-radius: 6px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    font-size: 1rem;
}
.bbutton:hover {
	background-color: #0076a3;
}

/* make sure icons never disappear due to layout */
.header-link i,
.header-link .fa {
  display: inline-block;
  line-height: 1;
  font-size: 1.05em;
}

.navlinks a{
margin-left:22px;
color:#cbd6e6;
font-weight:800;
font-size:14px;
}

.hero{
min-height:80vh;
/*background:
linear-gradient(90deg,rgba(5,8,13,.96),rgba(5,8,13,.62),rgba(5,8,13,.96)),
url('../press-automation/m1200-die-protection/assets/can-machine.png') center/cover no-repeat;*/
display:flex;align-items:center;
padding:30px 6%;
position:relative;
}

.hero-inner{
position:relative;z-index:2;
max-width:950px;
	
}

.hero-inner img{
/*position:relative;z-index:2;
max-width:950px;*/
	width:100%;
display:block;
}

.eyebrow{
color:var(--orange);
font-weight:950;
text-transform:uppercase;
letter-spacing:3px;
font-size:17px;
margin-bottom:18px;
}

h1{
font-size:58px;
line-height:.96;
letter-spacing:-3.5px;
margin:0 0 24px;
font-weight:950;
}
h2{
font-size:38px;
line-height:.96;
letter-spacing:-3.5px;
margin:0 0 24px;
font-weight:950;
}

.hero p{
font-size:25px;
color:#d6e2f0;
max-width:860px;
margin:0 0 34px;
}

.btns{
display:flex;
gap:16px;
flex-wrap:wrap;
}

.btn{
display:inline-block;
padding:15px 24px;
border-radius:12px;
font-weight:950;
	font-size: 20px;
	box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
}

.primary{background:var(--orange);color:#000; border-left: 8px solid #fff;}
.secondary{border:2px solid #6f839d; color:#000;border-left: 8px solid #ff7a00; background-color: #fff;}

.metric-strip{
display:grid;
grid-template-columns:repeat(4,1fr);
/*background:#0c1420;*/
	background: #05080d;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
}

.metric{
padding:26px 18px;
text-align:center;
border-right:1px solid var(--line);
color:#cbd6e6;
font-weight:800;
}

.metric strong{
display:block;
font-size:44px;
line-height:1;
color:var(--orange);
font-weight:950;
}

.section{padding:86px 6%}
.alt{background:#0c1420}

.container{
max-width:1280px;
margin:auto;
}

.section-title{
max-width:980px;
margin-bottom:42px;
}

.section-title h2{
font-size:52px;
line-height:1.03;
margin:0 0 18px;
letter-spacing:-2px;
}

.section-title p{
font-size:22px;
color:var(--muted);
margin:0;
}

.grid2{
display:grid;
grid-template-columns:1.05fr .95fr;
gap:42px;
align-items:center;
}

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

.card{
background:var(--panel);
border:1px solid var(--line);
border-radius:14px;
padding:30px;
box-shadow:0 22px 60px rgba(0,0,0,.28);
}

.card h3{
font-size:29px;
margin:0 0 12px;
}

.card p,.card li{
color:#c3cfdf;
font-size:18px;
}

.card ul{padding-left:20px}

.diagram{

overflow:hidden;
/*border:1px solid var(--line);border-radius:16px;
box-shadow:0 28px 80px rgba(0,0,0,.35);
background:#09111c;*/
}

.diagram img{
width:100%;
display: block;
}

.kicker{
color:var(--orange);
text-transform:uppercase;
letter-spacing:2px;
font-size:13px;
font-weight:950;
}

.big{
font-size:78px;
font-weight:950;
line-height:1;
color:#ff8c2f;
margin:10px 0;
}

.callout{
border-left:6px solid var(--orange);
padding:22px 26px;
background:#101b2a;
border-radius:10px;
margin:18px 0;
}

.callout h3{
margin:0 0 8px;
font-size:30px;
}

.callout p{
color:#c9d4e3;
font-size:19px;
margin:0;
}

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

.step{
background:#101a28;
border:1px solid var(--line);
border-radius:12px;
padding:22px;
}

.step span{
display:inline-flex;
width:34px;height:34px;
border-radius:50%;
background:var(--orange);
align-items:center;
justify-content:center;
font-weight:950;
margin-bottom:16px;
}

.step h4{
margin:0 0 8px;
font-size:21px;
}

.step p{
color:#bdc8d7;
margin:0;
}

.comparison{
width:100%;
border-collapse:collapse;
background:#0d1724;
border:1px solid var(--line);
border-radius:12px;
overflow:hidden;
}

.comparison th,.comparison td{
padding:18px;
border-bottom:1px solid var(--line);
text-align:left;
vertical-align:top;
font-size:17px;
}

.comparison th{
background:#152235;
color:#fff;
font-size:18px;
}

.comparison td{
color:#cbd6e6;
}

.comparison td:nth-child(1){
color:#ffb15f;
font-weight:950;
width:28%;
}

.product-card,.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:30px;box-shadow:0 22px 60px rgba(0,0,0,.28)}
.product-card{min-height:330px;display:flex;flex-direction:column;justify-content:space-between}
.product-card h3{font-size:34px;margin:0 0 10px}.product-card p,.card p,.card li{color:#c3cfdf;font-size:18px}
.tag{color:var(--orange);font-weight:950;text-transform:uppercase;letter-spacing:2px;font-size:13px}
.product-link{margin-top:16px;color:#fff;background:#17283c;border:1px solid #3a506b;padding:12px 14px;border-radius:5px;font-weight:900;display:inline-block}

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

.good{
border:2px solid var(--orange);
box-shadow:0 0 0 1px rgba(255,140,47,.2),
0 30px 80px rgba(255,140,47,.08);
}

.form{
background:#101a28;
border:1px solid var(--line);
border-radius:14px;
padding:30px;
}

.form input,.form select,.form textarea{
width:100%;
padding:14px;
margin:8px 0;
background:#07101a;
border:1px solid #34485f;
color:white;
border-radius:5px;
font-size:16px;
}

.form textarea{height:115px}

.footer{
padding:46px 6%;
background:#030509;
border-top:1px solid var(--line);
color:#92a2b7;
}

@media(max-width:960px){
h1{font-size:48px}
.hero p{font-size:20px}
.metric-strip,.grid2,.grid3,.workflow,.split{
grid-template-columns:1fr;
}
.section-title h2{font-size:36px}
.big{font-size:52px}
.nav{display:block}
.navlinks a{
display:inline-block;
margin:10px 14px 0 0;
}
	
	header.topheader {flex-direction: column;}
}

  .gallery-wrap { position: relative; width: 100%; max-height: 800px; margin: 0 auto; }
  /*.diagram { position: relative; display: block; align-items: center; justify-content: center; min-height: 400px; overflow: hidden; border-radius: 12px; }*/
  .slide {height: 80vh; display: none; width: 100%; justify-content: center; }
  .slide.active { display: flex; }
  .slide img { width: 100%; max-height: 800px; height: 100%; object-fit: contain; border-radius: 8px; position: relative; z-index: 1; }
  /*.callout { position: absolute; background: #fff; border: 0.5px solid #ccc; border-radius: 8px; font-size: 13px; font-weight: 500; padding: 6px 12px; z-index: 2; max-width: 200px; line-height: 1.4; }*/
  .callout.one { top: 18px; left: 18px; }
  .callout.two { bottom: 60px; right: 18px; }
  .arrow-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; background: #ff7a00; border-radius: 30%; width: 40px; height: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer;opacity: 80%; }
  .arrow-btn.left { left: 5px; }
  .arrow-btn.right { right: 5px; }
  .dot-row { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
  .dot-btn { border: 0.5px solid #ccc; border-radius: 20px; padding: 4px 12px; font-size: 12px; background: #fff; cursor: pointer; }
  .dot-btn.active { background: #111; color: #fff; border-color: #111; }