```css
/* =====================================================
   NexusPro Engineering Website
   Main Stylesheet
   ===================================================== */


/* ---------- Base ---------- */

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


:root {

    --primary: #0b1f3a;
    --secondary: #1c5d8f;
    --accent: #d49b35;

    --light: #f5f7fa;
    --white: #ffffff;
    --dark: #1a1a1a;
    --grey: #666666;

}


html {
    scroll-behavior: smooth;
}


body {

    font-family: "Arial", sans-serif;
    line-height: 1.6;
    color: var(--dark);
    background: var(--white);

}


img {

    max-width: 100%;
    display: block;

}


a {

    text-decoration: none;
    color: inherit;

}


.container {

    width: 90%;
    max-width: 1200px;
    margin: auto;

}



/* =====================================================
   Header & Navigation
   ===================================================== */


.header {

    background: var(--white);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);

}



.nav-container {

    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 90px;

}



.brand {

    display: flex;
    align-items: center;
    gap: 15px;

}



.brand img {

    width: 70px;
    height: auto;

}



.brand h1 {

    font-size: 1.35rem;
    color: var(--primary);

}



.brand p {

    font-size: 0.75rem;
    color: var(--grey);

}



.navigation {

    display: flex;
    gap: 25px;

}



.navigation a {

    font-weight: 600;
    color: var(--primary);
    transition: 0.3s;

}



.navigation a:hover,
.navigation .active {

    color: var(--secondary);

}



.menu-toggle {

    display: none;
    font-size: 28px;
    background: none;
    border: none;
    cursor: pointer;

}



/* =====================================================
   Hero Section
   ===================================================== */


.hero {

    position: relative;
    min-height: 650px;
    display: flex;
    align-items: center;
    overflow: hidden;

}



.hero-image {

    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;

}



.hero-overlay {

    position: absolute;
    inset: 0;
    background: rgba(11,31,58,0.72);

}



.hero-content {

    position: relative;
    color: var(--white);
    max-width: 750px;

}



.hero h2 {

    font-size: clamp(2rem,5vw,3.4rem);
    line-height: 1.2;
    margin-bottom: 20px;

}



.hero p {

    font-size: 1.15rem;
    margin-bottom: 35px;

}



.hero-buttons {

    display: flex;
    gap: 15px;
    flex-wrap: wrap;

}



/* =====================================================
   Buttons
   ===================================================== */


.button {

    display: inline-block;
    padding: 13px 30px;
    border-radius: 4px;
    font-weight: bold;
    transition: 0.3s;

}



.primary {

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

}



.primary:hover {

    background: #b98220;

}



.secondary {

    border: 2px solid var(--white);
    color: var(--white);

}



.secondary:hover {

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

}



/* =====================================================
   General Sections
   ===================================================== */


section {

    padding: 80px 0;

}



section h2 {

    color: var(--primary);
    font-size: 2.2rem;
    margin-bottom: 25px;
    text-align: center;

}



.intro p,
.experience p {

    max-width: 850px;
    margin: 15px auto;
    text-align: center;
    color: var(--grey);

}





/* =====================================================
   Cards
   ===================================================== */


.card-grid {

    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 25px;
    margin-top: 40px;

}



.card,
.service-card,
.project-card {

    background: var(--white);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);

}



.card h3,
.service-card h3,
.project-card h3 {

    color: var(--primary);
    margin-bottom: 15px;

}



.card p,
.service-card p,
.project-card p {

    color: var(--grey);

}



/* =====================================================
   Services
   ===================================================== */


.services {

    background: var(--light);

}



.service-card {

    border-top: 4px solid var(--secondary);

}



/* =====================================================
   Project Cards
   ===================================================== */


.project-card img {

    width:100%;
    height:220px;
    object-fit:cover;
    margin-bottom:20px;

}



/* =====================================================
   Page Banner
   ===================================================== */


.page-banner {

    background: var(--primary);
    color: white;
    padding: 100px 0;
    text-align:center;

}


.page-banner h2 {

    color:white;

}


.page-banner p {

    font-size:1.1rem;

}



/* =====================================================
   Footer
   ===================================================== */


.footer {

    background: var(--primary);
    color:white;
    padding:50px 0;
    text-align:center;

}


.footer p {

    margin:10px 0;

}


.copyright {

    margin-top:20px;
    opacity:0.7;

}
```
```css
/* =====================================================
   Part 2 - Responsive Design & Page Components
   ===================================================== */


/* ---------- Two Column Layout ---------- */


.two-column {

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
    align-items: center;

}


.two-column img {

    border-radius: 8px;

}



/* ---------- About Page ---------- */


.about-company,
.director-section {

    background: var(--white);

}


.director-section {

    background: var(--light);

}



.director-section h3 {

    color: var(--primary);
    font-size: 1.8rem;
    margin-bottom: 15px;

}



.industry-list {

    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap:20px;
    list-style:none;
    margin-top:40px;

}


.industry-list li {

    background:white;
    padding:20px;
    text-align:center;
    border-radius:6px;
    box-shadow:0 5px 15px rgba(0,0,0,0.08);
    font-weight:600;

}





/* ---------- Services Detail Page ---------- */


.services-page {

    background:var(--white);

}



.service-item {

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center;
    margin-bottom:70px;

}



.service-item img {

    border-radius:8px;
    height:350px;
    width:100%;
    object-fit:cover;

}



.service-item ul {

    margin-top:20px;
    padding-left:20px;

}



.service-item li {

    margin-bottom:8px;

}



.reverse {

    direction:rtl;

}


.reverse div {

    direction:ltr;

}





/* ---------- Contact Form ---------- */


.contact-section {

    background:var(--light);

}



form {

    background:white;
    padding:35px;
    border-radius:8px;
    box-shadow:0 5px 20px rgba(0,0,0,0.08);

}



form input,
form textarea,
form select {

    width:100%;
    padding:14px;
    margin-bottom:15px;
    border:1px solid #ddd;
    border-radius:5px;
    font-size:1rem;

}



form textarea {

    resize:vertical;

}



form button {

    border:none;
    cursor:pointer;

}





/* ---------- Call To Action Sections ---------- */


.contact-call,
.experience {

    background:var(--light);
    text-align:center;

}


.contact-call h2,
.experience h2 {

    margin-bottom:20px;

}





/* ---------- Mobile Navigation ---------- */


@media(max-width:900px) {


    .nav-container {

        min-height:75px;

    }



    .brand h1 {

        font-size:1.1rem;

    }



    .brand p {

        display:none;

    }



    .menu-toggle {

        display:block;
        color:var(--primary);

    }



    .navigation {

        position:absolute;
        top:75px;
        left:0;
        width:100%;
        background:white;
        flex-direction:column;
        text-align:center;
        padding:25px;
        gap:20px;

        display:none;

    }



    .navigation.show {

        display:flex;

    }



    .hero {

        min-height:550px;

    }



    .hero-content {

        text-align:center;

    }



    .hero-buttons {

        justify-content:center;

    }



    .card-grid {

        grid-template-columns:1fr;

    }



    .two-column {

        grid-template-columns:1fr;
        gap:30px;

    }



    .service-item {

        grid-template-columns:1fr;

    }



    .reverse {

        direction:ltr;

    }



    .industry-list {

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

    }


}





/* ---------- Small Mobile Devices ---------- */


@media(max-width:600px) {


    section {

        padding:50px 0;

    }



    .container {

        width:92%;

    }



    .hero h2 {

        font-size:2rem;

    }



    .hero p {

        font-size:1rem;

    }



    .button {

        width:100%;
        text-align:center;

    }



    .industry-list {

        grid-template-columns:1fr;

    }



    .page-banner {

        padding:70px 0;

    }



    .page-banner h2 {

        font-size:1.8rem;

    }



    .service-item img {

        height:250px;

    }



}





/* ---------- Hover Effects ---------- */


.card,
.service-card,
.project-card {

    transition:transform .3s ease,
               box-shadow .3s ease;

}



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

    transform:translateY(-5px);
    box-shadow:0 10px 30px rgba(0,0,0,0.15);

}





/* ---------- Image Loading ---------- */


.hero-image,
.project-card img,
.service-item img {

    transition:transform .5s ease;

}


.project-card:hover img {

    transform:scale(1.03);

}
```