/*!
Theme Name: sol green energy
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: sol_green
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

sol_green is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');
/* font-family: "Archivo", sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap');
/* font-family: "IBM Plex Sans", sans-serif; */

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

body {
    font-family: "Archivo", sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: var(--text-color);
    background-color: var(--background-color);
    --webkit-font-smoothing: antialiased;
    --moz-osx-font-smoothing: grayscale;
}

:root {
    --primary-color: #3FA644;
    --secondary-color: #D1EBD1;
    --text-color: #112418;
    --text-color-light: #6b6b6b;
    --background-color: #F1F7F1;
    --white-color: #ffffff;
    --white-op-90: rgba(255, 255, 255, 0.9);
    --border-color: #11241833;

    /********* fw*************/

    --fw-thin: 100;
    --fw-extra-light: 200;
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semi-bold: 600;
    --fw-bold: 700;
    --fw-extra-bold: 800;
    --fw-black: 900;
}

.container {
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    padding: 0 30px;
}

a {
    text-decoration: none;

}

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    padding: 12px;
    border: 1px solid #11241833;
    border-radius: 30px;
    position: relative;
    cursor: pointer;
    color: var(--primary-color);
    background: transparent;
    z-index: 1;
    transition: all ease-in-out 0.4s;
    font-size: 14px;
    font-weight: var(--fw-semi-bold);
    line-height: 100%;
    font-family: "Archivo", sans-serif;
}

.btn:hover,
.btn:active,
.btn:focus {
    background-color: var(--primary-color);
    color: var(--white-color);
    border-color: var(--primary-color);
}

.green-btn {
    background-color: var(--primary-color);
    color: var(--white-color);
    border-color: var(--primary-color);
}


.green-btn:hover,
.green-btn:active,
.green-btn:focus {
    background-color: transparent;
    color: var(--primary-color);
    border-color: #11241833;
}


.black_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #3FA644;
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    padding: 20px;
    border-radius: 50px;
    transition: all ease-in-out 0.4s;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.black_btn::after {
    content: '';
    position: absolute;
    width: 130%;
    height: 45vh;
    background: #000;
    z-index: -1;
    top: 100%;
    transition: all ease-in-out 0.4s;
    border-radius: 50%;
}

.black_btn:hover::after {
    top: -85%;
}


h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Archivo", sans-serif;
    font-weight: var(--fw-bold);
}

p {
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: var(--fw-regular);
    color: var(--text-color);
    font-size: 20px;
}

.fourteen_p p {
    font-size: 14px;
}

.twenty_four {
    font-size: 24px;
    font-weight: var(--fw-medium);
    color: var(--primary-color);
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 1000px;
}

.twenty_four strong {
    color: var(--text-color);
    font-weight: var(--fw-medium);
}

h1,
.title_h1 {
    font-size: 60px;
    line-height: 100%;
    color: var(--white-color);
    letter-spacing: 1px;
}

h2,
.title_h2 {
    font-size: 40px;
    line-height: 100%;
}

.big_h2 {
    font-size: 50px;
}

h3,
.title_h3 {
    font-size: 34px;
}

h4,
.title_h4 {
    font-size: 30px;
    line-height: 28px;
}

h5,
.title_h5 {
    font-size: 22px;
    font-weight: var(--fw-semi-bold);
}

.cmn_pad {
    padding: 60px 0;
}

.hero-section {
    width: 100%;

}

.hero-container {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    border-radius: 32px 32px 0;
    overflow: hidden;
    min-height: 620px;
}

.hero-bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Subtle darkening so the white text stays readable over the sky/photo */
.hero-container::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.15) 0%,
            rgba(0, 0, 0, 0.05) 35%,
            rgba(0, 0, 0, 0.35) 100%);
    z-index: 1;
}

/* ===== Monthly Savings Card ===== */
.hero-savings-card {
    position: absolute;
    top: 40px;
    right: 40px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    padding: 12px 24px 12px 12px;
}

.hero-savings-icon {
    width: 36px;
    height: 36px;
    background-color: #8ee06a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hero-savings-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.hero-savings-label {
    font-size: 13px;
    font-weight: 500;
    color: #ffffff;
}

