:root {
    --primary-green: #1a73e8;
    --primary-green-dark: #1a73e8;
    --accent-gold: #f59e0b;
    --accent-gold-dark: #d97706;
    --dark-blue: #041738;
    --slate-gray: #475569;
    --light-gray: #f1f5f9;
    --background-light: #FFFFFF;
    --white: #ffffff;
    --border-color: #e2e8f0;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--slate-gray);
    background-color: var(--background-light);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- UTILITY & LAYOUT --- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.section {
    padding: 6rem 0;
}

h1, h2, h3, h4 {
    font-family: 'Sora', sans-serif;
    color: var(--dark-blue);
    font-weight: 700;
}

h1 { font-size: clamp(2.5rem, 5vw, 3.75rem); line-height: 1.1; }
h2 { font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.2; }
h3 { font-size: 1.75rem; }

.section-header {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 4rem auto;
}

.section-header .tagline {
    display: inline-block;
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    color: var(--primary-green);
    margin-bottom: 0.75rem;
}

.section-header p {
    font-size: 1.125rem;
    color: var(--slate-gray);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    text-decoration: none;
    padding: 0.875rem 1.75rem;
    border-radius: 8px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-primary {
    background-color: var(--primary-green);
    color: var(--white);
}
.btn-primary:hover {
    background-color: var(--primary-green-dark);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(6, 95, 70, 0.2);
}

.btn-secondary {
    background-color: var(--white);
    color: var(--primary-green);
    border-color: var(--border-color);
}
.btn-secondary:hover {
    border-color: var(--primary-green);
    transform: translateY(-3px);
}

.btn-accent {
    background-color: var(--accent-gold);
    color: var(--dark-blue);
}
.btn-accent:hover {
    background-color: var(--accent-gold-dark);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.2);
}

/* HEADER WRAPPER */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #041738;
    z-index: 1000;
    transition: box-shadow 0.3s ease;
}

/* FLEX CONTAINER */
.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
}

/* LEFT: HAMBURGER + LOGO */
.nav-left {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* CENTER: NAVIGATION MENU */
.nav-center {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
}

/* RIGHT: CALL BUTTON */
.nav-right {
    flex: 0 0 auto;
}

/* Hamburger (mobile only) */
.hamburger {
    display: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--white);
    transition: transform 0.3s ease, color 0.3s ease;
}
.hamburger:hover {
    transform: scale(1.1);
    color: var(--accent-gold);
}

/* LOGO */
.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    color: var(--white);
    transition: opacity 0.3s ease;
}
.logo:hover {
    opacity: 0.85;
}
.logo-icon {
    width: 80px;
    height: 80px;
    object-fit: contain;
}
.logo-text span {
    display: block;
    line-height: 1.1;
}

/* DESKTOP NAV MENU */
.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}
.nav-link {
    text-decoration: none;
    color: #e2e8f0;
    font-weight: 500;
    transition: color 0.3s ease;
}
.nav-link:hover {
    color: var(--white);
}

/* CALL BUTTON */
.call-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--primary-green);
    color: var(--white);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.call-btn:hover {
    background-color: var(--primary-green-dark);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(6, 95, 70, 0.2);
}

/* RESPONSIVE BEHAVIOR */
@media (max-width: 1400px) {
    .nav-center { display: none; }
    .hamburger { display: block; }
}

@media (min-width: 1025px) {
    .container { max-width: 95%; padding-left: 0; padding-right: 0; }
}

/* MOBILE NAV MENU */
.mobile-nav-menu {
    display: none;
    flex-direction: column;
    background-color: #041738;
}
.mobile-nav-menu.is-open { display: flex; }
.mobile-nav-link {
    padding: 1rem;
    color: var(--white);
    text-align: center;
    text-decoration: none;
    border-top: 1px solid rgba(255,255,255,0.1);
    transition: background-color 0.3s ease;
}
.mobile-nav-link:hover { background-color: var(--primary-green); }

/* RESPONSIVE BEHAVIOUR */
@media (max-width: 768px) {
    .nav-menu { display: none; }
    .hamburger { display: block; }
    .nav-left { gap: 0.5rem; }
    /* ADD THIS RULE: */
    .logo {
        margin-left: -0.75rem;
    }
}


