/* Certification Elements Joint Styling */

.certification-elements {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3rem;
    margin: 2rem auto;
    padding: 1.5rem;
    max-width: 1000px;
}

/* Make sure both 3D elements are properly visible */
.tag-3d-container,
.cert-3d-container {
    margin: 0;
    position: relative;
    display: block;
}

/* Add subtle highlight effects to containers */
.tag-3d-container::before,
.cert-3d-container::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    /* background: linear-gradient(135deg, rgba(0,81,181,0.05) 0%, rgba(0,81,181,0) 50%); */
    z-index: -1;
    pointer-events: none;
}

/* Fix caption sizing and spacing */
.tag-caption,
.cert-caption {
    font-size: 1rem;
    color: var(--primary-color);
    margin-top: 1.5rem;
    text-align: center;
    font-weight: 600;
}

/* Make the certification visuals section fully visible */
.certification-visuals {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
    display: block;
    width: 100%;
}

.visuals-container {
    opacity: 1;
}

/* Fix any icon coloring issues */
.guarantee-icon i {
    font-style: normal;
}

/* Enhanced visuals for 3D rotation */
@keyframes subtle-glow {
    0% {
        box-shadow: 0 0 5px rgba(0,81,181,0.2);
    }
    50% {
        box-shadow: 0 0 15px rgba(0,81,181,0.4);
    }
    100% {
        box-shadow: 0 0 5px rgba(0,81,181,0.2);
    }
}

.tag-3d-container.on-screen,
.cert-3d-container.on-screen {
    animation: subtle-glow 3s infinite ease-in-out;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .certification-elements {
        flex-direction: column;
        align-items: center;
        gap: 4rem;
    }
    
    .tag-3d-container,
    .cert-3d-container {
        margin-bottom: 1rem;
    }
}