/* ===========================================
   CleanSepticUSA
   Premium Style Sheet
=========================================== */

:root {

    --primary: #16a34a;
    --primary-dark: #15803d;
    --secondary: #38bdf8;

    --dark: #0f172a;
    --dark-light: #1e293b;

    --light: #f8fafc;
    --white: #ffffff;

    --gray: #64748b;
    --gray-light: #e2e8f0;

    --radius: 18px;

    --shadow: 0 10px 30px rgba(0, 0, 0, .08);

    --transition: .35s ease;

    --container: 1200px;

}

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

html {

    scroll-behavior: smooth;

}

body {

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

    background: #ffffff;

    color: var(--dark);

    line-height: 1.7;

    overflow-x: hidden;

}

img {

    max-width: 100%;

    display: block;

}

a {

    text-decoration: none;

    color: inherit;

}

ul {

    list-style: none;

}

.container {

    width: min(92%, 1200px);

    margin: auto;

}

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

.header {

    position: sticky;

    top: 0;

    z-index: 999;

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

    backdrop-filter: blur(14px);

    border-bottom: 1px solid #edf2f7;

}

.header .container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 18px 0;

}

.logo {

    display: flex;

    align-items: center;

    gap: 12px;

    font-weight: 700;

    font-size: 24px;

    color: var(--dark);

}

.logo img {

    width: 42px;

    height: 42px;

}

nav ul {

    display: flex;

    gap: 35px;

    align-items: center;

}

nav li {

    font-weight: 600;

    font-size: 15px;

    color: #475569;

    transition: .3s;

}

nav li:hover {

    color: var(--primary);

}

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

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 16px 34px;

    border-radius: 999px;

    font-weight: 700;

    transition: var(--transition);

    cursor: pointer;

}

.btn-primary {

    background: var(--primary);

    color: #fff;

    box-shadow: 0 10px 25px rgba(22, 163, 74, .25);

}

.btn-primary:hover {

    background: var(--primary-dark);

    transform: translateY(-4px);

}

.btn-secondary {

    border: 2px solid var(--primary);

    color: var(--primary);

    background: white;

}

.btn-secondary:hover {

    background: var(--primary);

    color: white;

}

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

.hero {

    padding: 110px 0;

    background:

        linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);

}

.hero-grid {

    display: grid;

    grid-template-columns: 1fr 520px;

    align-items: center;

    gap: 70px;

}

.badge {

    display: inline-block;

    background: #dcfce7;

    color: #166534;

    padding: 10px 18px;

    border-radius: 999px;

    font-weight: 600;

    margin-bottom: 25px;

}

.hero h1 {

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

    font-size: 58px;

    line-height: 1.1;

    margin-bottom: 30px;

    color: var(--dark);

}

.hero p {

    font-size: 20px;

    color: #475569;

    margin-bottom: 35px;

}

.hero-buttons {

    display: flex;

    gap: 20px;

    margin-bottom: 40px;

}

.hero-features {

    display: flex;

    flex-wrap: wrap;

    gap: 22px;

    color: #475569;

    font-weight: 600;

}

.hero-image {

    display: flex;

    justify-content: center;

}

.hero-image img {

    width: 420px;

    filter: drop-shadow(0 25px 45px rgba(0, 0, 0, .12));

}

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

section {

    padding: 90px 0;

}

.section-heading {

    text-align: center;

    margin-bottom: 65px;

}

.section-heading span {

    display: inline-block;

    color: var(--primary);

    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 15px;

    font-size: 14px;

    text-transform: uppercase;

}

.section-heading h2 {

    font-size: 42px;

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

    margin-bottom: 18px;

}

.section-heading p {

    max-width: 760px;

    margin: auto;

    color: #64748b;

    font-size: 18px;

}

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

.trust {

    background: #f8fafc;

}

.trust-card {

    background: white;

    padding: 60px;

    border-radius: 22px;

    box-shadow: var(--shadow);

    text-align: center;

}

.trust-card h2 {

    font-size: 38px;

    margin-bottom: 20px;

}

.trust-card p {

    font-size: 18px;

    color: #64748b;

}

/* ==========================
PROBLEMS
========================== */

.problem-grid {

    display: grid;

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

    gap: 30px;

}

.problem-card {

    background: white;

    padding: 35px;

    border-radius: 20px;

    box-shadow: var(--shadow);

    transition: .35s;

}

