/* =================================
   ElectroInstall - Light Premium Style
   ================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --yellow: #f5b800;
    --dark: #1b1b1b;
    --text: #333333;
    --gray: #666666;
    --light: #f6f7f8;
    --white: #ffffff;
    --border: #e7e7e7;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    color: var(--text);
    background: var(--white);
    line-height: 1.6;
}


/* HEADER */

.header {

    position: sticky;
    top: 0;
    z-index: 100;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 22px 8%;

    background: rgba(255,255,255,0.95);

    border-bottom: 1px solid var(--border);

    backdrop-filter: blur(10px);
}


.logo {

    font-size: 28px;

    font-weight: 800;

    color: var(--dark);

}


.logo::first-letter {

    color: var(--yellow);

}


nav {

    display: flex;

    gap: 35px;

}


nav a {

    color: var(--dark);

    text-decoration: none;

    font-weight: 500;

    transition: .3s;

}


nav a:hover {

    color: var(--yellow);

}


.phone-btn {

    background: var(--yellow);

    color: #111;

    padding: 12px 28px;

    border-radius: 30px;

    text-decoration: none;

    font-weight: 700;

}



/* HERO */


.hero {

    min-height: 85vh;

    display: flex;

    align-items: center;

    gap: 60px;

    padding: 80px 8%;

}


.hero-content {

    flex: 1;

}


.hero h1 {

    font-size: clamp(38px,5vw,64px);

    line-height: 1.1;

    color: var(--dark);

    margin-bottom: 25px;

}


.hero h1 span {

    color: var(--yellow);

    display:block;

}


.hero p {

    color: var(--gray);

    font-size:20px;

    max-width:550px;

    margin-bottom:35px;

}


.hero-buttons {

    display:flex;

    gap:20px;

}


.btn {

    padding:15px 35px;

    border-radius:40px;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}


.primary {

    background:var(--yellow);

    color:#111;

}


.secondary {

    border:2px solid var(--dark);

    color:var(--dark);

}


.btn:hover {

    transform:translateY(-4px);

}



/* HERO IMAGE */


.hero-image {

    flex:1;

}


.hero-image img {

    width:100%;

    height:500px;

    object-fit:cover;

    border-radius:35px;

    box-shadow:0 25px 60px rgba(0,0,0,.15);

}


.image-placeholder {

    height:500px;

    border-radius:35px;

    background:#eee;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#999;

}



/* SECTIONS */


.section {

    padding:90px 8%;

}


.section:nth-child(even) {

    background:var(--light);

}


.section h2 {

    text-align:center;

    font-size:42px;

    color:var(--dark);

    margin-bottom:45px;

}


.section > p {

    max-width:800px;

    margin:auto;

    text-align:center;

    color:var(--gray);

}



/* SERVICES */


.cards {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

    gap:25px;

}


.card {

    background:white;

    padding:35px;

    border-radius:25px;

    border:1px solid var(--border);

    box-shadow:0 10px 30px rgba(0,0,0,.05);

    transition:.3s;

}


.card:hover {

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.12);

    border-color:var(--yellow);

}


.card h3 {

    color:var(--dark);

    margin:15px 0;

}


.card p {

    color:var(--gray);

    text-align:left;

}



/* ADVANTAGES */


.advantages {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

}


.advantages div {

    background:white;

    padding:25px;

    border-radius:20px;

    box-shadow:0 10px 25px rgba(0,0,0,.05);

}



/* GALLERY */


.gallery {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

    gap:25px;

}


.gallery img {

    width:100%;

    height:250px;

    object-fit:cover;

    border-radius:25px;

    transition:.3s;

}


.gallery img:hover {

    transform:scale(1.03);

}



/* CONTACT */


.contact form {

    max-width:600px;

    margin:40px auto;

    display:flex;

    flex-direction:column;

    gap:15px;

}


input,
textarea {

    padding:16px;

    border:1px solid #ddd;

    border-radius:12px;

    font-size:16px;

}


textarea {

    min-height:150px;

}


button {

    padding:16px;

    background:var(--yellow);

    border:none;

    border-radius:30px;

    font-weight:700;

    cursor:pointer;

}



/* FOOTER */


footer {

    background:#111;

    color:white;

    text-align:center;

    padding:35px;

}



/* MOBILE */


@media(max-width:900px) {


.header {

    flex-direction:column;

    gap:20px;

}


nav {

    display:none;

}


.hero {

    flex-direction:column;

    text-align:center;

}


.hero-buttons {

    justify-content:center;

    flex-wrap:wrap;

}


.hero-image img,
.image-placeholder {

    height:320px;

}


.section h2 {

    font-size:32px;

}

}



/* LOGO */

.logo span {
    color: var(--yellow);
}

.logo small {
    display:block;
    font-size:11px;
    letter-spacing:2px;
    color:#777;
    font-weight:500;
}


/* HERO LABEL */

.hero-label {

    color: var(--yellow);

    font-weight:700;

    letter-spacing:2px;

    font-size:14px;

    margin-bottom:20px;

}


/* STATS */

.stats {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(200px,1fr));

    gap:25px;

    padding:50px 8%;

    background:#f6f7f8;

}


.stats div {

    background:white;

    padding:30px;

    text-align:center;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.06);

}


.stats strong {

    display:block;

    font-size:42px;

    color:#1b1b1b;

}


.stats span {

    color:#666;

}