/* =========================================================
   LEKKER CONSTRUCTION
   Main Stylesheet - V1
   Black / Orange / White
   ========================================================= */


/* =========================================================
   1. VARIABLES
   ========================================================= */

:root {
    --black: #080808;
    --dark: #111111;
    --orange: #ff6900;
    --white: #ffffff;
    --off: #f5f3ef;
    --gray: #707070;
    --light-gray: #cfcfcf;
    --line: #ddd8d0;

    --max: 1240px;
}


/* =========================================================
   2. RESET / BASE
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: #151515;
    background: var(--white);
    line-height: 1.6;
}

img {
    display: block;
    max-width: 100%;
}

a {
    text-decoration: none;
    color: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
}

.container {
    width: min(
        var(--max),
        calc(100% - 40px)
    );

    margin: 0 auto;
}


/* =========================================================
   3. HEADER
   ========================================================= */

.header {
    position: sticky;
    top: 0;
    z-index: 1000;

    background: var(--black);
    color: var(--white);

    border-bottom: 1px solid #242424;
}

.nav {
    min-height: 82px;

    display: flex;
    align-items: center;

    gap: 25px;
}

.brand {
    display: flex;
    align-items: center;

    gap: 10px;
    margin-right: auto;
}

.brand img {
    width: 52px;
    height: 52px;

    object-fit: contain;
}

.brand b {
    font-size: 22px;
    letter-spacing: 2px;
}

.brand small {
    display: block;

    color: var(--orange);

    font-size: 9px;
    letter-spacing: 2px;
}


/* =========================================================
   4. NAVIGATION
   ========================================================= */

.navlinks {
    display: flex;
    gap: 20px;
}

.navlinks a {
    font-size: 12px;
    font-weight: 800;

    padding: 30px 0;

    border-bottom: 3px solid transparent;

    transition: 0.2s ease;
}

.navlinks a:hover,
.navlinks a.active {
    border-color: var(--orange);
}

.toggle {
    display: none;

    background: none;
    color: var(--white);

    border: 0;

    font-size: 27px;
    cursor: pointer;
}


/* =========================================================
   5. HEADER CONTACT
   ========================================================= */

.header-contact {
    display: flex;
    align-items: center;

    gap: 25px;
    margin-left: auto;
}

.header-contact > a {
    color: var(--light-gray);

    font-size: 12px;

    transition: 0.25s ease;
}

.header-contact > a strong {
    display: block;

    color: var(--orange);

    font-size: 13px;
}

.header-contact > a:hover {
    color: var(--white);
}


/* =========================================================
   6. HERO
   ========================================================= */

.hero,
.pagehero {
    position: relative;

    overflow: hidden;

    background: var(--dark);
    color: var(--white);
}

.hero {
    min-height: 690px;

    display: flex;
    align-items: center;
}

.heroimage,
.pageimage {
    position: absolute;
    inset: 0;

    background-size: cover;
    background-position: center;
}

.overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.90),
            rgba(0, 0, 0, 0.50),
            rgba(0, 0, 0, 0.20)
        );
}

.hero-content,
.pagecontent {
    position: relative;
    z-index: 2;
}

.hero-content {
    padding: 120px 0;
}

.eyebrow {
    margin: 0 0 10px;

    color: var(--orange);

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 3px;
}

.hero h1,
.pagehero h1 {
    margin: 10px 0;

    font-size: clamp(
        45px,
        7vw,
        88px
    );

    line-height: 0.97;

    letter-spacing: -3px;

    text-transform: uppercase;
}

.hero h1 span,
.pagehero h1 span {
    color: var(--orange);
}

.lead {
    max-width: 680px;

    font-size: 18px;
    color: #eeeeee;
}


/* =========================================================
   7. BUTTONS
   ========================================================= */

.buttons {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 28px;
}

.btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 14px 22px;

    border: 2px solid transparent;

    font-size: 12px;
    font-weight: 900;

    text-transform: uppercase;
    letter-spacing: 1px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.orange {
    background: var(--orange);
    color: var(--white);
}

.orange:hover {
    background: #e85d00;
}

.outline {
    border-color: var(--white);
    color: var(--white);
}

.outline:hover {
    background: var(--white);
    color: var(--dark);
}

.dark {
    background: var(--dark);
    color: var(--white);
}

.dark:hover {
    background: var(--black);
}


/* =========================================================
   8. SECTIONS
   ========================================================= */

.section {
    padding: 95px 0;
}

.heading {
    max-width: 760px;

    margin-bottom: 45px;
}

.heading h2,
.content h2 {
    margin: 0 0 18px;

    font-size: clamp(
        34px,
        4vw,
        56px
    );

    line-height: 1.05;

    letter-spacing: -2px;
}


