/* Balima Group — original homepage design, rebuilt without WordPress/Elementor.
   Measurements follow the original Elementor page (post-649) and Blocksy theme defaults. */

@font-face { font-family: "Montserrat"; src: url("/assets/fonts/montserrat-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/assets/fonts/montserrat-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --p1: #1a5c8e;   /* brand blue (button hover, links) */
  --p3: #3a4f66;   /* body text */
  --p4: #192a3d;   /* dark: headings, buttons, dark panels */
  --p5: #e1e8ed;   /* light panel */
  --p6: #f2f5f7;
  --p8: #ffffff;
  --blue: #1a5c8e; /* Balima blue */
  --wa: #25d366;
  --box: 1140px;
  --pad: 20px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.65; color: var(--p3); background: #fff; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--p1); }
h1, h2, h3, h4, h5 { font-family: "Montserrat", sans-serif; color: var(--p4); font-weight: 700; line-height: 1.25; margin: 0; }
h2 { font-size: 40px; }
h3 { font-size: 30px; }
h4 { font-size: 22px; }
h5 { font-size: 20px; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--p1); outline-offset: 3px; }
.icon { width: 1em; height: 1em; fill: currentColor; flex: none; }
.box { width: 100%; max-width: var(--box); margin-inline: auto; padding-inline: var(--pad); }
.skip { position: absolute; left: 10px; top: -60px; z-index: 300; background: var(--p4); color: #fff; padding: 10px 16px; }
.skip:focus { top: 10px; }

/* Buttons (Elementor style: square corners) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--p4); color: #fff; text-decoration: none; border: 0; cursor: pointer;
  font: 600 18px/1 "Poppins", sans-serif; padding: 16px 30px; border-radius: 0;
  transition: background-color .3s, color .3s;
}
.btn:hover { background: var(--p1); color: #fff; }
.btn--sm { font-size: 13px; padding: 14px 25px; }

/* ---------------- Header (Blocksy-style) ---------------- */
.hdr { position: sticky; top: 0; z-index: 100; background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.06); transition: box-shadow .3s; }
.hdr.is-stuck { box-shadow: 0 10px 30px rgba(25,42,61,.08); }
.hdr .box { display: flex; align-items: center; justify-content: space-between; height: 76px; max-width: 1290px; }
.logo { display: block; width: 130px; color: #000; }
.logo svg { display: block; width: 100%; height: auto; }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav a { font-family: "Montserrat", sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--p3); text-decoration: none; transition: color .2s; }
.nav a:hover, .nav a.is-active { color: var(--p1); }
.burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: 0; color: var(--p4); font-size: 22px; cursor: pointer; }
.nav { position: fixed; inset: 0 0 0 auto; width: min(320px, 85vw); background: var(--p4); padding: 90px 30px 30px; transform: translateX(100%); transition: transform .35s ease; z-index: 150; }
.nav.is-open { transform: none; }
.nav li a { display: block; padding: 14px 0; color: #fff; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,.1); }
.nav__close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; background: none; border: 0; color: #fff; font-size: 22px; cursor: pointer; }
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.45); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; z-index: 140; }
.scrim.is-on { opacity: 1; visibility: visible; }
@media (min-width: 1000px) {
  .hdr .box { height: 120px; }
  .logo { width: 160px; }
  .burger, .nav__close { display: none; }
  .nav { position: static; transform: none; background: none; padding: 0; width: auto; }
  .nav ul { display: flex; gap: 34px; }
  .nav li a { display: inline; padding: 0; border: 0; color: var(--p3); font-size: 12px; }
  .scrim { display: none; }
}

