/* Global Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
    'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}


/* Header and Navbar */
header {
    background-color: black;

}

.logo-container {
    background-image: url('images/logo.JPG');
}

.outer_section {
  /* padding:20px 0px; */
  margin-top:30px;
  width: 100vw;
}


/* Slider */
section {
  width: 100%;
}
.random_products {

  border-left: 3px solid red;
  border-right: 3px solid red;
}
.products_container {
  padding-left:0px;


}
/* Product Container */


footer * a:hover {
 color:white;
}
body {
  background-image: none;
}

.prod_container {
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url('images/bg_product_homepage_sm.jpg');
  margin: 20px;
  height: 400px;
  width:400px;
  aspect-ratio: 1 / 1;
  border-radius: 5%;
  box-shadow: 5px 2px 10px 2px rgb(84, 84, 84);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  transition: transform 0.5s ease;
  perspective: 1000px;
  opacity: 1;

}
.prod_name {
    position: absolute;
    top: 0;    /* Position at the top of the container */
    left: 0;   /* Position at the left of the container */
    width: 100%;
    height: 100%;
    background-image: none;
    display: flex; /* Use flexbox for easy centering of text */
    align-items: center; /* Vertically center the text */
    justify-content: center; /* Horizontally center the text */
    background-color: rgba(0, 0, 0, 0.717); /* Dark transparent background */
    color: white; /* Text color for readability */
    font-size: 1.2em; /* Adjust font size as needed */
    text-align: center; /* Ensure text is centered within its own space */
    padding: 10px; /* Add some padding around the text */
    box-sizing: border-box; /* Include padding in the element's total width and height */
    opacity: 0; /* Start with fully transparent */
    visibility: hidden; /* Hide it from screen readers when not visible */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition */
    border-radius: 1em;
    
}
.prod_container:hover .prod_name {
    opacity: 1; /* Make it fully visible on hover */
    visibility: visible; /* Make it visible for screen readers */
    z-index: 5; /* Ensure it's above the image */
    border-radius: 1em;
}

.prod_container img {
  border-radius: 1em;
  width: 100%;
  height: 100%;
  object-fit:cover;
  opacity: 1;

}

/* Interactive Image Motion */
.interactive-img {
  transition: transform 0.3s ease;
  transform-style: preserve-3d;
}

.wood-button:hover {
  border: 3px solid white;
    color:white;
    box-shadow:
    inset 0 6px 10px rgba(255, 255, 255, 0.3),
    inset 0 -8px 12px rgba(0, 0, 0, 0.4),
}

/* STYLE FOR SLIDER */

.slider {
  background: linear-gradient(to bottom, #000000ec 1%, rgba(255, 255, 255, 0) 100%);

  z-index: 1;
  position: relative;
  /* bottom:30px; */
  width: 100%;
  height: 80vh;
  overflow: hidden;

  background-size: cover;
}

@keyframes wiggleAndColor {
  0% {
    transform: rotate(0deg);
    color: black;
  }
  10% {
    transform: rotate(-5deg);
    color: white;
  }
  20% {
    transform: rotate(5deg);
    color: red;
  }
  30% {
    transform: rotate(-4deg);
    color: black;
  }
  40% {
    transform: rotate(4deg);
    color: white;
  }
  50% {
    transform: rotate(-3deg);
    color: red;
  }
  60% {
    transform: rotate(3deg);
    color: black;
  }
  70% {
    transform: rotate(-2deg);
    color: white;
  }
  80% {
    transform: rotate(2deg);
    color: red;
  }
  90% {
    transform: rotate(0deg);
    color: black;
  }
  100% {
    transform: rotate(0deg);
    color: black;
  }
}
  #sample_h2 * {
  color: black;
}
 #sample_h2 {
  color: black;
  font-size: 1.5em;
  animation: wiggleAndColor 2s ease-in-out 2;
  margin-top: 10px;
  width: 300px;

 }
 #sample_h2:hover{
  border:2px black;
 }
 
 .products_link {
  animation: wiggleAndColor 2s ease-in-out 2;
 }
.slider-container {
  display: flex;
  align-items: center;
  /* width: 500%; */
  height: 100%;
  transition: transform 0.5s ease-in-out;
}

.slide {
  height: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  display: none;
}

.slide.active {
  opacity: 1;
  height: 100%;
  width: 100%;
  display: flex;
  /* flex-wrap: wrap; */
  justify-content: center;
  align-items: center;
  /* flex-direction: row-reverse; */
  animation: fade 1s ease-in-out;
}

@keyframes fade {
  from {opacity: 0.3;}
  to {opacity: .8;}
}

.slide img {
  position: absolute;
  top:0;
  left:0;
  z-index: -5;

  width: 100%;
  height:auto;
  object-fit: cover;
  box-shadow: 5px 5px 12px 5px rgb(0, 0, 0);
}



