/* --- Global Styles & Variables --- */
:root {
    /* Core Colors from Image/Webflow */
    --color-primary: #fdc431; /* Main Yellow */
    --color-secondary: #1a386a; /* Dark Blue */
    --color-neutral-800: #161c24; /* Near Black */
    --color-neutral-600: #586272; /* Medium Gray Text */
    --color-neutral-300: #eceff3; /* Border Color Light */
    --color-neutral-200: #f7f9fc; /* Very Light Blue BG (Services) */
    --color-neutral-100: #ffffff; /* White */
    --color-light-blue-bg: #e9f4ff; /* Light Blue Hero Card */
    --color-star: #f59e0b; /* Amber/Gold */

    /* Typography */
    --font-family: 'Poppins', sans-serif; /* Closest free alternative to THICCCBOI */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* Sizing & Spacing (Based on visual inspection & common web practice) */
    --container-width: 1210px;
    --padding-container: 24px;
    --section-padding-vertical: 100px; /* Default Webflow, adjustable */
    --gap-grid: 28px; /* Default grid gap */
    --radius-medium: 20px; /* Button border radius */
    --radius-large: 24px; /* Card border radius */

    /* Shadows */
    --shadow-soft: 0 2px 8px rgba(22, 28, 36, 0.08); /* Subtle shadow */
    --shadow-button: 0 4px 10px rgba(255, 206, 81, 0.15); /* Button shadow */
    --shadow-card: 0 8px 28px rgba(22, 28, 36, 0.10); /* Card Shadow */
}

/* --- Base & Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 100%; scroll-behavior: smooth; }
body {
    font-family: var(--font-family);
    color: var(--color-neutral-600);
    font-size: 18px; /* Match body base font */
    line-height: 1.667; /* Match line height */
    background-color: var(--color-neutral-100);
    font-weight: var(--font-weight-medium); /* Body medium weight */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; vertical-align: middle; }
a { text-decoration: none; color: var(--color-secondary); transition: color 0.2s ease; }
a:hover { color: var(--color-primary); }
ul { list-style: none; }
strong, b { font-weight: var(--font-weight-bold); color: var(--color-neutral-800); }

/* --- Headings (Match Webflow base sizes) --- */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-neutral-800);
    font-weight: var(--font-weight-bold);
    margin-top: 0;
    line-height: 1.3;
}
h1 { font-size: 54px; margin-bottom: 16px; }
h2.heading-h2-size { font-size: 42px; margin-bottom: 16px; }
h3.heading-h3-size { font-size: 24px; margin-bottom: 8px; }
h4.heading-h4-size { font-size: 22px; margin-bottom: 10px; }
h5.heading-h5-size { font-size: 18px; margin-bottom: 10px; }
h6.heading-h6-size { font-size: 16px; margin-bottom: 10px; }

/* --- Layout --- */
.container { width: 100%; max-width: var(--container-width); margin-left: auto; margin-right: auto; padding-left: var(--padding-container); padding-right: var(--padding-container); }
.section { padding-top: var(--section-padding-vertical); padding-bottom: var(--section-padding-vertical); }
.wf-section { /* Mimic Webflow section for spacing */ }
.grid-2-columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-grid); }
.align-top { align-items: flex-start; }
.text-center { text-align: center; }

/* --- Header --- */
/* Header Section Styling */
.header-section {
    padding: 15px 0; /* Vertical padding */
    background-color: var(--color-neutral-100); /* Use a variable for background color */
    border-bottom: 1px solid var(--color-neutral-300); /* Use a variable for border color */
    position: sticky; /* Makes the header stick to the top */
    top: 0; /* Stick at the top */
    z-index: 100; /* Ensure header is above other content */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Optional: Add a subtle shadow */
}

/* Header Container for layout and centering */
.header-container {
    display: flex; /* Arrange logo and nav side-by-side */
    justify-content: space-between; /* Push logo to left, nav to right */
    align-items: center; /* Vertically center items */
    max-width: 1200px; /* Example: Set a maximum width for the content */
    margin: 0 auto; /* Center the container */
    padding: 0 15px; /* Add horizontal padding on smaller screens */
}

