/**
 * CS Widgets CSS
 * Styles for CS custom Elementor widgets
 */

/**
 * CS Home Page Links Widget
 */
.cs-homepage-links-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 70px 15px;
}

.cs-homepage-links-title {
    text-align: center; 
    font-size: 32px;
    margin-bottom: 30px;
    font-weight: 600;
}

.cs-homepage-links-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}

/* Link item */
.cs-homepage-links-container .cs-homepage-link-item {
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    padding: 0px!important;
    border-radius: 0;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.cs-homepage-link-item:hover {
    background-color: #e8e8e8;
}

.cs-latest-news-icon-arrow {
    margin-left: 10px;
}

/* Icon wrapper */
.cs-homepage-link-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e2001a;
    border-radius: 0;
    width: 70px;
    height: 62px;
    overflow: hidden;
    margin-right: 15px;
    flex-shrink: 0;
}

/* Icon */
.cs-homepage-link-icon {
    /* width: 23px!important; */
    /* height: 30px!important; */
    object-fit: contain;
    filter: brightness(0) invert(1); /* Make icon white */
}

/* Link title */
.cs-homepage-link-title {
    font-size: 18px;
    font-weight: bold;
    color: #000;
}

/**
 * CS Image Areas Widget
 */
.cs-image-areas-container {
    width: 100%;
    max-width: 1390px;
    margin: 0 auto;
    padding: 20px 15px;
}

.cs-image-areas-title {
    font-size: 32px;
    margin-bottom: 30px;
    font-weight: 600;
    color: #000;
    max-width: 500px;
}

.cs-image-areas-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 30px;
}

/* Area item */
.cs-image-area-item {
    position: relative;
    display: block;
    height: 250px;
    background-size: cover;
    background-position: center;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.cs-image-area-item:hover {
    transform: scale(1.02);
}

/* Overlay */
.cs-image-area-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgb(0 0 0 / 90%), transparent)!important;
    transition: opacity 0.3s ease;
    opacity: 0.78; /* 70/90 = 0.78 to get equivalent of 70% */
}

.cs-image-area-item:hover .cs-image-area-overlay {
    opacity: 1; /* 70/90 = 0.78 to get equivalent of 70% */
}

/* Content */
.cs-image-area-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    z-index: 1;
}

/* Title */
.cs-image-area-title {
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    display: flex;
}

/* Arrow */
.cs-image-area-arrow {
    display: inline-block;
    margin-left: 8px;
    width: 20px;
    vertical-align: middle;
}

.cs-image-area-arrow img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Responsive */
@media (max-width: 767px) {
    .cs-homepage-links-grid,
    .cs-image-areas-grid {
        grid-template-columns: 1fr;
    }
    
    .cs-homepage-links-title,
    .cs-image-areas-title {
        font-size: 28px;
    }
    
    .cs-image-area-item {
        height: 200px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .cs-homepage-links-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* CS Latest News Widget Styles */

.cs-latest-news-container {
    width: 100%;
    padding: 70px 15px;
}

.cs-latest-news-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.cs-latest-news-section-title {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
}

.cs-latest-news-see-all {
    display: flex;
    align-items: center;
    color: #E4002B;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
    font-size: 16px;
}

.cs-latest-news-see-all:hover {
    color: #b30015;
}

.cs-latest-news-arrow {
    margin-left: 5px;
}

.cs-latest-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 15px;
    max-width: 100%;
}

.cs-latest-news-item {
    display: flex;
    flex-direction: column;
    border-radius: 0;
    overflow: hidden;
    width: 100%;
    margin-bottom: 30px;
}

.cs-latest-news-image {
    position: relative;
    width: 100%;
    height: 295px;
    overflow: hidden;
    background-color: #e5e5e5;
}

.cs-latest-news-thumbnail {
    width: 100%;
    height: 295px!important;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
    max-width: 100%;
}

.cs-latest-news-content {
    display: flex;
    flex-direction: column;
    padding: 0px;
    flex-grow: 1;
}

.cs-latest-news-meta {
    font-size: 16px;
    color: #7B7B7B;
    margin-bottom: 25px;
    margin-top: 25px;
}

.cs-latest-news-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 15px 0;
    line-height: 1.3;
    color: #000!important;
}

