/* =========================================
   V343: VALUE ADDED SERVICES MARQUEE STYLING
   ========================================= */

.recharge-value-added-v343 {
    padding: 60px 0;
    /* Use contrasting background for separation */
    border-bottom: 2px solid #eee;
}

.value-title-v343 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--secondary-base, #004d40);
    margin-bottom: 5px;
}
.value-subtitle-v343 {
    font-size: 1rem;
    color: #666;
    margin-bottom: 30px;
}

/* Marquee Container Setup */
.value-marquee-container-v343 {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    margin: 30px 0;
    padding: 10px 0;
}

.value-services-wrapper-v343 {
    display: inline-flex; /* Key to horizontal flow */
    animation: marquee-scroll-v343 35s linear infinite; /* Animation defined below */
    animation-play-state: running;
    padding: 10px 0;
}

/* Service Item Styling (The Pill Shape) */
.service-item-v343 {
    /* Visual pill style */
    display: flex;
    align-items: center;
    background: white;
    border: 2px solid var(--primary-action, #009688);
    color: var(--primary-action, #009688);
    padding: 10px 30px;
    border-radius: 50px;
    margin: 0 15px; /* Spacing between items */
    font-weight: 600;
    font-size: 1.1rem;
    box-shadow: 0 5px 15px rgba(0, 150, 136, 0.1);
    
    transition: all 0.3s;
    cursor: default;
    
    /* Ensure no wrapping */
    flex-shrink: 0;
}

.service-item-v343 i {
    color: var(--tertiary-accent, #67C949); /* Green Icon for pop */
    font-size: 1.2em;
}

.service-item-v343:hover {
    background: var(--primary-action, #009688);
    color: white;
    transform: translateY(-5px) scale(1.05);
}
.service-item-v343:hover i {
    color: var(--highlight-yellow, #ffeb3b); /* Icon pops yellow on hover */
}

/* Animation Keyframes */
@keyframes marquee-scroll-v343 {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Scrolls half the wrapper width */
}


/* =========================================
   VALUE HEADING HIGHLIGHT BOX - PRIMARY COLOR FILL
   ========================================= */

.heading-highlight-box-v355 {
    max-width: 500px;
    padding: 10px 10px; 
    
    
    /* === PRIMARY COLOR FILL === */
    background: var(--primary-action, #009688); /* Full Teal Background */
    border: 1px solid var(--accent-dark, #00796b); 
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Darker shadow */
    
}

/* Text Color Must Be White/Light for Visibility */
.heading-highlight-box-v355 .value-title-v343 {
    /* Title color changed to White */
    color: white; 
    margin-bottom: 5px;
     
}

.heading-highlight-box-v355 .value-subtitle-v343 {
    /* Subtitle color changed to White/Light Accent */
    color: var(--highlight-yellow, #ffeb3b);
    

}