table {
  min-width: 1000px;
  width: 1500px; /* Set the table width */
  max-width: 1700px;
  border-collapse: collapse;
  table-layout: fixed; /* Ensure equal column width */
  margin:0 auto;
}

.table {
overflow-x: hidden;
}

#table {
margin-bottom: 100px;
max-width: 90%;
}

th, td {
  border: 1px solid black;
  padding: 10px;
  text-align: left;
  word-wrap: break-word;
}

th {
  background-color: rgb(0,191,243,0.5);
  font-size:10px;
  text-align: center;
}

td {
font-size: 8px;
text-align: center;
}

.table-spec {
  font-weight: bold;
  background-color: rgb(224, 224, 224);
}

.table-spec2.highlight, .highlight {
background-color: rgb(255, 222, 160,0.5);
font-weight: bold;
}

.table-spec.highlight,.table-spec3.highlight, th.highlight {
background-color: blue;
color:white;
}

td:hover {
background-color: rgb(255, 194, 82) !important;
scale:1.5;
}

td.table-spec:hover {
  color:black;
  }

th:hover {
background-color: rgb(255, 194, 82) !important;
scale:1.5;
color:black;
}

.table-spec2{
background-color: rgba(223, 223, 223, 0.2);
}

.table-spec3{
background-color: rgb(255, 255, 255);
font-size:8px;
font-weight: bold;
align-items: center;
}

.table-spec4 {
text-align: center;
padding: 5px;
background-color: white;
color: black;
font-weight: bold;
border: 3px solid rgb(126, 226, 68);
border-radius: 15px;
flex-wrap: wrap; /* Allow columns to wrap to the next line on smaller screens */
}

.fa-check{
  color:rgb(0, 177, 0);
  font-size: 15px;
  font-weight: bold;
}

.fa-minus{
  color:rgb(189, 189, 189);
  font-size: 15px;
  font-weight: bold;
}

/* ===== GLOBAL ===== */
:root {
  --mat-blue: #007bff;
  --mat-dark: #0f172a;
  --mat-light: #f8fafc;
  --mat-text: #334155;
  --mat-radius: 12px;
}

:root {
  --svc-fg:#ffffff;
  --svc-muted:#ffffff;
  --svc-line:#e2e8f0;
  --svc-accent:#007bff;
  --svc-accent-weak:#e8f2ff;
  --svc-radius:14px;
  --svc-max:1100px;
  --mat-blue: #007bff;
}

.svc-container{width:92%;max-width:var(--svc-max);margin:0 auto}
.svc-stack-6 > *{margin-block:36px}

