/* =====================================================
DELTA FORGE ARMORY
MASTER STYLESHEET
===================================================== */

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

html{
scroll-behavior:smooth;
}

body{

font-family:Arial, Helvetica, sans-serif;

background:
linear-gradient(
rgba(0,0,0,.92),
rgba(0,0,0,.92)
),
url("images/metal-texture.jpg");

background-size:cover;
background-attachment:fixed;

color:#e0e0e0;
line-height:1.7;

}

/* =====================================================
HEADER
===================================================== */

header{

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

padding:15px 8%;

background:#111;

border-bottom:2px solid #b76d2b;

position:sticky;
top:0;
z-index:999;

}

.logo img{

height:75px;
width:auto;

}

nav ul{

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

}

nav a{

text-decoration:none;
color:white;

font-weight:bold;

transition:.3s;

}

nav a:hover,
.active{

color:#d9a15f;

}

/* =====================================================
HERO
===================================================== */

.hero{

min-height:90vh;

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

background:
linear-gradient(
rgba(0,0,0,.70),
rgba(0,0,0,.70)
),
url("images/hero-bg.jpg");

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

padding:50px;

}

.hero-content{

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

gap:60px;
max-width:1400px;

}

.hero-logo img{

width:450px;
max-width:100%;

}

.hero-text{

max-width:650px;

}

.hero-text h1{

font-size:4rem;
line-height:1.1;

margin-bottom:25px;

color:#d9a15f;

}

.hero-text p{

font-size:1.2rem;
margin-bottom:30px;

}

.hero-buttons{

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

}

/* =====================================================
BUTTONS
===================================================== */

.btn{

display:inline-block;

padding:14px 32px;

background:#b76d2b;

color:white;
text-decoration:none;

font-weight:bold;

border-radius:5px;

transition:.3s;

}

.btn:hover{

background:#d89b57;
transform:translateY(-2px);

}

.secondary{

background:#333;

}

.secondary:hover{

background:#555;

}

/* =====================================================
PAGE HEADER
===================================================== */

.page-header{

text-align:center;

padding:90px 30px;

background:
linear-gradient(
rgba(0,0,0,.75),
rgba(0,0,0,.75)
),
url("images/embers.jpg");

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

}

.page-header h1{

font-size:3rem;
color:#d9a15f;

margin-bottom:10px;

}

.page-header p{

font-size:1.1rem;

}

/* =====================================================
CONTAINERS
===================================================== */

.container{

max-width:1200px;
margin:auto;

padding:0 20px;

}

/* =====================================================
ABOUT PREVIEW
===================================================== */

.about-preview{

padding:80px 10%;
text-align:center;

}

.about-preview h2{

font-size:2.5rem;
color:#d9a15f;

margin-bottom:25px;

}

/* =====================================================
SERVICES
===================================================== */

.services-preview,
.services-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(320px,1fr));

gap:35px;

padding:80px 10%;

}

.service-card{

background:#171717;

border:1px solid #333;

border-radius:12px;

overflow:hidden;

transition:.3s;

}

.service-card:hover{

transform:translateY(-8px);

border-color:#d9a15f;

}

.service-card img{

width:100%;
height:240px;

object-fit:cover;

}

.service-card h2,
.service-card h3{

padding:20px 20px 10px;
color:#d9a15f;

}

.service-card p{

padding:0 20px 25px;

}

/* =====================================================
FEATURED SECTION
===================================================== */

.featured-work{

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

padding:100px 10%;

align-items:center;

}

.featured-image img{

width:100%;
border-radius:12px;

border:2px solid #b76d2b;

}

.featured-text h2{

font-size:2.5rem;
margin-bottom:20px;

color:#d9a15f;

}

/* =====================================================
ABOUT PAGE
===================================================== */

.about-hero,
.military-section,
.law-section{

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

align-items:center;

padding:90px 10%;

}

.about-image img,
.military-image img,
.law-image img{

width:100%;

border-radius:12px;

border:2px solid #b76d2b;

}

.about-text h2,
.military-content h2,
.law-content h2{

font-size:2.5rem;

color:#d9a15f;

margin-bottom:20px;

}

.about-text p,
.military-content p,
.law-content p{

margin-bottom:15px;

}