.problem-card:hover {

    transform: translateY(-10px);

}

.problem-card h3 {

    font-size: 24px;

    margin-bottom: 15px;

}

.problem-card p {

    color: #64748b;

}

/* ==========================
HOW IT WORKS
========================== */

.steps-grid {

    display: grid;

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

    gap: 30px;

}

.step-card {

    background: #fff;

    padding: 40px;

    border-radius: 20px;

    box-shadow: var(--shadow);

}

.step-number {

    width: 60px;

    height: 60px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--primary);

    color: white;

    font-size: 22px;

    font-weight: bold;

    margin-bottom: 20px;

}

.step-card h3 {

    margin-bottom: 15px;

    font-size: 24px;

}

.step-card p {

    color: #64748b;

}

/* ==========================================
   REVIEW SECTION
========================================== */

.review {

    background: #f8fafc;

}

.review-grid {

    display: grid;

    grid-template-columns: 420px 1fr;

    gap: 70px;

    align-items: center;

}

.review-grid img {

    width: 100%;

    border-radius: 20px;

    box-shadow: 0 20px 50px rgba(0, 0, 0, .08);

}

.review-grid p {

    margin-bottom: 22px;

    font-size: 18px;

    color: #64748b;

}

/* ==========================================
BENEFITS
========================================== */

.benefits {

    background: #ffffff;

}

.benefits-grid {

    display: grid;

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

    gap: 30px;

}

.benefit-card {

    padding: 35px;

    border-radius: 20px;

    background: #fff;

    box-shadow: var(--shadow);

    transition: .35s;

    border: 1px solid #eef2f7;

}

.benefit-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 20px 40px rgba(0, 0, 0, .12);

}

.benefit-card h3 {

    margin-bottom: 15px;

    font-size: 24px;

    color: var(--dark);

}

.benefit-card p {

    color: #64748b;

}

/* ==========================================
TABLE
========================================== */

.comparison {

    background: #f8fafc;

}

.comparison-table {

    width: 100%;

    border-collapse: collapse;

    background: white;

    border-radius: 20px;

    overflow: hidden;

    box-shadow: var(--shadow);

}

.comparison-table th {

    background: var(--primary);

    color: white;

    padding: 22px;

    font-size: 18px;

}

.comparison-table td {

    padding: 22px;

    border-bottom: 1px solid #edf2f7;

    text-align: center;

}

.comparison-table tr:hover {

    background: #f8fafc;

}

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

