:root {
    --background: #F4F7F6;
    --foreground: #0A1118;
    --surface: #FFFFFF;
    --surface-foreground: #0A1118;
    --sidebar: #0A1118;
    --sidebar-foreground: #FFFFFF;
    --card: #FFFFFF;
    --card-foreground: #0A1118;
    --popup: #FFFFFF;
    --popup-foreground: #0A1118;
    --primary: #009B6A;
    --primary-foreground: #FFFFFF;
    --secondary: #1A2B3C;
    --secondary-foreground: #FFFFFF;
    --accent: #F5A623;
    --accent-foreground: #FFFFFF;
    --muted: #E2E8E6;
    --muted-foreground: #5C736E;
    --success: #009B6A;
    --success-foreground: #FFFFFF;
    --error: #D93D4A;
    --error-foreground: #FFFFFF;
    --warning: #F5A623;
    --warning-foreground: #FFFFFF;
    --info: #0EA5E9;
    --info-foreground: #FFFFFF;
    --info-hover: #0284C7;
    --info-active: #0369A1;
    --border: #D5DFDC;
    --font-family-base: 'Inter Tight';
    --font-family-display: 'Bricolage Grotesque';
    --font-family-monospace: 'JetBrains Mono';
    --font-family-cursive: cursive;
    --radius-sm: .25rem;
    --radius: .5rem;
    --radius-md: .75rem;
    --radius-lg: 1rem;
    --radius-full: 9999px;
    --shadow: 0 1px 3px rgba(10, 17, 24, .08), 0 1px 2px rgba(10, 17, 24, .04);
    --shadow-md: 0 4px 6px -1px rgba(10, 17, 24, .08), 0 2px 4px -1px rgba(10, 17, 24, .04);
    --shadow-lg: 0 10px 15px -3px rgba(10, 17, 24, .08), 0 4px 6px -2px rgba(10, 17, 24, .04);
    --shadow-focus: 0 0 0 2px var(--background), 0 0 0 4px var(--primary);
    --animation-duration-fast: .15s;
    --animation-duration-normal: .25s;
    --animation-duration-slow: .35s;
    --chart-color-1: #009B6A;
    --chart-color-2: #1A2B3C;
    --chart-color-3: #F5A623;
    --chart-color-4: #0EA5E9;
    --chart-color-5: #8BA3A0
}


