/* ==========================================================================
   PART 1 - GLOBAL: FONT IMPORT & CSS VARIABLES
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
    /* Base */
    --color-white:#fff;
    --color-body-bg:#f5f7fc;

    /* Text */
    --color-text-darkest:#111;
    --color-text-dark:#222;
    --color-text-body:#555;
    --color-text-muted:#666;
    --color-text-soft:#777;
    --color-text-light:#888;
    --color-text-footer:#8b8b8b;
    --color-text-city:#444;
    --up-bg: #f5f7fc;
    --up-white: #fff;
    --up-darkest: #111;
    --up-text: #555;
    --up-muted: #777;
    --up-brand: #4969e9;
    --up-brand-hover: #3455db;
    --up-brand-light: #edf3ff;
    --up-border: #e2e8f0;
    --up-border-input: #ddd;

    /* Borders */
    --color-border-light:#eee;
    --color-border-lighter:#ececec;
    --color-border-input:#ddd;
    --color-border-links:#d9d9d9;
    --color-border-feature:#edf0f7;
    --color-border-feature-tablet:#f1f1f1;

    /* Primary Brand Blue */
    --color-primary:#4969e9;
    --color-primary-dark:#3455db;
    --color-primary-bg:#edf3ff;
    --color-primary-bg2:#eef3ff;
    --color-primary-hover-bg:#edf2ff;

    /* Footer */
    --color-footer-btn:#4d6fe8;
    --color-footer-btn-dark:#315be8;

    /* Hero */
    --color-hero-badge-bg:#edf4ff;
    --color-hero-badge-text:#4b6bff;
    --color-hero-accent:#4c6fff;
    --color-hero-input-focus:#4b6fff;
    --color-hero-btn-start:#5a78ff;
    --color-hero-btn-end:#3455ff;

    /* Features */
    --color-feature-icon:#2f69ff;

    /* Stats */
    --color-stats-blue:#4b6ce2;

    /* Why Choose */
    --color-why-bg:#f4f7ff;
    --color-why-icon-bg:#dfe9ff;
    --color-why-tag:#3667ff;

    /* How It Works */
    --color-hw-dash:#a7b8f7;
    --color-hw-blue:#4d71ea;
    --color-hw-bg:#f6f8fc;

    /* Pricing */
    --color-pricing-bg:#f5f8fd;
    --color-pricing-blue:#4169e1;
    --color-pricing-gradient-end:#567df4;
    --color-pricing-hr:#e5e5e5;

    /* Guarantee */
    --color-guarantee-bg:#4569d8;
    --color-guarantee-right-bg:#f3f3f3;

    /* Google Review */
    --color-google-badge:#4775ff;
    --color-stars:#ffb400;
    --color-rating-blue:#3f6cff;

    /* Got Questions (dq) */
    --color-dq-gradient-start:#4c6be8;
    --color-dq-gradient-end:#5577ee;
    --color-dq-border:#1996ff;

    /* Overlay */
    --color-overlay-bg:#4470DC; /* Updated button/overlay color */
    --color-overlay-highlight:#FFC531; /* Updated button/accent highlight color */
    --color-overlay-highlight-hover:#e6b025;

    /* Shadows */
    --shadow-color-01:rgba(0,0,0,.07);
    --shadow-color-08:rgba(0,0,0,.08);
    --shadow-color-1:rgba(0,0,0,.1);
    --shadow-color-12:rgba(0,0,0,.12);
    --shadow-color-15:rgba(0,0,0,.15);
    --shadow-color-18:rgba(0,0,0,.18);
    --shadow-color-2:rgba(0,0,0,.2);
    --shadow-primary-25:rgba(73,105,233,.25);
    --shadow-footer-btn-25:rgba(77,111,232,.25);
    --shadow-feature-3:rgba(47,105,255,.3);
    --shadow-stats-18:rgba(75,108,226,.18);
    --shadow-hw-25:rgba(77,113,234,.25);
    --shadow-pricing-2:rgba(65,105,225,.20);

    /* Additional raw colors */
    --color-blog-hover:#3768f5;
    --color-dropdown-mobile-bg:#fafafa;
    --shadow-hero-btn-35:rgba(75,107,255,.35);
    --color-feature-hover-bg:#f7faff;
    --color-divider:#e3e7ef;
    --shadow-pricing-wrapper:rgba(15,35,95,.08);
    --shadow-white-35:rgba(255,255,255,.35);
    --color-white-90:rgba(255,255,255,.9);
    --color-white-12:rgba(255,255,255,.12);
    --color-white-15:rgba(255,255,255,.15);
    --color-white-85:rgba(255,255,255,.85);
    --color-white-08:rgba(255,255,255,.08);
    --color-white-18:rgba(255,255,255,.18);
    --color-white-05:rgba(255,255,255,.05);
    --color-black:#000;
    --color-white-82:rgba(255,255,255,.82);
    --color-white-30:rgba(255,255,255,.30);
    --color-dropdown-mobile-bg2:#f8f8f8;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Inter',sans-serif;
}

body{
    background:var(--color-body-bg);
}

/* ==========================================================================
   PART 2 - HEADER: TOP BAR, LOGO, NAV MENU, BUTTONS
   ========================================================================== */

.topHeader{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    background:var(--color-primary);
    z-index:1000000;
    box-shadow:0 3px 18px var(--shadow-color-01);
}

.topHeader-wrapper{
    max-width:1350px;
    margin:auto;
    padding:16px 35px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.topHeader-logo img{
    width:210px;
    height:auto;
    display:block;
}

.topHeader-nav{
    margin-left:auto;
    z-index:1000001;
}

.topHeader-menu{
    display:flex;
    align-items:center;
    list-style:none;
    gap:38px;
    margin:0;
    padding:0;
}

.topHeader-menu li{
    list-style:none;
    display:flex;
    align-items:center;
}

.topHeader-menu li a{
    display:flex;
    align-items:center;
    gap:6px;
    text-decoration:none;
    color:var(--color-white);
    font-size:14px;
    font-weight:500;
    transition:.3s;
}

.topHeader-menu li a:hover{
    color:var(--color-white-85);
}

.topHeader-menu li i{
    font-size:11px;
}

.topHeader-right{
    display:flex;
    align-items:center;
    gap:18px;
    margin-left:35px;
}

.topHeader-btn{
    text-decoration:none;
    color:var(--color-text-darkest);
    background:var(--color-overlay-highlight);
    padding:10px 24px;
    border-radius:40px;
    font-size:14px;
    font-weight:700;
    transition:.35s;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

.topHeader-btn:hover{
    background:var(--color-overlay-highlight-hover);
    color:var(--color-text-darkest);
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(0,0,0,0.15);
}

.topHeader-menuBtn{
    display:none;
    font-size:26px;
    cursor:pointer;
    color:var(--color-white);
    position:relative;
    z-index:1000002;
}

/* Dropdowns */
#navResidential, #navCommercial, #navAccount {
    position:relative;
}

.residentialDropdown, .commercialDropdown {
    position:absolute;
    top:115%;
    left:0;
    width:330px;
    background:var(--color-white);
    border-radius:20px;
    padding:18px;
    box-shadow:0 15px 40px var(--shadow-color-15);
    display:none;
    z-index:9999;
}

.residentialDropdown {
    max-height:350px;
    overflow-y:auto;
}

#navResidential:hover .residentialDropdown,
#navCommercial:hover .commercialDropdown,
#navAccount:hover .accountDropdown {
    display:block;
}

.residentialDropdown h3, .commercialDropdown h3 {
    font-size:16px;
    font-weight:600;
    margin-bottom:18px;
    color:var(--color-text-darkest);
}

.residentialDropdown ul, .commercialDropdown ul, .blogDropdown ul, .accountDropdown ul {
    list-style:none;
    padding:0;
}

.residentialDropdown li, .commercialDropdown li {
    border-bottom:1px solid var(--color-border-light);
}

.residentialDropdown li:last-child, .commercialDropdown li:last-child {
    border:none;
}

.residentialDropdown li a, .commercialDropdown li a {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 10px;
    border-radius:10px;
    text-decoration:none;
    color:var(--color-text-dark);
    transition:.3s;
}

.residentialDropdown li a:hover, .commercialDropdown li a:hover {
    background:var(--color-primary-hover-bg);
}

.serviceLeft {
    display:flex;
    align-items:center;
    gap:14px;
}

.serviceLeft img {
    width:22px;
    height:20px;
    object-fit:contain;
    flex-shrink:0;
}

.serviceLeft span {
    font-size:14px;
    font-weight:400;
}

.arrow {
    font-size:14px;
    color:var(--color-text-muted);
}

.accountDropdown {
    position:absolute;
    top:115%;
    right:0;
    width:150px;
    background:var(--color-white);
    border-radius:16px;
    padding:12px;
    box-shadow:0 15px 40px var(--shadow-color-15);
    display:none;
    z-index:9999;
}

.accountDropdown li a {
    display:flex;
    align-items:center;
    padding:12px;
    border-radius:8px;
    text-decoration:none;
    color:var(--color-text-dark);
    transition:.3s;
}

.accountDropdown li a:hover {
    background:var(--up-brand-hover);
}

.header-messages-badge {
    position:absolute;
    top:-6px;
    right:-14px;
    min-width:16px;
    height:16px;
    padding:0 4px;
    border-radius:999px;
    background:#ef4444;
    color:var(--color-white);
    font-size:10px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* ==========================================================================
   PART 3 - HERO & SUB-HERO SECTION
   ========================================================================== */

.hm-hero {
    background-color: var(--color-primary);
    padding: 140px 30px 100px;
    position: relative;
    overflow: hidden;
}

.hm-container {
    max-width: 1350px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.hm-left {
    flex: 1;
    max-width: 620px;
}

.hm-badge {
    display: inline-block;
    background: var(--color-white-15);
    color: var(--color-white);
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.hm-left h1 {
    font-size: 64px;
    font-weight: 800;
    color: var(--color-white);
    line-height: 1.05;
    margin-bottom: 24px;
    letter-spacing: -1px;
}

.hm-left h1 span {
    color: var(--color-overlay-highlight);
}

.hm-left p {
    font-size: 18px;
    color: var(--color-white-85);
    line-height: 1.6;
    margin-bottom: 32px;
}

.hm-features-box {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 36px;
}

.hm-feature-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-white-12);
    color: var(--color-white);
    padding: 10px 18px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--color-white-18);
}

.hm-feature-badge i {
    color: var(--color-overlay-highlight);
    font-size: 12px;
}

.hm-btn-group {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.hm-btn-primary-hero {
    background: var(--color-overlay-highlight);
    color: var(--color-text-darkest);
    padding: 16px 32px;
    border-radius: 40px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    transition: transform 0.2s ease, background 0.2s ease;
}

.hm-btn-primary-hero:hover {
    background: var(--color-overlay-highlight-hover);
    color: var(--color-text-darkest);
    transform: translateY(-2px);
}

.hm-btn-secondary {
    background: transparent;
    color: var(--color-white);
    padding: 16px 32px;
    border-radius: 40px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--color-white-30);
    transition: background 0.2s ease;
}

.hm-btn-secondary:hover {
    background: var(--color-white-08);
}

/* Right Phone Mockup Area */
.hm-right {
    flex: 1;
    display: flex;
    justify-content: center;
    position: relative;
}

.hm-image-box {
    position: relative;
    max-width: 400px;
    width: 100%;
}

.hm-phone-frame {
    background: var(--color-white);
    border-radius: 36px;
    padding: 16px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.25);
    position: relative;
}

.hm-phone-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    padding: 4px 8px 12px;
}

.hm-phone-header .example-pill {
    background: var(--color-body-bg);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
}

.hm-phone-screen-img {
    width: 100%;
    height: 180px;
    background: var(--color-primary-bg);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
}

.hm-phone-screen-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hm-phone-screen-img .ceiling-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: var(--color-white);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.hm-price-box {
    background: var(--color-body-bg);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.hm-price-box .label {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-bottom: 2px;
}

.hm-price-box .price {
    font-size: 22px;
    font-weight: 800;
    color: var(--color-text-darkest);
}

.hm-price-box .instant-pill {
    background: #e6f7ec;
    color: #10b981;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
}

.hm-tasker-card {
    background: var(--color-body-bg);
    border-radius: 16px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.hm-tasker-avatar {
    width: 36px;
    height: 36px;
    background: var(--color-overlay-highlight);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    color: var(--color-text-darkest);
    flex-shrink: 0;
}

.hm-tasker-info h5 {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-darkest);
    margin: 0 0 2px;
}

.hm-tasker-info p {
    font-size: 11px;
    color: var(--color-text-muted);
    margin: 0;
}

.hm-book-btn {
    background: var(--color-primary);
    color: var(--color-white);
    width: 100%;
    padding: 14px;
    border-radius: 14px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    display: block;
    text-decoration: none;
    box-shadow: 0 6px 16px var(--shadow-primary-25);
}

/* Absolute Floating Tags */
.floating-tag-left, .floating-tag-right {
    position: absolute;
    background: var(--color-white);
    padding: 8px 14px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-darkest);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 5;
}

.floating-tag-left {
    top: 60px;
    left: -70px;
}

.floating-tag-left i {
    color: var(--color-overlay-highlight);
}

.floating-tag-right {
    top: 50%;
    right: -50px;
}

.floating-tag-right i {
    color: #10b981;
}

/* ==========================================================================
   PART 4 - SERVICE OVERLAY
   ========================================================================== */

.serviceOverlay {
    position: relative;
    background-color: var(--color-overlay-bg);
    padding: 80px 20px;
    overflow: hidden;
    text-align: center;
    color: var(--color-white);
}

.ovStar, .ovDots {
    position: absolute;
    pointer-events: none;
    opacity: 0.6;
    z-index: 1;
}

.ovStar {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.ovStar1 { top: 15%; left: 10%; animation: floatStar 4s ease-in-out infinite; }
.ovStar2 { top: 25%; right: 12%; animation: floatStar 5s ease-in-out infinite 1s; }
.ovStar3 { bottom: 20%; left: 15%; animation: floatStar 4.5s ease-in-out infinite 0.5s; }

.ovDots {
    width: 40px;
    height: auto;
    object-fit: contain;
}

.ovDots1 { top: 10%; right: 25%; }
.ovDots2 { bottom: 15%; right: 15%; }

@keyframes floatStar {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(15deg); }
}

.overlayContent {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

.overlayBadge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-white-15);
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 20px;
    backdrop-filter: blur(4px);
}

.overlayBadge img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.overlayContent h1 {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 16px;
}

.overlayContent h1 span {
    color: var(--color-overlay-highlight);
}

.overlayDesc {
    font-size: 16px;
    color: var(--color-white-85);
    margin-bottom: 40px;
    line-height: 1.5;
}

.overlayCards {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.overlayCard {
    background: var(--color-white);
    color: var(--color-text-darkest);
    padding: 30px 40px;
    border-radius: 20px;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    min-width: 220px;
    text-align: center;
}

.overlayCard:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

.overlayCard h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

/* Sub-Hero Feature Bar */
.feature-wrapper {
    max-width: 1350px;
    margin: -50px auto 60px;
    padding: 0 30px;
    position: relative;
    z-index: 10;
}

.feature-box {
    background: var(--color-white);
    border-radius: 24px;
    padding: 30px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 20px 40px var(--shadow-color-1);
    gap: 20px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1;
}

.feature-item .icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--color-primary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-item .icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.feature-item .content h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-darkest);
    margin-bottom: 4px;
}

.feature-item .content p {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 0;
}

.divider {
    width: 1px;
    height: 45px;
    background: var(--color-border-light);
}

/* ==========================================================================
   PART 5 - FOOTER
   ========================================================================== */

.footer {
    width: 100%;
    background: var(--color-white);
    border-top: 1px solid var(--color-border-lighter);
}

.footer-top {
    max-width: 1400px;
    margin: auto;
    padding: 40px 30px;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr auto;
    gap: 40px;
    align-items: center;
}

.footer-brand {
    display: flex;
    flex-direction: column;
}

.footer-brand > img {
    width: 218px;
    height: 36px;
    display: block;
    margin-bottom: 15px;
}

.footer-brand p {
    color: var(--color-text-footer);
    font-size: 16px;
    margin-bottom: 25px;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--color-primary-bg2);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .35s;
}

.social-icons a img {
    object-fit: contain;
    transition: .35s;
}

.social-icons a:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px var(--shadow-color-1);
}

.social-icons a:hover img {
    transform: scale(1.1);
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.contact-box, .footer-address {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--color-primary-bg2);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.contact-box h4, .footer-address h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-dark);
    line-height: 1.5;
    margin-bottom: 5px;
}

.contact-box p, .footer-address p {
    color: var(--color-text-footer);
    font-weight: 400;
    font-size: 16px;
}

