html {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  font-size: 16px;

}

body {
  
  color: #404040;
  overflow:hidden;
/*font-family: 'Poppins';*/
font-family: 'Montserrat', sans-serif;
font-weight: 400;
}
a{
  text-decoration: none;
  color:inherit;
}
a:visited, a:hover{
  color:inherit;
}
font{
background: -webkit-linear-gradient(275.15deg, #79123B 4.08%, #EB1C5A 72.2%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}

.mobile{
  display: none;
}
.row{
  position: relative;
  padding: 0vw 3vw;
}
.arrow {
  position: absolute;
  right: -.5vw;
  top: 1.5vw;
  border: solid white;
  border-width: 0 .2vw .2vw 0;
  display: inline-block;
  padding: 0.3vw;
}


.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.arrow-right,
.arrow-left,
.long-arrow-right,
.long-arrow-left {
  display: block;
  margin: -.3vw .3vw;
  width: 1.5vw;
  height: 1.5vw;
  border-top: 0.3vw solid white;
  border-left: 0.3vw solid white;
  transition: all 1s 0s ease;
}

.long-arrow-right::after,
.long-arrow-left::after {
  content: "";
  display: block;
  width: 0.3vw;
  height: 3.5vw;
  background-color: white;
  transform: rotate(-45deg) translate(1.1vw, 0.4vw);
  left: 0;
  top: 0;
  transition: all 1s 0s ease;
}

.arrow-right,
.long-arrow-right {
  transform: rotate(135deg);
}

h1,h2,h3,h4,h5,h6{
  z-index: 2;
  position: relative;
  text-align: center;
  color: #404040;
  font-weight: 400;
}
h1 {
  font-size: 3.5rem;
}
h2 {
  font-size: 3rem;
}
h3 {
  font-size: 2.5rem;

}

h4 {
  position: relative;
  font-size: 2rem;
}
h5 {
  font-size: 1.5rem;
}

h6 {
  font-size: 1rem;
}
p {
  font-size: 1rem;
}

span{
  font-size: 1rem;
}


section.fade::before,
footer#footer::before,
div.fade::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 0;
}




/* Форма зворотного зв'язку */
.wpcf7-form-container {
  position: fixed;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  min-width: 40%;
    max-width: 50%;
    min-height: 30vh;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
}
.wpcf7-email-submit-container{
  box-sizing: border-box;
  padding: 20% 5%;
}

.wpcf7-form p{
/*  padding: 20px 0;*/
text-align: center;
font-weight: bold;
  }
.wpcf7-form span{
  display: block;
  width: 60%;
  margin: auto;
}
/* Стилізація поля для номера телефону */
.wpcf7-form input[type="tel"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 2px solid #79123B;
    border-radius: 5px;
    color: #79123B;
}

/* Стилізація кнопки "Готово" */
.wpcf7-form input[type="submit"] {
/*  position: relative;
  left: 50%;*/
/*  transform: translateX(-50%);*/
    background-color: #EB1C5A;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 12px 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.wpcf7-form input[type="submit"]:hover {
    background-color: #79123B;
}
.wpcf7-form p{
  font-family: 'Lobster';
  padding: 15px 0;
 color: #EB1C5A;
}
/* Стилізація тексту та маркера на формі */
.wpcf7-form label {

    color: #EB1C5A;
    font-weight: bold;
}

/* Стилізація тексту помилки, який виводиться над полями */
.wpcf7-response-output.wpcf7-validation-errors {
    color: #79123B;
}

/* Стилізація успішного повідомлення, яке виводиться після відправлення форми */
.wpcf7-mail-sent-ok {
    color: #EB1C5A;
    font-weight: bold;
}


/* ----------------------------- */

header nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
/*  min-height: 50px;*/
/*  max-height: 150px;*/
/*  background-color: rgba(227, 226, 223, 0.5);*/
background: linear-gradient(86deg, rgba(227,226,223,.5) 0%, rgba(227,226,223,1)60%);
  z-index: 4;
/*  font-family: 'Philosopher';*/
font-family: 'Montserrat', sans-serif;
/*  overflow: hidden;*/
}

header nav:hover::before{
  right: -1vw;
}



header nav ul {
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
  justify-content: center;
  width: 90%;
  font-size: 1.2vw;
      margin: 0 0 0 10%;
  color: black;
}



.push {
  margin-left: auto;
}

header nav ul li {
  padding: .5vw 1.5vw .5vw .5vw;
  margin: 0vw 1vw;
  position: relative;

}

header nav ul li.menu-item{
background: rgba(156, 156, 156, .1);
box-shadow: 0px 0px 0px rgba(156, 156, 156, .1);
transition: all .5s 0s ease;
position: relative;
z-index: 5;
/*background:  linear-gradient(white, white) padding-box,
              linear-gradient(to left, #79123B 4.08%, #EB1C5A 72.2%) border-box;
  border-radius: 10px;
  border: 1px solid transparent;
  box-shadow: 8px 12px 30px 0px #00000059;
  justify-content: space-between;
  position: relative;
  background-size: 200% 100%;
 animation: shimmer 2s infinite linear;*/
}
header nav ul li.menu-item.current_page_item{
   background: rgba(156, 156, 156, .5);
    box-shadow: 3px 2px 4px rgba(156, 156, 156, .3);
    border-radius: 10px;
    border-top-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }


header nav ul li.menu-item:hover{
   background: rgba(156, 156, 156, .5);
    box-shadow: 3px 2px 4px rgba(156, 156, 156, .3);
    border-radius: 10px;
    border-top-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;

}


header nav ul li.menu-item{

  }
header nav ul li.menu-item:hover::before{
  left:-1.5vw;
top:0px;
opacity: 1;
}
header nav ul li.menu-item::before {
content: '';
position: absolute;
left:0px;
top:1.5vw;
transform: translateY(-50%);
height: 100%;
width: 1.5vw;
background-image: url(../images/leaves1.png);
background-size: contain;
background-repeat: no-repeat;
transition: all .5s;
opacity: 0;
z-index: 1;

  }

li.logo {
/*  width: 8vw;*/
  height: 4vw;
  margin: 0;
/*  padding: 0;*/

}


#logo{
  margin: 0 20px;
}
.logo img {
  width: 100%;
  height: 100%;
}


header#mob_head {
  display: none;
}

/*FIRST BLOCK INDEX----------------------------------------*/

section#main {
  width: 100%;
  min-height: 650px;
  position: relative;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 99%, 0 80%);
  clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 99%, 0 80%);
/*  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat*/;
  margin-bottom: -150px;
  z-index: -1;
/*  padding: 5vw 0 3vw;*/
}

#main .container {
  position: relative;
  top:185px;
  padding: 15px;
/*  width: 380px;*/
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 2;
  margin: auto;
/*font-family: 'Arial';*/
font-family: 'Montserrat', sans-serif;

    background-color: rgba(156,156,156,.9);
    /* border-radius: 15px; */
    row-gap: 20px;
    padding: 40px 20px;
}

section#main::before{
 content: '';
  position: absolute;
  bottom:0;
  left:0;
/*background-color: rgba(156, 156, 156, 0.5);*/
background-image: url(../images/p5.jpg);
filter: brightness(-2);
  background-size: cover;
background-position: 50% 50%;
  background-repeat: no-repeat;
height: 100%;
width: 100%;
z-index: -2;

}

section#main::after{
 content: '';
  position: absolute;
  bottom: -10px;
  background-color: rgba(255, 255, 255, 0.5);
  clip-path: polygon( 0 50%, 50% 90%, 100% 50%, 100% 60%, 50% 100%, 0 60%);
  width: 100%;
/*  margin: auto;*/
  height: 300px;
  z-index: 0;
}

section#main h3{
line-height:60px;
color:#232323;
}

section#main h6{
  text-transform: uppercase;
  color: #272727;
  padding: 20px 0 30px;
}

section#main span {
  padding: 10px 25px;
  background: linear-gradient(263.83deg, #950740 45.12%, #C3073F 72.21%);
  border-radius: 50px;
  color: white;
}