.hero-savings-value {
    font-size: 17px;
    font-weight: 800;
    color: #ffffff;
}

/* ===== Text Content ===== */
.hero-content {
    position: absolute;
    left: 48px;
    bottom: 20px;
    z-index: 2;
    max-width: 720px;
}

.hero-heading {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.25;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

/* ===== CTA Button ===== */
.hero-btn {
    position: absolute;
    right: 40px;
    bottom: 40px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--primary-color);
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    padding: 18px 30px;
    border-radius: 50px;
    transition: background-color 0.25s ease, transform 0.25s ease;
    white-space: nowrap;
}

.hero-btn:hover {
    background-color: #348a39;
    transform: translateY(-2px);
}


/************* easy step section *****************/

.hiw-header span {
    display: inline-block;
}

.hiw-header .title_h2 {
    margin-top: 16px;
}

.hiw-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.hiw-header {
    margin-bottom: 80px;
    text-align: center;
}

/* ===== Quote / CTA Section ===== */
.quote-section {
    position: relative;
    width: 100%;
    min-height: 280px;

    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Color wash over the background image, as per design (#D1EBD1) */
.quote-overlay {
    position: absolute;
    inset: 0;
    background-color: #D1EBD1;
    opacity: 0.88;
}

.quote-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 48px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

/* ===== Text Content ===== */
.quote-text {
    width: 75%;
}

.quote-label {
    font-size: 20px;
    font-weight: 500;
    color: #112418;
    margin-bottom: 14px;
    font-family: "Archivo", sans-serif;
}

.quote-heading {
    color: #3FA644;
    margin-bottom: 10px;
}

.quote-description p{
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-color);
    max-width: 770px;
}

/* ===== Button ===== */
.quote-action {
    flex-shrink: 0;
}

.btn-get-in-touch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #3FA644;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    padding: 16px 28px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.25s ease;
    white-space: nowrap;
}

.btn-get-in-touch svg {
    transition: transform 0.25s ease;
}

.btn-get-in-touch:hover {
    background-color: #348a39;
    transform: translateY(-2px);
}

.btn-get-in-touch:hover svg {
    transform: translate(2px, -2px);
}


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

/* ===== Header ===== */

.hiw-badge {
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    color: #3FA644;
    border: 1px solid #e0e0e0;
    border-radius: 50px;
    padding: 10px 22px;
    margin-bottom: 20px;
}

.hiw-badge strong {
    color: #1a1a1a;
    font-weight: 700;
}

.hiw-heading {
    font-size: 36px;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.3;
}

/* ===== Steps Row ===== */
.hiw-step {
    text-align: center;
    padding: 30px 50px;
    position: relative;
}

/* Dashed vertical divider between columns */
.hiw-step:not(:first-child)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 2px;
    background: repeating-linear-gradient(to bottom, var(--primary-color) 0 10px, transparent 10px 20px);
}

/* ===== Icon Circle ===== */
.hiw-icon-circle {
    width: 130px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: #3FA6441A;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.hiw-icon-circle svg {
    width: 50px;
    height: 50px;
}

/* ===== Step Text ===== */
.hiw-step-label {
    font-size: 14px;
    font-weight: 700;
    color: #3FA644;
    margin: 20px 0;
    font-family: "Archivo", sans-serif;
}

.hiw-step .title_h4 {
    margin-bottom: 20px;
}

.hiw-step-title {
    font-size: 24px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 14px;
}

.faq-section {
    max-width: 1080px;
    margin: 0 auto;
    text-align: center;
}

.faq-badge {
    display: inline-block;
    padding: 8px 22px;
    border: 1px solid #2fae5c;
    color: #2fae5c;
    font-size: 14px;
    font-weight: 600;
    border-radius: 30px;
    margin-bottom: 18px;
}

.faq-title {
    font-size: 32px;
    font-weight: 700;
    color: #1b2420;
    margin-bottom: 40px;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-item {
    border: 1px solid #ececec;
    border-radius: 14px;
    text-align: left;
    background: #ffffff;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
    cursor: pointer;
}

.faq-item.active {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    border-color: var(--primary-color);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 22px;
    font-weight: 600;
    color: #112418;
    padding: 30px 60px;
    transition: padding-bottom 0.25s ease-in-out;
}

.faq-item.active .faq-question {
    padding-bottom: 20px;
}

.faq_icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2fae5c;
    font-size: 20px;
    font-weight: 400;
    transition: transform 0.25s ease;
}

