/* ==========================================
   DOUGEATSDICKS WATERPROOFING
   Premium Industrial Design System
========================================== */


/* RESET */

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


html {
    scroll-behavior: smooth;
}


body {

    font-family: 'Inter', sans-serif;

    background: #0b0f14;

    color: #ffffff;

    line-height: 1.7;

}



img {
    max-width:100%;
    display:block;
}



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



.container {

    width:min(1200px, 90%);

    margin:auto;

}



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


.header {

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    background:rgba(10,14,20,.75);

    backdrop-filter:blur(15px);

    border-bottom:1px solid rgba(255,255,255,.08);

}



.nav {

    height:90px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.logo {

    font-size:1.4rem;

    font-weight:900;

    letter-spacing:-1px;

}



.logo span {

    color:#d62828;

    margin-left:5px;

}



nav {

    display:flex;

    gap:35px;

}



nav a {

    color:#d8dde5;

    font-size:.95rem;

    transition:.3s;

}



nav a:hover {

    color:#d62828;

}




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


.btn {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 32px;

    background:#d62828;

    color:white;

    border-radius:6px;

    font-weight:700;

    transition:.3s;

    border:2px solid #d62828;

}



.btn:hover {

    transform:translateY(-3px);

    box-shadow:0 15px 40px rgba(24,168,255,.35);

}



.btn-small {

    padding:10px 22px;

}



.btn.outline {

    background:transparent;

    border-color:white;

}



.btn.outline:hover {

    background:white;

    color:#111;

}



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


.hero {

    height:100vh;

    min-height:700px;

    position:relative;

    display:flex;

    align-items:center;

    background:

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

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

    background-size:cover;

    background-position:center;

}



.hero-overlay {

    position:absolute;

    inset:0;

    background:

    radial-gradient(
    circle at center,
    transparent,
    rgba(0,0,0,.8)
    );

}



.hero-content {

    position:relative;

    max-width:850px;

}



.eyebrow {

    color:#d62828;

    font-size:.85rem;

    letter-spacing:3px;

    font-weight:700;

    margin-bottom:25px;

}



.hero h1 {

    font-size:clamp(3rem,6vw,5.5rem);

    line-height:1.05;

    letter-spacing:-3px;

    margin-bottom:30px;

}



.hero-text {

    font-size:1.25rem;

    max-width:700px;

    color:#d3d8df;

    margin-bottom:45px;

}



.hero-buttons {

    display:flex;

    gap:20px;

}



/* ==========================================
   TRUST BAR
========================================== */


.trust {

    background:#181818;

    border-bottom:1px solid rgba(255,255,255,.05);

}



.trust-grid {

    display:grid;

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

    padding:45px 0;

}



.trust div {

    text-align:center;

    border-right:1px solid rgba(255,255,255,.1);

}



.trust div:last-child {

    border:none;

}



.trust strong {

    display:block;

    font-size:2.5rem;

    color:#d62828;

}



.trust span {

    color:#b8c0ca;

}





/* ==========================================
   SECTIONS
========================================== */


.section {

    padding:120px 0;

}



.section-heading {

    max-width:700px;

    margin-bottom:70px;

}



.section h2 {

    font-size:3rem;

    line-height:1.15;

    letter-spacing:-1.5px;

    margin-bottom:20px;

}



.section-heading p:last-child {

    color:#b8c0ca;

    font-size:1.1rem;

}





/* ==========================================
   SERVICE CARDS
========================================== */


.service-grid {

    display:grid;

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

    gap:30px;

}



.service-card {

    background:#181818;

    border:1px solid rgba(255,255,255,.08);

    padding:40px 35px;

    border-radius:15px;

    transition:.35s;

}



.service-card:hover {

    transform:translateY(-10px);

    border-color:#d62828;

    box-shadow:
    0 20px 60px rgba(0,0,0,.35);

}



.icon {

    font-size:2.5rem;

    margin-bottom:25px;

}



.service-card h3 {

    font-size:1.35rem;

    margin-bottom:15px;

}



.service-card p {

    color:#b8c0ca;

}





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


.dark {

    background:#141414;

}



.split {

    display:grid;

    grid-template-columns:1fr 400px;

    gap:80px;

    align-items:center;

}



.split p {

    color:#c5ccd5;

    margin-bottom:20px;

}



.about-box {

    background:#151d27;

    padding:40px;

    border-radius:15px;

    border:1px solid rgba(255,255,255,.08);

}



.about-box h3 {

    margin-bottom:25px;

}



.about-box li {

    list-style:none;

    padding:10px 0;

    color:#dce2e9;

}





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


.contact {

    padding:100px 0;

}



.contact-box {

    text-align:center;

    background:

    linear-gradient(
    135deg,
    #151d27,
    #0d1117
    );

    padding:70px;

    border-radius:20px;

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

}



.contact h2 {

    font-size:3rem;

    margin-bottom:20px;

}





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


footer {

    padding:40px 0;

    background:#090909;

    color:#8d96a3;

    text-align:center;

}





/* ==========================================
   MOBILE
========================================== */


@media(max-width:900px){


nav {

display:none;

}



.hero {

height:auto;

padding:180px 0 120px;

}



.hero-buttons {

flex-direction:column;

}



.trust-grid {

grid-template-columns:1fr 1fr;

gap:30px;

}



.trust div {

border:none;

}



.service-grid {

grid-template-columns:1fr;

}



.split {

grid-template-columns:1fr;

gap:40px;

}



.section h2 {

font-size:2.2rem;

}


.contact-box {

padding:40px 20px;

}


}
/* ==========================================
   HERO PREMIUM UPGRADES
========================================== */


.hero-badge {

display:inline-flex;

align-items:center;

gap:12px;

background:rgba(255,255,255,.08);

border:1px solid rgba(255,255,255,.15);

padding:10px 18px;

border-radius:50px;

font-size:.75rem;

font-weight:700;

letter-spacing:1px;

margin-bottom:30px;

backdrop-filter:blur(10px);

}



.hero-badge span {

width:10px;

height:10px;

background:#d62828;

border-radius:50%;

box-shadow:
0 0 15px #d62828;

}





.hero h1 {

max-width:900px;

}





.hero-trust {

display:flex;

gap:35px;

margin-top:60px;

flex-wrap:wrap;

}



.hero-trust div {

display:flex;

align-items:center;

gap:10px;

color:#d8dde5;

font-size:.95rem;

}



.hero-trust strong {

color:#d62828;

font-size:1.3rem;

}




/* animated background effect */

.hero::after {

content:"";

position:absolute;

inset:0;

background:

linear-gradient(
90deg,
rgba(24,168,255,.12),
transparent
);

animation:pulseGlow 8s infinite alternate;

pointer-events:none;

}



@keyframes pulseGlow {


from {

opacity:.2;

}


to {

opacity:.7;

}


}





@media(max-width:700px){


.hero-trust {

flex-direction:column;

gap:15px;

}


}
/* ==========================================
   PROBLEM SOLUTIONS SECTION
========================================== */


.problems {

padding:120px 0;

background:#111111;

}



.problem-grid {

display:grid;

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

gap:25px;

}



.problem-card {

background:#181818;

border:1px solid rgba(255,255,255,.08);

padding:35px;

border-radius:15px;

transition:.35s;

}



.problem-card:hover {

transform:translateY(-8px);

border-color:#d62828;

}



.problem-number {

font-size:3rem;

font-weight:900;

color:rgba(24,168,255,.25);

margin-bottom:15px;

}



.problem-card h3 {

font-size:1.2rem;

line-height:1.3;

margin-bottom:15px;

}



.problem-card p {

color:#b8c0ca;

font-size:.95rem;

margin-bottom:20px;

}



.problem-card span {

color:#d62828;

font-weight:700;

font-size:.9rem;

}



@media(max-width:1000px){

.problem-grid {

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

}

}



@media(max-width:600px){

.problem-grid {

grid-template-columns:1fr;

}

}
/* ==========================================
   PROJECTS SECTION
========================================== */


.projects {

padding:120px 0;

background:#10151c;

}




.project-grid {

display:grid;

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

gap:30px;

}



.project-card {

background:#181818;

border-radius:18px;

overflow:hidden;

border:1px solid rgba(255,255,255,.08);

transition:.4s;

}



.project-card:hover {

transform:translateY(-10px);

box-shadow:
0 25px 60px rgba(0,0,0,.4);

}



.project-image {

height:280px;

overflow:hidden;

}



.project-image img {

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}



.project-card:hover img {

transform:scale(1.08);

}




.project-content {

padding:30px;

}



.project-content span {

font-size:.75rem;

letter-spacing:2px;

font-weight:700;

color:#d62828;

}



.project-content h3 {

font-size:1.4rem;

margin:15px 0;

}



.project-content p {

color:#b8c0ca;

}





@media(max-width:900px){

.project-grid {

grid-template-columns:1fr;

}

}