.footer-btn {
    display: flex;
    justify-content: flex-end;
}

.footer-btn a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 28px;
    background: var(--color-stars);
    color: var(--color-black);
    text-decoration: none;
    border-radius: 14px;
    font-weight: 600;
    transition: .35s;
}

.footer-btn a img:first-child {
    width: 26px;
    height: 27px;
}

.footer-btn a img:last-child {
    width: 18px;
    transition: .35s;
}

.footer-btn a:hover {
    background: var(--color-stars);
    transform: translateY(-4px);
    box-shadow: 0 15px 35px var(--shadow-footer-btn-25);
}

.footer-btn a:hover img:last-child {
    transform: translateX(6px);
}

.footer-city {
    border-top: 1px solid var(--color-border-lighter);
    border-bottom: 1px solid var(--color-border-lighter);
    padding: 18px 30px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.city-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--color-primary-bg2);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.city-icon img {
    width: 21px;
    height: 27px;
    object-fit: contain;
}

.footer-city ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}

.footer-city li {
    border-right: 1px solid var(--color-border-input);
}

.footer-city li:last-child {
    border-right: none;
}

.footer-city a {
    display: block;
    padding: 0 18px;
    text-decoration: none;
    color: var(--color-text-city);
    font-size: 15px;
    transition: .3s;
}

.footer-city a:hover {
    color: var(--color-footer-btn);
}

.footer-bottom {
    max-width: 1400px;
    margin: auto;
    padding: 28px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.copyright {
    display: flex;
    align-items: center;
    gap: 15px;
}

.copyright p {
    font-size: 16px;
    color: var(--color-text-footer);
    line-height: 1.6;
    font-weight: 400;
}

.copyrightimg {
    width: 23px;
    height: 26px;
}

.footer-links {
    display: flex;
    align-items: center;
}

.footer-links a {
    text-decoration: none;
    color: var(--color-text-light);
    font-size: 16px;
    padding: 0 18px;
    transition: .3s;
}

.footer-links a:first-child {
    border-right: 1px solid var(--color-border-links);
}

.footer-links a:hover {
    color: var(--color-footer-btn);
}

/* ==========================================================================
   PART 6 - RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 1100px) {
    .hm-container {
        flex-direction: column;
        text-align: center;
    }

    .hm-left {
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hm-features-box, .hm-btn-group {
        justify-content: center;
    }

    .floating-tag-left, .floating-tag-right {
        display: none;
    }

    .footer-top {
        grid-template-columns: 1fr 1fr;
    }

    .footer-btn {
        grid-column: 1 / -1;
        justify-content: center;
    }
}

@media (max-width: 991px) {
    .topHeader-menuBtn {
        display: block;
    }

    .topHeader-right {
        display: none;
    }

    .topHeader-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 320px;
        height: 100vh;
        background: var(--color-white);
        transition: .35s;
        padding: 95px 25px 30px;
        box-shadow: -8px 0 25px var(--shadow-color-15);
    }

    .topHeader-nav.active {
        right: 0;
    }

    .topHeader-menu {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .topHeader-menu li {
        width: 100%;
        border-bottom: 1px solid var(--color-border-light);
    }

    .topHeader-menu li a {
        width: 100%;
        justify-content: space-between;
        padding: 16px 0;
        color: var(--color-text-dark);
    }

    .feature-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
        padding: 30px;
    }

    .divider {
        display: none;
    }

    .feature-item {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .hm-hero {
        padding: 120px 20px 60px;
    }

    .hm-left h1 {
        font-size: 38px;
    }

    .hm-left p {
        font-size: 16px;
    }

    .feature-wrapper {
        margin-top: -20px;
        padding: 0 15px;
    }

    .overlayContent h1 {
        font-size: 32px;
    }

    .overlayCards {
        flex-direction: column;
        align-items: center;
    }

    .overlayCard {
        width: 100%;
        max-width: 280px;
    }

    .footer-top {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-brand, .footer-contact, .footer-address {
        align-items: center;
    }

    .contact-box, .footer-address {
        justify-content: center;
    }

    .social-icons {
        justify-content: center;
    }

    .footer-city {
        flex-direction: column;
        text-align: center;
    }

    .footer-city ul {
        justify-content: center;
    }

    .footer-city li {
        border: none;
        margin: 8px 0;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 25px;
        text-align: center;
    }

    .footer-links {
        justify-content: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 500px) {
    .footer {
        padding: 0;
    }

    .footer-top, .footer-bottom, .footer-city {
        padding-left: 20px;
        padding-right: 20px;
    }

    .footer-brand > img {
        width: 180px;
        margin: auto auto 15px;
    }

    .footer-btn a {
        width: 100%;
        justify-content: center;
    }

    .footer-city ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .footer-city li {
        margin: 6px 0;
    }

    .footer-city a {
        padding: 8px;
    }

    .footer-links {
        gap: 0;
    }

    .footer-links a {
        padding: 0 12px;
    }
}
/* Hero part css */

/* ==========================================================================
   SECTION 1: NO PHONE TAG / STATS SECTION
   ========================================================================== */

.no-phone-section {
    padding: 30px 30px;
    background: var(--color-white);
}

.np-container {
    max-width: 1350px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
}

.np-left {
    flex: 1;
}

.np-map-box {
    background: var(--color-primary-bg);
    border-radius: 24px;
    padding: 30px;
    position: relative;
    box-shadow: 0 15px 35px var(--shadow-color-08);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    min-height: 280px;
}

.np-map-box img {
    width: 100%;
    max-width: 480px;
    height: auto;
    object-fit: contain;
}

.np-right {
    flex: 1;
}

.np-tag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-primary);
    margin-bottom: 12px;
    display: inline-block;
}

.np-right h2 {
    font-size: 42px;
    font-weight: 800;
    color: var(--color-text-darkest);
    line-height: 1.15;
    margin-bottom: 18px;
}

.np-right p {
    font-size: 16px;
    color: var(--color-text-body);
    line-height: 1.6;
    margin-bottom: 30px;
}

.np-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.np-stat-card {
    background: var(--color-body-bg);
    border-radius: 16px;
    padding: 16px 12px;
    text-align: center;
}

.np-stat-card h3 {
    font-size: 20px;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 4px;
}

.np-stat-card span {
    font-size: 12px;
    color: var(--color-text-muted);
    font-weight: 500;
}

/* ==========================================================================
   SECTION 2: EVERYTHING YOU NEED, IN ONE APP
   ========================================================================== */

.everything-section {
    padding: 30px 30px;
    background: var(--color-body-bg);
    text-align: center;
}

.ev-container {
    max-width: 1350px;
    margin: 0 auto;
}

.ev-header {
    max-width: 600px;
    margin: 0 auto 50px;
}

.ev-header h2 {
    font-size: 38px;
    font-weight: 800;
    color: var(--color-text-darkest);
    margin-top: 8px;
}

.ev-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.ev-card {
    background: var(--color-white);
    border-radius: 20px;
    padding: 32px 24px;
    text-align: left;
    box-shadow: 0 10px 30px var(--shadow-color-01);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ev-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px var(--shadow-color-1);
}

.ev-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--color-primary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    font-size: 18px;
    margin-bottom: 20px;
}

.ev-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-darkest);
    margin-bottom: 10px;
}

.ev-card p {
    font-size: 14px;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
}

/* ==========================================================================
   SECTION 3: EASY FROM SNAP TO DONE (HOW IT WORKS)
   ========================================================================== */

.how-it-works-section {
    padding: 30px 30px;
    background: var(--color-white);
    text-align: center;
}

.hiw-container {
    max-width: 1350px;
    margin: 0 auto;
}

.hiw-header {
    max-width: 600px;
    margin: 0 auto 50px;
}

.hiw-header h2 {
    font-size: 38px;
    font-weight: 800;
    color: var(--color-text-darkest);
    margin-top: 8px;
}

.hiw-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.hiw-card {
    text-align: left;
}

.hiw-mockup {
    background: var(--color-body-bg);
    border-radius: 20px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    padding: 20px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.03);
    position: relative;
}

.hiw-pill {
    background: var(--color-white);
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-darkest);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.hiw-step-badge {
    width: 28px;
    height: 28px;
    background: var(--color-overlay-bg);
    color: var(--color-white);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.hiw-card h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-darkest);
    margin-bottom: 8px;
}

.hiw-card p {
    font-size: 14px;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
}

/* ==========================================================================
   SECTION 4: BETTER FOR CLIENTS. BETTER FOR TASKERS.
   ========================================================================== */

.sides-section {
    padding: 30px 30px 110px;
    background: var(--color-body-bg);
    text-align: center;
}

.sides-container {
    max-width: 1350px;
    margin: 0 auto;
}

.sides-header {
    max-width: 600px;
    margin: 0 auto 50px;
}

.sides-header h2 {
    font-size: 38px;
    font-weight: 800;
    color: var(--color-text-darkest);
    margin-top: 8px;
}

.sides-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 1050px;
    margin: 0 auto;
}

.side-box {
    border-radius: 24px;
    padding: 40px;
    text-align: left;
    color: var(--color-white);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.client-side {
    background-color: var(--color-overlay-bg); /* #4470DC */
}

.tasker-side {
    background-color: #1A284A; /* Deep navy professional theme */
}

.side-box .side-tag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
    margin-bottom: 12px;
    display: block;
}

.side-box h3 {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 24px;
    line-height: 1.2;
}

.side-list {
    list-style: none;
    padding: 0;
    margin-bottom: 36px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.side-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 500;
}

.side-list li i {
    color: var(--color-overlay-highlight); /* #FFC531 */
    font-size: 14px;
}

.side-btn {
    background: var(--color-overlay-highlight);
    color: var(--color-text-darkest);
    padding: 14px 28px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    transition: transform 0.2s ease, background 0.2s ease;
    width: fit-content;
}

.side-btn:hover {
    background: #e6b025;
    transform: translateY(-2px);
}

/* ==========================================================================
   RESPONSIVE DESIGN (TABLET & MOBILE)
   ========================================================================== */

@media (max-width: 1100px) {
    .np-container {
        flex-direction: column;
    }

    .ev-grid, .hiw-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .np-right h2, .ev-header h2, .hiw-header h2, .sides-header h2 {
        font-size: 30px;
    }

    .np-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ev-grid, .hiw-grid, .sides-grid {
        grid-template-columns: 1fr;
    }

    .side-box {
        padding: 30px 20px;
    }
}

/* ==========================================================================
   SECTION 5: PROJECT CATEGORIES ("Tell us what's on your list.")
   ========================================================================== */

.categories-section {
    padding: 60px 30px;
    background: var(--color-body-bg);
    text-align: center;
}

.cat-container {
    max-width: 1350px;
    margin: 0 auto;
}

.cat-header {
    max-width: 650px;
    margin: 0 auto 50px;
}

.cat-tag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-primary);
    margin-bottom: 12px;
    display: inline-block;
}

.cat-header h2 {
    font-size: 42px;
    font-weight: 800;
    color: var(--color-text-darkest);
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.cat-header h2 span {
    color: var(--color-overlay-bg);
}

.cat-header p {
    font-size: 16px;
    color: var(--color-text-body);
    line-height: 1.5;
    margin: 0;
}

.cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.cat-card {
    background: var(--color-white);
    border-radius: 24px;
    padding: 28px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 10px 30px var(--shadow-color-01);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border: 1px solid rgba(0,0,0,0.02);
}

.cat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px var(--shadow-color-1);
}

.cat-content-left {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    text-align: left;
}

.cat-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

/* Individual Icon Box Tints matching design */
.cat-icon-blue { background: #eef3ff; color: #4470DC; }
.cat-icon-orange { background: #fff4e5; color: #f59e0b; }
.cat-icon-green { background: #e6f7ec; color: #10b981; }
.cat-icon-purple { background: #f3e8ff; color: #8b5cf6; }
.cat-icon-pink { background: #fce7f3; color: #ec4899; }

.cat-info h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--color-text-darkest);
    margin-bottom: 6px;
}

.cat-info p {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.4;
    margin-bottom: 16px;
}

.cat-book-btn {
    background: var(--color-overlay-bg); /* #4470DC */
    color: var(--color-white);
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s ease, transform 0.2s ease;
}

.cat-book-btn:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
}

.cat-arrow-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-body-bg);
    color: var(--color-text-darkest);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
}

.cat-arrow-btn:hover {
    background: var(--color-primary-bg);
    color: var(--color-overlay-bg);
    transform: scale(1.05);
}

/* ==========================================================================
   RESPONSIVE DESIGN (TABLET & MOBILE)
   ========================================================================== */

@media (max-width: 1100px) {
    .cat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .cat-grid {
        grid-template-columns: 1fr;
    }

    .cat-header h2 {
        font-size: 32px;
    }
}

/* ==========================================================================
   PART 4 - HOME PAGE: HOW WE WORK (STEPS)
   ========================================================================== */

/* work s3 css */
/* Base Section Wrapper */
.hw-section {
    position: relative;
    overflow: hidden;
    background: var(--color-hw-bg);
    padding: 40px 5%;
}

.hw-star {
    position: absolute;
    width: 42px;
    opacity: .45;
    animation: floatStar 5s ease-in-out infinite;
}
.star1 { left: 5%; top: 50px; }
.star2 { right: 5%; top: 40px; }

.hw-dots {
    position: absolute;
    width: 120px;
    opacity: .45;
}
.dots1 { left: -20px; bottom: 10px; }
.dots2 { right: 20px; top: 100px; }

.hw-container {
    max-width: 1140px;
    margin: 0 auto;
    text-align: center;
}

/* Section Header */
.hw-subtitle {
    color: var(--color-hw-blue);
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 15px;
}

.hw-container h2 {
    margin-top: 8px;
    font-size: 32px;
    font-weight: 700;
    color: var(--color-text-darkest);
}

.hw-line {
    width: 60px;
    height: 3px;
    background: var(--color-hw-blue);
    display: block;
    margin: 16px auto 40px;
    border-radius: 50px;
}

/* ------------------------------------
   1. TOP SCREENSHOTS ROW
------------------------------------ */
.hw-images-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    margin-bottom: 50px;
}

.hw-image-item {
    flex: 1;
    max-width: 280px;
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Initial Image Border & Styling: Only Center (2nd) Image has border initially */
.hw-image-item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    
    /* Transparent border by default for 1st & 3rd */
    border: 2px solid transparent; 
    border-radius: 20px;
    background-color: var(--color-white);
    
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* CENTER IMAGE INITIAL STATE: Border & Elevation */
.hw-image-item:nth-child(2) img {
    border-color: var(--color-primary);
    box-shadow: 0 16px 35px var(--shadow-color-12);
    transform: translateY(-22px);
}

/* HOVER ANIMATION FOR IMAGES 1 & 3: Border + Zoom Effect */
.hw-image-item:nth-child(1):hover img,
.hw-image-item:nth-child(3):hover img {
    border-color: var(--color-primary);
    box-shadow: 0 20px 40px var(--shadow-primary-25);
    transform: translateY(-8px) scale(1.06); /* Zoom in effect */
}

/* HOVER ANIMATION FOR CENTER IMAGE: Zoom Effect */
.hw-image-item:nth-child(2):hover img {
    box-shadow: 0 24px 45px var(--shadow-primary-25);
    transform: translateY(-28px) scale(1.06); /* Maintains center elevation + zoom */
}

/* ------------------------------------
   2. BOTTOM STEPS ROW
------------------------------------ */
.hw-steps-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 15px;
}

.hw-step-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Connecting Dashed Line */
.hw-dash {
    width: 100px;
    border-top: 2px dashed var(--color-hw-dash);
    margin-top: 50px;
}

/* Step Circles */
.hw-circle {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 30px var(--shadow-color-08);
    transition: all 0.35s ease;
    animation: floatCard 4s ease-in-out infinite;
}

.step1, .step2 { width: 42px; height: 42px; }
.step3 { width: 45px; height: 45px; }

/* Initial Top-Left Badge Number */
.hw-number {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 26px;
    height: 26px;
    background: var(--color-stars);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Hidden Center Number (Appears on Hover) */
.hw-center-number {
    position: absolute;
    font-size: 36px;
    font-weight: 800;
    color: var(--color-white);
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.35s ease;
}

.hw-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.hw-step-item h3 {
    margin-top: 18px;
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text-darkest);
    transition: color 0.3s ease;
}

.hw-step-item p {
    margin-top: 8px;
    color: var(--color-text-body);
    line-height: 1.6;
    font-size: 14px;
    max-width: 260px;
}

/* ------------------------------------
   HOVER INTERACTIONS (Circle Fill & Number Swap)
------------------------------------ */

