/*
Theme Name: Zivah Halal Concrete
Theme URI: https://zivahconcrete.com
Description: Professional concrete website
Version: 1.0
Author: Zivah Halal Concrete
License: GPL v2 or later
*/

:root {
    --blue: #0071e3;
    --gray1: #ffffff;
    --gray2: #f5f5f7;
    --gray4: #e5e5e7;
    --gray7: #555555;
    --gray8: #1d1d1f;
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; color:var(--gray8); background:var(--gray1); line-height:1.6; }
html { scroll-behavior:smooth; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }

/* Header */
header { position:sticky; top:0; z-index:1000; background:rgba(255,255,255,0.95); backdrop-filter:blur(20px); border-bottom:1px solid var(--gray4); }
.header-container { max-width:1440px; margin:0 auto; padding:0 20px; height:56px; display:flex; justify-content:space-between; align-items:center; }
.logo a { font-size:1.25rem; font-weight:700; color:var(--gray8); }
nav { display:flex; align-items:center; gap:30px; }
nav a { font-weight:500; font-size:1rem; color:var(--gray8); padding:8px 0; }
nav a:hover { color:var(--blue); }
.call-btn { background:var(--blue); color:#fff; padding:8px 16px; border-radius:980px; font-weight:600; cursor:pointer; white-space:nowrap; display:inline-block; }
.call-btn:hover { background:#0077ed; }

/* Mobile menu */
.mobile-menu-toggle { display:none; flex-direction:column; justify-content:space-between; width:24px; height:18px; background:none; border:none; cursor:pointer; padding:0; }
.mobile-menu-toggle span { display:block; height:3px; width:100%; background:var(--gray8); border-radius:2px; transition: all 0.3s ease; }
.mobile-menu-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(4px,4px); }
.mobile-menu-toggle.open span:nth-child(2) { opacity:0; }
.mobile-menu-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(4px,-4px); }

/* Hero */
.hero { background: linear-gradient(180deg, var(--gray1) 0%, var(--gray2) 100%); padding:120px 20px; text-align:center; min-height:600px; display:flex; align-items:center; justify-content:center; }
.hero-content { max-width:900px; }
h1 { font-size:4rem; font-weight:700; margin-bottom:20px; line-height:1.1; }
h1 span { color: var(--blue); }
.hero-sub { font-size:1.4rem; color:var(--gray7); margin-bottom:40px; }
.hero-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn { padding:10px 20px; border:none; border-radius:980px; font-weight:600; cursor:pointer; font-size:0.95rem; display:inline-block; }
.btn-primary { background:var(--blue); color:#fff; }
.btn-primary:hover { background:#0077ed; }
.btn-secondary { background:transparent; color:var(--blue); border:1px solid var(--blue); }
.btn-secondary:hover { background:var(--gray2); }

/* Sections */
.section { padding:100px 20px; max-width:1280px; margin:0 auto; }
.section.light { background:var(--gray2); }
.section h2 { font-size:3.5rem; font-weight:700; text-align:center; margin-bottom:60px; line-height:1.1; }
.section h2 span { color: var(--blue); }

/* Features grid */
.features { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:30px; }
.feature { background:var(--gray1); padding:40px 30px; text-align:center; border:1px solid var(--gray4); border-radius:16px; transition:all 0.3s ease; }
.feature:hover { transform:translateY(-5px); box-shadow:0 10px 30px rgba(0,0,0,0.1); border-color:var(--blue); }
.feature-icon { font-size:3rem; margin-bottom:15px; }
.feature h3 { font-size:1.3rem; margin-bottom:12px; font-weight:600; }
.feature p { color:var(--gray7); font-size:0.95rem; }

/* Forms */
.form-group { margin-bottom:20px; }
.form-group label { display:block; margin-bottom:6px; font-weight:500; font-size:0.9rem; }
.form-group input, .form-group textarea { width:100%; padding:10px; border:1px solid var(--gray4); border-radius:6px; font-family:inherit; font-size:0.9rem; }
.form-submit { width:100%; padding:12px; background:var(--blue); color:#fff; border:none; border-radius:6px; font-weight:600; cursor:pointer; font-size:0.95rem; }
.form-submit:hover { background:#0077ed; }

/* Footer */
footer { background:var(--gray8); color:var(--gray2); padding:50px 20px 30px; }
.footer-container { max-width:1280px; margin:0 auto; }
.footer-sections { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:40px; margin-bottom:30px; text-align:left; }
.footer-section h4 { font-size:0.85rem; font-weight:600; text-transform:uppercase; margin-bottom:15px; letter-spacing:0.5px; }
.footer-section a { color:#a1a1a6; font-size:0.85rem; line-height:1.8; }
.footer-section a:hover { color:var(--gray2); }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.1); padding-top:20px; text-align:center; font-size:0.75rem; color:#a1a1a6; }

/* Responsive */
@media(max-width:768px){
    h1{ font-size:2.5rem; }
    .section h2{ font-size:2rem; }
    .hero-sub{ font-size:1.1rem; }
    nav a{ display:none; }
    .call-btn{ font-size:0.85rem; padding:6px 12px; }
    .hero{ padding:80px 20px; }
    .section{ padding:60px 20px; }
    .hero-buttons{ flex-direction:column; }
    .btn{ width:100%; }
    .features{ grid-template-columns:1fr; }
    header nav{ position:absolute; top:56px; left:0; width:100%; background:rgba(255,255,255,0.95); flex-direction:column; gap:0; display:none; border-top:1px solid var(--gray4); padding:10px 0; }
    header nav.active{ display:flex; }
    header nav a, .call-btn{ padding:12px 20px; width:100%; text-align:center; }
    .mobile-menu-toggle{ display:flex; }
}
@media(max-width:480px){
    h1{ font-size:1.8rem; }
    .section h2{ font-size:1.5rem; }
    .hero-sub{ font-size:1rem; }
}