.cs-latest-news-title a {
    color: #000!important;
    text-decoration: none;
    transition: color 0.3s ease;
}

.cs-latest-news-title a:hover {
    color: #e2001a;
}

.cs-latest-news-excerpt {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 15px;
}

.cs-latest-news-read-more {
    margin-top: auto;
    color: #e2001a;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: color 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.cs-latest-news-read-more:hover {
    color: #b30015;
}

/* Responsive Styles */
@media (max-width: 1024px) {
    .cs-latest-news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cs-latest-news-image {
        width: 100%;
        position: relative;
    }
    
    .cs-latest-news-thumbnail {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

@media (max-width: 767px) {
    .cs-latest-news-grid {
        grid-template-columns: 1fr;
    }
    
    .cs-latest-news-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .cs-latest-news-thumbnail {
        width: 100%!important;
    }
    
    .cs-latest-news-section-title {
        margin-bottom: 15px;
    }
}

/* CS Areas Homelinks Widget Styles */

.cs-areas-homelinks-container {
    width: 100%;
    background-color: #1e1e1e;
    padding: 50px 20px;
}

.cs-areas-homelinks-title {
    color: #ffffff;
    text-align: center;
    margin-bottom: 40px;
    font-size: 32px;
    font-weight: 600;
}

.cs-areas-homelinks-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.cs-areas-homelinks-item {
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.cs-areas-homelinks-item-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.cs-areas-homelinks-item:hover {
    transform: translateY(-5px);
}

.cs-areas-homelinks-icon-section {
    background-color: #e2001a;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 20px;
}

.cs-areas-homelinks-icon {
    width: 60px;
    height: auto;
    filter: brightness(0) invert(1);
}

.cs-areas-homelinks-text-section {
    background-color: #ffffff;
    padding: 20px 15px;
    text-align: center;
}

.cs-areas-homelinks-link {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cs-areas-homelinks-title-text {
    font-size: 18px;
    font-weight: 500;
    color: #000000;
}

.cs-areas-homelinks-arrow {
    display: inline-flex;
    margin-left: 8px;
}

.cs-areas-homelinks-arrow img {
    width: 16px;
    height: auto;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .cs-areas-homelinks-grid {
        grid-template-columns: repeat(2, 1fr)!important;
    }
}

@media (max-width: 767px) {
    .cs-areas-homelinks-grid {
        grid-template-columns: repeat(1, 1fr)!important;
    }
    
    .cs-areas-homelinks-title {
        font-size: 28px;
    }
}

/* CS Download Links Widget Styles */

.cs-download-links-container {
    width: 100%;
}

.cs-download-item {
    display: block;
    background-color: #f5f5f5;
    padding: 20px;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.3s ease;
    margin-bottom: 0;
}

.cs-download-item:hover {
    background-color: #e8e8e8;
}

.cs-download-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.cs-download-title {
    flex: 1;
    color: #000000;
    font-size: 16px;
    font-weight: bold;
    margin-right: 20px;
}

.cs-download-button {
    background-color: #4a90b8;
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 0;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color 0.3s ease;
    white-space: nowrap;
}

.cs-download-item:hover .cs-download-button {
    background-color: #3a7a9a;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .cs-download-content {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .cs-download-title {
        margin-right: 0;
        margin-bottom: 10px;
    }
    
    .cs-download-button {
        width: 100%;
        text-align: center;
    }
}

.current-color-stroke .elementor-toggle-item svg path {
    fill: #E4002B!important;
    stroke: none;
}

/* CS Footer Banner Section Widget Styles */

.cs-banner-wrapper {
    display: flex;
    width: 100%;
    position: relative;
    /* left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw; */
    height: 500px;
    overflow: hidden;
}

.cs-banner-left,
.cs-banner-right {
    flex: 1;
    position: relative;
    display: flex;
    align-items: end;
}

/* Background layers for each side */
.cs-banner-left::before,
.cs-banner-right::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* Overlay layers for each side */
.cs-banner-left::after,
.cs-banner-right::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    pointer-events: none;
}

/* Container with max-width */
.cs-banner-container {
    max-width: 1600px;
    width: 100%;
    position: relative;
    z-index: 3;
    height: 100%;
}

/* Left side container aligns to the right */
.cs-banner-left .cs-banner-container {
    margin-left: auto;
    margin-right: 0;
    max-width: 825px;
}

/* Right side container aligns to the left */
.cs-banner-right .cs-banner-container {
    margin-left: 0;
    margin-right: auto;
}

.cs-banner-columns {
    display: flex;
    height: 100%;
}

.cs-banner-column {
    flex: 1;
    display: flex;
    align-items: end;
}

/* Left column only shows in left side */
.cs-banner-left .cs-banner-column-right {
    display: none;
}

/* Right column only shows in right side */
.cs-banner-right .cs-banner-column-left {
    display: none;
}

.cs-banner-column-content {
    padding: 40px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.cs-banner-title {
    color: #ffffff;
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 20px 0;
    line-height: 1.2;
}

.cs-banner-content {
    color: #ffffff;
    margin-bottom: 20px;
    line-height: 1.6;
}

.cs-banner-content p {
    margin-bottom: 15px;
}

.cs-banner-content p:last-child {
    margin-bottom: 0;
}

.cs-banner-button {
    display: inline-block;
    background-color: #ffffff;
    color: #000000;
    padding: 11px 29px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    text-transform: initial;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    border-radius: 0;
    align-self: flex-start;
}

.cs-banner-button:hover {
    background-color: rgb(29 29 29);
    color: #ffffff;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .cs-banner-wrapper {
        height: 350px;
    }
    
    .cs-banner-title {
        font-size: 28px;
    }
    
    .cs-banner-column-content {
        padding: 30px;
    }
}

@media (max-width: 768px) {
    .cs-banner-wrapper {
        flex-direction: column;
        height: auto;
        min-height: 500px;
    }
    
    .cs-banner-left,
    .cs-banner-right {
        flex: none;
        min-height: 250px;
    }
    
    .cs-banner-left .cs-banner-column-right {
        display: flex;
    }
    
    .cs-banner-right .cs-banner-column-left {
        display: flex;
    }
    
    /* Reset container alignment on mobile */
    .cs-banner-left .cs-banner-container,
    .cs-banner-right .cs-banner-container {
        margin: 0 auto;
    }
    
    .cs-banner-column-content {
        text-align: left;
        padding: 40px 20px;
    }
    
    .cs-banner-title {
        font-size: 24px;
        margin-bottom: 15px;
    }
    
    /* .cs-banner-button {
        align-self: center;
    } */
}

@media (max-width: 480px) {
    .cs-banner-title {
        font-size: 25px!important;
    }
    
    .cs-banner-column-content {
        padding: 30px 15px;
    }
    
    .cs-banner-button {
        padding: 10px 20px;
        font-size: 15px;
    }
}

/* Fix for Elementor Container */
.elementor-widget-cs_footer_banner_section {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.elementor-widget-cs_footer_banner_section .elementor-widget-container {
    padding: 0 !important;
    margin: 0 !important;
}

/* CS Membership Pricing Tables Widget Styles - Enhanced Version */

.cs-membership-pricing-container {
    margin: 0 auto;
    padding: 0px;
    position: relative;
}

.cs-pricing-main-title {
    text-align: center;
    font-size: 32px!important;
    font-weight: 700;
    margin-bottom: 2rem;
    color: #000;
}

/* Filter Tabs */
.cs-pricing-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.cs-pricing-tab {
    padding: 12px 24px;
    border: none;
    border-radius: 25px;
    background-color: #f0f0f0;
    color: #000;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: inherit;
}

.cs-pricing-tab:hover {
    background-color: #e0e0e0;
    color: #333;
}

.cs-pricing-tab.active {
    background-color: #e4002b;
    color: white;
}

/* Pricing Cards Container */
.cs-pricing-cards-container {
    position: relative;
    overflow: hidden;
}

.cs-pricing-cards {
    display: flex;
    gap: 20px;
    overflow-x: scroll;
    padding: 40px 0;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding-left: 5%;
    padding-right: 20px;
    
    /* Hide native scrollbar */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.cs-pricing-cards::-webkit-scrollbar {
    display: none; /* WebKit */
}

/* Custom Scrollbar */
.cs-custom-scrollbar-track {
    position: absolute;
    bottom: 0;
    left: 5%;
    right: 20px;
    height: 8px;
    background: #f1f1f1;
    border-radius: 10px;
    display: none;
    z-index: 10;
}

.cs-custom-scrollbar-thumb {
    position: absolute;
    top: 0;
    height: 100%;
    background: #E4012A;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    min-width: 20px;
}

.cs-custom-scrollbar-thumb:hover,
.cs-custom-scrollbar-thumb.dragging {
    background: #d40128;
}

/* Peek Effect for showing more cards */
.cs-scroll-peek {
    position: absolute;
    top: 20px;
    bottom: 20px;
    width: 60px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 5;
}

.cs-scroll-peek.visible {
    opacity: 1;
}

.cs-scroll-peek-left {
    left: 0;
    background: linear-gradient(to right, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 100%);
}

.cs-scroll-peek-right {
    right: 0;
    background: linear-gradient(to left, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 100%);
}

.cs-scroll-peek-right::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23666" viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>') no-repeat center;
    background-size: contain;
    opacity: 0.7;
}

/* Individual Pricing Card */
.cs-pricing-card {
    flex: 0 0 317px;
    background-color: #F9F9F9;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: fit-content;
}

.cs-pricing-header-bg {
    background-color: #F4F4F4;
    padding: 30px 25px 0px 25px;
    min-height: 288px;
}

/* Card Header */
.cs-pricing-card-header {
    text-align: center;
    margin-bottom: 20px;
}

.cs-pricing-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.cs-pricing-subtitle {
    font-size: 0.95rem;
    color: #666;
    margin: 0;
    font-weight: 500;
}

/* Price Section */
.cs-pricing-price-section {
    text-align: center;
    margin-bottom: 20px;
}

.cs-pricing-price {
    font-weight: bold;
    color: #e4002b;
    line-height: 1.2;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
}

.price-amount {
    display: block;
}

.price-period {
    color: #E4002B;
    margin-left: 5px;
}

/* Description */
.cs-pricing-description {
    margin-bottom: 15px;
}

.cs-pricing-description p {
    font-size: 14px;
    color: #000000;
    line-height: 1.5;
    margin: 0;
    text-align: center;
}

/* Terms Link */
.cs-pricing-terms {
    text-align: center;
    margin-bottom: 25px;
}

.cs-pricing-terms a {
    color: #000000!important;
    font-size: 0.9rem;
    text-decoration: underline!important;
    transition: color 0.3s ease;
}

.cs-pricing-terms a:hover {
    color: #e4002b!important;
}

/* Benefits Section */
.cs-pricing-benefits {
    flex-grow: 1;
    margin-bottom: 0;
    padding: 30px 40px 0px 40px;
}

.benefits-title {
    font-size: 16px;
    font-weight: normal;
    color: #e4002b;
    margin: 0 0 15px 0;
}

.benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.benefit-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: #555;
    transition: all 0.3s ease;
}

.benefit-item.benefit-excluded {
    color: #999;
    opacity: 0.7;
}

.benefit-item.benefit-excluded .benefit-text {
    text-decoration: line-through;
}

.benefit-icon {
    color: #28a745;
    font-weight: bold;
    margin-right: 10px;
    font-size: 1rem;
    flex-shrink: 0;
    transition: color 0.3s ease;
}

.benefit-text {
    line-height: 1.4;
}

/* Sign Up Button */
.cs-pricing-button {
    margin-top: auto;
    padding: 30px 25px;
}

.cs-pricing-btn {
    display: block;
    width: 100%;
    padding: 8px 20px;
    background-color: #e4002b;
    color: white;
    text-decoration: none;
    text-align: center;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    color: white !important;
    max-width: 235px;
    margin: auto;
    margin-bottom: 30px;
}

.cs-pricing-btn:hover {
    background-color: #c8001f;
    transform: translateY(-2px);
    color: white;
    text-decoration: none;
}

/* Animation for filtered cards */
.cs-pricing-card {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.cs-pricing-card.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Loading state */
.cs-membership-pricing-container:not(.loaded) {
    opacity: 0;
}

.cs-membership-pricing-container.loaded {
    opacity: 1;
    transition: opacity 0.5s ease;
}

/* Elementor Editor Specific Styles */
/* .elementor-editor-active .cs-pricing-card {
    opacity: 1 !important;
    display: flex !important;
    pointer-events: auto !important;
}

.elementor-editor-active .cs-pricing-card.hidden {
    opacity: 1 !important;
    display: flex !important;
} */

.elementor-editor-active .cs-membership-pricing-container:not(.loaded) {
    opacity: 1;
}

/* .elementor-editor-active .cs-pricing-cards {
    overflow-x: visible !important;
}

.elementor-editor-active .cs-custom-scrollbar-track,
.elementor-editor-active .cs-scroll-peek {
    display: none !important;
} */

/* Responsive Design */

/* Tablet */
@media (max-width: 1024px) {
    .cs-pricing-cards {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .cs-custom-scrollbar-track {
        left: 20px;
        right: 20px;
    }
    
    .cs-pricing-card {
        flex: 0 0 260px;
    }
    
    .cs-scroll-peek-left {
        left: 0;
    }
    
    .cs-scroll-peek-right {
        right: 0;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .cs-membership-pricing-container {
        padding: 15px;
    }
    
    .cs-pricing-main-title {
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }
    
    .cs-pricing-tabs {
        gap: 8px;
        margin-bottom: 1.5rem;
    }
    
    .cs-pricing-tab {
        padding: 10px 16px;
        font-size: 0.9rem;
    }
    
    .cs-pricing-cards-container {
        overflow: visible;
    }
    
    .cs-pricing-cards {
        flex-direction: column;
        overflow-x: visible;
        gap: 15px;
        padding: 0;
        justify-content: flex-start !important;
    }
    
    .cs-pricing-card {
        flex: none;
        width: 100%;
        padding: 25px 20px;
    }
    
    .cs-pricing-title {
        font-size: 1.3rem;
    }
    
    .cs-pricing-price {
        font-size: 18px!important;
    }
    
    .price-amount {
        font-size: 2.2rem;
    }
    
    /* Hide custom scrollbar and peek effects on mobile */
    .cs-custom-scrollbar-track,
    .cs-scroll-peek {
        display: none !important;
    }
}

/* Very small mobile */
@media (max-width: 480px) {
    .cs-pricing-main-title {
        font-size: 1.8rem;
    }
    
    .cs-pricing-tabs { 
        flex-direction: column;
        align-items: center;
    }
    
    .cs-pricing-tab {
        width: 100%;
        max-width: 250px;
        text-align: center;
    }
    
    .cs-pricing-card {
        padding: 0;
    }
}

/* Accessibility improvements */
/* .cs-pricing-tab:focus {
    outline: 2px solid #e4002b;
    outline-offset: 2px;
} */

.cs-custom-scrollbar-thumb:focus {
    outline: 2px solid #e4002b;
    outline-offset: 2px;
}

/* Smooth animations for better UX */
@media (prefers-reduced-motion: reduce) {
    .cs-pricing-card,
    .cs-pricing-tab,
    .cs-pricing-btn,
    .cs-custom-scrollbar-thumb,
    .cs-scroll-peek {
        transition: none !important;
    }
    
    .cs-pricing-cards {
        scroll-behavior: auto;
    }
}

/* CS Members Widget Styles */
.cs-members-widget {
    width: 100%;
}

/* Filter Buttons */
.cs-members-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
    align-items: center;
    justify-content: center;
}

.cs-members-filter .filter-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 25px;
    background-color: #F4F4F4;
    color: #000000!important;
    border: 1px #BBBCBC solid;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
    font-weight: bold;
    text-transform: inherit;
}

.cs-members-filter .filter-btn:hover {
    background-color: #e0e0e0;
    color: #333333;
}

.cs-members-filter .filter-btn.active {
    background-color: #e4002b;
    color: #ffffff!important;
}

.cs-members-filter .filter-btn.active:hover {
    background-color: #cc001f;
}

/* Members Grid */
.cs-members-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Member Card */
.cs-member-card {
    background: #ffffff;
    border-radius: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    opacity: 1;
    transform: scale(1);
}

/* Filtering States */
.cs-member-card.cs-hidden {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
    position: absolute;
    visibility: hidden;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.cs-member-card.cs-visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    position: relative;
    visibility: visible;
    height: auto;
    margin: initial;
    padding: initial;
    overflow: visible;
}

/* Member Image */
.member-image {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.member-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    max-height: 260px;
}

.placeholder-image {
    width: 100%;
    height: 100%;
    background-color: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999999;
    font-size: 14px;
}

.placeholder-image::before {
    content: "No Image";
}

/* Member Info */
.member-info {
    padding: 20px 0;
}

.member-name {
    font-size: 22px;
    font-weight: 600;
    color: #000000;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.member-title {
    font-size: 15px;
    font-weight: 600;
    color: #e4002b;
    margin-bottom: 15px;
}

/* Member Contact */
.member-contact {
    font-size: 15px;
    line-height: 1.6;
}

.member-email,
.member-phone {
    margin-bottom: 4px;
    color: #666666;
}

.member-email a,
.member-phone a {
    color: #e4002b;
    text-decoration: none;
    transition: color 0.3s ease;
}

.member-email a:hover,
.member-phone a:hover {
    color: #cc001f;
    text-decoration: underline;
}

/* Custom Grid Columns for Elementor Control */
.cs-members-grid.columns-1 {
    grid-template-columns: 1fr;
}

.cs-members-grid.columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.cs-members-grid.columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.cs-members-grid.columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .cs-members-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 25px !important;
    }
    
    .cs-members-grid.columns-4 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .cs-members-grid.columns-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .member-image {
        height: 220px;
    }
}

@media (max-width: 768px) {
    .cs-members-filter {
        margin-bottom: 30px;
    }
    
    .cs-members-filter .filter-btn {
        padding: 10px 18px;
        font-size: 13px;
    }
    
    .cs-members-grid,
    .cs-members-grid.columns-4,
    .cs-members-grid.columns-3,
    .cs-members-grid.columns-2 {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .member-image {
        height: 280px;
    }
    
    .member-info {
        padding: 15px 0;
    }
    
    .member-name {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .cs-members-filter {
        gap: 8px;
    }
    
    .cs-members-filter .filter-btn {
        padding: 8px 15px;
        font-size: 12px;
    }
    
    .member-image {
        height: 250px;
    }
    
    .member-info {
        padding: 12px 0;
    }
    
    .member-name {
        font-size: 16px;
    }
    
    .member-contact {
        font-size: 13px;
    }
}

/* Animation for filtering */
.cs-member-card {
    animation-duration: 0.3s;
    animation-fill-mode: both;
}

.cs-member-card.fade-in {
    animation-name: fadeIn;
}

.cs-member-card.fade-out {
    animation-name: fadeOut;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.8);
    }
}

/* CS Sector Area Widget Styles */
.cs-sector-widget {
    width: 100%;
}

/* Filter Buttons */
.cs-sector-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 60px;
    align-items: center;
    justify-content: center;
}