body {
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-family-base);
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-display);
}
p {
    line-height: normal;
}
.fs-12 {
    font-size: 12px !important;
}
.fs-14 {
    font-size: 14px !important;
}
.fs-15 {
    font-size: 15px !important;
}
.fw-medium {
    font-weight: 500 !important;
}
.my-6 {
    margin-top: 4rem!important;
    margin-bottom: 4rem!important;
}
.py-6 {
    padding-top: 4rem!important;
    padding-bottom: 4rem!important;
}
.theme-text-clr {
    color: var(--primary) !important;
}
.gray-text {
    color: var(--muted-foreground) !important;
}
.gray-mix-text {
    color: color-mix(in srgb,var(--foreground) 75%,transparent) !important;
}
.btn-primary {
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
    border-radius: 8px;
}
.btn-primary:hover {
    background-color: color-mix(in oklch, var(--primary) 85%, var(--primary-foreground));
    border-color:  color-mix(in oklch, var(--primary) 85%, var(--primary-foreground));
}
.btn-outline-primary {
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 100px;
}
.btn-outline-primary:hover {
    color: var(--primary-foreground);
    background-color: var(--primary);
    border-color: var(--primary);
}
.badge-wrapper {
    background: var(--primary);
    color: var(--primary-foreground);
    padding: 2px 8px;
    border-radius: 20px;
    width: fit-content;
}
.coverage-item{
    font-size: 16px;
    border-radius: 20px;
    padding: .13rem .75rem;
}
.award-badge {
    background-color: var(--secondary);
    color: var(--secondary-foreground);
}
.news-listing-sec{
        margin: 50px 0;
}
.listing-box-outer {
    background-color: white;
    border-radius: 0;
    box-shadow: 0 1px 2px 0 hsl(220 15% 5% / .05);
    border: 1px solid #dcdfe5;
}
.listing-box-outer .image-wrapper img {
    width: 100%;
    height: 100%;
}
.listing-news-box .content-wrapper {
    padding: 12px 16px 12px 0;
}
.listing-news-box .listing-box-outer p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.listing-box-outer .date {
    font-size: .8rem;
    font-weight: 500;
    color: #14b89c;
}
.listing-box-outer p {
    font-size: .9375rem;
    color: #676f7e;
    line-height: 1.5;
    margin: 0;
}
.listing-box-outer a.btn {
    font-size: 14px;
    color: #2463eb;
}
.calculatorWidget {
    background: linear-gradient(135deg, #2463eb 0%, #14b89c 100%);
    box-shadow: 0 4px 6px -1px hsl(220 15% 5% / .1), 0 2px 4px -2px hsl(220 15% 5% / .1);
}
.calculatorWidget h6 {
    font-size: 1.125rem;
    font-weight: 600;
}
.calculatorWidget .calculatorInputs h6, .calculatorWidget .calculatorInputs p {
    font-size: 14px;
}

.calculatorWidget h6 {
    font-size: 1.125rem;
    font-weight: 600;
}
.calculatorWidget .calculatorInputs p {
    background: #fff3;
    padding: 4px 8px;
    border-radius: 4px;
    min-width: 50px;
}
.calculatorWidget .calculatorResult {
    background: #ffffff26;
    border-radius: 8px;
    padding: 12px;
}
.sidebarCard {
    background-color: white;
    border-radius: 0;
    box-shadow: 0 4px 6px -1px hsl(220 15% 5% / .1), 0 2px 4px -2px hsl(220 15% 5% / .1);
    border: 1px solid #dcdfe5;
}
.NewsWidget .NewsImage {
    width: 80px;
    height: 60px;
    overflow: hidden;
    border-radius: 4px;
    background-color: #edeff3;
}
.NewsWidget .NewsContent {
    width: 70%;
}
.NewsWidget .NewsContent h4 {
    font-size: .875rem;
    font-weight: 600;
    color: #2b303b;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.NewsWidget .NewsContent p {
    font-size: .75rem;
    color: #676f7e;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.NewsWidget .NewsContent a.btn {
    font-size: .75rem;
    color: #14b89c;
    text-decoration: none;
    font-weight: 500;
}
.calculatorFooter a {
    display: inline-block;
    background: #fff3;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .3);
    font-size: 14px;
    font-weight: 500;
    padding: 2px 12px;
    border-radius: 8px;
    text-decoration: none;
}
.breadcrumb-item a {
    font-size: 14px;
    color: var(--muted-foreground);
    text-decoration: none;
    outline: none;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    transition: color var(--animation-duration-fast) ease-in-out,background-color var(--animation-duration-fast) ease-in-out;
}
article .articleTitle h1 {
    font-size: 2.75rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: #2b303b;
}
article .metaItem svg {
    color: #14b89c;
}
article .metaItem span {
    font-size: 14px;
    color: #676f6e;
}
article .articleBody h3 {
    font-size: 22px;
}
.about-us-sec,.join-us-sec,.my_newsletter-sec {
    margin: 50px 0;
}
.my_newsletter-sec .inner-content {
    border: 1px solid #dcdfe5;
    border-radius: 16px;
    box-shadow: 0 10px 15px -3px hsl(220 15% 5% / .1), 0 4px 6px -4px hsl(220 15% 5% / .1);
}
.my_newsletter-sec .image-wrapper {
    background-color: #eff2f9;
    border-radius: 16px 0 0 16px;
    padding: 30px;
}
.my_newsletter-sec .image-wrapper img {
    width: 100%;
    max-width: 600px;
}
.my_newsletter-sec .content-wrapper {
    padding: 24px 48px 48px;
}
.my_newsletter-sec h1 {
    color: #2b303b;
}
.my_newsletter-sec .list-wrapper li {
    color: #676f7e;
}
.my_newsletter-sec .list-wrapper li {
    color: #676f7e;
}
.my_newsletter-sec{
    background:none !important;
}

.my_newsletter-sec img.sec-logo {
    width: 160px;
    height: auto;
    border: 1px solid #dcdfe5;
    border-radius: 8px;
    object-fit: contain;
    padding: 3px 12px;
}
.join-us-sec .content-wrapper {
    max-width: 880px;
    margin: 0 auto;
    box-shadow: 0 4px 6px -1px hsl(220 15% 5% / .1), 0 2px 4px -2px hsl(220 15% 5% / .1);
    padding: 30px;
    border-radius: 16px;
    border: 1px solid #14b89c;
    background: linear-gradient(135deg, #2463eb 0%, #14b89c 100%);
    color: #fff;
}
article .featuredImageContainer img, .articleBody img {
    width: 100%;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px hsl(220 15% 5% / .1), 0 2px 4px -2px hsl(220 15% 5% / .1);
}
article .articleBody h2 {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    border-bottom: 1px solid #dcdfe5;
    padding-bottom: 8px;
    margin-block: 48px 24px;
}
.breadcrumb-item:hover a {
    color: var(--primary);
    background-color: color-mix(in srgb, var(--primary) 5%, transparent);
}
.my_newsletter-sec form input {
    padding: 10px 12px 10px 42px;
}
.my_newsletter-sec form svg {
    position: absolute;
    top: 14px;
    left: 10px;
    color: #676f7e;
}
.breadcrumb-item+.breadcrumb-item {
    padding-left: 0;
}
.breadcrumb-item+.breadcrumb-item.active {
    color: var(--foreground);
    font-size: 14px;
    font-weight: 500;
    padding: 4px 6px;
}
.breadcrumb-item + .breadcrumb-item::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 24px;
    vertical-align: -2px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.breadcrumb-item+.breadcrumb-item.active::before {
    margin-right: 8px;
}
main {
    padding-top: 115px;
}
.calcaulate-hero p{
    font-size: clamp(16px, 3vw, 16px) !important;
    line-height: 1.5 !important;
}
.calcaulate-hero{    padding: 25px 0px;}
header {
    position: fixed;
    top: 0;
    z-index: 9999;
    width: 100%;
    background-color: var(--surface);
}
header .menu-bar {
    background-color: var(--secondary);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
header .menu-bar a {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
}
header .menu-bar a:hover {
    color: var(--primary);
}
header .header-primary-menu {
    width: 100%;
    gap: 16px;
}
header .header-primary-menu > li:first-child {
    margin-left: auto;
}
header .header-primary-menu > li:last-child {
    margin-left: auto;
}
header .header-primary-menu a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: var(--radius-full);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
}
header .header-primary-menu > li:last-child a {
    color: var(--primary-foreground);
    background: var(--primary);
    border-radius: var(--radius);
}
header .header-primary-menu a:hover {
    color: var(--primary-foreground);
    background: var(--primary);
}
header .mobile-primary-menu li,
header .mobile-category-menu li {
    margin-bottom: 16px;
}
header .mobile-primary-menu li:last-child,
header .mobile-category-menu li:last-child {
    margin-bottom: 0;
}
header .mobile-primary-menu li:last-child a {
    display: block;
    padding: 8px 12px;
    color: var(--primary-foreground);
    background: var(--primary);
    border-radius: var(--radius);
    text-align: center;
}
header .offcanvas button.btn-close {
    background-color: var(--muted);
    color: var(--muted-foreground);
    border-radius: var(--radius-full);
    font-size: 10px;
    width: 16px;
    height: 16px;
    aspect-ratio: 1;
}
header .offcanvas li a {
    font-weight: 500;
    color: var(--foreground);
    text-decoration: none;
}
.sec-head svg {
    color: var(--primary);
}


.hero-section {
    min-height: 600px;
    background-image: url('../images/hero-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.hero-section .hero-content {
    max-width: 700px;
}
.hero-section .hero-content h1 {
    color: var(--foreground);
    font-size: clamp(40px, 5vw, 56px);
    letter-spacing: -.03em;
}
.hero-section .hero-description {
    font-size: 20px;
    color: color-mix(in srgb,var(--foreground) 80%,transparent);
    max-width: 500px;
}
.hero-section .hero-search-title {
    color: var(--primary);
    font-size: clamp(20px,3vw,28px);
}
.hero-section .hero-search-box {
    width: 700px;
    max-width: 100%;
    min-height: 110px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 17px;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    padding: 16px;
    gap: 10px;
}
.hero-section .hero-form-group {
    width: 220px;
}
.hero-section .hero-form-group label {
    display: block;
    color: var(--foreground);
    font-weight: 700;
    margin: 0 0 10px;
}
.hero-section .hero-form-group label svg {
    width: 15px;
    height: 15px;
}
.hero-section .hero-select .form-select {
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    background-color: #ffffff;
    box-shadow: none;
    padding-left: 15px;
    cursor: pointer;
}
.hero-section .hero-select .form-select:focus {
    border-color: var(--primary);
}
.hero-section .hero-search-button {
    flex: 1;
    align-self: flex-end;
}
.hero-section .hero-search-button .btn {
    width: 100%;
    height: 65px;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    gap: 12px;
    transition: all 0.2s ease;
}
.hero-section .hero-compare span {
    color: var(--muted-foreground);
}
.stepBadge {
    width: 2rem;
    height: 2rem;
    aspect-ratio: 1;
    background-color: var(--primary);
    color: var(--primary-foreground);
}
.journey-sec .sec-head p {
    font-size: clamp(16px, 3vw, 18px);
}
.journey-sec .step-head h3 {
    font-size: clamp(18px, 3vw, 24px);
    color: var(--foreground);
    letter-spacing: .03em;
}
.listing-box {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: transform .2s ease;
}
.listing-box:hover {
    transform: translate(4px);
}
.listing-outer a {
    color: var(--foreground);
}
.listing-box .date,
.listing-box .btn {
    color: var(--primary);
}
.listing-box .btn:hover {
    text-decoration: underline;
}
.newsletter-sec .inner-content {
    max-width: 600px;
    margin-inline: auto;
}
.listing-box h3 {
    font-size: clamp(16px, 3vw, 20px);
}
.journey-sec {
    background-color: var(--surface);
}
.charger-comparison-item {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px;
    transition: background-color var(--animation-duration-normal);
}
.charger-comparison-item:hover {
    background: color-mix(in srgb,var(--background) 95%,var(--foreground));
}
.charger-comparison-item.highlighted-item {
    background-color: color-mix(in srgb,var(--primary) 3%,transparent);
    border-left: 4px solid var(--primary);
}
.charger-comparison-item.highlighted-item:hover {
    background-color: color-mix(in srgb,var(--primary) 5%,transparent);
}
.charger-comparison-item .badge-wrapper {
    position: absolute;
    top: -10px;
    left: 16px;
}
.charger-comparison-item .charger-image {
    flex: 0 0 135px;
    width: 112px;
    height: 112px;
    border-radius: var(--radius-sm);
}
.charger-comparison-item .charger-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.charger-comparison-item .home-charger-initials {
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), #00b3a4);
    border-radius: var(--radius-sm);
    font-family: var(--font-family-display);
    font-size: 22px;
    font-weight: 700;
}
.charger-comparison-item .charger-content h3 {
    margin: 0 0 6px;
    color: var(--foreground);
    font-size: 20px;
    font-weight: 700;
}
.charger-comparison-item .charger-content p {
    color: color-mix(in srgb,var(--foreground) 90%,transparent);
    font-size: 18px;
    margin: 0 0 10px;
}
.charger-comparison-item .charger-rating strong {
    color: var(--warning);
}
.charger-comparison-item .charger-rating > span {
    color: var(--muted-foreground);
}
.charger-comparison-item .charger-spec {
    margin-bottom: 13px;
}
.charger-comparison-item .charger-spec span {
    display: block;
    color: var(--muted-foreground);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: .02em;
    margin-bottom: 3px;
}
.charger-comparison-item .charger-spec strong {
    display: block;
    color: var(--foreground);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.15;
}
.charger-comparison-item .charger-spec strong.text-danger {
    color: var(--primary);
}
.charger-comparison-item .charger-action {
    text-align: right;
}
.charger-comparison-item .charger-price {
    margin-bottom: 10px;
}
.charger-comparison-item .charger-price strong {
    display: block;
    color: var(--foreground);
    font-size: 22px;
    font-weight: 700;
}
.charger-comparison-item .charger-price span {
    display: block;
    color: var(--muted-foreground);
    font-size: 14px;
    font-weight: 700;
}
.charger-comparison-item .charger-review-btn {
    padding: 12px;
    font-weight: 600;
}
.charger-comparison-item .charger-installer-link {
    display: block;
    margin-top: 10px;
    color: var(--muted-foreground);
    text-decoration: none;
}
.charger-comparison-item .charger-installer-link:hover {
    color: var(--foreground);
    text-decoration: underline;
}
.secondary-card .main-box {
    height: 100%;
    background-color: var(--card);
    border: 1px solid var(--border);
    transition: transform var(--animation-duration-fast) ease,box-shadow var(--animation-duration-fast) ease,border-color var(--animation-duration-fast) ease;
}
.secondary-card .main-box:hover {
    background-color: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: color-mix(in srgb,var(--primary) 30%,var(--border));
}
.secondary-card .main-box svg {
    color: var(--primary);
}
.secondary-card .main-box .btn {
    transition: .2s ease-in-out;
}
.secondary-card .main-box:hover .btn {
    transform: translate(2px);
}
.installer-avatars .inner-item,
.preview-cards .inner-item {
    width: 36px;
    height: 36px;
    aspect-ratio: 1;
    border-radius: 50%;
    color: var(--primary-foreground);
    border: 2px solid var(--card);
    margin-left: -8px;
}
.preview-cards .stars {
    color: var(--warning);
}
.featured-installer-sec {
    background-color: var(--surface);
}
.featured-installer-sec .installer-card {
    background: color-mix(in srgb,var(--accent) 3%,var(--card));
    border: 1px solid color-mix(in srgb,var(--accent) 30%,var(--border));
    border-radius: var(--radius-md);
    padding: 24px;
    box-shadow: var(--shadow);
    transition: transform var(--animation-duration-normal) ease,box-shadow var(--animation-duration-normal) ease,opacity .5s ease;
}
.featured-installer-sec .installer-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}
.featured-installer-sec .installer-logo {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border: 1px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--muted);
}
.featured-installer-sec .installer-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.featured-installer-sec .installer-name h3 {
    margin: 0;
    color: var(--foreground);
    font-size: 16px;
    font-weight: 700;
}
.featured-installer-sec .verified-badge {
    color: #00a476;
    font-size: 17px;
}
.featured-installer-sec .installer-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
    color: var(--foreground);
    font-size: 13px;
}
.featured-installer-sec .installer-rating {
    display: flex;
    align-items: center;
    gap: 4px;
}
.featured-installer-sec .installer-rating svg {
    color: var(--accent);
}
.featured-installer-sec .installer-rating span {
    color: #26343b;
}
.featured-installer-sec .meta-separator {
    width: 3px;
    height: 3px;
    background-color: var(--border);
}
.featured-installer-sec .sponsored-badge {
    flex-shrink: 0;
    background: color-mix(in srgb,var(--accent) 15%,transparent);
    color: color-mix(in srgb,var(--accent) 90%,black);
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 12px;
    line-height: 1;
}
.featured-installer-sec .installer-image {
    width: 100%;
    height: 160px;
    margin-top: 24px;
    border-radius: var(--radius-md);
    overflow: hidden;
}
.featured-installer-sec .installer-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.featured-installer-sec .installer-section {
    margin-top: 28px;
}
.featured-installer-sec .installer-section h4 {
    color: var(--muted-foreground);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 8px;
}
.featured-installer-sec .coverage-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #d3dfdc;
    border-radius: 20px;
    padding: 4px 12px;
    color: var(--foreground);
    background: var(--surface);
    font-size: 12px;
    line-height: 1.2;
}
.featured-installer-sec .coverage-item:hover {
    background-color: color-mix(in srgb,var(--foreground) 5%,transparent);
}
.featured-installer-sec .installer-services {
    margin-top: 21px;
}
.featured-installer-sec .installer-services p {
    color: var(--foreground);
    font-size: 14px;
    margin: 0;
}
.featured-installer-sec .installer-services p span {
    padding: 0 3px;
}
.featured-installer-sec .installer-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border);
    margin-top: 20px;
    padding-top: 16px;
}
.featured-installer-sec .whatsapp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #25d366;
    border: 1px solid #25d366;
    color: #ffffff;
    border-radius: 8px;
    padding: 8px 15px;
    font-size: 16px;
    font-weight: 600;
}
.featured-installer-sec .whatsapp-btn:hover {
    background: color-mix(in srgb,#25D366 85%,black);
    border-color: color-mix(in srgb,#25D366 85%,black);
    color: #ffffff;
}
.featured-installer-sec .call-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
    border-radius: 8px;
    padding: 8px 15px;
    font-size: 16px;
    font-weight: 600;
}
.featured-installer-sec .call-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
}
.featured-installer-sec .view-profile {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #07111a;
    padding: 6px;
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    background-color: transparent;
}
.featured-installer-sec .view-profile:hover {
    background-color: color-mix(in oklch, var(--primary) 15%, var(--background));
    color: color-mix(in oklch, var(--primary) 85%, var(--primary-foreground));
}
.main-product-details .featured-installer-sec .installer-logo {
    width: 96px;
    height: 96px;
    flex: 0 0 96px;
}
.main-product-details .featured-installer-sec .installer-logo-fallback {
    background-color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 75%, black);
    color: var(--primary-foreground);
    font-family: var(--font-family-display);
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
}
.main-product-details .featured-installer-sec .installer-meta {
    font-size: clamp(16px, 3vw, 20px);
}
.main-product-details .coverageChips .coverage-item {
    background-color: var(--secondary);
    color: var(--secondary-foreground);
    border: 1px solid;
}
.main-product-details .coverageChips .coverage-item:hover {
    background-color: color-mix(in srgb,var(--secondary) 80%,transparent);
}
.main-product-details .featured-installer-sec .installer-card {
    box-shadow: unset;
    transform: unset;
}
.popular-sec .inner-box {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    box-shadow: var(--shadow);
    transition: opacity .5s ease, transform .5s ease, box-shadow .3s ease;
}
.popular-sec .inner-box:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}
.popular-sec .read-time {
    color: var(--muted-foreground);
}
.popular-sec a.btn,
.news-sec a.btn {
    color: var(--foreground);
}
.popular-sec .sec-head a.btn:hover,
.news-sec .sec-head a.btn:hover {
    text-decoration: underline !important;
}
.popular-sec a.btn:hover,
.news-sec a.btn:hover {
    color: var(--primary);
}
.news-sec .sec-head > p {
    font-size: clamp(16px, 3vw, 20px);
}
.news-sec .news-box img.news-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-md);
}
.news-sec .news-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-sec .sidebar-widget {
    background-color: var(--card);
    border: 1px solid var(--border);
}
.news-sec .listing-outer .image-wrapper img {
    height: 140px;
    object-fit: cover;
}
.listing-outer .sidebar-widget .image-wrapper img {
    height: 80px;
    object-fit: cover;
}
.sidebar-widget .news-list-item:last-child {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
.newsletter-sec {
    background-color: var(--foreground);
    color: var(--background);
}
.newsletter-sec svg {
    width: 26px;
    height: 26px;
    color: var(--primary);
}
.newsletter-sec p {
    color: color-mix(in srgb,var(--background) 70%,transparent);
}
.newsletter-sec input {
    background: color-mix(in srgb,var(--foreground) 90%,white);
    border-color: color-mix(in srgb,var(--foreground) 80%,white);
}
.newsletter-sec form {
    max-width: 500px;
    margin-inline: auto;
}
.page-hero {
    background-color: var(--secondary);
    color: var(--secondary-foreground);
    margin-bottom: 3rem;
}
.page-hero h1 {
    font-size: clamp(40px, 3vw, 48px);
}
.page-hero p {
    font-size: clamp(16px, 3vw, 20px);
    color: color-mix(in srgb,var(--secondary-foreground) 80%,transparent);
}
.page-hero .right-side svg {
    width: 200px;
    height: 200px;
    color: var(--primary);
    opacity: .15;
}
.filter-sidebar {
    top: calc(4.5rem + 16px);
}
.compare-header a {
    color: var(--primary);
    text-decoration: none;
}
.compare-header a:hover {
    text-decoration: underline;
}
.compare-header  h1 {
    font-size: clamp(32px, 4vw, 48px);
}
.compare-search-area h2 {
    font-size: clamp(20px, 5vw, 27px);
}
.compare-header p {
    font-size: clamp(16px, 5vw, 22px);
    line-height: clamp(28px, 5vw, 32px);
}
.compare-search-area .search-wrapper svg {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: var(--muted-foreground);
    width: 16px;
    height: 16px;
}
.compare-search-area .search-wrapper input {
    padding-left: 50px;
}
.compare-search-area .search-wrapper input:is(:hover, :focus) {
    border-color: var(--primary);
    box-shadow: unset;
}
.compare-search-area .search-wrapper input::placeholder {
    font-size: 14px;
    color: var(--muted-foreground);
}
.compare-search-area button.pill-btn {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    color: var(--foreground);
}
.compare-search-area button.pill-btn:hover {
    background-color: color-mix(in srgb,var(--muted) 30%,transparent);
}
.compare-search-area button.pill-btn.active {
    background: var(--primary);
    color: var(--primary-foreground);
}
.compare-search-area .table-controls > span {
    font-size: 15px;
    color: color-mix(in srgb,var(--foreground) 65%,transparent);
    margin-right: 8px;
}
.table-wrapper {
    --label-width: 160px;
    --cell-width: 180px;
    width: 100%;
    margin-bottom: 10px;
    position: relative;
    border: 1px solid #d8dfdc;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}
.table-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2.5rem;
    background: linear-gradient(to right, transparent, #fff);
    pointer-events: none;
    z-index: 30;
}
.table-wrapper .top-scrollbar,
.table-wrapper .scroll-container,
.table-wrapper .bottom-scrollbar {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.table-wrapper .top-scrollbar {
    display: block;
    border-bottom: 1px solid #d8dfdc;
}
.table-wrapper .bottom-scrollbar {
    display: block;
    border-top: 1px solid #d8dfdc;
}
.table-wrapper .scroll-container {
    scrollbar-width: none;
}
.table-wrapper .scroll-container::-webkit-scrollbar {
    display: none;
}
.table-wrapper .top-scrollbar-inner,
.table-wrapper .bottom-scrollbar-inner {
    height: 1px;
    width: calc(var(--label-width) + (var(--cell-width) * var(--product-count, 7)));
}
.table-wrapper .table-grid {
    display: flex;
    flex-direction: column;
    width: max-content;
    min-width: calc(var(--label-width) + (var(--cell-width) * var(--product-count, 7)));
}
.table-wrapper .table-grid .row {
    display: flex;
    border-bottom: 1px solid #d8dfdc;
    background-color: #fff;
    transition: background-color 0.2s ease;
}
.table-wrapper .table-grid .row:last-child {
    border-bottom: none;
}
.table-wrapper .table-grid .row:nth-child(even) {
    background-color: #f8faf9;
}
.table-wrapper .table-grid .row:hover {
    background-color: #f5f8f7;
}
.table-wrapper .table-grid .sticky-col {
    position: sticky;
    left: 0;
    z-index: 20;
    width: var(--label-width);
    min-width: var(--label-width);
    flex: 0 0 var(--label-width);
    padding: 1rem;
    display: flex;
    align-items: center;
    background-color: inherit;
    border-right: 1px solid #d8dfdc;
    color: #17252d;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.table-wrapper .product-header .sticky-col {
    background-color: #fff;
}
.table-wrapper .table-grid .cell {
    width: var(--cell-width);
    min-width: var(--cell-width);
    flex: 0 0 var(--cell-width);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #111b22;
    font-size: 17px;
    line-height: 1.35;
}
.table-wrapper .product-header .cell {
    min-height: 150px;
    padding-top: 2rem;
    padding-bottom: 1.5rem;
}
.table-wrapper .pin-counter {
    font-size: 0.65rem;
    font-weight: 600;
    color: #657276;
    background-color: #fff;
    padding: 0.25rem 0.5rem;
    border: 1px solid #d8dfdc;
    border-radius: var(--radius-md);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    white-space: nowrap;
}
.table-wrapper .product-image {
    position: relative;
    width: 6rem;
    height: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.table-wrapper .charger-pin-button {
    position: absolute;
    right: -8px;
    bottom: -10px;
    z-index: 4;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--foreground);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 50%;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.table-wrapper .charger-pin-button:hover,
.table-wrapper .charger-pin-button.is-active {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
    border-color: var(--primary);
}
.table-wrapper .charger-pin-button .unpin-icon {
    display: none;
}
.table-wrapper .charger-pin-button.is-active .pin-icon {
    display: none;
}
.table-wrapper .charger-pin-button.is-active .unpin-icon {
    display: inline-flex;
}
.table-wrapper .table-grid .cell.is-pinned {
    position: sticky;
    left: calc(var(--label-width) + (var(--cell-width) * var(--pin-index)));
    z-index: 12;
    background: color-mix(in srgb, var(--primary) 4%, var(--surface));
    box-shadow: 1px 0 0 var(--border);
}
.table-wrapper .product-header .cell.is-pinned {
    z-index: 18;
}
.table-wrapper .pin-limit-shake {
    animation: pin-limit-shake .3s ease;
}
@keyframes pin-limit-shake {
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}
.table-wrapper .product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 4px;
}
.table-wrapper .logo-initials {
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    font-family: 'Bricolage Grotesque';
    background: linear-gradient(135deg, var(--primary), #00b3a4);
}
.table-wrapper .product-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 8px;
    border-radius: 999px;
    background-color: #009f73;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    z-index: 2;
}
.table-wrapper .product-badge.sponsored {
    background-color: transparent;
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    position: unset;
    transform: unset;
}
.table-wrapper .rating-container {
    display: flex;
    align-items: center;
    gap: 4px;
}
.table-wrapper .ratingStars {
    display: flex;
    align-items: center;
}
.table-wrapper .ratingStars svg {
    color: var(--warning);
}
.table-wrapper .product-cell h3 {
    margin: 0.5rem 0 0;
    color: #07111a;
    font-size: 0.875rem;
    line-height: 1.2;
    font-weight: 700;
    font-family: inherit;
}
.table-wrapper .table-grid .row:nth-child(2) .cell {
    min-height: 88px;
}
.table-wrapper .model-name .cell strong {
    font-family: var(--font-family-display);
    font-size: 20px;
    color: var(--foreground);
}
.table-wrapper .rating {
    display: flex;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center;
    gap: 0.2rem;
    color: #f2a300;
    font-size: 0.8rem;
    white-space: nowrap;
}
.table-wrapper .rating strong {
    color: #111b22;
    font-size: 0.8rem;
    font-weight: 600;
}
.table-wrapper .price {
    line-height: 1.1;
}
.table-wrapper .price strong {
    color: #07111a;
    font-size: 1rem;
    line-height: 1.1;
    font-weight: 800;
}
.table-wrapper .price small {
    display: block;
    margin-top: 0.25rem;
    color: #07111a;
    font-size: 0.55rem;
    text-transform: uppercase;
    font-weight: 700;
}
.table-wrapper .price-row .price {
    gap: 2px;
}
.table-wrapper .price-row .price strong {
    font-family: var(--font-family-display);
    font-size: 24px;
    line-height: 1.05;
}
.table-wrapper .price-row .price small {
    margin-top: 0;
    color: var(--foreground);
    font-size: 13px;
    line-height: 1;
}
.table-wrapper .sirim-row .cell {
    padding-block: 16px;
}
.table-wrapper .sirim-row .status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 62px;
    padding: 8px 12px;
}
.table-wrapper .warranty-row .cell {
    gap: 4px;
}
.table-wrapper .warranty-row .warranty-value {
    color: var(--foreground);
    font-size: 17px;
    line-height: 1.2;
}
.table-wrapper .status {
    display: inline-block;
    max-width: 100%;
    padding: 0.25rem 0.5rem;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
    word-break: break-word;
    width: 100%;
    border-radius: var(--radius-md);
}
.table-wrapper .status.success {
    background-color: rgba(0, 159, 115, 0.15);
    color: #00926b;
}
.table-wrapper .status.danger {
    background-color: rgba(220, 70, 70, 0.15);
    color: #d84b4b;
}
.table-wrapper .status.warning {
    background-color: rgba(242, 163, 0, 0.15);
    color: #b87800;
}
.table-wrapper .cell > strong {
    font-family: 'Bricolage Grotesque';
    color: #07111a;
    font-size: 24PX;
    font-weight: 600;
}
.table-wrapper .cell > small {
    display: block;
    margin-top: 0.2rem;
    color: #182a33;
    font-size: 0.6rem;
    line-height: 1.3;
}
.table-wrapper .table-grid .cell strong + small {
    color: var(--foreground);
    font-size: 14px;
    font-weight: 600;
}
.table-wrapper .table-actions .cell {
    min-height: 45px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.table-wrapper .details-btn {
    display: inline-block;
    padding: 3px 8px;
    border-radius: var(--radius);
    background-color: #009f73;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
}
.table-wrapper .details-btn:hover {
    background-color: #008b65;
    color: #fff;
}
.table-wrapper .localSupportGreen {
    color: var(--primary);
    font-weight: 600;
}
.table-wrapper .localSupportVerify {
    color: color-mix(in srgb,var(--warning) 80%,black);
    font-weight: 600;
}
.table-wrapper .specValueMain {
    font-weight: 500;
}
.table-wrapper .top-scrollbar::-webkit-scrollbar,
.table-wrapper .bottom-scrollbar::-webkit-scrollbar {
    height: 12px;
}
.table-wrapper .top-scrollbar::-webkit-scrollbar-track,
.table-wrapper .bottom-scrollbar::-webkit-scrollbar-track {
    background: #f2f4f3;
    border-radius: 999px;
}
.table-wrapper .top-scrollbar::-webkit-scrollbar-thumb,
.table-wrapper .bottom-scrollbar::-webkit-scrollbar-thumb {
    background: #969999;
    border-radius: 999px;
}
.table-wrapper .top-scrollbar::-webkit-scrollbar-thumb:hover,
.table-wrapper .bottom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #777b7b;
}
.table-wrapper .top-scrollbar,
.table-wrapper .bottom-scrollbar {
    scrollbar-width: auto;
    scrollbar-color: #969999 #f2f4f3;
}
.table-wrapper .table-note {
    padding: 0.5rem 0;
    color: #899596;
    font-size: 0.6rem;
    line-height: 1.4;
    text-align: left;
}
.table-note {
    font-size: 13px;
}
.fact-bar .fact-tile {
    background-color: var(--surface);
    padding: 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    display: grid;
    grid-template-columns: 20px 1fr;
    align-items: center;
    gap: 12px;
    height: auto;
}
.fact-bar.d-md-flex {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.review-star-input {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 0.2rem;
}

.review-star-input input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    display: none !important;
}

.review-star-input label {
    color: #cfd6d3;
    cursor: pointer;
    font-size: 2rem;
    line-height: 1;
    transition: color 0.15s ease;
}

.review-star-input label:hover,
.review-star-input label:hover ~ label,
.review-star-input input:checked ~ label,
.review-star-input input:focus-visible + label {
    color: #f6a019;
}

.installer-review-modal {
    width: calc(100% - 2rem);
    max-width: 560px;
    max-height: calc(100vh - 2rem);
    margin: auto;
    padding: 0;
    color: #142638;
    background: transparent;
    border: 0;
    border-radius: 16px;
    overflow: hidden;
    z-index: 100000;
}

.installer-review-modal::backdrop {
    background: rgba(0, 0, 0, 0.58);
}

.installer-review-modal .modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: calc(100vh - 2rem);
    color: #142638;
    background: #fff;
    border: 1px solid #d9e2df;
    border-radius: 16px;
    box-shadow: 0 18px 60px rgba(10, 32, 48, 0.25);
    overflow: hidden;
}

.installer-review-modal .modal-header,
.installer-review-modal .modal-footer {
    background: #fff;
    flex: 0 0 auto;
}

.installer-review-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8e6;
}