.cta-banner {

    background: linear-gradient(135deg, #16a34a, #15803d);

    color: white;

    text-align: center;

}

.cta-banner h2 {

    font-size: 48px;

    margin-bottom: 18px;

}

.cta-banner p {

    font-size: 20px;

    opacity: .92;

    margin-bottom: 35px;

}

.cta-banner .btn {

    background: white;

    color: var(--primary);

}

/* ==========================================
FAQ
========================================== */

.faq {

    background: white;

}

.faq-item {

    background: #f8fafc;

    padding: 30px;

    border-radius: 18px;

    margin-bottom: 20px;

    border: 1px solid #edf2f7;

    transition: .3s;

}

.faq-item:hover {

    border-color: var(--primary);

}

.faq-item h3 {

    font-size: 22px;

    margin-bottom: 15px;

}

.faq-item p {

    color: #64748b;

}

/* ==========================================
BLOG
========================================== */

.latest-blog {

    background: #f8fafc;

}

.blog-grid {

    display: grid;

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

    gap: 30px;

}

.blog-card {

    background: white;

    padding: 35px;

    border-radius: 20px;

    box-shadow: var(--shadow);

    transition: .35s;

}

.blog-card:hover {

    transform: translateY(-10px);

}

.blog-card h3 {

    font-size: 24px;

    margin-bottom: 15px;

}

.blog-card p {

    color: #64748b;

    margin-bottom: 20px;

}

.blog-card a {

    font-weight: 700;

    color: var(--primary);

}

/* ==========================================
FINAL CTA
========================================== */

.final-cta {

    background: var(--dark);

    color: white;

    text-align: center;

}

.final-cta h2 {

    font-size: 48px;

    margin-bottom: 20px;

}

.final-cta p {

    font-size: 20px;

    max-width: 800px;

    margin: auto;

    margin-bottom: 35px;

    opacity: .9;

}

/* ==========================================
AFFILIATE DISCLOSURE
========================================== */

.affiliate-disclosure {

    background: #fff8e1;

    border-top: 1px solid #ffe082;

    border-bottom: 1px solid #ffe082;

}

.affiliate-disclosure h3 {

    margin-bottom: 15px;

    font-size: 28px;

}

.affiliate-disclosure p {

    color: #6b7280;

}

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

.footer {

    background: #0f172a;

    color: white;

    padding: 80px 0 30px;

}

.footer-grid {

    display: grid;

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

    gap: 60px;

}

.footer h3,

.footer h4 {

    margin-bottom: 20px;

}

.footer p {

    color: #94a3b8;

}

.footer ul li {

    margin-bottom: 12px;

}

.footer a {

    color: #cbd5e1;

    transition: .3s;

}

.footer a:hover {

    color: white;

}

.copyright {

    margin-top: 50px;

    padding-top: 30px;

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

    text-align: center;

    color: #94a3b8;

}

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

@media(max-width:1100px) {

    .hero-grid,
    .review-grid {

        grid-template-columns: 1fr;

        text-align: center;

    }

    .hero-buttons {

        justify-content: center;

    }

    .hero-features {

        justify-content: center;

    }

    .problem-grid,
    .benefits-grid,
    .blog-grid {

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

    }

    .footer-grid {

        grid-template-columns: 1fr;

        text-align: center;

    }

}

@media(max-width:768px) {

    nav {

        display: none;

    }

    .hero {

        padding: 70px 0;

    }

    .hero h1 {

        font-size: 38px;

    }

    .section-heading h2 {

        font-size: 32px;

    }

    .problem-grid,
    .steps-grid,
    .benefits-grid,
    .blog-grid {

        grid-template-columns: 1fr;

    }

    .hero-buttons {

        flex-direction: column;

    }

    .btn {

        width: 100%;

    }

    .cta-banner h2,
    .final-cta h2 {

        font-size: 34px;

    }

    .review-grid {

        gap: 40px;

    }

    .header .container {

        padding: 15px 0;

    }

}

html {

    scroll-padding-top: 100px;

}

::selection {

    background: var(--primary);

    color: white;

}

/* Back To Top Button */

.back-to-top {

    position: fixed;

    bottom: 30px;

    right: 30px;

    width: 55px;

    height: 55px;

    border: none;

    border-radius: 50%;

    background: #16a34a;

    color: #fff;

    font-size: 22px;

    cursor: pointer;

    display: none;

    align-items: center;

    justify-content: center;

    box-shadow: 0 15px 30px rgba(0, 0, 0, .2);

    transition: .3s;

    z-index: 999;

}

.back-to-top:hover {

    transform: translateY(-5px);

    background: #15803d;

}

/* ==========================================
BLOG PAGE
========================================== */

.blog-hero {

    padding: 80px 0;

    background: linear-gradient(180deg, #f8fafc, #ffffff);

}

.blog-search {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 15px;

    margin: 40px auto;

    max-width: 700px;

}

.blog-search input {

    flex: 1;

    padding: 18px 25px;

    border: 1px solid #e2e8f0;

    border-radius: 50px;

    font-size: 16px;

    outline: none;

    transition: .3s;

}

.blog-search input:focus {

    border-color: #16a34a;

    box-shadow: 0 0 0 4px rgba(22, 163, 74, .08);

}

.blog-search button {

    padding: 18px 35px;

    border: none;

    border-radius: 50px;

    background: #16a34a;

    color: #fff;

    font-weight: 700;

    cursor: pointer;

    transition: .3s;

}

.blog-search button:hover {

    background: #15803d;

}

.blog-categories {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 15px;

    margin-top: 25px;

}

.blog-categories a {

    padding: 12px 22px;

    background: #fff;

    border-radius: 999px;

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

    font-weight: 600;

    transition: .3s;

}

.blog-categories a:hover {

    background: #16a34a;

    color: white;

}

.featured-article {

    padding: 90px 0;

}

.featured-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 60px;

    align-items: center;

}

.featured-image img {

    width: 100%;

    border-radius: 25px;

    box-shadow: 0 20px 45px rgba(0, 0, 0, .08);

}

.featured-content h2 {

    font-size: 42px;

    line-height: 1.25;

    margin: 20px 0;

}

.featured-content p {

    font-size: 18px;

    color: #64748b;

    margin-bottom: 30px;

}

.article-meta {

    display: flex;

    gap: 20px;

    margin-bottom: 25px;

    font-weight: 600;

    color: #16a34a;

}

.blog-grid {

    display: grid;

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

    gap: 35px;

    margin-top: 50px;

}

.blog-card {

    background: white;

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 10px 30px rgba(0, 0, 0, .06);

    transition: .35s;

}

.blog-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 25px 45px rgba(0, 0, 0, .12);

}

