body{font-family:'Segoe UI',Arial,sans-serif;margin:0;background:#f9fafb;color:#0f172a;line-height:1.6;}
.container{max-width:1200px;margin:0 auto;padding:20px;}
header{background:#fff;box-shadow:0 2px 6px rgba(0,0,0,0.05);position:sticky;top:0;z-index:100;}
.nav{display:flex;justify-content:space-between;align-items:center;}
.logo{height:50px;}
nav ul{list-style:none;display:flex;gap:20px;margin:0;padding:0;}
nav ul.show{display:block;}
.menu-toggle{display:none;background:none;border:none;font-size:24px;}
.cta{background:#007c91;color:white;padding:10px 16px;border-radius:6px;text-decoration:none;font-weight:600;}
.hero{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;padding:60px 0;}
.hero-text{max-width:500px;}
.hero-img{width:100%;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,0.1);}
footer{background:#0f172a;color:#cbd5e1;padding:20px 0;margin-top:40px;}
@media(max-width:900px){.hero{grid-template-columns:1fr;} nav ul{display:none;} .menu-toggle{display:block;}}

.brand {display:flex; align-items:center; gap:10px;}
.brand-text {font-weight:700; color:#007c91; font-size:18px;}

.logo-wrap {display:flex; flex-direction:column; align-items:center;}
.brand-text {font-weight:700; color:#007c91; font-size:16px; margin-top:4px; text-align:center;}

.brand-tagline {font-size:13px; color:#555; margin-top:2px; text-align:center; letter-spacing:1px; font-style:italic;}
nav ul {list-style:none; display:flex; gap:24px; margin:0; padding:0;}
nav ul li a {position:relative; padding:6px 0; font-weight:600; color:#0f172a; transition:color 0.3s;}
nav ul li a::after {content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:#007c91; transition:width 0.3s;}
nav ul li a:hover {color:#007c91;}
nav ul li a:hover::after {width:100%;}
.menu-toggle {display:none; background:none; border:none; font-size:26px; color:#007c91;}
@media(max-width:900px){ nav ul{display:none; flex-direction:column; gap:12px; background:#fff; padding:10px; box-shadow:0 4px 12px rgba(0,0,0,0.1);} nav ul.show{display:flex;} .menu-toggle{display:block;} }

header.shrink {padding:6px 0; transition:all 0.3s ease;}
header .logo {height:50px; transition:all 0.3s ease;}
header.shrink .logo {height:35px;}
header .brand-text {transition:all 0.3s ease;}
header.shrink .brand-text {font-size:14px;}


.brand-text {font-weight:300; color:#444; font-size:16px; letter-spacing:1px;}


.brand-text {font-weight:700; font-size:12px; color:#222; letter-spacing:1px; text-align:center;}
header.shrink .brand-text {font-size:11px;}
.brand-tagline {font-size:10px; color:#666; letter-spacing:1px; margin-top:2px; font-style:italic; text-align:center;}

.brand {display:flex; flex-direction:column; align-items:center; gap:4px;}
.logo {margin:0;}
.brand-text {margin:0;}
.brand-tagline {margin:0;}

.extra-info, .hse-policy {margin-top:40px; background:#fff; padding:20px; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,0.05);}
.extra-info h2, .hse-policy h2 {color:#007c91; margin-bottom:12px;}
.extra-info ul {padding-left:20px; line-height:1.6;}
.extra-info li {margin-bottom:6px;}

.our-works {margin-top:40px; background:#fff; padding:20px; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,0.05);}
.our-works h2 {color:#007c91; margin-bottom:20px; text-align:center;}
.works-grid {display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px;}
.work-item {text-align:center;}
.work-item img {width:100%; height:180px; object-fit:cover; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.08);}
.work-item p {margin-top:8px; font-size:0.9rem; color:#333;}

.banner {
  position: relative;
  background: url('photo/ffr2.webp?q=80&w=1600&auto=format&fit=crop') 
              no-repeat center center/cover;
  height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.banner-overlay {
  background: rgba(0, 0, 0, 0.7);
  padding: 40px;
  border-radius: 12px;
}
.banner h1 {
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 10px;
}
.banner p {
  color: #e5f7fa;
  font-size: 1rem;
  letter-spacing: 1px;
}
@media(max-width:768px) {
  .banner { height: 50vh; }
  .banner h1 { font-size: 1.5rem; }
  .banner p { font-size: 0.9rem; }
}


.our-works {
  margin-top: 40px;
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.our-works h2 {
  color: #007c91;
  margin-bottom: 20px;
  text-align: center;
}
.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.work-item {
  background: #f9fafb;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  text-align: center;
}
.work-item img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 10px;
}
.work-item h3 {
  font-size: 1rem;
  margin-bottom: 6px;
  color: #007c91;
}
.work-item p {
  font-size: 0.85rem;
  color: #555;
}

.about-us {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  margin-top: 20px;
}
.about-us h1 {
  color: #007c91;
  margin-bottom: 15px;
}
.about-us h2 {
  color: #007c91;
  margin-top: 25px;
  margin-bottom: 10px;
}
.about-us p {
  color: #444;
  margin-bottom: 15px;
  line-height: 1.6;
}
.about-us ul {
  margin-left: 20px;
  margin-bottom: 15px;
}
.about-us li {
  margin-bottom: 6px;
  color: #333;
}


.contact-us {
  margin-top: 40px;
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.contact-us h1 {
  color: #007c91;
  margin-bottom: 15px;
  text-align: center;
}
.contact-us p {
  color: #444;
  margin-bottom: 10px;
}
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 20px;
}
.contact-card {
  background: #f9fafb;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.contact-card h2 {
  color: #007c91;
  margin-bottom: 12px;
}
.contact-card a {
  color: #007c91;
  text-decoration: none;
}
.contact-card a:hover {
  text-decoration: underline;
}



.services {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  margin-top: 20px;
}
.services h1 {
  color: #007c91;
  text-align: center;
  margin-bottom: 20px;
}
.services p {
  color: #444;
  margin-bottom: 15px;
  line-height: 1.6;
}
.service-section {
  margin-bottom: 30px;
}
.service-section h2 {
  color: #007c91;
  margin-bottom: 10px;
}
.service-section ul {
  margin-left: 20px;
  margin-top: 10px;
}
.service-section li {
  margin-bottom: 6px;
}

.counters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin: 50px 0;
  text-align: center;
  background: linear-gradient(135deg, #007c91, #00bcd4);
  padding: 40px 20px;
  border-radius: 12px;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.counter-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.counter {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.counters p {
  font-size: 1rem;
  font-weight: 400;
}


.services {
  padding: 40px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  margin-top: 20px;
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.service-box {
  text-align: center;
  padding: 20px;
  background: #f9fafb;
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}
.service-icon {
  font-size: 40px;
  color: #007c91;
  margin-bottom: 15px;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); color: #00bcd4; }
}