.installer-review-modal .modal-header .modal-title {
    margin: 0;
}

.installer-review-modal form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.installer-review-modal .modal-body {
    padding: 22px 24px;
    background: #fff;
    overflow-y: auto;
}

.installer-review-modal .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid #e2e8e6;
}

.installer-review-modal .form-control {
    width: 100%;
}

.installer-review-modal .modal-body > .mb-3,
.installer-review-modal .modal-body > fieldset.mb-3 {
    margin-bottom: 18px !important;
}

.installer-review-modal .modal-body > .mb-2 {
    margin-bottom: 10px !important;
}

.installer-review-modal .form-label {
    display: block;
    margin-bottom: 7px;
}

.installer-review-modal small.text-muted {
    display: block;
    margin-top: 6px;
}

#review-image-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
}

.review-image-preview-item {
    position: relative;
    aspect-ratio: 1 / 1;
}

.review-image-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px solid #d9e2df;
    border-radius: 10px;
}

.review-image-remove {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    padding: 0;
    color: #fff;
    font-size: 22px;
    line-height: 24px;
    background: #dc3545;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

@media (max-width: 575.98px) {
	.installer-review-modal {
        width: calc(100% - 1rem);
        max-height: calc(100vh - 1rem);
    }

    .installer-review-modal .modal-header,
    .installer-review-modal .modal-body,
    .installer-review-modal .modal-footer {
        padding-left: 16px;
        padding-right: 16px;
    }
}
.fact-bar .fact-tile.content-column {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.fact-bar .fact-txt {
    display: flex;
    flex-direction: column;
}
.fact-bar .factLabel {
    display: inline-block;
    font-size: 16px;
    letter-spacing: .05em;
    color: color-mix(in srgb, var(--muted-foreground), var(--foreground) 30%);
    font-weight: 600;
}
.fact-bar .factValue {
    display: inline-block;
    font-size: 20px;
    font-weight: 600;
    color: var(--foreground);
}
.fact-bar svg {
    color: var(--primary);
}
.fact-bar .fact-tile.content-column svg {
    margin-inline: auto;
}
.ready-block {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--warning);
    border-radius: var(--radius-lg);
    padding: 24px;
}
.ready-block h3 {
    font-family: var(--font-family-base);
    font-size: 22px;
}
.ready-block h4 {
    color: color-mix(in srgb, var(--muted-foreground), var(--foreground) 30%);
    font-size: 18px;
}
.ready-block .badge-wrapper {
    background-color: color-mix(in srgb, var(--warning) 15%, var(--surface));
    color: var(--warning);
    border: 1px solid color-mix(in srgb, var(--warning) 20%, var(--surface));
    padding: 4px12px;
}
.ready-block svg.lucide-check {
    color: var(--success);
    flex-shrink: 0;
}
.ready-block svg.lucide-clock{
    color: var(--warning);
    flex-shrink: 0;
}
.available-charger-wrapper {
    width: 100%;
    padding: 24px;
    background: color-mix(in srgb,var(--primary) 4%,var(--surface));
    border: 1px solid color-mix(in srgb,var(--primary) 15%,transparent);
    border-radius: var(--radius-lg);
}
.available-charger-wrapper .callout-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 22px;
    font-weight: 700;
}
.available-charger-wrapper .callout-icon svg {
    width: 20px;
    height: 20px;
    color: var(--primary);
    fill: var(--primary);
}
.available-charger-wrapper .products-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.available-charger-wrapper .product-item {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: background-color 0.2s ease,
                border-color 0.2s ease;
}
.available-charger-wrapper .product-name {
    color: var(--foreground);
    font-size: 19px;
    line-height: normal;
    font-weight: 700;
}
.available-charger-wrapper .product-price {
    color: var(--foreground);
    font-weight: 500;
    white-space: nowrap;
}
.available-charger-wrapper .product-sold-out {
    background: var(--muted);
    opacity: .6;
}
.sold-out-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    background-color: color-mix(in srgb, var(--error) 15%, var(--surface));
    color: var(--error);
    border: 1px solid color-mix(in srgb,var(--error) 20%,var(--surface));
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}
.sold-out-badge:hover {
    background-color: color-mix(in srgb,var(--error) 25%,var(--surface));
}
.available-charger-wrapper .callout-note {
    margin: 16px 0 0;
    color: var(--secondary);
    font-size: 19px;
}
.ev-logo-wrapper .ev-item {
    min-width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.ev-logo-wrapper .ev-item img {
    width: auto;
    height: 42px;
    object-fit: contain;
}
.ev-logo-wrapper h3 {
    font-size: 22px;
    color: var(--foreground);
    font-family: 'Inter Tight';
}
.whats-included-wrapper {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
}
.whats-included-wrapper h2 {
    color: var(--foreground);
}
.whats-included-wrapper .badge-item {
    font-size: 14px;
    padding: 4px 12px;
    border-radius: var(--radius-full);
}
.whats-included-wrapper .badge-item:nth-child(1), .whats-included-wrapper .badge-item:nth-child(4) {
    background-color: color-mix(in srgb, var(--foreground) 8%, transparent);
    color: var(--foreground);
    border-color: color-mix(in srgb, var(--foreground) 15%, transparent);
}
.whats-included-wrapper .badge-item:nth-child(2) {
    background-color: #2563eb1a;
    color: var(--foreground);
    border-color: #2563eb33;
}
.whats-included-wrapper .badge-item:nth-child(3) {
    background-color: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--foreground);
    border-color: color-mix(in srgb, var(--primary) 25%, transparent);
}
.whats-included-wrapper ul {
    column-count: 2;
}
.whats-included-wrapper ul svg {
    color: var(--primary);
    width: 20px;
    flex-shrink: 0;
}
.whats-included-wrapper h4 {
    font-family: 'Inter Tight';
    font-size: clamp(18px, 4vw, 20px);
}
.whats-included-wrapper ul li {
    font-size: clamp(16px, 4vw, 18px);
}
.whats-included-wrapper .pricing-card {
    background-color: color-mix(in srgb, var(--primary) 5%, var(--surface));
    border: 1px solid color-mix(in srgb,var(--primary) 20%,var(--surface));
    padding: 16px;
    border-radius: var(--radius-md);
}
.whats-included-wrapper .installation-price-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 28px 0 10px;
}
.whats-included-wrapper .pricing-card .pricing-label {
    color: color-mix(in srgb, var(--muted-foreground), var(--foreground) 30%);
    text-transform: uppercase;
    font-weight: 600;
}
.whats-included-wrapper .pricing-card .pricing-value {
    font-family: 'Bricolage Grotesque';
    font-size: clamp(24px, 4vw, 34px);
    font-weight: 700;
    line-height: 1.1;
    color: var(--foreground);
}
.whats-included-wrapper .package-cable-run {
    margin: 0 0 3px;
    color: var(--foreground);
    font-size: 16px;
    line-height: 1.45;
}
.whats-included-wrapper .package-description {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 14px;
    line-height: 1.45;
}
.whats-included-wrapper .possible-extras {
    margin-top: 24px;
}
.whats-included-wrapper .possible-extras h4 {
    margin: 0 0 10px;
    color: var(--foreground);
    font-family: var(--font-family-base);
    font-size: 18px;
    font-weight: 700;
}
.whats-included-wrapper .possible-extra-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 40px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}
.whats-included-wrapper .possible-extra-row:last-child {
    border-bottom: 0;
}
.whats-included-wrapper .possible-extra-name {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--foreground);
    font-size: 16px;
}
.whats-included-wrapper .possible-extra-icon {
    flex: 0 0 auto;
    color: var(--primary);
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
}
.whats-included-wrapper .possible-extra-price {
    flex: 0 0 auto;
    color: var(--foreground);
    font-size: 14px;
    white-space: nowrap;
}
.whats-included-wrapper .btn {
    background-color: #25d366;
    border-color: #25d366;
    font-weight: 600;
}
.whats-included-wrapper .btn:hover {
    background-color: color-mix(in srgb, #25D366 85%, black);
    border-color: color-mix(in srgb, #25D366 85%, black);
}
.about-ev-sec .badge-item {
    font-size: clamp(15px, 4vw, 18px);
    font-weight: 500;
    padding: 8px 16px;
    background-color: var(--secondary);
    color: var(--secondary-foreground);
    border: 1px solid;
    border-radius: var(--radius-full);
}
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.gallery-grid img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    transition: transform var(--animation-duration-normal) ease;
}
.review-sec .rating-overview {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 48px;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.review-sec .rating-large {
    width: 190px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.review-sec .rating-large-value {
    font-family: 'Bricolage Grotesque';
    font-size: 60px;
    line-height: 1;
    font-weight: 700;
    color: var(--foreground);
}
.review-sec .rating-large-stars {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 1rem;
    color: var(--warning);
}
.review-sec .rating-large-stars svg {
    width: 20px;
    height: 20px;
}
.review-sec .rating-large-count {
    margin-top: 0.75rem;
    font-size: clamp(16px, 3vw, 18px);
    font-weight: 500;
    color: color-mix(in srgb,var(--muted-foreground),var(--foreground) 30%);
}
.review-sec .rating-bars {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.review-sec .rating-bar-row {
    display: grid;
    grid-template-columns: 55px 1fr 24px;
    align-items: center;
    gap: 12px;
}
.review-sec .bar-label {
    font-size: clamp(16px, 3vw, 18px);
    color: var(--foreground);
    white-space: nowrap;
    font-weight: 500;
}
.review-sec .bar-track {
    width: 100%;
    height: 8px;
    background: var(--muted);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.review-sec .bar-fill {
    height: 100%;
    background: var(--warning);
    border-radius: var(--radius-full);
}
.review-sec .bar-count {
    font-size: clamp(16px, 3vw, 18px);
    color: color-mix(in srgb,var(--muted-foreground),var(--foreground) 30%);
    text-align: right;
}
.reviews-list-wrapper .review-card {
    background-color: var(--surface);
    border: 1px solid var(--border);
}
.reviews-list-wrapper .review-avatar {
    width: 40px;
    height: 40px;
    aspect-ratio: 1;
    background-color: var(--primary);
}
.reviews-list-wrapper .review-badge {
    background-color: color-mix(in srgb, var(--success) 15%, var(--surface));
    color: var(--success);
    border: 1px solid color-mix(in srgb, var(--success) 20%, var(--surface));
}
.reviews-list-wrapper .review-text {
    font-size: clamp(16px, 4vw, 20px);
    line-height: 1.6;
    color: var(--foreground);
}
.reviews-list-wrapper .review-image-wrapper img {
    width: 100%;
    max-width: 280px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}
.faq-section .accordion-item {
    border-radius: var(--radius);
    overflow: hidden;
}
.faq-section button.accordion-button:not(.collapsed) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.faq-section button.accordion-button {
    padding: 16px 24px;
    border-radius: var(--radius);
    background-color: var(--card);
    font-family: 'Inter Tight';
    font-size: 18px;
    font-weight: 600;
    color: var(--foreground);
    box-shadow: unset;
}
.faq-section .accordion-item:not(:last-child) {
    margin-bottom: 15px;
}
.faq-section  .accordion-button::after {
    background-size: 12px;
    background-position: center;
    filter: brightness(0);
}
.faq-section .accordion-body {
    padding-top: 0;
    font-size: 14px;
    color: var(--muted-foreground);
    line-height: 1.8;
}
.faq-section .accordion-body p {
    font-size: inherit;
    line-height: inherit;
}
.sidebar-col.sticky-lg-top {
    top: 110px;
}
.enquiryCard h3 {
    font-size: 26px;
    color: var(--foreground);
}
.enquiryCard label {
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
    margin-bottom: 6px;
}
.enquiryCard :is(input, textarea, select):is(:hover, :focus) {
    border-color: color-mix(in srgb,var(--primary) 80%,transparent);
    box-shadow: unset;
}
.enquiryCard :is(input, textarea)::placeholder {
    font-size: 12px;
    color: var(--muted-foreground);
    opacity: .7
}
.nearby-list a {
    color: var(--foreground);
    text-decoration: none;
}
.nearby-list a:hover {
    border-color: var(--primary) !important;
    box-shadow: var(--shadow-sm);
}
.nearby-list h3 {
    font-size: 20px;
}
.nearby-list .avatar {
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
}
.nearby-list .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.nearby-list .nearby-avatar-fallback {
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: 12px;
    font-weight: 700;
}
.nearby-list .nearby-meta {
    font-size: 15px;
    color: var(--muted-foreground);
}
.nearby-list .nearby-meta svg {
    color: var(--warning);
}
.trust-bottom  a {
    color: var(--primary);
    text-decoration: none;
}
.trust-bottom a:hover {
    text-decoration: underline;
}
.green-banner {
    background-color: color-mix(in srgb, #009b6a 10%, transparent);
    border-radius: var(--radius-md);
    padding: 16px 24px;
}
.green-banner a:not(:hover) {
    text-decoration: none;
}
.short-ans-box {
    border-left: 4px solid var(--primary);
}
.short-ans-box p {
    font-size: clamp(16px, 4vw, 18px);
    line-height: clamp(24px, 4vw, 26px);
}
.ques-ask-wrapper .sec-head p {
    font-size: clamp(16px, 4vw, 22px);
    line-height: clamp(24px, 4vw, 30px); 
}
.ques-ask-wrapper .ques-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background-color: color-mix(in srgb, var(--primary) 15%, transparent);
    color: var(--primary);
    font-weight: 700;
    border-radius: var(--radius-full);
    margin-bottom: 16px;
}
.ques-ask-wrapper .ques-box h3 {
    font-size: clamp(18px, 4vw, 21px);
    line-height: clamp(26px, 4vw, 29px);
}
.ques-ask-wrapper .ques-box  p {
    font-size: clamp(16px, 4vw, 20px);
    line-height: clamp(24px, 4vw, 28px);
}
.ques-ask-wrapper .ques-box .btn-outline-primary {
    font-size: clamp(16px, 4vw, 18px);
}
.ques-ask-wrapper .ques-box ul li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    font-size: clamp(16px, 4vw, 20px);
    line-height: clamp(24px, 4vw, 28px);
}
.ques-ask-wrapper .ques-box ul li svg {
    position: absolute;
    top: 2px;
    left: 0;
    color: var(--primary);
}
.ready-to-install-sec {
    margin-block: 64px;
}
.ready-to-install-sec .inner-wrapper {
    background-color: var(--secondary);
    border-radius: var(--radius-lg);
    padding: 50px 32px;
    color: var(--secondary-foreground);
    box-shadow: var(--shadow-lg);
}
.ready-to-install-sec p {
    font-size: clamp(16px, 4vw, 20px);
    line-height: clamp(24px, 4vw, 28px);
    max-width: 600px;
    margin: 0 auto 32px;
    color: color-mix(in srgb,var(--secondary-foreground) 85%,transparent);
}
.red-flag-sec {
    margin-bottom: 100px;
}
.red-flag-sec ul li {
    font-size: clamp(16px, 4vw, 20px);
    line-height: clamp(24px, 4vw, 28px);
}
.red-flag-sec ul li::marker {
    color: var(--primary);
}
.product-single-grid {
    background-color: var(--surface);
    border-bottom: 1px solid var(--border);
    padding-block: 32px 48px;
}
.product-single-grid .product-img img {
    width: 100%;
    max-width: 400px;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-md);
}
/* Keep the desktop two-column hero when a charger has no featured image. */
.product-single-grid .no-product-image .product-image-column {
    display: block;
}
.product-single-grid .no-product-image .product-img-empty {
    width: 100%;
    min-height: 360px;
}
.product-single-grid .charger-image-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 180px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--primary), #00b3a4);
    color: #fff;
    font-size: 52px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    box-shadow: 0 10px 30px rgba(0, 155, 106, .18);
}
@media (max-width: 767px) {
    .product-single-grid .no-product-image .product-img-empty {
        min-height: 220px;
    }
    .product-single-grid .charger-image-placeholder {
        width: 120px;
        height: 120px;
        font-size: 36px;
    }
}
.product-single-grid .brand-badge-wrapper .brand-badge {
    background-color: rgb(0, 179, 164);
    color: #fff;
    padding: 4px 12px;
    border-radius: var(--radius-sm);
}
.product-single-grid .brand-badge-wrapper .badge-wrapper {
    padding: 4px 12px;
    border-radius: var(--radius-sm);
}
.product-single-grid h1 {
    font-size: clamp(2.5rem,5vw,3.5rem);
    line-height: 1.1;
    color: var(--foreground);
    letter-spacing: -.02em;
}
.product-single-grid .rating-row .stars {
    font-size: clamp(16px, 4vw, 20px);
    color: var(--warning);
}
.product-single-grid .review-count {
    font-size: clamp(16px, 4vw, 20px);  
}
.product-single-grid .prod-desc {
    font-size: clamp(16px, 4vw, 20px);
    line-height: clamp(24px, 4vw, 28px);
}
.product-single-grid .pricing-box {
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 24px;
}
.product-single-grid .action-btns .btn-primary.bg-transparent:hover {
    text-decoration: underline;
    color: color-mix(in srgb, var(--primary) 80%, black) !important;
}
.verdict-sec .inner-content {
    background-color: color-mix(in srgb, var(--primary) 4%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--primary) 15%, var(--border));
    padding: 32px;
    border-radius: var(--radius-lg);
}
.verdict-sec li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
}
.verdict-sec li svg {
    position: absolute;
    top: 3px;
    left: 0;
}
.verdict-sec h2 {
    font-size: clamp(20px, 4vw, 26px);
}
.verdict-sec h3 {
    font-size: clamp(18px, 4vw, 20px);
}
.verdict-sec .badge-wrapper {
    border: 1px solid color-mix(in srgb,var(--primary) 30%,transparent);
    line-height: normal;
}
.content-table th {
    background-color: var(--secondary);
    color: var(--secondary-foreground);
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 12px 16px;
}
.tableWrapper {
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    overflow-x: auto;
}
table.content-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--surface);
    text-align: left;
}
table.content-table td {
    padding: 16px;
    border-bottom: 1px solid var(--border);
    color: var(--foreground);
    font-size: clamp(16px, 4vw, 18px);
}
.cost-list-outer {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;  
}
ul.cost-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    color: var(--foreground);
    font-size: clamp(16px, 4vw, 18px);
}
ul.cost-list li:last-child {
    border-bottom: 0;
    background-color: var(--background);
    flex-wrap: wrap;
    gap: 10px;
}
ul.cost-list .cost-item {
    color: color-mix(in srgb, var(--foreground) 96%, transparent);
}
ul.cost-list  .cost-range {
    font-weight: 600;
    text-align: right;
}
ul.cost-list .cost-total {
    background-color: color-mix(in srgb, var(--primary) 5%, transparent);
}
.smart-feature-list .smart-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: clamp(18px, 4vw, 20px);
    line-height: 1.5;
    background-color: var(--surface);
    padding: 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}
