:root {
        --color-primary: #2E5F49;
        --color-secondary: #2C513F;
        --color-text: #3D3D3D;
        --color-accent: #00A651;
        --color-white: #FFFFFF;
        --color-gray: #A8A8A8;
        --color-beige: #FBF7F1;
        --color-blue: #005BAA;
        --color-black: #151515;
    }

/* Button Variants */
.btn-solid {
    background-color: var(--color-accent);
    color: var(--color-white);
    border-radius: 7px;
    font-weight: 400;
    padding: 0.75rem 1.5rem;
    transition: background-color 0.3s;
}
.btn-solid:hover {
    background-color: var(--color-white);
    color: var(--color-primary);
}
.btn-outline {
    background-color: transparent;
    border: 2px solid var(--color-accent);
    color: var(--color-accent);
    border-radius: 7px;
    font-weight: 400;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s;
}
.btn-outline:hover {
    background-color: var(--color-accent);
    color: var(--color-white);
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--color-text);
    background-color: var(--color-beige);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Fredoka', sans-serif;
}

.text-primary { color: var(--color-primary); }
.bg-primary { background-color: var(--color-primary); }
.hover-bg-secondary:hover { background-color: var(--color-secondary); }

.phone svg {margin-top: 2px;}

.phone {gap: 0.5rem}

.text-accent { color: var(--color-accent); }
.bg-accent { background-color: var(--color-accent); }
.hover-bg-primary:hover { background-color: var(--color-primary); }

.hero-bg {
    background-image: linear-gradient(rgba(46, 95, 73, 0.7), rgba(46, 95, 73, 0.8)), url('https://coochie.com.au/wp-content/uploads/2024/12/CronullaaAfter-1024x824.webp');
    background: var(--color-primary);
    background-size: cover;
    background-position: center;
    min-height: 70vh;
}

/* Spinner CSS */
.spinner {
    border: 3px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top: 3px solid #fff;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#quote-form .btn-solid:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}