.about-text ul,
.military-content ul,
.law-content ul{

margin-left:20px;

}

.about-text li,
.military-content li,
.law-content li{

margin-bottom:10px;

}

/* =====================================================
CERTIFICATIONS
===================================================== */

.certifications{

padding:100px 10%;

text-align:center;

}

.certifications h2{

font-size:2.5rem;

margin-bottom:50px;

color:#d9a15f;

}

.cert-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:25px;

}

.cert-card{

background:#171717;

border:1px solid #333;

border-radius:10px;

overflow:hidden;

transition:.3s;

}

.cert-card:hover{

transform:scale(1.03);

border-color:#d9a15f;

}

.cert-card img{

width:100%;
display:block;

}

/* =====================================================
WORKSHOP
===================================================== */

.workshop-section{

padding:100px 10%;
text-align:center;

}

.workshop-section h2{

font-size:2.5rem;
color:#d9a15f;

margin-bottom:30px;

}

.workshop-section img{

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

border-radius:12px;

border:2px solid #b76d2b;

margin-bottom:30px;

}

/* =====================================================
VALUES / CTA
===================================================== */

.values,
.cta,
.contact-cta{

padding:120px 10%;

text-align:center;

background:
linear-gradient(
rgba(0,0,0,.75),
rgba(0,0,0,.75)
),
url("images/embers.jpg");

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

}

.values h2,
.cta h2,
.contact-cta h2{

font-size:2.5rem;

margin-bottom:20px;

color:#d9a15f;

}

.values p,
.cta p,
.contact-cta p{

max-width:800px;
margin:auto auto 25px;

}

/* =====================================================
CONTACT PAGE
===================================================== */

.contact-banner img{

width:100%;
height:350px;

object-fit:cover;

display:block;

}

.contact-wrapper{

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

padding:100px 10%;

}

.contact-info h2,
.contact-form-container h2{

color:#d9a15f;

margin-bottom:20px;

}

.info-card{

background:#171717;

padding:20px;

margin-bottom:20px;

border-left:4px solid #b76d2b;

}

.contact-form-container{

background:#171717;

padding:35px;

border-radius:10px;

}

.contact-form-container form{

display:flex;
flex-direction:column;

gap:15px;

}

input,
select,
textarea{

padding:15px;

background:#111;

border:1px solid #333;

color:white;

font-size:1rem;

border-radius:5px;

}

input:focus,
select:focus,
textarea:focus{

outline:none;

border-color:#d9a15f;

}

button{

padding:15px;

background:#b76d2b;

color:white;

border:none;

cursor:pointer;

font-size:1rem;

font-weight:bold;

border-radius:5px;

transition:.3s;

}

button:hover{

background:#d89b57;

}

.contact-gallery{

padding:100px 10%;

text-align:center;

}

.contact-gallery h2{

margin-bottom:40px;

font-size:2.5rem;

color:#d9a15f;

}

.gallery-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(300px,1fr));

gap:30px;

}

.gallery-card{

background:#171717;

border-radius:10px;

overflow:hidden;

}

.gallery-card img{

width:100%;
height:250px;

object-fit:cover;

}

.gallery-card h3{

padding:20px;

}

/* =====================================================
FOOTER
===================================================== */

footer{

background:#111;

border-top:2px solid #b76d2b;

text-align:center;

padding:35px 20px;

}

footer p{

margin:5px 0;

}

/* =====================================================
RESPONSIVE
===================================================== */

@media(max-width:992px){

.hero-content,
.about-hero,
.military-section,
.law-section,
.featured-work,
.contact-wrapper{

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

}

.hero-text{

text-align:center;

}

.hero-text h1{

font-size:3rem;

}

.hero-buttons{

justify-content:center;

}

}

@media(max-width:768px){

header{

flex-direction:column;
gap:15px;

}

nav ul{

flex-wrap:wrap;
justify-content:center;

gap:15px;

}

.hero{

padding:30px;

}

.hero-text h1{

font-size:2.4rem;

}

.page-header h1{

font-size:2.2rem;

}

.values h2,
.cta h2,
.contact-cta h2,
.workshop-section h2,
.certifications h2{

font-size:2rem;

}

}