/* On Step Hover OR Top Image Hover */
.hw-step-item:hover .hw-circle,
.hw-container:has(.step-target-1:hover) .step-item-1 .hw-circle,
.hw-container:has(.step-target-2:hover) .step-item-2 .hw-circle,
.hw-container:has(.step-target-3:hover) .step-item-3 .hw-circle {
    background: var(--color-hw-blue); /* Fill circle background on hover */
    box-shadow: 0 20px 35px var(--shadow-hw-25);
    transform: translateY(-8px) scale(1.05);
}

/* Hide top-left number badge on hover */
.hw-step-item:hover .hw-number,
.hw-container:has(.step-target-1:hover) .step-item-1 .hw-number,
.hw-container:has(.step-target-2:hover) .step-item-2 .hw-number,
.hw-container:has(.step-target-3:hover) .step-item-3 .hw-number {
    opacity: 0;
    transform: scale(0);
}

/* Hide step image icon on hover */
.hw-step-item:hover .hw-icon,
.hw-container:has(.step-target-1:hover) .step-item-1 .hw-icon,
.hw-container:has(.step-target-2:hover) .step-item-2 .hw-icon,
.hw-container:has(.step-target-3:hover) .step-item-3 .hw-icon {
    opacity: 0;
    transform: scale(0.5);
}

/* Show center number in place of icon on hover */
.hw-step-item:hover .hw-center-number,
.hw-container:has(.step-target-1:hover) .step-item-1 .hw-center-number,
.hw-container:has(.step-target-2:hover) .step-item-2 .hw-center-number,
.hw-container:has(.step-target-3:hover) .step-item-3 .hw-center-number {
    opacity: 1;
    transform: scale(1);
}

/* Highlight title on hover */
.hw-step-item:hover h3,
.hw-container:has(.step-target-1:hover) .step-item-1 h3,
.hw-container:has(.step-target-2:hover) .step-item-2 h3,
.hw-container:has(.step-target-3:hover) .step-item-3 h3 {
    color: var(--color-primary);
}

/* Animations */
@keyframes floatCard {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes floatStar {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-12px) rotate(20deg); }
}

/* ------------------------------------
   RESPONSIVE LAYOUT
------------------------------------ */
@media (max-width: 991px) {
    .hw-images-row {
        gap: 15px;
    }
    
    .hw-image-item {
        height: 300px;
    }

    .hw-dash {
        width: 40px;
    }
}

@media (max-width: 767px) {
    .hw-images-row {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .hw-image-item {
        max-width: 260px;
        height: auto;
    }

    .hw-image-item:nth-child(2) img {
        transform: translateY(0);
    }

    .hw-steps-row {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .hw-dash {
        width: 2px;
        height: 40px;
        border: none;
        border-left: 2px dashed var(--color-hw-dash);
        margin: 0 auto;
    }
}
/* work s3 css */

/* ==========================================================================
   PART 4 - HOME PAGE: PRICING
   ========================================================================== */

/* pricing css */
.pricing-sec{

    padding:70px 10px;
    background:var(--color-pricing-bg); /* was: #f5f8fd */
}

.pricing-wrapper{

    max-width:1250px;
    margin:auto;
    background:var(--color-white); /* was: #fff */
    border-radius:35px;
    padding:70px 40px;

    text-align:center;

    box-shadow:
    0 20px 45px var(--shadow-pricing-wrapper); /* was: rgba(15,35,95,.08) */

    
}

.pricing-tag{

    color:var(--color-pricing-blue); /* was: #4169e1 */
    font-size:16px;
    font-weight:600;
    letter-spacing:1px;
    display:block;
    margin-bottom:15px;
}

.pricing-wrapper h2{

    font-size:32px !important;
    font-weight:600;
    color:var(--color-text-darkest); /* was: #111 */
    margin-bottom:18px;
}

.pricing-text{

    max-width:720px;
    font-size:14px;
    font-weight: 400;
    margin:auto;
    color:var(--color-text-body); /* was: #555 */
    line-height:1.7;
    margin-bottom:60px;
}

.pricing-cards{

    display:flex;
    justify-content:center;
    gap:35px;
    flex-wrap:wrap;
}

.price-card{

    width:380px;
    background:var(--color-white); /* was: #fff */
    border-radius:28px;
    padding:40px 35px;

    box-shadow:
    0 15px 35px var(--shadow-color-08); /* was: rgba(0,0,0,.08) */

    transition:.45s;

    position:relative;
}

.price-card:hover{

    transform:translateY(-12px);

    box-shadow:
    0 25px 55px var(--shadow-pricing-2); /* was: rgba(65,105,225,.20) */
}

.price-icon{

    width:76px;
    height:76px;
    margin:auto;

    border-radius:50%;

    background:var(--color-primary-bg); /* was: #edf3ff */

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

    color:var(--color-pricing-blue); /* was: #4169e1 */

    margin-bottom:25px;

    animation:float 3s ease-in-out infinite;
}

.price-card h3{

    font-size:16px;
    font-weight: 600;
    margin-bottom:16px;
    color:var(--color-text-darkest); /* was: #111 */
}

.price-card p{
    font-size: 14px !important;
    font-weight: 400;
    color:var(--color-pricing-blue); /* was: #4169e1 */
    line-height:1.6;
    font-size:17px;
}

.price-card hr{

    border:none;
    height:1px;
    background:var(--color-pricing-hr); /* was: #e5e5e5 */

    margin:28px 0;
}

.price-btn{

    display:inline-flex;
    align-items:center;
    gap:10px;

    background:linear-gradient(90deg,var(--color-pricing-blue),var(--color-pricing-gradient-end)); /* was: #4169e1, #567df4 */

    color:var(--color-white); /* was: #fff */
    text-decoration:none;

    padding:14px 36px;

    border-radius:50px;
    font-size: 14px;
    font-weight:500;

    transition:.35s;
}

.price-btn span{

    transition:.35s;
}

.price-btn:hover{

    transform:scale(1.06);
}

.price-btn:hover span{

    transform:translateX(6px);
}

.pricing-note{
    font-size: 14px  !important;
    font-weight: 400;
    margin-top:45px;
    color:var(--color-text-soft); /* was: #777 */
    font-size:15px;
}

@keyframes float{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-8px);
}

100%{
transform:translateY(0px);
}

}

/* Fade Up */

.price-card{

    opacity:0;
    transform:translateY(70px);
}

.price-card.show{

    opacity:1;
    transform:translateY(0);

    transition:
    opacity .8s ease,
    transform .8s ease;
}

/* ------------------ */
/* Large Desktop */
/* ------------------ */

@media(max-width:1500px){

.pricing-wrapper{

padding:65px 30px;
}

.pricing-wrapper h2{

font-size:44px;
}

.price-card{

width:360px;
}

.pricing-cards{

gap:28px;
}

}



@media(max-width:1024px){

.pricing-wrapper{
width: 95%;
padding:60px 28px;
}

.pricing-wrapper h2{

font-size:40px;
}

.pricing-text{

margin-bottom:50px;
}

.price-card{

width:320px;
padding:35px 28px;
}

.pricing-cards{

gap:24px;
}

}



@media(max-width:992px){

.pricing-wrapper{

padding:60px 25px;
}

.pricing-wrapper h2{

font-size:38px;
}

.price-card{

width:340px;
}

}



/* NOTE: this @media(max-width:992px) block for .pricing-wrapper is an exact duplicate of the one right above it (already duplicated in the original file — kept as-is per "no logic/placement changed" rule, just flagging so it doesn't confuse you later) */
@media(max-width:992px){

.pricing-wrapper{

padding:60px 25px;
}

.pricing-wrapper h2{

font-size:38px;
}

.price-card{

width:340px;
}

}



@media(max-width:768px){

.pricing-wrapper{

padding:50px 20px;
border-radius:25px;
}

.pricing-wrapper h2{

font-size:32px;
}

.pricing-text{

font-size:15px;
margin-bottom:40px;
}

.pricing-cards{

flex-direction:column;
align-items:center;
}

.price-card{

width:100%;
max-width:420px;
padding:35px 25px;
}

.price-card h3{

font-size:22px;
}

.price-card p{

font-size:16px;
}

}



@media(max-width:480px){

.pricing-sec{

padding:70px 15px;
}

.pricing-wrapper h2{

font-size:28px;
}

.price-icon{

width:68px;
height:68px;
}

.price-btn{

padding:13px 30px;
font-size:15px;
}

}
/* pricing css */

/* ==========================================================================
   PART 4 - HOME PAGE: 100% HAPPINESS GUARANTEE
   ========================================================================== */