/* --- FOOTER --- */
.footer {
    background-color: var(--dark-blue);
    color: #94a3b8;
    padding: 5rem 0 2rem 0;
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
}
.footer-about .logo { color: var(--white); margin-bottom: 1rem; }
.footer-about p { font-size: 0.95rem; margin-bottom: 1.5rem; max-width: 300px;}
.social-links a {
    color: #94a3b8;
    text-decoration: none;
    margin-right: 1.25rem;
    font-size: 1.25rem;
    transition: color 0.3s ease;
}
.social-links a:hover { color: var(--white); }
.footer h4 {
    color: var(--white);
    font-family: 'Sora', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 0.75rem; }
.footer-links a {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.3s ease;
}
.footer-links a:hover { color: var(--white); }
.footer-bottom {
    text-align: center;
    border-top: 1px solid #334155;
    padding-top: 2rem;
    font-size: 0.9rem;
}

.btn-gradient {
    background-image: linear-gradient(to right, #00a600, #04c404);
    border: none;
    color: var(--white);
    transition: all 0.3s ease;
}
.btn-gradient:hover {
    background-image: linear-gradient(to right, #00a000, #00c000);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 212, 0, 0.25);
}

.page-content {
    padding-top: 80px;
}

/* --- CONSOLIDATED SUBPAGE HERO STYLES --- */
.hero-about,
.hero-commercial,
.hero-service,
.hero-residential {
    position: relative;
    padding: 8rem 0;
    background-color: var(--dark-blue);
    color: var(--white);
    text-align: center;
}

.hero-about h1, .hero-about p,
.hero-commercial h1, .hero-commercial p,
.hero-service h1, .hero-service p,
.hero-residential h1, .hero-residential p {
    color: var(--white);
}

.hero-about p,
.hero-commercial p,
.hero-service p,
.hero-residential p {
    font-size: 1.25rem;
    max-width: 700px;
    margin: 1.5rem auto 2.5rem auto;
    color: #e2e8f0;
}

/* --- ABOUT PAGE SPECIFIC STYLES --- */

.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.image-placeholder {
    width: 100%;
    height: 450px;
    background-color: var(--slate-gray);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    text-align: center;
    padding: 1rem;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}
.value-card {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    text-align: center;
    transition: all 0.3s ease;
}
.value-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.07);
}
.value-icon {
    height: 50px;
    width: 50px;
    color: var(--primary-green);
    margin: 0 auto 1.5rem auto;
}
.value-card h3 { margin-bottom: 1rem; font-size: 1.4rem; }

/* --- CTA BANNER --- */
.cta-banner {
    background: var(--primary-green);
    color: var(--white);
    padding: 5rem 0;
    text-align: center;
}
.cta-banner h2 {
    color: var(--white);
    margin-bottom: 1.5rem;
}
.cta-banner p {
    color: rgba(255,255,255,0.9);
    max-width: 600px;
    margin: 0 auto 2.5rem auto;
    font-size: 1.1rem;
}

/* --- RESPONSIVE STYLES (About) --- */
@media (max-width: 992px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-about { grid-column: 1 / -1; }
    .content-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    .section { padding: 4rem 0; }
    .hero-about { padding: 6rem 0; }
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-about {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 768px) {
  .call-btn { padding: 0.6rem 0.6rem; font-size: 0.9rem; }
}

@media (max-width: 480px) {
     .container { padding: 0 1rem; }
}

@media (max-width: 400px) {
  .call-btn { padding: 0.6rem 0.4rem; font-size: 0.7rem; }
  .call-btn svg { width: 14px; height: 14px; }
}

/* --- COMMERCIAL PAGE SPECIFIC STYLES --- */
.highlight { color: var(--primary-green); }

.icon-list { list-style: none; padding: 0; }
.icon-list li {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    font-size: 1.1rem;
}
.icon-list-icon {
    color: var(--primary-green);
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.industries-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.industry-card {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    text-align: center;
    transition: all 0.3s ease;
}
.industry-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.07);
    border-color: var(--primary-green);
}
.industry-icon {
    height: 56px;
    width: 56px;
    color: var(--primary-green);
    margin: 0 auto 1.5rem auto;
}
.industry-card h3 { margin-bottom: 1rem; font-size: 1.5rem; }

/* --- RESPONSIVE STYLES (Commercial) --- */
@media (max-width: 992px) {
    .industries-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .hero-commercial { padding: 6rem 0; }
    .industries-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 480px) {
  .btn-primary {
    margin-bottom: 10px;
  }
}

