/**
 * PWB Blocks Frontend Styles
 * Minimal styles for PWB blocks
 */

/* PWB Title Block Styles */
.pwb-title-block {
    margin: 6rem auto;
    margin-bottom: 0.5rem;
    text-align: center;
    padding: 0 20px;
}

.pwb-title-block .pwb-short-text {
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 500;
    font-family: 'Manrope', sans-serif;
    margin-bottom: 12px;
    margin-top: 0;
    line-height: 1.4;
    letter-spacing: 0.3px;
}

.pwb-title-block .pwb-title {
    color: var(--text-color);
    font-weight: normal;
    font-family: 'Manrope', sans-serif;
    margin-bottom: 0;
    line-height: 1.2;
}

.pwb-title-block .pwb-subtitle {
    color: #999;
    font-family: 'Manrope', sans-serif;
    margin-bottom: 0.25rem;
    margin-top: 1rem;
    line-height: 1.4;
    font-size: 14px;
}

/* Size Variations */
.pwb-title-small .pwb-short-text {
    font-size: 14px;
}

.pwb-title-small .pwb-title {
    font-size: 1.4rem;
}

.pwb-title-small .pwb-subtitle {
    font-size: 12px;
}

.pwb-title-medium .pwb-short-text {
    font-size: 16px;
}

.pwb-title-medium .pwb-title {
    font-size: 2.5rem;
    }
    
.pwb-title-medium .pwb-subtitle {
    font-size: 14px;
    }
    
.pwb-title-large .pwb-short-text {
    font-size: 18px;
}

.pwb-title-large .pwb-title {
    font-size: 3.5rem;
    }
    
.pwb-title-large .pwb-subtitle {
        font-size: 16px;
    }

/* Text Highlights */
.text-highlight {
    color: var(--primary-color) !important;
}

.text-greylight {
    color: #888 !important;
}

/* PWB Split Title Block Styles */
.pwb-split-title-block {
    margin: 6rem auto 3rem auto;
    margin-bottom: 0.5rem;
    max-width: 1200px;
    padding: 0 20px;
}

.pwb-split-title-block .pwb-short-text {
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 500;
    font-family: 'Manrope', sans-serif;
    margin-bottom: 12px;
    margin-top: 0;
    line-height: 1.4;
    letter-spacing: 0.3px;
    text-align: center;
}