/* Logo Link Styling */
.header-logo-link {
    max-width: 180px; /* Smaller default max-width for mobile */
    flex-shrink: 0; /* Prevent logo from shrinking */
    transition: transform 0.2s ease; /* Smooth hover effect */
    display: block; /* Treat as a block for better max-width behavior */
}
.header-logo-link:hover {
    transform: scale(0.97); /* Slight shrink on hover */
}

/* Logo Image Styling */
.logo-image {
    max-height: 50px; /* Smaller default max-height for mobile logo */
    display: block; /* Prevents extra space below image */
    width: auto; /* Maintain aspect ratio */
    height: auto; /* Maintain aspect ratio */
}

/* Header Navigation Styling */
.header-nav {
    display: flex; /* Enable flexbox for nav items */
    align-items: center; /* Vertically center nav items */
    gap: 16px; /* Smaller default gap for mobile */
}

/* Standard Navigation Link Styling */
.nav-link {
    font-weight: var(--font-weight-medium); /* Use variable for font weight */
    color: var(--color-secondary); /* Use variable for text color */
    font-size: 1rem; /* Base font size */
    text-decoration: none; /* Remove default underline */
    transition: color 0.2s ease; /* Smooth color transition on hover */
}
.nav-link:hover {
    color: var(--color-secondary-dark); /* Optional: Slightly darker on hover */
    text-decoration: underline; /* Add underline on hover */
}

/* Phone Link Specific Styling */
.phone-link {
    font-weight: var(--font-weight-bold); /* Bold font weight */
    color: var(--color-neutral-800); /* Darker text color */
    display: inline-flex; /* Use inline-flex to align icon and text */
    align-items: center; /* Vertically center icon and text */
    text-decoration: none; /* Remove default underline */
     transition: color 0.2s ease; /* Smooth color transition on hover */
}
.phone-link:hover {
     color: var(--color-primary); /* Optional: Change color on hover */
     text-decoration: underline; /* Add underline on hover */
}


/* Phone Icon Styling */
.phone-link .icon {
    color: var(--color-secondary); /* Color of the icon */
    margin-right: 8px; /* Space between icon and text */
    font-size: 1.1em; /* Slightly larger than text */
}

/* --- Mobile Specific Adjustments (Default/Base Styles) --- */
/* Hide the "Get a Free Estimate" link on mobile by default */
.header-nav .nav-link:not(.phone-link) {
    display: none;
}

/* --- Desktop Media Query --- */
@media (min-width: 768px) { /* Adjust breakpoint as needed */
    /* Restore logo size on desktop */
    .header-logo-link {
        max-width: 300px;
    }
    .logo-image {
        max-height: 80px;
    }

    /* Restore the default flex display and gap for the navigation on desktop */
     .header-nav {
        display: flex;
        gap: 32px; /* Larger gap on desktop */
     }

    /* Show the "Get a Free Estimate" link on desktop */
    .header-nav .nav-link:not(.phone-link) {
        display: inline-block; /* Or flex, depending on desired layout */
    }

    /* Ensure phone link remains inline-flex on desktop */
    .header-nav .phone-link {
        display: inline-flex;
    }
}
/* --- Buttons --- */
.button { display: inline-block; text-align: center; cursor: pointer; border-radius: var(--radius-medium); font-weight: var(--font-weight-bold); text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.button-primary {
    background-color: var(--color-primary);
    color: var(--color-neutral-800);
    border: 1px solid var(--color-primary);
    padding: 18px 32px; /* Match original padding for default size */
    font-size: 18px;
    line-height: 1.111em;
    box-shadow: var(--shadow-button);
}
.button-primary:hover {
  background-color: #f5be0b; /* Slightly darker yellow */
  border-color: #f5be0b;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 206, 81, 0.25);
  color: #000000; /* Set text color to black or any other color you prefer */
}

.button .icon { margin-right: 8px; }

/* --- Hero Section --- */
.hero-section { padding: 80px 0; } /* Adjusted padding */
.hero-card {
    background-color: var(--color-light-blue-bg);
    border-radius: var(--radius-large);
    padding: 48px 5%; /* Use percentage for responsive padding */
    max-width: 1280px; /* Control width */
    margin: 0 auto;
    text-align: center;
    box-shadow: var(--shadow-soft);
}
.hero-headline { font-size: 54px; line-height: 1.2; } /* Specific size */
.hero-subheadline { font-size: 1.1rem; margin-top: 8px; margin-bottom: 24px; color: var(--color-neutral-600); }
.hero-button { font-size: 1.1rem; padding: 22px 42px; } /* Larger button */
.rating { margin: 24px 0; color: var(--color-star); font-size: 1.25rem; }
.rating i { margin: 0 2px; }
.hero-features-grid {
    display: grid;
    grid-template-columns: repeat(2, auto); /* Columns sized to content */
    gap: 16px 64px;
    justify-content: center; /* Center the whole grid block */
    margin-top: 32px;
    font-size: 18px;
    text-align: left; /* Ensures text inside items aligns left */
}

.hero-feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left; /* Ensures text stays left-aligned inside */
}


