body{
  margin:0;
  font-family:Arial,sans-serif;background:#fff;
  color:#111;
}
.container{
  width:90%;
  max-width:1100px;
  margin:0 auto;
}

/* HEADER */
.header{
  background:url('../images/hero.jpg') center/cover;
  height:400px;
  position: relative;
  color:#fff;
}

/* 🔥 DARK OVERLAY 🔥 */
.header::before{
  content:"";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.20); /* adjust darkness here */
  z-index: 1;
}

  /* LOGO FIX */
  .logo img{
    height: 45px; /* control size */
    width: auto;
    display: block;
  }  

.nav,
.hero{
  position: relative;
  z-index: 2;
}

.nav{display:flex;justify-content:space-between;align-items:center;padding:20px 0}
.nav ul{display:flex;gap:25px;list-style:none}
.nav a{color:#fff;text-decoration:none;font-size:14px}
.nav-btn{background:#f4b400;color:#000;padding:8px 16px;border-radius:20px}
.hero{text-align:center;margin-top:80px}
.hero h1{font-size:36px}
a{
  text-decoration: none;
}
/* SERVICES */
.services{padding:80px 0;text-align:center}
.services h2{margin-bottom:40px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:#fff}
.card img{width:100%;height:180px;object-fit:cover}
.card p{background:#f4b400;padding:15px;margin:0;font-weight:600}


/* MENU TOGGLE */
.menu-toggle{
  display: none;
  font-size: 28px;
  cursor: pointer;
  color: #fff;
}

/* WHY *
.why{padding:50px 0 20px;}
.why-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;align-items:center}
.why-item{display:flex;gap:10px;margin-bottom:0px}
.why-item div{width:35px;height:35px;background:#f4b400}
.center-img img{width:100%}
*/
/* CTA */
.cta{background:#c6f23a;padding:40px;border-radius:10px;margin:10px auto;width:90%;max-width:1000px;display:flex;justify-content:space-between;align-items:center}
.cta button{background:#0e2a1f;color:#fff;border:none;padding:10px 20px;border-radius:20px}

/* Conmment:-  */
.features-section{
    padding: 60px 0;
    text-align: center;
  }

  .section-label{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
  }

  .section-label .line {
    width: 50px;
    height: 2px;
    background: #ccc;
  }

  .section-label .label-text{
    margin: 0 10px;
    color: #f4b400;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1px;
  }

  .section-title{
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
  }

  .features-content{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
  }

  .features-column{
    width: 30%;
  }

  .feature-box{
    margin-bottom: 25px;
  }

  .icon-box {
    width: 50px;
    height: 50px;
    background: #f4b400;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    border-radius: 6px;
  }

  .icon-box i {
    color: #fff;
    font-size: 18px;
  }

  .icon-box img{
    width: 22px;
    height: 22px;
    object-fit: contain;
  }

  .feature-box h4{
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
  }

  .feature-box p {
    font-size: 14px;
    color: #666;
  }

  .feature-image img{
    max-width: 400px;
    height: 400px;
  }


    /* SOCIAL ICONS */
  .social-icons{
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
  }

  .social-icons a {
    width: 40px;
    height: 40px;
    background: #f4b400;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #111;
    font-size: 16px;
    transition: 0.3s;
  }

  .social-icons a:hover {
    background: #fff;
    color: #111;
  }





/* FOOTER */
.footer{background:#0e2a1f;color:#fff;padding:50px 0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}
.footer ul{list-style:none;padding:0}
.footer li{margin-bottom:8px;color:#ccc}
.social{display:flex;gap:10px;margin-top:10px}
.social div{width:30px;height:30px;background:#173c2e;border-radius:50%}
.footer-bottom{text-align:center;margin-top:30px;color:#aaa;font-size:13px}
.footer a{
  text-decoration: none;
  color: #bbb;
}
.footer a:hover{
  color:#f4b400;
}