/* --- Variables & Reset --- */
:root {
    --main-blue: #00A3E0;
    --industrial-dark: #121417;
    --panel-grey: #1E2126;
    --text-white: #F5F5F5;
    --fade-speed: 1.2s;
}

* { box-sizing: border-box; }

body { 
    font-family: 'Helvetica Neue', Arial, sans-serif; 
    background: var(--industrial-dark); 
    color: var(--text-white); 
    margin: 0; 
    line-height: 1.6; 
    overflow-x: hidden;
}

/* --- Header & Navigation --- */
header { 
    background: #000; 
    padding: 1rem 5%; 
    border-bottom: 2px solid var(--main-blue); 
    position: sticky; 
    top: 0; 
    z-index: 1000; 
}

nav { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    flex-wrap: wrap; 
}

.nav-logo { height: 45px; margin-right: 15px; vertical-align: middle; }

nav ul { display: flex; list-style: none; gap: 30px; margin: 0; padding: 0; }

nav a { 
    color: #fff; 
    text-decoration: none; 
    font-weight: bold; 
    text-transform: uppercase; 
    font-size: 0.85rem; 
}

/* --- Hero Section --- */
#hero { 
    display: flex; 
    align-items: center; 
    justify-content: center;
    padding: 100px 10%; 
    gap: 50px; 
    background: radial-gradient(circle at top right, #1a1e24, #121417); 
}

.brand-image { 
    max-width: 100%; 
    width: 400px;    
    height: auto;
    filter: drop-shadow(0 0 12px var(--main-blue)); 
    border-radius: 8px; 
}

/* --- SLIDESHOW SECTION --- */
#portfolio {
    padding: 80px 10%;
    background-color: #0b0d0f;
    text-align: center;
}

.portfolio-header { margin-bottom: 40px; }

.slideshow-frame {
    position: relative;
    max-width: 1000px;
    height: 550px; /* Fixed height for all photos */
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #333;
    box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}

#slideshow-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Keeps image proportions while filling the frame */
    transition: opacity var(--fade-speed) ease-in-out;
    opacity: 1;
}

.image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(to top, rgba(18, 20, 23, 0.9), transparent);
    pointer-events: none;
}

/* --- Grid & Cards --- */
.grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 20px; 
    padding: 50px 10%; 
}

.service-card { 
    background: var(--panel-grey); 
    padding: 40px; 
    border-radius: 8px; 
    border-top: 4px solid var(--main-blue); 
}

/* --- Contact Form --- */
.contact-container { 
    max-width: 700px; 
    width: 90%; 
    margin: 40px auto; 
    background: #1a1c20; 
    padding: 50px; 
    border-radius: 12px; 
}

input, textarea { 
    width: 100%; 
    padding: 15px; 
    margin-bottom: 15px; 
    background: #2b2e33; 
    border: 1px solid #444; 
    color: white; 
}

.btn-main { 
    background: var(--main-blue); 
    color: #fff; 
    padding: 15px 40px; 
    border: none; 
    border-radius: 4px; 
    cursor: pointer; 
    font-weight: bold; 
    text-transform: uppercase; 
    text-decoration: none; 
    display: inline-block;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    #hero { flex-direction: column; text-align: center; }
    .slideshow-frame { height: 350px; }
    nav { flex-direction: column; gap: 20px; }
    nav ul { gap: 15px; }
}