/* gurantee css */
.hg-section{
position:relative;
max-width:1280px;
margin:70px auto;
padding:60px;
background:var(--color-guarantee-bg); /* was: #4569d8 */
border-radius:28px;
overflow:hidden;
}
/* CARD */
.hg-card{
background:var(--color-white); /* was: #fff */
border-radius:28px;
display:flex;
overflow:hidden;
max-width:1000px;
margin:auto;
position:relative;
z-index:2;
box-shadow:0 15px 40px var(--shadow-color-12); /* was: rgba(0,0,0,.12) */
}
/* LEFT */
.hg-left{
width:60%;
padding:55px 40px;
}
.hg-badge{
width:59px;
height:59px;
background:var(--color-primary-hover-bg); /* was: #edf2ff */
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:var(--color-guarantee-bg); /* was: #4569d8 */
font-size:20px;
margin-bottom:25px;
}
.hg-badge img{
    width: 23px;
    height: 26px;
}
.hg-left h2{
font-size:40px;
font-weight:600;
line-height:1.1;
color:var(--color-text-darkest); /* was: #111 */
}
.hg-line{
display:block;
width:45px;
height:3px;
background:var(--color-guarantee-bg); /* was: #4569d8 */
margin:28px 0;
}
.hg-left p{
font-size:14px;
font-weight: 400;
line-height:28px;
color:var(--color-text-body); /* was: #555 */
max-width:360px;
margin-bottom:35px;
}
.hg-features{
display:flex;
gap:28px;
flex-wrap:wrap;
}
.hg-feature{
display:flex;
align-items:center;
gap:12px;
}
.hg-icon{
width:42px;
height:42px;
background:var(--color-primary-hover-bg); /* was: #edf2ff */
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:var(--color-guarantee-bg); /* was: #4569d8 */
font-size:18px;
}
.gicon1{
    width: 22px;
    height: 20px;
}
.gicon2{
    width: 17px;
    height: 19px;
}
.gicon3{
    width: 24px;
    height: 24px;
}
.hg-feature h4{
font-size:14px;
font-weight:700;
margin-bottom:3px;
}
.hg-feature span{
font-size:14px;
color:var(--color-text-muted); /* was: #666 */
}
/* RIGHT */
.hg-right{
  width:40%;
  background:var(--color-guarantee-right-bg); /* was: #f3f3f3 */
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.hg-right img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
/* STARS */
.hg-star{
position:absolute;
opacity:1;
z-index:1;
}
.hg-star1{
width:80px;
left:45px;
bottom:35px;
}
.hg-star2{
width:75px;
right:90px;
top:30px;
}
.hg-star3{
width:28px;
right:160px;
top:85px;
}
.hg-star4{
width:28px;
left:50px;
bottom:20px;
}
/* DOTS */
.hg-dots{
position:absolute;
width:110px;
height:110px;

background-size:18px 18px;
z-index:0;
}
.hg-dots-left{
left:20px;
bottom:90px;
}
.hg-dots-right{
right:20px;
top:110px;
}
/* Hover */
.hg-card:hover{
transform:translateY(-6px);
transition:.4s;
}

@media(max-width:1024px){
   .hg-section{
    width: 95%;
   }

}

@media(max-width:992px){
.hg-card{
flex-direction:column;
}
.hg-left,
.hg-right{
width:100%;
}
.hg-right{
height:500px;
}
.hg-left{
padding:45px;
}
.hg-left h2{
font-size:42px;
}
.hg-features{
justify-content:space-between;
}
}
/* Mobile */
@media(max-width:768px){
.hg-section{
padding:25px;
margin:40px 15px;
}
.hg-left{
padding:30px;
}
.hg-left h2{
font-size:34px;
}
.hg-left p{
font-size:15px;
line-height:26px;
}
.hg-features{
flex-direction:column;
gap:18px;
}
.hg-right{
    height:auto;
  }
  .hg-right img{
    height:auto;
    object-fit:contain;
  }
.hg-star1{
width:55px;
left:12px;
bottom:25px;
}
.hg-star2{
width:55px;
right:12px;
top:20px;
}
.hg-star3{
width:20px;
right:80px;
top:70px;
}
.hg-star4{
width:22px;
left:30px;
bottom:10px;
}
}
/* Small Mobile */
@media(max-width:480px){
.hg-left h2{
font-size:28px;
}
.hg-right{
height:280px;
}
.hg-left{
padding:25px;
}
}
/* gurantee css */

/* ==========================================================================
   PART 4 - HOME PAGE: GOOGLE REVIEWS
   ========================================================================== */

/* google review css */
.review-section{

padding:80px 5%;
overflow:hidden;

}

.review-header{

text-align:center;
margin-bottom:45px;

}

.google-badge{

display:inline-flex;
align-items:center;
gap:10px;
padding:8px 18px;
background:var(--color-white); /* was: #fff */
border-radius:50px;
box-shadow:0 10px 30px var(--shadow-color-08); /* was: rgba(0,0,0,.08) */
margin-bottom:20px;

}

.google-badge img{
width:22px;
}

.google-badge span{

font-size:12px;
font-weight:600;
color:var(--color-google-badge); /* was: #4775ff */
letter-spacing:1px;

}

.review-header h2{

font-size:24px;
margin:15px 0;
font-weight:600;

}

.review-header p{

color:var(--color-text-muted); /* was: #666 */
font-size:16px;
font-weight:400;

}

.slider{

position:relative;
display:flex;
align-items:center;

}

.slider-track{

display:flex;
gap:25px;
overflow-x:auto;
scroll-behavior:smooth;
scrollbar-width:none;
padding:10px;

}

.slider-track::-webkit-scrollbar{
display:none;
}

.card{

min-width:320px;
background:var(--color-white); /* was: #fff */
padding:28px;
font-size: 14px;
border-radius:18px;
box-shadow:0 15px 35px var(--shadow-color-08); /* was: rgba(0,0,0,.08) */
position:relative;
transition:.4s;

}

.card:hover{

transform:translateY(-10px);

}

.rating-card{

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

}

.rating-card h1{

font-size:40px;
font-weight:600;
color:var(--color-rating-blue); /* was: #3f6cff */

}

.stars{

color:var(--color-stars); /* was: #ffb400 */
font-size:17px;
margin:12px 0;

}

.top{

display:flex;
align-items:center;
gap:18px;

}

.top img{

width:42px;
height:42px;
border-radius:50%;
object-fit:cover;

}

.card p{

margin:18px 0;
line-height:1.7;
font-size: 14px;
font-weight: 400;
color:var(--color-text-dark); /* was: #222 */

}

.card h3{
font-size: 14px;
font: bold;
margin-bottom:5px;

}

.google-icon{

width:25px;
position:absolute;
bottom:20px;
right:20px;

}

.btn{

position:absolute;
top:50%;
transform:translateY(-50%);
width:55px;
height:55px;
border:none;
border-radius:50%;
background:var(--color-rating-blue); /* was: #3f6cff */
box-shadow:0 10px 30px var(--shadow-color-15); /* was: rgba(0,0,0,.15) */
cursor:pointer;
font-size:18px;
z-index:5;
transition:.3s;

}

.btn:hover{

background:var(--color-text-body); /* was: #555 */
color:var(--color-white); /* was: #fff */

}

.prev{

left:-15px;

}

.next{

right:-15px;

}


/* Tablet */

@media(max-width:991px){

.review-header h2{

font-size:30px;

}

.card{

min-width:280px;

}

}


/* Mobile */

@media(max-width:768px){

.review-section{

padding:40px 10px;

}

.review-header h2{

font-size:25px;

}

.review-header p{

font-size:15px;

}

.card{

min-width:60%;

}

.btn{

width:45px;
height:45px;

}

.prev{

left:-5px;

}

.next{

right:-5px;

}

}


/* Small Mobile */

@media(max-width:480px){

.card{

min-width:100%;

padding:22px;

}

.rating-card h1{

font-size:60px;

}

}
/* google review css */

/* ==========================================================================
   PART 4 - HOME PAGE: CITIES WE SERVE
   ========================================================================== */

/* custmerservice css */
/* Section Outer Wrapper */
.cws-section {
    background-color: var(--color-body-bg); /* #f5f7fc */
    padding: 20px 20px;
    width: 100%;
}

/* Inner Container */
.cws-container {
    max-width: 1140px;
    margin: 0 auto;
    text-align: center;
}

/* Header Styles */
.cws-header {
    margin-bottom: 32px;
}

.cws-title {
    color: var(--color-text-darkest); /* #111 */
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.cws-subtitle {
    color: var(--color-text-muted); /* #666 */
    font-size: 15px;
    font-weight: 400;
    margin: 0;
}

/* Responsive Grid System */
.cws-grid {
    display: grid;
    padding-top: 20px;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

/* City Pill Buttons */
.cws-city-card {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #D9E5FF; /* #edf4ff */
    color: var(--color-text-city); /* #444 */
    font-size: 14px;
    font-weight: 500;
    padding: 14px 16px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.25s ease;
    border: 1px solid transparent;
    box-shadow:0 10px 30px var(--shadow-color-08);
}

/* Hover & Active States */
.cws-city-card:hover {
    background-color: var(--color-white);
    color: var(--color-primary); /* #4969e9 */
    border-color: var(--color-border-feature);
    box-shadow: 0 4px 12px var(--shadow-color-08);
    transform: translateY(-2px);
}

/* Responsive Media Queries */
@media (max-width: 1024px) {
    .cws-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .cws-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .cws-title {
        font-size: 24px;
    }
}
/* custmerservice css */

/* ==========================================================================
   PART 4 - HOME PAGE: FAQ / GOT QUESTIONS
   ========================================================================== */

/* faq css */
/* ===========================
   GOT QUESTIONS SECTION
=========================== */

.dq-help-section {
    max-width: 1200px;
    min-height: 305px;
    width: 100%;
    margin: 20px auto;
    padding: 20px 50px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;

    position: relative;
    overflow: hidden;

    background: linear-gradient(135deg, var(--color-dq-gradient-start), var(--color-dq-gradient-end)); /* was: #4c6be8, #5577ee */
    border: 3px solid var(--color-dq-border); /* was: #1996ff */
    border-radius: 28px;
    box-shadow: 0 18px 40px var(--shadow-color-15); /* was: rgba(0,0,0,.15) */
}

/* Left Side */

.dq-left {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}

/* Question Icon */

.dq-question-icon {
    width: 140px;
    height: 140px;
    min-width: 140px;

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

    animation: dqFloat 4s ease-in-out infinite;
}
.arroB{
  color: var(--color-dq-border); /* was: #1996ff */
}
.dq-question-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Text */

.dq-content h2 {
    color: var(--color-white); /* was: #fff */
    font-size: 56px;
    font-weight: 600;
    margin-bottom: 12px;
    line-height: 1.15;
}

.dq-content p {
    color: var(--color-white); /* was: #fff */
    font-size: 24px;
    line-height: 1.6;
    font-weight: 600;
    max-width: 520px;
}

/* Buttons */

.dq-buttons {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.dq-btn {
    text-decoration: none;
    padding: 18px 30px;
    border-radius: 15px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    font-size: 18px;
    font-weight: 600;

    transition: .35s ease;
    white-space: nowrap;
}

.dq-btn img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

.dq-btn span {
    display: flex;
    align-items: center;
    transition: .35s;
}

.dq-btn span img {
    width: 16px;
    height: 16px;
}

.dq-btn:hover span {
    transform: translateX(6px);
}

.dq-white-btn {
    background: var(--color-white); /* was: #fff */
    color: var(--color-dq-gradient-start); /* was: #4c6be8 */
}

.dq-white-btn:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 25px var(--shadow-white-35); /* was: rgba(255,255,255,.35) */
}

.dq-outline-btn {
    color: var(--color-white); /* was: #fff */
    border: 2px solid var(--color-white-90); /* was: rgba(255,255,255,.9) */
}

.dq-outline-btn:hover {
    border: 1px solid var(--color-white); /* was: #fff */
    color: var(--color-white); /* was: #fff */
    transform: translateY(-6px);
}

/* Decorative Stars */

.dq-star {
    position: absolute;
    pointer-events: none;
    animation: dqBlink 2.5s infinite alternate;
}

.dq-star img {
    width: 24px;
    height: 24px;
    display: block;
}

.dq-star1 {
    top: 55px;
    left: 28px;
}

.dq-star2 {
    top: 40px;
    left: 200px;
    animation-delay: .8s;
}

.dq-star3 {
    top: 150px;
    left: 210px;
    animation-delay: 1.5s;
}

/* Animations */

@keyframes dqFloat {
    0% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
    100% { transform: translateY(0); }
}

@keyframes dqBlink {
    0% { opacity: .4; transform: scale(.8); }
    100% { opacity: 1; transform: scale(1.2); }
}

/* ===========================
   Large Tablet / Small Desktop
=========================== */

@media (max-width: 2560px) {

    .dq-help-section {
        max-width: 95%;
        padding: 35px 30px;
    }

    .dq-content h2 {
        font-size: 46px;
    }

    .dq-content p {
        font-size: 21px;
    }
}

/* ===========================
   Tablet
=========================== */

@media (max-width: 991px) {

    .dq-help-section {
        flex-direction: column;
        text-align: center;
        padding: 35px;
        min-height: auto;
    }

    .dq-left {
        flex-direction: column;
        justify-content: center;
    }

    .dq-content h2 {
        font-size: 42px;
    }

    .dq-content p {
        font-size: 20px;
        max-width: 100%;
    }

    .dq-question-icon {
        width: 120px;
        height: 120px;
        min-width: 120px;
    }

    .dq-buttons {
        justify-content: center;
    }

}

/* ===========================
   Mobile
=========================== */

@media (max-width: 768px) {

    .dq-help-section {
        padding: 30px 20px;
        border-radius: 20px;
        margin: 40px auto;
    }

    .dq-content h2 {
        font-size: 34px;
    }

    .dq-content p {
        font-size: 17px;
        line-height: 1.5;
    }

    .dq-question-icon {
        width: 95px;
        height: 95px;
        min-width: 95px;
    }

    .dq-buttons {
        width: 100%;
        flex-direction: column;
    }

    .dq-btn {
        width: 100%;
        padding: 16px;
    }

    .dq-star {
        display: none;
    }

}

/* ===========================
   Small Mobile
=========================== */

@media (max-width: 480px) {

    .dq-help-section {
        margin: 30px 15px;
    }

    .dq-content h2 {
        font-size: 26px;
    }

    .dq-content p {
        font-size: 14px;
    }

    .dq-question-icon {
        width: 80px;
        height: 80px;
        min-width: 80px;
    }

    .dq-btn {
        font-size: 15px;
        padding: 14px;
    }

}
/* faq css */

/* ==========================================================================
   PART 5 - OVERLAY (SERVICE TYPE SELECTION POPUP)
   ========================================================================== */

/* overlayer css */


.serviceOverlay{
    position:fixed;
    inset:0;

    width:100%;
    height:100vh;

    background:var(--color-overlay-bg); /* was: #4E73E6 */

    z-index:999999;

    overflow-y:auto;

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

    padding:90px 20px 40px;
}

.ovStar,
.ovDots{
    position:absolute;
    pointer-events:none;
    user-select:none;
}

.ovStar1{
    width:90px;
    top:70px;
    left:80px;
    animation:floatStar 5s ease-in-out infinite;
}

.ovStar2{
    width:60px;
    right:130px;
    top:130px;
    animation:floatStar 6s ease-in-out infinite;
}

.ovStar3{
    width:80px;
    bottom:80px;
    left:120px;
    animation:floatStar 7s ease-in-out infinite;
}

.ovDots1{
    width:150px;
    top:110px;
    right:70px;
    opacity:.35;
}

.ovDots2{
    width:170px;
    bottom:70px;
    left:40px;
    opacity:.35;
}



.overlayContent{
    width:100%;
    max-width:1100px;
    margin:auto;
    text-align:center;
    position:relative;
    z-index:5;
}

.overlayBadge{

    display:inline-flex;
    align-items:center;
    gap:10px;

    background:var(--color-white-12); /* was: rgba(255,255,255,.12) */

    border:1px solid var(--color-white-15); /* was: rgba(255,255,255,.15) */

    padding:10px 22px;

    border-radius:40px;

    margin-bottom:20px;

    backdrop-filter:blur(8px);

}

.overlayBadge img{

    width:18px;
}

.overlayBadge span{

    color:var(--color-white); /* was: #fff */
    font-size:12px;
    font-weight:500;
    letter-spacing:.8px;
}

.trustedText{
    display:none;
    align-items:center;
    gap:10px;
    margin-left:30px;
    color:var(--color-text-dark); /* was: #222 */
    font-size:15px;
    font-weight:600;
}

.trustedText i{
    color:var(--color-overlay-bg); /* was: #4E73E6 */
}

.trustedText span{
    white-space:nowrap;
}




.overlayContent h1{

    color:var(--color-white); /* was: #fff */

    font-size:40px;

    line-height:1.15;

    font-weight:600;

    
}

.overlayContent h1 span{

    color:var(--color-overlay-highlight); /* was: #FFD54A */
}

.overlayDesc{

    color:var(--color-white-85); /* was: rgba(255,255,255,.85) */

    font-size:16px;

    max-width:400px;

    margin:0 auto 70px;

    line-height:1.8;
}



.overlayCards{
    display:grid;
    grid-template-columns:repeat(2,360px);
    justify-content:center;
    align-items:start;
    gap:40px;
    margin-top:40px;
}

.overlayCard{
   width:100%;

max-width:420px;

margin:auto;
    /* min-height:170px; */
    border: 5px solid var(--color-white); /* was: #fff */
    background:var(--color-white-08); /* was: rgba(255,255,255,.08) */
    border:1px solid var(--color-white-18); /* was: rgba(255,255,255,.18) */
    border-radius:28px;

    padding:30px;

    backdrop-filter:blur(18px);

    transition:.4s;

    position:relative;
    overflow:hidden;

    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;

     transform-style: preserve-3d;
    perspective:1200px;
    cursor:pointer;
}

.overlayCard::before{

    content:"";

    position:absolute;

    width:280px;
    height:280px;

    border-radius:50%;

    background:var(--color-white-05); /* was: rgba(255,255,255,.05) */

    top:-120px;
    right:-120px;
}

.overlayCard:hover{
    transform: translateY(-12px);
    background: var(--color-white); /* was: #fff */
   color: var(--color-black) !important; /* was: #000 */
    box-shadow: 0 25px 60px var(--shadow-color-18); /* was: rgba(0,0,0,.18) */
}
.overlayCard:hover,
.overlayCard:hover *{
    color: var(--color-hero-accent) !important; /* was: #4c6fff */
}
.overlayImage{

    width:151px;
    height:151px;

    margin:0 auto 25px;

    border-radius:50%;

    overflow:hidden;

    border:8px solid var(--color-white-15); /* was: rgba(255,255,255,.15) */

    box-shadow:0 15px 45px var(--shadow-color-2); /* was: rgba(0,0,0,.2) */
}

.overlayImage img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.45s;
}

.overlayCard:hover .overlayImage img{

    transform:scale(1.08);
}



.overlayCard h2{

    color:var(--color-white); /* was: #fff */

    font-size:32px;
    font-weight: 600;
    margin-bottom:0px;
}

.overlayCard p{

    color:var(--color-white-82); /* was: rgba(255,255,255,.82) */

    line-height:1.8;

    font-size:16px;
    font-weight: 400;
    margin-bottom:35px;
}



.overlayCard button{
    width:100%;
    height:58px;

    margin-top:auto;

    border-radius:50px;
    border:2px solid var(--color-white-30); /* was: rgba(255,255,255,.30) */

    background:var(--color-white); /* was: #fff */
    color:var(--color-overlay-bg); /* was: #4E73E6 */

    font-size:16px;
    font-weight:700;

    cursor:pointer;

    transition:.35s;

    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
}

.overlayCard button:hover{

    background:transparent;

    color:var(--color-white); /* was: #fff */

    border-color:var(--color-white); /* was: #fff */
}

/*=========================
Animation
=========================*/

@keyframes floatStar{

0%{

transform:translateY(0px) rotate(0deg);

}

50%{

transform:translateY(-12px) rotate(10deg);

}

100%{

transform:translateY(0px) rotate(0deg);

}

}


/*=========================
3D Coin Flip
=========================*/

.overlayCard.coinFlip{

    animation:coinFlip 1.1s ease-in-out forwards;

}

@keyframes coinFlip{

0%{

transform:rotateY(0deg) scale(1);

}

30%{

transform:rotateY(180deg) scale(1.05);

}

60%{

transform:rotateY(360deg) scale(1.15);

}

100%{

transform:rotateY(720deg) scale(8);

opacity:0;

}

}


/* Overlay Zoom */

.serviceOverlay.hideOverlay{

animation:overlayZoom .8s ease forwards;

}

@keyframes overlayZoom{

0%{

opacity:1;

}

100%{

opacity:0;

transform:scale(1.15);

visibility:hidden;

}

}


@media(max-width:1200px){

.overlayContent{

max-width:1100px;

}

.overlayContent h1{

font-size:54px;

}

.overlayCards{

gap:30px;

}



.overlayImage{

width:170px;
height:170px;

}

}

@media (max-width:991px){

.residentialDropdown,
.commercialDropdown,
.blogDropdown{
    display:none;
    position:static;
    width:100%;
    box-shadow:none;
    background:var(--color-dropdown-mobile-bg2); /* was: #f8f8f8 */
    margin-top:10px;
    border-radius:10px;
    padding:10px;
}

#navResidential.active .residentialDropdown{
    display:block;
}

#navCommercial.active .commercialDropdown{
    display:block;
}

#navBlog.active .blogDropdown{
    display:block;
}

}

@media(max-width:768px){



.overlayBadge{

padding:9px 18px;

}

.overlayBadge span{

font-size:12px;

}

.overlayContent h1{

font-size:38px;

}

.overlayDesc{

font-size:15px;

line-height:1.7;

margin-bottom:40px;

}

.overlayCard{

padding:30px 22px;

}

.overlayImage{

width:155px;
height:155px;

margin-bottom:22px;

}

.overlayCard h2{

font-size:30px;

}

.overlayCard p{

font-size:15px;

}

.overlayCard button{

height:54px;

font-size:15px;

}

}



@media(max-width:576px){

.overlayContent{

padding-top:20px;

}

.overlayContent h1{

font-size:28px;

line-height:1.3;

}

.overlayDesc{

max-width:100%;

padding:0 10px;

}

.overlayCards{

grid-template-columns:1fr;

gap:20px;

}

.overlayCard{

padding:22px 16px;

}

.overlayImage{

width:110px;
height:110px;

}

}



@media(max-width:380px){

.overlayContent h1{

font-size:26px;

}

.overlayBadge{

padding:8px 14px;

}

.overlayBadge span{

font-size:11px;

}

.overlayImage{

width:120px;
height:120px;

}

.overlayCard h2{

font-size:22px;

}

.overlayCard button{

height:48px;

font-size:13px;

}

}

.serviceOverlay{

animation:overlayFade .6s ease;

}

@keyframes overlayFade{

0%{

opacity:0;

transform:scale(1.05);

}

100%{

opacity:1;

transform:scale(1);

}

}

.serviceOverlay.hideOverlay{

animation:overlayHide .5s ease forwards;

pointer-events:none;

}

@keyframes overlayHide{

0%{

opacity:1;

transform:scale(1);

}

100%{

opacity:0;

visibility:hidden;

transform:scale(.95);

}

}

.overlayCard:hover{

border-color:var(--color-white); /* was: #fff */

}

.overlayCard:hover .overlayImage{

transform:translateY(-8px);

transition:.35s;

}

.overlayCard:hover h2{

letter-spacing:.5px;

}

.overlayCard:hover button{

transform:translateY(-2px);

}


.overlayCard button:active{

transform:scale(.96);

}
/* overlayer css */

/* ==========================================================================
   PART 6 - RESIDENTIAL PAGE
   ========================================================================== */

