/* style.css - Green / White / Brown theme */
:root{
  --green:#2f8f4e;
  --dark-green:#25683d;
  --brown:#6b4f3a;
  --light-brown:#a07b61;
  --white:#ffffff;
  --muted:#6b6b6b;
  --max-width:1100px;
  --gap:1.25rem;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
body{margin:0;color:#222;background:linear-gradient(180deg,#fbfff9, #f7faf4);line-height:1.6}
.container{max-width:var(--max-width);margin:0 auto;padding:0 1rem}
.nav{background:var(--white);box-shadow:0 2px 6px rgba(15,15,15,0.06);position:sticky;top:0;z-index:50}
.nav-inner{display:flex;align-items:left;justify-content:space-between;padding:0.5
	rem 0}
.brand{font-weight:700;color:var(--dark-green);text-decoration:none}
.nav-toggle{display:none;background:none;border:0;font-size:1.25rem}
.nav-links{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0.75rem;
	align-items: center;
	color: hsla(0,0%,100%,1);
}
.nav-links a{text-decoration:none;padding:0.5rem 0.75rem;border-radius:6px;color:var(--muted)}
.nav-links a:hover{
	background: rgba(47,143,78,0.08);
	color: #FFFFFF
}

.hero{display:grid;grid-template-columns:1fr 420px;gap:2rem;align-items:center;padding:0.5rem 0}
.hero-card{background:var(--white);padding:1.5rem;border-radius:12px;box-shadow:0 8px 30px rgba(15,15,15,0.06)}
.hero h1{margin:0 0 0.5rem;color:var(--dark-green);font-size:clamp(1.6rem,2.4rem,2.4rem)}
.hero p.lead{color:#2c2c2c}

.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.card{
	background: var(--white);
	padding: 0.25rem;
	border-radius: 10px;
	box-shadow: 0 6px 9px rgba(15,15,15,0.05);
	color: hsla(0,0%,0%,1);
}
.card h3{
	margin-top: 0;
	color: hsla(141,48%,28%,1);
	font-size: 14pt;
}

.section{padding:0.5rem 0}
.kv{display:flex;gap:1rem;flex-wrap:wrap}
.kv .item{flex:1 1 200px;background:var(--white);padding:0.5rem;border-radius:4px;box-shadow:0 3px 9px rgba(15,15,15,0.03)}

.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0.5rem}
.gallery-grid img{width:100%;height:160px;object-fit:cover;border-radius:8px}

/* Contact form */
form.card{display:grid;gap:0.75rem}
input, textarea{padding:0.6rem;border:1px solid #e6e6e6;border-radius:4px;font-size:0.75rem;width:100%}
button.btn{background:var(--green);color:var(--white);padding:0.5rem 0.5rem;border:0;border-radius:4px;cursor:pointer}

/* Footer */
.site-footer{background:var(--dark-green);color:var(--white);padding:0.5rem 0;font-size:0.95rem;text-align:center}
.nav {
	background-color: hsla(141,48%,28%,1.00);
	color: hsla(0,0%,100%,1.00);
}
.container .hero.section .hero-card {
	background-image: url(../../HSC%20WEB%20PROJECT/assets/img%209.jpg);
}
.container .section p {
	font-size: 16px;
}
.card h3 strong {
	font-size: x-large;
}
aside .card h4 {
	font-size: x-large;
	color: hsla(141,48%,28%,1.00);
}
div p strong {
	font-size: 11pt;
	color: #040B06;
}
.container .hero.section .hero-card {
	background-image: url(../assets/img%209.jpg);
}
.container .container-fluid {
	font-size: xx-large;
}
div p strong {
	text-align: justify;

}
li a strong {
	color: hsla(0,0%,97%,1.00);
}
.nav .container.nav-inner strong {
	color: hsla(0,0%,100%,1.00);
}
.container .row {
	clear: both;
	text-align: justify;

}
.container .row .text-justify {
	background-image: -webkit-linear-gradient(69deg,rgba(130,255,226,1.00) 11.92%,rgba(255,255,255,1.00) 50.78%,rgba(0,255,195,1.00) 100%);
	background-image: -moz-linear-gradient(69deg,rgba(130,255,226,1.00) 11.92%,rgba(255,255,255,1.00) 50.78%,rgba(0,255,195,1.00) 100%);
	background-image: -o-linear-gradient(69deg,rgba(130,255,226,1.00) 11.92%,rgba(255,255,255,1.00) 50.78%,rgba(0,255,195,1.00) 100%);
	background-image: linear-gradient(21deg,rgba(130,255,226,1.00) 11.92%,rgba(255,255,255,1.00) 50.78%,rgba(0,255,195,1.00) 100%);
}





/* Responsive */
@media (max-width:900px){
  .hero{grid-template-columns:1fr; padding:2rem 0}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .nav-toggle{display:block}
  .nav-links{position:absolute;right:1rem;top:60px;background:var(--dark-green);flex-direction:column;padding:0.5rem;border-radius:8px;box-shadow:0 5px 15px rgba(15,15,15,0.08);display:none}
  .nav-links.show{display:flex}
  .services-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr}
}