/* --- SERVICE PAGE SPECIFIC STYLES (Termites, Rodents, etc.) --- */
.icon-list li {
    align-items: flex-start;
    font-size: 1.05rem;
}
.icon-list-icon {
    margin-top: 4px;
}

/* --- RESPONSIVE STYLES (Service Pages) --- */
@media (max-width: 992px) {
    .content-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .hero-service { padding: 6rem 0; }
}

/* --- RESIDENTIAL PAGE SPECIFIC STYLES --- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

a.service-card {
    text-decoration: none;
    color: inherit;
}

.service-card {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2.5rem;
    text-align: center;
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
    display: block;
}
.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.07);
    border-color: var(--primary-green);
}
.service-icon {
    height: 64px;
    width: 64px;
    color: var(--primary-green);
    margin: 0 auto 1.5rem auto;
}
.service-card h3 { margin-bottom: 1rem; }

/* --- RESPONSIVE STYLES (Residential) --- */
@media (max-width: 992px) {
    .services-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .hero-residential { padding: 6rem 0; }
    .services-grid { grid-template-columns: 1fr; }
}

/* --- INDEX (HOMEPAGE) SPECIFIC STYLES --- */
.hero {
    padding-top: 140px;
    padding-bottom: 80px;
    text-align: center;
    background-color: var(--background-light);
}
.hero .container {
    max-width: 900px;
}
.hero .tagline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--dark-blue);
    color: var(--white);
    border: 1px solid var(--dark-blue);
    padding: 0.5rem 1.25rem;
    border-radius: 50px;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}
.hero h1 { margin-bottom: 1.5rem; }
.hero .highlight { color: var(--primary-green); }
.hero .subtitle {
    font-size: 1.25rem;
    max-width: 700px;
    margin: 0 auto 2.5rem auto;
}
.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* --- FEATURES SECTION --- */
.features {
    padding: 4rem 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    text-align: center;
}
.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.feature-icon {
    height: 48px;
    width: 48px;
    background: var(--light-gray);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-green);
}
.feature-item h4 {
    font-size: 1.1rem;
    font-weight: 600;
}
.feature-item p { font-size: 0.95rem; }

/* --- LOGO STRIP SECTION --- */
.logo-strip-container {
    width: 100%;
    overflow: hidden;
    background-color: var(--background-light);
    padding: 2.5rem 0;
    white-space: nowrap;
    position: relative;
}

.logo-strip-container::before,
.logo-strip-container::after {
    content: '';
    position: absolute;
    top: 0;
    width: 150px;
    height: 100%;
    z-index: 2;
}

.logo-strip-container::before {
    left: 0;
    background: linear-gradient(to right, var(--background-light), transparent);
}

.logo-strip-container::after {
    right: 0;
    background: linear-gradient(to left, var(--background-light), transparent);
}
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.logo-strip-track {
  display: flex;
  gap: 4.5rem;
  will-change: transform;
}

@keyframes scroll-left-px {
  0% { transform: translateX(0); }
  100% { transform: translateX(var(--scroll-distance)); }
}

.logo-strip-track > * {
  flex: 0 0 auto; /* Prevent logos from shrinking */
}

.logo-item {
    width: 140px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.logo-item:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

.logo-item span {
    font-family: 'Sora', sans-serif;
    color: var(--slate-gray);
    font-weight: 600;
}

/* --- SERVICES SECTION (Homepage) --- */
/* The responsive rules for .services-grid were here,
    but they were duplicates of the rules in the
    "RESPONSIVE STYLES (Residential)" section.
    They have been removed to avoid duplication.
    The single definition in the Residential
    section now controls all .services-grid instances.
*/


/* --- PROCESS SECTION --- */
.process { background-color: var(--white); }
.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    position: relative;
}
.process-line {
    display: none;
}
.process-step {
    text-align: center;
}
.step-number {
    width: 60px;
    height: 60px;
    background-color: var(--light-gray);
    border: 2px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem auto;
    font-family: 'Sora', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-green);
    transition: all 0.3s ease;
}
.process-step:hover .step-number {
    background-color: var(--primary-green);
    color: var(--white);
    border-color: var(--primary-green);
    transform: scale(1.1);
}
.process-step h4 {
    margin-bottom: 0.5rem;
}