.faq-item.active .faq_icon {
    transform: rotate(180deg);
}

.faq-answer p {
    padding: 0 60px 30px;
    display: none;
}

.faq-item.active .faq-answer p {
    display: flex;
    flex-direction: column;
}

/* ===== About Section ===== */
.about-section {
    width: 100%;
}

.about-image img {
    border-radius: 30px;
}
 
.about-checklist {
    max-width: 75%;
}

.about-container {
    max-width: 1320px;
    margin: 0 auto;
}

/* ===== Header ===== */
.about-header {
    text-align: center;
    margin-bottom: 60px;
}

.about-badge {
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    color: #3FA644;
    border: 1px solid #e0e0e0;
    border-radius: 50px;
    padding: 10px 22px;
    margin-bottom: 20px;
}

.about-badge strong {
    color: #1a1a1a;
    font-weight: 700;
}

.about-heading {
    font-size: 36px;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.3;
}

/* ===== Content Row ===== */
.about-content {
    display: flex;
    gap: 48px;
    margin-bottom: 100px;
}

.about-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 80px;
}


/* ===== Highlights: years card + checklist ===== */
.about-highlights {
    display: flex;
    gap: 40px;
    justify-content: space-between;
}

.about-years-card {
    background-color: #D9EDDA;
    border-radius: 20px;
    padding: 20px 30px;
    position: absolute;
    left: -100px;
    bottom: 50px;
}

.about-checklist .title_h4 {
    line-height: unset;
    color: var(--primary-color);
    margin-bottom: 10px;
    line-height: 1.2;
}

/* .about-checklist {
    max-width: 351px;
} */

.about-years-number {
    font-size: 80px;
}


.about-checklist-title {
    font-size: 22px;
    font-weight: 800;
    color: #3FA644;
    line-height: 1.35;
    margin-bottom: 16px;
}

.about-checklist ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.about-checklist li {
    display: flex;
    font-size: 20px;
    line-height: 196%;
    color: var(--text-color);
    gap: 7px;
    font-family: "IBM Plex Sans", sans-serif;

}
 

.check-icon {
    color: #9aa79a;
    font-weight: 700;
}

/* ===== Image ===== */
.about-image {
    width: 38.841%;
    max-height: 500px;
    position: relative;
}

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

/* ===== Bottom Stats Row ===== */
.about-stats {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, 1fr);
}

.stat-card {
    background-color: #F1F7F1;
    border-radius: 20px;
    padding: 32px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.stat-number {
    font-size: 40px;
    font-weight: 800;
    color: #16241c;
    line-height: 1.1;
    margin-bottom: 12px;
}

.stat-label {
    font-size: 15px;
    font-weight: 500;
    color: #4b5a51;
}



/* ===== Section ===== */
.brands-section {
    width: 100%;
    background-color: #F1F7F1;
}

.brands-container {
    max-width: 1320px;
    margin: 0 auto;
}

/* ===== Header ===== */
.brands-header {
    text-align: center;
    margin-bottom: 56px;
}

.brands-badge {
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    border: 1px solid #cfe0cf;
    border-radius: 50px;
    padding: 10px 22px;
    margin-bottom: 20px;
    background-color: #F1F7F1;
}

.brands-badge strong {
    color: #3FA644;
    font-weight: 700;
}

.brands-heading {
    font-size: 34px;
    font-weight: 800;
    color: #16241c;
    line-height: 1.3;
}

/* ===== Brand Row (pill container) ===== */
.brand-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 32px;
    background-color: #F1F7F1;
    border: 1px solid #d6e6d6;
    border-radius: 100px;
    padding: 32px 40px;
    margin-bottom: 24px;
}

.brand-row-label {
    flex-shrink: 0;
    font-size: 22px;
    font-weight: 700;
    color: #16241c;
    min-width: 110px;
    z-index: 2;
}