.blog-card img {

    width: 100%;

    height: 230px;

    object-fit: cover;

}

.blog-content {

    padding: 30px;

}

.blog-content span {

    display: inline-block;

    padding: 6px 14px;

    border-radius: 999px;

    background: #dcfce7;

    color: #166534;

    font-size: 13px;

    font-weight: 700;

    margin-bottom: 18px;

}

.blog-content h3 {

    font-size: 25px;

    line-height: 1.3;

    margin-bottom: 18px;

}

.blog-content p {

    color: #64748b;

    margin-bottom: 25px;

}

.blog-content a {

    color: #16a34a;

    font-weight: 700;

}

.blog-content a:hover {

    text-decoration: underline;

}

.newsletter {

    padding: 90px 0;

    background: #f8fafc;

}

.newsletter .trust-card {

    max-width: 900px;

    margin: auto;

    text-align: center;

}

.newsletter h2 {

    margin-bottom: 20px;

}

.newsletter p {

    margin-bottom: 35px;

}

@media(max-width:1100px) {

    .featured-grid {

        grid-template-columns: 1fr;

    }

    .blog-grid {

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

    }

}

@media(max-width:768px) {

    .blog-search {

        flex-direction: column;

    }

    .blog-search input,

    .blog-search button {

        width: 100%;

    }

    .blog-grid {

        grid-template-columns: 1fr;

    }

    .featured-content h2 {

        font-size: 34px;

    }

    .article-meta {

        flex-direction: column;

        gap: 10px;

    }

    .blog-categories {

        justify-content: flex-start;

    }

}

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