/*BENEFITS ------------------------------------------------*/

section#benefits {
  position: relative;
  background-color: rgba(156, 156, 156, 0.3);
  z-index: -2;
  padding: 200px 0 50px;


}

/*dashed line*/
section#benefits .circle img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  min-width: 500px;
  max-width: 900px;
  z-index: -1;
}
section#benefits .itemsContainer{
/*  width: 70%;*/
  padding: 0 55px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 40px;
}
section#benefits .item {
  position: relative;
  flex: 1 1 33%;
  color: #6D6D6D;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;


}

section#benefits .itemsContainer .dashed_circle{
  position: absolute;
  top:40%;
  left:50%;
  transform: translateX(-50%);
  width: 70vw;
}

section#benefits .item-info h5 {
  padding: 20px 0;
  font-weight: normal;
  color: #6D6D6D;
  min-height: 100px;
}
section#benefits .item .item-info {
  flex:1 1 auto;
     min-height: 200px;
}
section#benefits .item .circle {
  position: relative;
  width: 130px;
  height: 130px;
  color: white;
  flex:1 1 auto;
}

section#benefits .item .circle .innerCircle{
    position: absolute;
    top: 50%;
  left: 50%;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}


section#benefits .item .circle .innerCircle.first{

  background: #E571A080;

}


section#benefits .item .circle .innerCircle.second{
  background: #C62E5EB2;

}

section#benefits .item .circle .innerCircle.third{
    position: relative;
  background: #AF1C57;
  text-align: center;
}

section#benefits .item .circle .third b {
  font-size: 1.5rem;
  font-weight: normal;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}




.substrate {
  width: 100%;
  height: 100vw;
  position: absolute;
  top: 28vw;
  background-image: url(../images/section_bg.png);

  background-size: 100% 100%;
  z-index: -1;
}

.paper_separator{
  position:relative;
  width:100%;
  height:10vw;
  top:5vw;
  background-image:url('../images/paper_separator.png');
  background-size: 100% 100%;
  filter:brightness(150%);
  z-index:1;
}

.reverse{
  transform:rotate(180deg);
  top:-5vw;
}

.no-padding{
    top:0;
}
/* END OF BENEFITS ---------------------------------------------------- */

/* LOCATION ---------------------------------------------------- */

section#location {
  position: relative;
  
  background-image: url('../images/test.jpg');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  
}

section#location .location-container{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  justify-content: space-between;
  padding:55px 60px;
  column-gap: 40px;
}

section#location .location-info {
  flex: 1 1 45%;
  padding: 55px 0;
  position: relative;
/*  height: 100%;*/
  width: 100%;
/*  margin: auto;*/
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 300px;
}

section#location .location-info div {
  flex: 1 1 100%;
  display: flex;
  flex-direction: row;
  justify-content:center;

/*  width:100%;/*/
}
section#location .location-info div div{
  flex: 1 1 460px;
  display: flex;
  flex-direction: column;
  justify-content:flex-start;
  align-items:flex-start;
}
section#location .location-info div div h3,
section#location .location-info div div h5{
text-align: left;
flex: 0 0 50%;
color: white;

}

section#location .location-info div div h3{
  font-size: 2rem;
  padding-bottom: 30px;
}
section#location .location-info div div h5{
  font-size: 1.3rem;
}

section#location .location-info div img {
  width: 25%;
  height:100%;
}

#location-text{
text-align: left;
padding: 50px 10px;
color: white;
font-size: 1rem;
line-height: 1.4rem;
}



#location-button{
  display: inline;
  text-align:center;
  color:#950740;
  background:white;
  padding:10px 50px;
  border-radius:50px;
}

section#location .location-map {
  flex: 0 0 45%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

section#location .location-map iframe {
  width: 100%;
  height: 500px;

}
/* END OF LOCATION ---------------------------------------------------- */

/* INFO ---------------------------------------------------- */
section#info {
  position: relative;
  width: 100%;
  padding: 30px 0;
  z-index:1;
  background: #ebebeb;
}

section#info::after{
  content: '';
  position: absolute;
  bottom:-80px;
  width: 100%;
  height: 100px;
  background-image:url('../images/paper_separator.png');
  background-size: 100% 130%;
  }

section#info .container {
  display: flex;
  flex-direction: column;
  z-index: 1;
  justify-content: center;
  align-items:center;
}
section#info .container h3{
    color: #6D6D6D;
}
section#info .container p {
  color: #6D6D6D;
  text-align:center;
  padding: 40px 0;
}




section#info .container .items {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  min-height: 230px;
  column-gap: 40px;
}

section#info .container .items .item {
  position: relative;
  flex: 0 0 260px;
  min-height: 230px;
  max-height: 250px;
  border-radius: 10px;
}

section#info .container .items .item img {
  width: 100%;
  max-height: 250px;
  min-height: 230px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  filter: brightness(30%);
  transition: filter 1s 0s ease;
  border-radius:20px;
}

section#info .container .items .item:hover img {
  filter: brightness(80%);
  transition: filter 1s 0s ease;
}

section#info .container .items h5{
  text-align: left;
  color:white;
  width: 100%;
  padding: 20px 30px;
}
section#info .container .items p {
  display: none;
}
section#info .container .items .item span {
    display: block;
  position: absolute;
  padding: 10px 15px;
  bottom: 20px;
  left: 35px;
  border-radius: 10px;
  background: #C3073F;
  color:white;
  transition:all .3s 0s ease;
}

section#info .container .items span:hover {
 color: #C3073F;
  background:white;
  transition:all .3s 0s ease;
}



/*END OF INFO-------------------------------------------------------------------*/


/*-ADDITIONAL-INFO------------------------------------------------------------------*/

section#additional-info {

  position:relative;
  z-index:2;
  padding: 160px 0 85px;

}
section#additional-info::before {
  content: '';
  width: 100%;
  height: 100%;
  background-image: url(../images/test.jpg);
    background-size: cover;
  background-position: 0% 0%;
  background-repeat: no-repeat;
  filter: blur(5px);
  z-index: 0;
}
section#additional-info::after {
  content: '';
  display: block;
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: .5;
  z-index: 1;
}

 .gg-arrow-left-o {
 box-sizing: border-box;
 position: relative;
 display: block;
 margin: auto;
 width: 112px;
 height: 112px;
 border: 22px solid #C3073F;
 transform: scale(var(--ggs,1));
 border-radius: 112px;
 background: #C3073F;
 transform: rotate(180deg);
  transition: all .5s;

}

.gg-arrow-left-o::after,
.gg-arrow-left-o::before {
 content: "";
 display: block;
 box-sizing: border-box;
 position: absolute;
 left: 0;
 transition: all .5s;
 color: white;
}

.gg-arrow-left-o::after {
 width: 25px;
 height: 25px;
 border-bottom: 5px solid;
 border-left: 5px solid;
 transform: rotate(45deg) translate(0, -70%);
 top: 50%;
}

.gg-arrow-left-o::before {
 width: 50px;
 height: 5px;
 top: 50%;
 transform: translate(0, -50%);
 background: white;
 left: 10px;
} 


 .gg-arrow-left-o:hover {
background: white;
border-color: white;
filter: drop-shadow(-5px -5px 5px black);
scale: 1.05;
 transition: all .5s;
   cursor: pointer;
 }

 .gg-arrow-left-o:hover:after
  {
border-color: #C3073F;
 transition: all .5s;
}

 .gg-arrow-left-o:hover:before{
  background: #C3073F;
   transition: all .5s;
 }
















section#additional-info .container{
  display: flex;
flex-direction:row;
position: relative;
z-index:2;
padding: 0 75px;
}
section#additional-info .container .additional-text {
  display: flex;
  flex-direction: column;
  flex: 0 0 75%;
}
.additional-text h3,
.additional-text p{
  text-align: left;
line-height: 48px;
color: white;
}




/* ------------------------------- */

