/* =========================
   GLOBAL RESET & BASE
========================= */
*{box-sizing:border-box;}
body{margin:0;font-family:'Roboto',sans-serif;color:#333;background:#fff;}

a{color:#ff9900;text-decoration:none;}
a:hover{text-decoration:underline;}

:root{
 --primary-orange:#ff9900;
}

/* =========================
   HEADER
========================= */
header{
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding:18px 40px;
 background:white;
 box-shadow:0 2px 4px rgba(0,0,0,.08);
 position:sticky;
 top:0;
 z-index:1000;
}

.logo-text{
 font-family:'Montserrat',sans-serif;
 font-size:2rem;
 font-weight:900;
 color:var(--primary-orange);
}

nav a{
 margin-left:24px;
 font-weight:600;
}

/* Hamburger hidden on desktop */
.menu-toggle{display:none;font-size:1.6rem;background:none;border:none}

/* =========================
   HERO
========================= */

.hero{
 position:relative;
 width:100%;
 height:80vh;
}

.hero img{
 width:100%;
 height:100%;
 object-fit:cover;
}

.hero-text-box{
 position:absolute;
 top:50%;
 left:50%;
 transform:translate(-50%,-50%);
 background:rgba(0,0,0,.45);
 color:white;
 padding:20px 26px;
 max-width:90%;
 border-radius:10px;
 text-align:center;
}

.hero-text-box h2{
 font-family:'Montserrat',sans-serif;
 font-size:2rem;
 margin:0 0 10px;
}

/* =========================
 SECTIONS
========================= */

.section-title{
 font-family:'Montserrat',sans-serif;
 text-align:center;
 font-size:1.9rem;
 margin:60px 0 15px;
 color:var(--primary-orange);
}

.services-intro,.clients-text{
 max-width:900px;
 margin:0 auto 30px;
 padding:0 20px;
 text-align:center;
}

/* =========================
 SERVICES GRID
========================= */

.services-container{
 max-width:1200px;
 margin:auto;
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
 gap:30px;
 padding:20px 40px 80px;
}

.service-box{
 background:#f9f9f9;
 padding:18px;
 border-radius:10px;
 text-align:center;
 max-width:330px;
 margin:auto;
 box-shadow:0 4px 10px rgba(0,0,0,.08);
 transition:.3s ease;
}

.service-box:hover{
 transform:translateY(-8px);
 box-shadow:0 10px 20px rgba(0,0,0,.15);
}

.service-box img{
 width:100%;
 height:170px;
 object-fit:cover;
 border-radius:8px;
 margin-bottom:12px;
}

.service-box h3{
 margin-bottom:6px;
 font-family:'Montserrat',sans-serif;
 color:var(--primary-orange);
}

/* =========================
 CLIENTS
========================= */

.clients-section{text-align:center;padding:20px 40px;}

.client-logos{
 display:flex;
 justify-content:center;
 gap:40px;
 flex-wrap:wrap;
}

.client-logos img{
 height:65px;
 width:auto;
}

/* =========================
 CONTACT
========================= */

.contact-section{
 padding:30px 20px 110px;
 text-align:center;
}

form{
 max-width:500px;
 margin:auto;
 display:flex;
 flex-direction:column;
 gap:14px;
}

input,textarea{
 padding:10px;
 border-radius:6px;
 border:1px solid #ccc;
}

button{
 background:var(--primary-orange);
 color:white;
 border:none;
 padding:12px;
 border-radius:6px;
 font-size:1rem;
 cursor:pointer;
}

/* =========================
 WHATSAPP
========================= */

.whatsapp-float{
 position:fixed;
 bottom:80px;
 right:20px;
 width:55px;
 height:55px;
 z-index:999;
}
.whatsapp-float img{width:100%;height:100%;}

/* =========================
 MOBILE CTA BAR
========================= */

.mobile-cta-bar{
 display:none;
}

/* =========================
 MOBILE
========================= */

@media(max-width:600px){

 header{padding:12px 16px;}
 .logo-text{font-size:1.6rem;}

 /* Hamburger menu */
 .menu-toggle{display:block;}

 nav{
  display:none;
  position:absolute;
  background:white;
  left:0;right:0;
  top:60px;
  text-align:center;
  padding:10px 0;
  box-shadow:0 3px 12px rgba(0,0,0,.12);
 }

 header.nav-open nav{
  display:flex;
  justify-content:center;
  gap:20px;
 }

 nav a{
  color:black;
  font-weight:700;
  padding:6px 14px;
  border-radius:20px;
 }

 .hero{
  height:auto;
  min-height:65vh;
 }

 .hero-text-box{
  position:relative;
  inset:auto;
  transform:none;
  margin:10vh auto 0;
  padding:14px 16px;
 }

 .hero-text-box h2{
  font-size:1.25rem;
 }

 .services-container{
  padding:20px 16px 80px;
 }

 .client-logos img{
  height:50px;
 }

 .mobile-cta-bar{
  display:flex;
  position:fixed;
  left:0;right:0;bottom:0;
  background:black;
  padding:8px;
  justify-content:space-around;
  z-index:998;
 }

 .mobile-cta-bar a{
  color:white;
  background:#222;
  padding:10px;
  border-radius:20px;
  width:45%;
  text-align:center;
  font-weight:700;
 }

 .mobile-cta-bar a:last-child{
  background:var(--primary-orange);
 }
}