.pwb-split-title-block .pwb-split-columns {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.pwb-split-title-block .pwb-split-left,
.pwb-split-title-block .pwb-split-right {
    flex: 1;
}

.pwb-split-title-block .pwb-title {
    color: var(--text-color);
    font-weight: normal;
    font-family: 'Manrope', sans-serif;
    margin-bottom: 0;
    line-height: 1.2;
}

.pwb-split-title-block .pwb-subtitle {
    color: var(--text-secondary);
    font-family: 'Manrope', sans-serif;
    margin-bottom: 0.25rem;
    margin-top: 0;
    line-height: 1.4;
    font-size: 14px;
}

/* Size Variations for Split Title */
.pwb-split-title-block.pwb-title-small .pwb-short-text {
    font-size: 14px;
}

.pwb-split-title-block.pwb-title-small .pwb-title {
    font-size: 1.4rem;
}

.pwb-split-title-block.pwb-title-small .pwb-subtitle {
    font-size: 12px;
}

.pwb-split-title-block.pwb-title-medium .pwb-short-text {
    font-size: 16px;
}

.pwb-split-title-block.pwb-title-medium .pwb-title {
    font-size: 2.5rem;
}
    
.pwb-split-title-block.pwb-title-medium .pwb-subtitle {
    font-size: 14px;
}
    
.pwb-split-title-block.pwb-title-large .pwb-short-text {
    font-size: 18px;
}

.pwb-split-title-block.pwb-title-large .pwb-title {
    font-size: 3.5rem;
}
    
.pwb-split-title-block.pwb-title-large .pwb-subtitle {
    font-size: 16px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .pwb-title-block {
        max-width: 100%;
        padding: 0 15px;
    }
    
    /* Fix white-space and nbsp issues on mobile */
    .pwb-title-block,
    .pwb-split-title-block,
    .pwb-case-study-slider,
    .pwb-service-list-block,
    .pwb-services-block,
    .pwb-results-grid,
    .pwb-user-testimonial,
    .pwb-faq-block {
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .pwb-title-block .pwb-title,
    .pwb-title-block .pwb-subtitle,
    .pwb-title-block .pwb-short-text,
    .pwb-split-title-block .pwb-title,
    .pwb-split-title-block .pwb-subtitle,
    .pwb-split-title-block .pwb-short-text,
    .case-title,
    .case-subtext,
    .case-list li,
    .service-title,
    .service-description {
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .pwb-title-small .pwb-short-text {
        font-size: 12px;
    }
    
    .pwb-title-medium .pwb-short-text {
        font-size: 14px;
    }
    
    .pwb-title-large .pwb-short-text {
        font-size: 16px;
    }
    
    .pwb-title-small .pwb-title {
        font-size: 1.2rem!important;
    }
    
    .pwb-title-medium .pwb-title {
        font-size: 1.5rem!important;
    }
    
    .pwb-title-large .pwb-title {
        font-size: 2rem!important;
    }
    
    .pwb-title-small .pwb-subtitle {
        font-size: 11px;
    }
    
    .pwb-title-medium .pwb-subtitle {
        font-size: 12px!important;
    }
    
    .pwb-title-large .pwb-subtitle {
        font-size: 14px;
    }
    
    /* Split Title Responsive */
    .pwb-split-title-block {
        max-width: 100%;
        padding: 0 15px;
    }
    
    .pwb-split-title-block .pwb-split-columns {
        flex-direction: column;
        gap: 1rem;
    }
    
    .pwb-split-title-block.pwb-title-small .pwb-short-text {
        font-size: 12px;
    }
    
    .pwb-split-title-block.pwb-title-medium .pwb-short-text {
        font-size: 14px;
    }
    
    .pwb-split-title-block.pwb-title-large .pwb-short-text {
        font-size: 16px;
    }
    
    .pwb-split-title-block.pwb-title-small .pwb-title {
        font-size: 1.2rem!important;
    }
    
    .pwb-split-title-block.pwb-title-medium .pwb-title {
        font-size: 1.5rem!important;
    }
    
    .pwb-split-title-block.pwb-title-large .pwb-title {
        font-size: 1.5rem!important;
    }
    
    .pwb-split-title-block.pwb-title-small .pwb-subtitle {
        font-size: 11px;
    }
    
    .pwb-split-title-block.pwb-title-medium .pwb-subtitle {
        font-size: 12px;
    }
    
    .pwb-split-title-block.pwb-title-large .pwb-subtitle {
        font-size: 14px;
    }

    .content-box-image-left img {
        width: 5rem!important;
        height: auto!important;
        margin-top: 1rem;
    }


}

.awards-title::before {
    content: "";
    background-color: var(--text-color)!important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    opacity: 0.8;
    z-index: -2;
}

/* PWB Directions of Work Block Styles */
.pwb-directions-work {
    padding: 80px 0;
    background: var(--bg-color);
    overflow: hidden;
}

.pwb-directions-work .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.directions-content {
    margin-bottom: 60px;
}

.directions-content .small-text {
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 16px;
    letter-spacing: 0.5px;
}

.directions-content .main-title {
    color: var(--text-color);
    font-size: 36px;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
    max-width: 600px;
}

.directions-images {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    justify-content: center;
    min-height: 600px;
    position: relative;
}

.image-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease;
}

.image-column.animate {
    opacity: 1;
    transform: translateY(0);
}

.image-column img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-column img:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}

/* Column specific heights and positioning */
.image-column.column-1 {
    padding-top: 40px;
    animation-delay: 0.1s;
}

.image-column.column-2 {
    padding-top: 0px;
    animation-delay: 0.2s;
}

.image-column.column-3 {
    padding-top: 60px;
    animation-delay: 0.3s;
}

.image-column.column-4 {
    padding-top: -20px;
    animation-delay: 0.4s; 
}

.image-column.column-5 {
    padding-top: -10px;
    animation-delay: 0.5s;
}

/* Scroll animation effect */
.image-column[data-scroll-speed="1"] {
    transform: translateY(var(--scroll-offset-1, 0));
}

.image-column[data-scroll-speed="2"] {
    transform: translateY(var(--scroll-offset-2, 0));
}

.image-column[data-scroll-speed="3"] {
    transform: translateY(var(--scroll-offset-3, 0));
}

/* Mobile Responsive */
@media (max-width: 968px) {
    .pwb-directions-work {
        padding: 60px 0;
    }
    
    .directions-content .main-title {
        font-size: 28px;
    }
    
    .directions-images {
        gap: 16px;
        min-height: 400px;
    }
    
    /* Hide first and last columns on mobile */
    .image-column.column-1,
    .image-column.column-5 {
        display: none;
    }
    
    .image-column {
        flex: 1;
        max-width: calc(33.333% - 11px);
    }
}

@media (max-width: 768px) {
    .pwb-directions-work {
        padding: 40px 0;
    }
    
    .directions-content {
        margin-bottom: 40px;
    }
    
    .directions-content .main-title {
        font-size: 24px;
    }
    
    .directions-images {
        gap: 12px;
        min-height: 300px;
    }
}

/* PWB Reveal Block Styles */
.pwb-reveal-block {
    padding: 60px 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.pwb-reveal-block .reveal-text {
    line-height: 1.6;
    font-weight: 700;
}

.pwb-reveal-block[data-font-size="small"] .reveal-text {
    font-size: 18px;
}

.pwb-reveal-block[data-font-size="medium"] .reveal-text {
    font-size: 24px;
}

.pwb-reveal-block[data-font-size="large"] .reveal-text {
    font-size: 32px;
}

.pwb-reveal-block[data-font-size="xl"] .reveal-text {
    font-size: 48px;
}

.pwb-reveal-block[data-text-align="left"] .reveal-text {
    text-align: left;
}

.pwb-reveal-block[data-text-align="center"] .reveal-text {
    text-align: center;
}

.pwb-reveal-block[data-text-align="right"] .reveal-text {
    text-align: right;
}

.reveal-word {
    color: var(--text-muted);
    transition: color 0.3s ease;
    display: inline-block;
}

.reveal-word.revealed {
    color: var(--text-color);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .pwb-reveal-block {
        padding: 40px 24px;
    }
    
    .pwb-reveal-block[data-font-size="small"] .reveal-text {
        font-size: 16px;
    }
    
    .pwb-reveal-block[data-font-size="medium"] .reveal-text {
        font-size: 20px;
    }
    
    .pwb-reveal-block[data-font-size="large"] .reveal-text {
        font-size: 24px;
    }
    
    .pwb-reveal-block[data-font-size="xl"] .reveal-text {
        font-size: 32px;
    }
}

/* PWB Service List Block Styles */
.pwb-service-list-block {
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.service-list-container {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 15px;
    align-items: stretch;
}

.service-names-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.service-item {
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.service-item:hover .service-name {
    color: var(--primary-color);
}

.service-item.active .service-name {
    color: var(--primary-color);
}

.service-name {
    flex: 1;
    padding: 20px 25px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-color);
    font-size: 18px;
    font-weight: 500;
    font-family: 'Manrope', sans-serif;
    transition: all 0.3s ease;
}

.service-item:hover .service-name {
    background: var(--card-bg);
    border-color: var(--border-color);
}

.service-item.active .service-name {
    background: var(--card-bg);
    border-color: var(--border-color);
}

.service-arrow {
    width: 80px;
    height: auto;
    min-height: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.service-item:hover .service-arrow {
    background: var(--card-bg);
    border-color: var(--border-color);
}

.service-item.active .service-arrow {
    background: var(--card-bg);
    border-color: var(--border-color);
}

.service-arrow::after {
    content: '←';
    color: var(--primary-color);
    font-size: 18px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.service-item.active .service-arrow::after {
    content: '→';
    transform: translateX(2px);
}

.service-details-column {
    padding: 30px;
    background: var(--card-bg);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.service-details-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-image {
    border-radius: 12px;
    overflow: hidden;
    transition: opacity 0.3s ease;
}

.service-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.service-content {
    transition: opacity 0.3s ease;
}

.service-details-column .service-title {
    color: var(--text-color);
    font-size: 28px;
    font-weight: 600;
    margin: 0 0 15px 0;
    font-family: 'Manrope', sans-serif;
}

.service-description {
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 25px 0;
}

.learn-more-btn {
    display: inline-block;
    color: var(--primary-color);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.3s ease;
    padding: 0;
}

.learn-more-btn:hover {
    color: var(--text-color);
}

/* Hide the JSON data script */
.service-data {
    display: none;
}

/* Responsive Design */
@media (max-width: 968px) {
    .service-list-container {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .service-name {
        padding: 18px 20px;
        font-size: 16px;
    }
    
    .service-arrow {
        width: 45px;
        height: auto;
        min-height: 100%;
    }
    
    .service-arrow::after {
        font-size: 16px;
    }
    
    .service-details-column {
        padding: 25px;
        height: 100%;
    }
    
    .service-details-column .service-title {
        font-size: 24px;
    }
    
    .service-description {
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    .pwb-service-list-block {
        padding: 30px 15px;
    }
    
    .service-list-container {
        gap: 15px;
    }
    
    .service-name {
        padding: 15px 18px;
        font-size: 15px;
    }
    
    .service-arrow {
        width: 40px;
        height: auto;
        min-height: 100%;
    }
    
    .service-arrow::after {
        font-size: 14px;
    }
    
    .service-details-column {
        padding: 20px;
        height: 100%;
    }
    
    .service-details-column .service-title {
        font-size: 22px;
        margin-bottom: 12px;
    }
    
    .service-description {
        font-size: 14px;
        margin-bottom: 20px;
    }
    
    .service-image img {
        height: 150px;
    }
}

/* PWB Service Cards Block Styles - Bootstrap Style */
.pwb-service-cards {
    padding: 20px;
    background-color: var(--bg-color);
    color: var(--text-secondary);
}

.service-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.static-service-card {
    background-color: var(--card-bg);
    color: var(--secondary-text-color);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    text-align: center;
    overflow: hidden;
}

.static-service-card .static-card-image {
    padding: 15px 15px 0 15px;
}

.static-service-card .static-card-image img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.static-service-card .static-card-content {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.static-service-card .static-card-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 15px 0;
    line-height: 1.3;
}

.static-service-card .static-card-description {
    color: var(--text-secondary);
    margin: 0 0 20px 0;
    line-height: 1.5;
    flex: 1;
    font-size: 0.9rem;
}

.static-service-card .static-card-link {
    color: var(--primary-color, var(--primary-color));
    text-decoration: none;
    font-weight: 500;
    margin-top: auto;
    font-size: 0.9rem;
}

.static-service-card .static-card-link:hover {
    color: #fff;
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 1200px) {
    .service-cards-grid {
        padding: 0 15px;
        gap: 15px;
    }
}

@media (max-width: 968px) {
    .service-cards-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .service-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 10px;
        gap: 15px;
    }
}

@media (max-width: 480px) {
    .service-cards-grid {
        grid-template-columns: 1fr;
        padding: 0 10px;
        gap: 15px;
    }
    
    .static-service-card .static-card-image img {
        height: 160px;
    }
}

/* PWB Case Study Slider Block Styles */
.pwb-case-study-slider {
    position: relative;
    min-height: 500px;
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    margin-top: 6rem;
}

.slider-background-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.7;
    z-index: 1;
}

.gradient-layer {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(#ffffff00, #000000 92%);
    z-index: 2;
}

.slider-content-layer {
    position: relative;
    z-index: 3;
    padding: 20px;
}

.slider-content-layer .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.slider-header {
    text-align: center;
    margin-bottom: 60px;
}

.slider-title {
    color: #fff;
    font-size: 48px;
    font-weight: 600;
    margin: 0 0 20px 0;
    font-family: 'Manrope', sans-serif;
}

.slider-description {
    color: #ffffff;
    font-size: 18px;
    margin: 0;
    font-family: 'Manrope', sans-serif;
}

.case-study-slider-wrapper {
    position: relative;
    overflow: hidden;
    margin-bottom: 60px;
}

.case-study-track {
    display: flex;
    gap: 30px;
    transition: transform 0.5s ease;
    transform: translateX(0);
}

.case-study-cards-container {
    position: relative;
    overflow: hidden;
}

.case-study-cards {
    display: flex;
    gap: 30px;
    transition: transform 0.5s ease;
    padding: 0 15px;
    will-change: transform;
}

.case-study-card {
    flex: 0 0 calc(33.333% - 20px);
    border-radius: 12px;
    overflow: hidden;
    min-height: 400px;
    box-shadow: 0 5px 20px rgba(255, 255, 255, 0.1);
    position: relative;
    border: 1px solid #333;
    background: rgba(0, 0, 0, 0.8);
    max-width: calc(33.333% - 20px);
    width: calc(33.333% - 20px);
}

.case-study-card .card-content {
    padding: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.case-title,
.case-study-card h3 {
    color: #ffffff;
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 15px 0;
    font-family: 'Manrope', sans-serif;
    z-index: 5;
}

.case-subtext,
.case-study-card .case-subtext {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 20px 0;
    font-family: 'Manrope', sans-serif;
    z-index: 5;
}

.case-list,
.case-achievements {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
    flex: 1;   
    z-index: 5;
}

.case-list li,
.case-achievements li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
    color: #ffffff;
    font-size: 15px;
    line-height: 1.4;
    font-family: 'Manrope', sans-serif;
    gap: 10px;
    z-index: 5;
}

.case-list .diamond-bullet,
.case-list li::before,
.case-achievements li::before {
    content: '♦';
    color: var(--primary-color);
    font-size: 12px;
    flex-shrink: 0;
    margin-top: 2px;
    z-index: 5;
}

.case-button,
.case-study-btn {
    background: var(--primary-color);
    color: var(--bg-color);
    text-decoration: none;
    padding: 14px 28px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    display: block;
    margin: 0 auto;
    width: fit-content;
    transition: all 0.3s ease;
    font-family: 'Manrope', sans-serif;
    border: 1px solid #333;
    z-index: 5;
}

.case-button:hover,
.case-study-btn:hover {
    background: var(--primary-color);
    color: var(--bg-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(186, 255, 42, 0.3);
    text-decoration: none;
}

/* Ensure both background layer types work */
.slider-background-layer,
.slider-background {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.7;
    z-index: 1;
}

/* Ensure both content wrapper types work */
.slider-content-layer,
.slider-content {
    position: relative;
    z-index: 3;
    padding: 20px;
}

.slider-navigation {
    display: flex;
    justify-content: center;
    gap: 8rem;
    margin-top: auto;
    padding: 0 15px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 40px;
}

.nav-btn {
    background: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    width: 50px;
    height: 50px;
    border-radius: 20%;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-btn:hover {
    background: var(--primary-color);
    color: var(--bg-color);
    transform: scale(1.05);
}

.nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.nav-btn:disabled:hover {
    background: transparent;
    color: var(--primary-color);
    transform: none;
}

/* Responsive Design */
@media (max-width: 968px) {
    .pwb-case-study-slider {
        padding: 60px 0;
        min-height: 500px;
    }
    
    .slider-content-layer {
        min-height: 450px;
    }
    
    .slider-title {
        font-size: 36px;
    }
    
    .slider-description {
        font-size: 16px;
    }
    
    .case-study-cards {
        gap: 20px;
    }
    
    .case-study-card {
        flex: 0 0 calc(50% - 10px);
        min-height: 380px;
    }
    
    .case-study-card .card-content {
        padding: 25px;
    }
    
    .case-title {
        font-size: 20px;
    }
    
    .case-subtext {
        font-size: 14px;
    }
    
    .slider-navigation {
        gap: 5rem;
    }
    
    .nav-btn {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }
}

@media (max-width: 768px) {
    .pwb-case-study-slider {
        padding: 40px 0;
        min-height: 400px;
    }
    
    .slider-content-layer {
        min-height: 350px;
    }
    
    .slider-content-layer .container {
        padding: 0 15px;
    }
    
    .slider-header {
        margin-bottom: 40px;
    }
    
    .slider-title {
        font-size: 28px;
    }
    
    .slider-description {
        font-size: 14px;
    }
    
    .case-study-cards-container {
        overflow: hidden;
        position: relative;
        /* Mobile: Show exactly one card */
        width: 280px;
        height: 650px;
        margin: 0 auto;
    }
    
    .case-study-cards {
        display: flex;
        gap: 15px;
        /* Mobile: Track slides within container */
        padding: 0;
        overflow: visible;
        transition: transform 0.3s ease;
        will-change: transform;
    }
    
    .case-study-card {
        flex: 0 0 280px;
        min-height: 350px;
        max-width: 280px;
        width: 280px;
    }
    
    .case-study-card .card-content {
        padding: 20px;
    }
    
    .case-title {
        font-size: 18px;
    }
    
    .case-subtext {
        font-size: 13px;
    }
    
    .case-list li {
        font-size: 13px;
    }
    
    .slider-navigation {
        margin-top: 30px;
        padding: 0 10px;
        gap: 3rem;
        /* Center the navigation */
        justify-content: center;
    }
    
    .nav-btn {
        width: 45px;
        height: 45px;
        font-size: 16px;
        cursor: pointer;
        transition: all 0.3s ease;
        /* Ensure buttons are always clickable on mobile */
        pointer-events: auto;
        touch-action: manipulation;
    }
    
    .nav-btn:hover {
        background: var(--primary-color);
        color: var(--bg-color);
        transform: scale(1.1);
    }
    
    .nav-btn:active {
        transform: scale(0.95);
    }

    .pwb-case-study-slider {
        margin-top: 0.5rem;
    }
}

@media (max-width: 480px) {
    .case-study-cards-container {
        /* Small mobile: Show exactly one card */
        width: 260px;
        height: 650px;
    }
    
    .case-study-card {
        flex: 0 0 260px;
        max-width: 260px;
        width: 260px;
        min-height: 320px;
    }
    
    .slider-navigation {
        gap: 2rem;
    }
    
    .nav-btn {
        width: 40px;
        height: 40px;
        font-size: 14px;
        cursor: pointer;
    }
    
    .nav-btn:hover {
        background: var(--primary-color);
        color: var(--bg-color);
        transform: scale(1.1);
    }
    
    .nav-btn:active {
        transform: scale(0.95);
    }
}

/* PWB Services Block Styles - Scroll Lock Wrapper */
.pwb-services-scroll-wrapper {
    height: 100vh;
    position: relative;
    /* Allow block to break out horizontally */
    overflow: hidden;
    will-change: transform;
    /* Force full width - break out of any container */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    left: 0;
    right: 0;
}

.pwb-services-block {
    position: relative;
    background: transparent; /* Remove background */
    padding: 80px 0 20px 0; /* Add top padding for header */
    margin: 40px 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    height: 100%;
    display: flex;
    flex-direction: column;
    will-change: transform;
    overflow: hidden;
}

/* Prevent horizontal scroll completely */
body.pwb-services-active {
    overflow-x: hidden;
}

html {
    overflow-x: hidden;
}

/* Services Header - Uses exact site container structure */
.services-header {
    position: relative;
    z-index: 10;
    background: transparent;
    padding: 0;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.services-title-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: flex-end;
    margin-bottom: 0;
}

.services-subtitle {
    color: var(--text-muted);
    font-size: 16px;
    font-weight: 400;
    margin: 0;
    letter-spacing: 0.5px;
    font-family: 'Manrope', sans-serif;
    text-align: left;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.services-title {
    color: var(--text-color);
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    font-family: 'Manrope', sans-serif;
    text-align: left;
    transition: color 0.3s ease;
}

/* Progress Line - Green Bar with Enhanced Animation */
.services-progress-line {
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
    margin-top: 30px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-color));
    border-radius: 2px;
    width: 0%;
    /* GSAP will handle width animation */
    position: relative;
    box-shadow: 0 0 20px rgba(186, 255, 42, 0.3);
    will-change: width;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(186, 255, 42, 0.6));
    opacity: 0.8;
    animation: progressGlow 2s ease-in-out infinite;
}

@keyframes progressGlow {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Cards Container - Transform-based horizontal scroll */
.services-cards-container {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-top: 60px; /* Add spacing between progress bar and cards */
    overflow: hidden;
    height: 220px; /* Increased to fit content */
    display: flex;
    align-items: center;
}

/* Mobile: Show horizontal scroll instead of scroll lock */
@media (max-width: 768px) {
    .services-cards-container {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #333 transparent;
    }
    
    .services-cards-container::-webkit-scrollbar {
        height: 8px;
        display: block;
    }
    
    .services-cards-container::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.1);
        border-radius: 4px;
    }
    
    .services-cards-container::-webkit-scrollbar-thumb {
        background: #333;
        border-radius: 4px;
    }
    
    .services-cards-container::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
    
    /* Hide progress bar on mobile since we have native scroll bar */
    .services-progress-line {
        display: none;
    }
    
    /* Reduce top margin since no progress bar */
    .services-cards-container {
        margin-top: 30px;
    }
}

/* Cards Wrapper - GSAP will transform this */
.services-cards-wrapper {
    display: flex;
    gap: 20px;
    padding: 0 40px; /* Reduced padding */
    width: max-content;
    height: 100%;
    align-items: center;
    will-change: transform;
}

/* Service Cards - Consistent row alignment */
.service-card {
    flex: 0 0 500px; /* Smaller width for full-width layout */
    background: transparent;
    border: none;
    border-radius: 20px;
    text-align: left;
    display: grid;
    grid-template-rows: auto auto 1fr; /* Icon row, title row, content row */
    gap: 10px;
    position: relative;
    overflow: hidden;
    height: 180px; /* Increased to fit content */
    padding: 20px;
}

/* Service Icon Row - Consistent across all cards */
.service-icon {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-size: 20px;
    color: var(--text-color);
    position: relative;
    justify-self: start; /* Align to left in grid */
}

.service-icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    position: relative;
    z-index: 2;
    filter: brightness(0) invert(1);
}

/* Service Title Row - Consistent across all cards */
.service-title {
    color: var(--text-color);
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
    font-family: 'Manrope', sans-serif;
    align-self: start; /* Align to top of grid cell */
}

/* Service Content Row - Consistent across all cards */
.service-text {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
    font-family: 'Manrope', sans-serif;
    align-self: start; /* Align to top of grid cell */
}

/* Mobile Scroll Indicator with Enhanced Animation */
.mobile-scroll-indicator {
    display: none;
    margin: 30px auto 0 auto;
    max-width: 1200px;
    padding: 0 24px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-scroll-indicator.active {
    opacity: 1;
}

.scroll-track {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}

.scroll-thumb {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-color));
    border-radius: 3px;
    width: 30%;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 0 15px rgba(186, 255, 42, 0.4);
}

.scroll-thumb::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(186, 255, 42, 0.6));
    border-radius: 3px;
}

/* Smaller Desktop - More aggressive scaling */
@media (min-width: 969px) and (max-width: 1800px) {
    .pwb-services-block {

        transform-origin: center top;
        width: 100%;
        overflow: hidden;
    }
}

/* Medium desktop - 0.75x scale */
@media (min-width: 969px) and (max-width: 1400px) {
    .pwb-services-block {
        transform: scale(0.9);
        transform-origin: center top;
    }
}

/* Small desktop - 0.65x scale */
@media (min-width: 969px) and (max-width: 1200px) {
    .pwb-services-block {
        transform: scale(0.65);
        transform-origin: center top;
    }
}

/* Desktop Behavior */
@media (min-width: 969px) {
    .services-cards-wrapper {
        padding: 0 30px;
        gap: 25px;
    }
    
    .service-card {
        flex: 0 0 600px; /* Smaller width for desktop full-width */
        height: 200px; /* Increased to fit content */
        padding: 24px;
        gap: 12px;
    }
    
    .service-icon {
        width: 45px;
        height: 45px;
        border-radius: 12px;
    }
    
    .service-icon img {
        width: 22px;
        height: 22px;
    }
    
    .service-title {
        font-size: 22px;
        line-height: 1.2;
    }
    
    .service-text {
        font-size: 14px;
        line-height: 1.4;
    }
}

/* Tablet */
@media (max-width: 968px) {
    .pwb-services-block {
        padding: 80px 0 40px 0; /* Maintain header spacing */
        min-height: 100vh;
    }
    
    .services-header {
        margin-bottom: 40px;
    }
    

    
    .services-cards-container {
        height: 180px;
        margin-top: 50px;
    }
    
    .services-title-section {
        gap: 40px;
    }
    
    .services-title {
        font-size: 36px;
    }
    
    .services-subtitle {
        font-size: 15px;
    }
    
    .services-cards-wrapper {
        padding: 0 60px;
        gap: 25px;
    }
    
    .service-card {
        flex: 0 0 420px; /* Smaller width for tablet full-width */
        height: 160px; /* Increased to fit content */
        padding: 20px;
        gap: 10px;
    }
    
    .service-icon {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }
    
    .service-icon img {
        width: 18px;
        height: 18px;
    }
    
    .service-title {
        font-size: 19px;
        line-height: 1.2;
    }
    
    .service-text {
        font-size: 13px;
        line-height: 1.4;
    }
    
    .service-text {
        font-size: 13px;
    }
    
    .mobile-scroll-indicator {
        display: block;
        padding: 0 20px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .pwb-services-block {
        padding: 70px 0 30px 0; /* Maintain header spacing */
        min-height: 100vh;
    }
    
    .services-header {
        margin-bottom: 30px;
    }
    

    
    .services-cards-container {
        height: 160px;
        margin-top: 40px;
    }
    
    .services-title-section {
        grid-template-columns: 1fr;
        gap: 15px;
        text-align: left;
    }
    
    .services-subtitle {
        text-align: left;
        order: 2;
        font-size: 14px;
    }
    
    .services-title {
        text-align: left;
        order: 1;
        font-size: 28px;
        line-height: 1.2;
    }
    
    .services-cards-wrapper {
        padding: 0 40px;
        gap: 20px;
    }
    
    .service-card {
        flex: 0 0 350px; /* Smaller width for mobile full-width */
        height: 140px; /* Increased to fit content */
        padding: 18px;
        border-radius: 16px;
        gap: 8px;
    }
    
    .service-icon {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }
    
    .service-icon img {
        width: 16px;
        height: 16px;
    }
    
    .service-title {
        font-size: 16px;
        line-height: 1.2;
    }
    
    .service-text {
        font-size: 12px;
        line-height: 1.4;
    }
    
    .service-text {
        font-size: 12px;
        line-height: 1.4;
    }
    
    .mobile-scroll-indicator {
        padding: 0 16px;
        margin-top: 25px;
    }
    
    .scroll-track {
        height: 5px;
    }
}

/* PWB Advert Item Grid Block Styles */
.pwb-advert-item-grid {
    padding: 80px 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--bg-color);
    position: relative;
    min-height: 400px;
}

[data-theme="light"] .pwb-advert-item-grid {
    background-image: none!important;
}
[data-theme="light"] .pwb-advert-item-grid::before {
    background: white!important;
}

.pwb-advert-item-grid::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(20px);
    z-index: 1;
}

.pwb-advert-item-grid .container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.advert-title {
    color: var(--text-color);
    font-size: 48px;
    font-weight: 700;
    text-align: center;
    margin: 0 0 60px 0;
    font-family: 'Manrope', sans-serif;
}

.advert-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    max-width: 1200px;
    margin: 0 auto;
    grid-auto-rows: min-content;
}