/* =========================================================
   9. SERVICE / CONTENT CARDS
   ========================================================= */

.cards {
    display: grid;

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

    gap: 20px;
}

.card {
    overflow: hidden;

    background: var(--white);

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

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, 0.09);
}

.card img {
    width: 100%;
    height: 235px;

    object-fit: cover;
}

.cardbody {
    padding: 23px;
}

.num {
    color: var(--orange);

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 2px;
}

.card h3 {
    margin: 5px 0;

    font-size: 22px;
}

.card p {
    margin: 0;

    color: #666666;

    font-size: 14px;
}


/* =========================================================
   10. SPLIT SECTIONS
   ========================================================= */

.split {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    background: var(--off);
}

.splitimg {
    min-height: 550px;

    background-size: cover;
    background-position: center;
}

.content {
    padding: 80px clamp(
        30px,
        7vw,
        100px
    );

    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* =========================================================
   11. DARK SECTIONS
   ========================================================= */

.darksection {
    padding: 90px 0;

    background: var(--dark);
    color: var(--white);
}


/* =========================================================
   12. PROCESS
   ========================================================= */

.process {
    display: grid;

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

    gap: 25px;
}

.process > div {
    padding-top: 18px;

    border-top: 2px solid var(--orange);
}

.process h3 {
    margin: 5px 0;
}

.process p {
    color: #bbbbbb;

    font-size: 14px;
}


/* =========================================================
   13. CTA
   ========================================================= */

.cta {
    padding: 55px 0;

    background: var(--orange);
}

.ctainner {
    display: flex;

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

    gap: 25px;
}

.ctainner h2 {
    margin: 0;

    font-size: 42px;
    line-height: 1;
}


/* =========================================================
   14. PAGE HERO
   ========================================================= */

.pagehero {
    height: 430px;

    display: flex;
    align-items: center;
}

.pagecontent h1 {
    margin: 0;
}


/* =========================================================
   15. DETAIL GRID
   ========================================================= */

.detailgrid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 25px;
}