/* ---------------- 1. Hero ---------------- */
.hero {
  background: url("/assets/img/roof-tiles-painted-blue-960.webp") top center / cover no-repeat;
  padding: 100px 15px 228px; display: flex; flex-direction: column; align-items: center; gap: 35px 20px; text-align: center;
}
.hero h1 { font-family: "Montserrat", sans-serif; font-size: 40px; font-weight: 800; color: #fff; margin: 0 0 10px; line-height: 1.15; text-shadow: 0 2px 18px rgba(0,0,0,.25); }
.hero h1 span { color: #000; text-shadow: 0 0 22px rgba(255,255,255,.75), 0 0 6px rgba(255,255,255,.5); }
@media (min-width: 1025px) {
  .hero { padding: 220px 15px 30px; min-height: 560px; }
  .hero h1 { font-size: 64px; }
}

/* ---------------- 2. Who we are ---------------- */
.intro { padding-top: 20px; margin: 50px 0 50px; text-align: center; }
.intro h2 { margin-bottom: 18px; }
.intro p { font-size: 14px; max-width: 900px; margin-inline: auto; }
@media (max-width: 767px) { .intro { margin: 40px 0 30px; } .intro h2 { font-size: 30px; } }

/* ---------------- 3. Services ---------------- */
.svc { display: flex; flex-direction: column; gap: 80px; margin-bottom: 80px; }
.svc__panel { background: var(--p5); padding: 60px 40px; text-align: center; }
.svc__panel h3 { margin-bottom: 20px; font-size: 25px; }
.svc__panel p { font-family: "Poppins", sans-serif; font-size: 18px; color: var(--p4); }
.svc__grid { display: flex; flex-wrap: wrap; justify-content: space-between; }
.ibox { width: 100%; margin-bottom: 50px; }
.ibox i { display: block; color: var(--blue); font-size: 40px; line-height: 1; margin-bottom: 16px; }
.ibox h5 { margin-bottom: 20px; }
.ibox p { font-size: 15px; }
@media (min-width: 600px) { .ibox { width: 44%; } }
@media (min-width: 1025px) {
  .svc { flex-direction: row; align-items: center; gap: 0; margin-bottom: 130px; }
  .svc > * { flex: 1 1 50%; }
  .svc__panel { padding: 90px 50px; text-align: left; }
  .svc__panel h3 { margin-bottom: 40px; font-size: 30px; }
  .svc__panel p { font-size: 20px; }
  .svc__grid { padding-left: 60px; }
  .ibox i { font-size: 55px; }
  .ibox:nth-last-child(-n+2) { margin-bottom: 0; }
}

/* ---------------- 4. Our works slider (HT Slider look) ---------------- */
.sec-title { text-align: center; margin-bottom: 30px; }
.sec-title h2 { font-size: 30px; }
@media (min-width: 1025px) { .sec-title { margin-bottom: 50px; } .sec-title h2 { font-size: 40px; } }
.works { position: relative; margin-bottom: 50px; }
@media (min-width: 1025px) { .works { margin-bottom: 120px; } }
.works__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.works__track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: start; margin: 0; position: relative; aspect-ratio: 4 / 3; background: var(--p6); }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide figcaption { position: absolute; left: 0; bottom: 0; background: rgba(25,42,61,.85); color: #fff; font-size: 14px; font-weight: 500; padding: 8px 14px; }
@media (min-width: 700px) { .slide { flex-basis: 50%; } }
@media (min-width: 1025px) { .slide { flex-basis: 33.3333%; aspect-ratio: 4 / 5; } }
.works__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 46px; height: 46px; border: 0; cursor: pointer;
  background: #fff !important; color: #1f2226; display: grid; place-items: center; font-size: 18px; box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.works__arrow:hover { color: #23252a; }
.works__arrow svg { width: 18px; height: 18px; }
.works__arrow--prev { left: 10px; }
.works__arrow--next { right: 10px; }
.works__dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.works__dots button { width: 12px; height: 12px; border: 0; padding: 0; border-radius: 0; background: #d8d6d6; cursor: pointer; }
.works__dots button:hover, .works__dots button[aria-current="true"] { background: #282828; }

/* ---------------- 5. Why choose us ---------------- */
.why { display: flex; flex-direction: column; align-items: center; gap: 80px; margin-bottom: 80px; }
.why__col { text-align: center; }
.why__col h4 { font-size: 20px; margin-bottom: 20px; }
.why__col p { margin-bottom: 30px; }
.why__col p:last-child { margin-bottom: 0; }
.why__img img { width: 100%; max-width: 420px; aspect-ratio: 3 / 4; object-fit: cover; }
@media (min-width: 1025px) {
  .why { flex-direction: row; gap: 30px; margin-bottom: 130px; }
  .why__col { flex: 1; text-align: left; }
  .why__col--r { text-align: right; }
  .why__col h4 { font-size: 22px; }
  .why__img { flex: 0 0 38%; }
}

/* ---------------- 6. Dark panel + photo ---------------- */
.feat { display: flex; flex-direction: column; }
.feat__dark { background: var(--p4); padding: 60px 30px 80px; }
.feat__dark h2 { color: #fff; margin-bottom: 25px; }
.feat__dark p { color: rgba(255,255,255,.78); margin-bottom: 30px; max-width: 520px; }
.feat__dark .btn { background: var(--p1); }
.feat__dark .btn:hover { background: #fff; color: var(--p4); }
.feat__img { min-height: 320px; background: url("/assets/img/building-brickwork-wall-960.webp") center / cover no-repeat; }
@media (min-width: 1025px) {
  .feat { flex-direction: row; }
  .feat > * { flex: 1 1 50%; }
  .feat__dark { padding: 100px 50px 200px; }
  .feat__dark h2 { margin-bottom: 40px; }
}

/* ---------------- 7. Counters ---------------- */
.counts { display: flex; flex-direction: column; margin-bottom: 80px; }
.count { padding: 35px; display: flex; flex-direction: column; justify-content: center; }
.count b { display: block; font-family: "Montserrat", sans-serif; font-weight: 800; color: #fff; font-size: 50px; line-height: 1.1; }
.count span { color: #ffffffab; font-size: 16px; font-weight: 600; }
.count--dark { background: var(--p4); }
.count--dark b { font-size: 80px; }
.count--dark span { font-size: 18px; }
.count--blue { background: var(--blue); }
@media (min-width: 700px) { .counts { flex-direction: row; } .count--dark { flex: 2; } .count--blue { flex: 1; } }
@media (min-width: 1025px) { .counts { margin-bottom: 130px; } }

/* ---------------- 8. Blue CTA band ---------------- */
.band { background: var(--blue); padding: 65px 0; }
.band .box { display: flex; flex-direction: column; gap: 30px; align-items: flex-start; }
.band h2 { color: #fff; font-size: 34px; }
.band .btn { background: var(--p4); }
.band .btn:hover { background: #fff; color: var(--p4); }
@media (min-width: 1025px) { .band .box { flex-direction: row; align-items: center; justify-content: space-between; gap: 100px; } .band h2 { font-size: 50px; } }

/* ---------------- 9. Contact ---------------- */
.contact { background: url("/assets/img/contact-bathroom-960.webp") center / cover no-repeat; padding: 130px 0; }
.contact__card { background: #fff; padding: 50px 25px 40px; max-width: 640px; }
.contact__card h2 { margin-bottom: 20px; }
.contact__card > p { font-size: 18px; color: var(--p4); margin-bottom: 30px; }
.cinfo { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 14px; }
.cinfo li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; }
.cinfo i { width: 40px; height: 40px; background: var(--blue); color: #fff; display: grid; place-items: center; font-size: 16px; }
.cinfo span { font-size: 15px; line-height: 1.5; }
.cinfo strong { color: var(--p4); }
.cinfo a { color: var(--p4); text-decoration: none; }
.cinfo a:hover { color: var(--p1); }
@media (min-width: 1025px) { .contact__card { padding: 80px 100px 55px; } .contact__card > p { font-size: 20px; } }

.form { display: grid; gap: 14px; }
.form__row { display: grid; gap: 14px; }
@media (min-width: 560px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form label { display: block; font-size: 14px; font-weight: 600; color: var(--p4); margin-bottom: 6px; }
.form input, .form select, .form textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; font-size: 15px; color: var(--p4);
  border: 1px solid #cfd8df; border-radius: 0; background: #fff; transition: border-color .2s;
}
.form textarea { min-height: 120px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--p1); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .btn { justify-self: start; }
.form__status { display: none; padding: 12px 14px; font-size: 14px; }
.form__status.is-ok { display: block; background: #e6f4ea; color: #145a2c; }
.form__status.is-err { display: block; background: #fdecea; color: #8a1c13; }

/* ---------------- Footer (Blocksy-style) ---------------- */
.ftr { background: var(--p4); color: rgba(255,255,255,.75); font-size: 14px; }
.ftr__top { display: grid; gap: 30px; padding: 60px 0 40px; }
.ftr .logo { color: #fff; width: 150px; }
.ftr h3 { color: #fff; font-size: 16px; margin-bottom: 14px; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ftr a { color: #fff; text-decoration: none; }
.ftr a:hover { color: #9cc6e8; }
.ftr__bot { border-top: 1px solid rgba(255,255,255,.1); padding: 20px 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 13px; }
@media (min-width: 800px) { .ftr__top { grid-template-columns: 1.3fr 1fr 1fr; } }

/* Floating WhatsApp + back to top */
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: inline-flex; align-items: center; gap: 8px; background: var(--wa); color: #000; text-decoration: none; font-weight: 600; font-size: 15px; padding: 12px 18px; border-radius: 40px; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.wa-float .icon { font-size: 22px; }
.wa-float:hover { color: #000; filter: brightness(.95); }

/* Entrance animations (like Elementor's fade-in-up) */
@media (prefers-reduced-motion: no-preference) {
  .js .anim { opacity: 0; transform: translateY(40px); transition: opacity .9s ease, transform .9s ease; transition-delay: var(--d, 0s); }
  .js .anim.in { opacity: 1; transform: none; }
  .js .hero h1, .js .hero .btn { animation: heroin 1s ease both; }
  .js .hero .btn { animation-delay: .25s; }
  @keyframes heroin { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
}