.smart-feature-list .smart-item svg {
    flex-shrink: 0;
}
.buyerVerdictList .inner-box:hover {
    transform: unset;
}
.buyerVerdictList .inner-box h3 {
    font-size: clamp(18px, 4vw, 22px);
}
.compare-alternative-sec .inner-box {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
    transition: all var(--animation-duration-fast) ease;
    height: 100%;
}
.compare-alternative-sec .inner-box:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
    transform: translateY(-2px);
}
.compare-alternative-sec h3 {
    font-size: clamp(18px, 4vw, 20px);
    color: var(--foreground);
}
.video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    margin-top: 1rem;
    border-radius: 12px;
    overflow: hidden;
}
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}
footer {
    background-color: var(--secondary);
    color: var(--secondary-foreground);
}
footer .footer-brand img {
    width: 300px;
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 5px;
}
footer .footer-brand p {
    color: color-mix(in srgb,var(--secondary-foreground) 70%,transparent);
    max-width: 300px;
}
footer .footer-links h5 {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
}
footer .footer-links ul li {
    margin-bottom: 11px;
}
footer .footer-links ul li a {
    color: color-mix(in srgb,var(--secondary-foreground) 70%,transparent);
    text-decoration: none;
    transition: all 0.2s ease;
}
footer .footer-links ul li a:hover {
    color: var(--secondary-foreground);
}
footer .footer-bottom {
    border-top: 1px solid color-mix(in srgb,var(--secondary-foreground) 10%,transparent);
}
footer .footer-bottom p {
    color: color-mix(in srgb,var(--secondary-foreground) 50%,transparent);
}