/* residential page css */

    /* Core Section Main Layout Container */
    .sh-enquiry-section {
        background-color: var(--color-body-bg);
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
        padding: 80px 20px;
        width: 100%;
        box-sizing: border-box;
        position: relative;
        overflow: hidden;
    }

    /* Left Vector Landmark Structure Blueprint Artwork */
    .sh-bg-landmark-left {
        position: absolute;
        bottom: 0;
        left: -30px;
        width: 180px;
        height: 320px;
        opacity: 0.06;
        background-repeat: no-repeat;
        background-position: bottom left;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 200' fill='none' stroke='%234969e9' stroke-width='0.5'%3E%3Cpath d='M40 200 L45 80 L48 20 L52 20 L55 80 L60 200 Z M30 200 C 40 170, 60 170, 70 200 M43 120 L57 120 M45 80 L55 80 M47 40 L53 40' /%3E%3C/svg%3E");
        pointer-events: none;
        z-index: 1;
    }

    /* Right Side Landmark City Skyline Vector Artwork with Bird Details */
    .sh-bg-skyline-right {
        position: absolute;
        bottom: 20px;
        right: -20px;
        width: 320px;
        height: 440px;
        opacity: 0.08;
        background-repeat: no-repeat;
        background-position: bottom right;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 240' fill='none' stroke='%234969e9' stroke-width='0.4'%3E%3C!-- Left Tower --%3E%3Cpath d='M40 240 L40 60 L50 20 L50 240 M40 90 L60 90 M40 130 L60 130' /%3E%3C!-- Right Tower --%3E%3Cpath d='M120 240 L120 60 L110 20 L110 240 M120 90 L100 90 M120 130 L100 130' /%3E%3C!-- Connecting Bridge --%3E%3Cpath d='M60 140 L100 140 M60 145 L100 145' /%3E%3C!-- Tiny Flying Bird Element Details --%3E%3Cpath d='M75 42 Q80 38 85 42 Q90 38 95 42' stroke-width='0.6'/%3E%3C/svg%3E");
        pointer-events: none;
        z-index: 1;
    }

    .sh-enquiry-container {
        max-width: 1140px;
        margin: 0 auto;
        position: relative;
        z-index: 2;
    }

    /* Split Header Layout Row Elements Grid */
    .sh-header-row {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 40px;
        margin-bottom: 48px;
        width: 100%;
    }

    .sh-header-left {
        flex: 1;
        min-width: 320px;
    }

    .sh-header-right {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
    }

    /* UI Badges Text Stylings Rules */
    .sh-badge-top {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background-color: var(--color-hero-badge-bg);
        color: var(--color-hero-badge-text);
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 24px;
    }

    .sh-title {
        font-size: 48px;
        font-weight: 800;
        line-height: 1.15;
        margin: 0 0 20px 0;
        color: var(--color-text-darkest);
        letter-spacing: -0.5px;
    }

    .sh-title span {
        color: var(--color-primary);
    }

    .sh-subtitle {
        color: var(--color-text-body);
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 28px;
        max-width: 500px;
    }

    .sh-subtitle span {
        color: var(--color-primary);
        font-weight: 600;
    }

    /* Miniature Header Icon Sublists Layout */
    .sh-mini-features {
        display: flex;
        flex-wrap: wrap;
        gap: 24px;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .sh-mini-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        color: var(--color-text-dark);
        font-weight: 600;
    }

    .sh-mini-icon-circle {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background-color: #fff;
        border: 1px solid rgba(73,105,233,0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-primary);
        box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    }

    /* Image Grid Collage Architecture with Matrix Dots Background Box */
    .sh-collage-block {
        position: relative;
        display: flex;
        gap: 4px;
        padding: 24px;
        box-sizing: border-box;
    }

    .sh-bg-dots-matrix {
        position: absolute;
        top: -5px;
        left: -10px;
        width: 90px;
        height: 65px;
        opacity: 0.25;
        background-image: radial-gradient(var(--color-primary) 1.5px, transparent 1.5px);
        background-size: 10px 10px;
        pointer-events: none;
        z-index: 1;
    }

    .sh-floating-star-1 {
        position: absolute;
        top: 20px;
        right: -10px;
        color: var(--color-primary);
        opacity: 0.35;
        font-size: 22px;
    }

    .sh-floating-star-2 {
        position: absolute;
        bottom: 50px;
        left: -20px;
        color: var(--color-primary);
        opacity: 0.35;
        font-size: 20px;
    }

    .sh-collage-col {
        display: flex;
        flex-direction: column;
        gap: 16px;
        position: relative;
        z-index: 2;
    }

    .sh-image-holder {
        background-color: #e3e7ef;
        border-radius: 16px;
        border: 4px solid var(--color-white);
        box-shadow: 0 12px 30px rgba(0,0,0,0.04);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .sh-box-1 { width: 185px; height: 130px; }
    .sh-box-2 { width: 185px; height: 210px; }
    .sh-box-3 { width: 185px; height: 210px; margin-top: -24px; }
    .sh-box-4 { width: 185px; height: 130px; }

    /* Absolute Center Overlapping Trust Circular Stamp Badge */
    .sh-trust-stamp {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: var(--color-primary);
        color: var(--color-white);
        width: 96px;
        height: 96px;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 10px;
        font-weight: 600;
        padding: 8px;
        box-sizing: border-box;
        border: 4px solid var(--color-white);
        box-shadow: 0 10px 24px rgba(73, 105, 233, 0.35);
        z-index: 5;
    }

    .sh-trust-stamp strong {
        font-size: 13px;
        font-weight: 800;
        display: block;
        line-height: 1.2;
    }

    /* Central Input Form UI Elements Card Layout */
    .sh-form-card {
        background-color: var(--color-white);
        border-radius: 20px;
        padding: 40px;
        box-shadow: 0 10px 40px rgba(15,35,95,0.03);
        box-sizing: border-box;
        margin-bottom: 50px;
    }

    .sh-form-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 32px 28px;
    }

    .sh-input-group {
        display: flex;
        flex-direction: column;
    }

    .sh-step-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
    }

    .sh-step-num {
        background-color: var(--color-primary-bg);
        color: var(--color-primary);
        font-size: 12px;
        font-weight: 700;
        width: 28px;
        height: 28px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sh-step-label {
        font-size: 14px;
        font-weight: 700;
        color: var(--color-text-darkest);
    }

    .sh-field-wrapper {
        position: relative;
        display: flex;
        align-items: center;
    }

    .sh-field-icon {
        position: absolute;
        left: 14px;
        color: var(--color-text-light);
        display: flex;
        align-items: center;
        pointer-events: none;
    }

    .sh-control {
        width: 100%;
        padding: 14px 14px 14px 40px;
        border: 1px solid var(--color-border-input);
        border-radius: 8px;
        font-size: 14px;
        color: var(--color-text-dark);
        background-color: var(--color-white);
        box-sizing: border-box;
        transition: border-color 0.2s;
    }

    .sh-control:focus {
        outline: none;
        border-color: var(--color-primary);
    }

    /* Channel Custom Card Selectors Grid Systems */
    .sh-radio-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .sh-radio-box {
        position: relative;
        border: 1px solid var(--color-border-input);
        border-radius: 8px;
        padding: 16px 10px;
        text-align: center;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        background-color: var(--color-white);
        transition: all 0.2s;
        box-sizing: border-box;
    }

    /* Active blue circle selector dot */
    .sh-radio-box::after {
        content: '';
        position: absolute;
        top: 10px;
        right: 10px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: transparent;
        border: 2px solid var(--color-border-input);
    }

    .sh-radio-box input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .sh-radio-icon-circle {
        background-color: var(--color-body-bg);
        color: var(--color-primary);
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sh-radio-title {
        font-size: 12px;
        font-weight: 700;
        color: var(--color-text-darkest);
    }

    .sh-radio-desc {
        font-size: 10px;
        color: var(--color-text-soft);
        line-height: 1.35;
    }

    /* Checked status radio styles indicators */
    .sh-radio-box input[type="radio"]:checked ~ .sh-radio-icon-circle {
        background-color: var(--color-primary-bg);
    }

    .sh-radio-box:has(input[type="radio"]:checked) {
        border-color: var(--color-primary);
    }

    .sh-radio-box:has(input[type="radio"]:checked)::after {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
        box-shadow: 0 0 0 2px var(--color-white), 0 0 0 3px var(--color-primary);
    }

    /* Actions Submit Row Layout Blocks */
    .sh-form-actions-row {
        grid-column: span 2;
        margin-top: 8px;
    }

    .sh-submit-btn {
        width: 100%;
        background-color: var(--color-primary);
        color: var(--color-white);
        border: none;
        border-radius: 10px;
        padding: 16px;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .sh-submit-btn:hover {
        background-color: var(--color-primary-dark);
    }

    .sh-notice {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: 12px;
        color: var(--color-text-light);
        margin-top: 18px;
    }

    /* Footer Trust Badges Metric Columns Grid Layout */
    .sh-footer-badges-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        padding-top: 35px;
        border-top: 1px solid #e3e7ef;
        margin-bottom: 24px;
    }

    .sh-footer-badge-card {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1 1 220px;
        position: relative;
    }

    .sh-footer-badge-card:not(:last-child)::after {
        content: '';
        position: absolute;
        right: -10px;
        top: 15%;
        height: 70%;
        width: 1px;
        background-color: #ddd;
    }

    .sh-f-badge-icon-circle {
        width: 42px;
        height: 42px;
        background-color: var(--color-primary-bg);
        color: var(--color-primary);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .sh-f-badge-content h4 {
        margin: 0 0 3px 0;
        font-size: 13px;
        font-weight: 700;
        color: var(--color-text-darkest);
    }

    .sh-f-badge-content p {
        margin: 0;
        font-size: 11px;
        color: var(--color-text-soft);
        line-height: 1.35;
    }

    /* App downloads links row layout elements */
    .sh-app-downloads-row {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        margin-top: 24px;
    }

    .sh-app-downloads-row img {
        height: 32px;
        width: auto;
        cursor: pointer;
    }

    /* Flash Message utilities styling configurations */
    .sh-alert {
        padding: 12px 16px;
        border-radius: 8px;
        margin-bottom: 20px;
        font-size: 14px;
    }
    .sh-alert-success { background-color: #e6f7ed; color: #1e7e34; border: 1px solid #d3f2df; }
    .sh-alert-error { background-color: #fce8e6; color: #c82333; border: 1px solid #f9d6d2; }
    .sh-error-txt { color: #c82333; font-size: 12px; margin-top: 4px; font-weight: 500; }

    /* Breakpoint System Layout Engine Rules */
    @media (max-width: 991px) {
        .sh-header-row {
            flex-direction: column;
            text-align: center;
            gap: 48px;
        }
        .sh-subtitle {
            margin-left: auto;
            margin-right: auto;
        }
        .sh-mini-features {
            justify-content: center;
        }
        .sh-footer-badge-card::after {
            display: none !important;
        }
    }

    @media (max-width: 768px) {
        .sh-form-grid {
            grid-template-columns: 1fr;
        }
        .sh-form-actions-row {
            grid-column: span 1;
        }
        .sh-form-card {
            padding: 24px;
        }
    }

    @media (max-width: 480px) {
        .sh-radio-container {
            grid-template-columns: 1fr;
        }
        .sh-title {
            font-size: 34px;
        }
        .sh-collage-block {
            transform: scale(0.85);
            margin: -25px 0;
        }
    }


/* residential page css */


/* ==========================================================================
   PART 7 - RESIDENTIAL QUOTE PAGE
   ========================================================================== */

/* redidential quote page css */
    .u-proj-section {
        background-color: var(--up-bg);
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
        padding: 60px 20px;
        width: 100%;
        box-sizing: border-box;
    }

    .u-proj-container {
        max-width: 1140px;
        margin: 0 auto;
    }

    .u-proj-main-card {
        background-color: var(--up-white);
        border-radius: 24px;
        padding: 50px 40px;
        box-shadow: 0 10px 40px rgba(15, 35, 95, 0.02);
        box-sizing: border-box;
        margin-bottom: 24px;
        text-align: center;
        position: relative;
    }

    .u-proj-header {
        margin-bottom: 40px;
    }

    .u-proj-title {
        font-size: 38px;
        font-weight: 800;
        color: var(--up-darkest);
        margin: 0 0 10px 0;
        letter-spacing: -0.5px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .u-proj-title::after {
        content: '✦';
        color: var(--up-brand);
        font-size: 20px;
        vertical-align: super;
    }

    .u-proj-lead {
        font-size: 14px;
        color: var(--up-text);
        margin: 0;
    }

    .u-proj-workspace {
        display: flex;
        flex-direction: row;
        gap: 40px;
        text-align: left;
    }

    .u-proj-col-left {
        flex: 1.1;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .u-proj-col-right {
        flex: 0.9;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .u-proj-step-bar {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 16px;
    }

    .u-proj-step-id {
        background-color: var(--up-brand-light);
        color: var(--up-brand);
        font-size: 11px;
        font-weight: 700;
        width: 26px;
        height: 26px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .u-proj-step-name {
        font-size: 14px;
        font-weight: 700;
        color: var(--up-darkest);
    }

    .u-proj-step-name span {
        font-weight: 400;
        color: var(--up-muted);
        font-size: 12px;
    }

    .u-proj-step-sublabel {
        font-size: 11px;
        color: var(--up-muted);
        margin: -12px 0 16px 36px;
    }

    .u-proj-upload-area {
        border: 2px dashed rgba(73, 105, 233, 0.25);
        background-color: var(--up-bg);
        border-radius: 16px;
        padding: 40px 20px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }

    .u-proj-upload-circle {
        width: 44px;
        height: 44px;
        background-color: var(--up-white);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    }

    .u-proj-upload-circle svg {
        color: var(--up-brand);
    }

    .u-proj-upload-headline {
        font-size: 13px;
        font-weight: 700;
        color: var(--up-darkest);
        margin: 0;
    }

    .u-proj-upload-subtext {
        font-size: 11px;
        color: var(--up-muted);
        margin: 0;
    }

    .u-proj-upload-btn {
        background-color: var(--color-stars);
        color: var(--color-black);
        border: none;
        border-radius: 8px;
        padding: 10px 24px;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 4px;
    }

    .u-proj-upload-limits {
        font-size: 10px;
        color: var(--up-muted);
        margin: 0;
    }

    .u-proj-textarea-wrapper {
        position: relative;
        width: 100%;
    }

    .u-proj-textarea {
        width: 100%;
        height: 140px;
        border: 1px solid var(--up-border-input);
        border-radius: 10px;
        padding: 14px;
        font-size: 13px;
        color: var(--up-darkest);
        background-color: var(--up-white);
        box-sizing: border-box;
        resize: none;
        font-family: inherit;
    }

    .u-proj-textarea::placeholder {
        color: #aaa;
    }

    .u-proj-textarea:focus {
        outline: none;
        border-color: var(--up-brand);
    }

    .u-proj-char-counter {
        position: absolute;
        bottom: 12px;
        right: 14px;
        font-size: 11px;
        color: var(--up-muted);
    }

    .u-proj-input-box {
        position: relative;
        margin-bottom: 16px;
    }

    .u-proj-input-box label {
        display: block;
        font-size: 12px;
        font-weight: 700;
        color: var(--up-text);
        margin-bottom: 6px;
    }

    .u-proj-field-control {
        width: 100%;
        padding: 12px 14px 12px 36px;
        border: 1px solid var(--up-border-input);
        border-radius: 8px;
        font-size: 13px;
        color: var(--up-darkest);
        box-sizing: border-box;
        background-color: var(--up-white);
    }

    .u-proj-field-icon-left {
        position: absolute;
        bottom: 13px;
        left: 12px;
        color: var(--up-brand);
        display: flex;
        align-items: center;
        pointer-events: none;
    }

    .u-proj-field-icon-right {
        position: absolute;
        bottom: 13px;
        right: 12px;
        color: #aaa;
        display: flex;
        align-items: center;
        pointer-events: none;
    }

    .u-proj-checkbox-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 14px;
        margin-bottom: 20px;
        cursor: pointer;
        user-select: none;
    }

    .u-proj-checkbox-row input {
        accent-color: var(--up-brand);
        margin: 0;
    }

    .u-proj-checkbox-label {
        font-size: 11px;
        font-weight: 700;
        color: var(--up-darkest);
    }

    .u-proj-action-submit-btn {
        width: 100%;
        background-color: var(--color-stars);
        color: var(--color-black);
        border: none;
        border-radius: 10px;
        padding: 14px;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition: background-color 0.2s;
    }

    .u-proj-action-submit-btn:hover {
        background-color: var(--up-brand-hover);
    }

    .u-proj-action-submit-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .u-proj-why-us-card {
        background-color: var(--up-bg);
        border-radius: 16px;
        padding: 24px;
        box-sizing: border-box;
    }

    .u-proj-why-us-headline {
        font-size: 13px;
        font-weight: 700;
        color: var(--up-darkest);
        margin: 0 0 20px 0;
    }

    .u-proj-why-us-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 18px;
    }

    .u-proj-why-us-item:last-child {
        margin-bottom: 0;
    }

    .u-proj-why-icon-badge {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: var(--up-brand-light);
        color: var(--up-brand);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .u-proj-why-details h5 {
        margin: 0 0 2px 0;
        font-size: 12px;
        font-weight: 700;
        color: var(--up-brand);
    }

    .u-proj-why-details p {
        margin: 0;
        font-size: 11px;
        color: var(--up-text);
        line-height: 1.4;
    }

    .u-proj-assurance-bar {
        background-color: var(--up-white);
        border: 1px solid var(--up-border);
        border-radius: 12px;
        padding: 16px 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        margin-bottom: 30px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01);
    }

    .u-proj-assurance-node {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1;
        justify-content: center;
    }

    .u-proj-assurance-node:not(:last-child) {
        border-right: 1px solid var(--up-border);
        padding-right: 20px;
    }

    .u-proj-assurance-icon-box {
        width: 36px;
        height: 36px;
        background-color: var(--up-brand-light);
        color: var(--up-brand);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .u-proj-assurance-txt-box h6 {
        margin: 0 0 2px 0;
        font-size: 12px;
        font-weight: 700;
        color: var(--up-darkest);
    }

    .u-proj-assurance-txt-box p {
        margin: 0;
        font-size: 10px;
        color: var(--up-muted);
    }

    .u-proj-footer-card {
        background-color: var(--up-white);
        border-radius: 24px;
        padding: 40px;
        box-shadow: 0 10px 40px rgba(15, 35, 95, 0.02);
        box-sizing: border-box;
    }

    .u-proj-footer-top-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 30px;
        padding-bottom: 30px;
        border-bottom: 1px solid var(--up-border);
    }

    .u-proj-footer-brand-side h3 {
        margin: 0 0 4px 0;
        font-size: 22px;
        font-weight: 800;
        color: var(--up-brand);
        letter-spacing: -0.5px;
        display: inline-flex;
        align-items: center;
        gap: 2px;
    }

    .u-proj-footer-brand-side h3 span {
        color: var(--up-darkest);
    }

    .u-proj-footer-brand-side h3::after {
        content: '✦';
        font-size: 14px;
        vertical-align: super;
    }

    .u-proj-footer-brand-side p {
        margin: 0 0 16px 0;
        font-size: 12px;
        color: var(--up-muted);
    }

    .u-proj-footer-socials {
        display: flex;
        gap: 10px;
    }

    .u-proj-social-icon-btn {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: var(--up-brand-light);
        color: var(--up-brand);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 13px;
        transition: transform 0.2s;
    }

    .u-proj-social-icon-btn:hover {
        transform: translateY(-2px);
    }

    .u-proj-footer-contacts-side {
        display: flex;
        gap: 30px;
        align-items: center;
    }

    .u-proj-contact-item-node {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .u-proj-contact-item-circle {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: var(--up-brand-light);
        color: var(--up-brand);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .u-proj-contact-item-details h5 {
        margin: 0 0 2px 0;
        font-size: 13px;
        font-weight: 700;
        color: var(--up-darkest);
    }

    .u-proj-contact-item-details p {
        margin: 0;
        font-size: 11px;
        color: var(--up-muted);
    }

    .u-proj-footer-action-quote-btn {
        background-color: var(--up-brand);
        color: var(--up-white);
        border: none;
        border-radius: 8px;
        padding: 12px 20px;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .u-proj-footer-middle-row {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 24px 0;
        border-bottom: 1px solid var(--up-border);
    }

    .u-proj-map-marker-btn {
        width: 36px;
        height: 36px;
        background-color: var(--up-brand-light);
        color: var(--up-brand);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .u-proj-cities-scroll-panel {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 16px;
    }

    .u-proj-city-link {
        font-size: 12px;
        color: var(--up-text);
        text-decoration: none;
        font-weight: 500;
    }

    .u-proj-footer-bottom-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 24px;
    }

    .u-proj-copyright-node {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .u-proj-copyright-icon-badge {
        width: 32px;
        height: 32px;
        background-color: transparent;
        border: 1px solid var(--up-border);
        color: var(--up-brand);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
    }

    .u-proj-copyright-txt-box p {
        margin: 0;
        font-size: 11px;
        color: var(--up-muted);
        line-height: 1.4;
    }

    .u-proj-legal-links-box {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .u-proj-legal-link-node {
        font-size: 11px;
        color: var(--up-muted);
        text-decoration: none;
        font-weight: 500;
    }

    @media (max-width: 991px) {
        .u-proj-workspace {
            flex-direction: column;
            gap: 30px;
        }

        .u-proj-assurance-bar {
            flex-direction: column;
            padding: 20px;
            gap: 16px;
        }

        .u-proj-assurance-node {
            width: 100%;
            justify-content: flex-start;
        }

        .u-proj-assurance-node:not(:last-child) {
            border-right: none;
            border-bottom: 1px solid var(--up-border);
            padding-right: 0;
            padding-bottom: 16px;
        }

        .u-proj-footer-top-row {
            flex-direction: column;
            align-items: flex-start;
            gap: 24px;
        }

        .u-proj-footer-contacts-side {
            flex-direction: column;
            align-items: flex-start;
            width: 100%;
            gap: 20px;
        }

        .u-proj-footer-action-quote-btn {
            width: 100%;
            justify-content: center;
        }
    }

    @media (max-width: 768px) {
        .u-proj-main-card {
            padding: 30px 20px;
        }

        .u-proj-title {
            font-size: 28px;
        }

        .u-proj-footer-bottom-row {
            flex-direction: column;
            align-items: flex-start;
            gap: 20px;
        }
    }


/* redidential quote page css */

/* ==========================================================================
   PART 8 - CHAT PAGE
   ========================================================================== */

/* chat page css */
    .ch-layout-section {
        background-color: var(--color-body-bg);
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
        padding: 80px 20px;
        margin-top: 20px;
        width: 100%;
        box-sizing: border-box;
    }

    .ch-layout-container {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        gap: 24px;
        align-items: flex-start;
    }

    .ch-layout-sidebar {
        width: 280px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        flex-shrink: 0;
    }

    .ch-layout-card {
        background-color: var(--color-white);
        border-radius: 16px;
        padding: 20px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
    }

    .ch-layout-card-title {
        font-size: 14px;
        font-weight: 700;
        color: var(--color-text-darkest);
        margin: 0 0 16px 0;
    }

    .ch-layout-preview-box {
        width: 100%;
        height: 190px;
        background-color: #dcdcdc;
        border-radius: 12px;
        position: relative;
        margin-bottom: 16px;
    }

    .ch-layout-view-photo-btn {
        position: absolute;
        bottom: 12px;
        right: 12px;
        background-color: var(--color-white);
        border: none;
        border-radius: 20px;
        padding: 6px 12px;
        font-size: 11px;
        font-weight: 600;
        color: var(--color-text-darkest);
        display: flex;
        align-items: center;
        gap: 6px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        cursor: pointer;
    }

    .ch-layout-meta-row {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 14px;
    }

    .ch-layout-meta-row:last-child {
        margin-bottom: 0;
    }

    .ch-layout-meta-icon {
        color: var(--color-primary);
        margin-top: 2px;
        display: flex;
        align-items: center;
    }

    .ch-layout-meta-text h5 {
        margin: 0 0 2px 0;
        font-size: 13px;
        font-weight: 700;
        color: var(--color-text-darkest);
    }

    .ch-layout-meta-text p {
        margin: 0;
        font-size: 11px;
        color: var(--color-text-muted);
        line-height: 1.3;
    }

    .ch-layout-steps {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .ch-layout-step-node {
        display: flex;
        align-items: center;
        gap: 12px;
        position: relative;
    }

    .ch-layout-step-node:not(:last-child)::after {
        content: '';
        position: absolute;
        left: 13px;
        top: 28px;
        bottom: -22px;
        width: 2px;
        background-color: var(--color-border-lighter);
    }

    .ch-layout-step-circle {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background-color: var(--color-border-feature);
        color: var(--color-text-light);
        font-size: 12px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
    }

    .ch-layout-step-node.active .ch-layout-step-circle {
        background-color: var(--color-primary);
        color: var(--color-white);
    }

    .ch-layout-step-details h5 {
        margin: 0 0 2px 0;
        font-size: 13px;
        font-weight: 700;
        color: var(--color-text-darkest);
    }

    .ch-layout-step-details p {
        margin: 0;
        font-size: 11px;
        color: var(--color-text-light);
    }

    .ch-layout-help-box {
        background-color: var(--color-hero-badge-bg);
        border-radius: 16px;
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    }

    .ch-layout-help-header {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .ch-layout-help-icon {
        color: var(--color-primary);
        display: flex;
        align-items: center;
    }

    .ch-layout-help-title h4 {
        margin: 0 0 2px 0;
        font-size: 14px;
        font-weight: 700;
        color: var(--color-text-darkest);
    }

    .ch-layout-help-title p {
        margin: 0;
        font-size: 11px;
        color: var(--color-text-body);
    }

    .ch-layout-help-btn {
        background-color: var(--color-white);
        border: 1px solid var(--up-border);
        border-radius: 20px;
        padding: 8px 16px;
        font-size: 12px;
        font-weight: 700;
        color: var(--color-primary);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        box-shadow: 0 2px 6px rgba(15,35,95,0.02);
    }

    .ch-layout-chat-column {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 16px;
        min-width: 0;
    }

    .ch-layout-main-chat-panel {
        width: 100%;
        background-color: var(--color-white);
        border-radius: 20px;
        padding: 30px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
    }

    .ch-layout-chat-top-header {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 24px;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--up-border);
    }

    .ch-layout-operator-avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background-color: #d1d5db;
        flex-shrink: 0;
    }

    .ch-layout-operator-name h3 {
        margin: 0 0 2px 0;
        font-size: 15px;
        font-weight: 800;
        color: var(--color-text-darkest);
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .ch-layout-online-tag {
        font-size: 10px;
        color: var(--color-green-text);
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .ch-layout-online-tag::before {
        content: '';
        width: 6px;
        height: 6px;
        background-color: var(--color-green-text);
        border-radius: 50%;
    }

    .ch-layout-operator-name p {
        margin: 0;
        font-size: 12px;
        color: var(--color-text-muted);
    }

    .ch-layout-notice-banner {
        background-color: var(--color-primary-bg);
        color: var(--color-primary);
        font-size: 12px;
        font-weight: 600;
        padding: 10px 16px;
        border-radius: 30px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 30px;
    }

    .ch-layout-msg-row {
        display: flex;
        gap: 12px;
        margin-bottom: 24px;
        width: 100%;
    }

    .ch-layout-msg-row.ch-operator-side {
        justify-content: flex-start;
    }

    .ch-layout-msg-row.ch-client-side {
        justify-content: flex-end;
    }

    .ch-layout-msg-avatar-mini {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background-color: #e2e8f0;
        flex-shrink: 0;
        margin-top: 4px;
    }

    .ch-layout-msg-content-wrapper {
        max-width: 75%;
    }

    .ch-layout-question-counter {
        font-size: 10px;
        font-weight: 700;
        color: var(--color-primary);
        text-transform: uppercase;
        margin-bottom: 6px;
        letter-spacing: 0.5px;
    }

    .ch-layout-msg-bubble {
        padding: 14px 18px;
        border-radius: 4px 16px 16px 16px;
        font-size: 13px;
        line-height: 1.5;
        position: relative;
        word-break: break-word;
    }

    .ch-operator-side .ch-layout-msg-bubble {
        background-color: var(--color-body-bg);
        color: var(--color-text-dark);
        border: 1px solid var(--up-border);
    }

    .ch-client-side .ch-layout-msg-bubble {
        background-color: var(--color-primary);
        color: var(--color-white);
        border-radius: 16px 4px 16px 16px;
    }

    .ch-layout-msg-timestamp {
        font-size: 9px;
        color: var(--color-text-light);
        text-align: right;
        margin-top: 4px;
        display: block;
    }

    .ch-client-side .ch-layout-msg-timestamp {
        color: rgba(255,255,255,0.7);
        display: inline-flex;
        align-items: center;
        gap: 4px;
        float: right;
    }

    .ch-layout-pill-options-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 12px;
        margin-left: 40px;
    }

    .ch-layout-option-pill-btn {
        background-color: var(--color-white);
        border: 1px solid rgba(73,105,233,0.2);
        color: var(--color-primary);
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: all 0.2s;
    }

    .ch-layout-option-pill-btn:hover {
        background-color: var(--color-primary-bg);
    }

    .ch-layout-estimate-wrapper-card {
        background-color: var(--color-green-light);
        border: 1px solid var(--color-green-border);
        border-radius: 16px;
        padding: 20px;
        margin-top: 24px;
        margin-left: 40px;
        box-sizing: border-box;
    }

    .ch-layout-estimate-top-bar {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 16px;
        gap: 10px;
    }

    .ch-layout-estimate-title-area {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .ch-layout-estimate-indicator-dot {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: var(--color-green-text);
        flex-shrink: 0;
    }

    .ch-layout-estimate-heading h4 {
        margin: 0 0 2px 0;
        font-size: 14px;
        font-weight: 700;
        color: var(--color-text-darkest);
    }

    .ch-layout-estimate-heading p {
        margin: 0;
        font-size: 11px;
        color: var(--color-text-light);
    }

    .ch-layout-estimate-pill-status {
        background-color: var(--color-white);
        border: 1px solid var(--color-green-border);
        color: var(--color-green-text);
        font-size: 10px;
        font-weight: 700;
        padding: 4px 10px;
        border-radius: 12px;
        flex-shrink: 0;
    }

    .ch-layout-estimate-inner-white-box {
        background-color: var(--color-white);
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.01);
    }

    .ch-layout-est-split-columns {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        margin-top: 14px;
    }

    .ch-layout-est-col-info {
        flex: 1.2;
        min-width: 0;
    }

    .ch-layout-est-col-pricing {
        flex: 0.8;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        text-align: right;
        flex-shrink: 0;
    }

    .ch-layout-est-category {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        font-weight: 700;
        color: var(--color-primary);
        margin-bottom: 12px;
    }

    .ch-layout-est-scope h5 {
        margin: 0 0 6px 0;
        font-size: 11px;
        font-weight: 700;
        color: var(--color-text-light);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .ch-layout-est-scope-box {
        border: 1px solid var(--color-purple-border);
        background-color: var(--color-purple-light);
        border-radius: 4px;
        padding: 8px 12px;
        font-size: 11px;
        color: var(--color-purple-text);
        line-height: 1.4;
        font-weight: 500;
        word-break: break-word;
    }

    .ch-layout-pricing-row-item {
        margin-bottom: 8px;
    }

    .ch-layout-pricing-row-item span {
        font-size: 11px;
        color: var(--color-text-light);
        display: block;
        font-weight: 600;
    }

    .ch-layout-pricing-row-item strong {
        font-size: 18px;
        color: var(--color-green-text);
        font-weight: 800;
    }

    .ch-layout-insurance-disclaimer-strip {
        background-color: var(--color-body-bg);
        border-radius: 8px;
        padding: 10px 14px;
        margin-top: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 11px;
        color: var(--color-text-body);
        font-weight: 500;
    }

    .ch-layout-insurance-disclaimer-strip svg {
        color: var(--color-primary);
        flex-shrink: 0;
    }

    .ch-layout-estimate-triggers-bar {
        display: flex;
        gap: 10px;
        margin-top: 16px;
        margin-left: 40px;
    }

    .ch-layout-trigger-action-btn {
        flex: 1;
        padding: 12px;
        font-size: 13px;
        font-weight: 700;
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        box-sizing: border-box;
    }

    .ch-layout-trigger-action-btn.btn-reject {
        background-color: var(--color-white);
        border: 1px solid var(--color-red-border);
        color: var(--color-red-text);
    }

    .ch-layout-trigger-action-btn.btn-modify {
        background-color: var(--color-white);
        border: 1px solid rgba(73,105,233,0.3);
        color: var(--color-primary);
    }

    .ch-layout-trigger-action-btn.btn-accept {
    
        border: none;
        color: var(--color-white);
    }

    /* Fixed Input Box Layout System for Ultimate Responsiveness */
    .ch-layout-bottom-input-panel {
        width: 100%;
        background-color: var(--color-white);
        border-radius: 16px;
        padding: 12px 16px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .ch-layout-attachment-trigger-btn {
        background: none;
        border: none;
        color: var(--color-primary);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
        padding: 4px 0;
    }

    .ch-layout-attachment-text {
        font-size: 13px;
        font-weight: 700;
    }

    .ch-layout-textbox-control {
        flex: 1;
        border: none;
        outline: none;
        font-size: 14px;
        color: var(--color-text-darkest);
        background: transparent;
        padding: 6px 0;
        min-width: 0;
    }

    .ch-layout-textbox-control::placeholder {
        color: var(--color-text-light);
    }

    .ch-layout-submit-send-btn {
        background-color: var(--color-primary);
        color: var(--color-white);
        border: none;
        border-radius: 24px;
        padding: 10px 20px;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
    }

    .ch-layout-submit-send-btn:hover {
        background-color: var(--color-primary-dark);
    }

    .ch-layout-secure-encryption-notice {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: 12px;
        color: var(--color-text-light);
        margin-top: 12px;
        font-weight: 500;
    }

    /* Responsive Transformations Rules Engine */
    @media (max-width: 991px) {
        .ch-layout-container {
            flex-direction: column;
            align-items: stretch;
        }
        .ch-layout-sidebar {
            width: 100%;
        }
    }

    @media (max-width: 768px) {
        .ch-layout-est-split-columns {
            flex-direction: column;
            align-items: stretch;
        }
        .ch-layout-est-col-pricing {
            align-items: flex-start;
            text-align: left;
        }
        .ch-layout-estimate-triggers-bar {
            flex-direction: column;
            margin-left: 0;
        }
        .ch-layout-pill-options-grid {
            margin-left: 0;
        }
        .ch-layout-estimate-wrapper-card {
            margin-left: 0;
        }
    }

    @media (max-width: 576px) {
        .ch-layout-main-chat-panel {
            padding: 20px 16px;
        }
        .ch-layout-msg-content-wrapper {
            max-width: 90%;
        }
        /* Mobile-Safe styling targets: hides string label on micro displays */
        .ch-layout-attachment-text {
            display: none !important;
        }
        .ch-layout-bottom-input-panel {
            padding: 10px 12px;
            gap: 8px;
        }
    }

/* chat page css */

/* ==========================================================================
   PART 9 - RESIDENTIAL SERVICE PAGE (INTRO & CARDS)
   ========================================================================== */

/* Residential service page css */
/* ==========================================================================
   Find the Right Service for Every Project Section
   ========================================================================== */

/* Section Base */
.rs-section {
    background-color: var(--color-body-bg); /* #f5f7fc */
    padding: 90px 5% 10px;
    overflow: hidden;
}

.rs-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

/* ------------------------------------
   LEFT SIDE: CONTENT
------------------------------------ */
.rs-content {
    flex: 1;
    max-width: 520px;
}

/* Top Badge */
.rs-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--color-hero-badge-bg); /* #edf4ff */
    color: var(--color-hero-badge-text); /* #4b6bff */
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 24px;
    text-transform: uppercase;
}

/* Heading */
.rs-title {
    font-size: 40px;
    font-weight: 700;
    color: var(--color-text-darkest); /* #111 */
    line-height: 1.2;
    margin-bottom: 18px;
    letter-spacing: -0.02em;
}

.rs-title span {
    color: var(--color-stars); /* #4969e9 */
}

/* Description */
.rs-description {
    font-size: 15px;
    color: var(--color-text-body); /* #555 */
    line-height: 1.6;
    margin-bottom: 32px;
}

/* 2x2 Feature Bullets Grid */
.rs-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 24px;
}

.rs-feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-dark); /* #222 */
}

.rs-feature-item i {
    color: var(--color-primary); /* #4969e9 */
    font-size: 16px;
}

/* ------------------------------------
   RIGHT SIDE: STAGGERED PHOTO GRID
------------------------------------ */
.rs-media-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.rs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    width: 100%;
    max-width: 540px;
    position: relative;
    padding: 20px 0; /* Creates breathing space for staggered offsets */
}

/* Common Card Base Style */
.rs-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background-color: var(--color-white);
    border: 3px solid var(--color-white);
    box-shadow: 0 10px 25px var(--shadow-color-08);
    aspect-ratio: 4 / 3; /* Maintains exact image proportions at any screen size */
    width: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rs-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rs-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 32px var(--shadow-color-15);
}

/* Stagger Offset Effects */
.rs-card-top-left {
    transform: translateY(-10px);
}

.rs-card-top-right {
    transform: translateY(14px);
}

.rs-card-bottom-left {
    transform: translateY(-10px);
}

.rs-card-bottom-right {
    transform: translateY(14px);
}

/* Inner Pill Text Labels */
.rs-card-label {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(4px);
    color: var(--color-text-darkest);
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    box-shadow: 0 2px 8px var(--shadow-color-1);
    white-space: nowrap;
}

/* Google Reviews Overlay Badge */
.rs-google-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--color-white);
    padding: 6px 10px;
    border-radius: 10px;
    box-shadow: 0 6px 16px var(--shadow-color-12);
    text-align: center;
    z-index: 5;
}

.rs-google-score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--color-primary);
}

.rs-google-score i {
    font-size: 11px;
}

.rs-google-score strong {
    font-size: 11px;
    color: var(--color-text-darkest);
}

.rs-google-text {
    display: block;
    font-size: 8px;
    color: var(--color-text-muted);
    margin: 1px 0;
}

.rs-google-stars {
    color: var(--color-stars);
    font-size: 8px;
}

/* ------------------------------------
   RESPONSIVE LAYOUT
------------------------------------ */
@media (max-width: 1024px) {
    .rs-container {
        gap: 36px;
    }
    
    .rs-title {
        font-size: 32px;
    }
}

@media (max-width: 768px) {
    .rs-section {
        padding: 80px 5%;
    }

    .rs-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }

    .rs-content {
        max-width: 100%;
    }

    .rs-media-wrapper {
        width: 100%;
    }

    .rs-grid {
        max-width: 100%;
        gap: 12px;
    }

    /* Maintains staggered offsets on mobile viewports */
    .rs-card-top-left,
    .rs-card-bottom-left {
        transform: translateY(-6px);
    }

    .rs-card-top-right,
    .rs-card-bottom-right {
        transform: translateY(8px);
    }
}

@media (max-width: 480px) {
    .rs-title {
        font-size: 26px;
    }

    .rs-features {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .rs-card-label {
        font-size: 9px;
        padding: 4px 8px;
        bottom: 6px;
        left: 6px;
    }

    .rs-google-badge {
        padding: 4px 6px;
    }

    .rs-google-text {
        font-size: 7px;
    }

    .rs-google-stars i {
        font-size: 7px;
    }
}
/* ==========================================================================
   Residential Services Section
   ========================================================================== */

.res-section {
    background-color: var(--color-body-bg); /* #f5f7fc */
    padding: 10px 5%;
}

.res-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* ------------------------------------
   HEADER STYLING
------------------------------------ */
.res-header {
    margin-bottom: 40px;
}

.res-header-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.res-header-title i {
    font-size: 24px;
    color: var(--color-primary); /* #4969e9 */
}

.res-header-title h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-text-darkest);
    letter-spacing: -0.02em;
}

.res-header p {
    font-size: 14px;
    color: var(--color-text-muted);
}
.rs-quote-btn {
    margin-top: 30px;
}

.rs-btn {
    display: inline-block;
    padding: 6px 12px;
    background: var(--color-stars); /* Change to your theme color */
    color: black;
    text-decoration: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.rs-btn:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
}
/* ------------------------------------
   RESPONSIVE MASONRY GRID (3 COLUMNS)
------------------------------------ */
.res-grid {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.res-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ------------------------------------
   CARD STYLING
------------------------------------ */
.res-card {
    background: var(--color-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px var(--shadow-color-08);
    border: 1px solid var(--color-border-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.res-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px var(--shadow-color-12);
}

/* Card Header Image */
.res-card-image {
    position: relative;
    width: 100%;
    height: 140px;
    background-color: #e5e7eb;
}

.res-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.res-card-icon {
    position: absolute;
    bottom: -18px;
    left: 20px;
    width: 38px;
    height: 38px;
    background: var(--color-white);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    font-size: 16px;
    box-shadow: 0 4px 12px var(--shadow-color-1);
}

/* Card Body Content */
.res-card-content {
    padding: 30px 20px 20px;
}

.res-card-content h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--color-text-darkest);
    margin-bottom: 4px;
}
.res-card-content a {
    text-decoration: none !important;
}

.res-card-sub {
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.4;
    margin-bottom: 18px;
}

/* Service Numbered List */
.res-service-list {
    padding-left: 18px;
    margin: 0 0 20px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.res-service-list li {
    font-size: 12px;
    color: var(--color-text-body);
}

.res-service-list li a {
    color: var(--color-text-body);
    text-decoration: none;
    transition: color 0.2s ease;
}

.res-service-list li a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Button */
.res-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.res-btn:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-1px);
}

/* ------------------------------------
   RESPONSIVE MEDIA QUERIES
------------------------------------ */
@media (max-width: 991px) {
    .res-grid {
        flex-direction: column;
    }

    .res-column {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .res-header-title h2 {
        font-size: 22px;
    }

    .res-card-image {
        height: 120px;
    }
}
/* Residential service page css */

/* ==========================================================================
   PART 9 - RESIDENTIAL SERVICE PAGE (SERVICE SLIDER)
   ========================================================================== */

/* ==========================================================================
   Popular Services Carousel Section
   ========================================================================== */

.ps-section {
    background-color: var(--color-body-bg); /* #f5f7fc */
    padding: 20px 5%;
    overflow: hidden;
}

.ps-container {
    max-width: 1240px;
    margin: 0 auto;
}

/* Header */
.ps-header {
    text-align: center;
    margin-bottom: 40px;
}

.ps-subtitle {
    display: block;
    color: var(--color-primary); /* #4969e9 */
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
}

.ps-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-text-darkest); /* #111 */
    letter-spacing: -0.02em;
}

/* ------------------------------------
   SLIDER & CAROUSEL LAYOUT
------------------------------------ */
.ps-slider-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* Horizontal Track */
.ps-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 10px 4px 20px;
    scrollbar-width: none; /* Hide scrollbar Firefox */
    -ms-overflow-style: none; /* Hide scrollbar IE/Edge */
}

.ps-track::-webkit-scrollbar {
    display: none; /* Hide scrollbar Chrome/Safari */
}

/* Service Card Item */
.ps-card {
    flex: 0 0 calc((100% - 80px) / 6); /* Shows exactly 6 items on desktop */
    min-width: 170px;
    background-color: var(--color-white);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 6px 18px var(--shadow-color-08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.ps-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 28px var(--shadow-color-12);
}

/* Top Image Container */
.ps-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* Square ratio */
    background-color: #d1d5db; /* Placeholder color matching reference */
    overflow: hidden;
}

.ps-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.ps-card:hover .ps-card-image img {
    transform: scale(1.05);
}

/* Bottom Footer Bar */
.ps-card-footer {
    position: relative;
    padding: 16px 12px 14px;
    background-color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Small Blue Square Badge Overlay */
.ps-card-badge {
    position: absolute;
    top: -12px;
    left: 12px;
    width: 22px;
    height: 22px;
    background-color: var(--color-primary); /* #4969e9 */
    border-radius: 6px;
    box-shadow: 0 2px 6px var(--shadow-primary-25);
}

.ps-card-footer h3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-darkest);
    text-align: center;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Navigation Arrow Buttons */
.ps-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--color-white);
    border: none;
    color: var(--color-primary);
    box-shadow: 0 4px 14px var(--shadow-color-15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.ps-arrow:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-50%) scale(1.08);
}

