section.ten-card{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
 }

  section.ten-card p{
        color: white;
    font-family: "Cairo"; 
    font-size: 19px;
    line-height: 1.2;
    /* letter-spacing: 1px; */
    font-weight: normal;
  }
   section.ten-card h5{
     color :white;
    font-family: "Cairo";
    font-size: 20px;
     line-height: 1;
   }
section.ten-card .tc-container{
   
    float:left;
    position: relative;
   
}
section.ten-card .tc-container:nth-child(odd){
    background:#4668b2;
    padding:2rem   
}
section.ten-card .tc-container:nth-child(even){
    background:white;
     text-align: center;
}
 section.ten-card svg{
        position: absolute;
    right: 2rem;
    opacity: 0.5;
  
 }
  @media only screen and (max-width: 600px) {
    section.ten-card{
   
    grid-template-columns: repeat(1, 1fr);
    }
    section.ten-card svg{
        bottom: 34px;
        opacity: 0.2;
    }
 }


 /* --- Your Base CSS (Slightly adjusted for transitions) --- */
section.ten-card {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0; /* Ensures a seamless card wall effect */
    overflow: hidden;
}

section.ten-card p {
    color: white;
    font-family: "Cairo"; 
    font-size: 19px;
    line-height: 1.2;
    font-weight: normal;
    transition: transform 0.4s ease; /* Smooth text shift */
}

section.ten-card h5 {
    color: white;
    font-family: "Cairo";
    font-size: 20px;
    line-height: 1;
    transition: transform 0.4s ease;
}

section.ten-card .tc-container {
    position: relative;
    z-index: 1;
    /* High-performance hardware acceleration transitions */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.4s ease, 
                filter 0.4s ease,
                z-index 0s linear 0.4s; 
}

section.ten-card .tc-container:nth-child(odd) {
    background: #4668b2;
    padding: 2rem;
}

section.ten-card .tc-container:nth-child(even) {
    background: white;
    text-align: center;
}

/* Ensure the image scales nicely within the container */
section.ten-card .tc-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

section.ten-card svg {
    position: absolute;
    right: 2rem;
    bottom: 2rem;
    opacity: 0.3; /* Subtle background presence */
    transform: scale(0.8);
    transform-origin: right bottom;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                opacity 0.4s ease;
}

/* --- The New Interaction Engine --- */

/* 1. The Contextual Contract: When any card is hovered, slightly dim the rest */
section.ten-card:hover .tc-container {
    filter: brightness(0.85);
}

/* 2. The Hero State: The specific card being hovered gets pulled forward */
section.ten-card .tc-container:hover {
    z-index: 10; /* Layers it above everything else */
    filter: brightness(1); /* Keeps hero card vibrant */
    transform: scale(1.06); /* Lifts the card outward */
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.25); /* Adds deep cinematic shadow */
}

/* 3. Inner Element Reactions on Hover */
section.ten-card .tc-container:hover p,
section.ten-card .tc-container:hover h5 {
    transform: translateY(-5px); /* Elegant upward text nudge */
}

section.ten-card .tc-container:hover img {
    transform: scale(1.05); /* Slight camera-zoom effect on images */
}

section.ten-card .tc-container:hover svg {
    opacity: 0.75; /* Lights up the quote icon */
    transform: scale(1.25) rotate(-5deg); /* Pops out with a playful tilt */
}

/* --- Mobile Responsiveness Adjustments --- */
@media only screen and (max-width: 600px) {
    section.ten-card {
        grid-template-columns: repeat(1, 1fr);
    }
    
    /* Slightly calmer animation scale on mobile to prevent clipping layout boundaries */
    section.ten-card .tc-container:hover {
        transform: scale(1.03); 
    }
    
    section.ten-card svg {
        bottom: 34px;
        opacity: 0.2;
    }
}