@media (max-width: 1280px){
main {
            padding-top: 114px;
}
}

@media (max-width: 1199px){
main {
          padding-top: 114px;
}
.charger-comparison-item .charger-content p {
    font-size: 14px;
}
.charger-comparison-item .charger-spec span {
    font-size: 12px;
}
.charger-comparison-item .charger-review-btn {
    font-size: 12px !important;
}
.charger-comparison-item .charger-spec strong {
    font-size: 13px;
}
.charger-comparison-item .charger-price strong {
    font-size: 18px;
}
}

@media (max-width: 991px){
main {
    padding-top: 110px;
}
.hero-section {
    min-height: 450px;
}
.journey-sec .charger-product {
    border-bottom: 1px solid var(--border);
    padding-bottom: 16px;
}
footer .footer-brand img,
footer .footer-brand p {
    margin-inline: auto;
}
}

@media (max-width: 768px) {
.table-wrapper {
    --label-width: 120px;
    --cell-width: 180px;
}
.table-wrapper .table-grid .sticky-col {
    padding: 0.75rem;
    font-size: 13px;
    line-height: normal;
}
.table-wrapper .table-grid .cell {
    padding: 0.75rem;
    font-size: 15px;
}
.table-wrapper .product-header .cell {
    padding-top: 1.75rem;
    padding-bottom: 1.25rem;
}
.table-wrapper .product-cell h3 {
    font-size: 0.8rem;
}
.table-wrapper .product-image {
    width: 5rem;
    height: 5rem;
}
.table-wrapper .rating {
    font-size: 0.7rem;
}
.table-wrapper .price strong {
    font-size: 0.9rem;
}
.table-wrapper .short-verdict {
    font-size: 0.8rem;
}
}