footer#footer {
  padding: 20px 10px;
  position: relative;
   background-image: url(../images/test1.jpg);
  background-position: 0% 0%;
  background-size: cover;

}

footer#footer .container {
/*  display: flex;
  flex-direction: row;
  justify-content: space-between;
  color: white;
  position: relative;
  z-index: 2;
  margin: auto;
  row-gap: 70px;*/

  display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: white;
    position: relative;
    z-index: 2;
    margin: auto;
    row-gap: 70px;
    column-gap: 70px;
/*    padding: 0 20px;*/
}


footer#footer h6 {
  position: relative;
  line-height: 29px;
  font-weight: 500;
  font-size: 1.2rem;
  text-align: left;
  padding-bottom: 20px;
  color: white;
}

footer#footer h6::before {
content: '';
position: absolute;
bottom: 15px;
left: 0;
height: 2px;
width: 100%;
background-color: #C3073F;
}


footer#footer .contacts {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
   flex:1 1 30%;
   row-gap: 15px;
/*   padding: 10px;*/
  /* box-shadow: inset 0px -1px 450px white;
    border-radius: 10px;*/
}

footer#footer .contacts .logo {
/*  min-height: 65px;*/
/*flex: 1 1 30%;
    max-height: 130px;*/
    flex: 0 0 45%;
    width: 90%;
      box-shadow: inset 0px -1px 450px white;
    padding: 15px 25px;
    box-sizing: border-box;
    border-radius: 40px;
}
footer#footer .contacts .logo a{
/*width: 100%;
height: 100%;*/

width: 70%;
    display: block;
    margin: auto;
}


footer#footer .contacts .logo img {
  width: 100%;

}

.contact-info{
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 0 5px;
  color:white;
}
footer#footer .contacts .phone{
   flex: 1 1 55%;
}

footer#footer .contacts .location{
   flex: 1 1 45%;
}

footer#footer .contacts .phone,
footer#footer .contacts .location
/*,footer#footer .contacts .socials*/
 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
/*  width: 100%;*/
  align-items: center;
  padding: 5px 0;
}


footer#footer .contacts .phone ul li,
footer#footer .contacts .location ul li {
font-size: .8rem;
padding: 10px 0 10px 10px;
/*text-shadow: 0px 0px 2px black;*/
}

/*footer#footer .contacts .socials {
  justify-content: space-around;
}*/
footer#footer .socials_mob {
display:none;
}
/*footer#footer .contacts .socials img,*/
footer#footer .contacts .location img,
footer#footer .contacts .phone img {
  width: 25px;
}


footer#footer #newsletter{
  flex: 1 1 20%;
/*  padding: 0 0 0 115px;*/
}

#footer .socials {
    position: relative;
    padding: 10px 0;
    width: 310px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    z-index: 2;
}



#footer .socials a{
width: 48px;
height: 48px;
  }

footer#footer .link{
  flex: 1 1 35%;
/*  padding:0 50px;*/
  display: flex;
  justify-content: space-between;
  column-gap: 50px;
  row-gap: 50px;
}

/*footer#footer .link div{
flex: 0 0 35%;
  }
*/

footer#footer .link div:nth-child(1){
flex: 1 1 55%;
  }

  footer#footer .link div:nth-child(2){
flex: 1 1 35%;
  }

footer#footer .link div ul li{
  padding:15px 0;
  font-size: .8rem;
}

footer#footer .container #newsletter
{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

footer#footer #newsletter span {
  display: block;
  color: white;
  text-align: left;
  padding: 10px 0;
  font-size: .8rem;
  line-height: 14px;
}
footer#footer #newsletter form{
width: 100%;
}
footer#footer #newsletter input {
/*  display: block;
  box-sizing: border-box;
  width: 100%;
  font-size: 1rem;
  margin-top: 15px;
  padding: 0;
  height: 35px;
  background: #FFFFFF99;
  border-color: #FFFFFF99;*/

  display: block;
    box-sizing: border-box;
    width: 100%;
    font-size: 1rem;
    margin-top: 15px;
    padding: 10px 20px;
    height: 4vw;
    background: #FFFFFF99;
    border-color: #FFFFFF99;
}

footer#footer #newsletter input::placeholder {
/*  padding: 0 20px;*/
}

footer#footer #newsletter input[type=submit] {
  color: #393939;
}




#footer_separator{
  position:relative;
  width:100%;
}
#footer_separator img{
  position:absolute;
  top:-1vw; 
  width:100%;
  height:2vw;
  z-index:2;
}


/*ProductList----------------------------------------------------*/

#products-top{
  position: relative;
padding: 200px 0px 100px;
}



.bg-products{
position: absolute;
width: 100%;
     min-height: 370px;
  top:-130px;
}

#cat_line_bg{
  top:90px;
}

.bg-products::before{
  content: '';
  position: absolute;
  z-index: -1;
  opacity: .9;

  width: 100%;
  min-height: 100%;
  background-image: url(../images/cat_bg1.png);
background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}
.bg-products img{
  width: 100%;
  object-fit:  contain;
}


.line-bg{
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(71.51% 793.63% at 50% 50%, #79123B 0%, #EB1C5A 100%);
  background-position: 50% 50%;
  min-height: 200px;
  max-height: 250px;
  background-size: 200% 100%;
  animation: gradientMovement 6s 0s infinite linear;
   opacity: .9;
}

.line-item {
  display: none;
  animation: fadeOut 1s ease-in-out forwards;
}

.line-item.active {
  display: block;
  animation: fadeIn 1s ease-in-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.line-item{
  position: relative;
  padding: 0 5vw;
}
.line-item h5{
  padding:15px;
  font-family: 'Lobster';
  color: white;
}
.line-item p{
/*    position: absolute;*/
    color: white;
/*    right: 0%;*/
/*    bottom: -40px;*/

line-height: 2rem;
text-align: right;
    font-size: .8rem;
  }
/*----------------------------------------------------------------------------*/

.card-container{
  display: flex;
  justify-content: space-around;
  padding: 70px 50px;


  color:black;
}
.card-info{
width: 100%;
padding-bottom: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 30px;
  }
.card{
  flex:0 0 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background:  linear-gradient(white, white) padding-box,
              linear-gradient(to left, #79123B 4.08%, #EB1C5A 72.2%) border-box;
  border-radius: 10px;
  border: 1px solid transparent;
  box-shadow: 8px 12px 30px 0px #00000059;
  justify-content: space-between;
  position: relative;
  background-size: 200% 100%;
 animation: shimmer 2s infinite linear; /* Apply the shimmering animation */
}

@keyframes shimmer {
    0% {
        background-position: -100% 0; /* Start position of the shimmering effect */
    }
    100% {
        background-position: 100% 0; /* End position of the shimmering effect */
    }
}


.card .card-images{
  max-width: 250px;
  max-height: 250px;
  padding: 25px;
  overflow: hidden;
}


.card-images img{
  width: 100%;
  height: 100%;
  transition: all 1s 0s ease;
}
.card:hover .card-images img{
transform: scale(1.2);
  }
.card .card-images img:not(:nth-child(1)){
display: none;
}

.card h4{
    background: -webkit-linear-gradient(275.15deg, #79123B 4.08%, #EB1C5A 72.2%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  animation: gradientMovement 2s 0s infinite linear;
  font-family: 'Lobster';
  line-height: 2.5rem;
  font-size: 2rem;
  transition: all 1s .3s ease;
}
.card:hover h4{
transform: scale(1.1);
} 

.card:hover p{
transform: scale(1.1);
} 
.card .item-benefits{
  display: flex;
  flex-direction: column;
  width: 80%;
  margin: auto;
  row-gap: 30px;
  padding: 0 50px;
}
.card .item-benefits li{
 /*background:  linear-gradient(white, white) padding-box,
              linear-gradient(to left, #79123B -4.19%, #EB1C5A 63.93%) border-box;*/ 
              border-bottom: 1px solid #EB1C5A;
  text-align: center;
/*  margin: 55px 0;*/
  font-size: 1rem;
}

.card a {
    /* Your existing styles */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 170px;
    height: 50px;
    background: linear-gradient(263.83deg, #950740 45.12%, #C3073F 72.21%);
    color: white;
    font-size: 24px;
    position: absolute;
    bottom: -25px;
    border-radius: 5px;
        background-size: 200% 100%; /* Make sure the gradient spans the entire element */

    transition: background 0.3s ease; /* Add a transition for smooth effect */
}

.card a:hover {
    animation: gradientMovement 3s 0s 1 linear; /* Apply the animation on hover */
}

@keyframes gradientMovement {
 0% {
        background-position: 0% 50%; /* Start position of the background gradient */
    }
    50%{
      background-position: 60% 50%;
    }
    100% {
        background-position: 0% 50% ; /* End position of the background gradient */
    }
}




.dashedSeparator{
  width: 100%;
  margin: 0 0 50px;
}

/*---------------------------------*/
#products-text{
  color: black;
  padding: 0 100px;
}

#products-text h1{
  background: -webkit-linear-gradient(275.15deg, #79123B 4.08%, #EB1C5A 72.2%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: left;
  font-family: 'Lobster';
  font-size: 4rem;
  padding: 40px 0;

 text-shadow: 0 0 25px #C62E5EB2;

}

#products-text h4{
  text-align: left;
  font-family: 'Lobster';
  font-size: 2rem;
  padding: 20px 0;
/* text-shadow: 0 0 25px #C62E5EB2;*/
display: inline-block;
}


#products-text img{
  float: right;
  min-width: 310px;
  min-height: 260px;
  padding-left: 50px;
  border-radius: 5px;
}

#products-text p{
font-size: 1.2rem;
    line-height: 1.5rem;


}


































/*PRODUCT PAGE-----------------------------------------------------*/


#productHead {
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  position: relative;
  background-attachment: fixed;
}