/* ===== Swiper container ===== */
.brand-swiper {
    flex: 1;
    min-width: 0;
    /* required so the swiper can shrink inside the flex row */
    overflow: hidden;

    /* fade logos out at both edges, like a continuous swiper */
    mask-image: linear-gradient(to right,
            transparent 0,
            #000 80px,
            #000 calc(100% - 80px),
            transparent 100%);
    -webkit-mask-image: linear-gradient(to right,
            transparent 0,
            #000 80px,
            #000 calc(100% - 80px),
            transparent 100%);
    max-width: 710px;
    margin: 0 0 0 auto !important;
    min-height: 105px;
    display: flex !important;
    align-items: center;
}

.brand-swiper .swiper-wrapper {
    align-items: center;
}

/* Forces a constant-speed glide instead of Swiper's default ease-in/out,
   so autoplay reads as one continuous swiper motion rather than distinct steps. */
.brand-swiper .swiper-wrapper {
    transition-timing-function: linear !important;
}

.brand-swiper .swiper-slide {
    width: auto !important;
    /* let each logo size itself, Swiper handles spacing via spaceBetween */
    display: flex;
    align-items: center;
}

.brand-swiper .swiper-slide a {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== Logo image =====
   src is intentionally left blank ("") until real brand logo files are
   supplied. This box + alt text keeps a visible, correctly-sized slot
   so the layout doesn't collapse while the image is empty/broken. */
.brand-logo-img {
    height: 32px;
    width: 140px;
    object-fit: contain;
    display: block;

    /* visible placeholder styling for the blank state */
    border: 1px dashed #c3d6c3;
    border-radius: 8px;
    background-color: #ffffff;
    color: #9aa79a;
    font-size: 12px;
    text-align: center;
}


.services-section {
    width: 100%;
}

.services-container {
    max-width: 1400px;
    margin: 0 auto;
}

/* ===== Header ===== */
.services-header {
    display: flex;
    gap: 24px;
}

.services-header-text.hiw-header {
    margin-bottom: 40px;
    text-align: left;
}

.services-badge {
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    border: 1px solid #e0e0e0;
    border-radius: 50px;
    padding: 10px 22px;
    margin-bottom: 16px;
}

.services-badge strong {
    color: #3FA644;
    font-weight: 700;
}

.services-heading {
    font-size: 34px;
    font-weight: 800;
    color: #16241c;
}

.services-view-more {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #3FA644;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    padding: 14px 24px;
    border-radius: 50px;
    transition: background-color 0.25s ease, transform 0.25s ease;
    white-space: nowrap;
}

.services-view-more:hover {
    background-color: #348a39;
    transform: translateY(-2px);
}

/* ===== Cards Grid ===== */
.services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 24px;
    height: 660px;
}

/* Large card spans both rows on the left */
.service-card-large {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.service-card-small {
    grid-column: 2;
}

/* ===== Card Base ===== */
.service-card {
    position: relative;
    display: block;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    background-color: #e9eee9;
    /* visible placeholder color while img src is blank */
}

.service-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Gradient so white text stays readable over any photo, dark or light */
.service-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0) 40%,
            rgba(0, 0, 0, 0.65) 100%);
}

/* ===== Circular arrow badge ===== */
.service-card-arrow {
    position: absolute;
    right: 24px;
    bottom: 24px;
    z-index: 2;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #3FA64499;
    /* green at ~60% opacity, as specified */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.service-card:hover .service-card-arrow {
    background-color: #3FA644;
    transform: scale(1.08);
}

/* ===== Card text ===== */
.service-card-text {
    position: absolute;
    left: 28px;
    right: 90px;
    /* leaves room so text never runs under the arrow badge */
    bottom: 28px;
    z-index: 2;
}

.service-card-title {
    font-size: 26px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 8px;
}

.service-card-desc p {
    font-size: 15px;
    line-height: 1.5;
    color: #f0f0f0;
}


/* ===== Section ===== */
.vm-section {
    width: 100%;
}

.vm_main {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    align-items: start;
}

.vm_main>.vm-card-text:last-of-type {
    align-self: end;
}

.vm-desc p {
    line-height: 136%;
}

/* ===== Base Card ===== */
.vm-card {
    border-radius: 24px;
    padding: 32px;
}

/* ===== Left / Right text cards ===== */
.vm-card-text {
    background-color: #F1F7F1;
}

.vm-badge {
    display: inline-block;
    font-size: 24px;
    font-weight: 500;
    color: var(--text-color);
    border: 1px solid #d6e6d6;
    border-radius: 50px;
    padding: 20px;
    font-family: "Archivo", sans-serif;
}

.vm-card-text .title_h3 {
    padding: 14px 0;
}

.vm-badge strong {
    color: #3FA644;
    font-weight: 500;
}

.vm-title {
    font-size: 26px;
    font-weight: 800;
    color: #16241c;
    line-height: 1.3;
    margin-bottom: 18px;
}


/* ===== Middle image card ===== */
.vm-card-image {
    position: relative;
    overflow: hidden;
    min-height: 580px;
    padding: 0;
    background-color: #dfe9df;
    /* visible placeholder while img src is blank */
}

.vm-bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(6px);
    transform: scale(1.05);
    /* avoids blurred edges showing at the border */
}