/* --- Top-Notch Pros Section --- */
.top-notch-section h2.heading-h2-size { text-align: left; margin-bottom: 32px;} /* Align H2 left */
.top-notch-content .pro-item { display: flex; gap: 20px; margin-bottom: 24px; align-items: flex-start; }
.top-notch-content .pro-icon { color: var(--color-secondary); font-size: 2.0rem; width: 25px; text-align: center; margin-top: 1px; flex-shrink: 0;}
.top-notch-content .pro-title { margin-bottom: 4px; color: var(--color-neutral-800);}
.top-notch-content .pro-paragraph { font-size: 1rem; /* Slightly larger text */ line-height: 1.6; color: var(--color-neutral-600); margin-bottom: 0;}
.top-notch-content .button-primary { margin-top: 32px; }
.top-notch-image-wrapper { align-self: center; /* Ensure vertical centering */}
.top-notch-image { border-radius: var(--radius-large); box-shadow: var(--shadow-card); }
@media (max-width: 768px) {
  .top-notch-image-wrapper {
    display: none;
  }
}


/* --- Services Section --- */
.bg-light-blue { background-color: var(--color-neutral-200); /* Light Blue BG */}
.services-intro, .services-outro { max-width: 880px; margin-left: auto; margin-right: auto; margin-bottom: 40px; font-size: 1rem; }
.services-outro { margin-top: 40px; }
.service-list-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Strictly 3 columns */
    gap: 16px var(--gap-grid); /* Row gap, Column gap */
    max-width: 1000px; /* Limit width slightly */
    margin: 0 auto;
}
.service-list { margin: 0; padding: 0; }
.service-list li { display: flex; align-items: center; margin-bottom: 12px; font-weight: var(--font-weight-medium); }
.service-icon {
  color: #008000;
  margin-right: 12px;
  font-size: 1.2em;
}

.services-section .button-primary { margin-top: 32px; } /* Margin above button */

/* --- Process Section --- */
.process-intro, .process-outro { max-width: 880px; margin-left: auto; margin-right: auto; margin-bottom: 40px; font-size: 1rem; }
.process-outro { margin-top: 40px; }
.process-steps-container { max-width: 880px; margin: 40px auto 0 auto; text-align: left; }
.process-step { margin-bottom: 24px; }
.step-title { margin-bottom: 8px; }
.step-description { font-size: 1rem; line-height: 1.7; margin-bottom: 0; }
.process-section .button-primary { margin-top: 32px; }

/* --- Footer --- */
.footer-section { background-color: var(--color-secondary); color: rgba(255, 255, 255, 0.7); padding: 40px 0 24px 0; margin-top: 80px; border-top-left-radius: var(--radius-large); border-top-right-radius: var(--radius-large); }
.footer-content-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.footer-brand-name { color: var(--color-neutral-100); font-size: 1.4rem; font-weight: var(--font-weight-bold); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 24px; }
.footer-link { color: rgba(255, 255, 255, 0.8); font-size: 0.95rem; font-weight: var(--font-weight-medium); }
.footer-link:hover { color: var(--color-primary); text-decoration: none; }
.footer-disclaimer { font-size: 0.8rem; line-height: 1.6; text-align: center; max-width: 900px; margin: 0 auto; color: rgba(255, 255, 255, 0.6); }

