html, body {
    height: 100%;
}
html, body {
  overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Arial, sans-serif;
    background-color: #edf5fa;
    color: #232d38;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Decorative SVG symbols background */
    background-image: url('data:image/svg+xml;utf8,<svg width="350" height="350" xmlns="http://www.w3.org/2000/svg"><text x="10" y="40" font-size="15" fill="#3fa3ef">O₂</text><text x="60" y="90" font-size="16" fill="#ea5cad">N₂</text><text x="110" y="70" font-size="15" fill="#00c898">Ar</text><text x="210" y="50" font-size="17" fill="#ffcc53">He</text><text x="320" y="60" font-size="16" fill="#ff6f61">DA</text><text x="235" y="160" font-size="16" fill="#00b7c9">H₂</text><text x="170" y="220" font-size="15" fill="#2ee59d">NH₃</text><text x="140" y="95" font-size="14" fill="#a4befe">N₂O</text><text x="250" y="80" font-size="14" fill="#ffe148">ZA</text><text x="280" y="310" font-size="17" fill="#7ad0fa">🏭</text></svg>');
    background-repeat: repeat;
}


.background-shape {
    position: fixed;
    z-index: 0;
    pointer-events: none;
    opacity: 0.2;
    width: 220px;
    height: 220px;
    background-repeat: no-repeat;
    background-size: contain;
}

/* HEADER */
header,
.header-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 8px 24px;
    background: #fff;
    box-shadow: 0 2px 14px rgba(31,41,55,0.10);
    border-radius: 0 0 16px 16px;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.company-brand img {
    height: 90px;
    width: auto;
    margin-right: 7px;
    max-height: 80px;
}
.company-brand {
    display: flex;
    align-items: center;
    gap: 18px;
}
.company-title {
    font-size: 2.1rem;
    font-weight: 700;
    color: #287b8c;
    letter-spacing: .04em;
}
nav .main-menu {
    display: flex;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}
nav .main-menu li a {
    color: #232d38;
    font-weight: 500;
    font-size: 1.1rem;
    text-decoration: none;
    padding: 6px 18px;
    border-radius: 20px;
    transition: background 0.18s, color 0.18s;
    background: transparent;
}
nav .main-menu li a.active,
nav .main-menu li a:hover {
    color: #287b8c;
    background: #eaf5fa;
}

/* MAIN (gap is handled by flex, leave blank for adding content later) */
main {
    flex: 1 1 auto;
    min-height: 60px; /* Ensures blank area for future product designs */
}

/* FOOTER */
.footer-unique {
    background: #141d23;
    color: #fff;
    padding-top: 38px;
    margin-top: 42px;
    font-family: 'Segoe UI', Arial, sans-serif;
    position: relative;
}