#productHead::before{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(175, 28, 87, 0.4);
  z-index: 1;
}

.productInfoContainer{
  position:relative;
  z-index: 2;
  width: 100%;
  padding:140px 150px;

  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.productHeadInfo{
  min-width: 450px;
/*  align-self: center;*/
}
.productHeadInfo h2{
  width: 500px;
  line-height: 60px;
  text-align: left;
  color: white;
}

.productHeadInfo ul li{
  position: relative;
  width: 350px;
  padding: 13px 0;
  padding-left: 3vw;
font-size: 1rem;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
color: white;
}

.productHeadInfo ul li:before{
  content: '';
  position: absolute;
  left:0;
  top:50%;
  transform: translateY(-50%);
  display: inline-block;
  width: 18px;
  height: 15px;
  margin: 0;
  background-image: url(../images/leave.png);
  background-size: 110% 100%;
  }

.productHeadEllipse{
  background-image: url(../images/Ellipse24.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: 50% 70%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
/*  gap:20px;*/
/*
  min-width: 325px;
  max-width: 375px;

  min-height: 325px;
  max-height: 375px;*/
}

.productHeadEllipse::after{
  content: '';
  position: absolute;

  bottom: -30px;
  right: 0;

  width: 200px;
  height: 130px;


  background-image: url(../images/ribbon.png);
  background-size: 100% 100%;
  z-index: 2;
}

.productHeadEllipse h5,
.productHeadEllipse h6
{
 /* position: relative;
  top:40%;*/
  width: 90%;
/*  margin: auto;*/
  color: #6D6D6D;
  padding: 5px 0;
}





.productTitle{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.branch{
    position: relative;
  width: 240px;
}

.branch.bleft{
  align-self: flex-start;
}
.branch.bright{
  align-self: flex-end;
  transform: scaleX(-1);
}


#productMain h1{ 
  width: 100%;
  text-align: center;
  background: -webkit-linear-gradient(275.15deg, #79123B 4.08%, #EB1C5A 72.2%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 5rem;
  line-height: 7rem;
  text-shadow: 4px 4px 16px rgba(235,28,90,1);
}



.prodDescription{
  display: flex;
  flex-direction: row;
  column-gap: 30px;
  padding: 115px 20px 60px;
  width: 80%;
  margin: auto;
}

.image-gallery{
  flex: 0 0 35%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
    min-width: 360px;
  max-width: 480px;
}

section#productMain .main-image{
  box-sizing: border-box;
  position: relative;
  width: 100%;
  box-shadow: 0px 0px 10px #404040;


}
section#productMain .main-image img {
  display: block;
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  min-height: 350px;
  max-height: 500px;
  object-fit: cover;
  margin: auto;
  transition: all .5s 0s ease;
}
section#productMain .main-image:hover :nth-child(1){
/*filter:blur(5px);*/
transition: all .5s 0s ease;
}

section#productMain .main-image:hover .hovered{
 opacity: 1;
 transition: all .5s 0s ease;
}



section#productMain .main-image .hovered{
  width: 40%;
  position: absolute;
  left: 50%;
  top:50%;
  translate: -50% -50%;
  opacity: 0;
  transition: all .5s 0s ease;
}

section#productMain .thumbnail-images {
  display: flex;
  justify-content: space-between;
  margin-top: 25px;

}

section#productMain .thumbnail-images img {
  max-height: 190px;
  width: 30%;
  cursor: pointer;
  box-shadow: 0px 0px 10px #404040;
}

/* Стилі для текстового блоку */
section#productMain .text-block {
  flex: 1;
  width: 100%;
  margin:auto;
  color: #404040;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

section#productMain h3,
section#productMain h5 {

color: #404040;
  text-align: left;
}


section#productMain .text-block p {
  padding: 10px 0;
  text-align: justify;
  font-size: 1.2rem;
  color: #404040;
  line-height: 2rem;
}

p.bordered{
  border-bottom: 1px solid #C3073F;
}




.moreInfo{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
/*  padding-left: 55px;*/
width: 90%;
margin: auto;
gap:50px;
align-items: center;
}

.mainSet{
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 30px;
}

.mainSet h3{
  text-align: center!important;
color: #404040;
  }

.mainSet .item-benefits{

  display: flex;
  flex-direction: column;
  row-gap: 30px;
  width: 75%;
  margin: auto;
  border:2px;
  color: #404040;
  padding: 0;
}

.relResipes{
  position: relative;
align-self: center;
border-radius: 30px;
overflow: hidden;
}

.relResipes img{
width: 100%;
min-height: 270px;
max-height: 300px;
margin-bottom: 55px;
border-radius: 30px;
}

.relResipesText{
position: absolute;
top: 0;
left: 0;
padding: 35px;
}

.relResipesText h4{
text-align: left;
color: white;
}
.relResipesText p{
padding: 10px 0;
font-size: 1.5em;
line-height: 2.5rem;
color: white;
}

.relResipes a{
  display: block;
    min-width: 150px;
    max-width: 180px;
    text-align: center;
    position: absolute;
    bottom: 100px;
    left:35px;
}
  .relResipes span{
    background: white;
    color:#C3073F;
    font-size: 1rem;
    padding: 5px 20px;
    border-radius: 25px;
  }


/*------------------------------------*/



#storing{
  color: #404040;
}

.storingHead{
display: flex;
flex-direction: row;
padding: 55px;
justify-content: space-between;

}


