/*-------------------- Optimized 3D Card Styles (Responsive) --------------------*/
/* Root variables for easy customization */
:root {
    --prime_color: #e4fff8;
    --card-size: 300px; /* Base size for desktop */
    --card-border-radius: 50px;
    --glass-inset: 8px;
    --circle-opacity: 0.2;
    --avatar-size: 150px; /* Base avatar size */

}
.instructors-wrapper {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 2.5rem;
            margin-top: 3rem;
            padding: 0 1rem;
        }
/* Container - Flexible and responsive */
.rayen3d-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;    
    width: 100%;
    max-width: var(--card-size);
    max-height: 400px;
    aspect-ratio: 1 / 2; /* Square aspect ratio */
    perspective: 1000px;
    margin: 53px auto; /* Center if needed */
    direction: ltr; /* Force LTR to prevent RTL interference */
}

/* Card base */
.rayen3d-card {
    width: 100%;
    height: 80%; /* Ų§Ų³ŲŖŁŲ§ŲÆŁ‡ Ų§Ų² 100% Ų§Ų±ŲŖŁŲ§Ų¹ Ś©Ų§Ł†ŲŖŪŒŁ†Ų± */
    border-radius: var(--card-border-radius);
    background: linear-gradient(135deg, #4007455f, #00aaaa3f);
    transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
    transform-style: preserve-3d;
    box-shadow:
        rgba(0, 255, 255, 0) 40px 50px 25px,
        rgba(16, 44, 38, 0.2) 0px 25px 25px;
    direction: ltr;
}

/* Avatar - Professional photo placeholder */
.rayen3d-avatar {
    position: absolute;
    top: clamp(40px, 10vw, 60px); /* Responsive top positioning */
    left: 40%;
    transform: translateX(-50%) translateZ(10px); /* Center and 3D lift */
    width: 60%; /* Responsive size */
    height: 60%;
    border-radius: 11%;
    object-fit: cover; /* Ensure image fits perfectly */
    border: 3px solid rgba(0, 255, 255, 0.445); /* Subtle border */
    box-shadow: 
        0 8px 20px rgba(0, 0, 0, 0.3),
        inset 0 0 0 1px rgba(255, 255, 255, 0.2); /* Inner glow */
    transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
    z-index: 10; /* Above content */
}
/* Glass overlay */
.rayen3d-glass {
    transform-style: preserve-3d;
    position: absolute;
    inset: var(--glass-inset);
    background: linear-gradient(rgba(0, 255, 255, 0.173), rgba(0, 255, 136, 0.022));
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);    
    border-radius: calc(var(--card-border-radius) + 5px);
    border-top-right-radius: 100%;
    border-left: 1px solid rgba(134, 255, 229, 0.349);
    border-bottom: 1px solid rgb(183, 250, 255);
    transition: transform 0.5s ease-in-out;
    transform: translateZ(25px);
    direction: ltr; 
}

/* Logo circles - Scaled with container */
.rayen3d-logo {
    position: absolute;
    right: 0;
    top: 0;
    transform-style: preserve-3d;
    width: 50%;
    height: 50%;
    direction: ltr;
}

.rayen3d-logo .rayen3d-circle {
    position: absolute;
    aspect-ratio: 1;
    border-radius: 40%;
    background: rgba(0, 255, 255, var(--circle-opacity));
    top: 0;
    right: 0;
    box-shadow: rgba(100, 100, 111, 0.2) -10px 10px 20px;
    transition: transform 0.5s ease-in-out;
    backdrop-filter: blur(5px);
}

/* Circle sizes as percentages of container for scalability */
.rayen3d-logo .rayen3d-circle1 {
    width: 57%; /* 170/300 */
    transform: translateZ(25px);
    top: var(--glass-inset);
    right: var(--glass-inset);
    transition-delay: 0s;
}

.rayen3d-logo .rayen3d-circle2 {
    width: 47%; /* 140/300 */
    transform: translateZ(40px);
    top: calc(var(--glass-inset) * 1.25);
    right: calc(var(--glass-inset) * 1.25);
    transition-delay: 0.4s;    
}

.rayen3d-logo .rayen3d-circle3 {
    width: 37%; /* 110/300 */
    transform: translateZ(60px);
    top: calc(var(--glass-inset) * 2.125);
    right: calc(var(--glass-inset) * 2.125);
    transition-delay: 0.8s;
}

