/* Shadow ekipa */
.shadow-crew { background-color: hsl(0 0% 100% / 1); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; max-width: 100%; margin: auto; }
.card-wrapper { perspective: 1500px; margin: 100px 30px; position: relative; }
.card { height: 260px; border-radius: 30px; border-top-right-radius: 250px; background-color: var(--raisin-black-2);  box-shadow: 0 15px 30px rgba(58, 20, 31, 0.4);  display: flex; position: relative; transition: transform 0.35s ease; transform-style: preserve-3d;  margin: 0; padding: 0; }
.card-content { opacity: 0; transition: opacity 1.5s ease; width: 100%; height: 100%; }
.fade-in { opacity: 1; }
.spinner { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 4px solid var(--tg-theme-secondary); border-top: 4px solid var(--raisin-black-1); border-radius: 50%; animation: spin 1s linear infinite; z-index: 10; }

@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.card--left { transform: rotateX(8deg) rotateY(14deg) rotateZ(0deg); }
.card--center { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
.card--right { transform: rotateX(8deg) rotateY(-14deg) rotateZ(0deg); }
.shine-overlay { overflow: hidden; }
.navbar:hover .shine { display: block; }
.shine { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #fff; background: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,0)), color-stop(50%, rgba(255,255,255,0.8)), to(rgba(255,255,255,0))); background: linear-gradient(to right, rgba(255,255,255,0) 0, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%); pointer-events: none; z-index: 3; opacity: 0; transform: skew(30deg); animation: shine 0.75s linear 1; }
.shine.auto { display: block; }

@keyframes shine {
  0% { left: -50%; opacity: 0; }
  50% { left: 25%; opacity: 0.5; }
  100% { left: 100%; opacity: 0; }
}

.card-info { padding: 4rem 0 0 2rem; flex-grow: 1; position: relative; z-index: 9; }
.card-name { position: relative; font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: var(--platinum); top: -38px; max-width: 235px; }
.card-role { line-height: 18px; margin-bottom: 10px; font-size: 0.72rem; font-weight: 400; color: var(--tg-theme-primary); display: block; margin-bottom: 1rem; text-transform: uppercase; }
.card-name .titula1, .card-name .titula2 { font-size: .475em; line-height: .475rem; position: relative; }
.card-name .titula1 { top: 0px; }
.card-name .titula2 { top: -6px; font-weight:600; }
.contact-info { border-radius: 20px; background-color: var(--raisin-black-3);  box-shadow: 10px 10px 25px rgba(58, 20, 31, 0.1); 
width: 300px; position: absolute; z-index: 2; left: -20px; bottom: -120px; display: flex; flex-direction: column; padding: 1rem 1.5rem; 
transform: translateZ(20px); transition: transform 0.3s ease; }

.contact-label { font-size: 0.75rem; color: var(--tg-theme-primary); text-transform: uppercase; }
.contact-value { margin-top: 0.25rem; font-size: 0.85rem; font-weight: 600; color: var(--platinum); word-break: break-word; }
.card-image { width: 280px; position: relative; }
.card-image img { display: block; position: absolute; width: 320px; left: 95%; bottom: -67px; transform: translateZ(50px); transition: transform 0.3s ease; }
.second .card-image { width: 250px; position: relative; }
.second .card-image img { width: 250px; bottom: 280px; position: relative; }
.treci .card-image img { width: 250px; bottom: 240px; position: relative; }
.team-social { position: absolute; right: 0px; bottom: 0px; /* right: -4px; bottom: -2px; transition: 0.4s; */ z-index: 9; }
.team-social .icon-btn { display:none; opacity:0;  border-radius: 0; width: 50px; height: 50px; line-height: 50px; border: 0; background: var(--tg-theme-primary); color: var(--tg-color-white-default); padding: 0; font-size: 26px; border-radius: 15px 0 0 0; display: block; position:relative; }
.team-social .social-wrap {  display:none; opacity:0; position: absolute; bottom: 0; right: 0; transition: 0.4s; width: max-content; opacity: 0; visibility: hidden; z-index: 99; }
.team-social .social-wrap a { display: block; width: 50px; height: 50px; line-height: 50px; border-radius: 0; text-align: center; background: var(--tg-theme-primary); color: var(--tg-color-white-default); margin-bottom: 0; }
.team-social .social-wrap a:hover { background: var(--tg-color-white-default); color: var(--tg-theme-primary); }
.team-social:hover .social-wrap { opacity: 1; visibility: visible; bottom: 50px; z-index: 99; }
.team-social .social-wrap a:first-child { border-radius: 15px 0 0 0; }
.team-social:hover .icon-btn { border-radius: 0; }
.contact-vcard { border-radius: 20px;  
width: 110px; height: 110px; position: absolute; z-index: 999999; right: 0px; bottom: 0px; display: flex; flex-direction: column; 
transform: translateZ(20px); transition: transform 0.3s ease; }

.vcard { width: 110px; height: 110px; display: block; position: absolute; z-index:999999; right: 0; bottom: 0;transform: translateZ(50px);transition: transform 0.3s ease; }
.vcard img { width: 96px; height: 96px; padding: 8px; border-radius: 5px; background-color: var(--raisin-black-1); transition: transform 1s; transform: scale(1); cursor: zoom-in; }
.vcard img:hover { transition: transform 1s; transform: scale(2.5); }
.icon-badge { width: 2.5rem; height: 2.5rem; font-size: 1.25rem; display: flex; align-items: center; justify-content: center; background-color: #FFF; border-radius: 50%; font-weight: 700; color: var(--platinum); box-shadow: 3px 5px 10px 0 rgba(58, 20, 31, 0.15); right: 1rem; bottom: 1rem; position: absolute; z-index: 2; }

.card-image.marko img { bottom: -57px; }
.card-image.ana img { bottom: 304px; left: 128%; }
.card-image.tomislav img { bottom: -88px; }
.card-image.jerko img { bottom: -72px; }
.card-image.luka img { bottom: -90px; }
.card-image.peter img { bottom: -122px; }

@media (max-width: 991.98px) {
	
	.team-area-2 { padding-top:0px; }
	.team-area-2 .mt-100 { margin-top: 50px; }
	.team-area-2 .mt-200 { margin-top: 0; }
	.team-social { right: -1px; }
	.card-wrapper { perspective: unset; margin: 0 15px 30px 15px; }
	.card { transform: unset; transform-style: unset; flex-direction: column; align-items: center; text-align: center; height: auto; padding-bottom: 0rem; padding-top: 1rem; border-top-right-radius: 30px; }
	.card-name { max-width: 100%; top: 0px; }
	.card-info { padding: 1rem 1rem 0 1rem; }
	.card-image img { position: relative; width: 100%; left: auto; margin-top: -2rem; }
	.second .card-image img { bottom: 0; }
	.contact-info { position: static; transform: none; width: 100%; margin-top: 0; text-align: center; background: transparent; box-shadow: none; }
	
	
	
	.vcard { display: none; opacity: 1; }
	
	
	
	.icon-badge { position: static; margin-top: 1rem; }
	.card-image.marko img { bottom: -1px; }
	.card-image.ana img { bottom: -1px; left: 50%; transform: translateX(48px); }
	.card-image.tomislav img { bottom: -1px; }
	.card-image.jerko img { bottom: -1px; }
	.card-image.luka img { bottom: -1px; left: 50%; transform: translateX(3px); }
	.card-image.peter img { bottom: -1px; left: 50%; transform: translateX(3px); }
}