@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  :root {
    counter-reset: headings 0;
  }
  
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/source-sans-pro-v21-latin-ext_latin_cyrillic-ext_cyrillic-regular.woff2')
       format('woff2');
}

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/source-sans-pro-v21-latin-ext_latin_cyrillic-ext_cyrillic-600.woff2')
       format('woff2');
}

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/source-sans-pro-v21-latin-ext_latin_cyrillic-ext_cyrillic-700.woff2')
       format('woff2');
}

    .product-img {
    height: 220px;
}
.product-img img  {
    height: 100%;
    width: 100%;
    object-fit: contain
}

    .category_tab_content{
    display: none;
  }
  .category_tab_content.active{
    display: block;
  }
  .category_title button.active{F
    color: #000 !important;
    background: white !important;
  }
  body {
    font-weight: normal;
    font-size: 1rem;
   font-family: 'Source Sans Pro', sans-serif;
    line-height: normal;
    font-style: normal;
  }
/*contact*/
/******STYLING WHATSAPP START**********/
.fixed-whatsapp {
    width: 60px;
    height: 60px;
    background: #b91c1c;
    position: fixed;
    bottom: 20px;
    z-index: 1000;
    right: 20px;
    color: #fff;
    animation: 1s infinite wpAnim;
    box-shadow: 0 0 0 18px transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 22px
}

.fixed-whatsapp:hover a {
    color: #fff;
}



@keyframes wpAnim {
    0% {
        box-shadow: 0 0 0 0 #b91c1c
    }
}

/******STYLING WHATSAPP START**********/
.fixed-whatsapp {
    width: 50px;
    height: 50px;
    background: var(--main-color);
    position: fixed;
    bottom: 20px;
    z-index: 1000;
    right: 20px;
    color: #fff;
    animation: 1s infinite wpAnim;
    box-shadow: 0 0 0 18px transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 20px
}

.fixed-whatsapp:hover a {
    color: #fff;
}



@keyframes wpAnim {
    0% {
        box-shadow: 0 0 0 0 var(--main-color)
    }
}

  
  #header {
    transition: 0.4s ease-in-out;
  }

  #header.isSticky {
    position: fixed !important;
    background:#000 !important;
    transform: translateY(-0px) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a shadow for effect */
  }
  .header-right button{
      color:black;
  }
 
#header .hamburger{
    border-color:white;
    color:white !important;
}
/* кнопка навигации слайдера */
.pt-nav-btn {
  /* позиционирование */
  position: absolute!important;
  right: 0.5rem!important;          /* было right-2 (8 px) */
  top: 50%!important;               /* top-1/2 */
  transform: translateY(-50%)!important;      /* -translate-y-1/2 */

  /* оформление */
  display: flex!important;
  align-items: center!important;    /* items-center */
  justify-content: center!important;/* justify-center */
  width: 64px!important;            /* ← вместо w‑9 (36 px) */
  height: 64px!important;           /* ← вместо h‑9 (36 px) */
  background: #f6f6f6!important;    /* ← вместо bg‑white/70 */
  box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06)!important; /* shadow */

  /* интерактивность */
  pointer-events: auto!important;
  transition: background .2s ease-in!important; /* изменили transition */
  z-index: 99!important;            /* ← вместо z-[99] */
}

.pt-nav-next {
    right: inherit!important;
    left: 0.5rem!important;
    transform: rotate(180deg) !important
    
}
/* Скрываем кнопки по умолчанию */

.productsFullSwiper .pt-nav-btn {
  opacity: 0;                   /* полностью прозрачные */
  pointer-events: none;         /* не перехватывают клики */
  transition: background .2s ease-in, opacity .2s ease-in;
}