.footer-grid {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 100px;
    max-width: 1200px;
    margin: auto;
    padding: 0 4vw 8px 4vw;
    flex-wrap: wrap;
}
.footer-contact-block,
.footer-links-block,
.footer-social-block {
    min-width: 210px;
}
.footer-logo-block {
    margin-top: 44px;
    text-align: center;
}
.footer-logo-block .footer-logo {
    width: 102px;
    height: auto;
    margin-bottom: 6px;
}
.footer-tagline {
    font-size: 0.98rem;
    color: #b2dffb;
    margin-top: 7px;
    font-weight: 400;
}
.footer-contact-block h4,
.footer-links-block h4,
.footer-social-block h4 {
    color: #3fe8c9;
    margin-bottom: 9px;
    font-weight: 600;
    font-size: 1.09rem;
}
.footer-contact-block p {
    margin: 6px 0;
    font-size: 0.98rem;
}
.footer-links-block ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-links-block li { margin-bottom: 8px; }
.footer-links-block a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.19s;
}
.footer-links-block a:hover { color: #3fe8c9; text-decoration: underline; }
.footer-contact-block i { color: #3fe8c9; margin-right: 7px; }
.footer-divider {
    border-top: 1.5px dashed #333d;
    margin: 32px auto 7px auto;
    max-width: 1100px;
}

/* Footer bottom: Center social media icons and copyright text in one row */
.footer-bottom {
    width: 100%;
    padding-bottom: 18px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.footer-bottom-icons {
    margin-bottom: 2px;
}
.footer-bottom-icons a {
    color: #fff;
    font-size: 1.7em;
    margin: 0 10px;
    display: inline-block;
    transition: color 0.2s, transform 0.16s;
}
.footer-bottom-icons a:hover {
    color: #3fe8c9;
    transform: scale(1.17) rotate(-3deg);
}
.footer-bottom-copyright {
    color: #fff;
    font-size: 1.04rem;
    margin-top: 3px;
}

/* Email/Phone/Map Custom */
.footer-email-icon { color: #38d3f6; font-size: 1.18em; margin-right: 7px; vertical-align: middle; }
.footer-email-link { color: #b6effb; font-size: 1.07em; text-decoration: none; font-weight: 500; transition: color 0.17s; }
.footer-email-link:hover { color: #4ae9de; text-decoration: underline; }
.footer-phone-icon { color: #1fe9ad; font-size: 1.18em; margin-right: 7px; vertical-align: middle; }
.footer-phone-link { color: #a5ffda; font-size: 1.07em; text-decoration: none; font-weight: 500; transition: color 0.17s; }
.footer-phone-link:hover { color: #3fe8c9; text-decoration: underline; }
.footer-map-icon { color: #fc8383; font-size: 1.18em; margin-right: 7px; vertical-align: middle; }
.footer-map-link { color: #ffdada; font-size: 1.07em; text-decoration: none; font-weight: 500; transition: color 0.17s; }
.footer-map-link:hover { color: #ff9595; text-decoration: underline; }

/* Responsive styles for mobile/tablet */
@media (max-width: 950px) {
    .footer-grid { gap: 32px; }
    .footer-contact-block, .footer-links-block, .footer-social-block { min-width: 160px; }
}
@media (max-width: 800px) {
    .footer-bottom-icons { font-size: 1.4em; }
}
@media (max-width: 700px) {
    .footer-grid { flex-direction: column; gap: 100px; align-items: center; }
}

.chem-symbol {
    position: absolute;
    font-size: 16px; /* or smaller */
    font-family: Arial, sans-serif;
    opacity: 0.17;
    pointer-events: none;
    z-index: 0;
}
..chem-symbol {
    position: absolute;
    font-size: 32px; /* Slightly big, but not huge */
    font-family: Arial, sans-serif;
    opacity: 0.23;    /* Increased from 0.17, for better visibility, can try 0.3 */
    pointer-events: none;
    z-index: 0;
}

.chem-symbol {
    position: absolute;
    font-size: 44px; /* can go up to 52px if you want even bigger */
    font-family: Arial, sans-serif;
    opacity: 0.55;    /* make symbols more visible and slightly dark */
    pointer-events: none;
    z-index: 0;
}

.symbol-o2       { color: #1877f2;    top: 80px;   left: 60px; }
.symbol-o2b      { color: #1877f2;    top: 420px;  left: 1320px; }
.symbol-n2       { color: #b324c4;    top: 260px;  left: 460px; }
.symbol-n2b      { color: #b324c4;    top: 820px;  left: 1100px; }
.symbol-ar       { color: #008080;    top: 180px;  left: 900px; }
.symbol-arb      { color: #008080;    top: 600px;  left: 200px; }
.symbol-he       { color: #ffd700;    top: 84px;   left: 1150px; }
.symbol-heb      { color: #ffd700;    top: 600px;  left: 700px; }
.symbol-da       { color: #d1233a;    top: 200px;  left: 950px; }
.symbol-dab      { color: #d1233a;    top: 440px;  left: 320px; }
.symbol-h2       { color: #006fe6;    top: 420px;  left: 770px; }
.symbol-h2b      { color: #006fe6;    top: 720px;  left: 1280px; }
.symbol-nh3      { color: #28e59a;    top: 300px;  left: 120px; }
.symbol-nh3b     { color: #28e59a;    top: 800px;  left: 600px; }
.symbol-n2o      { color: #2451af;    top: 260px;  left: 650px; }
.symbol-n2ob     { color: #2451af;    top: 970px;  left: 250px; }
.symbol-za       { color: #ffaf08;    top: 480px;  left: 1220px; }
.symbol-zab      { color: #ffaf08;    top: 1040px; left: 500px; }
.symbol-factory  { color: #2175d9;    top: 390px;  left: 700px; font-size: 52px; }
.symbol-factoryb { color: #2175d9;    top: 1000px; left: 900px; font-size: 52px; }

.product-banner {
  width: 100%;
  background: linear-gradient(90deg, #eaf5fa 0%, #3fe8c9 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 38px 0 20px 0;
  box-shadow: 0 8px 32px rgba(36,81,175,0.07);
  border-radius: 0 0 16px 16px;
  margin-bottom: 15px;
}

.product-symbols {
  display: flex;
  gap: 42px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 16px;
}

.prod-symbol {
  font-size: 2.3rem;
  font-weight: 700;
  font-family: Arial, 'Segoe UI', sans-serif;
  padding: 0 16px;
  border-radius: 10px;
  background: rgba(255,255,255,0.36);
  box-shadow: 0 2px 10px rgba(31,41,55,0.08);
}

/* unique colors per symbol: */
.symbol-o2  { color: #1877f2;}
.symbol-n2  { color: #b324c4;}
.symbol-da  { color: #d1233a;}
.symbol-ar  { color: #008080;}
.symbol-za  { color: #ffaf08;}
.symbol-nh3 { color: #28e59a;}
.symbol-lpg { color: #e86123;}
.symbol-h2  { color: #d32f2f;} /* H2 - industrial red */
.symbol-he  { color: #795548;} /* Helium - industrial brown */

.product-banner-title {
  font-size: 2rem;
  font-weight: 600;
  color: #287b8c;
  letter-spacing: .08em;
  text-align: center;
  margin-top: 4px;
  text-shadow: 1px 2px 8px #adf5ee33;
}
.product-banner {
  margin-bottom: 40px;
}

main {
  min-height: 500px;
  padding: 20px 0;
}

/* === Product Card Section === */
.products-section {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px;
  padding: 40px 20px;
}

.product-card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  text-align: center;
  width: 500px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  border-bottom: 4px solid #3fe8c9;
}

/* Hover lift effect */
.product-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 25px rgba(36, 81, 175, 0.2);
}

.enquiry-btn {
  display: inline-block;
  background: linear-gradient(90deg, #3fe8c9, #28a9b9);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  padding: 10px 24px;
  margin: 18px 0 22px 0;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.3s, transform 0.2s;
}

.enquiry-btn:hover {
  background: linear-gradient(90deg, #28a9b9, #3fe8c9);
  transform: scale(1.06);
}

/* Responsive */
@media (max-width: 1000px) {
  .products-section {
    gap: 30px;
  }
  .product-card {
    width: 280px;
  }
}

@media (max-width: 768px) {
  .product-card {
    width: 90%;
  }
}

/* === OPTION 2: Abstract Gas Flow Gradient === */
.products-section {
  position: relative;
  overflow: hidden;
}

.products-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 40%;
  height: 100%;
  background: radial-gradient(circle at 20% 30%, rgba(0, 230, 230, 0.3), transparent 60%),
              radial-gradient(circle at 40% 70%, rgba(255, 255, 255, 0.15), transparent 60%),
              radial-gradient(circle at 10% 80%, rgba(0, 180, 255, 0.25), transparent 60%);
  opacity: 0.8;
  z-index: 0;
}

/* === DESIGN 3: Pressurized Gas Mist === */
.products-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(to right, #b8fff1 0%, #dbfff9 40%, #ffffff 100%);
}

.products-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 40%;
  height: 100%;
  background-image:
    radial-gradient(rgba(0, 255, 255, 0.25) 3px, transparent 4px),
    radial-gradient(rgba(0, 230, 230, 0.2) 4px, transparent 5px),
    radial-gradient(rgba(0, 180, 255, 0.15) 6px, transparent 7px),
    radial-gradient(rgba(255, 255, 255, 0.15) 8px, transparent 9px);
  background-size: 50px 100px, 80px 160px, 120px 240px, 160px 320px;
  animation: mistFlow 24s linear infinite;
  opacity: 0.9;
  z-index: 0;
  filter: blur(0.5px);
}

@keyframes mistFlow {
  0%   { background-position: 0 100%, 0 200%, 0 300%, 0 400%; }
  100% { background-position: 0 -400%, 0 -300%, 0 -200%, 0 -100%; }
}

.product-card {
  position: relative;
  z-index: 1;
}
.about-products-banner {
  width: 100%;
  background: linear-gradient(90deg, #48c6ef 0%, #6f86d6 100%); /* Soft blue gradient */
  color: white;
  text-align: center;
  padding: 45px 15px 30px 15px;
  margin-bottom: 32px;
  box-shadow: 0 4px 16px rgba(72, 198, 239, 0.14);
  border-radius: 0 0 30px 30px;
  position: relative;
  z-index: 2;
}
.about-products-banner h2 {
  font-size: 2.4rem;
  font-weight: bold;
  margin-bottom: 15px;
  letter-spacing: 2px;
}
.about-products-banner p {
  font-size: 1.15rem;
  margin: 0;
  max-width: 850px;
  margin-inline: auto;
  opacity: 0.95;
}
.gas-cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  justify-content: center;
  margin: 40px auto;
}

.gas-card {
  width: 450px;
  min-height: 140px;
  background: #fff;
  border-radius: 20px;
  padding: 20px 18px;
  box-shadow: 0 4px 16px rgba(44,62,80,0.13);
  color: #263343;
  position: relative;
  font-family: 'Segoe UI', Arial, sans-serif;
  transition: transform 0.2s;
}
.gas-card:hover { transform: translateY(-8px) scale(1.04); }

/* Unique card designs */
.o2 { background: linear-gradient(135deg, #61dafb 52%, #eaf6fb 100%); border-left: 8px solid #0074d9; }
.n2 { background: linear-gradient(120deg, #8fd3f4 30%, #fff 100%); border-top: 8px solid #2e86de; }
.ar { background: linear-gradient(135deg, #c9ffd4 67%, #fafdcb 100%); border-right: 8px solid #16a085; }
.za { background: linear-gradient(110deg, #e0eafc 40%, #cfdef3 100%); border-bottom: 8px dashed #00a8ff; }
.he { background: linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%); border-left: 8px solid #f53844; }
.h2 { background: linear-gradient(135deg, #96e6a1 50%, #d4fc79 100%); border-top: 8px dotted #23ce6b; }
.nh3 { background: linear-gradient(118deg, #f9f7d9 60%, #fffcee 100%); border-bottom: 8px solid #f7b32b; }
.n2o { background: linear-gradient(135deg, #fbc2eb 50%, #f8ffae 100%); border-right: 8px double #ff9f43; }
.da { background: linear-gradient(135deg, #b5fffc 40%, #f5f7fa 100%); border-left: 8px groove #00b894; }
.lpg { background: linear-gradient(120deg, #fad0c4 50%, #ffd1ff 100%); border-top: 8px solid #e17055; }

.gas-card h3 {
  margin: 0 0 10px 0;
  font-size: 1.2rem;
  font-weight: bold;
}

.gas-card p {
  margin: 0;
  font-size: 1rem;
}
.gas-cards-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 900px;
  margin: 40px auto;
}

/* Center the 10th card */
.gas-cards-container .gas-card:last-child {
  grid-column: 2 / 3;
  justify-self: center;
}

/* Responsive for mobile */
@media (max-width: 900px) {
  .gas-cards-container {
    grid-template-columns: repeat(2, 1fr);
    max-width: 600px;
  }
  .gas-cards-container .gas-card:last-child {
    grid-column: 1 / -1;
    justify-self: center;
  }
}
@media (max-width: 600px) {
  .gas-cards-container {
    grid-template-columns: 1fr;
    max-width: 350px;
  }
  .gas-cards-container .gas-card:last-child {
    grid-column: 1;
    justify-self: center;
  }
}
.gas-card.o2         { border-left: 7px solid #7ed6df; background: #eafcff; }
.gas-card.n2         { border-left: 7px solid #badc58; background: #f7fff0; }
.gas-card.ar         { border-left: 7px solid #c7ecee; background: #f8fbff; }
.gas-card.za         { border-left: 7px solid #e056fd; background: #fcf2ff; }
.gas-card.he         { border-left: 7px solid #fdcb6e; background: #fffbea; }
.gas-card.h2         { border-left: 7px solid #55efc4; background: #edfff9; }
.gas-card.nh3        { border-left: 7px solid #fab1a0; background: #fff8f2; }
.gas-card.n2o        { border-left: 7px solid #00b894; background: #f3fff7; }
.gas-card.da         { border-left: 7px solid #636e72; background: #f6f6f7; }
.gas-card.lpg        { border-left: 7px solid #fd79a8; background: #fff2fa; }

/* For the new cards, use pastel colors (as previous step) */
.gas-card.refrigerant  { border-left: 7px solid #45c4b0; background: #e7fdf6;}
.gas-card.calibration  { border-left: 7px solid #ffe066; background: #fffde7;}
.gas-card.lo2          { border-left: 7px solid #89aae6; background: #eef5ff;}
.gas-card.largon       { border-left: 7px solid #f9b4ab; background: #fff5f2;}
.gas-card.lnitrogen    { border-left: 7px solid #91d18b; background: #f4fff0;}
.gas-card.speciality   { border-left: 7px solid #bb96d1; background: #f9f4fd;}
.gas-card.dryice       { border-left: 7px solid #9ad3de; background: #f4fafb;}