/* --- ESTIMATE/PRICER SECTION --- */
.estimate {
    background-color: var(--dark-blue);
    color: var(--white);
}
.estimate .section-header h2, .estimate .section-header p {
    color: var(--white);
}
.estimate-container {
    background-color: rgba(255,255,255, 0.05);
    border-radius: 20px;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    max-width: 900px;
    margin: 0 auto;
}
.treatment-options {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}
.treatment-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #e2e8f0;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 500;
    font-size: 1rem;
    transition: all 0.3s ease;
}
.treatment-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--primary-green);
}
.treatment-btn.active {
    background: var(--primary-green);
    color: var(--white);
    border-color: var(--primary-green);
    box-shadow: 0 0 15px rgba(6, 95, 70, 0.5);
}
.price-display {
    text-align: center;
}
.price-label {
    font-size: 1rem;
    color: #cbd5e1;
}
.price-amount {
    font-family: 'Sora', sans-serif;
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: 700;
    color: var(--white);
    line-height: 1;
    margin: 0.5rem 0 1.5rem 0;
}

/* --- TESTIMONIALS SECTION --- */
.testimonials { background-color: var(--white); }
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}
.testimonial-card {
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
}
.testimonial-text {
    font-style: italic;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem;
    border-top: 1px solid var(--border-color);
    padding-top: 1.5rem;
}
.author-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--primary-green);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-family: 'Sora';
}
.author-info h5 {
    font-size: 1.1rem;
    font-weight: 600;
}
.author-info p {
    font-size: 0.9rem;
    color: var(--slate-gray);
}

/* --- RESPONSIVE STYLES (Homepage) --- */
@media (max-width: 768px) {
    /* Reduced padding-bottom to lift the logo strip */
    .hero { padding-top: 120px; padding-bottom: 2rem; }
    
    /* Added this rule to reduce padding above/below the features section */
    .features {
        padding: 2rem 0;
    }

    .features-grid { grid-template-columns: 1fr 1fr; }
}
}
@media (max-width: 480px) {
     .features-grid { grid-template-columns: 1fr; }
     .estimate-container { padding: 2rem 1.5rem; }
     .treatment-btn { width: 100%; justify-content: center; }
}

/* --- ANIMATIONS & HELPERS --- */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInAnimation 0.8s ease-out forwards;
}

@keyframes fadeInAnimation {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- NEW GRADIENT STYLES --- */
.gradient-primary {
    background-image: linear-gradient(to right, #00a600, #04c404);
    border: none;
    color: var(--white);
}
.gradient-primary:hover {
    background-image: linear-gradient(to right, #00a000, #00c000);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 212, 0, 0.25);
}
.gradient-text {
    background: linear-gradient(to right, #01a800, #01a800);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

/* --- CONTACT FORM SECTION --- */
.contact {
    background-color: var(--white);
}

.contact-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 3rem;
    align-items: start;
}

.contact-form {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    margin-top: -28px;
}

.contact-form h3 {
    margin-bottom: 2rem;
    text-align: center;
}

.contact-info {
     /* padding-top: 1rem; */ /* This line was removed to fix the alignment */
}

/* --- START: New Styles for Contact Method Buttons --- */
.contact-method-options {
    display: flex;
    justify-content: flex-start; /* Changed from 'center' to 'flex-start' */
    gap: 0.75rem;
    flex-wrap: wrap; 
}

.contact-method-option input[type="radio"] {
    display: none; /* Hide the default radio button */
}

.contact-method-option label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    color: var(--slate-gray);
    transition: all 0.3s ease;
}

.contact-method-option label:hover {
    border-color: var(--primary-green);
    color: var(--primary-green);
}

.contact-method-option input[type="radio"]:checked + label {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
    color: var(--white);
    box-shadow: 0 4px 10px rgba(6, 95, 70, 0.2);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--dark-blue);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.875rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary-green);
    box-shadow: 0 0 0 3px rgba(6, 95, 70, 0.1);
}

/*
    This conflicting rule for .contact-info was removed:
    .contact-info {
         padding-top: 1rem;
    }
*/

.contact-info h3 {
    margin-bottom: 2rem;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.contact-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--light-gray);
    color: var(--primary-green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.contact-item h4 {
    margin-bottom: 0.25rem;
    font-size: 1.1rem;
}

.contact-item p {
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 992px) {
  .contact-content {
    grid-template-columns: 1fr;
    }
}

  .contact-method-option {
    flex: 1; /* Changed to force equal width for all buttons */
  }

/* ===== START: FIX FOR MOBILE CONTACT BUTTONS ===== */
@media (max-width: 480px) {
  .contact-method-options {
    flex-wrap: nowrap; /* Prevents the buttons from wrapping to the next line */
  }
  .contact-method-option {
    flex: 1; /* Changed to force equal width for all buttons */
  }
  .contact-method-option label {
    justify-content: center; /* Ensures the icon and text inside the button are centered */
    padding: 0.75rem 0.5rem; /* Reduces horizontal padding to save space */
  }
}
/* ===== END: FIX FOR MOBILE CONTACT BUTTONS ===== */

/* --- NEW: Confirmation Modal Styles --- */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 30px;
    border: 1px solid #888;
    width: 90%;
    max-width: 450px;
    border-radius: 16px;
    text-align: center;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.modal-content h2 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    color: var(--dark-blue);
}

.modal-content p {
    margin-bottom: 2rem;
    color: var(--slate-gray);
}

#lottie-animation {
    width: 150px;
    height: 150px;
    margin: -20px auto 0;
}