/* При наведении на слайдер показываем кнопки */
.productsFullSwiper:hover .pt-nav-btn {
  opacity: 1;                   /* плавно проявляются */
  pointer-events: auto;         /* снова кликабельны */
}
.line {
    margin: 10px 0;
    height: 1px;
    border-bottom: 1px solid #d4d4d4!important;
}
  .key-features li  {
    background-image: url(/assets/img/check.png);
    background-repeat: no-repeat;
    padding-left: 20px;
    background-position: left 5px;
}
 .product-img {
    height: 270px;
}
.product-img img  {
    height: 100%;
    width: 100%;
    object-fit: contain
}

/* Helper so that transition works on explicit max‑height */
.submenu2 {
max-height: 0;
}

.submenu2 li a {
color: black!important;
border-bottom: 1px solid #a0a0a0;
width: 100%;
display: inline-block;
padding: 5px 0;
}

/* убрать линию только у последнего пункта */
.submenu2 li:last-child a{
  border-bottom:none;
}

 .key-features ul li{
    list-style: none!important;
}
.key-features ul {
    padding-left: 0!important;
    font-size: 15px!important;
}

/* эффект при наведении */
.pt-nav-btn:hover {
  background: #d4d4d4!important;
}
#header .header-right button{
    color:white !important;
}
  button {
    cursor: pointer;
    background: transparent;
    border: none;
  }
  input,
  textarea,
  select {
    outline: none;
  }
  /*mobile sidebar*/

  #mobile_navbar {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-100%);
  }
  #mobile_navbar.active_navbar {
    transform: translateX(0%);
    visibility: visible;
    opacity: 1;
  }
  .overlay {
    display: none;
  }
  /*mobile sidebar*/
 .hero-pagination {
    height: 6px;
    bottom: 40px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(0, 0, 0, 0);
  }

  @media (min-width: 768px) {
    .hero-pagination {
      background: rgba(0, 0, 0, 0);
    }
  }
  /* progress */
  .autoplay-progress {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 10;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
  }

  .autoplay-progress svg {
    --progress: 0;
    position: absolute;
    left: 0;
    top: 0px;
    z-index: 10;
    width: 100%;
    height: 100%;
    stroke-width: 4px;
    stroke:white;
    fill: none;
    stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
    stroke-dasharray: 125.6;
    transform: rotate(-90deg);
  }
 
  .swiper-pagination-bullet {
    width: 40px !important;
    border-radius: 10px !important;
    height: 100% !important;
    background: #fff !important;
  }
  .svgMap-map-wrapper {
    background: transparent !important;
  }
  .hero_swiper_content {
    transform: translateX(-100%);
    transition: 0.3s ease-in-out;
  }
  .hero_swiper_content.active_content {
    transform: translateX(0);
  }
  .svgMap-map-wrapper {
    background: transparent !important;
  }

  
  /* Poppins Fonts */
  @font-face {
    font-family: "Poppins";
    src: url("/assets/fonts/Poppins-Black.ttf") format("truetype");
    font-weight: 900; /* Black */
    font-style: normal;
  }

  @font-face {
    font-family: "Poppins";
    src: url("/assets/fonts/Poppins-BlackItalic.ttf") format("truetype");
    font-weight: 900;
    font-style: italic;
  }

  @font-face {
    font-family: "Poppins";
    src: url("/assets/fonts/Poppins-Bold.ttf") format("truetype");
    font-weight: 700; /* Bold */
    font-style: normal;
  }

  @font-face {
    font-family: "Poppins";
    src: url("/assets/fonts/Poppins-BoldItalic.ttf") format("truetype");
    font-weight: 700;
    font-style: italic;
  }

  @font-face {
    font-family: "Poppins";
    src: url("/assets/fonts/Poppins-ExtraBold.ttf") format("truetype");
    font-weight: 800; /* Extra Bold */
    font-style: normal;
  }

  @font-face {
    font-family: "Poppins";
    src: url("/assets/fonts/Poppins-ExtraBoldItalic.ttf") format("truetype");
    font-weight: 800;
    font-style: italic;
  }

  @font-face {
    font-family: "Poppins";
    src: url("/assets/fonts/Poppins-ExtraLight.ttf") format("truetype");
    font-weight: 200; /* Extra Light */
    font-style: normal;
  }

  @font-face {
    font-family: "Poppins";
    src: url("/assets/fonts/Poppins-ExtraLightItalic.ttf") format("truetype");
    font-weight: 200;
    font-style: italic;
  }

  @font-face {
    font-family: "Poppins";
    src: url("/assets/fonts/Poppins-Light.ttf") format("truetype");
    font-weight: 300; /* Light */
    font-style: normal;
  }

  @font-face {
    font-family: "Poppins";
    src: url("/assets/fonts/Poppins-LightItalic.ttf") format("truetype");
    font-weight: 300;
    font-style: italic;
  }

  @font-face {
    font-family: "Poppins";
    src: url("/assets/fonts/Poppins-Medium.ttf") format("truetype");
    font-weight: 500; /* Medium */
    font-style: normal;
  }

  @font-face {
    font-family: "Poppins";
    src: url("/assets/fonts/Poppins-MediumItalic.ttf") format("truetype");
    font-weight: 500;
    font-style: italic;
  }

  @font-face {
    font-family: "Poppins";
    src: url("/assets/fonts/Poppins-Regular.ttf") format("truetype");
    font-weight: 400; /* Regular */
    font-style: normal;
  }

  @font-face {
    font-family: "Poppins";
    src: url("/assets/fonts/Poppins-RegularItalic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
  }

  @font-face {
    font-family: "Poppins";
    src: url("/assets/fonts/Poppins-SemiBold.ttf") format("truetype");
    font-weight: 600; /* Semi Bold */
    font-style: normal;
  }

  @font-face {
    font-family: "Poppins";
    src: url("/assets/fonts/Poppins-SemiBoldItalic.ttf") format("truetype");
    font-weight: 600;
    font-style: italic;
  }

  @font-face {
    font-family: "Poppins";
    src: url("/assets/fonts/Poppins-Thin.ttf") format("truetype");
    font-weight: 100; /* Thin */
    font-style: normal;
  }

  @font-face {
    font-family: "Poppins";
    src: url("/assets/fonts/Poppins-ThinItalic.ttf") format("truetype");
    font-weight: 100;
    font-style: italic;
  }
}
  .white_logo{
      display:block;
  }
  /*.black_logo{*/
  /*    display:block;*/
  /*}*/
   /*#header.isSticky .white_logo{*/
   /*    display:block;*/
   /*}*/
   /*#header.isSticky .black_logo{*/
   /*    display:none;*/
   /*}*/
  
    #header .submenu_desk{
      background:#000;
      color:white;
   }
   .submenu li {
        padding:10px 0;
       width:100%;
       border-bottom:1px solid #ddd;
   }
   .submenu li::last-child{
       border-bottom:none !important;
   }
   .submenu li a{
      
       display:block;
       color:#fff !important;
   }
   .heroLiner{
background: linear-gradient(to bottom, #000000, rgba(25, 44, 58, 0));

   }
 
   
   .styled-button {
  position: relative;
  padding: 0rem 1.5rem;
  font-size: 1rem; 
  color: #ffffff;
  background: linear-gradient(to bottom, #171717, #242424);
  border-radius: 9999px;
  cursor: pointer;
  transform: translateY(2px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 1), 0 5px 10px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap:10px;
  border: 1px solid #292929;
}

.styled-button::before {
  content: "";
  position: absolute;
  top: -2px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  background: linear-gradient(to bottom, #292929, #000000);
  z-index: -1;
  border-radius: 9999px;
  transition: all 0.2s ease;
  opacity: 1;
}

 
.styled-button .inner-button ,.about-button{
  position: relative; /* Ensure relative positioning for pseudo-element */
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, #171717, #242424);
  width: 40px;
  height: 40px;
  margin-left: 20px;
  border-radius: 50%;
  box-shadow: 0 0 1px rgba(0, 0, 0, 1);
  border: 1px solid #252525;
  transition: all 0.2s ease;
}
.full-button{
   position: relative; /* Ensure relative positioning for pseudo-element */
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, #171717, #242424);
  min-width: 150px;
  width:fit-content;
  min-height: 45px;
  color:white;
  border-radius: 20px;
  box-shadow: 0 0 1px rgba(0, 0, 0, 1);
  border: 1px solid #252525;
  transition: all 0.2s ease;   
}

.styled-button .inner-button::before ,.about-button:before,.full-button:before{
  content: "";
  position: absolute;
  top: -2px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  background: linear-gradient(to bottom, #292929, #000000);
  z-index: -1;
  border-radius: 9999px;
  transition: all 0.2s ease;
  opacity: 1;
}
.styled-button .inner-button .icon ,.about-button i {
  filter: drop-shadow(0 10px 20px rgba(26, 25, 25, 0.9))
    drop-shadow(0 0 4px rgba(0, 0, 0, 1));
  transition: all 0.4s ease-in-out;
}
.styled-button .inner-button .icon:hover {
  filter: drop-shadow(0 10px 20px rgba(50, 50, 50, 1))
    drop-shadow(0 0 20px rgba(2, 2, 2, 1));
  transform: rotate(-35deg);
}

 
 
 
.about_cards {
  transition: width 0.8s ease, max-height 0.8s ease;
}
#main-image {
  transition: opacity 0.6s ease;
}

.about_cards p {
  transition: opacity 0.6s ease max-height .6s ease;
}
.about_cards[data-accordion="true"] button {
  transition: transform 0.5s ease-in-out;
}
.about_cards[data-accordion="false"] article {
  margin-bottom: 0;
}
.about_cards[data-accordion="true"] article {
  margin-bottom: 20px !important;
}
.about_cards[data-accordion="true"] button i {
  transform: rotate(45deg);
}
.about_cards[data-accordion="false"] p {
  opacity: 0;
  visibility: hidden;
}

@media screen and (max-width: 1024px) {
.about_cards[data-accordion="false"] p{
    max-height:0;
}
  .about_cards[data-accordion="true"] p {
    max-height: 500px;
    opacity: 1;
    visibility: visible; 
  }
}

.static-bg{
    background:linear-gradient(to right,rgba(0,0,0,0.8),rgba(0,0,0,0.8) 25%,rgba(0,0,0,0));
}

.blog_full :is(h2,h3,h4,h5,h6){
    font-weight:medium;
}
.blog_full ul li{
    position:relative;
    margin-bottom:10px;
    font-size: 19px;
}
.blog_full h3 , .blog_full p{
     font-size: 19px;
}
.blog_full ul li:last-child{
    margin-bottom:0;
}
.blog_full ul li:before{
  content:"•";
  padding-right:10px;
}

.productsTumbs .swiper-slide {
  width: 75px !important;
  height: 75px;
  overflow: hidden;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.3;
  border: 1px solid transparent;
}
@media screen and (min-width: 640px) {
  .productsTumbs .swiper-slide {
    width: 80px !important;
    height: 80px;
  }
}
.productsTumbs .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.productsTumbs .swiper-slide.swiper-slide-thumb-active {
  border-color:#181818;
  opacity: 1;
}
.productsFullSwiper .swiper-slide {
  border-radius: 12px;
  overflow: hidden;
}

.full-table {
  margin: 20px 0;
}
.full_table td:nth-child(1) {
font-weight:bold;
}
.full_table td:nth-child(2) {
  background: rgb(246 246 246 / 65%);
}

.full_table td {
  font-size: 14px;
}

.full_table table {
  border-radius: 10px;
  width: 100%;
}

table,
tr,
td {
  border: 1px solid #bbb;
  border-collapse: collapse;
}

.full_table td {
  padding: 10px 30px;
  overflow-wrap: break-word;
  line-height: 1.3;
}
.productsTumbs p,.productsFullSwiper p{
    display:none !important;
}



/*modal*/
.customModalContainer {
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}
.customModalContainer.show {
  overflow-y: auto;
  opacity: 1;
  visibility: visible;
} 
/*modal*/