/* Reset */
* {margin:0; padding:0; box-sizing:border-box; font-family: 'Roboto', sans-serif; scroll-behavior: smooth;}
body {background: #f4f6f8; color: #333; line-height:1.6;}

/* Hero Section */
.hero {
  height: 80vh;
  background: url('pcb-pattern.jpg') center/cover no-repeat; /* PCB background image */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.hero-overlay {
  background: rgba(0,0,0,0.5);
  padding: 2rem 3rem;
  border-radius: 15px;
  text-align: center;
  color: #fff;
  animation: fadeIn 1.5s ease-out;
}
.hero-logo {max-width:200px; margin-bottom:1rem; animation: floatLogo 3s ease-in-out infinite;}
.hero-title {font-size:3.5rem; margin-bottom:0.5rem; text-shadow: 2px 2px 5px rgba(0,0,0,0.5);}
.hero-tagline {font-size:1.3rem; margin-bottom:1rem;}
.btn-hero {
  padding:0.8rem 2rem;
  background:#00b894;
  color:white;
  font-weight:bold;
  border-radius:10px;
  text-decoration:none;
  transition:0.3s;
}
.btn-hero:hover {background:#019874;}

/* About Us Section */
.about-section {padding:5rem 5%;}
.about-content {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;
}
.about-text {flex:1; min-width:300px;}
.about-text h2 {font-size:2.5rem; margin-bottom:1rem; color:#004d66;}
.about-text p {margin-bottom:1rem; font-size:1.1rem;}
.about-text .btn-primary {
  display:inline-block;
  padding:0.7rem 1.8rem;
  background:#00b894;
  color:white;
  border-radius:8px;
  font-weight:bold;
  transition:0.3s;
  margin-top:1rem;
}
.about-text .btn-primary:hover {background:#019874;}
.about-image {flex:1; min-width:300px;}
.about-image img {width:100%; border-radius:15px; box-shadow:0 8px 20px rgba(0,0,0,0.15);}

/* Mission & Vision */
.section-mv {padding:4rem 5%; background:#e0f7fa;}
.mv-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2rem;}
.mv-card {background:white; padding:2rem; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,0.1); text-align:center; transition:0.3s;}
.mv-card:hover {transform:translateY(-5px); box-shadow:0 10px 25px rgba(0,0,0,0.15);}

/* Core Values */
.section-values {padding:5rem 5%; text-align:center;}
.section-values h2 {margin-bottom:3rem; color:#004d66;}
.values-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2rem;}
.value-card {background:linear-gradient(135deg,#00b894,#019874); color:white; padding:2rem; border-radius:15px; transition:0.3s;}
.value-card:hover {transform:translateY(-5px) scale(1.05); box-shadow:0 10px 25px rgba(0,0,0,0.2);}
.value-card h4 {margin:1rem 0; font-size:1.3rem;}

/* Services */
.section-services {padding:5rem 5%; background:#f0f4f8; text-align:center;}
.section-services h2 {margin-bottom:3rem; color:#004d66;}
.services-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2rem;}
.service-card {background:white; padding:2rem; border-radius:15px; box-shadow:0 6px 18px rgba(0,0,0,0.1); transition:0.3s;}
.service-card:hover {transform:translateY(-5px) scale(1.05); box-shadow:0 10px 25px rgba(0,0,0,0.15);}
.service-card h4 {margin:1rem 0; font-size:1.2rem;}

/* Target Market */
.section-market {padding:5rem 5%; text-align:center;}
.section-market h2 {margin-bottom:3rem; color:#004d66;}
.market-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2rem;}
.market-card {background:linear-gradient(135deg,#ffb74d,#ff8a65); color:white; padding:1.8rem; border-radius:15px; transition:0.3s;}
.market-card:hover {transform:translateY(-5px) scale(1.05); box-shadow:0 10px 20px rgba(0,0,0,0.15);}
.market-card h4 {margin:1rem 0; font-size:1.2rem;}

/* Why Choose Us */
.section-why {padding:5rem 5%; background:#e0f7fa; text-align:center;}
.section-why h2 {margin-bottom:2rem; color:#004d66;}
.checklist {list-style:none; max-width:800px; margin:auto; padding:0;}
.checklist li {margin:1rem 0; font-size:1.1rem; padding-left:1.8rem; position:relative;}
.checklist li::before {content:'✔'; position:absolute; left:0; color:#00b894; font-weight:bold; font-size:1.2rem;}

/* Contact */
.section-contact {padding:5rem 5%; text-align:center;}
.section-contact h2 {margin-bottom:2rem; color:#004d66;}
form {display:flex; flex-direction:column; max-width:500px; margin:auto; gap:1rem;}
input, textarea {padding:1rem; border-radius:10px; border:1px solid #ccc; font-size:1rem;}
button {padding:0.8rem; border:none; border-radius:10px; background:#00b894; color:white; font-weight:bold; cursor:pointer; transition:0.3s;}
button:hover {background:#019874;}

/* Footer */
.footer {background:#004d66; color:white; text-align:center; padding:2rem; margin-top:2rem; font-size:0.9rem; border-top:4px solid #00b894;}

/* Animations */
@keyframes fadeIn {from{opacity:0;} to{opacity:1;}}
@keyframes floatLogo {0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}

@media(max-width:768px){
  .hero-title {font-size:2.5rem;}
  .hero-logo {max-width:150px;}
  .about-content {flex-direction:column;}
}