.ps-arrow-left {
    left: -20px;
}

.ps-arrow-right {
    right: -20px;
}

/* ------------------------------------
   RESPONSIVE MEDIA QUERIES
------------------------------------ */
@media (max-width: 1200px) {
    .ps-card {
        flex: 0 0 calc((100% - 48px) / 4); /* 4 items visible */
    }
}

@media (max-width: 768px) {
    .ps-title {
        font-size: 22px;
    }

    .ps-card {
        flex: 0 0 calc((100% - 32px) / 3); /* 3 items visible */
        min-width: 140px;
    }

    .ps-arrow-left {
        left: -10px;
    }

    .ps-arrow-right {
        right: -10px;
    }
}

@media (max-width: 480px) {
    .ps-card {
        flex: 0 0 calc((100% - 16px) / 2); /* 2 items visible */
    }

    .ps-card-footer h3 {
        font-size: 12px;
    }
}
/* ==========================================================================
   Popular Services Carousel Section
   ========================================================================== */

/* ==========================================================================
   PART 10 - RESIDENTIAL SERVICE DETAIL PAGE
   ========================================================================== */

/* Residential service detail page css */
/* ==========================================================================
   Blog Detail Hero Section
   ========================================================================== */

.bdh-section {
    background-color: var(--color-body-bg); /* #f5f7fc */
    padding: 100px 5% 80px;
    overflow: hidden;
}

