/* =========================================================
   SHUBHAM ENGINEERING — style.css
   Preserves the original industrial palette, layout direction,
   and hover/active animations while styling every section
   in the supplied index.html.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");

/* ---------- Design tokens ---------- */
:root {
    --navy-950: #0d1a2b;
    --navy-900: #112238;
    --navy-800: #19304d;
    --navy-600: #38506d;

    --steel-50: #f7f8fa;
    --steel-100: #edf0f3;
    --steel-200: #dbe0e6;
    --steel-300: #c1c9d2;
    --steel-500: #7d8a98;

    --white: #ffffff;

    --brass-400: #d0a23e;
    --brass-500: #b88a2c;
    --brass-600: #9a7120;

    --font: "IBM Plex Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --page-width: 74rem;
    --gutter: clamp(1.25rem, 5vw, 3.5rem);
    --radius: 4px;
    --nav-height: 4.5rem;
    --edge: max(var(--gutter), calc((100% - var(--page-width)) / 2 + var(--gutter)));
}

/* ---------- Reset and base ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--navy-900);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
p,
ul {
    margin: 0;
}

ul {
    padding: 0;
    list-style: none;
}

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

a:focus-visible {
    outline: 3px solid var(--brass-500);
    outline-offset: 3px;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--white);
}

section {
    scroll-margin-top: calc(var(--nav-height) + 1rem);
}

/* ---------- Navigation ---------- */
nav {
           
            top: 0;
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem 2.5rem;
            min-height: var(--nav-height);
            padding: 0.75rem var(--gutter);
            background: #FAFAEF;
            border-bottom: 1px solid var(--steel-200);
            box-shadow: 0 1px 12px rgba(13, 26, 43, 0.05);
        }

#logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    font-weight: 700;
    letter-spacing: 0.09em;
    line-height: 1.1;
    color: var(--navy-900);
    white-space: nowrap;
}



#links {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2.5rem);
}

#links a {
    position: relative;
    display: inline-block;
    padding: 0.4rem 0;
    font-size: 0.975rem;
    font-weight: 500;
    color: var(--navy-600);
    transition: color 0.2s ease;
}

#links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--brass-500);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

#links a:hover,
#links a:focus-visible,
#links a[aria-current="page"] {
    color: var(--navy-900);
}

#links a:hover::after,
#links a:focus-visible::after,
#links a[aria-current="page"]::after {
    transform: scaleX(1);
}

/* ---------- Homepage hero ---------- */
#mainHeading {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(4rem, 11vw, 8.5rem) var(--edge);
    color: var(--white);
    background-color: var(--navy-900);
    background-image:
        radial-gradient(ellipse 60% 70% at 85% 0%, rgba(56, 80, 109, 0.55), transparent 70%),
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: auto, 56px 56px, 56px 56px;
}

#mainHeading::before {
    content: "";
    display: block;
    width: 4.5rem;
    height: 4px;
    margin-bottom: 2rem;
    background: var(--brass-500);
}

#heading1 {
    max-width: 18ch;
    font-size: clamp(2.4rem, 6vw, 4.6rem);
    font-weight: 600;
    line-height: 1.07;
    letter-spacing: -0.02em;
    color: var(--white);
}

#heading2 {
    max-width: 40rem;
    margin-top: 1.75rem;
    font-size: clamp(1.02rem, 1.7vw, 1.2rem);
    font-weight: 400;
    line-height: 1.7;
    color: var(--steel-300);
}

/* ---------- Homepage buttons ---------- */
.heroButtons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.75rem;
}

.heroButtons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 12.5rem;
    padding: 0.95rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    border: 2px solid transparent;
    border-radius: var(--radius);
    transition: background-color 0.2s ease, color 0.2s ease,
        border-color 0.2s ease, transform 0.2s ease;
}

#quatation {
    background: var(--brass-500);
    border-color: var(--brass-500);
    color: var(--navy-950);
}

#quatation:hover {
    background: var(--brass-400);
    border-color: var(--brass-400);
}

#quatation:active {
    background: var(--brass-600);
    border-color: var(--brass-600);
    transform: translateY(1px);
}

#services {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.55);
    color: var(--white);
}

#services:hover {
    background: var(--white);
    border-color: var(--white);
    color: var(--navy-900);
}

#services:active {
    background: var(--steel-200);
    border-color: var(--steel-200);
    color: var(--navy-900);
    transform: translateY(1px);
}

/* ---------- Shared homepage section styling ---------- */
#homeAbout,
#homeServices,
#whyChooseUs,
#workProcess,
#homeQuality,
#homeContact {
    padding: clamp(3.5rem, 8vw, 5.5rem) var(--edge);
}