.rayen3d-logo .rayen3d-circle4 {
    width: 27%; /* 80/300 */
    transform: translateZ(80px);
    top: calc(var(--glass-inset) * 2.875);
    right: calc(var(--glass-inset) * 2.875);
    transition-delay: 1.2s;
}

.rayen3d-logo .rayen3d-circle5 {
    width: 17%; /* 50/300 */
    transform: translateZ(100px);
    top: calc(var(--glass-inset) * 3.75);
    right: calc(var(--glass-inset) * 3.75);
    transition-delay: 1.6s;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #004601f8;
    text-shadow:0px 0px 1px #64ff64b2;
    font-size: clamp(1rem, 4vw, 1.5rem); /* Responsive icon size */
}

/* Content area - Responsive padding and left-aligned */
.rayen3d-content {
    padding: clamp(20%, 20%, 25%) clamp(10%, 10%, 15%) 0 clamp(10%, 10%, 10%);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left; /* Force left alignment */
    direction: ltr;
}

.rayen3d-content h1 {
    color: var(--prime_color);
    text-shadow: 2px #64ff64;
    font-weight: 900;
    font-size: clamp(1.3rem, 5vw, 1.3rem); /* Responsive title */
    margin-bottom: 0.5rem;
    padding-top: 12px;
    text-align: left;    
}

.rayen3d-content p {
    color: #0fffff;
    font-size: clamp(0.875rem, 4vw, 0.9375rem); /* Responsive text */
    line-height: 1.4;
    text-align: left;    
}

/* Footer - Responsive positioning and left-aligned */
.rayen3d-footer {
    transform-style: preserve-3d;
    position: absolute;
    bottom: clamp(1rem, 5vw, 1.25rem);
    left: clamp(10%, 10%, 10%);
    right: clamp(10%, 10%, 10%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    direction: ltr;
    text-align: left;
}

.rayen3d-footer .rayen3d-link {
    transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
    font-size: clamp(0.75rem, 3vw, 0.875rem);
    color: #ffffff;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    text-align: left;
}

.rayen3d-footer .rayen3d-link:hover {
    transform: translateZ(10px);
    color: var(--prime_color);
}

.rayen3d-footer .rayen3d-social {
    transform-style: preserve-3d;
    display: flex;
    gap: clamp(0.5rem, 2vw, 0.625rem);
    flex-wrap: wrap; /* Allow wrapping on small screens */
    justify-content: flex-start; /* Left-align social icons */
    direction: ltr;
}

.rayen3d-footer .rayen3d-social .rayen3d-social_icons {
    display: inline-flex;
    width: clamp(1.5rem, 6vw, 1.875rem);
    height: clamp(1.5rem, 6vw, 1.875rem);
    background: #54045f73;
    color: #0fffff;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: rgba(236, 94, 255, 0.205) 7px 7px 5px;
    transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
}

.rayen3d-footer .rayen3d-social .rayen3d-social_icons:nth-child(1) {
    transition-delay: 0.2s;
}

.rayen3d-footer .rayen3d-social .rayen3d-social_icons:nth-child(2) {
    transition-delay: 0.4s;
}

.rayen3d-footer .rayen3d-social .rayen3d-social_icons:nth-child(3) {
    transition-delay: 0.6s;
}

/* Hover Effects - Preserve on all devices (touch-friendly) */
.rayen3d-container:hover .rayen3d-card,
.rayen3d-container:focus-within .rayen3d-card {
    transform: rotate3d(1, 1, 0, 25deg);
    box-shadow: 0 5px 45px rgba(0, 204, 255, 0.342);
}

.rayen3d-container:hover .rayen3d-card .rayen3d-footer .rayen3d-social .rayen3d-social_icons,
.rayen3d-container:focus-within .rayen3d-card .rayen3d-footer .rayen3d-social .rayen3d-social_icons {
    transform: translateZ(50px);
    box-shadow: rgba(5, 71, 17, 0.2) -5px 20px 10px;
}

.rayen3d-container:hover .rayen3d-card .rayen3d-logo .rayen3d-circle2,
.rayen3d-container:focus-within .rayen3d-card .rayen3d-logo .rayen3d-circle2 {
    transform: translateZ(60px);
}

.rayen3d-container:hover .rayen3d-card .rayen3d-logo .rayen3d-circle3,
.rayen3d-container:focus-within .rayen3d-card .rayen3d-logo .rayen3d-circle3 {
    transform: translateZ(80px);
}

.rayen3d-container:hover .rayen3d-card .rayen3d-logo .rayen3d-circle4,
.rayen3d-container:focus-within .rayen3d-card .rayen3d-logo .rayen3d-circle4 {
    transform: translateZ(100px);
}

.rayen3d-container:hover .rayen3d-card .rayen3d-logo .rayen3d-circle5,
.rayen3d-container:focus-within .rayen3d-card .rayen3d-logo .rayen3d-circle5 {
    transform: translateZ(120px);
}

/* Media Queries for Responsiveness */

/* Mobile: < 600px - Smaller, stacked if needed */
@media (max-width: 599px) {
    :root {
        --card-size: 250px;
        --glass-inset: 6px;
    }
    
    .rayen3d-container {
        max-width: 90%;
        aspect-ratio: 1 / 1;
    }
    
    .rayen3d-content {
        padding: clamp(10%, 35%, 27%) 8% 0 8%;
        text-align: left;
    }
    
    .rayen3d-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        bottom: 1rem;
        justify-content: flex-start; /* Left-align in stacked mode */
    }
    
    .rayen3d-footer .rayen3d-social {
        order: 2;
        width: 100%;
        justify-content: flex-start;
    }
    
    /* Reduce hover tilt on mobile for better touch */
    .rayen3d-container:hover .rayen3d-card,
    .rayen3d-container:focus-within .rayen3d-card {
        transform: rotate3d(1, 1, 0, 15deg);
    }
}