/* --- NEW TREATMENT DETAILS STYLES (Add to existing CSS) --- */
.treatment-details {
    display: none; /* Hidden by default, JS will show it */
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    text-align: left;
    width: 100%;
    max-width: 500px;
    margin: 0 auto 2.5rem auto;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.details-column h4 {
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--white);
    margin-bottom: 1rem;
}

.details-column ul {
    list-style: none;
    padding-left: 0;
}

.details-column li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 0.75rem;
    color: #cbd5e1;
    font-size: 0.95rem;
}

.details-column li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 18px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.details-column.includes li::before {
    /* Green checkmark */
    content: '✔'; /* Simple text check */
    color: #04c404; /* Using your site's gradient green */
    font-weight: bold;
    font-size: 1.1rem;
    top: -2px;
    left: 0;
}

.details-column.excludes li::before {
    /* Red X */
    content: '✖'; /* Simple text X */
    color: #f59e0b; /* Using your site's accent gold */
    font-weight: bold;
    font-size: 1.1rem;
    top: -2px;
    left: 0;
}

/* --- Responsive fix for the new details section --- */
@media (max-width: 480px) {
    .treatment-details {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-bottom: 2rem;
    }
}

/* Darken the IGA logo specifically */
.logo-item img[src="iga.png"] {
    filter: brightness(0.9);
}

/* Darken the Cairo logo specifically */
.logo-item img[src="cairo.png"] {
    filter: brightness(4);
}


/* Add this to fix logo alignment */
.logo-item img {
    max-height: 100%;  /* Ensures no logo is taller than the 60px container */
    height: 100%;       /* Stretches shorter logos to fill the 60px height */
    width: auto;        /* Maintains the logo's aspect ratio */
    object-fit: contain; /* Ensures the image scales cleanly within the box */
}


/* Use this to move the Cairo logo */
.logo-item img[src="cairo.png"] {
  position: relative;
  /* Change 0px: A negative value like -10px moves it left. */
  /* A positive value like 10px moves it right. */
  left: 0px;
}

/* Use this to move the IGA logo */
.logo-item img[src="iga.png"] {
  position: relative;
  left: -45px;
}

/* Use this to move the Dome logo */
.logo-item img[src="dome.png"] {
  position: relative;
  left: 0px;
}

/* Use this to move the cc logo */
.logo-item img[src="cashconverters.png"] {
  position: relative;
  left: -40px;
}

/* Use this to move the ph logo */
.logo-item img[src="pizzahut.png"] {
  position: relative;
  left: 0px;
}

.logo-item img[src="cairo.png"] {
  /* The logo's container is 60px tall. 
    Set this to a value less than 60px to make it smaller.
    Try 50px or 45px.
  */
  height: 50px;
  
  /* This keeps the logo from being stretched */
  width: auto;
}

.header .logo {
  position: relative;
  
  /* --- Change the 0px value below --- */
  
  /* A positive value like 10px moves it RIGHT. */
  /* A negative value like -10px moves it LEFT. */
  left: 5px;
}

.logo-text {
  /* Adjust the font size of "MasterGuard Pest Solutions"
    The default is inherited (likely 1rem, or 16px).
    Try 1.1rem to make it bigger or 0.9rem to make it smaller. 
  */
  font-size: 1rem;
  
  /* --- Move the text left or right --- */
  position: relative;
  
  /* A positive value like 5px moves it RIGHT. */
  /* A negative value like -5px moves it LEFT. */
  left: -10px;
}