.detail {
    display: grid;

    grid-template-columns:
        40% 60%;

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

.detail img {
    width: 100%;
    height: 100%;

    min-height: 310px;

    object-fit: cover;
}

.detailbody {
    padding: 28px;
}


/* =========================================================
   16. PROJECTS
   ========================================================= */

.project {
    display: grid;

    grid-template-columns:
        45% 55%;

    padding: 65px 0;

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

.project img {
    width: 100%;
    height: 390px;

    object-fit: cover;
}

.projectbody {
    padding-left: 50px;
}

.projectbody h2 {
    font-size: 38px;
    line-height: 1.05;
}


/* =========================================================
   17. TESTIMONIALS
   ========================================================= */

.testimonial {
    margin: 18px 0;
    padding: 18px;

    background: var(--off);

    border-left: 4px solid var(--orange);
}

.testimonial img {
    width: 75px;
    height: 75px;

    margin-bottom: 10px;

    border-radius: 50%;

    object-fit: cover;
}

.testimonial p {
    font-size: 14px;
}


/* =========================================================
   18. FORMS
   ========================================================= */

.forms {
    display: grid;

    grid-template-columns:
        0.8fr 1.2fr;

    gap: 75px;
}

.form {
    display: flex;
    flex-direction: column;

    gap: 16px;
}

.form label {
    font-size: 11px;
    font-weight: 900;

    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.form input,
.form select,
.form textarea {
    display: block;

    width: 100%;

    margin-top: 7px;
    padding: 14px;

    border: 1px solid #cccccc;

    background: var(--white);

    color: #151515;

    font: inherit;
}

.form textarea {
    resize: vertical;
}

.form input:focus,
.form select:focus,
.form textarea:focus {
    outline: 2px solid
        rgba(255, 105, 0, 0.20);

    border-color: var(--orange);
}

.status {
    min-height: 22px;

    font-size: 13px;
    font-weight: 700;
}

.success {
    color: #167b36;
}

.error {
    color: #b00020;
}


/* =========================================================
   19. CHECKBOX
   ========================================================= */

.checkbox {
    display: flex !important;

    align-items: flex-start;

    gap: 9px;

    text-transform: none !important;

    font-weight: 500 !important;
}

.checkbox input {
    width: auto;

    margin-top: 5px;
}


/* =========================================================
   20. CONTACT CARD
   ========================================================= */

.contact-card {
    padding: 40px;

    background: var(--dark);

    color: var(--white);

    border: 1px solid #303030;
}

.contact-card h3 {
    margin-top: 0;
}

.contact-card a {
    color: var(--orange);

    font-weight: 700;
}

.contact-card a:hover {
    color: var(--white);
}


/* =========================================================
   21. CONTACT ICONS
   ========================================================= */

.contact-icons {
    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 25px;
}

.contact-icon {
    width: 70px;
    height: 70px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    background: var(--dark);

    color: var(--white);

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

    transition: 0.25s ease;
}

.contact-icon:hover {
    background: var(--orange);
    color: var(--black);

    transform: translateY(-4px);
}

.contact-icon .icon {
    font-size: 27px;
    line-height: 1;
}

.contact-icon .icon-label {
    margin-top: 5px;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1px;
}


/* =========================================================
   22. CONTACT LAYOUT
   ========================================================= */

.contact-layout {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 50px;

    align-items: start;
}

.contact-form-card {
    padding: 40px;

    background: var(--dark);

    border: 1px solid #303030;
}

.contact-detail {
    display: flex;

    align-items: center;

    gap: 20px;

    padding: 20px 0;

    border-bottom: 1px solid #303030;
}

.contact-detail .big-icon {
    font-size: 35px;
}

.contact-detail strong {
    display: block;

    color: var(--white);
}

.contact-detail a {
    display: block;

    color: var(--orange);

    font-weight: 700;
}

.contact-detail span:last-child {
    display: block;

    color: #cfcfcf;
}


/* =========================================================
   23. FOOTER
   ========================================================= */

.footer {
    background: var(--black);

    color: #aaaaaa;
}

.footgrid {
    display: grid;

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

    gap: 45px;

    padding: 60px 0;
}

.footlogo {
    width: 190px;
}

.footer h4 {
    color: var(--white);
}

.footer p {
    font-size: 13px;
}

.footer a:hover {
    color: var(--orange);
}


/* =========================================================
   24. FOOTER CONTACT
   ========================================================= */

.footer-contact {
    margin-top: 20px;
}

.footer-contact h3 {
    margin-bottom: 15px;

    color: var(--orange);
}

.footer-contact p {
    margin-bottom: 15px;
}

.footer-contact a {
    color: var(--orange);

    font-weight: 700;

    transition: 0.25s ease;
}

.footer-contact a:hover {
    color: var(--white);
}

.footer-contact strong {
    color: var(--white);
}


/* =========================================================
   25. FOOTER BOTTOM
   ========================================================= */

.bottom {
    border-top: 1px solid #222222;
}

.bottom .container {
    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;
}


/* =========================================================
   26. OPTIONAL NAV WRAPPER
   ========================================================= */

.nav-wrapper {
    border-top: 1px solid #1c1c1c;
}


/* =========================================================
   27. OPTIONAL FOOTER LOGO
   ========================================================= */

.footer-logo {
    width: 150px;

    margin-bottom: 20px;
}


/* =========================================================
   28. TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .navlinks {
        display: none;

        position: absolute;

        top: 82px;
        left: 0;
        right: 0;

        padding: 10px 20px;

        background: var(--black);

        flex-direction: column;

        gap: 0;
    }

    .navlinks.open {
        display: flex;
    }

    .navlinks a {
        padding: 13px 0;
    }

    .toggle {
        display: block;
    }

    .header-contact {
        display: none;
    }

    .call {
        display: none;
    }

    .cards,
    .detailgrid {
        grid-template-columns:
            1fr 1fr;
    }

    .process {
        grid-template-columns:
            1fr 1fr;
    }

    .project {
        grid-template-columns: 1fr;
    }

    .projectbody {
        padding: 30px 0;
    }

    .forms {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .contact-layout {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   29. MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .container {
        width: calc(100% - 28px);
    }

    .nav {
        min-height: 72px;
    }

    .brand img {
        width: 46px;
        height: 46px;
    }

    .brand b {
        font-size: 19px;
    }

    .hero {
        min-height: 620px;
    }

    .hero-content {
        padding: 90px 0;
    }

    .hero h1,
    .pagehero h1 {
        letter-spacing: -1px;
    }

    .cards,
    .detailgrid,
    .split {
        grid-template-columns: 1fr;
    }

    .splitimg {
        min-height: 340px;
    }

    .content {
        padding: 60px 25px;
    }

    .process {
        grid-template-columns: 1fr;
    }

    .ctainner {
        align-items: flex-start;

        flex-direction: column;
    }

    .ctainner h2 {
        font-size: 34px;
    }

    .footgrid {
        grid-template-columns: 1fr;
    }

    .pagehero {
        height: 350px;
    }

    .project img {
        height: 280px;
    }

    .contact-icons {
        flex-wrap: wrap;
    }

    .bottom .container {
        flex-direction: column;
    }

}


/* =========================================================
   END - LEKKER CONSTRUCTION V1
   ========================================================= */