/* Hero */
.svc-hero{padding:56px 0 40px; background: linear-gradient(135deg, #0f172a, #1e293b)}
.svc-hero-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.svc-hero-copy{color:var(--svc-fg)}
.svc-eyebrow{
  display:inline-block;padding:6px 10px;border-radius:999px;
  background:var(--svc-accent-weak);color:var(--svc-accent);
  font-weight:600;font-size:12px;letter-spacing:.2px
}
.svc-h1{font-size:2.4rem;line-height:1.1;margin:16px 0}
.svc-lead{color:var(--svc-muted);max-width:48ch;margin:0}
.svc-cta-row{margin-top:16px}

.svc-pill{
  display: inline-block;
  padding: 10px 22px;
  background: var(--mat-blue);
  color: white;
  border-radius: 40px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}
.svc-cta{background:var(--svc-accent);border-color:var(--svc-accent);color:#fff}
.svc-cta:hover{filter:brightness(.95)}

.svc-hero-art{border:1px solid var(--svc-line);padding:8px}
.svc-hero-img {
  aspect-ratio: 6/4;
  display: grid;
  place-items: center;
  color: #6b7280;
}

/* Responsive */
@media (max-width: 980px){
  .svc-hero-wrap{grid-template-columns:1fr}
  .svc-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .svc-grid{grid-template-columns:1fr}
  .svc-band{flex-direction:column;align-items:flex-start}
}

.mat-container {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
}

/* ===== HERO ===== */
.mat-hero {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: white;
  padding: 80px 20px;
}

.mat-hero-text {
  flex: 1;
}

.mat-hero-img img {
  width: 100%;
  max-width: 450px;
  border-radius: var(--mat-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.mat-hero .mat-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  flex-wrap: wrap;
}

.mat-hero h1 {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 15px;
}

.mat-hero p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #e2e8f0;
  max-width: 500px;
  margin-bottom: 20px;
}

.mat-button {
  display: inline-block;
  padding: 10px 22px;
  background: var(--mat-blue);
  color: white;
  border-radius: 40px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}
.mat-button:hover {
  background: #005fcc;
}

.svc-hero-img-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.svc-overlay-box {
  position: absolute;
  font-family:Arial, Helvetica, sans-serif;
  font-weight: 300;
  right: 0;
  top: 32.5%;
  transform: translateY(-50%);
  background: rgba(0, 193, 243, 0.4); /* semi-transparent blue */
  color: white;
  padding: 0.5rem 0.5rem;
  padding-right:0.7rem;
  max-width: 300px;
  text-align: left;
  font-size: 1rem;
  line-height: 1.4;
}

@media (max-width: 980px) {
  .svc-overlay-box {
    font-size: 1.5rem;
    padding: 1rem 1.25rem;
    max-width: 90%;
  }
}

@media (max-width: 700px) {
  .svc-overlay-box {
    font-size: 1rem;
    padding: 1rem 1.25rem;
    max-width: 90%;
  }
}

/* ===== SECTIONS ===== */
.mat-section {
  background: #fff;
  padding: 80px 20px;
}
.mat-section.mat-light {
  background: var(--mat-light);
}

.mat-heading {
  text-align: center;
  margin-bottom: 50px;
}
.mat-heading h2 {
  color: var(--mat-dark);
  font-size: 1.8rem;
  margin-bottom: 10px;
}
.mat-heading p {
  color: var(--mat-text);
  max-width: 700px;
  margin: 0 auto;
}

/* ===== GRID ===== */
.mat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.mat-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: var(--mat-radius);
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
}
.mat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

.mat-card img {
  width: 100%;
  max-width: 220px;
  height: auto;
  margin-bottom: 15px;
}
.mat-card h3 {
  color: var(--mat-blue);
  font-size: 1.2rem;
  margin-bottom: 15px;
}
.mat-card p {
  color: var(--mat-text);
  font-size: 0.8rem;
  line-height: 1.6;
  text-align: justify;
}

.mat-card-longname {
  display: block;
  font-size: 0.85rem;
  font-weight: 400;
  color: #334155;
}


/* ===== PRINTING PARAMETERS ===== */
.mat-params {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}
.mat-param-item {
  text-align: center;
}
.mat-param-item img {
  width: 100%;
  max-height:300px;
  margin-bottom: 15px;
  border-radius: var(--mat-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.mat-param-item h3 {
  color: var(--mat-blue);
  font-size: 1.1rem;
  margin-bottom: 8px;
}
.mat-param-item p {
  color: var(--mat-text);
  line-height: 1.5;
  font-size: 0.8rem;
  text-align: justify;
}

/* ===== CTA ===== */
.mat-cta {
  background: linear-gradient(135deg, var(--mat-blue), #005fcc);
  color: white;
  text-align: center;
  padding: 70px 20px;
}
.mat-cta h2 {
  font-size: 1.8rem;
  margin-bottom: 10px;
}
.mat-cta p {
  font-size: 1.05rem;
  margin-bottom: 25px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .table {
    overflow-x: scroll;
    padding-left:20px;
    padding-right:20px;
    }

  .mat-hero .mat-container {
    flex-direction: column;
    text-align: center;
  }
  .mat-hero-img img {
    max-width: 100%;
  }
  .mat-hero h1 {
    font-size: 2rem;
  }
  .mat-section {
    padding: 60px 15px;
  }
}

@media (max-width: 600px) {
  .mat-hero h1 {
    font-size: 1.6rem;
  }
  .mat-card h3 {
    font-size: 1.05rem;
  }
  .mat-cta h2 {
    font-size: 1.4rem;
  }
}