header {
  width: 100%;
  height: 30%;
  border-bottom: dashed rgb(119, 3, 23);
  text-align: right;
}
body {
  padding: 7%;
  margin-top: 0%;
  position: relative;
  text-align: center;
}
table {
  width: 90%;
  max-width: 2000px;
  text-align: bottom;
}
table,
th,
td {
  border: 1px dashed transparent;
  /* margin: auto; */
}
.priceTabel {
  width: 90%;
  position: relative;
  /* top: -10%; */
  top: 0%;
  float: top;
}
.zmironimHeader {
  width: 80%;
  margin: auto;
  left: 10%;
  position: relative;
}
.hidden {
  visibility: hidden;
}

.btnMinimize {
  position: relative;
  width: 80%;
  left: 10%;
}
.imgContainerFull {
  position: relative;
  top: -250px;
  left: 400px;
}
h1 {
  color: rgb(4, 100, 243);
  font-size: 350%;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
.slider-container {
  width: 100%;
  overflow: hidden;
  height: auto;
  border-radius: 10%;
  border: 3px dashed rgb(81, 182, 250);
  text-align: center;
  padding: 1%;
  display: flex;
  max-height: 100%;
  background-color: bisque;
}
.slider {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 175%; /* Width of slider = number of slides * 100% */
  transition: transform 0.5s ease-in-out; /* Add transition for smooth sliding */
  height: fit-content;
  z-index: 6;
}
.slide {
  float: left;
  width: 14%; /* Width of each slide = 100% / number of slides */
  aspect-ratio: 1/1;
}

.circle-div {
  width: 25%; /* Adjust the width and height as needed to create your desired circle size */
  height: 25%;
  border-radius: 50%; /* Use border-radius property with a value of 50% to create a circle */
  /* Set the background color for your circle */
  border: 8px solid white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay-div {
  position: absolute; /* Set the overlay div position to absolute so that it can be positioned relative to the container */
  bottom: 10%; /* Position the overlay div at the top of the container */
  left: 10%; /* Position the overlay div at the left of the container */
  background-color: rgb(23, 172, 231);
  padding: 2%;
}

.price {
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  font-size: 2vw;
  color: white;
}

@media (max-width: 600px) {
  .price {
    font-size: 1vw;
  }
}

@media (max-width: 300px) {
  .price {
    font-size: 0.5vw;
  }
}

.nis {
  bottom: -30%;
  float: center;
  position: absolute;
  color: #fcf9f9;
  font-size: x-large;
}
.deatailes {
  display: none;
  position: relative;
  max-width: 100%;
  border: 3px solid black;
  width: 400px;
  height: 100%;
  background-color: rgb(250, 249, 248);
}
.nis:hover + .deatailes {
  display: block;
}
.item {
  width: 500;
  height: 500px;
  background-color: black;
  position: absolute;
  margin-top: 550px;
  float: center;
  text-align: right;
}
.itemChiled {
  background-color: rgb(253, 250, 250);
  /* display: none; */
  text-align: center;
  opacity: 0.9;
  z-index: 5;

  position: absolute;
  padding-bottom: 40px;
  top: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.writing {
  display: block;
  color: white;
  margin: auto;
  font-size: xx-large;
  text-align: right;
  position: absolute;
  float: right;
}

.item:hover > .itemChiled {
  display: block;
}
.itemChiled:hover > .writing {
  display: block;
}
.hovertest {
  visibility: hidden;
}

.toInsertShort:hover > {
  background-color: #ff0000;
}

.elementCarouselContainer {
  width: 100%;
  height: 100%;
  margin: 1%;
  flex: 1;
}
.productContainer {
  position: relative;
  max-width: 100%;
  width: 100%;
  height: 100%;
  background-color: transparent;
  display: flex;
  align-items: start;
  justify-content: center;
  flex-wrap: wrap;
}
.productButton {
  align-self: start;
}
.productImgWrapper {
  width: 100%;
  height: 85%;
}
.productButtonWrapper {
  width: 100%;
  height: 15%;
  display: flex;
  justify-content: center;
}
.productButton {
  position: absolute;
}
.productImg {
  height: 120%;
}
.hoverContainer {
  width: 100%;
  height: 50%;
  position: absolute;
  display: flex;
  align-items: start;
  z-index: 5;
}
.tabelContainer {
  margin-top: 100px;
  background-color: rgb(250, 251, 252);
  border-top: dashed rgb(119, 3, 23);
  text-align: center;
}

.generalHovarTabelContainer {
  position: relative;
  text-align: center;
  display: flex;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3%;
}
.access {
  display: flex;
  margin-top: 25px;
  width: 100%;
  justify-content: center;
  height: 7%;
}
#btnAccess {
  position: relative;
  margin-left: 2%;
  font-size: large;
}

.wrapperCarouselAccessButtons {
  display: flex;
  flex-direction: column;
}

.linkWitheSpace {
  margin-left: 20px;
}
.whyUs {
  width: 100%;
}
.whyUsContainer {
  width: 100%;
  margin-top: 5%;
}
.mainContainer {
  position: relative;
  width: 100%;
  margin: auto;
}