:root {
    --blue:#24346D;
    --light:#1E73A8;
    --green:#4CAF50;
}

body { margin:0; font-family:Arial; }

/* HEADER */
.header {
    position:fixed;
    width:100%;
    background:white;
    display:flex;
    justify-content:space-between;
    padding:15px 40px;
    z-index:1000;
}

.logo { height:50px; }

nav a {
    margin-left:20px;
    color:var(--blue);
    text-decoration:none;
}

/* HERO */
.hero {
    height:100vh;
    background:url('images/hero.jpg') center/cover;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
}

.overlay {
    position:absolute;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5);
}

.hero-content {
    color:white;
    text-align:center;
    z-index:2;
}

.btn {
    background:var(--light);
    padding:12px 25px;
    color:white;
}

/* SERVICES */
.services {
    padding:80px 40px;
    text-align:center;
}

.cards {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:20px;
}

.card {
    box-shadow:0 5px 15px rgba(0,0,0,0.1);
}

.card img {
    width:100%;
    height:200px;
    object-fit:cover;
}

/* PROJECTS */
.projects {
    padding:80px 40px;
    background:#f5f7fa;
    text-align:center;
}

.project-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:20px;
}

.project-grid img {
    width:100%;
    height:200px;
    object-fit:cover;
}

/* STATS */
.stats {
    display:flex;
    justify-content:space-around;
    background:var(--blue);
    color:white;
    padding:40px;
}

/* CONTACT */
.contact {
    padding:80px 40px;
    text-align:center;
}

form {
    max-width:400px;
    margin:auto;
    display:flex;
    flex-direction:column;
}

input, textarea {
    margin:10px 0;
    padding:10px;
}

button {
    background:var(--green);
    color:white;
    padding:10px;
}

/* FLOAT BUTTONS */
.whatsapp, .call {
    position:fixed;
    right:20px;
    padding:15px;
    color:white;
    border-radius:50%;
    text-decoration:none;
}

.whatsapp { bottom:20px; background:#25D366; }
.call { bottom:80px; background:var(--blue); }

/* FOOTER */
footer {
    background:var(--blue);
    color:white;
    text-align:center;
    padding:20px;
}