.cs-sector-filter .filter-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 25px;
    background-color: #F4F4F4!important;
    color: #000000!important;
    border: 1px #BBBCBC solid;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
    font-weight: bold;
    text-transform: inherit;
}

.cs-sector-filter .filter-btn:hover {
    background-color: #e0e0e0;
    color: #333333;
}

.cs-sector-filter .filter-btn.active {
    background-color: #e4002b!important;
    color: #ffffff!important;
    border: 1px #e4002b solid;
}

.cs-sector-filter .filter-btn.active:hover {
    background-color: #cc001f;
}

/* Sector Areas Grid */
.cs-sector-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Sector Card */
.cs-sector-card {
    background: #F4F4F4;
    padding: 40px 30px;
    transition: all 0.3s ease;
    opacity: 1;
    transform: scale(1);
}

/* Filtering States */
.cs-sector-card.cs-hidden {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
    position: absolute;
    visibility: hidden;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.cs-sector-card.cs-visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    position: relative;
    visibility: visible;
    height: auto;
    margin: initial;
    padding: 40px 30px;
    overflow: visible;
}

/* Sector Content */
.sector-content {
    width: 100%;
}

.sector-title {
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    margin: 0 0 15px 0;
    line-height: 1.4;
    min-height: 65px;
}

/* Sector Manager */
.sector-manager {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.manager-label {
    font-size: 14px;
    font-weight: 600;
    color: #e4002b;
    letter-spacing: 0.5px;
}

.manager-name {
    font-size: 17px;
    font-weight: 500;
    color: #333333;
    line-height: 1.3;
}

/* Custom Grid Columns for Elementor Control */
.cs-sector-grid.columns-1 {
    grid-template-columns: 1fr;
}

.cs-sector-grid.columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.cs-sector-grid.columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.cs-sector-grid.columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .cs-sector-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 25px !important;
    }
    
    .cs-sector-grid.columns-4 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .cs-sector-grid.columns-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .cs-sector-card {
        padding: 40px 30px;
    }
    
    .cs-sector-card.cs-visible {
        padding: 40px 30px;
    }
}