.bdh-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

/* ------------------------------------
   LEFT COLUMN: CONTENT
------------------------------------ */
.bdh-content {
    flex: 1;
    max-width: 560px;
}

/* Breadcrumbs */
.bdh-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
    color: var(--color-primary);
    margin-bottom: 28px;
}

.bdh-breadcrumbs a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.bdh-breadcrumbs a:hover {
    opacity: 0.8;
}

.bdh-breadcrumbs i {
    font-size: 10px;
    color: var(--color-text-light);
}

.bdh-breadcrumbs span {
    color: var(--color-text-darkest);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

/* Heading */
.bdh-title {
    font-size: 42px;
    font-weight: 800;
    color: var(--color-text-darkest);
    line-height: 1.15;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.bdh-title span {
    color: var(--color-stars);
}

/* Paragraph */
.bdh-description {
    font-size: 15px;
    color: var(--color-text-body);
    line-height: 1.6;
    margin-bottom: 28px;
}

/* Action Buttons Group */
.bdh-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.bdh-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 14px var(--shadow-primary-25);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.bdh-btn-primary:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-2px);
}

.bdh-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: transparent;
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
    padding: 11px 22px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.bdh-btn-secondary:hover {
    background-color: var(--color-hero-badge-bg);
}

/* Feature Icons Row */
.bdh-features {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-bottom: 32px;
}

.bdh-feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bdh-feature-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--color-hero-badge-bg);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.bdh-feature-item span {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-dark);
    line-height: 1.2;
}