#homeAbout>h2,
#homeServices>h2,
#whyChooseUs>h2,
#workProcess>h2,
#homeQuality>h2,
#homeContact>h2 {
    max-width: 42rem;
    margin-bottom: 1.25rem;
    font-size: clamp(1.5rem, 2.8vw, 2.1rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--navy-900);
}

#homeAbout>p,
#homeServices>p,
#homeQuality>p,
#homeContact>p {
    max-width: 46rem;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--navy-600);
}

#homeAbout>a,
#homeServices>a,
#homeQuality>a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-bottom: 0.25rem;
    color: var(--navy-900);
    font-weight: 600;
    border-bottom: 1px solid var(--brass-500);
    transition: color 0.2s ease, border-color 0.2s ease;
}

#homeAbout>a:hover,
#homeServices>a:hover,
#homeQuality>a:hover {
    color: var(--brass-600);
    border-color: var(--brass-600);
}

/* ---------- About section ---------- */
#homeAbout {
    background: var(--white);
}

/* ---------- Services cards ---------- */
#homeServices {
    background: var(--steel-100);
    border-top: 1px solid var(--steel-200);
    border-bottom: 1px solid var(--steel-200);
}

#homeServices>p {
    margin-bottom: 2.25rem;
}

.servicesGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
    gap: 1.5rem;
}

.serviceCard {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 1.5rem;
    background: var(--white);
    border: 1px solid var(--steel-200);
    border-radius: var(--radius);
    transition: border-color 0.2s ease, transform 0.2s ease,
        box-shadow 0.2s ease;
}

.serviceCard:hover {
    border-color: var(--steel-300);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(13, 26, 43, 0.06);
}

.serviceCard h3 {
    margin-bottom: 0.65rem;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--navy-900);
}

.serviceCard p {
    font-size: 0.975rem;
    line-height: 1.65;
    color: var(--navy-600);
}

/* ---------- Why work with us ---------- */
#whyChooseUs {
    background: var(--white);
}

#whyChooseUs .serviceCard {
    border-top: 3px solid var(--brass-500);
}

/* ---------- Process steps ---------- */
#workProcess {
    background: var(--steel-50);
    border-top: 1px solid var(--steel-200);
}

#workProcess>h2 {
    margin-bottom: 2.25rem;
}

.processGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 2rem 1.5rem;
}

.processCard {
    position: relative;
    padding: 1.5rem;
    border-top: 3px solid var(--steel-200);
}

.processCard::before {
    content: "";
    position: absolute;
    top: -3px;
    left: 0;
    width: 3rem;
    height: 3px;
    background: var(--brass-500);
}

.processCard h3 {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--navy-900);
}

.processCard p {
    margin-top: 0.5rem;
    font-size: 0.975rem;
    line-height: 1.65;
    color: var(--navy-600);
}

/* ---------- Quality overview ---------- */
#homeQuality {
    background: var(--white);
    border-top: 1px solid var(--steel-200);
}

/* ---------- Final contact call to action ---------- */
#homeContact {
    background: var(--steel-100);
    border-top: 1px solid var(--steel-200);
}

#homeContact>h2 {
    max-width: 30ch;
}

#homeContact>p {
    max-width: 46rem;
}

/* This styles the existing div and its nested anchor without changing HTML. */
#quatationbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    width: min(100%, 250px);
    margin-top: 1.5rem;
    padding: 8px 12px;
    box-sizing: border-box;
    border: 1px solid var(--brass-500);
    border-radius: var(--radius);
    background-color: var(--brass-500);
    color: var(--navy-950);
    text-align: center;
    overflow-wrap: break-word;
    transition: background-color 0.2s ease, border-color 0.2s ease,
        transform 0.1s ease;
}

#quatationbox a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    color: var(--navy-950);
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
}

#quatationbox:hover {
    background-color: var(--brass-400);
    border-color: var(--brass-400);
}

#quatationbox:active {
    background-color: var(--brass-600);
    border-color: var(--brass-600);
    transform: translateY(1px);
}

#quatationbox a:focus-visible {
    outline: 2px solid var(--navy-950);
    outline-offset: 3px;
}

/* ---------- Professional SHUBHAM ENGINEERING Footer ---------- */

footer {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.5rem 3rem;
    width: 100%;
    padding: 2.4rem var(--edge) 1.5rem;
    color: #c8d2df;
    background:
        radial-gradient(ellipse at 12% 0%,
            rgba(56, 80, 109, 0.35),
            transparent 45%),
        var(--navy-950);
    border-top: 1px solid rgba(208, 162, 62, 0.75);
}

footer::before {
    content: "SHUBHAM ENGINEERING";
    display: block;
    grid-column: 1;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.4;
}