.advert-item {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

[data-theme="light"] .advert-item {
    background: var(--card-bg);
}

.advert-item:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: translateY(-5px);
}

.advert-word {
    color: #d6e1bf;
    font-size: 18px;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
    display: block;
}

[data-theme="light"] .advert-word {
    color: var(--text-secondary);
}

/* Responsive Design */
@media (max-width: 968px) {
    .advert-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
    
    .advert-title {
        font-size: 36px;
        margin-bottom: 40px;
    }
    
    .advert-item {
        padding: 25px 15px;
    }
    
    .advert-word {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .pwb-advert-item-grid {
        padding: 60px 0;
        min-height: 300px;
    }
    
    .advert-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .advert-title {
        font-size: 28px;
        margin-bottom: 30px;
    }
    
    .advert-item {
        padding: 20px 12px;
    }
    
    .advert-word {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .advert-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
        max-width: 300px;
    }
    
    .advert-item {
        padding: 18px 15px;
    }
}

/* PWB CTA Block Styles */
.pwb-cta-block {
    padding: 80px 0;
    text-align: center;
    margin: 40px 0;
    border-radius: 16px;
}

.pwb-cta-block .container-fixed {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

.pwb-cta-block.has-background {
    border: 2px solid;
}

.cta-content {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 100px;
}

.cta-title {
    color: var(--text-color);
    font-size: 36px;
    font-weight: 700;
    margin: 0 0 20px 0;
    line-height: 1.2;
    font-family: 'Manrope', sans-serif;
}

.cta-subtitle {
    color: #999;
    font-size: 18px;
    margin: 0 0 40px 0;
    line-height: 1.5;
    font-family: 'Manrope', sans-serif;
}

.cta-button {
    background: var(--primary-color);
    color: var(--bg-color);
    border: none;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Manrope', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    display: inline-block;
}

.cta-button:hover {
    background: var(--button-hover-bg);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(186, 255, 42, 0.3);
}

.cta-button:active {
    transform: translateY(0);
}

/* Responsive Design */
@media (max-width: 768px) {
    .pwb-cta-block {
        padding: 60px 0;
        margin: 30px 0;
    }
    
    .pwb-cta-block .container-fixed {
        padding: 0 20px;
    }
    
    .cta-title {
        font-size: 28px;
        margin-bottom: 15px;
    }
    
    .cta-subtitle {
        font-size: 16px;
        margin-bottom: 30px;
    }
    
    .cta-button {
        padding: 14px 28px;
        font-size: 15px;
    }

    .cta-content {
        padding: 1rem 1rem;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .pwb-cta-block {
        padding: 40px 0;
        margin: 20px 0;
    }
    
    .pwb-cta-block .container-fixed {
        padding: 0 16px;
    }
    
    .cta-title {
        font-size: 24px;
    }
    
    .cta-subtitle {
        font-size: 14px;
        margin-bottom: 25px;
    }
    
    .cta-button {
        padding: 12px 24px;
        font-size: 14px;
    }

    .cta-content {
        padding: 1rem 1rem;
        text-align: center;
    }

}

/* PWB Results Grid Block Styles */
.pwb-results-grid {
    padding: 80px 0;
    background: var(--bg-color);
}

.pwb-results-grid .container-fixed {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    width: 100%;
}

.results-grid-container {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.results-header {
    text-align: left;
    max-width: 50%;
}

.results-title {
    color: var(--text-color);
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 15px 0;
    line-height: 1.2;
    font-family: 'Manrope', sans-serif;
}

.results-subtitle {
    color: var(--text-color);
    font-size: 16px;
    margin: 0;
    line-height: 1.5;
    font-family: 'Manrope', sans-serif;
    opacity: 0.9;
}

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

.result-box {
    display: flex;
    gap: 15px;
    align-items: center;
    padding: 0;
}

.result-image {
    flex: 0 0 13rem;
    display: flex;
    align-items: center;
}

.result-image img {
    width: 13rem;
    height: 11rem;
    object-fit: cover;
    border-radius: 0.5rem;
}

.result-content {
    flex: 0 0 15rem;
    height: 11rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 1rem;
}

.result-title {
    color: var(--text-color);
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px 0;
    line-height: 1.3;
    font-family: 'Manrope', sans-serif;
}

.result-description {
    color: var(--text-secondary);
    font-size: 14px;
    margin: 0;
    line-height: 1.4;
    font-family: 'Manrope', sans-serif;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .results-header {
        max-width: 100%;
        text-align: center;
    }
    
    .results-title {
        font-size: 28px;
    }
    
    .results-subtitle {
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    .pwb-results-grid {
        padding: 60px 0;
    }
    
    .pwb-results-grid .container-fixed {
        padding: 0 20px;
    }
    
    .results-title {
        font-size: 24px;
        margin-bottom: 12px;
    }
    
    .results-subtitle {
        font-size: 14px;
    }
    
    .results-boxes {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .result-box {
        gap: 15px;
        margin-bottom: 15px;
    }
    
    .result-image {
        flex: 0 0 10rem;
    }
    
    .result-image img {
        width: 10rem;
        height: 8rem;
        border-radius: 0.375rem;
    }
    
    .result-content {
        flex: 0 0 12rem;
        height: 8rem;
        padding-left: 0.75rem;
    }
    
    .result-title {
        font-size: 0.875rem;
        margin-bottom: 0.375rem;
    }
    
    .result-description {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .pwb-results-grid .container-fixed {
        padding: 0 16px;
    }
    
    .result-box {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        margin-bottom: 20px;
    }
    
    .result-image {
        flex: none;
        align-self: center;
        height: auto;
    }
    
    .result-image img {
        width: 100px;
        height: 60px;
    }
    
    .result-content {
        height: auto;
    }
    
    .result-title {
        font-size: 14px;
    }
    
    .result-description {
        font-size: 12px;
    }
}

/* PWB User Testimonial Block Styles */
.pwb-user-testimonial {
    background: var(--bg-color);
}

.pwb-user-testimonial.has-background {
    padding: 60px 0;
    border: 2px solid;
    border-radius: 16px;
    margin: 40px 0;
}

.pwb-user-testimonial.full-width {
    padding: 80px 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    position: relative;
}

.pwb-user-testimonial .container-fixed {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

.testimonial-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.testimonial-title {
    color: var(--text-color);
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin: 0 0 40px 0;
    line-height: 1.2;
    font-family: 'Manrope', sans-serif;
}

.testimonial-slider-container {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.testimonial-slider {
    width: 100%;
    overflow: hidden;
}

.testimonials-track {
    display: flex;
    gap: 20px;
    align-items: start;
    width: max-content;
    transition: transform 0.5s ease-in-out;
}

.testimonials-track .testimonial-item {
    width: 280px;
    min-width: 280px;
    max-width: 280px;
    flex-shrink: 0;
}

.testimonial-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 24px 20px;
    text-align: left;
    transition: transform 0.3s ease;
    min-height: 180px;
    display: flex;
    flex-direction: column;
}

[data-theme="light"] 
.testimonial-item {
    background: rgb(116 113 113 / 5%);
    border: 1px solid rgb(68 66 66 / 10%);
}

.testimonial-item:hover {
    transform: translateY(-2px);
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.author-avatar {
    flex: 0 0 32px;
}

.author-avatar img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid rgba(186, 255, 42, 0.2);
}

.author-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.author-details {
    flex: 1;
}

.author-name {
    color: var(--text-color);
    font-size: 12px;
    font-weight: 600;
    margin: 0;
    font-family: 'Manrope', sans-serif;
    line-height: 1.3;
}

.author-username {
    color: rgba(255, 255, 255, 0.7);
    font-size: 10px;
    font-weight: 400;
    margin: 1px 0 0 0;
    font-family: 'Manrope', sans-serif;
    line-height: 1.2;
}

.author-social {
    flex: 0 0 auto;
}

.author-social svg {
    width: 14px;
    height: 14px;
}

.author-social .social-link {
    display: inline-block;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.author-social .social-link:hover {
    transform: scale(1.1);
}

.testimonial-text {
    color: var(--text-color);
    font-size: 13px;
    font-weight: 400;
    font-style: italic;
    margin: 0;
    line-height: 1.5;
    font-family: 'Manrope', sans-serif;
    flex: 1;
    display: flex;
    align-items: center;
}

.testimonial-arrows {
    display: flex;
    justify-content: center;
    gap: 30rem;
    margin-top: 40px;
}

.testimonial-arrow {
    width: 44px;
    height: 44px;
    border: 2px solid var(--primary-color);
    background: transparent;
    color: var(--primary-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 18px;
    font-weight: bold;
    font-family: 'Manrope', sans-serif;
}

.testimonial-arrow:hover {
    background: var(--primary-color);
    color: var(--bg-color);

}

.testimonial-arrow.prev {
    transform: rotate(180deg);
}

.testimonial-arrow.prev:hover {
    transform: rotate(180deg) scale(1.1);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .testimonial-slide {
        min-width: calc(100vw - 40px);
        padding: 0 20px;
    }
    
    .testimonial-content {
        padding: 20px;
    }
    
    .testimonial-text {
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    .pwb-user-testimonial {
        padding: 60px 0;
    }
    
    .pwb-user-testimonial .container-fixed {
        padding: 0 20px;
    }
    
    .testimonial-title {
        font-size: 28px;
        margin-bottom: 30px;
    }
    
    .testimonial-slide {
        min-width: calc(100vw - 20px);
        padding: 0 10px;
    }
    
    .testimonial-content {
        padding: 18px;
    }
    
    .testimonial-text {
        font-size: 14px;
    }
    
    .testimonial-author {
        margin-bottom: 12px;
    }
    
    .author-name {
        font-size: 13px;
    }
    
    .author-username {
        font-size: 11px;
    }
    
    .testimonial-arrows {
        gap: 15px;
        margin-top: 30px;
    }
    
    /* Mobile testimonial overrides */
    .testimonials-grid {
        padding-left: 5vw;
        padding-right: 5vw;
    }
    
    .testimonials-grid > * {
        width: 260px;
        min-width: 260px;
        max-width: 260px;
    }
    
    .testimonial-arrow {
        width: 36px;
        height: 36px;
        font-size: 14px;
        border-radius: 6px;
    }
}

@media (max-width: 480px) {
    .pwb-user-testimonial .container-fixed {
        padding: 0 16px;
    }
    
    .testimonial-content {
        padding: 16px;
    }
    
    .testimonial-text {
        font-size: 13px;
        line-height: 1.3;
    }
    
    .author-name {
        font-size: 12px;
    }
    
    .author-username {
        font-size: 10px;
    }
    
    .author-avatar {
        flex: 0 0 32px;
    }
    
    .author-avatar img {
        width: 32px;
        height: 32px;
    }
}

/* PWB Team Section */
.pwb-team-section {
    padding: 80px 0;
    background: var(--bg-color);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

.team-member {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 30px 20px;
    text-align: center;
    transition: transform 0.3s ease;
}

.team-member:hover {
    transform: translateY(-5px);
}

.team-member.hidden {
    display: none;
}

.member-photo {
    width: 120px;
    height: 120px;
    margin: 0 auto 20px;
    border-radius: 16px;
    overflow: hidden;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-placeholder {
    font-size: 48px;
    font-weight: bold;
    color: var(--primary-color);
}

.member-name {
    color: var(--text-color);
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px 0;
    font-family: 'Manrope', sans-serif;
}

.member-position {
    color: var(--text-secondary);
    font-size: 14px;
    margin: 0;
    font-family: 'Manrope', sans-serif;
}

.footer-designrush {
    background: #18378f;
    border-radius: 15px;
    padding: 20px;
}

.team-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: nowrap;
    margin-top: 40px;
}

.team-flags {
    display: flex;
    gap: 15px;
    flex-shrink: 0;
}

.flag-item {
    width: 50px;
    height: 35px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flag-item img {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
}

.team-left-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.team-text {
    color: var(--text-color);
    font-size: 12px;
    font-weight: 500;
    font-family: 'Manrope', sans-serif;
    text-align: left;
    max-width: 250px;
}

.team-text p {
    margin: 0;
}

.team-show-more {
    flex-shrink: 0;
}

.show-more-btn {
    background: var(--card-bg);
    color: var(--text-color);
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Manrope', sans-serif;
}

.show-more-btn:hover {
    background: var(--button-hover-bg);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .team-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 25px;
    }
    
    .member-photo {
        width: 100px;
        height: 100px;
    }
    
    .photo-placeholder {
        font-size: 40px;
    }
}

@media (max-width: 968px) {
    .pwb-team-section {
        padding: 60px 0;
    }
    
    .team-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-bottom: 40px;
    }
    
    .team-member {
        padding: 25px 15px;
    }
    
    .member-photo {
        width: 80px;
        height: 80px;
        margin-bottom: 15px;
    }
    
    .photo-placeholder {
        font-size: 32px;
    }
    
    .member-name {
        font-size: 16px;
    }
    
    .member-position {
        font-size: 13px;
    }
    
    .team-text {
        font-size: 16px;
    }
    
    .team-footer {
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .flag-item {
        width: 40px;
        height: 28px;
    }
    
    .flag-item img {
        width: 18px;
        height: 12px;
    }
    
    .team-left-content {
        order: 1;
        flex-basis: 100%;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .team-text {
        font-size: 11px;
        max-width: none;
        text-align: center;
    }
    
    .team-show-more {
        order: 2;
    }
}

@media (max-width: 768px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .team-member {
        padding: 20px 10px;
    }
    
    .member-photo {
        width: 70px;
        height: 70px;
        margin-bottom: 12px;
    }
    
    .photo-placeholder {
        font-size: 28px;
    }
    
    .member-name {
        font-size: 14px;
    }
    
    .member-position {
        font-size: 12px;
    }
    
    .team-footer {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }
    
    .team-left-content {
        order: 1;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    
    .team-text {
        font-size: 10px;
        text-align: center;
        max-width: none;
    }
    
    .team-flags {
        justify-content: center;
    }
    
    .team-show-more {
        order: 2;
    }
    
    .flag-item {
        width: 35px;
        height: 25px;
    }
    
    .flag-item img {
        width: 16px;
        height: 11px;
    }
}

@media (max-width: 480px) {
    .team-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .team-member {
        padding: 15px;
    }
    
    .show-more-btn {
        padding: 10px 20px;
        font-size: 14px;
    }
}

/* PWB FAQ Block Styles */
.pwb-faq-block {
    padding: 80px 0;
}

.faq-container {
    max-width: 1200px;
    margin: 0 auto;
}

.faq-columns-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.faq-columns-one {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.faq-item {
    border: 1px solid #252525;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;

}

.faq-item.active {
    border-color: var(--primary-color);
}

.faq-question {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.faq-question:hover {
    background: var(--card-bg);
}

.faq-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    filter: grayscale(1);
}

.faq-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.faq-question-text {
    flex: 1;
    margin: 0;
    color: var(--text-color);
    font-size: 18px;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
}

.faq-arrow {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--primary-color);
    transition: transform 0.3s ease;
}

.faq-arrow svg {
    width: 100%;
    height: 100%;
}

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

.faq-answer {
    padding: 0 20px 20px 20px;
    border-top: 1px solid #252525;
    background: var(--card-bg);
}

.faq-answer p {
    margin: 15px 0 0 0;
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.6;
    font-family: 'Manrope', sans-serif;
}

/* Responsive Design */
@media (max-width: 768px) {
    .pwb-faq-block {
        padding: 60px 0;
    }
    
    .faq-columns-two {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .faq-question {
        padding: 15px;
        gap: 12px;
    }
    
    .faq-question-text {
        font-size: 16px;
    }
    
    .faq-answer {
        padding: 0 15px 15px 15px;
    }
    
    .faq-answer p {
        font-size: 14px;
    }
    
    .faq-icon {
        width: 20px;
        height: 20px;
    }
}

/* PWB Contact Image Block Styles */
.pwb-contact-image-block {
    width: 100%;
    margin: 0;
    padding: 0;
}

.pwb-contact-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .pwb-contact-image {
        height: auto;
        min-height: 200px;
    }
}

@media (max-width: 480px) {
    .pwb-contact-image {
        min-height: 150px;
    }
}

/* PWB Office Location Block */
.office-location-item {
    margin-bottom: 1rem;
}

.office-location-item:last-child {
    margin-bottom: 0;
}

.office-location-item .office-flag {
    width: 20px;
    height: 14px;
    object-fit: cover;
    margin-right: 8px;
    vertical-align: middle;
}

.office-location-item .office-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.office-location-item .office-country {
    font-weight: 600;
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 4px;
}

.office-location-item .office-address {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.4;
}

/* When flag is present, adjust layout */
.office-location-item:has(.office-flag) .office-details {
    margin-left: 28px;
    margin-top: -18px;
}

/* Fallback for browsers that don't support :has() */
.office-location-item .office-flag + .office-details {
    margin-left: 28px;
    margin-top: -18px;
}

/* Editor preview styles */
.pwb-office-location-preview {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.pwb-office-location-preview .office-flag {
    border-radius: 2px;
}

/* PWB Placeholder Block Styles */
.pwb-placeholder-block {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e0e0e0;
    border: 2px dashed #999;
    border-radius: 8px;
    margin: 2rem 0;
    position: relative;
}

.pwb-placeholder-content {
    text-align: center;
    padding: 20px;
    max-width: 500px;
}

.pwb-placeholder-message {
    margin: 0;
    color: #666;
    font-size: 16px;
    font-weight: 500;
    font-family: 'Manrope', sans-serif;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .pwb-placeholder-block {
        margin: 1rem 0;
    }
    
    .pwb-placeholder-content {
        padding: 15px;
    }
    
    .pwb-placeholder-message {
        font-size: 14px;
    }
}

/* PWB Content Box Style 1 */
.pwb-content-box-style-1 {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin: 20px 0;
    background-color: var(--bg-color) ;
    overflow: hidden;
    min-height: 20rem;
}

.pwb-content-box-style-1 .content-box-image {
    margin-bottom: 15px;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

.pwb-content-box-style-1 .content-box-image img {
    width: 100%;
    height: auto;
    max-height: 250px;
    object-fit: cover;
    display: block;
}

.pwb-content-box-style-1 .content-box-text {
    color: var(--text-muted);
    padding: 2rem;
    text-align: center;
}

.pwb-content-box-style-1 .content-box-title {
    color: var(--text-color);
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 12px 0;
    font-family: 'Manrope', sans-serif;
}

.pwb-content-box-style-1 .content-box-text p {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 768px) {
    .pwb-content-box-style-1 {
        padding: 15px;
    }

    .pwb-content-box-style-1 .content-box-image {
        margin-bottom: 12px;
    }

    .pwb-content-box-style-1 .content-box-text {
        padding: 0;
    }

    .pwb-content-box-style-1 .content-box-title {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .pwb-content-box-style-1 .content-box-text p {
        font-size: 13px;
    }
}

/* PWB Content Box Style 2 */
.pwb-content-box-style-2 {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 40px 20px;
    margin: 20px 0;
    background-color: var(--bg-color) ;
    text-align: center;
    color: var(--text-color);
    min-height: 300px;
}

.pwb-content-box-style-2 .content-box-icon {
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
}

.pwb-content-box-style-2 .content-box-icon img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.pwb-content-box-style-2 .content-box-pill {
    display: inline-block;
    background-color: var(--border-color);
    color: var(--text-color);
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 15px;
    font-family: 'Manrope', sans-serif;
}

.pwb-content-box-style-2 .content-box-pill span {
    color: var(--text-color);
}

.pwb-content-box-style-2 .content-box-description {
    color: var(--text-color);
}

.pwb-content-box-style-2 .content-box-description p {
    color: var(--text-color);
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 768px) {
    .pwb-content-box-style-2 {
        padding: 15px;
    }

    .pwb-content-box-style-2 .content-box-icon img {
        width: 40px;
        height: 40px;
    }

    .pwb-content-box-style-2 .content-box-pill {
        font-size: 12px;
        padding: 6px 16px;
    }

    .pwb-content-box-style-2 .content-box-description p {
        font-size: 13px;
    }
}

/* PWB Content Contrast Boxes Style 3 */
.pwb-content-contrast-boxes-style-3 {
    margin: 0;
    padding: 0 20px 0 0;
    margin-top: 3rem;
}

.contrast-boxes-container {
    display: flex;
    gap: 20px;
    min-height: 400px;
}

.contrast-box-column.contrast-column-1 {
    flex: 0 0 33%;
}

.contrast-box-column.contrast-column-2 {
    flex: 0 0 67%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contrast-box {
    padding: 30px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.contrast-box-1 {
    background-color: var(--primary-color);
    color: var(--bg-color);
    height: 100%;
}

.contrast-box-2,
.contrast-box-3 {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    flex: 1;
}

.contrast-box-icon {
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-start;
}

.contrast-box-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.contrast-box-title {
    font-size: 22px;
    font-weight: bold;
    margin: 0 0 16px 0;
    font-family: 'Manrope', sans-serif;
}

.contrast-box-1 .contrast-box-title {
    color: var(--bg-color);
}

.contrast-box-2 .contrast-box-title,
.contrast-box-3 .contrast-box-title {
    color: var(--primary-color);
}

.contrast-box-text {
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 20px 0;
    flex-grow: 1;
}

.contrast-box-1 .contrast-box-text {
    color: var(--bg-color);
}

.contrast-box-2 .contrast-box-text,
.contrast-box-3 .contrast-box-text {
    color: var(--text-muted);
}

.contrast-box-image {
    margin-top: auto;
    border-radius: 8px;
    overflow: hidden;
}

.contrast-box-image img {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: cover;
    display: block;
}

@media (max-width: 1024px) {
    .contrast-boxes-container {
        flex-direction: column;
        gap: 20px;
    }

    .contrast-box-column.contrast-column-1,
    .contrast-box-column.contrast-column-2 {
        flex: 1 1 auto;
    }

    .contrast-box-column.contrast-column-2 {
        flex-direction: row;
        gap: 20px;
    }

    .contrast-box-2,
    .contrast-box-3 {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .pwb-content-contrast-boxes-style-3 {
        margin: 30px 0;
        padding: 0 15px;
    }

    .contrast-boxes-container {
        flex-direction: column;
        gap: 15px;
        min-height: auto;
    }

    .contrast-box-column.contrast-column-2 {
        flex-direction: column;
        gap: 15px;
    }

    .contrast-box {
        padding: 20px;
    }

    .contrast-box-title {
        font-size: 18px;
        margin-bottom: 12px;
    }

    .contrast-box-text {
        font-size: 14px;
        margin-bottom: 15px;
    }

    .contrast-box-icon img {
        width: 40px;
        height: 40px;
    }
}

/* PWB Content Box Style 4 */
.pwb-content-box-style-4 {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 30px;
    margin: 20px 0;
    background-color: var(--card-bg);
    text-align: center;
    color: var(--text-muted);
}

.pwb-content-box-style-4 .content-box-icon {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.pwb-content-box-style-4 .content-box-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;

}

.pwb-content-box-style-4 .content-box-title {
    color: var(--primary-color);
    font-size: 20px;
    font-weight: bold;
    margin: 0 0 16px 0;
    font-family: 'Manrope', sans-serif;
}

.pwb-content-box-style-4 .content-box-text {
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 768px) {
    .pwb-content-box-style-4 {
        padding: 20px;
    }

    .pwb-content-box-style-4 .content-box-icon img {
        width: 50px;
        height: 50px;
    }

    .pwb-content-box-style-4 .content-box-title {
        font-size: 18px;
        margin-bottom: 14px;
    }

    .pwb-content-box-style-4 .content-box-text {
        font-size: 14px;
    }
}

/* PWB Content Box Style 4 Glow Styles */
.pwb-content-box-style-4-glow {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 30px;
    margin: 20px 0;
    background-color: var(--card-bg);
    text-align: center;
    color: var(--text-color);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 360px;
}

.pwb-content-box-style-4-glow .glow-overlay {
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(186, 255, 42, 0.15) 100%);
    border-radius: 0 12px 12px 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.pwb-content-box-style-4-glow:hover .glow-overlay {
    opacity: 1;
}

.pwb-content-box-style-4-glow .content-box-icon {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.pwb-content-box-style-4-glow .content-box-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.pwb-content-box-style-4-glow .content-box-title {
    color: var(--text-color);
    font-size: 20px;
    font-weight: bold;
    margin: 0 0 16px 0;
    font-family: 'Manrope', sans-serif;
    position: relative;
    z-index: 2;
}

.pwb-content-box-style-4-glow .content-box-text {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    position: relative;
    z-index: 2;
}

@media (max-width: 768px) {
    .pwb-content-box-style-4-glow {
        padding: 20px;
    }

    .pwb-content-box-style-4-glow .content-box-icon img {
        width: 50px;
        height: 50px;
    }

    .pwb-content-box-style-4-glow .content-box-title {
        font-size: 18px;
        margin-bottom: 14px;
    }

    .pwb-content-box-style-4-glow .content-box-text {
        font-size: 14px;
    }
}

/* PWB Title Bright Styles */
.pwb-title-bright {
    margin: 40px 0;
    padding: 0 20px;
}

.title-bright-container {
    display: flex;
    align-items: center;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.title-bright-left {
    flex: 0 0 50%;
    height: 100px;
    border-radius: 20px;
    background-color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 20px;
    position: relative;
}

.title-bright-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.title-bright-icon img {
    width: 90px;
    height: 90px;
    object-fit: contain;
}

.title-bright-right {
    flex: 1;
}

.title-bright-text {
    color: var(--primary-color);
    font-size: 36px;
    font-weight: bold;
    margin: 0;
    font-family: 'Manrope', sans-serif;
    line-height: 1.2;
}

@media (max-width: 1024px) {
    .title-bright-container {
        gap: 25px;
    }

    .title-bright-left {
        flex: 0 0 40%;
        height: 85px;
        padding-right: 15px;
    }

    .title-bright-icon img {
        width: 75px;
        height: 75px;
    }

    .title-bright-text {
        font-size: 32px;
    }
}

@media (max-width: 768px) {
    .pwb-title-bright {
        margin: 30px 0;
        padding: 0 15px;
    }

    .title-bright-container {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .title-bright-left {
        flex: none;
        width: 100%;
        height: 80px;
        justify-content: center;
        padding-right: 0;
        margin: 0 auto;
    }

    .title-bright-icon img {
        width: 65px;
        height: 65px;
    }

    .title-bright-right {
        flex: none;
    }

    .title-bright-text {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .title-bright-left {
        width: 100%;
        height: 70px;
    }

    .title-bright-icon img {
        width: 55px;
        height: 55px;
    }

    .title-bright-text {
        font-size: 24px;
    }
}

/* PWB Content Box Style 5 Styles */
.pwb-content-box-style-5 {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin: 20px 0;
    background-color: var(--bg-color) ;
    overflow: hidden;
}

.content-box-style-5-container {
    display: flex;
    align-items: stretch;
    min-height: 200px;
}

.content-box-image-left {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.content-box-image-left img {
    width: 60%;
    height: 60%;
    object-fit: contain;
    display: block;
}

.content-box-image-left .image-placeholder {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #333;
    color: #999;
    font-size: 14px;
}

.content-box-text-right {
    width: 70%;
    padding: 0 20px 0 0;
    display: flex;
    align-items: center;
}

.content-box-text-right p {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 768px) {
    .content-box-style-5-container {
        flex-direction: column;
        min-height: auto;
    }

    .content-box-image-left {
        width: 100%;
        min-height: unset!important;

    }

    .content-box-image-left .image-placeholder {
        height: 180px;
    }

    .content-box-text-right {
        width: 100%;
        padding: 20px;
    }

    .content-box-text-right p {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .content-box-image-left {
        min-height: 150px;
    }

    .content-box-image-left .image-placeholder {
        height: 150px;
    }

    .content-box-text-right {
        padding: 15px;
    }

    .content-box-text-right p {
        font-size: 13px;
    }
}

/* PWB Social Media Icons Display */
.pwb-social-media-icons {
    padding: 40px 20px;
    margin: 30px 0;
    text-align: center;
}

.pwb-social-media-icons .social-icons-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--icon-spacing, 30px);
    flex-wrap: wrap;
}

.pwb-social-media-icons .social-icon {
    width: var(--icon-size, 48px);
    height: var(--icon-size, 48px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    position: relative;
}

.pwb-social-media-icons .social-icon:hover {
    transform: translateY(-2px);
    opacity: 0.8;
}

.pwb-social-media-icons .social-icon.social-facebook,
.pwb-social-media-icons .social-icon.social-twitter,
.pwb-social-media-icons .social-icon.social-reddit,
.pwb-social-media-icons .social-icon.social-discord,
.pwb-social-media-icons .social-icon.social-instagram,
.pwb-social-media-icons .social-icon.social-tiktok,
.pwb-social-media-icons .social-icon.social-linkedin,
.pwb-social-media-icons .social-icon.social-medium {
    background-color: #666;
}

.pwb-social-media-icons .social-icon::before {
    content: '';
    position: absolute;
    width: 60%;
    height: 60%;
    background: #fff;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

.pwb-social-media-icons .social-icon.social-facebook::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E");
}

.pwb-social-media-icons .social-icon.social-twitter::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
}

.pwb-social-media-icons .social-icon.social-reddit::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z'/%3E%3C/svg%3E");
}

.pwb-social-media-icons .social-icon.social-discord::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419-.0002 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1568 2.4189Z'/%3E%3C/svg%3E");
}

.pwb-social-media-icons .social-icon.social-instagram::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z'/%3E%3C/svg%3E");
}

.pwb-social-media-icons .social-icon.social-tiktok::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E");
}

.pwb-social-media-icons .social-icon.social-linkedin::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E");
}

.pwb-social-media-icons .social-icon.social-medium::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.54 12a6.8 6.8 0 01-6.77 6.82A6.8 6.8 0 010 12a6.8 6.8 0 016.77-6.82A6.8 6.8 0 0113.54 12zM20.96 12c0 3.54-1.51 6.42-3.38 6.42-1.87 0-3.39-2.88-3.39-6.42s1.52-6.42 3.39-6.42 3.38 2.88 3.38 6.42M24 12c0 3.17-.53 5.75-1.19 5.75-.66 0-1.19-2.58-1.19-5.75s.53-5.75 1.19-5.75C23.47 6.25 24 8.83 24 12z'/%3E%3C/svg%3E");
}

.pwb-social-media-icons .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 768px) {
    .pwb-social-media-icons {
        padding: 30px 15px;
    }
    
    .pwb-social-media-icons .social-icons-list {
        gap: calc(var(--icon-spacing, 30px) * 0.8);
    }
    
    .pwb-social-media-icons .social-icon {
        width: calc(var(--icon-size, 48px) * 0.85);
        height: calc(var(--icon-size, 48px) * 0.85);
    }
}

/* PWB Aimed at Pills */
.pwb-aimed-at-pills {
    padding: 20px;
    text-align: center;
    margin-top: 3rem;
}

.pills-container {
    max-width: 1200px;
    margin: 0 auto;
}

.pills-grid-new {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
}

.pills-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* Row 1: 4 pills */
.pills-row-1 {
    justify-content: center;
}

/* Row 2: 5 elements (2 + logo + 2) */
.pills-row-2 {
    justify-content: center;
}

/* Row 3: 3 pills */
.pills-row-3 {
    justify-content: center;
}

.pill-item {
    background-color: transparent;
    border: none;
    border-radius: 15px;
    padding: 2px;
    color: #fff;
    font-weight: 500;
    font-size: 16px;
    text-decoration: none;
    display: inline-block;
    min-width: 190px; /* 220px + 4px padding */
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;
    overflow: visible;
    background-image: linear-gradient(90deg,#313131,#131313);
}

.pill-item:hover,
.pill-link:hover {
    text-decoration: none;
    color: #fff;
}

/* Background glow layer */
.pill-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle 120px at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--primary-color) 0%, transparent 70%);
    border-radius: 15px;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1;
    pointer-events: none;
}

/* Content layer - actual pill */
.pill-item::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background-color: #0b0b0b;
    border: 2px solid var(--border-color);
    border-radius: 13px;
    z-index: 2;
    pointer-events: none;
}

.pill-item:hover::before {
    opacity: 0.8;
}

.pill-item span {
    position: relative;
    z-index: 3;
    display: block;
    padding: 20px 24px;
}

/* Logo pill - no background or hover effects */
.pill-item.pill-logo {
    background-color: transparent;
    border: none;
    padding: 12px;
}

.pill-item.pill-logo::before {
    display: none;
}

.pill-item.pill-logo::after {
    display: none;
}

.pill-item.pill-logo:hover::before {
    display: none;
}

.pill-item.pill-logo img {
    max-height: 40px;
    width: auto;
    height: auto;
    position: relative;
    z-index: 3;
}

/* Empty pill placeholders */
.pill-item.pill-empty {
    opacity: 0;
    pointer-events: none;
    min-width: 224px; /* Same width as regular pills */
}

/* Logo placeholder when no logo is set */
.logo-placeholder {
    background-color: transparent;
    border: 2px dashed #666;
    color: #666;
    padding: 12px 20px;
    border-radius: 25px;
    font-size: 12px;
    font-style: italic;
    min-width: 224px;
    text-align: center;
}



@media (max-width: 992px) {
    .pills-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
    
    .pill-item {
        min-width: 104px; /* 100px + 4px padding */
        font-size: 13px;
    }
    
    .pill-item span {
        padding: 10px 20px;
    }
    
    /* Adjust zig-zag for 3-column layout */
    .pill-item:nth-child(8n+5),
    .pill-item:nth-child(8n+6),
    .pill-item:nth-child(8n+7),
    .pill-item:nth-child(8n+8) {
        margin-left: 0;
    }
    
    .pill-item:nth-child(6n+4),
    .pill-item:nth-child(6n+5),
    .pill-item:nth-child(6n+6) {
        margin-left: 20px;
    }
    
    .pill-item.pill-logo img {
        max-height: 35px;
    }
}

@media (max-width: 768px) {
    .pills-grid-new {
        gap: 20px;
    }
    
    .pills-row {
        gap: 12px;
    }
    
    .pill-item {
        min-width: 84px; /* 80px + 4px padding */
        font-size: 12px;
    }
    
    .pill-item span {
        padding: 8px 16px;
    }
    
    .pill-item.pill-logo img {
        max-height: 30px;
    }
    
    /* Row 2 on mobile: 2 + logo + 2 in a row */
    .pills-row-2 {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .pills-grid-new {
        gap: 15px;
    }
    
    .pills-row {
        gap: 8px;
        flex-wrap: wrap;
    }
    
    .pill-item {
        max-width: 160px; /* Smaller for mobile */
        margin: 0;
        font-size: 11px;
    }
    
    .pill-item span {
        padding: 6px 12px;
    }
    
    /* Stack rows vertically on very small screens */
    .pills-row-1,
    .pills-row-2,
    .pills-row-3 {
        justify-content: center;
    }
    
    .pill-item.pill-logo img {
        max-height: 25px;
    }
    
    .pill-item.pill-empty {
        min-width: 160px; /* Match mobile pill width */
    }
    
    .logo-placeholder {
        min-width: 160px;
        font-size: 10px;
        padding: 6px 12px;
    }
}

/* PWB Stages Slider - Horizontal Scroll Lock Wrapper */
.pwb-stages-scroll-wrapper {
    height: 100vh;
    position: relative;
    overflow: hidden;
    will-change: transform;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    left: 0;
    right: 0;
}

.pwb-stages-slider {
    position: relative;
    background: transparent;
    padding: 80px 0 20px 0;
    margin: 40px 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    height: 100%;
    display: flex;
    flex-direction: column;
    will-change: transform;
    overflow: hidden;
}

/* Stages Header */
.stages-header {
    position: relative;
    z-index: 10;
    background: transparent;
    padding: 0;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Stages Title Section - Same as Services */
.stages-title-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-bottom: 0;
    min-height: 80px;
}

.stages-title-section .stages-subtitle {
    order: 2;
}

.stages-title-section .stages-title {
    order: 1;
}

.stages-subtitle {
    color: var(--text-muted);
    font-size: 16px;
    font-weight: 400;
    margin: 0;
    letter-spacing: 0.5px;
    font-family: 'Manrope', sans-serif;
    text-align: left;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.stages-title {
    color: var(--text-color);
    font-size: 42px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    font-family: 'Manrope', sans-serif;
    text-align: left;
    transition: color 0.3s ease;
}

/* Progress Line - Green Bar */
.stages-progress-line {
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
    margin-top: 30px;
    margin-bottom: 60px;
}

/* When progress bar is hidden, adjust spacing */
.stages-header:not(:has(.stages-progress-line)) {
    margin-bottom: 90px;
}

.stages-progress-line .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-color));
    border-radius: 2px;
    width: 0%;
    position: relative;
    box-shadow: 0 0 20px rgba(186, 255, 42, 0.3);
    will-change: width;
}

.stages-progress-line .progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(186, 255, 42, 0.6));
    opacity: 0.8;
    animation: progressGlow 2s ease-in-out infinite;
}

/* Cards Container - Transform-based horizontal scroll */
.stages-cards-container {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    overflow: hidden;
    height: 250px;
    display: flex;
    align-items: center;
}

/* Mobile: Show horizontal scroll instead of scroll lock */
@media (max-width: 768px) {
    .stages-cards-container {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #333 transparent;
    }
    
    .stages-cards-container::-webkit-scrollbar {
        height: 8px;
        display: block;
    }
    
    .stages-cards-container::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.1);
        border-radius: 4px;
    }
    
    .stages-cards-container::-webkit-scrollbar-thumb {
        background: #333;
        border-radius: 4px;
    }
    
    .stages-cards-container::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
    
    /* Hide progress bar on mobile since we have native scroll bar */
    .stages-progress-line {
        display: none;
    }
    
    /* Reduce top margin since no progress bar */
    .stages-cards-container {
        margin-top: 30px;
    }
}

/* Cards Wrapper - GSAP will transform this */
.stages-cards-wrapper {
    display: flex;
    gap: 20px;
    padding: 0 40px;
    width: max-content;
    height: 100%;
    align-items: center;
    will-change: transform;
}

/* Stage Cards - Horizontal layout */
.stage-card {
    flex: 0 0 500px;
    background-color: var(--card-bg);
    border-radius: 8px;
    display: flex;
    align-items: center;
    height: 220px;
    transition: all 0.3s ease;
    overflow: hidden;
    padding: 20px;
}

.stage-circles {
    width: 35%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}

/* Decorative circles with decreasing opacity */
.circle-decoration {
    position: absolute;
    border-radius: 50%;
    border: 2px solid #333;
    background-color: var(--border-color);
    pointer-events: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.circle-dec-1 {
    width: 130px;
    height: 130px;
    opacity: 0.3;
    z-index: 1;
}

.circle-dec-2 {
    width: 150px;
    height: 150px;
    opacity: 0.2;
    z-index: 0;
}

.circle-dec-3 {
    width: 170px;
    height: 170px;
    opacity: 0.15;
    z-index: 0;
}

.circle-dec-4 {
    width: 190px;
    height: 190px;
    opacity: 0.1;
    z-index: 0;
}

.circle-outer {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid #333;
    background-color: var(--border-color)  ;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 5;
}

.circle-middle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 2px solid #333;
    background-color: var(--border-color);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 6;
}

.circle-inner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--card-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 7;
}

.stage-number {
    color: var(--text-color);
    font-size: 18px;
    font-weight: bold;
    font-family: 'Manrope', sans-serif;
}

.stage-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.stage-content {
    width: 65%;
    padding: 0 0 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stage-title {
    color: var(--primary-color);
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 8px 0;
    line-height: 1.2;
    font-family: 'Manrope', sans-serif;
}

.stage-text {
    color: var(--text-color);
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    font-family: 'Manrope', sans-serif;
}

/* Mobile Scroll Indicator */
.stages-cards-container .mobile-scroll-indicator {
    display: none;
    margin: 30px auto 0 auto;
    max-width: 1200px;
    padding: 0 24px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stages-cards-container .mobile-scroll-indicator.active {
    opacity: 1;
}

.stages-cards-container .scroll-track {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}

.stages-cards-container .scroll-thumb {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-color));
    border-radius: 3px;
    width: 30%;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 0 15px rgba(186, 255, 42, 0.4);
}

.stages-cards-container .scroll-thumb::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(186, 255, 42, 0.6));
    border-radius: 3px;
}

/* Desktop and larger screens */
@media (min-width: 969px) {
    .stages-cards-wrapper {
        padding: 0 80px;
    }
    
    .stage-card {
        flex: 0 0 600px;
        height: 280px;
        padding: 30px;
    }
    
    .stages-title-section {
        gap: 80px;
    }
    
    .stages-title {
        font-size: 42px;
    }
    
    .stages-subtitle {
        font-size: 18px;
    }
    
    .circle-outer {
        width: 120px;
        height: 120px;
    }
    
    .circle-middle {
        width: 85px;
        height: 85px;
    }
    
    .circle-inner {
        width: 50px;
        height: 50px;
    }
    
    .circle-dec-1 {
        width: 150px;
        height: 150px;
    }
    
    .circle-dec-2 {
        width: 170px;
        height: 170px;
    }
    
    .circle-dec-3 {
        width: 190px;
        height: 190px;
    }
    
    .circle-dec-4 {
        width: 210px;
        height: 210px;
    }
    
    .stage-number {
        font-size: 20px;
    }
    
    .stage-icon {
        width: 28px;
        height: 28px;
    }
    
    .stage-title {
        font-size: 22px;
    }
    
    .stage-text {
        font-size: 16px;
    }
}

@media (max-width: 968px) {
    .pwb-stages-slider {
        padding: 60px 0 20px 0;
    }
    
    .stages-header {
        padding: 0 20px;
    }
    
    .stages-title-section {
        gap: 40px;
    }
    
    .stages-title {
        font-size: 42px;
    }
    
    .stages-subtitle {
        font-size: 15px;
    }
    
    .stages-cards-container {
        height: 260px;
    }
    
    .stages-cards-wrapper {
        padding: 0 30px;
    }
    
    .stage-card {
        flex: 0 0 480px;
        height: 220px;
        padding: 25px;
    }
    
    .circle-outer {
        width: 90px;
        height: 90px;
    }
    
    .circle-middle {
        width: 63px;
        height: 63px;
    }
    
    .circle-inner {
        width: 36px;
        height: 36px;
    }
    
    .circle-dec-1 {
        width: 110px;
        height: 110px;
    }
    
    .circle-dec-2 {
        width: 130px;
        height: 130px;
    }
    
    .circle-dec-3 {
        width: 150px;
        height: 150px;
    }
    
    .circle-dec-4 {
        width: 170px;
        height: 170px;
    }
    
    .stage-number {
        font-size: 16px;
    }
    
    .stage-icon {
        width: 22px;
        height: 22px;
    }
    
    .stage-title {
        font-size: 18px;
    }
    
    .stage-text {
        font-size: 15px;
    }
    
    .stages-cards-container .mobile-scroll-indicator {
        display: block;
    }
}

@media (max-width: 768px) {
    .pwb-stages-slider {
        padding: 40px 0 20px 0;
    }
    
    .stages-header {
        padding: 0 15px;
    }
    
    .stages-title-section {
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center;
        align-items: flex-start;
        min-height: auto;
    }
    
    .stages-title {
        font-size: 32px;
    }
    
    .stages-subtitle {
        font-size: 14px;
    }
    
    .stages-cards-container {
        height: 240px;
        margin-top: 30px;
    }
    
    .stages-cards-wrapper {
        padding: 0 20px;
    }
    
    .stage-card {
        flex: 0 0 320px;
        height: 200px;
        padding: 20px;
        flex-direction: column;
        text-align: center;
    }
    
    .stage-circles {
        width: 100%;
        margin-bottom: 15px;
    }
    
    .stage-content {
        width: 100%;
        padding: 0;
        text-align: center;
    }
    
    .circle-outer {
        width: 70px;
        height: 70px;
    }
    
    .circle-middle {
        width: 50px;
        height: 50px;
    }
    
    .circle-inner {
        width: 28px;
        height: 28px;
    }
    
    /* Hide decorative circles on mobile to reduce clutter */
    .circle-decoration {
        display: none;
    }
    
    .stage-number {
        font-size: 14px;
    }
    
    .stage-icon {
        width: 18px;
        height: 18px;
    }
    
    .stage-title {
        font-size: 16px;
        margin-bottom: 6px;
    }
    
    .stage-text {
        font-size: 13px;
    }
    
    .stages-cards-container .mobile-scroll-indicator {
        display: block;
        margin-top: 20px;
        padding: 0 15px;
    }
}

/* PWB Client Relations Block */
.pwb-client-relations {
    padding: 60px 0;
    background: var(--bg-color);
}

.client-relations-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    align-items: center;
    justify-items: center;
}

.client-relation-item-container {
    background-image: linear-gradient(90deg, #313131b8, #131313b8);
    padding: 1px;
    overflow: hidden;
    border-radius: 12px;
}

.client-relation-item {
    background: #080808;
    border-radius: 12px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    width: 100%;
    transition: all 0.3s ease;
}

.client-relation-item:hover {
    border-color: var(--primary-color, var(--primary-color));
 
}

.client-relation-logo {
    max-width: 100%;
    max-height: 60px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Grid responsive behavior */
@media (max-width: 1200px) {
    .client-relations-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 968px) {
    .client-relations-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    
    .client-relation-item {
        padding: 16px;
        min-height: 70px;
    }
    
    .client-relation-logo {
        max-height: 50px;
    }
}

@media (max-width: 768px) {
    .client-relations-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .pwb-client-relations {
        padding: 40px 0;
    }
}

@media (max-width: 480px) {
    .client-relations-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .client-relation-item {
        padding: 12px;
        min-height: 60px;
    }
    
    .client-relation-logo {
        max-height: 40px;
    }
}

/* PWB Awards Block */
.pwb-awards-block {
    position: relative;
    min-height: 400px;
    background-size: contain    ;
    background-position: center;
    background-repeat: no-repeat;
    padding: 80px 0;
    display: flex;
    align-items: center;
}

.awards-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.awards-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    width: 100%;
}

.awards-images {
    display: flex;
    gap: 30px;
    align-items: center;
}

.award-item {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.award-item:hover {
    transform: scale(1.05);
    border-color: var(--primary-color, var(--primary-color));
}

.award-image {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.awards-title {

    padding: 30px 40px;
    border-radius: 16px;
    backdrop-filter: blur(10px);
}

.awards-title h2 {
    color: var(--bg-color)!important;
    font-size: 36px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

@media (max-width: 1024px) {
    .awards-content {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }
    
    .awards-title h2 {
        font-size: 28px;
    }
}

@media (max-width: 768px) {
    .pwb-awards-block {
        min-height: 300px;
        padding: 60px 0;
    }
    
    .awards-images {
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .award-item {
        width: 100px;
        height: 100px;
        padding: 15px;
    }
    
    .award-image {
        width: 70px;
        height: 70px;
    }
    
    .awards-title {
        padding: 20px 30px;
    }
    
    .awards-title h2 {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .awards-images {
        gap: 15px;
    }
    
    .award-item {
        width: 80px;
        height: 80px;
        padding: 10px;
    }
    
    .award-image {
        width: 60px;
        height: 60px;
    }
    
    .awards-title {
        padding: 15px 20px;
    }
    
    .awards-title h2 {
        font-size: 20px;
    }
}

/* PWB Industry Slider Block */
.pwb-industry-slider {
    padding: 80px 0;
    background: var(--bg-color);
}

.industry-slider-container {
    position: relative;
    overflow: hidden;
}

.industry-cards-track {
    display: flex;
    gap: 20px;
    transition: transform 0.5s ease;
    align-items: stretch;
}

.industry-card {
    min-width: 300px;
    background: var(--card-bg)!important;
    border: 1px solid #333;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
    --mouse-x: 50%;
    --mouse-y: 50%;
}

.industry-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        200px circle at var(--mouse-x) var(--mouse-y),
        rgba(186, 255, 42, 0.1),
        transparent 40%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.industry-card:hover::before {
    opacity: 1;
}

.industry-card:hover {
    transform: translateY(-5px);
    border-color: rgba(186, 255, 42, 0.3);
}

.industry-card-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.industry-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.industry-card:hover .industry-card-image img {
    transform: scale(1.05);
}

.industry-card-content {
    padding: 30px;
    position: relative;
    z-index: 2;
    text-align: center;
}

.industry-card-title {
    color: var(--text-color);
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 15px 0;
    line-height: 1.3;
}

.industry-card-text {
    color: var(--text-muted)!important;
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 25px 0;
    min-height: 150px;
}

.industry-card-btn {
    display: inline-block;
    color: var(--primary-color, var(--primary-color));
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    position: relative;
    border: 1px solid #2e2e2e;
    padding: 1rem 2rem;
    border-radius: 15px;
}

.industry-card-btn::after {
    content: '→';
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.industry-card-btn:hover {
    color: var(--text-color);
}

.industry-card-btn:hover::after {
    transform: translateX(5px);
}

.industry-slider-controls {
    display: flex;
    justify-content: center;
    gap: 30rem;
    margin-top: 50px;
}

.industry-slider-arrow {
    width: 50px;
    height: 50px;
    border: 2px solid var(--primary-color, var(--primary-color));
    background: transparent;
    color: var(--primary-color, var(--primary-color));
    border-radius: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 20px;
    font-weight: bold;
}

.industry-slider-arrow:hover {
    background: var(--primary-color, var(--primary-color));
    color: var(--bg-color);

}

.industry-prev {
    transform: rotate(0deg);
}

.industry-next {
    transform: rotate(0deg);
}

@media (max-width: 1024px) {
    .industry-card {
        min-width: 280px;
    }
    
    .industry-card-content {
        padding: 25px;
    }
    
    .industry-card-title {
        font-size: 22px;
    }
    
    .industry-slider-controls {
        gap: 6rem;
    }
}

@media (max-width: 768px) {
    .pwb-industry-slider {
        padding: 60px 0;
    }
    
    .industry-card {
        min-width: 260px;
    }
    
    .industry-card-image {
        height: 160px;
    }
    
    .industry-card-content {
        padding: 20px;
    }
    
    .industry-card-title {
        font-size: 20px;
        margin-bottom: 12px;
    }
    
    .industry-card-text {
        font-size: 14px;
        margin-bottom: 20px;
    }
    
    .industry-slider-controls {
        gap: 4rem;
        margin-top: 40px;
    }
    
    .industry-slider-arrow {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .industry-card {
        min-width: 240px;
    }
    
    .industry-card-image {
        height: 140px;
    }
    
    .industry-card-content {
        padding: 16px;
    }
    
    .industry-card-title {
        font-size: 18px;
    }
    
    .industry-card-text {
        font-size: 13px;
    }
    
    .industry-slider-controls {
        gap: 3rem;
    }
    
    .industry-slider-arrow {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}

/* PWB KOL Block */
.pwb-kol-block {
    padding: 60px 0;
    background: var(--bg-color);
}

.kol-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: stretch;
}

.kol-card {
    background: var(--border-color, #333);
    border: 1px solid var(--border-color, #333);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
}

.kol-card:hover {
    border-color: var(--primary-color, var(--primary-color));
    transform: translateY(-2px);
}

.kol-pfp-container {
    position: relative;
    flex-shrink: 0;
}

.kol-pfp {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kol-pfp img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kol-pfp-placeholder {
    color: #666;
    font-size: 24px;
}

.kol-social-overlay {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-color, var(--card-bg));
}

/* Social Network Colors & Icons */
.kol-social-instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.kol-social-twitter,
.kol-social-x {
    background: #1da1f2;
}

.kol-social-youtube {
    background: #ff0000;
}

.kol-social-tiktok {
    background: var(--bg-color);
}

.kol-social-linkedin {
    background: #0077b5;
}

.kol-social-facebook {
    background: #1877f2;
}

.kol-social-twitch {
    background: #9146ff;
}

.kol-social-discord {
    background: #5865f2;
}

.kol-social-reddit {
    background: #ff4500;
}

.kol-social-snapchat {
    background: #fffc00;
}

.kol-social-telegram {
    background: #0088cc;
}

.kol-social-medium {
    background: #00ab6c;
}

/* Social Network Icons using proper SVG icons */
.kol-social-icon {
    width: 12px;
    height: 12px;
    display: block;
    position: relative;
}

.kol-social-icon::before {
    content: '';
    width: 12px;
    height: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
}

.kol-social-instagram .kol-social-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M12.017 0C8.396 0 7.989.013 7.041.048 6.094.082 5.48.21 4.939.396a7.085 7.085 0 0 0-2.565 1.669 7.085 7.085 0 0 0-1.669 2.565c-.186.54-.314 1.155-.348 2.103C.013 7.781 0 8.188 0 11.809c0 3.621.013 4.028.048 4.976.034.948.162 1.562.348 2.103a7.085 7.085 0 0 0 1.669 2.565 7.085 7.085 0 0 0 2.565 1.669c.54.186 1.155.314 2.103.348.948.035 1.355.048 4.976.048 3.621 0 4.028-.013 4.976-.048.948-.034 1.562-.162 2.103-.348a7.085 7.085 0 0 0 2.565-1.669 7.085 7.085 0 0 0 1.669-2.565c.186-.54.314-1.155.348-2.103.035-.948.048-1.355.048-4.976 0-3.621-.013-4.028-.048-4.976-.034-.948-.162-1.562-.348-2.103a7.085 7.085 0 0 0-1.669-2.565A7.085 7.085 0 0 0 19.136.396c-.54-.186-1.155-.314-2.103-.348C16.085.013 15.678 0 12.017 0zM12.017 2.163c3.557 0 3.98.013 5.385.066.302.012.604.041.9.086a4.847 4.847 0 0 1 1.595.523 4.847 4.847 0 0 1 1.237 1.237 4.847 4.847 0 0 1 .523 1.595c.045.296.074.598.086.9.053 1.404.066 1.827.066 5.385 0 3.557-.013 3.98-.066 5.385-.012.302-.041.604-.086.9a4.847 4.847 0 0 1-.523 1.595 4.847 4.847 0 0 1-1.237 1.237 4.847 4.847 0 0 1-1.595.523c-.296.045-.598.074-.9.086-1.404.053-1.827.066-5.385.066-3.557 0-3.98-.013-5.385-.066a8.864 8.864 0 0 1-.9-.086 4.847 4.847 0 0 1-1.595-.523 4.847 4.847 0 0 1-1.237-1.237 4.847 4.847 0 0 1-.523-1.595 8.864 8.864 0 0 1-.086-.9c-.053-1.404-.066-1.827-.066-5.385 0-3.557.013-3.98.066-5.385.012-.302.041-.604.086-.9a4.847 4.847 0 0 1 .523-1.595A4.847 4.847 0 0 1 4.5 2.752a4.847 4.847 0 0 1 1.595-.523c.296-.045.598-.074.9-.086 1.404-.053 1.827-.066 5.385-.066z'/%3E%3Ccircle cx='12.017' cy='12.017' r='3.708'/%3E%3Ccircle cx='18.408' cy='5.603' r='1.237'/%3E%3C/svg%3E");
}

.kol-social-twitter .kol-social-icon::before,
.kol-social-x .kol-social-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
}

.kol-social-youtube .kol-social-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
}

.kol-social-tiktok .kol-social-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E");
}

.kol-social-linkedin .kol-social-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E");
}

.kol-social-facebook .kol-social-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E");
}

.kol-social-twitch .kol-social-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z'/%3E%3C/svg%3E");
}

.kol-social-discord .kol-social-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419-.0002 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9554 2.4189-2.1568 2.4189Z'/%3E%3C/svg%3E");
}

.kol-social-reddit .kol-social-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z'/%3E%3C/svg%3E");
}

.kol-social-snapchat .kol-social-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 24 24'%3E%3Cpath d='M12.017 0C8.396 0 7.989.013 7.041.048 6.094.082 5.48.21 4.939.396a7.085 7.085 0 0 0-2.565 1.669 7.085 7.085 0 0 0-1.669 2.565c-.186.54-.314 1.155-.348 2.103C.013 7.781 0 8.188 0 11.809c0 3.621.013 4.028.048 4.976.034.948.162 1.562.348 2.103a7.085 7.085 0 0 0 1.669 2.565 7.085 7.085 0 0 0 2.565 1.669c.54.186 1.155.314 2.103.348.948.035 1.355.048 4.976.048 3.621 0 4.028-.013 4.976-.048.948-.034 1.562-.162 2.103-.348a7.085 7.085 0 0 0 2.565-1.669 7.085 7.085 0 0 0 1.669-2.565c.186-.54.314-1.155.348-2.103.035-.948.048-1.355.048-4.976 0-3.621-.013-4.028-.048-4.976-.034-.948-.162-1.562-.348-2.103a7.085 7.085 0 0 0-1.669-2.565A7.085 7.085 0 0 0 19.136.396c-.54-.186-1.155-.314-2.103-.348C16.085.013 15.678 0 12.017 0z'/%3E%3C/svg%3E");
}

.kol-social-telegram .kol-social-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z'/%3E%3C/svg%3E");
}

.kol-social-medium .kol-social-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M13.54 12a6.8 6.8 0 01-6.77 6.82A6.8 6.8 0 010 12a6.8 6.8 0 016.77-6.82A6.8 6.8 0 0113.54 12zM20.96 12c0 3.54-1.51 6.42-3.38 6.42-1.87 0-3.39-2.88-3.39-6.42s1.52-6.42 3.39-6.42 3.38 2.88 3.38 6.42M24 12c0 3.17-.53 5.75-1.19 5.75-.66 0-1.19-2.58-1.19-5.75s.53-5.75 1.19-5.75C23.47 6.25 24 8.83 24 12z'/%3E%3C/svg%3E");
}

.kol-info {
    flex: 1;
    min-width: 0;
}

.kol-name {
    color: var(--text-color);
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kol-subscribers {
    color: #999;
    font-size: 14px;
    margin: 0;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Responsive Grid */
@media (max-width: 1200px) {
    .kol-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

@media (max-width: 968px) {
    .kol-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .kol-card {
        padding: 16px;
        gap: 14px;
    }
    
    .kol-pfp {
        width: 50px;
        height: 50px;
    }
    
    .kol-social-overlay {
        width: 18px;
        height: 18px;
    }
    
    .kol-name {
        font-size: 15px;
    }
    
    .kol-subscribers {
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .pwb-kol-block {
        padding: 40px 0;
    }
    
    .kol-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .kol-card {
        padding: 14px;
        gap: 12px;
    }
    
    .kol-pfp {
        width: 45px;
        height: 45px;
    }
    
    .kol-social-overlay {
        width: 16px;
        height: 16px;
    }
    
    .kol-name {
        font-size: 14px;
    }
    
    .kol-subscribers {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .kol-card {
        padding: 12px;
        gap: 10px;
    }
    
    .kol-pfp {
        width: 40px;
        height: 40px;
    }
    
    .kol-social-overlay {
        width: 14px;
        height: 14px;
    }
}