.storingHead h2{
background: -webkit-linear-gradient(275.15deg, #79123B 4.08%, #EB1C5A 72.2%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 4px 4px 16px rgba(235,28,90,1);
  font-family: 'Lobster';
  text-align: left;
  font-size: 5.5rem;
  flex: 0 0 60%;
  padding: 0 10px;
  align-self: center;
  line-height: 8rem;
}
.storingHead img{
  min-width: 350px;
  min-height: 350px;

  max-width: 400px;
  max-height: 400px;


  filter: drop-shadow(0 0 0.75rem rgba(235,28,90,1));
}

.store_numbers_container{
  padding: 0 55px;
}

.store_numbers{
  margin-bottom: 50px;
  padding-bottom: 50px;
}
.store_numbers p{
  font-size: 1.2rem;
  line-height: 48px;
  padding:0 0 20px 0;
  text-align: justify;
}

.store_numbers img{
  float: left;
  box-sizing: content-box;
  padding: 0px 15px;
  min-width: 55px ;
  min-height: 105px;

  max-width: 65px;
  max-height: 125px;
}




.slider-container {
position: relative;
background:#F4F4F4 ;
  text-align: center;
  color: #7B7878;
  padding: 120px 0;
}

.slider-container p, 
.slider-container ul
{
  font-size: 1.2rem;
  text-indent: 1.4rem;
  text-align: justify;
}

.slider-switches {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  padding: 50px 170px;
}

.slider-switch {
  position: relative;
  cursor: pointer;
  padding: 50px 75px;
  margin: 0 10px;
  border: 0px solid #ccc;
  border-radius: 5px;
  font-size: 2rem;
}
.slider-switch.active{
  color: #EB1D5A;
}
.slider-switch::before{
  content: '';
  position: absolute;
  bottom: 40px;
  left: 50%;
  width: 0px;
  height: 2px;
  background: #EB1D5A;
  transition: all 1s 0s ease;
  transform: translate(-50%, 0);
}
.slider-switch.active::before{
  width: 120px;
}

.slider-content {
position: relative;
  padding: 50px 0;
  width: 80%;
  margin: auto;
  text-align: left;
font-size: 1.5rem;
font-weight: 300;
line-height: 36px;


}

.slider-content::before {
content: '';
position: absolute;
top:-30px;
left: 0;
background-image: url(../images/dashed_line.svg);
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 50px;
z-index: 0;
}

.slider-slide {
  display: none;
}

.slider-slide.active {
  display: block;
  line-height: 36px;
  margin-top: 30px;
}

.slider-slide ul li{
  padding: 10px 0;
}

.slider-arrows {
  position: absolute;
  width: 100%;
/*  top:50%;*/
}

.slider-arrow.prev{
  left:15px;
}
.slider-arrow.next{
  right:15px;
}

.slider-arrow {
  position: absolute;
  cursor: pointer;
  padding: 20px 25px;
  font-size: 30px;
  margin: 0 5px;
  border: 1px solid #7B7878;
  border-radius: 50%;
  background: #F4F4F4;
}

.slider-arrow:hover {
  border-color: #EB1D5A;
  color: #EB1D5A;
}




/*BLOG LIST PAGE---------------------------------------------*/
#head-blog{
    position: relative;
padding: 100px 0px 50px;
}

.cntnr{
  padding: 0px 30px;
}
#head-blog h2{
 background: -webkit-linear-gradient(275.15deg, #79123B 4.08%, #EB1C5A 72.2%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  font-family: 'Lobster';
  font-size: 4rem;
}

#head-blog p{
width: 570px;
padding: 15px;
line-height: 2rem;
font-weight: bold;
}

#blog-top{
  position: relative;
padding: 0px 0px 50px;
}

#blog-posts{
  position: relative;
  padding: 100px 0px 80px;
}

#blog-posts::before,
#blog-posts::after{
content: '';
position: absolute;
background-image: url(../images/dashed_line.svg);
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 50px;
z-index: 0;
}
#blog-posts::before{
  top:20px;
left: 0;
}
#blog-posts::after{
  bottom:20px;
}

.blog-post-item{
  position: relative;
  display: flex;
  background-color: #F6F6F6;
  padding: 65px 25px 25px;
margin-bottom: 60px;
}

.post-item-date{
  position: absolute;
  top:25px;
  left:25px;
  color: #404040;
}
.blog-post-image{
  flex: 0 0 25%;
  height: 300px;
  box-sizing: content-box;
/*  width: 570px;
  height: 370px;*/
  overflow: hidden;
  
}

.blog-post-image img{
  object-fit: cover;
  object-position: 50% 50%;
  width: 100%;
  height: 100%;
  padding-right: 20px;
transition: all 1s;
}

.blog-post-image img:hover{
  transform: scale(1.5);
  transition: all 1s;
}

.blog-post-info{
  padding: 0 20px;
}

.blog-post-info h4{
  color: #404040;
  text-align: left;
  padding-bottom: 5px;
}

.blog-post-info p{
  color: #404040;
  line-height: 36px;
}

.blog-post-info .read{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 170px;
  height: 50px;
  background: linear-gradient(263.83deg, #950740 45.12%, #C3073F 72.21%);
  color:white;
  font-size: 24px;
  position: absolute;
   bottom: 25px;
  border-radius: 5px;
}

.breadcrumbs{
  color:#A02154;
  padding-bottom: 10px;
}

.pagination{
  width: 40%;
  margin: auto;
}
.pagination ul{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.5rem;
  color: #404040;
  padding: 15px 20px;

  background:  linear-gradient(white, white) padding-box,
              linear-gradient(to left, #79123B 4.08%, #EB1C5A 72.2%) border-box;
  border-radius: 10px;
  border: 1px solid transparent;
}
.pagination ul * {
  font-size: 1rem;
  padding: 5px;
}
.pagination ul .current{
  font-size: 1.2rem;
color: #A02154;
font-weight: bold;
}



/*--------------POST-----------------------------*/
.post-logo{
  width: 90%;
  height: 150px;
  overflow: hidden;
  margin: auto;
}
.post-logo .logo {
    width: 100%;
    object-fit: cover;
}

.post-header-info{
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 500px;
  position: relative;
}

.post-header-text{
  position: absolute;
  padding: 0 50px;
   top: 50%;
    transform: translate(0%, -50%);
    width: 100%;
/*  font-family: Hachi Maru Pop;*/
font-family: 'Montserrat', sans-serif;
  }

  .post-header-text h1,
  .post-header-text p
  {
    width: 80%;
    text-align: left;
    color:white;
text-shadow: 0px 0px 2px rgba(0,0,0,0.6);

}

.post-header-text h1{
  margin: auto;
  text-align: center;
width: 100%;
/*  letter-spacing: -5px;*/
  line-height: 65px;

}

.post-header-text p{
  padding: 30px 10px;
}


/*---------------------------------------------------*/
.main-content-post{
  padding: 100px 0;
  position: relative;
}

.main-content-post::before,
.main-content-post::after{
content: '';
position: absolute;
background-image: url(../images/dashed_line.svg);
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 40px;
z-index: 0;
}
.main-content-post::before{
top:30px;
left: 0;
}
.main-content-post::after {
bottom: 30px;
left: 0;

}
#sidebar{
/*  display: block;*/
  position: -webkit-sticky;

  position: sticky;
  min-width: 50px;
  max-width: 55px;
  min-height: 50px;
  max-height: 55px;
  padding: 0;
/*  float: right;*/
  right: 0;
  top:0;
}


.main-content-post aside{
  box-sizing: border-box;
   display: inline-block;
    float:right;
  width: 30%;
  padding-left: 50px;
}
.main-content-post aside .logo{
min-width: 250px;
min-height: 100px;
max-width: 430px;
max-height: 130px;
padding-right: 0;
object-fit: contain;
float: left;

}

aside .author-posts h5,
aside .posts-by-date h5,
aside .social-networks h5{
  font-family: 'Lobster';
  font-weight: bold;
  text-align: left;
  padding: 20px 0 10px;
}
aside .asideul li{
  position: relative;
  padding: 10px 0 10px 35px;
}
aside .asideul li:before{
  content: '';
  position: absolute;
  left:0;
  top:50%;
  transform: translateY(-50%);
  display: inline-block;
  width: 18px;
  height: 15px;
  margin: 0;
  background-image: url(../images/leave.png);
  background-size: 110% 100%;
  }
}

aside .social-networks h5{
padding:0 0 0 15px;
  }

aside .author-posts ul li,
aside .posts-by-date ul li{
/*  padding: 8px 0;*/
  font-size: 1.2rem;
  font-weight: 300;
}
aside .posts-by-date ul{
  padding-bottom: 20px;
}