@media (max-width: 768px) {
    .cs-sector-filter {
        margin-bottom: 30px;
    }
    
    .cs-sector-filter .filter-btn {
        padding: 10px 18px;
        font-size: 13px;
    }
    
    .cs-sector-grid,
    .cs-sector-grid.columns-4,
    .cs-sector-grid.columns-3,
    .cs-sector-grid.columns-2 {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .cs-sector-card {
        padding: 18px;
    }
    
    .cs-sector-card.cs-visible {
        padding: 18px;
    }
    
    .sector-title {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .cs-sector-filter {
        gap: 8px;
    }
    
    .cs-sector-filter .filter-btn {
        padding: 8px 15px;
        font-size: 12px;
    }
    
    .cs-sector-card {
        padding: 15px;
    }
    
    .cs-sector-card.cs-visible {
        padding: 15px;
    }
    
    .sector-title {
        font-size: 15px;
        margin-bottom: 12px;
    }
    
    .manager-name {
        font-size: 13px;
    }
}

/* Animation for filtering */
.cs-sector-card {
    animation-duration: 0.3s;
    animation-fill-mode: both;
}

.cs-sector-card.fade-in {
    animation-name: fadeIn;
}

.cs-sector-card.fade-out {
    animation-name: fadeOut;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.8);
    }
}

.leaflet-top, .leaflet-bottom {
        z-index: 985!important;
}