/* =========================
   BLUEFORGE ENGINEERING
   Main Website Styling
========================= */

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

body {

    font-family: Arial, Helvetica, sans-serif;
    background: #08111c;
    color: #ffffff;
    line-height: 1.6;

}


html {
    scroll-behavior: smooth;
}


/* NAVIGATION */

header {

    position: absolute;
    width: 100%;
    z-index: 100;

}


.navbar {

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

    padding: 20px 8%;

    background: rgba(5,15,25,0.75);

    backdrop-filter: blur(10px);

}


.logo img {

    width: 180px;

}


.nav-links {

    display: flex;
    gap: 30px;
    list-style: none;

}


.nav-links a {

    color:white;
    text-decoration:none;
    font-weight:600;

}


.nav-links a:hover {

    color:#00a8ff;

}


/* EMERGENCY BUTTON */

.emergency-btn {

    background:#008cff;
    padding:12px 22px;
    border-radius:5px;

    color:white;
    text-decoration:none;
    font-weight:bold;

    box-shadow:0 0 20px rgba(0,140,255,.5);

}



/* HERO SECTION */


.hero {

    min-height:100vh;

    display:flex;
    align-items:center;

    position:relative;

    background:

    linear-gradient(
    rgba(0,10,20,.75),
    rgba(0,10,20,.9)
    ),

    url("../images/hero.jpg");

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

}


.hero-content {

    position:relative;

    z-index:2;

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

    margin:auto;

}


.hero h1 {

    font-size:clamp(40px,5vw,75px);

    line-height:1.1;

    margin-bottom:25px;

}


.hero p {

    font-size:22px;

    max-width:700px;

    color:#d7e5f5;

}


/* BUTTONS */


.buttons {

    margin-top:40px;

}


.primary-btn,
.secondary-btn {

    display:inline-block;

    padding:15px 30px;

    margin-right:15px;

    text-decoration:none;

    border-radius:5px;

    font-weight:bold;

}



.primary-btn {

    background:#008cff;

    color:white;

}


.primary-btn:hover {

    background:#00b7ff;

}



.secondary-btn {

    border:2px solid #008cff;

    color:white;

}


/* SECTIONS */


.section {

    padding:90px 8%;

    text-align:center;

}



.section h2 {

    font-size:40px;

    margin-bottom:30px;

    color:#00a8ff;

}



.section p {

    max-width:900px;

    margin:auto;

    color:#d0d8e2;

    font-size:18px;

}


/* DARK SECTIONS */


.dark {

    background:#050b13;

}




/* SERVICE CARDS */


.cards {

    display:grid;

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

    gap:30px;

    margin-top:50px;

}



.card {

    background:

    linear-gradient(
    145deg,
    #101d2d,
    #07101b
    );


    padding:35px;

    border-radius:12px;

    border:1px solid rgba(0,140,255,.2);

    transition:.4s;

}



.card:hover {

    transform:translateY(-10px);

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

}



.card h3 {

    color:#00a8ff;

    margin-bottom:15px;

}




/* FEATURES */


.features {

    display:flex;

    justify-content:center;

    gap:40px;

    margin-top:40px;

}



.features div {

    max-width:300px;

}



.features h3 {

    color:#00a8ff;

}



/* PROJECTS */


.projects {

    display:grid;

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

    gap:30px;

    margin-top:40px;

}


.project {

    height:250px;

    display:flex;

    align-items:center;

    justify-content:center;


    background:

    linear-gradient(
    rgba(0,0,0,.5),
    rgba(0,0,0,.8)
    ),

    url("../images/projects.jpg");


    background-size:cover;

    border-radius:10px;

}



/* CONTACT */


.contact {

    text-align:center;

    padding:90px 20px;

    background:#071522;

}


.contact p {

    margin:15px;

}



/* FOOTER */


footer {

    padding:30px;

    text-align:center;

    background:#02070d;

    color:#aaa;

}



/* MOBILE */


@media(max-width:900px){


.nav-links {

display:none;

}


.cards,
.projects {

grid-template-columns:1fr;

}


.features {

flex-direction:column;

align-items:center;

}


.hero h1 {

font-size:42px;

}


}/* Scroll animations */

.hidden {

    opacity:0;
    transform:translateY(40px);
    transition:all .8s ease;

}


.show {

    opacity:1;
    transform:translateY(0);

}