aside .social-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
aside .social-item img{
  min-width: 30px;
  max-width: 30px;
  min-height: 30px;
  max-height: 30px;
  padding: 0;
}
aside .social-item a{
text-align: center;
    flex: 0 0 80%;
}

aside .social-item .cfs-hyperlink .text{
font-size: 1.3rem!important;
padding:0 15px 0 0!important;
}

aside .social-networks{
display: flex;
flex-direction: column;
row-gap: 20px;
border: 1.5px solid #E0D9D9;
border-radius: 5px;
padding: 15px;
}


#datePost{
  color: #6B6B6B;
  font-size: 1.5rem;
  padding: 15px 0;
  text-indent: 0px;
}

.main-content-post .part{
  margin-top: 30px;
  padding: 50px 0 20px;
}

.main-content-post .image-container{
  position: relative;
    top: -30px;
  width: 40%;
  min-height: 400px;
  background-position: 50% 50%;
  background-size: cover;
  overflow: hidden;
  float: left;
  margin-right: 50px;
/*  margin-bottom: 50px;*/
}

.main-content-post img{
object-position: 50% 50%;;
  width: 100%;
    
  
}
/*.main-content-post img:first-child {
float: none;
}*/
.main-content-post .float{
float: right;
}
.main-content-post .cntnr .main-image{
  display: inline-block;
  width: 70%;
  overflow: hidden;
}
.main-content-post .cntnr h3{
  position: relative;
display: inline;
padding: 15px 50px 20px 0;
border:0px;
}
.main-content-post .cntnr h3::before{
  content: "";
  position:absolute;
  background: #C3073F;
  width: 90%;
  height: 1px;
  top:-5px;
  left:0px;

}
.main-content-post .cntnr a p{
text-indent: 0rem;
}
.main-content-post .cntnr p{
  text-indent: 3rem;
  font-size: 1.5rem;
  padding-bottom: 20px;
  line-height: 2rem;
  font-weight: 300;
}
.main-content-post .cntnr .part ul,
.main-content-post .cntnr .part ol
{
margin-left: 40px;
font-size: 1.3rem;
line-height: 2.5rem;
}
.main-content-post .cntnr .part ul{
list-style-type: square;
}
.main-content-post .cntnr .part ol{
list-style-type: binary;
}
.main-content-post .cntnr .part li{
padding: 5px 0;
}
.main-content-post .cntnr .part p strong{
font-weight: bold;
font-size: 2rem;
}

.related-posts{
  display: flex;
  flex-direction: column;
  position: relative;
}
.related-item {
  position: relative;
display: flex;
flex-direction: row;
align-items: center;
}
.related-item.first::before{
  position: absolute;
  content: "";
  height: 2px;
  width: 500px;
  background: #C3073F;
  bottom: 0;
}



.related-preview{
  box-sizing: content-box;
  display: flex;
  flex-direction: column;
  border-right: 2px solid #C3073F;
  flex: 0 0 190px;
}

.related-post-view{
  display: flex;
flex-direction: row;
}

.related-image{
  box-sizing: content-box;
  min-width: 145px!important;
max-width: 145px;
min-height: 145px!important;
max-height: 145px;
padding: 20px 20px 20px 0!important;
}

.related-item.first img{
  flex: 0 0 170px;
  border-right: 2px solid #C3073F;
}

.related-image:nth-child(2){
  padding: 0 20px 20px 0!important;
}


.related-post-text h5{
  display: inline-block;
  font-weight: bold;
  color: #404040;
  padding: 15px 0;
}

.secondary-post-image{
  box-sizing: border-box;
  min-width: 300px!important;
  max-width: 350px;
  min-height: 300px!important;
  max-height: 350px;
  padding: 20px!important;
  float: left;
  border-top: 2px solid #C3073F;
}

.related-preview-container{

  width: 100%;
}
.related-post-view{
  position: absolute;
  left:200px;
  top:0;
  opacity: 0;
  transition: all .5s;
}


.related-post-view #related-image-view{
  box-sizing: content-box;
  min-width: 300px;
  min-height: 300px;
  max-width: 310px;
  max-height: 310px;
  padding: 20px 0 0 0;
}

.related-post-text{
  padding: 0 15px;
  position: relative;

}

.related-post-text .read-more{
  position: absolute;
  bottom: 20px;
  left:15px;
  background: linear-gradient(white, white) padding-box, linear-gradient(to left, #79123B 4.08%, #EB1C5A 72.2%) border-box;
    border-radius: 10px;
    border: 1px solid transparent;
    padding: 5px 35px;
  font-size: 2rem;
    color: #C3073F;
}


/*ABOUT PAGE-----------------------------------------------*/

.header-about{
  
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 550px;
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 300px;
  justify-content: center;
  align-items: center;
}
.header-about::after{
content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    min-height: 250px;
    background: rgba(0, 0, 0, 0.8);
    z-index: 0;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
  }

.header-about h1{
  padding-bottom:15px;
  position: relative;
  color: white;
}
.header-about h1::before{
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: white;
}

.header-about h5{
  padding-top: 15px;
color: white;
}





/* SLIDER */
#slider .cntnr{
  padding: 120px 20px;
}




  .CSSgal {
  position: relative;
  overflow: hidden;
  height: 550px; /* Or set a fixed height */
}



.CSSgal .slider {
  position: relative;
  height: 600px;
  white-space: nowrap;
  font-size: 0;
  transition:all 0.8s;
}

.CSSgal .slider .view-slide{
  display: flex;
    justify-content: center;
    align-items: center;
/*    width: 300px;
    height: 100px;*/
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
/*    border-radius: 10px;
    background: linear-gradient(263.83deg, #950740 45.12%, #C3073F 72.21%);*/
opacity: 0;
z-index: 2;
transition:all 0.8s;
  }

  .CSSgal .slider div:hover .view-slide{
    opacity: 1;
  }
.CSSgal .slider div::before{
  content: "";
  position: absolute;
  z-index: 0;
  background: #000000;
  opacity: .5;
  width: 100%;
  height: 100%;
transition:all 0.8s;
}

.CSSgal .slider div:hover:before{
opacity: 0;
transition:all 0.8s;
}

.CSSgal .slider .slide-text{
  position: absolute;
  width: 100%;
/*  font-weight: bold;*/
  top:50%;
  transform: translateY(-50%);
}
.CSSgal .slider .slide-text::before{
  content: "";
  position: absolute;
/*  top:40px;*/
  z-index: 0;
  background: #ffffff;
  opacity: .5;
  width: 100%;
  height: 100%;
transition:all 0.8s;
}



/* SLIDES */

.CSSgal .slider > * {
  position: relative;
  font-size: 1rem;
  display: inline-block;
  white-space: normal;
  vertical-align: top;
  height: 100%;
  width: 100%;
  background: none 50% no-repeat;
  background-size: cover;
}

/* PREV/NEXT, CONTAINERS & ANCHORS */

.CSSgal .prevNext {
  position: absolute;
  z-index: 1;
  top: 50%;
  width: 100%;
  height: 0;
}

.CSSgal .prevNext > div+div {
  visibility: hidden; /* Hide all but first P/N container */
}

.CSSgal .prevNext a {
  background: #fff;
  position: absolute;
  width:       60px;
  height:      60px;
  line-height: 60px; /* If you want to place numbers */
  text-align: center;
  opacity: 0.2;
  -webkit-transition: 0.3s;
          transition: 0.3s;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0;
}
.CSSgal .prevNext a:hover {
  opacity: 1;
}
.CSSgal .prevNext a+a {
  left: auto;
  right: 0;
}

/* NAVIGATION */

.CSSgal .bullets {
  position: absolute;
  z-index: 2;
  bottom: 0px;
  padding: 10px 0;
  width: 100%;
  text-align: center;
  font-family: 'Lobster';
  font-size: 1.5rem;
}
.CSSgal .bullets > a {
  display: inline-block;
  width:       30px;
  height:      30px;
  line-height: 30px;
  text-decoration: none;
  text-align: center;
  background: rgba(255, 255, 255, 1);
  -webkit-transition: 0.3s;
          transition: 0.3s;
}
.CSSgal .bullets > a+a {
  background: rgba(255, 255, 255, 0.5); /* Dim all but first */
}
.CSSgal .bullets > a:hover {
  background: rgba(255, 255, 255, 0.7) !important;
}

