/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.7.1784024946
Updated: 2026-07-14 13:29:06

*/
*,*::before,*::after {box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #FEC202;
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: content-box;
}

/* Firefox */
* {
  scrollbar-width: thin;              /* auto | thin | none */
  scrollbar-color: #FEC202 transparent; 
}

/* Для IE/старих Edge (обмежена підтримка) */
html {
  -ms-overflow-style: scrollbar;      /* auto | none | scrollbar */
}

 

header {
  width: 100%!important;
  position: fixed !important;
  top: 0;
  left: 0;
  min-height: 80px;
  width: 100%;
  z-index: 44;
  background: #fff;
}

header .left-menu li.about_item {
	display: none;
	width: 0!important;
}

.logo-wrapper {
  position: relative;
}

.logo-wrap {
  position: relative;
  height: 86px;
  border: grey solid 1px-;
  width: 100%;

}
.logo-wrap .static_logo,
.logo-wrap .sticky_logo
 {
  position: absolute; 
  top: 0;
  left: 0;
  transition: opacity 0.4s ease; 
  border: grey solid 1px-;

}


.logo-wrap .static_logo {
  opacity: 1;
  z-index: 2;
  
  border: black solid 1px-;
  background: #ccc;
  width: 170px;
  height: 86px; 
}

.logo-wrap .sticky_logo {
  
  width: 170px;
  height: 60px;
  opacity: 0;
  z-index: 1;
 border: grey solid 1px-;

}

.logo-wrap {
  position: relative;
}

.logo-wrap img {
  
  transition: opacity 0.4s ease;
}

.static_logo {
  opacity: 1;
  z-index: 2;
}

.sticky_logo {
  opacity: 0;
  z-index: 1;
}

header.sticky { 
  width: 100%!important;
  z-index: 33;
}


header.sticky .static_logo {
  opacity: 0;
}

header.sticky .sticky_logo {
  opacity: 1;
}


.products .product {
	text-align: center;
}

.products .product .woocommerce-loop-product__title {
	text-align: center;
}


a {
  position: relative;
  text-decoration: none; /* прибираємо стандартне підкреслення */
  color: #000; /* колір тексту */
}

a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px; /* товщина лінії */
  background: #000; /* колір лінії */
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s ease;
}

a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}


.tp-image-wrapper {
  position: relative;
}

.tp-image-wrapper .tp-image,
.tp-image-wrapper .tp-image-hover {
  /*position: absolute;
  top: 0;
  left: 0;*/
  transition: opacity 0.4s ease;
}

.tp-image-wrapper .tp-image {
  opacity: 1;
  z-index: 1;
}

.tp-image-wrapper .tp-image-hover {
  opacity: 0;
  z-index: 2;
}

.tp-image-wrapper:hover .tp-image {
  opacity: 0;
}

.tp-image-wrapper:hover .tp-image-hover {
  opacity: 1;
}
 

.archive .e-loop-item .images-wrapper {
	position: relative;
}

.archive .e-loop-item .images-wrapper .image,
.archive .e-loop-item .images-wrapper .image-hover {
    transition: opacity 0.4s ease;
}



.archive .e-loop-item .images-wrapper .image {
   opacity: 1;
  z-index: 1;
} 

.archive .e-loop-item .images-wrapper .image-hover {
  opacity: 0;
  z-index: 2;

  position: absolute;
  top: 0;
  left: 0;
}
 

.archive .e-loop-item .images-wrapper:hover .image {
  opacity: 0;
}

.archive .e-loop-item .images-wrapper:hover .image-hover {
  opacity: 1;
}