/* Color wash over the blurred photo, as specified (#EDFFEEB2) */
.vm-image-overlay {
    position: absolute;
    inset: 0;
    background-color: #EDFFEEB2;
}

/* Logo centered on top of the blurred photo */
.vm-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 240px;
    height: 90px;
    object-fit: contain;
    z-index: 2;

    /* visible placeholder styling for the blank state */
    border: 1px dashed #b7cdb7;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.5);
}




/* ===== Banner ===== */
.contact-banner {
    position: relative;
    width: 100%;
    min-height: 210px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-banner-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background-color: #e7e7e7;
    object-position: 50% 70%;
    /* visible placeholder while img src is blank */
}

/* Color wash over the background photo, as specified */
.contact-banner-overlay {
    position: absolute;
    inset: 0;
    background-color: #F5F5F5;
    opacity: 0.85;
}

/* ===== Content ===== */
.contact-banner-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.contact-banner-label {
    font-size: 24px;
    font-weight: 500;
    color: #112418;
    margin-bottom: 16px;
}

.contact-banner-label .highlight {
    color: #3FA644;
}

.contact-banner-heading {
    font-size: 44px;
    font-weight: 800;
    color: #16241c;
}

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


/* --- z --- */
.contact_main {
    display: flex;
    max-width: 1240px;
    margin: 0 auto;
}

.contact-left-col,
.contact-right-col {
    flex: 1;

}

.contact-section-wrapper {
    background: #fff;
}

