.partner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    padding: 60px 0;
    justify-items: center;
}

/* Container for the 3D flip */
.partner-item {
    width: 250px;
    height: 150px;
    perspective: 1000px; /* Enable 3D space */
    cursor: pointer;
}

/* The card that actually flips */
.partner-card {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
    transform-style: preserve-3d;
}

/* Flip effect on hover */
.partner-item:hover .partner-card {
    transform: rotateY(180deg);
}

/* Common face styles */
.partner-card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
}

/* --- Front Face (Circle Style) --- */
.partner-card-front {
    background-color: transparent;
    transform: rotateY(0deg);
    z-index: 2;
}

/* The custom broken circle border */
.partner-circle-border {
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    /* Use pseudo-elements for the ring and dots */
    transition: all 0.3s ease;
}

/* The Masked Ring (Top and Bottom Arcs) */
.partner-circle-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid #ddd;
    border-radius: 50%;
    /* Create small gaps on Left (270deg) and Right (90deg) */
    /* Using conic-gradient mask to hide 10 degrees on each side */
    -webkit-mask-image: conic-gradient(
        from 0deg,
        black 0deg 85deg,
        transparent 85deg 95deg,
        black 95deg 265deg,
        transparent 265deg 275deg,
        black 275deg 360deg
    );
    mask-image: conic-gradient(
        from 0deg,
        black 0deg 85deg,
        transparent 85deg 95deg,
        black 95deg 265deg,
        transparent 265deg 275deg,
        black 275deg 360deg
    );
}

/* The Dots (Left and Right) */
.partner-circle-border::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: #ddd;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    /* Position the first dot on the Left */
    left: -3px;
    /* Use box-shadow to create the second dot on the Right */
    /* 
       The circle width is fixed at 140px.
       The Left dot is at -3px relative to the container.
       The Right dot should be at the opposite side.
       Container width = 140px.
       Right edge = 140px.
       Dot center should be at 140px + 3px? No.
       If Left dot center is at 0 (border line), then Right dot center is at 140.
       Here Left dot is at -3px (visually centered on border line).
       So Right dot needs to be at 140 - 3 = 137px? 
       Actually, if we want it symmetric:
       Left dot: left: -3px.
       Right dot: right: -3px.
       But we are using box-shadow for the second dot.
       Distance from left dot (-3px) to right dot (140px - 3px = 137px relative to container?)
       Wait, if we use right: -3px, we need another element.
       Let's stick to box-shadow but calculate correctly.
       X offset = Width (140). 
       If left is -3, box-shadow: 140px 0 0 sets the shadow at -3 + 140 = 137px.
       This puts the shadow 3px inside the right edge (140).
       We want it at 140 - 3? No, we want it at 140 + something?
       Let's just use two pseudo-elements? No, ::before is used for the ring.
       Let's use a simpler approach for dots to ensure stability on mobile.
       Mobile issue might be due to scaling or container width changes if any.
       But .partner-circle-border has fixed width 140px.
       
       Wait, the user said "Right dot runs too far right".
       Maybe on mobile the container is shrinking?
       .partner-circle-border has width: 140px fixed.
       
       Let's try using right property for the shadow? No.
       Let's use a background radial-gradient approach for dots?
       Or just ensure the box-shadow is relative to the element which is fixed size.
       
       Maybe the issue is box-shadow scaling?
       Let's try to make the dots part of the mask or separate elements?
       Actually, let's just fix the box-shadow value or use a different technique.
       
       Alternative: Use a separate container for dots? No structure change.
       
       Let's change the dot implementation to be safer.
       We can put one dot on ::after and another on... wait we only have ::before and ::after.
       ::before is the ring. ::after is the dots.
       
       Let's use background-image for dots on ::after?
       height: 6px; width: 100% (of 140px + extra?).
       
       Let's try box-shadow: 140px 0 0 #ddd; again.
       If left is -3px. Shadow at 137px.
       Right edge of circle is 140px.
       So shadow is at 137px.
       Center of shadow (3px wide radius? no 6px width).
       Left of shadow is 137. Center is 140.
       This seems correct. Center of right dot is at 140px (Right edge).
       
       Why did it "run too far right" on mobile?
       Maybe the container width isn't 140px on mobile?
       CSS: .partner-circle-border { width: 140px; height: 140px; }
       Media query: .partner-circle-border { width: 120px; height: 120px; }
       Ah! The media query changes the width to 120px!
       But the box-shadow is hardcoded to 140px!
       That's the bug.
    */
    box-shadow: 140px 0 0 #ddd;
}

/* Logo Wrapper */
.partner-logo-wrapper {
    width: 130px;
    height: 130px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
    border-radius: 50%;
    overflow: clip;
}

.partner-logo-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.partner-item:hover .partner-logo-wrapper img {
    /* Optional: scale down logo slightly as it flips away? */
}

/* --- Back Face (Rectangle Style) --- */
.partner-card-back {
    background-color: #fff;
    transform: rotateY(180deg);
    /* box-shadow: 0 4px 20px rgba(0,0,0,0.08); */
    border: 2px solid #eee; /* Thicker border */
    padding: 15px; /* Smaller padding */
    flex-direction: column;
    align-items: flex-start; /* Left align text */
    justify-content: center;
    text-align: left;
}

.partner-content-wrapper {
    width: 100%;
    overflow: hidden;
}

.partner-card-back h3 {
    margin: 0 0 5px 0; /* Smaller margin */
    font-size: 16px;
    font-weight: bold;
    color: #333;
    /* border-bottom: 1px solid #f0f0f0; */
    padding-bottom: 0;
    
    /* Text Overflow Handling */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%; /* Ensure it takes full width to trigger overflow */
}

.partner-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    max-height: 100px; /* Limit height */
    overflow-y: auto;
    /* Hide scrollbar for cleaner look, or style it */
    scrollbar-width: thin;
}

.partner-desc::-webkit-scrollbar {
    width: 4px;
}
.partner-desc::-webkit-scrollbar-thumb {
    background-color: #eee;
    border-radius: 2px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .partner-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); /* Smaller on mobile */
        gap: 20px;
        padding: 30px 20px; /* Added horizontal padding for mobile */
    }
    
    .partner-item {
        width: 100%; /* Fill grid cell */
        max-width: 280px;
        height: 160px; /* Smaller height */
    }
    
    .partner-circle-border {
        width: 120px;
        height: 120px;
    }
    
    /* Adjust box-shadow for smaller circle on mobile */
    .partner-circle-border::after {
        box-shadow: 120px 0 0 #ddd;
    }
    
    .partner-logo-wrapper {
        width: 80px;
        height: 80px;
    }
    
    /* On mobile, maybe click to flip instead of hover? 
       Hover works on many modern mobile browsers (tap = hover), 
       but explicit click handling via JS is better. 
       For now, CSS hover is the baseline.
    */
}