.mt-5 { margin-top: 5px; }.mt-10 { margin-top: 10px; }.mt-15 { margin-top: 15px; }.mt-20 { margin-top: 20px; }.mt-25 { margin-top: 25px; }.mt-30 { margin-top: 30px; }.mt-35 { margin-top: 35px; }.mt-40 { margin-top: 40px; }.mt-45 { margin-top: 45px; }.mt-50 { margin-top: 50px; }.mt-55 { margin-top: 55px; }.mt-60 { margin-top: 60px; }.mt-65 { margin-top: 65px; }.mt-70 { margin-top: 70px; }.mt-75 { margin-top: 75px; }.mt-80 { margin-top: 80px; }.mt-85 { margin-top: 85px; }.mt-90 { margin-top: 90px; }.mt-95 { margin-top: 95px; }.mt-100 { margin-top: 100px; }.mt-105 { margin-top: 105px; }.mt-110 { margin-top: 110px; }.mt-115 { margin-top: 115px; }.mt-120 { margin-top: 120px; }.mt-125 { margin-top: 125px; }.mt-130 { margin-top: 130px; }.mt-135 { margin-top: 135px; }.mt-140 { margin-top: 140px; }.mt-145 { margin-top: 145px; }.mt-150 { margin-top: 150px; }.mt-155 { margin-top: 155px; }.mt-160 { margin-top: 160px; }.mt-165 { margin-top: 165px; }.mt-170 { margin-top: 170px; }.mt-175 { margin-top: 175px; }.mt-180 { margin-top: 180px; }.mt-185 { margin-top: 185px; }.mt-190 { margin-top: 190px; }.mt-195 { margin-top: 195px; }.mt-200 { margin-top: 200px; }
@media (min-width: 992px) { .mt-lg-60 { margin-top: 60px; }	 }
@media (min-width: 992px) { .mt-lg-200 {	margin-top: 200px; }	 }
.mb-5 { margin-bottom: 5px; }.mb-10 { margin-bottom: 10px; }.mb-15 { margin-bottom: 15px; }.mb-20 { margin-bottom: 20px; }.mb-25 { margin-bottom: 25px; }.mb-30 { margin-bottom: 30px; }.mb-35 { margin-bottom: 35px; }.mb-40 { margin-bottom: 40px; }.mb-45 { margin-bottom: 45px; }.mb-50 { margin-bottom: 50px; }.mb-55 { margin-bottom: 55px; }.mb-60 { margin-bottom: 60px; }.mb-65 { margin-bottom: 65px; }.mb-70 { margin-bottom: 70px; }.mb-75 { margin-bottom: 75px; }.mb-80 { margin-bottom: 80px; }.mb-85 { margin-bottom: 85px; }.mb-90 { margin-bottom: 90px; }.mb-95 { margin-bottom: 95px; }.mb-100 { margin-bottom: 100px; }.mb-105 { margin-bottom: 105px; }.mb-110 { margin-bottom: 110px; }.mb-115 { margin-bottom: 115px; }.mb-120 { margin-bottom: 120px; }.mb-125 { margin-bottom: 125px; }.mb-130 { margin-bottom: 130px; }.mb-135 { margin-bottom: 135px; }.mb-140 { margin-bottom: 140px; }.mb-145 { margin-bottom: 145px; }.mb-150 { margin-bottom: 150px; }.mb-155 { margin-bottom: 155px; }.mb-160 { margin-bottom: 160px; }.mb-165 { margin-bottom: 165px; }.mb-170 { margin-bottom: 170px; }.mb-175 { margin-bottom: 175px; }.mb-180 { margin-bottom: 180px; }.mb-185 { margin-bottom: 185px; }.mb-190 { margin-bottom: 190px; }.mb-195 { margin-bottom: 195px; }.mb-200 { margin-bottom: 200px; }
.pt-5 { padding-top: 5px; }.pt-10 { padding-top: 10px; }.pt-15 { padding-top: 15px; }.pt-20 { padding-top: 20px; }.pt-25 { padding-top: 25px; }.pt-30 { padding-top: 30px; }.pt-35 { padding-top: 35px; }.pt-40 { padding-top: 40px; }.pt-45 { padding-top: 45px; }.pt-50 { padding-top: 50px; }.pt-55 { padding-top: 55px; }.pt-60 { padding-top: 60px; }.pt-65 { padding-top: 65px; }.pt-70 { padding-top: 70px; }.pt-75 { padding-top: 75px; }.pt-80 { padding-top: 80px; }.pt-85 { padding-top: 85px; }.pt-90 { padding-top: 90px; }.pt-95 { padding-top: 95px; }.pt-100 { padding-top: 100px; }.pt-105 { padding-top: 105px; }.pt-110 { padding-top: 110px; }.pt-115 { padding-top: 115px; }.pt-120 { padding-top: 120px; }.pt-125 { padding-top: 125px; }.pt-130 { padding-top: 130px; }.pt-135 { padding-top: 135px; }.pt-140 { padding-top: 140px; }.pt-145 { padding-top: 145px; }.pt-150 { padding-top: 150px; }.pt-155 { padding-top: 155px; }.pt-160 { padding-top: 160px; }.pt-165 { padding-top: 165px; }.pt-170 { padding-top: 170px; }.pt-175 { padding-top: 175px; }.pt-180 { padding-top: 180px; }.pt-185 { padding-top: 185px; }.pt-190 { padding-top: 190px; }.pt-195 { padding-top: 195px; }.pt-200 { padding-top: 200px; }
.pb-5 { padding-bottom: 5px; }.pb-10 { padding-bottom: 10px; }.pb-15 { padding-bottom: 15px; }.pb-20 { padding-bottom: 20px; }.pb-25 { padding-bottom: 25px; }.pb-30 { padding-bottom: 30px; }.pb-35 { padding-bottom: 35px; }.pb-40 { padding-bottom: 40px; }.pb-45 { padding-bottom: 45px; }.pb-50 { padding-bottom: 50px; }.pb-55 { padding-bottom: 55px; }.pb-60 { padding-bottom: 60px; }.pb-65 { padding-bottom: 65px; }.pb-70 { padding-bottom: 70px; }.pb-75 { padding-bottom: 75px; }.pb-80 { padding-bottom: 80px; }.pb-85 { padding-bottom: 85px; }.pb-90 { padding-bottom: 90px; }.pb-95 { padding-bottom: 95px; }.pb-100 { padding-bottom: 100px; }.pb-105 { padding-bottom: 105px; }.pb-110 { padding-bottom: 110px; }.pb-115 { padding-bottom: 115px; }.pb-120 { padding-bottom: 120px; }.pb-125 { padding-bottom: 125px; }.pb-130 { padding-bottom: 130px; }.pb-135 { padding-bottom: 135px; }.pb-140 { padding-bottom: 140px; }.pb-145 { padding-bottom: 145px; }.pb-150 { padding-bottom: 150px; }.pb-155 { padding-bottom: 155px; }.pb-160 { padding-bottom: 160px; }.pb-165 { padding-bottom: 165px; }.pb-170 { padding-bottom: 170px; }.pb-175 { padding-bottom: 175px; }.pb-180 { padding-bottom: 180px; }.pb-185 { padding-bottom: 185px; }.pb-190 { padding-bottom: 190px; }.pb-195 { padding-bottom: 195px; }.pb-200 { padding-bottom: 200px; }
.pl-0 { padding-left: 0px; }.pl-5 { padding-left: 5px; }.pl-10 { padding-left: 10px; }.pl-15 { padding-left: 15px; }.pl-20{ padding-left: 20px; }.pl-25 { padding-left: 35px; }.pl-30 { padding-left: 30px; }.pl-35 { padding-left: 35px; }.pl-35 { padding-left: 35px; }.pl-40 { padding-left: 40px; }.pl-45 { padding-left: 45px; }.pl-50 { padding-left: 50px; }.pl-55 { padding-left: 55px; }.pl-60 { padding-left: 60px; }.pl-65 { padding-left: 65px; }.pl-70 { padding-left: 70px; }.pl-75 { padding-left: 75px; }.pl-80 { padding-left: 80px; }.pl-85 { padding-left: 80px; }.pl-90 { padding-left: 90px; }.pl-95 { padding-left: 95px; }.pl-100 { padding-left: 100px; }
.pr-0 { padding-right: 0px; }.pr-5 { padding-right: 5px; }.pr-10 { padding-right: 10px; }.pr-15 { padding-right: 15px; }.pr-20{ padding-right: 20px; }.pr-25 { padding-right: 35px; }.pr-30 { padding-right: 30px; }.pr-35 { padding-right: 35px; }.pr-35 { padding-right: 35px; }.pr-40 { padding-right: 40px; }.pr-45 { padding-right: 45px; }.pr-50 { padding-right: 50px; }.pr-55 { padding-right: 55px; }.pr-60 { padding-right: 60px; }.pr-65 { padding-right: 65px; }.pr-70 { padding-right: 70px; }.pr-75 { padding-right: 75px; }.pr-80 { padding-right: 80px; }.pr-85 { padding-right: 80px; }.pr-90 { padding-right: 90px; }.pr-95 { padding-right: 95px; }.pr-100 { padding-right: 100px; }
.f-700{font-weight: 700;}.f-600{font-weight: 600;}.f-500{font-weight: 500;}.f-400{font-weight: 400;}.f-300{font-weight: 300;}.gray-bg { background: #f7f7fd; }
.m-0 { margin-left: 0!important; margin-right:0!important; }

.white-bg { background: #fff; }.black-bg { background: #222; }.theme-bg { background: #222; }.primary-bg { background: #222; }
.white-color { color: #fff; }.black-color { color: #222; }.theme-color { color: #222; }.primary-color { color: #222; }[data-overlay] { position: relative; }
[data-overlay]::before { background: #000 none repeat scroll 0 0; content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; }[data-overlay="3"]::before { opacity: 0.3; }[data-overlay="4"]::before { opacity: 0.4; }[data-overlay="5"]::before { opacity: 0.5; }[data-overlay="6"]::before { opacity: 0.6; }[data-overlay="7"]::before { opacity: 0.7; }[data-overlay="8"]::before { opacity: 0.8; }[data-overlay="9"]::before { opacity: 0.9; }

/******************************************************
/// Modal, backdrop, tooltip...
******************************************************/
.modal-backdrop { --bs-backdrop-zindex: 9999999; }
.modal { --bs-modal-zindex: 99999999; --bs-modal-padding: 2rem; font-size: var(--font-size-16); }
.modal-title { text-transform: uppercase; color: var(--tg-theme-primary); }
.modal-body { font-size: var(--font-size-14); }
.btn-close { --bs-btn-close-opacity: 1; }
/******************************************************
/// txt
******************************************************/
.text_rotation_right { position: fixed; top: 60%; right: 20px; transform: translate(45%, -600%) rotate(90deg); text-transform: uppercase; font-size: 14px; z-index:99999999; color:#fff;  }
.hide-text { opacity: 0; transition: opacity 0.5s ease-in-out; }

/******************************************************
/// BG
******************************************************/
.overlay { display:none; opacity:0; position: fixed; inset: 0; pointer-events: none; z-index: 1; transition: var(--transition-2); }
.overlay.active { display:none; opacity:0;background: hsla(0, 0%, 0%, 0.7); pointer-events: all; transition: var(--transition-3); }

.bg-white { background: #fff }

.master-bg-dark-1 {
background: url('../images/bg/nacrt.png') no-repeat; background-size: contain; background-position: center;
margin-top: 90px; 
background-color: hsl(0 0% 100% / 1);
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #fff), color-stop(100%, #010203));
background-image: -webkit-radial-gradient(#374566, #010203);
background-image: -moz-radial-gradient(#374566, #010203);
background-image: -o-radial-gradient(#374566, #010203);
background-image: radial-gradient(#666666, #000000);
}

.tech_dots_bg { position: relative; display: flex; align-items: center; justify-content: center; width: 80vw; height: 20vh; }
.tech_dots_bg h1 { color: rgba(0,0,0,0.1); font-size: 7rem; font-weight: 800; text-transform: uppercase; }
.tech_dots_bg img { -o-object-fit: cover; object-fit: cover; height: 100%; pointer-events: none; position: absolute; width: 100%; z-index: 0; }
.tech_dots_bg svg { -webkit-animation: 20s popin infinite cubic-bezier(0.68, -0.6, 0.32, 1.6); animation: 20s popin infinite cubic-bezier(0.68, -0.6, 0.32, 1.6); height: 20px; transform-origin: 50%, 50%; width: 20px; }
.tech_dots_bg .corner { -webkit-animation: 10s rotate infinite cubic-bezier(0.87, 0, 0.13, 1); animation: 10s rotate infinite cubic-bezier(0.87, 0, 0.13, 1); -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; height: 20px; position: absolute; transform-origin: 50%; width: 20px; z-index: 5; }
.tech_dots_bg .corner:nth-of-type(2) { -webkit-animation-delay: -1s; animation-delay: -1s; }
.tech_dots_bg .corner:nth-of-type(3) { -webkit-animation-delay: -3s; animation-delay: -3s; }
.tech_dots_bg .corner:nth-of-type(4) { -webkit-animation-delay: -5s; animation-delay: -5s; }
.tech_dots_bg .tl { left: 1rem; top: 1rem; }
.tech_dots_bg .tl svg { -webkit-animation-delay: 1s; animation-delay: 1s; }
.tech_dots_bg .tl .cross::before { -webkit-animation-delay: -4s; animation-delay: -4s }
.tech_dots_bg .tl .cross::after { -webkit-animation-delay: -7s; animation-delay: -7s; }
.tech_dots_bg .tr { right: 1rem; top: 1rem; }
.tech_dots_bg .tr svg { -webkit-animation-delay: 4s; animation-delay: 4s; }
.tech_dots_bg .tr .cross::before { -webkit-animation-delay: 0s; animation-delay: 0s }
.tech_dots_bg .tr .cross::after { -webkit-animation-delay: -1s; animation-delay: -1s; }
.tech_dots_bg .bl { bottom: 1rem;left: 1rem; }
.tech_dots_bg .bl svg { -webkit-animation-delay: 5s; animation-delay: 5s; }
.tech_dots_bg .bl .cross::before { -webkit-animation-delay: -4s; animation-delay: -4s }
.tech_dots_bg .bl .cross::after { -webkit-animation-delay: -5s; animation-delay: -5s; }
.tech_dots_bg .br { bottom: 1rem; right: 1rem; }
.tech_dots_bg .br .cross::before { -webkit-animation-delay: -1s; animation-delay: -1s }
.tech_dots_bg .br .cross::after { -webkit-animation-delay: -2s; animation-delay: -2s; }
.cross { position: absolute; height: 25px; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); transform-origin: 50%; width: 25px; }
.cross::before, .cross::after { -webkit-animation: 10s cross infinite cubic-bezier(0.5, 0, 0.75, 0);         animation: 10s cross infinite cubic-bezier(0.5, 0, 0.75, 0); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; content: ""; position: absolute; opacity: 0; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); border: 1px solid #CCF955; border-radius: 50%; width: 0; height: 0; }

@-webkit-keyframes flash {
	0% { opacity: 0; }
	15% { opacity: 1; } 
	30% { opacity: 0; }
	66% { opacity: 1; }
}
@keyframes flash {
	0% { opacity: 0; }
	15% { opacity: 1; }
	30% { opacity: 0; }
	66% { opacity: 1; }
}
@-webkit-keyframes rotate {
	0% { transform: rotate(0turn); }
	100% { transform: rotate(2turn); }
}
@keyframes rotate {
	0% { transform: rotate(0turn); }
	100% { transform: rotate(2turn); }
}
@-webkit-keyframes popin {
	0% { transform: scale(1); }
	5% { transform: scale(0); }
	10% { transform: scale(1); }
}
@keyframes popin {
	0% { transform: scale(1); }
	5% { transform: scale(0); }
	10% { transform: scale(1); }
}
@-webkit-keyframes cross {
	0% { opacity: 0; }
	2.5% { opacity: 1; }
	5% { opacity: 0; height: 40px; width: 40px; }
}
@keyframes cross {
	0% { opacity: 0; }
	2.5% { opacity: 1; }
	5% { opacity: 0; height: 40px; 	width: 40px; }
}



/******************************************************
/// modeli
******************************************************/
/* specifikacije */
.specs-wrapper { max-width: 900px; margin: auto; padding: 2rem; font-family: sans-serif; }
.tabs { display: flex; border-bottom: 2px solid #ccc; margin-bottom: 1rem; gap: 1rem; }
.tab { background: none; border: none; padding: 0.75rem 1.5rem; font-weight: var(--tg-fw-bold); cursor: pointer; border-bottom: 3px solid transparent; transition: border-color 0.3s  outline: none; }
.tab.active, .tab:focus { border-color: var(--platinum); color: var(--red); }
.tab:focus-visible { outline: 2px solid black; }
/*.tab-content { display: block; }*/
/*.tab-content[hidden] { display: none; }*/

table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
th, td { text-align: left; padding: 0.75rem; border-bottom: 1px solid #ddd; }
th { width: 40%; }

.grid-short-spec { display: flex; flex-direction: column; gap: 6px;
  font-size: 0.8rem; font-weight: 600; color: white;
  position: absolute; top: 50px; left: 40px; z-index: 992;
  padding: 10px 14px; text-transform: uppercase; border-radius: 8px; line-height: 1.4;
  background: var(--raisin-black-1);
  transform: rotate(-7deg);
  border-right: 5px solid var(--raisin-black-3);
  border-bottom: 5px solid var(--raisin-black-3);
  box-shadow: 0 0 9em 1em hsl(0 0% 15% / 1);
}
.grid-short-spec span { display: flex;justify-content: space-between; gap: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 4px; }
.grid-short-spec span:last-child { border-bottom: none; }
.grid-short-spec span span:first-child { font-weight: 600; color: var(--white); /* or any suitable light color */ min-width: 100px; }
.grid-short-spec span span:last-child { text-align: right; flex-grow: 1; }



/******************************************************
/// gsap ticker
******************************************************/
.cloneable { justify-content: center;align-items: center;min-height: 100vh;display: flex;position: relative; }
.looping-words { height: 2.7em;padding-left: .1em;padding-right: .1em;font-size: 11vw;line-height: .9;position: relative; }
.looping-words__list { text-align: center;text-transform: uppercase;white-space: nowrap;flex-flow: column;align-items: center;margin: 0;padding: 0;font-weight: 700;list-style: none;display: flex;position: relative; }
.looping-words__list.is--primary { color: var(--tg-theme-primary); }
.looping-words__list.is--gray { color: var(--light-grey); }
.looping-words__fade {  background-image: linear-gradient(180deg, var(--light-grey) 5%, transparent 40%, transparent 60%, var(--light-grey) 95%);pointer-events: none;width: 100%;height: 100%;position: absolute;top: 0;left: 0; }
.looping-words__fade.is--radial { background-image: radial-gradient(circle closest-side at 50% 50%, transparent 64%, var(--light-grey) 93%);width: 140%;display: block;left: -20%; }
.looping-words__selector { pointer-events: none;width: 100%;height: .9em;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); }
.looping-words__edge { border-top: .035em solid var(--tg-theme-primary);border-left: .035em solid var(--tg-theme-primary);width: .125em;height: .125em;position: absolute;top: 0;left: 0; }
.looping-words__edge.is--2 { left: auto;right: 0;transform: rotate(90deg); }
.looping-words__edge.is--3 { inset: auto 0 0 auto;transform: rotate(180deg); }
.looping-words__edge.is--4 { top: auto;bottom: 0;transform: rotate(270deg); }
.looping-words__containers { width: 100%;height: 100%;position: relative; overflow: hidden; }
.looping-words__p { margin: 0; font-size: 7rem; font-weight: 600; }


/******************************************************
/// ego_ticker
******************************************************/
.ego_ticker {margin: 0;position:relative;display: flex;justify-content: center;
align-items: center;text-align: center;padding: 60px 0 250px 0;z-index:999;
background-color: hsl(0 0% 100% / 1);background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #fff), color-stop(100%, #010203));background-image: -webkit-radial-gradient(#374566, #010203);background-image: -moz-radial-gradient(#374566, #010203);background-image: -o-radial-gradient(#374566, #010203);background-image: radial-gradient(#666666, #000000);
}
.ticker-subtitle { color: var(--white);font-size: var(--fs-7);font-weight: var(--fw-500);
text-transform: uppercase;letter-spacing: 12px;text-shadow: 0 7px hsla(0, 0%, 0%, 0.4);
margin: 240px 0 0 0;position:relative;font-family: var(--ff-unbounded);}
.ticker-title{overflow:hidden;  margin: 0; color: var(--white); font-family: var(--ff-unbounded);
-webkit-filter: drop-shadow(1px 10px 1px rgba(0, 0, 0, 0.5)); 
background: linear-gradient(to bottom, #cccccc 9%, #474747 3%, #b8b8b8 20%, #b8b8b8 27%, #d9d9d9 40%, #3e3e3e 78%);
 background-position: 0 1vw; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
 text-transform: uppercase; font-size: 120px; font-weight: 800; }
.ticker-title.ticker { height: 1.5em; overflow:hidden; position: relative; text-align:center; }
.ticker-title.ticker > * { margin:0 auto; padding: 0; transition:all .3s; display: flex;  
align-items:center; justify-content:center; }
.ticker-title.ticker:hover { animation-play-state: paused; }
.ticker-inner { transition: margin-top 0.5s ease-in-out; display: flex; flex-direction: column; }
.ticker-inner > span { height: 1.5em; display: flex; align-items: center; justify-content: center; }


/******************************************************
/// dekoracije
******************************************************/
.vidaGlava, .vidaGlava_menu { position: relative; border-radius: 50px; background: #adadad; background: -moz-linear-gradient(-45deg, #adadad 0%, #e1e1e1 51%, #dddddd 68%, #f6f6f6 100%); background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#adadad), color-stop(51%,#e1e1e1), color-stop(68%,#dddddd), color-stop(100%,#f6f6f6)); background: -webkit-linear-gradient(-45deg, #adadad 0%,#e1e1e1 51%,#dddddd 68%,#f6f6f6 100%); background: -o-linear-gradient(-45deg, #adadad 0%,#e1e1e1 51%,#dddddd 68%,#f6f6f6 100%); background: -ms-linear-gradient(-45deg, #adadad 0%,#e1e1e1 51%,#dddddd 68%,#f6f6f6 100%); background: linear-gradient(135deg, #adadad 0%,#e1e1e1 51%,#dddddd 68%,#f6f6f6 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#adadad', endColorstr='#f6f6f6',GradientType=1 ); -moz-box-shadow: 0px 2px 4px #000; -webkit-box-shadow: 0px 2px 4px #000; box-shadow: 0px 2px 4px #000, -1px -1px 5px rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.1); z-index:9; }
.vidaRez, .vidaRez_menu { -moz-box-shadow: inset 0px 1px 8px #222; -webkit-box-shadow: inset 0px 1px 8px #222; box-shadow: inset 0px 1px 12px #222; transform:rotate(160deg); -ms-transform:rotate(160deg); -webkit-transform:rotate(160deg); border-radius: 2px; margin-left:-2px; border-bottom:1px solid rgba(255,255,255,0.3); }
.vidaGlava { top: -70px; left: 50%; transform: translateX(-58%); width: 16px; height: 16px;z-index:9; }
.vidaRez { height: 5px; width: 17px; margin-top: 5px; margin-left:-2px; }

p.neumorphic { position: relative; display:block; width: 100%; font-size: 140px; line-height: 120px; font-weight: 800; color:#414141; text-transform: uppercase; text-shadow: 2px 2px 8px rgba(56, 50, 50, 0.4), -2px -4px 8px rgb(0 0 0 / 20%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/******************************************************
/// btn
******************************************************/
/* reset za gumbe 
.btn-reset { all: unset; display: inline-block; padding: 0; margin: 0; color: inherit; line-height: 1; background: transparent; border: none; font: inherit; border-radius: 0; cursor: pointer; box-shadow: none; transition: background-color 0.3s ease, color 0.3s ease; }
.btn-reset:hover { background-color: transparent; color: transparent; }
*/

.btn-group { position:relative;top: 51px;display: flex;flex-wrap: wrap;justify-content: center;align-items: center;}

.btn-tech { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: #eee; border-radius: 50%; width: 48px; height: 48px; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; }
.btn-tech:hover { background: rgba(255, 255, 255, 0.15); box-shadow: 0 0 10px rgba(0, 255, 255, 0.5); color: #fff; }
 
.btn { color: var(--white); font-family: var(--tg-other-font-family); font-size: var(--fs-6); font-weight: var(--fw-500);
    letter-spacing: 1px; text-transform: uppercase;
    display: flex; justify-content: center; align-items: center;
    gap: 10px;
    padding: 13px 34px;
    clip-path: var(--polygon-1);
    transition: var(--transition-1);
}
.shad-black-btn { display: flex; align-items: center; justify-content: center; }
.shad-black-btn > div { display: flex; }
.shad-black-btn > div button { display: block; position: relative; cursor: pointer; background: #282322; border: solid 5px transparent; background-clip: padding-box; border-radius: 100%; padding: 1rem; margin: 1.5rem; box-shadow: -3px -3px 13px 3px #302b29, 4px 4px 15px 6px #0c0b0b; animation: depress 75ms linear; }
.shad-black-btn > div button i { color: #5c524f; text-shadow: -1px -1px black, 1px 1px #4e4643; }
.shad-black-btn > div button.active > i { color: #69af74; }
.shad-black-btn > div button:active { animation: press 50ms linear; animation-fill-mode: forwards; }
.shad-black-btn > div button:before { content: ""; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; margin: -5px; border: 1px solid #332d2c; border-radius: inherit; }
.shad-black-btn > div button:after { content: ""; position: absolute; z-index: -2; top: 0; right: 0; bottom: 0; left: 0; margin: -5px; border-radius: inherit; background: linear-gradient(-30deg, #2a2625 0%, #201c1b 100%); }

@keyframes press {
  100% { box-shadow: -1px -1px 10px 2px #12100f, 3px 3px 10px 3px #302b29; }
}
@keyframes depress {
  0% { box-shadow: -1px -1px 10px 2px #12100f, 3px 3px 10px 3px #302b29; }
  100% { box-shadow: 7px 7px 20px 5px #0f0d0d, -3px -3px 20px 3px #463e3c; }
}
.shad-black-btn button { outline: none; border: none; background: none; }
.shad-btn { position: relative; padding: 13px 15px 9px 50px; font-family: var(--tg-other-font-family); font-size: var(--fs-6); font-weight: var(--fw-500); gap: 10px; margin: 10px; border-radius: 30px; background: #202025; transition: var(--transition-1); letter-spacing: 3px; color: #AEACB0; text-transform: uppercase; display: flex; justify-content: center;  align-items: center; font-weight: 600; box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.1), 0 10px 13px rgba(0, 0, 0, 0.7); overflow: hidden; cursor: pointer; }
.shad-btn i { padding: 10px 12px; gap: 10px; margin: 10px; border-radius: 30px; background: var(--light-gray); transition: var(--transition-1);  letter-spacing: 1px; color: var(--raisin-black-3); }
.shad-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.1) 60%, rgba(255, 255, 255, 0));
  transform: translateX(-201%);
  filter: blur(5px);
  animation: shineBtn 6s linear infinite 0.5s;
}
.shad-btn:hover {
transition: all 400ms linear; 
  box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.1), 0 10px 13px rgba(0, 0, 0, 0.3);

}


@keyframes shineBtn {
  0% {
    transform: translateX(-201%);
  }
  50% {
    transform: translateX(201%);
  }
  100% {
    transform: translateX(201%);
  }
}

.Elastic {
  background: #5ac7ae;
  border: 0;
  color: #fff;
  font-size: 20px;
  margin: 10px;
  outline: none;
  padding: 20px 40px;
  position: relative;
  transition: transform 250ms cubic-bezier(0.25, 0.25, 0.5, 1.9);
  transform: translateZ(0);
  overflow: visible;
}

.Elastic::before,
.Elastic::after,
.Elastic-content::before,
.Elastic-content::after {
  background: #5ac7ae;
  border-radius: 50%;
  content: "";
  display: block;
  position: absolute;
  transition: transform 250ms cubic-bezier(0.25, 0.25, 0.5, 1.9);
}

.Elastic::before,
.Elastic::after {
  height: 10px;
  left: 0;
  transform: scaleY(0);
  width: 100%;
}

.Elastic::before {
  top: -4px;
}

.Elastic::after {
  bottom: -4px;
}

.Elastic-content::before,
.Elastic-content::after {
  width: 10px;
  height: 100%;
  top: 0;
  transform: scaleX(0);
}

.Elastic-content::before {
  left: -4px;
}

.Elastic-content::after {
  right: -4px;
}

.Elastic:hover,
.Elastic:focus {
  transform: scale(1.1);
}
.Elastic:hover::before, .Elastic:hover::after,
.Elastic:hover .Elastic-content::before,
.Elastic:hover .Elastic-content::after,
.Elastic:focus::before,
.Elastic:focus::after,
.Elastic:focus .Elastic-content::before,
.Elastic:focus .Elastic-content::after {
  transform: none;
}

.Elastic--red,
.Elastic--red::before,
.Elastic--red::after,
.Elastic--red .Elastic-content::before,
.Elastic--red .Elastic-content::after {
  background: #e34e47;
}

.Elastic--blue,
.Elastic--blue::before,
.Elastic--blue::after,
.Elastic--blue .Elastic-content::before,
.Elastic--blue .Elastic-content::after {
  background: #409ad7;
}

.Elastic--purple,
.Elastic--purple::before,
.Elastic--purple::after,
.Elastic--purple .Elastic-content::before,
.Elastic--purple .Elastic-content::after {
  background: #8c4ba9;
}

.Elastic--yellow,
.Elastic--yellow::before,
.Elastic--yellow::after,
.Elastic--yellow .Elastic-content::before,
.Elastic--yellow .Elastic-content::after {
  background: #efc241;
}

.Elastic--how,
.Elastic--how::before,
.Elastic--how::after,
.Elastic--how .Elastic-content::before,
.Elastic--how .Elastic-content::after {
  background: transparent;
  border: 1px solid #aaa;
  color: #aaa;
}


/* <button class="Elastic">
    Green
  </div>
</button> */



.shad-black-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}
.shad-black-btn > div {
  display: flex;
}
.shad-black-btn > div button {
  display: block;
  position: relative;
  cursor: pointer;
  background: #282322;
  border: solid 5px transparent;
  background-clip: padding-box;
  border-radius: 100%;
  padding: 1rem;
  margin: 1.5rem;
  box-shadow: -3px -3px 13px 3px #302b29, 4px 4px 15px 6px #0c0b0b;
  animation: depress 75ms linear;
}
.shad-black-btn > div button i {
  color: #5c524f;
  text-shadow: -1px -1px black, 1px 1px #4e4643;
}
.shad-black-btn > div button.active > i {
  color: #69af74;
}
.shad-black-btn > div button:active {
  animation: press 50ms linear;
  animation-fill-mode: forwards;
}
.shad-black-btn > div button:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: -5px;
  border: 1px solid #332d2c;
  border-radius: inherit;
}
.shad-black-btn > div button:after {
  content: "";
  position: absolute;
  z-index: -2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: -5px;
  border-radius: inherit;
  background: linear-gradient(-30deg, #2a2625 0%, #201c1b 100%);
}

@keyframes press {
  100% {
    box-shadow: -1px -1px 10px 2px #12100f, 3px 3px 10px 3px #302b29;
  }
}
@keyframes depress {
  0% {
    box-shadow: -1px -1px 10px 2px #12100f, 3px 3px 10px 3px #302b29;
  }
  100% {
    box-shadow: 7px 7px 20px 5px #0f0d0d, -3px -3px 20px 3px #463e3c;
  }
}
.shad-black-btn button {
  outline: none;
  border: none;
  background: none;
}

.btn-primary { background-color: var(--light-gray); }
    .btn-primary:is(:hover, :focus ){ background: var(--raisin-black-1); }
.btn-secondary { background: var(--white); color: var(--light-gray); }
    .btn-secondary:is(:hover, :focus ) { background: var(--raisin-black-1); color: var(--white); }
.btn-link:is(:hover, :focus ) { color: var(--light-gray); }