/* =========================================================
   SOLUTIONS GRID
   ========================================================= */
.solution-container {
    display: flex;
    flex-wrap:wrap;
    justify-content:space-around;
    align-items:flex-start;
    width: 100%;
    height: auto;
    
}

/* Wrapper around each card; used for staggered vertical spacing */
.card_wrapper {
  width: 50%;
  height: auto;
  margin-top: calc(10rem * var(--card-order, 0));
}

/* Card layout */
.card {       
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 10px #024120ca);
    padding: 0 2rem;
   
}

/* Image column */
.card-image {
    width: 50%;
    
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
     filter: drop-shadow(0 0 10px var(--blue));
}

/* Text column */
.card-content {
  
    width: 50%;
   
}

.card-content a {
    padding: 0;
    color: #08a5d5;
}

/* Gradient title bar above cards */
.top-center {
    width:fit-content;
    padding: 1rem;
    background: linear-gradient(45deg, #51afdc, #8df39b);
    color: #fff;
    transform: translateX(50%);
   }


/* =========================================================
   ALTERNATING CARD OFFSET
   (Every even card gets a vertical offset)
   ========================================================= */
.card_wrapper:nth-child(even) {
    --card-order: 1;
}
/* ==============================
   Responsive Solution Cards
   ============================== */


/* Mobile: extra small screens */
@media (max-width: 600px) {
  .card_wrapper {
        width: 100%;
        margin-top:0; /* reduced vertical offset */
        --card-order: 0;   /* remove stagger on smaller screens */
       
    }
    
    .card { 
        padding: 1rem;
    }
    .card-image img {
        width: 100%;   /* full width for images on small screens */
    }

    .top-center {
        
        transform: translateX(15%);
    }


}