/* Tablet: 600px - 1023px - Medium adjustments */
@media (min-width: 600px) and (max-width: 1023px) {
    :root {
        --card-size: 280px;
    }
    
    .rayen3d-container {
        max-width: 280px;
    }
    
    .rayen3d-content {
        padding: clamp(30%, 30%, 65%) 15% 0 10%;
        text-align: left;
    }
    
    .rayen3d-footer .rayen3d-social {
        gap: 0.75rem;
        justify-content: flex-start;
    }
}

/* Desktop: > 1024px - Full size */
@media (min-width: 1024px) {
    :root {
        --card-size: 320px; /* Slightly larger for big screens */
    }
    
    .rayen3d-container {
        max-width: var(--card-size);
    }
    
    .rayen3d-content {
        padding: 100px 60px 0 30px; /* Fallback to original for precision */
        text-align: left;
    }
}

/* High DPI/Retina displays - Enhance shadows */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .rayen3d-card,
    .rayen3d-circle {
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); /* Subtle inner glow */
    }
}

/* Ų¢ŁˆŲ§ŲŖŲ§Ų± ŲÆŲ§ŪŒŲ±Ł‡ā€ŒŲ§ŪŒ Ł†Ų¦ŁˆŁ†ŪŒ ā€” ŁŁ‚Ų· ŲØŲ§ Ł‡Ų§ŁˆŲ± ŲøŲ§Ł‡Ų± Ł…ŪŒŲ´Ł‡ */
.rayen3d-avatar-circle {
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%) translateZ(-200px) scale(0.1);
    width: 160px;
    height: 160px;
    border-radius: 50%;
    overflow: hidden;
    border: 6px solid transparent;
    background: 
        radial-gradient(circle at 30% 30%, rgba(0,255,255,0.8), transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(255,0,255,0.6), transparent 50%),
        #00000088;
    box-shadow: 
        0 0 60px rgba(0,255,255,0.8),
        0 0 100px rgba(255,0,255,0.5),
        inset 0 0 40px rgba(0,0,0,0.6);
    opacity: 0;
    pointer-events: none;
    z-index: 999;
    transition: all 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    backdrop-filter: blur(8px);
    transform-style: preserve-3d;
}

.rayen3d-avatar-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    transform: translateZ(20px);
    filter: brightness(1.1) contrast(1.3);
}

/* Ł‡Ų§ŁˆŲ± Ų±ŁˆŪŒ Ś©Ų§Ų±ŲŖ ā†’ Ų¢ŁˆŲ§ŲŖŲ§Ų± ŲøŲ§Ł‡Ų± Ł…ŪŒŲ´Ł‡ */
.rayen3d-container:hover .rayen3d-avatar-circle,
.rayen3d-container:focus-within .rayen3d-avatar-circle {
    opacity: 1;
    transform: translateX(-50%) translateZ(80px) translateY(-20px) scale(1);
    border-color: rgba(255, 0, 255, 0.404);
    box-shadow: 
        0 0 120px rgba(0,255,255,1),
        0 0 180px rgba(255,0,255,0.8),
        0 20px 40px rgba(0,0,0,0.8);
}