/*
  Global styles for the KL Electronics redesign
  A modern, responsive layout built with flexbox and CSS grid. The colour palette
  emphasises trust and professionalism with blues and subtle neutrals. Type
  scaling and generous spacing improve readability on all devices. Navigation
  collapses into a hamburger menu on small screens. Buttons use accent colours
  to draw attention to key actions.
*/

/* Reset and base styles */
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Roboto', sans-serif;
  color: #333;
  line-height: 1.6;
  background-color: #fdfdfd;
}

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

a {
  color: inherit;
  text-decoration: none;
}

/* Container utility for consistent horizontal padding */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Top bar styling */
.top-bar {
  background-color: #f7f7f7;
  font-size: 0.875rem;
  border-bottom: 1px solid #e0e0e0;
}

.top-bar .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.5rem 0;
}

.top-bar .tagline {
  font-weight: 500;
  color: #0d6efd;
}

.top-bar .contact-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.5rem;
}

.top-bar .contact-info a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  color: #555;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

.top-bar .contact-info a:hover {
  color: #0d6efd;
}

.top-bar .quote-link {
  font-weight: 600;
  color: #198754;
}

/* Navigation */
.main-nav {
  background-color: #ffffff;
  -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.05);
          box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.main-nav .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 1rem 0;
}

.logo {
  font-size: 1.375rem;
  font-weight: 700;
  color: #0d6efd;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}

.logo i {
  font-size: 1.5rem;
  color: #0d6efd;
}

/* Navigation links */
.nav-links {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 2rem;
}

.nav-links a {
  font-weight: 500;
  color: #333;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: #0d6efd;
}

/* Hamburger toggle for mobile */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #333;
}

/* Hero Section */
.hero {
  position: relative;
  color: #fff;
  height: 60vh;
  min-height: 400px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.hero .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 30, 60, 0.6);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
}

.hero-content h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.hero-content p {
  font-size: 1.125rem;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-weight: 600;
  text-align: center;
  -webkit-transition: background-color 0.3s ease, color 0.3s ease;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-primary {
  background-color: #0d6efd;
  color: #fff;
}

.btn-primary:hover {
  background-color: #0b5ed7;
}

.btn-secondary {
  background-color: #198754;
  color: #fff;
}

.btn-secondary:hover {
  background-color: #146c43;
}

/* Services section */
.services {
  padding: 4rem 0;
  background-color: #f7f9fc;
  text-align: center;
}

.services h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  position: relative;
  display: inline-block;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
}

.service-card {
  background-color: #fff;
  padding: 2rem 1.5rem;
  border-radius: 8px;
  -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.05);
          box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  -webkit-transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
  transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transition: transform 0.3s ease, box-shadow 0.3s ease, -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
}

.service-card i {
  font-size: 2rem;
  color: #0d6efd;
  margin-bottom: 1rem;
}

.service-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: #0d6efd;
}

.service-card p {
  font-size: 0.95rem;
  color: #555;
}

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

/* Mission section */
.mission {
  padding: 4rem 0;
}

.mission-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 3rem;
}

.mission-text {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 55%;
          flex: 1 1 55%;
}

.mission-text h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #0d6efd;
}

.mission-text p + p {
  margin-top: 1rem;
}

.mission-image {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 40%;
          flex: 1 1 40%;
}

.mission-image img {
  border-radius: 8px;
  -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.1);
          box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Testimonials */
.testimonials {
  background-color: #f7f9fc;
  padding: 4rem 0;
  text-align: center;
}

.testimonials h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  color: #0d6efd;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.testimonial-grid blockquote {
  background-color: #ffffff;
  border-left: 4px solid #0d6efd;
  padding: 1.5rem 2rem;
  border-radius: 6px;
  font-style: italic;
  -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.05);
          box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Call to action */
.cta {
  background-color: #0d6efd;
  color: #fff;
  padding: 3rem 0;
  text-align: center;
}

.cta h2 {
  font-size: 1.75rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.cta .btn-secondary {
  font-size: 1rem;
  padding: 0.75rem 2rem;
}

/* Footer */
.site-footer {
  background-color: #0a2540;
  color: #cdd5e0;
  padding: 3rem 0 1rem;
  font-size: 0.875rem;
}

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

.footer-column h3 {
  font-size: 1.125rem;
  margin-bottom: 1rem;
  color: #ffffff;
}

.footer-column p {
  margin-bottom: 1rem;
  line-height: 1.5;
}

.footer-column ul {
  list-style: none;
  padding: 0;
}

.footer-column li {
  margin-bottom: 0.5rem;
}

.footer-column a {
  color: #cdd5e0;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

.footer-column a:hover {
  color: #ffffff;
}

.contact-list i {
  margin-right: 0.5rem;
  color: #0d6efd;
}

.footer-bottom {
  text-align: center;
  margin-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 1rem;
  color: #8695aa;
}

/* Responsive styles */
@media (max-width: 768px) {
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #ffffff;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0;
    overflow: hidden;
    max-height: 0;
    -webkit-transition: max-height 0.3s ease;
    transition: max-height 0.3s ease;
  }

  .nav-links.open {
    max-height: 300px;
    -webkit-box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  }

  .nav-links li {
    border-bottom: 1px solid #f0f0f0;
  }

  .nav-links a {
    display: block;
    padding: 1rem;
  }

  .nav-toggle {
    display: block;
  }

  .mission-wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  .mission-image {
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
  }
}