/*
  ================================================================================
  STYLESHEET FOR A LEADING INDUSTRIAL MANUFACTURER
  DESIGNED BY: A 50-YEAR VETERAN OF INDUSTRIAL UI/UX
  VERSION: 2.1 (TAILORED FOR RETA ENGINEERING WEBSITE)
  ================================================================================

  DESIGN PHILOSOPHY:
  In my 50 years of experience, I've learned that design for the manufacturing sector
  isn't about fleeting trends. It's about communicating trust, precision, and durability.
  This stylesheet is built on that foundation. We prioritize clarity, function, and a
  professional aesthetic that speaks to engineers, managers, and decision-makers.
  Every element is crafted to be robust, readable, and reliable, just like the
  tanks and reactors you build.
*/

/* ==============================================================================
   1. DESIGN SYSTEM & GLOBAL VARIABLES (THE BLUEPRINT)
   ==============================================================================
   Just like a proper engineering schematic, we define our core components first.
   This ensures consistency across the entire site and makes future updates simple.
   We're building a system, not just a page.
*/
:root {
  /* Primary Color Palette: Professional, Strong, Trustworthy */
  --color-primary-dark: #0A223D; /* Deep navy for text, footers, and strong accents. */
  --color-primary-brand: #005A9C; /* A confident, corporate blue. More established than the previous one. */
  --color-accent-action: #005A9C; /* Industrial orange. For critical calls-to-action. Draws the eye, implies safety and action. */
  --color-accent-highlight: #00BFFF; /* A clean, bright blue for highlights and focus states. Modern and technical. */

  /* Neutral Palette: The Foundation */
  --color-background-main: #F4F6F8; /* A very light, cool grey. Cleaner than beige, less sterile than pure white. */
  --color-background-surface: #FFFFFF; /* For cards, modals, and raised surfaces. */
  --color-text-primary: #1D2129; /* A dark charcoal. Softer than pure black, better for readability. */
  --color-text-secondary: #4A4A4A; /* For supporting text, captions, and details. */
  --color-border-subtle: #DDE2E7; /* For subtle divisions and borders on cards. */
  --color-border-input: #CED4DA; /* Standard input border color. */
  --color-success: #28a745;
  --color-error: #dc3545;

  /* Typography: Clarity is King */
  --font-family-primary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing System (Based on an 8px Grid): For Rhythm & Consistency */
  --space-xs: 0.25rem;  /* 4px */
  --space-sm: 0.5rem;   /* 8px */
  --space-md: 1rem;     /* 16px */
  --space-lg: 2rem;     /* 32px */
  --space-xl: 4rem;     /* 64px */

  /* Borders & Shadows: Subtle, Clean, Professional */
  --border-radius-sm: 4px;   /* For smaller elements like tags. */
  --border-radius-md: 8px;   /* The standard for buttons, inputs, and cards. More solid than a large radius. */
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.1);

  /* Transitions: Quick & Purposeful */
  --transition-fast: 0.2s ease-in-out;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&display=swap');
/* ==============================================================================
   2. RESET & BASE STYLES (THE FOUNDATION)
   ==============================================================================
   A good foundation prevents problems down the line. We ensure a consistent
   starting point across all browsers.
*/
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family-primary);
  line-height: 1.6;
  color: var(--color-text-primary);
  background-color: var(--color-background-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none;
  color: var(--color-primary-brand);
  transition: color var(--transition-fast);
}

a:hover {
  text-decoration: underline;
  color: var(--color-primary-dark);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Clearer Hierarchy for Headings */
h1, h2, h3, h4 {
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
}

h1 { font-size: clamp(2.25rem, 5vw, 3rem); } /* Responsive font size */
h2 { font-size: clamp(1.75rem, 4vw, 2.25rem); margin-bottom: var(--space-md); }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.125rem; }

/* Section Base Styles */
section {
  padding: var(--space-xl) var(--space-md);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* ==============================================================================
   3. REUSABLE COMPONENTS & UTILITIES (THE TOOLKIT)
   ==============================================================================
*/

/* Base Card Style */
.card {
  background: var(--color-background-surface);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-sm);
  padding: var(--space-lg);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

/* Form Inputs */
.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  margin-bottom: var(--space-md);
  border: 1px solid var(--color-border-input);
  border-radius: var(--border-radius-md);
  font-size: 1rem;
  background-color: #fff;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-input:focus {
  outline: none;
  border-color: var(--color-accent-highlight);
  box-shadow: 0 0 0 3px rgba(0, 191, 255, 0.25);
}

/* Form Submission Alert */
.form-alert {
  padding: var(--space-md);
  margin-top: var(--space-md);
  border-radius: var(--border-radius-md);
  color: #fff;
  text-align: center;
}
.form-alert.success { background-color: var(--color-success); }
.form-alert.error { background-color: var(--color-error); }