@media (max-width: 767px){
main {
    padding-top: 80px;
}
.py-6 {
    padding-top: 2rem!important;
    padding-bottom: 2rem!important;
}
.my-6 {
    margin-top: 2rem!important;
    margin-bottom: 2rem!important;
}
header .header-logo img {
    width: 230px;
}
.hero-section .hero-search-box {
    flex-wrap: wrap;
    width: 100%;
    gap: 20px;
}
.hero-section .hero-form-group {
    width: 100%;
}
.charger-comparison-item .charger-spec {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.charger-comparison-item .charger-action {
    text-align: left;
}
.featured-installer-sec .installer-card-footer,
.featured-installer-sec .installer-card-footer .installer-contact {
    flex-direction: column;
}
.featured-installer-sec .installer-card-footer .installer-contact {
    width: 100%;
}
.featured-installer-sec .view-profile {
    margin-top: 15px;
}
.preview-cards div > span {
    font-size: 14px;
}
.newsletter-sec form {
    flex-wrap: wrap;
}
.newsletter-sec button.btn {
    width: 100%;
}
.page-hero {
    padding-block: 20px;
}
.page-hero .right-side svg {
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    pointer-events: none;
}
.fact-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.fact-bar .factLabel {
    font-size: 14px;
}
.fact-bar .factValue {
    font-size: 18px;
}
.whats-included-wrapper ul {
    column-count: 1;
}
.whats-included-wrapper .installation-price-grid {
    grid-template-columns: 1fr;
}
.whats-included-wrapper .possible-extra-row {
    align-items: flex-start;
}
.whats-included-wrapper .possible-extra-name {
    font-size: 14px;
}
.whats-included-wrapper .possible-extra-price {
    font-size: 13px;
}
.gallery-grid {
    grid-template-columns: repeat(1, 1fr);
}
.faq-section button.accordion-button {
    padding: 14px 18px;
    font-size: 16px;
}
.red-flag-sec {
    margin-bottom: 60px;
}
.ready-to-install-sec {
    margin-block: 30px;
}
.ready-to-install-sec .inner-wrapper {
    padding: 30px;
}
.review-sec .rating-overview {
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}
.review-sec .rating-large,
.review-sec .rating-bars {
    width: 100%;
}
}

@media (min-width: 768px) and (max-width: 1199px){
.container {
    max-width: 1120px;
}
}

@media (min-width: 1025px) {
.fs-lg-18 {
    font-size: 18px !important;  
}
.fs-lg-20 {
    font-size: 20px !important;  
}
}
/* Dynamic installer directory */
.news-listing-sec .category-pagination { display: flex; width: 100%; align-items: center; justify-content: center; padding-top: 8px; }
.news-listing-sec .category-pagination .navigation.pagination { width: 100%; margin: 0; }
.news-listing-sec .category-pagination .nav-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.news-listing-sec .category-pagination .page-numbers {
    min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
    padding: 0 12px; color: var(--foreground); background: var(--surface); border: 1px solid var(--border);
    border-radius: 9px; font-size: 14px; font-weight: 700; line-height: 1; text-decoration: none;
    box-shadow: var(--shadow); transition: color var(--animation-duration-fast) ease, background-color var(--animation-duration-fast) ease, border-color var(--animation-duration-fast) ease, transform var(--animation-duration-fast) ease;
}
.news-listing-sec .category-pagination a.page-numbers:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, var(--surface)); border-color: var(--primary); transform: translateY(-1px); }
.news-listing-sec .category-pagination a.page-numbers:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.news-listing-sec .category-pagination .page-numbers.current { color: var(--primary-foreground); background: var(--primary); border-color: var(--primary); box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 25%, transparent); }
.news-listing-sec .category-pagination .page-numbers.prev,
.news-listing-sec .category-pagination .page-numbers.next { width: auto; padding-inline: 18px; }
.news-listing-sec .category-pagination .page-numbers.dots { min-width: 28px; padding: 0; background: transparent; border-color: transparent; box-shadow: none; }
@media (max-width: 575px) {
    .news-listing-sec .category-pagination .nav-links { gap: 6px; }
    .news-listing-sec .category-pagination .page-numbers { min-width: 38px; height: 38px; padding-inline: 10px; }
    .news-listing-sec .category-pagination .page-numbers.prev,
    .news-listing-sec .category-pagination .page-numbers.next { padding-inline: 12px; }
}
.installer-directory .installer-clear { color: var(--primary); font-size: 12px; font-weight: 600; }
.installer-directory .installer-clear:hover { text-decoration: underline; }
.installer-directory .installer-logo-fallback { background: var(--primary); color: #fff; font-weight: 700; }
.installer-directory #installer-results .row { transition: opacity .2s ease; }
.installer-directory #installer-results .row.is-loading { opacity: .45; pointer-events: none; }
.installer-directory .installer-loading { color: var(--primary); }
.installer-directory .installer-empty { color: var(--muted-foreground); }
.installer-directory .installer-empty h3 { color: var(--foreground); font-size: 20px; }
.installer-directory .result-bar select { width: auto; min-width: 165px; box-shadow: none; }
@media (max-width: 575px) {
    .installer-directory .result-bar { align-items: flex-start !important; flex-direction: column; }
    .installer-directory .installer-card-footer { gap: 10px; align-items: flex-start; flex-direction: column; }
}