/* NAVIGATION BUTTONS */
/* ALL: */
.CSSgal >s:target ~ .bullets >* {      background: rgba(255, 255, 255, 0.5);}
/* ACTIVE */
#s1:target ~ .bullets >*:nth-child(1) {background: rgba(255, 255, 255,   1); color:#EB1C5A}
#s2:target ~ .bullets >*:nth-child(2) {background: rgba(255, 255, 255,   1); color:#EB1C5A}
#s3:target ~ .bullets >*:nth-child(3) {background: rgba(255, 255, 255,   1); color:#EB1C5A}
#s4:target ~ .bullets >*:nth-child(4) {background: rgba(255, 255, 255,   1); color:#EB1C5A}
#s5:target ~ .bullets >*:nth-child(5) {background: rgba(255, 255, 255,   1); color:#EB1C5A}
#s6:target ~ .bullets >*:nth-child(6) {background: rgba(255, 255, 255,   1); color:#EB1C5A}
#s7:target ~ .bullets >*:nth-child(7) {background: rgba(255, 255, 255,   1); color:#EB1C5A}
#s8:target ~ .bullets >*:nth-child(8) {background: rgba(255, 255, 255,   1); color:#EB1C5A}
#s9:target ~ .bullets >*:nth-child(9) {background: rgba(255, 255, 255,   1); color:#EB1C5A}
#s10:target ~ .bullets >*:nth-child(10) {background: rgba(255, 255, 255,   1); color:#EB1C5A}
#s11:target ~ .bullets >*:nth-child(11) {background: rgba(255, 255, 255,   1); color:#EB1C5A}
/* More slides? Add here more rules */

/* PREV/NEXT CONTAINERS VISIBILITY */
/* ALL: */
.CSSgal >s:target ~ .prevNext >* {      visibility: hidden;}
/* ACTIVE: */
#s1:target ~ .prevNext >*:nth-child(1) {visibility: visible;}
#s2:target ~ .prevNext >*:nth-child(2) {visibility: visible;}
#s3:target ~ .prevNext >*:nth-child(3) {visibility: visible;}
#s4:target ~ .prevNext >*:nth-child(4) {visibility: visible;}
#s5:target ~ .prevNext >*:nth-child(5) {visibility: visible;}
#s6:target ~ .prevNext >*:nth-child(6) {visibility: visible;}
#s7:target ~ .prevNext >*:nth-child(7) {visibility: visible;}
#s8:target ~ .prevNext >*:nth-child(8) {visibility: visible;}
#s9:target ~ .prevNext >*:nth-child(9) {visibility: visible;}
#s10:target ~ .prevNext >*:nth-child(10) {visibility: visible;}
/* More slides? Add here more rules */

/* SLIDER ANIMATION POSITIONS */

#s1:target ~ .slider {transform: translateX(   0%); -webkit-transform: translateX(   0%);}
#s2:target ~ .slider {transform: translateX(-100%); -webkit-transform: translateX(-100%);}
#s3:target ~ .slider {transform: translateX(-200%); -webkit-transform: translateX(-200%);}
#s4:target ~ .slider {transform: translateX(-300%); -webkit-transform: translateX(-300%);}
#s5:target ~ .slider {transform: translateX(-400%); -webkit-transform: translateX(-400%);}
#s6:target ~ .slider {transform: translateX(-500%); -webkit-transform: translateX(-500%);}
#s7:target ~ .slider {transform: translateX(-600%); -webkit-transform: translateX(-600%);}
#s8:target ~ .slider {transform: translateX(-700%); -webkit-transform: translateX(-700%);}
#s9:target ~ .slider {transform: translateX(-800%); -webkit-transform: translateX(-800%);}
#s10:target ~ .slider {transform: translateX(-900%); -webkit-transform: translateX(-900%);}
#s11:target ~ .slider {transform: translateX(-1000%); -webkit-transform: translateX(-1000%);}
/* More slides? Add here more rules */


/* YOU'RE THE DESIGNER! 
   ____________________
   All above was mainly to get it working :)
   CSSgal CUSTOM STYLES / OVERRIDES HERE: */

.CSSgal{
  color: #fff;  
  text-align: left;
  position: relative;
}
.CSSgal .slider h2 {
  text-align: center;
  padding: 50px 50px ;
  font-weight: 400;
/*  letter-spacing: -0.06em;*/
  word-spacing: 0.2em;
  font-size: 2.3em;
/*  font-family: 'Hachi Maru Pop';*/
font-family: 'Montserrat', sans-serif;
  color:#79123B;
/*  text-shadow: 0px 0px 3px black;*/
  transition:all 0.8s;

}

.CSSgal .slider:hover h2
{
opacity: 0;
transition:all 0.8s;
}

.CSSgal .slider:hover p{
opacity: 0;
transition:all 0.8s;
}


.CSSgal .slider p {
  text-align: center;
  position: relative;
padding: 10px 15px ;
font-family: 'Montserrat', sans-serif;
/*font-family: 'Hachi Maru Pop';*/
font-size: 1rem;
line-height: 2rem;
transition:all 0.8s;
color: #EB1C5A;
  }
.CSSgal a {
  border-radius: 50%;
  margin: 0 3px;
  color: rgba(0,0,0,0.8);
  text-decoration: none;
}
/*.bullets::before{
  content: "";
  top:-15px;
  left:50%;
  transform: translateX(-50%);
  position: absolute;
  height: 2px;
  width: 180px;
  background:#404040 ;
}*/


/*----------------------------------*/


/*.what-we-do{
  display: flex;
  min-height: 600px;
}*/
.what-we-do-video {
    position: relative;
    width: 100%;
    height: 500px; /* Встановіть відповідну висоту для блоку */
    overflow: hidden;
}

#video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#video {
    width: 100%;
    height: 100%;
        object-fit: cover;

}

.what-we-do{
  display: flex;
  flex-direction: row;
  min-height: 600px;
}
.what-we-do-text{
  min-width: 40%;
}

.what-we-do-text h2,
.what-we-do-text h4
{
text-align: left;
padding: 15px 0;
  }
.what-we-do-text h2{
  font-family: 'Lobster';
  font-size: 5rem;
  color: #79123B;
  /*  background: -webkit-linear-gradient(275.15deg, #79123B 4.08%, #EB1C5A 72.2%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;*/
}

.what-we-do-text p{
line-height: 36px;
padding-bottom: 20px;
}
.what-we-do-images{
  position: relative;
  min-width: 50%;
}

.what-we-do-images{
  position: relative;
  top:20px;
  left: 50px;
}

.wwdi-block{
  border:12px solid white;
  box-shadow: 6px 6px 35px 0px #00000040;
box-sizing: border-box;
position: absolute;
}
.wwdi-block img{
width: 100%;
height: 100%;
}
.wwdi-block:nth-child(1){
max-width: 390px;
max-height: 525px;
z-index: 1;
transition: all 1s;
  }
.wwdi-block:nth-child(1):hover{
z-index: 3;
transition: all 1s;
}


  .wwdi-block:nth-child(2){
max-width: 300px;
max-height: 420px;
z-index: 2;
left:135px;
top:175px;
  }

  /*.wwi-block{
    position: absolute;
    background-size: cover;
    background-position: 50% 50%;

    height: 500px;
    transition: all 1s;

  }
  .wwi-block.right-img{
    width: 10%;
    left:0;
    z-index: 1;
  }

.wwi-block.left-img{
  width: 90%;
    right:0;
    z-index: 2;
  }*/



