/* ===== INFY PROBLEM SECTION ===== */
    .infy-problem-section{
        background: var(--pbmit-body-color, #f8f9fa);
        font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    }

    .infy-problem-section h4{
        font-weight: 600;
        margin-bottom: 60px;
        color: var(--pbmit-heading-color, #212529); 
        font-size: 2.2rem;
    }

    /* ===== TOP BLOCKS ===== */
    .problem-box{
        color:#fff;
        padding:20px 25px;
        border-radius:20px;
        font-weight:500;
        display:inline-block;
        box-shadow:0 12px 28px rgba(0,0,0,0.15);
        min-height:120px;
        width: 100%;
        max-width: 350px;
        margin: 0 auto 20px;
        line-height: 1.5;
        font-size: 1.1rem;
    }

    .problem-box.blue{ background:#1f5f7a; }
    .problem-box.purple{ background:#7a2c83; }
    .problem-box.orange{ background:#c4551b; }

    /* ===== STRAIGHT ARROW (reusable) ===== */
    .straight-arrow{
        width:2px;
        height:65px;
        background: var(--pbmit-global-color, #2e8b57);
        margin:20px auto 25px;
        position:relative;
    }

    .straight-arrow:after{
        content:"";
        position:absolute;
        bottom:-10px;
        left:50%;
        transform:translateX(-50%);
        border-left:8px solid transparent;
        border-right:8px solid transparent;
        border-top:10px solid var(--pbmit-global-color, #2e8b57);
    }

    /* ===== IMAGES ===== */
    .problem-image{
        width:100%;
        height:170px;
        object-fit:cover;
        border-radius:28px;
        box-shadow:0 12px 30px rgba(0,0,0,0.18);
        transition:0.3s ease;
    }

    .problem-image:hover{
        transform:translateY(-6px);
    }

    /* two‑column layout inside col‑1 (images side by side) */
    .two-image-row {
        display: flex;
        gap: 20px;
        justify-content: center;
        margin: 20px 0 15px;
    }

    .two-image-row .image-col {
        flex: 1 1 0;
        min-width: 0;
    }

    .two-image-row .problem-image {
        height: 150px;
        width: 100%;
    }

    /* ===== STATS ===== */
    .stats{
        margin-top:20px;
        font-weight:600;
        font-size: 1.2rem;
    }

    .green{
        color: var(--pbmit-global-color, #2e8b57);
    }

    .blue-text{
        color: var(--pbmit-blue-color, #1e6f9f);
    }

    /* stats in two columns (for first column) */
    .stats-row {
        display: flex;
        justify-content: center;
        gap: 2.5rem;
        margin-top: 20px;
    }

    .stats-row p {
        margin: 0;
    }

    /* each stat container with its own straight arrow */
    .stat-item {
        text-align: center;
    }

    .stat-item .straight-arrow {
        margin: 15px auto 15px;
        height: 45px;          /* slightly shorter to fit better */
    }

    /* ===== RESPONSIVE ===== */
    @media(max-width: 767px){
        .two-image-row {
            flex-wrap: wrap;
        }
        .two-image-row .image-col {
            flex: 0 0 45%;
        }
        .stats-row {
            gap: 1.5rem;
        }
    }

    @media(max-width: 480px){
        .two-image-row .image-col {
            flex: 0 0 100%;
        }
    }


/* ===============================
   CUP POLICY MAP SECTION
=============================== */

.cup-policy-section {
    background: transparent;
    padding: 40px 0 40px;
    width: 100%;
}

.interactive-map {
    position: relative;
    overflow: visible;
    max-width: 1300px;
    margin: 0 auto;
}

.world-map-base {
    width: 100%;
    height: auto;
    border-radius: 40px;
    filter: grayscale(20%) brightness(1.02);
    display: block;
}

/* ----- POINTERS (visible dots) ----- */

.map-pointer {
    position: absolute;
    width: 24px;
    height: 24px;
    z-index: 20;
    pointer-events: none;
}

.pointer-dot {
    width: 20px;
    height: 20px;
    background: var(--pbmit-global-color);
    border: 4px solid white;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    animation: softPulse 1.8s infinite ease-in-out;
}

.ptr-uk .pointer-dot { background: #f3163b; }
.ptr-california .pointer-dot { background: #0a2d12; }
.ptr-india .pointer-dot { background: #f9a95d; }
.ptr-wa .pointer-dot { background: #1e7e5a; }

@keyframes softPulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.18); opacity: 0.95; }
    100% { transform: scale(1); opacity: 1; }
}

.ptr-eu { top: 27%; left: 48%; }
.ptr-uk { top: 25%; left: 43%; }
.ptr-california { top: 26%; left: 12%; }
.ptr-india { top: 43%; left: 65%; }
.ptr-wa { top: 74%; left: 78%; }

/* ----- HOTSPOTS (currently disabled) ----- */

.hotspot {
    position: absolute;
    cursor: pointer;
    z-index: 30;
    background: transparent;
    pointer-events: none;   /* disabled */
}

.hotspot-eu { top: 23%; left: 46.5%; width: 9%; height: 10%; }
.hotspot-uk { top: 22%; left: 41%; width: 6%; height: 8%; }
.hotspot-california { top: 23%; left: 9%; width: 8%; height: 10%; }
.hotspot-india { top: 41%; left: 63%; width: 8%; height: 8%; }
.hotspot-wa { top: 71%; left: 76%; width: 8%; height: 8%; }

/* ----- INFO CARDS (ALWAYS VISIBLE) ----- */

.map-card {
    position: absolute;
    background: white;
    border-radius: 30px 30px 30px 12px;
    box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.15),
                0 0 0 1px rgba(0,0,0,0.02);
    padding: 16px 22px;
    max-width: 260px;
    min-width: 220px;
    border-left: 6px solid #8ebb2d;
    z-index: 35;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #1b2841;

    /* always visible */
    opacity: 1;
    transform: none;
    pointer-events: auto;

    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* subtle hover lift */
.map-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 40px -10px rgba(0, 0, 0, 0.2);
}

/* card border colors */
.card-uk { border-left-color: #f3163b; }
.card-california { border-left-color: #0a2d12; }
.card-india { border-left-color: #f9a95d; }
.card-wa { border-left-color: #1e7e5a; }

.card-title {
    font-weight: 700;
    margin-bottom: 6px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* card positions */
.card-eu { top: 12%; left: 45%; }
.card-uk { top: 22%; left: 25%; }
.card-california { top: 12%; left: 2%; }
.card-india { top: 29%; left: 58%; }
.card-wa { top: 60%; left: 70%; }

/* ===========================================================
   OLD HOVER BEHAVIOR (COMMENTED – ENABLE LATER IF NEEDED)
=========================================================== */
/*
.interactive-map:hover .map-card {
    opacity: 0;
}

.hotspot-eu:hover ~ .card-eu,
.hotspot-uk:hover ~ .card-uk,
.hotspot-california:hover ~ .card-california,
.hotspot-india:hover ~ .card-india,
.hotspot-wa:hover ~ .card-wa {
    opacity: 1 !important;
    transform: translateY(-6px);
}
*/

/* ---- MOBILE FALLBACK ---- */

@media (max-width: 760px) {

    .hotspot,
    .map-pointer {
        display: none;
    }

    .map-card {
        position: static !important;
        margin: 12px 0;
        width: 100%;
        max-width: 100%;
        transform: none !important;
        border-left-width: 8px;
    }

    .interactive-map {
        background: transparent;
        border: none;
        box-shadow: none;
    }

    .world-map-base {
        margin-bottom: 20px;
    }
}

/* ===============================
   INEFFICIENT SOLUTIONS SECTION
=============================== */

.cup-policy-compact {
    margin-top: 50px;
}

.policy-heading {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 30px;
    color: #0a2d12;
}

/* Button Base */
.policy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 20px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Icon */
.policy-btn i {
    font-size: 18px;
}

/* Hover */
.policy-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* Color Variants */
.byoc {
    background: linear-gradient(135deg, #9900ab, #7f207f);
}

.levy {
    background: linear-gradient(135deg, #1398d4, #0d79aa);
}

.ban {
    background: linear-gradient(135deg, #d9534f, #b52b27);
}

/* Responsive */
@media (max-width: 768px) {
    .policy-btn {
        font-size: 14px;
        padding: 15px;
    }
}


/* ===================================== */
/* INFYCUP 3 COLUMN CLEAN SECTION */
/* ===================================== */

.infycup-3col-section {
    background: #ebecf5;
    padding: 100px 0;
}

/* ===== TOP AREA ===== */

.infycup-top {
    margin-bottom: 60px;
}

.infycup-main-title {
    display: inline-block;
    background: var(--pbmit-global-color, #8ebb2d);
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    padding: 14px 60px;
    border-radius: 60px;
    margin-bottom: 15px;
}

.infycup-subtitle {
    font-size: 16px;
    color: #2f6b37;
    margin-bottom: 25px;
}

.infycup-banner {
    color: #9f0f0f;
}

/* ===== MAIN BOX ===== */

.infycup-box {
    background: #f7faf7;
    border-radius: 25px;
    padding: 60px 40px;
    border: 1px solid rgba(142,187,45,0.25);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

/* ===== COLUMN ===== */

.infycup-col {
    text-align: center;
    transition: transform 0.3s ease;
}

.infycup-col:hover {
    transform: translateY(-6px);
}

/* Image */

.infycup-col img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    margin-bottom: 20px;
}

/* Pill */

.infycup-pill {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    color: #fff;
}

/* Color Variants */

.infycup-pill.yellow {
    background: #f4b400;
}

.infycup-pill.blue {
    background: #1398d4;
}

.infycup-pill.green {
    background: #6ab04c;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 992px) {
    .infycup-box {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {

    .infycup-3col-section {
        padding: 70px 0;
    }

    .infycup-box {
        grid-template-columns: 1fr;
        padding: 40px 25px;
    }

    .infycup-main-title {
        font-size: 22px;
        padding: 12px 40px;
    }

    .infycup-col img {
        height: 220px;
    }
}




/* =======================================================
   INFYCUP LIFE CYCLE SECTION – CLEAN VERSION
   ======================================================= */

.infycup-lifecycle {
  padding: 90px 0;
  background: var(--pbmit-light-color);
  position: relative;
}

/* ---------- SECTION HEADER ---------- */

.infycup-lifecycle .section-header {
  margin-bottom: 40px;
}

.infycup-lifecycle .pbmit-title {
  font-size: 34px;
  color: var(--pbmit-heading-color);
}

.infycup-lifecycle .pbmit-desc {
  font-size: 16px;
  color: #666;
}

    
.timeline-container {
    position: relative;
}

.timeline-container::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background-color: var(--pbmit-global-color);
    opacity: 0.2;
}


.timeline-item {
    position: relative;
    margin-bottom: 3rem;
}

.timeline-dot {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 4px solid var(--pbmit-body-color);
    z-index: 10;
    background-color: #d1d5db;   /* GREY default */
    transition: all 0.4s ease;
}


.process-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    color: white;
    margin-bottom: 0.5rem;
}

.badge-infycup {
    background-color: #ec4899;
}

.badge-council {
    background-color: var(--pbmit-blue-color);
}

.badge-user{
    background-color: var(--pbmit-global-color);
}

.timeline-card {
    background-color: var(--pbmit-white-color);
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-left: 4px solid;
}

.timeline-card.pink-border {
    border-left-color: #ec4899;
}

.timeline-card.blue-border {
    border-left-color: var(--pbmit-blue-color);
}

.timeline-card.gray-border {
    border-left-color: #9ca3af;
}

.timeline-card.green-border {
    border-left-color: var(--pbmit-global-color);
}

/* ---------- DEFAULT DOT STATE ---------- */

/* ACTIVE STATE */
.timeline-dot.active {
    background-color: var(--pbmit-global-color);
    box-shadow: 0 0 12px var(--pbmit-global-color);
    transform: scale(1.2);
}

/* ---------- MOVING ARROW ---------- */
.timeline-arrow {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background-color: var(--pbmit-global-color);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    transition: top 0.2s linear;
    z-index: 20;
}

/* ---------- CARD EFFECT ---------- */
.timeline-card {
    transition: all 0.4s ease;
}

/* When active */
.timeline-card.active {
    animation: cardTilt 0.6s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* TILT / SHAKE */
@keyframes cardTilt {
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(1deg); }
    50%  { transform: rotate(-1deg); }
    75%  { transform: rotate(0.5deg); }
    100% { transform: rotate(0deg); }
}

/* ---------- LINE PROGRESS ---------- */
.timeline-container::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 0%;
    background-color: var(--pbmit-global-color);
    transition: height 0.2s linear;
}


/* ---------- BOTTOM BADGES ---------- */

.bottom-actions {
  text-align: center;
  margin-top: 40px;
}

.badge {
  padding: 0.75rem 2rem;
  border-radius: 9999px;
  font-weight: bold;
  font-size: 1rem;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  color: white;
  box-shadow: 0 4px 20px rgba(142, 187, 45, 0.2);
}

.recycle { background: var(--pbmit-global-color); }
.reuse   { background: var(--pbmit-blue-color); }
.reduce  { background: #ff9f1c; }


/* =======================================================
   Mission
   ======================================================= */

.cta-box {
    min-height: 450px;
    border-radius: 20px;
    padding: 60px 30px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

.cta-box h2 {
    font-size: 42px;
}

.cta-box h4 {
    font-weight: 400;
}
/* =========================
   Responsive Layout
========================= */

@media (max-width:1024px){
    .timeline-item .timeline-card{
      margin-left: 40px;
    }
  .timeline-dot.mobile-dot, .timeline-container::before, .timeline-arrow{
      left: 8px;
  }
   
}

@media (max-width: 992px) {
  .infycup .pbmit-title {
    font-size: 34px;
  }

  .badge {
    margin-bottom: 10px;
  }
}

@media (max-width: 768px) {
    .cta-mission-section h4 {
        font-size: 27px;   /* adjust if needed */
        line-height: 1.4;
    }
}