/* ==================================================
   LEEDS ELECTRICAL LANDING PAGE
   Main Stylesheet
================================================== */


/* ================= ROOT ================= */


:root {

    --primary: #0057B8;
    --primary-dark: #003d82;
    --secondary: #FFC107;
    --success: #25D366;

    --dark: #111827;
    --text: #374151;
    --light: #f8fafc;
    --white: #ffffff;

    --border: #e5e7eb;

    --shadow:
    0 10px 30px rgba(0,0,0,0.08);

    --radius: 12px;

    --transition:
    all .3s ease;

}



/* ================= RESET ================= */


* {

    margin:0;
    padding:0;
    box-sizing:border-box;

}



html {

    scroll-behavior:smooth;

}



body {

    font-family:'Inter', sans-serif;

    color:var(--text);

    line-height:1.7;

    background:#fff;

}



img {

    max-width:100%;

    display:block;

}



a {

    text-decoration:none;

    color:inherit;

}



ul {

    list-style:none;

}



button,
input,
textarea,
select {

    font-family:inherit;

}







/* ================= CONTAINER ================= */


.container {

    width:90%;

    max-width:1200px;

    margin:auto;

}







/* ================= SECTION TITLE ================= */


.section-title {

    text-align:center;

    margin-bottom:50px;

}



.section-title h2 {

    font-family:'Poppins',sans-serif;

    font-size:42px;

    font-weight:800;

    color:var(--dark);

    margin-bottom:15px;

}



.section-title p {

    font-size:18px;

    color:#6b7280;

}









/* ================= HEADER ================= */


.header {

    position:sticky;

    top:0;

    z-index:1000;

    background:#fff;

    box-shadow:
    0 3px 15px rgba(0,0,0,.08);

}