/* --- LEFT COLUMN STYLES --- */
.contact-left-col h2 {
    font-size: 38px;
    color: #112a1f;
    margin-bottom: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.contact-left-col .desc p {
    margin-bottom: 40px;
}

.contact-info-list {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
}

.contact-info-list li {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

/* Requested Left SVG Background Color */
.icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: #3FA6441A;
    border-radius: 50%;
    margin-right: 16px;
    flex-shrink: 0;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.icon-circle:hover {
    background-color: #3FA64433;
}

.contact-info-list .info-text {
    font-weight: 500;
    color: #112a1f;
    font-size: 20px;
    font-family: "IBM Plex Sans", sans-serif;
}

.contact-map p {
    max-width: 1240px;
    margin: 0 auto;
    border-radius: 30px;
    overflow: hidden;
}

.social-icons .icon-circle {
    margin: 0;
}

.social-follow p {

    margin-bottom: 15px;
    font-size: 20px;

}

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

/* --- RIGHT COLUMN / FORM STYLES --- */
.contact-right-col {
    border-left: 1px solid #eaeaea;
    padding-left: 40px;
    margin-left: 40PX;
}

.contact-right-col h2 {
    font-size: 34px;
    color: #112a1f;
    margin-bottom: 30px;
    font-weight: 700;
}

/* Contact Form 7 Flexbox Grid */
.cf7-custom-form .form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.cf7-custom-form .form-group {
    display: flex;
    flex-direction: column;
}

.cf7-custom-form .form-group.half {
    flex: 1;
    min-width: 220px;
}

.cf7-custom-form .form-group.full {
    flex: 100%;
}

.cf7-custom-form label {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-color);
    margin-bottom: 10px;
    display: inline-block;
}

/* Requested Right Form Field Background Color */
.cf7-custom-form input[type="text"],
.cf7-custom-form input[type="email"],
.cf7-custom-form input[type="tel"],
.cf7-custom-form textarea {
    width: 100%;
    background-color: #F1F7F1;
    border: 1px solid rgba(63, 166, 68, 0.15);
    border-radius: 25px;
    padding: 16px 20px;
    font-size: 16px;
    color: var(--primary-color);
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.3s ease;
}

.cf7-custom-form input:focus,
.cf7-custom-form textarea:focus {
    border-color: #3FA644;
}

.wpcf7-spinner {
    display: none;
}

.cf7-custom-form textarea {
    border-radius: 25px;
    min-height: 160px;
    resize: none;
}

.cf7-custom-form input::placeholder,
.cf7-custom-form textarea::placeholder {
    color: #9cb1a4;
}

/* Submit Button */


.cf7-custom-form .wpcf7-submit {
    background-color: #3FA644;
    color: #ffffff;
    border: none;
    border-radius: 30px;
    padding: 20px 50px 20px 20px;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
    letter-spacing: 0.5px;
}

.wpcf7-not-valid-tip {
    color: #dc3232;
    font-size: 16px;
    font-weight: normal;
    display: block;
    position: absolute;
}

.wpcf7-submit {
    padding-right: 60px;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none'%3E%3Cpath d='M21.25 8.75L8.75 21.25' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 8.75H21.25V20' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 25px;
}

.cf7-custom-form .wpcf7-submit:hover {
    background-color: #328736;
}

.contact-map-section {
    background: #fff;
    padding-bottom: 40px;
}

.contact-map {
    border-radius: 24px;
    overflow: hidden;
}

.contact-map iframe {
    width: 100%;
    height: 420px;
    border: 0;
    display: block;
}




/* ===== Section ===== */
.pricing-section {
    width: 100%;
    background: #fff;
}

.pricing-container {
    max-width: 1400px;
    margin: 0 auto;
}

/* ===== Tabs ===== */
.pricing-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F1F7F1;
    border: 1px solid #dbe8db;
    border-radius: 100px;
    width: fit-content;
    margin: 0 auto 30px;
}

.pricing-tab {
    border: none;
    background: transparent;
    font-size: 18px;
    font-weight: 400;
    color: #1a1a1a;
    padding: 20px;
    border-radius: 100px;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
    white-space: nowrap;
    font-family: "Archivo", sans-serif;
    line-height: 28px;
}

.pricing-tab.is-active {
    background-color: #3FA644;
    color: #ffffff;
    font-weight: 600;
}

.pricing-tab:not(.is-active):hover {
    background-color: #e2f0e2;
}

/* ===== Notes above the cards ===== */
.pricing-notes {
    list-style: disc;
    margin: 0 auto 80px;
    color: #1a1a1a;
    line-height: 1.8;
    width: max-content;
}

.pricing-notes li {
    margin-left: 20px;
    font-size: 20px;
    font-weight: 400;
    line-height: 36px;
    font-family: "IBM Plex Sans", sans-serif;
    color: #112418;
}

/* ===== Panels ===== */
.pricing-panel {
    display: none;
}

.pricing-panel.is-active {
    display: block;
}

/* ===== Cards Grid ===== */
.pricing-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1240px;
    margin: 0 auto;
}

/* ===== Card ===== */
.pricing-card {
    background-color: #F1F7F1;
    border-radius: 24px;
    padding: 32px;
    display: flex;
    flex-direction: column;
}

.pricing-card-tag {
    display: inline-block;
    align-self: flex-start;
    background-color: #3FA64433;
    color: #112418;
    font-size: 20px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 50px;
    margin-bottom: 30px;
    font-family: "Archivo", sans-serif;
    line-height: 36px;
}

.pricing-card-label {
    font-size: 15px;
    font-weight: 500;
    color: #3FA644;
    margin-bottom: 10px;
    line-height: 36px;
}

.pricing-card-price {
    font-size: 50px;
    font-weight: 700;
    color: #16241c;
    line-height: 36px;
}