footer>p {
    grid-column: 1;
    grid-row: 2;
    max-width: 31rem;
    margin-top: -1.15rem;
    color: #aebccc;
    font-size: 0.86rem;
    line-height: 1.75;
}

#footerlinks {
    grid-column: 2;
    grid-row: 1 / span 2;
    max-width: 100%;
    text-align: right;
}

#footerlinks p {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.65rem 1.5rem;
    color: #d8e0e9;
    font-size: 0.82rem;
    line-height: 1.8;
}

#footerlinks a {
    display: inline-block;
    color: #d8e0e9;
    border-bottom: 1px solid transparent;
    transition:
        color 0.22s ease,
        border-color 0.22s ease,
        transform 0.22s ease;
}

#footerlinks a:hover {
    color: var(--brass-400);
    border-color: var(--brass-400);
    transform: translateY(-1px);
}

footer::after {
    content: "© " attr(data-year) " SHUBHAM ENGINEERING. All rights reserved.";
    grid-column: 1 / -1;
    display: block;
    margin-top: 0.5rem;
    padding-top: 1.1rem;
    color: #8292a5;
    border-top: 1px solid rgba(219, 224, 230, 0.14);
    font-size: 0.75rem;
    letter-spacing: 0.025em;
}

/* Responsive footer */
@media (max-width: 40rem) {
    footer {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
        padding: 2rem 1.25rem 1.25rem;
    }

    footer::before,
    footer>p,
    #footerlinks,
    footer::after {
        grid-column: 1;
        grid-row: auto;
    }

    footer>p {
        margin-top: -0.75rem;
    }

    #footerlinks {
        text-align: left;
        margin-top: 0.25rem;
    }

    #footerlinks p {
        justify-content: flex-start;
        gap: 0.45rem 1.1rem;
    }
}









/* =========================================================
   Responsive navigation (phones and small tablets)
   Pure CSS hamburger: no JavaScript needed.
   Add this block to the END of style.css.
   Without the menu button in the HTML, the links simply
   stay visible and wrap under the logo, so they never vanish.
   ========================================================= */

/* Menu button is hidden on desktop */
.navToggle {
    display: none;
}

@media (max-width: 38rem) {
    nav {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0 1rem;
    }

    #logo {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 0.95rem;
        letter-spacing: 0.06em;
    }

    /* Links: always visible by default, wrapped under the logo */
    #links {
        display: flex;
        flex: 0 0 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.1rem 1.5rem;
        margin-top: 0.5rem;
        border-top: 1px solid var(--steel-200);
    }

    #links a {
        padding: 0.7rem 0;
    }

    /* ----- Menu button (only when it exists in the HTML) ----- */
    .navToggle {
        position: relative;
        display: inline-flex;
        flex: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 2.75rem;
        height: 2.75rem;
        margin-right: -0.5rem;
        cursor: pointer;
        border-radius: var(--radius);
    }

    .navCheck {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        opacity: 0;
        cursor: pointer;
    }

    .navToggle span {
        display: block;
        width: 1.5rem;
        height: 2px;
        background: var(--navy-900);
        border-radius: 1px;
        transition: transform 0.25s ease, opacity 0.2s ease;
    }

    .navToggle:has(.navCheck:focus-visible) {
        outline: 3px solid var(--brass-500);
        outline-offset: 2px;
    }

    .navToggle:has(.navCheck:checked) span:nth-of-type(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .navToggle:has(.navCheck:checked) span:nth-of-type(2) {
        opacity: 0;
    }

    .navToggle:has(.navCheck:checked) span:nth-of-type(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* With the button present: links become a dropdown list, closed until tapped */
    nav:has(.navToggle) #links {
        display: none;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0;
        margin-top: 0.75rem;
    }

    nav:has(.navToggle .navCheck:checked) #links {
        display: flex;
    }

    nav:has(.navToggle) #links li + li {
        border-top: 1px solid var(--steel-200);
    }

    nav:has(.navToggle) #links a {
        display: block;
        padding: 0.95rem 0.25rem;
        font-size: 1.05rem;
    }

    nav:has(.navToggle) #links a::after {
        display: none;
    }

    nav:has(.navToggle) #links a:hover,
    nav:has(.navToggle) #links a[aria-current="page"] {
        color: var(--navy-900);
        box-shadow: inset 3px 0 0 var(--brass-500);
        padding-left: 0.9rem;
    }
}




/* clearer divider between logo and mobile nav links */
@media (max-width: 38rem) {
  #links {
    box-sizing: border-box;
    width: 100%;
    flex: 0 0 100%;
    margin-top: 0.75rem;
    padding: 0.65rem 0 0;
    border-top: 1px solid var(--steel-200);
  }
}