@charset "UTF-8"; :root { --e-global-color-primary: #5933FF; } .eel-team-grid .grid-item { box-sizing: border-box; } .eel-team-grid .grid-item .ee--team-img { position: relative; overflow: hidden; border-radius: 16px; transition: all 0.5s ease; } .eel-team-grid .grid-item .ee--team-img .eel-team-img-area { position: relative; z-index: 1; overflow: hidden; } .eel-team-grid .grid-item .ee--team-img .eel-team-img-area .eel-team-img-box { overflow: hidden; border-radius: 16px; margin: 0 auto; } .eel-team-grid .grid-item .ee--team-img .eel-team-img-area .eel-team-img { width: 100%; height: auto; display: block; margin: 0 auto; position: relative; transition: all 0.5s ease; z-index: 0; -o-object-fit: cover; object-fit: cover; } .eel-team-grid .grid-item .ee--team-img .eel-team-img-area .eel-image-below-bg { position: absolute; top: 0; left: 0; width: 100%; border-radius: 10px; z-index: -1; } .eel-team-grid .grid-item .ee--team-img .eel-image-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: inherit; transition: background 0.3s, opacity 0.3s; z-index: 1; } .eel-team-grid .grid-item .ee--team-img .eel-name-deg-wrap { background: #fff; padding: 26px 24px 24px 24px; border-radius: 8px; text-align: center; } .eel-team-grid .grid-item .ee--team-img .eel-name-deg-wrap.inside { position: absolute; bottom: 24px; left: 24px; right: 24px; z-index: 2; } .eel-team-grid .grid-item .ee--team-img .eel-name-deg-wrap .eel-name { margin: 0 0 5px; } .eel-team-grid .grid-item .ee--team-img:hover img { transform: scale(1.1); } .eel-team-grid.skin1 .ee--team-img { display: flex; align-items: center; padding: 16px; gap: 20px; background: #F1F2FA; } .eel-team-grid.skin1 .ee--team-img .eel-team-left { width: 50%; } .eel-team-grid.skin1 .ee--team-img .eel-team-right { width: 50%; } .eel-team-grid.skin1 .ee--team-img .eel-team-right .eel-name-deg-wrap { background: transparent; padding: 0px 0px 20px; border-radius: 0; text-align: left; color: #000; } .eel-team-grid.skin1 .ee--team-img .eel-team-right .eel-team-grid-social.default { border-top: 1px solid #D9D9D9; } .eel-team-grid.skin1 .ee--team-img .eel-team-right .eel-team-grid-social.default ul { justify-content: flex-start; } .eel-team-grid.skin2 .eel-team-img-area { padding: 20px 20px 0; } .eel-team-grid.skin2 .eel-team-img-area .eel-image-below-bg { height: 80%; background: var(--e-global-color-primary); } .eel-team-grid-social { position: relative; } .eel-team-grid-social .eel-team-social-hover { transition: all 0.3s ease; } .eel-team-grid-social .eel-team-social-hover a, .eel-team-grid-social ul li a:not(.eel-popup-trigger) { background: var(--e-global-color-primary); color: #fff; transition: all 0.5s ease; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 100%; } .eel-team-grid-social .eel-team-social-hover a svg, .eel-team-grid-social ul li a:not(.eel-popup-trigger) svg { fill: currentColor; height: 1em; } .eel-team-grid-social .eel-team-social-hover a path, .eel-team-grid-social ul li a:not(.eel-popup-trigger) path { fill: currentColor; } .eel-team-grid-social .eel-team-social-hover a:hover, .eel-team-grid-social ul li a:not(.eel-popup-trigger):hover { background: #000; transform: translateY(-5px); } .eel-team-grid-social ul { list-style: none; display: flex; align-items: center; gap: 1em; margin: 0; padding: 0; } .eel-team-grid-social.hover_show ul { position: absolute; transition: all 0.8s ease; opacity: 0; } .eel-team-grid-social.hover_show:hover .eel-team-social-hover { opacity: 0; visibility: hidden; } .eel-team-grid-social.hover_show:hover ul { z-index: 2; opacity: 1; } .eel-team-grid-social.default { padding-top: 20px; } .eel-team-grid-social.posi_left, .eel-team-grid-social.posi_right, .eel-team-grid-social.posi_botttom_left, .eel-team-grid-social.posi_botttom_right { position: absolute; z-index: 1; } .eel-team-grid-social.posi_left ul, .eel-team-grid-social.posi_right ul, .eel-team-grid-social.posi_botttom_left ul, .eel-team-grid-social.posi_botttom_right ul { flex-direction: column; gap: 10px; } .eel-team-grid-social.posi_left, .eel-team-grid-social.posi_right { top: 16px; } .eel-team-grid-social.posi_left.hover_show ul, .eel-team-grid-social.posi_right.hover_show ul { transform: translateY(-100%); } .eel-team-grid-social.posi_left.hover_show:hover ul, .eel-team-grid-social.posi_right.hover_show:hover ul { transform: translateY(-40%); } .eel-team-grid-social.posi_botttom_left, .eel-team-grid-social.posi_botttom_right { bottom: 16px; } .eel-team-grid-social.posi_botttom_left.hover_show ul, .eel-team-grid-social.posi_botttom_right.hover_show ul { transform: translateY(50px); } .eel-team-grid-social.posi_botttom_left.hover_show:hover ul, .eel-team-grid-social.posi_botttom_right.hover_show:hover ul { transform: translateY(-100%); } .eel-team-grid-social.posi_left, .eel-team-grid-social.posi_botttom_left { left: 16px; } .eel-team-grid-social.posi_right, .eel-team-grid-social.posi_botttom_right { right: 16px; } .eel-popup-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100vw; height: 100vh; overflow: auto; background: rgba(0, 0, 0, 0.5); } .eel-popup-content { background: #fff; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 40px 50px; border-radius: 8px; max-width: 550px; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.2); } .eel-popup-close { position: absolute; top: 10px; right: 16px; font-size: 24px; color: #888; cursor: pointer; } .eel-popup-details { font-size: 15px; color: #333; line-height: 1.6; margin-top: 10px; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .eel-popup-header { margin-bottom: 12px; } .eel-popup-name .eel-name { font-size: 18px; color: #222; margin-bottom: 2px; margin: 0 0 5px; } .eel-popup-designation { font-size: 15px; color: #888; margin-bottom: 6px; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .eel-team-grid.skin3 .eel-team-img-box .eel-image-content { position: absolute; padding: 30px; left: 0; width: 100%; height: 100%; top: 0; display: flex; border-radius: inherit; align-items: end; overflow: hidden; } .eel-team-grid.skin3 .eel-team-img-box .eel-image-content .eel-description { position: relative; z-index: 2; opacity: 0; transition: opacity 0.4s ease; } .eel-team-grid.skin3 .eel-team-img-box .eel-image-content::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity 0.4s ease; } .eel-team-grid.skin3 .eel-team-img-box:hover .eel-image-content .eel-description { opacity: 1; } .eel-team-grid.skin3 .eel-team-deg-content .eel-name-deg-wrap { display: flex; justify-content: space-between; align-items: center; width: 100%; } .eel-team-grid { /* Skin 04 - Hover Overlay (structural/positioning only — overridable styles are outside) */ } .eel-team-grid.skin4 .grid-item .ee--team-img { position: relative; overflow: hidden; } .eel-team-grid.skin4 .grid-item .ee--team-img .eel-team-hover-content { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; opacity: 0; pointer-events: none; } .eel-team-grid.skin4 .grid-item .ee--team-img:hover .eel-team-hover-content { opacity: 1; pointer-events: auto; } /* skin4 overridable defaults — 4-class specificity so Elementor inline controls (skin4_overlay_*) win */ .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content { background: rgba(17, 17, 17, 0.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: opacity 0.4s ease; color: #fff; } /* skin4 .eel-name-deg-wrap reset — kept at 4-class specificity so Elementor wrap_* controls can win */ .eel-team-grid.skin4 .ee--team-img .eel-name-deg-wrap { background: transparent; } .eel-team-grid.skin4 .ee--team-img .eel-name-deg-wrap .eel-name { margin: 0 0 4px; } .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content.overlay2 { top: 50%; left: 50%; right: auto; bottom: auto; width: clamp(170px, 62%, 230px); aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); color: #111827; text-align: center; transform: translate(-50%, -50%) scale(0.96); transition: opacity 0.4s ease, transform 0.4s ease; } .eel-team-grid.skin4 .grid-item .ee--team-img:hover .eel-team-hover-content.overlay2 { transform: translate(-50%, -50%) scale(1); } .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content.overlay2 .eel-name-deg-wrap { padding: 0; border-radius: 0; text-align: center; } .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content.overlay2 .eel-name { color: #111827; font-size: 15px; font-weight: 700; line-height: 1.2; } .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content.overlay2 .eel-designation { color: #6b7280; font-size: 12px; line-height: 1.3; } .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content.overlay2 .eel-team-grid-social { position: relative; top: auto; right: auto; bottom: auto; left: auto; padding-top: 12px; } .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content.overlay2 .eel-team-grid-social ul { position: static; opacity: 1; transform: none; flex-direction: row; justify-content: center; gap: 8px; } .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content.overlay2 .eel-team-grid-social ul li a:not(.eel-popup-trigger) { width: 22px; height: 22px; font-size: 10px; background: #ffffff; color: #111827; box-shadow: 0 6px 18px rgba(17, 24, 39, 0.12); } .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content.overlay2 .eel-team-grid-social ul li:first-child a:not(.eel-popup-trigger) { background: #465cff; color: #ffffff; } /* skin4 .eel-name-deg-wrap reset — kept at 4-class specificity so Elementor wrap_* controls can win */ .eel-team-grid.skin4 .ee--team-img .eel-name-deg-wrap { background: transparent; } .eel-team-grid.skin4 .ee--team-img .eel-name-deg-wrap .eel-name { margin: 0 0 4px; } .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content.overlay2 { top: 50%; left: 50%; right: auto; bottom: auto; width: clamp(170px, 62%, 230px); aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); color: #111827; text-align: center; transform: translate(-50%, -50%) scale(0.96); transition: opacity 0.4s ease, transform 0.4s ease; } .eel-team-grid.skin4 .grid-item .ee--team-img:hover .eel-team-hover-content.overlay2 { transform: translate(-50%, -50%) scale(1); } .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content.overlay2 .eel-name-deg-wrap { padding: 0; border-radius: 0; text-align: center; } .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content.overlay2 .eel-name { color: #111827; font-size: 15px; font-weight: 700; line-height: 1.2; } .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content.overlay2 .eel-designation { color: #6b7280; font-size: 12px; line-height: 1.3; } .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content.overlay2 .eel-team-grid-social { position: relative; top: auto; right: auto; bottom: auto; left: auto; padding-top: 12px; } .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content.overlay2 .eel-team-grid-social ul { position: static; opacity: 1; transform: none; flex-direction: row; justify-content: center; gap: 8px; } .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content.overlay2 .eel-team-grid-social ul li a:not(.eel-popup-trigger) { width: 22px; height: 22px; font-size: 10px; background: #ffffff; color: #111827; box-shadow: 0 6px 18px rgba(17, 24, 39, 0.12); } .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content.overlay2 .eel-team-grid-social ul li:first-child a:not(.eel-popup-trigger) { background: #465cff; color: #ffffff; } .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content.overlay2 .eel-team-grid-social { position: relative; top: auto; right: auto; bottom: auto; left: auto; padding-top: 12px; } .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content.overlay2 .eel-team-grid-social ul { position: static; opacity: 1; transform: none; flex-direction: row; justify-content: center; gap: 8px; } .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content.overlay2 .eel-team-grid-social ul li a:not(.eel-popup-trigger) { width: 22px; height: 22px; font-size: 10px; background: #ffffff; color: #111827; box-shadow: 0 6px 18px rgba(17, 24, 39, 0.12); } .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content.overlay2 .eel-team-grid-social ul li:first-child a:not(.eel-popup-trigger) { background: #465cff; color: #ffffff; } /* Skin 05 - Slide-up info panel with hover contact reveal */ .eel-team-grid .ee--team-img.skin5 { position: relative; overflow: hidden; } .eel-team-grid .ee--team-img.skin5 .eel-team-img-area, .eel-team-grid .ee--team-img.skin5 .eel-team-img-box { overflow: hidden; } .eel-team-grid .ee--team-img.skin5 .eel-team-img-area .eel-team-img { transition: transform 1.3s ease; } .eel-team-grid .ee--team-img.skin5 .eel-name-deg-wrap { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; text-align: center; border-radius: 0; z-index: 2; } .eel-team-grid .ee--team-img.skin5 .eel-designation { color: #6E777D; } .eel-team-grid .ee--team-img.skin5 .eel-author-contact { margin-top: 0; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.5s ease, margin-top 0.5s ease, opacity 0.4s ease; } .eel-team-grid .ee--team-img.skin5 .eel-author-contact .eel-contact-inner { display: flex; flex-direction: column; gap: 14px; transform: translateY(12px); transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); } .eel-team-grid .ee--team-img.skin5 .eel-author-contact .eel-contact-item { display: flex; align-items: center; gap: 12px; background: #F2F3F5; color: #6E777D; font-weight: 500; border-radius: 100px; min-width: 215px; max-width: -moz-max-content; max-width: max-content; padding-right: 28px; transition: all 0.3s ease; } .eel-team-grid .ee--team-img.skin5 .eel-author-contact .eel-contact-item:hover { color: #2563eb; } .eel-team-grid .ee--team-img.skin5 .eel-author-contact .eel-contact-item .eel-contact-icon { flex-shrink: 0; height: 50px; width: 50px; border-radius: 100px; background: #2563eb; color: #fff; display: flex; align-items: center; justify-content: center; } .eel-team-grid .ee--team-img.skin5 .eel-author-contact .eel-contact-item .eel-contact-icon i, .eel-team-grid .ee--team-img.skin5 .eel-author-contact .eel-contact-item .eel-contact-icon svg { height: 1em; fill: currentColor; font-size: 16px; } .eel-team-grid .ee--team-img.skin5:hover .eel-team-img-area .eel-team-img { transform: scale(1.15); } .eel-team-grid .ee--team-img.skin5 .eel-author-contact { display: grid; justify-content: center; } .eel-team-grid .ee--team-img.skin5:hover .eel-author-contact { max-height: 200px; margin-top: 20px; opacity: 1; } .eel-team-grid .ee--team-img.skin5:hover .eel-author-contact .eel-contact-inner { transform: translateY(0); } .eel-team-grid .ee--team-img.skin5 .eel-image-content:not(.has-description) .eel-description { display: none; }