.header-container {

    height:85px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.logo a {

    font-family:'Poppins';

    font-size:24px;

    font-weight:800;

    color:var(--dark);

}



.logo span {

    color:var(--primary);

}






.navigation ul {

    display:flex;

    gap:35px;

}



.navigation a {

    font-weight:600;

    color:var(--dark);

    transition:var(--transition);

}



.navigation a:hover {

    color:var(--primary);

}







.header-actions .phone-button {


    background:var(--primary);

    color:#fff;

    padding:13px 25px;

    border-radius:50px;

    font-weight:700;

}



.header-actions .phone-button:hover {

    background:var(--primary-dark);

}







.mobile-menu {

    display:none;

    font-size:28px;

    cursor:pointer;

}









/* ================= BUTTONS ================= */



.btn {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:15px 32px;

    border-radius:50px;

    font-weight:700;

    transition:var(--transition);

    cursor:pointer;

    border:none;

}



.btn-primary {

    background:var(--primary);

    color:white;

}



.btn-primary:hover {

    background:var(--primary-dark);

    transform:translateY(-3px);

}




.btn-secondary {


    background:var(--secondary);

    color:#111;

}



.btn-secondary:hover {

    transform:translateY(-3px);

}



.whatsapp {

    background:var(--success);

    color:#fff;

}



.whatsapp:hover {

    background:#1da851;

    transform:translateY(-3px);

}









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


.hero {

    padding:80px 0;

    background:

    linear-gradient(
    135deg,
    #f8fafc,
    #ffffff
    );

}




.hero-container {

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:60px;

    align-items:center;

}




.badge {

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#e8f2ff;

    color:var(--primary);

    padding:8px 18px;

    border-radius:50px;

    font-weight:600;

    margin-bottom:25px;

}



.hero-content h1 {


    font-family:'Poppins';

    font-size:60px;

    line-height:1.15;

    color:var(--dark);

    margin-bottom:25px;

}



.hero-content p {


    font-size:20px;

    color:#4b5563;

    margin-bottom:35px;

    max-width:550px;

}






.hero-buttons {


    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-bottom:40px;

}







.hero-features {


    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}



.feature-item {


    display:flex;

    align-items:center;

    gap:12px;

    font-weight:600;

    color:var(--dark);

}



.feature-item i {

    color:var(--primary);

    font-size:20px;

}







.hero-image {

    position:relative;

}



.hero-image img {


    border-radius:25px;

    box-shadow:var(--shadow);

}




.experience-box {


    position:absolute;

    bottom:25px;

    left:-25px;

    background:white;

    padding:20px 30px;

    border-radius:15px;

    box-shadow:var(--shadow);

    text-align:center;

}



.experience-box strong {


    display:block;

    font-size:35px;

    color:var(--primary);

    font-family:'Poppins';

}



.experience-box span {

    font-weight:600;

}

/* ==================================================
   INTRO SECTION
================================================== */


.intro {

    padding:100px 0;

}


.intro-container {

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}


.intro-image img {

    border-radius:20px;

    box-shadow:var(--shadow);

}



.intro-content h2 {

    font-family:'Poppins';

    font-size:42px;

    color:var(--dark);

    margin-bottom:25px;

}



.intro-content p {

    margin-bottom:20px;

    font-size:18px;

}









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


.services {

    padding:100px 0;

    background:var(--light);

}



.services-grid {


    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;


}




.service-card {


    background:#fff;

    padding:35px 25px;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    text-align:center;

    transition:var(--transition);

}



.service-card:hover {


    transform:translateY(-8px);

}



.service-card i {


    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 20px;

    background:#e8f2ff;

    color:var(--primary);

    border-radius:50%;

    font-size:30px;

}



.service-card h3 {


    font-family:'Poppins';

    color:var(--dark);

    margin-bottom:15px;

    font-size:20px;

}



.service-card p {


    font-size:15px;

}









/* ==================================================
   WHY CHOOSE US
================================================== */


.why-us {

    padding:100px 0;

}



.why-grid {


    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}



.why-card {


    padding:35px;

    text-align:center;

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

    border-radius:var(--radius);

    transition:var(--transition);

}



.why-card:hover {


    box-shadow:var(--shadow);

    transform:translateY(-5px);

}



.why-card i {


    font-size:40px;

    color:var(--primary);

    margin-bottom:20px;

}



.why-card h3 {


    font-family:'Poppins';

    color:var(--dark);

    margin-bottom:12px;

}








/* ==================================================
   GALLERY
================================================== */


.gallery {


    padding:100px 0;

    background:var(--light);

}




.gallery-grid {


    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}



.gallery-item {


    overflow:hidden;

    border-radius:15px;

    height:280px;

}



.gallery-item img {


    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s ease;

}



.gallery-item:hover img {


    transform:scale(1.08);

}








/* ==================================================
   PROCESS
================================================== */


.process {


    padding:100px 0;

}



.process-grid {


    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}



.process-step {


    text-align:center;

}



.number {


    width:65px;

    height:65px;

    background:var(--primary);

    color:white;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:25px;

    font-weight:800;

    margin:0 auto 20px;

}



.process-step h3 {


    font-family:'Poppins';

    color:var(--dark);

    margin-bottom:10px;

}








/* ==================================================
   REVIEWS
================================================== */


.reviews {


    padding:100px 0;

    background:var(--light);

}



.reviews-grid {


    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}



.review-card {


    background:white;

    padding:35px;

    border-radius:15px;

    box-shadow:var(--shadow);

}



.stars {


    color:#fbbf24;

    font-size:25px;

    margin-bottom:15px;

}



.review-card h4 {


    margin-top:20px;

    color:var(--dark);

}








/* ==================================================
   FAQ
================================================== */


.faq {


    padding:100px 0;

}



.faq-container {


    max-width:850px;

    margin:auto;

}



.faq-item {


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

}



.faq-question {


    width:100%;

    background:none;

    border:none;

    padding:25px 0;

    display:flex;

    justify-content:space-between;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    color:var(--dark);

}



.faq-question span {


    font-size:25px;

}



.faq-answer {


    display:none;

    padding-bottom:20px;

    color:#6b7280;

}

 /* ==================================================
   AREAS COVER
================================================== */


.areas {

    padding:100px 0;

    background:#f8fafc;

}



.areas-list {


    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:15px;

}



.areas-list span {


    background:white;

    padding:12px 25px;

    border-radius:50px;

    font-weight:600;

    box-shadow:0 5px 15px rgba(0,0,0,.06);

    color:var(--dark);

}









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


.contact-cta {


    padding:100px 0;

}



.cta-box {


    background:

    linear-gradient(
    135deg,
    var(--primary),
    var(--primary-dark)
    );

    border-radius:25px;

    padding:60px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    color:white;

}



.cta-content h2 {


    font-family:'Poppins';

    font-size:42px;

    margin-bottom:20px;

}



.cta-content p {


    font-size:18px;

    margin-bottom:30px;

}



.cta-buttons {


    display:flex;

    gap:15px;

    flex-wrap:wrap;

}







/* ================= FORM ================= */


.quote-form {


    background:white;

    padding:35px;

    border-radius:20px;

    color:var(--dark);

}



.quote-form h3 {


    font-family:'Poppins';

    font-size:28px;

    margin-bottom:25px;

}



.form-group {


    margin-bottom:15px;

}



.form-group input,
.form-group textarea,
.form-group select {


    width:100%;

    padding:15px;

    border:1px solid #ddd;

    border-radius:10px;

    outline:none;

    font-size:16px;

}



.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {


    border-color:var(--primary);

}



.form-group textarea {


    height:120px;

    resize:none;

}



.quote-form button {


    width:100%;

}









/* ==================================================
   FOOTER
================================================== */


.footer {


    background:#111827;

    color:white;

    padding:70px 0 20px;

}



.footer-grid {


    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:40px;

}



.footer h3,
.footer h4 {


    font-family:'Poppins';

    margin-bottom:20px;

}



.footer p {


    color:#cbd5e1;

}



.footer ul li {


    margin-bottom:12px;

    color:#cbd5e1;

}



.footer a:hover {


    color:white;

}



.footer-bottom {


    border-top:1px solid rgba(255,255,255,.15);

    margin-top:40px;

    padding-top:20px;

    text-align:center;

    color:#94a3b8;

}









/* ==================================================
   FLOATING BUTTONS
================================================== */



.floating-whatsapp,
.floating-call {


    position:fixed;

    right:25px;

    width:60px;

    height:60px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:white;

    font-size:28px;

    z-index:999;

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

}



.floating-whatsapp {


    bottom:100px;

    background:#25D366;

}



.floating-call {


    bottom:30px;

    background:var(--primary);

}







/* ==================================================
   ANIMATIONS
================================================== */


@keyframes fadeUp {


from {

opacity:0;

transform:translateY(30px);

}


to {


opacity:1;

transform:translateY(0);


}

}



.hero-content,
.hero-image {


animation:fadeUp .8s ease forwards;

}








/* ==================================================
   HOVER EFFECTS
================================================== */


.service-card,
.why-card,
.review-card {


cursor:pointer;

}



.service-card:hover i,
.why-card:hover i {


transform:scale(1.1);

transition:.3s;

}





/* ==================================================
   END MAIN CSS
================================================== */