.contact-hero{

padding:110px 0 70px;

background:linear-gradient(180deg,#f8fafc,#ffffff);

text-align:center;

}

.contact-hero h1{

font-size:58px;

line-height:1.1;

margin:20px 0;

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

}

.contact-hero p{

max-width:760px;

margin:auto;

font-size:20px;

color:#64748b;

}

.section-tag{

display:inline-block;

padding:10px 18px;

background:#dcfce7;

color:#166534;

border-radius:999px;

font-weight:700;

font-size:14px;

letter-spacing:1px;

}

.contact-section{

padding:80px 0;

}

.contact-grid{

display:grid;

grid-template-columns:2fr 1fr;

gap:40px;

align-items:start;

}

.contact-form-card{

background:#ffffff;

padding:45px;

border-radius:24px;

box-shadow:0 20px 50px rgba(0,0,0,.08);

}

.contact-form-card h2{

font-size:34px;

margin-bottom:10px;

}

.contact-form-card>p{

margin-bottom:35px;

color:#64748b;

}

.contact-form{

display:flex;

flex-direction:column;

gap:22px;

}

.form-row{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

}

.form-group{

display:flex;

flex-direction:column;

}

.form-group label{

font-weight:600;

margin-bottom:8px;

}

.form-group input,

.form-group select,

.form-group textarea{

padding:16px;

border:1px solid #dbe3ea;

border-radius:14px;

font-size:16px;

font-family:inherit;

transition:.3s;

background:#fff;

}

.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus{

outline:none;

border-color:#16a34a;

box-shadow:0 0 0 4px rgba(22,163,74,.12);

}

.form-group textarea{

min-height:170px;

resize:vertical;

}

.contact-btn{

margin-top:10px;

width:220px;

}

.contact-info{

display:flex;

flex-direction:column;

gap:25px;

}

.info-card{

background:#fff;

padding:30px;

border-radius:22px;

box-shadow:0 12px 35px rgba(0,0,0,.08);

transition:.3s;

}

.info-card:hover{

transform:translateY(-6px);

}

.info-icon{

width:60px;

height:60px;

border-radius:50%;

background:#dcfce7;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

margin-bottom:20px;

}

.info-card h3{

margin-bottom:12px;

}

.info-card p{

color:#64748b;

line-height:1.8;

word-break:break-word;

}

.contact-faq{

background:#f8fafc;

}

.contact-faq .faq-item{

cursor:pointer;

}

@media(max-width:992px){

.contact-grid{

grid-template-columns:1fr;

}

.contact-info{

display:grid;

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

}

}

@media(max-width:768px){

.contact-hero{

padding:80px 0 50px;

}

.contact-hero h1{

font-size:38px;

}

.contact-hero p{

font-size:17px;

}

.form-row{

grid-template-columns:1fr;

}

.contact-btn{

width:100%;

}

.contact-info{

grid-template-columns:1fr;

}

.contact-form-card{

padding:28px;

}

}

/* ==========================================
LEGAL PAGES
========================================== */

.legal-page{

padding:80px 0;

background:#f8fafc;

}

.legal-card{

max-width:900px;

margin:auto;

background:#fff;

padding:50px;

border-radius:24px;

box-shadow:0 20px 50px rgba(0,0,0,.08);

}

.legal-card h2{

margin-top:35px;

margin-bottom:15px;

font-size:28px;

}

.legal-card p{

line-height:1.9;

color:#475569;

margin-bottom:18px;

}

.legal-card ul{

margin:20px 0 20px 25px;

}

.legal-card li{

margin-bottom:12px;

line-height:1.8;

color:#475569;

}

.legal-card a{

color:#16a34a;

font-weight:600;

}

@media(max-width:768px){

.legal-card{

padding:30px 24px;

}

.legal-card h2{

font-size:24px;

}

}

/* ==========================================
404 PAGE
========================================== */

.error-page{

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

padding:80px 20px;

background:linear-gradient(180deg,#f8fafc,#ffffff);

}

.error-card{

max-width:760px;

margin:auto;

background:#fff;

padding:60px;

border-radius:28px;

text-align:center;

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

}

.error-number{

font-size:120px;

font-weight:800;

color:#16a34a;

line-height:1;

margin-bottom:20px;

}

.error-card h1{

font-size:42px;

margin-bottom:20px;

}

.error-card p{

font-size:18px;

color:#64748b;

line-height:1.8;

margin-bottom:35px;

}

.popular-links{

margin-top:50px;

text-align:left;

}

.popular-links h2{

margin-bottom:20px;

}

.popular-links ul{

list-style:none;

padding:0;

}

.popular-links li{

margin-bottom:16px;

padding:16px;

background:#f8fafc;

border-radius:14px;

transition:.3s;

}

.popular-links li:hover{

background:#dcfce7;

}

.popular-links a{

font-weight:600;

color:#0f172a;

text-decoration:none;

}

.help-box{

margin-top:50px;

padding:30px;

background:#f0fdf4;

border-radius:20px;

}

.help-box h3{

margin-bottom:15px;

}

.help-box p{

margin-bottom:18px;

}

.help-box a{

font-weight:700;

color:#16a34a;

text-decoration:none;

}

@media(max-width:768px){

.error-card{

padding:35px 25px;

}

.error-number{

font-size:80px;

}

.error-card h1{

font-size:30px;

}

.error-card p{

font-size:16px;

}

}

/* ==========================================
PROS & CONS SECTION
========================================== */

.pros-cons{

padding:90px 0;

background:#f8fafc;

}

.two-column{

display:grid;

grid-template-columns:1fr 1fr;

gap:40px;

align-items:start;

}

.two-column>div{

background:#ffffff;

padding:40px;

border-radius:20px;

box-shadow:0 12px 35px rgba(0,0,0,.08);

}

.two-column h2{

font-size:32px;

margin-bottom:25px;

color:#0f172a;

}

.two-column ul{

list-style:none;

padding:0;

margin:0;

}

.two-column li{

position:relative;

padding-left:32px;

margin-bottom:18px;

font-size:18px;

line-height:1.7;

color:#334155;

}

.two-column li::before{

content:"✓";

position:absolute;

left:0;

top:0;

font-weight:700;

color:#16a34a;

}

.two-column>div:last-child li::before{

content:"!";

color:#f59e0b;

}

@media(max-width:768px){

.two-column{

grid-template-columns:1fr;

gap:25px;

}

.two-column>div{

padding:28px;

}

.two-column h2{

font-size:28px;

}

}