.wood-interactive {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 40vh;
  background:linear-gradient(to bottom, #e3b47e 30%, rgba(255, 255, 255, 0) 100%);
  background-size: 200% 200%;
  /* background-blend-mode: overlay; */
  transition: background-position 0.2s ease;

}

.caption h2 {
  color: #d49e5f;
}
.caption {

  width: 70vw;
  font-size: 2em;
  color: white;
  background-color: rgba(0, 0, 0, 0.758);
  padding: 15px 35px;
  border-right: 1px solid red;
  border-left: 1px solid red;
  border-radius: 10px;
  z-index: 2;
}
.decewooodcraft {
  width: 70vw;
  font-size: 25px;  
  border-radius: 1rem;
  padding:25px;
  transition: 1s ease;
}
.decewooodcraft:hover {
  color:white;
  background-color: rgba(97, 97, 97, 0.226);
  border-radius: 1rem;
  transition: 1s ease;

}
.slider-btn {
  border-radius: 10%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2em;
  color: white;
  background-color: rgba(0, 0, 0, 0.4);
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 10;
}

.slider-btn.prev {
  left: 10px;
}
.slider-btn.next {
  right: 10px;
}
.slider-btn:hover {
  background-color: rgba(138, 138, 138, 0.4);
}

/* Add this to your CSS file or inside a <style> tag */
@keyframes slideInFromLeft {
  from {
    transform: translateY(+100%);
    opacity: 0;
  }
  to {
    transform: translateY(40%);
    opacity: 1;
  }
}

@keyframes slideInFromBottom {
  from {
    /* transform: translateY(100%); */
    opacity: 0;
  }
  to {
    /* transform: translateY(0); */
    opacity: .7;
  }
}

.slide .caption,
.slide img {
  transition: none; /* Disable default transitions for animation */
}

.slide.animate .caption {
  animation: slideInFromLeft 2s ease forwards;
}

.slide.animate img {
  z-index: 0;
  animation: slideInFromBottom 1s ease forwards;
}

.delimiter {
  background-image: url('images/logo.jpeg');
  background-position: center;

  height: 10px;
  background-color: black;
  width: 95%;
  align-self: center;
  border-top: 1px solid red;
  border-bottom: 1px solid red;
}

.delimiter-container {
    position: relative; /* Essential: This will be the positioning context for the absolute circle */
    width: 90%; /* Adjust as needed, e.g., 90% or a fixed width */
    margin: 40px auto; /* Centers the container horizontally and adds vertical spacing */
    display: flex; /* Helps to center the HR and manage positioning */
    align-items: center; /* Vertically aligns items within the container (like the HR) */
    justify-content: center; /* Horizontally aligns items within the container (not strictly needed for HR but good practice) */
}

.delimiter-container {
  z-index: 3;
  height: 5px;
    position: relative;
    top:-40px;
    width: 100%;
    margin: 40px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.delimiter-line {
    flex-grow: 1;
    background-color: black;
    height: 15px;
    margin: 0;
    border:black;
}

.delimiter-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: black;
    border: 2px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
}
@keyframes rotater {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg)}
}

.delimiter-circle img {
    width: 100%;
    display: block;
    object-fit: cover;
    animation-name: rotater;
    animation-delay: 2s;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: auto;
    animation-timing-function:ease-in-out;

}

#samples {
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #e3b47e;
  background: linear-gradient(to top, #e3b47e 60%, #e3b47e00 100%);

}

#sample_h2 {
  height: 70px;
  margin-bottom: 15px;
  transition: .3s ease;
  border: 2px solid red;
}
#sample_h2:hover {
  color:#ca7f3e;
  font-display:swap;
  transform: .3s ease-out;
}

.products_container2 {
  border-radius: 1rem;
  padding:20px 0px;
  mix-blend-mode: multiply;
  /* margin-top:0px; */
  padding-left:0px;
  z-index: 5;
  width: 95vw;
  height: 50vh;
  display: flex;
  
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  margin: auto;
  /* background-color: #e3b47e; */
}

.wood-interactive {
  text-align: center;
  text-wrap: wrap;
  font-size: large;
}
.wood-interactive *{
  margin: 0;
  padding: 0;
}


@media (max-width: 480px) {
  .products_container2 {
    background-attachment: fixed;
    width: 100vw;
    height: fit-content;
    margin-bottom: 20px;
  }
  a, .prod_container, .prod_container > img {
    opacity: 1;
  }
  .slider-btn {
    top:90%;
  }
  .prod_container {
    width: 80vw;
    height: 80vw;
    aspect-ratio: 1 / 1;
    display: block;
  }
  .products_container {
    background-attachment: fixed;
  }

  .slider-container {
    /* display: block; */
    width: 100vw;
    height:70vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    
  }
  .slider {
    height: 70vh;
    width: 100vw;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .slider-container,
  .slide {
    height: 70vh;
  }
  .caption {
    position: relative;
    top:-10vh;
    width: 90vw;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .caption p {
    text-align: center;
    margin-top: 5px;
    /* margin-bottom: 10px; */
  }

  .slide.active{
    width: 100%;
    min-height: 65vh;
  }
  .slide.active > img {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-attachment: fixed;

  }

  #sample_h2 {
    height: auto;
    margin: 20px 5px;
    padding: 10px;
    width: 80vw;
    font-size: 1.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: wiggleAndColor; 
    /* Daca ceva e in neregula sterge ultima linie mai sus animation */
  }
  .prod_name {
    visibility:visible;
  }
  #samples {
    height: auto;
  }
  .delimiter-container{
    width: 100vw;
    z-index:100;
    /* position: absolute; */
    top:90%;
    left:-2px;
    margin:0px;

  }
  #sample_h2 {
    font-size: 1.2em;
  }
  .interactive-p {
    padding:5px;
    font-size: 1em;
  }

  .wood-interactive {
    padding:5px;
    height: 250px;
  }

  .slide,
  .caption {
    position: relative;
    z-index: 3;
    font-size: .9em;
  }
  .slider-container {
    background-color: #d3a673af
  }

  .decewooodcraft {
    font-size: 1rem;
    width: 85vw;
  
  }

}