/* --- Responsive Adjustments --- */
@media (max-width: 991px) { /* Tablet Landscape */
    .section { padding: 80px 0; }
    .grid-2-columns { gap: 40px; } /* Slightly larger gap if stacking */
    .top-notch-section .grid-2-columns { grid-template-columns: 1fr; gap: 40px; } /* Stack */
    .top-notch-content { order: 2; text-align: center; }
    .top-notch-image-wrapper { order: 1; max-width: 500px; margin: 0 auto; }
    .top-notch-section h2.heading-h2-size { text-align: center; }
    .pros-list { max-width: 550px; margin-left: auto; margin-right: auto; } /* Center list */
    .pro-item { text-align: left; } /* Keep text aligned */

    .service-list-columns { grid-template-columns: repeat(2, 1fr); max-width: 700px; } /* 2 columns */
}

@media (max-width: 767px) { /* Tablet Portrait */
    body { font-size: 16px; } /* Adjust base for smaller */
    .section { padding: 60px 0; }
    h1.hero-headline { font-size: 40px; }
    h2.heading-h2-size { font-size: 32px; }



    .hero-features-grid { grid-template-columns: 1fr; } /* Stack fully */
    .hero-card { padding: 40px 20px; }

    .service-list-columns { grid-template-columns: 1fr; } /* Stack fully */

    .footer-content-top { flex-direction: column; text-align: center; gap: 16px;}
    .footer-nav { justify-content: center; gap: 16px; }
}

@media (max-width: 479px) { /* Mobile */
    .section { padding: 40px 0; }
    h1.hero-headline { font-size: 32px; }
    h2.heading-h2-size { font-size: 28px; }

    .header-logo-link { max-width: 200px; } /* Smaller logo */

    .hero-card { padding: 30px 15px; }
    .hero-button { width: 100%; max-width: 300px; font-size: 1rem; padding: 18px 24px; }
    .rating { font-size: 1.1rem; }
    .hero-features-grid { font-size: 14px; }
    .feature-item .icon { font-size: 1em; }

    .top-notch-content .pro-icon { font-size: 1.4rem; }
    .top-notch-content .pro-title { font-size: 1.1rem; }
    .top-notch-content .pro-paragraph { font-size: 0.9rem; }
    .top-notch-content .button-primary { width: 100%; max-width: 300px; font-size: 1rem; padding: 18px 24px; }

    .services-intro, .services-outro, .process-intro, .process-outro { font-size: 0.95rem; }
    .service-list li { font-size: 0.9rem; }

    .footer-section { border-radius: 0; } /* Remove rounding on mobile */
    .footer-link, .footer-disclaimer { font-size: 0.8rem; }
}
/* Connect Bar Styles */
.connect-bar {
    position: fixed;
    bottom: 20px;
    right: 20px;
    left: auto; /* Ensure no unintentional left alignment */
    background-color: #F9B300;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    display: flex;
    justify-content: space-between; /* Even spacing between items */
    padding: 5px; /* Adjust overall padding as needed */
    gap: 0; /* Optional: You can tweak gap for item spacing */
}

/* Individual Buttons */
.connect-item {
    flex: 1; /* Allow equal spacing */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 25px; /* Increased left and right padding */
    text-decoration: none;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 20px;
    border-right: 1px solid #F9B300;
    transition: background-color 0.3s, color 0.3s;
}

/* Remove Border from Last Item */
.connect-item:last-child {
    border-right: none;
}

/* Hover Effect */
.connect-item:hover {
    background-color: #4D6D94;
    color: #fff;
}

/* Icons */
.icon {
    font-size: 22px;
    margin-bottom: 5px;
}

/* Fix Mobile Overflow */
@media (max-width: 768px) {
    .connect-bar {
        bottom: 10px;
        right: 0;
        left: 0;
        margin: 0 auto;
        width: 95%; /* Fix edge overflow */
        padding: 10px; /* Adjust overall mobile padding as needed */
    }

    .connect-item {
        flex-direction: row;
        gap: 10px; /* Adjust gap for mobile */
        font-size: 20px;
        padding: 5px 15px; /* Increased left and right padding for mobile */
    }

    .icon {
        font-size: 22px; /* Slightly adjust icon size on mobile if needed */
        margin-bottom: 0; /* Adjust icon margin on mobile */
    }
}