.beer-slider {
  display: inline-block;
/*  font-family: 'Roboto', sans-serif;*/
font-family: 'Montserrat', sans-serif;
  letter-spacing: 1px;
  overflow: hidden;
  position: relative;
  text-transform: uppercase;
}
.beer-slider img {vertical-align: bottom;}
.beer-slider > img {
  height: auto;
  max-width: 100%;
}
.beer-reveal {
  bottom: 0;
  left: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  right: 50%;
  top: 0;
  transition: opacity 0.35s;
  z-index: 1;
  & > :first-child{
    max-width: none;
    width: 200%;    
  }
  img:first-child {
    height: auto;
  }
}
.beer-range {
  -webkit-appearance: slider-horizontal !important;
  -moz-appearance: none;  
  bottom: 0;
  cursor: pointer;
  height: 100%;
  left: -1px;
  margin: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  -ms-touch-action: auto;
  touch-action: auto;
  width: calc(100% + 2px);
  z-index: 2;
  &:focus ~ .beer-handle {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);    
  }
  &::-webkit-slider-thumb {
    height: 300vh;
    -webkit-appearance: none;
  }
  &::-moz-range-thumb {
    height: 300vh;
    -webkit-appearance: none;
  }
  &::-ms-tooltip {display: none;}
}
.beer-handle {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0);
  color: #000;
  height: 48px;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  transition: background 0.3s, box-shadow 0.3s, opacity 0.5s 0.25s;
  width: 48px;
  z-index: 2;
  &:before, &:after {
    border-left: solid 2px;
    border-top: solid 2px;
    content: '';
    height: 10px;
    position: absolute;
    top: 50%;
    transform-origin: 0 0;
    width: 10px;    
  }
  &:before {
    left: 10px;
    transform: rotate(-45deg);    
  }
  &:after {
    right: 0;
    transform: rotate(135deg);    
  }  
}
.beer-slider[data-beer-label]:after,
.beer-reveal[data-beer-label]:after {
  background: rgba(255, 255, 255, 0.75);
  border-radius: 4px;
  content: attr(data-beer-label);
  font-size: 12px;
  line-height: 1;
  padding: 6px;  
  position: absolute;
  top: 10px;
}
.beer-slider[data-beer-label]:after {right: 10px;}
.beer-reveal[data-beer-label]:after {left: 10px;}
.beer-slider[data-beer-label=""]:after,
.beer-reveal[data-beer-label=""]:after {content: none;}
.beer-ready .beer-reveal, .beer-ready .beer-handle {opacity: 1;}










.what-we-do-video{
  position: relative;

}

#detach-button-host{
  display: none;
}


/*  */

#video-info{
  box-sizing: content-box;
    padding: 80px 0;
  min-height: 400px;
  max-height: 450px;
}
#video-info a{
  position: relative;
  z-index: 2;
    
}
#video-info a img{
margin: auto;
  }
.what-we-do-video{
  position: relative;
  width: 100%;
  min-height: 380px;
  background-image:url('../images/video_preview.png');
  background-position: 50% 50%;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.what-we-do-video::before{
content: "";
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background: #EB1C5A;
opacity: .4;
z-index: 1;
  }

.what-we-do-video h3,
.what-we-do-video h5
{
  font-family: 'Montserrat', sans-serif;
/*font-family: 'Hachi Maru Pop';*/
color: white;
width: 50%;
}
.what-we-do-video img{
  position: relative;
  z-index: 2;
  width: 90px;
  height: 90px;
}


#general-info .cntnr{
padding:80px 50px;
}
#general-info h2{
  font-family: 'Lobster';
  font-size: 5rem;
  color:#79123B;
/*  background: -webkit-linear-gradient(275.15deg, #79123B 4.08%, #EB1C5A 72.2%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;*/
  line-height: 6rem;
}
#general-info .card-container{
padding: 50px 50px;
}
#general-info .card{
   flex:0 0 45%;
   min-height: 420px;
   padding: 40px;

}
#general-info .card h4{
/*font-family: 'Poppins';*/
font-family: 'Montserrat', sans-serif;
background: #404040;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#general-info .card p{
  padding: 25px 0;
  line-height: 30px;
  text-align: center;
  transition: all 1s .3s ease;
}


.about-benefits-container{
  position: relative;
  padding: 100px 50px;
  background: #F4F4F4;
}

.about-benefits-container h3,
.about-benefits-container h5{
/*  font-family: 'Philosopher';*/
font-family: 'Montserrat', sans-serif;
  text-align: left;
  padding: 15px 0;
}

.about-benefits-items{
  display: flex;
  justify-content: space-between;
  column-gap: 25px;
  padding: 30px 0;
}

.about-benefits-item{
  overflow: hidden;
  position: relative;
  min-width: 260px;
  min-height: 280px;
  box-shadow: 4px 10px 20px 0px #0000004D;
  padding: 40px 15px;
}

.about-benefits-item h5,
.about-benefits-item p{
/*font-family: 'Poppins';*/
font-family: 'Montserrat', sans-serif;
text-align: center;
line-height: 30px;
position: relative;
z-index: 2;
transition: all 1s;
  }

.about-benefits-item::before{
  content: "";
  position: absolute;
  bottom: -1%;
  left: 50%;
  transform: translateX(-50%);
      background-image: linear-gradient(263.83deg, #950740 45.12%, #C3073F 72.21%);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    width: 100%;
    height: 30px;
   transition: all 1s;
}

.about-benefits-item:hover:before { 
 bottom: 100%;
 transition: all 1s;
}

.about-benefits-item::after{
content: "";
z-index: 0;
position: absolute;
top:100%;
left:0;
width: 100%;
height: 400px;
 background: linear-gradient(263.83deg, #950740 45.12%, #C3073F 72.21%);
 transition: all 1s;
}

.about-benefits-item:hover:after {
top: 0;
 transition: all 1s;
} 

.about-benefits-item:hover h5,
.about-benefits-item:hover p{

  color: white;
transition: all 1s;

}
#about-benefits{
  padding: 50px 0;
 position: relative;
}
#about-benefits::after{
  content: '';
  position: absolute;
  bottom:-50px;
  width: 100%;
  height: 100px;
  background-image:url('../images/paper_separator.png');
  background-size: 100% 130%;
  }

  #about-benefits::before{
  content: '';
  position: absolute;
  top:-50px;
  width: 100%;
  height: 100px;
  background-image:url('../images/paper_separator.png');
  background-size: 100% 130%;
  transform: rotate(180deg);
  z-index: 3;
  }

























/*
 * Made by Erik Terwan
 * 24th of November 2015
 * All rights reserved
 *
 *
 * If you are thinking of using this in
 * production code, beware of the browser
 * prefixes.
 */


#burger-menuToggle
{
  display: block;
  position: relative;
  top: 50px;
  left: 50px;
  
  z-index: 1;
  
  -webkit-user-select: none;
  user-select: none;
}

#burger-menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#burger-menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #cdcdcd;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#burger-menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#burger-menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#burger-menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

/*
 * But let's hide the middle one.
 */
#burger-menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#burger-menuToggle input:checked ~ span:nth-last-child(2)
{
  opacity: 1;
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#burger-menu
{
  position: fixed;
  top:0;
  left:0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 25px 50px;
  padding-top: 50px;
  
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);




  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  row-gap: 10px;
}

#menu{
   display: flex;
  flex-direction: column;
  row-gap: 30px;
  align-items: center;
  flex: 0 0 60%;
}



#burger-menu li
{
  width: 90%;
  padding: 10px 0;
  font-size: 22px;
}
#burger-menu li a
{
  display: block;
  text-align: center;
}
#burger-menu a{
  font-size: 1rem;
}

#burger-menu .custom-logo{
  display: block;
  margin: auto;
  width: 50%;
}
/*
 * And let's fade it in from the left
 */
#burger-menuToggle input:checked ~ ul
{
  transform: scale(1.0, 1.0);
  opacity: 1;
}

#contacts-links{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  column-gap: 30px;
  padding: 0 50px;
  max-height: 100px;
}
#contacts-links img{
min-width: 32px;
    max-width: 64px;
  }