.header-part.sticky {
	background-color: #000;
}
.single-post .header-part {
	box-shadow: 0px 1px 1px 0px rgba(0, 0, 1, 0.75);
}
.header-part > .e-con-inner {
	transition: all 0.3s ease-out;
}
.header-part.sticky > .e-con-inner {
	padding-top: 5px !important;
	padding-bottom: 5px !important;
}
.header-menu ul > li.active > a {
	font-weight: 500 !important;
}
.header-menu ul > li.menu-btn > a {
	border: 3px solid #fff !important;
	border-radius: 999px;
	color: #fff !important;
	font-weight: 500 !important;
	padding: 11px 21px !important;
	display: inline-flex;
	gap: 10px;
	align-items: center;
}
.header-menu ul > li.menu-btn > a:hover {
	background-color: #fff !important;
	color: var( --e-global-color-secondary ) !important;
}
.header-menu ul > li > a.elementor-item-active {
	font-weight: 500 !important;
}
.kontakt-form select,
.kontakt-form input,
.kontakt-form textarea {
	padding: 14px 22px !important;
}
.kontakt-form textarea {
	padding: 20px 22px !important;
}
.elementor-button-icon {
	width: 25px;
	height: 25px;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 50%;
	background-color: var( --e-global-color-secondary );
}
.elementor-button:hover .elementor-button-icon {
	background-color: #fff;
} 
.elementor-button-icon svg {
	width: 11px !important;
	height: 11px !important;
}
.elementor-button:hover .elementor-button-icon svg {
	fill: var( --e-global-color-secondary ) !important;
} 
.header-menu ul > li.menu-btn > a .elementor-button-icon {
	background-color: #fff;
}
.header-menu ul > li.menu-btn > a:hover .elementor-button-icon {
	background-color: var( --e-global-color-secondary ) !important;
}
.header-menu ul > li.menu-btn > a .elementor-button-icon svg {
	fill: var( --e-global-color-secondary ) !important;
} 
.header-menu ul > li.menu-btn > a:hover .elementor-button-icon svg {
	fill: #fff !important;
} 
.hero-slider .swiper-pagination {
	display: flex;
    flex-direction: column;
    gap: 9px;
    width: auto !important;
    position: absolute;
    right: 45px;
    left: auto !important;
    top: 50%;
    transform: translateX(-50%);
}
.hero-slider .swiper-pagination .swiper-pagination-bullet {
	width: 3px!important;
	height: 64px!important;
	border-radius: 0;
	opacity: 1;
	background-color: #fff !important;
}
.hero-slider .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
	background-color: var( --e-global-color-secondary ) !important;
}

/* ---------- CARD ---------- */
.hover-blog{
  --hb-blue: var( --e-global-color-secondary );      /* panel colour */
  --hb-text-h: 0;       /* height reserved for the description — tune this */
  --hb-gap:10px;          /* space between title and text */
  --hb-pad:20px;          /* panel padding */
  --hb-speed:.5s;
  --hb-ease:cubic-bezier(.22,.61,.36,1);

  position:relative;
  overflow:hidden;
  border-radius:10px;
  aspect-ratio:1/1;       /* delete if you set a height in Elementor */
}

/* gradient so the title is readable at rest, fades out on hover */
.hover-blog::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-100%;height:55%;
  background:var( --e-global-color-secondary );
  transition:opacity var(--hb-speed) var(--hb-ease);
  pointer-events:none;
  z-index:1;
	border-radius: 10px;
	transition: all 0.3s ease-out;
}
.hover-blog:hover::after{bottom: 0}

/* ---------- SLIDING PANEL ---------- */
.hover-blog .hover-info{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:2;
  background:transparent;

  /* at rest: pushed down so only the title shows */
  transform:translateY(calc(var(--hb-text-h) + var(--hb-gap)));
  transition:transform var(--hb-speed) var(--hb-ease),
             background-color var(--hb-speed) var(--hb-ease);
  will-change:transform;
}
.hover-blog:hover .hover-info{
  transform:translateY(0);
}

/* remove Elementor's default widget spacing */
.hover-blog .hover-info > .elementor-widget{margin-block-end:0 !important}

/* ---------- TITLE ---------- */
.hover-blog .hover-title,
.hover-blog .hover-title *{
  color:#fff !important;
  margin:0 !important;
}

/* ---------- TEXT ---------- */
.hover-blog .hover-text{
  height:var(--hb-text-h);
  margin-top:var(--hb-gap) !important;
  overflow:hidden;
  opacity:0;
  transition: opacity .35s ease .12s !important;
}
.hover-blog:hover .hover-text{opacity:1;height:auto;}

.hover-blog .hover-text,
.hover-blog .hover-text *{color:#fff !important}
.hover-blog .hover-text p{margin:0}



@media (prefers-reduced-motion:reduce){
  .hover-blog *,.hover-blog::after{transition:none !important}
}


.scroll-top {
	opacity: 0;
	visibility: hidden;
}
.scroll-top.sticky {
	opacity: 1;
	visibility: visible;
}

.diamond-wrap{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  grid-template-rows:1fr 1fr !important;
  gap:16px !important;
  width:75% !important;
  max-width:560px;
  aspect-ratio:1 !important;
  margin:14.6% auto !important;
  padding:0 !important;
  transform:translate(var(--e-con-translate-x,0),var(--e-con-translate-y,0)) rotate(45deg) !important;
}
.diamond-wrap > .diamonds{
  position:relative !important;
  overflow:hidden !important;
  border:1.5px solid var( --e-global-color-secondary ) !important;
  border-radius:10px !important;
  padding:0 !important;
  min-height:0 !important;
}
.diamond-wrap .diamond,
.diamond-wrap .diamonds .elementor-widget-container,
.diamond-wrap .diamonds figure{
  position:absolute !important;
  inset:0 !important;
  margin:0 !important;
  width:100% !important;
  height:100% !important;
}
.diamond-wrap .diamonds img{
  width:100% !important;
  height:100% !important;
  display:block;
  object-fit:cover !important;
  transform:rotate(-45deg) scale(1.45);
  transition:transform .45s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.diamond-wrap .diamonds:hover img{
  transform:rotate(-45deg) scale(1.6);
}
.diamond-wrap .diamond:before {
	position: absolute;
	content: '';
	display: flex;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 1);
    z-index: 1;
    mix-blend-mode: screen;
}
@media (prefers-reduced-motion:reduce){
  .diamond-wrap .diamonds img{transition:none}
}
@media (max-width:600px){
  .diamond-wrap{gap:10px !important}
  .diamond-wrap > .diamonds{border-radius:6px !important}
}