/* ======================================
BEN BURNS ELECTRIC
GLOBAL STYLESHEET
====================================== */


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

:root {

    --primary:#0A0A0A;

    --secondary:#111111;

    --card:#171717;

    --accent:#F5A623;

    --accent-dark:#D88C00;

    --white:#FFFFFF;

    --light:#F5F5F5;

    --gray:#A5A5A5;

    --border:rgba(255,255,255,0.12);


    --container:1200px;


    --transition:
    all .3s ease;


    --shadow:
    0 20px 50px rgba(0,0,0,.25);


}







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


*,
*::before,
*::after {

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html {

    scroll-behavior:smooth;

}



body {

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


    background:
    var(--primary);


    color:
    var(--white);


    line-height:1.6;


    overflow-x:hidden;

}



img {

    max-width:100%;

    display:block;

}



a {

    color:inherit;

    text-decoration:none;

}



button {

    font-family:inherit;

    cursor:pointer;

}



ul {

    list-style:none;

}



section {

    position:relative;

}







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


.container {

    width:90%;

    max-width:
    var(--container);


    margin:
    0 auto;

}







/* ======================================
TYPOGRAPHY
====================================== */


h1,
h2,
h3,
h4 {


    font-weight:800;

    line-height:1.15;

}



h1 {


    font-size:
    clamp(2.8rem,5vw,5rem);


}



h2 {


    font-size:
    clamp(2rem,4vw,3.2rem);


    margin-bottom:25px;


}



h3 {


    font-size:1.4rem;


}



p {


    color:
    #D0D0D0;


    font-size:1rem;


}







/* ======================================
SECTION SPACING
====================================== */


section {


    padding:
    100px 0;


}



.section-label {


    color:
    var(--accent);


    text-transform:
    uppercase;


    letter-spacing:
    2px;


    font-size:
    .85rem;


    font-weight:
    700;


    margin-bottom:
    15px;


}



.section-heading {


    max-width:
    750px;


    margin-bottom:
    60px;


}







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


.btn {


    display:
    inline-flex;


    align-items:center;


    justify-content:center;


    padding:
    15px 35px;


    border-radius:
    4px;


    font-weight:
    700;


    transition:
    var(--transition);


}



.btn.primary {


    background:
    var(--accent);


    color:
    #000;


}



.btn.primary:hover {


    background:
    var(--accent-dark);


    transform:
    translateY(-3px);


}



.btn.secondary {


    border:
    1px solid rgba(255,255,255,.4);


    color:
    white;


}



.btn.secondary:hover {


    background:
    white;


    color:
    black;


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


.header {

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    padding:25px 0;

    transition:
    var(--transition);

}



.header.scrolled {

    background:
    rgba(10,10,10,.95);


    backdrop-filter:
    blur(12px);


    padding:
    15px 0;


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

}



.nav-container {

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.logo img {

    width:190px;

}



.nav-menu {

    display:flex;

    align-items:center;

    gap:35px;

}



.nav-menu a {

    font-size:.95rem;

    font-weight:600;

    color:white;

    transition:
    var(--transition);

}



.nav-menu a:hover,

.nav-menu .active {

    color:
    var(--accent);

}



.nav-button {

    background:
    var(--accent);

    color:
    #000 !important;

    padding:
    12px 25px;

    border-radius:4px;

}



.nav-button:hover {

    background:
    var(--accent-dark);

}







/* ======================================
MOBILE MENU BUTTON
====================================== */


.mobile-menu {

    display:none;

    background:none;

    border:none;

}



.mobile-menu span {

    display:block;

    width:30px;

    height:3px;

    background:white;

    margin:6px 0;

    transition:
    var(--transition);

}








/* ======================================
CARDS
====================================== */


.card,
.service-card,
.project-card,
.feature,
.industry-card {


    background:
    var(--card);


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


    border-radius:12px;


    overflow:hidden;


    transition:
    var(--transition);


}



.card:hover,
.service-card:hover,
.project-card:hover,
.feature:hover,
.industry-card:hover {


    transform:
    translateY(-8px);


    box-shadow:
    var(--shadow);


    border-color:
    rgba(245,166,35,.5);


}







/* ======================================
SERVICE CARDS
====================================== */


.service-card {


    padding:
    35px;


}



.service-card h3 {


    margin-bottom:
    15px;


}



.service-card a {


    display:inline-block;


    margin-top:
    20px;


    color:
    var(--accent);


    font-weight:
    700;


}







/* ======================================
PROJECT CARDS
====================================== */


.project-card img {


    width:100%;


    height:260px;


    object-fit:cover;


}



.project-content {


    padding:
    30px;


}



.project-content span {


    color:
    var(--accent);


    font-size:
    .85rem;


    text-transform:
    uppercase;


    font-weight:
    700;


}



.project-content h3 {


    margin:
    15px 0;


}








/* ======================================
FORMS
====================================== */


.form-group {


    margin-bottom:
    20px;


}



label {


    display:block;


    margin-bottom:
    8px;


    font-weight:
    600;


}



input,
textarea,
select {


    width:100%;


    padding:
    15px;


    background:
    #111;


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


    color:white;


    border-radius:5px;


    font-size:1rem;


}



input:focus,
textarea:focus,
select:focus {


    outline:none;


    border-color:
    var(--accent);


}



textarea {


    min-height:
    150px;


    resize:
    vertical;


}








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


.footer {


    background:
    #050505;


    padding:
    80px 0 30px;


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


}



.footer-grid {


    display:grid;


    grid-template-columns:
    2fr 1fr 1fr 1fr;


    gap:
    50px;


}



.footer-brand img {


    width:
    220px;


    margin-bottom:
    25px;


}



.footer h3 {


    color:
    var(--accent);


    margin-bottom:
    20px;


    font-size:
    1.1rem;


}



.footer-links a {


    display:block;


    margin-bottom:
    12px;


    color:
    #ccc;


    transition:
    var(--transition);


}



.footer-links a:hover {


    color:
    white;


}



.footer-bottom {


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


    margin-top:
    60px;


    padding-top:
    25px;


    text-align:center;


    color:
    #888;


}







/* ======================================
UTILITY CLASSES
====================================== */


.text-center {

    text-align:center;

}



.center-button {


    display:flex;

    justify-content:center;

    margin-top:
    40px;

}



.two-column {


    display:grid;


    grid-template-columns:
    1fr 1fr;


    gap:
    60px;


    align-items:center;


}



.hidden {


    opacity:0;


    transform:
    translateY(30px);


}



.show {


    opacity:1;


    transform:
    translateY(0);


    transition:
    .7s ease;


}
/* ======================================
RESPONSIVE FOUNDATION
====================================== */


/* Large Tablets */

@media (max-width:1100px){


    .footer-grid {

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

    }


    .nav-menu {

        gap:20px;

    }


    .two-column {

        gap:40px;

    }


}






/* Tablets */

@media (max-width:900px){


    section {

        padding:
        75px 0;

    }



    .nav-menu {


        position:fixed;


        top:0;


        right:-100%;


        width:300px;


        height:100vh;


        background:
        #080808;


        flex-direction:column;


        align-items:flex-start;


        justify-content:center;


        padding:
        40px;


        transition:
        .4s ease;


    }




    .nav-menu.active {


        right:0;


    }





    .mobile-menu {


        display:block;


        z-index:1100;


    }






    .two-column {


        grid-template-columns:
        1fr;


    }






    .footer-grid {


        grid-template-columns:
        1fr;


    }



}








/* Mobile */

@media(max-width:600px){



    .container {


        width:
        92%;


    }



    h1 {


        font-size:
        2.5rem;


    }



    h2 {


        font-size:
        2rem;


    }




    .btn {


        width:
        100%;


    }




    .hero-buttons {


        flex-direction:
        column;


    }





    .logo img {


        width:
        160px;


    }




    .footer {


        padding:
        60px 0 25px;


    }



}








/* ======================================
ACCESSIBILITY
====================================== */


a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {


    outline:
    2px solid var(--accent);


    outline-offset:
    3px;


}






/* ======================================
TEXT SELECTION
====================================== */


::selection {


    background:
    var(--accent);


    color:
    #000;


}








/* ======================================
SCROLLBAR
====================================== */


::-webkit-scrollbar {


    width:
    10px;


}



::-webkit-scrollbar-track {


    background:
    #111;


}



::-webkit-scrollbar-thumb {


    background:
    var(--accent);


    border-radius:
    20px;


}








/* ======================================
REDUCED MOTION
====================================== */


@media(prefers-reduced-motion:reduce){


    *,
    *::before,
    *::after {


        animation-duration:
        .01ms !important;


        animation-iteration-count:
        1 !important;


        scroll-behavior:
        auto !important;


        transition-duration:
        .01ms !important;


    }


}








/* ======================================
PRINT
====================================== */


@media print{


    .header,
    .footer,
    .mobile-menu {


        display:none;


    }


    body {


        background:white;


        color:black;


    }


}
/* ======================================
FORM MESSAGES
====================================== */


.form-message{

margin-top:25px;

padding:15px;

border-radius:6px;

font-weight:600;

}



.form-message.success{

background:
rgba(34,197,94,.15);

border:
1px solid #22c55e;

color:#86efac;

}



.form-message.error{

background:
rgba(239,68,68,.15);

border:
1px solid #ef4444;

color:#fca5a5;

}



input.error,
textarea.error,
select.error{

border-color:
#ef4444;

}