/* ==============================================================================
   4. SITE SECTIONS (THE ASSEMBLY)
   ==============================================================================
*/

/* ================= Header / Navigation ================= */
header {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.95); /* Slightly transparent, soft luxury feel */
  backdrop-filter: blur(12px); /* Soft blur for elegance */
  z-index: 1000;
  height: 70px; /* Slightly smaller, less bulky */
  display: flex;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Subtle luxury shadow */
  border-bottom: 1px solid rgba(0,0,0,0.05);
  transition: all 0.3s ease-in-out;
  padding: 0 2rem;
  font-family: 'Montserrat', sans-serif;
}

header.scrolled {
  background: rgba(255,255,255,1);
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  height: 65px;
  padding: 0 2rem;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.logo img {
  height: 80px; /* Smaller, elegant */
  transition: transform 0.3s ease;
}

.logo img:hover {
  transform: scale(1.05);
}

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-links a {
  color: #0A223D; /* Dark luxury color */
  font-weight: 500;
  text-decoration: none;
  position: relative;
  padding: 0.25rem 0;
  transition: color 0.3s ease;
  font-size: 1rem;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--color-accent-action); /* Subtle accent */
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-accent-action);
  border-radius: 1px;
  transition: width 0.3s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

/* Hamburger for mobile */
.hamburger {
  display: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: #0A223D;
}

/* Optional: mobile menu responsiveness */
@media (max-width: 992px) {
  .nav-links {
    display: none;
  }
  .hamburger {
    display: block;
  }
}



/* Products Section */
.products-section { text-align: center; }
.products-section p {
  max-width: 800px;
  margin: 0 auto var(--space-lg) auto;
  color: var(--color-text-secondary);
}

/* ================= PRODUCT SECTION ================= */
.products-section {
  padding: 80px 20px;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  font-family: 'Inter', sans-serif;
  color: #0A223D; /* Dark professional color */
}

.products-section h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 3rem; /* Big and appealing */
  font-weight: 800;
  line-height: 1.1;
  color: #0A223D;
  margin-bottom: 1rem;
  position: relative;
  display: inline-block;
  letter-spacing: -1px; /* Slightly tighter for a strong look */
}

/* Optional stylish underline/accent */
.products-section h1::after {
  content: '';
  display: block;
  width: 80px;
  height: 4px;
  background: var(--color-primary-brand, #005A9C); /* Accent color */
  border-radius: 2px;
  margin-top: 12px;
  margin-left: auto;
  margin-right: auto;
}

/* Optional text shadow for subtle depth */
.products-section h1 {
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
}

.products-section p {
  font-size: 1.125rem;
  color: #34495e; /* Subtle text color for readability */
  max-width: 800px;
  margin: 0 auto 2.5rem auto;
  line-height: 1.6;
}
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
}
.product-card {
  background: var(--color-background-surface);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-sm);
  padding: var(--space-lg);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.product-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}
.product-card h3 { margin-bottom: var(--space-sm); font-size: large; }
.product-card p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
    font-size: medium;
}
.product-card .cta {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  font-weight: var(--font-weight-medium);
  border-radius: var(--border-radius-md);
  background-color: transparent;
  color: var(--color-primary-brand);
  border: 2px solid var(--color-primary-brand);
  transition: all var(--transition-fast);
}
.product-card .cta:hover {
  background-color: var(--color-primary-brand);
  color: #fff;
  text-decoration: none;
}


/* Technical Specifications */
.specifications { background: var(--color-background-surface); }
.table-wrapper {
  overflow-x: auto;
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border-subtle);
}
.specifications table {
  width: 100%;
  border-collapse: collapse;
}
.specifications th, .specifications td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border-subtle);
}
.specifications th {
  background: var(--color-background-main);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-dark);
}
.specifications tbody tr:nth-child(even) { background-color: #FAFBFC; }
.specifications tbody tr:last-child td { border-bottom: none; }
.download-btn {
  display: inline-block;
  margin-top: var(--space-lg);
  padding: 0.75rem 1.75rem;
  font-weight: var(--font-weight-semibold);
  border-radius: var(--border-radius-md);
  background-color: var(--color-accent-action);
  color: #fff;
  transition: all var(--transition-fast);
  text-align: center;
margin-left: 40%;
}
.download-btn:hover {
  background-color: var(--color-primary-brand);
  transform: translateY(-2px);
  text-decoration: none;
  text-align: center;
}

/* Gallery Section */
.gallery { text-align: center; }
.image-carousel {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  padding-bottom: var(--space-md);
  scrollbar-width: thin;
}
.image-carousel::-webkit-scrollbar { height: 8px; }
.image-carousel::-webkit-scrollbar-track { background: var(--color-border-subtle); }
.image-carousel::-webkit-scrollbar-thumb { background-color: var(--color-primary-brand); border-radius: 10px; }
.image-carousel img {
  border-radius: var(--border-radius-md);
  flex: 0 0 300px;
  height: 250px;
  object-fit: cover;
  transition: transform var(--transition-fast);
}
.image-carousel img:hover { transform: scale(1.03); }

/* Industries Section */
.industries {
  text-align: center;
  background-color: var(--color-background-surface);
}
.industry-icons {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin: var(--space-lg) 0;
}
.industry-icons .icon {
  font-size: 2.5rem;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-background-main);
  border-radius: 50%;
  transition: all var(--transition-fast);
}
.industry-icons .icon:hover {
  transform: scale(1.1);
  background-color: var(--color-accent-highlight);
  color: #fff;
}
.industries p { color: var(--color-text-secondary); }