.pricing-card-divider {
    border: none;
    border-top: 1px solid #cfe3cf;
    margin-top: 30px;
    padding-top: 30px;
}

.pricing-card-list {
    list-style: none;
    margin-bottom: 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pricing-card-list li {
    position: relative;
    font-size: 16px;
    color: #112418;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 400;
    font-family: "IBM Plex Sans", sans-serif;
}



.pricing-card-list li::before {

    position: absolute;
    left: 0;
    top: 0;
    color: #3FA644;
    font-weight: 700;
    font-size: 14px;
}

/* ===== Button ===== */
/* .pricing-card-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #3FA644;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    padding: 18px;
    border-radius: 50px;
    transition: all ease-in-out 0.4s;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.pricing-card-btn::after {
    content: '';
    position: absolute;
    width: 130%;
    height: 45vh;
    background: #000;
    z-index: -1;
    top: 100%;
    transition: all ease-in-out 0.4s;
    border-radius: 50%;
}

.pricing-card-btn:hover::after {
    top: -85%;
} */


/********** footer styles **********/

footer {
    background: var(--text-color);
    padding: 40px 0;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    gap: 50px;
}

.footer-brand {
    width: 33.731%;
}

.footer_menu_links {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    max-width: 52.94%;
    gap: 50px;
    justify-content: space-between;
}

.footer-inner {
    max-width: 1260px;
    margin: 0 auto;
}

.footer-contact li,
.footer-contact li a {
    list-style-type: none;
    color: var(--white-color);
    font-size: 16px;
    font-weight: var(--fw-medium);
}

.footer-contact li {
    display: flex;
    gap: 16px;
    align-items: center;
}

.icon-badge {
    width: 44px;
    background: rgb(255 255 255 / 6%);
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1/1;
    border-radius: 50%;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.footer-bottom {
    border-top: 1px solid rgb(255 255 255 / 30%);
    padding-top: 50px;
    margin-top: 50px;
    text-align: center;
    color: rgb(255 255 255 / 70%);
}

.footer-title {
    pointer-events: none;
    cursor: default;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    font-family: "Archivo", sans-serif;
}

.footer-menu li {
    list-style-type: none;
}

.footer-menu li a {
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    font-family: "IBM Plex Sans", sans-serif;
    position: relative;
    transition: all ease-in-out 0.4s;
}

.footer-menu {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
}

.footer-menu li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    background: #fff;
    top: 100%;
    left: 0;
    transition: all ease-in-out 0.4s;
}

.footer-menu li a:hover::after {
    width: 100%;
}

.footer-contact li p {
    flex: 1;
    color: var(--white-color);
    font-size: 16px;
}

.brand-logo {
    max-width: 141px;
}

.testi-swiper .swiper-wrapper {
    transition-timing-function: linear !important;
}


/* ===== Add NEW ===== */
.banner_btn_main {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 10;
    background: #fff;
    padding: 20px 0 0 20px;
    border-radius: 24px 0 0 0;
}

.banner_btn_main::after,
.banner_btn_main::before {
    content: '';
    position: absolute;
    z-index: 0;
    width: 24px;
    height: 100%;
    background-color: transparent;
    border-bottom-right-radius: 24px;
    box-shadow: 0 24px 0 0 #fafafa;
}

.banner_btn_main::after {
    top: 0;
    left: -23px;
}

.banner_btn_main::before {
    right: 0;
    bottom: 90px;
}


/************ header *********************/

.header {
    background: rgb(255 255 255 / 90%);
    padding: 13.5px 0;
}

.header_main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.header-logos {
    width: max-content;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    width: max-content;
}

.header-menu {
    flex: 1;
}

.header-menu ul {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
    justify-content: center;
}

.header-menu li.current_page_item a,
.header-menu li a:hover {
    -webkit-text-stroke: 0.6px var(--primary-color);
    color: var(--primary-color);
}

.header-menu li a {
    font-size: 18px;
    font-weight: 400;
    color: var(--text-color);
    transition: -webkit-text-stroke 0.3s ease;
}

.header_right {
    display: flex;
    flex: 1;
    gap: 50px;
    align-items: center;
}


.mobileIcon {
    display: none;
}

.service-card{
    pointer-events: none;
    cursor: default;
}