:root {
  /* Premium Color Palette */
  --primary-color: #004d40;
  /* Deep Teal - Trust & Stability */
  --secondary-color: #00bfa5;
  /* Vibrant Teal - Modern & Tech */
  --accent-color: #ffd700;
  /* Gold - Excellence & Premium */
  --text-dark: #1a1a1a;
  --text-light: #f5f5f5;
  --bg-light: #ffffff;
  --bg-off-white: #f9f9f9;
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.2);
  --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* Typography */
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Transitions */
  --transition-fast: 0.3s ease;
  --transition-smooth: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  color: var(--text-dark);
  background-color: var(--bg-light);
  line-height: 1.6;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
}

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

ul {
  list-style: none;
}

/* Utilities */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.text-center {
  text-align: center;
}

.text-primary {
  color: var(--primary-color);
}

.text-secondary {
  color: var(--secondary-color);
}

.section-padding {
  padding: 80px 0;
}

/* Button Styles */
.btn {
  display: inline-block;
  padding: 12px 30px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  border: none;
  transition: var(--transition-smooth);
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary-color), var(--text-dark));
  color: var(--text-light);
  box-shadow: 0 4px 15px rgba(0, 77, 64, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 77, 64, 0.4);
}

.btn-secondary {
  background: transparent;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
}

.btn-secondary:hover {
  background: var(--primary-color);
  color: var(--text-light);
}

.hero-btns {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 30px;
}

@media (max-width: 600px) {
  .hero-btns {
    flex-direction: column;
    align-items: center;
  }

  .hero-btns .btn {
    width: 100%;
    max-width: 280px;
  }
}

/* Why Choose Us Section */
.why-choose-us {
  background: #f8fcfb;
  /* Very light teal/grey */
  position: relative;
  overflow: hidden;
}

.wcu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.wcu-card {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: var(--transition-smooth);
  border: 1px solid rgba(0, 0, 0, 0.03);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.wcu-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--secondary-color);
  transition: var(--transition-smooth);
  opacity: 0;
}

.wcu-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.wcu-card:hover::before {
  opacity: 1;
}

.wcu-icon-box {
  width: 70px;
  height: 70px;
  background: rgba(0, 191, 165, 0.1);
  color: var(--secondary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin: 0 auto 20px;
  transition: var(--transition-smooth);
}

.wcu-card:hover .wcu-icon-box {
  background: var(--secondary-color);
  color: #fff;
  transform: rotateY(180deg);
}

.wcu-card h3 {
  margin-bottom: 15px;
  color: var(--primary-color);
}

.wcu-card p {
  font-size: 0.95rem;
  color: #666;
  line-height: 1.6;
}

/* Header */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: var(--transition-fast);
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
}

.logo {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--primary-color);
  letter-spacing: -0.5px;
}

.nav-links {
  display: flex;
  gap: 30px;
  align-items: center;
}

.nav-links li a {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--text-dark);
  position: relative;
}

/* Fix for button inside nav */
.nav-links li a.btn {
  color: var(--text-light);
}

.nav-links li a::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--secondary-color);
  transition: var(--transition-fast);
}

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

/* Dropdown Menu */
.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: var(--transition-fast);
  padding: 10px 0;
}

.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu li {
  margin: 0;
}

.dropdown-menu li a {
  display: block;
  padding: 10px 20px;
  font-weight: 500;
  color: var(--text-dark);
  transition: var(--transition-fast);
}

.dropdown-menu li a:hover {
  background: var(--bg-off-white);
  color: var(--primary-color);
  padding-left: 25px;
}

.dropdown-menu li a::after {
  display: none;
}

.menu-toggle {
  display: none;
  font-size: 1.5rem;
  cursor: pointer;
}

/* Responsive */
/* Form Styles */
.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--text-dark);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 1rem;
  transition: var(--transition-fast);
  background-color: #f9f9f9;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--secondary-color);
  box-shadow: 0 0 0 3px rgba(0, 191, 165, 0.1);
  background-color: #fff;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #aaa;
}