/* Testimonials Section */
.testimonials { text-align: center; }
.testimonial-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-lg);
  justify-content: center;
  margin-top: var(--space-lg);
}
.testimonial-cards .client-name {
  margin-top: var(--space-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-dark);
}

/* CTA Section */
.cta-section {
  background: var(--color-primary-dark);
  color: #fff;
  text-align: center;
  border-radius: var(--border-radius-md);
  padding: var(--space-xl);
}
.cta-section h2 {
  color: #fff;
  margin-bottom: var(--space-md);
}
.cta-btn {
  display: inline-block;
  padding: 0.8rem 2.5rem;
  font-weight: var(--font-weight-semibold);
  border-radius: var(--border-radius-md);
  background-color: #fff;
  color: var(--color-accent-action);
  transition: all var(--transition-fast);
  font-size: 1.1rem;
}
.cta-btn:hover {
  background-color: var(--color-background-main);
  transform: translateY(-2px);
  text-decoration: none;
}

/* Contact Section */
#contact { background-color: var(--color-background-surface); }
.contact-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-lg);
  align-items: flex-start;
  margin-top: var(--space-lg);
}
.enquiry-form {
  background: #fdfdfd;
  padding: var(--space-lg);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--color-border-subtle);
}
.industrial-cta {
  width: 100%;
  padding: 0.8rem 1.6rem;
  background: var(--color-primary-dark);
  color: #fff;
  border: 2px solid var(--color-primary-dark);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all var(--transition-fast);
  border-radius: var(--border-radius-md);
}
.industrial-cta:hover {
  background: var(--color-primary-brand);
  border-color: var(--color-primary-brand);
}
.vcard-square-btn {
  display: block;
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--color-background-main);
  text-align: center;
  border-radius: var(--border-radius-md);
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-semibold);
  transition: all var(--transition-fast);
  border: 1px solid var(--color-border-subtle);
  line-height: 1.4;
}
.vcard-square-btn:hover {
  background: var(--color-border-subtle);
  text-decoration: none;
  border-color: #ccc;
}
.contact-method {
  display: flex;
  gap: var(--space-md);
  background: var(--color-background-main);
  padding: var(--space-md);
  border-radius: var(--border-radius-md);
  margin-bottom: var(--space-md);
}
.contact-method i {
  font-size: 1.5rem;
  color: var(--color-primary-brand);
  margin-top: 0.2rem;
}
.contact-method h4 { margin-bottom: var(--space-sm); }
.contact-method a {
  display: block;
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-sm);
  word-break: break-all;
}
.live-chat-btn {
  display: inline-block;
  margin-top: var(--space-sm);
  padding: 0.5rem 1rem;
  background: var(--color-primary-dark);
  color: #fff;
  border: none;
  border-radius: var(--border-radius-md);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.live-chat-btn:hover { background: var(--color-primary-brand); }
.smart-map iframe {
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-sm);
}

/* Footer */
.footer {
  background: var(--color-primary-dark);
  color: rgba(255,255,255,0.7);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
}
.footer p { margin: 0 auto 1rem auto; max-width: 800px; }
.footer .copyright { font-size: 0.9rem; opacity: 0.8; }
.footer a {
  color: var(--color-accent-highlight);
  font-weight: var(--font-weight-medium);
}
.footer a:hover { color: #fff; }
.social-links {
  margin-top: var(--space-md);
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
}
.social-links a {
  font-size: 1.5rem;
  color: #fff;
  transition: all var(--transition-fast);
}
.social-links a:hover {
  transform: translateY(-3px);
  color: var(--color-accent-highlight);
}


/* ==============================================================================
   5. RESPONSIVE DESIGN (ADAPTABILITY)
   ==============================================================================
*/
@media (max-width: 992px) {
  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    height: 100vh;
    width: 280px;
    background: var(--color-background-surface);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    transition: right 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: var(--shadow-lg);
  }
  .nav-links.open { right: 0; }
  .hamburger { display: block; z-index: 1001; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  section { padding: var(--space-lg) var(--space-md); }
  .hero { padding-top: 120px; padding-bottom: 80px; }
}