/* Category & Article Meta Bar */
.bdh-meta-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.bdh-category-tag {
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.bdh-meta-item {
    font-size: 13px;
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Author Box */
.bdh-author-box {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bdh-author-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.bdh-author-info {
    font-size: 13px;
    color: var(--color-text-muted);
}

.bdh-author-info strong {
    color: var(--color-text-darkest);
}

.bdh-divider {
    color: var(--color-border-input);
    margin: 0 4px;
}

/* ------------------------------------
   RIGHT COLUMN: MEDIA IMAGE
------------------------------------ */
.bdh-media-wrapper {
    flex: 1;
    position: relative;
    max-width: 580px;
}

/* Background Decorative Dot Pattern */
.bdh-dots-bg {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 120px;
    height: 120px;
    background-image: radial-gradient(var(--color-primary) 1.5px, transparent 1.5px);
    background-size: 12px 12px;
    opacity: 0.25;
    z-index: 1;
}

.bdh-image-card {
    position: relative;
    width: 100%;
    height: 420px;
    border-radius: 28px;
    overflow: hidden;
    background-color: #d8d8d8; /* Placeholder color matching screenshot */
    box-shadow: 0 16px 36px var(--shadow-color-08);
    z-index: 2;
}

.bdh-image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ------------------------------------
   RESPONSIVE MEDIA QUERIES
------------------------------------ */
@media (max-width: 1024px) {
    .bdh-container {
        gap: 36px;
    }

    .bdh-title {
        font-size: 34px;
    }

    .bdh-image-card {
        height: 360px;
    }
}

@media (max-width: 768px) {
    .bdh-section {
        padding: 80px 5% 60px;
    }

    .bdh-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .bdh-content {
        max-width: 100%;
    }

    .bdh-media-wrapper {
        width: 100%;
        max-width: 100%;
    }

    .bdh-image-card {
        height: 280px;
        border-radius: 20px;
    }

    .bdh-features {
        gap: 16px;
        flex-wrap: wrap;
    }

    .bdh-breadcrumbs span {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .bdh-title {
        font-size: 28px;
    }

    .bdh-actions {
        flex-direction: column;
        width: 100%;
    }

    .bdh-btn-primary, 
    .bdh-btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .bdh-features {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* ==========================================================================
   About Service / Article Content Section
   ========================================================================== */

.as-section {
    background-color: var(--color-body-bg); /* #f5f7fc */
    padding: 20px 5% 0px;
}

.as-container {
    margin: 0 auto;
}

/* Content Blocks */
.as-block {
    margin-bottom: 40px;
}

.as-heading {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-darkest); /* #111 */
    margin-bottom: 18px;
    letter-spacing: -0.01em;
}

.as-block p {
    font-size: 16px;
    color: var(--color-text-body); /* #555 */
    line-height: 1.7;
    margin-bottom: 16px;
}

/* ------------------------------------
   PRO TIP CALLOUT BOX
------------------------------------ */
.as-pro-tip {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background-color: var(--color-hero-badge-bg); /* #edf4ff */
    border-radius: 16px;
    padding: 16px 20px;
    margin: 24px 0 10px;
    border: 1px solid var(--color-border-feature);
}

.as-pro-tip-icon {
    font-size: 18px;
    line-height: 1;
    margin-top: 2px;
}

.as-pro-tip-content strong {
    display: block;
    font-size: 13px;
    color: var(--color-text-darkest);
    margin-bottom: 2px;
}

.as-pro-tip-content p {
    font-size: 13px;
    color: var(--color-text-body);
    margin: 0;
    line-height: 1.5;
}

/* ------------------------------------
   LISTS & BULLET POINTS
------------------------------------ */
.as-list {
    list-style: none;
    padding: 0;
    margin: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.as-list li {
    font-size: 16px;
    color: var(--color-text-body);
    line-height: 1.6;
}

.as-list li strong {
    color: var(--color-text-darkest);
    font-weight: 700;
}

.as-list-sub {
    list-style: none;
    padding: 0;
    margin: 20px 0 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.as-list-sub li h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-darkest);
    margin-bottom: 4px;
}

.as-list-sub li p {
    font-size: 16px;
    color: var(--color-text-body);
    margin: 0;
    line-height: 1.5;
}

/* ------------------------------------
   ACTION BUTTON
------------------------------------ */
.as-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--color-white);
    color: var(--color-primary);
    border: 1.5px solid var(--color-hero-badge-bg);
    padding: 10px 22px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 8px var(--shadow-color-08);
    transition: all 0.25s ease;
}

.as-btn-outline:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px var(--shadow-primary-25);
}

/* ------------------------------------
   RESPONSIVE MEDIA QUERIES
------------------------------------ */
@media (max-width: 768px) {
    .as-section {
        padding: 40px 5% 60px;
    }

    .as-heading {
        font-size: 20px;
    }

    .as-block p {
        font-size: 13.5px;
    }
}
/* Residential service detail page css */

/* ==========================================================================
   PART 11 - WHY CHOOSE SECTION (SHARED)
   ========================================================================== */

/* whychoose part css */
/* ==========================================================================
   Why Choose Starhandyman Section
   ========================================================================== */

.wc-section {
    background-color: var(--color-body-bg); /* #f5f7fc */
    padding: 10px 5%;
}

.wc-container {
    max-width: 1140px;
    margin: 0 auto;
    text-align: center;
}

/* Header Subtitle */
.wc-header {
    margin-bottom: 32px;
}

.wc-subtitle {
    display: inline-block;
    color: var(--color-why-tag); /* #3667ff */
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* 3-Column Grid Layout */
.wc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Feature Cards */
.wc-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: 16px;
    padding: 24px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;
    box-shadow: 0 4px 16px var(--shadow-color-08);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.wc-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px var(--shadow-color-12);
    border-color: var(--color-hero-badge-bg);
}

/* Left Circle Icon Holder */
.wc-icon-wrapper {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 50%;
    background-color: var(--color-stars); /* #dfe9ff */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-black); /* #4969e9 */
    font-size: 20px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.wc-card:hover .wc-icon-wrapper {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* Content Text */
.wc-card-content h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-darkest); /* #111 */
    margin-bottom: 4px;
}

.wc-card-content p {
    font-size: 13px;
    color: var(--color-text-muted); /* #666 */
    line-height: 1.4;
    margin: 0;
}

/* ------------------------------------
   RESPONSIVE MEDIA QUERIES
------------------------------------ */
@media (max-width: 991px) {
    .wc-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 640px) {
    .wc-grid {
        grid-template-columns: 1fr;
    }

    .wc-card {
        padding: 20px 16px;
    }
}
/* whychoose part css */


/* ==========================================================================
   PART 12 - HANDYMAN SERVICE INDEX PAGE (SHARED BY OTHERS)
   ========================================================================== */

/* Handyman ServiceIndex page css common for others too */
/* ==========================================================================
   Fixed Handyman Services Hero & Overview Section
   ========================================================================== */

   .sub-card{
    text-decoration: none !important;
   }

.hs-section {
    background-color: var(--color-body-bg); /* #f5f7fc */
    padding: 90px 5% 40px;
    width: 100%;
    box-sizing: border-box;
}

.hs-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* ------------------------------------
   1. HERO BANNER CARD (FIXED TOP CUTTING)
------------------------------------ */
.hs-hero-card {
    position: relative;
    width: 100%;
    border-radius: 24px;
    overflow: hidden;
    margin-top: 10px; /* Safe distance from top header */
    margin-bottom: 24px;
    box-shadow: 0 12px 32px var(--shadow-color-12);
    display: flex;
    align-items: stretch;
    background-color: var(--color-primary);
    box-sizing: border-box;
}

.hs-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Dynamic Height Overlay Container */
.hs-hero-content {
    position: relative;
    z-index: 2;
    padding: 44px 40px;
    width: 100%;
    max-width: 620px;
    background: linear-gradient(
        90deg, 
        rgba(73, 105, 233, 0.96) 0%, 
        rgba(73, 105, 233, 0.88) 70%, 
        rgba(73, 105, 233, 0) 100%
    );
    color: var(--color-white);
    box-sizing: border-box;
}

.hs-hero-content h1 {
    font-size: 38px;
    font-weight: 800;
    margin: 0 0 10px 0;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-white);
}

.hs-hero-content p {
    font-size: 15px;
    color: var(--color-white-90);
    margin: 0 0 28px 0;
    line-height: 1.4;
}

/* 2x2 Feature Pills Grid */
.hs-hero-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 20px;
    max-width: 400px;
}

.hs-feature-pill {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hs-pill-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.hs-feature-pill span {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.2;
}

/* Decorative Pattern */
.hs-dots-pattern {
    position: absolute;
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
    width: 90px;
    height: 120px;
    background-image: radial-gradient(rgba(255, 255, 255, 0.35) 1.5px, transparent 1.5px);
    background-size: 12px 12px;
    z-index: 2;
    pointer-events: none;
}

/* ------------------------------------
   2. BREADCRUMBS & DIVIDER
------------------------------------ */
.hs-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.hs-breadcrumbs a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}

.hs-breadcrumbs i {
    font-size: 10px;
    color: var(--color-text-light);
}

.hs-breadcrumbs span {
    color: var(--color-text-darkest);
    font-weight: 700;
}

.hs-divider {
    border: none;
    border-top: 1px solid var(--color-border-light);
    margin: 0 0 32px 0;
}

/* ------------------------------------
   3. OVERVIEW SECTION
------------------------------------ */
.hs-overview-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.hs-overview-content {
    flex: 1;
    max-width: 560px;
}

.hs-overview-content h2 {
    font-size: 30px;
    font-weight: 800;
    color: var(--color-text-darkest);
    margin: 0 0 16px 0;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.hs-overview-content p {
    font-size: 14px;
    color: var(--color-text-body);
    line-height: 1.6;
    margin: 0 0 16px 0;
}

.hs-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(
        135deg, 
        var(--color-hero-btn-start), 
        var(--color-hero-btn-end)
    );
    color: var(--color-white);
    padding: 12px 28px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 8px;
    box-shadow: 0 6px 18px var(--shadow-hero-btn-35);
    transition: background 0.3s ease, transform 0.2s ease;
}

.hs-btn-primary:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
}

/* ------------------------------------
   4. EXACT STAGGERED OVERLAPPING CARDS (DESKTOP & MOBILE)
------------------------------------ */
.hs-media-wrapper {
    flex: 1;
    position: relative;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.hs-image-card {
    position: absolute;
    border-radius: 20px;
    overflow: hidden;
    background-color: var(--color-white);
    border: 4px solid var(--color-white);
    box-shadow: 0 12px 28px var(--shadow-color-12);
    transition: transform 0.3s ease;
}

.hs-image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Overlapping Proportions */
.hs-card-bottom {
    width: 60%;
    height: 68%;
    bottom: 0;
    left: 2%;
    z-index: 1;
}

.hs-card-top {
    width: 62%;
    height: 64%;
    top: 0;
    right: 2%;
    z-index: 2;
}

.hs-star-accent {
    position: absolute;
    color: #cbd5e1;
    font-size: 18px;
    z-index: 1;
}

.star-top { top: -8px; right: -8px; }
.star-bottom { bottom: -8px; left: -8px; }

/* ------------------------------------
   RESPONSIVE MEDIA QUERIES
------------------------------------ */
@media (max-width: 991px) {
    .hs-hero-content {
        max-width: 100%;
        padding: 32px 24px;
        background: rgba(73, 105, 233, 0.94);
    }

    .hs-dots-pattern {
        display: none;
    }

    .hs-overview-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
    }

    .hs-overview-content {
        max-width: 100%;
    }

    .hs-media-wrapper {
        max-width: 100%;
        width: 100%;
        aspect-ratio: 16 / 9;
        margin-top: 10px;
    }
}

@media (max-width: 576px) {
    .hs-section {
        padding: 65px 4% 30px;
    }

    .hs-hero-card {
        margin-top: 15px; /* Ensures clear separation from header on mobile */
    }

    .hs-hero-content h1 {
        font-size: 26px;
    }

    .hs-hero-content p {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .hs-hero-features {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .hs-overview-content h2 {
        font-size: 24px;
    }

    .hs-btn-primary {
        width: 100%;
        justify-content: center;
    }

    /* Maintains identical overlapping design on smaller phone screens */
    .hs-media-wrapper {
        aspect-ratio: 4 / 3;
    }

    .hs-card-bottom {
        width: 65%;
        height: 68%;
    }

    .hs-card-top {
        width: 68%;
        height: 64%;
    }
}

/* ==========================================================================
   Handyman List & Sidebar Section Styling
   ========================================================================== */

.hls-section {
    background-color: var(--color-body-bg); /* #f5f7fc */
    padding: 40px 5% 80px;
    width: 100%;
}

.hls-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

/* ------------------------------------
   LEFT COLUMN: 2-COLUMN CARDS GRID
------------------------------------ */
.hls-left-content {
    flex: 1;
}

.hls-services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Service Card Container */
.hls-service-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: 20px;
    padding: 24px 20px;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    box-shadow: 0 4px 18px var(--shadow-color-08);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.hls-service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px var(--shadow-color-12);
    border-color: var(--color-hero-badge-bg);
}

/* Circular Thumbnail Placeholder */
.hls-card-thumb {
    width: 72px;
    height: 72px;
    min-width: 72px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #eaeaea; /* Light gray circular base like screenshot */
    display: flex;
    align-items: center;
    justify-content: center;
}

.hls-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Card Body Content */
.hls-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hls-card-body h3 {
    font-size: 16px;
    font-weight: 700;
    color: #1a202c; /* Dark text title */
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.hls-card-body p {
    font-size: 12.5px;
    color: #64748b; /* Muted gray body text */
    line-height: 1.45;
    margin: 0 0 14px 0;
}

/* EXACT "BOOK NOW →" PILL BUTTON STYLING */
.hls-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: transparent;
    color: #4b6bff; /* Theme primary blue */
    border: 1.5px solid #dbeafe; /* Soft blue border */
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.hls-card-link i {
    font-size: 11px;
    transition: transform 0.2s ease;
}

/* Button Hover State */
.hls-card-link:hover {
    background-color: #4b6bff;
    color: #ffffff;
    border-color: #4b6bff;
    box-shadow: 0 4px 12px rgba(75, 107, 255, 0.25);
}

.hls-card-link:hover i {
    transform: translateX(3px);
}

/* ------------------------------------
   RIGHT COLUMN: SIDEBAR WIDGETS
------------------------------------ */
.hls-sidebar {
    width: 320px;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.hls-widget {
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 4px 16px var(--shadow-color-08);
}

.hls-widget-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-darkest);
    margin: 0 0 16px 0;
}

/* Why Choose Us List */
.hls-why-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hls-why-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.hls-why-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    background-color: var(--color-hero-badge-bg);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.hls-why-list strong {
    display: block;
    font-size: 13px;
    color: var(--color-text-darkest);
    margin-bottom: 2px;
}

.hls-why-list p {
    font-size: 12px;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.3;
}

/* Reviews Summary */
.hls-rating-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.hls-rating-score {
    font-size: 26px;
    font-weight: 800;
    color: var(--color-text-darkest);
}

.hls-rating-stars {
    color: var(--color-stars);
    font-size: 13px;
}

.hls-reviews-count {
    display: block;
    font-size: 12px;
    color: var(--color-text-muted);
    margin-bottom: 16px;
}

.hls-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-top: 1px solid var(--color-border-light);
    padding-top: 14px;
    margin-bottom: 14px;
}

.hls-review-item p {
    font-size: 12px;
    color: var(--color-text-body);
    margin: 6px 0 0 0;
    line-height: 1.4;
    font-style: italic;
}

.hls-reviewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hls-reviewer-header strong {
    font-size: 13px;
    color: var(--color-text-darkest);
}

.hls-google-icon {
    color: #4285f4;
    font-size: 14px;
}

.hls-review-stars {
    color: var(--color-stars);
    font-size: 10px;
    margin-top: 2px;
}

.hls-see-more-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

/* Blue Promo Banner */
.hls-widget-promo {
    background: linear-gradient(
        135deg, 
        var(--color-hero-btn-start), 
        var(--color-hero-btn-end)
    );
    color: var(--color-white);
    border: none;
}

.hls-widget-promo h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-white);
    margin: 0 0 8px 0;
}

.hls-widget-promo p {
    font-size: 13px;
    color: var(--color-white-90);
    margin: 0 0 18px 0;
    line-height: 1.4;
}

.hls-promo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-white);
    color: var(--color-primary);
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    width: 100%;
    box-shadow: 0 4px 12px var(--shadow-color-15);
    transition: transform 0.2s ease;
}

.hls-promo-btn:hover {
    transform: translateY(-2px);
}

/* Cities Grid */
.hls-cities-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 12px;
}

.hls-cities-grid span {
    font-size: 12px;
    color: var(--color-text-dark);
    display: flex;
    align-items: center;
    gap: 6px;
}

.hls-cities-grid span i {
    color: var(--color-primary);
    font-size: 11px;
}

/* ------------------------------------
   RESPONSIVE MEDIA QUERIES
------------------------------------ */
@media (max-width: 1024px) {
    .hls-container {
        flex-direction: column;
    }

    .hls-sidebar {
        width: 100%;
        min-width: 100%;
    }

    .hls-cities-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .hls-services-grid {
        grid-template-columns: 1fr;
    }

    .hls-cities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* ==========================================================================
   Frequently Asked Questions (FAQ) Accordion Section
   ========================================================================== */

.faq-section {
    background-color: var(--color-body-bg); /* #f5f7fc */
    padding: 0px 5%;
    width: 100%;
}

.faq-container {
    max-width: 1100px;
    margin: 0 auto;
    background-color: #f0f4ff; /* Light soft-blue rounded container background */
    border-radius: 28px;
    padding: 48px 40px;
    box-shadow: 0 10px 30px var(--shadow-color-08);
}

/* Header */
.faq-header {
    text-align: center;
    margin-bottom: 36px;
}

.faq-header h2 {
    font-size: 32px;
    font-weight: 800;
    color: var(--color-text-darkest); /* #111 */
    margin: 0 0 8px 0;
    letter-spacing: -0.02em;
}

.faq-header h2 span {
    color: var(--color-primary); /* #4969e9 */
}

.faq-header p {
    font-size: 14px;
    color: var(--color-text-muted);
    margin: 0;
}

/* Accordion Wrapper */
.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Accordion Pill Item */
.faq-item {
    background-color: var(--color-white);
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 2px 10px var(--shadow-color-08);
    transition: border-radius 0.3s ease, box-shadow 0.3s ease;
}

.faq-item.active {
    border-radius: 20px; /* Smoothly morphs from pill to rounded box when open */
    box-shadow: 0 8px 24px var(--shadow-color-12);
}

/* Toggle Button */
.faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: 18px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    text-align: left;
    outline: none;
}

.faq-question span {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-darkest);
    line-height: 1.3;
}

.faq-icon {
    font-size: 14px;
    color: var(--color-primary);
    transition: transform 0.3s ease;
}

/* Active State Rotation */
.faq-item.active .faq-icon {
    transform: rotate(45deg); /* Rotates '+' into '×' */
}

/* Collapsible Content Area */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    padding: 0 28px;
}

.faq-item.active .faq-answer {
    padding: 0 28px 20px;
}

.faq-answer p {
    font-size: 13.5px;
    color: var(--color-text-body);
    line-height: 1.6;
    margin: 0;
}

/* ------------------------------------
   RESPONSIVE MEDIA QUERIES
------------------------------------ */
@media (max-width: 768px) {
    .faq-container {
        padding: 32px 20px;
        border-radius: 20px;
    }

    .faq-header h2 {
        font-size: 24px;
    }

    .faq-question {
        padding: 14px 20px;
    }

    .faq-question span {
        font-size: 13.5px;
    }

    .faq-item.active .faq-answer {
        padding: 0 20px 16px;
    }
}
/* Handyman ServiceIndex page css common for others too */