@media (max-width: 768px) {
  .menu-toggle {
    display: block;
    color: var(--primary-color);
    font-size: 1.8rem;
    cursor: pointer;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    /* Position below the header */
    left: 0;
    width: 100%;
    background: #fff;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    z-index: 1000;
  }

  .nav-links.active {
    display: flex;
  }

  .nav-links li {
    margin: 15px 0;
  }

  .dropdown-menu {
    position: static;
    box-shadow: none;
    background: #f9f9f9;
    display: none;
    /* Hide by default on mobile */
    min-width: 100%;
    text-align: center;
  }

  .dropdown.active .dropdown-menu {
    /* We might need JS to toggle dropdown on click for mobile, 
         or just hover if likely to be tapped. 
         For now, lets ensure basic menu works. 
         Users often expect click on mobile for dropdowns. 
         The hover in desktop might not work well on mobile. 
         Let's set it so it shows if the parent is hovered/clicked (using :hover for simplicity or adding a class).
         Given touch devices obey hover sometimes, but better to just show it or allow it.
      */
    display: block;
  }

  /* Make dropdown visible on hover/focus for now to ensure accessibility */
  .dropdown:hover .dropdown-menu {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  .form-group-row {
    grid-template-columns: 1fr !important;
  }
}

/* Core Services Section */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

@media (max-width: 992px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}

.service-card {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
  text-align: left;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.service-card .icon-wrapper {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 20px;
}

.service-card h3 {
  margin-bottom: 12px;
  color: var(--text-dark);
  font-size: 1.15rem;
  font-weight: 700;
}

.service-card p {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 25px;
  line-height: 1.6;
  min-height: 3rem;
  /* Approx 2 lines */
}

.service-list {
  border-top: 1px solid #eee;
  padding-top: 20px;
  margin-top: auto;
}

.service-list li {
  margin-bottom: 10px;
  font-size: 0.9rem;
  color: #555;
  display: flex;
  align-items: flex-start;
}

.service-list li::before {
  content: '•';
  color: #2b5cff;
  /* Matching the blue bullet from the reference image */
  font-weight: bold;
  margin-right: 12px;
  line-height: 1.6;
}

/* Split Layout for Contact Page */
.split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: stretch;
}

.split-image {
  background: linear-gradient(135deg, rgba(0, 77, 64, 0.8), rgba(0, 191, 165, 0.4)), url('assets/lab_contact.png');
  background-size: cover;
  background-position: center;
  border-radius: 15px;
  min-height: 500px;
  box-shadow: var(--shadow-md);
}

.split-form .form-container {
  height: 100%;
}

@media (max-width: 900px) {
  .split-layout {
    grid-template-columns: 1fr;
  }

  .split-image {
    min-height: 300px;
  }

  .split-image {
    min-height: 300px;
  }
}

.split-text {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.split-text h2 {
  margin-bottom: 20px;
  color: var(--primary-color);
}

.split-text p {
  margin-bottom: 15px;
  font-size: 1.05rem;
  color: #444;
  line-height: 1.7;
}

/* Digital & Technology Edge Section */
.tech-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 30px;
  border-radius: 15px;
  transition: var(--transition-smooth);
}

.tech-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.2);
}

.tech-card .icon-box {
  background: rgba(255, 255, 255, 0.2);
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 1.5rem;
}

.tech-card h3 {
  margin-bottom: 15px;
  font-size: 1.25rem;
}

.tech-card p {
  font-size: 0.95rem;
  opacity: 0.9;
  line-height: 1.6;
}

/* Key Pillars Section */
.key-pillars {
  background: #fbf8f1;
  /* Light beige/cream background */
  padding: 60px 40px;
  border-radius: 20px;
  margin-top: 40px;
}

.key-pillars h2 {
  font-size: 2.5rem;
  color: #4b3e2f;
  /* Dark brownish text */
  margin-bottom: 50px;
  font-family: var(--font-heading);
  line-height: 1.2;
  text-align: center;
}

.pillars-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

.pillar-card {
  display: flex;
  align-items: flex-start;
  gap: 25px;
}

.pillar-icon {
  min-width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.8rem;
  flex-shrink: 0;
}

/* Specific colors based on the image description */
.pillar-icon.olive {
  background: #606c38;
}

.pillar-icon.gold {
  background: #dda15e;
}

.pillar-icon.brown {
  background: #bc6c25;
}

.pillar-content h3 {
  color: #3e3832;
  font-size: 1.35rem;
  margin-bottom: 10px;
  font-weight: 600;
}

.pillar-content p {
  color: #5d534a;
  font-size: 1rem;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .pillars-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Core Values Section */
.core-values {
  background: #f8fcfb;
  /* Very light teal/grey - same as Why Choose Us */
  position: relative;
}

.core-values h2 {
  font-size: 2.5rem;
  color: var(--primary-color);
  margin-bottom: 50px;
  font-family: var(--font-heading);
  text-align: center;
  /* Match other section headers like "Trusted by Industry" */
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

@media (min-width: 1024px) {
  .values-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.value-card {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.03);
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.value-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.value-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--secondary-color);
  transition: var(--transition-smooth);
}

.value-card:hover::before {
  height: 6px;
}

.value-card h3 {
  font-size: 1.35rem;
  margin-bottom: 15px;
  font-family: var(--font-heading);
  color: var(--primary-color);
}

.value-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #666;
  opacity: 1;
}

/* Remove specific card backgrounds and use borders/accents instead */
.value-card.integrity::before {
  background: var(--primary-color);
}

.value-card.innovation::before {
  background: var(--secondary-color);
}

.value-card.transparency::before {
  background: var(--accent-color);
}

.value-card.sustainability::before {
  background: #2e7d32;
}

/* Testing Services Section (Food Safety) */
.testing-services {
  background: #f4f1ea;
  /* Matching the beige from image */
}

.test-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-top: 40px;
}

.test-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.test-icon {
  font-size: 2.5rem;
  color: #556b2f;
  /* Dark Olive Green matching image icons */
  min-width: 50px;
}

.test-content h3 {
  font-size: 1.35rem;
  color: #3e3832;
  margin-bottom: 10px;
  font-family: var(--font-heading);
}

.test-content p {
  font-size: 1rem;
  color: #5d534a;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .test-grid {
    grid-template-columns: 1fr 1fr;
  }
}