/* ==========================================================
   CarolinaHomesPro Global Design System v1.0
   ========================================================== */

/* ========= CSS Variables ========= */

:root{

    --primary:#12355B;
    --secondary:#2563EB;
    --accent:#16A34A;

    --text:#1F2937;
    --text-light:#6B7280;

    --white:#FFFFFF;
    --background:#F8FAFC;

    --border:#E5E7EB;

    --radius-sm:8px;
    --radius:16px;
    --radius-lg:24px;

    --shadow-sm:0 4px 12px rgba(0,0,0,.05);
    --shadow:0 10px 30px rgba(0,0,0,.06);
    --shadow-lg:0 20px 50px rgba(0,0,0,.10);

    --transition:.3s ease;

    --container:1200px;

}

/* ========= Reset ========= */

*,
*::before,
*::after{

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    margin:0;

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

    color:var(--text);

    background:var(--background);

    line-height:1.7;

    font-size:16px;

    overflow-x:hidden;

}

/* ========= Typography ========= */

h1,h2,h3,h4,h5,h6{

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

    color:var(--primary);

    margin:0 0 20px;

    line-height:1.2;

    font-weight:700;

}

h1{

    font-size:56px;

}

h2{

    font-size:42px;

}

h3{

    font-size:26px;

}

h4{

    font-size:22px;

}

p{

    margin:0 0 20px;

    color:var(--text-light);

}

a{

    color:var(--secondary);

    text-decoration:none;

    transition:var(--transition);

}

a:hover{

    color:var(--primary);

}

/* ========= Images ========= */

img{

    max-width:100%;

    height:auto;

    display:block;

}

/* ========= Layout ========= */

.chp-container{

    width:100%;

    max-width:var(--container);

    margin:0 auto;

    padding:0 20px;

}

.chp-section{

    padding:100px 0;

}

.chp-light{

    background:var(--background);

}

.chp-white{

    background:#fff;

}

/* ========= Buttons ========= */

.chp-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    background:var(--accent);

    color:#fff;

    padding:15px 32px;

    border-radius:12px;

    font-weight:700;

    transition:var(--transition);

    box-shadow:var(--shadow-sm);

}

.chp-btn:hover{

    background:#15803D;

    color:#fff;

    transform:translateY(-2px);

}

.chp-btn-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

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

    color:var(--primary);

    padding:15px 32px;

    border-radius:12px;

    font-weight:700;

    transition:var(--transition);

}

.chp-btn-outline:hover{

    background:var(--primary);

    color:#fff;

}

/* ========= Cards ========= */

.chp-card{

    background:#fff;

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:30px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.chp-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow);

}

/* ========= Section Heading ========= */

.section-heading{

    text-align:center;

    max-width:760px;

    margin:0 auto 60px;

}

.section-tag{

    display:inline-block;

    padding:8px 18px;

    background:#E8F5E9;

    color:var(--accent);

    border-radius:30px;

    font-size:14px;

    font-weight:700;

    margin-bottom:18px;

}

.section-heading p{

    font-size:18px;

}

/* ========= Lists ========= */

ul{

    margin:0;

    padding:0;

    list-style:none;

}

/* ========= Utilities ========= */

.text-center{

    text-align:center;

}

.mb-20{

    margin-bottom:20px;

}

.mb-40{

    margin-bottom:40px;

}

.mt-40{

    margin-top:40px;

}

/* ========= Responsive ========= */

@media(max-width:992px){

    h1{

        font-size:44px;

    }

    h2{

        font-size:34px;

    }

    .chp-section{

        padding:80px 0;

    }

}

@media(max-width:768px){

    h1{

        font-size:36px;

    }

    h2{

        font-size:30px;

    }

    h3{

        font-size:22px;

    }

    .chp-section{

        padding:60px 0;

    }

    .chp-container{

        padding:0 15px;

    }

}

/* =========================================================
   GLOBAL TYPOGRAPHY READABILITY
========================================================= */

body {
    color: #475569;
}

p,
li {
    color: #475569;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #173b63;
}

small,
.meta,
.entry-meta,
.post-date {
    color: #64748b;
}