/* ==========================================
   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:#18a8ff;

    margin-left:5px;

}



nav {

    display:flex;

    gap:35px;

}



nav a {

    color:#d8dde5;

    font-size:.95rem;

    transition:.3s;

}



nav a:hover {

    color:#18a8ff;

}




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


.btn {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 32px;

    background:#18a8ff;

    color:white;

    border-radius:6px;

    font-weight:700;

    transition:.3s;

    border:2px solid #18a8ff;

}



.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:#18a8ff;

    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:#121821;

    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:#18a8ff;

}



.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:#121821;

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

    padding:40px 35px;

    border-radius:15px;

    transition:.35s;

}



.service-card:hover {

    transform:translateY(-10px);

    border-color:#18a8ff;

    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:#10151c;

}



.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:#070a0e;

    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;

}


}